/* ==========================================================================
   HABIANCE — Editorial Suizo / Revista de Arquitectura Financiera
   Rediseño 10-sep-2026 a pedido de Valery: fuera las tarjetas flotantes con
   radius/shadow y el patrón "eyebrow + H2 centrado + 3 cajitas" (se sentía
   a diapositiva de PowerPoint). Ahora: lienzo oscuro continuo, tipografía
   monumental con clamp(), índices de líneas finas (hairlines) en vez de
   grillas de tarjetas, y layout asimétrico alineado a la izquierda —
   estilo Bloomberg / Kinfolk / ArchDaily.

   Estructura de este archivo:
   1. Variables y reset
   2. Utilidades (container, eyebrow, hairline, botones)
   3. Nav / menú overlay
   4. Hero
   5. Bloque de cifra monumental (Enfoque)
   6. Índice de líneas finas (componente reusado: Método, Servicios,
      Normativa) + variantes de tarjeta heredadas (Tarifas, Glosario, FAQ
      de subpáginas — no reescritas esta vez, solo re-paletizadas)
   7. Cobertura (foto + índice de ciudades)
   8. Misión / CTA
   9. Footer / video de marca
   10. Reveals + responsive
   ========================================================================== */

:root {
  /* ---- LIENZO CLARO (10-sep-2026) ------------------------------------------
     El fondo #30302E se veía negro. Se invierte la paleta: la CREMA es ahora
     el color dominante (sitio claro, editorial), el charcoal es el TEXTO, y
     el verde y el burgundy vuelven como SECCIONES ENTERAS oscuras —Misión en
     verde, CTA en burgundy, Footer en charcoal— igual que los "spreads"
     oscuros de una revista sobre páginas claras.
       crema/fondo : #E8D0B6      charcoal/texto : #30302E
       verde       : #424C32      burgundy       : #4C162B
     El cobre (#89551E oscuro sobre crema / #D09251 claro sobre los spreads)
     sigue como acento porque verde y burgundy son ilegibles como texto chico.
     ------------------------------------------------------------------------ */
  --bg: #E8D0B6;         /* crema — fondo de casi todas las secciones */
  --bg-alt: #DFC4A5;     /* crema más profunda — placeholders de foto */
  --bg-raised: #F1E1CB;  /* crema más clara — panel del calendario */
  --ink: #30302E;        /* charcoal — texto principal sobre la crema */
  --ink-soft: #5B534A;   /* charcoal apagado — descripciones */
  --ink-faint: #8C8072;  /* charcoal muy apagado — metadatos, numeración */
  --ink-on-raised: #30302E;

  --paper: #F5EDDF;      /* casi-blanco cálido — texto sobre los spreads oscuros */

  --gold: #89551E;       /* cobre profundo — acento legible sobre la crema */
  --gold-deep: #6E4416;
  --gold-dim: rgba(48,48,46,0.26);   /* borde sutil de badge sobre crema */
  --gold-on-dark: #D6A063;           /* cobre claro — acento sobre spreads oscuros */

  --wine: #4C162B;       /* burgundy — spread del CTA, badge destacado */
  --olive: #424C32;      /* verde — spread de Misión */
  --char: #2A2A28;       /* charcoal profundo — footer / video de marca */

  --hairline: rgba(48, 48, 46, 0.16);
  --hairline-strong: rgba(48, 48, 46, 0.34);
  --hairline-on-raised: rgba(48, 48, 46, 0.12);
  --hairline-on-dark: rgba(232, 208, 182, 0.2);

  /* WhatsApp: verde real; el acento "de éxito" del calendario usa el oliva
     de marca (bien legible sobre la crema). */
  --emerald: #25D366;
  --emerald-soft: #3F5C2A;
  --emerald-ink: #14200D;

  /* nombre exacto confirmado por el kit de Adobe Fonts de Valery (kit
     cks3kbp): selector en minúsculas y con guion, "quiche-sans". El kit
     trae también el corte itálico en 700 — se usa en <em> dentro de
     titulares, no como cuerpo de titular completo. */
  --font-display: 'quiche-sans', ui-sans-serif, system-ui, sans-serif; /* titulares masivos + cifras monumentales */
  --font-heading: 'Raleway', ui-sans-serif, system-ui, sans-serif;     /* encabezados estructurados (h3 de índices) */
  --font-body: 'Asap', ui-sans-serif, system-ui, sans-serif;           /* cuerpo + microtexto/eyebrows */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
h3, h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.005em; }
::selection { background: var(--gold); color: var(--bg); }

/* énfasis itálico dentro de titulares — la única función de la itálica de
   Quiche Sans en todo el sitio, según el sistema tipográfico del rediseño */
em.display-em, .display-em {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  color: var(--gold); font-size: 0.94em;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- barra de progreso de scroll (global) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.6rem;
}
.eyebrow-dark { color: var(--gold); }

.hr { border: none; border-top: 1px solid var(--hairline); margin: 0; }

/* ---- ritmo de sección: capítulos de una publicación, no diapositivas —
   separados por una hairline superior, sin tarjetas ni sombra ---- */
.section {
  padding: 2.4rem 0; position: relative;
  background-color: transparent;
  border-top: 1px solid var(--hairline);
}
.section.no-hr { border-top: none; padding-top: 0.6rem; }
@media (max-width: 768px) {
  .section { padding: 1.9rem 0; }
}

/* 13-sep-2026: 46ch dejaba demasiado fondo plano vacío a la derecha del
   párrafo en las secciones de color sólido (Enfoque, Servicios, Misión,
   CTA) en pantallas anchas —lo que Valery reportó como "espacios sin
   sentido". 58ch aprovecha más el ancho disponible sin sacrificar
   legibilidad. */
.lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 58ch; }
.source-note { font-size: 0.78rem; color: var(--ink-faint); font-style: italic; margin: 0.6rem 0 0; max-width: 42ch; }

/* ---- cabecera de sección: sin centrar, sin caja — eyebrow + título
   masivo alineados a la izquierda, con una columna de meta opcional a
   la derecha en desktop (drama scale + grid asimétrico) ---- */
