/* =====================================================================
   TAXI BARCELONA — ESTILOS DE COMPONENTES Y SECCIONES
   Requiere css/theme.css cargado antes que este archivo.
   ===================================================================== */

/* ===================== HEADER / NAV ===================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: var(--transicion);
}
.header.scrolled{ border-bottom-color: var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; max-width:1180px; margin:0 auto; }

.nav-logo{
  font-family: var(--font-titulos); font-weight:700; font-size:1.2rem;
  color: var(--on-night); display:flex; align-items:center; gap:9px;
}
.nav-logo .logo-mark{
  width:32px; height:32px; border-radius:9px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.95rem;
  box-shadow: 0 4px 14px var(--accent-glow);
}

.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ color: var(--on-night); font-weight:500; font-size:0.94rem; transition: var(--transicion); }
.nav-links a:not(.btn):hover{ color: var(--accent-2); }
.nav-cta{ padding:10px 20px; font-size:0.88rem; }

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background: rgba(234,241,251,0.08); border:1.5px solid rgba(234,241,251,0.25);
  color: var(--on-night); cursor:pointer; transition: var(--transicion); font-size:1rem; flex-shrink:0;
}
.theme-toggle:hover{ border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-2px); }
.theme-toggle .fa-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .fa-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .fa-sun{ display:inline; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .fa-moon{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle .fa-sun{ display:inline; }
}

.lang-switcher{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:6px; background:none;
  border:1.5px solid rgba(234,241,251,0.3); color: var(--on-night);
  padding:8px 14px; border-radius:50px; font-size:0.85rem; font-weight:600; cursor:pointer; transition: var(--transicion);
}
.lang-btn:hover{ border-color: var(--accent-2); color: var(--accent-2); }
#langBtnCode{ text-transform:uppercase; }

.lang-dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius:12px; box-shadow: var(--shadow-lg); min-width:170px; max-height:320px;
  overflow-y:auto; display:none; z-index:1200; padding:6px 0;
}
.lang-dropdown.show{ display:block; }
.lang-dropdown li{ padding:10px 18px; font-size:0.9rem; font-weight:500; cursor:pointer; transition: var(--transicion); }
.lang-dropdown li:hover{ background: var(--surface-2); }
.lang-dropdown li.active{ color: var(--accent-text); font-weight:700; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; z-index:1100; }
.nav-toggle span{ width:24px; height:2.5px; background: var(--on-night); border-radius:2px; transition: var(--transicion); }
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width:940px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; top:0; right:-100%; width:78%; max-width:340px; height:100vh;
    background: var(--night); flex-direction:column; justify-content:center; align-items:flex-start;
    gap:26px; padding:40px 32px; transition: right 0.4s ease; box-shadow:-10px 0 30px rgba(0,0,0,0.35);
    overflow-y:auto;
  }
  .nav-links.active{ right:0; }
  .nav-links .lang-switcher{ width:100%; }
  .lang-dropdown{ position:static; transform:none; box-shadow:none; background:rgba(234,241,251,0.06); margin-top:12px; border:1px solid rgba(234,241,251,0.1); }
  .lang-dropdown li{ color: var(--on-night); }
  .lang-dropdown li:hover{ background: rgba(234,241,251,0.1); }
  .nav-cta{ margin-top:6px; }
}

/* ===================== HERO ===================== */
/* Sin foto real todavía: el fondo es 100% CSS (gradiente + glows), a
   propósito, para no dejar una imagen rota ni una petición a un archivo
   inexistente. EN CUANTO ABUBA TENGA UNA FOTO DEL COCHE/CIUDAD: pon la
   ruta en --hero-photo (ej. url("fotos/hero.jpg")) aquí abajo o en un
   <style> inline en el <body> — el resto del efecto (degradado + brillos)
   se mantiene igual encima de la foto. */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  --hero-photo: none;
  background: var(--hero-overlay), var(--hero-photo) center/cover no-repeat;
  background-color: var(--hero-bg-fallback);
  color: var(--on-night); padding-top:110px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 85% 15%, var(--accent-glow), transparent 60%),
    radial-gradient(500px 340px at 10% 90%, rgba(6,182,212,0.18), transparent 60%);
}
.hero-content{ position:relative; max-width:700px; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background: rgba(6,182,212,0.14); border:1px solid rgba(6,182,212,0.35);
  color:#7EE7F5; font-weight:600; font-size:0.85rem; padding:8px 16px; border-radius:50px; margin-bottom:22px;
}
.hero-eyebrow .pulse-dot{
  width:8px; height:8px; border-radius:50%; background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(6,182,212,0.7); animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(6,182,212,0.55); }
  70%{ box-shadow:0 0 0 9px rgba(6,182,212,0); }
  100%{ box-shadow:0 0 0 0 rgba(6,182,212,0); }
}

