/* ==========================================================================
   Estilo de la casa · creators
   Fuente única de los tokens y de las piezas base de nuestras superficies
   (plano del sistema, propuestas, informes). Guía: diseno/README.md
   Los productos de cada creador NO usan esto: usan su marca (paso 9 del constructor).

   Superficies que ve el creador (propuesta, landing de la casa): <html data-superficie="cliente">, capa al final.
   Requiere en el HTML, antes de este CSS (Inter variable: el peso 650 existe de verdad, no se redondea a 700):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400..800&display=swap">

   Tema por defecto: OSCURO (05-10-2026). El claro es el derivado: se pide con <html data-theme="light">.
   Cada token del bloque claro lleva su rol en un comentario: la guía lo lee de aquí.
   Tras editar: python3 catalogos/catalogos.py (regenera la guía y el plano)
   ========================================================================== */

:root{
  /* paleta de marca (empresa/marca/README.md · La paleta, 08-10-2026): dos escalas de 12 pasos, método Radix en OKLCH.
     Cada paso tiene un uso fijo; los tokens de abajo apuntan a ellas. Se conservan enteras, como las categorías */
  --n-1:#FCFCFD;         /* neutro 1 · fondo de la app */
  --n-2:#F9F9FA;         /* neutro 2 · fondo sutil */
  --n-3:#F0F0F1;         /* neutro 3 · fondo de pieza */
  --n-4:#E8E8E9;         /* neutro 4 · pieza al pasar */
  --n-5:#E0E0E1;         /* neutro 5 · pieza activa */
  --n-6:#D9D9DA;         /* neutro 6 · borde sutil */
  --n-7:#CECECF;         /* neutro 7 · borde */
  --n-8:#BBBBBC;         /* neutro 8 · borde fuerte */
  --n-9:#8D8D8E;         /* neutro 9 · relleno sólido */
  --n-10:#838384;        /* neutro 10 · relleno al pasar */
  --n-11:#646465;        /* neutro 11 · texto apagado */
  --n-12:#202020;        /* neutro 12 · texto */
  --g-1:#FEFDFB;         /* dorado 1 · fondo de la app */
  --g-2:#FFFAEF;         /* dorado 2 · fondo sutil */
  --g-3:#FFF4DC;         /* dorado 3 · fondo de pieza */
  --g-4:#FFEBBF;         /* dorado 4 · pieza al pasar */
  --g-5:#FFE09E;         /* dorado 5 · pieza activa */
  --g-6:#F6D388;         /* dorado 6 · borde sutil */
  --g-7:#E7C178;         /* dorado 7 · borde */
  --g-8:#DCA557;         /* dorado 8 · borde fuerte */
  --g-9:#D9A441;         /* dorado 9 · relleno sólido · el de marca, #D9A441 en los dos temas */
  --g-10:#C5912A;        /* dorado 10 · relleno al pasar */
  --g-11:#8E5D00;        /* dorado 11 · texto apagado */
  --g-12:#483823;        /* dorado 12 · texto */
  /* superficies */
  --ground:var(--n-4);     /* fondo de página, algo más oscuro que las tarjetas */
  --surface:var(--n-1);    /* tarjetas y paneles */
  --surface2:var(--n-3);   /* lo que va dentro de la tarjeta: campos, celdas, cifras */
  --inverso:var(--n-12);   /* bloque contrario: cierre, portada oscura, diapositiva */
  --sobre-inverso:var(--n-1); /* texto sobre el bloque contrario */
  --tinta:32,32,32;        /* la tinta de la que salen texto, filetes y rellenos: el neutro 12 */
  --ink:rgba(var(--tinta),1);       /* texto principal: el neutro 12 · 15,9:1 */
  --muted:rgba(var(--tinta),.77);   /* texto secundario, etiquetas · 7,5:1 */
  --faint:rgba(var(--tinta),.69);   /* pies, método y notas · 5,8:1 */
  --relleno:rgba(var(--tinta),.20); /* gráficas: lo que no se señala */
  --line:rgba(var(--tinta),.16);    /* bordes de 1 px y separadores: el neutro 6 */
  --sunk:rgba(var(--tinta),.05);    /* zonas hundidas: código, barras vacías, filas de grupo */
  /* dorado de marca: el mismo en los dos temas, también como letra (Francisco, 08-10-2026) */
  --oro:var(--g-9);        /* relleno: botón, filete, monograma; también letra en los dos temas */
  --oro-borde:transparent; /* filo del relleno: sin filo en los dos temas desde el 08-10-2026 */
  --oro-hover:#EDB756;     /* relleno al pasar el cursor: el mismo que en oscuro */
  --oro-texto:var(--g-9);  /* todo dorado que es letra: el de marca (Francisco, 08-10-2026) · 2,2:1, por debajo de AA */
  --oro-suave:rgba(181,129,44,.45); /* rotulador bajo el titular y estela del bucle */
  --oro-tinte:var(--g-3);  /* fondo suave de marca y selección */
  --sobre-oro:#17130F;     /* texto sobre el relleno dorado · 8,2:1 */
  --foco:var(--g-11);      /* anillo de foco: el dorado 11, para que se vea · 4,6:1 sobre el fondo */
  --accent:var(--oro-texto);      /* alias: acento único, sin color propio */
  --accent-soft:var(--oro-tinte); /* alias: fondo de etiquetas con acento */
  /* estados: la letra y su tinte de relleno. Fuera de la paleta de marca: solo señalan */
  --ok:#1C6B48;            /* estado: completo, bien · 6,0:1 */
  --ok-tinte:#E4F2EA;      /* relleno de la píldora de completo */
  --warn:#6E5A12;          /* estado: parcial validado, aviso · 6,2:1 */
  --warn-tinte:#F6F0C4;    /* relleno de la píldora de parcial validado */
  --risk:#A8480E;          /* estado: sin validar, abierto · 5,4:1 */
  --risk-tinte:#FAE7DA;    /* relleno de la píldora de sin validar */
  --bad:#A81F1A;           /* estado: vacío, bloqueante, error · 6,8:1 */
  --bad-tinte:#F9E1E0;     /* relleno de la píldora de vacío */
  --error:#A81F1A;         /* error de un campo de formulario */
  --idle:rgba(var(--tinta),.69);      /* estado: aplazado */
  --idle-tinte:rgba(var(--tinta),.06);/* relleno de la píldora de aplazado */
  /* categorías del panel y del plano */
  --cat-pizarra:#535B68;   /* categoría 1 */
  --cat-azul:#245F9E;      /* categoría 2 */
  --cat-cobre:#9E4A2E;     /* categoría 3 · sustituye al ámbar, que se confundía con el dorado */
  --cat-verde:#1C7259;     /* categoría 4 */
  --cat-violeta:#6642A3;   /* categoría 5 */
  --cat-rosa:#A93B4D;      /* categoría 6 */
  /* relieve */
  --shadow:0 1px 1px rgba(var(--tinta),.03), 0 2px 6px rgba(var(--tinta),.03), 0 18px 40px -18px rgba(var(--tinta),.16); /* relieve de tarjetas */
  --sombra-alta:0 2px 4px rgba(var(--tinta),.04), 0 28px 56px -22px rgba(var(--tinta),.30); /* tarjeta elevada al pasar el cursor */
  --brillo:rgba(255,255,255,.75);  /* filo de luz en el borde superior de las tarjetas */
  --destello:rgba(255,255,255,.55); /* franja de luz que cruza un botón de acción; la misma en los dos temas */
  /* tipografía (empresa/marca/README.md, 05-10-2026). Techo de peso: 700 */
  --f-texto:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;           /* texto corrido y titulares */
  --f-titular:var(--f-texto);                                                    /* titulares: hoy, la misma que el texto */
  --f-datos:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;         /* identificadores, códigos y etiquetas pequeñas */
  --f-editorial:"Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif; /* reservada, sin uso hoy: quizá la presentación comercial */
  /* Familias de tokens estructurales (una regla, sin dos nombres para lo mismo): --t-* letra · --peso-* peso · --interl-*
     interletraje · --radio-* esquinas · --esp-* espacio · --toque y --alto-* tamaños de control · --mov-* y --curva tiempo */
  --t-0:12px;                     /* letra 0 · etiquetas, chips, píldoras y pies: el mínimo de la casa (05-10-2026) */
  --t-1:14px;                     /* letra 1 · notas, texto de tabla y texto secundario */
  --t-2:16px;                     /* letra 2 · texto corrido y campos de formulario */
  --t-3:18px;                     /* letra 3 · texto destacado, botón y nombre de un elemento */
  --t-4:clamp(20px,2.2vw,24px);   /* letra 4 · título de tarjeta y subtítulo de portada */
  --t-cifra:28px;                 /* letra cifra · cifra de una tarjeta o de un informe, de tamaño fijo */
  --t-5:clamp(28px,4.2vw,40px);   /* letra 5 · título de sección y cifra grande */
  --t-6:clamp(33px,5.6vw,53px);   /* letra 6 · titular de portada */
  --t-portada:clamp(28px,7.4vw,76px); /* letra portada · titular de la portada de la web: dos líneas como mucho a cualquier ancho (08-10-2026) */
  --t-7:clamp(64px,11vw,112px);   /* letra 7 · cifra de exhibición: el «0 €» de una sección */
  --peso-fino:300;                /* peso · titulares finos de la web (08-10-2026) */
  --peso-texto:400;               /* peso · texto corrido */
  --peso-medio:500;               /* peso · etiquetas, enlaces y énfasis suave */
  --peso-negrita:600;             /* peso · negritas y títulos pequeños */
  --peso-titulo:700;              /* peso · titulares y cifras grandes: el techo de la casa */
  --interl-titulo:-.03em;         /* interletraje · titulares y cifras grandes */
  --interl-subtitulo:-.015em;     /* interletraje · títulos pequeños */
  --interl-etiqueta:.08em;        /* interletraje · etiquetas en mayúsculas */
  --interl-ancha:.12em;           /* interletraje · versalitas de marca (insignia y etiqueta de bloque) */
  --radio-marca:6px;              /* esquina · marcas, barras y piezas pequeñas */
  --radio-campo:12px;             /* esquina · campo de formulario, botón pequeño y filtro */
  --radio-interior:16px;          /* esquina · lo que va dentro de la tarjeta, tablas y botón principal */
  --radio-tarjeta:24px;           /* esquina · tarjeta y hoja modal */
  --radio-pildora:999px;          /* esquina · chips y píldoras (los círculos, 50 %) */
  --esp-1:4px;                    /* espacio 1 · rejillas apretadas */
  --esp-2:8px;                    /* espacio 2 · entre piezas pequeñas */
  --esp-3:12px;                   /* espacio 3 · entre campos */
  --esp-4:16px;                   /* espacio 4 · separación interna y margen lateral */
  --esp-5:24px;                   /* espacio 5 · interior de una tarjeta y entre bloques */
  --esp-6:32px;                   /* espacio 6 · entre grupos */
  --esp-7:48px;                   /* espacio 7 · entre secciones en móvil */
  --esp-8:64px;                   /* espacio 8 · entre secciones en escritorio */
  --toque:44px;                   /* tamaño · objetivo táctil mínimo: WCAG 2.2 SC 2.5.5, nivel AAA (el AA, 2.5.8, pide 24 px) */
  --alto-logo:24px;               /* tamaño · el logotipo en una cabecera o un pie */
  --ancho-pagina:1080px;          /* tamaño · ancho máximo del contenido de una página pública */
  --ancho-lectura:720px;          /* tamaño · ancho de un bloque de lectura: texto, preguntas, una tarjeta sola */
  --alto-boton:52px;              /* tamaño · altura de un botón principal y de un campo en pantalla táctil */
  /* movimiento (diseno/movimiento.js): pocas duraciones y una sola curva de salida */
  --mov-rapido:200ms; --mov-medio:600ms; --mov-lento:1200ms;
  --curva:cubic-bezier(.22,1,.36,1); --rebote:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
/* Tema oscuro, el de por defecto (05-10-2026): todo lo que no pida data-theme="light". Grises neutros, sin resplandor.
   Contrastes medidos (WCAG, sobre --surface, 08-10-2026): tinta 15,3 · --muted 8,6 · --faint 5,7 · oro 7,9 · oro-texto 9,6 ·
   ok 9,0 · warn 10,3 · risk 8,0 · bad 6,7. Todo texto pasa AA también sobre --ground y --surface2 */
:root:not([data-theme="light"]){
  --n-1:#0A0B0C; --n-2:#17181B; --n-3:#232428; --n-4:#292A2D; --n-5:#303134; --n-6:#393A3D;
  --n-7:#47484B; --n-8:#5F6064; --n-9:#6D6E70; --n-10:#7A7B7D; --n-11:#B3B4B6; --n-12:#EDEEF1;
  --g-1:#16120D; --g-2:#1D1811; --g-3:#2E210E; --g-4:#3C280B; --g-5:#49320F; --g-6:#593E18;
  --g-7:#6D5028; --g-8:#896636; --g-9:#D9A441; --g-10:#EDB756; --g-11:#E1B872; --g-12:#FEE6BD;
  --ground:var(--n-1); --surface:var(--n-2); --surface2:var(--n-3); --inverso:var(--n-12); --sobre-inverso:var(--n-1); --tinta:237,238,241;
  --ink:rgba(var(--tinta),1); --muted:rgba(var(--tinta),.73); --faint:rgba(var(--tinta),.57);
  --relleno:rgba(var(--tinta),.24); --line:rgba(var(--tinta),.16); --sunk:rgba(var(--tinta),.06);
  --oro:var(--g-9); --oro-borde:transparent; --oro-hover:var(--g-10); --oro-texto:var(--g-11);
  --oro-suave:rgba(217,164,65,.72); --oro-tinte:var(--g-3); --sobre-oro:#17130F; --foco:var(--g-11);
  --ok:#6CCB94; --ok-tinte:rgba(108,203,148,.18); --warn:#DCC463; --warn-tinte:rgba(220,196,99,.18);
  --risk:#F09A5A; --risk-tinte:rgba(240,154,90,.18); --bad:#F07C82; --bad-tinte:rgba(240,124,130,.18);
  --error:#F07C82; --idle:rgba(var(--tinta),.58); --idle-tinte:rgba(var(--tinta),.08);
  --cat-pizarra:#A6ADBF; --cat-azul:#6FA8E6; --cat-cobre:#E08A66;
  --cat-verde:#5CC9A5; --cat-violeta:#B393EC; --cat-rosa:#EE8394;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(0,0,0,.7);
  --sombra-alta:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -22px rgba(0,0,0,.9);
  --brillo:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-texto);font-size:var(--t-2);line-height:1.5;
  font-variant-numeric:tabular-nums;padding-inline:clamp(16px,3vw,40px);padding-block:var(--esp-5) var(--esp-8)}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font-family:var(--f-titular);font-size:clamp(34px,4.4vw,52px);font-weight:var(--peso-titulo);letter-spacing:var(--interl-titulo);line-height:1.05}
