/* ═══════════════════════════════════════════════════════════════════════════
   Alto Essences — hoja de estilos
   Fragancias y difusores inteligentes para espacios.

   Paleta   tinta #101110 · blanco #FFF · marfil #F7F4EE · turquesa #6DBFB1
            (marca, decorativo) · verde hondo #2E7D72 (el turquesa legible)
            oro #C9A96A (SOLO filete metálico, jamás texto) · gris #666B68
   Tipos    Bodoni Moda (display, mismo género que el logotipo) · Jost (texto)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — superficies — */
  --blanco: #ffffff;
  --marfil: #f7f4ee;
  --marfil-hondo: #efeae1;
  --tinta: #101110;
  --tinta-suave: #1c1e1d;

  /* — tinta y texto — */
  --texto: #262927;
  --texto-2: #5f6461;      /* 5.5:1 sobre blanco */
  --texto-inv: #f4f2ee;
  --texto-inv-2: #b9beba;  /* 7.4:1 sobre tinta */

  /* — marca — */
  --turquesa: #6dbfb1;     /* el del logo. Decorativo: filetes, marcadores */
  --turquesa-claro: #a9dcd3;
  --verde: #2c7770;        /* el turquesa cuando lleva texto: 5.3:1 blanco, 4.8:1 marfil */
  --verde-hondo: #1e5750;
  --oro: #c9a96a;          /* filete metálico. NUNCA texto sobre claro */
  --oro-texto: #8a6d3b;    /* 5.2:1 sobre blanco, por si un dato lo pide */

  /* — líneas — */
  --linea: rgba(16, 17, 16, .12);
  --linea-fuerte: rgba(16, 17, 16, .26);
  --linea-inv: rgba(244, 242, 238, .18);
  --linea-inv-fuerte: rgba(244, 242, 238, .38);

  /* — tipografía — */
  --display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --texto-f: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — ritmo — */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --seccion: clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-suave: cubic-bezier(.33, 1, .68, 1);
}

/* ── base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light;           /* sin esto, un navegador oscuro pinta el body */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--texto-f);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* width/height en <img> evita el salto de maquetación, pero exige esto o
   TODAS las fotos se deforman al encoger. */
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 .48em;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.18; }
h4 { font-size: 1.05rem; line-height: 1.25; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* list-style:none hace que Safari+VoiceOver dejen de anunciarlas como listas.
   El role explícito lo devuelve. */
ul, ol { margin: 0; padding: 0; list-style: none; }
ul[role="list"], ol[role="list"] { list-style: none; }

a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-hondo); }

strong { font-weight: 500; }

::selection { background: var(--turquesa); color: var(--tinta); }

/* Foco: el anillo cambia con la superficie. Sobre tinta o sobre foto el verde
   desaparece, así que hay variantes por contenedor. */
:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 2px;
}
.banda--tinta :focus-visible,
.pie :focus-visible,
.hero :focus-visible,
.banner :focus-visible,
.portadilla--foto :focus-visible {
  outline-color: var(--turquesa-claro);
}
.menu :focus-visible { outline-color: var(--verde); }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--tinta); color: var(--texto-inv);
  padding: .85rem 1.4rem; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.saltar:focus { left: 0; }

/* ── retícula ────────────────────────────────────────────────────────────── */

