/* =====================================================================
   SERVIA — hoja de la landing publica
   =====================================================================
   Vivia EN LINEA dentro de landing.php: 745 lineas de <style> en el
   <head>, que el navegador volvia a descargar en cada visita y que
   convertian el archivo de la landing en un tercio marcado y dos
   tercios CSS. Al sacarla aqui se cachea, landing.php vuelve a ser
   legible, y el rediseno tiene un sitio donde crecer.

   Se carga DESPUES de styles.css, que aporta lo que queda del armazon
   comun con las paginas legales (barra de navegacion, pie, .container,
   .btn y el revelado al hacer scroll). Todo lo propio de la landing
   esta aqui.

   ORDEN DEL ARCHIVO
     1. Tokens del sistema  (superficies, relieve, degradados)
     2. Hero
     3. Bento               (rejilla, azulejo, chip, pozo)
     4. Secciones
     5. Movil

   REGLA: ni un color literal fuera del bloque de tokens.
   ===================================================================== */

/* ==========================
   1. TOKENS DEL SISTEMA
   ==========================
   Los de styles.css (--primary-color, --dark-bg, --spacing-*) siguen
   sirviendo al armazon compartido con las paginas legales. Estos son los
   del rediseno y solo los usa la landing.

   La sombra de relieve tiene que DERIVAR de la superficie, no ser negra:
   sobre azul marino un negro puro se ve como suciedad, no como
   profundidad. De ahi el par luz/sombra en vez de un drop-shadow suelto.
   ========================== */
:root {
    /* Superficies. Tres niveles y no mas: pagina, azulejo, pieza. */
    --sup-0: #050c17;   /* fondo de pagina */
    --sup-1: #081327;   /* seccion alterna */
    --sup-2: #0e1c36;   /* azulejo */
    --sup-3: #16274a;   /* pieza elevada dentro de un azulejo */
    --pozo:  #060f1f;   /* hueco hundido */

    /* Tinta */
    --tinta-1: #eef6ff;
    --tinta-2: #9fb3cd;
    --tinta-3: #6b809c;

    /* Relieve */
    --n-luz:     rgba(148, 197, 255, 0.055);
    --n-sombra:  rgba(2, 6, 15, 0.55);
    --n-alto:     -1px -1px 2px var(--n-luz), 5px 7px 18px var(--n-sombra);
    --n-alto-mas: -1px -1px 3px var(--n-luz), 10px 14px 34px var(--n-sombra);
    --n-hundido:  inset 3px 3px 7px var(--n-sombra), inset -1px -1px 2px var(--n-luz);
    --n-chip:     -1px -1px 2px var(--n-luz), 3px 4px 10px var(--n-sombra);

    /* Degradados: uno por seccion y uno del 3% en el azulejo. Uno por
       tarjeta produce bandas en cuanto el panel es malo. */
    --grad-sup:    linear-gradient(158deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0) 46%);
    --grad-borde:  linear-gradient(140deg, rgba(56,189,248,0.5) 0%, rgba(37,99,235,0.22) 38%, rgba(255,255,255,0.045) 72%);
    --luz-seccion: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(37,99,235,0.16) 0%, transparent 70%);

    --acento-suave: rgba(37, 99, 235, 0.10);   /* tinte de marca de las pildoras */
    --borde:       rgba(148, 197, 255, 0.075);
    --borde-vivo:  rgba(148, 197, 255, 0.14);

    /* El azul hondo de la marca y el verde de "incluido". Estaban escritos
       como color de reserva dentro de la tabla de planes, que es justo lo
       que esta hoja no permite: un color literal fuera de aqui. */
    --acento-hondo: #1e3a8a;
    --ok:           #34d399;

    /* El bento pide radios mas generosos que los anteriores */
    --r-md: 1.15rem;
    --r-lg: 1.5rem;

    --t-base: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);

    /* --- PUENTE con los tokens de styles.css ---
       La barra, el pie y el .container siguen viniendo de alli y leen
       estas variables. Reasignarlas aqui tine el armazon entero con las
       superficies nuevas sin reescribir sus reglas -- el mismo recurso
       que lite.css y panel.css usan con las variables de Bootstrap.
       Solo afecta a la landing: las paginas legales no cargan esta hoja
       y conservan su aspecto. */
    --darker-bg:    var(--sup-0);
    --dark-bg:      var(--sup-1);
    --card-bg:      var(--sup-2);
    --white:        var(--tinta-1);
    --gray-light:   var(--tinta-2);
    --gray:         var(--tinta-3);
    --border-subtle: var(--borde);
    --border-hover:  var(--borde-vivo);
}

