/* =============================================================================
   publico.css — lo que comparten las páginas PÚBLICAS de Brinddi (marca "Coral sobre tinta")
   Nace de la portada (index.html = propuesta A, elegida por Christian el 16-oct-2026).
   Manda rediseno/DESIGN.md (leer §8 y §8b antes de armar una página). Usa los tokens de
   css/marca.css y NO convive con css/site.css: una página pública carga esto O site.css.
   Las páginas de la APP (crear, evento, cuenta, mis-eventos, pago…) siguen con site.css.

   CARGA
     <head>:  Outfit (Google Fonts) → css/marca.css → css/publico.css → <style> de la página
              el <script> en línea de la clase "js" + el origen ?r= (copiarlo de index.html)
                (antes de pintar; sin la clase "js" nada se esconde para entrar y la página
                 se ve completa y quieta, que es el respaldo sin JavaScript. El ?r= se guarda
                 ahí y no recién en publico.js, que es diferido: si no, un toque rápido a
                 "Crear mi evento" pierde de dónde vino la visita)
     <body class="pub">  activa el reset y la base de este archivo (todo lo demás va con clase)
     final del <body>:  js/auth.js → js/app.js → js/cascara.js → js/personaje.js (defer) → js/publico.js (defer)
              (la cáscara del celular: ver la cabecera de js/cascara.js y la de css/cascara.css)
     NO cargar js/site.js ni css/site.css: publico.js ya hace todo lo que hacía site.js
     (métricas, ?r=, campo trampa, precios con sesión, sello de Pagadito, jingle, confeti).

   MENOS TEXTO (DESIGN.md §8b, Christian 16-oct: "explica demasiado en la primera pantalla")
     Primera pantalla: titular de 6 palabras o menos + como mucho una línea de 12 palabras +
     UNA acción. Nada de párrafos, notas debajo del botón ni "toca acá": si hace falta una
     pista, que sea visual (algo que late). "Crea tu cuenta gratis" puede ir chico junto al
     botón (.pub-junto). Cada sección: titular + como mucho una oración de unas 20 palabras.
     Lo largo vive en preguntas (2 oraciones por respuesta como máximo), legales y blog.
     Y MENOS ESTRUCTURA, en escritorio igual que en celular ("mi sitio de escritorio se puede
     simplificar y demasiado"): una idea por pantalla, listas de 3 a 5 ítems con el resto a un
     toque ("Ver todos" o un link a la página completa), fuera las secciones que repiten lo que
     ya se dijo. El ancho del escritorio se llena con aire y una imagen grande, no con más bloques.

   CELULAR = APP (DESIGN.md §8, < 760 px). Lo arma la cáscara (js/cascara.js + css/cascara.css):
     · Arriba el logo y, a la derecha, el hueco <span data-cascara-acciones></span> (hijo directo
       de header.pub-nav, nunca adentro de su <nav>) con la cuenta y el menú. Los links de la
       .pub-nav llevan .pub-no-cel; Precios (#nav-precios) también se va: está en el menú.
     · Abajo la barra única de css/app.css (Inicio · + Crear · Eventos), igual en todas las
       páginas. El botón principal del primer pantallazo NO se repite arriba: lleva .pub-no-cel.
     · Lo que flota abajo usa var(--app-abajo), el alto de esa barra + el área segura.
     · El pie queda en una línea mínima: los legales, el © y el sello de Pagadito.

   COLORES REALES Y APP (DESIGN.md §8c)
     · :root lleva color-scheme:dark (acá) y cada página pública tiene que llevar en el <head>
       <meta name="color-scheme" content="dark">: si no, el modo oscuro forzado de Android
       cambia el coral y vuelve celeste al personaje.
     · Brinddi se agrega a la pantalla de inicio como app: manifest.webmanifest (lo enlaza la
       página en su <head>, ver el contrato de js/cascara.js) + sw.js (lo registra js/cascara.js).
       Abierta como app (display-mode: standalone) la .pub-nav baja lo que mide la barra de
       estado del iPhone (env(safe-area-inset-top)).

   TOKENS NUEVOS (el resto sale de marca.css: --fondo --superficie --texto --texto-2 --coral…)
     --superficie-2  #2A4675, un paso más claro que --superficie: tejas alternas y hover.
                     Encima va --texto (8.3:1). --texto-2 NO va encima: da 4.46:1 y no llega
                     a AA en texto chico. Si un hover pasa a --superficie-2, el secundario
                     cambia a --texto en ese mismo hover.
     Los CINCO tamaños de una página pública (DESIGN.md §4, máximo cinco):
       --p-hero 40→80 px · --p-titulo 28→36 · --p-frase 20 · --p-cuerpo 17 · --p-nota 14
     --p-margen 16→40 px (margen de página) · --p-gutter 24 px (16 en celular)
     --p-curva-sale / --p-curva-va / --p-curva-suave: curvas de movimiento
     Lo fijo que tenga que quedar ARRIBA de la barra de celular usa var(--app-abajo) (css/app.css).

   COMPONENTES (markup en la cabecera de js/publico.js)
     .btn (marca.css) + .pub-btn  botón coral de 52 px de alto. Texto #0C1C39, nunca blanco.
     .pub-accion                 la fila de la acción: el botón y el .pub-junto al lado (si no entra,
                                 el texto baja solo). En el primer pantallazo la fila entera lleva
                                 .pub-no-cel. En el resto de la página, el botón y el .pub-junto
                                 llevan .pub-no-cel y en celular queda un .pub-lnk .pub-solo-cel
                                 ("Crea tu cuenta gratis" → cuenta.html#crear): algo que se toca, sin
                                 repetir el botón coral que ya está en la barra
     .pub-junto                  el texto chico junto al botón, a un medianil (24 px). "Crea tu cuenta
                                 gratis" es un <a class="pub-junto" href="cuenta.html#crear">, en la
                                 misma fila; nunca debajo como nota
     .pub-lnk                    link suelto con subrayado coral, de 44 px de alto (acción
                                 secundaria; también el "Ver todos" de una lista corta). No va
                                 dentro de un párrafo
     .pub-nav                    barra de arriba: logo + links. Ocultar por ancho con
                                 .pub-no-tablet (< 1100 px) y .pub-no-cel (< 760 px); mostrar solo
                                 en celular con .pub-solo-cel. Si en celular no queda ningún link a
                                 la vista, el <nav> se saca entero (no se anuncia vacío)
     .pub-sec                    ritmo de secciones: 96 → 180 px entre una y otra
     .pub-faq                    preguntas en tejas: título quieto a la izquierda,
                                 <details name="faq"> a la derecha; la abierta va en coral.
                                 Cinco preguntas como máximo, dos oraciones por respuesta; si la
                                 página tiene FAQPage en el JSON-LD, dice lo mismo palabra por palabra
     .pub-tejas                  la teja de la acción: foto · teja porcelana (h2 + .pub-accion, nada
                                 más: sin párrafo). El div .pub-teja-plana queda en el HTML pero no se
                                 muestra (era una teja coral vacía).
                                 La teja porcelana es superficie de día: su --texto-2 es el de día
     .pub-pie + .pub-firma       el pie: links y © arriba, y lo ÚLTIMO de la página es el logo
                                 a todo el ancho armándose (lo anima js/publico.js). El <img> del
                                 logo se esconde SOLO cuando publico.js le pone .viva a la firma
                                 (o sea, cuando ya está el personaje para armarlo): si personaje.js
                                 o publico.js no cargan, queda el logo quieto y nunca una franja vacía
     .pub-pagadito               el sello "Comercio Certificado por Pagadito" (obligatorio para la
                                 afiliación). Lo agrega publico.js en .pub-pie-linea: no escribirlo.
                                 La portada no lo lleva (<footer class="pub-pie" data-sin-sello>):
                                 queda emocional, regla del fundador que ya respetaba site.js
     .tel                        el celular dibujado, como el del visitante (iPhone o Android), con una
                                 pantalla de verdad adentro. Markup y reglas en su sección, más abajo
     [data-solo-sesion]          se ve solo con sesión iniciada (sin sesión: display none)
     Precios                     los links a precios.html de la .pub-nav, el .pub-pie y la .pub-tejas
                                 se esconden sin sesión (estrategia de Christian);
                                 los que van dentro de un texto quedan
     #bji                        el botón flotante del jingle (js/jingle.js): en celular sube
                                 solo arriba de la barra
     44 px                       todo lo que se toca en celular mide al menos 44 px de alto
                                 (DESIGN.md §8): links del pie, .pub-lnk, el logo y los links de
                                 la .pub-nav ya lo traen
     [data-reveal] style="--i:n" entra subiendo al verse, una vez, escalonado por --i
     #cfx                        lienzo del confeti (lo crea js/publico.js si no está)
     .sr                         solo para lectores de pantalla
   ============================================================================= */

