/* Las fuentes NO se cargan con @import: eso serializa la descarga (el navegador no las pide hasta
   terminar de parsear esta hoja). El <link> con preconnect vive en App.razor. */

/* ==========================================================================
   Addon Cloud - hoja de la cara PUBLICA (sitio, planes, contratacion)

   Se carga SOLO en las paginas publicas y SIEMPRE despues de app.css. No
   reemplaza nada: extiende. Los colores, radios, tipografias y el semaforo se
   heredan tal cual de app.css para que el sitio publico y el portal interno
   se lean como un mismo producto; aca solo se agrega lo que el sitio publico
   necesita y el portal no tiene (escala tipografica grande, ritmo de seccion,
   tarjetas de plan, resumen de compra, pie).

   La identidad visual (color y tipografia) sale del sitio corporativo
   www.addon.cl y vive en el :root de app.css. Ver docs/diseno.md.

   Convencion de nombres: TODA clase de este archivo empieza con "p-" (por
   publico). Es la unica forma de garantizar que nunca choque con app.css, que
   ya usa nombres genericos como .tarjeta, .boton, .pasos o .campo. Si una
   pagina publica necesita un control chico y denso, puede usar las clases de
   app.css sin problema: conviven.

   Por que un archivo aparte y no mas lineas en app.css: el portal interno lo
   mantienen otras manos y se despliega junto al agente; el sitio publico
   cambia por razones comerciales (precios, copy, campanas). Separarlos evita
   que un ajuste de marketing obligue a revisar el tablero de operaciones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS

   Todo token nuevo lleva prefijo --pub- para no pisar los de app.css. Los
   tokens de app.css (--navy, --acento, --ok, --warn, --error, --texto,
   --borde, --radio, --sombra) se usan directamente y NO se redefinen.
   -------------------------------------------------------------------------- */

:root {
    /* --- Tipografia ---------------------------------------------------- */

    /* Las tres familias corporativas viven en el :root de app.css. Aca solo se
       les pone un alias con prefijo --pub- para que una pagina publica pueda
       redefinirlas sin tocar el portal. Si Google Fonts no responde, los stacks
       de respaldo son los del sistema: la pagina cambia de tipografia, no se
       rompe. */
    --pub-fuente: var(--fuente);            /* IBM Plex Sans: cuerpo */
    --pub-fuente-titulo: var(--fuente-titulo); /* Outfit: titulares */
    --pub-fuente-mono: var(--fuente-mono);  /* IBM Plex Mono: columnas de montos */

    /* Escala de cuarta menor (1.125) redondeada a valores utiles. Los tres
       tamanos grandes usan clamp() porque el hero y los titulos de seccion se
       ven en un telefono de 360 px y en un monitor de 27": un tamano fijo
       obliga a elegir cual de los dos se ve mal. */
    --pub-t-xs: 0.8125rem;   /* 13px - notas al pie, letra chica legal */
    --pub-t-sm: 0.875rem;    /* 14px - metadatos, ayudas de campo */
    --pub-t-base: 1rem;      /* 16px - cuerpo. No bajar: esto lo lee un gerente en el metro */
    --pub-t-md: 1.125rem;    /* 18px - bajadas, parrafo destacado */
    --pub-t-lg: 1.375rem;    /* 22px - titulo de tarjeta, precio chico */
    --pub-t-xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);      /* 24-30px - subtitulo de seccion */
    --pub-t-2xl: clamp(1.625rem, 1.15rem + 1.9vw, 2.25rem);  /* 26-36px - titulo de seccion */
    --pub-t-3xl: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);     /* 34-52px - titular del hero */
    --pub-t-cifra: clamp(2rem, 1.5rem + 2vw, 2.75rem);       /* 32-44px - monto de plan */

    --pub-alto-titulo: 1.15;
    --pub-alto-texto: 1.6;
    --pub-track-titulo: -0.02em;  /* los titulos grandes necesitan cerrar; el cuerpo no */

    /* --- Espaciado ------------------------------------------------------ */

    /* Escala de 4 px. No inventar valores intermedios: si algo "casi" calza,
       el problema es el componente, no la escala. */
    --pub-e1: 0.25rem;
    --pub-e2: 0.5rem;
    --pub-e3: 0.75rem;
    --pub-e4: 1rem;
    --pub-e5: 1.5rem;
    --pub-e6: 2rem;
    --pub-e7: 3rem;
    --pub-e8: 4rem;

    /* Aire vertical entre secciones. Es el token que mas define si el sitio
       se ve caro o apretado, por eso vive aparte de la escala. */
    --pub-seccion-y: clamp(3rem, 1.75rem + 5vw, 5.5rem);
    --pub-seccion-y-corta: clamp(2rem, 1.25rem + 3vw, 3.5rem);

    /* Margen lateral minimo. 16 px en telefono es el piso que pidio el dueno:
       el texto nunca toca el borde de la pantalla. */
    --pub-gutter: 1rem;

    /* --- Anchos --------------------------------------------------------- */

    --pub-ancho: 1120px;          /* contenedor por defecto */
    --pub-ancho-amplio: 1280px;   /* tabla comparativa, rejillas de 4 */
    --pub-ancho-angosto: 720px;   /* formularios de un paso, paginas legales */
    --pub-medida: 68ch;           /* largo maximo de linea de un parrafo */
    --pub-medida-corta: 58ch;     /* bajadas y textos centrados */

    /* --- Color ----------------------------------------------------------- */

    /* El azul corporativo (--acento, #0741ad) da 8.87:1 sobre blanco. A
       diferencia del teal que ocupaba esta hoja antes, sirve igual de bien
       como linea, como texto y como relleno con blanco encima: ya no hay que
       elegir entre dos grados. --pub-acento-texto se mantiene como NOMBRE
       porque lo consumen decenas de reglas mas abajo, pero hoy apunta al
       mismo azul de la marca. Medido, no supuesto: ver docs/diseno.md. */
    --pub-acento-texto: var(--acento);           /* 8.87:1 sobre blanco */
    --pub-acento-hover: var(--acento-oscuro);    /* 11.37:1 - hover del boton primario */
    --pub-acento-sobre-oscuro: var(--acento-sobre-oscuro); /* 8.25:1 sobre tinta */

    /* Superficies. El sitio publico es mayoritariamente blanco; el gris azulado
       solo aparece para separar secciones sin dibujar lineas por todas partes. */
    --pub-sup: var(--superficie);
    --pub-sup-alterna: var(--fondo);       /* = --fondo de app.css, a proposito */
    --pub-sup-acento: var(--acento-claro);
    --pub-sup-acento-2: #dce6fa;           /* un escalon mas: columna del plan recomendado */
    --pub-sup-error: #fffaf9;              /* tinte apenas rojo del campo invalido */
    --pub-sup-oscura: var(--navy);         /* tinta */

    /* Texto sobre fondo oscuro (cabecera oscura, franja CTA, pie). Ambos pasan
       AA sobre la tinta: 15.25:1 y 8.99:1. */
    --pub-texto-oscuro-1: var(--texto-sobre-tinta);
    --pub-texto-oscuro-2: var(--texto-sobre-tinta-2);

    /* Borde de controles de formulario. 3.33:1 sobre blanco, que es lo que
       exige WCAG 1.4.11 cuando el borde es lo unico que identifica al control.
       Es el azul 60 de la marca y no un gris: el tinte azulado en los campos es
       parte de la identidad. Los bordes decorativos (tarjetas, separadores)
       siguen usando --borde de app.css, que es mas suave porque ahi no
       identifica nada. */
    --pub-borde-campo: var(--azul-60);
    --pub-borde-fuerte: var(--borde-fuerte);  /* separadores algo mas marcados que --borde */

    /* --- Formas --------------------------------------------------------- */

    /* El radio de la marca es 14 px; los otros dos son el escalon arriba y el
       escalon abajo de ese mismo valor. */
    --pub-radio-grande: 18px;  /* tarjetas de plan, paneles del hero */
    --pub-radio: var(--radio); /* 14px, = --radio de app.css */
    --pub-radio-chico: var(--radio-chico);  /* 8px */

    /* Sombras contenidas: difusas, muy transparentes y tenidas de tinta en vez
       de negro. Una sombra negra y dura es lo primero que delata plantilla. */
    --pub-sombra-1: var(--sombra);
    --pub-sombra-2: var(--sombra-alta);

    /* --- Foco ------------------------------------------------------------ */

    /* Anillo de tinta sobre claro (17.21:1) y blanco sobre oscuro (15.25:1).
       Como va con outline-offset, el anillo se dibuja sobre el FONDO de la
       seccion, no sobre el control: por eso el contraste que importa es contra
       el fondo. Se usa la tinta y no el azul de marca a proposito: un anillo
       azul alrededor de un boton azul practicamente no se ve. Las secciones
       oscuras redefinen --pub-foco mas abajo. */
    --pub-foco: var(--navy);
    --pub-foco-grosor: 2px;
    --pub-foco-sep: 2px;

    /* --- Movimiento ------------------------------------------------------ */

    /* Corto y sin rebote. Nada entra volando ni escala al pasar el mouse. */
    --pub-trans: 140ms ease;
}

