/* ===================================================
   responsive.css
   Adaptaciones responsivas para distintos tamaños de pantalla
   =================================================== */


/* ======================================
   1. GENERAL: Ajustes base para móviles
   ====================================== */
@media (max-width: 768px) {
  html {
    font-size: 90%;
  }

  body {
    padding: 0 1rem;
  }
}


/* ======================================
   2. HEADER Y NAVEGACIÓN
   ====================================== */
@media (max-width: 768px) {
  .logo-container {
    flex-direction: column;
    align-items: center;
  }

  .nav-menu {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}


/* ======================================
   3. HERO / PRESENTACIONES
   ====================================== */
@media (max-width: 768px) {
  .hero {
    padding: 3rem 1rem;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .hero h2 {
    font-size: 1.1rem;
  }
}


/* ======================================
   4. SECCIÓN DESTACADOS / TARJETAS
   ====================================== */
@media (max-width: 768px) {
  .destacados {
    flex-direction: column;
  }

  .destacados article {
    width: 100%;
  }
}


/* ======================================
   5. SECCIÓN RECURSOS / COLUMNAS
   ====================================== */
@media (max-width: 768px) {
  .columnas-laterales-recursos {
    flex-direction: column;
  }

  .intro-columna,
  .destacado-columna {
    width: 100%;
    border-radius: 12px;
    border-left: none;
    border-right: none;
  }

  .divisor-columnas-recursos {
    display: none;
  }
}


/* ======================================
   6. TABLAS / FILTROS
   ====================================== */
@media (max-width: 768px) {
  .tabla-recursos-container {
    padding: 2rem 1rem;
  }

  .tabla-recursos th,
  .tabla-recursos td {
    padding: 10px;
    font-size: 0.9em;
  }

  .filtros {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .filtros input,
  .filtros select {
    margin-bottom: 1rem;
    width: 100%;
  }
}

/* ======================================
   📱 MEDIA QUERY RESPONSIVE PARA MÓVILES
   ====================================== */
@media (max-width: 768px) {
  .intro-recurso,
  .recurso-destacado {
    flex-direction: column;
    padding: 2rem;
    gap: 2rem;
    width: 90%;
  }

 .bloque-intro-recursos,
.bloque-cta-recursos,
.bloque-miniguia {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  margin: 0 auto;
}
    
  .presentacion-recursos {
    padding: 1.rem;
  }


  .lista-miniguia {
    padding-left: 1.5rem;
  }

  .divisor-columnas-recursos {
    display: none;
  }

  .imagen-recurso {
    padding: 1rem;
    margin: 1.5rem auto;
  }

  .etiquetas-recurso {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .etiquetas-recurso button {
    width: 100%;
    max-width: 300px;
  }
}

/* ======================================
   RECURSOS RESPONSIVE PARA MÓVILES
   ====================================== */
@media (max-width: 768px) {
  .intro-recurso,
  .recurso-destacado,
  .tabla-base {
    display: block;
    padding: 2rem;
    gap: 2rem;
    width: 90%;
  }

  .contenido-recursos {
    flex-direction: column;
    display: block;
    width: 100%;
  }

  }

  .presentacion-recursos {
    padding: 1.5rem;
    margin-bottom: 40px;
  }

  .bloque-miniguia {
    padding: 1.5rem;
  }

  .lista-miniguia {
    padding-left: 1.5rem;
  }

  .divisor-columnas-recursos {
    display: none; /* ya no necesitamos la línea divisoria en móvil */
  }

  .imagen-recurso {
    padding: 1rem;
    margin: 1.5rem auto;
  }

  .etiquetas-recurso {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .etiquetas-recurso button {
    width: 100%;
    max-width: 300px;
  }
@media (max-width: 480px) {
  .btn,
  .btn-descarga,
  .btn-ver,
  .btn-suscribirme {
    width: 100%;
    text-align: center;
  }

  #scrollTopBtn {
    bottom: 20px;
    right: 20px;
  }
}

/* Modo oscuro del sistema */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e0e12; 
    --fg:#f5f5f7; 
    --muted:#b2b2b8;
    --card:#1a1922; 
    --stroke:#2a2935;
    --brand:#8d7bff; 
    --brand-ink:#c8c1ff;
    --shadow: 0 6px 18px rgba(0,0,0,.35);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  }
}

/* Layout para pantallas medianas/grandes */
@media (min-width: 900px){
  #intro .intro-cards{
    grid-template-columns: repeat(4, 1fr);
  }
  #intro .card.featured{
    grid-column: span 2;
  }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  #intro .card, 
  #intro .btn{ 
    transition: none; 
  }
  #intro .card:hover{ 
    transform: none; 
  }
  #intro .btn:hover{ 
    transform: none; 
  }
}