/*
 * zallesnetworks.com · Sistema de diseño (identidad ZNetworks, 12 oct 2026)
 *
 * Colores: app_private/app/data/tokens.php es la fuente de verdad (paleta de Mauri:
 *          #07274c, #1b70d2, #f0fcff, #facf48, #ffffff). tools/contraste.php valida el contraste.
 * Regla:   el amarillo (--cta-fondo) es exclusivo del CTA principal, con texto azul marino.
 * Fuentes: Russo One (títulos, un solo peso) + Exo 2 (texto, variable), self-hosted en WOFF2 (OFL).
 * Escala:  tipografía fluida y espaciado en múltiplos de 4/8 px. Mobile-first desde 360 px.
 * Catálogo de componentes: /_estilos/ (solo local y staging).
 */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: "Russo One";
  src: url("/assets/fonts/russo-one-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("/assets/fonts/exo-2-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --fondo: #FFFFFF;
  --fondo-calido: #F0FCFF;
  --superficie: #FFFFFF;
  --fondo-oscuro: #07274C;
  --texto: #132B47;
  --texto-suave: #405A78;
  --titulos: #07274C;
  --enlace: #1B70D2;
  --mar: #1B70D2;
  --borde: #CFE3EF;
  --cta-fondo: #FACF48;
  --cta-texto: #07274C;
  --sobre-oscuro: #FFFFFF;
  --sobre-oscuro-suave: #C9DAEE;
  --exito: #1E6B45;
  --todo-fondo: #FFF2B3;
  --todo-texto: #4A3B00;

  --fuente-titulos: "Russo One", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica fluida (360 px → 1440 px) */
  --t-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-sm: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --t-3xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);

  /* Espaciado 4/8 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  --radio-s: 6px;
  --radio: 12px;
  --radio-l: 20px;
  --sombra: 0 1px 2px rgb(7 39 76 / 0.06), 0 4px 16px rgb(7 39 76 / 0.06);
  --sombra-alta: 0 2px 4px rgb(7 39 76 / 0.08), 0 12px 32px rgb(7 39 76 / 0.12);
  --ancho: 1200px;
  --ancho-texto: 68ch;
  --barra-movil: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #04172D;
    --fondo-calido: #07274C;
    --superficie: #0B3360;
    --fondo-oscuro: #020E1C;
    --texto: #E4F2FA;
    --texto-suave: #B4C8DC;
    --titulos: #FFFFFF;
    --enlace: #8DBEF4;
    --mar: #6AA8EE;
    --borde: #1E4A78;
    --cta-fondo: #FACF48;
    --cta-texto: #07274C;
    --sobre-oscuro: #FFFFFF;
    --sobre-oscuro-suave: #B4C8DC;
    --exito: #7FD1A5;
    --todo-fondo: #5A4A00;
    --todo-texto: #FFF2B3;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
    --sombra-alta: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.35);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* El atributo hidden siempre gana, aunque el componente tenga display propio (filtro, aviso de cookies). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e-6); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--barra-movil);
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--titulos);
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 400; }
h2 { font-size: var(--t-2xl); font-weight: 400; }
h3 { font-size: var(--t-lg); font-weight: 400; }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
a { color: var(--enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; height: auto; }
strong { font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Utilidades de layout ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--e-4); }
@media (min-width: 768px) { .contenedor { padding-inline: var(--e-6); } }

.seccion { padding-block: var(--e-8); }
.seccion--calida { background: var(--fondo-calido); }
.seccion--oscura { background: var(--fondo-oscuro); color: var(--sobre-oscuro); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--sobre-oscuro); }
.seccion--oscura p { color: var(--sobre-oscuro-suave); }
.seccion--oscura a:not(.boton) { color: var(--sobre-oscuro); }
@media (min-width: 1024px) { .seccion { padding-block: var(--e-9); } }

.encabezado { max-width: var(--ancho-texto); margin-bottom: var(--e-7); }
.bloque-siguiente { margin-top: var(--e-8); }
.encabezado p { font-size: var(--t-lg); color: var(--texto-suave); }
.seccion--oscura .encabezado p { color: var(--sobre-oscuro-suave); }
.antetitulo {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mar);
  margin-bottom: var(--e-3);
}
.seccion--oscura .antetitulo { color: var(--sobre-oscuro-suave); }

.grilla { display: grid; gap: var(--e-5); list-style: none; padding: 0; margin: 0 0 var(--e-5); }
@media (min-width: 640px) { .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grilla--3 { grid-template-columns: repeat(3, 1fr); }
  .grilla--4 { grid-template-columns: repeat(4, 1fr); }
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: var(--e-4); top: var(--e-4); z-index: 50; padding: var(--e-2) var(--e-4); background: var(--superficie); color: var(--texto); border-radius: var(--radio-s); }

/* ---------- Íconos ---------- */
.icono { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.icono--grande { width: 40px; height: 40px; padding: 8px; border-radius: var(--radio); background: var(--fondo-calido); color: var(--mar); }

/* ---------- Botones (área táctil ≥ 44 px, todos los estados) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: var(--e-3) var(--e-5);
  border-radius: var(--radio-s); border: 2px solid transparent;
  font: 700 var(--t-base)/1.2 var(--fuente-texto);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--cta-fondo); color: var(--cta-texto); box-shadow: var(--sombra); }
.boton--principal:hover { box-shadow: var(--sombra-alta); filter: brightness(1.05); }
.boton--secundario { background: transparent; color: var(--titulos); border-color: currentColor; }
.boton--secundario:hover { background: var(--fondo-calido); }
.seccion--oscura .boton--secundario { color: var(--sobre-oscuro); }
.seccion--oscura .boton--secundario:hover { background: rgb(255 255 255 / 0.08); }
.boton--texto { min-height: 44px; padding-inline: 0; color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.boton--bloque { width: 100%; }
.boton[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.nota-checkout { font-size: var(--t-xs); color: var(--texto-suave); margin: var(--e-3) 0 0; display: flex; gap: var(--e-2); align-items: flex-start; }
.nota-checkout .icono { color: var(--mar); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.cabecera__fila { display: flex; align-items: center; gap: var(--e-4); min-height: 68px; }
.marca { display: inline-flex; align-items: center; margin-right: auto; min-height: 44px; }
.marca__logo { display: block; height: 30px; width: auto; }
@media (min-width: 1080px) { .marca__logo { height: 34px; } }
.sprite { display: none; }
.cabecera ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-5); }
.cabecera nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.cabecera nav a:hover { color: var(--enlace); text-decoration: underline; }
.cabecera nav a[aria-current="page"] { color: var(--titulos); box-shadow: inset 0 -3px 0 var(--mar); }
.nav-escritorio, .cabecera__cta { display: none; }

.nav-movil summary { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; padding-inline: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-s); cursor: pointer; font-weight: 700; list-style: none; color: var(--titulos); }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil[open] summary { background: var(--fondo-calido); }
.nav-movil nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--fondo); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra-alta); }
.nav-movil ul { flex-direction: column; gap: 0; padding: var(--e-2) var(--e-4) var(--e-4); }
.nav-movil li + li { border-top: 1px solid var(--borde); }
.nav-movil a { width: 100%; min-height: 52px; font-size: var(--t-base); }

@media (min-width: 1080px) {
  .nav-escritorio, .cabecera__cta { display: flex; }
  .nav-movil { display: none; }
  .cabecera__cta { min-height: 44px; padding-block: var(--e-2); }
}

/* ---------- Migas ---------- */
.migas ol { list-style: none; margin: 0; padding: var(--e-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-suave); }
.migas li + li::before { content: "›"; margin-right: var(--e-2); }
.migas a { color: var(--texto-suave); }

/* ---------- Hero ---------- */
.hero { background: var(--fondo-calido); padding-block: var(--e-7) var(--e-8); overflow: hidden; }
.hero__grilla { display: grid; gap: var(--e-7); align-items: center; }
.hero__bajada { font-size: var(--t-lg); color: var(--texto-suave); max-width: 56ch; }
.hero .acciones { margin-block: var(--e-5) var(--e-5); }
.insignias { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-sm); color: var(--texto); }
.insignias li { display: inline-flex; gap: var(--e-2); align-items: center; }
.insignias .icono { color: var(--mar); }
.hero__panel { color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-alta); padding: var(--e-5); }
.hero__panel h2 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.hero__panel ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); counter-reset: paso; }
.hero__panel li { display: grid; grid-template-columns: 36px 1fr; gap: var(--e-3); align-items: start; counter-increment: paso; font-size: var(--t-sm); }
.hero__panel li::before { content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fondo-calido); color: var(--titulos); font-weight: 400; font-family: var(--fuente-titulos); }
.hero__panel strong { display: block; color: var(--titulos); font-size: var(--t-base); }
@media (min-width: 960px) {
  .hero { padding-block: var(--e-8) var(--e-9); }
  .hero__grilla { grid-template-columns: 1.25fr 1fr; }
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  position: relative; display: flex; flex-direction: column; gap: var(--e-3);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e-5); box-shadow: var(--sombra);
}
.tarjeta h3 { margin: 0; }
.tarjeta p { margin: 0; color: var(--texto-suave); }
.tarjeta--enlace { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.tarjeta--enlace:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--mar); }
.tarjeta--enlace a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta--enlace a { text-decoration: none; color: var(--titulos); }
.tarjeta--enlace:focus-within { outline: 3px solid var(--mar); outline-offset: 3px; }
.tarjeta--enlace a:focus-visible { outline: none; }
.tarjeta__pie { margin-top: auto; padding-top: var(--e-3); font-weight: 700; color: var(--enlace); display: inline-flex; gap: var(--e-2); align-items: center; }

