/* ==========================================================================
   Red Sigma IA — hoja de la landing page comercial.

   Deliberadamente INDEPENDIENTE de la hoja de la aplicacion
   (web/assets/css/app.css). Esa hoja lleva un
   reset global, selectores de elemento sin clase que atrapan cualquier input o
   enlace nuevo, un [hidden] con !important y un .shell que se pisa a si mismo
   dentro de .con-lateral. Reutilizarla aqui obligaba a pelear con todo eso en
   cada componente. Lo que si se hereda es la identidad: hexagono Sigma, Space
   Grotesk en titulares, el eyebrow con su rayita y el semaforo de severidad.

   Direccion de color: misma familia que la app, con el vino desaturado de
   ~49 % a ~10 % y el acento de s100 % a s69 %. El rojo pasa de ser el lienzo
   entero a ocupar el isotipo, el eyebrow, un borde y el boton primario. Los
   contrastes de abajo estan calculados, no estimados.
   ========================================================================== */

:root {
    /* Fondos: misma familia vino, saturacion bajada a ~10 % */
    --ink: #171314;
    --ink-2: #201a1b;
    --surf: #1e1a1b;
    --surf-2: #2b2324;

    /* Texto */
    --bone: #f7e8ea;          /* 15.52:1 sobre --ink */
    --muted: #c0b4b6;         /* 9.17:1 sobre --ink — solido, sin alfa */
    --faint: #8d8183;         /* 4.62:1 sobre --ink */

    /* Acento */
    --accent: #e05561;        /* 4.95:1 sobre --ink */
    --accent-soft: #ef8d96;   /* 7.83:1 sobre --ink */

    /* Severidad: esta si tiene que verse, es informacion */
    --sev-alta: #ff5c6e;
    --sev-media: #f5a623;
    --sev-baja: #4caf7d;

    --rule: rgba(247, 232, 234, 0.12);
    --rule-2: rgba(247, 232, 234, 0.2);

    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    --max: 1200px;
    --gutter: clamp(16px, 4vw, 48px);
    --nav-h: 68px;
    /* El ancho de la columna de navegacion de escritorio. Se declara AQUI y no
       dentro de su media query por dos motivos: el `padding-left` del body la
       lee desde fuera, y la prueba-fusible de variables huerfanas solo reconoce
       las declaraciones que empiezan renglon -una escrita en la misma linea que
       `:root {` existe para el navegador y no para ella, que es la peor
       combinacion posible-. */
    --nav-w: 232px;

    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 36px;
    --s5: 56px;
    --s6: 88px;

    --r-s: 12px;
    --r-m: 16px;
    --r-l: 20px;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* El encabezado es fijo: sin esto, un ancla deja el titulo debajo de la barra. */
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ================== EL FONDO, EN DOS CAPAS: COLOR Y MOVIMIENTO ============

   Tinte de ambiente muy bajo. En la app esta capa va a .18 y es lo que hace que
   todo el lienzo se lea rojo; aqui se queda en .05 y sin el naranja de abajo.
   Esta capa NO se mueve: es la que sostiene el color del sitio. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 82% -6%, rgba(224, 85, 97, 0.05), transparent 70%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
}

/* La capa que SI se mueve. Añadida el 05/10/2026: el fondo era un gradiente
   quieto y la pagina se leia plana.

   SE ANIMAN `transform` Y `opacity`, Y NADA MAS. Las dos las resuelve la GPU
   sobre una capa ya compuesta, sin recalcular la posicion de un solo caracter.
   Animar el `background-position` de un gradiente -que es como se hace esto por
   defecto- obliga a repintar la pantalla entera en cada cuadro, y eso se nota
   justo en el portatil de quien esta leyendo los precios.

   DOS AUREOLAS CON TIEMPOS QUE NO SON MULTIPLOS -37 s y 53 s- y en sentidos
   opuestos. Con tiempos iguales el ojo encuentra el bucle en unos segundos y
   queda peor que estatico; asi el ciclo completo tarda media hora en repetirse.

   `inset` negativo para que al escalar no asome ningun borde. Opacidad maxima
   .07: es ambiente, no decoracion, y el texto va por encima intacto. */
body::after {
    content: "";
    position: fixed;
    inset: -30%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle 38vw at 22% 28%, rgba(224, 85, 97, 0.07), transparent 62%),
        radial-gradient(circle 30vw at 78% 72%, rgba(255, 126, 141, 0.05), transparent 60%);
    animation: deriva-fondo 37s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes deriva-fondo {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* La segunda aureola cuelga del <html> para no inventar un div vacio en las
   ocho paginas solo para pintar. */
html::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle 34vw at 65% 18%, rgba(224, 85, 97, 0.055), transparent 58%);
    animation: deriva-lenta 53s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes deriva-lenta {
    from { transform: translate3d(5%, 2%, 0) scale(1.06); opacity: .7; }
    to   { transform: translate3d(-4%, -4%, 0) scale(1); opacity: 1; }
}

/* QUIEN PIDIO QUE NADA SE MUEVA, NO VE MOVERSE NADA. No es accesibilidad de
   catalogo: el movimiento continuo de fondo dispara mareo y migrana, y esta
   pagina esta hecha para leerse entera. Se quedan las dos capas con su color,
   quietas, asi que no se pierde profundidad. */
@media (prefers-reduced-motion: reduce) {
    body::after, html::before { animation: none; }
}

img, svg { max-width: 100%; display: block; }
/* Red de seguridad: un <svg> al que nadie da tamano cae a 300x150, el valor por
   omision del formato, y revienta la maquetacion. Ya ocurrio tres veces aqui.
   OJO con la forma de escribirlo: `svg:not([width])` NO vale, porque :not()
   suma la especificidad de su argumento y un selector de atributo cuenta como
   una clase. Eso daba (0,1,1) y le ganaba a `.ciclo` (0,1,0), que dejo el
   diagrama del hero reducido a 21 px. `:where()` aporta CERO especificidad, asi
   que esto es (0,0,1) y cualquier regla de clase lo pisa, que es lo que se
   queria. */
svg:where(:not([width])) { width: 1.25em; height: 1.25em; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Los enlaces de prosa SI se ven como enlaces. */
a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--bone); }

:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--accent); color: var(--ink); }

/* Visible solo para el lector de pantalla. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------- Salto al contenido --- */
.saltar {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -140%);
    z-index: 300;
    padding: 12px 20px;
    background: var(--bone);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--r-s) var(--r-s);
    transition: transform .18s var(--ease);
}
.saltar:focus { transform: translate(-50%, 0); color: var(--ink); }

/* ------------------------------------------------------------- Envoltura --- */
.shell {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.seccion { padding-block: clamp(48px, 8vw, var(--s6)); }
.seccion + .seccion { border-top: 1px solid var(--rule); }

/* ----------------------------------------------------------- Tipografia --- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent-soft);
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--accent);
    flex-shrink: 0;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(32px, 5.4vw, 60px); }
h1 em { font-style: normal; color: var(--accent-soft); display: block; }

h2 { font-size: clamp(26px, 3.6vw, 42px); }
h2 em { font-style: normal; color: var(--accent-soft); }

h3 { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; }

.lede {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--muted);
    max-width: 62ch;
}

.cab { margin-bottom: var(--s4); max-width: 74ch; }
.cab .eyebrow { margin-bottom: var(--s2); }
.cab p { margin-top: var(--s2); color: var(--muted); max-width: 66ch; }

.dato { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Botones --- */
/* Inter, no mono: el boton en versalitas monoespaciadas es parte de lo que hace
   que la app se lea como terminal. Objetivo tactil de 44 px de alto. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), transform .18s var(--ease),
                box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Texto oscuro sobre relleno claro: bone sobre --accent da 3.13:1 y no pasa AA
   en texto normal; --ink sobre --accent da 4.95:1 y si pasa. */
.btn--p { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--p:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }

.btn--s { background: transparent; border-color: var(--rule-2); color: var(--bone); }
.btn--s:hover { border-color: var(--bone); background: rgba(247, 232, 234, 0.06); color: var(--bone); }

.btn--claro { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--claro:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* -------------------------------------------------------------- Encabezado -- */
.nav {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgba(23, 19, 20, 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
}
.nav__in {
    max-width: var(--max);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--bone);
    flex-shrink: 0;
}
.marca:hover { color: var(--bone); }
.marca__hex { width: 30px; height: 30px; flex-shrink: 0; }
.marca__t {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.marca__t span { color: var(--accent-soft); }

.nav__enlaces {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav__enlaces a {
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__enlaces a:hover { color: var(--bone); background: rgba(247, 232, 234, 0.06); }

.nav__cta { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.nav__cta .btn { min-height: 42px; padding: 10px 18px; font-size: 14px; }

/* ------------------------------------------------------------------ Hero --- */
.hero { padding-block: clamp(40px, 7vw, 76px) clamp(40px, 6vw, 68px); }
.hero__rejilla {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: start;
}
@media (min-width: 1000px) {
    .hero__rejilla { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; }
}

.hero .eyebrow { margin-bottom: var(--s3); }
.hero h1 { margin-bottom: var(--s3); }
.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s4);
}
.hero__nota {
    margin-top: var(--s3);
    font-size: 14px;
    color: var(--faint);
}

/* Pastillas: se hereda el radio 999 de .lede-burbujas de la app */
.pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--s3);
}
.pastillas li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(247, 232, 234, 0.04);
    font-size: 13.5px;
    color: var(--muted);
}
.pastillas li svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent-soft); }

/* Diagrama del hero: Evaluar -> Priorizar -> Remediar -> Validar */
/* El estado por omision es la linea COMPLETA. El recorte con dasharray solo
   existe mientras corre la animacion, asi que sin JS, sin IntersectionObserver
   o con movimiento reducido el diagrama se ve entero en lugar de quedarse en
   una linea punteada. El path lleva pathLength="1" como ATRIBUTO en el HTML:
   pathLength no es una propiedad CSS y declararla aqui no hace nada. */
.ciclo.anima .ciclo__linea {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: trazo 2.6s var(--ease) forwards;
}
@keyframes trazo { to { stroke-dashoffset: 0; } }

/* ======================================================================
   Componentes visuales de la landing.
   La pagina se apoya en tarjetas, pastillas, cifras y una banda de marca
   para decir con forma lo que antes decia con parrafos.
   ====================================================================== */

/* ------------------------------------------------- Boton Login del menu ---
   Relleno claro: es el elemento mas brillante de la barra, asi que destaca
   sobre los enlaces de texto Y sobre el boton de acento, sin pelearse con el
   por el mismo color. Contraste --ink sobre --bone = 15.52:1. */
.btn--login {
    background: var(--bone);
    border-color: var(--bone);
    color: var(--ink);
    font-weight: 600;
}
.btn--login:hover { background: #fff; border-color: #fff; color: var(--ink); }
/* Sin esto el <svg> cae a su tamano por omision, 300x150, y el boton se come
   medio encabezado: paso de verdad y arrastro scroll horizontal a la pagina. */
.btn--login svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ------------------------------------------------------------- Cabeceras ---
   Variante en fila: el titulo a la izquierda y la etiqueta de honestidad a la
   derecha, para que la advertencia no gaste una linea entera de la pagina. */
.cab--fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s2);
    max-width: none;
}

/* ------------------------------------------------------------- Cifras ------ */
.cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--rule);
    overflow: hidden;
}
@media (min-width: 620px) { .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cifras { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cifras li { display: grid; gap: 4px; padding: 20px 18px; background: var(--surf); }
.cifras__n {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 500;
    line-height: 1;
    color: var(--accent-soft);
    font-variant-numeric: tabular-nums;
}
.cifras__d { font-size: 13.5px; color: var(--muted); }

/* ------------------------------------------------------------- Pastillas --- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s2); }
/* `nowrap` mantiene juntas las de dos palabras, que es para lo que esta; el
   `max-width` le da salida a la larga en lugar de dejarla empujar la columna.
   Sin la segunda linea, una sola pastilla ancha saca la pagina de la pantalla. */
.chips li {
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 5px 11px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(247, 232, 234, 0.045);
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}
.chips--pie { margin-top: var(--s3); }
/* Estado por color Y por simbolo: el color solo no comunica. */
.chips--si li { border-color: rgba(76, 175, 125, 0.4); }
.chips--si li::before { content: "\2713\00a0"; color: var(--sev-baja); }
.chips--no li { border-color: rgba(247, 232, 234, 0.14); color: var(--faint); }
.chips--no li::before { content: "\00d7\00a0"; color: var(--sev-alta); }

/* --------------------------------------------------------- Estado / badge -- */
.estado {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.estado--si { background: rgba(76, 175, 125, 0.14); color: var(--sev-baja); }
.estado--no { background: rgba(247, 232, 234, 0.08); color: var(--faint); }
.estado--serv { background: rgba(245, 166, 35, 0.14); color: var(--sev-media); }

.estado-lista { display: grid; gap: 10px; }
.estado-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: var(--surf);
    font-size: 14.5px;
    color: var(--muted);
}

/* ------------------------------------------------------- Titulo pequeno ---- */
.mini-t {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--bone);
    margin-bottom: 4px;
}
.mini-t__i { width: 16px; height: 16px; flex-shrink: 0; }
.mini-t__i--si { color: var(--sev-baja); }
.mini-t__i--no { color: var(--sev-alta); }

/* ------------------------------------------------- Cabecera de tarjeta ----- */
.tarjeta__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.tarjeta__cab .tarjeta__ico { margin-bottom: var(--s2); }
.tarjeta--mini { padding: 20px 18px; }
.tarjeta--mini h3 { font-size: 16.5px; }
.tarjeta--mini p { font-size: 14.5px; }

.nohace {
    margin-top: var(--s3);
    padding: 20px 22px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-s);
    background: var(--surf);
}

