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

html {
  scroll-behavior: smooth;
}

/* Escala de grosores de Inter (variable font) por rol tipográfico,
   reutilizada en todas las secciones — así un "título" pesa igual en
   el carrusel de secciones que en "Cómo se hace un decant", etc. */
:root {
  --fw-body: 400;
  --fw-medium: 500;
  --fw-subtitle: 600;
  --fw-title: 700;
}

body {
  background: #ffffff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: var(--fw-body);
}

.hero {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 62.5%; /* relación 8:5 */
  background: #ffffff;
  overflow: hidden;
}

/* Versión más corta para computadora. Por debajo de 901px se queda en
   62.5%: ahí la botella más baja (Good Girl, set 1) usa su ancho mínimo
   fijo y llega casi al 91% de la altura, así que acortar más el hero
   en ese rango la haría desbordarse. */
@media (min-width: 901px) {
  .hero {
    /* padding-top (el truco de altura de arriba) ignora max-height en
       este motor, así que aquí usamos aspect-ratio en su lugar, que sí
       lo respeta. Las botellas dejan de crecer al llegar a ~1279px de
       ancho (ya tocaron su tamaño máximo en px); sin este tope el hero
       seguía creciendo de alto en pantallas muy anchas, dejando un
       espacio en blanco enorme entre los perfumes y los puntos.
       700px = la altura a la que llega en esos ~1279px. */
    height: auto;
    padding-top: 0;
    aspect-ratio: 1.8 / 1; /* ~55% */
    max-height: 700px;
  }
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Cada .hero-set es un "set" completo de perfumes. Su posición/tamaño/
   rotación se define por separado más abajo, con selectores
   [data-set="N"] .hero-bg__item--M, así que cada set se puede ajustar
   sin afectar a los demás. Se alternan cada 5s con una animación de
   anime.js (transforms + opacity por botella) controlada desde
   js/script.js — por eso aquí ya no hay "transition" de CSS. */
.hero-set {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Estado de respaldo (antes de que anime.js tome el control, o si no
   carga): los sets que no están activos empiezan invisibles. */
.hero-set:not(.is-active) .hero-bg__item {
  opacity: 0;
}

/* Logo: estático en el centro del hero. No es parte de .hero-bg ni de
   ningún .hero-set — no rota, no se anima y no cambia con el ciclo de
   perfumes. */
.hero-logo {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 50vw, 320px);
  height: auto;
  pointer-events: none;
  z-index: 3;
}

/* --- Puntos de navegación (cambian de set al hacer click) --- */

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}

/* En pantallas angostas la botella más baja (Good Girl, set 1) llega a
   extenderse casi hasta el 91% de la altura del hero, así que ahí los
   puntos se quedan pegados a ese límite. A partir de 901px hay
   menos altura de sobra (llega a ~83%), así que suben justo hasta
   donde termina esa botella. */
@media (min-width: 901px) {
  .hero-dots {
    bottom: 20%;
  }
}

.hero-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #000;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.hero-dot.is-active {
  background: #000;
}

/* Botones estáticos del hero — "Contacto" (→ Redes Sociales) y "¿Cómo se
   hace un decant?" (→ esa sección). Viven DENTRO de .hero,
   position:absolute igual que el logo y los puntos, centrados en el
   hueco entre ambos ("en medio del logo... y arriba de los tres
   círculos", pedido explícito). El "bottom" en % está calibrado a mano,
   por matemática exacta (no a ojo) contra .hero-logo (top:37%, 320×319px
   real en cualquier ancho ≥640px) y .hero-dots (bottom:14%/20%, ~11px de
   alto), en los mismos 2 tramos que ya usa .hero-dots. El hueco
   disponible entre logo y puntos se achica mucho en dos zonas: justo
   después del salto de breakpoint en 901px, y sobre todo en el extremo
   angosto del tramo 601-900px — en ~601-630px de ancho el hueco real baja
   a ~23px, MENOS que el alto de un botón normal. Por eso se hicieron tan
   chicos ("hazlos más pequeños", pedido explícito): a este tamaño (~22px
   de alto) entran incluso en ese peor caso con margen positivo (aunque
   mínimo, ~1px, justo en el ancho más extremo — ver "Botones estáticos
   del hero" en este archivo para la cuenta completa). Si se agranda el
   botón, el logo o se toca su posición, hay que rehacer esa cuenta. Son
   simples anchors con scroll suave (mismo scroll-behavior:smooth global
   que ya usan los links del footer), sin JS propio. */
.hero-cta {
  position: absolute;
  left: 50%;
  bottom: 17%; /* .hero-dots está en bottom:14% en este mismo tramo */
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 8px;
}

@media (min-width: 901px) {
  .hero-cta {
    bottom: 24%; /* .hero-dots pasa a bottom:20% en este tramo */
  }
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  background: #cd9c20;
  border: 1.5px solid #cd9c20;
  color: #ffffff;
  text-decoration: none;
  font-weight: var(--fw-subtitle);
  font-size: 11px;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero-cta-btn:hover,
.hero-cta-btn:focus-visible,
.hero-cta-btn:active {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
}

.hero-bg__item {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.08));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  left: var(--x);
  top: var(--y);
  width: var(--w);
}