/* --------------------------------------------------------------------------
   2. RAIZ DEL SITIO

   El layout publico envuelve todo en <div class="p-sitio">. Esa clase reinicia
   la tipografia y el fondo que app.css fijo para el portal (14 px sobre gris)
   sin tocar app.css.
   -------------------------------------------------------------------------- */

.p-sitio {
    font-family: var(--pub-fuente);
    font-size: var(--pub-t-base);
    line-height: var(--pub-alto-texto);
    color: var(--texto);
    background: var(--pub-sup);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Los precios y tipos de cambio se comparan en columna: las cifras deben
       quedar alineadas aunque cambie el digito. */
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
}

/* app.css pinta el body gris para el portal. Si la pagina publica es mas corta
   que la ventana, ese gris asoma bajo el pie. Se corrige desde aca para no
   tener que editar app.css ni App.razor. */
body:has(.p-sitio) {
    background: var(--pub-sup);
    height: auto;
}

.p-sitio main { flex: 1 1 auto; }

/* Sin scroll horizontal: cualquier hijo que se pase de ancho se contiene aca
   en vez de correr la pagina entera. */
.p-sitio,
.p-sitio main { overflow-x: clip; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */

.p-sitio h1,
.p-sitio h2,
.p-sitio h3,
.p-sitio h4 {
    margin: 0 0 var(--pub-e3);
    font-family: var(--pub-fuente-titulo);
    font-weight: 600;
    line-height: var(--pub-alto-titulo);
    letter-spacing: var(--pub-track-titulo);
    color: var(--navy);
    text-wrap: balance;  /* evita la palabra huerfana en titulos de dos lineas */
}

.p-sitio h1 { font-size: var(--pub-t-3xl); font-weight: 700; }
.p-sitio h2 { font-size: var(--pub-t-2xl); }
.p-sitio h3 { font-size: var(--pub-t-lg); letter-spacing: -0.01em; }
.p-sitio h4 { font-size: var(--pub-t-base); letter-spacing: normal; }

.p-sitio p { margin: 0 0 var(--pub-e4); max-width: var(--pub-medida); }
.p-sitio p:last-child { margin-bottom: 0; }

/* :where() a proposito: deja esta regla en especificidad (0,1,0) para que
   cualquier componente que sea un <a> (.p-marca, .p-saltar, .p-boton, .p-medio)
   la sobreescriba con su propia clase, sin pelear con !important. */
.p-sitio :where(a) { color: var(--pub-acento-texto); text-decoration: none; }
.p-sitio :where(a:hover) { text-decoration: underline; text-underline-offset: 2px; }

/* Encima de un titular grande. Corto, en mayusculas, para ubicar al visitante
   antes de que lea el titulo. */
.p-sobretitulo {
    display: block;
    font-size: var(--pub-t-sm);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pub-acento-texto);
    margin-bottom: var(--pub-e3);
}

.p-sobretitulo.tenue { color: var(--texto-suave); }

/* Parrafo de entrada: mas grande que el cuerpo y mas corto de linea. */
.p-bajada {
    font-size: var(--pub-t-md);
    line-height: 1.55;
    color: var(--texto-suave);
    max-width: var(--pub-medida-corta);
}

.p-titular,
.p-titulo-seccion,
.p-titulo-bloque { font-family: var(--pub-fuente-titulo); letter-spacing: var(--pub-track-titulo); }
.p-titular { font-size: var(--pub-t-3xl); font-weight: 700; }
.p-titulo-seccion { font-size: var(--pub-t-2xl); }
.p-titulo-bloque { font-size: var(--pub-t-xl); }

/* Cuerpo largo: terminos, politica de privacidad, ayuda. Siempre alineado a
   la izquierda y con medida limitada. */
.p-prosa { max-width: var(--pub-medida); }
.p-prosa h2 { margin-top: var(--pub-e7); }
.p-prosa h3 { margin-top: var(--pub-e5); }
.p-prosa ul, .p-prosa ol { padding-left: 1.25rem; margin: 0 0 var(--pub-e4); }
.p-prosa li { margin-bottom: var(--pub-e2); }

.p-nota {
    font-size: var(--pub-t-sm);
    color: var(--texto-suave);
    max-width: var(--pub-medida);
}

.p-legal {
    font-size: var(--pub-t-xs);
    color: var(--texto-suave);
    line-height: 1.5;
}

/* Las cifras (precios, tipos de cambio, RUT) se leen mejor con altura de
   linea corta y ancho fijo por digito. */
.p-cifra {
    font-family: var(--pub-fuente-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;  /* cero con barra: distingue O de 0 en un RUT */
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. ACCESIBILIDAD TRANSVERSAL
   -------------------------------------------------------------------------- */

/* Foco visible en TODO lo interactivo. Se usa :focus-visible para no molestar
   al que hace click, y :focus como respaldo en navegadores viejos. */
.p-sitio :focus-visible {
    outline: var(--pub-foco-grosor) solid var(--pub-foco);
    outline-offset: var(--pub-foco-sep);
    border-radius: var(--pub-radio-chico);
}

/* En cualquier superficie oscura el anillo cambia a blanco. */
.p-cabecera.oscura,
.p-seccion.oscura,
.p-cta,
.p-pie { --pub-foco: #ffffff; }

/* Texto solo para lectores de pantalla. Lo necesitan la tabla comparativa
   (donde un simbolo reemplaza a "incluido") y los pasos completados. */
.p-solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Saltar al contenido: primer elemento enfocable del documento. */
.p-saltar {
    position: absolute;
    left: var(--pub-e4);
    top: -100px;
    z-index: 100;
    background: var(--navy);
    color: var(--pub-texto-oscuro-1);
    padding: var(--pub-e3) var(--pub-e4);
    border-radius: 0 0 var(--pub-radio-chico) var(--pub-radio-chico);
    font-size: var(--pub-t-sm);
    font-weight: 600;
    transition: top var(--pub-trans);
}

.p-saltar:focus { top: 0; text-decoration: none; }

/* --------------------------------------------------------------------------
   5. LAYOUT: CONTENEDOR, SECCION, REJILLAS
   -------------------------------------------------------------------------- */

.p-contenedor {
    width: 100%;
    max-width: var(--pub-ancho);
    margin-inline: auto;
    padding-inline: var(--pub-gutter);
}

.p-contenedor.angosto { max-width: var(--pub-ancho-angosto); }
.p-contenedor.amplio { max-width: var(--pub-ancho-amplio); }

.p-seccion { padding-block: var(--pub-seccion-y); }
.p-seccion.corta { padding-block: var(--pub-seccion-y-corta); }
.p-seccion.sin-arriba { padding-top: 0; }
.p-seccion.sin-abajo { padding-bottom: 0; }

/* Gris muy tenue para separar una seccion de la siguiente sin dibujar una
   linea. Se alterna; dos grises seguidos no separan nada. */
.p-seccion.alterna { background: var(--pub-sup-alterna); }
.p-seccion.acento { background: var(--pub-sup-acento); }

.p-seccion.oscura {
    background: var(--pub-sup-oscura);
    color: var(--pub-texto-oscuro-1);
}

.p-seccion.oscura h1,
.p-seccion.oscura h2,
.p-seccion.oscura h3,
.p-seccion.oscura h4 { color: var(--pub-texto-oscuro-1); }

.p-seccion.oscura a { color: var(--pub-acento-sobre-oscuro); }
.p-seccion.oscura .p-bajada { color: var(--pub-texto-oscuro-1); }
.p-seccion.oscura .p-sobretitulo { color: var(--pub-acento-sobre-oscuro); }

/* Linea divisoria entre secciones del mismo color de fondo. */
.p-seccion.con-linea { border-top: 1px solid var(--borde); }

/* Cabecera de seccion. Centrada SOLO aca: un titulo y una bajada de dos
   lineas. Nunca centrar parrafos largos. */
.p-seccion-cabecera {
    max-width: var(--pub-medida-corta);
    margin: 0 auto var(--pub-e7);
    text-align: center;
}

.p-seccion-cabecera .p-bajada { margin-inline: auto; }
.p-seccion-cabecera > :last-child { margin-bottom: 0; }

/* Variante alineada a la izquierda, preferible cuando abajo viene una tabla o
   una lista larga: el ojo ya esta en el margen izquierdo. */
.p-seccion-cabecera.izquierda {
    margin-inline: 0;
    text-align: left;
    max-width: var(--pub-medida);
}

.p-seccion-cabecera.izquierda .p-bajada { margin-inline: 0; }

/* Rejillas. auto-fit + minmax hace que apilen solas sin media query. */
.p-rejilla { display: grid; gap: var(--pub-e5); }
.p-rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.p-rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.p-rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Dos columnas asimetricas: texto + imagen/panel. */
.p-partido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--pub-e7);
    align-items: center;
}

.p-pila { display: flex; flex-direction: column; gap: var(--pub-e3); }
.p-fila { display: flex; flex-wrap: wrap; gap: var(--pub-e3); align-items: center; }
.p-fila.entre { justify-content: space-between; }
.p-fila.centrada { justify-content: center; }

/* --------------------------------------------------------------------------
   6. BOTONES

   app.css ya tiene .boton, pero dimensionado para un tablero denso (13 px,
   alto 30 px). En el sitio publico el CTA es el objeto mas importante de la
   pagina y ademas se toca con el pulgar: 44 px de alto minimo.
   -------------------------------------------------------------------------- */

.p-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pub-e2);
    min-height: 44px;
    padding: var(--pub-e3) var(--pub-e5);
    border: 1px solid transparent;
    border-radius: var(--pub-radio-chico);
    background: var(--pub-sup);
    color: var(--texto);
    font-family: inherit;
    font-size: var(--pub-t-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--pub-trans), border-color var(--pub-trans), color var(--pub-trans);
}

