/* ============================================================
   MetroEnergy · Estaciones de Autoconsumo
   Hoja de estilos única — tokens, componentes y animaciones.
   Todo el aspecto del sitio se controla desde aquí:
   el HTML no contiene ni un solo estilo en línea.
   ============================================================ */

/* ============================================================
   1. TOKENS — cambia aquí y cambia todo el sitio
   ============================================================ */
:root {
  /* ----- Paleta de marca (Pantone) ----- */
  --brand-blue: #0161a2; /* Directoire Blue 18-4244 */
  --brand-blue-dark: #0a3a63;
  --brand-orange: #e37e1f; /* Pantone P 24-8 C        */
  --brand-orange-deep: #e2761a;
  --brand-orange-light: #f5a623;
  --brand-yellow: #ffc400; /* Lemon Chrome 13-0859    */
  --brand-green: #25d366; /* WhatsApp                */
  --brand-green-dark: #12a150;

  /* ----- Superficies ----- */
  --surface-deep: #063158; /* fondo general azul      */
  --surface-deeper: #04223c; /* pie de página           */
  --surface-deepest: #03172a; /* franja de autoría      */
  --surface-light: #ffffff;
  --surface-veil-1: #052540;
  --surface-veil-2: #0d4e86;

  /* ----- Texto ----- */
  --text-on-dark: #e9f2fb;
  --text-on-dark-soft: #cfe0f0;
  --text-on-dark-softer: #bcd0e4;
  --text-on-dark-panel: #dce8f4;
  --text-on-dark-bright: #eaf3fb;
  --text-muted: #9db6cf;
  --text-muted-dim: #7d97b1;
  --text-on-light: #0a3a63;
  --text-on-light-soft: #4b5b6b;
  --text-on-light-label: #7a8794;
  --text-invert: #ffffff;

  /* ----- Bordes ----- */
  --border-light: #d6e2ee;
  --border-warm: #f0e2d0;
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --border-footer: rgba(255, 255, 255, 0.08);

  /* ----- Degradados ----- */
  --grad-accent: linear-gradient(
    90deg,
    var(--brand-orange-light),
    var(--brand-orange-deep)
  );
  --grad-highlight: linear-gradient(
    90deg,
    var(--brand-yellow),
    var(--brand-orange)
  );
  --grad-icon: linear-gradient(
    135deg,
    var(--brand-orange-light),
    var(--brand-orange-deep)
  );
  --grad-whatsapp: linear-gradient(
    90deg,
    var(--brand-green),
    var(--brand-green-dark)
  );

  /* ----- Fondo general de la página ----- */
  --page-bg:
    radial-gradient(
      1100px 700px at 78% -8%,
      var(--surface-veil-2),
      transparent 62%
    ),
    var(--surface-deep);

  /* ----- Imágenes (cámbialas sin tocar el HTML) ----- */
  --img-hero: url("assets/hero.webp");
  --img-card-llave: url("assets/proyecto-llave-en-mano.webp");
  --img-card-regularizar: url("assets/quiero-regulizarme.webp");
  --img-estatus: url("assets/estatus-autoconsumo.webp");

  /* ----- Tipografía ----- */
  --font-base: "Montserrat", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ----- Ritmo y forma ----- */
  --gutter-x: clamp(24px, 6vw, 110px);
  --section-y: clamp(64px, 9vw, 150px);
  --radius-card: 26px;
  --radius-box: 16px;
  --radius-icon: 14px;
  --radius-pill: 500px;
  /* Hueco reservado en el pie para el CTA flotante:
     alto del botón + su separación al borde inferior. */
  --float-cta-space: 110px;

  /* ----- Sombras ----- */
  --shadow-header: 0 10px 30px rgba(4, 26, 46, 0.15);
  --shadow-float: 0 14px 36px rgba(0, 0, 0, 0.3);
  --shadow-circle: 0 10px 30px rgba(0, 0, 0, 0.25);
  /* Las tarjetas de soluciones se apilan: la sombra es lo que
     separa una de la que queda debajo. */
  --shadow-card: 0 30px 70px rgba(4, 26, 46, 0.34);
  --shadow-cta: 0 12px 26px rgba(4, 26, 46, 0.3);
  --shadow-circle-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-logo: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  --text-shadow-hero: 0 8px 40px rgba(0, 0, 0, 0.4);
  --text-shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.45);
  --text-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.4);

  /* ----- Movimiento ----- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-duration: 0.8s;
  --reveal-shift: 28px;
  --scale-duration: 1.5s;
  --scale-from: 1.5;
  --header-transition: 0.35s ease;
  --acc-duration: 0.4s;
  --acc-panel-max: 320px; /* alto máximo del panel del acordeón */
  --acc-panel-gap: 12px;

  /* ----- Botón tipo píldora (valores por defecto) ----- */
  --btn-gap: 5px;
  --btn-pad-y: 18px;
  --btn-pad-x: 34px;
  --btn-font-size: 10px;
  --btn-tracking: 0.5px;
  --btn-bg: var(--grad-accent);
  --btn-color: var(--text-invert);
  --btn-circle-size: 56px;
  --btn-circle-bg: var(--surface-light);
  --btn-circle-shadow: none;
  --btn-circle-border: 0 solid transparent;

  /* ----- Barra de scroll ----- */
  --scrollbar-size: 12px; /* ancho de la barra (WebKit)       */
  --scrollbar-gap: 3px; /* aire entre el pulgar y el riel   */
  --scrollbar-width-ff: thin; /* auto | thin | none (Firefox)     */
  --scrollbar-track: var(--surface-deeper);
  --scrollbar-thumb: linear-gradient(
    180deg,
    var(--brand-orange-light),
    var(--brand-orange-deep)
  );
  --scrollbar-thumb-hover: linear-gradient(
    180deg,
    var(--brand-yellow),
    var(--brand-orange)
  );
  --scrollbar-thumb-solid: var(
    --brand-orange-deep
  ); /* Firefox no acepta degradado */

  /* ----- Cabecera ----- */
  --header-height-logo: clamp(38px, 3.6vw, 52px);
  --header-pad-y: 12px;
  --header-pad-x: clamp(20px, 3vw, 44px);
  --header-bg: transparent;
  --header-shadow: none;
  --header-bg-solid: var(--brand-blue-dark);
  --nav-color: var(--text-invert);
  --nav-color-solid: var(--text-on-light);
}

