@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");

/*————————————————————*/
/* Variables */
:root {
  --white: #ffffff;
  --black: #000000;
  --blue-light: #00b2e2;
  --blue-dark: #002b49;
  --footer: #0a2540;
  --label-offset: 20%;
}

/*————————————————————*/
/* Global */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background-color: #f2f2f2;
}
/*————————————————————*/
#page-curtain {
  transition: opacity 0.6s ease;
}
#page-curtain.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/*————————————————————*/
/* Navbar */
.navbar {
  background-color: #0e2648 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar .nav-link {
  color: var(--white) !important;
  transition: color 0.3s ease;
}
.navbar .nav-link:hover {
  color: var(--blue-light) !important;
}

/*————————————————————*/
/* Scroll Indicator */
#scroll-indicator {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-size: 2rem;
  color: var(--white);
  cursor: pointer;
  animation: bounce 2s infinite;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
#scroll-indicator:hover {
  opacity: 1;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(8px);
  }
  60% {
    transform: translateX(-50%) translateY(4px);
  }
}

/*————————————————————*/
/* Banner Carousel */

/* Leyenda suave encima de cada título */
.slide-subtitle {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255); /* blanco semi-transparente */
  opacity: 0.5;
  margin-bottom: 0.25rem;
  letter-spacing: 0.5px;
}

#banner-carousel {
  background-color: var(--blue-dark);
}

#bannerCarousel .carousel-item,
#banner-carousel .carousel-item {
  /* fuerza min-height y height */
  min-height: 300px !important;
  height: auto !important;
  padding: 1rem 0;
}

#banner-carousel .carousel-inner .row {
  display: flex !important;
  flex-wrap: nowrap !important;
}
#banner-carousel h2,
#banner-carousel p {
  color: var(--white);
}
#banner-carousel .carousel-control-prev-icon,
#banner-carousel .carousel-control-next-icon {
  filter: invert(90%);
}

/* Imagen vertical con ratio fijo */
.image-col {
  aspect-ratio: auto !important;
  max-height: 600px;
  overflow: hidden;
}
.image-col img {
  /* La imagen nunca superará esa altura */
  max-height: 600px !important;
  width: auto !important;
  /* Centrado horizontal si queda más estrecha */
  display: flex;
  margin: 0 auto;
  /* object-fit: cover; o cover si prefieres recorte */
}

/*————————————————————*/
/* Pie Container y Slices */
.pie-container {
  position: relative;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.pie-container::before,
.pie-container::after {
  content: "";
  position: absolute;
  z-index: 2;
}
.pie-container::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.pie-container::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.slice {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: var(--bg1);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: background-size 0.5s ease;
}
.slice::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 1),
      rgba(70, 70, 70, 0.5)
    ),
    var(--bg2);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.slice:hover::before {
  opacity: 1;
}

/* Clip-path para cada sector */
#sec1 {
  clip-path: polygon(50% 50%, 100%50%, 100%0%, 50%0%);
  --bg1: url("../img/circunferencia2.png");
  --bg2: url("../img/circunferencia_solo_fondos.png");
}
#sec2 {
  clip-path: polygon(50% 50%, 50%0%, 0%0%, 0%50%);
  --bg1: url("../img/circunferencia2.png");
  --bg2: url("../img/circunferencia_solo_fondos.png");
}
#sec3 {
  clip-path: polygon(50% 50%, 0%50%, 0%100%, 50%100%);
  --bg1: url("../img/cir4.png");
  --bg2: url("../img/circunferencia_solo_fondos.png");
}
#sec4 {
  clip-path: polygon(50% 50%, 50%100%, 100%100%, 100%50%);
  --bg1: url("../img/circunferencia2.png");
  --bg2: url("../img/circunferencia_solo_fondos.png");
}

/* Label y Descripción */
.slice .label,
.slice .desc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  z-index: 3;
  transition: top 0.5s ease, left 0.5s ease, transform 0.5s ease,
    opacity 0.5s ease;
  font-family: "Poppins", sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.slice .label {
  opacity: 1;
  max-width: 40%;
  transform: translate(-49%, -50%) scale(1);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.slice:hover .label {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

/* Descripción adaptable */
.slice .desc {
  max-width: 30%;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  padding: 0.25rem;
  color: var(--black);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Posicionamiento y animación de cada desc */
#sec1 .desc {
  transform: rotate(45deg) translate(140px) scale(0.8);
}
#sec2 .desc {
  transform: rotate(135deg) translate(140px) scale(0.8);
}
#sec3 .desc {
  transform: rotate(225deg) translate(140px) scale(0.8);
}
#sec4 .desc {
  transform: rotate(315deg) translate(140px) scale(0.8);
}