.wrap {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--estrecho { width: min(880px, 100%); }
.wrap--ancho { width: min(1520px, 100%); }

.seccion { padding-block: var(--seccion); }
.seccion--corta { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* Para la sección que continúa la banda anterior sin cambiar de fondo: sin
   esto se suman los dos paddings y queda un hueco de 200 px que no separa
   nada porque el color es el mismo a los dos lados. */
.seccion--sigue { padding-top: 0; }

.banda--marfil { background: var(--marfil); }
.banda--tinta {
  background: var(--tinta);
  color: var(--texto-inv-2);
}
.banda--tinta h1, .banda--tinta h2, .banda--tinta h3, .banda--tinta h4 { color: var(--texto-inv); }
.banda--tinta a { color: var(--turquesa); }
.banda--tinta a:hover { color: var(--turquesa-claro); }

/* ── piezas tipográficas ─────────────────────────────────────────────────── */

/* La versalita espaciada es el gesto que más «caro» hace a un sitio de
   perfumería. Se usa en todos los rótulos de sección. */
.rotulo {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--texto-f);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 1.5rem;
}
.rotulo::before {
  content: "";
  width: 2.4rem; height: 1px;
  background: var(--oro);
  flex: none;
}
.banda--tinta .rotulo { color: var(--turquesa); }
.rotulo--centro { justify-content: center; }

.entradilla {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 58ch;
  font-weight: 300;
}
.banda--tinta .entradilla { color: var(--texto-inv-2); }

.cuerpo { max-width: 62ch; }

.filete {
  height: 1px;
  background: var(--linea);
  border: 0;
  margin: 0;
}
.filete--oro { background: linear-gradient(90deg, var(--oro), rgba(201, 169, 106, 0)); }

/* Cabecera de sección: rótulo + titular + entradilla */
.encabezado { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado--centro { text-align: center; }
.encabezado--centro .entradilla { margin-inline: auto; }
.encabezado--centro .rotulo { justify-content: center; }

/* ── botones ─────────────────────────────────────────────────────────────── */

.btn {
  --btn-fondo: var(--tinta);
  --btn-tinta: var(--texto-inv);
  --btn-tinta-hover: var(--tinta);
  --btn-borde: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.02rem 2.1rem;
  background: var(--btn-fondo);
  color: var(--btn-tinta);
  border: 1px solid var(--btn-borde);
  font-family: var(--texto-f);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease), background-color .45s var(--ease);
}
/* El relleno entra desde abajo: microinteracción discreta, nada de rebotes. */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--btn-tinta);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--btn-tinta-hover); }
.btn:hover::after { transform: translateY(0); }

.btn--linea {
  --btn-fondo: transparent;
  --btn-tinta: var(--tinta);
  --btn-tinta-hover: var(--texto-inv);   /* el relleno que sube es tinta */
  --btn-borde: var(--linea-fuerte);
}
.btn--linea:hover { color: var(--texto-inv); border-color: var(--tinta); }
.btn--linea::after { background: var(--tinta); }

.btn--claro {
  --btn-fondo: transparent;
  --btn-tinta: var(--texto-inv);
  --btn-tinta-hover: var(--tinta);       /* el relleno que sube es marfil */
  --btn-borde: var(--linea-inv-fuerte);
}
.btn--claro:hover { color: var(--tinta); border-color: var(--texto-inv); }
.btn--claro::after { background: var(--texto-inv); }

.btn--solido-claro {
  --btn-fondo: var(--marfil);
  --btn-tinta: var(--tinta);
  --btn-tinta-hover: var(--marfil);      /* el relleno que sube es tinta */
  --btn-borde: var(--marfil);
}
.btn--solido-claro::after { background: var(--tinta); }
.btn--solido-claro:hover { color: var(--marfil); }

.btn--grande { padding: 1.35rem 3rem; font-size: .84rem; }
.btn--bloque { display: flex; width: 100%; }

/* En las bandas oscuras y en el pie los enlaces se pintan turquesa. Un botón
   NO es un enlace de texto: sin esta regla, «Solicitar asesoría» salía
   turquesa sobre su fondo marfil — 2,2:1, ilegible.

   El color de hover se declara con --btn-tinta-hover y NO con --btn-fondo:
   los botones de solo contorno tienen --btn-fondo: transparent, así que
   usarlo dejaba el texto literalmente invisible al pasar el ratón. */
.banda--tinta a.btn, .pie a.btn, .banner a.btn, .hero a.btn,
.portadilla--foto a.btn { color: var(--btn-tinta); }
.banda--tinta a.btn:hover, .pie a.btn:hover, .banner a.btn:hover, .hero a.btn:hover,
.portadilla--foto a.btn:hover { color: var(--btn-tinta-hover); }

.botonera { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* Enlace de texto con subrayado que se dibuja */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
  padding-bottom: .3rem;
  background-image: linear-gradient(var(--verde), var(--verde));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .5s var(--ease), color .3s var(--ease);
}
.enlace:hover, .enlace:focus-visible { background-size: 100% 1px; }
.banda--tinta .enlace {
  color: var(--turquesa);
  background-image: linear-gradient(var(--turquesa), var(--turquesa));
}
.enlace__flecha { transition: transform .5s var(--ease); }
.enlace:hover .enlace__flecha { transform: translateX(4px); }