/* ============================================================
   2. RESET Y BASE
   ============================================================ */
* {
  box-sizing: border-box;
}
/* Smooth nativo SÓLO cuando Lenis no está activo. Si los dos
   corren a la vez se pelean por la posición y el scroll se
   atasca: Lenis marca <html class="lenis"> al arrancar. */
html:not(.lenis) {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--surface-deep);
}
body {
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-yellow);
  text-decoration: none;
}
a:hover {
  color: #ffd24a;
}
::selection {
  background: var(--brand-orange);
  color: var(--text-invert);
}

img {
  max-width: 100%;
}

/* Lienzo principal */
.me-page {
  position: relative;
  width: 100%;
  /* `clip` recorta igual que `hidden` pero NO convierte al
     elemento en contenedor de scroll, que es lo que hacía que
     compitiera con el scroll del documento. */
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--text-on-dark);
  background: var(--page-bg);
  font-family: var(--font-base);
}

/* ============================================================
   2b. SMOOTH SCROLL (Lenis)
   Reset mínimo que necesita la librería. Mientras Lenis está
   activo desactiva el scroll-behavior nativo; si el CDN falla,
   el sitio cae de vuelta al `scroll-behavior: smooth` de arriba.
   ============================================================ */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
/* Contenedores con scroll propio marcados con data-lenis-prevent.
   Hoy no hay ninguno —las tarjetas de soluciones dejaron de tener
   panel interno—, pero la regla es la que hace utilizable el
   atributo el día que haga falta. */
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ============================================================
   2c. BARRA DE SCROLL PERSONALIZADA
   ============================================================ */
/* Firefox */
html {
  scrollbar-width: var(--scrollbar-width-ff);
  scrollbar-color: var(--scrollbar-thumb-solid) var(--scrollbar-track);
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: var(--scrollbar-gap) solid var(--scrollbar-track);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* ============================================================
   2d. UTILIDAD · TEXTO CON DEGRADADO
   Resalta un fragmento dentro de cualquier titular recortando
   el degradado sobre las letras. Se usa envolviendo el trozo:
   <h2>Tu autoconsumo <span class="me-accent">…</span></h2>
   Cambia --accent-fill en el propio elemento para usar otro
   degradado (p. ej. --grad-highlight) sin tocar esta regla.
   ============================================================ */
.me-accent {
  color: var(--brand-orange-light); /* fallback si no hay background-clip */
  background: var(--accent-fill, var(--grad-accent));
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .me-accent {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ============================================================
   3. ANIMACIONES Y ESTADOS DE ENTRADA
   ============================================================ */

/* Destello perimetral del aviso CNE (llamada de atención) */
@keyframes avisoGlow {
  0%,
  100% {
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.18),
      0 0 0 0 rgba(245, 166, 35, 0);
  }
  50% {
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.18),
      0 0 0 4px rgba(245, 166, 35, 0.55),
      0 0 46px 8px rgba(245, 166, 35, 0.4);
  }
}

/* Aparición al entrar en viewport — JS sólo añade .is-visible */
[data-me-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-duration) var(--ease) var(--reveal-delay, 0s),
    transform var(--reveal-duration) var(--ease) var(--reveal-delay, 0s);
}
[data-me-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retardos en cascada, tomados del atributo data-delay del HTML */
[data-delay="80"] {
  --reveal-delay: 0.08s;
}
[data-delay="120"] {
  --reveal-delay: 0.12s;
}
[data-delay="160"] {
  --reveal-delay: 0.16s;
}
[data-delay="180"] {
  --reveal-delay: 0.18s;
}
[data-delay="200"] {
  --reveal-delay: 0.2s;
}
[data-delay="220"] {
  --reveal-delay: 0.22s;
}
[data-delay="240"] {
  --reveal-delay: 0.24s;
}
[data-delay="300"] {
  --reveal-delay: 0.3s;
}

/* Zoom lento de los fondos fotográficos */
[data-me-scale] {
  position: absolute;
  inset: 0;
  background-size: cover;
  transform: scale(var(--scale-from));
  transition: transform var(--scale-duration) var(--ease);
  will-change: transform;
}
[data-me-scale].is-visible {
  transform: scale(1);
}
/* Terminado el zoom, el JS marca .is-settled y se libera la capa
   promovida: dos fondos a pantalla completa con `will-change`
   permanente encarecen cada repintado del scroll. */
[data-me-scale].is-settled {
  will-change: auto;
}

/* Punto de control invisible para el cambio de cabecera */
.me-sentinel {
  position: absolute;
  top: 100px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-me-reveal],
  [data-me-scale] {
    transition-duration: 0.01ms;
  }
}

/* ============================================================
   4. ICONOS SVG (color y tamaño 100% desde CSS)
   ============================================================ */
.me-ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 24px;
  height: 24px;
}
.me-ico--filled {
  fill: currentColor;
  stroke: none;
}

/* ============================================================
   5. BOTÓN PÍLDORA (usado en toda la página)
   ============================================================ */
.me-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  flex: none;
}
.me-btn__circle {
  width: var(--btn-circle-size);
  height: var(--btn-circle-size);
  border-radius: 50%;
  background: var(--btn-circle-bg);
  border: var(--btn-circle-border);
  box-shadow: var(--btn-circle-shadow);
  display: grid;
  place-items: center;
  flex: none;
}
.me-btn__circle .me-ico {
  color: var(--brand-orange-deep);
  stroke-width: 2.2;
}
.me-btn__label {
  background: var(--btn-bg);
  border-radius: var(--radius-pill);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-weight: var(--fw-black);
  letter-spacing: var(--btn-tracking);
  font-size: var(--btn-font-size);
  color: var(--btn-color);
  text-transform: uppercase;
}

