/* ==========================================================
   CASA KILOVATIO
   Lenguaje visual: la etiqueta energética europea (franjas A–G)
   y el contador de la luz (ruedas de cifras, lectura en mono).
   ========================================================== */

@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --papel:#ECEEE7;
  --papel-2:#E2E5DC;
  --hoja:#F7F8F3;
  --tinta:#0F1719;
  --tinta-2:#46514F;
  --tinta-3:#5B6663;
  --linea:#C6CCC2;
  --linea-2:#D7DCD2;
  --voltio:#DCFF2E;          /* acento eléctrico */
  --voltio-tinta:#0F1719;
  --contador:#121A1C;        /* fondo de las ruedas */
  --contador-cifra:#F2F4EE;
  --rojo-contador:#E1352B;

  /* Franjas de la etiqueta energética */
  --e-a:#00954C; --e-b:#3FAE3F; --e-c:#A9CF2B; --e-d:#F4DE1B;
  --e-e:#F7B11C; --e-f:#EE6A1F; --e-g:#DD2A22;

  --f-ancha:"Archivo",system-ui,sans-serif;
  --f-mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --max:none;
  --gutter:clamp(16px,4vw,72px);
  --radio:4px;
  --sombra:0 1px 0 var(--linea), 0 18px 40px -28px rgba(15,23,25,.35);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#0D1315; --papel-2:#141C1E; --hoja:#111A1C;
    --tinta:#E8ECE5; --tinta-2:#A9B3AE; --tinta-3:#7C8783;
    --linea:#27322F; --linea-2:#1E2826;
    --contador:#050909; --contador-cifra:#EEF1EA;
    --sombra:0 1px 0 var(--linea), 0 18px 40px -28px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papel:#0D1315; --papel-2:#141C1E; --hoja:#111A1C;
  --tinta:#E8ECE5; --tinta-2:#A9B3AE; --tinta-3:#7C8783;
  --linea:#27322F; --linea-2:#1E2826;
  --contador:#050909; --contador-cifra:#EEF1EA;
  --sombra:0 1px 0 var(--linea), 0 18px 40px -28px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 1.0625rem/1.65 var(--f-ancha);font-stretch:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--e-a)}
::selection{background:var(--voltio);color:var(--voltio-tinta)}
:focus-visible{outline:2px solid var(--e-a);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit}
.salto{position:absolute;left:-9999px;top:0;background:var(--voltio);color:#000;padding:.6rem 1rem;z-index:100}
.salto:focus{left:1rem;top:1rem}
.envoltorio{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono);font-feature-settings:"zero" 1}
/* Las páginas de artículo van en contenedor centrado; el resto de la web, a ancho completo */
.envoltorio--articulo{max-width:1320px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Rótulo: etiqueta pequeña en mono con número de sección */
.rotulo{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
}
.rotulo b{
  display:inline-grid;place-items:center;min-width:1.9rem;height:1.25rem;padding:0 .35rem;
  background:var(--tinta);color:var(--papel);font-weight:500;letter-spacing:.04em;
  clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);padding-right:.7rem;
}

/* Titulares: Archivo ancha, la seña de identidad tipográfica */
.titular{
  font-family:var(--f-ancha);font-stretch:125%;font-weight:800;
  line-height:.98;letter-spacing:-.025em;margin:0;text-wrap:balance;
}
.titular--xl{font-size:clamp(2.3rem,5.4vw,4.9rem)}
.titular--l{font-size:clamp(1.9rem,4.2vw,3.4rem)}
.titular--m{font-size:clamp(1.45rem,2.6vw,2.1rem);line-height:1.05}
.titular em{font-style:italic;font-weight:300;font-stretch:100%;letter-spacing:-.01em}
.subrayado{
  background:linear-gradient(transparent 62%,var(--voltio) 62%,var(--voltio) 92%,transparent 92%);
  padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
:root[data-theme="dark"] .subrayado{color:var(--voltio);background:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .subrayado{color:var(--voltio);background:none}}

/* ---------- Botones ---------- */
.boton{
  --bg:var(--tinta);--fg:var(--papel);
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.95rem 1.3rem .95rem 1.2rem;border:0;border-radius:var(--radio);
  background:var(--bg);color:var(--fg);text-decoration:none;cursor:pointer;
  font:700 .95rem/1 var(--f-ancha);font-stretch:112%;letter-spacing:.005em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.boton:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.boton svg{width:1.05em;height:1.05em;transition:transform .25s ease}
.boton:hover svg{transform:translateX(3px)}
.boton--voltio{--bg:var(--voltio);--fg:var(--voltio-tinta)}
.boton--linea{--bg:transparent;--fg:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--tinta)}
.enlace-flecha{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-stretch:112%;
  text-decoration:none;border-bottom:2px solid var(--tinta);padding-bottom:.2rem;
}
.enlace-flecha:hover{border-color:var(--e-a)}

/* ==========================================================
   CABECERA
   ========================================================== */
.cabecera{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--linea);
}
.cabecera__fila{display:flex;align-items:center;gap:1.5rem;height:68px}
.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.marca svg{width:38px;height:28px}
.marca__texto{font:800 1.05rem/1 var(--f-ancha);font-stretch:125%;letter-spacing:-.02em}
.marca__texto span{font-weight:300;font-style:italic;font-stretch:100%}
.nav{display:flex;gap:.25rem;margin-left:auto}
.nav a{
  padding:.55rem .8rem;border-radius:var(--radio);text-decoration:none;
  font:600 .92rem/1 var(--f-ancha);font-stretch:108%;color:var(--tinta-2);white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinta);background:var(--papel-2)}

/* Chip con el precio de ahora: un trocito de etiqueta energética en la cabecera */
.chip-ahora{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;
  padding:.35rem .4rem .35rem .75rem;border:1px solid var(--linea);border-radius:999px;
  font:500 .78rem/1 var(--f-mono);white-space:nowrap;background:var(--hoja);
}
.chip-ahora__pulso{width:7px;height:7px;border-radius:50%;background:var(--e-a);box-shadow:0 0 0 0 var(--e-a);animation:pulso 2.4s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--e-a) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chip-ahora__letra{
  display:grid;place-items:center;height:1.45rem;min-width:1.9rem;padding:0 .55rem 0 .4rem;
  color:#fff;font-weight:700;font-family:var(--f-ancha);font-stretch:125%;
  clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%);border-radius:3px 0 0 3px;
}
.tema{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea);background:transparent;cursor:pointer;flex-shrink:0;
}
.tema svg{width:18px;height:18px}
.tema .luna{display:none}
:root[data-theme="dark"] .tema .sol{display:none}
:root[data-theme="dark"] .tema .luna{display:block}
.menu-boton{display:none}

@media (max-width:1100px){
  .nav{
    position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;padding:.5rem var(--gutter) 1.5rem;
    background:var(--papel);border-bottom:1px solid var(--linea);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.2s ease;
  }
  .nav.abierto{transform:none;opacity:1;visibility:visible}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--linea-2);font-size:1.15rem;border-radius:0}
  .nav a:hover{background:none}
  .menu-boton{
    display:grid;place-items:center;width:40px;height:40px;margin-left:auto;
    border:1px solid var(--linea);border-radius:50%;background:none;cursor:pointer;
  }
  .chip-ahora{margin-left:0}
}
@media (max-width:520px){
  .cabecera__fila{gap:.55rem}
  .chip-ahora__txt,.chip-ahora__u,.chip-ahora__pulso{display:none}
  .chip-ahora{padding:.3rem .3rem .3rem .6rem;gap:.4rem}
  .marca__texto{font-size:.9rem}
  .marca svg{width:30px;height:22px}
  .menu-boton,.tema{width:36px;height:36px}
}
@media (max-width:360px){.marca__texto{display:none}}

