/* ==========================================================================
   Jupá · Marca 2 (28-oct-2026): el MATERIAL de la web pública.
   Se mantiene todo (Nura, una itálica, Figtree, los 15 colores, logo, ticket/sello/curva/arco, voz). Cambia el material:
   papel con grano y una luz de ventana desde arriba a la izquierda (A), gráfico pegado como papel sobre fotos reales de
   fiestas con su crédito (C). El vidrio NO va en la web (solo en lo que flota en la app).
   Va ÚLTIMA (después de pie.css): re-expresa lo que ya hay sin tocar estructura, textos ni animaciones (m.js, l.js, f.js
   siguen moviendo lo mismo). css-pages.py la recorta por página como a las otras.
   Reglas de la lámina 1: una luz (arriba-izq) · sombra en tres capas de noche (nunca negro, nunca brillo alrededor) ·
   grano 30–60 % · 70 papel/foto, 20 tinta/noche, 10 violeta · lila liso, sin degradés · papeles girados −3°…+3°, sellos y
   lacre −8°…−14° · pegar 260 ms (baja y asienta la sombra), sello 220 ms con golpe, botón baja 3 px al tocarlo.
   Texturas: m2/grano.webp (3 KB, 256 px que se repite), m2/ventana.webp (1 KB, borrosa), m2/lacre.webp (14 KB).
   ========================================================================== */
:root{
  --m2-sombra:1px 2px 1px rgba(35,26,46,.20),12px 18px 18px -8px rgba(35,26,46,.18),36px 56px 60px -24px rgba(35,26,46,.16);
  --m2-sombra-chica:1px 1px 1px rgba(35,26,46,.22),5px 8px 9px -4px rgba(35,26,46,.16);
  --m2-sombra-foto:1px 2px 1px rgba(20,14,28,.40),10px 16px 16px -6px rgba(20,14,28,.34);
  --m2-pegar:cubic-bezier(.2,.8,.25,1);
  --m2-golpe:cubic-bezier(.55,0,.75,.3);
  --m2-grano:url(m2/grano.webp);
}

/* ——— A · PAPEL: algodón con grano (se multiplica con el color de fondo: el papel queda papel, no gris) */
.m2-papel,.m2h,.m2-sec{background-color:var(--paper);background-image:var(--m2-grano);background-size:220px 220px;background-blend-mode:multiply}
.m2-bruma{background-color:var(--lilac-soft);background-image:var(--m2-grano);background-size:220px 220px;background-blend-mode:multiply}
.m2-lila{background-color:var(--lilac);background-image:var(--m2-grano);background-size:220px 220px;background-blend-mode:multiply}
.m2-noche{background-color:var(--night);background-image:url(m2/grano-n.webp);background-size:220px 220px;background-blend-mode:multiply}
/* Luz de ventana: dos paños de luz que entran desde arriba a la izquierda (sombra de los parantes, muy suave). Se mueve
   apenas, lento, como una nube que pasa (m2-nube); con «menos movimiento», quieta. */
.m2-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.m2-luz::before{content:"";position:absolute;left:-6%;top:-8%;width:112%;height:120%;background:url(m2/ventana.webp) 0 0/cover no-repeat;mix-blend-mode:multiply;opacity:.9;animation:m2-nube 26s ease-in-out infinite alternate}
@keyframes m2-nube{from{transform:translate3d(0,0,0)}to{transform:translate3d(2.5%,1.5%,0) skewX(-1deg)}}