.chapter-head {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 3.6rem);
}
@media (min-width: 861px) {
  .chapter-head { grid-template-columns: 2.2fr 1fr; align-items: end; gap: 2rem; }
}
.chapter-head h2 {
  font-size: clamp(2.4rem, 5.2vw, 4.1rem); line-height: 1.03; letter-spacing: -0.015em;
}
.chapter-meta { font-size: 0.92rem; color: var(--ink-soft); max-width: 34ch; }
@media (min-width: 861px) { .chapter-meta { text-align: right; justify-self: end; } }

/* ==========================================================================
   BOTONES — rectangulares, sin radius/sombra suave; borde + relleno plano
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1rem 1.7rem; border-radius: 0; border: 1px solid transparent;
  transition: transform 400ms var(--ease-spring), background 300ms var(--ease-out), border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-primary:hover { background: transparent; color: var(--gold); }
.btn-emerald { background: var(--emerald); color: var(--emerald-ink); border-color: var(--emerald); }
.btn-emerald:hover { background: transparent; color: var(--emerald); }
.btn-outline { border-color: var(--hairline-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: rgba(48,48,46,0.05); }
.btn-arrow svg { transition: transform 400ms var(--ease-spring); }
.btn:hover .btn-arrow svg { transform: translate(2px, -2px); }

.text-link {
  font-family: var(--font-body);
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.03em; color: var(--gold);
  border-bottom: 1px solid var(--hairline-strong); padding-bottom: 3px;
  transition: border-color 250ms var(--ease-out), color 250ms var(--ease-out);
}
.text-link:hover { border-color: var(--gold); color: var(--gold); }

/* ==========================================================================
   NAV — masthead fijo de línea fina, no pill flotante
   ========================================================================== */
.nav-wrap {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 4.4rem;
  border-bottom: 1px solid transparent;
  transition: background 350ms var(--ease-out), border-color 350ms var(--ease-out);
}
.nav-wrap.scrolled {
  background: rgba(232, 208, 182, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hairline);
}
.nav-bar {
  max-width: var(--container); margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
}
.nav { display: flex; align-items: center; gap: 0.9rem; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { display: block; height: 26px; width: auto; opacity: 0.9; }
.nav-wordmark {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.02em; color: var(--ink);
}

.nav-burger {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.4rem 0; background: none; border: none; cursor: pointer;
}
.nav-burger-text {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  transition: color 200ms;
}
.nav-burger:hover .nav-burger-text { color: var(--gold); }
.hamburger { position: relative; width: 22px; height: 14px; flex: 0 0 auto; }
.hamburger span {
  position: absolute; left: 0; width: 100%; height: 1px; background: var(--ink);
  transition: transform 380ms var(--ease-spring), opacity 250ms, top 380ms var(--ease-spring);
}
.hamburger span:first-child { top: 0; }
.hamburger span:last-child { top: 100%; margin-top: -1px; }
.nav-burger.open .hamburger span:first-child { top: 50%; transform: rotate(45deg); }
.nav-burger.open .hamburger span:last-child { top: 50%; margin-top: -1px; transform: rotate(-45deg); }

/* ---- menú overlay — lista editorial grande, sin blur decorativo excesivo ---- */
.menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease-out); }
.menu-inner {
  width: min(92vw, 1100px); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 760px) {
  .menu-inner { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: start; }
}

.menu-eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  margin-bottom: 1.3rem;
}
.menu.open .menu-eyebrow { opacity: 1; transform: translateY(0); }
.menu-biglist { display: flex; flex-direction: column; }
.menu-biglink {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 5.8vw, 3.4rem);
  line-height: 1.18;
  color: var(--ink);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hairline);
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.menu.open .menu-biglink { opacity: 1; transform: translateY(0); }
.menu-biglist .menu-biglink:nth-child(1) { transition-delay: 80ms; }
.menu-biglist .menu-biglink:nth-child(2) { transition-delay: 140ms; }
.menu-biglist .menu-biglink:nth-child(3) { transition-delay: 200ms; }
.menu-biglist .menu-biglink:nth-child(4) { transition-delay: 260ms; }
@media (hover: hover) {
  .menu.open .menu-biglist:hover .menu-biglink { opacity: 0.35; }
  .menu.open .menu-biglist .menu-biglink:hover { opacity: 1 !important; color: var(--gold); border-color: var(--gold); }
}

.menu-groups { display: flex; flex-direction: column; gap: 2.1rem; text-align: left; }
.menu-group-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.menu.open .menu-group-label { opacity: 1; transform: translateY(0); }
.menu-group { display: flex; flex-direction: column; }
.menu-grouplink {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink-soft);
  padding: 0.45rem 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), color 250ms var(--ease-out);
}
.menu.open .menu-grouplink { opacity: 1; transform: translateY(0); }
.menu-group:nth-child(1) .menu-group-label, .menu-group:nth-child(1) .menu-grouplink { transition-delay: 160ms; }
.menu-group:nth-child(2) .menu-group-label, .menu-group:nth-child(2) .menu-grouplink { transition-delay: 220ms; }
@media (hover: hover) { .menu-grouplink:hover { color: var(--gold); } }

.menu-tagline {
  display: block; margin-top: 2.6rem; grid-column: 1 / -1;
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1rem;
  color: var(--gold);
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--ease-out) 340ms, transform 500ms var(--ease-out) 340ms;
}
.menu.open .menu-tagline { opacity: 0.9; transform: translateY(0); }

