/* ============================================================
   Longevity Initiatives — estilos
   Fuente: Brand Guide 2025. Teal domina; Terracota es solo acento.
   ============================================================ */

:root {
  /* Brand primitives */
  --teal:        #2D7D7D;
  --teal-light:  #3A9B9B;
  --teal-dark:   #1F5C5C;

  --terracota:       #E0936E;
  --terracota-light: #EBAC8E;
  --terracota-dark:  #C7754F;
  --terracota-on-dark: #EBAC8E;

  --arena:       #E8DDD0;
  --arena-dark:  #D4C4B0;
  --arena-deep:  #A89880;

  --pizarra:        #2C3E50;
  --pizarra-light:  #3E5468;
  --pizarra-deep:   #20303F;

  --blanco:      #FAFAF8;
  --canvas:      #F4EFE8;

  --logo-indigo: #22417F;

  /* Semantic surfaces */
  --surface-page:      var(--canvas);
  --surface-card:      var(--blanco);
  --surface-raised:    #FFFFFF;
  --surface-sunken:    var(--arena);
  --surface-dark:      var(--pizarra);
  --surface-dark-deep: var(--pizarra-deep);

  /* Semantic text */
  --text-strong:    var(--pizarra);
  --text-body:      rgba(44, 62, 80, 0.78);
  --text-muted:     rgba(44, 62, 80, 0.52);
  --text-faint:     rgba(44, 62, 80, 0.38);
  --text-on-dark:        var(--blanco);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.62);
  --text-on-dark-faint:  rgba(255, 255, 255, 0.34);
  --text-accent:    var(--terracota);
  --text-accent-on-dark: var(--terracota-on-dark);
  --text-brand:     var(--teal);
  --text-brand-on-dark: var(--teal-light);

  /* Borders & lines */
  --border-soft:    var(--arena-dark);
  --border-hair:    rgba(44, 62, 80, 0.10);
  --border-on-dark: rgba(255, 255, 255, 0.16);

  /* Status */
  --positive: #4A8C6F;
  --warning:  #C4954A;
  --critical: #B5503A;

  /* Brand gradient */
  --grad-brand: linear-gradient(to right, var(--teal-dark), var(--teal-light) 55%, var(--terracota));
  --glow-teal:  radial-gradient(circle, rgba(45,125,125,0.22), transparent 60%);

  /* Families */
  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-label:   'Raleway', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-data:    'DM Sans', system-ui, -apple-system, sans-serif;
  --fw-data:      600;
  --feat-data:    'tnum' 1, 'lnum' 1;

  /* Type scale */
  --fs-display-xl: 64px;
  --fs-display-l:  44px;
  --fs-display-m:  32px;
  --fs-display-s:  24px;
  --fs-quote:      28px;
  --fs-data:       56px;
  --fs-body-l:  18px;
  --fs-body-m:  16px;
  --fs-body-s:  14px;
  --fs-note:    12px;
  --fs-label-l: 13px;
  --fs-label-m: 11px;
  --fs-label-s: 9px;

  --fw-display:        600;
  --fw-display-regular:400;
  --fw-display-light:  300;
  --fw-label:          500;
  --fw-label-light:    300;
  --fw-label-thin:     200;
  --fw-body:           400;
  --fw-body-light:     300;

  --tracking-logo:     0.16em;
  --tracking-title:    0.08em;
  --tracking-eyebrow:  0.34em;
  --tracking-label:    0.18em;
  --tracking-body:     0.005em;

  --lh-display: 1.08;
  --lh-title:   1.15;
  --lh-body:    1.7;
  --lh-tight:   1.35;

  --role-eyebrow-size: var(--fs-label-s);
  --role-body-size:    var(--fs-body-m);

  /* Spacing scale (8px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-accent: 3px;

  --control-h-sm: 34px;
  --control-h-md: 44px;
  --control-h-lg: 52px;

  --container-narrow: 720px;
  --container:        960px;
  --container-wide:   1200px;
  --page-pad:         clamp(24px, 5vw, 80px);

  --grad-bar-h: 4px;

  /* Elevation */
  --shadow-xs: 0 1px 3px rgba(44, 62, 80, 0.06);
  --shadow-sm: 0 2px 12px rgba(44, 62, 80, 0.06);
  --shadow-md: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 36px rgba(44, 62, 80, 0.12);
  --shadow-xl: 0 24px 64px rgba(32, 48, 63, 0.22);
  --shadow-focus: 0 0 0 3px rgba(45, 125, 125, 0.28);

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  --overlay-scrim: rgba(32, 48, 63, 0.55);
  --blur-glass: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ── Base ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@keyframes liUp      { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes liPageIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes liMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#li-navtoggle { display: none; }
[data-hide-scrollbar]::-webkit-scrollbar { display: none; height: 0; }

/* Hover / press states for buttons and nav links */
button[type="button"]:hover { filter: brightness(0.94); transform: translateY(-1px); }
button[type="button"]:active { transform: scale(0.985); }
a.scp0:hover, a.scp1:hover { color: var(--terracota) !important; }

/* ── Responsive (tablet / mobile) ─────────────────── */
@media (max-width: 860px) {
  #li-navtoggle { display: flex; align-items: center; justify-content: center; }
  #li-navlinks {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start !important; gap: 18px !important;
    background: var(--blanco); padding: 22px 28px 28px;
    border-bottom: 1px solid var(--border-hair);
    box-shadow: 0 10px 26px rgba(0,0,0,.07);
    display: none !important;
  }
  #li-navlinks[data-open="true"] { display: flex !important; }
  [data-mobile-stack] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-mobile-cols2] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="padding-top: 100%"] { max-width: 360px; margin-left: auto; margin-right: auto; }
  [data-square-photo] { max-width: 340px; width: 100%; margin: 0 auto; order: -1; }
  [data-photo-frame] { inset: 12px !important; }
  [style*="font-size: 70px"], [style*="font-size:70px"],
  [style*="font-size: 58px"], [style*="font-size:58px"] { font-size: 44px !important; }
  [style*="padding: 0px 48px"] { padding-left: 32px !important; padding-right: 32px !important; }
  [data-mobile-left] { align-items: flex-start !important; text-align: left !important; }
  [data-mobile-justify-start] { justify-content: flex-start !important; }
  [style*="white-space: nowrap"] { white-space: normal !important; }
}

@media (max-width: 600px) {
  [style*="font-size: 70px"], [style*="font-size:70px"],
  [style*="font-size: 58px"], [style*="font-size:58px"] { font-size: 34px !important; }
  [style*="font-size: 50px"] { font-size: 30px !important; }
  [style*="font-size: 46px"] { font-size: 31px !important; }
  [style*="font-size: 44px"] { font-size: 30px !important; }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  header[style*="padding: 104px 0px 116px"] { padding-top: 46px !important; padding-bottom: 58px !important; }
  [style*="padding: 0px 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 0px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  header img[alt=""] { display: none; }
  h3[style*="white-space:nowrap"], [data-mobile-nowrap] { white-space: normal !important; }
  [data-mobile-full] { flex-basis: 100% !important; margin-top: 0 !important; }
  [data-mobile-bookcover] { flex-basis: 120px !important; width: 120px !important; }
  [data-mobile-justify-start] { justify-content: flex-start !important; }
}

@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    animation: none !important; transition: none !important;
  }
}