h2{font-family:var(--f-titular);font-weight:var(--peso-titulo);letter-spacing:var(--interl-titulo)}
h3{font-family:var(--f-titular);font-weight:var(--peso-negrita)}
b,strong{font-weight:var(--peso-negrita)}
code,.mono{font-family:var(--f-datos);font-size:.86em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--radio-marca)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---------- piezas ---------- */
/* Etiqueta pequeña en mayúsculas, sobre un título o un grupo */
.eyebrow,.lbl{font-family:var(--f-datos);font-weight:var(--peso-medio);font-size:var(--t-0);letter-spacing:var(--interl-etiqueta);text-transform:uppercase;color:var(--muted)}
.lbl{margin-bottom:var(--esp-1)}

/* Pestañas subrayadas, nunca rellenas */
.tabs{display:flex;gap:var(--esp-1);flex-wrap:wrap}
.tab{border:0;border-bottom:2px solid transparent;background:none;padding:var(--esp-2) 2px;min-height:var(--toque);margin-right:var(--esp-4);border-radius:0;cursor:pointer;
  font-weight:var(--peso-texto);font-size:var(--t-2);color:var(--muted)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* Tarjeta: superficie blanca, borde de 1 px y relieve suave.
   Con --tc (un --cat-*) se tiñe de su categoría: .tarjeta.tinte */
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radio-tarjeta);box-shadow:var(--shadow)}
.tarjeta.tinte{--tc:var(--cat-pizarra);border-top:2px solid var(--tc);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--tc) 9%, var(--surface)), var(--surface) 55%)}
.tarjeta.tinte.sel{background:color-mix(in srgb, var(--tc) 10%, var(--surface));box-shadow:0 0 0 1px var(--tc) inset, var(--shadow)}

