/* ---- LilGhost Studio · estilos compartidos ----
   Papel cuadriculado, contornos negros gruesos, sombras duras y garabatos. */

:root{
  --ink: #111111;
  --ink-soft: #3d3d3d;
  --paper: #ffffff;
  --grid: #C2D7F5;
  --blue: #4285F4;
  --red: #EA4335;
  --yellow: #FBBC05;
  --yellow-soft: #FFE27A;
  --green: #34A853;
  --pink: #FF5FA2;
  --purple: #8B5CF6;
  /* Fondo de la página y superficies (tarjetas, botones, encabezado). */
  --bg: #ffffff;
  /* Texto sobre fondos de color pastel (amarillo, verde, tintes): siempre oscuro. */
  --on-pastel: #111111;
  --on-pastel-soft: #3d3d3d;
  /* Texto sobre fondos de color --ink (botones oscuros). */
  --on-ink: #ffffff;
  --marker: var(--yellow-soft);
  --tape-text: var(--yellow-soft);
  --banner-bg: #FFE1DE;
  --dot-off: #cfcfcf;
  --sk1: #ececec;
  --sk2: #f9f9f9;
  --logo-filter: none;
  color-scheme: light;
  --border: 3px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 18px;
}

/* ---------- Modo oscuro ----------
   El tema lo decide data-theme en <html>: lo que eligió la persona con el botón
   o, si nunca eligió, la configuración del celular o la computadora. */
:root[data-theme="dark"]{
  --bg: #141419;
    --paper: #202027;
    --ink: #F2EEE3;
    --ink-soft: #C9C4B8;
    --grid: #263552;
    --on-ink: #141419;
    --marker: rgba(251, 188, 5, 0.42);
    --tape-text: #141419;
    --banner-bg: #4a2422;
    --dot-off: #55555f;
    --sk1: #2a2a32;
    --sk2: #36363f;
    --logo-filter: invert(1);
    color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  min-height:100vh;
  font-family:'DM Sans', system-ui, sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1.5px, rgba(255,255,255,0) 1.5px),
    linear-gradient(90deg, var(--grid) 1.5px, rgba(255,255,255,0) 1.5px);
  background-size:34px 34px;
  background-position:-1px -1px;
  overflow-x:clip;
}
img{max-width:100%;}
a{color:inherit;}

.wrap{position:relative; max-width:1120px; margin:0 auto; padding:24px 20px 60px;}

/* ---------- Encabezado ---------- */
.site-header{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px 12px 22px;
  background:var(--paper);
  border:var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  margin-bottom:44px;
}
.brand{display:flex; align-items:center;}
.brand img{height:42px; width:auto; display:block; filter:var(--logo-filter);}
.site-nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto;}
.site-nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; font-size:15px; text-decoration:none;
  padding:9px 14px; border-radius:12px;
  border:2.5px solid transparent;
  transition:background .15s ease, border-color .15s ease;
}
.site-nav a:hover{border-color:var(--ink);}
.site-nav a.active{background:var(--yellow-soft); color:var(--on-pastel); border-color:var(--ink);}
.site-nav a.nav-cta{background:var(--ink); color:var(--on-ink); border-color:var(--ink);}
.site-nav a.nav-cta:hover{background:var(--green); color:#111;}
.only-mobile{display:none;}

/* ---------- Botón de modo claro / oscuro ----------
   Adaptado de AnimatedThemeToggler de Magic UI (MIT). La animación vive en tema.js. */
.site-header .theme-toggle{
  flex:none;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
  border:2.5px solid var(--ink);
  border-radius:12px;
  background:var(--yellow-soft);
  color:var(--on-pastel);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.site-header .theme-toggle:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);}
.site-header .theme-toggle:active{transform:translate(2px,2px); box-shadow:none;}
.site-header .theme-toggle svg{width:22px; height:22px;}
.theme-toggle .i-sun{display:none;}
:root[data-theme="dark"] .site-header .theme-toggle{background:var(--paper); color:var(--ink);}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none;}
/* El círculo que crece lo dibuja tema.js; aquí se apaga el fundido por defecto. */
::view-transition-old(root), ::view-transition-new(root){animation:none; mix-blend-mode:normal;}

