/* ui.css — sistema de componentes para las páginas interiores (v1)
   Se carga después de los estilos inline de cada página. */

/* ---------- base ---------- */
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--claret);color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--claret-lt);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  .r{opacity:1!important;transform:none!important;transition:none!important}
  .cards .card{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}
.sec.alt{background:var(--navy)}
.sec.tight{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px)}
.sec-head{margin-bottom:clamp(24px,3vw,38px)}
.sec-head h2{margin:0;max-width:22ch}
.sec-head .lede{margin:14px 0 0;max-width:62ch;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.6;color:var(--dim)}
.sec-head .lede b{color:var(--bone);font-weight:500}
.prose{max-width:66ch}
.prose p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--dim)}
.prose p:last-child{margin-bottom:0}
.prose p b{color:var(--bone);font-weight:500}
.prose a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--claret-lt);text-underline-offset:3px}
.prose a:hover{color:var(--claret-lt)}
.prose h3{font-family:var(--disp);font-weight:500;font-size:clamp(21px,1.8vw,26px);line-height:1.25;letter-spacing:-.01em;margin:28px 0 10px;color:var(--bone)}
.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 14px;padding-left:20px;color:var(--dim)}
.prose li{margin:0 0 6px;line-height:1.6}
.portrait{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block}
.sticky{position:sticky;top:calc(var(--toph,70px) + 60px)}
@media(max-width:900px){.sticky{position:static}.portrait{max-width:420px}}

/* ---------- hero con panel de datos ---------- */
.pagehero .hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.pagehero .hero-grid h1{max-width:18ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-block;background:var(--claret);color:#fff;text-decoration:none;border-radius:999px;padding:13px 24px;font-size:15px;line-height:1.3;transition:.2s;border:1px solid transparent}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--bone)}
.btn.ghost:hover{border-color:var(--claret-lt);color:var(--claret-lt);filter:none}
.facts{position:relative;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(236,231,219,.045),rgba(236,231,219,.015));padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,30px);overflow:hidden}
.facts::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 60% at 100% 0%,rgba(176,46,60,.14),transparent 60%)}
.facts dl{position:relative;margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 18px}
.facts dt{font-size:13px;color:var(--muted);padding:13px 0;border-top:1px solid var(--line);letter-spacing:.02em}
.facts dd{margin:0;padding:12px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--bone)}
.facts dt:first-of-type,.facts dd:first-of-type{border-top:0;padding-top:2px}
.facts dd.big{font-family:var(--disp);font-weight:500;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;color:var(--claret-lt);line-height:1.1;padding-top:8px;padding-bottom:8px}
.facts dd.big small{display:block;font-family:var(--body);font-size:13px;color:var(--dim);letter-spacing:0;margin-top:5px;font-weight:300}
.facts .facts-cta{position:relative;display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--dim)}
.facts .facts-cta a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--claret-lt);padding-bottom:2px}
.facts .facts-cta a:hover{color:var(--claret-lt)}
@media(max-width:900px){
  .pagehero .hero-grid{grid-template-columns:1fr;gap:30px;align-items:start}
  .pagehero .hero-grid h1{max-width:none}
}