.hero h1{ font-size: clamp(2.2rem, 5.5vw, 3.7rem); font-weight:800; margin-bottom:18px; color:var(--on-night); }
.hero h1 .hl{ background: linear-gradient(120deg, var(--accent-2), #7EE7F5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.subtitle{ font-size: clamp(1rem, 2vw, 1.2rem); color: var(--on-night-muted); margin-bottom:34px; max-width:560px; }

.hero-buttons{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:30px; }

.hero-checks{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:28px; }
.hero-checks li{ display:flex; align-items:center; gap:9px; font-size:0.92rem; color: var(--on-night-muted); }
.hero-checks i{ color: var(--accent-2); }

/* Caja destacada: tarifa fija aeropuerto, visible ya en el hero */
.hero-tarifa-aeropuerto{
  display:inline-flex; align-items:center; gap:16px; flex-wrap:wrap;
  background: rgba(234,241,251,0.06); border:1.5px solid rgba(6,182,212,0.4);
  border-radius: var(--radius); padding:16px 22px; backdrop-filter: blur(6px);
}
.hero-tarifa-aeropuerto .icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
}
.hero-tarifa-aeropuerto .label{ font-size:0.82rem; color: var(--on-night-muted); }
.hero-tarifa-aeropuerto .precio{ font-size:1.3rem; font-weight:800; color:#fff; }
.hero-tarifa-aeropuerto .precio span{ color: var(--accent-2); }
.hero-tarifa-aeropuerto a{ font-size:0.82rem; color:#7EE7F5; font-weight:600; }
.hero-tarifa-aeropuerto a:hover{ text-decoration:underline; }

/* ===================== CÓMO FUNCIONA ===================== */
.como-funciona{ background: var(--bg); }
.como-funciona-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; counter-reset: paso; }
@media (max-width:980px){ .como-funciona-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .como-funciona-grid{ grid-template-columns: 1fr; } }

.paso-card{
  position:relative; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); padding:30px 24px 26px; transition: var(--transicion);
}
.paso-card:hover{ transform:translateY(-6px); border-color: var(--accent-2); box-shadow: var(--shadow); }
.paso-numero{
  counter-increment: paso; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; font-weight:800; font-size:1rem; margin-bottom:18px;
  background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-text);
}
.paso-card h3{ font-size:1.05rem; margin-bottom:8px; }
.paso-card p{ font-size:0.92rem; color: var(--text-muted); }
.paso-card .paso-icon{ position:absolute; top:26px; right:22px; color: var(--border-strong); font-size:1.3rem; }

/* ===================== SERVICIOS ===================== */
.servicios{ background: var(--bg-alt); }
.servicios-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width:980px){ .servicios-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .servicios-grid{ grid-template-columns: 1fr; } }

.servicio-card{
  background: var(--surface); border-radius: var(--radius); padding:34px 26px;
  transition: var(--transicion); border:1px solid var(--border);
}
.servicio-card:hover{ transform:translateY(-8px); box-shadow: var(--shadow); border-color: var(--accent-2); }

.servicio-icon{
  width:56px; height:56px; border-radius:14px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff; margin-bottom:20px;
  box-shadow: 0 6px 16px var(--accent-glow);
}
.servicio-card h3{ font-size:1.12rem; margin-bottom:9px; }
.servicio-card p{ color: var(--text-muted); font-size:0.94rem; }

/* ===================== TARIFAS — CALCULADORA ===================== */
.tarifas{ background: var(--bg); }

