/* ============================================================================
   Mis Bestias — CSS de marca del SITIO EN VIVO (misbestias.com)
   ----------------------------------------------------------------------------
   Marca del Home público, tomada 1:1 del diseño aprobado
   (docs/design/web/marca.css + docs/design/web/home.html) y alineada con el
   rediseño de la app (tokens de app/src/ui/theme.ts): paleta cuero/crema,
   títulos en Fraunces 600, cuerpo en Inter, íconos de LÍNEA, botones primary
   con radio lg, tarjetas con borde divider + shadow.card.

   Fuentes SELF-HOSTED (el sitio no usa CDN de Google): los .woff2 viven en
   web/fonts/ (subconjunto "latin", que cubre todo el español). Inter es
   variable y un solo archivo sirve 400–700.

   Regla del proyecto: nada de números sueltos de color/tamaño/radio/espaciado/
   sombra — todo sale de estas variables.

   Solo el Home usa esta hoja. Las páginas legales siguen con web/estilos.css
   (su rebranding es otro PR).
   ========================================================================== */

/* --- Fuentes self-hosted (subconjunto latin) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700; /* variable: cuerpo 400, medium 500, semibold 600, bold 700 */
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600; /* único peso que usa el Home (títulos y wordmark) */
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color: paleta cuero/crema (theme.ts) --- */
  --bg: #fbf7f2;
  --white: #ffffff;
  --cream: #fffaf3;
  --surface-muted: #efe3d2;
  --surface-soft: #f3ece0;
  --divider: #f0e7da;
  --border: #e3d6c4;
  --border-strong: #d8c7b0;
  --text: #3b2a1a;        /* 12.9:1 */
  --text-muted: #6b5a47;  /* 6.2:1 */
  --text-subtle: #7a6a58; /* 4.9:1 */
  --primary: #7a4a2b;     /* cuero · botones y enlaces · 6.9:1 */
  --on-primary: #fffaf3;  /* 7.1:1 */
  --danger: #b3321c;      /* borrar/errores · 5.8:1 */
  --danger-bg: #fbe3e3;
  --danger-border: #e6b8b8;
  --success: #2f6b3f;
  --success-bg: #e7f0e9;
  --success-border: #cfe0d2;
  --warning: #855c00;
  --gold: #8f6412;

  /* --- Color: marca (Fase 2, theme.ts) --- */
  --brand-ink: #2c1d10;   /* espresso: títulos, nombres */
  --accent: #a8641f;      /* cuero vivo: wordmark, acentos, foco · 4.6:1 */
  --primary-tint: #f3e7db;/* lavado cuero: chip/estado activo */

  /* --- Tipografía (fontFamily de theme.ts: Fraunces 600 · Inter 400–700) --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-body: 15px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-title: 20px;
  --fs-xl: 22px;
  --fs-xxl: 26px;   /* cifras destacadas */
  /* Display de la web (titulares; la app usa xl–27 en pantalla de teléfono) */
  --fs-display: clamp(28px, 7vw, 40px);
  --fs-display-sm: clamp(22px, 5.5vw, 28px);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.45;

  --ls-brand: 0.02em; /* tracking del wordmark (como en la app) */

  /* --- Radios --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 999px;

  /* --- Espaciados (space de theme.ts) --- */
  --sp-hair: 2px;
  --sp-xxs: 4px;
  --sp-xs: 6px;
  --sp-sm: 8px;
  --sp-sm-plus: 10px;
  --sp-md: 12px;
  --sp-md-plus: 14px;
  --sp-lg: 16px;
  --sp-lg-plus: 18px;
  --sp-xl: 20px;
  --sp-xxl: 24px;
  --sp-xxxl: 32px;
  --sp-huge: 40px;
  --sp-jumbo: 48px;

  /* --- Sombras (shadow de theme.ts) --- */
  --shadow-card: 0 4px 10px rgba(60, 38, 18, 0.10); /* shadowWarm #3c2612 al 10 % */
  --shadow-raised: 0 3px 6px rgba(0, 0, 0, 0.25);
  --focus-ring: 0 0 0 3px rgba(168, 100, 31, 0.14); /* halo accent del campo activo */

  /* --- Medidas --- */
  --min-touch: 48px; /* MIN_TOUCH */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --content-max: 1000px;
  --prose-max: 760px;
}

