/* Solareia 2026 · sistema visual
   Referencia principal: web de Heimdall Power (vídeo facilitado por Paula), adaptada a Solareia sin copiar contenido ni identidad:
   - aviso superior con dato en directo (allí, una noticia; aquí, el precio de la luz de TarifasLuzBaratas.com),
   - navegación flotante en píldora que se compacta al bajar, con botón y flecha en cuadro,
   - portada oscura con dibujo técnico de líneas que se traza al cargar (allí, una torre; aquí, la red que une hogar, comunidad, negocio y empresa),
   - frases que se subrayan con bloque de color al hacer scroll, títulos con «cursor» de bloque, secciones claras enmarcadas con corchetes,
   - tarjetas oscuras con pestañas para los servicios y las herramientas, pie con la marca en gigante.
   Paleta: tinta #02111a, verde marca #014044, menta del logo #8CFFB9, crema. Tipografía: Outfit (titulares) + Roboto (texto),
   las mismas que TarifasLuzBaratas.com para que el paso de una web a otra se note continuo.
   Movimiento discreto y desactivable (prefers-reduced-motion). Contraste AA en todos los textos. */

@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --tinta: #02111a;
  --tinta-2: #071b25;
  --tinta-3: #0d2731;
  --marca: #014044;
  --marca-2: #0b5156;
  --menta: #8cffb9;
  --verde: #60c495;
  --verde-osc: #186844;
  --crema: #eeeae0;
  --papel: #f7f5ef;
  --texto: #0b1d22;
  --suave: #4c5d5b;
  --linea: rgb(11 29 34 / .16);
  --linea-clara: rgb(238 234 224 / .16);
  --texto-claro: #eeeae0;
  --suave-claro: rgb(238 234 224 / .74);
  --peligro: #b42318;

  --f-titulo: "Outfit", "Roboto", system-ui, sans-serif;
  --f-texto: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-tarjeta: 22px;
  --r-int: 14px;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --z-nav: 40;

  /* Variables del componente compartido de precio PVPC */
  --surface: var(--papel); --surface-2: var(--crema); --text: var(--texto); --muted: var(--suave); --border: var(--linea);
  --accent: var(--verde); --accent-strong: var(--verde-osc); --brand-deep: var(--tinta); --font-display: var(--f-titulo); --font-body: var(--f-texto);
  --r-card: var(--r-tarjeta); --r-pill: 999px; --shadow: none; --ease-out: var(--ease); --mint: var(--menta); --danger: var(--peligro);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--crema); color: var(--texto); font: 400 1.0625rem/1.65 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--verde-osc); outline-offset: 3px; border-radius: 6px; }
.seccion--oscura :focus-visible, .hero :focus-visible, .pcab :focus-visible, .nav :focus-visible, .pie :focus-visible, .banda :focus-visible, .aviso :focus-visible, .pestanas--oscuras :focus-visible { outline-color: var(--menta); }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--papel); padding: 10px 14px; border-radius: 10px; }
.saltar:focus { top: 12px; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.contenedor--estrecho { max-width: 860px; }

/* ---------- Tipografía de apoyo ---------- */
.eyebrow { font: 500 .78rem/1.2 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--menta); margin-bottom: 1rem; display: inline-flex; gap: 8px; align-items: center; }
.eyebrow--oscura { color: var(--verde-osc); }
.titulo { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.titulo__cursor { display: inline-block; width: .42em; height: .9em; margin-left: .12em; vertical-align: -.08em; background: var(--verde); border-radius: 2px; }
.seccion--oscura .titulo__cursor, .hero .titulo__cursor { background: var(--menta); }
@media (prefers-reduced-motion: no-preference) { .titulo.is-visto .titulo__cursor { animation: parpadeo 1.1s steps(1) 2; } }
@keyframes parpadeo { 50% { opacity: 0; } }
.h3 { font-size: 1.3rem; font-weight: 500; margin-bottom: .7rem; }
.entradilla { margin-top: 1.2rem; font-size: 1.12rem; color: var(--suave); max-width: 48ch; }
.entradilla b { color: var(--texto); font-weight: 600; }
.entradilla--clara { color: var(--suave-claro); margin-top: 0; }
.nota { font-size: .86rem; color: var(--suave); margin-top: 1rem; }
.nota--tlb { text-align: center; max-width: 60ch; margin-inline: auto; }
.mas { margin-top: 1.6rem; }
.mas a { font: 500 1rem var(--f-titulo); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.texto p + p { margin-top: 1rem; }
.texto-claro { color: var(--suave-claro); font-size: 1.1rem; }
.texto-claro p + p { margin-top: 1rem; }

/* ---------- Botones ---------- */
.boton { --b-fondo: var(--tinta); --b-texto: var(--texto-claro); --b-flecha: var(--menta);
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 6px 6px 22px; border-radius: 999px; border: 0;
  background: var(--b-fondo); color: var(--b-texto); font: 500 1rem/1 var(--f-titulo); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 200ms ease, box-shadow 200ms ease; }
.boton__flecha { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--b-flecha); color: var(--tinta); font-size: 1.05rem; transition: transform 220ms var(--ease); }
.boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .boton:hover .boton__flecha { transform: translateX(3px); } .boton:hover { box-shadow: 0 10px 30px -14px rgb(2 17 26 / .6); } }
.boton--menta { --b-fondo: var(--menta); --b-texto: var(--tinta); --b-flecha: var(--tinta); }
.boton--menta .boton__flecha { color: var(--menta); }
.boton--oscuro { --b-fondo: var(--tinta); }
.boton--linea, .boton--linea-clara { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linea-clara); color: var(--texto-claro); padding-right: 22px; }
.boton--linea-clara .boton__flecha { width: auto; height: auto; background: none; color: var(--menta); }
.boton--bloque { width: 100%; justify-content: space-between; }
a.boton:not(:has(.boton__flecha)) { padding-right: 22px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.6rem; }
.acciones--centro { justify-content: center; margin-top: 2.4rem; }
.enlace-tel { color: var(--suave-claro); font-size: .95rem; text-decoration: none; }
.enlace-tel:hover { color: var(--menta); }
.enlace-tel--oscuro { color: var(--suave-claro); }

