/* ═══════════════════════════════════════════════════════
   LILI LORENZO · Sistema compartido
   Paleta de marca intacta. Un único acento interactivo: rojo.
   Azul, amarillo y rosa viven en las formas Bauhaus.
   Baumans sólo en titulares; DM Sans para leer.
═══════════════════════════════════════════════════════ */
:root {
  --ink:      #141414;
  --ink-2:    #45433f;
  --ink-3:    #6f6c66;
  --paper:    #fbfaf6;
  --crema:    #f0ead8;
  --amarillo: #eac42d;
  --azul:     #335988;
  --rojo:     #b53636;
  --rosa:     #e7bec1;
  --line:     rgba(20,20,20,.12);

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(88px, 11vw, 144px);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',system-ui,sans-serif; font-size:17px;
  color:var(--ink); background:var(--paper); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3 { font-family:'Baumans',cursive; font-weight:400; line-height:1.06; letter-spacing:-.01em; }
p { line-height:1.65; text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
ul, ol { list-style:none; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--rojo); outline-offset:4px; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Tipografía de sección */
.eyebrow {
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul); margin-bottom:20px; display:block;
}
.h2 { font-size:clamp(2.2rem, 4.2vw, 3.6rem); max-width:16ch; }
.lead { font-size:1.12rem; color:var(--ink-2); max-width:52ch; margin-top:20px; }
.section { padding:var(--section) 0; }
.bg-crema { background:var(--crema); }

/* ══ BOTONES ═════════════════════════════════════════════ */
.btn {
  --fill:var(--rojo); --fill-fg:#fff;
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:15px 28px; font-size:1rem; font-weight:500;
  background:var(--ink); color:#fff; border:1.5px solid var(--ink);
  touch-action:manipulation; user-select:none;
  transition:transform 160ms var(--ease-out), color 240ms ease, border-color 240ms ease;
}
.btn::before {
  content:''; position:absolute; inset:-1px; z-index:-1; background:var(--fill);
  clip-path:inset(0 100% 0 0); transition:clip-path 200ms var(--ease-out);
}
.btn .arr { display:inline-block; transition:transform 240ms var(--ease-out); }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.6; cursor:wait; }
.btn-ghost { background:transparent; color:var(--ink); --fill:var(--ink); }
.btn-light { background:var(--paper); color:var(--ink); border-color:var(--paper); --fill:var(--amarillo); --fill-fg:var(--ink); }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { color:var(--fill-fg); border-color:var(--fill); }
  .btn:hover::before { clip-path:inset(0 0 0 0); transition-duration:320ms; }
  .btn:hover .arr { transform:translateX(4px); }
}

/* ══ REVEAL (una vez, al entrar en pantalla) ═════════════ */
.js .rv { opacity:0; transform:translateY(14px);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms); }
.js .rv.on { opacity:1; transform:none; }
.js .rv.btn.on { transition:transform 160ms var(--ease-out), color 240ms ease, border-color 240ms ease; }

/* Titulares que suben línea a línea tras una máscara */
.ln { display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.ln-i { display:block; }

/* ══ NAV ═════════════════════════════════════════════════ */
.nav { position:fixed; inset:0 0 auto; z-index:100; }
.nav::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(240,234,216,.88);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color 300ms ease;
}
.nav.scrolled::before { border-color:var(--line); }
.nav-inner { height:72px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:baseline; gap:6px; position:relative; z-index:2; }
.logo-lili { font-family:'Baumans',cursive; font-size:1.4rem; letter-spacing:2px; }
.logo-sub { font-family:'Baumans',cursive; font-size:.82rem; display:flex; }
.logo-sub span { display:inline-block; transition:transform 240ms var(--ease-out); transition-delay:calc(var(--i) * 25ms); }
@media (hover:hover) and (pointer:fine) { .logo:hover .logo-sub span { transform:translateY(-3px); } }
.c-az{color:var(--azul)} .c-am{color:var(--amarillo)} .c-ro{color:var(--rojo)} .c-rs{color:var(--rosa)}

.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a:not(.btn) { font-size:.95rem; font-weight:500; position:relative; padding:4px 0; }
.nav-links a:not(.btn)::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--rojo);
  transform:scaleX(0); transform-origin:100% 50%; transition:transform 240ms var(--ease-out);
}
.nav-links a[aria-current="page"]::after { transform:scaleX(1); }
@media (hover:hover) and (pointer:fine) {
  .nav-links a:not(.btn):hover::after { transform:scaleX(1); transform-origin:0 50%; }
}
.nav-links .btn { padding:11px 20px; font-size:.92rem; }
.nav-links .btn[aria-current="page"] { background:var(--rojo); border-color:var(--rojo); }

