/* ==========================================================================
   Elevate Studio · Tokens
   Único archivo de variables del sitio. Colores y radios: docs/brief.md,
   sección "Sistema visual". Medidas: /referencias (medidas con DevTools).

   Breakpoints (mobile-first; las media queries no aceptan variables):
     base   375px   → estilos sin media query
     tablet         → @media (min-width: 768px)
     desktop        → @media (min-width: 1440px)
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --bg: #F4F1EA;        /* Fondo crema cálido */
  --surface: #FFFFFF;   /* Tarjetas */
  --ink: #111111;       /* Obsidian Black · texto */
  --muted: #A6A193;     /* Aluminum Beige · números y metadatos */
  --accent: #800020;    /* Biking Red · CTA y flecha del botón */
  --nav: #0B1D34;       /* Eclipse Blue · navbar y footer */
  --deep: #0E2B24;      /* Ponderosa Pine · bloque salones y consultorios */
  --border: #E2DDD2;    /* Borde de tarjeta de 1px */

  /* ---- Radios ---- */
  --radius-pill: 100px; /* Botones y nav */
  --radius-card: 12px;  /* Tarjetas (la referencia usa 8px) */

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Tamaños de texto (QA en Chrome del usuario, 2026-09-24) ---- */
  --text-size: 16px;            /* cuerpo */
  --label-size: 14px;           /* etiquetas chicas (antes 12px) */
  --chip-size: 13px;            /* píldoras de giro (no caben más grandes a 375) */
  --option-size: 14px;
  --step-title-size: 22px;
  --faq-size: 17px;
  --pass-label-size: 12px;      /* antes 10px */
  --chat-msg-size: 14px;        /* antes 12.5px */
  --chat-meta-size: 13px;       /* separadores, barra y caja de mensaje */
  --chat-time-size: 11.5px;     /* antes 10px */
  --chat-tab-size: 14px;
  --chat-title-size: 22px;

  /* ---- Layout ---- */
  --gutter: 20px;       /* padding lateral de ambas referencias */
  --container: 1100px;  /* max-width del navbar y del grid de servicios */

  /* ---- see-for-yourself: navbar + CTA ---- */
  --nav-h: 48px;
  --nav-pad: 4px;
  --nav-top: 12px;              /* sticky top y margin superior */
  --nav-link-size: 13px;
  --nav-link-pad: 9px 14px;
  --cta-size: 12px;
  --cta-pad: 10px 12px 10px 16px;
  --cta-gap: 8px;
  --cta-arrow: 16px;            /* círculo de flecha */
  --lang-size: 13px;            /* selector ES | EN */
  --logo-h: 28px;               /* wordmark en navbar y footer */

  /* Colores derivados para el navbar oscuro (crema --bg con alfa) */
  --nav-link: rgba(244, 241, 234, 0.72);       /* ref: #c9c9cc sobre negro */
  --nav-link-hover-bg: rgba(244, 241, 234, 0.12); /* ref: activo #3a3a3d */

  /* ---- see-for-yourself: botón píldora grande (.btn-blue) ---- */
  --btn-size: 14px;
  --btn-weight: 600;
  --btn-pad: 12px 8px 12px 20px;
  --btn-gap: 8px;
  --btn-icon: 24px;
  --btn-icon-bg: rgba(255, 255, 255, 0.22);

  /* ---- see-for-yourself: hero ---- */
  --hero-pad: 48px var(--gutter) 40px;
  --hero-sub-size: 17px;      /* de arturospatino .desc */
  --hero-sub-line: 27.6px;
  --hero-sub-max: 560px;

  /* ---- see-for-yourself: H1 del hero (desde 768px) ---- */
  --h1-size: 48px;
  --h1-line: 52.8px;
  --h1-track: -1.44px;
  --h1-size-xl: 64px;           /* tope en pantallas anchas (hero de la Home) */
  --h1-size-mobile: 36px;       /* ajuste propio para 375px */
  --h1-line-mobile: 40px;
  --h1-track-mobile: -1.08px;   /* mismo -0.03em de la referencia */

  /* ---- see-for-yourself: teléfono (marco propio en CSS) ---- */
  --phone-w: 280px;
  --phone-h: 587px;
  --phone-bezel: 12px;
  --phone-radius: 56px;
  --phone-frame: var(--ink);              /* ref: #0b0b0c */
  --phone-notch-w: 84px;
  --phone-notch-h: 20px;
  --phone-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
  --phone-hint-offset: 14px;              /* etiqueta bajo el teléfono (ref: bottom -38px, 1 línea) */
  --phone-hint-size: 14px;

  /* Pase Wallet dentro del teléfono (propio) */
  --pass-bg: var(--nav);                  /* se sobrescribe por giro en Fase 3 */
  --pass-fg: var(--surface);
  --pass-radius: var(--radius-card);
  --pass-stamp: 36px;

  /* Chat de ejemplo (botón flotante + ventana) */
  --fab-h: 52px;
  --bubble-in: var(--surface);                                        /* asistente */
  --bubble-out: color-mix(in srgb, var(--deep) 12%, var(--surface));  /* cliente */
  --backdrop: rgba(17, 17, 17, 0.55);

  /* Diseño predeterminado por giro (aprobado 2026-09-23, solo paleta Elevate) */
  --giro-cafeteria: var(--deep);
  --giro-restaurante: var(--accent);
  --giro-clinica: var(--nav);
  --giro-salon: var(--ink);

  /* Configurador (formulario) · medidas de tarjeta de arturospatino */
  --config-w: 340px;
  --field-h: 44px;
  --stage-gap: 56px;          /* = --card-gap */

  /* ---- arturospatino: tarjetas de servicios ---- */
  --grid-gap: 8px;
  --card-pad: 24px;
  --card-gap: 56px;
  --card-num-size: 14px;
  --card-title-size: 28px;
  --card-title-weight: 500;
  --card-tagline-size: 17px;
  --card-desc-size: 17px;
  --card-desc-line: 27.6px;
  --icon-size: 80px;
  --section-title-size: 24px;
  --section-title-track: -0.64px;

  --section-title-mb: 32px;       /* ref .section-title margin-bottom */
  --icon-line: var(--muted);      /* gris, decisión de Adrián 2026-09-23 */
  --icon-accent: var(--accent);   /* un solo elemento en acento por ícono */

  /* ---- Secciones del Home ---- */
  --section-pad: 60px;            /* ref body padding 60px (arturospatino) */
  --section-pad-lg: 96px;         /* GENÉRICO: más aire desde 768px */
  --on-deep: var(--bg);           /* texto sobre --deep y --nav */
  --on-deep-soft: rgba(244, 241, 234, 0.72);
  --on-deep-line: rgba(244, 241, 234, 0.18);
  --blur-competencia: 6px;
  --bar-h: 8px;

  /* ---- Movimiento (plan CEO 2026-09-23) ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-card: cubic-bezier(.25, .1, .25, 1);   /* arturospatino, medido */
  --ease-loop: cubic-bezier(.5, 0, 0, 1);       /* arturospatino, medido */
  --ease-scan: cubic-bezier(.45, 0, .55, 1);
  --ease-reveal: cubic-bezier(.25, .8, .25, 1);
  --dur-press: 100ms;
  --dur-fast: 150ms;
  --dur-state: 250ms;
  --dur-focal: 450ms;
  --dur-card: 600ms;
  --dur-scan: 700ms;
  --dur-bars: 700ms;
  --dur-reveal: 0.9s;
  --dur-loop: 4s;                /* ciclo de los íconos, como el Lottie de la referencia */
  --focal-delay: 600ms;
  --stagger: 120ms;
  --stagger-sm: 80ms;
  --stagger-xs: 40ms;
  --step-delay: 400ms;
  --seq-topics: 400ms;           /* diagnóstico: inicio de temas elogiados */
  --seq-bad: 600ms;              /* diagnóstico: inicio de temas en reseñas malas */
  --seq-lock: 1100ms;            /* diagnóstico: bloque de competencia al final */
  --rise: 18px;
  --dur-count: 900ms;            /* conteo del diagnóstico */
  --dur-bubble: 900ms;           /* chat: "escribiendo…" antes de cada respuesta */
  --dur-bubble-gap: 500ms;       /* chat: pausa antes del mensaje del cliente */
  --press-scale: .97;
  --press-scale-sm: .98;
}