/* ==========================================================
   SET 1 — Hero 1 (assets/img/hero)
   ========================================================== */

/* --- Left cluster --- */

.hero-set[data-set="1"] .hero-bg__item--2 {                 /* J'adore */
  --x: 30%;
  --y: 17%;
  --w: clamp(120px, 12vw, 170px);
  --r: -20deg;
}

.hero-set[data-set="1"] .hero-bg__item--3 {                 /* Bleu de Chanel (pieza principal izquierda) */
  --x: 30%;
  --y: 58%;
  --w: clamp(180px, 18vw, 230px);
  --r: -15deg;
}

.hero-set[data-set="1"] .hero-bg__item--4 {                 /* Sauvage */
  --x: 20%;
  --y: 28%;
  --w: clamp(117px, 14.1vw, 180px);
  --r: 30deg;
}

.hero-set[data-set="1"] .hero-bg__item--5 {                 /* Creed Aventus */
  --x: 10%;
  --y: 59%;
  --w: clamp(196px, 23.4vw, 300px);
  --r: -28deg;
}

.hero-set[data-set="1"] .hero-bg__item--6 {                 /* Acqua di Gioia */
  --x: 7%;
  --y: 12%;
  --w: clamp(134px, 17vw, 200px);
  --r: -32deg;
}

/* --- Right cluster --- */

.hero-set[data-set="1"] .hero-bg__item--7 {                 /* Light Blue */
  --x: 90%;
  --y: 15%;
  --w: clamp(143px, 17.2vw, 220px);
  --r: 30deg;
}

.hero-set[data-set="1"] .hero-bg__item--8 {                 /* Azzaro */
  --x: 77%;
  --y: 7%;
  --w: clamp(114px, 13.7vw, 175px);
  --r: -65deg;
}

.hero-set[data-set="1"] .hero-bg__item--9 {                 /* Good Girl (pieza principal derecha) */
  --x: 72%;
  --y: 55%;
  --w: clamp(176px, 21.1vw, 270px);
  --r: 25deg;
}

.hero-set[data-set="1"] .hero-bg__item--10 {                /* My Way */
  --x: 94%;
  --y: 37%;
  --w: clamp(150px, 18vw, 230px);
  --r: 29deg;
}

.hero-set[data-set="1"] .hero-bg__item--11 {                /* Invictus */
  --x: 85%;
  --y: 63%;
  --w: clamp(98px, 11.7vw, 150px);
  --r: -25deg;
}

.hero-set[data-set="1"] .hero-bg__item--12 {                /* Valentino */
  --x: 70%;
  --y: 24%;
  --w: clamp(143px, 17.2vw, 220px);
  --r: 35deg;
}

/* ==========================================================
   SET 2 — Hero 2 (assets/img/hero-2)
   Arranca con los mismos valores del set 1. Ajusta libremente
   aquí abajo sin afectar al set 1.
   ========================================================== */

/* --- Left cluster --- */

.hero-set[data-set="2"] .hero-bg__item--2 {                 /* Khamrah */
  --x: 28%;
  --y: 13%;
  --w: clamp(143px, 17.2vw, 220px);
  --r: -52deg;
}

.hero-set[data-set="2"] .hero-bg__item--3 {                 /* Asad (pieza principal izquierda) */
  --x: 33%;
  --y: 50%;
  --w: clamp(189px, 16vw, 230px);
  --r: -20deg;
}

.hero-set[data-set="2"] .hero-bg__item--4 {                 /* Hawas */
  --x: 12%;
  --y: 25%;
  --w: clamp(117px, 14.1vw, 180px);
  --r: 30deg;
}

.hero-set[data-set="2"] .hero-bg__item--5 {                 /* His Confession */
  --x: 7%;
  --y: 60%;
  --w: clamp(196px, 23.4vw, 300px);
  --r: -5deg;
}

.hero-set[data-set="2"] .hero-bg__item--6 {                 /* Eclaire */
  --x: 20%;
  --y: 58%;
  --w: clamp(250px, 27vw, 330px);
  --r: -22deg;
}

/* --- Right cluster --- */

.hero-set[data-set="2"] .hero-bg__item--7 {                 /* Millesime */
  --x: 85%;
  --y: 24%;
  --w: clamp(143px, 17.2vw, 220px);
  --r: 30deg;
}

.hero-set[data-set="2"] .hero-bg__item--8 {                 /* Musamam */
  --x: 66%;
  --y: 12%;
  --w: clamp(114px, 13.7vw, 175px);
  --r: 45deg;
}

.hero-set[data-set="2"] .hero-bg__item--9 {                 /* oddysey (pieza principal derecha) */
  --x: 72%;
  --y: 60%;
  --w: clamp(130px, 15vw, 250px);
  --r: 25deg;
}

.hero-set[data-set="2"] .hero-bg__item--10 {                /* Amirat */
  --x: 94%;
  --y: 38%;
  --w: clamp(150px, 18vw, 230px);
  --r: 29deg;
}

.hero-set[data-set="2"] .hero-bg__item--11 {                /* Fakhar */
  --x: 87%;
  --y: 65%;
  --w: clamp(150px, 18vw, 230px);
  --r: -25deg;
}