.tarifa-destacada{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background: linear-gradient(135deg, var(--night), var(--night-2));
  color: var(--on-night); border-radius: var(--radius); padding:26px 30px; margin-bottom:44px;
  border:1px solid rgba(6,182,212,0.35); box-shadow: var(--shadow-lg);
}
.tarifa-destacada .icon{
  width:54px; height:54px; border-radius:14px; flex-shrink:0;
  background: rgba(6,182,212,0.16); border:1px solid rgba(6,182,212,0.4);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#7EE7F5;
}
.tarifa-destacada .txt{ flex:1; min-width:220px; }
.tarifa-destacada .txt .titulo{ font-weight:700; font-size:1.02rem; margin-bottom:4px; color:var(--on-night); }
.tarifa-destacada .txt .nota{ font-size:0.85rem; color: var(--on-night-muted); }
.tarifa-destacada .precio{ font-size:2.1rem; font-weight:800; color:#fff; white-space:nowrap; }
.tarifa-destacada .precio span{ color: var(--accent-2); }

.calculadora{ display:grid; grid-template-columns: 380px 1fr; gap:26px; margin-bottom:36px; }
@media (max-width:860px){ .calculadora{ grid-template-columns: 1fr; } }

.calculadora-inputs{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding:26px; display:flex; flex-direction:column; gap:18px;
}

.vehiculo-selector label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:8px; }
.vehiculo-selector-opciones{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.vehiculo-opcion{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px;
  border:1.5px solid var(--border); border-radius:10px; background: var(--surface);
  font-size:0.78rem; font-weight:600; cursor:pointer; transition: var(--transicion); color: var(--text);
}
.vehiculo-opcion i{ font-size:1.1rem; color: var(--text-muted); }
.vehiculo-opcion:hover{ border-color: var(--accent-2); }
.vehiculo-opcion.active{ background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); border-color: var(--accent-2); color: var(--accent-text); }
.vehiculo-opcion.active i{ color: var(--accent-text); }

.autocomplete-group{ position:relative; }
.autocomplete-group label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.autocomplete-group label i{ color: var(--accent-text); margin-right:4px; }
.autocomplete-group input{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:0.95rem; transition: var(--transicion); background: var(--surface); color: var(--text);
}
.autocomplete-group input:focus{ outline:none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-glow); }

.autocomplete-list{
  position:absolute; top:100%; left:0; right:0; background: var(--surface); border:1px solid var(--border);
  border-radius:10px; margin-top:4px; max-height:220px; overflow-y:auto; box-shadow: var(--shadow-lg);
  z-index:50; display:none; list-style:none;
}
.autocomplete-list.show{ display:block; }
.autocomplete-list li{ padding:10px 14px; font-size:0.85rem; cursor:pointer; border-bottom:1px solid var(--border); }
.autocomplete-list li:last-child{ border-bottom:none; }
.autocomplete-list li:hover{ background: var(--surface-2); }

.calculadora-resultado{ background: var(--surface-2); border-radius: var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; }
.resultado-fila{ display:flex; justify-content:space-between; align-items:center; font-size:0.92rem; }
.resultado-precio strong{ font-size:1.4rem; color: var(--accent-text); }
.calculadora-estado{ font-size:0.85rem; color: var(--text-muted); min-height:18px; }

.calculadora-mapa{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); min-height:360px; border:1px solid var(--border); }
#map{ width:100%; height:100%; min-height:360px; background: var(--surface-2); }
/* Suaviza los tiles del mapa en modo oscuro para que no "brillen" */
:root[data-theme="dark"] #map .leaflet-tile{ filter: brightness(0.82) invert(1) contrast(0.9) hue-rotate(190deg) saturate(0.6); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #map .leaflet-tile{ filter: brightness(0.82) invert(1) contrast(0.9) hue-rotate(190deg) saturate(0.6); }
}

.tarifas-info{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:20px; }
@media (max-width:760px){ .tarifas-info{ grid-template-columns: repeat(2,1fr); } }
.tarifas-info-item{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding:16px; font-size:0.85rem; display:flex; align-items:center; gap:10px;
}
.tarifas-info-item i{ color: var(--accent-text); font-size:1.1rem; }
.tarifas-nota{ margin-top:22px; font-size:0.85rem; color: var(--text-muted); font-style:italic; }

/* ===================== POR QUÉ ELEGIRME ===================== */
.elegirme{ background: var(--night); color: var(--on-night); }
.elegirme .section-subtitle{ color: var(--on-night-muted); }
.elegirme .section-tag{ background: rgba(6,182,212,0.14); border-color: rgba(6,182,212,0.35); color:#7EE7F5; }

.elegirme-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:26px; }
@media (max-width:980px){ .elegirme-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .elegirme-grid{ grid-template-columns: 1fr; } }