.p-boton:hover { text-decoration: none; }
.p-boton:disabled,
.p-boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Primario: el unico boton lleno de la pantalla. Si hay dos, ninguno es
   primario. Va relleno con el azul de marca y texto blanco: 8.87:1. */
.p-boton.primario {
    background: var(--pub-acento-texto);
    border-color: var(--pub-acento-texto);
    color: #fff;
}

.p-boton.primario:hover:not(:disabled) {
    background: var(--pub-acento-hover);
    border-color: var(--pub-acento-hover);
}

.p-boton.oscuro {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.p-boton.oscuro:hover:not(:disabled) { background: var(--navy-claro); border-color: var(--navy-claro); }

/* Secundario: contorno. Es el "ver planes" al lado del "crear cuenta". */
.p-boton.contorno {
    background: transparent;
    border-color: var(--pub-borde-campo);
    color: var(--navy);
}

.p-boton.contorno:hover:not(:disabled) { background: var(--pub-sup-alterna); border-color: var(--navy); }

/* Sobre franja oscura el contorno se invierte. */
.p-seccion.oscura .p-boton.contorno,
.p-cta .p-boton.contorno,
.p-cabecera.oscura .p-boton.contorno {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.p-seccion.oscura .p-boton.contorno:hover,
.p-cta .p-boton.contorno:hover,
.p-cabecera.oscura .p-boton.contorno:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

/* Terciario: parece un enlace pero tiene area de toque de boton. */
.p-boton.plano {
    background: transparent;
    border-color: transparent;
    color: var(--pub-acento-texto);
    padding-inline: var(--pub-e2);
}

.p-boton.plano:hover:not(:disabled) { background: var(--pub-sup-acento); }

.p-boton.grande { min-height: 52px; padding: var(--pub-e4) var(--pub-e6); font-size: var(--pub-t-md); }
.p-boton.chico { min-height: 36px; padding: var(--pub-e2) var(--pub-e3); font-size: var(--pub-t-sm); }
.p-boton.ancho { width: 100%; }

/* Grupo de CTAs del hero o del cierre. */
.p-acciones { display: flex; flex-wrap: wrap; gap: var(--pub-e3); align-items: center; }
.p-acciones.centradas { justify-content: center; }

/* --------------------------------------------------------------------------
   7. CABECERA PUBLICA
   -------------------------------------------------------------------------- */

.p-cabecera {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .94);
    /* El blur es suave y solo para que el texto no se pegue al pasar por
       debajo. No es un efecto "glass": el fondo sigue siendo blanco solido. */
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--borde);
}

.p-cabecera.oscura {
    background: var(--navy);
    border-bottom-color: var(--linea-sobre-tinta);
    color: var(--pub-texto-oscuro-1);
}

.p-cabecera-barra {
    display: flex;
    /* Valvula de seguridad: si la marca, el CTA y el boton de menu no caben en
       una linea (marca larga, telefono de 320 px, texto ampliado por el
       usuario), la barra envuelve. Recortar el boton de contratar seria perder
       la conversion justo en la pantalla mas usada. */
    flex-wrap: wrap;
    row-gap: var(--pub-e2);
    align-items: center;
    justify-content: space-between;
    gap: var(--pub-e4);
    min-height: 68px;
}

/* --- Marca --- */

.p-marca {
    display: inline-flex;
    align-items: center;
    gap: var(--pub-e3);
    color: var(--navy);
    flex: 0 1 auto;
    min-width: 0;
}

.p-marca:hover { text-decoration: none; }

.p-marca-logo {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: var(--pub-acento-texto);  /* azul de marca: 8.87:1 con blanco encima */
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: -.02em;
}

.p-marca-nombre { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; }
.p-marca-bajada { display: block; font-size: var(--pub-t-xs); font-weight: 400; color: var(--texto-suave); }

.p-cabecera.oscura .p-marca { color: var(--pub-texto-oscuro-1); }
.p-cabecera.oscura .p-marca-bajada { color: var(--pub-texto-oscuro-2); }

/* --- Navegacion --- */

.p-nav {
    display: flex;
    align-items: center;
    gap: var(--pub-e2);
    flex: 1 1 auto;
    justify-content: center;
}

.p-nav a {
    padding: var(--pub-e2) var(--pub-e3);
    border-radius: var(--pub-radio-chico);
    font-size: var(--pub-t-sm);
    font-weight: 500;
    color: var(--texto);
    white-space: nowrap;
}

.p-nav a:hover { background: var(--pub-sup-alterna); color: var(--navy); text-decoration: none; }

/* La pagina actual no se marca solo con color: lleva peso 600 y un filete
   bajo el rotulo. Asi sigue siendo distinguible en escala de grises. */
.p-nav a[aria-current="page"],
.p-nav a.activo {
    color: var(--navy);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--acento);
    border-radius: var(--pub-radio-chico) var(--pub-radio-chico) 0 0;
}

.p-cabecera.oscura .p-nav a { color: var(--pub-texto-oscuro-1); }
.p-cabecera.oscura .p-nav a:hover { background: rgba(255, 255, 255, .1); color: var(--pub-texto-oscuro-1); }
.p-cabecera.oscura .p-nav a[aria-current="page"],
.p-cabecera.oscura .p-nav a.activo { color: var(--pub-texto-oscuro-1); box-shadow: inset 0 -2px 0 var(--pub-acento-sobre-oscuro); }

.p-cabecera-acciones { display: flex; align-items: center; gap: var(--pub-e2); flex: 0 0 auto; margin-left: auto; }

/* Boton de menu: oculto en escritorio, aparece bajo 900 px. El componente
   Blazor alterna la clase .abierto en .p-nav y aria-expanded aca. */
.p-menu-boton {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--pub-e2);
    min-height: 44px;
    min-width: 44px;
    padding: var(--pub-e2) var(--pub-e3);
    border: 1px solid var(--pub-borde-campo);
    border-radius: var(--pub-radio-chico);
    background: transparent;
    color: var(--navy);
    font-family: inherit;
    font-size: var(--pub-t-sm);
    font-weight: 600;
    cursor: pointer;
}

/* Tres lineas dibujadas con bordes: sin icono externo y sin emoji. */
.p-menu-icono {
    width: 16px; height: 2px;
    background: currentColor;
    position: relative;
    display: block;
}

.p-menu-icono::before,
.p-menu-icono::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px; height: 2px;
    background: currentColor;
}

.p-menu-icono::before { top: -5px; }
.p-menu-icono::after { top: 5px; }

/* Cinta de aviso sobre la cabecera (lanzamiento, promocion, mantencion). */
.p-cinta {
    background: var(--navy-oscuro);
    color: var(--pub-texto-oscuro-1);
    font-size: var(--pub-t-sm);
    text-align: center;
    padding: var(--pub-e2) var(--pub-gutter);
}

.p-cinta a { color: var(--pub-acento-sobre-oscuro); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.p-hero {
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--pub-seccion-y);
    background: var(--pub-sup);
}

/* Variante con un degradado MUY leve de blanco a gris del sistema. No es
   decoracion: separa el hero de la primera seccion sin una linea dura. */
.p-hero.suave {
    background: linear-gradient(180deg, var(--pub-sup) 0%, var(--pub-sup-alterna) 100%);
}

