/* ============================================================
   HOSTERA · site.css · v3.1 "Editorial azul"
   ------------------------------------------------------------
   Azul profundo del Golfo, acento azul brillante (el mismo de
   la palomita del logo), condensada en caja alta solo en H1/H2.
   La agresividad vive en el copy, no en el diseño.
   Sin build, sin framework. Escala tipográfica y de espaciado
   tomadas de Tailwind (ver .claude/skills/landing-page-design).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Superficies */
  --ink:#071A2F;        /* fondo base, azul profundo */
  --ink-2:#0C2440;      /* superficie elevada */
  --ink-3:#143355;      /* superficie 2 / marco de foto */
  --navy:#0B2545;       /* azul Hostera, el del logo */
  --paper:#F4F6F9;      /* secciones claras */
  --paper-2:#E6ECF3;

  /* Tinta */
  --bone:#EEF3F9;       /* texto sobre oscuro */
  --bone-2:#9CB0C6;     /* texto secundario sobre oscuro */
  --ink-text:#0B2545;   /* texto sobre claro */
  --ink-text-2:#54677E; /* secundario sobre claro */

  /* Acento: azul hotelero */
  --accent:#2E9BFF;         /* marcas y texto de acento sobre oscuro */
  --accent-2:#5AB4FF;       /* hover sobre oscuro; es el azul de la palomita */
  --accent-ink:#1A54AE;     /* acento sobre superficies claras */
  --accent-solid:#1F5FBF;   /* relleno de botón, blanco encima */
  --accent-solid-2:#174A99; /* hover del relleno */
  --accent-mid:#123A78;     /* paso intermedio del degradado del CTA final */
  --accent-soft:rgba(46,155,255,.12);   /* fondo de píldora e icono */
  --accent-line:rgba(46,155,255,.32);   /* borde de píldora */
  --accent-soft-ink:rgba(31,95,191,.1); /* icono sobre superficie clara */
  --accent-glow:rgba(31,95,191,.34);    /* halo del botón */
  --accent-glow-2:rgba(31,95,191,.44);

  /* Semáforo del Nivel */
  --critica:#F2555A;
  --atender:#FF9F1C;
  --optimizable:#FFD23F;
  --lista:#3ED08A;
  --estandar:#00C2A8;

  /* Líneas */
  --hair:rgba(238,243,249,.13);
  --hair-strong:rgba(238,243,249,.28);
  --hair-ink:rgba(11,37,69,.13);

  /* Sombras suaves. Nada de sombras sólidas desplazadas. */
  --sh-sm:0 1px 2px rgba(3,12,24,.28);
  --sh-md:0 8px 28px rgba(3,12,24,.34);
  --sh-lg:0 28px 64px rgba(3,12,24,.5);

  /* Tipografía */
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-xs:.75rem;    --lh-xs:1rem;
  --fs-sm:.875rem;   --lh-sm:1.25rem;
  --fs-base:1rem;    --lh-base:1.5rem;
  --fs-lg:1.125rem;  --lh-lg:1.75rem;
  --fs-xl:1.25rem;   --lh-xl:1.75rem;
  --fs-2xl:1.5rem;   --lh-2xl:2rem;
  --fs-3xl:1.875rem; --lh-3xl:2.25rem;
  --fs-4xl:2.25rem;  --lh-4xl:2.5rem;
  --fs-5xl:3rem;     --lh-5xl:1;
  --fs-6xl:3.75rem;  --lh-6xl:1;

  /* Espaciado */
  --s-0:0;      --s-25:2px;   --s-50:4px;   --s-75:8px;
  --s-100:12px; --s-200:16px; --s-300:24px; --s-400:32px;
  --s-500:40px; --s-600:48px; --s-700:64px; --s-800:80px; --s-900:96px;

  /* Radios generosos: hotelería, no brutalismo. */
  --r-sm:4px; --r-md:8px; --r-lg:10px; --r-xl:14px;
  --r-2xl:18px; --r-3xl:24px; --r-full:9999px;

  --ease:cubic-bezier(0.32,0.72,0,1);
  --wrap:1200px;
  --measure:680px;
}

/* ---------- 1b. Acento por zona ----------
   Veracruz usa el aqua del Golfo para que el portal se lea como suyo.
   Es lo único que cambia entre zonas: el logo, la retícula y la
   tipografía son idénticos. CDMX se queda con el azul hotelero base. */
body[data-city="veracruz"],
.acc-veracruz{
  --accent:#17C1DB;
  --accent-2:#48D6ED;
  --accent-ink:#0A6E80;
  --accent-solid:#0B7C90;
  --accent-solid-2:#0A6273;
  --accent-mid:#0A5A72;
  --accent-soft:rgba(23,193,219,.12);
  --accent-line:rgba(23,193,219,.34);
  --accent-soft-ink:rgba(11,124,144,.1);
  --accent-glow:rgba(11,124,144,.36);
  --accent-glow-2:rgba(11,124,144,.46);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  font-family:var(--font);
  font-size:var(--fs-base);line-height:var(--lh-base);
  color:var(--bone);background:var(--ink);
  font-weight:400;
  text-wrap:pretty;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent-2);text-decoration-thickness:1px;text-underline-offset:3px}
p,li{text-wrap:pretty}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent-solid);color:#fff}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:var(--r-sm)}

/* H1 y H2: condensada en caja alta. Es el único gesto de prensa que queda. */
h1,h2{
  font-family:var(--display);
  font-stretch:80%;font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:.94;
  text-wrap:balance;
  color:var(--bone);
}
h1{font-size:clamp(2.5rem,6.6vw,5.25rem);letter-spacing:-.025em;line-height:.9}
h2{font-size:clamp(1.875rem,5.4vw,3.75rem)}

/* H3 y H4: caja normal, ancho casi normal. Informan, no gritan. */
h3,h4{
  font-family:var(--display);
  font-stretch:94%;font-weight:700;
  letter-spacing:-.01em;
  line-height:1.18;
  text-wrap:balance;
  color:var(--bone);
}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-base)}