/* ---------- Aviso superior y navegación ---------- */
.aviso { background: var(--tinta); color: var(--suave-claro); font-size: .86rem; border-bottom: 1px solid var(--linea-clara); }
.aviso__in { display: flex; align-items: center; gap: 10px; min-height: 40px; justify-content: center; text-align: center; }
.aviso__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); flex: none; box-shadow: 0 0 0 0 rgb(140 255 185 / .6); }
@media (prefers-reduced-motion: no-preference) { .aviso__punto { animation: latido 2.4s ease-out infinite; } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgb(140 255 185 / .55); } 70%, 100% { box-shadow: 0 0 0 8px rgb(140 255 185 / 0); } }
.aviso__texto b { color: var(--texto-claro); font-weight: 600; font-variant-numeric: tabular-nums; }
.aviso__enlace { color: var(--menta); white-space: nowrap; text-decoration: none; border-bottom: 1px solid rgb(140 255 185 / .4); }
@media (max-width: 560px) { .aviso__in { font-size: .8rem; gap: 8px; } .aviso__extra { display: none; } }

.nav { position: sticky; top: 12px; z-index: var(--z-nav); width: min(var(--ancho), calc(100% - 24px)); margin: 12px auto 0; }
.nav__barra { display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 6px 6px 6px 18px; border-radius: 18px;
  background: rgb(2 17 26 / .82); color: var(--texto-claro); border: 1px solid var(--linea-clara);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 18px 40px -24px rgb(0 0 0 / .7); transition: max-width 400ms var(--ease); }