/* Variantes por contexto */
.me-btn--header {
  --btn-pad-y: 14px;
  --btn-pad-x: 26px;
  --btn-font-size: 12px;
}
.me-btn--header .me-btn__label {
  white-space: nowrap;
}

.me-btn--hero {
  --btn-pad-y: 14px;
  --btn-pad-x: 22px;
  --btn-font-size: clamp(12px, 1.05vw, 14px);
  --btn-circle-size: 48px;
  --btn-circle-shadow: var(--shadow-circle);
}

.me-btn--cne {
  --btn-pad-y: 18px;
  --btn-pad-x: 34px;
  --btn-font-size: clamp(14px, 1.25vw, 18px);
  --btn-circle-border: 1px solid var(--border-warm);
}

.me-btn--whatsapp {
  --btn-pad-y: 19px;
  --btn-pad-x: 36px;
  --btn-font-size: clamp(14px, 1.3vw, 19px);
  --btn-circle-size: 58px;
  --btn-circle-shadow: var(--shadow-circle-soft);
  --btn-bg: var(--grad-whatsapp);
}
.me-btn--whatsapp .me-btn__circle .me-ico {
  color: var(--brand-green);
  width: 30px;
  height: 30px;
}

.me-btn--footer {
  --btn-pad-y: 15px;
  --btn-pad-x: 28px;
  --btn-font-size: 15px;
  --btn-circle-size: 48px;
}
.me-btn--footer .me-btn__circle .me-ico {
  width: 20px;
  height: 20px;
}

/* ============================================================
   6. CABECERA FLOTANTE
   ============================================================ */
.me-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 15px;
  background: var(--header-bg);
  box-shadow: var(--header-shadow);
  transition:
    background var(--header-transition),
    box-shadow var(--header-transition);
}
/* Estado sólido: lo activa el JS al pasar el sentinel */
.me-header.is-solid {
  --header-bg: var(--header-bg-solid);
  /* --header-shadow:var(--shadow-header); */
  /* --nav-color:var(--nav-color-solid); */
}
/* Estado claro: la cabecera va sobre una sección blanca. Lo marca el
   JS mirando qué sección cruza la franja de la propia cabecera. Va
   después del sólido a propósito: cuando coinciden los dos —que es
   lo normal, porque las secciones claras están más abajo del hero—
   manda este. */
.me-header.is-light {
  --header-bg: var(--surface-light);
  --header-shadow: var(--shadow-header);
  --nav-color: var(--nav-color-solid);
}

.me-header__brand {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 50px);
}
.me-header__logo {
  height: var(--header-height-logo);
  width: auto;
  aspect-ratio: 1603 / 399; /* reserva el hueco antes de cargar */
  display: block;
  object-fit: contain;
  filter: var(--shadow-logo);
  transition: filter var(--header-transition);
}
.me-header.is-solid .me-header__logo {
  filter: none;
}
/* Del logotipo sólo existe la versión blanca, que sobre la cabecera
   clara desaparecería. Como es blanco puro con transparencia, basta
   teñirlo desde CSS: `brightness(0)` lo pasa a negro conservando el
   alfa y el resto de la cadena lo lleva al azul de marca (#0a3a63),
   el mismo de los enlaces. Si algún día existe un logotipo oscuro
   como archivo, esta regla sobra. */
.me-header.is-light .me-header__logo {
  filter: brightness(0) saturate(100%) invert(16%) sepia(56%)
    saturate(1352%) hue-rotate(180deg) brightness(95%) contrast(97%);
}

/* En escritorio el contenedor del menú no existe para el layout:
   `display: contents` deja que la nav y el CTA sigan siendo hijos
   directos del header, como antes de agrupar. Por debajo del punto
   de corte (sección 17) se convierte en el panel lateral. */
.me-header__menu {
  display: contents;
}

.me-nav {
  display: flex;
  /* Tope de 34px: con seis enlaces, 46px desbordaba el header
     contra el logo y el CTA en pantallas de ~1280px. */
  gap: clamp(16px, 2.2vw, 34px);
  align-items: flex-start;
  white-space: nowrap;
}
.me-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--nav-color);
  transition: color var(--header-transition);
}
.me-nav__link:hover {
  color: var(--nav-color);
}
.me-nav__ico {
  opacity: 0.6;
  width: 18px;
}

/* ============================================================
   7. CTA FIJO DE ASESOR
   ============================================================ */
.me-cta-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-whatsapp);
  border-radius: var(--radius-pill);
  padding: 16px 26px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
  color: var(--text-invert);
  font-size: 13px;
  text-transform: uppercase;
  box-shadow: var(--shadow-float);
  white-space: nowrap;
}
.me-cta-float:hover {
  color: var(--text-invert);
  transform: translateY(-2px);
}
.me-cta-float__ico {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

/* ============================================================
   8. HERO
   ============================================================ */
.me-hero {
  position: relative;
  width: 100vw;
  height: 110vh;
  min-height: 660px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.me-hero__bg {
  background-image: var(--img-hero);
  background-position: 60% center;
}
.me-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      135% 130% at 74% 44%,
      transparent 28%,
      var(--surface-deep) 100%
    ),
    linear-gradient(
      90deg,
      var(--surface-veil-1) 0%,
      rgba(6, 44, 71, 0.92) 30%,
      rgba(6, 44, 71, 0.28) 58%,
      transparent 80%
    ),
    linear-gradient(0deg, var(--surface-deep) 0%, transparent 24%),
    linear-gradient(180deg, rgba(5, 26, 46, 0.55) 0%, transparent 22%);
}
.me-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter-x);
  width: min(64vw, 1000px);
}
.me-hero__badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
  background: var(--grad-highlight);
  border-radius: var(--radius-pill);
  padding: clamp(10px, 1.2vw, 17px) clamp(16px, 1.6vw, 23px);
  margin-bottom: 2px;
}
.me-hero__badge-text {
  font-weight: var(--fw-black);
  letter-spacing: 0;
  font-size: clamp(26px, 4vw, 59px);
  color: var(--text-invert);
  text-transform: uppercase;
}
.me-hero__title {
  position: relative;
  z-index: 2;
  /* El margen negativo y el tracking van en `em`: asi se encogen
     junto a la letra en vez de comerse el titular en un telefono. */
  margin: -0.26em 0 clamp(28px, 3.4vw, 50px);
  font-weight: var(--fw-black);
  font-size: clamp(34px, 7vw, 98px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text-invert);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: var(--text-shadow-hero);
}
.me-hero__question {
  margin: 0 0 16px;
  font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--text-invert);
  width: 100%;
}
.me-hero__lead {
  margin: 0 0 42px;
  font-weight: var(--fw-regular);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--text-on-dark-soft);
  width: 42ch;
  max-width: 100%;
}

