/* =============================================================================
   PÁGINAS COMERCIALES DEL SILO ESPAÑOL  ·  13-oct-2026
   Vista: resources/views/web/pagina-silo.blade.php
   Bloques: resources/views/web/componentes/v2_es/silo/

   Solo la cargan esas páginas, y detrás de `seccion-es.css` y de
   `home-v2.bundle.css`. De la primera salen las variables (`--sx-…`, declaradas
   en `.v2es`), el botón, la tabla, las reseñas y la pieza del botón. Del bundle,
   el carrusel de plantillas y las preguntas. Aquí va solo lo propio: la cabecera,
   las columnas, las capturas, las tarjetas y los pasos.

   Todos los selectores son `.silo-…`. Donde hace falta tocar una pieza de la
   casa se hace desde `.silo-b`, que vale más que su selector y carga después:
   ni `!important` ni cambios en las hojas compartidas.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · EL BLOQUE
   `.v2es` reserva 2.000 px por bloque con `content-visibility` (es para los
   tres bloques largos de la portada). Aquí cada bloque mide lo que mide y se
   pinta siempre: son cortos y las anclas no pueden saltar.
   --------------------------------------------------------------------------- */
.silo-b {
    content-visibility: visible;
    contain-intrinsic-size: none;
    padding: 0;
}
.silo-b > .v2es__inner { padding-top: 44px; padding-bottom: 44px; }
@media (min-width: 768px)  { .silo-b > .v2es__inner { padding-top: 56px; padding-bottom: 56px; } }
@media (min-width: 1280px) { .silo-b > .v2es__inner { padding-top: 68px; padding-bottom: 68px; } }

.silo-b--suave { background: var(--sx-soft); }
.silo-b--plano { background: transparent; }

/* Las anclas no se quedan debajo de la cabecera fija (64 px). */
.silo-b[id], .silo-plant[id], .silo-faq[id] { scroll-margin-top: 72px; }

/* ---------------------------------------------------------------------------
   2 · EL TEXTO
   Una columna de lectura de 680 px, como la de la página de digitales o papel.
   --------------------------------------------------------------------------- */
/* El titular de cada bloque: centrado y encima de todo, como los de la portada.
   Un escalón por debajo del H1 (30/38/44) para que el H1 mande, y con el ancho
   contenido para que los largos partan en dos líneas parejas. */
.silo-h2 {
    font-family: var(--v2-font-heading, inherit);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--sx-ink);
    text-align: center;
    text-wrap: balance;
    max-width: 760px;
    margin: 0 auto var(--sx-24);
}
@media (min-width: 768px)  { .silo-h2 { font-size: 29px; margin-bottom: var(--sx-32); } }
@media (min-width: 1280px) { .silo-h2 { font-size: 32px; } }

.silo-tx { max-width: 680px; margin: 0 auto; text-align: left; }
.silo-tx p { font-size: 16px; line-height: 1.7; color: var(--sx-muted); text-wrap: pretty; }
@media (min-width: 768px) { .silo-tx p { font-size: 17px; } }
.silo-tx p + p { margin-top: var(--sx-16); }
.silo-tx p strong { color: var(--sx-ink); }
.silo-tx--centro { text-align: center; }
.silo-tx--tras { margin-top: var(--sx-32); }

/* El botón suelto de un bloque: centrado y nunca a todo el ancho. */
.silo-bt { margin-top: var(--sx-32); text-align: center; }

/* ---------------------------------------------------------------------------
   3 · TEXTO Y CAPTURA, LADO A LADO
   Las capturas del móvil son altas. En ordenador van a la derecha del texto y
   este se centra con ellas. Por debajo de 900, una columna y la captura al final.
   --------------------------------------------------------------------------- */
.silo-dos { display: grid; gap: var(--sx-32); }
@media (min-width: 900px) {
    .silo-dos:not(.silo-dos--tabla) { grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: center; }
    .silo-dos:not(.silo-dos--tabla) > .silo-tx { max-width: none; margin: 0; }
}