/* ── cabecera ────────────────────────────────────────────────────────────
   Siempre marfil sólida. Se probó transparente sobre el hero, pero con el
   hero partido la mitad derecha es una pared blanca: el texto claro del nav
   desaparecía encima. Un mástil sólido además da el mismo aire de revista
   que usan Aesop o Jo Malone. */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--marfil);
  border-bottom: 1px solid transparent;
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.cabecera.is-fija { border-bottom-color: var(--linea); }
.cabecera__interior {
  width: min(1520px, 100%);
  margin-inline: auto;
  padding: 1.05rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.marca { flex: none; display: block; line-height: 0; }
.marca img { width: clamp(112px, 12vw, 150px); height: auto; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.1vw, 2.1rem);
}
.nav__enlace {
  font-size: .74rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--texto);
  padding: .45rem 0;
  position: relative;
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.nav__enlace:hover { color: var(--tinta); }
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__enlace:hover::after,
.nav__enlace:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); background: var(--oro); }

.nav__cta { margin-left: .6rem; padding: .78rem 1.5rem; font-size: .72rem; }

.hamburguesa {
  display: none;
  flex: none;
  margin-left: auto;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.hamburguesa__barra {
  position: absolute;
  left: 11px;
  width: 24px; height: 1px;
  background: var(--tinta);
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.hamburguesa__barra:nth-of-type(1) { top: 18px; }
.hamburguesa__barra:nth-of-type(2) { top: 27px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-of-type(1) { transform: translateY(4.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-of-type(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Menú móvil: telón marfil a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--marfil);
  padding: 6.5rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  /* visibility con retardo, no con duración: al ABRIR tiene que pasar a
     visible en el mismo instante o el .focus() del primer enlace no hace
     nada (no se puede enfocar lo invisible) y la trampa de foco se rompe.
     Al CERRAR espera a que termine el desvanecido. */
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s linear .45s;
}
.menu.is-abierto {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s linear 0s;
}
.menu__lista { border-top: 1px solid var(--linea); }
.menu__enlace {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--display);
  font-size: 1.85rem;
  color: var(--tinta);
}
.menu__num {
  font-family: var(--texto-f);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--verde);
}
.menu__pie { margin-top: auto; padding-top: 2.5rem; }

/* ── hero ────────────────────────────────────────────────────────────────
   Partido a propósito: TODA la fotografía del cliente es vertical (1707×2560),
   así que un apaisado a sangre cortaría los difusores por la mitad. En móvil
   la foto pasa a fondo con velo, que es donde sí funciona a sangre. */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(92svh, 880px);
  background: var(--tinta);
  color: var(--texto-inv);
  overflow: hidden;
  isolation: isolate;
}
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Velo plano + degradado. La foto es de pared blanca: con un degradado
     suave el titular blanco se quedaba en 2,2:1. Con las dos capas, la zona
     del texto baja a ~0,14 de luminancia → 5:1 contra el blanco. */
  background:
    linear-gradient(to top, rgba(16,17,16,.8) 0%, rgba(16,17,16,.62) 55%, rgba(16,17,16,.3) 100%),
    linear-gradient(rgba(16,17,16,.55), rgba(16,17,16,.55));
}
.hero__interior {
  width: 100%;
  padding: 8.5rem var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
}
.hero__titulo {
  color: var(--texto-inv);
  max-width: 15ch;
  margin-bottom: .32em;
  /* Escala propia, más contenida que la del h1 general: en el hero partido
     el titular vive en media pantalla y «Transformamos» es una palabra larga
     que se salía del panel de tinta. */
  font-size: clamp(2.3rem, 4.4vw, 4.6rem);
  /* El H1 es el elemento LCP: sin animación de entrada, a propósito. */
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  font-weight: 300;
  color: var(--texto-inv);
  max-width: 42ch;
  margin-bottom: 0;
}
.hero__tira {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--linea-inv);
  display: flex;
  flex-wrap: wrap;
  gap: .55rem clamp(1.1rem, 2.6vw, 2.4rem);
}
.hero__tira li {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-inv-2);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: stretch;
  }
  .hero__foto {
    position: relative;
    inset: auto;
    z-index: 0;
    grid-column: 2; grid-row: 1;
    object-position: 50% 50%;
  }
  .hero::before { content: none; }
  .hero__interior {
    grid-column: 1; grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10rem clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 4.5rem) var(--gutter);
  }
}

