/* ==========================================================================
   BSG ENERGÍA — hoja de estilos del sitio
   Dirección de diseño: "Instrumento de medida"
   Paleta derivada del vector de precios horario (valle / llano / punta)
   ========================================================================== */

:root{
  /* superficies */
  --papel:      #F1F3F2;
  --papel-alt:  #E7EBEA;
  --blanco:     #FFFFFF;
  --petroleo:   #0F2F3B;
  --petroleo-2: #16404F;

  /* tinta */
  --tinta:      #14202A;
  --tinta-2:    #57697A;
  --tinta-inv:  #E8EEEF;
  --linea:      #D6DDE0;
  --linea-osc:  rgba(232,238,239,.18);

  /* escala de precio (señalética del sitio) */
  --valle:      #2B8C8C;
  --llano:      #E3A11B;
  --punta:      #C7443F;

  /* tipografía */
  --f-display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-texto:   'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-dato:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* medidas */
  --max: 1180px;
  --r: 4px;
  --pad-seccion: clamp(56px, 7vw, 104px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

.contenedor{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

/* --------------------------------------------------------------- tipografía */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; letter-spacing:-.025em; line-height:1.02; margin:0 0 .5em; }
h1{ font-size:clamp(2.5rem, 6.2vw, 5rem); line-height:.96; }
h2{ font-size:clamp(1.75rem, 3.6vw, 2.85rem); }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing:-.015em; }
h4{ font-size:1.02rem; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.entradilla{ font-size:clamp(1.08rem,1.5vw,1.32rem); line-height:1.55; color:var(--tinta-2); max-width:62ch; }
.medida{ max-width:66ch; }

.rotulo{
  font-family:var(--f-dato); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-2);
  display:block; margin-bottom:1.1rem;
}
.rotulo--valle{ color:var(--valle); }
.rotulo--llano{ color:#A9760D; }
.rotulo--punta{ color:var(--punta); }

.dato{ font-family:var(--f-dato); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-texto); font-weight:600; font-size:.98rem; letter-spacing:-.005em;
  padding:.85em 1.5em; border-radius:var(--r); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--solido{ background:var(--petroleo); color:var(--tinta-inv); }
.btn--solido:hover{ background:var(--tinta); }
.btn--linea{ border-color:var(--tinta); color:var(--tinta); }
.btn--linea:hover{ background:var(--tinta); color:var(--tinta-inv); }
.btn--claro{ background:var(--tinta-inv); color:var(--petroleo); }
.btn--claro:hover{ background:var(--blanco); }
.btn--fantasma{ border-color:var(--linea-osc); color:var(--tinta-inv); }
.btn--fantasma:hover{ border-color:var(--tinta-inv); }
.btn .flecha{ transition:transform .18s ease; }
.btn:hover .flecha{ transform:translateX(3px); }

.enlace{
  font-family:var(--f-dato); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; text-decoration:none; color:var(--tinta);
  border-bottom:1.5px solid var(--llano); padding-bottom:2px;
  display:inline-flex; gap:.5em; align-items:center;
}
.enlace:hover{ border-color:var(--tinta); }

:focus-visible{ outline:2.5px solid var(--llano); outline-offset:3px; }

/* ---------------------------------------------------------------- cabecera */
.barra-datos{
  background:var(--petroleo); color:var(--tinta-inv);
  font-family:var(--f-dato); font-size:.72rem; letter-spacing:.08em;
}
.barra-datos .contenedor{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; padding-block:.55rem; }
.barra-datos a{ text-decoration:none; opacity:.86; }
.barra-datos a:hover{ opacity:1; }
.barra-datos .sep{ opacity:.3; }
.barra-datos .empuje{ margin-left:auto; }

.cabecera{
  position:sticky; top:0; z-index:40;
  background:rgba(241,243,242,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
/* la cabecera usa un contenedor más ancho: el menú tiene etiquetas largas */
.cabecera .contenedor,
.barra-datos .contenedor{ max-width:1340px; }
.cabecera .contenedor{ display:flex; align-items:center; gap:1.1rem; min-height:74px; }
.marca{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; margin-right:auto; }
.marca__nombre{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; letter-spacing:-.03em; }
.marca__sufijo{ font-family:var(--f-dato); font-size:.66rem; letter-spacing:.18em; color:var(--tinta-2); text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:1.05rem; }
.nav a{
  text-decoration:none; font-size:.88rem; font-weight:500; color:var(--tinta);
  padding-block:.3rem; border-bottom:2px solid transparent; white-space:nowrap;
}
.nav a:hover{ border-color:var(--linea); }
.nav a[aria-current="page"]{ border-color:var(--punta); }
.cabecera .nav .btn{ font-size:.88rem; padding:.7em 1.1em; }
.nav a.btn{ border-bottom-width:1.5px; border-bottom-style:solid; }
.nav a.btn--solido{ color:var(--tinta-inv); border-color:var(--petroleo); }
.nav a.btn--solido:hover{ border-color:var(--tinta); }

.menu-btn{ display:none; background:none; border:1px solid var(--linea); border-radius:var(--r); padding:.5rem .7rem; cursor:pointer; font-family:var(--f-dato); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }

@media (max-width: 1150px){
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--blanco); border-bottom:1px solid var(--linea); padding:.5rem clamp(20px,5vw,40px) 1.2rem;
    display:none;
  }
  .nav.abierto{ display:flex; }
  .nav a{ width:100%; padding-block:.75rem; border-bottom:1px solid var(--linea); }
  .nav .btn{ margin-top:.8rem; width:100%; justify-content:center; }
  .menu-btn{ display:block; }
}
@media (max-width: 760px){ .barra-datos .ocultar-movil{ display:none; } }

/* ------------------------------------------------------------------- héroe */
.heroe{ padding-top:clamp(48px,6vw,84px); padding-bottom:0; overflow:hidden; }
.heroe__texto{ max-width:60ch; }
.heroe h1 .quiebre{ display:block; }
.heroe h1 em{ font-style:normal; color:var(--tinta-2); }
.heroe__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }

/* gráfico de la curva */
.curva{ margin-top:clamp(40px,5vw,68px); }
.curva__cabecera{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem; border-top:1.5px solid var(--tinta); padding-top:.7rem; margin-bottom:.4rem; }
.curva__titulo{ font-family:var(--f-dato); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.curva__nota{ font-family:var(--f-dato); font-size:.7rem; letter-spacing:.08em; color:var(--tinta-2); margin-left:auto; }
.curva__lienzo{ width:100%; height:clamp(150px,20vw,236px); display:block; }
.curva__horas{ display:flex; justify-content:space-between; font-family:var(--f-dato); font-size:.68rem; letter-spacing:.08em; color:var(--tinta-2); margin-top:.35rem; }
.curva__leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin-top:.7rem; font-family:var(--f-dato); font-size:.72rem; letter-spacing:.06em; color:var(--tinta-2); }
.curva__leyenda span{ display:inline-flex; align-items:center; gap:.45em; }
.punto{ width:9px; height:9px; border-radius:2px; display:inline-block; }

.trazo-curva{ fill:none; stroke:var(--tinta); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.anim-trazo{ stroke-dasharray:2600; stroke-dashoffset:2600; animation:dibuja 2.1s cubic-bezier(.65,.02,.28,1) .25s forwards; }
@keyframes dibuja{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .anim-trazo{ animation:none; stroke-dashoffset:0; } }

/* ------------------------------------------------------------- indicadores */
.indicadores{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); margin-top:clamp(40px,5vw,72px); }
.indicadores__rejilla{ display:grid; grid-template-columns:repeat(4,1fr); }
.indicador{ padding:1.8rem 1.6rem 1.8rem 0; border-right:1px solid var(--linea); }
.indicador:last-child{ border-right:0; }
.indicador:not(:first-child){ padding-left:1.6rem; }
.indicador b{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.35rem); letter-spacing:-.03em; display:block; line-height:1; }
.indicador span{ font-family:var(--f-dato); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); display:block; margin-top:.6rem; }
@media (max-width:760px){ .indicadores__rejilla{ grid-template-columns:repeat(2,1fr); }
  .indicador:nth-child(2n){ border-right:0; }
  .indicador:nth-child(-n+2){ border-bottom:1px solid var(--linea); } }

