/* ==========================================================================
   Albunea: sitio de ventas. Requiere /css/tokens.css y /css/base.css antes.
   Solo usa variables --alb-* (y mezclas de ellas con color-mix).
   Dueño: Frontend sitio.
   ========================================================================== */

/* --- Banda «noche» ----------------------------------------------------------
   En modo claro es índigo profundo con texto marfil; en modo oscuro se funde
   con el cielo nocturno del fondo. Todo lo que va encima usa --n-*. */
.noche {
  --n-fondo: var(--alb-superficie-inversa);
  --n-texto: var(--alb-texto-inverso);
  --n-oro: var(--alb-acento);
  --n-violeta: var(--alb-amatista);
  position: relative;
  isolation: isolate;
  color: var(--n-texto);
  background-color: var(--n-fondo);
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--n-violeta) 38%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at 0% 110%, color-mix(in srgb, var(--alb-aurora) 26%, transparent), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .noche { --n-fondo: var(--alb-fondo); --n-texto: var(--alb-texto); }
}
:root[data-tema="oscuro"] .noche { --n-fondo: var(--alb-fondo); --n-texto: var(--alb-texto); }

.noche {
  --n-texto-2: color-mix(in srgb, var(--n-texto) 80%, var(--n-fondo));
  --n-linea: color-mix(in srgb, var(--n-texto) 16%, transparent);
}
.noche h1, .noche h2, .noche h3 { color: var(--n-texto); }
.noche a:not(.alb-boton) { color: var(--n-texto); }
.noche a:not(.alb-boton):hover { color: var(--n-oro); }
.noche :focus-visible { outline-color: var(--n-oro); }

/* Botón claro para fondos de noche */
.boton-noche {
  --_fondo: transparent;
  --_texto: var(--n-texto);
  --_borde: color-mix(in srgb, var(--n-texto) 55%, transparent);
}
.boton-noche:hover { --_fondo: color-mix(in srgb, var(--n-texto) 10%, transparent); }

/* Cielo decorativo (SVG en línea, solo líneas y puntos) */
.cielo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  color: var(--n-texto);
}
.cielo .estrella { fill: currentColor; }
.cielo .estrella--oro { fill: var(--n-oro); }
.cielo .orbita { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.12; }
.cielo .trazo { fill: none; stroke: var(--n-oro); stroke-width: 0.9; opacity: 0.5; stroke-linecap: round; stroke-linejoin: round; }
.cielo .luna-trazo { fill: none; stroke: var(--n-oro); stroke-width: 1.2; opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .cielo .titila { animation: titilar 5s ease-in-out infinite; }
  .cielo .titila:nth-of-type(3n) { animation-delay: -1.7s; animation-duration: 6.5s; }
  .cielo .titila:nth-of-type(4n) { animation-delay: -3.1s; animation-duration: 7.5s; }
}
@keyframes titilar { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }

/* --- Esqueleto -------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; }

.saltar {
  position: absolute; left: var(--alb-espacio-4); top: -100px; z-index: var(--alb-z-aviso);
  padding: var(--alb-espacio-2) var(--alb-espacio-4);
  background: var(--alb-acento); color: var(--alb-sobre-acento);
  border-radius: var(--alb-radio-m); font-weight: var(--alb-peso-medio);
}
.saltar:focus { top: var(--alb-espacio-3); color: var(--alb-sobre-acento); }

.icono { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }

/* --- Cabecera ----------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: var(--alb-z-menu);
  background-color: color-mix(in srgb, var(--n-fondo) 92%, transparent);
  background-image: none;
  border-bottom: 1px solid var(--n-linea);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
.cabecera__fila {
  display: flex; align-items: center; gap: var(--alb-espacio-5);
  min-height: 68px;
}
.cabecera__logo { display: inline-flex; flex: none; }
.cabecera__logo img { display: block; width: 168px; height: auto; }
.menu { display: flex; align-items: center; gap: var(--alb-espacio-5); margin-left: auto; }
.menu__lista { display: flex; gap: var(--alb-espacio-1); margin: 0; padding: 0; list-style: none; }
.menu__lista a {
  display: block; padding: var(--alb-espacio-2) var(--alb-espacio-3);
  font-size: var(--alb-tam-s); text-decoration: none;
  color: var(--n-texto-2); border-radius: var(--alb-radio-s);
}
.menu__lista a:hover { color: var(--n-texto); background: color-mix(in srgb, var(--n-texto) 8%, transparent); }
.menu__lista a[aria-current="page"] { color: var(--n-texto); box-shadow: inset 0 -2px 0 var(--n-oro); border-radius: 0; }
.menu__acciones { display: flex; align-items: center; gap: var(--alb-espacio-2); }
.menu__entrar { font-size: var(--alb-tam-s); text-decoration: none; padding: var(--alb-espacio-2) var(--alb-espacio-3); }

.menu-boton {
  display: none; margin-left: auto;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--n-texto); background: transparent;
  border: 1px solid var(--n-linea); border-radius: var(--alb-radio-m); cursor: pointer;
}
.menu-boton svg { width: 22px; height: 22px; }
.menu-boton__cerrar { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: block; }

@media (max-width: 920px) {
  .js .menu-boton { display: inline-flex; }
  .js .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--alb-espacio-4);
    padding: var(--alb-espacio-4) var(--alb-espacio-5) var(--alb-espacio-6);
    background: var(--n-fondo);
    border-bottom: 1px solid var(--n-linea);
    box-shadow: var(--alb-sombra-3);
  }
  .js .menu.abierto { display: flex; }
  .menu__lista { flex-direction: column; }
  .menu__lista a { padding: var(--alb-espacio-3); font-size: var(--alb-tam-m); }
  .menu__lista a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--n-oro); }
  .menu__acciones { flex-direction: column; align-items: stretch; }
  .menu__acciones .alb-boton { min-height: 48px; font-size: var(--alb-tam-m); }
  .menu__entrar { text-align: center; }
  html:not(.js) .cabecera__fila { flex-wrap: wrap; padding-block: var(--alb-espacio-3); }
  html:not(.js) .menu { flex-wrap: wrap; margin-left: 0; }
}

/* --- Portada: héroe ----------------------------------------------------------- */
.heroe { padding: var(--alb-espacio-8) 0 var(--alb-espacio-9); overflow: hidden; }
.heroe__rejilla {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--alb-espacio-8); align-items: center;
}
.etiqueta {
  display: inline-flex; align-items: center; gap: var(--alb-espacio-2);
  margin: 0 0 var(--alb-espacio-5);
  font-size: var(--alb-tam-xs); font-weight: var(--alb-peso-medio);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--alb-acento-texto);
}
.etiqueta .icono { width: 14px; height: 14px; color: var(--alb-acento); }
.noche .etiqueta { color: var(--n-oro); padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--n-oro) 45%, transparent); border-radius: var(--alb-radio-pleno); }
.noche .etiqueta .icono { color: var(--n-oro); }