.hero-set[data-set="2"] .hero-bg__item--12 {                /* Emaan */
  --x: 71%;
  --y: 27%;
  --w: clamp(143px, 17.2vw, 220px);
  --r: 35deg;
}

/* ==========================================================
   SET 3 — Hero 3 (assets/img/hero-3)
   Arranca con los mismos valores del set 1. Ajusta libremente
   aquí abajo sin afectar a los demás sets.
   ========================================================== */

/* --- Left cluster --- */

.hero-set[data-set="3"] .hero-bg__item--2 {                 /* Coco */
  --x: 28%;
  --y: 15%;
  --w: clamp(176px, 21.1vw, 270px);
  --r: -45deg;
}

.hero-set[data-set="3"] .hero-bg__item--3 {                 /* mujer (pieza principal izquierda) */
  --x: 28%;
  --y: 55%;
  --w: clamp(270px, 30vw, 330px);
  --r: -15deg;
}

.hero-set[data-set="3"] .hero-bg__item--4 {                 /* Bois */
  --x: 18%;
  --y: 32%;
  --w: clamp(117px, 14.1vw, 180px);
  --r: -10deg;
}

.hero-set[data-set="3"] .hero-bg__item--5 {                 /* Pacco R */
  --x: 13%;
  --y: 58%;
  --w: clamp(124px, 14.8vw, 190px);
  --r: -5deg;
}

.hero-set[data-set="3"] .hero-bg__item--6 {                 /* YSL */
  --x: 8%;
  --y: 19%;
  --w: clamp(180px, 20vw, 230px);
  --r: 10deg;
}

/* --- Right cluster --- */

.hero-set[data-set="3"] .hero-bg__item--7 {                 /* Valentino */
  --x: 93%;
  --y: 20%;
  --w: clamp(114px, 13.7vw, 175px);
  --r: -15deg;
}

.hero-set[data-set="3"] .hero-bg__item--8 {                 /* Blue YSL */
  --x: 80%;
  --y: 7%;
  --w: clamp(70px, 7vw, 150px);
  --r: -60deg;
}

.hero-set[data-set="3"] .hero-bg__item--9 {                 /* Black Opium (pieza principal derecha) */
  --x: 72%;
  --y: 60%;
  --w: clamp(176px, 21.1vw, 270px);
  --r: 25deg;
}

.hero-set[data-set="3"] .hero-bg__item--10 {                /* Daisy */
  --x: 84%;
  --y: 33%;
  --w: clamp(150px, 18vw, 230px);
  --r: 0deg;
}

.hero-set[data-set="3"] .hero-bg__item--11 {                /* CK one */
  --x: 90%;
  --y: 60%;
  --w: clamp(150px, 18vw, 230px);
  --r: 30deg;
}

.hero-set[data-set="3"] .hero-bg__item--12 {                /* Prada */
  --x: 72%;
  --y: 25%;
  --w: clamp(143px, 17.2vw, 220px);
  --r: 10deg;
}

/* --- Mobile: relación más alta (angosta) y tamaños reducidos --- */

