*,*::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);font-weight:500;line-height:1.4}
small{font-weight:500;line-height:1.4}
.nb{white-space:nowrap}
.wrap .lede{max-width:none!important}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.stack>*+*{margin-top:16px}
.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:300;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:700}
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}

/* Keep desktop navigation visible from 1024px with compact link spacing. */
@media(min-width:1024px) and (max-width:1289px){
  .nav a,.nav__grp>summary{padding:8px 7px;font-size:13.5px}
  .hdr__cta-lg{display:none}
  .hdr__cta-sm{display:inline}
}
@media(max-width:1023px){
  .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:15px;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}
/* The hero blocks take the width the wrap gives them. No block inside the page
   container declares a measure of its own: a 19ch headline inside a 1120px
   wrap broke the title into three short lines and left "1." alone on a line of
   its own in the paragraph below it. text-wrap:balance still evens out the
   lines it does need. */
.hero h1{color:#fff;font-weight:900;margin:16px 0 14px;text-wrap:balance}
.hero p.wrap .lede{max-width:none!important}
.lede{font-size:clamp(16.5px,2.1vw,20px);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);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;text-wrap:balance}
.hero__sub{font-size:clamp(16.5px,2.1vw,20px);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}
/* The figure never wraps: "5.797" and "1.462" are one token each, and a number
   split over two lines is not a number any more. */
.counter b{display:block;font-size:30px;font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff;white-space:nowrap}
/* The label fills its grid column; the column is the measure. */
.counter span{display:block;font-size:13px;color:rgba(255,255,255,.8);margin-top:7px;line-height:1.35}

/* ---------------------------------------------------------- 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{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:16px}
.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:16px;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:24px 16px;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:16px;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:16px}
.prod__top>div:first-child{flex:1 1 auto;min-width:0}
.prod__top>div:last-child{flex:none;text-align:right}
/* "Grupo C2" is a label and a code: one line, or the code ends up alone. */
.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);white-space:nowrap}
.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}
/* The value column never shrinks and never wraps: "731 / 731" was coming out
   as "731 /" over "731". The label column is the one that gives, and it may
   shrink below its content because min-width:0 lets it. */
.prod__facts li span{min-width:0}
.prod__facts li b{color:var(--ink-2);font-weight:600;text-align:right;flex:0 0 auto;white-space:nowrap}
.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
   Auto table layout hands the leftover width to whichever column can break
   its content the hardest, so the short columns starve: "Tema 1" came out as
   "Tema" over "1", "39 preguntas" as "39" over "preguntas", "180 días" as
   "180" over "días". Two rules fix the whole family, on every table, in both
   languages: cells never break INSIDE a word, and a cell marked as short
   keeps its line. The horizontal scroller absorbs what is left on a phone. */
.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;overflow-wrap:normal;word-break:normal;hyphens:none}
.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)}
/* A figure, a label and a figure, a duration, a level: one line, always. */
.td--tight,.table th.td--tight{white-space:nowrap}
/* "Tema 12" over "de 38 · n.º 4 del bloque": two lines on purpose, neither of
   them allowed to break further. */
.td--tema{white-space:nowrap}
.td--tema>span{display:block;white-space:nowrap}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
/* A four-column data table is not prose and must not inherit the reading
   measure of the paragraph above it: inside the 760px legal column the cookie
   table was giving the "Tipo" column 196px and breaking "Técnica, exenta de
   consentimiento" over three lines. The paragraphs keep their measure; the
   table takes the full width of the page container it already sits in.
   `.narrow` is left-aligned inside `.wrap`, so no re-centring is needed. */
.narrow>.prose>.scroll-x{width:min(calc(var(--wrap) - 40px),calc(100vw - 40px))}
/* Below that width the four columns have nothing left to give and the text
   starts breaking into stubs again, so the table keeps its shape and the
   scroller takes over — the same bargain the temario tables already make.
   Nothing overflows the page: .scroll-x is the only thing that scrolls. */
.narrow>.prose>.scroll-x>.table{min-width:880px}

/* ---------------------------------------------------------- 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(4,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,.ftr__group{min-width:0}
.ftr__group>.ftr__col+*{margin-top:24px}
.ftr a{display:inline-block;padding:4px 0}
.ftr__bar{flex-direction:column;align-items:stretch}
.ftr__bar>.ftr__disc{flex:auto}
/* The grid column is the measure. A 34ch cap on top of a 1.6fr track was a
   second limit inside the first, and it broke the blurb into short lines. */