.titular {
  margin: 0 0 var(--alb-espacio-5);
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5rem);
  font-weight: var(--alb-peso-medio);
  line-height: 1.02; letter-spacing: -0.025em;
  text-wrap: balance;
}
.titular__oro { color: var(--n-oro); font-style: italic; }
.entrada {
  max-width: 36rem; margin: 0 0 var(--alb-espacio-6);
  font-size: var(--alb-tam-l); line-height: 1.6;
  color: var(--n-texto-2);
}
.acciones { display: flex; flex-wrap: wrap; gap: var(--alb-espacio-3); align-items: center; }
.nota-cta {
  display: flex; flex-wrap: wrap; gap: var(--alb-espacio-2) var(--alb-espacio-4);
  margin: var(--alb-espacio-5) 0 0; padding: 0; list-style: none;
  font-size: var(--alb-tam-s); color: var(--n-texto-2);
}
.nota-cta li { display: inline-flex; align-items: center; gap: 6px; }
.nota-cta .icono { width: 15px; height: 15px; color: var(--n-oro); }

/* --- Demo visual: panel + alerta ------------------------------------------------ */
.demo { position: relative; margin: 0; padding-bottom: var(--alb-espacio-8); }
.demo__marca {
  position: absolute; top: -14px; right: 18px; z-index: 3;
}
.maq {
  position: relative; z-index: 1;
  color: var(--alb-texto);
  background: var(--alb-superficie);
  border: 1px solid var(--alb-borde);
  border-radius: var(--alb-radio-xl);
  box-shadow: var(--alb-sombra-3), 0 0 0 6px color-mix(in srgb, var(--n-texto) 6%, transparent);
  overflow: hidden;
}
.maq__barra {
  display: flex; align-items: center; gap: var(--alb-espacio-2);
  padding: var(--alb-espacio-3) var(--alb-espacio-4);
  font-size: var(--alb-tam-xs); color: var(--alb-texto-2);
  background: var(--alb-superficie-2);
  border-bottom: 1px solid var(--alb-borde);
}
.maq__barra img { width: 20px; height: 20px; }
.maq__sitio { font-weight: var(--alb-peso-medio); color: var(--alb-texto); }
.vivo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--alb-exito); font-weight: var(--alb-peso-medio); }
.vivo__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--alb-exito); box-shadow: 0 0 0 3px var(--alb-exito-fondo); }
@media (prefers-reduced-motion: no-preference) {
  .vivo__punto { animation: latir 2.4s ease-in-out infinite; }
}
@keyframes latir { 50% { box-shadow: 0 0 0 6px transparent; } }

.maq__cuerpo { padding: var(--alb-espacio-4); }
.maq__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-3); margin-bottom: var(--alb-espacio-3); }
.maq__cifra { padding: var(--alb-espacio-3); background: var(--alb-fondo); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); }
.maq__cifra span { display: block; font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }
.maq__cifra strong { display: block; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-xl); font-weight: var(--alb-peso-medio); font-variant-numeric: tabular-nums; }
.maq__grafica { display: block; width: 100%; height: 64px; margin-bottom: var(--alb-espacio-3); }
.grafica-rejilla { stroke: var(--alb-grafica-rejilla); stroke-width: 1; }
.grafica-area { fill: color-mix(in srgb, var(--alb-serie-1) 14%, transparent); }
.grafica-linea { fill: none; stroke: var(--alb-serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafica-punto { fill: var(--alb-superficie); stroke: var(--alb-serie-1); stroke-width: 2; vector-effect: non-scaling-stroke; }

.maq__lista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-m); overflow: hidden; }
.fila {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--alb-espacio-3); align-items: center;
  padding: 10px var(--alb-espacio-3);
  font-size: var(--alb-tam-xs);
  border-top: 1px solid var(--alb-borde);
}
.fila:first-child { border-top: 0; }
.fila--destacada { background: color-mix(in srgb, var(--alb-acento) 12%, var(--alb-superficie)); }
.avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-weight: var(--alb-peso-fuerte); font-size: var(--alb-tam-xs);
  color: var(--alb-primario); background: var(--alb-primario-suave);
}
.avatar--anonimo { color: var(--alb-texto-tenue); background: var(--alb-superficie-2); }
.avatar .icono { width: 16px; height: 16px; }
.fila__quien { display: block; font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio); color: var(--alb-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila__donde { display: block; color: var(--alb-texto-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila__puntaje { display: grid; justify-items: end; gap: 4px; font-weight: var(--alb-peso-fuerte); font-variant-numeric: tabular-nums; color: var(--alb-texto); }
.barra { display: block; width: 64px; height: 6px; }
.barra__fondo { fill: var(--alb-superficie-2); }
.barra__valor { fill: var(--alb-primario); }
.barra--alta .barra__valor { fill: var(--alb-acento); }

.alerta-maq {
  position: absolute; z-index: 2; left: -40px; bottom: 0;
  width: min(330px, 86%);
  padding: var(--alb-espacio-4);
  color: var(--alb-texto);
  background: var(--alb-superficie);
  border: 1px solid color-mix(in srgb, var(--alb-acento) 70%, var(--alb-borde));
  border-radius: var(--alb-radio-l) var(--alb-radio-l) var(--alb-radio-l) var(--alb-radio-s);
  box-shadow: var(--alb-sombra-3), var(--alb-sombra-halo);
}
.alerta-maq__cab { display: flex; align-items: center; gap: var(--alb-espacio-2); margin-bottom: var(--alb-espacio-3); font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }
.alerta-maq__cab img { width: 28px; height: 28px; padding: 3px; border-radius: 50%; background: var(--alb-superficie-inversa); }
.alerta-maq__cab strong { color: var(--alb-texto); font-size: var(--alb-tam-s); }
.alerta-maq__hora { margin-left: auto; font-variant-numeric: tabular-nums; }
.alerta-maq__titulo { margin: 0 0 4px; font-weight: var(--alb-peso-fuerte); font-size: var(--alb-tam-m); }
.alerta-maq p { margin: 0 0 4px; font-size: var(--alb-tam-s); }
.alerta-maq__contexto { color: var(--alb-texto-2); }
.alerta-maq__boton {
  display: block; margin-top: var(--alb-espacio-3); padding: var(--alb-espacio-2);
  text-align: center; font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio);
  color: var(--alb-primario); background: var(--alb-primario-suave); border-radius: var(--alb-radio-m);
}
.demo__pie { position: absolute; right: 0; bottom: 0; max-width: 40%; margin: 0; text-align: right; font-size: var(--alb-tam-xs); color: var(--n-texto-2); }
@media (prefers-reduced-motion: no-preference) {
  .alerta-maq { animation: aparecer 900ms 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- Secciones genéricas ----------------------------------------------------------- */
.seccion { padding: var(--alb-espacio-9) 0; }
.seccion--alterna { background: var(--alb-superficie-2); border-block: 1px solid var(--alb-borde); }
.seccion--estrecha { padding: var(--alb-espacio-8) 0; }
.encabezado { max-width: 46rem; margin: 0 0 var(--alb-espacio-7); }
.encabezado--centro { margin-inline: auto; text-align: center; }
.encabezado--centro .etiqueta { justify-content: center; }
.encabezado h2, .titulo-2 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  font-weight: var(--alb-peso-medio);
  letter-spacing: -0.02em; text-wrap: balance;
}
.encabezado p { font-size: var(--alb-tam-l); color: var(--alb-texto-2); margin: 0; }
.noche .encabezado p { color: var(--n-texto-2); }

.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-5); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alb-espacio-5); }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--alb-espacio-5); }

