/* ============================================================================
   Electricista Urgente Barcelona: design system
   ----------------------------------------------------------------------------
   Same component system as the Madrid site, re-themed with the brand that
   electricistabarcelona24.com already uses: black #000, yellow #FFD338 and a
   night blue #16202F, set in Poppins. Yellow is the action colour: on this
   site yellow means "this gets you a technician". It is a FILL colour with
   black text on it; yellow text on white fails contrast, so accents on light
   backgrounds use --acc (a deep gold), and dark sections switch --acc back to
   the brand yellow.
   ========================================================================== */



@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-400-latin.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-400-latin-ext.woff2)format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500-latin.woff2)format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500-latin-ext.woff2)format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600-latin.woff2)format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600-latin-ext.woff2)format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700-latin.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-700-latin-ext.woff2)format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-800-latin.woff2)format('woff2');font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-800-latin-ext.woff2)format('woff2');font-weight:800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* "red" is kept as the token NAME for the action colour so the component
     rules read the same as on the Madrid site; its value is the brand yellow. */
  --red:#ffd338; --red-hi:#ffdc5e; --red-lo:#6b5200; --red-tint:#fff8db; --on-red:#000;
  --acc:#8a6500; --acc-bd:#e0b400; --err:#b42318;
  --teal:#16202f; --teal-hi:#2f4466; --teal-tint:#eef1f6;
  --wa:#1eaf54;
  --ink:#000; --ink-2:#16202f; --ink-3:#252930;
  --text:#14161a; --muted:#565c66; --muted-2:#7d838d;
  --paper:#fff; --paper-2:#f6f6f4; --paper-3:#eeeeea;
  --line:#e4e4df; --line-2:#d4d4cf;
  --amber:#f2b705;
  --wrap:1180px; --gut:clamp(16px,4vw,28px);
  --r-s:8px; --r:12px; --r-l:18px; --r-xl:26px;
  --sh-s:0 1px 2px rgba(16,20,28,.06),0 1px 1px rgba(16,20,28,.04);
  --sh:0 4px 16px -4px rgba(16,20,28,.12),0 2px 6px -2px rgba(16,20,28,.06);
  --sh-l:0 24px 48px -16px rgba(16,20,28,.24),0 8px 20px -8px rgba(16,20,28,.12);
  --sans:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:Poppins,var(--sans);
}
/* Dark surfaces: accents go back to the brand yellow. */
.topbar,.hero,.phero,.sec--ink,.cta,.ftr,.aside__box--ink,.bk__est{--acc:#ffd338;--acc-bd:#ffd338}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--text);
  background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01";overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
/* Inline icon SVGs are emitted without width/height attributes, so without a
   default they fall back to the SVG intrinsic 300x150 and wreck whatever line
   they sit on — which is how "Ver qué hacer →" ended up on four lines inside
   a card. This is a floor, not a decision: every context that wants a
   different size sets it with a class selector, which outranks this. */
svg{display:block;width:1em;height:1em;flex:0 0 auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal-hi);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.1;letter-spacing:-.022em;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.35rem + 2.9vw,3.5rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.4rem)}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.35rem);letter-spacing:-.015em}
h4{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:650}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-n{max-width:820px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:var(--on-red);padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}

