/* =============================================================================
   SECCIÓN NUEVA DE LA PORTADA ESPAÑOLA — bloques B, A y C
   T07 · 20-sep-2026 · MEJORAS/Nueva seccion/entregas/T07-maqueta/

   Destino en producción: public/css/seccion-es.css
   Lo empuja el propio componente con @push('css_per') (T06 §2.5).
   NO entra en public/css/home-v2.bundle.css: ese bundle lo cargan 8 vistas,
   incluidas /en, /it y /plantillas.

   Depende de las variables de public/css/v2/variables.css, que ya están en el
   bundle que la portada carga antes. Aquí se redeclaran con un fallback para
   que la maqueta se pueda abrir suelta; en producción ganan las de la casa.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0 · TOKENS — todo sale de variables.css; lo propio es la escala de 8 px
   --------------------------------------------------------------------------- */
.v2es {
    --sx-brand:      var(--v2-brand, #E06363);
    --sx-brand-dark: var(--v2-brand-hover, #C85454);
    --sx-soft:       var(--v2-brand-light, #FAF5F5);
    --sx-ink:        var(--v2-dark, #181818);
    --sx-muted:      var(--v2-muted, #555555);
    --sx-paper:      var(--v2-white, #FFFFFF);
    --sx-line:       var(--v2-border, #EDE7E7);

    /* Grises del dibujo de los dispositivos (no son texto: no necesitan 4,5:1) */
    --sx-chrome:     #1D1D1F;
    --sx-chrome-2:   #8E8E96;
    --sx-wash:       #F6F4F3;

    /* Rejilla de 8 */
    --sx-4: 4px;  --sx-8: 8px;   --sx-12: 12px; --sx-16: 16px; --sx-24: 24px;
    --sx-32: 32px; --sx-40: 40px; --sx-48: 48px; --sx-64: 64px; --sx-80: 80px;

    --sx-r:    12px;   /* radio pequeño (filas, píldoras) */
    --sx-r-md: 18px;   /* radio de tarjeta */
    --sx-r-lg: 26px;   /* radio de bloque */

    /* Curva de muelle suave, 250-450 ms (criterio 6 de T07) */
    --sx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sx-t:    0.32s;

    /* Sombra de dos capas, siempre la misma */
    --sx-sombra:    0 1px 2px rgba(24, 24, 24, 0.05), 0 18px 40px -20px rgba(24, 24, 24, 0.22);
    --sx-sombra-xl: 0 1px 2px rgba(24, 24, 24, 0.07), 0 30px 60px -22px rgba(24, 24, 24, 0.28);

    font-family: var(--v2-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--sx-ink);
    -webkit-font-smoothing: antialiased;
    background: var(--sx-paper);
    padding: 40px 0 20px;          /* = .v2-how, medido en la portada real */

    /* La base que se hereda dentro del bloque. En la maqueta la ponía el `body`
       del navegador (400 · 16px · normal); en la portada real, `style.css` pone
       `body { font-weight: 300; font-size: 1.05rem; line-height: 1.7 }` y todo
       lo que no declare lo suyo saldría más fino y más suelto que lo aprobado.
       Se fija aquí, en la raíz del bloque, y no se toca nada compartido. */
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
}
.v2es *, .v2es *::before, .v2es *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   0a · EL NAVEGADOR NO PINTA LO QUE NADIE ESTÁ MIRANDO
   ---------------------------------------------------------------------------
   Arreglo 1 de `entregas/T09-auditoria-rendimiento-20sep.md`: los tres bloques
   son ~900 nodos y más de 5.600 px que empiezan a 7,7 pantallas del pliegue, y
   se estaban calculando, maquetando y pintando enteros en la primera carga. Era
   la mayor parte de los +185 ms de TBT medidos contra `/fr`, que es la misma
   vista sin la sección.

   El `auto` de `contain-intrinsic-size` hace que el navegador RECUERDE el alto
   real de cada bloque en cuanto lo ve una vez: el número de abajo solo se usa el
   primer rato y por eso no le mueve el scroll a quien ya ha bajado. El anclaje
   (`#como-hacer-invitaciones-de-boda-digitales`…) y la búsqueda dentro de la
   página siguen funcionando: el navegador activa el bloque antes de saltar.

   En papel se imprime entero, sin saltarse nada.
   --------------------------------------------------------------------------- */
.v2es {
    content-visibility: auto;
    contain-intrinsic-size: auto 2000px;
}
@media print {
    .v2es { content-visibility: visible; }
}

/* ---------------------------------------------------------------------------
   0b · BLINDAJE · los resets de elemento de la casa NO pueden entrar aquí
   ---------------------------------------------------------------------------
   `public/css/style.css` (lo carga el layout ANTES que esta hoja) trae resets
   de ELEMENTO con especificidad 0,0,1:

       h1..h6 { font-family: … !important; line-height: 1.3; margin: 0 0 .5em }
       h2     { font-size: 1.75rem; font-weight: 600 }
       h3     { font-size: 1.25rem; font-weight: 600 }
       p      { font-weight: 300; font-size: 1.05rem; line-height: 1.7; margin: 0 0 1em }
       a      { color: var(--color-primary); text-decoration: none }
       img    { max-width: 100%; height: auto }

   La maqueta los neutralizaba con `:where(.v2es) :where(p)`, que vale **0** de
   especificidad y por tanto PIERDE contra ellos: es la misma trampa que ya se
   cobró cuatro cosas el 20-sep (subtítulo sin centrar, CTA coral sobre coral,
   botón del invitado y logos gigantes). Se arregla dejando el `:where()` solo
   en el elemento: `.v2es :where(p)` vale 0,1,0 — le gana al reset de la casa y
   pierde contra cualquier clase del bloque, que vale lo mismo y va después.

   No se sube la especificidad del bundle ni se usa `!important` sobre ningún
   selector compartido (arreglo 4 del cruce de T07). */
.v2es :where(p),
.v2es :where(h2),
.v2es :where(h3),
.v2es :where(h4) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.v2es :where(img) { max-width: 100%; height: auto; }
.v2es :where(ol), .v2es :where(ul) { margin: 0; padding: 0; }

/* El único bloque con fondo propio: A. Así la portada alterna
   trial(rosa) · B(blanco) · A(rosa) · C(blanco) · videollamada(rosa). */
.v2es--a { background: var(--sx-soft); }

/* EL CIERRE DEL B Y LA ENTRADA DEL A, PEGADOS (Jose, 22-sep, en el teléfono).
   Entre el último punto del carrusel de reseñas y el titular del bloque A había
   124 px de nada: 20 + 32 de cierre del B y 40 + 32 de entrada del A. En PC ese
   aire es el que separa dos bloques a lo ancho de 1.024; en un teléfono es una
   pantalla que se pasa sin leer nada. Se quitan los dos que pone el bloque y se
   quedan los del `__inner`, que son los que el titular necesita para respirar. */
@media (max-width: 1023px) {
    .v2es--a { padding-top: 0; }
    .v2es--b { padding-bottom: 0; }
}


.v2es__inner {                     /* = .v2-how__inner, al píxel */
    max-width: 1024px;
    margin: 0 auto;
    padding: 32px 20px;
    position: relative;
}
@media (min-width: 768px)  { .v2es__inner { padding: 40px 24px; } }
@media (min-width: 1280px) { .v2es__inner { padding: 48px 16px; } }

/* ---------------------------------------------------------------------------
   1 · CABECERA DEL BLOQUE — una idea, un titular, una frase (criterio 1)
   --------------------------------------------------------------------------- */
/* La caja del inner ya mide 992 px en PC, que es lo que T06 §4.3 exige
   para que la búsqueda entera quepa en el H2. No hace falta otra. */
.v2es__head { text-align: center; }

.v2es__h2 {                        /* = .v2-heading .v2-heading--lg */
    font-family: var(--v2-font-heading, inherit);
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sx-ink);
    margin: 0 0 12px;
    text-wrap: balance;
}
@media (min-width: 768px)  { .v2es__h2 { font-size: 32px; } }
@media (min-width: 1280px) { .v2es__h2 { font-size: 38px; } }

.v2es__lede {                      /* = .v2-how__subtitle */
    text-wrap: pretty;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--sx-muted);
    max-width: 520px;
    margin: 0 auto 36px;
}
@media (min-width: 768px) { .v2es__lede { font-size: 17px; margin-bottom: 44px; } }

/* LA NEGRITA DE LOS TEXTOS (22-sep, P-36)
   -----------------------------------------------------------------------------
   Marca la funcionalidad dentro de una frase, no un titular: por eso pesa 600 y
   no el 700 que pone el navegador. A 15-16 px, el 700 dentro de un párrafo corta
   la lectura en vez de guiar el ojo, y en Inter el salto de 400 a 600 ya se ve.
   Donde el texto es gris (la entrada del bloque y la columna de la izquierda de
   la comparativa) sube además a la tinta: ahí el peso solo no basta.
   Qué se puede marcar y dónde, en la cabecera de `lang/es/seccion_es.php`. */
.v2es strong { font-weight: 600; }
.v2es__lede strong,
.v2es-celda--res strong { color: var(--sx-ink); }

/* ---------------------------------------------------------------------------
   2 · ESTADOS: foco, pulsado, zonas táctiles (criterio 10)
   --------------------------------------------------------------------------- */
.v2es :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
.v2es :focus { outline: none; }
.v2es :focus-visible {
    outline: 2px solid var(--sx-brand);
    outline-offset: 3px;
    border-radius: 10px;
}
.v2es :where(a) { color: var(--sx-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.v2es :where(a):hover { color: var(--sx-brand); }
/* El CTA es un enlace, pero se pinta como botón: texto blanco y sin subrayado. */
.v2es a.v2es__btn, .v2es a.v2es__btn:hover { color: var(--sx-paper); text-decoration: none; }
.v2es a.v2es-res__enl { color: var(--sx-brand-dark); }

/* ---------------------------------------------------------------------------
   3 · ICONOS — un solo trazo, un solo grosor (criterio 9)
   --------------------------------------------------------------------------- */
.v2es__i {
    width: 22px; height: 22px;
    flex: 0 0 22px;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.v2es__i--sm { width: 18px; height: 18px; flex-basis: 18px; }

/* ---------------------------------------------------------------------------
   4 · DESPLEGABLES — el motor común de A, B y C
   Se pliega con CSS (grid-template-rows), nunca con display:none: el texto
   sigue en la página y Google lo lee (P-10, regla 2 de T07 §1b).
   CLS 0: el estado plegado ya viene del servidor, no lo pone el JS.
   --------------------------------------------------------------------------- */
.v2es__panel {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--sx-t) var(--sx-ease);
}
.v2es__panel > * { overflow: hidden; min-height: 0; }
.v2es__panel[data-abierto="no"] { grid-template-rows: 0fr; }

/* El chevron de los desplegables */
.v2es__chev {
    width: 20px; height: 20px; flex: 0 0 20px;
    stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none;
    transition: transform var(--sx-t) var(--sx-ease);
    color: var(--sx-muted);
}
[aria-expanded="true"] .v2es__chev { transform: rotate(180deg); color: var(--sx-brand); }

/* =============================================================================
   BLOQUE C · CÓMO SE HACE
   ============================================================================= */

.v2es-c__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sx-24);
    align-items: start;
}
@media (min-width: 1024px) {
    .v2es-c__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
    }
}

/* --- La pieza del editor: fija mientras pasan los pasos (criterio 7) --- */
/* `top` tiene que dejar libre la cabecera FIJA de la portada, que mide 64 px en
   las dos anchuras (`.site-header`, `position: fixed`). En la maqueta no había
   cabecera y a 390 se quedó en 8 px: medido dentro de la portada real, el
   portátil se pegaba DEBAJO del menú y perdía 48 px de su borde superior. En PC
   ya estaba bien (96 > 64). */
.v2es-c__media {
    position: sticky;
    /* Pegado JUSTO al borde inferior de la cabecera (64 px), no 8 px más abajo:
       en esa rendija de 8 px se leía la mitad inferior de las letras del paso
       que pasaba por detrás. El aire se hace con el padding, que sí es opaco. */
    top: 64px;
    z-index: 2;
    padding: 16px 0;
    /* OPACO de arriba abajo. Con el degradado de la maqueta (blanco hasta el
       78 % y transparente después) los cinco pasos se transparentaban por
       detrás del portátil mientras pasaban: medido a 390 px, hasta 189 px de
       una frase leyéndose a medias en gris. */
    background: var(--sx-paper);
    /* Y de borde a borde del bloque: el filete coral del paso abierto vive 8 px
       a la IZQUIERDA de la lista, fuera de la columna, y asomaba solo —una raya
       de color sin nada al lado— mientras su paso pasaba por detrás. */
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}
/* Y sin degradado debajo: un degradado sobre texto que pasa deja letras a medio
   borrar (se vio comiéndose la mitad de «Compartidla por WhatsApp»). El borde
   limpio de una barra fija se lee mejor que un desvanecido sobre una palabra. */
@media (min-width: 768px) {
    .v2es-c__media { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
}
/* EL BORDE DE LA BARRA (22-sep). El fondo opaco tapaba el texto que pasaba por
   detrás, pero no había NADA que dijera que ahí hay una superficie: en un
   teléfono lo que se veía era una frase cortada por la mitad a media palabra, y
   eso se lee como un fallo de pintado, no como un paso que se va. Un filete y
   una sombra muy baja —los de una barra de herramientas— convierten el mismo
   corte en «el texto pasa por debajo». En PC no hace falta: allí la pieza está
   en su columna y no tiene nada que tapar. */
@media (max-width: 1023px) {
    .v2es-c__media {
        padding-top: 12px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--sx-line);
        box-shadow: 0 12px 14px -14px rgba(24, 24, 24, 0.35);
    }
}
@media (min-width: 1024px) {
    /* La pieza es más baja que la lista de pasos: centrada, la columna no
       deja un hueco blanco debajo. Con sticky se queda fija igual al pasar. */
    .v2es-c__media { top: 96px; margin: 0; padding: 0; background: none; align-self: center; }
}

/* --- La lista de pasos --- */
.v2es-pasos { list-style: none; margin: 0; padding: 0; }

.v2es-paso { border-top: 1px solid var(--sx-line); }
.v2es-paso:last-child { border-bottom: 1px solid var(--sx-line); }

.v2es-paso__h { margin: 0; font: inherit; }

.v2es-paso__btn {
    display: flex;
    align-items: baseline;
    gap: var(--sx-16);
    width: 100%;
    min-height: 56px;              /* zona táctil > 44 px */
    padding: 18px 4px;
    text-align: left;
}
.v2es-paso__n {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--sx-muted);
    flex: 0 0 26px;
    transition: color var(--sx-t) var(--sx-ease);
}
.v2es-paso__t {
    flex: 1 1 auto;
    font-family: var(--v2-font-heading, inherit);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--sx-ink);
}
@media (min-width: 1280px) { .v2es-paso__t { font-size: 22px; } }

.v2es-paso__btn .v2es__chev { align-self: center; }
.v2es-paso__btn:hover .v2es-paso__t { color: var(--sx-brand-dark); }
.v2es-paso[data-activo="si"] .v2es-paso__n { color: var(--sx-brand); }

/* Filete coral a la izquierda del paso abierto — el único color que cambia */
.v2es-paso { position: relative; }
.v2es-paso::before {
    content: "";
    position: absolute;
    left: -16px; top: 8px; bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--sx-brand);
    opacity: 0;
    transition: opacity var(--sx-t) var(--sx-ease);
}
.v2es-paso[data-activo="si"]::before { opacity: 1; }
@media (max-width: 1023px) { .v2es-paso::before { left: -8px; } }

.v2es-paso__cuerpo {
    font-size: 17px;
    line-height: 1.6;
    color: var(--sx-muted);
    padding: 0 4px 24px 46px;
}
@media (min-width: 1280px) { .v2es-paso__cuerpo { font-size: 18px; } }
.v2es-paso__cuerpo p + p { margin-top: 12px; }


/* --- CTA -------------------------------------------------------------------
   Es una PIEZA con diseño propio, no el cierre por defecto del bloque
   (LECCIONES, 21-sep). La caja es la de la casa: tarjeta rosa de esquinas
   grandes, la misma familia que `.v2-trial__container` y su distintivo de
   borde coral (`public/css/v2/trial.css:19` y `:105`), y el botón conserva
   la del `.v2-btn--primary` (coral, 700, radio 16). Lo que se añade es
   JERARQUÍA: distintivo, titular, botón grande con su flecha, las cuatro
   razones que ganan la venta y, la última y la más pequeña, la letra legal
   —en positivo: lo que se gana con cuenta, no lo que se pierde sin ella. */
.v2es-c__cta { margin-top: var(--sx-40); }

.v2es-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: 36px 20px 28px;
    border-radius: var(--sx-r-lg);
    border: 1px solid var(--sx-line);
    /* Blanco arriba y el rosa de la casa abajo: la caja se ve entera sin
       pesar y el botón cae sobre la parte más clara. */
    background: linear-gradient(180deg, var(--sx-paper) 0%, var(--sx-soft) 100%);
    box-shadow: var(--sx-sombra);
}
@media (min-width: 768px)  { .v2es-cta { padding: 44px 40px 32px; } }
@media (min-width: 1280px) { .v2es-cta { padding: 52px 56px 36px; } }