.burger { display:none; position:relative; z-index:2; width:44px; height:44px; touch-action:manipulation; }
.burger span { position:absolute; left:10px; width:24px; height:1.5px; background:var(--ink);
  transition:transform 300ms var(--ease-out), opacity 200ms ease; }
.burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px}
.nav.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ══ ENTRADA DEL HERO (cualquier página, con [data-hero]) ═ */
.js [data-hero] .ln-i { transform:translateY(105%); transition:transform 900ms var(--ease-out); transition-delay:calc(80ms + var(--i,0) * 90ms); }
.js [data-hero] .h-in { opacity:0; transform:translateY(16px); transition:opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay:var(--d,0ms); }
.js [data-hero] .shape { opacity:0; transform:scale(.9); transition:opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay:var(--d,0ms); }
.js [data-hero] .shape-bar { opacity:1; transform:scaleX(0); transform-origin:0 50%; }
.js [data-hero] .art-photo { clip-path:inset(100% 0 0 0); transition:clip-path 1100ms var(--ease-in-out) 150ms; }
.js [data-hero] .art-photo img { transform:scale(1.1); transition:transform 1500ms var(--ease-out) 150ms; }
[data-hero].ready .ln-i, [data-hero].ready .h-in, [data-hero].ready .shape { opacity:1; transform:none; }
[data-hero].ready .art-photo { clip-path:inset(0 0 0 0); }
[data-hero].ready .art-photo img { transform:none; }

/* Hero de páginas interiores */
.page-hero { background:var(--crema); position:relative; overflow:hidden; padding:clamp(140px,16vw,190px) 0 clamp(72px,9vw,112px); }
.page-hero h1 { font-size:clamp(2.6rem, 5.2vw, 4.5rem); line-height:1.04; max-width:18ch; }
.page-hero .lead { font-size:1.18rem; max-width:46ch; margin-top:26px; }
.page-hero-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:end; }

/* Foto con formas Bauhaus detrás, sin marcos */
.hero-art { position:relative; aspect-ratio:4/5; max-width:440px; width:100%; justify-self:end; }
.art-circle { position:absolute; width:62%; aspect-ratio:1; border-radius:50%; background:var(--amarillo); top:-7%; right:-12%; }
.art-square { position:absolute; width:26%; aspect-ratio:1; background:var(--rojo); left:-9%; bottom:9%; z-index:2; }
.art-bar    { position:absolute; width:46%; height:12px; background:var(--azul); left:-14%; top:16%; z-index:2; }
.art-photo  { position:absolute; inset:0; z-index:1; overflow:hidden; background:#e2dccb; }
.art-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; filter:grayscale(18%) contrast(1.05); }