/* Chip: botón o etiqueta redondeada; .tag para identificadores */
.chips{display:flex;flex-wrap:wrap;gap:var(--esp-1)}
.chip{border:1px solid var(--line);background:var(--ground);border-radius:var(--radio-pildora);padding:2px var(--esp-2) 2px var(--esp-2);font-size:var(--t-0);cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--esp-1);line-height:1.6}
.chip:hover{border-color:var(--bc,var(--accent))}
.chip .sw{width:7px;height:7px;border-radius:50%;background:var(--bc,var(--muted))}
.chip.tag{cursor:default;font-family:var(--f-datos);font-weight:var(--peso-medio);font-size:var(--t-0);padding:1px var(--esp-2)}
.chip.tag:hover{border-color:var(--line)}

/* Píldora de estado: relleno tintado y letra del estado (18-09-2026).
   El relleno es de los estados; el contorno dorado es de la marca (.insignia). Así no se confunden. */
.pill{display:inline-block;white-space:nowrap;font-family:var(--f-datos);font-weight:var(--peso-medio);font-size:var(--t-0);padding:1px var(--esp-2);border-radius:var(--radio-pildora);
  background:var(--idle-tinte);color:var(--idle)}
.pill.ok{background:var(--ok-tinte);color:var(--ok)}
.pill.warn{background:var(--warn-tinte);color:var(--warn)}
.pill.open{background:var(--risk-tinte);color:var(--risk)}
.pill.bad{background:var(--bad-tinte);color:var(--bad)}
.pill.oro{background:var(--oro-tinte);color:var(--oro-texto)}

