/* ══════════════════════════════════════════════════════════════════
   Página de producto — misma escuela que las webs de producto que
   funcionan: animaciones CSS atadas al scroll, un rotulador que se
   pinta solo en la cita, el botón (aro y degradado, como el de senja.io), y
   garabatos dibujados a mano. CERO librerías de animación.
   Todo se apaga si el visitante pide menos movimiento.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --loalia: #5B2FD6;
  --loalia-claro: #7B2FF7;
  --loalia-oscuro: #4A22B8;
  --magenta: #F0479C;
  --tinta: #141A26;
  --gris: #5C6379;
  --gris-suave: #F6F7FB;
  --linea: #E7E7F0;
  --verde: #059669;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --cuerpo: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mano: "Caveat", cursive;
}

* { box-sizing: border-box; margin: 0; }
body { font-family: var(--cuerpo); color: var(--tinta); background: #fff;
       line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── EFECTO 1 · cada sección entra al aparecer ─────────────────────
   Atada al scroll con view(): no es un temporizador, es la posición
   real de la sección respecto a la ventana.
   ⚠️ Dos trampas juntas, y hay que esquivar las dos:
     · el atajo `animation` NO admite view() (se descarta la regla), y
       además REINICIA animation-timeline — por eso todo va en
       propiedades separadas;
     · con una línea de tiempo de scroll la duración tiene que ser
       `auto`; si queda en 0 s la sección se queda invisible.        */
@keyframes subir { 0% { opacity: 0; transform: translateY(1.25rem); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main > section {
      animation-name: subir;
      animation-fill-mode: both;
      animation-duration: auto;
      animation-timing-function: ease-out;
      animation-timeline: view();
      animation-range: entry 0% entry 36%;
    }
  }
}

/* ── EFECTO 2 · el rotulador de la cita ────────────────────────── */
mark.rotulador {
  color: inherit;
  background: linear-gradient(rgba(91,47,214,.2), rgba(91,47,214,.2)) 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: .25rem; padding: 0 .125em;
}
@keyframes pintar { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: no-preference) {
  mark.rotulador { background-size: 0% 100%; animation: 1.1s ease-out .6s forwards pintar; }
}

/* ── El botón: el de senja.io ───────────────────────────────────── */
/* Un aro translúcido con sombra suave y, dentro, el botón con degradado
   morado y un filo blanco fino. Sin halo ni destellos (04/09/2026). */