/* ------------------------------------------------- Cifra grande de la demo - */
.viz { display: grid; gap: var(--s3); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 620px) { .viz { grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); } }
.viz__hero { display: flex; align-items: baseline; gap: 12px; padding-right: var(--s3); }
@media (min-width: 620px) { .viz__hero { border-right: 1px solid var(--rule); } }
.viz__n {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 68px);
    font-weight: 500;
    line-height: .9;
    color: var(--bone);
    font-variant-numeric: tabular-nums;
}
.viz__d { font-size: 13.5px; color: var(--muted); line-height: 1.3; }

/* ====================================================================
   El ciclo del agente: siete fases y el entregable.
   ==================================================================== */

.ciclo-caja { position: relative; }
.ciclo { width: 100%; height: auto; overflow: visible; }

/* Entran en orden, uno cada 0.30 s. El ultimo aparece a los 2.4 s, asi que la
   secuencia entera cabe por debajo de los 4 s. El estado por omision es
   VISIBLE: sin animacion se ven los ocho de golpe. */
.ciclo__nodo { opacity: 1; color: var(--bone); }

/* ---------------------------------------------- Los puntos sensibles ------ */
/* Botones HTML transparentes encima del dibujo. El SVG es la ilustracion; el
   teclado y el raton hablan con estos. */
.ciclo-hits { position: absolute; inset: 0; }
.ciclo__hit {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    /* Objetivo tactil comodo: a 519 px de ancho son ~102x98 px reales. */
}
.ciclo__hit:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.ciclo.anima .ciclo__nodo { animation: nodoIn .4s var(--ease) backwards; }
.ciclo.anima .ciclo__nodo:nth-of-type(1) { animation-delay: .18s; }
.ciclo.anima .ciclo__nodo:nth-of-type(2) { animation-delay: .48s; }
.ciclo.anima .ciclo__nodo:nth-of-type(3) { animation-delay: .78s; }
.ciclo.anima .ciclo__nodo:nth-of-type(4) { animation-delay: 1.08s; }
.ciclo.anima .ciclo__nodo:nth-of-type(5) { animation-delay: 1.38s; }
.ciclo.anima .ciclo__nodo:nth-of-type(6) { animation-delay: 1.68s; }
.ciclo.anima .ciclo__nodo:nth-of-type(7) { animation-delay: 1.98s; }
.ciclo.anima .ciclo__nodo:nth-of-type(8) { animation-delay: 2.28s; }
@keyframes nodoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ciclo__halo {
    fill: var(--surf);
    stroke: rgba(247, 232, 234, .16);
    stroke-width: 1;
    transition: stroke .18s var(--ease), fill .18s var(--ease);
}
.ciclo__nodo.activo .ciclo__halo { stroke: var(--accent); fill: #241e1f; }
.ciclo__nodo.activo .ciclo__t { fill: var(--bone); }

/* El cuarto es Explotacion: el unico en acento, para que la fila no sean ocho
   iconos iguales y se lea cual es el nucleo del trabajo. */
.ciclo__nodo:nth-of-type(4) { color: var(--accent-soft); }
.ciclo__nodo:nth-of-type(4) .ciclo__halo { stroke: rgba(224, 85, 97, .5); }
/* El ultimo no es un agente sino lo que sale del proceso: va en claro. */
.ciclo__nodo--final { color: var(--bone); }
.ciclo__nodo--final .ciclo__halo { fill: var(--ink-2); stroke: rgba(247, 232, 234, .28); }

/* Etiqueta de fase, encima de cada agente. */
.ciclo__fase rect {
    fill: rgba(224, 85, 97, .16);
    stroke: rgba(224, 85, 97, .4);
    stroke-width: 1;
}
.ciclo__fase text {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    fill: var(--accent-soft);
}
.ciclo__nodo--final .ciclo__fase rect {
    fill: rgba(247, 232, 234, .08);
    stroke: rgba(247, 232, 234, .22);
}
.ciclo__nodo--final .ciclo__fase text { fill: var(--muted); }

.ciclo__t {
    font-family: var(--font-sans);
    /* 13.5 en unidades del viewBox; con el SVG a ~0.9x son algo mas de 12 px en
       pantalla. Por debajo de 12 el rotulo deja de cumplir su funcion. */
    font-size: 13.5px;
    fill: var(--muted);
    transition: fill .18s var(--ease);
}


/* ----------------------------------------------------- La ventanita ------- */
.ciclo-tip {
    position: absolute;
    z-index: 20;
    width: max-content;
    max-width: 230px;
    padding: 10px 13px;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-s);
    background: var(--ink-2);
    box-shadow: var(--shadow);
    pointer-events: none;
    display: grid;
    gap: 3px;
}
.ciclo-tip[hidden] { display: none; }
.ciclo-tip__f {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-soft);
}
.ciclo-tip__t { font-size: 14.5px; font-weight: 600; color: var(--bone); }
.ciclo-tip__d { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ------------------------------------------- El ciclo, version telefono --- */
.ciclo-lista { display: none; }

@media (max-width: 760px) {
    .ciclo-caja { display: none; }
    .ciclo-lista { display: grid; gap: 8px; }
    .ciclo-lista li {
        display: grid;
        grid-template-columns: 34px 1fr;
        align-items: start;
        gap: 12px;
        padding: 11px 13px;
        border: 1px solid var(--rule);
        border-radius: var(--r-s);
        background: var(--surf);
    }
    .ciclo-lista li svg { width: 32px; height: 31px; color: var(--bone); margin-top: 2px; }
    .ciclo-lista b { display: block; font-size: 13.5px; font-weight: 600; color: var(--bone); }
    .ciclo-lista em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--muted); }
    .ciclo-lista li:nth-child(4) { border-color: rgba(224, 85, 97, .45); }
    .ciclo-lista li:nth-child(4) svg { color: var(--accent-soft); }
    .ciclo-lista__final { border-style: dashed !important; }
}

/* ---------------------------------------------------------- Banda de marca - */
.banda {
    margin-block: clamp(24px, 4vw, 40px);
    padding-inline: var(--gutter);
}
.banda picture, .banda img {
    display: block;
    max-width: var(--max);
    margin-inline: auto;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
}

/* --------------------------------------------------------------- Pago ------ */
.pago__caja {
    padding: clamp(20px, 2.6vw, 28px);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
}

.canal { margin-top: var(--s3); font-size: 15px; color: var(--muted); }


/* ======================================================================
   Navegacion entre sub-paginas.
   La portada dejo de cargar con el sitio entero encima: ahora ofrece los
   destinos y cada seccion vive en su propia URL.
   ====================================================================== */

/* En una sub-pagina el titulo de la seccion ES el h1 de la pagina. El `em` de
   la segunda linea tiene que seguir en la misma linea, no partir en bloque
   como en el titular del hero. */
.cab h1 { font-size: clamp(28px, 4vw, 46px); }
.cab h1 em { display: inline; font-style: normal; color: var(--accent-soft); }

.nav__enlaces a { padding: 9px 11px; font-size: 14.5px; }

/* Marca de pagina actual en el menu: subrayado de acento, no solo color. */
.nav__enlaces a[aria-current="page"] {
    color: var(--bone);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ----------------------------------------------------- Rejilla de destinos - */
.destinos {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 560px) { .destinos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .destinos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.destino {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 6px;
    height: 100%;
    padding: 20px 18px;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
    color: var(--bone);
    text-decoration: none;
    transition: border-color .18s var(--ease), transform .18s var(--ease),
                background .18s var(--ease);
}
.destino:hover, .destino:focus-visible {
    border-color: var(--rule-2);
    background: #241e1f;
    transform: translateY(-2px);
    color: var(--bone);
}
.destino__i { width: 22px; height: 22px; color: var(--accent-soft); margin-bottom: 4px; }
.destino__t { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.destino__d { font-size: 13.5px; color: var(--muted); }
/* El destino de Login se distingue por borde de acento, igual que su boton. */
.destino--login { border-color: rgba(224, 85, 97, 0.45); }
.destino--login .destino__i { color: var(--accent); }

/* ------------------------------------------------- Cierre de sub-pagina ---- */
.cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-m);
    background: var(--surf);
}
.cierre h2 { font-size: clamp(20px, 2.4vw, 28px); }
.cierre p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* El pie usa h2 para no romper la jerarquia de titulos de la pagina, pero se
   ve como la etiqueta pequena que era. */
.pie__t {
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
}


/* ---------------------------------------------------- Fichas de producto --- */
.fichas { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 860px) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ficha { margin: 0; }
.ficha picture, .ficha img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
}
.ficha figcaption {
    display: grid;
    gap: 3px;
    margin-top: 12px;
    padding-left: 2px;
}
.ficha figcaption b { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.ficha figcaption span { font-size: 14px; color: var(--muted); }

/* Banda mas compacta cuando encabeza una sub-pagina en lugar de partir la
   portada en dos. */
.banda--ajustada { margin-block: 0 var(--s4); padding-inline: 0; }

/* La banda cuando encabeza la portada: pegada al encabezado, sin el margen
   superior que tenia cuando partia la pagina por la mitad. */
.banda--portada { margin-block: 0 clamp(24px, 4vw, 44px); padding-top: clamp(16px, 2.4vw, 28px); }



/* ==========================================================================
   BLOQUES RESTAURADOS.
   Se perdieron al reescribir el bloque del ciclo con una expresion regular
   demasiado amplia. Son los mismos de la version original.
   ========================================================================== */

/* ------------------------------------------------- Vista de la plataforma -- */
.marco {
    border: 1px solid var(--rule-2);
    border-radius: var(--r-l);
    background: var(--surf);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.marco__barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    background: rgba(247, 232, 234, 0.03);
}
.marco__puntos { display: flex; gap: 6px; }
.marco__puntos i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
.marco__t {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--faint);
    text-transform: uppercase;
}
.marco__cuerpo { padding: clamp(16px, 2.4vw, 24px); }

/* Etiqueta de honestidad. Obligatoria junto a cualquier dato de muestra. */
.ficticio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px dashed var(--rule-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(247, 232, 234, 0.03);
}
/* Sin tamano explicito el <svg> cae a 300x150, que es el valor por omision del
   formato, y revienta la fila entera. Paso de verdad. */
.ficticio svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--sev-media); }
.ficticio--bloque { margin-bottom: var(--s2); }

.marcos { display: grid; gap: var(--s3); }

/* Barra de titulo del marco: el nombre a la izquierda y, cuando toca, la
   etiqueta de honestidad a la derecha. */
.marco__barra { justify-content: flex-start; }
.marco__etiqueta {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px dashed var(--rule-2);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sev-media);
    white-space: nowrap;
}
/* El marco de una funcion que todavia no existe va con el borde discontinuo:
   se distingue de los otros tres sin tener que leer la etiqueta. */
.marco--propuesta { border-style: dashed; }
.marco__nota {
    margin-bottom: var(--s2);
    font-size: 14.5px;
    color: var(--muted);
}

.sevlista { display: grid; gap: 12px; }
.sevfila { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; }
.sevfila__n { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.sevfila__n svg { width: 13px; height: 13px; flex-shrink: 0; }
.sevfila__pista { height: 10px; border-radius: 999px; background: rgba(247, 232, 234, 0.08); overflow: hidden; }
.sevfila__barra {
    /* display:block es obligatorio, no cosmetico: .sevfila__pista es un item de
       grid y se blockifica sola, pero este <span> de dentro sigue siendo inline
       y un inline IGNORA width y height. Sin esto la barra mide 0x0 y la
       grafica se publica vacia con los numeros al lado. */
    display: block;
    height: 100%;
    border-radius: 999px;
    width: 0;
    transition: width .6s var(--ease);
}
.sevfila__v { font-family: var(--font-mono); font-size: 14px; color: var(--muted); min-width: 2ch; text-align: right; }
.sev-alta .sevfila__barra { background: var(--sev-alta); }
.sev-media .sevfila__barra { background: var(--sev-media); }
.sev-baja .sevfila__barra { background: var(--sev-baja); }
.sev-alta .sevfila__n { color: var(--sev-alta); }
.sev-media .sevfila__n { color: var(--sev-media); }
.sev-baja .sevfila__n { color: var(--sev-baja); }

/* El scroll se limita al componente y se avisa en el caption. */
.tabla-env { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-env table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tabla-env caption {
    caption-side: bottom;
    padding-top: 10px;
    font-size: 13px;
    color: var(--faint);
    text-align: left;
}
.tabla-env th, .tabla-env td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    font-size: 14.5px;
}
.tabla-env th {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 500;
}
.tabla-env tr:last-child td { border-bottom: 0; }
.tabla-env td.dato { font-family: var(--font-mono); font-size: 13.5px; }

/* Color + TEXTO, nunca solo color. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--alta { color: var(--sev-alta); background: rgba(255, 92, 110, 0.14); }
.badge--media { color: var(--sev-media); background: rgba(245, 166, 35, 0.14); }
.badge--baja { color: var(--sev-baja); background: rgba(76, 175, 125, 0.14); }
.badge--neutro { color: var(--muted); background: rgba(247, 232, 234, 0.08); }

/* --------------------------------------------------------------- Rejillas --- */
.rejilla { display: grid; gap: var(--s3); }
/* `minmax(0, 1fr)` Y NO `1fr`, tambien en una sola columna. Un `1fr` pelado
   tiene `min-width: auto`, asi que el minimo de CONTENIDO manda: basta una
   pastilla con `white-space: nowrap` mas ancha que la pantalla -como "Impacto
   real, se requieren ambientes controlados", que entro el 05/10/2026- para que
   la columna crezca por encima del ancho disponible y arrastre scroll
   horizontal a TODA la pagina. Medido por debajo de 382 px. */
.rejilla--2 { grid-template-columns: minmax(0, 1fr); }
.rejilla--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
    .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
    .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tarjeta__alcance {
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--rule);
    font-size: 13.5px;
    color: var(--faint);
}
.tarjeta__alcance b { color: var(--muted); font-weight: 600; }

.lista-check { display: grid; gap: 10px; margin-top: var(--s2); }
.lista-check li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--muted); }
.lista-check svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent-soft); flex-shrink: 0; }
.lista-check b { color: var(--bone); font-weight: 600; }

