/* Maná — themanateam.app
 *
 * ## Por qué esto cambió de arriba abajo
 *
 * Victor: «no hay cambios de colores, no hay nada que te enganche». Tenía las
 * dos razones, y las dos eran medibles.
 *
 * **Los fondos eran #E6F4FD y #FFFFFF.** Cuatro por ciento de diferencia de
 * luminosidad: eso no es un cambio de color, es el mismo tono dos veces. Ahora
 * el sitio va de casi negro a blanco y vuelve, que es lo que hace que al bajar
 * pase algo.
 *
 * **Y el héroe no llenaba la pantalla.** El estilo que corresponde es
 * Hero-Centric, con `min-height: 100vh` y un visual dramático arriba.
 *
 * ## El escaparate
 *
 * Un teléfono que se queda fijo mientras la pantalla de dentro cambia. Es el
 * mecanismo de la página del iPhone, y aquí es `position: sticky` nativo: sin
 * librerías, sin fijar el desplazamiento a mano, y sin pelearse con el
 * desplazamiento del móvil.
 */

:root {
  --noche:   #070C14;
  --noche2:  #0E1A2B;
  /* ── Todo oscuro, sin tramos claros.
   *
   * Victor: «me gustaría que toda la app sea en tono oscuro, sin claros de
   * fondo, para que tenga coherencia». Y de paso desaparecen las dos juntas
   * entre claro y oscuro, que fueron el problema más caro de esta página.
   *
   * `--suelo` es el fondo de todo; `--alza` es la superficie de las piezas que
   * van encima, un punto más clara para que se despeguen sin necesidad de
   * bordes. */
  --suelo:   #060B13;
  --alza:    #101B2C;
  --alza2:   #16243A;
  --cielo:   #E6F4FD;
  --claro:   #B6DBFB;
  --blanco:  #FFFFFF;
  --marca:   #1E84E6;
  --brillo:  #5B9BF0;
  --hondo:   #1D5BC4;
  --tinta:   #0A1B2E;
  --humo:    #4C5A6E;
  --humo2:   #8FA3BC;
  --linea:   #CFE4F7;
  --marca-suave: #D9EBFD;
  --linea2:  #1E2C42;

  --ui: "Poppins", system-ui, -apple-system, sans-serif;
  --cifra: "Poppins", system-ui, -apple-system, sans-serif;
  --curva: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --margen: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; background: var(--noche); color: var(--blanco);
  font-family: var(--ui); line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

a { color: var(--brillo); text-decoration: none; }
:focus-visible { outline: 2px solid var(--brillo); outline-offset: 3px; border-radius: 8px; }

.envoltura { max-width: 1120px; margin: 0 auto; padding-inline: var(--margen); }

h1, h2 { font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.8rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; }
p { margin: 0; }

.rotulo {
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brillo); margin: 0 0 14px;
}
/* El aire entre el titular y su bajada. Sin él se tocaban: los titulares van
   con `line-height: 1.02` y la última línea baja hasta pisar el párrafo. */
.entrada { font-size: clamp(1rem, 1.45vw, 1.18rem); max-width: 50ch; margin-top: 20px; }
.rotulo + h1, .rotulo + h2 { margin-top: 12px; }

/* El ritmo de fondos: oscuro, claro, oscuro. De verdad, no dos blancos. */
.tramo { padding-block: clamp(72px, 11vh, 128px); }
.tramo--noche  { background: var(--noche); color: var(--blanco); }
.tramo--noche  .entrada { color: var(--humo2); }
.tramo--claro  { background: var(--suelo); color: var(--blanco); }
.tramo--claro  .entrada { color: var(--humo2); }
.tramo--claro  .rotulo  { color: var(--brillo); }
.tramo--blanco { background: var(--suelo); color: var(--blanco); }
.tramo--blanco .entrada { color: var(--humo2); }
.tramo--blanco .rotulo  { color: var(--brillo); }

.logo path { stroke: var(--brillo); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; fill: none; }


/* ------------------------------------------------------------- cabecera */

/* ─────────────────────────────────────────────────────── la barra flotante
 *
 * Una cápsula con aire alrededor, no una barra pegada de lado a lado. La barra
 * de borde a borde parte la página en dos justo donde empieza a leerse; la
 * cápsula flota por encima y deja que el fondo siga por debajo, que es de lo
 * que se trata cuando no quieres cortes.
 */
/* **Flota por encima, no ocupa sitio.**
 *
 * Estaba en `sticky`, y una barra pegajosa SÍ ocupa su hueco en el flujo: 82 px
 * de franja con el color del cuerpo justo encima del héroe. Victor: «la barra
 * transparente de arriba no es tan transparente porque tiene una línea de
 * fondo». Esa línea era el borde de ese hueco. En `fixed` no reserva nada y el
 * fondo del héroe pasa por debajo de punta a punta. */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; justify-content: center;
  padding: 14px var(--margen);
  pointer-events: none;
}
.barra__pastilla {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(14,26,43,.92);
  border: 1px solid rgba(255,255,255,.07);
  transition: background-color .3s var(--curva), border-color .3s var(--curva);
  max-width: 100%;
}
.barra__pastilla > a {
  /* 44 px de alto: es la barra que más se toca de la página. */
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
  border-radius: 999px; font-size: .88rem; color: var(--humo2);
  transition: color .18s ease, background .18s ease;
  white-space: nowrap;
}
.barra__pastilla > a:hover { color: var(--blanco); background: rgba(255,255,255,.07); }
.barra__marca { gap: 8px; font-weight: 600; letter-spacing: -0.02em; color: var(--blanco) !important; padding-left: 0 !important; }
.barra__marca svg { width: 22px; height: 21px; }
.barra__cta {
  background: var(--hondo); color: #fff !important; font-weight: 500;
}
.barra__cta:hover { background: var(--marca) !important; }
/* Los enlaces del medio estorban en un teléfono: sólo quedan la marca y el
   botón, que es lo único que se va a tocar ahí. */
/* En el teléfono la barra escondía todo menos la marca y Descargar, porque
   eran seis enlaces y no cabían. Ahora son tres y son los tres que importan:
   se quedan, con las letras y el aire un punto más apretados. */
@media (max-width: 780px) {
  .barra__pastilla { gap: 0; }
  .barra__pastilla > a:not(.barra__marca) { padding-inline: 10px; font-size: .88rem; }
  .barra__marca { font-size: .98rem; }
  .barra__marca .icono--mini { width: 22px; height: 22px; }
}
/* Medido: a 320 px las cuatro piezas se pasan 25 px. Ahí la marca se queda en
   su icono, que ya es la marca, y las tres acciones caben enteras. */
@media (max-width: 359px) {
  .barra__marca { font-size: 0; gap: 0; }
  .barra__marca .icono--mini { width: 24px; height: 24px; }
  .barra { padding-inline: 8px; }
  .barra__pastilla > a:not(.barra__marca) { padding-inline: 7px; font-size: .82rem; }
  .barra__cta { padding-inline: 12px; }
}


.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 500; font-size: .95rem; cursor: pointer;
  padding: 12px 24px; border-radius: 999px; border: 1.5px solid transparent;
  transition: background-color .18s var(--curva), border-color .18s var(--curva),
              transform .18s var(--curva), box-shadow .18s var(--curva);
}
.boton:active { transform: scale(.97); }
.boton--relleno {
  /* `--hondo` y no `--marca`: blanco sobre el azul claro da 4,0 : 1 y para una
     etiqueta de 14 px hace falta 4,5. Sobre el azul profundo son 6,3, y además
     es el azul de la marca que manda en la app. */
  background: var(--hondo); color: var(--blanco);
}
.boton--relleno:hover { background: var(--marca); }
.boton--fantasma { border-color: rgba(255,255,255,.28); color: var(--blanco); }
.boton--fantasma:hover { border-color: var(--brillo); }
.tramo--claro .boton--fantasma, .tramo--blanco .boton--fantasma { border-color: rgba(255,255,255,.22); color: var(--blanco); background: transparent; }
.boton svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------ héroe a pantalla */

/* El héroe va centrado. Lo pasé a la izquierda leyendo mal un mensaje de
   Victor: lo que él llamaba «el perro texto centrado» era el del escaparate,
   no éste, y aquí centrado funciona porque no compite con nada al lado. */
.heroe {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
  padding: 108px var(--margen) 0;
}
/* El subhead es una línea, no un párrafo: a interlineado 1,55 y 28 palabras
   ocupaba tres renglones y competía con el titular. */
.heroe .entrada {
  margin-inline: auto; max-width: 26ch;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.2;
}
.heroe h1 { max-width: 12ch; }
.heroe > * { position: relative; }
.heroe .logo { width: 62px; height: 60px; margin-bottom: 10px; }
.heroe__marca { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; margin: 0 0 22px; }
.heroe h1 { max-width: 13ch; }
/* El color del texto sólo lo pone el héroe oscuro. La sección de descargar
   comparte la caja pero es clara: con `--humo2` encima salía a 2,28 : 1, casi
   ilegible, que es lo que se veía borroso en la captura de Victor. */

