/* Medra Energy · sitio informativo (identidad Pulso)
   Concepto: el sitio se lee como un perfil de carga. La portada es un día medido cada 15 minutos;
   lo demás va en silencio: niebla y blanco, tinta para el texto, verde para el ahorro, ámbar solo para punta. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fuentes/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fuentes/archivo-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fuentes/plex-mono-500.woff2) format('woff2')}
:root {
  --tinta: #0F1F2B;
  --tinta-2: #16293A;      /* superficie elevada sobre tinta */
  --ahorro: #1E8A5A;
  --ahorro-claro: #3FBF83;
  --punta: #E09A2C;
  --pizarra: #4F5F6B;
  --niebla: #EEF2F4;
  --blanco: #FFFFFF;
  --linea: #D5DDE2;        /* niebla oscurecida hacia tinta */
  --linea-osc: #2A3D4D;
  --texto-osc: #B7C3CB;    /* texto secundario sobre tinta */

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-dato: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --t-xs: 0.78rem; --t-s: 0.9rem; --t-m: 1.0625rem; --t-l: 1.3rem; --t-xl: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); --t-xxl: clamp(2.2rem, 1.2rem + 4.2vw, 4.1rem);
  --ancho: 1160px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 var(--t-m)/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--ahorro); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--ahorro-claro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; max-width: 62ch; }
.dato { font-family: var(--f-dato); font-weight: 500; font-variant-numeric: tabular-nums; }
.etiqueta { font: 500 var(--t-xs)/1.3 var(--f-dato); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pizarra); }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.salto { position: absolute; left: -9999px; top: 0; background: var(--blanco); color: var(--tinta); padding: 8px 12px; z-index: 50; }
.salto:focus { left: 16px; top: 16px; }

/* Encabezado */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--tinta); }
.encabezado { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--tinta); border-bottom: 1px solid var(--linea-osc); }
.encabezado .envoltura { display: flex; align-items: center; gap: 24px; min-height: 64px; padding-block: 10px; }
.marca { display: block; line-height: 0; }
.marca svg { height: 38px; width: auto; display: block; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--texto-osc); text-decoration: none; font-size: var(--t-s); font-weight: 500; }
.nav a:hover { color: var(--blanco); }
.boton { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-s)/1 var(--f-texto); text-decoration: none; padding: 12px 18px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.boton--primario { background: var(--ahorro-claro); color: var(--tinta); }
.boton--primario:hover { background: #5FD09A; color: var(--tinta); }
.boton--borde { border-color: var(--linea-osc); color: var(--blanco); background: transparent; }
.boton--borde:hover { border-color: var(--texto-osc); color: var(--blanco); }
.boton--claro { border-color: var(--linea); color: var(--tinta); background: var(--blanco); }
.boton--claro:hover { border-color: var(--tinta); color: var(--tinta); }
.encabezado .boton { padding: 10px 14px; }
@media (max-width: 820px) { .nav { display: none; } .encabezado .boton { margin-left: auto; } .marca svg { height: 32px; } }

/* Portada */
.portada { background: var(--tinta); color: var(--blanco); }
.portada .envoltura { padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); display: grid; gap: clamp(32px, 4vw, 48px); }
.portada h1 { font-size: var(--t-xxl); max-width: 22ch; }
.portada h1 .linea { display: block; }
.portada h1 em { font-style: normal; color: var(--ahorro-claro); }
.portada .entrada { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; }
.portada .entrada p:not(.etiqueta) { color: var(--texto-osc); font-size: var(--t-l); line-height: 1.5; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 860px) { .portada .entrada { grid-template-columns: minmax(0, 1fr); } }