/* ---------- sub-navegación "en esta página" ---------- */
.toc{position:sticky;top:0;z-index:40;background:rgba(10,15,28,.93);backdrop-filter:blur(10px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc .page{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.toc .page::-webkit-scrollbar{display:none}
.toc .lbl{flex:none;font-size:12.5px;color:var(--muted);padding:14px 16px 14px 0;letter-spacing:.02em}
.toc a{flex:none;font-size:14px;color:var(--dim);text-decoration:none;padding:14px 12px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.toc a:hover{color:var(--bone)}
.toc a.on{color:var(--bone);border-bottom-color:var(--claret-lt)}
@media(max-width:640px){.toc .lbl{display:none}.toc a{padding:13px 10px;font-size:13.5px}}

/* ---------- chips de situaciones ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{margin:0}
.chips span,.chips a{display:inline-block;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;line-height:1.3;color:var(--bone);text-decoration:none;background:rgba(236,231,219,.03);transition:border-color .2s,color .2s}
.chips a{border-color:rgba(176,46,60,.55)}
.chips a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;border-right:1px solid var(--claret-lt);border-top:1px solid var(--claret-lt);transform:rotate(45deg);vertical-align:2px}
.chips a:hover{border-color:var(--claret-lt);color:var(--claret-lt)}
.chips+.prose{margin-top:26px}

/* ---------- cuenta atrás hasta la fecha ---------- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl li{display:grid;grid-template-columns:150px 28px minmax(0,1fr);gap:0 18px;padding:0 0 clamp(26px,3vw,38px);position:relative}
.tl li:last-child{padding-bottom:0}
.tl .when{font-size:13px;color:var(--claret-lt);padding-top:7px;line-height:1.4;letter-spacing:.02em}
.tl .dot{position:relative;height:100%}
.tl .dot::before{content:"";position:absolute;left:13px;top:10px;bottom:-40px;width:1px;background:var(--line)}
.tl li:last-child .dot::before{display:none}
.tl .dot::after{content:"";position:absolute;left:8px;top:7px;width:11px;height:11px;border-radius:50%;border:1px solid var(--claret-lt);background:var(--ink)}
.tl li.day .dot::after{background:var(--claret-lt);transform:rotate(45deg);border-radius:1px;width:10px;height:10px;left:8.5px}
.tl h3{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.01em}
.tl li.day h3{color:var(--claret-lt)}
.tl p{margin:8px 0 0;font-size:16.5px;line-height:1.65;color:var(--dim);max-width:58ch}
.tl p b{color:var(--bone);font-weight:500}
@media(max-width:700px){
  .tl li{grid-template-columns:28px minmax(0,1fr);gap:0 14px}
  .tl .when{grid-column:2;order:-1;padding:0 0 4px}
  .tl .dot{grid-row:1/3}
}

/* ---------- pasos numerados (taller) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(24px,3.5vw,52px);counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--disp);font-weight:500;font-size:30px;line-height:1;color:var(--claret-lt);letter-spacing:-.02em;padding-top:2px}
.steps h3{margin:0 0 6px;font-family:var(--disp);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.steps p{margin:0;font-size:15.5px;line-height:1.6;color:var(--dim)}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.one{grid-template-columns:1fr;gap:14px}
@media(max-width:760px){.steps,.steps.three{grid-template-columns:1fr;gap:16px}}

/* ---------- listas con marca (✓ / ×) ---------- */
.marks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.5vw,52px)}
.marks.one{grid-template-columns:1fr}
.marks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:16.5px;line-height:1.55;color:var(--bone)}
.marks li small{display:block;color:var(--dim);font-size:15px;margin-top:4px;line-height:1.55}
.marks li svg{width:20px;height:20px;margin-top:3px;flex:none}
.marks.yes svg{stroke:var(--bone)}
.marks.no svg{stroke:var(--claret-lt)}
.marks.no li{color:var(--dim)}
@media(max-width:760px){.marks{grid-template-columns:1fr}}
.two-col{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.two-col h2{margin:0 0 20px}
.two-col h3{margin:0 0 20px;font-family:var(--disp);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em;line-height:1.2}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:44px}}

/* ---------- formato y precio ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.price-grid.one{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.price{position:relative;border:1px solid var(--line);border-radius:10px;padding:clamp(22px,2.4vw,32px);background:linear-gradient(180deg,rgba(236,231,219,.04),rgba(236,231,219,.012));display:flex;flex-direction:column;gap:14px}
.price.fixed{border-color:rgba(176,46,60,.5)}
.price .name{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(21px,1.8vw,25px);line-height:1.25;letter-spacing:-.01em}
.price .amt{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(36px,3.6vw,52px);line-height:1;letter-spacing:-.03em;color:var(--claret-lt);font-variant-numeric:tabular-nums}
.price .amt small{display:block;font-family:var(--body);font-weight:300;font-size:14px;color:var(--dim);letter-spacing:0;margin-top:8px}
.price p{margin:0;font-size:15.5px;line-height:1.6;color:var(--dim)}
.price ul{margin:0;padding:0;list-style:none}
.price li{padding:9px 0 9px 22px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--bone);position:relative}
.price li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:1px;background:var(--claret-lt)}
.price .btn{align-self:flex-start;margin-top:auto}
.price-foot{margin:20px 0 0;max-width:70ch;font-size:15px;line-height:1.6;color:var(--dim)}
.price-foot b{color:var(--bone);font-weight:500}
@media(max-width:760px){.price-grid,.price-grid.one{grid-template-columns:1fr}}

/* ---------- cita de cliente ---------- */
.pull{margin:0;padding-left:clamp(18px,2vw,26px);border-left:2px solid var(--claret);max-width:62ch}
.pull p{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(20px,2vw,27px);line-height:1.4;letter-spacing:-.012em;color:var(--bone)}
.pull .who{margin:16px 0 0;font-family:var(--body);font-size:14px;line-height:1.5;color:var(--dim);letter-spacing:0}
.pull .who b{color:var(--bone);font-weight:500}
.pulls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
@media(max-width:900px){.pulls{grid-template-columns:1fr}}