.nav__marca img { width: 128px; height: auto; }
.nav__enlaces { margin: 0 auto; }
.nav__enlaces ul { list-style: none; padding: 0; display: flex; gap: 2px; }
.nav__enlaces a, .nav__util { display: block; padding: 10px 12px; border-radius: 10px; color: var(--suave-claro); text-decoration: none; font-size: .93rem; transition: color 150ms ease, background-color 150ms ease; }
.nav__enlaces a:hover, .nav__util:hover { color: var(--texto-claro); background: rgb(238 234 224 / .06); }
.nav__enlaces a[aria-current] { color: var(--menta); }
.nav__cta { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 16px; min-height: 46px; border-radius: 12px; background: var(--texto-claro); color: var(--tinta); font: 500 .95rem var(--f-titulo); text-decoration: none; }
.nav__cta-flecha { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--marca); color: var(--menta); transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav__cta:hover .nav__cta-flecha { transform: translateX(2px); } }
.nav__menu { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--linea-clara); background: transparent; color: var(--texto-claro); cursor: pointer; place-items: center; }
.nav__hamburguesa, .nav__hamburguesa::before, .nav__hamburguesa::after { display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 250ms var(--ease), opacity 150ms; }
.nav__hamburguesa { position: relative; }
.nav__hamburguesa::before, .nav__hamburguesa::after { content: ""; position: absolute; left: 0; }
.nav__hamburguesa::before { top: -6px; } .nav__hamburguesa::after { top: 6px; }
.nav__menu[aria-expanded="true"] .nav__hamburguesa { background: transparent; }
.nav__menu[aria-expanded="true"] .nav__hamburguesa::before { transform: translateY(6px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__hamburguesa::after { transform: translateY(-6px) rotate(-45deg); }
.nav__movil { margin-top: 8px; padding: 14px; border-radius: 18px; background: rgb(2 17 26 / .96); border: 1px solid var(--linea-clara); color: var(--texto-claro); display: grid; gap: 12px; }
.nav__movil ul { list-style: none; padding: 0; display: grid; }
.nav__movil a:not(.boton) { display: block; padding: 12px 6px; text-decoration: none; border-bottom: 1px solid var(--linea-clara); font: 400 1.1rem var(--f-titulo); }
.nav__movil a[aria-current] { color: var(--menta); }
.nav__movil .enlace-tel { text-align: center; border: 0; }
/* Al bajar, la barra se compacta: solo marca y botón (patrón de la referencia) */
.nav.is-compacta .nav__barra { max-width: 520px; margin-inline: auto; }
.nav.is-compacta .nav__enlaces { display: none; }
.nav.is-compacta .nav__util { margin-left: auto; }
@media (max-width: 1100px) { .nav__util { display: none; } }
@media (max-width: 960px) {
  .nav__enlaces { display: none; }
  .nav__menu { display: grid; margin-left: 6px; }
  .nav__cta { margin-left: auto; }
  .nav.is-compacta .nav__barra { max-width: none; }
}
@media (max-width: 420px) { .nav__cta span:first-child { display: none; } .nav__cta { padding-left: 4px; } .nav__marca img { width: 112px; } }

/* ---------- Portada ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(90% 70% at 70% 30%, #0a2a33 0%, var(--tinta) 60%); color: var(--texto-claro);
  margin-top: -72px; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; }
/* El dibujo ocupa la parte alta; el texto queda bajo la «línea de suelo», sin cruzarse con los trazos */
.hero__rejilla, .hero__perfiles { position: relative; }
.hero__rejilla::before { content: ""; position: absolute; inset: -60px -100vw 0; z-index: -1; background: linear-gradient(180deg, transparent, var(--tinta) 38%); pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--linea-clara) 1px, transparent 1px), linear-gradient(90deg, var(--linea-clara) 1px, transparent 1px); background-size: 80px 80px; opacity: .22; -webkit-mask: radial-gradient(80% 70% at 60% 40%, #000, transparent); mask: radial-gradient(80% 70% at 60% 40%, #000, transparent); }
.hero__dibujo { position: relative; z-index: -1; height: clamp(220px, 44vh, 500px); margin-top: 96px; display: flex; align-items: flex-end; opacity: .9; }
.hero__dibujo .dibujo { width: 100%; height: 100%; }
.hero__rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; padding-top: 28px; padding-bottom: clamp(28px, 4vw, 48px); }
.hero__h1 { font-size: clamp(2.7rem, 6.4vw, 5.6rem); font-weight: 500; letter-spacing: -.04em; line-height: .98; max-width: 12ch; }
.hero__intro { font-size: clamp(1.02rem, 1.4vw, 1.14rem); color: var(--suave-claro); max-width: 44ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.hero__nota { margin-top: 1rem; font-size: .82rem; color: rgb(238 234 224 / .6); max-width: 46ch; }
.hero__perfiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea-clara); padding-block: 0; }
.hero__perfiles a { display: grid; gap: 2px; padding: 20px 18px 24px 0; text-decoration: none; color: var(--texto-claro); border-right: 1px solid var(--linea-clara); padding-left: 18px; transition: background-color 200ms ease; position: relative; }
.hero__perfiles a:first-child { padding-left: 0; }
.hero__perfiles a:last-child { border-right: 0; }
.hero__perfiles b { font: 500 1.15rem var(--f-titulo); }
.hero__perfiles b::after { content: " →"; color: var(--menta); transition: margin 200ms var(--ease); }
.hero__perfiles span { font-size: .86rem; color: var(--suave-claro); }
@media (hover: hover) and (pointer: fine) { .hero__perfiles a:hover b::after { margin-left: 4px; } }
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__dibujo { height: clamp(200px, 52vw, 380px); margin-top: 84px; opacity: .85; }
  .hero__rejilla { grid-template-columns: 1fr; }
  .hero__perfiles { grid-template-columns: 1fr 1fr; }
  .hero__perfiles a { padding: 16px 12px; border-bottom: 1px solid var(--linea-clara); }
  .hero__perfiles a:nth-child(2n) { border-right: 0; }
  .hero__perfiles a:first-child { padding-left: 12px; }
}