/* Cabecera de página interior (sin foto a sangre) */
.portadilla {
  position: relative;
  padding: clamp(8.5rem, 15vw, 12rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--marfil);
  overflow: hidden;
}
.portadilla--foto { background: var(--tinta); color: var(--texto-inv-2); }
.portadilla--foto h1 { color: var(--texto-inv); }
.portadilla--foto .entradilla { color: var(--texto-inv-2); }
.portadilla--foto .rotulo { color: var(--turquesa); }
.portadilla__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .48;
}
/* En escritorio el texto vive a la izquierda y basta un velo diagonal. En
   móvil ocupa TODO el ancho, así que ahí se aplana: medido, la entradilla
   bajaba de 4,5:1 sobre las zonas claras de la foto. */
.portadilla--foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(16,17,16,.88) 0%, rgba(16,17,16,.72) 55%, rgba(16,17,16,.55) 100%),
    linear-gradient(rgba(16,17,16,.3), rgba(16,17,16,.3));
}
@media (min-width: 900px) {
  .portadilla--foto::after {
    background: linear-gradient(to right, rgba(16,17,16,.9) 0%, rgba(16,17,16,.62) 55%, rgba(16,17,16,.32) 100%);
  }
}
.portadilla__interior { position: relative; z-index: 2; }
.portadilla h1 { max-width: 18ch; }

/* ── carta de aromas (la firma) ──────────────────────────────────────────── */

.carta { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
/* Por debajo de 900 px no hay puntero que recorra la lista: el marco no
   llegaría a cambiar nunca y sus diez fotos se descargarían igual. Fuera del
   layout, así el lazy-load ni las pide. La carta queda como índice puro. */
@media (max-width: 899px) { .carta__columna-foto { display: none; } }

.carta__marco {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--marfil-hondo);
  overflow: hidden;
}
.carta__marco img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s var(--ease-suave), transform 1.4s var(--ease);
}
.carta__marco img.is-visible { opacity: 1; transform: scale(1); }
/* Filete de oro que enmarca la foto por dentro */
.carta__marco::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(247, 244, 238, .3);
  pointer-events: none;
  z-index: 2;
}

.carta__lista { border-top: 1px solid var(--linea); }

.carta__fila {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: baseline;
  gap: .6rem 1rem;
  padding: 1.15rem .6rem 1.15rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--texto);
  position: relative;
  transition: padding-left .5s var(--ease), color .35s var(--ease);
}
.carta__fila::before {
  content: "";
  position: absolute;
  left: -1.4rem; top: 50%;
  width: .9rem; height: 1px;
  background: var(--turquesa);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.carta__fila:hover,
.carta__fila:focus-visible,
.carta__fila.is-activa { padding-left: 1.1rem; color: var(--tinta); }
.carta__fila:hover::before,
.carta__fila:focus-visible::before,
.carta__fila.is-activa::before { transform: scaleX(1); transform-origin: left; }

.carta__num {
  font-family: var(--display);
  font-size: .95rem;
  color: var(--verde);
  font-variant-numeric: lining-nums;
}
.carta__nombre {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  line-height: 1.15;
}
.carta__familia {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-2);
  text-align: right;
}

@media (min-width: 900px) {
  .carta {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .carta__columna-foto { position: sticky; top: 7.5rem; }
}

/* ── ficha de fragancia (página de catálogo) ─────────────────────────────── */

.aroma {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--linea);
  scroll-margin-top: 6rem;
}
.aroma:last-of-type { border-bottom: 0; }

.aroma__foto { position: relative; }
.aroma__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.aroma__nombre { margin-bottom: .3em; }
/* El número vive en la línea de familia, no como cifra gigante: la carta de
   la portada ya se queda con ese gesto. */