/* ---------------------------------------------------------------- secciones */
.seccion{ padding-block:var(--pad-seccion); }
.seccion--fina{ padding-block:calc(var(--pad-seccion) * .62); }
.seccion--osc{ background:var(--petroleo); color:var(--tinta-inv); }
.seccion--osc h2,.seccion--osc h3{ color:var(--tinta-inv); }
.seccion--osc .entradilla,.seccion--osc .rotulo{ color:#9DB4BC; }
.seccion--alt{ background:var(--papel-alt); }
.seccion--blanca{ background:var(--blanco); }

.cabecera-seccion{ max-width:64ch; margin-bottom:clamp(30px,4vw,52px); }
.cabecera-seccion--partida{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; max-width:none; align-items:end; }
@media (max-width:820px){ .cabecera-seccion--partida{ grid-template-columns:1fr; align-items:start; } }

/* ------------------------------------------------------------------ franja */
.franja{ display:flex; width:100%; height:7px; gap:1px; }
.franja i{ flex:1 1 auto; display:block; }
.franja--divisor{ margin-block:0; }

/* ---------------------------------------------------------------- tarjetas */
.rejilla{ display:grid; gap:1.2rem; }
.rejilla--2{ grid-template-columns:repeat(2,1fr); }
.rejilla--3{ grid-template-columns:repeat(3,1fr); }
.rejilla--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .rejilla--3,.rejilla--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .rejilla--2,.rejilla--3,.rejilla--4{ grid-template-columns:1fr; } }