/* ══ CIFRAS ══════════════════════════════════════════════ */
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1.5px solid var(--ink); }
.stat { padding:28px 24px 0 0; }
.stat + .stat { padding-left:24px; border-left:1px solid var(--line); }
.stat-num { font-family:'Baumans',cursive; font-size:clamp(2.4rem, 4.4vw, 3.8rem); line-height:1; display:block; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stat-num small { font-size:.5em; margin-left:4px; }
.stat-lbl { font-size:.92rem; color:var(--ink-3); margin-top:10px; display:block; }

/* ══ MANIFIESTO (bloque amarillo a sangre) ═══════════════ */
.manifesto { background:var(--amarillo); padding:clamp(100px,13vw,170px) 0; text-align:center; position:relative; overflow:hidden; }
.manifesto blockquote { font-family:'Baumans',cursive; font-size:clamp(2.1rem, 5vw, 4.2rem); line-height:1.12; max-width:20ch; margin:0 auto; position:relative; }
.manifesto cite { display:block; margin-top:28px; font-style:normal; font-size:.95rem; color:rgba(20,20,20,.72); position:relative; }
.manifesto svg { position:absolute; top:50%; left:50%; width:min(560px,90vw); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.14; pointer-events:none; }
.manifesto circle { fill:none; stroke:var(--ink); stroke-width:1.2; }
.js .manifesto circle { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1800ms var(--ease-in-out); }
.js .manifesto circle + circle { transition-delay:250ms; }
.manifesto.on circle { stroke-dashoffset:0; }
.js .manifesto .ln-i { transform:translateY(105%); transition:transform 900ms var(--ease-out); transition-delay:calc(var(--i,0) * 90ms); }
.manifesto.on .ln-i { transform:none; }

/* ══ FORMAS BAUHAUS (marcadores) ═════════════════════════ */
.m-circle { border-radius:50%; background:var(--amarillo); }
.m-square { background:var(--rojo); }
.m-tri    { background:var(--azul); clip-path:polygon(50% 0,100% 100%,0 100%); }
.m-half   { background:var(--ink); border-radius:999px 999px 0 0; }

/* ══ PROCESO EN 4 FASES ══════════════════════════════════ */
.steps { position:relative; margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.steps-line { position:absolute; top:28px; left:28px; right:12%; height:1.5px; background:var(--ink); opacity:.2; transform-origin:0 50%; }
.step { position:relative; }
.step-mark { width:56px; height:56px; margin-bottom:28px; position:relative; }
.step .m-square { width:50px; height:50px; margin-top:3px; margin-bottom:31px; }
.step .m-half { height:28px; margin-top:28px; }
.step h3 { font-size:1.6rem; margin-bottom:10px; }
.step p { font-size:.97rem; color:var(--ink-2); max-width:28ch; }
.js .steps-line { transform:scaleX(0); transition:transform 1400ms var(--ease-in-out) 150ms; }
.steps.on .steps-line { transform:scaleX(1); }
.js .step { opacity:0; transform:translateY(14px); transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay:calc(200ms + var(--i) * 260ms); }
.js .step-mark { transform:scale(.6); transition:transform 700ms var(--ease-out); transition-delay:calc(260ms + var(--i) * 260ms); }
.steps.on .step, .steps.on .step-mark { opacity:1; transform:none; }

/* ══ CIERRE + FOOTER ═════════════════════════════════════ */
.close { background:var(--ink); color:var(--paper); padding:var(--section) 0 40px; position:relative; overflow:hidden; }
.close.slim { padding-top:56px; }
.close-deco { position:absolute; width:420px; aspect-ratio:1; border-radius:50%; background:var(--amarillo); opacity:.09; right:-120px; top:-160px; pointer-events:none; }
.close h2 { font-size:clamp(2.6rem, 6vw, 5.2rem); max-width:14ch; position:relative; }
.close h2 em { font-style:normal; color:var(--amarillo); }
.close-sub { color:rgba(251,250,246,.74); font-size:1.15rem; margin:22px 0 40px; max-width:46ch; }
.foot { margin-top:clamp(88px,10vw,140px); padding-top:28px; border-top:1px solid rgba(251,250,246,.14);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.close.slim .foot { margin-top:0; border-top:0; padding-top:0; }
.foot nav, .foot .social { display:flex; gap:28px; flex-wrap:wrap; }
.foot a { font-size:.93rem; color:rgba(251,250,246,.74); transition:color 200ms ease; }
@media (hover:hover) and (pointer:fine) { .foot a:hover { color:var(--amarillo); } }
.foot small { font-size:.85rem; color:rgba(251,250,246,.55); }

/* ══ RESPONSIVE COMPARTIDO ═══════════════════════════════ */
@media (max-width:860px) {
  .page-hero-grid { grid-template-columns:1fr; align-items:start; }
  .steps { grid-template-columns:1fr 1fr; row-gap:48px; }
  .steps-line { display:none; }
  .js .step { transition-delay:calc(100ms + var(--i) * 80ms); }
  .js .step-mark { transition-delay:calc(140ms + var(--i) * 80ms); }
}
@media (max-width:768px) {
  .burger { display:block; }
  .nav-links {
    position:fixed; inset:0; z-index:1; flex-direction:column; justify-content:center; gap:28px;
    background:var(--crema); visibility:hidden;
    clip-path:circle(0 at calc(100% - var(--gutter) - 22px) 36px);
    transition:clip-path 260ms var(--ease-out), visibility 0s linear 260ms;
  }
  .nav.open .nav-links { visibility:visible; clip-path:circle(150% at calc(100% - var(--gutter) - 22px) 36px);
    transition:clip-path 520ms var(--ease-drawer), visibility 0s; }
  .nav-links a:not(.btn) { font-family:'Baumans',cursive; font-size:2rem; }
  .nav-links > * { opacity:0; transform:translateY(10px); transition:opacity 200ms ease, transform 200ms var(--ease-out); }
  .nav.open .nav-links > * { opacity:1; transform:none; transition:opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay:calc(120ms + var(--i) * 50ms); }
  .stats { grid-template-columns:1fr 1fr; }
  .stat:nth-child(3) { padding-left:0; border-left:0; }
  .stat:nth-child(n+3) { padding-top:28px; }
}
@media (max-width:480px) {
  .steps { grid-template-columns:1fr; }
}

/* ══ MOVIMIENTO REDUCIDO: fundidos sí, desplazamientos no ═ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .rv, .js [data-hero] .h-in, .js [data-hero] .shape, .js .step, .js .step-mark, .js .grp > * {
    transform:none !important; filter:none !important; transition-property:opacity !important; transition-duration:400ms !important; }
  .js [data-hero] .ln-i, .js .manifesto .ln-i, .js .art-photo, .js .art-photo img, .js .steps-line {
    transform:none !important; clip-path:none !important; transition:none !important; }
  .js .manifesto circle { stroke-dashoffset:0; transition:none; }
}
@media print { .js .rv, .js .step, .js .grp > * { opacity:1 !important; transform:none !important; } }