.destacado {
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-s);
    background: var(--surf);
}


/* --------------------------------------------------------------- Tarjetas --- */
/* Columna flexible para que el pie de alcance de todas las tarjetas de una
   misma fila quede A LA MISMA ALTURA, aunque el texto de arriba ocupe dos
   lineas en una y cuatro en otra. Sin esto cada tarjeta termina donde le toca
   y la fila se ve desalineada. */
.tarjeta {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tarjeta:hover, .tarjeta:focus-within {
    border-color: var(--rule-2);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta p { color: var(--muted); font-size: 15.5px; }
/* El pie se va abajo del todo: es lo que alinea las filas. */
.tarjeta__alcance { margin-top: auto; }
.tarjeta .chips { margin-bottom: var(--s2); }

.tarjeta__ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    margin-bottom: var(--s2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: rgba(224, 85, 97, 0.08);
    color: var(--accent-soft);
}
/* ESTA es la linea que faltaba y la que rompio la seccion de capacidades: sin
   tamano el <svg> cae a 300x150, el valor por omision del formato, y se come
   la tarjeta entera. */
.tarjeta__ico svg { width: 19px; height: 19px; }

/* ------------------------------------------------------- Diagrama de flujo -- */
.flujo { display: grid; gap: var(--s2); grid-template-columns: 1fr; counter-reset: paso; }
@media (min-width: 680px) { .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flujo { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.flujo li {
    position: relative;
    padding: 18px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: var(--surf);
}
.flujo li::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--accent);
}
.flujo__t { font-weight: 600; font-size: 15.5px; margin-bottom: 6px; display: block; }
.flujo__d { font-size: 14px; color: var(--muted); display: block; }

/* ------------------------------------------------------------------ Pasos --- */
.pasos { display: grid; gap: var(--s2); }
@media (min-width: 700px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos li {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: var(--surf);
}
.pasos__n {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--rule-2);
    border-radius: 9px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent-soft);
}
.pasos__t { font-weight: 600; margin-bottom: 4px; display: block; }
.pasos__d { font-size: 14.5px; color: var(--muted); display: block; }

/* ----------------------------------------------------------------- Planes --- */
.planes { display: grid; gap: var(--s3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 22px;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.plan:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.plan--destacado { border-color: rgba(224, 85, 97, 0.5); }
.plan__cinta {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(224, 85, 97, 0.16);
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.plan__bot { width: 44px; height: 44px; margin-bottom: 12px; color: var(--bone); }
.plan__n {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-soft);
}
.plan__p {
    margin: 8px 0 2px;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
}
.plan__p small {
    display: block;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--faint);
    letter-spacing: 0;
    line-height: 1.4;
}
.plan__d { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); }
.plan .btn { margin-top: auto; width: 100%; }

.aviso-precios {
    margin-top: var(--s3);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-s);
    font-size: 14.5px;
    color: var(--muted);
}
.aviso-precios svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--sev-media); }


/* Puntos del plan en burbujas, igual que en la aplicacion: en corrido las once
   lineas del plan Ofensivo se leian como un parrafo y habia que separarlas con
   la vista. El icono va en su propia columna de ancho fijo para que todos los
   textos arranquen alineados, ocupen una linea o tres. */
.plan__l { display: grid; gap: 7px; margin: var(--s2) 0; }
.plan__l li {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid rgba(76, 175, 125, .24);
    border-radius: 11px;
    background: rgba(76, 175, 125, .06);
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}
.plan__l svg { width: 15px; height: 15px; margin-top: 2px; justify-self: center; color: var(--accent-soft); }
.plan__l b { color: var(--bone); font-weight: 600; }
/* Lo que el plan NO incluye: sin el verde y en gris, para que se distinga de
   un vistazo sin tener que leerlo. */
.plan__l li.no {
    border-color: var(--rule);
    background: rgba(247, 232, 234, .035);
    color: var(--faint);
}
.plan__l li.no svg { color: var(--faint); }

.plan__extra {
    margin: var(--s2) 0;
    padding: 12px 14px;
    border: 1px dashed rgba(224, 85, 97, .4);
    border-radius: var(--r-s);
    background: rgba(224, 85, 97, .06);
}
.plan__extra__t {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--accent-soft);
    margin-bottom: 5px;
}
.plan__extra__t svg { width: 14px; height: 14px; flex-shrink: 0; }
.plan__extra p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.plan__cuota {
    display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
    margin-bottom: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--rule);
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.plan__cuota svg { width: 15px; height: 15px; margin-top: 2px; color: var(--accent-soft); }
.plan__cuota b { color: var(--bone); font-weight: 600; }

/* ------------------------------------------------------------------ Pago --- */
.marcas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.marcas li {
    padding: 8px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 8px;
    background: rgba(247, 232, 234, 0.04);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.pago__flujo { display: grid; gap: 12px; margin-top: var(--s2); }
.pago__flujo li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 14.5px; color: var(--muted); }
.pago__flujo i {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 1px solid var(--rule);
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-style: normal;
    color: var(--accent-soft);
}

/* ------------------------------------------------------------------- FAQ --- */
.faq { display: grid; gap: 10px; max-width: 900px; }
.faq details {
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: var(--surf);
    overflow: hidden;
}
.faq details[open] { border-color: var(--rule-2); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 16px 20px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.4vw, 18px);
    font-weight: 500;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    width: 10px; height: 10px;
    flex-shrink: 0;
    border-right: 1.6px solid var(--accent-soft);
    border-bottom: 1.6px solid var(--accent-soft);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { background: rgba(247, 232, 234, 0.04); }
.faq__r { padding: 0 20px 18px; color: var(--muted); font-size: 15.5px; }
.faq__r p + p { margin-top: 10px; }

/* ------------------------------------------------------------- Formulario --- */
.demo { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .demo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); } }

.form {
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-m);
    background: var(--surf);
}
.campo { margin-bottom: var(--s2); }
/* Etiqueta persistente, nunca el placeholder como etiqueta. */
.campo label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--bone); }
.opt { font-weight: 400; color: var(--faint); }
.campo input, .campo select, .campo textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 10px;
    background: var(--ink-2);
    color: var(--bone);
    font-family: var(--font-sans);
    font-size: 16px;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--faint); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(224, 85, 97, 0.18);
    outline: none;
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--sev-alta); }
.campo__err { display: block; margin-top: 6px; font-size: 13.5px; color: var(--sev-alta); }
.campo__err:empty { display: none; }

.check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    margin-bottom: var(--s2);
    font-size: 14px;
    color: var(--muted);
}
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }

.form__nota {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: var(--s2);
    padding: 13px 15px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: rgba(245, 166, 35, 0.07);
    font-size: 14px;
    color: var(--muted);
}
.form__nota svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--sev-media); }

.form__estado {
    margin-top: var(--s2);
    padding: 13px 15px;
    border: 1px solid var(--rule-2);
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--muted);
}
.form__estado[hidden] { display: none; }

/* --------------------------------------------------------------------- Pie -- */
.pie {
    border-top: 1px solid var(--rule);
    padding-block: var(--s5) var(--s4);
    background: rgba(0, 0, 0, 0.18);
}
.pie__rejilla { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie ul { display: grid; gap: 9px; }
.pie a { color: var(--muted); font-size: 14.5px; text-decoration: none; }
.pie a:hover { color: var(--bone); text-decoration: underline; }
.pie__d { color: var(--muted); font-size: 14.5px; max-width: 42ch; margin-top: 12px; }
.pie__base {
    margin-top: var(--s4);
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 12px var(--s3);
    justify-content: space-between;
    font-size: 13px;
    color: var(--faint);
}
.pie__pend { width: 100%; margin-top: 10px; font-size: 12.5px; color: var(--faint); }

/* ------------------------------------------------------- Aparicion de bloques */
/* Estado inicial SOLO si el script esta vivo: la clase .js la pone landing.js
   antes de observar. Sin JS, sin IntersectionObserver o con el script caido,
   nada lleva .rev y todo el contenido se ve. */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.visible {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}


/* ======================================================================
   Barra inferior de movil.
   Sustituye al menu de hamburguesa: un panel desplegable esconde la
   navegacion detras de un gesto, mientras que una barra fija la deja a la
   vista y al alcance del pulgar, que es como se navega una aplicacion en
   telefono. Cinco destinos, que es lo que cabe sin que los objetivos
   tactiles se peleen; el resto del sitio se alcanza desde la rejilla de
   destinos de la portada y desde el pie.
   ====================================================================== */
.barra { display: none; }

@media (max-width: 1100px) {
    .barra {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 200;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: rgba(23, 19, 20, .96);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--rule-2);
        /* Respeta la franja del indicador de inicio en los telefonos que la
           tienen; sin esto el ultimo boton queda debajo de ella. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .barra a {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 4px;
        /* 56 px de alto: por encima del objetivo de 44x44. */
        min-height: 56px;
        padding: 8px 4px;
        color: var(--faint);
        text-decoration: none;
        font-size: 10.5px;
        line-height: 1.2;
        text-align: center;
        transition: color .18s var(--ease);
    }
    .barra a svg { width: 21px; height: 21px; }
    .barra a:hover { color: var(--muted); }
    /* La pagina actual se marca con color Y con una barrita arriba: el color
       solo no comunica. */
    .barra a[aria-current="page"] {
        color: var(--accent-soft);
        box-shadow: inset 0 2px 0 var(--accent);
    }
    .barra a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -3px; }

    /* Hueco al final de la pagina para que la barra no tape el pie. */
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- Responsive */
/* El punto de corte es 1100 y no 900 por una razon medida: con los enlaces,
   el boton de demo Y el de Login, la barra necesita ~1140 px. A 1024 se salia
   277 px por la derecha y arrastraba scroll horizontal a toda la pagina. */
@media (max-width: 1100px) {
    /* En movil el menu no vive aqui arriba: lo sustituye la barra inferior, que
       es la parte de la pantalla que el pulgar alcanza sin recolocar la mano.

       EL LOGIN SE QUEDA, y es un cambio del 05/10/2026. Antes se escondia el
       bloque entero y no pasaba nada porque la barra inferior llevaba un destino
       de Login. Al rehacer esa barra -Inicio, Plataforma, Planes, Nosotros y
       FAQs- el Login salio de ahi, y con esta regla tal como estaba la
       herramienta se quedaba SIN NINGUNA puerta de entrada en telefono: ni
       arriba ni abajo. Lo que si se va es el boton de demo, que se pide desde el
       formulario de la portada y desde el cierre de cada pagina. */
    .nav__enlaces { display: none; }
    /* LOS DOS BOTONES SE QUEDAN. El 05/10/2026 el primario paso de "Solicitar
       una demo" a "Registrate", y ese si tiene que verse en telefono: es la
       unica puerta para quien todavia no tiene cuenta, y la barra inferior ya no
       lleva ninguna de las dos. Se aprietan en vez de esconderse. */
    /* `.nav .nav__cta .btn` Y NO `.nav__cta .btn`: mas abajo en la hoja, en el
       bloque del formato de prueba, hay un `.nav__cta .btn--p, .nav__cta
       .btn--login { padding: 11px 20px }` con la MISMA especificidad 0-2-0, y un
       media query no suma ninguna, asi que ganaba el de abajo por orden y este
       no hacia nada. Es el fallo que ya tenia la version anterior de esta regla,
       encontrado dos veces el mismo dia. */
    .nav__cta { gap: 7px; }
    .nav .nav__cta .btn { padding-inline: 13px; font-size: 13.5px; }
}
/* A 400 px el nombre de la marca se recorta antes que desaparecer un boton:
   quien llega en telefono ya sabe en que sitio esta. */
@media (max-width: 400px) {
    .nav__in { gap: 8px; }
    .marca__t { font-size: 0; }
    .marca__t span { font-size: 0; }
    .nav .nav__cta .btn { padding-inline: 11px; font-size: 13px; }
}
@media (max-width: 420px) {
    body { font-size: 16px; }
    .plan, .tarjeta { padding: 18px 16px; }
}

/* -------------------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js .rev { opacity: 1 !important; transform: none !important; }
    .ciclo .ciclo__linea { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    .ciclo .ciclo__nodo { opacity: 1 !important; }
    .btn:hover, .tarjeta:hover, .plan:hover { transform: none; }
}

@media print {
    .nav, .barra, .saltar, .hero__acciones, .form { display: none !important; }
    body { background: #fff; color: #000; }
}

/* La linea de "que es esto" del bloque de las dos herramientas. Va mas apagada
   que el parrafo de encima a proposito: aquel dice como funcionan las dos
   juntas -que es lo que se vino a leer- y este contesta una duda de fondo que
   todavia no se ha formulado. Mismo tamano los dos: no es una nota al pie. */
.herr__que {
    margin-top: 10px;
    color: var(--muted);
    border-left: 2px solid var(--rule-2);
    padding-left: 14px;
}

/* ============ LAS FUNCIONES DEBAJO DE CADA FICHA ========================

   Añadido el 05/10/2026. Antes esto vivia dentro del `alt` de la imagen, o sea
   en el unico sitio donde no lo lee nadie que pueda ver la imagen -y donde si
   aparece, como un parrafo suelto, al copiar la pagina o cuando la imagen no
   carga-. El alt describe LA IMAGEN; lo que hace el producto se escribe.

   El guion largo separa el nombre de la funcion de su explicacion, con el
   nombre en negrita: asi la lista se puede leer entera en vertical -solo las
   negritas- o completa, segun cuanto quiera saber quien pasa. */
.ficha__fn {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    padding-left: 2px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
}
.ficha__fn li { padding-left: 16px; position: relative; }
/* La marca en vez de un bullet: el punto redondo del navegador se come el
   sangrado y desalinea la segunda linea de cada entrada. */
.ficha__fn li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 1px;
    background: var(--accent);
}
.ficha__fn b { color: var(--bone); font-weight: 600; }