/* la web pública es de NOCHE (DESIGN.md §4 y §8c): sin esto, el modo oscuro forzado de Android
   oscurecía el coral y volvía celeste al personaje. Cada página lleva además, en el <head>:
   <meta name="color-scheme" content="dark"> */
:root{
  color-scheme:dark;
  --superficie-2:#2A4675;
  --p-hero:clamp(2.5rem,1.05rem + 4.4vw,5rem);
  --p-titulo:clamp(1.75rem,1.25rem + 1.2vw,2.25rem);
  --p-frase:1.25rem;
  --p-cuerpo:1.0625rem;
  --p-nota:.875rem;
  --p-margen:clamp(16px,2.8vw,40px);
  --p-gutter:24px;
  --p-curva-sale:cubic-bezier(.22,1,.36,1);
  --p-curva-va:cubic-bezier(.76,0,.24,1);
  --p-curva-suave:cubic-bezier(.33,1,.68,1);
}
@media (max-width:759px){ :root{--p-gutter:16px} }

/* ---------- base (especificidad cero: cualquier regla de la página le gana) ---------- */
:where(.pub),:where(.pub) *,:where(.pub) *::before,:where(.pub) *::after{box-sizing:border-box}
:where(.pub) :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0;padding:0}
:where(html){-webkit-text-size-adjust:100%}
body.pub{margin:0;font-family:var(--fuente);font-size:var(--p-cuerpo);line-height:1.55;background:var(--fondo);color:var(--texto);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(.pub) img{display:block;max-width:100%}
:where(.pub) a{color:inherit}
:where(.pub) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.pub) :focus-visible{outline:2px solid var(--foco);outline-offset:3px}
:where(.pub) ::selection{background:var(--coral);color:var(--tinta-profunda)}
:where(.pub) :where(h1,h2,h3){font-weight:var(--peso-titulo);letter-spacing:0;line-height:1.06}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botón grande y link ---------- */
.btn.pub-btn{min-height:52px;padding:0 28px;line-height:1;font-size:var(--p-cuerpo)}
.btn.pub-btn:active{transform:scale(.97)}
.pub-junto{font-size:var(--p-nota);line-height:1.3;color:var(--texto-2);white-space:nowrap}
/* "Crea tu cuenta gratis" es un link (va a cuenta.html#crear): subrayado a mano más fino (ver "el
   subrayado hecho a mano", abajo), se ilumina con el mouse y responde al toque; 44 px de alto para el
   dedo sin mover la fila (el relleno suma, el margen lo descuenta) */