/* ---------- 3. Utilidades ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-300)}
.wrap-wide{max-width:1440px}
.measure{max-width:var(--measure)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.t-xs{font-size:var(--fs-xs);line-height:var(--lh-xs)}
.t-sm{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.t-lg{font-size:var(--fs-lg);line-height:var(--lh-lg)}
.t-xl{font-size:var(--fs-xl);line-height:var(--lh-xl)}
.muted{color:var(--bone-2)}
.center{text-align:center;margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rule{height:1px;background:var(--hair);border:0;margin-block:var(--s-500)}

.skip{
  position:absolute;left:var(--s-200);top:-96px;z-index:100;
  background:var(--accent-solid);color:#fff;
  padding:var(--s-100) var(--s-300);border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:700;text-decoration:none;
  transition:top .35s var(--ease);
}
.skip:focus{top:var(--s-200)}

section{padding-block:var(--s-700)}
@media (min-width:768px){section{padding-block:var(--s-900)}}

.surface-paper{background:var(--paper);color:var(--ink-text)}
.surface-paper h2,.surface-paper h3,.surface-paper h4{color:var(--ink-text)}
.surface-paper .lead,.surface-paper .muted{color:var(--ink-text-2)}
.surface-paper a{color:var(--accent-ink)}
.surface-navy{background:var(--navy)}
.surface-2{background:var(--ink-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-75);
  font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-xs);
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--accent);margin-bottom:var(--s-200);
}
.surface-paper .eyebrow{color:var(--accent-ink)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;flex:none}

.lead{font-size:var(--fs-lg);line-height:var(--lh-lg);color:var(--bone-2);max-width:62ch}
@media (min-width:768px){.lead{font-size:var(--fs-xl);line-height:1.6}}
.section-head{max-width:820px;margin-bottom:var(--s-600)}
.section-head p.lead{margin-top:var(--s-300)}

/* Pie de imprenta de cada sección */
.kicker{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-2);
  display:flex;align-items:center;gap:var(--s-200);
  padding-bottom:var(--s-200);margin-bottom:var(--s-500);
  border-bottom:1px solid var(--hair);
}
.surface-paper .kicker{color:var(--ink-text-2);border-color:var(--hair-ink)}
.kicker b{color:var(--accent);font-weight:500}
.surface-paper .kicker b{color:var(--accent-ink)}
.kicker span:last-child{margin-left:auto;text-align:right}

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-75);
  padding:var(--s-200) var(--s-400);
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-family:var(--display);font-stretch:96%;font-weight:700;
  font-size:var(--fs-base);line-height:1.25;
  letter-spacing:-.005em;
  text-decoration:none;text-align:center;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .25s var(--ease),box-shadow .4s var(--ease);
}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;transform:none}
.btn-primary{background:var(--accent-solid);color:#fff;box-shadow:0 var(--s-75) 24px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-solid-2);box-shadow:0 var(--s-100) 30px var(--accent-glow-2)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--hair-strong)}
.btn-ghost:hover{border-color:var(--bone);background:rgba(238,243,249,.06)}
.surface-paper .btn-ghost{color:var(--ink-text);border-color:var(--hair-ink)}
.surface-paper .btn-ghost:hover{border-color:var(--ink-text);background:rgba(11,37,69,.05)}
.btn-quiet{
  background:none;padding:0;border-radius:0;color:var(--bone);
  border-bottom:2px solid var(--accent);
  font-family:var(--font);font-stretch:100%;font-weight:600;
}
.btn-quiet:hover{color:var(--accent-2);transform:none}
.surface-paper .btn-quiet{color:var(--ink-text)}
.btn-sm{padding:var(--s-75) var(--s-200);font-size:var(--fs-sm);box-shadow:0 var(--s-50) 14px var(--accent-glow)}
.btn-sm:hover{box-shadow:0 var(--s-75) 18px var(--accent-glow-2)}
.btn-sm svg{width:16px;height:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-200);align-items:center}

/* ---------- 5. Nav ---------- */
.nav-wrap{
  position:sticky;top:0;z-index:60;
  background:rgba(7,26,47,.86);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--hair);
}
.nav{
  max-width:1440px;margin-inline:auto;
  display:flex;align-items:center;gap:var(--s-300);
  padding:var(--s-100) var(--s-300);
}
.brand{
  display:inline-flex;align-items:center;gap:var(--s-75);
  text-decoration:none;color:var(--bone);flex:none;
}
.brand svg{width:28px;height:28px}
.brand span{
  font-family:var(--display);font-stretch:88%;font-weight:800;
  font-size:var(--fs-lg);letter-spacing:.05em;text-transform:uppercase;line-height:1;
}
.nav-city{
  display:none;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-2);
  padding-left:var(--s-300);border-left:1px solid var(--hair);
  white-space:nowrap;
}
@media (min-width:640px){.nav-city{display:block}}
.nav-links{display:none;gap:var(--s-300)}
.nav-links a{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);text-decoration:none;
  padding-block:var(--s-75);border-bottom:2px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--bone);border-color:var(--accent)}
.nav > .btn{margin-left:auto}
.burger{
  margin-left:var(--s-100);width:40px;height:40px;flex:none;
  display:grid;place-content:center;gap:5px;
  border:1px solid var(--hair);border-radius:var(--r-md);
}
.burger span{display:block;width:18px;height:2px;background:var(--bone);transition:transform .35s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1080px){
  .nav-links{display:flex;margin-left:auto}
  .nav > .btn{margin-left:var(--s-300)}
  .burger{display:none}
}

.menu{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  padding:96px var(--s-300) var(--s-500);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-500);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s;
  overflow-y:auto;
}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu ul{display:flex;flex-direction:column;gap:var(--s-50)}
.menu ul a{
  display:block;padding-block:var(--s-200);text-decoration:none;color:var(--bone);
  font-family:var(--display);font-stretch:94%;font-weight:700;
  font-size:var(--fs-xl);line-height:1.2;
  border-bottom:1px solid var(--hair);
}
.menu ul a:hover{color:var(--accent-2)}
.menu-foot .btn{width:100%}

/* ---------- 6. Hero ---------- */
.hero{position:relative;padding-top:var(--s-600);padding-bottom:var(--s-700);overflow:hidden}
.hero-grid{display:grid;gap:var(--s-600)}
@media (min-width:1080px){
  .hero{padding-top:var(--s-800)}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--s-700);align-items:start}
}

.hero-tag{
  display:inline-flex;align-items:center;gap:var(--s-75);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent-2);
  padding:var(--s-50) var(--s-100);border-radius:var(--r-full);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;
  margin-bottom:var(--s-300);
}
.hero-tag .pulse{
  width:7px;height:7px;border-radius:var(--r-full);background:var(--lista);flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* La reseña como titular */
.hero h1{margin-bottom:var(--s-300)}
.hero h1 .qm{color:var(--accent)}
.hero-source{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-100) var(--s-300);
  padding-top:var(--s-200);border-top:2px solid var(--accent);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-2);
  margin-bottom:var(--s-400);
}
.hero-source b{color:var(--bone);font-weight:500}
.hero .lead{margin-bottom:var(--s-500)}
.hero .btn-row{margin-bottom:var(--s-400)}

.proofline{display:flex;flex-direction:column;gap:var(--s-75)}
.proofline li{
  display:flex;gap:var(--s-75);align-items:flex-start;
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--bone-2);
}
.proofline i{color:var(--lista);font-size:18px;line-height:1.1;flex:none}