/* Dibujo de líneas: se traza al cargar */
.dibujo .traza { fill: none; stroke: rgb(238 234 224 / .42); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dibujo .fina { stroke: rgb(238 234 224 / .24); stroke-width: 1; }
.dibujo .acento, .dibujo .acento-suave { stroke: var(--menta); }
.dibujo .acento-suave { stroke: rgb(140 255 185 / .55); }
.dibujo .red { stroke: rgb(140 255 185 / .32); stroke-dasharray: none; }
.dibujo .pulso { fill: none; stroke: var(--menta); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: .06 .94; stroke-dashoffset: 1; opacity: 0; }
.dibujo .nodo { fill: var(--menta); opacity: .7; }
.dibujo .etq rect { fill: rgb(2 17 26 / .85); stroke: rgb(238 234 224 / .3); vector-effect: non-scaling-stroke; }
.dibujo .etq circle { fill: var(--menta); }
.dibujo .etq text { fill: var(--texto-claro); font: 500 13px var(--f-titulo); letter-spacing: .01em; }
@media (prefers-reduced-motion: no-preference) {
  .js .dibujo .traza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 2.4s var(--ease) forwards; }
  .js .dibujo .fina { animation-duration: 3s; animation-delay: .25s; }
  .js .dibujo .etq { opacity: 0; animation: aparecer .6s var(--ease) 1.6s forwards; }
  .js .dibujo .pulso { animation: pulso 4.5s linear 2.2s infinite; }
  .js .dibujo .pulso--2 { animation-delay: 4.4s; }
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes pulso { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Titular palabra a palabra */
@media (prefers-reduced-motion: no-preference) {
  .js [data-palabras] .p { display: inline-block; opacity: 0; transform: translateY(.4em); filter: blur(6px); animation: palabra .8s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
}
@keyframes palabra { to { opacity: 1; transform: none; filter: none; } }

/* ---------- Cabecera de páginas interiores ---------- */
.pcab { position: relative; isolation: isolate; overflow: hidden; background: var(--tinta); color: var(--texto-claro); margin-top: -72px; padding: clamp(130px, 14vw, 180px) 0 clamp(40px, 6vw, 72px); }
.pcab__dibujo { position: absolute; inset: 0; z-index: -1; opacity: .45; }
.pcab__dibujo .dibujo { width: 100%; height: 100%; }
.pcab__h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); letter-spacing: -.035em; max-width: 18ch; }
.pcab__intro { margin-top: 1.2rem; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--suave-claro); max-width: 58ch; }
.pcab__acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--tinta); padding-bottom: clamp(40px, 6vw, 72px); max-width: none; padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); margin-top: -1px; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(64px, 9vw, 128px) clamp(72px, 10vw, 140px); }
.seccion--sin-arriba { padding-top: 0; }
.seccion--crema { background: var(--crema); }
.seccion--papel { background: var(--papel); }
.seccion--oscura { background: var(--tinta); color: var(--texto-claro); }
.seccion--oscura .entradilla { color: var(--suave-claro); }
.cabeza-seccion { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.cabeza-seccion--izq { max-width: none; }
.cabeza-seccion--fila { display: flex; align-items: end; justify-content: space-between; gap: 20px; max-width: none; flex-wrap: wrap; }
.titulo + .dos-col, .titulo + .contenedor { margin-top: clamp(24px, 4vw, 44px); }
.rejilla-lateral { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .rejilla-lateral, .dos-col { grid-template-columns: 1fr; } }

/* Marco con corchetes y frase subrayada */
.marco { position: relative; padding: clamp(40px, 7vw, 88px) clamp(8px, 4vw, 48px); }
.marco::before, .marco::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; border: 1px solid var(--texto); opacity: .55; }
.marco::before { top: 0; border-bottom: 0; }
.marco::after { bottom: 0; border-top: 0; }
.frase { font: 500 clamp(1.5rem, 3.3vw, 2.6rem)/1.28 var(--f-titulo); letter-spacing: -.025em; text-align: center; max-width: 30ch; margin-inline: auto; }
.frase .p { transition: background-color 220ms ease, color 220ms ease; padding: 0 .04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.frase .p.is-on { background: var(--menta); color: var(--tinta); }

/* Pestañas oscuras */
.pestanas--oscuras { background: var(--tinta); color: var(--texto-claro); border-radius: var(--r-tarjeta); padding: 8px; box-shadow: 0 30px 60px -40px rgb(2 17 26 / .7); }
.pestanas__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: var(--tinta-2); border-radius: 16px; }
.pestanas__lista button { min-height: 44px; border: 0; border-radius: 11px; background: var(--tinta-3); color: var(--suave-claro); font: 500 .95rem var(--f-titulo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 200ms ease, color 200ms ease; }
.pestanas__lista button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.pestanas__lista button[aria-selected="true"] { background: var(--tinta); color: var(--texto-claro); box-shadow: inset 0 0 0 1px var(--linea-clara); }
.pestanas__lista button[aria-selected="true"]::before { background: var(--menta); opacity: 1; }
.pestanas__panel { padding: clamp(18px, 3vw, 32px); background: linear-gradient(160deg, var(--tinta-3), var(--tinta) 70%); border-radius: 16px; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) { .pestanas__panel:not([hidden]) { animation: aparecer-sube .45s var(--ease); } }
@keyframes aparecer-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel-servicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.panel-servicio > div > p:first-child { color: var(--suave-claro); margin-bottom: 1rem; }
@media (max-width: 760px) { .panel-servicio { grid-template-columns: 1fr; } .pestanas__lista { grid-template-columns: 1fr 1fr 1fr; } .pestanas__lista button { font-size: .86rem; } }

/* Esquema de factura */
.factura { margin: 0; padding: 18px; border-radius: var(--r-int); background: rgb(238 234 224 / .04); border: 1px solid var(--linea-clara); }
.factura__cab { display: flex; justify-content: space-between; align-items: center; font: 500 .92rem var(--f-titulo); margin-bottom: 14px; }
.factura__chip { font: 500 .72rem var(--f-texto); padding: 4px 8px; border-radius: 6px; background: rgb(140 255 185 / .14); color: var(--menta); }
.factura__lista { list-style: none; padding: 0; display: grid; gap: 14px; }
.factura__nombre { display: block; font-size: .9rem; color: var(--texto-claro); }
.factura__barra { display: block; height: 10px; border-radius: 6px; margin: 6px 0 4px; width: var(--w); min-width: 20%; background: linear-gradient(90deg, var(--verde), var(--menta)); transform-origin: left; }
.factura__nota { font-size: .78rem; color: var(--suave-claro); }
.factura figcaption { margin-top: 14px; font-size: .74rem; color: rgb(238 234 224 / .55); }
@media (prefers-reduced-motion: no-preference) { .pestanas__panel:not([hidden]) .factura__barra { animation: barra .9s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 150ms); } }
@keyframes barra { from { transform: scaleX(0); } }