/* ============================================================
   9. AUTORIDADES
   ============================================================ */
.me-authorities {
  padding: 25px;
  text-align: center;
}

.me-authorities__content {
  /* background: var(--surface-light); */
  padding: clamp(72px, 12vw, 200px) 0;
  border-radius: clamp(28px, 3vw, 50px);
  /* border: 1px solid var(--brand-orange-deep); */
}

/* --- Eyebrow (antetítulo en formato píldora) --- */
.me-authorities__eyebrow {
  display: inline-block;
  margin: 0 0 22px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  font-weight: var(--fw-black);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-invert);
  white-space: nowrap;
}

.me-authorities__title {
  margin: 0 auto 64px;
  max-width: 790px;
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.2;
  /* letter-spacing: -0.5px; */
  color: var(--surface-light);
}
.me-authorities__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4.4vw, 90px);
}
.me-authority {
  /* Un solo tamaño y un solo respiro para los tres círculos */
  --authority-size: clamp(96px, 10.5vw, 150px);
  --authority-pad: clamp(16px, 1.9vw, 26px);
  --authority-zoom: 1; /* ajuste óptico por logotipo */
  width: var(--authority-size);
  height: var(--authority-size);
  border-radius: 50%;
  background: var(--surface-light);
  display: grid;
  place-items: center;
  padding: var(--authority-pad);
}
/* El PNG del SAT trae más aire alrededor de la marca que los otros dos:
   se compensa con un zoom óptico, no quitándole padding al círculo. */
.me-authority--sat {
  --authority-zoom: 1.12;
}
.me-authority__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--authority-zoom));
}

/* ============================================================
   10. SECCIÓN CNE (aviso + acordeones)
   ============================================================ */
.me-cne {
  padding: 0 clamp(24px, 5vw, 75px) clamp(48px, 6vw, 75px);
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: clamp(36px, 4.5vw, 80px);
  align-items: start;
}

/* --- Tarjeta de aviso --- */
.me-notice {
  --reveal-duration: 0.85s;
  background: var(--surface-light);
  border-radius: clamp(28px, 3vw, 50px);
  padding: clamp(24px, 3.4vw, 40px);
  animation: avisoGlow 3.6s ease-in-out infinite;
}
.me-notice__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* background: var(--grad-accent); */
  border-radius: var(--radius-pill);
  padding: 11px 24px;
  margin-bottom: 30px;
  border: 1px solid var(--brand-orange-deep);
}
.me-notice__tag .me-ico {
  color: var(--brand-orange-deep);
  width: 20px;
  height: 20px;
}
.me-notice__tag-text {
  font-weight: var(--fw-black);
  letter-spacing: 2px;
  font-size: 16px;
  color: var(--brand-orange-deep);
  text-transform: uppercase;
  white-space: nowrap;
}
.me-notice__title {
  margin: 0 0 22px;
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 3.6vw, 52px);
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--brand-blue);
  text-transform: uppercase;
}
.me-notice__text {
  margin: 0 0 34px;
  font-weight: var(--fw-regular);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--text-on-light-soft);
  max-width: 40ch;
}

/* --- Recuadro de fecha límite --- */
.me-deadline {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  border: 2px solid var(--brand-orange-deep);
  border-radius: var(--radius-box);
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.8vw, 24px);
  margin-bottom: 34px;
}
.me-deadline__ico {
  flex: none;
  width: clamp(32px, 3.4vw, 46px);
  height: clamp(32px, 3.4vw, 46px);
  stroke-width: 1.6;
  color: var(--brand-orange);
}
.me-deadline__label {
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  font-size: 13px;
  color: var(--text-on-light-label);
  text-transform: uppercase;
}
.me-deadline__date {
  font-weight: var(--fw-black);
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.12;
  color: var(--brand-orange-deep);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Columna de información --- */
.me-info {
  padding: clamp(24px, 5vw, 75px);
}
.me-info__head {
  margin-bottom: 50px;
}
.me-info__title {
  margin: 0;
  display: inline-block;
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.9vw, 42px);
  /* letter-spacing: -0.5px; */
  color: var(--text-invert);
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--brand-orange-light);
}
.me-acc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Acordeón --- */
.me-acc {
  --reveal-duration: 0.75s;
  --reveal-shift: 24px;
  /* El panel se sangra exactamente lo que ocupa el icono mas su
     hueco: basta cambiar estas dos medidas para reajustar todo. */
  --acc-ico: clamp(44px, 4.4vw, 56px);
  --acc-gap: clamp(12px, 1.6vw, 20px);
  border-bottom: 1px solid var(--border-on-dark);
  padding-bottom: 14px;
}
.me-acc__head {
  all: unset;
  cursor: pointer;
  display: flex;
  gap: var(--acc-gap);
  align-items: center;
  width: 100%;
}
.me-acc__ico-box {
  width: var(--acc-ico);
  height: var(--acc-ico);
  border-radius: var(--radius-icon);
  background: var(--grad-icon);
  display: grid;
  place-items: center;
  flex: none;
}
.me-acc__ico-box .me-ico {
  color: var(--text-invert);
  width: 26px;
  height: 26px;
}
.me-acc__title {
  flex: 1;
  font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.5vw, 22px);
  color: var(--text-invert);
}
.me-acc__chev {
  flex: none;
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
  color: var(--brand-orange-light);
  transition: transform 0.3s ease;
}
.me-acc.is-open .me-acc__chev {
  transform: rotate(90deg);
}
.me-acc__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--acc-duration) ease,
    opacity var(--acc-duration) ease,
    margin-top var(--acc-duration) ease;
  padding-left: calc(var(--acc-ico) + var(--acc-gap));
  font-weight: var(--fw-regular);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--text-on-dark-softer);
}
.me-acc.is-open .me-acc__panel {
  max-height: var(--acc-panel-max);
  opacity: 1;
  /* margin-top: var(--acc-panel-gap); */
}