/* TEXTO, CAPTURA Y TABLA (13-oct, Jose: en escritorio se desaprovechaba el espacio).
   Con el texto a un lado y la captura al otro, dos párrafos quedaban junto a una
   captura de 700 px y el hueco se veía encima y debajo del texto. Centrar o subir el
   texto solo mueve el hueco de sitio: se quita igualando las alturas, y para eso la
   tabla sube a la columna del texto. La captura ocupa las dos filas.
   Solo a partir de 1024, que es cuando la columna de la izquierda mide 580 px o más
   y la tabla de tres columnas cabe sin apretarse. Por debajo va todo en una columna,
   en el orden del HTML (texto, captura, tabla), que es como se ve en el móvil. */
/* Con `.silo-b` delante, para ganarle al margen que la tabla lleva cuando va suelta (apartado 9):
   aquí la separación la pone la rejilla, y en el móvil tiene que quedar como estaba. */
.silo-b .silo-dos--tabla > .silo-tabla { margin-top: 0; }
@media (min-width: 1024px) {
    .silo-dos--tabla {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "tx fig" "tabla fig";
        grid-template-rows: auto 1fr;
        column-gap: 56px;
        row-gap: var(--sx-24);
        align-items: start;
    }
    .silo-dos--tabla > .silo-tx    { grid-area: tx; max-width: none; margin: 0; }
    .silo-dos--tabla > .silo-fig   { grid-area: fig; max-width: 340px; align-self: center; }
    .silo-dos--tabla > .silo-tabla { grid-area: tabla; max-width: none; }
}

/* DOS OPCIONES, CADA UNA CON SU TROZO DE PANTALLA (13-oct, mismo hueco que arriba).
   El bloque era texto a un lado y la captura entera del editor al otro: 290 px de
   texto junto a 730 de captura. La captura enseña las dos opciones de las que habla
   el texto, así que en ordenador se parte en dos y cada mitad va con su párrafo.

   POR DEBAJO DE 900 TODO SIGUE COMO ESTABA: el texto seguido y la captura entera
   debajo. Los recortes no se enseñan (ni se descargan: cargan al verse). Los
   párrafos de las opciones van dentro de su caja, así que el margen que les daría
   `p + p` se lo pone la caja. */
.silo-op__img, .silo-tx p.silo-op__pie { display: none; }
.silo-op__c + .silo-op__c, .silo-op__pares, .silo-tx p.silo-op__tras { margin-top: var(--sx-16); }

@media (min-width: 900px) {
    .silo-dos.silo-op { display: block; }
    .silo-op__entera { display: none; }
    .silo-op__img { display: block; }

    .silo-dos.silo-op > .silo-op__tx { max-width: none; margin: 0; }
    /* La entrada y lo de después, en la columna de lectura de siempre y centradas. */
    .silo-op__tx > p { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }

    /* Las dos tarjetas. Subrejilla de dos filas: los recortes en una y los párrafos
       en otra, para que los dos textos empiecen a la misma altura aunque un recorte
       sea más alto que el otro. El hueco es solo entre columnas, y el aire de arriba
       y de abajo va en el primer y en el último hijo, no en la tarjeta: con subrejilla,
       el `gap` vertical y el relleno vertical de la tarjeta estiran las filas. */
    .silo-op__pares {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
        column-gap: var(--sx-24);
        row-gap: 0;
        margin-top: var(--sx-32);
    }
    .silo-op__c {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        padding: 0 var(--sx-32);
        background: var(--sx-paper);
        border: 1px solid var(--sx-line);
        border-radius: var(--sx-r-md);
        box-shadow: var(--sx-sombra);
    }
    .silo-op__c + .silo-op__c { margin-top: 0; }
    .silo-op__c > .silo-op__img { align-self: center; max-width: 296px; padding-top: var(--sx-32); }
    /* El recorte es la tarjeta del editor con lo de fuera transparente y ya trae su propio
       marco: sin borde, sin sombra y sin fondo, para que se pose sobre la tarjeta blanca. */
    .silo-op__c > .silo-op__img img { border: 0; box-shadow: none; background: none; border-radius: 0; }
    .silo-op__c > p { padding: var(--sx-16) 0 var(--sx-32); }

    .silo-tx p.silo-op__pie {
        display: block;
        margin-top: var(--sx-16);
        font-size: 13px; line-height: 1.5;
        color: var(--sx-muted);
    }
    .silo-tx p.silo-op__tras { margin-top: var(--sx-24); }
}