/* ==========================================================
   PORTADA: titular vivo + tira de 24 horas
   ========================================================== */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);position:relative}
.hero__rejilla{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero__entrada{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--tinta-2);max-width:36rem;margin:1.6rem 0 2rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.8rem}
@media (max-width:900px){.hero__rejilla{grid-template-columns:1fr}}

/* Lectura del contador */
.lectura{
  background:var(--hoja);border:1px solid var(--linea);border-radius:10px;padding:1.4rem 1.4rem 1.2rem;
  box-shadow:var(--sombra);position:relative;
}
.lectura__cab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.lectura__cab .rotulo{margin:0}
.lectura__hora{font:500 .8rem/1 var(--f-mono);color:var(--tinta-3)}
.ruedas{display:flex;align-items:stretch;gap:3px;background:var(--contador);padding:7px;border-radius:6px;width:max-content;max-width:100%}
.rueda{
  position:relative;width:clamp(2.1rem,4.6vw,3rem);height:clamp(3rem,6.6vw,4.3rem);overflow:hidden;
  background:linear-gradient(#000 0,#1b2427 18%,#232e31 50%,#1b2427 82%,#000 100%);
  color:var(--contador-cifra);border-radius:2px;
  font:500 clamp(1.8rem,4vw,2.65rem)/1 var(--f-mono);
}
.rueda--roja{background:linear-gradient(#5c0e0a 0,#b8261d 18%,var(--rojo-contador) 50%,#b8261d 82%,#5c0e0a 100%);color:#fff}
.rueda__cinta{position:absolute;inset:0;display:flex;flex-direction:column;transform:translateY(calc(var(--d) * -100%));transition:transform 1.6s cubic-bezier(.2,.9,.2,1)}
html:not(.sin-js) .ruedas:not(.rodado) .rueda__cinta{transform:none;transition:none}
.rueda:nth-child(2) .rueda__cinta{transition-delay:.08s}.rueda:nth-child(4) .rueda__cinta{transition-delay:.16s}
.rueda:nth-child(5) .rueda__cinta{transition-delay:.24s}.rueda:nth-child(6) .rueda__cinta{transition-delay:.32s}
.rueda__cinta span{flex:0 0 100%;display:grid;place-items:center}
.ruedas__coma{display:grid;place-items:end center;width:.6rem;color:var(--contador-cifra);font:500 2rem/1 var(--f-mono);padding-bottom:.4rem}
.ruedas__unidad{align-self:center;padding:0 .4rem 0 .5rem;color:#9aa6a2;font:500 .8rem/1.15 var(--f-mono)}
.lectura__pie{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.2rem;border-top:1px dashed var(--linea);padding-top:1rem}
.lectura__pie dt{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.lectura__pie dd{margin:.35rem 0 0;font:500 1rem/1 var(--f-mono)}

/* Tira de 24 barras coloreadas como la etiqueta */
.tira{margin-top:clamp(2.5rem,5vw,4rem)}
.tira__cab{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.tira__leyenda{display:flex;gap:2px;align-items:center;font:500 .7rem/1 var(--f-mono);color:var(--tinta-3)}
.tira__leyenda i{width:22px;height:8px;display:block}
.tira__leyenda span{margin:0 .5rem}
.barras{
  display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:clamp(2px,.5vw,6px);align-items:end;
  height:clamp(150px,22vw,240px);position:relative;
  border-bottom:1.5px solid var(--tinta);
}
.barra{position:relative;height:100%;display:flex;align-items:flex-end;text-decoration:none}
.barra__col{
  width:100%;height:var(--alto);border-radius:3px 3px 0 0;background:var(--c);
  transform-origin:bottom;transform:scaleY(0);
  transition:transform .9s cubic-bezier(.2,.9,.25,1) calc(var(--i) * 28ms), filter .2s;
}
.tira.visible .barra__col{transform:scaleY(1)}
.barra:hover .barra__col,.barra:focus-visible .barra__col{filter:brightness(1.12) saturate(1.1)}
.barra__dato{
  position:absolute;bottom:calc(var(--alto) + 8px);left:50%;transform:translate(-50%,4px);
  background:var(--tinta);color:var(--papel);font:500 .72rem/1 var(--f-mono);padding:.4rem .5rem;border-radius:3px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;z-index:3;
}
.barra:hover .barra__dato,.barra:focus-visible .barra__dato{opacity:1;transform:translate(-50%,0)}
/* Las primeras y últimas horas abren el globo hacia dentro para no salirse de la pantalla */
.barra:nth-child(-n+3) .barra__dato{left:0;transform:translate(0,4px)}
.barra:nth-last-child(-n+3) .barra__dato{left:auto;right:0;transform:translate(0,4px)}
.barra:nth-child(-n+3):hover .barra__dato,.barra:nth-child(-n+3):focus-visible .barra__dato,
.barra:nth-last-child(-n+3):hover .barra__dato,.barra:nth-last-child(-n+3):focus-visible .barra__dato{transform:none}
.barra--ahora::after{
  content:"AHORA";position:absolute;top:-4px;left:50%;transform:translate(-50%,-100%);
  font:500 .6rem/1 var(--f-mono);letter-spacing:.12em;color:var(--tinta);
  border-bottom:1.5px solid var(--tinta);padding-bottom:3px;
}
.barra--ahora .barra__col{outline:2px solid var(--tinta);outline-offset:2px}
.barra--pasada .barra__col{opacity:.32;filter:grayscale(1)}
.horas{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:clamp(2px,.5vw,6px);margin-top:.5rem;font:500 .66rem/1 var(--f-mono);color:var(--tinta-3);text-align:center}
@media (max-width:640px){.horas span:nth-child(odd){visibility:hidden}}

/* Franjas por letra */
[data-l="a"]{--c:var(--e-a)} [data-l="b"]{--c:var(--e-b)} [data-l="c"]{--c:var(--e-c)}
[data-l="d"]{--c:var(--e-d)} [data-l="e"]{--c:var(--e-e)} [data-l="f"]{--c:var(--e-f)} [data-l="g"]{--c:var(--e-g)}
.fondo-letra{background:var(--c);color:#fff}
[data-l="c"].fondo-letra,[data-l="d"].fondo-letra,[data-l="e"].fondo-letra{color:#141a12}

/* Píldoras de mejores horas */
.mejores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden;margin-top:2rem}
.mejores > div{background:var(--hoja);padding:1.1rem 1.2rem}
.mejores dt{font:500 .68rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.55rem}
.mejores dd{margin:0;font:800 clamp(1.25rem,2.4vw,1.7rem)/1.05 var(--f-ancha);font-stretch:118%}
.mejores small{display:block;font:400 .82rem/1.3 var(--f-mono);color:var(--tinta-2);margin-top:.4rem}
@media (max-width:700px){.mejores{grid-template-columns:1fr}}

/* ==========================================================
   SECCIONES
   ========================================================== */
.seccion{padding:clamp(3.5rem,8vw,6.5rem) 0}
.seccion--borde{border-top:1px solid var(--linea)}
/* Paneles siempre oscuros (igual en modo claro y oscuro): se invierten los tokens
   localmente para que lo de dentro siga teniendo contraste. */
.seccion--tinta,.pie,.calc__salida{
  --papel:#EEF1EA;--tinta:#0F1719;--tinta-2:#46514F;--tinta-3:#5B6663;--linea:#C6CCC2;
  background:#0F1719;color:#EEF1EA;
}
:root[data-theme="dark"] .seccion--tinta,:root[data-theme="dark"] .pie{border-top:1px solid #27322F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seccion--tinta,:root:not([data-theme="light"]) .pie{border-top:1px solid #27322F}}
.seccion--tinta .rotulo{color:color-mix(in srgb,var(--papel) 70%,transparent)}
.seccion--tinta .rotulo b{background:var(--voltio);color:var(--voltio-tinta)}
.seccion__cab{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.25rem)}
.seccion__cab p{margin:0;color:var(--tinta-2);max-width:32rem}
.seccion--tinta .seccion__cab p{color:color-mix(in srgb,var(--papel) 72%,transparent)}
@media (max-width:800px){.seccion__cab{grid-template-columns:1fr}}

/* ---------- Etiqueta energética de temas ---------- */
.etiqueta{
  background:var(--hoja);border:1.5px solid var(--tinta);border-radius:10px;
  padding:clamp(1rem,2.5vw,1.6rem);display:grid;gap:clamp(6px,.9vw,10px);
}
.etiqueta__cab{display:flex;justify-content:space-between;align-items:center;padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1.5px solid var(--tinta);font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.franja{
  --w:60%;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:center;gap:1.25rem;text-decoration:none;
}
.franja__flecha{
  position:relative;display:flex;align-items:center;gap:1rem;height:clamp(52px,6vw,66px);width:var(--w);
  padding:0 2.6rem 0 1.1rem;background:var(--c);color:#fff;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);
  border-radius:4px 0 0 4px;
  transform:translateX(-14px);opacity:0;transition:transform .7s cubic-bezier(.2,.9,.25,1) calc(var(--i)*70ms),opacity .5s calc(var(--i)*70ms),filter .2s;
}
.etiqueta.visible .franja__flecha{transform:none;opacity:1}
.franja[data-l="c"] .franja__flecha,.franja[data-l="d"] .franja__flecha,.franja[data-l="e"] .franja__flecha{color:#141a12}
.franja__letra{font:900 clamp(1.5rem,2.6vw,2rem)/1 var(--f-ancha);font-stretch:125%}
.franja__nombre{font:700 clamp(.92rem,1.4vw,1.08rem)/1.1 var(--f-ancha);font-stretch:110%}
.franja__info{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--tinta-2);font-size:.92rem;line-height:1.4}
.franja__num{
  flex-shrink:0;display:grid;place-items:center;min-width:3.6rem;height:2.4rem;padding:0 .7rem 0 1.1rem;
  background:var(--tinta);color:var(--papel);font:500 .85rem/1 var(--f-mono);
  clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%);
}
.franja:hover .franja__flecha{filter:brightness(1.07) saturate(1.1)}
.franja:hover .franja__nombre{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:720px){
  .franja{grid-template-columns:1fr;gap:.4rem}
  .franja__flecha{min-width:70%}
  .franja__info{display:none}
}

/* ---------- Tarjetas de guía (ficha tipo etiqueta) ---------- */
.rejilla-guias{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(1rem,1.6vw,1.75rem)}
.rejilla-guias--destacadas{grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto}
.rejilla-guias--destacadas .ficha:first-child{grid-row:span 2}
@media (max-width:980px){.rejilla-guias--destacadas{grid-template-columns:1fr}.rejilla-guias--destacadas .ficha:first-child{grid-row:auto}}

.ficha{
  position:relative;display:flex;flex-direction:column;min-height:100%;
  background:var(--hoja);border:1px solid var(--linea);border-radius:10px;overflow:hidden;
  text-decoration:none;transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.ficha:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(0,0,0,.55);border-color:var(--tinta)}
.ficha__portada{
  position:relative;aspect-ratio:16/8;background:var(--c);color:#fff;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;padding:1.1rem 1.2rem;
}
.ficha[data-l="c"] .ficha__portada,.ficha[data-l="d"] .ficha__portada,.ficha[data-l="e"] .ficha__portada{color:#141a12}
.ficha__portada svg.ficha__patron{position:absolute;inset:0;width:100%;height:100%;opacity:.16;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(105deg,transparent 30%,#000 85%);mask-image:linear-gradient(105deg,transparent 30%,#000 85%)}
.ficha__dato{position:relative;font:900 clamp(2rem,4.4vw,3.6rem)/.9 var(--f-ancha);font-stretch:125%;letter-spacing:-.03em}
.ficha__dato small{display:block;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.04em;margin-top:.55rem;max-width:16rem;opacity:.92}
.ficha__letra{
  position:relative;align-self:flex-start;display:grid;place-items:center;height:2rem;padding:0 1rem 0 .6rem;
  background:rgba(0,0,0,.82);color:#fff;font:800 .95rem/1 var(--f-ancha);font-stretch:125%;
  clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);
}
.rejilla-guias--destacadas .ficha:first-child .ficha__portada,.mosaico .ficha:first-child .ficha__portada{aspect-ratio:auto}

/* Tarjeta con foto: la cifra pasa a ser una pegatina del color de la franja */
.ficha__portada--foto{aspect-ratio:16/10;background:var(--papel-2);padding:0;align-items:flex-end}
.ficha__portada--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.9,.25,1)}
.ficha:hover .ficha__portada--foto img{transform:scale(1.04)}
.ficha__portada--foto .ficha__letra{position:absolute;top:1rem;left:1rem}
.ficha__portada--foto .ficha__dato{
  margin:0 0 1rem 0;padding:.75rem 2.2rem .75rem 1.1rem;background:var(--c);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);
  max-width:calc(100% - 1rem);
}
.ficha__portada--foto .ficha__dato small{font-size:.66rem;margin-top:.35rem;max-width:15rem}
.ficha[data-l="a"] .ficha__portada--foto .ficha__dato,.ficha[data-l="b"] .ficha__portada--foto .ficha__dato{color:#fff}
.rejilla-guias--destacadas .ficha:first-child .ficha__portada--foto{aspect-ratio:auto;min-height:340px}
.rejilla-guias--destacadas .ficha:first-child .ficha__portada--foto .ficha__dato{font-size:clamp(2rem,3.6vw,3rem)}

/* Rejilla normal (Guías, relacionadas): todas iguales; la cifra es una pegatina pequeña
   que no tapa la foto y su explicación se queda en el artículo */
.rejilla-guias:not(.rejilla-guias--destacadas) .ficha__portada--foto .ficha__dato{
  margin:0 0 .9rem;padding:.42rem 1.5rem .42rem .8rem;font-size:1.2rem;letter-spacing:-.02em;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%);
}
.rejilla-guias:not(.rejilla-guias--destacadas) .ficha__dato small{display:none}
.rejilla-guias:not(.rejilla-guias--destacadas) .ficha__letra{height:1.7rem;font-size:.82rem}
.rejilla-guias .ficha__titulo{font-size:1.12rem}
.rejilla-guias .ficha__resumen{-webkit-line-clamp:3;min-height:calc(3em * 1.5)}

/* Foto de cabecera del artículo */
.art-portada{margin:2rem 0 0;position:relative;border-radius:12px;overflow:hidden;background:var(--papel-2)}
.art-portada img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.art-portada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--e-a) 0 14.28%,var(--e-b) 0 28.57%,var(--e-c) 0 42.85%,var(--e-d) 0 57.14%,var(--e-e) 0 71.42%,var(--e-f) 0 85.71%,var(--e-g) 0)}

/* Figuras dentro del texto */
.figura{margin-top:2.4em;margin-bottom:2.4em;padding:0}
.figura img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--papel-2)}
.figura figcaption{display:flex;gap:.6rem;margin-top:.7rem;font:400 .78rem/1.5 var(--f-mono);color:var(--tinta-3)}
.figura figcaption::before{content:"";flex-shrink:0;width:14px;height:10px;margin-top:.3rem;background:var(--e-a);clip-path:polygon(0 0,65% 0,100% 50%,65% 100%,0 100%)}

/* Banda de foto en portada */
.banda-foto{position:relative;margin:0 0 clamp(2.5rem,5vw,4rem);border-radius:14px;overflow:hidden;background:var(--papel-2)}
.banda-foto img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.banda-foto__pegatina{
  position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:1rem;padding:1rem 3rem 1rem 1.2rem;max-width:min(32rem,80%);
  background:var(--e-a);color:#fff;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);
}
.banda-foto__pegatina b{font:900 clamp(2rem,4vw,3rem)/1 var(--f-ancha);font-stretch:125%}
.banda-foto__pegatina span{font:700 clamp(.95rem,1.6vw,1.2rem)/1.2 var(--f-ancha);font-stretch:112%}
@media (max-width:640px){.banda-foto img{aspect-ratio:4/3}.banda-foto__pegatina{padding-right:2.2rem}}
.rejilla-guias--destacadas .ficha:first-child .ficha__portada{flex:1;min-height:280px}
.ficha__cuerpo{padding:1.2rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.ficha__meta{display:flex;gap:.8rem;font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.ficha__titulo{margin:0;font:800 1.22rem/1.15 var(--f-ancha);font-stretch:112%;letter-spacing:-.012em;text-wrap:balance}
.rejilla-guias--destacadas .ficha:first-child .ficha__titulo{font-size:clamp(1.4rem,2.4vw,1.95rem);font-stretch:120%}
.ficha__resumen{margin:0;color:var(--tinta-2);font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ficha__mas{margin-top:auto;padding-top:.4rem;font:600 .85rem/1 var(--f-ancha);font-stretch:112%;display:flex;align-items:center;gap:.45rem}
.ficha__mas svg,.enlace-flecha svg{width:1em;height:1em;flex-shrink:0;transition:transform .25s ease}
.ficha:hover .ficha__mas svg{transform:translateX(4px)}

/* ---------- Mosaico de últimas guías (portada) ----------
   Hasta 5 tarjetas: la primera grande (2×2) y el resto alrededor.
   Con 4, la última se estira para no dejar hueco; con 2–3, columnas iguales. */
.mosaico{display:grid;gap:clamp(1rem,1.6vw,1.75rem);grid-template-columns:repeat(4,minmax(0,1fr))}
.mosaico .ficha:first-child{grid-column:span 2;grid-row:span 2}
.mosaico .ficha:first-child .ficha__portada--foto{aspect-ratio:auto;flex:1;min-height:360px}
.mosaico .ficha:first-child .ficha__titulo{font-size:clamp(1.45rem,2.2vw,2.1rem);font-stretch:120%}
.mosaico .ficha:first-child .ficha__portada--foto .ficha__dato{font-size:clamp(2rem,3.4vw,3rem)}
.mosaico .ficha:not(:first-child) .ficha__resumen{-webkit-line-clamp:2}
.mosaico .ficha:not(:first-child) .ficha__dato small{display:none}
.mosaico--4 .ficha:last-child{grid-column:span 2}
.mosaico--4 .ficha:last-child{flex-direction:row}
.mosaico--4 .ficha:last-child .ficha__portada{flex:0 0 46%;aspect-ratio:auto}
.mosaico--2,.mosaico--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.mosaico--2 .ficha:first-child,.mosaico--3 .ficha:first-child{grid-column:auto;grid-row:auto}
.mosaico--1{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaico .ficha:first-child{grid-row:auto}
  .mosaico .ficha:first-child .ficha__portada--foto{min-height:0;aspect-ratio:16/8}
  .mosaico--4 .ficha:last-child{grid-column:auto;flex-direction:column}
  .mosaico--4 .ficha:last-child .ficha__portada{flex:none;aspect-ratio:16/10}
}
@media (max-width:640px){.mosaico{grid-template-columns:minmax(0,1fr)}.mosaico .ficha:first-child{grid-column:auto}}
.seccion__cab-lado{display:grid;gap:1.1rem;justify-items:start}

/* ---------- Bloque calculadora (portada) ---------- */
.promo-calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.promo-calc__ticket{
  background:var(--papel);color:var(--tinta);border-radius:8px;padding:1.6rem;font-family:var(--f-mono);font-size:.9rem;
  transform:rotate(-1.4deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 0/18px 100% repeat-x;
          mask:radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) 0 0/18px 100% repeat-x;
  padding-bottom:2.2rem;
}
.ticket__fila{display:flex;gap:.5rem;align-items:baseline;padding:.42rem 0}
.ticket__fila span:nth-child(2){flex:1;border-bottom:1.5px dotted var(--linea);transform:translateY(-4px)}
.ticket__total{border-top:2px solid var(--tinta);margin-top:.6rem;padding-top:.8rem;font-weight:500;font-size:1.05rem}
.ticket__cab{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);border-bottom:1.5px solid var(--tinta);padding-bottom:.8rem;margin-bottom:.4rem}
@media (max-width:800px){.promo-calc{grid-template-columns:1fr}}

/* ---------- Manifiesto ---------- */
.principios{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--tinta)}
.principios--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.principios--4{grid-template-columns:repeat(2,1fr)}.principios--4 .principio:nth-child(2){border-right:0;margin-right:0}}
.principio{padding:1.6rem 1.6rem 0 0;border-right:1px solid var(--linea);margin-right:1.6rem}
.principio:last-child{border-right:0;margin-right:0}
.principio__num{font:500 .75rem/1 var(--f-mono);color:var(--tinta-3);letter-spacing:.1em}
.principio h3{font:800 1.3rem/1.1 var(--f-ancha);font-stretch:118%;margin:1.1rem 0 .7rem;letter-spacing:-.01em}
.principio p{margin:0;color:var(--tinta-2);font-size:.97rem}
@media (max-width:800px){.principios{grid-template-columns:1fr}.principio{border-right:0;margin:0;padding:1.4rem 0;border-bottom:1px solid var(--linea)}}

/* ==========================================================
   ARTÍCULO
   ========================================================== */
.progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.progreso i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--e-a),var(--e-b),var(--e-c),var(--e-d),var(--e-e),var(--e-f),var(--e-g))}