.p-hero.oscuro {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-oscuro) 100%);
    color: var(--pub-texto-oscuro-1);
    --pub-foco: #ffffff;
}

.p-hero.oscuro h1,
.p-hero.oscuro .p-hero-titulo { color: var(--pub-texto-oscuro-1); }
.p-hero.oscuro .p-bajada,
.p-hero.oscuro .p-hero-nota { color: var(--pub-texto-oscuro-1); }
.p-hero.oscuro .p-sobretitulo { color: var(--pub-acento-sobre-oscuro); }

/* Columna de texto. Alineada a la izquierda por defecto: un titular publicitario
   centrado esta bien, tres parrafos centrados no. */
.p-hero-contenido { max-width: 42rem; }

.p-hero-titulo {
    font-family: var(--pub-fuente-titulo);
    font-size: var(--pub-t-3xl);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--navy);
    margin: 0 0 var(--pub-e4);
    text-wrap: balance;
}

.p-hero .p-bajada { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); max-width: 34rem; }
.p-hero .p-acciones { margin-top: var(--pub-e6); }

/* Linea bajo los botones: "sin tarjeta", "cancela cuando quieras". */
.p-hero-nota {
    margin-top: var(--pub-e4);
    font-size: var(--pub-t-sm);
    color: var(--texto-suave);
}

/* Hero de dos columnas: texto + panel (captura, tarjeta de tipo de cambio). */
.p-hero.con-panel .p-contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: var(--pub-e7);
    align-items: center;
}

.p-hero-panel {
    background: var(--pub-sup);
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio-grande);
    box-shadow: var(--pub-sombra-2);
    padding: var(--pub-e5);
    min-width: 0;
}

.p-hero.oscuro .p-hero-panel { border-color: var(--linea-sobre-tinta); color: var(--texto); }
.p-hero-panel img { max-width: 100%; height: auto; display: block; border-radius: var(--pub-radio-chico); }

/* --------------------------------------------------------------------------
   9. CONFIANZA Y SEGURIDAD

   El bloque que responde la unica pregunta que importa: por que dejaria que
   este software escriba en mi ERP.
   -------------------------------------------------------------------------- */

.p-confianza { display: grid; gap: var(--pub-e6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.p-confianza-item { display: flex; flex-direction: column; gap: var(--pub-e3); }

/* Contenedor del icono. El SVG lo pone el componente Razor (inline, currentColor).
   Prohibido emoji: un emoji de candado en una seccion de seguridad resta
   exactamente la confianza que la seccion intenta construir. */
.p-confianza-icono {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: var(--pub-radio-chico);
    background: var(--pub-sup-acento);
    color: var(--pub-acento-texto);
    display: grid;
    place-items: center;
}

.p-confianza-icono svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-confianza-titulo { font-size: var(--pub-t-base); font-weight: 600; color: var(--navy); margin: 0; }
.p-confianza-texto { font-size: var(--pub-t-sm); color: var(--texto-suave); margin: 0; max-width: 40ch; }

.p-seccion.oscura .p-confianza-icono { background: rgba(143, 182, 247, .16); color: var(--pub-acento-sobre-oscuro); }
.p-seccion.oscura .p-confianza-titulo { color: var(--pub-texto-oscuro-1); }
.p-seccion.oscura .p-confianza-texto { color: var(--pub-texto-oscuro-1); }

/* Fila de cifras duras: "365 dias cargados", "6 sociedades", "99,9% ...". */
.p-datos { display: grid; gap: var(--pub-e5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.p-dato { border-left: 3px solid var(--acento); padding-left: var(--pub-e4); }
.p-dato-cifra {
    display: block;
    font-family: var(--pub-fuente-titulo);
    font-size: var(--pub-t-xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.p-dato-rotulo { display: block; font-size: var(--pub-t-sm); color: var(--texto-suave); margin-top: var(--pub-e1); }

.p-seccion.oscura .p-dato-cifra { color: var(--pub-texto-oscuro-1); }
.p-seccion.oscura .p-dato-rotulo { color: var(--pub-texto-oscuro-2); }

/* Franja de compatibilidad: "Funciona con SAP Business One 9.3 / 10.0". */
.p-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pub-e5) var(--pub-e7);
}

.p-logos img { height: 28px; width: auto; opacity: .7; }
.p-logos-rotulo { width: 100%; text-align: center; font-size: var(--pub-t-sm); color: var(--texto-suave); }

/* Cita breve. Una sola por pagina; si hay tres, no se lee ninguna. */
.p-cita {
    border-left: 3px solid var(--acento);
    padding-left: var(--pub-e5);
    margin: 0;
    max-width: var(--pub-medida);
}

.p-cita p { font-size: var(--pub-t-md); color: var(--texto); line-height: 1.55; }
.p-cita footer { font-size: var(--pub-t-sm); color: var(--texto-suave); }
.p-cita footer strong { color: var(--navy); font-weight: 600; display: block; }

/* --------------------------------------------------------------------------
   10. LISTA DE CHEQUEO

   Vinetas con check dibujado en CSS. Se usa en las tarjetas de plan y en
   cualquier lista de "que incluye". Sin emoji y sin imagenes.
   -------------------------------------------------------------------------- */

.p-chequeo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pub-e3); }

.p-chequeo li {
    position: relative;
    padding-left: 1.75rem;
    font-size: var(--pub-t-sm);
    line-height: 1.5;
    color: var(--texto);
}

/* El check es un rectangulo sin dos lados, rotado. Nitido en cualquier zoom. */
.p-chequeo li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .45em;
    width: 6px; height: 11px;
    border: solid var(--pub-acento-texto);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Item no incluido: la vineta cambia de FORMA (guion en vez de check), no solo
   de color. Se distingue igual en escala de grises. */
.p-chequeo li.no { color: var(--texto-suave); }
.p-chequeo li.no::before {
    top: .72em;
    width: 11px; height: 0;
    border-width: 0 0 2px 0;
    border-color: var(--texto-suave);
    transform: none;
}

.p-chequeo.compacta { gap: var(--pub-e2); }
.p-chequeo.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.p-seccion.oscura .p-chequeo li { color: var(--pub-texto-oscuro-1); }
.p-seccion.oscura .p-chequeo li::before { border-color: var(--pub-acento-sobre-oscuro); }

/* --------------------------------------------------------------------------
   11. CICLO DE FACTURACION (control segmentado mensual / anual)
   -------------------------------------------------------------------------- */

.p-ciclo {
    display: inline-flex;
    gap: var(--pub-e1);
    padding: var(--pub-e1);
    background: var(--pub-sup-alterna);
    border: 1px solid var(--borde);
    border-radius: 999px;
}

.p-ciclo-opcion {
    display: inline-flex;
    align-items: center;
    gap: var(--pub-e2);
    min-height: 40px;
    padding: var(--pub-e2) var(--pub-e5);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--texto-suave);
    font-family: inherit;
    font-size: var(--pub-t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pub-trans), color var(--pub-trans);
}

.p-ciclo-opcion:hover { color: var(--navy); }

/* El estado activo va por aria-pressed para que el marcado sea accesible por
   construccion y no por una clase decorativa. Se acepta .activo como respaldo. */
.p-ciclo-opcion[aria-pressed="true"],
.p-ciclo-opcion.activo {
    background: var(--pub-sup);
    border-color: var(--pub-borde-fuerte);
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(10, 27, 61, .08);
}

/* Etiqueta del ahorro anual ("2 meses gratis"). */
.p-ciclo-ahorro {
    font-size: var(--pub-t-xs);
    font-weight: 700;
    color: var(--ok);
    background: var(--ok-suave);
    border: 1px solid var(--ok-borde);
    border-radius: 999px;
    padding: 1px var(--pub-e2);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. TARJETA DE PLAN
   -------------------------------------------------------------------------- */

.p-planes {
    display: grid;
    gap: var(--pub-e5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    /* Alineadas arriba para que la tarjeta destacada pueda ser mas alta sin
       estirar a las demas. */
    align-items: stretch;
}

.p-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pub-sup);
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio-grande);
    padding: var(--pub-e5);
    box-shadow: var(--pub-sombra-1);
    min-width: 0;
}

/* Destacada: borde azul de 2 px, sombra algo mayor y cinta. Tres senales, no
   solo el color, porque el plan recomendado tiene que leerse tambien impreso
   en blanco y negro o por un usuario con daltonismo. */
.p-plan.destacado {
    border: 2px solid var(--pub-acento-texto);
    box-shadow: var(--pub-sombra-2);
    padding: var(--pub-e5);
}