/* Selector de necesidad */
.necesidad { min-height: 100%; }

/* ---------- Planes ---------- */
.planes { display: grid; gap: var(--e-5); }
@media (min-width: 640px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .planes--4 { grid-template-columns: repeat(4, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--e-4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-5); box-shadow: var(--sombra); }
.plan--destacado { border: 2px solid var(--mar); box-shadow: var(--sombra-alta); }
.plan__etiqueta { position: absolute; top: calc(var(--e-3) * -1); left: var(--e-5); background: var(--titulos); color: var(--fondo); font-size: var(--t-xs); font-weight: 700; padding: 2px var(--e-3); border-radius: 999px; }
.plan h3 { margin: 0; font-size: var(--t-xl); }
.precio { margin: 0; }
.precio__monto { display: block; font-family: var(--fuente-titulos); font-size: var(--t-2xl); font-weight: 400; color: var(--titulos); line-height: 1.1; }
.precio__monto small { font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }
.precio__iva { display: block; font-size: var(--t-sm); color: var(--texto-suave); }
.precio__etiqueta { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--texto-suave); }
.precio__nota { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--texto-suave); }
.precios-variantes { list-style: none; padding: 0; margin: var(--e-3) 0 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.precios-variantes li { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); align-items: baseline; padding-top: var(--e-2); border-top: 1px solid var(--borde); }
.precios-variantes span { flex: 1 1 100%; color: var(--texto-suave); }
.precios-variantes strong { color: var(--titulos); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.plan li { display: flex; gap: var(--e-2); align-items: flex-start; }
.plan li .icono { color: var(--exito); margin-top: 2px; }
.plan .acciones { margin-top: auto; flex-direction: column; align-items: stretch; }
.lista-incluye { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; gap: var(--e-3) var(--e-5); }
@media (min-width: 640px) { .lista-incluye { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lista-incluye { grid-template-columns: repeat(3, 1fr); } }
.lista-incluye li { display: flex; gap: var(--e-2); align-items: flex-start; }
.lista-incluye .icono { color: var(--exito); margin-top: 3px; }

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-5); counter-reset: paso; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { counter-increment: paso; display: flex; flex-direction: column; gap: var(--e-2); }
.paso::before { content: counter(paso); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--mar); color: var(--titulos); font: 400 var(--t-lg)/1 var(--fuente-titulos); margin-bottom: var(--e-2); }
.seccion--oscura .paso::before { color: var(--sobre-oscuro); border-color: var(--sobre-oscuro-suave); }
.paso h3 { margin: 0; }
.paso p { margin: 0; color: var(--texto-suave); }