* {
  box-sizing: border-box;
}

/* `hidden` gana siempre, aunque el componente tenga display propio */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%; /* respeta la escala de letra del sistema */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  /* Áreas seguras (notch / barras del sistema) */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* --- Tipografía de marca: títulos en Fraunces 600, brandInk --- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--brand-ink);
  line-height: var(--lh-tight);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--primary);
}

/* --- Íconos de línea (mismo estilo que la app: trazo, sin emojis) --- */
.ico {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.ico--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

/* --- Contenedor --- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}

.wrap--prose {
  max-width: var(--prose-max);
}

/* --- Cabecera de marca (como la de la app: degradado cream → bg) --- */
.site-header {
  background: linear-gradient(180deg, var(--cream), var(--bg));
}

/* Fija arriba solo con espacio; en el teléfono no se come la pantalla */
@media (min-width: 720px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 56px;
  flex-wrap: wrap;
}

/* Wordmark "MIS BESTIAS": Fraunces 600, mayúsculas, accent, marca de caballo */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  min-height: var(--min-touch);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xxs) var(--sp-md);
  align-items: center;
  font-size: var(--fs-body);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding: 0 var(--sp-xs);
  border-radius: var(--radius-sm);
}

.site-nav a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* --- Botones (como Button de la app: primary, radio lg, negrita) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: var(--min-touch);
  padding: var(--sp-sm-plus) var(--sp-xl);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--secondary {
  background: var(--surface-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--block {
  width: 100%;
}

/* Acción destructiva (como danger en la app: borrar/archivar) */
.btn--danger {
  background: var(--white);
  color: var(--danger);
  border-color: var(--danger-border);
}

/* Botón con aspecto de enlace (acción secundaria sin caja) */
.btn--link {
  background: transparent;
  color: var(--primary);
  padding-left: var(--sp-xs);
  padding-right: var(--sp-xs);
  text-decoration: underline;
}

.btn:hover {
  filter: brightness(0.96);
}

/* Foco visible en todo lo interactivo (accent, como el foco de la app) */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- Tarjetas (como las de la app: radio xl, borde divider, shadow.card) --- */
.card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-xl);
}

/* --- Pie --- */
.site-footer {
  border-top: 1px solid var(--divider);
  background: var(--cream);
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-top: var(--sp-jumbo);
}

.site-footer .wrap {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-xxl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  align-items: center;
}

.site-footer a {
  color: var(--text-muted);
}

/* --- Utilidades mínimas (usan tokens) --- */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.center { text-align: center; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--sp-sm);
  top: var(--sp-sm);
  z-index: 20;
  background: var(--white);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   Home (misbestias.com) — solo tokens de arriba, nada de números sueltos
   ========================================================================== */
.hero {
  padding: var(--sp-jumbo) 0 var(--sp-xxxl);
}

.hero h1 {
  font-size: var(--fs-display);
  max-width: 14ch;
}

.hero .lead {
  font-size: var(--fs-title);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  margin-top: var(--sp-lg);
  max-width: 42ch;
}

.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-xxl);
}

.hero .note {
  margin-top: var(--sp-md);
  color: var(--text-subtle);
  font-size: var(--fs-md);
}

.section {
  padding: var(--sp-xxxl) 0;
}

.section > .wrap > h2 {
  font-size: var(--fs-display-sm);
  margin-bottom: var(--sp-xl);
}

.pillars {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
}

.pillar h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-xs);
}

.pillar p {
  color: var(--text-muted);
}

.pillar__icon {
  width: var(--sp-huge);
  height: var(--sp-huge);
  border-radius: var(--radius-md);
  background: var(--primary-tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-md);
}

.closer {
  text-align: center;
  padding: var(--sp-xxxl) var(--sp-lg) var(--sp-jumbo);
}

.closer h2 {
  font-size: var(--fs-display-sm);
}

.closer p {
  color: var(--text-muted);
  margin: var(--sp-md) auto var(--sp-xl);
  max-width: 44ch;
}

/* Contacto honesto del cierre (correo ofuscado) */
.closer .contact {
  margin-top: var(--sp-xl);
  color: var(--text-subtle);
  font-size: var(--fs-md);
}

@media (min-width: 720px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}