/* Listas */
.lista-check, .lista-no { list-style: none; padding: 0; display: grid; gap: 10px; }
.lista-check li, .lista-no li { position: relative; padding-left: 30px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 2px solid var(--verde-osc); border-bottom: 2px solid var(--verde-osc); transform: rotate(-45deg); }
.seccion--oscura .lista-check li::before, .pestanas--oscuras .lista-check li::before { border-color: var(--menta); }
.lista-no li::before, .lista-no li::after { content: ""; position: absolute; left: 2px; top: .75em; width: 14px; height: 2px; background: var(--peligro); transform: rotate(45deg); }
.lista-no li::after { transform: rotate(-45deg); }
.lista-num { padding-left: 1.4em; display: grid; gap: 12px; }
.lista-num li::marker { font: 600 1rem var(--f-titulo); color: var(--verde-osc); }
.lista-num--clara { color: var(--suave-claro); font-size: 1.08rem; }
.lista-num--clara b { color: var(--texto-claro); font-weight: 600; }
.lista-num--clara li::marker { color: var(--menta); }

/* Herramientas (mini comparador y precio) */
.herramientas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.herramienta { display: grid; gap: 16px; align-content: start; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-tarjeta); background: linear-gradient(170deg, var(--tinta-3), var(--tinta-2)); border: 1px solid var(--linea-clara); }
.herramienta > p { color: var(--suave-claro); }
.herramienta__h { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; }
.herramienta__h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }
.herramienta .boton { justify-self: start; }
@media (max-width: 900px) { .herramientas { grid-template-columns: 1fr; } }
.mini { display: grid; gap: 16px; }
.mini__controles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.mini__controles label { display: flex; justify-content: space-between; font-size: .88rem; color: var(--suave-claro); grid-row: 1; }
.mini__controles output { color: var(--texto-claro); font: 600 .95rem var(--f-titulo); font-variant-numeric: tabular-nums; }
.mini__controles input { grid-row: 2; width: 100%; accent-color: var(--menta); }
.mini__resultado { display: grid; gap: 8px; min-height: 196px; }
.mini__fila { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgb(238 234 224 / .05); border: 1px solid var(--linea-clara); }
.mini__fila b { font: 500 1rem var(--f-titulo); }
.mini__fila small { color: var(--suave-claro); font-size: .78rem; grid-column: 1; }
.mini__fila strong { grid-row: 1 / span 2; grid-column: 2; font: 600 1.25rem var(--f-titulo); font-variant-numeric: tabular-nums; }
.mini__fila--rec { border-color: rgb(140 255 185 / .5); }
.mini__chip { display: inline-block; font: 500 .7rem var(--f-texto); padding: 2px 7px; border-radius: 6px; background: var(--menta); color: var(--tinta); margin-left: 6px; vertical-align: 2px; }
.mini__nota, .mini__cargando { font-size: .8rem; color: var(--suave-claro); }
.mini__aviso { font-size: .82rem; color: #ffd28a; }
@media (max-width: 420px) { .mini__controles { grid-template-columns: 1fr; } .mini__controles label, .mini__controles input { grid-row: auto; } }
.pv-card--incrustado { padding: 0; border: 0; background: transparent; box-shadow: none; min-height: 300px; }
.pv-card--incrustado .pv-cifras { grid-template-columns: 1fr; }
.pv-card--incrustado .pv-precio { white-space: nowrap; }

/* Método */
.metodo { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.metodo li { padding: 26px 22px 10px 0; border-right: 1px solid var(--linea); }
.metodo li + li { padding-left: 22px; }
.metodo li:last-child { border-right: 0; }
.metodo__n { font: 500 .85rem var(--f-titulo); color: var(--verde-osc); letter-spacing: .08em; }
.metodo h3 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.metodo p { color: var(--suave); font-size: .98rem; }
@media (max-width: 900px) { .metodo { grid-template-columns: 1fr 1fr; } .metodo li { border-bottom: 1px solid var(--linea); padding: 22px 16px 22px 0; } .metodo li + li { padding-left: 0; } .metodo li:nth-child(2n) { border-right: 0; padding-left: 16px; } .metodo h3 { margin-top: 1rem; } }
@media (max-width: 520px) { .metodo { grid-template-columns: 1fr; } .metodo li { border-right: 0; padding-left: 0 !important; } }

/* Transparencia */
.transparencia { display: grid; gap: 28px; }
.transparencia p { color: var(--suave); }
.caja-aviso { padding: 22px; border-radius: var(--r-int); background: var(--papel); border-left: 4px solid var(--verde); }
.caja-aviso p { color: var(--suave); }

/* Tarjetas */
.tarjetas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.tarjetas--2 { grid-template-columns: 1fr 1fr; margin-top: 0; }
.tarjetas li { padding: 26px 24px 28px; border-radius: var(--r-tarjeta); background: var(--papel); position: relative; }
.seccion--papel .tarjetas li { background: var(--crema); }
.tarjetas li::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--verde); margin-bottom: 18px; }
.tarjetas h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.tarjetas p { color: var(--suave); font-size: .98rem; }
.tarjetas--oscuras li { background: var(--tinta-3); }
.tarjetas--oscuras p { color: var(--suave-claro); }
.tarjetas--oscuras li::before { background: var(--menta); }
@media (max-width: 900px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tarjetas, .tarjetas--2 { grid-template-columns: 1fr; } }
.sectores { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.sectores p { color: var(--suave); }
@media (max-width: 560px) { .sectores { grid-template-columns: 1fr; } }

/* Rutas (enlaces grandes a cada recorrido) */
.rutas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block: clamp(24px, 4vw, 40px) 0; }
.rutas--columna { grid-template-columns: 1fr; margin-top: 0; }
.rutas a { display: grid; gap: 4px; padding: 22px; border-radius: var(--r-int); background: var(--tinta); color: var(--texto-claro); text-decoration: none; min-height: 112px; align-content: space-between; transition: transform 200ms var(--ease), background-color 200ms ease; }
.rutas b { font: 500 1.15rem var(--f-titulo); }
.rutas span { color: var(--menta); font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .rutas a:hover { transform: translateY(-3px); background: var(--tinta-3); } }
@media (max-width: 900px) { .rutas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rutas { grid-template-columns: 1fr; } }