.art-cab{padding:clamp(2.5rem,6vw,4.5rem) 0 0}
.migas{display:flex;flex-wrap:wrap;gap:.5rem;font:500 .74rem/1.4 var(--f-mono);color:var(--tinta-3);margin-bottom:1.6rem;letter-spacing:.04em}
.migas a{text-decoration:none}
.migas a:hover{color:var(--tinta);text-decoration:underline}
.art-cab__rejilla{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4rem);align-items:end}
.art-cab__entrada{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:var(--tinta-2);max-width:44rem;margin:1.4rem 0 0}
.art-dato{border:1.5px solid var(--tinta);border-radius:10px;overflow:hidden;background:var(--hoja)}
.art-dato__valor{background:var(--c);color:#fff;padding:1.3rem 1.2rem;font:900 clamp(2.3rem,4vw,3.2rem)/.9 var(--f-ancha);font-stretch:125%;letter-spacing:-.03em}
.art-dato[data-l="c"] .art-dato__valor,.art-dato[data-l="d"] .art-dato__valor,.art-dato[data-l="e"] .art-dato__valor{color:#141a12}
.art-dato__texto{padding:1rem 1.2rem;font:400 .85rem/1.45 var(--f-mono);color:var(--tinta-2)}
@media (max-width:860px){.art-cab__rejilla{grid-template-columns:1fr}.art-dato{max-width:360px}}

.firma{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;margin-top:2.2rem;padding:1rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font:500 .78rem/1.3 var(--f-mono);color:var(--tinta-2)}
.firma strong{color:var(--tinta);font-weight:500}

/* Tres columnas: índice | artículo | precio. Dentro del artículo el texto va
   centrado a ancho de lectura y fotos, tablas y fichas salen algo más anchas. */
.art-rejilla{
  --lectura:44rem;--ancho:58rem;
  display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:clamp(1.5rem,3vw,3rem);
  padding-top:clamp(2rem,4vw,3.5rem);padding-bottom:4rem;
}
.art-lateral{position:sticky;top:96px;align-self:start;font-size:.88rem}
.indice h2{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 1rem}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:i;border-left:1.5px solid var(--linea)}
.indice li{counter-increment:i}
.indice a{display:block;padding:.45rem 0 .45rem 1rem;margin-left:-1.5px;border-left:1.5px solid transparent;text-decoration:none;color:var(--tinta-2);line-height:1.35}
.indice a::before{content:counter(i,decimal-leading-zero) " ";font:500 .7rem/1 var(--f-mono);color:var(--tinta-3)}
.indice a:hover{color:var(--tinta)}
.indice a.activo{color:var(--tinta);border-left-color:var(--e-a);font-weight:600}
.art-derecha{position:sticky;top:96px;align-self:start}
.art-rejilla > article{min-width:0}
@media (max-width:1180px){.art-rejilla{grid-template-columns:210px minmax(0,1fr)}.art-derecha{display:none}}
@media (max-width:860px){.art-rejilla{grid-template-columns:minmax(0,1fr)}.art-lateral{position:static}.indice{border:1px solid var(--linea);border-radius:10px;padding:1.1rem 1.2rem;background:var(--hoja)}.indice ol{border-left:0}.indice a{padding-left:0;border-left:0}}

/* Caja "En 30 segundos" con forma de resumen de factura */
.resumen-factura{
  border:1.5px solid var(--tinta);border-radius:10px;background:var(--hoja);margin-top:0;margin-bottom:2.5rem;overflow:hidden;
}
.resumen-factura__cab{display:flex;justify-content:space-between;align-items:center;background:var(--tinta);color:var(--papel);padding:.75rem 1.2rem;font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.resumen-factura__cab span:last-child{color:var(--voltio)}
.resumen-factura ol{margin:0;padding:.4rem 1.2rem;list-style:none;counter-reset:r}
.resumen-factura li{counter-increment:r;display:grid;grid-template-columns:2.2rem 1fr;gap:.4rem;padding:.85rem 0;border-bottom:1px dashed var(--linea);line-height:1.5}
.resumen-factura li:last-child{border-bottom:0}
.resumen-factura li::before{content:counter(r,decimal-leading-zero);font:500 .8rem/1.9 var(--f-mono);color:var(--tinta-3)}

/* Cuerpo del artículo */
.prosa{font-size:1.09rem;line-height:1.75}
/* Todo lo del artículo se centra en su columna */
.art-rejilla > article > *,.prosa > *{max-width:var(--lectura);margin-inline:auto}
.prosa > .figura,.prosa > table,.prosa > .placa,.prosa > .anuncio,.prosa > .formula,.prosa > .nota,
.art-rejilla > article > .resumen-factura,.art-rejilla > article > .divulgacion{max-width:var(--ancho)}
.art-rejilla > article > .prosa{max-width:none}
.prosa > table{display:table;width:100%}
.prosa td:first-child{font-weight:600;min-width:9rem}
@media (max-width:760px){.prosa > table{display:block}}
.prosa > *:first-child{margin-top:0}
.prosa p{margin-top:0;margin-bottom:1.35em}
.prosa .intro{font-size:1.2rem;line-height:1.65}
.prosa h2{font:800 clamp(1.5rem,2.6vw,2rem)/1.1 var(--f-ancha);font-stretch:118%;letter-spacing:-.02em;margin-top:2.6em;margin-bottom:.8em;padding-top:1.1em;border-top:1.5px solid var(--tinta);text-wrap:balance}
.prosa h3{font:700 1.25rem/1.2 var(--f-ancha);font-stretch:110%;margin-top:2em;margin-bottom:.6em}
.prosa ul,.prosa ol{padding-left:1.25rem;margin-top:0;margin-bottom:1.4em}
.prosa li{margin:.4em 0}
.prosa ul li::marker{color:var(--e-a)}
.prosa strong{font-weight:700}
.prosa a{text-decoration-color:var(--e-a);text-decoration-thickness:2px}
.prosa blockquote{margin-top:2em;margin-bottom:2em;padding:0 0 0 1.4rem;border-left:4px solid var(--voltio);font-size:1.2rem;font-style:italic;color:var(--tinta-2)}
.prosa table{width:100%;border-collapse:collapse;margin-top:1.8em;margin-bottom:1.8em;font-size:.95rem;display:block;overflow-x:auto}
.prosa thead th{font:500 .7rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--tinta-2);border-bottom:1.5px solid var(--tinta);padding:.7rem .8rem .7rem 0}
.prosa td{padding:.75rem .8rem .75rem 0;border-bottom:1px solid var(--linea);vertical-align:top}
.prosa td.num,.prosa th.num{font-family:var(--f-mono);text-align:right;white-space:nowrap}
.nota{
  margin-top:2em;margin-bottom:2em;padding:1.1rem 1.25rem;border-radius:8px;background:var(--papel-2);
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;font-size:.98rem;line-height:1.6;
}
.nota::before{content:"!";display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--tinta);color:var(--voltio);font:700 .95rem/1 var(--f-mono)}
.nota p:last-child{margin:0}
.formula{margin-top:1.8em;margin-bottom:1.8em;padding:1.2rem 1.3rem;background:var(--contador);color:var(--contador-cifra);border-radius:8px;font:500 .98rem/1.6 var(--f-mono);overflow-x:auto}
.formula b{color:var(--voltio);font-weight:500}