/* Tarjeta de reporte */
.report{
  background:var(--ink-2);border:1px solid var(--hair);
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-lg);
}
.report-top{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-200);
  padding:var(--s-100) var(--s-200);
  background:var(--accent-solid);color:#fff;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
}
.report-top .verified{display:inline-flex;align-items:center;gap:var(--s-50)}
.report-body{padding:var(--s-300) var(--s-200)}
@media (min-width:520px){.report-body{padding:var(--s-400) var(--s-300)}}
.nivel-row{display:flex;align-items:center;gap:var(--s-300);margin-bottom:var(--s-300)}
.nivel-row svg{width:84px;height:84px;flex:none}
.nivel-jump{
  font-family:var(--display);font-stretch:88%;font-weight:800;
  font-size:var(--fs-2xl);line-height:1;color:var(--bone);
}
.nivel-jump .to{color:var(--lista)}
.findings{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.findings li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-100);
  padding-block:var(--s-100);border-bottom:1px solid var(--hair);
  font-size:var(--fs-sm);line-height:var(--lh-sm);
}
.findings .time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--bone-2);white-space:nowrap}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px var(--s-75);border-radius:var(--r-sm);white-space:nowrap;font-weight:600;
}
.chip--critica{background:var(--critica);color:#2A0407}
.chip--atender{background:var(--atender);color:#231400}
.chip--optimizable{background:var(--optimizable);color:#231400}
.chip--lista{background:var(--lista);color:#032213}
.report-foot{
  display:flex;flex-wrap:wrap;gap:var(--s-100) var(--s-300);
  padding:var(--s-100) var(--s-200);border-top:1px solid var(--hair);
  background:rgba(3,12,24,.3);
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--bone-2);
}
.report-foot b{color:var(--bone);font-weight:500}

/* Foto con marco de evidencia */
.shot{position:relative;background:var(--ink-3);border:1px solid var(--hair);overflow:hidden;aspect-ratio:4/3;border-radius:var(--r-lg)}
.shot::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    repeating-linear-gradient(135deg,rgba(238,243,249,.05) 0 1px,transparent 1px 14px),
    var(--ink-3);
}
.shot img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.shot img[data-failed]{display:none}
.shot .tag{
  position:absolute;z-index:2;left:var(--s-75);top:var(--s-75);
  background:rgba(7,26,47,.86);color:var(--bone);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:var(--s-50) var(--s-75);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.shot .tag.is-after{background:var(--lista);color:#032213}
.hero-photo{margin-bottom:var(--s-300);aspect-ratio:16/10;border-radius:var(--r-xl)}

/* ---------- 7. Barra de estado (cuadrilla) ---------- */
.status{
  background:var(--ink-2);
  border-block:1px solid var(--hair);
  padding-block:var(--s-100);
}
.status .wrap{
  display:flex;flex-wrap:wrap;gap:var(--s-100) var(--s-400);
  align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-sm);
  letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2);
}
.status .unit{display:inline-flex;align-items:center;gap:var(--s-75)}
.status b{color:var(--bone);font-weight:600}
.status .dot{
  width:7px;height:7px;border-radius:var(--r-full);background:var(--lista);flex:none;
  box-shadow:0 0 0 0 rgba(62,208,138,.6);animation:ping 2.6s var(--ease) infinite;
}
.status .dot.is-empty{background:var(--atender);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(62,208,138,.55)}70%{box-shadow:0 0 0 10px rgba(62,208,138,0)}100%{box-shadow:0 0 0 0 rgba(62,208,138,0)}}
.skeleton{display:block;width:min(560px,80%);height:12px;margin-inline:auto;background:var(--ink-3);border-radius:var(--r-sm)}

/* ---------- 8. Ticker de quejas ---------- */
.ticker{
  background:var(--ink);
  color:var(--bone-2);
  padding-block:var(--s-200);
  overflow:hidden;white-space:nowrap;
  border-bottom:1px solid var(--hair);
}
.ticker-track{display:inline-flex;gap:var(--s-500);animation:slide 62s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{
  font-family:var(--display);font-stretch:96%;font-weight:600;
  font-size:var(--fs-base);letter-spacing:-.005em;
  display:inline-flex;align-items:center;gap:var(--s-500);
}
.ticker span::after{content:"\25C6";font-family:var(--font);font-size:9px;color:var(--accent);opacity:.9}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 9. Los pecados ---------- */
.sins{display:grid;gap:1px;background:var(--hair-ink);border:1px solid var(--hair-ink);border-radius:var(--r-xl);overflow:hidden}
@media (min-width:680px){.sins{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.sins{grid-template-columns:repeat(3,1fr)}}
.sin{
  background:var(--paper);padding:var(--s-300);
  display:flex;flex-direction:column;gap:var(--s-100);
  transition:background-color .4s var(--ease);
}
.sin:hover{background:var(--paper-2)}
.sin-n{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;
  color:var(--accent-ink);font-weight:600;
}
.sin-n i{
  display:grid;place-content:center;width:40px;height:40px;
  border-radius:var(--r-lg);background:var(--accent-soft-ink);
  color:var(--accent-ink);font-size:22px;letter-spacing:0;
  transition:transform .7s var(--ease),background-color .7s var(--ease);
}
.sin:hover .sin-n i{transform:translateY(-2px) rotate(-4deg)}
.sin h3{font-size:var(--fs-lg);color:var(--ink-text)}
.sin blockquote{
  font-size:var(--fs-base);line-height:var(--lh-base);color:var(--ink-text);
  font-style:normal;border-left:3px solid var(--accent);padding-left:var(--s-100);
}
.sin .fix{
  margin-top:auto;padding-top:var(--s-100);border-top:1px solid var(--hair-ink);
  display:flex;justify-content:space-between;gap:var(--s-100);align-items:baseline;
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-text-2);
}
.sin .fix .t{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent-ink);white-space:nowrap;font-weight:600}
.sins-foot{
  margin-top:var(--s-500);display:flex;flex-wrap:wrap;gap:var(--s-300);
  align-items:center;justify-content:space-between;
}
.sins-foot p{max-width:52ch;font-size:var(--fs-lg);line-height:var(--lh-lg);color:var(--ink-text)}

/* ---------- 10. Tagline reveal ---------- */
.tagline{padding-block:var(--s-500)}
.tagline p{
  font-family:var(--display);font-stretch:80%;font-weight:800;
  font-size:clamp(1.875rem,6vw,4.25rem);line-height:.98;
  text-transform:uppercase;letter-spacing:-.02em;
}
.tagline p + p{color:var(--accent)}
.tagline .w{display:inline-block;opacity:0;transform:translateY(.3em);filter:blur(6px)}
.tagline.is-in .w{
  opacity:1;transform:none;filter:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.no-js .tagline .w{opacity:1;transform:none;filter:none}

/* ---------- 11. Tarjetas y rejillas ---------- */
.grid{display:grid;gap:var(--s-300)}
@media (min-width:680px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--ink-2);border:1px solid var(--hair);
  padding:var(--s-400) var(--s-300);border-radius:var(--r-xl);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover{border-color:var(--hair-strong);transform:translateY(-3px);box-shadow:var(--sh-md)}
.card h3{margin-bottom:var(--s-100)}
.card p{color:var(--bone-2);font-size:var(--fs-base);line-height:var(--lh-base)}
.surface-paper .card{background:#fff;border-color:var(--hair-ink)}
.surface-paper .card p{color:var(--ink-text-2)}
.card .ico{
  display:grid;place-content:center;width:46px;height:46px;
  background:var(--accent-soft);color:var(--accent-2);
  border-radius:var(--r-lg);font-size:24px;margin-bottom:var(--s-200);
}
.surface-paper .card .ico{background:var(--accent-soft-ink);color:var(--accent-ink)}
.card.step .n{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-stretch:82%;font-weight:800;
  font-size:var(--fs-5xl);line-height:1;color:var(--accent);margin-bottom:var(--s-100);
}
.card.step .n i{font-size:32px;color:var(--accent-2);opacity:.85}
.benefit-list{display:grid;gap:var(--s-300)}
@media (min-width:680px){.benefit-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.benefit-list{grid-template-columns:repeat(3,1fr)}}

.fitlist{display:flex;flex-direction:column;gap:var(--s-100)}
.fitlist li{display:flex;gap:var(--s-100);align-items:flex-start;font-size:var(--fs-base);line-height:var(--lh-base)}
.fitlist i{font-size:20px;line-height:1.2;flex:none}
.fit-yes i{color:var(--lista)}
.fit-no i{color:var(--critica)}

/* ---------- 12. Galería antes/después ---------- */
.gallery{display:grid;gap:var(--s-400)}
@media (min-width:768px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.gallery{grid-template-columns:repeat(3,1fr)}}
.pair .shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-50)}
.pair .meta{
  display:flex;flex-wrap:wrap;gap:var(--s-50) var(--s-200);
  margin-top:var(--s-100);
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--bone-2);
}
.pair .meta b{color:var(--bone);font-weight:500}
.pair .meta .up{color:var(--lista)}