.heroe--fondo .entrada { color: var(--humo2); }
.acciones { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
/* **Las proporciones del teléfono mandan, no la altura que quede libre.**
 *
 * Estaba con ancho y alto fijos a la vez (292 x 468), o sea proporción 0,61,
 * y la captura es 0,46. Con `object-fit: cover` eso recortaba 76 px por arriba
 * y 76 por abajo: desaparecían la barra de estado y medio «Buenas tardes».
 * Se veía una foto cortada por la mitad, que es justo lo que no quieres
 * enseñar de tu app.
 *
 * Aquí sólo se fija el ancho y `aspect-ratio` calcula el alto. La captura entra
 * entera. */
.telefono.heroe__telefono {
  margin-top: clamp(18px, 2.4vh, 34px);
  /* Asoma cortado por abajo: el producto no cabe entero, y eso empuja a
     seguir bajando. Es lo que hace la página del iPhone. */
  margin-bottom: calc(-1 * clamp(90px, 16vh, 170px));
  width: clamp(258px, 28vw, 340px); height: auto;
  /* Y el corte se difumina. Antes era un tajo recto justo donde cambiaba el
     color de fondo, y las dos líneas juntas parecían un fallo de maquetación
     en vez de un recorte a propósito. */
  mask-image: linear-gradient(180deg, #000 62%, transparent 98%);
}
.heroe__flecha {
  margin-top: auto; padding: 34px 0 26px;
  font-family: var(--cifra); font-size: .68rem; letter-spacing: .16em;
  color: var(--humo2); text-transform: uppercase;
}

/* ------------------------------------------------------------ teléfono */

.telefono {
  width: clamp(232px, 26vw, 292px); aspect-ratio: 9 / 19.5;
  border-radius: clamp(32px, 3.6vw, 44px);
  background: #000; padding: 6px; flex: none;
  box-shadow: 0 22px 40px -22px rgba(0,0,0,.9);
}
.telefono img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: clamp(27px, 3.1vw, 38px); background: var(--claro);
}

/* ─────────────────────────────────────────────────────────── el escaparate */
/*
 * Un teléfono fijo mientras cambia lo que tiene dentro. Cuatro pasos, cada uno
 * de una pantalla de alto: al bajar, la pantalla del teléfono cambia y el texto
 * de al lado con ella.
 *
 * Sin librería y sin fijar el desplazamiento a mano: `position: sticky` es
 * nativo, no pelea con el desplazamiento del móvil, y no hay nada que
 * recalcular cuando cargan las fuentes.
 */
.escaparate { background: var(--suelo); position: relative; }
/* **El teléfono asoma cortado por abajo, no entero.**
 *
 * Victor: «deberían salir tres cuartos de la pantalla solamente, que no se vea
 * el celular completo». Un aparato entero flotando en medio de la pantalla se
 * lee como una foto de catálogo; cortado por el borde se lee como algo que
 * sigue ahí abajo, y empuja a bajar. Es lo que hace la página del iPhone.
 */
.escaparate__pegado {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* Por debajo de la barra flotante, que es fija y mide 82 px. */
  padding-top: 92px;
  /* **El desvanecido, pintado encima y no con máscara.**
   *
   * Estaba como `mask-image` sobre esta caja, que mide una pantalla entera y
   * está pegada: enmascarar obliga al navegador a componer esa capa aparte en
   * CADA fotograma del desplazamiento, y ahí se iba la fluidez.
   *
   * Con el fondo oscuro y liso de ahora, un degradado pintado por encima da
   * exactamente el mismo resultado y cuesta lo que cuesta pintar un degradado,
   * que es nada. Va en `::after` para no añadir un elemento más. */
  display: grid; align-items: end; justify-items: center;
  padding-inline: var(--margen);
}
/* **El teléfono al centro y grande, y lo demás a los lados.**
 *
 * Estaba en una columna a la derecha con el texto a la izquierda, o sea media
 * pantalla vacía y el producto de refilón. Victor: «me gustaría que estuviera
 * en grande y en el centro y que por los lados dijera los textos».
 *
 * Ahora manda el aparato: va centrado, y el titular y las señales orbitan a su
 * alrededor. `--tel` es su ancho, y todo lo que se coloca a los lados lo hace
 * contra esa medida, así que no hay números a ojo que se rompan al cambiar de
 * pantalla. */
/* **El texto a un lado, no centrado.** Victor: «el texto todo centrado se ve
   horrible». Y con razón: centrado, el titular y el aparato compiten por el
   mismo eje y la mirada no sabe cuál mirar primero. A la izquierda se lee
   primero el texto y después se mira el teléfono, que es el orden natural. */
.escaparate__fila {
  --tel: min(48svh, 400px);
  position: relative; width: 100%; max-width: 1180px; height: 100%;
  display: grid; grid-template-columns: 1fr; align-items: end; justify-items: center;
}
/* La columna del teléfono es estrecha y la del texto empieza donde acaban las
   etiquetas. Antes era mitad y mitad, y las etiquetas de la izquierda se salían
   de la pantalla hasta 163 px. */
/* **El texto a la izquierda y el teléfono a la derecha.**
 *
 * Estaba al revés, y las etiquetas del teléfono crecían hacia la derecha justo
 * encima del titular. Ahora salen hacia el hueco entre las dos columnas, donde
 * no hay nada contra lo que chocar. */
.escaparate__dicho-caja { text-align: left; }

/* **El teléfono se mide contra el alto de la ventana, no contra el ancho.**
   Con `26vw` en una pantalla ancha y baja salía de 633 px de alto y el
   escenario no cabía: 1000 px de contenido en una ventana de 820. */
/* **El producto ocupa el viewport, no el icono.**
 *
 * El primer pantallazo llevaba icono, marca, titular, un párrafo de 28 palabras
 * y una parrilla de cuatro specs: siete cosas compitiendo por la misma mirada.
 * Ahora hay titular, una línea, dos enlaces y el teléfono con la app dentro,
 * que es lo único que de verdad enseña qué te estás bajando. */
.telefono.heroe__telefono {
  position: relative; left: auto; right: auto; bottom: auto;
  margin: clamp(26px, 4vh, 46px) auto calc(var(--tel-heroe) * -0.42);
  width: var(--tel-heroe); height: auto; aspect-ratio: 9 / 19.5;
}
.heroe { --tel-heroe: min(46svh, 392px); }
@media (max-width: 780px) { .heroe { --tel-heroe: min(64vw, 300px); } }

/* El sitio donde viven las señales: el mismo marco del teléfono. */
.escaparate__pila { --marco: 1; }
/* **Medida explícita, no `auto`.**
 *
 * Con `inset: 6px; width: auto` una imagen absoluta se dibuja a su tamaño
 * intrínseco —852 px de alto— y no al del marco: el escenario medía 1054 px de
 * contenido en una ventana de 820 y el teléfono se salía por abajo. En un
 * elemento reemplazado, `auto` significa «tu tamaño natural», no «lo que digan
 * los bordes». */
.escaparate__pila img {
  position: absolute; top: 6px; left: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: cover;
  opacity: 0;
}
.escaparate__pila img[data-activa="si"] { opacity: 1; }

.escaparate__dicho { max-width: 100%; }
/* La posición y la opacidad las escribe el JavaScript en cada fotograma: aquí
   sólo se apilan una encima de otra. */
.escaparate__dicho { display: grid; }
.escaparate__dicho > div { grid-area: 1 / 1; }
.escaparate__dicho h2 { color: #FFFFFF; font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -0.045em; }
.escaparate__dicho p { color: var(--humo2); margin-top: 18px; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }


/* **A los dos lados, no todas al mismo.** Antes salían las cuatro por la
   izquierda porque el teléfono vivía en la columna derecha y a su derecha no
   quedaba sitio. Centrado, hay hueco por los dos lados y se reparten. */
/* **Cuelgan del teléfono, no de la sección.** Su `top` va en porcentaje, y
   colgando de la sección ese porcentaje era del alto de la ventana: las
   etiquetas señalaban cualquier sitio menos la parte que nombraban.
   Todas a la derecha: la izquierda es del texto, y una etiqueta encima del
   titular es una etiqueta que estorba. */
/* En pantallas estrechas no cabe nada al lado del teléfono: las señales se
   apagan y el titular se queda solo. */
/* **En un teléfono no desaparecen: se montan encima del aparato.**
 *
 * Estaban ocultas por debajo de 940 px porque al lado no cabían, y eso dejaba
 * la sección en móvil con un texto y una foto y nada más. Victor: «no hay
 * elementos llamativos, sólo texto». Encima de la pantalla sí caben, y además
 * es donde de verdad señalan lo que nombran. */
@media (max-width: 1119px) {
        }
/* **Todas van al mismo lado, a la derecha del teléfono.**
 *
 * Las de la izquierda se salían de la pantalla: el teléfono vive en la columna
 * izquierda, así que una etiqueta que crece hacia fuera se va del lienzo. Y
 * ponerlas alternadas a un lado y otro tampoco valía: en la columna derecha
 * está el texto, y se pisaban. */

/* Las etiquetas salen hacia la izquierda del teléfono, hacia el hueco. El
   texto va antes que el punto para que el punto quede pegado al marco. */

@media (max-width: 900px) {
  /* En un móvil no caben etiquetas flotando al lado de otro móvil. */

}

/* **52 de alto por paso, y son tres.**
 *
 * Empezó en 100 y bajó a 70 porque el escaparate retenía la página. Sigue
 * siendo demasiado: tres capturas pedían 210svh de recorrido, o sea dos
 * pantallas y media de bajar para ver tres fotos. Victor lo llamó «el mega
 * espacio». A 52 son 156svh, y cada foto conserva media pantalla de recorrido
 * para ella sola, que es de sobra para leer una frase de dos renglones. */
.escaparate__pasos > div { height: 52svh; }

@media (prefers-reduced-motion: reduce) {
  .escaparate__dicho > div[data-activa="si"] { animation: none; }
}

/* --------------------------------------------- las funciones, con iconos */

/* ─────────────────────────────────────────────────────── el bento de «qué trae»
 *
 * Seis cajas de tres tamaños, no nueve del mismo. Las dos grandes enseñan algo
 * (las cuatro traducciones, el acordeón de la semana) y las cuatro pequeñas
 * cuentan una línea. Seis columnas dividen bien en 4+2 y en 3+3.
 */
.funciones { display: grid; gap: 14px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .funciones { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .bento--biblia { grid-column: span 4; grid-row: span 2; }
  .bento--semana { grid-column: span 2; grid-row: span 2; }
  .bento--chica  { grid-column: span 3; }
}
@media (min-width: 620px) and (max-width: 899px) {
  .funciones { grid-template-columns: repeat(2, 1fr); }
  .bento--biblia, .bento--semana { grid-column: span 2; }
}

/* **Sin bordes.** Victor: «el bento no es bento, parece más una tabla, esos
   bordes hacen que parezca muy IA». Es cierto: un borde de un píxel alrededor
   de cada caja dibuja una cuadrícula, y una cuadrícula es una tabla. Lo que
   separa las piezas de un bento es el color y la sombra, no la línea. */
.bento {
  background: var(--alza); border: 0; border-radius: 20px;
  padding: 24px; display: flex; flex-direction: column;
  transition: transform .2s ease, background .2s ease;
}
/* **Tipografía grande, como el bento que mandó Victor.**
 *
 * Antes el titular de cada caja era un `1.06rem` con dos líneas de texto
 * debajo: eso no es un bento, es una tabla con bordes redondeados. En el de
 * nachoz el titular ocupa la caja y el cuerpo es una frase. Aquí igual. */
.bento h3 { color: var(--blanco);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 10px;
  text-wrap: balance;
}
.bento__rotulo {
  font: 600 .7rem/1 var(--cifra); letter-spacing: .13em; text-transform: uppercase;
  color: var(--brillo); margin: 0 0 14px;
}
.bento--noche .bento__rotulo { color: #7BC0F9; }
.bento--marca .bento__rotulo { color: #A9CFF6; }
.bento--chica h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.bento--chica p:last-child { font-size: .92rem; }
.bento--biblia h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.bento--semana h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.bento p  { color: var(--humo); font-size: .94rem; }
.bento--chica:hover { transform: translateY(-3px); background: var(--alza2); }

/* **Cada cuadro de un color.** Cuatro rellenos distintos, no seis cajas
   blancas: es lo que separa un bento de una rejilla de tarjetas. */
.bento--papel { background: var(--alza); }
.bento--hielo { background: var(--alza2); }
.bento--noche { background: var(--noche2); color: var(--blanco); }
.bento--noche p { color: #A8BAD0; }
.bento--marca { background: var(--hondo); color: var(--blanco); }
.bento--marca p { color: #C3DCF8; }

/* ── la Biblia: el mismo versículo, cuatro veces */
.verso {
  /* Rellena lo que sobra de la caja en vez de quedarse pegado abajo: la
     tarjeta es alta (ocupa dos filas del bento) y así no queda un hueco muerto
     entre las pastillas y el versículo. */
  margin: 18px 0 0; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 26px; border-radius: 16px;
  background: rgba(255,255,255,.055);
}
.verso p {
  font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.4; color: var(--blanco);
  letter-spacing: -0.02em; min-height: 2.8em;
  transition: opacity .19s ease, transform .19s ease;
}
.verso p.se-va { opacity: 0; transform: translateY(7px); }
@media (prefers-reduced-motion: reduce) { .verso p { transition: none; } }
.verso cite {
  display: block; margin-top: 10px; font-style: normal;
  /* `--hondo` y no `--marca`: el azul de la marca sobre el celeste da 3,41 : 1
     y a este tamaño hace falta 4,5. Éste da 5,5. */
  font: 600 .72rem/1 var(--cifra); letter-spacing: .1em; color: var(--brillo); text-transform: uppercase;
}

/* ── el acordeón de la semana */

.acordeon { margin-top: 6px; display: flex; flex-direction: column; }
.acordeon__fila { border-top: 1px solid rgba(255,255,255,.09); }
.acordeon__fila:first-child { border-top: 0; }
.acordeon__tirador {
  width: 100%; display: flex; align-items: center; gap: 11px;
  /* Toda la fila es el botón, no sólo el texto: un tirador del ancho de las
     letras se falla con el pulgar. */
  min-height: 52px; padding: 12px 0; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.acordeon__titulo { flex: 1; font-weight: 500; font-size: .95rem; letter-spacing: -0.01em; }
.acordeon__mas {
  width: 13px; height: 13px; flex: none; position: relative; transition: transform .25s ease;
}
.acordeon__mas::before, .acordeon__mas::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--humo2); border-radius: 2px;
}
.acordeon__mas::after { transform: rotate(90deg); transition: opacity .25s ease; }
.acordeon__tirador[aria-expanded="true"] .acordeon__mas { transform: rotate(180deg); }
.acordeon__tirador[aria-expanded="true"] .acordeon__mas::after { opacity: 0; }
/* Se abre con `grid-template-rows`, que sí se puede animar, en vez de con
   `height: auto`, que no. */
.acordeon__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.acordeon__cuerpo > div { overflow: hidden; }
.acordeon__tirador[aria-expanded="true"] + .acordeon__cuerpo { grid-template-rows: 1fr; }
.acordeon__cuerpo p { font-size: .95rem; padding-bottom: 12px; color: #9DB0C8; }
.acordeon__hoy {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  padding: 7px 12px; border-radius: 999px; background: rgba(91,155,240,.16);
  font: 600 .76rem/1 var(--cifra); letter-spacing: .01em; color: var(--claro);
}
.acordeon__hoy i { width: 6px; height: 6px; border-radius: 50%; background: var(--marca); }
@media (prefers-reduced-motion: reduce) {
  .acordeon__cuerpo, .acordeon__mas, .verso p { transition: none; }
}

/* ------------------------------------------------------------- el ayudante */

.chat {
  border-radius: 22px; background: var(--noche2); border: 1px solid var(--linea2);
  padding: clamp(20px, 2.6vw, 28px); max-width: 560px;
}
.chat__pregunta {
  margin-left: auto; width: fit-content; max-width: 88%;
  background: rgba(255,255,255,.07); border-radius: 16px; padding: 10px 15px;
  font-size: .93rem; font-weight: 500;
}
.chat__respuesta { font-size: 1rem; line-height: 1.65; margin-top: 16px; display: grid; color: var(--blanco); }
.chat__respuesta > * { grid-area: 1 / 1; }
.chat__fantasma { visibility: hidden; }
.chat__cita { color: var(--brillo); font-weight: 500; border-bottom: 1px solid rgba(91,155,240,.4); }
.chat__cursor { display: inline-block; width: .46em; height: 1em; vertical-align: -.14em; background: var(--brillo); }
.chat__fuentes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; opacity: 0; transition: opacity .2s var(--curva); }
.chat__fuentes[data-visible="si"] { opacity: 1; }
.chat__fuentes span {
  font-size: .78rem; font-weight: 500; color: var(--brillo);
  border: 1px solid var(--linea2); border-radius: 999px; padding: 5px 12px;
}

/* ------------------------------------------------------------- comunidad */

/* **Sin posición absoluta.**
 *
 * Antes las cartas flotaban con porcentajes a mano encima del teléfono: le
 * tapaban la pantalla, se tapaban entre ellas, y las reacciones caían sobre la
 * barra de pestañas. Coordenadas a ojo no se pueden sostener a todos los
 * anchos.
 *
 * Ahora son dos columnas y una pila. El giro se queda, para que sigan
 * pareciendo objetos sueltos y no una lista, pero **el solape es imposible por
 * estructura**, no por haber acertado un número. */
.mesa {
  margin-top: 44px;
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr; justify-items: center; align-items: start;
}
@media (min-width: 860px) { .mesa { grid-template-columns: minmax(0, 300px) 1fr; justify-items: start; } }

.mesa__telefono { height: min(66svh, 600px); width: auto; }

.mesa__cartas { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 460px; }

.nota {
  border-radius: 16px; background: var(--alza);
  border: 1px solid var(--linea); padding: 16px 18px;
  transition: transform .18s var(--curva);
}
.nota:nth-child(odd)  { transform: rotate(-.8deg); }
.nota:nth-child(even) { transform: rotate(.7deg); }
.nota:hover { transform: rotate(0deg) translateY(-2px); }
.nota b { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 3px; color: var(--blanco); }
.nota p { font-size: .88rem; color: var(--humo); line-height: 1.5; }
.nota i { display: block; font-style: normal; margin-top: 9px; font-size: .74rem; font-weight: 500; color: var(--marca); }



/* ------------------------------------------------------------ los idiomas */


/* ---------------------------------------------------------------- el pie */

/* Sin `border-top`. Tenía sentido cuando encima había otra sección oscura y
   hacía falta separarlas; ahora encima acaba un degradado que llega al mismo
   negro, y esa línea de un píxel era justo la raya que se veía cruzando la
   pantalla. Medida: un salto de 101 sobre 765 en una sola fila. */
.pie { background: var(--noche); color: var(--humo2); padding: 44px var(--margen) 56px; font-size: .9rem; }
.pie__filas { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; }
.pie a { color: var(--humo2); }
.pie a:hover { color: var(--blanco); }
.pie nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ------------------------------------------------- aparecer al desplazarse */
/* 320 ms y 12 px, que es lo que marca la guía. Nada de interfaz pasa de 500. */
.sube { opacity: 0; transform: translateY(12px); }
.sube[data-visible="si"] {
  opacity: 1; transform: none;
  transition: opacity .32s var(--curva), transform .32s var(--curva);
}
.sube[data-visible="si"]:nth-child(2) { transition-delay: .03s; }
.sube[data-visible="si"]:nth-child(3) { transition-delay: .06s; }
.sube[data-visible="si"]:nth-child(4) { transition-delay: .09s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sube { opacity: 1 !important; transform: none !important; transition: none !important; }
  .boton:active, .funcion:hover { transform: none; }
  .chat__cursor { display: none; }
  .escaparate__pila img { transition: none; }
}
html:not(.con-js) .sube { opacity: 1; transform: none; }

/* -------------------------------------------------------------- legal */

.legal { max-width: 66ch; padding-block: clamp(36px, 6vh, 72px) clamp(56px, 9vh, 104px); color: var(--blanco); }
.legal h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 10px; }
.legal h2 { font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--humo2); font-size: 1rem; line-height: 1.7; margin-bottom: 1em; }
.legal strong { color: var(--blanco); font-weight: 500; }
.legal ul { padding-left: 20px; margin: 0 0 1em; }
.legal li { margin-bottom: .5em; }
.legal__fecha { font-family: var(--cifra); font-size: .78rem; color: var(--humo2); }
.pendiente {
  display: block; border: 1px dashed var(--brillo); border-radius: 12px;
  padding: 14px 16px; margin: 16px 0;
  color: var(--brillo); font-family: var(--cifra); font-size: .82rem; line-height: 1.6;
}

/* ─────────────────────────────────────────────── el ayudante, a dos columnas */
/*
 * Tenía la conversación a un lado y nada al otro. Ahora enfrente van las
 * preguntas que más se hacen, que son las que trae la app de serie: dicen para
 * qué sirve mejor que un párrafo explicándolo.
 */
.ayudante { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .ayudante { grid-template-columns: minmax(0, 560px) 1fr; } }

.ayudante__rotulo {
  font-family: var(--cifra); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hondo); margin-bottom: 16px;
}
/* **Cuatro sugerencias en tarjetas, no ocho pastillas en fila.** Victor: «lo
   que más se pregunta es una lista larga, mejor que sean diferentes
   sugerencias mejor acomodadas». Ocho pastillas se leen como etiquetas; cuatro
   tarjetas se leen como cosas que puedes preguntar. */
.preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 520px) and (max-width: 899px) { .preguntas { grid-template-columns: 1fr 1fr; } }
/* **Pintadas para el suelo claro, no para el fondo negro de antes.** Cuando
   esta sección era un tramo oscuro, las pastillas iban en azul claro con borde
   blanco translúcido. Al pasar la sección a claro se quedaron así: azul claro
   sobre celeste, o sea invisibles. */
.preguntas li {
  font-size: .9rem; color: var(--blanco);
  border: 1px solid var(--linea); border-radius: 999px; padding: 10px 16px;
  background: var(--alza);
  transition: border-color .18s var(--curva), color .18s var(--curva);
}
.preguntas li:hover { border-color: var(--marca); color: var(--hondo); }

/* ───────────────────────────────────────── las reacciones del muro */
/*
 * Las seis que acepta la base, no unas inventadas. Aquí los emoji sí van: una
 * reacción **es** un emoji, no es un icono de interfaz.
 */
/* Dentro del flujo, debajo de las cartas. Antes flotaban sobre la barra de
   pestañas del teléfono y encima de la carta «Del muro». */
.reacciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.reaccion {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--alza); border: 0;
  border-radius: 999px; padding: 7px 13px;
  font-size: .84rem; font-weight: 500; color: var(--blanco);
}
.reaccion em { font-style: normal; font-size: 1.02rem; }
.reaccion b { color: var(--humo); font-weight: 500; }



/* ─────────────────────────────────────── el capítulo de hoy, en el héroe */
/*
 * No es una frase de marketing: es un dato. Cambia solo cada día y sale del
 * mismo cálculo que la app, así que la web y el teléfono siempre dicen lo
 * mismo. Ninguna otra app puede poner esto.
 */
.hoy {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .86rem; color: var(--humo2);
  background: rgba(91,155,240,.1);
  border: 1px solid rgba(91,155,240,.28);
  border-radius: 999px; padding: 7px 16px 7px 13px;
  margin: 0 0 26px;
}
.hoy b { color: var(--blanco); font-weight: 500; }
.hoy i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brillo);
  animation: latido 2.6s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .hoy i { animation: none; } }

