html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root{
  /* Base medio-oscura con énfasis morado */
  --bg:#111528; --card:#151b2f; --muted:#9aa7bd; --text:#eaf0ff; --danger:#ef4444; --radius:18px;
  --md-surface:#121a2b;
  --md-outline: rgba(148,163,184,.24);
  --md-primary:#0a84ff; /* Apple Blue */
  --md-primary-variant:#1b6cff; /* Deeper Blue */
  --md-secondary:#7c3aed; /* Violet */
  --md-secondary-variant:#22d3ee; /* Cyan */
  --md-whatsapp:#25D366; /* WhatsApp green */
  --ring: rgba(124,58,237,.45);
  /* Compat */
  --accent: var(--md-primary);
  --accent-2: var(--md-primary);
}
/* Animatable custom properties for background glow opacity */
@property --violet-a { syntax: '<percentage>'; inherits: false; initial-value: 26%; }
@property --cyan-a { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  /* Base uniforme; la animación va en ::before para evitar líneas */
  background: linear-gradient(180deg, #151b2f 0%, #151b2f 100%);
  color:var(--text); display:block; padding:0; position: relative;
}
/* Capa animada independiente para simular luz "encendiéndose" sin divisiones */
body::before{
  content: "";
  position: fixed; inset: -25vh -25vw;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side at 20% 10%, rgba(168 85 247 / var(--violet-a)), rgba(168,85,247,0) 60%),
    radial-gradient(closest-side at 80% 85%, rgba(14 165 233 / var(--cyan-a)), rgba(14,165,233,0) 60%),
    /* Hotspots más intensos (pequeños) */
    radial-gradient(closest-side at 22% 12%, rgba(168 85 247 / 18%), rgba(168,85,247,0) 50%),
    radial-gradient(closest-side at 78% 82%, rgba(14 165 233 / 14%), rgba(14,165,233,0) 50%),
    radial-gradient(closest-side at 50% 50%, rgba(10 132 255 / 36%), rgba(10,132,255,0) 60%);
  filter: blur(24px);
  transform: translate3d(0,0,0) scale(1);
  opacity:.92;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: blobDrift 8s linear infinite alternate, bgPulse 2s ease-in-out infinite;
}
/* Asegura que el contenido quede por encima de la capa animada */
.wrap{ position: relative; z-index: 1; }
/* Header más delgado solo en registro */
.site-header{ padding:8px 14px; min-height:48px; }
.site-header .brand-mini img{ width:34px; height:34px; }
/* Evitar espacio de línea bajo el botón (alineación de baseline) */
.hamburger{ width:42px; height:42px; margin:0; padding:0; align-items:center; justify-content:center; line-height:0; }
.hamburger span{ line-height:0 !important; display:block; }
@media (max-width: 820px){
  /* Mostrar hamburguesa sólo en mobile y mantener corrección del baseline */
  .hamburger{ display:inline-flex; }
}
@media (max-width: 820px){
  /* Ajustar posición del menú desplegable al header más bajo en registro */
  .nav-drawer{ inset: 50px 12px auto 12px; }
}
@media (max-width: 680px){
  body{ background: #151b2f; }
  body::before{
    /* Modo ultra-ligero: sin animaciones continuas */
    inset: -20vh -20vw;
    background: radial-gradient(closest-side at 50% 45%, rgba(168,85,247,.26), rgba(168,85,247,0) 55%);
    mix-blend-mode: normal;
    filter: blur(12px);
    opacity:.7;
    animation: none;
  }
  /* Reducir sombras y filtros pesados en móvil */
  .card{ box-shadow: 0 10px 24px rgba(0,0,0,.28); backdrop-filter: none; border-color: rgba(148,163,184,.3); }
  .modal{ box-shadow: 0 18px 40px rgba(0,0,0,.42); backdrop-filter: none; border-color: rgba(148,163,184,.32); }
  button{ box-shadow: 0 8px 20px rgba(10,132,255,.22); }
  /* Desactivar animaciones de gradiente para mejorar scroll en móvil */
  #submitBtn{ animation: none; }
  .pill[aria-pressed="true"]{ animation: none; }
}
/* Usar exactamente los estilos del header definidos en assets/css/index.css */
.wrap{width:100%; max-width:920px; margin:0 auto 24px; display:grid; grid-template-columns:1.05fr .95fr; gap:28px}
@media (max-width: 920px){ .wrap{grid-template-columns:1fr} }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(148,163,184,.35);
  border-radius: var(--radius); padding:26px; box-shadow: 0 20px 50px rgba(0,0,0,.35); backdrop-filter: blur(6px);
}
.title{ font-size: clamp(26px, 2.6vw, 34px); line-height:1.1; margin:0 0 10px; font-weight:800 }
.lead{ margin:0 0 18px; color: var(--muted); font-size: clamp(14px, 1.6vw, 16px) }
.kpi{ display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 6px }
.kpi div{ border:1px solid rgba(148,163,184,.26); border-radius:12px; padding:8px 12px; font-size:13px; color:#cbd5e1; background: rgba(2,6,23,.35); }

form{display:grid; gap:16px; margin-top:4px}
label{font-weight:600; font-size:14px; display:block; margin-bottom:10px}
.hint{color:var(--muted); font-size:12px; margin-top:6px}
input,textarea{
  width:100%; background:#121a2b; color:var(--text);
  border:1px solid rgba(148,163,184,.3); padding:12px 14px; border-radius:12px; outline:none;
  transition:.2s border-color, .2s box-shadow;
}
/* Evitar zoom automático en iOS al enfocar inputs */
input, textarea, select{ font-size:16px; }
input:focus,textarea:focus{ border-color: var(--accent-2); box-shadow:0 0 0 4px var(--ring) }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:680px){ .row{ grid-template-columns:1fr } }

