/* ==========================================================================
   ESPUMA TORITO — Secciones de la página principal
   Orden: portada · beneficios · productos · modo de uso · cuenta regresiva ·
   pedido · mayoristas · galería · preguntas · pie de página.
   ========================================================================== */

/* ---------- Portada ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--altura-header) + var(--sp-6));
  padding-bottom: var(--sp-7);
  background: var(--blanco);
}

.hero__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

.hero__titulo {
  margin-top: var(--sp-5);
  font-size: var(--fs-hero);
}

.hero .lead {
  max-width: 44ch;
  margin-top: var(--sp-5);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__datos {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: var(--sp-4) clamp(1.25rem, 0.5rem + 3vw, 3rem);
  margin-top: var(--sp-7);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.hero__datos li {
  display: grid;
}

.hero__datos strong {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--negro);
}

/* Lata 3D grande, inclinada, que gira y flota sobre un disco crema */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(480px, 80vh, 720px);
}

.hero__disco {
  position: absolute;
  width: min(92%, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--crema);
}

.hero__disco::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid var(--color-linea);
  border-radius: 50%;
}

.hero__sombra {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 230px;
  height: 30px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(21 16 18 / 0.24), transparent);
  animation: sombra-flota 6s ease-in-out infinite;
}

.hero__flota {
  position: relative;
  animation: flotar 6s ease-in-out infinite;
}

.hero__inclinada {
  rotate: 16deg;
}

.lata3d--hero {
  --alto: clamp(340px, 66vh, 640px);
}

.lata3d--hero .lata3d__cilindro {
  animation-duration: 14s;
}

/* La sombra de piso va aparte (no debe inclinarse con la lata) */
.lata3d--hero::after {
  content: none;
}

.hero__nota {
  position: absolute;
  z-index: 2;
  box-shadow: var(--sombra);
}

/* En celular la lata ocupa casi todo el ancho: etiquetas en las zonas libres
   (la lata se inclina hacia la derecha, así que quedan libres arriba a la
   izquierda y abajo a la derecha) */
.hero__nota--1 { top: 6%; left: 0; }
.hero__nota--2 { bottom: 17%; right: 0; }
.hero__nota--3 { top: 48%; left: 0; }

/* Pista para tocar/girar la lata; se oculta al primer uso (js/lata3d.js) */
.hero__pista {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5em 1em;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  color: var(--grafito);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio-full);
  box-shadow: var(--sombra);
  translate: -50% 0;
  transition:
    opacity var(--dur) var(--ease),
    translate var(--dur) var(--ease);
}

.hero__pista::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  animation: pulso 1.8s ease-out infinite;
}

.hero__pista.oculta {
  opacity: 0;
  translate: -50% 8px;
  pointer-events: none;
}

/* ---------- Beneficios ---------- */
.beneficios {
  padding-block: var(--sp-7);
  background: var(--crema);
  border-bottom: 1px solid var(--color-linea);
}

.beneficios__grid {
  display: grid;
  gap: var(--sp-5) var(--sp-6);
}

.beneficio {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.icono-caja {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--rojo);
  background: var(--blanco);
  border: var(--borde);
  border-radius: var(--radio);
}

.icono-caja svg {
  width: 22px;
  height: 22px;
}

.beneficio h3,
.paso h3,
.ventaja h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  font-stretch: normal;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.beneficio p {
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-texto-suave);
}

/* ---------- Productos ---------- */
.productos {
  display: grid;
  gap: var(--sp-6);
}

/* Las dos latas a la misma escala: igual diámetro, la de 480 ml más baja */
.productos__escenario {
  --alto-ref: clamp(250px, 44vh, 390px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3.5rem, 10vw, 6.5rem);
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
  background: var(--crema);
  border-radius: var(--radio-lg);
}

.productos__lata {
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
}

/* Proporción de cada etiqueta (ancho / alto); la altura la define cada sección */
.lata3d--1000 { --aspecto: 0.4299; }
.lata3d--500 { --aspecto: 0.7164; }

.productos__escenario .lata3d--1000 {
  --alto: var(--alto-ref);
}

.productos__escenario .lata3d--500 {
  --alto: calc(var(--alto-ref) * 0.4299 / 0.7164);
}

.productos__lista {
  display: grid;
  gap: var(--sp-4);
  align-content: center;
}

.producto {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.producto__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.producto h3 {
  font-size: var(--fs-xl);
}

.producto p {
  color: var(--color-texto-suave);
}

.producto__ficha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
}

.producto__ficha div {
  display: flex;
  gap: 6px;
}

.producto__ficha dt {
  color: var(--color-texto-suave);
}

.producto__ficha dd {
  margin: 0;
  font-weight: 700;
}

.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-2);
}

/* ---------- Modo de uso ---------- */
.pasos {
  display: grid;
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
}

.paso {
  padding: var(--sp-6);
}

.paso__numero {
  display: block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--rojo);
}

.paso:nth-child(2) .paso__numero { color: var(--azul); }
.paso:nth-child(3) .paso__numero { color: var(--verde); }

.paso p {
  margin-top: var(--sp-2);
  color: var(--color-texto-suave);
}

.recomendaciones {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  background: var(--amarillo-suave);
  border: 1px solid #F1DF7A;
  border-radius: var(--radio-lg);
}

.recomendaciones__titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.recomendaciones__titulo h3 {
  font-size: var(--fs-xl);
}

.recomendaciones .icono-caja {
  color: var(--negro);
  border-color: #F1DF7A;
}

.recomendaciones .lista-check {
  --check-bg: var(--grafito);
}

