/* =============================================================
   AsesorDeAlarmas — hoja de estilos premium
   Arquetipo: Editorial Dark Warm, adaptado a navy + verde vivo.
   Tono: serio, de confianza. Sin emojis, sin hype.
   Estructura del archivo:
   1. Tokens  2. Reset  3. Utilidades  4. Tipografía  5. Componentes
   6. Header 3 niveles  7. Secciones  8. Efectos  9. Responsive
   10. Reduced-motion
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root{
  color-scheme: dark;

  /* Navy scale — base de marca, ya aprobada */
  --navy-900:#081522; --navy-800:#0d2136; --navy-700:#14314f; --navy-600:#1c4270;
  --navy-tint:#1a3550;

  /* Superficies sobre navy */
  --bg:            var(--navy-900);
  --bg-2:          var(--navy-800);
  --card:          #0f1f32;
  --card-2:        #122539;
  --surface-tint:  rgba(255,255,255,0.04);
  --cream:         #eef3f6;             /* texto sobre navy — nunca blanco puro */
  --cream-2:       #c7d3de;
  --cream-3:       #7e91a4;             /* metadata */
  --line:          rgba(238,243,246,0.10);
  --line-strong:   rgba(238,243,246,0.18);

  /* Acento de acción/confianza — verde vivo */
  --accent:        #22d489;
  --accent-dark:   #14a86a;
  --accent-tint:   rgba(34,212,137,0.14);
  --accent-ink:    #06301f;             /* texto sobre fondos verdes claros */
  --value:         #a855f7;             /* zona de valor — morado, distinto del ámbar de riesgo medio */
  --value-tint:    rgba(168,85,247,0.16);

  /* Semántica de riesgo (auditoría) */
  --good:#2fbf6d; --warning:#e0a12c; --critical:#e0554a;
  --good-tint:rgba(47,191,109,0.14); --warning-tint:rgba(224,161,44,0.14); --critical-tint:rgba(224,85,74,0.14);

  /* Acentos categoriales — reservados a las 6 categorías de producto */
  --cat-blue:#4f8ff0;    --cat-blue-tint:rgba(79,143,240,0.15);
  --cat-violet:#9d7bf0;  --cat-violet-tint:rgba(157,123,240,0.15);
  --cat-amber:#e0a12c;   --cat-amber-tint:rgba(224,161,44,0.15);
  --cat-magenta:#e067a6; --cat-magenta-tint:rgba(224,103,166,0.15);
  --cat-orange:#e2823f;  --cat-orange-tint:rgba(226,130,63,0.15);
  --cat-red:#e0655c;     --cat-red-tint:rgba(224,101,92,0.15);

  --shadow-sm: 0 1px 2px rgba(2,7,14,.35);
  --shadow-md: 0 8px 24px rgba(2,7,14,.38);
  --shadow-lg: 0 24px 64px rgba(2,7,14,.48);
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px;
  --maxw:1180px;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  font-synthesis: none;
}

/* =============================================================
   2. RESET
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--cream);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
  background-image:
    radial-gradient(circle at 12% 6%, rgba(34,212,137,0.08), transparent 40%),
    radial-gradient(circle at 90% 78%, rgba(34,212,137,0.06), transparent 46%),
    repeating-linear-gradient(90deg, rgba(122,168,255,0.05) 0, rgba(122,168,255,0.05) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, rgba(122,168,255,0.05) 0, rgba(122,168,255,0.05) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(90deg, rgba(122,168,255,0.025) 0, rgba(122,168,255,0.025) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(0deg, rgba(122,168,255,0.025) 0, rgba(122,168,255,0.025) 1px, transparent 1px, transparent 24px);
  background-color:var(--bg);
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; letter-spacing:-0.01em; line-height:1.08; color:var(--cream); text-wrap:balance; font-family:var(--serif); font-weight:600; }
p{ margin:0; color:var(--cream-2); text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.icon{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.15em; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.skip-link{
  position:fixed; top:-100px; left:1rem; padding:.7rem 1.1rem; background:var(--accent); color:var(--accent-ink);
  z-index:9999; border-radius:8px; font-weight:700; font-size:14px;
}
.skip-link:focus{ top:1rem; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; }
.section-tight{ padding:56px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; font-family:var(--sans);
}
.kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
h2.h2{ font-size:clamp(26px,3.4vw,36px); }
.section-head p{ margin-top:14px; font-size:16px; line-height:1.65; color:var(--cream-3); }
.italic{ font-style:italic; color:var(--accent); }

/* [data-reveal] — universal reveal on scroll */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
[data-reveal].is-revealed{ opacity:1; transform:none; }
.reveal[data-split]{ opacity:1; transform:none; } /* defensive net */

/* =============================================================
   4. TIPOGRAFÍA — botones, badges
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:11px; font-size:14.5px; font-weight:700; font-family:var(--sans);
  border:1px solid transparent; transition:transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .2s ease, border-color .2s ease;
  white-space:nowrap; box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); transition-duration:.12s; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 26px rgba(34,212,137,.28); }
.btn-primary:hover{ background:#3adf9b; box-shadow:0 16px 36px rgba(34,212,137,.36); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:var(--line-strong); }
.btn-ghost:hover{ background:var(--surface-tint); border-color:var(--accent); }
.btn-light{ background:#fff; color:var(--navy-900); box-shadow:var(--shadow-md); }
.btn-light:hover{ background:var(--cream); }
.btn-sm{ padding:10px 15px; font-size:13px; border-radius:9px; }
.btn:disabled{ opacity:.5; pointer-events:none; }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; letter-spacing:.02em; }
.badge.new{ background:var(--accent-tint); color:var(--accent); }
.badge.gray{ background:var(--surface-tint); color:var(--cream-3); }

/* =============================================================
   6. HEADER — 3 niveles
   ============================================================= */
header.site{ position:sticky; top:0; z-index:200; }

.bar-top{
  background:var(--navy-900); border-bottom:1px solid var(--line);
  font-size:12px; color:var(--cream-3);
}
.bar-top .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:36px; gap:12px; flex-wrap:wrap; }
.bar-top-links{ display:flex; gap:18px; align-items:center; }
.bar-top-links a{ color:var(--cream-3); transition:color .2s; }
.bar-top-links a:hover{ color:var(--accent); }
.bar-top-trust{ display:flex; align-items:center; gap:6px; font-weight:600; color:var(--cream-2); }
.bar-top-trust .icon{ width:13px; height:13px; color:var(--accent); }

