/* =====================================================================
   VERSIÓN B · "La calle de los rótulos"
   Experimento: el sitio cambia de filtro completo (colores, letras,
   texturas) según la sección, como una cámara. Cinco filtros:
   rótulo · neón · plano · riso · terminal.
   Todo el estilo sale de variables definidas por filtro en <html data-mode>.
   Contraste de texto verificado en los cinco filtros (mínimo 5.5:1).
   ===================================================================== */

/* Letras de la marca, servidas desde el propio sitio (archivos variables, solo caracteres latinos:
   incluye acentos, ñ, ¿ y ¡). Licencia SIL Open Font License. */
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------------
   1. Filtros
   --------------------------------------------------------------------- */
:root,
[data-mode="rotulo"] {
  --bg: #fff4d6;
  --bg-img: radial-gradient(circle at 1px 1px, rgba(22, 18, 16, .14) 1.3px, transparent 1.6px) 0 0 / 18px 18px;
  --ink: #161210; --muted: #4a3f36;
  --c1: #d1001f; --c2: #ffd400; --c3: #1b2a9c; --c4: #00a651;
  --on-c1: #ffffff; --on-c2: #161210;
  --card: #fffdf6;
  --border: 3px solid #161210; --border-thin: 2px solid #161210;
  --shadow: 8px 8px 0 #161210;
  --radius: 16px;
  --display: "Bungee", Impact, sans-serif; --dw: 400; --dcase: uppercase; --dls: 0; --dsize: 1;
  --title-shadow: 3px 3px 0 var(--c2), 6px 6px 0 var(--ink);
  --body: "Rubik", system-ui, sans-serif;
  --btn-bg: #d1001f; --btn-ink: #fff; --btn-border: 3px solid #161210; --btn-shadow: 5px 5px 0 #161210;
  --btn-font: 400 1rem/1.1 "Bungee", Impact, sans-serif; --btn-radius: 12px;
  --kicker-prefix: "★ ";
  --focus: #1b2a9c;
}
[data-mode="neon"] {
  --bg: #0c0814;
  --bg-img:
    radial-gradient(70% 45% at 50% 0%, rgba(255, 46, 136, .18), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, .045) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(255, 255, 255, .03) 78px 80px);
  --ink: #f7ecff; --muted: #c9b6dc;
  --c1: #ff2e88; --c2: #2df5ff; --c3: #b6ff3b; --c4: #ffb000;
  --on-c1: #1a0010; --on-c2: #001a1c;
  --card: #1a1026;
  --border: 2px solid #2df5ff; --border-thin: 1px solid rgba(45, 245, 255, .5);
  --shadow: 0 0 0 1px rgba(45, 245, 255, .25), 0 0 26px rgba(45, 245, 255, .35), inset 0 0 22px rgba(45, 245, 255, .12);
  --radius: 22px;
  --display: "Fraunces", Georgia, serif; --dw: 600; --dcase: none; --dls: -.01em; --dsize: 1.08;
  --title-shadow: 0 0 4px #fff, 0 0 12px #ff2e88, 0 0 28px #ff2e88, 0 0 60px #ff2e88;
  --body: "Rubik", system-ui, sans-serif;
  --btn-bg: transparent; --btn-ink: #2df5ff; --btn-border: 2px solid #2df5ff;
  --btn-shadow: 0 0 14px rgba(45, 245, 255, .55), inset 0 0 12px rgba(45, 245, 255, .3);
  --btn-font: 800 1rem/1.1 "Rubik", sans-serif; --btn-radius: 999px;
  --kicker-prefix: "✦ ";
  --focus: #2df5ff;
}
[data-mode="plano"] {
  --bg: #0f3d91;
  --bg-img:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px;
  --ink: #f2f7ff; --muted: #c3d6f5;
  --c1: #ffffff; --c2: #ffd84a; --c3: #9cc7ff; --c4: #ff8a65;
  --on-c1: #0f3d91; --on-c2: #0f2a66;
  --card: #164aa8;
  --border: 1.5px dashed rgba(255, 255, 255, .8); --border-thin: 1px dashed rgba(255, 255, 255, .5);
  --shadow: none;
  --radius: 4px;
  --display: "Space Mono", ui-monospace, monospace; --dw: 700; --dcase: uppercase; --dls: -.02em; --dsize: .82;
  --title-shadow: none;
  --body: "Space Mono", ui-monospace, monospace;
  --btn-bg: #ffd84a; --btn-ink: #0f2a66; --btn-border: 2px solid #fff; --btn-shadow: 4px 4px 0 rgba(255, 255, 255, .35);
  --btn-font: 700 .95rem/1.1 "Space Mono", monospace; --btn-radius: 4px;
  --kicker-prefix: "// ";
  --focus: #ffd84a;
}
[data-mode="riso"] {
  --bg: #f6f0e2;
  --bg-img:
    radial-gradient(circle at 1px 1px, rgba(255, 72, 176, .22) 1.4px, transparent 1.8px) 0 0 / 11px 11px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .16 0 0 0 0 .56 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ink: #2a2a8f; --muted: #4b4b9a;
  --c1: #ff48b0; --c2: #ffe800; --c3: #00a95c; --c4: #ff6c2f;
  --on-c1: #2a2a8f; --on-c2: #2a2a8f;
  --card: #fffaf0;
  --border: 2.5px solid #2a2a8f; --border-thin: 2px solid #2a2a8f;
  --shadow: 7px 6px 0 #ff48b0;
  --radius: 26px;
  --display: "Rubik", system-ui, sans-serif; --dw: 900; --dcase: uppercase; --dls: -.03em; --dsize: 1;
  --title-shadow: 4px 3px 0 rgba(255, 72, 176, .85);
  --body: "Rubik", system-ui, sans-serif;
  --btn-bg: #2a2a8f; --btn-ink: #fff; --btn-border: 2.5px solid #2a2a8f; --btn-shadow: 5px 4px 0 #ff48b0;
  --btn-font: 900 1rem/1.1 "Rubik", sans-serif; --btn-radius: 999px;
  --kicker-prefix: "● ";
  --focus: #2a2a8f;
}
[data-mode="terminal"] {
  --bg: #040904;
  --bg-img:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, rgba(157, 255, 157, .07), transparent 70%);
  --ink: #9dff9d; --muted: #6fcf6f;
  --c1: #9dff9d; --c2: #ffb000; --c3: #55ccff; --c4: #ff5f56;
  --on-c1: #031003; --on-c2: #1a1000;
  --card: #071407;
  --border: 1.5px solid #9dff9d; --border-thin: 1px solid rgba(157, 255, 157, .5);
  --shadow: 0 0 18px rgba(157, 255, 157, .25);
  --radius: 2px;
  --display: "VT323", ui-monospace, monospace; --dw: 400; --dcase: none; --dls: 0; --dsize: 1.35;
  --title-shadow: 0 0 6px rgba(157, 255, 157, .8);
  --body: "Space Mono", ui-monospace, monospace;
  --btn-bg: #9dff9d; --btn-ink: #031003; --btn-border: 2px solid #9dff9d; --btn-shadow: 0 0 18px rgba(157, 255, 157, .45);
  --btn-font: 400 1.5rem/1 "VT323", monospace; --btn-radius: 0;
  --kicker-prefix: "> ";
  --focus: #ffb000;
}
[data-mode="comic"] {
  --bg: #f7f1e1;
  --bg-img: radial-gradient(circle at 2px 2px, rgba(30, 136, 229, .26) 1.6px, transparent 2.1px) 0 0 / 12px 12px;
  --ink: #111111; --muted: #3a3a3a;
  --c1: #c62828; --c2: #ffd60a; --c3: #1565c0; --c4: #2e7d32;
  --on-c1: #ffffff; --on-c2: #111111;
  --card: #ffffff;
  --border: 3px solid #111; --border-thin: 2.5px solid #111;
  --shadow: 6px 6px 0 #111;
  --radius: 6px;
  --display: "Bangers", Impact, sans-serif; --dw: 400; --dcase: uppercase; --dls: .03em; --dsize: 1.18;
  --title-shadow: 3px 3px 0 #ffd60a, 5px 5px 0 #111;
  --body: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;
  --btn-bg: #ffd60a; --btn-ink: #111; --btn-border: 3px solid #111; --btn-shadow: 5px 5px 0 #111;
  --btn-font: 400 1.35rem/1 "Bangers", Impact, sans-serif; --btn-radius: 10px;
  --kicker-prefix: "";
  --focus: #1565c0;
}
/* Editorial = la marca Kaleido: papel y tinta, rojo profundo de acento (6:1 sobre papel),
   los colores de la O para detalles, Unbounded en títulos y Outfit en texto (ver tools/brand/) */
