/* ===== Fuentes ===== */
@font-face {
  font-family: "Dunbar Tall";
  src: url("assets/fonts/DunbarTall-Regular.ttf") format("truetype");
  font-weight: 400; /* Regular */
  font-display: swap;
}

@font-face {
  font-family: "Dunbar Tall";
  src: url("assets/fonts/DunbarTall-Medium.ttf") format("truetype");
  font-weight: 500; /* Medium */
  font-display: swap;
}

@font-face {
  font-family: "Dunbar Tall";
  src: url("assets/fonts/DunbarTall-Bold.ttf") format("truetype");
  font-weight: 700; /* Bold */
  font-display: swap;
}

@font-face {
  font-family: "Dunbar Tall";
  src: url("assets/fonts/DunbarTall-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* ===== Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Dunbar Tall", sans-serif;
}

/* ===== Main (Tailwind: fixed top-0 w-full h-full) ===== */
.main {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

/* ===== Fondo ===== */
.bg {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Mobile first (Tailwind: w-full h-full object-cover object-[2.2%_50%] origin-bottom) */
.bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 3% 50%;
  transform: scale(1.06); /* scale-100; súbelo a 1.1 para que crezca hacia arriba */
  transform-origin: bottom;
}

/* ===== Carrusel (encima del fondo) ===== */
.carousel {
  position: fixed;
  z-index: 20;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* --u = "1px del diseño" de móvil (diseño hecho en 360 × 800).
     Crece/se achica con la pantalla sin pasarse ni de ancho ni de alto.
     360×800 → 1px | 400×956 → 1.11px | 469×928 → 1.16px
     Uso: calc(MEDIDA_DEL_DISEÑO * var(--u)) */
  --u: min(calc(100vw / 360), calc(100dvh / 800));

  /* Espacio de arriba: 56 del diseño + la mitad del alto que sobre
     en teléfonos más altos que el diseño (así no queda todo pegado arriba).
     Cambia el 56 para bajarlo/subirlo. */
  --carousel-top: calc(56 * var(--u) + (100dvh - 800 * var(--u)) / 2);
  padding-top: var(--carousel-top);
}

/* Grupo logo + producto, uno debajo del otro */
.carousel__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u)); /* separación logo ↔ producto */
}

/* Caja del logo: los logos se enciman y solo se ve el activo */
.carousel__logo {
  position: relative;
  width: calc(207 * var(--u));
  height: calc(121 * var(--u));
}

/* Caja del producto */
.carousel__product {
  position: relative;
  width: calc(315 * var(--u));
  height: calc(242 * var(--u));
}

/* Texto "Sorprendentemente simple" */
.sorprendeme {
  align-self: stretch; /* ocupa el 100% del ancho del grupo */
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-family: "Dunbar Tall", sans-serif;
  font-size: calc(26 * var(--u));
  font-style: normal;
  line-height: normal;
}

.sorprendeme__light {
  font-weight: 400; /* Regular */
}

.sorprendeme__bold {
  font-weight: 800; /* ExtraBold */
}

/* ===== Persona + texto ===== */
.carousel__hero {
  position: relative;
  width: 100%;
  flex: 1; /* ocupa todo el alto que sobra hasta abajo */
  min-height: 0;
}

/* Persona: pegada abajo a la izquierda.
   Las posiciones se miden desde la orilla izquierda del diseño de 360
   (calc(50% - 180u)), así queda igual aunque la pantalla sea más ancha. */
.hero__person {
  position: absolute;
  /* Se sale un poco por abajo para que el "*vs BIC Sensitive" que viene
     dentro de persona1.png no se vea (en PC sí se ve) */
  bottom: calc(-40 * var(--u));
  left: calc(50% - 180 * var(--u) - 54 * var(--u)); /* 54 = cuánto se sale por la izquierda */
  width: calc(325 * var(--u));                      /* tamaño de la persona */
  aspect-ratio: 1312 / 1152;                        /* proporción de persona1.png */
  z-index: 20; /* por encima del texto */
}

.hero__person .carousel__slide {
  object-position: left bottom;
}

/* Solo persona 2 (Flex 5) en móvil: un poco más a la derecha y más arriba
   translate(X, Y): X positivo = derecha | Y negativo = arriba */
.hero__person .carousel__slide[data-slide="1"] {
  transform: translate(calc(12 * var(--u)), calc(-30 * var(--u)));
}

/* Ambos textos (Flex 3 y Flex 5) en móvil: más arriba y a la derecha
   translate(X, Y): X positivo = derecha | Y negativo = arriba */
.hero__copy {
  transform: translate(calc(20 * var(--u)), calc(-50 * var(--u)));
}

/* Solo texto 1 (Flex 3) en móvil: menos a la derecha porque es más largo
   y se salía de la pantalla. Cambia estos números para moverlo solo a él */
.hero__copy[data-slide="0"] {
  transform: translate(calc(10 * var(--u)), calc(-20 * var(--u)));
}

/* Solo persona 1 (Flex 3) en móvil: un poco más arriba.
   Ojo: si se sube mucho se empieza a ver el "*vs BIC Sensitive" de la imagen */
.hero__person .carousel__slide[data-slide="0"] {
  transform: translateY(calc(-8 * var(--u)));
}