.bar-main{
  background:rgba(8,21,34,0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s ease;
}
header.site.is-scrolled .bar-main{ box-shadow:0 8px 24px rgba(2,7,14,.3); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:16px; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--cream); flex-shrink:0; font-family:var(--serif); }
.brand .shield{ width:30px; height:30px; color:var(--accent); flex-shrink:0; }
.brand small{ display:block; font-size:10px; font-weight:600; color:var(--cream-3); font-family:var(--sans); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
nav.primary{ display:flex; align-items:center; gap:2px; flex-shrink:1; min-width:0; }
nav.primary a{ position:relative; padding:9px 12px; font-size:13.5px; font-weight:600; color:var(--cream-2); border-radius:8px; white-space:nowrap; transition:color .2s; }
nav.primary a:hover{ color:var(--cream); }
nav.primary a.current{ color:var(--accent); }
nav.primary a.current::after{ content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; background:var(--accent); border-radius:2px; }
nav.primary a.spotlight{ background:var(--accent-tint); color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
nav.primary a.spotlight.current::after{ display:none; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.menu-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px; color:var(--cream); }

.bar-cats{ background:var(--navy-800); border-bottom:1px solid var(--line); }
.cats-row{ display:flex; align-items:center; gap:4px; min-height:44px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cats-row::-webkit-scrollbar{ display:none; }
.cats-row a{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; font-size:12.5px; font-weight:600;
  color:var(--cream-3); border-radius:99px; white-space:nowrap; transition:color .2s, background .2s;
}
.cats-row a:hover{ color:var(--cream); background:var(--surface-tint); }
.cats-row a .cat-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cats-row a.current{ color:var(--cream); background:var(--surface-tint); }
.cat-icon{ width:15px; height:15px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.8; }
nav.mobile .cat-icon{ width:17px; height:17px; }

nav.mobile{ display:none; flex-direction:column; padding:10px 0 20px; border-top:1px solid var(--line); background:var(--navy-900); }
nav.mobile.open{ display:flex; }
nav.mobile a{ padding:13px 4px; font-size:15px; font-weight:600; color:var(--cream-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; }
nav.mobile a.current{ color:var(--accent); }
nav.mobile .cat-dot{ width:8px; height:8px; border-radius:50%; }

@media (max-width: 1080px){
  nav.primary{ display:none; }
  .bar-cats{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .nav-cta .btn-ghost{ display:none; }
}
@media (max-width: 640px){
  .bar-top{ display:none; }
}

/* =============================================================
   7. SPLASH
   ============================================================= */
.splash{
  position:fixed; inset:0; z-index:10000; background:var(--navy-900);
  display:grid; place-items:center; pointer-events:auto;
  transition:opacity .9s var(--ease-out), clip-path 1.1s var(--ease-soft);
  animation:splashSafety .01s 4.5s forwards; /* red de seguridad CSS */
}
.splash.is-out{ opacity:0; pointer-events:none; clip-path:inset(0 0 100% 0); }
@keyframes splashSafety{ to{ opacity:0; pointer-events:none; clip-path:inset(0 0 100% 0); } }
.splash-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.splash-mark{ width:52px; height:52px; color:var(--accent); animation:splashPulse 1.6s ease-in-out infinite; }
@keyframes splashPulse{ 0%,100%{ opacity:.55; transform:scale(.96); } 50%{ opacity:1; transform:scale(1); } }
.splash-word{ font-family:var(--serif); font-size:19px; color:var(--cream); letter-spacing:-.01em; }
.splash-line{ width:120px; height:2px; background:var(--line-strong); border-radius:2px; overflow:hidden; position:relative; }
.splash-line::after{ content:""; position:absolute; inset:0; background:var(--accent); transform:translateX(-100%); animation:splashLine 1.3s var(--ease-soft) infinite; }
@keyframes splashLine{ to{ transform:translateX(100%); } }

/* ---- App boot — secuencia de arranque de la Auditoría PuntoCiego ---- */
.app-boot{
  position:fixed; inset:0; z-index:9999; background:radial-gradient(120% 100% at 50% 30%, var(--navy-800), var(--navy-900) 70%);
  display:grid; place-items:center; pointer-events:auto; overflow:hidden;
  animation:appBootOut .01s 2.6s forwards;
}
.app-boot.is-out{ opacity:0; pointer-events:none; transform:scale(1.03); }
.app-boot{ transition:opacity .8s var(--ease-out), transform 1s var(--ease-soft); }
@keyframes appBootOut{ to{ opacity:0; pointer-events:none; transform:scale(1.03); } }
.app-boot-grid{
  position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(65% 55% at 50% 42%, #000 0%, transparent 75%);
}
.app-boot-inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 20px; }
.app-boot-radar{ position:relative; width:104px; height:104px; display:grid; place-items:center; }
.app-boot-radar-ring{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--accent); opacity:0;
  animation:appBootRing 2.4s var(--ease-soft) infinite;
}
.app-boot-radar-ring.r2{ animation-delay:.7s; }
.app-boot-radar-ring.r3{ animation-delay:1.4s; }
@keyframes appBootRing{ 0%{ transform:scale(.35); opacity:.7; } 100%{ transform:scale(1.35); opacity:0; } }
.app-boot-radar-sweep{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:conic-gradient(from 0deg, rgba(34,212,137,.35) 0deg, transparent 55deg, transparent 360deg);
  animation:appBootSweep 1.8s linear infinite;
}
@keyframes appBootSweep{ to{ transform:rotate(360deg); } }
.app-boot-mark{ position:relative; width:34px; height:34px; color:var(--accent); z-index:1; filter:drop-shadow(0 0 10px rgba(34,212,137,.45)); }
.app-boot-word{ font-family:var(--sans); font-size:15px; font-weight:800; letter-spacing:.14em; color:var(--cream); }
.app-boot-word span{ color:var(--accent); }
.app-boot-log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; min-height:118px; align-items:flex-start; }
.app-boot-log li{
  font-family:ui-monospace,"SF Mono","Cascadia Code","Consolas",monospace; font-size:12px; color:var(--cream-3);
  opacity:0; transform:translateY(4px); animation:appBootLine .5s var(--ease-out) forwards; animation-delay:var(--d);
  display:flex; align-items:center; gap:7px;
}
.app-boot-log li::before{ content:"›"; color:var(--accent); font-weight:700; }
.app-boot-log li.ok{ color:var(--accent); font-weight:700; }
.app-boot-log li.ok::before{ content:"✓"; }
@keyframes appBootLine{ to{ opacity:1; transform:translateY(0); } }
.app-boot-bar{ width:200px; height:3px; border-radius:99px; background:var(--line-strong); overflow:hidden; }
.app-boot-bar span{ display:block; height:100%; width:0%; background:var(--accent); border-radius:99px; animation:appBootFill 2s var(--ease-soft) .15s forwards; }
@keyframes appBootFill{ to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .app-boot{ animation-duration:.01s; animation-delay:.01s; }
  .app-boot-radar-ring, .app-boot-radar-sweep, .app-boot-log li, .app-boot-bar span{ animation:none !important; opacity:1; transform:none; width:100%; }
}

/* ---- Calculando informe — misma estética, mostrada bajo demanda por JS ---- */
.calc-overlay{
  position:fixed; inset:0; z-index:9998; background:radial-gradient(120% 100% at 50% 30%, var(--navy-800), var(--navy-900) 70%);
  display:grid; place-items:center; overflow:hidden;
  opacity:1; transition:opacity .6s var(--ease-out);
}
.calc-overlay.is-out{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .calc-overlay .app-boot-radar-ring, .calc-overlay .app-boot-radar-sweep, .calc-overlay .app-boot-log li, .calc-overlay .app-boot-bar span{ animation:none !important; opacity:1; transform:none; width:100%; }
}

/* =============================================================
   7b. HERO
   ============================================================= */
.hero{
  position:relative; overflow:clip; isolation:isolate;
  background:linear-gradient(180deg, var(--navy-900), var(--navy-800) 120%);
  padding:76px 0 56px; border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:-20% -10% -40% -10%; z-index:-1;
  background:
    radial-gradient(50% 45% at 82% 8%, rgba(34,212,137,.16), transparent 65%),
    conic-gradient(from var(--mesh-angle), rgba(34,212,137,.08), rgba(28,66,112,.16), rgba(34,212,137,.06), rgba(28,66,112,.14));
  filter:blur(90px) saturate(120%);
  animation:heroMesh 26s linear infinite;
}
@keyframes heroMesh{ 0%{ --mesh-angle:0deg; } 100%{ --mesh-angle:360deg; } }
.hero-grid{ display:grid; grid-template-columns:1.08fr 0.92fr; gap:52px; align-items:center; }
.hero h1{ font-size:clamp(32px,4.6vw,52px); line-height:1.08; margin-bottom:20px; max-width:16ch; }
.hero .lead{ font-size:17.5px; max-width:52ch; line-height:1.65; color:var(--cream-2); }
.hero-ctas{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.trust-strip{ display:flex; gap:24px; margin-top:36px; flex-wrap:wrap; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--cream-3); }
.trust-item .icon{ color:var(--accent); width:17px; height:17px; }

.report-mock{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:24px; position:relative;
  transform:translateY(0); transition:transform .1s linear;
}
.report-mock .rm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.report-mock .rm-title{ font-size:12.5px; font-weight:700; color:var(--cream-3); letter-spacing:.04em; text-transform:uppercase; }
.report-mock .rm-badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--good-tint); color:var(--good); }
.gauge-wrap{ display:flex; align-items:center; gap:18px; padding:16px; background:var(--surface-tint); border-radius:var(--radius-md); margin-bottom:14px; }
.gauge-wrap .lbl{ font-size:12.5px; color:var(--cream-3); }
.gauge-wrap .val{ font-size:21px; font-weight:800; font-family:var(--serif); }
.mock-rows{ display:flex; flex-direction:column; gap:10px; }
.mock-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font-size:13px; }
.mock-row .icon{ color:var(--accent); width:18px; height:18px; }
.mock-row .left{ display:flex; align-items:center; gap:10px; color:var(--cream-2); font-weight:600; }
.mock-row .right{ font-weight:800; color:var(--cream); }