/* EL LIMITE DE CADA HERRAMIENTA, en su propio parrafo y no como una entrada mas
   de la lista. No es una funcion: es lo que NO hace, y es justo lo que
   diferencia a las dos. Si va dentro de la lista se lee como una capacidad. */
.ficha__lim {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 2px solid var(--rule-2);
    font-size: 14px;
    line-height: 1.55;
    color: var(--faint, var(--muted));
    background: rgba(0, 0, 0, .14);
    border-radius: 0 var(--r-s) var(--r-s) 0;
}

/* La tarjeta de la correlacion: ocupa el ancho entero debajo de las tres de los
   estilos. Es la conclusion de esa seccion, no una cuarta opcion en la fila, y
   el ancho completo es lo que lo dice sin tener que escribirlo. */
.tarjeta--ancha { margin-top: 18px; }
.tarjeta--ancha p + p { margin-top: 10px; }

/* ============ LAS DOS TARJETAS DE SERVICIO ==============================

   Son tarjetas que terminan en una accion, asi que se estiran a la misma altura
   y el boton se pega abajo: con botones a distinta altura la comparacion entre
   las dos columnas se vuelve un zigzag. */
.svc-k { display: flex; flex-direction: column; }
.svc-k__b { margin-top: auto; align-self: flex-start; }
/* El `margin-top: auto` empuja el boton al fondo, y `align-self` evita que un
   boton de ancho completo parezca una barra de navegacion. */

/* La pregunta que contesta el servicio, antes de la explicacion. Es lo que
   permite elegir entre las dos sin leer los dos parrafos. */
.svc-k__q {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--bone);
    margin-top: 2px;
}

/* La revalidacion, dentro de RTSS. Va destacada porque es lo que mas se
   pregunta despues de un informe -"y cuando lo arregle, quien lo comprueba"- y
   porque hay que dejar claro que no se compra aparte. */
.svc-k__mas {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-s);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
}
.svc-k__mas b { color: var(--bone); }

/* La de pago lleva el filete de acento. Un solo rasgo de diferencia: con fondo
   propio ademas del filete, la gratuita parece deshabilitada. */
.svc-k--p { border-color: rgba(224, 85, 97, 0.34); }

/* El wordmark de cada servicio, encima de su nombre. Alto fijo y ancho
   automatico: los dos archivos no miden lo mismo y sin esto una tarjeta
   arrancaria con el logo al doble que la otra. */
.svc-k__img {
    height: 26px;
    width: auto;
    margin-bottom: 10px;
    opacity: .92;
}

}

/* Las pastillas con cifra. Mismo contenedor que las tres promesas, con el
   numero destacado en vez de icono: son del mismo rango -cosas que se saben de
   un vistazo- y partirlas en dos filas distintas las haria parecer otra cosa. */
.pastillas__n b {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--accent-soft);
    margin-right: 5px;
}

/* LA FOTO DE CADA SERVICIO, arriba de su tarjeta.

   `aspect-ratio` + `object-fit` GARANTIZAN QUE LAS DOS MIDAN LO MISMO pase lo
   que pase con los archivos: hoy una fuente es de 1448 px y la otra de 760, y
   manana puede cambiar cualquiera. Sin esto, dos imagenes de distinta altura
   dejan los textos de las dos tarjetas desalineados, y entonces compararlas de
   un vistazo -que es para lo que estan una al lado de la otra- deja de
   funcionar. */
.svc-k__foto {
    width: 100%;
    aspect-ratio: 1448 / 1086;
    object-fit: cover;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    margin-bottom: 16px;
}

/* ============== LOS ENCABEZADOS DE DENTRO DE UNA SECCION =================

   SE AÑADEN EL 05/10/2026 PORQUE FALTABAN. `.cab--interior` y `.cab__d` se
   estaban usando en el HTML y NO EXISTIAN aqui: el navegador se las traga sin
   avisar, asi que "Los dos servicios" salia como un h3 pelado pegado al bloque
   de arriba, sin aire ni jerarquia. Una clase inventada y no definida no da
   error en ningun sitio; solo se ve.

   QUE RESUELVEN. Una seccion larga tiene dos niveles -lo que la seccion dice y
   los apartados de dentro- y sin una marca visual entre ellos todo pesa igual:
   el lector no sabe si "Los dos servicios" abre un bloque nuevo o es una linea
   mas del anterior. El filete corto y el aire de arriba lo dicen sin texto. */
.cab--interior {
    margin-top: var(--s5, 56px);
    margin-bottom: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
    max-width: 74ch;
}
/* El filete de acento sobre la linea, como marca del apartado. Va en ::before
   para no pedir un elemento mas en cada uso. */
.cab--interior { position: relative; }
.cab--interior::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 46px;
    height: 2px;
    background: var(--accent);
}
.cab--interior h3 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 25px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--bone);
}

/* La entradilla de una cabecera: un parrafo mas claro y mas ancho que el cuerpo
   normal, para que se lea como introduccion y no como primer parrafo del texto.
   Se usa tanto en `.cab` de seccion como en `.cab--interior`. */
.cab__d {
    margin-top: var(--s2);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 66ch;
}
.cab--interior .cab__d { margin-top: 8px; }

/* ===================== FORMATO DE PRUEBA — PAGINA DE PLANES ==============

   Rama `prueba-formato-pricing`, 05/10/2026. Adapta la ESTRUCTURA VISUAL de una
   pagina de precios que Oscar paso como referencia, para ver como luciria.
   SOLO EL ARMAZON: ni un texto, ni un importe, ni una viñeta del contenido
   cambian. Si no convence, se borra este bloque y se vuelve al estilo anterior.

   LOS TRES RASGOS QUE SE TOMAN, y por que cada uno:

   1. EL NUMERO DE AGUA. Da orden de lectura a una fila de tarjetas que hoy se
      leen como cuatro opciones sueltas. En una decision de compra el orden
      importa: dice por donde empezar a comparar.
   2. EL PRECIO COMO ELEMENTO DOMINANTE. Hoy el importe y el nombre del plan
      pesan casi igual; en una pagina de precios lo que se busca es el numero.
   3. LA MARCA DE VERIFICACION en las viñetas. Las nuestras llevan un icono
      distinto por linea -util y mas informativo-, pero al lado del check su
      lectura es mas lenta: aqui se prueba el check uniforme para lo incluido y
      se conserva el aspa para lo que NO entra, que es la distincion que de
      verdad hay que ver de un vistazo. */

.planes .plan { position: relative; overflow: hidden; }

/* 1. El numero, detras del contenido y sin tocar el flujo. */
.planes .plan::before {
    content: attr(data-n);
    position: absolute;
    /* `z-index: 0` y el contenido en 1: sin esto el pseudo es un posicionado y
       pinta DELANTE del texto. Hoy no se nota a opacidad .05, pero es un seguro
       contra el dia que alguien la suba. */
    z-index: 0;
    /* -10px y no -14px: con -14 la tinta del glifo arrancaba 2px fuera de la
       tarjeta y el `overflow: hidden` se los comia, dejando el numero con el
       canto superior plano. Se ve en movil. */
    top: -10px;
    right: 4px;
    font-family: var(--font-display);
    font-size: 92px;
    font-weight: 500;
    line-height: 1;
    color: var(--bone);
    opacity: .05;
    pointer-events: none;
    user-select: none;
}
.planes .plan--destacado::before { color: var(--accent); opacity: .14; }

/* 2. El precio manda: mas grande, en acento, y el nombre del plan encima como
   rotulo pequeno. Es la inversion de la jerarquia que tienen hoy. */
.planes .plan__p {
    font-size: 40px;
    color: var(--accent-soft);
    letter-spacing: -.01em;
}
.planes .plan__p small { color: var(--muted); font-size: 13px; }

/* 3. La marca de verificacion. Se dibuja en CSS para no tocar el HTML ni pedir
   un icono nuevo al sprite: el svg de cada linea se esconde y en su columna va
   el check. El aspa de las lineas `.no` se mantiene en rojo apagado. */
.planes .plan__l li { position: relative; }
.planes .plan__l li > svg { visibility: hidden; }
/* OJO CON LOS NOMBRES DE LAS VARIABLES. Aqui decia `var(--bien)` y `var(--mal)`,
   que existen en `web/assets/css/app.css` -la consola- y NO en este archivo. El
   fallo es silencioso y total: una variable indefinida invalida la declaracion
   ENTERA, asi que `border: solid var(--bien)` dejaba `border-style: none` y
   `border-width: 0`, y como el svg de cada linea esta oculto, las 33 viñetas de
   los cuatro planes se quedaban sin marca ninguna. En la landing son
   `--sev-baja` y `--sev-alta`. */
.planes .plan__l li::before {
    content: "";
    position: absolute;
    /* 18.5px centra la marca en la columna del icono -22px-, que es donde
       estaba el svg al que sustituye. Con 14px casi tocaba el borde interior. */
    left: 18.5px;
    top: 13px;
    width: 5px;
    height: 9px;
    border: solid var(--sev-baja);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}
.planes .plan__l li.no::before {
    width: 9px;
    height: 9px;
    border: 0;
    background:
        linear-gradient(to bottom right, transparent 44%, var(--sev-alta) 44%, var(--sev-alta) 56%, transparent 56%),
        linear-gradient(to bottom left,  transparent 44%, var(--sev-alta) 44%, var(--sev-alta) 56%, transparent 56%);
    transform: none;
    /* Mismo `top` que el check: el aspa es mas alta y con 11px quedaba 1,5px por
       encima, lo justo para que la columna se vea desalineada sin saber por que. */
    top: 13px;
    left: 16.5px;
}

/* El icono de robot de cada plan baja de tamaño: con el numero de agua detras,
   dos elementos graficos grandes en la misma esquina se estorban. */
.planes .plan__bot { width: 34px; height: 34px; }

/* --- FORMATO DE PRUEBA: los dos botones de la cabecera -------------------

   Se toma el patron de la referencia: un par de botones del mismo tamaño y la
   misma forma, uno RELLENO y otro de CONTORNO del mismo color, en versales y
   con el radio marcado. Medido en la referencia: 1px de borde, radio 8px, 14px
   a peso 600, mayusculas.

   LO QUE NO SE COPIA ES EL COLOR. Ellos usan un azul de marca; aqui el acento
   es el rojo de Red Sigma. Copiar el azul seria copiar su identidad, que es
   justo lo que no se pidio.

   POR QUE EL PAR FUNCIONA: dos botones iguales en forma y distintos en peso
   dicen "estas son las dos salidas y una pesa mas", sin que haga falta leerlos.
   Hoy el de Login lleva icono y otra silueta, y a primera vista parece de otra
   familia. */
.nav__cta .btn--p,
.nav__cta .btn--login {
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
}
/* El relleno: la accion principal. */
.nav__cta .btn--p {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}
.nav__cta .btn--p:hover {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}
/* El contorno: la secundaria, mismo color y misma forma. */
.nav__cta .btn--login {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent-soft);
}
.nav__cta .btn--login:hover {
    background: rgba(224, 85, 97, .12);
    border-color: var(--accent-soft);
    color: var(--bone);
}
/* El candado se va: en la referencia los dos botones son solo texto, y con el
   icono este deja de ser el gemelo del otro. */
.nav__cta .btn--login svg { display: none; }

/* ============ UNA SOLA VENTANA CON LAS CUATRO VISTAS DENTRO ==============

   Antes eran cuatro marcos independientes, cada uno con su barra de puntos. Eso
   se leia como CUATRO PANTALLAS SUELTAS, y no lo son: es una consola y esas
   vistas conviven en ella. Una ventana con cuatro apartados dentro lo dice sin
   una linea de texto. */
.ventana {
    border: 1px solid var(--rule-2);
    border-radius: var(--r-l);
    background: var(--surf);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ventana__barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    background: rgba(247, 232, 234, 0.045);
}
.ventana__t {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bone);
}
/* La direccion, a la derecha y apagada: es lo que termina de decir "esto es una
   aplicacion y no una lamina". Se oculta en movil, donde no cabe sin empujar al
   titulo a dos lineas. */
.ventana__url {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
}
@media (max-width: 640px) { .ventana__url { display: none; } }

.ventana__cuerpo { display: grid; }

/* Cada vista, ya como apartado de dentro y no como ventana propia: sin borde ni
   sombra, separadas por un filete. El ultimo no lleva filete, que si no parece
   que la ventana sigue y esta cortada. */
/* AQUI VIVIAN `.vista-p*`, las reglas de los tres bloques apilados -"01 · Lista
   de proyectos", "02 · Hallazgos", "03 · Resumen"- con los que se enseñaba la
   consola hasta el 05/10/2026. Se borraron el dia que la maqueta paso a tener
   las pestañas de verdad, porque ya no quedaba ni un elemento que las usara.

   Lo que las sustituye esta al final de esta hoja, bajo "LA CONSOLA CON
   PESTAÑAS": `.ui-pest` para la barra y `.ui-panel-v` para cada vista. */

/* El contenido de la tarjeta, por encima del numero de agua. Ver el z-index de
   `.planes .plan::before`. */
.planes .plan > * { position: relative; z-index: 1; }

/* P6: EL PRECIO DE LAS CUATRO TARJETAS, A LA MISMA ALTURA.

   La tarjeta destacada lleva la cinta "EL HABITUAL" y las otras tres no, asi que
   su precio caia 35px mas abajo. Era preexistente y no cantaba; con el precio
   convertido en el elemento dominante de la fila -40px y en acento- el escalon
   salta a la vista.

   Se reserva el carril de la cinta en las que no la tienen, en vez de sacar la
   cinta del flujo: asi la altura la sigue decidiendo la propia cinta y no un
   numero copiado a mano que se queda viejo en cuanto alguien le cambie el
   tamaño de letra. */
.planes .plan:not(.plan--destacado)::after {
    content: "";
    display: block;
    order: -1;
    /* 25px es la altura real de la cinta medida en el navegador, no un numero
       redondo: con 23 quedaban 2px de escalon. */
    height: 25px;
    margin-bottom: 10px;
}