.aroma__familia {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 1.5rem;
}
.aroma__num { font-family: var(--display); font-size: .95rem; letter-spacing: 0; }
.aroma__num::after {
  content: "";
  display: inline-block;
  width: 1.6rem; height: 1px;
  margin: 0 0 .28em .8rem;
  background: var(--oro);
  vertical-align: middle;
}

/* La pirámide olfativa: el vocabulario real de la perfumería */
.notas {
  margin: 1.9rem 0 0;
  border-top: 1px solid var(--linea);
}
.notas__fila {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--linea);
}
.notas__clave {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding-top: .18em;
}
.notas__valor { font-size: .95rem; color: var(--texto); }

.sensacion {
  margin-top: 1.9rem;
  padding-left: 1.35rem;
  border-left: 1px solid var(--oro);
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--tinta);
}

.espacios {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.7rem;
}
.espacios li {
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-2);
  border: 1px solid var(--linea);
  padding: .48rem .85rem;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.aroma:hover .espacios li { border-color: var(--linea-fuerte); }

@media (min-width: 860px) {
  .aroma { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
  .aroma--invertida .aroma__foto { order: 2; }
}

/* Índice del catálogo: las diez de un vistazo, para saltar a cada ficha */
/* El filete es del contenedor, no de cada fila: con 10 aromas en 4 columnas
   la última fila iba a medias y la regla se cortaba en seco a mitad de ancho. */
.indice-aromas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  border-block: 1px solid var(--linea);
  padding-block: .35rem;
}
.indice-aromas__lista a {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .8rem .4rem;
  font-family: var(--display);
  font-size: 1.06rem;
  color: var(--texto);
  transition: color .35s var(--ease), padding-left .45s var(--ease);
}
.indice-aromas__lista a:hover,
.indice-aromas__lista a:focus-visible { color: var(--verde); padding-left: .9rem; }
.indice-aromas__lista span {
  font-family: var(--texto-f);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--verde);
  flex: none;
}

/* ── rejillas genéricas ──────────────────────────────────────────────────── */

.rejilla { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Tarjeta con foto */
.tarjeta { position: relative; display: block; color: inherit; }
.tarjeta__foto {
  position: relative;
  overflow: hidden;
  background: var(--marfil-hondo);
  margin-bottom: 1.25rem;
}
.tarjeta__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.tarjeta:hover .tarjeta__foto img,
a.tarjeta:focus-visible .tarjeta__foto img { transform: scale(1.045); }
.tarjeta__titulo { margin-bottom: .4rem; }
.tarjeta__texto { color: var(--texto-2); font-size: .96rem; margin: 0; }
.tarjeta--vertical .tarjeta__foto img { aspect-ratio: 4 / 5; }

/* Tarjeta sin foto, sobria, con filete */
.ficha {
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  height: 100%;
  transition: border-color .5s var(--ease), transform .6s var(--ease);
}
.banda--marfil .ficha { background: var(--marfil); }
.ficha:hover { border-color: var(--linea-fuerte); }
.ficha__num {
  font-family: var(--display);
  font-size: .9rem;
  color: var(--verde);
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.ficha h3 { margin-bottom: .5rem; }
.ficha p { color: var(--texto-2); font-size: .96rem; margin: 0; }

.banda--tinta .ficha {
  background: transparent;
  border-color: var(--linea-inv);
}
.banda--tinta .ficha:hover { border-color: var(--linea-inv-fuerte); }
.banda--tinta .ficha p { color: var(--texto-inv-2); }
.banda--tinta .ficha__num { color: var(--turquesa); border-bottom-color: var(--linea-inv); }

/* ── dípticos texto + foto ───────────────────────────────────────────────── */

.diptico {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Cuando las dos columnas tienen alturas muy distintas —un formulario largo
   frente a una foto— centrarlas deja los arranques desfasados. */
.diptico--arriba { align-items: start; }
.diptico__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.diptico__foto--ancha img { aspect-ratio: 4 / 3; }

@media (min-width: 880px) {
  .diptico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diptico--invertido .diptico__foto { order: 2; }
}

/* Par de fotos desalineadas: gesto editorial, no decorativo */
.par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
  align-items: start;
}
.par img { width: 100%; object-fit: cover; }
.par__alta img { aspect-ratio: 3 / 4; }
.par__baja { margin-top: clamp(2rem, 7vw, 5rem); }
.par__baja img { aspect-ratio: 4 / 5; }

/* ── banner a sangre ─────────────────────────────────────────────────────── */

.banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(62svh, 620px);
  color: var(--texto-inv);
  background: var(--tinta);
  overflow: hidden;
  isolation: isolate;
}
.banner__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.banner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Dos capas: una diagonal que oscurece el lado del texto y un velo plano
     que sostiene el contraste cuando la foto tiene focos o ventanas. */
  background:
    linear-gradient(105deg, rgba(16,17,16,.92) 0%, rgba(16,17,16,.74) 46%, rgba(16,17,16,.34) 100%),
    linear-gradient(rgba(16,17,16,.22), rgba(16,17,16,.22));
}
.banner__interior { width: min(var(--wrap), 100%); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); }
.banner h2 { color: var(--texto-inv); max-width: 17ch; }
.banner .entradilla { color: var(--texto-inv); }
.banner .rotulo { color: var(--turquesa); }