/* ---- Vista previa de la app Punto Ciego (hero) ---- */
.app-preview{ background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.app-preview-chrome{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--navy-900); border-bottom:1px solid var(--line); }
.app-preview-dots{ display:flex; gap:5px; }
.app-preview-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(238,243,246,0.18); }
.app-preview-brand{ display:flex; align-items:center; gap:7px; font-family:var(--serif); font-weight:600; font-size:14px; color:var(--cream); }
.app-preview-brand .icon{ width:19px; height:19px; color:var(--accent); }
.app-preview-live{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
.app-preview-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:appLivePulse 1.8s ease-in-out infinite; }
@keyframes appLivePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.app-preview-screen{ padding:20px; }
.app-preview-plan{ width:100%; height:auto; border-radius:10px; background:#050c15; margin-bottom:16px; border:1px solid var(--line); }
.app-preview-plan .fp-room{ fill-opacity:.22; }
.app-preview-tag{ text-align:center; font-size:11px; font-weight:700; color:var(--cream-3); text-transform:uppercase; letter-spacing:.03em; margin-top:14px; }

/* =============================================================
   7c. VALUE PROPS — 4 tarjetas categoriales
   ============================================================= */
.props-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.prop-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-soft), border-color .3s; }
.prop-card:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.prop-card .icon-badge{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.prop-card .icon-badge .icon{ width:21px; height:21px; }
.prop-card h4{ font-size:15px; margin-bottom:7px; font-family:var(--sans); font-weight:700; }
.prop-card p{ font-size:13.5px; }
.tone-blue .icon-badge{ background:var(--cat-blue-tint); color:var(--cat-blue); }
.tone-violet .icon-badge{ background:var(--cat-violet-tint); color:var(--cat-violet); }
.tone-amber .icon-badge{ background:var(--cat-amber-tint); color:var(--cat-amber); }
.tone-magenta .icon-badge{ background:var(--cat-magenta-tint); color:var(--cat-magenta); }
.tone-orange .icon-badge{ background:var(--cat-orange-tint); color:var(--cat-orange); }
.tone-red .icon-badge{ background:var(--cat-red-tint); color:var(--cat-red); }

/* =============================================================
   7d. SPOTLIGHT — servicio estrella (auditoría)
   ============================================================= */
.spotlight-section{ background:#050c15; border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:clip; }
.spotlight-section::before{
  content:""; position:absolute; inset:-30% -10% -30% -10%; z-index:0;
  background:radial-gradient(45% 55% at 15% 20%, rgba(34,212,137,.14), transparent 65%),
             radial-gradient(40% 45% at 90% 80%, rgba(79,143,240,.10), transparent 65%);
  filter:blur(70px);
}
.spotlight-inner{ position:relative; z-index:1; }
.spotlight-top{ max-width:680px; margin-bottom:56px; }
.spotlight-top .kicker{ color:#7ef0bd; }
.spotlight-top .kicker .dot{ background:#7ef0bd; }
.spotlight-top h2{ font-size:clamp(28px,3.6vw,40px); margin-bottom:16px; }
.spotlight-top .lead{ font-size:16.5px; color:var(--cream-2); line-height:1.65; max-width:58ch; }

.phase-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:56px; }
.phase-card{ text-align:left; }
.phase-icon{ width:64px; height:64px; margin-bottom:18px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.phase-icon path, .phase-icon circle:not(.fill-shape){ stroke-dasharray:1; stroke-dashoffset:1; }
.phase-icon .fill-shape{ opacity:0; transition:opacity 1s var(--ease-out); }
.phase-icon.is-drawn .fill-shape{ opacity:1; }
.phase-num{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--cream-3); margin-bottom:8px; text-transform:uppercase; font-family:var(--sans); }
.phase-card h4{ font-size:16px; margin-bottom:7px; font-family:var(--sans); font-weight:700; }
.phase-card p{ font-size:13.5px; color:var(--cream-3); line-height:1.55; }

.spotlight-bottom{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; padding-top:44px; border-top:1px solid var(--line); }
.spotlight-steps{ display:flex; flex-direction:column; gap:16px; }
.spotlight-step{ display:flex; gap:14px; align-items:flex-start; }
.spotlight-step .num{ width:30px; height:30px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; flex-shrink:0; font-family:var(--sans); }
.spotlight-step strong{ display:block; font-size:14.5px; color:var(--cream); margin-bottom:2px; font-family:var(--sans); }
.spotlight-step span{ font-size:13px; color:var(--cream-3); }
.spotlight-cta{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }

.spotlight-card{ background:rgba(255,255,255,0.035); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:22px; backdrop-filter:blur(6px); }
.spotlight-card .rm-title{ color:var(--cream-3); }

/* =============================================================
   7e. NOSOTROS VS OTROS
   ============================================================= */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); }
.table-scroll table{ min-width:600px; }
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
.compare-table th, .compare-table td{ padding:15px 18px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line); }
.compare-table thead th{ background:var(--surface-tint); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--cream-3); font-weight:700; }
.compare-table th.us, .compare-table td.us{ background:var(--accent-tint); }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table td.no{ color:var(--critical); }
.compare-table td.yes{ color:var(--good); font-weight:700; }

/* =============================================================
   7f. CÓMO FUNCIONA — pasos
   ============================================================= */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; box-shadow:var(--shadow-sm); }
.step-card .n{ font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.06em; margin-bottom:12px; font-family:var(--sans); }
.step-card h4{ font-size:15.5px; margin-bottom:7px; font-family:var(--sans); font-weight:700; }
.step-card p{ font-size:13.5px; }

/* =============================================================
   7g. CATEGORÍAS
   ============================================================= */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; transition:transform .5s var(--ease-soft), border-color .3s; }
