/* ============================================================
   Salix Soluciones Energéticas · sistema de diseño
   Marca real del logo: verde #68C530 · ámbar #FAB616 · bosque #004131
   ============================================================ */
:root{
  /* Marca */
  --gr:#68C530;          /* verde Salix (del logotipo) */
  --gr-d:#3D7C19;
  --gr-dd:#2E6613;
  --gr-l:#8FDC5E;
  --gr-50:#F1FAEA;
  --gr-100:#DDF3CC;
  --am:#FAB616;          /* ámbar Salix (del logotipo) */
  --am-d:#8A5E00;
  --am-l:#FFD470;
  --am-50:#FFF8E6;
  --forest:#004131;      /* fondo corporativo */
  --forest-d:#002B21;
  --forest-l:#015C46;

  /* Neutros */
  --ink:#0B1A14;
  --body:#42574C;
  --muted:#5E7268;
  --line:#E2EAE4;
  --line-d:#CBD9D0;
  --bg:#fff;
  --soft:#F5F9F5;

  --red:#D9453E; --red-50:#FDECEB;

  /* Formas */
  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px;
  --sh-sm:0 1px 3px rgba(11,26,20,.05),0 1px 2px rgba(11,26,20,.04);
  --sh:0 4px 14px rgba(11,26,20,.07),0 2px 5px rgba(11,26,20,.04);
  --sh-md:0 12px 32px rgba(11,26,20,.1),0 4px 10px rgba(11,26,20,.05);
  --sh-lg:0 30px 76px rgba(11,26,20,.16),0 10px 24px rgba(11,26,20,.07);
  --sh-gr:0 10px 26px rgba(104,197,48,.3);
  --sh-am:0 10px 26px rgba(250,182,22,.32);

  --max:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.64,1);

  --f-head:'Space Grotesk','Inter',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` manda sobre cualquier display de clase: sin esto, el aviso del
   formulario (.calc-out.on) se veía siempre en vez de solo al enviar. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--ink);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gr);color:#fff}
:focus-visible{outline:3px solid var(--gr);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Tipografía ───────────────────────────────────────────── */
h1,h2,h3,h4,.h{font-family:var(--f-head);font-weight:700;line-height:1.08;letter-spacing:-.03em}
h1{font-size:clamp(33px,5vw,60px)}
h2{font-size:clamp(27px,3.6vw,45px);line-height:1.1}
h3{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em;line-height:1.25}
.hl{color:var(--gr-dd)}
.hl-am{color:var(--am-d)}
/* Sobre fondo verde el texto va en verde CLARO. El hero y las bandas son
   fondo oscuro aunque no lleven la clase .dark, así que entran aquí. */
.dark .hl,.hero .hl,.band .hl,.fact-foot .hl{color:var(--gr-l)}
.dark .hl-am,.hero .hl-am,.band .hl-am,.fact-foot .hl-am{color:var(--am)}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--body);line-height:1.62;max-width:64ch}
.lead b{color:var(--ink);font-weight:650}
.dark .lead{color:#B6CEC1}
.dark .lead b{color:#fff}
.mini{font-size:13px;color:var(--muted);line-height:1.5}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:12.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gr-d);margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:currentColor;
  transform-origin:left;flex:none}
.dark .eyebrow{color:var(--gr-l)}
.eyebrow.am{color:var(--am-d)} .dark .eyebrow.am{color:var(--am)}

.sec-head{max-width:70ch;margin-bottom:clamp(30px,4vw,50px)}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-head p{margin-top:16px}

/* ── Botones ──────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-head);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;overflow:hidden;transition:.22s var(--ease);white-space:nowrap}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn::after{content:"";position:absolute;top:-60%;left:0;width:30%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-140%) skewX(-18deg)}
.btn:hover::after{animation:sheen .8s ease}
.btn-am{background:var(--am);color:#3B2A00;box-shadow:var(--sh-am)}
.btn-am:hover{background:#FFC63C;transform:translateY(-2px)}
.btn-gr{background:var(--gr-dd);color:#fff;box-shadow:var(--sh-gr)}
.btn-gr:hover{background:var(--gr-d);transform:translateY(-2px)}
.btn-dark{background:var(--forest);color:#fff}
.btn-dark:hover{background:var(--forest-l);transform:translateY(-2px)}
.btn-gh{border:1.6px solid var(--line-d);color:var(--ink);background:#fff}
.btn-gh:hover{border-color:var(--gr);color:var(--gr-d);background:var(--gr-50)}
.dark .btn-gh{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.dark .btn-gh:hover{border-color:var(--gr-l);background:rgba(104,197,48,.14);color:#fff}
.btn-sm{padding:10px 19px;font-size:14px}
.btn-lg{padding:17px 34px;font-size:17px}
@keyframes sheen{to{transform:translateX(360%) skewX(-18deg)}}

/* ── Barra superior + cabecera ────────────────────────────── */
.topbar{background:var(--forest-d);color:#93B3A5;font-size:13px;padding:9px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.topbar b{color:var(--gr-l);font-weight:600}
.topbar a:hover{color:#fff}
.topbar .tb-r{display:flex;gap:20px;align-items:center}

.site-head{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);transition:box-shadow .3s,padding .3s}
.site-head.small{box-shadow:0 8px 26px rgba(11,26,20,.09)}
.nav{display:flex;align-items:center;gap:26px;padding-top:15px;padding-bottom:15px;transition:padding .3s var(--ease)}
.site-head.small .nav{padding-top:9px;padding-bottom:9px}
/* Arriba del todo, el logotipo completo (isotipo + marca); al bajar se queda
   solo la marca. Apilado no vale aquí: a la altura de la barra no se lee. */
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo img{width:auto;transition:height .3s var(--ease)}
.nav-logo .lg-iso{height:50px}
.nav-logo .lg-txt{height:40px}
.site-head.small .nav-logo .lg-iso{display:none}
.site-head.small .nav-logo .lg-txt{height:34px}
.nav-menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-menu>a,.nav-drop>button{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:600;
  color:var(--body);padding:9px 13px;border-radius:10px;transition:.18s}
.nav-menu>a:hover,.nav-drop>button:hover,.nav-drop:hover>button{color:var(--gr-dd);background:var(--gr-50)}
.nav-drop{position:relative}
/* Puente invisible que cubre el hueco botón→panel: sin él, al bajar el ratón
   se cruzan 10 px donde no hay nada que hover-ear y el desplegable se cierra.
   Mismo arreglo que en allora.es (base.css ~184). Solo donde hay menú. */
@media (min-width:861px){
  .nav-drop::after{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:16px}
}
.nav-drop .car{width:9px;height:9px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .22s}
.nav-drop:hover .car{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  padding:12px;min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:3px;
  opacity:0;visibility:hidden;transition:.22s var(--ease);z-index:5}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-panel a{display:block;padding:11px 14px;border-radius:12px;transition:.16s}
.nav-panel a:hover{background:var(--gr-50)}
.nav-panel strong{display:block;font-family:var(--f-head);font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.nav-panel span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.nav-cta{margin-left:6px}
.burger{display:none;width:42px;height:42px;border-radius:11px;margin-left:auto;position:relative}
.burger span{position:absolute;left:11px;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.24s var(--ease)}
.burger span:nth-child(1){top:14px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)}
.movil{display:none;position:fixed;inset:0;top:0;background:#fff;z-index:79;padding:96px 24px 40px;
  overflow-y:auto;opacity:0;visibility:hidden;transition:.28s var(--ease)}
.movil.open{opacity:1;visibility:visible}
.movil a{display:block;font-family:var(--f-head);font-size:19px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line)}
.movil .sub{font-size:15px;color:var(--body);padding-left:16px;font-family:var(--f-body);font-weight:500}
.movil .btn{width:100%;margin-top:22px}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative;background:
  radial-gradient(1200px 620px at 78% 14%,rgba(104,197,48,.16),transparent 60%),
  radial-gradient(760px 520px at 10% 88%,rgba(250,182,22,.11),transparent 62%),
  linear-gradient(158deg,#002B21 0%,#004131 46%,#015C46 100%);
  color:#fff;overflow:hidden;padding:clamp(52px,6vw,86px) 0 clamp(60px,7vw,96px)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4.4vw,64px);align-items:center}
.hero h1{color:#fff;font-size:clamp(30px,3.9vw,50px);max-width:15ch}
.hero .lead{margin-top:20px;max-width:50ch;color:#B9D2C4}
.hero .lead b{color:#fff;font-weight:650}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-note{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13.5px;color:#93B3A5}
.hero-note svg{width:16px;height:16px;stroke:var(--gr-l);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Barra de confianza */
.trust{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(34px,4vw,52px);padding-top:clamp(22px,2.6vw,32px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}
.trust div{font-size:12.5px;color:#8FAE9F;line-height:1.45}
.trust b{display:block;font-family:var(--f-head);font-size:clamp(14px,1.25vw,17px);font-weight:700;
  color:#fff;letter-spacing:-.025em;margin-bottom:5px;line-height:1.2}
.trust .am{color:var(--am)}

/* ── La factura anotada (el visual del hero) ──────────────── */
/* Inclinación 3D del mismo tipo que el hero de Furia Reports:
   postura base marcada, se endereza al bajar y se inclina HACIA el cursor. */
.fact{position:relative;perspective:1400px;padding:0 8px;max-width:540px;
  margin-left:auto;margin-right:auto;width:100%}
.fact-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;color:var(--ink);
  transform:rotateY(-11deg) rotateX(5.5deg) rotateZ(.5deg);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s;
  box-shadow:-34px 38px 80px -32px rgba(0,20,12,.55),0 10px 30px -18px rgba(0,20,12,.4)}
.fact:hover .fact-card{box-shadow:-30px 40px 92px -30px rgba(104,197,48,.34),0 10px 30px -18px rgba(0,20,12,.4)}
@media (max-width:960px){.fact-card{transform:rotateY(-6deg) rotateX(2.5deg)}}
@media (max-width:620px){.fact-card{transform:none}}
@media (prefers-reduced-motion:reduce){.fact-card{transform:none!important}}
.fact-top{background:var(--soft);padding:15px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.fact-top .dot{width:9px;height:9px;border-radius:50%;background:var(--line-d)}
.fact-top .t{font-family:var(--f-head);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-left:4px}
.fact-top .imp{margin-left:auto;font-family:var(--f-head);font-weight:700;font-size:15px}
.fact-rows{padding:6px 20px 16px}
.fact-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;position:relative}
.fact-row:last-child{border-bottom:none}
.fact-row .k{color:var(--body)}
.fact-row .v{font-family:var(--f-head);font-weight:700;font-variant-numeric:tabular-nums}
.fact-row.hit{margin:0 -12px;padding:11px 12px;border-radius:10px;border-bottom-color:transparent}
.fact-row.hit::before{content:"";position:absolute;inset:0;border-radius:10px;background:var(--red-50);
  border:1.5px dashed rgba(217,69,62,.5);opacity:0;transform:scale(.97);
  transition:opacity .26s ease,transform .26s ease}
.fact-row.hit.on::before{opacity:1;transform:none;
  transition:opacity .42s var(--ease),transform .42s var(--pop)}
.fact-row.hit .k,.fact-row.hit .v,.fact-row.hit .fact-tag{position:relative;z-index:2}
.fact-row .v{transition:color .3s ease}
.fact-row.hit.on .v{color:var(--red)}
.fact-tag{grid-column:2;grid-row:1;justify-self:end;background:var(--red);color:#fff;font-family:var(--f-head);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 10px;border-radius:999px;
  white-space:nowrap;opacity:0;transform:scale(.86);
  transition:opacity .26s ease,transform .26s ease}
.fact-row.hit.on .fact-tag{opacity:1;transform:none;
  transition:opacity .42s var(--pop) .06s,transform .42s var(--pop) .06s}
.fact-row .v{grid-column:3;grid-row:1}
.fact-note{padding:0 20px 14px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin:0 20px;text-align:center}
.fact-foot{background:var(--forest);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:14px}
.fact-cifras{margin-left:auto;display:flex;align-items:baseline;gap:clamp(10px,1.6vw,18px)}
/* el importe anual, que se tacha a los dos segundos */
.fact-antes{position:relative;font-family:var(--f-head);font-weight:700;
  font-size:clamp(15px,1.6vw,20px);letter-spacing:-.02em;color:#9FBAAC;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .6s ease}
.fact-antes::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2px;
  background:#F5928D;border-radius:2px;transform:scaleX(0);transform-origin:left center}
.fact-foot .n em{display:block;font-family:var(--f-body);font-style:normal;font-size:11.5px;
  font-weight:600;letter-spacing:0;color:#8FAE9F;margin-top:2px;text-align:right}
/* estado de partida: la cifra buena aún no está */
.anim .fact-foot .n{opacity:0;transform:translateY(6px) scale(.9);transform-origin:right center}
/* al entrar en pantalla arranca la secuencia */
.fact-foot.va .fact-antes{color:#87A496;transition:color .5s ease 1.9s}
.fact-foot.va .fact-antes::after{animation:tachar .5s cubic-bezier(.16,1,.3,1) 1.9s forwards}
.fact-foot.va .n{animation:aparece .6s var(--pop) 2.55s forwards,
                           brillo 7.5s ease-in-out 3.6s infinite}
@keyframes tachar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aparece{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fact-foot .n{opacity:1!important;transform:none!important}
  .fact-antes::after{transform:scaleX(1)}
}
.fact-foot .l{font-size:12.5px;color:#93B3A5;line-height:1.35}
@keyframes brillo{
  0%,84%,100%{text-shadow:0 0 0 rgba(143,220,94,0)}
  90%{text-shadow:0 0 20px rgba(143,220,94,.9),0 0 46px rgba(143,220,94,.45)}
}
.fact-foot .n{margin-left:auto;font-family:var(--f-head);font-size:clamp(22px,2.5vw,32px);
  font-weight:700;color:var(--gr-l);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ── Secciones ────────────────────────────────────────────── */
section{position:relative}
.pad{padding:clamp(58px,7vw,104px) 0}
.pad-sm{padding:clamp(40px,5vw,68px) 0}
.soft{background:var(--soft)}
.dark{background:linear-gradient(158deg,#002B21,#004131 60%,#015C46);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}

/* Palancas numeradas */
.lev{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2.6vw,38px);align-items:start;
  padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--line)}
.lev:last-child{border-bottom:1px solid var(--line)}
.dark .lev{border-color:rgba(255,255,255,.15)}
.lev .n{font-family:var(--f-head);font-size:clamp(34px,4vw,54px);font-weight:700;line-height:.9;
  letter-spacing:-.05em;color:var(--gr-d);min-width:1.5em}
.dark .lev .n{color:var(--gr-l)}
.lev h3{margin-bottom:8px}
.lev p{font-size:15.5px;color:var(--body);max-width:74ch}
.dark .lev p{color:#A9C4B7}
.lev .badge{font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.05em;
  padding:7px 14px;border-radius:999px;background:var(--am-50);color:var(--am-d);white-space:nowrap;align-self:center}
.dark .lev .badge{background:rgba(250,182,22,.16);color:var(--am-l)}

/* Rejillas de tarjetas */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,24px)}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.9vw,24px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);transition:.26s var(--ease);overflow:hidden;display:flex;flex-direction:column}
.card:hover{border-color:var(--gr-100);box-shadow:var(--sh-md);transform:translateY(-4px)}
/* Borde iluminado que sigue al cursor (portado de .glow-card de allora.es,
   con el verde de Salix). El ::before es solo el aro: se recorta con máscara. */
.card{--gc-x:50;--gc-y:50;--gc-size:250}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(calc(var(--gc-size)*1px) calc(var(--gc-size)*1px) at
    calc(var(--gc-x)*1px) calc(var(--gc-y)*1px),
    rgba(143,220,94,.95),rgba(104,197,48,.38) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(calc(var(--gc-size)*1px) calc(var(--gc-size)*1px) at
    calc(var(--gc-x)*1px) calc(var(--gc-y)*1px),
    rgba(104,197,48,.11),transparent 60%);
  opacity:0;transition:opacity .3s ease}
.card.gc-cerca::before,.card.gc-cerca::after{opacity:1}
.card.am::before{background:radial-gradient(calc(var(--gc-size)*1px) calc(var(--gc-size)*1px) at
    calc(var(--gc-x)*1px) calc(var(--gc-y)*1px),
    rgba(255,212,112,.95),rgba(250,182,22,.4) 40%,transparent 70%)}
.card.am::after{background:radial-gradient(calc(var(--gc-size)*1px) calc(var(--gc-size)*1px) at
    calc(var(--gc-x)*1px) calc(var(--gc-y)*1px),
    rgba(250,182,22,.12),transparent 60%)}
.card>*{position:relative;z-index:2}
.card .ico{width:50px;height:50px;border-radius:15px;background:var(--gr-50);color:var(--gr-dd);
  display:grid;place-items:center;margin-bottom:18px;transition:.42s var(--pop);flex:none}
.card:hover .ico{transform:rotate(-8deg) scale(1.1)}
.card .ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card.am .ico{background:var(--am-50);color:var(--am-d)}
.card h3{margin-bottom:9px}
.card p{font-size:14.5px;color:var(--body);flex:1}
.card .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-head);font-size:14px;
  font-weight:700;color:var(--gr-dd);margin-top:16px;transition:gap .22s}
.card:hover .more{gap:12px}
.card .kw{position:absolute;top:16px;right:16px;font-family:var(--f-head);font-size:11px;font-weight:700;
  color:var(--muted);background:var(--soft);padding:4px 9px;border-radius:999px}

/* Pasos: la línea avanza y va encendiendo cada número */
/* El tamaño del número manda sobre todo lo demás del bloque: la línea se
   centra en él y el texto se aparta. Por eso va en una variable. */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,28px);counter-reset:s;--n:46px}
.steps::before,.steps::after{content:"";position:absolute;top:calc(var(--n)/2 - 1px);
  left:calc(var(--n)/2);right:calc(var(--n)/2);height:2px;
  border-radius:2px;pointer-events:none;z-index:0}
.steps::before{background:var(--line)}
.dark .steps::before{background:rgba(255,255,255,.18)}
.steps::after{background:linear-gradient(90deg,var(--gr-d),var(--gr));transform:scaleX(0);transform-origin:left center}
.steps.va::after{animation:avanza 1.9s cubic-bezier(.4,0,.15,1) .15s forwards}
@keyframes avanza{to{transform:scaleX(1)}}
@keyframes avanzaV{to{transform:scaleY(1)}}

.step{position:relative;z-index:1;padding-top:calc(var(--n) + 14px);counter-increment:s}
.step::after{content:counter(s);position:absolute;top:0;left:0;width:var(--n);height:var(--n);border-radius:50%;
  background:var(--line-d);color:var(--bg);font-family:var(--f-head);font-size:calc(var(--n)*.45);font-weight:700;
  letter-spacing:-.02em;display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg);transform:scale(.72);
  transition:background .3s,transform .3s}
.dark .step::after{box-shadow:0 0 0 5px #003728;background:rgba(255,255,255,.28)}
.soft .step::after{box-shadow:0 0 0 5px var(--soft)}
.steps.va .step::after{animation:enciende .5s var(--pop) forwards;
  animation-delay:calc(.25s + var(--s,0) * .46s)}
@keyframes enciende{
  60%{transform:scale(1.28);background:var(--gr)}
  to{transform:scale(1);background:var(--gr);color:#fff;box-shadow:0 0 0 5px var(--bg),0 0 0 9px rgba(104,197,48,.2)}
}
.dark .steps.va .step::after,.soft .steps.va .step::after{}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:14px;color:var(--body)}
.dark .step p{color:#A9C4B7}
.anim .steps .step h3,.anim .steps .step p{opacity:0;transform:translateY(9px)}
.steps.va .step h3{animation:pasoIn .55s var(--ease) forwards;animation-delay:calc(.38s + var(--s,0) * .46s)}
.steps.va .step p{animation:pasoIn .55s var(--ease) forwards;animation-delay:calc(.48s + var(--s,0) * .46s)}
@keyframes pasoIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .steps::after{transform:scaleX(1)}
  .steps .step h3,.steps .step p{opacity:1!important;transform:none!important}
  .step::after{background:var(--gr);color:#fff;transform:none}
}

/* Marquesina de sectores */
.mq{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-row{display:flex;overflow:hidden;padding:8px 0}
.mq-track{display:flex;gap:12px;flex:0 0 auto;width:max-content;animation:mq 46s linear infinite;will-change:transform}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:56s}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:550;color:var(--body);
  white-space:nowrap;flex:none;transition:.2s}
.chip:hover{border-color:var(--gr);color:var(--gr-dd);background:var(--gr-50);transform:translateY(-2px)}
.chip svg{width:16px;height:16px;fill:none;stroke:var(--gr);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Cifras */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,40px)}
.stat{border-left:3px solid var(--gr);padding-left:clamp(14px,1.6vw,20px)}
.stat.am{border-left-color:var(--am)}
.stat b{display:block;font-family:var(--f-head);font-size:clamp(30px,3.6vw,46px);font-weight:700;
  letter-spacing:-.045em;line-height:1;color:var(--ink)}
.dark .stat b{color:#fff}
.stat b sup{font-size:.44em;font-weight:700;color:var(--gr-d);vertical-align:super;margin-left:2px}
.dark .stat b sup{color:var(--gr-l)}
.stat span{display:block;font-size:13.5px;color:var(--body);margin-top:9px;line-height:1.45}
.dark .stat span{color:#A9C4B7}

/* Banda destacada */
.band{background:linear-gradient(150deg,#002B21,#004131 55%,#015C46);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,56px);color:#fff;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-46%;right:-10%;
  background:radial-gradient(circle,rgba(104,197,48,.22),transparent 66%);pointer-events:none}
.band::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;bottom:-40%;left:-6%;
  background:radial-gradient(circle,rgba(250,182,22,.15),transparent 66%);pointer-events:none}
.band>*{position:relative;z-index:1}

/* Calculadora / captación */
.calc{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:clamp(24px,3vw,38px);
  border:1px solid var(--line)}
.calc h3{font-size:clamp(20px,2vw,26px);margin-bottom:6px}
.calc .sub{font-size:14.5px;color:var(--muted);margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--body);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1.6px solid var(--line);border-radius:12px;
  padding:13px 15px;font:inherit;font-size:15px;background:var(--soft);transition:.18s;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gr);background:#fff;
  box-shadow:0 0 0 4px rgba(104,197,48,.13)}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}
/* Obligatorio: el asterisco lo pone el propio `required`, no hay que escribirlo en cada etiqueta */
.field:has(:required) label::after{content:" *";color:var(--gr-dd)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc .btn{width:100%;margin-top:6px}
.legal-note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}
.legal-note a{color:var(--gr-dd);text-decoration:underline}
.volver{display:block;margin:14px auto 0;font-family:inherit;font-size:13px;color:var(--muted);
  background:none;border:0;cursor:pointer;transition:color .18s}
.volver:hover{color:var(--gr-dd)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--body)}
.check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--gr)}
.check a{color:var(--gr-dd);text-decoration:underline}   /* que se vea que la política se puede abrir */

/* Ventana con formulario (<dialog> nativo: Esc y foco los lleva el navegador) */
/* el margin:auto es el que la centra: el reset del sitio pisa el del navegador */
dialog.modal{border:0;padding:0;margin:auto;background:none;width:min(520px,calc(100vw - 26px));
  max-height:calc(100dvh - 40px);overflow:visible;color:var(--ink)}
dialog.modal::backdrop{background:rgba(0,26,19,.55)}
dialog.modal .calc{position:relative;max-height:calc(100dvh - 40px);overflow:auto}
.modal-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--soft);color:var(--body);font-size:20px;line-height:1;cursor:pointer;transition:.18s}
.modal-x:hover{background:var(--gr-50);color:var(--gr-dd)}

/* Resultado de la calculadora */
.calc-out{margin-top:20px;padding:20px;border-radius:var(--r);background:var(--gr-50);
  border:1px solid var(--gr-100);display:none}
.calc-out.on{display:block;animation:pop .5s var(--pop)}
.calc-out .big{font-family:var(--f-head);font-size:clamp(26px,3vw,38px);font-weight:700;
  color:var(--gr-dd);letter-spacing:-.03em;line-height:1}
.calc-out .lbl{font-size:13px;color:var(--body);margin-top:7px}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* FAQ: tarjetas con número, aspa que gira y apertura suave */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-bottom:10px;
  overflow:hidden;transition:border-color .3s,box-shadow .3s,background .3s}
.faq:hover{border-color:var(--gr-100);box-shadow:var(--sh)}
.faq[open]{border-color:var(--gr-100);background:var(--gr-50);box-shadow:var(--sh)}
.faq summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(17px,1.9vw,22px) 62px clamp(17px,1.9vw,22px) 62px;
  font-family:var(--f-head);font-size:clamp(15.5px,1.5vw,18.5px);font-weight:600;letter-spacing:-.015em;
  transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gr-dd)}
/* número de la pregunta */
.faq summary::before{content:counter(faqn,decimal-leading-zero);counter-increment:faqn;
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color .25s}
.faq[open] summary::before,.faq:hover summary::before{color:var(--gr)}
/* aspa: dos trazos que giran */
.faq .cruz{position:absolute;right:22px;top:50%;width:22px;height:22px;margin-top:-11px;
  border-radius:50%;background:var(--gr-50);transition:background .3s,transform .45s var(--ease)}
.faq[open] .cruz{background:var(--gr);transform:rotate(135deg)}
.faq .cruz::before,.faq .cruz::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--gr-dd);border-radius:2px;transition:background .3s}
.faq .cruz::before{width:11px;height:2px;margin:-1px 0 0 -5.5px}
.faq .cruz::after{width:2px;height:11px;margin:-5.5px 0 0 -1px}
.faq[open] .cruz::before,.faq[open] .cruz::after{background:#fff}
.faq .a{height:auto;overflow:hidden;transition:height .4s cubic-bezier(.16,1,.3,1)}
.faq .a>.a-in{padding:0 62px 22px 62px;font-size:15.5px;color:var(--body);line-height:1.62}
.faq .a>.a-in p+p{margin-top:11px}
.faq-lista{counter-reset:faqn}

/* Aviso / callout */
.note{display:flex;gap:14px;align-items:flex-start;background:var(--gr-50);border:1px solid var(--gr-100);
  border-left:4px solid var(--gr);border-radius:0 var(--r) var(--r) 0;padding:18px 22px}
.note.am{background:var(--am-50);border-color:#F5E3B6;border-left-color:var(--am)}
.note svg{width:20px;height:20px;flex:none;margin-top:2px;fill:none;stroke:var(--gr-dd);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.note.am svg{stroke:var(--am-d)}
.note p{font-size:15px;color:var(--body)}
.note p b{color:var(--ink)}
.dark .note{background:rgba(104,197,48,.13);border-color:rgba(143,220,94,.3);border-left-color:var(--gr-l)}
.dark .note p{color:#B6CEC1} .dark .note p b{color:#fff}
.dark .note svg{stroke:var(--gr-l)}

/* ── Páginas interiores ───────────────────────────────────── */
.crumbs{font-size:13px;color:var(--muted);padding-top:18px;padding-bottom:18px}
.crumbs a:hover{color:var(--gr-dd);text-decoration:underline}
.crumbs span{color:var(--body)}
.phead{padding:22px 0 clamp(34px,4vw,52px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;top:-70%;right:-14%;
  background:radial-gradient(circle,rgba(104,197,48,.09),transparent 66%);pointer-events:none}
.phead>*{position:relative;z-index:1}
.phead .lead{margin-top:18px}
.phead .hero-cta{margin-top:26px}
.phead-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,54px);align-items:center}
.phead-foto{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);position:relative;background:var(--soft)}
.phead-foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease)}
.phead-foto:hover img{transform:scale(1.04)}
.phead-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 55%,rgba(0,65,49,.28))}
@media (max-width:900px){.phead-grid{grid-template-columns:1fr;gap:26px}}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(30px,4vw,60px);
  padding-top:clamp(34px,4.4vw,60px);padding-bottom:clamp(34px,4.4vw,60px);align-items:start}
.prose>*+*{margin-top:17px}
.prose h2{font-size:clamp(23px,2.5vw,32px);margin-top:clamp(32px,3.6vw,48px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(17px,1.7vw,21px);margin-top:28px}
.prose p,.prose li{font-size:16.5px;color:var(--body);line-height:1.68}
.prose b,.prose strong{color:var(--ink);font-weight:650}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:9px}
.prose li::marker{color:var(--gr)}
.prose a{color:var(--gr-dd);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--gr)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0}
.prose th{text-align:left;background:var(--soft);padding:13px 15px;font-family:var(--f-head);
  font-weight:700;font-size:13.5px;border-bottom:2px solid var(--line-d)}
.prose td{padding:13px 15px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.prose tr:hover td{background:var(--soft)}
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line)}
.tabla-wrap table{margin:0}
.aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.aside .box{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.aside .box.gr{background:linear-gradient(155deg,var(--gr-50),#fff);border-color:var(--gr-100)}
.aside h3,.aside h4{font-family:var(--f-head);font-size:17px;font-weight:700;margin-bottom:10px;letter-spacing:-.015em}
.aside p{font-size:14px;color:var(--body)}
.aside .btn{width:100%;margin-top:15px}
.toc{list-style:none;font-size:14.5px;padding:0}
.toc li{border-bottom:1px solid var(--line)}
.toc li:last-child{border:none}
.toc a{display:block;padding:9px 0;color:var(--body);transition:.16s}
.toc a:hover{color:var(--gr-dd);padding-left:5px}

/* Artículos / guías */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,24px)}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:.26s var(--ease)}
.art:hover{box-shadow:var(--sh-md);transform:translateY(-4px);border-color:var(--gr-100)}
.art .im{height:118px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--gr-dd),var(--gr))}
.art:nth-child(3n+2) .im{background:linear-gradient(135deg,#B87F00,var(--am))}
.art:nth-child(3n) .im{background:linear-gradient(135deg,#002B21,#015C46)}
.art .im::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 2px,transparent 2px 16px)}
.art .im span{position:absolute;left:18px;bottom:13px;font-family:var(--f-head);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.94);z-index:1}
.art .bd{padding:20px;display:flex;flex-direction:column;flex:1}
.art h3{font-size:17px;line-height:1.3;margin-bottom:8px}
.art p{font-size:14px;color:var(--body);flex:1}
.art .meta{font-size:12.5px;color:var(--muted);margin-top:14px}

/* ── Pie ──────────────────────────────────────────────────── */
.site-foot{background:var(--forest-d);color:#8FAE9F;padding:clamp(44px,5vw,68px) 0 26px;font-size:14.5px}
.site-foot .fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.site-foot img{height:100px;margin-bottom:18px}
.site-foot h2.fh,.site-foot h4{font-family:var(--f-head);color:#fff;font-size:13px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:16px}
.site-foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-foot a{transition:.16s}
.site-foot a:hover{color:var(--gr-l)}
/* Franja de publicidad del Kit Digital. Fondo blanco a propósito: el emblema
   de la UE no se puede retocar y sobre el verde del pie perdería contraste.
   El emblema va un tercio más alto que el logo del Plan de Recuperación, como
   recomienda la guía de justificación. */
.ue{background:#fff;border-top:1px solid var(--line);padding:16px 0}
.ue .wrap{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.ue img{height:48px;width:auto;flex:none}
.ue .ue-prtr{height:36px}
.ue-t{font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.35;color:#000;max-width:210px}

.site-foot .fbot{margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#8CA89A}
.site-foot .fbot a{text-decoration:underline}

/* Barra fija móvil */
.bar-movil{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);padding:9px 14px;gap:9px;box-shadow:0 -6px 22px rgba(11,26,20,.09)}
.bar-movil a{flex:1;justify-content:center;font-size:14px;padding:12px 10px}

/* Cookies */
/* ── El bloque de marca: el logotipo grande y qué significa el nombre.
   Mismo patrón que el «¿Qué es Allora?» de allora.es. ────────────────── */
.marca-g{align-items:center;gap:clamp(28px,4.5vw,64px)}
.marca-logo{position:relative;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh);padding:clamp(26px,4vw,54px);overflow:hidden;
  background:radial-gradient(120% 110% at 50% 0%,var(--gr-100),#fff 68%)}
.marca-logo::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  border:1.5px dashed var(--gr-100);opacity:.9}
.marca-logo img{position:relative;width:min(240px,62%);height:auto}
.anim .marca-logo img{animation:flota 7s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-10px)}}
@media (max-width:760px){.marca-logo img{width:min(190px,52%)}}

/* ── La factura por dentro: barra de reparto con los números del hero ──
   Sustituye tres párrafos por una imagen mental. Sin JS crece sola (la clase
   .anim solo la pone el JS cuando hay animación permitida). */
.anat{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh);
  padding:clamp(20px,2.6vw,32px);margin-bottom:clamp(28px,3.4vw,46px)}
.anat-cab{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.anat-t{font-family:var(--f-head);font-weight:700;font-size:clamp(17px,1.7vw,21px);color:var(--ink)}
.anat-l{font-size:13px;color:var(--muted)}
.anat-barra{display:flex;gap:4px;height:58px}
.anat-barra .s{width:calc(var(--p)*1%);border-radius:9px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:width 1.2s var(--ease)}
.anim .anat-barra .s{width:0}
.anim .anat.in .anat-barra .s{width:calc(var(--p)*1%)}
.anat-barra .s b{font-family:var(--f-head);font-size:14px;font-weight:700;white-space:nowrap;color:var(--ink)}
.anat-barra .a1 b{color:#fff}
.anat .a1{background:linear-gradient(180deg,var(--gr-d),var(--gr-dd))}
.anat .a2{background:linear-gradient(180deg,var(--gr-l),var(--gr))}
.anat .a3{background:linear-gradient(180deg,#D6E0D9,#BECDC4)}
.anat .a4{background:linear-gradient(180deg,var(--am-l),var(--am))}
.anat-ley{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.7vw,24px);margin-top:24px}
.anat-ley>div{display:flex;flex-direction:column;gap:5px;padding-top:13px;border-top:2px solid var(--line)}
.anat-ley i{width:13px;height:13px;border-radius:4px}
.anat-ley>div>b{font-family:var(--f-head);font-size:14.5px;color:var(--ink);letter-spacing:-.01em}
.anat-ley span{font-size:12.8px;color:var(--body);line-height:1.5}
.anat-ley .e{display:block;font-family:var(--f-head);font-size:16px;color:var(--ink);margin-bottom:2px}
@media (max-width:860px){.anat-ley{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  .anat-barra{height:38px}.anat-barra .s b{display:none}
  .anat-ley{grid-template-columns:1fr;gap:14px}
}

/* Las tarjetas de instalación (las ámbar) llevan foto en vez de icono: la
   rejilla de nueve servicios era mucho texto seguido. La foto va a sangre
   dentro de la tarjeta aprovechando su overflow:hidden. */
.card-f{margin:calc(-1*clamp(22px,2.4vw,30px)) calc(-1*clamp(22px,2.4vw,30px)) 18px;overflow:hidden}
.card-f img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card-f img{transform:scale(1.05)}

/* Foto de fondo de la banda oscura: textura, no protagonismo. */
.band>.band-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.17;z-index:0;border-radius:inherit}

/* Franja a sangre: corta el muro de texto entre dos secciones largas. */
.franja{position:relative;overflow:hidden;margin:clamp(8px,1.6vw,22px) 0}
.franja img{width:100%;height:clamp(230px,32vw,380px);object-fit:cover}
.franja::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,43,33,.93),rgba(0,65,49,.74) 58%,rgba(0,65,49,.34))}
.franja-t{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.franja-t p{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;color:#fff;
  font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(21px,3.1vw,40px)}
.franja-t b{color:var(--gr-l)}

/* Foto de cabecera de página: banda ancha bajo el titular, para que las
   páginas largas no arranquen con un muro de texto. */
.foto-p{margin-top:clamp(4px,1.4vw,14px)}
.foto-p img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh)}
@media (max-width:620px){.foto-p img{aspect-ratio:16/9}}

/* WhatsApp flotante. Por debajo del aviso de cookies (95) y por encima de la
   barra fija del móvil (70), que además lo empuja hacia arriba. */
.wa{position:fixed;right:22px;bottom:22px;z-index:75;display:flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;font-family:var(--f-head);font-weight:700;font-size:15px;
  padding:13px 20px 13px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(37,211,102,.34),var(--sh);
  transition:transform .25s var(--ease),box-shadow .2s,opacity .25s,visibility .25s}
.wa.esconde{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none}
.wa svg{width:24px;height:24px;fill:currentColor;flex:none}
.wa:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.42),var(--sh-md)}

.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px 26px;max-width:660px;margin:0 auto}
.cookies .ck-t{font-family:var(--f-head);font-size:17px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.cookies p{font-size:13.5px;color:var(--body)}
.cookies p a{color:var(--gr-dd);text-decoration:underline}
.cookies .r{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.cookies .btn{font-size:14px;padding:11px 20px}

/* ── Animaciones ──────────────────────────────────────────── */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes revealH{from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 100% 0)}
                   to{opacity:1;transform:none;clip-path:inset(0 0 -14% 0)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .eyebrow,.hero h1,.hero .lead,.hero-cta,.hero-note,.trust,.fact{
  opacity:0;animation:riseIn .9s var(--ease) forwards}
.hero h1{animation:revealH 1.1s var(--ease) .08s forwards}
.hero .lead{animation-delay:.3s} .hero-cta{animation-delay:.44s}
.hero-note{animation-delay:.54s} .trust{animation-delay:.64s} .fact{animation-delay:.26s}
.anim .rv{opacity:0;transform:translateY(32px) scale(.988);filter:blur(5px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s ease;
  transition-delay:calc(var(--i,0) * 85ms)}
.anim .rv.in{opacity:1;transform:none;filter:none}
.anim .lev.rv{transform:translateX(-34px)}
.anim .lev.rv.in{transform:none}
.anim .rv .n{transition:transform .6s var(--pop) .1s}
.anim .lev.rv .n{transform:scale(.55);opacity:.3}
.anim .lev.rv.in .n{transform:none;opacity:1}
.anim .sec-head.rv .eyebrow::before{transform:scaleX(0);transition:transform .55s ease .22s}
.anim .sec-head.rv.in .eyebrow::before{transform:scaleX(1)}
@supports (animation-timeline:scroll()){
  body::before{content:"";position:fixed;top:0;left:0;height:3px;width:100%;z-index:99;
    background:linear-gradient(90deg,var(--gr),var(--am));transform-origin:left;
    animation:grow linear both;animation-timeline:scroll(root)}
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .fact-card{transform:none}
    .cols{grid-template-columns:1fr}
  .aside{position:static}
  .g4,.steps,.trust,.stats{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-menu{display:none} .nav-cta{display:none} .burger{display:block} .movil{display:block}
  .nav-logo .lg-iso{height:44px} .nav-logo .lg-txt{height:36px}
  .g3,.arts{grid-template-columns:1fr 1fr}
  .site-foot .fg{grid-template-columns:1fr 1fr}
  .topbar .tb-r{display:none}
}
@media (max-width:620px){
  .nav-logo .lg-iso{display:none} .nav-logo .lg-txt{height:34px}
  .g3,.g2,.g4,.arts,.steps,.stats,.row2,.site-foot .fg{grid-template-columns:1fr}
  /* apilados, la línea pasa a vertical: una línea de tiempo */
  .steps{gap:0}
  .steps{--n:38px}
  .steps::before,.steps::after{top:calc(var(--n)/2);bottom:34px;left:calc(var(--n)/2 - 1px);right:auto;width:2px;height:auto}
  .steps::after{transform:scaleY(0);transform-origin:top center}
  .steps.va::after{animation-name:avanzaV}
  .step{padding-top:0;padding-left:calc(var(--n) + 18px);padding-bottom:26px}
  .step::after{top:0}
  .trust{grid-template-columns:1fr 1fr}
  .lev{grid-template-columns:auto 1fr;gap:16px}
  .lev .badge{grid-column:2;justify-self:start;margin-top:10px}
  .bar-movil{display:flex}
  .wa{bottom:76px;right:14px;padding:14px;gap:0}
  .wa span{display:none}
  body{padding-bottom:66px}
  .cookies{bottom:74px}
    .prose p,.prose li{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
    opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}

/* ── Gráfica comparativa: el año mes a mes ────────────────── */
.graf{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2.8vw,38px);box-shadow:var(--sh-md)}
.graf-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.graf-tabs{display:flex;gap:6px;background:var(--soft);padding:5px;border-radius:999px;flex-wrap:wrap}
.graf-tabs button{font-family:var(--f-head);font-size:13.5px;font-weight:700;padding:9px 17px;
  border-radius:999px;color:var(--body);transition:.22s var(--ease);white-space:nowrap}
.graf-tabs button:hover{color:var(--gr-dd)}
.graf-tabs button[aria-selected="true"]{background:var(--forest);color:#fff;box-shadow:var(--sh-sm)}
.graf-ley{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--body)}
.graf-ley span{display:inline-flex;align-items:center;gap:8px}
.graf-ley i{width:11px;height:11px;border-radius:3px;flex:none}
.graf-ley .i-antes{background:var(--line-d)}
.graf-ley .i-salix{background:var(--gr)}

.graf-plot{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,.9vw,12px);
  height:clamp(180px,26vh,260px);align-items:end;padding-top:8px}
.graf-plot::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.graf-mes{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;position:relative}
.graf-mes .b{width:46%;max-width:16px;border-radius:4px 4px 0 0;height:0;
  transition:height .9s var(--ease);transition-delay:calc(var(--m) * 55ms)}
.graf-mes .b-antes{background:linear-gradient(180deg,#D6E0D9,#C2CFC7)}
.graf-mes .b-salix{background:linear-gradient(180deg,var(--gr-l),var(--gr))}
.graf.on .graf-mes .b{height:var(--h)}
.graf-mes em{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11px;
  font-style:normal;color:var(--muted);font-weight:600}
.graf-mes:hover .b-antes{background:linear-gradient(180deg,#C2CFC7,#AEBDB4)}
.graf-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  background:var(--forest);color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.45;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.2s var(--ease);z-index:3;box-shadow:var(--sh-md)}
.graf-mes:hover .graf-tip{opacity:1;transform:translate(-50%,0)}
.graf-tip b{color:var(--gr-l);font-weight:700}
.graf-tip s{color:#93B3A5;text-decoration-color:rgba(255,255,255,.5)}

.graf-pie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.graf-pie div b{display:block;font-family:var(--f-head);font-size:clamp(22px,2.7vw,34px);font-weight:700;
  letter-spacing:-.035em;color:var(--ink);line-height:1}
.graf-pie div b.ahorro{color:var(--gr-dd)}
.graf-pie div span{display:block;font-size:13px;color:var(--body);margin-top:7px;line-height:1.4}
@media (max-width:720px){
  .graf-plot{height:170px;gap:3px}
  .graf-mes em{font-size:9.5px}
  .graf-pie{grid-template-columns:1fr;gap:16px}
  .graf-tip{display:none}
}

/* ── Tarjeta con foto ─────────────────────────────────────── */
.fcard{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:var(--forest-d);box-shadow:var(--sh);transition:.3s var(--ease);isolation:isolate}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.fcard img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--ease);opacity:.92}
.fcard:hover img{transform:scale(1.06);opacity:1}
.fcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,29,22,.92) 8%,rgba(0,43,33,.45) 46%,rgba(0,43,33,.05))}
.fcard .fc-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,22px);z-index:1;color:#fff}
.fcard h3{color:#fff;font-size:clamp(16px,1.6vw,19px);margin-bottom:5px}
.fcard p{font-size:13.5px;color:#C0D6C8;line-height:1.45}
.fcard .fc-mas{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-head);font-size:13px;
  font-weight:700;color:var(--gr-l);margin-top:11px;transition:gap .22s}
.fcard:hover .fc-mas{gap:12px}
.fgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
@media (max-width:860px){.fgrid3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid3{grid-template-columns:1fr}}

/* Banda de fotos ancha */
.fbanda{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(24px,3vw,38px)}
.fbanda .f{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);position:relative}
.fbanda .f img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.fbanda .f:hover img{transform:scale(1.05)}
.fbanda .f.alta img{aspect-ratio:16/10}
.fbanda .f.baja img{aspect-ratio:4/5}
@media (max-width:760px){.fbanda{grid-template-columns:1fr}.fbanda .f.baja img{aspect-ratio:16/9}}

/* ── Filas que se despliegan al pasar el ratón ─────────────
   Portado del bloque «Qué hacemos» de aitorinmobiliario.com. */
.exp-list{display:grid;gap:10px;margin-top:clamp(24px,3vw,34px)}
.exp-row{position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;padding:clamp(18px,2.1vw,26px) clamp(20px,2.4vw,30px);
  transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .3s}
.exp-row:hover,.exp-row:focus-visible{border-color:var(--gr-100);background:var(--gr-50);
  transform:translateY(-2px);box-shadow:var(--sh)}
.exp-row h3{margin:0;font-size:clamp(17px,1.85vw,22px);color:var(--ink);transition:color .3s}
.exp-row:hover h3,.exp-row:focus-visible h3{color:var(--gr-dd)}
.exp-row .exp-sub{margin:4px 0 0;font-size:13.5px;font-weight:600;color:var(--muted);transition:color .3s}
.exp-row:hover .exp-sub{color:var(--gr-d)}
.exp-row .exp-body{max-height:0;opacity:0;margin-top:0;overflow:hidden;font-size:15.5px;color:var(--body);
  line-height:1.6;transition:max-height .45s var(--ease),opacity .35s ease,margin-top .45s var(--ease)}
.exp-row:hover .exp-body,.exp-row:focus-visible .exp-body,.exp-row.exp-open .exp-body{
  max-height:260px;opacity:1;margin-top:11px}
.exp-row.exp-open{border-color:var(--gr-100);background:var(--gr-50)}
.exp-row.exp-open h3{color:var(--gr-dd)}
/* escuadras en las esquinas, como en el original */
.exp-row::before,.exp-row::after{content:"";position:absolute;width:15px;height:15px;opacity:0;transition:opacity .3s}
.exp-row::before{top:10px;left:10px;border-top:2px solid var(--gr);border-left:2px solid var(--gr)}
.exp-row::after{bottom:10px;right:10px;border-bottom:2px solid var(--gr);border-right:2px solid var(--gr)}
.exp-row:hover::before,.exp-row:hover::after,
.exp-row:focus-visible::before,.exp-row:focus-visible::after,
.exp-row.exp-open::before,.exp-row.exp-open::after{opacity:1}
.exp-row .exp-ir{display:flex;width:fit-content;align-items:center;gap:7px;font-family:var(--f-head);font-size:13.5px;
  font-weight:700;color:var(--gr-dd);margin-top:0;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .35s ease,max-height .45s var(--ease),margin-top .45s var(--ease),gap .22s}
.exp-row:hover .exp-ir,.exp-row:focus-visible .exp-ir,.exp-row.exp-open .exp-ir{opacity:1;max-height:40px;margin-top:12px}
.exp-row:hover .exp-ir{gap:12px}
/* Sin JS (o con movimiento reducido) se muestran todas abiertas:
   el contenido nunca queda inaccesible. */
html:not(.anim) .exp-row .exp-body,html:not(.anim) .exp-row .exp-ir{max-height:none;opacity:1;margin-top:11px}

/* Trampa de robots: invisible para las personas, irresistible para los bots */
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}