/* Problema: dato grande */
.dato {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--alb-espacio-7); align-items: center;
  padding: var(--alb-espacio-7);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-xl);
  box-shadow: var(--alb-sombra-2);
}
.dato__cifra {
  font-family: var(--alb-fuente-titulo); font-size: clamp(4rem, 2rem + 8vw, 8rem); line-height: 0.9;
  font-weight: var(--alb-peso-medio); letter-spacing: -0.04em; color: var(--alb-primario);
  font-variant-numeric: lining-nums;
}
.dato__cifra small { font-size: 0.4em; letter-spacing: 0; color: var(--alb-acento-texto); }
.dato h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); font-weight: var(--alb-peso-medio); text-wrap: balance; }
.dato p { color: var(--alb-texto-2); margin: 0; }
.dato__fuente { display: block; margin-top: var(--alb-espacio-3); font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }

/* Tres miradas */
.mirada {
  position: relative;
  padding: var(--alb-espacio-6);
  background: var(--alb-superficie);
  border: 1px solid var(--alb-borde);
  border-radius: var(--alb-radio-xl);
  box-shadow: var(--alb-sombra-1);
  transition: box-shadow var(--alb-transicion), transform var(--alb-transicion);
}
.mirada:hover { box-shadow: var(--alb-sombra-2); transform: translateY(-2px); }
.sello {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: var(--alb-espacio-5);
  color: var(--alb-primario);
  border: 1px solid var(--alb-borde-fuerte);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--alb-primario-suave) 0 60%, transparent 61%);
  position: relative;
}
.sello::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--alb-acento) 70%, transparent);
}
.sello .icono { width: 26px; height: 26px; }
.mirada h3 { font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-3); }
.mirada p { margin: 0; color: var(--alb-texto-2); }
.mirada__num { position: absolute; top: var(--alb-espacio-5); right: var(--alb-espacio-6); font-family: var(--alb-fuente-titulo); font-style: italic; color: var(--alb-acento-texto); font-size: var(--alb-tam-l); }

/* Cómo funciona: constelación de 5 pasos */
.pasos-cielo { display: block; width: 100%; height: auto; margin-bottom: var(--alb-espacio-2); color: var(--n-texto); }
.pasos-cielo .linea { fill: none; stroke: var(--n-oro); stroke-width: 1.2; opacity: 0.65; stroke-dasharray: 4 6; }
.pasos-cielo .halo { fill: color-mix(in srgb, var(--n-oro) 22%, transparent); }
.pasos-cielo .astro { fill: var(--n-oro); }
.pasos-cielo .polvo { fill: currentColor; opacity: 0.5; }
.pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--alb-espacio-5); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.paso { counter-increment: paso; }
.paso__num {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--alb-espacio-3);
  font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-m);
  color: var(--n-oro); border: 1px solid color-mix(in srgb, var(--n-oro) 55%, transparent); border-radius: 50%;
}
.paso h3 { font-size: var(--alb-tam-xl); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-2); }
.paso p { margin: 0; color: var(--n-texto-2); font-size: var(--alb-tam-s); }

/* Código */
.codigo {
  margin-top: var(--alb-espacio-7);
  background: color-mix(in srgb, var(--n-texto) 6%, transparent);
  border: 1px solid var(--n-linea);
  border-radius: var(--alb-radio-l);
}
.codigo > summary {
  display: flex; align-items: center; gap: var(--alb-espacio-3);
  padding: var(--alb-espacio-4) var(--alb-espacio-5);
  cursor: pointer; list-style: none; font-weight: var(--alb-peso-medio);
}
.codigo > summary::-webkit-details-marker { display: none; }
.codigo > summary::after { content: "+"; margin-left: auto; font-size: var(--alb-tam-xl); line-height: 1; color: var(--n-oro); }
.codigo[open] > summary::after { content: "−"; }
.codigo__cuerpo { padding: 0 var(--alb-espacio-5) var(--alb-espacio-5); }
.codigo__cuerpo p { margin: var(--alb-espacio-3) 0 0; font-size: var(--alb-tam-s); color: var(--n-texto-2); }
.bloque-codigo {
  margin: 0; padding: var(--alb-espacio-4);
  font-size: var(--alb-tam-s); line-height: 1.6; white-space: pre; overflow-x: auto;
  color: var(--alb-texto-inverso);
  background: var(--alb-superficie-inversa);
  border: 1px solid color-mix(in srgb, var(--alb-acento) 30%, transparent);
  border-radius: var(--alb-radio-m);
  tab-size: 2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .bloque-codigo { color: var(--alb-texto); background: var(--alb-fondo); }
}
:root[data-tema="oscuro"] .bloque-codigo { color: var(--alb-texto); background: var(--alb-fondo); }
.bloque-codigo .c { color: var(--alb-acento); }