/* ============ EL DESPLEGABLE DE CADA TARJETA DE SERVICIO ================

   `<details>` nativo: lo abre el navegador, funciona sin scripts, el buscador
   lo indexa igual y Ctrl+F encuentra el texto aunque este cerrado.

   LO IMPORTANTE ES QUE EL RESUMEN PAREZCA PULSABLE. Un `<summary>` sin estilo
   se lee como un parrafo con una flechita, y nadie lo pulsa: lleva su propio
   recuadro, el cursor de mano y un signo que cambia al abrirse. */
.svc-k__mas2 {
    margin-top: 12px;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-s);
    overflow: hidden;
}
.svc-k__mas2 > summary {
    list-style: none;          /* Firefox */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bone);
    transition: background .18s var(--ease), color .18s var(--ease);
}
/* El triangulo por omision de WebKit: se quita para poner el signo propio. */
.svc-k__mas2 > summary::-webkit-details-marker { display: none; }
.svc-k__mas2 > summary::before {
    content: "+";
    flex: 0 0 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-2);
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    color: var(--accent-soft);
}
.svc-k__mas2[open] > summary::before { content: "\2212"; }  /* menos */
.svc-k__mas2 > summary:hover { background: rgba(247, 232, 234, .04); color: var(--bone); }
.svc-k__mas2[open] > summary { border-bottom: 1px solid var(--rule); }

.svc-k__mas2 p {
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.svc-k__mas2 p + p { padding-top: 0; }
.svc-k__mas2 b { color: var(--bone); }

/* Quien pidio que nada se mueva tampoco ve la animacion de apertura. */
@media (prefers-reduced-motion: reduce) {
    .svc-k__mas2 > summary { transition: none; }
}

/* ==========================================================================
   MAQUETAS DE LA CONSOLA, PARA LA LANDING. Prefijo .ui-

   Recrean el aspecto de web/app.html con datos inventados. Los tamanos, pesos y
   radios son los de app.css; los colores salen de las variables que ya tiene
   esta hoja. Donde la app usa una variable que aqui no existe, se traduce:
     --gold -> --accent      --gold-soft -> --accent-soft
     --mal  -> --sev-alta    --aviso     -> --sev-media
     --bien -> --sev-baja    --bone-2    -> --bone / --muted
   Los dos unicos hex literales son #4a2027 -el fondo solido del item activo de
   la barra, que en la app es #581a26 y aqui se rebaja a esta paleta- y #ff2d44,
   la severidad critica, que esta hoja no declara.
   ========================================================================== */

/* ---------------------------------------------------- el armazon de la app */
.ui-consola {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--rule);
    border-radius: var(--r-s);
    background: rgba(0, 0, 0, .22);
    overflow: hidden;
    font-family: var(--font-sans);
}
@media (min-width: 760px) {
    .ui-consola { grid-template-columns: 244px minmax(0, 1fr); }
}

/* ------------------------------------------------------- la barra lateral */
.ui-lat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 12px;
    background: rgba(10, 4, 5, .72);
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
    .ui-lat { border-bottom: 0; border-right: 1px solid var(--rule); }
}

.ui-lat__marca {
    display: flex; align-items: center; gap: 10px;
    padding: 2px 6px 14px;
    border-bottom: 1px solid var(--rule);
}
.ui-lat__sigma {
    display: grid; place-items: center;
    width: 32px; height: 32px; flex: 0 0 32px;
    border: 1px solid var(--rule); border-radius: 8px;
    font-family: var(--font-mono); font-size: 17px; line-height: 1;
    color: var(--accent);
}
.ui-lat__marca-t {
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
    letter-spacing: .14em; color: var(--bone); line-height: 1.25;
}
.ui-lat__marca-t em {
    display: block; font-style: normal;
    font-size: 9px; letter-spacing: .2em; color: var(--muted);
}

.ui-lat__seccion {
    margin: 0 0 2px; padding: 0 6px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--muted);
}

.ui-lat__nav { display: flex; flex-direction: column; gap: 7px; }

/* Las dos herramientas. La activa lleva fondo solido, borde y color de acento:
   tres senales, que es como lo hace la app. */