.elegirme-card{
  text-align:center; background: rgba(234,241,251,0.04); border:1px solid rgba(234,241,251,0.1);
  border-radius: var(--radius); padding:36px 20px; transition: var(--transicion);
}
.elegirme-card:hover{ background: rgba(6,182,212,0.1); border-color: var(--accent-2); transform: translateY(-6px); }
.elegirme-icon{ font-size:2.1rem; color: var(--accent-2); margin-bottom:18px; }
.elegirme-card h3{ font-size:1.05rem; margin-bottom:8px; color: var(--on-night); }
.elegirme-card p{ font-size:0.88rem; color: var(--on-night-muted); }

/* ===================== VEHÍCULOS ===================== */
.vehiculos{ background: var(--bg-alt); }
.vehiculos-banner{
  border-radius: var(--radius); overflow:hidden; margin-bottom:40px;
  box-shadow: var(--shadow); border:1px solid var(--border); max-height:340px;
}
.vehiculos-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.vehiculos-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width:860px){ .vehiculos-grid{ grid-template-columns: 1fr; } }

.vehiculo-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:34px 26px; text-align:center; transition: var(--transicion); }
.vehiculo-card:hover{ transform:translateY(-8px); box-shadow: var(--shadow); border-color: var(--accent-2); }
.vehiculo-icon{
  width:68px; height:68px; border-radius:50%; background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  color: var(--accent-text); display:flex; align-items:center; justify-content:center; font-size:1.75rem; margin:0 auto 18px;
}
.vehiculo-card h3{ font-size:1.2rem; margin-bottom:4px; }
.vehiculo-modelo{ color: var(--accent-text); font-weight:600; font-size:0.85rem; margin-bottom:12px; }
.vehiculo-desc{ color: var(--text-muted); font-size:0.92rem; margin-bottom:16px; }
.vehiculo-capacidad{ display:inline-flex; align-items:center; gap:6px; background: var(--surface-2); padding:6px 14px; border-radius:50px; font-size:0.82rem; font-weight:600; }
.vehiculos-nota{ margin-top:10px; font-size:0.85rem; color: var(--text-muted); font-style:italic; text-align:center; }

/* ===================== SOBRE MÍ ===================== */
.sobremi{ background: var(--bg); }
.conductores-lista{ display:flex; flex-direction:column; gap:70px; }
.sobremi-grid{ display:grid; grid-template-columns: 260px 1fr; gap:50px; align-items:center; }
@media (max-width:760px){ .sobremi-grid{ grid-template-columns: 1fr; text-align:center; } .sobremi-foto{ margin:0 auto; } }

.sobremi-foto{
  width:230px; height:230px; border-radius:50%; overflow:hidden;
  border: 5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, var(--accent-1), var(--accent-2)) border-box;
  box-shadow: var(--shadow);
}
.sobremi-foto img{ width:100%; height:100%; object-fit:cover; }

.badge-licencia{
  display:inline-flex; align-items:center; gap:8px;
  background: color-mix(in srgb, var(--accent-2) 12%, transparent); color: var(--accent-text);
  font-weight:600; font-size:0.85rem; padding:8px 16px; border-radius:50px; margin-top:16px;
  border:1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.badge-licencia.pendiente{
  background: color-mix(in srgb, var(--yellow-detail) 18%, transparent);
  color:#8a6a00; border-color: color-mix(in srgb, var(--yellow-detail) 45%, transparent);
}
:root[data-theme="dark"] .badge-licencia.pendiente{ color: var(--yellow-detail); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge-licencia.pendiente{ color: var(--yellow-detail); } }

.sobremi-texto h3{ font-size:1.5rem; margin-bottom:14px; }
.sobremi-texto p{ color: var(--text-muted); margin-bottom:10px; }

/* ===================== CONFIANZA (contador + reseñas) ===================== */
.confianza{ background: var(--bg-alt); }

.confianza-contador{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:56px;
}
@media (max-width:760px){ .confianza-contador{ grid-template-columns: 1fr; } }
.stat-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding:28px 24px; text-align:center;
}
.stat-numero{ font-family: var(--font-titulos); font-size:2.4rem; font-weight:800; color: var(--accent-text); margin-bottom:6px; }
.stat-label{ font-size:0.88rem; color: var(--text-muted); }