/* ---------------------------------------------------------------------------
   4 · LAS CAPTURAS
   Llevan su ancho y su alto en el HTML, así que no mueven nada al cargar.
   --------------------------------------------------------------------------- */
.silo-fig { margin: 0 auto; width: 100%; max-width: 320px; }
.silo-fig img {
    display: block;
    width: 100%; height: auto;
    border-radius: var(--sx-r-md);
    border: 1px solid var(--sx-line);
    box-shadow: var(--sx-sombra);
    background: var(--sx-wash);
}
.silo-fig figcaption {
    margin-top: var(--sx-12);
    font-size: 13px; line-height: 1.5;
    color: var(--sx-muted);
    text-align: center;
    text-wrap: balance;
}
.silo-fig--ancha { max-width: 720px; }
.silo-fig--bloque { margin-top: var(--sx-32); }

/* Los pasos y sus dos capturas. En ordenador, los pasos a la izquierda con la
   captura corta debajo, y la alta a la derecha ocupando las dos filas. En el
   móvil, una columna y en el orden del HTML: pasos, la alta y la corta. */
@media (min-width: 900px) {
    .silo-dos--pasos {
        grid-template-areas: "tx lado" "bajo lado";
        grid-template-rows: auto 1fr;
        align-items: start;
        row-gap: var(--sx-40);
    }
    .silo-dos--pasos > .silo-tx { grid-area: tx; }
    .silo-dos--pasos > .silo-fig--lado { grid-area: lado; }
    .silo-dos--pasos > .silo-fig--bajo { grid-area: bajo; margin: 0 auto 0 52px; max-width: 340px; }
}

/* ---------------------------------------------------------------------------
   5 · LA CABECERA
   --------------------------------------------------------------------------- */
.silo-cab > .v2es__inner { padding-top: 28px; padding-bottom: 40px; }
@media (min-width: 768px)  { .silo-cab > .v2es__inner { padding-top: 36px; padding-bottom: 56px; } }
@media (min-width: 1280px) { .silo-cab > .v2es__inner { padding-top: 44px; padding-bottom: 72px; } }

.silo-cab__in { display: grid; gap: var(--sx-32); }
.silo-cab__tx { text-align: center; }
@media (min-width: 900px) {
    .silo-cab__in { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: center; }
    .silo-cab__tx { text-align: left; }
    .silo-cab .v2es-migas ol { justify-content: flex-start; }
}
.silo-cab__fig { max-width: 340px; }

.silo-h1 {
    font-family: var(--v2-font-heading, inherit);
    font-size: 30px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sx-ink);
    margin: 0 0 var(--sx-16);
    text-wrap: balance;
}
@media (min-width: 768px)  { .silo-h1 { font-size: 38px; } }
@media (min-width: 1280px) { .silo-h1 { font-size: 44px; } }

.silo-cab__p { font-size: 16px; line-height: 1.65; color: var(--sx-muted); text-wrap: pretty; }
@media (min-width: 768px) { .silo-cab__p { font-size: 17px; } }
.silo-cab__p + .silo-cab__p { margin-top: var(--sx-12); }
.silo-cab__p strong { color: var(--sx-ink); }

.silo-cab__bts {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--sx-8) var(--sx-24);
    margin-top: var(--sx-24);
}
@media (min-width: 900px) { .silo-cab__bts { justify-content: flex-start; } }

/* El segundo enlace de la cabecera: texto, con 44 px de zona táctil. */
.silo-enl {
    display: inline-flex; align-items: center;
    min-height: 44px;
    font-size: 16px; font-weight: 600;
}

/* LA SEÑAL DE CONFIANZA, debajo de los botones: la de la cabecera de la portada. */
.silo-cab__conf { margin-top: var(--sx-16); }
@media (min-width: 900px) { .silo-cab__conf { justify-content: flex-start; } }
/* En el móvil las estrellas y la frase no caben en una línea: las estrellas arriba y la
   frase debajo, las dos centradas, en vez de la frase partida al lado de las estrellas. */
@media (max-width: 899px) {
    .silo-cab__conf { justify-content: center; flex-wrap: wrap; row-gap: 6px; }
    .silo-cab__conf > span:last-child { white-space: nowrap; }
}