/* ——— Piezas con cuerpo (lámina 2) */
/* Foto impresa: borde de papel, abajo más ancho para el crédito; girada y con la sombra de la luz de arriba-izq */
.m2-print{background:var(--paper);padding:10px 10px 30px;box-shadow:var(--m2-sombra);border-radius:2px}
.m2-print img{display:block;width:100%;height:100%;object-fit:cover}
.m2-cred{font:500 12px/1.2 var(--font-body);letter-spacing:.02em;color:var(--muted)}
.m2-print .m2-cred{position:absolute;left:12px;bottom:9px}
/* Cinta de papel lila translúcida que sostiene la foto (lila liso, sin degradé) */
.m2-cinta{position:absolute;left:50%;top:-14px;width:34%;height:28px;margin-left:-17%;background:rgba(232,220,247,.82);box-shadow:0 1px 2px rgba(35,26,46,.12);transform:rotate(-4deg)}
/* Lacre con la J: uno por pieza, cierra lo que quedó hecho. Entra con golpe (220 ms) */
.m2-lacre{position:absolute;display:block;width:96px;height:auto;transform:rotate(-11deg);pointer-events:none}
/* Sello de tinta: borde doble, girado, la tinta no carga pareja (máscara de grano) */
.m2-sello{display:inline-block;font:600 13px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:7px 11px 6px;border:2px solid currentColor;border-radius:6px;outline:1px solid currentColor;outline-offset:-5px;color:var(--ok);transform:rotate(-8deg);
  -webkit-mask:var(--m2-grano) 0 0/90px 90px,linear-gradient(#000 0 0);-webkit-mask-composite:source-in;mask:var(--m2-grano) 0 0/90px 90px luminance;mask-mode:luminance}
/* Ticket troquelado con espesor: semicírculos de corte a los lados, corte punteado entre columnas, números en Nura */
.m2-ticket{position:relative;display:flex;align-items:stretch;background:var(--paper);filter:drop-shadow(1px 2px 1px rgba(35,26,46,.22)) drop-shadow(10px 14px 14px rgba(35,26,46,.16));
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 13px,#000 13.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 13px,#000 13.5px) right/51% 100% no-repeat}
/* Arco en golpe seco: la forma del color del papel sube (luz arriba-izq, sombra abajo-der). Sin tinta: se lee con la luz. */
.m2-arco{position:relative;border-radius:999px 999px 18px 18px;background:var(--paper);box-shadow:-3px -3px 5px rgba(255,255,255,.95),4px 5px 9px rgba(35,26,46,.16),inset 1px 1px 0 rgba(255,255,255,.9)}
.m2-arco-in{border-radius:999px 999px 12px 12px;box-shadow:inset 3px 4px 6px rgba(35,26,46,.16),inset -2px -2px 3px rgba(255,255,255,.9)}
/* Texto adentro del arco: NUNCA se sale. El tamaño arranca en un clamp y m.js (arcoFit) lo achica si igual no entra. */
[data-arco-fit]{max-width:100%;overflow-wrap:normal;word-break:keep-all;hyphens:none}
/* Tira: título impreso en una tira de papel pegada sobre la foto (la sombra sigue al sol de la foto) */
.m2-tira{display:inline-block;background:var(--paper);color:var(--ink);padding:.12em .28em .02em;box-shadow:var(--m2-sombra-foto);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ——— Movimiento propio de la marca 2 (además de los reveals de siempre): pegar, golpe de sello, lacre */
@media (prefers-reduced-motion:no-preference){
  .m2-pega{opacity:0;transform:translate3d(0,-14px,0) rotate(var(--r,0deg)) scale(1.03);transition:opacity .26s var(--m2-pegar),transform .26s var(--m2-pegar),box-shadow .26s var(--m2-pegar)}
  .m2-pega.in{opacity:1;transform:rotate(var(--r,0deg))}
  .m2-golpe{opacity:0;transform:rotate(var(--r,-8deg)) scale(1.7)}
  .m2-golpe.in{opacity:1;transform:rotate(var(--r,-8deg)) scale(1);transition:opacity .08s linear,transform .22s var(--m2-golpe)}
  .hx-lacre{animation:m2-lacre .22s var(--m2-golpe) 1.1s both}
}
@keyframes m2-lacre{from{opacity:0;transform:rotate(-24deg) scale(1.6)}to{opacity:1;transform:rotate(-11deg) scale(1)}}

/* ——— Botones con canto: borde de ciruela abajo y su sombra; al tocarlo baja 3 px y la sombra se achica (180 ms) */
.btn{transition:transform .18s var(--m2-pegar),box-shadow .18s var(--m2-pegar),background .25s,color .25s,border-color .25s}
.btn::after{display:none}
.btn-l,.btn-l.btn-w,.nav .btn-s,.nav.solid .btn-s,.nav.light .btn-s{background:var(--violet);color:var(--paper);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 var(--violet-deep),0 4px 2px rgba(35,26,46,.22),0 12px 18px -4px rgba(35,26,46,.2)}
.btn-w:not(.btn-l),.btn-g,.btn-o{background:var(--paper);color:var(--ink);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--lavender),0 4px 2px rgba(35,26,46,.16),0 12px 18px -4px rgba(35,26,46,.14)}
.btn-w:not(.btn-l):hover,.btn-g:hover{background:#fff}
@media (hover:hover){
  .btn-l:hover,.nav .btn-s:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 var(--violet-deep),0 5px 3px rgba(35,26,46,.22),0 16px 22px -6px rgba(35,26,46,.24)}
  .btn-w:not(.btn-l):hover,.btn-g:hover,.btn-o:hover{transform:translateY(-1px);border-color:transparent;box-shadow:inset 0 1px 0 #fff,0 4px 0 var(--lavender),0 5px 3px rgba(35,26,46,.16),0 16px 22px -6px rgba(35,26,46,.16)}
}
.btn-l:active,.nav .btn-s:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 var(--violet-deep),0 1px 1px rgba(35,26,46,.3),0 3px 5px rgba(35,26,46,.16)}
.btn-w:not(.btn-l):active,.btn-g:active,.btn-o:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff,0 0 0 var(--lavender),0 1px 1px rgba(35,26,46,.24),0 3px 5px rgba(35,26,46,.12)}
.btn:focus-visible{outline:2px solid var(--violet);outline-offset:4px}

/* ——— Barra de arriba: sobre papel, sin vidrio. Arriba transparente; al bajar, papel liso con su línea */
.nav.light:not(.solid){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav.solid{background-color:rgba(251,250,252,.97);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 var(--line),0 8px 18px -14px rgba(35,26,46,.25)}
.nav.dkm{background:var(--night);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.solid .aud-i,.nav.light .aud-i{background:var(--ink)}

/* ——— Portada en papel (m2h): la misma estructura y animaciones, en papel claro con la luz de ventana */
.lh.m2h{color:var(--ink);isolation:isolate}
.m2h .lh-h{color:var(--ink)}
.m2h .rot{color:var(--violet)}
.m2h .lk-l,.m2h .lk{color:var(--violet)}
.m2h .lh-p{color:var(--muted)}
.m2h .lh-p b{color:var(--ink)}
.m2h .lh-u{text-decoration-color:var(--lavender-deep)}
.m2h .trust{color:var(--muted)}
.m2h .trust svg{color:var(--ok)}
.m2h .lh-s,.m2h .so-av{color:var(--muted)}
.m2h .so-av li{box-shadow:0 0 0 2px var(--paper),var(--m2-sombra-chica)}
.m2h .so-av li.so-mas{box-shadow:inset 0 0 0 1.5px var(--lavender);color:var(--violet-deep);background:var(--paper)}
.m2h .aud{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),var(--m2-sombra-chica)}
.m2h .aud a{color:var(--muted)}
.m2h .aud a.on{color:var(--paper)}
.m2h .aud-i{background:var(--ink)}
.m2h .aud a:hover{color:var(--ink)}.m2h .aud a.on:hover{color:var(--paper)}

/* Escena de la portada (l.js la anima igual): cada pieza es un papel con cuerpo sobre la mesa */
.m2h .hx{color:var(--ink)}
.m2h .hx-arch{right:calc(-22 * var(--u));top:calc(-2 * var(--u));width:calc(252 * var(--u));height:calc(196 * var(--u));border-radius:2px;overflow:visible;opacity:1;padding:calc(7 * var(--u)) calc(7 * var(--u)) calc(24 * var(--u));transform:rotate(3deg);background:var(--paper);box-shadow:var(--m2-sombra)}
@media(min-width:900px){
  .m2h .hx-panel{left:calc(150 * var(--u));top:calc(118 * var(--u));width:calc(400 * var(--u))}
  .m2h .hx-plan{top:calc(278 * var(--u));left:calc(300 * var(--u))}
  .m2h .hx-phone{top:calc(72 * var(--u))}
}
.m2h .hx-arch picture{display:block;width:100%;height:100%;overflow:hidden}
.m2h .hx-arch img{object-position:50% 40%}
.m2h .hx-arch::after{display:none}
.m2h .hx-arch .m2-cred{left:calc(10 * var(--u));bottom:calc(8 * var(--u));font-size:max(11px,calc(10 * var(--u)))}
.m2h .hx-arch .m2-cinta{top:calc(-11 * var(--u));height:calc(22 * var(--u))}
.m2h .hx-lacre{right:calc(-46 * var(--u));top:calc(40 * var(--u));width:calc(62 * var(--u))}
.m2h .hx-halo{display:none}
.m2h .hx-panel{background:var(--paper);box-shadow:var(--m2-sombra);border:0;border-radius:calc(6 * var(--u))}
.m2h .hx-chrome{background:var(--lilac-soft)}
.m2h .hx-plan{background:var(--paper);box-shadow:var(--m2-sombra);border-radius:calc(6 * var(--u));transform:rotate(-1.5deg)}
.m2h .hx-phone{filter:drop-shadow(1px 2px 1px rgba(35,26,46,.25)) drop-shadow(14px 22px 20px rgba(35,26,46,.24));box-shadow:none}
.m2h .hx-note{background:var(--paper);border-radius:4px;box-shadow:var(--m2-sombra);transform:rotate(-2.5deg)}
.m2h .hx-bar i{background:var(--violet)}
/* La confirmación que entra a la lista se marca con sello de tinta (no con una pastilla) */
.m2h .hx-new .hx-pill{background:none;color:var(--ok);border:1.5px solid currentColor;border-radius:4px;outline:1px solid currentColor;outline-offset:-4px;padding:calc(4 * var(--u)) calc(8 * var(--u));font:600 max(11px,calc(10 * var(--u)))/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-7deg)}
.m2h .hx-beam{stroke:var(--violet);stroke-width:2;filter:none}
.m2h .hx-spark{background:var(--violet);box-shadow:0 0 0 3px var(--paper)}
.m2h .hx-fly{border-color:var(--paper);box-shadow:var(--m2-sombra-chica)}
.m2h .hx-seat{box-shadow:0 0 0 calc(2 * var(--u)) var(--paper),0 2px 3px rgba(35,26,46,.3)}
.m2h .hx-t7l{background:var(--ink)}

/* Celular (la historia en 4 capítulos): el arco de atrás pasa a ser la foto impresa con su crédito */
.m2h .hm-arc{background:var(--paper) url(m2/rm-5-480.webp) center 40%/cover no-repeat;background-clip:content-box;padding:8px 8px 24px;border-radius:2px;box-shadow:var(--m2-sombra);transform:rotate(3deg);opacity:1;border:0}
.m2h .hm-arc::after{content:"Foto: Rodríguez + Mansilla";position:absolute;left:-1px;bottom:28px;writing-mode:vertical-rl;transform:rotate(180deg);font:500 10px/1 var(--font-body);color:var(--muted);white-space:nowrap}
.m2h .hm-arc{padding-left:16px}
.m2h .hm-stk{background:var(--paper);color:var(--ink);box-shadow:var(--m2-sombra-chica)}
.m2h .hm-cap,.m2h .hm-ct{color:var(--ink)}
.m2h .hm-ct em{color:var(--violet)}
.m2h .hm-cn{color:var(--violet)}

@media (prefers-reduced-motion:reduce){.m2-luz::before{animation:none}.m2-pega,.m2-golpe{opacity:1;transform:rotate(var(--r,0deg))}}

/* ==========================================================================
   Secciones: cada una con su pieza (no todas con foto, no todas iguales). Ritmo de la portada:
   papel+luz · cinta de tinta · noche · papel · foto+hoja · bruma lisa · noche · papel · foto+tiras · lila (pie)
   ========================================================================== */
body{background-color:var(--paper);background-image:var(--m2-grano);background-size:220px 220px;background-blend-mode:multiply}
.faq,.sec.faq{background:transparent}

/* Cinta que cruza (la tira de beneficios que corre): una cinta de tinta impresa, apenas girada, que pasa por encima del borde */
.strip{position:relative;z-index:3;margin:-22px -2vw -8px;padding:15px 0 14px;background-color:var(--ink);background-image:url(m2/grano-n.webp);background-size:220px;background-blend-mode:multiply;border:0;transform:rotate(-1.4deg);box-shadow:0 2px 1px rgba(35,26,46,.25),0 14px 22px -8px rgba(35,26,46,.35)}
.strip li{font:600 clamp(13px,1vw,15px)/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.strip li::after{width:6px;height:6px;border-radius:0;transform:rotate(45deg);background:var(--lavender-deep);opacity:1;margin:0 clamp(18px,2.4vw,34px)}

/* Video «Mírenlo andar»: la noche, con el sello de tinta de verdad (golpe al entrar) */
.dv-box{box-shadow:0 0 0 1px rgba(232,220,247,.12),1px 2px 1px rgba(0,0,0,.3),20px 30px 40px -16px rgba(0,0,0,.55)}
.dv-sello{background:none;transform:rotate(-9deg)}
.dv-ev a{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(232,220,247,.35)}

/* Qué hace: papel liso. La pantalla es una copia apoyada en la mesa (sombra de la luz de arriba-izq), no una tarjeta flotante */
.v4h .v4t-s{border:0;border-radius:6px;box-shadow:var(--m2-sombra);transform:rotate(.6deg)}
.v4h .v4t-v::after{display:none}
.v4h .v4t-top{background:var(--lilac-soft)}
/* «Y además»: un índice impreso en dos columnas (renglones con su línea), no seis tarjetas iguales */
.v4m{gap:0 clamp(24px,4vw,56px);border-top:1.5px solid var(--ink)}
.v4m li{border-bottom:1px dashed var(--lavender)}
.v4m a{min-height:60px;padding:12px 0;border:0;border-radius:0;background:none;box-shadow:none;grid-template-columns:1fr auto}
.v4m a:hover{border-color:transparent;box-shadow:none;transform:none}
.v4m a:hover .v4m-t b{color:var(--violet)}
.v4m-i{display:none}
.v4m-t b{font:600 16px/1.25 var(--font-body)}
.v4m-go{background:none;width:auto;height:auto}
@media(min-width:760px){.v4m{grid-template-columns:1fr 1fr}}

/* Guía de proveedores: foto real a sangre y una hoja de papel pegada encima, corrida a la izquierda */
.m2-fs{position:relative;isolation:isolate;overflow:hidden;border:0;padding:clamp(72px,10vw,150px) 0}
.m2-fondo{position:absolute;inset:0;z-index:-1;margin:0}
.m2-fondo img{width:100%;height:100%;object-fit:cover;display:block}
.m2-fondo .m2-cred{position:absolute;z-index:2;right:clamp(16px,3vw,40px);bottom:14px;padding:5px 9px 4px;background:rgba(20,14,28,.55);color:var(--paper);border-radius:2px}
.m2-hoja{position:relative;max-width:640px;padding:clamp(24px,3.4vw,44px);background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;box-shadow:var(--m2-sombra-foto),30px 50px 60px -30px rgba(20,14,28,.45);transform:rotate(var(--r,0deg))}
.m2-hoja::before{content:"";position:absolute;left:28px;top:-13px;width:120px;height:26px;background:rgba(232,220,247,.86);box-shadow:0 1px 2px rgba(35,26,46,.15);transform:rotate(-5deg)}
.m2-fs .v4h-h{margin-bottom:22px;grid-template-columns:1fr!important;justify-items:start}
.m2-fs .v4h-h>p{max-width:46ch}
.m2-fs .v4g-r a{border-radius:4px;border:0;background:var(--paper);box-shadow:var(--m2-sombra-chica);padding:0 16px 0 8px}
.m2-fs .v4g-r a:hover{box-shadow:inset 0 0 0 1.5px var(--lavender),var(--m2-sombra-chica)}
.m2-fs .v4g-i{border-radius:4px;background:var(--lilac)}
.m2-fs .v4g-b{gap:22px}
@media(min-width:900px){.m2-fs .m2-hoja{margin-left:-1%}.m2-fs .v4h-h h2{font-size:clamp(38px,3.8vw,58px)}}

/* Reseña: papel bruma liso (sin foto de fondo). La foto de la pareja es una copia con cinta y el 5/5 es un sello */
.v4r.m2-bruma{color:var(--ink)}
.v4r-f img{border-radius:2px;border:10px solid var(--paper);border-bottom-width:34px;box-shadow:var(--m2-sombra);filter:none}
.v4r-f::after{display:none}
.v4r-f .m2-cinta{z-index:2;top:-12px}
.v4r-g:hover .v4r-f img{filter:none}
.v4r-s{background:none;border:3px solid var(--violet);outline:1.5px solid var(--violet);outline-offset:-9px;color:var(--violet);box-shadow:none;-webkit-mask:var(--m2-grano) 0 0/90px 90px;mask:var(--m2-grano) 0 0/90px 90px;mask-mode:luminance}
.v4r blockquote{color:var(--ink)}
.v4r blockquote em{color:var(--violet)}
.v4r .lk-l{color:var(--violet)}
.v4r-w{color:var(--muted)}.v4r-w b{color:var(--ink)}.v4r-st{color:var(--violet)}
.v4r-a{background:var(--paper);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--lavender),0 4px 2px rgba(35,26,46,.14),0 10px 16px -4px rgba(35,26,46,.12)}
.v4r-a:hover{background:#fff}

/* Cómo empezar: la noche. Las maquetas son papeles apoyados (sin degradé), la línea que se llena es violeta lisa */
.lp .ps-v{background:var(--violet-deep);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),1px 2px 1px rgba(0,0,0,.25),18px 28px 36px -18px rgba(0,0,0,.5);border-radius:6px}
.lp .mini,.lp .note{border-radius:4px;box-shadow:1px 2px 1px rgba(0,0,0,.25),12px 18px 22px -8px rgba(0,0,0,.45)}
.lp .mini{transform:rotate(-1deg)}
.lp-l::after{background:var(--lavender-deep)}

/* Preguntas: un listado impreso, renglón por renglón, sin cajitas. «¿Otra duda?» es un ticket */
.faq .q{border-radius:0;background:none;box-shadow:none;border-bottom:1px dashed var(--lavender)}
.faq .qs{gap:0;border-top:1.5px solid var(--ink)}
.faq .q:hover{box-shadow:none}
.faq .q.on{background:none;box-shadow:none}
.faq .q summary{padding:20px 4px}
.faq .q-a{padding:0 4px 22px}
.faq .q summary i{border-radius:4px}
.faq-c{border-radius:0;background:var(--paper);box-shadow:none;filter:drop-shadow(1px 2px 1px rgba(35,26,46,.2)) drop-shadow(10px 14px 14px rgba(35,26,46,.14));transform:rotate(-1.5deg);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 12px,#000 12.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 12px,#000 12.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent 12px,#000 12.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 12px,#000 12.5px) right/51% 100% no-repeat;padding:22px 30px}
.qs-all{background:var(--violet);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 var(--violet-deep),0 4px 2px rgba(35,26,46,.2),0 12px 18px -4px rgba(35,26,46,.18);transition:transform .18s var(--m2-pegar),box-shadow .18s}
.qs-all:hover{background:var(--violet)}
.qs-all:active{transform:translateY(3px);box-shadow:0 0 0 var(--violet-deep),0 1px 1px rgba(35,26,46,.3)}

/* Cierre con foto (C): la fiesta a sangre y el título en tiras de papel pegadas, cada una con su giro */
.m2-fx{background:var(--night)}
.m2-fx .v4x-foto{z-index:0}
.m2-fx .v4x-veil{background:linear-gradient(180deg,rgba(20,14,28,.35),rgba(20,14,28,.55) 60%,rgba(20,14,28,.75))}
.m2-fx .v4x-in{z-index:1}
.m2-fx .lx-h .ln>span{display:inline-block}
.m2-fx .lx-h .ln:first-child>span{background:var(--paper);color:var(--ink);padding:.1em .22em 0;transform:rotate(-1.6deg);box-shadow:var(--m2-sombra-foto)}
.m2-fx .lx-h .ln:last-child em{color:var(--paper);text-shadow:0 2px 12px rgba(20,14,28,.45)}
/* Título de un solo renglón: va entero en la tira de papel, en tinta */
.m2-fx .lx-h .ln:only-child em{color:var(--violet-deep);text-shadow:none}
.m2-fx .v4x-foto .m2-cred{z-index:2}
/* Cierre sin foto: las pantallas que corren son copias de papel sobre la noche */
.m2-noche .v4x-col img{border:6px solid var(--paper);border-radius:2px;box-shadow:0 2px 2px rgba(0,0,0,.3),14px 20px 26px -10px rgba(0,0,0,.5)}
.m2-noche .v4x-veil{background:linear-gradient(180deg,rgba(35,26,46,.86),rgba(35,26,46,.78) 50%,rgba(35,26,46,.9))}

/* ——— Pie: papel lila con grano. El arco se dibuja como siempre, pero en golpe seco (luz arriba-izq, sombra abajo-der), con la
   J apretada en el papel adentro; el confeti es papelito violeta que flota lento. Textos en tinta y ciruela (AA sobre lila). */
.foot{--fbg:var(--lilac);--ft:var(--ink);--fk:var(--violet-deep);--fl:var(--violet);background-color:var(--lilac);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;color:var(--ink)}
.foot-g{display:none}
.foot-h{color:var(--ink)}
.foot-h em{color:var(--violet)}
.foot-rule{height:1.5px;background:var(--ink);opacity:.8}
.foot-c a.foot-fh{color:var(--ink)}
.foot-f li a{color:var(--violet-deep)}
@media (hover:hover){.foot-f li a:hover,.foot-c a:hover,.foot-ck:hover{color:var(--violet)}}
.foot-s{border-top:1px dashed var(--lavender-deep);color:var(--violet-deep)}
.foot-n{color:var(--violet-deep)}
.foot-arc-g{stroke:rgba(35,26,46,.5);stroke-width:12;opacity:.32;transform:translate(5px,6px)}
.foot-arc-l{stroke:#fff;stroke-width:4.5;filter:drop-shadow(2px 2.5px 1.5px rgba(35,26,46,.28))}
@media (min-width:900px){.foot-arc-g{stroke-width:10}.foot-arc-l{stroke-width:3.5}}
.foot{--fmo:1}
.foot-mono-a,.foot-mono-b{fill:var(--lilac)}
.foot-mono{filter:drop-shadow(-1.5px -1.5px 0 rgba(255,255,255,.95)) drop-shadow(2px 3px 2px rgba(35,26,46,.3))}
.foot-sp{fill:var(--violet)}.foot-sp3,.foot-sp5{fill:var(--lavender-deep)}
.foot-dot{background:var(--violet);border-radius:1px}.foot-dot2{background:var(--lavender-deep)}
@keyframes foot-br{from{opacity:.28}to{opacity:.36}}

/* ——— Páginas internas: cada tipo con su pieza. Base: papel (sin degradé lila) */
.fhero{position:relative;isolation:isolate;background:transparent;overflow:hidden}
/* Planes y contacto: el título adentro de un arco en golpe seco (asimétrico: arco a la izquierda, texto al costado) */
.m2-fa .wrap{display:grid;gap:28px;align-items:end}
.m2-fa .m2-arco{width:min(100%,520px);padding:14px;transform:rotate(var(--r,0deg))}
.m2-fa .m2-arco-in{display:grid;justify-items:center;align-content:end;text-align:center;gap:14px;padding:clamp(96px,26vw,170px) 9% clamp(28px,4vw,44px)}
.m2-fa .m2-arco .k{letter-spacing:.26em}
.m2-fa .h1{font-size:clamp(34px,8.6vw,74px);line-height:.95;width:100%}
.m2-fa .h1 em{display:block;font-size:1.06em;color:var(--violet)}
.m2-fa .hero-p{max-width:38ch;color:var(--muted)}
.m2-fa .m2-lacre{right:-14px;top:26%;width:clamp(70px,9vw,96px)}
.m2-fa-t{display:grid;gap:18px;align-content:end}
@media(min-width:900px){.m2-fa .wrap{grid-template-columns:min(500px,48%) minmax(0,1fr);gap:clamp(40px,6vw,96px)}.m2-fa .hero-p{margin-bottom:clamp(20px,3vw,40px)}}
.m2-fa .m2-arco{width:100%}
/* Preguntas: papel con la luz de ventana, el título grande corrido a la izquierda */
.m2-fl{padding-bottom:16px}
/* Legales: el papel liso; la fecha de la última actualización es un sello de tinta */
.m2-lgh .lg-up{justify-self:start;margin-top:6px;color:var(--violet-deep);font-size:12px}
.lg-c section{border-top:1px dashed var(--lavender)}
.lg-toc{border-top:1.5px solid var(--ink);padding-top:14px}
.lg-toc a{border-radius:0;border-bottom:1px dashed var(--line)}
.lg-toc a:hover{background:none;color:var(--violet)}

/* ——— Planes: tres papeles apoyados en la mesa, cada uno con su giro; el recomendado es papel noche con su sello */
.plan{border-radius:4px;background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;box-shadow:var(--m2-sombra)}
.plan-top{background-color:var(--night);background-image:url(m2/grano-n.webp)}
.plan-badge{background:var(--night);color:var(--lavender);border:1.5px solid currentColor;outline:1px solid currentColor;outline-offset:-4px;border-radius:4px;font:600 11px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px 6px;transform:rotate(-6deg)}
.plan-top .btn-l{background:var(--paper);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--lavender-deep),0 4px 2px rgba(0,0,0,.25),0 12px 18px -4px rgba(0,0,0,.3)}
@media (min-width:980px){
  .plans .plan:nth-child(1){rotate:-.7deg}.plans .plan:nth-child(3){rotate:.6deg}
  .plans .plan-top{rotate:.3deg}
}
.cmp table,.cmp .cmp-t{box-shadow:var(--m2-sombra-chica);border-radius:4px}

/* Organizadores: la noche lisa con grano (sin luces lila difusas) */
.og-h.m2-noche .lh-bg{display:none}

/* Fiestas y proveedores: la misma portada en papel (sus escenas siguen igual; se pasan a tinta los textos que eran claros) */
.m2h .fi-hh{color:var(--ink)}.m2h .fi-hh em{color:var(--violet)}
.m2h .fi-ht .lh-p{color:var(--muted)}.m2h .fi-ht .lh-p b{color:var(--ink)}
.m2h .fi-ticket{filter:drop-shadow(1px 2px 1px rgba(35,26,46,.2)) drop-shadow(10px 14px 14px rgba(35,26,46,.16))}
.m2h .vp-x{color:var(--ink)}
.m2h .vp-r b{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--lavender),var(--m2-sombra-chica)}
.m2h .vp-d small{color:var(--muted)}
.m2h .vp-pr b{color:var(--ink)}.m2h .vp-pr span{color:var(--muted)}
.m2h .vp-alt{color:var(--muted)}.m2h .vp-alt a{color:var(--violet)}
.m2h .vp-r{border-color:rgba(113,84,146,.28);background:none}
.m2h .vp-r1{border-color:rgba(113,84,146,.42)}
.m2h .vp-pulse{border-color:rgba(113,84,146,.3)}
.m2h .lh-h em{color:var(--violet)}

/* Funciones: héroe de noche con grano (sin brillos lilas), índice impreso en vez de tarjetas */
.fh.m2-noche::before{display:none}
.fh.m2-noche .fh-h em{color:var(--lilac)}
.m2-marta{position:absolute;z-index:5;left:2%;bottom:-2%;max-width:250px;margin:0;padding:18px 18px 14px;background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;color:var(--ink);font:500 15px/1.35 var(--font-body);box-shadow:var(--m2-sombra-foto);transform:rotate(-3deg)}
.m2-marta b{display:block;font:500 22px/1 var(--font-display);text-transform:uppercase;margin-bottom:4px}
.m2-marta small{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.m2-marta .m2-cinta{top:-12px;height:22px}
@media(max-width:899px){.m2-marta{left:5%;right:auto;bottom:-12%;max-width:210px;padding:14px 14px 11px;font-size:13.5px}.m2-marta b{font-size:19px}}
.specs .spl{gap:0}
.specs .spl li{background:transparent;border-radius:0;box-shadow:none;border-top:1px dashed rgba(41,37,52,.28);padding:24px 0 26px;grid-template-columns:auto 1fr;column-gap:18px}
.specs .spl li:hover{transform:none;box-shadow:none}
.specs .spl-n{grid-row:1/3;width:62px;font-size:44px;color:var(--violet)}
.specs .spl h3,.specs .spl p{grid-column:2}
@media(min-width:900px){.specs .spl li:nth-child(even){margin-top:28px;margin-bottom:-28px}}
.others .ocards{gap:0;border-top:2px solid var(--ink)}
.others .ocard{border-radius:0;background:transparent;box-shadow:none;border-bottom:1px dashed rgba(41,37,52,.3);padding:22px 4px}
.others .ocard:hover{transform:none;background:rgba(232,220,247,.35)}
@media(min-width:900px){.others .ocards{grid-template-columns:repeat(3,1fr);column-gap:36px}}
.hire-in{border-radius:6px;background-color:var(--night);background-image:url(m2/grano-n.webp);background-size:220px;background-blend-mode:multiply;box-shadow:var(--m2-sombra)}
.hire-in .hp{border-radius:4px}
.hire .wrap{filter:drop-shadow(1px 2px 1px rgba(35,26,46,.25)) drop-shadow(14px 22px 22px rgba(35,26,46,.2))}
.hire-in{box-shadow:none;-webkit-mask:radial-gradient(circle 16px at 0 62%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 62%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 16px at 0 62%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 62%,#0000 97%,#000) right/51% 100% no-repeat}

/* Guías: papel con grano, barra sin vidrio, índice impreso en vez de tarjetas iguales */
body.gb{background-color:var(--paper);background-image:url(m2/grano.webp);background-size:220px;background-blend-mode:multiply}
.gh{background-color:var(--paper);background-image:url(m2/grano.webp);background-size:220px;background-blend-mode:multiply;-webkit-backdrop-filter:none;backdrop-filter:none}
.gcards{gap:0;border-top:2px solid var(--ink);counter-reset:gc}
.gcard{counter-increment:gc;position:relative;padding:22px 4px 24px 64px;border:0;border-bottom:1px dashed rgba(41,37,52,.3);border-radius:0;background:transparent;box-shadow:none}
.gcard::before{content:counter(gc,decimal-leading-zero);position:absolute;left:4px;top:18px;font:italic 400 38px/1 var(--font-accent);color:var(--violet)}
.gcard:hover{border-color:rgba(41,37,52,.3);box-shadow:none;background:rgba(232,220,247,.32)}
@media(min-width:720px){.gcards{column-gap:40px}}
@media(min-width:1080px){.gcards{grid-template-columns:repeat(2,1fr)}.gcard:nth-child(even){margin-top:30px;margin-bottom:-30px}}
.hx-cnt small,.hx-cnt em{color:var(--muted)}
@media(min-width:900px){.m2-fa .wrap{grid-template-columns:min(580px,50%) minmax(0,1fr)}.m2-fa .m2-arco-in{padding-top:clamp(96px,10vw,140px)}.m2-fa .h1{font-size:clamp(44px,4.6vw,66px)}.m2-fa>.wrap>.hero-p{font:italic 400 clamp(26px,2.4vw,36px)/1.2 var(--font-accent);color:var(--ink);max-width:20ch}}
@media(max-width:899px){.m2-marta{bottom:3%}}

/* ===== Ronda 2 (28-oct): la familia de los posteos de marca 2 =====
   lino lila con sombra de ventana, tickets con muesca y rayita punteada, sellos de goma que golpean,
   números gigantes, nota tachada «Antes» contra ticket «Con Jupá», piezas de la app como objetos con sombra real. */
.m2-lino{position:relative;isolation:isolate;background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px 256px;background-blend-mode:multiply}
.m2-lino::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(m2/ventana.webp) 0 0/cover no-repeat;mix-blend-mode:multiply;opacity:.6;-webkit-mask:linear-gradient(180deg,#000 30%,transparent 85%);mask:linear-gradient(180deg,#000 30%,transparent 85%)}
.m2-lino .lk,.m2-lino .fx-kl,.m2-lino .k{color:var(--violet-deep)}
.m2-lino .fx-p,.m2-lino .fx-d span{color:var(--ink)}
.m2-lino em{color:var(--violet)}

/* ticket con muesca: la sombra va en el envoltorio (la máscara la cortaría) */
.m2-tkw{position:relative;filter:drop-shadow(1px 2px 1px rgba(35,26,46,.22)) drop-shadow(12px 18px 16px rgba(35,26,46,.18))}
.m2-tk{--m:13px;display:flex;align-items:stretch;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  -webkit-mask:radial-gradient(circle var(--m) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--m) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--m) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--m) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.m2-tk>div{flex:1 1 auto;display:grid;gap:6px;align-content:center;padding:16px 22px;min-width:0}
.m2-tk>div+div{background:linear-gradient(var(--lavender) 55%,transparent 0) 0 0/2px 10px repeat-y}
.m2-tk .k{margin:0;font:650 11px/1.1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.m2-tk .v{margin:0;font:500 clamp(20px,2.2vw,28px)/1 var(--font-display);text-transform:uppercase;color:var(--ink)}
.m2-tk .v small{font:500 14px/1 var(--font-body);text-transform:none;color:var(--muted)}
.m2-tk .s{margin:0;font-size:14px;line-height:1.35;color:var(--muted)}
.m2-tk .big{font:500 clamp(46px,6vw,78px)/.85 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.m2-tk .ok{color:var(--ok)}.m2-tk .no{color:var(--err)}
.m2-tk ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.m2-tk li{display:flex;gap:8px;font:600 15px/1.3 var(--font-body)}
.m2-tk li::before{content:"✓";color:var(--ok);font-weight:800}
.m2-mu{font:650 10.5px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-deep)}

/* sello de goma: tinta con huecos, borde doble, golpea al aparecer */
.m2-goma{--r:-9deg;display:inline-block;margin:0;padding:8px 13px 6px;border:3px solid currentColor;border-radius:8px;outline:1.5px solid currentColor;outline-offset:-7px;
  font:500 clamp(15px,1.6vw,21px)/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ok);white-space:nowrap;
  -webkit-mask:url(m2/tinta.png) 0 0/160px;mask:url(m2/tinta.png) 0 0/160px;transform:rotate(var(--r));pointer-events:none}
.m2-goma.rojo{color:var(--err)}.m2-goma.vio{color:var(--violet)}.m2-goma.cla{color:var(--lavender-deep)}
.m2-goma.abs{position:absolute;z-index:6}

/* números gigantes 01/02/03 */
.m2-num{display:block;font:500 clamp(76px,10vw,148px)/.78 var(--font-display);letter-spacing:-.01em;color:var(--violet)}
.dk .m2-num,.m2-noche .m2-num{color:var(--lavender-deep)}

/* nota tachada «Antes» contra ticket «Con Jupá» */
.m2-ac{position:relative;display:grid;gap:0;max-width:520px}
.m2-antes{position:relative;margin:0 0 -18px 18px;padding:22px 26px 30px;transform:rotate(-2.2deg);color:var(--violet-deep);
  background:repeating-linear-gradient(180deg,transparent 0 31px,rgba(205,184,236,.95) 31px 32px) 0 38px/100% calc(100% - 38px) no-repeat,var(--lilac-soft);box-shadow:var(--m2-sombra-chica)}
.m2-antes .k{margin:0 0 10px;font:650 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.m2-antes s{display:block;font:500 16px/32px var(--font-body);text-decoration-thickness:1.5px;text-decoration-color:var(--err);color:var(--violet-deep)}
.m2-antes .m2-cinta{top:-12px;height:22px;left:62%;width:26%;margin-left:0}
.m2-ac .m2-tkw{transform:rotate(1deg);margin-right:-6px}
.m2-ac .m2-goma.abs{right:18px;top:-14px;--r:-7deg}

/* pieza de la app reconstruida como objeto: papel, radio chico, sombra en capas, sale del plano */
.m2-obj{position:relative;background:var(--paper);border-radius:14px;box-shadow:0 1px 1px rgba(35,26,46,.12),0 2px 3px rgba(35,26,46,.1),12px 22px 30px -8px rgba(35,26,46,.28);color:var(--ink)}
.m2-obj.noc{background:var(--night);color:var(--paper)}

/* héroes de funciones: lino lila con escena propia */
.m2-lino:has(>.m2-luz)::before{display:none}
.fh.m2-lino{color:var(--ink)}
.fh.m2-lino::before{display:none}
.fh.m2-lino .lk-l{color:var(--violet-deep)}
.fh.m2-lino .fh-h em{color:var(--violet)}
.fh.m2-lino .fh-p{color:var(--ink)}
.m2-esc{container-type:inline-size}
.m2-esc>*{position:absolute}
.m2-esc .m2-cred{position:absolute;left:10px;right:auto;bottom:8px;padding:0;background:none;color:var(--muted);font-size:11px}
.m2-esc .m2-print{padding:9px 9px 28px}
.m2-esc .m2-print img{display:block;width:100%;height:auto}
.m2-esc .m2-tk .v{font-size:clamp(18px,4.4cqw,30px)}
.m2-esc-mu{right:2%;bottom:-2%;margin:0}
.m2-esc .m2-tkw{z-index:5}
@media (prefers-reduced-motion:no-preference){
  .m2-esc>.m2-print,.m2-esc>.m2-obj,.m2-esc>.m2-tkw,.m2-esc>.esc-hoja{animation:m2-cae .5s var(--m2-pegar) both}
  .m2-esc>:nth-child(2){animation-delay:.12s}.m2-esc>:nth-child(3){animation-delay:.24s}.m2-esc>:nth-child(4){animation-delay:.42s}
}
@keyframes m2-cae{from{opacity:0;translate:0 -18px;scale:1.04}to{opacity:1;translate:0 0;scale:1}}

/* confirmaciones: la lista como objeto, el ticket de la familia y la nota de la tía Marta */
.esc-lista{left:4%;top:4%;width:74%;padding:5cqw 5cqw 4cqw;transform:rotate(-1.5deg);font-size:clamp(13px,2.6cqw,17px)}
.esc-lh{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 3cqw}
.esc-lh>b{font:500 clamp(20px,4.6cqw,32px)/1 var(--font-display);text-transform:uppercase}
.esc-lh span{color:var(--muted)}.esc-lh span b{font:700 clamp(20px,4.6cqw,30px)/1 var(--font-body);color:var(--violet-deep)}
.esc-bar{height:7px;border-radius:4px;background:var(--line);margin:0 0 2cqw}.esc-bar i{display:block;height:100%;width:90%;border-radius:4px;background:var(--violet)}
.esc-lista ul{list-style:none;margin:0;padding:0}
.esc-lista li{display:grid;grid-template-columns:1fr auto 2.2em;gap:10px;align-items:center;padding:1.6cqw 0;border-bottom:1px dashed var(--lavender)}
.esc-lista li em{font-style:normal;font-weight:650;font-size:.85em;padding:3px 9px;border-radius:20px}
.esc-lista li em.ok{color:var(--ok);background:var(--lime)}.esc-lista li em.pe{color:var(--ink);background:var(--pending)}.esc-lista li em.no{color:var(--err);background:var(--line)}
.esc-lista li b{text-align:right}
.m2-esc-conf .esc-tk{right:0;top:52%;width:66%;transform:rotate(2.5deg)}
.m2-esc-conf .esc-tk .m2-goma{right:30%;top:-16px}
.m2-esc-conf .m2-marta{left:3%;bottom:2%;top:auto;right:auto}
/* mesas */
.esc-plan{left:2%;top:2%;width:80%;transform:rotate(-2deg)}
.esc-pie{position:absolute;left:12px;bottom:7px;font:600 12px/1 var(--font-body);color:var(--muted)}
.m2-esc-mes .esc-tk{right:0;top:56%;width:70%;transform:rotate(1.8deg)}
.m2-esc-mes .esc-tk .m2-goma{right:12%;top:-18px}
.esc-nota{left:6%;bottom:2%;padding:16px 22px;transform:rotate(-3deg);display:grid;gap:4px}
.esc-nota .k{margin:0;font:650 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.esc-cm{margin:0;font:500 clamp(34px,7cqw,52px)/1 var(--font-display)}
.esc-nota .s{margin:0;color:var(--muted);font-size:14px}
/* el gran día: copias de la fiesta, la cámara y el ticket del rollo */
.m2-esc-gd .esc-p1{left:0;top:6%;width:46%;transform:rotate(-5deg);z-index:1}
.m2-esc-gd .esc-p2{left:22%;top:38%;width:44%;transform:rotate(4deg);z-index:2}
.m2-esc-gd .esc-cam{right:2%;top:0;width:var(--ph);z-index:3}
.m2-esc-gd .esc-cam .gd-ph,.m2-esc-gd .esc-cam>*{width:100%}
.m2-esc-gd .esc-tk{left:4%;bottom:2%;width:64%;transform:rotate(-1.5deg)}
.m2-esc-gd .esc-tk .m2-goma{right:8%;top:-18px}
/* la invitación: la tarjeta con su arco en golpe seco, el lacre y el ticket de la familia */
.esc-hoja{left:2%;top:6%;width:58%;aspect-ratio:3/4;padding:5%;background:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;box-shadow:var(--m2-sombra);transform:rotate(-3deg);z-index:2}
.esc-arco{height:100%;display:grid;align-content:center;justify-items:center;text-align:center;gap:2.4cqw;padding:18% 8% 10%;border-radius:999px 999px 6px 6px;box-shadow:inset 2px 2px 3px rgba(35,26,46,.16),inset -2px -2px 2px #fff,2px 2px 3px rgba(35,26,46,.1),-1px -1px 1px #fff}
.esc-arco .k{margin:0;font:650 10px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--violet)}
.esc-nom{margin:0;font:500 clamp(22px,5.4cqw,40px)/1 var(--font-display);text-transform:uppercase}
.esc-nom em{display:block;font:italic 400 1.1em/1 var(--font-accent);text-transform:none;color:var(--violet)}
.esc-arco .s{margin:0;font-size:clamp(11px,2cqw,13px);color:var(--muted)}
.esc-lacre{position:absolute;right:-7%;top:-5%;width:22%;height:auto;filter:drop-shadow(2px 4px 4px rgba(35,26,46,.35))}
.m2-esc-inv .esc-ph{right:4%;top:2%;width:var(--ph);transform:rotate(5deg);z-index:1}
.m2-esc-inv .esc-tk{right:0;bottom:4%;width:66%;transform:rotate(-2deg)}
.m2-esc-inv .esc-tk .m2-goma{right:10%;top:-18px}
@media(max-width:899px){
  .esc-lista{width:84%}.m2-esc-conf .esc-tk{width:80%;top:50%}.m2-esc-conf .m2-marta{bottom:0}
  .esc-plan{width:92%}.m2-esc-mes .esc-tk{width:82%}
  .m2-esc-gd .esc-p1{width:52%}.m2-esc-gd .esc-p2{width:50%;top:34%}.m2-esc-gd .esc-tk{width:84%}
  .esc-hoja{width:64%}.m2-esc-inv .esc-tk{width:84%}
}
.m2-esc-conf .esc-tk .m2-goma{right:-3%;left:auto;top:-24px;--r:-6deg}
.m2-esc-gd .esc-tk .m2-goma{left:-4%;right:auto;top:-26px;--r:-10deg}
.m2-esc-gd .m2-esc-mu{right:auto;left:0;bottom:-6%}
@media(max-width:899px){.m2-esc-gd .esc-cam{width:36cqw;top:4%}.m2-esc-gd .esc-p1{top:10%}.m2-esc-gd .esc-tk{bottom:-2%}}

/* funciones, pasos: número gigante, sello sobre la maqueta, fondos que alternan papel / lino / noche */
.fx.m2-sec{background-color:var(--paper)}
.fx-dk.m2-noche{background-color:var(--night)}
.fx .fx-k{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:14px;row-gap:8px}
.fx .fx-n{grid-row:1/3;font:500 clamp(84px,9vw,136px)/.76 var(--font-display);font-style:normal;letter-spacing:-.01em;color:var(--violet)}
.fx-dk .fx-n{color:var(--lavender-deep)}
.fx .fx-kl{align-self:end;padding-bottom:4px}
.fx .fx-badge{justify-self:start}
.fx-goma{right:4%;top:-14px;--r:-8deg;font-size:clamp(16px,1.7vw,22px)}
.fx-flip .fx-goma{right:auto;left:4%;--r:7deg}
.fx-dk .fx-goma{color:var(--lavender-deep)}
.fx-t .m2-ac{margin-top:26px}
.fx-dk .m2-antes s{color:var(--violet-deep)}
@media(max-width:899px){.fx-goma{top:-18px;right:2%}.fx-flip .fx-goma{left:2%}}
.fx-goma{top:-40px}
@media(max-width:899px){.fx-goma{top:-34px}}
/* «Cómo se usa»: los pasos como tickets apilados, cada uno levemente girado */
.fi{background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px;background-blend-mode:multiply}
.fi .fi-l{border:0;display:grid;gap:10px}
.fi .fi-l li{filter:drop-shadow(1px 2px 1px rgba(35,26,46,.2)) drop-shadow(8px 12px 12px rgba(35,26,46,.14))}
.fi .fi-l li:nth-child(odd){transform:rotate(-.8deg)}.fi .fi-l li:nth-child(even){transform:rotate(.7deg) translateX(10px)}
.fi .fi-l a{grid-template-columns:62px minmax(0,1fr) 22px;padding:14px 26px 14px 24px;border:0;background:var(--paper);
  -webkit-mask:radial-gradient(circle 10px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 10px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.fi .fi-l a:hover{padding-left:24px;background:#fff}
.fi .fi-n{grid-row:1/3;align-self:stretch;display:flex;align-items:center;font:500 34px/1 var(--font-display);font-style:normal;color:var(--violet);border-right:2px dashed var(--lavender);margin-right:8px}

/* portada: héroe sobre lino lila; pasos con números gigantes sobre tableros de lino */
.m2h.m2-lino{background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px 256px;background-blend-mode:multiply}
.lp .ps-v{background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px;background-blend-mode:multiply;border-radius:4px;overflow:visible}
.lp .ps-n{font:500 clamp(64px,6vw,96px)/.78 var(--font-display);font-style:normal;color:var(--lavender-deep)}
.lp .ps-t{align-items:end}
.lp .sc .m2-goma{position:absolute}
.lp-st .m2-ac{margin-top:30px}
/* Cómo empezar en compus bajas (Mati 29-oct, 1280x690: la tarjeta «Antes / Con Jupá» quedaba cortada y la pastilla «Siguiente» encima):
   la columna fija se compacta para entrar ENTERA entre la barra y la pastilla; l.js (lpPin) además baja el punto donde se traba si
   igual no entra (top = alto visible − alto de la columna − lugar de la pastilla). En celular no cambia nada (ahí no es fija). */
@media(min-width:900px){.lp-st{top:var(--lp-top,120px)}}
@media(min-width:900px) and (max-height:960px){
  .lp-st{gap:14px}
  .lp-st h2{font-size:min(5.6vw,9.6vh,96px)}
  .lp-st .lp-p{margin:0}
  .lp-st .m2-ac{margin-top:10px;zoom:.86}
}
@media(min-width:900px) and (max-height:720px){.lp-st .trust{display:none}.lp-st .m2-ac{zoom:.8}}
.lp-st .m2-antes s,.lp-st .m2-antes .k{color:var(--violet-deep)}
.lp-st .m2-antes .k{color:var(--ink)}
.lh-tk{display:inline-block;transform:rotate(-1.2deg);margin-top:6px}
.lh-tk .m2-tk{--m:10px;list-style:none;margin:0;padding:0;gap:0}
.lh-tk .m2-tk li{display:flex;align-items:center;gap:7px;padding:14px 20px;margin:0;font:600 14.5px/1.2 var(--font-body);color:var(--ink)}
.lh-tk .m2-tk li+li{background:linear-gradient(var(--lavender) 55%,transparent 0) 0 0/2px 10px repeat-y}
.lh-tk .m2-tk li:first-child{padding-left:24px}.lh-tk .m2-tk li:last-child{padding-right:24px}
.lh-tk svg{color:var(--ok);width:15px;height:15px;flex:none}
@media(max-width:520px){.lh-tk .m2-tk li{padding:12px 10px;font-size:12.5px}.lh-tk .m2-tk li:first-child{padding-left:16px}.lh-tk .m2-tk li:last-child{padding-right:16px}}
.lh-tk .m2-tk li::before{content:none}
@media(max-width:520px){.lh-tk{display:block;max-width:300px}.lh-tk .m2-tk{flex-direction:column}.lh-tk .m2-tk li,.lh-tk .m2-tk li:first-child,.lh-tk .m2-tk li:last-child{padding:9px 22px;font-size:13.5px}
 .lh-tk .m2-tk li+li{background:linear-gradient(90deg,var(--lavender) 55%,transparent 0) 0 0/10px 2px repeat-x}}

/* organizadores */
.og-lf .lf-n{display:block;font:500 clamp(70px,7vw,112px)/.78 var(--font-display);font-style:normal;opacity:1;color:var(--violet);margin:0 0 10px}
.og-lf.dk .lf-n{color:var(--lavender-deep)}
.og-lf.m2-sec{background-color:var(--paper)}
.og-goma{right:6%;top:4%;--r:-8deg;font-size:clamp(18px,1.9vw,26px)}
.og-lf.dk .og-goma{color:var(--lavender-deep)}
.ocs .occ{border-radius:3px;padding:9px 9px 0;background:var(--paper);color:var(--ink);overflow:visible;box-shadow:var(--m2-sombra)}
.ocs .occ figure{border-radius:2px;overflow:hidden}
.ocs .occ:nth-child(odd){transform:rotate(-1.6deg)}.ocs .occ:nth-child(even){transform:rotate(1.4deg) translateY(14px)}
.ocs .occ::before{content:"";position:absolute;z-index:3;left:50%;top:-12px;width:36%;height:24px;margin-left:-18%;background:rgba(232,220,247,.85);box-shadow:0 1px 2px rgba(35,26,46,.12);transform:rotate(-3deg)}
.otalk-c{position:relative;border-radius:3px;background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;color:var(--ink);box-shadow:var(--m2-sombra);transform:rotate(1.2deg)}
.otalk-cp,.otalk-n{color:var(--muted)!important}
.otalk-c .btn-l{background:var(--violet);color:#fff}
.otalk-ck{padding-right:40px}
.otalk-lacre{position:absolute;right:-26px;top:-26px;width:84px;height:auto;filter:drop-shadow(2px 4px 4px rgba(35,26,46,.35));--r:8deg}
.osoon li{border:0;border-radius:0;background:var(--paper);-webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 11px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.osoon ul{filter:drop-shadow(1px 2px 1px rgba(35,26,46,.2)) drop-shadow(10px 14px 14px rgba(35,26,46,.15))}
.osoon li:first-child{transform:rotate(-1deg)}.osoon li:last-child{transform:rotate(1deg)}
.ocs.m2-noche{color:var(--paper)}.ocs.m2-noche .ocs-p{color:rgba(251,250,252,.78)}.ocs.m2-noche .lk{color:var(--lavender)}.ocs.m2-noche .ocs-t em{color:var(--lavender-deep)}
.ocs .occ .occ-t b{color:var(--ink)}
.og-tkh{position:absolute;z-index:8;left:-6%;bottom:6%;width:min(440px,78%);transform:rotate(-2.5deg)}
.og-tkh .m2-goma{right:-4%;top:-22px}
.og-tkh .m2-tk>div{padding:12px 16px}
@media(max-width:899px){.og-tkh{left:2%;bottom:-4%;width:92%}}
.ocs .occ .occ-t b{color:inherit}
.og-goma{top:auto;right:auto;left:0;bottom:8%;--r:-10deg}
@media(max-width:899px){.og-goma{bottom:auto;top:0;left:auto;right:4%}.og-lys .og-goma{top:16px;right:8%}}

/* proveedores */
.vp-goma{right:4%;top:58%;--r:-9deg;font-size:clamp(17px,1.8vw,24px)}
.vp-dt-l{position:relative}
.vp-goma2{right:-2%;top:-20px;--r:6deg}
.vp-dl{border-radius:4px;box-shadow:var(--m2-sombra)}
.vp-dl-s{background-color:var(--lilac-soft);transform:rotate(-.8deg)}
.vp-ap .vp-ts{gap:18px;filter:drop-shadow(1px 2px 1px rgba(35,26,46,.2)) drop-shadow(12px 16px 16px rgba(35,26,46,.14))}
.vp-ap .vp-t{position:relative;border:0;padding:30px clamp(22px,2.4vw,34px) 28px;background:var(--paper);
  -webkit-mask:radial-gradient(circle 13px at 50% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 50% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at 50% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 50% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.vp-ap .vp-t:nth-child(1){transform:rotate(-1.2deg)}.vp-ap .vp-t:nth-child(2){transform:rotate(.8deg) translateY(16px)}.vp-ap .vp-t:nth-child(3){transform:rotate(-.6deg)}
.vp-ap .vp-t-soon{background:var(--lilac-soft)}
.vp-ap .vp-soon{background:none;color:var(--violet);border:2.5px solid currentColor;outline:1.2px solid currentColor;outline-offset:-6px;border-radius:7px;padding:7px 11px 5px;font:500 13px/1 var(--font-display);letter-spacing:.12em;transform:rotate(-7deg);-webkit-mask:url(m2/tinta.png) 0 0/160px;mask:url(m2/tinta.png) 0 0/160px}
.vp-ap .vp-price{border-radius:4px}
@media(max-width:899px){.vp-ap .vp-t:nth-child(2){transform:rotate(.8deg)}}
.vp-h .lh-tk{display:block;max-width:330px}.vp-h .lh-tk .m2-tk{flex-direction:column}
.vp-h .lh-tk .m2-tk li,.vp-h .lh-tk .m2-tk li:first-child,.vp-h .lh-tk .m2-tk li:last-child{padding:9px 24px}
.vp-h .lh-tk .m2-tk li+li{background:linear-gradient(90deg,var(--lavender) 55%,transparent 0) 0 0/10px 2px repeat-x}
.vp-goma{top:auto;bottom:30%;right:-1%}
@media(max-width:899px){.vp-goma{bottom:auto;top:3%;left:0;right:auto;--r:-12deg}}

/* la invitación: diseños con número gigante por categoría y copias con cinta; personalizar sobre lino con sello */
.dz{counter-reset:dzc}
.dz-cat{counter-increment:dzc}
.dz-ch::before{content:counter(dzc,decimal-leading-zero);display:block;font:500 clamp(60px,6vw,96px)/.8 var(--font-display);color:var(--violet);margin-bottom:6px}
.pz-v{position:relative}
.pz-goma{right:2%;top:-24px;--r:-8deg}
/* fiestas y bar/bat: sellos sobre las pantallas, fondos que alternan */
.fi-s.m2-sec{background-color:var(--paper)}
.fi-v{position:relative}
.fi-goma{right:4%;top:-26px;--r:-8deg}
.fi-pls-l li{position:relative}
/* «Qué incluye» (la invitación): tickets apilados */
.specs .spl{gap:14px}
.specs .spl li{background:var(--paper);padding:20px 26px 22px 22px;border:0;filter:none;
  -webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.specs .spl{filter:drop-shadow(1px 2px 1px rgba(35,26,46,.2)) drop-shadow(10px 14px 14px rgba(35,26,46,.14))}
.specs .spl-n{border-right:2px dashed var(--lavender);padding-right:14px;align-self:stretch;display:flex;align-items:center}
.specs{background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px;background-blend-mode:multiply}

/* planes: precios sobre lino, la comparación como hoja impresa con su sello; preguntas: el segundo bloque sobre lino */
.fhero+.pricing{background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px;background-blend-mode:multiply}
.cmp .wrap{position:relative}
.cmp .tbl{border-radius:4px;background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;box-shadow:var(--m2-sombra)}
.cmp td,.cmp th{border-bottom:1px dashed var(--lavender)!important}
.cmp .sec-h::after{content:"Precio final";display:inline-block;margin-left:18px;vertical-align:middle;padding:7px 12px 5px;border:3px solid currentColor;border-radius:8px;outline:1.5px solid currentColor;outline-offset:-7px;
  font:500 16px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ok);transform:rotate(-6deg);-webkit-mask:url(m2/tinta.png) 0 0/160px;mask:url(m2/tinta.png) 0 0/160px}
.faq-2{background-color:var(--lilac);background-image:url(m2/lino.webp);background-size:256px;background-blend-mode:multiply}

/* guías: la nota como papel con cinta, el cierre como ticket de noche con grano y lacre */
.gnote{position:relative;border-radius:2px!important;background-color:var(--lilac-soft)!important;box-shadow:var(--m2-sombra-chica);transform:rotate(-.6deg)}
.gnote::before{content:"";position:absolute;left:50%;top:-11px;width:28%;height:22px;margin-left:-14%;background:rgba(205,184,236,.85);transform:rotate(-3deg)}
.gcta{position:relative;border-radius:4px!important;background-color:var(--night)!important;background-image:url(m2/grano-n.webp);background-size:220px;background-blend-mode:multiply;box-shadow:var(--m2-sombra)}
.gcta::after{content:"";position:absolute;right:10px;top:-26px;width:70px;height:70px;background:url(m2/lacre.webp) center/contain no-repeat;filter:drop-shadow(2px 4px 4px rgba(0,0,0,.4));transform:rotate(10deg)}

/* ——— Ronda 2b · «más disruptivo» (Mati TG 3542): romper la grilla ———
   Palabra gigante del tema que corta el borde (tono sobre tono, detrás del contenido), recortes de papel con cinta que cruzan
   de una sección a la otra, y las pilas de bloques iguales desparejadas a propósito (corridas, giradas, encimadas). */
.m2-rompe{position:relative;isolation:isolate;overflow-x:clip}
.m2-giga{position:absolute;z-index:-1;pointer-events:none;user-select:none;white-space:nowrap;font:500 clamp(130px,27vw,440px)/.78 var(--font-display);text-transform:uppercase;letter-spacing:-.02em;color:var(--lilac);top:-.06em}
.m2-giga-der{right:-.14em;transform:rotate(-3deg);transform-origin:100% 0}
.m2-giga-izq{left:-.12em;top:auto;bottom:-.1em;transform:rotate(2deg);transform-origin:0 100%}
.m2-lino>.m2-giga{color:rgba(251,250,252,.62)}
.dk>.m2-giga{color:transparent;-webkit-text-stroke:1.5px rgba(185,155,224,.30)}
.m2-sec>.m2-giga,.m2-rompe:not(.m2-lino):not(.dk)>.m2-giga{color:var(--lilac)}
/* un recorte de papel con cinta, mitad en la sección de arriba y mitad en esta */
.m2-recorte{position:absolute;z-index:4;top:0;width:clamp(76px,7.5vw,118px);aspect-ratio:4/3;pointer-events:none;background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;box-shadow:0 1px 1px rgba(35,26,46,.12),0 14px 30px -12px rgba(35,26,46,.4);clip-path:polygon(0 4%,9% 0,22% 3%,37% 0,52% 2%,68% 0,83% 3%,100% 0,98% 30%,100% 58%,97% 82%,100% 100%,78% 97%,61% 100%,44% 96%,27% 100%,12% 97%,0 100%,2% 70%,0 44%)}
.m2-recorte i{position:absolute;inset:16% 14%;border:1.5px dashed var(--lavender);border-radius:3px}
.m2-recorte::after{content:"";position:absolute;width:64%;height:22%;left:18%;top:-9%;background:rgba(232,220,247,.82);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(35,26,46,.12)}
.m2-recorte-a{right:-18px;transform:translateY(-55%) rotate(7deg)}
.m2-recorte-b{left:-14px;transform:translateY(-50%) rotate(-8deg);aspect-ratio:3/4;width:clamp(60px,6vw,96px)}
.m2-recorte-b i{border-color:var(--lavender-deep);border-style:solid;border-width:0 0 1.5px;inset:auto 14% 22%}
.dk>.m2-recorte{background-color:var(--lilac)}
@media(max-width:899px){.m2-recorte-a{right:-22px;width:72px}.m2-recorte-b{left:-18px;width:54px}.m2-giga{font-size:clamp(120px,40vw,220px)}}
@media(prefers-reduced-motion:no-preference){.m2-giga{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}}

/* pilas desparejas: los pasos de «Cómo se usa» en zigzag */
.fi-l>li{transition:transform .25s}
.fi-l>li:nth-child(odd){margin-right:9%;transform:rotate(-.8deg)}
.fi-l>li:nth-child(even){margin-left:9%;transform:rotate(.9deg)}
.fi-l>li:nth-child(3n){margin-left:3%;transform:rotate(-.3deg)}
/* «Y además»: tarjetas de distinto ancho, giradas y encimadas como papeles sobre la mesa */
.ocards .ocard{background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;box-shadow:0 1px 1px rgba(35,26,46,.1),0 18px 34px -16px rgba(35,26,46,.38);border:0}
@media(min-width:900px){
  .ocards{align-items:start}
  .ocards .ocard:nth-child(1){transform:rotate(-2.2deg) translateY(18px)}
  .ocards .ocard:nth-child(2){transform:rotate(1.4deg) translateY(-26px);z-index:2;margin-left:-22px;margin-right:-22px}
  .ocards .ocard:nth-child(3){transform:rotate(3deg) translateY(30px)}
  .hire-p .hp:nth-child(1){transform:rotate(-2.5deg) translateX(14px)}
  .hire-p .hp:nth-child(2){transform:scale(1.06);z-index:2}
  .hire-p .hp:nth-child(3){transform:rotate(2.2deg) translateX(-14px)}
  .plans .plan:nth-child(1){transform:rotate(-1.4deg) translateY(22px)}
  .plans .plan:nth-child(2){z-index:2;transform:translateY(-14px)}
  .plans .plan:nth-child(3){transform:rotate(1.6deg) translateY(30px)}
  /* títulos de sección más grandes y colgados del margen */
  .m2-rompe .sec-h h2,.m2-rompe .fi-h,.m2-rompe .lf-h{font-size:clamp(46px,5.4vw,92px);line-height:.9}
  .m2-r-izq .sec-h{margin-left:-2vw}
}
@media(max-width:899px){
  .ocards .ocard:nth-child(odd){margin-right:8%;transform:rotate(-1.2deg)}
  .ocards .ocard:nth-child(even){margin-left:8%;transform:rotate(1.4deg)}
  .hire-p .hp:nth-child(1){margin-right:6%;transform:rotate(-1.2deg)}
  .hire-p .hp:nth-child(3){margin-left:6%;transform:rotate(1.2deg)}
}
/* héroe: una palabra enorme abajo, detrás de la escena, que se corta en el borde y en la sección de abajo */
.m2-giga-hero{top:auto;bottom:-.2em;right:-.06em;font-size:clamp(220px,34vw,600px);transform:rotate(-4deg);transform-origin:100% 100%}
.m2-r-hero:not(.m2-lino):not(.dk)>.m2-giga{color:var(--lilac)}
.dk>.m2-giga{-webkit-text-stroke:2px rgba(185,155,224,.42)}
@media(max-width:899px){.m2-giga-hero{font-size:clamp(150px,52vw,280px);bottom:-.16em}}
/* las que ya recortaban con overflow:hidden: clip en los dos ejes (hidden+clip las volvía caja con scroll y un salto a su título la corría) */
.m2-rompe.fh,.m2-rompe.fhero,.m2-rompe.v4g,.m2-rompe.v4r,.m2-rompe.pz{overflow:clip}

/* ——— BOCETO héroe de la portada (solo index, espera el sí de Mati): titular enorme de borde a borde, la palabra rotativa
   en una tira de papel con cinta, la escena encimada sobre el título y el resto del titular chico para que el salto de escala mande ——— */
.m2-bh .lh-h{position:relative;z-index:1;letter-spacing:-.025em}
.m2-bh .lh-h .ln:first-child>span{display:block}
.m2-bh .rot-ev{position:relative;display:grid;width:max-content;font-size:.8em;line-height:1;margin:.1em 0 0 .18em;padding:.1em .3em .04em;color:var(--violet-deep);background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;transform:rotate(-2.6deg);box-shadow:0 1px 1px rgba(35,26,46,.14),0 3px 6px rgba(35,26,46,.1),14px 24px 40px -14px rgba(35,26,46,.45)}
.m2-bh .rot-ev::before{content:"";position:absolute;left:-.25em;top:-.12em;width:1.2em;height:.32em;background:rgba(205,184,236,.85);transform:rotate(-24deg);box-shadow:0 1px 2px rgba(35,26,46,.12)}
.m2-bh .rot-ev::after{content:"";position:absolute;right:-.2em;bottom:-.1em;width:1em;height:.3em;background:rgba(205,184,236,.85);transform:rotate(-18deg)}
.m2-bh .ln-2{display:block;font-size:.4em;margin:.55em 0 0 .1em}
.m2-bh .m2-giga-hero{display:none}
@media(min-width:900px){
  .m2-bh .lh-h{font-size:min(12.6vw,19.5vh);line-height:.8;margin:1vh -1vw 0 -.8vw}
  .m2-bh .rot-ev{font-size:.7em}
  .m2-bh .ln-2{font-size:.3em;margin-top:.7em}
  .m2-bh .lh-v{grid-row:2/4;position:relative;z-index:2;margin-top:min(7.5vw,12.5vh)}
  .m2-bh .lh-t{margin-top:clamp(20px,3vh,36px)}
  .m2-bh .hx-arch{translate:-3vw -1vh;scale:.84;rotate:5deg;z-index:3}
  .m2-bh .hx-lacre{translate:calc(-3vw - 22px) 0;scale:.84;z-index:4}
  .m2-bh .hx-arch .m2-cred{top:calc(16 * var(--u));bottom:auto;left:calc(14 * var(--u));right:auto;padding:3px 7px 2px;background:rgba(20,14,28,.62);color:var(--paper);border-radius:2px;z-index:3}
}
@media(max-width:899px){
  .m2-bh .lh-h{font-size:clamp(44px,16vw,92px);line-height:.84;margin-left:-.05em;margin-right:-.12em}
  .m2-bh .rot-ev{font-size:.72em}
  .m2-bh .ln-2{font-size:.42em}
  .m2-bh .lh-v{position:relative;z-index:2;margin-top:-6px}
  /* el ticket va después de los botones: «Empezar ahora» entra en la primera pantalla */
  .m2-bh .lh-t{display:flex;flex-direction:column}
  .m2-bh .lh-t>.lh-p{order:1}.m2-bh .lh-t>.lh-c{order:2}.m2-bh .lh-t>.lh-tk{order:3;align-self:flex-start}.m2-bh .lh-t>.lh-sw{order:4}
}

/* ——— ojo (28-oct): contraste AA y escala ———
   El gris de apoyo (#686270) sobre el lino lila daba 4,49:1 medido contra el lila liso (y menos con la trama encima): sobre lila va más oscuro */
.m2-lino,section.fi,.sec.pricing{--muted:color-mix(in srgb,var(--ink) 84%,var(--lilac))}
:is(.m2-lino,section.fi,.sec.pricing):not(.dk) :is(.pz-p,.pz-fine,.pz small,.fi-t p,.plans-n,.plans-n a,.lnk-arr,.lf-p,.lf-s b,.lf-s span,.lh-p,.so-av>span,.vp-alt,.vp-lead,.fi-p,.lh-tk span){color:color-mix(in srgb,var(--ink) 84%,var(--lilac))}
/* sellos verdes sobre la noche: 2,9:1 → verde claro de la paleta */
.dk .m2-goma:not(.rojo):not(.vio):not(.cla){color:var(--lime)}
/* «sin comisión.» en violeta sobre la noche: 2,98:1 → lavanda */
.dk .vp-pk em,.vp-price .vp-pk em{color:var(--lavender)}
/* índice de la portada: los títulos sin elegir en gris #8d8496 (3,4:1) → gris de apoyo de la paleta */
.v4t-b{color:var(--muted)}
/* organizadores: la hoja de «Contactá a soporte» ahora es papel claro y su botón contorno quedaba blanco sobre blanco */
.otalk-c .btn-o{color:var(--violet-deep);border-color:var(--lavender-deep);background:transparent}
.otalk-c .btn-o:hover{background:var(--lilac-soft)}
/* héroes de funciones: titular ≥5× el cuerpo en compu (medía 78 px contra 19, 4,1×) */
@media(min-width:900px){.fh .fh-h{font-size:min(6.9vw,13.4vh,110px)}}
/* «Ejemplo» en la ficha de muestra de proveedores: medía 8 px en el celular y llevaba vidrio (sin vidrio en la web): legible y opaco */
.vp-ex{font-size:max(11px,calc(11 * var(--u)));background:var(--night);-webkit-backdrop-filter:none;backdrop-filter:none}
/* sin vidrio: los controles del video de la portada y las etiquetas sueltas, opacos */
.dv-b{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(35,26,46,.86)}
.tag{-webkit-backdrop-filter:none;backdrop-filter:none}
/* héroes cortos (planes, preguntas, contacto): la palabra gigante quedaba cortada a la mitad y se leía como manchas lilas detrás del texto */
.fhero>.m2-giga-hero{display:none}

/* ——— Héroes con el lenguaje de la portada (aprobado 28-oct, 4f665fa): titular Nura grande y la palabra en cursiva
   sobre una tira de papel con cinta; un sello con un dato que la página ya dice. La frase que rota (organizadores y
   proveedores) no se toca por dentro: la tira envuelve al rotador entero, como en la portada. ——— */
.m2-bh2 :is(.fh-h em,.h1-s em,.fi-hh em),.m2-bh2 .rp em,.ghero h1 em,.pv-head h1 em{position:relative;display:inline-block;width:max-content;max-width:100%;padding:.08em .26em .02em;color:var(--violet-deep);text-shadow:none;background-color:var(--paper);background-image:var(--m2-grano);background-size:220px;background-blend-mode:multiply;transform:rotate(-2deg);box-shadow:0 1px 1px rgba(35,26,46,.14),0 3px 6px rgba(35,26,46,.1),12px 20px 34px -14px rgba(35,26,46,.42)}
.m2-bh2 :is(.fh-h em,.h1-s em,.fi-hh em)::before,.m2-bh2 .rp em::before,.ghero h1 em::before,.pv-head h1 em::before{content:"";position:absolute;left:-.18em;top:-.1em;width:.9em;height:.26em;background:rgba(205,184,236,.85);transform:rotate(-22deg);box-shadow:0 1px 2px rgba(35,26,46,.12);pointer-events:none}
.m2-bh2 :is(.fh-h em,.h1-s em,.fi-hh em)::after,.m2-bh2 .rp em::after,.ghero h1 em::after,.pv-head h1 em::after{content:"";position:absolute;right:-.14em;bottom:-.08em;width:.8em;height:.24em;background:rgba(205,184,236,.85);transform:rotate(-16deg);pointer-events:none}
.m2-bh2 .fh-h em{display:table;width:auto;margin-top:.14em}
.m2-bh2 .rp em{margin:0 .08em;padding:.04em .22em 0;transform:rotate(-2.4deg)}
.m2-bh2 .h1-s em{margin-top:.1em}
/* sello del héroe */
.hero-sello{position:absolute;z-index:3;font-size:clamp(15px,1.5vw,20px);--r:-9deg;right:9%;top:clamp(96px,16vh,150px)}
/* contacto: el texto va arriba a la derecha; el sello baja junto a los botones */
.m2-fa-c .hero-sello{top:clamp(110px,20vh,190px);bottom:auto;right:auto;left:5%}
@media(max-width:899px){.hero-sello{right:16px;top:124px;bottom:auto;font-size:13px}.m2-fa .hero-sello:not(.m2-fa-c *){top:auto;bottom:18px}}
@media(min-width:900px){
  /* titulares más grandes: la primera línea manda */
  .m2-bh2.lh2 .lh-h{font-size:min(7.1vw,12.6vh)}
  .m2-bh2.lh2 .lh-h .rps{font-size:.74em;margin-top:.12em}
  .m2-bh2.fi-h .fi-hh{font-size:min(5.6vw,10.4vh)}
  .m2-bh2 .h1-s:not([data-arco-fit]){font-size:min(7vw,12.4vh,112px);line-height:.92}
}
@media(max-width:899px){
  .m2-bh2.lh2 .lh-h{font-size:clamp(34px,11vw,46px)}
  .m2-bh2 .h1-s:not([data-arco-fit]){font-size:clamp(36px,12vw,52px);line-height:.94}
}
/* organizadores: el número gigante va en la fila de su etiqueta, centrado (tenía 10 px abajo y quedaba 5 px corrido) */
.og-lf .lf-t>.lk{align-items:center}.og-lf .lf-n{margin:0 6px 0 0}
/* portada (boceto aprobado): en compu el ticket quedaba 64 px debajo del borde del héroe (recortado). El titular baja un poco
   y se ajustan los aires para que todo entre en la primera pantalla, ticket incluido */
@media(min-width:900px){
  .m2-bh .lh-h{font-size:min(12.6vw,16.6vh)}
  .m2-bh .lh2 .lh-t,.lh2.m2-bh .lh-t{margin-top:clamp(12px,1.8vh,22px);gap:clamp(14px,2.3vh,24px)}
  .m2-bh .lh-tk{margin-top:0}
  .m2-bh .lh-tk .m2-tk li{padding:11px 16px;font-size:13.5px}
}

/* organizadores: el ticket del héroe quedaba recortado por el borde y debajo de «Bajá para ver»; sube (el sello ¡Hoy! se fue: ya está dos veces en la maqueta) */
@media(min-width:900px){.og-tkh{bottom:15%;left:-4%}}
@media(min-width:900px) and (max-height:820px){.og-tkh{bottom:23%}}
/* la nota «Solo la ves vos» chocaba con el aviso «Bajá para ver» y con el ticket; en compu ya la cuenta su sección («Solo tuya») */
@media(min-width:900px){.m2-bh2 .ox-n1{display:none}}
/* proveedores celular: el sello «Revisada» tapaba el «50 km»; va a la esquina vacía de la derecha */
@media(max-width:899px){.vp-goma{left:auto;right:0;top:4%}}

/* ——— portada (Mati 29-oct): la fila de cifras y «Trabajan con Jupá» se leían chicas y los números en blanco/lila no contrastaban
   (venían del héroe oscuro). Texto 17 px en tinta, números en violeta (4,7:1 sobre lila; AA). Al final, «N proveedores verificados»
   que pone el Worker con el conteo en vivo (provCount). */
.m2h .lh-sw{gap:16px 32px}
.m2h .lh-s{gap:6px 22px;font:500 17px/1.25 var(--font-body);color:var(--ink)}
.m2h .lh-s span{gap:8px;white-space:nowrap}
.m2h .lh-s b{font:500 30px/1 var(--font-display);color:var(--violet);letter-spacing:0}
.m2h .so-av{gap:14px;font:500 17px/1.25 var(--font-body)}
.m2h.m2-lino .lh-sw .so-av>span{color:var(--ink)}
.m2h .so-av li.so-mas{padding:0 15px;font-size:15px;color:var(--plum,#4b3658)}
@media(max-width:899px){.m2h .lh-s{font-size:16px}.m2h .lh-s b{font-size:28px}.m2h .so-av{font-size:16px}}
@media(min-width:900px) and (max-width:1199px){.m2h .lh-s{gap:6px 16px;font-size:16px}.m2h .lh-s b{font-size:26px}.m2h .so-av{font-size:16px}}

/* ——— portada · la escena de la derecha, ordenada (Mati 29-oct: «está desordenado»). Mismas piezas, en una grilla de 560 × 560:
   el celular es el protagonista a la izquierda, con la foto de la pareja apoyada detrás (asoma arriba, con su crédito y el lacre);
   a la derecha, en una columna alineada al mismo borde, la nota del cronograma, el panel de invitados y el plano de mesas, con 18 de
   aire entre cada una. Nada tapa texto: el celular solo pisa la barra de íconos del panel (48 de ancho). El orden de capas es el del HTML. */
@media(min-width:900px){
  .m2-bh .hx{--u:min(calc(100cqw / 560),calc(100cqh / 560),1.45px);height:calc(560 * var(--u));margin:calc(-280 * var(--u)) 0 0 calc(-280 * var(--u))}
  .m2-bh .hx-arch{left:calc(-26 * var(--u));right:auto;top:calc(18 * var(--u));width:calc(240 * var(--u));height:calc(196 * var(--u));translate:none;scale:none;rotate:none;transform:rotate(-4deg);z-index:auto}
  .m2-bh .hx-lacre{left:calc(176 * var(--u));right:auto;top:calc(4 * var(--u));width:calc(54 * var(--u));translate:none;scale:none;z-index:auto}
  .m2-bh .hx-phone{left:calc(16 * var(--u));top:calc(112 * var(--u))}
  .m2-bh .hx-note{left:auto;right:0;top:calc(20 * var(--u));width:calc(256 * var(--u))}
  .m2-bh .hx-panel{left:calc(152 * var(--u));top:calc(102 * var(--u));width:calc(408 * var(--u));height:calc(220 * var(--u))}
  .m2-bh .hx-plan{left:auto;right:0;top:calc(340 * var(--u));width:calc(266 * var(--u))}
}

/* ——— «Bajá para ver» (Mati 29-oct): en el celular salía «Jupá en un mi…» (fija con left:50%, el navegador le daba de ancho la
   mitad de la pantalla) y en la portada tapaba el ticket o «Trabajan con Jupá». Ahora mide lo que su texto pide (sin «…») y l.js
   la ubica en el lugar libre de abajo más cercano al centro (sg-x, con su left), entera o solo la flecha (sg-c); si no hay lugar, no sale. */
.sg{--sg-dy:22px;width:max-content;bottom:calc(16px + env(safe-area-inset-bottom))}
.sg-tx b{max-width:none;overflow:visible;text-overflow:clip}
.sg.sg-x{transform:translate(0,22px) scale(.96)}
.sg.sg-x.on{transform:none}
.sg.sg-x.on:active{transform:scale(.97)}
.sg.sg-c{gap:0;min-height:0;padding:8px}
.sg.sg-c .sg-tx{display:none}
@media(max-width:899px){.sg.sg-c{padding:7px}}
@media(prefers-reduced-motion:reduce){.sg.sg-x,.sg.sg-x.on{transform:none}}

/* ——— portada entre 900 y 1199 de ancho la escena es chica y las letras no bajan de 12 px: «¿Nos acompañan?» se cortaba en el
   celular y «1 sin TACC» se truncaba en el panel. El título del celular baja a dos renglones si hace falta, y el chip del panel se
   saca (el dato ya está en el celular y en la nota del cronograma). */
@media(min-width:900px) and (max-width:1199px){
  .m2-bh .hx-st{white-space:normal;letter-spacing:0}
  .m2-bh .hx-nm em{display:none}
}