/* El halo coral detrás del botón: un degradado QUIETO pintado sobre el fondo
   de la propia caja. Ni capa propia, ni desenfoque, ni animación (A22). */
.v2es-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%; top: 50%;
    width: 680px; height: 360px;
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(224, 99, 99, 0.10) 0%, rgba(224, 99, 99, 0) 72%);
    pointer-events: none;
}

.v2es-cta__sello {                 /* = .v2-trial__badge */
    display: inline-block;
    padding: 8px 12px;
    border: 2px solid var(--sx-brand);
    border-radius: 8px;
    /* El texto va en el coral OSCURO y el borde en el claro: a 12 px el coral
       de marca sobre blanco se queda en 3,4:1 y este sube a 4,3:1, que es lo
       máximo que da la paleta sin salirse de ella. El borde no es texto. */
    color: var(--sx-brand-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--sx-16);
}
@media (min-width: 768px) { .v2es-cta__sello { font-size: 13px; } }

.v2es-cta__t {
    font-family: var(--v2-font-heading, inherit);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sx-ink);
    text-wrap: balance;
    margin: 0 0 10px;
}
@media (min-width: 768px)  { .v2es-cta__t { font-size: 27px; } }
@media (min-width: 1280px) { .v2es-cta__t { font-size: 30px; } }

.v2es-cta__sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sx-muted);
    text-wrap: balance;
    max-width: 400px;
    margin: 0 auto var(--sx-24);
}
@media (min-width: 768px)  { .v2es-cta__sub { font-size: 17px; max-width: 620px; } }
@media (min-width: 1280px) { .v2es-cta__sub { max-width: 680px; } }

/* El botón. Sigue siendo el coral de la casa; lo que cambia es que pesa lo
   que tiene que pesar: más alto, con su flecha y con una sombra del propio
   color que lo despega del rosa. NUNCA de ancho completo (regla de la casa). */
.v2es__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sx-8);
    max-width: 100%;
    min-height: 58px;
    padding: 18px 26px;
    border-radius: var(--sx-r-md);
    background: var(--sx-brand);
    color: var(--sx-paper);
    font-family: var(--v2-font-heading, inherit);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 10px 22px -10px rgba(224, 99, 99, 0.75);
    transition: background-color 0.18s var(--sx-ease), transform 0.18s var(--sx-ease), box-shadow 0.18s var(--sx-ease);
}
@media (min-width: 768px) { .v2es__btn { font-size: 19px; padding: 20px 34px; min-height: 62px; } }
.v2es__btn:hover {
    background: var(--sx-brand-dark);
    color: var(--sx-paper);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -12px rgba(224, 99, 99, 0.8);
}
.v2es__btn:active { transform: translateY(0); box-shadow: 0 6px 14px -8px rgba(224, 99, 99, 0.7); }
.v2es__btn .v2es__i { transition: transform 0.18s var(--sx-ease); }
.v2es__btn:hover .v2es__i { transform: translateX(3px); }

/* Las cuatro razones. Van DESPUÉS del botón: quien ya está convencido pulsa,
   y quien duda encuentra aquí lo que nos separa de las otras tres formas de
   hacerla. Cada una está escrita y verificada en el comparador del bloque B. */
.v2es-cta__razones {
    list-style: none;
    display: grid;
    gap: 12px 24px;
    max-width: 320px;
    margin: var(--sx-24) auto 0;
    padding: var(--sx-24) 0 0;
    border-top: 1px solid var(--sx-line);
    text-align: left;
}
/* DOS columnas, no cuatro: a cuatro, la caja de 992 px deja 179 px por razón
   y tres de las cuatro se parten en dos líneas mientras la otra se queda en
   una. En dos columnas cada razón cabe entera en su línea y el bloque se lee
   de un vistazo, que es justo lo que tiene que hacer debajo del botón. */
@media (min-width: 600px)  { .v2es-cta__razones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; gap: 14px 40px; } }
@media (min-width: 1024px) { .v2es-cta__razones { max-width: 720px; gap: 16px 48px; } }

.v2es-cta__r {
    display: flex;
    align-items: flex-start;
    gap: var(--sx-8);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--sx-ink);
}
.v2es-cta__r span { text-wrap: balance; }
.v2es-cta__r .v2es__i { color: var(--sx-brand); margin-top: 1px; }

.v2es__nota { font-size: 15px; line-height: 1.55; color: var(--sx-muted); margin-top: var(--sx-12); }
.v2es-paso__nota {
    display: flex; align-items: flex-start; gap: var(--sx-8);
    font-size: 15px; line-height: 1.55; color: var(--sx-muted);
    margin-top: var(--sx-12);
}
.v2es-paso__nota .v2es__i { color: var(--sx-brand); margin-top: 1px; }
.v2es__aviso { font-size: 13px; line-height: 1.5; color: var(--sx-muted); opacity: 0.85; margin-top: var(--sx-16); }

/* El botón no se levanta si el sistema pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
    .v2es .v2es__btn:hover { transform: none; }
    .v2es .v2es__btn:hover .v2es__i { transform: none; }
}

/* =============================================================================
   DISPOSITIVOS DIBUJADOS — el producto es el protagonista (criterio 5)
   Ni una captura, ni un clipart: marco, radios y sombra de dos capas.
   ============================================================================= */

/* --- Portátil (el editor) --- */
.v2es-mac { width: 100%; max-width: 560px; margin: 0 auto; }
.v2es-mac__lid {
    background: var(--sx-chrome);
    border-radius: 14px;
    padding: 9px 9px 10px;
    box-shadow: var(--sx-sombra-xl);
}
.v2es-mac__screen {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 5px;
    background: var(--sx-paper);
    overflow: hidden;
}
.v2es-mac__base {
    height: 10px;
    margin: 0 -6%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #D5D5DA 0%, #ADADB5 100%);
    position: relative;
}
.v2es-mac__base::after {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    width: 88px; height: 4px;
    transform: translateX(-50%);
    border-radius: 0 0 5px 5px;
    background: var(--sx-chrome-2);
}
/* El tope de 340 px se fue el 22-sep: dentro de una columna de 350 (a 390 px de
   pantalla) dejaba el portátil 10 px estrecho y centrado, y en su cristal va una
   grabación del editor de verdad —cada píxel de ancho se lee—. La columna ya lo
   acota; en tableta manda el 560 de la regla de arriba. */
@media (max-width: 1023px) {
    .v2es-mac { max-width: 560px; }
    /* La peana es más ancha que la tapa (eso es un portátil), pero con la tapa ya
       a todo el ancho de la columna ese −6 % la sacaba 1 px fuera de la pantalla
       y el documento se podía arrastrar de lado. Con −4 % el vuelo se sigue
       viendo y se queda dentro. */
    .v2es-mac__base { margin: 0 -4%; }
}

/* --- Teléfono (el invitado) --- */
.v2es-tel {
    width: 100%;
    max-width: 232px;
    margin: 0 auto;
}
.v2es-tel__marco {
    background: var(--sx-chrome);
    border-radius: 34px;
    padding: 8px;
    box-shadow: var(--sx-sombra-xl);
}
.v2es-tel__screen {
    position: relative;
    aspect-ratio: 390 / 690;
    border-radius: 27px;
    background: var(--sx-paper);
    overflow: hidden;
}
.v2es-tel__isla {
    position: absolute;
    left: 50%; top: 7px;
    width: 72px; height: 19px;
    transform: translateX(-50%);
    border-radius: 12px;
    background: var(--sx-chrome);
    z-index: 3;
}

/* El panel de la pareja dibujado (`.v2es-panelp*`) vivía aquí: se fue el 22-sep
   con las dos caras del bloque A, que ahora son dos fotografías. */

/* --- Pantallas: todas en el HTML, solo se ve la del paso abierto --- */
.v2es-pant { display: none; }
.v2es-pant[data-visible="si"] {
    display: block;
    animation: v2es-entra var(--sx-t) var(--sx-ease) both;
}
/* A23: el panel con texto entra OPACO y se desplaza píxeles enteros */
@keyframes v2es-entra {
    from { transform: translateY(8px); }
    to   { transform: translateY(0); }
}

/* =============================================================================
   PANTALLAS DEL EDITOR (bloque C)
   ============================================================================= */