/* ==========================
   2. BENTO
   ==========================
   Rejilla de 6 columnas en escritorio, 2 en tableta y 1 en movil. Los
   `span` viven en clases utilitarias (.c2/.c3/.c4/.c6/.f2) y NO dentro
   de cada componente: asi recolocar una seccion es mover una clase en el
   HTML y no reescribir su CSS.
   ========================== */
.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.1rem;
}

.c2 { grid-column: span 2; }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
.f2 { grid-row: span 2; }

/* --- El azulejo --- */
.tile {
    position: relative;
    background-color: var(--sup-2);
    background-image: var(--grad-sup);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    box-shadow: var(--n-alto);
    padding: 1.6rem;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    /* Sin backdrop-filter a proposito: detras de un azulejo solo hay un
       degradado plano, asi que el desenfoque no desenfoca nada y solo
       cuesta pintado -- se nota en el scroll de un Android de mostrador. */
}

.tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--n-alto-mas);
    border-color: var(--borde-vivo);
}

/* --- El destacado lleva borde de degradado y NO relieve extra: los dos
       en el mismo milimetro se ven sucios. --- */
.tile--destacado {
    border-color: transparent;
    border-radius: var(--r-lg);
    padding: 2rem;
}

.tile--destacado::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-borde);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.tile h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tinta-1);
    margin-bottom: 0.5rem;
}

.tile--destacado h3 { font-size: 1.3rem; }

.tile p {
    color: var(--tinta-2);
    font-size: 0.92rem;
    line-height: 1.7;
}

/* --- Chip de icono en relieve. El neumorfismo se lee bien aqui porque
       es una pieza decorativa; en un boton mataria la afordancia. --- */
.chip {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 0.9rem;
    background-color: var(--sup-3);
    background-image: var(--grad-sup);
    box-shadow: var(--n-chip);
    color: var(--accent-color);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.tile--destacado .chip { width: 56px; height: 56px; font-size: 1.5rem; }

/* El destacado ocupa dos filas, asi que su contenido casi nunca llega al
   fondo. En columna con el pozo empujado abajo (`margin-top: auto`) el
   hueco queda repartido y el azulejo se lee como deliberado, no como una
   tarjeta que se quedo corta. */
.tile--destacado {
    display: flex;
    flex-direction: column;
}

.tile--destacado > .pozo {
    margin-top: auto;
}

/* --- Pozo hundido: datos de solo lectura, nunca controles. --- */
.pozo {
    background: var(--pozo);
    border-radius: var(--r-md);
    box-shadow: var(--n-hundido);
    padding: 1.15rem 1.3rem;
}

.pozo-etq {
    font-size: 0.78rem;
    color: var(--tinta-3);
    /* Sin esto una etiqueta larga no cabe a 320px y no puede partirse:
       es uno de los fallos que ya mordieron en la app del taller. */
    overflow-wrap: anywhere;
}

.pozo-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.pozo-fichas span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
}

/* ==========================
   HERO DEL PRODUCTO
   ========================== */
.servia-hero {
    padding: 150px 0 var(--spacing-xl);
    /* Va de la superficie alterna al fondo de pagina, no al reves: el
       hero se aclara arriba y se funde con la primera seccion abajo. */
    background:
        radial-gradient(ellipse 80% 60% at 78% 8%, rgba(56, 189, 248, 0.14) 0%, transparent 62%),
        linear-gradient(168deg, var(--sup-1) 0%, var(--sup-0) 62%);
    position: relative;
    overflow: hidden;
}

.servia-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
    background-size: 64px 64px;
    /* La reticula se desvanece hacia los bordes. Sin la mascara llega
       recta hasta el corte de la seccion y se ve donde termina el hero,
       que es justo lo que no debe verse. */
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 0%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 0%, transparent 78%);
    pointer-events: none;
}

.servia-hero::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.10) 0%, transparent 65%);
    pointer-events: none;
}

.servia-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* minmax(0,…) mantiene la captura dentro de su columna en pantallas estrechas */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--spacing-lg);
    align-items: center;
}

.servia-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-light);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-base), gap var(--transition-base);
}

.servia-back-link:hover {
    gap: 0.75rem;
    color: var(--accent-color);
}