.ui-hrm {
    display: grid; gap: 1px;
    padding: 11px 12px; border-radius: 10px;
    border: 1px solid transparent; background: transparent;
}
.ui-hrm__t {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
}
.ui-hrm__d { font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.ui-hrm--activa {
    background: #4a2027;
    border-color: rgba(224, 85, 97, .5);
}
.ui-hrm--activa .ui-hrm__t { color: var(--accent); }

/* ------------------------------------------------- la lista de proyectos */
.ui-lat__lista { display: flex; flex-direction: column; gap: 4px; }

.ui-emp {
    display: grid; grid-template-columns: auto 1fr; gap: 0 10px;
    align-items: center;
    padding: 8px 10px 8px 8px; border-radius: 9px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    background: transparent;
}
.ui-emp__n {
    font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--bone);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-emp__d {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em;
    line-height: 1.4; color: var(--muted);
}
/* El estado -lo que pasa ahora- y el conteo -cuantas hubo- no se parecen. */
.ui-emp__d--estado {
    text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
    color: var(--bone);
}
.ui-emp__d--conteo { opacity: .62; }

.ui-emp--activa {
    background: #4a2027;
    border-color: rgba(224, 85, 97, .5);
    border-left-color: var(--accent);
}
.ui-emp--activa .ui-emp__n { color: #fff; font-weight: 700; }
.ui-emp--activa .ui-mono { box-shadow: 0 0 0 2px var(--accent); }
.ui-emp--activa .ui-emp__d { color: var(--accent-soft); }

/* El punto de actividad, con el mismo codigo de color de la app. */
.ui-luz { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.ui-luz--vivo { background: var(--sev-baja); box-shadow: 0 0 8px var(--sev-baja); }
.ui-luz--espera { background: var(--sev-media); box-shadow: 0 0 8px var(--sev-media); }

/* El monograma: iniciales sobre un color derivado del nombre, el mismo siempre.
   En la app lo calcula el JS y llega en --mono; aqui va escrito. */
.ui-mono {
    grid-row: 1 / span 2;
    display: grid; place-items: center;
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.ui-mono--grande {
    grid-row: auto;
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 11px; font-size: 15px;
}

.ui-lat__pie { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ui-lat__yo {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0 9px;
    align-items: center;
    padding: 7px 9px; border-radius: 9px;
    border: 1px solid var(--rule); background: rgba(0, 0, 0, .34);
}
.ui-lat__yo b { font-size: 11.5px; font-weight: 600; color: var(--bone); }
.ui-lat__yo em {
    display: block; font-style: normal;
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.ui-lat__yo i { font-style: normal; font-size: 10px; color: var(--muted); }

/* --------------------------------------------------- la banda y el lienzo */
.ui-lienzo { min-width: 0; }

.ui-banda {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    min-height: 48px; padding: 10px 16px;
    background: rgba(10, 4, 5, .72);
    border-bottom: 1px solid var(--rule);
    box-shadow: inset 0 -2px 0 rgba(76, 175, 125, .28);
}
.ui-banda__et {
    flex: 0 0 auto;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .26em;
    text-transform: uppercase; color: var(--muted);
}
.ui-banda__n {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-display); font-size: clamp(15px, 2vw, 20px);
    font-weight: 500; line-height: 1.1; color: var(--bone);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-banda__sem { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ui-cuota {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--rule); background: rgba(0, 0, 0, .3);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.ui-cuota b {
    font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0; text-transform: none; color: var(--bone);
}
.ui-sem {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.ui-sem::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--faint);
}

.ui-lienzo__c { padding: 16px; }
.ui-miga {
    margin: 0 0 10px;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.ui-miga b { color: var(--bone); font-weight: 500; }
.ui-h {
    margin: 0 0 6px;
    font-family: var(--font-display); font-size: clamp(20px, 3vw, 27px);
    font-weight: 500; line-height: 1.15; color: var(--bone);
}
.ui-h em { font-style: normal; color: var(--accent); }
.ui-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* Las tarjetas del selector de aplicacion. */
.ui-selt { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ui-selt { grid-template-columns: 1fr 1fr; } }
.ui-selt__c {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px;
    align-content: center;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--rule); background: rgba(0, 0, 0, .2);
}
.ui-selt__c > .ui-mono { grid-row: 1 / span 3; align-self: center; }
.ui-selt__c--activa { border-color: rgba(224, 85, 97, .5); background: #4a2027; }
.ui-selt__n { grid-column: 2; font-size: 13px; font-weight: 600; color: var(--bone); }
.ui-selt__u {
    grid-column: 2;
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-selt__m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; grid-column: 2; margin-top: 2px; }
.ui-selt__et {
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-soft);
    border: 1px solid rgba(224, 85, 97, .35); border-radius: 999px;
    padding: 2px 8px;
}
.ui-selt__aud { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }

/* ====================================================== PANEL DE HALLAZGOS */
.ui-panel { display: grid; gap: 12px; }

.ui-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ui-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .4px;
    color: var(--muted);
}
.ui-chip b { color: var(--accent); }
/* CERO NO SE ESCONDE, SE APAGA. Quitar la pastilla de "Critica" cuando no hay
   ninguna borra una buena noticia que vale la pena leer; dejarla con el rojo y
   el borde de las que SI tienen casos hace que un vistazo rapido cuente una
   critica que no existe. Medido en App Muestra, que tiene cuatro severidades en
   cero. El atributo lo pone el script al pintar. */
.ui-chip[data-cero] { opacity: .42; }
.ui-chip[data-cero], .ui-chip[data-cero] b { color: var(--faint); border-color: var(--rule); }
/* El color de la severidad tambien en el contador, no solo en el filete: la fila
   de contadores es lo primero que se mira de un expediente. */
.ui-chip[data-sev="Critica"], .ui-chip[data-sev="Critica"] b { color: #ff2d44; border-color: #ff2d44; }
.ui-chip[data-sev="Alta"], .ui-chip[data-sev="Alta"] b { color: var(--sev-alta); border-color: var(--sev-alta); }
.ui-chip[data-sev="Media"], .ui-chip[data-sev="Media"] b { color: var(--sev-media); border-color: var(--sev-media); }
.ui-chip[data-sev="Baja"], .ui-chip[data-sev="Baja"] b { color: var(--sev-baja); border-color: var(--sev-baja); }
.ui-chip[data-sev="Informativo"], .ui-chip[data-sev="Informativo"] b { color: var(--faint); border-color: var(--rule-2); }

/* La carpeta de un expediente. */
.ui-exp {
    border: 1px solid var(--rule); border-radius: 10px;
    background: rgba(0, 0, 0, .16); overflow: hidden;
}
.ui-exp__fila { display: flex; align-items: stretch; flex-wrap: wrap; }
.ui-exp__cab {
    flex: 1 1 260px; min-width: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 13px;
}
.ui-exp__cab::before {
    content: "\25be";
    font-size: 10px; color: var(--accent); opacity: .8; flex: 0 0 10px;
}
.ui-exp__n {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
    font-weight: 700; color: var(--accent); min-width: 0;
}
.ui-exp__m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ui-exp__e, .ui-exp__t {
    font-style: normal;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
    padding: 2px 7px; border-radius: 999px; border: 1px solid var(--rule);
}
.ui-exp__t { color: var(--bone); }
/* La marca de sin confirmar: ambar con fondo, no solo un borde de otro color.
   Un hallazgo que el agente no reprodujo no puede leerse como confirmado. */
.ui-exp__nc, .ui-hz__nc {
    font-style: normal;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
    color: var(--sev-media);
    border: 1px solid rgba(245, 166, 35, .55);
    background: rgba(245, 166, 35, .12);
}
.ui-exp__id {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 13px;
    border-left: 1px solid var(--rule);
    background: rgba(0, 0, 0, .18); color: var(--muted);
}
.ui-exp__id code { font-family: var(--font-mono); font-size: 10.5px; color: inherit; }
@media (max-width: 640px) {
    .ui-exp__id { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--rule); }
    .ui-exp__m { margin-left: 0; }
}

.ui-exp__cuerpo { padding: 2px 13px 13px; border-top: 1px solid var(--rule); }
.ui-exp__obj {
    margin: 11px 0;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
    word-break: break-all;
}

/* La tarjeta de un hallazgo: filete de 3px del color de su severidad. */
.ui-hz { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ui-hz__f {
    border: 1px solid var(--rule); border-left-width: 3px; border-radius: 9px;
    background: rgba(0, 0, 0, .2); padding: 12px 14px;
}
.ui-hz__f[data-sev="Critica"] { border-left-color: #ff2d44; }
.ui-hz__f[data-sev="Alta"] { border-left-color: var(--sev-alta); }
.ui-hz__f[data-sev="Media"] { border-left-color: var(--sev-media); }
.ui-hz__f[data-sev="Baja"] { border-left-color: var(--sev-baja); }
.ui-hz__f[data-sev="Informativo"] { border-left-color: var(--rule-2); }
.ui-hz__t { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--bone); }
.ui-hz__m { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.ui-hz__m span {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px;
}
.ui-hz__m span.ui-hz__sev { color: var(--bone); border-color: currentColor; }
.ui-hz__f[data-sev="Critica"] .ui-hz__sev { color: #ff2d44; }
.ui-hz__f[data-sev="Alta"] .ui-hz__sev { color: var(--sev-alta); }
.ui-hz__f[data-sev="Media"] .ui-hz__sev { color: var(--sev-media); }
.ui-hz__f[data-sev="Baja"] .ui-hz__sev { color: var(--sev-baja); }
.ui-hz__d { margin: 9px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); }

/* ============================================ RESUMEN: LA BANDERA ========= */
.ui-rs { display: grid; gap: 14px; }
.ui-rs__cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ui-rs__quien { display: grid; gap: 3px; min-width: 0; }
.ui-rs__quien b { font-size: 17px; font-weight: 500; color: var(--bone); }
.ui-rs__quien code, .ui-rs__quien em {
    font-style: normal;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
    word-break: break-all;
}

.ui-rs__flag {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 18px 20px; border-radius: 12px;
    border: 1px solid var(--rule); background: rgba(0, 0, 0, .24);
}
/* El filete y la barra los elige la BANDA que dijo el veredicto, con los mismos
   colores que el PDF. */
.ui-rs__flag[data-banda="roja"] { border-left: 4px solid var(--sev-alta); color: var(--sev-alta); }
.ui-rs__flag[data-banda="ambar"] { border-left: 4px solid var(--sev-media); color: var(--sev-media); }
.ui-rs__flag[data-banda="verde"] { border-left: 4px solid var(--sev-baja); color: var(--sev-baja); }

/* EL SELLO ES EL LOGOTIPO DE VERDAD desde el 05/10/2026, a peticion de Oscar.
   Antes era un hexagono dibujado con dos capas de `clip-path` y una sigma
   tipografica dentro, para no traer una imagen a la landing. El dibujo se
   parecia a la marca sin serlo: al hexagono le faltaba el hueco del "IA" y la
   sigma era la del tipo de letra, no la del logotipo.

   SON LOS TRES ARCHIVOS QUE YA EXISTIAN, sin fondo y en los tres colores de
   banda: `sello-rojo`, `sello-ambar` y `sello-verde`. Se usan las copias
   `-176.png`, recortadas al contenido y reducidas con Pillow desde los
   originales de 1254 px: el original pesa 361 KB para pintarse a 86, y la copia
   15 KB. Los originales siguen en la carpeta.

   LA CAJA MIDE LO MISMO QUE EL HEXAGONO ANTERIOR, 86 px, y la imagen se ajusta
   dentro con `object-fit: contain`. Hace falta porque los tres archivos tienen
   proporciones distintas al estar recortados a su contenido -el rojo mide
   170x176 y el verde 176x176-, y sin esto el sello cambiaria de tamaño al
   cambiar de banda, que es justo el momento en que se esta mirando.

   LAS REGLAS DEL HEXAGONO DIBUJADO SE BORRARON. No queda ningun elemento que
   las use, y CSS muerto que parece vivo es lo que hace que el siguiente lo
   copie creyendo que sirve. El porque esta escrito aqui, que es lo que de
   verdad hacia falta conservar. */
.ui-rs__sello {
    width: 86px; height: 86px; flex: 0 0 86px;
    display: grid; place-items: center;
}
.ui-rs__sello img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

.ui-rs__c { flex: 1 1 280px; min-width: 0; display: grid; gap: 9px; }
.ui-rs__t { font-family: var(--font-display); font-size: 21px; letter-spacing: .01em; color: var(--bone); }
.ui-rs__barra {
    height: 9px; border-radius: 999px; overflow: hidden;
    background: rgba(0, 0, 0, .45); border: 1px solid var(--rule);
}
.ui-rs__barra span { display: block; height: 100%; background: currentColor; }
.ui-rs__pct { margin: 0; font-size: 13px; color: var(--bone); }
.ui-rs__pct b { font-family: var(--font-mono); font-size: 16px; color: var(--bone); }
/* La escala se dice EN la bandera: un porcentaje suelto se lee como una nota de
   examen, y aqui 90 es lo peor que hay. */
.ui-rs__esc {
    margin: 0;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
.ui-rs__esc b { color: var(--accent-soft); }
.ui-rs__exp { margin: 0; max-width: 74ch; font-size: 12.2px; line-height: 1.65; color: var(--muted); }

.ui-rs__nc {
    margin: 0; max-width: 90ch;
    font-size: 12px; line-height: 1.6; color: var(--sev-media);
}
.ui-rs__nc b { color: var(--bone); }

.ui-rs__rej { display: flex; gap: 10px; flex-wrap: wrap; }
.ui-rs__fi {
    flex: 1 1 180px; min-width: 0;
    display: grid; gap: 4px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--rule); background: rgba(0, 0, 0, .2);
}
.ui-rs__fi b { font-family: var(--font-mono); font-size: 22px; color: var(--bone); }
.ui-rs__fi span {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-soft);
}
.ui-rs__fi em { font-style: normal; font-size: 11.3px; line-height: 1.5; color: var(--muted); }
.ui-rs__fi--aviso { border-color: rgba(245, 166, 35, .45); }
.ui-rs__fi--aviso b, .ui-rs__fi--aviso span { color: var(--sev-media); }

.ui-rs__cual {
    margin: 0; max-width: 90ch;
    padding: 11px 13px; border-radius: 9px;
    border: 1px solid var(--rule); background: rgba(0, 0, 0, .18);
    font-size: 12.2px; line-height: 1.65; color: var(--muted);
}
.ui-rs__cual b { color: var(--bone); }
.ui-rs__cual code { font-family: var(--font-mono); font-size: 11px; color: var(--bone); }

@media (max-width: 640px) {
    /* El `b` y el `em` de aqui apuntaban a la sigma y al rotulo del hexagono
       DIBUJADO, que se cambio por el logotipo de verdad el 05/10/2026. Se
       quedaron vivas en este media query cuando el bloque principal se reescribio
       entero: dos reglas que no casan con nada y que el siguiente que las lea va
       a creer que sirven. */
    .ui-rs__sello { width: 64px; height: 64px; flex-basis: 64px; }
    .ui-rs__flag { gap: 14px; padding: 14px 15px; }
    .ui-rs__fi { flex: 1 1 100%; }
}

/* A 380px la barra y las tarjetas caben; lo unico que se deja desplazar dentro
   de su marco es la fila de contadores, que con cinco severidades no entra. */
.ui-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-scrollx > .ui-chips { flex-wrap: nowrap; }
@media (min-width: 560px) {
    .ui-scrollx > .ui-chips { flex-wrap: wrap; }
}

/* ==========================================================================
   AÑADIDOS DEL 05/10/2026 — SEGUNDA TANDA
   Cierre con formato de plan, pliegue de las tarjetas de plan, la tabla de
   estilos por plan, el pliegue de los hallazgos y la maqueta interactiva.
   ========================================================================== */

/* ============ EL CIERRE, CON EL FORMATO DE UNA TARJETA DE PLAN ===========

   Va en columna y no en fila como el cierre anterior: ahora lleva tres cosas
   -titulo, par de botones y linea de contacto- y en fila la tercera se queda
   colgando debajo de la segunda sin alinearse con nada.

   EL BORDE ES EL DEL `.plan--destacado` Y NO EL DE `.cierre`: el bloque tiene
   que leerse como una tarjeta mas de la rejilla que se acaba de ver, y el
   filete izquierdo grueso del cierre anterior lo leia como un aviso. */
.cierre--plan {
    display: block;
    border: 1px solid rgba(224, 85, 97, .5);
    background: var(--surf);
    position: relative;
    overflow: hidden;
}
/* El numero de agua de las tarjetas de plan, aqui con la sigma de la marca. Es
   el mismo recurso y casi la misma opacidad; sin el, el bloque se parece al
   cierre viejo y no a una tarjeta. */
.cierre--plan::before {
    content: "\03A3";
    position: absolute;
    z-index: 0;
    top: -28px;
    right: 10px;
    font-family: var(--font-display);
    font-size: 132px;
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
    opacity: .09;
    pointer-events: none;
    user-select: none;
}
.cierre--plan > * { position: relative; z-index: 1; }
.cierre__t { max-width: 62ch; }
.cierre--plan .cierre__acciones { margin-top: var(--s3); }
.cierre--plan .btn { min-height: 48px; }
/* `.cierre--plan .cierre__pie` y no `.cierre__pie` a secas: `.cierre p` -que
   esta mas arriba en la hoja- tiene especificidad 0-1-1 y le ganaba a 0-1-0
   pasara lo que pasara con el orden, asi que el margen de separacion salia de
   6 px en vez de 24 y la linea de contacto se pegaba a los botones. Medido en
   las seis paginas el 05/10/2026. */
.cierre--plan .cierre__pie {
    margin-top: var(--s3);
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 14.5px;
    color: var(--muted);
}
.cierre__pie a { color: var(--accent-soft); text-decoration: none; word-break: break-all; }
.cierre__pie a:hover { color: var(--bone); text-decoration: underline; }

/* La pastilla "Freemium" dentro del boton. En linea y no debajo: el boton tiene
   una sola accion y una etiqueta de dos lineas lo convierte en un bloque. */
.btn__et {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .78;
}
@media (max-width: 420px) {
    .cierre--plan .cierre__acciones .btn { width: 100%; justify-content: center; }
}

/* ============ EL PLIEGUE DE CADA TARJETA DE PLAN ========================

   MISMO ASPECTO QUE EL DESPLEGABLE DE LAS TARJETAS DE SERVICIO -recuadro de
   trazo discontinuo, signo + que se vuelve menos al abrir- Y REGLAS PROPIAS, a
   proposito. Lo que va dentro no se parece: alli son parrafos y aqui listas
   `.plan__l` y la caja del reporte premium, que traen sus propios margenes.
   Juntarlos en un solo selector obligaba a deshacer el relleno de `p` para este
   caso, que es mas regla y no menos.

   NO SE COPIA NADA DE `web/assets/css/app.css`. Es la regla de la casa desde que
   `border: solid var(--bien)` dejo sin marca las 33 viñetas de los planes: esa
   variable vive en la hoja de la consola y no en esta. Lo vigila
   `pruebas/test_landing_css.py`. */
.plan__mas {
    margin-top: 12px;
    border: 1px dashed var(--rule-2);
    border-radius: var(--r-s);
    overflow: hidden;
}
.plan__mas > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bone);
    transition: background .18s var(--ease);
}
.plan__mas > summary::-webkit-details-marker { display: none; }
.plan__mas > summary::before {
    content: "+";
    flex: 0 0 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-2);
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    color: var(--accent-soft);
}
.plan__mas[open] > summary::before { content: "\2212"; }
.plan__mas > summary:hover { background: rgba(247, 232, 234, .04); }
/* `outline-offset` NEGATIVO porque el `<details>` lleva `overflow: hidden` y el
   `<summary>` ocupa su caja entera: con el +3px de la regla global, el anillo de
   foco se dibuja 3 px FUERA del area visible y se recorta. Quien navega con
   teclado no ve donde esta. Mismo arreglo que en `.ui-desp > summary`. */
.plan__mas > summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -3px; }
.plan__mas[open] > summary { border-bottom: 1px solid var(--rule); }
/* Las listas de dentro traen su margen vertical de `.plan__l`; lo que les falta
   es el lateral, que fuera lo daba el relleno de la tarjeta. */
.plan__mas .plan__l { margin: 10px 14px; }
.plan__mas .plan__extra { margin: 0 14px 14px; }
@media (prefers-reduced-motion: reduce) {
    .plan__mas > summary { transition: none; }
}

/* La linea que dice en que plan entra cada estilo del agente. Va entre el
   titulo de la tarjeta y el parrafo: es lo que convierte tres nombres en tres
   cosas que se compran. */
.tarjeta__plan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(224, 85, 97, .3);
    background: rgba(224, 85, 97, .08);
    font-size: 13px;
    color: var(--muted);
}
.tarjeta p.tarjeta__plan { font-size: 13px; }
.tarjeta__plan svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent-soft); }
.tarjeta__plan b { color: var(--bone); font-weight: 600; }

/* Las celdas de la tabla de estilos por plan. Centradas porque llevan un
   simbolo y no un dato que se lea de izquierda a derecha. */
.tabla-env td.tb-si, .tabla-env td.tb-no { text-align: center; font-size: 16px; }
.tb-si { color: var(--sev-baja); }
.tb-no { color: var(--faint); }

/* ============ EL PLIEGUE DE LA LISTA DE HALLAZGOS =======================

   La lista de nueve hallazgos medía casi tres pantallas de telefono y empujaba
   la vista 03 -la bandera, que es la conclusion- tan abajo que practicamente
   nadie llegaba. Arriba se queda el recuento por severidad y la cabecera del
   expediente, que es lo que se mira de un vistazo. */
.ui-desp {
    margin-bottom: 11px;
    border: 1px solid var(--rule);
    border-radius: 9px;
    background: rgba(0, 0, 0, .18);
}
.ui-desp > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-soft);
}
.ui-desp > summary::-webkit-details-marker { display: none; }
.ui-desp > summary::before {
    content: "+";
    flex: 0 0 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule-2);
    border-radius: 5px;
    font-size: 12px;
    line-height: 1;
}
.ui-desp[open] > summary::before { content: "\2212"; }
.ui-desp > summary:hover { background: rgba(247, 232, 234, .04); }
.ui-desp[open] > summary { border-bottom: 1px solid var(--rule); }
.ui-desp > .ui-hz { padding: 12px 13px; }
.ui-desp > summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -3px; }

/* ============ LOS CINCO PROYECTOS, AHORA PULSABLES ======================

   `.ui-emp` y `.ui-selt__c` pasaron de `div` a `button` el 05/10/2026, cuando
   Oscar pidio que la maqueta dejara de ser una captura y se pudiera recorrer. Un
   boton trae de fabrica fondo gris, borde, el tipo del sistema y el texto
   centrado: todo eso hay que deshacerlo para que siga pareciendo la fila de una
   barra lateral y no un control de formulario.

   `text-align: left` ADEMAS de la rejilla: en WebKit el contenido de un boton se
   centra aunque el display sea grid, y sin esta linea las cinco filas salen
   centradas solo en ese navegador. */
.ui-emp, .ui-selt__c {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
/* `:not(--activa)` EN EL PROPIO SELECTOR, no un parche debajo. El hover generico
   tiene especificidad 0-2-0 y `.ui-emp--activa` 0-1-0, asi que pisaba TAMBIEN el
   borde del elegido: al pasar el raton por encima, el proyecto activo perdia su
   filete de acento y parecia que se habia deseleccionado. El parche de debajo
   solo habia blindado el fondo. */
.ui-emp:not(.ui-emp--activa):hover,
.ui-selt__c:not(.ui-selt__c--activa):hover {
    border-color: var(--rule-2);
    background: rgba(247, 232, 234, .05);
}
.ui-emp:focus-visible, .ui-selt__c:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .ui-emp, .ui-selt__c { transition: none; }
}