/* Ficha de producto: placa de características de un aparato */
.placa{
  margin-top:2.4em;margin-bottom:2.4em;border:1.5px solid var(--tinta);border-radius:10px;background:var(--hoja);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 260px;
}
.placa__principal{padding:1.3rem 1.4rem}
.placa__tipo{display:flex;align-items:center;gap:.6rem;font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.7rem}
.placa__nombre{margin:0 0 .5rem;font:800 1.3rem/1.15 var(--f-ancha);font-stretch:115%;letter-spacing:-.01em}
.placa__porque{margin:0;color:var(--tinta-2);font-size:.97rem;line-height:1.55}
.placa__specs{margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:6px;overflow:hidden}
.placa__specs div{background:var(--hoja);padding:.6rem .75rem}
.placa__specs dt{font:500 .62rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.placa__specs dd{margin:.25rem 0 0;font:500 .9rem/1.25 var(--f-mono)}
.placa__lado{border-left:1.5px solid var(--tinta);padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;background:var(--papel-2)}
.placa__ideal{font-size:.86rem;line-height:1.45;color:var(--tinta-2)}
.placa__ideal strong{display:block;font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta);margin-bottom:.35rem}
.placa .boton{width:100%;justify-content:center;font-size:.9rem;padding:.9rem 1rem}
.placa__aviso{font:400 .68rem/1.35 var(--f-mono);color:var(--tinta-3)}
@media (max-width:700px){.placa{grid-template-columns:1fr}.placa__lado{border-left:0;border-top:1.5px solid var(--tinta)}}

