/* ==========================================================================
   Estudio Lyra — Web pública (estudiolyra.es)
   Sitio estático. Tokens + componentes extraídos del design system
   (EstudioLyraDesignSystem_0f719d). Sin dependencias de Claude Design.
   ========================================================================== */

/* ---- Fuentes ---- */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

@font-face { font-family:'Manrope'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/Manrope-Light.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/Manrope-Regular.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/Manrope-Medium.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/Manrope-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/Manrope-Bold.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../assets/fonts/Manrope-ExtraBold.woff2') format('woff2'); }

/* ---- Tokens ---- */
:root {
  --lyra-plum:#2B061E; --lyra-mauve:#875053; --lyra-gold:#D2BF55; --lyra-cream:#FFEED6; --lyra-pink:#F99FB0;
  --plum-900:#1C0413; --plum-800:#2B061E; --plum-700:#3D1330; --plum-600:#562744;
  --pink-600:#E97F92; --pink-500:#F99FB0; --pink-400:#FBB6C3; --pink-300:#FCD0D8; --pink-100:#FDE8EC;
  --gold-600:#B9A63F; --gold-500:#D2BF55; --gold-400:#DDCD73; --gold-300:#E7DB99; --gold-100:#F3EDCB;
  --mauve-600:#6E4043; --mauve-500:#875053; --mauve-400:#A06E71;
  --cream-500:#FFEED6; --cream-400:#FBE4C6; --cream-300:#F6DBB9;

  --surface-page:var(--cream-500); --surface-raised:#FFF7EA; --surface-inverse:var(--plum-800);
  --text-strong:var(--plum-800); --text-body:#4A2A3A; --text-muted:var(--mauve-500);
  --text-on-dark:var(--cream-500); --text-on-pink:var(--plum-800); --text-on-gold:var(--mauve-600);
  --accent:var(--pink-500); --accent-strong:var(--pink-600); --accent-2:var(--gold-500);
  --border-soft:rgba(43,6,30,0.10); --border-strong:rgba(43,6,30,0.24); --border-on-dark:rgba(255,238,214,0.18);
  --focus-ring:rgba(249,159,176,0.55);

  --font-sans:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Lora', Georgia, 'Times New Roman', serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --text-2xs:0.75rem; --text-xs:0.8125rem; --text-sm:0.9375rem; --text-md:1rem; --text-lg:1.1875rem;

  --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-2xl:44px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(43,6,30,0.06); --shadow-sm:0 2px 8px rgba(43,6,30,0.08);
  --shadow-md:0 10px 30px rgba(43,6,30,0.10); --shadow-lg:0 24px 60px rgba(43,6,30,0.14);
  --shadow-pink:0 18px 44px rgba(233,127,146,0.32);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-fast:140ms; --dur-med:260ms; --dur-slow:520ms;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; padding:0; background:#FFFFFF; color:#2B061E;
  font-family:var(--font-sans); font-weight:var(--fw-regular);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; text-wrap:pretty;
}
h1,h2,h3,h4,h5,h6 { margin:0; color:var(--text-strong); line-height:1.18; }
p { margin:0; }
a { color:#875053; text-decoration:none; }
a:hover { color:#2B061E; }
button { font-family:inherit; }
ul { margin:0; padding:0; list-style:none; }
img, svg { display:block; max-width:100%; }
input, textarea, select { font:inherit; color:inherit; }
::selection { background:var(--pink-300); color:var(--plum-800); }

.serif { font-family:var(--font-serif); font-weight:var(--fw-regular); }

.page { background:#FFFFFF; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---- Brand marks ---- */
.wordmark { width:auto; display:block; }
.isotipo { display:block; }
.isotipo--spin { animation:lyra-isotipo-spin 9s linear infinite; }
@keyframes lyra-isotipo-spin { to { transform:rotate(360deg); } }
.aura { position:absolute; border-radius:999px; pointer-events:none; }
.aura--pink { background:radial-gradient(closest-side, rgba(249,128,152,0.55), rgba(249,159,176,0.22) 45%, rgba(255,238,214,0) 78%); }
.aura--gold { background:radial-gradient(closest-side, rgba(210,191,85,0.50), rgba(231,219,153,0.20) 45%, rgba(255,238,214,0) 78%); }
.aura--mauve { background:radial-gradient(closest-side, rgba(135,80,83,0.45), rgba(160,110,113,0.18) 45%, rgba(255,238,214,0) 78%); }
.blob { height:auto; display:block; pointer-events:none; }

/* ---- Header / nav ---- */
.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid #FFEED6; }
.site-header .bar { max-width:1200px; margin:0 auto; padding:0 24px; height:76px; display:flex; align-items:center; gap:24px; }
.site-header .brand { display:flex; align-items:center; flex:0 0 auto; }
.site-header .spacer { flex:1; }
.site-nav { display:flex; align-items:center; gap:30px; font-size:16px; font-weight:500; }
.site-nav a { color:#875053; }
.site-nav a:hover, .site-nav a.active { color:#2B061E; }
.burger { display:none; border:none; background:#FFEED6; width:46px; height:46px; border-radius:999px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span { display:block; width:18px; height:2px; background:#2B061E; border-radius:2px; }

.mobile-menu { position:fixed; inset:0; z-index:90; background:#FFEED6; padding:24px; display:none; flex-direction:column; }
.mobile-menu.open { display:flex; }
.mobile-menu .top { display:flex; align-items:center; justify-content:space-between; }
.mobile-menu .close { border:none; background:#FFFFFF; width:46px; height:46px; border-radius:999px; font-size:22px; color:#2B061E; cursor:pointer; }
.mobile-menu nav { margin-top:48px; display:flex; flex-direction:column; gap:8px; font-family:var(--font-serif); font-size:34px; line-height:1.3; color:#2B061E; }
.mobile-menu nav a { color:#2B061E; padding:10px 0; border-bottom:1px solid rgba(43,6,30,0.10); }
.mobile-menu .menu-cta { margin-top:auto; }

/* ---- Buttons (pill) ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); line-height:1; letter-spacing:0.01em;
  border-radius:var(--radius-pill); cursor:pointer; border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover { filter:brightness(1.04); }
.btn:active { transform:scale(0.97); }
.btn--sm { padding:8px 16px; font-size:var(--text-sm); gap:6px; }
.btn--md { padding:12px 24px; font-size:var(--text-md); gap:8px; }
.btn--lg { padding:16px 32px; font-size:var(--text-lg); gap:10px; }
.btn--full { display:flex; width:100%; }
.btn--primary { background:var(--accent); color:var(--text-on-pink); box-shadow:var(--shadow-pink); }
.btn--plum { background:var(--plum-800); color:var(--text-on-dark); box-shadow:var(--shadow-sm); }
.btn--gold { background:var(--gold-500); color:var(--text-on-gold); box-shadow:var(--shadow-sm); }
.btn--outline { background:transparent; color:var(--text-strong); border:1.5px solid var(--border-strong); }
.btn--ghost { background:transparent; color:var(--text-strong); }

/* ---- Badge (pill label) ---- */
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:var(--radius-pill);
  font-family:var(--font-sans); font-weight:var(--fw-semibold); line-height:1; letter-spacing:0.02em; white-space:nowrap; border:1px solid transparent; }
.badge--sm { padding:3px 9px; font-size:var(--text-2xs); }
.badge--md { padding:5px 12px; font-size:var(--text-xs); }
.badge--pink { background:var(--pink-100); color:var(--accent-strong); }
.badge--gold { background:var(--gold-100); color:var(--gold-600); }

/* ---- Card ---- */
.card { border-radius:var(--radius-lg); transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.card--cream { background:var(--cream-400); color:var(--text-strong); box-shadow:var(--shadow-sm); border:1px solid transparent; border-radius:var(--radius-xl); padding:32px; }

/* ---- Eyebrow ---- */
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; font-weight:700; }

/* ---- Forms ---- */
.field { display:flex; flex-direction:column; gap:7px; width:100%; }
.field label { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.field input, .field textarea {
  width:100%; background:#FFEED6; border:1.5px solid var(--border-strong); border-radius:var(--radius-md);
  padding:12px 16px; font-family:var(--font-sans); font-size:16px; color:var(--text-strong); line-height:1.6;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); outline:none;
}
.field textarea { resize:vertical; }
.field input:focus, .field textarea:focus { border-color:var(--pink-500); box-shadow:0 0 0 4px var(--focus-ring); }
.field .err { font-size:14px; color:var(--accent-strong); display:none; }
.field.invalid .err { display:inline; }
.field.invalid input, .field.invalid textarea { border-color:var(--accent-strong); }

/* ---- Footer ---- */
.site-footer { background:#875053; color:#FFEED6; padding:clamp(48px,6vw,72px) 24px 32px; }
.site-footer a { color:#FFEED6; }
.site-footer .cols { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(160px,1fr)); gap:40px; }
.site-footer .h { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#FFEED6; font-weight:700; margin-bottom:16px; }
.site-footer .legal { max-width:1200px; margin:36px auto 0; padding-top:24px; border-top:1px solid rgba(255,238,214,0.18); display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; font-size:14px; }

/* ---- Reveal ---- */
@keyframes lyra-fade-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
[data-reveal] { animation:lyra-fade-up 560ms cubic-bezier(0.22,1,0.36,1) both; }
@media (prefers-reduced-motion:reduce) { [data-reveal] { animation:none; } .isotipo--spin { animation:none; } html { scroll-behavior:auto; } }

/* ---- Responsive: colapsar rejillas de 2 columnas y activar hamburguesa ---- */
@media (max-width:860px) {
  .site-nav { display:none; }
  .burger { display:flex; }
  .col2 { grid-template-columns:minmax(0,1fr) !important; }
  .col2 .sticky-aside { position:static !important; }
}