/* El punto del semaforo de la banda y el filete de debajo. Antes eran siempre
   verdes porque la maqueta solo enseñaba una aplicacion parada; ahora hay una
   ejecutando y otra esperando autorizacion, y el color lo elige `data-sem`, que
   escribe el script en los dos elementos. El atributo y no el texto: la cadena
   "Ejecutando" se puede reescribir sin que el color se quede atras. */
.ui-sem[data-sem="vivo"]::before { background: var(--sev-baja); box-shadow: 0 0 8px var(--sev-baja); }
.ui-sem[data-sem="espera"]::before { background: var(--sev-media); box-shadow: 0 0 8px var(--sev-media); }
.ui-sem[data-sem="quieto"]::before { background: var(--faint); box-shadow: none; }
.ui-banda[data-sem="vivo"] { box-shadow: inset 0 -2px 0 rgba(76, 175, 125, .45); }
.ui-banda[data-sem="espera"] { box-shadow: inset 0 -2px 0 rgba(245, 166, 35, .45); }
.ui-banda[data-sem="quieto"] { box-shadow: inset 0 -2px 0 rgba(247, 232, 234, .14); }

/* ==========================================================================
   LA CONSOLA CON PESTAÑAS — 05/10/2026, TERCERA TANDA

   La maqueta dejo de ser tres bloques apilados y paso a ser lo que es la
   consola: un lienzo con cinco pestañas. Lo que antes rotulaba cada bloque
   -`.vista-p`, "01 · Lista de proyectos"- ya no existe y sus reglas se
   borraron: CSS muerto que parece vivo es lo que hace que el siguiente lo
   copie creyendo que sirve.
   ========================================================================== */

/* La pista de que esto se puede tocar, en la barra de la ventana. Sin ella,
   cinco botones que parecen una captura de pantalla no se pulsan: nadie prueba
   a hacer clic en una imagen. */
.ventana__pista {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-soft);
    white-space: nowrap;
}
.ventana__pista::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}
/* A 640 px desaparece la URL; a 520 tambien la pista, porque el titulo de la
   ventana es lo ultimo que se puede perder de esa barra. */
@media (max-width: 520px) { .ventana__pista { display: none; } }

/* ----------------------------------------- las dos herramientas, con icono */
.ui-hrm { position: relative; grid-template-columns: auto 1fr; }
.ui-hrm__i {
    grid-row: 1 / span 2;
    width: 16px; height: 16px;
    align-self: center;
    margin-right: 9px;
    color: var(--muted);
}
.ui-hrm--activa .ui-hrm__i { color: var(--accent); }
/* El candado dice que esta herramienta pide cuenta y la otra no. Va arriba a la
   derecha y pequeño: es una nota, no un boton. */
.ui-hrm__llave {
    position: absolute;
    top: 9px; right: 10px;
    width: 11px; height: 11px;
    color: var(--accent-soft);
    opacity: .75;
}

/* El monograma paso a ser el hueco de un LOGOTIPO. En la consola de verdad las
   dos letras son el respaldo de cuando una aplicacion no tiene marca; aqui se
   enseña la marca, que es lo normal. El relleno se va y el dibujo ocupa el
   cuadro entero: el azulejo redondeado ya viene dentro de cada logotipo. */
.ui-mono { overflow: hidden; background: none; }
.ui-mono > svg { width: 100%; height: 100%; display: block; }

/* ========================= LA BARRA DE PESTAÑAS DEL LIENZO =================

   Cinco pestañas a la izquierda y dos acciones a la derecha, como en la
   consola. Las acciones NO estan dentro del `tablist`: un lector de pantalla
   las contaria como dos vistas mas que no existen.

   SE DESPLAZA EN HORIZONTAL EN LUGAR DE PARTIRSE EN DOS LINEAS. Cinco pestañas
   en dos filas dejan de leerse como una barra y pasan a leerse como una lista,
   y entonces ya no se entiende que son vistas de lo mismo. */
.ui-pest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--rule);
    background: rgba(0, 0, 0, .18);
}
.ui-pest__tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ui-pest__tabs::-webkit-scrollbar { display: none; }

.ui-pest__b {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    margin-top: 6px;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .16s var(--ease), background .16s var(--ease);
}
.ui-pest__b svg { width: 14px; height: 14px; flex-shrink: 0; }
.ui-pest__b:hover { color: var(--bone); background: rgba(247, 232, 234, .05); }
.ui-pest__b:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
/* La activa lleva fondo, borde y color: tres señales. El color solo no basta y
   ademas no se ve en escala de grises. */
.ui-pest__b--activa {
    color: var(--accent);
    background: #4a2027;
    border-color: rgba(224, 85, 97, .5);
    box-shadow: inset 0 2px 0 var(--accent);
}
.ui-pest__b--activa:hover { color: var(--accent); background: #4a2027; }

/* Las dos acciones. Son `span` y no `button` A PROPOSITO, al reves que las
   pestañas: las pestañas hacen algo aqui y estas dos no. Un boton que no hace
   nada promete una accion que la landing no tiene. */
.ui-pest__acc { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.ui-pest__a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: rgba(0, 0, 0, .25);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.ui-pest__a svg { width: 12px; height: 12px; flex-shrink: 0; }
@media (max-width: 860px) { .ui-pest__acc { display: none; } }

/* Cada panel de pestaña. `hidden` lo pone el script; el `display` explicito
   hace falta porque el elemento tiene `display: grid` por su contenido y
   `[hidden]` por omision solo vale `display: none` si nadie lo pisa. */
.ui-panel-v { display: block; }
.ui-panel-v[hidden] { display: none; }
.ui-panel-v + .ui-panel-v { margin-top: var(--s3); }

/* El icono del titulo del panel, del tamaño de la mayuscula y no mas. */
.ui-h__i { width: .82em; height: .82em; margin-right: 10px; color: var(--accent); vertical-align: -.05em; }

/* El "+ Dar de alta una aplicacion" del final del selector. `span` por lo
   mismo que las dos acciones: aqui no da de alta nada. */
.ui-alta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 9px 14px;
    border: 1px dashed var(--rule-2);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--muted);
}
.ui-alta i {
    font-style: normal;
    display: grid; place-items: center;
    width: 17px; height: 17px;
    border: 1px solid var(--rule-2); border-radius: 5px;
    font-family: var(--font-mono); font-size: 12px; line-height: 1;
    color: var(--accent-soft);
}

/* El estado vacio de una pestaña. Dice QUE ES la vista que esta vacia, no solo
   que no hay nada: quien no ha visto nunca un retesting no sabe que se perdio. */
.ui-vacio {
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 22px 20px;
    border: 1px dashed var(--rule-2);
    border-radius: 11px;
    background: rgba(0, 0, 0, .16);
}
.ui-vacio svg { width: 24px; height: 24px; color: var(--accent-soft); }
.ui-vacio b { font-size: 15px; font-weight: 600; color: var(--bone); }
.ui-vacio span { font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 72ch; }

/* ============================================ LA PESTAÑA "EN CURSO" ====== */
.ui-curso__cab { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.ui-pill--vivo { border-color: rgba(76, 175, 125, .5); color: var(--sev-baja); }
/* El freno se ve siempre y se ve como lo que es. En la consola es el unico
   control que puede cortar una corrida a mitad, y esconderlo entre los demas
   seria la unica decision de esta maqueta con consecuencia real. */
.ui-pill--parar {
    margin-left: auto;
    border-color: rgba(255, 92, 110, .55);
    background: rgba(255, 92, 110, .12);
    color: var(--sev-alta);
}

.ui-prog {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--rule);
}
.ui-prog > span { display: block; height: 100%; background: var(--accent); }

.ui-pasos { display: grid; gap: 7px; margin: 14px 0; padding: 0; list-style: none; }
.ui-paso {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 2px 11px;
    align-items: start;
    padding: 9px 12px;
    border: 1px solid var(--rule);
    border-radius: 9px;
    background: rgba(0, 0, 0, .16);
}
/* La marca de estado se dibuja, no se escribe: tres estados y un solo glifo
   por estado se leen de un vistazo en una columna de seis. */
.ui-paso::before {
    content: "";
    grid-row: 1 / span 2;
    width: 11px; height: 11px;
    margin-top: 4px;
    border-radius: 50%;
    border: 2px solid var(--rule-2);
}
.ui-paso b { grid-column: 2; font-size: 13px; font-weight: 600; color: var(--muted); }
.ui-paso em {
    grid-column: 2;
    font-style: normal;
    font-family: var(--font-mono); font-size: 10.5px; color: var(--faint);
}
.ui-paso--ok::before { border-color: var(--sev-baja); background: var(--sev-baja); }
.ui-paso--ok b { color: var(--bone); }
.ui-paso--vivo { border-color: rgba(224, 85, 97, .45); background: rgba(224, 85, 97, .08); }
.ui-paso--vivo::before { border-color: var(--accent); background: var(--accent); }
.ui-paso--vivo b { color: var(--bone); }
.ui-paso--vivo em { color: var(--accent-soft); }

/* ============================================ LA PESTAÑA "RETESTING" ===== */
.ui-rt { display: grid; gap: 9px; margin: 11px 0 0; padding: 0; list-style: none; }
.ui-rt__f {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    padding: 11px 13px;
    border: 1px solid var(--rule);
    border-left-width: 3px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .18);
}
.ui-rt__e {
    grid-row: 1 / span 2;
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 700;
    white-space: nowrap;
}
.ui-rt__t { grid-column: 2; font-size: 13px; font-weight: 500; color: var(--bone); }
.ui-rt__d { grid-column: 2; font-size: 11.6px; line-height: 1.6; color: var(--muted); }
.ui-rt__d code, .ui-rt__t code { font-family: var(--font-mono); font-size: .92em; color: inherit; }
/* Cerrado es verde y abierto es rojo, los mismos de la severidad. "Parcial" es
   ambar y existe porque pasa: se corrige una cookie y no la otra, y llamarlo
   cerrado seria firmar algo que no se comprobo entero. */
.ui-rt__f[data-rt="cerrado"] { border-left-color: var(--sev-baja); }
.ui-rt__f[data-rt="cerrado"] .ui-rt__e { color: var(--sev-baja); }
.ui-rt__f[data-rt="abierto"] { border-left-color: var(--sev-alta); }
.ui-rt__f[data-rt="abierto"] .ui-rt__e { color: var(--sev-alta); }
.ui-rt__f[data-rt="parcial"] { border-left-color: var(--sev-media); }
.ui-rt__f[data-rt="parcial"] .ui-rt__e { color: var(--sev-media); }

@media (max-width: 560px) {
    .ui-rt__f { grid-template-columns: 1fr; }
    .ui-rt__e { grid-row: auto; justify-self: start; }
    .ui-rt__t, .ui-rt__d { grid-column: 1; }
    .ui-pill--parar { margin-left: 0; }
}

/* ==========================================================================
   LA MATRIZ DE ESTILOS POR PLAN — 05/10/2026, CUARTA TANDA

   Sustituye a una tabla de cuatro filas de guiones y palomitas en gris. Decia
   lo correcto y no la miraba nadie: en una pagina cuyo resto son tarjetas con
   relieve, color y numero de agua, el bloque que contesta "¿y que me llevo con
   cada plan?" no puede ser el mas apagado de todos.

   SE COMPARA POR PLAN Y NO POR ESTILO, que es como se compra. La tabla tenia
   los estilos en las filas y los planes en las columnas, o sea que para saber
   que trae el Profesional habia que leer una columna en vertical cruzando
   cuatro filas. Aqui cada tarjeta es un plan y se lee entera.

   LO QUE NO SE PIERDE DE LA TABLA: cada linea lleva el estado ESCRITO -el `<em>`
   con "Incluido" / "No incluido"- y no solo el color y el simbolo. Una rejilla
   de tarjetas no se navega por encabezados de fila y columna, asi que el estado
   tiene que viajar dentro del texto de cada linea.
   ========================================================================== */