.testimonios-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
@media (max-width:860px){ .testimonios-grid{ grid-template-columns: 1fr; } }

.testimonio-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:30px 26px; box-shadow: var(--shadow); }
.testimonio-stars{ color: var(--yellow-detail); margin-bottom:14px; font-size:0.95rem; }
.testimonio-texto{ color: var(--text-muted); font-size:0.95rem; margin-bottom:20px; font-style:italic; }
.testimonio-autor{ display:flex; align-items:center; gap:12px; }
.testimonio-avatar{
  width:42px; height:42px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
}
.testimonio-nombre{ font-weight:600; font-size:0.92rem; }
.testimonio-fecha{ font-size:0.78rem; color: var(--text-muted); }

/* Compartir ubicación en vivo — bloque de confianza informativo */
.ubicacion-vivo{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background: var(--surface); border:1px dashed var(--border-strong); border-radius: var(--radius);
  padding:22px 26px; margin-top:44px;
}
.ubicacion-vivo .icon{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-text);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.ubicacion-vivo .txt{ flex:1; min-width:220px; }
.ubicacion-vivo .txt h3{ font-size:0.98rem; margin-bottom:4px; }
.ubicacion-vivo .txt p{ font-size:0.88rem; color: var(--text-muted); }

/* ===================== RESERVA / CONTACTO ===================== */
.contacto{ background: var(--night); color: var(--on-night); }
.contacto .section-subtitle{ color: var(--on-night-muted); }
.contacto .section-tag{ background: rgba(6,182,212,0.14); border-color: rgba(6,182,212,0.35); color:#7EE7F5; }

.contacto-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:flex-start; }
@media (max-width:860px){ .contacto-grid{ grid-template-columns: 1fr; } }

.form-card{ background: var(--surface); color: var(--text); border-radius: var(--radius); padding:36px; box-shadow: var(--shadow-lg); border:1px solid var(--border); }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:0.88rem; font-weight:600; margin-bottom:6px; }
.form-group input, .form-group textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:0.95rem; transition: var(--transicion); background: var(--surface); color: var(--text);
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color: var(--accent-2); box-shadow:0 0 0 3px var(--accent-glow); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:480px){ .form-row{ grid-template-columns: 1fr; } }

.segmented{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.segmented-btn{
  padding:11px 10px; border:1.5px solid var(--border); border-radius:10px; background: var(--surface);
  font-size:0.88rem; font-weight:600; cursor:pointer; transition: var(--transicion); color: var(--text);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.segmented-btn:hover{ border-color: var(--accent-2); }
.segmented-btn.active{ background: color-mix(in srgb, var(--accent-2) 14%, var(--surface)); border-color: var(--accent-2); color: var(--accent-text); }

.fecha-hora-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; overflow:hidden; max-height:100px; opacity:1; transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease; }
.fecha-hora-row.hidden{ max-height:0; opacity:0; margin-bottom:-18px; pointer-events:none; }
@media (max-width:480px){ .fecha-hora-row{ grid-template-columns: 1fr; } .fecha-hora-row.hidden{ max-height:0; } }

.contacto-directo{ display:flex; flex-direction:column; gap:22px; }
.contacto-item{ display:flex; align-items:center; gap:18px; background: rgba(234,241,251,0.04); border:1px solid rgba(234,241,251,0.1); border-radius: var(--radius); padding:22px; transition: var(--transicion); }
.contacto-item:hover{ border-color: var(--accent-2); }
.contacto-item-icon{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff;
}
.contacto-item h3{ font-size:1rem; margin-bottom:4px; color: var(--on-night); }
.contacto-item p{ font-size:0.88rem; color: var(--on-night-muted); }
.contacto-whatsapp-directo{ margin-top:8px; }

/* ===================== FOOTER ===================== */
.footer{ background: var(--night-2); color: var(--on-night-muted); padding:60px 0 0; border-top: 1px solid rgba(234,241,251,0.08); }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid rgba(234,241,251,0.08); }
@media (max-width:860px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap:30px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns: 1fr; } }

