/* =========================================================================
   NIMBUS NORMA · Identidad web (paleta azul corporativa)
   Marca: navy #14344E · nimbus #2C6E9B · ink #262626 · grey #6B7785
   Tipografía corporativa: Figtree (títulos y cuerpo) + IBM Plex Mono (datos)
   Concepto firma: la norma como medida verificable (regla + sello).
   ========================================================================= */

:root{
  --navy:#14344E;        --navy-900:#0E2438;
  --ink:#262626;
  --nimbus:#2C6E9B;      --nimbus-700:#22597D;   --nimbus-300:#5C97C2;
  --grey:#6B7785;
  --paper:#FBFCFD;       --surface:#FFFFFF;
  --line:#E1E8EF;        --line-dark:#26465E;
  --amber:#BE8526;       --amber-text:#8A6018;

  --ok:#2E8B6F;        --ok-bg:#E7F2ED;
  --partial:#9A6E1E;   --partial-bg:#FAF1DF;
  --pending:#B24A3D;   --pending-bg:#F7E8E5;

  --display:"Figtree", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --maxw:1160px;
  --gutter:clamp(20px, 5vw, 48px);
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,52,78,.05), 0 20px 44px -26px rgba(20,52,78,.4);
  --shadow-soft:0 1px 2px rgba(20,52,78,.04), 0 10px 26px -20px rgba(20,52,78,.3);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0; font-family:var(--body); color:var(--ink); background:var(--paper);
  line-height:1.62; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}

h1,h2,h3,h4{font-family:var(--display); color:var(--navy); line-height:1.12; letter-spacing:-.018em; margin:0; font-weight:700}
p{margin:0}
a{color:var(--nimbus-700)} a:hover{text-decoration:underline}
img{max-width:100%; display:block}
ul{margin:0; padding:0} li{list-style:none}

.skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; z-index:200}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--nimbus-300); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(64px, 9vw, 112px)}
.section--tight{padding-block:clamp(48px, 7vw, 80px)}
.section--dark{background:var(--navy); color:#cfe0ec}
.section--dark h2,.section--dark h3{color:#fff}
.section--alt{background:linear-gradient(180deg,#fff 0%, #EEF3F6 100%)}

.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--nimbus-700); margin-bottom:18px; display:flex; align-items:center; gap:11px}
.eyebrow::before{content:""; width:22px; height:0; border-top:1.5px solid currentColor}
.section--dark .eyebrow{color:var(--nimbus-300)}

.section-head{max-width:64ch; margin-bottom:clamp(36px,5vw,56px)}
.section-head h2{font-size:clamp(29px, 4.4vw, 45px); letter-spacing:-.02em}
.section-head .lede{margin-top:18px; font-size:clamp(17px,2vw,19px); color:var(--grey)}
.section--dark .section-head .lede{color:#a9c2d4}

.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600;
  font-size:16px; padding:13px 24px; border-radius:8px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration:none; line-height:1}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--nimbus); color:#fff; box-shadow:0 10px 22px -12px rgba(44,110,155,.85)}
.btn-primary:hover{background:var(--nimbus-700)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--nimbus); color:var(--nimbus-700)}
.section--dark .btn-ghost{color:#fff; border-color:var(--line-dark)}
.section--dark .btn-ghost:hover{border-color:var(--nimbus-300); color:#fff}
.btn-arrow::after{content:"→"; font-family:var(--mono); transition:transform .15s ease}
.btn:hover .btn-arrow::after,.btn-arrow:hover::after{transform:translateX(3px)}

/* ====================== NAV ====================== */
.nav{position:sticky; top:0; z-index:100; background:rgba(251,252,253,.86);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:24px; height:70px}
.brand{display:inline-flex; align-items:center}
.brand:hover{text-decoration:none}
.brand__logo{height:30px; width:auto}
.footer__brand .brand__logo{height:32px}
.nav__links{display:flex; align-items:center; gap:26px}
.nav__links a{color:var(--ink); font-weight:500; font-size:15.5px; white-space:nowrap; text-decoration:none}
.nav__links a:hover{color:var(--nimbus-700)}
.nav__cta{display:flex; align-items:center; gap:14px}
@media (max-width:880px){.nav__links{display:none} .nav__cta .btn-ghost:not(.nav__login){display:none}}
@media (max-width:520px){.nav__cta .btn{padding:10px 15px; font-size:14.5px}}

/* ====================== HERO ====================== */
.hero{position:relative; overflow:hidden; background:var(--paper);
  background-image:
    radial-gradient(60% 50% at 88% 0%, rgba(44,110,155,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(20,52,78,.04) 0 1px, transparent 1px calc(100%/26));
  border-bottom:1px solid var(--line)}
.hero__grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(36px,5vw,72px); align-items:center; padding-block:clamp(64px,9vw,104px)}
.hero h1{color:var(--navy); font-size:clamp(35px, 5.5vw, 60px); letter-spacing:-.025em; line-height:1.05}
.hero h1 em{font-style:normal; color:var(--nimbus)}
.hero__sub{margin-top:24px; font-size:clamp(17px,2.1vw,20px); color:var(--grey); max-width:52ch}
.hero__cta{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px}
.hero__meta{margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; color:var(--grey); font-family:var(--mono); letter-spacing:.02em}
.hero__meta span{display:inline-flex; align-items:center; gap:8px}
.hero__meta span::before{content:""; width:7px; height:7px; background:var(--nimbus); border-radius:50%}

/* Firma · regla de medida */
.ruler{margin-top:30px; max-width:560px}
.ruler__scale{position:relative; height:20px; border-bottom:1.5px solid var(--navy)}
.ruler__scale::before{content:""; position:absolute; left:0; right:0; bottom:0; height:7px;
  background:repeating-linear-gradient(90deg, var(--grey) 0 1px, transparent 1px calc(100%/26))}
.ruler__scale::after{content:""; position:absolute; left:0; right:0; bottom:0; height:13px;
  background:repeating-linear-gradient(90deg, var(--nimbus) 0 1.5px, transparent 1.5px calc(100%/6.5))}
.ruler__cap{margin-top:9px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); display:flex; justify-content:space-between}
.ruler__cap b{color:var(--nimbus-700); font-weight:500}

/* Acta de conformidad (signature card) */
.statuscard{background:var(--surface); border-radius:14px; color:var(--ink); box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden}
.statuscard__top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line)}
.statuscard__title{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--nimbus-700); text-transform:uppercase}
.statuscard__title b{display:block; font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; text-transform:none; margin-top:5px; color:var(--navy)}
.seal{width:78px; height:78px; flex:none; border-radius:50%; border:2px solid var(--nimbus); display:grid; place-items:center; position:relative; color:var(--nimbus); text-align:center; background:var(--surface)}
.seal::before{content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed var(--nimbus); opacity:.55}
.seal b{font-family:var(--display); font-weight:700; font-size:19px; line-height:1}
.seal span{font-family:var(--mono); font-size:7px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; color:var(--nimbus-700)}
.statuscard__rows{padding:8px 12px 12px}
.crow{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 10px}
.crow + .crow{border-top:1px solid var(--line)}
.crow__id{font-family:var(--mono); font-size:12.5px; color:var(--grey)}
.crow__name{font-size:14.5px; color:var(--ink); font-weight:500}
.pill{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:4px 10px; border-radius:5px; white-space:nowrap; font-weight:500; text-transform:uppercase}
.pill--ok{background:var(--ok-bg); color:var(--ok)}
.pill--partial{background:var(--partial-bg); color:var(--partial)}
.pill--pending{background:var(--pending-bg); color:var(--pending)}
.statuscard__foot{padding:13px 22px; background:var(--navy); color:#bcd3e3; font-family:var(--mono); font-size:11px; letter-spacing:.04em; display:flex; justify-content:space-between; gap:12px}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr; gap:44px} .statuscard{max-width:470px}}

/* ====================== TRUST STRIP ====================== */
.trust{border-bottom:1px solid var(--line); background:var(--surface)}
.trust__inner{display:flex; align-items:center; gap:clamp(20px,4vw,46px); flex-wrap:wrap; justify-content:center; padding-block:24px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey)}
.trust__inner b{color:var(--navy); font-family:var(--display); font-weight:700; letter-spacing:-.01em; text-transform:none; font-size:16px}