a.pub-junto{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0;-webkit-tap-highlight-color:transparent;
  transition:color 160ms ease}
@media (hover:hover){a.pub-junto:hover{color:var(--damasco)}}
a.pub-junto:active{color:var(--damasco);opacity:.8}
/* la fila de la acción: el botón y, al lado, el texto chico; si no entra, el texto baja */
.pub-accion{display:flex;align-items:center;flex-wrap:wrap;gap:12px var(--p-gutter)}
/* link suelto (no dentro de un párrafo): se toca en 44 px de alto. El trazo es el subrayado a mano */
.pub-lnk{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---------- el subrayado hecho a mano (DESIGN.md §8c, 18-oct) ----------
   Los links dentro del texto no llevan la raya recta del navegador: llevan un trazo coral irregular,
   como hecho con marcador sobre papel (grueso y alto que cambian a lo largo). Es un SVG estirado a lo
   ancho del link (preserveAspectRatio none: el grosor no cambia, el largo sí) pintado de fondo, así:
   · en un link de varias líneas cada renglón lleva su propio trazo (box-decoration-break: clone);
   · queda DETRÁS de las letras: la g, la p o la y pasan por encima, nunca quedan tapadas;
   · al pasar el mouse o enfocar con teclado se vuelve a dibujar de izquierda a derecha con el otro
     trazo (sin animación con prefers-reduced-motion);
   · con colores forzados (alto contraste) los fondos no se pintan: vuelve la raya del navegador.
   Los trazos (--p-trazo-1 en reposo, --p-trazo-2 al pasar) se heredan: donde el fondo es coral
   (la pregunta abierta de .pub-faq) pasan a tinta.
   Cubre: .pub-lnk, a.pub-junto, "Ver todo el plan" de precios (.ver), las respuestas de .pub-faq,
   los links del cuerpo del blog (.prose), los de los legales (a.inline), las notas de partners (.fdet),
   contacto (.t-nota) y cómo funciona (.demo-nota), y cualquier link sin clase dentro de un párrafo
   del <main>. Esas páginas traen su propio text-decoration en el <style> de la página, que va DESPUÉS
   de este archivo: por eso el selector arranca con "html body.pub" (le gana a todos). NO el pie ni el
   menú ni la pantalla del invitado dentro del celular dibujado (.tel): ahí no va subrayado a mano. */
:root{
  --p-trazo-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill='%23F4553A' d='M3 5.6C22 4.2 48 4.8 78 4.1C112 3.3 150 3.9 184 3.1C205 2.7 224 2.4 237 2.2C239.6 2.2 240 5.2 237.6 5.6C218 7 196 7.6 168 8C130 8.2 96 9 62 9.6C38 10.1 18 10.4 4.6 10.8C1.2 10.9 .4 5.9 3 5.6Z'/%3E%3Cpath fill='%23F4553A' fill-opacity='.45' d='M40 10.4C80 9.9 120 10.2 170 9.3L171 10C122 11.1 82 11 41 11.4Z'/%3E%3C/svg%3E");
  --p-trazo-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill='%23F4553A' d='M2 7.4C30 6.6 60 6 96 5.6C140 5.2 180 4.4 236 3.6C239.4 3.6 239.8 7.4 236.6 7.6C196 8.8 150 9.8 110 10.1C70 10.4 36 10.9 6 11.5C.8 11.6-.6 7.6 2 7.4Z'/%3E%3Cpath fill='%23F4553A' fill-opacity='.45' d='M20 5.8C60 4.9 110 4.7 160 3.9L161 4.5C110 5.4 60 5.7 21 6.4Z'/%3E%3C/svg%3E");
  --p-trazo-alto:.42em;
}
.pub-faq details[open]{
  --p-trazo-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill='%230C1C39' d='M3 5.6C22 4.2 48 4.8 78 4.1C112 3.3 150 3.9 184 3.1C205 2.7 224 2.4 237 2.2C239.6 2.2 240 5.2 237.6 5.6C218 7 196 7.6 168 8C130 8.2 96 9 62 9.6C38 10.1 18 10.4 4.6 10.8C1.2 10.9 .4 5.9 3 5.6Z'/%3E%3C/svg%3E");
  --p-trazo-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath fill='%230C1C39' d='M2 7.4C30 6.6 60 6 96 5.6C140 5.2 180 4.4 236 3.6C239.4 3.6 239.8 7.4 236.6 7.6C196 8.8 150 9.8 110 10.1C70 10.4 36 10.9 6 11.5C.8 11.6-.6 7.6 2 7.4Z'/%3E%3C/svg%3E");
}
/* en el texto corrido: el trazo cuelga del pie del renglón; el relleno de abajo no mueve las líneas,
   solo baja el trazo para que arranque debajo de la base de las letras */
html body.pub :where(.pub-faq .pub-faq-r a,.prose :is(p,li) a,.lg-doc a.inline,[data-ui] :is(.fdet,.t-nota,.demo-nota) a,main p a:not([class]),
  .pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *){
  --p-trazo:var(--p-trazo-1);
  text-decoration:none;
  background:var(--p-trazo) no-repeat 0 100% / 100% var(--p-trazo-alto);
  padding-bottom:.14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* los links que son una caja de 44 px (el texto va centrado): el trazo va debajo del texto, no al
   pie de la caja. Sin relleno extra: no se mueve la fila */
html body.pub :where(.pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *){padding-bottom:0;background-position:0 calc(50% + .72em)}
/* el de "Crea tu cuenta gratis" acompaña a un botón: más fino */
html body.pub a.pub-junto:not(.tel *){--p-trazo-alto:.32em;background-position:0 calc(50% + .7em)}
@media (hover:hover){
  html body.pub :where(.pub-faq .pub-faq-r a,.prose :is(p,li) a,.lg-doc a.inline,[data-ui] :is(.fdet,.t-nota,.demo-nota) a,main p a:not([class]),
    .pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *):hover{--p-trazo:var(--p-trazo-2)}
}
html body.pub :where(.pub-faq .pub-faq-r a,.prose :is(p,li) a,.lg-doc a.inline,[data-ui] :is(.fdet,.t-nota,.demo-nota) a,main p a:not([class]),
  .pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *):focus-visible{--p-trazo:var(--p-trazo-2)}
@keyframes p-trazo-dibuja{from{background-size:0 var(--p-trazo-alto)}to{background-size:100% var(--p-trazo-alto)}}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){
    html body.pub :where(.pub-faq .pub-faq-r a,.prose :is(p,li) a,.lg-doc a.inline,[data-ui] :is(.fdet,.t-nota,.demo-nota) a,main p a:not([class]),
      .pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *):hover{animation:p-trazo-dibuja 520ms var(--p-curva-sale) both}
  }
  html body.pub :where(.pub-faq .pub-faq-r a,.prose :is(p,li) a,.lg-doc a.inline,[data-ui] :is(.fdet,.t-nota,.demo-nota) a,main p a:not([class]),
    .pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *):focus-visible{animation:p-trazo-dibuja 520ms var(--p-curva-sale) both}
}
@media (forced-colors:active){
  html body.pub :where(.pub-faq .pub-faq-r a,.prose :is(p,li) a,.lg-doc a.inline,[data-ui] :is(.fdet,.t-nota,.demo-nota) a,main p a:not([class]),
    .pub-lnk,a.pub-junto,.ver[data-plan]):not(.tel *){background:none !important;text-decoration:underline;animation:none}
}