/* Bloque contrario: el trozo oscuro de una página clara (y al revés). Voltea la tinta, así hereda sus propias líneas */
.inverso{background:var(--inverso);color:var(--sobre-inverso);--tinta:252,252,253}
:root:not([data-theme="light"]) .inverso{--tinta:10,11,12}

/* Medidor de estado en 4 segmentos: la forma dice el estado aunque no se vea el color */
.meter{display:inline-flex;gap:2px}
.meter i{width:9px;height:5px;border-radius:1px;background:var(--line)}
.meter[data-e="completo"] i{background:var(--ok)}
.meter[data-e="parcial-validado"] i:nth-child(-n+3){background:var(--warn)}
.meter[data-e="parcial-sin-validar"] i:nth-child(-n+2){background:var(--risk)}
.meter[data-e="vacio"] i:first-child{background:var(--bad)}
.meter[data-e="fase-2"] i{background:none;border:1px dashed var(--idle)}

/* ---------- capa «datos»: páginas densas (panel, listas, tablas) ----------
   Una página de datos lleva class="pagina-datos" y se compone con estas piezas; todo lo de esta capa actúa solo dentro de
   ella, para no chocar con las clases de otras superficies. Solo escribe el ancho de sus columnas. Mobile-first: los
   controles se fijan arriba solo desde 701 px. Datos de creadores: se generan en .cache/, nunca en el repo (invariante 1). */
.pagina-datos{max-width:1500px;margin:0 auto;display:grid;gap:var(--esp-5)}
.pagina-datos>header{display:grid;gap:var(--esp-3)}
.pagina-datos h1{font-size:var(--t-5)}
.pagina-datos .nota{margin:0;font-size:var(--t-1);color:var(--faint);max-width:90ch}
/* Informe: una fila de cifras con su etiqueta, separadas por filetes. --min es el ancho mínimo de cada celda */
.pagina-datos .informe{--min:180px;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radio-interior);overflow:hidden}
.pagina-datos .dato{background:var(--surface);padding:var(--esp-3) var(--esp-4);display:grid;gap:var(--esp-1);align-content:start}
.pagina-datos .dato b{font-family:var(--f-titular);font-size:var(--t-cifra);font-weight:var(--peso-titulo);
  letter-spacing:var(--interl-titulo);line-height:1.1}
.pagina-datos .dato span{font-size:var(--t-1);color:var(--muted)}
/* Barra de controles: filtros, pestañas y búsqueda. Fija arriba solo en pantallas anchas */
.pagina-datos .controles{display:flex;flex-wrap:wrap;gap:var(--esp-3) var(--esp-5);align-items:center;background:var(--ground);
  padding-block:var(--esp-3);z-index:2;border-bottom:1px solid var(--line)}
@media (min-width:701px){.pagina-datos .controles{position:sticky;top:env(safe-area-inset-top,0px)}}
.pagina-datos .grupo{display:flex;flex-wrap:wrap;gap:var(--esp-1);align-items:center}
.pagina-datos .grupo .lbl{margin:0 var(--esp-1) 0 0}
/* Filtro: un chip que se enciende y se apaga con aria-pressed */
.pagina-datos .chip.grande{padding:var(--esp-1) var(--esp-3);font-size:var(--t-1)}
.pagina-datos .chip[aria-pressed="true"]{background:var(--oro-tinte);border-color:var(--oro-suave);color:var(--ink)}
/* Control de una barra: búsqueda y selector */
.pagina-datos .control{border:1px solid var(--line);background:var(--surface2);color:var(--ink);padding:var(--esp-1) var(--esp-3);
  border-radius:var(--radio-campo);font:inherit;font-size:var(--t-1);min-width:0}