/* LA COMPOSICIÓN DE LA CABECERA (13-oct, solo en ordenador)
   La captura no va sola: detrás, la línea del corazón de la portada. Montado sobre su
   esquina de abajo, un móvil con lo que se abre al tocar el enlace. Por debajo de 900
   se ve solo la captura, como siempre: las otras dos piezas no se enseñan. */
.silo-cab__linea, .silo-cab__tel { display: none; }
@media (min-width: 900px) {
    .silo-cab { overflow: hidden; }                 /* la línea se sale por la derecha y se corta aquí */
    .silo-cab > .v2es__inner { max-width: 1120px; }
    .silo-cab__in { grid-template-columns: minmax(0, 1fr) 480px; gap: 40px; }
    /* La captura a la derecha y el móvil a su izquierda, pisándole solo el borde: lo que
       hay que leer en la captura (el mensaje con el nombre) queda siempre a la vista. */
    .silo-cab__arte--dos { position: relative; padding: 0 0 0 150px; }
    .silo-cab__arte--dos .silo-cab__fig { position: relative; z-index: 1; max-width: 330px; margin: 0; }
    .silo-cab__arte--dos .silo-cab__fig img { box-shadow: var(--sx-sombra-xl); }
    .v2es .silo-cab__linea {
        display: block;
        position: absolute; z-index: 0;
        width: 600px; max-width: none; height: auto;
        right: -235px; top: -120px;
        pointer-events: none;
    }
    .v2es .silo-cab__tel {
        display: block;
        position: absolute; z-index: 2;
        left: -16px; bottom: 30px;
        width: 158px; height: auto;
        transform: rotate(-7deg);
        filter: drop-shadow(0 22px 28px rgba(24, 24, 24, 0.26));
    }
}

/* LA BARRA DE SELLOS, debajo de la cabecera. Es la de la portada tal cual. Allí, en el
   móvil, sube 80 px para montarse sobre la imagen de la cabecera. Aquí no hay imagen
   sobre la que montarse y se queda en su sitio. */
@media (max-width: 767px) { .silo-sellos .v2-proof-bar { margin-top: 0; } }
@media (min-width: 768px) { .silo-sellos { max-width: 1200px; margin: 0 auto; } }
.silo-ancla { display: block; scroll-margin-top: 96px; }

/* LA CAPTURA CON SUS PARTES SEÑALADAS
   Un punto numerado sobre la captura y el mismo número en el texto, donde se habla de
   esa parte. El número lo escribe la hoja (`data-n`), así que no está en el texto de la
   página. */
.silo-anot { position: relative; width: 100%; max-width: 320px; margin: 0 auto; }
.silo-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--sx-brand);
    color: var(--sx-paper);
    font-family: var(--v2-font-heading, inherit);
    font-size: 12px; font-weight: 700; line-height: 1;
    vertical-align: 2px;
}
.silo-n::before { content: attr(data-n); }
.silo-n--img {
    position: absolute;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    font-size: 14px;
    border: 2px solid var(--sx-paper);
    box-shadow: 0 6px 14px -4px rgba(24, 24, 24, 0.45);
}
/* La captura que solo va en ordenador, y con ella los números del texto. */
@media (max-width: 899px) {
    .silo-b--figpc .silo-anot, .silo-b--figpc .silo-n { display: none; }
    .silo-b--figpc .silo-dos { display: block; }
}

/* ---------------------------------------------------------------------------
   6 · LAS TARJETAS (lo que incluye y las guías)
   --------------------------------------------------------------------------- */
.silo-cards { list-style: none; display: grid; gap: var(--sx-16); margin-top: var(--sx-32); }
@media (min-width: 640px)  { .silo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .silo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sx-24); } }

.silo-card {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--sx-24);
    background: var(--sx-paper);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-r-md);
    box-shadow: var(--sx-sombra);
    text-align: left;
}
.silo-card__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-bottom: var(--sx-12);
    border-radius: var(--sx-r);
    background: var(--sx-soft);
    color: var(--sx-brand);
}
.silo-card__h { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--sx-ink); margin-bottom: 6px; }
.silo-card__p { font-size: 15px; line-height: 1.6; color: var(--sx-muted); }