/* ============================================================
   10b. ENCABEZADO DE SECCIÓN (píldora + titular + descripción)
   Componente reutilizable en cualquier sección.
   Por defecto se pinta para fondo claro; añade el modificador
   .me-section-head--on-dark cuando vaya sobre el azul.
   ============================================================ */
.me-section-head {
  --head-title-color: var(--text-on-light);
  --head-text-color: var(--text-on-light-soft);
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.me-section-head--on-dark {
  --head-title-color: var(--surface-light);
  --head-text-color: var(--text-on-dark-soft);
}

.me-section-head__eyebrow {
  display: inline-block;
  margin: 0 0 22px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  font-weight: var(--fw-black);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-invert);
  white-space: nowrap;
}
.me-section-head__title {
  margin: 0 auto 20px;
  max-width: 550px;
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.2;
  color: var(--head-title-color);
}
.me-section-head__text {
  margin: 0 auto;
  max-width: 52ch;
  font-weight: var(--fw-regular);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--head-text-color);
}

/* ============================================================
   11. SOLUCIONES (tarjetas que se apilan al hacer scroll)
   Cada tarjeta enseña ya toda su información: fuera el overlay
   que había que abrir con :hover y su scroll interno.

   El apilado es `position: sticky` puro: la tarjeta de arriba se
   queda clavada bajo la cabecera y la siguiente sube por encima.
   Lo resuelve el navegador en el compositor, sin un solo listener
   de scroll, así que no compite con Lenis: el scroll sigue siendo
   el del documento, que es justo lo que Lenis interpola. El matiz
   de escala y oscurecido de la tarjeta que queda debajo va con una
   animación guiada por scroll (`animation-timeline: view()`), que
   tampoco toca el hilo principal y que los navegadores que aún no
   la soportan ignoran por completo: se quedan con el apilado.
   ============================================================ */
.me-solutions {
  background: var(--surface-light);
  padding: clamp(64px, 9vw, 125px) clamp(24px, 5vw, 75px) clamp(32px, 4vw, 50px);
}

.me-stack {
  /* Altura a la que se clava cada tarjeta. Es el alto de la cabecera
     (unos 76px) más un respiro: pegada a ella la tarjeta parecía
     colgar del menú. */
  --stack-top: clamp(108px, 13vh, 148px);
  /* Cuánto asoma por arriba la tarjeta que ya quedó apilada. */
  --stack-peek: 18px;
  /* Separación entre tarjetas. Es una variable porque el rango de la
     animación de apilado se calcula con ella. */
  --stack-gap: clamp(24px, 5vh, 64px);
}
.me-stack__item + .me-stack__item {
  margin-top: var(--stack-gap);
}

.me-card {
  --reveal-duration: 0.85s;
  position: relative;
  isolation: isolate;
  /* Rejilla de una casilla: el cuerpo se estira hasta el alto de la
     tarjeta, que es lo que permite centrar su contenido cuando la
     tarjeta mide más que él. */
  display: grid;
  border-radius: clamp(24px, 2.6vw, 42px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.me-card__bg {
  position: absolute;
  inset: 0;
  background-image: var(--card-image);
  background-size: cover;
  background-position: center;
}
.me-card--llave {
  --card-image: var(--img-card-llave);
}
.me-card--regularizar {
  --card-image: var(--img-card-regularizar);
}
/* El velo sostiene la lectura sin apagar del todo la foto: carga
   a la izquierda, que es donde va el titular. */
.me-card__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(4, 26, 46, 0.9) 0%,
      rgba(4, 26, 46, 0.6) 44%,
      rgba(4, 26, 46, 0.28) 100%
    ),
    linear-gradient(180deg, rgba(4, 26, 46, 0.14) 0%, rgba(3, 20, 36, 0.4) 100%);
}
.me-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(26px, 3.2vw, 54px);
  padding: clamp(28px, 3.4vw, 56px);
}

/* ---------- Columna izquierda: el reclamo ---------- */
.me-card__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 24px);
}
.me-card__badge {
  display: inline-block;
  background: var(--grad-highlight);
  border-radius: var(--radius-pill);
  padding: clamp(10px, 1.1vw, 15px) clamp(18px, 2.2vw, 32px);
}
.me-card__badge-text {
  display: block;
  font-weight: var(--fw-black);
  letter-spacing: 0.5px;
  font-size: clamp(16px, 1.8vw, 26px);
  line-height: 1.1;
  color: var(--text-invert);
  text-transform: uppercase;
}
.me-card--regularizar .me-card__badge-text {
  font-size: clamp(15px, 1.6vw, 23px);
  line-height: 1.12;
}
.me-card__claim {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.25;
  color: var(--text-invert);
  text-shadow: var(--text-shadow-card);
  max-width: 21ch;
}
.me-card__claim--strong {
  font-weight: var(--fw-black);
}
.me-card__note {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--text-on-dark-bright);
  text-shadow: var(--text-shadow-card);
  max-width: 36ch;
}
.me-card__cta {
  margin-top: 4px;
  display: inline-block;
  text-align: center;
  background: var(--grad-accent);
  border-radius: var(--radius-pill);
  padding: clamp(13px, 1.3vw, 17px) clamp(22px, 2.4vw, 34px);
  font-weight: var(--fw-black);
  letter-spacing: 0.5px;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.2;
  color: var(--text-invert);
  text-transform: uppercase;
  box-shadow: var(--shadow-cta);
  transition: filter 0.25s var(--ease);
}
.me-card__cta:hover {
  color: var(--text-invert);
  filter: brightness(1.08);
}