.servia-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--neon-green);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.775rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.servia-title {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, var(--primary-light), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.servia-tagline {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
}

.servia-lead {
    font-size: 1.02rem;
    color: var(--gray-light);
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: var(--spacing-md);
}

.servia-hero-cta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.servia-domain {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray);
}

/* El enlace de "ya soy cliente" heredaba el azul oscuro de los enlaces
   sobre un fondo casi negro y quedaba ilegible. Es el atajo del taller
   que ya paga: tiene que verse. */
.servia-domain a {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.servia-domain a:hover { color: var(--white); }

.servia-domain strong {
    color: var(--accent-color);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ==========================
   CAPTURAS DE PANTALLA
   ========================== */
.captura {
    display: block;
    background: var(--sup-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.captura img {
    display: block;
    width: 100%;
    height: auto;
}

/* La captura del hero es un azulejo destacado (mismo material que el bento
   de mas abajo) con una ligera perspectiva. El `align-self: start` que
   llevan los azulejos de captura NO aplica aqui: en el hero la rejilla es
   de dos columnas y el azulejo se centra con el texto. */
.captura-hero {
    align-self: center;
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
    transition: transform var(--transition-slow), box-shadow var(--t-base);
}

.captura-hero:hover {
    transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
}

/* Los tres pozos del hero. `auto-fit` y no tres columnas fijas: a 320px
   una etiqueta como "dias de prueba, sin tarjeta" no cabe en un tercio de
   pantalla y el numero se quedaria solo en una linea. */
.hero-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
    margin-top: var(--spacing-md);
    max-width: 560px;
}

.metrica-n {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--tinta-1);
    /* Las cifras con ancho fijo: sin esto bailan de un pozo a otro. */
    font-variant-numeric: tabular-nums;
}

.captura-pie {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.5;
}

.captura-suelta {
    margin: var(--spacing-lg) 0 0;
}

.captura-pie-centrado {
    text-align: center;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Galería de pantallas */
/* Capturas dentro del bento.
   `.marco` es la caja de proporcion; el `span` y el alto los declara cada
   captura en $capturas (landing.php), asi que una pantalla de listado se
   ve ancha y una de detalle se ve alta -- antes las seis compartian una
   caja fija de 16/10 y todas parecian la misma pantalla.

   `contain` y no `cover`: recortar dejaria fuera la barra lateral o el
   bloque de totales. El sobrante no se nota porque el fondo del marco es
   tan oscuro como las propias capturas. */
.tile--captura {
    margin: 0;
    padding: 0.7rem;
    overflow: hidden;
    /* Que NO se estire hasta el alto de la fila. Como cada marco conserva
       la proporcion de su imagen, un azulejo estirado se convierte en una
       caja con borde medio vacia -- y un hueco con borde alrededor se ve
       mucho peor que un hueco a secas. */
    align-self: start;
}

.tile--captura .marco {
    background: var(--sup-0);
    border-radius: calc(var(--r-md) - 0.45rem);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(2, 6, 15, 0.5);
}

.tile--captura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

.tile--captura figcaption {
    padding: 0.9rem 0.6rem 0.25rem;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--tinta-2);
}

.tile--captura figcaption strong { color: var(--tinta-1); }

/* La proporcion del marco la pone landing.php en linea, leida del propio
   archivo de imagen: asi ninguna captura queda con franjas y reemplazar
   una por otra con distinto recorte no obliga a tocar nada. */

/* Pantallas de móvil, presentadas en fila */
.movil-fila {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.movil-fila .captura {
    border-radius: 22px;
    flex: 0 1 260px;
    max-width: 260px;
}

/* ==========================
   SECCIONES
   ========================== */
.servia-section {
    position: relative;
    padding: var(--spacing-xl) 0;
    /* `isolation` acota el z-index negativo de la luz a esta seccion: sin
       el, el pseudo-elemento se cuela por detras del fondo de la pagina y
       no se ve ninguna. */
    isolation: isolate;
}

/* Un degradado por SECCION. Uno por tarjeta produce bandas en cuanto el
   panel es malo, que es la mitad de los telefonos de un taller. */
.servia-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--luz-seccion);
    pointer-events: none;
    z-index: -1;
}

.servia-section.alt {
    background: var(--dark-bg);
}

.servia-section-head {
    max-width: 720px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
}

.servia-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.75rem;
}

.servia-h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.4vw, 2.25rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.25;
    margin-bottom: var(--spacing-sm);
}