/* En el móvil, las tarjetas de lo que incluye van en fila: el icono a la izquierda
   y el texto a su lado. Apiladas, seis tarjetas eran pantalla y media de bajar
   para leer seis frases. Las de las guías se quedan como están, que son pocas y
   se pulsan. */
@media (max-width: 639px) {
    .silo-cards:not(.silo-cards--guias) { gap: var(--sx-12); }
    .silo-cards:not(.silo-cards--guias) .silo-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: var(--sx-16);
    }
    .silo-cards:not(.silo-cards--guias) .silo-card__ico { grid-row: 1 / span 2; margin-bottom: 0; }
    .silo-cards:not(.silo-cards--guias) .silo-card__h,
    .silo-cards:not(.silo-cards--guias) .silo-card__p { grid-column: 2; }
    .silo-cards:not(.silo-cards--guias) .silo-card__h { margin-bottom: 2px; }
}

/* Las guías. Solo salen las que ya existen, así que pueden ser de una a cuatro
   (`--n1` a `--n4`): en ordenador, una columna por guía, y con una o dos la fila
   se estrecha y se centra para que las tarjetas no queden anchas y vacías. Toda
   la tarjeta se puede pulsar: el enlace es el nombre y su zona cubre la tarjeta. */
.silo-cards--n1 { grid-template-columns: minmax(0, 340px); justify-content: center; }
@media (min-width: 640px) {
    .silo-cards--n2 { max-width: 680px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
    .silo-cards--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .silo-cards--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sx-16); }
}
.silo-card--guia { transition: border-color var(--sx-t) var(--sx-ease), transform var(--sx-t) var(--sx-ease); }
.silo-card--guia:hover { border-color: var(--sx-brand); transform: translateY(-2px); }
.v2es .silo-card__h a { color: var(--sx-ink); text-decoration: none; }
.silo-card__h a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.silo-card__mas {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: var(--sx-16);
    font-size: 14px; font-weight: 600; color: var(--sx-brand-dark);
}
@media (prefers-reduced-motion: reduce) { .silo-card--guia:hover { transform: none; } }

/* LA REJILLA DE LO QUE VE EL INVITADO (13-oct)
   En un ordenador ancho, cada tarjeta enseña el recorte real de esa parte de la
   invitación. Cuatro columnas: las dos tarjetas `--alta` ocupan las dos filas en los
   extremos (la primera a la izquierda y la segunda a la derecha), y las otras cuatro,
   el centro. El recorte va arriba, a sangre, y el icono se monta sobre su borde.

   Las filas las miden las tarjetas pequeñas, por su texto. El recorte está fuera del
   flujo (`position: absolute`) y se queda con el alto que sobre: en las altas, casi
   todo, y en una pequeña con menos texto que su vecina, lo que le falte para igualarla.
   Así ninguna tarjeta acaba con un hueco en blanco. `--abajo` es el recorte en el que
   manda el final (el botón) cuando no cabe entero.

   POR DEBAJO DE 1180 los recortes no se pintan, y como cargan al verse
   (`loading="lazy"`), tampoco se descargan. La excepción es el recorte `--movil` (el
   itinerario con sus dibujos): en el móvil va dentro de su tarjeta, debajo del texto,
   como una pantalla pequeña. Es lo único del bloque que la captura de los tres
   móviles no enseña. */
.silo-card__img { display: none; }

@media (max-width: 639px) {
    .silo-cards .silo-card__img--movil {
        display: block; position: relative;
        grid-column: 1 / -1; grid-row: 3; justify-self: center;
        width: 240px; height: 392px;
        margin-top: 14px;
        border: 1px solid var(--sx-line);
        border-radius: var(--sx-r);
        overflow: hidden;
        background: #FAF9F5;
    }
    .silo-cards .silo-card__img--movil img {
        display: block; width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 0;
    }
}

/* `--sigue`: lo que enseña el recorte continúa por debajo, y el borde se funde con el papel. */
.silo-card__img--sigue::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
    background: linear-gradient(to bottom, rgba(250, 249, 245, 0), #FAF9F5 90%);
    pointer-events: none;
}