/* ---------- Columna derecha: el detalle, siempre a la vista ---------- */
.me-card__detail {
  border: 1px solid var(--border-on-dark);
  border-radius: clamp(18px, 1.8vw, 26px);
  background: linear-gradient(
    180deg,
    rgba(4, 26, 46, 0.74),
    rgba(3, 20, 36, 0.9)
  );
  padding: clamp(22px, 2.2vw, 34px);
}
.me-card__detail-title {
  margin: 0 0 clamp(16px, 1.6vw, 22px);
  font-weight: var(--fw-black);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.8px;
  line-height: 1.35;
  color: var(--brand-yellow);
  text-transform: uppercase;
}
.me-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.me-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--border-footer);
  padding-top: clamp(10px, 1.1vw, 14px);
}
.me-step__num {
  min-width: 30px;
  padding: 3px 6px;
  border-radius: 7px;
  border: 1px solid rgba(255, 196, 0, 0.35);
  background: rgba(255, 196, 0, 0.12);
  font-weight: var(--fw-black);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--brand-yellow);
}
/* La segunda tarjeta enumera frentes de cumplimiento, no pasos en
   orden: en vez de número llevan una marca. */
.me-steps--marked .me-step::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--grad-highlight);
}
.me-step__title {
  font-weight: var(--fw-bold);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.3;
  color: var(--text-invert);
}
.me-step__text {
  margin-top: 4px;
  font-weight: var(--fw-regular);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.45;
  color: var(--text-on-dark-panel);
}
.me-steps__note {
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  font-weight: var(--fw-medium);
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.5;
  color: var(--text-on-dark-bright);
}

/* ---------- El apilado ----------
   Sólo donde la tarjeta cabe entera en pantalla. En móvil y en
   ventanas bajas clavarla sería peor que no hacerlo: las tarjetas
   se leen en flujo normal, una tras otra. */
@media (min-width: 861px) and (min-height: 640px) {
  .me-stack {
    /* Alto de la tarjeta clavada. El `+90px` la hace desbordar la
       pantalla por abajo a propósito: mientras está clavada su borde
       inferior nunca se ve, así no se lee como una ficha suelta
       apoyada en el blanco de la sección. */
    --card-h: calc(100vh - var(--stack-top) + 90px);
    /* Recorrido que la última tarjeta aguanta clavada antes de que
       la sección se vaya. */
    padding-bottom: clamp(24px, 8vh, 96px);
  }
  .me-stack__item {
    position: sticky;
    top: var(--stack-top);
  }
  .me-stack__item:nth-child(2) {
    top: calc(var(--stack-top) + var(--stack-peek));
  }
  .me-card {
    min-height: var(--card-h);
  }

  /* La tarjeta de abajo se encoge y se apaga mientras la de arriba
     sube sobre ella.

     La línea de tiempo la pone la pila entera, no la tarjeta que se
     encoge: el sujeto de un `view-timeline` no puede ser un elemento
     clavado, porque mientras lo está no se mueve respecto a la
     pantalla y su progreso se queda congelado. `.me-stack` es un
     bloque normal, así que su recorrido sí es el del scroll.

     Los dos extremos del rango van en píxeles contados desde el
     inicio de `cover` —el instante en que la pila asoma por el borde
     inferior—, que es lo que permite escribirlos con las mismas
     variables que colocan las tarjetas:

       inicio = alto de tarjeta + hueco
                → la segunda tarjeta asoma por abajo
       fin    = inicio + alto de pantalla - top - lo que asoma
                → la segunda tarjeta llega a su sitio

     Está escrito para las dos tarjetas que hay: una tercera pediría
     su propio rango, desplazado otro (alto + hueco). */
  @supports (animation-timeline: view()) {
    .me-stack {
      view-timeline-name: --me-stack;
    }
    .me-stack__item:nth-child(1) {
      transform-origin: center top;
      animation: me-stack-out linear both;
      animation-duration: auto;
      animation-timeline: --me-stack;
      animation-range: cover calc(var(--card-h) + var(--stack-gap))
        cover
        calc(
          var(--card-h) + var(--stack-gap) + 100vh - var(--stack-top) -
            var(--stack-peek)
        );
    }
  }
}
@keyframes me-stack-out {
  to {
    transform: scale(0.94);
    filter: brightness(0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .me-stack__item {
    animation: none;
  }
}

/* ============================================================
   12. ¿QUÉ ES UN AUTOCONSUMO?
   ============================================================ */
.me-what {
  background: var(--surface-light);
  padding: var(--section-y) var(--gutter-x);
}
.me-what__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.me-what__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.me-badge {
  display: inline-block;
  background: var(--grad-highlight);
  border-radius: var(--radius-pill);
  padding: 13px 34px;
  margin-bottom: 26px;
}
.me-badge--sm {
  padding: 10px 28px;
}
.me-badge__text {
  font-weight: var(--fw-black);
  letter-spacing: 0.5px;
  font-size: clamp(16px, 1.7vw, 24px);
  color: var(--text-invert);
  text-transform: uppercase;
}
.me-badge--sm .me-badge__text {
  font-size: clamp(14px, 1.35vw, 19px);
}
.me-what__text {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.6;
  color: var(--text-on-light-soft);
  max-width: 44ch;
}
.me-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.me-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.me-benefits__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-orange-deep);
  flex: none;
  margin-top: 9px;
}
.me-benefits__text {
  font-weight: var(--fw-semibold);
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.4;
  color: var(--text-on-light);
}
.me-what__figure {
  --reveal-duration: 0.9s;
  display: block;
  width: 100%;
  height: auto;
  /* Reserva el hueco antes de que cargue la imagen (4070x1329):
     sin esto la página da un salto en pleno scroll. */
  aspect-ratio: 4070 / 1329;
  margin-top: clamp(32px, 5vw, 90px);
}

/* ============================================================
   13. ESTATUS
   ============================================================ */