/* ── iconos de característica ────────────────────────────────────────────── */

.caracteristicas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
@media (min-width: 620px) { .caracteristicas { grid-template-columns: repeat(3, 1fr); } }

.caracteristica {
  background: var(--blanco);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.banda--marfil .caracteristica { background: var(--marfil); }
.caracteristica__icono { color: var(--verde); }
.caracteristica__icono svg { width: 26px; height: 26px; }
.caracteristica h3 { font-size: 1.08rem; margin: 0; }
.caracteristica p { font-size: .92rem; color: var(--texto-2); margin: 0; }

/* ── plano de cobertura (escala √área) ───────────────────────────────────── */

.plano {
  background: var(--marfil);
  border: 1px solid var(--linea);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.plano__cuerpo { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.plano__dibujo { width: 100%; height: auto; }
@media (min-width: 780px) {
  .plano__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
  }
}

.plano__leyenda { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.plano__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: .95rem;
  align-items: start;
}
.plano__muestra {
  width: 14px; height: 14px;
  margin-top: .5rem;
  border: 1px solid;
  grid-row: 1 / 4;
}
.plano__muestra--m3 { border-color: rgba(16,17,16,.55); background: rgba(16,17,16,.05); }
.plano__muestra--m2 { border-color: var(--verde); background: rgba(109,191,177,.18); }
.plano__muestra--m1 { border-color: var(--oro-texto); background: rgba(201,169,106,.24); }
.plano__clave {
  grid-column: 2;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.plano__valor {
  grid-column: 2;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 1.95rem);
  line-height: 1.12;
  color: var(--tinta);
}
.plano__usos { grid-column: 2; font-size: .93rem; color: var(--texto-2); margin-top: .2rem; }

.plano__nota {
  font-size: .78rem;
  color: var(--texto-2);
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  max-width: 62ch;
}

/* Modelos */
/* Columna flexible + el bloque «Equipos» empujado abajo: si no, el filete de
   remate sigue al contenido y las tres fichas terminan a alturas distintas. */
.modelo {
  border-top: 1px solid var(--linea);
  padding-top: 1.6rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.modelo__cobertura {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1;
  color: var(--tinta);
  display: block;
  margin-bottom: .2rem;
}
/* SIN text-transform: en versalitas «m²» se convierte en «M²», que en el SI
   es megametro cuadrado. La unidad se escribe como se escribe. */
.modelo__unidad { font-family: var(--texto-f); font-size: .8rem; letter-spacing: .1em; color: var(--verde); }
.modelo__equipos {
  /* auto empuja el bloque al fondo de la ficha para que el filete de remate
     quede a la misma altura en las tres. El hueco lo pone el padding, no un
     margen: un margin-top fijo aquí anularía el auto. */
  margin-top: auto;
  padding-top: 1.6rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-2);
  border-top: 1px solid var(--linea);
}
.lista-check { margin-top: 1.1rem; display: grid; gap: .5rem; }
.lista-check li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .95rem;
  color: var(--texto-2);
}
.lista-check li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .62em;
  border: 1px solid var(--verde);
  border-radius: 50%;
}
.banda--tinta .lista-check li { color: var(--texto-inv-2); }
.banda--tinta .lista-check li::before { border-color: var(--turquesa); }

