/* ═══════════════════════════════════════════════════════════════════════════
   SOLUCIONES · LAS ONCE MAQUETAS DEL DUEÑO (2026-10-03)
   ───────────────────────────────────────────────────────────────────────────
   «Ahora toca la reestructuración completa de la página de soluciones. Te
   dejo aquí todo lo que quiero»: once maquetas — la cabecera con su mosaico,
   nueve bloques (texto a la izquierda, composición a la derecha) y el cierre.

   LA REGLA SIGUE SIENDO SUYA: los dibujos los hace ChatGPT desde sus
   maquetas (cada composición, las piezas del mosaico, los iconos) y esta hoja
   sólo los COLOCA. Lo escrito es letra: titular, frase, tarjetas de ventajas,
   notas y botones — y por eso se lee, se busca y se traduce.

   LAS MEDIDAS SALEN DE SUS MAQUETAS, MEDIDAS, NO MIRADAS. Cada bloque mide en
   `em` y el `em` sale del ancho del bloque: 1em = 10 px de su maqueta de 1672
   (la cabecera es de 1024 y el cierre de 2000, y tienen su propia cuenta).
   Así un titular de 70 px en su maqueta es `7em` aquí, a cualquier ancho.
   Y CADA LETRA TIENE SUELO: en su ventana (1280) el `em` sale a 7,3 px y la
   letra de las tarjetas bajaría a 9,9 px; ahí manda el `max(12.5px, …)`.
   ═══════════════════════════════════════════════════════════════════════════ */

.sol {
  --tinta: #0a0a1f; --gris: #6a6b88; --gris-2: #6d6d88;
  --violeta: #5b1bd6; --boton: #6620f2; --boton-2: #5413d9; --lila: #ece6fd;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #f6f4fd 0%, #efeafc 50%, #f6f4fd 100%);
  /* arriba, poco: en su ventana (1280 x 585) la franja y la barra ocupan 111 px
     y los botones de la cabecera tienen que caber en la primera pantalla */
  padding: 1.3rem clamp(10px, 1.8vw, 28px) 1rem; overflow-x: clip;
}

/* ── CADA BLOQUE ES UNA TARJETA, COMO SU MAQUETA ────────────────────────────
   El fondo NO es de mi gusto: muestreado de sus maquetas — casi blanco lila
   arriba (#f7f6fe), más lila abajo (#eeebfe) y una nube (#cfc0fc) detrás de
   la composición. */