.cat-card:hover{ transform:translateY(-5px); border-color:var(--line-strong); }
.cat-card .icon-badge{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.cat-card .icon-badge .icon{ width:22px; height:22px; }
.cat-card h4{ font-size:15.5px; font-family:var(--sans); font-weight:700; }
.cat-card p{ font-size:13.5px; flex:1; }
.cat-card .examples{ font-size:11.5px; color:var(--cream-3); border-top:1px solid var(--line); padding-top:11px; }
.cat-card .status{ font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
.cat-card .status.soon{ color:var(--cream-3); }

/* =============================================================
   7h. TABLAS — empresas
   ============================================================= */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.pad{ padding:26px; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--cream-3); padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; }
table.data td{ padding:14px; border-bottom:1px solid var(--line); color:var(--cream-2); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr.highlight td{ background:var(--accent-tint); }
table.data td strong{ color:var(--cream); }
.company-name{ display:flex; align-items:center; gap:10px; }
.company-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* =============================================================
   7i. CONFIANZA
   ============================================================= */
.trust-band{ background:var(--navy-800); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-card{ text-align:center; padding:10px; }
.trust-card .icon-badge{ width:48px; height:48px; margin:0 auto 14px; border-radius:13px; background:var(--card); color:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.trust-card .icon-badge .icon{ width:23px; height:23px; }
.trust-card h4{ font-size:14px; margin-bottom:6px; font-family:var(--sans); font-weight:700; }
.trust-card p{ font-size:12.5px; }

.honesty-box{ border:1px dashed var(--line-strong); border-radius:var(--radius-md); padding:22px 24px; background:var(--card); display:flex; gap:15px; align-items:flex-start; }
.honesty-box .icon{ width:23px; height:23px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.honesty-box p{ font-size:13.5px; }
.honesty-box strong{ color:var(--cream); }

/* count-up stat row */
.stat-row{ display:flex; gap:44px; flex-wrap:wrap; justify-content:center; margin-top:40px; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--serif); font-size:clamp(30px,4vw,42px); color:var(--accent); font-weight:600; }
.stat .lbl{ font-size:12px; color:var(--cream-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }

/* =============================================================
   7j. CONTACTO
   ============================================================= */
.contact-shell{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-lg); max-width:640px; margin:0 auto; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:12.5px; font-weight:600; color:var(--cream-3); }
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line-strong);
  background:var(--surface-tint); color:var(--cream); font-family:inherit; font-size:14px; transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); outline:none; }
.field textarea{ resize:vertical; min-height:96px; }
.contact-form .btn{ margin-top:6px; width:100%; }
.contact-form{ transition:opacity .5s var(--ease-out), transform .5s var(--ease-soft); }
.contact-form.is-sending{ opacity:.7; pointer-events:none; }
.contact-form.is-sent{ opacity:0; transform:translateY(-10px); position:absolute; pointer-events:none; }
.contact-success{ display:none; text-align:center; padding:20px 0; }
.contact-success.is-visible{ display:block; animation:fadein .4s ease; }
.contact-success .check{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--good-tint); color:var(--good); display:flex; align-items:center; justify-content:center; }
.contact-success .check .icon{ width:26px; height:26px; }
.contact-success h4{ font-size:18px; margin-bottom:8px; }
.field-error{ font-size:12px; color:var(--critical); display:none; margin-top:2px; }
.field.has-error input, .field.has-error textarea{ border-color:var(--critical); }
.field.has-error .field-error{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

/* =============================================================
   7k. FOOTER
   ============================================================= */
footer.site{ background:#050c15; color:var(--cream-3); margin-top:0; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding:60px 0 36px; }
.footer-brand .brand{ color:var(--cream); }
.footer-brand p{ color:var(--cream-3); font-size:13px; margin-top:16px; max-width:32ch; line-height:1.65; }
footer.site h5{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--cream-3); margin-bottom:16px; font-weight:700; font-family:var(--sans); }
footer.site ul li{ margin-bottom:11px; }
footer.site a{ font-size:13.5px; color:var(--cream-2); transition:color .2s; }
footer.site a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--line); padding:22px 0; display:flex; justify-content:space-between; font-size:12px; color:var(--cream-3); flex-wrap:wrap; gap:10px; }

/* =============================================================
   8. AUDITORÍA — cuestionario y resultados
   ============================================================= */
.audit-wrap{ max-width:960px; margin:0 auto; padding:0 28px; }
.audit-shell{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:38px 42px; margin:30px 0 80px; position:relative; }
.resume-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--accent-tint); border:1px solid rgba(34,212,137,.3); border-radius:12px; padding:14px 18px; margin-bottom:26px; font-size:13px; color:var(--cream-2); }
.resume-banner .icon{ width:19px; height:19px; color:var(--accent); flex-shrink:0; }
.resume-banner-actions{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
@media (max-width:560px){ .resume-banner{ flex-direction:column; align-items:flex-start; } .resume-banner-actions{ margin-left:0; } }
.progress-code-badge{ display:flex; align-items:center; gap:9px; background:var(--surface-tint); border:1px solid var(--line); border-radius:10px; padding:9px 14px; margin-bottom:18px; font-size:12px; color:var(--cream-3); }
.progress-code-badge .icon{ width:15px; height:15px; color:var(--cream-3); flex-shrink:0; }
.progress-code-badge strong{ color:var(--cream); letter-spacing:.03em; font-family:var(--font-mono, monospace); }
.resume-code-row{ margin-bottom:22px; }
.link-btn{ background:none; border:none; padding:0; color:var(--accent); font-size:12.5px; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.link-btn:hover{ color:var(--cream); }
.resume-code-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.resume-code-form input{ background:var(--surface-tint); border:1px solid var(--line-strong); border-radius:8px; padding:8px 11px; font-size:13px; color:var(--cream); width:170px; letter-spacing:.04em; text-transform:uppercase; }
.resume-code-form input:focus{ outline:none; border-color:var(--accent); }
.resume-code-msg{ font-size:12px; color:var(--cream-3); }
.progress-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; font-size:12.5px; color:var(--cream-3); font-weight:700; }
.progress-track{ height:6px; background:var(--surface-tint); border-radius:99px; overflow:hidden; margin-bottom:32px; }
.progress-fill{ height:100%; background:var(--accent); border-radius:99px; transition:width .3s var(--ease-soft); width:10%; }
.step{ display:none; }
.step.active{ display:block; animation:fadein .3s ease; }
.step h3{ font-size:21px; margin-bottom:7px; }
.step .hint{ font-size:13px; color:var(--cream-3); margin-bottom:24px; line-height:1.55; }
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt-grid.cols-1{ grid-template-columns:1fr; }
.opt-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.opt-card{
  position:relative; border:1.5px solid var(--line-strong); border-radius:12px; padding:16px 17px; cursor:pointer;
  display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--cream-2);
  transition:border-color .15s, background .15s; background:var(--surface-tint);
}
.opt-card:hover{ border-color:var(--accent); }
.opt-card input{ accent-color:var(--accent); width:17px; height:17px; flex-shrink:0; }
.opt-card.checked{ border-color:var(--accent); background:var(--accent-tint); color:var(--cream); }
.opt-card .sub{ display:block; font-weight:400; font-size:12px; color:var(--cream-3); margin-top:2px; }
.opt-badge{ position:absolute; top:-10px; left:14px; background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:99px; }
.opt-icon{ width:23px; height:23px; flex-shrink:0; color:var(--cream-3); stroke:currentColor; fill:none; stroke-width:1.6; transition:color .15s; }
.opt-card.checked .opt-icon, .opt-card:hover .opt-icon{ color:var(--accent); }