/* ---------- confeti: detrás de los textos de cada sección ---------- */
#cfx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- barra de arriba ---------- */
/* acompaña el scroll (Christian, 16-oct: "el header no baja con el scroll, eso está mal"). Fondo tinta
   sólido, sin vidrio (DESIGN.md §6). Al bajar se achica y pasa a la tinta profunda: un escalón de tono lo
   separa del contenido, sin raya (regla de la portada: "sin rayas"). .pub-nav-baja la pone js/publico.js.
   z-index 45: arriba del contenido y del confeti, abajo de la barra de celular (50, css/app.css) */
.pub-nav{position:sticky;top:0;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--p-margen);
  background:var(--fondo);transition:padding 220ms ease,background-color 220ms ease}
.pub-nav.pub-nav-baja{padding-top:12px;padding-bottom:12px;background:var(--tinta-profunda)}
/* las anclas (#eventos, #preguntas) y el foco de teclado no quedan debajo del header fijo */
html{scroll-padding-top:72px}
@media (max-width:759px){ html{scroll-padding-top:56px} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* saltar al contenido: el primer Tab de la página, visible solo con el foco. 176 px de ancho: tapa el
   logo entero (151 px), sin dejar asomar su borde */
.pub-saltar{position:fixed;left:var(--p-margen);top:8px;z-index:60;display:inline-flex;align-items:center;justify-content:center;min-width:176px;min-height:44px;padding:0 18px;border-radius:var(--pildora);
  background:var(--blanco-tibio);color:var(--tinta-profunda);font-weight:var(--peso-boton);text-decoration:none;transform:translateY(-200%)}
.pub-saltar:focus-visible{transform:none}
@media (prefers-reduced-motion:reduce){.pub-nav{transition:none}}
.pub-logo{display:block;line-height:0;border-radius:6px;flex:none}
.pub-logo img{height:28px;width:auto}
.pub-nav ul{list-style:none;display:flex;gap:30px;align-items:center;margin:0;padding:0}
/* cada link se toca en 44 px de alto sin agrandar la barra (el margen negativo descuenta lo que suma) */
.pub-nav ul a{display:inline-flex;align-items:center;min-height:44px;margin:-9px 0;text-decoration:none;font-weight:var(--peso-menu);color:var(--texto);white-space:nowrap;transition:color 180ms ease}
@media (hover:hover){.pub-nav ul a:hover{color:var(--damasco)}}
@media (max-width:1099px){.pub-no-tablet{display:none !important}}
@media (min-width:760px){.pub-solo-cel{display:none !important}}
/* abierta como app desde la pantalla de inicio (PWA): en iPhone la barra de estado queda
   transparente encima de la página, así que la barra de arriba baja lo que mide esa zona */
@media (display-mode:standalone){
  .pub-nav{padding-top:calc(22px + env(safe-area-inset-top,0px))}
  .pub-nav.pub-nav-baja{padding-top:calc(12px + env(safe-area-inset-top,0px))}
}
@media (max-width:759px){
  .pub-nav{padding-top:12px;padding-bottom:12px}
  .pub-nav.pub-nav-baja{padding-top:8px;padding-bottom:8px}
}
@media (max-width:759px) and (display-mode:standalone){
  .pub-nav,.pub-nav.pub-nav-baja{padding-top:calc(8px + env(safe-area-inset-top,0px))}
}
@media (max-width:759px){
  .pub-nav ul{gap:18px}
  .pub-logo img{height:24px}
  /* 44 px para tocar sin mover nada: el relleno suma y el margen negativo lo descuenta */
  .pub-logo{padding:10px 0;margin:-10px 0}
  .pub-nav ul a{display:flex;align-items:center;min-height:44px;margin:-10px 0}
  .pub-no-cel{display:none !important}
  /* Precios está en el menú de la cáscara: arriba no se repite (le gana al style.display=""
     que pone publico.js con sesión) */
  #nav-precios{display:none !important}
  /* en celular el nav de arriba queda sin links a la vista: se saca entero, así el lector no
     anuncia una navegación vacía (la cuenta y el menú van en el hueco de la cáscara) */
  .pub-nav nav:not(:has(li:not(.pub-no-cel,.pub-no-tablet,#nav-precios))){display:none}
}

/* ---------- secciones ---------- */
.pub-sec{position:relative;z-index:2;padding:clamp(96px,12vw,180px) var(--p-margen) 0}
.pub-sec h2{font-size:var(--p-titulo)}

/* ---------- preguntas: título quieto a la izquierda, tejas a la derecha ---------- */
.pub-faq .pub-faq-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--p-gutter)}
.pub-faq h2{grid-column:1/5;position:sticky;top:96px;align-self:start;max-width:11ch}
.pub-faq .pub-faq-lista{grid-column:5/13;display:flex;flex-direction:column;gap:8px}
.pub-faq details{background:var(--superficie);border-radius:var(--radio);transition:background-color 220ms ease}
.pub-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 24px;
  font-size:var(--p-frase);font-weight:var(--peso-menu);line-height:1.3;border-radius:var(--radio)}
.pub-faq summary::-webkit-details-marker{display:none}
.pub-faq summary i{position:relative;flex:none;width:16px;height:16px}
.pub-faq summary i::before,.pub-faq summary i::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;border-radius:2px;background:currentColor;
  transition:transform 240ms var(--p-curva-sale)}
