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

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

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Fondo: toda la página naranja + gota blanca encima ---------- */
/* La gota es más ancha que la pantalla: se recorta a los lados para que
   no haya scroll horizontal. Va en html Y body porque en móvil, si solo
   está en body, el navegador lo pasa a la ventana y a veces lo ignora.
   "clip" recorta sin volverlo contenedor con scroll ("hidden" = respaldo). */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: #f59605; /* naranja BIC */
  position: relative; /* referencia para la gota */
}

/* Todo el contenido por encima de la gota */
.inicio,
.footer {
  position: relative;
  z-index: 1;
}

/* Sin z-index: así la gota (z-index -1) puede ir detrás del inicio y del footer */
.encendedores {
  position: relative;
}

/* Gota blanca (assets/gota.svg): va sobre el naranja pero detrás de
   todo el contenido. Se amarra a .encendedores y se estira con esa
   sección, así en cualquier teléfono:
   - su curva de arriba pasa justo antes de "MAXI"
   - su parte de abajo (la U) queda justo arriba del logo del footer
   MÓVIL (frame de 360px en Figma): la gota mide 1643px → 456.4vw. */
.encendedores::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -175vw;
  width: 456.4vw;
  top: calc(-70.4% - 163px); /* sube para que la curva quede ~30px antes de MAXI */
  bottom: -157px; /* baja ~40px dentro del footer, arriba del logo */
  background: url("assets/gota.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* ---------- Inicio ---------- */
.inicio {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* alto real visible en móvil */
}

/* 60% / 40% del alto de .inicio */
.inicio__izquierda {
  flex: 3;
  min-height: 0;
  padding-top: clamp(10px, 12dvh, 120px); /* entre 10 y 120 según el alto de la pantalla */
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 31dvh - 197px, 100px);
}

.inicio__derecha {
  flex: 2;
  min-height: 0;
}

/* .home llena a .inicio__derecha para que su imagen tome ese alto */
.home {
  height: 100%;
}

/* ---------- Título (móvil) ---------- */
.titulo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 16px;
  text-align: center;
  color: #fff;
  font-family: "Dunbar Tall", sans-serif;
}

.titulo__linea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.titulo__linea:first-child {
  margin-bottom: 12px;
}

.titulo h1,
.titulo h2 {
  font-size: 32px;
  font-weight: 800; /* ExtraBold: lo más cercano al 750 de Figma */
  line-height: normal;
  letter-spacing: 1.28px;
}

.titulo__logo {
  height: 36px;
  width: auto;
}

/* ---------- Imágenes: se ajustan a su tercio sin deformarse ---------- */
.mano img,
.home img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* La mano ocupa el 60% del alto de .inicio__izquierda (el cuadro rojo) */
.mano {
  width: 100%;
  height: 60%;
}

.mano img {
  width: 100%;
  height: 140%;
  object-fit: contain;
  object-position: left top; /* brazo pegado a la izquierda, imagen pegada arriba */
  /* el PNG trae ~17% transparente arriba: lo subimos para que la
     separación con el título sea la del gap y no la del archivo */
  transform: translateY(-17%);
}

.home img {
  object-position: center;
}

/* ---------- Encendedores (Maxi, Mini, Slim, EZ Reach) ---------- */
.encendedores {
  margin-top: 158px;
  display: flex;
  flex-direction: column;
  gap: 64px; /* entre cada encendedor: a ojo del mockup */
  padding: 0 16px 64px;
  font-family: "Dunbar Tall", sans-serif;
  color: #000;
  text-align: center;
  text-transform: uppercase;
}

.encendedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* textos → imagen: a ojo del mockup */
}

.encendedor__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* a ojo del mockup */
}

.encendedor__nombre {
  font-size: 32px;
  font-weight: 800; /* ExtraBold: lo más cercano al 750 de Figma */
  line-height: normal;
  letter-spacing: 1.28px;
}

.encendedor__linea {
  width: 72px;
  height: 3px;
  background: #f7a21b; /* naranja BIC */
  border-radius: 3px;
}

