*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
table{max-width:100%}
p,li,h1,h2,h3,h4,td,th,summary,dd,dt{overflow-wrap:break-word}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hover);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(30px,5.2vw,50px);font-weight:900}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(18px,1.4vw,21px);font-weight:700}
p{margin:0 0 1em}
small{font-size:14px;color:var(--ink-3)}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:rgba(14,124,123,.16)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
/* On the teal hero, the dark footer and the orange band a teal ring is
   invisible: keyboard focus there is drawn in white instead. */
.hero :focus-visible,.closing :focus-visible,.ftr :focus-visible,.urg :focus-visible{outline-color:#fff}
.btn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}
.hero .btn:focus-visible,.closing .btn:focus-visible,.urg .btn:focus-visible{outline-color:#fff}
/* No sideways scroll at any width: clip (unlike hidden) does not turn the
   element into a scroll container, so position:sticky keeps working. */
html{overflow-x:clip}
body{overflow-x:clip}
[id]{scroll-margin-top:calc(var(--hdr-h) + var(--urg-h,0px) + 18px)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}
.muted{color:var(--ink-3)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:14px}
.eyebrow{display:inline-block;font-size:clamp(11px,1.1vw,12.5px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------- header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s ease,box-shadow .3s ease}
.hdr__in{display:flex;align-items:center;flex-wrap:nowrap;gap:10px;height:var(--hdr-h);max-width:var(--wrap);margin:0 auto;padding:0 20px;position:relative}
body{padding-top:var(--hdr-h)}
body.has-hero{padding-top:0}
/* Solid by default; only a page whose first block is the teal hero gets the
   transparent-over-hero treatment, and only until the first scroll. */
.hdr{background:rgba(246,248,250,.88);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
body.has-hero .hdr{background:transparent;backdrop-filter:none;box-shadow:none}
body.has-hero .hdr.scrolled{background:rgba(246,248,250,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:400;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-.025em;flex:0 1 auto;min-width:0;margin-right:auto}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand__mark{width:30px;height:30px;flex:0 0 30px;color:var(--brand)}
/* Shield takes currentColor; the cross is always the orange accent. */
.brand__cross{fill:var(--accent)}
/* Never lets the wordmark push the row sideways on a 320px phone: if the
   fallback font is wider than Inter it clips instead of overflowing. */
.brand__name{white-space:nowrap;overflow:hidden;text-overflow:clip}
.brand b{color:var(--brand);font-weight:800}
body.has-hero .hdr:not(.scrolled) .brand,body.has-hero .hdr:not(.scrolled) .brand b{color:#fff}
body.has-hero .hdr:not(.scrolled) .brand__mark{color:#fff}
/* The wordmark is longer than it used to be; give it room on a small phone. */
@media(max-width:520px){
  .brand{font-size:18px;gap:8px}
  .brand__mark{width:27px;height:27px;flex:0 0 27px}
}
@media(max-width:379px){
  .hdr__in{gap:6px;padding:0 14px}
  .brand{font-size:16.5px;gap:6px;letter-spacing:-.03em}
  .brand__mark{width:24px;height:24px;flex:0 0 24px}
  .burger{padding:8px 4px}
}

.nav{display:flex;align-items:center;gap:2px;order:1;min-width:0}
/* The persistent header action: visible at EVERY width, phones included.
   Written as .btn.hdr__cta so it outranks the generic .btn--sm padding that is
   declared further down the sheet. */
.btn.hdr__cta{order:2;flex:none;padding:10px 16px;font-size:14.5px}
.hdr__cta-sm{display:none}
@media(max-width:520px){
  .hdr__cta-lg{display:none}
  .hdr__cta-sm{display:inline}
  .btn.hdr__cta{padding:9px 13px;font-size:14px}
}
@media(max-width:379px){
  .btn.hdr__cta{padding:8px 11px;font-size:13px}
}
.nav a{padding:8px 9px;border-radius:var(--r-pill);color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--brand);text-decoration:none;background:var(--brand-soft)}
.nav a.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
.nav__grp{position:relative}
.nav__grp>summary{list-style:none;cursor:pointer;padding:8px 9px;border-radius:var(--r-pill);color:var(--ink-2);
  font-size:14px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.nav__grp>summary::-webkit-details-marker{display:none}
.nav__grp>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav__grp[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.nav__grp>summary:hover{color:var(--brand);background:var(--brand-soft)}
.nav__sub{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;z-index:40}
.nav__sub a{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink-2);white-space:nowrap}
body.has-hero .hdr:not(.scrolled) .nav__grp>summary{color:rgba(255,255,255,.92)}
body.has-hero .hdr:not(.scrolled) .nav__sub a{color:var(--ink-2)}
.nav__lang{display:inline-flex;margin-left:8px}
.nav__lang a{font-weight:700;letter-spacing:.05em;font-size:12px;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:5px 11px;color:var(--ink-3)}
.nav__lang a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
body.has-hero .hdr:not(.scrolled) .nav>a{color:rgba(255,255,255,.92)}
body.has-hero .hdr:not(.scrolled) .nav>a:hover{background:rgba(255,255,255,.16);color:#fff}
body.has-hero .hdr:not(.scrolled) .nav>a.on{background:rgba(255,255,255,.18);color:#fff}
body.has-hero .hdr:not(.scrolled) .nav__lang a{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.burger{display:none;flex:none;order:3;background:none;border:0;cursor:pointer;padding:8px;border-radius:10px;z-index:70}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s}
body.has-hero .hdr:not(.scrolled) .burger span{background:#fff}

/* The full link row (seven links plus login, the language pill and the button)
   only fits from 1290px up. Below that it collapses into a dropdown panel
   rather than wrapping onto two lines and shoving the button off the edge. */
@media(max-width:1289px){
  .burger{display:block}
  .nav{position:absolute;top:calc(100% - 4px);right:20px;left:auto;flex-direction:column;align-items:stretch;gap:0;
    width:min(320px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:6px 18px 16px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease}
  .nav.open{opacity:1;visibility:visible;transform:none}
  body.has-hero .hdr:not(.scrolled) .nav>a{color:var(--ink-2)}
  body.has-hero .hdr:not(.scrolled) .nav__lang a{background:#fff;border-color:var(--line);color:var(--ink-3)}
  .nav>a{padding:12px 4px;border-bottom:1px solid var(--line-2);border-radius:0;text-align:left}
  .nav__grp{position:static}
  .nav__grp>summary{padding:12px 4px;border-bottom:1px solid var(--line-2);border-radius:0;color:var(--ink-1);font-weight:600}
  body.has-hero .hdr:not(.scrolled) .nav__grp>summary{color:var(--ink-1)}
  .nav__sub{position:static;border:0;box-shadow:none;padding:0 0 0 12px;min-width:0;border-radius:0}
  .nav__sub a{padding:11px 4px;border-bottom:1px solid var(--line-2);border-radius:0}
  .nav__lang{margin:12px 0 0;align-self:flex-start}
}

/* ---------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:12px;
  background:var(--accent);color:#fff;font-weight:700;font-size:16px;border:2px solid transparent;cursor:pointer;
  text-decoration:none;line-height:1.2;white-space:nowrap;
  box-shadow:0 8px 22px -8px rgba(239,138,60,.7);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{background:var(--accent-hover);color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(239,138,60,.75)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px -8px rgba(239,138,60,.7)}
.btn--ghost{background:transparent;color:var(--brand-deep);border-color:var(--brand-line);box-shadow:none}
.btn--ghost:hover{background:var(--brand-soft);color:var(--brand-deep);box-shadow:none}
.btn--ghost:active{background:rgba(14,124,123,.16)}
.btn--dark{background:var(--brand);box-shadow:0 8px 22px -10px rgba(14,124,123,.7)}
.btn--dark:hover{background:var(--brand-deep)}
.btn--sm{padding:9px 17px;font-size:14.5px;border-radius:10px}
.btn--lg{padding:16px 32px;font-size:17px}
.btn--wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;color:#fff;padding:calc(var(--hdr-h) + clamp(24px,5vw,60px)) 0 clamp(60px,7vw,92px);
  background:linear-gradient(135deg,#0B6363 0%,#0E7C7B 45%,#12A594 100%)}
.hero .wrap{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%)}
.hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(70px);opacity:.45;
  background:#19E3C4;top:-150px;right:-90px;pointer-events:none;mix-blend-mode:screen}
.hero h1{color:#fff;max-width:19ch;font-weight:900;margin:16px 0 14px}
.hero p.lede{font-size:clamp(16.5px,2.1vw,20px);max-width:52ch;color:rgba(255,255,255,.92);margin:0}
.hero .eyebrow{background:rgba(255,255,255,.16);color:#fff}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 4px}
.hero .btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.24);color:#fff}
.hero__note{font-size:14px;color:rgba(255,255,255,.86);margin:0 0 6px}
/* The half of the subtitle that moved below the buttons, so the CTA is inside
   the first screen on a phone. Same words, lower down. */
.hero__more{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88);max-width:56ch;margin:18px 0 0}
.hero__eyebrow{display:inline-block;font-size:clamp(11px,1.1vw,12.5px);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.16);padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hero__h1{color:#fff;font-size:clamp(30px,5.2vw,50px);font-weight:900;letter-spacing:-.02em;line-height:1.14;margin:16px 0 14px;max-width:20ch;text-wrap:balance}
.hero__sub{font-size:clamp(16.5px,2.1vw,20px);max-width:52ch;color:rgba(255,255,255,.92);margin:0}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 4px}
.hero-wave{position:absolute;bottom:-1px;left:0;right:0;z-index:1;line-height:0;pointer-events:none}
.hero-wave svg{display:block;width:100%;height:64px}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px 30px;margin-top:34px;
  border-top:1px solid rgba(255,255,255,.2);padding-top:26px}
.counter{text-align:left}
.counter b{display:block;font-size:30px;font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff}
.counter span{display:block;font-size:13px;color:rgba(255,255,255,.8);margin-top:7px;line-height:1.35;max-width:22ch}

/* ---------------------------------------------------------- sections */
.sec{padding:var(--sec-y) 0}
.sec--sand{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec__head{max-width:680px;margin-bottom:clamp(22px,3vw,36px)}
.sec__head h2{margin-bottom:12px}
.sec__head p{color:var(--ink-3);font-size:clamp(16px,1.4vw,17.5px);margin-bottom:0}
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

/* ------------------------------------------------------- product card grid
   Fixed column counts, never auto-fit: auto-fit fitted THREE of the four
   category cards on a 1160px page and orphaned the fourth on a row of its own.
   1-up on a phone, 2x2 in the middle, 4-up from 1180px — no lone card at any
   width. Each card spans the same number of parent rows and takes them with
   grid-template-rows:subgrid, so the title block, the tags, the stats table,
   the price, the button row and the trust strip line up ACROSS the cards
   instead of floating wherever each card's own text ends. */
/* row-gap is shared: with subgrid the SAME gutter separates a card's internal
   rows and one card from the next, so both are 16px on purpose. Cards are left
   to stretch (default) — that is what gives equal heights when subgrid is not
   available. */
.prod-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:20px;row-gap:16px}
@media(min-width:660px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}}
.prod-grid--5{--prod-rows:5}
.prod-grid--6{--prod-rows:6}
@supports(grid-template-rows:subgrid){
  .prod-grid>.prod{display:grid;grid-template-rows:subgrid;grid-row:span var(--prod-rows,6);row-gap:16px}
  /* price sits at the BOTTOM of its shared row, so the amounts line up across
     the cards even when one of them carries a longer launch-price note */
  .prod-grid>.prod>.prod__money{align-self:end}
}
.prod__tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prod__foot:empty{display:none}
.prod__link{margin:12px 0 0;font-size:14.5px;color:var(--ink-3)}
.prod__link a{font-weight:600}
/* 4-up columns are ~265px wide: the card leans into a pricing-table shape
   instead of squeezing a two-column head into 220px. */
@media(min-width:1180px){
  .prod-grid .prod{padding:22px 20px}
  .prod-grid .prod__top{flex-direction:column;align-items:flex-start;gap:10px}
  .prod-grid .prod__top>div:last-child{text-align:left}
  .prod-grid .prod h3{font-size:20px}
  .prod-grid .prod__plazas{font-size:27px}
  .prod-grid .prod__facts{font-size:13.5px}
  .prod-grid .prod__facts li{gap:8px}
  .prod-grid .prod__price{font-size:28px}
  .prod-grid .prod__price .price__now{font-size:25px}
  .prod-grid .prod__cta{flex-direction:column;align-items:stretch}
  .prod-grid .prod__cta .btn{width:100%;white-space:normal;text-align:center;padding:12px 14px;font-size:15px}
  .prod-grid .trust__list{flex-direction:column;gap:5px;font-size:13.5px}
}

/* ---------------------------------------------------------- cards */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px);box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card h3{margin-top:0}
.card--link:hover{transform:translateY(-6px);border-color:var(--brand-line);box-shadow:var(--shadow-lg);text-decoration:none}
.prod{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.prod>*{min-width:0}
.prod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand-bright) 55%,var(--accent) 100%)}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.prod__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.prod__top>div:first-child{flex:1 1 auto;min-width:0}
.prod__top>div:last-child{flex:none;text-align:right}
.prod__grupo{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:5px 12px;border-radius:var(--r-pill)}
.prod h3{font-size:clamp(19px,1.8vw,23px);margin:0;font-weight:800;text-wrap:balance}
.prod__plazas{font-size:32px;font-weight:900;color:var(--brand);line-height:1;letter-spacing:-.03em}
.prod__plazas small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;font-weight:500;letter-spacing:0}
.prod__facts{list-style:none;padding:0;margin:0;font-size:14.5px;color:var(--ink-3)}
.prod__facts li{padding:8px 0;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:12px}
.prod__facts li b{color:var(--ink-2);font-weight:600;text-align:right}
.prod__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:clamp(28px,3vw,34px);font-weight:900;color:var(--ink);letter-spacing:-.03em}
.prod__price small{font-size:13px;color:var(--ink-3);font-weight:600;letter-spacing:0;white-space:normal}
.prod__cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill)}
.tag--soon{background:var(--sand-2);color:var(--ink-3)}
.tag--live{background:var(--brand-soft);color:var(--brand-deep)}
.tag--free{background:var(--accent);color:#fff;box-shadow:0 4px 10px -4px rgba(239,138,60,.8)}

/* free tools row */
.tool{display:flex;flex-direction:column;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px);height:100%;box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.tool:hover{border-color:var(--brand-line);text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.tool b{display:block;color:var(--ink);font-size:19px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em}
.tool span{color:var(--ink-3);font-size:15px;flex:1 0 auto}
.tool i{font-style:normal;display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:700;color:var(--brand);border-bottom:1px solid var(--brand-line);padding-bottom:3px}
.tool:hover i{color:var(--brand-deep)}

/* ---------------------------------------------------------- notices */
.note{border-radius:var(--r);padding:16px 18px;font-size:15px;line-height:1.55;border:1px solid var(--line);background:var(--white)}
.note--status{background:var(--accent-soft);border-color:#F6DCC0;color:#7A4310}
.note--ref{background:var(--sand-2);border-color:var(--line);color:var(--ink-2)}
.note--ok{background:var(--ok-soft);border-color:#B9E2D9;color:#0B5347}
.note--bad{background:var(--bad-soft);border-color:#F0C4C0;color:#7d1a13}
.note b{color:inherit}

/* ---------------------------------------------------------- tables */
.table{width:100%;border-collapse:collapse;font-size:15px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.table th{background:var(--sand-2);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:800}
.table tr:last-child td{border-bottom:0}
.table td b{color:var(--ink)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}

/* ---------------------------------------------------------- forms */
label{display:block;font-weight:600;font-size:15px;margin-bottom:6px;color:var(--ink)}
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:16px;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field{margin-bottom:18px}
.field .lit{font-size:13px;color:var(--ink-3);background:var(--sand-2);border-left:3px solid var(--brand-line);padding:8px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-top:8px;line-height:1.5}
.field .help{font-size:14px;color:var(--ink-3);margin-top:6px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;line-height:1.5}
.check input{width:18px;height:18px;margin-top:3px;flex:0 0 18px;accent-color:var(--brand)}

/* baremo total */
.sticky-total{position:sticky;bottom:0;background:var(--brand-deep);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -8px 28px rgba(15,42,51,.18);z-index:20;flex-wrap:wrap}
.sticky-total b{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.03em}
.sticky-total span{font-size:14px;color:rgba(255,255,255,.85)}
.bar{height:8px;background:rgba(255,255,255,.25);border-radius:var(--r-pill);overflow:hidden;flex:1;min-width:120px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}

/* ---------------------------------------------------------- questions */
.q{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:clamp(16px,2vw,22px);margin-bottom:16px;box-shadow:var(--shadow)}
.q__n{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.q__stem{font-weight:600;margin-bottom:14px;font-size:17px;color:var(--ink)}
.opt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;background:var(--white);font-size:16px;line-height:1.45;font-weight:400;transition:border-color .18s,background .18s}
.opt:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.opt input{margin-top:4px;accent-color:var(--brand)}
.opt.is-ok{border-color:#5FB8A6;background:var(--ok-soft)}
.opt.is-bad{border-color:#E0A29C;background:var(--bad-soft)}
.opt .l{font-weight:800;color:var(--ink-3);flex:0 0 18px}
.expl{border-left:3px solid var(--brand);background:var(--olive-soft);padding:13px 15px;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15px;margin-top:12px}
.expl a{color:var(--brand);font-weight:600}
.srcline{font-size:13px;color:var(--ink-3);margin-top:8px}
.srcline a{color:var(--ink-3);text-decoration:underline}

/* ---------------------------------------------------------- prose */
.prose{font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.prose h2{margin-top:1.6em;font-size:27px}
.prose h3{margin-top:1.3em;font-size:19px;color:var(--ink)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:3px solid var(--brand-line);margin:0;padding-left:16px;color:var(--ink-3)}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--sand-2);padding:1px 5px;border-radius:4px}
.prose .cite{font-size:.82em;color:var(--brand);background:var(--brand-soft);padding:1px 6px;border-radius:4px;white-space:nowrap}

/* ---------------------------------------------------------- footer
   NOTE: the previous rule was
     grid-template-columns:1.6fr repeat(auto-fit,minmax(150px,1fr));
   which the CSS Grid spec rejects — repeat(auto-fit/auto-fill,...) may not be
   combined with any other flexible (fr) or intrinsic track. The whole
   declaration was dropped, so the footer fell back to one implicit column. */
.ftr{background:#0d1519;color:#c3cfd6;font-size:14.5px;padding:clamp(40px,5vw,64px) 0 0;margin-top:0}
.ftr .wrap{max-width:1160px}
.ftr a{color:#c3cfd6}
.ftr a:hover{color:#fff}
.ftr__cols{display:grid;grid-template-columns:1.6fr repeat(5,minmax(0,1fr));gap:36px 30px;align-items:start}
.ftr h4{color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.02em;margin:0 0 14px}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:9px;line-height:1.45}
.ftr__col{min-width:0}
.ftr__me{max-width:34ch}
.ftr__brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:21px;font-weight:400;color:#fff;margin-bottom:12px;letter-spacing:-.025em;text-decoration:none}
.ftr__brand:hover{color:#fff;text-decoration:none}
.ftr__brand .brand__mark{width:32px;height:32px;flex:0 0 32px;color:#fff}
.ftr__brand b{color:var(--brand-bright);font-weight:800}
.ftr__me p{color:#9db0ba;font-size:14px;margin:0 0 10px}
.ftr__mail a{color:#c3cfd6;text-decoration:underline;text-underline-offset:3px}
.ftr__bar{border-top:1px solid #22303a;margin-top:44px;padding:18px 0 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 28px}
.ftr__bar p{margin:0;font-size:12.5px;line-height:1.55;color:#8ba0ab}
.ftr__disc{flex:1 1 520px;max-width:78ch}
.ftr__meta{flex:0 1 auto}
.ftr__meta a{color:#b6c6cf;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1080px){
  .ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
  .ftr__me{grid-column:1/-1;max-width:52ch}
}
@media(max-width:760px){
  .ftr{padding-top:48px}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
}
@media(max-width:520px){
  .ftr__cols{grid-template-columns:minmax(0,1fr);gap:24px}
  .ftr__me{max-width:none;margin-bottom:2px}
  .ftr li{margin-bottom:8px}
  .ftr__bar{margin-top:32px;padding-top:16px}
}

/* closing CTA */
.closing{position:relative;overflow:hidden;background:linear-gradient(135deg,#0B6363,#0E7C7B 55%,#12A594);color:#fff;padding:calc(var(--sec-y) + 6px) 0;text-align:center}
.closing::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;filter:blur(70px);opacity:.4;background:#19E3C4;bottom:-200px;left:-100px;mix-blend-mode:screen;pointer-events:none}
.closing .wrap{position:relative;z-index:2}
.closing h2{color:#fff;font-size:clamp(28px,4vw,40px)}
.closing p{max-width:56ch;margin:0 auto 26px;color:rgba(255,255,255,.9);font-size:18px}

/* misc */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);font-size:14px;color:var(--ink-2);font-weight:500}
.pill.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pill:hover{text-decoration:none;border-color:var(--brand-line)}
.crumbs{font-size:13.5px;color:var(--ink-3);margin-bottom:16px}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand)}
details.faq{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:0;margin-bottom:12px;transition:box-shadow .25s,border-color .25s}
details.faq[open]{box-shadow:var(--shadow);border-color:var(--brand-line)}
details.faq summary{cursor:pointer;padding:20px 22px;font-weight:600;font-size:16.5px;color:var(--ink);list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";float:right;color:var(--brand);font-size:22px;line-height:1;font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq .body{padding:0 22px 20px;color:var(--ink-3);font-size:15.5px}
.kpi{display:flex;gap:12px;flex-wrap:wrap}
.kpi div{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;min-width:124px;box-shadow:var(--shadow)}
.kpi b{display:block;font-size:29px;font-weight:900;color:var(--brand);line-height:1;letter-spacing:-.03em}
.kpi span{font-size:13px;color:var(--ink-3)}
.timer{position:sticky;top:calc(var(--hdr-h) + var(--urg-h,0px) + 8px);z-index:30;background:var(--brand-deep);color:#fff;border-radius:var(--r);padding:13px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15px;margin-bottom:20px;box-shadow:var(--shadow)}
.timer b{font-family:var(--font-mono);font-size:22px}

/* Light variant of the hero counters, for pages with a white background. */
.counters--light{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px;background:none;border:0;border-radius:0;margin-top:26px;padding-top:0}
.counters--light .counter{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px;box-shadow:var(--shadow);text-align:left}
.counters--light .counter b{color:var(--brand);font-size:32px}
.counters--light .counter span{color:var(--ink-3)}
.counters--light .counter--big b{color:var(--accent-ink)}
.langbar{font-size:13px;color:var(--ink-3);margin:0 0 14px}
.langbar a{font-weight:700}

/* long-form guide pages */
.toc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--shadow);margin:0 0 30px}
.toc h2{font-size:14px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:0 0 12px}
.toc ol{margin:0;padding-left:20px;color:var(--ink-2)}
.toc li{margin-bottom:7px}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:22px}
.related a{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow);color:var(--ink);font-weight:600;font-size:15.5px;transition:transform .25s,box-shadow .25s,border-color .25s}
.related a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-line);text-decoration:none}
.related a small{display:block;color:var(--ink-3);font-weight:400;margin-top:6px;font-size:13.5px}

@media(max-width:760px){
  body{font-size:16px}
  .hero .cta .btn,.hero__cta .btn{width:100%}
  .counters{gap:18px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .counter b{font-size:26px}
  .prod__top{flex-direction:column}
  .prod__top>div:last-child{text-align:left}
  .prod__cta{flex-direction:column;align-items:stretch}
  .prod__cta .btn{width:100%}
  .btn{white-space:normal;text-align:center;padding:13px 20px}
  .kpi div{flex:1 1 130px;min-width:0}
  .table th,.table td{padding:10px 12px}
  .toc{padding:18px 18px}
  .timer{padding:11px 14px;font-size:14px}
  .sticky-total{padding:12px 14px}
  h1{font-size:clamp(27px,7.2vw,36px)}
  h2{font-size:clamp(23px,5.6vw,30px)}
  .prose{font-size:16.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ============================================================ bloque A ==
   Free-tema selling surface, the one-question quiz, the e-mail capture box,
   the source panel and the waiting lists. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- article citations: still links, now a real touch target --- */
.prose .cite{display:inline-block;font-size:.84em;color:var(--brand-deep);background:var(--brand-soft);
  border:1px solid var(--brand-line);padding:5px 10px;border-radius:8px;white-space:nowrap;
  line-height:1.2;margin:2px 1px;min-height:32px}
@media(max-width:640px){.prose .cite{padding:10px 12px;min-height:44px;line-height:24px}}
.prose .cite:hover{background:var(--brand);color:#fff;text-decoration:none}

/* --- collapsible index --- */
.idx{border:1px solid var(--line);border-radius:var(--r-lg,14px);background:#fff;padding:14px 18px;margin:22px 0 8px}
.idx>summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline;font-size:17px}
.idx>summary::-webkit-details-marker{display:none}
.idx>summary::after{content:'▾';margin-left:auto;color:var(--ink-3)}
.idx[open]>summary::after{content:'▴'}
.idx__list{margin:14px 0 4px;padding-left:22px;columns:1}
.idx__list li{margin:0 0 8px;line-height:1.4}
.idx__list--open{list-style:decimal}
@media(min-width:820px){.idx__list{columns:2;column-gap:34px}}

/* ---------------------------------------------------------- desplegables de contenido
   El temario largo (un tema de 26.000 caracteres, o los 38 temas de Enfermería)
   se sirve por apartados: el contenido va entero en el HTML, pero solo el
   primero aparece abierto, para que la página no mida 30.000 px en un móvil. */
.tsec{scroll-margin-top:calc(var(--hdr-h) + 18px);border-bottom:1px solid var(--line-2)}
.tsec>summary,.tblock>summary,.card--fold>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:14px;padding:4px 0}
.tsec>summary::-webkit-details-marker,.tblock>summary::-webkit-details-marker,.card--fold>summary::-webkit-details-marker{display:none}
.tsec>summary::after,.tblock>summary::after,.card--fold>summary::after{content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);
  transition:transform .18s ease;margin-top:6px}
.tsec[open]>summary::after,.tblock[open]>summary::after,.card--fold[open]>summary::after{transform:rotate(-135deg)}
.tsec>summary>h2,.tblock>summary>h2,.tblock>summary>h3,.card--fold>summary>h3{margin:0}
.tsec>summary:hover>h2,.tblock>summary:hover>h2,.tblock>summary:hover>h3{color:var(--brand)}
.tsec__in{padding-bottom:6px}
.tblock{margin-top:22px}
.card--fold{display:block}
.resume{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:12px;padding:12px 16px;margin:18px 0;font-size:15px}
.resume span{margin-right:auto}

/* --- compact price pitch inside the tema --- */
.pitch{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#fff,var(--brand-soft));border:1px solid var(--brand-line);
  border-radius:var(--r-lg);padding:20px 22px;margin:30px 0}
.pitch__txt{max-width:60ch}
.pitch__txt b{display:block;font-size:17px;margin-bottom:4px}
.pitch__txt span{color:var(--ink-2);font-size:15px}

.testcta{border:1px solid var(--brand-line);background:#fff;border-radius:var(--r-lg);padding:24px;margin:34px 0}
.testcta h2{font-size:24px;margin-bottom:8px}

/* --- one question per screen --- */
.quiz{margin-top:26px}
.quiz__bar{height:8px;background:var(--line-2);border-radius:999px;overflow:hidden;margin-bottom:10px}
.quiz__bar i{display:block;height:100%;background:var(--brand);transition:width .3s ease}
.quiz__meta{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-3);margin-bottom:18px}
.quiz__stage .q{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff}
.quiz__nav{margin-top:18px}
.quiz__nav .btn{width:100%}
@media(min-width:640px){.quiz__nav .btn{width:auto;min-width:260px}}
.q--muestra{border:1px solid var(--brand-line);border-radius:var(--r-lg);padding:22px;background:#fff;margin-top:14px}
.q--muestra .opt{display:flex;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);margin-bottom:8px}

.score{display:flex;flex-wrap:wrap;gap:18px;align-items:center;border-radius:var(--r-lg);padding:22px 24px;
  border:1px solid var(--line);background:#fff}
.score--ok{border-color:var(--brand-line);background:var(--brand-soft)}
.score--bad{border-color:#F3C6AA;background:var(--accent-soft)}
.score__n b{display:block;font-size:44px;font-weight:900;line-height:1;letter-spacing:-.03em}
.score__n span{font-size:13px;color:var(--ink-3)}
.score__cmp{flex:1 1 240px;font-size:16px;color:var(--ink-2)}
.score__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 8px}
.save{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:#fff;margin-top:22px}
.save h3{margin-bottom:6px}

/* --- e-mail capture --- */
.aviso{border:1px solid var(--brand-line);border-radius:var(--r-lg);background:linear-gradient(180deg,#fff,var(--brand-soft));padding:22px 24px}
.aviso h3{margin-bottom:6px;font-size:19px}
.aviso__txt{color:var(--ink-2);font-size:15px;margin-bottom:14px}
.aviso__row{display:flex;flex-wrap:wrap;gap:10px}
.aviso__row input[type=email]{flex:1 1 220px;min-width:0}
.aviso__row select{flex:0 1 200px}
.aviso__row .btn{flex:0 0 auto}
.aviso__optin{margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.aviso__legal{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.aviso__out{margin-top:10px;font-size:14px}
.aviso__bad{color:#B3402A;font-weight:600}
.aviso--sm{padding:18px}
.aviso--sm h3{font-size:17px}
.sidebox{margin:24px 0}
@media(min-width:1000px){
  .sidebox{float:right;width:320px;margin:6px 0 22px 30px}
}

/* --- source side panel --- */
.srcpanel{position:fixed;inset:0 0 0 auto;width:min(420px,92vw);background:#fff;z-index:80;
  box-shadow:-14px 0 40px -20px rgba(0,0,0,.35);border-left:1px solid var(--line);overflow:auto}
.srcpanel__in{padding:26px 24px}
.srcpanel__x{position:absolute;top:12px;right:14px;border:0;background:transparent;font-size:26px;line-height:1;
  color:var(--ink-3);cursor:pointer;width:44px;height:44px;border-radius:10px}
.srcpanel__x:hover{background:var(--line-2)}
body.srcopen{overflow:hidden}

/* ================================================== conversión (lanzamiento) */
/* --urg-h is 0 by default: the launch bar sets it on <body>, so every sticky
   offset on the site stays right whether the bar is there or not. app.js
   re-measures the real height after paint, which is what keeps a two-line bar
   on a 390px phone from sitting on top of the header. */
:root{--urg-h:0px}
body.has-urg{--urg-h:56px}
/* A solid orange band, not a thin grey line: dark ink on the accent (6.4:1),
   and the countdown as three boxed units with their own label instead of a
   flat inline chip. app.js re-measures the real height into --urg-h, so every
   sticky offset on the site stays right whatever the band ends up measuring. */
.urg{position:fixed;top:0;left:0;right:0;z-index:80;min-height:var(--urg-h);
  background:var(--accent);color:var(--ink);
  display:flex;align-items:center;box-shadow:inset 0 -1px 0 rgba(122,67,16,.35),0 1px 0 rgba(15,42,51,.08)}
.urg__in{max-width:var(--wrap);margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:center;
  gap:8px 18px;flex-wrap:wrap;line-height:1.3;text-align:center}
.urg__txt{margin:0;font-size:14.5px;color:#3D2508;text-wrap:balance}
.urg__txt b{font-weight:800;color:var(--ink)}
.urg__short{display:none}
.urg__count{display:flex;align-items:stretch;gap:6px;font-variant-numeric:tabular-nums}
.urg__u{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;
  padding:4px 9px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 2px 6px -3px rgba(15,42,51,.4)}
.urg__u b{font-size:17px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.urg__u i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B4B24;margin-top:1px}
body.has-urg .hdr{top:var(--urg-h)}
body.has-urg{padding-top:calc(var(--hdr-h) + var(--urg-h))}
body.has-urg.has-hero{padding-top:var(--urg-h)}
@media(max-width:860px){
  .urg__in{gap:6px 12px;padding:7px 14px}
  .urg__txt{font-size:13.5px}
}
@media(max-width:559px){
  body.has-urg{--urg-h:78px}
  .urg__long{display:none}
  .urg__short{display:inline}
  .urg__in{flex-direction:column;gap:6px;padding:7px 12px}
  .urg__txt{font-size:13.5px}
  .urg__u{min-width:46px;padding:3px 7px}
  .urg__u b{font-size:16px}
  .urg__u i{font-size:9px}
}
@media(max-width:359px){
  .urg__in{padding:7px 10px}
  .urg__txt{font-size:12px}
  .urg__u{min-width:42px;padding:3px 6px}
}

/* price with the post-launch anchor next to it */
.price{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap}
.price__now{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.price__was{color:var(--ink-3);font-weight:600;text-decoration-thickness:2px}
.price--sm .price__now{font-size:19px}.price--sm .price__was{font-size:15px}
.price--md .price__now{font-size:27px}.price--md .price__was{font-size:17px}
.price--lg .price__now{font-size:38px}.price--lg .price__was{font-size:21px}
.prod__price .price__now{color:var(--brand-deep)}
.pricenote{font-size:13.5px;color:var(--ink-3);margin:6px 0 0}
.pricenote--hero{color:rgba(255,255,255,.86)}

/* trust strip under every purchase CTA */
.trust{margin:12px 0 0}
.trust__list{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;font-size:14px;color:var(--ink-2)}
.trust__list li{display:flex;align-items:center;gap:7px}
.trust__list li::before{content:"✓";color:var(--brand);font-weight:900}
.trust__note{font-size:12.5px;color:var(--ink-3);margin:7px 0 0;max-width:70ch}
.hero .trust__list,.closing .trust__list{color:rgba(255,255,255,.92)}
.hero .trust__list li::before,.closing .trust__list li::before{color:#fff}
.hero .trust__note,.closing .trust__note{color:rgba(255,255,255,.75)}

/* sticky purchase bar, phones only */
.ctabar{display:none}
@media(max-width:768px){
  .ctabar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;align-items:center;justify-content:space-between;
    gap:12px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(15,42,51,.16);
    padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .ctabar__price{display:flex;align-items:baseline;gap:8px;line-height:1.2}
  .ctabar__price b{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink)}
  .ctabar__price s{color:var(--ink-3);font-size:13.5px}
  .ctabar .btn{padding:12px 18px;font-size:15px}
  body.has-ctabar{padding-bottom:86px}
  body.has-ctabar .ftr{margin-bottom:0}
}

/* temario: price rail on desktop, block on top on mobile */
.railed{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:34px;align-items:start}
.rail{position:sticky;top:calc(var(--hdr-h) + var(--urg-h,0px) + 18px)}
.rail__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.rail__facts{list-style:none;margin:14px 0 0;padding:0;font-size:15px;color:var(--ink-2)}
.rail__facts li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.rail__facts li:last-child{border-bottom:0}
.rail__facts b{color:var(--ink)}
@media(max-width:980px){
  .railed{grid-template-columns:1fr;gap:24px}
  .rail{position:static;order:-1}
}

/* diagnóstico: personalised purchase block above the e-mail capture */
.diagbuy{border:2px solid var(--brand-line);border-radius:var(--r);padding:22px;background:var(--brand-soft);margin:0 0 18px}
.diagbuy h3{margin-bottom:6px}
.diagbuy .btn{margin-top:6px}
.diagbuy__temas{margin:10px 0 0;padding-left:20px;color:var(--ink-2)}
.aviso--secundario{opacity:.96}

/* urgency framing block in a hero / on a category page */
.urgencia{border-left:4px solid var(--accent);background:rgba(239,138,60,.10);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:14px 18px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.urgencia b{font-weight:800}
.hero .urgencia{background:rgba(255,255,255,.13);color:#fff;border-left-color:#fff;margin:18px 0 20px;max-width:62ch;font-size:15px}
.compara__head{font-size:clamp(22px,3vw,30px)}
.pitch__precio{display:block;margin:0 0 4px}

/* ------------------------------------------------- cookie consent banner */
.ftr .linkish{background:none;border:0;padding:0;margin:0;font:inherit;color:#c3cfd6;cursor:pointer;text-align:left}
.ftr .linkish:hover{color:#fff;text-decoration:underline}
.cc{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 34px rgba(15,42,51,.18);padding:16px 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.cc[hidden]{display:none}
.cc__in{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap}
.cc__body{flex:1 1 420px;min-width:0}
.cc__txt{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cc__txt b{color:var(--ink)}
.cc__links{margin:4px 0 0;font-size:13px}
.cc__links a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.cc__more{margin-top:2px;font-size:13px}
.cc__more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  color:var(--brand-deep);font-weight:600;padding:4px 0}
.cc__more>summary::-webkit-details-marker{display:none}
.cc__more>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.cc__more[open]>summary::after{transform:rotate(-135deg)}
.cc__more p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3);max-width:78ch}
.cc__more a{text-decoration:underline;text-underline-offset:3px}
.cc__acts{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}
@media(max-width:768px){
  .cc{padding:14px 0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .cc__in{gap:12px}
  .cc__acts{width:100%}
  .cc__acts .btn{flex:1 1 auto;justify-content:center;text-align:center}
  body.has-ctabar .cc{bottom:72px}
}

/* ---------------------------------------------------------- prueba social (apagada)
   El bloque no se pinta mientras PRUEBA_SOCIAL.activa sea false en config.ts.
   Los estilos quedan listos para el dia que haya ventas reales que contar. */
.social{margin-top:22px}
.social__list{display:flex;flex-wrap:wrap;gap:14px 30px;list-style:none;margin:0;padding:0}
.social__list li{display:flex;flex-direction:column;gap:2px}
.social__list b{font-size:22px;color:var(--ink-1);line-height:1.1}
.social__list span{font-size:13.5px;color:var(--ink-3)}

/* Densidad en móvil: mismo contenido, menos aire muerto. Con el temario en
   desplegables esto es lo que remata la altura de las fichas largas. */
@media(max-width:640px){
  .prose h2{margin-top:22px;margin-bottom:8px}
  .prose h3{margin-top:18px;margin-bottom:6px}
  .prose p{margin:0 0 12px}
  .prose ul,.prose ol{margin:0 0 12px;padding-left:20px}
  .prose li{margin-bottom:5px}
  .card{padding:16px}
  .grid{gap:14px}
  .prod__facts li{padding:7px 0}
  .tblock{margin-top:16px}
}

/* =============================== diagnóstico: pantalla de resultado
   El resultado del diagnóstico ocupa una pantalla y solo una: nota,
   desglose corto y botón de compra visibles a la vez, sin scroll. Los
   escalones --c1/--c2/--c3 los aplica app.js midiendo el alto real de la
   ventana, así que en un móvil bajo el panel se aprieta en vez de cortarse. */
.diag-oculto{display:none!important}
.sec.diag-final{padding-top:14px;padding-bottom:26px}
.diagres{max-width:620px;margin:0 auto;background:var(--white);border:2px solid var(--brand-line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px 18px 16px;outline:none}
.diagres__eyebrow{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.diagres__kpi{display:flex;gap:10px;margin:0 0 14px}
.diagres__kpi div{flex:1 1 0;min-width:0;background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:var(--r);padding:11px 10px;text-align:center}
.diagres__kpi b{display:block;font-size:30px;line-height:1;font-weight:900;color:var(--brand);letter-spacing:-.03em}
.diagres__kpi span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.diagres__bloques{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--line-2)}
.diagres__bloques li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 2px;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2)}
.diagres__bloques li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diagres__bloques li b{flex:none;color:var(--ink);font-variant-numeric:tabular-nums}
.diagres__bloques li i{font-style:normal;font-weight:500;color:var(--ink-3);font-size:13px}
.diagres__tip{margin:0 0 13px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.diagres .btn{margin:0}
.diagres__trust{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center}
.diagres__links{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;
  margin:9px 0 0;font-size:13.5px;color:var(--ink-3)}
.diagres__sep{color:var(--line);text-decoration:none}
.diagres__links a,.diagres__links button{color:var(--brand-deep);font:inherit;background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.diagres--c1{padding:14px}
.diagres--c1 .diagres__eyebrow{margin-bottom:9px}
.diagres--c1 .diagres__kpi{margin-bottom:11px}
.diagres--c1 .diagres__kpi b{font-size:26px}
.diagres--c1 .diagres__bloques li{padding:5px 2px;font-size:14px}
.diagres--c2 .diagres__eyebrow{font-size:12px;margin-bottom:7px}
.diagres--c2 .diagres__kpi div{padding:8px}
.diagres--c2 .diagres__kpi b{font-size:23px}
.diagres--c2 .diagres__tip{font-size:14px;margin-bottom:10px}
.diagres--c2 .btn{padding:12px 18px;font-size:15.5px}
.diagres--c3 .diagres__tip{display:none}
.diagres--c3 .diagres__trust{display:none}
/* El botón de entrega se pega abajo en cuanto están las 8 contestadas, para
   que nadie tenga que buscarlo después de la última pregunta. */
.diagsend{margin-top:18px}
.diagsend.is-listo{position:sticky;bottom:14px;z-index:40}
.diagsend.is-listo .btn{box-shadow:0 16px 34px -14px rgba(239,138,60,.85)}

/* ---------------------------------------------------------- cuenta atrás
   La landing de anuncio de Enfermería repite en el héroe el dato que cierra la
   venta: hasta cuándo vale el precio de lanzamiento. Va en naranja sobre el
   teal para que se lea antes que el texto, y el número lo escribe el servidor
   en cada visita desde la tabla de precios con fecha. */
.hero .cuenta{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:9px 16px;
  background:var(--accent);color:#fff;border-radius:var(--r-pill);font-weight:800;line-height:1.35;
  font-size:clamp(13.5px,1.5vw,16px);box-shadow:0 8px 22px -10px rgba(239,138,60,.85)}