@media (max-width: 600px) {
  .hero {
    /* Una proporción fija (padding-top) nunca calza exacto con la
       pantalla real del celular del usuario — algunos quedan con
       espacio de sobra abajo. Acá usamos el alto real del viewport:
       100vh como respaldo y 100svh (ignora la barra de direcciones)
       para navegadores que lo soportan. */
    height: 100vh;
    height: 100svh;
    padding-top: 0;
  }

  /* El tamaño de escritorio (50vw) tapa las botellas vecinas (Bleu de
     Chanel / Good Girl) en anchos chicos — aquí se reduce a un tamaño
     fijo que no se les cruza. */
  .hero-logo {
    width: 250px;
  }

  /* Cada set tiene su propio layout móvil (igual que en escritorio), ya
     no comparten valores — las 3 casillas protagonistas (--3, --5, --9)
     se ajustan según el ratio real de cada foto para que se sientan
     igual de prominentes entre sets, no solo con el mismo ancho. Se
     agrandaron respecto a la versión anterior; las protagonistas (las
     3 pegadas al logo) se agrandaron con más cuidado que las satélites
     porque son las que menos margen tienen respecto al logo. */

  /* Set 1 */
  .hero-set[data-set="1"] .hero-bg__item--2  { --x: 84%; --y: 20%; --w: 130px; } /* J'adore */
  .hero-set[data-set="1"] .hero-bg__item--3  { --x: 16%; --y: 55%; --w: 140px; } /* Bleu de Chanel (pieza principal izquierda) */
  .hero-set[data-set="1"] .hero-bg__item--4  { --x: 12%;  --y:28%; --w: 120px; } /* Sauvage */
  .hero-set[data-set="1"] .hero-bg__item--5  { --x: 53%; --y: 65%; --w: 160px; } /* Creed Aventus */
  .hero-set[data-set="1"] .hero-bg__item--6  { --x: 60%; --y: 12%; --w: 150px; } /* Acqua di Gioia */

  .hero-set[data-set="1"] .hero-bg__item--7  { --x: 29%; --y: 90%; --w: 120px; }  /* Light Blue */
  .hero-set[data-set="1"] .hero-bg__item--8  { --x: 23%; --y: 11%;  --w: 180px; } /* Azzaro */
  .hero-set[data-set="1"] .hero-bg__item--9  { --x: 84%; --y: 50%; --w: 140px; } /* Good Girl (pieza principal derecha) — la más angosta/alta, se agranda menos */
  .hero-set[data-set="1"] .hero-bg__item--10 { --x: 90%; --y: 66%; --w: 150px; } /* My Way */
  .hero-set[data-set="1"] .hero-bg__item--11 { --x: 77%; --y: 85%; --w: 140px; }  /* Invictus */
  .hero-set[data-set="1"] .hero-bg__item--12 { --x: 23%; --y: 73%; --w: 150px; } /* Valentino */

  /* Set 2 */
  .hero-set[data-set="2"] .hero-bg__item--2  { --x: 48%; --y: 10%; --w: 180px; } /* Khamrah */
  .hero-set[data-set="2"] .hero-bg__item--3  { --x: 20%; --y: 58%; --w: 150px; } /* Asad (pieza principal izquierda) — botella angosta, se agranda menos */
  .hero-set[data-set="2"] .hero-bg__item--4  { --x: 16%;  --y: 22%; --w: 130px; } /* Hawas */
  .hero-set[data-set="2"] .hero-bg__item--5  { --x: 15%; --y: 85%; --w: 220px; } /* His Confession — frasco cuadrado, aprovecha bien el ancho */
  .hero-set[data-set="2"] .hero-bg__item--6  { --x: 93%; --y: 32%; --w: 180px; } /* Eclaire */

  .hero-set[data-set="2"] .hero-bg__item--7  { --x: 45%; --y: 85%; --w: 140px; }  /* Millesime */
  .hero-set[data-set="2"] .hero-bg__item--8  { --x: 18%; --y: 5%;  --w: 140px; } /* Musamam */
  .hero-set[data-set="2"] .hero-bg__item--9  { --x: 87%; --y: 55%; --w: 118px; } /* oddysey (pieza principal derecha) */
  .hero-set[data-set="2"] .hero-bg__item--10 { --x: 82%; --y: 12%; --w: 180px; } /* Amirat */
  .hero-set[data-set="2"] .hero-bg__item--11 { --x: 55%; --y: 65%; --w: 210px; }  /* Fakhar */
  .hero-set[data-set="2"] .hero-bg__item--12 { --x: 80%; --y: 80%; --w: 200px; } /* Emaan */

  /* Set 3 */
  .hero-set[data-set="3"] .hero-bg__item--2  { --x: 20%; --y: 12%; --w:  180px; } /* Coco */
  .hero-set[data-set="3"] .hero-bg__item--3  { --x: 87%; --y: 35%; --w: 270px; } /* mujer (pieza principal izquierda) — frasco cuadrado */
  .hero-set[data-set="3"] .hero-bg__item--4  { --x: 10%;  --y: 33%; --w: 180px; } /* Bois */

  .hero-set[data-set="3"] .hero-bg__item--5  { --x: 17%; --y: 58%; --w: 150px; } /* Pacco R — muy angosto y alto, se agranda menos */
  .hero-set[data-set="3"] .hero-bg__item--6  { --x: 23%; --y: 85%; --w: 180px; } /* YSL */

  .hero-set[data-set="3"] .hero-bg__item--7  { --x: 57%; --y: 11%; --w: 120px; }  /* Valentino */
  .hero-set[data-set="3"] .hero-bg__item--8  { --x: 88%; --y: 10%;  --w: 100px; } /* Blue YSL */
  .hero-set[data-set="3"] .hero-bg__item--9  { --x: 92%; --y: 63%; --w: 180px; } /* Black Opium (pieza principal derecha) */
  .hero-set[data-set="3"] .hero-bg__item--10 { --x: 55%; --y: 63%; --w: 180px; } /* Daisy */
  .hero-set[data-set="3"] .hero-bg__item--11 { --x: 53%; --y: 85%; --w: 180px; }  /* CK one */
  .hero-set[data-set="3"] .hero-bg__item--12 { --x: 85%; --y: 87%; --w: 160px; } /* Prada */
}

/* ==========================================================
   CARRUSEL DE SECCIONES — slider horizontal libre, sin snap.
   Se arrastra con mouse/trackpad/touch y se queda exactamente
   donde el usuario lo suelta (ver js/script.js).
   ========================================================== */

.sections-carousel {
  width: 100%;
  padding: 64px 0 56px;
  background: #000000;
}

.sections-carousel-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 0 24px;
  margin-bottom: 32px;
}

.sections-carousel-title {
  grid-column: 2;
  font-weight: var(--fw-title);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin: 0;
}

.sections-carousel-header .gallery-toggle {
  grid-column: 3;
  justify-self: end;
}

.slider-overflow {
  overflow: hidden;
  cursor: grab;
}

.slider-overflow:active {
  cursor: grabbing;
}

.slider-overflow.is-gallery-open {
  cursor: default;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 65vh;
}