.encendedor__colores {
  font-size: 16px;
  font-weight: 500; /* Medium */
  line-height: normal;
  letter-spacing: 0.64px;
}

.encendedor__imagen {
  width: 84%;
}

.encendedor__imagen img {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================================================================
   ANIMACIONES
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* arranca rápido, frena suave */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* con un pequeño rebote */
}

/* ---------- 1) Entrada al cargar la página (inicio) ----------
   Orden: "Si prende a la" → "primera, es" → logo (pop) → mano → encendedores
   Usa animation + fill-mode "both": no necesita JS. */

/* El texto sube desde detrás de una línea invisible */
.titulo h1,
.titulo h2 {
  overflow: hidden;
}

.titulo h1 span,
.titulo h2 span {
  display: inline-block;
  animation: subir-texto 0.9s var(--ease-out) both;
}

.titulo h1 span { animation-delay: 0.1s; }
.titulo h2 span { animation-delay: 0.28s; }

@keyframes subir-texto {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* Logo BIC: "pop" como chispa de encendido */
.titulo__logo {
  animation: pop-logo 0.6s var(--ease-pop) 0.6s both;
}

@keyframes pop-logo {
  from { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* Mano: entra desde la izquierda (se anima el contenedor porque
   la imagen ya trae su propio transform) */
.mano {
  animation: entrar-izquierda 1.1s var(--ease-out) 0.35s both;
}

@keyframes entrar-izquierda {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Los tres encendedores suben y luego flotan suavemente */
.home {
  animation: entrar-abajo 1.1s var(--ease-out) 0.55s both;
}

@keyframes entrar-abajo {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

.home img {
  animation: flotar 3.5s ease-in-out 1.7s infinite alternate;
}

@keyframes flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

/* ---------- 2) Encendedores con el scroll (main.js agrega .is-visible) ----------
   Orden: nombre (de arriba) → línea (crece desde el centro)
   → colores (de abajo) → imagen (entra deslizándose de lado, como la mano).
   Solo se ocultan si hay JS (clase .js en <html>), para que sin JS
   el contenido se vea normal. */
.js .encendedor__nombre,
.js .encendedor__linea,
.js .encendedor__colores {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.js .encendedor__nombre {
  transform: translateY(-35px);
}

.js .encendedor__linea {
  transform: scaleX(0);
  transition-delay: 0.25s;
}

.js .encendedor__colores {
  transform: translateY(35px);
  transition-delay: 0.4s;
}

/* Imagen: entra deslizándose de lado, igual que la mano del inicio.
   Maxi y Slim (imagen a la derecha) → entran de derecha a izquierda.
   Mini y EZ Reach (imagen a la izquierda) → entran de izquierda a derecha.
   Aplica igual en móvil y en PC. */
.encendedor {
  --entrada-x: 60px; /* desde la derecha */
}

.encendedor:nth-child(even) {
  --entrada-x: -60px; /* desde la izquierda */
}

.js .encendedor__imagen {
  opacity: 0;
  transform: translateX(var(--entrada-x));
  transition:
    transform 1.1s var(--ease-out) 0.55s,
    opacity 1.1s var(--ease-out) 0.55s;
}

.js .encendedor.is-visible .encendedor__nombre,
.js .encendedor.is-visible .encendedor__linea,
.js .encendedor.is-visible .encendedor__colores,
.js .encendedor.is-visible .encendedor__imagen {
  opacity: 1;
  transform: none;
}

/* Quien tiene activado "reducir movimiento": nada se mueve, solo fade */
@media (prefers-reduced-motion: reduce) {
  .titulo h1 span,
  .titulo h2 span,
  .titulo__logo,
  .mano,
  .home,
  .home img {
    animation: none;
  }

  .js .encendedor__nombre,
  .js .encendedor__linea,
  .js .encendedor__colores,
  .js .encendedor__imagen {
    transform: none;
  }
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 117px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* logo → texto → legal: a ojo del mockup */
  padding: 80px 16px 64px; /* arriba deja espacio para la curva */
  font-family: "Dunbar Tall", sans-serif;
  text-align: center;
}

.footer__logo {
  display: block;
  width: 158px;
  height: 44px;
  object-fit: contain;
}

.footer__texto,
.footer__legal {
  width: 100%;
  max-width: 312px;
  line-height: normal;
}

.footer__texto {
  color: #fff;
  font-size: 24px;
  font-weight: 800; /* ExtraBold: lo más cercano al 750 de Figma */
  letter-spacing: 0.96px;
}

.footer__legal {
  color: #fff9f9;
  font-size: 8px;
  font-weight: 500; /* Medium */
  letter-spacing: 0.32px;
}


@media (min-width: 1200px) {
  /* ---------- Inicio (escritorio): izquierda y derecha en fila ---------- */
  .inicio {
    flex-direction: row;
  }

  /* Gota de escritorio: mismas reglas que en móvil, otras medidas */
  .encendedores::before {
    left: -54.3vw; /* medido del Figma de 1200px */
    width: 215vw;
    top: calc(-83.8% - 296px); /* sube para que la curva quede antes de MAXI */
    bottom: -397px; /* baja hasta arriba del logo del footer */
  }

  /* Título más a la izquierda: deja de ocupar todo el ancho y se recorre */
  .titulo {
    align-self: flex-start;
    margin-left: clamp(20px, 11.11vw - 113.33px, 100px);
  }

  .titulo h1,
  .titulo h2 {
    /* 55px en 1200px de ancho → 75px en 1920px de ancho */
    font-size: clamp(55px, 2.78vw + 21.67px, 75px);
  }

  /* Logo crece junto con el texto (misma proporción que en móvil: 36/32).
     62px en 1200px de ancho → 84px en 1920px de ancho */
  .titulo__logo {
    height: clamp(62px, 3.06vw + 25.33px, 84px);
  }

  /* 60% / 40% del ancho de .inicio (1.5 : 1) */
  .inicio__izquierda,
  .inicio__derecha {
    flex: 1;
    min-width: 0; /* que el contenido no rompa la proporción */
  }

  .inicio__izquierda {
    flex: 1.5;
  }

  /* .home centrado verticalmente en su mitad */
  .inicio__derecha {
    display: flex;
    align-items: flex-end;
    margin-right: 80px; 
  }

  .home {
    /* 400px en 1200px de ancho → 600px en 1920px de ancho */
    width: clamp(400px, 27.78vw + 66.67px, 600px);
    height: clamp(400px, 27.78vw + 66.67px, 600px);
  }

  /* ---------- Encendedores (escritorio): info + imagen en fila ---------- */
  .encendedores {
    padding: 120px;
    gap: 172px; /* separación entre cada encendedor */
  }

  .encendedor {
    flex-direction: row;
  }

  /* Mini y EZ Reach (2º y 4º): info a la derecha, imagen a la izquierda */
  .encendedor:nth-child(even) {
    flex-direction: row-reverse;
  }

  .encendedor__info {
    flex: 1;
  }

  .encendedor__nombre {
    font-size: 50px;
    letter-spacing: 2.4px;
  }

  .encendedor__colores {
    font-size: 18px;
    letter-spacing: 0.96px;
  }

  .encendedor__imagen {
    flex: 2; /* la imagen ocupa el doble que la info, como en el mockup */
    width: auto; /* quita el 84% de móvil */
    min-width: 0;
  }

  /* ---------- Footer (escritorio) ---------- */
  .footer {
    padding: 440px 64px 180px; /* arriba deja espacio para la curva */
    gap: 34px; /* separación logo → texto → legal */
  }

  .footer__logo {
    width: 290px;
    height: 94px;
  }

  /* El texto ocupa todo el ancho del footer (en Figma: 100%) */
  .footer__texto,
  .footer__legal {
    max-width: none; /* quita el 312px de móvil */
  }

  .footer__texto {
    font-size: 44px;
    letter-spacing: 1.76px;
  }

  .footer__legal {
    font-size: 12px;
    letter-spacing: 0.48px;
  }
}

@media (min-width: 1980px) {
  /* ---------- Footer (pantallas muy grandes) ---------- */
  .footer {
    padding-bottom: 200px;
  }
}