/* ---------- Bloque destacado (IA) ---------- */
.destacado { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 960px) { .destacado { grid-template-columns: 1fr 1fr; } }
.ventajas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.ventajas li { display: grid; grid-template-columns: 40px 1fr; gap: var(--e-3); align-items: start; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-4); }
.ventajas strong { display: block; color: var(--titulos); }
.ventajas span { color: var(--texto-suave); font-size: var(--t-sm); }

/* ---------- Portafolio ---------- */
.caso { padding: 0; overflow: hidden; }
.caso__captura { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--fondo-calido), var(--borde)); display: grid; place-items: center; color: var(--texto-suave); font-size: var(--t-xs); text-align: center; padding: var(--e-4); }
.caso__captura img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.caso__cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.etiquetas li { font-size: var(--t-xs); font-weight: 600; padding: 2px var(--e-2); border-radius: 999px; background: var(--fondo-calido); color: var(--texto); }

/* Sobre fondo arena, íconos y etiquetas van sobre superficie para no perderse */
.seccion--calida .icono--grande, .hero .icono--grande,
.seccion--calida .etiquetas li, .hero .etiquetas li { background: var(--superficie); border: 1px solid var(--borde); }

/* Cifras y galería (quiénes somos) */
.cifras { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-width: 860px; }
.cifras li { display: grid; gap: var(--e-1); padding: var(--e-4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.cifras strong { font: 400 var(--t-xl)/1.1 var(--fuente-titulos); color: var(--titulos); }
.cifras span { font-size: var(--t-sm); color: var(--texto-suave); }
.galeria { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); }
.galeria img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-s); background: var(--borde); }
@media (min-width: 960px) { .galeria--4 { grid-template-columns: repeat(4, 1fr); } }

