/* ============================================================
   Kuidaka — estilos compartidos (landing + páginas legales)
   Paleta REAL de la app: cobre / bronce / oro.
   El verde SOLO aparece en el badge "Verificada".
   Fuente de verdad: kuidaka-ios/.../Components/DS.swift
   ============================================================ */

/* ---------- Fuentes (Crimson Pro, embebida — sin CDN) ---------- */
@font-face{
  font-family:'Crimson Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/CrimsonPro-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Crimson Pro';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/CrimsonPro-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'Crimson Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/CrimsonPro-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family:'Crimson Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/CrimsonPro-Bold.ttf') format('truetype');
}
@font-face{
  font-family:'Crimson Pro';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/CrimsonPro-Italic.ttf') format('truetype');
}

/* ---------- Tokens de marca ---------- */
:root{
  --copper:#C47A3A; --copper-d:#A5622A; --bronze:#8B5E3C; --brown:#5C2E0E; --gold:#E0A96A;
  --cocoa:#3B1A0A;                 /* fondo login de la app */
  --green:#2BB88A;                 /* SOLO badge "Verificada" */
  --ink:#1A1A1A; --ink-soft:#555555; --muted:#888888;
  --cream:#FBF7F1; --bg:#F8F9FA; --line:#ECE3D7; --white:#fff;
  --grad:linear-gradient(120deg,#8B5E3C 0%,#C47A3A 52%,#E0A96A 115%);      /* como el logo */
  --grad-rich:linear-gradient(125deg,#5C2E0E 0%,#8B5E3C 55%,#C4956A 115%); /* placeholder de la app */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:'Crimson Pro',ui-serif,Georgia,serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.phone .screen img,.mini .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* ---------- Animación de entrada (fade-up al hacer scroll) ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
body.static .reveal{opacity:1!important;transform:none!important}

/* ---------- Marca (logo + wordmark KUIDAKA) ---------- */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark{width:38px;height:38px;border-radius:10px;background:#fff;object-fit:contain;padding:2px;
  box-shadow:0 3px 10px rgba(92,46,14,.18)}
.wm{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:.16em;color:var(--copper)}

/* ---------- Nav superior (sticky) — SOLO la barra de arriba.
   OJO: no usar el selector `nav` a secas: también hay <nav> en el footer (.flinks)
   y en el índice legal (.toc); un `nav{}` genérico les metía fondo y sticky. ---------- */
.topnav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(251,247,241,.78);border-bottom:1px solid rgba(236,227,215,.8)}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.nav-cta{font-size:15px;font-weight:600;color:var(--white);background:var(--cocoa);
  padding:10px 18px;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s}
.nav-cta:hover{transform:translateY(-2px);background:var(--copper)}

/* ---------- Footer (compartido) ---------- */
footer{background:var(--cocoa);color:#c9b6a5;padding:52px 0 34px}
.fgrid{display:grid;gap:26px}
footer .wm{color:#fff}
footer p{font-size:14px;max-width:40ch;margin-top:12px;color:#a58c78}
.flinks{display:flex;flex-wrap:wrap;gap:14px 26px}
.flinks a{color:#c9b6a5;text-decoration:none;font-size:14.5px;transition:color .2s}
.flinks a:hover{color:var(--gold)}
.fbar{margin-top:34px;padding-top:22px;border-top:1px solid #5a3a24;display:flex;flex-wrap:wrap;
  gap:8px 18px;justify-content:space-between;font-size:13px;color:#977a66}

@media(min-width:860px){
  .fgrid{grid-template-columns:1.4fr 1fr;align-items:start}
  .flinks{justify-content:flex-end}
}

/* ---------- Accesibilidad: respeta "reducir movimiento" ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}