.v2es-ed { position: absolute; inset: 0; display: flex; font-size: 9px; }
.v2es-ed__rail {
    flex: 0 0 68px;
    background: var(--sx-wash);
    border-right: 1px solid var(--sx-line);
    padding: 10px 8px;
    display: flex; flex-direction: column; gap: 7px;
}
.v2es-ed__raili {
    height: 16px; border-radius: 5px; background: #E9E5E4;
}
.v2es-ed__raili--on { background: var(--sx-brand); opacity: 0.85; }
.v2es-ed__lienzo {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(#E9E4E2 1px, transparent 1px) 0 0 / 11px 11px, #FAF8F7;
    padding: 10px;
    position: relative;
}
.v2es-ed__panel {
    flex: 0 0 84px;
    border-left: 1px solid var(--sx-line);
    background: var(--sx-paper);
    padding: 10px 8px;
    display: flex; flex-direction: column; gap: 8px;
}

/* La invitación dentro del lienzo */
.v2es-inv {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 5 / 7;
    background: linear-gradient(170deg, #FBF9F6 0%, #F2EEE8 100%);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(24, 24, 24, 0.06), 0 10px 20px -10px rgba(24, 24, 24, 0.25);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    position: relative;
    text-align: center;
}
.v2es-inv__hoja {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    width: 42px; height: 22px; color: #9BAE94;
}
.v2es-inv__n {
    font-family: var(--v2-font-heading, inherit);
    font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
    color: #3B3B39;
}
.v2es-inv__f { font-size: 8px; letter-spacing: 0.16em; color: #7C7A76; }
.v2es-inv__sel {
    position: relative;
    display: inline-block;
    padding: 3px 9px;
    border: 1.5px solid var(--sx-brand);
    border-radius: 2px;
    max-width: 100%;
}
.v2es-inv__sel i {
    position: absolute; width: 5px; height: 5px; background: var(--sx-paper);
    border: 1.5px solid var(--sx-brand); border-radius: 1px; display: block;
}
.v2es-inv__sel i:nth-of-type(1) { left: -3.5px; top: -3.5px; }
.v2es-inv__sel i:nth-of-type(2) { right: -3.5px; top: -3.5px; }
.v2es-inv__sel i:nth-of-type(3) { left: -3.5px; bottom: -3.5px; }
.v2es-inv__sel i:nth-of-type(4) { right: -3.5px; bottom: -3.5px; }
/* El cursor del editor, junto al campo seleccionado */
.v2es-inv__cur { position: absolute; right: -11px; bottom: -13px; width: 13px; height: 13px; color: var(--sx-ink); }

/* Paso 01: la rejilla de diseños */
.v2es-dis {
    position: absolute; inset: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    background: var(--sx-paper);
}
.v2es-dis__c { text-align: center; display: flex; flex-direction: column; min-height: 0; }
.v2es-dis__m {
    flex: 1 1 auto; min-height: 0;
    border-radius: 4px;
    background: linear-gradient(170deg, #FBF9F6, #EFEAE4);
    border: 1px solid var(--sx-line);
    position: relative;
}
.v2es-dis__c--on .v2es-dis__m { border-color: var(--sx-brand); box-shadow: 0 0 0 2px rgba(224, 99, 99, 0.25); }
.v2es-dis__c--on .v2es-dis__m::after {
    content: "";
    position: absolute; right: -4px; top: -4px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--sx-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 8px no-repeat;
}
.v2es-dis__n { font-size: 8px; color: var(--sx-muted); margin-top: 4px; letter-spacing: -0.01em; }

/* Paso 03: los controles de detalle */
.v2es-ctrl { display: flex; flex-direction: column; gap: 7px; }
.v2es-ctrl__fila { display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--sx-muted); }
.v2es-ctrl__fila b { font-weight: 600; color: var(--sx-ink); }
.v2es-ctrl__sw { display: flex; gap: 3px; }
.v2es-ctrl__sw i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.v2es-ctrl__barra { height: 4px; border-radius: 3px; background: #EDE9E8; flex: 0 0 4px; align-self: stretch; position: relative; }
.v2es-ctrl__barra::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%;
    border-radius: 3px; background: var(--sx-brand);
}

/* Paso 04 y bloque A: la vista del invitado dentro de una pantalla */
.v2es-rsvp { position: absolute; inset: 0; padding: 32px 12px 14px; font-size: 9px; display: flex; flex-direction: column; }
.v2es-rsvp__cab {
    text-align: center;
    padding: 10px 6px 12px;
    background: linear-gradient(170deg, #FBF9F6, #F2EEE8);
    border-radius: 8px;
    margin-bottom: 10px;
}
.v2es-rsvp__n { font-family: var(--v2-font-heading, inherit); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #3B3B39; }
.v2es-rsvp__f { font-size: 8px; letter-spacing: 0.16em; color: #7C7A76; margin-top: 3px; }
.v2es-rsvp__p { font-size: 10px; font-weight: 600; color: var(--sx-ink); margin-bottom: 6px; }
.v2es-rsvp__op { display: flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--sx-muted); }
.v2es-rsvp__mk {
    width: 12px; height: 12px; flex: 0 0 12px;
    border: 1.5px solid #D6D0CF; border-radius: 50%;
}
.v2es-rsvp__mk--cua { border-radius: 3px; }
.v2es-rsvp__op--on { color: var(--sx-ink); font-weight: 500; }
.v2es-rsvp__op--on .v2es-rsvp__mk {
    border-color: var(--sx-brand);
    background: var(--sx-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 8px no-repeat;
}
.v2es-rsvp__sep { height: 1px; background: var(--sx-line); margin: 9px 0; }
.v2es-rsvp__btn {
    margin-top: auto;
    display: block; width: 100%;
    padding: 10px 8px;
    border-radius: 9px;
    background: var(--sx-brand);
    color: var(--sx-paper);
    font-size: 11px; font-weight: 700;
    text-align: center;
    transition: background-color 0.2s var(--sx-ease);
}
.v2es-rsvp__btn[data-hecho="si"] { background: #4B8B5B; }
/* El botón es lo último que se puede encoger: si algo no cabe, que sobre arriba. */
.v2es-rsvp__btn { flex: 0 0 auto; }

/* Por debajo de 1024 la pantalla del teléfono mide 269 px (a partir de ahí, 318),
   y la situación 1 del bloque A —dos preguntas y cuatro opciones, que es la que
   más lleva— necesita 298. Sobraban 29 px y `.v2es-tel__screen` los recortaba con
   su `overflow: hidden`: en pantalla se veía «Confirmar asistencia» SERRADO a media
   palabra (medido en T11: 19 de sus 28 px). Aquí se aprieta el ritmo del dibujo
   —que es lo que hace una interfaz de verdad cuando la pantalla es pequeña— y se
   recuperan 35 px, seis más de los que hacen falta. Las otras cuatro situaciones
   caben igual: el botón va con `margin-top: auto` y el hueco que sobra se queda
   arriba. Medida de control: `rsvp.scrollHeight` <= alto de `.v2es-tel__screen`
   en las cinco situaciones y a 360, 390, 430, 600, 768 y 900. */
@media (max-width: 1023px) {
    .v2es-rsvp__cab { padding: 7px 6px 8px; margin-bottom: 8px; }
    .v2es-rsvp__p   { margin-bottom: 4px; }
    .v2es-rsvp__op  { padding: 3px 0; }
    .v2es-rsvp__sep { margin: 6px 0; }
}

/* LAS DIEZ PANTALLAS DEL BLOQUE A —y la medida de cuánto pedía cada una, que
   ocupaba aquí treinta líneas— se fueron el 22-sep con los dos dibujos: su pieza
   son ahora dos fotografías. Lo de arriba sigue vivo porque lo usa el paso 04
   del bloque C, que dibuja la misma vista del invitado en un solo teléfono.
   Quien vuelva a dibujar pantallas que se turnan en un cristal, que lea la regla
   que costó dos tareas: el hueco no lo manda el ritmo del dibujo, lo manda el
   CONTENIDO de la que más lleva, y el control es `scrollHeight` del contenido
   <= alto de `.v2es-tel__screen` en TODAS, no solo en la que se está mirando. */

/* Paso 05: compartir + panel */
.v2es-comp { position: absolute; inset: 0; display: flex; background: var(--sx-paper); }
.v2es-comp__izq {
    flex: 0 0 40%;
    border-right: 1px solid var(--sx-line);
    padding: 14px 12px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--sx-wash);
}
.v2es-comp__der { flex: 1 1 auto; padding: 14px 12px; }
.v2es-comp__tit { font-size: 10px; font-weight: 600; color: var(--sx-ink); }
.v2es-comp__acc {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 9px; border-radius: 8px;
    background: var(--sx-paper);
    border: 1px solid var(--sx-line);
    font-size: 10.5px; color: var(--sx-ink); font-weight: 600;
    line-height: 1.25;
}
.v2es-comp__acc--wa { border-color: #CFE8D6; background: #F3FAF5; }
.v2es-comp__acc i { width: 14px; height: 14px; flex: 0 0 14px; display: block; color: #25A354; }
.v2es-comp__enl {
    font-size: 8px; color: var(--sx-muted);
    background: var(--sx-paper); border: 1px dashed var(--sx-line);
    border-radius: 7px; padding: 6px 7px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tabla del panel (paso 05 y bloque A) */
.v2es-tabla { width: 100%; font-size: 8.5px; }
.v2es-tabla__cab {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
}
.v2es-tabla__dato {
    font-family: var(--v2-font-heading, inherit);
    font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--sx-ink);
    line-height: 1;
}
.v2es-tabla__dato span { font-size: 10px; font-weight: 500; color: var(--sx-muted); letter-spacing: 0; margin-left: 4px; }
.v2es-tabla__f {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0;
    border-top: 1px solid var(--sx-line);
    color: var(--sx-muted);
}
.v2es-tabla__av {
    width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
    background: #EFE9E8; color: #A79E9C;
    display: flex; align-items: center; justify-content: center;
}
.v2es-tabla__nom { flex: 1 1 auto; color: var(--sx-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2es-tabla__eti {
    flex: 0 0 auto;
    border-radius: 20px; padding: 2px 6px;
    font-size: 7.5px; font-weight: 600;
    background: #EFF6F1; color: #2F7A48;
}
.v2es-tabla__eti--esp { background: #FDF3E7; color: #9A6413; }
.v2es-tabla__eti--no  { background: #F7EFEF; color: #A25151; }
.v2es-tabla__eti--dieta { background: var(--sx-soft); color: var(--sx-brand-dark); }

/* La fila que entra al confirmar: opaca y desplazada en píxeles enteros (A23) */
.v2es-tabla__f--nueva { display: none; }
.v2es-tabla__f--nueva[data-entra="si"] {
    display: flex;
    animation: v2es-fila 0.42s var(--sx-ease) both;
}
@keyframes v2es-fila {
    from { transform: translateY(10px); }
    to   { transform: translateY(0); }
}

/* =============================================================================
   BLOQUE B · COMPARATIVA — el comparador de Apple (criterio 8)
   ============================================================================= */
.v2es-cmp { display: grid; grid-template-columns: 1fr; gap: var(--sx-12); }

/* -----------------------------------------------------------------------------
   MÓVIL Y TABLETA · CADA PANEL, DEBAJO DE SU TARJETA (22-sep)
   -----------------------------------------------------------------------------
   En el HTML van las CUATRO cabeceras y después los CUATRO paneles, y tiene que
   ser así: en PC los cuatro comparten la fila 2 de la rejilla, que es la única
   forma de que el panel abierto cruce las cuatro columnas. En una sola columna
   ese mismo orden dejaba la comparación —la de Canva, que entra abierta— DESPUÉS
   de las cuatro tarjetas: se pulsaba «Ver la comparación» en la segunda y en
   pantalla no aparecía nada; había que bajar dos tarjetas para encontrarla. Un
   desplegable cuyo contenido no sale debajo de lo que se ha pulsado se lee como
   roto, y era lo primero que se veía del bloque en un teléfono.

   Se arregla con `order`, sin tocar el HTML ni el PC. El `gap` de la rejilla se
   va y el aire lo pone cada tarjeta con su margen: un panel cerrado mide 0 px,
   pero el `gap` lo seguía contando DOS VECES y la tarjeta siguiente quedaba a 24
   px de la anterior mientras la abierta se pegaba a su panel.
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .v2es-cmp { gap: 0; }
    .v2es-cmp__op:nth-of-type(1)    { order: 1; }
    .v2es-cmp__panel:nth-of-type(1) { order: 2; }
    .v2es-cmp__op:nth-of-type(2)    { order: 3; }
    .v2es-cmp__panel:nth-of-type(2) { order: 4; }
    .v2es-cmp__op:nth-of-type(3)    { order: 5; }
    .v2es-cmp__panel:nth-of-type(3) { order: 6; }
    .v2es-cmp__op:nth-of-type(4)    { order: 7; }
    .v2es-cmp__panel:nth-of-type(4) { order: 8; }
    .v2es-cmp__op { margin-top: var(--sx-12); }
    .v2es-cmp__op:nth-of-type(1) { margin-top: 0; }
    /* El panel abierto y su tarjeta son UNA pieza: el aire va debajo del panel,
       no entre la tarjeta y él. */
    .v2es-cmp__panel[data-abierto="si"] { margin-bottom: var(--sx-4); }
}

@media (min-width: 1024px) {
    /* Cabeceras en fila y UN panel debajo, a lo ancho. El estado plegado ya
       viene del servidor: el JS no cambia el layout, así que CLS = 0.
       Sin JS, el <noscript> del componente devuelve todo a una columna.

       CUATRO COLUMNAS desde el 22-sep (P-37), no tres: entró «Otra web o app».
       Siguen en UNA fila a propósito. Un comparador se lee de un vistazo, y en
       dos filas de dos el panel abierto (el de Canva, que viene desplegado del
       servidor) se iría media pantalla más abajo. Lo que se paga por ello son
       232 px por tarjeta en vez de 312, y por eso aquí bajan el aire interior,
       el dibujo y los dos tamaños de letra. */
    .v2es-cmp {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--sx-16) var(--sx-16);
    }
    .v2es-cmp__op:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .v2es-cmp__op:nth-of-type(2) { grid-column: 2; grid-row: 1; }
    .v2es-cmp__op:nth-of-type(3) { grid-column: 3; grid-row: 1; }
    .v2es-cmp__op:nth-of-type(4) { grid-column: 4; grid-row: 1; }
    /* align-self:start es obligatorio: los cuatro paneles comparten celda y un
       grid item se estira a la altura de la fila. Sin esto, el panel cerrado
       —vacío pero del alto del abierto— se pone encima y se come los clics. */
    /* Fila 2, no 3: la 2 era la de los interruptores, que se fueron (P-18). */
    .v2es-cmp__panel { grid-column: 1 / -1; grid-row: 2; align-self: start; }
}

/* --- Cabecera de cada opción --- */
.v2es-cmp__op {
    display: flex; flex-direction: column; width: 100%;
    text-align: left;
    background: #F5F2F1;                 /* cerrada: tarjeta llena, sin borde que compita */
    border: 1px solid transparent;
    border-radius: var(--sx-r-md);
    padding: var(--sx-16);
    transition: background-color var(--sx-t) var(--sx-ease), border-color var(--sx-t) var(--sx-ease), box-shadow var(--sx-t) var(--sx-ease);
}
@media (min-width: 1024px) { .v2es-cmp__op { padding: var(--sx-16); } }
@media (min-width: 1280px) { .v2es-cmp__op { padding: var(--sx-24) var(--sx-16); } }
.v2es-cmp__op:hover { background: #EFEAE9; }
.v2es-cmp__op[aria-expanded="true"] {
    background: var(--sx-paper);
    border-color: var(--sx-brand);
    box-shadow: 0 0 0 1px var(--sx-brand);
}
.v2es-cmp__gancho { flex: 1 1 auto; }    /* el «Ver la comparación» queda abajo en las tres */
.v2es-cmp__dib {
    display: block;
    height: 84px; width: auto;
    margin: 0 auto var(--sx-16) 0;
    color: #B9AFAD;
}
@media (min-width: 1024px) { .v2es-cmp__dib { height: 88px; } }
.v2es-cmp__op[aria-expanded="true"] .v2es-cmp__dib { color: var(--sx-brand); }
.v2es-cmp__h {
    margin: 0;
    font-family: var(--v2-font-heading, inherit);
    font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
    color: var(--sx-ink);
}
@media (min-width: 1024px) { .v2es-cmp__h { font-size: 18px; } }
@media (min-width: 1280px) { .v2es-cmp__h { font-size: 19px; } }
.v2es-cmp__gancho { font-size: 15px; line-height: 1.5; color: var(--sx-muted); margin-top: 6px; }
@media (min-width: 1024px) { .v2es-cmp__gancho { font-size: 14px; } }
.v2es-cmp__mas {
    display: flex; align-items: center; gap: 6px;
    margin-top: var(--sx-12);
    font-size: 14px; font-weight: 600; color: var(--sx-brand-dark);
}

/* LA TARJETA ABIERTA DICE QUE SE CIERRA (23-sep)
   Desde que tocar la abierta la pliega (`data-plegable`, `seccion-es.js` §1),
   su rótulo no puede seguir diciendo «Ver la comparación»: pasa a «Ocultar la
   comparación» y el chevron ya apuntaba hacia arriba. El texto viene del
   atributo `data-o` y no del HTML, para que el texto de la página no cambie.
   Solo con JS: sin él la tarjeta no se cierra y el <noscript> esconde el rótulo. */
.v2es-cmp__mas::before { content: attr(data-o); display: none; }
.v2es-js .v2es-cmp[data-plegable] .v2es-cmp__op[aria-expanded="true"] .v2es-cmp__mas::before { display: block; }
.v2es-js .v2es-cmp[data-plegable] .v2es-cmp__op[aria-expanded="true"] .v2es-cmp__mas > span { display: none; }

/* -----------------------------------------------------------------------------
   MÓVIL Y TABLETA · LA TARJETA SE LEE EN FILA (22-sep)
   -----------------------------------------------------------------------------
   En PC la tarjeta es una COLUMNA de un comparador de cuatro y el dibujo manda
   arriba. En una sola columna esa misma tarjeta se estiraba a lo ancho de la
   pantalla y el dibujo se quedaba arrinconado a la izquierda con 220 px de nada
   a su derecha: 236 px de alto por tarjeta, casi 950 px para leer cuatro
   titulares. Aquí el dibujo pasa a ser la columna de la izquierda y el texto se
   lee a su lado —178 px por tarjeta—, que es como se leen las filas del bloque A
   y las del C: las cuatro opciones se comparan de un vistazo, que es justo lo
   que tiene que hacer un comparador.
   El chevron se va al borde derecho, donde el pulgar lo espera en un desplegable.
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .v2es-cmp__op {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        column-gap: var(--sx-12);
        align-items: start;
    }
    .v2es-cmp__dib {
        grid-column: 1; grid-row: 1 / span 3;
        align-self: center;
        width: 84px; height: auto;
        margin: 0;
    }
    .v2es-cmp__h      { grid-column: 2; font-size: 18px; }
    .v2es-cmp__gancho { grid-column: 2; font-size: 14px; }
    .v2es-cmp__mas    { grid-column: 2; justify-content: space-between; }

    /* EN EL TELÉFONO ENTRAN LAS CUATRO CERRADAS (P-43, 23-sep)
       El servidor sirve Canva abierta, que es la entrada de PC (P-27), y el JS la
       cierra por debajo de 1024 (`seccion-es.js` §3 C). Esto la pinta ya cerrada
       mientras el JS no ha llegado —el panel plegado, sin su margen, y la tarjeta
       con el aspecto de las otras tres—, así que al cerrarla no se mueve nada.
       Solo sin `.v2es-js`; y sin JavaScript manda el <noscript>, que abre las
       cuatro y le gana por especificidad (lleva el id del bloque). */
    .v2es--b:not(.v2es-js) .v2es-cmp__panel { grid-template-rows: 0fr; margin-bottom: 0; }
    .v2es--b:not(.v2es-js) .v2es-cmp__op[aria-expanded="true"] {
        background: #F5F2F1; border-color: transparent; box-shadow: none;
    }
    .v2es--b:not(.v2es-js) .v2es-cmp__op[aria-expanded="true"] .v2es-cmp__dib { color: #B9AFAD; }
    .v2es--b:not(.v2es-js) .v2es-cmp__op[aria-expanded="true"] .v2es__chev { transform: none; color: var(--sx-muted); }
}

/* --- El panel comparado --- */
.v2es-cmp__cuerpo {
    background: var(--sx-soft);
    border-radius: var(--sx-r-lg);
    padding: var(--sx-24) var(--sx-16) var(--sx-32);
    margin-top: var(--sx-4);
}
@media (min-width: 1024px) { .v2es-cmp__cuerpo { padding: var(--sx-32); margin-top: var(--sx-12); } }

/* -----------------------------------------------------------------------------
   LA BARRA FIJA DEL TELÉFONO (23-sep)
   -----------------------------------------------------------------------------
   Un panel abierto mide hasta 3.750 px a 390 (el de Canva). Con la tarjeta ya
   fuera de la pantalla, esta barra se queda bajo la cabecera de la web: dice qué
   opción se está leyendo y la cierra de un toque. Cuándo se ve lo decide el JS
   (`seccion-es.js` §3, `data-barra` en el panel); aquí solo cómo.

   · PEGADA CON `sticky`, dentro del cuerpo del panel: se queda mientras dura su
     comparación y nunca invade la tarjeta de la opción siguiente. El envoltorio
     mide lo que la barra y se devuelve con un margen negativo: no empuja la tabla
     ni un píxel, y con la barra oculta no hay nada que ver ni que tocar.
   · Para que `sticky` funcione, el panel recorta con `overflow: clip` y no con
     `hidden`: `hidden` convierte la caja en un contenedor de scroll y la barra se
     pegaría a ella en vez de a la ventana. Recorta igual durante el pliegue. Un
     Safari anterior al 16 no entiende `clip`, se queda con `hidden` y
     simplemente no ve la barra.
   · ENTRA OPACA Y DESLIZÁNDOSE (A23): sale de debajo de la cabecera, que la tapa
     mientras llega, sin fundirse. Al irse sí se funde: ahí ya no se lee nada.
   · Sin texto en el HTML: el nombre de la opción (`data-t`) y «Ocultar»
     (`data-o`) los pinta `attr()`.
   ---------------------------------------------------------------------------- */
.v2es-cmp__panel > * { overflow: hidden; overflow: clip; }
.v2es-cmp__fija { display: none; }
@media (max-width: 1023px) {
    .v2es-js .v2es-cmp__fija {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--v2es-cab, 64px) + var(--sx-8));
        z-index: 3;
        height: 48px;
        margin: 0 0 -48px;
        pointer-events: none;
    }
    .v2es-cmp__barra {
        display: flex; align-items: center; gap: var(--sx-8);
        width: 100%; height: 48px;
        padding: 0 var(--sx-12) 0 var(--sx-16);
        text-align: left;
        background: var(--sx-paper);
        border: 1px solid var(--sx-line);
        border-radius: 14px;
        box-shadow: var(--sx-sombra);
        pointer-events: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-56px);
        transition: transform 0.18s var(--sx-ease), opacity 0.18s linear, visibility 0s linear 0.18s;
    }
    .v2es-cmp__panel[data-barra="si"] .v2es-cmp__barra {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: transform var(--sx-t) var(--sx-ease), opacity 0s, visibility 0s;
    }
    .v2es-cmp__barra::before {
        content: attr(data-t);
        flex: 1 1 auto; min-width: 0;
        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        font-family: var(--v2-font-heading, inherit);
        font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-ink);
    }
    .v2es-cmp__barra::after {
        content: attr(data-o);
        order: 1; flex: 0 0 auto;
        font-size: 14px; font-weight: 600; color: var(--sx-brand-dark);
    }
    .v2es-cmp__barra .v2es__chev { order: 2; transform: rotate(180deg); color: var(--sx-brand); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .v2es-cmp__barra { transform: none; transition: opacity 0.12s linear, visibility 0s linear 0.12s; }
    .v2es-cmp__panel[data-barra="si"] .v2es-cmp__barra { transition: none; }
}


/* -----------------------------------------------------------------------------
   LA TABLA DE DOS COLUMNAS (rehecha el 22-sep)
   -----------------------------------------------------------------------------
   Jose, sobre la versión anterior: «lo veo forzado, pequeño, repitiendo el icono
   y a la izquierda; no se entiende visualmente a simple vista». Lo era: dos
   listas idénticas de 14 px, cada una con su circulito delante, sobre el mismo
   fondo. Lo que cambia:

   1. UNA SOLA REJILLA para los rótulos y las filas (antes eran dos). Así la
      columna de la derecha se pinta como UNA tarjeta blanca continua: el rótulo
      le pone la esquina de arriba, la última celda la de abajo, y los bordes
      laterales de cada celda cosen el resto sin costuras visibles.
   2. EL ICONO, UNA VEZ. Solo en el rótulo de la derecha y, pequeño, en sus
      celdas; las de la izquierda se quedan sin ninguno. La asimetría es la que
      dice cuál es el problema y cuál la respuesta.
   3. LOS RÓTULOS, EN DOS PISOS y más grandes: arriba de quién es la columna
      («Con la tarjeta de papel» / «Aquí, en My Wedding Board»), debajo y en
      pequeño lo que se lee en ella.

   Los rótulos van en dos columnas a partir de 900 px, que es donde los pares
   también van en dos columnas. POR DEBAJO DE 900 NO (corregido esa misma tarde,
   al mirarlo en el teléfono): allí cada par ocupa el ancho entero y se convierte
   en una tarjeta de dos pisos, así que una cabecera de dos columnas prometía una
   tabla que debajo no estaba. Se apilan, en el mismo orden que los pares —ver el
   `@media (max-width: 899px)` de más abajo.
   ---------------------------------------------------------------------------- */
.v2es-cmp__tabla { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sx-8); }
@media (min-width: 900px) { .v2es-cmp__tabla { column-gap: var(--sx-24); } }

/* Rótulos de columna — NO son encabezados (T06 §1.4)

   LOS DOS RÓTULOS SE APOYAN ABAJO (`justify-content: flex-end`): son dos celdas
   de la MISMA fila de la rejilla, así que miden lo mismo aunque el de la derecha
   lleve el logotipo encima. Sin esto, el de la izquierda se queda arriba del todo
   y las dos frases —que se leen como un par— quedan a alturas distintas. */
.v2es-cmp__lab { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; margin: 0 0 var(--sx-8); }
.v2es-cmp__lab-t {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 600; color: var(--sx-ink);
    letter-spacing: -0.01em; line-height: 1.3;
}
@media (min-width: 900px) { .v2es-cmp__lab-t { font-size: 17px; } }
.v2es-cmp__lab-s { font-size: 13px; line-height: 1.35; color: var(--sx-muted); }

/* La columna de la respuesta va CENTRADA y con el logotipo arriba (22-sep). El
   isotipo firma la columna: antes ahí había un check delante del texto, que era
   un icono más entre los muchos de la tabla. Centrado porque una firma se lee
   centrada, y porque así la tarjeta blanca tiene cabecera propia. */
.v2es-cmp__lab--si { align-items: center; text-align: center; }
.v2es-cmp__lab--si .v2es-cmp__lab-t { color: var(--sx-brand-dark); justify-content: center; }
.v2es-cmp__lab-logo { display: block; width: 36px; height: 36px; margin-bottom: var(--sx-4); }
@media (max-width: 899px) {
    /* LOS DOS RÓTULOS, UNO DEBAJO DE OTRO Y A TODO EL ANCHO (22-sep).
       -------------------------------------------------------------------------
       Estaban en dos columnas de 155 px encabezando unos pares que aquí NO van en
       dos columnas: la cabecera prometía una tabla y debajo venía una lista, y en
       155 px «Aquí, en My Wedding Board» se partía con «Board» solo en su línea,
       centrado, debajo de un logotipo que flotaba sin apoyarse en nada.
       Ahora se leen en el MISMO ORDEN en que vienen los pares —primero la otra
       opción, después nosotros—, cada uno a todo el ancho, y el logotipo firma su
       línea desde dentro. Un filete separa la respuesta del problema, que es la
       misma frontera que se repite luego en cada par. */
    .v2es-cmp__lab { grid-column: 1 / -1; margin: 0 0 var(--sx-8); }
    .v2es-cmp__lab-t { font-size: 15px; }
    .v2es-cmp__lab--si {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: var(--sx-8);
        align-items: center;
        text-align: left;
        padding-top: var(--sx-12);
        border-top: 1px solid var(--sx-line);
        margin-bottom: var(--sx-16);
    }
    .v2es-cmp__lab--si .v2es-cmp__lab-t { justify-content: flex-start; }
    .v2es-cmp__lab-logo {
        grid-row: 1 / span 2;
        width: 22px; height: 22px;
        margin: 0;
    }
}
@media (min-width: 900px) {
    /* La esquina de arriba de la tarjeta blanca. */
    .v2es-cmp__lab { padding-bottom: var(--sx-12); margin-bottom: 0; }
    .v2es-cmp__lab--si {
        background: var(--sx-paper);
        border: 1px solid var(--sx-line); border-bottom: 0;
        border-radius: var(--sx-r) var(--sx-r) 0 0;
        padding: var(--sx-16) var(--sx-16) var(--sx-12);
    }
}

/* Las filas paralelas */
.v2es-par { grid-column: 1 / -1; margin-bottom: var(--sx-8); border-radius: var(--sx-r); overflow: hidden; }
@media (min-width: 900px) {
    /* `display: contents` deja que cada celda caiga en su columna: el problema
       de la izquierda y su respuesta quedan en la MISMA fila. */
    .v2es-par { display: contents; }
}
.v2es-celda {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sx-8);
    padding: var(--sx-12) var(--sx-16);
    font-size: 15px; line-height: 1.55;
}
/* El texto es el que estira: sin esto, con `flex-wrap` puesto para la etiqueta
   de 390, el check se queda solo en su línea y el texto cae debajo. */
.v2es-celda > span:last-child { flex: 1 1 0; min-width: 0; }
.v2es-celda--res { background: #F1EBEA; color: var(--sx-muted); }
.v2es-celda--aqui { background: var(--sx-paper); color: var(--sx-ink); }
.v2es-celda--aqui .v2es__i { color: var(--sx-brand); margin-top: 3px; }

/* La etiqueta de cada mitad: SOLO a 390, donde el par se lee suelto y el rótulo
   de columna ya se ha ido de la pantalla. En PC está en el HTML, oculta. */
.v2es-celda__et {
    flex: 0 0 100%;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #8C7C77; margin-bottom: 2px;
}
.v2es-celda--aqui .v2es-celda__et { color: var(--sx-brand); }

/* -----------------------------------------------------------------------------
   DOS CÁPSULAS Y DOS TONOS (Jose, 22-sep, en dos vueltas y en su teléfono)
   -----------------------------------------------------------------------------
   Primero: «lo veo como muchos cambios de contraste y es raro: están los cuadros
   de blanco, luego el propio cuadro con lo que se compara ese punto, y luego por
   detrás el otro fondo con el color». Era literal —panel en #FAF5F5, encima el
   problema en #F1EBEA, encima la respuesta en blanco: tres grises rosados casi
   iguales, veintidós veces seguidas—, así que el problema se quedó sin caja.

   Después: «los `b_canva_res_1` deberían ir en cápsulas como `v2es-celda--aqui`
   para que se pueda ver bien; usa un buen diseño para que visualmente se pueda
   hacer una buena comparación». También tenía razón: una comparación son DOS
   cosas comparables, y un renglón suelto enfrente de una tarjeta no lo es.

   Las dos cosas a la vez se resuelven quitando el tercer fondo, no añadiéndolo:
   las DOS mitades son cápsulas y las dos son BLANCAS. Solo hay dos valores de
   fondo en toda la tabla —el rosa del panel y el blanco de las cápsulas—, y lo
   que distingue una de otra no es otro gris, es la TINTA:

     · el problema  → borde gris, texto apagado, rótulo gris, sin icono, plano;
     · la respuesta → borde coral, texto a plena tinta, rótulo coral, el check
                      delante y una sombra que la levanta del papel.

   Así el par se lee de un vistazo: la de abajo pesa más que la de arriba, que es
   exactamente lo que la tabla quiere decir. Las dos se tocan (8 px entre ellas,
   24 entre pares), y por eso se leen como un par y no como veintidós tarjetas.
   ---------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .v2es-par { margin-bottom: var(--sx-24); border-radius: 0; overflow: visible; }

    .v2es-celda {
        padding: var(--sx-12) var(--sx-16);
        border-radius: var(--sx-r-md);
        background: var(--sx-paper);
    }

    .v2es-celda--res {
        border: 1px solid var(--sx-line);
        margin-bottom: var(--sx-8);
    }
    .v2es-celda--res .v2es-celda__et {
        font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #A2948F;
    }

    .v2es-celda--aqui {
        /* Coral al 28 %: a plena intensidad la línea compite con el check y con
           el borde de la tarjeta abierta de arriba; así se ve que es nuestra y no
           grita. */
        border: 1px solid rgba(224, 99, 99, 0.28);
        box-shadow: 0 1px 2px rgba(24, 24, 24, 0.05), 0 12px 24px -16px rgba(24, 24, 24, 0.30);
    }

    /* EL RÓTULO DE LA NUESTRA ES LA MARCA, Y LOS DOS TEXTOS ARRANCAN EN LA MISMA X
       -------------------------------------------------------------------------
       Dos cosas a la vez, las dos de Jose (22-sep):

       · «En vez de poner Aquí pon MyWeddingBoard y el corazón, sobre todo en
         móvil.» En un teléfono el rótulo de columna ya se ha ido de la pantalla
         cuando vas por el cuarto par, y «AQUÍ» no dice quién es. El nombre sí, y
         el corazón lo firma once veces sin que haya que leerlo. Va en su
         capitalización, no en versales: es una marca, no una etiqueta.
       · El check SE VA de delante del texto. Ahí empujaba la frase 26 px a la
         derecha, así que las dos mitades del par arrancaban en sitios distintos y
         había que recolocar el ojo en cada salto. Una comparación se lee en
         vertical, y para eso las dos frases tienen que estar a plomo. Lo que
         marcaba el check lo marcan ahora el corazón, el borde coral y la sombra.

       El corazón es el `logo.svg` DE LA CASA por fondo, no una copia inline ni un
       icono nuevo: una sola petición para las cuarenta y cuatro celdas, y el día
       que cambie el logotipo cambia aquí también. Queda anotado que este es un
       sitio más donde vive el logo.
       Todo por `order` y CSS: el HTML no se toca, y en PC (>= 900) el rótulo sigue
       oculto y el check delante del texto, que es donde cose la tarjeta blanca. */
    .v2es-celda--aqui .v2es__i { display: none; }
    .v2es-celda--aqui .v2es-celda__et {
        order: 1;
        flex: 0 0 auto;
        margin-bottom: 0;
        padding-left: 22px;
        min-height: 16px;
        display: flex; align-items: center;
        background: url("../img/logo.svg") left center / 16px 16px no-repeat;
        font-size: 13px; font-weight: 600;
        text-transform: none; letter-spacing: -0.01em;
    }
    .v2es-celda--aqui > span:last-child { order: 2; flex: 0 0 100%; margin-top: var(--sx-4); }
}
@media (max-width: 767px) {
    /* Con una caja menos, el panel puede apretar su relleno: el texto gana 16 px
       de renglón, que a 390 son casi dos palabras. */
    .v2es-cmp__cuerpo { padding-left: var(--sx-12); padding-right: var(--sx-12); }
}

@media (min-width: 900px) {
    .v2es-celda__et { display: none; }
    .v2es-celda { padding: var(--sx-16) 0; border-top: 1px solid var(--sx-line); font-size: 16px; }
    .v2es-celda--res { background: none; }
    /* El cuerpo de la tarjeta blanca: los laterales cosen las celdas entre sí. */
    .v2es-celda--aqui {
        padding: var(--sx-16); border-top-color: #F1ECEA;
        border-left: 1px solid var(--sx-line); border-right: 1px solid var(--sx-line);
    }
    .v2es-par:first-of-type .v2es-celda--res { border-top: 0; }
    .v2es-par:last-of-type .v2es-celda--aqui {
        border-bottom: 1px solid var(--sx-line);
        border-radius: 0 0 var(--sx-r) var(--sx-r);
    }
}

/* EL PIE YA NO ES UNA NOTA AL PIE (22-sep). Es el párrafo donde se cuenta, en
   prosa, lo que hay detrás —y el que Google puede leer como el valor añadido—,
   así que se lee como texto, no como letra pequeña: 15 px, más aire entre
   líneas y una línea que lo separa de la tabla. */
.v2es-cmp__pie {
    font-size: 15px; line-height: 1.7; color: var(--sx-muted);
    margin-top: var(--sx-24); padding-top: var(--sx-16);
    border-top: 1px solid var(--sx-line);
}
/* La línea separa el pie de la tabla, no un párrafo del siguiente. */
.v2es-cmp__pie + .v2es-cmp__pie { border-top: 0; padding-top: 0; margin-top: var(--sx-12); }

/* =============================================================================
   BLOQUE A · SITUACIONES
   -----------------------------------------------------------------------------
   PC (>= 1024): DOS COLUMNAS QUE MIDEN CASI LO MISMO (21-sep).

   La primera versión copiaba la estructura del C —pieza fija a un lado, lista
   pasando por el otro— y con CINCO pasos cuadraba. Con DIEZ situaciones, no:
   medido en la portada real a 1440 y a 1920, la lista medía 1.624 px y la pieza
   362, centrada en una columna de 533. Eran 1.262 px de nada, y subirla arriba
   solo mueve el hueco. Jose, 21-sep: «se desperdicia una cantidad de espacio
   enorme […] y en la columna derecha una foto alineada al centro».

   La composición nueva ataca las dos alturas a la vez:
   · La lista deja de ser diez tarjetas y pasa a FILAS CON FILETE, las de la casa
     (las de los pasos del bloque C): de ~126 px por situación a 83. 1.624 → 845.
   · El escenario deja de tener las dos caras una al lado de otra y las APILA —el
     invitado arriba, lo que le llega a la pareja abajo—: 362 → 664. Y de paso
     las cuenta en el orden en que pasan de verdad.
   · El texto de la situación abierta se va a la columna DERECHA, debajo del
     escenario: explica el dibujo que tiene encima, y la lista deja de crecer y
     encoger cada vez que se abre y se cierra una.

   DESDE EL 22-sep LAS DOS COLUMNAS MIDEN LO MISMO, 996 contra 996 a 1440: la
   pieza de la derecha son dos fotos (918) más el texto de la situación (78), y
   la lista se estira hasta ahí repartiendo el sobrante entre las diez
   situaciones (`align-content: space-between`, más abajo). Antes eran 845
   contra 766-1.020 y lo que sobraba caía al final de una columna.

   EN MÓVIL: la pieza arriba —ya NO pegajosa, ver `.v2es-a__media`— y cada texto
   debajo de su fila. Como en el HTML la lista y los textos van en dos contenedores, el
   entrelazado lo hace el `order` de aquí abajo con el `--i` que trae cada uno.
   ============================================================================= */
.v2es-sits {
    display: grid;
    grid-template-columns: 1fr;
    /* El aire se hace con márgenes, no con `gap`: en móvil los dos contenedores
       se deshacen con `display: contents` y un `gap` separaría también cada fila
       de su propio texto. */
    row-gap: 0;
    align-items: start;
}

.v2es-a__lista { display: grid; grid-template-columns: 1fr; gap: 0; }

/* --- MÓVIL Y TABLETA: cada texto Y SU CITA, debajo de SU fila ---------------
   Jose, 22-sep: «al pulsar cada botón en móvil debería al menos verse la cita
   que lo acompaña, porque la foto no se puede conseguir ver». Tenía razón: las
   diez citas viven ENCIMA de la foto, y en un teléfono la foto se ha ido de la
   pantalla mucho antes de llegar a la situación 5. Lo único que cambiaba al
   pulsar quedaba fuera de la vista.

   Se arregla sin duplicar una sola palabra: las TRES capas que envuelven a las
   citas (`__media` → `-foto` → `__citas`) se deshacen con `display: contents`,
   y entonces las dos fotos y las diez citas caen en la MISMA rejilla que las
   filas y los textos. A partir de ahí cada situación son tres piezas —fila,
   texto y cita— y el reparto es de tres en tres. Las fotos se quedan arriba con
   los órdenes 1 y 2, ya a todo el ancho.
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .v2es-a__lista, .v2es-a__historia,
    .v2es-a__media, .v2es-foto, .v2es-foto__citas { display: contents; }
    .v2es-foto__p--panel { order: 1; }
    .v2es-foto__p--chat  { order: 2; }
    .v2es-sit__h3                    { order: calc(var(--i, 0) * 3 + 3); }
    .v2es-a__historia > .v2es__panel { order: calc(var(--i, 0) * 3 + 4); }
    .v2es-foto__cita                 { order: calc(var(--i, 0) * 3 + 5); }
}

/* --- PC: índice a la izquierda, escenario e historia a la derecha --- */
@media (min-width: 1024px) {
    .v2es-sits {
        /* La izquierda manda porque es la que tiene que caber en UNA línea: con
           515 px de columna, el título más largo («Tres semanas antes: ¿quién ha
           confirmado?») y el subtítulo más largo entran sin partirse, y eso es
           lo que baja la fila de 126 px a 83. */
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        /* `1fr` en la segunda fila: si la lista es más alta que el escenario más
           su texto, el sobrante se queda DEBAJO del texto y no se cuela entre el
           escenario y él. */
        grid-template-rows: auto 1fr;
        column-gap: 48px;
    }
    /* `stretch` + `space-between` (22-sep): la pieza de la derecha pasó de 690 px
       a ~920 con las dos fotos, así que la lista se queda corta y dejaba un
       agujero al final de su columna. Ahora las diez situaciones se reparten el
       sobrante entre ellas —unos 20 px más de aire cada una— y las dos columnas
       terminan a la misma altura. Si la lista fuese la más alta, `space-between`
       no hace nada: no hay sobrante que repartir. */
    .v2es-a__lista    { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; align-content: space-between; }
    .v2es-a__media    { grid-column: 2; grid-row: 1; }
    .v2es-a__historia { grid-column: 2; grid-row: 2; }
}

/* LA PIEZA DEL BLOQUE A YA NO SE PEGA A LA PANTALLA (22-sep) —ni en móvil ni en PC.
   -----------------------------------------------------------------------------
   Era pegajosa en móvil por herencia del bloque C, donde el dibujo CAMBIA con el
   paso que se abre y por eso tiene sentido tenerlo delante. Aquí no cambia nada:
   desde el 22-sep la pieza son dos FOTOGRAFÍAS fijas, y lo único que se turna es
   la reseña. A cambio se comía la pantalla: 358 px pegados bajo una cabecera de
   64 y sobre el botón fijo de la portada, o sea más de la mitad de un teléfono
   durante los 2.200 px que dura el bloque. Quedaban unos 250 px para leer las
   diez situaciones, y cada texto entraba y salía cortado a media línea por el
   borde de la pieza.
   Ahora va donde va todo lo demás: arriba del bloque, en el flujo, y la lista se
   queda la pantalla entera. En PC nunca fue pegajosa (su fila de la rejilla mide
   exactamente lo que mide ella: no tendría ni un píxel por donde deslizarse). */
.v2es-a__media { position: static; }

/* El `<h3>` envuelve al botón (el `<button>` no puede llevar un encabezado
   dentro: no es HTML conforme). El aire entre situaciones vive AQUÍ y no en
   `.v2es-sit`, porque dentro de su `<h3>` el botón siempre es `:first-child`. */
.v2es-sit__h3 { margin: var(--sx-8) 0 0; font: inherit; }
.v2es-sit__h3:first-of-type { margin-top: 0; }

.v2es-sit {
    width: 100%;
    display: flex; align-items: center; gap: var(--sx-12);
    box-shadow: 0 1px 2px rgba(24, 24, 24, 0.04);
    text-align: left;
    min-height: 64px;
    padding: var(--sx-16);
    border-radius: var(--sx-r-md);
    border: 1px solid var(--sx-line);
    background: var(--sx-paper);
    transition: border-color var(--sx-t) var(--sx-ease), box-shadow var(--sx-t) var(--sx-ease);
}
.v2es-sit:hover { border-color: #E2D6D6; }
.v2es-sit[aria-expanded="true"] { border-color: var(--sx-brand); box-shadow: 0 0 0 1px var(--sx-brand); }
.v2es-sit__ico {
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 12px;
    background: rgba(224, 99, 99, 0.10);   /* el rosa de la casa NO se ve sobre el fondo del bloque A */
    color: var(--sx-brand);
    display: flex; align-items: center; justify-content: center;
    transition: background-color var(--sx-t) var(--sx-ease), color var(--sx-t) var(--sx-ease);
}
.v2es-sit[aria-expanded="true"] .v2es-sit__ico { background: var(--sx-brand); color: var(--sx-paper); }
.v2es-sit__tx { flex: 1 1 auto; min-width: 0; }
.v2es-sit__h {
    margin: 0;
    font-family: var(--v2-font-heading, inherit);
    font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
    color: var(--sx-ink);
    transition: color var(--sx-t) var(--sx-ease);
}
@media (min-width: 1280px) { .v2es-sit__h { font-size: 18px; } }
.v2es-sit__sub { display: block; font-size: 14px; line-height: 1.5; color: var(--sx-muted); margin-top: 3px; }

/* --- PC: la lista es un ÍNDICE, no diez tarjetas --- */
@media (min-width: 1024px) {
    /* Diez cajas con borde y sombra, una debajo de otra, pesaban más que el
       escenario al que acompañan y costaban 126 px cada una. Aquí son filas con
       filete —las mismas de los pasos del bloque C— y el color lo pone solo la
       que está elegida. */
    .v2es-sit__h3 {
        margin: 0;
        position: relative;
        border-top: 1px solid var(--sx-line);
    }
    .v2es-sit__h3:last-child { border-bottom: 1px solid var(--sx-line); }

    /* El filete coral de la elegida, fuera de la columna: igual que `.v2es-paso`.
       Lo marca el mismo `data-activo` que el JS ya pone en los pasos del C, y el
       servidor lo sirve puesto en la primera (CLS 0, y sin JS se ve igual). */
    .v2es-sit__h3::before {
        content: "";
        position: absolute;
        left: -16px; top: 10px; bottom: 10px;
        width: 2px;
        border-radius: 2px;
        background: var(--sx-brand);
        opacity: 0;
        transition: opacity var(--sx-t) var(--sx-ease);
    }
    .v2es-sit__h3[data-activo="si"]::before { opacity: 1; }

    .v2es-sit {
        align-items: flex-start;
        gap: var(--sx-16);
        min-height: 0;
        padding: 18px 4px;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .v2es-sit:hover,
    .v2es-sit[aria-expanded="true"] { border-color: transparent; box-shadow: none; }
    .v2es-sit:hover .v2es-sit__h,
    .v2es-sit[aria-expanded="true"] .v2es-sit__h { color: var(--sx-brand-dark); }

    .v2es-sit__ico {
        width: 36px; height: 36px; flex: 0 0 36px;
        border-radius: 10px;
    }

    /* El chevron es el gesto de un desplegable, y en PC esto ya no lo es: la
       fila elige y el texto sale a la derecha. Quitarlo devuelve además 32 px de
       ancho al título, que es parte de lo que le hace caber en una línea. */
    .v2es-sit .v2es__chev { display: none; }
}

.v2es-sit__cuerpo {
    font-size: 16px; line-height: 1.6; color: var(--sx-muted);
    /* SIN SANGRÍA (22-sep, Jose: «al desplegar desperdicia mucho la parte
       izquierda; aprovecha el espacio»). Iba sangrado 68 px —16 de relleno + 40
       del icono + 12 de hueco— para arrancar justo donde arranca el título de su
       fila. La alineación era correcta y el precio, no: en un teléfono de 390 px
       la columna mide 350 y eso es el 19 % del ancho en blanco, seis renglones
       más en un párrafo de cinco líneas. Quien tiene que quedar claro que es de
       la fila de arriba ya lo deja claro el filete coral de la tarjeta abierta y
       el hecho de salir pegado debajo. */
    padding: var(--sx-12) var(--sx-4) var(--sx-16);
}
@media (min-width: 1280px) { .v2es-sit__cuerpo { font-size: 17px; } }
/* En PC el texto ya no va sangrado bajo su fila: es la voz del escenario que
   tiene encima, así que ocupa su ancho entero y arranca donde acaba el dibujo. */
@media (min-width: 1024px) {
    .v2es-sit__cuerpo { padding: var(--sx-24) 0 0; font-size: 17px; }
}

/* LA CITA DE UNA CLIENTA, dentro de un bloque (P-21, Jose 20-sep: «debe hacer
   contraste abajo de color blanco, que aparezca el logotipo de donde se ha
   escrito esa cita y las estrellas, y ese card blanco con sombrita para
   destacar»). Vive sobre el fondo --sx-soft del panel (#FAF5F5), así que el
   contraste lo hace el blanco de la casa: ni un color nuevo.
   La pinta `_cita.blade.php` y la usan el bloque B y el A. */
.v2es-cita {
    margin: var(--sx-24) 0 0;
    padding: var(--sx-16);
    background: var(--sx-paper);
    border-radius: var(--sx-r-md);
    box-shadow: var(--sx-sombra);
}
@media (min-width: 1024px) { .v2es-cita { padding: var(--sx-24); } }
.v2es-cita__cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sx-12);
    margin-bottom: var(--sx-12);
}
.v2es-cita__tx { font-size: 15px; line-height: 1.6; color: var(--sx-ink); }
.v2es-cita__tx q { quotes: "«" "»"; font-style: italic; }
@media (min-width: 1280px) { .v2es-cita__tx { font-size: 16px; } }
.v2es-cita__pie {
    margin-top: var(--sx-12);
    font-size: 13px; line-height: 1.5; color: var(--sx-muted);
}
.v2es .v2es-cita__pie a { color: var(--sx-muted); text-decoration: underline; text-underline-offset: 2px; }
/* La nota de «traducida del …» baja a su propia línea: es una aclaración, no
   parte de la firma. */
.v2es-cita__pie .v2es-res__trad { display: block; }


/* =============================================================================
   LA PIEZA DEL BLOQUE A — DOS FOTOGRAFÍAS, Y LA RESEÑA ENCIMA (22-sep)
   =============================================================================
   Sustituye a las dos caras dibujadas (el teléfono del invitado y el panel de
   la pareja, con veinte pantallas). Jose: «arriba irá la imagen de esa persona
   y abajo lo del WhatsApp; las reseñas es lo que debe ir cambiándose y debe
   salir por encima de la foto, para que se vea en PC en cada cambio».

   EN PC VAN APILADAS, como pidió: la pareja mirando su panel arriba, a todo el
   ancho de la columna (415 px), y el chat debajo, centrado y estrecho (220 px)
   —es un teléfono, no una fotografía apaisada: a todo el ancho mediría 723 px
   de alto él solo—. La pieza mide así unos 920 px contra los ~690 de los
   dibujos; lo que la columna izquierda se queda corta lo reparte el
   `align-content` de la lista entre las diez situaciones, que es lo que evita
   el agujero al final de una columna.

   EN MÓVIL NO CABEN APILADAS: dos fotos a 350 px de ancho son 820 px de alto, o
   sea la pantalla entera antes de llegar a la primera situación. Allí van una al
   lado de la otra y casi del mismo tamaño —la pareja a la izquierda y el chat a
   la derecha—, y la pieza mide unos 400 px. Podía medir eso porque esa misma
   tarde dejó de ser PEGAJOSA: mientras lo era, el alto era lo que no se podía
   pagar y el chat se quedaba en 103 px de ancho, que es donde no se leía nada.

   LAS TRES PIEZAS SON HERMANAS Y LAS COLOCA LA REJILLA, no `position`. En PC la
   reseña comparte celda con la foto de arriba —dos elementos en la misma celda
   se superponen— y en móvil baja a su propia fila. Con la reseña absoluta y
   metida dentro de la foto pasaba lo que se vio a 390: se salía por debajo del
   chat, que la tapaba y cortaba media cita.
   ============================================================================= */
.v2es-foto { display: grid; }
.v2es-foto__p { margin: 0; min-width: 0; }
.v2es-foto__img {
    display: block;
    width: 100%; height: auto;
    border-radius: var(--sx-r-md);
    box-shadow: var(--sx-sombra);
    /* El hueco de la foto mientras no ha llegado: es `lazy` y está a 6.500 px
       del pliegue, así que casi siempre se ve llegar. */
    background: var(--sx-wash);
}

/* --- MÓVIL Y TABLETA: las dos fotos APILADAS, enteras y a todo el ancho ------
   Jose, 22-sep: «las fotos se ven ridículamente pequeñas, no se ve nada».
   Estaban una al lado de la otra para que la pieza no midiera mucho —primero
   porque era pegajosa, después por inercia—, y a 390 eso deja 185 px para la
   foto de la pareja y 157 para el chat. A ese tamaño el panel de invitados es
   una mancha de colores y la conversación de WhatsApp no se lee: la pieza que
   tiene que demostrar el producto no demostraba nada.

   Ahora van UNA DEBAJO DE OTRA, a todo el ancho de la columna y SIN RECORTAR.
   El chat mide 620 × 1.079: a 350 px se ve casi al tamaño que tiene en un
   teléfono de verdad, que es exactamente lo que es. Se paga en alto, y se paga
   una sola vez —la pieza ya no se pega a la pantalla— y a cambio se lee el
   nombre de la pareja, la tarjeta de la invitación, el enlace y la respuesta
   del invitado.

   El tope de 420 px es para la tableta: a 768 la columna mide 720 y sin él la
   foto de la pareja mediría 900 px de alto ella sola.
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* AQUÍ, y no arriba con las otras dos capas: `.v2es-foto { display: grid }`
       se declara cuatro líneas más arriba y con la misma especificidad, así que
       gana por orden de fichero. Sin esta línea la pieza sigue siendo UN item de
       la rejilla y las diez citas se quedan pegadas a las fotos, que es
       justamente lo que se está arreglando. */
    .v2es-foto { display: contents; }
    .v2es-foto__p {
        max-width: 420px;
        margin: 0 auto var(--sx-12);
    }
    .v2es-foto__p--chat { margin-bottom: var(--sx-32); }
}

/* --- PC: apiladas, el chat centrado y la reseña ENCIMA de la de arriba ---
   La reseña ocupa la esquina inferior IZQUIERDA y deja libre el tercio derecho:
   ahí está el teléfono de la foto con la invitación abierta, que es justo lo que
   no se puede tapar. Comparte celda con la foto, así que una cita de cinco
   líneas y otra de dos no mueven ni un píxel: manda el alto de la foto. */
@media (min-width: 1024px) {
    .v2es-foto { gap: var(--sx-16); justify-items: center; }
    .v2es-foto__p--panel { grid-row: 1; grid-column: 1; width: 100%; }
    .v2es-foto__p--chat  { grid-row: 2; grid-column: 1; width: 220px; }
    .v2es-foto__citas {
        grid-row: 1; grid-column: 1;
        align-self: end; justify-self: start;
        width: 68%;
        margin: var(--sx-12);
    }
}

/* La tarjeta de la cita, cuando vive sobre una fotografía: más compacta que la
   del panel y sobre blanco casi opaco, porque debajo hay una foto y el texto
   tiene que leerse igual (contraste del cuerpo sobre blanco, no sobre la foto). */
.v2es-cita--foto {
    margin: 0;
    padding: var(--sx-12);
    border-radius: var(--sx-r);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--sx-sombra-xl);
}
.v2es-cita--foto .v2es-cita__cab { margin-bottom: var(--sx-8); }
.v2es-cita--foto .v2es-cita__tx  { font-size: 12.5px; line-height: 1.5; }
.v2es-cita--foto .v2es-cita__pie { margin-top: var(--sx-8); font-size: 11px; }
/* EN MÓVIL LA CITA YA NO VA ENCIMA DE UNA FOTO: va debajo de la situación que se
   ha pulsado, sobre el rosa del bloque. Así que se pinta como la tarjeta blanca
   que es —sin translucidez, que ahí no hay nada que se transparente— y el texto
   vuelve a su tamaño. A todo el ancho, como el texto de la situación: las dos
   cosas son la voz de la misma fila y ninguna de las dos se sangra (ver
   `.v2es-sit__cuerpo`). */
@media (max-width: 1023px) {
    .v2es-foto__cita { margin: 0 0 var(--sx-16); }
    .v2es-cita--foto {
        padding: var(--sx-16);
        border-radius: var(--sx-r-md);
        background: var(--sx-paper);
        box-shadow: var(--sx-sombra);
    }
    .v2es-cita--foto .v2es-cita__tx  { font-size: 14px; line-height: 1.55; }
    .v2es-cita--foto .v2es-cita__pie { font-size: 12px; }
}
@media (min-width: 1024px) {
    .v2es-cita--foto                 { padding: var(--sx-16); }
    .v2es-cita--foto .v2es-cita__tx  { font-size: 14px; }
    .v2es-cita--foto .v2es-cita__pie { font-size: 12px; }
}

/* -----------------------------------------------------------------------------
   MÓVIL · LA SITUACIÓN ABIERTA ES UNA TARJETA BLANCA (Jose, 23-sep)
   -----------------------------------------------------------------------------
   Jose: «cuando se abre una tarjeta, el contenido y la reseña me gustaría verlo
   con un fondo blanco para que se pueda leer mejor». Hasta hoy el texto iba en
   gris sobre el rosa del bloque y la reseña en otra tarjeta blanca suelta
   debajo: tres superficies distintas para una sola respuesta.

   Ahora la fila, su texto y su reseña se leen como UNA pieza: la fila arriba,
   con su filete coral, y debajo, saliendo de ella, una hoja blanca que lleva el
   texto y cierra con la reseña. Son tres hermanos de la rejilla —el HTML no se
   toca y el orden lo sigue poniendo el `--i`—, así que la hoja se cose con dos
   piezas:
     · el panel del texto se mete 18 px por debajo de la fila (un margen
       negativo que devuelve con relleno, así que cerrado sigue midiendo 0) y la
       fila queda por encima;
     · la reseña pone el fondo de abajo, sus laterales y las esquinas.
   Dentro de la hoja la reseña cambia la sombra por un filete: una tarjeta con
   sombra dentro de otra blanca se lee como algo que flota encima de ella.
   Solo el panel ABIERTO se pinta de blanco: al cerrarse vuelve al rosa en el
   acto, y el pliegue no deja una hoja blanca sin su final.
   El borde lateral transparente está también cerrado a propósito: así el texto
   mide lo mismo abierto y cerrado, y no se recoloca al abrirse.
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .v2es-sit__h3 { position: relative; z-index: 1; }
    .v2es-a__historia > .v2es__panel {
        margin-top: calc(-1 * var(--sx-r-md));
        padding-top: var(--sx-r-md);
        border: 1px solid transparent;
        border-width: 0 1px;
    }
    .v2es-a__historia > .v2es__panel[data-abierto="si"] {
        background: var(--sx-paper);
        border-color: var(--sx-line);
    }
    .v2es-sit__cuerpo { padding: var(--sx-12) 15px var(--sx-16); }

    .v2es-foto__cita[data-visible="si"] {
        margin: 0 0 var(--sx-16);
        padding: 0 11px 11px;
        background: var(--sx-paper);
        border: 1px solid var(--sx-line);
        border-top: 0;
        border-radius: 0 0 var(--sx-r-md) var(--sx-r-md);
        box-shadow: 0 1px 2px rgba(24, 24, 24, 0.04);
        /* La hoja no se desplaza al entrar —abriría una rendija entre el texto y
           la reseña—: lo que entra deslizándose es la reseña, dentro de ella. */
        animation: none;
    }
    .v2es-foto__cita[data-visible="si"] .v2es-cita { animation: v2es-entra var(--sx-t) var(--sx-ease) both; }
    .v2es-foto__cita .v2es-cita--foto {
        border: 1px solid var(--sx-line);
        border-radius: var(--sx-r);
        box-shadow: none;
    }
}

/* =============================================================================
   RESEÑAS — horizontal, pasan solas (P-14)
   ============================================================================= */
.v2es-res { margin-top: var(--sx-40); padding-top: var(--sx-32); border-top: 1px solid var(--sx-line); }
.v2es-res__h {
    margin: 0 0 var(--sx-24);
    text-align: center;
    font-family: var(--v2-font-heading, inherit);
    font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--sx-ink);
}
@media (min-width: 1280px) { .v2es-res__h { font-size: 22px; } }