/* ---- Productos de afiliación (Amazon) ---- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 10px; }
.product-card{ border:1.5px solid var(--line); border-radius:14px; padding:20px; background:var(--surface-tint); display:flex; flex-direction:column; gap:10px; position:relative; }
.product-card.is-recommended{ border-color:var(--accent); background:var(--accent-tint); box-shadow:0 8px 24px rgba(34,212,137,.15); }
.product-badge{ position:absolute; top:-10px; left:16px; background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:99px; }
.product-icon{ width:34px; height:34px; color:var(--accent); }
.product-image{ width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#fff; flex-shrink:0; }
.product-image img{ width:100%; height:100%; object-fit:contain; padding:12px; }
.product-rating{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--cream-3); }
.product-rating .star{ width:13px; height:13px; color:#f0a93a; flex-shrink:0; }
.product-rating strong{ color:var(--cream); font-weight:700; }
.product-card h4{ font-size:14px; font-family:var(--sans); font-weight:700; line-height:1.35; }
.product-card p{ font-size:12.5px; color:var(--cream-3); line-height:1.5; flex:1; }
.product-price{ font-family:var(--serif); font-size:19px; color:var(--cream); font-weight:600; }
.affiliate-disclosure{ font-size:11px; color:var(--cream-3); opacity:.75; line-height:1.5; margin-top:8px; }
.audit-nudge{ display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 16px; border:1px dashed var(--line); border-radius:10px; font-size:12.5px; color:var(--cream-3); text-decoration:none; transition:border-color .15s, color .15s; }
.audit-nudge:hover{ border-color:var(--accent); color:var(--cream); }
.audit-nudge svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; }
.audit-nudge strong{ color:var(--cream); font-weight:700; }
@media (max-width:960px){ .product-grid{ grid-template-columns:1fr; } }
.sort-bar{ display:flex; align-items:center; justify-content:flex-end; gap:9px; margin:-6px 0 16px; }
.sort-bar label{ font-size:12px; color:var(--cream-3); }
select.sort-select{
  padding:8px 12px; border:1.5px solid var(--line-strong); border-radius:9px; font-size:12.5px;
  color:var(--cream); background:var(--surface-tint); font-family:inherit; cursor:pointer;
}
select.sort-select:focus{ border-color:var(--accent); outline:none; }
select.sort-select option{ background:var(--card); color:var(--cream); }
@media (max-width:640px){ .sort-bar{ justify-content:flex-start; flex-wrap:wrap; } }
.step-nav{ display:flex; justify-content:space-between; margin-top:32px; }
select.audit-select{
  width:100%; padding:14px 15px; border:1.5px solid var(--line-strong); border-radius:11px; font-size:14.5px;
  color:var(--cream); background:var(--surface-tint); font-family:inherit;
}
select.audit-select option{ background:var(--card); color:var(--cream); }

#results{ display:none; }
.result-head{ text-align:center; margin-bottom:8px; }
.result-head .kicker{ justify-content:center; display:flex; }
.meter-card{ background:var(--surface-tint); border-radius:var(--radius-md); padding:26px; margin:28px 0; }
.meter-track{ position:relative; height:10px; border-radius:99px; overflow:visible; display:flex; margin-top:28px; }
.meter-zone{ height:100%; }
.meter-zone.z-good{ background:var(--good); border-radius:99px 0 0 99px; }
.meter-zone.z-warn{ background:var(--warning); }
.meter-zone.z-crit{ background:var(--critical); border-radius:0 99px 99px 0; }
.meter-pointer{ position:absolute; top:-9px; width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:12px solid var(--cream); transform:translateX(-50%); transition:left .6s var(--ease-soft); }
.meter-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--cream-3); margin-top:9px; }
.risk-label{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:18px; font-size:17px; font-weight:800; font-family:var(--serif); }
.risk-label .badge-icon{ width:23px; height:23px; }
.meter-desc{ font-size:12.5px; color:var(--cream-3); text-align:center; margin-top:11px; max-width:46ch; margin-left:auto; margin-right:auto; }

.risk-summary{ display:none; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:18px 20px; margin:-8px 0 28px; font-size:13.5px; color:var(--cream-2); line-height:1.6; }
.risk-summary strong{ color:var(--cream); }
.risk-summary p{ margin-bottom:12px; }
.risk-summary p:last-child{ margin-bottom:0; }
.risk-summary-tips{ margin:8px 0 0; padding-left:19px; list-style:disc; }
.risk-summary-tips li{ margin-bottom:8px; line-height:1.55; }
.risk-summary-tips li::marker{ color:var(--accent); }
.risk-summary-tips li:last-child{ margin-bottom:0; }

.pdf-cta-row{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; margin:0 0 32px; padding:24px 22px; background:var(--accent-tint); border:1px solid rgba(34,212,137,.3); border-radius:12px; }
.pdf-cta-row .btn{ flex-shrink:0; }
.pdf-cta-row > svg.icon{ color:var(--accent); }
.pdf-cta-row strong{ font-size:15.5px; color:var(--cream); font-family:var(--sans); }
.pdf-cta-hint{ font-size:12px; color:var(--cream-3); line-height:1.4; max-width:46ch; }
.pdf-cta-row .lead-row, .pdf-cta-row .lead-consent{ width:100%; max-width:400px; }
.pdf-cta-row .lead-row{ margin-top:6px; }
.pdf-cta-row .lead-consent{ text-align:left; margin-top:12px; }
.pdf-cta-row .lead-consent:first-of-type{ margin-top:16px; }

/* ---- Secciones plegables del informe (el cliente decide si quiere leerlas) ---- */
.result-disclosure{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-tint); margin:16px 0; overflow:hidden; }
.result-disclosure summary{
  cursor:pointer; padding:16px 20px; font-family:var(--serif); font-size:16px; font-weight:600; color:var(--cream);
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; user-select:none;
  transition:background .15s;
}
.result-disclosure summary:hover{ background:var(--surface-tint2, rgba(255,255,255,.03)); }
.result-disclosure summary::-webkit-details-marker{ display:none; }
.result-disclosure summary::after{
  content:"+"; font-size:19px; line-height:1; color:var(--accent); flex-shrink:0; width:26px; height:26px;
  border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  transition:transform .2s, border-color .2s;
}
.result-disclosure[open] summary{ border-bottom:1px solid var(--line); }
.result-disclosure[open] summary::after{ content:"\2212"; border-color:var(--accent); transform:rotate(180deg); }
.disclosure-head{ display:flex; align-items:center; gap:13px; }
.disclosure-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.disclosure-icon .icon{ width:19px; height:19px; }
.disclosure-icon.icon-green{ background:var(--accent-tint); color:var(--accent); }
.disclosure-icon.icon-blue{ background:var(--cat-blue-tint); color:var(--cat-blue); }
.disclosure-icon.icon-red{ background:var(--critical-tint); color:var(--critical); }
.disclosure-icon.icon-amber{ background:var(--cat-amber-tint); color:var(--cat-amber); }
.result-disclosure > .hint{ font-size:13px; color:var(--cream-3); margin:16px 20px 4px; line-height:1.55; }
.result-disclosure > .result-grid, .result-disclosure > .zone-sensor-list, .result-disclosure > .blind-list, .result-disclosure > #extraProductsList{ margin-left:20px; margin-right:20px; }
.result-disclosure > *:last-child{ margin-bottom:20px; }
.extra-products-cat-title{ font-size:13.5px; font-family:var(--sans); font-weight:700; color:var(--cream-2); margin:18px 0 10px; }
.extra-products-cat-title:first-child{ margin-top:0; }
#extraProductsList .audit-nudge{ margin-bottom:6px; }

.result-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0; }
.result-item{ border:1px solid var(--line); border-radius:12px; padding:17px 18px; display:flex; gap:12px; align-items:flex-start; background:var(--surface-tint); }
.result-item .icon{ width:20px; height:20px; color:var(--accent); flex-shrink:0; margin-top:2px; }
.result-item strong{ display:block; font-size:14px; color:var(--cream); }
.result-item span{ font-size:12.5px; color:var(--cream-3); }

.blind-list{ display:flex; flex-direction:column; gap:10px; margin:18px 0 28px; }
.blind-item{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:15px 16px; background:var(--surface-tint); }
.blind-item .icon{ width:19px; height:19px; color:var(--critical); flex-shrink:0; margin-top:2px; }
.blind-item strong{ display:block; font-size:13.5px; color:var(--cream); }
.blind-item p{ font-size:12.5px; margin-top:2px; }

.company-match{ display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:12px; padding:15px 18px; margin-bottom:10px; background:var(--surface-tint); }
.company-match .cm-left{ display:flex; align-items:center; gap:12px; }
.company-match .company-dot{ width:10px; height:10px; }
.company-match strong{ font-size:14px; color:var(--cream); }
.company-match span{ font-size:12px; color:var(--cream-3); }
.company-match .cm-price{ font-size:15px; font-weight:800; text-align:right; color:var(--cream); }