/* Privacidad (portada) */
.privacidad {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--alb-espacio-8); align-items: center;
}
.privacidad__texto p { color: var(--alb-texto-2); font-size: var(--alb-tam-l); }
.garantias { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--alb-espacio-3); }
.garantia {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--alb-espacio-4); align-items: start;
  padding: var(--alb-espacio-4) var(--alb-espacio-5);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l);
}
.garantia .icono { width: 22px; height: 22px; margin: 9px; color: var(--alb-exito); }
.garantia strong { display: block; margin-bottom: 2px; }
.garantia span { color: var(--alb-texto-2); font-size: var(--alb-tam-s); }

/* Instalación y plataformas */
.plataformas { display: flex; flex-wrap: wrap; gap: var(--alb-espacio-2); margin: var(--alb-espacio-5) 0 0; padding: 0; list-style: none; }
.plataformas li {
  padding: var(--alb-espacio-2) var(--alb-espacio-4);
  font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde-fuerte); border-radius: var(--alb-radio-pleno);
}
.instalacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--alb-espacio-8); align-items: center; }
.instalacion > div:not(.ventana) > p { color: var(--alb-texto-2); font-size: var(--alb-tam-l); }
.ventana {
  background: var(--alb-superficie-inversa); border-radius: var(--alb-radio-l); box-shadow: var(--alb-sombra-3); overflow: hidden;
  border: 1px solid var(--alb-borde);
}
.ventana__barra { display: flex; align-items: center; gap: 6px; padding: var(--alb-espacio-3) var(--alb-espacio-4); border-bottom: 1px solid color-mix(in srgb, var(--alb-texto-inverso) 14%, transparent); }
.ventana__barra i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--alb-texto-inverso) 30%, transparent); }
.ventana__barra span { margin-left: var(--alb-espacio-2); font-family: var(--alb-fuente-mono); font-size: var(--alb-tam-xs); color: color-mix(in srgb, var(--alb-texto-inverso) 70%, transparent); }
.ventana .bloque-codigo { border: 0; border-radius: 0; background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ventana { background: var(--alb-fondo); }
  :root:not([data-tema="claro"]) .ventana__barra span { color: var(--alb-texto-tenue); }
  :root:not([data-tema="claro"]) .ventana__barra i { background: var(--alb-borde-fuerte); }
}
:root[data-tema="oscuro"] .ventana { background: var(--alb-fondo); }
.ventana__pie { padding: var(--alb-espacio-3) var(--alb-espacio-4); font-size: var(--alb-tam-xs); color: color-mix(in srgb, var(--alb-texto-inverso) 75%, transparent); border-top: 1px solid color-mix(in srgb, var(--alb-texto-inverso) 14%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ventana__pie { color: var(--alb-texto-tenue); } }
:root[data-tema="oscuro"] .ventana__pie { color: var(--alb-texto-tenue); }

/* Para quién */
.perfil {
  display: flex; flex-direction: column;
  padding: var(--alb-espacio-5);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l);
}
.perfil .icono { width: 28px; height: 28px; color: var(--alb-amatista); margin-bottom: var(--alb-espacio-4); }
.perfil h3 { font-size: var(--alb-tam-xl); font-weight: var(--alb-peso-medio); }
.perfil p { color: var(--alb-texto-2); font-size: var(--alb-tam-s); }
.perfil__plan { margin-top: auto; padding-top: var(--alb-espacio-3); font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio); }
.perfil__plan a { text-decoration: none; }
.perfil__plan a::after { content: " →"; }

/* Contraprueba: fases y reporte de ejemplo */
.contraprueba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--alb-espacio-8); align-items: center; }
.contraprueba p { color: var(--alb-texto-2); font-size: var(--alb-tam-l); }
.fases { display: block; width: 100%; max-width: 420px; height: auto; margin: var(--alb-espacio-5) 0 var(--alb-espacio-2); color: var(--alb-primario); }
.fases .contorno { fill: none; stroke: currentColor; stroke-width: 1.2; }
.fases .luz { fill: currentColor; }
.fases .llena { fill: var(--alb-acento); stroke: var(--alb-acento); }
.fases__leyenda { display: flex; justify-content: space-between; max-width: 420px; font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }
.reporte { position: relative; }
.reporte__fila { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3.5rem; gap: var(--alb-espacio-3); align-items: center; margin-bottom: var(--alb-espacio-3); font-size: var(--alb-tam-s); }
.reporte__fila strong { text-align: right; font-variant-numeric: tabular-nums; }
.reporte__barra { display: block; width: 100%; height: 14px; }
.reporte__barra .fondo { fill: var(--alb-superficie-2); }
.reporte__barra .valor-1 { fill: var(--alb-serie-1); }
.reporte__barra .valor-control { fill: var(--alb-borde-fuerte); }
.reporte__resultado { display: flex; align-items: baseline; gap: var(--alb-espacio-3); margin-top: var(--alb-espacio-5); padding-top: var(--alb-espacio-4); border-top: 1px solid var(--alb-borde); }
.reporte__resultado .alb-tarjeta__cifra { color: var(--alb-exito); }
.reporte__nota { margin: var(--alb-espacio-3) 0 0; font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }
.marca-ejemplo { position: absolute; top: var(--alb-espacio-4); right: var(--alb-espacio-4); }

/* Banda de diagnóstico */
.diagnostico {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--alb-espacio-6); align-items: center;
  padding: var(--alb-espacio-6) var(--alb-espacio-7);
  background: var(--alb-superficie);
  border: 1px solid var(--alb-acento); border-radius: var(--alb-radio-xl);
  box-shadow: var(--alb-sombra-halo);
}
.diagnostico__icono { width: 64px; height: 64px; color: var(--alb-acento-texto); }
.diagnostico h2 { font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-2); }
.diagnostico p { margin: 0; color: var(--alb-texto-2); }

