/* ============================================
   MIRLO · CORE STYLES
   Hoja de estilos compartida por todas las landings.
   Incluye base tipográfica, animaciones comunes,
   marquee de logos y selección de texto.
   ============================================ */

html {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  color: #1F262C;
  background-color: #F7F6F5;
}

/* Compensar header sticky al saltar a secciones */
section[id] { scroll-margin-top: 80px; }

/* ============================================
   ANIMACIÓN · PULSE DOT
   Para badges de estado tipo "Disponible".
   ============================================ */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.15); }
}
.pulse-dot {
  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   ANIMACIÓN · FADE UP
   Entrada suave de elementos del hero.
   ============================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 600ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* ============================================
   MARQUEE DE LOGOS
   Carrusel horizontal con fade en los bordes.
   ============================================ */
.logo-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
  animation: logo-scroll 60s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-pill {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #ECEAE8;
  border-radius: 14px;
  padding: 1.125rem 2rem;
  color: #6B635D;
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-pill:hover { color: #1F262C; }

/* ============================================
   SELECCIÓN DE TEXTO
   ============================================ */
::selection { background-color: rgba(227, 99, 38, 0.2); }