/* Filtro y lista de clientes */
.filtro { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: flex-end; margin-bottom: var(--e-5); }
.filtro label { display: grid; gap: var(--e-1); font-weight: 700; font-size: var(--t-sm); color: var(--titulos); }
.filtro select { min-height: 44px; min-width: 200px; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); color: var(--texto); font: inherit; }
.filtro__resultado { margin: 0; color: var(--texto-suave); }
.mas-casos { margin-top: var(--e-6); }
.mas-casos > summary { list-style: none; cursor: pointer; margin-inline: auto; display: flex; width: fit-content; }
.mas-casos > summary::-webkit-details-marker { display: none; }
.mas-casos[open] > summary { margin-bottom: var(--e-6); }
.mas-casos .mas-casos__cerrar, .mas-casos[open] .mas-casos__abrir { display: none; }
.mas-casos[open] .mas-casos__cerrar { display: inline; }
.caso__nota { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.caso__enlace { margin: auto 0 0; font-size: var(--t-sm); }
.caso--mini .caso__cuerpo { height: 100%; }
.lista-clientes { list-style: none; padding: 0; margin: 0 0 var(--e-4); columns: 2 180px; column-gap: var(--e-5); }
.lista-clientes li { break-inside: avoid; padding-block: var(--e-1); }
.datos--caso { margin-top: var(--e-4); }
.etiquetas a { color: inherit; text-decoration: none; display: inline-block; min-height: 32px; line-height: 28px; }
.etiquetas a:hover { text-decoration: underline; }

/* Plan recomendado dentro de las plantillas */
.plan-recomendado { display: grid; gap: var(--e-5); align-items: center; padding: var(--e-5); background: var(--fondo-calido); border-radius: var(--radio-l); max-width: 860px; }
.plan-recomendado h2 { font-size: var(--t-xl); }
@media (min-width: 768px) { .plan-recomendado { grid-template-columns: 1.2fr 1fr; padding: var(--e-6); } }

/* ---------- Plantillas ---------- */
.plantilla-banda { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 960px) { .plantilla-banda { grid-template-columns: 1.2fr 1fr; } }

/* ---------- Confianza ---------- */
.confianza { display: grid; gap: var(--e-6); }
@media (min-width: 960px) { .confianza { grid-template-columns: 1fr 1fr; } }
.datos { align-content: start; display: grid; grid-template-columns: max-content 1fr; gap: var(--e-2) var(--e-5); margin: 0; }
.datos dt { font-weight: 700; color: var(--titulos); }
.datos dd { margin: 0; color: var(--texto-suave); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { display: flex; justify-content: space-between; gap: var(--e-4); align-items: center; min-height: 56px; padding-block: var(--e-4); cursor: pointer; list-style: none; font-family: var(--fuente-titulos); font-weight: 400; font-size: var(--t-lg); color: var(--titulos); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--borde); font-family: var(--fuente-texto); font-weight: 700; color: var(--mar); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--e-4); color: var(--texto-suave); max-width: var(--ancho-texto); }

/* ---------- CTA final ---------- */
.cta-final { text-align: left; }
.cta-final .acciones { margin-top: var(--e-5); }
.cta-final .nota-checkout { color: var(--sobre-oscuro-suave); }
.cta-final .nota-checkout .icono { color: var(--sobre-oscuro-suave); }

/* ---------- Fondos del hero: uno distinto por página (pedido de Mauri, 12 oct 2026) ----------
 * Solo CSS (degradados y patrones), sin imágenes: no suma peso ni afecta el LCP.
 * Heros oscuros: portada, web hecha con IA, servicios y quiénes somos. El resto, claros. */
main[data-hero] .hero { position: relative; isolation: isolate; }