/* ---------- franja con foto ---------- */
.band{margin-top:0}
.band .txt .n{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(44px,5.4vw,78px);line-height:1;letter-spacing:-.03em;color:var(--claret-lt);margin-bottom:12px;font-variant-numeric:tabular-nums}
.band.tall{min-height:clamp(340px,40vw,520px)}
.band img{object-position:50% 12%}

/* ---------- logos ---------- */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(26px,4vw,56px);margin:0;padding:0;list-style:none}
.logo-row img{height:34px;width:auto;max-width:190px;object-fit:contain;opacity:.8;transition:opacity .3s}
.logo-row img:hover{opacity:1}
.logo-row li{margin:0}

/* ---------- casos ---------- */
.case3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line)}
.case3 .h{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:4px}
.case3 .h h3{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.015em}
.case3 .h span{font-size:14px;color:var(--muted)}
.case3 .lbl{display:block;font-size:12.5px;color:var(--claret-lt);margin-bottom:8px;letter-spacing:.03em}
.case3 p{margin:0;font-size:15.5px;line-height:1.6;color:var(--dim)}
.case3 .pull{padding-left:16px}
.case3 .pull p{font-size:clamp(17px,1.4vw,20px)}
.case3 .pull .who{font-size:14px}
.price-grid.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.price-grid.tres{grid-template-columns:1fr}}
@media(max-width:900px){.case3{grid-template-columns:1fr;gap:20px}}

/* ---------- también / ajustes ---------- */
.also .cards{margin-top:18px}
.hero-note{margin-top:22px;padding-left:14px;border-left:2px solid var(--claret-lt);font-size:15.5px;line-height:1.55;color:var(--bone);max-width:60ch}

/* ---------- herramienta: pon tu fecha ---------- */
.datetool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center;border:1px solid var(--line);border-radius:12px;padding:clamp(24px,3vw,44px);background:linear-gradient(135deg,rgba(176,46,60,.10),rgba(236,231,219,.02) 55%)}
.datetool h2{margin:0;max-width:16ch}
.datetool .lede{margin:12px 0 0;color:var(--dim);font-size:16.5px;line-height:1.6;max-width:40ch}
.dt-form{display:flex;flex-direction:column;gap:16px}
.dt-form label{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;font-size:14px;color:var(--muted)}
.dt-form input[type=date]{font:inherit;font-size:17px;color:var(--bone);background:rgba(10,15,28,.6);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:200px;color-scheme:dark}
.dt-form input[type=date]:focus{outline:2px solid var(--claret-lt);outline-offset:2px;border-color:var(--claret-lt)}
.dt-out{margin:0;min-height:1.5em;font-family:var(--disp);font-weight:400;font-size:clamp(19px,1.7vw,24px);line-height:1.4;letter-spacing:-.01em;color:var(--bone)}
.dt-out small{display:block;font-family:var(--body);font-size:15px;color:var(--dim);margin-top:10px;line-height:1.55;letter-spacing:0}
.dt-out a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--claret-lt);text-underline-offset:3px}
.dt-out a:hover{color:var(--claret-lt)}
.dt-out .n{color:var(--claret-lt);font-weight:500}
@media(max-width:900px){.datetool{grid-template-columns:1fr;gap:22px}}