/* Texto: solo del lado derecho */
.hero__text {
  position: absolute;
  /* Desde abajo, a la altura de la cara de la persona */
  bottom: calc(105 * var(--u));
  left: calc(50% - 180 * var(--u) + 158 * var(--u)); /* 158 desde la orilla izquierda del diseño */
  z-index: 10; /* por debajo de la persona */
  width: calc(165 * var(--u));
  display: grid; /* los textos de cada slide se enciman en la misma celda */
  align-items: end; /* si un texto es más corto, se alinea abajo */
  color: #ffffff;
  font-family: "Dunbar Tall", sans-serif;
  font-size: calc(20 * var(--u));
  font-style: normal;
  line-height: normal;
}

.hero__copy {
  grid-area: 1 / 1;
  font-weight: 500; /* Medium: "con menos irritación*" */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__copy.is-active {
  opacity: 1;
}

.hero__copy strong {
  font-weight: 800; /* el 750 del diseño → ExtraBold (la Bold no es válida) */
}

.hero__note {
  display: block;
  margin-top: calc(6 * var(--u));
  font-size: calc(10 * var(--u));
}

/* Imágenes de cada slide (logo, producto...): se enciman y solo se ve la activa */
.carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.carousel__slide.is-active {
  opacity: 1;
}

/* Indicador de página: pastilla abajo al centro (igual en móvil y PC) */
.carousel__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30; /* encima de la persona */
  display: inline-flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  border-radius: 27px;
  background: rgba(0, 0, 0, 0.7);
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel__dot.is-active {
  background: #f19800;
}

/* Flechas: ocultas en móvil, visibles en PC */
.carousel__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #f19800; /* color de la flecha (el SVG usa currentColor) */
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.carousel__arrow svg {
  width: 14px;
  height: 14px;
}

.carousel__arrow--prev {
  left: 24px;
}

.carousel__arrow--next {
  right: 24px;
}

/* PC (desde 1200px) */
@media (min-width: 1200px) {
  .bg__img {
    object-fit: fill;
    object-position: center;
    transform: none;
  }

  /* PC: dos columnas, 50% info (izquierda) y 50% persona (derecha) */
  .carousel {
    flex-direction: row;
    align-items: stretch;
    padding: 0;

    /* --u = "1px del diseño" (diseño hecho en 1200 × 800).
       Crece/se achica con la pantalla, sin pasarse ni de ancho ni de alto.
       1200×800 → 1px | 1532×925 → 1.16px | 1920×925 → 1.16px | 1920×1080 → 1.35px
       Uso: calc(MEDIDA_DEL_DISEÑO * var(--u)) */
    --u: min(calc(100vw / 1200), calc(100vh / 800));

    --carousel-top: calc(120 * var(--u)); /* espacio de arriba en PC: cambia el 120 para bajarlo/subirlo */
  }

  .carousel__logo {
    width: calc(265 * var(--u));
    height: calc(130 * var(--u));
  }

  .carousel__product {
    width: calc(424 * var(--u));
    height: calc(335 * var(--u));
  }

  .carousel__info {
    width: 50%;
    align-items: flex-start;
    gap: calc(10 * var(--u));
    padding-top: var(--carousel-top);
    padding-left: calc(100 * var(--u));
  }

  .sorprendeme {
    width: calc(360 * var(--u));
    font-size: calc(32 * var(--u));
  }

  /* ----- Columna derecha: texto arriba, persona abajo ----- */
  .carousel__hero {
    width: 50%;
    height: 100%;
    flex: none;
    /* Recorre texto + persona a la izquierda (despegados de la orilla derecha).
       Cambia el 50 para moverlos más (80) o menos (30). */
    transform: translateX(calc(-50 * var(--u)));
  }

  .hero__text {
    top: var(--carousel-top); /* misma altura que el logo */
    bottom: auto;
    left: 0;
    right: 0;
    width: calc(560 * var(--u));  /* medida del diseño */
    height: calc(117 * var(--u));
    max-width: 100%;
    margin-inline: auto;          /* centrado en la columna */
    align-items: start;
    text-align: center;
    font-size: calc(40 * var(--u)); /* "con menos irritación*" (weight 500) */
  }

  .hero__copy strong {
    display: block;                 /* título en su propio renglón */
    font-size: calc(52 * var(--u)); /* diseño: 750 → ExtraBold */
    white-space: nowrap; /* que "Afeitado extra suave" no se parta */
  }

  /* Flex 5: su título sí va en dos renglones, como en el diseño */
  .hero__copy[data-slide="1"] strong {
    white-space: normal;
  }

  .hero__note {
    display: none;   /* en PC la nota ya viene en la imagen persona1.png */
  }

  .hero__person {
    top: calc(var(--carousel-top) + 137 * var(--u)); /* debajo del texto: 117 de alto + 20 de aire */
    bottom: 0;       /* en PC sí se ve el "*vs BIC Sensitive" de la imagen */
    left: 0;
    width: 100%;
    aspect-ratio: auto; /* en PC el alto lo dan top/bottom */
  }

  .hero__person .carousel__slide {
    object-position: center bottom;
  }

  .hero__person .carousel__slide[data-slide="0"],
  .hero__person .carousel__slide[data-slide="1"] {
    transform: none; /* en PC las personas no se recorren */
  }

  .hero__copy,
  .hero__copy[data-slide="0"] {
    transform: none; /* en PC los textos no se recorren */
  }

  .carousel__arrow {
    display: flex;
  }
}