.cta { display: inline-block; position: relative; }
.aro {
  display: inline-flex; position: relative; padding: 4px; border-radius: 19px;
  background: rgba(255,255,255,.10); border: .5px solid rgba(255,255,255,.2);
  box-shadow: 0 .6px 1.08px -.83px rgba(0,0,0,.05),
              0 2.29px 4.12px -1.67px rgba(0,0,0,.05),
              0 10px 18px -2.5px rgba(0,0,0,.05);
}
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 66px; padding: 0 28px; border-radius: 16px;
  font-family: var(--display); font-size: 24px; font-weight: 700;
  white-space: nowrap; text-decoration: none; user-select: none;
  border: 1px solid rgba(255,255,255,.5); position: relative;
  transition: transform .15s;
  color: #fff; background: linear-gradient(#7B2FF7, #5B2FD6);
}
.boton:hover { transform: scale(1.02); }
.boton:active { transform: scale(.98); }
.cta.claro .boton { color: #140F26; background: linear-gradient(#fff, rgba(255,255,255,.8)); border-color: rgba(255,255,255,.8); }

/* ── El punto que recorre el borde ──────────────────────────────── */
/* Una chispa que da vueltas al filo del botón, como en senja.io. Llama
   la atención sin moverlo de sitio ni tapar el texto.

   Va por «offset-path: border-box», que es como se le dice al navegador
   «recorre el contorno de tu caja»: así sigue solo las esquinas
   redondeadas, sin dibujar ninguna forma a mano, y se adapta si el botón
   cambia de tamaño o de texto. Solo se enciende donde el navegador lo
   entiende y solo si el visitante no ha pedido menos movimiento: en
   cualquier otro caso el botón se queda como estaba, sin punto y sin
   hueco raro. */
@keyframes cta-punto { to { offset-distance: 100%; } }

@supports (offset-path: border-box) {
  @media (prefers-reduced-motion: no-preference) {
    /* Van en el ARO, no en el botón: el botón ya usa su ::after para el
       brillo que lo barre al pasar el ratón en las páginas de contenido, y
       allí además se recorta por dentro, con lo que la bolita se partiría
       por la mitad. El aro está libre y no recorta nada.

       Son dos piezas: el rastro (::before) y la bolita (::after). Las dos
       recorren el mismo contorno a la vez. */

    /* El rastro: una rayita que se va apagando hacia atrás. «offset-rotate:
       auto» la va girando para que siempre apunte en la dirección de la
       marcha, y «offset-anchor: 100% 50%» clava su punta delantera en el
       recorrido, así que la cola queda por detrás de la bolita. */
    .aro::before {
      content: "";
      position: absolute;
      width: 24px; height: 4px; border-radius: 2px;
      background: linear-gradient(90deg,
                  rgba(182,59,219,0) 0%,
                  rgba(182,59,219,.28) 55%,
                  rgba(182,59,219,.8) 100%);
      filter: blur(1.2px);
      offset-path: border-box;
      offset-rotate: auto;
      offset-anchor: 100% 50%;
      offset-distance: 0%;
      animation: cta-punto 4.5s linear infinite;
      pointer-events: none;
      z-index: 1;
    }

    /* La bolita, del morado del logo. */
    .aro::after {
      content: "";
      position: absolute;
      width: 5px; height: 5px; border-radius: 50%;
      background: #B63BDB;
      box-shadow: 0 0 5px 1.5px rgba(182,59,219,.9),
                  0 0 13px 5px rgba(182,59,219,.45);
      offset-path: border-box;
      offset-anchor: 50% 50%;
      offset-distance: 0%;
      animation: cta-punto 4.5s linear infinite;
      pointer-events: none;
      z-index: 2;
    }
  }
}
/* Un botón con el texto largo se salía de la pantalla en el móvil: «Montar mi
   muro de testimonios» sobresalía 66 px a 390 px de ancho, y arrastraba con él
   a toda la sección. Ahora, cuando no cabe de una línea, PARTE EN DOS y se
   queda dentro. En pantallas normales no cambia nada: los que caben de una
   línea siguen igual. (17/09/2026) */
.cta, .aro { max-width: 100%; }
@media (max-width: 760px) {
  /* Ojo: el alto y el hueco laterales son los mismos de siempre, así que un
     botón que cabía de una línea queda EXACTAMENTE igual que antes (esto lo
     usa también la portada, que no se toca). Solo cambia el que no cabía:
     ese ahora ocupa dos líneas en vez de salirse. */
  .boton {
    white-space: normal; text-align: center; line-height: 1.18;
    height: auto; min-height: 66px; padding: 10px 28px;
  }
}
@media (max-width: 340px) {
  .boton { font-size: 20px; min-height: 58px; padding: 10px 20px; }
}


/* ── Garabatos dibujados a mano ─────────────────────────────────── */
.garabato { position: absolute; color: var(--loalia); display: none; }
@media (min-width: 1280px) { .garabato { display: block; } }

/* ── Piezas de la página ────────────────────────────────────────── */
.caja { width: 100%; max-width: 1024px; margin-inline: auto; padding-inline: 24px; }
.caja-estrecha { max-width: 896px; }

header.barra { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85);
               backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--linea); }