/* FAQ */
.faq{margin-top:3rem}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;font:700 1.08rem/1.35 var(--f-ancha);font-stretch:108%}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--f-mono);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 1.2rem;color:var(--tinta-2);max-width:42rem}

/* Divulgación de afiliados */
.divulgacion{display:flex;gap:.7rem;align-items:flex-start;font:400 .78rem/1.5 var(--f-mono);color:var(--tinta-2);padding:.85rem 1rem;border:1px dashed var(--linea);border-radius:8px;margin-top:0;margin-bottom:2rem}
.divulgacion svg{flex-shrink:0;width:16px;height:16px;margin-top:2px}

/* Anuncios */
.anuncio{margin-top:2.5em;margin-bottom:2.5em;min-height:120px;position:relative;padding-top:1.3rem}
.anuncio__rotulo{position:absolute;top:0;left:0;font:500 .62rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.anuncio--maqueta{border:1.5px dashed var(--linea);border-radius:8px;display:grid;place-items:center;min-height:160px;padding:0}
.anuncio--maqueta .anuncio__rotulo{position:static}

/* Mini widget lateral de precio */
.mini-tarifa{border:1px solid var(--linea);border-radius:10px;padding:1rem;background:var(--hoja)}
.mini-tarifa__titulo{font:500 .68rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 .8rem}
.mini-tarifa__precio{font:800 1.6rem/1 var(--f-ancha);font-stretch:118%}
.mini-tarifa__precio small{font:500 .75rem/1 var(--f-mono);color:var(--tinta-3)}
.mini-barras{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;height:46px;align-items:end;margin:.9rem 0 .7rem}
.mini-barras i{display:block;background:var(--c);height:var(--alto);border-radius:1px}
.mini-barras i.ahora{outline:1.5px solid var(--tinta);outline-offset:1px}
.mini-tarifa a{font:600 .82rem/1 var(--f-ancha);font-stretch:110%}
@media (min-width:1181px){.art-derecha{display:flex;flex-direction:column;gap:1rem}}
.mini-guias{border:1px solid var(--linea);border-radius:10px;padding:1rem 1rem .9rem;background:var(--hoja)}
.mini-guia{display:grid;grid-template-columns:52px minmax(0,1fr);gap:.7rem;align-items:start;padding:.7rem 0;border-top:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.mini-guias .mini-tarifa__titulo + .mini-guia{border-top:0;padding-top:0}
.mini-guia img,.mini-guia__letra{width:52px;height:52px;border-radius:6px;object-fit:cover;background:var(--papel-2);border-bottom:3px solid var(--c)}
.mini-guia__letra{display:grid;place-items:center;background:var(--c);color:#fff;font:900 1.2rem/1 var(--f-ancha)}
.mini-guia b{font:700 .84rem/1.25 var(--f-ancha);font-stretch:105%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mini-guia small{display:block;margin-top:.3rem;font:500 .6rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-guia:hover b{text-decoration:underline;text-underline-offset:3px}
.mini-guias__todas{display:block;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--linea);font:600 .82rem/1 var(--f-ancha);font-stretch:110%}

/* ==========================================================
   PÁGINA PRECIO DE LA LUZ
   ========================================================== */
.tabla-horas{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:.92rem}
.tabla-horas th{font:500 .68rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);text-align:left;padding:.6rem .5rem;border-bottom:1.5px solid var(--tinta)}
.tabla-horas td{padding:.55rem .5rem;border-bottom:1px solid var(--linea-2)}
.tabla-horas td:nth-child(2){text-align:right}
.tabla-horas tr.es-ahora td{background:color-mix(in srgb,var(--voltio) 40%,transparent)}
.tabla-horas .medidor{width:100%;height:10px;background:var(--papel-2);border-radius:2px;overflow:hidden}
.tabla-horas .medidor i{display:block;height:100%;background:var(--c);width:var(--alto)}
.tabla-horas .letra-mini{display:inline-grid;place-items:center;width:1.6rem;height:1.3rem;font:800 .75rem/1 var(--f-ancha);font-stretch:125%;padding-right:.25rem;clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%)}
.columnas-tabla{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
@media (max-width:760px){.columnas-tabla{grid-template-columns:1fr}}
.pestanas{display:inline-flex;border:1.5px solid var(--tinta);border-radius:999px;padding:3px;gap:3px;margin-top:1.6rem}
.pestanas a{padding:.55rem 1.1rem;border-radius:999px;text-decoration:none;font:600 .88rem/1 var(--f-ancha);font-stretch:110%}
.pestanas a[aria-current="page"]{background:var(--tinta);color:var(--papel)}
.vacio{border:1.5px dashed var(--linea);border-radius:10px;padding:2rem;text-align:center;color:var(--tinta-2)}

/* ==========================================================
   CALCULADORA
   ========================================================== */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1.5px solid var(--tinta);border-radius:12px;overflow:hidden;background:var(--hoja)}
.calc__entrada{padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.6rem;align-content:start}
.calc__salida{padding:clamp(1.3rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1.4rem}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.campo label,.campo .campo__etq{display:flex;justify-content:space-between;align-items:baseline;font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:.7rem}
.campo output{font:500 1rem/1 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--tinta)}
.campo select,.campo input[type="number"]{
  width:100%;padding:.85rem .9rem;border:1.5px solid var(--tinta);border-radius:6px;background:var(--papel);color:var(--tinta);
  font:500 1rem/1.2 var(--f-ancha);appearance:none;-webkit-appearance:none;
}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
input[type="range"]{width:100%;appearance:none;-webkit-appearance:none;height:28px;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--e-a),var(--e-c),var(--e-e),var(--e-g))}
input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--e-a),var(--e-c),var(--e-e),var(--e-g))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--hoja);border:2.5px solid var(--tinta);margin-top:-8px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--hoja);border:2.5px solid var(--tinta)}
.calc__grupo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.calc__nota{font:400 .78rem/1.5 var(--f-mono);color:var(--tinta-3);margin:0}
.calc__total{display:flex;flex-direction:column;gap:.5rem}
.calc__total .rotulo{color:color-mix(in srgb,var(--papel) 78%,transparent);margin:0}
.calc__total .rotulo b{background:var(--voltio);color:var(--voltio-tinta)}
.calc__cifra{font:900 clamp(3rem,7vw,5rem)/.9 var(--f-ancha);font-stretch:125%;letter-spacing:-.04em;color:var(--voltio)}
.calc__cifra small{font:500 1rem/1 var(--f-mono);letter-spacing:0;color:color-mix(in srgb,var(--papel) 80%,transparent);margin-left:.4rem}
.calc__tabla{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.calc__tabla div{padding:1rem 0}
.calc__tabla div+div{border-left:1px solid rgba(255,255,255,.15);padding-left:1rem}
.calc__tabla dt{font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--papel) 75%,transparent)}
.calc__tabla dd{margin:.5rem 0 0;font:700 1.35rem/1 var(--f-ancha);font-stretch:115%}
.calc__ahorro{border-radius:8px;padding:1rem 1.1rem;background:rgba(255,255,255,.06);font-size:.95rem;line-height:1.5;color:color-mix(in srgb,var(--papel) 85%,transparent)}
.calc__ahorro strong{color:var(--voltio)}