/* ====================== PROBLEMA ====================== */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow-soft); transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; position:relative}
.card::before{content:""; position:absolute; left:24px; top:0; width:32px; height:3px; background:var(--amber)}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#cdd9e4}
.card__tag{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--amber-text); text-transform:uppercase; margin:6px 0 12px}
.card h3{font-size:20px; margin-bottom:9px; font-weight:700}
.card p{color:var(--grey); font-size:15.5px}

/* ====================== CÓMO FUNCIONA ====================== */
.steps{display:grid; gap:0; counter-reset:step; border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:96px 1fr; gap:clamp(16px,3vw,40px); padding-block:30px; border-bottom:1px solid var(--line); align-items:start}
.step__n{counter-increment:step; font-family:var(--mono); font-size:12px; color:var(--nimbus-700); padding-top:8px}
.step__n::before{content:counter(step,decimal-leading-zero); display:block; font-family:var(--display); font-weight:700; font-size:30px; color:var(--navy); letter-spacing:-.01em; margin-bottom:4px}
.step__n::after{content:""; display:block; width:26px; height:0; border-top:2px solid var(--nimbus); margin-top:8px}
.step h3{font-size:22px; margin-bottom:8px; font-weight:700}
.step p{color:var(--grey); max-width:64ch}
@media (max-width:620px){.step{grid-template-columns:1fr; gap:8px} .step__n::after{display:none}}

