/* ==========================================================================
   PROTEGUS — Landing Premium
   Sistema de diseño
   ========================================================================== */

:root{
  /* ---- Color: identidad de marca Protegus ---- */
  --navy-950: #060f1f;
  --navy-900: #0a1a2f;   /* brand dark */
  --navy-800: #0f2745;
  --navy-700: #163a63;
  --navy-600: #1c4a7d;
  --blue-600: #1565c0;   /* brand primary */
  --blue-500: #1c86e0;
  --blue-400: #29a6f6;   /* brand bright */
  --blue-300: #6cc4fb;
  --grey-600: #565f6c;
  --grey-500: #6b7280;
  --grey-300: #b7bfc9;
  --grey-200: #e4e8ee;
  --grey-100: #eef1f5;
  --mist-50: #f2f4f7;    /* brand light bg */
  --white: #ffffff;
  --green-500: #1fa971;  /* sostenibilidad / ahorro */
  --green-100: #e3f6ee;
  --amber-500: #e8871e;  /* alertas cálidas, del set de iconos original */
  --red-500: #e04545;

  /* ---- Tipografía ---- */
  --font-display: 'Exo 2', 'Montserrat', 'Arial Narrow', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* ---- Ritmo / radios / sombras ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(10,26,47,.06);
  --shadow-md: 0 12px 32px rgba(10,26,47,.10);
  --shadow-lg: 0 24px 60px rgba(10,26,47,.16);
  --shadow-glow: 0 0 0 1px rgba(41,166,246,.25), 0 20px 60px rgba(21,101,192,.25);
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1240px;
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--navy-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.08; letter-spacing:-.01em; }
p{ margin:0; }
input, textarea, select{ font-family: inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 3px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout utilities ---- */
.wrap{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding: 0 28px;
}
.section{ padding: 128px 0; position:relative; }
.section-tight{ padding: 88px 0; }
@media (max-width: 900px){
  .section{ padding: 88px 0; }
  .section-tight{ padding: 64px 0; }
  .wrap{ padding: 0 20px; }
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight:600;
  color: var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(41,166,246,.18);
}
.eyebrow.on-dark{ color: var(--blue-300); }

.section-head{
  max-width: 680px;
  margin-bottom: 64px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  color: var(--navy-900);
}
.section-head p{
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--grey-600);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  font-weight:700;
  font-size: 15px;
  border: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color: var(--white);
  box-shadow: 0 14px 30px rgba(21,101,192,.35);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px rgba(21,101,192,.45); }
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: rgba(255,255,255,.14); transform: translateY(-3px); }
.btn-outline{
  background: transparent;
  color: var(--navy-900);
  border: 1.5px solid var(--grey-200);
}
.btn-outline:hover{ border-color: var(--blue-500); color: var(--blue-600); transform: translateY(-3px); }
.btn-sm{ padding: 11px 20px; font-size: 13.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

.pill-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.pill-tag.demo{
  background: var(--amber-500);
  color: #fff;
}

/* Scroll reveal */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-scale]{ opacity:0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal-scale].is-visible{ opacity:1; transform:none; }

.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* Scroll progress bar */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  z-index: 9999;
  transition: width .1s linear;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding: 20px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; max-width: 1360px; }