.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:1.7rem 1.6rem 1.5rem; position:relative;
  display:flex; flex-direction:column; gap:.5rem;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tarjeta::before{ content:""; position:absolute; inset:-1px -1px auto -1px; height:3px; background:var(--acento,var(--linea)); border-radius:var(--r) var(--r) 0 0; }
a.tarjeta{ text-decoration:none; color:inherit; }
a.tarjeta:hover{ border-color:var(--tinta); transform:translateY(-3px); box-shadow:0 12px 28px -20px rgba(20,32,42,.5); }
.tarjeta p{ color:var(--tinta-2); font-size:.97rem; }
.tarjeta .pie{ margin-top:auto; padding-top:1.1rem; }
.seccion--osc .tarjeta{ background:var(--petroleo-2); border-color:var(--linea-osc); }
.seccion--osc .tarjeta p{ color:#9DB4BC; }

.etiqueta{
  font-family:var(--f-dato); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); display:block;
}

/* -------------------------------------------------------------------- lista */
.lista-check{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.lista-check li{ position:relative; padding-left:1.9rem; font-size:1rem; }
.lista-check li::before{
  content:""; position:absolute; left:0; top:.52em; width:11px; height:11px;
  border:2px solid var(--valle); border-radius:2px;
}
.lista-check strong{ font-weight:600; }
.seccion--osc .lista-check li::before{ border-color:var(--llano); }

.lista-guion{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.lista-guion li{ position:relative; padding-left:1.4rem; color:var(--tinta-2); font-size:.97rem; }
.lista-guion li::before{ content:"—"; position:absolute; left:0; color:var(--llano); font-family:var(--f-dato); }

/* -------------------------------------------------------------------- pasos */
.pasos{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--linea-osc); }
.paso{ padding:1.9rem 1.4rem 0 0; border-right:1px solid var(--linea-osc); }
.paso:not(:first-child){ padding-left:1.4rem; }
.paso:last-child{ border-right:0; }
.paso__num{ font-family:var(--f-dato); font-size:.76rem; letter-spacing:.14em; color:var(--llano); display:block; margin-bottom:1rem; }
.paso h3{ font-size:1.12rem; margin-bottom:.4rem; }
.paso p{ font-size:.95rem; color:#9DB4BC; }
@media (max-width:880px){ .pasos{ grid-template-columns:1fr; }
  .paso{ border-right:0; border-bottom:1px solid var(--linea-osc); padding:1.5rem 0; }
  .paso:not(:first-child){ padding-left:0; }
  .paso:last-child{ border-bottom:0; } }

/* -------------------------------------------------------------------- tabla */
.tabla-envoltura{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r); background:var(--blanco); }
table.datos{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:640px; }
table.datos th,table.datos td{ text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--linea); vertical-align:top; }
table.datos thead th{
  font-family:var(--f-dato); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-2); background:var(--papel-alt);
}
table.datos tbody tr:last-child td{ border-bottom:0; }
table.datos td:first-child{ font-weight:600; }