.me-status {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 72vh, 760px);
  padding: clamp(56px, 8vw, 130px) var(--gutter-x);
}
.me-status__bg {
  background-image: var(--img-estatus);
  background-position: center;
}
.me-status__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 26, 46, 0.9) 0%,
    rgba(6, 44, 71, 0.78) 40%,
    rgba(6, 49, 88, 0.35) 75%,
    rgba(6, 49, 88, 0.15) 100%
  );
}
.me-status__content {
  position: relative;
  z-index: 2;
  width: min(60vw, 900px);
}
.me-status__title {
  margin: 0 0 26px;
  font-weight: var(--fw-black);
  font-size: clamp(30px, 6.4vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--text-invert);
  text-transform: uppercase;
  text-shadow: var(--text-shadow-strong);
}
.me-status__text {
  margin: 0 0 40px;
  font-weight: var(--fw-medium);
  font-size: clamp(16px, 1.7vw, 26px);
  line-height: 1.5;
  color: var(--text-on-dark-bright);
  max-width: 40ch;
}
.me-strong {
  font-weight: var(--fw-black);
}
.me-strong--accent {
  font-weight: var(--fw-black);
  color: var(--brand-yellow);
}

/* ============================================================
   14. PIE DE PÁGINA
   ============================================================ */
.me-footer {
  background: var(--surface-deeper);
  /* El relleno inferior reserva el hueco del CTA flotante
     (.me-cta-float) para que nunca tape la línea legal. El valor
     vive en --float-cta-space y se reduce en móvil, donde el CTA
     pasa a ser sólo el círculo del icono. */
  padding: clamp(56px, 6vw, 90px) var(--gutter-x) var(--float-cta-space);
}
.me-footer__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
.me-footer__logo-box {
  display: inline-flex;
  border-radius: var(--radius-box);
  padding: 12px 20px;
  margin-bottom: 15px;
}
.me-footer__logo {
  height: clamp(56px, 6.5vw, 90px);
  width: auto;
  object-fit: contain;
}
.me-footer__about {
  margin: 0;
  max-width: 4100px;
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.me-footer__title {
  font-weight: var(--fw-black);
  letter-spacing: 1px;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--text-invert);
  margin-bottom: 18px;
}
.me-footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.me-footer__item {
  font-weight: var(--fw-medium);
  font-size: 16px;
  color: var(--text-muted);
}
/* Sin cambio al pasar el cursor (como el diseño original).
   Para resaltarlos, cambia el color de esta regla. */
a.me-footer__item:hover {
  color: var(--text-muted);
}
.me-footer__text {
  margin: 0 0 18px;
  font-weight: var(--fw-regular);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.me-footer__social-title {
  margin-top: 26px;
  margin-bottom: 12px;
  font-weight: var(--fw-black);
  letter-spacing: 1px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-invert);
}
.me-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.me-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-dark);
  color: var(--text-muted);
  transition:
    color var(--header-transition),
    border-color var(--header-transition),
    transform var(--header-transition);
}
.me-footer__social-link .me-ico {
  width: 20px;
  height: 20px;
}
.me-footer__social-link:hover {
  color: var(--text-invert);
  border-color: var(--brand-orange);
  transform: translateY(-2px);
}
.me-footer__social-link--wa:hover {
  color: var(--brand-green);
  border-color: var(--brand-green);
}
.me-footer__bottom {
  margin-top: clamp(40px, 5vw, 150px);
  padding-top: 28px;
  border-top: 1px solid var(--border-footer);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.me-footer__legal {
  font-weight: var(--fw-regular);
  font-size: 14px;
  color: var(--text-muted-dim);
}

/* Franja de autoría, la última banda de la página. El CTA flotante
   la solapa por la derecha, pero el texto va centrado y el hueco
   que el pie reserva (--float-cta-space) queda por encima: nada
   del contenido llega a taparse. */
.me-credit {
  background: var(--surface-deepest);
  border-top: 1px solid var(--border-footer);
  padding: 16px var(--gutter-x);
  text-align: center;
  font-weight: var(--fw-regular);
  font-size: 13px;
  color: var(--text-muted-dim);
}
.me-credit__link {
  color: var(--text-on-dark-soft);
  font-weight: var(--fw-semibold);
}
.me-credit__link:hover {
  color: var(--brand-orange-light);
}

/* ============================================================
   15. PÁGINA 404
   Reutiliza los tokens y el botón del sitio; sólo aporta el
   centrado vertical de la pantalla de error.
   ============================================================ */
.me-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: var(--section-y) var(--gutter-x);
}
.me-404__logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  margin-bottom: 24px;
}
/* El degradado sobre las cifras lo pone .me-accent (utilidad 2d). */
.me-404__code {
  margin: 0;
  font-weight: var(--fw-black);
  font-size: clamp(64px, 12vw, 120px);
  line-height: 1;
}
.me-404__title {
  margin: 0;
  font-weight: var(--fw-black);
  font-size: clamp(26px, 4vw, 40px);
  color: var(--text-invert);
}
.me-404__text {
  margin: 0 0 22px;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-on-dark-soft);
}

/* ============================================================
   16. HAMBURGUESA Y PANEL DE MENÚ
   El botón sólo aparece cuando la navegación colapsa (sección 17).
   Aquí se define su forma; allí, cuándo se ve.
   ============================================================ */
.me-burger {
  all: unset;
  display: none; /* lo enciende el punto de corte */
  box-sizing: border-box;
  cursor: pointer;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  padding: 12px 10px;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
}
.me-burger__bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  /* Sigue al color de la navegación: en la cabecera clara las barras
     tienen que oscurecerse igual que los enlaces. */
  background: var(--nav-color);
  transition:
    transform var(--header-transition),
    opacity var(--header-transition);
}
/* Abierto: las tres barras se convierten en una X */
.me-header.is-menu-open .me-burger__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.me-header.is-menu-open .me-burger__bar:nth-child(2) {
  opacity: 0;
}
.me-header.is-menu-open .me-burger__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Fondo oscuro tras el panel. Se oculta con visibility, no con
   display: así el fundido sí se anima al abrir y al cerrar. */