/* Pantallas grandes: el contenedor deja de ser 1100 (medida de la referencia) y se vuelve fluido:
   pantalla menos 80px por lado, máximo 1520px (decisión de Adrián 2026-09-24) */
@media (min-width: 1440px) {
  :root {
    --container: min(1520px, calc(100vw - 160px));

    /* Escala de texto para pantallas grandes (QA en Chrome del usuario, 2026-09-24) */
    --text-size: 18px;
    --lang-size: 14px;
    --nav-link-size: 16px;
    --cta-size: 15px;
    --btn-size: 16px;
    --hero-sub-size: 20px;
    --hero-sub-line: 32px;
    --hero-sub-max: 620px;
    --section-title-size: 36px;
    --section-title-track: -0.9px;
    --card-num-size: 16px;
    --card-title-size: 30px;
    --card-tagline-size: 18px;
    --card-desc-size: 18px;
    --card-desc-line: 29px;
    --label-size: 15px;
    --chip-size: 15px;
    --option-size: 16px;
    --step-title-size: 26px;
    --faq-size: 20px;
    --config-w: 380px;
    --phone-hint-size: 15px;
    --chat-msg-size: 15px;
    --chat-meta-size: 14px;
    --chat-time-size: 12px;
    --chat-tab-size: 15px;
    --chat-title-size: 24px;
  }
}