.ftr__me{min-width:0}
.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;min-width:0}
.ftr__meta{flex:0 1 auto}
.ftr__meta a{color:#b6c6cf;text-decoration:underline;text-underline-offset:3px}

@media(max-width:1024px){
  .ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 30px}
  .ftr__me{grid-column:1/-1}
}
@media(max-width:760px){
  .ftr{padding-top:48px}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 30px}
}
@media(max-width:520px){
  .ftr__cols{grid-template-columns:minmax(0,1fr);gap:24px}
  .ftr__me{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{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}
@media(min-width:1024px){
  .product-intro{grid-template-columns:2fr 1fr}
  .product-intro .lpfold__lede{margin-bottom:12px}
  .product-intro .kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-intro .kpi div{min-width:0;padding:16px}
}
.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:16px;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:12px 30px;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}
  body{font-size:16px}
  h1{font-size:30px}
  h2{font-size:26px}
  .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}
/* "7 temas" is a count and its unit: they belong on the same line, and the
   count column must not be squeezed to the width of the digit. */
.tsec>summary>.muted,.tblock>summary>.muted,.card--fold>summary>.muted{flex:0 0 auto;white-space:nowrap}
.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{width:100%}
.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(--accent)}
.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(--accent)}
.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;width:100%}
.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;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)}
.cc__more a{text-decoration:underline;text-underline-offset:3px}
.cc__acts{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap;align-items:center}
/* Accept is the primary action: the accent button at full weight, last in the
   row because every other CTA on this site sits on the right. Refusing is the
   quiet option NEXT TO IT — same row, same first layer, one click, a real
   44px-high button with a visible border and an AA-contrast label. It is
   simply grey instead of orange. */
