/*
  MDP Solutions — Voice Agent Demo Landing
  Self-contained stylesheet. No external fonts, no CDN, no Tailwind.
  System font stack only, per project spec.

  Brand tokens below come from the mdp-brand skill (source of truth for
  MDP Solutions colors). Do not invent new colors here; if a color is
  needed that is not listed, go back to mdp-brand instead of guessing.
*/

:root {
  /* --- MDP brand tokens (navy / cyan / lilac) --- */
  --mdp-navy-900: #11193f;
  --mdp-navy-800: #16215a;
  --mdp-navy-700: #1b2a6b;
  --mdp-navy-600: #243a8f;
  --mdp-navy-500: #2e48b3;
  --mdp-navy-300: #8e9ddb;
  --mdp-navy-100: #e7ebf8;

  --mdp-cyan-700: #127dae;
  --mdp-cyan-600: #1a95c9;
  --mdp-cyan-500: #29abe2;
  --mdp-cyan-300: #8fd4f1;
  --mdp-cyan-100: #e8f6fc;

  --mdp-lila-600: #7e5da1;
  --mdp-lila-500: #9e80bc;

  --mdp-white: #ffffff;
  --mdp-success: #2bb673;
  --mdp-warning: #f5a623;
  --mdp-error: #e5484d;

  /* Signature gradient. Closes on cyan-700, not cyan-500: text set in
     cyan-500 over dark backgrounds reads under ~3:1 contrast and fails
     WCAG AA. cyan-700 keeps it around 4.5:1+. */
  --mdp-gradient: linear-gradient(135deg, var(--mdp-navy-700), var(--mdp-cyan-700));

  /* --- Dark theme surface tokens (this page is dark by spec) --- */
  --surface-0: var(--mdp-navy-900);
  --surface-1: #16205a1a; /* subtle panel tint, mixed at use sites */
  --surface-panel: #1a2456;
  --surface-panel-border: #2a3670;
  --text-primary: #f4f6fc;
  --text-secondary: #aab1d6;
  --text-muted: #7c84ad;

  /* System font stack. No CDN, no @font-face by default. */
  --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 20px 50px rgba(6, 10, 30, 0.45);
  --shadow-sm: 0 8px 24px rgba(6, 10, 30, 0.35);

  --max-width: 1080px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
}

/*
  Brand typography note: MDP's official pair is Montserrat (display) +
  Inter (body). This build ships zero CDN font requests by explicit
  project spec, so headings and body both fall back to the system stack
  above. To restore brand typography later, self-host two woff2 files in
  assets/ and uncomment a block like this — do NOT point at a Google
  Fonts CDN, that reintroduces the exact dependency this build avoids:

  @font-face {
    font-family: "Montserrat";
    src: url("assets/montserrat-700.woff2") format("woff2");
    font-weight: 700 800;
    font-display: swap;
  }
  Then set --font-display: "Montserrat", ... ;
*/

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--surface-0);
  background-image:
    radial-gradient(600px 400px at 85% -10%, rgba(41, 171, 226, 0.16), transparent 60%),
    radial-gradient(500px 380px at -10% 20%, rgba(158, 128, 188, 0.10), transparent 55%);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
}

a {
  color: var(--mdp-cyan-300);
}

img, svg {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Accessible focus ring everywhere, including inside dark surfaces */
:focus-visible {
  outline: 3px solid var(--mdp-cyan-500);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---------- Header ---------- */

.site-header {
  padding: var(--space-3);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
}

/* Chip blanco con el logo a color, igual que la cabecera de la landing
   (build-landing.js). El logo a color es navy y necesita fondo claro; sobre
   el header oscuro de esta página se perdería sin el chip. */
.logo-chip {
  display: inline-block;
  background: var(--mdp-white);
  border-radius: 14px;
  padding: 8px 12px;
  line-height: 0;
}

.logo-chip img {
  display: block;
  width: clamp(130px, 34vw, 168px);
  height: auto;
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-4) var(--space-3) var(--space-5);
  text-align: center;
}

.hero .container {
  max-width: 720px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdp-cyan-300);
  background: rgba(41, 171, 226, 0.12);
  border: 1px solid rgba(41, 171, 226, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}

.hero h1 {
  font-size: 34px;
  background: var(--mdp-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero .subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}

/* Primary CTA — the single call-to-action of the page */
.cta-button {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--mdp-white);
  background: var(--mdp-gradient);
  padding: 16px 32px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  min-height: 56px;
  min-width: 260px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cta-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(41, 171, 226, 0.3);
}

.cta-button:active:not(:disabled) {
  transform: translateY(0);
}

.cta-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.cta-button .cta-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.cta-button .spinner {
  display: none;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}

.cta-button[data-loading="true"] .spinner {
  display: block;
}

.cta-button[data-loading="true"] .cta-icon {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-button .spinner {
    animation: none;
  }
  .cta-button:hover:not(:disabled) {
    transform: none;
  }
}

/* Status / fallback region — single node the JS state machine controls */
.agent-status {
  margin-top: var(--space-2);
  min-height: 24px;
  font-size: 14px;
  color: var(--text-secondary);
}

.agent-status[data-tone="error"] {
  color: #ff9a9d;
}

.agent-status[data-tone="warning"] {
  color: var(--mdp-warning);
}

.fallback-actions {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fallback-actions[hidden] {
  display: none;
}

.btn-secondary {
  appearance: none;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-panel);
  border: 1px solid var(--surface-panel-border);
  padding: 10px 18px;
  border-radius: 999px;
}

.btn-secondary:hover {
  border-color: var(--mdp-cyan-500);
}

/* AI disclosure — always visible, never a tooltip or modal */
.ai-disclosure {
  margin-top: var(--space-3);
  font-size: 13px;
  color: var(--text-muted);
  max-width: 52ch;
  margin-inline: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--surface-panel-border);
}