/* Gráfica del perfil de carga */
.grafica { background: var(--tinta-2); border: 1px solid var(--linea-osc); border-radius: 10px; padding: 20px 20px 14px; display: grid; gap: 14px; }
.grafica__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; }
.grafica__cabeza .etiqueta { color: var(--texto-osc); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 var(--t-xs)/1 var(--f-dato); color: var(--texto-osc); letter-spacing: 0.06em; text-transform: uppercase; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lienzo { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); }
.eje-y { position: relative; }
.eje-y span { position: absolute; right: 10px; transform: translateY(-50%); font: 500 var(--t-xs)/1 var(--f-dato); color: var(--texto-osc); font-variant-numeric: tabular-nums; }
.area { position: relative; aspect-ratio: 16 / 5; max-width: 100%; }
.area svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.banda-punta-etq { position: absolute; top: 6px; transform: translateX(-50%); font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.1em; color: var(--punta); white-space: nowrap; }
.nota { position: absolute; font: 500 var(--t-xs)/1.35 var(--f-dato); color: var(--blanco); background: rgba(15,31,43,0.88); border: 1px solid var(--linea-osc); border-radius: 6px; padding: 7px 9px; max-width: 26ch; }
.nota b { color: var(--ahorro-claro); font-weight: 500; }
.eje-x { grid-column: 2; position: relative; height: 22px; }
.eje-x span { position: absolute; top: 8px; transform: translateX(-50%); font: 500 var(--t-xs)/1 var(--f-dato); color: var(--texto-osc); }
.eje-x span:first-child { transform: none; }
.eje-x span:last-child { transform: translateX(-100%); }
.lectura { min-height: 1.4em; font: 500 var(--t-s)/1.4 var(--f-dato); color: var(--blanco); font-variant-numeric: tabular-nums; }
.lectura .gris { color: var(--texto-osc); }
.aclaracion { font-size: var(--t-xs); color: var(--texto-osc); }
.barra { cursor: crosshair; }
@media (max-width: 640px) {
  .area { aspect-ratio: 4 / 3; }
  .nota { display: none; }
  .lienzo { grid-template-columns: 34px minmax(0, 1fr); }
}

/* Cifras bajo la portada */
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea-osc); }
.cifras > div { padding: 20px 24px 4px 0; display: grid; gap: 6px; align-content: start; }
.cifras > div + div { padding-left: 24px; border-left: 1px solid var(--linea-osc); }
.cifras .dato { font-size: var(--t-xl); color: var(--blanco); line-height: 1; letter-spacing: -0.02em; }
.cifras p { color: var(--texto-osc); font-size: var(--t-s); }
@media (max-width: 760px) { .cifras { grid-template-columns: minmax(0, 1fr); } .cifras > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea-osc); } .cifras > div { padding-right: 0; padding-bottom: 16px; } }

/* Secciones */
.seccion .envoltura { padding-block: clamp(56px, 8vw, 104px); display: grid; gap: clamp(28px, 4vw, 48px); }
.seccion--niebla { background: var(--niebla); }
.cabeza { display: grid; gap: 14px; max-width: 70ch; }
.cabeza p:not(.etiqueta) { color: var(--pizarra); font-size: var(--t-l); line-height: 1.5; }