/* ---------- 13. El Nivel ---------- */
.bands{display:grid;gap:var(--s-50);border-radius:var(--r-xl);overflow:hidden}
@media (min-width:768px){.bands{grid-template-columns:repeat(5,1fr)}}
.band{padding:var(--s-300) var(--s-200);color:#231400}
.band .rng{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;opacity:.75}
.band .nm{
  font-family:var(--display);font-stretch:82%;font-weight:800;
  font-size:var(--fs-2xl);text-transform:uppercase;line-height:1;margin-block:var(--s-75)
}
.band .ds{font-size:var(--fs-sm);line-height:var(--lh-sm);opacity:.85}
.band--critica{background:var(--critica);color:#2A0407}
.band--atender{background:var(--atender)}
.band--optimizable{background:var(--optimizable)}
.band--lista{background:var(--lista);color:#032213}
.band--estandar{background:var(--estandar);color:#00201c}

/* ---------- 14. Acordeón ---------- */
.accordion{border-top:1px solid var(--hair)}
.surface-paper .accordion{border-color:var(--hair-ink)}
.accordion .item{border-bottom:1px solid var(--hair)}
.surface-paper .accordion .item{border-color:var(--hair-ink)}
.accordion summary{
  display:flex;align-items:flex-start;gap:var(--s-200);
  padding-block:var(--s-300);cursor:pointer;list-style:none;
  font-family:var(--display);font-stretch:96%;font-weight:700;
  font-size:var(--fs-lg);line-height:1.3;letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
@media (min-width:768px){.accordion summary{font-size:var(--fs-xl)}}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:hover{color:var(--accent-2)}
.surface-paper .accordion summary:hover{color:var(--accent-ink)}
.accordion .idx{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);flex:none;font-weight:600;padding-top:6px}
.surface-paper .accordion .idx{color:var(--accent-ink)}
.accordion summary .q{flex:1}
.accordion .caret{width:22px;height:22px;flex:none;transition:transform .4s var(--ease);opacity:.55;margin-top:2px}
.accordion .item[open] .caret{transform:rotate(180deg)}
.accordion .answer{
  padding-bottom:var(--s-300);max-width:72ch;
  font-size:var(--fs-base);line-height:1.65;color:var(--bone-2);
}
.surface-paper .accordion .answer{color:var(--ink-text-2)}
.accordion .item[open] .answer{animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 15. Cuadrilla ---------- */
.crew{display:grid;gap:var(--s-500);align-items:center}
@media (min-width:900px){.crew{grid-template-columns:.8fr 1.2fr;gap:var(--s-700)}}
.crew .portrait{border:1px solid var(--hair);background:var(--ink-3);aspect-ratio:1;overflow:hidden;border-radius:var(--r-xl)}
.crew .portrait img{width:100%;height:100%;object-fit:cover}
.crew .portrait img[data-failed]{display:none}
.crew-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r-xl);overflow:hidden;margin-top:var(--s-400);
}
@media (min-width:680px){.crew-stats{grid-template-columns:repeat(4,1fr)}}
.crew-stats div{background:var(--ink);padding:var(--s-300) var(--s-200)}
.surface-2 .crew-stats div{background:var(--ink-2)}
.crew-stats .v{
  font-family:var(--display);font-stretch:82%;font-weight:800;
  font-size:var(--fs-3xl);line-height:1;color:var(--accent-2);
}
.crew-stats .k{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-2);margin-top:var(--s-50);
}
.surface-paper .crew-stats{background:var(--hair-ink);border-color:var(--hair-ink)}
.surface-paper .crew-stats div{background:var(--paper)}
.surface-paper .crew-stats .v{color:var(--accent-ink)}
.surface-paper .crew-stats .k{color:var(--ink-text-2)}

/* ---------- 16. CTA final ---------- */
.final{
  background:linear-gradient(155deg,var(--accent-solid) 0%,var(--accent-mid) 52%,var(--navy) 100%);
  text-align:center;color:#fff;
}
.final h2{font-size:clamp(2rem,6.4vw,4.5rem);color:#fff}
.final .eyebrow{justify-content:center;color:rgba(255,255,255,.85)}
.final .lead{margin-inline:auto;color:rgba(255,255,255,.9)}
.final .btn-row{justify-content:center}
.final .btn-primary{background:#fff;color:var(--navy);box-shadow:0 var(--s-75) 28px rgba(3,12,24,.32)}
.final .btn-primary:hover{background:var(--bone);box-shadow:0 var(--s-100) 34px rgba(3,12,24,.4)}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.final .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.final a{color:#fff}

/* ---------- 17. Footer ---------- */
footer{background:var(--ink);border-top:1px solid var(--hair);padding-block:var(--s-600) var(--s-400)}
.foot-grid{display:grid;gap:var(--s-500)}
@media (min-width:768px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot-brand{display:inline-flex;align-items:center;gap:var(--s-75);margin-bottom:var(--s-200)}
.foot-brand svg{width:28px;height:28px}
.foot-brand span{
  font-family:var(--display);font-stretch:88%;font-weight:800;
  font-size:var(--fs-lg);letter-spacing:.05em;text-transform:uppercase;
}
footer .t-sm{color:var(--bone-2);max-width:44ch}
footer h3{font-size:var(--fs-sm);margin-bottom:var(--s-100);color:var(--bone)}
footer ul{display:flex;flex-direction:column;gap:var(--s-75)}
footer ul a{color:var(--bone-2);text-decoration:none;font-size:var(--fs-sm)}
footer ul a:hover{color:var(--accent-2)}
.foot-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-100);
  margin-top:var(--s-500);padding-top:var(--s-300);border-top:1px solid var(--hair);
  font-size:var(--fs-xs);color:var(--bone-2);
}

/* ---------- 18. Páginas de documento (legal, 404, selector) ---------- */
.doc{padding-block:var(--s-800) var(--s-700);max-width:var(--measure)}
.doc h1{font-size:clamp(2.25rem,7vw,4rem);margin-bottom:var(--s-300)}
.doc h2{font-size:var(--fs-2xl);margin-top:var(--s-500);margin-bottom:var(--s-200)}
.doc p,.doc li{color:var(--bone-2);margin-bottom:var(--s-200);font-size:var(--fs-base);line-height:1.65}
.doc ul{list-style:disc;padding-left:var(--s-300)}
.doc ul li{margin-bottom:var(--s-75)}
.doc .btn-row{margin-block:var(--s-400)}

/* Selector de zona */
.picker{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;margin-top:var(--s-500)}
@media (min-width:768px){.picker{grid-template-columns:repeat(2,1fr)}}
.picker a{
  background:var(--ink-2);padding:var(--s-500) var(--s-400);
  text-decoration:none;color:var(--bone);
  display:flex;flex-direction:column;gap:var(--s-100);
  transition:background-color .4s var(--ease);
}
.picker a:hover{background:var(--accent-solid)}
.picker a:hover .pk-go,.picker a:hover .pk-note{color:rgba(255,255,255,.9)}
.picker .pk-city{
  font-family:var(--display);font-stretch:80%;font-weight:800;
  font-size:clamp(1.75rem,5vw,2.75rem);text-transform:uppercase;line-height:.98;
}
.picker .pk-note{color:var(--bone-2);font-size:var(--fs-sm);margin:0}
.picker .pk-go{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-top:var(--s-200)}

/* ---------- 19. Revelado al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.tagline .w{opacity:1!important;transform:none!important;filter:none!important}
  .ticker-track{animation:none}
}

/* ============================================================
   20. One-pager corporativo (/) — componentes propios
   ============================================================ */

/* Declaración grande: la respuesta corta a una pregunta. */
.pitch{
  border-left:3px solid var(--accent);
  padding-left:var(--s-300);
  max-width:52ch;
}
.pitch p{
  font-family:var(--display);font-stretch:94%;font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.28;letter-spacing:-.01em;
  color:var(--bone);
}
.surface-paper .pitch p{color:var(--ink-text)}

/* Ficha del producto: nombre, qué es, qué entrega. */
.spec{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden}
.spec-row{
  background:var(--ink-2);padding:var(--s-300);
  display:grid;gap:var(--s-100);
}
@media (min-width:820px){
  .spec-row{grid-template-columns:180px 1fr 220px;gap:var(--s-300);align-items:start}
}
.spec-row .nm{
  font-family:var(--display);font-stretch:88%;font-weight:800;
  font-size:var(--fs-lg);line-height:1.1;color:var(--accent-2);
  text-transform:uppercase;letter-spacing:.01em;
}
.spec-row .ds{color:var(--bone-2);font-size:var(--fs-base);line-height:1.6}
.spec-row .out{
  font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;
  color:var(--bone);letter-spacing:.02em;
  padding-top:var(--s-25);
}
.spec-row .out b{color:var(--accent-2);font-weight:500;display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-50)}

/* Tabla comparativa */
.compare-wrap{overflow-x:auto;border:1px solid var(--hair-ink);border-radius:var(--r-xl);-webkit-overflow-scrolling:touch}
.compare{width:100%;min-width:720px;border-collapse:collapse;background:#fff;font-size:var(--fs-sm)}
.compare th,.compare td{padding:var(--s-200);text-align:left;vertical-align:top;border-bottom:1px solid var(--hair-ink)}
.compare thead th{
  background:var(--paper-2);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-text-2);
  border-bottom:2px solid var(--hair-ink);
}
.compare thead th.is-us{background:var(--accent-ink);color:#fff}
.compare tbody th{
  font-family:var(--font);font-weight:600;color:var(--ink-text);
  width:190px;background:var(--paper);
}
.compare td{color:var(--ink-text-2)}
.compare td.is-us{background:var(--accent-soft-ink);color:var(--ink-text);font-weight:600}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare-note{margin-top:var(--s-200);font-size:var(--fs-sm);color:var(--ink-text-2)}

/* Ruta de producto */
.roadmap{display:grid;gap:var(--s-300)}
@media (min-width:900px){.roadmap{grid-template-columns:repeat(4,1fr)}}
.stage{
  background:var(--ink-2);border:1px solid var(--hair);
  border-top:3px solid var(--hair-strong);
  border-radius:var(--r-xl);padding:var(--s-300);
  display:flex;flex-direction:column;gap:var(--s-200);
}
.stage.is-live{border-top-color:var(--lista)}
.stage.is-building{border-top-color:var(--accent)}
.stage .when{
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-2);
}
.stage .state{
  display:inline-flex;align-items:center;gap:var(--s-50);align-self:flex-start;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px var(--s-75);border-radius:var(--r-full);
  border:1px solid var(--hair-strong);color:var(--bone-2);
}
.stage.is-live .state{border-color:var(--lista);color:var(--lista)}
.stage.is-building .state{border-color:var(--accent);color:var(--accent-2)}
.stage ul{display:flex;flex-direction:column;gap:var(--s-100);margin-top:auto}
.stage li{
  font-size:var(--fs-sm);line-height:1.55;color:var(--bone-2);
  padding-left:var(--s-200);position:relative;
}
.stage li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:1px;background:var(--accent);
}

/* Bloques de zona: cada uno manda su propio tráfico */
.zones{display:grid;gap:var(--s-400)}
@media (min-width:900px){.zones{grid-template-columns:repeat(2,1fr)}}
.zone{
  display:flex;flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--hair);border-radius:var(--r-2xl);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.zone:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--sh-md)}