/* Oscuros: textos y botones secundarios en claro */
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero { color: #FFFFFF; }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero :is(h1, .hero__bajada, .insignias, .nota-checkout) { color: #FFFFFF; }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero .hero__bajada { color: #DCE8F7; }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero .antetitulo { color: #FACF48; }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero :is(.insignias .icono, .nota-checkout .icono) { color: #FACF48; }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero .boton--secundario { color: #FFFFFF; border-color: #FFFFFF; }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero .boton--secundario:hover { background: rgb(255 255 255 / 0.1); }
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero > .contenedor > p a,
main:is([data-hero="home"], [data-hero="web-ia"], [data-hero="planes"], [data-hero="quienes-somos"]) .hero .etiquetas a { color: #FFFFFF; }
main:is([data-hero="planes"], [data-hero="quienes-somos"]) .hero .etiquetas li { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); }

main[data-hero="home"] .hero {
  background:
    radial-gradient(60% 80% at 85% 10%, rgb(27 112 210 / 0.55), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.10) 1px, transparent 0) 0 0 / 22px 22px,
    #07274C;
}
main[data-hero="web-ia"] .hero {
  background:
    repeating-linear-gradient(120deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 46px),
    linear-gradient(135deg, #07274C 0%, #0D3E78 55%, #1B70D2 100%);
}
main[data-hero="planes"] .hero {
  background:
    repeating-linear-gradient(45deg, transparent 0 28px, rgb(250 207 72 / 0.10) 28px 30px),
    linear-gradient(180deg, #07274C, #0A3260);
}
main[data-hero="quienes-somos"] .hero {
  background:
    repeating-radial-gradient(circle at 100% 100%, transparent 0 34px, rgb(255 255 255 / 0.06) 34px 36px),
    #07274C;
}
main[data-hero="hosting"] .hero {
  background:
    linear-gradient(rgb(27 112 210 / 0.07) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(27 112 210 / 0.07) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(50% 70% at 90% 20%, rgb(27 112 210 / 0.16), transparent 70%),
    #F0FCFF;
}
main[data-hero="plantillas"] .hero {
  background:
    linear-gradient(rgb(7 39 76 / 0.08) 1px, transparent 1px) 0 0 / 120px 32px,
    linear-gradient(90deg, rgb(7 39 76 / 0.08) 1px, transparent 1px) 0 0 / 120px 32px,
    #F0FCFF;
}
main[data-hero="plantilla-gantt"] .hero {
  background:
    linear-gradient(90deg, rgb(7 39 76 / 0.06) 1px, transparent 1px) 0 0 / 80px 100%,
    #F0FCFF;
}
/* Barras tipo Gantt solo en escritorio, a la derecha, para no pasar por detrás del texto. */
@media (min-width: 1080px) {
  main[data-hero="plantilla-gantt"] .hero {
    background:
      linear-gradient(90deg, transparent 60%, rgb(27 112 210 / 0.16) 60% 76%, transparent 76%) 0 40px / 100% 44px no-repeat,
      linear-gradient(90deg, transparent 70%, rgb(250 207 72 / 0.35) 70% 88%, transparent 88%) 0 100px / 100% 44px no-repeat,
      linear-gradient(90deg, transparent 82%, rgb(27 112 210 / 0.16) 82% 97%, transparent 97%) 0 160px / 100% 44px no-repeat,
      linear-gradient(90deg, rgb(7 39 76 / 0.06) 1px, transparent 1px) 0 0 / 80px 100%,
      #F0FCFF;
  }
}
main[data-hero="plantilla-presupuesto"] .hero {
  background:
    linear-gradient(rgb(7 39 76 / 0.07) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgb(7 39 76 / 0.07) 1px, transparent 1px) 0 0 / 180px 100%,
    linear-gradient(180deg, rgb(250 207 72 / 0.18), transparent 120px),
    #FFFFFF;
}
main[data-hero="portafolio"] .hero {
  background:
    radial-gradient(40% 60% at 95% 50%, rgb(27 112 210 / 0.22), transparent 70%),
    radial-gradient(30% 50% at 5% 100%, rgb(250 207 72 / 0.25), transparent 70%),
    #F0FCFF;
}
main[data-hero="caso"] .hero {
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgb(27 112 210 / 0.05) 22px 24px),
    #F0FCFF;
}
main[data-hero="preguntas"] .hero {
  background:
    radial-gradient(circle at 2px 2px, rgb(250 207 72 / 0.55) 2px, transparent 0) 0 0 / 28px 28px,
    #F0FCFF;
}
main[data-hero="contacto"] .hero {
  background:
    radial-gradient(45% 80% at 100% 0%, rgb(27 112 210 / 0.20), transparent 70%),
    linear-gradient(180deg, #F0FCFF, #FFFFFF);
}
main:is([data-hero="terminos"], [data-hero="privacidad"]) .hero {
  background: linear-gradient(90deg, #F0FCFF, #FFFFFF);
  border-bottom: 1px solid var(--borde);
}

/* Plantillas nuevas: cada una con un motivo propio, claro y discreto. */
main[data-hero="plantilla-cotizaciones"] .hero {
  background:
    linear-gradient(rgb(7 39 76 / 0.07) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, transparent calc(100% - 6px), rgb(250 207 72 / 0.7) calc(100% - 6px)) 0 0 / 100% 100% no-repeat,
    #F0FCFF;
}
main[data-hero="plantilla-flujo-de-caja"] .hero {
  background:
    linear-gradient(0deg, rgb(27 112 210 / 0.10) 0 40%, transparent 40%) 70% 100% / 4% 100% no-repeat,
    linear-gradient(0deg, rgb(27 112 210 / 0.10) 0 60%, transparent 60%) 76% 100% / 4% 100% no-repeat,
    linear-gradient(0deg, rgb(250 207 72 / 0.35) 0 30%, transparent 30%) 82% 100% / 4% 100% no-repeat,
    linear-gradient(0deg, rgb(27 112 210 / 0.10) 0 75%, transparent 75%) 88% 100% / 4% 100% no-repeat,
    linear-gradient(0deg, rgb(27 112 210 / 0.10) 0 90%, transparent 90%) 94% 100% / 4% 100% no-repeat,
    #F0FCFF;
}
main[data-hero="plantilla-inventario"] .hero {
  background:
    linear-gradient(90deg, rgb(7 39 76 / 0.06) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(rgb(7 39 76 / 0.06) 2px, transparent 2px) 0 0 / 56px 56px,
    radial-gradient(40% 60% at 100% 100%, rgb(250 207 72 / 0.30), transparent 70%),
    #F0FCFF;
}
main[data-hero="plantilla-ingresos-gastos"] .hero {
  background:
    radial-gradient(50% 80% at 0% 100%, rgb(27 112 210 / 0.16), transparent 70%),
    radial-gradient(40% 70% at 100% 0%, rgb(250 207 72 / 0.30), transparent 70%),
    #FFFFFF;
}
main[data-hero="plantilla-precio-venta"] .hero {
  background:
    repeating-linear-gradient(60deg, transparent 0 30px, rgb(27 112 210 / 0.06) 30px 32px),
    repeating-linear-gradient(-60deg, transparent 0 30px, rgb(27 112 210 / 0.06) 30px 32px),
    #F0FCFF;
}
main[data-hero="plantilla-ventas"] .hero {
  background:
    radial-gradient(circle at 100% 50%, transparent 0 120px, rgb(27 112 210 / 0.08) 120px 122px, transparent 122px 200px, rgb(27 112 210 / 0.06) 200px 202px, transparent 202px),
    linear-gradient(180deg, #F0FCFF, #FFFFFF);
}

@media (prefers-color-scheme: dark) {
  /* En oscuro, los heros claros pasan a variantes oscuras del mismo patrón. */
  main:is([data-hero="hosting"], [data-hero="plantillas"], [data-hero="plantilla-gantt"], [data-hero="plantilla-presupuesto"], [data-hero="portafolio"], [data-hero="caso"], [data-hero="preguntas"], [data-hero="contacto"], [data-hero="terminos"], [data-hero="privacidad"]) .hero { background-color: var(--fondo-calido); background-blend-mode: normal; }
  main[data-hero="hosting"] .hero { background: linear-gradient(rgb(106 168 238 / 0.08) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgb(106 168 238 / 0.08) 1px, transparent 1px) 0 0 / 40px 40px, var(--fondo-calido); }
  main:is([data-hero="plantillas"], [data-hero="plantilla-presupuesto"]) .hero { background: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 120px 32px, linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 120px 32px, var(--fondo-calido); }
  main[data-hero="plantilla-gantt"] .hero { background: linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 80px 100%, var(--fondo-calido); }
  main:is([data-hero="portafolio"], [data-hero="contacto"]) .hero { background: radial-gradient(45% 70% at 95% 30%, rgb(27 112 210 / 0.35), transparent 70%), var(--fondo-calido); }
  main[data-hero="caso"] .hero { background: repeating-linear-gradient(-45deg, transparent 0 22px, rgb(255 255 255 / 0.04) 22px 24px), var(--fondo-calido); }
  main[data-hero="preguntas"] .hero { background: radial-gradient(circle at 2px 2px, rgb(250 207 72 / 0.35) 2px, transparent 0) 0 0 / 28px 28px, var(--fondo-calido); }
  main:is([data-hero="terminos"], [data-hero="privacidad"]) .hero { background: var(--fondo-calido); }
  main[data-hero="plantilla-cotizaciones"] .hero { background: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 100% 36px, var(--fondo-calido); }
  main[data-hero="plantilla-flujo-de-caja"] .hero { background: linear-gradient(0deg, rgb(106 168 238 / 0.18) 0 60%, transparent 60%) 76% 100% / 4% 100% no-repeat, linear-gradient(0deg, rgb(250 207 72 / 0.25) 0 30%, transparent 30%) 82% 100% / 4% 100% no-repeat, linear-gradient(0deg, rgb(106 168 238 / 0.18) 0 90%, transparent 90%) 94% 100% / 4% 100% no-repeat, var(--fondo-calido); }
  main[data-hero="plantilla-inventario"] .hero { background: linear-gradient(90deg, rgb(255 255 255 / 0.05) 2px, transparent 2px) 0 0 / 56px 56px, linear-gradient(rgb(255 255 255 / 0.05) 2px, transparent 2px) 0 0 / 56px 56px, var(--fondo-calido); }
  main:is([data-hero="plantilla-ingresos-gastos"], [data-hero="plantilla-ventas"]) .hero { background: radial-gradient(45% 70% at 0% 100%, rgb(27 112 210 / 0.35), transparent 70%), var(--fondo-calido); }
  main[data-hero="plantilla-precio-venta"] .hero { background: repeating-linear-gradient(60deg, transparent 0 30px, rgb(255 255 255 / 0.05) 30px 32px), var(--fondo-calido); }
}

/* ---------- Páginas interiores ---------- */
.hero--interior { padding-block: var(--e-6) var(--e-7); }
.hero--interior .hero__bajada { max-width: 64ch; }
.hero--interior .nota-checkout { margin-top: 0; }

/* Guía paso a paso (numeración propia, enlazable por #paso-n) */
.guia { list-style: none; padding: 0; margin: 0 0 var(--e-6); counter-reset: guia; display: grid; gap: var(--e-4); max-width: 860px; }
.guia__paso { counter-increment: guia; position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-5) var(--e-5) var(--e-4) calc(var(--e-5) + 56px); scroll-margin-top: 96px; }
.guia__paso::before { content: counter(guia); position: absolute; left: var(--e-5); top: var(--e-5); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--titulos); color: var(--fondo); font: 400 var(--t-base)/1 var(--fuente-titulos); }
.guia__paso h3 { margin-bottom: var(--e-2); }
.guia__paso ul { margin-bottom: var(--e-3); }
.guia__paso li + li { margin-top: var(--e-2); }
@media (max-width: 480px) {
  .guia__paso { padding-left: var(--e-5); padding-top: calc(var(--e-5) + 48px); }
}

code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; background: var(--fondo-calido); border: 1px solid var(--borde); border-radius: 4px; padding: 0 4px; overflow-wrap: anywhere; }
pre { margin: 0 0 var(--e-4); padding: var(--e-4); background: var(--fondo-oscuro); color: var(--sobre-oscuro); border-radius: var(--radio-s); overflow-x: auto; font-size: var(--t-sm); line-height: 1.5; }
pre code { background: none; border: 0; padding: 0; color: inherit; overflow-wrap: normal; }

/* Avisos y CTA suaves */
.aviso { max-width: 860px; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--mar); border-radius: var(--radio-s); padding: var(--e-5); margin-block: var(--e-6); }
.aviso h3 { font-size: var(--t-base); }
.aviso p:last-child { margin-bottom: 0; }
.aviso--cta { background: var(--fondo-calido); }

/* Listas simples dentro de tarjetas */
.lista-simple { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: grid; gap: var(--e-2); }
.lista-simple li { display: flex; gap: var(--e-2); align-items: flex-start; }
.lista-simple .icono { color: var(--exito); margin-top: 3px; }
.lista-simple--no li::before { content: "–"; color: var(--texto-suave); font-weight: 700; }

/* Descarga de plantillas */
.descarga { display: grid; gap: var(--e-5); align-items: center; margin-top: var(--e-6); }
@media (min-width: 960px) { .descarga { grid-template-columns: 1.3fr 1fr; } }
.descarga__vista { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); overflow: hidden; padding: var(--e-4); }
.descarga__vista img { width: 100%; height: 100%; object-fit: contain; }
.descarga__vista:has(img) { background: #FFFFFF; }
.descarga__accion { display: flex; flex-direction: column; gap: var(--e-3); align-items: flex-start; }
.tarjeta__vista { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: left top; background: #FFFFFF; border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: var(--e-3); }
.descarga__datos { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.boton--grande { min-height: 56px; padding-inline: var(--e-6); font-size: var(--t-lg); }

/* Artículos (plantillas y guías) */
.articulo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); padding-block: var(--e-7); }
.articulo > * { min-width: 0; }
.articulo > section, .articulo > aside { max-width: 760px; }
.articulo > section { scroll-margin-top: 96px; }
.articulo h2 { font-size: var(--t-xl); margin-top: var(--e-3); }
.articulo li + li { margin-top: var(--e-2); }
.articulo .relacionadas { max-width: none; }
.indice { max-width: 760px; background: var(--fondo-calido); border-radius: var(--radio); padding: var(--e-4) var(--e-5); }
.indice__titulo { font-weight: 700; color: var(--titulos); margin-bottom: var(--e-2); }
.indice ol { margin: 0; }
.indice a { display: inline-block; vertical-align: top; padding-block: var(--e-1); }

/* Tablas */
.tabla-envoltorio { overflow-x: auto; margin-bottom: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-s); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
caption { text-align: left; padding: var(--e-3) var(--e-4); font-weight: 700; color: var(--titulos); background: var(--fondo-calido); }
th, td { padding: var(--e-3) var(--e-4); text-align: left; border-top: 1px solid var(--borde); vertical-align: top; }
thead th { color: var(--titulos); background: var(--superficie); }
tfoot th, tfoot td { background: var(--fondo-calido); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Pie ---------- */
.pie { background: var(--fondo-calido); border-top: 1px solid var(--borde); padding-block: var(--e-8) var(--e-6); font-size: var(--t-sm); }
.pie__columnas { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pie__titulo { font-size: var(--t-base); margin-bottom: var(--e-2); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); }
.pie__legal { margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--borde); color: var(--texto-suave); }
.pie__legal p { margin-bottom: var(--e-2); }

/* ---------- Barra fija en móvil ---------- */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: var(--e-2); align-items: center;
  min-height: var(--barra-movil); padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--borde); box-shadow: 0 -4px 16px rgb(7 39 76 / 0.1);
}
.barra-movil .boton--principal { flex: 1; }
.barra-movil .boton--secundario { flex: none; width: 48px; padding: 0; }
@media (min-width: 1080px) {
  .barra-movil { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Aviso de cookies (no bloquea el contenido) ---------- */
.aviso-cookies { position: fixed; z-index: 40; left: var(--e-4); right: var(--e-4); bottom: calc(var(--barra-movil) + var(--e-3)); max-width: 520px; padding: var(--e-4); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); font-size: var(--t-sm); }
.aviso-cookies p { margin-bottom: var(--e-3); }
@media (min-width: 1080px) { .aviso-cookies { left: auto; bottom: var(--e-4); } }
.pie__boton-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--enlace); text-decoration: underline; cursor: pointer; min-height: 44px; }

