/* ============================================================================
   Bienvenida de NuboLink (index.php): la página pública para clientes.

   Un solo tema, azul de noche: los azules del logotipo llevados a toda la página. No usa el tema
   del panel (albaran.css); comparte con él el azul hondo del acceso y la tipografía de texto.

   Reglas de la casa:
   - Un acento: el cian de la nube del logotipo. La acción principal es una píldora blanca.
   - Formas: botones en píldora, piezas con radio grande (--bv-radio), móviles con el suyo.
   - Tipos: Outfit en titulares (la geometría del logotipo), Public Sans en el texto. Las dos
     servidas desde el sitio.
   - Movimiento: entra la portada, aparecen las secciones al llegar y un punto recorre el camino
     de «Cómo funciona». Con «reducir movimiento» no se mueve nada.
   ============================================================================ */

@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
    --bv-noche: #060f47;          /* el fondo: la tinta del logotipo, de noche */
    --bv-hondo: #0a1c7a;          /* superficies: el azul del panel de marca del acceso */
    --bv-tinta: #1231c4;          /* la tinta del logotipo, encendida */
    --bv-azul: #1f7bff;           /* los tres azules de la nube */
    --bv-cielo: #2bbcf6;
    --bv-cian: #5fe3ea;           /* el único acento */
    --bv-papel: #f4f6ff;          /* texto */
    --bv-suave: #bcc6ff;          /* texto secundario, teñido del fondo */
    --bv-linea: rgba(255, 255, 255, 0.14);
    --bv-radio: 1.75rem;
    --bv-salida: cubic-bezier(0.16, 1, 0.3, 1);
    --bv-titular: "Outfit", "Public Sans", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html { overflow-x: clip; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.bv, .bv *, .bv *::before, .bv *::after { box-sizing: border-box; }
.bv { margin: 0; overflow-x: clip; background: var(--bv-noche); color: var(--bv-papel); font: 400 1.0625rem/1.6 "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.bv ::selection { background: var(--bv-cian); color: var(--bv-noche); }
/* Lo general va dentro de :where() para que no pese nada: cualquier clase de más abajo le gana.
   (Sin esto, «los enlaces heredan el color» dejaba en blanco la letra de los botones blancos.) */
:where(.bv) :focus-visible { outline: 2px solid var(--bv-cian); outline-offset: 3px; }
:where(.bv img) { display: block; max-width: 100%; height: auto; }
:where(.bv) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.bv) :where(ul, ol) { padding: 0; list-style: none; }
:where(.bv a) { color: inherit; }
.bv-ancho { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.bv-icono { flex: none; width: 1.25em; height: 1.25em; }
.bv-saltar { position: absolute; top: -4rem; left: 1rem; z-index: 30; padding: 0.6rem 1rem; border-radius: 999px; background: var(--bv-papel); color: var(--bv-noche); font-weight: 600; text-decoration: none; }
.bv-saltar:focus { top: 0.75rem; }

/* ---------- Botones y enlaces ---------- */
.bv-boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3.25rem; padding: 0 1.6rem; border: 1px solid transparent; border-radius: 999px; background: var(--bv-papel); color: var(--bv-noche); font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--bv-salida), background-color 0.25s var(--bv-salida), color 0.25s var(--bv-salida), border-color 0.25s var(--bv-salida); }
.bv-boton:hover { background: var(--bv-cian); transform: translateY(-2px); }
.bv-boton:active { transform: scale(0.98); }
.bv-boton--linea { min-height: 2.75rem; padding: 0 1.2rem; border-color: rgba(255, 255, 255, 0.4); background: none; color: var(--bv-papel); font-weight: 600; }
.bv-boton--linea:hover { border-color: var(--bv-papel); background: var(--bv-papel); color: var(--bv-noche); }
.bv-enlace { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.bv-enlace .bv-icono { transition: transform 0.25s var(--bv-salida); }
.bv-enlace:hover { color: var(--bv-cian); }
.bv-enlace:hover .bv-icono { transform: translateX(4px); }
.bv-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }

/* ---------- Barra ---------- */
.bv-barra { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--bv-linea); background: rgba(6, 15, 71, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bv-barra-dentro { display: flex; align-items: center; gap: 1.25rem; height: 4.25rem; }
.bv-logo { flex: none; display: block; width: 10.5rem; }
.bv-menu { display: flex; gap: 1.75rem; margin-left: auto; }
.bv-menu a { color: var(--bv-suave); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color 0.2s; }
.bv-menu a:hover { color: var(--bv-papel); }
.bv-idioma { position: relative; }
.bv-idioma summary { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 0.5rem; border-radius: 999px; color: var(--bv-suave); font-size: 0.9375rem; font-weight: 600; cursor: pointer; list-style: none; }
.bv-idioma summary::-webkit-details-marker { display: none; }
.bv-idioma summary:hover, .bv-idioma[open] summary { color: var(--bv-papel); }
.bv-idioma summary .bv-icono { width: 0.85em; height: 0.85em; transition: transform 0.25s var(--bv-salida); }
.bv-idioma[open] summary .bv-icono { transform: rotate(180deg); }
.bv-idioma ul { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 5; min-width: 11rem; padding: 0.4rem; border: 1px solid var(--bv-linea); border-radius: 1rem; background: var(--bv-hondo); box-shadow: 0 1.5rem 3rem -1rem rgba(3, 8, 48, 0.7); }
.bv-idioma li a { display: block; padding: 0.55rem 0.8rem; border-radius: 0.7rem; text-decoration: none; }
.bv-idioma li a:hover { background: rgba(255, 255, 255, 0.1); }
.bv-idioma li a[aria-current] { color: var(--bv-cian); font-weight: 600; }

/* ---------- Portada ---------- */
.bv-portada-dentro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 2rem; min-height: min(calc(100dvh - 4.25rem), 50rem); padding-block: 3.5rem; }
.bv h1 { max-width: 15ch; font: 600 clamp(2.75rem, 5.4vw, 4.75rem)/1.0 var(--bv-titular); letter-spacing: -0.035em; text-wrap: balance; }
.bv-entrada { max-width: 31rem; margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.5; color: var(--bv-suave); }
.bv-portada .bv-acciones { margin-top: 2.25rem; }