.pagina-datos select.control{max-width:240px}
/* Tabla: cabecera fija y ordenable, filas con filete. td.n alinea las cifras a la derecha */
.pagina-datos .tabla{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radio-interior);background:var(--surface)}
.pagina-datos .tabla table{border-collapse:collapse;width:100%;font-size:var(--t-1)}
.pagina-datos .tabla th{position:sticky;top:0;background:var(--surface);text-align:left;font-family:var(--f-datos);
  font-weight:var(--peso-medio);font-size:var(--t-0);letter-spacing:var(--interl-etiqueta);text-transform:uppercase;
  color:var(--muted);padding:var(--esp-3);border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.pagina-datos .tabla th[aria-sort="ascending"]::after{content:" ↑"}
.pagina-datos .tabla th[aria-sort="descending"]::after{content:" ↓"}
.pagina-datos .tabla td{padding:var(--esp-3);border-bottom:1px solid var(--line);vertical-align:top}
.pagina-datos .tabla tr:last-child td{border-bottom:0}
.pagina-datos .tabla td.n{text-align:right;white-space:nowrap}
.pagina-datos .tabla .vacio{padding:var(--esp-6);color:var(--muted)}
.pagina-datos .quien a{color:var(--ink);font-weight:var(--peso-negrita);text-decoration:none}
.pagina-datos .quien a:hover,.pagina-datos .quien a:focus-visible{text-decoration:underline}
.pagina-datos .sub{display:block;color:var(--muted);font-size:var(--t-0)}
.pagina-datos .contacto{font-family:var(--f-datos);font-size:var(--t-0);user-select:all;word-break:break-all}

/* ---------- capa «cliente»: lo que ve el creador ----------
   Una sola identidad (18-09-2026): esta capa NO tiene colores propios, hereda los tokens de arriba.
   Lo único que cambia frente a lo interno es la densidad: menos por pantalla, más aire y movimiento.
   La paleta del creador solo entra en detalles de las secciones que hablan de su marca. */
[data-superficie="cliente"] body{font-family:var(--f-texto);font-size:var(--t-3);line-height:1.55;padding:0;overflow-x:clip;
  -webkit-text-size-adjust:100%}
[data-superficie="cliente"] :is(h1,h2){font-family:var(--f-titular);font-weight:var(--peso-titulo);letter-spacing:var(--interl-titulo)}
[data-superficie="cliente"] h3{font-size:var(--t-4);font-weight:var(--peso-negrita);line-height:1.3;letter-spacing:var(--interl-subtitulo)}
[data-superficie="cliente"] :is(b,strong){font-weight:var(--peso-negrita)}
/* :where() sin especificidad: las piezas de cada página ponen su propio margen */
:where([data-superficie="cliente"]) p{margin:0}
[data-superficie="cliente"] .num{font-variant-numeric:tabular-nums}
/* Botón de la única acción: dorado con texto oscuro en los dos temas */
[data-superficie="cliente"] .boton{appearance:none;border:0;cursor:pointer;background:var(--oro);color:var(--sobre-oro);
  font:600 var(--t-3)/1 var(--f-texto);border-radius:var(--radio-pildora);padding:var(--esp-4) var(--esp-6);min-height:var(--alto-boton);transition:background var(--mov-rapido);
  box-shadow:inset 0 0 0 1px var(--oro-borde), 0 6px 18px -8px color-mix(in srgb,var(--oro) 55%,transparent)}
[data-superficie="cliente"] .boton:hover{background:var(--oro-hover)}
[data-superficie="cliente"] .boton.hecho{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--oro)}
/* Un enlace con forma de botón: centra su texto y pierde el subrayado */
[data-superficie="cliente"] a.boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);text-decoration:none}
/* Botón secundario: la segunda acción, al lado de la principal. Mismo tamaño, sin relleno ni dorado */
[data-superficie="cliente"] .boton.secundario{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
[data-superficie="cliente"] .boton.secundario:hover{background:var(--sunk);box-shadow:inset 0 0 0 1px var(--muted)}
/* Botón compacto: en una cabecera o una barra. Alto del objetivo táctil mínimo */
[data-superficie="cliente"] .boton.compacto{min-height:var(--toque);padding:0 var(--esp-4);font-size:var(--t-1);box-shadow:none}

/* ---------- capa «cliente»: piezas ----------
   Acabado: filetes de 1 px, relieve en capas, un filo de luz arriba y el dorado solo como detalle. */
[data-superficie="cliente"] .tarjeta{border-radius:var(--radio-tarjeta);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--ground)));
  box-shadow:inset 0 1px 0 var(--brillo),var(--shadow)}
/* Tarjeta con filete dorado que se desvanece en el borde superior */
[data-superficie="cliente"] .tarjeta.oro{position:relative}
[data-superficie="cliente"] .tarjeta.oro::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent)}
/* Etiqueta: sobre un bloque, en versalitas espaciadas y dorado de texto */
[data-superficie="cliente"] .etiqueta{display:block;font-size:var(--t-1);font-weight:var(--peso-negrita);letter-spacing:var(--interl-ancha);
  text-transform:uppercase;color:var(--oro-texto);margin-bottom:var(--esp-3)}
/* Icono de línea (diseno/iconos) */
[data-superficie="cliente"] .ico{width:1.25em;height:1.25em;stroke-width:1.5;flex:none;vertical-align:-.2em}
/* Dos bloques lado a lado; uno debajo de otro en móvil */
[data-superficie="cliente"] .dos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--esp-3)}
@media (max-width:700px){[data-superficie="cliente"] .dos{grid-template-columns:1fr}}
/* Lista con rombo dorado y filetes entre elementos */
[data-superficie="cliente"] .lista{list-style:none;margin:0;padding:0}
[data-superficie="cliente"] .lista li{position:relative;padding:var(--esp-3) 0 var(--esp-3) var(--esp-5);border-top:1px solid var(--line);
  font-size:var(--t-2);line-height:1.5}