.servia-sub {
    color: var(--gray-light);
    font-size: 1rem;
    line-height: 1.8;
}

/* Dolores */
/* Dolores: .bento con cuatro azulejos de c3, es decir 2x2. Con la rejilla
   auto-fit anterior salian tres arriba y uno huerfano abajo, que es
   justo la sensacion de "sobra uno" que no quieres en la seccion que
   plantea el problema. */

.pain-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid rgba(148, 163, 184, 0.4);
    border-radius: var(--radius-lg);
    padding: 1.65rem 1.75rem;
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.pain-card:hover {
    transform: translateY(-4px);
    border-left-color: var(--accent-color);
    border-color: var(--border-hover);
}

.pain-card h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.65rem;
}

.pain-card p {
    color: var(--gray-light);
    font-size: 0.92rem;
    line-height: 1.75;
}

.pain-card .pain-fix {
    display: block;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--neon-green);
    font-size: 0.87rem;
    font-weight: 500;
}

/* Flujo */
.flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: var(--spacing-md);
    counter-reset: paso;
}

.flow-step {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 1.5rem;
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.flow-step:hover {
    transform: translateY(-6px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

.flow-step-num {
    counter-increment: paso;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.flow-step-num::before {
    content: counter(paso);
}

.flow-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.6rem;
}

.flow-step p {
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Módulos — ahora es .bento + .tile + .chip (seccion 2). Las reglas
   .module-grid / .module-card / .module-icon se han retirado: su marcado
   ya no existe. */

/* White-label */
.brand-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: center;
}

.brand-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.brand-list li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.brand-list i {
    color: var(--neon-green);
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.brand-list strong {
    display: block;
    color: var(--white);
    font-size: 0.97rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.brand-list span {
    color: var(--gray-light);
    font-size: 0.9rem;
    line-height: 1.65;
}

.brand-preview {
    display: grid;
    gap: var(--spacing-sm);
}

.brand-chip-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}

.brand-chip-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.brand-swatch {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    flex-shrink: 0;
}

.brand-chip-head span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
}

.brand-chip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.brand-chip-meta em {
    font-style: normal;
    font-size: 0.72rem;
    color: var(--gray-light);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}

/* Detalles técnicos */
/* Detalles — .bento + .tile. Estos azulejos no llevan .chip: el icono va
   dentro del propio <h3>, que es lo que ya hacian y se lee bien en una
   tarjeta de texto corrido. */
.tile h3 i {
    color: var(--accent-color);
    font-size: 1.15rem;
    margin-right: 0.55rem;
}

/* Rubros */
.sector-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

.sector-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--acento-suave);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    color: var(--gray-light);
    font-size: 0.9rem;
    transition: border-color var(--transition-base), color var(--transition-base);
}

.sector-tag i {
    color: var(--accent-color);
}

.sector-tag:hover {
    border-color: var(--border-hover);
    color: var(--white);
}

/* Precio */
.price-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg) var(--spacing-md);
    box-shadow: var(--shadow-card);
}

.price-tag {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.6vw, 2.1rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.price-note {
    color: var(--gray-light);
    font-size: 0.97rem;
    line-height: 1.8;
    max-width: 520px;
    margin: 0 auto var(--spacing-md);
}

.price-includes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: var(--spacing-md);
}

.price-includes li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gray-light);
    font-size: 0.88rem;
}

.price-includes i {
    color: var(--neon-green);
}

/* FAQ */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base);
}

.faq-item[open] {
    border-color: var(--border-hover);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.15rem 1.4rem;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

.faq-item summary::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    font-size: 0.9rem;
    color: var(--accent-color);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.faq-item p {
    padding: 0 1.4rem 1.25rem;
    color: var(--gray-light);
    font-size: 0.92rem;
    line-height: 1.8;
    margin: 0;
}

/* CTA final */
.servia-cta {
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-md);
}

.servia-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    color: var(--white);
    margin-bottom: 0.85rem;
}