.nav-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-logo-icon{ height: 40px; width:40px; border-radius:9px; object-fit:contain; }
.nav-logo-text{
  display:flex; flex-direction:column; line-height:1.05;
  font-family: 'Exo 2', sans-serif; font-weight:800; font-size:17px;
  letter-spacing:.04em; color:#0A1A2F; white-space:nowrap;
}
.nav-logo-text em{ font-family: 'Montserrat', sans-serif; font-style:normal; font-weight:600; font-size:9px; letter-spacing:.10em; text-transform:uppercase; color: var(--blue-300); margin-top:2px; }
.footer-logo{ margin-bottom:16px; }
.footer-logo .nav-logo-text{ color:#fff; }
.nav-links{ display:flex; align-items:center; gap: 22px; flex-wrap: nowrap; }
.nav-links a{
  font-size: 13.5px;
  font-weight:600;
  color: rgba(255,255,255,.82);
  position:relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--blue-400);
  transition: right .3s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-burger{
  display:none;
  width: 44px; height:44px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-burger span{ width:20px; height:2px; background:#fff; border-radius:2px; transition: transform .3s ease, opacity .3s ease; }

.nav.scrolled{
  padding: 12px 0;
  background: rgba(6,15,31,.86);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.nav-mobile-panel{
  position: fixed; inset:0;
  background: var(--navy-950);
  z-index: 999;
  display:flex; flex-direction:column;
  padding: 110px 28px 40px;
  gap: 28px;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
}
.nav-mobile-panel.open{ transform: translateX(0); }
.nav-mobile-panel a{ font-size: 22px; font-weight:700; color:#fff; font-family: var(--font-display); }
.nav-mobile-panel .btn{ margin-top: 12px; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-actions .btn{ display:none; }
  .nav-burger{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  background: radial-gradient(ellipse 120% 80% at 15% -10%, #123258 0%, transparent 55%),
              radial-gradient(ellipse 100% 60% at 100% 0%, #0d2c4d 0%, transparent 50%),
              linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, #0c2038 100%);
  color: #fff;
  padding: 168px 0 120px;
  overflow: hidden;
  isolation: isolate;
}
.hero-grain{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, black 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.hero .wrap{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items:center;
}
.hero-copy{ max-width: 620px; }
.hero-copy h1{
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 900;
  color:#fff;
  letter-spacing:-.02em;
}
.hero-copy h1 em{
  font-style:normal;
  background: linear-gradient(100deg, var(--blue-300), var(--blue-400) 55%, #7fd4ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.hero-copy .lead{
  margin-top: 24px;
  font-size: 18px;
  line-height:1.65;
  color: rgba(255,255,255,.72);
  max-width: 540px;
}
.hero-actions{ display:flex; gap:16px; margin-top: 38px; flex-wrap:wrap; }

.hero-stats{
  margin-top: 64px;
  display:flex;
  gap: 40px;
  flex-wrap:wrap;
}
.hero-stat b{
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight:700;
  color:#fff;
  display:block;
}
.hero-stat span{
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  letter-spacing:.04em;
}

/* Visual: fleet photo + HUD chips + route svg */
.hero-visual{ position:relative; height: 560px; }
.hero-visual-card{
  position:absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-glow);
  transform: rotate(1.4deg);
}
.hero-visual-card img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05) contrast(1.02);
}
.hero-visual-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 40%, rgba(6,15,31,.75) 100%);
}
.hero-route-svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:3;
  pointer-events:none;
}
.hero-route-path{
  fill:none;
  stroke: var(--blue-400);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  filter: drop-shadow(0 0 6px rgba(41,166,246,.8));
  stroke-dashoffset: 1000;
  animation: dash-draw 3.6s var(--ease) forwards infinite;
}
@keyframes dash-draw{
  0%{ stroke-dashoffset: 500; opacity:0; }
  8%{ opacity:1; }
  60%{ stroke-dashoffset: 0; opacity:1; }
  100%{ stroke-dashoffset: -500; opacity:0; }
}
.hero-pin{
  position:absolute;
  width: 34px; height:34px;
  z-index:4;
}
.hero-pin svg{ width:100%; height:100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.hero-pin.origin{ top: 22%; left: 12%; }
.hero-pin.dest{ bottom: 20%; right: 14%; }
.hero-pin .ring{
  position:absolute; inset:-10px;
  border-radius:50%;
  border: 2px solid var(--blue-400);
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.5); opacity:.9; }
  100%{ transform:scale(2.1); opacity:0; }
}

.hud-chip{
  position:absolute;
  z-index:5;
  background: rgba(6,15,31,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #cfe8ff;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  animation: float-chip 5s ease-in-out infinite;
}
.hud-chip .dot{ width:7px; height:7px; border-radius:50%; background: var(--green-500); box-shadow:0 0 8px var(--green-500); }
.hud-chip.warn .dot{ background: var(--amber-500); box-shadow:0 0 8px var(--amber-500); }
.hud-chip.c1{ top: 12%; right: 8%; animation-delay: 0s; }
.hud-chip.c2{ bottom: 30%; left: 6%; animation-delay: .6s; }
.hud-chip.c3{ bottom: 10%; right: 26%; animation-delay: 1.2s; }
@keyframes float-chip{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}

@media (max-width: 1080px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ height: 420px; margin-top: 20px; }
}
@media (max-width: 560px){
  .hero{ padding-top: 128px; }
  .hero-stats{ gap: 26px; }
  .hud-chip{ font-size: 10.5px; padding: 8px 10px; }
}

/* ==========================================================================
   TRUST STRIP (sectores)
   ========================================================================== */
.trust-strip{
  background: var(--mist-50);
  border-bottom: 1px solid var(--grey-200);
  padding: 34px 0;
}
.trust-strip .wrap{
  display:flex;
  align-items:center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.trust-strip .ts-label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--grey-500);
  white-space:nowrap;
}
.trust-strip .ts-items{ display:flex; gap: 30px; flex-wrap:wrap; }
.trust-strip .ts-item{
  display:flex; align-items:center; gap:9px;
  font-size: 14px; font-weight:600; color: var(--navy-800);
  opacity:.85;
}
.trust-strip .ts-item svg{ width:20px; height:20px; color: var(--blue-600); flex-shrink:0; }

/* ==========================================================================
   VENTAJAS
   ========================================================================== */
.adv-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.adv-card{
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
  position:relative;
  overflow:hidden;
}
.adv-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .5s var(--ease);
}
.adv-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.adv-card:hover::before{ transform: scaleX(1); }
.adv-icon{
  width: 52px; height:52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 22px;
}
.adv-icon svg{ width:26px; height:26px; color: var(--blue-300); }
.adv-card h3{ font-size: 19px; font-weight:800; color: var(--navy-900); margin-bottom:10px; }
.adv-card p{ font-size: 14.5px; line-height:1.6; color: var(--grey-600); }
.adv-card .metric{
  margin-top: 18px;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  font-family: var(--font-mono);
  color: var(--blue-600);
  font-weight:700;
  font-size: 13px;
  background: rgba(21,101,192,.07);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

@media (max-width: 980px){ .adv-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .adv-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.how{ background: var(--navy-950); color:#fff; position:relative; overflow:hidden; }
.how::before{
  content:"";
  position:absolute; top:-20%; right:-10%;
  width:60%; height:70%;
  background: radial-gradient(circle, rgba(21,101,192,.25), transparent 70%);
  pointer-events:none;
}
.how .section-head p{ color: rgba(255,255,255,.6); }
.how .section-head h2{ color:#fff; }

.how-body{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 60px;
  align-items:center;
}
.how-steps{ display:flex; flex-direction:column; }
.how-step{
  display:flex;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  cursor:pointer;
}
.how-step:last-child{ border-bottom:none; }
.how-step .num{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--blue-400);
  font-weight:700;
  flex-shrink:0;
  padding-top: 3px;
  width: 34px;
}
.how-step h3{ font-size: 19px; font-weight:800; margin-bottom:8px; transition: color .25s ease; }
.how-step p{
  font-size: 14.5px; line-height:1.6; color: rgba(255,255,255,.55);
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .5s var(--ease), opacity .4s ease, margin .4s ease;
}
.how-step.active h3{ color: var(--blue-300); }
.how-step.active p{ max-height:120px; opacity:1; margin-top:2px; }
.how-step:not(.active) h3{ color: rgba(255,255,255,.85); }

.how-visual{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  aspect-ratio: 4/3.1;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(41,166,246,.16), transparent 55%),
    var(--navy-900);
}
.how-visual img{
  width:100%; height:100%; object-fit:contain;
  opacity:0;
  position:absolute; inset:0;
  padding: 36px;
  box-sizing: border-box;
  transition: opacity .6s var(--ease);
}
.how-visual img.active{ opacity:1; position:relative; }

@media (max-width: 980px){
  .how-body{ grid-template-columns:1fr; }
  .how-visual{ order:-1; }
}

/* ==========================================================================
   EQUIPOS / PRODUCTOS
   ========================================================================== */
.eq-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.eq-card{
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  overflow:hidden;
  background: var(--mist-50);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column;
}
.eq-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.eq-media{
  aspect-ratio: 1/.95;
  background: linear-gradient(160deg, #f8f9fb, #eceff3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position:relative;
}
.eq-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.eq-card:hover .eq-media img{ transform: scale(1.06); }
.eq-body{ padding: 22px 22px 24px; flex:1; display:flex; flex-direction:column; }
.eq-kicker{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; color: var(--blue-600); font-weight:700; text-transform:uppercase; }
.eq-body h3{ font-size: 21px; font-weight:800; margin: 6px 0 8px; color: var(--navy-900); }
.eq-body p{ font-size: 13.5px; color: var(--grey-600); line-height:1.55; flex:1; }
.eq-specs{ display:flex; flex-wrap:wrap; gap:6px; margin: 14px 0 16px; }
.eq-specs span{
  font-size: 11px; font-weight:700; color: var(--navy-800);
  background:#fff; border:1px solid var(--grey-200); padding: 4px 9px; border-radius: var(--radius-pill);
}
.eq-link{
  font-size: 13.5px; font-weight:700; color: var(--blue-600);
  display:inline-flex; align-items:center; gap:6px;
}
.eq-link svg{ width:15px; height:15px; transition: transform .3s ease; }
.eq-card:hover .eq-link svg{ transform: translateX(4px); }

@media (max-width: 980px){ .eq-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .eq-grid{ grid-template-columns: 1fr; } }

/* Modal ficha técnica */
.modal-backdrop{
  position:fixed; inset:0; background: rgba(6,15,31,.72); backdrop-filter: blur(6px);
  z-index: 2000; display:flex; align-items:center; justify-content:center; padding: 24px;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:#fff; border-radius: var(--radius-lg); max-width: 780px; width:100%;
  max-height: 88vh; overflow:auto; position:relative;
  transform: scale(.92) translateY(20px); transition: transform .35s var(--ease);
}
.modal-backdrop.open .modal-box{ transform:none; }
.modal-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background: var(--mist-50); border:1px solid var(--grey-200); display:flex; align-items:center; justify-content:center; z-index:2;
}
.modal-box img{ width:100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* ==========================================================================
   CALCULADORA DE AHORRO (IA)
   ========================================================================== */
.calc-section{
  background: linear-gradient(180deg, var(--mist-50) 0%, #fff 100%);
  position:relative;
}
.calc-frame{
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950));
  color:#fff;
  padding: 4px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.calc-inner{
  background: rgba(255,255,255,.03);
  border-radius: calc(var(--radius-lg) - 4px);
  padding: 44px;
}
.calc-top{
  display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap;
  margin-bottom: 34px;
}
.calc-top h3{ font-size: 24px; font-weight:800; }
.calc-top p{ color: rgba(255,255,255,.6); font-size:14px; margin-top:6px; max-width: 460px;}

.calc-steps-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.calc-steps-nav .step-dot{
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:12px; font-weight:700; color: rgba(255,255,255,.45);
  transition: all .3s ease;
}
.calc-steps-nav .step-dot.active{ border-color: var(--blue-400); color:#fff; background: rgba(41,166,246,.18); }
.calc-steps-nav .step-dot.done{ border-color: var(--green-500); background: var(--green-500); color:#fff; }

.calc-panel{ display:none; animation: fade-in-up .5s var(--ease); }
.calc-panel.active{ display:block; }
@keyframes fade-in-up{ from{ opacity:0; transform: translateY(14px);} to{opacity:1; transform:none;} }

.calc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .calc-grid{ grid-template-columns: 1fr; } }

/* Upload zone */
.upload-zone{
  border: 1.5px dashed rgba(255,255,255,.28);
  border-radius: var(--radius-md);
  padding: 40px 24px;
  text-align:center;
  cursor:pointer;
  transition: border-color .3s ease, background .3s ease;
  position:relative;
}
.upload-zone:hover, .upload-zone.dragover{ border-color: var(--blue-400); background: rgba(41,166,246,.06); }
.upload-zone svg{ width:40px; height:40px; color: var(--blue-400); margin-bottom:14px; }
.upload-zone h4{ font-size:16px; font-weight:700; margin-bottom:6px; }
.upload-zone p{ font-size: 13px; color: rgba(255,255,255,.5); }
.upload-zone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-preview{ margin-top:18px; display:none; }
.upload-preview.show{ display:block; }
.upload-preview img, .upload-preview canvas{ max-height: 220px; border-radius: 12px; margin: 0 auto; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.upload-preview .file-name{ margin-top:10px; font-family: var(--font-mono); font-size:12px; color: rgba(255,255,255,.6); word-break: break-all;}

.or-divider{ display:flex; align-items:center; gap:14px; margin: 22px 0; color: rgba(255,255,255,.4); font-size:12.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing:.08em;}
.or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background: rgba(255,255,255,.14); }

.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:13px; font-weight:600; color: rgba(255,255,255,.75); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 13px 16px;
  color:#fff;
  font-size: 14.5px;
  transition: border-color .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.35); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--blue-400); background: rgba(255,255,255,.09); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field-hint{ font-size:12px; color: rgba(255,255,255,.4); margin-top:6px; }

.extract-banner{
  display:none;
  align-items:center; gap:12px;
  background: rgba(31,169,113,.12);
  border: 1px solid rgba(31,169,113,.35);
  color: #8ff0c6;
  padding: 12px 16px; border-radius: 12px; font-size: 13px; margin-bottom: 20px;
}
.extract-banner.show{ display:flex; }
.extract-banner svg{ width:18px; height:18px; flex-shrink:0; }

.ai-loading{ display:none; align-items:center; gap:12px; font-size:13.5px; color: rgba(255,255,255,.7); margin: 14px 0; }
.ai-loading.show{ display:flex; }
.ai-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color: var(--blue-400); animation: spin 0.8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.calc-map{
  border-radius: var(--radius-md);
  overflow:hidden;
  min-height: 320px;
  background: linear-gradient(160deg, #0d223c, #0a1a2f);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.calc-map .map-placeholder{ text-align:center; padding: 30px; color: rgba(255,255,255,.5); font-size:13.5px; max-width:280px; }
.calc-map .map-placeholder svg{ width:34px; height:34px; margin: 0 auto 14px; color: var(--blue-400); }
#gmap-canvas{ width:100%; height:100%; min-height:320px; }

.route-compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.route-compare .rc-card{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px 16px; }
.route-compare .rc-card .rc-label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color: rgba(255,255,255,.45); }
.route-compare .rc-card .rc-value{ font-family:var(--font-mono); font-size:22px; font-weight:700; margin-top:6px; }
.route-compare .rc-card.diff .rc-value{ color: var(--blue-300); }

.calc-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; gap:16px; flex-wrap:wrap; }
.calc-actions .back-link{ font-size:13.5px; color: rgba(255,255,255,.5); font-weight:600; }
.calc-actions .back-link:hover{ color:#fff; }

/* Resultado final */
.result-hero{ text-align:center; padding: 10px 0 20px; }
.result-hero .eyebrow{ justify-content:center; }
.result-numbers{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin: 30px 0 8px;
}
.result-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align:center;
}
.result-card .rc-num{
  font-family: var(--font-mono); font-weight:800;
  font-size: clamp(28px,4vw,40px);
  background: linear-gradient(100deg, #8ff0c6, var(--green-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.result-card.payback .rc-num{
  background: linear-gradient(100deg, var(--blue-300), var(--blue-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.result-card .rc-lbl{ font-size:12.5px; color: rgba(255,255,255,.55); margin-top:8px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

.result-detail{
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-top: 22px;
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
}
.result-detail b{ color:#fff; }
.result-disclaimer{
  margin-top:18px;
  font-size:12px;
  color: rgba(255,255,255,.4);
  display:flex; gap:8px; align-items:flex-start;
  line-height:1.5;
}
.result-disclaimer svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color: var(--amber-500); }

.email-gate{
  max-width: 440px; margin: 0 auto; text-align:center;
}
.email-gate h4{ font-size:20px; font-weight:800; margin-bottom:10px; }
.email-gate p{ font-size:14px; color: rgba(255,255,255,.6); margin-bottom:22px; }
.email-gate form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.email-gate input{ flex:1; min-width:220px; }

/* ==========================================================================
   TESTIMONIOS
   ========================================================================== */
.testi-wrap{ position:relative; }
.testi-track{
  display:flex;
  gap: 22px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-card{
  scroll-snap-align:start;
  flex: 0 0 auto;
  width: min(400px, 84vw);
  background: var(--mist-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: 30px 28px;
  position:relative;
}
.testi-card .demo-badge{
  position:absolute; top:20px; right:20px;
}
.testi-stars{ display:flex; gap:3px; margin-bottom:18px; }
.testi-stars svg{ width:16px; height:16px; color: var(--amber-500); }
.testi-card p.quote{ font-size: 15px; line-height:1.65; color: var(--navy-800); margin-bottom: 24px; min-height: 116px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue-500), var(--navy-700));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:15px;
  flex-shrink:0;
}
.testi-person .tp-name{ font-weight:800; font-size: 14.5px; color: var(--navy-900); }
.testi-person .tp-role{ font-size: 12.5px; color: var(--grey-500); }
.testi-nav{ display:flex; gap:10px; margin-top: 28px; justify-content:center; }
.testi-nav button{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--grey-200); background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s ease;
}
.testi-nav button:hover{ background: var(--navy-900); color:#fff; border-color: var(--navy-900); }
.testi-nav svg{ width:18px; height:18px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ max-width: 820px; margin: 0 auto; }
.faq-item{
  border-bottom: 1px solid var(--grey-200);
}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 24px 4px;
  background:none; border:none;
  text-align:left;
  font-family: var(--font-display);
  font-size: 17px; font-weight:700; color: var(--navy-900);
}
.faq-q .plus{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--grey-200);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position:relative; transition: transform .35s var(--ease), border-color .3s ease;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background: var(--navy-900); transition: opacity .25s ease;
}
.faq-q .plus::before{ width:12px; height:2px; }
.faq-q .plus::after{ width:2px; height:12px; }
.faq-item.open .faq-q .plus{ transform: rotate(135deg); border-color: var(--blue-500); }
.faq-a{
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .5s var(--ease), opacity .4s ease, padding .4s ease;
  padding: 0 4px;
}
.faq-item.open .faq-a{ max-height: 320px; opacity:1; padding: 0 4px 26px; }
.faq-a p{ font-size:14.5px; line-height:1.7; color: var(--grey-600); max-width: 700px; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-section{ background: var(--mist-50); }
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 50px; }
@media (max-width: 940px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-info-card{
  background: var(--navy-900);
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color:#fff;
  border-radius: var(--radius-lg);
  padding: 40px 34px;
}
.contact-info-card h3{ font-size: 24px; font-weight:800; margin-bottom: 14px; }
.contact-info-card > p{ color: rgba(255,255,255,.6); font-size:14.5px; line-height:1.6; margin-bottom: 30px; }
.contact-line{ display:flex; gap:14px; align-items:flex-start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1); }
.contact-line:first-of-type{ border-top:none; }
.contact-line .ci-icon{
  width:40px; height:40px; border-radius:11px; background: rgba(41,166,246,.14);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-line .ci-icon svg{ width:19px; height:19px; color: var(--blue-300); }
.contact-line b{ display:block; font-size:14px; margin-bottom:2px; }
.contact-line span{ font-size:13.5px; color: rgba(255,255,255,.55); }
.contact-social{ display:flex; gap:10px; margin-top: 30px; }
.contact-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; transition: all .25s ease;
}
.contact-social a:hover{ background: var(--blue-500); border-color: var(--blue-500); }
.contact-social svg{ width:17px; height:17px; }

.contact-form-card{
  background:#fff; border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow-md);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13px; font-weight:700; color: var(--navy-800); margin-bottom:7px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding: 13px 15px; border-radius:12px; border: 1.5px solid var(--grey-200);
  font-size:14.5px; color: var(--navy-900); transition: border-color .25s ease;
  background: #fbfcfd;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--blue-500); outline:none; background:#fff; }
.form-field textarea{ resize:vertical; min-height:100px; }
.form-note{ font-size: 12px; color: var(--grey-500); margin-top:16px; line-height:1.6; }
.form-success{
  display:none; align-items:center; gap:12px; background: var(--green-100); color: #146c48;
  padding:14px 18px; border-radius:12px; font-size:13.5px; font-weight:600; margin-bottom:18px;
}
.form-success.show{ display:flex; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--navy-950); color: rgba(255,255,255,.6); padding: 70px 0 30px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 820px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand .nav-logo-icon{ margin-bottom:0; }
.footer-brand p{ font-size:13.5px; line-height:1.7; max-width: 300px; }
.footer-col h4{ color:#fff; font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:14px; transition: color .2s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:14px; font-size:12.5px; }

/* ==========================================================================
   CHAT WIDGET (Asistente IA)
   ========================================================================== */
.chat-fab{
  position:fixed; bottom:26px; right:26px; z-index: 1500;
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px rgba(21,101,192,.45);
  border:none; color:#fff;
  transition: transform .3s var(--ease);
}
.chat-fab:hover{ transform: scale(1.08); }
.chat-fab svg{ width:26px; height:26px; }
.chat-fab .chat-fab-badge{
  position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
  background: var(--red-500); border:2px solid var(--navy-950);
}
.chat-fab.hide-badge .chat-fab-badge{ display:none; }

.chat-panel{
  position:fixed; bottom: 26px; right:26px; z-index:1600;
  width: 388px; max-width: calc(100vw - 32px);
  height: min(600px, 78vh);
  background:#fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateY(24px) scale(.96); opacity:0; pointer-events:none;
  transition: transform .35s var(--ease), opacity .3s ease;
}
.chat-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.chat-head{
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  color:#fff; padding: 18px 20px; display:flex; align-items:center; gap:12px;
}
.chat-head .ch-avatar{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-head .ch-avatar svg{ width:20px; height:20px; }
.chat-head .ch-info b{ font-size:14.5px; display:block; }
.chat-head .ch-info span{ font-size:12px; color: var(--green-500); display:flex; align-items:center; gap:5px; }
.chat-head .ch-info span::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--green-500); }
.chat-head .ch-close{ margin-left:auto; background:none; border:none; color:#fff; opacity:.7; }
.chat-head .ch-close svg{ width:20px; height:20px; }
.chat-head .ch-close:hover{ opacity:1; }

.chat-body{ flex:1; overflow-y:auto; padding: 20px; display:flex; flex-direction:column; gap:14px; background: var(--mist-50); }
.chat-msg{ max-width: 84%; font-size: 13.8px; line-height:1.55; padding: 12px 15px; border-radius: 16px; }
.chat-msg.bot{ background:#fff; border: 1px solid var(--grey-200); align-self:flex-start; border-bottom-left-radius:4px; color: var(--navy-900);}
.chat-msg.user{ background: var(--blue-600); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-msg a{ color: var(--blue-600); font-weight:700; text-decoration:underline; }
.chat-msg.user a{ color:#fff; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 4px; }
.chat-quick button{
  font-size:12px; font-weight:600; padding: 8px 13px; border-radius: var(--radius-pill);
  background:#fff; border:1px solid var(--grey-200); color: var(--navy-800);
  transition: all .2s ease;
}
.chat-quick button:hover{ background: var(--blue-600); color:#fff; border-color: var(--blue-600); }
.chat-typing{ display:flex; gap:5px; align-self:flex-start; padding: 14px 16px; background:#fff; border:1px solid var(--grey-200); border-radius:16px; border-bottom-left-radius:4px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background: var(--grey-300); animation: typing-bounce 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing-bounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-5px); opacity:1; } }

.chat-input-row{ padding: 14px; border-top:1px solid var(--grey-200); display:flex; gap:10px; background:#fff; }
.chat-input-row input{
  flex:1; border: 1.5px solid var(--grey-200); border-radius: var(--radius-pill); padding: 12px 18px; font-size:13.8px;
}
.chat-input-row input:focus{ outline:none; border-color: var(--blue-500); }
.chat-input-row button{
  width:42px; height:42px; border-radius:50%; background: var(--blue-600); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .2s ease;
}
.chat-input-row button:hover{ background: var(--navy-900); }
.chat-input-row button svg{ width:18px; height:18px; }

@media (max-width: 460px){
  .chat-panel{ right:16px; bottom:96px; left:16px; width:auto; }
  .chat-fab{ right:16px; bottom:16px; }
}

/* Utility icon svg default */
.icon{ width:20px; height:20px; }

/* Bloquea el scroll del body cuando el menú móvil o un modal están abiertos */
body.menu-open{ overflow: hidden; }

/* ==========================================================================
   CONSULTOR DE RIESGO B+
   ========================================================================== */

/* ---------- Intro ---------- */
.risk-intro{ text-align:center; max-width: 720px; margin: 0 auto; padding: 12px 0 4px; }
.risk-intro-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue-300); background: rgba(41,166,246,.1);
  border:1px solid rgba(41,166,246,.28); border-radius:100px; padding:7px 14px; margin-bottom:22px;
}
.risk-intro-badge .icon{ width:15px; height:15px; }
.risk-intro h3{ font-size: clamp(24px,3.4vw,34px); line-height:1.15; margin-bottom:14px; color:#fff; }
.risk-intro > p{ color: rgba(255,255,255,.72); font-size:15.5px; line-height:1.65; margin-bottom:30px; }
.risk-intro-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-bottom:30px; text-align:left;
}
.risk-intro-item{
  display:flex; gap:12px; align-items:flex-start;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md); padding:16px;
}
.risk-intro-item .icon{ color: var(--blue-400); flex-shrink:0; margin-top:2px; }
.risk-intro-item b{ display:block; font-size:14px; color:#fff; margin-bottom:3px; }
.risk-intro-item span{ font-size:12.5px; color: rgba(255,255,255,.6); line-height:1.45; }
.risk-intro-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.risk-intro-note{
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  font-size:12.5px; color: rgba(255,255,255,.5); line-height:1.55;
  border-top:1px solid rgba(255,255,255,.09); padding-top:20px;
}
.risk-intro-note .icon{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

/* ---------- Pregunta ---------- */
.risk-q{ max-width: 680px; margin:0 auto; }
.risk-topbar{ margin-bottom:28px; }
.risk-progress{ height:5px; border-radius:100px; background: rgba(255,255,255,.1); overflow:hidden; }
.risk-progress span{
  display:block; height:100%; border-radius:100px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  transition: width .45s var(--ease);
}
.risk-progress-meta{
  display:flex; justify-content:space-between; align-items:center; margin-top:10px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color: rgba(255,255,255,.45);
}
.risk-module{ color: var(--blue-300); }
.risk-scenario-tag{
  display:inline-block; font-size:12px; font-weight:600; color: var(--blue-300);
  background: rgba(41,166,246,.1); border:1px solid rgba(41,166,246,.25);
  border-radius:100px; padding:5px 12px; margin-bottom:14px;
}
.risk-question{
  font-size: clamp(20px,2.8vw,27px); line-height:1.28; color:#fff; margin-bottom:10px;
  letter-spacing:-.01em;
}
.risk-hint{ font-size:13.5px; color: rgba(255,255,255,.55); margin-bottom:12px; }
.risk-why{
  display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  font-family: var(--font-body); font-size:13px; font-weight:600; color: var(--blue-300);
  padding:4px 0; margin-bottom:6px;
}
.risk-why .icon{ width:15px; height:15px; }
.risk-why:hover{ color: var(--blue-400); }
.risk-why-body{
  background: rgba(41,166,246,.07); border-left:3px solid var(--blue-500);
  border-radius: 0 10px 10px 0; padding:13px 16px; margin-bottom:8px;
}
.risk-why-body p{ font-size:13.5px; color: rgba(255,255,255,.72); line-height:1.6; }

.risk-options{ display:grid; gap:10px; margin:22px 0 26px; }
.risk-option{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  background: rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md); padding:15px 18px;
  font-family: var(--font-body); font-size:15px; color: rgba(255,255,255,.88);
  transition: all .2s var(--ease);
}
.risk-option:hover{ background: rgba(41,166,246,.09); border-color: rgba(41,166,246,.45); transform: translateX(3px); }
.risk-option-mark{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.28); position:relative; transition: all .2s var(--ease);
}
.risk-options.is-multi .risk-option-mark{ border-radius:6px; }
.risk-option.selected{ background: rgba(41,166,246,.14); border-color: var(--blue-400); }
.risk-option.selected .risk-option-mark{ border-color: var(--blue-400); background: var(--blue-500); }
.risk-option.selected .risk-option-mark::after{
  content:''; position:absolute; inset:0; margin:auto; width:7px; height:7px;
  border-radius:50%; background:#fff;
}
.risk-options.is-multi .risk-option.selected .risk-option-mark::after{
  width:11px; height:6px; border-radius:0; background:none;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform: rotate(-45deg) translate(1px,-2px);
}
.risk-options.shake{ animation: shakeX .45s ease; }
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

.risk-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.risk-actions-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.risk-back, .risk-unsure, .risk-save{
  background:none; border:none; cursor:pointer; font-family: var(--font-body);
  font-size:13.5px; font-weight:600; color: rgba(255,255,255,.55); padding:8px 0;
  transition: color .2s var(--ease);
}
.risk-back:hover, .risk-unsure:hover{ color:#fff; }
.risk-back:disabled{ opacity:.3; cursor:not-allowed; }
.risk-unsure{
  border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:8px 16px;
}
.risk-unsure:hover{ border-color: rgba(255,255,255,.4); }
.risk-save{
  display:block; margin:26px auto 0; font-size:12.5px; color: rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.07); padding-top:18px; width:100%; text-align:center;
}
.risk-save:hover{ color: rgba(255,255,255,.7); }

/* ---------- Gate de contacto ---------- */
.risk-gate{ max-width: 520px; margin:0 auto; text-align:center; }
.risk-gate-icon{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; background: rgba(31,169,113,.14);
  border:1px solid rgba(31,169,113,.35); color: var(--green-500);
}
.risk-gate h3{ font-size:26px; color:#fff; margin-bottom:12px; }
.risk-gate > p{ color: rgba(255,255,255,.7); font-size:14.5px; line-height:1.65; margin-bottom:26px; }
.risk-gate-form{ display:grid; gap:14px; text-align:left; }
.risk-gate-note{ font-size:12px; color: rgba(255,255,255,.45); line-height:1.55; text-align:center; margin-top:4px; }

/* ---------- Resultado ---------- */
.risk-result{ display:grid; gap:30px; }
.risk-score{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.risk-gauge{ position:relative; width:200px; flex-shrink:0; }
.risk-gauge svg{ width:100%; display:block; }
.risk-gauge-value{
  position:absolute; left:0; right:0; bottom:2px; text-align:center;
  font-family: var(--font-mono);
}
.risk-gauge-value b{ font-size:38px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.risk-gauge-value span{ font-size:14px; color: rgba(255,255,255,.45); }
.risk-score-copy{ flex:1; min-width:260px; }
.risk-eyebrow{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--blue-300); margin-bottom:8px;
}
.risk-score-copy h3{ font-size: clamp(19px,2.4vw,25px); line-height:1.3; color:#fff; margin-bottom:12px; }
.risk-confidence{
  display:flex; align-items:center; gap:8px; font-size:13px; color: rgba(255,255,255,.6); flex-wrap:wrap;
}
.risk-confidence b{ color:#fff; }

.risk-narrative{
  background: rgba(41,166,246,.08); border:1px solid rgba(41,166,246,.22);
  border-radius: var(--radius-md); padding:20px 22px;
}
.risk-narrative h4{
  display:flex; align-items:center; gap:8px; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.06em; color: var(--blue-300); margin-bottom:9px;
}
.risk-narrative p{ font-size:15px; line-height:1.65; color: rgba(255,255,255,.85); }

.risk-block{
  border-top:1px solid rgba(255,255,255,.1); padding-top:26px;
}
.risk-block h4{
  display:flex; align-items:center; gap:9px; font-size:16.5px; color:#fff; margin-bottom:14px;
}
.risk-block h4 .icon{ color: var(--blue-400); }
.risk-note-inline{ font-size:13px; color: rgba(255,255,255,.55); line-height:1.6; margin-bottom:16px; }

.risk-list{ display:grid; gap:10px; list-style:none; padding:0; }
.risk-list li{
  position:relative; padding-left:26px; font-size:14.5px; line-height:1.6; color: rgba(255,255,255,.8);
}
.risk-list li::before{
  content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%;
}
.risk-list.good li::before{ background: var(--green-500); }
.risk-list.gap li::before{ background: var(--amber-500); }
.risk-list.crit li::before{ background: var(--blue-400); }
.risk-list b{ color:#fff; }

.risk-scenarios{ display:grid; gap:14px; }
.risk-scenario{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md); padding:20px;
}
.risk-scenario-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.risk-rank{
  width:30px; height:30px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  background: rgba(41,166,246,.16); color: var(--blue-300);
  font-family: var(--font-mono); font-weight:700; font-size:14px;
}
.risk-scenario-head h5{ font-size:16.5px; color:#fff; margin-bottom:6px; }
.risk-badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-radius:100px; padding:4px 11px;
}
.risk-badge.bajo{ background: rgba(31,169,113,.16); color:#6fe0ae; }
.risk-badge.moderado{ background: rgba(232,183,30,.16); color:#f0d17a; }
.risk-badge.alto{ background: rgba(232,135,30,.18); color:#f4b070; }
.risk-badge.critico{ background: rgba(228,62,62,.18); color:#f58b8b; }
.risk-scenario-why{ font-size:14px; line-height:1.6; color: rgba(255,255,255,.75); margin-bottom:14px; }
.risk-scenario-why b{ color:#fff; }
.risk-meters{
  display:grid; grid-template-columns: repeat(4,1fr); gap:10px;
  border-top:1px solid rgba(255,255,255,.08); padding-top:14px;
}
.risk-meters div{ display:flex; flex-direction:column; gap:3px; }
.risk-meters span{
  font-family: var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color: rgba(255,255,255,.42);
}
.risk-meters b{ font-size:13px; color:#fff; }

.risk-plan{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.risk-plan-col{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md); padding:18px;
}
.risk-plan-tag{
  display:inline-block; font-family: var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; border-radius:100px; padding:5px 11px; margin-bottom:12px;
}
.risk-plan-tag.now{ background: rgba(228,62,62,.16); color:#f58b8b; }
.risk-plan-tag.soon{ background: rgba(232,135,30,.16); color:#f4b070; }
.risk-plan-tag.later{ background: rgba(41,166,246,.16); color: var(--blue-300); }
.risk-plan-col ul{ display:grid; gap:9px; list-style:none; padding:0; }
.risk-plan-col li{
  font-size:13.5px; line-height:1.55; color: rgba(255,255,255,.78);
  padding-left:16px; position:relative;
}
.risk-plan-col li::before{
  content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%;
  background: rgba(255,255,255,.35);
}

.risk-bridge{
  background: rgba(41,166,246,.06); border:1px solid rgba(41,166,246,.2);
  border-radius: var(--radius-md); padding:24px; border-top:1px solid rgba(41,166,246,.2);
}
.risk-recs{ display:grid; gap:12px; margin-bottom:20px; }
.risk-rec{
  background: rgba(255,255,255,.05); border-radius:12px; padding:16px 18px;
}
.risk-rec b{ display:block; font-size:15px; color:#fff; margin-bottom:5px; }
.risk-rec-gap{
  display:block; font-size:11.5px; font-family: var(--font-mono); text-transform:uppercase;
  letter-spacing:.04em; color: var(--amber-500); margin-bottom:8px;
}
.risk-rec p{ font-size:13.5px; line-height:1.6; color: rgba(255,255,255,.72); }

.risk-disclaimer{
  display:flex; gap:12px; align-items:flex-start;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md); padding:18px 20px;
}
.risk-disclaimer .icon{ color: rgba(255,255,255,.4); flex-shrink:0; margin-top:2px; }
.risk-disclaimer p{ font-size:12.5px; line-height:1.65; color: rgba(255,255,255,.55); }
.risk-disclaimer b{ color: rgba(255,255,255,.8); }

.risk-result-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- Franja de metodología (debajo del marco) ---------- */
.risk-method{
  display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:26px;
}
.risk-method-item{
  display:flex; gap:13px; align-items:flex-start;
  background:#fff; border:1px solid var(--grey-200);
  border-radius: var(--radius-md); padding:20px;
}
.risk-method-item .icon{ color: var(--blue-600); flex-shrink:0; margin-top:2px; }
.risk-method-item b{ display:block; font-size:14.5px; color: var(--navy-900); margin-bottom:4px; }
.risk-method-item span{ font-size:13px; color: var(--grey-600); line-height:1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .risk-intro-grid{ grid-template-columns:1fr; }
  .risk-plan{ grid-template-columns:1fr; }
  .risk-method{ grid-template-columns:1fr; }
  .risk-meters{ grid-template-columns: repeat(2,1fr); }
  .risk-score{ gap:20px; justify-content:center; text-align:center; }
  .risk-score-copy{ text-align:center; }
  .risk-confidence{ justify-content:center; }
}
@media (max-width: 560px){
  .calc-inner{ padding: 26px 20px; }
  .risk-gauge{ width:170px; margin:0 auto; }
  .risk-option{ font-size:14.5px; padding:14px 15px; }
  .risk-actions{ gap:10px; }
  .risk-actions-right{ width:100%; justify-content:space-between; }
}

/* ---------- Impresión del diagnóstico ---------- */
@media print{
  .nav, .footer, .chat-fab, .chat-panel, .risk-result-actions, .scroll-progress{ display:none !important; }
  body{ background:#fff; }
  .calc-frame, .calc-inner{ background:#fff !important; color:#111 !important; box-shadow:none; }
  .risk-result, .risk-block h4, .risk-scenario-head h5, .risk-gauge-value b{ color:#111 !important; }
  .risk-list li, .risk-scenario-why, .risk-plan-col li, .risk-disclaimer p{ color:#333 !important; }
}