.lead-box{ background:var(--navy-900); border:1px solid var(--line); color:var(--cream); border-radius:var(--radius-md); padding:28px 30px; margin-top:32px; }
.lead-box h4{ color:var(--cream); font-size:16px; margin-bottom:7px; }
.lead-box p{ color:var(--cream-3); font-size:13px; margin-bottom:18px; line-height:1.55; }
.lead-row{ display:flex; gap:10px; flex-wrap:wrap; }
.lead-row input[type=email]{ flex:1; min-width:200px; padding:13px 15px; border-radius:10px; border:1.5px solid var(--line-strong); background:rgba(255,255,255,0.04); color:var(--cream); font-size:14px; }
.lead-consent{ display:flex; gap:8px; align-items:flex-start; margin-top:16px; font-size:12px; color:var(--cream-3); }
.lead-consent input{ margin-top:3px; accent-color:var(--accent); }
.lead-status{ display:none; margin-top:16px; font-size:13px; font-weight:600; max-width:400px; }
.lead-status.is-visible{ display:block; }
.lead-status.is-success{ color:var(--accent); }
.lead-status.is-error{ color:var(--critical); }
.lead-status.is-pending{ color:var(--cream-3); }

.result-actions{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; justify-content:center; }
.disclaimer{ font-size:11.5px; color:var(--cream-3); text-align:center; margin-top:24px; line-height:1.55; }

/* ---- Revisión / validación de respuestas ---- */
#review{ display:none; }
.review-list{ display:flex; flex-direction:column; gap:10px; margin:24px 0 8px; }
.review-row{ display:grid; grid-template-columns:1fr 1.5fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:var(--surface-tint); }
.review-label{ font-size:11.5px; font-weight:700; color:var(--cream-3); text-transform:uppercase; letter-spacing:.03em; }
.review-value{ font-size:13.5px; color:var(--cream); }
.review-edit{ font-size:12px; font-weight:700; color:var(--accent); border:1px solid var(--line-strong); border-radius:8px; padding:7px 12px; white-space:nowrap; transition:background .2s; }
.review-edit:hover{ background:var(--accent-tint); }
@media (max-width:640px){ .review-row{ grid-template-columns:1fr; } .review-edit{ justify-self:start; } }

/* ---- Plano esquemático interactivo ---- */
.floorplan-shell{ display:grid; grid-template-columns:1fr 170px; gap:18px; background:var(--surface-tint); border-radius:var(--radius-md); padding:18px; margin-bottom:6px; }
.floorplan-canvas{
  position:relative; border-radius:4px; overflow:hidden; border:1.5px solid rgba(122,168,255,.4);
  width:100%; aspect-ratio:3/2;
  background:
    linear-gradient(rgba(122,168,255,.09) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(122,168,255,.09) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(rgba(122,168,255,.16) 1px, transparent 1px) 0 0/130px 130px,
    linear-gradient(90deg, rgba(122,168,255,.16) 1px, transparent 1px) 0 0/130px 130px,
    #050c15;
  box-shadow:inset 0 0 0 6px #050c15, inset 0 0 0 7px rgba(122,168,255,.25);
}
.floorplan-canvas svg{ width:100%; height:auto; display:block; }
.plan-viewport{ overflow:auto; border-radius:4px; }
.plan-viewport .floorplan-canvas{ transform-origin:top left; transition:transform .15s ease-out; }
.floorplan-legend{ display:flex; flex-direction:column; gap:8px; font-size:11.5px; color:var(--cream-3); align-content:flex-start; }
.fp-legend-group-title{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--cream-3); opacity:.8; }
.fp-legend-item{ display:flex; align-items:center; gap:8px; }
.fp-legend-icon{ width:13px; height:13px; color:var(--accent); stroke:currentColor; fill:none; stroke-width:.8; flex-shrink:0; }
.fp-legend-item-lg{ gap:10px; font-size:12.5px; color:var(--cream-2); font-weight:600; margin-bottom:2px; }
.fp-legend-badge{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fp-legend-badge svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:.9; }
.fp-legend-badge.icon-green{ background:var(--accent-tint); color:var(--accent); }
.fp-legend-badge.icon-purple{ background:var(--value-tint); color:var(--value); }
.fp-legend-badge.icon-amber{ background:var(--cat-amber-tint); color:var(--cat-amber); }
.fp-legend-icon-sensor{ color:var(--cat-blue); }
.fp-legend-icon-contact{ color:var(--cat-orange); }
.fp-legend-icon-contact-door{ color:var(--cat-amber); }
.fp-swatch{ width:12px; height:12px; border-radius:3px; flex-shrink:0; display:inline-block; }
.fp-swatch.fp-risk-bajo{ background:var(--good); }
.fp-swatch.fp-risk-medio{ background:var(--warning); }
.fp-swatch.fp-risk-alto{ background:var(--critical); }
.fp-legend-subtitle{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--cream-3); opacity:.65; margin:8px 0 2px; }
.fp-legend-subtitle:first-of-type{ margin-top:4px; }

.fp-room{ fill-opacity:.16; stroke-width:.6; cursor:pointer; transition:fill-opacity .2s; outline:none; }
.fp-room:hover, .fp-room.is-active{ fill-opacity:.34; }
.fp-risk-bajo{ fill:var(--good); stroke:var(--good); }
.fp-risk-medio{ fill:var(--warning); stroke:var(--warning); }
.fp-risk-alto{ fill:var(--critical); stroke:var(--critical); }
.fp-label{ font-size:3.6px; fill:var(--cream-2); font-family:var(--sans); font-weight:600; pointer-events:none; }
.fp-label-ext{ fill:var(--critical); font-weight:700; }
.fp-ext{ fill:var(--critical); fill-opacity:.14; stroke:var(--critical); stroke-width:.6; stroke-dasharray:2 1.4; cursor:pointer; outline:none; }
.fp-ext:hover, .fp-ext.is-active{ fill-opacity:.3; }
.fp-window-dot{ fill:var(--cream-3); opacity:.6; }
.fp-marker{ cursor:pointer; outline:none; }
.fp-sensor{ color:var(--accent); stroke:var(--accent); fill:none; stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; }
.fp-sensor:hover, .fp-marker.is-active .fp-sensor, g.fp-marker.is-active{ color:#fff; stroke:#fff; }
.fp-badge{ stroke:none; }

.floorplan-info{ display:flex; align-items:flex-start; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:13px 15px; font-size:12.5px; color:var(--cream-2); margin:12px 0 8px; line-height:1.5; }
.floorplan-scale{ font-size:11.5px; color:var(--cream-3); margin:0 0 10px; }
.floorplan-info .icon{ width:17px; height:17px; color:var(--accent); flex-shrink:0; margin-top:1px; }

@media (max-width:720px){ .floorplan-shell{ grid-template-columns:1fr; } .floorplan-legend{ flex-direction:row; flex-wrap:wrap; } .fp-legend-group-title{ flex-basis:100%; margin-top:4px; } }

/* ---- Selector de paquete (3 niveles de protección) ---- */
.tier-selector{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.tier-btn{ position:relative; flex:1 1 160px; text-align:left; padding:13px 16px; border:1.5px solid var(--line-strong); border-radius:12px; background:var(--surface-tint); font-size:13.5px; font-weight:700; color:var(--cream-2); transition:border-color .2s, background .2s; }
.tier-btn:hover{ border-color:var(--accent); }
.tier-btn.is-active{ border-color:var(--accent); background:var(--accent-tint); color:var(--cream); }
.tier-badge{ display:block; margin-top:4px; font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.03em; }
.tier-desc{ font-size:13px; color:var(--cream-3); line-height:1.55; margin-bottom:14px; }
.tier-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.tier-stat-chip{ font-size:11.5px; font-weight:700; color:var(--cream-2); background:var(--surface-tint); border:1px solid var(--line); border-radius:99px; padding:6px 13px; }

/* ---- Sensores por zona ---- */
.zone-sensor-list{ display:flex; flex-direction:column; gap:8px; margin:14px 0 28px; }
.zone-sensor-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; border:1px solid var(--line); border-radius:10px; padding:11px 15px; background:var(--surface-tint); flex-wrap:wrap; }
.zone-sensor-name{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--cream); flex-shrink:0; }
.zone-sensor-items{ font-size:12px; color:var(--cream-3); text-align:right; flex:1; }
@media (max-width:640px){ .zone-sensor-row{ flex-direction:column; align-items:flex-start; } .zone-sensor-items{ text-align:left; } }

