/* coxclientes.es
   Contraste WCAG 2.1 AA en todo el texto. El coral es solo decorativo (sin texto blanco sobre coral). */

@font-face{font-family:"Red Hat Display";font-weight:400;font-display:swap;src:url(/assets/fonts/red-hat-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Display";font-weight:500;font-display:swap;src:url(/assets/fonts/red-hat-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Display";font-weight:600;font-display:swap;src:url(/assets/fonts/red-hat-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Display";font-weight:700;font-display:swap;src:url(/assets/fonts/red-hat-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Display";font-weight:800;font-display:swap;src:url(/assets/fonts/red-hat-display-latin-800-normal.woff2) format("woff2")}

:root{
  --azul:#283198; --azul-900:#141850; --deep-blue:#031C40; --coral:#ED696A; --coral-700:#A13838; --turquesa:#2CB8C7; --turquesa-700:#11717B;
  --luna:#EAEDED; --noche:#43464F; --lavanda:#BDC5E3; --salmon:#F5ACA4; --agua:#9FD6DF;
  --bg:#FFFFFF; --surface:#F6F7FB; --line:#DCE0EE; --ink:#1D2033; --ink-2:#43464F;
  --f:"Red Hat Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --gut:max(16px, min(140px, 7.3vw));
  --r-card:24px; --r-pill:999px;
}
*{box-sizing:border-box}
/* El margen evita que la cabecera fija y el botón de WhatsApp tapen el foco o el destino de un enlace interno */
html{-webkit-text-size-adjust:100%; scroll-padding-top:100px; scroll-padding-bottom:88px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:700; letter-spacing:-0.01em}
p{margin:0}
a{color:var(--azul); text-underline-offset:3px}
img,svg{display:block}
.ic{width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-0.2em}
:focus-visible{outline:3px solid var(--azul); outline-offset:2px; border-radius:6px}
.hero :focus-visible,.foot :focus-visible{outline-color:#fff}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-100px; z-index:100; background:var(--azul); color:#fff; padding:12px 18px; border-radius:var(--r-pill); font-weight:700}
.skip:focus{top:12px}

.band{padding-left:var(--gut); padding-right:var(--gut)}
.wrap{max-width:1160px; margin:0 auto; width:100%}

/* Cabecera */
.hdr{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line)}
.hdr-row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:80px}
.logo{display:flex; align-items:center; flex:none}
.logo img{height:40px; width:auto}
.hdr-actions{display:flex; align-items:center; gap:10px}
.tel{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--azul); text-decoration:none; white-space:nowrap; margin-right:6px}
.tel small{display:block; font-weight:500; font-size:12px; color:var(--ink-2); line-height:1.1}
.btn-hdr{min-height:44px; padding:10px 18px; font-size:15px}
.menu-btn{display:inline-grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid var(--line); background:var(--bg); border-radius:50%; color:var(--azul); cursor:pointer}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{background:var(--surface)}
/* Panel del menú. Sin JS se muestra siempre. */
.nav-panel{border-top:1px solid var(--line); background:var(--bg); box-shadow:0 24px 40px -28px rgba(20,24,80,.45)}
.js .nav-panel{display:none; position:absolute; left:0; right:0; top:100%}
.js .nav-panel.open{display:block; max-height:calc(100vh - 68px); overflow-y:auto}
.nav-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px 48px; padding-block:24px 32px}
.menu{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px}
.menu a{display:block; text-decoration:none; font-size:18px; font-weight:600; color:var(--ink); padding:14px 4px; border-bottom:1px solid var(--line)}
.menu a:hover{color:var(--azul)}
.menu a[aria-current="page"]{color:var(--azul); box-shadow:inset 3px 0 0 var(--coral); padding-left:14px}
.nav-side{display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-top:8px}
.nav-side .tel{white-space:normal}
@media (max-width:1000px){.hdr-actions .hide-md{display:none}}
/* En el panel se repite lo que la cabecera oculta por espacio */
@media (min-width:1001px){.nav-side{display:none} .nav-grid{grid-template-columns:minmax(0,1fr)} .menu{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .nav-grid{grid-template-columns:minmax(0,1fr)}
  .menu{grid-template-columns:minmax(0,1fr)}
}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; text-decoration:none; font:inherit; font-weight:700; font-size:16px; padding:12px 22px; border-radius:var(--r-pill); min-height:46px; white-space:nowrap}
.btn-azul{background:var(--azul); color:#fff}
.btn-azul:hover{background:var(--azul-900)}
.btn-white{background:#fff; color:var(--azul)}
.btn-white:hover{background:var(--luna)}
.btn-line{background:transparent; color:var(--azul); box-shadow:inset 0 0 0 1.5px var(--azul)}
.btn-line:hover{background:var(--surface)}
.btn-ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* Héroe */
.hero{position:relative; overflow:hidden; color:#fff; background:
  radial-gradient(60% 75% at 8% 100%, rgba(237,105,106,.95) 0%, rgba(237,105,106,0) 62%),
  radial-gradient(48% 62% at 96% 0%, rgba(44,184,199,.95) 0%, rgba(44,184,199,0) 60%),
  linear-gradient(135deg, #283198 0%, #1f2780 100%);
  padding-block:clamp(56px, 9vw, 112px)}
.hero::after{content:""; position:absolute; right:-6%; top:12%; width:46%; aspect-ratio:1; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); box-shadow:0 0 0 48px rgba(255,255,255,.04), 0 0 0 110px rgba(255,255,255,.03); pointer-events:none}
/* Tarjeta "glass": fondo azul oscuro para mantener el contraste sobre la foto. */
.glass{position:relative; z-index:1; max-width:660px; background:rgba(20,24,80,.55); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.28); border-radius:var(--r-card); padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; gap:18px}
.kicker{font-size:15px; font-weight:700; color:#fff}
.glass h1{font-size:clamp(32px, 4.6vw, 54px); line-height:1.06; font-weight:800}
.glass p{font-size:clamp(16px,1.6vw,19px); max-width:54ch}
.hero-sm{padding-block:clamp(36px,5vw,64px)}
.hero-sm .glass{max-width:820px}
.hero-sm .glass h1{font-size:clamp(28px,3.6vw,42px)}
.crumbs{display:flex; gap:6px; align-items:center; font-size:14px; list-style:none; margin:0; padding:0}
.crumbs a{color:#fff; font-weight:700}

/* Secciones */
.sec{padding-block:clamp(48px,7vw,80px)}
.sec-alt{background:var(--surface)}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(24px,4vw,40px); max-width:760px}
.sec-head h2{font-size:clamp(26px,3.2vw,38px); line-height:1.12; color:var(--azul)}
.sec-head p{font-size:18px; color:var(--ink-2)}
.divider{height:2px; width:120px; background:linear-gradient(90deg, var(--coral), rgba(237,105,106,0))}

.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.card{display:flex; flex-direction:column; gap:12px; padding:28px 26px; border-radius:var(--r-card); background:var(--bg); border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .2s, box-shadow .2s}
a.card:hover{border-color:var(--lavanda); box-shadow:0 18px 40px -24px rgba(20,24,80,.35)}
.card .ico{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--surface); color:var(--azul)}
.card .ico .ic{width:26px; height:26px}
.card h3{font-size:20px; color:var(--azul)}
.card p{color:var(--ink-2)}
.card .more{margin-top:auto; font-weight:700; color:var(--azul); display:inline-flex; gap:6px; align-items:center}

/* Contenido de páginas */
.doc{display:flex; flex-direction:column; gap:20px}
.doc>*{max-width:920px}
.block{background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:14px}
.block h2{font-size:22px; color:var(--azul)}
.block h3{font-size:18px; color:var(--ink)}
.block p,.block li{color:var(--ink-2)}
.block ul,.block ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px}
.updated{font-size:14px; color:var(--ink-2)}