/* Datos */
.datos { display: grid; gap: 0; margin: 1.4rem 0 0; }
.datos div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.datos dt { color: var(--suave); font-size: .9rem; }
.datos dd { margin: 0; }
.datos--grandes dd { font: 500 1.2rem var(--f-titulo); }
@media (max-width: 480px) { .datos div { grid-template-columns: 1fr; gap: 2px; } }

/* Noticias */
.noticias { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.noticia a { display: grid; gap: 10px; align-content: start; text-decoration: none; height: 100%; padding-bottom: 8px; }
.noticia__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-int); background: var(--crema); }
.noticia__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.noticia time { font-size: .82rem; color: var(--suave); }
.noticia h3, .noticia h2 { font-size: 1.18rem; line-height: 1.2; }
.noticia p { color: var(--suave); font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .noticia a:hover img { transform: scale(1.03); } .noticia a:hover h3 { text-decoration: underline; } }
@media (max-width: 860px) { .noticias { grid-template-columns: 1fr; } }

/* Preguntas */
.faq { display: grid; border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 0; font: 500 1.14rem/1.3 var(--f-titulo); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__signo { position: relative; width: 22px; height: 22px; flex: none; border-radius: 5px; background: var(--tinta); }
.faq__signo::before, .faq__signo::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; background: var(--menta); transition: transform 250ms var(--ease); }
.faq__signo::after { transform: rotate(90deg); }
.faq__item[open] .faq__signo::after { transform: rotate(0); }
.faq__resp { padding: 0 0 22px; color: var(--suave); max-width: 68ch; }
.faq-grupo { margin: 2rem 0 .4rem; }
.faq-grupo:first-child { margin-top: 0; }