/* =====================================================================
   v29 · CABECERA, MENÚ, PIE Y NAVEGACIÓN COMUNES A TODAS LAS PÁGINAS
   Una sola fuente: lo que se cambia aquí cambia en las 43 páginas.
   (El comportamiento está en /ui.js.)
   ===================================================================== */
:root{--hd-full:120px;--hd-min:68px;--hd-h:var(--hd-full);--toph:calc(var(--hd-h) + 1px);--ez:cubic-bezier(.2,.7,.2,1)}
@media(max-width:900px){:root{--hd-full:92px;--hd-min:60px}}
html.scrolled{--hd-h:var(--hd-min)}
/* ningún enlace interno deja el título debajo de la cabecera */
html{scroll-padding-top:calc(var(--hd-min) + 24px)}
html.has-toc{scroll-padding-top:calc(var(--hd-min) + 76px)}
body{padding-top:calc(var(--hd-full) + 1px)}
body.menu-open{overflow:hidden}

/* ---------- cabecera ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--hd-h) + 1px);
  background:rgba(10,15,28,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:height .28s var(--ez)}
.hd-in{position:relative;height:100%;display:flex;align-items:center;gap:28px;padding:0 var(--gutter)}
.hd-name{flex:0 1 auto;min-width:0;display:block;font-family:var(--disp);font-weight:500;
  font-size:clamp(32px,2.7vw,44px);line-height:1;letter-spacing:-.02em;color:var(--bone);
  text-decoration:none;white-space:nowrap;transition:font-size .28s var(--ez)}
.hd-name:hover{color:var(--bone)}
.hd-name small{display:block;margin-top:7px;max-height:38px;overflow:hidden;white-space:normal;
  font-family:var(--body);font-size:13px;font-weight:400;line-height:1.38;letter-spacing:.01em;
  color:var(--muted);opacity:.9;transition:opacity .2s,max-height .28s var(--ez),margin-top .28s var(--ez)}
.hd-name small span{display:inline-block;vertical-align:top}
html.scrolled .hd-name{font-size:clamp(26px,2.1vw,31px)}
html.scrolled .hd-name small{opacity:0;max-height:0;margin-top:0}

.hd-nav{margin-left:auto;flex:none;display:flex;align-items:center;gap:26px}
.hd-nav>a,.hd-trig{display:inline-block;padding:6px 0;font-family:var(--body);font-size:14.5px;line-height:1.4;
  color:var(--dim);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:linear-gradient(var(--claret-lt),var(--claret-lt)) 0 100%/0 1px no-repeat;
  transition:color .25s,background-size .3s var(--ez)}
.hd-nav>a[aria-current],.hd-trig.on{color:var(--bone);background-size:100% 1px}
.hd-has{display:flex;align-items:center}
.hd-trig::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-3px) rotate(45deg);opacity:.7;transition:transform .25s}
.hd-lang{display:flex;gap:10px;margin-left:4px;padding-left:20px;border-left:1px solid var(--line)}
.hd-lang a{padding:6px 0;font-size:12.5px;line-height:1.4;letter-spacing:.06em;color:var(--muted);text-decoration:none;transition:color .25s}
.hd-lang a.on{color:var(--bone);box-shadow:0 1px 0 var(--claret-lt)}
.hd-burger,.hd-lg{display:none}

/* desplegable de servicios (escritorio) */
.hd-sub{position:absolute;right:var(--gutter);top:calc(50% + 14px);z-index:70;
  width:min(720px,calc(100vw - 2*var(--gutter)));padding-top:calc(var(--hd-h)/2 - 4px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.hd-box{display:grid;grid-template-columns:1fr 1fr;gap:2px 4px;padding:12px;background:var(--ink);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
  max-height:calc(100vh - var(--hd-h) - 28px);overflow:auto}
.hd-col{display:block}
.hd-lbl{display:block;padding:10px 18px 6px;font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--claret-lt)}
.hd-col a{display:block;padding:12px 18px;border-radius:6px;color:var(--bone);text-decoration:none;transition:background .2s}
.hd-col a b{display:block;margin-bottom:3px;font-family:var(--disp);font-weight:500;font-size:18px;line-height:1.2}
.hd-col a span{display:block;font-size:13.5px;line-height:1.45;color:var(--dim)}
.hd-col a[aria-current]{background:rgba(236,231,219,.055);box-shadow:inset 2px 0 0 var(--claret-lt)}
.hd-all{grid-column:1/-1;display:block;margin-top:6px;padding:14px 18px 10px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.4;color:var(--bone);text-decoration:none}
.hd-all[aria-current]{color:var(--dim)}
@media(hover:hover){
  .hd-nav>a:hover,.hd-trig:hover,.hd-has:hover>.hd-trig{color:var(--bone);background-size:100% 1px}
  .hd-lang a:hover{color:var(--bone)}
  .hd-col a:hover{background:rgba(176,46,60,.14)}
  .hd-all:hover{color:var(--claret-lt)}
}
@media(min-width:901px){
  .hd-has:hover .hd-sub,.hd-has:focus-within .hd-sub,.hd-has.open .hd-sub{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .hd-has:hover .hd-trig::after,.hd-has:focus-within .hd-trig::after,.hd-has.open .hd-trig::after{transform:translateY(0) rotate(225deg)}
}
/* anchos intermedios: nada se sale nunca de la pantalla */
@media(min-width:1180px) and (max-width:1439px){.hd-nav{gap:20px}.hd-nav>a,.hd-trig{font-size:13.5px}}
@media(min-width:901px) and (max-width:1179px){.hd-name small{display:none}.hd-nav{gap:22px}.hd-nav>a,.hd-trig{font-size:14px}}
@media(min-width:901px) and (max-width:1023px){.hd-in{gap:20px}.hd-nav{gap:16px}.hd-nav>a,.hd-trig{font-size:13px}.hd-lang{padding-left:14px;gap:8px}}

/* móvil */
@media(max-width:900px){
  .hd-in{gap:10px}
  .hd-name{font-size:27px}
  html.scrolled .hd-name{font-size:23px}
  .hd-name small{display:none}
  .hd-lg{display:grid;place-items:center;flex:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
    border-radius:6px;font-family:var(--body);font-size:12.5px;letter-spacing:.08em;color:var(--dim);text-decoration:none}
  .hd-burger{display:block;flex:none;position:relative;width:42px;height:42px;margin:0;padding:0;
    -webkit-appearance:none;appearance:none;background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer}
  .hd-burger span,.hd-burger span::before,.hd-burger span::after{content:"";position:absolute;left:10px;width:20px;height:1.6px;background:var(--bone);transition:transform .3s,background .2s}
  .hd-burger span{top:20px}
  .hd-burger span::before{left:0;top:-6px}
  .hd-burger span::after{left:0;top:6px}
  body.menu-open .hd-burger span{background:transparent}
  body.menu-open .hd-burger span::before{transform:translateY(6px) rotate(45deg)}
  body.menu-open .hd-burger span::after{transform:translateY(-6px) rotate(-45deg)}
  body.menu-open .hdr{background:var(--ink)}
  .hd-nav{position:absolute;left:0;right:0;top:100%;margin:0;
    height:calc(100vh - var(--hd-h) - 1px);height:calc(100dvh - var(--hd-h) - 1px);
    flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gutter) 120px;background:var(--ink);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s,transform .22s,visibility 0s linear .22s}
  body.menu-open .hd-nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .hd-nav>a,.hd-trig{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;
    font-family:var(--disp);font-size:26px;line-height:1.15;color:var(--dim);white-space:normal;
    border-bottom:1px solid var(--line);background:none}
  .hd-nav>a[aria-current],.hd-trig.on{color:var(--bone);background:none}
  .hd-nav>a[aria-current]{padding-left:14px;box-shadow:inset 3px 0 0 var(--claret-lt)}
  .hd-has{display:block}
  .hd-trig::after{flex:none;width:9px;height:9px;margin:0 8px 0 12px;border-right-width:1.6px;border-bottom-width:1.6px;transform:translateY(-3px) rotate(45deg)}
  .hd-has.open .hd-trig{color:var(--bone)}
  .hd-has.open .hd-trig::after{transform:translateY(3px) rotate(225deg)}
  .hd-sub{position:static;width:auto;padding:0;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;display:none}
  .hd-has.open .hd-sub{display:block}
  .hd-box{display:flex;flex-direction:column;gap:0;padding:4px 0 12px 16px;background:none;border:0;border-bottom:1px solid var(--line);
    border-radius:0;box-shadow:none;max-height:none;overflow:visible}
  .hd-all{order:-1;margin:0;padding:16px 0 6px;border:0;font-size:16px;color:var(--bone)}
  .hd-lbl{padding:16px 0 4px}
  .hd-col a{padding:10px 0;border-radius:0}
  .hd-col a span{font-size:14px}
  .hd-col a[aria-current]{background:none;padding-left:12px}
  .hd-lang{margin:22px 0 0;padding:0;border:0;gap:24px}
  .hd-lang a{padding:8px 0;font-size:15px}
}

/* ---------- índice "en esta página": va pegado debajo de la cabecera ---------- */
.toc{top:calc(var(--hd-h) + 1px);transition:top .28s var(--ez)}
.toc .page{position:relative}
@media(max-width:900px){
  .toc .page{padding-right:34px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
}

/* ---------- botón fijo del móvil: ni asoma ni tapa ---------- */
body .fab{transform:translateY(calc(100% + 48px))}
body .fab.on{transform:none}
body .fab.on.off,body.menu-open .fab,body.menu-open .fab.on{transform:translateY(calc(100% + 48px))}

/* ---------- pie: mapa de la web ---------- */
footer.ft{display:block;padding:0;border-top:1px solid var(--line);background:var(--ink);font-size:14px;line-height:1.5;color:var(--muted)}
.ft-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 44px;padding:58px var(--gutter) 40px}
.ft-col{min-width:0}
.ft-lbl{display:block;margin:0 0 12px;max-width:none;font-family:var(--body);font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--claret-lt)}
footer.ft .ft-col a{display:block;padding:5px 0;color:var(--dim);text-decoration:none;transition:color .2s}
footer.ft .ft-col a[aria-current]{color:var(--bone)}
footer.ft .ft-col a.ft-mail{margin-bottom:6px;padding:0 0 6px;font-family:var(--disp);font-size:20px;line-height:1.3;color:var(--bone);overflow-wrap:anywhere}
.ft-col .ft-txt{display:block;padding:5px 0;color:var(--muted)}
.ft-bot{display:flex;flex-wrap:wrap;gap:6px 26px;padding:18px var(--gutter) 30px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
footer.ft .ft-bot a{color:var(--muted);text-decoration:none}
@media(hover:hover){footer.ft .ft-col a:hover,footer.ft .ft-bot a:hover{color:var(--bone)}}
@media(max-width:1000px){.ft-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;padding-top:44px}}
@media(max-width:900px){
  footer.ft .ft-col a{padding:7px 0}
  footer.ft .ft-col a.ft-mail{margin:0;padding:7px 0;font-family:var(--body);font-size:14px;line-height:1.5;overflow-wrap:normal;white-space:nowrap}
  .ft-bot{padding-bottom:44px}
}