.kv{margin:0}
.kv>div{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:4px 32px; padding:12px 0; border-bottom:1px solid var(--line)}
.kv>div:last-child{border-bottom:0}
.kv dt{font-weight:700; color:var(--ink)}
.kv dd{margin:0; color:var(--ink-2); overflow-wrap:anywhere}

/* Fichas de modalidad (misma estructura en las tres) */
.fichas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.ficha{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; background:var(--bg)}
.ficha-head{padding:24px 24px 18px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.ficha-head h3{font-size:22px; color:var(--azul)}
.tag{align-self:flex-start; font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--turquesa-700); background:#E3F4F6; padding:4px 12px; border-radius:var(--r-pill)}
.ficha .kv{padding:8px 24px 16px}
.ficha .kv>div{grid-template-columns:minmax(0,1fr)}

/* Sello origen de la energía */
.sello{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:18px 22px; border-radius:20px; background:linear-gradient(120deg, #E3F4F6, #EEF0FA); border:1px solid var(--line)}
.sello .ico{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--bg); color:var(--turquesa-700)}
.sello p{flex:1 1 280px; color:var(--ink); font-weight:600}
.sello a{font-weight:700; display:inline-flex; gap:6px; align-items:center}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:12px}
.faq details{background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:4px 22px}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 0; font-weight:700; font-size:17px; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--azul); transition:transform .2s}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details>div{padding:0 0 18px; color:var(--ink-2); display:flex; flex-direction:column; gap:10px}

