/* ============================================================
   Efectos de las PÁGINAS DE CONTENIDO (v2 — más potentes).
   NO se carga en index.html ni en precios.html: solo lo enlaza el molde de
   páginas (paginas_producto.py). La portada queda intacta.

   Reglas de oro: sin JS se ve TODO (nada oculto); si el sistema pide menos
   movimiento, no se anima nada.
   ============================================================ */

/* Relevamos la aparición por-sección de CSS (solo Chrome/Edge) por la de JS
   (todos los navegadores y más rica). En index —que no carga esto— sigue igual. */
@supports (animation-timeline: view()) {
  .efx main > section { animation-name: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ── Aparición al scroll: fuerte, con desenfoque→nítido y un pequeño rebote.
       Oculto SOLO con JS (.efx); sin JS todo se ve. ── */
  .efx [data-ap] { opacity: 0; will-change: opacity, transform, filter; }
  .efx [data-ap="subir"] { transform: translateY(42px); filter: blur(7px); }
  .efx [data-ap="zoom"]  { transform: scale(.9);        filter: blur(7px); }
  .efx [data-ap="izq"]   { transform: translateX(-46px); filter: blur(6px); }
  .efx [data-ap="der"]   { transform: translateX(46px);  filter: blur(6px); }
  /* En el móvil (una sola columna) entrar de lado sacaba el bloque 46 px
     fuera de la pantalla y la página se podía arrastrar hacia los lados
     hasta verlo (27/09/2026). Ahí entran subiendo, como los demás. */
  @media (max-width: 879px) {
    .efx [data-ap="izq"], .efx [data-ap="der"] { transform: translateY(42px); }
  }
  .efx [data-ap="fade"]  { transform: none; }

  .efx [data-ap].vista {
    opacity: 1;
    transition: opacity .55s ease, filter .6s ease,
                transform .85s cubic-bezier(.22, 1.16, .36, 1);
    transition-delay: var(--ap-d, 0ms);
  }
  .efx [data-ap="subir"].vista, .efx [data-ap="zoom"].vista,
  .efx [data-ap="izq"].vista,   .efx [data-ap="der"].vista {
    transform: none; filter: none;
  }
  .efx [data-ap="fade"].vista { opacity: .95; }

  /* Los garabatos se DIBUJAN solos al aparecer (el JS mide cada trazo). */
  .efx .garabato [data-traza] {
    stroke-dashoffset: var(--traza);
    stroke-dasharray: var(--traza);
  }
  .efx .garabato.dibuja [data-traza] {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) var(--ap-d, 0ms);
  }
}

/* ── Brillo que barre los botones al pasar el ratón ── */
.efx .boton, .efx a.cta, .efx .mini-cta a { position: relative; overflow: hidden; }
.efx .boton::after, .efx a.cta::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .efx .boton:hover::after, .efx a.cta:hover::after { animation: efx-brillo .85s ease; }
}
@keyframes efx-brillo { to { left: 135%; } }

/* ── Elevación con realce en tarjetas y botones ── */
.efx .boton, .efx a.cta, .efx .mini-cta a {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
@media (hover: hover) {
  .efx .boton:hover, .efx a.cta:hover, .efx .mini-cta a:hover {
    transform: translateY(-3px); filter: brightness(1.05);
  }
  .efx .rejilla > *, .efx .galeria > *, .efx .grupo > *, .efx .distintivos > * {
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease;
  }
  .efx .rejilla > *:hover, .efx .galeria > *:hover,
  .efx .grupo > *:hover, .efx .distintivos > *:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 26px 52px -26px rgba(60, 30, 120, .42);
  }
}

/* ── Escena del héroe: el mockup grande y animado (solo en páginas que lo
   traen; la portada del sitio no carga este archivo) ── */
.portada-escena {
  margin: clamp(1.6rem, 4vw, 2.8rem) auto 0;
  max-width: 720px; padding: clamp(1rem, 3vw, 2rem);
  border-radius: 28px;
  background:
    radial-gradient(60% 70% at 20% 20%, rgba(124, 77, 255, .5), transparent 70%),
    radial-gradient(60% 70% at 85% 25%, rgba(255, 176, 130, .45), transparent 70%),
    radial-gradient(70% 80% at 60% 100%, rgba(139, 110, 240, .4), transparent 70%),
    #F4F2FF;
}
.portada-escena .esc-svg { display: block; }

/* ── La escena de apertura, EN EL MÓVIL (17/09/2026) ───────────────
   El dibujo mide 680 de ancho y en un móvil se encoge a 340: la letra se
   queda en la mitad y no hay quien la lea. Así que en pantallas estrechas
   se deja a un tamaño legible y se puede ARRASTRAR de lado con el dedo,
   con un degradado en el borde derecho que avisa de que hay más. En
   ordenador no cambia nada. */