/* ---------- Encabezado ligero (con dock) ---------- */
.site-header.slim{
  position:sticky; top:12px; z-index:40;
  padding:8px 10px 8px 6px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.site-header.slim .brand img{height:52px; transition:height .3s ease;}
.site-header .header-cta{display:inline-flex;}
/* Al bajar: se esconde. Al subir: regresa como pastilla de vidrio flotante. */
.site-header.slim.is-floating{
  padding:8px 10px 8px 18px;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-color:var(--ink);
  box-shadow:var(--shadow);
}
.site-header.slim.is-floating .brand img{height:38px;}
.site-header.slim.is-hidden{transform:translateY(calc(-100% - 24px)); opacity:0;}

/* ---------- Dock: menú de abajo estilo macOS ----------
   Inspirado en el Dock de React Bits (MIT). La magnificación y el rebote viven en dock.js. */
.dock{
  position:fixed; z-index:50;
  left:50%; bottom:max(16px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  pointer-events:none;
}
.dock-panel{
  pointer-events:auto;
  display:flex; align-items:flex-end; gap:10px;
  height:74px; padding:0 12px 10px;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.dock-item{
  --size:50px;
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  color:var(--on-pastel);
  text-decoration:none;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit;
}
.dock-tile{
  width:var(--size); height:var(--size);
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid var(--ink);
  border-radius:calc(var(--size) * .3);
  background:var(--tile, var(--paper));
  box-shadow:3px 3px 0 var(--ink);
  transition:box-shadow .15s ease;
}
.dock-tile svg{width:calc(var(--size) * .46); height:calc(var(--size) * .46);}
.dock-item:hover .dock-tile{box-shadow:4px 4px 0 var(--ink);}
.dock-item:active .dock-tile{box-shadow:1px 1px 0 var(--ink);}
.dock-label{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(4px);
  padding:5px 10px;
  background:var(--ink); color:var(--on-ink);
  border-radius:9px;
  font-size:13px; font-weight:700; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.dock-item:hover .dock-label, .dock-item:focus-visible .dock-label{opacity:1; transform:translateX(-50%) translateY(0);}
.dock-dot{position:absolute; bottom:-8px; width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:0;}
.dock-item[aria-current="page"] .dock-dot{opacity:1;}
.dock-sep{align-self:center; width:2.5px; height:40px; margin:0 2px 0; background:var(--ink); border-radius:2px; opacity:.35;}
.dock-item.bounce .dock-tile{animation:dock-bounce .55s cubic-bezier(.3,1.6,.5,1);}
@keyframes dock-bounce{0%{transform:translateY(0);} 35%{transform:translateY(-14px);} 70%{transform:translateY(0);} 85%{transform:translateY(-4px);} 100%{transform:translateY(0);}}
/* Íconos del botón de tema dentro del dock */
.dock .theme-toggle .i-sun{display:none;}
:root[data-theme="dark"] .dock .theme-toggle .i-sun{display:block;}
:root[data-theme="dark"] .dock .theme-toggle .i-moon{display:none;}
/* Que el dock no tape el final de la página */
body.has-dock .wrap{padding-bottom:130px;}
:root[data-theme="dark"] .dock-item{color:#111;}
:root[data-theme="dark"] .dock-item.dock-plain{color:var(--ink);}

/* ---------- Aparecer al bajar (lo activa dock.js) ---------- */
.js-reveal .reveal{opacity:0; translate:0 22px; transition:opacity .6s ease var(--d, 0ms), translate .6s cubic-bezier(.2,.8,.2,1) var(--d, 0ms);}
.js-reveal .reveal.is-in{opacity:1; translate:0 0;}

/* Texto solo para lectores de pantalla */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Tipografía ---------- */
.display{
  font-family:'Bricolage Grotesque', 'DM Sans', sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.02;
  margin:0;
}
.hand{font-family:'Caveat', cursive; font-weight:700;}
.marker{
  background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  padding:0 .08em;
}
.lead{font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:520px;}

.section-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:0 0 22px;}
.section-head h2{font-size:clamp(28px,4vw,40px);}
.section-head .hand{font-size:24px; color:var(--blue); transform:rotate(-3deg); display:inline-block;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px;
  border:var(--border);
  border-radius:14px;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit; font-size:16px; font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--ink);}
.btn:disabled{opacity:.5; cursor:default; transform:none; box-shadow:var(--shadow-sm);}
.btn svg{width:20px; height:20px; flex:0 0 auto;}
.btn-yellow{background:var(--yellow); color:var(--on-pastel);}
/* Texto oscuro sobre verde: 6.9:1 (blanco daba 3.1:1 y no se leía bien). */
.btn-green{background:var(--green); color:#111;}
.btn-green svg{color:#111;}
.btn-dark{background:var(--ink); color:var(--on-ink);}
.btn-block{width:100%;}

/* ---------- Tarjeta tipo sticker ---------- */
.sticker{
  position:relative;
  background:var(--paper);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- Garabatos ---------- */
.doodle{position:absolute; pointer-events:none; z-index:1; user-select:none;}
.wiggle{animation:wiggle 3.2s ease-in-out infinite;}
.float{animation:float 4.5s ease-in-out infinite;}
.spin{animation:spin 9s linear infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-8deg);} 50%{transform:rotate(8deg);}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-10px) rotate(4deg);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Stickers (imágenes recortadas con borde blanco) ----------
   Uso: <img class="stk" src="img/stickers/x.webp" style="--w:120px; --wm:70px; --r:-8deg; ...">
   --w ancho en computadora, --wm en celular, --r inclinación. */
.stk{
  position:absolute; z-index:6;
  width:var(--w, 110px); height:auto;
  pointer-events:none; user-select:none;
  transform:rotate(var(--r, 0deg));
  filter:
    drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff)
    drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
    drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
}
/* Los stickers se quedan quietos, como uno pegado de verdad: el movimiento se guarda
   para lo que explica algo (la demo de 'Cómo funciona' y la cinta). */
.stk.bob, .stk.bob-slow{animation:none;}

/* ---------- Foco con teclado ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:12px;
}

/* ---------- Tarjeta con inclinación 3D (.tilt-card) ----------
   Adaptada de TiltCard de unlumen-ui (MIT, © 2026 Léo Wicki).
   Título y texto arriba, píldora dividida a la derecha y foto inclinada que se asoma
   por la esquina. Con mouse, tilt.js la inclina y hace nacer un círculo de color desde
   el cursor, detrás del texto. (Sin mix-blend-mode: en algunas compus tumbaba la página.) */
.tilt-grid{position:relative; z-index:3; display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:26px; margin-bottom:90px;}
.tilt-card{
  --rx:0deg; --ry:0deg;
  position:relative; display:block;
  height:232px;
  overflow:hidden;
  background:var(--paper);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:inherit; text-decoration:none;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:box-shadow .25s ease-out;
}
.tilt-card:hover{box-shadow:9px 9px 0 var(--ink);}
.tilt-card .tilt-head{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:20px 22px 6px;}
.tilt-card h3{margin:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:21px; line-height:1.15;}
.tilt-card p{position:relative; z-index:1; margin:0 22px; max-width:26ch; font-size:14.5px; line-height:1.45; color:var(--ink-soft);}
.pill-split{display:inline-flex; align-self:flex-start; flex:none; font-size:13px; font-weight:700; white-space:nowrap; border:2.5px solid var(--ink); border-radius:999px; overflow:hidden;}
.pill-split span{padding:4px 10px; background:var(--paper);}
.pill-split span + span{border-left:2.5px solid var(--ink);}
.pill-split .ok{background:#BDEBC8; color:#0E4D22;}
.pill-split .new{background:var(--yellow-soft); color:#5C4300;}
.tilt-card .tilt-img{
  position:absolute; z-index:3;
  top:112px; right:-40px;
  width:260px; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top;
  border:var(--border); border-radius:12px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-5deg);
  transition:transform .3s ease-out;
}
.tilt-card:hover .tilt-img{transform:rotate(-3deg) translate(-2px,-6px);}
.tilt-card .tilt-circle{
  position:absolute; z-index:0;
  left:50%; top:50%;
  width:560px; height:560px; margin:-280px 0 0 -280px;
  border-radius:50%;
  background:var(--yellow-soft);
  opacity:.7;
  pointer-events:none;
  transform:scale(0);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
:root[data-theme="dark"] .tilt-card .tilt-circle{background:#3A3420;}
.tilt-card .tilt-circle.on{transform:scale(1);}
.tilt-card .tilt-go{position:absolute; z-index:1; left:22px; bottom:18px; font-weight:700; font-size:14.5px; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:3px;}
:root[data-theme="dark"] .pill-split .ok{background:#1F4D2C; color:#BDEBC8;}
:root[data-theme="dark"] .pill-split .new{background:#5C4300; color:#FFE27A;}
@media (max-width:640px){
  .tilt-grid{margin-bottom:64px; gap:22px;}
  .tilt-card{height:220px;}
  .tilt-card .tilt-img{width:230px;}
}
@media (prefers-reduced-motion: reduce){
  .tilt-card, .tilt-card .tilt-img{transition:none;}
  .tilt-card .tilt-circle{display:none;}
}

/* ---------- Pie de página ---------- */
.site-footer{
  margin-top:70px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px 24px;
  background:var(--paper);
  border:var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  font-size:14px;
}
.site-footer img{height:34px; display:block; filter:var(--logo-filter);}
.site-footer .links{display:flex; column-gap:18px; flex-wrap:wrap; font-weight:700;}
/* Cada enlace mide al menos 44 px de alto para tocarlo fácil con el dedo. */
.site-footer .links a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:underline; text-decoration-color:var(--yellow);
  text-decoration-thickness:2.5px; text-underline-offset:5px;
}
.site-footer .links a:hover{text-decoration-color:var(--ink);}
.site-footer small{color:var(--ink-soft); font-size:14px;}

/* ---------- Avisos ---------- */
.status-banner{
  display:none;
  padding:14px 18px;
  margin-bottom:24px;
  background:var(--banner-bg);
  border:var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  font-size:14.5px;
  font-weight:500;
}
.status-banner.show{display:block;}
.status-banner a{font-weight:700;}
.status-banner code{background:rgba(0,0,0,0.08); padding:2px 6px; border-radius:5px;}

@media (max-width:640px){
  .wrap{padding:16px 16px 50px;}
  /* Celular: logo grande y centrado, menú en botones iguales. */
  .site-header{flex-direction:column; align-items:stretch; gap:16px; padding:20px 14px 14px; margin-bottom:32px;}
  .brand{justify-content:center;}
  .site-header .theme-toggle{position:absolute; top:12px; right:12px;}
  .brand img{height:auto; width:min(68%, 250px);}
  .site-nav{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px; margin-left:0;}
  .site-nav a{
    display:flex; align-items:center; justify-content:center;
    padding:11px 2px; font-size:13.5px; text-align:center;
    background:var(--paper);
    border-color:var(--ink);
    box-shadow:2px 2px 0 var(--ink);
  }
  .site-nav a:active{transform:translate(2px,2px); box-shadow:none;}
  .site-nav a.active{background:var(--yellow-soft);}
  .site-nav a.nav-cta{background:var(--ink);}
  .hide-mobile{display:none !important;}
  .only-mobile{display:inline;}
  /* Menú de 5: 3 arriba y 2 abajo para que quepan las palabras. */
  .site-nav.nav5{grid-auto-flow:row; grid-template-columns:repeat(6, minmax(0, 1fr));}
  .site-nav.nav5 a{grid-column:span 2;}
  .site-nav.nav5 a:nth-child(n+4){grid-column:span 3;}
  .stk{width:var(--wm, 70px);}
  /* Celular: encabezado compacto y dock a lo ancho, como barra de app. */
  .site-header.slim{flex-direction:row; align-items:center; justify-content:center; padding:6px 4px; margin-bottom:22px; top:10px;}
  .site-header.slim .brand{justify-content:center;}
  .site-header.slim .brand img{width:auto; height:58px;}
  .site-header.slim.is-floating{padding:8px 16px;}
  .site-header.slim.is-floating .brand img{height:36px;}
  .site-header .header-cta{display:none;}
  .dock{left:8px; right:8px; transform:none; bottom:max(8px, env(safe-area-inset-bottom));}
  .dock-panel{height:auto; padding:10px 6px 8px; gap:2px; justify-content:space-between; border-radius:26px;}
  .dock-item{--size:52px; flex:1; min-width:0; gap:5px;}
  .dock-tile{box-shadow:2px 2px 0 var(--ink);}
  .dock-label{position:static; transform:none; opacity:1; padding:0; background:none; color:var(--ink); font-size:12.5px; font-weight:700; line-height:1.1;}
  .dock-item:hover .dock-label, .dock-item:focus-visible .dock-label{transform:none;}
  .dock-dot{display:none;}
  .dock-item[aria-current="page"] .dock-tile{box-shadow:0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink);}
  .dock-sep{display:none;}
  body.has-dock .wrap{padding-bottom:132px;}
}
@media (max-width:360px){
  .site-nav{gap:6px;}
  .site-nav a{font-size:12px; padding:10px 1px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .dock-tile{transition:none;}
  .wiggle, .float, .spin, .stk.bob, .stk.bob-slow{animation:none;}
  .btn{transition:none;}
}