/* ── planes de recarga ───────────────────────────────────────────────────── */

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--linea);
  background: var(--blanco);
  height: 100%;
  position: relative;
  transition: border-color .5s var(--ease);
}
.plan:hover { border-color: var(--linea-fuerte); }
.plan--destacado { border-color: var(--oro); }
.plan--destacado::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--oro), rgba(201,169,106,.15));
}
.plan__nombre { margin-bottom: .3rem; }
.plan__para {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
}
.plan .btn { margin-top: auto; }
.plan .lista-check { margin-bottom: 2rem; }

/* ── sectores ────────────────────────────────────────────────────────────── */

.sector { position: relative; overflow: hidden; }
.sector img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Sin zoom al pasar el ratón: estas tarjetas NO son enlaces y el zoom lento
   es la señal universal de «púlsame». Solo se anima donde sí se navega. */
a.sector img { transition: transform 1.3s var(--ease); }
a.sector:hover img, a.sector:focus-visible img { transform: scale(1.05); }
.sector__pie {
  position: absolute;
  inset: auto 0 0;
  padding: 2.75rem 1.35rem 1.25rem;
  /* El degradado va «to top», así que 0% es ABAJO. El nombre del sector vive
     ARRIBA del pie, que es justo donde un degradado normal está más flojo:
     medido sobre la captura, «Oficina» sobre una pared clara se quedaba en
     3,3:1. Por eso el velo se mantiene denso hasta el 72% y solo se disuelve
     en la franja superior, donde ya no hay texto. */
  background: linear-gradient(to top,
    rgba(16,17,16,.95) 0%, rgba(16,17,16,.92) 72%, rgba(16,17,16,.55) 88%, rgba(16,17,16,0) 100%);
  color: var(--texto-inv);
}
.sector__nombre {
  font-family: var(--display);
  font-size: 1.32rem;
  line-height: 1.1;
  margin-bottom: .3rem;
  /* Sin esto hereda el tinta de la regla base de h1–h4 y se pierde en el
     velo: los rótulos salían en negro sobre negro. */
  color: var(--texto-inv);
}
.sector__texto { font-size: .86rem; color: var(--texto-inv-2); margin: 0; line-height: 1.5; }

/* ── datos / beneficios ──────────────────────────────────────────────────── */

.dato {
  padding-top: 1.6rem;
  border-top: 1px solid var(--linea-inv);
}
/* El titular es un <p class="dato__titulo">, así que «.dato p» lo pisaba
   entero: salía a 15 px y del mismo color que el cuerpo. Se acota. */
p.dato__titulo {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.12;
  color: var(--texto-inv);
  margin: 0 0 .55rem;
}
.dato p { font-size: .95rem; color: var(--texto-inv-2); margin: 0; }

/* ── pasos ───────────────────────────────────────────────────────────────── */

.pasos { counter-reset: paso; display: grid; gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso {
  counter-increment: paso;
  background: var(--blanco);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.3rem, 2.5vw, 1.9rem);
}
.banda--marfil .paso { background: var(--marfil); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--display);
  font-size: .95rem;
  color: var(--verde);
  display: block;
  margin-bottom: 1.5rem;
}
.paso h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.paso p { font-size: .93rem; color: var(--texto-2); margin: 0; }
.pasos--3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .pasos--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── formulario ──────────────────────────────────────────────────────────── */