.footer-logo{ font-family: var(--font-titulos); font-weight:700; font-size:1.25rem; color: var(--on-night); display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.footer-col h3{ color: var(--on-night); font-size:1rem; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ font-size:0.9rem; transition: var(--transicion); }
.footer-col ul li a:hover{ color: var(--accent-2); }

.footer-licencia{ font-size:0.88rem; margin-top:4px; color: var(--on-night-muted); }
.footer-licencia strong{ color: var(--on-night); }
.footer-licencia.pendiente strong{ color: var(--yellow-detail); }

.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(234,241,251,0.06); display:flex; align-items:center; justify-content:center; transition: var(--transicion); }
.footer-social a:hover{ background: var(--accent-2); color:#04141A; }

.footer-bottom{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:center; text-align:center; font-size:0.82rem; padding:22px 0; color: var(--on-night-muted); }
.footer-bottom a:hover{ color: var(--accent-2); }

/* ===================== BOTONES FLOTANTES ===================== */
.btn-top{
  position:fixed; bottom:26px; right:26px; width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem; border:none; cursor:pointer;
  box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transform: translateY(20px); transition: var(--transicion); z-index:900;
}
.btn-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.btn-top:hover{ filter:brightness(1.08); }

.whatsapp-float{
  position:fixed; bottom:26px; left:26px; width:58px; height:58px; border-radius:50%;
  background: var(--whatsapp); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; box-shadow: var(--shadow-lg); z-index:900; transition: var(--transicion);
  animation: wa-attention 4.5s ease-in-out infinite;
}
.whatsapp-float:hover{ transform: scale(1.1); animation-play-state: paused; }
@keyframes wa-attention{
  0%, 88%, 100%{ transform: scale(1); box-shadow: var(--shadow-lg); }
  91%{ transform: scale(1.08); box-shadow: 0 0 0 8px rgba(37,211,102,0.18), var(--shadow-lg); }
  94%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ animation:none; }
  .hero-eyebrow .pulse-dot{ animation:none; }
}

/* ===================== SELECTOR DE PREFIJO TELEFÓNICO ===================== */
.phone-with-prefix{ display:flex; gap:8px; }
.phone-prefix-select{
  width:104px; flex-shrink:0; padding:12px 8px; border:1.5px solid var(--border); border-radius:10px;
  font-size:0.86rem; cursor:pointer; background: var(--surface); color: var(--text); appearance:auto;
}
.phone-prefix-select:focus{ outline:none; border-color: var(--accent-2); box-shadow:0 0 0 3px var(--accent-glow); }
.phone-with-prefix input{ flex:1; }

/* ===================== CAMPOS CONDICIONALES — AEROPUERTO ===================== */
.airport-fields{
  display:none; flex-direction:column; gap:14px; padding:16px 18px;
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
  border:1.5px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  border-radius:10px; margin-bottom:4px; animation: slidein 0.25s ease;
}
@keyframes slidein{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.airport-fields.show{ display:flex; }
.airport-fields-header{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:0.88rem; color: var(--accent-text); }
.airport-fields-nota{ font-size:0.8rem; color: var(--text-muted); font-style:italic; display:flex; align-items:flex-start; gap:6px; }
.airport-fields-nota i{ color: var(--accent-text); flex-shrink:0; margin-top:2px; }

/* ===================== AVISO INSTALAR PWA ===================== */
.pwa-nota{ font-size:0.8rem; color: var(--on-night-muted); margin-top:14px; display:flex; align-items:center; gap:7px; }
.pwa-nota i{ color: var(--accent-2); }

/* ===================== PÁGINAS LEGALES ===================== */
.legal-page{ padding-top:140px; padding-bottom:100px; background: var(--bg); min-height:100vh; }
.legal-page h1{ font-size:2rem; margin-bottom:8px; }
.legal-page .actualizado{ color: var(--text-muted); font-size:0.85rem; margin-bottom:36px; }
.legal-page h2{ font-size:1.2rem; margin:34px 0 12px; }
.legal-page p, .legal-page li{ color: var(--text-muted); margin-bottom:12px; font-size:0.96rem; }
.legal-page ul{ list-style: disc; padding-left:22px; }
.legal-page a{ color: var(--accent-text); text-decoration:underline; }
.legal-page .placeholder{ background: color-mix(in srgb, var(--yellow-detail) 16%, transparent); border:1px dashed color-mix(in srgb, var(--yellow-detail) 55%, transparent); padding:2px 6px; border-radius:5px; font-weight:600; }
.legal-page .volver{ display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; color: var(--accent-text); font-weight:600; }