/* ---- Selector numérico exacto (habitaciones / ventanas / accesos) ---- */
.qty-stepper{ display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--line-strong); border-radius:12px; overflow:hidden; background:var(--surface-tint); width:fit-content; }
.qty-btn{ width:46px; height:46px; font-size:20px; font-weight:700; color:var(--cream); background:transparent; transition:background .15s; flex-shrink:0; }
.qty-btn:hover{ background:var(--accent-tint); color:var(--accent); }
.qty-input{ width:72px; height:46px; text-align:center; border:0; border-left:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong); background:transparent; color:var(--cream); font-size:17px; font-weight:700; font-family:inherit; -moz-appearance:textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---- Etapa de colocación de accesos (arrastrar y soltar) ---- */
#placement{ display:none; }
.placement-progress{ display:flex; align-items:center; gap:14px; margin:20px 0 16px; }
.placement-progress-track{ flex:1; height:8px; background:var(--surface-tint); border-radius:99px; overflow:hidden; }
.placement-progress-fill{ height:100%; background:var(--accent); border-radius:99px; transition:width .3s var(--ease-soft); width:0%; }
.placement-progress span, #placementProgressLabel{ font-size:12px; font-weight:700; color:var(--cream-3); white-space:nowrap; }

.placement-shell{ grid-template-columns:1fr 165px; }
.placement-canvas{ aspect-ratio:16/10; }

/* ---- Lienzo del plano (habitaciones y zonas 100% arrastrables) ---- */
.plan-canvas{ position:relative; width:100%; height:100%; background:#050c15; border-radius:10px; overflow:hidden; }
.plan-tile{
  position:absolute; border-radius:3px; display:flex; align-items:flex-end; justify-content:center;
  text-align:center; padding:8px 6px; font-size:12px; font-weight:700; color:var(--cream-2);
  border:1.5px solid var(--line-strong); background:rgba(255,255,255,0.05); user-select:none;
  box-shadow:inset 0 0 0 3px rgba(5,12,21,.55);
  transition:box-shadow .15s, border-color .15s;
}
.plan-tile.is-draggable{ cursor:grab; touch-action:none; }
.plan-tile.is-draggable:active{ cursor:grabbing; }
.plan-tile:hover, .plan-tile.is-active{ box-shadow:0 0 0 2px rgba(255,255,255,.3); z-index:2; }
.plan-tile.is-exterior{ border-style:dashed; background:rgba(224,85,74,.08); }
/* Relleno más discreto que el tinte estándar del sitio — el borde ya marca el nivel de
   riesgo con claridad, así que el relleno se queda casi como fondo y deja respirar a la
   zona de valor y los iconos de detector. */
.plan-tile.risk-bajo{ background:rgba(47,191,109,0.08); border-color:var(--good); }
.plan-tile.risk-medio{ background:rgba(224,161,44,0.08); border-color:var(--warning); }
.plan-tile.risk-alto{ background:rgba(224,85,74,0.08); border-color:var(--critical); }
.plan-tile.is-value-zone{ background:var(--value-tint); border-color:var(--value); box-shadow:0 0 0 2px rgba(168,85,247,.4); }
.plan-tile.value-zone-pick{ cursor:pointer; animation:valueZonePulse 1.4s ease-in-out infinite; }
@keyframes valueZonePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(168,85,247,.55); } 50%{ box-shadow:0 0 0 5px rgba(168,85,247,.14); } }
.plan-tile.is-swap-target{ box-shadow:0 0 0 3px var(--accent) !important; background:var(--accent-tint) !important; }
.plan-tile.is-swap-target::after{ content:"⇄ Intercambiar"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--accent); background:rgba(5,12,21,.72); border-radius:9px; pointer-events:none; }
.plan-tile-label{ pointer-events:none; line-height:1.25; text-transform:uppercase; letter-spacing:.045em; font-size:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; width:100%; }
.plan-tile-label .plan-tile-type-icon{ width:9px; height:9px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.45; flex-shrink:0; }
.plan-tile-value-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:4;
  width:26px; height:26px; border-radius:50%; background:var(--value); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.5), 0 0 0 2px var(--navy-900);
}
.plan-tile-value-badge svg{ width:15px; height:15px; }
.plan-tile-ext-wall{ position:absolute; top:4px; left:5px; width:14px; height:14px; color:var(--cream-3); opacity:.65; pointer-events:none; }
.plan-tile-ext-wall svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; }
.plan-tile-remove{ position:absolute; top:3px; left:5px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.4); color:var(--cream-3); font-size:11px; line-height:16px; text-align:center; }
.plan-tile-remove:hover{ background:var(--critical); color:#fff; }
.plan-tile-resize{ position:absolute; right:1px; bottom:1px; width:16px; height:16px; cursor:nwse-resize; touch-action:none; }
.plan-tile-resize::before{ content:""; position:absolute; right:3px; bottom:3px; width:8px; height:8px; border-right:2px solid rgba(255,255,255,.55); border-bottom:2px solid rgba(255,255,255,.55); }
.plan-tile-resize:hover::before{ border-color:var(--accent); }

.plan-marker{
  position:absolute; width:26px; height:26px; border-radius:8px; background:var(--card); color:var(--accent);
  border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; z-index:3;
  transform:translate(-50%,-50%); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4); touch-action:none;
}
.plan-marker .chip-icon{ width:16px; height:16px; }
.plan-marker.is-placed-access{ background:var(--accent); color:var(--accent-ink); }
.plan-marker.is-placed-access.is-door{ background:var(--cat-amber); color:#1a1206; border-color:var(--cat-amber); }
.plan-marker.plan-marker-sensor{
  border-radius:50%; background:var(--cat-blue-tint); color:var(--cat-blue); border-color:var(--cat-blue);
}
/* Plano final: contacto magnético (puerta/ventana) con color propio, sin reborde y algo más pequeño */
.plan-marker.plan-marker-active{ width:21px; height:21px; border:none; background:var(--cat-orange-tint); color:var(--cat-orange); box-shadow:none; }
.plan-marker.plan-marker-active .chip-icon{ width:13px; height:13px; }
.plan-marker.plan-marker-active.is-door{ background:var(--cat-amber-tint); color:var(--cat-amber); }

.placement-hit.is-hover{ box-shadow:0 0 0 2px var(--accent) !important; }

.placement-chip{
  width:34px; height:34px; border-radius:8px; background:var(--card); border:1.5px solid var(--line-strong);
  color:var(--cream-2); display:inline-flex; align-items:center; justify-content:center; cursor:grab;
  touch-action:none; transition:border-color .15s, transform .15s; flex-shrink:0;
}
.placement-chip:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.placement-chip.is-armed{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); animation:valueZonePulse 1.4s ease-in-out infinite; }
.placement-chip:focus-visible, .plan-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.chip-icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.placement-ghost{ width:34px; height:34px; border-radius:8px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; opacity:.9; z-index:9999; transform:translate(-50%,-50%); box-shadow:0 8px 20px rgba(0,0,0,.45); }
.tile-ghost{ border-radius:11px; opacity:.85; z-index:9999; pointer-events:none; }

.placement-tray{ display:flex; gap:10px; flex-wrap:wrap; padding:16px; background:var(--surface-tint); border-radius:var(--radius-md); margin:14px 0 20px; min-height:66px; align-items:center; }
.placement-tray-empty{ font-size:13px; color:var(--cream-3); margin:0; }
.placement-kbd-hint{ font-size:11.5px; color:var(--cream-3); opacity:.75; line-height:1.5; margin:0 0 20px; }

/* ---- Barra de pestañas de planta ---- */
.result-floor-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.result-floor-tabs:empty{ display:none; }
.floor-tab-btn{ padding:8px 16px; border-radius:99px; border:1.5px solid var(--line-strong); background:var(--surface-tint); color:var(--cream-2); font-size:12.5px; font-weight:700; }
.floor-tab-btn.is-active{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); }