.ai-disclosure strong {
  color: var(--text-secondary);
}

/* ---------- How it works ---------- */

.how-it-works {
  padding: var(--space-5) var(--space-3);
  background: var(--surface-panel);
  border-top: 1px solid var(--surface-panel-border);
  border-bottom: 1px solid var(--surface-panel-border);
}

.how-it-works h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: var(--space-4);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--radius);
}

.step-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(41, 171, 226, 0.12);
  color: var(--mdp-cyan-300);
}

.step-icon svg {
  width: 24px;
  height: 24px;
}

/* Step 2 gets the accent detail in lilac — kept smaller in area than the
   cyan usage elsewhere on the page, per the 60/30/10 brand rule. */
.step:nth-child(2) .step-icon {
  background: rgba(158, 128, 188, 0.14);
  color: var(--mdp-lila-500);
}

.step h3 {
  font-size: 16px;
  margin: 0;
}

.step p {
  font-size: 14px;
  margin: 0;
}

/* ---------- Final CTA section ---------- */

.cta-final {
  padding: var(--space-5) var(--space-3);
  text-align: center;
}

.cta-final .container {
  max-width: 560px;
}

.cta-final h2 {
  font-size: 22px;
}

.cta-final a.btn-link {
  color: var(--mdp-cyan-300);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: var(--space-3);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--surface-panel-border);
}

.site-footer p {
  margin: 0 0 4px;
  color: inherit;
}

/* ---------- Widget host ----------
   The ElevenLabs widget renders its own small, always-visible call
   button bottom-right by default (verified on the live widget). The
   project spec asks for a single primary CTA, so the widget starts
   hidden and assets/app.js reveals it only when the hero CTA is pressed,
   or when it has to hand off control (see the HANDOFF state).

   visibility:hidden is used deliberately instead of display:none: it
   keeps the widget's shadow DOM laid out with real dimensions, which the
   click-forwarding heuristic in app.js depends on via
   getBoundingClientRect() to tell the round "message" icon apart from
   the "call" button. display:none would zero those rects out and break
   the heuristic. Programmatic .click() also still works on a
   visibility:hidden element, which is what lets the hero CTA reach the
   widget's internal button in the same user gesture. */

elevenlabs-convai {
  visibility: hidden;
}

elevenlabs-convai.mdp-widget-visible {
  visibility: visible;
}

/* ---------- Own "X": hang up AND close in one tap ----------
   The widget's own two exits don't read as "close" (the round "Finalizar"
   button sits against the text field; the "Contraer" chevron lands outside
   the panel), and on mobile the near-full-screen panel becomes a dead end.
   The widget host positions itself with position:fixed; z-index:1000
   (verified live, v0.17.1), so this X is fixed and one layer above. 44px is
   the minimum touch target. It is placed and toggled from app.js. */

#voice-close {
  position: fixed;
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--mdp-navy-700);
  border: 2px solid var(--mdp-white);
  color: var(--mdp-white);
  box-shadow: 0 6px 18px rgba(17, 25, 63, 0.4);
}

#voice-close:hover {
  background: var(--mdp-navy-900);
}

#voice-close:focus-visible {
  outline: 3px solid var(--mdp-cyan-500);
  outline-offset: 2px;
}

#voice-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ---------- Highlight ring used to hand off to the native widget
   when the page cannot pierce its shadow DOM (see assets/app.js) ---------- */

@keyframes mdp-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(41, 171, 226, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(41, 171, 226, 0); }
}

.mdp-widget-handoff {
  animation: mdp-pulse-ring 1.6s ease-out infinite;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .mdp-widget-handoff {
    animation: none;
    outline: 2px solid var(--mdp-cyan-500);
  }
}

/* ---------- Breakpoints ---------- */

@media (min-width: 640px) {
  .hero h1 {
    font-size: 42px;
  }

  .hero .subtitle {
    font-size: 18px;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: var(--space-5);
  }

  .hero h1 {
    font-size: 52px;
  }

  .how-it-works h2 {
    font-size: 28px;
  }
}