[data-superficie="cliente"] .lista li:first-child{border-top:0;padding-top:2px}
[data-superficie="cliente"] .lista li::before{content:"";position:absolute;left:2px;top:calc(12px + .62em);width:6px;height:6px;
  background:var(--oro);transform:rotate(45deg)}
[data-superficie="cliente"] .lista li:first-child::before{top:calc(2px + .62em)}
[data-superficie="cliente"] .lista.tenue li::before{background:none;border:1px solid var(--faint)}
/* Destacado: la conclusión de una sección, en la voz de los titulares, con un filete dorado que se desvanece */
[data-superficie="cliente"] .destacado{position:relative;margin:var(--esp-7) 0 0;padding:var(--esp-1) 0 var(--esp-1) var(--esp-6)}
[data-superficie="cliente"] .destacado::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--oro) 20%,var(--oro) 80%,transparent)}
[data-superficie="cliente"] .destacado::after{content:"";position:absolute;left:-3px;top:50%;width:7px;height:7px;
  background:var(--oro);transform:translateY(-50%) rotate(45deg)}
[data-superficie="cliente"] .destacado p{font-family:var(--f-titular);font-weight:var(--peso-negrita);
  font-size:var(--t-5);line-height:1.18;letter-spacing:var(--interl-subtitulo);max-width:30ch;text-wrap:balance}
/* Flujo: pasos con icono unidos por un filete; el último puede marcar el límite (.techo). Vertical en móvil */
[data-superficie="cliente"] .flujo{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--esp-2)}
[data-superficie="cliente"] .paso{position:relative;text-align:center;padding:0 var(--esp-1)}
[data-superficie="cliente"] .paso .marca{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;margin:0 auto var(--esp-3);
  border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:inset 0 1px 0 var(--brillo)}
[data-superficie="cliente"] .paso+.paso::before{content:"";position:absolute;top:24px;right:calc(50% + 28px);width:calc(100% - 48px);height:1px;
  background:var(--line)}
[data-superficie="cliente"] .paso b{display:block;font-size:var(--t-2)}
[data-superficie="cliente"] .paso small{display:block;font-size:var(--t-1);color:var(--muted);line-height:1.35;margin-top:2px}
[data-superficie="cliente"] .paso.techo .marca{border-color:var(--oro);color:var(--oro-texto);background:var(--accent-soft)}
[data-superficie="cliente"] .paso.techo small{color:var(--oro-texto);font-weight:var(--peso-negrita)}
@media (max-width:640px){
  [data-superficie="cliente"] .flujo{grid-auto-flow:row;gap:0}
  [data-superficie="cliente"] .paso{display:grid;grid-template-columns:48px 1fr;column-gap:var(--esp-3);align-items:center;text-align:left;padding:0 0 var(--esp-4)}
  [data-superficie="cliente"] .paso .marca{margin:0;grid-row:span 2}
  [data-superficie="cliente"] .paso:last-child{padding-bottom:0}
  [data-superficie="cliente"] .paso b{align-self:end}
  [data-superficie="cliente"] .paso small{align-self:start}
  [data-superficie="cliente"] .paso+.paso::before{top:-18px;left:24px;right:auto;width:1px;height:18px}
}
/* Tres bloques en fila; uno debajo de otro en móvil */
[data-superficie="cliente"] .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-3)}
@media (max-width:760px){[data-superficie="cliente"] .tres{grid-template-columns:1fr}}
/* Casilla de icono: cuadrado redondeado con tinte dorado, arriba de una tarjeta */
[data-superficie="cliente"] .casilla{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radio-campo);
  background:var(--accent-soft);color:var(--oro-texto);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--oro) 28%,transparent)}
[data-superficie="cliente"] .casilla .ico{width:22px;height:22px}
/* Comparativa de dos columnas: la de la izquierda, tenue; la de la derecha, la que se señala */
[data-superficie="cliente"] .comparativa{display:grid;grid-template-columns:minmax(110px,.8fr) 1fr 1fr;border-radius:var(--radio-interior);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 var(--brillo),var(--shadow)}
[data-superficie="cliente"] .comparativa>*{padding:var(--esp-3) var(--esp-4);border-top:1px solid var(--line);font-size:var(--t-2);display:flex;gap:var(--esp-2);align-items:center}
[data-superficie="cliente"] .comparativa>.cab{border-top:0;font-weight:var(--peso-negrita);font-size:var(--t-2);padding-top:var(--esp-4);padding-bottom:var(--esp-3);justify-content:center;text-align:center}
[data-superficie="cliente"] .comparativa>.fila{color:var(--muted);font-size:var(--t-1);text-transform:uppercase;letter-spacing:var(--interl-ancha);font-weight:var(--peso-negrita)}
[data-superficie="cliente"] .comparativa>.antes{color:var(--muted)}
[data-superficie="cliente"] .comparativa>.antes .ico{color:var(--faint)}
[data-superficie="cliente"] .comparativa>.despues{background:var(--accent-soft);font-weight:var(--peso-medio)}
[data-superficie="cliente"] .comparativa>.despues .ico{color:var(--oro-texto)}
[data-superficie="cliente"] .comparativa>.cab.despues{color:var(--oro-texto);position:relative}
[data-superficie="cliente"] .comparativa>.cab.despues::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--oro)}
@media (max-width:560px){
  [data-superficie="cliente"] .comparativa{grid-template-columns:1fr 1fr}
  [data-superficie="cliente"] .comparativa>.fila{grid-column:1/-1;padding-bottom:0;border-top:1px solid var(--line)}
  [data-superficie="cliente"] .comparativa>.fila+*,[data-superficie="cliente"] .comparativa>.fila+*+*{border-top:0}
  [data-superficie="cliente"] .comparativa>.cab.vacia{display:none}
}
/* Insignia: nombre de la sección, encima del titular. Píldora con borde fino dorado */
[data-superficie="cliente"] .insignia{display:inline-flex;align-items:center;gap:var(--esp-1);margin-bottom:var(--esp-3);padding:3px var(--esp-2) 3px var(--esp-2);
  border-radius:var(--radio-pildora);border:1px solid color-mix(in srgb,var(--oro) 55%,transparent);background:var(--accent-soft);
  font-size:var(--t-0);font-weight:var(--peso-negrita);letter-spacing:var(--interl-ancha);text-transform:uppercase;color:var(--oro-texto);line-height:1.5}