.pub-faq summary i::after{transform:rotate(90deg)}
.pub-faq details[open]{background:var(--coral);color:var(--tinta-profunda)}
.pub-faq details[open] summary i::after{transform:rotate(0)}
.pub-faq .pub-faq-r{padding:0 24px 24px;font-size:var(--p-cuerpo);line-height:1.55;max-width:52ch}
.pub-faq .pub-faq-r a{color:inherit} /* el subrayado es el trazo a mano (arriba) */
@media (hover:hover){.pub-faq details:not([open]) summary:hover{background:var(--superficie-2)}}
@media (max-width:1099px){
  .pub-faq .pub-faq-wrap{display:block}
  .pub-faq h2{position:static;max-width:none;margin-bottom:28px}
}
@media (max-width:759px){
  .pub-faq summary{font-size:18px;min-height:64px;padding:16px 20px}
  .pub-faq .pub-faq-r{padding:0 20px 20px}
}

/* ---------- la teja de la acción: una fila recortada de un tablero más largo ---------- */
.pub-tejas-sec{padding-left:0;padding-right:0}
/* sobre la grilla: la foto sangra por la izquierda hasta la col 2 y la porcelana va de la col 3 al margen
   derecho, donde termina el header (el medianil entre tejas es el de la grilla; 100% y no 100vw: la barra
   de scroll no corre las columnas). La teja coral de la derecha iba vacía: una forma sin contenido es
   adorno, así que no se muestra y su pista mide el margen menos el medianil */
.pub-tejas{display:grid;gap:var(--p-gutter);height:420px;
  grid-template-columns:calc(var(--p-margen) + (100% - 2 * var(--p-margen) + var(--p-gutter)) / 12 * 2 - var(--p-gutter)) 1fr calc(var(--p-margen) - var(--p-gutter))}