/* La nube del logotipo, enorme, y sobre ella las tres apps tal como son */
.bv-escena { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1 / 1.02; margin-inline: auto; }
.bv-nube { position: absolute; inset: 4% -6% 2%; }
.bv-nube i { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.bv-nube i:nth-child(1) { top: 30%; left: 0; width: 60%; background: var(--bv-azul); }
.bv-nube i:nth-child(2) { top: 2%; left: 24%; width: 50%; background: var(--bv-cian); }
.bv-nube i:nth-child(3) { top: 36%; right: 0; width: 52%; background: var(--bv-cielo); }
.bv-movil { position: absolute; top: 50%; left: 50%; width: 44%; padding: 0.4rem; border-radius: 2.1rem; background: #040a33; box-shadow: 0 2.5rem 4rem -1.5rem rgba(3, 8, 48, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1); translate: -50% -50%; }
.bv-movil img { width: 100%; border-radius: 1.75rem; }
.bv-movil--nube { z-index: 3; }
.bv-movil--proteccion { z-index: 2; width: 39%; translate: -128% -46%; rotate: -8deg; }
.bv-movil--esim { z-index: 2; width: 39%; translate: 28% -46%; rotate: 8deg; }

@media (prefers-reduced-motion: no-preference) {
    .bv-portada-texto > * { animation: bv-entra 0.9s var(--bv-salida) both; }
    .bv-portada-texto > :nth-child(2) { animation-delay: 0.08s; }
    .bv-portada-texto > :nth-child(3) { animation-delay: 0.16s; }
    .bv-nube i { animation: bv-crece 1.1s var(--bv-salida) both; }
    .bv-nube i:nth-child(2) { animation-delay: 0.1s; }
    .bv-nube i:nth-child(3) { animation-delay: 0.2s; }
    .bv-movil { animation: bv-sube 1s var(--bv-salida) 0.25s both; }
    .bv-movil--proteccion { animation-delay: 0.38s; }
    .bv-movil--esim { animation-delay: 0.46s; }
}
@keyframes bv-entra { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes bv-crece { from { opacity: 0; scale: 0.6; } }
@keyframes bv-sube { from { opacity: 0; transform: translateY(4rem); } }

/* ---------- Secciones ---------- */
.bv-seccion { padding-block: clamp(4rem, 9vw, 7rem); }
.bv-cabecera h2 { font: 600 clamp(2rem, 3.6vw, 3rem)/1.05 var(--bv-titular); letter-spacing: -0.03em; text-wrap: balance; }
.bv-cabecera p { max-width: 36rem; margin-top: 0.9rem; font-size: 1.125rem; color: var(--bv-suave); }

/* Descargas: una pieza grande y dos medianas, cada una de un azul y con su pantalla asomando */
.bv-apps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; margin-top: 2.75rem; }
.bv-app { position: relative; display: flex; min-height: 35rem; overflow: hidden; border-radius: var(--bv-radio); background: var(--bv-hondo); }
.bv-app:first-child { background: var(--bv-tinta); }
.bv-app:nth-child(n + 3) { grid-column: 1 / -1; min-height: 17rem; background: #0b4a9e; }
.bv-app-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 27rem; padding: 2rem; }
.bv-app-icono { width: 4rem; height: 4rem; border-radius: 1rem; box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(3, 8, 48, 0.55); }
.bv-app h3 { margin-top: 1.25rem; font: 600 1.75rem/1.1 var(--bv-titular); letter-spacing: -0.02em; }
.bv-app:first-child h3 { font-size: clamp(2rem, 3vw, 2.5rem); }
.bv-app-texto > p { margin-top: 0.6rem; color: var(--bv-suave); }
.bv-app:first-child .bv-app-texto > p { max-width: 19rem; font-size: 1.125rem; color: #dbe1ff; }
.bv-bajadas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1.5rem; }
.bv-bajar { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 1.05rem 0 0.85rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--bv-salida), background-color 0.25s var(--bv-salida), color 0.25s var(--bv-salida), border-color 0.25s var(--bv-salida); }
a.bv-bajar:hover { border-color: var(--bv-papel); background: var(--bv-papel); color: var(--bv-noche); transform: translateY(-2px); }
a.bv-bajar:active { transform: scale(0.98); }
/* La del dispositivo desde el que se mira sale ya resaltada (js/bienvenida.js lo anota en <html>) */
[data-plataforma="ios"] a.bv-bajar[data-plataforma="ios"],
[data-plataforma="android"] a.bv-bajar[data-plataforma="android"],
[data-plataforma="macos"] a.bv-bajar[data-plataforma="macos"],
[data-plataforma="windows"] a.bv-bajar[data-plataforma="windows"],
[data-plataforma="linux"] a.bv-bajar[data-plataforma="linux"] { border-color: var(--bv-papel); background: var(--bv-papel); color: var(--bv-noche); }
.bv-bajar--pronto { border-style: dashed; border-color: rgba(255, 255, 255, 0.28); background: none; color: var(--bv-suave); font-weight: 500; }
.bv-bajar--pronto small { font-size: 0.8125rem; opacity: 0.85; }
.bv-app-captura { position: absolute; z-index: 1; right: 1.5rem; bottom: -6.5rem; width: 12rem; padding: 0.35rem; border-radius: 1.8rem; background: #040a33; box-shadow: 0 1.5rem 3rem -1rem rgba(3, 8, 48, 0.7); rotate: 6deg; transition: transform 0.6s var(--bv-salida); }
.bv-app-captura img { border-radius: 1.5rem; }
.bv-app:first-child .bv-app-captura { right: 2.25rem; bottom: -7rem; width: 15.5rem; padding: 0.4rem; border-radius: 2.1rem; }
.bv-app:first-child .bv-app-captura img { border-radius: 1.75rem; }
.bv-app:hover .bv-app-captura { transform: translateY(-0.75rem); }
.bv-app:not(:first-child) .bv-app-texto { max-width: calc(100% - 13.5rem); }
/* La app en un Mac: su ventana asoma por arriba a la derecha, detrás del móvil */
.bv-app-ventana { position: absolute; top: 2rem; right: -7.5rem; width: 28rem; overflow: hidden; border-radius: 0.7rem; box-shadow: 0 1.5rem 3rem -1rem rgba(3, 8, 48, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12); transition: transform 0.6s var(--bv-salida); }
.bv-app:hover .bv-app-ventana { transform: translateX(-0.75rem); }

/* Para empezar: tres pasos en una línea, bajo una sola raya */
.bv-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--bv-linea); counter-reset: paso; }
.bv-pasos li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; counter-increment: paso; }
.bv-pasos li::before { content: counter(paso); grid-row: span 2; font: 600 2.75rem/0.9 var(--bv-titular); color: var(--bv-cian); }
.bv-pasos strong { font: 600 1.125rem/1.3 var(--bv-titular); }
.bv-pasos span { font-size: 0.9375rem; color: var(--bv-suave); }