#sec1:hover .desc {
  top: calc(50% - 15%);
  left: calc(50% + 15%);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#sec2:hover .desc {
  top: calc(50% - 15%);
  left: calc(50% - 15%);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#sec3:hover .desc {
  top: calc(50% + 15%);
  left: calc(50% - 15%);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#sec4:hover .desc {
  top: calc(50% + 15%);
  left: calc(50% + 15%);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Centrado de labels */
#sec1 .label {
  top: calc(45% - var(--label-offset));
  left: calc(50% + var(--label-offset));
}
#sec2 .label {
  top: calc(45% - var(--label-offset));
  left: calc(50% - var(--label-offset));
}
#sec3 .label {
  top: calc(40% + var(--label-offset));
  left: calc(50% - var(--label-offset));
}
#sec4 .label {
  top: calc(40% + var(--label-offset));
  left: calc(50% + var(--label-offset));
}

/* Ripple minimalista */
.btn,
.btn-primary,
#sheet-go {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 10%,
      transparent 10.01%
    )
    center/10px 10px no-repeat;
  opacity: 0;
  transition: transform 0.6s, opacity 0.8s;
  transform: scale(10);
}
.btn:active::after {
  opacity: 1;
  transform: scale(0);
  transition: 0s;
}

/*————————————————————*/
/* Media Queries */

/* Mobile: Banner 80/20 */
@media (max-width: 767.98px) {
  /* 1) Asegura que el row mantenga las dos columnas en fila */
  #bannerCarousel .carousel-inner .row,
  #banner-carousel .carousel-inner .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  /* 2) Texto 70%, imagen 30% */
  #banner-carousel .text-col {
    flex: 0 0 65% !important;
    max-width: 65% !important;
  }
  #banner-carousel .image-col {
    flex: 0 0 35% !important;
    max-width: 35% !important;
  }

  /* 3) Ajusta padding para respirar */
  #banner-carousel .text-col {
    padding: 1rem;
  }
  /* 4) Imagen al 100% de su columna, manteniendo proporción */
  #banner-carousel .image-col img {
    width: 100% !important;
    height: 280px !important;
    max-height: none !important;
    object-fit: cover;
  }
}

/* Desktop: Banner 60/40 */
@media (min-width: 768px) {
  #banner-carousel .text-col {
    flex: 0 0 60%;
    max-width: 60%;
  }
  #banner-carousel .image-col {
    flex: 0 0 40%;
    max-width: 40%;
  }
}

/* Pie-container responsive */
@media (max-width: 768px) {
  .pie-container {
    width: 90vw;
    height: 90vw;
  }
  .slice .label {
    font-size: 1rem;
    line-height: 1.2;
  }
}

html.no-hover .pie-container .slice,
html.no-hover .pie-container .slice * {
  transition: none !important;
}

/* nada de zoom ni overlay en hover */
html.no-hover .pie-container .slice:hover {
  background-size: cover !important;
}
html.no-hover .pie-container .slice::before,
html.no-hover .pie-container .slice:hover::before {
  opacity: 0 !important;
}

/* el título siempre visible */
html.no-hover .pie-container .slice .label,
html.no-hover .pie-container .slice:hover .label {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* la descripción siempre oculta */
html.no-hover .pie-container .slice .desc,
html.no-hover .pie-container .slice:hover .desc {
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
}

/* Sugerencia: indica que se hace scroll vertical en las rebanadas */
html.no-hover .pie-container .slice {
  touch-action: pan-y;
}

/* ——— Guard de desplazamiento: evita taps accidentales mientras haces scroll ——— */
body.is-scrolling .pie-container .slice {
  pointer-events: none;
}

/* Enfasis de foco accesible en slices */
.slice:focus-visible {
  outline: 3px solid #00b2e2;
  outline-offset: 4px;
  filter: saturate(1.1);
}

/* Nada de :hover cuando el dispositivo NO tiene hover (móvil) */
@media (hover: none) and (pointer: coarse) {
  .slice:hover .label {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .slice:hover::before {
    opacity: 0 !important;
  }
  /* Evita “parpadeos” al hacer scroll con el dedo */
  .slice:hover {
    background-size: cover !important;
  }
}

/* Respeta usuarios que piden menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}