.barra .caja { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }
.barra img { height: 30px; }
.menu { display: none; gap: 24px; font-size: 14.5px; font-weight: 500; color: var(--gris); }
.menu a { text-decoration: none; }
.menu a:hover { color: var(--tinta); }
@media (min-width: 860px) { .menu { display: flex; } }
.mini-cta { background: var(--loalia); color: #fff; text-decoration: none; font-weight: 600;
            font-size: 14.5px; padding: 10px 20px; border-radius: 999px; }

main > section { padding: 80px 0; position: relative; }
main > section.gris { background: var(--gris-suave); }
main > section.morado { background: var(--loalia); color: #fff; overflow: hidden; text-align: center; }

/* Portada */
.portada { text-align: center; padding: 48px 0 64px; }
.cita { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: 1;
        font-size: clamp(34px, 5.6vw, 48px); }
.quien { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.quien .redonda { width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
                  background: linear-gradient(135deg, var(--loalia-claro), var(--magenta));
                  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; }
.quien .txt { text-align: left; }
.quien .txt strong { font-weight: 500; display: block; }
.quien .txt span { font-size: 14px; color: #6B7280; }
h1 { max-width: 42rem; margin: 32px auto 0; font-size: 18px; font-weight: 400; color: var(--gris); line-height: 1.6; }
.ventajas { list-style: none; padding: 0; margin: 20px auto 0; display: inline-flex;
            flex-direction: column; gap: 6px; text-align: left; font-size: 15.5px; }
.ventajas li { display: flex; align-items: flex-start; gap: 8px; }
.ventajas .ok { color: var(--verde); font-weight: 700; }

/* Secciones de característica */
.epigrafe { text-align: center; font-family: var(--mano); font-size: 24px; color: rgba(91,47,214,.6); }
h2 { margin-top: 8px; text-align: center; font-family: var(--display); font-weight: 800;
     font-size: clamp(28px, 3.6vw, 36px); letter-spacing: -.02em; line-height: 1.1; }
.bajada { max-width: 42rem; margin: 16px auto 0; text-align: center; color: var(--gris); }
.lista2 { list-style: none; padding: 0; margin: 24px auto 0; width: fit-content; max-width: 48rem;
          display: grid; grid-template-columns: 1fr; gap: 8px 40px; text-align: left; }
@media (min-width: 640px) { .lista2 { grid-template-columns: 1fr 1fr; } }
.lista2 li { display: flex; align-items: flex-start; gap: 8px; font-size: 15.5px; }
.lista2 .ok { color: var(--verde); font-weight: 700; margin-top: 1px; }

/* ── EFECTO 6 · la tira de reseñas que desfila sola ────────────────
   Los bordes no se cortan: se difuminan con una máscara, igual que
   ellos. Al pasar el ratón por encima, la tira se para para poder
   leer con calma.                                                   */
.difuminado {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tira { display: flex; gap: 16px; width: max-content; }
@keyframes desfilar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .tira { animation: 52s linear infinite desfilar; }
  .difuminado:hover .tira { animation-play-state: paused; }
}
.resena { width: 300px; flex: 0 0 300px; background: #fff; border: 1px solid var(--linea);
          border-radius: 16px; padding: 20px;
          box-shadow: 0 1px 2px rgba(20,26,38,.04), 0 10px 24px -14px rgba(20,26,38,.2); }
.resena .estrellas { color: #FFA41C; font-size: 13px; letter-spacing: 1px; }
.resena p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: #2A3142; }
.resena .firma { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.resena .ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
               font-size: 13px; font-weight: 700; color: #fff;
               background: linear-gradient(135deg, var(--loalia-claro), var(--magenta)); }
.resena .firma b { font-size: 13.5px; font-weight: 600; display: block; }
.resena .firma span { font-size: 12px; color: #7A8194; }

/* ── Sin Loalia / con Loalia: dos tarjetas enfrentadas ──────────── */
.enfrentadas { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .enfrentadas { grid-template-columns: 1fr 1fr; } }
.tarjeton { border-radius: 24px; border: 1px solid var(--linea); background: var(--gris-suave); padding: 32px; }
.tarjeton.bueno { border-color: rgba(91,47,214,.3); background: rgba(91,47,214,.05); }
.tarjeton > svg { display: block; margin: 0 auto; width: 100%; max-width: 20rem; height: auto; border-radius: 12px; }
.tarjeton h3 { margin-top: 24px; text-align: center; font-family: var(--display); font-size: 20px; font-weight: 800; }
.tarjeton ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.tarjeton li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.tarjeton .no { color: #E11D48; font-weight: 700; margin-top: 1px; }
.tarjeton .si { color: var(--verde); font-weight: 700; margin-top: 1px; }

/* Cierre morado */
.morado h2 { color: #fff; }
.morado .bajada { color: rgba(255,255,255,.82); }
.morado .epigrafe { color: rgba(255,255,255,.6); }

footer { border-top: 1px solid var(--linea); padding: 40px 0 56px; color: var(--gris); font-size: 14px; }
footer .caja { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--tinta); }

/* ══════════════════════════════════════════════════════════════════
   PIEZAS AÑADIDAS EL 02/09/2026
   Salen de estudiar las 17 páginas de producto del competidor. Son
   los cuatro moldes que repite en todas y que aquí no teníamos.
   ══════════════════════════════════════════════════════════════════ */

/* ── Molde A · «La vida antes de Loalia» ──────────────────────────
   Tres pegas con emoji, una frase que duele, y una cita de cliente.
   Es lo primero que ponen después de la portada en casi todas sus
   páginas: primero el problema, después la solución.               */
.problema {
  list-style: none; padding: 0;
  margin: 30px auto 0; max-width: 60rem;
  display: grid; gap: 14px; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.problema li {
  display: block;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 18px 18px 20px;
  font-size: 15.5px; line-height: 1.55; color: #2A3142;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.problema li:hover {
  transform: translateY(-4px);
  border-color: rgba(193,72,81,.26);
  box-shadow: 0 14px 34px rgba(20,26,38,.09);
}
/* El emoji, en una chapa redonda y templada: estas tres cosas son pegas, y
   el morado de la marca se guarda para lo que sí funciona. */
.problema li .emoji {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(240,164,28,.16), rgba(193,72,81,.14));
  font-size: 19px; line-height: 1;
  margin-bottom: 12px;
}

/* La frase que remata. Antes flotaba en negrita y se perdía entre lo de
   arriba y lo de abajo; ahora tiene una rayita de color que la sujeta. */
.duele {
  position: relative;
  max-width: 40rem; margin: 34px auto 0;
  padding-top: 24px; text-align: center;
  font-family: var(--display); font-weight: 700;
  font-size: 22px; line-height: 1.32; color: var(--tinta);
  text-wrap: balance;
}
.duele::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--loalia), var(--magenta));
}

@media (prefers-reduced-motion: reduce) {
  .problema li { transition: none; }
  .problema li:hover { transform: none; }
}

/* ── Molde B · la cita de un cliente dentro de una sección ─────────
   Va siempre después del párrafo y antes de las viñetas.           */
.cita-cliente {
  position: relative;
  max-width: 42rem; margin: 28px auto 0; padding: 22px 26px 20px;
  background: rgba(91,47,214,.05);
  border: 1px solid rgba(91,47,214,.12);
  border-radius: 16px;
  font-size: 16.5px; line-height: 1.6; color: #2A3142;
}
/* Sin comilla dibujada: las citas ya vienen entrecomilladas desde la ficha,
   y poner otra encima se leia como dos comillas seguidas. (16/09/2026) */
.cita-cliente b {
  display: block; margin-top: 10px;
  font-weight: 600; font-size: 13.5px; color: var(--gris);
}
section.gris .cita-cliente { background: #fff; }

/* ── Molde C · la rejilla de «y además…» ──────────────────────────
   Muchas funciones pequeñas, cada una con su título y una línea.   */
.rejilla { list-style: none; padding: 0; margin: 32px 0 0;
           display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: 1fr 1fr 1fr; } }
.rejilla li { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 20px;
              box-shadow: 0 1px 2px rgba(20,26,38,.04); }
section.gris .rejilla li { background: #fff; }
.rejilla h3 { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.rejilla p { margin-top: 6px; font-size: 14.5px; color: var(--gris); line-height: 1.55; }

/* ── Molde D · la galería de formatos, con distintivos ────────────
   Cada tarjeta enseña un formato de verdad y lleva su etiqueta.    */
.galeria { list-style: none; padding: 0; margin: 36px 0 0;
           display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .galeria { grid-template-columns: 1fr 1fr; } }
.galeria li { border: 1px solid var(--linea); border-radius: 20px; overflow: hidden; background: #fff;
              box-shadow: 0 1px 2px rgba(20,26,38,.04), 0 16px 32px -24px rgba(20,26,38,.25);
              display: flex; flex-direction: column; }
.galeria .lienzo { padding: 22px; background: var(--gris-suave); border-bottom: 1px solid var(--linea);
                   min-height: 190px; display: grid; place-items: center; }
.galeria .pie { padding: 16px 20px 20px; }
.galeria h3 { font-family: var(--display); font-size: 18px; font-weight: 800; }
.galeria p { margin-top: 6px; font-size: 14.5px; color: var(--gris); line-height: 1.55; }
.distintivos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.distintivo { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
              padding: 4px 9px; border-radius: 999px; background: rgba(91,47,214,.1); color: var(--loalia); }
.distintivo.fuego { background: rgba(240,71,156,.12); color: #C31E70; }
.distintivo.gratis { background: rgba(5,150,105,.12); color: var(--verde); }

/* ── Preguntas frecuentes, desplegables sin una línea de JavaScript */
.faq { margin: 32px auto 0; max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
               font-family: var(--display); font-weight: 600; font-size: 17.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 15px;
                      font-size: 24px; font-weight: 400; color: var(--loalia); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; color: var(--gris); font-size: 15.5px; }

/* ── Menú con desplegables, igual en todas las páginas ────────────
   Sin JavaScript: se abre al pasar el ratón y al enfocar con el
   teclado, para que también funcione sin ratón.                    */
.menu .grupo { position: relative; }
.menu .grupo > button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
                        padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.menu .grupo > button::after { content: "▾"; font-size: 10px; opacity: .6; }
.menu .panel { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 14px);
               min-width: 230px; background: #fff; border: 1px solid var(--linea); border-radius: 16px;
               padding: 8px; box-shadow: 0 24px 48px -24px rgba(20,26,38,.35);
               display: grid; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .15s; }
.menu .grupo:hover .panel, .menu .grupo:focus-within .panel { opacity: 1; visibility: visible; }
.menu .panel a { padding: 9px 12px; border-radius: 10px; color: var(--tinta); font-weight: 500; }
.menu .panel a:hover { background: var(--gris-suave); }
.menu .grupo::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }

/* Un respiro extra cuando una sección lleva galería o rejilla */
.ancha { max-width: 1120px; }

/* ── El menú en el móvil ───────────────────────────────────────────
   Por debajo de 860 px el menú de escritorio se esconde, así que aquí
   hace falta uno propio. Se abre con <details>, que es HTML puro: sin
   JavaScript no puede fallar ni tardar en cargar.                    */
/* Ojo: NO lleva position:relative. Así el cajón se cuelga de la barra
   entera y ocupa todo el ancho del móvil; si se colgara del botón, se
   salía por la izquierda de la pantalla. */
.menu-movil { position: static; }
.menu-movil > summary { list-style: none; cursor: pointer; width: 42px; height: 42px;
                        display: grid; place-items: center; border: 1px solid var(--linea);
                        border-radius: 12px; background: #fff; }
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil .barras { display: block; width: 18px; height: 2px; background: var(--tinta);
                      position: relative; border-radius: 2px; }
.menu-movil .barras::before, .menu-movil .barras::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--tinta); border-radius: 2px; }
.menu-movil .barras::before { top: -6px; }
.menu-movil .barras::after  { top: 6px; }
.menu-movil[open] .barras { background: transparent; }
.menu-movil[open] .barras::before { top: 0; transform: rotate(45deg); }
.menu-movil[open] .barras::after  { top: 0; transform: rotate(-45deg); }
.menu-movil .cajon { position: absolute; left: 16px; right: 16px; top: calc(100% + 10px);
                     background: #fff; border: 1px solid var(--linea);
                     border-radius: 16px; padding: 10px; max-height: 74vh; overflow: auto;
                     box-shadow: 0 24px 48px -24px rgba(20,26,38,.35); z-index: 60; }
.menu-movil .cajon strong { display: block; padding: 12px 12px 4px; font-size: 11.5px;
                            font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                            color: var(--gris); }
.menu-movil .cajon a { display: block; padding: 10px 12px; border-radius: 10px;
                       text-decoration: none; color: var(--tinta); font-weight: 500;
                       font-size: 15px; }
.menu-movil .cajon a:active { background: var(--gris-suave); }
@media (min-width: 860px) { .menu-movil { display: none; } }

/* En pantallas estrechas el botón de la barra se comía media pantalla */
@media (max-width: 520px) {
  .barra img { height: 26px; }
  .mini-cta { font-size: 13.5px; padding: 9px 14px; }
  .barra .caja { gap: 10px; padding-inline: 16px; }
}


/* ── MAQUETAS CON PESTAÑAS (16/09/2026) ──
   Las pestañas de «Mostrador / Ticket / Factura» eran un dibujo y no se
   podían pulsar. Ahora son botones de verdad, hechos con radios escondidos
   y etiquetas: sin JavaScript, con teclado, y sin nada que se pueda romper.

   El truco: el radio marcado elige, con el selector «~», qué lienzo se ve y
   qué pestaña se pinta de morado. Por eso los radios van los primeros del
   bloque en el HTML — «~» solo alcanza a lo que viene detrás. */
.maqt { position: relative; }
.maqt-radio {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.maqt-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .7rem;
}
.maqt-chips label {
  cursor: pointer;
  font-size: .8rem; font-weight: 700;
  padding: .32rem .85rem; border-radius: 999px;
  background: #fff; color: var(--tinta);
  border: 1px solid var(--linea);
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
  user-select: none;
}
.maqt-chips label:hover { border-color: var(--loalia); color: var(--loalia); }
.maqt-lienzos > div { display: none; }

/* Cuál se ve y cuál se pinta, según el radio marcado. */
.maqt-radio:nth-of-type(1):checked ~ .maqt-lienzos > div:nth-child(1),
.maqt-radio:nth-of-type(2):checked ~ .maqt-lienzos > div:nth-child(2),
.maqt-radio:nth-of-type(3):checked ~ .maqt-lienzos > div:nth-child(3),
.maqt-radio:nth-of-type(4):checked ~ .maqt-lienzos > div:nth-child(4) { display: block; }

.maqt-radio:nth-of-type(1):checked ~ .maqt-chips label:nth-child(1),
.maqt-radio:nth-of-type(2):checked ~ .maqt-chips label:nth-child(2),
.maqt-radio:nth-of-type(3):checked ~ .maqt-chips label:nth-child(3),
.maqt-radio:nth-of-type(4):checked ~ .maqt-chips label:nth-child(4) {
  background: var(--loalia); color: #fff; border-color: var(--loalia);
  box-shadow: 0 6px 16px rgba(91,47,214,.28);
}

/* Que se vea por dónde va el teclado. */
.maqt-radio:focus-visible ~ .maqt-chips label { outline: none; }
.maqt-radio:nth-of-type(1):focus-visible ~ .maqt-chips label:nth-child(1),
.maqt-radio:nth-of-type(2):focus-visible ~ .maqt-chips label:nth-child(2),
.maqt-radio:nth-of-type(3):focus-visible ~ .maqt-chips label:nth-child(3),
.maqt-radio:nth-of-type(4):focus-visible ~ .maqt-chips label:nth-child(4) {
  outline: 2px solid var(--loalia); outline-offset: 2px;
}

/* La escena entra con un desvanecido corto: se nota que ha cambiado. */
.maqt-lienzos > div { animation: maqt-entra .26s ease-out; }
@keyframes maqt-entra { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .maqt-chips label { transition: none; }
  .maqt-lienzos > div { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MENOS TEXTO, MÁS VISTA (21/09/2026)

   Encargo de Rafael: «si ponemos tanto texto, casi nadie lo va a leer,
   las páginas tienen que ser más visuales». Estas reglas son las piezas
   nuevas que lo permiten. Las de antes siguen igual, así que una página
   que no use nada de esto se ve exactamente como estaba.
   ══════════════════════════════════════════════════════════════════ */

/* El titular de la portada ahora es un TITULAR: corto y con peso. Lo que
   antes iba dentro del <h1> —un párrafo de treinta palabras— baja a
   .h1-bajada, que es el tamaño que tenía el <h1> viejo. */
.portada.corta h1 { max-width: 36rem; margin: 26px auto 0; font-family: var(--display);
     font-size: clamp(22px, 2.6vw, 27px); font-weight: 800; letter-spacing: -.02em;
     line-height: 1.18; color: var(--tinta); text-wrap: balance; }
.h1-bajada { max-width: 38rem; margin: 12px auto 0; font-size: 17px; font-weight: 400;
             color: var(--gris); line-height: 1.55; text-wrap: pretty; }

/* PASOS NUMERADOS. Cuatro frases con palomita se leen como un párrafo; con
   un número gordo delante, el ojo salta de uno a otro. */
.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 28px auto 0;
         max-width: 48rem; display: grid; grid-template-columns: 1fr; gap: 14px; text-align: left; }
@media (min-width: 720px) { .pasos { grid-template-columns: 1fr 1fr; gap: 16px 28px; } }
.pasos li { display: flex; align-items: flex-start; gap: 12px; }
.pasos .paso-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800;
  font-size: 15px; color: #fff; background: var(--loalia);
  box-shadow: 0 2px 8px rgba(91,47,214,.28);
}
.pasos .paso-txt { display: block; padding-top: 3px; }
.pasos .paso-txt b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.35; }
.pasos .paso-txt span { display: block; margin-top: 3px; font-size: 14px; color: var(--gris); line-height: 1.5; }

/* FILTROS de una rejilla larga. Convierten una pared de quince fichas en
   algo con lo que se juega. */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px auto 0; }
.filtro {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linea);
  background: #fff; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.filtro span { font-size: 12px; font-weight: 700; color: var(--gris);
               background: var(--gris-suave); border-radius: 999px; padding: 1px 7px; }