/* Banda final */
.banda { background: var(--marca); color: var(--texto-claro); padding-block: clamp(48px, 7vw, 88px); position: relative; overflow: hidden; }
.banda::after { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(140 255 185 / .22), transparent 65%); pointer-events: none; }
.banda__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; position: relative; z-index: 1; }
.banda__h { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 20ch; }
.banda p { color: var(--suave-claro); margin-top: .6rem; }
.banda__acciones { display: grid; gap: 10px; justify-items: start; }

/* Pie */
.pie { background: var(--tinta); color: var(--suave-claro); font-size: .92rem; padding-top: clamp(56px, 7vw, 88px); overflow: hidden; }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.pie__col--marca img { width: 170px; margin-bottom: 16px; }
.pie__col--marca p { max-width: 32ch; }
.pie__h { font: 500 .95rem var(--f-titulo); color: var(--texto-claro); letter-spacing: 0; margin-bottom: 14px; }
.pie__h small { display: block; font: 400 .74rem var(--f-texto); color: rgb(238 234 224 / .55); margin-top: 2px; }
.pie ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--menta); }
.pie__gigante { font: 500 clamp(5rem, 19vw, 17rem)/.8 var(--f-titulo); letter-spacing: -.06em; margin: clamp(40px, 6vw, 72px) 0 0; color: transparent; background: linear-gradient(180deg, rgb(140 255 185 / .9), rgb(140 255 185 / .08)); -webkit-background-clip: text; background-clip: text; text-align: center; user-select: none; }
.pie__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 30px; border-top: 1px solid var(--linea-clara); font-size: .8rem; color: rgb(238 234 224 / .6); }
.pie__legal-enlaces { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 960px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } .pie__col--marca { grid-column: 1 / -1; } }
@media (max-width: 480px) { .pie__rejilla { grid-template-columns: 1fr; } }

/* Textos legales y artículos */
.texto-legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.4rem; }
.texto-legal h2 { font-size: 1.4rem; margin: 2rem 0 .6rem; }
.texto-legal h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.texto-legal p, .texto-legal li { color: var(--suave); margin-bottom: .8rem; }
.texto-legal a { color: var(--verde-osc); }
.meta-articulo { color: var(--suave); font-size: .9rem; margin-bottom: 1.4rem; }
.migas { font-size: .9rem; margin-bottom: 1rem; }

/* Aparición al hacer scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .revela { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .revela.is-visto { opacity: 1; transform: none; }
}

/* Páginas del plugin de noticias: se respeta su diseño y se ajusta el hueco de la navegación */
body.sa-page main#contenido { padding-top: 24px; }

/* Noticias (plugin «Actualidad energética») dentro del tema nuevo, a petición de Paula (21/10/2026):
   - una sola marca: se quita la barra propia del plugin con el segundo logo, «Actualidad energética»,
     «Volver a la web» y «Nuestros servicios» (la navegación del tema ya los cubre); se conserva solo el selector de idioma, sin línea;
   - sin buscador ni desplegables: quedan las temáticas como píldoras. */
body.sa-page .sa-masthead { background: var(--sa-deep, var(--tinta)); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.sa-page .sa-masthead .sa-brand, body.sa-page .sa-masthead .sa-quicknav { display: none; }
body.sa-page .sa-masthead__row { justify-content: flex-end; min-height: 0; padding-top: 12px; padding-bottom: 0; }
body.sa-page main#contenido { padding-top: 0; }
body.sa-page .sa-hero { border-bottom: 0; padding-top: 24px; }
body.sa-page .sa-filters__search, body.sa-page .sa-filters__row { display: none; }
body.sa-page .sa-filters { margin: 28px 0 0; background: none; border: 0; box-shadow: none; padding: 0; }


/* ===== Copiado de TarifasLuzBaratas.com (no editar aquí) ===== */
/* ---------- Componente compartido: precio PVPC por horas ---------- */
.pv-card { --pv-bg: var(--surface); --pv-fg: var(--text); --pv-muted: var(--muted); --pv-line: var(--border); --pv-bar: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); --pv-cheap: var(--accent-strong); --pv-high: #d9534f; --pv-now: var(--text);
  background: var(--pv-bg); color: var(--pv-fg); border: 1px solid var(--pv-line); border-radius: var(--r-card); padding: clamp(18px, 3vw, 28px); max-width: 1040px; margin: 0 auto; min-height: 320px; box-shadow: var(--shadow); }