@media (min-width: 1180px) {
    .silo-b--rejilla .v2es__inner { max-width: 1152px; }
    /* La captura de los tres móviles: las tarjetas ya enseñan lo mismo y más. */
    .silo-b--rejilla .silo-fig--bloque { display: none; }

    .silo-cards--rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sx-24); }
    .silo-cards--rejilla .silo-card { padding: 0 0 22px; overflow: hidden; }
    .silo-cards--rejilla .silo-card--alta { grid-row: 1 / span 2; grid-column: 1; }
    .silo-cards--rejilla .silo-card--alta ~ .silo-card--alta { grid-column: 4; }

    .silo-cards--rejilla .silo-card__img {
        display: block; position: relative;
        align-self: stretch; flex: 1 1 192px;
        min-height: 192px;
        background: #F4F1EA;
        border-bottom: 1px solid var(--sx-line);
    }
    .silo-cards--rejilla .silo-card__img img {
        position: absolute; inset: 0;
        display: block; width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 0;
    }
    .silo-cards--rejilla .silo-card__img--abajo img { object-position: 50% 100%; }
    .silo-cards--rejilla .silo-card--alta .silo-card__img { min-height: 300px; }

    .silo-cards--rejilla .silo-card__ico {
        position: relative; z-index: 1;
        margin: -22px 0 var(--sx-12) 20px;
        background: var(--sx-paper);
        border: 1px solid var(--sx-line);
        box-shadow: 0 6px 16px -8px rgba(24, 24, 24, 0.25);
    }
    .silo-cards--rejilla .silo-card__h,
    .silo-cards--rejilla .silo-card__p { padding: 0 20px; }
}

/* ---------------------------------------------------------------------------
   7 · LOS PASOS
   --------------------------------------------------------------------------- */
.silo-pasos { list-style: none; counter-reset: paso; display: grid; gap: var(--sx-16); margin-top: var(--sx-24); }
.silo-pasos li {
    counter-increment: paso;
    position: relative;
    min-height: 36px;
    padding: 5px 0 0 52px;
    font-size: 16px; line-height: 1.6;
    color: var(--sx-ink);
}
@media (min-width: 768px) { .silo-pasos li { font-size: 17px; } }
.silo-pasos li::before {
    content: counter(paso);
    position: absolute; left: 0; top: 0;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--sx-brand);
    color: var(--sx-paper);
    font-family: var(--v2-font-heading, inherit);
    font-size: 16px; font-weight: 700; line-height: 1;
}

/* ---------------------------------------------------------------------------
   8 · LA CITA
   --------------------------------------------------------------------------- */
.silo-cita {
    margin: var(--sx-24) 0;
    padding: var(--sx-24);
    background: var(--sx-paper);
    border: 1px solid var(--sx-line);
    border-left: 3px solid var(--sx-brand);
    border-radius: var(--sx-r);
    box-shadow: var(--sx-sombra);
    quotes: "\201C" "\201D";
}
.silo-tx .silo-cita p { font-size: 17px; line-height: 1.65; color: var(--sx-ink); font-style: normal; }
.silo-cita p::before { content: open-quote; }
.silo-cita p::after  { content: close-quote; }

/* LA CITA Y EL DATO, EN DOS COLUMNAS (13-oct)
   Debajo de las tarjetas iban en una columna de 680: la frase, la cita y el dato, uno
   encima de otro. A partir de 1024 px, la cita a la izquierda y el dato a la derecha,
   con sus cifras en grande debajo (las cajas de cifras de la portada). La cita crece
   hasta el alto de la otra columna, así que las dos acaban a la misma altura.

   En el móvil no cambia nada y las cifras no se pintan. */
.silo-cifras { display: none; }

@media (min-width: 1024px) {
    .silo-tras--dos {
        max-width: none;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 48px;
        margin-top: 48px;
    }
    .silo-tras__a, .silo-tras__b { display: flex; flex-direction: column; }
    .silo-tras__a .silo-cita { flex: 1 1 auto; display: flex; align-items: center; margin-bottom: 0; }

    .silo-cifras {
        list-style: none; margin: auto 0 0; padding: var(--sx-24) 0 0;
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sx-16);
    }
    .silo-cifras li {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        padding: 20px 10px;
        background: var(--sx-paper);
        border: 1px solid var(--sx-line);
        border-radius: 16px;
        text-align: center;
    }
    .silo-cifras strong {
        font-family: var(--v2-font-heading, inherit);
        font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em;
        color: var(--sx-brand);
        white-space: nowrap;
    }
    .silo-cifras span {
        font-size: 12px; line-height: 1.35; font-weight: 500;
        letter-spacing: 0.04em; text-transform: uppercase;
        color: var(--sx-muted);
        text-wrap: balance;
    }
}

