/* =============================================================
   1. Tokens
   ============================================================= */
:root{
  --paper:        #FAF8F4;
  --paper-2:      #F1ECE2;
  --surface:      #FFFFFF;
  --ink:          #15130F;
  --ink-soft:     #6E6459;
  --ink-faint:    #786D5D;
  --line:         #E4DDD0;

  --dark-bg:      #121110;
  --dark-bg-2:    #1B1917;
  --dark-line:    #322E28;
  --cream:        #F4EFE6;
  --cream-soft:   #A79C8C;

  --accent:       #C22A1F;
  --accent-bright:#EA5245; /* AA-safe accent for small text on dark sections */
  --accent-dark:  #8F1F17;
  --accent-soft:  #F4DAD6;
  --accent-ink:   #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 16px;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --nav-h: 76px;

  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Caveat", cursive;

  color-scheme: light;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; tab-size:2; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overscroll-behavior-y:none;
}

img, svg, video{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; margin:0; padding:0; }
p{ margin:0; text-wrap:pretty; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.015em;
  text-wrap:balance;
  margin:0;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  padding:.7rem 1.1rem; background:var(--ink); color:var(--paper);
  border-radius:4px; font-weight:600; font-size:.9rem;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}
@media (min-width:720px){ .container{ padding-inline:40px; } }
@media (min-width:1280px){ .container{ padding-inline:56px; } }

.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;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display);
  font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{
  content:""; width:16px; height:1px; background:var(--accent);
}
.section--dark .eyebrow{ color:var(--accent-bright); }
.section--dark .eyebrow::before{ background:var(--accent-bright); }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.7rem); margin-top:14px; }
.section-head p{ margin-top:18px; color:var(--ink-soft); font-size:1.05rem; max-width:56ch; }
.section--dark .section-head p{ color:var(--cream-soft); }

/* =============================================================
   4. Sections base
   ============================================================= */
section{ position:relative; padding:96px 0; }
@media (min-width:960px){ section{ padding:132px 0; } }