/* ---- buttons -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:-.01em;
  padding:.86em 1.35em;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
  text-align:center;line-height:1.2;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:0 0 auto;width:1.15em;height:1.15em}
.btn--call{background:var(--red);color:var(--on-red);box-shadow:0 6px 18px -6px rgba(230,180,0,.55)}
.btn--call:hover{background:var(--red-hi);box-shadow:0 10px 26px -8px rgba(230,180,0,.6)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 6px 18px -6px rgba(30,175,84,.5)}
.btn--wa:hover{background:#199c49}
.btn--book{background:var(--ink);color:#fff}
.btn--book:hover{background:var(--ink-3)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn--on-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.btn--on-dark:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}
.btn--sm{font-size:.9rem;padding:.6em 1em;min-height:40px;border-radius:var(--r-s)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn-row>.btn{flex:1 1 auto;min-width:min(100%,220px)}

/* ---- top bar + header ----------------------------------------------- */
.topbar{background:var(--ink);color:#cfd3da;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.07)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px}
.topbar b{color:#fff}
.topbar__badge{display:inline-flex;align-items:center;gap:.45em;color:#fff;font-weight:600}
.topbar__dot{width:7px;height:7px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.22)}
.topbar__links{display:flex;gap:1.1rem;align-items:center}
.topbar__links a:hover{color:#fff}
@media (max-width:800px){.topbar__links{display:none}}

.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.hdr--stuck{box-shadow:var(--sh)}
.hdr__in{display:flex;align-items:center;gap:1.2rem;min-height:66px}
.hdr__logo{flex:0 0 auto;display:block}
.hdr__logo img{height:34px;width:auto}
.hdr__nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.hdr__cta{display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
@media (max-width:1060px){.hdr__nav{display:none}}
/* Below 560px the header has room for the logo, one call button and the
   burger, and nothing else. The booking CTA is not lost — it is the middle
   button of the sticky action bar, which is always on screen on a phone. */
@media (max-width:560px){
  .hdr__cta [data-bk-open]{display:none}
  .hdr__logo img{height:29px}
  .hdr__in{gap:.5rem;min-height:60px}
  .hdr__cta .btn{padding:.55em .8em}
  .burger{width:42px;height:40px}
}
@media (max-width:380px){.hdr__cta .btn span{font-size:.86rem}}

.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:.3em;padding:.6rem .72rem;border-radius:var(--r-s);
  font-weight:600;font-size:.94rem;color:var(--text);white-space:nowrap;
  /* The dropdown triggers are real <button>s for keyboard and screen-reader
     support, so the UA's border, background and font have to be reset here or
     they render as grey boxes next to the plain <a> items. */
  background:none;border:0;cursor:pointer;font-family:inherit;line-height:1.2}
.nav__link:hover{background:var(--paper-2);color:var(--acc)}
.nav__link[aria-current]{color:var(--acc)}
.nav__caret{width:.62em;height:.62em;opacity:.5;transition:transform .18s ease}
.nav__item:hover .nav__caret{transform:rotate(180deg)}
.nav__drop{position:absolute;top:calc(100% + 6px);left:0;min-width:290px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop--wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.nav__drop a{display:block;padding:.55rem .7rem;border-radius:var(--r-s);font-size:.9rem;font-weight:550;line-height:1.35}
.nav__drop a:hover{background:var(--red-tint);color:var(--red-lo)}
.nav__drop a span{display:block;font-size:.79rem;font-weight:450;color:var(--muted-2);margin-top:1px}
.nav__drop a:hover span{color:var(--red-lo);opacity:.75}
.nav__more{padding:.55rem .7rem;margin-top:.2rem;border-top:1px solid var(--line);font-size:.85rem;font-weight:700;color:var(--acc)}

.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-2);border-radius:var(--r-s);
  width:46px;height:44px;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;position:relative;transition:.2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text);border-radius:2px;transition:.2s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1060px){.burger{display:inline-flex}}

.mobnav{display:none;border-top:1px solid var(--line);background:#fff;max-height:calc(100dvh - 104px);overflow-y:auto}
.mobnav[data-open]{display:block}
.mobnav__in{padding:.6rem 0 1.2rem}
.mobnav details{border-bottom:1px solid var(--line)}
.mobnav summary{list-style:none;cursor:pointer;padding:.9rem .2rem;font-family:var(--disp);font-weight:700;
  display:flex;align-items:center;justify-content:space-between}
.mobnav summary::-webkit-details-marker{display:none}
.mobnav summary::after{content:"+";font-size:1.35rem;color:var(--muted-2);line-height:1}
.mobnav details[open] summary::after{content:"–"}
.mobnav__sub{padding:0 0 .8rem;display:grid;gap:.1rem}
.mobnav__sub a{padding:.5rem .2rem;font-size:.94rem;color:var(--muted);border-radius:var(--r-s)}
.mobnav__sub a:hover{color:var(--acc)}
.mobnav>.wrap>a.mobnav__top{display:block;padding:.9rem .2rem;font-family:var(--disp);font-weight:700;border-bottom:1px solid var(--line)}
.mobnav__ctas{display:grid;gap:.55rem;padding-top:1rem}

/* ---- hero ------------------------------------------------------------ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;opacity:.42}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,rgba(14,16,19,.96) 0%,rgba(14,16,19,.82) 44%,rgba(14,16,19,.42) 72%,rgba(14,16,19,.62) 100%)}
.hero::after{content:"";position:absolute;left:-14%;top:-38%;width:62%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(255,211,56,.30),transparent 68%);filter:blur(14px)}
.hero__in{padding-block:clamp(2.6rem,7vw,5.4rem);position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media (max-width:940px){.hero__grid{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:.79rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;padding:.42em .9em;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:#fff;margin-bottom:1.1rem}
.eyebrow--live .topbar__dot{background:#2ecc71}
.hero h1{margin-bottom:.6rem;text-wrap:balance}
.hero h1 em{font-style:normal;color:#ffd338;background:linear-gradient(180deg,#ffe27a,#ffc800);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__lead{font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);color:#d3d7df;max-width:60ch;margin-bottom:1.6rem}
.hero__ticks{display:flex;flex-wrap:wrap;gap:.45rem .95rem;margin-top:1.3rem;font-size:.88rem;color:#c9cdd6}
.hero__ticks li{display:flex;align-items:center;gap:.4em;list-style:none}
.hero__ticks svg{width:1em;height:1em;color:#4fd07d;flex:0 0 auto}
.hero__ticks ul{display:contents}
ul.hero__ticks{padding:0;margin-top:1.3rem}
.hero__card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:clamp(1.1rem,2.4vw,1.6rem);backdrop-filter:blur(10px)}
.hero__card h2{font-size:1.16rem;color:#fff;margin-bottom:.3rem}
.hero__card p{font-size:.9rem;color:#c3c8d1;margin-bottom:1rem}
.hero__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.1rem;
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.13)}
.hero__stat b{display:block;font-family:var(--disp);font-size:1.28rem;font-weight:800;color:#fff;line-height:1.1}
.hero__stat span{font-size:.76rem;color:#a9b0bb;line-height:1.3;display:block;margin-top:.15rem}

/* ---- section scaffolding -------------------------------------------- */
.sec{padding-block:clamp(2.4rem,6vw,4.6rem)}
.sec--tight{padding-block:clamp(1.8rem,4vw,3rem)}
.sec--paper{background:var(--paper-2)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink p{color:#c3c8d1}
.sec__head{max-width:62ch;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head p{color:var(--muted);font-size:1.03rem}
.sec--ink .sec__head p{color:#adb4c0}
.kicker{display:block;font-family:var(--disp);font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--acc);margin-bottom:.5rem}
.sec--ink .kicker{color:#ffd338}
.lede{font-size:1.08rem;color:var(--muted)}

/* ---- trust bar ------------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.trust__i{background:#fff;padding:1.25rem 1.2rem}
.trust__i svg{width:26px;height:26px;color:var(--acc);margin-bottom:.65rem}
.trust__i h3{font-size:.99rem;font-weight:700;margin-bottom:.25rem;letter-spacing:-.01em}
.trust__i p{font-size:.87rem;color:var(--muted);line-height:1.5}

/* ---- generic card grids --------------------------------------------- */
.grid{display:grid;gap:clamp(.8rem,1.6vw,1.1rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:1.3rem;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;position:relative}
a.card:hover{border-color:var(--acc-bd);box-shadow:var(--sh);transform:translateY(-2px)}
.card h3{margin-bottom:.35rem}
.card p{font-size:.9rem;color:var(--muted);line-height:1.55}
.card__ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--red-tint);color:var(--acc);margin-bottom:.85rem}
.card__ico svg{width:20px;height:20px}
.card__more{display:inline-flex;align-items:center;gap:.35em;margin-top:.85rem;
  font-family:var(--disp);font-weight:800;font-size:.86rem;color:var(--acc);white-space:nowrap}
.card__more svg{width:1.05em;height:1.05em}
a.card:hover .card__more{gap:.6em}
.card--img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--img>img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card--img>div{padding:1.15rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.card--img .card__more{margin-top:auto;padding-top:.7rem}
.card__tag{position:absolute;top:.9rem;right:.9rem;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:.28em .6em;border-radius:999px;
  background:var(--ink);color:#fff}
.card__tag--urg{background:var(--red);color:var(--on-red)}

/* ---- zone chips ------------------------------------------------------ */
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.6rem}
.zone{display:flex;flex-direction:column;gap:.15rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.8rem .95rem;transition:.16s ease}
.zone:hover{border-color:var(--acc-bd);background:var(--red-tint);transform:translateY(-1px)}
.zone b{font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.zone span{font-size:.78rem;color:var(--muted-2)}
.zone:hover span{color:var(--red-lo)}
.zone--hq{border-color:var(--acc-bd);box-shadow:inset 0 0 0 1px var(--acc-bd)}

/* ---- steps ----------------------------------------------------------- */
.steps{counter-reset:s;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.step{position:relative;padding:1.4rem 1.3rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-l)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:1.3rem;
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--red);
  color:var(--on-red);font-family:var(--disp);font-weight:800;font-size:1.02rem;box-shadow:0 4px 12px -3px rgba(230,180,0,.5)}
.step h3{margin:.7rem 0 .35rem}
.step p{font-size:.9rem;color:var(--muted)}
.sec--ink .step{background:var(--ink-2);border-color:rgba(255,255,255,.11)}

/* ---- checklist / ordered how-to ------------------------------------- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;line-height:1.5}
.checks svg{flex:0 0 auto;width:20px;height:20px;color:var(--teal);margin-top:.15rem}
.steps-num{list-style:none;counter-reset:n;padding:0;margin:0;display:grid;gap:.85rem}
.steps-num li{counter-increment:n;position:relative;padding-left:2.7rem;font-size:.99rem;line-height:1.55}
.steps-num li::before{content:counter(n);position:absolute;left:0;top:-1px;width:26px;height:26px;
  border-radius:8px;display:grid;place-items:center;background:var(--ink);color:#fff;
  font-family:var(--disp);font-weight:800;font-size:.85rem}
.warn{display:flex;gap:.8rem;padding:1.05rem 1.15rem;border-radius:var(--r);
  background:#fff8f2;border:1px solid #f3d9bd;font-size:.94rem;line-height:1.55}
.warn svg{flex:0 0 auto;width:22px;height:22px;color:#c9750f;margin-top:.1rem}
.warn strong{color:#8a4d05}

/* ---- causes table ---------------------------------------------------- */
.causes{display:grid;gap:.7rem;counter-reset:c}
.cause{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:1.05rem 1.15rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);align-items:start}
.cause::before{counter-increment:c;content:counter(c);width:28px;height:28px;border-radius:8px;
  background:var(--paper-3);color:var(--muted);display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:.86rem}
.cause:first-child::before{background:var(--red);color:var(--on-red)}
.cause b{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.012em;margin-bottom:.2rem}
.cause p{font-size:.9rem;color:var(--muted);margin:0}

/* ---- data table (facts LLMs can quote) ------------------------------ */
.facts{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.facts th,.facts td{padding:.78rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th{width:38%;font-weight:650;color:var(--muted);background:var(--paper-2);font-size:.88rem}
.facts td{font-weight:550}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-l)}

/* ---- price band ------------------------------------------------------ */
.price{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  padding:1.35rem 1.5rem;background:var(--ink);color:#fff;border-radius:var(--r-l)}
.price__n{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  line-height:1;letter-spacing:-.03em}
.price__n small{font-size:.5em;font-weight:700;color:#a9b0bb;letter-spacing:0}
.price p{font-size:.85rem;color:#a9b0bb;margin:.35rem 0 0;max-width:46ch}

/* ---- reviews --------------------------------------------------------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-bottom:1.4rem}
.rev-score{display:flex;align-items:center;gap:.7rem}
.rev-score b{font-family:var(--disp);font-size:2.1rem;font-weight:800;line-height:1}
.stars{display:inline-flex;gap:1px;color:var(--amber)}
.stars svg{width:15px;height:15px}
.revs__nav{display:flex;gap:.4rem;flex:0 0 auto}
@media (max-width:640px){.revs__nav{display:none}}
.revs__btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.15s ease}
.revs__btn:hover{border-color:var(--acc-bd);color:var(--acc);background:var(--red-tint)}
.revs__btn svg{width:16px;height:16px}
.revs{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1rem;margin-inline:-.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rev{flex:0 0 clamp(258px,74vw,340px);scroll-snap-align:start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-l);padding:1.15rem}
.rev p{font-size:.92rem;line-height:1.55;margin:.6rem 0 .9rem}
.rev footer{display:flex;align-items:center;gap:.6rem;font-size:.83rem;color:var(--muted)}
.rev__av{width:32px;height:32px;border-radius:50%;background:var(--paper-3);display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:.85rem;color:var(--muted);flex:0 0 auto}
.rev__n{font-weight:650;color:var(--text)}

/* ---- FAQ (details = crawlable, no JS) ------------------------------- */
.faq{display:grid;gap:.6rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--line-2);box-shadow:var(--sh-s)}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 3rem 1.05rem 1.15rem;position:relative;
  font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:-.012em;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.15rem;top:1.32rem;width:10px;height:10px;
  border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
  transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg);top:1.42rem}
.faq summary:hover{color:var(--acc)}
.faq__a{padding:0 1.15rem 1.15rem;font-size:.95rem;color:var(--muted);line-height:1.6}

/* ---- CTA band -------------------------------------------------------- */
.cta{position:relative;background:var(--ink);color:#fff;border-radius:var(--r-xl);
  padding:clamp(1.6rem,4vw,2.8rem);overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;right:-8%;top:-52%;width:48%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(230,180,0,.5),transparent 68%)}
.cta__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
@media (max-width:800px){.cta__grid{grid-template-columns:1fr}}
.cta h2{margin-bottom:.45rem}
.cta p{color:#c3c8d1;max-width:56ch;margin:0}
.cta__btns{display:grid;gap:.6rem;min-width:min(100%,270px)}

/* ---- prose (blog / service body) ------------------------------------ */
.prose{font-size:1.045rem;line-height:1.72;max-width:none}
.prose>*+*{margin-top:1.15em}
.prose h2{margin-top:2.2em;margin-bottom:.55em;scroll-margin-top:88px}
.prose h3{margin-top:1.7em;margin-bottom:.4em;scroll-margin-top:88px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.35em;margin-top:.9em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--acc)}
.prose a{color:var(--acc);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2.5px}
.prose a:hover{color:var(--red-lo)}
.prose blockquote{margin:1.6em 0;padding:.15em 0 .15em 1.3em;border-left:3px solid var(--acc-bd);
  font-size:1.08em;color:var(--text)}
.prose img{border-radius:var(--r-l);margin-block:1.6em}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:.85rem;color:var(--muted-2);margin-top:.6em;text-align:center}
.prose code{background:var(--paper-3);padding:.15em .4em;border-radius:5px;font-size:.9em}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem;margin-block:1.6em}
.prose th,.prose td{padding:.7rem .9rem;border:1px solid var(--line);text-align:left}
.prose th{background:var(--paper-2);font-weight:650}

/* ---- article layout -------------------------------------------------- */
.art{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
@media (max-width:980px){.art{grid-template-columns:1fr}}
.aside{position:sticky;top:86px;display:grid;gap:1rem}
@media (max-width:980px){.aside{position:static}}
.aside__box{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-l);padding:1.2rem}
.aside__box h3{font-size:1.02rem;margin-bottom:.5rem}
.aside__box p{font-size:.88rem;color:var(--muted);margin-bottom:.9rem}
.aside__box--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.aside__box--ink h3{color:#fff}
.aside__box--ink p{color:#b8bec9}
.aside__list{display:grid;gap:.1rem}
.aside__list a{font-size:.9rem;padding:.42rem 0;color:var(--muted);border-bottom:1px solid var(--line)}
.aside__list a:last-child{border-bottom:0}
.aside__list a:hover{color:var(--acc)}
.toc{font-size:.9rem}
.toc a{display:block;padding:.35rem 0 .35rem .8rem;border-left:2px solid var(--line);color:var(--muted)}
.toc a:hover{border-color:var(--acc-bd);color:var(--acc)}

/* ---- breadcrumbs + meta --------------------------------------------- */
.crumbs{font-size:.83rem;color:var(--muted-2);padding-block:.9rem;display:flex;flex-wrap:wrap;gap:.3rem;
  align-items:center}
.crumbs a:hover{color:var(--acc);text-decoration:underline}
.crumbs span[aria-current]{color:var(--text);font-weight:550}
.crumbs svg{width:.7em;height:.7em;opacity:.5}
.hero .crumbs,.hero .crumbs a{color:#9aa2ae}
.hero .crumbs span[aria-current]{color:#e6e9ee}
.pmeta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.85rem;color:var(--muted-2);margin-bottom:1.4rem}
.pmeta b{color:var(--text);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:.35em;font-size:.78rem;font-weight:650;
  padding:.3em .7em;border-radius:999px;background:var(--paper-3);color:var(--muted)}
.pill--red{background:var(--red-tint);color:var(--red-lo)}
.pill--teal{background:var(--teal-tint);color:var(--teal)}

/* ---- page hero (interior pages) ------------------------------------- */
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(14,16,19,.95),rgba(14,16,19,.72) 62%,rgba(14,16,19,.5))}
.phero__in{padding-block:clamp(1.6rem,4vw,3rem) clamp(2rem,5vw,3.4rem)}
.phero h1{margin-bottom:.55rem;max-width:24ch;text-wrap:balance}
.phero__lead{font-size:clamp(1rem,.95rem + .3vw,1.14rem);color:#cfd4dc;max-width:62ch}
.phero__btns{margin-top:1.5rem}
.phero__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.phero__chips .pill{background:rgba(255,255,255,.1);color:#e2e6ec}

/* ---- sticky mobile action bar --------------------------------------- */
.actbar{position:fixed;bottom:0;left:0;right:0;z-index:80;display:none;
  transform:translateY(105%);visibility:hidden;transition:transform .24s cubic-bezier(.2,.7,.3,1),visibility .24s;
  background:rgba(14,16,19,.97);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.12);
  padding:.5rem calc(var(--gut)/1.6) max(.5rem,env(safe-area-inset-bottom))}
.actbar__in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}
/* Selector on the children rather than on `a`: the third item is a <button>
   (it opens the modal, it is not a link), and with an anchor-only rule it
   inherited neither the layout nor the icon size — which rendered a 3 cm
   calendar glyph on every phone. */
.actbar__in>*{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;padding:.5rem .2rem;border:0;border-radius:var(--r-s);cursor:pointer;
  font-family:var(--disp);font-size:.72rem;font-weight:700;color:#fff;letter-spacing:-.005em;
  text-align:center;line-height:1.1;min-height:48px}
.actbar__in>* svg{width:18px;height:18px;flex:0 0 auto}
.actbar__call{background:var(--red);color:var(--on-red)}
.actbar__wa{background:var(--wa)}
.actbar__book{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2)}
/* La barra no existe en la primera pantalla. En el hero ya hay llamada,
   WhatsApp y reserva: repetirlos encima roba altura de pantalla en el
   momento en el que el usuario aún está leyendo qué le ofreces. Aparece al
   pasar el hero, que es justo cuando los CTA del hero ya no se ven. */
.actbar.is-on{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.actbar{transition:none}}

/* El padding inferior se reserva desde el principio, aunque la barra aún no
   se vea: así al aparecer no empuja el contenido ni tapa el final del pie. */
@media (max-width:880px){.actbar{display:block}body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}}

/* ---- footer ---------------------------------------------------------- */
.ftr{background:var(--ink);color:#a9b0bb;font-size:.9rem;padding-block:clamp(2.2rem,5vw,3.4rem) 0;margin-top:clamp(2.4rem,6vw,4.6rem)}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h3{font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:.95rem}
.ftr a:hover{color:#fff}
.ftr__list{display:grid;gap:.5rem}
.ftr__logo img{height:38px;width:auto;margin-bottom:1rem}
.ftr__about{max-width:38ch;line-height:1.6}
.ftr__phones{display:grid;gap:.35rem;margin:1.1rem 0}
.ftr__phones a{font-family:var(--disp);font-weight:800;font-size:1.12rem;color:#fff;letter-spacing:-.02em}
.ftr__phones span{font-size:.78rem;color:#7c838f}
.ftr__badges{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.2rem}
.ftr__badges img{height:42px;width:auto;opacity:.9;background:#fff;border-radius:6px;padding:4px}
.ftr__social{display:flex;gap:.5rem;margin-top:1.2rem}
.ftr__social a{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)}
.ftr__social a:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
.ftr__social svg{width:17px;height:17px}
.ftr__legal{margin-top:clamp(1.8rem,4vw,2.6rem);padding-block:1.3rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;font-size:.8rem;color:#7c838f}
.ftr__legal nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}

/* ---- booking funnel modal ------------------------------------------- */
.bk{position:fixed;inset:0;z-index:120;display:none;padding:clamp(.5rem,3vw,2rem);
  align-items:center;justify-content:center;overscroll-behavior:contain}
.bk[data-open]{display:flex}
.bk__veil{position:absolute;inset:0;background:rgba(8,10,13,.72);backdrop-filter:blur(4px)}
.bk__panel{position:relative;width:100%;max-width:540px;max-height:min(94dvh,760px);
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-l);display:flex;flex-direction:column;overflow:hidden}
.bk__top{display:flex;align-items:center;gap:.8rem;padding:1rem 1.15rem;border-bottom:1px solid var(--line);flex:0 0 auto}
.bk__prog{flex:1;height:5px;border-radius:99px;background:var(--paper-3);overflow:hidden}
.bk__prog i{display:block;height:100%;background:var(--red);border-radius:99px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.bk__x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.bk__x:hover{background:var(--paper-2);border-color:var(--line-2)}
.bk__x svg{width:15px;height:15px}
.bk__back{background:none;border:0;padding:.35rem .5rem;margin-left:-.5rem;cursor:pointer;
  font-size:.85rem;font-weight:650;color:var(--muted);display:inline-flex;align-items:center;gap:.3em;border-radius:6px}
.bk__back:hover{color:var(--acc);background:var(--paper-2)}
.bk__back svg{width:.85em;height:.85em}
.bk__body{padding:1.3rem 1.15rem;overflow-y:auto;flex:1}
.bk__step{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--acc);margin-bottom:.5rem}
.bk__q{font-family:var(--disp);font-size:1.32rem;font-weight:800;letter-spacing:-.022em;line-height:1.2;margin:0 0 .3rem}
.bk__hint{font-size:.89rem;color:var(--muted);margin:0 0 1.1rem}
.bk__opts{display:grid;gap:.5rem}
.bk__opts--2{grid-template-columns:1fr 1fr}
@media (max-width:420px){.bk__opts--2{grid-template-columns:1fr}}
.bk__opt{display:flex;align-items:flex-start;gap:.7rem;text-align:left;width:100%;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:.85rem .95rem;
  cursor:pointer;transition:.14s ease;font-size:.96rem;line-height:1.35}
.bk__opt:hover{border-color:var(--acc-bd);background:var(--red-tint)}
.bk__opt[aria-pressed=true]{border-color:var(--acc-bd);background:var(--red-tint);box-shadow:inset 0 0 0 1px var(--acc-bd)}
.bk__opt b{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.012em}
.bk__opt span{display:block;font-size:.81rem;color:var(--muted-2);margin-top:.1rem}
.bk__opt[aria-pressed=true] span{color:var(--red-lo);opacity:.8}
.bk__opt-ico{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  background:var(--paper-3);color:var(--muted);font-size:.7rem;font-weight:800;margin-top:.05rem}
.bk__opt[aria-pressed=true] .bk__opt-ico{background:var(--red);color:var(--on-red)}
.bk__search{width:100%;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:.6rem}
.bk__search:focus{border-color:var(--teal-hi);outline:none}
.bk__scroll{max-height:min(46dvh,340px);overflow-y:auto;display:grid;gap:.4rem;padding-right:.15rem}
.bk__field{display:block;margin-bottom:.85rem}
.bk__field span{display:block;font-size:.85rem;font-weight:650;margin-bottom:.35rem}
/* "opcional" / "para llamarte y confirmar" junto a la etiqueta: dice lo mismo
   que un asterisco sin obligar a nadie a buscar qué significa el asterisco. */
.bk__field em{font-style:normal;font-weight:450;color:var(--muted-2);font-size:.93em}
.bk__field input,.bk__field textarea,.bk__field select{width:100%;padding:.8rem .95rem;
  border:1.5px solid var(--line);border-radius:var(--r);background:#fff}
.bk__field input:focus,.bk__field textarea:focus,.bk__field select:focus{border-color:var(--teal-hi);outline:none}
.bk__field textarea{min-height:78px;resize:vertical}
.bk__err{font-size:.85rem;color:var(--err);font-weight:600;margin:.5rem 0 0}
.bk__foot{padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--line);flex:0 0 auto;background:var(--paper-2)}
.bk__legal{font-size:.75rem;color:var(--muted-2);margin:.7rem 0 0;line-height:1.45;text-align:center}
/* Sustituye al botón en los pasos donde el toque ya es la respuesta. */
.bk__hintfoot{margin:0;text-align:center;font-size:.88rem;font-weight:600;color:var(--muted)}
.bk__legal a{text-decoration:underline}
.bk__est{background:var(--ink);color:#fff;border-radius:var(--r-l);padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.bk__est span{font-size:.77rem;text-transform:uppercase;letter-spacing:.09em;color:#a9b0bb;font-weight:700}
.bk__est b{display:block;font-family:var(--disp);font-size:1.22rem;font-weight:800;letter-spacing:-.022em;line-height:1.25;margin:.25rem 0 .35rem}
.bk__est p{font-size:.79rem;color:#a9b0bb;margin:0;line-height:1.45}
.bk__sum{display:grid;gap:.4rem;margin-bottom:1.1rem;font-size:.92rem}
.bk__sum div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.bk__sum dt{color:var(--muted);flex:0 0 auto}
.bk__sum dd{margin:0;font-weight:600;text-align:right}
.bk__done{text-align:center;padding:1.4rem .5rem}
.bk__done svg{width:52px;height:52px;color:var(--wa);margin:0 auto 1rem}
.bk__done h3{font-size:1.3rem;margin-bottom:.5rem}
.bk__done p{font-size:.94rem;color:var(--muted);margin-bottom:1.2rem}
/* Bandera de bloqueo de scroll. NO puede llamarse `data-bk-open`: ese es el
   selector de los botones que abren el modal, y tenerlo en el <body> hacía que
   cualquier click de la página reiniciara el embudo. */
body[data-bk-lock]{overflow:hidden}

/* ---- misc ------------------------------------------------------------ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.2rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split--rev>*:first-child{order:2}
@media (max-width:860px){.split--rev>*:first-child{order:0}}
.split img{border-radius:var(--r-xl);width:100%}
.figframe{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--paper-3)}
.figframe img{width:100%;display:block}
.figframe figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.2rem .95rem;
  background:linear-gradient(transparent,rgba(10,12,15,.85));color:#fff;font-size:.83rem}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.stat{background:#fff;padding:1.2rem 1.1rem;text-align:center}
.stat b{display:block;font-family:var(--disp);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--acc)}
.stat span{display:block;font-size:.83rem;color:var(--muted);margin-top:.3rem;line-height:1.35}
.sec--ink .stat{background:var(--ink-2)}
.sec--ink .stat b{color:#fff}
.sec--ink .stat span{color:#a9b0bb}
.linklist{display:flex;flex-wrap:wrap;gap:.45rem}
.linklist a{font-size:.87rem;font-weight:600;padding:.45em .85em;border-radius:999px;
  background:var(--paper-2);border:1px solid var(--line);color:var(--muted)}
.linklist a:hover{background:var(--red-tint);border-color:var(--acc-bd);color:var(--red-lo)}
.sec--ink .linklist a{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#d3d7df}
.sec--ink .linklist a:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
.note{font-size:.82rem;color:var(--muted-2);line-height:1.5}
.mt-s{margin-top:.8rem}.mt{margin-top:1.4rem}.mt-l{margin-top:2.2rem}
.center{text-align:center}

/* ---- banner de cookies (src/lib/consent.mjs) -------------------------
   Visible por CSS en cuanto el <head> marca data-ck-state="pending": no
   espera al JS diferido. Va por encima de la barra móvil (80) y por debajo
   del reservador (120). «Aceptar» y «Rechazar» tienen exactamente el mismo
   estilo: la AEPD no admite un rechazo escondido o menos visible. */
.ck{display:none;position:fixed;left:0;right:0;bottom:0;z-index:110;
  padding:0 var(--gut) max(var(--gut),env(safe-area-inset-bottom));pointer-events:none}
html[data-ck-state="pending"] .ck,.ck[data-open]{display:block}
.ck__box{pointer-events:auto;max-width:760px;margin:0 auto;background:var(--ink-2);color:#e6e9ee;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);box-shadow:var(--sh-l);
  padding:clamp(1rem,3vw,1.4rem);max-height:min(88dvh,680px);display:flex;flex-direction:column}
/* Con el panel abierto solo hace scroll el contenido: los botones quedan
   siempre a la vista, también en un móvil pequeño. */
.ck__main,.ck__btns{flex:0 0 auto}
.ck__t{margin:0 0 .35rem;font-family:var(--disp);font-weight:800;font-size:1.02rem;color:#fff}
.ck__d{margin:0;font-size:.86rem;line-height:1.55}
.ck__d a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.ck__prefs{margin-top:1rem;display:grid;gap:.6rem;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
@media (max-height:760px){.ck--prefs .ck__d{display:none}}
.ck__cat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:.75rem .9rem}
.ck__cat p{margin:.3rem 0 0;font-size:.8rem;line-height:1.5;color:#b9c0cb}
.ck__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer}
.ck__name{font-weight:700;font-size:.92rem;color:#fff}
.ck__always{font-size:.76rem;font-weight:700;color:var(--red)}
.ck__sw{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:44px;height:26px;margin:0;border-radius:99px;
  background:rgba(255,255,255,.22);position:relative;cursor:pointer;transition:background .18s}
.ck__sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}
.ck__sw:checked{background:var(--wa)}
.ck__sw:checked::after{transform:translateX(18px)}
.ck__sw:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ck__btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.ck__btn{flex:1 1 140px;min-height:44px;padding:.6em 1.1em;border-radius:var(--r-s);cursor:pointer;
  font:700 .9rem/1.1 var(--disp);background:#fff;color:var(--ink);border:1px solid #fff}
.ck__btn:hover{background:var(--red);border-color:var(--red)}
.ck__btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ck__btn--link{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.ck__btn--link:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.ck__btn[hidden]{display:none}
@media (min-width:640px){.ck__btns{flex-wrap:nowrap}}
.ftr__ck{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.ftr__ck:hover{color:#fff;text-decoration:underline}