/* ---------- Cuenta regresiva ---------- */
.cuenta__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.cuenta h2 {
  margin-top: var(--sp-4);
}

.cuenta p {
  max-width: 46ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--blanco);
}

.cuenta .btn {
  margin-top: var(--sp-6);
}

.cuenta__reloj {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.cuenta__bloque {
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--radio);
}

.cuenta__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 3vw, 3.6rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cuenta__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco);
}

/* ---------- Pedido (calculadora) ---------- */
.pedido,
.mayoristas,
.faq {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

.pedido .lead,
.mayoristas .lead {
  margin-top: var(--sp-5);
}

.pedido h2,
.mayoristas h2,
.faq h2 {
  margin-top: var(--sp-4);
}

.pedido .lista-check {
  margin-top: var(--sp-6);
}

.calculadora,
.formulario {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
  box-shadow: var(--sombra);
}

.calculadora__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--crema);
  border-radius: var(--radio);
}

.calculadora__total {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
}

.calculadora__resumen span:not(.calculadora__total) {
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.calculadora__precio {
  font-weight: 700;
}

/* ---------- Mayoristas ---------- */
.ventajas {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
}

.ventaja {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.ventaja p {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.formulario h3 {
  font-size: var(--fs-xl);
}

.formulario__nota {
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--color-texto-suave);
}

/* ---------- Galería (carrusel horizontal) ---------- */
.galeria__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.galeria__cabecera h2 {
  margin-top: var(--sp-4);
}

.galeria__cabecera p {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--color-texto-suave);
}

.galeria__red {
  margin-top: var(--sp-4);
}

.galeria__controles {
  display: none;
  gap: var(--sp-2);
}

.galeria__boton {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
  background: var(--blanco);
  border: 1px solid rgb(21 16 18 / 0.2);
  border-radius: 50%;
  transition:
    border-color var(--dur-rapida) var(--ease),
    opacity var(--dur-rapida) var(--ease);
}

.galeria__boton:hover:not(:disabled) {
  border-color: var(--negro);
}

.galeria__boton:disabled {
  opacity: 0.35;
  cursor: default;
}

/* La pista llega al borde de la pantalla pero el contenido arranca alineado al contenedor */
.galeria__pista {
  --alto-galeria: clamp(340px, 58vh, 520px);
  --margen-pista: max(var(--gutter), calc(50vw - var(--ancho-max) / 2));
  display: flex;
  gap: var(--sp-4);
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--margen-pista);
  padding-bottom: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen-pista);
  scrollbar-width: none;
}

.galeria__pista::-webkit-scrollbar {
  display: none;
}

.galeria__item {
  flex: none;
  width: min-content;
  margin: 0;
  scroll-snap-align: start;
}

.galeria__media {
  position: relative;
  height: var(--alto-galeria);
  overflow: hidden;
  background: var(--crema);
  border-radius: var(--radio);
}

.galeria__media img,
.galeria__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria__insignia {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0.3em 0.7em;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanco);
  background: rgb(21 16 18 / 0.6);
  border-radius: var(--radio-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Toda la pieza es un botón para verla en grande (js/visor.js) */
.galeria__ampliar {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: zoom-in;
  border-radius: inherit;
}

.galeria__ampliar:focus-visible {
  outline-offset: -4px;
}

.galeria__sonido {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--blanco);
  background: rgb(21 16 18 / 0.55);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-rapida) var(--ease);
}

.galeria__sonido:hover,
.galeria__sonido[aria-pressed="true"] {
  background: var(--rojo);
}

.galeria__sonido .icono {
  width: 20px;
  height: 20px;
}

.galeria__item figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

/* ---------- Preguntas ---------- */
.faq__intro p {
  margin-top: var(--sp-5);
  color: var(--color-texto-suave);
}

/* ---------- Pie de página ---------- */
.pie {
  --color-texto-suave: rgb(255 255 255 / 0.66);
  --color-linea: rgb(255 255 255 / 0.12);
  color: var(--blanco);
  background: var(--negro);
}

.pie__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-8) var(--sp-7);
  border-bottom: 1px solid var(--color-linea);
}

.pie__cta h2 {
  font-size: var(--fs-2xl);
}

.pie__grid {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}

.pie__marca .logo__img {
  height: 72px;
}

.pie__marca p {
  max-width: 34ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--color-texto-suave);
}

.pie h3 {
  margin-bottom: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-stretch: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.pie ul {
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.pie a {
  text-decoration: none;
}

.pie a:hover {
  text-decoration: underline;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.pie__enlaces a,
.pie__enlaces button {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

.pie__enlaces a:hover,
.pie__enlaces button:hover {
  text-decoration: underline;
}

.pie__aviso {
  flex-basis: 100%;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--color-texto-suave);
  border-top: 1px solid var(--color-linea);
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .galeria__controles { display: flex; }
  .hero__nota--1 { top: 14%; left: 2%; }
  .hero__nota--2 { top: 44%; right: 0; bottom: auto; }
  .hero__nota--3 { top: auto; bottom: 16%; left: 6%; }
  .beneficios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Escritorio ---------- */
@media (min-width: 960px) {
  .hero {
    padding-bottom: var(--sp-8);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: calc(100svh - var(--altura-header) - var(--sp-8) - var(--sp-6));
  }

  .beneficios__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .productos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .recomendaciones {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }

  .recomendaciones .lista-check {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
  }

  .cuenta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .pedido { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .pedido__intro { position: sticky; top: calc(var(--altura-header) + var(--sp-6)); }

  .mayoristas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .faq__intro { position: sticky; top: calc(var(--altura-header) + var(--sp-6)); }

  .pie__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
}