/* ==============================================================================
   CABECERA FORENSE (RETAILOS 2026)
   ARCHIVO: app/static/css/modules/landing_soberania.css
   FECHA: 15-09-2026
   OBJETIVO: Estilos de la landing publica "Soberania Pyme - Suite Walcom 2026".

   INVERSION CROMATICA (15-09-2026, orden expresa del Administrador):
     - Lo que era blanco (#ffffff / #f5f5f5) pasa a NEGRO.
     - Lo que era negro (#111111) pasa a GRIS OSCURO.
   La landing opera por tanto en modo oscuro integral, con una escala propia de
   tres superficies declarada abajo como tokens. Se conserva la notacion HEX de 6
   digitos (sin rgb()/hsl()), la geometria ortogonal (border-radius: 0) y el uso
   estrictamente semantico de #d30005 y #007d48.
   NOTA DE CUMPLIMIENTO: #1b1b1b, #2f2f2f y #3d3d3d NO pertenecen a los cinco HEX
   de la constitucion Genesis; se introducen solo en esta landing por instruccion
   del Administrador (ver audits/Landing_Soberania_Pyme_150926/03_walkthrough).

   FONDOS (16-09-2026): secuencias de frames como fondo de cada seccion, paneles
   translucidos (opacidad sobre HEX de 6 digitos + desenfoque) y entradas
   escalonadas. Ver bloque 14 y audits/Landing_Fondos_Animados_160926/.

   ALCANCE: clases con prefijo `sob-`; cero colision con el Configurador.
   ============================================================================== */

/* ---------- 0. Tokens de superficie (escala oscura) ---------- */
.sob-page {
    --sob-fondo: #111111;      /* Base: antes #ffffff */
    --sob-fondo-alt: #1b1b1b;  /* Reposo: antes #f5f5f5 */
    --sob-elevada: #2f2f2f;    /* Enfasis: antes #111111 (el gris oscuro pedido) */
    --sob-linea: #3d3d3d;      /* Linea de definicion Bento */
    --sob-tinta: #ffffff;      /* Texto */
}

/* ---------- 1. Base y ritmo vertical ---------- */
.sob-page {
    background-color: var(--sob-fondo);
    color: var(--sob-tinta);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    /* FIX 17-09-2026 (A-06): par hidden/clip, igual que el CSS global. Guardia STICKY-001. */
    overflow-x: hidden;
    overflow-x: clip;
}

.sob-page *,
.sob-page *::before,
.sob-page *::after {
    border-radius: 0 !important;
}

.sob-shell {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.sob-section {
    padding-block: 84px;
    background-color: var(--sob-fondo);
    /* Compensa la barra de anclas pegajosa para que el titulo no quede debajo de ella. */
    scroll-margin-top: 56px;
}

.sob-section--cloud { background-color: var(--sob-fondo-alt); }

.sob-section--ink {
    background-color: var(--sob-elevada);
    color: var(--sob-tinta);
}

.sob-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sob-title {
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 18px 0;
}

.sob-lead {
    font-size: 16px;
    line-height: 1.7;
    max-width: 70ch;
    margin: 0;
}

.sob-rule-line {
    width: 64px;
    height: 4px;
    background-color: var(--sob-tinta);
    margin-bottom: 24px;
}

/* ---------- 2. Hero monumental ---------- */
.sob-hero {
    background-color: var(--sob-elevada);
    color: var(--sob-tinta);
    padding-block: 96px 0;
    border-bottom: 1px solid var(--sob-linea);
}

.sob-hero__kicker {
    display: inline-block;
    border: 1px solid var(--sob-tinta);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.sob-hero__display {
    font-size: clamp(56px, 12vw, 132px);
    line-height: 0.88;
    font-weight: 700;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    margin: 0;
}

.sob-hero__display span { display: block; }

.sob-hero__bajada {
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.5;
    max-width: 44ch;
    margin: 28px 0 0 0;
}

.sob-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
    padding-bottom: 72px;
}

/* ---------- 3. Botones (pildora ortogonal Genesis, invertidos a oscuro) ---------- */
.sob-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--sob-tinta);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

/* Solidos: bloque blanco sobre superficie oscura (maxima jerarquia de conversion). */
.sob-btn--ink,
.sob-btn--canvas {
    background-color: var(--sob-tinta);
    color: var(--sob-fondo);
}

