/* ONS Group — Maqueta de rediseño · Sistema visual */
:root{
  --navy:#1F3765; --navy-900:#12213F; --navy-700:#2A4E88; --navy-100:#DCE6F5; --sky:#EEF3FA;
  --flame:#FF6A1A; --flame-700:#D9500A; --amber:#FFB020; --green:#25D366; --green-700:#128C7E;
  --ink:#16202C; --muted:#5B6775; --line:#E3E8EF; --bg:#F6F8FB; --white:#fff;
  --r:16px; --r-sm:10px; --shadow:0 10px 30px rgba(18,33,63,.10); --shadow-lg:0 24px 60px rgba(18,33,63,.18);
  --font:'Libre Franklin',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --max:1180px; --topbar:34px; --header:68px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;display:block} a{color:inherit}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.12;letter-spacing:-.01em;color:var(--navy-900)}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em} .lead{font-size:1.15rem;color:var(--muted)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
section{padding:72px 0} @media(max-width:720px){section{padding:52px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-700);margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--flame);border-radius:2px}
.eyebrow.light{color:#BFD2F0}
.center{text-align:center} .center .eyebrow{justify-content:center}
.muted{color:var(--muted)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;font-size:1rem;line-height:1;min-height:48px;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-wa{background:var(--green);color:#fff} .btn-wa:hover{background:#1ebe5a}
.btn-flame{background:var(--flame);color:#fff} .btn-flame:hover{background:var(--flame-700)}
.btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--navy-900)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy-100)} .btn-ghost:hover{border-color:var(--navy)}
.btn-ghost.light{color:#fff;border-color:rgba(255,255,255,.4)} .btn-ghost.light:hover{border-color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.btn-lg{padding:18px 28px;font-size:1.08rem}
/* Topbar + header */
/* La cabecera es sticky, no fixed. En iOS Safari un elemento fijo se ancla al
   lienzo de la página y no al área visible: al contraerse las barras del
   navegador queda dibujado decenas de píxeles por encima de lo que se ve. Un
   sticky lo posiciona el propio desplazamiento, así que no se desincroniza.
   Al ocupar sitio en el flujo, el cuerpo ya no reserva su altura con padding. */
.topfix{position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px)}
.topbar{background:var(--navy-900);color:#CFE0FA;font-size:.82rem;height:var(--topbar);display:flex;align-items:center}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar b{color:#fff} .topbar a{color:#fff;text-decoration:none;font-weight:700}
.topbar .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:720px){.topbar .hide-m{display:none}}
header.site{position:relative;z-index:50;background:#fff;border-bottom:1px solid var(--line);height:var(--header);box-shadow:0 2px 14px rgba(18,33,63,.07)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.logo img{height:30px;width:auto}
nav.main{display:flex;align-items:center;gap:4px}
nav.main a{text-decoration:none;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:8px;font-size:.95rem;white-space:nowrap}
nav.main a:hover{background:var(--sky)}
nav.main a.hot{color:var(--flame-700);display:inline-flex;align-items:center;gap:6px}
nav.main .has-sub{position:relative} nav.main .has-sub summary{list-style:none;cursor:pointer;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:8px;font-size:.95rem;white-space:nowrap;user-select:none} nav.main .has-sub summary::-webkit-details-marker{display:none} nav.main .has-sub summary:hover,nav.main .has-sub[open] summary{background:var(--sky)}
nav.main .sub{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:280px;display:none;flex-direction:column;z-index:5}
nav.main .has-sub:hover .sub,nav.main .has-sub[open] .sub{display:flex}
nav.main .sub a{display:block;padding:10px 12px} nav.main .sub small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.header-cta{display:flex;gap:8px;align-items:center}
.burger .bars i{display:block;height:2.5px;background:var(--navy);margin:0 0 4.5px;border-radius:2px;transition:.2s}
@media(max-width:980px){nav.main{display:none}}
to{transform:none}}
.drawer a.hot{color:var(--flame-700)} /* Sticky mobile bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(18,33,63,.12)}
.mbar .btn{flex:1;padding:14px 10px}
@media(max-width:980px){.mbar{display:flex}body{padding-bottom:84px}}
/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;max-width:100%;background:var(--navy-900)}
.hero .bg{position:absolute;inset:0;max-width:100%;background-size:cover;background-position:center right;opacity:1;transform:scale(1.04);will-change:transform;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translate(-1%, -1%)}}
.hero .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,33,63,.96) 0%,rgba(18,33,63,.93) 52%,rgba(18,33,63,.62) 74%,rgba(18,33,63,.16) 100%)}
.hero h1,.hero .lead,.hero .crumbs,.hero .eyebrow{text-shadow:0 1px 10px rgba(10,20,40,.55)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;min-height:calc(100vh - var(--header) - var(--topbar));padding-top:56px;padding-bottom:56px}
.hero h1{color:#fff} .hero .lead{color:#D9E5F6;max-width:56ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:999px;font-size:.86rem;font-weight:600}
.chip svg{width:16px;height:16px;color:var(--amber)}
.hero .card{background:#fff;color:var(--ink);border-radius:20px;padding:24px;box-shadow:var(--shadow-lg)}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:40px;padding-bottom:40px}.hero .card{display:none}}
/* Bubbles (gas leak animation) */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-40px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15));opacity:.0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.7}100%{transform:translateY(-110vh) translateX(30px) scale(1.3);opacity:0}}
/* Flame animation */
.flame{display:inline-block;width:12px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 80%,#fff3,transparent 40%),linear-gradient(to top,var(--flame),var(--amber));animation:flick .7s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes flick{to{transform:scaleY(1.15) scaleX(.9) rotate(2deg)}}
/* Trust strip */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:22px;padding-bottom:22px}
.trust .item{display:flex;gap:12px;align-items:center}
.trust .item b{display:block;font-size:1.1rem;color:var(--navy-900)} .trust .item small{color:var(--muted)}
.trust .ico{width:44px;height:44px;border-radius:12px;background:var(--sky);display:grid;place-items:center;color:var(--navy);flex:none;--ico-a:#FF6A1A}
.trust .ico .ons-ico{width:24px;height:24px}
.trust .ico svg{width:22px;height:22px}
@media(max-width:980px){.trust .wrap{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.trust .wrap{grid-template-columns:1fr 1fr;gap:12px}.trust .item b{font-size:.98rem}}
/* Cards */
.grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 1px 0 rgba(18,33,63,.03);transition:transform .2s,box-shadow .2s;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ico{width:56px;height:56px;border-radius:14px;background:var(--navy);display:grid;place-items:center;margin-bottom:16px}
.card .ico img{width:34px;height:34px;filter:brightness(10)}
.card.hot .ico{background:linear-gradient(135deg,var(--flame),var(--amber))}
.card ul{padding-left:18px;margin:10px 0;color:var(--muted)} .card li{margin:4px 0}
.card .more{font-weight:700;color:var(--navy-700);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.card .more:hover{gap:10px} .card .more svg,.symp svg,.more svg{width:18px;height:18px;flex:none}
.card.img{padding:0;overflow:hidden} .card.img img.cover{aspect-ratio:16/10;object-fit:cover;width:100%}
.card.img .body{padding:20px 22px 24px}
.tag{display:inline-block;background:var(--sky);color:var(--navy-700);font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.tag.hot{background:#FFE9DC;color:var(--flame-700)}
/* Segment toggle */
.toggle{display:inline-flex;background:var(--sky);padding:4px;border-radius:999px;gap:4px}
.toggle button{border:0;background:transparent;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer;color:var(--navy);font-family:inherit;font-size:.95rem}
.toggle button.on{background:var(--navy);color:#fff}
div[data-seg]{display:none} div[data-seg].on{display:block}
/* Triage */
.triage{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.triage{grid-template-columns:1fr}}
.triage button{text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:20px;cursor:pointer;font-family:inherit;transition:.2s;color:var(--ink)}
.triage button:hover,.triage button.on{border-color:var(--flame);box-shadow:var(--shadow)}
.triage button .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sky);color:var(--navy);font-weight:800;margin-bottom:10px}
.triage button.on .n{background:var(--flame);color:#fff}
.triage b{display:block;font-size:1.05rem;margin-bottom:4px} .triage span{color:var(--muted);font-size:.92rem}
.triage-panel{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:none;animation:fade .3s}
.triage-panel.on{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Do / Don't */
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:860px){.dodont{grid-template-columns:1fr}}
.dodont .col{border-radius:var(--r);padding:24px;background:#fff;border:1px solid var(--line)}
.dodont .col.do{border-top:6px solid var(--green)} .dodont .col.dont{border-top:6px solid var(--flame)}
.dodont ol{list-style:none;padding:0;margin:0;counter-reset:s}
.dodont li{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);counter-increment:s}
.dodont li:last-child{border:0}
.dodont li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--navy)}
.dodont .dont li::before{background:var(--flame)}
.emg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
@media(max-width:720px){.emg{grid-template-columns:1fr 1fr}}
.emg a{display:block;background:var(--navy-900);color:#fff;text-decoration:none;border-radius:12px;padding:14px 16px}
.emg a small{display:block;color:#AFC4E6;font-size:.78rem} .emg a b{font-size:1.1rem}
/* Stepper (flujo oficial) */
.flow{background:var(--navy-900);color:#fff}
.flow h2{color:#fff} .flow .lead{color:#C9D8EE}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:30px;position:relative}
.steps::before{content:"";position:absolute;left:5%;right:5%;top:30px;height:3px;background:rgba(255,255,255,.15)}
.steps .bar{position:absolute;left:5%;top:30px;height:3px;background:linear-gradient(90deg,var(--amber),var(--flame));width:0;transition:width .6s ease}
.step{position:relative;text-align:center;cursor:pointer;padding:0 6px}
.step .dot{width:62px;height:62px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:var(--navy-700);border:3px solid rgba(255,255,255,.2);font-weight:800;font-size:1.2rem;transition:.3s;position:relative;z-index:1}
.step.on .dot,.step.done .dot{background:var(--flame);border-color:#fff;transform:scale(1.08);box-shadow:0 0 0 8px rgba(255,106,26,.25)}
.step.done .dot{background:var(--amber)}
.step b{display:block;font-size:.95rem} .step small{color:#AFC4E6;display:block}
.step.ons .dot{background:var(--green);border-color:#fff}
.step.ons .dot::after{content:"ONS";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:.6rem;letter-spacing:.1em;background:#fff;color:var(--navy-900);padding:2px 8px;border-radius:999px}
.flow-panel{margin-top:30px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:26px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.flow-panel h3{color:#fff;font-size:1.35rem} .flow-panel p{color:#D9E5F6;margin:0}
.flow-panel .who{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;background:rgba(255,255,255,.14)}
.flow-panel.ons{border-color:var(--green)} .flow-panel.ons .who{background:var(--green);color:#fff}
@media(max-width:860px){.steps{grid-template-columns:repeat(5,1fr);gap:3px;margin-top:24px}
  .steps::before,.steps .bar{top:20px;left:10%;right:10%}
  .step{display:grid;justify-items:center;gap:7px;text-align:center}
  .step .dot{width:40px;height:40px;font-size:.95rem;margin:0 auto}
  .step b,.step small{display:none}
  .step .scorto{display:block;font-style:normal;font-size:.62rem;font-weight:700;line-height:1.15;color:#9FB8DC}
  .step.on .scorto{color:#fff}
  .flow-panel{grid-template-columns:1fr;padding:18px}}
/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:520px){.stats[style]{grid-template-columns:1fr 1fr!important}}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center}
.stat b{display:block;font-size:2.2rem;color:var(--navy);font-weight:800;line-height:1} .stat small{color:var(--muted)}
.stat.hot b{color:var(--flame-700)}
/* Includes list */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:block;position:relative;padding-left:34px}
.checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center} @media(max-width:860px){.split{grid-template-columns:minmax(0,1fr);gap:24px}}
.split>*{min-width:0}
.split img.photo{border-radius:20px;box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
/* Price box */
.price{background:linear-gradient(135deg,var(--navy),var(--navy-700));color:#fff;border-radius:20px;padding:26px}
.price b.big{font-size:2rem;display:block} .price small{color:#C9D8EE}
/* Credential */
.cred{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.cred img{width:96px} .cred .qr{width:84px;height:84px;border:2px dashed var(--navy-100);border-radius:8px;display:grid;place-items:center;font-size:.7rem;color:var(--muted);text-align:center}
@media(max-width:520px){.cred{grid-template-columns:1fr}}

/* Coverage */
.cov{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center} @media(max-width:860px){.cov{grid-template-columns:1fr}}
.comunas{display:flex;flex-wrap:wrap;gap:8px}
.comunas span{background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.92rem}
.comunas span.hot{border-color:var(--flame);color:var(--flame-700)}
.map{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px}
.map svg{width:100%;height:auto}
/* Reviews */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.review .stars{color:var(--amber);letter-spacing:2px;margin-bottom:8px}
.review p{font-style:italic;color:var(--ink)} .review small{color:var(--muted)}
/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--navy-700);transition:.2s} .faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:16px;margin:0}
/* Form */
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.form label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 6px}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:1rem;background:#fff}
.form input:focus,.form select:focus{outline:2px solid var(--navy-100);border-color:var(--navy)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.form .row{grid-template-columns:1fr}}
.form .btn{width:100%;margin-top:16px}
.wa-preview{background:#E7FBEA;border:1px solid #BDEBC7;border-radius:12px;padding:12px 14px;font-size:.9rem;margin-top:12px;color:#14532d}
/* CTA band */
.band{background:linear-gradient(120deg,var(--flame),var(--amber));color:#fff}
.band h2{color:#fff} .band .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
@media(max-width:860px){.band .wrap{grid-template-columns:1fr}}
.band .btn-navy{background:var(--navy-900)}
/* Footer */
footer{background:var(--navy-900);color:#C9D8EE;padding:56px 0 100px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} @media(max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer .wrap{grid-template-columns:1fr}}
footer h4{color:#fff;margin-bottom:12px} footer a{color:#C9D8EE;text-decoration:none;display:block;padding:4px 0} footer a:hover{color:#fff}
footer .logo img{height:28px;margin-bottom:12px}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:.82rem;color:#8FA6CC}
/* Reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.hero .bg{animation:none}.bubbles i{animation:none}}
/* Page hero (interior) */
.phero{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
/* El banner muestra la foto al 100% y deja que el velo haga el trabajo de legibilidad
   solo donde hay texto: fuerte en la mitad izquierda, casi nulo en el tercio derecho.
   Antes la foto iba al 35% bajo un velo del 95% y no se veía nada. */
.phero .bg{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:1}
.phero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,33,63,.95) 0%,rgba(18,33,63,.92) 42%,rgba(18,33,63,.55) 68%,rgba(18,33,63,.12) 100%)}
.phero .wrap{position:relative;padding-top:64px;padding-bottom:64px;max-width:1180px;margin-left:auto;margin-right:auto}
.phero .wrap>*{max-width:640px}
.phero h1,.phero .lead,.phero .crumbs,.phero .eyebrow{text-shadow:0 1px 10px rgba(10,20,40,.55)}
.phero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem)} .phero .lead{color:#D9E5F6}
.crumbs{font-size:.84rem;color:#AFC4E6;margin-bottom:14px} .crumbs a{color:#AFC4E6;text-decoration:none}
/* Symptoms */
.symp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:860px){.symp{grid-template-columns:1fr 1fr}} @media(max-width:520px){.symp{grid-template-columns:1fr}}
.symp a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;font-weight:600;display:flex;gap:10px;align-items:center;transition:.2s}
.symp a:hover{border-color:var(--navy);transform:translateY(-2px)}
.symp a span{width:36px;height:36px;border-radius:10px;background:var(--sky);display:grid;place-items:center;color:var(--navy);flex:none}
/* Notice */
.note{background:#FFF7E6;border-left:4px solid var(--amber);padding:14px 16px;border-radius:0 10px 10px 0;font-size:.95rem}
.badge-maq{position:fixed;top:8px;left:8px;pointer-events:none;z-index:45;background:#111;color:#fff;font-size:.68rem;padding:4px 8px;border-radius:6px;opacity:.75;letter-spacing:.06em}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:t} @media(max-width:720px){.timeline{grid-template-columns:1fr}}
.timeline .t{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;counter-increment:t;position:relative}
.timeline .t::before{content:"0" counter(t);font-size:2.4rem;font-weight:800;color:var(--navy-100);line-height:1;display:block;margin-bottom:8px}
.ticker{display:flex;gap:40px;overflow:hidden;max-width:100vw;white-space:nowrap;background:var(--navy);color:#fff;font-weight:700;font-size:.9rem;padding:10px 0}
.ticker div{display:flex;gap:40px;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker span::before{content:"✓";color:var(--amber);margin-right:8px}
@media(max-width:980px){.badge-maq{top:auto;bottom:88px}}
/* Pills de temas (blog) */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pills button{border:1.5px solid var(--line);background:#fff;color:var(--navy);font-family:inherit;font-weight:700;font-size:.9rem;padding:9px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;min-height:40px}
.pills button span{background:var(--sky);color:var(--navy-700);font-size:.74rem;padding:2px 7px;border-radius:999px}
.pills button:hover{border-color:var(--navy)}
.pills button.on{background:var(--navy);color:#fff;border-color:var(--navy)} .pills button.on span{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:720px){.pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;scrollbar-width:none}.pills::-webkit-scrollbar{display:none}.pills button{flex:none}}
.card.img.hide{display:none}
/* Reseñas con foto */
.review{padding:0;overflow:hidden;display:flex;flex-direction:column}
.review .rphoto{width:100%;aspect-ratio:16/9;object-fit:cover}
.review .rbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.review .rhead{display:flex;gap:12px;align-items:center}
.review .rhead b{display:block;line-height:1.15} .review .rhead small{color:var(--muted);display:block;font-size:.82rem}
.review .avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem;flex:none}
.review .stars{display:flex;align-items:center;margin:0}
.review p{margin:0;font-style:italic;color:var(--ink);font-size:.95rem}
.review .src{color:var(--muted);font-size:.78rem;margin-top:auto;display:flex;align-items:center;gap:6px}
.review .src::before{content:"G";font-weight:800;color:#4285F4;font-style:normal;border:1px solid var(--line);border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-size:.7rem}

/* ---------- Menú: escritorio y móvil (checkbox + label, 100% sin JS) ---------- */
.burger{display:none}
.mnav{display:none}
/* El checkbox guarda el estado. No se usa display:none ni pointer-events:none:
   Safari en iOS deja de responder al <label for> cuando el control está así. */
.mnav-chk{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;clip-path:inset(50%);appearance:none;-webkit-appearance:none}
.mnav-panel{display:none}
.mnav-chk:checked ~ .mnav-panel{display:block}
@media(max-width:1180px){.header-cta .btn-ghost{display:none}nav.main a{padding:10px 9px;font-size:.9rem}nav.main .has-sub summary{padding:10px 9px;font-size:.9rem}}
@media(max-width:980px){
  nav.main{display:none}
  .mnav{display:block;position:relative}
  .burger{display:block;box-sizing:border-box;min-width:48px;min-height:48px;padding:7px 10px 5px;cursor:pointer;list-style:none;
    border:1.5px solid var(--line);border-radius:11px;background:#fff;text-align:center;-webkit-tap-highlight-color:transparent;user-select:none}
  .burger::-webkit-details-marker{display:none}
  .burger::marker{content:""}
  .burger .bars{display:block;width:22px;margin:0 auto}
  .burger .bars i{display:block;height:2.5px;width:100%;margin:0 0 4.5px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
  .burger .bars i:last-child{margin-bottom:0}
  .burger .blbl{display:block;margin-top:4px;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);line-height:1}
  .mnav-chk:checked ~ .burger{background:var(--sky);border-color:var(--sky)}
  .mnav-chk:checked ~ .burger .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mnav-chk:checked ~ .burger .bars i:nth-child(2){opacity:0}
  .mnav-chk:checked ~ .burger .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
.mnav-panel{position:fixed;inset:0;background:#fff;z-index:90;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(14px + env(safe-area-inset-top,0px)) 20px calc(40px + env(safe-area-inset-bottom,0px));animation:mnavin .2s ease}
@keyframes mnavin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mnav-head img{height:26px;width:auto}
.mnav-close{font-size:1.9rem;color:var(--navy);line-height:1;cursor:pointer;-webkit-tap-highlight-color:rgba(31,55,101,.08)}
.mnav-links a{position:relative;z-index:3;scroll-margin-top:76px;display:block;padding:10px 8px;text-decoration:none;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line);font-size:1rem;min-height:46px;-webkit-tap-highlight-color:rgba(31,55,101,.08)}
.mnav-links a:active{background:var(--sky)}
.mnav-links a small{display:block;font-weight:400;color:var(--muted);font-size:.78rem;margin-top:1px;line-height:1.25}
.mnav-links a.hot{color:var(--flame-700);display:flex;align-items:center;gap:8px}
.mnav-links .dgroup{scroll-margin-top:76px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:12px 8px 2px}
/* Aviso de que el menú sigue hacia abajo: sin esto el usuario cree que no hay más opciones */
.mnav-panel::after{content:"";position:fixed;left:0;right:0;bottom:0;height:54px;pointer-events:none;
  background:linear-gradient(to top,#fff 18%,rgba(255,255,255,0));z-index:2}
.mnav-panel{scroll-behavior:auto}
.mnav-cta{display:grid;gap:8px;margin-top:20px}
.mnav-cta .btn{width:100%}

/* ---------- Tarjetas de servicio ---------- */
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--navy-100)}
.svc-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-900)}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc-media img{transform:scale(1.06)}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,33,63,0) 35%,rgba(18,33,63,.55) 100%)}
.svc-badge{position:absolute;top:12px;left:12px;z-index:1;background:var(--flame);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.svc-badge.alt{background:var(--navy);}
.svc-body{padding:0 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.svc-ico{width:52px;height:52px;border-radius:14px;background:var(--navy);display:grid;place-items:center;margin-top:-26px;position:relative;z-index:1;box-shadow:0 6px 18px rgba(18,33,63,.28);border:3px solid #fff}
.svc-ico .ons-ico{width:26px;height:26px}
.svc-ico{color:#fff;--ico-a:#FF9150}
.svc.urgente .svc-ico{--ico-a:#fff}
.svc.urgente .svc-ico{background:linear-gradient(135deg,var(--flame),var(--amber))}
.svc h3{margin:4px 0 0;font-size:1.17rem}
.svc p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.5}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.svc-tags span{background:var(--sky);color:var(--navy-700);font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px}
.svc-cta{margin-top:auto;padding-top:10px;font-weight:800;color:var(--navy-700);display:inline-flex;align-items:center;gap:7px;font-size:.93rem}
.svc-cta svg{width:17px;height:17px;transition:transform .2s}
.svc:hover .svc-cta svg{transform:translateX(4px)}

/* ---------- Carrusel ---------- */
.carousel{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:4px 20px}
.carousel::-webkit-scrollbar{display:none}
.carousel .track{display:flex;gap:20px;align-items:stretch}
.carousel .track>*{flex:0 0 min(360px,84vw);scroll-snap-align:start}
@media(min-width:981px){.carousel .track>*{flex:0 0 calc((100% - 40px)/3)}}
.cnav-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.cnav{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.15s;font-family:inherit}
.cnav:hover{border-color:var(--navy);background:var(--sky)}
.cdots{display:flex;gap:7px}
.cdots i{width:8px;height:8px;border-radius:50%;background:var(--navy-100);display:block;transition:.2s}
.cdots i.on{background:var(--navy);width:22px;border-radius:999px}

/* ---------- Grilla de logos ---------- */
.logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:stretch}
.logo-cell{background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:12px;height:92px;overflow:hidden;transition:.2s}
.logo-cell:hover{border-color:var(--navy-100);box-shadow:var(--shadow)}
.logo-cell img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:.2s}
.logo-cell:hover img{filter:none;opacity:1}
.logo-wordmark{font-size:.68rem;line-height:1.2;color:var(--muted);text-align:center;font-weight:600;letter-spacing:.02em;filter:grayscale(1);opacity:.72;transition:.2s}
.logo-cell:hover .logo-wordmark{filter:none;opacity:1}
.logo-wordmark b{font-size:.95rem;color:var(--navy);letter-spacing:.07em;display:block}
@media(max-width:980px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.logo-cell{padding:9px;border-radius:11px;height:74px}}

/* ---------- Barra superior fija (topbar + header) ---------- */
@media(max-width:640px){:root{--topbar:32px;--header:60px}.topbar{font-size:.74rem}.logo img{height:25px}}
.hero .wrap{padding-top:40px}
/* El panel del menú cubre toda la pantalla, sin depender de la altura del header */

.mnav-head{position:sticky;top:0;background:#fff;padding:4px 0 12px;border-bottom:1px solid var(--line);margin-bottom:6px;z-index:3}
.mnav-close{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;color:var(--navy);cursor:pointer;border:1.5px solid var(--line);position:relative;z-index:3;user-select:none}
.mnav-close:active{background:var(--sky)}

/* ---------- Logos en móvil: dos filas que giran solas ---------- */
.logos-mobile{display:none}
@media(max-width:720px){
  .logos{display:none}
  .logos-mobile{display:block;overflow:hidden;margin:0;border-radius:14px;padding:2px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
  .lrow{display:flex;gap:10px;width:max-content;margin-bottom:10px}
  .lrow .logo-cell{flex:0 0 118px;height:66px;padding:9px}
  .lrow-a{animation:marqA 26s linear infinite}
  .lrow-b{animation:marqB 30s linear infinite}
  @keyframes marqA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes marqB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
}
@media(prefers-reduced-motion:reduce){.lrow-a,.lrow-b{animation:none}.logos-mobile{overflow-x:auto}}

/* Anclas: compensar el header fijo */
:target,section[id],[id^="corte"],[id^="edificio"],[id^="no-enciende"],#situacion{scroll-margin-top:calc(var(--topbar) + var(--header) + 12px)}
html{scroll-padding-top:calc(var(--topbar) + var(--header) + 12px)}

/* Header en pantallas angostas: el botón de WhatsApp no debe empujar al menú */
@media(max-width:640px){
  .header-cta{gap:6px}
  .header-cta .btn-wa{padding:11px 13px;font-size:.92rem}
  .header-cta .btn-wa span.lbl{display:none}
  .burger{margin-left:2px;flex:none}
}
@media(max-width:400px){.header-cta .btn-wa{padding:11px}.logo img{height:23px}.burger{padding:7px 7px 5px;min-width:44px}}

/* El sello de maqueta no debe taparle contenido al lector en el celular */
@media(max-width:980px){.badge-maq{display:none}}

/* Tipografía de lectura en el celular: titulares y párrafos más compactos */
@media(max-width:640px){
  .hero{padding:34px 0 30px}
  .hero h1,h1{font-size:clamp(1.65rem,7.2vw,2.15rem);line-height:1.14;letter-spacing:-.015em}
  .hero .lead,.lead{font-size:1rem;line-height:1.55}
  h2{font-size:clamp(1.3rem,5.6vw,1.65rem);line-height:1.2}
  h3{font-size:1.06rem;line-height:1.3}
  p,.muted,li{font-size:.95rem;line-height:1.58}
  section{padding:38px 0}
  .eyebrow{font-size:.66rem}
}

/* Sello de certificación SEC: se muestra completo y centrado, no recortado como foto */
.sello-sec{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:28px;box-shadow:var(--shadow);min-height:260px}
.sello-sec img{max-width:100%;max-height:260px;width:auto;height:auto;object-fit:contain;display:block}
@media(max-width:780px){.sello-sec{min-height:0;padding:20px}.sello-sec img{max-height:180px}}

/* Selector de capacidad por metros cuadrados (aire acondicionado) */
.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.caps .cap{display:flex;flex-direction:column;gap:3px;padding:16px 14px;background:#fff;border:1.5px solid var(--line);
  border-radius:16px;text-decoration:none;color:inherit;transition:transform .18s,border-color .18s,box-shadow .18s;cursor:pointer}
.caps .cap:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:var(--shadow)}
.caps .cap b{font-size:1.02rem;color:var(--navy)}
.caps .cap span{font-weight:800;color:var(--flame-700);font-size:.95rem}
.caps .cap small{color:var(--muted);font-size:.78rem;line-height:1.3}
@media(max-width:980px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.caps{grid-template-columns:1fr}}

/* Llamado a la acción bajo el selector de capacidad */
.caps-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.caps-cta .btn{flex:0 0 auto}
.caps-cta .muted{flex:1 1 240px;font-size:.88rem;line-height:1.45}
@media(max-width:640px){.caps-cta{gap:10px}.caps-cta .btn{width:100%}}

/* Aire acondicionado: daños por falta de mantención, sobre fondo oscuro */
.danos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 24px}
.danos .dano{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 18px 20px}
.danos .dano b{display:block;color:#fff;font-size:1.02rem;margin-bottom:6px;line-height:1.25}
.danos .dano span{display:block;color:#C9D8EE;font-size:.9rem;line-height:1.5}
.frec{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px 24px}
.frec>div{flex:1 1 340px}
.frec h3{color:#fff;margin:0 0 8px}
.frec p{color:#C9D8EE;margin:0 0 12px;font-size:.95rem;line-height:1.55}
.frec ul{margin:0;padding-left:18px;color:#C9D8EE;font-size:.93rem;line-height:1.75}
.frec ul b{color:#fff}
.frec .btn{flex:0 0 auto}
@media(max-width:980px){.danos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.danos{grid-template-columns:1fr}.frec{padding:18px}.frec .btn{width:100%}}
/* Tarjetas de servicio de la landing de aire acondicionado */
.svc-aa{gap:22px}

/* Aire acondicionado ya no necesita velo propio: desde octubre 2026 todos los banners
   usan el mismo tratamiento (foto al 100%, velo que cae a la derecha). */


/* ============================================================
   AJUSTES SOLO PARA MÓVIL · octubre 2026
   Todo lo de abajo vive dentro de media queries: el escritorio
   no cambia. Objetivo: bajar el scroll de la home de 13,2 a
   ~5 pantallas y dejar los accesos clave siempre a la vista.
   ============================================================ */

/* La bajada corta y la etiqueta corta del paso solo existen en móvil */
.svc-corto{display:none}
.step .scorto{display:none}

/* Fila de accesos rápidos bajo el header */
.acc-chk{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;clip-path:inset(50%);appearance:none;-webkit-appearance:none}
.accesos{display:none}
.acc-drop{display:none}

@media(max-width:980px){
  .accesos{display:flex;gap:8px;align-items:center;padding:9px 20px;background:#fff;border-bottom:1px solid var(--line)}
  .acc{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:999px;
    font-weight:800;font-size:.88rem;border:1.6px solid var(--line);background:#fff;color:var(--navy);
    cursor:pointer;white-space:nowrap;text-decoration:none;font-family:inherit;-webkit-tap-highlight-color:rgba(31,55,101,.08)}
  .acc.fuego{background:var(--flame);border-color:var(--flame);color:#fff;flex:1.25}
  .acc .chev{width:14px;height:14px;transition:transform .2s}
  .acc-chk:checked ~ .accesos .acc .chev{transform:rotate(180deg)}
  .acc-chk:checked ~ .accesos .acc[for="acc-chk"]{background:var(--sky);border-color:var(--sky)}
  .acc-chk:checked ~ .acc-drop{display:block}
  .acc-drop{background:#fff;border-bottom:1px solid var(--line);padding:4px 20px 12px;max-height:58vh;overflow-y:auto;box-shadow:0 14px 24px rgba(18,33,63,.10)}
  .acc-drop a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:11px 2px;
    text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;border-bottom:1px solid var(--line)}
  .acc-drop a:last-child{border-bottom:0}
  .acc-drop a:active{background:var(--sky)}
  .acc-drop a::after{content:"\203A";color:var(--navy-700);font-size:1.3rem;line-height:1}
  /* La cabecera es sticky y ocupa sitio en el flujo: sin padding de reserva. */
  html{scroll-padding-top:calc(var(--topbar) + var(--header) + 12px)}
}

/* Servicios de la home: tarjeta con foto en escritorio, lista compacta en móvil.
   La sección ocupaba 4.480 px (40% de la home); así baja a ~880 px. */
@media(max-width:640px){
  .svc-lista{gap:8px}
  .svc-lista .svc{border-radius:14px}
  .svc-lista .svc:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .svc-lista .svc-media{display:none}
  .svc-lista .svc-body{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;row-gap:0;
    align-items:center;padding:11px 34px 11px 12px;gap:0}
  .svc-lista .svc-ico{width:40px;height:40px;border-radius:11px;margin-top:0;border:0;box-shadow:none;grid-row:1/3}
  .svc-lista .svc-ico .ons-ico{width:21px;height:21px}
  .svc-lista .svc h3{grid-column:2;grid-row:1;margin:0;font-size:.97rem;line-height:1.25;align-self:end}
  .svc-lista .svc-corto{display:block;grid-column:2;grid-row:2;align-self:start;color:var(--muted);font-size:.8rem;line-height:1.35}
  .svc-lista .svc p,.svc-lista .svc-cta{display:none}
  /* Las pills vuelven a la lista compacta: sin ellas la fila queda con el
     titulo y una linea, y las palabras clave de cada servicio no se ven. */
  .svc-lista .svc-tags{display:flex;grid-column:2;grid-row:3;margin-top:7px;gap:5px;
    flex-wrap:nowrap;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 86%,transparent 100%)}
  .svc-lista .svc-tags span{font-size:.67rem;padding:2px 7px;white-space:nowrap;flex:0 0 auto}
  .svc-lista .svc::after{content:"\203A";position:absolute;right:13px;top:50%;transform:translateY(-50%);
    color:var(--navy-700);font-size:1.35rem;line-height:1}
  .svc-lista .svc-badge{top:9px;right:30px;left:auto;font-size:.58rem;padding:3px 7px;letter-spacing:.05em}
  .svc-lista .svc.con-badge h3{padding-right:104px}
  .svc-lista .svc h3{margin-bottom:1px}
}

/* Footer en móvil: dos columnas en vez de cuatro bloques apilados.
   Ocupaba 1.475 px (20% de la home en un iPhone 13). */
@media(max-width:520px){
  footer .wrap{grid-template-columns:1fr 1fr;gap:20px 16px}
  footer .wrap>div:first-child{grid-column:1/-1}
  footer h4{margin-bottom:8px;font-size:.92rem}
  footer a{font-size:.86rem;padding:3px 0}
  footer p{font-size:.86rem;line-height:1.5}
  footer .legal{grid-column:1/-1;font-size:.72rem}
}

/* Los tres pasos del "cómo trabajamos": en móvil, filas compactas con el número al lado */
@media(max-width:720px){
  .timeline{gap:8px}
  .timeline .t{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start;padding:14px;border-radius:14px}
  .timeline .t::before{font-size:1.15rem;color:#fff;background:var(--navy);width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;margin:0;grid-row:1/3;align-self:center}
  .timeline .t h3{grid-column:2;margin:0 0 2px;font-size:1rem;align-self:end}
  .timeline .t p{grid-column:2;margin:0;font-size:.86rem;line-height:1.4;align-self:start}
}


/* El header en móvil queda con el logo y Menú. WhatsApp y Llamar ya viven
   en la barra fija de abajo: tenerlos dos veces solo apretaba el header. */
@media(max-width:980px){
  .header-cta .btn-wa{display:none}
  header.site .wrap{gap:12px}
}

/* Opiniones en móvil: una tarjeta por pantalla, con el mismo aire a los dos
   lados que el resto del contenido. Antes la siguiente quedaba cortada contra
   el borde de la pantalla. */
@media(max-width:980px){
  .carousel{padding-left:20px;padding-right:20px;scroll-padding-left:20px}
  .carousel .track{gap:20px}
  .carousel .track>*{flex:0 0 100%}
}


/* Elementos que solo existen en la versión móvil */
.solo-movil{display:none}
@media(max-width:980px){.solo-movil{display:block}}

/* Lista compacta de servicios: más aire entre el icono y el texto */
@media(max-width:640px){
  .svc-lista .svc-body{grid-template-columns:42px minmax(0,1fr);column-gap:16px;padding:12px 34px 12px 13px}
  .svc-lista .svc-ico{width:42px;height:42px}
}

/* Banda de logos en móvil: se veía como una franja blanca vacía, con los
   logos chicos y cortados contra los bordes. */
@media(max-width:720px){
  .solo-logos{padding:28px 0 30px}
  .logos-mobile{margin-top:4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
  .lrow{gap:12px;margin-bottom:12px}
  .lrow:last-child{margin-bottom:0}
  .lrow .logo-cell{flex:0 0 134px;height:74px;padding:11px 13px}
  .lrow .logo-cell img{filter:grayscale(.25);opacity:.95}
  .lrow .logo-wordmark{filter:grayscale(.25);opacity:.95;font-size:.62rem}
  .lrow .logo-wordmark b{font-size:.84rem}
}


/* ------------------------------------------------------------------
   Logos de clientes en móvil: grilla fija, sin animación.
   La marquesina (transform infinito + mask-image + filter sobre las
   imágenes) hacía desaparecer los logos en Safari de iPhone. Una grilla
   estática no tiene nada que fallar y además se leen mejor.
   ------------------------------------------------------------------ */
.logos-carr{display:none}
@media(max-width:720px){
  .logos,.logos-mobile{display:none !important}
  .logos-carr{display:block}
  .lpage{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .lpage.corta{display:flex;justify-content:center}
  .lpage.corta .logo-cell{flex:0 0 calc((100% - 18px)/3)}
  .logo-cell{height:68px;padding:9px 10px;border-radius:12px}
  .logo-cell img{filter:grayscale(.2);opacity:1}
  .logo-wordmark{filter:grayscale(.2);opacity:1;font-size:.6rem}
  .logo-wordmark b{font-size:.8rem}
  .logos-carr .cnav-row{margin-top:12px;gap:12px}
  .logos-carr .cnav{width:40px;height:40px;font-size:1.3rem}
}

/* Encabezado de la banda de logos: en escritorio y en móvil */
.logos-head{margin-bottom:18px}
@media(max-width:720px){.logos-head{margin-bottom:14px}.logos-head h2{font-size:1.3rem}}


/* ============================================================
   EXPLORADOR DE SERVICIOS · solo escritorio
   Desde 981px la home muestra la lista + panel de detalle.
   Bajo ese ancho vuelve la lista compacta de tarjetas.
   ============================================================ */
.exp-wrap{display:none}
@media(max-width:980px){ div[data-seg].exp-wrap.on{display:none} }
@media(min-width:981px){ div[data-seg].svc-cards.on{display:none} }

.cwrap{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;align-items:stretch}
.clist{background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;display:flex;flex-direction:column}
.clhead{flex:none;padding:10px 14px 7px;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:800}
.citem{width:100%;flex:1 1 auto;min-height:46px;display:flex;align-items:center;gap:12px;padding:9px 13px;border:0;
  background:none;border-radius:12px;cursor:pointer;font-family:inherit;text-align:left;transition:.15s}
.citem b{font-size:1rem;color:var(--navy-900);font-weight:700}
.citem:hover{background:var(--sky)}
.citem.on{background:var(--navy)} .citem.on b{color:#fff}
.cico{width:34px;height:34px;border-radius:10px;background:var(--sky);display:grid;place-items:center;flex:none}
.cico .ons-ico{width:18px;height:18px}
.cico{color:var(--navy);--ico-a:#FF6A1A}
.citem.on .cico{background:rgba(255,255,255,.16);color:#fff;--ico-a:#FF9150}
.cflecha{margin-left:auto;color:var(--navy-100);font-size:1.3rem;line-height:1}
.citem.on .cflecha{color:#fff}
.chot{font-style:normal;background:var(--flame);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 7px;border-radius:999px;margin-left:8px}

.cpanels{position:relative;display:flex}
.cpanel{display:none;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cpanel.on{display:flex;flex-direction:column;width:100%}
.cmedia{position:relative;flex:1 1 auto;min-height:124px;background:var(--navy-900);overflow:hidden}
.cmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmedia::after{content:"";position:absolute;inset:0;
  /* El velo solo protege el titulo del borde inferior. Antes partia en .28 arriba
     y la foto del panel no se notaba, sobre todo la de aire acondicionado. */
  background:linear-gradient(180deg,rgba(13,25,48,0) 0%,rgba(13,25,48,.06) 42%,rgba(13,25,48,.78) 78%,rgba(13,25,48,.96) 100%)}
.cbadge{position:absolute;top:12px;left:12px;z-index:2;background:var(--flame);color:#fff;font-size:.7rem;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.cmtit{position:absolute;left:24px;right:24px;bottom:14px;z-index:1}
.cmtit h3{color:#fff;font-size:1.35rem;margin:0 0 8px}
.cpills{display:flex;flex-wrap:wrap;gap:6px}
.cpills span{background:rgba(255,255,255,.17);color:#fff;font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px}
.cbody{padding:18px 24px 20px;flex:0 0 auto;display:flex;flex-direction:column}
.clead{color:var(--muted);font-size:1rem;margin:0 0 18px;max-width:76ch}
.ccols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px;align-items:start}
.cbloque h4{margin:0 0 11px;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--navy-700)}
.cfilas{display:grid;gap:7px}
.crow{display:flex;gap:14px;align-items:baseline;background:var(--sky);border-radius:10px;padding:10px 13px}
.crow b{flex:0 0 38%;font-size:.95rem;color:var(--navy-900);line-height:1.3}
.crow span{flex:1;font-size:.94rem;color:var(--muted);line-height:1.4}
.cnota{margin:11px 0 0;font-size:.86rem;color:var(--muted);line-height:1.45;padding-left:2px}
.cpie{margin-top:auto;padding-top:18px;display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:1200px){
  .cwrap{grid-template-columns:300px minmax(0,1fr);gap:20px}
  .cmedia{min-height:120px}
  .cmtit h3{font-size:1.25rem}
  .cbody{padding:16px 20px 18px}
  .clead{font-size:.9rem;margin-bottom:14px}
  .ccols{gap:20px}
}


/* ============================================================
   CIFRAS · bloque "Quiénes somos" de la página Nosotros
   Reemplaza las tarjetas planas de estadísticas: cada cifra
   lleva ícono, número, etiqueta y una línea de contexto, con
   el filete naranja de la línea gráfica del sitio.
   ============================================================ */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.cifra{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px 16px;overflow:hidden;box-shadow:0 2px 10px rgba(18,33,63,.04)}
.cifra::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--flame),var(--amber))}
.cifra-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--sky);color:var(--navy-700);margin-bottom:10px}
.cifra-ico svg{width:15px;height:15px}
.cifra b{display:block;font-size:2rem;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.02em}
.cifra .cifra-lb{display:block;margin-top:5px;font-weight:700;font-size:.86rem;color:var(--navy-900);line-height:1.25;text-wrap:balance}
.cifra small{display:block;margin-top:8px;color:var(--muted);font-size:.8rem;line-height:1.45;text-wrap:pretty}
@media(max-width:980px){.cifras{grid-template-columns:1fr 1fr;gap:12px}
  .cifra:last-child{grid-column:1/-1}}
@media(max-width:560px){.cifras{grid-template-columns:1fr;margin-top:20px}
  .cifra{display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding:18px 16px 16px}
  .cifra-ico{grid-row:1/3;margin:0}
  .cifra b{font-size:1.8rem} .cifra small{grid-column:2}}


/* ============================================================
   QUÉ HACEMOS · sección de servicios única de las seis landings
   Reemplaza las grillas de cinco o seis tarjetas con párrafo por
   cuatro bloques con viñetas cortas y un botón de WhatsApp cada
   uno. Menos texto, misma cobertura de palabras clave.
   ============================================================ */
.qh-head{margin-bottom:22px}
.qh{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qh-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px 16px;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(18,33,63,.04)}
.qh-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--navy);margin-bottom:12px;box-shadow:0 5px 14px rgba(18,33,63,.22)}
.qh-ico .ons-ico{width:21px;height:21px}
.qh-ico{color:#fff;--ico-a:#FF9150}
.qh-item h3{font-size:1.05rem;margin:0 0 5px;line-height:1.2}
.qh-bajada{color:var(--muted);font-size:.86rem;margin:0 0 12px;line-height:1.45}
.qh-lista{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.qh-lista li{position:relative;padding-left:19px;font-size:.87rem;line-height:1.4;color:var(--ink)}
.qh-lista li::before{content:"";position:absolute;left:3px;top:.52em;width:6px;height:6px;
  border-radius:2px;background:var(--flame)}
.qh-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-weight:700;
  font-size:.87rem;color:var(--green-700);cursor:pointer;text-decoration:none}
.qh-cta svg{width:16px;height:16px;flex:0 0 auto}
.qh-cta:hover{color:var(--green)}
/* Tres bloques ocupan el ancho completo igual que cuatro */
.qh:has(.qh-item:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.qh,.qh:has(.qh-item:nth-child(3):last-child){grid-template-columns:1fr 1fr}}
@media(max-width:620px){
  .qh,.qh:has(.qh-item:nth-child(3):last-child){grid-template-columns:1fr;gap:11px}
  .qh-item{display:grid;grid-template-columns:40px 1fr;gap:0 13px;padding:16px 15px 14px}
  .qh-ico{grid-row:1/3;margin:0}
  .qh-item h3{grid-column:2;align-self:center;margin:0}
  .qh-bajada{grid-column:2;margin:2px 0 0}
  .qh-lista{grid-column:1/-1;margin:12px 0 12px}
  .qh-cta{grid-column:1/-1}
  .qh-head{margin-bottom:16px}
}


/* ============================================================
   DOS PUERTAS · reemplaza el diagnóstico por síntoma cuando la
   página también tiene que hablarle a quien todavía no compra.
   Reutiliza los chips de .symp, solo cambia la disposición.
   ============================================================ */
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.puertas{grid-template-columns:1fr;gap:14px}}
.puerta{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  box-shadow:0 2px 10px rgba(18,33,63,.04)}
.puerta>b{display:block;font-size:1.1rem;color:var(--navy-900);margin-bottom:3px;line-height:1.25}
.puerta>small{display:block;color:var(--muted);margin-bottom:14px;font-size:.88rem;line-height:1.45}
.puerta .symp{grid-template-columns:1fr;gap:9px}
.puerta .symp a{background:var(--sky);padding:12px 14px;font-size:.92rem}
@media(max-width:520px){.puerta{padding:17px 15px}.puerta .symp a{padding:11px 13px;font-size:.88rem}}


/* ============================================================
   LOGOS DENTRO DE UN PANEL · separación y cabecera propia
   Antes quedaban pegados al bloque anterior y sin ninguna
   bajada que explicara qué son.
   ============================================================ */
.logos-panel{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.logos-panel-head{margin:0 auto 20px;max-width:60ch;text-align:center}
.logos-panel-head h3{font-size:1.3rem;margin:3px 0 7px;color:var(--navy-900)}
.logos-panel-head p{margin:0;font-size:.9rem;line-height:1.5}
@media(max-width:620px){
  .logos-panel{margin-top:26px;padding-top:24px}
  .logos-panel-head{margin-bottom:16px}
  .logos-panel-head h3{font-size:1.1rem}
  .logos-panel-head p{font-size:.85rem}
}


/* Triage de dos opciones: en celular se apilan. El ancho iba en un style
   en línea, que le ganaba a la media query y dejaba los dos botones a
   167 px con el texto partido en cuatro líneas. */
.triage.triage-2{grid-template-columns:repeat(2,1fr);align-items:start}
/* El panel desplegado ocupa la fila completa, debajo de los dos botones. */
.triage.triage-2>.triage-panel{grid-column:1/-1;margin-top:4px}
@media(max-width:860px){
  .triage.triage-2{grid-template-columns:1fr}
  /* Apilados, cada panel se abre justo debajo de SU boton, no al final. */
  .triage.triage-2>*:nth-child(1){order:1}
  .triage.triage-2>*:nth-child(3){order:2}
  .triage.triage-2>*:nth-child(2){order:3}
  .triage.triage-2>*:nth-child(4){order:4}
  .triage.triage-2>.triage-panel{margin-top:0}
}

/* ============================================================
   BANNER DE LANDING EN MÓVIL · octubre 2026
   En móvil el texto ocupa todo el ancho, así que el velo no puede
   aflojarse de lado a lado como en escritorio. En vez de eso la
   foto se ve en una banda inferior, bajo los botones.
   ============================================================ */


/* ============================================================
   BARRA FIJA INFERIOR · corrección octubre 2026
   En móvil, al colapsar la barra de direcciones del navegador, la
   barra de Llamar y WhatsApp se despegaba del borde y dejaba un
   hueco debajo. Dos medidas: capa de composición propia para que
   no se desfase, y un sangrado de fondo bajo el borde para que,
   si el navegador la desplaza, no se vea el hueco.
   ============================================================ */
/* La promoción a capa propia (translateZ + will-change) se retiró: es lo que
   agrava la desincronización de los elementos fijos en iOS. La franja blanca
   bajo la barra baja de 80 a 24 px: tapa el hueco de repintado sin convertirse
   ella misma en una banda visible cuando el navegador desplaza la barra. */
.mbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;background:#fff;pointer-events:none}

/* El hero del home y el de fugas tampoco tenían variante móvil: ahí el texto ocupa
   todo el ancho, así que el velo se refuerza arriba y afloja en la banda inferior. */


/* Sistema de iconografia: SVG de dos colores. El trazo hereda el color del
   contenedor y el acento viaja en la variable --ico-a, porque el CSS no entra
   al shadow DOM de <use> pero las variables heredadas si. Reemplaza a los PNG
   que se tenian que blanquear con filter:brightness(10). */
.ons-ico{display:block;width:1.25em;height:1.25em;flex:none;--ico-a:#FF6A1A}

/* Las tarjetas del hub de marcas muestran el logo del fabricante, no una foto
   generica: se ve en blanco y completo, sin recorte. */
.card.img img.cover.logo-marca{object-fit:contain;background:#fff;padding:26px 32px}

/* El collage de marcas es blanco y el titulo del panel va en blanco: ese panel
   necesita un velo mas fuerte abajo que los que llevan foto. */
.cpanel[data-p="marcas"] .cmedia::after{
  background:linear-gradient(180deg,rgba(13,25,48,0) 0%,rgba(13,25,48,.04) 30%,rgba(13,25,48,.74) 56%,rgba(13,25,48,.95) 100%)}

/* El panel del explorador es una franja muy ancha y baja: de una foto 16:9
   solo conserva una banda horizontal. En aire acondicionado el equipo split
   va en la parte alta de la foto, asi que el recorte centrado lo dejaba
   fuera. Se sube el punto de anclaje para que el equipo quede dentro. */
.cpanel[data-p="aire"] .cmedia img{object-position:center 20%}

/* ============================================================
   BANNER EN MÓVIL · corrección octubre 2026
   El banner en móvil es alto y angosto. Una foto 16:9 puesta de
   fondo con cover se recortaba a una franja central de poco más
   del 40% del ancho original: se veía un trozo sin contexto.
   Ahora la foto sale del fondo y va completa, en su proporción,
   bajo el texto. De paso el texto queda sobre azul marino sólido,
   que es mejor contraste que cualquier velo.
   ============================================================ */
@media(max-width:860px){
  /* sin padding abajo: la foto llega al borde de la seccion */
  .phero,.hero{display:flex;flex-direction:column;padding-bottom:0}
  .phero .wrap,.hero .wrap{order:1;position:relative;z-index:1}
  .phero .wrap{padding-bottom:30px}
  .phero .wrap>*{max-width:none}
  .phero .bg,.hero .bg{
    order:2;position:relative;inset:auto;width:100%;max-width:100%;
    aspect-ratio:16/9;opacity:1;background-position:center;
    transform:none;animation:none}
  .phero .veil,.hero .veil{display:none}
  .hero .bubbles{display:none}
}

/* Cliengo en móvil ---------------------------------------------------------
   El widget monta dos iframes propios: la burbuja del chat (#chatIframe) y un
   botón de WhatsApp (#wspIframe) de 260px anclado al borde izquierdo. En móvil
   los dos caían sobre la barra fija: el verde tapaba "Llamar" y la burbuja
   tapaba "WhatsApp". Ocultamos el botón de WhatsApp de Cliengo —la barra ya
   tiene el nuestro— y centramos la burbuja sobre la barra. Solo se toca el
   estado plegado: al abrir el chat, Cliengo reposiciona su ventana. */
@media(max-width:980px){
  #clgo-wsp{display:none!important}
  #clgo iframe.collapsed-height{
    left:50%!important;right:auto!important;
    transform:translateX(-50%);
    bottom:calc(84px + env(safe-area-inset-bottom))!important}
}

/* Menú móvil: dos correcciones -------------------------------------------
   1) El encabezado pegajoso del panel (logo + cerrar) llevaba z-index 3, el
      mismo que los enlaces. Al empatar ganaban los enlaces por orden del DOM
      y se veían por encima del logo al desplazar la lista. Sube a 5.
   2) El widget de Cliengo flota en z-index 9999998 y quedaba sobre los
      botones del pie del menú. Mientras el menú está abierto se oculta. */
.mnav-head{z-index:5}
body:has(#mnav-chk:checked) #clgo,
body:has(#mnav-chk:checked) #clgo-wsp{display:none!important}

/* Cabecera móvil reordenada — 16 de octubre de 2026 -------------------------
   Problema: en iOS Safari, al contraer sus barras al desplazar, toda la capa
   fija quedaba corrida unos 90 px hacia arriba: se escondían la barra de
   urgencias (32) y la cabecera con el logo (60), y abajo se descubría la
   franja blanca de .mbar::after. La solución estándar es promover el elemento
   fijo a su propia capa de composición, pero no se podía aplicar mientras
   .mnav-panel (position:fixed;inset:0) fuera descendiente de .topfix. El panel
   ya salió de ahí en el marcado, así que ahora sí. */
@media(max-width:980px){
  /* El checkbox del menú ya no es hermano del botón hamburguesa, así que las
     reglas que convertían las tres barras en una X pasan a :has(). */
  body:has(#mnav-chk:checked) .burger{background:var(--sky);border-color:var(--sky)}
  body:has(#mnav-chk:checked) .burger .bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body:has(#mnav-chk:checked) .burger .bars i:nth-child(2){opacity:0}
  body:has(#mnav-chk:checked) .burger .bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* El teléfono de la barra de urgencias está duplicado en la barra inferior y
     arriba cae en la zona más difícil de alcanzar del pulgar. El mensaje de
     urgencias se mantiene: es diferenciador. */
  .topbar a[href^="tel:"]{display:none}

  /* La fila de accesos queda con un solo botón: "Servicios" vive en el menú,
     con las descripciones de cada línea. */
  .accesos .acc.fuego{flex:1}
}

/* "Fugas de gas" en la cabecera móvil — 16 de octubre de 2026 ---------------
   Antes vivía en una fila propia bajo la cabecera, que sumaba 61 px a la barra
   fija. Ahora ocupa el espacio vacío entre el logo y el botón de menú: la barra
   fija baja de 153 a 92 px y el título de cada página gana esos 61 px en la
   primera pantalla. En escritorio no aparece, porque el menú principal ya lleva
   "Fugas de gas" destacado. */
.acc-hdr{display:none}
@media(max-width:980px){
  .accesos{display:none}
  .acc-hdr{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:40px;padding:0 14px;border-radius:999px;background:var(--flame);
    border:1.6px solid var(--flame);color:#fff;font-weight:800;font-size:.86rem;
    line-height:1;white-space:nowrap;text-decoration:none;flex:none;
    -webkit-tap-highlight-color:rgba(255,255,255,.18)}
  .acc-hdr:active{filter:brightness(.94)}
  .acc-hdr .flame{flex:none}
  /* El texto va en un solo elemento: con inline-flex, cada nodo suelto sería un
     elemento más y el espaciado se aplicaría también dentro de la etiqueta. */
  .acc-hdr .acc-hdr-txt{white-space:nowrap}
}
/* Entre el logo y el botón de menú quedan unos 155 px en un teléfono de 390.
   Con el tipo un punto más chico entra "Fugas de gas" completo. Bajo 380 ya no
   alcanza y queda "Fugas", que con la llama al lado se entiende igual. */
@media(max-width:430px){
  .acc-hdr{padding:0 10px;font-size:.78rem;gap:5px;height:38px}
}
@media(max-width:380px){
  .acc-hdr{padding:0 10px;font-size:.82rem;gap:5px}
  .acc-hdr-larga{display:none}
}

/* ============================================================
   BLOG "APRENDER CON ONS"
   Artículo, índice del blog y archivos por categoría.

   El criterio de todo este bloque es el agote de lectura: una columna angosta
   (la línea de 65 a 75 caracteres es la que se lee sin perder el renglón),
   jerarquía clara entre apartados, y recursos visuales que rompen el muro de
   texto cada pocas pantallas. La captura de lead no se deja para el final.
   ============================================================ */

.wrap-art{max-width:760px}
.art{padding-bottom:0}
.art-head{padding:26px 0 0}

/* Migas: ruta visible y, en paralelo, BreadcrumbList para Google. */
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin-bottom:14px}
.migas a{color:var(--navy-700);text-decoration:none;font-weight:600}
.migas a:hover{text-decoration:underline}
.migas span[aria-hidden]{opacity:.5}
.migas-actual{color:var(--muted)}

.art-head h1{font-size:clamp(1.65rem,4.6vw,2.6rem);line-height:1.15;margin:12px 0 0;letter-spacing:-.015em}
.art-bajada{font-size:1.12rem;line-height:1.55;color:var(--muted);margin:14px 0 0}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin:18px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.art-meta span{display:inline-flex;align-items:center;gap:6px}
.art-meta span+span::before{content:"·";margin-right:10px;opacity:.6}
.art-autor{font-weight:600;color:var(--navy-700)}
.art-portada{width:100%;height:auto;border-radius:18px;margin:26px 0 0;display:block;
  aspect-ratio:16/9;object-fit:cover;background:var(--sky)}

/* "En resumen": las conclusiones antes del desarrollo. Quien tiene una urgencia
   encuentra la respuesta sin leer 1.500 palabras, y a Google le damos el
   fragmento destacado servido. */
.art-resumen{background:var(--sky);border:1px solid var(--line);border-left:4px solid var(--flame);
  border-radius:16px;padding:20px 22px;margin:30px 0 0}
.art-resumen h2{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-700);
  margin:0 0 10px;font-weight:800}
.art-resumen ul{margin:0;padding-left:20px}
.art-resumen li{margin:0 0 8px;line-height:1.5}
.art-resumen li:last-child{margin-bottom:0}
.art-resumen p{margin:0 0 8px}

.art-indice{border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:26px 0 0;background:#fff}
.art-indice b{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.art-indice ol{margin:0;padding-left:20px}
.art-indice li{margin:0 0 7px;line-height:1.4}
.art-indice li:last-child{margin-bottom:0}
.art-indice a{color:var(--navy);text-decoration:none;font-weight:600;font-size:.95rem}
.art-indice a:hover{text-decoration:underline}

/* Cuerpo ------------------------------------------------------------------ */
.art-cuerpo{font-size:1.06rem;line-height:1.72;margin-top:34px}
.art-cuerpo>h2{font-size:clamp(1.3rem,3.2vw,1.72rem);line-height:1.25;margin:46px 0 14px;
  letter-spacing:-.01em;scroll-margin-top:calc(var(--topbar) + var(--header) + 16px)}
.art-cuerpo>h2:first-child{margin-top:0}
.art-cuerpo h3{font-size:1.12rem;margin:30px 0 10px;line-height:1.3}
.art-cuerpo p{margin:0 0 18px}
.art-cuerpo ul,.art-cuerpo ol{margin:0 0 20px;padding-left:24px}
.art-cuerpo li{margin:0 0 9px}
.art-cuerpo li:last-child{margin-bottom:0}
.art-cuerpo a{color:var(--navy-700);font-weight:600}
.art-cuerpo img{max-width:100%;height:auto;border-radius:14px;display:block;margin:28px auto}
.art-cuerpo figure{margin:30px 0}
.art-cuerpo figcaption{font-size:.84rem;color:var(--muted);text-align:center;margin-top:10px;line-height:1.45}
.art-cuerpo strong,.art-cuerpo b{font-weight:700;color:var(--navy)}
.art-cuerpo hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* Avisos dentro del artículo: el peligro en naranjo, el dato útil en azul, lo
   que exige la norma en verde. Tres colores, tres significados, sin inventar
   más variantes a medida que crezcan los artículos. */
.nota-art{border-radius:14px;padding:16px 18px;margin:26px 0;border:1px solid var(--line);
  background:var(--sky);font-size:.98rem;line-height:1.6}
.nota-art b:first-child{display:block;margin-bottom:5px}
.nota-art.peligro{background:#FFF4ED;border-color:#FFD2B5;border-left:4px solid var(--flame)}
.nota-art.norma{background:#EEF9F2;border-color:#C9E9D5;border-left:4px solid #1E9E55}
.nota-art.dato{border-left:4px solid var(--navy-700)}

/* Tabla comparativa: en móvil se desplaza en horizontal en vez de encogerse
   hasta ser ilegible. */
.tabla-art{margin:28px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:14px}
.tabla-art table{border-collapse:collapse;width:100%;min-width:460px;font-size:.95rem}
.tabla-art th,.tabla-art td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tabla-art thead th{background:var(--navy);color:#fff;font-weight:700;font-size:.86rem;
  letter-spacing:.02em;border-bottom:0}
.tabla-art tbody tr:last-child td{border-bottom:0}
.tabla-art tbody tr:nth-child(even){background:var(--sky)}

/* Pasos numerados: el recurso que más baja el agote en una guía de diagnóstico. */
.pasos-art{counter-reset:pa;list-style:none;margin:30px 0;padding:0}
.pasos-art li{counter-increment:pa;position:relative;padding:0 0 20px 52px;margin:0}
.pasos-art li::before{content:counter(pa);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.95rem}
.pasos-art li::after{content:"";position:absolute;left:17px;top:36px;bottom:2px;width:2px;background:var(--line)}
.pasos-art li:last-child{padding-bottom:0}
.pasos-art li:last-child::after{display:none}
.pasos-art li b{display:block;margin-bottom:3px}

.art-pie{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.art-firma{display:flex;gap:16px;align-items:flex-start;background:var(--sky);
  border:1px solid var(--line);border-radius:16px;padding:20px}
.art-firma .ico{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--navy-700)}
.art-firma .ico .ons-ico{width:22px;height:22px}
.art-firma b{display:block;margin-bottom:5px}
.art-firma small{display:block;color:var(--muted);font-size:.89rem;line-height:1.55}

.art-rel{background:var(--bg)}
.art-rel h2{margin:6px 0 22px}

/* Índice del blog y archivos ---------------------------------------------- */
.pills-blog{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pills-blog a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  border:1.6px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;
  font-weight:700;font-size:.9rem;white-space:nowrap}
.pills-blog a.on,.pills-blog a:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.pills-blog a span{font-size:.78rem;opacity:.7;font-weight:600}
.card-min{display:block;margin-top:10px;color:var(--muted);font-size:.8rem}

/* Color por tema -----------------------------------------------------------
   Cada categoría del blog tiene su propio color y ninguna lo comparte. El
   color viaja en tres variables sobre el atributo data-tema, de modo que la
   tarjeta, la etiqueta y el filtro lo heredan sin repetir reglas:

     --tema         el tono pleno: barra superior de la tarjeta, punto del
                    filtro y borde al pasar el cursor.
     --tema-suave   el fondo de la etiqueta.
     --tema-texto   el texto de la etiqueta y del enlace de la tarjeta, ya
                    oscurecido para que contraste sobre el fondo suave.

   El valor por defecto va primero y es el azul de marca: una categoría nueva
   se ve correcta desde el primer día aunque todavía no tenga color propio.
   -------------------------------------------------------------------------- */
.card-blog,.tag-tema,.pills-blog a{--tema:var(--navy);--tema-suave:var(--sky);--tema-texto:var(--navy-700)}
[data-tema="fugas-de-gas"]        {--tema:#FF6A1A;--tema-suave:#FFE8DA;--tema-texto:#C2470A}
[data-tema="calefaccion"]         {--tema:#C8362F;--tema-suave:#FBE3E1;--tema-texto:#A62B25}
[data-tema="calefont"]            {--tema:#E39A08;--tema-suave:#FFF0D4;--tema-texto:#8A5703}
[data-tema="aire-acondicionado"]  {--tema:#119BC9;--tema-suave:#DEF0F7;--tema-texto:#0B6287}
[data-tema="edificios-y-empresas"]{--tema:#6554CC;--tema-suave:#E9E6FA;--tema-texto:#4537A0}
[data-tema="certificacion-sec"]   {--tema:#2A4E88;--tema-suave:#E3ECFA;--tema-texto:#1F3765}
[data-tema="instalaciones-de-gas"]{--tema:#11917E;--tema-suave:#DDF1ED;--tema-texto:#0B6256}

.tag-tema{display:inline-block;align-self:flex-start;background:var(--tema-suave);
  color:var(--tema-texto);font-size:.7rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;line-height:1.25;
  text-decoration:none}

/* Tarjeta del blog ---------------------------------------------------------
   Vive aparte de .card porque esa clase la usan las páginas de servicio, las
   marcas y los bloques de síntomas, y ahí no corresponde tocar nada.
   -------------------------------------------------------------------------- */
.card-blog{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;
  text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card-blog::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--tema);z-index:2}
/* El selector largo es para ganarle a `.js .rv.in{transform:none}`, que al
   terminar la animación de entrada anularía el leve levantamiento al pasar
   el cursor. */
.card-blog:hover,.js .card-blog.rv.in:hover{transform:translateY(-4px);
  box-shadow:var(--shadow);border-color:var(--tema)}
.card-blog-foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tema-suave)}
.card-blog-foto img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.card-blog:hover .card-blog-foto img{transform:scale(1.04)}
.card-blog-cuerpo{display:flex;flex-direction:column;flex:1;gap:10px;padding:18px 20px 16px}
.card-blog h3{margin:0;font-size:1.08rem;line-height:1.3;color:var(--navy-900);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-blog p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-blog-pie{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-blog-min{color:var(--muted);font-size:.8rem}
.card-blog-ir{display:inline-flex;align-items:center;gap:6px;color:var(--tema-texto);
  font-weight:700;font-size:.86rem;transition:gap .18s}
.card-blog:hover .card-blog-ir{gap:10px}
.card-blog-ir svg{width:16px;height:16px;flex:none}

/* El filtro lleva el punto del color de su tema, para que el color se aprenda
   antes de entrar al artículo. */
.pills-blog a[data-tema]::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--tema);flex:none}
.pills-blog a[data-tema]:hover,.pills-blog a[data-tema].on{background:var(--tema);
  border-color:var(--tema);color:#fff}
.pills-blog a[data-tema]:hover::before,.pills-blog a[data-tema].on::before{background:#fff}

/* En móvil el filtro es una fila que se desliza, no cuatro líneas apiladas.
   Con siete temas más "Todas", envolver ocupaba media pantalla antes de la
   primera tarjeta. Los márgenes negativos lo llevan hasta el borde del
   teléfono para que se note que hay más a la derecha. */
@media(max-width:720px){
  .pills-blog{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-left:-20px;margin-right:-20px;padding:0 20px 6px}
  .pills-blog::-webkit-scrollbar{display:none}
  .pills-blog a{flex:none}
}
.phero-corto{padding-bottom:40px}
.paginacion{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:34px}
.paginacion .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border-radius:12px;border:1.6px solid var(--line);background:#fff;color:var(--navy);
  text-decoration:none;font-weight:700;font-size:.92rem}
.paginacion .page-numbers.current,.paginacion a.page-numbers:hover{background:var(--navy);
  border-color:var(--navy);color:#fff}

@media(max-width:640px){
  .art-head{padding-top:18px}
  .art-cuerpo{font-size:1.02rem;line-height:1.68}
  .art-resumen,.art-indice{padding:16px 18px}
  .art-firma{flex-direction:column;gap:12px}
  .pasos-art li{padding-left:44px}
  .pasos-art li::before{width:30px;height:30px;font-size:.88rem}
  .pasos-art li::after{left:15px;top:32px}
}

/* Contenido heredado dentro de un artículo ---------------------------------
   Los dos artículos que ya existían se escribieron con formato de página de
   servicio: secciones a dos columnas, envoltorios propios y un formulario
   embebido. Dentro de la columna del artículo eso queda apretado contra el
   borde, y el formulario embebido duplica el id="lead" del formulario de
   cierre, lo que deja a los dos sin medición. Hasta que esos dos artículos se
   reescriban en el formato nuevo, aquí se aplanan las columnas y se oculta el
   formulario duplicado. Los artículos nuevos no pasan por estas reglas porque
   no traen ni .split ni .wrap dentro del cuerpo. */
.art-cuerpo>section:not(.band){padding:0;background:none}
.art-cuerpo .wrap{padding:0;max-width:none;width:auto}
.art-cuerpo .split{display:block}
.art-cuerpo .split>div[style*="sticky"]{display:none}
.art-cuerpo form#lead{display:none}

/* La banda de contacto que se inserta a mitad del artículo conserva su fondo y
   su texto en blanco: el aplanado de arriba se la llevaba por delante y quedaba
   texto oscuro sobre degradado naranjo, ilegible. */
.art-cuerpo .band{border-radius:18px;margin:34px 0;padding:26px 24px;color:#fff}
.art-cuerpo .band h2,.art-cuerpo .band p{color:#fff;margin:0}
.art-cuerpo .band h2{font-size:1.4rem;margin-bottom:8px}
.art-cuerpo .band .wrap{display:block}
.art-cuerpo .band .wrap>div:last-child{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* Los botones de la banda heredaban el color de enlace del artículo y quedaban
   en azul sobre azul marino. Dentro de la banda mandan los colores de la banda. */
.art-cuerpo .band .btn{color:#fff}
.art-cuerpo .band .btn-ghost{border-color:rgba(255,255,255,.65)}

/* Figuras y diagramas dentro de un artículo. En móvil se desplazan en
   horizontal, igual que las tablas: un diagrama reducido a 360 px de ancho deja
   el texto ilegible, que es peor que pedirle al lector que deslice. */
.figura-art{margin:30px 0}
.figura-art>svg{display:block;width:100%;height:auto;min-width:520px}
.art-cuerpo .figura-art{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figura-art figcaption{font-size:.84rem;color:var(--muted);margin-top:10px;line-height:1.45}