:root{
  --navy:#16284A; --navy-2:#1E3665; --navy-3:#24427A;
  --sun:#F4C430; --sun-2:#FFD65A; --sun-ink:#5F4400;
  --sand:#FAF7F0; --white:#FFFFFF;
  --ink:#172033; --ink-2:#465067; --muted:#667080; --line:#E6E1D6; --line-2:#D5D0C4;
}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--ink-2);margin:8px 0;line-height:1.35;cursor:pointer}
.consent input{margin-top:3px;flex:none;width:16px;height:16px}
.consent a{color:var(--navy);text-decoration:underline}
:root{
  --green:#1A7E4F; --green-soft:#E2F4EA; --wa:#0F7A46;  /* verde de WhatsApp OSCURECIDO el 09-09-2026: el oficial (#25D366) con letras blancas da 1,98 de contraste y el minimo legal es 4,5. Este da 5,39 y se sigue reconociendo. */
  --note:#FFF1A8; --note-ink:#5A4500;
  --shadow:0 2px 6px rgba(23,32,51,.08),0 14px 34px rgba(23,32,51,.10);
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Outfit","Segoe UI",system-ui,sans-serif;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600}
p{margin:.5em 0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.eyebrow{font-family:"Outfit",sans-serif;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sun-ink)}
.eyebrow.light{color:var(--sun)}
section{padding:56px 0}
.section-head{max-width:640px;margin-bottom:26px}
.section-head p{color:var(--ink-2);font-size:1.05rem;margin:.5em 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 22px;font-family:"Outfit",sans-serif;font-weight:700;font-size:1rem;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:active{transform:scale(.98)}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 6px 18px rgba(244,196,48,.35)}
.btn.sun:hover{background:var(--sun-2)}
.btn.ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.55)}
.btn.ghost.dark{color:var(--navy);border-color:var(--navy)}
.btn.navy{background:var(--navy);color:#fff}
.btn.wa{background:var(--wa);color:#fff}
.btn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* top bar */
.topbar{background:var(--navy);color:#fff;font-size:.95rem;text-align:center;padding:9px 14px}
/* 11/09/2026: en el movil la tira de arriba ocupaba dos lineas y empujaba
   la calculadora hacia abajo. Lo que sobra se esconde solo en pantallas
   pequenas; en el ordenador sigue el mensaje entero. */
.solo-ancho{display:none}
@media (min-width:760px){.solo-ancho{display:inline}}
.topbar a{color:var(--sun);font-weight:700;text-decoration:none;margin-left:6px}
.topbar svg{vertical-align:-3px;margin-right:6px}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:36px;width:auto}
.brand .grupo{font-family:"Outfit",sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);font-weight:700;line-height:1;margin-bottom:-2px}
.brand .lock{display:flex;flex-direction:column;align-items:flex-start}
.links{display:none;gap:22px;margin-left:auto;font-family:"Outfit",sans-serif;font-weight:600;font-size:.95rem}
.links a{text-decoration:none;color:var(--ink-2)}
.links a:hover{color:var(--navy)}
.lang{display:flex;gap:2px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:auto}
.lang button{border:0;background:transparent;border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:700;color:var(--muted)}
.lang button.on{background:var(--navy);color:#fff}
.nav .btn{padding:10px 16px;font-size:.92rem}
.burger{border:0;background:transparent;width:40px;height:40px;display:grid;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--navy);box-shadow:0 -7px 0 var(--navy),0 7px 0 var(--navy)}
@media (min-width:900px){.links{display:flex}.lang{margin-left:0}.burger{display:none}}
.menu{display:none;background:var(--white);border-bottom:1px solid var(--line)}
.menu.open{display:block}
.menu a{display:block;padding:14px 18px;border-top:1px solid var(--line);text-decoration:none;font-family:"Outfit",sans-serif;font-weight:600}

/* hero */
.hero{position:relative;color:#fff;background:var(--navy);overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url("img/portada.jpg") center 40%/cover no-repeat}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,40,74,.42) 0%,rgba(22,40,74,.66) 55%,rgba(22,40,74,.92) 100%)}
.hero .wrap{position:relative;padding-top:54px;padding-bottom:40px;display:grid;gap:28px}
.hero h1{font-size:clamp(2.1rem,6.2vw,3.9rem);font-weight:800;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero .sub{font-size:1.12rem;color:rgba(255,255,255,.88);max-width:52ch;margin:0}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.95rem;color:rgba(255,255,255,.9)}
.trust b{font-family:"Outfit",sans-serif;font-size:1.25rem;color:#fff;display:block;line-height:1.1}
.trust .stars{color:var(--sun);letter-spacing:1px}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:72px;padding-bottom:64px}}

/* funnel card */
.card{background:var(--white);color:var(--ink);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.funnel .q{font-family:"Outfit",sans-serif;font-weight:700;font-size:1.22rem;margin-bottom:4px}
.funnel .hint{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chips button{border:2px solid var(--line-2);background:var(--sand);border-radius:12px;padding:14px 10px;font-weight:600;font-size:1rem;color:var(--ink);text-align:center}
.chips button:hover{border-color:var(--navy)}
.chips button.sel{border-color:var(--navy);background:var(--navy);color:#fff}
.chips.one{grid-template-columns:1fr}
.prog{display:flex;gap:6px;margin-bottom:14px}
.prog i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.prog i.on{background:var(--sun)}
.step{display:none}.step.on{display:block}
.funnel .actions{display:flex;gap:10px;margin-top:16px;align-items:center}
.funnel .back{border:0;background:transparent;color:var(--muted);font-weight:600;padding:8px}
.result{background:var(--green-soft);border-radius:14px;padding:16px;margin-bottom:14px}
.result .big{font-family:"Outfit",sans-serif;font-size:2.2rem;font-weight:800;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.result small{color:var(--ink-2)}
.field{display:grid;gap:6px;margin-bottom:10px}
.field label{font-size:.85rem;font-weight:700;color:var(--ink-2)}
.field input{font:inherit;padding:12px 14px;border:2px solid var(--line-2);border-radius:10px;background:#fff}
.field input:focus{outline:0;border-color:var(--navy)}
.privacy{font-size:.8rem;color:var(--muted);margin-top:8px}
.done{text-align:center;padding:16px 0}
.done .ok{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 10px;font-size:1.6rem}
.cp{display:grid;grid-template-columns:1fr auto;gap:10px}

/* servicios */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid4 .svc:last-child{grid-column:1/-1}
@media (min-width:900px){.grid4{grid-template-columns:repeat(5,1fr);gap:14px}.grid4 .svc:last-child{grid-column:auto}}
.svc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;display:grid;gap:8px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.svc .ico{width:44px;height:44px;border-radius:12px;background:var(--navy);display:grid;place-items:center}
.svc .ico svg{width:24px;height:24px;stroke:var(--sun);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:1.05rem}
.svc .from{color:var(--ink-2);font-size:.92rem}
.svc .from b{color:var(--green);font-family:"Outfit",sans-serif;font-size:1.05rem}
.svc .more{font-size:.88rem;font-weight:700;color:var(--navy)}

/* cambio compañía */
.switch{background:linear-gradient(180deg,#FFF8DF 0%,var(--white) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.switch .wrap{display:grid;gap:26px}
@media (min-width:900px){.switch .wrap{grid-template-columns:1.05fr .95fr;align-items:center}}
.switch p{color:var(--ink-2)}
.bills{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:20px 0 6px}
.bill{background:#fff;border:1px solid var(--line);border-radius:10px 10px 0 0;padding:14px 14px 12px;position:relative;box-shadow:var(--shadow)}
.bill::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px;background:conic-gradient(from -45deg at 50% 100%,#fff 90deg,#0000 0) 0 0/10px 8px}
.bill .lab{font-family:"Outfit",sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bill .amt{font-family:"Outfit",sans-serif;font-size:2rem;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.bill.old .amt{color:var(--muted);text-decoration:line-through;text-decoration-color:#C9503A;text-decoration-thickness:3px}
.bill.new{border-color:var(--sun);box-shadow:0 8px 26px rgba(244,196,48,.28)}
.bill.new .amt{color:var(--green)}
.bill .co{font-size:.85rem;color:var(--ink-2)}
.bill .savepill{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:3px 10px;font-weight:700;font-size:.82rem;margin-top:6px}
.arrow{font-family:"Outfit",sans-serif;font-weight:800;color:var(--sun-ink);font-size:1.6rem}
.billnote{font-size:.8rem;color:var(--muted);margin:10px 0 0}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.how3 div{text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px}
.how3 svg{width:30px;height:30px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 6px;display:block}
.how3 b{display:block;font-family:"Outfit",sans-serif;font-size:.92rem;line-height:1.2}
.how3 small{color:var(--muted);font-size:.8rem;display:block;line-height:1.3;margin-top:3px}
.logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.logos span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-family:"Outfit",sans-serif;font-weight:600;font-size:.86rem;color:var(--ink-2)}
.upload{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
/* redes */
.nets{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
.nets a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-family:"Outfit",sans-serif;font-weight:600;font-size:.9rem;color:var(--ink)}
.nets a i{width:10px;height:10px;border-radius:50%;background:var(--green);display:inline-block}
.nets a.soon{color:var(--muted)} .nets a.soon i{background:var(--line-2)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.posts img{height:170px;object-fit:cover;width:100%;border-radius:10px}
@media (min-width:900px){.posts{grid-template-columns:repeat(6,1fr)}}
.drop{border:2px dashed var(--line-2);border-radius:14px;padding:26px 14px;text-align:center;color:var(--ink-2);background:var(--sand)}
.drop svg{width:38px;height:38px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 8px}
.drop b{display:block;color:var(--ink);font-family:"Outfit",sans-serif}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:14px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* financiación */
.fin{background:var(--navy);color:#fff}
.fin h2{color:#fff}
.fin .section-head p{color:rgba(255,255,255,.85)}
.fin .eyebrow{color:var(--sun)}
.cmp{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
@media (min-width:900px){.cmp{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}}
.cmp .vs{display:grid;place-items:center;font-family:"Outfit",sans-serif;font-weight:800;color:var(--sun);font-size:1.6rem}
.fcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:18px}
.fcard .lab{font-family:"Outfit",sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.fcard .amt{font-family:"Outfit",sans-serif;font-size:2.4rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;margin:6px 0 2px}
.fcard .sub{color:rgba(255,255,255,.75);font-size:.92rem}
.fcard.bad .amt{color:#FF9B8A}
.fcard.win{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.fcard.win .lab,.fcard.win .sub{color:var(--sun-ink)}
.fcard.win .amt{color:var(--ink)}
.fcard .rows{display:grid;gap:6px;margin-top:8px;font-size:.95rem}
.fcard .rows div{display:flex;justify-content:space-between;border-top:1px dashed rgba(255,255,255,.2);padding-top:6px}
.fcard .rows b{font-variant-numeric:tabular-nums}
.fin .kicker{margin-top:18px;font-family:"Outfit",sans-serif;font-size:1.25rem;font-weight:700;text-wrap:balance}
.fin .kicker em{color:var(--sun);font-style:normal}
.fin .fine{color:rgba(255,255,255,.6);font-size:.82rem;margin-top:8px}

/* obras */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filters button{border:1.5px solid var(--line-2);background:var(--white);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.9rem;color:var(--ink-2)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.obras{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.obras{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.obras{grid-template-columns:repeat(4,1fr)}}
.obra{background:var(--white);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
/* altura fija: las fotos del dron son apaisadas y con aspect-ratio salían
   recortadísimas, casi verticales (arreglado el 08/09/2026) */
.obra img{width:100%;height:190px;object-fit:cover;display:block}
@media (max-width:639px){.obra img{height:210px}}
.obra .info{padding:12px 14px 14px}
.obra .place{font-family:"Outfit",sans-serif;font-weight:700}
.obra .kind{font-size:.88rem;color:var(--muted)}
.obra .save{margin-top:6px;font-size:.92rem;color:var(--green);font-weight:700}
.obra.hide{display:none}

/* proceso */
.proc{display:grid;gap:12px}
@media (min-width:900px){.proc{grid-template-columns:repeat(5,1fr)}}
.pstep{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.pstep .n{font-family:"Outfit",sans-serif;font-weight:800;color:var(--sun-ink);background:var(--sun);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px}
.pstep h3{font-size:1rem}
.pstep p{font-size:.92rem;color:var(--ink-2);margin:4px 0 0}
.pstep .t{display:inline-block;margin-top:8px;font-size:.8rem;font-weight:700;color:var(--navy);background:var(--sand);border-radius:6px;padding:2px 8px}
.promise{margin-top:22px;background:var(--white);border-left:5px solid var(--sun);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;display:grid;gap:4px}
.promise b{font-family:"Outfit",sans-serif;font-size:1.1rem}

/* club */
.club{background:linear-gradient(180deg,#FFF6D6 0%,var(--sand) 100%)}
.gifts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media (min-width:700px){.gifts{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.gifts{grid-template-columns:repeat(6,1fr)}}
.gift{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 12px;text-align:center;display:grid;gap:6px;justify-items:center}
.gift svg{width:38px;height:38px;stroke:var(--navy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gift b{font-family:"Outfit",sans-serif;font-size:.95rem}
.gift small{color:var(--muted)}
.gift .leer-cond{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:.84rem;font-weight:700;color:#24427A;text-decoration:underline;text-underline-offset:3px}
.club .how{display:grid;gap:10px;margin-top:10px}
@media (min-width:900px){.club .how{grid-template-columns:repeat(3,1fr)}}
.club .how div{background:rgba(255,255,255,.7);border-radius:12px;padding:12px 14px;font-size:.95rem}
.club .how b{display:block;font-family:"Outfit",sans-serif}
/* catálogo del Club por escalones (11/09/2026) */
.catgrupo{display:flex;align-items:center;gap:10px;font-family:"Outfit",sans-serif;font-size:1.05rem;margin:26px 0 2px}
.catgrupo .num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sun);color:var(--sun-ink);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.gifts.uno{grid-template-columns:1fr;max-width:330px}
@media (min-width:700px){.gifts.cuatro{grid-template-columns:repeat(4,1fr)}.gifts.uno{max-width:none;grid-template-columns:repeat(4,1fr)}.gifts.uno .gift{grid-column:span 1}}
@media (min-width:700px){.gifts.cinco{grid-template-columns:repeat(5,1fr)}}
.gifts.cinco{align-items:stretch}.gifts.cinco .gift{align-content:start}
.gift .pts{font-family:"Outfit",sans-serif;font-weight:800;font-size:.9rem;color:#24427A}.tabla-club .tabla-club__tit{background:var(--sand,#F4EFE3)}
.tabla-club__con{display:flex;align-items:center;gap:12px}.tabla-club__con img{flex:none;width:44px;height:44px;object-fit:contain}.tabla-club__tit span small{display:block;font-weight:400;color:var(--muted);font-size:.85rem}
.gift .solo{font-size:.72rem;font-weight:700;color:var(--navy);background:var(--sand);border-radius:6px;padding:2px 8px}
/* tarjetas de regalo con FOTO: todas cuadradas y del mismo tamaño */
.gift.foto{padding:0 0 14px;overflow:hidden;gap:4px}
.gift.foto img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:0;margin-bottom:8px}
.gift.foto b,.gift.foto small,.gift.foto .solo{padding-left:10px;padding-right:10px}

/* mantenimiento */
.mant .wrap{display:grid;gap:20px}
@media (min-width:900px){.mant .wrap{grid-template-columns:1fr 1fr;align-items:center}}
.mant img{border-radius:var(--r);height:210px;width:100%;object-fit:cover}
.soon{display:inline-block;background:var(--navy);color:var(--sun);font-family:"Outfit",sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:6px;margin-bottom:10px}
.mant ul{padding-left:20px;color:var(--ink-2)}

/* reseñas */
.reviews{display:grid;gap:12px}
@media (min-width:900px){.reviews{grid-template-columns:repeat(3,1fr)}}
.rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.rev .stars{color:var(--sun);font-size:1.05rem;letter-spacing:1px}
.rev p{font-style:italic;color:var(--ink-2);margin:8px 0}
.rev .who{font-weight:700;font-family:"Outfit",sans-serif;font-size:.95rem}
.rev .when{color:var(--muted);font-size:.85rem}
.gscore{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.gscore .num{font-family:"Outfit",sans-serif;font-size:2.4rem;font-weight:800;line-height:1}
.gscore .stars{color:var(--sun);font-size:1.3rem;letter-spacing:2px}
.gscore small{display:block;color:var(--muted)}

/* marcas */
.brands{display:flex;flex-wrap:wrap;gap:10px}
.brands span{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-family:"Outfit",sans-serif;font-weight:600;color:var(--ink-2);font-size:.9rem}

/* marcas con logotipo oficial (08/09/2026): en gris y, al pasar por encima,
   a todo color. Las que aún no tienen logo salen con su nombre. */
.marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.marcas .m{background:var(--white);border:1px solid var(--line);border-radius:10px;height:72px;display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.marcas .m img{max-height:34px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s ease,opacity .2s ease}
.marcas .m:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(22,40,74,.10);border-color:#d8d2c4}
.marcas .m:hover img{filter:none;opacity:1}
.marcas .m.txt{font-family:"Outfit",sans-serif;font-weight:600;color:var(--ink-2);font-size:.92rem;text-align:center;line-height:1.2}
/* compañías de luz: cajas algo más pequeñas y siempre a color */
.marcas.comp{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));margin-top:16px}
.marcas.comp .m{height:62px;padding:10px}
.marcas.comp .m img{max-height:28px;filter:none;opacity:1}
.marcas.comp .m.txt{font-size:.85rem;color:var(--muted)}
@media (max-width:520px){
  .marcas{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .marcas .m{height:62px;padding:9px}
  .marcas .m img{max-height:28px;filter:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.marcas .m{transition:none}}

/* 11/09/2026 · Las marcas, en fila que se desliza con el dedo.
   En rejilla ocupaban 2.066 px en el movil (dos pantallas y media) para
   ensenar logotipos de proveedores: era el bloque MAS LARGO de la portada y
   la gente se caia ahi. En fila ocupan cinco renglones y no se pierde ni una
   marca: se deslizan de lado. La sombra de la derecha avisa de que hay mas. */
.marcas.fila{
  display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;
  gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
}
.marcas.fila .m{flex:0 0 126px;scroll-snap-align:start}
.marcas.fila:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:10px}
/* en el movil el tercer logo queda medio cortado a proposito: asi se ve que
   la fila sigue y la gente la desliza */
@media (max-width:520px){.marcas.fila .m{flex-basis:124px}}
/* el ultimo de la fila necesita aire, o la mascara se lo come */
.marcas.fila::after{content:"";flex:0 0 8px}

/* faq */
details{background:var(--white);border:1px solid var(--line);border-radius:12px;margin:8px 0}
summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:"Outfit",sans-serif;font-weight:600;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 18px 16px;margin:0;color:var(--ink-2)}

/* contacto */
.contact{background:var(--navy);color:#fff}
.contact .wrap{display:grid;gap:26px}
@media (min-width:900px){.contact .wrap{grid-template-columns:1fr 1fr;align-items:start}}
.contact h2{color:#fff}
.contact p{color:rgba(255,255,255,.85)}
.contact .card{color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ways{display:grid;gap:10px;margin-top:16px}
.ways a{display:flex;align-items:center;gap:12px;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px}
.ways svg{width:22px;height:22px;stroke:var(--sun);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ways b{display:block;font-family:"Outfit",sans-serif}
.ways small{color:rgba(255,255,255,.7)}

/* footer */
footer{background:#0F1C36;color:rgba(255,255,255,.8);padding:36px 0 110px;font-size:.92rem}
footer .cols{display:grid;gap:22px}
@media (min-width:900px){footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h3{color:#fff;font-size:.95rem;margin-bottom:8px}
footer a{color:rgba(255,255,255,.8);text-decoration:none;display:block;padding:3px 0}
footer .brand img{height:32px}
.social{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;padding:0}
.social a svg{width:20px;height:20px;fill:#fff}
.social a.off{opacity:.35}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;font-size:.82rem;color:rgba(255,255,255,.55)}

/* floats */
.floats{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:60}
.fab{width:58px;height:58px;border-radius:50%;border:0;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.25);color:#fff}
.fab.wa{background:var(--wa)}
.fab.ia{background:var(--navy);position:relative}
.fab svg{width:28px;height:28px;fill:#fff}
/* El botón de Sol lleva un sol de verdad, amarillo, y los rayos giran
   despacio para que se vea vivo (08/09/2026). */
.fab.ia svg{width:32px;height:32px;fill:none}
.fab.ia .sol-nucleo{fill:var(--sun)}
.fab.ia .sol-rayos{stroke:var(--sun);stroke-width:2.1;stroke-linecap:round;transform-origin:12px 12px;animation:girasol 24s linear infinite}
.fab.ia:hover .sol-nucleo{fill:#ffd75e}
.fab.ia:hover .sol-rayos{animation-duration:6s}
@keyframes girasol{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fab.ia .sol-rayos{animation:none}}
.fab .lbl{position:absolute;right:66px;top:50%;transform:translateY(-50%);background:var(--white);color:var(--ink);font-weight:700;font-size:.85rem;padding:6px 10px;border-radius:8px;white-space:nowrap;box-shadow:var(--shadow);font-family:"Outfit",sans-serif}
.chat{position:fixed;right:14px;bottom:150px;width:min(360px,calc(100vw - 28px));background:var(--white);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.3);display:none;flex-direction:column;overflow:hidden;z-index:61}
.chat.open{display:flex}
.chat .head{background:var(--navy);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.chat .head .av{width:34px;height:34px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:"Outfit",sans-serif;font-weight:800;color:var(--ink)}
.chat .head b{font-family:"Outfit",sans-serif}
.chat .head small{display:block;color:rgba(255,255,255,.7);font-size:.78rem}
.chat .head button{margin-left:auto;background:transparent;border:0;color:#fff;font-size:1.3rem}
.chat .body{padding:14px;display:grid;gap:8px;max-height:300px;overflow:auto;background:var(--sand)}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:.93rem}
.msg.bot{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{background:var(--navy);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.msg.esperando{font-style:italic;opacity:.7}
.msg.bot{white-space:pre-wrap}
.chat .sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px;background:var(--sand)}
.chat .sugg button{border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 10px;font-size:.82rem;font-weight:600}
.chat .in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end}
.chat .in input{flex:1;font:inherit;border:1.5px solid var(--line-2);border-radius:999px;padding:9px 14px}
.chat .in textarea{flex:1;font:inherit;border:1.5px solid var(--line-2);border-radius:20px;padding:9px 14px;resize:none;line-height:1.35;min-height:0;height:42px;max-height:110px;overflow-y:auto;min-width:0;width:auto}
.chat .in button{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:0 16px;font-weight:700}
.chat .in button.mic{padding:0;width:42px;min-width:42px;height:42px;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line-2)}
.chat .in button.mic svg{width:20px;height:20px;fill:var(--navy)}
.chat .in button.mic.rec{background:#c0392b;border-color:#c0392b;animation:micpulso 1.1s infinite}
.chat .in button.mic.rec svg{fill:#fff}
@keyframes micpulso{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.55)}50%{box-shadow:0 0 0 7px rgba(192,57,43,0)}}
@media (prefers-reduced-motion:reduce){.chat .in button.mic.rec{animation:none}}


/* ===== añadido 07/09/2026: páginas interiores, barra móvil y extras ===== */
.hero-int{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.hero-int .bg{position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:.32}
.hero-int .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,40,74,.2),rgba(22,40,74,.85))}
.hero-int .wrap{position:relative;padding-top:52px;padding-bottom:44px;display:grid;gap:14px}
.hero-int h1{font-size:clamp(2rem,5.5vw,3.3rem);font-weight:800;max-width:20ch}
.hero-int h1 em{font-style:normal;color:var(--sun)}
.hero-int .sub{font-size:1.12rem;color:rgba(255,255,255,.9);max-width:58ch;margin:0}
.hero-int .eyebrow{color:var(--sun)}
.hero-int .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.promises{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:rgba(255,255,255,.92);margin-top:10px}
.promises span::before{content:"✓ ";color:var(--sun);font-weight:800}
.prose{max-width:740px}
.prose h2{margin:36px 0 10px;font-size:clamp(1.4rem,3.4vw,1.9rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:22px 0 6px}
.prose p,.prose li{color:var(--ink-2);font-size:1.05rem}
.prose ul,.prose ol{padding-left:22px}
.prose a{color:var(--navy);font-weight:600}
.nota{background:#FFF6D6;border-left:4px solid var(--sun);padding:12px 16px;border-radius:0 10px 10px 0;font-size:.95rem;color:var(--ink-2);margin:16px 0}
.grid3{display:grid;gap:12px}
@media (min-width:800px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid2{display:grid;gap:12px}
@media (min-width:800px){.grid2{grid-template-columns:1fr 1fr}}
.box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.box h3{margin-bottom:6px}
.box p{color:var(--ink-2);font-size:.95rem;margin:0}
.box .n{font-family:"Outfit",sans-serif;font-weight:800;color:var(--sun-ink);background:var(--sun);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px}
.box .ico{width:44px;height:44px;border-radius:12px;background:var(--navy);display:grid;place-items:center;margin-bottom:10px}
.box .ico svg{width:24px;height:24px;stroke:var(--sun);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.box{text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
a.box:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.check{padding-left:0;list-style:none}
.check li{padding-left:26px;position:relative;margin:7px 0;color:var(--ink-2)}
.check li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.cta-band{background:var(--navy);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85);max-width:56ch;margin:8px auto 18px}
.cta-band .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tablewrap{overflow-x:auto;margin:14px 0}
.tabla{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.tabla td,.tabla th{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.tabla th{font-family:"Outfit",sans-serif;color:var(--navy);background:var(--sand)}
.tabla tr:last-child td{border-bottom:0}
.cat{margin:16px 0}
.cat h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;font-family:"Outfit",sans-serif}
.breadcrumb{font-size:.85rem;color:var(--muted);padding:14px 0 0}
.breadcrumb a{color:var(--muted);text-decoration:none}
.posts-grid{display:grid;gap:14px}
@media (min-width:800px){.posts-grid{grid-template-columns:repeat(3,1fr)}}
.post{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:inherit;display:grid;gap:6px;align-content:start}
.post .tag{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sun-ink);font-family:"Outfit",sans-serif;font-weight:700}
.post h3{font-size:1.1rem}
.post p{color:var(--ink-2);font-size:.95rem;margin:0}
.post .more{font-size:.88rem;font-weight:700;color:var(--navy)}
.section-alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ia-note{font-size:.78rem;color:rgba(255,255,255,.75)}
.chat .persona{display:block;margin:0 14px 10px;text-align:center;background:var(--wa);color:#fff;border-radius:999px;padding:8px;font-weight:700;text-decoration:none;font-size:.9rem}
/* barra fija abajo en el móvil */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(250,247,240,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.bottombar a{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:11px 6px;font-family:"Outfit",sans-serif;font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap}
.bottombar .call{background:var(--white);border:1.5px solid var(--navy);color:var(--navy)}
.bottombar .wa{background:var(--wa);color:#fff}
.bottombar .sun{background:var(--sun);color:var(--ink)}
.bottombar svg{width:18px;height:18px;fill:currentColor;flex:none}
body{padding-bottom:72px}
@media (min-width:900px){.bottombar{display:none}body{padding-bottom:0}}
@media (max-width:899px){.floats{bottom:86px}.chat{bottom:160px}.fab .lbl{display:none}}

/* 11/09/2026 · El boton de Sol no aparece en la primera pantalla del movil.
   Ahi esta la calculadora, y el circulo tapaba justo los botones de
   "Placas + bateria" y "Aerotermia". Se enciende solo en cuanto el visitante
   baja un poco, que es cuando hacen falta las preguntas. En el ordenador no
   cambia nada: alli nunca ha tapado nada. */
@media (max-width:899px){
  .floats{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
  body.floats-ya .floats{opacity:1;visibility:visible;transform:none}
}
@media (prefers-reduced-motion:reduce){.floats{transition:none}}
.lang{display:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--ink);padding:10px 14px;z-index:100;font-weight:700}
.skip:focus{left:10px;top:10px}
.brands span,.logos span{white-space:nowrap}
.hero .promises{margin-top:14px}
.obra-big img{height:300px}
.gift img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.form-wide{max-width:640px}
textarea{font:inherit;padding:12px 14px;border:2px solid var(--line-2);border-radius:10px;background:#fff;min-height:100px;width:100%}
textarea:focus{outline:0;border-color:var(--navy)}
select{font:inherit;padding:12px 14px;border:2px solid var(--line-2);border-radius:10px;background:#fff}

/* =====================================================================
   ARREGLOS DE MÓVIL — 09/09/2026
   Los cazó Daniel mirando la web en su móvil:
   1) el bloque azul "Hablamos" y la tarjeta blanca "Pide tu estudio
      gratis" salían descuadrados y pegados a la derecha. La causa era
      que tres rejillas (la comparativa de factura, los 3 pasos y las
      parejas de campos) no bajaban del ancho de su contenido, y
      estiraban TODA la página a 536 px en una pantalla de 386.
   2) había DOS botones de WhatsApp a la vez: el redondo flotante y el
      de la barra de abajo. En móvil se deja solo el de la barra.
   ===================================================================== */
.bills{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.how3{grid-template-columns:repeat(3,minmax(0,1fr))}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ways a{min-width:0}
.ways a>div{min-width:0}
.ways b{overflow-wrap:anywhere}
@media (max-width:560px){
  .bills{grid-template-columns:minmax(0,1fr)}
  .two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899px){.fab.wa{display:none}}

/* =====================================================================
   AUDITORÍA DE LA NOCHE DEL 9/09/2026 — arreglos de alineación
   Lo pidió Daniel: "he visto muchos textos que no están alineados".
   Medido con el navegador sobre la web publicada, no a ojo.

   1) EL TELÉFONO NO SE VEÍA EN EL ORDENADOR. Había que bajar 8.325 px
      (el 91 % de la portada) para encontrar el primer número al que
      llamar. En el móvil sí estaba, en la barra de abajo. Ahora va en
      la cabecera, fijo, al lado del botón amarillo.
   2) LOS 4 DATOS DEL HERO (< 2 semanas / +120 / 25 años / 100 %) se
      partían 3 + 1 en TODAS las pantallas de ordenador, de 900 a
      1920 px: tres arriba y uno solo colgando debajo. En móviles de
      360 y 320 px salían 2+1+1 y 1+2+1. Era flex con salto libre.
      Ahora es una rejilla fija: 4 columnas en ordenador, 2 en móvil.
      Nunca queda un dato suelto.
   3) LOS 6 REGALOS DEL CLUB tenían los títulos a distinta altura
      (7 px de desfase). Ahora se alinean arriba.
   ===================================================================== */

/* 1. teléfono en la cabecera (solo ordenador: en móvil ya está abajo) */
.navtel{display:none}
@media (min-width:900px){
  .navtel{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
    font-family:"Outfit",sans-serif;font-weight:700;font-size:.98rem;color:var(--navy);
    padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--white);
    white-space:nowrap;transition:border-color .15s,box-shadow .15s}
  .navtel:hover{border-color:var(--navy);box-shadow:0 4px 12px rgba(22,40,74,.10)}
  .navtel:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
  .links{gap:18px}
}
@media (min-width:900px) and (max-width:1060px){
  .links{gap:14px;font-size:.9rem}
  .navtel{padding:9px 12px;font-size:.92rem}
  .nav .btn{padding:10px 13px;font-size:.88rem}
}

/* 2. los 4 datos del hero, siempre cuadrados */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;align-items:start}
@media (min-width:900px){.trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust>div{min-width:0}

/* 11/09/2026 · Los 4 datos van DEBAJO de la calculadora en el movil.
   Antes iban encima y empujaban las preguntas fuera de la primera pantalla:
   los botones quedaban a 855 px y un movil normal mide 844. Por 12 pixeles,
   quien abria la web solo veia una rayita amarilla y no sabia que ahi habia
   algo que tocar. En el ordenador se quedan donde estaban, bajo el texto. */
.hero .trust{margin-top:-4px}
@media (min-width:900px){.hero .trust{grid-column:1;margin-top:-14px}}


/* 3. los regalos del Club, alineados arriba */
.gifts{align-items:start}
.gifts>*{min-width:0}

/* 4. CONTRASTE (norma de accesibilidad WCAG AA, mínimo 4,5 a 1)
   El gris de los textos pequeños daba 3,79 y el verde 4,35: por debajo
   del mínimo legal. Se han oscurecido lo justo para cumplir sin que
   cambie el aspecto: gris 5,01 y verde 5,07 sobre blanco (y por encima
   de 4,5 también sobre el fondo color arena de las secciones).
   (El cambio está arriba, en las variables --muted y --green.) */

/* 5. TEXTO BLANCO SOBRE FONDO BLANCO — invisible en 16 páginas
   El bloque azul "Hablamos" pinta todos sus párrafos de blanco
   (.contact p). Dentro lleva una tarjeta BLANCA con el formulario, y
   la línea legal "Solo usamos tus datos para el estudio. Nada de spam."
   heredaba ese blanco: se veía en blanco sobre blanco, es decir, no se
   veía. Es justamente la frase que tranquiliza al cliente antes de
   dejar su teléfono, y además es la nota de protección de datos.
   Aquí se le devuelve su color. */
.contact .card p{color:var(--ink-2)}
.contact .card .privacy{color:var(--muted)}
.contact .card h2,.contact .card h3,.contact .card b{color:var(--navy)}

/* =====================================================================
   TELÉFONO Y WHATSAPP EN PUNTOS ESTRATÉGICOS  ·  9-09-2026 (tarde)
   Encargo de Daniel: que el teléfono se vea en varios sitios de cada
   página, y que SIEMPRE lleve al lado el círculo verde de WhatsApp,
   para que de un vistazo se entienda que ese número también es WhatsApp.
   El círculo lleva un borde verde oscuro para que se distinga del fondo
   blanco (el verde oficial solo no llega al mínimo de accesibilidad).
   ===================================================================== */

/* a) cabecera del ordenador: círculo de WhatsApp pegado al teléfono */
.navwa{display:none}
@media (min-width:900px){
  .navwa{display:inline-grid;place-items:center;width:42px;height:42px;flex:none;
    border-radius:50%;background:var(--wa);border:1.5px solid #0B5F36;
    margin-left:-2px;transition:transform .12s,box-shadow .12s}
  .navwa svg{width:24px;height:24px;fill:#fff}
  .navwa:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(15,122,70,.35)}
  .navwa:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
}
@media (min-width:900px) and (max-width:1060px){
  .navwa{width:38px;height:38px}
  .navwa svg{width:21px;height:21px}
}

/* b) pie: el teléfono con su WhatsApp al lado */
.pie-tel{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.piewa{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:"Outfit",sans-serif;font-weight:700;font-size:.86rem;color:#fff;
  background:#0F7A46;border:1px solid #0B5F36;border-radius:999px;padding:5px 12px 5px 8px}
.piewa svg{width:18px;height:18px;fill:#fff;flex:none}
.piewa:hover{background:#0B5F36}
.piewa:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* c) la tira de "¿Prefieres hablar con una persona?", a media página */
/* 11/09/2026 · La banda de "dejanos tu telefono" a media pagina, justo
   despues de las obras. Dos campos, nada mas: aqui no se pide el codigo
   postal ni se ofrece la casilla de publicidad, que eso alarga y espanta.
   El formulario largo de abajo sigue igual. */
.medioform{background:var(--navy);color:#fff;padding:44px 0}
.medioform .wrap{display:grid;gap:24px}
@media (min-width:900px){.medioform .wrap{grid-template-columns:1fr 1fr;align-items:center;gap:40px}}
.medioform h2{color:#fff;font-size:clamp(1.5rem,3.8vw,2.1rem);margin:10px 0 8px}
.medioform .txt p{color:rgba(255,255,255,.85);margin:0;max-width:46ch}
.medioform .caja{background:var(--white);color:var(--ink);border-radius:14px;padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.22)}
.medioform .caja .privacy{color:var(--muted);margin:10px 0 0;font-size:.88rem}
.medioform .caja .consent{color:var(--ink-2)}
.medioform .caja .consent a{color:var(--green)}
.medioform .caja label{color:var(--ink-2)}

.telband{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0}
.telband .wrap{display:grid;gap:22px;align-items:center}
@media (min-width:900px){.telband .wrap{grid-template-columns:1fr auto;gap:36px}}
.telband h2{font-size:clamp(1.35rem,2.6vw,1.8rem);color:var(--navy)}
.telband p{color:var(--ink-2);margin:.5em 0 0;max-width:52ch}
.telband .acc{display:grid;gap:12px;min-width:0}
@media (min-width:620px){.telband .acc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.telband .acc{grid-template-columns:repeat(2,minmax(210px,1fr))}}
.telband .acc a{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;
  background:var(--white);border:1.5px solid var(--line-2);border-radius:14px;padding:13px 16px;
  transition:border-color .15s,box-shadow .15s,transform .12s}
.telband .acc a:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.telband .acc a:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.telband .acc b{display:block;font-family:"Outfit",sans-serif;font-weight:700;font-size:1.05rem;color:var(--navy);line-height:1.2}
.telband .acc small{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}
.telband .acc span{min-width:0}
.telband .acc .tel>svg{width:34px;height:34px;flex:none;fill:var(--navy)}
.telband .acc .tel:hover{border-color:var(--navy)}
.telband .acc .wa:hover{border-color:#0F7A46}
.telband .acc .wa .ico{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;background:var(--wa);border:1.5px solid #0B5F36}
.telband .acc .wa .ico svg{width:22px;height:22px;fill:#fff}

/* d) en el bloque azul de contacto, el WhatsApp con su círculo verde de verdad */
.ways .wa-ico{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:50%;background:var(--wa);border:1.5px solid #0B5F36}
.ways .wa-ico svg{width:19px;height:19px;fill:#fff;stroke:none}

/* e) en la banda azul del final, el teléfono debajo de los botones */
.cta-tel{margin:16px 0 0;color:rgba(255,255,255,.92);font-size:1.02rem;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.cta-tel a{font-family:"Outfit",sans-serif;font-weight:700;color:#fff;text-decoration:underline}
.cta-wa{display:inline-flex;align-items:center;gap:7px;text-decoration:none !important;
  font-size:.86rem;background:#0F7A46;border:1px solid #0B5F36;border-radius:999px;padding:5px 12px 5px 8px}
.cta-wa svg{width:18px;height:18px;fill:#fff;flex:none}
.cta-wa:hover{background:#0B5F36}

/* =====================================================================
   LA BARRA DE ARRIBA, CUADRADA  ·  9-09-2026 (tarde)
   Daniel: "esa línea la veo descuadrada". Y tenía razón:
     - el menú salía pegado al logo, sin aire;
     - el botón amarillo medía 64 px de alto y los demás 44, así que
       sobresalía por arriba y por abajo y rompía la línea;
     - los tres elementos de la derecha iban sueltos, cada uno a su aire.
   Ahora: el menú separado del logo, los tres de la derecha en un mismo
   bloque, TODOS con la misma altura (44 px) y la misma separación.
   ===================================================================== */
@media (min-width:900px){
  .links{margin-left:auto;margin-right:auto;gap:22px;font-size:.93rem;align-items:center}
  .links a{line-height:1;padding:4px 0}

  /* teléfono, círculo de WhatsApp y botón: mismo alto y mismo hueco */
  .navacc{display:flex;align-items:center;gap:12px;flex:none}
  .navtel{height:44px;padding:0 15px;margin:0;line-height:1}
  .navwa{width:44px;height:44px;margin:0}
  .navacc .btn.sun{height:44px;padding:0 20px;font-size:.94rem;line-height:1}
}
@media (min-width:900px) and (max-width:1140px){
  .links{margin-left:auto;margin-right:auto;gap:16px;font-size:.88rem}
  .navacc{gap:9px}
  .navtel{padding:0 12px;font-size:.9rem}
  .navwa{width:40px;height:40px}
  .navacc .btn.sun{height:40px;padding:0 14px;font-size:.88rem}
  .navtel{height:40px}
}
/* en móvil el bloque no estorba: el teléfono y el círculo no se pintan */
@media (max-width:899px){.navacc{display:flex;align-items:center;margin-left:auto}}

/* =====================================================================
   EL MÓVIL, CÓMODO PARA EL DEDO  ·  9-09-2026 (tarde)
   Medido en pantallas de 360 y 390 puntos: los enlaces del pie medían
   28 puntos de alto y los filtros de obras 38. Con el dedo se falla y
   se acaba pulsando el de al lado. Lo recomendado son 44.
   ===================================================================== */
@media (max-width:899px){
  footer a{padding:9px 0}                    /* 28 -> 40 puntos de alto */
  footer .social a{padding:0}                /* los iconos ya son grandes */
  .filters button{padding:10px 16px}         /* 38 -> 44 puntos */
  .eyebrow{font-size:.82rem}                 /* 12 -> 13 puntos, se lee mejor */
}

/* aviso de cookies (11/09/2026): abajo a la izquierda, por encima de todo; en móvil, encima de la barra */
.cookies{position:fixed;left:14px;bottom:14px;z-index:70;width:min(440px,calc(100vw - 28px));background:var(--white);color:var(--ink);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.3);padding:16px 18px;font-size:.93rem;line-height:1.45}
.cookies[hidden]{display:none}
.cookies p{margin:0 0 12px}
.cookies a{color:var(--navy);font-weight:700}
.cookies .btns{display:flex;gap:10px;flex-wrap:wrap}
.cookies .btn{padding:10px 18px;font-size:.92rem}
@media (max-width:899px){.cookies{left:10px;right:10px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- aviso de salida (11/09/2026) ----------
   Una vez por visita y nunca si ya dejó el teléfono. En el móvil sube desde
   abajo como una hoja; en el ordenador va centrado. Lo gobierna web.js. */
.salida{position:fixed;inset:0;z-index:80;background:rgba(23,32,51,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.salida[hidden]{display:none}
.salida-caja{position:relative;background:var(--white);color:var(--ink);border-radius:18px;padding:26px 22px 18px;width:min(460px,100%);box-shadow:0 18px 50px rgba(0,0,0,.35);max-height:calc(100vh - 32px);overflow:auto}
.salida-caja h2{font-size:1.45rem;margin:8px 0 8px}
.salida-caja p{color:var(--ink-2);margin:0 0 12px;font-size:.95rem}
.salida-x{position:absolute;top:8px;right:10px;background:transparent;border:0;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.salida-no{display:block;margin:10px auto 0;background:transparent;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:.85rem;cursor:pointer}
.salida .two .btn{width:100%;min-width:0}
.salida .done{padding:6px 0 0}
@media (max-width:520px){.salida{align-items:flex-end;padding:0}.salida-caja{border-radius:18px 18px 0 0;width:100%;max-height:calc(100vh - 24px);padding-bottom:calc(18px + env(safe-area-inset-bottom))}}

/* ---------- portada más ligera en el móvil (11/09/2026) ----------
   La foto grande pesa 218 KB y en un móvil de 390 px se veía a 1400 px de
   ancho: tirar el dinero. Esta versión mide 800 px y pesa 74 KB. */
@media (max-width:760px){.hero .bg{background-image:url("img/portada-movil.jpg")}}

/* ---------- número de versión (12/09/2026, idea de Dani) ----------
   En la zona de pruebas, etiqueta arriba a la izquierda; en la web de
   verdad solo el "v20" pequeño del pie. Así se sabe qué versión se ve. */
.zona-pruebas{position:fixed;top:6px;left:6px;z-index:90;background:#C0392B;color:#fff;font-family:"Outfit",sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.08em;padding:4px 9px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none}
footer .version{opacity:.55;font-variant-numeric:tabular-nums}

/* ---------- primera pantalla del móvil (12/09/2026) ----------
   Lo cazó Dani con su iPhone: "Aerotermia" y "Pagar menos de luz" quedaban
   debajo de la barra de Llamar / WhatsApp / Calcula. Medido: el último botón
   acababa en 822 px y la barra empezaba en 602 (iPhone 13 con Safari).
   1) La primera pantalla se compacta: tira de arriba a una línea, sin
      eyebrow, titular más pequeño, subtítulo de una frase, promesas juntas,
      menos aire por todas partes.
   2) En la portada, la barra de abajo aparece cuando el visitante empieza a
      bajar (clase body.floats-ya, la misma del botón de Sol): en la primera
      pantalla ya está la calculadora, que es el botón de verdad. En las demás
      páginas la barra sigue fija desde el principio. */
@media (max-width:899px){
  .topbar{font-size:.88rem;padding:7px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero .wrap{padding-top:22px;padding-bottom:26px;gap:16px}
  .hero .eyebrow{display:none}
  .hero h1{font-size:1.9rem;max-width:none}
  .hero .sub{font-size:1.02rem}
  .hero .promises{margin-top:8px;gap:4px 14px;font-size:.85rem}
  .funnel{padding:18px}
  .funnel .hint{margin-bottom:10px}
  .chips button{padding:12px 8px}
  body.portada .bottombar{transform:translateY(120%);transition:transform .25s}
  body.portada.floats-ya .bottombar{transform:none}
}
@media (prefers-reduced-motion:reduce){body.portada .bottombar{transition:none}}

/* =====================================================================
   DOS PUERTAS EN EL MENU: "QUE INSTALAMOS" Y "LEGALIZACIONES"
   12-09-2026. Antes habia paginas vendidas (aire acondicionado y
   calderas, boletines, cargador) que solo se enlazaban desde el pie:
   el cliente no las encontraba nunca. En vez de alargar la barra de
   arriba, que ya iba justa, dos enlaces se convierten en desplegables
   y la barra queda con MENOS elementos que antes.
   El titulo del desplegable es un enlace de verdad a su pagina indice:
   si alguien lo pulsa (movil con raton, tablet), va a un sitio util.
   Se abre con el raton (:hover) y con el teclado (:focus-within), sin
   una linea de JavaScript.
   ===================================================================== */
.tiene-sub{position:relative;display:flex;align-items:center}
.tiene-sub>a{display:inline-flex;align-items:center;gap:5px}
.tiene-sub>a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
.submenu{display:none;position:absolute;top:100%;left:-14px;padding-top:12px;z-index:60}
.submenu>div{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(22,40,74,.16);padding:10px;min-width:320px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.submenu.una>div{grid-template-columns:1fr;min-width:260px}
.submenu a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink-2);font-size:.9rem;line-height:1.25}
.submenu a b{display:block;font-family:"Outfit",sans-serif;font-weight:600;color:var(--ink);font-size:.93rem}
.submenu a small{color:var(--muted);font-size:.78rem}
.submenu a:hover,.submenu a:focus-visible{background:var(--sand);color:var(--navy)}
.tiene-sub:hover .submenu,.tiene-sub:focus-within .submenu{display:block}
@media (prefers-reduced-motion:no-preference){.tiene-sub:hover .submenu>div,.tiene-sub:focus-within .submenu>div{animation:bajasub .16s ease-out}}
@keyframes bajasub{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* el desplegable es solo de ordenador: en movil manda el boton de las tres rayas */
@media (max-width:899px){.submenu{display:none!important}}

/* separadores dentro del menu de movil, para que la lista larga se lea */
.menu .grupo{display:block;padding:14px 18px 4px;border-top:1px solid var(--line);font-family:"Outfit",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.menu .grupo+a{border-top:0}

/* remates de las dos paginas indice nuevas */
.box .more{display:inline-block;margin-top:8px;font-size:.88rem;font-weight:700;color:var(--navy);text-decoration:none}
.box .more:hover{text-decoration:underline}
.cta-band .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
@media (min-width:900px){.proc.tres{grid-template-columns:repeat(3,1fr)}}

/* =====================================================================
   QUE EL MENU NO SE PARTA NUNCA  ·  12-09-2026
   Daniel mando una captura con "Placas solares", "Cambia de compania" y
   "Club de Amigos" partidos en dos lineas y montados sobre el contenido:
   pasaba porque los enlaces podian romperse por el espacio y la barra
   tiene altura fija de 66 px, asi que lo que crecia se salia por abajo.
   Dos medidas: los enlaces no se parten (nowrap), y la barra de enlaces
   solo aparece cuando hay sitio de verdad (1080 px). Por debajo manda el
   boton de las tres rayas, que aguanta cualquier ancho.
   ===================================================================== */
.links>a,.tiene-sub>a{white-space:nowrap}
@media (min-width:900px) and (max-width:1079px){
  .links{display:none}
  .burger{display:grid}
  .navacc{margin-left:auto}
}

/* El menu del movil paso de 15 enlaces a 25 al agrupar Instalaciones y
   Servicios (12-09-2026): mas alto que la pantalla del telefono. Se le
   pone tope de altura y scroll propio, para que "Contacto" no quede a
   dos pantallas de distancia del boton que acabas de pulsar. */
.menu.open{max-height:calc(100vh - 130px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ---------- visor de las fotos de obras · 12/09/2026 ----------
   Las fotos ya estaban a 1.000 px y se veían a 350. Al pulsar una, se abre
   a pantalla completa. Sin librerías: solo esto y un trozo de web.js. */
.obra img{cursor:zoom-in}
/* OJO: sin esta linea la equis de cerrar no funciona. El display:flex de
   abajo pisa el display:none que el navegador le pone a lo oculto, asi que
   el visor se marcaba como cerrado pero se seguia viendo. */
.visor[hidden]{display:none}
.visor{position:fixed;inset:0;z-index:9000;background:rgba(8,12,22,.94);
  display:flex;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.visor-f{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.visor-f img{display:block;max-width:min(96vw,1100px);max-height:78vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);background:#0b111f}
.visor figcaption{text-align:center;color:#fff;max-width:min(92vw,760px);line-height:1.45}
.visor figcaption b{display:block;font-size:1.1rem}
.visor figcaption span{display:block;color:#c9d4e6;font-size:.95rem;margin-top:2px}
.visor-x,.visor-a,.visor-s{position:absolute;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.13);border-radius:999px;line-height:1;
  display:grid;place-items:center;transition:background .15s ease,transform .15s ease}
.visor-x:hover,.visor-a:hover,.visor-s:hover{background:rgba(255,255,255,.28)}
.visor-x:focus-visible,.visor-a:focus-visible,.visor-s:focus-visible{outline:3px solid #F4C430;outline-offset:3px}
.visor-x{top:14px;right:14px;width:46px;height:46px;font-size:1.35rem}
.visor-a,.visor-s{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:2.4rem;padding-bottom:6px}
.visor-a:hover,.visor-s:hover{transform:translateY(-50%) scale(1.06)}
.visor-a{left:14px}
.visor-s{right:14px}
.visor-n{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#c9d4e6;font-size:.88rem;letter-spacing:.04em;
  background:rgba(255,255,255,.1);padding:5px 14px;border-radius:999px}
@media (max-width:640px){
  .visor{padding:8px}
  .visor-f img{max-width:96vw;max-height:66vh}
  .visor-a,.visor-s{width:44px;height:44px;font-size:1.9rem}
  .visor-a{left:6px}
  .visor-s{right:6px}
  .visor figcaption b{font-size:1rem}
}

/* ===== CUESTIONARIO DEL ANUNCIO · estudio.html (13/09/2026) =====
   La página a la que llevan los anuncios. Sin menú ni barra del Club: el visitante viene a una cosa y
   no se le da nada por donde escaparse. Una pregunta por pantalla, opciones grandes de un toque. */
.landing .topbar,.landing .links,.landing .salida{display:none!important}
.landing .hero .wrap{grid-template-columns:1fr!important;max-width:620px;padding-top:26px;padding-bottom:34px}
.landing .hero h1{max-width:none;font-size:clamp(1.55rem,5vw,2.3rem)}
.landing .hero .sub{max-width:44ch}
.paso-barra{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:6px}
.funnel .chips.one button{text-align:left;padding:14px 16px;display:flex;align-items:center;gap:12px;line-height:1.25}
.funnel .chips.one button::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none;background:#fff;box-sizing:border-box}
.funnel .chips.one button.sel::before{border-color:#fff;background:radial-gradient(circle,#fff 38%,var(--navy) 44%)}
.funnel input.codigo{font-family:"Outfit",sans-serif;font-size:1.9rem;font-weight:700;letter-spacing:.55em;text-align:center;padding:10px 0 10px .55em}
.o-bien{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem;margin:14px 0}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--line)}
.sello{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:.84rem;color:rgba(255,255,255,.88);text-align:center}
/* En la página del anuncio no hay por dónde irse: ni menú, ni "Calcula tu ahorro" (que lleva a la portada).
   Se quedan llamar y WhatsApp, que son las dos únicas salidas que queremos. */
.landing .burger,.landing .menu,.landing .navacc .btn,.landing .bottombar .sun{display:none!important}
.landing .bottombar{grid-template-columns:1fr 1fr}


/* ===== AUDITORÍA 13/09/2026 ===== */
/* Primera capa de protección de datos: obligatoria, pero pequeña y discreta */
.capa1{font-size:.7rem;line-height:1.4;color:var(--muted);margin:8px 0 0}
.capa1 a{color:inherit;text-decoration:underline}
/* Aviso de cookies: panel "Configurar" */
.ck-panel{display:grid;gap:2px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.ck-panel[hidden]{display:none}
.ck-panel .btn{justify-self:start;margin-top:6px}
/* Pie: enlace al aviso legal dentro de la línea pequeña; versión legible */
footer .legal a{display:inline;padding:0;color:inherit;text-decoration:underline}
footer .version{opacity:1;color:rgba(255,255,255,.62)}
/* Enlace de la barra de arriba: más fácil de tocar sin cambiar la altura */
.topbar a{display:inline-block;padding-block:10px;margin-block:-10px}
/* Móviles de 320 px: el botón amarillo ya está en la barra de abajo */
@media (max-width:359px){
  .navacc .btn.sun{display:none}
  .bottombar a{font-size:.8rem;padding-inline:4px;gap:4px}
  .bottombar svg{width:16px;height:16px}
}


/* ===== FUENTES PROPIAS (13/09/2026) =====
   Antes se pedían a Google: la portada del móvil saltaba al llegar la fuente (CLS 0,34) y se
   mandaba la IP del visitante a Google antes de aceptar las cookies. Ahora salen de img/fuentes. */
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 500;src: url(img/fuentes/outfit-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 500;src: url(img/fuentes/outfit-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 600;src: url(img/fuentes/outfit-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 600;src: url(img/fuentes/outfit-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 700;src: url(img/fuentes/outfit-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 700;src: url(img/fuentes/outfit-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 800;src: url(img/fuentes/outfit-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Outfit';font-style: normal;font-weight: 800;src: url(img/fuentes/outfit-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: italic;font-weight: 400;src: url(img/fuentes/source-sans-3-cursiva-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: italic;font-weight: 400;src: url(img/fuentes/source-sans-3-cursiva-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: normal;font-weight: 400;src: url(img/fuentes/source-sans-3-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: normal;font-weight: 400;src: url(img/fuentes/source-sans-3-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: normal;font-weight: 600;src: url(img/fuentes/source-sans-3-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: normal;font-weight: 600;src: url(img/fuentes/source-sans-3-latin.woff2) format('woff2');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-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: normal;font-weight: 700;src: url(img/fuentes/source-sans-3-latin-ext.woff2) format('woff2');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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;font-display:swap}
@font-face{font-family: 'Source Sans 3';font-style: normal;font-weight: 700;src: url(img/fuentes/source-sans-3-latin.woff2) format('woff2');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-display:swap}


/* ===== FOTOS LIGERAS (13/09/2026) =====
   Cada foto sale en AVIF (la más ligera), WebP y JPG, en varios anchos: el navegador baja solo
   el tamaño que necesita su pantalla. Los originales salen del dron, así que ganan nitidez. */
picture{display:contents}
.hero .bg{background-image:url("img/fotos/portada-1600.jpg");background-image:image-set(url("img/fotos/portada-1600.avif") type("image/avif"),url("img/fotos/portada-1600.webp") type("image/webp"),url("img/fotos/portada-1600.jpg") type("image/jpeg"))}
@media (max-width:760px){.hero .bg{background-image:url("img/fotos/portada-800.jpg");background-image:image-set(url("img/fotos/portada-800.avif") type("image/avif"),url("img/fotos/portada-800.webp") type("image/webp"),url("img/fotos/portada-800.jpg") type("image/jpeg"))}}
@media (min-width:1700px){.hero .bg{background-image:url("img/fotos/portada-2400.jpg");background-image:image-set(url("img/fotos/portada-2400.avif") type("image/avif"),url("img/fotos/portada-2400.webp") type("image/webp"),url("img/fotos/portada-2400.jpg") type("image/jpeg"))}}
@supports (background-image:image-set(url("x.avif") type("image/avif"))){.hero-int .bg{background-image:var(--img-set,var(--img))}}


/* =====================================================================
   REDISEÑO 16/09/2026 · "que la gente diga wow" (orden de Daniel)
   Todo lo nuevo va aquí, al final, para que se vea de un vistazo qué ha
   cambiado. Nada de arriba se borra: se pisa lo justo.
   ===================================================================== */

/* ---------- 1. La rejilla de fotos rota (auditoría 3.1) ----------
   picture{display:contents} dejaba a cada <source> como celda de la rejilla:
   la foto caía en la celda 3 y 6. Las <picture> vuelven a ser bloque dentro
   de las rejillas. */
.posts picture,.obras picture,.gifts picture,.destacada picture{display:block}

/* ---------- 2. Cookies en tira compacta (auditoría 3.5) ---------- */
.cookies{left:0;right:0;bottom:0;width:auto;border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.18);font-size:.88rem;line-height:1.4;display:grid;gap:8px;border-top:1px solid var(--line)}
.cookies p{margin:0}
.cookies .btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cookies .btn{padding:8px 14px;font-size:.86rem}
.cookies .ajustar{background:transparent;border:0;color:var(--navy);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 4px}
@media (min-width:760px){
  .cookies{grid-template-columns:1fr auto;align-items:center;gap:18px;padding:10px 22px}
}
@media (max-width:899px){.cookies{left:0;right:0;bottom:calc(72px + env(safe-area-inset-bottom));padding-bottom:10px}
  body.portada:not(.floats-ya) .cookies{bottom:0}}

/* ---------- 3. Tira del Club solo en portada y obras (auditoría 4.3) ---------- */
.topbar{display:none}
body.portada .topbar,body.pag-obras .topbar{display:block}

/* ---------- 4. Cabecera: logo con más presencia (auditoría 4.1) ---------- */
.brand img{height:40px}
.brand .grupo{font-size:.72rem;letter-spacing:.22em;margin-bottom:-1px}
@media (min-width:900px){.brand img{height:44px}.nav{height:72px}}
/* 12/10/2026 (orden 17): el logo nuevo ya lleva «GRUPO» dentro y es apaisado (500×160, transparente): 46 px de alto en el móvil y 54 en el
   PC (el «Grupo» de encima y el logo de antes sumaban unos 52). En el pie, la versión de fondo oscuro a 48. Sin estirar: ancho automático. */
.brand .lock img{height:46px;width:auto;max-width:none}
/* El logo no se encoge cuando el menú del PC va lleno (antes salía estrujado: 63 px de ancho). Se encogen los huecos del menú. */
header.site .brand{flex:none}
@media (min-width:900px){.brand .lock img{height:50px}}
footer .brand .lock img{height:48px}

/* ---------- 5. Flechas ↓ en móvil (auditoría 3.6) ---------- */
@media (max-width:560px){.bills .arrow{text-align:center;transform:rotate(90deg);display:inline-block;justify-self:center;line-height:1}}
@media (max-width:899px){.cmp .vs{transform:rotate(90deg);height:34px}}
@media (max-width:899px){.cmp .vs:nth-child(4){transform:none}}

/* ---------- 6. Los 4 datos del hero, siempre en dos filas de dos ---------- */
.trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
@media (min-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr));max-width:460px}}
.trust>div{font-size:.9rem;line-height:1.25}

/* ---------- 7. Portada: cinco puertas con iconos vivos ---------- */
.svc .ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.svc .ico .ico{width:28px;height:28px;color:var(--sun);stroke:var(--sun)}
.svc:hover .ico{transform:scale(1.04)}
.svc{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.svc:hover{border-color:#e9c85a}

/* ---------- 8. Compañías: seis y "y más" ---------- */
.marcas.comp{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:900px){.marcas.comp{grid-template-columns:repeat(7,minmax(0,1fr))}}
.marcas.comp .m.txt{font-size:.8rem;line-height:1.2}

/* ---------- 9. Marcas: una sola fila, sin muros (auditoría 3.7) ---------- */
.marcas-linea{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.marcas-linea img{max-height:26px;width:auto;max-width:110px;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.marcas-linea img:hover{filter:none;opacity:1}
.marcas-linea .mas{font-family:"Outfit",sans-serif;font-weight:600;color:var(--ink-2);font-size:.9rem;white-space:nowrap}
@media (max-width:599px){.marcas-linea{gap:14px 18px}.marcas-linea img{max-height:20px;max-width:84px}}

/* ---------- 10. Obra destacada ---------- */
.destacada{position:relative;border-radius:22px;overflow:hidden;margin-bottom:16px;background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.destacada img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/7}
@media (max-width:640px){.destacada img{aspect-ratio:4/3}}
.destacada .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 18px;background:linear-gradient(180deg,rgba(22,40,74,0) 0%,rgba(22,40,74,.78) 60%,rgba(22,40,74,.92) 100%);display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.destacada .cap b{display:block;font-family:"Outfit",sans-serif;font-size:1.25rem;line-height:1.15}
.destacada .cap span{color:rgba(255,255,255,.85);font-size:.95rem}
.destacada .num{font-family:"Outfit",sans-serif;font-weight:800;font-size:2.2rem;line-height:1;color:var(--sun);text-align:right}
.destacada .num small{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.06em;text-transform:uppercase}
.destacada .sello{position:absolute;top:14px;left:14px;background:var(--sun);color:var(--ink);font-family:"Outfit",sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.obra .info .place{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.obra .info .place small{font-weight:600;color:var(--sun-ink);background:#FFF1C2;border-radius:6px;padding:1px 7px;font-size:.75rem;white-space:nowrap}

/* ---------- 11. Club en la portada: una acción principal ---------- */
.club .acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.club .acciones a.enlace{font-family:"Outfit",sans-serif;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.gift.foto img{aspect-ratio:1/1;background:#F3EEE2}
.gift.euro{padding:0 0 14px;overflow:hidden;gap:4px}
.gift.euro .icono{width:100%;aspect-ratio:1/1;background:linear-gradient(160deg,#FFF6D6,#F3EEE2);display:grid;place-items:center;margin-bottom:8px}
.gift.euro .icono .ico{width:44%;height:44%;color:var(--navy)}

/* ---------- 12. Pie corto y plegable en el móvil (auditoría 3.9) ---------- */
footer .cols{gap:18px}
@media (min-width:900px){footer .cols{grid-template-columns:1.3fr 1fr 1fr .9fr}}
/* en el móvil, cada columna se pliega bajo su título (web.js pone .abierta al tocar) */
@media (max-width:899px){
  footer .cols>div.col h3{display:flex;justify-content:space-between;align-items:center;margin:0;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer}
  footer .cols>div.col h3::after{content:"+";color:rgba(255,255,255,.6);font-weight:400;font-size:1.2rem}
  footer .cols>div.col.abierta h3::after{content:"–"}
  footer .cols>div.col a{display:none;padding:8px 0}
  footer .cols>div.col.abierta a{display:block}
  footer .cols{gap:0}
  footer .cols>div:first-child{margin-bottom:16px}
}
footer .colab{margin-top:12px;font-size:.9rem;color:rgba(255,255,255,.7)}
footer .colab a{display:inline;text-decoration:underline;padding:0;color:var(--sun)}
footer .legal a{display:inline;padding:0}
footer .legal .sep{opacity:.4;margin:0 6px}

/* ---------- 13. Heros interiores con foto de verdad (auditoría 3.4) ----------
   El fondo azul se queda (es la marca), pero la foto ya no va velada: va a la
   derecha, entera, con la esquina redondeada grande. Cada página, su imagen. */
.hero-int.foto .bg,.hero-int.foto .veil{display:none}
.hero-int.foto .wrap{display:grid;gap:22px;padding-top:36px;padding-bottom:36px}
.hero-int.foto .txt{display:grid;gap:14px;align-content:center}
.hero-int.foto .txt h1{max-width:16ch}
.hero-int.foto .img{position:relative;border-radius:26px 26px 26px 90px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);aspect-ratio:4/3;background:#0F1C36}
.hero-int.foto .img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.2s ease}
.hero-int.foto:hover .img img{transform:scale(1.06)}
.hero-int.foto .img .ilus{position:absolute;right:12px;bottom:10px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(15,28,54,.55);padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.hero-int.foto .img::after{content:"";position:absolute;inset:auto -30px -30px auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(244,196,48,.55),rgba(244,196,48,0) 70%);pointer-events:none}
@media (min-width:900px){
  .hero-int.foto .wrap{grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;padding-top:56px;padding-bottom:56px}
  .hero-int.foto .img{aspect-ratio:5/4}
}
@media (max-width:899px){.hero-int.foto .img{order:-1;aspect-ratio:16/10;border-radius:18px 18px 18px 60px}}
/* rayos de sol muy suaves detrás del texto: se nota, no molesta */
.hero-int.foto{background:radial-gradient(900px 500px at 8% 10%,rgba(244,196,48,.16),transparent 60%),var(--navy)}

/* ---------- 14. Portada: hero con más aire y el sol de fondo ---------- */
.hero .veil{background:linear-gradient(90deg,rgba(22,40,74,.88) 0%,rgba(22,40,74,.62) 55%,rgba(22,40,74,.35) 100%)}
@media (max-width:899px){.hero .veil{background:linear-gradient(180deg,rgba(22,40,74,.55) 0%,rgba(22,40,74,.8) 50%,rgba(22,40,74,.94) 100%)}}
.hero .bg{background-position:center 55%}

/* ---------- 15. ICONOS VIVOS ----------
   Un solo juego para toda la web (y de referencia para la app). Se mueven al
   pasar el ratón por su tarjeta o al entrar en pantalla (clase .vivo que pone
   web.js). Si el móvil pide "reducir movimiento", quietos. */
.ico{width:24px;height:24px;display:block}
.ico-sol .rayos{transform-origin:12px 12px;animation:icoGira 18s linear infinite}
.vivo .ico-sol .rayos,.svc:hover .ico-sol .rayos,.box:hover .ico-sol .rayos{animation-duration:5s}
.ico-sol .nucleo{fill:currentColor;fill-opacity:.18}
.ico-bateria .carga{opacity:.25}
.vivo .ico-bateria .carga,.svc:hover .ico-bateria .carga{animation:icoCarga 2.4s ease-in-out infinite}
.vivo .ico-bateria .c2,.svc:hover .ico-bateria .c2{animation-delay:.3s}
.vivo .ico-bateria .c3,.svc:hover .ico-bateria .c3{animation-delay:.6s}
.ico-onda .ola{stroke-dasharray:22;stroke-dashoffset:0}
.vivo .ico-onda .ola,.svc:hover .ico-onda .ola{animation:icoOla 1.8s ease-in-out infinite}
.ico-llama .fuego{transform-origin:12px 16px}
.vivo .ico-llama .fuego,.svc:hover .ico-llama .fuego{animation:icoLlama 1.1s ease-in-out infinite}
.ico-llama .fuego2{transform-origin:12px 18px}
.vivo .ico-llama .fuego2,.svc:hover .ico-llama .fuego2{animation:icoLlama 1.1s ease-in-out infinite .2s}
.vivo .ico-rayo .chispa,.svc:hover .ico-rayo .chispa,.vivo .ico-enchufe .chispa{animation:icoChispa 1.6s ease-in-out infinite}
.ico-dron .helice{transform-origin:6px 9px}
.ico-dron .h2{transform-origin:18px 9px}
.vivo .ico-dron .helice,.svc:hover .ico-dron .helice,.box:hover .ico-dron .helice{animation:icoHelice .5s linear infinite}
.vivo .ico-hoja .tallo{stroke-dasharray:14;animation:icoTallo 1.6s ease-out forwards}
.vivo .ico-escudo .tick{stroke-dasharray:10;stroke-dashoffset:10;animation:icoTick .7s ease-out .3s forwards}
.vivo .ico-papel .linea{stroke-dasharray:8;stroke-dashoffset:8;animation:icoTick .6s ease-out forwards}
.vivo .ico-papel .l2{animation-delay:.25s}
.vivo .ico-euro .cifra{animation:icoLatido 1.8s ease-in-out infinite}
.vivo .ico-telefono{animation:icoTimbre 1.4s ease-in-out 2}
@keyframes icoGira{to{transform:rotate(360deg)}}
@keyframes icoCarga{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes icoOla{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes icoLlama{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.06,1.12) rotate(-2deg)}70%{transform:scale(.97,1.04) rotate(2deg)}}
@keyframes icoChispa{0%,100%{opacity:1}45%{opacity:.35}55%{opacity:1}65%{opacity:.5}}
@keyframes icoHelice{to{transform:rotateX(180deg)}}
@keyframes icoTallo{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
@keyframes icoTick{to{stroke-dashoffset:0}}
@keyframes icoLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes icoTimbre{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.ico *,.vivo .ico *{animation:none!important}}

/* ---------- 16. Aparición suave y contadores (auditoría 4.5) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.trust b[data-cuenta]{font-variant-numeric:tabular-nums}

/* ---------- 17. Pasos con icono y línea que se dibuja ---------- */
.proc{position:relative}
.pstep{position:relative;transition:transform .18s ease,box-shadow .18s ease}
.pstep:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pstep .ico{position:absolute;right:14px;top:14px;color:var(--navy);opacity:.9;width:28px;height:28px}

/* ---------- 18. Servicios / instalaciones: tarjetas con icono vivo ---------- */
.box .ico{background:linear-gradient(135deg,var(--navy),var(--navy-3))}
.box .ico .ico{width:26px;height:26px;color:var(--sun);stroke:var(--sun)}

/* ---------- 19. Botones con vida ---------- */
.btn.sun{position:relative;overflow:hidden}
.btn.sun::after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .5s ease}
.btn.sun:hover::after{left:120%}
.btn.sun:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(244,196,48,.45)}
@media (prefers-reduced-motion:reduce){.btn.sun::after{display:none}}

/* ---------- 20. Ordenador: fondo con textura muy suave ---------- */
@media (min-width:900px){
  body{background-image:radial-gradient(1200px 600px at 100% -10%,rgba(244,196,48,.10),transparent 60%)}
}

/* ---------- 21. Blog: portada con foto ---------- */
.post .foto{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:6px}

/* ---------- 22. Chat de Sol: nada cambia; el botón respira ---------- */
.fab.ia{animation:solRespira 3.2s ease-in-out infinite}
@keyframes solRespira{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 0 rgba(244,196,48,.35)}50%{box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 9px rgba(244,196,48,0)}}
@media (prefers-reduced-motion:reduce){.fab.ia{animation:none}}

/* ---------- 23. La tira "hablar con una persona": el teléfono suena ---------- */
.telband .acc .tel:hover>svg{animation:icoTimbre 1.2s ease-in-out}

/* ---------- 24. Chips del embudo con marca de selección ---------- */
.chips button{transition:border-color .15s,background .15s,transform .1s}
.chips button:active{transform:scale(.98)}

/* ---------- 25. Portada más corta en el móvil: obras y pasos a dos columnas ---------- */
@media (max-width:639px){
  .obras{grid-template-columns:1fr 1fr;gap:10px}
  .obra img{height:118px}
  .obra .info{padding:9px 10px 11px}
  .obra .place{font-size:.9rem;line-height:1.2;flex-wrap:wrap}
  .obra .kind{font-size:.76rem;line-height:1.3}
  .obra .save{display:none}
  .obra .info .place small{font-size:.68rem}
}
@media (max-width:899px){
  .proc{grid-template-columns:1fr 1fr;gap:10px}
  .pstep{padding:12px 12px 12px}
  .pstep:last-child{grid-column:1/-1}
  .pstep h3{font-size:.95rem;padding-right:26px}
  .pstep p{font-size:.84rem}
  .pstep .ico{width:22px;height:22px;right:10px;top:10px}
  .hero .bg{background-position:64% 50%}
}
.hero .bg{background-position:58% 50%}
.cookies .ck-panel{grid-column:1/-1}

/* ---------- 26. Remates ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;opacity:.7;border-radius:2px}
.hero .eyebrow::before,.hero-int .eyebrow::before{background:var(--sun)}
.section-head h2{position:relative}
/* el aviso de salida y el chat no se tocan */

/* EL CLUB DE AMIGOS v2 (26/09/2026): la tabla «Cuánto suma cada amigo» (puntos de ejemplo). */
.tabla-club{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#E2DDD0);border-radius:16px;overflow:hidden;max-width:720px}
.tabla-club [role=row]{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;min-height:48px;align-items:center}
.tabla-club [role=row]+[role=row]{border-top:1px solid var(--line,#E2DDD0)}
.tabla-club b{white-space:nowrap;color:#24427A}
.tabla-club [role=row]>span{min-width:0;overflow-wrap:anywhere}.tabla-club span b{white-space:normal}.tabla-club [role=row]>b{white-space:nowrap;text-align:right;flex:none}

/* 29/09/2026: el estudio de 8 pasos, visible en la web */
.btn-estudio{margin-top:16px;display:inline-flex;min-height:44px;align-items:center;font-size:.95rem}
.menu .menu-estudio{display:block;margin:4px 0 10px;padding:12px 14px;border-radius:12px;background:var(--sun,#ffb300);color:var(--navy,#0f1b2d);font-weight:800;text-align:center}