.sob-btn--ink:hover,
.sob-btn--canvas:hover {
    background-color: transparent;
    color: var(--sob-tinta);
}

/* Contorno: jerarquia secundaria. */
.sob-btn--outline,
.sob-btn--ghost {
    background-color: transparent;
    color: var(--sob-tinta);
}

.sob-btn--outline:hover,
.sob-btn--ghost:hover {
    background-color: var(--sob-tinta);
    color: var(--sob-fondo);
}

/* ---------- 4. Cifras del hero ---------- */
.sob-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--sob-tinta);
}

.sob-figure {
    padding: 28px 20px;
    border-right: 1px solid var(--sob-tinta);
}

.sob-figure:last-child { border-right: 0; }

.sob-figure__valor {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
}

.sob-figure__etiqueta {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---------- 5. Navegacion ancla (pegajosa) ---------- */
.sob-anchors {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--sob-fondo);
    border-bottom: 1px solid var(--sob-linea);
}

.sob-anchors__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    scrollbar-width: none;
}

.sob-anchors__list::-webkit-scrollbar { display: none; }

.sob-anchors__link {
    display: block;
    white-space: nowrap;
    padding: 16px 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sob-tinta);
    text-decoration: none;
    border-right: 1px solid var(--sob-linea);
}

.sob-anchors__link:hover,
.sob-anchors__link.is-active {
    background-color: var(--sob-tinta);
    color: var(--sob-fondo);
}

/* ---------- 6. Manifiesto ---------- */
.sob-manifiesto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.sob-manifiesto__quiebre {
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.sob-manifiesto p + p { margin-top: 18px; }

.sob-regla {
    margin-top: 56px;
    background-color: var(--sob-elevada);
    color: var(--sob-tinta);
    padding: 40px;
}

.sob-regla__titulo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px 0;
}

.sob-regla__cuerpo {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

.sob-regla__detalle {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--sob-tinta);
}

/* ---------- 7. Matriz de planes ---------- */
.sob-planes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.sob-plan {
    display: flex;
    flex-direction: column;
    background-color: var(--sob-fondo);
    border: 1px solid var(--sob-linea);
    padding: 26px 22px;
    transition: border-color 0.2s ease;
}

.sob-plan:hover { border-color: var(--sob-tinta); }

.sob-plan__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sob-tinta);
    font-size: 18px;
    margin-bottom: 18px;
}

.sob-plan__zona {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sob-plan__nombre {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.sob-plan__esencia {
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sob-linea);
    margin-bottom: 14px;
}

.sob-plan__titular {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.sob-plan__descripcion {
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 18px 0;
}

.sob-plan__list {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
}

.sob-plan__list li {
    position: relative;
    padding-left: 24px;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 10px;
}

.sob-plan__list i {
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 12px;
    color: #007d48;
}

.sob-plan__foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--sob-linea);
}

.sob-plan__rotulo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sob-plan__precio {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
    margin: 0 0 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sob-linea);
}

.sob-plan__moneda {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-left: 8px;
}

.sob-plan__concurrencia {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
}

.sob-plan__perfil {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

/* ---------- 7.b Base comun incluida en los cuatro planes ---------- */
.sob-base {
    margin-top: 28px;
    background-color: var(--sob-elevada);
    padding: 34px 30px;
}

.sob-base__cabecera {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--sob-tinta);
}

.sob-base__titulo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.sob-base__bajada {
    font-size: 14px;
    line-height: 1.7;
    max-width: 78ch;
    margin: 0;
}

.sob-base__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.sob-base__item {
    padding-left: 18px;
    border-left: 1px solid var(--sob-tinta);
}

.sob-base__icon {
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
}

.sob-base__item-titulo {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.sob-base__item-detalle {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- 8. Nucleo de ingenieria (12 modulos) ---------- */
.sob-modulos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.sob-modulo {
    background-color: var(--sob-fondo);
    border: 1px solid var(--sob-linea);
    padding: 26px 22px;
    transition: border-color 0.2s ease;
}

.sob-modulo:hover { border-color: var(--sob-tinta); }

.sob-modulo__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.sob-modulo__num {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
}

.sob-modulo__icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sob-elevada);
    color: var(--sob-tinta);
    font-size: 16px;
}

.sob-modulo__nombre {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 16px 0;
    min-height: 42px;
}

.sob-modulo__rotulo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sob-modulo__dolor {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    padding: 12px 14px;
    background-color: var(--sob-elevada);
    border-left: 3px solid #d30005;
}