.servia-cta p {
    color: var(--gray-light);
    margin-bottom: var(--spacing-md);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.servia-cta-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================
   RESPONSIVE
   ========================== */
/* ==========================
   PLANES — TABLA COMPARATIVA
   ==========================
   Es una <table> de verdad y no una rejilla de divs: se está comparando, y un
   lector de pantalla necesita saber que la celda "Ahorras US$60" pertenece a
   la columna "Anual". Los <th scope> lo dicen; una rejilla no puede.

   En móvil NO se transpone: la tabla se desplaza DENTRO de su envoltorio, con
   la columna de conceptos fija. Es el patrón que ya sigue el resto del
   proyecto para tablas anchas — el que nunca puede meter una barra de scroll
   en la página entera, que es la regla dura aquí.
   ========================== */

.planes-envoltorio {
    overflow-x: auto;
    /* El scroll se detiene en cada columna en vez de quedarse a medias. */
    scroll-snap-type: x proximity;
    /* Sitio para la sombra de la columna destacada, que si no se recorta. */
    padding: 0.5rem 0.5rem 1rem;
    margin: 0 -0.5rem;
}

.tabla-planes {
    width: 100%;
    /* Por debajo de esto las cuatro columnas se aprietan tanto que el precio
       parte en dos líneas; a partir de aquí el envoltorio se desplaza. */
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    /* Todos los importes en la misma rejilla vertical. */
    font-variant-numeric: tabular-nums;
}

/* --- Cabecera: el plan y su precio --- */
.tabla-planes thead th {
    position: relative;
    vertical-align: bottom;
    text-align: center;
    padding: 1.5rem 1rem 1.35rem;
    background-color: var(--sup-2);
    background-image: var(--grad-sup);
    border: 1px solid var(--borde);
    border-bottom: 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    scroll-snap-align: center;
}

.tp-esquina {
    background: transparent;
    border: 0;
    /* La primera columna manda el ancho: si no, las tres de plan se reparten
       el sobrante y quedan de anchos distintos según lo largo que sea el
       concepto más largo de cada fila. */
    width: 34%;
    min-width: 190px;
}

.tp-nombre {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin-bottom: 0.7rem;
}

.tp-precio {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--tinta-1);
}

.tp-moneda {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tinta-2);
    vertical-align: 0.65rem;
    margin-right: 0.1rem;
}

.tp-por {
    display: block;
    font-size: 0.82rem;
    color: var(--tinta-2);
    margin-top: 0.3rem;
}

/* Lo que se cobra de verdad, en las dos monedas. Va apagado y pequeño: el
   número que decide es el de arriba; éste es el que se comprueba después. */
.tp-pago {
    display: block;
    font-size: 0.78rem;
    color: var(--tinta-3);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--borde);
}

/* La cinta se apoya en el borde superior del azulejo, sin sobresalir: para
   que asomara habría que quitar el recorte de la tabla entera. */
.tp-cinta {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    padding: 0.25rem 0.8rem;
    border-radius: 2rem;
    background: var(--acento-hondo);
    border: 1px solid var(--borde-vivo);
    color: var(--tinta-1);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* --- Cuerpo --- */
.tabla-planes tbody th,
.tabla-planes tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--borde);
    font-size: 0.92rem;
}

.tabla-planes tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--tinta-2);
    /* Fija al desplazar en horizontal: sin esto, en un móvil se pierde de
       vista de qué concepto es la casilla que se está mirando. */
    position: sticky;
    left: 0;
    background: var(--sup-1);
    z-index: 1;
}

.tabla-planes tbody td {
    text-align: center;
    color: var(--tinta-1);
    background-color: var(--sup-2);
    border-left: 1px solid var(--borde);
}

.tabla-planes tbody tr:last-child td { border-bottom: 0; }

/* La fila de los meses es la que decide la compra: se lee antes que el resto. */
.tp-fila--fuerte td {
    font-size: 1.02rem;
    font-weight: 700;
}

.tp-si {
    color: var(--ok);
    font-size: 1.15rem;
}

/* --- La columna destacada, de arriba abajo --- */
.tp-plan--destacado,
.tp-col--destacada {
    background-color: var(--sup-3) !important;
    border-left: 1px solid var(--borde-vivo);
    border-right: 1px solid var(--borde-vivo);
}

.tp-plan--destacado {
    border-color: var(--borde-vivo);
    box-shadow: 0 -10px 30px rgba(2, 6, 15, 0.45);
}

/* --- Pie: los botones --- */
.tabla-planes tfoot td {
    padding: 1.25rem 1rem 1.5rem;
    text-align: center;
    background-color: var(--sup-2);
    border: 1px solid var(--borde);
    border-top: 0;
    border-radius: 0 0 var(--r-md) var(--r-md);
}

.tabla-planes tfoot .tp-esquina {
    background: transparent;
    border: 0;
}

