/* ============================================================
   Buho — Home (buho.la)
   Hoja de estilos autocontenida. No depende del design-system
   original ni de React. Súbela a la raíz del dominio:
     https://buho.la/styles.css
   ============================================================ */

/* ---------- Tokens (colores, tipografía, motion) ---------- */
:root {
  --buho-navy-950: #001144;
  --buho-navy-900: #00175D;
  --buho-blue-600: #0330CC;
  --buho-pink-600: #FF006F;
  --buho-pink-700: #CC0056;
  --buho-pink-400: #FF599F;
  --buho-pink-300: #FFABCE;
  --buho-cream:    #F5F6F7;
  --gray-100:      #F6F7F8;
  --gray-300:      #D6DAE0;
  --gray-600:      #57688B;
  --white:         #FFFFFF;

  --color-text-muted:       #57688B;
  --color-primary:          #001144;
  --color-primary-hover:    #00175D;
  --color-primary-contrast: #FFFFFF;
  --color-accent:           #FF006F;
  --color-border:           #D6DAE0;

  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --radius-full: 9999px;

  --shadow-md: 0 4px 12px rgba(2,15,60,0.08), 0 2px 4px rgba(2,15,60,0.04);
  --shadow-focus-ring: 0 0 0 3px rgba(7,48,197,0.18);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--buho-navy-950);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--buho-blue-600); text-decoration: none; }
a:hover { color: var(--buho-navy-950); }
::selection { background: rgba(255,0,108,0.18); }

/* ---------- Botones (componente .btn) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.btn .btn-arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); color: #fff; }
.btn--primary:focus { color: #fff; }

.btn--secondary { background: var(--white); color: var(--color-primary); border-color: var(--color-border); }
.btn--secondary:hover { border-color: var(--color-primary); background: var(--gray-100); }

.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--gray-100); }

.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* ---------- Animaciones ---------- */
@keyframes hfMarquee    { to   { transform: translateX(-50%); } }
@keyframes hfMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes hfFloat      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hfBreathe    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes hfSpin       { to { transform: rotate(360deg); } }
@keyframes hfRise       { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hfSlide      { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hfPing       { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }

/* Reveal on scroll (data-rv) */
.rv-pending { opacity: 0; }
.rv-in { animation: hfRise 750ms cubic-bezier(0.22,1,0.36,1) both; }

/* Fondos aurora */
.aurora-dark {
  background:
    radial-gradient(90% 120% at 86% 4%, rgba(7,48,197,0.50), transparent 52%),
    radial-gradient(80% 110% at 10% 100%, rgba(255,0,108,0.32), transparent 55%),
    radial-gradient(60% 90% at 50% 40%, rgba(255,171,206,0.14), transparent 60%),
    var(--buho-navy-950);
}
.aurora-light {
  background:
    radial-gradient(90% 120% at 86% 4%, rgba(7,48,197,0.13), transparent 52%),
    radial-gradient(80% 110% at 10% 100%, rgba(255,0,108,0.12), transparent 55%),
    var(--buho-cream);
}

/* Palabra con "glow" */
.gw { position: relative; display: inline-block; white-space: nowrap; }
.gw .g { position: absolute; inset: 0; color: var(--buho-pink-400); filter: blur(18px); opacity: 0.95; }
.gw .t { position: relative; font-style: italic; font-weight: 300; color: var(--buho-pink-300); }

/* ---------- Visuales rotativos del hero ---------- */
/* Se muestra uno a la vez; app.js controla cuál. Sin JS, se ve el resumen (0). */
.hero-visual { display: none; }
.hero-visual[data-visual="0"] { display: block; }

/* ---------- Fotos de rubros (marquee) ---------- */
.rf-dentista    { background-image: url('fotos/persona-dentista.png'); }
.rf-barbero     { background-image: url('fotos/persona-barbero.png'); }
.rf-vet         { background-image: url('fotos/persona-vet.png'); }
.rf-doctora     { background-image: url('fotos/persona-doctora.png'); }
.rf-taller      { background-image: url('fotos/persona-taller.png'); }
.rf-farmacia    { background-image: url('fotos/persona-farmacia.png'); }
.rf-belleza     { background-image: url('fotos/persona-belleza.png'); }
.rf-gimnasio    { background-image: url('fotos/persona-gimnasio.png'); }
.rf-bodega      { background-image: url('fotos/persona-bodega.png'); }
.rf-restaurante { background-image: url('fotos/persona-restaurante.png'); }

/* ============================================================
   RESPONSIVE
   El diseño original es de ancho fijo (1180px) con estilos en
   línea. Aquí los adaptamos apuntando a esos estilos por su
   contenido (selectores de atributo) para no tocar el HTML.
   ============================================================ */
img, svg { max-width: 100%; height: auto; }

/* Quita el ancho mínimo fijo que causaba scroll horizontal */
@media (max-width: 1240px) {
  [style*="min-width:1180px"] { min-width: 0 !important; }
}

/* ---------- Tablet (≤ 980px) ---------- */
@media (max-width: 980px) {
  /* rejillas de 2 columnas → 1 columna */
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:1fr 1.05fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.2fr 0.8fr"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* rejillas de 3 columnas → 2 */
  [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* footer de enlaces → 3 columnas */
  [style*="grid-template-columns:1.4fr repeat(4, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* separaciones grandes del hero / secciones oscuras */
  [style*="gap:64px"] { gap: 40px !important; }
  [style*="gap:56px"] { gap: 36px !important; }

  /* la altura mínima del visual del hero deja de forzar espacio */
  [style*="min-height:480px"] { min-height: 0 !important; }
}

/* ---------- Móvil (≤ 680px) ---------- */
@media (max-width: 680px) {
  /* todo a 1 columna */
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:1.4fr repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* padding lateral de los contenedores */
  [style*="padding:0 32px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* padding vertical de las secciones */
  [style*="padding:136px 0"],
  [style*="padding:128px 0"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding:92px 32px 76px"] { padding: 52px 20px 48px !important; }

  /* NAV: ocultar el menú central; dejar logo + botón */
  [style*="gap:26px; font-size:14.5px"] { display: none !important; }
  [style*="height:68px"] { gap: 12px !important; padding-left: 20px !important; padding-right: 20px !important; }

  /* tipografías un poco más contenidas */
  h1 { font-size: clamp(32px, 8vw, 44px) !important; }
}

/* ---------- Móvil pequeño (≤ 560px) ---------- */
@media (max-width: 560px) {
  /* stats de 4 → 1 columna para que respiren */
  [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  /* ocultar botón "Ingresar" para que quepa el CTA principal */
  nav .btn--ghost { display: none !important; }
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}