/* ---------- Imagen OG 1200×630 (/_og/, solo para tools/og.mjs) ---------- */
.og { margin: 0; padding: 0; width: 1200px; height: 630px; overflow: hidden; background: #07274C; }
.og__lienzo { box-sizing: border-box; width: 1200px; height: 630px; padding: 64px 72px; display: flex; flex-direction: column; color: #FFFFFF; font-family: var(--fuente-texto); border-bottom: 14px solid #FACF48;
  background: radial-gradient(55% 80% at 90% 10%, rgb(27 112 210 / 0.6), transparent 70%), radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.10) 1px, transparent 0) 0 0 / 24px 24px, #07274C; }
.og__logo { display: block; align-self: flex-start; width: auto; height: 52px; }
.og__antetitulo { margin: auto 0 16px; font-size: 26px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FACF48; }
.og__titulo { margin: 0 0 32px; font: 400 66px/1.1 var(--fuente-titulos); letter-spacing: 0; color: #FFFFFF; max-width: 1040px; text-wrap: balance; }
.og__pie { margin: 0; font-size: 26px; color: #DCE8F7; }

/* ---------- Catálogo /_estilos/ ---------- */
.muestras { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; padding: 0; }
.muestra { border: 1px solid var(--borde); border-radius: var(--radio-s); overflow: hidden; font-size: var(--t-xs); }
.muestra__color { height: 56px; }
.muestra--fondo { background: var(--fondo); }
.muestra--fondo-calido { background: var(--fondo-calido); }
.muestra--superficie { background: var(--superficie); }
.muestra--fondo-oscuro { background: var(--fondo-oscuro); }
.muestra--texto { background: var(--texto); }
.muestra--texto-suave { background: var(--texto-suave); }
.muestra--titulos { background: var(--titulos); }
.muestra--enlace { background: var(--enlace); }
.muestra--mar { background: var(--mar); }
.muestra--borde { background: var(--borde); }
.muestra--cta-fondo { background: var(--cta-fondo); }
.muestra--cta-texto { background: var(--cta-texto); }
.muestra--sobre-oscuro { background: var(--sobre-oscuro); }
.muestra--sobre-oscuro-suave { background: var(--sobre-oscuro-suave); }
.muestra--exito { background: var(--exito); }
.muestra--todo-fondo { background: var(--todo-fondo); }
.muestra--todo-texto { background: var(--todo-texto); }
.h1-muestra { font: 400 var(--t-3xl)/1.15 var(--fuente-titulos); color: var(--titulos); }
.muestra__datos { padding: var(--e-2); background: var(--superficie); }

/* ---------- Marcas de trabajo (se eliminan antes del lanzamiento) ---------- */
.todo { background: var(--todo-fondo); color: var(--todo-texto); padding: 0 var(--e-1); border-radius: 4px; font-size: 0.85em; font-weight: 600; }
.aviso-fase { color: var(--texto-suave); font-style: italic; }