/* -------------------------------------------------------- bloque dos columnas */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:start; }
.duo--desigual{ grid-template-columns:.95fr 1.05fr; }
@media (max-width:880px){ .duo,.duo--desigual{ grid-template-columns:1fr; } }

.recuadro{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:1.6rem; }
.recuadro--acento{ border-left:3px solid var(--llano); }
.seccion--osc .recuadro{ background:var(--petroleo-2); border-color:var(--linea-osc); }

/* ------------------------------------------------------------------ cronograma */
.crono{ display:grid; gap:0; border-left:2px solid var(--linea); padding-left:1.6rem; }
.crono__hito{ position:relative; padding-bottom:1.7rem; }
.crono__hito:last-child{ padding-bottom:0; }
.crono__hito::before{ content:""; position:absolute; left:calc(-1.6rem - 7px); top:.5em; width:12px; height:12px; background:var(--llano); border-radius:50%; border:2px solid var(--papel); }
.crono__t{ font-family:var(--f-dato); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--punta); display:block; margin-bottom:.25rem; }

/* ----------------------------------------------------------------- acordeón */
.faq{ border-top:1px solid var(--linea); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.2rem 1.15rem 0; position:relative;
  font-family:var(--f-display); font-weight:700; font-size:1.06rem; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:.2rem; top:1rem; font-family:var(--f-dato); font-size:1.25rem; color:var(--punta); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding-bottom:1.2rem; color:var(--tinta-2); max-width:75ch; }

/* --------------------------------------------------------------- panel demo */
.panel{ background:var(--petroleo); border-radius:var(--r); padding:1.4rem; color:var(--tinta-inv); }
.panel__barra{ display:flex; align-items:center; gap:.8rem; font-family:var(--f-dato); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#9DB4BC; margin-bottom:1.1rem; }
.panel__barra .luz{ width:8px; height:8px; border-radius:50%; background:var(--valle); box-shadow:0 0 0 3px rgba(43,140,140,.25); }
.panel__cifras{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.1rem; }
.panel__cifra b{ font-family:var(--f-dato); font-size:1.35rem; display:block; letter-spacing:-.02em; }
.panel__cifra span{ font-family:var(--f-dato); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:#8AA3AC; }
.barras{ display:flex; align-items:flex-end; gap:2px; height:110px; }
.barras i{ flex:1; background:var(--valle); border-radius:1px 1px 0 0; display:block; min-height:2px; }

/* ---------------------------------------------------------------- formulario */
.formulario{ display:grid; gap:1.1rem; }
.campo{ display:grid; gap:.4rem; }
.campo label{ font-family:var(--f-dato); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); }
.campo input,.campo select,.campo textarea{
  font-family:var(--f-texto); font-size:1rem; color:var(--tinta);
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:.8rem .9rem;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--tinta); outline:none; box-shadow:0 0 0 3px rgba(227,161,27,.28); }
.campos-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:660px){ .campos-2{ grid-template-columns:1fr; } }
.legal{ font-size:.82rem; color:var(--tinta-2); line-height:1.55; }
.consentimiento{ display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; }
.consentimiento input{ margin-top:.28em; }