.p-plan-cinta {
    position: absolute;
    top: 0;
    left: var(--pub-e5);
    transform: translateY(-50%);
    background: var(--pub-acento-texto);  /* azul de marca con blanco encima */
    color: #fff;
    font-size: var(--pub-t-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: var(--pub-e1) var(--pub-e3);
    border-radius: 999px;
    white-space: nowrap;
}

.p-plan-nombre { font-size: var(--pub-t-lg); font-weight: 600; color: var(--navy); margin: 0 0 var(--pub-e2); }
.p-plan-para { font-size: var(--pub-t-sm); color: var(--texto-suave); margin: 0 0 var(--pub-e5); min-height: 2.9em; }

/* Bloque del precio. La unidad ("por sociedad SAP") va PEGADA al monto: es la
   parte del modelo de negocio que el cliente tiene que entender de una y sin
   preguntar. */
.p-plan-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--pub-e2); margin-bottom: var(--pub-e2); }

.p-plan-monto {
    font-family: var(--pub-fuente-titulo);
    font-size: var(--pub-t-cifra);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.p-plan-periodo { font-size: var(--pub-t-base); color: var(--texto-suave); font-weight: 500; }

.p-plan-unidad {
    display: block;
    font-size: var(--pub-t-sm);
    color: var(--texto-suave);
    margin-bottom: var(--pub-e2);
}

/* Precio de lista tachado cuando hay descuento partner o anual. */
.p-plan-antes {
    font-family: var(--pub-fuente-mono);
    font-size: var(--pub-t-sm);
    color: var(--texto-suave);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-variant-numeric: tabular-nums;
}

.p-plan-ahorro {
    display: inline-flex;
    align-items: center;
    gap: var(--pub-e1);
    font-size: var(--pub-t-xs);
    font-weight: 700;
    color: var(--ok);
    background: var(--ok-suave);
    border: 1px solid var(--ok-borde);
    border-radius: 999px;
    padding: 1px var(--pub-e2);
}

/* Fila del ahorro. Va SIEMPRE en todas las tarjetas de una misma comparativa,
   vacia si el plan no tiene descuento: reserva el alto y deja las listas de
   caracteristicas a la misma altura. Sin esto, la tarjeta con descuento
   empuja su lista 30 px mas abajo que las vecinas y la fila se ve torcida. */
.p-plan-ahorro-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pub-e2);
    min-height: 1.75rem;
    margin-bottom: var(--pub-e2);
}

.p-plan-separador { border: 0; border-top: 1px solid var(--borde); margin: var(--pub-e5) 0; }

/* La lista crece y empuja el boton al fondo: todos los CTAs quedan alineados
   aunque las listas tengan distinto largo. */
.p-plan .p-chequeo { flex: 1 1 auto; margin-bottom: var(--pub-e5); }
.p-plan-pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--pub-e3); }
.p-plan-pie .p-nota { font-size: var(--pub-t-xs); text-align: center; }

/* Variante "a medida" / partner: sin precio, con contacto. */
.p-plan.neutro { background: var(--pub-sup-alterna); box-shadow: none; }

/* Escalon de descuento por volumen (partners). */
.p-escalones { display: grid; gap: var(--pub-e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.p-escalon {
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio);
    padding: var(--pub-e4);
    background: var(--pub-sup);
}

.p-escalon.activo { border-color: var(--acento); background: var(--pub-sup-acento); }
.p-escalon-titulo { font-size: var(--pub-t-sm); font-weight: 600; color: var(--texto-suave); margin: 0 0 var(--pub-e1); }
.p-escalon-cifra { display: block; font-family: var(--pub-fuente-titulo); font-size: var(--pub-t-lg); font-weight: 700; color: var(--navy); line-height: 1.2; font-variant-numeric: tabular-nums; }
.p-escalon-detalle { display: block; font-size: var(--pub-t-xs); color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   13. TABLA COMPARATIVA
   -------------------------------------------------------------------------- */

/* El wrapper es el que hace scroll, no la pagina. tabindex="0" en el markup
   para que tambien se pueda desplazar con teclado. */
.p-comparativa {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio);
    background: var(--pub-sup);
    -webkit-overflow-scrolling: touch;
}

table.p-tabla-comparativa {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: var(--pub-t-sm);
}

table.p-tabla-comparativa caption {
    caption-side: top;
    text-align: left;
    padding: var(--pub-e4);
    font-size: var(--pub-t-sm);
    color: var(--texto-suave);
}

table.p-tabla-comparativa thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pub-sup-alterna);
    text-align: center;
    font-size: var(--pub-t-sm);
    font-weight: 600;
    color: var(--navy);
    padding: var(--pub-e4) var(--pub-e3);
    border-bottom: 1px solid var(--pub-borde-fuerte);
    white-space: nowrap;
}

table.p-tabla-comparativa thead th:first-child { text-align: left; }

/* Columna de caracteristicas pegada a la izquierda: en telefono el usuario
   desliza las columnas de plan y nunca pierde de vista que esta comparando. */
table.p-tabla-comparativa th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--pub-sup);
    text-align: left;
    font-weight: 500;
    color: var(--texto);
    padding: var(--pub-e3) var(--pub-e4);
    border-bottom: 1px solid var(--borde-suave);
    border-right: 1px solid var(--borde-suave);
    min-width: 220px;
}

table.p-tabla-comparativa td {
    padding: var(--pub-e3);
    text-align: center;
    border-bottom: 1px solid var(--borde-suave);
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

table.p-tabla-comparativa tbody tr:last-child th,
table.p-tabla-comparativa tbody tr:last-child td { border-bottom: 0; }

/* Columna del plan recomendado: se tine muy suave para seguir la tarjeta. */
table.p-tabla-comparativa .destacada { background: var(--pub-sup-acento); }
table.p-tabla-comparativa thead th.destacada { background: var(--pub-sup-acento-2); }

/* Grupo de filas ("Modulo", "Soporte", "Facturacion"). */
table.p-tabla-comparativa tbody th.p-grupo,
table.p-tabla-comparativa .p-grupo td {
    background: var(--pub-sup-alterna);
    font-size: var(--pub-t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-suave);
    text-align: left;
}

/* Si / No. Nunca solo color: el simbolo es distinto (check vs guion) y va
   acompanado de texto para lectores de pantalla, que el Razor debe incluir. */
.p-marca-si,
.p-marca-no {
    display: inline-block;
    width: 18px; height: 18px;
    position: relative;
    vertical-align: middle;
}

.p-marca-si::before {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 11px;
    border: solid var(--ok);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.p-marca-no::before {
    content: "";
    position: absolute;
    left: 3px; top: 8px;
    width: 12px; height: 0;
    border-bottom: 2px solid var(--texto-suave);
}

/* --------------------------------------------------------------------------
   14. PREGUNTAS FRECUENTES

   Usa <details>/<summary> nativos: abren sin JavaScript, funcionan con teclado
   y el buscador del navegador (Ctrl+F) encuentra el contenido.
   -------------------------------------------------------------------------- */

.p-faq { max-width: var(--pub-medida); border-top: 1px solid var(--borde); }

.p-faq details { border-bottom: 1px solid var(--borde); }

.p-faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pub-e4);
    padding: var(--pub-e4) 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    list-style: none;
}

.p-faq summary::-webkit-details-marker { display: none; }

/* Signo + que gira a - al abrir: dos lineas, sin icono ni emoji. */
.p-faq summary::after {
    content: "";
    flex: 0 0 14px;
    width: 14px; height: 14px;
    margin-top: .3em;
    background:
        linear-gradient(currentColor, currentColor) center/14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 14px no-repeat;
    color: var(--pub-acento-texto);
}

.p-faq details[open] summary::after {
    /* Solo la barra horizontal: la vertical desaparece al rotar y escalar. */
    background: linear-gradient(currentColor, currentColor) center/14px 2px no-repeat;
}

.p-faq details[open] summary { padding-bottom: var(--pub-e2); }
.p-faq-respuesta { padding: 0 0 var(--pub-e5); color: var(--texto-suave); max-width: var(--pub-medida); }

/* --------------------------------------------------------------------------
   15. FORMULARIO DE VARIOS PASOS
   -------------------------------------------------------------------------- */

/* Barra de pasos. <ol> con un <li> por paso. */
.p-pasos {
    display: flex;
    list-style: none;
    margin: 0 0 var(--pub-e6);
    padding: 0;
    gap: 0;
    counter-reset: paso;
}

.p-paso {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pub-e2);
    text-align: center;
    min-width: 0;
    padding-inline: var(--pub-e1);
}

/* Linea que une un paso con el anterior. Se dibuja detras del circulo. */
.p-paso + .p-paso::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--borde);
    z-index: 0;
}

.p-paso.hecho::before,
.p-paso.activo::before { background: var(--acento); }