/* ====================== NORMATIVAS ====================== */
.norms{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.norm{border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; background:var(--surface)}
.norm--live{border-color:#bfe0d2; background:linear-gradient(180deg,#fff, #f3faf7)}
.norm__code{font-family:var(--display); font-size:20px; color:var(--navy); font-weight:700}
.norm__desc{font-size:13.5px; color:var(--grey); margin-top:6px; line-height:1.45}
.norm__state{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; padding:3px 8px; border-radius:4px; text-transform:uppercase; margin-bottom:12px}
.norm__state--live{background:var(--ok-bg); color:var(--ok)}
.norm__state--soon{background:#EEF3F6; color:var(--grey); border:1px solid var(--line)}

/* ====================== DIFERENCIADORES (oscuro) ====================== */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px}
.feat{padding:4px 0}
.feat__k{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--nimbus-300); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:9px}
.feat__k::before{content:""; width:6px; height:6px; background:var(--nimbus-300); border-radius:50%}
.feat h3{font-size:20px; color:#fff; margin-bottom:8px; font-weight:700}
.feat p{color:#a9c2d4; font-size:15.5px}

.compare{margin-top:48px; background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:var(--radius); overflow:hidden}
.compare__row{display:grid; grid-template-columns:1.4fr 1fr 1fr}
.compare__row + .compare__row{border-top:1px solid var(--line-dark)}
.compare__cell{padding:15px 20px; font-size:15px; color:#cfe0ec}
.compare__cell--head{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8fb0c8; background:rgba(0,0,0,.16)}
.compare__cell--nimbus{color:#fff; font-weight:600; background:rgba(44,110,155,.18)}
.compare__cell .yes{color:var(--nimbus-300)} .compare__cell .no{color:#d79a90}
@media (max-width:620px){.compare__cell{padding:12px 14px; font-size:13.5px}}

/* ====================== PLANES ====================== */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; align-items:stretch}
.plan{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-soft)}
.plan--featured{border-color:var(--nimbus); box-shadow:0 24px 50px -28px rgba(44,110,155,.5); position:relative}
.plan__badge{position:absolute; top:-12px; left:24px; background:var(--nimbus); color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:5px}
.plan__name{font-family:var(--display); font-size:21px; color:var(--navy); font-weight:700}
.plan__price{margin-top:14px; display:flex; align-items:baseline; gap:6px}
.plan__price b{font-family:var(--display); font-size:34px; color:var(--navy); letter-spacing:-.02em; font-weight:700}
.plan__price span{font-size:14px; color:var(--grey); font-family:var(--mono)}
.plan__for{margin-top:8px; font-size:14px; color:var(--grey); min-height:42px}
.plan__list{margin-top:18px; display:grid; gap:10px; flex:1}
.plan__list li{display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:14.5px; color:var(--ink); align-items:start}
.plan__list li::before{content:"✓"; color:var(--nimbus); font-weight:700; line-height:1.5}
.plan .btn{margin-top:22px; justify-content:center}
.plans__note{margin-top:20px; font-size:13px; color:var(--grey); font-family:var(--mono)}

/* ====================== FAQ ====================== */
.faq{display:grid; gap:0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--display); font-size:19px; color:var(--navy); font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:22px; color:var(--nimbus); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 4px 24px; color:var(--grey); max-width:80ch}

/* ====================== CTA FINAL ====================== */
.endcta{text-align:center}
.endcta h2{font-size:clamp(30px,4.6vw,47px); color:#fff; max-width:20ch; margin-inline:auto; font-weight:700}
.endcta p{margin-top:18px; color:#a9c2d4; max-width:56ch; margin-inline:auto; font-size:18px}
.endcta .hero__cta{justify-content:center; margin-top:32px}

/* ====================== FOOTER ====================== */
.footer{background:var(--navy-900); color:#9fbcd0; padding-block:56px 30px}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.footer__brand p{margin-top:14px; font-size:14.5px; color:#8fafc4; max-width:34ch}
.footer h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7da0b8; margin-bottom:16px; font-weight:500}
.footer__col a{display:block; color:#c2d6e5; font-size:14.5px; padding:5px 0; text-decoration:none}
.footer__col a:hover{color:#fff}
.footer__legal{margin-top:40px; padding-top:22px; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; align-items:center; font-size:13px; color:#7da0b8}
.footer__legal a{color:#9fbcd0}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr; gap:28px}}
@media (max-width:440px){.footer__grid{grid-template-columns:1fr}}

/* ====================== COOKIE BANNER ====================== */
.cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:300; max-width:560px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; display:none}
.cookie.is-visible{display:block; animation:rise .35s ease}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.cookie p{font-size:14px; color:var(--grey)}
.cookie strong{color:var(--navy)}
.cookie__actions{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px}
.cookie .btn{padding:10px 18px; font-size:14.5px}
@media (prefers-reduced-motion:reduce){.cookie.is-visible{animation:none}}

/* ====================== PÁGINAS LEGALES ====================== */
.legal{padding-block:clamp(48px,7vw,84px)}
.legal__head{max-width:760px; margin-bottom:40px}
.legal__head .eyebrow{justify-content:flex-start}
.legal__head h1{font-size:clamp(32px,5vw,46px); font-weight:700}
.legal__head .updated{margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--grey)}
.legal__body{max-width:760px}
.legal__body h2{font-size:24px; margin:42px 0 12px; padding-top:14px; font-weight:700}
.legal__body h3{font-size:18px; color:var(--nimbus-700); margin:26px 0 8px; font-weight:600}
.legal__body p{margin:0 0 14px; color:#33414d}
.legal__body ul{margin:0 0 16px; display:grid; gap:9px}
.legal__body ul li{display:grid; grid-template-columns:16px 1fr; gap:10px; color:#33414d}
.legal__body ul li::before{content:""; margin-top:.62em; width:7px; height:7px; background:var(--nimbus); border-radius:50%}
.legal__body table{width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:14.5px}
.legal__body th,.legal__body td{text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top}
.legal__body th{background:#EEF3F6; font-family:var(--display); color:var(--navy); font-weight:600; font-size:14px}
.legal__body .note{background:#EEF3F6; border-left:3px solid var(--nimbus); border-radius:0 8px 8px 0; padding:16px 18px; font-size:14.5px; color:var(--grey); margin:18px 0}
.legal__back{margin-top:48px; padding-top:24px; border-top:1px solid var(--line)}
.placeholder{background:var(--partial-bg); color:#6f4f12; padding:1px 6px; border-radius:4px; font-family:var(--mono); font-size:.86em}