.pub-tejas > *{border-radius:var(--radio);overflow:hidden}
.pub-tejas .pub-teja-foto{border-radius:0 var(--radio) var(--radio) 0}
.pub-tejas .pub-teja-foto img{width:100%;height:100%;object-fit:cover}
.pub-tejas .pub-teja-plana{display:none}
/* la teja porcelana es una superficie de día: su texto secundario es el de día (marca.css .modo-dia) */
.pub-tejas .pub-teja-main{--texto-2:#586178;background:var(--porcelana);color:var(--tinta);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:40px clamp(28px,5vw,72px)}
.pub-tejas .pub-teja-main h2{font-size:var(--p-hero);color:var(--tinta);max-width:10em;text-wrap:balance}
.pub-tejas .pub-teja-main .pub-accion{margin-top:26px}
/* el título y los botones cuelgan de la col 5, el mismo borde del texto de la portada: la porcelana
   arranca en la col 3 y mide 10 columnas, así que el relleno son dos columnas y dos medianiles */
@media (min-width:1100px){ .pub-tejas .pub-teja-main{padding-left:calc((100% + var(--p-gutter)) / 5)} }
/* tablet: la foto ocupa tres columnas (como filo de 12 a 28 px se leía como una imagen rota, control del 17-oct)
   y la porcelana va hasta el margen derecho */
@media (max-width:1099px){.pub-tejas{grid-template-columns:calc(var(--p-margen) + (100% - 2 * var(--p-margen) + var(--p-gutter)) / 12 * 3 - var(--p-gutter)) 1fr calc(var(--p-margen) - var(--p-gutter))}}
@media (max-width:759px){
  .pub-tejas{grid-template-columns:1fr 1fr;grid-template-rows:auto 168px;height:auto;gap:8px;padding:0 var(--p-margen)}
  .pub-tejas .pub-teja-main{grid-column:1/3;grid-row:1;padding:32px 24px;min-height:0;border-radius:var(--radio)}
  .pub-tejas .pub-teja-main .pub-accion{margin-top:10px}
  .pub-tejas .pub-teja-main h2{font-size:var(--p-titulo)}
  /* en celular la teja coral quedaba como un cuadrado vacío junto a la foto (se leía como una imagen que
     no cargó): la foto va sola, a todo el ancho */
  .pub-tejas .pub-teja-foto{grid-row:2;grid-column:1/3;border-radius:var(--radio)}
}

/* ---------- el pie: links y © arriba; lo último de la página es el logo a todo el ancho ---------- */
.pub-pie{position:relative;z-index:2;padding:clamp(120px,14vw,200px) var(--p-margen) clamp(20px,2.4vw,32px)}
/* la frase guarda 11em: con los 11 links (sumó "Ideas de dónde puede ir el QR") la columna de la
   frase quedaba en 0 px a 1200 y se apilaba letra por letra; ahora los links se reparten en dos filas */
.pub-pie-linea{display:grid;grid-template-columns:minmax(11em,1fr) auto;gap:14px 40px;align-items:baseline;font-size:var(--p-cuerpo);color:var(--texto-2)}
.pub-pie-linea nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px}
/* los legales (Términos, Privacidad, Reembolso) van siempre en su propia fila: si no, el corte caía
   donde tocara y "Reembolso" quedaba solo abajo. El ::after de ancho entero hace el salto entre los
   dos grupos sin cambiar el orden del HTML */
.pub-pie-links::after{content:"";order:1;flex-basis:100%;height:0}
.pub-pie-links :is(a[href*="terminos"],a[href*="privacidad"],a[href*="reembolso"]){order:2}
.pub-pie-linea a{color:var(--texto);text-decoration:none}
@media (hover:hover){.pub-pie-linea a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:5px}}
/* la firma: el nombre a todo el ancho. padding-top = aire para el salto del personaje
   (logoAnimado salta 40 de 120 unidades: ~8 % del ancho). aspect-ratio = el viewBox del
   nombre animado (500.76 × 127.51), así no salta el diseño cuando se arma. */