.sections-track {
  display: flex;
  gap: 16px;
  padding: 0 24px;
  will-change: transform;
}

.slider-overflow.is-gallery-open .sections-track {
  flex-wrap: wrap;
  justify-content: center;
}

.section-slide {
  position: relative;
  flex: 0 0 26vw;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 2px;
}

.section-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s ease;
  pointer-events: none;
}

.slider-overflow:not(:active) .section-slide:hover img {
  transform: scale(1.04);
}

.section-slide-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}

.section-slide-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: var(--fw-subtitle);
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* Botón "Ver más"/"Ver menos" — genérico, usado en cada carrusel del sitio
   (Recomendaciones y los 3 del catálogo). Alterna el carrusel entre modo
   drag horizontal y una galería con scroll vertical (flex-wrap). */
.gallery-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-subtitle);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.gallery-toggle:hover,
.gallery-toggle:focus-visible {
  opacity: 0.7;
}

@media (max-width: 600px) {
  .sections-carousel {
    padding: 44px 0 40px;
  }

  .sections-carousel-header {
    margin-bottom: 22px;
    padding: 0 16px;
  }

  .sections-track {
    padding: 0 16px;
  }

  .section-slide {
    flex-basis: 55vw;
  }

  .section-slide-name {
    letter-spacing: 3px;
  }
}

/* ==========================================================
   CATÁLOGO — espacio en blanco, a la espera del diseño (Canva).
   Sin estilo definitivo todavía: min-height solo para que se vea
   el espacio reservado mientras se define el diseño real.
   ========================================================== */

.catalog {
  width: 100%;
  padding: 64px 0 56px;
  background: #000;
}

.catalog-row {
  margin-bottom: 48px;
}

.catalog-row:last-child {
  margin-bottom: 0;
}

.catalog-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  margin-bottom: 24px;
}

.catalog-row-title {
  font-weight: var(--fw-title);
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: left;
  color: #fff;
  margin: 0;
}

.catalog-filters {
  display: flex;
  gap: 12px;
  padding: 0 24px;
  margin-bottom: 20px;
}

