/* ============================================================
   FOVIM · Crédito de vivienda para el magisterio — SEG Guanajuato
   Hoja de estilo (autocontenida, sin fuentes externas).
   Identidad: verde pino institucional + ámbar (acción).
   ============================================================ */

:root{
  --ink:#101d2e; --ink-2:#3a4658; --ink-3:#5d6676;
  --paper:#f2f6fc; --surface:#ffffff; --surface-2:#eef2f9;
  --primary:#14488c; --primary-700:#0f3568; --primary-600:#1c5aa8;
  --primary-050:#eaf1fb; --primary-100:#d3e3f5;
  --accent:#e8912b; --accent-600:#c9791c; --accent-050:#fbeed9;
  --line:#d8e2ef; --line-2:#c4d2e4;
  --danger:#b3261e; --danger-bg:#fbeae8;
  --warn:#8a5a00; --warn-bg:#fbf1dd;
  --ok:#1e6b4f; --ok-bg:#e4f2ec;
  --radius:14px; --radius-sm:9px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,29,46,.06), 0 2px 6px rgba(16,29,46,.05);
  --shadow-md:0 6px 20px rgba(20,72,140,.10), 0 2px 6px rgba(16,29,46,.06);
  --shadow-lg:0 24px 60px rgba(15,53,104,.20);
  --sans:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif:Georgia, "Times New Roman", "Iowan Old Style", serif;
  --maxw:1000px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }

body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.15; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--primary-600)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

.mono-num{font-variant-numeric:tabular-nums}
.in{max-width:var(--maxw); margin:0 auto; padding:0 26px}

.skip{position:absolute; left:-999px; top:0; background:var(--primary); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:200}
.skip:focus{left:0}