.filtro:hover { border-color: var(--loalia); transform: translateY(-1px); }
.filtro.activo { background: var(--loalia); border-color: var(--loalia); color: #fff; }
.filtro.activo span { background: rgba(255,255,255,.22); color: #fff; }
.rejilla-vacia { text-align: center; margin-top: 24px; color: var(--gris); }

/* La rejilla compacta: más fichas por fila y menos aire, para que la lista
   se lea de un vistazo en vez de ocupar tres pantallas. */
.rejilla-compacta { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)) !important; gap: 12px !important; }
.rejilla-compacta li { padding: 15px 16px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rejilla-compacta li:hover { transform: translateY(-2px); border-color: rgba(91,47,214,.45);
                             box-shadow: 0 8px 22px rgba(20,26,38,.07); }
.rejilla-compacta h3 { font-size: 15.5px; }
.rejilla-compacta p { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }
/* Al filtrar, la ficha que no toca se va sin dar un salto brusco. */
.rejilla li[hidden] { display: none; }

/* La galería: el dibujo manda y el texto acompaña. */
.galeria li { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.galeria li:hover { transform: translateY(-3px); border-color: rgba(91,47,214,.4);
                    box-shadow: 0 14px 30px rgba(20,26,38,.09); }
.galeria .pie h3 { font-size: 17px; }
.galeria .pie p { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .filtro, .rejilla-compacta li, .galeria li { transition: none; }
  .filtro:hover, .rejilla-compacta li:hover, .galeria li:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS GUÍAS ANIMADAS (21/09/2026)

   Encargo de Rafael: «recuerda añadir también efectos y ejemplos o
   pequeñas guías o explicaciones animadas con efectos». Una sección de
   solo texto, aunque el texto sea corto, se pasa de largo. Metiendo los
   pasos en un panel con su raya y sus números, se lee como un esquema.
   ══════════════════════════════════════════════════════════════════ */

.caja-guia .pasos {
  position: relative;
  margin-top: 30px; padding: 26px 24px 24px;
  border: 1px solid var(--linea); border-radius: 20px;
  background: linear-gradient(180deg, rgba(91,47,214,.045), rgba(91,47,214,0) 70%), #fff;
  box-shadow: 0 10px 30px rgba(20,26,38,.05);
  max-width: 52rem;
}
.gris .caja-guia .pasos { background: linear-gradient(180deg, rgba(91,47,214,.05), rgba(255,255,255,0) 70%), #fff; }

/* LA RAYA que une los pasos. Se dibuja de arriba abajo cuando la sección
   entra en pantalla: el ojo la sigue y entiende que hay un orden. */
.pasos li { position: relative; }
.pasos li::before {
  content: ""; position: absolute; left: 14px; top: 30px; bottom: -14px; width: 2px;
  background: linear-gradient(180deg, rgba(91,47,214,.55), rgba(91,47,214,.12));
  transform: scaleY(0); transform-origin: top; border-radius: 2px;
  transition: transform .5s ease .12s;
}
.pasos li:last-child::before { display: none; }
.pasos li.vista::before { transform: scaleY(1); transition-delay: calc(var(--i, 0) * 90ms + .12s); }
/* A dos columnas la raya uniría pasos que no van seguidos: solo en una. */
@media (min-width: 720px) { .pasos li::before { display: none; } }

/* EL NÚMERO: entra dando un saltito y suelta un aro que se va abriendo,
   como cuando cae una gota. Se nota que ese paso «acaba de ocurrir». */
.pasos li.vista .paso-num { animation: paso-entra .42s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 90ms) both; }
.pasos .paso-num::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--loalia); opacity: 0;
}
.pasos li.vista .paso-num::after { animation: paso-aro .9s ease-out calc(var(--i, 0) * 90ms + .18s) both; }
@keyframes paso-entra { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes paso-aro {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* LA GALERÍA SE VA SEÑALANDO SOLA: una tarjeta cada vez, en bucle, para que
   el bloque no esté quieto. Se para en cuanto alguien pasa el ratón, para no
   pelearse con quien está mirando una en concreto. */
.galeria li.mirando {
  border-color: rgba(91,47,214,.5);
  box-shadow: 0 16px 34px rgba(91,47,214,.14);
  transform: translateY(-3px);
}
.galeria li.mirando .lienzo { background: rgba(91,47,214,.05); }

@media (prefers-reduced-motion: reduce) {
  .pasos li::before { transition: none; transform: scaleY(1); }
  .pasos li.vista .paso-num, .pasos li.vista .paso-num::after { animation: none; }
  .galeria li.mirando { transform: none; box-shadow: none; }
}