/* Cierre */
.cierre { padding: var(--alb-espacio-9) 0; text-align: center; overflow: hidden; }
.cierre h2 { max-width: 40rem; margin: 0 auto var(--alb-espacio-6); font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); font-weight: var(--alb-peso-medio); text-wrap: balance; }
.cierre .acciones { justify-content: center; }
.cierre__ojo { width: 72px; height: 72px; margin: 0 auto var(--alb-espacio-5); display: block; }

/* --- Páginas internas: héroe corto ------------------------------------------------ */
.heroe-corto { padding: var(--alb-espacio-8) 0; overflow: hidden; }
.heroe-corto .titular { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4rem); max-width: 18ch; }
.heroe-corto--centro { text-align: center; }
.heroe-corto--centro .titular, .heroe-corto--centro .entrada { margin-inline: auto; }
.heroe-corto--centro .acciones { justify-content: center; }

/* Empresas */
.heroe-empresa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--alb-espacio-8); align-items: center; }
.sello-grande { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; color: var(--n-texto); }
.sello-grande .geo { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.35; }
.sello-grande .geo-oro { fill: none; stroke: var(--n-oro); stroke-width: 1.2; opacity: 0.9; }
.sello-grande .punto-oro { fill: var(--n-oro); }
.sello-grande .iris { fill: var(--n-violeta); }

.bloque {
  padding: var(--alb-espacio-6);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l);
}
.bloque .icono { width: 26px; height: 26px; color: var(--alb-primario); margin-bottom: var(--alb-espacio-4); }
.bloque h3 { font-size: var(--alb-tam-xl); font-weight: var(--alb-peso-medio); }
.bloque p { margin: 0; color: var(--alb-texto-2); }
.bloque--ancho { grid-column: span 2; }
.nota-honesta {
  display: flex; gap: var(--alb-espacio-3); align-items: flex-start;
  max-width: 52rem; margin: var(--alb-espacio-6) auto 0;
  font-size: var(--alb-tam-s); color: var(--alb-texto-2);
}
.nota-honesta .icono { color: var(--alb-info); margin-top: 2px; }

.stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-4); margin: 0; padding: 0; list-style: none; }
.stack li { padding: var(--alb-espacio-5); border: 1px solid var(--n-linea); border-radius: var(--alb-radio-l); background: color-mix(in srgb, var(--n-texto) 4%, transparent); }
.stack strong { display: block; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-xl); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-2); }
.stack span { font-size: var(--alb-tam-s); color: var(--n-texto-2); }

.flujo { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.2fr) 40px minmax(0, 1fr); align-items: stretch; gap: 0; margin-top: var(--alb-espacio-7); }
.flujo__col { display: grid; gap: var(--alb-espacio-3); align-content: center; }
.flujo__titulo { margin: 0 0 var(--alb-espacio-1); font-size: var(--alb-tam-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--n-oro); font-weight: var(--alb-peso-medio); }
.nodo { padding: var(--alb-espacio-3) var(--alb-espacio-4); border: 1px solid var(--n-linea); border-radius: var(--alb-radio-m); background: color-mix(in srgb, var(--n-texto) 5%, transparent); }
.nodo strong { display: block; font-size: var(--alb-tam-s); }
.nodo code { font-size: var(--alb-tam-xs); color: var(--n-texto-2); }
.nodo--albunea { border-color: color-mix(in srgb, var(--n-oro) 60%, transparent); background: color-mix(in srgb, var(--n-oro) 8%, transparent); }
.flujo__flecha { align-self: center; justify-self: center; width: 28px; height: 28px; color: var(--n-oro); }
.flujo__flecha path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.capas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-5); }
.capa { display: flex; flex-direction: column; gap: var(--alb-espacio-3); }
.capa__cab { display: flex; align-items: center; gap: var(--alb-espacio-3); }
.capa__num { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; font-family: var(--alb-fuente-titulo); color: var(--alb-sobre-acento); background: var(--alb-acento); }
.capa h3 { margin: 0; font-size: var(--alb-tam-l); font-family: var(--alb-fuente-texto); font-weight: var(--alb-peso-fuerte); }
.capa p { margin: 0; color: var(--alb-texto-2); font-size: var(--alb-tam-s); }
.capa .bloque-codigo { font-size: var(--alb-tam-s); flex: 1; }

.seguridad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-3) var(--alb-espacio-6); margin: 0; padding: 0; list-style: none; }
.seguridad li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--alb-espacio-3); padding: var(--alb-espacio-4) 0; border-top: 1px solid var(--alb-borde); }
.seguridad .icono { width: 20px; height: 20px; color: var(--alb-exito); margin-top: 2px; }
.seguridad strong { display: block; font-size: var(--alb-tam-s); }
.seguridad span { font-size: var(--alb-tam-s); color: var(--alb-texto-2); }

