/* Estilo C · bloques de color. Colores en variables para cambiarlos en un solo sitio. */
:root {
  color-scheme: light;
  --fondo: #EEF3EF;
  --tinta: #10231C;
  --tinta-2: #3B4E46;
  --tinta-3: #4A5E55;
  --verde: #0B3B2E;
  --verde-medio: #2F8F5B;
  --verde-claro: #B8F2D0;
  --verde-texto: #1F6B42;
  --amarillo: #FFD25A;
  --amarillo-tinta: #3D2E00;
  --amarillo-titulo: #4D3A00;
  --lila: #E7E2FF;
  --lila-tinta: #2E2370;
  --lila-titulo: #3B2D8F;
  --blanco: #FFFFFF;
  --linea: #DCE5DF;
  --aviso: #FFF1D6;
  --aviso-tinta: #6B4300;
  --error: #FDE4E1;
  --error-tinta: #8A1F11;
  /* Series de las gráficas: validadas para daltonismo y contraste sobre blanco */
  --serie-1: #1E8C52;
  --serie-2: #7B61D9;
  --display: 'Bricolage Grotesque', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: Inter, system-ui, sans-serif; line-height: 1.5; }
a { color: var(--verde); }
a:hover { color: #06261D; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--verde-medio); outline-offset: 2px; }

p, li, small { text-wrap: pretty; }
h1, h2, legend { text-wrap: balance; }
.pagina { max-width: 1200px; margin: 0 auto; padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
#contenido { display: flex; flex-direction: column; gap: 20px; }

/* Cabecera */
.cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 8px; }
.marca { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); text-decoration: none; }
.marca span { color: var(--verde-medio); }
.casas { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px;
  background: var(--blanco); color: var(--tinta); font-weight: 600; font-size: 15px; border: none; cursor: pointer; }
.pastilla[aria-current="page"] { background: var(--verde); color: var(--blanco); }