.v2es-res__pista {
    display: flex;
    gap: var(--sx-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px var(--sx-16);
    margin: 0 -20px;
    padding-left: 20px; padding-right: 20px;
    /* OBLIGATORIO, y no es cosmética: el borde de anclaje de la pista es su caja
       de relleno, así que sin esto la primera tarjeta —que empieza detrás del
       `padding-left`— NO está en un punto de anclaje válido. Con
       `scroll-snap-type: mandatory`, el navegador corrige ese desfase él solo
       nada más componer (`scrollLeft` salta a 20, o a 4 a partir de 768), y ese
       desplazamiento durante la carga deja a Chrome SIN emitir una sola entrada
       de `largest-contentful-paint` en TODA la portada. Medido el 20-sep en T11:
       `/` daba 0 entradas en 3/3 cargas y `/fr` —la misma vista sin la sección—
       1/1 siempre; pasaba también con el JS del carrusel apagado, o sea que no
       lo hacía el guion. Con el `scroll-padding-left` puesto, la pista arranca
       en `scrollLeft: 0`, que ya es anclaje válido, y el LCP vuelve.
       Quien toque el `padding-left` de aquí arriba, toca también esta línea. */
    scroll-padding-left: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.v2es-res__pista::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .v2es-res__pista { margin: 0; padding-left: 4px; padding-right: 4px; scroll-padding-left: 4px; }
}

.v2es-res__c {
    scroll-snap-align: start;
    flex: 0 0 286px;
    display: flex; flex-direction: column;
    background: var(--sx-paper);
    border: 1px solid var(--sx-line);
    border-radius: var(--sx-r-md);
    padding: var(--sx-24) var(--sx-16) var(--sx-16);
    box-shadow: var(--sx-sombra);
}
@media (min-width: 768px)  { .v2es-res__c { flex-basis: 320px; } }
@media (min-width: 1280px) { .v2es-res__c { flex-basis: 304px; padding: var(--sx-24); } }

.v2es-res__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-12); margin-bottom: var(--sx-12); }
.v2es img.v2es-res__logo { height: 18px; width: auto; opacity: 0.95; }
.v2es img.v2es-res__logo--g { height: 15px; }