.p-paso-num {
    position: relative;
    z-index: 1;
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    border: 2px solid var(--borde);
    background: var(--pub-sup);
    color: var(--texto-suave);
    display: grid;
    place-items: center;
    font-family: var(--pub-fuente-mono);
    font-size: var(--pub-t-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.p-paso-rotulo { font-size: var(--pub-t-sm); color: var(--texto-suave); line-height: 1.3; }

/* Paso actual: circulo lleno + rotulo en negrita. El <li> debe llevar
   aria-current="step" para que tambien se anuncie. */
.p-paso.activo .p-paso-num { border-color: var(--pub-acento-texto); background: var(--pub-acento-texto); color: #fff; }
.p-paso.activo .p-paso-rotulo { color: var(--navy); font-weight: 600; }

/* Paso completado: el numero se reemplaza por un check. El <li> debe llevar
   un <span class="p-solo-lectores">completado</span>, porque el color del
   circulo no se lo cuenta a nadie. */
.p-paso.hecho .p-paso-num { border-color: var(--ok); background: var(--ok); color: transparent; }

.p-paso.hecho .p-paso-num::after {
    content: "";
    position: absolute;
    left: 10px; top: 6px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- Reja del flujo de compra: formulario + resumen --- */

.p-flujo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--pub-e6);
    align-items: start;
}

.p-flujo-principal { min-width: 0; }
.p-flujo-lateral { min-width: 0; position: sticky; top: calc(68px + var(--pub-e4)); }

/* Panel blanco que contiene un paso del formulario. */
.p-panel {
    background: var(--pub-sup);
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio);
    box-shadow: var(--pub-sombra-1);
}

.p-panel-cabecera { padding: var(--pub-e5) var(--pub-e5) 0; }
.p-panel-cabecera h2 { font-size: var(--pub-t-xl); margin-bottom: var(--pub-e2); }
.p-panel-cuerpo { padding: var(--pub-e5); }
.p-panel-pie {
    padding: var(--pub-e4) var(--pub-e5);
    border-top: 1px solid var(--borde-suave);
    background: var(--pub-sup-alterna);
    border-radius: 0 0 var(--pub-radio) var(--pub-radio);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pub-e3);
    align-items: center;
    justify-content: space-between;
}

/* Grupo de campos con titulo. */
.p-grupo-campos { border: 0; margin: 0 0 var(--pub-e6); padding: 0; min-width: 0; }
.p-grupo-campos > legend {
    padding: 0;
    font-size: var(--pub-t-base);
    font-weight: 600;
    color: var(--navy);
    margin-bottom: var(--pub-e4);
}

.p-campos { display: grid; gap: var(--pub-e4); }
.p-campos.dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.p-campos .ancho-total { grid-column: 1 / -1; }

/* --- Campo --- */

.p-campo { display: flex; flex-direction: column; gap: var(--pub-e1); min-width: 0; }

.p-campo > label {
    font-size: var(--pub-t-sm);
    font-weight: 600;
    color: var(--texto);
}

/* Asterisco de obligatorio. El markup debe poner
   <span class="p-obligatorio" aria-hidden="true">*</span> y ademas required en
   el input: el asterisco es para el que ve, required para el que escucha. */
.p-obligatorio { color: var(--error); margin-left: 2px; }

.p-campo input[type="text"],
.p-campo input[type="email"],
.p-campo input[type="tel"],
.p-campo input[type="password"],
.p-campo input[type="number"],
.p-campo input[type="search"],
.p-campo input[type="url"],
.p-campo input[type="date"],
.p-campo select,
.p-campo textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--pub-e3);
    border: 1px solid var(--pub-borde-campo);
    border-radius: var(--pub-radio-chico);
    background: var(--pub-sup);
    color: var(--texto);
    font-family: inherit;
    font-size: var(--pub-t-base);  /* 16px o iOS hace zoom al enfocar */
    line-height: 1.4;
    transition: border-color var(--pub-trans), box-shadow var(--pub-trans);
}

.p-campo textarea { min-height: 110px; resize: vertical; }

.p-campo select {
    /* Flecha dibujada como data-uri geometrico; no depende de una fuente de
       iconos ni de un emoji. */
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234c5e7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--pub-e3) center;
    background-size: 12px 8px;
}

.p-campo input:focus-visible,
.p-campo select:focus-visible,
.p-campo textarea:focus-visible {
    outline: var(--pub-foco-grosor) solid var(--pub-foco);
    outline-offset: 1px;
    border-color: var(--navy);
}

.p-campo input:disabled,
.p-campo select:disabled,
.p-campo textarea:disabled { background: var(--pub-sup-alterna); color: var(--texto-suave); cursor: not-allowed; }

.p-campo input::placeholder,
.p-campo textarea::placeholder { color: var(--texto-tenue); }

/* Campos con cifra: RUT, monto, cantidad de sociedades. */
.p-campo input.p-cifra,
.p-campo.cifra input { font-family: var(--pub-fuente-mono); font-variant-numeric: tabular-nums; }

/* Prefijo/sufijo pegado al campo ("$", "UF", "@empresa.cl"). */
.p-campo-adosado { display: flex; align-items: stretch; }
.p-campo-adosado > input { border-radius: 0 var(--pub-radio-chico) var(--pub-radio-chico) 0; }
.p-campo-adosado > .p-adosado {
    display: flex;
    align-items: center;
    padding-inline: var(--pub-e3);
    border: 1px solid var(--pub-borde-campo);
    border-right: 0;
    border-radius: var(--pub-radio-chico) 0 0 var(--pub-radio-chico);
    background: var(--pub-sup-alterna);
    color: var(--texto-suave);
    font-size: var(--pub-t-sm);
    font-weight: 600;
    white-space: nowrap;
}

.p-ayuda { font-size: var(--pub-t-xs); color: var(--texto-suave); }

/* Error de campo. Rojo + borde grueso + un simbolo, nunca solo rojo. El
   markup debe usar aria-invalid="true" y aria-describedby apuntando al
   mensaje. */
.p-campo.error input,
.p-campo.error select,
.p-campo.error textarea,
.p-campo [aria-invalid="true"] {
    border-color: var(--error);
    border-width: 2px;
    background: var(--pub-sup-error);
}

.p-campo-error,
.p-sitio .validation-message {
    display: flex;
    align-items: flex-start;
    gap: var(--pub-e2);
    font-size: var(--pub-t-sm);
    font-weight: 500;
    color: var(--error);
}

/* Circulo con "!" dibujado en CSS delante del mensaje. */
.p-campo-error::before,
.p-sitio .validation-message::before {
    content: "!";
    flex: 0 0 16px;
    width: 16px; height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* --- Casilla y opciones --- */

.p-check { display: flex; align-items: flex-start; gap: var(--pub-e3); font-size: var(--pub-t-sm); }
.p-check input[type="checkbox"],
.p-check input[type="radio"] {
    width: 20px; height: 20px;
    flex: 0 0 20px;
    margin: 1px 0 0;
    accent-color: var(--pub-acento-texto);
    cursor: pointer;
}
.p-check label { cursor: pointer; line-height: 1.45; }

/* Tarjeta-opcion: elegir ciclo, plan, medio de pago o tipo de cliente. El
   <input> real va dentro y queda visible (no se oculta) porque el radio es la
   confirmacion mas clara de "esto quedo elegido". */
.p-opciones { display: grid; gap: var(--pub-e3); }
.p-opciones.dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.p-opcion {
    display: flex;
    align-items: flex-start;
    gap: var(--pub-e3);
    padding: var(--pub-e4);
    border: 1px solid var(--pub-borde-campo);
    border-radius: var(--pub-radio);
    background: var(--pub-sup);
    cursor: pointer;
    transition: border-color var(--pub-trans), background var(--pub-trans);
}

.p-opcion:hover { border-color: var(--navy); }

.p-opcion input[type="radio"],
.p-opcion input[type="checkbox"] {
    width: 20px; height: 20px;
    flex: 0 0 20px;
    margin: 2px 0 0;
    accent-color: var(--pub-acento-texto);
}

/* Seleccionada por :has() (el navegador lo resuelve solo) y tambien por la
   clase .seleccionada, por si Blazor prefiere fijarla desde el modelo. */
.p-opcion:has(input:checked),
.p-opcion.seleccionada {
    border-color: var(--acento);
    border-width: 2px;
    padding: calc(var(--pub-e4) - 1px);  /* compensa el borde para que no salte */
    background: var(--pub-sup-acento);
}

.p-opcion:has(input:focus-visible) { outline: var(--pub-foco-grosor) solid var(--pub-foco); outline-offset: 2px; }

.p-opcion-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-opcion-titulo { font-weight: 600; color: var(--navy); font-size: var(--pub-t-base); }
.p-opcion-detalle { font-size: var(--pub-t-sm); color: var(--texto-suave); }
.p-opcion-precio {
    margin-left: auto;
    font-family: var(--pub-fuente-mono);
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* Barra de navegacion del formulario (Volver / Continuar). */
.p-flujo-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pub-e3);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pub-e5);
}