/* ---------- arreglos puntuales ---------- */
/* "Sobre mí": la foto y el texto se apilan en el móvil */
@media(max-width:900px){.two-col[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}}
/* el párrafo de entrada heredaba el ancho mínimo del antiguo desplegable (.sub) y se metía en la ficha de la derecha */
p.sub,.pagehero .sub{min-width:0}
/* portada en el móvil: una sola pregunta al entrar (el selector de dos toques), no dos seguidas */
@media(max-width:900px){.hero .doors{display:none}}

/* =====================================================================
   v30 · MENOS MAZACOTE: las secciones se abren al tocar
   El texto sigue entero en el HTML de cada página (lo leen Google y las IA);
   solo cambia lo que se ve de entrada. Sin JavaScript sale todo abierto.
   ===================================================================== */
.fold-b{display:grid;grid-template-rows:1fr}
.fold-i{min-height:0;min-width:0}
html.js .fold-b{transition:grid-template-rows .4s var(--ez)}
html.js .fold-i{overflow:hidden}
html.js .fold-on>.fold-b>.fold-i,html.js .fold.fold-on>.page>.fold-b>.fold-i{overflow:visible}
html.js .fold:not(.open)>.page>.fold-b,html.js .ifold:not(.open)>.fold-b,html.js .more:not(.open)>.fold-b{grid-template-rows:0fr}
html.js .fold:not(.open)>.page>.fold-b>.fold-i,html.js .ifold:not(.open)>.fold-b>.fold-i,html.js .more:not(.open)>.fold-b>.fold-i{visibility:hidden;transition:visibility 0s linear .4s}
.fold-t{-webkit-appearance:none;appearance:none;display:inline;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
.fold-t:focus-visible{outline:2px solid var(--claret-lt);outline-offset:5px;border-radius:3px}

/* --- sección entera --- */
html.js .sec.fold{padding-top:0;padding-bottom:0}
html.js .fold>.page>.sec-head{position:relative;margin:0;padding:clamp(24px,2.8vw,34px) 62px clamp(24px,2.8vw,34px) 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.js .fold>.page>.sec-head h2{max-width:none;transition:font-size .3s var(--ez)}
html.js .fold:not(.open)>.page>.sec-head h2{font-size:clamp(23px,2.2vw,30px);line-height:1.2}
html.js .fold:not(.open)>.page>.sec-head .lede{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;max-width:none;margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
html.js .fold.open>.page>.sec-head{padding-top:clamp(40px,5.4vw,68px)}
html.js .fold>.page>.sec-head::after,html.js .ifold>.fold-h::after{content:"";position:absolute;right:0;top:50%;width:38px;height:38px;margin-top:-19px;border:1px solid var(--line);border-radius:50%;
  background:linear-gradient(var(--claret-lt),var(--claret-lt)) center/13px 1.5px no-repeat,linear-gradient(var(--claret-lt),var(--claret-lt)) center/1.5px 13px no-repeat;
  transition:border-color .2s,background-size .25s,transform .35s var(--ez)}
html.js .fold.open>.page>.sec-head::after{margin-top:calc(-19px + clamp(8px,1.3vw,17px));background-size:13px 1.5px,1.5px 0;transform:rotate(180deg)}
html.js .ifold.open>.fold-h::after{background-size:13px 1.5px,1.5px 0;transform:rotate(180deg)}
html.js .fold>.page>.fold-b>.fold-i::after{content:"";display:block;height:clamp(40px,5.4vw,68px)}
@media(hover:hover){html.js .fold>.page>.sec-head:hover::after,html.js .ifold>.fold-h:hover::after{border-color:var(--claret-lt)}}

/* --- pieza suelta: una tarjeta, un caso --- */
html.js .ifold>.fold-h{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.js .card.ifold{cursor:pointer}
html.js .card.ifold>.fold-h{margin:0;padding-right:44px;min-height:30px}
html.js .card.ifold>.fold-h::after{width:30px;height:30px;margin-top:-15px;background-size:11px 1.5px,1.5px 11px}
html.js .card.ifold.open>.fold-h::after{background-size:11px 1.5px,1.5px 0}
html.js .card.ifold>.fold-b>.fold-i::before{content:"";display:block;height:10px}
html.js .cards .card.ifold:hover{transform:none!important}
html.js .cards:has(.ifold){align-items:start}
.case3.ifold>.fold-b{grid-column:1/-1}
.case3.ifold>.fold-b>.fold-i{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
html.js .case3.ifold>.fold-h{margin-bottom:0;padding-right:56px}
html.js .case3.ifold{gap:0}
html.js .case3.ifold>.fold-b>.fold-i::before{content:"";display:block;grid-column:1/-1;height:0}
html.js .case3.ifold>.fold-b>.fold-i{padding-top:0}
html.js .case3.ifold.open>.fold-h{margin-bottom:clamp(18px,2.4vw,30px)}
@media(max-width:900px){.case3.ifold>.fold-b>.fold-i{grid-template-columns:1fr;gap:20px}}

/* --- "ver el resto" --- */
.more-t{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:none;
  font:inherit;font-size:14px;color:var(--bone);cursor:pointer;transition:border-color .2s,background .2s}
.more-t::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--claret-lt);border-bottom:1.5px solid var(--claret-lt);transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.more.open>.more-t::after{transform:translateY(2px) rotate(225deg)}
@media(hover:hover){.more-t:hover{border-color:var(--claret-lt);background:var(--panel)}}
html:not(.js) .more-t{display:none}

/* --- lo relacionado, al final de cada página, más compacto en el móvil --- */
@media(max-width:640px){
  .also .cards{gap:10px}
  .also .card{padding:16px 18px 14px}
  .also .card .k{margin-bottom:6px}
  .also .card h3{margin-bottom:0;font-size:18px}
  .also .card .go{display:none}
}
/* --- portada en el móvil --- */
@media(max-width:640px){
  #services .svgrid{grid-template-columns:1fr 1fr;gap:8px}
  #services .svl{align-content:center;min-height:58px;padding:10px 12px}
  #services .svl b{font-size:15px;line-height:1.25}
  #services .svl span{display:none}
  .rooms .rm{min-height:250px}
}
@media print{.fold-b{grid-template-rows:1fr!important}.fold-i{visibility:visible!important;overflow:visible!important}}
/* --- contacto: tres golpes en vez de un párrafo --- */
.big .ln{display:block}
.cta .big .ln{border:0;padding:0}
.big .ln+.ln,.cta .big .ln+.ln{margin-top:.8em}
/* --- tarjetas plegadas, más bajas en el móvil --- */
@media(max-width:640px){
  html.js .card.ifold{padding:16px 18px}
  html.js .card.ifold h3{font-size:18px;line-height:1.3}
  html.js .card.ifold .k{margin-bottom:6px}
  html.js .cards:has(.ifold){gap:10px}
}

/* =====================================================================
   v31 · PORTADA LIMPIA: titular, tres caminos, una demo, prueba y contacto.
   Lo demás vive en su página (servicios, problemas, sobre mí, casos).
   ===================================================================== */
.hero .doors{display:flex;gap:10px;margin-top:32px}
.hero .doors a{padding:13px 20px;font-size:15px}
@media(max-width:900px){.hero .doors{display:flex}}
@media(max-width:640px){
  .hero .doors{flex-direction:column;align-items:stretch;gap:9px}
  .hero .doors a{display:flex;justify-content:space-between;gap:12px;border-radius:12px;padding:16px 18px;font-size:16px;text-align:left}
}
.hero-more{display:flex;flex-wrap:wrap;gap:10px 28px;max-width:none;margin:22px 0 0;font-size:14.5px}
.hero-more a{padding-bottom:2px;color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
@media(hover:hover){.hero-more a:hover{color:var(--bone);border-color:var(--claret-lt)}}
/* la demo, en su mínima expresión: opciones, frase y una sola línea */
#demo .demo .why{grid-template-columns:1fr;max-width:620px;margin-top:8px;text-align:center}
#demo .demo .why>div{border:0;background:none;padding:0}
#demo .demo .why>div:first-child{display:none}
#demo .demo .why p.dim{color:var(--bone);font-size:17px}
/* una sola opinión */
.qqs.one{grid-template-columns:1fr;max-width:620px}
/* el selector de dos toques, ahora en la página de servicios */
#plan .pl{max-width:760px;margin:0 auto}
#how-it-works .how-h{max-width:22ch;margin:6px auto 0;font-family:var(--disp);font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.01em;color:var(--bone)}
.center{text-align:center}
.center h2{margin-left:auto;margin-right:auto}
.center .kicker{display:inline-block;margin-bottom:14px}
.center .lede2{max-width:56ch;margin:16px auto 0;color:var(--dim);font-size:18px;line-height:1.6}

/* v32 · "ahora mismo": la línea del futbolista en la portada */
.hero .now{max-width:46ch;margin:22px 0 0}
.hero .now a{display:block;padding:2px 0 2px 16px;border-left:2px solid var(--claret-lt);font-size:16.5px;line-height:1.5;color:var(--bone);text-decoration:none}
.hero .now b{display:block;margin-bottom:4px;font-family:var(--body);font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--claret-lt)}
@media(hover:hover){.hero .now a:hover{border-left-color:var(--bone)}}
.pagehero h1{text-wrap:balance}