/* ==========================================================
   LISTADO
   ========================================================== */
.listado-cab{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--linea)}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filtros a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem .55rem .55rem;border:1px solid var(--linea);border-radius:999px;
  text-decoration:none;font:600 .86rem/1 var(--f-ancha);font-stretch:108%;background:var(--hoja)
}
.filtros a i{width:.9rem;height:.9rem;border-radius:50%;background:var(--c)}
.filtros a[aria-current="page"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

/* ==========================================================
   PÁGINAS DE TEXTO / 404
   ========================================================== */
.pagina-texto{max-width:46rem;padding:clamp(2.5rem,6vw,4.5rem) 0 5rem}
.pagina-texto .prosa{margin-top:2.5rem}
.error-404{padding:clamp(3rem,10vw,7rem) 0;text-align:left}
.error-404 .ruedas{margin:2rem 0}

/* ==========================================================
   PIE
   ========================================================== */
.pie{padding:clamp(3rem,7vw,5rem) 0 2rem;margin-top:0}
.pie a{text-decoration:none;color:color-mix(in srgb,var(--papel) 85%,transparent)}
.pie a:hover{color:var(--voltio)}
.pie__rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.pie__lema{font:800 clamp(1.6rem,3.2vw,2.5rem)/1 var(--f-ancha);font-stretch:125%;letter-spacing:-.025em;margin:0 0 1.2rem;max-width:22rem}
.pie__lema em{font-weight:300;font-stretch:100%;color:var(--voltio)}
.pie p{color:color-mix(in srgb,var(--papel) 75%,transparent);font-size:.92rem;max-width:26rem}
.pie h2{font:500 .68rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--papel) 70%,transparent);margin:0 0 1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.95rem}
.pie__franjas{display:flex;height:6px;margin:3rem 0 1.4rem}
.pie__franjas i{flex:1;background:var(--c)}
.pie__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font:400 .74rem/1.5 var(--f-mono);color:color-mix(in srgb,var(--papel) 70%,transparent)}
@media (max-width:860px){.pie__rejilla{grid-template-columns:1fr 1fr}.pie__marca{grid-column:1/-1}}