/* ──────────────────────────── la constelación de puntos de los fondos oscuros */
/*
 * Es la rejilla de `ManaDotsBackdrop` de la app, la que se ve en la antesala de
 * Reavivados. Puntos pequeños sobre negro: grandes convierten la rejilla en un
 * tablero. Aquí es sólo ambiente, y por eso va muy baja de opacidad.
 */
.tramo--noche, .escaparate, .heroe { position: relative; isolation: isolate; }
.tramo--noche::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(123,192,249,.09) 0.8px, transparent 0.9px);
  background-size: 26px 26px;
}

/* ────────────────────────────────────────────── el fondo de cromo líquido */
/*
 * Va detrás del héroe, y **debajo del resplandor** que ya había: el shader da
 * la textura en movimiento y el degradado radial sigue concentrando la luz
 * detrás del logo. Uno solo de los dos deja el fondo o plano o sucio.
 *
 * Si WebGL2 no está, el lienzo se queda transparente y abajo está el color del
 * tramo. La página no se entera.
 */
.fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; display: block;
  /* **Sin máscara.** El mismo error que en la caja pegajosa: enmascarar una
     capa del alto de la pantalla obliga a recomponerla en cada fotograma. El
     apagado hacia abajo lo hace ahora el velo pintado de `::after`, que ya
     estaba ahí y no cuesta nada. */
}