.sob-modulo__impacto {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
}

.sob-modulo__verticales {
    list-style: none;
    margin: 14px 0 0 0;
    padding: 0;
}

.sob-modulo__verticales li {
    position: relative;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 8px;
}

.sob-modulo__verticales li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 2px;
    background-color: var(--sob-tinta);
}

.sob-modulo__tech {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sob-linea);
    font-size: 12px;
    line-height: 1.6;
}

/* ---------- 9. Blindaje multi-tenant ---------- */
.sob-pilares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.sob-pilar {
    border: 1px solid var(--sob-tinta);
    padding: 32px 28px;
}

.sob-pilar__icon {
    font-size: 22px;
    margin-bottom: 18px;
    display: block;
}

.sob-pilar__titulo {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.sob-pilar__cuerpo {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* ---------- 10. Propuesta economica ---------- */
.sob-precios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.sob-precio {
    background-color: var(--sob-fondo);
    border: 1px solid var(--sob-linea);
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
}

.sob-precio--destacado {
    border-width: 3px;
    border-color: var(--sob-tinta);
}

.sob-precio__etiqueta {
    display: inline-block;
    align-self: flex-start;
    background-color: #d30005;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    margin-bottom: 18px;
}

.sob-precio__titulo {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 18px 0;
}

.sob-precio__monto {
    font-size: clamp(34px, 4.4vw, 48px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-family: var(--bs-font-monospace, Consolas, "Courier New", monospace);
}

.sob-precio__monto--abono { color: #d30005; }

.sob-precio__moneda {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-left: 8px;
}

.sob-precio__detalle {
    font-size: 14px;
    line-height: 1.7;
    margin: 20px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--sob-linea);
}

.sob-precio__nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.sob-precio__nota i { color: #007d48; margin-top: 3px; }

/* ---------- 11. Cierre ---------- */
.sob-cierre {
    background-color: var(--sob-elevada);
    color: var(--sob-tinta);
    padding-block: 72px;
    text-align: center;
}

.sob-cierre__titulo {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 18px 0;
}

.sob-cierre__bajada {
    font-size: 16px;
    line-height: 1.7;
    max-width: 62ch;
    margin: 0 auto 32px auto;
}

.sob-cierre__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}


/* ==============================================================================
   14. FONDOS ANIMADOS (16-09-2026)
   Las secuencias de frames son FONDO del diseno. Cada seccion lleva una capa
   pegada a la pantalla mientras se recorre; el contenido flota encima.
   ============================================================================== */

/* 14.0 Sticky real en esta pagina.
   El CSS global declara `overflow-x: hidden` en html, body y main: eso convierte a
   body y main en contenedores de desplazamiento y ANULA position: sticky. Se
   corrige solo aqui con `clip`, que recorta sin crear contenedor de scroll. */
body:has(#landing-soberania),
main:has(#landing-soberania) {
    overflow-x: clip;
}

.sob-page { overflow-x: hidden; overflow-x: clip; }

.sob-section,
.sob-hero,
.sob-cierre {
    position: relative;
    isolation: isolate;
}

/* Con fondo, la seccion ocupa al menos una pantalla: la escena se ve completa,
   nunca una franja minima. */
.sob-section:has(> .sob-fondo__capa),
.sob-cierre:has(> .sob-fondo__capa) {
    min-height: 100vh;
}

/* 14.1 Capa de fondo */
.sob-fondo__capa {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Recorta lo que excede la seccion SIN romper el sticky interior. */
    clip-path: inset(0);
}

.sob-fondo__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--sob-fondo);
}

.sob-fondo__poster,
.sob-fondo__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.sob-fondo__poster { object-fit: cover; }

.sob-fondo__canvas {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.sob-fondo__capa.is-ready .sob-fondo__canvas { opacity: 1; }

/* Velo: color solido HEX; la opacidad la fija el Administrador por seccion. */
.sob-fondo__velo {
    position: absolute;
    inset: 0;
    background-color: var(--sob-fondo);
    opacity: var(--velo, 0.55);
}

.sob-fondo__contenido {
    position: relative;
    z-index: 1;
}

/* Las secciones con fondo no pintan su propio color: lo aporta la escena. */
.sob-section:has(> .sob-fondo__capa),
.sob-hero:has(> .sob-fondo__capa),
.sob-cierre:has(> .sob-fondo__capa) {
    background-color: var(--sob-fondo);
}

/* 14.2 Paneles translucidos (framework de modulo, Fase 3: "fondos translucidos").
   El color sigue siendo HEX de 6 digitos; la translucidez la da la opacidad de una
   capa ::before, y el desenfoque separa el texto de la escena. */
.sob-page .sob-panel {
    position: relative;
    isolation: isolate;
    background-color: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    --panel-color: var(--sob-fondo);
    --panel-opacidad: 0.68;
}

.sob-page .sob-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--panel-color);
    opacity: var(--panel-opacidad);
}

.sob-page .sob-regla.sob-panel,
.sob-page .sob-base.sob-panel,
.sob-page .sob-cierre__panel.sob-panel {
    --panel-color: var(--sob-elevada);
    --panel-opacidad: 0.8;
}

.sob-page .sob-panel--texto { padding: 28px 30px; }

.sob-page .sob-figures.sob-panel { --panel-opacidad: 0.62; }

/* 14.3 Portada: la escena llena la pantalla y el titulo se apoya abajo. */
.sob-hero:has(> .sob-fondo__capa) {
    padding-block: 0;
    min-height: 100vh;
}

.sob-hero__cuerpo {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 44px;
    padding-top: 110px;
    padding-bottom: 36px;
}

.sob-hero__cuerpo .sob-hero__actions { padding-bottom: 0; }

/* 14.4 Cierre: el panel arriba deja ver la escena (termina formando el logotipo). */
.sob-cierre:has(> .sob-fondo__capa) {
    /* Panel compacto en el tercio INFERIOR: la escena forma el logotipo al centro y
       la cabecera fija del sitio cubre la franja superior de la pantalla. */
    padding-block: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sob-cierre:has(> .sob-fondo__capa) > .sob-fondo__contenido {
    width: 100%;
    padding-bottom: 5vh;
}

.sob-cierre__panel {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 30px;
}

.sob-cierre__panel .sob-cierre__titulo {
    font-size: clamp(22px, 2.6vw, 34px);
    margin-bottom: 10px;
}

.sob-cierre__panel .sob-cierre__bajada {
    font-size: 15px;
    margin-bottom: 18px;
}

/* El pie del sitio trae `mt-5`: en esta pagina deja una franja clara entre la
   ultima escena y el pie. Se anula solo aqui. */
body:has(#landing-soberania) .footer-modern { margin-top: 0 !important; }

/* 14.5 Entrada en escena (skill creative-technologist: curva expo, sin rebote
   exagerado; el retardo escalonado lo asigna el JS por pasada). */
.sob-entra {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.985);
    transition:
        opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1),
        transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.sob-entra.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ---------- 13. Adaptabilidad ---------- */
@media (max-width: 1199.98px) {
    .sob-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sob-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sob-base__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .sob-section { padding-block: 56px; }
    .sob-shell { padding-left: 18px; padding-right: 18px; }
    .sob-hero__cuerpo { padding-top: 90px; gap: 28px; }
    .sob-cierre__panel { padding: 20px 18px; }
    /* mobile_ui.css reserva 70px al final de <main> para la barra inferior fija; en esta
       pagina ese espacio se veia como una franja clara entre el cierre y el pie. La
       landing lo cubre con su propio fondo, sin quitar la reserva. */
    .sob-page { margin-bottom: -70px; padding-bottom: 70px; }
    .sob-cierre__panel .sob-btn { padding: 12px 18px; }
    .sob-page .sob-panel--texto { padding: 22px 20px; }
    /* En moviles el desenfoque es caro: se compensa con un panel mas opaco. */
    .sob-page .sob-panel { -webkit-backdrop-filter: none; backdrop-filter: none; --panel-opacidad: 0.86; }
    .sob-figures { grid-template-columns: repeat(2, 1fr); }
    .sob-figure { border-bottom: 1px solid var(--sob-tinta); }
    .sob-figure:nth-child(2n) { border-right: 0; }
    .sob-manifiesto { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .sob-regla { padding: 26px 22px; }
    .sob-planes,
    .sob-modulos,
    .sob-pilares,
    .sob-precios,
    .sob-base__items { grid-template-columns: minmax(0, 1fr); }
    .sob-base { padding: 26px 22px; }
    .sob-modulo__nombre { min-height: 0; }
    .sob-precio { padding: 26px 22px; }
    .sob-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .sob-entra {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .sob-fondo__canvas { transition: none; }
}