@font-face {
  font-family: 'Roboto';
  src: url('/fonts/roboto-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap; /* Evita texto invisible al cargar */
}

:root {
  --color-texto: #334155;
  --color-texto-claro: #64748b;
  --color-blanco: #ffffff;
  --fondo-base: #f8fafc;
  --color-acento: #6366f1; 
  --color-acento-hover: #4f46e5;
  --color-focus: #ffb703; /* Para accesibilidad */
  
  --gradiente-inicio: #e2e2ff;
  --gradiente-fin: #f0fdf4;
  
  --transicion: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CONFIGURACIÓN BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--fondo-base);
  color: var(--color-texto);
  font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}



/* HERO - Optimizado con dvh */
.hero-depresion {
    min-height: 60dvh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('img/depresion-bg.webp') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-depresion h1 {
    font-size: clamp(3rem, 8vw, 120px); 
    font-weight: 800;
    margin: 0;
    letter-spacing: -2px;
}

.pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--color-acento);
  color: var(--color-blanco);
  text-decoration: none;
  font-weight: 500;

  cursor: pointer;

  transition: transform var(--transicion),
              background-color var(--transicion),
              box-shadow var(--transicion);
}

/* HOVER */
.pill:hover {
  transform: translateY(-2px);
  background-color: var(--color-acento-hover);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* FOCUS (accesibilidad real) */
.pill:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ACTIVE (cuando haces click) */
.pill:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* TARJETAS - Optimización de rendimiento (Crit. 2) */
.tarjeta-sintoma, .card-tecnica, .tarjeta-detallada {
    background: white;
    border-radius: 20px;
    transition: transform var(--transicion), box-shadow var(--transicion);
    will-change: transform; /* Pista para el navegador */
}

.tarjeta-sintoma:hover, .card-tecnica:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
}


.grid-sintomas, .grid-tecnicas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 0 20px;
}

.seccion-intro, .seccion-sintomas, .seccion-ejercicios {
    padding: 60px 0;
}

/* Breakpoint: Tablets (768px+) */
@media (min-width: 768px) {
    .grid-sintomas, .grid-tecnicas {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }
    .seccion-intro, .seccion-sintomas, .seccion-ejercicios {
        padding: 80px 0;
    }
}

/* Breakpoint: Desktop (1024px+) */
@media (min-width: 1024px) {
    .grid-sintomas {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-tecnicas {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ANIMACIONES */
.fade-in {
  animation: aparecer 1.2s ease-out forwards;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .hero-depresion h1 {
    font-size: 2.2rem;
  }
}