.phone-wrap{display:flex; align-items:center; gap:10px; background:var(--md-surface); border:1px solid rgba(148,163,184,.3); border-radius:12px; padding:0 12px;}
.wa-icon{ width:18px; height:18px; color: var(--md-whatsapp); flex:0 0 18px; filter: drop-shadow(0 2px 6px rgba(37,211,102,.25)); }
.phone-prefix{ white-space:nowrap; color:#475569; font-weight:700; opacity:.95; padding-left:4px }
.phone-input{ flex:1; border:none; background:transparent; color:var(--text); padding:12px 0; outline:none }

.pill-group{ display:flex; gap:10px; flex-wrap:wrap }
.pill{
  background: transparent; color:#e5e7eb; border:1px solid rgba(148,163,184,.35);
  border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer; user-select:none;
}
.pill[aria-pressed="true"]{
  background: linear-gradient(135deg,
    var(--md-secondary) 0%,
    var(--md-secondary-variant) 25%,
    var(--md-primary) 50%,
    var(--md-primary-variant) 75%,
    var(--md-secondary) 100%);
  background-size: 300% 300%;
  animation: gradientShift 4s linear infinite;
  border-color: transparent; color:white; box-shadow: 0 10px 24px rgba(124,58,237,.35);
}

.footer{ margin-top:12px; font-size:12px; color:#9aa7bd }
.status{ margin-top:6px; font-size:14px } .ok{ color:#86efac } .err{ color:#fecaca } .hide{ display:none }

.brand{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.brand-logo{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--md-primary); background:white; box-shadow: 0 6px 24px rgba(10,132,255,.18); }

/* Modales */
.modal-backdrop{ position: fixed; inset:0; background: rgba(15, 23, 42, .65); display:none; align-items:center; justify-content:center; padding:24px; z-index:900; backdrop-filter: blur(3px);}
#loadingBackdrop{ z-index:1000; } /* loader por encima de todo */
/* Botón volver (arriba izquierda) */
.icon-back{ position:fixed; top:8px; left:16px; z-index:850; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:12px; text-decoration:none; font-size:20px; line-height:1; }
.modal{
  width:100%; max-width:520px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(148,163,184,.35); border-radius:18px; color: var(--text); padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.5); text-align:center; position:relative; overflow:hidden;
}
.modal h2{ margin:8px 0 6px; font-size:22px } .modal p{ color:#cbd5e1; margin:0 0 14px; font-size:14px }
.modal .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.btn-outline{
  background: transparent; color:#e5e7eb; border:1px solid var(--md-outline);
  border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; backdrop-filter: blur(3px);
}
/* Asegurar centrado y sin padding cuando combina btn-outline + icon-back */
.btn-outline.icon-back{ padding:0; display:inline-grid; place-items:center; width:42px; height:42px; line-height:1; }
.icon-back .glyph{ position:relative; top:-2px; }
button{
  appearance:none; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--md-secondary), var(--md-primary));
  color:white; font-weight:800; letter-spacing:.3px; padding:14px 18px; border-radius:14px; font-size:16px;
  transition:.2s transform, .2s box-shadow, .2s opacity; box-shadow: 0 12px 30px rgba(10,132,255,.30);
}
button:hover{ transform: translateY(-1px) } button:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none }
.muted-btn{ background: transparent; color:#cbd5e1; border:1px solid var(--md-outline); box-shadow:none }

/* Botón Enviar con gradiente animado */
#submitBtn{
  background: linear-gradient(135deg,
    var(--md-secondary) 0%,
    var(--md-secondary-variant) 25%,
    var(--md-primary) 50%,
    var(--md-primary-variant) 75%,
    var(--md-secondary) 100%);
  background-size: 300% 300%;
  animation: gradientShift 4s linear infinite;
}
#submitBtn:hover{ box-shadow: 0 16px 36px rgba(10,132,255,.38); }
@keyframes gradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
/* Pulso de luz (sin líneas) */
@keyframes bgPulse{
  0%{
    --violet-a: 8%;
    --cyan-a: 5%;
  }
  50%{
    --violet-a: 95%;
    --cyan-a: 75%;
  }
  100%{
    --violet-a: 8%;
    --cyan-a: 5%;
  }
}
/* Deriva y rotación sutil para simular movimiento orgánico */
@keyframes blobDrift{
  0%{ transform: translate3d(-6%, -4%, 0) scale(1.05) rotate(0deg); }
  33%{ transform: translate3d(5%, -2%, 0) scale(1.08) rotate(4deg); }
  66%{ transform: translate3d(-3%, 6%, 0) scale(1.12) rotate(-3deg); }
  100%{ transform: translate3d(6%, 4%, 0) scale(1.05) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce){
  #submitBtn{ animation: none; }
  .pill[aria-pressed="true"]{ animation: none; }
  body{ animation: none; }
  body::before{ animation: none; }
}

/* Pulso ligero para mobile (opacidad/escala => óptimo en GPU) */
@keyframes lightPulse{
  0%{ opacity:.55; transform: translate3d(0,0,0) scale(1.02); }
  50%{ opacity:.95; transform: translate3d(0,0,0) scale(1.09); }
  100%{ opacity:.55; transform: translate3d(0,0,0) scale(1.02); }
}

/* WhatsApp Floating Action Button */
.fab-whatsapp{
  position: fixed; right: 18px; bottom: 18px; z-index: 800;
  width: 56px; height: 56px; border-radius: 28px;
  display: inline-grid; place-items:center; text-decoration:none;
  background: linear-gradient(135deg, var(--md-whatsapp), #1ebe5d);
  color: white; box-shadow: 0 14px 32px rgba(37,211,102,.35);
  transition:.2s transform, .2s box-shadow; border: 0;
}
.fab-whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 18px 38px rgba(37,211,102,.45); }
.fab-whatsapp svg{ width:26px; height:26px; display:block; }

/* Spinner del loader */
.spinner {
  display:block;
  width: 40px; height: 40px;
  border: 3px solid rgba(148,163,184,.35);
  border-top-color: var(--md-secondary);
  border-radius: 50%;
  will-change: transform;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mapa en registro */
.map{ width:100%; height:340px; border:0; border-radius:12px }
.map-actions{ margin-top:12px; display:flex; gap:12px; flex-wrap:wrap }