/* Contacto */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:start}
.contact-l{display:flex; flex-direction:column; gap:18px}
.contact-l h2{font-size:clamp(26px,3.2vw,38px); line-height:1.12; color:var(--azul)}
.contact-l p{color:var(--ink-2); font-size:17px}
.channels{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.channels li{display:flex; gap:12px; align-items:flex-start}
.channels .ic{color:var(--azul); margin-top:3px}
.channels b{display:block; color:var(--ink)}
.channels a,.channels span{color:var(--ink-2)}

/* Formulario */
.form{display:flex; flex-direction:column; gap:18px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(20px,3vw,32px)}
.form h2{font-size:20px; color:var(--azul)}
.form .lead{color:var(--ink)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fields .full{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:15px; font-weight:700; color:var(--ink)}
.field input{font:inherit; font-size:16px; padding:12px 14px; border:1.5px solid #8A90A8; border-radius:12px; background:var(--bg); color:var(--ink); width:100%; min-height:48px}
.field input[aria-invalid="true"]{border-color:var(--coral-700)}
.req{color:var(--coral-700); font-weight:700}
.req-nota{font-size:14px; color:var(--ink-2)}
.err{font-size:14px; font-weight:600; color:var(--coral-700)}
.err:empty{display:none}
fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; min-width:0}
legend{font-size:15px; font-weight:700; color:var(--ink); padding:0; margin-bottom:10px}
.chk{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink); padding:12px 14px; border:1px solid var(--line); border-radius:14px}
.chk input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--azul)}
.chk span{min-width:0}
.rgpd{font-size:14px; color:var(--ink-2); background:var(--surface); border-radius:14px; padding:14px 16px}
.rgpd dl{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px}
.rgpd dt{font-weight:700; color:var(--ink)}
.rgpd dd{margin:0; overflow-wrap:anywhere}
.submit-row{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.submit-row p{font-size:14px; color:var(--ink-2)}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* Marca de dato pendiente (solo en builds de borrador) */
.pend{display:inline-flex; align-items:center; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--coral-700); background:#FDEDEB; border:1px dashed var(--coral); padding:2px 10px; border-radius:var(--r-pill)}
.draft{background:var(--coral-700); color:#fff; font-size:13px; text-align:center; padding:6px 16px}

/* Pie */
.foot{background:var(--deep-blue); color:#fff}
.foot a{color:var(--lavanda); text-decoration:none}
.foot a:hover{color:#fff; text-decoration:underline}
.foot-top{display:flex; flex-direction:column; align-items:flex-start; gap:32px; padding-block:60px 40px; border-bottom:1px solid rgba(255,255,255,.14)}
.foot-top img{height:48px; width:auto}
.foot-claim{display:flex; flex-direction:column; gap:10px}
.foot-top p{color:var(--lavanda); font-size:15px}
.foot-top p a{color:#fff; font-weight:600}
.foot-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.3fr); gap:32px; padding-block:40px}
.foot-col{display:flex; flex-direction:column; gap:10px; min-width:0; font-size:15px; color:var(--lavanda)}
.foot-col h2{font-size:16px; font-weight:700; color:#fff; margin-bottom:4px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-col .big{font-size:22px; font-weight:800; color:#fff}
.foot-col p{overflow-wrap:anywhere}
/* Resolución de conflictos: dos mitades en espejo, alineadas con los bordes del pie */
.foot-ral{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:24px 32px; padding-block:32px; border-top:1px solid rgba(255,255,255,.14)}
.foot-col .foot-ral-links{flex-direction:row; flex-wrap:wrap; gap:6px 24px}
.foot-ral .distintivo{justify-self:end; flex-direction:row-reverse; flex-wrap:nowrap; gap:16px; text-align:right; font-size:15px; color:var(--lavanda)}
.foot-ral .distintivo-txt span:first-child{color:#fff}
.distintivo{display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; font-weight:600}
.distintivo-txt{display:flex; flex-direction:column; gap:4px}
.distintivo img{height:80px; width:auto}
@media (max-width:820px){
  .foot-ral{grid-template-columns:minmax(0,1fr)}
  .foot-ral .distintivo{justify-self:start; flex-direction:row; text-align:left}
}
.block .distintivo img{height:120px}
.foot .pend{color:var(--salmon); background:transparent; border-color:var(--salmon)}
.block .distintivo{color:var(--ink)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-size:13px; color:var(--lavanda); padding-block:18px 28px; border-top:1px solid rgba(255,255,255,.14)}

/* Responsive */
@media (max-width:1100px){
  .cards,.fichas{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .contact{grid-template-columns:minmax(0,1fr)}
  .contact .form{order:-1}
  .kv>div{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .hdr-row{min-height:68px; gap:8px}
  .btn-hdr{padding:10px 14px}
  .glass{padding:24px 20px}
  .hero{padding-block:32px 40px}
  .btn{white-space:normal; text-align:center}
  .logo img{height:32px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .rgpd dl{grid-template-columns:minmax(0,1fr)}
  .rgpd dd{margin-bottom:6px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .btn-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Sección clientes (home) */
.cliente-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 56px; align-items:start}
.cliente-grid .sec-head{margin-bottom:0; grid-row:span 2}
.arrows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; font-size:17px}
.arrows li{display:flex; gap:10px; align-items:flex-start}
.arrows .ic{color:var(--coral-700); margin-top:3px}
@media (max-width:820px){.cliente-grid{grid-template-columns:minmax(0,1fr)} .cliente-grid .sec-head{grid-row:auto}}

/* App (home) */
.app-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:32px 56px; align-items:center}
.app-grid .sec-head{margin-bottom:20px}
.app-grid .btn-row{margin-top:24px}
.app-img{margin:0}
.app-img img{display:block; width:100%; height:auto; border-radius:16px}
.app-img figcaption{margin-top:8px; font-size:14px}
@media (max-width:820px){.app-grid{grid-template-columns:minmax(0,1fr)} .app-img{max-width:420px}}

/* Etiquetado CNMC (origen-energia) */
/* Colores por fuente de energía */
:root{--src-renovable:var(--turquesa); --src-nuclear:var(--azul); --src-gas:var(--coral); --src-fuel:var(--coral-700);
  --src-cogeneracion:var(--lavanda); --src-carbon:var(--noche); --src-otras:var(--salmon)}
.src-renovable{background:var(--src-renovable)} .src-cogeneracion{background:var(--src-cogeneracion)} .src-gas{background:var(--src-gas)}
.src-carbon{background:var(--src-carbon)} .src-fuel{background:var(--src-fuel)} .src-nuclear{background:var(--src-nuclear)} .src-otras{background:var(--src-otras)}
.mix{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:16px 32px; justify-items:center}
.mix-fig{margin:0; width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.pie3d{width:100%; height:auto; overflow:visible}
.pie3d path, .pie3d ellipse{stroke:var(--ink); stroke-width:1; stroke-linejoin:round}
.pie3d .src-renovable{fill:var(--src-renovable)} .pie3d .src-cogeneracion{fill:var(--src-cogeneracion)} .pie3d .src-gas{fill:var(--src-gas)}
.pie3d .src-carbon{fill:var(--src-carbon)} .pie3d .src-fuel{fill:var(--src-fuel)} .pie3d .src-nuclear{fill:var(--src-nuclear)} .pie3d .src-otras{fill:var(--src-otras)}
.pie3d .sombra{fill:rgba(0,0,0,.22); stroke:none}
.pie3d .borde{fill:none}
.pie-lbl{font:700 14px var(--f); fill:var(--ink)}
.mix-label{font-size:14px; font-weight:700; color:var(--ink)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl th,.tbl td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums}
.tbl th:first-child{text-align:left; font-weight:600; color:var(--ink)}
.tbl thead th{font-weight:700; color:var(--azul); border-bottom:2px solid var(--line)}
.tbl td{color:var(--ink-2); white-space:nowrap}
.dot{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:10px; vertical-align:-1px}
.impactos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.impacto{margin:0; border:1px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:14px}
.impacto figcaption{display:flex; flex-direction:column; gap:2px; color:var(--ink-2); font-size:15px}
.impacto figcaption b{color:var(--ink); font-size:16px}
.escala{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.escala li{position:relative; display:flex; align-items:center; height:28px}
.escala li span{width:var(--w); height:100%; display:flex; align-items:center; padding-left:10px; font-weight:800; color:var(--ink); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%)}
.esc-a span{background:#1AA36B; --w:40%} .esc-b span{background:#52B748; --w:50%} .esc-c span{background:#BED630; --w:60%}
.esc-d span{background:#F4E01C; --w:70%} .esc-e span{background:#F9B11B; --w:80%} .esc-f span{background:#EF6F26; --w:90%} .esc-g span{background:#E3262A; --w:100%}
.escala .esc-g span{color:#fff}
.marca{position:absolute; right:0; height:100%; min-width:48px; display:flex; align-items:center; justify-content:center; padding-left:12px; background:var(--ink); color:#fff; font-weight:800; clip-path:polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%)}
@media (max-width:820px){.impactos{grid-template-columns:minmax(0,1fr)}}
.tbl th[scope="row"]{position:relative; padding-left:34px}
.tbl th[scope="row"] .dot{position:absolute; left:12px; top:15px; margin:0}
.impacto .kv>div{grid-template-columns:minmax(0,1fr) auto; padding:8px 0}
.impacto .kv dd{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
@media (max-width:560px){.tbl th,.tbl td{padding:10px 8px} .tbl th[scope="row"]{padding-left:28px} .tbl th[scope="row"] .dot{left:8px}}

/* Saltos de línea en titulares y párrafos */
p,li,dd,dt,figcaption,summary,.card h3{text-wrap:pretty}
h1,h2,.sec-head p,.hero-copy p{text-wrap:balance}

/* Héroe con fotografía (home) */
.hero-img{display:flex; align-items:center; min-height:clamp(520px, 72vh, 700px); background:var(--azul-900); padding-block:clamp(56px, 8vw, 96px)}
.hero-img::after{display:none}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center}
.hero-img::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(20,24,80,.94) 0%, rgba(40,49,152,.80) 36%, rgba(40,49,152,.25) 64%, rgba(40,49,152,0) 82%)}
/* Portada: el degradado llega hasta el final del titular (unos 13,5 em) para que el texto blanco mantenga el contraste sobre el cielo.
   Con opacidad .72 el texto blanco alcanza 4,5:1 incluso sobre un fondo blanco. Si cambia el titular, hay que revisar este valor. */
@media (min-width:821px){
  .hero-img:not(.hero-sec)::before{--fin:calc(max(var(--gut), (100vw - 1160px) / 2) + 13.5 * clamp(34px, 4.8vw, 58px));
    background:linear-gradient(90deg, rgba(20,24,80,.94) 0, rgba(40,49,152,.82) 40%, rgba(40,49,152,.74) var(--fin), rgba(40,49,152,0) calc(var(--fin) + 18vw))}
}
.hero-img .wrap{position:relative; z-index:2}
.hero-img .grad{position:absolute; left:0; right:0; bottom:0; height:6px; z-index:2; background:linear-gradient(90deg, var(--azul), var(--coral), var(--turquesa))}
.hero-img picture{display:contents}
/* Cabecera con foto en páginas interiores: más baja que la de inicio */
.hero-sec{min-height:clamp(340px, 46vh, 440px); padding-block:clamp(40px, 5vw, 64px)}
.hero-sec .glass{max-width:820px}
.hero-sec .glass h1{font-size:clamp(28px,3.6vw,42px)}
/* Precios: tarjeta más estrecha y foto más alta para que se vea la pantalla del móvil */
@media (min-width:821px){
  .hero-precios .glass{max-width:640px}
  .hero-precios .hero-bg{object-position:72% 30%}
}
.hero-copy{max-width:720px; display:flex; flex-direction:column; gap:18px}
@media (min-width:600px){.nw{white-space:nowrap}}
@media (max-width:599px){.hero-copy h1 .nw{display:block; text-wrap:balance}}
.hero-copy h1{font-size:clamp(34px, 4.8vw, 58px); line-height:1.05; font-weight:800}
.hero-copy p:not(.kicker){font-size:clamp(17px,1.6vw,20px); max-width:52ch}
/* Tablet y móvil: foto arriba, texto debajo */
@media (max-width:820px){
  .hero-img{--ph:clamp(240px, 58vw, 440px); display:block; min-height:0; padding-block:0 48px}
  .hero-bg{position:relative; display:block; height:var(--ph); width:calc(100% + 2 * var(--gut)); max-width:none; margin-inline:calc(-1 * var(--gut)); object-position:74% center}
  .hero-img::before{inset:auto 0 auto 0; top:calc(var(--ph) - 140px); height:141px; background:linear-gradient(180deg, rgba(20,24,80,0), var(--azul-900))}
  .hero-img .wrap{margin-top:-24px}
  .hero-sec{--ph:clamp(200px, 46vw, 320px)}
}

/* ¿Por qué Cox? y modalidades */
.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card .ideal{margin-top:auto; padding-top:8px; font-weight:600; color:var(--azul)}
@media (max-width:1100px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards-4{grid-template-columns:minmax(0,1fr)}}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-2 .card{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:12px; justify-items:center; text-align:center}
.cards-2 .card p{text-wrap:balance}
.cards-2 .card .ideal{margin-top:0}
@media (max-width:700px){.cards-2{grid-template-columns:minmax(0,1fr)}}
.sec-head-c{align-items:center; text-align:center; margin-inline:auto}
.sec-head-c p{text-wrap:balance}
.sec-head-c .divider{background:linear-gradient(90deg, rgba(237,105,106,0), var(--coral), rgba(237,105,106,0))}

/* Pasos de la oferta */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; counter-reset:paso}
.steps li{counter-increment:paso; display:flex; flex-direction:column; gap:6px; padding:24px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card)}
.steps li::before{content:counter(paso); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin-bottom:8px; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--azul), var(--coral-700))}
.steps b{font-size:18px; color:var(--azul)}
.steps span{color:var(--ink-2)}
.steps-cta{margin-top:28px}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Fichas dentro de un desplegable */
.faq .fichas{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.faq .fichas{grid-template-columns:repeat(3,minmax(0,1fr))}.faq .fichas-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq .ficha-head{padding:16px 20px}
.faq .ficha .kv{padding:4px 20px 12px}

/* Móvil estrecho: el botón Área privada sin icono */
@media (max-width:400px){.btn-hdr .ic{display:none} .btn-hdr{padding:10px 14px}}

/* WhatsApp: botón flotante en todas las páginas */
.wa-fab{position:fixed; right:20px; bottom:20px; z-index:40; display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:var(--r-pill); background:#15803D; color:#fff; font-weight:700; font-size:16px; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.22)}
.wa-fab:hover{background:#116932}
.wa-fab:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px #15803D}
.wa-fab .ic{width:24px; height:24px}
@media (max-width:599px){.wa-fab{padding:14px; right:16px; bottom:16px} .wa-fab span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}}
@media print{.wa-fab{display:none}}
.foot{padding-bottom:72px}