[data-mode="editorial"] {
  --bg: #f5efe6;
  --bg-img: none;
  --ink: #1b1a17; --muted: #5e5a54;
  --c1: #a62f20; --c2: #f2a516; --c3: #d9432b; --c4: #e86a8a;
  --on-c1: #f5efe6; --on-c2: #1b1a17;
  --card: #fffdf9;
  --border: 1px solid #d4ccbf; --border-thin: 1px solid #d4ccbf;
  --shadow: 0 30px 60px -40px rgba(27, 26, 23, .4);
  --radius: 28px;
  --display: "Unbounded", system-ui, sans-serif; --dw: 400; --dcase: none; --dls: -.02em; --dsize: .86;
  --title-shadow: none;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --btn-bg: #a62f20; --btn-ink: #f5efe6; --btn-border: 1px solid #a62f20; --btn-shadow: 0 12px 24px -16px rgba(166, 47, 32, .8);
  --btn-font: 600 1rem/1.1 "Outfit", system-ui, sans-serif; --btn-radius: 999px;
  --kicker-prefix: "";
  --focus: #d9432b;
  --pen: #a62f20;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg-img), var(--bg);
  background-color: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  /* Sin transición de color: el cambio de filtro ocurre bajo el destello y animarlo recalculaba toda la página */
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Sin JavaScript el filtro global se queda en editorial: cada sección pinta su propio fondo y color
   para que su texto se lea (con JS, el filtro de toda la página cambia según la sección) */
html:not(.js) main [data-mode]:not([data-mode="editorial"]) { background: var(--bg-img), var(--bg); color: var(--ink); }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* Los destinos de los enlaces internos reciben el foco (para que el Tab siga desde ahí) pero no llevan anillo */
[tabindex="-1"]:focus-visible { outline: none; }
/* El encabezado es fijo: con scroll-padding-top, enfocar sus enlaces con Tab hacía que la página subiera.
   Con este margen negativo el navegador los da por visibles y no desplaza nada */
.site-header :is(a, summary, button) { scroll-margin-top: -5rem; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--ink); color: var(--bg); padding: .7rem 1rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.pending { outline: 2px dashed var(--c1); outline-offset: 2px; padding-inline: .2em; border-radius: 3px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left)); }
.section { position: relative; padding-block: clamp(5rem, 11vw, 9rem); overflow-x: clip; }
/* El navegador no calcula ni pinta una sección hasta que está cerca de la pantalla */
.section, .tapes { content-visibility: auto; contain-intrinsic-size: auto 900px; }