.matriz {
    display: grid;
    gap: var(--s3);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: start;
}
@media (min-width: 680px) { .matriz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .matriz { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.matriz__c {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 20px;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.matriz__c:hover { border-color: var(--rule-2); transform: translateY(-2px); }
/* El numero de agua, el mismo recurso que las tarjetas de precio: es lo que ata
   visualmente los dos bloques y dice que se leen en el mismo orden. */
.matriz__c::before {
    content: attr(data-n);
    position: absolute;
    z-index: 0;
    top: -8px;
    right: 6px;
    font-family: var(--font-display);
    font-size: 76px;
    font-weight: 500;
    line-height: 1;
    color: var(--bone);
    opacity: .05;
    pointer-events: none;
    user-select: none;
}
.matriz__c > * { position: relative; z-index: 1; }

.matriz__c--destacada { border-color: rgba(224, 85, 97, .5); }
.matriz__c--destacada::before { color: var(--accent); opacity: .14; }
.matriz__cinta {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(224, 85, 97, .16);
    color: var(--accent-soft);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* EL ROBOT ES EL DEL HERO, no uno nuevo. Son los mismos ocho dibujos que
   recorren el ciclo de una corrida arriba en la portada, y reusarlos aqui hace
   que el plan y la fase que compra se reconozcan de un vistazo. */
.matriz__bot { width: 42px; height: 40px; margin-bottom: 12px; color: var(--bone); }
.matriz__c--destacada .matriz__bot { color: var(--accent-soft); }

.matriz__p {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
    color: var(--bone);
}
.matriz__d {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.matriz__l { display: grid; gap: 7px; margin: var(--s2) 0; padding: 0; list-style: none; }
.matriz__l li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 9px;
    border: 1px solid var(--rule);
    border-radius: 9px;
    background: rgba(0, 0, 0, .18);
    font-size: 13.5px;
    color: var(--bone);
}
.matriz__l svg { width: 15px; height: 15px; justify-self: center; }
/* El estado, escrito. Ver la cabecera de este bloque: sin esto la unica señal
   de que algo NO entra es un aspa gris, y eso no se puede oir. */
.matriz__l em {
    display: block;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}
.matriz__l li.si { border-color: rgba(76, 175, 125, .35); }
.matriz__l li.si svg { color: var(--sev-baja); }
.matriz__l li.si em { color: var(--sev-baja); }
.matriz__l li.no { color: var(--faint); background: transparent; }
.matriz__l li.no svg { color: var(--faint); }

.matriz__pie {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* ==========================================================================
   LAS DOS TARJETAS DE SERVICIO, CON BURBUJAS Y COLOR

   Eran dos columnas de parrafos grises con una fila de pastillas neutras en
   medio. Todo pesaba igual, asi que no habia nada que mirar primero y las dos
   tarjetas se leian como un muro. Lo que cambia:

     - LA PREGUNTA de cada servicio -"Que publica tu organizacion sin saberlo"-
       pasa a ser el elemento grande, por encima del parrafo. Es lo unico de la
       tarjeta que le habla al problema de quien lee.
     - LAS PASTILLAS DE CAPACIDAD se colorean y llevan punto: dejan de ser
       decoracion gris y pasan a ser la lista de lo que hace.
     - CADA TARJETA TIENE SU COLOR. La gratuita en verde -es la que se puede
       usar ahora mismo- y RTSS en el acento. Dos servicios distintos que se
       comparan en vertical necesitan distinguirse antes de leerse.
   ========================================================================== */
.svc-k {
    position: relative;
    overflow: hidden;
    border-top: 3px solid rgba(76, 175, 125, .55);
}
.svc-k--p { border-top-color: var(--accent); }
/* Un velo de color muy bajo desde la esquina, del color de la tarjeta. A .05 no
   se ve como fondo: se nota como temperatura, que es lo que separa las dos. */
.svc-k::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 40% at 100% 0, rgba(76, 175, 125, .07), transparent 70%);
}
.svc-k--p::after {
    background: radial-gradient(ellipse 60% 40% at 100% 0, rgba(224, 85, 97, .09), transparent 70%);
}
.svc-k > * { position: relative; z-index: 1; }

/* LA PREGUNTA, QUE ERA LA LINEA MAS APAGADA Y PASA A SER LA MAS GRANDE. */
.svc-k__q {
    margin: 4px 0 12px;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.9vw, 19px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--bone);
}

/* Las pastillas de capacidad, con punto de color y borde vivo. */
.svc-k .chips li {
    padding-left: 9px;
    border-color: rgba(76, 175, 125, .32);
    background: rgba(76, 175, 125, .07);
    color: var(--bone);
}
.svc-k .chips li::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--sev-baja);
    vertical-align: .08em;
}
.svc-k--p .chips li {
    border-color: rgba(224, 85, 97, .34);
    background: rgba(224, 85, 97, .08);
}
.svc-k--p .chips li::before { background: var(--accent); }

/* La pastilla de estado de arriba, mas marcada: es la etiqueta que dice si esto
   se puede usar ya o hay que contratarlo. */
.svc-k > .estado {
    padding: 6px 13px;
    font-size: 11px;
    letter-spacing: .1em;
}
.svc-k--p > .estado {
    background: rgba(224, 85, 97, .16);
    color: var(--accent-soft);
}

/* ==========================================================================
   LA NAVEGACION, EN COLUMNA A LA IZQUIERDA — 05/10/2026

   Pedida por Oscar con una captura de la consola del bot como referencia:
   marca arriba, los destinos en vertical y las acciones abajo.

   EL MOTIVO TECNICO ES EL QUE LA BARRA HORIZONTAL YA TENIA ESCRITO: "con los
   enlaces, el boton de demo Y el de Login, la barra necesita ~1140 px". Cuatro
   destinos y dos acciones no caben en el renglon de la marca, y la solucion de
   entonces fue esconder el menu entero por debajo de 1100 px. En vertical cada
   uno tiene su linea y el nombre de cada pagina se lee entero.

   ES EL MISMO <header class="nav"> QUE ANTES. Lo que cambia es como se coloca,
   no la estructura: dos navegaciones distintas para dos anchos son dos listas
   que hay que mantener de acuerdo, y este generador existe para no tener que
   hacerlo. Por debajo de 1100 px manda la barra inferior, como siempre.

   EL CONTENIDO SE APARTA CON `padding-left` EN <body> Y NO CON UN MARGEN EN
   `.shell`: el fondo animado de `body::before` y `body::after` va en `position:
   fixed` y cubre la pantalla entera, asi que un margen dejaria la columna
   flotando sobre el degradado en vez de encima de su propio fondo.
   ========================================================================== */
@media (min-width: 1101px) {
    body { padding-left: var(--nav-w); }

    /* `fixed` Y NO EL `sticky` QUE TRAE. Un elemento sticky sigue en el flujo,
       asi que el `padding-left` del body lo empujaba 232 px a la derecha: la
       columna salia pegada al contenido en vez de al borde de la pantalla, y el
       hueco de la izquierda quedaba vacio. Medido en el navegador. */
    .nav {
        position: fixed;
        top: 0; left: 0; bottom: auto;
        width: var(--nav-w);
        height: 100vh;
        height: 100dvh;
        border-bottom: 0;
        border-right: 1px solid var(--rule);
        overflow-y: auto;
    }
    /* El hueco nace `display: none` -en movil partiria la fila de la marca- y
       aqui es donde tiene que existir: es lo unico que empuja las dos acciones
       al fondo de la columna. Sin esta linea los botones se quedan pegados al
       ultimo enlace, que fue como salio la primera vez. */
    /* `.nav__in > .nav__hueco` Y NO `.nav__hueco`: la regla que lo apaga esta
       MAS ABAJO en la hoja y un media query no suma especificidad, asi que con
       el mismo 0-1-0 ganaba la de abajo y el hueco seguia sin existir. Es la
       TERCERA vez que esta misma trampa muerde hoy -antes fue el estrechado del
       Login en movil y el borde del proyecto activo-: en esta hoja, una regla
       dentro de un media query que pisa a otra de fuera necesita un selector
       mas especifico, no solo estar en un media query. */
    .nav__in > .nav__hueco { display: block; flex: 1 1 auto; }
    /* `align-items: stretch` EN LA BARRA, ademas del alto del hijo. `.nav` trae
       `align-items: center` de la version horizontal -ahi centraba la fila
       contra los 68 px de alto- y en columna eso encoge `.nav__in` a su
       contenido: el hueco no tenia nada que repartir y las dos acciones se
       quedaban pegadas al ultimo enlace en vez de irse al fondo. */
    .nav { align-items: stretch; }
    .nav__in {
        flex: 1 1 auto;
        height: 100%;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 22px 16px;
    }

    .marca { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }

    /* `margin: 0` DESHACE EL `margin: 0 auto` DE LA VERSION HORIZONTAL, que ahi
       centraba el grupo de enlaces en la barra. En columna ese auto empujaba el
       bloque entero 66 px a la derecha, y los cuatro botones salian estrechos y
       pegados al borde derecho en vez de ocupar el ancho de la columna. Medido
       en el navegador: el contenedor tenia margin-left 65,78 px. */
    .nav__enlaces { margin: 0; flex-direction: column; align-items: stretch; gap: 7px; }
    /* BOTONES Y NO TEXTO SUELTO. Cuatro palabras flotando en una columna de 232
       px, al lado de dos botones de verdad, no parecen ni pulsables ni del mismo
       sistema. La caja esta SIEMPRE, no solo al pasar el raton: un borde que
       aparece con el puntero no sirve para saber donde pulsar antes de pasarlo.

       A LA IZQUIERDA Y CON EL ICONO DELANTE, que es lo que fija el borde por el
       que se lee la columna. Centrados, cada renglon empieza en otro sitio. */
    .nav__enlaces a {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 14px;
        border-radius: 11px;
        border: 1px solid var(--rule);
        background: rgba(0, 0, 0, .22);
        font-size: 14.5px;
        text-align: left;
    }
    .nav__enlaces a svg {
        width: 17px; height: 17px;
        flex: 0 0 17px;
        color: var(--faint);
        transition: color .18s var(--ease);
    }
    .nav__enlaces a:hover {
        border-color: var(--rule-2);
        background: rgba(247, 232, 234, .06);
    }
    .nav__enlaces a:hover svg { color: var(--accent-soft); }
    /* La pagina actual, con fondo, borde Y filete: tres señales. El color solo
       no comunica, y en una columna el filete izquierdo es la que se lee sin
       leer. */
    .nav__enlaces a[aria-current="page"] {
        border-color: rgba(224, 85, 97, .45);
        border-left: 3px solid var(--accent);
        background: rgba(224, 85, 97, .12);
        color: var(--bone);
        font-weight: 600;
    }
    .nav__enlaces a[aria-current="page"] svg { color: var(--accent); }

    .nav__hueco { flex: 1 1 auto; }

    .nav__cta {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        padding-top: 16px;
        border-top: 1px solid var(--rule);
    }
    .nav__cta .btn { width: 100%; justify-content: center; }

    /* El ancla de una seccion ya no se esconde debajo de una barra fija: no hay
       barra arriba. Se deja un respiro y nada mas. */
    html { scroll-padding-top: 24px; }

    /* El cierre de la landing y la ventana de la consola miden contra `.shell`,
       que ya vive dentro del `padding-left` del body: no hay nada que ajustar
       aqui, y dejarlo escrito evita que alguien lo "arregle" restando el ancho
       de la columna dos veces. */
}

/* El hueco solo existe para empujar las acciones al fondo de la columna. En
   movil la caja va en linea con la marca y un elemento vacio que crece la
   partiria en dos. */
.nav__hueco { display: none; }

/* ==========================================================================
   EL CIERRE DE /planes/, CON EL ROBOT

   Sustituye a dos parrafos con un iconito de 18 px delante. Oscar lo dijo
   claro: o es una imagen completa o no es nada. Un triangulo de advertencia al
   lado de cuatro lineas no ilustra -decora- y ademas le ponia cara de error a
   un texto que no lo es: el primero habla de personas fisicas y el segundo de
   los frenos que SI existen.

   EL DIBUJO ES SVG Y NO UN ARCHIVO: pesa menos de 3 KB, escala sin borrarse y
   usa los mismos colores que la hoja. Un PNG se quedaria con los de hoy.

   NO HAY NINGUN COLOR NUEVO: el vino de la superficie, el acento en el visor y
   el emblema, y el verde de severidad baja en el escudo, que es el que esta
   hoja ya usa para decir que algo esta bien.
   ========================================================================== */
.cierre-planes {
    display: grid;
    gap: var(--s3);
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    margin-top: var(--s4);
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
}
@media (min-width: 760px) {
    .cierre-planes {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: var(--s4);
        align-items: center;
        justify-items: stretch;
    }
}
/* El robot no crece con la caja: a partir de cierto tamaño deja de leerse como
   una ilustracion y empieza a parecer el asunto de la seccion, que no lo es. */
.cierre-planes__bot { width: 100%; max-width: 180px; height: auto; }

.cierre-planes__t { display: grid; gap: 12px; min-width: 0; }
.cierre-planes__p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.cierre-planes__p b { color: var(--bone); font-weight: 600; }

/* Las tres garantias, en linea y con marca verde. Estaban dentro del segundo
   parrafo -"No destructivo por omision. Scan Regular es pasivo..."- y ahi se
   leian como el final de una frase larga en vez de como lo que son: tres cosas
   que la herramienta no hace nunca. */
.cierre-planes__l {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.cierre-planes__l li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 6px 12px;
    border: 1px solid rgba(76, 175, 125, .35);
    border-radius: 999px;
    background: rgba(76, 175, 125, .08);
    font-size: 13px;
    color: var(--bone);
}
.cierre-planes__l li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--sev-baja);
}

/* El limite del recorrido de red team. Era un `.aviso-precios` con un escudo
   delante, y el escudo decia "garantia" sobre un parrafo que dice "hasta aqui".
   El filete lo separa del bloque de arriba sin anadirle un significado. */
.nota-limite {
    margin-top: var(--s3);
    padding: 14px 18px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    background: rgba(0, 0, 0, .2);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 92ch;
}
.nota-limite b { color: var(--bone); font-weight: 600; }

/* ==========================================================================
   EL BLOG — 05/10/2026

   La pagina no tiene entradas y lo dice. El bloque de estado va ARRIBA y con el
   color de aviso, no escondido al final: quien entra buscando articulos tiene
   que enterarse en la primera linea, no despues de leerse cuatro titulares que
   no puede abrir.

   LOS CUATRO TEMAS NO SON ENLACES, Y POR ESO NO SON `<a>`. Un titular azul que
   no lleva a ningun sitio es la unica forma de que esta pagina moleste. Cuando
   haya entradas, cada `<li>` pasa a envolver un enlace y estas reglas valen
   igual.
   ========================================================================== */
.estado-blog {
    display: grid;
    gap: 10px;
    justify-items: start;
    margin-bottom: var(--s4);
    padding: 18px 20px;
    border: 1px dashed rgba(245, 166, 35, .4);
    border-radius: var(--r-m);
    background: rgba(245, 166, 35, .06);
}
.estado-blog p { margin: 0; max-width: 78ch; font-size: 14.5px; line-height: 1.7; color: var(--muted); }

.posts { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.post {
    display: grid;
    gap: 9px;
    justify-items: start;
    padding: 22px 20px;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--surf);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.post:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.post__et {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid rgba(224, 85, 97, .35);
    background: rgba(224, 85, 97, .08);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-soft);
}
.post__t {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--bone);
}
.post__d { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    .post:hover { transform: none; }
}