/* Cómo funciona: la frase a un lado, los hechos al otro y, debajo, el camino a todo lo ancho */
.bv-claro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 2rem 4rem; }
.bv-hechos { display: grid; gap: 0.85rem; }
.bv-hechos li { display: flex; align-items: flex-start; gap: 0.75rem; }
.bv-hechos .bv-icono { margin-top: 0.15em; color: var(--bv-cian); }
.bv-camino { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.5rem; padding: 2.75rem 1.5rem; border-radius: var(--bv-radio); background: var(--bv-hondo); text-align: center; }
.bv-camino li { position: relative; display: grid; justify-items: center; }
.bv-nodo { position: relative; z-index: 1; display: grid; place-items: center; width: 5rem; height: 5rem; margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: var(--bv-noche); color: var(--bv-cian); font-size: 1.75rem; }
.bv-camino strong { font: 600 1.25rem/1.2 var(--bv-titular); }
.bv-camino li > span:last-child { color: var(--bv-suave); }
/* Los tramos: del centro de cada nodo al del anterior. El primero, doble, es el túnel cifrado */
.bv-camino li + li::before { content: ""; position: absolute; top: 2.5rem; right: 50%; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.bv-camino li:nth-child(2)::before { top: calc(2.5rem - 2px); border-top: 5px double var(--bv-cian); }
/* Un punto que hace el viaje: del dispositivo a la nube */
.bv-camino::after { content: ""; position: absolute; top: calc(2.75rem + 2.5rem - 0.25rem); left: calc(1.5rem + (100% - 3rem) / 6); width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bv-papel); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .bv-camino::after { animation: bv-viaja 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@keyframes bv-viaja {
    0% { opacity: 0; transform: translateX(2.5rem); }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc((100vw - 2.5rem) * 0.6)); }
}
@supports (width: 1cqw) {
    .bv-camino { container-type: inline-size; }
    @keyframes bv-viaja {
        0% { opacity: 0; transform: translateX(2.5rem); }
        12% { opacity: 1; }
        88% { opacity: 1; }
        100% { opacity: 0; transform: translateX(calc(100cqw * 2 / 3 - 2.75rem)); }
    }
}