/* ---------- Aparición suave ---------- */
.revela{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.9,.25,1)}
.revela.visible{opacity:1;transform:none}
.sin-js .revela{opacity:1;transform:none}
.sin-js .barra__col{transform:none}
.sin-js .franja__flecha{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .revela,.franja__flecha{opacity:1;transform:none}
  .barra__col{transform:none}
}
@media print{.cabecera,.pie,.art-lateral,.art-derecha,.anuncio,.progreso{display:none}.art-rejilla{display:block}}

/* ==========================================================
   QUIÉNES SOMOS
   ========================================================== */
.placa--web{grid-template-columns:1fr;margin:0;box-shadow:var(--sombra)}
.placa--web .placa__nombre{font-size:clamp(1.5rem,2.4vw,2rem);font-stretch:125%;margin-bottom:.2rem}
.placa--web .placa__specs{grid-template-columns:repeat(2,minmax(0,1fr))}
.herramientas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1rem,1.6vw,1.75rem)}
.herramienta{
  position:relative;display:flex;flex-direction:column;gap:.8rem;padding:1.6rem 1.5rem 1.4rem;
  background:var(--hoja);border:1px solid var(--linea);border-radius:10px;text-decoration:none;
  border-top:8px solid var(--c);transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
}
.herramienta:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(0,0,0,.55)}
.herramienta__marca{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;font-weight:500;letter-spacing:-.02em}
.herramienta h3{margin:.4rem 0 0;font:800 1.3rem/1.15 var(--f-ancha);font-stretch:115%}
.herramienta p{margin:0;color:var(--tinta-2);font-size:.97rem;line-height:1.55}
.herramienta .ficha__mas{margin-top:auto;padding-top:.6rem}
.herramienta:hover .ficha__mas svg{transform:translateX(4px)}
.fuentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;margin:0;border-top:1.5px solid var(--tinta)}
.fuentes > div{padding:1.3rem 1.5rem 1.4rem 0;border-bottom:1px solid var(--linea)}
.fuentes dt{font:800 1.08rem/1.2 var(--f-ancha);font-stretch:112%;margin-bottom:.45rem}
.fuentes dd{margin:0;color:var(--tinta-2);font-size:.95rem;line-height:1.5}
.cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem 3rem}
.cta .titular{max-width:46rem}

/* ==========================================================
   CONTACTO
   ========================================================== */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:960px){.contacto{grid-template-columns:minmax(0,1fr)}}
