/* Las páginas para buscadores (seo.py): compañías, precio de la luz hoy, metodología y quiénes somos. Usan estilo.css
   y esto encima. */
.contenido-seo { display: flex; flex-direction: column; gap: 20px; }
.contenido-seo h1 { margin: 0; font-family: var(--display); font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.contenido-seo .entradilla { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tinta-2); }
.contenido-seo p { margin: 0; }
.texto-largo h2 { margin-top: 12px; font-size: 24px; }
.texto-largo ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.migas { font-size: 14px; color: var(--tinta-3); }
.migas a { color: var(--tinta-3); }
.lista-enlaces { line-height: 2; }
/* La invitación a subir la factura: la pregunta y el botón en una fila (en el móvil, el botón debajo), con el muñeco
   asomando por encima del botón */
.llamada h2 { margin: 0; flex: 1; font-family: var(--display); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--blanco); text-wrap: pretty; }
.llamada .heroe-texto { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
.llamada .heroe-accion { display: flex; flex: none; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding-top: 22px; }
.llamada .boton { position: relative; overflow: visible; }
.llamada-muneco { position: absolute; top: -30px; right: 18px; height: 46px; width: auto; transform: rotate(8deg); pointer-events: none; }
.llamada .boton { padding: 0 28px; }
.contenido-seo .tabla { overflow-x: auto; }
.contenido-seo table { width: 100%; border-collapse: collapse; font-size: 15px; }
.contenido-seo th { text-align: left; font-size: 13px; font-weight: 600; color: var(--tinta-3); padding: 8px 10px; border-bottom: 2px solid var(--linea); vertical-align: bottom; }
.contenido-seo td { padding: 12px 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.contenido-seo td small { display: block; color: var(--tinta-3); font-size: 12px; }
.contenido-seo th.der, .contenido-seo td.der { text-align: right; font-variant-numeric: tabular-nums; }
.contenido-seo td.num { font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.contenido-seo .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.contenido-seo .chip { font-size: 12px; background: var(--fondo); border-radius: 999px; padding: 2px 10px; color: var(--tinta-2); }
/* El precio de la luz hoy: hoy y mañana, tres consejos, la gráfica de columnas y los precios plegados */
.precio-dia { --barata: #2F8F5B; --normal: #F2C94C; --cara: #C2452D; }
.pestanas-dia { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--fondo); }
.pestanas-dia button { border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta-2); padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.pestanas-dia button[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 4px rgba(16, 35, 28, 0.1); }
.pestanas-dia button:disabled { cursor: default; opacity: 0.7; }
.pestanas-dia small { font-weight: 500; color: var(--tinta-3); }
.dia-pvpc { display: flex; flex-direction: column; gap: 18px; }
.dia-pvpc[hidden] { display: none; }
.consejos-dia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fr { border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.fr.b { background: #E7F5EC; }
.fr.m { background: #FFF6DA; }
.fr.c { background: #FBE9E4; }
.fr small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-3); }
.fr b { font-family: var(--display); font-size: 22px; font-weight: 800; }
.fr span { font-size: 14px; color: var(--tinta-2); }
.grafica-dia { display: flex; flex-direction: column; gap: 6px; }
.columnas { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 220px; padding-top: 28px; }
.columnas .col { flex: 1; min-width: 0; border-radius: 6px 6px 3px 3px; }
.col.b, .leyenda-dia i.b, .rejilla-dia i.b { background: var(--barata); }
.col.m, .leyenda-dia i.m, .rejilla-dia i.m { background: var(--normal); }
.col.c, .leyenda-dia i.c, .rejilla-dia i.c { background: var(--cara); }
.columnas .col.ahora { position: relative; outline: 3px solid var(--tinta); outline-offset: 2px; }
.columnas .col.ahora::after { content: "Ahora"; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; background: var(--tinta); color: var(--blanco); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.columnas .col.pasada { opacity: 0.35; }
.franja-buena { position: absolute; bottom: -6px; height: calc(100% - 22px); border: 2px dashed var(--barata); border-radius: 10px; background: rgba(47, 143, 91, 0.06); pointer-events: none; }
.ejes { display: grid; gap: 4px; font-size: 11px; color: var(--tinta-3); text-align: center; }
.leyenda-dia { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--tinta-2); align-items: center; }
.leyenda-dia i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda-dia .media { color: var(--tinta-3); }
.plega-dia { border-top: 1px solid var(--linea); }
.plega-dia summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; font-weight: 700; font-size: 15px; }
.plega-dia summary::-webkit-details-marker { display: none; }
.plega-dia summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--tinta-2); }
.plega-dia[open] summary::after { content: "–"; }
.rejilla-dia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; font-size: 14px; margin-bottom: 10px; }
.rejilla-dia div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: var(--fondo); }
.rejilla-dia div.ahora { outline: 2px solid var(--tinta); background: var(--blanco); }
.rejilla-dia i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.rejilla-dia b { font-variant-numeric: tabular-nums; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pie-enlaces { margin-top: 4px; }
@media (max-width: 640px) {
  .consejos-dia { grid-template-columns: 1fr; gap: 10px; }
  .columnas { gap: 2px; height: 180px; }
  .ejes { gap: 2px; }
  .ejes span:nth-child(even) { visibility: hidden; }
  .rejilla-dia { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .contenido-seo .seccion { padding: 22px 18px; }
  .llamada .heroe-texto { flex-direction: column; align-items: stretch; gap: 4px; }
  .llamada .heroe-accion { flex: 1 1 100%; }
  .llamada .heroe-accion .boton { width: 100%; }
  .contenido-seo table { font-size: 14px; }
}

/* Compañías de luz: el resumen, la invitación a subir la factura y el ranking con barras */
.resumen-companias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.resumen-companias > div { background: var(--fondo); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.resumen-companias small { font-size: 12px; font-weight: 700; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.04em; }
.resumen-companias b { font-family: var(--display); font-size: 24px; font-weight: 800; }
.resumen-companias span { font-size: 13px; color: var(--tinta-2); }
.barra-tu-factura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; background: var(--fondo); border-radius: 18px; padding: 12px 14px 12px 18px; font-size: 15px; color: var(--tinta-2); }
.barra-tu-factura b { color: var(--tinta); }
.barra-tu-factura .boton { min-height: 44px; padding: 0 18px; font-size: 15px; }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fila-rk { display: grid; grid-template-columns: 28px 40px minmax(0, 1.3fr) minmax(0, 1fr) 92px; align-items: center; gap: 14px; padding: 12px 8px; border-bottom: 1px solid var(--linea); }
.fila-rk.primera { background: #F1F8F3; border-radius: 16px; border-bottom-color: transparent; }
.fila-rk .puesto { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--tinta-3); text-align: center; }
.rk-nombre { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-nombre a { color: var(--tinta); font-weight: 700; font-size: 16px; text-decoration: none; }
.rk-nombre a:hover { text-decoration: underline; }
.rk-oferta { font-size: 13px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-nombre .chips { margin-top: 2px; }
.contenido-seo .chip.top { background: #DDF3E6; color: #1E6B43; font-weight: 700; }
.contenido-seo .chip.pvpc { background: #E4F1FB; color: #1D4F7A; font-weight: 700; }
.rk-barra { position: relative; height: 12px; border-radius: 6px; background: #EEF3EF; }
.rk-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.rk-barra i.t1 { background: #2F8F5B; }
.rk-barra i.t2 { background: #8CC5A3; }
.rk-barra i.t3 { background: #C9D8CF; }
.linea-pvpc { position: absolute; top: -6px; bottom: -6px; border-left: 2px dashed #6B7A73; }
.rk-precio { display: flex; flex-direction: column; text-align: right; }
.resumen-companias > div.destacada { background: var(--verde); color: var(--blanco); }
.resumen-companias > div.destacada small, .resumen-companias > div.destacada span { color: #CFE9DA; }
.resumen-companias > div.destacada b { color: var(--verde-claro); }
.logo-tur { background: var(--verde); color: var(--blanco); font-size: 11px; font-weight: 800; }
.rk-tur { font-size: 16px; }
.como-tur summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--tinta); text-decoration: underline; margin-top: 4px; }
.como-tur p { margin: 6px 0; font-size: 14px; }
.como-tur ul { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.como-tur ul span { color: var(--tinta-3); }
.rk-precio b { font-family: var(--display); font-size: 20px; font-weight: 800; white-space: nowrap; }
.rk-precio small { font-size: 12px; color: var(--tinta-3); }

@media (max-width: 640px) {
  .resumen-companias { grid-template-columns: 1fr 1fr; gap: 10px; }
  .resumen-companias > div:first-child { grid-column: 1 / -1; }
  .resumen-companias b { font-size: 20px; }
  .barra-tu-factura .boton { width: 100%; }
  .fila-rk { grid-template-columns: 22px 36px minmax(0, 1fr) 76px; gap: 10px; padding: 12px 4px; }
  .fila-rk .rk-barra { grid-column: 3 / 5; grid-row: 2; }
  .fila-rk .logo { width: 36px; height: 36px; }
}

/* ¿Cuánto cuesta cada aparato? */
.aparatos-elige { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.aparatos-elige button { font: inherit; border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 18px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: pointer; color: var(--tinta); }
.aparatos-elige button b { font-size: 14px; }
.aparatos-elige button small { font-size: 12px; color: var(--tinta-3); }
.aparatos-elige .ico { font-size: 30px; line-height: 1.1; }
.aparatos-elige button[aria-checked="true"] { border-color: var(--tinta); background: #F1F8F3; box-shadow: inset 0 0 0 1px var(--tinta); }
.calc-aparatos .fr b { font-size: 32px; }
.mini-dia { display: flex; flex-direction: column; gap: 4px; }
.mini-columnas { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.mini-columnas i { flex: 1; border-radius: 3px 3px 1px 1px; }
.mini-columnas i.b { background: #2F8F5B; }
.mini-columnas i.m { background: #F2C94C; }
.mini-columnas i.c { background: #C2452D; }
.mini-columnas i.ahora { outline: 2px solid var(--tinta); outline-offset: 1px; }
.mini-columnas i.pasada { opacity: 0.35; }
.mini-ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-3); }
.consejo-aparato { margin: 0; background: var(--fondo); border-radius: 16px; padding: 14px 16px; font-size: 15px; }
@media (max-width: 640px) {
  .aparatos-elige { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .aparatos-elige button { padding: 12px 6px; }
}

/* Cómo leer la factura de gas */
.formula-gas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; background: #FFF6DA; border-radius: 16px; padding: 14px 16px; }
.paso-formula { background: var(--blanco); border-radius: 10px; padding: 6px 10px; font-weight: 700; text-align: center; }
.paso-formula small { display: block; font-weight: 500; font-size: 11px; color: var(--tinta-3); }
.factura-gas-ej { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.papel { border: 1.5px solid var(--linea); border-radius: 14px; padding: 18px; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; background: #FCFCFA; }
.papel-titulo { font: 800 14px var(--display, sans-serif); margin-bottom: 8px; }
.linea-papel { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 6px; }
.linea-papel > span:last-child:not(:first-child) { white-space: nowrap; }
.linea-papel.marcada { background: rgba(255, 210, 90, 0.35); }
.linea-papel.total { font-weight: 800; border-top: 1px dashed #C9D2CC; margin-top: 6px; padding-top: 6px; }
.num-papel { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); color: var(--blanco); font: 800 11px/1 Inter, sans-serif; margin-right: 8px; flex: none; }
.notas-papel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.notas-papel li { display: flex; gap: 10px; align-items: flex-start; }
.notas-papel b { display: block; font-size: 15px; }
.notas-papel span:not(.num-papel) { font-size: 14px; color: var(--tinta-2); }
.otros-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.otros-datos div { background: var(--fondo); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.otros-datos b { font-size: 15px; }
.otros-datos span { font-size: 14px; color: var(--tinta-2); }
@media (max-width: 640px) { .factura-gas-ej { grid-template-columns: 1fr; } .papel { font-size: 12px; padding: 14px 12px; } }

/* La calculadora de potencia */
.calculadora { display: flex; flex-direction: column; gap: 14px; }
.aparatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.aparato { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--linea); border-radius: 14px; cursor: pointer; }
.aparato:has(input:checked) { border-color: var(--verde-medio); background: #EAF7EF; }
.aparato input { width: 20px; height: 20px; accent-color: var(--verde-medio); flex: none; }
.aparato span { flex: 1; font-size: 15px; }
.aparato small { color: var(--tinta-3); font-size: 13px; white-space: nowrap; }
.resultado-potencia { display: block; background: var(--verde); color: var(--blanco); border-radius: 18px; padding: 16px 20px; font-size: 17px; line-height: 1.45; }
.resultado-potencia b { color: var(--verde-claro); }

/* «Añadir a la pantalla de inicio» (static/instalar.js) */
.aviso-instalar { position: fixed; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 12px; align-items: flex-start; background: var(--verde); color: var(--blanco); border-radius: 20px; padding: 14px; box-shadow: 0 10px 30px rgba(16, 35, 28, 0.3); }
.aviso-instalar img { width: 44px; height: 44px; border-radius: 12px; background: var(--blanco); padding: 4px; flex: none; }
.aviso-instalar b { display: block; font-size: 15px; }
.aviso-instalar span { font-size: 13px; color: #CFE9DA; }
.aviso-instalar-botones { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.aviso-instalar .boton { min-height: 40px; padding: 0 16px; font-size: 14px; }
.aviso-instalar .enlace { color: #CFE9DA; font-size: 14px; background: none; border: none; font-weight: 600; }
.hoja-instalar { position: fixed; inset: 0; z-index: 40; background: rgba(16, 35, 28, 0.4); display: flex; align-items: flex-end; }
.hoja-instalar-caja { background: var(--blanco); width: 100%; border-radius: 22px 22px 0 0; padding: 20px 18px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.hoja-instalar-caja > b { font-family: var(--display); font-size: 20px; }
.hoja-instalar-caja ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.ico-compartir { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--fondo); }