/* ==========================================================================
   HERO — titular masivo, drama scale con clamp()
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--bg);
  overflow: hidden;
  padding: 9rem 0 5rem;
}
.hero-glow {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(55% 55% at 12% 8%, rgba(76,22,43,0.07), transparent 62%),
    radial-gradient(45% 45% at 90% 96%, rgba(66,76,50,0.06), transparent 60%),
    var(--glow-base, var(--bg));
}
.hero-celosia {
  position: absolute; inset: -4%; z-index: 1;
  background-image: url("assets/celosia.svg");
  background-size: 96px 96px; background-position: center;
  opacity: 0.08;
}
.cta .hero-celosia, .cta .hero-glow { will-change: transform; }

.hero-photo-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(48,48,46,0.8) 0%, rgba(48,48,46,0.3) 42%, transparent 64%),
    linear-gradient(100deg, rgba(48,48,46,0.55) 0%, rgba(48,48,46,0.28) 42%, rgba(48,48,46,0.1) 72%, rgba(48,48,46,0.24) 100%);
}
.cta .hero-scrim { background: radial-gradient(75% 75% at 42% 42%, transparent 42%, rgba(18,6,11,0.4) 100%); }

.hero-inner { position: relative; z-index: 2; max-width: 920px; }
.hero-index { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.2rem; }
.hero-index-line { width: 2.4rem; height: 1px; background: var(--gold); flex: 0 0 auto; }
.hero-index .eyebrow { margin-bottom: 0; }
.hero h1 {
  font-size: clamp(2.9rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 2rem;
}
.hero h1 em { font-style: italic; color: var(--gold); font-weight: 700; }

.hero h1.reveal, .hero h1.reveal.in,
.cta h2.reveal, .cta h2.reveal.in { opacity: 1; transform: none; transition: none; }
.hero h1 .word, .cta h2 .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .word-inner, .cta h2 .word-inner {
  display: inline-block; transform: translateY(112%); opacity: 0;
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}
.hero h1.in .word-inner, .cta h2.in .word-inner { transform: translateY(0); opacity: 1; }
.hero-sub { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--ink-soft); max-width: 54ch; margin-bottom: 2.6rem; }
.hero-actions { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }
.hero-actions .text-link { color: var(--gold); }

.scroll-cue { position: absolute; left: var(--gutter); bottom: 2rem; z-index: 2; display: flex; align-items: center; gap: 0.9rem; }
.scroll-cue-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); }
.scroll-cue-line { position: relative; width: 40px; height: 1px; background: var(--hairline-strong); }
.scroll-cue-line span { position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); animation: scrollCueX 2.4s ease-in-out infinite; }
@keyframes scrollCueX { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (max-width: 620px) { .scroll-cue { display: none; } }

/* ==========================================================================
   ENFOQUE — cifra monumental + índice de la escalera
   10-sep-2026: a pedido de Valery, el contraste de "sola plataforma" viene
   del FONDO de toda la sección (verde de marca), no del color de la letra
   —la letra vuelve a su tratamiento normal (cobre/crema), igual que en
   Misión/CTA pero aplicado aquí.
   ========================================================================== */
#enfoque { background: var(--olive); }
#enfoque .eyebrow,
#enfoque .display-em,
#enfoque .stat-figure,
#enfoque .index-row:hover .index-row-num,
#enfoque .text-link { color: var(--gold-on-dark); }
#enfoque .stat-figure .stat-of,
#enfoque .source-note,
#enfoque .lead,
#enfoque .index-row-desc { color: rgba(245,237,223,0.75); }
#enfoque .stat-lead,
#enfoque .index-row-title { color: var(--paper); }
#enfoque .index-row-num { color: rgba(245,237,223,0.45); }
#enfoque .index-row-mark { background: var(--gold-on-dark); }
/* la tarjeta del calendario se queda con su propio fondo claro "de papel"
   a propósito (como una hoja sobre un escritorio verde) — su texto NO se
   toca, sigue calibrado para ese panel claro, no para el verde de la
   sección */
#enfoque .index-list,
#enfoque .index-row { border-color: var(--hairline-on-dark); }
#enfoque .index-row:hover { background: rgba(245,237,223,0.04); }

.stat-block {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 861px) {
  .stat-block { grid-template-columns: auto 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
}
.stat-figure {
  font-family: var(--font-display); font-weight: 700; color: var(--gold);
  font-size: clamp(7rem, 15vw, 12rem); line-height: 0.82; letter-spacing: -0.03em;
  margin: 0; white-space: nowrap;
}
.stat-figure .stat-of {
  font-size: 0.2em; font-family: var(--font-heading); font-weight: 600;
  color: var(--ink-soft); letter-spacing: 0; margin-left: 0.15em; vertical-align: 0.55em;
}
.stat-copy { max-width: 60ch; }
.stat-lead {
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.28; margin: 0 0 1rem;
}
.stat-copy .source-note { margin-top: 0; }

.enfoque-row { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 4rem); }
@media (min-width: 981px) {
  /* mismo criterio que .method-photos/.polaroid-wrap: stretch por
     defecto en la fila, y .focus-calendar (abajo) centra la tarjeta
     dentro de su celda en vez de estirarla o dejar un hueco suelto. Se
     abandonó la técnica de "pin" con min-height:150vh: en pantallas
     reales generaba una zona de scroll vacía enorme antes de llegar a
     la tarjeta — se veía bien en un test sintético pero mal en el
     navegador real de Valery. */
  .enfoque-row { grid-template-columns: 1fr 1fr; }
}
.enfoque-copy { display: flex; flex-direction: column; justify-content: center; }
.enfoque-copy .lead { max-width: 58ch; margin-bottom: 0; }

/* ---- calendario — único elemento con fondo "de papel" del sitio;
   funciona como diagrama de datos, no como tarjeta decorativa.
   13-sep-2026: se corrige el alineado (el grid lo estiraba a la altura
   completa de la columna de texto, dejando aire vacío debajo de la
   tarjeta). Se probó "pinear" la tarjeta con scroll (position:sticky +
   min-height:150vh en .enfoque-row) para animar el llenado día a día
   ligado al scroll, pero en pantalla real dejaba una zona vacía enorme
   antes de llegar a la tarjeta — se revirtió. Ahora la tarjeta fluye
   normal en el grid y se anima una sola vez al entrar en vista, igual
   en desktop y mobile (ver script.js, §1f). ---- */