.zone .shot{border:0;border-radius:0;aspect-ratio:16/9}
.zone-body{padding:var(--s-400) var(--s-300);display:flex;flex-direction:column;gap:var(--s-200);flex:1}
.zone .tagline-zone{
  display:inline-flex;align-items:center;gap:var(--s-75);align-self:flex-start;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-2);
  padding:var(--s-50) var(--s-100);border-radius:var(--r-full);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
}
.zone .tagline-zone .pulse{width:7px;height:7px;border-radius:var(--r-full);background:var(--lista);flex:none;animation:pulse 2.4s var(--ease) infinite}
.zone h3{
  font-family:var(--display);font-stretch:80%;font-weight:800;
  font-size:clamp(1.75rem,4.4vw,2.75rem);line-height:.98;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--bone);
}
.zone p{color:var(--bone-2);font-size:var(--fs-base);line-height:1.6}
.zone .zone-stats{
  display:flex;flex-wrap:wrap;gap:var(--s-100) var(--s-300);
  padding-block:var(--s-200);
  border-block:1px solid var(--hair);
  font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--bone-2);
}
.zone .zone-stats b{color:var(--accent-2);font-weight:600}
.zone .btn{margin-top:auto;align-self:flex-start}

/* Cifras grandes de contexto */
.figures{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden}
@media (min-width:680px){.figures{grid-template-columns:repeat(3,1fr)}}
.figures div{background:var(--ink);padding:var(--s-400) var(--s-300)}
.surface-2 .figures div{background:var(--ink-2)}
.figures .v{
  font-family:var(--display);font-stretch:80%;font-weight:800;
  font-size:clamp(2.25rem,5vw,3.25rem);line-height:1;color:var(--accent-2);
}
.figures .k{color:var(--bone-2);font-size:var(--fs-sm);line-height:1.5;margin-top:var(--s-100)}