/* **Una sola capa de fondo, no dos.**
 *
 * Había un resplandor azul y encima un velo, los dos del tamaño de la pantalla:
 * al desplazarse se repintaban ambos. Fundidos en uno, el resultado es el mismo
 * y el trabajo la mitad. */
.heroe--fondo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 34%, rgba(30,132,230,.30), transparent 68%),
    linear-gradient(180deg, transparent 55%, var(--suelo) 96%);
}


/* ──────────────────────────────────────── las tarjetas que ponen el contraste
 *
 * Antes el contraste lo ponía la sección entera: oscuro, claro, oscuro, blanco,
 * oscuro. Seis losas de color pegadas, y cada junta es un corte que se ve.
 * Victor, mirando nachoz.app: «no se ven cortes, todo fluye».
 *
 * Ahora el suelo es uno solo de arriba abajo y lo que cambia de color son las
 * TARJETAS. Se conserva el ritmo visual y desaparecen las juntas.
 */
.tarjeta { border-radius: 22px; }
.tarjeta--noche {
  background: var(--noche2); color: var(--blanco);
  border: 0;
}
.tarjeta--marca {
  /* Azul plano. Los degradados dentro de las cajas están prohibidos aquí, y
     además un plano deja el texto blanco con el mismo contraste en toda la
     tarjeta en vez de irlo perdiendo hacia una esquina. */
  background: var(--hondo); color: var(--blanco);
}
.tarjeta--noche .rotulo, .tarjeta--marca .rotulo { color: var(--claro); }