.focus-calendar { display: flex; }
@media (min-width: 981px) {
  .focus-calendar { align-items: center; }
}
.cal-card {
  width: 100%; max-width: 380px;
  background: var(--bg-raised); border: 1px solid var(--hairline-on-raised);
  border-top: 2px solid var(--gold);
  border-radius: 0;
  padding: 2rem 1.8rem 1.6rem;
}
.cal-kicker {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-body); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 1.3rem;
}
.cal-kicker-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--emerald-soft);
  box-shadow: 0 0 0 0 rgba(63,92,42,0.55);
  animation: pulse 2s infinite;
}
.cal-head {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline-on-raised);
}
.cal-month { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink-on-raised); }
.cal-year { font-size: 0.78rem; color: var(--ink-faint); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 0.5rem; }
.cal-weekdays span { text-align: center; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-faint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day {
  position: relative; aspect-ratio: 1; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 500; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--hairline-on-raised);
  transform: scale(0.96); opacity: 0.55;
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out), background 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.cal-day.is-empty { visibility: hidden; }
.cal-day.is-booked {
  transform: scale(1); opacity: 1;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg); font-weight: 700;
}
.cal-legend { font-size: 0.68rem; line-height: 1.5; color: var(--ink-faint); margin: 0.9rem 0 0; }
.cal-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline-on-raised); }
.cal-total-label { font-size: 0.76rem; color: var(--ink-faint); }
.cal-total-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--gold-deep); transition: color 400ms var(--ease-out); }
.cal-total-num small { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-faint); margin-left: 0.25rem; }
.cal-total-num.is-complete { color: var(--emerald-soft); }

/* ==========================================================================
   ÍNDICE DE LÍNEAS FINAS (Hairline Index) — componente central del
   rediseño: reemplaza toda tarjeta con radius/shadow en Enfoque (escalera),
   Método (checklist), Servicios (tiers) y Normativa. Fila = número +
   título (Raleway) + descripción, separadas por hairline, con un pequeño
   desplazamiento y acento dorado al pasar el mouse — nada de elevación ni
   caja. ========================================================================== */
.index-list { border-top: 1px solid var(--hairline); margin-top: 2.4rem; }
.index-row {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: 0.4rem 1.6rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 350ms var(--ease-out), background 350ms var(--ease-out);
}
@media (min-width: 741px) {
  .index-row { grid-template-columns: auto minmax(0,1fr) minmax(0,1.4fr); align-items: baseline; }
}
@media (hover: hover) {
  .index-row:hover { padding-left: 0.9rem; background: rgba(48,48,46,0.035); }
  .index-row:hover .index-row-num { color: var(--gold); }
}
.index-row-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink-faint); transition: color 350ms var(--ease-out);
  white-space: nowrap; padding-right: 1rem;
}
/* en mobile, título+descripción viajan juntos en la 2da columna; en
   desktop el wrapper se "desarma" (display:contents) para que título y
   descripción caigan cada uno en su propia columna del grid de 3 */
.index-row-body { grid-column: 2; display: contents; }
@media (max-width: 740px) { .index-row-body { display: block; } }
.index-row-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: var(--ink); margin: 0; }
.index-row-desc { color: var(--ink-soft); font-size: 0.94rem; margin: 0.4rem 0 0; max-width: 56ch; }
@media (min-width: 741px) { .index-row-desc { margin-top: 0; } }
.index-row-mark { position: absolute; top: 1.6rem; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform 420ms var(--ease-spring); }
.index-row.in .index-row-mark { transform: scale(1); }

/* Método: foto asimétrica + copy con índice de líneas finas */
.method-row { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 4rem); }
@media (min-width: 861px) { .method-row { grid-template-columns: 0.95fr 1.05fr; } }
/* 13-sep-2026: el copy (con su lista de 4 puntos) suele quedar más alto
   que el bloque de fotos. Se probaron dos malas soluciones: estirar la
   columna de fotos (align-items:stretch por defecto, sin más) deformaba
   las fotos; "pinearlas" con scroll (position:sticky) se veía roto en
   pantalla real. La solución simple y sin JS: .method-row vuelve a su
   comportamiento por defecto (stretch), así que la CELDA de la columna
   de fotos sí iguala la altura del copy, pero .method-photos centra su
   contenido dentro de esa celda (abajo) en vez de estirar las fotos —el
   aire sobrante queda repartido arriba y abajo, no como un hueco suelto
   al final. */
.method-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-content: center; }
.method-photo { position: relative; overflow: hidden; background: var(--bg-alt); aspect-ratio: 1 / 1; border-radius: 0; }
.method-photo-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.method-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.04); }
.method-copy { display: flex; flex-direction: column; justify-content: center; }
.method-copy .lead { max-width: 58ch; }
.method-copy .lead strong { color: var(--ink); font-weight: 600; }
.method-list { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.method-list li { display: flex; align-items: baseline; gap: 0.8rem; font-size: 0.94rem; color: var(--ink); }
.method-list .plus { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--gold); flex: 0 0 auto; }

/* ==========================================================================
   SERVICIOS — mismo fondo burgundy que el CTA final (la última sección de
   la página), para dar contraste entre secciones consecutivas. Misma
   técnica: fondo sólido + overrides de texto claro sobre los mismos
   componentes (nada de paleta nueva).
   ========================================================================== */
#servicios { background: var(--wine); }
#servicios h1, #servicios h2, #servicios h3, #servicios h4 { color: var(--paper); }
#servicios .eyebrow,
#servicios .display-em,
#servicios .text-link,
#servicios .tier-row-tag,
#servicios .alt-row-tag,
#servicios .tier-row-scope li::before,
#servicios .tier-row-toggle-icon::before,
#servicios .tier-row-toggle-icon::after { color: var(--gold-on-dark); }
#servicios .tier-row-tag { border-color: rgba(214,160,99,0.4); }
#servicios .tier-row-toggle-icon::before,
#servicios .tier-row-toggle-icon::after { background: var(--gold-on-dark); }
#servicios .tier-row.is-featured .tier-row-num,
#servicios .tier-row:hover .tier-row-num { color: var(--gold-on-dark); }
#servicios .lead,
#servicios .tier-row-desc,
#servicios .alt-row-desc,
#servicios .tier-row-scope li { color: rgba(245,237,223,0.75); }
#servicios .tier-row-desc strong,
#servicios .alt-row-desc strong,
#servicios .alt-row-title { color: var(--paper); }
#servicios .tier-note { color: rgba(245,237,223,0.55); }
#servicios .tier-row-num { color: rgba(245,237,223,0.45); }
#servicios .tier-row-toggle { color: rgba(245,237,223,0.55); }
#servicios .tier-row-toggle:hover,
#servicios .tier-row.is-open .tier-row-toggle { color: var(--paper); }
#servicios .tier-rows,
#servicios .tier-row,
#servicios .alt-rows,
#servicios .alt-row,
#servicios .tier-row-scope { border-color: var(--hairline-on-dark); }
@media (hover: hover) and (min-width: 861px) {
  #servicios .tier-row:hover { background: rgba(245,237,223,0.04); }
}
/* el tag "Tier 2" es burgundy sólido; sobre un fondo de sección que ahora
   también es burgundy quedaría invisible, así que aquí se invierte a
   crema con texto burgundy para que el badge siga destacando */