/* El titular del one-pager es una frase larga, no una cita corta:
   a 5.25rem ocupaba siete líneas y empujaba el CTA fuera de pantalla. */
body[data-city="general"] .hero h1{font-size:clamp(2.25rem,5vw,4rem)}

/* ============================================================
   21. v3.3 — One-pager de venta: recorte y coreografia
   ------------------------------------------------------------
   La raiz deja de explicarlo todo. Convence en seis momentos y
   reparte el trafico a las dos zonas, donde vive el texto largo.
   Este bloque va al final a proposito: reescribe algunos valores
   de los bloques 19 y 20 sin tocarlos.
   ============================================================ */

/* ---------- 21.1 Revelado con desenfoque y escalonado ---------- */
.reveal{opacity:0;transform:translateY(24px);filter:blur(8px)}
.reveal.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .9s var(--ease),transform .6s var(--ease),filter .9s var(--ease),
             border-color .6s var(--ease),box-shadow .6s var(--ease);
  transition-delay:var(--d,0ms);
}
.no-js .reveal{opacity:1;transform:none;filter:none}

/* ---------- 21.2 Entrada del hero: pura CSS, sin esperar al scroll ---------- */
.hero.is-cine [data-in]{animation:rise .95s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{
  from{opacity:0;transform:translateY(22px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.hero.is-cine h1{display:block}
.hero.is-cine h1 .ln{display:block;overflow:hidden;padding:.14em 0;margin:-.14em 0}
.hero.is-cine h1 .ln > span{
  display:block;white-space:nowrap;
  animation:maskUp 1.1s var(--ease) both;animation-delay:var(--d,0ms);
}
@keyframes maskUp{from{transform:translateY(106%)}to{transform:translateY(0)}}

/* El Nivel se dibuja solo: 0 a 86 en un arco. */
.gauge .gauge-arc{animation:arc 1.7s var(--ease) both;animation-delay:820ms}
@keyframes arc{from{stroke-dashoffset:263.9}to{stroke-dashoffset:36.9}}

.hero.is-cine .findings li{animation:rise .8s var(--ease) both;animation-delay:var(--d,0ms)}
.hero-cap{margin-top:var(--s-200)}

/* ---------- 21.3 Barra de avance del scroll ---------- */
.scroll-bar{
  position:absolute;left:0;bottom:-1px;z-index:2;
  height:2px;width:100%;pointer-events:none;
  background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  .scroll-bar{animation:grow linear both;animation-timeline:scroll(root block)}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 21.4 Tagline dentro de una seccion ---------- */
body[data-city="general"] .tagline{padding-block:0;margin-bottom:var(--s-700)}
body[data-city="general"] .tagline p{max-width:20ch;text-wrap:balance}

/* ---------- 21.5 Senales del problema: sin caja, solo filete ---------- */
.signals{display:grid;gap:var(--s-500)}
@media (min-width:900px){.signals{grid-template-columns:repeat(3,1fr);gap:var(--s-600)}}
.signal{border-top:1px solid var(--hair);padding-top:var(--s-300)}
.signal .ico{
  display:grid;place-content:center;width:44px;height:44px;
  border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent);
  margin-bottom:var(--s-200);
}
.signal .ico i{font-size:22px;line-height:1}
.signal h3{font-size:var(--fs-xl);margin-bottom:var(--s-75)}
.signal p{color:var(--bone-2);line-height:1.6}

/* ---------- 21.6 Los tres pasos del metodo ---------- */
.steps{display:grid;gap:var(--s-400)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s-500)}}
.step{
  background:var(--ink);border:1px solid var(--hair);
  border-radius:var(--r-2xl);padding:var(--s-400) var(--s-300);
  display:flex;flex-direction:column;gap:var(--s-100);
  transition:opacity .9s var(--ease),transform .6s var(--ease),filter .9s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.step:hover{border-color:var(--accent-line);transform:translateY(-4px);box-shadow:var(--sh-md)}
.step-n span{
  display:inline-grid;place-content:center;width:44px;height:44px;
  border-radius:var(--r-full);border:1px solid var(--accent-line);
  background:var(--accent-soft);color:var(--accent-2);
  font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;
  margin-bottom:var(--s-200);
}
.step-n{display:flex;align-items:flex-start;justify-content:space-between}
.step-n i{font-size:32px;color:var(--accent-2);opacity:.85;transition:transform .7s var(--ease)}
.step:hover .step-n i{transform:translateY(-2px)}
.step h3{
  font-family:var(--display);font-stretch:82%;font-weight:800;
  font-size:var(--fs-2xl);line-height:1;text-transform:uppercase;letter-spacing:-.015em;
}
.step > p{color:var(--bone-2);line-height:1.6}
.step p.step-out{
  margin-top:auto;padding-top:var(--s-200);border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:var(--fs-xs);line-height:1.7;
  color:var(--bone);letter-spacing:.02em;
}
.step p.step-out b{
  display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);font-weight:500;margin-bottom:var(--s-50);
}

/* ---------- 21.7 La ventaja en tres lineas ---------- */
.edge{
  display:grid;gap:1px;margin-top:var(--s-500);
  background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r-xl);overflow:hidden;
}
@media (min-width:820px){.edge{grid-template-columns:repeat(3,1fr)}}
.edge li{
  background:var(--ink);padding:var(--s-300);
  display:flex;flex-direction:column;gap:var(--s-75);
}
.edge b{
  font-family:var(--display);font-stretch:94%;font-weight:700;
  font-size:var(--fs-lg);line-height:1.2;color:var(--bone);
}
.edge span{color:var(--bone-2);font-size:var(--fs-sm);line-height:1.55}

.pitch{margin-top:var(--s-600)}

/* ---------- 21.8 La ruta: el filete superior se traza ---------- */
.stage,.stage.is-live,.stage.is-building{border-top-color:transparent;position:relative}
.stage::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:3px;
  background:var(--hair-strong);border-radius:var(--r-full);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s var(--ease);transition-delay:var(--d,0ms);
}
.stage.is-in::before{transform:scaleX(1)}
.stage.is-live::before{background:var(--lista)}
.stage.is-building::before{background:var(--accent)}
.stage li{padding-left:var(--s-200)}
.stage li b{color:var(--bone);font-weight:600}
/* El sello se nombra con el acento, no en cursiva. */
.stage em{font-style:normal;color:var(--accent-2)}