/* Pestañas de planta "de verdad", ancladas justo encima del plano */
.placement-floor-tabs{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-start; margin:0 0 -1px; padding-left:2px; position:relative; z-index:1; }
.placement-floor-tabs:empty{ display:none; }
.placement-floor-tabs .floor-tab-btn{ border-radius:10px 10px 0 0; border-bottom-color:transparent; padding:9px 18px 13px; }
.placement-floor-tabs .floor-tab-btn.is-active{ background:var(--surface-tint); border-color:var(--line-strong); border-bottom-color:var(--surface-tint); color:var(--accent); box-shadow:0 -2px 0 var(--accent) inset; }

/* ---- Barra de herramientas: añadir zona exterior + zona de valor ---- */
.placement-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.placement-toolbar-group{ display:flex; gap:8px; flex-wrap:wrap; }
.zone-add-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:9px; border:1.5px dashed var(--line-strong); background:transparent; color:var(--cream-3); font-size:11.5px; font-weight:700; }
.zone-add-btn:hover{ border-color:var(--critical); color:var(--critical); }
.zone-add-btn:disabled{ opacity:.35; cursor:not-allowed; }
.zone-add-btn .icon{ width:14px; height:14px; }
.btn-value-zone{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:9px; border:1.5px solid var(--line-strong); background:var(--surface-tint); color:var(--cream-2); font-size:12.5px; font-weight:800; flex-shrink:0; transition:background .15s, border-color .15s, color .15s; }
.btn-value-zone:hover{ border-color:var(--value); color:var(--value); }
.btn-value-zone.is-active{ background:var(--value); color:#fff; border-color:var(--value); }
.btn-value-zone .icon{ width:15px; height:15px; }
.placement-toolbar-hint{ font-size:12.5px; color:var(--value); font-weight:600; margin-bottom:14px; background:var(--value-tint); border:1px solid rgba(168,85,247,.4); border-radius:9px; padding:11px 15px; }

.plan-canvas-wrap{ position:relative; }
.plan-empty-hint{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(122,168,255,.4);
  pointer-events:none; white-space:nowrap;
}
.plan-canvas-tools{
  position:absolute; top:8px; right:8px; z-index:10; display:flex; align-items:center; gap:5px;
  background:rgba(5,12,21,.72); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.09);
  border-radius:9px; padding:4px;
}
.btn-plan-tool-sm{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0;
  border-radius:6px; border:none; background:transparent; color:var(--cream-3); font-size:13px; font-weight:700; line-height:1;
}
.btn-plan-tool-sm:hover:not(:disabled){ background:rgba(255,255,255,.08); color:var(--accent); }
.btn-plan-tool-sm:disabled{ opacity:.3; cursor:not-allowed; }
.btn-plan-tool-sm .icon{ width:13px; height:13px; }
.plan-zoom-controls{ display:inline-flex; align-items:center; gap:2px; }
#zoomLevelLabel{ font-size:10.5px; color:var(--cream-3); font-weight:700; min-width:32px; text-align:center; font-variant-numeric:tabular-nums; }

/* ---- Estancia por estancia (paso "tipo de cada estancia") ---- */
.room-type-list{ display:flex; flex-direction:column; gap:10px; }
.room-type-row{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--line-strong); border-radius:12px; padding:12px 16px; background:var(--surface-tint); }
.room-type-row .room-type-num{ width:26px; height:26px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.room-type-row select{ flex:1; padding:11px 12px; border-radius:9px; border:1.5px solid var(--line-strong); background:var(--card); color:var(--cream); font-size:14px; font-family:inherit; }
.room-type-row select.room-floor-select{ flex:0 0 auto; width:130px; color:var(--accent); font-weight:700; }
@media (max-width:640px){ .room-type-row{ flex-wrap:wrap; } .room-type-row select{ flex:1 1 100%; } .room-type-row select.room-floor-select{ width:auto; } }

/* ---- Zona de valor: aviso en el informe final ---- */
.value-zone-callout{ display:flex; gap:12px; align-items:flex-start; background:var(--value-tint); border:1px solid rgba(168,85,247,.4); border-radius:12px; padding:16px 18px; margin:16px 0 8px; font-size:13px; color:var(--cream-2); line-height:1.55; }
.value-zone-callout .icon{ width:20px; height:20px; color:var(--value); flex-shrink:0; margin-top:1px; }
.value-zone-callout strong{ color:var(--cream); }

/* ---- Perfil de negocio (solo uso=negocio) ---- */
.business-profile-callout{ background:var(--surface-tint); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:16px 0 8px; }
.business-profile-callout h4{ font-size:14px; color:var(--cream); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.business-profile-callout h4 .icon{ width:19px; height:19px; color:var(--accent); }
.business-profile-row{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--cream-2); line-height:1.5; margin-bottom:9px; }
.business-profile-row:last-child{ margin-bottom:0; }
.business-profile-row .icon{ width:16px; height:16px; color:var(--warning); flex-shrink:0; margin-top:2px; }
.business-profile-row.is-ok .icon{ color:var(--good); }
.business-profile-row strong{ color:var(--cream); }

@media (max-width:720px){ .placement-shell{ grid-template-columns:1fr; } }

/* =============================================================
   9. MISC
   ============================================================= */
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--surface-tint); color:var(--cream-3); }
.center-cta{ text-align:center; padding:80px 0 40px; }
.center-cta h2{ font-size:clamp(24px,3.2vw,32px); margin-bottom:14px; }
.center-cta p{ max-width:52ch; margin:0 auto 28px; font-size:15.5px; color:var(--cream-3); }

/* =============================================================
   10. RESPONSIVE
   ============================================================= */
@media (max-width: 1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .spotlight-bottom{ grid-template-columns:1fr; }
  .phase-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 960px){
  .props-row{ grid-template-columns:repeat(2,1fr); }
  .steps-grid, .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .hero h1{ font-size:30px; max-width:none; }
  .props-row, .steps-grid, .cat-grid, .trust-grid, .phase-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:60px 0; }
  .section-tight{ padding:40px 0; }
  .nav-row{ gap:8px; }
  .brand small{ display:none; }
  .brand{ font-size:14.5px; gap:7px; }
  .brand .shield{ width:25px; height:25px; }
  .nav-cta{ gap:6px; }
  .nav-cta .btn-primary{ padding:9px 12px; font-size:12px; }
  .menu-toggle{ padding:8px; }
  .btn{ white-space:normal; text-align:center; }
  .hero-ctas, .spotlight-cta, .result-actions{ flex-direction:column; align-items:stretch; }
  .audit-shell{ padding:26px 20px; }
  .stat-row{ gap:26px; }
  .contact-shell{ padding:26px 22px; }
  .result-grid{ grid-template-columns:1fr; }
}
@media (max-width: 539px){
  .opt-grid{ grid-template-columns:1fr; }
  .opt-grid.cols-3{ grid-template-columns:1fr; }
}

/* =============================================================
   11. PÁGINAS DE TEXTO (legal)
   ============================================================= */
.prose h1{ font-size:26px; margin-bottom:16px; scroll-margin-top:120px; }
.prose p{ margin-bottom:14px; font-size:14.5px; line-height:1.7; }
.prose p:last-child{ margin-bottom:34px; }
.prose a{ color:var(--accent); }
.prose strong{ color:var(--cream); }

/* =============================================================
   12. VIEW TRANSITIONS
   ============================================================= */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:220ms ease-out both vt-out; }
::view-transition-new(root){ animation:320ms var(--ease-out) both vt-in; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }

/* =============================================================
   13. REDUCED MOTION — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; }
  .splash-mark{ animation:none; }
  .splash-line::after{ animation:none; display:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  /* Se mantienen: hovers, tilts, reveals, count-up, trazado de iconos */
}