.section--dark{ background:var(--dark-bg); color:var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3{ color:var(--cream); }
.section--alt{ background:var(--paper-2); }

/* =============================================================
   5. Buttons
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95rem 1.9rem;
  font-family:var(--font-display);
  font-weight:700; font-size:.95rem;
  letter-spacing:.01em;
  border-radius:999px;
  transition:transform .35s var(--ease-out), background .25s var(--ease-out), box-shadow .35s var(--ease-out);
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.btn-ghost{
  background:transparent; color:inherit;
  border:1px solid var(--line);
}
.section--dark .btn-ghost{ border-color:var(--dark-line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }

/* =============================================================
   6. Nav
   ============================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  color:var(--cream);
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out), backdrop-filter .3s var(--ease-out), color .3s var(--ease-out);
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
  color:var(--ink);
}
.nav-inner{
  width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (min-width:720px){ .nav-inner{ padding-inline:40px; } }

.nav-brand{
  font-family:var(--font-display); font-weight:800; font-size:1rem;
  letter-spacing:.02em; display:flex; align-items:baseline; gap:6px;
}
.nav-brand .dot{ color:var(--accent); }

.nav-links{ display:none; align-items:center; gap:32px; }
@media (min-width:860px){ .nav-links{ display:flex; } }
.nav-links a{
  font-size:.88rem; font-weight:600; color:currentColor; opacity:.72;
  position:relative; padding-block:4px;
  transition:opacity .2s var(--ease-out);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .3s var(--ease-out);
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ right:0; }

.nav-cta{ display:none; }
@media (min-width:640px){ .nav-cta{ display:inline-flex; padding:.7rem 1.4rem; font-size:.85rem; } }

.nav-burger{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
}
@media (min-width:860px){ .nav-burger{ display:none; } }
.nav-burger svg{ width:20px; height:20px; }

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--dark-bg); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:32px;
  transform:translateY(-8px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.mobile-menu.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear 0s;
}
.mobile-menu a{
  font-family:var(--font-display); font-weight:700; font-size:1.7rem;
  display:block; padding:14px 0; border-bottom:1px solid var(--dark-line);
}
.mobile-menu .btn-primary{ margin-top:28px; align-self:flex-start; }
.mobile-close{
  position:absolute; top:22px; right:24px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
}
.mobile-close svg{ width:22px; height:22px; }

/* =============================================================
   7. Hero
   ============================================================= */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:64px;
  overflow:clip;
}
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 28%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
}
.hero-inner{ position:relative; z-index:1; text-align:center; }
.hero .eyebrow{ justify-content:center; margin-bottom:22px; }
.hero-title{
  font-size:clamp(2.3rem, 6.4vw, 4.5rem);
  max-width:17ch; margin-inline:auto;
  line-height:1.04;
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-title .line span{
  display:block;
  animation:heroLineIn .85s var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * 110ms + 120ms);
}
.hero-title .line:nth-child(1) span{ --i:0; }
.hero-title .line:nth-child(2) span{ --i:1; }
@keyframes heroLineIn{
  from{ opacity:0; transform:translateY(60%); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-title .line span{ animation:none; }
}
.scribble-word{ position:relative; display:inline-block; }
.scribble{
  position:absolute; left:-2%; right:-2%; bottom:-.12em; width:104%; height:.3em;
  color:var(--accent); overflow:visible;
}
.scribble path{
  stroke-dasharray:280; stroke-dashoffset:280;
  animation:scribbleIn .7s var(--ease-out) both;
  animation-delay:.65s;
}
@keyframes scribbleIn{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .scribble path{ animation:none; stroke-dashoffset:0; } }
.hero-sub{
  margin:26px auto 0; max-width:46ch;
  font-size:1.1rem; color:var(--cream-soft);
}
.hero-signature{
  margin:14px auto 0; max-width:46ch;
  font-family:var(--font-hand); font-weight:600;
  font-size:1.25rem; color:var(--cream-soft);
}
.hero-actions{
  margin-top:38px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}
.hero-meta{
  margin-top:64px; display:flex; justify-content:center; gap:40px; flex-wrap:wrap;
}
.hero-meta div{ text-align:center; }
.hero-meta .num{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; color:var(--cream); font-variant-numeric:tabular-nums;
}
.hero-meta .num-word{ font-size:1.15rem; }
.hero-meta .lbl{ font-size:.78rem; color:var(--cream-soft); margin-top:2px; display:block; }

/* =============================================================
   8. Para quién — recognition lines
   ============================================================= */
.recognition-list{ max-width:820px; }
.recognition-list li{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem, 3.6vw, 2.3rem);
  padding-block:20px;
  border-top:1px solid var(--line);
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.recognition-list li.is-visible{ opacity:1; transform:translateY(0); }
.recognition-list li:last-child{ border-bottom:1px solid var(--line); }

/* =============================================================
   9. El problema — cycle
   ============================================================= */
.problem-grid{
  display:grid; gap:56px; align-items:center;
}
@media (min-width:860px){ .problem-grid{ grid-template-columns:0.85fr 1.15fr; gap:72px; } }

.problem-photo{
  border-radius:var(--radius-md); overflow:hidden;
  max-width:420px; margin-inline:auto;
  border:1px solid var(--dark-line);
}
.problem-anchor{
  margin-top:20px; font-family:var(--font-hand); font-weight:700;
  font-size:1.6rem; color:var(--cream); text-align:center;
}
.problem-anchor .arrow{ color:var(--accent); }

.cycle{
  display:flex; flex-wrap:wrap; gap:0;
  counter-reset:cyc;
}
.cycle li{
  counter-increment:cyc;
  flex:1 1 150px;
  padding:20px 18px;
  border:1px solid var(--dark-line);
  margin:-1px 0 0 -1px;
  position:relative;
}
.cycle li::before{
  content:counter(cyc, decimal-leading-zero);
  display:block; font-family:var(--font-display); font-weight:800;
  color:var(--accent); font-size:.78rem; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.cycle li span{ font-weight:600; font-size:.98rem; }

/* =============================================================
   10. El método — big idea
   ============================================================= */
.method-quote{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem, 3.4vw, 2.3rem);
  line-height:1.28; max-width:20ch;
  text-wrap:balance;
}
.method-quote em{ font-style:normal; color:var(--accent); }

/* =============================================================
   11. Cómo funciona — steps
   ============================================================= */
.steps{
  display:grid; gap:16px;
}
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{
  padding:30px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.step:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -20px rgba(21,19,15,.35); }
.step .n{
  font-family:var(--font-display); font-weight:800; color:var(--accent);
  font-size:.85rem; font-variant-numeric:tabular-nums;
}
.step h3{ font-size:1.15rem; margin-top:14px; }
.step p{ margin-top:10px; color:var(--ink-soft); font-size:.94rem; }

/* =============================================================
   12. Qué incluye — pillars
   ============================================================= */
.pillars{
  display:grid; gap:16px;
}
@media (min-width:640px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .pillars{ grid-template-columns:repeat(3,1fr); } }
.pillar{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px 26px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pillar:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -20px rgba(21,19,15,.35); }
.pillar .ic{ width:30px; height:30px; color:var(--accent); margin-bottom:18px; }
.pillar h3{ font-size:1.06rem; }
.pillar p{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; }

/* =============================================================
   14. Casos reales — grid + quotes
   ============================================================= */
.cases-grid{
  display:grid; gap:28px 20px; margin-top:64px;
}
@media (min-width:640px){ .cases-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .cases-grid{ grid-template-columns:repeat(4,1fr); } }
.case-card{
  position:relative;
  border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; background:var(--surface);
  box-shadow:0 10px 24px -18px rgba(21,19,15,.4);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  transform:rotate(var(--tilt, 0deg));
}
.case-card::before{
  content:""; position:absolute; top:-9px; left:50%; translate:-50% 0;
  width:46px; height:18px; background:color-mix(in srgb, var(--accent-soft) 80%, transparent);
  opacity:.85; z-index:2; transform:rotate(-3deg);
}
.cases-grid .case-card:nth-child(4n+1){ --tilt:-1.6deg; }
.cases-grid .case-card:nth-child(4n+2){ --tilt:1.2deg; }
.cases-grid .case-card:nth-child(4n+3){ --tilt:-1deg; }
.cases-grid .case-card:nth-child(4n+4){ --tilt:1.7deg; }
.case-card:hover{
  transform:rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow:0 20px 36px -20px rgba(21,19,15,.4);
  z-index:3;
}
.case-card img{ aspect-ratio:4/3.3; object-fit:cover; width:100%; }
.case-card-body{ padding:16px 18px 18px; }
.case-card-body .name{ font-family:var(--font-display); font-weight:800; font-size:1rem; }
.case-card-body .stat{ font-size:.85rem; color:var(--ink-soft); margin-top:4px; font-variant-numeric:tabular-nums; }
.case-card-body .stat b{ color:var(--accent); font-weight:700; }
.case-card-body .story{
  margin-top:8px; font-family:var(--font-hand); font-weight:600;
  font-size:1.15rem; line-height:1.15; color:var(--ink);
}

.marquee{
  margin-top:80px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee-track{
  display:flex; gap:20px; width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.quote-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 24px; width:320px; flex:none;
}
.quote-card p{ font-family:var(--font-hand); font-weight:600; font-size:1.3rem; line-height:1.3; color:var(--ink); }

/* =============================================================
   15. Diferenciación & Garantías — split lists
   ============================================================= */
.split{
  display:grid; border:1px solid var(--dark-line); border-radius:var(--radius-md); overflow:hidden;
}
@media (min-width:640px){ .split{ grid-template-columns:1fr 1fr; } }
.split > div{ padding:34px 32px; }
.split .no{ border-bottom:1px solid var(--dark-line); }
.split .si{ }
@media (min-width:640px){
  .split .no{ border-bottom:0; border-right:1px solid var(--dark-line); }
}
.split .h{
  font-family:var(--font-display); font-size:.76rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:18px;
}
.split .no .h{ color:var(--cream-soft); }
.split .si .h{ color:var(--accent); }
.section--dark .split .si .h{ color:var(--accent-bright); }
.split ul li{
  padding:10px 0 10px 22px; position:relative; font-size:.98rem;
  border-top:1px solid var(--dark-line);
}
.split ul li:first-child{ border-top:0; }
.split .no li::before{ content:"—"; position:absolute; left:0; color:var(--cream-soft); }
.split .si li::before{ content:"+"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.section--dark .split .si li::before{ color:var(--accent-bright); }


/* =============================================================
   16. FAQ
   ============================================================= */
.faq-list{ max-width:760px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:24px 4px; text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
}
.faq-q .plus{
  flex:none; width:22px; height:22px; position:relative;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--ink); transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.faq-q .plus::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-q .plus::after{ top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%); }
.faq-item.is-open .faq-q .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }

.faq-a{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .4s var(--ease-out), opacity .3s var(--ease-out);
}
.faq-item.is-open .faq-a{ grid-template-rows:1fr; opacity:1; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 4px 26px; color:var(--ink-soft); font-size:.98rem; max-width:60ch; }

/* =============================================================
   17. CTA final
   ============================================================= */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(2rem, 5vw, 3.2rem); max-width:18ch; margin-inline:auto; }