.contacto__datos{display:grid;gap:0;margin:2rem 0 0;border-top:1.5px solid var(--tinta);max-width:34rem}
.contacto__datos div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--linea)}
.contacto__datos dt{font:500 .7rem/1.6 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.contacto__datos dd{margin:0;font-size:.97rem}
.formulario{background:var(--hoja);border:1.5px solid var(--tinta);border-radius:12px;padding:clamp(1.3rem,3vw,2.2rem)}
.formulario form{display:grid;gap:1.4rem}
.formulario__cab{display:flex;justify-content:space-between;padding-bottom:.9rem;border-bottom:1.5px solid var(--tinta);font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.campo input[type="text"],.campo input[type="email"],.campo textarea{
  width:100%;padding:.85rem .9rem;border:1.5px solid var(--tinta);border-radius:6px;background:var(--papel);color:var(--tinta);
  font:400 1rem/1.5 var(--f-ancha);
}
.campo textarea{resize:vertical;min-height:9rem}
.campo [aria-invalid="true"],.casilla [aria-invalid="true"]{border-color:var(--e-g);outline-color:var(--e-g)}
.formulario__error{margin:.5rem 0 0;font:500 .82rem/1.4 var(--f-mono);color:#B4231C}
:root[data-theme="dark"] .formulario__error{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .formulario__error{color:#FF8A80}}
.formulario__error--general{margin:0;padding:.8rem 1rem;border-radius:6px;background:color-mix(in srgb,var(--e-g) 12%,transparent)}
.casilla{display:flex;gap:.75rem;align-items:flex-start;font-size:.93rem;line-height:1.5;color:var(--tinta-2);cursor:pointer}
.casilla input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--e-a);flex-shrink:0}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulario .boton{justify-self:start}
.formulario__ok{display:grid;gap:1rem;justify-items:start;padding:1rem 0}
.formulario__ok p{margin:0;color:var(--tinta-2)}

/* Formas de colaborar (contacto): franjas de etiqueta energética */
.colaboraciones{display:grid;gap:.8rem}
.colaboracion{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;text-decoration:none;
  padding:1.1rem 1.2rem 1.1rem 0;background:var(--hoja);border:1px solid var(--linea);border-radius:10px;overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.colaboracion:hover{border-color:var(--tinta);transform:translateX(4px)}
.colaboracion__letra{
  display:grid;place-items:center;align-self:stretch;min-height:3.2rem;width:4.2rem;padding-right:.8rem;margin:-1.1rem 0;
  background:var(--c);color:#fff;font:900 1.6rem/1 var(--f-ancha);font-stretch:125%;
  clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);
}
.colaboracion[data-l="c"] .colaboracion__letra,.colaboracion[data-l="e"] .colaboracion__letra{color:#141a12}
.colaboracion strong{display:block;font:800 1.08rem/1.25 var(--f-ancha);font-stretch:112%;margin-bottom:.3rem}
.colaboracion > span:last-child{color:var(--tinta-2);font-size:.95rem;line-height:1.5}
.contacto__reglas{margin-top:2.2rem;padding-top:1.6rem;border-top:1.5px solid var(--tinta)}
.contacto__reglas ul{margin:0;padding-left:1.2rem;display:grid;gap:.5rem;font-size:.97rem}
.contacto__reglas li::marker{color:var(--e-a)}
.contacto__lector{margin:1.4rem 0 0;font-size:.93rem;color:var(--tinta-2)}

/* Aviso de contenido patrocinado o producto cedido */
.patrocinio{
  display:flex;gap:.9rem;align-items:flex-start;margin-top:0;margin-bottom:1.4rem;padding:1rem 1.2rem;
  border:1.5px solid var(--tinta);border-left:8px solid var(--e-e);border-radius:8px;background:var(--hoja);font-size:.95rem;line-height:1.5;
}
.patrocinio strong{display:block;font:500 .72rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem}
.art-rejilla > article > .patrocinio{max-width:var(--ancho)}
.ficha__patrocinado{position:absolute;top:1rem;right:1rem;z-index:2;padding:.35rem .6rem;border-radius:4px;background:var(--e-e);color:#141a12;font:500 .66rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}

/* ==========================================================
   AVISO DE COOKIES y PÁGINAS LEGALES
   ========================================================== */
.cookies{
  position:fixed;z-index:80;left:var(--gutter);bottom:clamp(12px,2vw,24px);width:min(440px,calc(100% - 2 * var(--gutter)));
  background:var(--hoja);color:var(--tinta);border:1.5px solid var(--tinta);border-radius:12px;padding:1.2rem 1.3rem 1.25rem;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);display:grid;gap:.85rem;
}
.cookies[hidden]{display:none}
.cookies__cab{display:flex;align-items:center;gap:.7rem}
.cookies__cab h2{margin:0;font:800 1.15rem/1.15 var(--f-ancha);font-stretch:115%}
.cookies__texto{margin:0;font-size:.9rem;line-height:1.5;color:var(--tinta-2)}
.cookies__panel{display:grid;gap:.6rem;padding:.8rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cookies__panel[hidden]{display:none}
.cookies__opcion{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;line-height:1.45;color:var(--tinta-2);cursor:pointer}
.cookies__opcion input{width:1.1rem;height:1.1rem;margin-top:.15rem;accent-color:var(--e-a);flex-shrink:0}
.cookies__opcion strong{display:block;color:var(--tinta)}
.cookies__acciones{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.cookies__acciones .boton{justify-content:center;padding:.8rem 1rem}
.cookies__acciones .boton[hidden]{display:none}
.cookies__config{grid-column:1/-1;background:none;border:0;padding:.3rem;font:600 .86rem/1 var(--f-ancha);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;color:var(--tinta)}
.cookies__acciones [data-cookies="guardar"]{grid-column:1/-1}
.pie__boton{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:color-mix(in srgb,var(--papel) 85%,transparent)}
.pie__boton:hover{color:var(--voltio)}

.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,5rem);padding-top:clamp(2rem,4vw,3rem);padding-bottom:5rem}
.legal__nav{position:sticky;top:96px;align-self:start;display:grid;gap:.15rem;border-left:1.5px solid var(--linea)}
.legal__nav-titulo{margin:0 0 .6rem 1rem;font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.legal__nav a{display:block;padding:.5rem 0 .5rem 1rem;margin-left:-1.5px;border-left:1.5px solid transparent;text-decoration:none;color:var(--tinta-2);font-size:.95rem}
.legal__nav a:hover{color:var(--tinta)}
.legal__nav a[aria-current="page"]{color:var(--tinta);font-weight:700;border-left-color:var(--e-a)}
.legal__cookies{margin:1rem 0 0 1rem;justify-self:start;background:none;border:0;padding:0;font:600 .88rem/1.3 var(--f-ancha);text-decoration:underline;text-underline-offset:.2em;color:var(--tinta);cursor:pointer}
.legal__texto{max-width:48rem}
.legal__texto > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__texto table{display:table}
.legal__texto table:not(:has(thead)) td:first-child{font-weight:600;white-space:nowrap;width:12rem}
.legal__texto table:has(thead) td:first-child{width:42%}
.legal__texto td{font-size:.93rem}
@media (max-width:860px){.legal{grid-template-columns:minmax(0,1fr)}.legal__nav{position:static;display:flex;flex-wrap:wrap;gap:.45rem;border-left:0}.legal__nav-titulo{display:none}.legal__nav a{margin:0;padding:.45rem .8rem;border:1px solid var(--linea);border-radius:999px;font-size:.85rem}.legal__nav a[aria-current="page"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}.legal__cookies{margin:.3rem 0 0 .2rem}.legal__texto table{display:block}.legal__texto td:first-child{white-space:normal!important;width:auto!important}}
@media print{.cookies{display:none}}

.hero__rejilla--solo{grid-template-columns:minmax(0,1fr)}
.hero__rejilla--solo .titular{max-width:none}
.explica{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.explica .prosa{max-width:46rem}
@media (max-width:960px){.explica{grid-template-columns:minmax(0,1fr)}}

.placa__modelo{margin:0 0 .8rem;font-size:.88rem;line-height:1.4}
.placa__modelo strong{display:block;font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.3rem}
.placa__modelo small{display:block;margin-top:.3rem;font:400 .7rem/1.35 var(--f-mono);color:var(--tinta-3)}

/* Precio e imagen oficiales de Amazon en la ficha */
.placa__foto{display:grid;place-items:center;background:#fff;border-radius:8px;padding:.8rem;aspect-ratio:1/1;max-height:200px}
.placa__foto img{max-width:100%;max-height:170px;width:auto;height:auto;object-fit:contain}
.placa__precio{position:relative;margin:0 0 .7rem;display:grid;gap:.2rem}
.placa__precio-valor{font:800 1.6rem/1 var(--f-ancha);font-stretch:118%}
.placa__precio-fecha{font:400 .7rem/1.4 var(--f-mono);color:var(--tinta-3)}
.placa__detalles{background:none;border:0;padding:0;font:inherit;color:var(--tinta);text-decoration:underline;text-underline-offset:.15em;cursor:help}
.placa__aviso-precio{
  position:absolute;z-index:5;left:0;right:-1rem;bottom:calc(100% + .4rem);padding:.75rem .85rem;border-radius:6px;
  background:var(--tinta);color:var(--papel);font:400 .74rem/1.45 var(--f-ancha);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:.15s;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
}
.placa__detalles:hover + .placa__aviso-precio,.placa__detalles:focus + .placa__aviso-precio,
.placa__precio-fecha:hover + .placa__aviso-precio,.placa__precio-fecha:focus-within + .placa__aviso-precio{opacity:1;visibility:visible;transform:none}

.tabla-consumo{display:table}
.tabla-consumo td:first-child{font-weight:600}
@media (max-width:760px){.tabla-consumo{display:block}}

.tema-intro{max-width:52rem;margin:0 0 clamp(2rem,4vw,3rem)}
.tema-intro p{font-size:1.08rem;line-height:1.7;color:var(--tinta-2);margin:0 0 1rem}
.tema-intro__herramientas{display:flex;flex-wrap:wrap;gap:1rem 2rem}

/* Gráficos de datos (HTML, no imagen) */
.grafico{margin-top:2.4em;margin-bottom:2.4em;padding:1.3rem 1.4rem;border:1.5px solid var(--tinta);border-radius:10px;background:var(--hoja)}
.grafico__titulo{font:800 1.05rem/1.25 var(--f-ancha);font-stretch:112%;margin-bottom:1.1rem}
.grafico__barras{display:grid;gap:.55rem}
.grafico__fila{display:grid;grid-template-columns:minmax(7rem,14rem) 1fr auto;gap:.8rem;align-items:center;font-size:.9rem}
.grafico__etiqueta{line-height:1.25}
.grafico__pista{height:1.15rem;background:var(--papel-2);border-radius:3px;overflow:hidden}
.grafico__barra{display:block;height:100%;width:var(--w);background:var(--c);border-radius:3px 0 0 3px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}
.grafico__valor{font:500 .85rem/1 var(--f-mono);white-space:nowrap;text-align:right;min-width:5.5rem}
.grafico__nota{margin:1rem 0 0;font:400 .76rem/1.45 var(--f-mono);color:var(--tinta-3)}
@media (max-width:560px){.grafico__fila{grid-template-columns:1fr auto}.grafico__pista{grid-column:1/-1;order:3}}
.prosa > .grafico{max-width:var(--ancho)}
/* Fuentes al final del artículo */
.fuentes-art{margin-top:3rem;padding-top:1.4rem;border-top:1.5px solid var(--tinta)}
.fuentes-art h2.rotulo{font-size:.72rem;margin-bottom:1rem}
.fuentes-art ol{margin:0 0 1rem;padding-left:1.3rem;display:grid;gap:.45rem;font-size:.93rem}
.fuentes-art p{font-size:.88rem;color:var(--tinta-2);margin:0}