/* La sección del ayudante y la de idiomas viven ahora dentro de una tarjeta,
   así que su relleno lo pone la tarjeta y no la sección. */
  color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 2px 0 0 var(--claro);
}

/* ─────────────────────────────────────────────── las preguntas frecuentes */
.envoltura--angosta { max-width: 760px; }
.dudas {
  margin-top: 34px; background: var(--alza); border-radius: 20px;
  padding: 6px clamp(18px, 3vw, 30px);
}
.dudas .acordeon__titulo { font-size: 1rem; }
.dudas .acordeon__tirador { min-height: 62px; }
.dudas .acordeon__cuerpo p { padding-bottom: 16px; max-width: 62ch; }

/* ────────────────────────────────── las dos únicas juntas, y en degradado
 *
 * Sólo quedan dos cambios de fondo en toda la página: el bloque oscuro de
 * arriba entrando en el suelo claro, y el suelo claro entrando en el pie. Los
 * dos pasan con un degradado de 200 px, así que no hay una línea que cruce la
 * pantalla. */
/* **En oklab, no en sRGB.** Entre un azul casi negro y un celeste, sRGB pasa
   por un gris sucio a mitad de camino y la junta se ve embarrada. Oklab
   interpola por luminosidad percibida y el paso queda limpio. */
#funciones {
  /* **Una junta corta, no un amanecer.** Victor: «el corte que hay al principio
     donde está el celular se ve pésimo, pésimo degradado». Una rampa de 250 px
     entre un azul casi negro y un celeste ocupa media pantalla, se ve bandear
     en 8 bits y parece un cielo pintado. Cortada a 96 px se lee como un borde
     suave y ya está. Los puntos de `.escaparate::after` caen justo encima y
     rompen las bandas. */
  background: none;
  padding-top: 150px;
}
#descargar {
  /* **La junta con el pie, corta y por debajo del contenido.**
   *
   * Una réplica de la de arriba: 96 px de rampa. Más larga se ve bandear y
   * parece un amanecer pintado; más corta vuelve a ser una raya. Y el relleno
   * de abajo deja el contenido bien lejos de la parte oscura: cuando la rampa
   * cruzaba el párrafo, el texto gris se quedaba a 1,77 : 1. */
  padding-bottom: 130px;
}
#descargar .entrada, #descargar h2, #descargar .rotulo { position: relative; }

.pie__marca { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; color: var(--blanco); }
.pie__marca svg { width: 25px; height: 24px; }

/* ────────────────────────────────────────────── la cinta de los cuatro idiomas
 *
 * Dos filas que pasan en sentidos contrarios, cada una con el mismo versículo
 * en varios idiomas. No hay nada que tocar: la sección se explica sola mientras
 * la miras, que es justo lo que un selector de pestañas no hace.
 */
.cinta { margin-top: 40px; display: grid; gap: 14px; }
/* Se desvanece por los dos bordes: sin esto las frases aparecen y desaparecen
   de golpe contra el borde de la pantalla y parece que están cortadas. */