.piloto { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--alb-espacio-5); position: relative; }
.piloto::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; border-top: 1px dashed var(--alb-borde-fuerte); }
.piloto li { position: relative; }
.piloto__luna { position: relative; display: block; width: 48px; height: 48px; margin-bottom: var(--alb-espacio-4); background: var(--alb-fondo); border-radius: 50%; color: var(--alb-primario); }
.seccion--alterna .piloto__luna { background: var(--alb-superficie-2); }
.piloto__luna .contorno { fill: var(--alb-superficie); stroke: currentColor; stroke-width: 1.4; }
.piloto__luna .luz { fill: currentColor; }
.piloto__luna .llena { fill: var(--alb-acento); stroke: var(--alb-acento-texto); }
.piloto__cuando { display: block; font-size: var(--alb-tam-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--alb-acento-texto); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-1); }
.piloto h3 { font-size: var(--alb-tam-l); font-family: var(--alb-fuente-texto); font-weight: var(--alb-peso-fuerte); margin-bottom: var(--alb-espacio-2); }
.piloto p { margin: 0; font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.metricas { margin-top: var(--alb-espacio-7); }
.metricas .alb-tabla td:first-child { font-weight: var(--alb-peso-medio); white-space: nowrap; }

.requisitos { columns: 2; column-gap: var(--alb-espacio-7); margin: 0; padding: 0; list-style: none; }
.requisitos li { break-inside: avoid; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--alb-espacio-3); padding: var(--alb-espacio-3) 0; font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.requisitos strong { color: var(--alb-texto); }
.requisitos .icono { width: 18px; height: 18px; color: var(--alb-acento-texto); margin-top: 2px; }

/* --- Precios ------------------------------------------------------------------------- */
.interruptor {
  display: inline-flex; padding: 4px; gap: 4px;
  background: color-mix(in srgb, var(--n-texto) 8%, transparent);
  border: 1px solid var(--n-linea); border-radius: var(--alb-radio-pleno);
}
.interruptor[hidden] { display: none; }
.interruptor button {
  min-height: 40px; padding: 0 var(--alb-espacio-5);
  font: inherit; font-size: var(--alb-tam-s); font-weight: var(--alb-peso-medio);
  color: var(--n-texto-2); background: transparent; border: 0; border-radius: var(--alb-radio-pleno); cursor: pointer;
}
.interruptor button[aria-pressed="true"] { color: var(--alb-sobre-acento); background: var(--n-oro); }
.interruptor__regalo { font-size: var(--alb-tam-xs); opacity: 0.85; }

.planes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--alb-espacio-4); align-items: stretch; margin-top: calc(-1 * var(--alb-espacio-8)); position: relative; z-index: 1; }
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: var(--alb-espacio-6) var(--alb-espacio-5);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-xl);
  box-shadow: var(--alb-sombra-2);
}
.plan--recomendado { border-color: var(--alb-acento); box-shadow: var(--alb-sombra-3), var(--alb-sombra-halo); }
.plan__cinta { position: absolute; top: -12px; left: var(--alb-espacio-5); }
.plan h2 { font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-1); }
.plan__para { margin: 0 0 var(--alb-espacio-5); font-size: var(--alb-tam-s); color: var(--alb-texto-2); min-height: 2.6em; }
.plan__precio { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.plan__monto { font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-4xl); line-height: 1; font-weight: var(--alb-peso-medio); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.plan__periodo { font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.plan__nota { margin: var(--alb-espacio-2) 0 var(--alb-espacio-5); min-height: 1.5em; font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }
.plan .alb-boton { width: 100%; }
.plan__lista { margin: var(--alb-espacio-5) 0 0; padding: var(--alb-espacio-5) 0 0; list-style: none; border-top: 1px solid var(--alb-borde); display: grid; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); }
.plan__lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--alb-espacio-2); align-items: start; }
.plan__lista .icono { width: 16px; height: 16px; margin-top: 3px; color: var(--alb-exito); }
.plan__lista .no { color: var(--alb-texto-tenue); }
.plan__lista .no .icono { color: var(--alb-texto-tenue); }

.anual .solo-mensual, .solo-anual { display: none; }
.anual .solo-anual { display: inline; }

.plan-ancho {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--alb-espacio-6); align-items: center;
  margin-top: var(--alb-espacio-5);
  padding: var(--alb-espacio-6);
  background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-xl);
}
.plan-ancho h2 { font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); margin-bottom: var(--alb-espacio-2); }
.plan-ancho p { margin: 0; color: var(--alb-texto-2); font-size: var(--alb-tam-s); }
.plan-ancho .plan-ancho__cifra { margin: 0; color: var(--alb-texto); font-size: var(--alb-tam-2xl); line-height: 1.2; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-2xl); }
.plan-ancho__cifra small, .plan-ancho__cifra .chico { display: block; font-family: var(--alb-fuente-texto); font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.plan-ancho--luna { background: var(--alb-superficie); border-color: var(--alb-acento); }
.plan-ancho__luna { width: 56px; height: 56px; color: var(--alb-acento-texto); }
.plan-ancho__luna .disco { fill: var(--alb-acento); }
.plan-ancho__luna .anillo { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 4; }
.plan-ancho--luna .plan-ancho__cab { display: flex; gap: var(--alb-espacio-4); align-items: center; margin-bottom: var(--alb-espacio-3); }
.plan-ancho--luna .plan-ancho__cab h2 { margin: 0; }
.chico { display: block; margin-top: var(--alb-espacio-2); font-size: var(--alb-tam-xs); color: var(--alb-texto-tenue); }

.tabla-planes { overflow-x: auto; border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l); background: var(--alb-superficie); }
.tabla-planes .alb-tabla { min-width: 860px; }
.tabla-planes th[scope="row"] { font-weight: var(--alb-peso-medio); color: var(--alb-texto); background: var(--alb-superficie); }
/* Primera columna fija: al deslizar en móvil siempre se sabe qué fila es. */
.tabla-planes th[scope="row"], .tabla-planes thead td { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--alb-borde); }
.tabla-planes thead td { background: var(--alb-superficie); z-index: 2; }
.tabla-planes__pista { display: none; margin: 0 0 var(--alb-espacio-3); font-size: var(--alb-tam-s); color: var(--alb-texto-tenue); }
@media (max-width: 900px) { .tabla-planes__pista { display: block; } }
.tabla-planes thead th { position: sticky; top: 0; font-family: var(--alb-fuente-titulo); font-size: var(--alb-tam-l); color: var(--alb-texto); }
.tabla-planes .destacada { background: color-mix(in srgb, var(--alb-acento) 10%, transparent); }
.tabla-planes td { color: var(--alb-texto-2); }
.tabla-planes .si { color: var(--alb-exito); font-weight: var(--alb-peso-fuerte); }
.tabla-planes caption { text-align: left; padding: var(--alb-espacio-4); font-size: var(--alb-tam-s); color: var(--alb-texto-tenue); caption-side: bottom; }
.letra-chica { max-width: 52rem; margin: var(--alb-espacio-5) 0 0; font-size: var(--alb-tam-s); color: var(--alb-texto-tenue); }

/* Preguntas frecuentes */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alb-espacio-3) var(--alb-espacio-5); }
.pregunta { background: var(--alb-superficie); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-l); align-self: start; }
.pregunta summary { display: flex; gap: var(--alb-espacio-3); align-items: flex-start; padding: var(--alb-espacio-4) var(--alb-espacio-5); cursor: pointer; list-style: none; font-weight: var(--alb-peso-medio); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; margin-left: auto; color: var(--alb-acento-texto); font-size: var(--alb-tam-xl); line-height: 1; }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { margin: 0; padding: 0 var(--alb-espacio-5) var(--alb-espacio-5); color: var(--alb-texto-2); font-size: var(--alb-tam-s); }