.tp-btn {
    width: 100%;
    justify-content: center;
}

/* --- La nota de debajo --- */
.planes-nota {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    max-width: 720px;
    margin: var(--spacing-md) auto 0;
    padding: 1.15rem 1.35rem;
    background: var(--pozo);
    border-radius: var(--r-md);
    box-shadow: var(--n-hundido);
    color: var(--tinta-2);
    font-size: 0.92rem;
    line-height: 1.7;
}

.planes-nota i {
    color: var(--ok);
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.planes-nota strong { color: var(--tinta-1); }

/* Texto sólo para lectores de pantalla. El "Incluido" de cada ✓ tiene que
   existir: un icono sin texto se lee como nada. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* La pista de que la tabla se desliza. Sale SOLO donde la tabla no cabe
   (bajo su `min-width`), asi que no hay que preguntarle nada a JavaScript:
   por encima de ese ancho la tabla entra entera y el aviso sobra. */
.planes-pista {
    display: none;
    text-align: center;
    font-size: 0.82rem;
    color: var(--tinta-3);
    margin-top: 0.75rem;
}

@media (max-width: 700px) {
    .planes-pista { display: block; }
}

@media (max-width: 560px) {
    .tabla-planes thead th { padding: 1.35rem 0.6rem 1.2rem; }
    .tp-precio { font-size: 1.9rem; }
    .tp-moneda { font-size: 0.85rem; vertical-align: 0.5rem; }
    .tabla-planes tbody th,
    .tabla-planes tbody td { padding: 0.7rem 0.65rem; font-size: 0.86rem; }

    /* La columna de conceptos se estrecha: a 320px se comia dos tercios del
       ancho y de los planes solo asomaba uno. */
    .tp-esquina { width: 30%; min-width: 132px; }

    .planes-nota { flex-direction: column; gap: 0.5rem; }
}

/* ==========================
   MATERIAL COMPARTIDO
   ==========================
   Las tarjetas que no son azulejos del bento (dolores, pasos del flujo,
   fichas de marca, precio, FAQ y el CTA final) llevan el mismo material:
   degradado del 3% y relieve. Va en una regla agrupada y al FINAL de la
   hoja a proposito -- cada una de esas reglas fija su propio
   `border-radius` mas arriba, asi que un bloque anterior perderia.

   Una sola regla y no seis copias: el dia que el relieve se ajuste, se
   ajusta aqui. Seis copias es como se acaba con cinco tarjetas iguales y
   una que se quedo atras.
   ========================== */
.pain-card,
.flow-step,
.brand-chip-card,
.price-card,
.faq-item,
.servia-cta {
    background-image: var(--grad-sup);
    box-shadow: var(--n-alto);
    border-radius: var(--r-md);
}

.price-card,
.servia-cta {
    border-radius: var(--r-lg);
}

/* El icono de los modulos y el de los dolores comparten el chip en
   relieve: son la misma pieza en dos sitios. */
.pain-card .pain-icono,
.module-icon {
    box-shadow: var(--n-chip);
}

/* --- El bento colapsa antes que el resto: 6 columnas -> 2 -> 1.
       Es lo unico de esta hoja que puede meter una barra de scroll
       lateral, porque es lo unico que reparte anchos fijos. --- */
@media (max-width: 980px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .c2, .c3 { grid-column: span 1; }
    .c4, .c6 { grid-column: span 2; }
    /* El azulejo alto deja de serlo: en dos columnas su vecino no tiene
       con que rellenar la fila que dejaria libre. */
    .f2 { grid-row: span 1; }
}

@media (max-width: 620px) {
    .bento {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }
    .c2, .c3, .c4, .c6 { grid-column: span 1; }
    .tile { padding: 1.35rem; }
    .tile--destacado { padding: 1.5rem; }
    /* Una sola columna: las capturas mas altas que anchas se comerian
       media pantalla de scroll ellas solas, asi que se acotan. */
    .tile--captura .marco { max-height: 62vh; }
}

@media (max-width: 968px) {
    .servia-hero-grid,
    .brand-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .captura-hero {
        transform: none;
        margin-top: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .servia-hero {
        padding-top: 130px;
    }

    .servia-lead {
        font-size: 0.97rem;
    }

    .servia-hero-cta .btn,
    .servia-cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .movil-fila .captura {
        flex-basis: 240px;
        max-width: 240px;
    }
}

.bi { display: inline-block; vertical-align: middle; }