#servicios .tier-row.is-featured .tier-row-tag { background: var(--paper); color: var(--wine); border-color: var(--paper); }

/* 13-sep-2026: a pedido de Valery, la home ya no muestra Tier 1/Tier 2
   (ese detalle vive en tarifas.html, que sigue usando .tier-row arriba
   sin cambios) — en su lugar, un único panel invita a pedir una
   propuesta a la medida. */
.proposal-panel {
  margin-top: 2.2rem;
  border: 1px solid var(--hairline);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 641px) {
  .proposal-panel { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.4rem; }
}
.proposal-panel-body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 0.55rem; }
.proposal-panel-body p { font-size: 0.96rem; margin: 0; max-width: 46ch; }
/* nowrap solo en fila (>=641px): en columna (mobile) el botón se estira
   al ancho del panel, y forzar una sola línea ahí lo hacía desbordar el
   viewport en vez de partirse en dos líneas */
.proposal-panel .btn { flex: 0 0 auto; justify-content: center; }
@media (min-width: 641px) { .proposal-panel .btn { white-space: nowrap; } }
#servicios .proposal-panel { border-color: var(--hairline-on-dark); }
#servicios .proposal-panel-body p { color: rgba(245,237,223,0.75); }

/* Servicios: filas de tier + índice secundario para Curso/Auditoría */
.tier-rows { border-top: 1px solid var(--hairline); margin-top: 2.4rem; }
.tier-row {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  padding: 2.2rem 0; border-bottom: 1px solid var(--hairline);
  transition: padding-left 350ms var(--ease-out), background 350ms var(--ease-out);
  cursor: pointer;
}
@media (min-width: 861px) { .tier-row { grid-template-columns: 3.6rem 1fr auto; align-items: start; gap: 2rem; } }
@media (hover: hover) and (min-width: 861px) {
  .tier-row:hover { padding-left: 0.9rem; background: rgba(48,48,46,0.035); }
  .tier-row:hover .tier-row-num { color: var(--gold); }
}
.tier-row-num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-faint); transition: color 350ms var(--ease-out); }
.tier-row.is-featured .tier-row-num { color: var(--gold); }
.tier-row-body h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.6rem; }
.tier-row-tag {
  display: inline-block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-dim); padding: 0.3em 0.75em; margin-bottom: 0.9rem;
}
.tier-row.is-featured .tier-row-tag { color: var(--paper); background: var(--wine); border-color: var(--wine); }
.tier-row-desc { color: var(--ink-soft); font-size: 0.96rem; max-width: 58ch; margin: 0; }
.tier-row-desc strong { color: var(--ink); font-weight: 600; }

/* activador del acordeón — discreto, entre corchetes, sin caja ni sombra */
.tier-row-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-faint); padding: 0.3rem 0; justify-self: start; text-align: left;
  transition: color 250ms var(--ease-out);
}
@media (min-width: 861px) { .tier-row-toggle { justify-self: end; text-align: right; } }
.tier-row-toggle:hover, .tier-row.is-open .tier-row-toggle { color: var(--ink); }
.tier-row-toggle-icon { position: relative; flex: 0 0 auto; width: 11px; height: 11px; }
.tier-row-toggle-icon::before, .tier-row-toggle-icon::after { content: ""; position: absolute; background: var(--gold); transition: transform 380ms var(--ease-spring); }
.tier-row-toggle-icon::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.tier-row-toggle-icon::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.tier-row.is-open .tier-row-toggle-icon::after { transform: translateX(-50%) scaleY(0); }

/* panel del acordeón — misma técnica grid-template-rows 0fr→1fr que el FAQ */
.tier-row-panel {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
  cursor: auto;
}
.tier-row.is-open .tier-row-panel { grid-template-rows: 1fr; }
.tier-row-panel > div { overflow: hidden; }
.tier-row-scope { margin: 0.6rem 0 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 0.6rem; }
.tier-row-scope li { position: relative; padding-left: 1.1rem; color: var(--ink-soft); font-size: 0.9rem; }
.tier-row-scope li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--gold); font-family: var(--font-display); font-weight: 700; }

.alt-head { max-width: 52ch; margin: 3.4rem 0 0; }
.alt-head h3 { font-family: var(--font-heading); font-size: 1.2rem; }
.alt-rows { border-top: 1px solid var(--hairline); margin-top: 1.6rem; }
.alt-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem; padding: 1.8rem 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 741px) { .alt-row { grid-template-columns: 8rem 1fr auto; align-items: baseline; gap: 1.6rem; } }
.alt-row-tag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.alt-row-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.alt-row-desc { color: var(--ink-soft); font-size: 0.9rem; margin: 0.35rem 0 0; max-width: 56ch; }
.alt-row-link { justify-self: start; }
@media (min-width: 741px) { .alt-row-link { justify-self: end; } }
.tier-note { margin-top: 1.8rem; font-size: 0.88rem; color: var(--ink-faint); max-width: 60ch; }

/* ==========================================================================
   COBERTURA — foto de archivo + índice de ciudades (sin overlay-card)
   ========================================================================== */