@media (max-width: 720px) {
  .portada-escena {
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, .35));
            mask-image: linear-gradient(90deg, #000 88%, rgba(0, 0, 0, .35));
  }
  .portada-escena::-webkit-scrollbar { display: none; }
  .portada-escena .esc-svg { min-width: 560px; }
  /* Cuando ya se ha llegado al final, el degradado sobra (lo quita el JS). */
  .portada-escena.escena-final { -webkit-mask-image: none; mask-image: none; }
  /* La flecha que dice «esto sigue». La crea el JS; sin JS no hay flecha pero
     el dibujo se arrastra igual. */
  .esc-caja .esc-mas {
    /* Abajo a la derecha: en medio tapaba el centro del dibujo. */
    position: absolute; right: 12px; bottom: 14px;
    z-index: 4; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: #fff; color: #5B2FD6; border: 1px solid #E7E7F0;
    box-shadow: 0 8px 20px -8px rgba(50, 25, 110, .55);
  }
  .esc-caja .esc-mas:focus-visible { outline: 3px solid #5B2FD6; outline-offset: 2px; }

}

@media (prefers-reduced-motion: no-preference) {
  .portada-escena { animation: efx-escena-in .9s cubic-bezier(.22, 1.16, .36, 1) both; }
  .esc-svg .imp-tile { animation: imp-bob 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .esc-svg .imp-flujo { animation: imp-fluir 1.1s linear infinite; }
  .esc-svg .imp-card { animation: imp-entra 1s cubic-bezier(.22, 1.16, .36, 1) both; transform-box: fill-box; }
}
@keyframes efx-escena-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes imp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes imp-fluir { to { stroke-dashoffset: -16; } }
@keyframes imp-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════════════════
   RED DE SEGURIDAD: NINGÚN TEXTO DE UN DIBUJO SE QUEDA SIN COLOR

   Los dibujos cuelgan de un <svg fill="none">, así que un <text> que no
   diga de qué color es… no se pinta. Con las letras se ve enseguida, pero
   con los EMOJI no: en los ordenadores que los pintan en color no pasa
   nada, y en los que caen al dibujo de una sola tinta el emoji desaparece
   sin más. Pasaba en 35 sitios. (17/09/2026)

   Esta regla solo alcanza a los que NO dicen su color: los que lo dicen
   mandan ellos. ══════════════════════════════════════════════════════ */
.esc-svg text:not([fill]), .maqf-svg text:not([fill]),
.galeria svg text:not([fill]), .mq-pieza svg text:not([fill]) { fill: #141A26; }
/* Y si el emoji está encima de una pieza oscura, blanco. */
.esc-svg .sobre-oscuro text:not([fill]), .maqf-svg .sobre-oscuro text:not([fill]) { fill: #fff; }

/* ── Bloques de función en DOS COLUMNAS (texto + mockup), estilo moderno.
   Solo afecta a las secciones que traen mockup; las demás siguen centradas. ── */
.func-grid { display: grid; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
@media (min-width: 880px) {
  .func-grid { grid-template-columns: 1.05fr 1fr; }
  .func-grid.func-rev .func-texto { order: 2; }
}
.func-grid .func-texto .epigrafe,
.func-grid .func-texto h2,
.func-grid .func-texto .bajada { text-align: left; margin-left: 0; margin-right: 0; }
.func-grid .func-texto .lista2, .func-grid .func-texto .viñetas {
  margin-left: 0; margin-right: 0; width: auto; max-width: none; grid-template-columns: 1fr;
}
.func-visual .maqf-svg {
  display: block; width: 100%; max-width: 430px; margin-inline: auto;
  filter: drop-shadow(0 24px 46px rgba(50, 25, 110, .16));
}

@media (prefers-reduced-motion: no-preference) {
  .maqf-svg .maqf-scan { animation: maqf-escanea 2.8s ease-in-out infinite; }
  .maqf-svg .imp-flujo { animation: imp-fluir 1.1s linear infinite; }
}
@keyframes maqf-escanea {
  0% { transform: translateY(0); opacity: .85; }
  50% { transform: translateY(150px); opacity: .45; }
  100% { transform: translateY(0); opacity: .85; }
}

/* ══════════════════════════════════════════════════════════════════
   LA RULETA DE PREMIOS, GIRANDO

   Una ruleta dibujada y quieta no se entiende: parece una tarta. Girando
   y parándose sobre un premio se entiende sola, sin leer nada.

   El plato da CUATRO VUELTAS ENTERAS, ni una más: así acaba exactamente
   donde empezó y el bucle no da ningún tirón. Y como los sectores están
   dibujados medio sector girados, quieta ya está señalando un premio.

   El ciclo, de ocho segundos: un segundo parada · un segundo cogiendo
   carrerilla · tres segundos y medio frenando · y casi tres parada
   enseñando lo que ha tocado. Lo bastante lento para que se lea.

   Quien tenga el sistema puesto en «menos animaciones» ve la ruleta
   parada sobre el premio, con su reborde dorado: se entiende igual.
   ══════════════════════════════════════════════════════════════════ */
.rul-gira, .rul-punta { transform-box: view-box; }

@media (prefers-reduced-motion: no-preference) {
  .esc-svg .rul-gira, .maqf-svg .rul-gira { animation: rul-girar 8s linear infinite; }
  .esc-svg .rul-gana, .maqf-svg .rul-gana { animation: rul-premio 8s linear infinite; }
  .esc-svg .rul-punta, .maqf-svg .rul-punta { animation: rul-punta 8s linear infinite; }
}

@keyframes rul-girar {
  /* La curva declarada en cada fotograma manda en el tramo que empieza ahí:
     primero acelerando, después una frenada larga. */
  0%, 12% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.42, 0, .78, .5); }
  24% { transform: rotate(320deg); animation-timing-function: cubic-bezier(.08, .62, .18, 1); }
  66%, 100% { transform: rotate(1440deg); }
}

/* El premio que ha tocado: dos parpadeos y se queda encendido hasta que
   vuelve a girar. */
@keyframes rul-premio {
  0%, 64% { opacity: 0; }
  67% { opacity: 1; }
  71% { opacity: .25; }
  75%, 93% { opacity: 1; }
  100% { opacity: 0; }
}

/* El puntero pega un saltito en el momento exacto en que para. No hace
   tic-tac con cada sector a propósito: a esa velocidad se desacompasa y
   se nota más el fallo que el efecto. */
@keyframes rul-punta {
  0%, 64% { transform: none; }
  68% { transform: translateY(3px) scale(1.14); }
  76%, 100% { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   EL DIBUJO DE CADA FUNCIÓN, SOBRE SU BALDOSA DE COLOR  (17/09/2026)

   Un dibujo blanco flotando sobre una página blanca se pierde. Encima de
   una baldosa redondeada con un degradado suave, las tarjetas blancas
   saltan a la vista. Cada sección alterna el tono para que al bajar no
   parezca siempre la misma.
   ══════════════════════════════════════════════════════════════════ */
.func-visual {
  position: relative; border-radius: 30px;
  padding: clamp(1rem, 3vw, 2.2rem);
  background:
    radial-gradient(70% 80% at 12% 10%, rgba(124, 77, 255, .30), transparent 70%),
    radial-gradient(60% 70% at 92% 96%, rgba(255, 176, 130, .34), transparent 70%),
    #F3F0FF;
  isolation: isolate;
}
section.gris .func-visual {
  background:
    radial-gradient(70% 80% at 90% 8%, rgba(255, 196, 120, .36), transparent 70%),
    radial-gradient(65% 75% at 8% 96%, rgba(124, 77, 255, .28), transparent 70%),
    #FFFFFF;
}
/* Un reflejo que cruza la baldosa muy de vez en cuando: da vida sin distraer. */
.func-visual::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; pointer-events: none;
}
.func-visual .maqf-svg { filter: drop-shadow(0 18px 34px rgba(50, 25, 110, .18)); }

@media (prefers-reduced-motion: no-preference) {
  .func-visual::before { animation: fv-reflejo 9s ease-in-out infinite; }
  /* El dibujo se MONTA pieza a pieza cuando llegas a él: cada tarjeta entra
     un instante después de la anterior (el JS les pone el turno en --i). */
  .efx .func-visual[data-ap] .imp-card { opacity: 0; }
  .efx .func-visual[data-ap].vista .imp-card {
    animation: fv-monta .8s cubic-bezier(.22, 1.16, .36, 1) both;
    animation-delay: calc(260ms + var(--i, 0) * 130ms);
    transform-box: fill-box; transform-origin: center;
  }
  .maqf-svg .imp-tile { animation: imp-bob 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .maqf-svg .imp-late { animation: imp-late 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .esc-svg .imp-late { animation: imp-late 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes fv-reflejo { 0%, 70% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
@keyframes fv-monta { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes imp-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* La escena del héroe se ladea un pelo siguiendo al ratón (lo mueve el JS). */
.portada-escena { transform-style: preserve-3d; }
.efx .portada-escena.efx-ladea { transition: transform .18s ease-out; }

/* ══════════════════════════════════════════════════════════════════
   LA BANDA DE FORMATOS, PASANDO  (17/09/2026)

   Dos filas con los seis formatos de widget, cada una hacia un lado. Cada
   fila lleva las piezas repetidas dos veces y se desplaza justo la mitad
   de su ancho: al acabar está exactamente donde empezó y el bucle no da
   tirón. Se para al poner el ratón encima. Con «menos animaciones» queda
   quieta y se puede arrastrar con el dedo.
   ══════════════════════════════════════════════════════════════════ */
main > section.sec-marquesina { overflow: hidden; padding-bottom: 72px; }
.sec-marquesina .caja { text-align: center; }
.mq {
  margin-top: 40px; display: grid; gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  overflow-x: auto; scrollbar-width: none;
}
.mq::-webkit-scrollbar { display: none; }
.mq-fila { display: flex; gap: 18px; width: max-content; padding: 6px 0 14px; }
.mq-pieza {
  margin: 0; flex: 0 0 auto; width: 288px;
  background: #fff; border: 1px solid var(--linea, #E7E7F0); border-radius: 20px;
  padding: 12px 12px 10px;
  box-shadow: 0 14px 30px -20px rgba(50, 25, 110, .35);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.mq-pieza svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.mq-pieza figcaption {
  margin-top: 9px; font-family: var(--display, inherit); font-weight: 800; font-size: 14px;
  color: var(--tinta, #141A26); text-align: left; padding-left: 4px;
}
@media (hover: hover) {
  .mq-pieza:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 24px 44px -22px rgba(60, 30, 120, .5); }
}
/* Con el teclado o el dedo se puede arrastrar la banda: entonces se para sola,
   que si no se pelean el arrastre y el movimiento. */
.mq:focus-within .mq-fila, .mq:active .mq-fila { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .mq { overflow: hidden; }
  .mq-a { animation: mq-pasa 46s linear infinite; }
  .mq-b { animation: mq-pasa 54s linear infinite reverse; }
  .mq:hover .mq-fila { animation-play-state: paused; }
}
/* El hueco entre piezas (18px) también cuenta: media fila son 6 piezas y 6 huecos. */
@keyframes mq-pasa { to { transform: translateX(calc(-50% - 9px)); } }

/* ══════════════════════════════════════════════════════════════════
   EL CIERRE, CON RESEÑAS FLOTANDO  (17/09/2026)

   La banda morada del final era un texto centrado y un botón. Ahora el
   texto se va a la izquierda y a la derecha flotan tres reseñas de muestra
   ladeadas, que se mecen despacio, cada una a su ritmo. En el móvil se
   apilan en abanico debajo del botón.
   ══════════════════════════════════════════════════════════════════ */
main > section.cierre-flotante { position: relative; }
@media (min-width: 880px) { main > section.cierre-flotante { text-align: left; } }
.cierre-flotante::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at 86% 30%, rgba(255, 255, 255, .16), transparent 70%),
    radial-gradient(36% 50% at 8% 100%, rgba(255, 176, 130, .22), transparent 70%);
}
.cf-rejilla { position: relative; display: grid; gap: 40px; align-items: center; }
.cf-texto h2 { text-wrap: balance; }
.cf-escena { position: relative; height: 340px; max-width: 420px; width: 100%; margin-inline: auto; }
/* Un aro finísimo detrás de las tarjetas: las agrupa y da profundidad sin
   meter ruido (es la idea que usan ellos en su banda final). */
.cf-escena::before {
  content: ""; position: absolute; inset: 6% -6%;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  pointer-events: none;
}
.cf-tarjeta {
  position: absolute; width: min(260px, 68%); text-align: left;
  background: #fff; color: #141A26; border-radius: 18px; padding: 16px 18px 14px;
  box-shadow: 0 30px 60px -24px rgba(10, 0, 50, .6);
  font-size: 14.5px; line-height: 1.45;
}
.cf-tarjeta p { margin: 6px 0 12px; font-weight: 600; }
.cf-estrellas { color: #FFA41C; letter-spacing: 2px; font-size: 15px; }
.cf-quien { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #5A6072; font-weight: 600; }
.cf-quien span {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #7C4DFF, #FF8A65);
}
.cf-1 { top: 0; left: 0; transform: rotate(-6deg); z-index: 2; }
.cf-2 { top: 112px; right: 0; transform: rotate(5deg); z-index: 3; }
.cf-3 { bottom: 0; left: 9%; transform: rotate(-2.5deg); z-index: 1; }
@media (min-width: 880px) {
  .cf-texto .epigrafe, .cf-texto h2, .cf-texto .bajada { text-align: left; margin-left: 0; margin-right: 0; }
  .cf-rejilla { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .cf-escena { height: 380px; max-width: 520px; }
  .cf-tarjeta { width: 290px; font-size: 15.5px; }
  .cf-2 { top: 112px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cf-1 { animation: cf-mece-a 7s ease-in-out infinite; }
  .cf-2 { animation: cf-mece-b 8.5s ease-in-out infinite; }
  .cf-3 { animation: cf-mece-c 6.2s ease-in-out infinite; }
}
@keyframes cf-mece-a { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-12px); } }
@keyframes cf-mece-b { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(3.2deg) translateY(10px); } }
@keyframes cf-mece-c { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }

/* ══════════════════════════════════════════════════════════════════
   DOS AYUDAS PARA NO PERDERSE  (17/09/2026)
   · una raya fina arriba que se llena según bajas;
   · en el móvil, el botón de la página siempre a mano, pegado abajo.
   Las dos las crea el JS: sin JS no existen y no estorban.
   ══════════════════════════════════════════════════════════════════ */
.efx-progreso {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 400;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, #7C4DFF, #FF8A65);
}
/* Con «menos animaciones» el botón sale y se quita sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .efx-cta-fija { transition: none !important; }
}
.esc-caja { position: relative; }
.esc-mas { display: none; }
.efx-cta-fija { display: none; }
@media (max-width: 760px) {
  .efx-cta-fija {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .92); border-top: 1px solid #E7E7F0;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(110%); visibility: hidden;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s;
  }
  .efx-cta-fija.sale { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
  .efx-cta-fija a:focus-visible { outline: 3px solid #141A26; outline-offset: 2px; }
  .efx-cta-fija a {
    display: block; text-align: center; padding: 13px 16px; border-radius: 14px;
    background: #5B2FD6; color: #fff; text-decoration: none;
    font-family: var(--display, inherit); font-weight: 800; font-size: 16px;
    box-shadow: 0 10px 24px -12px rgba(91, 47, 214, .8);
  }
}

/* ══════════════════════════════════════════════════════════════════
   ESCALA PARA PANTALLAS GRANDES (≥1280 px). Medido contra la referencia a
   1920 px: allí el contenedor es de 1280 px, el mockup del héroe ocupa 1280 px
   y el texto corrido es de 24 px; aquí eran 896–1024 / 698 / 16 px, y la web
   se veía "pequeña y lejos". Solo aplica a las páginas de contenido (esta hoja
   no la carga la portada) y solo a partir de 1280 px: móvil y tablet igual.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .caja { max-width: 1280px; padding-inline: 32px; }
  .caja-estrecha { max-width: 1120px; }
  .ancha { max-width: 1400px; }
  main > section { padding: 104px 0; }

  /* Héroe: cita y mockup a lo grande */
  .cita { font-size: 58px; }
  main h1 { font-size: 21px; max-width: 48rem; }
  .ventajas li, .lista2 li { font-size: 18.5px; }
  .portada-escena { max-width: 1180px; padding: clamp(1.4rem, 2.5vw, 2.4rem); }

  /* Secciones: texto más legible y mockups mayores */
  .epigrafe { font-size: 27px; }
  main h2 { font-size: 44px; line-height: 1.12; }
  .bajada { font-size: 19.5px; max-width: 46rem; }
  .problema li, .cita-cliente { font-size: 18px; }
  /* La frase que remata va aparte: es la que tiene que quedarse, y con 18px
     se perdia entre las tarjetas de arriba y la cita de abajo. (16/09/2026) */
  .duele { font-size: 26px; }
  .func-grid { gap: clamp(3rem, 6vw, 6rem); }
  .func-visual .maqf-svg { max-width: 640px; }
  .mq-pieza { width: 340px; }
  .mq-pieza figcaption { font-size: 15.5px; }
  .cf-escena { height: 420px; max-width: 580px; }
  .cf-tarjeta { width: 320px; font-size: 16.5px; padding: 20px 22px 18px; }
  .cf-2 { top: 128px; }
  .rejilla li h3, .galeria li h3 { font-size: 21px; }
  .rejilla li p, .galeria li p, .faq p, .faq summary { font-size: 17px; }
}
@media (min-width: 1700px) {
  .caja { max-width: 1360px; }
  .portada-escena { max-width: 1260px; }
  .func-visual .maqf-svg { max-width: 700px; }
}