[data-superficie="cliente"] .insignia::before{content:"";width:4px;height:4px;background:var(--oro);transform:rotate(45deg)}
/* Línea de tiempo: pasos numerados en vertical. Cada paso tiene su tramo de filete hasta el siguiente, que se rellena
   de dorado según --avance (0 a 1, lo pone la página al hacer scroll; sin script, relleno). .hito, el paso que se señala.
   Una segunda lista sigue la numeración con --desde (nº de pasos anteriores) y start */
[data-superficie="cliente"] .linea{list-style:none;margin:0;padding:0;counter-reset:linea var(--desde,0)}
[data-superficie="cliente"] .linea>li{position:relative;counter-increment:linea;padding:0 0 var(--esp-6) var(--esp-8);min-height:40px}
[data-superficie="cliente"] .linea>li:last-child{padding-bottom:0}
[data-superficie="cliente"] .linea>li:not(:last-child)::after{content:"";position:absolute;left:19.5px;top:40px;bottom:0;width:1px;
  background:linear-gradient(var(--oro),var(--oro)) top/100% calc(var(--avance,1) * 100%) no-repeat,var(--line)}
[data-superficie="cliente"] .linea>li::before{content:counter(linea);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--oro-texto);font-size:var(--t-2);font-weight:var(--peso-negrita);
  font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--oro)}
[data-superficie="cliente"] .linea>li.hito::before{background:var(--oro);color:var(--sobre-oro);
  box-shadow:0 0 0 5px var(--ground),0 0 0 6px color-mix(in srgb,var(--oro) 45%,transparent)}
[data-superficie="cliente"] .linea .titulo-paso{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-2);min-height:40px;
  font-size:var(--t-3);font-weight:var(--peso-negrita);line-height:1.3}
[data-superficie="cliente"] .linea .titulo-paso .ico{color:var(--oro-texto)}
[data-superficie="cliente"] .linea p{font-size:var(--t-2);color:var(--muted);margin-top:2px}
/* Formulario: etiqueta siempre visible encima del campo, foco dorado; consentimiento con casilla dorada */
[data-superficie="cliente"] .campo{display:grid;gap:var(--esp-1);margin:0 0 var(--esp-3)}
[data-superficie="cliente"] .campo label{font-size:var(--t-2);font-weight:var(--peso-negrita)}
[data-superficie="cliente"] .campo input{font:400 var(--t-3)/1.3 var(--f-texto);color:var(--ink);background:var(--surface2);width:100%;
  padding:var(--esp-3) var(--esp-3);border-radius:var(--radio-campo);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);box-shadow:inset 0 1px 2px var(--sunk);
  transition:border-color var(--mov-rapido),box-shadow var(--mov-rapido)}
[data-superficie="cliente"] .campo input::placeholder{color:var(--faint)}
[data-superficie="cliente"] .campo input:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 3px var(--accent-soft)}
[data-superficie="cliente"] .consentimiento{display:flex;gap:var(--esp-2);align-items:flex-start;margin:var(--esp-1) 0 var(--esp-4);font-size:var(--t-1);
  color:var(--muted);line-height:1.45}
[data-superficie="cliente"] .consentimiento input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--oro)}
/* Teléfono: prefijo de país y número en un solo campo */
[data-superficie="cliente"] .telefono{display:flex;border-radius:var(--radio-campo);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  background:var(--surface2);box-shadow:inset 0 1px 2px var(--sunk);transition:border-color var(--mov-rapido),box-shadow var(--mov-rapido)}
[data-superficie="cliente"] .telefono:focus-within{border-color:var(--oro);box-shadow:0 0 0 3px var(--accent-soft)}
[data-superficie="cliente"] .telefono select{appearance:none;flex:none;font:500 var(--t-3)/1.3 var(--f-texto);color:var(--ink);cursor:pointer;
  background:var(--sunk);border:0;border-right:1px solid var(--line);border-radius:var(--radio-campo) 0 0 var(--radio-campo);padding:var(--esp-3) var(--esp-6) var(--esp-3) var(--esp-3);
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
[data-superficie="cliente"] .telefono select:focus{outline:none}
[data-superficie="cliente"] .campo .telefono input{border:0;box-shadow:none;border-radius:0 var(--radio-campo) var(--radio-campo) 0;min-width:0}
[data-superficie="cliente"] .campo .telefono input:focus{box-shadow:none}
/* Error de un campo: borde y mensaje debajo, en --error (AA sobre el fondo dorado suave) */
[data-superficie="cliente"] .error{margin:0;font-size:var(--t-1);font-weight:var(--peso-medio);line-height:1.4;color:var(--error)}
[data-superficie="cliente"] .error[hidden]{display:none}
[data-superficie="cliente"] .consentimiento+.error{margin:calc(var(--esp-3) * -1) 0 var(--esp-4) var(--esp-5)}
[data-superficie="cliente"] .campo input[aria-invalid="true"],
[data-superficie="cliente"] .telefono:has(input[aria-invalid="true"]){border-color:var(--error);box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 12%,transparent)}
/* Formulario enviado: el formulario deja paso a un estado de éxito con su icono */
[data-superficie="cliente"] .exito{display:grid;justify-items:center;gap:var(--esp-2);padding:var(--esp-4) var(--esp-1);text-align:center}
[data-superficie="cliente"] .exito[hidden]{display:none}
[data-superficie="cliente"] .exito:focus{outline:none}
[data-superficie="cliente"] .exito-ico{display:grid;place-items:center;width:60px;height:60px;margin-bottom:var(--esp-1);border-radius:50%;
  background:var(--oro);color:var(--sobre-oro);box-shadow:0 0 0 8px var(--accent-soft)}
