/* Catcher — tokens del rediseño 2026 ("una presencia cálida, no una interfaz
   sci-fi"): crema + tinta cálida + UN acento coral terracota.
   Cargado DESPUÉS de todos los demás CSS en todas las páginas: remapea las
   variables --catcher-* heredadas (así el markup existente cambia de piel sin
   tocarse) y corrige los pocos componentes con colores oscuros literales.
   Blueprint: docs/audits/web-redesign/Web Redesign Blueprint v1. */

/* ─── Fuentes self-hosted (adiós fonts.googleapis.com) ─────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-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;
}
/* Fallback métrico: Arial ajustada a las métricas de Inter → CLS ~0 en swap */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.34%;
  line-gap-override: 0%;
}

/* ─── Paleta nueva vía remap de las variables heredadas ────────────────── */
:root {
  /* Surfaces (crema cálida — nunca blanco frío ni azul) */
  --catcher-bg:            #faf9f5;
  --catcher-bg-2:          #f0eee5;
  --catcher-surface:       #ffffff;
  --catcher-surface-2:     #f0eee5;
  --catcher-surface-3:     #e5e2d9;
  --catcher-border:        #e5e2d9;
  --catcher-border-strong: #d3cfc2;

  /* Text (tinta cálida — nunca #000) */
  --catcher-text:       #141413;
  --catcher-text-muted: #6b6a62;
  --catcher-text-dim:   #8f8d84;

  /* Brand: UN solo acento coral terracota */
  --catcher-primary:       #d97757;
  --catcher-primary-hover: #c05f3f;
  --catcher-primary-soft:  rgba(217, 119, 87, 0.12);
  --catcher-primary-ring:  rgba(217, 119, 87, 0.28);
  --catcher-primary-light: #b3543e; /* rol texto/link: coral oscuro legible sobre crema */

  --catcher-secondary:      #a67447; /* tan cálido (ex ámbar) */
  --catcher-secondary-soft: rgba(212, 162, 127, 0.16);

  /* Semantic (desaturados cálidos) */
  --catcher-success: #788c5d;
  --catcher-warning: #a67447;
  --catcher-danger:  #b3543e;
  --catcher-info:    #6a9bcc;

  /* Tokens nuevos (los usarán F2+; conviven con los remapeados) */
  --bg: var(--catcher-bg);
  --bg-alt: var(--catcher-bg-2);
  --bg-raise: var(--catcher-surface);
  --ink: var(--catcher-text);
  --ink-muted: var(--catcher-text-muted);
  --ink-meta: var(--catcher-text-dim);
  --border: var(--catcher-border);
  --accent: var(--catcher-primary);
  --accent-hover: var(--catcher-primary-hover);
  --dark-bg: #141413;
  --dark-ink: #faf9f5;
  --dark-muted: #b0aea5;
  --dark-border: rgba(250, 249, 245, 0.14);

  --shadow-1: 0 1px 2px rgba(20, 20, 19, 0.04);
  --shadow-2: 0 4px 16px rgba(20, 20, 19, 0.06);

  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* "White" utilities de Tailwind remapeadas: sobre crema significan tinta;
     dentro de una isla oscura vuelven a ser blanco (ver más abajo). */
  --u-white: #141413;
}

body {
  font-family: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
}

/* ─── Tipografía editorial (la firma OpenAI/Her) ───────────────────────── */
h1, h2 {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}
h3 {
  font-family: 'Inter', 'Inter-fallback', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#main h1 {
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.6rem);
  line-height: 1.08;
}
section h2 {
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* El acento serif itálico dentro de títulos: tinta sólida (adiós gradiente
   clipped que en fondo claro era invisible) */
.text-gradient,
.text-gradient-anim {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--ink);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  animation: none;
}