.kicker {
  display: inline-block;
  margin: 0 0 1.4rem;
  padding: .35em .85em;
  background: var(--ink); color: var(--bg);
  font: 700 .85rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-2deg);
}
.kicker::before { content: var(--kicker-prefix); color: var(--c2); }
[data-mode="neon"] .kicker { background: transparent; color: var(--c3); border: 1px solid var(--c3); box-shadow: 0 0 12px rgba(182, 255, 59, .4); }
[data-mode="plano"] .kicker { background: transparent; color: var(--c2); border: 1.5px dashed var(--c2); transform: none; }
[data-mode="terminal"] .kicker { background: transparent; color: var(--c2); padding-left: 0; transform: none; }
[data-mode="comic"] .kicker { background: #ffd60a; color: #111; border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; }
[data-mode="editorial"] .kicker { display: inline-flex; align-items: center; gap: .65rem; background: none; color: var(--muted); padding: 0; transform: none; font: 500 .74rem/1.2 var(--display); letter-spacing: .14em; }
[data-mode="editorial"] .kicker::before { content: ""; flex: none; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; border: 3.5px solid var(--c1); }

.title {
  font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dls);
  font-size: calc(clamp(2.1rem, 1.1rem + 4.4vw, 4.6rem) * var(--dsize));
  line-height: 1.02;
  text-shadow: var(--title-shadow);
  max-width: 18ch;
}
[data-mode="neon"] .title { color: #ffe6f2; font-style: italic; }
.lead { max-width: 56ch; margin-top: 1.5rem; font-size: 1.12rem; color: var(--muted); }
.subtitle {
  font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dls);
  font-size: calc(clamp(1.6rem, 1.1rem + 2vw, 2.6rem) * var(--dsize));
  text-shadow: var(--title-shadow);
}
[data-mode="neon"] .subtitle { color: #ffe6f2; font-style: italic; }
.note { margin-top: 1.5rem; font-size: .92rem; color: var(--muted); max-width: 60ch; }

/* ---------------------------------------------------------------------
   3. Botones
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 54px; padding: .9rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-ink);
  border: var(--btn-border); border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  font: var(--btn-font); text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .3s, color .3s;
}
.btn .icon { width: 22px; height: 22px; }
.btn:hover { transform: translate(-3px, -3px) rotate(-1deg); }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-alt { background: var(--card); color: var(--ink); }
[data-mode="neon"] .btn-main { text-shadow: 0 0 8px rgba(45, 245, 255, .8); }
.btn-sm { min-height: 44px; padding: .55rem 1rem; font-size: .85rem; }
[data-mode="editorial"] .btn { text-transform: none; letter-spacing: 0; }
[data-mode="editorial"] .btn:hover { transform: translateY(-2px); }
[data-mode="editorial"] .btn-main:hover { background: #8f2a1c; border-color: #8f2a1c; }
@media (max-width: 400px) { [data-mode="editorial"] .btn { padding-inline: 1.1rem; gap: .5rem; } }
[data-mode="editorial"] .btn-alt { background: transparent; }

/* ---------------------------------------------------------------------
   4. Encabezado y botón flotante
   --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(.6rem + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) .6rem max(20px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: var(--border-thin);

}
/* Logo de Kaleido Estudio (sprite de tools/brand/build.py). Letras y anillo en tinta o papel según el filtro;
   las piezas de la O siempre a color. Se encoge si no cabe junto a los botones, en vez de ensanchar la página */
:root { --logo-ink: #1b1a17; }
[data-mode="neon"], [data-mode="plano"], [data-mode="terminal"] { --logo-ink: #f5efe6; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--logo-ink); text-decoration: none; }
.wordmark .logo { display: block; width: 150px; max-width: 100%; height: auto; aspect-ratio: 451.85 / 84.69; }
.site-header > :not(.wordmark) { flex: none; }
.nav-desktop { display: none; align-items: center; gap: .3rem; }
.nav-desktop a:not(.btn) { padding: .55rem .75rem; font-weight: 600; text-decoration: none; border-radius: 999px; }
.nav-desktop a:not(.btn):hover { background: var(--ink); color: var(--bg); }
.nav-mobile { position: relative; }
.nav-mobile summary {
  list-style: none; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1rem;
  border: var(--border-thin); border-radius: 999px; font-weight: 700; cursor: pointer;
  background: var(--card);
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile nav {
  position: absolute; right: 0; top: calc(100% + .6rem);
  width: min(300px, calc(100vw - 40px));
  display: grid; gap: .2rem; padding: .6rem;
  background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius);
  /* Con el celular acostado el menú no cabía: se desplaza dentro de su caja */
  max-height: calc(100svh - 6rem); overflow-y: auto; overscroll-behavior: contain;
}
/* Con el menú abierto, el botón flotante de WhatsApp no tapa sus opciones */
.menu-open .float-wa { visibility: hidden; }   /* la clase la pone b.js */
.nav-mobile nav a:not(.btn) { display: flex; align-items: center; min-height: 46px; padding: 0 .8rem; text-decoration: none; font-weight: 600; }
.nav-mobile nav .btn { margin-top: .4rem; }
@media (min-width: 980px) { .nav-desktop { display: flex; } .nav-mobile { display: none; } }
/* Con seis secciones en el menú, menos aire entre enlaces hasta que haya espacio */
@media (min-width: 980px) and (max-width: 1139px) { .nav-desktop { gap: .1rem; } .nav-desktop a:not(.btn) { padding-inline: .5rem; } }

.float-wa {
  position: fixed; z-index: 80;
  right: max(12px, env(safe-area-inset-right)); bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 56px; padding: 0 1.1rem;
  background: var(--btn-bg); color: var(--btn-ink); border: var(--btn-border); border-radius: 999px;
  box-shadow: var(--btn-shadow);
  font: var(--btn-font); text-transform: uppercase; text-decoration: none;
  transition: transform .25s, opacity .25s;
}
[data-mode="neon"] .float-wa { background: #ff2e88; color: #1a0010; border-color: #ff2e88; box-shadow: 0 0 22px rgba(255, 46, 136, .7); }
.float-wa .icon { width: 24px; height: 24px; }
.float-wa:hover { transform: translateY(-3px) rotate(-3deg); }
.float-wa.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 520px) { .float-wa span { display: none; } .float-wa { width: 56px; padding: 0; justify-content: center; } }

/* ---------------------------------------------------------------------
   5. Cambio de filtro: destello tipo cámara
   --------------------------------------------------------------------- */
.flash {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, rgba(255, 0, 90, .45), rgba(0, 240, 255, .45));
  mix-blend-mode: hard-light;
}
.flash-label {
  font: 700 clamp(1rem, .7rem + 2vw, 1.8rem)/1 "Space Mono", monospace; text-transform: uppercase; letter-spacing: .2em;
  color: #fff; background: #000; padding: .6em 1em;
}
.switching .flash { animation: flash .7s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes flash {
  0% { opacity: 0; clip-path: inset(0 0 0 0); }
  12% { opacity: .75; clip-path: inset(0 0 0 0); }
  30% { opacity: .55; clip-path: inset(20% 0 35% 0); }
  48% { opacity: .5; clip-path: inset(55% 0 10% 0); }
  70% { opacity: .3; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(7.5rem, 14vw, 9rem) max(20px, env(safe-area-inset-left)) 7rem;
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes breathe { from { scale: 1 .86; } to { scale: .9 1.08; } }
/* Fuera de pantalla, el inicio deja de animarse */

/* Hoja principal: papel con doble filete, como papelería fina */
.hero-board {
  position: relative; z-index: 2;
  width: 100%; max-width: 1000px;
  padding: clamp(2.2rem, 6vw, 5rem) clamp(1.4rem, 5vw, 5rem);
  background: var(--card); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);

}
.hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.6rem; font: 500 .74rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-kicker::before { content: ""; flex: none; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; border: 3.5px solid var(--c1); }
.hero-title {
  display: grid; justify-items: start; gap: .04em; margin: 0;
  font-family: var(--display); font-weight: var(--dw, 600); letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(2.4rem, .9rem + 6.2vw, 6.2rem); color: var(--ink);
}
.ht-line { display: inline-block; }
.ht-em { position: relative; color: var(--c1); padding-right: .08em; }
/* Floritura de tinta bajo "cambia.": se escribe de izquierda a derecha */
.flourish { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .3em; fill: var(--c1); overflow: visible; }
.js .flourish { clip-path: inset(0 100% 0 0); animation: ink-in 1.1s 1.8s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes ink-in { to { clip-path: inset(0 -2% 0 0); } }

.bulbs { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }
/* Se encienden por pasos, como focos de marquesina: solo 2 repintados por ciclo */
.bulbs rect { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 24; animation: chase 1.1s steps(2, jump-none) infinite; }
.bulbs-a { stroke: var(--c2); filter: drop-shadow(0 0 5px var(--c2)); }
.bulbs-b { stroke: var(--c1); stroke-dashoffset: 12; animation-name: chase-b !important; filter: drop-shadow(0 0 5px var(--c1)); }
@keyframes chase { to { stroke-dashoffset: -12; } }
@keyframes chase-b { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
.hero-lead { max-width: 52ch; margin: 1.8rem 0 2rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 479px) { .hero-actions .btn { width: 100%; } }

/* Letras sueltas: caen al cargar y brincan al pasar el cursor */
.split .word { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; }
.js .split .ch { animation: drop .8s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--base, 0s) + var(--i) * 32ms); }
/* Al terminar de caer, la letra queda quieta; al pasar el cursor desaparece y vuelve a caer una vez */
.js .split .ch.landed { animation: none; }
/* Mientras corre la intro de Kaleido, las letras del titular y la floritura esperan */
.ki-playing .split .ch, .ki-playing .flourish { animation-play-state: paused; }
.js .split .ch.landed.redrop { animation: redrop 1.95s cubic-bezier(.3, .9, .4, 1) both; }
.ht-line:nth-child(1) { --base: .15s; } .ht-line:nth-child(2) { --base: .45s; } .ht-line:nth-child(3) { --base: .8s; }
@keyframes drop { from { transform: translateY(-140%) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* 1.95 s en total: desaparece (0.13 s), espera invisible 1 s y vuelve a caer con rebote (0.82 s) */
@keyframes redrop {
  0% { transform: none; opacity: 1; }
  6.7% { transform: translateY(18%) scale(1.25, .6); opacity: 0; }
  7% { transform: translateY(-160%) rotate(-24deg); opacity: 0; }
  58% { transform: translateY(-160%) rotate(-24deg); opacity: 0; }
  66% { opacity: 1; }
  81% { transform: translateY(9%) rotate(4deg); opacity: 1; }
  91% { transform: translateY(-7%) rotate(-1deg); }
  100% { transform: none; opacity: 1; }
}

/* Letrero de planes (filtro rótulo): focos que se persiguen y la estrella de 6 meses */
.plans-sign {
  --rest: rotate(-1deg);
  position: relative;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 12vw, 11rem) clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 5vw, 3.6rem);
  background: var(--card); border: var(--border); border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow);
  transform: var(--rest);
}
.plans-sign .lead { margin-bottom: 0; }
/* Planes cambia de filtro un poco antes que las demás (data-switch="early", al 82 % de la pantalla).
   El espacio extra arriba separa el letrero del plano anterior y deja sitio a la estrella:
   las secciones están contenidas (content-visibility) y recortan lo que sobresale. */
.section.plans-sec { padding-top: calc(18vh + 4.5rem); }
/* Más aire entre complementos (riso) y la terminal, y entre la terminal y el cómic */
.section#diagnostico { padding-top: calc(clamp(5rem, 11vw, 9rem) + 4rem); }
/* Nosotros también cambia antes (al 82 %): este espacio separa la terminal del cómic y evita que el "¡Abierto!" se vea con el filtro anterior */
.section#nosotros { padding-top: calc(18vh + 3rem); }
@media (max-width: 760px) {
  .section#diagnostico { padding-top: 7rem; }
}
.burst {
  position: absolute; z-index: 3;
  top: -56px; right: -40px;
  width: clamp(134px, 16vw, 200px); aspect-ratio: 1;
  display: grid; place-items: center;
  container-type: inline-size;
}
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.burst path { fill: var(--c2); stroke: var(--ink); stroke-width: 3; }
.burst-text {
  position: relative; display: grid; justify-items: center; gap: .12em;
  rotate: -12deg; text-align: center; line-height: 1;
  font-size: clamp(.72rem, .5rem + .75vw, 1.05rem);
  font-size: 9.6cqi; /* crece con la estrella para rellenarla */
  color: var(--on-c2);
}
.burst-text .b1 { font: 400 1.25em/1 "Bungee", sans-serif; }
.burst-text small { font: 800 .62em/1.1 "Rubik", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.burst-text .b2 { font: 400 1.6em/1 "Bungee", sans-serif; color: var(--c1); }
[data-mode="neon"] .burst-text .b2 { color: #b0005a; }
/* La O viva (js/kscope.js) */
.kscope { position: relative; aspect-ratio: 1; color: var(--ink); touch-action: pan-y; }
.kscope[data-drag] { cursor: grab; }
.kscope.is-dragging { cursor: grabbing; }
.kscope svg, .kscope canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.kscope-bg { fill: var(--bg); }
.kscope canvas { opacity: 0; transition: opacity .45s ease; }   /* aparece encima de la O del logo, que queda debajo */
.kscope.is-live canvas { opacity: 1; }
/* En el inicio: en celular y tableta va grande y centrada, debajo de la hoja; en escritorio, a la derecha */
.hero .kscope {
  z-index: 3; justify-self: center;
  width: min(74vw, 340px);
  margin: clamp(1.6rem, 6vw, 2.5rem) 0 0;
  filter: drop-shadow(0 14px 18px rgba(27, 26, 23, .22));
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 640px) minmax(0, 440px); justify-content: center; column-gap: clamp(2.5rem, 5vw, 5.5rem); }
  .hero .kscope { justify-self: stretch; width: 100%; margin: 0; filter: none; }
}
}

/* ---------------------------------------------------------------------
   7. Cintas
   --------------------------------------------------------------------- */
.tapes { position: relative; height: 190px; overflow: hidden; margin-top: -40px; z-index: 3; }
.tape { position: absolute; left: -5%; width: 110%; padding: .85rem 0; overflow: hidden; box-shadow: 0 6px 0 rgba(0, 0, 0, .15); }
.tape-1 { top: 40px; background: var(--c1); color: var(--on-c1); rotate: -3deg; }
.tape-2 { top: 100px; background: var(--ink); color: var(--c2); rotate: 2deg; }
.tape-track { display: flex; width: max-content; animation: marquee 32s linear infinite; font: 400 clamp(1rem, .8rem + .9vw, 1.5rem)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.tape-2 .tape-track { animation-direction: reverse; animation-duration: 40s; }
[data-mode="neon"] .tape-1 { box-shadow: 0 0 30px rgba(255, 46, 136, .6); }
[data-mode="editorial"] .tape-track { font-style: normal; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(.85rem, .7rem + .6vw, 1.15rem); }
[data-mode="editorial"] .tape { box-shadow: 0 10px 20px -12px rgba(30, 26, 22, .4); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   8. Por qué tener un sitio: tres razones unidas por un trazo de tinta
   El trazo pasa por las manchas de los íconos y se dibuja al bajar (b.js lo calcula).
   --------------------------------------------------------------------- */
.ink-path { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); }
.ink-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ink-stroke {
  fill: none; stroke: var(--pen, var(--ink)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: var(--ink-left, 1);
  opacity: .8;
}
.ink-drops circle { fill: var(--pen, var(--ink)); opacity: 0; transition: opacity .5s; }
.ink-drops circle.on { opacity: .85; }

.ink-steps { position: relative; z-index: 1; display: grid; gap: 3.2rem; }
.ink-step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.ink-step:nth-child(even) { grid-template-columns: 1fr auto; }
.ink-step:nth-child(even) .ink-mark { order: 2; }
.ink-step:nth-child(even) .ink-text { text-align: right; }

/* Mancha de acuarela irregular con el ícono a tinta */
.ink-mark {
  display: grid; place-items: center;
  width: 92px; aspect-ratio: 1;
  border-radius: 46% 54% 41% 59% / 55% 43% 57% 45%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--wash) 55%, #fff), var(--wash) 62%, color-mix(in srgb, var(--wash) 80%, var(--c1)));
  box-shadow: inset 0 -6px 12px rgba(120, 50, 20, .12);
  rotate: -6deg;
}
.ink-step:nth-child(1) .ink-mark { --wash: #f6c7b9; }
.ink-step:nth-child(2) .ink-mark { --wash: #fbdba0; border-radius: 58% 42% 52% 48% / 44% 57% 43% 56%; rotate: 8deg; }
.ink-step:nth-child(3) .ink-mark { --wash: #f6c6d3; border-radius: 43% 57% 60% 40% / 52% 46% 54% 48%; rotate: -3deg; }
.ink-mark .icon { width: 44%; height: 44%; color: var(--pen, var(--ink)); stroke-width: 1.5; rotate: inherit; scale: 1; }
.ink-step:nth-child(2) .ink-mark .icon { rotate: -8deg; }
.ink-step:nth-child(1) .ink-mark .icon, .ink-step:nth-child(3) .ink-mark .icon { rotate: 5deg; }

.ink-text { padding-top: .5rem; max-width: 34ch; }
.ink-step:nth-child(even) .ink-text { margin-left: auto; }
.ink-no { display: block; font: 500 .95rem var(--display); color: var(--c1); margin-bottom: .25rem; }
.ink-text h3 { font-family: var(--display); font-weight: var(--dw); font-size: calc(1.55rem * var(--dsize)); margin-bottom: .45rem; }
.ink-text p { margin: 0; color: var(--muted); }

/* Escritorio: tres columnas; la del centro más abajo para que el trazo ondule */
@media (min-width: 900px) {
  .ink-steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; align-items: start; }
  .ink-step, .ink-step:nth-child(even) { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ink-step:nth-child(even) .ink-mark { order: 0; }
  .ink-step:nth-child(even) .ink-text { text-align: center; margin-left: 0; }
  .ink-step:nth-child(2) { margin-top: 7rem; }
  .ink-mark { width: 112px; }
  .ink-text { max-width: 30ch; }
}

.speed {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding: 1.4rem 1.8rem; max-width: 62ch;
  text-align: center;
  background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius);
}
.speed .icon { color: var(--c1); width: 30px; height: 30px; }

/* ---------------------------------------------------------------------
   9. Tu letrero (generador)
   --------------------------------------------------------------------- */
.neon-word { font-family: "Monoton", "Bungee", sans-serif; font-style: normal; font-weight: 400; letter-spacing: .02em; color: var(--c1); }
[data-mode="neon"] .neon-word { color: #ffe6f2; text-shadow: 0 0 4px #fff, 0 0 14px #2df5ff, 0 0 34px #2df5ff, 0 0 70px #2df5ff; animation: buzz 6s infinite; }
@keyframes buzz { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }

.maker-controls {
  display: grid; gap: 1.5rem; margin-top: 2.5rem; padding: 1.5rem;
  background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius);
}
@media (min-width: 900px) { .maker-controls { grid-template-columns: 1fr 1fr; align-items: start; } }
.field label, .giros legend { display: block; font-weight: 700; margin-bottom: .6rem; }
.field input {
  width: 100%; min-height: 60px; padding: .7rem 1rem;
  background: var(--bg); color: var(--ink); border: var(--border); border-radius: calc(var(--radius) / 1.5);
  font: 400 1.4rem/1 "Bungee", sans-serif;
}
.field input::placeholder { color: var(--muted); opacity: .7; }
.field input:focus-visible { outline: 3px solid var(--focus); }
.field small { display: block; margin-top: .5rem; color: var(--muted); font-size: .85rem; }
.giros { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.giros legend { width: 100%; }
.giros label { position: relative; }
.giros input { position: absolute; opacity: 0; pointer-events: none; }
.giros span {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .5rem 1rem;
  border: var(--border-thin); border-radius: 999px; font-weight: 700; cursor: pointer; background: var(--bg);
  transition: background-color .2s, color .2s, transform .2s;
}
.giros span:hover { transform: rotate(-3deg) scale(1.05); }
.giros input:checked + span { background: var(--c1); color: var(--on-c1); }
.giros input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

.signs { display: grid; gap: 1.6rem; margin-top: 2.5rem; perspective: 900px; }
@media (min-width: 720px) { .signs { grid-template-columns: 1fr 1fr; } }
.sign { margin: 0; }
.sign-face {
  position: relative; overflow: hidden;
  min-height: 210px; padding: 1.5rem;
  display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center;
  transition: transform .6s cubic-bezier(.3, 1.4, .4, 1);
}
.signs.flip .sign-face { animation: flip .7s cubic-bezier(.3, 1.3, .4, 1); }
.signs.flip .sign:nth-child(2) .sign-face { animation-delay: .07s; }
.signs.flip .sign:nth-child(3) .sign-face { animation-delay: .14s; }
.signs.flip .sign:nth-child(4) .sign-face { animation-delay: .21s; }
@keyframes flip { 0% { transform: rotateX(0); } 45% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.sign-name { font-size: calc(2.3rem * var(--fit, 1)); line-height: 1.05; word-break: break-word; }
.sign-tag { font-size: 1.05rem; }
.sign figcaption { margin-top: .7rem; font: 700 .8rem/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

/* Cada estilo usa variables y cada giro las cambia: colores, letras, texturas */
.signs {
  --p-bg: #ffd400; --p-ink: #d1001f; --p-tag: #1b2a9c; --p-line: #161210; --p-shadow: #d1001f; --p-icon: #161210;
  --p-font: "Bungee Shade", "Bungee", sans-serif; --p-weight: 400; --p-style: normal;
  --p-tagfont: "Permanent Marker", cursive; --p-tagweight: 400; --p-tagstyle: normal;
  --p-pattern: repeating-linear-gradient(0deg, transparent 0 46px, rgba(22, 18, 16, .08) 46px 48px);
  --n-glow: #ff2e88; --n-glow2: #2df5ff; --n-ink: #ffe6f2; --n-tag: #d9fdff;
  --n-font: "Monoton", sans-serif; --n-weight: 400; --n-style: normal; --n-size: 2rem;
  --b-bg: #0f3d91; --b-grid: rgba(255, 255, 255, .1); --b-ink: #ffffff; --b-tag: #ffd84a;
  --r-bg: #f6f0e2; --r-ink: #2a2a8f; --r-pink: rgba(255, 72, 176, .85); --r-band: #ffe800; --r-dot: rgba(255, 72, 176, .28);
}
.signs[data-giro="cafe"] {
  --p-bg: #f3e2c7; --p-ink: #6b3a1e; --p-tag: #2f6b3a; --p-line: #3a2418; --p-shadow: #2f6b3a; --p-icon: #6b3a1e;
  --p-font: "Fraunces", Georgia, serif; --p-weight: 600; --p-style: italic;
  --p-tagfont: "Fraunces", Georgia, serif; --p-tagweight: 600; --p-tagstyle: italic;
  --p-pattern: repeating-conic-gradient(rgba(107, 58, 30, .1) 0 25%, transparent 0 50%) 0 0 / 36px 36px;
  --n-glow: #ffb000; --n-glow2: #ff5a1f; --n-ink: #fff3d6; --n-tag: #ffe0c2;
  --n-font: "Fraunces", Georgia, serif; --n-weight: 600; --n-style: italic; --n-size: 2.3rem;
  --b-bg: #7a5230; --b-grid: rgba(255, 236, 200, .16); --b-ink: #fff3dc; --b-tag: #ffd59e;
  --r-bg: #f7ead8; --r-ink: #6b3a1e; --r-pink: rgba(255, 108, 47, .8); --r-band: #9ed8a0; --r-dot: rgba(255, 108, 47, .28);
}
.signs[data-giro="gym"] {
  --p-bg: #141614; --p-ink: #b6ff3b; --p-tag: #ffffff; --p-line: #b6ff3b; --p-shadow: #ff2e3a; --p-icon: #b6ff3b;
  --p-font: "Bungee", sans-serif; --p-weight: 400; --p-style: normal;
  --p-tagfont: "Rubik", sans-serif; --p-tagweight: 800; --p-tagstyle: italic;
  --p-pattern: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(182, 255, 59, .1) 18px 30px);
  --n-glow: #b6ff3b; --n-glow2: #2df5ff; --n-ink: #f2ffe0; --n-tag: #d9fdff;
  --n-font: "Bungee", sans-serif; --n-weight: 400; --n-style: normal; --n-size: 1.9rem;
  --b-bg: #1b1f1c; --b-grid: rgba(182, 255, 59, .16); --b-ink: #b6ff3b; --b-tag: #ffffff;
  --r-bg: #eef7e4; --r-ink: #141614; --r-pink: rgba(182, 255, 59, .95); --r-band: #ff48b0; --r-dot: rgba(20, 22, 20, .16);
}
.signs[data-giro="clinic"] {
  --p-bg: #f4fbfc; --p-ink: #1f6f80; --p-tag: #12303b; --p-line: #12303b; --p-shadow: #7fd3df; --p-icon: #1f6f80;
  --p-font: "Rubik", sans-serif; --p-weight: 800; --p-style: normal;
  --p-tagfont: "Fraunces", Georgia, serif; --p-tagweight: 600; --p-tagstyle: italic;
  --p-pattern: radial-gradient(circle at 12px 12px, rgba(31, 111, 128, .14) 2px, transparent 2.5px) 0 0 / 24px 24px;
  --n-glow: #7fdcff; --n-glow2: #ffffff; --n-ink: #f0fbff; --n-tag: #e0f7ff;
  --n-font: "Rubik", sans-serif; --n-weight: 600; --n-style: normal; --n-size: 2.1rem;
  --b-bg: #0d5c63; --b-grid: rgba(255, 255, 255, .12); --b-ink: #ffffff; --b-tag: #b5f5ff;
  --r-bg: #eaf6f7; --r-ink: #0d5c63; --r-pink: rgba(255, 122, 107, .85); --r-band: #ffe800; --r-dot: rgba(255, 122, 107, .28);
}
.sign-icon { width: 36px; height: 36px; }

.sign-painted .sign-face { background: var(--p-pattern), var(--p-bg); border: 6px solid var(--p-line); border-radius: 14px; box-shadow: 8px 8px 0 var(--p-shadow); }
.sign-painted .sign-icon { width: 40px; height: 40px; color: var(--p-icon); }
.sign-painted .sign-name { font-family: var(--p-font); font-weight: var(--p-weight); font-style: var(--p-style); color: var(--p-ink); }
.sign-painted .sign-tag { font-family: var(--p-tagfont); font-weight: var(--p-tagweight); font-style: var(--p-tagstyle); color: var(--p-tag); font-size: 1.3rem; }

.sign-neon .sign-face {
  background: #120a1c; border-radius: 18px; border: 2px solid #2b1f3d;
  background-image: repeating-linear-gradient(0deg, transparent 0 28px, rgba(255, 255, 255, .05) 28px 30px), repeating-linear-gradient(90deg, transparent 0 58px, rgba(255, 255, 255, .04) 58px 60px);
}
.sign-neon .sign-icon { color: var(--n-ink); filter: drop-shadow(0 0 4px var(--n-glow2)) drop-shadow(0 0 12px var(--n-glow2)); }
.sign-neon .sign-name { font-family: var(--n-font); font-weight: var(--n-weight); font-style: var(--n-style); font-size: calc(var(--n-size) * var(--fit, 1)); word-spacing: .3em; color: var(--n-ink); text-shadow: 0 0 4px #fff, 0 0 12px var(--n-glow), 0 0 30px var(--n-glow), 0 0 60px var(--n-glow); animation: buzz 5s infinite; }
.sign-neon .sign-tag { font-family: "Fraunces", serif; font-style: italic; font-weight: 600; color: var(--n-tag); text-shadow: 0 0 8px var(--n-glow2), 0 0 20px var(--n-glow2); }

.sign-blueprint .sign-face {
  background-color: var(--b-bg); border-radius: 4px;
  background-image: linear-gradient(var(--b-grid) 1px, transparent 1px), linear-gradient(90deg, var(--b-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
.sign-blueprint .sign-icon { color: var(--b-tag); }
.sign-blueprint .sign-name { font-family: "Space Mono", monospace; font-weight: 700; text-transform: uppercase; color: var(--b-ink); padding: .2em .4em; border: 1.5px dashed var(--b-ink); font-size: calc(1.9rem * var(--fit, 1)); }
.sign-blueprint .sign-tag { font-family: "Space Mono", monospace; font-size: .85rem; color: var(--b-tag); }
.sign-blueprint .sign-face::after { content: "← escala 1:1 →"; position: absolute; bottom: .6rem; font: 400 .7rem "Space Mono", monospace; color: var(--b-tag); opacity: .8; }

.sign-riso .sign-face {
  border-radius: 26px; border: 2.5px solid var(--r-ink);
  background: radial-gradient(circle at 82% 20%, var(--r-pink) 0 56px, transparent 57px), radial-gradient(circle at 1px 1px, var(--r-dot) 1.3px, transparent 1.6px) 0 0 / 10px 10px, var(--r-bg);
}
.sign-riso .sign-icon { color: var(--r-ink); }
.sign-riso .sign-name { font-family: "Rubik", sans-serif; font-weight: 900; text-transform: uppercase; color: var(--r-ink); text-shadow: 4px 3px 0 var(--r-pink); letter-spacing: -.03em; }
.sign-riso .sign-tag { font-family: "Rubik", sans-serif; font-weight: 800; color: var(--r-ink); background: var(--r-band); padding: .15em .6em; rotate: -2deg; }

/* Sitios de ejemplo (bloque "Lámina 02" dentro de Cómo trabajamos).
   Cada tarjeta usa los colores de su marca ficticia; el logo y la vista del celular son
   archivos de /img/ejemplos/ (generados con tools/logos y tools/vistas-ejemplos.mjs). */
.showcase { margin-top: clamp(4rem, 9vw, 6.5rem); scroll-margin-top: 5.5rem; }
.showcase-title {
  margin-top: .9rem; max-width: 22ch; text-wrap: balance; line-height: 1.08;
  font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dls);
  font-size: calc(clamp(1.7rem, 1.1rem + 2.6vw, 2.9rem) * var(--dsize));
}
/* Planes cambia de filtro antes (al 82 %), cuando el final de esta sección aún se ve sobre el fondo de rótulo.
   La nota y los puntos del carrusel llevan su propio recuadro de plano para leerse con cualquier fondo */
.showcase .note { display: inline-block; padding: .7rem 1rem; background: var(--card); border: var(--border-thin); border-radius: var(--radius); color: var(--muted); }
.showcase .rail-nav { width: max-content; margin-inline: auto; padding: .35rem .7rem; background: var(--card); border-radius: 999px; color: var(--ink); }
.showcase-grid { display: grid; gap: 1.25rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 18px; text-decoration: none; background: var(--sc-bg); color: var(--sc-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 16px 32px -18px rgba(0, 0, 0, .6);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.site-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 24px 40px -18px rgba(0, 0, 0, .7); }
.site-card:focus-visible { outline: 3px solid var(--c2); outline-offset: 4px; }
.sc-plate {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 1.4rem;
  /* La fila del celular no se encoge: el celular es más alto que la caja y la caja lo recorta abajo */
  grid-template-rows: auto max-content;
  height: 300px; padding: 1.7rem 1.25rem 0; overflow: hidden; background-color: var(--sc-bg);
}
.sc-logo { display: block; width: auto; height: 46px; max-width: 88%; object-fit: contain; }
.sc-phone {
  width: 62%; max-width: 190px; aspect-ratio: 1 / 2; overflow: hidden; background: #fff;
  border: 6px solid var(--sc-frame); border-bottom: 0; border-radius: 24px 24px 0 0;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55);
  transform: translateY(12px); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.sc-phone img { display: block; width: 100%; height: auto; }
.site-card:hover .sc-phone, .site-card:focus-visible .sc-phone { transform: translateY(-12px); }
.sc-body {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.2rem 1.25rem 1.35rem;
  border-top: 1px solid var(--sc-line); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sc-giro { font: 700 .74rem/1.2 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-muted); }
.sc-idea { margin-bottom: .45rem; font-size: .98rem; line-height: 1.45; color: var(--sc-ink); }
.sc-go {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: auto;
  min-height: 44px; padding: 0 1.05rem; border-radius: 999px;
  background: var(--sc-acc); color: var(--sc-acc-ink); font-weight: 700; font-size: .95rem;
}
.sc-go .icon { width: 18px; height: 18px; transition: transform .25s; }
.site-card:hover .sc-go .icon { transform: translateX(4px); }
/* Colores y un detalle de cada marca */
.sc-taller { --sc-bg: #f3f1ec; --sc-ink: #16181b; --sc-muted: #4f555c; --sc-acc: #f5b800; --sc-acc-ink: #16181b; --sc-frame: #16181b; --sc-line: rgba(22, 24, 27, .2); }
.sc-taller .sc-body { border-top: 2px dashed rgba(22, 24, 27, .4); }
.sc-cafeteria { --sc-bg: #2c3e8f; --sc-ink: #f4ecdf; --sc-muted: #d6dcf5; --sc-acc: #f4ecdf; --sc-acc-ink: #2c3e8f; --sc-frame: #17130f; --sc-line: rgba(244, 236, 223, .28); }
.sc-cafeteria .sc-plate { background-image: radial-gradient(rgba(244, 236, 223, .16) 1px, transparent 1.6px); background-size: 12px 12px; }
.sc-gimnasio { --sc-bg: #141414; --sc-ink: #f2efe8; --sc-muted: #bdb8af; --sc-acc: #d63a1f; --sc-acc-ink: #fff; --sc-frame: #2b2b2b; --sc-line: rgba(242, 239, 232, .18); }
.sc-gimnasio .sc-plate { background-image: linear-gradient(-24deg, transparent 0 40%, #d63a1f 40% 46%, transparent 46%); }
.sc-consultorio { --sc-bg: #1f3a2c; --sc-ink: #fbf7ef; --sc-muted: #c4d6ca; --sc-acc: #8fd3a3; --sc-acc-ink: #0b1a11; --sc-frame: #0a120d; --sc-line: rgba(251, 247, 239, .2); }
.sc-consultorio .sc-plate {
  background-image: repeating-linear-gradient(to bottom, rgba(143, 211, 163, .55) 0 1px, transparent 1px 10px),
                    repeating-linear-gradient(to bottom, rgba(143, 211, 163, .55) 0 1px, transparent 1px 50px);
  background-size: 10px 100%, 18px 100%; background-repeat: no-repeat; background-position: 0 1.7rem, 0 1.7rem;
}
@media (prefers-reduced-motion: reduce) {
  .site-card, .sc-phone, .sc-go .icon { transition: none; }
  .site-card:hover, .site-card:hover .sc-go .icon { transform: none; }
  .site-card:hover .sc-phone, .site-card:focus-visible .sc-phone { transform: translateY(12px); }
}

/* ---------------------------------------------------------------------
   10. Plano: cómo trabajamos
   --------------------------------------------------------------------- */
.bp-layout { display: grid; gap: 3rem; margin-top: 3rem; align-items: center; }
@media (min-width: 900px) { .bp-layout { grid-template-columns: .8fr 1.2fr; } }
.bp-drawing { width: min(100%, 340px); margin-inline: auto; overflow: visible; }
.bp-lines { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bp-dims { fill: none; stroke: var(--c2); stroke-width: 1.2; }
.bp-dims text { fill: var(--c2); stroke: none; font: 400 11px "Space Mono", monospace; }
.js .bp-drawing .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .bp-layout.is-in .draw { animation: draw 1.4s cubic-bezier(.6, 0, .2, 1) forwards; }
.js .bp-layout.is-in .draw:nth-child(2) { animation-delay: .25s; }
.js .bp-layout.is-in .draw:nth-child(3) { animation-delay: .45s; }
.js .bp-layout.is-in .draw:nth-child(4) { animation-delay: .6s; }
.js .bp-layout.is-in .draw:nth-child(5) { animation-delay: .75s; }
.js .bp-layout.is-in .draw:nth-child(6) { animation-delay: .85s; }
.js .bp-layout.is-in .draw:nth-child(7) { animation-delay: .95s; }
.js .bp-layout.is-in .draw:nth-child(8) { animation-delay: 1.1s; }
.js .bp-layout.is-in .draw:nth-child(9) { animation-delay: 1.25s; }
.js .bp-layout.is-in .draw:nth-child(10) { animation-delay: 1.4s; }
.js .bp-layout.is-in .bp-dims .draw { animation-delay: 1.7s; }
.js .bp-drawing text { opacity: 0; transition: opacity .6s 2.2s; }
.js .bp-layout.is-in .bp-drawing text { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.bp-steps { display: grid; gap: 1.2rem; counter-reset: s; }
.bp-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.3rem; background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius); }
.bp-num { font: 700 2.4rem/1 "Space Mono", monospace; color: var(--c2); }
[data-mode="rotulo"] .bp-num, [data-mode="riso"] .bp-num { color: var(--c1); -webkit-text-stroke: 1.5px var(--ink); }
.bp-steps h3 { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); font-size: calc(1.3rem * var(--dsize)); margin-bottom: .4rem; }
[data-mode="neon"] .bp-steps h3 { font-style: italic; }
.bp-steps h3 .icon { color: var(--c2); }
.bp-steps p { margin: 0; color: var(--muted); }

/* ---------------------------------------------------------------------
   11. Planes: etiquetas de precio, boletos, estampas y sellos
   --------------------------------------------------------------------- */
.tags { display: grid; gap: 3rem 2.6rem; margin-top: clamp(3rem, 6vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .tags { grid-template-columns: 1fr 1.08fr 1fr; } }
.tag {
  --rest: rotate(var(--tilt, 0deg));
  position: relative; display: flex; flex-direction: column;
  padding: 3rem 1.6rem 1.8rem;
  background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius);
  transform: var(--rest); transform-origin: 50% 0;
  transition: transform .45s cubic-bezier(.3, 1.6, .4, 1);
}
.tag:hover, .js .tag.is-in:hover { transform: rotate(0) translateY(-8px) scale(1.02); }
.tag-hole { position: absolute; top: 14px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--bg); border: var(--border-thin); }
.tag-hole::after { content: ""; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 40px; background: var(--ink); translate: -50% 0; }
.tag h3 { font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); letter-spacing: var(--dls); font-size: calc(2rem * var(--dsize)); text-shadow: var(--title-shadow); }
[data-mode="neon"] .tag h3 { font-style: italic; color: #ffe6f2; }
[data-mode="rotulo"] .tag h3 { text-shadow: 2px 2px 0 var(--c2); }
.tag-for { margin: .7rem 0 1.2rem; color: var(--muted); }
.tag-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0 0 1.4rem; }
.tag-price span, .ticket-price span { font-family: var(--display); font-weight: var(--dw); font-size: calc(3rem * var(--dsize)); line-height: 1; color: var(--ink); text-shadow: 3px 3px 0 var(--c1); }
[data-mode="neon"] .tag-price span, [data-mode="neon"] .ticket-price span { text-shadow: 0 0 10px #ff2e88, 0 0 30px #ff2e88; }
[data-mode="terminal"] .tag-price span, [data-mode="terminal"] .ticket-price span, [data-mode="plano"] .tag-price span, [data-mode="plano"] .ticket-price span { text-shadow: none; color: var(--c2); }
.tag-price small, .ticket-price small { font-size: .85rem; color: var(--muted); }
.tag ul, .ticket ul { display: grid; gap: .55rem; margin-bottom: 1.6rem; }
.tag li, .ticket li { position: relative; padding-left: 1.5rem; }
.tag li::before, .ticket li::before { content: "★"; position: absolute; left: 0; top: .05em; color: var(--c1); }
[data-mode="terminal"] .tag li::before, [data-mode="terminal"] .ticket li::before { content: ">"; }
[data-mode="plano"] .tag li::before, [data-mode="plano"] .ticket li::before { content: "+"; color: var(--c2); }
.tag .btn { margin-top: auto; }
.more { margin: -.6rem 0 1.4rem; }
.more summary { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 700; cursor: pointer; list-style: none; color: var(--ink); }
.more summary::-webkit-details-marker { display: none; }
.more-n { font-size: .8em; font-weight: 600; color: var(--muted); }
.more[open] .more-n { display: none; }
.more ul { margin: .6rem 0 0; }
.ticket .more { margin: 0 1.6rem 1.2rem; }
.tag-star { z-index: 2; }
@media (min-width: 980px) { .tag-star { margin-top: -.6rem; } }
.star-badge {
  position: absolute; top: -46px; right: -26px; z-index: 3;
  width: 140px; height: 140px; display: grid; place-items: center; text-align: center;
  background: var(--c2); color: var(--on-c2);
  clip-path: polygon(50.0% 0.0%, 58.7% 12.0%, 71.7% 5.0%, 74.3% 19.5%, 89.1% 18.8%, 85.1% 33.1%, 98.7% 38.9%, 89.0% 50.0%, 98.7% 61.1%, 85.1% 66.9%, 89.1% 81.2%, 74.3% 80.5%, 71.7% 95.0%, 58.7% 88.0%, 50.0% 100.0%, 41.3% 88.0%, 28.3% 95.0%, 25.7% 80.5%, 10.9% 81.2%, 14.9% 66.9%, 1.3% 61.1%, 11.0% 50.0%, 1.3% 38.9%, 14.9% 33.1%, 10.9% 18.8%, 25.7% 19.5%, 28.3% 5.0%, 41.3% 12.0%);
  font: 900 .7rem/1.1 "Rubik", sans-serif; text-transform: uppercase; letter-spacing: -.01em; padding: 0;
  animation: wobble 2.8s ease-in-out infinite;
}
@keyframes wobble { 0%, 100% { rotate: 10deg; scale: 1; } 50% { rotate: -6deg; scale: 1.08; } }

.care { margin-top: clamp(4rem, 8vw, 6rem); }
.care > p { max-width: 64ch; color: var(--muted); margin-top: .9rem; }
.tickets { display: grid; gap: 1.6rem; margin-top: 2rem; }
@media (min-width: 900px) { .tickets { grid-template-columns: 1fr 1fr; } }
.ticket {
  display: grid; gap: 0;
  align-content: start; overflow: hidden;
  background: var(--card); border: var(--border); border-radius: var(--radius);
}
.ticket-head { position: relative; padding: 1.4rem 1.6rem 1.2rem; border-bottom: 2px dashed currentColor; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-content: center; }
.ticket-head::before, .ticket-head::after {
  content: ""; position: absolute; bottom: -17px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: var(--border);
}
.ticket-head::before { left: -19px; }
.ticket-head::after { right: -19px; }
.ticket-head h4 { font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); font-size: calc(1.6rem * var(--dsize)); }
[data-mode="neon"] .ticket-head h4 { font-style: italic; color: #ffe6f2; text-shadow: 0 0 10px #ff2e88; }
.ticket-head p:not(.ticket-price) { grid-column: 1; margin: 0; color: var(--muted); font-size: .95rem; }
.ticket-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; display: grid; justify-items: end; gap: .2rem; text-align: right; }
.ticket-price span { font-size: calc(2.4rem * var(--dsize)); }
.ticket ul { padding: 1.3rem 1.6rem 0; }

.addons { margin-top: clamp(4rem, 8vw, 6rem); }
.addons > p { color: var(--muted); margin-top: .8rem; }
.stickers { display: grid; gap: 1rem 1.4rem; margin-top: 2rem; align-items: start; }
@media (min-width: 640px) { .stickers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .stickers { grid-template-columns: repeat(3, 1fr); } }
.stickers > li {
  --rest: rotate(var(--r, 0deg));
  background: var(--card); border: var(--border); border-radius: 24px; box-shadow: var(--shadow);
  transform: var(--rest);
  transition: transform .35s cubic-bezier(.3, 1.6, .4, 1);
}
.stickers > li:hover, .js .stickers > li.is-in:hover { transform: rotate(0) scale(1.03); }
.stickers summary {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  min-height: 64px; padding: .9rem 1.2rem; cursor: pointer; list-style: none;
}
.stickers summary::-webkit-details-marker { display: none; }
.stickers .icon { width: 28px; height: 28px; color: var(--c1); }
.stickers strong { font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); font-size: calc(1.05rem * var(--dsize)); line-height: 1.15; }
.stickers b { font-family: var(--display); font-weight: var(--dw); font-size: calc(1.3rem * var(--dsize)); color: var(--ink); text-align: right; max-width: 7.5em; line-height: 1.1; }
.stickers details > span { display: block; padding: 0 1.2rem 1.1rem calc(1.2rem + 28px + .9rem); color: var(--muted); font-size: .95rem; }
.stickers details[open] summary b { color: var(--c1); }
.stickers .opts { display: grid; gap: .55rem; margin: 0; padding: 0 1.2rem 1.1rem calc(1.2rem + 28px + .9rem); color: var(--muted); font-size: .93rem; }
.stickers .opts li { position: relative; padding-left: 1rem; }
.stickers .opts li::before { content: "●"; position: absolute; left: 0; font-size: .6em; top: .45em; color: var(--c1); }
.stickers .opts strong { font: inherit; font-weight: 700; color: var(--ink); text-transform: none; }
.stickers details > span:has(~ .opts) { padding-bottom: .5rem; }

.owned { margin-top: clamp(4rem, 8vw, 6rem); }
.owned-lead { max-width: 60ch; margin: .6rem 0 0; color: var(--muted); font-size: 1.05rem; }
.stamps { display: grid; gap: 2.4rem; margin-top: 2rem; }
@media (min-width: 640px) { .stamps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .stamps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1039px) { .stamps li:last-child:nth-child(odd) { grid-column: 1 / -1; } }   /* con 3 tarjetas, la última ocupa toda la fila */
.stamps li {
  display: grid; gap: .5rem; align-content: start; padding: 1.4rem;
  border: 3px solid var(--c1); outline: 2px solid var(--c1); outline-offset: -9px; border-radius: 10px;
  color: var(--ink);
  transform: rotate(-1.5deg);
}
.stamps li:nth-child(even) { transform: rotate(1.5deg); }
.stamps .icon { width: 32px; height: 32px; color: var(--c1); }
.stamps strong { font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); font-size: calc(1.05rem * var(--dsize)); }
.stamps span { color: var(--muted); font-size: .95rem; }

.fine { margin-top: 3rem; padding: 0 1.6rem; border: 2px dashed var(--muted); border-radius: var(--radius); color: var(--muted); font-size: .95rem; }
.fine summary { min-height: 56px; display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.fine summary::-webkit-details-marker { display: none; }
.fine summary::before, .more summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 700; line-height: 1; transition: rotate .25s; }
.fine[open] summary::before, .more[open] summary::before { rotate: 45deg; }
.fine ul { display: grid; gap: .45rem; padding-bottom: 1.4rem; }
.fine li { padding-left: 1.2rem; position: relative; }
.fine li::before { content: "·"; position: absolute; left: .3rem; font-weight: 900; color: var(--c1); }

/* ---------------------------------------------------------------------
   12. Terminal: diagnóstico y preguntas
   --------------------------------------------------------------------- */
.term-window { max-width: 900px; background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: calc(var(--radius) + 6px); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: var(--border-thin); font: 400 .8rem "Space Mono", monospace; color: var(--muted); }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f56; }
.term-bar i:nth-child(2) { background: #ffbd2e; }
.term-bar i:nth-child(3) { background: #27c93f; }
.term-bar span { margin-left: .6rem; }
.term-body { padding: clamp(1.4rem, 4vw, 2.6rem); }
.term-body .title { font-size: calc(clamp(1.8rem, 1.1rem + 2.6vw, 3rem) * var(--dsize)); max-width: 24ch; margin-bottom: 1rem; }
.term-body > p:not(.term-line) { color: var(--muted); max-width: 56ch; }
.term-body .btn { margin: .6rem 0 1.4rem; }
.term-line { font: 400 .95rem "Space Mono", monospace; color: var(--c2); margin-bottom: 1.2rem; }
.prompt { color: var(--c1); }
.cursor { animation: blink 1s steps(2) infinite; }
.term-output { display: grid; gap: .2rem; max-height: 300px; overflow-y: auto; margin-bottom: .4rem; font: 400 .95rem/1.5 "Space Mono", monospace; }
.term-output:empty { display: none; }
.term-out { margin: 0; color: var(--ink); white-space: pre-wrap; }
.term-out.echo { color: var(--c2); }
.term-out.err { color: var(--c4); }
.term-out a { color: var(--c1); font-weight: 700; }
.term-form { display: none; align-items: center; gap: .6rem; padding: .3rem .4rem; border-top: 1px dashed var(--muted); border-radius: 4px; }
.js .term-form { display: flex; }
.term-form:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.term-form label { font: 700 1.15rem "Space Mono", monospace; color: var(--c1); }
.term-form input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0;
  background: transparent; border: 0; outline: none;
  color: var(--ink); caret-color: var(--c1); font: 400 1rem "Space Mono", monospace;
}
.term-hint { display: none; margin: .9rem 0 0; font: 400 .85rem/1.5 "Space Mono", monospace; color: var(--muted); }
.js .term-hint { display: block; }
.term-hint kbd { font: inherit; color: var(--c2); padding: .05em .45em; border: 1px solid currentColor; border-radius: 4px; }
@keyframes blink { 50% { opacity: 0; } }

.faq { margin-top: 2.5rem; max-width: 900px; border-top: var(--border); }
.faq details { border-bottom: var(--border-thin); }
.faq summary {
  display: flex; gap: .7rem; align-items: center; min-height: 64px; padding: 1rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: var(--dw); font-size: calc(clamp(1.1rem, 1rem + .6vw, 1.45rem) * var(--dsize)); text-transform: none;
}
[data-mode="neon"] .faq summary { font-style: italic; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ">"; color: var(--c1); font-family: "Space Mono", monospace; transition: rotate .2s; }
.faq details[open] summary::before { rotate: 90deg; }
.faq summary:hover { color: var(--c2); }
[data-mode="rotulo"] .faq summary:hover, [data-mode="riso"] .faq summary:hover { color: var(--c1); }
.faq .answer { padding: 0 0 1.4rem 1.6rem; color: var(--muted); max-width: 64ch; }
.faq .answer p { margin: 0; }
.js .faq details[open] .answer { animation: print .7s steps(7, end) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------------------
   13. Neón: nosotros y contacto
   --------------------------------------------------------------------- */
.about { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; align-items: start; } .pow-wrap { grid-column: 1 / -1; } }

/* Onomatopeya "¡Abierto!" que aparece de golpe */
.pow-wrap { justify-self: center; filter: drop-shadow(3px 0 0 #111) drop-shadow(-3px 0 0 #111) drop-shadow(0 3px 0 #111) drop-shadow(0 -3px 0 #111) drop-shadow(8px 8px 0 #111); }
.pow {
  width: clamp(260px, 52vw, 540px); aspect-ratio: 1.7;
  display: grid; place-items: center;
  background: radial-gradient(circle at 1.5px 1.5px, rgba(198, 40, 40, .32) 1.4px, transparent 1.8px) 0 0 / 8px 8px, #ffd60a;
  clip-path: polygon(98.9% 50.0%, 81.0% 56.0%, 97.0% 69.1%, 76.0% 67.0%, 85.5% 84.8%, 68.0% 76.5%, 68.1% 92.9%, 56.4% 81.7%, 50.0% 96.3%, 43.6% 81.5%, 31.9% 92.9%, 32.6% 75.6%, 15.0% 84.3%, 21.5% 68.7%, 5.9% 67.9%, 18.7% 56.1%, 0.5% 50.0%, 15.9% 43.3%, 3.4% 31.1%, 22.9% 32.3%, 12.6% 13.4%, 32.7% 24.6%, 30.0% 2.8%, 43.7% 19.1%, 50.0% 3.1%, 56.1% 19.8%, 68.7% 5.8%, 69.0% 22.1%, 84.0% 16.7%, 77.7% 31.9%, 97.0% 30.9%, 81.9% 43.8%);
}
.pow span { font: 400 clamp(2.4rem, 1rem + 6vw, 5.4rem)/1 "Bangers", Impact, sans-serif; letter-spacing: .04em; color: #c62828; -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #111; rotate: -6deg; }
.pow-wrap { rotate: -3deg; }
.js .pow-wrap { scale: 0; }
.about.is-in .pow-wrap { animation: pow-in .8s cubic-bezier(.2, 1.8, .4, 1) forwards, pow-wobble 3.2s 1s ease-in-out infinite; }
@keyframes pow-in { from { scale: 0; rotate: -30deg; } to { scale: 1; rotate: -3deg; } }
@keyframes pow-wobble { 0%, 100% { scale: 1; rotate: -3deg; } 50% { scale: 1.05; rotate: 2deg; } }

/* Globo de diálogo */
[data-mode="comic"] .about-text .big {
  position: relative; margin-bottom: 2.4rem; padding: 1.2rem 1.4rem;
  background: #fff; border: 3px solid #111; border-radius: 28px; box-shadow: 5px 5px 0 #111;
  font: 700 clamp(1.2rem, 1.05rem + .7vw, 1.6rem)/1.35 "Comic Neue", "Comic Sans MS", sans-serif; font-style: normal;
}
[data-mode="comic"] .about-text .big::before,
[data-mode="comic"] .about-text .big::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 0 100%); }
[data-mode="comic"] .about-text .big::before { left: 44px; bottom: -27px; width: 34px; height: 27px; background: #111; }
[data-mode="comic"] .about-text .big::after { left: 47px; bottom: -18px; width: 24px; height: 19px; background: #fff; }
[data-mode="comic"] .people li:nth-child(odd) { rotate: -1deg; }
[data-mode="comic"] .people li:nth-child(even) { rotate: 1.2deg; }
[data-mode="comic"] .mono { background: #ffd60a; border-color: #111; color: #111; box-shadow: 3px 3px 0 #111; }

/* Líneas de acción detrás del contacto */
.contact { isolation: isolate; }
/* Las líneas de acción viven dentro de una viñeta con borde, como en un cómic */
[data-mode="comic"] .contact::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: clamp(1rem, 3vw, 2.5rem) max(8px, 1.5vw);
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(17, 17, 17, .07) 0 3deg, transparent 3deg 11deg), #fffbf0;
  border: 3px solid #111; border-radius: 8px; box-shadow: 7px 7px 0 #111;
}
.pop-word { color: var(--c1); }
[data-mode="comic"] .contact .wrap { padding-inline: clamp(30px, 5vw, 56px); }
.about-text .big { font: italic 600 clamp(1.3rem, 1.05rem + 1vw, 1.8rem)/1.35 "Fraunces", serif; color: var(--ink); margin-top: 1.4rem; }
.about-text p:not(.big):not(.kicker) { color: var(--muted); }
.people { display: grid; gap: 1.2rem; align-content: start; }
.people li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; padding: 1.3rem; background: var(--card); border: var(--border); box-shadow: var(--shadow); border-radius: var(--radius); }
.mono { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 3px solid var(--c1); font: 400 1.5rem/1 "Bungee", sans-serif; color: var(--c1); }
[data-mode="neon"] .mono { box-shadow: 0 0 14px #ff2e88, inset 0 0 10px #ff2e88; text-shadow: 0 0 10px #ff2e88; color: #ffe6f2; }
.people h3 { font-family: var(--display); font-weight: var(--dw); text-transform: var(--dcase); font-size: calc(1.25rem * var(--dsize)); }
.people p { margin: .3rem 0 0; color: var(--muted); }

.contact .mega { font-size: calc(clamp(2.6rem, 1.2rem + 6vw, 6rem) * var(--dsize)); max-width: 14ch; }
.btn-big { margin-top: 2.4rem; min-height: 68px; padding-inline: 2rem; font-size: 1.15rem; animation: pulse 2.6s ease-in-out infinite; }
[data-mode="neon"] .btn-big { color: #ff2e88; border-color: #ff2e88; text-shadow: 0 0 10px #ff2e88; box-shadow: 0 0 20px rgba(255, 46, 136, .7), inset 0 0 16px rgba(255, 46, 136, .4); }
[data-mode="comic"] .btn-big { font-size: 1.7rem; }
@keyframes pulse { 50% { transform: scale(1.04); } }
.facts { display: grid; gap: 1.2rem; margin-top: 3rem; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1.2rem; background: var(--card); border: var(--border-thin); border-radius: var(--radius); box-shadow: var(--shadow); }
.facts .icon { color: var(--c2); }
[data-mode="comic"] .facts .icon, [data-mode="rotulo"] .facts .icon, [data-mode="riso"] .facts .icon { color: var(--c3); }
.facts strong { display: block; }
.facts span { color: var(--muted); }

.site-footer { padding: 2.5rem 20px calc(6.5rem + env(safe-area-inset-bottom)); text-align: center; color: var(--muted); border-top: var(--border-thin); font-size: .95rem; }
.site-footer p { margin: .3rem 0; }
.footer-logo { display: block; width: 180px; height: auto; aspect-ratio: 451.85 / 123.18; margin: 0 auto .9rem; color: var(--logo-ink); }
.footer-tagline { font-weight: 600; color: var(--ink); margin-bottom: 1rem !important; }
.site-footer a { display: inline-block; padding: .4rem .2rem; }

/* ---------------------------------------------------------------------
   Páginas interiores (aviso de privacidad, 404): filtro editorial, sin animaciones
   --------------------------------------------------------------------- */
.page { padding-block: clamp(3rem, 7vw, 6rem) clamp(5rem, 9vw, 7rem); }
.site-header > .btn { white-space: nowrap; flex: none; }
@media (max-width: 400px) { .site-header > .btn { padding-inline: .8rem; font-size: .8rem; } }
.prose {
  max-width: 72ch; margin-inline: auto;
  padding: clamp(1.6rem, 5vw, 3.5rem);
  background: var(--card); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.prose h1, .not-found h1 { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dls); line-height: 1.05; }
.prose h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem); margin-bottom: 1.2rem; }
.prose h2 { font-family: var(--display); font-weight: var(--dw); font-size: clamp(1.2rem, 1.05rem + .8vw, 1.55rem); margin: 2.4rem 0 .7rem; }
/* Viñetas: un anillo chico, como la O */
.prose ul { list-style: none; padding-left: 0; margin-bottom: 1em; }
.prose li { position: relative; margin-bottom: .45rem; padding-left: 1.5rem; }
.prose li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--c1); }
.prose .kicker { margin-bottom: .8rem; }
/* Franja de arriba: el patrón Kaleido y la O encima (el texto nunca va sobre el patrón) */
.prose-band { position: relative; height: clamp(84px, 14vw, 120px); margin: calc(-1 * clamp(1.6rem, 5vw, 3.5rem)) calc(-1 * clamp(1.6rem, 5vw, 3.5rem)) clamp(2.4rem, 5vw, 3rem); }
.prose-band-pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.prose { overflow: hidden; }   /* la franja toma las esquinas redondas de la hoja */
.prose-band-o { position: absolute; left: clamp(1.2rem, 4.6vw, 3.1rem); bottom: 0; translate: 0 45%; width: clamp(64px, 9vw, 84px); height: auto; aspect-ratio: 1; color: var(--ink); }
.notice { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--c1); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--c1) 8%, var(--card)); }
.notice p { margin: 0; }
.not-found { min-height: 60vh; display: grid; align-content: center; justify-items: start; }
.not-found h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem); max-width: 16ch; margin-bottom: 1rem; }
.not-found p { color: var(--muted); max-width: 48ch; }
.not-found .hero-actions { margin-top: 1.4rem; }
/* 404: el 0 es la O viva, del mismo tamaño que en el logo (96 % del tamaño de la letra) */
.k404 { display: flex; align-items: center; gap: .03em; margin: .6rem 0 1.6rem; font: 400 clamp(6.5rem, 2rem + 20vw, 13rem)/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.k404 span { translate: 0 -.035em; }
.k404 .kscope { width: .96em; flex: none; }
.k404-msg { min-height: 1.6em; margin: .4rem 0 0; font: 500 1rem/1.4 var(--display); color: var(--c1) !important; }
.k404-more { margin-top: 1.2rem; font-size: .95rem; }

/* ---------------------------------------------------------------------
   Carruseles en celular: cuadros, letreros y planes se deslizan con el dedo
   --------------------------------------------------------------------- */
.rail-nav { display: none; }
@media (max-width: 760px) {
  [data-rail] {
    display: flex !important; gap: 1rem;
    /* Solo se desplazan de lado: un gesto vertical sobre el carrusel mueve la página */
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding: 1rem 20px 1.4rem; scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  [data-rail]::-webkit-scrollbar { display: none; }
  [data-rail] > * { flex: 0 0 84%; scroll-snap-align: center; min-width: 0; }
  /* Dentro del carrusel la aparición es solo un desvanecido: el desplazamiento hacia abajo
     de los elementos aún ocultos dejaba espacio para moverse en vertical */
  .js [data-rail] > .reveal { transform: var(--rest, none); }
  /* Poco espacio arriba: las pestañas quedan pegadas a las tarjetas y lejos del letrero */
  .tags[data-rail] { padding-top: 2.4rem; margin-top: 0; }
  .tickets[data-rail] > * { flex-basis: 88%; }
  .signs[data-rail] { margin-top: 1.6rem; }
  .rail-nav { display: flex; justify-content: center; gap: .4rem; margin-top: .2rem; }
  .rail-nav button {
    min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; color: var(--ink);
  }
  .rail-nav button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: background-color .2s, scale .2s; }
  .rail-nav button[aria-current="true"]::before { background: currentColor; scale: 1.15; }
  /* Pestañas con nombre (planes) */
  .rail-nav.tabs { gap: .3rem; margin: 5.2rem 0 0; flex-wrap: nowrap; }
  .rail-nav.tabs button { padding: 0 .75rem; white-space: nowrap; border: var(--border-thin); border-radius: 999px; background: var(--card); font: 700 .82rem var(--body); }
  .rail-nav.tabs button::before { display: none; }
  .rail-nav.tabs button[aria-current="true"] { background: var(--ink); color: var(--bg); }

  .section { padding-block: 3.5rem; }
  .stamps { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .stamps li { padding: 1rem .9rem; outline-offset: -7px; }
  .stamps .icon { width: 26px; height: 26px; }
  .stamps strong { font-size: calc(.92rem * var(--dsize)); }
  .stamps span { font-size: .82rem; line-height: 1.45; }
  .bp-layout { gap: 1.6rem; margin-top: 2rem; }
  .bp-drawing { width: 220px; }
  .bp-steps { gap: .8rem; }
  .bp-steps li { padding: 1rem; gap: .9rem; }
  .bp-num { font-size: 1.8rem; }
  .maker-controls { padding: 1.1rem; gap: 1.1rem; }
  .giros { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .giros span { width: 100%; padding: .5rem .7rem; font-size: .92rem; }
}

/* Celulares chicos (≤ 380 px, como el iPhone SE) */
@media (max-width: 380px) {
  .site-header { gap: .6rem; }
  .tag { padding-inline: 1.2rem; }
  .tag h3 { font-size: calc(1.7rem * var(--dsize)); }
  .tag-price span { font-size: calc(2.5rem * var(--dsize)); }
  .rail-nav.tabs button { padding: 0 .55rem; font-size: .76rem; }
}

/* Ajustes para celular */
@media (max-width: 600px) {
  .hero { padding-top: 6rem; }
  .burst { top: -64px; right: -6px; width: 112px; }
  .plans-sign { padding-right: clamp(1.4rem, 5vw, 3.6rem); padding-top: 3.4rem; }
  .star-badge { right: -4px; top: -26px; width: 104px; height: 104px; font-size: .56rem; }
  .ticket-head { grid-template-columns: 1fr; }
  .ticket-price { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; margin-top: .6rem; }
}

/* ---------------------------------------------------------------------
   14. Aparición al hacer scroll (con rebote)
   --------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(46px) rotate(-3deg) scale(.94);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, 1.5, .4, 1);
  transition-delay: calc(var(--d, 0) * 110ms);
}
/* Lo que tiene el foco del teclado se ve al instante, sin esperar la animación */
.js .reveal:focus-within { opacity: 1; transform: var(--rest, none); transition: none; }
.js .reveal.is-in { opacity: 1; transform: var(--rest, none); }

/* ---------------------------------------------------------------------
   15. Movimiento reducido: el sitio sigue cambiando de filtro, sin destellos
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .flash { display: none; }
  .js .reveal { opacity: 1; transform: var(--rest, none); }
  .js .bp-drawing .draw { stroke-dasharray: none; }
  .js .bp-drawing text { opacity: 1; }
  .js .pow-wrap { scale: 1; }
}