/* ---------------------------------------------------------------------------
   9 · LAS PIEZAS DE LA CASA, DENTRO DE UN BLOQUE
   --------------------------------------------------------------------------- */
/* La tabla. Sus 48 px de arriba eran para separarla del índice de su página. */
.silo-b .silo-tabla { margin-top: var(--sx-32); }

/* LA TABLA COMO DOS PLANES (13-oct, bloque "qué es gratis")
   La tabla compara la prueba con el pago. Pintada como tabla era lo más plano de la
   página. A partir de 768 px se pinta con el lenguaje del bloque de precios de la
   portada: cada columna es una tarjeta, la de la prueba destacada en coral con su
   sello, una marca en cada fila y el botón al pie. El HTML es la misma tabla.

   Las columnas se separan con `border-spacing` y cada celda pinta su trozo de tarjeta:
   los lados en todas, la tapa en la de la cabecera y el fondo en la del pie.

   POR DEBAJO DE 768 NO CAMBIA NADA: ni sello, ni pie. El botón va debajo de la tabla. */
.silo-planes__t, .silo-planes__s { display: block; }
.silo-planes__sello, .silo-planes tfoot { display: none; }

@media (min-width: 768px) {
    .silo-b .silo-planes { max-width: 940px; }
    .silo-planes .v2es-tabla {
        width: calc(100% + 40px); margin: 0 -20px;
        border-spacing: 20px 0;
        background: none; border: 0; border-radius: 0; overflow: visible;
    }
    .silo-planes .v2es-tabla th,
    .silo-planes .v2es-tabla td { background: none; border-top: 0; }
    /* Todas las filas, igual de altas: la que cabe en una línea no se queda más baja que el resto. */
    .silo-planes .v2es-tabla tbody th,
    .silo-planes .v2es-tabla tbody td { height: 78px; }

    /* La columna de los rótulos: sin tarjeta. Su cabecera se queda para los lectores de pantalla. */
    .silo-planes .v2es-tabla thead th:first-child { color: transparent; user-select: none; }
    .silo-planes .v2es-tabla tbody th {
        width: 27%;
        padding: 16px 0;
        vertical-align: middle;
        border-top: 1px solid var(--sx-line);
        font-size: 15px; font-weight: 600; color: var(--sx-ink);
    }

    /* Las dos tarjetas: los lados, en todas sus celdas. */
    .silo-planes .v2es-tabla thead th:nth-child(n+2),
    .silo-planes .v2es-tabla tbody td,
    .silo-planes .v2es-tabla tfoot td:nth-child(n+2) {
        width: 36.5%;
        background: var(--sx-paper);
        border-left: 1px solid var(--sx-line);
        border-right: 1px solid var(--sx-line);
    }
    /* La tapa */
    .silo-planes .v2es-tabla thead th:nth-child(n+2) {
        padding: 28px 24px 20px;
        vertical-align: bottom;
        text-align: center;
        border-top: 1px solid var(--sx-line);
        border-radius: var(--sx-r-md) var(--sx-r-md) 0 0;
    }
    /* Las filas, con su marca */
    .silo-planes .v2es-tabla tbody td {
        position: relative;
        padding: 16px 24px 16px 56px;
        vertical-align: middle;
        border-top: 1px solid var(--sx-line);
        font-size: 15px; line-height: 1.5; color: var(--sx-ink);
    }
    .silo-planes .v2es-tabla tbody td::before {
        content: "";
        position: absolute; left: 24px; top: 50%;
        width: 20px; height: 20px; margin-top: -10px;
        border-radius: 50%;
        background: #EFEAE9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 10.4 8.8 13 14 7.4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    }
    /* El fondo, con su botón */
    .silo-planes .v2es-tabla tfoot { display: table-footer-group; }
    .silo-planes .v2es-tabla tfoot td:nth-child(n+2) {
        padding: 20px 24px 28px;
        text-align: center;
        border-top: 1px solid var(--sx-line);
        border-bottom: 1px solid var(--sx-line);
        border-radius: 0 0 var(--sx-r-md) var(--sx-r-md);
    }
    .silo-planes .v2es__btn { min-height: 50px; padding: 13px 24px; font-size: 16px; }

    /* La destacada: la primera tarjeta, con el borde coral de la casa y la marca en coral. */
    .silo-planes .v2es-tabla thead th:nth-child(2),
    .silo-planes .v2es-tabla tbody td:nth-child(2),
    .silo-planes .v2es-tabla tfoot td:nth-child(2) {
        border-left: 2px solid var(--sx-brand);
        border-right: 2px solid var(--sx-brand);
    }
    .silo-planes .v2es-tabla thead th:nth-child(2) { border-top: 2px solid var(--sx-brand); background: var(--sx-paper); color: var(--sx-ink); }
    .silo-planes .v2es-tabla tfoot td:nth-child(2) { border-bottom: 2px solid var(--sx-brand); }
    .silo-planes .v2es-tabla tbody td:nth-child(2)::before {
        background-color: var(--sx-brand);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 10.4 8.8 13 14 7.4'/%3E%3C/svg%3E");
    }

    /* La cabecera de cada plan: sello, nombre y una línea. */
    .silo-planes__sello {
        display: inline-block;
        margin-bottom: var(--sx-12);
        padding: 7px 11px;
        border: 2px solid var(--sx-brand); border-radius: 8px;
        color: var(--sx-brand-dark);
        font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
    }
    .silo-planes__t {
        font-family: var(--v2-font-heading, inherit);
        font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em;
        color: var(--sx-ink);
    }
    .silo-planes__s { margin-top: 6px; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--sx-muted); }

    /* El botón de debajo de la tabla ya está dentro de su tarjeta. */
    .silo-b--planes .silo-bt { display: none; }
}