/* Preguntas: el título se queda a la vista mientras se recorren */
.bv-dudas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: 2rem 4rem; }
.bv-dudas .bv-cabecera { position: sticky; top: 6.5rem; }
.bv-lista-dudas details + details { border-top: 1px solid var(--bv-linea); }
.bv-lista-dudas summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font: 500 1.1875rem/1.35 var(--bv-titular); cursor: pointer; list-style: none; transition: color 0.2s; }
.bv-lista-dudas summary::-webkit-details-marker { display: none; }
.bv-lista-dudas summary:hover { color: var(--bv-cian); }
.bv-lista-dudas summary .bv-icono { color: var(--bv-cian); transition: transform 0.35s var(--bv-salida); }
.bv-lista-dudas details[open] summary .bv-icono { transform: rotate(45deg); }
.bv-lista-dudas details p { max-width: 40rem; padding: 0 2.5rem 1.4rem 0; color: var(--bv-suave); }

/* Operadores: por qué ofrecerlo, a un lado, y pedir información, al otro */
.bv-seccion--final { padding-top: 0; }
.bv-operadores { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 2.5rem 3.5rem; padding: clamp(1.5rem, 4.5vw, 3.5rem); border-radius: var(--bv-radio); background: var(--bv-tinta); }
.bv-operadores h2 { max-width: 17ch; font: 600 clamp(2rem, 3.4vw, 2.9rem)/1.04 var(--bv-titular); letter-spacing: -0.03em; text-wrap: balance; }
.bv-operadores-texto > p { max-width: 34rem; margin-top: 1rem; font-size: 1.125rem; color: #dbe1ff; }
.bv-razones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.25rem; margin: 2.25rem 0 0; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.bv-razones dt { font: 600 1.1875rem/1.25 var(--bv-titular); }
.bv-razones dd { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: #dbe1ff; }

.bv-pedir { padding: 1.75rem; border-radius: 1.25rem; background: var(--bv-noche); }
.bv-pedir h3 { font: 600 1.5rem/1.15 var(--bv-titular); letter-spacing: -0.02em; }
.bv-pedir-entrada { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--bv-suave); }
.bv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.25rem; }
.bv-campo { display: grid; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; }
.bv-campo--ancho, .bv-form .bv-boton, .bv-nota { grid-column: 1 / -1; }
.bv-campo small { font-weight: 400; color: var(--bv-suave); }
.bv-campo input, .bv-campo textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.36); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.06); color: var(--bv-papel); font: inherit; font-size: 1rem; font-weight: 400; transition: border-color 0.2s; }
.bv-campo textarea { min-height: 5.25rem; resize: vertical; }
.bv-campo input:hover, .bv-campo textarea:hover { border-color: rgba(255, 255, 255, 0.65); }
.bv-campo input:focus-visible, .bv-campo textarea:focus-visible { border-color: var(--bv-cian); outline: 2px solid var(--bv-cian); outline-offset: 1px; }
.bv-campo input:-webkit-autofill { -webkit-text-fill-color: var(--bv-papel); box-shadow: inset 0 0 0 99px #0d1a66; }
.bv-nota { font-size: 0.8125rem; color: var(--bv-suave); }
.bv-nota a { text-decoration: underline; text-underline-offset: 3px; }
.bv-error { margin-top: 1rem; padding: 0.7rem 0.9rem; border: 1px solid #ffb4a8; border-radius: 0.75rem; font-size: 0.9375rem; color: #ffd9d2; }
.bv-hecho { display: grid; gap: 0.5rem; justify-items: start; padding-bottom: 0.5rem; }
.bv-hecho .bv-icono { width: 2.5rem; height: 2.5rem; color: var(--bv-cian); }
.bv-hecho p { color: var(--bv-suave); }
.bv-ya { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bv-linea); font-size: 0.9375rem; color: var(--bv-suave); }
.bv-ya .bv-enlace { color: var(--bv-papel); }
.bv-trampa { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

/* Pie */
.bv-pie { border-top: 1px solid var(--bv-linea); }
.bv-pie-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 2rem; font-size: 0.9375rem; color: var(--bv-suave); }
.bv-pie nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-left: auto; }
.bv-pie a { text-decoration: none; }
.bv-pie a:hover { color: var(--bv-papel); text-decoration: underline; text-underline-offset: 3px; }
.bv-pie a[aria-current] { font-weight: 600; color: var(--bv-papel); }