.cc__yes{padding:11px 22px;font-size:15px;white-space:nowrap}
.cc__no{order:-1;background:none;border:1px solid var(--line);color:var(--ink-3);
  font:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;
  padding:11px 16px;border-radius:10px;min-height:44px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.cc__no:hover{color:var(--ink-2);border-color:var(--ink-3);background:var(--sand-2)}
.cc__no:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px}
@media(max-width:768px){
  .cc{padding:14px 0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .cc__in{gap:12px}
  /* Both answers stay on ONE row on a phone, so neither needs a scroll inside
     the banner. Accept takes the room that is left over; refuse keeps its own
     width and never shrinks below a comfortable tap target. */
  .cc__acts{width:100%;flex-wrap:nowrap}
  .cc__acts .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .cc__no{flex:0 1 auto;padding:11px 14px}
  body.has-ctabar .cc{bottom:72px}
}
@media(max-width:359px){
  .cc__no,.cc__yes{padding-left:11px;padding-right:11px;font-size:13.5px}
}

/* ---------------------------------------------------------- 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:16px}
  .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}
/* ------------------------------------------------------------- la captura
   El paso del resultado: misma caja que el informe, en el mismo sitio de la
   pantalla, así que no es un cartel que interrumpe sino la pantalla siguiente.
   Un campo, una casilla y el botón, todo a lo ancho de la caja. */
.capt__lede{margin:0 0 14px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.capt__email{display:block;width:100%;margin:0 0 12px;font-size:16px}
.capt__optin{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.capt .btn{width:100%}
.capt__out{margin-top:10px;font-size:14px}
.capt__legal{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.capt__legal a{color:var(--brand-deep)}
.diagres--c1 .capt__lede{margin-bottom:11px;font-size:15px}
.diagres--c2 .capt__legal{font-size:11.5px;margin-top:9px}
.diagres--c3 .capt__lede{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)}

/* =============================== diagnostico: una pregunta por pantalla
   El diagnostico deja de ser una pagina larga con un boton al final. Se
   muestra UNA pregunta, con su barra de progreso arriba y un enlace discreto
   de vuelta abajo, y al marcar una opcion se pasa sola a la siguiente. Todo
   esto lo enciende app.js: sin JavaScript no se aplica nada de aqui y la
   pagina se queda como el formulario largo de siempre. */
.diagtop{position:sticky;top:calc(var(--hdr-h) + var(--urg-h,0px));z-index:30;
  background:var(--bg);padding:8px 0 10px;margin:0 0 10px}
.diagtop__row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.diagtop__n{margin:0;flex:1 1 auto;font-size:13.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3)}
.diagtop__n b{color:var(--brand);font-size:16px;font-weight:900}
.diagtop__cat{flex:0 0 auto;margin:0}
.diagtop__cat select{max-width:170px;padding:7px 10px;font-size:13.5px;border-radius:var(--r-sm)}
.diagtop__rail{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.diagtop__rail i{display:block;height:100%;width:12.5%;border-radius:999px;
  background:var(--brand);transition:width .25s ease}

.diag-pasos .q{display:none;margin-bottom:0}
.diag-pasos .q.is-actual{display:block}
.diag-pasos .q__n{display:none}
.diag-pasos .diagsend{display:none}
.diag-pasos .opt.is-elegida{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand) inset}
.diag-pasos.diag-calculando .q{opacity:.45;pointer-events:none}
.diagatras{margin:12px 0 0;text-align:center}
.diagatras button{background:none;border:0;padding:6px 10px;font:inherit;font-size:14px;
  color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.diagatras button:hover{color:var(--brand)}
/* Mientras se contesta, la pantalla es solo la pregunta: ni cabecera larga de
   la pagina, ni pie, ni bloques de debajo. */
body.diag-paso .diag-intro{display:none}
body.diag-paso #diag-sec{padding-top:0;padding-bottom:10px}
body.diag-paso #diag-sec .wrap{max-width:680px}
body.diag-paso .ftr{display:none}
body.diag-paso #aviso-slot{display:none}
/* Escalones de compactado: app.js mide el alto real de la ventana y aprieta
   hasta que la pregunta cabe sin scroll, tambien en un movil de 390x844 con el
   aviso de cookies abierto. */
.diag-pasos.diagq--c1 .q{padding:14px}
.diag-pasos.diagq--c1 .opt{padding:10px 12px;margin-bottom:7px}
.diag-pasos.diagq--c1 .q__stem{margin-bottom:11px}
.diag-pasos.diagq--c2 .q__stem{font-size:15.5px}
.diag-pasos.diagq--c2 .opt{font-size:15px;padding:9px 11px;margin-bottom:6px}
.diag-pasos.diagq--c3 .q__stem{font-size:14.5px;line-height:1.45;margin-bottom:9px}
.diag-pasos.diagq--c3 .opt{font-size:14px;line-height:1.38;padding:8px 10px;margin-bottom:5px}
.diag-pasos.diagq--c4 .q{padding:11px}
.diag-pasos.diagq--c4 .q__stem{font-size:13.5px;line-height:1.38;margin-bottom:8px}
.diag-pasos.diagq--c4 .opt{font-size:13px;line-height:1.34;padding:7px 9px;margin-bottom:4px}
.diag-pasos.diagq--c5 .q{padding:8px;border-radius:10px;box-shadow:none}
.diag-pasos.diagq--c5 .q__stem{font-size:12.5px;line-height:1.32;margin-bottom:6px}
.diag-pasos.diagq--c5 .opt{font-size:12.5px;line-height:1.28;padding:5px 8px;margin-bottom:3px}
.diag-pasos.diagq--c5 .opt input{margin-top:2px}
/* La barra de progreso y el enlace de atras tambien encogen: son chrome, y el
   sitio que ocupan es sitio que le falta a la pregunta. */
body.diagq--c3 .diagtop{padding:6px 0 8px;margin-bottom:8px}
body.diagq--c4 .diagtop{padding:4px 0 6px;margin-bottom:6px}
body.diagq--c4 .diagtop__n{font-size:11.5px}
body.diagq--c4 .diagtop__rail{height:5px}
body.diagq--c4 .diagatras{margin-top:7px}
body.diagq--c4 .diagatras button{font-size:13px;padding:3px 8px}
body.diagq--c5 .diagtop{padding:2px 0 5px;margin-bottom:5px}
body.diagq--c5 .diagtop__cat select{padding:4px 7px;font-size:12px}
body.diagq--c5 .diagatras{margin-top:5px}
@media(max-width:520px){
  .diagtop__cat select{max-width:148px}
  .diagtop__n{font-size:12.5px}
}

/* =============================== primera pantalla en móvil (fichas y landings)
   En 390x844 el precio y los dos botones caían por debajo del pliegue: nadie
   veía el precio ni el tema gratis sin hacer scroll. Debajo de 760px la
   columna de la ficha se ordena titular → una línea de beneficio → precio →
   botones, y los contadores, el sello de garantías y la letra pequeña bajan
   detrás. En escritorio no cambia nada: el orden del código es el de siempre. */
@media(max-width:760px){
  .lpfold{display:flex;flex-direction:column;min-width:0}
  .lpfold>*{order:6}
  .lpfold>.prod__grupo{order:1;align-self:flex-start}
  .lpfold>h1{order:2}
  .lpfold>.lpfold__lede{order:3;font-size:17px;line-height:1.45;margin:0}
  .lpfold>.prod__price{order:4;margin:12px 0 2px}
  .lpfold>.pricenote{order:4;margin:0}
  .lpfold>.prod__cta{order:5;margin-top:12px}
  .lpfold>.kpi{margin:20px 0 0}
  .lpfold>.trust{margin-top:14px}
  .crumbs{margin-bottom:10px}

  /* El hero de las landings de anuncio ya lleva ese orden en el código; aquí
     solo se le quita aire para que los dos botones entren en la primera
     pantalla con el banner de cookies puesto. */
  .hero{padding-top:calc(var(--hdr-h) + 18px);padding-bottom:52px}
  .hero h1{margin:12px 0 10px}
  .hero .cuenta{margin-top:12px;padding-top:8px;padding-bottom:8px}
  .hero .cta{margin-top:16px}
  .hero .counters{margin-top:20px;padding-top:18px}
}