.formulario { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { display: flex; flex-direction: column; gap: .5rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.campo .opcional { text-transform: none; letter-spacing: .02em; font-size: .74rem; }
.campo input,
.campo textarea,
.campo select {
  font-family: var(--texto-f);
  font-size: 1rem;
  color: var(--texto);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea-fuerte);
  padding: .75rem 0;
  border-radius: 0;
  transition: border-color .4s var(--ease);
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-bottom-color: var(--tinta); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-bottom-color: var(--verde);
  border-bottom-width: 2px;
  padding-bottom: calc(.75rem - 1px);
}
.campo input::placeholder, .campo textarea::placeholder { color: #6b706d; opacity: 1; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-bottom-color: #a4322a; }

.error {
  font-size: .82rem;
  color: #a4322a;          /* 6.0:1 sobre blanco */
  min-height: 1.2em;
}
.aviso {
  grid-column: 1 / -1;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--verde);
  background: var(--marfil);
  font-size: .95rem;
}
/* «Revisa los campos» y «tu solicitud está lista» eran el mismo recuadro con
   el mismo filete verde: el que falla tiene que verse distinto al que sale bien. */
.aviso--error { border-left-color: #a4322a; background: #fbf1f0; }
.aviso[hidden] { display: none; }
/* La solicitud en claro, por si el mailto no abre nada: es la única salida
   real cuando el equipo no tiene cliente de correo configurado. */
.aviso__texto {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: .8rem .9rem;
  font-family: var(--texto-f);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 0;
  resize: vertical;
}

.datos-contacto { display: grid; gap: 2rem; }
.dato-contacto { padding-top: 1.35rem; border-top: 1px solid var(--linea); }
.dato-contacto__clave {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: .55rem;
}
.dato-contacto p, .dato-contacto address {
  font-style: normal;
  font-size: 1rem;
  color: var(--texto);
  margin: 0;
  line-height: 1.6;
}

/* ── shop ────────────────────────────────────────────────────────────────── */

.shop { text-align: center; }
.shop h1 { max-width: 14ch; margin-inline: auto; }
.shop .entradilla { margin-inline: auto; }
.shop .btn { margin-top: 3rem; }

/* ── pie ─────────────────────────────────────────────────────────────────── */

/* El cierre suele ser .banda--tinta y el pie es del mismo negro: sin un
   filete en medio se leían como un único bloque de 230 px de nada. */
.pie {
  background: var(--tinta);
  color: var(--texto-inv-2);
  padding-block: clamp(3rem, 5vw, 4rem) 2rem;
}
.banda--tinta + .pie { border-top: 1px solid var(--linea-inv); }
.banda--tinta:last-of-type { padding-bottom: clamp(3rem, 6vw, 5rem); }
.pie a { color: var(--texto-inv-2); }
.pie a:hover { color: var(--texto-inv); }
.pie__alto { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--linea-inv); }
@media (min-width: 820px) { .pie__alto { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie__logo img { width: 168px; margin-bottom: 1.5rem; }
.pie__lema { font-family: var(--display); font-size: 1.25rem; font-style: italic; color: var(--texto-inv); max-width: 24ch; line-height: 1.4; }
.pie__titulo {
  font-family: var(--texto-f);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--turquesa);
  margin-bottom: 1.35rem;
}
/* gap pequeño + padding en el enlace: el ritmo visual es el mismo pero el
   objetivo táctil pasa de 22 px a ~44 px. */
.pie__lista { display: grid; gap: .1rem; font-size: .95rem; }
.pie__lista li { padding-block: .3rem; }
.pie__lista a { display: inline-block; padding-block: .3rem; }
.pie__bajo {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 2rem;
  justify-content: space-between;
  font-size: .8rem;
  color: #8d928f;          /* 4.6:1 sobre tinta */
}
.pie__creditos { max-width: 60ch; line-height: 1.6; }

/* ── movimiento ──────────────────────────────────────────────────────────── */

/* La clase .js la pone script.js: si el script no carga, la página se ve
   entera en vez de quedarse invisible. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--ease-suave), transform .95s var(--ease);
}
.js .reveal-foto img { clip-path: inset(0 0 100% 0); }
.js .reveal-foto.is-visible img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease);
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .nav { display: none; }
  .hamburguesa { display: block; }
}

@media (max-width: 640px) {
  .carta__fila { grid-template-columns: 2.6rem 1fr; }
  .carta__familia { grid-column: 2; text-align: left; margin-top: -.35rem; }
  .notas__fila { grid-template-columns: 1fr; gap: .2rem; }
  .botonera .btn { width: 100%; }
  .hero__interior { padding-top: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal-foto img { clip-path: none; }
}

@media print {
  .cabecera, .menu, .hamburguesa, .btn { display: none !important; }
  body { color: #000; }
}