.cta-final p{ margin:22px auto 0; max-width:44ch; color:var(--cream-soft); font-size:1.05rem; }
.cta-final .hero-actions{ margin-top:36px; }

/* =============================================================
   18. Footer
   ============================================================= */
.footer{ padding:56px 0 40px; border-top:1px solid var(--line); }
.footer-top{
  display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start;
}
.footer-brand{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.footer-brand .dot{ color:var(--accent); }
.footer-tag{ margin-top:10px; color:var(--ink-soft); font-size:.92rem; max-width:32ch; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a{ font-size:.9rem; color:var(--ink-soft); transition:color .2s var(--ease-out); }
.footer-links a:hover{ color:var(--ink); }
.footer-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:var(--ink-faint);
}

/* =============================================================
   19. Reveal utility
   ============================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal[data-split]{ opacity:1; transform:none; } /* defensive: never let split-text parents stay hidden */

/* =============================================================
   20. Responsive tweaks
   ============================================================= */
@media (max-width:639px){
  section{ padding:76px 0; }
  .case-stats{ grid-template-columns:repeat(3,1fr); gap:10px; }
}

/* =============================================================
   21. Reduced motion — only truly intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* =============================================================
   22. Cookie consent banner
   ============================================================= */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--dark-bg); color:var(--cream);
  border-top:1px solid var(--dark-line);
  padding:20px;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner{
  max-width:1180px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-banner-inner p{ font-size:.9rem; color:var(--cream-soft); max-width:62ch; }
.cookie-banner-inner a{ color:var(--cream); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{ display:flex; gap:12px; flex:none; }
.cookie-banner-actions .btn{ padding:.7rem 1.3rem; font-size:.85rem; }
.cookie-banner-actions .btn-ghost{ border-color:var(--dark-line); }

/* =============================================================
   23. Legal pages
   ============================================================= */
.legal-header{
  padding:28px 0; border-bottom:1px solid var(--line);
}
.legal-header .container{ display:flex; align-items:center; justify-content:space-between; }
.legal-back{ font-size:.88rem; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
.legal-back:hover{ color:var(--ink); }
.legal-main{ padding:64px 0 96px; }
.legal-main .container{ max-width:760px; }
.legal-main h1{ font-size:clamp(1.9rem,4vw,2.6rem); }
.legal-updated{ margin-top:10px; color:var(--ink-soft); font-size:.9rem; }
.legal-notice{
  margin-top:32px; padding:18px 20px; background:var(--accent-soft);
  border-left:2px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.92rem; color:var(--ink);
}
.legal-body{ margin-top:40px; }
.legal-body h2{ font-size:1.3rem; margin-top:40px; margin-bottom:14px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color:var(--ink-soft); margin-top:12px; line-height:1.7; }
.legal-body ul{ margin-top:12px; padding-left:20px; list-style:disc; }
.legal-body li{ color:var(--ink-soft); line-height:1.7; margin-top:6px; }
.legal-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.legal-body strong{ color:var(--ink); }