.sb, .sol-fin {
  container-type: inline-size;
  position: relative;
  max-width: 1480px; margin: 0 auto 1.6rem;
  border-radius: clamp(18px, 1.6vw, 30px);
  background:
    radial-gradient(34% 44% at 64% 10%, rgba(207,192,252,.62) 0%, rgba(207,192,252,0) 72%),
    radial-gradient(30% 40% at 90% 34%, rgba(221,211,252,.55) 0%, rgba(221,211,252,0) 70%),
    radial-gradient(40% 30% at 30% 100%, rgba(226,219,253,.6) 0%, rgba(226,219,253,0) 70%),
    linear-gradient(180deg, #f8f7fe 0%, #f5f3fe 55%, #eeebfe 100%);
  box-shadow: 0 1.4em 3em -2em rgba(60,30,130,.32), inset 0 0 0 1px rgba(255,255,255,.6);
}
.sol-fin { margin-bottom: 4rem; }

/* ── EL TEXTO Y LA COMPOSICIÓN COMPARTEN CASILLA ────────────────────────────
   Como en sus maquetas, la composición no empieza donde acaba el texto: se
   mete por debajo (la planta asoma por detrás del titular). Así que los dos
   van en la MISMA casilla de la rejilla, el texto encima, y la composición
   se coloca donde está en SU maqueta: borde izquierdo y ancho en % del
   bloque, y arriba en `em` — tres números medidos por bloque, abajo. */
.sb-in {
  position: relative;
  font-size: calc(100cqw / 167.2);
  display: grid; grid-template-columns: 100%;
  min-height: var(--alto, 94.1em);
}
.sb-tx { grid-area: 1 / 1; position: relative; z-index: 2; width: 46%; min-width: 0;
  padding: 10.8em 0 4.6em 7.5em; box-sizing: border-box; align-self: start;
  /* lo vacío de la columna deja pasar el ratón a la composición de debajo */
  pointer-events: none; }
.sb-tx > * { pointer-events: auto; }
.sb-art { grid-area: 1 / 1; position: relative; z-index: 1; align-self: start; min-width: 0;
  margin: var(--art-t, 10em) 0 3em var(--art-l, 42%); width: var(--art-w, 56%); }

/* ── LA ETIQUETA, EL TITULAR Y LA FRASE ─────────────────────────────────── */
.sb-eti { display: flex; align-items: center; gap: .74em; margin: 0; width: fit-content;
  font-size: max(13.5px, 1.9em); font-weight: 500; color: #6b6c87; }
.sb-eti img { width: 2.26em; height: 2.26em; flex: none; }
/* EL TITULAR NO SE PARTE SOLO: se parte donde lo parte su maqueta, con <br>.
   Sin el `nowrap`, «Coordina a tu equipo y» dejaba la «y» sola en una línea.
   Y EL INTERLETRADO ES DE CADA MAQUETA: con la misma altura de mayúscula
   (48-52 px en las nueve), Reservas o Recordatorios van un 13 % más
   apretados que Equipo. Medido línea a línea; cada bloque trae el suyo.
   Y EL ESPACIO ENTRE PALABRAS SE DEVUELVE: el interletrado también se come
   el espacio, y a -0,09 «Reserva citas desde» se leía «Reservacitasdesde».
   Sus maquetas aprietan la letra, no el hueco entre palabras. */
.sb-h {
  margin: .3em 0 0; width: fit-content; white-space: nowrap;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: max(30px, 7em); font-weight: 800; line-height: .95;
  letter-spacing: var(--h-ls, -.045em); word-spacing: var(--h-ws, .02em);
  color: var(--tinta);
}
.sb-h em { font-style: normal; color: var(--violeta); }
/* Las dos rayas de después del titular: son de sus maquetas, las mismas de
   la página de ayuda. */
.sb-rayas { display: inline-block; width: .56em; height: .56em; margin-left: .14em; vertical-align: .28em;
  fill: none; stroke: #6a1fe6; stroke-width: 5; stroke-linecap: round; }
.sb-sub { margin: .62em 0 0; width: fit-content; font-size: max(15.5px, 2.36em); line-height: 1.47; color: var(--gris); }

/* ── LAS CUATRO VENTAJAS ────────────────────────────────────────────────────
   Tarjetas blancas de su maqueta: icono en su baldosa, título y dos líneas.
   El ancho de la rejilla es el de cada maqueta (de 58,5 a 66 `em`): más
   ancha, la tarjeta de la derecha se metía debajo de la composición. */
.sb-cards { list-style: none; margin: 2.4em 0 0; padding: 0; max-width: var(--cards-w, 63.5em);
  display: grid; grid-template-columns: 1fr 1.04fr; gap: 1.3em 1.4em; }
.sb-card { display: flex; align-items: center; gap: 1.5em; min-height: 11.4em; padding: 1.2em 1.2em 1.2em 1.2em;
  box-sizing: border-box;
  background: rgba(255,255,255,.9); border: 1px solid rgba(233,228,252,.95); border-radius: 1.4em;
  box-shadow: 0 .9em 2.2em -1.4em rgba(70,40,150,.28);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; }
.sb-card img { width: 5.6em; height: 5.6em; flex: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.sb-card b { display: block; font-size: max(13px, 1.5em); font-weight: 700; color: var(--tinta); letter-spacing: -.015em; line-height: 1.25; }
.sb-card span { display: block; margin-top: .3em; font-size: max(12px, 1.36em); line-height: 1.42; color: var(--gris-2); }
.sb-card:hover { transform: translateY(-.35em); box-shadow: 0 1.4em 2.6em -1.4em rgba(70,40,150,.4); }
.sb-card:hover img { transform: rotate(-7deg) scale(1.08); }

/* ── LOS SEIS CANALES (bloque de Conversaciones) ───────────────────────────
   En su maqueta van en baldosas blancas, sin nombre debajo: el logotipo es la
   etiqueta. Por eso cada logo lleva su `alt`. */
.sb-canales { list-style: none; margin: 2.6em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2em; }
.sb-canales li { width: 7.6em; height: 7.6em; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 1px solid rgba(233,228,252,.95); border-radius: 1.7em;
  box-shadow: 0 .9em 2em -1.3em rgba(70,40,150,.3);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; }
.sb-canales img { width: 4.3em; height: 4.3em; }
.sb-canales li:hover { transform: translateY(-.4em) scale(1.04); box-shadow: 0 1.4em 2.4em -1.3em rgba(70,40,150,.42); }

/* ── LOS BOTONES ────────────────────────────────────────────────────────────
   Medidos en sus maquetas: letra de 22 px y 67 de alto, y un ANCHO MÍNIMO
   (283 px «Ver contactos», 270 «Empieza gratis») con el texto centrado; sólo
   los de texto largo («Ver presupuestos y pedidos», 348) crecen. */
.cta { display: flex; flex-wrap: wrap; gap: 2.1em; margin-top: 2.5em; }
.cta a { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .93em 1.1em;
  min-width: 11.8em; box-sizing: border-box; border-radius: 99em;
  font-size: max(15px, 2.2em); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease; }
.cta a svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease; }
.cta a:hover svg { transform: translateX(.22em); }
/* El morado lleno: la acción de cada bloque. */
.cta .b3 { background: linear-gradient(180deg, #6d27f5 0%, var(--boton) 55%, var(--boton-2) 100%); color: #fff;
  box-shadow: 0 1em 2em -1em rgba(102,32,242,.6); }
.cta .b3:hover { transform: translateY(-.15em); box-shadow: 0 1.3em 2.4em -1em rgba(102,32,242,.7); }
/* El blanco: «Empieza gratis» con su flecha morada. */
.cta .b1 { background: #fff; color: var(--tinta); border: 1px solid rgba(226,219,250,.95);
  box-shadow: 0 .9em 2em -1.3em rgba(70,40,150,.35); }
.cta .b1 svg { color: #6a1fe6; }
.cta .b1:hover { transform: translateY(-.15em); box-shadow: 0 1.2em 2.4em -1.2em rgba(70,40,150,.45); }
/* «Explorar canales» lleva el icono de red delante, no la flecha detrás. */
.cta .b1--red svg { width: 1.15em; height: 1.15em; stroke-width: 2.1; }
.cta .b1--red:hover svg { transform: scale(1.1); }
/* «Ver precios», en el cierre: borde y letra morados. */
.cta .b1--borde { color: #5a12e6; border: .09em solid #7c3aed; box-shadow: none; }
/* «Empieza gratis» de la cabecera: el círculo morado con el triángulo. */
.b-juego { display: grid; place-items: center; width: 1.62em; height: 1.62em; border-radius: 50%; background: #6a1fe6;
  transition: transform .2s ease; }
.cta .b-juego svg { width: .9em; height: .9em; fill: #fff; stroke: none; }
.cta .b1--juego:hover svg { transform: none; }
.cta .b1--juego:hover .b-juego { transform: scale(1.08); }
/* El repertorio completo, para que ninguna clase salga sin ropa: el oscuro
   no lo usa hoy ninguna maqueta. */
.cta .b2 { background: var(--tinta); color: #fff; }
.cta .b2:hover { transform: translateY(-.15em); }

/* ── LA COMPOSICIÓN ─────────────────────────────────────────────────────── */
.pa { display: block; width: 100%; height: auto;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), filter .35s ease; }
/* «Que se acerque… que den botes»: al pasar por encima, sube y se acerca. */
.pa:hover, .pa:focus-visible { transform: translateY(-.8em) scale(1.018); filter: drop-shadow(0 2em 2.4em rgba(60,30,130,.2)); }

/* DÓNDE VA CADA COMPOSICIÓN: la caja que ocupa en SU maqueta (borde
   izquierdo y ancho en % del bloque) y, como ChatGPT la devolvió algo más
   apaisada, centrada en vertical donde estaba allí. Y el titular, con el
   interletrado de esa maqueta; y la rejilla de tarjetas, con su ancho. */
/* Conversaciones viene de una maqueta de 1774 x 887, no de 1672 x 941: su
   `em` es una décima de píxel de ESA maqueta, o todo sale un 6 % grande. */
#conversaciones .sb-in { font-size: calc(100cqw / 177.4); }
#conversaciones .sb-tx { padding-top: 12.4em; }
#conversaciones   { --art-l: 33.82%; --art-w: 62.85%; --art-t: 11.9em; --alto: 88.7em; }
#contactos        { --art-l: 35.89%; --art-w: 63.10%; --art-t: 12em;   --cards-w: 66.1em; }
#crecimiento      { --art-l: 43.06%; --art-w: 55.32%; --art-t: 10.2em; --cards-w: 63.5em; }
#promociones      { --art-l: 39.17%; --art-w: 59.51%; --art-t: 9.2em;  --cards-w: 65.8em; }
#ventas           { --art-l: 37.08%; --art-w: 61.60%; --art-t: 14em;   --cards-w: 61.5em; --h-ls: -.08em;  --h-ws: .09em; }
/* Reservas: su tercera línea («propio calendario web.») es en su maqueta un
   15 % más estrecha que en Jakarta a cualquier interletrado que se lea, y se
   metía 75 px dentro del móvil. Así que este titular va un 4 % más pequeño y
   la composición empieza algo más a la derecha (y algo más pequeña). */
#reservas         { --art-l: 43%;    --art-w: 56.3%;  --art-t: 15em;   --cards-w: 61.5em; --h-ls: -.09em;  --h-ws: .1em; }
#reservas .sb-h   { font-size: max(30px, 6.7em); }
#automatizaciones { --art-l: 41%;    --art-w: 57.7%;  --art-t: 18.9em; --cards-w: 58.5em; --h-ls: -.08em;  --h-ws: .09em; }
#operaciones      { --art-l: 39.17%; --art-w: 59.21%; --art-t: 6.85em; --cards-w: 59.3em; --h-ls: -.08em;  --h-ws: .09em; }
#analiza          { --art-l: 35.29%; --art-w: 63.10%; --art-t: 4.06em; --cards-w: 60.4em; --h-ls: -.055em; --h-ws: .04em; }

/* ── LAS NOTAS A MANO DE RECORDATORIOS ──────────────────────────────────────
   Sus cuatro notas, cada una junto al icono de su mensaje (sobre, WhatsApp,
   estrella, calendario), con la flecha bajando hacia él. Las posiciones son
   % de la composición: los iconos están medidos en la imagen. La última va
   ENCIMA de su icono: a su derecha no queda sitio dentro del bloque. */
.nt { position: absolute; margin: 0; font-family: Caveat, cursive; font-weight: 600; line-height: 1.02;
  color: #4a1ab8; font-size: max(15px, 2.4em); pointer-events: none; white-space: nowrap; }
.nt span { display: block; transform: rotate(-4deg); }
.nt-flecha { display: block; width: 1.05em; height: 1.4em; margin: .05em 0 0 .5em;
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nt--1 { left: 15%;   top: -8%; }
.nt--2 { left: 40.6%; top: -4.5%; }
.nt--3 { left: 66%;   top: -2.5%; }
.nt--4 { left: 77.5%; top: -15%; }
.nt--4 .nt-flecha { margin-left: auto; margin-right: 1.4em; transform: scaleX(-1); }

/* ── 1 · LA CABECERA (maqueta de 1024) ──────────────────────────────────── */
#todo .sb-in { font-size: calc(100cqw / 102.4); min-height: 0; grid-template-rows: auto auto; }
#todo .sb-tx { width: 46.9%; padding: 2.3em 0 2.6em 4em; }
#todo .sb-art { --art-l: 46.88%; --art-w: 52.73%; --art-t: 6.77em; margin-bottom: 0; }
#todo .sb-eti { font-size: max(13px, 1.32em); gap: .55em; color: #5f6079; }
#todo .sb-eti--suelta img { width: 1.15em; height: 1.15em; }
#todo .sb-h { font-size: max(34px, 5em); line-height: .97; margin-top: .25em; }
#todo .sb-sub { font-size: max(15px, 1.46em); line-height: 1.45; margin-top: .8em; }
#todo .cta { gap: 1.3em; margin-top: 1.55em; }
#todo .cta a { font-size: max(15px, 1.62em); padding: .72em 1.3em; min-width: 0; }
.ok { display: flex; flex-wrap: wrap; gap: .6em 1.8em; margin: 1.5em 0 0; }
.ok span { display: inline-flex; align-items: center; gap: .45em; font-size: max(13px, 1.1em); color: var(--gris); }
.ok svg { width: 1.1em; height: 1.1em; fill: none; stroke: #6a1fe6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* EL MOSAICO: tres filas como su maqueta — tres tarjetas de anchos distintos
   (333, 294 y 319 px de su maqueta), dos iguales y una entera. Cada tarjeta
   es un fondo blanco con su icono, su título y su frase escritos, y debajo
   la pieza que hizo ChatGPT. */
.mosaico { grid-area: 2 / 1; display: flex; flex-direction: column; gap: 1.5em; padding: 0 2.9em 3em 3em; }
.mo-fila { display: grid; gap: 1em; align-items: stretch; }
.mo-fila--3 { grid-template-columns: 333fr 294fr 319fr; }
.mo-fila--2 { grid-template-columns: 1fr 1fr; }
.bt { position: relative; display: flex; flex-direction: column; gap: 1.6em;
  padding: 1.6em 1.5em 1.5em; background: rgba(255,255,255,.93); border: 1px solid rgba(233,228,252,.95);
  border-radius: 1.6em; box-shadow: 0 1.2em 2.4em -1.8em rgba(70,40,150,.3);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; }
.bt:hover { transform: translateY(-.3em); box-shadow: 0 1.6em 2.8em -1.6em rgba(70,40,150,.4); }
.bt-cab { display: flex; align-items: center; gap: 1.6em; }
.bt-ic { width: 5.9em; height: 5.9em; flex: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.bt:hover .bt-ic { transform: rotate(-7deg) scale(1.06); }
.bt-cab h3 { margin: 0; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-size: max(16px, 1.68em);
  font-weight: 800; letter-spacing: -.025em; color: var(--tinta); }
.bt-cab p { margin: .3em 0 0; font-size: max(13px, 1.36em); line-height: 1.38; color: var(--gris); }
.bt-cab .sb-rayas { width: 2.8em; height: 2.8em; margin: -1.6em 0 0 1.2em; align-self: flex-start; }
.bt-tres { display: grid; grid-template-columns: 448fr 432fr 540fr; gap: 1em; align-items: center; }
/* La de Clientes es más baja que su vecina (que lleva la nota debajo): se
   centra en el hueco en vez de dejarlo entero en medio. */
.bt-pieza { position: relative; margin-block: auto; }
/* AL MIRAR UNO, LOS DEMÁS SE APARTAN — sólo en el mosaico, que es donde hay
   varios a la vez. */
.mosaico:has(.pa:hover) .pa:not(:hover),
.mosaico:has(.pa:focus-visible) .pa:not(:focus-visible) { filter: saturate(.8) opacity(.7); }

/* La nota de Automatizaciones: una pastilla lila con su flecha y sus rayas. */
.bt-nota { display: flex; align-items: center; justify-content: center; gap: .5em; margin: 0;
  font-size: max(13px, 1.35em); font-weight: 600; color: #5b1bd6; text-align: center; }
.bt-nota span { padding: .55em 1.2em; background: var(--lila); border-radius: .9em; line-height: 1.35; }
.bt-flecha { width: 3.2em; height: 2.4em; margin-top: -1.2em; fill: none; stroke: #6a1fe6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bt-nota .sb-rayas { width: 1.7em; height: 1.7em; margin: -1.6em 0 0 .1em; align-self: flex-start; }
/* La de Clientes, a mano, a la derecha de las caras, con la flecha hacia las
   cifras. */
.nt--mosaico { right: .4em; bottom: 0; font-size: max(15px, 1.7em); color: #5b1bd6; }
.nt--mosaico .nt-flecha { position: absolute; left: -2.3em; top: -1.3em; width: 2.1em; height: 1.6em; margin: 0; transform: none; }

/* ── 11 · EL CIERRE (maqueta de 2000) ───────────────────────────────────── */
.sol-fin .sb-in { font-size: calc(100cqw / 200); --alto: 66.7em; }
.sol-fin .sb-tx { width: 43%; padding: 8.4em 0 4.2em 12em; }
.sol-fin .sb-art { --art-l: 43.25%; --art-w: 54.25%; --art-t: 5.24em; }
.sol-fin .sb-h { font-size: max(32px, 8.5em); line-height: .93; margin: 0; }
.sol-fin .sb-sub { font-size: max(15.5px, 3em); line-height: 1.22; margin-top: .62em; }
.sol-fin .cta { gap: 2.3em; margin-top: 2.6em; }
.sol-fin .cta a { font-size: max(15px, 2.6em); padding: .78em 1.1em; min-width: 10.4em; }
.fin-ok { list-style: none; margin: 3.4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2em 3.4em; }
.fin-ok li { display: flex; align-items: center; gap: 1.1em; font-size: max(13.5px, 2em); font-weight: 600; line-height: 1.25; color: var(--tinta); }
.fin-ok img { width: 3.5em; height: 3.5em; flex: none; }

/* ── CUANDO NO CABEN LAS DOS COLUMNAS ───────────────────────────────────────
   Por debajo de 980 px de bloque, el texto arriba y la composición debajo,
   cada una en su fila, y el `em` deja de ser una décima de píxel de la
   maqueta: se mide contra un bloque de 100. */
@container (max-width: 980px) {
  .sb-in, #todo .sb-in, .sol-fin .sb-in { font-size: calc(100cqw / 100); min-height: 0; }
  .sb-tx, #todo .sb-tx, .sol-fin .sb-tx { grid-area: 1 / 1; width: auto; padding: 3.4em 4.2em 1em; }
  .sb-art, #todo .sb-art, .sol-fin .sb-art { grid-area: 2 / 1; width: auto; margin: 2em 3em 3em; }
  #automatizaciones .sb-art { margin-top: 9em; }
  .mosaico { grid-area: 3 / 1; padding: 0 3em 3em; }
  .sb-cards { max-width: none; }
  .mo-fila--3 { grid-template-columns: 1fr 1fr; }
  .mo-fila--3 > .bt:nth-child(3) { grid-column: 1 / -1; }
  .mo-fila--3 > .bt:nth-child(3) .pa { width: 62%; margin-inline: auto; }
}
@container (max-width: 640px) {
  /* En un móvil el `em` sale a 3,7 px: los iconos de 5,6 em se quedaban en
     21 px al lado de un título de 14. Se les da un mínimo de verdad. */
  .sb-card img, .bt-ic { width: 40px; height: 40px; }
  /* los seis canales, en una fila: 6 x 48 + 5 x 8 = 328 px, y en un móvil de
     390 la columna deja 339 */
  .sb-canales { gap: 8px; }
  .sb-canales li { width: 48px; height: 48px; border-radius: 13px; }
  .sb-canales img { width: 26px; height: 26px; }
  .sb-h { white-space: normal; text-wrap: balance; }
  .sb-h br, .sb-sub br { display: none; }
  .sb-cards { grid-template-columns: 1fr; }
  .mo-fila--3, .mo-fila--2 { grid-template-columns: 1fr; }
  .mo-fila--3 > .bt:nth-child(3) .pa { width: 100%; }
  .bt-tres { grid-template-columns: 1fr; }
  .nt { display: none; }
  .cta a { white-space: normal; }
}

/* QUIEN PIDE MENOS MOVIMIENTO, MENOS MOVIMIENTO. */
@media (prefers-reduced-motion: reduce) {
  .pa, .pa:hover, .pa:focus-visible, .cta a, .cta a:hover, .cta a svg, .sb-card, .sb-card:hover, .sb-card img,
  .sb-canales li, .sb-canales li:hover, .bt, .bt:hover, .bt-ic, .b-juego { transition: none; transform: none; }
  .mosaico:has(.pa:hover) .pa:not(:hover),
  .mosaico:has(.pa:focus-visible) .pa:not(:focus-visible) { filter: none; }
}
/* En Reservas las rayas no van al final: van tras «tu», algo separadas y un
   poco más arriba, como en su maqueta. */
.sb-rayas--lejos { margin-left: .9em; vertical-align: .5em; }