.pv-card--dark { --pv-bg: var(--brand-deep); --pv-fg: #fff; --pv-muted: rgb(255 255 255 / .72); --pv-line: rgb(255 255 255 / .12); --pv-bar: rgb(255 255 255 / .28); --pv-cheap: var(--mint); --pv-high: #ff8a80; --pv-now: #fff; }
.pv-card a { color: inherit; }
.pv-cargando { color: var(--pv-muted); }
.pv-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pv-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-tab { border: 1.5px solid var(--pv-line); background: transparent; color: var(--pv-fg); border-radius: var(--r-pill); padding: 8px 16px; font: 600 .92rem var(--font-display); cursor: pointer; min-height: 40px; }
.pv-tab span { font-weight: 400; color: var(--pv-muted); margin-left: 4px; }
.pv-tab[aria-selected="true"] { background: var(--pv-cheap); border-color: var(--pv-cheap); color: var(--brand-deep); }
.pv-tab[aria-selected="true"] span { color: inherit; }
.pv-pend { font-size: .82rem; color: var(--pv-muted); }
.pv-cifras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: end; margin-bottom: 18px; }
.pv-etq { display: block; font-size: .9rem; color: var(--pv-muted); }
.pv-precio { display: block; font: 700 clamp(2.4rem, 5vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pv-precio small { font: 500 1rem var(--font-body); color: var(--pv-muted); letter-spacing: 0; }
.pv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.pv-stats div { border: 1px solid var(--pv-line); border-radius: 12px; padding: 10px 12px; font-size: .8rem; color: var(--pv-muted); }
.pv-stats dt { font-weight: 600; }
.pv-stats dd { margin: 2px 0 0; }
.pv-stats b { color: var(--pv-fg); font: 700 1.02rem var(--font-display); font-variant-numeric: tabular-nums; }
.pv-grafico { --n: 24; }
.pv-barras { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 3px; height: 200px; }
.pv-bar { background: var(--pv-bar); border-radius: 5px 5px 2px 2px; min-height: 4px; transform-origin: bottom; }
.pv-bar.is-barata { background: var(--pv-cheap); }
.pv-bar.is-cara { background: var(--pv-high); }
.pv-bar.is-ahora { outline: 2px solid var(--pv-now); outline-offset: 2px; }
.pv-eje { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; margin-top: 6px; font-size: .72rem; color: var(--pv-muted); font-variant-numeric: tabular-nums; }
.pv-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .8rem; color: var(--pv-muted); }
.pv-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.l-barata { background: var(--pv-cheap); } .l-media { background: var(--pv-bar); } .l-cara { background: var(--pv-high); } .l-ahora { box-shadow: inset 0 0 0 2px var(--pv-now); }
.pv-nota { font-size: .82rem; color: var(--pv-muted); margin-top: 8px; }
.pv-aviso { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #ffb020 22%, transparent); border: 1px solid color-mix(in srgb, #ffb020 60%, transparent); font-size: .9rem; margin-bottom: 12px; }
.pv-detalle { margin-top: 14px; font-size: .9rem; }
.pv-detalle summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.pv-tabla { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.pv-tabla caption { text-align: left; font-size: .82rem; color: var(--pv-muted); padding-bottom: 6px; }
.pv-tabla th, .pv-tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--pv-line); }
.pv-fuente { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pv-line); display: grid; gap: 8px; font-size: .84rem; color: var(--pv-muted); }
.pv-fuente b { color: var(--pv-fg); }
.pv-meta { font-size: .76rem; }
@media (prefers-reduced-motion: no-preference) { .pv-card.is-listo .pv-bar { animation: pv-crece 600ms var(--ease-out) both; } }
@keyframes pv-crece { from { transform: scaleY(.1); opacity: .2; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) { .pv-cifras { grid-template-columns: 1fr; } .pv-barras { height: 160px; gap: 2px; } .pv-stats { grid-template-columns: 1fr 1fr 1fr; } .pv-stats div { padding: 8px; } }