/* Qué hace: seis funciones en rejilla */
.funciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
.funcion { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--tinta); }
.funcion p { color: var(--pizarra); }
.funcion .etiqueta { color: var(--ahorro); }
@media (max-width: 900px) { .funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .funciones { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Cómo funciona: cadena de cuatro pasos */
.cadena { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: paso; }
.paso { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: 22px 20px 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.paso::before { counter-increment: paso; content: "0" counter(paso); font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.12em; color: var(--pizarra); }
.paso:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -13px; width: 10px; height: 10px; border-top: 2px solid var(--ahorro); border-right: 2px solid var(--ahorro); transform: translateY(-50%) rotate(45deg); }
.paso p { color: var(--pizarra); font-size: var(--t-s); }
.paso .icono { width: 40px; height: 40px; }
@media (max-width: 900px) {
  .cadena { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .paso:not(:last-child)::after { top: auto; bottom: -17px; right: auto; left: 32px; transform: rotate(135deg); }
}
.compatibles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.compatibles .etiqueta { margin-right: 6px; }
.chip { font: 500 var(--t-s)/1 var(--f-texto); padding: 9px 12px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--tinta); }

/* Del dato al ahorro */
.ahorro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: start; }
.ciclo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ciclo li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.ciclo li:first-child { border-top: 1px solid var(--linea); }
.ciclo .etiqueta { color: var(--tinta); padding-top: 4px; }
.ciclo p { color: var(--pizarra); }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(15,31,43,0.35); }
.tarjeta__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--niebla); border-bottom: 1px solid var(--linea); }
.tarjeta__cuerpo { padding: 20px 18px 22px; display: grid; gap: 16px; }
.estado { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.08em; text-transform: uppercase; color: #8A5A10; background: #FBEFD9; border-radius: 999px; padding: 6px 9px; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--punta); }
.mini { display: block; width: 100%; height: 64px; }
.pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pares div { background: var(--niebla); border-radius: 8px; padding: 12px; display: grid; gap: 4px; }
.pares dt { font: 500 var(--t-xs)/1.2 var(--f-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pizarra); }
.pares dd { margin: 0; font: 500 var(--t-l)/1.1 var(--f-dato); font-variant-numeric: tabular-nums; }
.pares dd.verde { color: var(--ahorro); }
.tarjeta p { font-size: var(--t-s); color: var(--pizarra); }
.tarjeta strong { color: var(--tinta); font-weight: 500; }
.pie-tarjeta { font-size: var(--t-xs); color: var(--pizarra); }
@media (max-width: 900px) { .ahorro { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ciclo li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Para quién */
.publicos { list-style: none; margin: 0; padding: 0; display: grid; }
.publicos li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) 150px; gap: 8px 40px; padding: 22px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.publicos li:first-child { border-top: 1px solid var(--tinta); }
.publicos p { color: var(--pizarra); }
.publicos .dato { font-size: var(--t-xs); color: var(--pizarra); letter-spacing: 0.06em; text-align: right; }
@media (max-width: 760px) { .publicos li { grid-template-columns: minmax(0, 1fr); } .publicos .dato { text-align: left; } }

/* Instaladores */
.instaladores { background: var(--tinta); color: var(--blanco); }
.instaladores .envoltura { padding-block: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.instaladores .etiqueta { color: var(--ahorro-claro); }
.instaladores p:not(.etiqueta) { color: var(--texto-osc); }
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--blanco); }
.lista-check li::before { content: ""; width: 14px; height: 8px; margin-top: 7px; border-left: 2px solid var(--ahorro-claro); border-bottom: 2px solid var(--ahorro-claro); transform: rotate(-45deg); }
@media (max-width: 860px) { .instaladores .envoltura { grid-template-columns: minmax(0, 1fr); } }

/* Contacto */
.contacto .envoltura { padding-block: clamp(56px, 8vw, 104px); display: grid; gap: 24px; justify-items: start; }
.correo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.correo a { font: 500 clamp(1.3rem, 0.9rem + 2.4vw, 2.4rem)/1.1 var(--f-dato); color: var(--tinta); text-decoration: none; border-bottom: 2px solid var(--ahorro-claro); padding-bottom: 4px; overflow-wrap: anywhere; }
.correo a:hover { color: var(--ahorro); }
.copiado { font: 500 var(--t-xs)/1 var(--f-dato); color: var(--ahorro); letter-spacing: 0.06em; min-width: 9ch; }
.contacto p:not(.etiqueta) { color: var(--pizarra); }

/* Pie */
.pie { background: var(--tinta); color: var(--texto-osc); font-size: var(--t-s); }
.pie .envoltura { padding-block: 40px 32px; display: grid; gap: 28px; }
.pie__arriba { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.pie__arriba svg { height: 34px; width: auto; display: block; }
.pie__firma { font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.14em; text-transform: uppercase; color: #8FA0AC; margin-top: 10px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.pie a { color: var(--texto-osc); text-decoration: none; }
.pie a:hover { color: var(--blanco); }
.pie__abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linea-osc); padding-top: 20px; font-size: var(--t-xs); }

/* Página 404 */
.p404 { min-height: 70vh; display: grid; align-content: center; }
.p404 .envoltura { padding-block: 64px; display: grid; gap: 20px; justify-items: start; }
.p404 .dato { font-size: clamp(3rem, 2rem + 6vw, 6rem); color: var(--punta); line-height: 1; }
@media (max-width: 420px) { .eje-x span.medio { display: none; } }
.opcional { display: inline-block; vertical-align: middle; margin-left: 6px; font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pizarra); border: 1px solid var(--linea); border-radius: 999px; padding: 5px 8px; }
.flecha { color: var(--ahorro); font-family: var(--f-dato); font-weight: 500; }