/* ─── Utilities compat: text-white & co. significan "texto fuerte" ─────── */
.text-white { color: var(--u-white); }
.text-white\/90 { color: color-mix(in srgb, var(--u-white) 90%, transparent); }
.text-white\/70 { color: color-mix(in srgb, var(--u-white) 70%, transparent); }
.text-white\/60 { color: color-mix(in srgb, var(--u-white) 60%, transparent); }
.text-white\/55 { color: color-mix(in srgb, var(--u-white) 55%, transparent); }
.text-white\/45 { color: color-mix(in srgb, var(--u-white) 45%, transparent); }
.text-white\/40 { color: color-mix(in srgb, var(--u-white) 40%, transparent); }
.text-white\/35 { color: color-mix(in srgb, var(--u-white) 35%, transparent); }
.text-white\/30 { color: color-mix(in srgb, var(--u-white) 30%, transparent); }
.hover\:text-white:hover { color: var(--u-white); }

/* ─── Mockup del teléfono en tema claro (la app en su light mode: cards
   blancas, texto tinta, acentos azules propios de la app) ──────────────── */
.phone-shell {
  background: linear-gradient(160deg, #ffffff 0%, #ece9df 70%);
  border: 1px solid var(--catcher-border-strong);
  box-shadow:
    0 60px 120px -40px rgba(20, 20, 19, 0.22),
    0 30px 70px -30px rgba(20, 20, 19, 0.12),
    inset 0 1px 0 #ffffff;
}
.phone-screen { background: #f7f5ef; }
/* Sin --u-white: los text-white/* del interior caen a tinta vía el compat */
.phone-screen .text-gradient {
  font-family: inherit;
  font-style: normal;
  background: linear-gradient(120deg, #141413 5%, #2D7CFF 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app-card {
  background: #ffffff;
  border-color: #e7e4da;
}
.app-icon-btn {
  background: rgba(20, 20, 19, 0.05);
  border-color: rgba(20, 20, 19, 0.08);
  color: rgba(20, 20, 19, 0.65);
}
.app-bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: rgba(20, 20, 19, 0.07);
}
.app-nav-item { color: rgba(20, 20, 19, 0.45); }
.app-coach-fab {
  background: #ffffff;
  border-color: rgba(45, 124, 255, 0.35);
  box-shadow:
    0 0 0 4px rgba(45, 124, 255, 0.07),
    0 12px 28px -6px rgba(20, 20, 19, 0.25);
}
.app-coach-fab::before {
  background: radial-gradient(circle, rgba(45, 124, 255, 0.18) 0%, transparent 65%);
}
.app-coach-fab img { filter: none; }
/* Utilities blancas del interior → equivalentes en tinta */
.phone-screen .bg-white\/12 { background-color: rgba(20, 20, 19, 0.16); }
.phone-screen .border-white\/5 { border-color: rgba(20, 20, 19, 0.07); }
.phone-screen .bg-white\/\[0\.05\] { background-color: rgba(20, 20, 19, 0.045); }
.phone-screen .border-white\/\[0\.10\] { border-color: rgba(20, 20, 19, 0.09); }

/* ─── Activity Replay en tema claro: mapa "papel" con ruta coral ───────── */
.act-replay-card {
  border-color: var(--catcher-border);
  box-shadow: var(--shadow-2);
}
.act-replay-stage { background: #f0ede3; }
.act-replay-svg > rect:first-of-type { fill: #f0ede3; }
#ar-bg-rad stop:first-of-type { stop-color: rgba(217, 119, 87, 0.07); }
.ar-parks path { fill: #dbe4c9; }
.ar-parks, .ar-streets { filter: none; }
.ar-streets { stroke: #ffffff; }
.ar-grid line { stroke: rgba(20, 20, 19, 0.06); }
#ar-river stop:first-of-type { stop-color: rgba(106, 155, 204, 0.32); }
#ar-river stop:last-of-type { stop-color: rgba(106, 155, 204, 0.20); }
.ar-route-base { stroke: rgba(20, 20, 19, 0.13); }
#ar-route-grad stop:nth-of-type(1) { stop-color: #e08a6a; }
#ar-route-grad stop:nth-of-type(2) { stop-color: #d97757; }
#ar-route-grad stop:nth-of-type(3) { stop-color: #c05f3f; }
.ar-route-active { filter: drop-shadow(0 0 6px rgba(217, 119, 87, 0.35)); }
#ar-runner-glow stop:first-of-type { stop-color: rgba(217, 119, 87, 0.55); }
.ar-runner-core { fill: #d97757; }
@keyframes ar-runner-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(217, 119, 87, 0.55)); }
  50%      { transform: scale(1.10); filter: drop-shadow(0 0 14px rgba(217, 119, 87, 0.8)); }
}
.ar-trail-dot { fill: #d97757; }
.ar-pin-start circle { fill: #788c5d; }
.ar-km-dot { fill: #ffffff; stroke: #d97757; }
.ar-km text { fill: #141413; }
.ar-km.is-hit .ar-km-dot { stroke: #c05f3f; fill: #fbe9e0; }
.ar-km-ring { stroke: #d97757; }
.ar-callout line { stroke: #c05f3f; }
.ar-callout rect { fill: #ffffff; stroke: #d97757; }
.ar-callout text { fill: #c05f3f; }
.ar-header,
.ar-stat,
.ar-hr-card {
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--catcher-border);
}
.ar-header-title { color: var(--catcher-text); }
.ar-stat-value { color: var(--catcher-text); }
.ar-stat.ar-stat-hr   { border-color: rgba(179, 84, 62, 0.35); }
.ar-stat.ar-stat-kcal { border-color: rgba(217, 119, 87, 0.35); }
.ar-heart { color: #b3543e; }
.ar-hr-card-zone { background: rgba(179, 84, 62, 0.12); color: #b3543e; }
.ar-hr-spark [data-role="hr-spark-line"] { stroke: #b3543e; }
.ar-hr-spark [data-role="hr-spark-area"] { fill: rgba(179, 84, 62, 0.14); }
.ar-final { background: rgba(250, 249, 245, 0.72); }
.ar-final::before {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(120, 140, 93, 0.16), transparent 70%),
    var(--catcher-surface);
  border-color: rgba(120, 140, 93, 0.4);
  box-shadow: 0 30px 80px -30px rgba(20, 20, 19, 0.2);
}
.ar-final-check { background: linear-gradient(135deg, #788c5d, #5f7247); box-shadow: none; }
.ar-final-title { color: var(--catcher-text); }
.ar-final-k { color: var(--catcher-text); }
.ar-final-grid > div { background: rgba(20, 20, 19, 0.03); }
.ar-ctrl {
  border-color: transparent;
  box-shadow: var(--shadow-1);
}
.ar-progress { background: rgba(20, 20, 19, 0.08); }

/* ─── Fondo del hero: gradiente crema estático (adiós canvas + aurora) ─── */
.hero-bg {
  background: linear-gradient(180deg, #faf9f5 0%, #f5efe6 100%);
}
.hero-bg::before { display: none; }   /* grid overlay */
.hero-network,
.aurora,
.phone-halo { display: none !important; }
.float-soft { animation: none; }

/* Mascota del hero: orbe cálido */
.hero-mascot {
  background:
    radial-gradient(circle at 50% 36%, rgba(217, 119, 87, 0.10), transparent 72%),
    #ffffff;
  border: 1px solid var(--catcher-border);
  box-shadow: var(--shadow-2);
  animation: none;
}
.hero-mascot::after { display: none; }


/* ─── Nav: header claro (página base y píldora del landing) ────────────── */
/* body > header[class] cubre también login/register (sin .sticky) y gana en
   especificidad a las utilities arbitrarias bg-[rgba(10,15,26,…)] del markup */
body > header[class] {
  background: rgba(250, 249, 245, 0.85);
  border-bottom-color: var(--catcher-border);
}
header.sticky > div {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--catcher-border);
  box-shadow: var(--shadow-2);
}

/* Footer: links en tinta muda, no coral (el coral es solo para CTAs) */
body > footer a { color: var(--catcher-text-muted); }
body > footer a:hover { color: var(--catcher-text); }

/* Demo del coach: título legible sobre card clara */
.ai-demo-name { color: var(--catcher-text); }

/* Comparativa: columna Catcher en coral, texto tinta */
.compare .col-catcher {
  background: linear-gradient(180deg, rgba(217, 119, 87, 0.10), rgba(217, 119, 87, 0.04));
  border-left: 1px solid rgba(217, 119, 87, 0.30);
  border-right: 1px solid rgba(217, 119, 87, 0.30);
  color: var(--catcher-text);
}
.compare th.col-catcher {
  background: linear-gradient(180deg, rgba(217, 119, 87, 0.20), rgba(217, 119, 87, 0.08));
  color: var(--catcher-text);
}

/* CTA final: halo cálido (adiós radial azul) */
#final-cta .card > div.absolute {
  background: radial-gradient(60% 80% at 50% 0%, rgba(217, 119, 87, 0.10), transparent 70%);
}

/* ─── Componentes core re-tintados ─────────────────────────────────────── */
.btn-primary {
  background: var(--catcher-primary);
  border-color: transparent;
  box-shadow: var(--shadow-1);
  color: #faf9f5;
}
.btn-primary:hover { background: var(--catcher-primary-hover); filter: none; }

.rtc-btn.--accept {
  background: var(--catcher-primary);
  box-shadow: none;
}

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

.scroll-progress {
  background: var(--catcher-primary);
  box-shadow: none;
}

.card:hover,
.card-accent:hover,
.card-soft:hover,
.bento-cell:hover {
  border-color: var(--catcher-border-strong);
  box-shadow: var(--shadow-2);
}
.card-spot::before { display: none; }   /* spotlight con el mouse, fuera */

.glow-primary { box-shadow: var(--shadow-2); }
.glow-amber   { box-shadow: var(--shadow-2); }

/* Marca y avatares: contenedor claro, sombra suave (adiós glow azul) */
.brand-mark,
.catcher-avatar {
  background:
    image-set(
      url("/assets/img/catcher-happy-128.webp") type("image/webp"),
      url("/assets/img/catcher-happy-128.png") type("image/png")
    ) center / 95% no-repeat,
    #ffffff;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--catcher-border);
}
.catcher-avatar {
  background:
    image-set(
      url("/assets/img/catcher-happy-256.webp") type("image/webp"),
      url("/assets/img/catcher-happy-256.png") type("image/png")
    ) center / 92% no-repeat,
    #ffffff;
}
.brand-mark::after,
.catcher-avatar::after { display: none; }

/* Chips glass oscuros del landing → claros */
.sat {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-2);
}
.explore-chip {
  background: rgba(255, 255, 255, 0.75);
}
.section-rail {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--catcher-border);
}
.rail-label {
  background: #ffffff;
  box-shadow: var(--shadow-2);
}
.rail-link.is-active .rail-dot { box-shadow: none; }

/* Iconos bento con acentos fríos → tonos cálidos */
.bento-cell .bento-icon.--green { background: rgba(120, 140, 93, 0.14); color: #5f7247; }
.bento-cell .bento-icon.--cyan  { background: rgba(106, 155, 204, 0.14); color: #4a7dad; }
.bento-cell .bento-icon.--rose  { background: rgba(179, 84, 62, 0.12);  color: #b3543e; }

/* Focus elegante */
:focus-visible {
  outline: 2px solid var(--catcher-primary);
  outline-offset: 2px;
}

/* Nav en móvil: wrap a segunda fila en vez de desbordar la página (el
   hamburger llega en F2; esto elimina el scroll horizontal mientras tanto) */
@media (max-width: 767px) {
  body > header > div { flex-wrap: wrap; row-gap: 2px; }
  body > header nav { flex-wrap: wrap; justify-content: flex-end; }
}