.p-flujo-acciones .p-avance { font-size: var(--pub-t-sm); color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   16. RESUMEN DE COMPRA
   -------------------------------------------------------------------------- */

.p-resumen {
    background: var(--pub-sup);
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio);
    box-shadow: var(--pub-sombra-1);
    overflow: hidden;
}

.p-resumen-cabecera {
    padding: var(--pub-e4) var(--pub-e5);
    border-bottom: 1px solid var(--borde-suave);
    background: var(--pub-sup-alterna);
}

.p-resumen-cabecera h2,
.p-resumen-titulo {
    font-size: var(--pub-t-base);
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}

.p-resumen-cuerpo { padding: var(--pub-e5); display: flex; flex-direction: column; gap: var(--pub-e3); }

/* Una linea del resumen: concepto a la izquierda, monto a la derecha. Los
   montos van con tabular-nums para que las columnas de $ queden a plomo. */
.p-resumen-linea {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pub-e4);
    font-size: var(--pub-t-sm);
}

.p-resumen-linea > span:first-child { color: var(--texto-suave); min-width: 0; }
.p-resumen-linea > span:last-child { font-family: var(--pub-fuente-mono); font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Descuento: monto en verde y con signo menos explicito en el markup. */
.p-resumen-linea.descuento > span:last-child { color: var(--ok); }

/* Detalle por sociedad SAP: la unidad de cobro debe verse desglosada, porque
   es lo que el cliente va a revisar antes de pagar. */
.p-resumen-sociedades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pub-e2); }

.p-resumen-sociedad {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pub-e3);
    font-size: var(--pub-t-sm);
    padding-left: var(--pub-e3);
    border-left: 2px solid var(--borde);
}

.p-resumen-sociedad strong { font-weight: 600; color: var(--texto); }
.p-resumen-sociedad small { display: block; color: var(--texto-suave); font-size: var(--pub-t-xs); }

.p-resumen-separador { border: 0; border-top: 1px solid var(--borde); margin: var(--pub-e2) 0; }

.p-resumen-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pub-e4);
    padding-top: var(--pub-e3);
    border-top: 2px solid var(--navy);
}

.p-resumen-total-rotulo { font-family: var(--pub-fuente-titulo); font-size: var(--pub-t-base); font-weight: 600; color: var(--navy); }

.p-resumen-total-monto {
    font-family: var(--pub-fuente-mono);
    font-size: var(--pub-t-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p-resumen-nota {
    font-size: var(--pub-t-xs);
    color: var(--texto-suave);
    line-height: 1.5;
}

.p-resumen-pie {
    padding: var(--pub-e4) var(--pub-e5);
    border-top: 1px solid var(--borde-suave);
    background: var(--pub-sup-alterna);
    display: flex;
    flex-direction: column;
    gap: var(--pub-e3);
}

/* En telefono el resumen se vuelve un <details> para no empujar el formulario
   dos pantallas hacia abajo. */
.p-resumen.colapsable > summary {
    padding: var(--pub-e4) var(--pub-e5);
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    background: var(--pub-sup-alterna);
    display: flex;
    justify-content: space-between;
    gap: var(--pub-e3);
    list-style: none;
}

.p-resumen.colapsable > summary::-webkit-details-marker { display: none; }
.p-resumen.colapsable > summary .p-cifra { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   17. MEDIOS DE PAGO
   -------------------------------------------------------------------------- */

/* Fila de insignias informativas (bajo el CTA o en el pie). */
.p-medios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pub-e2); }

.p-medio {
    display: inline-flex;
    align-items: center;
    gap: var(--pub-e2);
    height: 34px;
    padding-inline: var(--pub-e3);
    border: 1px solid var(--borde);
    border-radius: var(--pub-radio-chico);
    background: var(--pub-sup);
    font-size: var(--pub-t-xs);
    font-weight: 600;
    color: var(--texto-suave);
    white-space: nowrap;
}

/* Los logos de Transbank y MercadoPago son marcas de terceros: se muestran a
   su color real, sin filtros ni recortes, porque asi lo exigen sus manuales y
   ademas el cliente los reconoce al instante. */
.p-medio img { height: 18px; width: auto; display: block; object-fit: contain; }

.p-medios-rotulo { font-size: var(--pub-t-xs); color: var(--texto-suave); margin-right: var(--pub-e1); }

.p-seccion.oscura .p-medio,
.p-pie .p-medio { background: rgba(255, 255, 255, .08); border-color: var(--linea-sobre-tinta); color: var(--pub-texto-oscuro-1); }
.p-seccion.oscura .p-medios-rotulo,
.p-pie .p-medios-rotulo { color: var(--pub-texto-oscuro-2); }

/* Insignia de seguridad del pago (candado dibujado en CSS, no emoji). */
.p-seguro { display: inline-flex; align-items: center; gap: var(--pub-e2); font-size: var(--pub-t-xs); color: var(--texto-suave); }

.p-seguro svg {
    width: 14px; height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   18. AVISOS DE PAGINA PUBLICA

   app.css ya tiene .aviso; este es el equivalente a 16 px para el sitio.
   -------------------------------------------------------------------------- */

.p-aviso {
    display: flex;
    gap: var(--pub-e3);
    align-items: flex-start;
    padding: var(--pub-e4);
    border: 1px solid var(--borde);
    border-left-width: 3px;
    border-radius: var(--pub-radio-chico);
    background: var(--pub-sup-alterna);
    font-size: var(--pub-t-sm);
    color: var(--texto);
}

/* Cada variante cambia el color del filete Y el rotulo en negrita que va
   dentro ("Atencion:", "Listo:"). El color nunca viaja solo. */
.p-aviso.ok { background: var(--ok-suave); border-color: var(--ok-borde); border-left-color: var(--ok); }
.p-aviso.warn { background: var(--warn-suave); border-color: var(--warn-borde); border-left-color: var(--warn); }
.p-aviso.error { background: var(--error-suave); border-color: var(--error-borde); border-left-color: var(--error); }
.p-aviso.info { background: var(--pub-sup-acento); border-color: var(--acento-borde); border-left-color: var(--acento); }

.p-aviso strong { display: block; color: var(--navy); }
.p-aviso.ok strong { color: var(--ok-fuerte); }
.p-aviso.warn strong { color: var(--warn-fuerte); }
.p-aviso.error strong { color: var(--error-fuerte); }

/* Insignia chica reutilizable ("Disponible", "Proximamente"). Punto + texto,
   igual que .pill del portal, para que el vocabulario sea el mismo. */
.p-insignia {
    display: inline-flex;
    align-items: center;
    gap: var(--pub-e1);
    padding: 2px var(--pub-e2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--pub-sup-alterna);
    font-size: var(--pub-t-xs);
    font-weight: 600;
    color: var(--texto-suave);
    white-space: nowrap;
}

.p-insignia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-insignia.ok { color: var(--ok); background: var(--ok-suave); border-color: var(--ok-borde); }
.p-insignia.warn { color: var(--warn-fuerte); background: var(--warn-suave); border-color: var(--warn-borde); }
.p-insignia.acento { color: var(--pub-acento-texto); background: var(--pub-sup-acento); border-color: var(--acento-borde); }
.p-insignia.sin-punto::before { display: none; }

/* --------------------------------------------------------------------------
   19. FRANJA DE CIERRE (CTA)
   -------------------------------------------------------------------------- */

.p-cta {
    background: var(--navy);
    color: var(--pub-texto-oscuro-1);
    padding-block: var(--pub-seccion-y-corta);
}

.p-cta h2 { color: var(--pub-texto-oscuro-1); margin-bottom: var(--pub-e3); }
.p-cta p { color: var(--pub-texto-oscuro-1); }
.p-cta a { color: var(--pub-acento-sobre-oscuro); }

.p-cta-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pub-e5);
}

.p-cta-texto { max-width: 46ch; }
.p-cta-texto > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   20. PIE DE PAGINA
   -------------------------------------------------------------------------- */

.p-pie {
    background: var(--navy-oscuro);
    color: var(--pub-texto-oscuro-1);
    padding-top: var(--pub-seccion-y-corta);
    font-size: var(--pub-t-sm);
}

.p-pie-rejilla {
    display: grid;
    gap: var(--pub-e6);
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    padding-bottom: var(--pub-e6);
}

.p-pie-marca { max-width: 32ch; display: flex; flex-direction: column; gap: var(--pub-e3); }
.p-pie-marca .p-marca { color: var(--pub-texto-oscuro-1); }
.p-pie-marca .p-marca-bajada { color: var(--pub-texto-oscuro-2); }
.p-pie-marca p { color: var(--pub-texto-oscuro-1); font-size: var(--pub-t-sm); margin: 0; }