/* Estrellas reales, una a una. Nada de medias (P-14). */
.v2es-res__est { display: flex; align-items: center; gap: 2px; }
.v2es-res__e { width: 15px; height: 15px; display: block; color: #E8B22B; }
/* La vacia, para una nota de 4: se pintan las cinco, no solo las llenas. */
.v2es-res__e--off { color: #E0D9D8; }
.v2es-res__e--med { position: relative; }
.v2es-res__nota { font-size: 12px; font-weight: 600; color: var(--sx-muted); margin-left: 4px; }

.v2es-res__tx { font-size: 15px; line-height: 1.6; color: var(--sx-ink); }
@media (min-width: 1280px) { .v2es-res__tx { font-size: 16px; } }
.v2es-res__tx q { quotes: "«" "»"; }
.v2es-res__resto { display: none; }
.v2es-res__c[data-entera="si"] .v2es-res__resto { display: inline; }
.v2es-res__mas {
    align-self: flex-start;
    margin-top: var(--sx-8);
    font-size: 14px; font-weight: 600; color: var(--sx-brand-dark);
    text-decoration: underline; text-underline-offset: 3px;
    min-height: 44px;
    display: inline-flex; align-items: center;
}
.v2es-res__pie {
    margin-top: auto;
    padding-top: var(--sx-16);
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 2px var(--sx-12);
    font-size: 13px; color: var(--sx-muted);
}
.v2es-res__aut { font-weight: 600; color: var(--sx-ink); }
.v2es-res__enl {
    font-size: 13px; white-space: nowrap;
    display: inline-flex; align-items: center;
    padding: 14px 0; margin: -14px 0;      /* 16 + 28 = 44 px de zona táctil */
}
.v2es-res__trad { font-size: 12px; color: var(--sx-muted); opacity: 0.85; margin-top: 4px; }

/* Puntos y flechas */
.v2es-res__nav { display: flex; align-items: center; justify-content: center; gap: var(--sx-12); margin-top: var(--sx-8); min-height: 44px; }
/* `display: flex` de una clase le gana al `[hidden] { display: none }` del
   navegador, así que el `hidden` que pone el JS cuando no hay nada que mover
   no serviría de nada sin esta línea. */
.v2es-res__nav[hidden] { display: none; }
/* Solo cuando no hay nada que desplazar: centrar una pista que SÍ se desplaza
   deja la primera tarjeta medio fuera y sin forma de llegar a ella. */
.v2es-res__pista[data-cabe-todo="si"] { justify-content: center; }
.v2es-res__fl {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--sx-soft);
    border: 1px solid var(--sx-line);
    color: var(--sx-ink);
    display: none; align-items: center; justify-content: center;
    transition: background-color 0.18s var(--sx-ease), opacity 0.18s var(--sx-ease);
}
.v2es-js .v2es-res__fl { display: inline-flex; }
.v2es-res__fl:hover { background: #F2E6E6; }
.v2es-res__pts { display: flex; gap: 0; }
/* El punto se ve de 7 px, pero se toca en 44: la zona está en el botón y el
   dibujo en el ::before. Un punto de 7 px no se acierta con el pulgar. */
.v2es-res__pt {
    width: 26px; height: 44px;
    background: none; padding: 0;
    position: relative;
}
.v2es-res__pt::before {
    content: "";
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: #DFD8D7;
    transition: background-color 0.18s var(--sx-ease), width 0.18s var(--sx-ease);
}
.v2es-res__pt[aria-current="true"]::before { background: var(--sx-brand); width: 20px; border-radius: 4px; }

/* EN UN TELÉFONO NO CABEN LAS FLECHAS, Y ADEMÁS SOBRAN (22-sep).
   Once puntos de 26 px más dos flechas de 44 y sus dos huecos de 12 son 354 px
   dentro de una columna que a 360 mide 320: la fila se centra, y lo que no cabe
   se sale POR LOS DOS LADOS —las dos flechas quedaban fuera de la pantalla y el
   documento entero se podía arrastrar de lado—. Medido a 360 y a 381.
   Una pista que se pasa con el dedo no necesita flechas; los puntos sí se
   quedan, que son los que dicen cuántas hay y por cuál vas. El `wrap` es el
   seguro por si algún día son quince. */
@media (max-width: 767px) {
    .v2es-res__fl,
    .v2es-js .v2es-res__fl { display: none; }
    .v2es-res__nav { gap: 0; flex-wrap: wrap; }
    .v2es-res__pts { flex-wrap: wrap; justify-content: center; max-width: 100%; }
    .v2es-res__pt { width: 24px; }
    /* CADA TARJETA, SU ALTO. En PC se ven tres o cuatro a la vez y que midan lo
       mismo es lo que las hace una fila; en un teléfono se ve UNA, y estirarlas
       todas al alto de la más larga dejaba la de Carlos —cuatro líneas— con 180
       px de blanco entre la cita y la firma. Se lee como una tarjeta a medio
       cargar. */
    .v2es-res__pista { align-items: flex-start; }
}

/* =============================================================================
   ACCESIBILIDAD Y MOVIMIENTO
   ============================================================================= */
.v2es-vo {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .v2es *, .v2es *::before, .v2es *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .v2es__panel { transition: none; }
    .v2es-res__pista { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   PIEZAS SUELTAS DE LOS DIBUJOS
   --------------------------------------------------------------------------- */
.v2es-pant--llena { position: absolute; inset: 0; }
.v2es-rsvp__cambio {
    font-size: 7.5px; color: var(--sx-brand-dark);
    background: var(--sx-soft);
    border-radius: 6px; padding: 4px 6px;
    margin-top: 8px;
}
.v2es-rsvp__cuenta { display: flex; gap: 4px; margin-top: 6px; }
.v2es-rsvp__cuenta span {
    flex: 1 1 0;
    background: var(--sx-wash);
    border-radius: 6px;
    padding: 6px 2px;
    text-align: center;
    font-size: 11px; font-weight: 600; color: var(--sx-ink);
    font-variant-numeric: tabular-nums;
}
.v2es-tabla__pie {
    font-size: 7.5px; line-height: 1.45; color: var(--sx-muted);
    border-top: 1px solid var(--sx-line);
    padding-top: 6px; margin-top: 6px;
    min-height: 12px;
}
.v2es-tabla__f--nueva[data-entra="si"] + .v2es-tabla__f { border-top-color: var(--sx-line); }

/* Media estrella: dos estrellas superpuestas, la de arriba recortada */
.v2es-res__e--med { position: relative; width: 15px; height: 15px; display: inline-block; }
.v2es-res__e--med svg { position: absolute; inset: 0; width: 15px; height: 15px; }
.v2es-res__e--med svg:first-child { color: #E0D9D8; }
.v2es-res__e--med svg:last-child  { color: #E8B22B; clip-path: inset(0 20% 0 0); }
/* =============================================================================
   T10 · LA PELÍCULA DE LA PIEZA DEL EDITOR (bloque C)
   =============================================================================
   Se AÑADE al final de public/css/seccion-es.css (T07). No se sirve aparte: son
   1,9 KB y una petición más no se paga por esto.

   En reposo esta hoja no pinta nada encima del dibujo de T07: la capa de la
   película está a `opacity: 0` y sin `pointer-events`, y el botón es lo único
   que se ve. Nada de `backdrop-filter` (A22) y nada que funda texto al entrar
   (A23): el único fundido es el de la imagen de vídeo, que no lleva texto.
   ============================================================================= */

/* La capa. Ocupa exactamente la pantalla del portátil, que ya es
   `position: relative; overflow: hidden` en T07. */
.v2es-peli {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    /* Sin fondo propio. Mientras no hay fotogramas esta capa tiene que ser un cristal y no
       una cortina: con `--sx-chrome` encima, taparía el dibujo en cuanto se hiciera visible
       (y ahora se hace visible antes, ver la regla de «cargando» de aquí abajo). */
}
/* El estado vive en `.v2es-mac` (el portátil entero) y no en `.v2es-mac__screen`
   (el cristal), porque los mandos se salieron del cristal: dentro tapaban texto
   del dibujo en tres de las cinco pantallas —«Dolce Vita» en el paso 01, y
   «Confirmar asistencia» en el 04 a 390, que es el botón del invitado y uno de
   los microtextos que cuentan para P-12—. Medido sobre el componente real, y en
   las cuatro esquinas: ninguna está libre (T09). */
/* «CARGANDO» YA ENSEÑA LA CAPA, y no se ve nada distinto porque un <video> sin fotogramas es
   transparente y debajo sigue el dibujo. No es un capricho: WEBKIT NO DEJA ARRANCAR SOLO A UN
   VÍDEO QUE ESTÁ OCULTO, y `opacity: 0` cuenta como oculto. Lo que había aquí pedía justo eso
   —arrancar escondido y aparecer con el primer fotograma—, que en el iPhone es un bloqueo
   mutuo: el CSS esperaba la imagen y el navegador esperaba a que se viera. (22-sep, con el
   clip en webm que el iPhone tampoco sabía decodificar: eran las dos cosas a la vez.) */
.v2es-mac[data-peli-estado="cargando"] .v2es-peli { opacity: 1; }
.v2es-mac[data-peli-estado="viendo"] .v2es-peli {
    opacity: 1;
    pointer-events: auto;
}

.v2es-peli__vid,
.v2es-peli__yt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* El clip se grabó a 16/10, igual que el hueco: `cover` no recorta nada hoy y
   protege el día que entre un vídeo 16/9 (el de Jose lo será). */
/* Sin `background`: hasta el primer fotograma el vídeo es transparente y deja ver el dibujo.
   Un fondo aquí era un rectángulo de color esperando a que cargara el clip. */
.v2es-peli__vid { object-fit: cover; }
.v2es-peli__yt:empty { display: none; }
.v2es-peli__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------------
   El control. Va JUSTO DEBAJO del portátil, alineado a su borde derecho, y
   nunca encima del dibujo: la pantalla dibujada es una interfaz completa y no
   tiene ni una esquina libre. Nunca existe si no hay nada que reproducir: lo
   decide el servidor, no el CSS.
   --------------------------------------------------------------------------- */
.v2es-peli__mandos {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.v2es .v2es-peli__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 14px 9px 11px;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--sx-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(24, 24, 24, 0.10), 0 8px 22px -8px rgba(24, 24, 24, 0.45);
    transition: transform var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease);
}
.v2es .v2es-peli__btn:hover { background: #FFFFFF; transform: translateY(-1px); }
.v2es .v2es-peli__btn:focus-visible { outline: 2px solid var(--sx-brand); outline-offset: 3px; }
.v2es .v2es-peli__btn:active { transform: translateY(0); }

.v2es-peli__tri { width: 15px; height: 15px; flex: 0 0 15px; color: var(--sx-brand); }
.v2es-peli__dur { color: var(--sx-muted); font-weight: 500; }

/* Uno u otro, nunca los dos. */
.v2es-mac[data-peli-estado="viendo"] .v2es-peli__btn[data-peli-abrir] { display: none; }
.v2es-mac:not([data-peli-estado="viendo"]) .v2es-peli__btn[data-peli-cerrar] { display: none; }
.v2es-peli__btn--cerrar { background: rgba(255, 255, 255, 0.92); }

/* Mientras carga el clip: el botón dice que está en marcha sin cambiar de texto
   (un cambio de texto en un botón pequeño da un salto de ancho). */
.v2es-mac[data-peli-estado="cargando"] .v2es-peli__btn[data-peli-abrir] { opacity: 0.72; }
.v2es-mac[data-peli-estado="cargando"] .v2es-peli__tri { animation: v2es-pulso 1.1s ease-in-out infinite; }
@keyframes v2es-pulso { 50% { opacity: 0.35; } }

/* A 390 el portátil mide 340 px: el control se encoge, pero sigue midiendo más
   de 44 px en su eje largo y más de 24 en el otro (criterio táctil de T07). */
@media (max-width: 1023px) {
    .v2es .v2es-peli__btn {
        padding: 7px 10px 7px 8px;
        min-height: 32px;
        /* 12 px, no 11,5: son los dos únicos textos de la sección que NO forman
           parte de un dibujo, y a 11,5 se leían por debajo del suelo (T11). El
           ancho que se gana con la letra se devuelve por el relleno. */
        font-size: 12px;
        gap: 5px;
    }
    .v2es-peli__tri { width: 13px; height: 13px; flex-basis: 13px; }
}

/* Reducir movimiento NO apaga el contenido: el clip se ve, pero no se repite
   solo (el atributo `loop` lo quita el JS) y el botón no se levanta al pasar. */
@media (prefers-reduced-motion: reduce) {
    .v2es .v2es-peli__btn { transition: none; }
    .v2es .v2es-peli__btn:hover { transform: none; }
    .v2es-mac[data-peli-estado="cargando"] .v2es-peli__tri { animation: none; }
}