/**
 * BUSCADOC - Premium Motion & Typography System
 * Sistema de normalizacion visual y micro-interacciones.
 */

/* 0. Sistema tipográfico unificado — aplica a todas las páginas */
:root {
  --fs-h1: clamp(26px, 3.2vw, 34px);   /* Subtítulos de página / pantallas internas */
  --fs-h2: clamp(20px, 2.6vw, 26px);   /* Secciones */
  --fs-h3: clamp(17px, 2vw, 20px);     /* Subsecciones */
  --fs-body: 15px;
  --fs-small: 13px;
  --lh-tight: 1.2;
  --lh-base: 1.55;
}

/* Sin !important — permite que el hero del index u otros contextos puedan subir el tamaño cuando lo necesiten */
h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
}

p, li, .hero-sub {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

span, label, input, select, textarea {
  font-size: var(--fs-body);
}

.brand-small { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }

/* 1. Entrada suave de pagina */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

body {
  animation: fadeIn 0.5s ease-out;
  font-size: var(--fs-body);
}

/* 2. Efecto Stagger para tarjetas */
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.doctor-card {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.doctor-card:nth-child(1) { animation-delay: 0.1s; }
.doctor-card:nth-child(2) { animation-delay: 0.2s; }
.doctor-card:nth-child(3) { animation-delay: 0.3s; }

/* 3. Micro-interacciones globales (Botones redondos o cuadrados) */
.btn, .book, .call, .top-link, .search-btn, .mini-btn, .page-btn, .btn-pill, .footer-link {
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  cursor: pointer;
}

/* Efecto para botones blancos en fondos oscuros (Hero/Pills) */
.btn-white-to-blue:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}

/* Elevación sutil general */
.btn:hover, .book:hover, .call:hover, .top-link:hover, .search-btn:hover, .mini-btn:hover, .page-btn:hover, .btn-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 83, 135, 0.15) !important;
}

/* Elevación mayor para botones grandes del fondo (Ajuste sutil) */
.btn-lift-large:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 20px rgba(0, 83, 135, 0.15) !important;
}

.btn:active, .book:active, .call:active, .search-btn:active {
  transform: translateY(0) scale(0.98);
}

/* 4. Efecto de foco en inputs */
input:focus {
  transition: all 0.3s ease;
  border-color: #005387 !important;
  box-shadow: 0 0 0 4px rgba(0, 83, 135, 0.1) !important;
}

/* 5. Skeleton Loading */
@keyframes pulse {
  0% { background-color: #f0f3f5; }
  50% { background-color: #e2e8f0; }
  100% { background-color: #f0f3f5; }
}

.skeleton {
  animation: pulse 1.5s infinite ease-in-out;
  border-radius: 4px;
}

/* 6. Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 7. Hover Premium (Elevacion limpia) */
.tilt-hover {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tilt-hover:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 83, 135, 0.12) !important;
  border-color: #005387 !important;
  z-index: 10;
}

/* 8. Botones Principales - Heredan del sistema global sutil */

/* 9. Indicador Live */
@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 135, 102, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 135, 102, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 135, 102, 0); }
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #008766;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid rgba(0, 135, 102, 0.2);
}

.live-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #008766;
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}

/* 10. Animaciones Personalizadas para Iconos de Beneficios */

/* Latido permanente para el corazón */
@keyframes heartbeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.icon-heart svg {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Rotación para el Plus al pasar el mouse */
.trust-feature:hover .icon-plus svg {
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}

/* Giro (Flip) para el Chat al pasar el mouse */
.trust-feature:hover .icon-chat svg {
  transform: rotateY(180deg);
  transition: transform 0.6s ease;
}

/* Comportamiento general de hover */
.trust-feature {
  cursor: pointer;
  transition: all 0.3s ease;
}

.trust-feature:hover {
  transform: translateY(-5px);
}

.trust-feature:hover .icon-circle {
  background: #005387;
}

.trust-feature:hover .icon-circle svg {
  stroke: #ffffff;
}

/* 10.1 Animaciones de Barra de Busqueda Hero */
.search-field:hover .icon-search svg {
  transform: scale(1.2);
  stroke: var(--blue-main);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pinWobble {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

.search-field:hover .icon-location svg {
  transform-origin: bottom center;
  animation: pinWobble 0.7s ease-in-out;
}

/* 10.2 Animacion de Zoom Suave para Imagenes (Ken Burns) */
@keyframes kenBurnsZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.hero-blog-image img {
  animation: kenBurnsZoom 12s ease-in-out infinite;
  transform-origin: center center;
}

/* 10.3 Animacion de Flotado para Equipo Medico */
@keyframes docFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* 10.4 Entrada Deslizante */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.pro-strip .strip-image img {
  transform-origin: bottom center;
}

.pro-strip, .app-strip {
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pro-strip { animation-delay: 0.1s; }
.app-strip { animation-delay: 0.2s; }


/* 11. Boton con borde azul para fondo blanco */
.btn-outline-blue {
  background: #fff !important;
  color: #005387 !important;
  border: 1px solid #005387 !important;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-outline-blue:hover {
  background: #005387 !important;
  color: #fff !important;
}

/* 12. Efecto de Brillo (Glass Shine) Infinito y Bidireccional */
@keyframes glassShineInfinite {
  0% { left: -150%; }
  50% { left: 150%; }
  100% { left: -150%; }
}

.btn-white-to-blue, .btn, .back-link, .mega-footer-cta, .btn-pill, .search-btn {
  position: relative;
  overflow: hidden;
}

.btn-white-to-blue::after, .btn::after, .back-link::after, .mega-footer-cta::after, .btn-pill::after, .search-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.6) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-30deg);
  pointer-events: none;
}

.btn-white-to-blue:hover::after, .btn:hover::after, .back-link:hover::after, .mega-footer-cta:hover::after, .btn-pill:hover::after, .search-btn:hover::after {
  animation: glassShineInfinite 3s ease-in-out infinite;
}

.btn-white-to-blue:hover {
  background: #005387 !important;
  color: #fff !important;
  border-color: #005387 !important;
}