.p-pie-columna h3 {
    font-size: var(--pub-t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pub-texto-oscuro-2);
    margin: 0 0 var(--pub-e3);
}

.p-pie-enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pub-e2); }
.p-pie-enlaces a { color: var(--pub-texto-oscuro-1); }
.p-pie-enlaces a:hover { color: var(--pub-texto-oscuro-1); text-decoration: underline; text-underline-offset: 2px; }

/* Barra final: razon social, RUT y direccion. Es letra chica pero AA (5.32:1
   sobre navy): un pie ilegible es una senal de descuido justo donde el cliente
   busca a quien le esta pagando. */
.p-pie-final {
    border-top: 1px solid var(--linea-sobre-tinta);
    padding-block: var(--pub-e4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--pub-e3) var(--pub-e5);
    align-items: center;
    justify-content: space-between;
    font-size: var(--pub-t-xs);
    color: var(--pub-texto-oscuro-2);
}

.p-pie-final a { color: var(--pub-texto-oscuro-2); }
.p-pie-final a:hover { color: var(--pub-texto-oscuro-1); }
.p-pie-legales { display: flex; flex-wrap: wrap; gap: var(--pub-e4); }

/* --------------------------------------------------------------------------
   21. UTILIDADES
   -------------------------------------------------------------------------- */

.p-tenue { color: var(--texto-suave); }
.p-negrita { font-weight: 600; }
.p-centrado { text-align: center; }
.p-derecha { text-align: right; }
.p-nowrap { white-space: nowrap; }
.p-sin-margen { margin: 0 !important; }
.p-mt2 { margin-top: var(--pub-e2); }
.p-mt4 { margin-top: var(--pub-e4); }
.p-mt6 { margin-top: var(--pub-e6); }
.p-mb4 { margin-bottom: var(--pub-e4); }
.p-mb6 { margin-bottom: var(--pub-e6); }
.p-medida { max-width: var(--pub-medida); }

/* Imagenes: nunca desbordan su contenedor. */
.p-sitio img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   22. RESPONSIVE

   Los componentes ya apilan solos con auto-fit; estas reglas son para lo que
   auto-fit no resuelve: la navegacion, el flujo de compra de dos columnas y
   los pasos.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    /* En tablet y escritorio el margen lateral crece; en telefono se queda en
       los 16 px del piso. */
    :root { --pub-gutter: 1.5rem; }
}

@media (max-width: 1023px) {
    /* El resumen deja de ser columna: el formulario necesita el ancho. */
    .p-flujo { grid-template-columns: minmax(0, 1fr); }
    .p-flujo-lateral { position: static; }

    /* Variante para dejar el resumen arriba (checkout de un solo paso). */
    .p-flujo.resumen-arriba .p-flujo-lateral { order: -1; }
}

@media (max-width: 899px) {
    /* --- Navegacion colapsada --- */
    .p-menu-boton { display: inline-flex; }

    .p-nav {
        display: none;
        position: absolute;
        left: 0; right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--pub-e2) var(--pub-gutter) var(--pub-e4);
        background: var(--pub-sup);
        border-bottom: 1px solid var(--borde);
        box-shadow: var(--pub-sombra-1);
    }

    .p-nav.abierto { display: flex; }

    .p-nav a {
        padding: var(--pub-e3) var(--pub-e2);
        font-size: var(--pub-t-base);
        border-bottom: 1px solid var(--borde-suave);
        border-radius: 0;
    }

    .p-nav a[aria-current="page"],
    .p-nav a.activo { box-shadow: inset 3px 0 0 var(--acento); padding-left: var(--pub-e4); }

    .p-cabecera { position: relative; }
    .p-cabecera.oscura .p-nav { background: var(--navy); border-bottom-color: var(--linea-sobre-tinta); }
    .p-cabecera.oscura .p-nav a { border-bottom-color: var(--linea-sobre-tinta); }
    .p-cabecera.oscura .p-menu-boton { border-color: rgba(255, 255, 255, .35); color: var(--pub-texto-oscuro-1); }

    /* El CTA de la cabecera sobra cuando compite con el boton de menu. */
    .p-cabecera-acciones .p-solo-escritorio { display: none; }

    .p-cta-caja { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 599px) {
    /* La bajada de la marca es la primera que sobra: en 360 px compite por el
       ancho con el boton de contratar, y el nombre de la marca ya dice todo.
       Medido: sin esto la barra se pasa 85 px del viewport. */
    .p-marca-bajada { display: none; }
    .p-marca { gap: var(--pub-e2); }
    .p-cabecera-barra { gap: var(--pub-e3); min-height: 60px; }
    .p-cabecera-acciones .p-boton { padding-inline: var(--pub-e3); }
    .p-cinta { font-size: var(--pub-t-xs); }
}

@media (max-width: 639px) {
    /* --- Pasos en vertical --- */
    /* Cinco circulos con rotulo no caben en 360 px sin que el texto quede a
       dos letras por linea. En vertical se lee, y ademas se ve cuanto falta. */
    .p-pasos { flex-direction: column; align-items: stretch; gap: 0; }

    .p-paso {
        flex-direction: row;
        align-items: center;
        gap: var(--pub-e3);
        text-align: left;
        padding: var(--pub-e2) 0;
    }

    .p-paso + .p-paso::before {
        top: -6px;
        bottom: auto;
        left: 15px;
        right: auto;
        width: 2px;
        height: 14px;
    }

    /* Alternativa compacta: solo el paso actual con rotulo. La pagina agrega
       .solo-actual cuando hay mas de cuatro pasos. */
    .p-pasos.solo-actual .p-paso:not(.activo) .p-paso-rotulo { display: none; }
    .p-pasos.solo-actual { flex-direction: row; }
    .p-pasos.solo-actual .p-paso { flex-direction: column; }

    /* --- Planes --- */
    /* En una columna la tarjeta destacada ya no necesita sobresalir en alto;
       la cinta y el borde bastan. */
    .p-plan { padding: var(--pub-e4); }
    .p-plan.destacado { padding: calc(var(--pub-e4) - 1px); }
    .p-plan-para { min-height: 0; }
    .p-plan-cinta { left: var(--pub-e4); }

    /* --- Botones a ancho completo: el pulgar agradece --- */
    .p-hero .p-acciones .p-boton,
    .p-plan-pie .p-boton,
    .p-flujo-acciones .p-boton { width: 100%; }

    .p-flujo-acciones { flex-direction: column-reverse; align-items: stretch; }
    .p-flujo-acciones .p-avance { text-align: center; }

    .p-panel-cabecera, .p-panel-cuerpo { padding-inline: var(--pub-e4); }
    .p-panel-pie { padding-inline: var(--pub-e4); flex-direction: column; align-items: stretch; }
    .p-panel-pie .p-boton { width: 100%; }

    .p-resumen-cuerpo, .p-resumen-cabecera, .p-resumen-pie { padding-inline: var(--pub-e4); }

    .p-pie-rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
    .p-pie-marca { grid-column: 1 / -1; max-width: none; }
    .p-pie-final { flex-direction: column; align-items: flex-start; }

    .p-ciclo { width: 100%; justify-content: stretch; }
    .p-ciclo-opcion { flex: 1 1 0; justify-content: center; padding-inline: var(--pub-e3); }

    .p-dato { border-left-width: 2px; padding-left: var(--pub-e3); }
}

/* --------------------------------------------------------------------------
   23. PREFERENCIAS DEL USUARIO E IMPRESION
   -------------------------------------------------------------------------- */

/* Nada de este sitio depende de una animacion para comunicar algo, asi que
   apagarlas todas es seguro. */
@media (prefers-reduced-motion: reduce) {
    .p-sitio *,
    .p-sitio *::before,
    .p-sitio *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Si el sistema pide mas contraste, se suben los bordes decorativos al nivel
   de los de formulario. */
@media (prefers-contrast: more) {
    :root {
        --pub-borde-fuerte: var(--azul-80);
        --pub-foco-grosor: 3px;
    }

    .p-plan, .p-panel, .p-resumen, .p-comparativa { border-color: var(--pub-borde-campo); }
}

/* El cliente imprime el resumen de compra para adjuntarlo a la orden de
   compra interna. Que salga legible y sin adornos. */
@media print {
    .p-cabecera, .p-menu-boton, .p-cta, .p-pie, .p-saltar, .p-flujo-acciones { display: none !important; }

    .p-sitio { background: #fff; color: #000; }
    .p-seccion { padding-block: 1rem; }
    .p-flujo { grid-template-columns: 1fr; }
    .p-plan, .p-panel, .p-resumen, .p-comparativa { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
    .p-resumen-total { border-top-color: #000; }
    a { color: #000; text-decoration: underline; }
}