/* --- Privacidad (aviso) ---------------------------------------------------------------- */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--alb-espacio-8); align-items: start; }
.legal__indice { position: sticky; top: 96px; font-size: var(--alb-tam-s); }
.legal__indice p { margin: 0 0 var(--alb-espacio-3); font-weight: var(--alb-peso-medio); color: var(--alb-texto-tenue); font-size: var(--alb-tam-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.legal__indice ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--alb-borde); }
.legal__indice a { display: block; padding: 4px var(--alb-espacio-3); color: var(--alb-texto-2); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.legal__indice a:hover { color: var(--alb-primario); border-left-color: var(--alb-acento); }
.legal__texto { max-width: 46rem; }
.legal__texto h2 { margin-top: var(--alb-espacio-7); font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); scroll-margin-top: 96px; }
.legal__texto h2:first-of-type { margin-top: var(--alb-espacio-6); }
.legal__texto h3 { font-size: var(--alb-tam-l); font-family: var(--alb-fuente-texto); font-weight: var(--alb-peso-fuerte); margin-top: var(--alb-espacio-5); }
.legal__texto p, .legal__texto li { color: var(--alb-texto-2); }
.legal__texto li { margin-bottom: var(--alb-espacio-2); }
.legal__texto strong { color: var(--alb-texto); }
.pendiente { padding: 0 4px; border-radius: 4px; background: var(--alb-alerta-fondo); color: var(--alb-alerta); font-weight: var(--alb-peso-medio); }
.legal__meta { display: flex; flex-wrap: wrap; gap: var(--alb-espacio-2); margin-top: var(--alb-espacio-5); }

/* --- Pie --------------------------------------------------------------------------- */
.pie { padding: var(--alb-espacio-8) 0 var(--alb-espacio-6); font-size: var(--alb-tam-s); }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-6); }
.pie__marca img { width: 190px; height: auto; margin-bottom: var(--alb-espacio-4); }
.pie__marca p { max-width: 22rem; color: var(--n-texto-2); }
.pie h2 { margin: 0 0 var(--alb-espacio-3); font-family: var(--alb-fuente-texto); font-size: var(--alb-tam-xs); font-weight: var(--alb-peso-medio); text-transform: uppercase; letter-spacing: 0.08em; color: var(--n-oro); }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--alb-espacio-2); }
.pie ul a { color: var(--n-texto-2); text-decoration: none; }
.pie ul a:hover { color: var(--n-texto); text-decoration: underline; }
.pie ul a[aria-current="true"] { color: var(--n-texto); font-weight: var(--alb-peso-medio); }
.pie__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--alb-espacio-3);
  margin-top: var(--alb-espacio-7); padding-top: var(--alb-espacio-5);
  border-top: 1px solid var(--n-linea); color: var(--n-texto-2); font-size: var(--alb-tam-xs);
}
.pie__base p { margin: 0; }

/* --- Responsivo ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--alb-espacio-6); }
  .pasos-cielo { display: none; }
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capas { grid-template-columns: minmax(0, 1fr); }
  .seguridad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .heroe { padding-top: var(--alb-espacio-7); }
  .heroe__rejilla, .heroe-empresa, .privacidad, .instalacion, .contraprueba { grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-7); }
  .demo { max-width: 560px; }
  .alerta-maq { left: auto; right: -8px; }
  .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .preguntas { grid-template-columns: minmax(0, 1fr); }
  .dato { grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-4); padding: var(--alb-espacio-6); }
  .diagnostico { grid-template-columns: minmax(0, 1fr); text-align: left; padding: var(--alb-espacio-6); gap: var(--alb-espacio-4); }
  .plan-ancho { grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-4); }
  .flujo { grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-3); }
  .flujo__flecha { transform: rotate(90deg); }
  .piloto { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--alb-espacio-6); }
  .piloto::before { display: none; }
  .legal { grid-template-columns: minmax(0, 1fr); gap: var(--alb-espacio-5); }
  .legal__indice { position: static; }
  .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
  .bloque--ancho { grid-column: auto; }
  .heroe-empresa .sello-grande { max-width: 280px; }
}
@media (max-width: 640px) {
  .seccion { padding: var(--alb-espacio-8) 0; }
  .heroe { padding-bottom: var(--alb-espacio-8); }
  .entrada { font-size: var(--alb-tam-m); }
  .acciones .alb-boton { width: 100%; }
  .demo { padding-bottom: 0; }
  .alerta-maq { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: calc(-1 * var(--alb-espacio-6)) var(--alb-espacio-3) 0; }
  .maq__cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--alb-espacio-2); }
  .maq__cifra { padding: var(--alb-espacio-2); }
  .maq__cifra strong { font-size: var(--alb-tam-l); }
  .maq__cuerpo { padding: var(--alb-espacio-3); }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .paso { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: var(--alb-espacio-4); }
  .paso__num { grid-row: span 2; }
  .rejilla-2, .rejilla-4, .planes, .stack, .seguridad { grid-template-columns: minmax(0, 1fr); }
  .planes { margin-top: calc(-1 * var(--alb-espacio-7)); }
  .plan__para { min-height: 0; }
  .piloto { grid-template-columns: minmax(0, 1fr); }
  .requisitos { columns: 1; }
  .reporte__fila { grid-template-columns: 7rem minmax(0, 1fr) 3rem; }
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mirada { padding: var(--alb-espacio-5); }
}

@media print {
  .cabecera, .cielo, .demo, .pie, .saltar { display: none !important; }
  .noche { background: none; color: var(--alb-texto); }
}
.cierre .entrada { margin: calc(-1 * var(--alb-espacio-3)) auto var(--alb-espacio-6); }
.heroe-corto__colchon { height: var(--alb-espacio-8); }
.seccion--pegada { padding-bottom: 0; }
@media (max-width: 640px) {
  .demo__pie { position: static; max-width: none; margin-top: var(--alb-espacio-4); }
}
.tabla-planes td { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .cielo .orbita { display: none; }
  /* En móvil la cifra va arriba del texto, más chica, pero se queda: es el gancho visual. */
  .dato__cifra { font-size: 4.5rem; }
}