.me-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(3, 18, 32, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--header-transition),
    visibility var(--header-transition);
}
.me-header.is-menu-open ~ .me-scrim {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   17. PUNTOS DE CORTE
   Los tamaños ya son fluidos (clamp) en toda la hoja: aquí sólo
   se cambia lo que ninguna interpolación arregla — rejillas que
   deben apilarse, la navegación que colapsa y el hover que en
   táctil no existe.

   1080px · la cabecera deja de caber y las rejillas de dos
            columnas se quedan estrechas
    860px · tarjetas y contenidos a una sola columna
    600px · teléfono
   ============================================================ */

/* ---------- ≤ 1080px · tablet ---------- */
@media (max-width: 1080px) {
  /* --- Cabecera: la navegación pasa al panel lateral --- */
  /* El botón y el panel son hermanos dentro de la cabecera, así que
     se ordenan entre ellos: el botón necesita un z-index mayor que
     el del panel (70) o el panel lo tapa y no queda ninguna forma
     visible de cerrarlo. */
  .me-burger {
    display: flex;
    position: relative;
    z-index: 80;
  }
  /* Y la cabecera entera, por encima del fondo oscuro. */
  .me-header.is-menu-open {
    z-index: 75;
  }
  /* El panel es oscuro aunque la cabecera esté en claro: sus enlaces
     no pueden heredar el color de la cabecera o desaparecen. */
  .me-header__menu {
    --nav-color: var(--text-invert);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    width: min(340px, 86vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 96px 32px 40px;
    background: var(--brand-blue-dark);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform 0.35s var(--ease),
      visibility 0.35s var(--ease);
  }
  .me-header.is-menu-open .me-header__menu {
    transform: translateX(0);
    visibility: visible;
  }
  .me-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    white-space: normal;
  }
  .me-nav__link {
    font-size: 15px;
    letter-spacing: 0.8px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-on-dark);
  }
  .me-btn--header {
    --btn-pad-y: 16px;
    --btn-font-size: 13px;
    width: 100%;
    margin-top: 8px;
  }
  .me-btn--header .me-btn__label {
    display: block;
    text-align: center;
    white-space: normal;
  }

  /* --- Rejillas de dos columnas --- */
  .me-cne {
    grid-template-columns: 1fr;
  }
  .me-info {
    padding-left: 0;
    padding-right: 0;
  }
  .me-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* ---------- ≤ 860px · una sola columna ---------- */
@media (max-width: 860px) {
  /* El hero deja de medirse en vh: con la barra del navegador
     encogiéndose y creciendo, 110vh da saltos en móvil. */
  .me-hero {
    height: auto;
    min-height: 92svh;
    padding: 120px 0 72px;
  }
  .me-hero__content {
    width: 100%;
  }
  /* El titular es la pieza que debe dominar el hero. En escritorio
     se mide contra la columna de texto (7vw de min(64vw, 1000px));
     aquí esa columna es la pantalla entera, así que puede crecer
     hasta casi llenarla sin romper el `nowrap`: "AUTOCONSUMO" mide
     unos 9.2em en Montserrat Black, y el hueco útil es 88vw.
     La insignia lo acompaña para no robarle el protagonismo. */
  .me-hero__title {
    font-size: clamp(32px, 9.2vw, 84px);
  }
  .me-hero__badge-text {
    font-size: clamp(20px, 5.4vw, 48px);
  }
  .me-hero__lead {
    width: 100%;
  }
  /* El velo original oscurece la izquierda, porque en escritorio el
     texto ocupa esa mitad. Aquí el texto cruza toda la foto —cielo
     incluido—, así que se refuerza en vertical para no perder
     contraste sobre las zonas claras. */
  .me-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgba(4, 26, 46, 0.78) 0%,
        rgba(5, 33, 56, 0.52) 42%,
        rgba(6, 44, 71, 0.8) 76%,
        var(--surface-deep) 100%
      );
  }

  .me-what__grid {
    grid-template-columns: 1fr;
  }

  /* La tarjeta pasa a una columna: reclamo arriba, detalle debajo.
     Aquí no se clava (ver sección 11), así que se lee entera de
     corrido y su altura la fija su contenido. */
  .me-card__body {
    grid-template-columns: 1fr;
    gap: clamp(22px, 4vw, 34px);
  }
  /* Los pasos también bajan a una columna: en dos, cada celda se
     queda con ~130px y títulos como "Construcción y equipamiento"
     se parten letra a letra. */
  .me-steps {
    grid-template-columns: 1fr;
  }
  .me-card__claim,
  .me-card__note {
    max-width: 100%;
  }
  .me-what__intro {
    align-items: flex-start;
    text-align: left;
  }
  .me-status__content {
    width: 100%;
  }
  .me-status {
    min-height: 0;
  }
}

/* ---------- ≤ 600px · teléfono ---------- */
@media (max-width: 600px) {
  :root {
    /* El CTA flotante se reduce a un círculo: necesita menos hueco
       reservado al pie de la página. */
    --float-cta-space: 86px;
  }

  /* El CTA fijo se queda sólo con el icono. El texto sigue en el
     DOM para los lectores de pantalla; se oculta con font-size.
     El ancho y el alto van fijos: `letter-spacing` está en px, así
     que cada letra invisible seguía sumando media más de anchura y
     el círculo salía ovalado. */
  .me-cta-float {
    right: 16px;
    bottom: 16px;
    gap: 0;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    letter-spacing: 0;
    border-radius: 50%;
  }

  /* El botón del hero parte en dos líneas a esta anchura: con el
     texto y el círculo originales ocupaba media pantalla. */
  .me-btn--hero {
    --btn-pad-y: 12px;
    --btn-pad-x: 18px;
    --btn-font-size: 11px;
    --btn-tracking: 0.3px;
    --btn-circle-size: 40px;
  }
  .me-btn--hero .me-btn__circle .me-ico {
    width: 18px;
    height: 18px;
  }

  .me-authorities {
    padding: 25px 0;
  }
  .me-authorities__list {
    gap: 20px;
  }

  /* "31 de diciembre de 2026" no cabe en una línea a esta anchura */
  .me-deadline__date {
    white-space: normal;
  }

  .me-footer__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .me-footer__bottom {
    margin-top: 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* A esta anchura el círculo del CTA se come la esquina derecha de
     la franja: el texto se centra en el espacio que queda libre. */
  .me-credit {
    padding-right: 72px;
  }

  .me-404__logo {
    height: 48px;
  }
}