/* Las reseñas. En la comparativa cuelgan de las tarjetas, con su raya y su aire.
   Aquí abren bloque: sin raya, y con el titular al tamaño de los demás H2. */
.silo-b .v2es-res { margin-top: 0; padding-top: 0; border-top: 0; }
.silo-b .v2es-res__h { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 768px)  { .silo-b .v2es-res__h { font-size: 26px; } }
@media (min-width: 1280px) { .silo-b .v2es-res__h { font-size: 28px; } }

/* La pieza del botón, debajo del texto del cierre. */
.silo-b .v2es-c__cta { margin-top: var(--sx-40); }

/* Los modelos. La sección es la de la portada (`.v2-designs`, con su fondo), y
   las dos cajas de texto no ponen el suyo. El carrusel va pegado al texto. */
.silo-plant { padding: 0 0 8px; }
.silo-plant .silo-b > .v2es__inner { padding-bottom: 28px; }
.silo-plant .v2-container + .silo-b > .v2es__inner { padding-top: 28px; }

/* Las preguntas. Su titular es el de la portada (`.v2-faq__title`): aquí se pone
   al tamaño de los demás H2 de la página. Con dos clases, porque `.v2-section p`
   y `.v2-heading--lg` valen lo mismo que una sola y el bundle carga antes. */
.silo-faq .v2-faq__title { font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; text-wrap: balance; }
@media (min-width: 768px)  { .silo-faq .v2-faq__title { font-size: 29px; } }
@media (min-width: 1280px) { .silo-faq .v2-faq__title { font-size: 32px; } }
/* En la portada las preguntas llegan a 1.400 px de ancho. Aquí, a los 1.024 del
   resto de la página, para que no sea el único bloque que se sale de la columna. */
@media (min-width: 1280px) { .v2-faq.silo-faq .v2-container { max-width: 1024px; padding-left: 16px; padding-right: 16px; } }
/* La frase de entrada, entre el titular y la lista. */
.silo-faq .silo-faq__entrada {
    max-width: 680px;
    margin: 12px auto 0;
    font-size: 16px; line-height: 1.6;
    color: var(--v2-muted, #555555);
    text-align: center;
    text-wrap: balance;
}
/* Debajo de las preguntas va el cierre, no el pie: no hace falta el aire de más. */
.v2-faq.v2es-faq-pag.silo-faq { padding-bottom: 28px; }
@media (min-width: 1280px) { .v2-faq.v2es-faq-pag.silo-faq { padding-bottom: 36px; } }