/* -------------------------------------------------------------------- cierre */
.cierre{ background:var(--tinta); color:var(--tinta-inv); }
.cierre .contenedor{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; padding-block:clamp(48px,6vw,76px); }
.cierre h2{ color:var(--tinta-inv); margin-bottom:.3em; }
.cierre p{ color:#9DB4BC; }
.cierre__acciones{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end; }
@media (max-width:820px){ .cierre .contenedor{ grid-template-columns:1fr; } .cierre__acciones{ justify-content:flex-start; } }

/* --------------------------------------------------------------------- pie */
.pie-sitio{ background:var(--petroleo); color:var(--tinta-inv); padding-block:clamp(46px,5vw,68px) 0; }
.pie-rejilla{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
@media (max-width:880px){ .pie-rejilla{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pie-rejilla{ grid-template-columns:1fr; } }
.pie-sitio h4{ font-family:var(--f-dato); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8AA3AC; font-weight:500; margin-bottom:1rem; }
.pie-sitio ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pie-sitio a{ text-decoration:none; color:#CFDDE1; font-size:.94rem; }
.pie-sitio a:hover{ color:var(--blanco); }
.pie-sitio .marca__nombre{ color:var(--tinta-inv); }
.pie-legal{ border-top:1px solid var(--linea-osc); margin-top:2.6rem; padding-block:1.4rem 2rem; font-size:.8rem; color:#8AA3AC; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; }
.feder{ border-top:1px solid var(--linea-osc); padding-block:1.6rem; font-size:.76rem; line-height:1.6; color:#7E979F; }

/* ------------------------------------------------------------------ revelado */
.revela{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.revela.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .revela{ opacity:1; transform:none; transition:none; } }

/* --------------------------------------------------------------- utilidades */
.mt-0{ margin-top:0; }
.mt-2{ margin-top:1.6rem; }
.mt-3{ margin-top:2.4rem; }
.mt-4{ margin-top:3.2rem; }
.centro{ text-align:center; }
.oculto-visual{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.aviso{
  font-family:var(--f-dato); font-size:.72rem; letter-spacing:.06em; color:#A9760D;
  background:rgba(227,161,27,.12); border:1px dashed rgba(227,161,27,.55);
  border-radius:var(--r); padding:.7rem .9rem; display:block;
}

/* ===================== AMPLIACIONES v2 ===================== */

/* diagramas y esquemas */
.diagrama{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:1.4rem 1.2rem; }
.diagrama svg{ width:100%; height:auto; display:block; }
.diagrama figcaption{ font-family:var(--f-dato); font-size:.72rem; letter-spacing:.06em; color:var(--tinta-2); margin-top:.9rem; }
.seccion--osc .diagrama{ background:var(--petroleo-2); border-color:var(--linea-osc); }
.dg-t{ font-family:var(--f-dato); font-size:11px; letter-spacing:.06em; fill:var(--tinta); }
.dg-s{ font-family:var(--f-dato); font-size:9.5px; letter-spacing:.04em; fill:var(--tinta-2); }
.dg-caja{ fill:var(--papel-alt); stroke:var(--linea); stroke-width:1; }
.dg-flecha{ stroke:var(--tinta-2); stroke-width:1.2; fill:none; }

/* documentos descargables */
.docs{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.docs a{ display:flex; align-items:baseline; gap:.8rem; text-decoration:none; color:inherit;
  border:1px solid var(--linea); border-radius:var(--r); background:var(--blanco); padding:.85rem 1rem; transition:border-color .18s ease; }
.docs a:hover{ border-color:var(--tinta); }
.docs .tipo{ font-family:var(--f-dato); font-size:.64rem; letter-spacing:.1em; color:var(--punta); border:1px solid var(--linea); border-radius:2px; padding:.15rem .4rem; }
.docs .nom{ font-weight:600; font-size:.96rem; }
.docs .desc{ color:var(--tinta-2); font-size:.86rem; margin-left:auto; text-align:right; }
@media(max-width:660px){ .docs .desc{ display:none; } }

/* artículo */
.articulo{ max-width:74ch; }
.articulo h2{ margin-top:2.4rem; }
.articulo h3{ margin-top:1.8rem; }
.articulo p{ font-size:1.04rem; }
.articulo ul{ padding-left:1.1rem; }
.articulo li{ margin-bottom:.5rem; color:var(--tinta); }
.meta-art{ font-family:var(--f-dato); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2); border-bottom:1px solid var(--linea); padding-bottom:1rem; margin-bottom:2rem; display:flex; gap:1.4rem; flex-wrap:wrap; }
.fuente{ font-size:.84rem; color:var(--tinta-2); border-left:2px solid var(--linea); padding-left:1rem; }
.fuente a{ color:var(--tinta); }

/* gráficos de ejemplo */
.gr{ background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r); padding:1.2rem; }
.gr__t{ font-family:var(--f-dato); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); margin-bottom:.9rem; display:block; }
.gr__leyenda{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.8rem; font-family:var(--f-dato); font-size:.68rem; color:var(--tinta-2); }
.gr__leyenda span{ display:inline-flex; align-items:center; gap:.4em; }

/* barras de coste apiladas */
.pila{ display:flex; align-items:stretch; gap:6px; height:190px; }
.pila .col{ flex:1; height:100%; position:relative; padding-bottom:20px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:1px; }
.pila .col i{ display:block; border-radius:1px; }
.pila .lab{ position:absolute; bottom:0; left:0; right:0; font-family:var(--f-dato);
  font-size:.62rem; color:var(--tinta-2); text-align:center; }


/* el índice de categorías del centro de ayuda cabe en dos filas en pantallas anchas */
.pag-ayuda .cats .wrap{ flex-wrap:wrap; overflow-x:visible; }
@media (max-width:760px){ .pag-ayuda .cats .wrap{ flex-wrap:nowrap; overflow-x:auto; } }


/* teléfonos de avería: número grande y pulsable en móvil */
.tel-averia{ font-family:var(--f-dato); font-weight:500; font-size:1.02rem; letter-spacing:.02em;
  color:var(--punta); text-decoration:none; border-bottom:1.5px solid rgba(199,68,63,.35); white-space:nowrap; }
.tel-averia:hover{ border-color:var(--punta); }


/* ---------------------------------------------------- mapa del sitio (portada) */
.mapa__raiz{ border:1px solid var(--linea); border-radius:var(--r); background:var(--papel-alt);
  padding:1rem 1.3rem; display:inline-flex; flex-direction:column; gap:.2rem; }
.mapa__eti{ font-family:var(--f-dato); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); }
.mapa__raiz b{ font-family:var(--f-display); font-weight:800; font-size:1.12rem; letter-spacing:-.02em; }
.mapa__ramas{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.4rem; position:relative; padding-top:1.4rem; }
.mapa__ramas::before{ content:""; position:absolute; top:0; left:12.5%; right:12.5%; height:1px; background:var(--linea); }
.mapa__col{ position:relative; padding-top:.2rem; }
.mapa__col::before{ content:""; position:absolute; top:-1.4rem; left:50%; width:1px; height:1.4rem; background:var(--linea); }
.mapa__cab{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:-.015em;
  text-decoration:none; color:var(--tinta); border-top:3px solid var(--acento,var(--linea));
  background:var(--blanco); border-left:1px solid var(--linea); border-right:1px solid var(--linea);
  border-bottom:1px solid var(--linea); border-radius:var(--r); padding:.85rem 1rem; line-height:1.2; }
.mapa__cab:hover{ border-color:var(--tinta); border-top-color:var(--acento,var(--tinta)); }
.mapa__lista{ list-style:none; margin:.7rem 0 0; padding:0 0 0 .9rem; display:grid; gap:.42rem;
  border-left:1px solid var(--linea); }
.mapa__lista a{ text-decoration:none; color:var(--tinta-2); font-size:.92rem; }
.mapa__lista a:hover{ color:var(--tinta); }
@media (max-width:900px){
  .mapa__ramas{ grid-template-columns:1fr 1fr; }
  .mapa__ramas::before{ display:none; }
  .mapa__col::before{ display:none; }
}
@media (max-width:560px){ .mapa__ramas{ grid-template-columns:1fr; } }

.mapa__fichas{ display:grid; gap:.55rem; }
.mapa__ficha{ display:block; text-decoration:none; color:inherit; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r); padding:.85rem 1rem; transition:border-color .18s ease; }
.mapa__ficha:hover{ border-color:var(--tinta); }
.mapa__ficha b{ display:block; font-weight:600; font-size:.98rem; }
.mapa__ficha span{ display:block; color:var(--tinta-2); font-size:.88rem; margin-top:.15rem; }


/* valores pendientes de confirmar, visibles pero sin afirmar nada */
.pdte{ font-family:var(--f-dato); font-size:.78rem; letter-spacing:.04em; color:#A9760D;
  background:rgba(227,161,27,.14); border:1px dashed rgba(227,161,27,.5); border-radius:2px; padding:.1rem .4rem; }
code{ font-family:var(--f-dato); font-size:.86em; background:var(--papel-alt); padding:.08em .3em; border-radius:2px; }