.cobertura-row { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 4rem); }
@media (min-width: 861px) { .cobertura-row { grid-template-columns: 0.9fr 1.1fr; } }
.cobertura-copy { display: flex; flex-direction: column; justify-content: center; }

/* mismo criterio que .method-photos: .cobertura-row vuelve a stretch por
   defecto (la celda del polaroid iguala la altura del índice de
   ciudades, más largo), y .polaroid-wrap centra su contenido dentro de
   esa celda en vez de estirar el polaroid o dejar un hueco suelto abajo. */
.polaroid-wrap { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.polaroid { margin: 0; background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: 0; }
.polaroid-photo {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0;
  background: var(--bg-alt);
  display: flex; align-items: flex-end; padding: 1rem;
}
.polaroid-photo img { display: none; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: grayscale(0.1) contrast(1.03); }
.polaroid-photo-label {
  position: relative; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-faint);
  border: 1px solid var(--hairline-strong); padding: 0.4em 0.8em;
}
.polaroid-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--hairline); }
.polaroid-signature { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.polaroid-mark { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); flex: 0 0 auto; }

.polaroid-controls { display: flex; gap: 0; border: 1px solid var(--hairline-strong); width: fit-content; }
.polaroid-arrow {
  width: 42px; height: 38px; border-radius: 0;
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}
.polaroid-arrow:first-child { border-right: 1px solid var(--hairline-strong); }
.polaroid-arrow:hover { background: var(--gold); color: var(--bg); }

.city-index { border-top: 1px solid var(--hairline); margin: 2.6rem 0 0; }
.city-row {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  padding: 1.8rem 0; border-bottom: 1px solid var(--hairline);
}
@media (min-width: 741px) { .city-row { grid-template-columns: 9rem 1fr 2fr; align-items: start; gap: 1.8rem; } }
.city-row-photo { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.city-row-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.03); transition: filter 400ms var(--ease-out); }
@media (hover: hover) { .city-row:hover .city-row-photo img { filter: grayscale(0) contrast(1.05); } }
.city-row-head { display: flex; flex-direction: column; }
.city-row-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; }
.city-row.is-anchor .city-row-name { color: var(--gold); }
.city-row-tag { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.5rem; }
.city-row-desc { color: var(--ink-soft); font-size: 0.94rem; margin: 0; max-width: 58ch; }

/* ==========================================================================
   SPREADS OSCUROS — Misión (verde), CTA (burgundy), Footer + video (charcoal).
   Sobre el lienzo claro, estas 3 secciones son bloques de color enteros con
   texto claro, como las páginas oscuras de una revista.
   ========================================================================== */
.mission { background: var(--olive); }
.cta { background: var(--wine); }
.footer, .brand-video { background: var(--char); }

.mission, .cta { color: var(--paper); }
.mission h1, .mission h2, .mission h3, .mission h4,
.cta h1, .cta h2, .cta h3, .cta h4 { color: var(--paper); }
.mission .eyebrow, .cta .eyebrow, .cta .eyebrow-dark,
.mission em, .cta em, .mission .display-em, .cta .display-em,
.mission-statement em, .cta h2 em,
.mission .text-link, .cta .text-link { color: var(--gold-on-dark); }
.mission .lead, .mission-lead { color: rgba(245,237,223,0.82); }
.mission .text-link, .cta .text-link { border-color: var(--hairline-on-dark); }
.cta-scarcity { color: var(--gold-on-dark); border-color: var(--hairline-on-dark); }
.cta .btn-outline { color: var(--paper); border-color: var(--hairline-on-dark); }
.cta .btn-outline:hover { border-color: var(--paper); background: rgba(245,237,223,0.06); }

/* ==========================================================================
   MISIÓN — declaración editorial de página completa, sin caja
   ========================================================================== */
.mission {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  --glow-base: var(--olive);
}
.mission .hero-glow {
  background:
    radial-gradient(55% 60% at 20% 12%, rgba(214,160,99,0.1), transparent 60%),
    var(--olive);
}
.mission .hero-celosia { opacity: 0.06; }
.mission-inner { position: relative; z-index: 2; max-width: 920px; }
.mission-mark { display: block; height: 32px; width: auto; opacity: 0.75; margin-bottom: 2rem; }
.mission-statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1;
  margin-bottom: 1.6rem; max-width: 22ch;
}
.mission-lead { font-size: 1.05rem; max-width: 56ch; margin: 0; }

/* ==========================================================================
   NORMATIVA — reusa .index-list; nota legal como línea, no caja
   ========================================================================== */
.law-note { border-left: 2px solid var(--gold); padding-left: 1.4rem; margin: 2.2rem 0 0; }
.law-note .lead { max-width: none; }

/* ==========================================================================
   FAQ — acordeón de hairlines (ya sin card, solo re-paletizado)
   ========================================================================== */
/* 13-sep-2026: eran 2 columnas (2 preguntas arriba, 1 abajo) — con solo 3
   preguntas en la home eso deja la columna corta con un vacío feo antes
   del enlace a las 20 preguntas. Una sola columna evita el problema para
   cualquier número de preguntas que haya aquí. */
.faq-grid { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: var(--ink); transition: color 250ms; }
.faq-q:hover { color: var(--gold); }
.faq-plus { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--gold); transition: transform 380ms var(--ease-spring); }
.faq-plus::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-plus::after { top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item.open .faq-plus::after { transform: translateX(-50%) scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: 0.92rem; max-width: 52ch; }

/* ==========================================================================
   CTA — cierre editorial, mismo lienzo oscuro, sin caja de "tarjeta"
   ========================================================================== */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0; text-align: left; border: none;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: flex-start;
}
.cta .hero-glow, .cta .hero-scrim { position: absolute; }
.cta .hero-glow { background: radial-gradient(60% 60% at 15% 12%, rgba(214,160,99,0.12), transparent 60%), var(--wine); }
.cta-inner { position: relative; z-index: 2; max-width: 760px; }
.cta h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.1; margin-bottom: 1.4rem; }
.cta h2 em { font-style: italic; }
.cta-sub { font-size: 1.02rem; max-width: 52ch; margin: 0 0 1.8rem; color: var(--ink-soft); }
.cta .cta-sub { color: rgba(245,237,223,0.82); }
/* .cta-scarcity/.cta-dot también los usa tarifas.html sobre la crema (fuera
   de .cta) — por defecto van en cobre oscuro; solo dentro de .cta (spread
   vino) pasan al cobre claro */