/* --- Precios vivos (planes desde la API), moneda, Próximamente y contacto --- */
.plan__monto { font-size: var(--alb-tam-3xl); }
.plan h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alb-espacio-2); }
.plan__fundador { font-family: var(--alb-fuente-texto); font-size: var(--alb-tam-xs); }
.plan__detalles { margin-top: var(--alb-espacio-4); font-size: var(--alb-tam-s); }
.plan__detalles summary { cursor: pointer; color: var(--alb-primario); min-height: 44px; display: flex; align-items: center; }
.plan__lista--chica { font-size: var(--alb-tam-xs); border-top: 0; padding-top: 0; margin-top: var(--alb-espacio-2); }
.moneda { display: inline-flex; align-items: center; gap: var(--alb-espacio-3); margin-top: var(--alb-espacio-5); }
.moneda[hidden] { display: none; }
.moneda label { color: var(--n-texto-2, var(--alb-texto-inverso)); font-size: var(--alb-tam-s); }
.moneda select { min-height: 44px; width: auto; }
.planes__estado { margin: 0 0 var(--alb-espacio-3); min-height: 1.5em; text-align: center; font-size: var(--alb-tam-s); color: var(--alb-texto-tenue); position: relative; z-index: 2; }
.planes__estado:empty { display: none; }
.planes__fundador { margin: var(--alb-espacio-5) 0 0; text-align: center; font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.proximas { list-style: none; margin: var(--alb-espacio-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--alb-espacio-3); }
.proximas li { display: flex; align-items: center; gap: var(--alb-espacio-3); padding: var(--alb-espacio-3) var(--alb-espacio-4); border: 1px dashed var(--alb-borde-fuerte); border-radius: var(--alb-radio-m); background: var(--alb-superficie); color: var(--alb-texto-2); font-size: var(--alb-tam-s); }
.proximas .alb-insignia { flex: none; }
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--alb-espacio-7); align-items: start; padding: var(--alb-espacio-7); border: 1px solid var(--alb-borde); border-radius: var(--alb-radio-xl); background: var(--alb-superficie); }
.contacto h2 { font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); }
.contacto p { color: var(--alb-texto-2); }
.contacto__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alb-espacio-2) var(--alb-espacio-4); }
.contacto__form .alb-campo { margin: 0; }
.contacto__ancho { grid-column: 1 / -1; }
.contacto__aviso { margin: 0; min-height: 1.4em; font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.contacto textarea { resize: vertical; }
@media (max-width: 920px) {
  .contacto { grid-template-columns: minmax(0, 1fr); padding: var(--alb-espacio-5); gap: var(--alb-espacio-5); }
  .contacto__form { grid-template-columns: minmax(0, 1fr); }
}

/* --- Nuestra historia ------------------------------------------------------ */
.historia-heroe .entrada { max-width: 62ch; }
.historia__claves { list-style: none; margin: var(--alb-espacio-5) 0 0; padding: 0; display: grid; gap: var(--alb-espacio-2); font-size: var(--alb-tam-s); color: var(--n-texto-2); }
.historia__seccion { font-size: var(--alb-tam-3xl); font-weight: var(--alb-peso-medio); margin: 0 0 var(--alb-espacio-6); }
.historia { padding: var(--alb-espacio-6) 0; border-top: 1px solid var(--alb-borde); }
.historia:first-of-type { border-top: 0; padding-top: 0; }
.historia h3 { font-size: var(--alb-tam-2xl); font-weight: var(--alb-peso-medio); margin: var(--alb-espacio-2) 0 var(--alb-espacio-4); }
.historia p { color: var(--alb-texto-2); line-height: 1.7; max-width: 70ch; }
.historia__marca { margin: 0; }
.historia__marca > span { display: inline-flex; align-items: center; padding: 2px var(--alb-espacio-3); border-radius: var(--alb-radio-pleno); font-size: var(--alb-tam-xs); font-weight: var(--alb-peso-medio); letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid currentColor; }
.historia__marca--historia > span { color: var(--alb-exito); }
.historia__marca--leyenda > span { color: var(--alb-acento-texto); }
.historia__marca--mixta > span { color: var(--alb-primario); }
.noche .historia__marca--historia > span { color: var(--n-oro); }
.noche .historia__marca--leyenda > span { color: var(--n-texto); }
.historia__dato { display: flex; gap: var(--alb-espacio-3); align-items: flex-start; padding: var(--alb-espacio-4); border-radius: var(--alb-radio-m); background: var(--alb-superficie-2); color: var(--alb-texto); }
.historia__dato .icono { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--alb-acento-texto); }
.historia__fuentes { margin-top: var(--alb-espacio-3); font-size: var(--alb-tam-s); }
.historia__fuentes summary { cursor: pointer; color: var(--alb-primario); min-height: 44px; display: flex; align-items: center; width: max-content; }
.historia__fuentes ul { margin: 0; padding-left: var(--alb-espacio-5); display: grid; gap: var(--alb-espacio-1); }
.historia-cierre { text-align: center; }
.historia-cierre h2 { font-size: var(--alb-tam-3xl); }
.historia-cierre p { color: var(--alb-texto-2); margin-inline: auto; max-width: 54ch; }
.alb-contenedor--estrecho { max-width: 880px; }

/* --- Complementos con precio propio (todos «Próximamente»; no se pueden comprar) --- */
.complementos { list-style: none; margin: var(--alb-espacio-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--alb-espacio-3); }
.complemento { display: flex; flex-direction: column; align-items: flex-start; gap: var(--alb-espacio-2); padding: var(--alb-espacio-4); border: 1px dashed var(--alb-borde-fuerte); border-radius: var(--alb-radio-m); background: var(--alb-superficie); }
.complemento h3 { margin: 0; font-size: var(--alb-tam-l); font-weight: var(--alb-peso-medio); color: var(--alb-texto); }
.complemento p { margin: 0; font-size: var(--alb-tam-s); color: var(--alb-texto-2); }
.complemento .complemento__precio { margin-top: auto; padding-top: var(--alb-espacio-2); color: var(--alb-texto); font-weight: var(--alb-peso-medio); }
.complemento__precio small { font-weight: normal; color: var(--alb-texto-tenue); font-size: var(--alb-tam-xs); }
.complemento__nivel { display: block; }
.plan-ancho__cifra small + small { margin-top: var(--alb-espacio-2); }
.plan-ancho__cifra small[hidden] { display: none; }
/* Varias notas seguidas bajo el precio (precio regular, lugares, IVA): juntas, sin el aire de la última. */
.plan__nota:has(+ .plan__nota) { margin-bottom: 0; min-height: 0; }
.plan__nota + .plan__nota { margin-top: var(--alb-espacio-1); }