/* ---------------- botones ---------------- */
.btn{font-family:var(--sans); font-weight:700; font-size:1rem; border-radius:10px; padding:14px 22px; border:2px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; line-height:1; transition:transform .05s ease, background .15s ease; min-height:48px}
.btn svg{width:18px; height:18px; flex-shrink:0}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#241300; box-shadow:0 2px 0 var(--accent-600)}
.btn-primary:hover{background:#f19c39}
.btn-secondary{background:var(--primary); color:#fff}
.btn-secondary:hover{background:var(--primary-700)}
.btn-ghost{background:transparent; color:var(--primary-700); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--primary-050); border-color:var(--primary-100)}
.btn-lg{font-size:1.06rem; padding:16px 26px}
.btn-block{width:100%}
.btn-on-dark{color:#eaf1fb; border-color:rgba(255,255,255,.4)}
.btn-on-dark:hover{background:rgba(255,255,255,.1)}

.icon-badge{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--primary-050); color:var(--primary); flex-shrink:0}
.icon-badge svg{width:26px; height:26px}
.icon-badge.amber{background:var(--accent-050); color:var(--accent-600)}

/* ---------------- encabezado ---------------- */
.site-header{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100}
.site-header .in{display:flex; align-items:center; gap:14px; padding:14px 26px}
.logo{display:flex; align-items:center; gap:11px; font-weight:800; color:var(--ink); text-decoration:none}
.logo .dot{width:40px; height:40px; border-radius:10px; background:var(--primary); color:#fff; display:grid; place-items:center}
.logo .dot svg{width:22px; height:22px}
.logo b{font-size:1.1rem; line-height:1.1}
.logo small{display:block; font-weight:600; font-size:.72rem; color:var(--ink-3)}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.site-nav a.navlink{font-size:.88rem; font-weight:600; color:var(--ink-2); text-decoration:none; padding:9px 12px; border-radius:8px}
.site-nav a.navlink:hover{background:var(--surface-2); color:var(--ink)}
.nav-toggle{display:none; margin-left:auto; background:#fff; border:1px solid var(--line-2); border-radius:9px; padding:10px 14px; font-weight:700; font-family:var(--sans); align-items:center; gap:9px; cursor:pointer; min-height:44px}
.nav-toggle svg{width:20px; height:20px}

/* ---------------- héroe (split premium claro 2026) ---------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; color:var(--ink);
  padding-bottom:clamp(40px,5vw,60px);
  background:
    radial-gradient(120% 90% at 90% 0%, #e8f1fb 0%, rgba(230,242,236,0) 52%),
    linear-gradient(180deg,#f7fafe 0%,#eef4fc 100%);
}
/* fondo decorativo (formas orgánicas + puntos) */
.hero__bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero__blob{position:absolute; border-radius:50%}
.hero__blob--mint{width:min(52vw,700px); aspect-ratio:1; right:2%; top:-14%;
  background:radial-gradient(circle at 42% 46%, #c6dcf3 0%, #dbe8f7 54%, rgba(220,239,231,0) 70%)}
.hero__blob--ring{width:300px; aspect-ratio:1; left:-120px; bottom:60px; border:2px solid #d6e4f5; opacity:.5}
.hero__dots{position:absolute; left:16px; top:30%; width:120px; height:120px; opacity:.55;
  background-image:radial-gradient(#b8cde8 1.7px, transparent 1.7px); background-size:15px 15px;
  -webkit-mask-image:radial-gradient(circle at 30% 30%, #000, transparent 70%);
          mask-image:radial-gradient(circle at 30% 30%, #000, transparent 70%)}

/* franja verde inferior */
.hero__floor{position:absolute; left:0; right:0; bottom:0; height:clamp(50px,6vw,84px); z-index:0;
  background:linear-gradient(180deg,#14488c,#0f3568); border-radius:36px 36px 0 0}

/* área superior: foto absoluta a la derecha + contenido a la izquierda */
.hero__top{position:relative; z-index:2; min-height:clamp(440px,42vw,560px)}
.hero__photo{position:absolute; top:0; right:0; bottom:0; width:min(52%,720px); margin:0; z-index:1;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%)}
.hero__photo img{width:100%; height:100%; object-fit:cover; object-position:50% 24%}

.hero__container{position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,44px)}
.hero__copy{max-width:min(54%,560px); padding:clamp(42px,6vw,80px) 0 clamp(30px,4vw,48px)}

.hero__badge{display:inline-flex; align-items:center; gap:9px; background:#e9f1fb; border:1px solid #d3e3f2;
  color:var(--primary-700); font-family:var(--sans); font-weight:800; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  padding:9px 16px; border-radius:999px; box-shadow:0 2px 6px rgba(20,72,140,.07)}
.hero__badge svg{width:17px; height:17px; color:var(--primary)}
.hero__title{font-family:var(--serif); font-weight:800; color:#122f5c; font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.12; letter-spacing:-.015em; margin:20px 0 0; text-wrap:balance; text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hero__accent{color:var(--accent)}
.hero__lede{margin-top:20px; font-size:clamp(1.02rem,1.4vw,1.16rem); line-height:1.55; color:#47566c; max-width:40ch}
.hero__lede strong{color:var(--primary); font-weight:700}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}

/* botones premium con ripple + flecha animada */
.btn-cta{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px; font-family:var(--sans);
  font-weight:800; font-size:1.02rem; padding:16px 26px; border-radius:14px; text-decoration:none; cursor:pointer;
  border:2px solid transparent; min-height:54px;
  transition:transform .3s ease-in-out, box-shadow .3s ease-in-out, background .3s ease, border-color .3s ease}
.btn-cta svg{width:19px; height:19px; flex-shrink:0}
.btn-cta__arrow{transition:transform .3s ease}
.btn-cta::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.55); transform:translate(-50%,-50%) scale(0); opacity:0}
.btn-cta:active::after{transform:translate(-50%,-50%) scale(34); opacity:0; transition:transform .5s ease-out, opacity .6s ease-out}
.btn-cta--primary{background:linear-gradient(180deg,#f5a33d,#e88a1f); color:#fff;
  box-shadow:0 12px 26px rgba(224,125,18,.34), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-cta--primary:hover{transform:translateY(-3px); box-shadow:0 18px 38px rgba(224,125,18,.44), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-cta--primary:hover .btn-cta__arrow{transform:translateX(5px)}
.btn-cta--ghost{background:rgba(255,255,255,.7); color:var(--primary-700); border-color:#cfdef2; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.btn-cta--ghost:hover{transform:translateY(-3px); border-color:var(--primary); background:#fff; box-shadow:0 12px 26px rgba(20,72,140,.15)}

/* Tarjeta minimalista "En resumen" (blanco sólido) */
.hero__summary{position:absolute; z-index:4; top:clamp(24px,5vw,52px); right:clamp(20px,4vw,44px); width:min(280px,42%);
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 18px;
  box-shadow:0 24px 50px rgba(20,72,140,.15), 0 4px 12px rgba(20,72,140,.06);
  animation:hero-float 6s ease-in-out infinite}
.hero__summary-head{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:800; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--primary-700); padding-bottom:12px; border-bottom:1px solid var(--line)}
.hero__summary-ic{width:32px; height:32px; border-radius:9px; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex-shrink:0}
.hero__summary-ic svg{width:17px; height:17px}
.hero__summary ul{list-style:none; margin:0; padding:5px 0 0}
.hero__summary li{display:flex; align-items:center; gap:11px; padding:10px 0; font-size:.88rem; font-weight:600; color:#2e3d54; border-bottom:1px solid var(--line); line-height:1.25}
.hero__summary li:last-child{border-bottom:0}
.chk{width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; flex-shrink:0}
.chk svg{width:14px; height:14px}

/* Banda flotante de beneficios */
.hero__band-wrap{position:relative; z-index:5; max-width:1180px; margin:clamp(-48px,-4vw,-28px) auto 0; padding:0 clamp(20px,4vw,44px)}
.hero__band{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 46px rgba(20,72,140,.12);
  display:grid; grid-template-columns:repeat(4,1fr)}
.hero__band-item{display:flex; align-items:center; gap:14px; padding:18px 18px; border-right:1px solid var(--line)}
.hero__band-item:last-child{border-right:0}
.hero__band-ic{width:44px; height:44px; border-radius:12px; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex-shrink:0; transition:transform .3s ease}
.hero__band-item:hover .hero__band-ic{transform:scale(1.08)}
.hero__band-ic svg{width:23px; height:23px}
.hero__band-tx{font-size:.88rem; font-weight:700; color:#33465e; line-height:1.25}

/* animaciones (fade-up en carga + float) */
@keyframes hero-fade{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
@keyframes hero-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.hero__badge{animation:hero-fade .6s .05s both ease-out}
.hero__title{animation:hero-fade .7s .12s both ease-out}
.hero__lede{animation:hero-fade .7s .2s both ease-out}
.hero__cta{animation:hero-fade .7s .28s both ease-out}
.hero__photo{animation:hero-fade .9s .3s both ease-out}
.hero__band-wrap{animation:hero-fade .8s .46s both ease-out}

/* responsive del héroe */
@media (max-width:900px){
  .hero__top{display:flex; flex-direction:column; min-height:0}
  .hero__container{order:0}
  .hero__photo{order:1; position:relative; width:100%; height:auto; aspect-ratio:16/10; margin-top:6px;
    -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 80%, transparent 100%)}
  .hero__photo img{object-position:50% 28%}
  .hero__copy{max-width:none; padding:clamp(28px,6vw,44px) 0 6px}
  .hero__summary{order:2; position:relative; top:auto; right:auto; width:auto; max-width:360px; margin:14px auto 0 0; animation:none}
  .hero__band-wrap{margin-top:clamp(18px,4vw,30px)}
  .hero__floor{display:none}
}
@media (max-width:760px){
  .hero__band{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
  .hero__band-item{flex:0 0 210px; scroll-snap-align:start}
}
@media (max-width:520px){
  .hero__cta{flex-direction:column; align-items:stretch}
  .btn-cta{justify-content:center}
}

/* ---------------- secciones ---------------- */
.section{padding:56px 0; position:relative; scroll-margin-top:76px}
.section.tint{background:var(--paper)}
.section--dark{background:linear-gradient(165deg,#0f3568,#14488c); color:#fff; position:relative; overflow:hidden}
.section > .in > h2{font-size:clamp(1.6rem,3.2vw,2.1rem)}
.sub{color:var(--ink-2); margin-top:10px; max-width:62ch; font-size:1.05rem}
.eyebrow{font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--primary-600)}

/* ---------------- ¿Qué es? ---------------- */
.ques{display:block}
.ques-main{align-self:center}
.ques-main .eyebrow{display:block; margin-bottom:8px}
.ques-main h2{font-size:clamp(1.6rem,3.2vw,2.1rem)}
.ques-text{margin-top:14px; color:var(--ink-2); font-size:1.08rem; text-align:justify; text-justify:inter-word; hyphens:auto}
.ques-hl{font-weight:700; color:var(--ink); background:linear-gradient(transparent 52%, rgba(232,145,43,.32) 52%); padding:0 1px}

/* ---------------- ¿Quiénes? (franja verde) ---------------- */
.who2{max-width:840px; margin:0 auto; text-align:center}
.who2-head{display:flex; align-items:center; justify-content:center; gap:11px; margin-bottom:18px}
.who2-h{color:#f6c079; font-size:clamp(1.2rem,2.3vw,1.55rem); margin:0; text-align:center}
.who2-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; text-align:left}
.who2-list li{display:flex; gap:11px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:13px 15px; font-size:.92rem; line-height:1.45; color:#e9f1fb}
.who2-list li svg{width:19px; height:19px; color:#8fbdf0; flex-shrink:0; margin-top:1px}
.who2-req{display:inline-flex; align-items:center; gap:9px; margin-top:16px; background:rgba(246,192,121,.14); border:1px solid rgba(246,192,121,.4); color:#f6c079; padding:10px 18px; border-radius:999px; font-size:.9rem; font-weight:600; text-align:left}
.who2-req svg{width:18px; height:18px; flex-shrink:0}

/* ---------------- ventajas (línea de tiempo) ---------------- */
.ventajas-title{font-family:var(--serif); font-size:1.3rem; margin:34px 0 4px}
.ventajas-title--center{text-align:center; color:#f6c079; font-size:1.5rem; margin:44px 0 0; position:relative; padding-bottom:15px}
.ventajas-title--center::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:54px; height:3px; border-radius:2px; background:var(--accent)}
.benef{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
.benef .b{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; gap:13px; align-items:center; box-shadow:var(--shadow-sm); color:var(--ink)}
.benef .b b{font-size:.98rem; font-weight:600}
.b-ic{width:48px; height:48px; border-radius:50%; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex-shrink:0}
.b-ic svg{width:24px; height:24px}
.benef--timeline{grid-template-columns:repeat(6,1fr); gap:14px; margin-top:46px; position:relative}
.benef--timeline::before{content:""; position:absolute; top:-22px; left:9%; right:9%; height:2px; background:rgba(255,255,255,.28)}
.benef--timeline .b{position:relative; flex-direction:column; text-align:center; gap:0; padding:0; justify-content:flex-start}
.benef--timeline .b::before{content:""; position:absolute; top:-28px; left:50%; transform:translateX(-50%); width:13px; height:13px; border-radius:50%; background:var(--accent); border:3px solid #0f3568; z-index:2}
.benef-defs{position:absolute; width:0; height:0; overflow:hidden}
.b-illu{width:100%; aspect-ratio:1/.78; background:linear-gradient(165deg,#f2f7fd,#e8f0fb); display:grid; place-items:center; border-radius:11px 11px 0 0; border-bottom:1px solid var(--line); overflow:hidden}
.b-illu svg{width:96%; height:96%; display:block}
.b-illu img{width:100%; height:100%; object-fit:contain; padding:16px 14px; display:block; animation:benefFloat 5s ease-in-out infinite}
.benef--timeline .b b{flex:1; display:flex; align-items:center; justify-content:center; padding:13px 11px 16px; font-size:.9rem; font-weight:700; color:#33465e; line-height:1.28}

/* ---- animaciones de las ilustraciones de ventajas ---- */
.benef--timeline .b{opacity:0}
.benef--timeline .b.is-in{opacity:1; animation:benefReveal .65s cubic-bezier(.2,.7,.3,1) both}
.benef--timeline .b:hover{box-shadow:var(--shadow-md); border-color:var(--primary-100)}
.benef--timeline .b:hover .b-illu img{animation-play-state:paused; transform:scale(1.06)}
.benef--timeline .b:nth-child(2) .b-illu img{animation-delay:-1.4s}
.benef--timeline .b:nth-child(3) .b-illu img{animation-delay:-2.7s}
.benef--timeline .b:nth-child(4) .b-illu img{animation-delay:-.7s}
.benef--timeline .b:nth-child(5) .b-illu img{animation-delay:-2s}
.benef--timeline .b:nth-child(6) .b-illu img{animation-delay:-3.3s}
@keyframes benefReveal{from{opacity:0; transform:translateY(28px) scale(.96)} to{opacity:1; transform:none}}
@keyframes benefFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}

/* ---------------- etiqueta pill + palabra ámbar ---------------- */
.eyebrow-pill{display:inline-flex; align-items:center; gap:8px; background:var(--primary-050); border:1px solid var(--primary-100); color:var(--primary-700); padding:7px 15px; border-radius:999px}
.eyebrow-pill svg{width:15px; height:15px; flex-shrink:0}
.hl-am{color:var(--accent-600)}

/* ---------------- tipos de apoyo + simulador (grid) ---------------- */
.apoyo-grid{display:grid; grid-template-columns:1.18fr .82fr; gap:30px; align-items:start}
.apoyo-grid > .apoyo-col:first-child{order:2}   /* Tipos de apoyo → derecha */
.apoyo-grid > .apoyo-col:last-child{order:1}     /* Simulador → izquierda */
.apoyo-col .eyebrow{display:block; margin-bottom:6px}
.apoyo-col .eyebrow-pill{display:inline-flex; margin-bottom:14px}
.apoyo-col > h2{font-size:clamp(1.5rem,2.8vw,1.9rem)}
.tramites-stack{display:flex; flex-direction:column; gap:16px; margin-top:20px}
.tipos-hint{display:flex; gap:10px; align-items:flex-start; margin-top:16px; background:var(--primary-050); border:1px solid var(--primary-100); border-radius:12px; padding:14px 16px; font-size:.9rem; color:var(--ink-2)}
.tipos-hint svg{width:19px; height:19px; color:var(--primary); flex-shrink:0; margin-top:1px}

/* tarjetas de tipos de apoyo */
.tcard{display:flex; gap:18px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); padding:16px}
.tcard-art{width:150px; flex-shrink:0; align-self:stretch; border-radius:14px; display:grid; place-items:center; padding:0; overflow:hidden}
.tcard-art svg{width:100%; height:auto; max-height:126px}
.tcard-art img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.tcard-art--house,.tcard-art--paint{background:linear-gradient(165deg,#f2f7fd,#e8f0fb)}
.tcard-body{flex:1; min-width:0}
.tcard-body h3{font-family:var(--serif); font-size:1.22rem; line-height:1.15}
.tcard-rule{display:block; width:44px; height:3px; border-radius:2px; background:var(--accent); margin:9px 0 10px}
.tcard-body p{color:var(--ink-2); font-size:.95rem; margin-bottom:14px}

/* ---------------- SIMULADOR (tarjeta) ---------------- */
.sim{background:var(--surface); border:1px solid var(--line-2); border-radius:20px; box-shadow:var(--shadow-md); overflow:hidden; margin-top:22px}
.sim-body{padding:24px 24px 22px}
.sim-inhead{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px}
.sim-calcic{width:46px; height:46px; border-radius:12px; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex-shrink:0}
.sim-calcic svg{width:24px; height:24px}
.sim-label{font-weight:700; font-size:1rem; margin:0; color:var(--ink)}
.sim-sub{font-size:.9rem; color:var(--ink-3); margin:3px 0 0}
.sim-field{display:flex; align-items:center; border:2px solid var(--line-2); border-radius:14px; overflow:hidden; background:#fff}
.sim-field:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-050)}
.sim-field .cur{padding:0 2px 0 18px; font-size:1.7rem; font-weight:800; color:var(--primary)}
.sim-field input[type=number]{border:0; outline:0; font-family:var(--sans); font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; padding:12px 12px; width:100%; color:var(--ink); -moz-appearance:textfield; background:#fff}
.sim-field input::-webkit-outer-spin-button,.sim-field input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.sim-per{padding:0 18px; font-size:.9rem; color:var(--ink-3); white-space:nowrap}
.sim-slider{margin-top:16px}
.sim-slider input[type=range]{width:100%; accent-color:var(--accent); height:26px; cursor:pointer}
.sim-slider .ends{display:flex; justify-content:space-between; font-size:.82rem; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:2px}
.sim-result{display:flex; align-items:center; gap:16px; background:var(--primary-050); border:1px solid var(--primary-100); border-radius:14px; padding:16px 18px; margin-top:18px}
.sim-result-ic{width:48px; height:48px; border-radius:50%; background:#fff; color:var(--primary); display:grid; place-items:center; flex-shrink:0}
.sim-result-ic svg{width:26px; height:26px}
.sim-result-col{flex:1; min-width:0}
.sim-result-col .k{font-size:.8rem; color:var(--ink-3); font-weight:600}
.sim-result-col .v{font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--primary-700); font-variant-numeric:tabular-nums; line-height:1.12; margin-top:2px}
.sim-result-small{font-size:.76rem; color:var(--ink-3); margin-top:3px}
.sim-result-div{width:1px; align-self:stretch; background:var(--primary-100); flex-shrink:0}
.sim-result.below .v{font-size:1.05rem; color:var(--ink-2); font-family:var(--sans)}
.sim-footer{display:flex; align-items:center; justify-content:space-between; gap:14px; background:linear-gradient(150deg,#123f78,#1c5aa8); color:#eaf1fb; padding:14px 20px}
.sim-foot-note{display:flex; align-items:center; gap:10px; font-size:.85rem; color:#cfdef2; line-height:1.35}
.sim-foot-note svg{width:18px; height:18px; flex-shrink:0; color:#a7c3e6}
.sim-tramo{flex-shrink:0; background:rgba(246,192,121,.16); border:1px solid rgba(246,192,121,.45); color:#f6c079; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border-radius:999px; white-space:nowrap}

/* tabla de referencia */
details.rates-details{margin-top:24px}
details.rates-details > summary{cursor:pointer; font-weight:700; color:var(--primary-700); font-family:var(--sans); font-size:1rem; padding:12px 0; list-style:none; display:flex; align-items:center; gap:10px}
details.rates-details > summary::-webkit-details-marker{display:none}
details.rates-details > summary .chev{transition:transform .2s ease}
details.rates-details[open] > summary .chev{transform:rotate(90deg)}
.tbl-wrap{overflow-x:auto; margin-top:8px; border:1px solid var(--line); border-radius:14px}
table.rates{border-collapse:collapse; width:100%; min-width:600px; font-size:.94rem}
table.rates caption{text-align:left; padding:14px 18px; font-weight:700; font-family:var(--serif); font-size:1.05rem; background:var(--surface); border-bottom:1px solid var(--line)}
table.rates th,table.rates td{padding:13px 18px; text-align:center; border-bottom:1px solid var(--line)}
table.rates thead th{background:var(--primary); color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; vertical-align:bottom}
table.rates td{font-variant-numeric:tabular-nums; color:var(--ink-2)}
table.rates tbody tr:nth-child(even){background:var(--surface-2)}
table.rates tbody tr.on{background:var(--accent-050)}
table.rates td.tier{font-weight:700; color:var(--ink)}
table.rates td.monto{font-weight:700; color:var(--primary-700)}
table.rates tbody tr:last-child td{border-bottom:0}

/* ---------------- proceso ---------------- */
.steps{counter-reset:st; margin-top:26px; display:flex; flex-direction:column}
.step{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:18px 0}
.step:not(:last-child){border-bottom:1px solid var(--line)}
.step .num{counter-increment:st; width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--serif); font-size:1.35rem; font-weight:700; display:grid; place-items:center}
.step .num::before{content:counter(st)}
.step h3{font-family:var(--sans); font-size:1.08rem; margin:6px 0 6px; font-weight:700}
.step p{color:var(--ink-2); font-size:.97rem}
.step p a{word-break:break-word}

/* división entre secciones con el mismo fondo */
.section--sep{position:relative}
.section--sep::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(90%,var(--maxw)); height:1px;
  background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent)}

/* encabezado del proceso (rediseñado, centrado) */
.proc-head{text-align:center; max-width:620px; margin:0 auto clamp(28px,4vw,44px)}
.proc-head .eyebrow-pill{margin-bottom:16px}
.proc-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem); letter-spacing:-.01em}
.proc-head__sub{margin-top:14px; color:var(--ink-2); font-size:1.06rem; max-width:52ch; margin-left:auto; margin-right:auto}

/* pasos en grid compacto (3×2) */
.steps-grid{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pstep{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 20px 26px; box-shadow:var(--shadow-sm); text-align:center; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.pstep:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--primary-100)}
.pstep__num{position:absolute; top:16px; left:16px; z-index:2; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--serif); font-weight:700; font-size:1.15rem; box-shadow:0 4px 12px rgba(20,72,140,.28); border:2px solid #fff}
.pstep__icon{width:clamp(112px,13vw,140px); aspect-ratio:1; margin:4px auto 16px; border-radius:50%; overflow:hidden; background:radial-gradient(circle,#f3f8fd,#e9f1fb)}
.pstep__icon img{width:100%; height:100%; object-fit:contain; display:block}
.pstep__body{flex:1; display:flex; flex-direction:column}
.pstep__body h3{font-family:var(--sans); font-size:1.14rem; font-weight:700; margin-bottom:8px; line-height:1.25}
.pstep__body p{flex:1 1 auto; color:var(--ink-2); font-size:.94rem; line-height:1.5; max-width:34ch; margin:0 auto}
.pstep__body p a{word-break:break-word}
.pstep__cta{display:flex; width:max-content; max-width:100%; margin:16px auto 0; padding:8px 16px; font-size:.86rem; min-height:38px; gap:7px}
.pstep__cta svg{width:15px; height:15px}

/* ---------------- FAQ ---------------- */
.faq{margin-top:24px; display:flex; flex-direction:column; gap:10px}
.fq{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.fq button{width:100%; text-align:left; background:none; border:0; padding:18px 20px; font-family:var(--sans); font-size:1.04rem; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; min-height:56px}
.fq button svg{width:22px; height:22px; color:var(--primary); flex-shrink:0; transition:transform .2s ease}
.fq[data-open="true"] button svg{transform:rotate(45deg)}
.fq .ans{max-height:0; overflow:hidden; transition:max-height .25s ease}
.fq[data-open="true"] .ans{max-height:400px}
.fq .ans p{padding:0 20px 20px; color:var(--ink-2)}

/* ---------------- documentos ---------------- */
.docs-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px}
.doc-dl{display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm)}
.doc-dl:hover{border-color:var(--primary-100); background:var(--primary-050)}
.doc-dl--rop{margin-top:16px}
.doc-dl .fi{width:42px; height:52px; border-radius:6px; background:var(--danger-bg); color:var(--danger); display:grid; place-items:center; font-size:.62rem; font-weight:800; flex-shrink:0; border:1px solid #f1cfca}
.doc-dl > span:not(.fi):not(.go){flex:1; min-width:0}
.doc-dl .nm{display:block; font-weight:700; font-size:.98rem; line-height:1.3}
.doc-dl .mt{display:block; font-size:.82rem; color:var(--ink-3); margin-top:3px; line-height:1.35}
.doc-dl .go{margin-left:auto; color:var(--primary)}
.doc-dl .go svg{width:22px; height:22px}

/* ---------------- contacto (rediseño claro) ---------------- */
.help2{max-width:920px; margin:0 auto}
.help2__head{text-align:center; max-width:560px; margin:0 auto clamp(26px,4vw,38px)}
.help2__head .eyebrow-pill{margin-bottom:16px}
.help2__head h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
.help2__head p{margin-top:12px; color:var(--ink-2); font-size:1.05rem}
.help2__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.hcard{display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.hcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-100)}
.hcard__ic{width:46px; height:46px; border-radius:50%; background:var(--primary-050); color:var(--primary); display:grid; place-items:center; flex-shrink:0}
.hcard__ic svg{width:22px; height:22px}
.hcard__txt{display:flex; flex-direction:column; min-width:0}
.hcard__k{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700}
.hcard__v{font-size:.98rem; font-weight:600; color:var(--ink); word-break:break-word; margin-top:3px}

/* ---------------- ayuda ---------------- */
.help{background:linear-gradient(150deg,#123f78,#123f78); color:#fff; border-radius:18px; padding:30px; margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.help h2{color:#fff; font-size:1.4rem; margin:0 0 6px; grid-column:1/-1}
.help .hc{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:16px}
.help .hc .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:#a7c3e6; font-weight:700}
.help .hc .v{margin-top:6px; font-size:1.02rem; color:#fff}
.help .hc a{color:#f6c079; text-decoration:none}
.help .hc a:hover{text-decoration:underline}

/* ---------------- pie ---------------- */
.site-footer{background:var(--primary-700); color:#b8cde8; padding:26px; text-align:center; font-size:.86rem}
.site-footer a{color:#eaf1fb}

/* ---------------- visor de PDF (modal) ---------------- */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px}
.modal-backdrop{position:absolute; inset:0; background:rgba(8,20,44,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.modal-dialog{position:relative; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); width:min(940px,100%); height:min(88vh,900px); display:flex; flex-direction:column; overflow:hidden}
.modal-head{display:flex; align-items:center; gap:12px; padding:12px 14px 12px 18px; border-bottom:1px solid var(--line); background:var(--surface)}
.modal-ext{background:var(--accent); color:#241300; font-weight:800; font-size:.7rem; letter-spacing:.06em; padding:5px 9px; border-radius:6px; flex-shrink:0}
.modal-title{font-size:1.1rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.modal-actions{margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0}
.modal-open{font-size:.85rem; font-weight:600; color:var(--primary-700); text-decoration:none; padding:9px 13px; border:1px solid var(--line-2); border-radius:8px; white-space:nowrap}
.modal-open:hover{background:var(--primary-050); border-color:var(--primary-100)}
.modal-close{width:42px; height:42px; border-radius:8px; border:1px solid var(--line-2); background:#fff; cursor:pointer; display:grid; place-items:center; color:var(--ink-2)}
.modal-close:hover{background:var(--surface-2); color:var(--ink)}
.modal-stage{flex:1 1 auto; background:#525659; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch}
.modal-doc{display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 12px}
.modal-doc canvas{max-width:100%; height:auto; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.35); border-radius:4px}
.modal-status{color:#e8eef4; font-size:1rem; line-height:1.5; padding:48px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.modal-spin{width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,.25); border-top-color:#fff; animation:modal-spin .8s linear infinite}
@keyframes modal-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.modal-spin{animation-duration:1.6s}}
.modal--anchored{display:block; padding:0}
.modal--anchored .modal-dialog{position:absolute; left:50%; transform:translate(-50%,-50%); width:min(940px,94%)}
body.no-scroll{overflow:hidden}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .site-nav{position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:2px; padding:10px 18px 16px; box-shadow:var(--shadow-md); display:none}
  .site-nav.open{display:flex}
  .site-nav a.navlink{padding:13px 12px; font-size:1rem}
  .nav-toggle{display:inline-flex}
  .who2-list{grid-template-columns:1fr}
  .who2-h{text-align:center}
  .apoyo-grid{grid-template-columns:1fr}
  .benef{grid-template-columns:1fr 1fr}
  .benef--timeline{grid-template-columns:repeat(3,1fr)}
  .benef--timeline::before, .benef--timeline .b::before{display:none}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .help{grid-template-columns:1fr}
  .help2__grid{grid-template-columns:1fr}
  .docs-row{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .benef{grid-template-columns:1fr}
  .benef--timeline{grid-template-columns:1fr 1fr}
  .steps-grid{grid-template-columns:1fr}
  .section{padding:44px 0}
  .tcard{flex-direction:column; text-align:center}
  .tcard-art{width:100%; max-width:170px; margin:0 auto}
  .tcard-rule{margin-left:auto; margin-right:auto}
  .sim-result{flex-wrap:wrap; gap:12px}
  .sim-result-div{display:none}
  .sim-result-col{flex-basis:100%}
  .sim-footer{flex-direction:column; align-items:flex-start; gap:10px}
  .modal{padding:0}
  .modal-dialog{width:100%; height:100%; border-radius:0}
  .modal-open{display:none}
}