.catalog-filter-btn {
  border: none;
  border-radius: 2px;
  background: #cd9c20;
  color: #fff;
  font-family: inherit;
  font-weight: var(--fw-subtitle);
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.catalog-filter-btn:hover,
.catalog-filter-btn:focus-visible {
  background: #b98c1c;
}

.catalog-filter-btn.is-active {
  background: #fff;
  color: #cd9c20;
}

.catalog-filter-btn.is-active:hover,
.catalog-filter-btn.is-active:focus-visible {
  background: #f2f2f2;
}

.catalog-slider-overflow {
  overflow: hidden;
  cursor: grab;
}

.catalog-slider-overflow:active {
  cursor: grabbing;
}

.catalog-slider-overflow.is-gallery-open {
  cursor: default;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 65vh;
}

.catalog-track {
  display: flex;
  gap: 16px;
  padding: 0 24px;
  will-change: transform;
}

.catalog-slider-overflow.is-gallery-open .catalog-track {
  flex-wrap: wrap;
  justify-content: center;
}

.catalog-square {
  flex: 0 0 clamp(120px, 20vw, 200px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
}

/* Tarjeta real de perfume (Hombres / Mujeres): foto + nombre + marca debajo.
   El texto va dentro de la misma tarjeta que la foto (no superpuesto encima,
   a diferencia de .section-slide-name) para que se arrastre junto con la
   imagen como una sola unidad del carrusel. */
.catalog-card {
  flex: 0 0 clamp(120px, 20vw, 200px);
  display: flex;
  flex-direction: column;
}

.catalog-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.catalog-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.catalog-card-name {
  margin: 10px 0 2px;
  font-weight: var(--fw-title);
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-card-brand {
  margin: 0;
  font-weight: var(--fw-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .catalog {
    padding: 44px 0 40px;
  }

  .catalog-row {
    margin-bottom: 36px;
  }

  .catalog-row-header {
    margin-bottom: 18px;
    padding: 0 16px;
  }

  .catalog-filters {
    padding: 0 16px;
    margin-bottom: 16px;
  }

  .catalog-track {
    padding: 0 16px;
  }

  .catalog-square {
    flex-basis: clamp(100px, 32vw, 150px);
  }

  .catalog-card {
    flex-basis: clamp(100px, 32vw, 150px);
  }
}

/* ==========================================================
   MODAL DE DETALLE DE PERFUME — se abre al hacer click en la foto o el
   nombre de una tarjeta real del catálogo (.catalog-card). Overlay oscuro
   centrado, sin animación de entrada/salida (pedido explícito del usuario).
   ========================================================== */

.perfume-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.perfume-modal-overlay.is-open {
  display: flex;
}

.perfume-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  padding: 32px;
}

.perfume-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.perfume-modal-close:hover,
.perfume-modal-close:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}

.perfume-modal-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfume-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.perfume-modal-name {
  margin: 0 0 4px;
  font-weight: var(--fw-title);
  font-size: clamp(20px, 3vw, 26px);
  color: #000;
  text-align: center;
}

.perfume-modal-brand {
  margin: 0 0 16px;
  font-weight: var(--fw-body);
  font-size: 15px;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
}

.perfume-modal-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.perfume-modal-tag {
  border: 1px solid #cd9c20;
  color: #cd9c20;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: var(--fw-subtitle);
  letter-spacing: 0.3px;
}

.perfume-modal-notes-label {
  margin: 0 0 10px;
  font-weight: var(--fw-subtitle);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000;
}

.perfume-modal-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.perfume-modal-note {
  background: #f4f4f2;
  color: #000;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: var(--fw-body);
  text-transform: capitalize;
}

@media (max-width: 600px) {
  .perfume-modal {
    padding: 24px;
    max-width: 100%;
  }
}

/* ==========================================================
   CÓMO SE HACE UN DECANT — pasos + video.
   Desktop: pasos a la izquierda, video a la derecha.
   Móvil: video arriba, pasos debajo (order:-1 en .how-it-works-video).
   ========================================================== */

.how-it-works {
  width: 100%;
  padding: 64px 24px 80px;
  background: #000000;
}

.how-it-works-title {
  font-weight: var(--fw-title);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin-bottom: 48px;
}

.how-it-works-content {
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1100px;
  margin: 0 auto;
}

.how-it-works-steps {
  --marker-size: 52px;
  position: relative;
  flex: 1 1 38%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Línea vertical continua detrás de los círculos, de centro a centro
   (centro del primer círculo = mitad de --marker-size, mismo cálculo
   para el último). Un solo elemento, no un segmento por paso, así no
   depende de que todos los pasos midan lo mismo de alto. */
.how-it-works-steps::before {
  content: '';
  position: absolute;
  left: calc(var(--marker-size) / 2 - 1px);
  top: calc(var(--marker-size) / 2);
  bottom: calc(var(--marker-size) / 2);
  width: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.step {
  position: relative;
}

.step-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.step-marker {
  flex-shrink: 0;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.step-number {
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--fw-title);
  font-size: 17px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.step-title {
  color: rgba(255, 255, 255, 0.75);
  font-weight: var(--fw-subtitle);
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.25;
  transition: color 0.3s ease;
}

.step-desc {
  color: rgba(255, 255, 255, 0.4);
  font-weight: var(--fw-body);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  transition: color 0.3s ease;
}

.step-btn:hover .step-marker,
.step-btn:focus-visible .step-marker {
  border-color: #fff;
}

.step-btn:hover .step-number,
.step-btn:focus-visible .step-number,
.step-btn:hover .step-title,
.step-btn:focus-visible .step-title {
  color: #fff;
}

.step-btn.is-active .step-marker {
  background: #fff;
  border-color: #fff;
  transform: scale(1.08);
}

.step-btn.is-active .step-number {
  color: #000;
}

.step-btn.is-active .step-title {
  color: #fff;
}

.step-btn.is-active .step-desc {
  color: rgba(255, 255, 255, 0.65);
}

.how-it-works-video {
  flex: 1 1 55%;
  aspect-ratio: 3 / 2;
  background: #111;
  overflow: hidden;
  border-radius: 2px;
}

.how-it-works-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .how-it-works {
    padding: 44px 20px 56px;
  }

  .how-it-works-title {
    margin-bottom: 32px;
  }

  .how-it-works-content {
    flex-direction: column;
    gap: 32px;
  }

  .how-it-works-video {
    order: -1;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .how-it-works-steps {
    --marker-size: 44px;
    width: 100%;
    gap: 26px;
  }

  .step-number {
    font-size: 15px;
  }
}

/* ==========================================================
   UBICACIÓN — foto de la tienda física a todo lo ancho, sobre
   fondo negro, con un banner tipo cinta anclado a la esquina
   inferior derecha.
   ========================================================== */

.ubicacion {
  width: 100%;
  padding: 64px 0;
  background: #000000;
}

.ubicacion-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1532 / 938; /* relación real de la foto original */
  max-height: 750px;
  overflow: hidden;
}

.ubicacion-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cinta anclada a la esquina inferior derecha de la foto, hasta 1/3
   de su ancho. Toca el borde derecho e inferior de la imagen, así
   que la única esquina "libre" (donde termina la cinta) es la
   izquierda — por eso solo esas dos esquinas quedan redondeadas. */
.ubicacion-banner {
  position: absolute;
  right: 0;
  bottom: 48px;
  width: 55%;
  padding: 18px 20px;
  background: #cd9c20;
  border-radius: 60px 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ubicacion-banner span {
  color: #fff;
  font-weight: var(--fw-subtitle);
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.3;
}

.ubicacion-map {
  width: 100%;
  max-width: 900px;
  margin: 32px auto 0;
  padding: 0 24px;
}

.ubicacion-map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

@media (max-width: 600px) {
  .ubicacion {
    padding: 44px 0;
  }

  /* En móvil se quita el recorte: la caja usa la misma relación que
     la foto original (1532/938), así "cover" no tiene nada que
     recortar — a diferencia del escritorio, que sí puede recortar
     un poco arriba/abajo por el tope de max-height. */
  .ubicacion-photo {
    aspect-ratio: 1532 / 938;
    max-height: none;
  }

  .ubicacion-banner {
    bottom: 24px;
    width: 70%;
    padding: 14px 12px;
    border-radius: 12px 0 0 12px;
  }

  .ubicacion-banner span {
    font-size: clamp(12px, 3vw, 15px);
  }

  .ubicacion-map {
    margin-top: 24px;
    padding: 0 16px;
  }

  .ubicacion-map iframe {
    height: 300px;
  }
}

/* ==========================================================
   REDES SOCIALES — fondo negro, sin título. Grid de 3
   columnas: fila 1 = los 3 íconos-enlace, fila 2 = las
   etiquetas de texto. La de WhatsApp cae en la columna 1; la
   de Instagram usa "grid-column: span 2" para que el layout
   la centre automáticamente entre las columnas de Instagram
   y Facebook (Facebook no lleva etiqueta). Los íconos son
   cuadros blancos (.social-icon-wrap) sin animación por ahora.
   ========================================================== */

/* Es la sección "tapa" del efecto reveal del footer (ver bloque
   "PIE DE PÁGINA" más abajo): a pantalla completa, position:relative +
   z-index:2 para quedar por encima del footer sticky que tiene detrás.
   El contenido se centra verticalmente con flex ya que ahora la
   sección mide 100vh en vez de su alto natural por padding. */
.social {
  width: 100%;
  min-height: 100vh;
  padding: 56px 24px;
  background: #000000;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.social-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 64px;
  row-gap: 28px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.social-icon-link {
  display: flex;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

/* Cuadros del grid de íconos — blancos sólidos sobre el fondo negro de
   la sección, sin sombra/blur. Sin animación por ahora (se quitó la
   versión con GSAP "Proximity Scale Grid" que había acá). */
.social-icon-wrap {
  width: clamp(120px, 13vw, 160px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 22px;
}

.social-icon-link:focus-visible .social-icon-wrap {
  outline: 2px solid #cd9c20;
  outline-offset: 3px;
}

.social-icon {
  width: 46%;
  height: auto;
  display: block;
}

.social-label {
  grid-column: span 1;
  justify-self: center;
  font-weight: var(--fw-subtitle);
  font-size: clamp(19px, 2.2vw, 26px);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

/* span 2 columnas (Instagram + Facebook) — el auto-placement del grid
   la ubica sola en esas dos columnas de la fila 2 porque la columna 1
   ya la ocupó la etiqueta de WhatsApp, así queda centrada entre los
   íconos de Instagram y Facebook sin coordenadas manuales. */
.social-label--handle {
  grid-column: span 2;
}

.social-label:hover,
.social-label:focus-visible {
  opacity: 0.6;
  text-decoration: underline;
}

@media (max-width: 600px) {
  /* En mobile el contenido (3 cuadros + 2 etiquetas) es mucho más bajo
     que un celular es alto — heredar min-height:100vh de la regla base
     dejaba una franja negra vacía enorme arriba/abajo. Se reemplaza por
     un alto atado al contenido (padding, no vh) para que la sección mida
     lo que su contenido necesita, no una fracción fija de la pantalla. */
  .social {
    min-height: 0;
    padding: 72px 16px;
  }

  .social-row {
    column-gap: 20px;
    row-gap: 18px;
  }

  .social-icon-wrap {
    width: 84px;
    border-radius: 16px;
  }

  /* El clamp de escritorio (min 19px) es demasiado grande para el
     número de WhatsApp ("646-107-59-80", 13 caracteres) dentro de 1 de
     3 columnas en pantallas angostas — con white-space:nowrap ya no se
     corta a 2 líneas, pero a 19px+ se sale de su columna en celulares
     chicos. 15px es el tamaño más grande que cabe en una sola línea
     incluso en los anchos más angostos probados (~360-375px). */
  .social-label {
    font-size: 15px;
  }
}

/* ==========================================================
   BOTÓN FLOTANTE "¿?" — acompaña al usuario desde la esquina
   inferior derecha de "Recomendaciones" (#recomendaciones)
   hasta la misma esquina en "Redes Sociales" (#redes-sociales).
   El "position" (absolute/fixed) y el "top" los alterna
   js/script.js según el scroll; "right" se queda fijo acá
   porque ambas secciones son 100% de ancho (su borde derecho
   siempre coincide con el borde derecho del viewport).

   Es interactivo (a diferencia de la primera versión, que era
   puramente decorativa): al hacer click se expande de círculo a
   una píldora (mismo alto, más ancho — border-radius:999px hace
   que ambas formas queden con las puntas totalmente redondeadas
   sin cambiar de valor) que muestra un texto, y un segundo click
   sobre esa píldora abre WhatsApp en pestaña nueva. La animación
   del morph (GSAP) vive en js/script.js — adaptada/simplificada
   del patrón "Home Menu navigation" de GSAP que pasó el usuario
   (sin panel de links ni overlay oscuro, solo el morph circle→pill
   + texto). "right" crece hacia la izquierda de forma natural
   porque el ancho aumenta mientras el borde derecho queda fijo,
   sin necesidad de ningún transform extra.

   Pendiente: el usuario pidió un efecto "crystal liquid" (glass)
   sobre este botón, inspirado en el mismo CodePen — no se
   implementó todavía porque el CSS que compartió no lo incluye
   (solo trae un backdrop-filter:blur(3px) en el overlay oscuro del
   menú de esa referencia, no en el propio botón/isla). Fondo
   sólido #cd9c20 como base hasta que el usuario pase ese CSS.
   ========================================================== */
.floating-help-btn {
  position: absolute; /* JS lo cambia a 'fixed' mientras viaja entre secciones */
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #cd9c20;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  z-index: 1000;
}

.floating-help-btn__icon,
.floating-help-btn__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.floating-help-btn__icon {
  color: #ffffff;
  font-weight: var(--fw-title);
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}

.floating-help-btn__text {
  width: 100%;
  padding: 0 18px;
  color: #ffffff;
  font-weight: var(--fw-subtitle);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  opacity: 0; /* GSAP lo anima a 1 al expandirse */
}

/* ==========================================================
   404.html — página de error mostrada por CloudFront cuando
   S3+OAC devuelve 403 (objeto no encontrado en el bucket privado).
   Vive fuera de index.html, con su propio <link rel="stylesheet">
   a este mismo archivo — sin <style> inline, por la CSP.
   ========================================================== */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: #000;
}

.error-page img {
  width: 120px;
  height: auto;
  margin-bottom: 32px;
}

.error-page h1 {
  color: #fff;
  font-weight: var(--fw-title);
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: 4px;
  margin: 0;
}

.error-page p {
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--fw-body);
  font-size: 16px;
  margin: 12px 0 32px;
}

.error-page a {
  display: inline-block;
  background: #cd9c20;
  color: #fff;
  text-decoration: none;
  font-weight: var(--fw-subtitle);
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.error-page a:hover,
.error-page a:focus-visible {
  background: #fff;
  color: #cd9c20;
}

@media (max-width: 600px) {
  .floating-help-btn {
    right: 16px;
    width: 44px;
    height: 44px;
  }

  .floating-help-btn__icon {
    font-size: 17px;
  }

  .floating-help-btn__text {
    font-size: 12.5px;
    padding: 0 14px;
  }
}

/* ==========================================================
   PIE DE PÁGINA — efecto "reveal desde abajo" (estilo
   nude-project.com), 100% CSS, sin JS:

   - .footer-reveal-wrap envuelve la sección "tapa" (.social,
     100vh) y el <footer> (60vh) en flujo normal. Su alto total
     es la suma de ambos (160vh).
   - .social (la tapa) es position:relative; z-index:2 — sigue
     el scroll normal, tapando al footer.
   - .site-footer es position:sticky; bottom:0; z-index:1 — se
     queda pegado al fondo del viewport (oculto detrás de la
     tapa) hasta que esta termina de deslizarse hacia arriba,
     momento en el que el footer queda "revelado".
   - El footer mide 60vh (no el viewport completo) a propósito,
     pedido explícito del usuario.
   ========================================================== */

.footer-reveal-wrap {
  position: relative;
}

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 60vh;
  background: #ffffff;
}

/* Fila principal (logo + nav) — ocupa todo el alto salvo lo que
   necesita la línea de "Derechos reservados" de abajo. */
.site-footer-top {
  flex: 1;
  display: flex;
  width: 100%;
  min-height: 0;
}

.site-footer-col {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
}

.site-footer-col--logo {
  justify-content: center;
}

.site-footer-logo {
  width: clamp(150px, 16vw, 240px);
  height: auto;
  display: block;
}

/* Columna derecha: mismos nombres de sección que antes (Catálogo,
   Recomendaciones, Decant, Ubicación, Redes Sociales), ahora en
   columna y alineados a la derecha en vez de en fila. */
.site-footer-col--nav {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding-right: clamp(20px, 6vw, 80px);
  padding-left: 20px;
}

.site-footer-link {
  color: #000000;
  text-decoration: none;
  font-weight: var(--fw-subtitle);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: right;
  transition: opacity 0.25s ease;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
  opacity: 0.55;
  text-decoration: underline;
}

/* "Catálogo" todavía no existe como sección — sin link, más tenue,
   para que se lea como "próximamente" y no como un botón roto. */
.site-footer-link--disabled {
  color: rgba(0, 0, 0, 0.35);
  cursor: default;
}

.site-footer-link--disabled:hover,
.site-footer-link--disabled:focus-visible {
  opacity: 1;
  text-decoration: none;
}

.site-footer-bottom {
  flex-shrink: 0;
  width: 100%;
  padding: 14px 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.45);
  font-weight: var(--fw-body);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  /* Igual que en .social: el contenido (logo + nav + "derechos
     reservados") es mucho más bajo que 60vh en un celular, dejando una
     franja blanca vacía enorme. Se reemplaza el alto fijo en vh por uno
     atado al contenido (padding, no vh). */
  .site-footer {
    height: auto;
    padding-top: 40px;
  }

  .site-footer-logo {
    width: 110px;
  }

  .site-footer-col--nav {
    padding-right: 16px;
    gap: 10px;
  }

  .site-footer-link {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .site-footer-bottom {
    padding: 10px 16px;
    font-size: 10px;
    letter-spacing: 1px;
  }
}