.cta-scarcity { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.78rem; letter-spacing: 0.04em; padding: 0.55em 1.1em; color: var(--gold); border: 1px solid var(--hairline-strong); margin-bottom: 2.2rem; }
.cta .cta-scarcity { color: var(--gold-on-dark); border-color: var(--hairline-on-dark); }
.cta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(137,85,30,0.6); animation: pulse 2s infinite; }
.cta .cta-dot { background: var(--gold-on-dark); box-shadow: 0 0 0 0 rgba(214,160,99,0.6); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(137,85,30,0); } 100% { box-shadow: 0 0 0 0 rgba(137,85,30,0); } }
.cta-actions { display: flex; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 3; }

/* hero-glow/hero-celosia reusados en subpáginas (glosario, faq, tarifas) —
   se mantienen sutiles sobre el lienzo oscuro único */
#glosario, #faq, #tarifas { overflow: hidden; position: relative; }
#glosario .hero-glow, #glosario .hero-celosia,
#faq .hero-glow, #faq .hero-celosia,
#tarifas .hero-glow, #tarifas .hero-celosia { position: absolute; }
#glosario .hero-celosia, #faq .hero-celosia, #tarifas .hero-celosia { opacity: 0.05; }
#glosario > .container, #faq > .container, #tarifas > .container { position: relative; z-index: 2; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding: 4rem 0 2.2rem; color: var(--paper); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--hairline-on-dark); }
.footer-logo-lockup { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer-logo-mark { display: block; height: 24px; width: auto; opacity: 0.9; }
.footer-logo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--paper); }
.footer-brand p { margin-top: 0.8rem; color: rgba(245,237,223,0.68); font-size: 0.88rem; max-width: 30ch; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: 1rem; }
.footer-col a, .footer-col span { display: block; font-size: 0.9rem; color: rgba(245,237,223,0.68); margin-bottom: 0.6rem; }
.footer-col a { transition: color 200ms; }
.footer-col a:hover { color: var(--paper); }
.footer-bottom { padding-top: 1.5rem; font-size: 0.76rem; color: rgba(245,237,223,0.5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

/* ==========================================================================
   GRILLA DE OCUPACIÓN — canvas ambiental (opcional, hoy sin uso en el
   HTML pero se conserva por si vuelve a activarse desde script.js)
   ========================================================================== */
.occ-grid { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0.5; mix-blend-mode: screen; will-change: transform; }

/* ==========================================================================
   MARCA — video enmascarado por el texto "Habiance"
   ========================================================================== */
/* 13-sep-2026: la máscara de SVG solo se ve bien si el navegador ya
   terminó de cargar "quiche-sans" (el kit de Adobe Fonts) en el momento
   exacto en que pinta el mask; si no, algunos navegadores la dejan
   pegada con la tipografía de sistema para siempre, aunque la fuente
   cargue después. Para no arriesgarnos a mostrar "Habiance" en una
   fuente que no es la nuestra, el texto plano (.brand-video-fallback,
   que SÍ hereda la tipografía con normalidad, sin el bug del mask) sale
   visible desde el primer momento, y el efecto de video solo aparece
   -con crossfade- una vez que script.js confirma que la fuente cargó y
   repintó el mask correctamente. Si algo falla (fuente bloqueada, sin
   internet), el texto plano se queda así para siempre: se ve bien
   igual, solo sin el efecto de agua. */
.brand-video { position: relative; width: 100%; aspect-ratio: 21 / 6; overflow: hidden; }
.brand-video-mask {
  position: absolute; inset: 0;
  -webkit-mask-image: url(#brandTextMask); mask-image: url(#brandTextMask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0; transition: opacity 700ms var(--ease-out);
}
.brand-video-mask.is-ready { opacity: 1; }
.brand-video-mask video { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-video-fallback {
  display: flex; position: absolute; inset: 0; margin: 0;
  align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 14vw, 9rem); color: var(--paper);
  opacity: 1; transition: opacity 700ms var(--ease-out);
}
.brand-video-fallback.is-hidden { opacity: 0; }
@supports not ((-webkit-mask-image: url(#x)) or (mask-image: url(#x))) {
  .brand-video-mask { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-video-mask { display: none !important; }
  .brand-video-fallback { opacity: 1 !important; }
}

/* ==========================================================================
   REVEALS (IntersectionObserver → .in) — discretos, sin escala exagerada
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 80ms; }
.reveal.d2 { transition-delay: 160ms; }
.reveal.d3 { transition-delay: 240ms; }
.reveal.d4 { transition-delay: 320ms; }
.reveal.d5 { transition-delay: 400ms; }
.reveal-pop { transform: translateY(10px); }
.reveal-pop.in { transform: none; }
.reveal-card { transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-card.in { transform: none; }

/* ==========================================================================
   COMPONENTES HEREDADOS — usados hoy solo por tarifas.html / glosario.html /
   preguntas-frecuentes.html (no se reescribió su HTML en este rediseño,
   pero comparten esta hoja: se re-paletizan y se les quita radius/shadow
   para no reintroducir el anti-patrón de "tarjeta flotante" en esas
   páginas, aunque su estructura siga siendo de grilla por ahora).
   ========================================================================== */
.head { max-width: 42ch; margin-bottom: 3rem; }
.head-right { margin-left: auto; text-align: right; }
@media (max-width: 768px) { .head-right { margin-left: 0; text-align: left; } }
.head-offset-1 { margin-left: clamp(0rem, 16%, 8rem); }
.head-offset-2 { margin-left: clamp(0rem, 27%, 14rem); }
@media (max-width: 768px) { .head-offset-1, .head-offset-2 { margin-left: 0; } }
.head h1, .head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; }
.head p { margin-top: 0.9rem; }

.head-accent { font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: 0; color: var(--gold); }
.head-accent .kw { display: inline-block; }
.accent-metodo { font-size: clamp(1.3rem, 2.8vw, 1.85rem); margin-left: 0.4rem; }
.accent-metodo .kw:nth-child(1) { transform: translateY(-0.15em); }
.accent-metodo .kw:nth-child(2) { transform: translateY(0.3em); font-size: 0.7em; }
.accent-metodo .kw:nth-child(3) { transform: translateY(-0.05em); }
.accent-servicios { display: block; font-size: clamp(1.1rem, 2.2vw, 1.5rem); margin-bottom: 0.4rem; }
.accent-servicios .kw:nth-child(2) { transform: translateY(0.2em); margin-left: 0.3em; }
.accent-cobertura { font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin-left: 0.4rem; }
.accent-cobertura .kw:nth-child(1) { transform: translateY(0.1em); }
.accent-cobertura .kw:nth-child(2) { font-size: 1.3em; transform: translateY(-0.08em); margin: 0 0.15em; }
.accent-cobertura .kw:nth-child(3) { transform: translateY(0.15em); font-size: 0.8em; }
.accent-normativa { font-size: clamp(0.8rem, 1.5vw, 0.95rem); text-transform: uppercase; letter-spacing: 0.24em; margin-left: 0.6rem; vertical-align: 0.35em; }
.accent-glosario { margin-left: 0.4rem; }
.accent-glosario .kw:nth-child(1) { font-size: clamp(1.4rem, 3vw, 2rem); }
.accent-glosario .kw:nth-child(2) { font-size: clamp(0.85rem, 1.6vw, 1.05rem); transform: translateY(0.35em); margin-left: 0.3em; }
.accent-entregable { display: inline-flex; flex-direction: column; align-items: flex-start; font-size: clamp(0.95rem, 1.9vw, 1.25rem); line-height: 1.18; margin-left: 0.5rem; vertical-align: -0.15em; }
.accent-faq { font-size: clamp(1.2rem, 2.6vw, 1.7rem); margin-left: 0.4rem; }
.accent-faq .kw:nth-child(1) { transform: translateY(0.05em); }
.accent-faq .kw:nth-child(2) { font-size: 0.55em; transform: translateY(0.35em); margin-left: 0.2em; }
.accent-tarifas { margin-left: 0.4rem; }
.accent-tarifas .kw:nth-child(1) { font-size: clamp(1.4rem, 3vw, 2rem); }
.accent-tarifas .kw:nth-child(2) { font-size: clamp(0.85rem, 1.6vw, 1.05rem); transform: translateY(0.35em); margin-left: 0.3em; }

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.tier { position: relative; overflow: hidden; background: var(--bg); border-radius: 0; padding: 2.4rem 2rem; }
.tier::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-130%); transition: transform 900ms var(--ease-out); }
@media (hover: hover) { .tier:hover::after { transform: translateX(130%); } }
.tier-featured { border: 1px solid var(--gold-dim); }
@keyframes tierGlow { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(137,85,30,0); } 50% { box-shadow: inset 0 0 24px 0 rgba(137,85,30,0.12); } }
.tier-featured.in { animation: tierGlow 4.2s ease-in-out infinite; }
.tier-tag { display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); border-radius: 0; padding: 0.32em 0.85em; margin-bottom: 1.1rem; }
.tier-featured .tier-tag { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.tier h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.6rem; }
.tier-desc { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 1.4rem; }
.tier-list li { position: relative; padding-left: 1.3rem; font-size: 0.92rem; margin-bottom: 0.6rem; color: var(--ink); }
.tier-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--gold); }
@media (hover: hover) { .tier:hover, .tier.reveal-card:hover { transform: translateY(-2px); } }
.alt-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); }
.alt-tiers .tier { border: none; border-top: 1px solid var(--hairline); }
.alt-tiers .tier-list + .tier-tag { margin-top: 1.2rem; }
.alt-tiers a.text-link { display: inline-block; margin-top: 0.4rem; }