.cinta__fila {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta__pista {
  display: flex; width: max-content; gap: 14px;
  animation: cinta-anda 46s linear infinite;
}
.cinta__fila--vuelta .cinta__pista { animation-direction: reverse; }
/* Se para al pasar por encima, para poder leer la que te interese. */
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes cinta-anda { to { transform: translateX(-50%); } }

.cinta__pieza {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 18px 26px; border-radius: 16px;
  background: var(--alza); border: 0;
}
.cinta__pieza b {
  font: 600 .7rem/1 var(--cifra); letter-spacing: .09em; text-transform: uppercase;
  color: var(--brillo); flex: none;
}
.cinta__pieza q {
  quotes: none; font-size: clamp(1rem, 1.6vw, 1.24rem); letter-spacing: -0.015em;
  color: var(--blanco); white-space: nowrap;
}
/* Una de cada tres va en azul, para que la cinta no sea una fila de cajas
   blancas iguales pasando. */
.cinta__pieza:nth-child(3n+2) { background: var(--hondo); border-color: var(--hondo); }
.cinta__pieza:nth-child(3n+2) b { color: #A9CFF6; }
.cinta__pieza:nth-child(3n+2) q { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta__fila { overflow-x: auto; }
}


/* ─────────────────────────────────────── lo que Maná sustituye ("competir")
 *
 * El titular de la sección dice «repartido en cinco apps» y hasta ahora no lo
 * demostraba. Aquí está la cuenta: cinco sitios a la izquierda, uno a la
 * derecha. No se nombra a nadie; se enseña el montón.
 */
.cambio {
  margin-top: 40px; display: grid; gap: 18px;
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 880px) { .cambio { grid-template-columns: 1fr auto minmax(0, 300px); gap: 26px; } }
.cambio__rotulo {
  font: 600 .7rem/1 var(--cifra); letter-spacing: .12em; text-transform: uppercase;
  color: var(--humo2); margin-bottom: 12px;
}
.cambio__antes { display: grid; gap: 8px; }
.cambio__antes .cambio__rotulo { margin: 0 0 4px; }
.cambio__fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 15px 20px; border-radius: 13px;
  background: var(--alza); border: 0;
}
.cambio__fila b { font-weight: 500; font-size: .95rem; color: var(--blanco); }
.cambio__fila span { font-size: .85rem; color: #8B9DB6; }
.cambio__flecha { display: grid; place-items: center; }
.cambio__flecha svg {
  width: 30px; height: 30px; stroke: var(--marca); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* En columna, la flecha apunta hacia abajo, que es a donde va la lectura. */
@media (max-width: 879px) { .cambio__flecha svg { transform: rotate(90deg); } }
.cambio__despues {
  background: var(--hondo); color: var(--blanco);
  border-radius: 18px; padding: 26px 24px; text-align: center;
  display: grid; justify-items: center; gap: 4px;
}
.cambio__despues .cambio__rotulo { color: #A9CFF6; margin-bottom: 8px; }
.cambio__despues .logo { width: 40px; height: 39px; margin-bottom: 8px; }
.cambio__despues .logo path { stroke: #fff; }
.cambio__despues b { font-size: 1.24rem; letter-spacing: -0.02em; }
.cambio__despues span { font-size: .88rem; color: #C3DCF8; }



/* ──────────────────────────────────── el abanico de tres pantallas
 *
 * Una al centro y dos escondidas justo detrás. Al bajar salen hacia los lados,
 * como se abre una baraja. Las tres se ven a la vez, que es de lo que se trata:
 * enseñar de un golpe lo que la app hace, en vez de una pantalla cada vez.
 */
.abanico {
  --abierto: 0;
  position: relative; margin-top: clamp(40px, 6vw, 72px);
  display: grid; place-items: center;
  /* Sitio reservado para el abanico ya abierto: sin esto la sección crece
     mientras se abre y empuja lo de abajo. */
  min-height: min(72svh, 620px);
  perspective: 1400px;
}
.abanico__tel {
  position: absolute; margin: 0;
  width: min(30svh, 268px); aspect-ratio: 9 / 19.5;
  border-radius: clamp(28px, 3.2vw, 38px);
  background: #000; padding: 6px;
  box-shadow: 0 20px 38px -22px rgba(0,0,0,.75);
}
.abanico__tel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: clamp(23px, 2.7vw, 33px); background: var(--claro);
}
.abanico__tel--centro { z-index: 3; }
.abanico__tel--izq, .abanico__tel--der { z-index: 1; }
.abanico__tel figcaption { color: var(--claro);
  position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
  font: 500 .74rem/1 var(--cifra); letter-spacing: .08em; text-transform: uppercase;
  /* Los nombres sólo aparecen cuando el abanico ya está abierto: antes están
     los tres en el mismo sitio y se leerían encima unos de otros. */
  opacity: var(--abierto); transition: opacity .2s linear;
}
.abanico__tel--centro figcaption { opacity: 1; }
/* Sin movimiento, se quedan abiertas y quietas. */
.abanico[data-abierto="si"] { --abierto: 1; }
.abanico[data-abierto="si"] .abanico__tel--izq { transform: translateX(-78%) rotate(-9deg) scale(.88); }
.abanico[data-abierto="si"] .abanico__tel--der { transform: translateX(78%) rotate(9deg) scale(.88); }
@media (max-width: 720px) {
  .abanico__tel { width: min(38svh, 218px); }
}


/* ─────────────────────────────────────────── las preguntas, con algo al lado
 *
 * Estaban solas en medio de la página, centradas y sin nada alrededor. Victor:
 * «lo de tienes preguntas está bien pero se ve cero atractivo». El problema no
 * era el acordeón sino el vacío: media sección en blanco a los lados. Ahora el
 * titular vive a la izquierda con la tarjeta de contacto debajo, y la lista
 * ocupa el resto.
 */
.cuestion { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .cuestion { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.cuestion__lado h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.cuestion__caja { margin-top: 26px; padding: 22px 24px; }
.cuestion__caja p { color: #C3DCF8; font-size: .92rem; margin-bottom: 6px; }
.cuestion__caja a { color: #fff; font-weight: 500; letter-spacing: -0.01em; }
.cuestion__caja a:hover { text-decoration: underline; }
.cuestion .dudas { margin-top: 0; }

/* La fila abierta se tiñe, para que se vea cuál estás leyendo. */
.dudas .acordeon__fila { border-top-color: rgba(255,255,255,.08); }
.dudas .acordeon__fila:has([aria-expanded="true"]) { background: rgba(255,255,255,.045); border-radius: 14px; }
.dudas .acordeon__fila:has([aria-expanded="true"]) + .acordeon__fila { border-top-color: transparent; }
.dudas .acordeon__tirador { padding-inline: 14px; }
.dudas .acordeon__cuerpo p { padding-inline: 14px; }
/* El más, dentro de un círculo: a pelo era un palito perdido en el margen. */
.dudas .acordeon__mas {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.09);
  display: grid; place-items: center;
}
.dudas .acordeon__mas::before, .dudas .acordeon__mas::after {
  inset: 50% 9px auto; background: var(--claro); height: 1.8px;
}


/* Los anclas del menú tienen que parar por debajo de la barra flotante. */
section[id] { scroll-margin-top: 96px; }
@media (max-width: 720px) { section[id] { scroll-margin-top: 84px; } }
/* **El icono de la app sustituye a la chevron en todas partes.**
 *
 * El redondeo es del 23 %, que es el del superóvalo de iOS: con menos parece un
 * cuadrado con las esquinas limadas y con más, una pastilla. */
.icono {
  width: clamp(84px, 9vw, 112px); height: auto; border-radius: 30%;
  display: block; margin-bottom: 14px;
  box-shadow: none;
}

.icono--mini { width: 27px; margin: 0; border-radius: 31%; box-shadow: none; }
.pie__marca .icono--mini { width: 29px; }
.icono--carta { width: 52px; margin: 0 0 8px; border-radius: 30%; box-shadow: none; }


/* ─────────────────────────────────────────────────── el orbe que piensa
 *
 * Sale mientras el ayudante «piensa» y se apaga al empezar a escribir. Ocupa el
 * sitio de la respuesta, así que la tarjeta no cambia de alto.
 */
.orbe { display: block; width: 78px; height: 78px; margin: 4px 0 2px; }
.orbe[hidden] { display: none; }

/* Las pastillas de preguntas son botones de verdad: se tocan y contestan. */
.preguntas li { padding: 0; border: 0; background: none; }
.preguntas li button {
  width: 100%;
  font: 500 1rem/1.35 var(--ui); letter-spacing: -0.015em;
  color: var(--blanco); cursor: pointer;
  border: 0; border-radius: 14px;
  min-height: 62px; padding: 16px 20px; background: var(--alza); border: 0;
  text-align: left;
  transition: border-color .18s var(--curva), color .18s var(--curva), background .18s var(--curva);
}
.preguntas li button:hover { background: var(--alza2); color: #fff; }
.preguntas li button[aria-current="true"] {
  background: var(--hondo); border-color: var(--hondo); color: #fff;
}


/* ──────────────────────────────────────────────────── por qué existe Maná
 *
 * Esto era «Sostener Maná» y era una petición de dinero con un botón. Victor:
 * «el chiste no es una app, sino crear comunidad y hacer un ministerio que
 * apoye a la iglesia local». Así que el dinero pasa a ser una de cuatro cosas,
 * y la primera es para qué existe todo esto.
 */
.mision { display: grid; gap: 16px; margin-top: 42px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .mision { grid-template-columns: repeat(6, 1fr); }
  .mision__grande { grid-column: span 6; }
  /* Eran tres cajas de dos columnas. Al sacar «si te suma» a su propio
     espacio quedan dos, y de dos columnas dejarían un tercio de la fila
     vacío. */
  .mision__caja { grid-column: span 3; }
}
.mision article { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; }
.mision h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.08; margin: 0 0 12px; text-wrap: balance;
}
.mision__grande h3 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); max-width: 20ch; }
.mision p:last-of-type { font-size: .95rem; }
.mision__grande p:last-of-type { max-width: 58ch; font-size: 1rem; }
.tarjeta--noche .mision p, .mision__grande p:last-of-type { color: #A8BAD0; }
.tarjeta--marca .mision p, .mision__caja.tarjeta--marca p:last-of-type { color: #C3DCF8; }
.mision__caja--papel { background: var(--alza); }
.mision__caja--hielo { background: var(--alza2); }
.mision__caja--papel p, .mision__caja--hielo p { color: #9DB0C8; }
/* ─────────────────────────────────────────────── el espacio de las donaciones
 *
 * Victor: «quiero un espacio dedicado para que diga las donaciones». Estaba
 * como la cuarta tarjeta de un bento de cuatro, o sea que la única acción que
 * pedimos en toda esta parte de la página iba del mismo tamaño que un párrafo
 * sobre la Escuela Sabática.
 *
 * A todo lo ancho, con el porqué a la izquierda y las cifras y los botones a la
 * derecha. Sin tarjeta ni borde: es el suelo de la sección, no una caja más.
 */
.apoyo {
  margin-top: 16px;
  background: var(--alza);
  border-radius: 22px;
  padding: clamp(24px, 3.4vw, 40px);
  display: grid; gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .apoyo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.apoyo h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.08; margin: 0 0 12px;
  text-wrap: balance;
}
.apoyo__dicho p { color: #A8BAD0; font-size: .95rem; margin: 0; max-width: 52ch; }
.apoyo__dicho p + p { margin-top: 18px; }
.apoyo__dicho .apoyo__cuenta + p { margin-top: 22px; }

/* **Lo que ya lleva puesto, en renglones.**
 *
 * Victor: «eso de apoyar así se siente vacío sin justificación». Y es verdad:
 * pedir apoyo sin decir en qué se va no es una petición, es una colecta. En
 * prosa esto se lee por encima; en cuatro renglones se cuenta. Cada uno empieza
 * por la cosa en blanco y sigue con por qué cuesta, que es el orden en que se
 * pregunta. */
/* **Dos listas, no una.** Lo de las tiendas y los servidores ya está pagado;
   las licencias de las Biblias son lo que se quiere comprar. En una sola lista
   se leería que ya se tienen, que es exactamente lo contrario de lo que se está
   pidiendo. Cada una con su rótulo, y el orden importa: primero lo puesto,
   después lo que falta. */
.apoyo__paso {
  font-size: .68rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brillo);
  margin: 22px 0 0;
}
.apoyo__cuenta {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 10px;
  max-width: 52ch;
}
.apoyo__cuenta li {
  color: #A8BAD0; font-size: .92rem; line-height: 1.5;
  padding-left: 16px; position: relative;
}
.apoyo__cuenta li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brillo);
}
.apoyo__cuenta b { color: var(--blanco); font-weight: 500; }

/* Las cifras. Sin marco y sin color: es un dato, no un termómetro de
   recaudación. Nada de barras que se llenan ni metas que alcanzar. */
.apoyo__cifras { display: grid; gap: 18px; margin-bottom: 24px; }
/* La cifra encima y su explicación debajo, no una al lado de la otra: en dos
   columnas el número se queda con el ancho y el texto se parte donde le toca,
   que la primera vez dejó «mes» solo en un renglón. Es además como lo hace el
   panel, donde el 480 manda y el «de 482» va debajo. */
.apoyo__cifra b {
  display: block;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 600;
  letter-spacing: -0.04em; color: var(--blanco); line-height: 1;
  margin-bottom: 5px;
}
.apoyo__cifra span {
  display: block; color: var(--humo2);
  font-size: .9rem; line-height: 1.4; text-wrap: pretty;
}
.apoyo__nota { color: var(--humo2); font-size: .78rem; margin: 0; }

/* **Los nombres, corridos y todos iguales.**
 *
 * Nada de tarjetas, ni tamaños distintos, ni orden por cuánto dio cada quien.
 * En cuanto un nombre es más grande que otro deja de ser una lista de gente y
 * pasa a ser una tabla de posiciones, y aquí no se compite por apoyar. Van a
 * todo lo ancho porque una lista de nombres quiere ancho, no una columna. */
.apoyo__gente { grid-column: 1 / -1; padding-top: 4px; }
.apoyo__gente b {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--humo2); margin-bottom: 10px;
}
.apoyo__gente p {
  margin: 0; color: #A8BAD0; font-size: .95rem; line-height: 1.7;
  text-wrap: pretty;
}
.apoyo__gente i { font-style: normal; color: var(--humo2); }

.apoyo__contacto {
  grid-column: 1 / -1; margin: 0; padding-top: 4px;
  color: var(--humo2); font-size: .86rem; line-height: 1.6;
}
.apoyo__contacto a { color: var(--blanco); }
.apoyo__contacto a:hover { text-decoration: underline; }

.donar__acciones {
  display: grid; gap: 10px;
}
.donar__acciones .boton { width: 100%; }
.donar__nota { display: none; }

/* **La tarjeta grande no puede ser una columna de texto en medio del ancho.**
 *
 * El titular ocupaba 20ch a la izquierda y los otros 45% de la tarjeta estaban
 * vacíos. Con dos columnas, la frase manda a la izquierda y el porqué se lee a
 * su lado, que es como se lee de todas formas. */
@media (min-width: 900px) {
  .mision article.mision__grande {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
  .mision__grande .bento__rotulo { grid-column: 1 / -1; }
  .mision__grande h3 { margin-bottom: 0; }
  .mision__grande p:last-of-type { max-width: 46ch; }
}

/* **Lo que viaja y lo que no.**
 *
 * «Nunca leemos lo que oras» es una promesa, y una promesa en prosa hay que
 * creérsela. Puesta en dos columnas se puede comprobar renglón por renglón, que
 * es lo único que convierte una promesa en un dato. La columna de la derecha va
 * en blanco y la de la izquierda apagada: lo que importa aquí es lo que no sale
 * del teléfono, no lo que sale. */
.reparto {
  margin-top: auto; padding-top: 24px;
  display: grid; gap: 16px;
  font-size: .86rem; line-height: 1.5;
}
.reparto__lado--nunca {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.24);
}
.reparto__rotulo {
  font-size: .66rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; margin: 0 0 10px;
}
.reparto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tarjeta--marca .reparto .reparto__rotulo { color: #A9CFF6; }
.tarjeta--marca .reparto li { color: #C3DCF8; }
.tarjeta--marca .reparto .reparto__lado--nunca li { color: #FFFFFF; font-weight: 500; }

/* **Siete días, y el primero es el sábado.**
 *
 * El dato que más se cuenta mal de la Escuela Sabática es cuándo empieza la
 * semana. Escrito se lee por encima; en siete casillas que empiezan en S y
 * acaban en V, no. */
.semana {
  margin-top: auto; padding-top: 24px;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.semana span {
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--humo2);
  font-size: .8rem; font-weight: 500;
}
.semana span:first-child {
  background: var(--hondo);
  color: #FFFFFF;
}


/* ══════════════════════════════════════════════════════════ el móvil
 *
 * Casi todas las medidas de arriba salen de una ventana ancha, y en 390 px se
 * traducen en pantallas medio vacías: 290 px de relleno antes del primer
 * titular es un tercio de la pantalla sin nada. Victor, con razón: «para móvil
 * es una mega mierda». Aquí se aprieta todo.
 */
@media (max-width: 720px) {
  .tramo { padding-block: clamp(52px, 8vh, 76px); }

  /* La junta de arriba pierde su relleno de escritorio. */
  #funciones { padding-top: 150px; }
  #descargar { padding-bottom: 150px; }

  h1 { font-size: clamp(2.15rem, 10.5vw, 3rem); }
  h2 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .entrada { font-size: 1rem; margin-top: 16px; }

  /* El héroe: menos aire entre las piezas, que si no hay que desplazar para
     llegar a los botones. */
  .heroe { padding-top: 96px; }
  /* **Sólo el del héroe.** Escrito como `.icono` a secas, este ancho pisaba
     también al de la barra y al de la tarjeta, y el menú acababa con un icono
     de 78 px. */
  .heroe .icono { width: 78px; margin-bottom: 12px; }
  .heroe__marca { margin-bottom: 14px; }
  .acciones { margin-top: 20px; width: 100%; }
  .acciones .boton { width: 100%; }

  /* **El abanico, más cerrado.** Con la separación de escritorio las dos
     pantallas de los lados se salen por los bordes y se ven a medias: se
     entiende peor que con una sola. */
  .abanico { min-height: min(58svh, 470px); }
  .abanico__tel { width: min(34svh, 168px); }

  .bento { padding: 20px; }
  .bento h3, .bento--chica h3 { font-size: 1.28rem; }
  .bento--biblia h3 { font-size: 1.6rem; }
  .verso { padding: 18px; }
  .verso p { font-size: 1.08rem; min-height: 3.2em; }

  .mision article { padding: 22px; }
  .mision__grande h3 { font-size: 1.7rem; }
  .mision h3 { font-size: 1.35rem; }

  .cinta__pieza { padding: 14px 18px; }
  .cinta__pieza q { font-size: 1rem; }

  .dudas { padding-inline: 16px; }
  .dudas .acordeon__tirador { min-height: 56px; padding-inline: 4px; }
  .dudas .acordeon__cuerpo p { padding-inline: 4px; }
  .cuestion__caja { margin-top: 20px; }

  .pie__filas { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* La cápsula del menú, en un teléfono, pegada al borde de arriba. */
@media (max-width: 520px) {
  .barra { padding: 10px 14px; }
  .barra__pastilla { width: 100%; justify-content: space-between; padding-left: 14px; }
}


/* Cada palabra del titular, dentro de una caja que la recorta: es lo que deja
   entrar la palabra desde debajo en vez de aparecer de la nada. */
.palabra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.palabra > span { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .palabra > span { transform: none !important; } }


/* ═════════════════════════════════ lo que hace grande a un titular de Apple
 *
 * No es el tamaño: es que la frase cabe. «Apt for anything.» son tres palabras
 * y por eso se puede poner enorme. Los nuestros tenían siete y nueve, y a
 * cualquier tamaño grande ocupaban cinco líneas y había que encogerlos. Cortada
 * la frase, el tamaño sube solo.
 *
 * Y la palabra que importa va en color, que es la otra mitad del truco: dice
 * dónde mirar sin subrayar nada.
 */
h1 { font-size: clamp(2.8rem, 8.5vw, 6.6rem); letter-spacing: -0.05em; }
h2 { font-size: clamp(2.4rem, 6.5vw, 5rem); letter-spacing: -0.05em; }
.heroe h1 { max-width: 11ch; }
h1 em, h2 em { font-style: normal; color: var(--marca); }
.tramo--claro h1 em, .tramo--claro h2 em { color: var(--brillo); }
.tarjeta--noche h2 em, .tarjeta--marca h2 em { color: var(--claro); }
.escaparate__dicho h2 em { color: var(--brillo); }

/* **El cuerpo, tamaño de párrafo y no de pie de foto.**
   Estaba a 0,94rem y en dos líneas: parecía que no teníamos nada que decir. */
.entrada {
  font-size: clamp(1.08rem, 1.55vw, 1.32rem); line-height: 1.55;
  max-width: 46ch; margin-top: 24px;
}
.bento p:last-child, .mision p:last-of-type { font-size: 1rem; line-height: 1.55; }

@media (max-width: 720px) {
  h1 { font-size: clamp(2.9rem, 14vw, 4rem); }
  h2 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .entrada { font-size: 1.06rem; }
}


/* ═══════════════════════════════ el color va en las piezas, no en el suelo
 *
 * La página del Mac mini es blanca casi entera, y lo que llama son los paneles
 * de color, las tarjetas negras y la palabra del titular en rojo. El celeste
 * corrido que teníamos hacía justo lo contrario: teñía todo por igual, y encima
 * de un fondo ya azul ningún azul destaca.
 *
 * El abanico de devocionales se queda con panel propio: es la sección con más
 * imagen y la que aguanta un fondo de color sin competir con nada.
 */
#abanico { background: var(--alza); }
#abanico .rotulo { color: var(--brillo); }
#comunidad { background: var(--suelo); }


/* **Avisar de lo que se mueve.** Sin `will-change`, el navegador decide en
   caliente si algo merece su propia capa, y mientras lo decide repinta. Con el
   aviso, el teléfono y las pantallas viven en capas y el desplazamiento sólo
   las recoloca. */
#pila { will-change: transform; }
.escaparate__pila img { will-change: opacity; }
.abanico__tel { will-change: transform; }


/* El velo que hunde el teléfono en el fondo, en vez de la máscara de antes. */
.escaparate__pegado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, transparent, var(--suelo) 86%);
  pointer-events: none; z-index: 5;
}


/* **Blanco de verdad en los titulares.** Nada de gris: sobre fondo oscuro, un
   titular que no es #FFF se lee como apagado. */
h1, h2, .escaparate__dicho h2 { color: #FFFFFF; }


/* ───────────────────────────── los datos del héroe, en el hueco de abajo
 *
 * Debajo de los botones quedaban 158 px vacíos desde que se quitó la captura.
 * Victor: «dejaste un mega campo en el héroe». En vez de encogerlo, ahí van
 * cuatro datos que además responden lo que la gente pregunta antes de bajar:
 * cuánto cuesta, qué trae, en qué idiomas y para qué teléfono.
 */
.datos {
  list-style: none; margin: clamp(34px, 5vh, 58px) 0 0; padding: 0;
  display: grid; gap: 22px 42px; grid-template-columns: repeat(2, auto);
  justify-content: center; text-align: center;
}
@media (min-width: 860px) { .datos { grid-template-columns: repeat(4, auto); gap: 0 clamp(32px, 4vw, 64px); } }
.datos li { display: grid; gap: 4px; }
.datos b { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
.datos span { font-size: .84rem; color: var(--humo2); }


/* Los detalles de una sección: cuatro bloques de texto sin caja, que es lo que
   pedía Victor cuando dijo «unos textos sin cuadrados». Los separa el aire y
   una línea fina arriba, no un borde alrededor. */
.detalles {
  margin-top: clamp(32px, 5vw, 52px);
  display: grid; gap: 30px 40px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .detalles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .detalles { grid-template-columns: repeat(4, 1fr); gap: 34px; } }
.detalles > div { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.detalles b {
  display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.025em;
  color: #FFFFFF; margin-bottom: 8px;
}
.detalles p { font-size: .95rem; line-height: 1.55; color: #9DB0C8; }


/* ───────────────────────────────────── los enlaces del primer pantallazo
 *
 * Enlaces de texto, no pastillas: en el primer viewport manda el producto, y
 * dos botones de color se lo comen. La flecha avanza al pasar por encima, pero
 * el enlace se entiende sin ella: nada depende sólo de `hover`.
 */
.enlace {
  display: inline-flex; align-items: center; gap: 8px;
  /* 44 px de alto: es lo primero que se toca en toda la página. */
  min-height: 44px; padding: 0 6px;
  font-size: 1.06rem; font-weight: 500; letter-spacing: -0.015em;
  color: var(--brillo);
  transition: color .18s var(--curva);
}
.enlace--fuerte { color: #FFFFFF; }
.enlace:hover { color: #FFFFFF; }
.enlace__flecha { transition: transform .2s var(--curva); }
.enlace:hover .enlace__flecha { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .enlace, .enlace__flecha { transition: none; }
}
.heroe .acciones { gap: 26px; }
/* Las insignias de abajo, apagadas pero con contraste suficiente para leerse. */
.boton--espera { opacity: .72; cursor: default; }


/* ═════════════════════════ el escaparate en un teléfono: todo en una pantalla
 *
 * A 390 px quedaban 411 px de franja vacía entre el final del copy y el borde
 * del aparato: media pantalla de navy sin nada. Salía de reservar un viewport
 * completo para la caja pegajosa y colocar el teléfono al final de ella.
 *
 * Aquí el copy y el aparato comparten pantalla: el texto arriba con su tamaño
 * bajado, el teléfono justo debajo y recortado por el borde de abajo, que es lo
 * que empuja a seguir bajando.
 */


/* ═══════════════════════════════════ una banda, un momento de producto
 *
 * «Qué trae» era una rejilla de seis tarjetas: un panel de producto, no una
 * portada. Seis cajas con su rótulo, su titular y su párrafo obligan a leer
 * seis veces lo mismo antes de entender nada.
 *
 * Ahora es un titular, una idea y una captura. El color del fondo no cambia
 * (esa es la coherencia que se pidió); lo que cambia entre bandas es la escala
 * y el aire, que es lo que hace que una sección se sienta otra sin repintarla.
 */
.banda--producto { padding-block: clamp(96px, 15vh, 190px) 0; }
.banda--producto .envoltura { text-align: center; }
.banda--producto .entrada { margin-inline: auto; }
.banda__visual {
  margin: clamp(48px, 7vh, 96px) auto 0; width: min(340px, 62vw);
}
.banda__visual img {
  width: 100%; height: auto; display: block;
  border-radius: clamp(26px, 3vw, 38px);
  /* Recorte editorial: se hunde en el fondo por abajo en vez de acabar en un
     borde recto de catálogo. */
  mask-image: linear-gradient(180deg, #000 60%, transparent 99%);
}
@media (prefers-reduced-motion: reduce) { .banda__visual img { mask-image: none; } }


/* ════════════════════════ cinco cosas sueltas que se juntan en una
 *
 * El titular dice «cinco iconos, uno basta» y hasta ahora lo decía sin
 * enseñarlo. Aquí las cinco cosas que hoy tienes abiertas por separado salen
 * flotando, se juntan en el centro y salen convertidas en el icono de Maná.
 *
 * Todo se mueve con `transform` y `opacity`, que las compone la tarjeta
 * gráfica: nada de animar tamaños, que obliga a recalcular la maquetación en
 * cada fotograma.
 */
.fusion {
  position: relative; margin: clamp(56px, 9vh, 120px) auto 0;
  width: min(680px, 92vw); height: min(400px, 78vw);
  display: grid; place-items: center;
  /* **La escena recorta lo que sale.** Las piezas nacen a ±196 px del centro:
     en una pantalla de 390 eso son 40 px fuera por cada lado, y la página se
     puede arrastrar en horizontal. Recortando aquí desaparece el desborde y de
     paso las piezas entran desde fuera de cuadro, que se lee mejor. */
  overflow: hidden;
}
.fusion__sueltas { position: absolute; inset: 0; display: grid; place-items: center; }
.fusion__pieza {
  position: absolute;
  display: grid; place-items: center;
  background: var(--alza2);
  will-change: transform, opacity;
}
.fusion__pieza--icono { width: 72px; height: 72px; border-radius: 22px; }
/* Las de texto son lo que hoy tienes abierto y no es una app: un PDF, un grupo,
   unas notas sueltas. Se leen, no se descifran. */
.fusion__pieza--texto {
  padding: 12px 18px; border-radius: 999px; white-space: nowrap;
  font-size: .92rem; font-weight: 500; letter-spacing: -0.01em; color: #C6D5E8;
}
.fusion__pieza svg {
  width: 30px; height: 30px; stroke: var(--claro); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* El final: el icono y el nombre, que es en lo que se convierte todo. */
.fusion__final {
  position: relative; display: grid; justify-items: center; gap: 14px;
  will-change: transform, opacity;
}
.fusion__icono { width: 168px; height: 168px; border-radius: 30%; }
.fusion__final b {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; color: #FFFFFF;
}
/* Sin movimiento se enseña el final: las piezas fundidas y el icono entero. */
.fusion[data-hecho="si"] .fusion__pieza { opacity: 0; }
.fusion[data-hecho="si"] .fusion__final { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .fusion__pieza--icono { width: 56px; height: 56px; border-radius: 17px; }
  .fusion__pieza svg { width: 23px; height: 23px; }
  .fusion__pieza--texto { padding: 9px 13px; font-size: .78rem; }
  .fusion__icono { width: 128px; height: 128px; }
  .fusion__final b { font-size: 1.25rem; }
}


/* ═══════════════════════ el escaparate, una sola disposición coherente
 *
 * Esto acabó siendo cuatro parches que se contradecían: la rejilla se había
 * quedado en una columna, el teléfono sin regla propia, y entre 781 y 1119 px
 * no aplicaba ninguna de las dos disposiciones. Resultado medido: de 900 px en
 * adelante el texto caía 630 px POR DEBAJO del teléfono. Victor: «cómo
 * funciona, no entiendo, no sirve el texto».
 *
 * Ahora hay dos y sólo dos:
 *  - Hasta 1119 px: el texto arriba y el aparato debajo, recortado por el borde.
 *  - De 1120 en adelante: el texto a la izquierda y el aparato a la derecha,
 *    los dos a media altura.
 */
.escaparate__fila {
  /* **Tope por ancho también, no sólo por alto.** El ancho salía de `46svh`, y
     en un teléfono alto y estrecho eso son 380 px dentro de 350 disponibles: el
     aparato se salía de su caja por 30 px. Victor: «en cel el mockup se sale
     del cuadrado». */
  --tel: min(46svh, 380px, 74vw);
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr;
  align-items: start; justify-items: center;
  width: 100%; max-width: 1180px; height: 100%; position: relative;
}
.escaparate__dicho-caja {
  grid-row: 1; width: 100%; max-width: 34ch; justify-self: start; text-align: left;
}
.escaparate__dicho, .escaparate__dicho > div { max-width: 100%; }
.escaparate .telefono {
  grid-row: 2; align-self: start; justify-self: center;
  position: relative; left: auto; right: auto; bottom: auto;
  width: var(--tel); height: auto; aspect-ratio: 9 / 19.5;
  /* Recortado por abajo: hay más aparato del que cabe, y eso empuja a bajar. */
  margin: clamp(16px, 2.4vh, 30px) auto calc(var(--tel) * -0.55);
}
@media (min-width: 1120px) {
  .escaparate__fila {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr;
    align-items: center;
  }
  .escaparate__dicho-caja { grid-row: 1; grid-column: 1; align-self: center; max-width: 26ch; }
  .escaparate .telefono { grid-row: 1; grid-column: 2; align-self: center; margin: 0; }
}
@media (max-width: 620px) {
  .escaparate__dicho h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .escaparate__dicho p { font-size: .98rem; margin-top: 14px; }
}


/* Entrar al panel: va en la barra pero apagado. Quien llega a esta página
   viene a bajarse la app; el panel es para los cuatro que administran. */
.barra__entrar { color: var(--humo2); }
.barra__entrar:hover { color: var(--blanco); background: rgba(255,255,255,.07); }