/* ---------- 21.9 Zonas: la tarjeta entera es el enlace ---------- */
.zone{background:var(--ink)}
.zone-link{
  display:flex;flex-direction:column;flex:1;
  text-decoration:none;color:inherit;
}
.zone .shot img{transition:transform 1.2s var(--ease)}
.zone-link:hover .shot img,
.zone-link:focus-visible .shot img{transform:scale(1.06)}
.zone-go{
  margin-top:auto;padding-top:var(--s-200);
  display:inline-flex;align-items:center;gap:var(--s-75);
  font-family:var(--display);font-stretch:96%;font-weight:700;
  font-size:var(--fs-base);color:var(--accent-2);
}
.zone-go i{font-size:18px;line-height:1;transition:transform .5s var(--ease)}
.zone-link:hover .zone-go i{transform:translateX(6px)}
.zone-wa{
  align-self:flex-start;
  margin:0 var(--s-300) var(--s-400);
  font-size:var(--fs-sm);
}
/* Mientras config.js siga con el telefono de ejemplo, el enlace se
   queda sin href: que tampoco se vea pulsable. */
.btn-quiet[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- 21.10 CTA final ---------- */
.final-row{justify-content:center;margin-top:var(--s-500)}
.final-note{margin-top:var(--s-200)}

/* ---------- 21.11 El titular de la raiz vuelve a ser corto ----------
   Tres lineas cortas, cada una en su mascara y sin envolver. El
   minimo de 2.5rem es el que hace que la linea mas larga quepa
   completa en una pantalla de 320 px. */
body[data-city="general"] .hero h1{font-size:clamp(2.5rem,7vw,5.25rem)}

/* ---------- 21.12 Movil: los dos CTA del hero pesan igual ---------- */
@media (max-width:519px){
  .hero .btn-row .btn{width:100%}
}

/* ---------- 21.13 Pantallas de 320 a 400 px ----------
   Marca, boton de WhatsApp y hamburguesa no caben juntos con
   texto. El boton se queda solo con el icono; su aria-label ya
   dice a donde lleva. Aplica tambien a las paginas de zona. */
@media (max-width:399px){
  .nav{gap:var(--s-200);padding-inline:var(--s-200)}
  .nav > .btn-sm{padding-inline:var(--s-100)}
  .nav > .btn-sm span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .stage::before,.scroll-bar{transform:scaleX(1)}
  .gauge .gauge-arc{stroke-dashoffset:36.9}
}

/* ============================================================
   22. CONFIANZA · v3.2
   ------------------------------------------------------------
   Bloques que existen por una sola razon: que el dueno o el
   gerente sepa quien entra a sus habitaciones, con que se mide
   y contra que norma. Todo hereda los tokens de la seccion 1.
   ============================================================ */

/* ---------- 22.1 Tira de credenciales bajo el hero ---------- */
.creds{
  display:flex;flex-wrap:wrap;gap:var(--s-75);
  margin-top:var(--s-300);padding-top:var(--s-300);
  border-top:1px solid var(--hair)
}
.creds li{
  display:inline-flex;align-items:center;gap:var(--s-50);
  font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-xs);
  letter-spacing:.04em;text-transform:uppercase;color:var(--bone-2);
  background:rgba(238,243,249,.05);border:1px solid var(--hair);
  border-radius:var(--r-full);padding:var(--s-50) var(--s-100)
}
.creds i{color:var(--accent-2);font-size:14px;line-height:1}
.surface-paper .creds li{background:#fff;border-color:var(--hair-ink);color:var(--ink-text-2)}
.surface-paper .creds i{color:var(--accent-ink)}

/* ---------- 22.2 Las diez areas del Checkup ---------- */
.method{display:grid;gap:var(--s-100);grid-template-columns:1fr}
@media (min-width:560px){.method{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.method{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1140px){.method{grid-template-columns:repeat(5,1fr)}}
.area{
  background:#fff;border:1px solid var(--hair-ink);
  border-radius:var(--r-xl);padding:var(--s-200);
  transition:border-color .7s var(--ease),transform .7s var(--ease)
}
.area:hover{border-color:var(--accent-ink);transform:translateY(-3px)}
.area-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-75)}
.area-top .n{display:inline-flex;align-items:center;gap:var(--s-75);font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-text-2)}
.area-top .cnt{
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent-ink);
  background:var(--accent-soft-ink);border-radius:var(--r-full);
  padding:var(--s-25) var(--s-75)
}
.area-top .n i{
  display:grid;place-content:center;width:32px;height:32px;
  border-radius:var(--r-md);background:var(--accent-soft-ink);
  color:var(--accent-ink);font-size:18px
}
.area h3{font-size:var(--fs-base);line-height:var(--lh-base);margin-top:var(--s-100)}
.area ul{margin-top:var(--s-100);display:flex;flex-direction:column;gap:var(--s-50)}
.area li{
  position:relative;padding-left:14px;
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-text-2)
}
.area li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:var(--r-full);background:var(--accent-ink);opacity:.5
}