.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); margin: 2rem 0; }
.city-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; min-height: 320px; display: flex; align-items: flex-end; background: var(--bg); }
.city-card-photo { position: absolute; inset: 0; z-index: 0; }
.city-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(48,48,46,0.92) 0%, rgba(48,48,46,0.35) 55%, rgba(48,48,46,0.05) 100%); }
.city-card-body { position: relative; z-index: 2; padding: 1.7rem 1.5rem; }
.city-card-body h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--ink); }
.city-card-body p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; }
.city-card-featured { border: 1px solid var(--gold-dim); }

.law-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin: 2rem 0 2.2rem; }
.step { background: var(--bg); padding: 0 1.6rem 1.6rem; }
.law-list .step { padding-top: 1.2rem; }
.step-num { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.step h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.glossary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.6rem; border-top: 1px solid var(--hairline); }
.glossary-item { padding-top: 1.2rem; border-top: 1px solid var(--hairline); margin-top: -1px; }
.glossary-item h3 { font-family: var(--font-display); font-size: 1rem; color: var(--gold); margin-bottom: 0.5rem; }
.glossary-item p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .city-grid { grid-template-columns: 1fr; }
  .city-card { min-height: 260px; }
  .glossary-grid { grid-template-columns: 1fr 1fr; }
  .law-list { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .alt-tiers { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .nav-burger-text { display: none; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cta-dot { animation: none; }
  .occ-grid { display: none; }
  .scroll-cue-line span { animation: none; opacity: 0; }
  .scroll-progress { display: none; }
  .tier-featured.in { animation: none; }
  .menu-biglink, .menu-eyebrow, .menu-group-label, .menu-grouplink, .menu-tagline { transition: none !important; }
  .menu.open .menu-biglink, .menu.open .menu-eyebrow, .menu.open .menu-group-label,
  .menu.open .menu-grouplink, .menu.open .menu-tagline { opacity: 1; transform: none; }
  .cal-day { transition: none !important; }
  .cal-kicker-dot { animation: none; }
  .index-row { transition: none !important; }
}