/* =====================================================================
   TAXI BARCELONA — TOKENS DE DISEÑO (claro / oscuro)
   Paleta "futurista pero seria": grafito / azul noche + acento cian
   eléctrico. El amarillo se conserva solo como detalle puntual
   (estrellas de reseñas, algún micro-acento), nunca como color
   dominante.
   ===================================================================== */

:root{
  /* ---- Marca (fija en ambos temas) ---- */
  --accent-1: #0891B2;      /* cian profundo — para botones (contraste con blanco) */
  --accent-2: #06B6D4;      /* cian vivo — glow, hover, decorativo */
  --accent-glow: rgba(6,182,212,0.35);
  --yellow-detail: #F5C400; /* amarillo, SOLO como detalle puntual */
  --whatsapp: #25D366;      /* verde de marca — solo para el botón flotante (icono, sin texto) */
  --whatsapp-text: #0C7D38; /* mismo verde pero oscurecido: cumple contraste AA con texto blanco en los botones con etiqueta */
  --whatsapp-text-hover: #095E2A;

  /* ---- Tema CLARO (por defecto) ---- */
  --bg: #F5F7FC;
  --bg-alt: #ECF1F8;
  --surface: #FFFFFF;
  --surface-2: #F1F5FB;
  --text: #0E1626;
  --text-muted: #56617A;
  --text-on-dark: #EAF1FB;
  --border: #E1E7F1;
  --border-strong: #CBD5E5;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.14);
  --header-bg: rgba(255,255,255,0.82);
  --hero-overlay: linear-gradient(135deg, rgba(10,15,26,0.92), rgba(10,20,35,0.72));
  --hero-bg-fallback: #0B1220;
  --night: #0B1220; /* superficies "oscuras a propósito" incluso en tema claro: header, footer, hero */
  --night-2: #101a2c;
  --on-night: #EAF1FB;
  --on-night-muted: #9AA7BD;
  --accent-text: #0E7490; /* texto de acento con contraste AA sobre fondo claro */

  --radius: 14px;
  --radius-sm: 9px;
  --font-titulos: 'Poppins', sans-serif;
  --font-cuerpo: 'Inter', sans-serif;
  --transicion: all 0.25s ease;
}

/* ---- Tema OSCURO: por preferencia de sistema ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #080C15;
    --bg-alt: #0D1320;
    --surface: #121A2A;
    --surface-2: #172236;
    --text: #EAF1FB;
    --text-muted: #93A2BC;
    --border: #22304A;
    --border-strong: #2E3F5E;
    --shadow: 0 10px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
    --header-bg: rgba(8,12,21,0.75);
    --hero-overlay: linear-gradient(135deg, rgba(5,8,14,0.94), rgba(6,12,22,0.78));
    --hero-bg-fallback: #05080E;
    --night: #05080E;
    --night-2: #0A0F1A;
    --on-night: #EAF1FB;
    --on-night-muted: #93A2BC;
    --accent-text: #5EEAFF;
  }
}

/* ---- Tema OSCURO: forzado manualmente (toggle) ---- */
:root[data-theme="dark"]{
  --bg: #080C15;
  --bg-alt: #0D1320;
  --surface: #121A2A;
  --surface-2: #172236;
  --text: #EAF1FB;
  --text-muted: #93A2BC;
  --border: #22304A;
  --border-strong: #2E3F5E;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --header-bg: rgba(8,12,21,0.75);
  --hero-overlay: linear-gradient(135deg, rgba(5,8,14,0.94), rgba(6,12,22,0.78));
  --hero-bg-fallback: #05080E;
  --night: #05080E;
  --night-2: #0A0F1A;
  --on-night: #EAF1FB;
  --on-night-muted: #93A2BC;
  --accent-text: #5EEAFF;
}

/* ---- Tema CLARO: forzado manualmente (toggle), gana siempre ---- */
:root[data-theme="light"]{
  --bg: #F5F7FC;
  --bg-alt: #ECF1F8;
  --surface: #FFFFFF;
  --surface-2: #F1F5FB;
  --text: #0E1626;
  --text-muted: #56617A;
  --border: #E1E7F1;
  --border-strong: #CBD5E5;
  --shadow: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.14);
  --header-bg: rgba(255,255,255,0.82);
  --hero-overlay: linear-gradient(135deg, rgba(10,15,26,0.92), rgba(10,20,35,0.72));
  --hero-bg-fallback: #0B1220;
  --night: #0B1220;
  --night-2: #101a2c;
  --on-night: #EAF1FB;
  --on-night-muted: #9AA7BD;
  --accent-text: #0E7490;
}

/* ===================== RESET / BASE ===================== */
*{ margin:0; padding:0; box-sizing:border-box; min-width:0; }
/* min-width:0 evita el bug clásico de grid/flex donde un <input> o un
   botón con texto largo obliga a su columna a desbordar el viewport en
   móvil en vez de encogerse. Los elementos con ancho explícito (ej.
   .phone-prefix-select) no se ven afectados: min-width solo baja el
   suelo de encogimiento, nunca fuerza un tamaño menor al indicado. */
html{ scroll-behavior:smooth; color-scheme: light dark; }
body{
  font-family: var(--font-cuerpo);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}
h1,h2,h3,h4{ font-family: var(--font-titulos); line-height:1.25; color:var(--text); }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font-family: inherit; color: inherit; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
section{ padding:96px 0; }
@media (max-width:640px){ section{ padding:64px 0; } }

.section-tag{
  display:inline-flex; align-items:center; gap:8px;
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  color: var(--accent-text);
  font-weight:600; font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase;
  padding:7px 15px; border-radius:50px; margin-bottom:16px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.section-title{ font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom:14px; letter-spacing:-0.01em; }
.section-subtitle{ color: var(--text-muted); max-width:620px; margin-bottom:44px; font-size:1.02rem; }
.text-center{ text-align:center; }
.text-center .section-subtitle{ margin-left:auto; margin-right:auto; }

/* Animación de aparición al hacer scroll */
.fade-in{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* ===================== BOTONES ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius: var(--radius-sm); font-weight:600; font-size:1rem;
  border:1.5px solid transparent; cursor:pointer; transition: var(--transicion);
  text-align:center;
}
/* Los botones cortos (la mayoría) no necesitan salto de línea; los que
   llevan texto largo (ej. el CTA "ir directo a WhatsApp") si el
   contenedor es estrecho, envuelven en vez de desbordar la pantalla. */
.nav-cta, .btn-sm{ white-space:nowrap; }
.btn-primary{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color:#fff;
  box-shadow: 0 6px 18px var(--accent-glow);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 26px var(--accent-glow); filter:brightness(1.06); }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline{
  background:transparent; border-color: rgba(234,241,251,0.45); color: var(--on-night);
}
.btn-outline:hover{ background: rgba(234,241,251,0.12); border-color: var(--accent-2); transform:translateY(-3px); }
.btn-whatsapp{ background: var(--whatsapp-text); color:#fff; }
.btn-whatsapp:hover{ background: var(--whatsapp-text-hover); transform:translateY(-3px); box-shadow:0 10px 22px rgba(12,125,56,0.35); }
.btn-ghost{
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
.btn-ghost:hover{ border-color: var(--accent-2); color: var(--accent-text); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:0.85rem; }