/* Bloque principal */
.heroe { background: var(--verde); color: var(--blanco); border-radius: 32px; padding: 36px 44px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.heroe-lado { flex: 1 1 360px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.heroe-texto { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.heroe h1 { margin: 0; font-family: var(--display); font-size: clamp(38px, 5vw, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.heroe h1 em { font-style: normal; color: var(--verde-claro); }
.heroe p { margin: 0; font-size: 19px; line-height: 1.55; color: #D9EEE2; max-width: 520px; }
.heroe .nota { font-size: 13px; color: #BFDCCB; }
.heroe-pie { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-top: 4px; }
.cambio { background: var(--blanco); color: var(--tinta); border-radius: 24px; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.cambio-precios { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.cambio-precios > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cambio-precios > div:last-child { align-items: flex-end; text-align: right; }
.etiqueta { font-size: 13px; color: var(--tinta-3); }
.cifra { font-family: var(--display); font-size: 36px; font-weight: 800; line-height: 1.05; }
.cifra.tachada { color: var(--tinta-3); text-decoration: line-through; }
.cifra.verde { color: var(--verde); }
.boton { text-decoration: none; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 56px; border-radius: 16px;
  background: var(--amarillo); color: var(--tinta); font-weight: 700; font-size: 17px; border: none; cursor: pointer; padding: 0 20px; }
.boton:hover { color: var(--tinta); filter: brightness(0.97); }
.boton.secundario { background: var(--blanco); border: 1.5px solid var(--tinta); min-height: 44px; font-size: 15px; font-weight: 600; }
.condiciones { font-size: 14px; line-height: 1.5; color: var(--tinta-3); text-align: center; }
.condiciones strong, code { font-family: ui-monospace, Menlo, monospace; color: var(--tinta); }

/* Tarjetas de color */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.tarjeta { background: var(--blanco); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.tarjeta .titulo { font-size: 14px; font-weight: 700; color: var(--tinta-3); }
.tarjeta .grande { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; }
.tarjeta .texto { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.tarjeta.amarilla { background: var(--amarillo); }
.tarjeta.amarilla .titulo { color: var(--amarillo-titulo); }
.tarjeta.amarilla .texto { color: var(--amarillo-tinta); }
.tarjeta.lila { background: var(--lila); }
.tarjeta.lila .titulo { color: var(--lila-titulo); }
.tarjeta.lila .texto { color: var(--lila-tinta); }
.tarjeta.verdeclaro { background: var(--verde-claro); }
.tarjeta .precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; font-size: 14px; color: var(--tinta-2); }
.tarjeta .precios b { display: block; font-size: 17px; color: var(--tinta); }

.tarifa-actual { grid-column: span 2; }
/* El aviso del bono social en el bloque verde */
.aviso-bono { font: inherit; text-align: left; cursor: pointer; display: flex; gap: 14px; align-items: center; background: rgba(184, 242, 208, 0.12); border: 1.5px solid rgba(184, 242, 208, 0.45); border-radius: 18px; padding: 12px 16px; color: var(--blanco); font-size: 14px; line-height: 1.45; }
.aviso-bono:hover { background: rgba(184, 242, 208, 0.2); }
.aviso-bono .verde { color: var(--verde-claro); }
.aviso-bono-icono { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--amarillo); color: var(--tinta); display: grid; place-items: center; font-weight: 800; }
.aviso-bono-enlace { font-weight: 700; text-decoration: underline; white-space: nowrap; }
/* Las tres de «Tu contrato», más compactas */
.tarjetas .tarjeta { padding: 22px 24px; min-height: 0; gap: 8px; border-radius: 24px; }
.tarjetas .tarjeta .grande { font-size: 32px; }
.tarjetas .estado-tarjeta { font-size: 16px; }
.tarjetas .tarjeta .texto { font-size: 14px; }
.nombre-tarifa { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.precios-tarifa { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0; }
.precios-tarifa div { background: var(--fondo); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.precios-tarifa span { font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.precios-tarifa b { font-size: 19px; }
.precios-tarifa small { font-size: 13px; color: var(--tinta-3); }

/* El resumen para vagos (sale al ir a irte, o desde el enlace del bloque verde) */
.enlace-resumen { align-self: flex-start; font: inherit; font-size: 15px; font-weight: 600; color: var(--verde-claro); background: none; border: none; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.aviso-caja .pasos { font-size: 15px; }
.resumen { background: var(--blanco); border-radius: 28px; padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.resumen-texto { flex: 999 1 480px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.resumen h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.resumen ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; }
.resumen-botones { flex: 1 1 250px; display: flex; flex-direction: column; gap: 10px; }
.resumen-botones .boton { min-height: 48px; font-size: 15px; }

/* Las cuatro tarjetas que hacen de pestañas */
.pestanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pestana { font: inherit; text-align: left; border: 1.5px solid var(--linea); cursor: pointer; min-height: 0; color: var(--tinta); position: relative; }
.pestana.amarilla { border-color: transparent; }
/* Compactas: «Ver →» arriba a la derecha, sin fila propia */
.pestanas .pestana { padding: 18px 20px; gap: 4px; border-radius: 22px; }
.pestana .grande { font-size: 26px; }
.pestana .texto { font-size: 14px; line-height: 1.4; }
.pestana .abrir { position: absolute; top: 18px; right: 20px; font-size: 13px; font-weight: 700; color: var(--verde); }
.pestana .titulo { padding-right: 44px; }
.pestana:hover { filter: brightness(0.98); }
.pestana[aria-selected="true"] { background: var(--verde); border-color: var(--verde); color: var(--blanco); box-shadow: 0 8px 24px rgba(11,59,46,0.18); }
.pestana[aria-selected="true"] .titulo { color: var(--verde-claro); }
.pestana[aria-selected="true"] .texto { color: #DDEFE4; }
.pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: var(--verde); border-radius: 3px; transform: translateX(-50%) rotate(45deg); }
.pestana.amarilla .abrir { color: var(--amarillo-tinta); }
.pestana.lila .abrir { color: var(--lila-titulo); }
#panel { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
.verdeclaro-fondo { background: var(--verde-claro); }
@media (max-width: 900px) { .pestanas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pestana[aria-selected="true"]::after { display: none; } }

/* Aviso antes de contratar */
dialog#aviso-contratar { border: none; border-radius: 28px; padding: 0; max-width: 560px; width: calc(100% - 32px); color: var(--tinta); }
dialog#aviso-contratar::backdrop { background: rgba(16,35,28,0.45); }
.aviso-caja { padding: 28px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.aviso-caja h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.aviso-caja p { margin: 0; font-size: 15px; line-height: 1.5; }
.aviso-caja td:last-child { color: var(--tinta-3); font-size: 13px; }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.aviso-botones .boton { min-height: 48px; font-size: 15px; }
.letra-pequena, .aviso-caja .letra-pequena { margin: 0; font-size: 12px; line-height: 1.45; color: var(--tinta-3); }
.interruptor { display: inline-flex; align-self: flex-start; background: var(--fondo); border-radius: 999px; padding: 4px; gap: 4px; }
.interruptor button { font: inherit; font-size: 14px; font-weight: 600; min-height: 38px; padding: 0 16px; border: none; border-radius: 999px; background: transparent; color: var(--tinta-2); cursor: pointer; }
.interruptor button[aria-pressed="true"] { background: var(--verde); color: var(--blanco); }
button.ver { font: inherit; font-size: 14px; font-weight: 600; background: none; cursor: pointer; }

/* Secciones blancas */
.seccion { background: var(--blanco); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.seccion-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.seccion h2, .suelta h2 { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.seccion h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.seccion-cabeza span { font-size: 15px; color: var(--tinta-2); }
.frase { margin: 0; font-size: 15px; line-height: 1.5; background: var(--fondo); border-radius: 16px; padding: 14px 18px; }
.suelta { display: flex; flex-direction: column; gap: 16px; }
.suelta .seccion-cabeza { padding: 8px 4px 0; }
.seccion.lila { background: var(--lila); }
.seccion.lila .frase { background: rgba(255,255,255,0.6); }

/* Barra de tramos */
.barra-tramos { display: flex; height: 56px; border-radius: 16px; overflow: hidden; gap: 3px; background: var(--blanco); }
.barra-tramos div { display: flex; align-items: center; padding: 0 16px; font-weight: 700; font-size: 15px; min-width: 0; white-space: nowrap; }
.t-punta { background: var(--tinta); color: var(--blanco); }
.t-llano { background: var(--verde-medio); color: var(--blanco); }
.t-valle { background: var(--verde-claro); color: var(--tinta); }
.leyenda-tramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.leyenda-tramos strong { color: var(--tinta); }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Gráficas */
.leyenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafica { min-height: 200px; }
.grafica svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.grafica text { font-family: Inter, system-ui, sans-serif; font-size: 12px; fill: var(--tinta-3); }
.grafica .rejilla { stroke: #E4EAE6; stroke-width: 1; }
.grafica .eje { stroke: #C9D4CD; stroke-width: 1; }
.grafica .zona { fill: transparent; cursor: crosshair; }
.grafica .zona:hover + .cruz, .grafica .cruz.activa { opacity: 1; }
.grafica .cruz { stroke: var(--tinta-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--tinta); color: var(--blanco); border-radius: 10px; padding: 8px 12px;
  font-size: 13px; line-height: 1.45; max-width: 280px; box-shadow: 0 6px 20px rgba(16,35,28,0.25); }
.tip b { font-weight: 700; }
.tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
details.datos summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--verde); }
.tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
th, td { text-align: right; padding: 6px 8px; border-bottom: 1px solid #EDF2EE; }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 600; color: var(--tinta-2); }

/* Ofertas en filas */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--fondo);
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.filtro input { accent-color: var(--verde); width: 16px; height: 16px; margin: 0; }
.buscar { min-height: 40px; border-radius: 999px; border: 1.5px solid var(--linea); padding: 0 16px; font-size: 14px; flex: 1 1 180px; max-width: 280px; }
.filas { display: flex; flex-direction: column; }
.fila { display: grid; grid-template-columns: 36px 40px minmax(0, 1fr) 132px 70px; gap: 14px; align-items: center; padding: 14px 10px; border-top: 1px solid #EDF2EE; }
.fila.tuya { background: var(--fondo); border-radius: 14px; border-top-color: transparent; }
.puesto { width: 32px; height: 32px; border-radius: 10px; background: var(--fondo); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.fila.tuya .puesto { background: var(--verde); color: var(--blanco); }
/* «Si tuvieras el bono social»: informa, no compite (sin puesto, con borde discontinuo) */
.fila.estimada { border: 1.5px dashed #E5B53A; border-radius: 14px; background: #FFF8E3; margin: 6px 0; }
.fila.estimada .puesto { background: transparent; }
@media (min-width: 641px) { .fila.estimada { grid-template-columns: 36px 40px minmax(0, 1fr) 132px auto; } }
.logo-bono { background: var(--amarillo); font-weight: 800; }
.fila .nombre { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fila .nombre b { font-size: 16px; overflow-wrap: anywhere; }
.fila .nombre span { font-size: 13px; color: var(--tinta-3); }
.fila .importe { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fila .importe b { font-size: 17px; font-weight: 800; white-space: nowrap; }
.fila .importe span { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ahorra { color: var(--verde-texto); }
.cuesta { color: #9A3412; }
.ver { justify-self: end; text-align: center; min-width: 64px; font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--tinta); color: var(--tinta); white-space: nowrap; }
.ver[data-vacio] { border-color: transparent; padding: 0; }
.mas { align-self: flex-start; background: none; border: none; padding: 8px 4px; font-weight: 600; font-size: 15px; color: var(--verde); cursor: pointer; text-decoration: underline; }
.etiquetas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--fondo); color: #2C4A3E; }

.logo { position: relative; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--tinta-2); overflow: hidden; }
/* scale-down: un favicon pequeño (16-32 px) se ve a su tamaño, centrado; nunca se estira (se vería borroso) */
.logo img { position: absolute; inset: 6px; width: 28px; height: 28px; object-fit: scale-down; background: var(--blanco); border-radius: 6px; padding: 2px; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.fila .nombre .chip { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.5; }
.fila .nombre .chip-buena { background: #DDF3E5; color: #1F6B42; }
.fila .nombre .chip-aviso { background: #FFF1D6; color: #6B4300; }
.fila .nombre .chip-neutra { background: var(--fondo); color: var(--tinta-2); }
.fila .nombre .ganadores { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.fila .nombre .ganador { font-size: 12px; font-weight: 700; color: var(--blanco); background: var(--verde); padding: 3px 10px; border-radius: 999px; }
.fila.gana { background: #F4FAF6; border-radius: 14px; }
.fila.recomendada .importe b { font-size: 22px; color: var(--verde-texto); }

.barra-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--blanco); border-radius: 20px; padding: 12px 18px; font-size: 15px; }
.barra-datos .boton { min-height: 40px; font-size: 14px; }
.pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
.seccion.lila .boton { align-self: flex-start; }

/* Factura */
.factura { background: var(--blanco); border-radius: 28px; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.factura-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.factura-cabeza h2 { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.estado { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 14px 18px; font-size: 15px; line-height: 1.5; }
.estado.ok { background: var(--verde-claro); color: var(--verde); }
.estado.mal { background: var(--aviso); color: var(--aviso-tinta); }
.estado.error { background: var(--error); color: var(--error-tinta); }
.estado svg { flex: none; margin-top: 2px; }
.estado ul { margin: 4px 0 0; padding-left: 18px; }
.desglose { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.desglose div { background: var(--fondo); border-radius: 14px; padding: 12px 14px; font-size: 13px; color: var(--tinta-3); display: flex; flex-direction: column; gap: 2px; }
.desglose b { font-size: 17px; color: var(--tinta); }
.cambios td.sube { color: #9A3412; font-weight: 700; }
/* Factura sin QR: el formulario (en verde, lo leído de la imagen) */
.subir.formulario { background: var(--blanco); color: var(--tinta); }
.subir.formulario > p { color: #3F4F48; font-size: 17px; }
.formulario .letra-pequena { color: #5C6B64; }
.formulario .aviso-botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.formulario .aviso-botones .boton { min-height: 52px; padding: 0 24px; }
.formulario #form-msg { color: var(--error-tinta); font-size: 14px; font-weight: 600; }
.formulario fieldset { border: none; margin: 0 0 18px; padding: 0; }
.formulario legend { font-family: var(--display); font-weight: 800; font-size: 19px; margin-bottom: 10px; }
.formulario legend span { font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 13px; color: var(--verde-texto); margin-left: 6px; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.campos[hidden] { display: none; }
.campos .letra-pequena { grid-column: 1 / -1; margin: 0; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.campo input { min-height: 44px; border-radius: 12px; border: 1.5px solid #C9D6CE; padding: 0 12px; font: inherit; font-size: 16px; font-weight: 500; background: var(--blanco); color: var(--tinta); min-width: 0; }
.campo input:focus { outline: 2px solid var(--verde-medio); outline-offset: 1px; }
.campo.leido input { border-color: var(--verde-medio); background: #F1FAF4; }
.campo small { font-weight: 400; color: #5C6B64; font-size: 12px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; font-weight: 600; }
.opciones label { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.opciones input { width: 18px; height: 18px; accent-color: var(--verde-medio); }
.enlace { font: inherit; color: var(--verde-texto); background: none; border: none; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.sello:not(.ok):not(.mal) { background: var(--aviso); color: var(--aviso-tinta); }

.guardar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guardar input { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--linea); padding: 0 14px; flex: 1 1 200px; max-width: 280px; }
.guardar .boton { min-height: 44px; font-size: 15px; }

.factura-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.factura-total { display: flex; flex-direction: column; gap: 2px; }
.total-grande { font-family: var(--display); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.sello { display: flex; gap: 12px; align-items: flex-start; border-radius: 20px; padding: 16px 20px; max-width: 460px; }
.sello div { display: flex; flex-direction: column; gap: 2px; }
.sello b { font-size: 18px; }
.sello span { font-size: 14px; line-height: 1.45; }
.sello.ok { background: var(--verde-claro); color: var(--verde); }
.sello.mal { background: var(--amarillo); color: var(--amarillo-tinta); }
.sello svg { flex: none; margin-top: 3px; }
.f-pot { background: var(--tinta); color: var(--blanco); }
.f-ene { background: var(--verde-medio); color: var(--blanco); }
.f-otr { background: var(--verde-claro); color: var(--tinta); }
.f-imp { background: #D9E2DC; color: var(--tinta); }
.datos-factura { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.datos-factura div { background: var(--fondo); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.datos-factura span { font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.datos-factura b { font-family: var(--display); font-size: 24px; font-weight: 800; }
.datos-factura small { font-size: 13px; color: var(--tinta-3); }
.nota-tarifa { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--verde-texto); font-weight: 600; }
.nota-tarifa.sube { color: #9A3412; }

/* Subir factura */
.subir { background: var(--verde); color: var(--blanco); border-radius: 32px; padding: 48px; display: flex; flex-direction: column; gap: 22px; }
.subir h1 { margin: 0; font-family: var(--display); font-size: clamp(36px, 5vw, 56px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.subir p { margin: 0; color: #D9EEE2; font-size: 18px; }
.subir .letra-pequena { font-size: 15px; color: #BFDCCB; }
.subir:not(.formulario) .enlace { color: var(--verde-claro); }
.zona-subida .boton { color: var(--tinta); font-size: 16px; }
.zona-subida { border: 2px dashed #7FBF9C; border-radius: 24px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; cursor: pointer; background: rgba(255,255,255,0.06); }
.zona-subida.encima { background: rgba(184,242,208,0.18); border-color: var(--verde-claro); }
.zona-subida.ocupada { opacity: 0.45; pointer-events: none; cursor: progress; }
.subir .espera { margin-top: 8px; }
.zona-subida b { font-size: 19px; }
.zona-subida span { color: #BFDCCB; font-size: 14px; }
.zona-subida .boton { min-height: 52px; }
.cargando { display: flex; align-items: center; gap: 14px; font-size: 17px; }
.girando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: giro 0.8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }
.aviso-cnmc { font-size: 14px; background: var(--aviso); color: var(--aviso-tinta); border-radius: 14px; padding: 10px 16px; }

pre.informe { white-space: pre-wrap; font-size: 12.5px; line-height: 1.45; background: var(--fondo); border-radius: 16px; padding: 16px; overflow-x: auto; margin: 10px 0 0; }
.pie { font-size: 13px; line-height: 1.6; color: var(--tinta-2); text-align: center; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .pagina { padding: 16px 16px 40px; gap: 16px; }
  .heroe, .subir { padding: 28px 22px; border-radius: 26px; gap: 24px; }
  .heroe p { font-size: 17px; }
  .cambio { padding: 20px; }
  .cifra { font-size: 28px; }
  .seccion, .factura { padding: 22px 18px; border-radius: 24px; }
  .seccion h2, .suelta h2 { font-size: 23px; }
  .tarjeta { padding: 22px; min-height: 0; border-radius: 24px; }
  .tarjeta .grande { font-size: 34px; }
  .total-grande { font-size: 44px; }
  .tarifa-actual { grid-column: auto; }
  .resumen { padding: 22px 18px; border-radius: 24px; }
  .resumen h2 { font-size: 21px; }
  .resumen ol { font-size: 15px; }
  .pestanas .pestana { padding: 14px 16px; border-radius: 20px; }
  .pestana .abrir { top: 14px; right: 16px; }
  .pestana .grande { font-size: 22px; }
  .pestana .texto { font-size: 13px; }
  .fila { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 14px 8px; }
  .fila.recomendada .importe b { font-size: 19px; }
  .fila .puesto { display: none; }
  .fila .ver { grid-column: 2 / -1; justify-self: start; padding: 6px 12px; }
  .logo { width: 34px; height: 34px; }
  .logo img { inset: 5px; width: 24px; height: 24px; }
  .fila .ver[data-vacio] { display: none; }
  .filtro { padding: 0 12px; font-size: 13px; gap: 6px; }
  .barra-tramos div { padding: 0 10px; font-size: 13px; }
  .buscar { max-width: none; }
  th, td { padding: 6px 5px; font-size: 13px; }
}

/* Tu factura, explicada; ¿qué puedo hacer yo?; bono social */
.explica { display: flex; flex-direction: column; gap: 4px; }
.explica-linea { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.explica-linea:last-child { border-bottom: none; }
.explica-linea .muestra { width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.explica-linea b { font-size: 17px; }
.explica-linea p { margin: 4px 0 0; color: #3F4F48; line-height: 1.55; }
.explica-linea p b { font-size: inherit; color: #10231C; }
.lista-cor { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.lista-cor li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #EEF3EF; }
.lista-cor li div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lista-cor li div span:not(.etiqueta) { color: #4B5A53; font-size: 14px; }
.lista-cor .boton { white-space: nowrap; }
@media (max-width: 560px) { .lista-cor li { grid-template-columns: minmax(0, 1fr) auto; } .lista-cor li div { grid-column: 1 / -1; } }
.diccionario { margin-top: 10px; border-radius: 18px; background: var(--fondo); padding: 4px 18px; }
.diccionario summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
.diccionario dl { margin: 0 0 14px; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 10px 18px; }
.diccionario dt { font-weight: 700; }
.diccionario dd { margin: 0; color: #3F4F48; line-height: 1.5; }
.consejos { margin: 0; padding: 0; list-style: none; counter-reset: consejo; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.consejos li { counter-increment: consejo; background: var(--fondo); border-radius: 20px; padding: 18px 20px; }
.consejos li::before { content: counter(consejo); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: var(--blanco); font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.consejos b { display: block; font-size: 17px; }
.consejos p { margin: 6px 0 0; color: #3F4F48; line-height: 1.5; }
.consejos a, .bono-social a, #bono-resultado a { color: var(--verde-texto); font-weight: 600; }
.campos.bono { margin: 6px 0 4px; }
.campos .ancho-2 { grid-column: span 2; }
.campos .opciones { grid-column: 1 / -1; flex-direction: column; gap: 4px; margin: 4px 0 0; font-weight: 500; }
.campos .opciones label { align-items: flex-start; min-height: 32px; }
.campos .opciones input { margin-top: 2px; flex: none; }
.campo select { min-height: 44px; border-radius: 12px; border: 1.5px solid #C9D6CE; padding: 0 10px; font: inherit; font-size: 16px; background: var(--blanco); }
#bono-resultado .pasos { margin-top: 12px; }
#bono-resultado .frase, #bono-resultado .aviso-botones, #bono-resultado .cargando, #bono-resultado .estado + .estado { margin-top: 12px; }
@media (max-width: 640px) {
  .diccionario dl { grid-template-columns: 1fr; gap: 2px; }
  .diccionario dd { margin-bottom: 10px; }
  .campos .ancho-2 { grid-column: 1 / -1; }
}

/* Aviso legal y privacidad */
.legal { gap: 12px; }
.legal h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.02em; }
.legal h2 { margin: 18px 0 0; font-family: var(--display); font-size: 24px; scroll-margin-top: 16px; }
.legal p, .legal li { line-height: 1.6; color: #2E3E37; margin: 0; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal .indice { display: flex; flex-wrap: wrap; gap: 8px; }
.legal .indice a { background: var(--fondo); border-radius: 999px; padding: 8px 14px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; }
mark.falta { background: var(--aviso); color: var(--aviso-tinta); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; }
.pie-legal[hidden] { display: none; }
.pie-legal a { color: var(--tinta-3); }

/* La X de cerrar en la esquina de las ventanas */
.aviso-caja.con-cerrar { position: relative; padding-right: 64px; }
.cerrar-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--fondo); color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.cerrar-x:hover { filter: brightness(0.95); }
.cerrar-x:focus-visible { outline: 2px solid var(--verde-medio); outline-offset: 2px; }

/* Cambiar de compañía y avisos */
.dudas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.dudas div { background: var(--fondo); border-radius: 18px; padding: 16px 18px; }
.dudas b { font-size: 16px; }
.dudas p { margin: 6px 0 0; color: #3F4F48; line-height: 1.5; font-size: 15px; }
#cambiar .pasos { margin-top: 6px; line-height: 1.55; }
#avisame .boton svg, .aviso-caja .boton svg { flex: none; }

/* Lo que pagas cada mes: el importe del mes más caro y del más barato, y los kWh bajo cada mes */
.grafica text.valor { font-weight: 700; fill: var(--tinta); }
.grafica text.sub { font-size: 11px; }

/* Qué hacer, dentro de una tarjeta (la de la potencia) */
.estado-tarjeta { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.estado-tarjeta svg { flex: none; }
.tarjeta.verdeclaro .estado-tarjeta, .tarjeta.verdeclaro .titulo, .tarjeta.verdeclaro .texto { color: var(--verde); }
.tarjeta.amarilla .estado-tarjeta { color: var(--amarillo-tinta); }

/* Carta de renovación */
.renovacion { background: var(--amarillo); color: var(--amarillo-tinta); border-radius: 32px; padding: 40px 48px; display: flex; flex-direction: column; gap: 16px; }
.renovacion.baja { background: var(--verde-claro); color: var(--verde); }
.renovacion h1 { margin: 0; font-family: var(--display); font-size: clamp(30px, 4.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--tinta); }
.renovacion h1 em { font-style: normal; }
.renovacion p { margin: 0; font-size: 18px; line-height: 1.5; }
.renovacion .plazo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,0.55); border-radius: 18px; padding: 14px 18px; font-size: 16px; line-height: 1.5; }
.renovacion .plazo > div { flex: 1 1 260px; }
.renovacion .plazo svg { flex: none; }
.renovacion .tabla { background: rgba(255,255,255,0.55); border-radius: 18px; padding: 6px 14px; }
.renovacion table { width: 100%; }
.renovacion .letra-pequena { color: var(--amarillo-tinta); font-size: 14px; }
.barra-carta { flex-wrap: wrap; }
@media (max-width: 640px) { .renovacion { padding: 28px 22px; border-radius: 26px; } .renovacion p { font-size: 16px; } }

/* ---------- Página reorganizada ---------- */
/* Franja de avisos (solo si hay algo urgente) */
.franja-avisos { background: var(--amarillo); color: var(--amarillo-tinta); border-radius: 20px; padding: 14px 18px 14px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.franja-avisos > svg { flex: none; }
.franja-avisos > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 4px; }
.franja-avisos p { margin: 0; font-size: 16px; line-height: 1.45; }
.franja-avisos .boton { min-height: 44px; padding: 0 20px; }
/* Plegables de «Ofertas» */
.plegables { gap: 0; padding-top: 8px; padding-bottom: 8px; }
.plegable { border-bottom: 1px solid var(--linea); }
.plegable:last-child { border-bottom: none; }
.plegable > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; min-height: 44px; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: "›"; font-size: 24px; transition: transform .15s; }
.plegable[open] > summary::after { transform: rotate(90deg); }
.plegable > summary b { font-size: 18px; display: block; }
.plegable > summary small { font-size: 14px; color: var(--tinta-3); }
.plegable[open] { padding-bottom: 18px; }
.plegable-dentro { margin-top: 6px; }
.plegable-dentro > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
/* Papeles: factura y carta, en una barra */
.barra-papeles { background: var(--blanco); border-radius: 24px; padding: 18px 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.barra-papeles > div { flex: 1 1 380px; display: flex; flex-direction: column; gap: 2px; }
.barra-papeles span { color: var(--tinta-3); font-size: 15px; }
.barra-papeles .boton { min-height: 48px; padding: 0 20px; font-size: 15px; }
/* Tu consumo: picos y fantasma, lado a lado */
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 20px; align-items: start; }
.dos-columnas > .seccion { min-width: 0; }
.nota-grafica { margin: 0; color: var(--tinta-3); line-height: 1.5; }
/* Ahorra más: consejos en 2 × 2 */
.consejos2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.consejo { background: var(--fondo); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.consejo.destacado { background: var(--amarillo); color: var(--amarillo-tinta); }
.consejo .etiqueta-consejo { font-size: 13px; font-weight: 700; color: var(--tinta-3); }
.consejo.destacado .etiqueta-consejo { color: var(--amarillo-titulo); }
.consejo b { font-size: 20px; color: var(--tinta); }
.consejo p { margin: 0; line-height: 1.5; color: #3F4F48; }
.consejo.destacado p { color: var(--amarillo-tinta); }
.consejo > a, .consejo > .enlace { margin-top: auto; font-weight: 700; align-self: flex-start; }
.consejo.destacado > .enlace { color: var(--amarillo-tinta); }
/* Bono social: preguntas y respuesta, lado a lado */
.bono-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.bono-columnas .campos.bono { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bono-vacio { margin: 0; background: var(--fondo); border-radius: 18px; padding: 20px; color: var(--tinta-3); line-height: 1.5; }
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .consejos2, .bono-columnas { grid-template-columns: 1fr; }
}
.consejos2 > .consejo:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Portada: garantías, ejemplo de resultado, pasos y preguntas */
.garantias { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.garantias li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--verde-claro); }
.garantias svg { width: 18px; height: 18px; }
.portada .cambio .boton { text-align: center; }
.ejemplo { border: 1.5px dashed rgba(184, 242, 208, 0.5); border-radius: 20px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.ejemplo-etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #BFDCCB; }
.ejemplo-titulo { font-family: var(--display); font-size: 26px; font-weight: 800; }
.ejemplo-titulo em { font-style: normal; color: var(--verde-claro); }
.ejemplo-precios { font-size: 16px; color: #D9EEE2; }
.ejemplo-precios s { color: #9FC2AF; }
.ejemplo-nota { font-size: 13px; color: #BFDCCB; line-height: 1.45; }
.pasos-portada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.paso { display: flex; gap: 14px; align-items: flex-start; }
.paso .numero { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--amarillo); display: grid; place-items: center; font-weight: 800; }
.paso b { display: block; font-size: 17px; margin-bottom: 4px; }
.paso span:not(.numero) { font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
#preguntas .frase { margin: 0; max-width: none; }
@media (max-width: 760px) { .pasos-portada { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Portada: datos con su fuente, en dibujo */
.datos-portada { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dato-visual { background: var(--blanco); border-radius: 24px; padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 6px; align-items: center; }
.dato-visual > :first-child { grid-row: 1 / 3; }
.dato-visual p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--tinta-2); }
.dato-visual p b { color: var(--tinta); font-size: 18px; }
.dato-visual a { font-size: 13px; color: var(--tinta-3); align-self: start; }
.casitas { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; }
.casitas .si { color: var(--amarillo); }
.casitas .no { color: #DCE5DF; }
.mitad { width: 104px; height: 104px; }
.mitad text { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--tinta); }
.dato-visual > .contador-filas { grid-row: auto; grid-column: 1 / -1; display: grid; gap: 14px; }
.contador-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; }
.contador-fila + .contador-fila { border-top: 1px solid var(--linea, #e6e6e6); padding-top: 14px; }
.contador-fila .cifra-dato { min-width: 3.2ch; text-align: right; }
@media (max-width: 520px) { .contador-fila { grid-template-columns: minmax(0, 1fr); } .contador-fila .cifra-dato { text-align: left; } }
.cifra-dato { font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--verde-texto); }
@media (max-width: 520px) { .dato-visual { grid-template-columns: minmax(0, 1fr); } .dato-visual > :first-child { grid-row: auto; } }
#preguntas .mas { margin-top: 12px; }
/* ¿Te ha sido útil? */
.opinion-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.opinion-fila b { font-size: 18px; margin-right: 8px; }
.opinion-texto { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
@media (max-width: 520px) {
  .opinion-fila b { flex: 1 0 100%; margin-right: 0; }
  .opinion-fila > :not(b) { flex: 1 1 0; justify-content: center; min-height: 48px; }
}
.opinion-texto textarea { font: inherit; font-size: 16px; border-radius: 14px; border: 1.5px solid #C9D6CE; padding: 12px; resize: vertical; }
.datos-portada > div[hidden] { display: none; }

/* Los precios de hoy no son para siempre, y por qué el PVPC no es la recomendada */
.heroe p.aviso-precios { font-size: 13.5px; line-height: 1.45; color: #A9CDB9; }
.aviso-caja .aviso-precios { margin: 0; font-size: 13px; line-height: 1.45; color: #5C6B64; }
.resumen-nota { margin: 0; font-size: 14px; line-height: 1.5; color: #3F4F48; background: #F3F6F4; border-radius: 12px; padding: 10px 12px; }
.fila .por-que { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: #5C6B64; }
@media (max-width: 700px) { .heroe p.aviso-precios { font-size: 13px; } }

/* «Tu contrato»: las tres tarjetas con la misma pauta (dato, qué hacer, una línea) y la tarifa en euros por partes */
.tarjetas .ficha .ficha-pie { margin-top: auto; padding-top: 6px; }
.ficha-boton { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.ficha-boton .boton { padding: 10px 16px; font-size: 14px; }
.tarifa-actual { position: relative; gap: 6px; }
.tarifa-actual .titulo { padding-right: 140px; }
.barra-tarifa { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 10px; }
.p-pot { background: var(--serie-1); }
.p-ener { background: var(--serie-2); }
.p-otros { background: #C9D6CE; }
.p-bono { background: var(--amarillo); }
.partes-tarifa { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 10px; }
.partes-tarifa div { display: flex; flex-direction: column; gap: 2px; }
.partes-tarifa span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-3); }
.partes-tarifa i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.partes-tarifa b { font-size: 19px; }
.partes-tarifa small { font-size: 12.5px; line-height: 1.35; color: var(--tinta-3); }
.precios-exactos summary { position: absolute; top: 22px; right: 24px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--verde-texto); text-decoration: underline; list-style: none; }
.precios-exactos summary::-webkit-details-marker { display: none; }
.precios-exactos summary::after { content: " ▾"; }
.precios-exactos[open] summary::after { content: " ▴"; }
.precios-exactos > div { margin-top: 12px; padding: 12px 14px; background: var(--fondo); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.precios-exactos p { margin: 0; }
@media (max-width: 640px) {
  .partes-tarifa { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .partes-tarifa div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
  .partes-tarifa small { grid-column: 1 / -1; }
  .partes-tarifa b { grid-row: 1; grid-column: 2; font-size: 17px; }
}

/* Bloque verde: la cuenta atrás del fin de contrato y la tarjeta que pregunta por la carta */
.cuenta { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: var(--amarillo); color: var(--tinta); font-weight: 800; font-size: 15px; border-radius: 999px; padding: 6px 14px; }
.cambio-precios.riesgo { align-items: start; }
.cambio-precios.riesgo > svg { margin-top: 26px; }
.cifra.rojo { color: #A3341A; }
.cifra.gris { color: var(--tinta-3); }
.chip-dif { font-size: 13px; font-weight: 700; color: #8A3B12; background: #FDE8DC; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.raya { border: 0; border-top: 1px solid var(--linea); margin: 0; width: 100%; }
.pregunta-carta { font-size: 16.5px; line-height: 1.35; }
.dos-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dos-botones .boton { display: flex; justify-content: center; align-items: center; gap: 6px; text-align: center; padding: 13px 10px; font-size: 15px; }
.cambio .condiciones .enlace { font: inherit; color: var(--verde-texto); font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 640px) {
  .dos-botones { grid-template-columns: minmax(0, 1fr); }
  .cambio-precios.riesgo > svg { margin-top: 22px; }
}
/* Dos cifras frente a frente en el bloque verde: a la misma altura y grandes */
.comparar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
.comparar .etiqueta { align-self: end; }
.comparar .c1 { grid-column: 1; }
.comparar .c2 { grid-column: 2; grid-row: 2; display: flex; }
.comparar .c3 { grid-column: 3; justify-self: end; text-align: right; }
.comparar .etiqueta.c1, .comparar .chip-dif { grid-row: 1; align-self: center; }
.comparar .cifra { grid-row: 2; font-size: 46px; line-height: 1.05; letter-spacing: -0.02em; }
.comparar .debajo { grid-row: 3; align-self: start; display: flex; flex-direction: column; align-items: flex-end; margin-top: 4px; line-height: 1.3; }
.comparar .debajo b { font-size: 14px; color: var(--tinta); }
.comparar .debajo small { font-size: 12px; color: var(--tinta-3); }
.aviso-caja p { text-wrap: wrap; }
@media (max-width: 640px) { .comparar .cifra { font-size: 34px; } }
.otras-cor summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--verde-texto); text-decoration: underline; margin: 4px 0 8px; }

/* El gas: lo mismo que la luz, en azul */
:root { --gas: #0E2F4F; --gas-claro: #BFE0FF; --gas-texto: #DCEBFA; --gas-barra: #1F5FA8; }
.heroe.gas { background: var(--gas); }
.heroe.gas h1 em { color: var(--gas-claro); }
.heroe.gas p { color: var(--gas-texto); }
.heroe.gas p.aviso-precios { color: #A9C6E4; }
.cuenta.gas { background: #DDEBFF; color: #173A6B; }
.pestanas.gas .pestana[aria-selected="true"] { background: var(--gas); border-color: var(--gas); box-shadow: 0 8px 24px rgba(14,47,79,0.2); }
.pestanas.gas .pestana[aria-selected="true"] .titulo { color: var(--gas-claro); }
.pestanas.gas .pestana[aria-selected="true"] .texto { color: var(--gas-texto); }
.pestanas.gas .pestana[aria-selected="true"]::after { background: var(--gas); }
.chip-dif.bien { color: var(--verde); background: #DDF5E7; }
.barras-gas { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 8px; }
.barras-gas div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--tinta-3); min-width: 0; }
.barras-gas .kwh { font-size: 11px; color: var(--tinta-3); }
.barras-gas i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: var(--gas-barra); }
.barras-gas i.est, .muestra.rayada { background: repeating-linear-gradient(45deg, #C9DCF2, #C9DCF2 4px, #E6EFFA 4px, #E6EFFA 8px); }
.lista-comprobacion { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.6; }
@media (max-width: 640px) { .barras-gas { gap: 3px; } .barras-gas .kwh { display: none; } }

/* Portada: los logos de las compañías que comparamos */
.marcas { align-items: center; text-align: center; gap: 18px; padding: 28px 32px; }
.marcas[hidden] { display: none; }
.marcas h2 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.2; }
.marcas h2 em { font-style: normal; color: var(--verde-texto); }
.fila-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; }
.fila-logos figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.fila-logos .logo { width: 56px; height: 56px; border-radius: 16px; font-size: 18px; }
.fila-logos .logo img { inset: 8px; width: 40px; height: 40px; border-radius: 10px; }
.fila-logos figcaption { font-size: 12.5px; color: var(--tinta-3); line-height: 1.2; }
.fila-logos .mas-logos { width: 56px; height: 56px; border-radius: 16px; border: 1.5px dashed var(--linea); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tinta-2); }
@media (max-width: 520px) {
  .marcas { padding: 24px 18px; }
  .marcas h2 { font-size: 22px; }
  .fila-logos { gap: 14px 10px; }
  .fila-logos figure { width: 64px; }
  .fila-logos .logo, .fila-logos .mas-logos { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }
  .fila-logos .logo img { inset: 7px; width: 34px; height: 34px; }
  .fila-logos figcaption { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .fila-logos .logo { transition: none; } }

/* Compartir el resultado */
.compartir { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.compartir-texto { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.compartir-texto b, .compartir-opciones b { font-size: 18px; }
.compartir-texto span, .compartir-opciones span { color: var(--tinta-2); }
.compartir-imagen { width: 220px; height: 220px; border-radius: 18px; box-shadow: 0 6px 20px rgba(11, 59, 46, .18); }
.compartir-opciones { display: flex; flex-direction: column; gap: 8px; flex: 1 1 320px; }
.compartir-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 520px) { .compartir .boton { width: 100%; } .compartir-imagen { width: 100%; height: auto; } }

/* Fin de contrato: lo que te puede subir (riesgo, aún no gasto: ámbar) */
.cifra.ambar { color: #B4600B; }
.chip-dif.ambar { color: #7A4A06; background: #FCEFD3; }
.comparar .etiqueta.c3 { grid-row: 1; justify-self: end; text-align: right; }
.comparar .debajo .chip-dif { margin-bottom: 4px; }
.comparar.centrado .c1, .comparar.centrado .c3 { justify-self: center; text-align: center; }
.comparar.centrado .debajo { align-items: center; }
@media (max-width: 520px) { .comparar.centrado .debajo .chip-dif { font-size: 12px; white-space: normal; text-align: center; } }

/* Bono social: deshacer el cálculo con bono, y el detalle del descuento */
.con-bono { align-self: center; display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 210, 90, .16); color: #FFE7A3; border: 1px solid rgba(255, 210, 90, .45); border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 600; }
.con-bono .enlace { color: #FFD25A; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.aviso-botones .nota-boton { align-self: center; }

/* Resultado del comprobador del bono: cabecera, cifras y detalle */
.bono-ok { background: var(--verde-claro); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bono-ok-cabeza { display: flex; gap: 10px; align-items: flex-start; color: var(--verde); }
.bono-ok-cabeza > div { display: flex; flex-direction: column; gap: 2px; }
.bono-ok-cabeza b { font-size: 17px; }
.bono-ok-cabeza span { color: var(--tinta-2); font-size: 14px; }
.bono-cifras { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; background: var(--blanco); border-radius: 12px; padding: 12px 14px; }
.bono-cifras > div { display: flex; flex-direction: column; }
.bono-cifras .cifra { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; }
.bono-flecha { font-size: 22px; color: var(--tinta-3); padding-bottom: 4px; }
.bono-cifras .chip-dif { margin-left: auto; align-self: center; }
.bono-detalle { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
@media (max-width: 520px) {
  .bono-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .bono-flecha { display: none; }
  .bono-cifras .cifra { font-size: 26px; }
  .bono-cifras .chip-dif { grid-column: 1 / -1; margin-left: 0; justify-self: start; }
}
.heroe h1.largo { font-size: clamp(34px, 4.2vw, 48px); }
.heroe-lado .con-bono { margin-top: -4px; }

/* Antes de contratar: los precios de la oferta frente a los tuyos */
.aviso-caja table.comparar-precios th { font-size: 12px; color: var(--tinta-3); }
.aviso-caja table.comparar-precios td { padding: 8px; font-variant-numeric: tabular-nums; }
.aviso-caja table.comparar-precios td.tuyo { color: var(--tinta-3); font-size: 14px; }
.aviso-caja table.comparar-precios td:last-child { font-size: 14px; }
.chip-dif.igual { color: var(--tinta-2); background: var(--fondo); }
.resumen-precios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resumen-precios div { background: var(--fondo); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.resumen-precios span { font-size: 13px; color: var(--tinta-3); }
.resumen-precios b { font-family: var(--display); font-size: 20px; font-weight: 800; white-space: nowrap; }
.resumen-precios b.verde { color: var(--verde-texto); }
.resumen-precios b.gris { color: var(--tinta-3); }
.resumen-precios b.ambar { color: #B4600B; }
@media (max-width: 520px) {
  .resumen-precios b { font-size: 17px; }
  .aviso-caja table.comparar-precios td, .aviso-caja table.comparar-precios th { padding: 6px 4px; }
}