/* ---------- 22.3 Instrumentos ---------- */
.tools{display:flex;flex-wrap:wrap;gap:var(--s-100);margin-top:var(--s-300)}
.tool{
  display:inline-flex;align-items:center;gap:var(--s-75);
  background:#fff;border:1px solid var(--hair-ink);border-radius:var(--r-full);
  padding:var(--s-75) var(--s-200);font-size:var(--fs-sm);line-height:var(--lh-sm)
}
.tool i{color:var(--accent-ink);font-size:18px;line-height:1}
.tool b{font-weight:600}

/* ---------- 22.4 Normas de referencia ---------- */
.norms{display:flex;flex-direction:column;gap:var(--s-100);margin-top:var(--s-300)}
.norm{
  background:#fff;border:1px solid var(--hair-ink);border-radius:var(--r-lg);
  padding:var(--s-200);display:grid;gap:var(--s-75)
}
@media (min-width:820px){
  .norm{grid-template-columns:260px 1fr;gap:var(--s-300);align-items:start}
}
.norm .code{
  font-family:var(--mono);font-size:var(--fs-sm);line-height:var(--lh-sm);
  color:var(--accent-ink);font-weight:600
}
.norm .code small{
  display:block;font-family:var(--font);font-weight:400;color:var(--ink-text-2);
  font-size:var(--fs-xs);line-height:var(--lh-xs);margin-top:var(--s-25)
}
.norm p{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-text-2)}
.legal-note{
  margin-top:var(--s-300);padding:var(--s-200);
  border:1px solid var(--hair-ink);border-radius:var(--r-lg);
  background:var(--paper-2);font-size:var(--fs-sm);line-height:var(--lh-sm);
  color:var(--ink-text-2);max-width:var(--measure)
}

/* ---------- 22.5 Contra que nos comparan ---------- */
.compare-scroll{overflow-x:auto;margin-top:var(--s-400);border:1px solid var(--hair);border-radius:var(--r-xl)}
.compare{width:100%;min-width:760px;border-collapse:collapse;font-size:var(--fs-sm);line-height:var(--lh-sm)}
.compare caption{
  caption-side:bottom;text-align:left;padding:var(--s-200);
  font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--bone-2)
}
.compare th,.compare td{padding:var(--s-200);text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{
  font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-xs);
  text-transform:uppercase;letter-spacing:.06em;color:var(--bone-2);font-weight:500
}
.compare thead th.is-us{color:var(--accent-2)}
.compare tbody th{width:24%;color:var(--bone);font-weight:600}
.compare td{color:var(--bone-2)}
.compare .is-us{background:var(--accent-soft);color:var(--bone)}
.compare-hint{margin-top:var(--s-100);font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--bone-2)}
@media (min-width:820px){.compare-hint{display:none}}

/* ---------- 22.6 Quien evalua ---------- */
.who{display:grid;gap:var(--s-500)}
@media (min-width:900px){
  .who{grid-template-columns:360px 1fr;gap:var(--s-700);align-items:start}
}
.who-card{
  background:#fff;border:1px solid var(--hair-ink);
  border-radius:var(--r-2xl);overflow:hidden
}
.who-card .portrait{
  position:relative;aspect-ratio:4/5;background:var(--paper-2);
  border:0;border-radius:0;overflow:hidden
}
.who-card .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.who-card .portrait img[data-failed]{display:none}
.who-meta{padding:var(--s-300);display:flex;flex-direction:column;gap:var(--s-75)}
.who-meta .name{font-family:var(--display);font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:700;color:var(--ink-text)}
.who-meta .role{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-text-2)}
.who-meta .id{
  font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-text-2);
  padding-top:var(--s-100);border-top:1px solid var(--hair-ink);margin-top:var(--s-75)
}
.protocol{display:flex;flex-direction:column;gap:var(--s-200);margin-top:var(--s-400)}
.protocol li{display:flex;gap:var(--s-200);align-items:flex-start}
.protocol i{color:var(--accent-ink);font-size:22px;line-height:1.1;flex:none}
.protocol b{display:block;font-weight:600;color:var(--ink-text);font-size:var(--fs-base);line-height:var(--lh-base)}
.protocol span{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-text-2)}

/* ---------- 22.7 Marcador de dato pendiente ----------
   Se ve a proposito. Si queda uno solo en la pagina publicada,
   se nota antes de que lo note un hotelero. */
.todo{
  background:rgba(255,159,28,.16);border-bottom:2px solid var(--atender);
  padding:0 var(--s-50);border-radius:var(--r-sm)
}

/* ---------- 22.8 Estado vacio de las fotos ----------
   Mientras img/ no tenga la foto real, el hueco se lee como un
   marco de la marca y no como una imagen rota. */
.portrait{position:relative}
.shot[data-empty]::before,.portrait[data-empty]::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 256 256' fill='none' stroke='%239CB0C6' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='24' y='64' width='208' height='152' rx='16'/%3E%3Cpath d='M96 64l16-24h32l16 24'/%3E%3Ccircle cx='128' cy='140' r='40'/%3E%3C/svg%3E") center/44px no-repeat;
  opacity:.5
}
.portrait[data-empty]::before{background-color:var(--paper-2)}

/* ---------- 30. Aviso de cookies y WhatsApp flotante ---------- */
.consent{
  position:fixed;z-index:60;left:var(--s-300);right:var(--s-300);bottom:var(--s-300);
  max-width:440px;padding:var(--s-200);
  background:var(--ink-2);border:1px solid var(--hair-strong);border-radius:var(--r-2xl);
  box-shadow:var(--sh-md);color:var(--bone);
  font-size:var(--fs-sm);line-height:var(--lh-sm);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.consent.is-open{opacity:1;transform:none}
.consent p{color:var(--bone-2);text-wrap:pretty}
.consent a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;justify-content:flex-end;gap:var(--s-75);margin-top:var(--s-100)}

.wa-float{
  position:fixed;z-index:55;right:var(--s-300);bottom:var(--s-300);
  display:grid;place-content:center;width:56px;height:56px;
  border-radius:var(--r-full);background:#25D366;color:#fff;
  box-shadow:var(--sh-md);
  transition:transform .7s var(--ease),opacity .7s var(--ease),bottom .7s var(--ease),box-shadow .7s var(--ease);
}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:translateY(-4px) scale(1.04)}
.wa-float:active{transform:scale(.96)}
.wa-float:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.wa-float.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
.wa-float[aria-disabled="true"]{display:none}
@media (max-width:679px){
  .consent{left:var(--s-200);right:var(--s-200);bottom:var(--s-200);max-width:none}
  .wa-float{right:var(--s-200);bottom:var(--s-200)}
  .has-consent .wa-float{bottom:176px}
}
@media (prefers-reduced-motion:reduce){
  .consent,.wa-float{transition:none}
}