[data-superficie="cliente"] .exito-ico svg{width:28px;height:28px}
[data-superficie="cliente"] .exito-titulo{font-size:var(--t-4);font-weight:var(--peso-negrita);color:var(--ink)}
[data-superficie="cliente"] .exito p:not(.exito-titulo){color:var(--muted);max-width:30ch}
:where(.mov)[data-superficie="cliente"] .exito:not([hidden]) .exito-ico{animation:exito-entra var(--mov-medio) var(--rebote) both}
@keyframes exito-entra{from{transform:scale(.4);opacity:0}}
/* Tarjeta que se eleva al pasar el cursor, con una luz dorada que lo sigue (--mx, --my los pone movimiento.js).
   Solo con ratón. Sin zoom de verdad: el texto no se emborrona */
[data-superficie="cliente"] .eleva{position:relative;
  transition:opacity var(--mov-dur,var(--mov-rapido)) var(--curva) var(--mov-retraso,0ms),
    transform var(--mov-dur,var(--mov-rapido)) var(--curva) var(--mov-retraso,0ms),
    box-shadow var(--mov-rapido) var(--curva),border-color var(--mov-rapido) var(--curva)}
[data-superficie="cliente"] .eleva::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity var(--mov-rapido) var(--curva);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--oro) 16%,transparent),transparent 70%)}
@media (hover:hover){
  [data-superficie="cliente"] .eleva:hover{transform:translateY(-4px) scale(1.01);border-color:color-mix(in srgb,var(--oro) 40%,var(--line));
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--oro) 70%,transparent),var(--sombra-alta)}
  [data-superficie="cliente"] .eleva:hover::after{opacity:1}
}
/* Haz de luz dorada que recorre el borde sin parar (--haz-desfase para escalonar varias) */
@property --haz-angulo{syntax:"<angle>";initial-value:0deg;inherits:false}
[data-superficie="cliente"] .haz{position:relative}
[data-superficie="cliente"] .haz::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--haz-angulo),transparent 0deg,transparent 250deg,color-mix(in srgb,var(--oro) 50%,transparent) 310deg,var(--oro) 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:haz 8s linear infinite;animation-delay:var(--haz-desfase,0s)}
@keyframes haz{to{--haz-angulo:360deg}}
@media (prefers-reduced-motion:reduce){[data-superficie="cliente"] .haz::before{display:none}}

/* ---------- capa «cliente»: movimiento ----------
   Estados de diseno/movimiento.js. Solo existen con html.mov (script activo y sin movimiento reducido):
   sin script, todo se ve quieto. :where() deja la especificidad a cero para no pisar las piezas. */
:where(.mov) :is([data-mov],[data-mov-cascada]>*){--mov-dur:var(--mov-medio);
  --mov-retraso:calc(var(--retraso,0ms) + var(--i,0) * var(--paso,80ms));
  transition:opacity var(--mov-dur) var(--curva) var(--mov-retraso),transform var(--mov-dur) var(--curva) var(--mov-retraso)}
:where(.mov) [data-mov-cascada]:not(.dentro)>*{opacity:0;transform:translateY(16px)}
:where(.mov) [data-mov="aparece"]:not(.dentro){opacity:0;transform:translateY(16px)}
:where(.mov) [data-mov="desliza-izq"]:not(.dentro){opacity:0;transform:translateX(-24px)}
:where(.mov) [data-mov="desliza-der"]:not(.dentro){opacity:0;transform:translateX(24px)}
:where(.mov) [data-mov="crece"]:not(.dentro){opacity:0;transform:scale(.92)}
/* en pantallas estrechas, lo lateral entra desde abajo: nada se sale por los lados */
@media (max-width:760px){:where(.mov) :is([data-mov="desliza-izq"],[data-mov="desliza-der"]):not(.dentro){transform:translateY(16px)}}
/* terminada la entrada, el cursor responde al momento */
:where(.mov) :is([data-mov].hecho,[data-mov-cascada].hecho>*){--mov-dur:var(--mov-rapido);--mov-retraso:0ms}
/* el filete del destacado se dibuja de arriba abajo */
[data-superficie="cliente"] .destacado::before{transform-origin:top;transition:transform var(--mov-lento) var(--curva) .15s}
:where(.mov) .destacado[data-mov]:not(.dentro)::before{transform:scaleY(0)}