/* Aparecer al llegar (solo si hay JavaScript y el visitante no ha pedido menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
    .bv-js .bv-aparece { opacity: 0; translate: 0 1.75rem; transition: opacity 0.8s var(--bv-salida), translate 0.8s var(--bv-salida); }
    .bv-js .bv-aparece.bv-visto { opacity: 1; translate: 0 0; }
    .bv-js .bv-app:nth-child(2) { transition-delay: 0.08s; }
}

/* ---------- Portátil estrecho: a las piezas no les cabe todo lo de al lado ---------- */
@media (max-width: 78rem) {
    .bv-app-ventana { display: none; }
    .bv-app:first-child .bv-app-captura { right: 1.5rem; bottom: -5.5rem; width: 12.5rem; padding: 0.35rem; border-radius: 1.8rem; }
    .bv-app:first-child .bv-app-captura img { border-radius: 1.5rem; }
    .bv-app:not(:first-child) .bv-app-captura { display: none; }
    .bv-app:not(:first-child) .bv-app-texto { max-width: none; }
}

/* ---------- Tableta y móvil: todo en una columna ---------- */
@media (max-width: 62rem) {
    .bv-menu { display: none; }
    .bv-idioma { margin-left: auto; }
    .bv-portada-dentro { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 3rem 1rem; }
    .bv-escena { max-width: 27rem; margin-top: 1rem; }
    .bv-apps { grid-template-columns: minmax(0, 1fr); }
    .bv-app { min-height: 24rem; }
    .bv-app:first-child .bv-app-captura { right: 2.25rem; bottom: -7rem; width: 15.5rem; padding: 0.4rem; border-radius: 2.1rem; }
    .bv-app:first-child .bv-app-captura img { border-radius: 1.75rem; }
    .bv-app:not(:first-child) .bv-app-captura { display: block; }
    .bv-app:not(:first-child) .bv-app-texto { max-width: calc(100% - 13.5rem); }
    .bv-claro, .bv-dudas, .bv-operadores { grid-template-columns: minmax(0, 1fr); }
    .bv-dudas .bv-cabecera { position: static; }
}
@media (max-width: 40rem) {
    .bv-ancho { width: min(100% - 2rem, 76rem); }
    .bv-barra-dentro { gap: 0.4rem; }
    .bv-logo { width: 7.5rem; }
    .bv-boton--linea { max-width: 8.5rem; min-height: 2.5rem; padding: 0.3rem 0.8rem; border-radius: 1.25rem; font-size: 0.8125rem; line-height: 1.15; text-align: center; white-space: normal; }
    .bv-razones, .bv-form { grid-template-columns: minmax(0, 1fr); }
    .bv-pedir { padding: 1.25rem; }
    .bv-entrada { font-size: 1.125rem; }
    .bv-app { min-height: 0; }
    .bv-app-texto, .bv-app:not(:first-child) .bv-app-texto { max-width: none; padding: 1.5rem; }
    .bv-app .bv-app-captura, .bv-app:not(:first-child) .bv-app-captura { display: none; }
    .bv-pasos { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .bv-camino { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding: 2rem 1.25rem; }
    .bv-camino li + li::before { top: -2.25rem; right: auto; left: 50%; width: 0; height: 2.25rem; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.35); }
    .bv-camino li:nth-child(2)::before { top: -2.25rem; border-top: 0; border-left: 5px double var(--bv-cian); translate: -2px 0; }
    .bv-camino::after { display: none; }
    .bv-lista-dudas details p { padding-right: 0; }
    .bv-pie nav { margin-left: 0; }
}