.pub-firma{display:block;margin:clamp(12px,2vw,28px) auto 0;padding-top:8%;border-radius:12px;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.pub-firma[role="button"]{cursor:pointer}
.pub-firma-lienzo{display:block;width:100%}
.pub-firma.viva .pub-firma-lienzo{aspect-ratio:500.76/127.51}
.pub-firma.viva .pub-firma-lienzo > img{visibility:hidden}
.pub-firma-lienzo > img{width:100%;height:auto}
.pub-firma-lienzo svg{display:block;width:100%;height:auto}
/* el sello de Pagadito (lo pone js/publico.js): la insignia pública que pide la afiliación.
   Quieto y discreto; al pasar el mouse se ve entero. */
.pub-pagadito{display:inline-flex;align-items:center;justify-self:start;min-height:44px;opacity:.85;text-decoration:none;border-radius:8px;
  transition:opacity 180ms ease}
.pub-pagadito img{width:66px;height:auto;border-radius:6px}
@media (hover:hover){.pub-pagadito:hover{opacity:1}}
/* tablet y celular: una columna, a la izquierda; el © al final, justo arriba del logo */
@media (max-width:1099px){
  .pub-pie-linea{display:flex;flex-direction:column;gap:12px}
  .pub-pie-linea nav{justify-content:flex-start;gap:8px 24px}
  .pub-pie-c{order:1}
  /* Términos, Privacidad y Reembolso salen del pie (Christian, 18-oct: "si ya está en el menú
     hamburguesa quitalo"): por debajo de 1100 px el menú de la cáscara (.cs-legales) los muestra.
     Solo en páginas con cáscara (body[data-chrome]): sin menú, el pie los conserva */
  body[data-chrome] .pub-pie-links :is(a[href*="terminos"],a[href*="privacidad"],a[href*="reembolso"]),
  body[data-chrome] .pub-pie-links::after{display:none}
}
/* CELULAR (DESIGN.md §8 y §8c, 18-oct): el pie es una línea mínima, el © y el sello de Pagadito.
   Los links y los legales viven en el menú de la cáscara. */
@media (max-width:759px){
  .pub-pie{padding-top:clamp(64px,12svh,96px);padding-bottom:12px}
  .pub-pie-linea{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 18px;font-size:var(--p-nota)}
  .pub-pie-que,.pub-pie-linea .pub-pie-redes,.pub-firma{display:none}
  body[data-chrome] .pub-pie-linea .pub-pie-links{display:none}
  /* sin cáscara (sin menú) quedan los legales, en la fila de arriba */
  body:not([data-chrome]) .pub-pie-linea .pub-pie-links{display:contents}
  body:not([data-chrome]) .pub-pie-links::after{display:none}
  body:not([data-chrome]) .pub-pie-links :is(a[href*="terminos"],a[href*="privacidad"],a[href*="reembolso"]){order:0}
  body:not([data-chrome]) .pub-pie-links a:not([href*="terminos"],[href*="privacidad"],[href*="reembolso"]){display:none}
  body:not([data-chrome]) .pub-pie-linea::after{content:"";order:1;flex-basis:100%;height:0}
  .pub-pie-c{order:2}
  .pub-pie .pub-pagadito{order:3}
  .pub-pie .pub-pagadito img{width:44px}
  /* cada link se toca en 44 px de alto (DESIGN.md §8) */
  .pub-pie-linea a{position:relative;display:inline-flex;align-items:center;min-height:44px}
  .pub-pie-links a::after{content:"";position:absolute;top:0;bottom:0;left:-9px;right:-9px}
}

/* ---------- la barra vieja de celular (.pub-barra) se retiró el 18-oct ----------
   La reemplaza la barra única de css/app.css. Mientras alguna página conserve el marcado viejo,
   no se muestra. */
.pub-barra{display:none !important}
/* el botón flotante del jingle (js/jingle.js) sube arriba de la barra */
@media (max-width:759px){ html.app-con-tabs #bji{bottom:calc(var(--app-abajo) + 12px)} }

/* ---------- el celular dibujado: como el del visitante (DESIGN.md §8c) ----------
   Un teléfono hecho con CSS que lleva adentro una pantalla real: la demo de la portada (y lo que
   venga en bodas y XV). Se dibuja como el celular de quien mira (Christian, 17-oct: "la imagen de
   un celular como el que él o ella está usando"): iPhone, con marco plateado e isla negra arriba,
   si entra desde iPhone, iPad o Mac; Android, con marco oscuro y el agujerito de la cámara al
   centro, desde Android y desde el resto (Windows, Linux). js/publico.js pone html.visita-ios o
   html.visita-android (?tel=ios o ?tel=android en la dirección lo fuerza, para probar); sin JS
   queda el iPhone. .tel-ios o .tel-android en el elemento fijan uno sin mirar al visitante.
   Todo se mide en puntos de un iPhone de 393 de ancho: --pt es el ancho del .tel dividido 393 (lo
   resuelve el contenedor, cqw), así el dibujo y la pantalla escalan juntos. La página pone el ancho
   (o el alto); la proporción es la de un teléfono, 1 a 2.05. Lo de adentro también se mide en
   calc(n * var(--pt)).
   MARKUP
     <div class="tel">
       <span class="tel-marco" aria-hidden="true"><i class="tel-boton tel-b1"></i><i class="tel-boton tel-b2"></i><i class="tel-boton tel-b3"></i><i class="tel-boton tel-b4"></i></span>
       <div class="tel-pantalla">
         <span class="tel-estado" aria-hidden="true"><b>9:41</b><span>señal, wifi y batería (los svg de la portada)</span></span>
         <span class="tel-camara" aria-hidden="true"></span>
         <div class="tel-app" data-ui>la pantalla de verdad, desde 54 pt de arriba</div>
         <span class="tel-home" aria-hidden="true"></span>
       </div>
     </div>
   El dibujo es decorativo (aria-hidden); lo de .tel-app conserva su accesibilidad. El degradé del
   marco está permitido: es el dibujo de un objeto, como una foto de producto (la compuerta de la
   skill lo marca como "gradient"). La sombra es la de algo que flota delante (DESIGN.md §6). */
.tel{position:relative;container-type:inline-size;aspect-ratio:1/2.05;--pt:calc(100cqw / 393);
  --tel-r:62;--tel-borde:5;--tel-bisel:11;--tel-rp:47;--tel-hora:17;--tel-lado:34;--tel-icono:12;--tel-home:134;--tel-home-alto:5;
  --tel-metal:linear-gradient(135deg,#5B5E66,#C9CBD0 18%,#7D8089 38%,#3B3D42 62%,#A7A9AE 84%,#55575D);--tel-botones:#8A8D94} /* taste-skill-ignore: el metal del marco es el dibujo de un objeto */
/* navegadores sin unidades de contenedor (Safari < 16): una medida fija que la página puede afinar */
@supports not (width:1cqw){ .tel{--pt:var(--tel-pt-respaldo,.9px)} }
.tel-marco{position:absolute;inset:0;border-radius:calc(var(--tel-r) * var(--pt));background:var(--tel-metal);
  filter:drop-shadow(0 calc(30 * var(--pt)) calc(44 * var(--pt)) rgba(5,12,28,.6))} /* taste-skill-ignore: el teléfono flota delante del coral (DESIGN.md §6) */
.tel-marco::before{content:"";position:absolute;inset:calc(var(--tel-borde) * var(--pt));border-radius:calc((var(--tel-r) - var(--tel-borde)) * var(--pt));background:#050608}
.tel-boton{position:absolute;width:calc(4 * var(--pt));border-radius:calc(3 * var(--pt));background:var(--tel-botones)}
.tel-b1{left:calc(-2 * var(--pt));top:calc(120 * var(--pt));height:calc(30 * var(--pt))}
.tel-b2{left:calc(-2 * var(--pt));top:calc(175 * var(--pt));height:calc(58 * var(--pt))}
.tel-b3{left:calc(-2 * var(--pt));top:calc(245 * var(--pt));height:calc(58 * var(--pt))}
.tel-b4{right:calc(-2 * var(--pt));top:calc(205 * var(--pt));height:calc(92 * var(--pt))}
.tel-pantalla{position:absolute;inset:calc((var(--tel-borde) + var(--tel-bisel)) * var(--pt));border-radius:calc(var(--tel-rp) * var(--pt));overflow:hidden;isolation:isolate;
  background:var(--tinta-profunda);color:var(--blanco-tibio)}
.tel-estado{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;height:calc(54 * var(--pt));
  padding:0 calc(var(--tel-lado) * var(--pt));font-size:calc(var(--tel-hora) * var(--pt));font-weight:600;line-height:1;pointer-events:none}
.tel-estado b{font-weight:600}
.tel-estado > span{display:flex;align-items:center}
.tel-estado svg{display:block;height:calc(var(--tel-icono) * var(--pt));width:auto;margin-left:calc(5 * var(--pt));fill:currentColor}
.tel-camara{position:absolute;left:50%;top:calc(11 * var(--pt));z-index:4;width:calc(126 * var(--pt));height:calc(37 * var(--pt));translate:-50% 0;
  border-radius:calc(20 * var(--pt));background:#000;pointer-events:none}
.tel-app{position:absolute;inset:calc(54 * var(--pt)) 0 0 0}
.tel-home{position:absolute;left:50%;bottom:calc(8 * var(--pt));z-index:3;width:calc(var(--tel-home) * var(--pt));height:calc(var(--tel-home-alto) * var(--pt));translate:-50% 0;
  border-radius:9px;background:var(--blanco-tibio);opacity:.9;pointer-events:none}
/* Android: marco oscuro y más recto, el agujerito de la cámara al centro y los botones a la derecha */
:is(.tel.tel-android,html.visita-android .tel:not(.tel-ios)){--tel-r:46;--tel-borde:4;--tel-bisel:8;--tel-rp:35;--tel-hora:14;--tel-lado:26;--tel-icono:11;--tel-home:110;--tel-home-alto:4;
  --tel-metal:linear-gradient(135deg,#2A2C31,#6C6F76 20%,#33363B 50%,#5A5D63 80%,#25272B);--tel-botones:#3D4045} /* taste-skill-ignore: el metal del marco es el dibujo de un objeto */
:is(.tel.tel-android,html.visita-android .tel:not(.tel-ios)) .tel-camara{top:calc(16 * var(--pt));width:calc(22 * var(--pt));height:calc(22 * var(--pt));border-radius:50%;
  border:calc(3 * var(--pt)) solid #111}
:is(.tel.tel-android,html.visita-android .tel:not(.tel-ios)) .tel-b1{left:auto;right:calc(-2 * var(--pt));top:calc(150 * var(--pt));height:calc(90 * var(--pt))}
:is(.tel.tel-android,html.visita-android .tel:not(.tel-ios)) .tel-b2{left:auto;right:calc(-2 * var(--pt));top:calc(270 * var(--pt));height:calc(50 * var(--pt))}
:is(.tel.tel-android,html.visita-android .tel:not(.tel-ios)) :is(.tel-b3,.tel-b4){display:none}

/* ---------- precios y lo que es solo con sesión (estrategia de Christian) ----------
   .nav, .flinks, .cta-row y a.ghost son clases de site.css: no tendrían que aparecer en una
   página pública, pero quedan como RESPALDO por si una página migra con algo del markup viejo.
   Un link a precios suelto sin sesión rompe la estrategia; uno escondido de más no rompe nada. */
html:not(.pub-sesion) :is(.pub-nav,.pub-pie,.pub-tejas,.nav,.flinks,.cta-row) a[href*="precios"],
html:not(.pub-sesion) a.ghost[href*="precios"],
html:not(.pub-sesion) [data-solo-sesion]{display:none !important}
/* y al revés: con sesión se va la invitación a crear la cuenta ([data-sin-sesion]). Tocarla llevaba
   sin aviso a Mis eventos (cuenta.html ve la sesión y sigue de largo) */
html.pub-sesion [data-sin-sesion]{display:none !important}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--p-curva-sale),transform 900ms var(--p-curva-sale);
    transition-delay:calc(var(--i,0) * 80ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pub-faq details,.pub-faq summary i::before,.pub-faq summary i::after,.pub-lnk,.pub-pagadito{transition:none}
}

/* ---------- impresión: solo el contenido ---------- */
@media print{
  #cfx,.pub-saltar,.pub-firma,.pub-pie-redes{display:none !important}
  .pub-nav{position:static}
  body.pub{padding-bottom:0 !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ---------- los idiomas del pie (19-oct): los escribe scripts/i18n/construir.mjs en el bloque
   <!--i18n:pie--> de cada página pública que existe en otro idioma. Cada idioma con su nombre en
   su idioma; links reales (los rastrea Google) que además guardan la elección (js/i18n.js).
   Van en una fila propia al final, para no mover lo que ya estaba. ---------- */
.pub-pie-linea .pub-idiomas{order:9;grid-column:1/-1;justify-content:flex-start;gap:8px 20px;font-size:var(--p-nota)}
.pub-idiomas a{color:var(--texto-2)}
.pub-idiomas a[aria-current]{color:var(--texto);font-weight:600}
@media (max-width:759px){ .pub-pie-linea .pub-idiomas{flex-basis:100%} }