/* ========================================
   RESPONSIVE DESIGN - SALUD MENTAL CON MENTA
   ======================================== */

/* TABLETS Y PANTALLAS MEDIANAS (max-width: 1024px) */
@media screen and (max-width: 1024px) {
  
  /* Navegación */
  .header-container {
    padding: 15px 20px !important;
  }
  
  .nav-menu {
    gap: 20px;
  }
  
  .nav-menu li a {
    font-size: 0.95rem;
  }
  
  /* Hero sections */
  .hero-section {
    min-height: 450px !important;
  }
  
  .hero-text-wrapper h1 {
    font-size: 2.5rem !important;
  }
  
  .hero-text-wrapper p {
    font-size: 1.2rem !important;
  }
  
  /* Grids de 2 columnas */
  section [style*="grid-template-columns: 1fr 1fr"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(450px, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  /* Contenedores */
  .container,
  div[style*="max-width: 1200px"],
  div[style*="max-width: 1400px"] {
    max-width: 95% !important;
    padding: 0 20px;
  }
}

/* MÓVILES Y PANTALLAS PEQUEÑAS (max-width: 768px) */
@media screen and (max-width: 768px) {
  
  /* Navegación móvil */
  .site-header {
    padding: 10px 0;
  }
  
  .header-container {
    position: relative;
    padding: 0 20px !important;
  }
  
  .nav-logo {
    flex: 0 0 auto !important;
  }
  
  .nav-logo img {
    height: 40px !important;
  }
  
  /* Mostrar botón hamburguesa */
  .hamburger-menu {
    display: flex !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Ocultar navegación por defecto */
  .main-navigation {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #6f9480;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
  }
  
  .main-navigation.active {
    max-height: 400px;
    padding: 20px 0;
  }
  
  .nav-menu {
    flex-direction: column;
    gap: 0;
    width: 100%;
    text-align: center;
  }
  
  .nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .nav-menu li:last-child {
    border-bottom: none;
  }
  
  .nav-menu li a {
    display: block;
    padding: 15px 20px;
    font-size: 1.1rem;
  }
  
  /* Botón WhatsApp dentro del menú desplegable */
  .nav-wp-btn {
    position: static;
    width: 100%;
    padding: 15px 20px;
    display: none;
    justify-content: center;
  }
  
  .main-navigation.active .nav-wp-btn {
    display: flex;
  }
  
  .btn-wp-nav {
    width: auto;
    justify-content: center;
  }
  
  /* Hero sections */
  .hero-section {
    min-height: 100vh !important;
    padding: 60px 20px 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-bg-video {
    object-fit: cover !important;
    object-position: center !important;
    height: 100vh !important;
  }
  
  .hero-text-wrapper {
    padding: 20px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  
  .hero-text-wrapper h1 {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
  }
  
  .hero-text-wrapper p {
    font-size: 1rem !important;
    margin-bottom: 25px !important;
  }
  
  .hero-logo {
    display: none !important;
  }
  
  /* Sección 2: Empatía - Imagen arriba, texto abajo */
  .seccion-empatia .container {
    flex-direction: column-reverse !important;
    gap: 40px !important;
  }
  
  .empatia-contenido,
  .empatia-imagen {
    flex: none !important;
    width: 100% !important;
  }
  
  .empatia-imagen img {
    max-width: 100% !important;
  }
  
  /* Sección 3: Servicios - Texto arriba, tarjetas abajo */
  .servicios-container {
    flex-direction: column !important;
    gap: 40px !important;
  }
  
  .servicios-izquierda,
  .servicios-derecha {
    flex: none !important;
    width: 100% !important;
  }
  
  /* Sección 5: Videos - Ajuste para móviles */
  .videos-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  
  .video-item {
    padding-bottom: 177% !important;
    max-width: 100% !important;
  }
  
  .video-item iframe {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* SERVICIOS.HTML - Sección "Por qué elegir" */
  section div[style*="grid-template-columns:1fr 1fr"][style*="gap:80px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }
  
  section div[style*="grid-template-columns:1fr 1fr"][style*="gap:80px"] > div:first-child {
    order: 1 !important;
  }
  
  section div[style*="grid-template-columns:1fr 1fr"][style*="gap:80px"] > div:last-child {
    order: 2 !important;
  }
  
  /* SERVICIOS.HTML - Carrusel de tarifas en móvil */
  .tarifas-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 20px !important;
    padding: 0 20px 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }
  
  .tarifas-grid::-webkit-scrollbar {
    height: 8px !important;
  }
  
  .tarifas-grid::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
  }
  
  .tarifas-grid::-webkit-scrollbar-thumb {
    background: #5a98a4 !important;
    border-radius: 10px !important;
  }
  
  .tarifa-card {
    min-width: 85% !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    transform: scale(1) !important;
    border: 2px solid #e0e0e0 !important;
    padding: 35px 25px !important;
  }
  
  .tarifa-card[style*="border:3px solid #5dc1a8"] {
    border: 3px solid #5dc1a8 !important;
  }
  
  .tarifa-card h3 {
    font-size: 1.5rem !important;
    margin: 15px 0 20px !important;
  }
  
  .tarifa-card p[style*="text-decoration:line-through"] {
    font-size: 1rem !important;
    margin-bottom: 5px !important;
  }
  
  .tarifa-card p[style*="font-size:2.8rem"] {
    font-size: 2.2rem !important;
    margin-bottom: 5px !important;
  }
  
  .tarifa-card p[style*="font-size:2.8rem"] span {
    font-size: 1rem !important;
  }
  
  .tarifa-card p[style*="line-height:1.6"] {
    font-size: 0.95rem !important;
    margin-bottom: 25px !important;
  }
  
  .tarifa-card a.btn {
    padding: 12px 28px !important;
    font-size: 1rem !important;
  }
  
  .tarifa-card div[style*="position:absolute"][style*="background:#e91e63"],
  .tarifa-card div[style*="position:absolute"][style*="background:#5dc1a8"] {
    top: 15px !important;
    left: 15px !important;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
  }
  
  .tarifa-card > div[style*="background:#5dc1a8"][style*="text-transform:uppercase"] {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    margin-bottom: 15px !important;
  }
  
  .btn-hero {
    font-size: 1rem !important;
    padding: 12px 25px !important;
  }
  
  /* Títulos */
  h2 {
    font-size: 1.8rem !important;
  }
  
  h3 {
    font-size: 1.3rem !important;
  }
  
  section h2[style*="font-size: 2.5rem"],
  section h2[style*="font-size: 2.8rem"],
  section h2[style*="font-size: 3rem"] {
    font-size: 1.8rem !important;
  }
  
  /* Grids responsivos */
  section [style*="display: grid"],
  div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  /* Carrusel de valores */
  .valores-carousel {
    animation-duration: 40s !important;
  }
  
  .valor-card {
    flex: 0 0 280px !important;
    padding: 30px 20px !important;
  }
  
  /* Secciones con padding */
  section {
    padding: 50px 20px !important;
  }
  
  section[style*="padding: 80px"],
  section[style*="padding: 100px"] {
    padding: 50px 20px !important;
  }
  
  /* Tarjetas de profesionales */
  div[style*="border-radius: 15px"][style*="padding: 35px"] {
    padding: 25px 20px !important;
  }
  
  div[style*="width: 120px; height: 120px; border-radius: 50%"] img {
    width: 100px !important;
    height: 100px !important;
  }
  
  /* Tarjetas de contacto */
  div[style*="padding: 50px 40px"] {
    padding: 35px 25px !important;
  }
  
  div[style*="font-size: 4.5rem"] {
    font-size: 3rem !important;
  }
  
  div[style*="font-size: 3.5rem"] {
    font-size: 2.5rem !important;
  }
  
  /* Botones */
  a[style*="padding: 16px 40px"],
  a[style*="padding: 18px 45px"] {
    padding: 14px 30px !important;
    font-size: 1rem !important;
  }
  
  /* Redes sociales */
  div[style*="display: flex"][style*="gap: 30px"] {
    gap: 20px !important;
  }
  
  div[style*="width: 80px; height: 80px"] {
    width: 65px !important;
    height: 65px !important;
  }
  
  div[style*="width: 80px; height: 80px"] span {
    font-size: 2rem !important;
  }
  
  /* Ubicación - Mapa */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 50px"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  iframe {
    height: 300px !important;
  }
  
  /* Footer */
  .footer {
    padding: 30px 20px !important;
    font-size: 0.9rem !important;
  }
  
  .social-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Botón flotante WhatsApp */
  .whatsapp-float {
    bottom: 15px !important;
    right: 15px !important;
  }
  
  .whatsapp-float img {
    width: 50px !important;
    height: 50px !important;
  }
  
  /* Modal */
  .modal-content {
    width: 90% !important;
    margin: 20px !important;
    padding: 25px !important;
  }
  
  .modal-content h2 {
    font-size: 1.5rem !important;
  }
  
  .countdown {
    flex-direction: row !important;
    gap: 10px !important;
  }
  
  .countdown-number {
    font-size: 1.8rem !important;
  }
  
  /* Servicios - Carrusel */
  .carrusel-prev,
  .carrusel-next {
    left: 10px !important;
    right: 10px !important;
    width: 35px !important;
    height: 35px !important;
    font-size: 1.2rem !important;
  }
  
  .carrusel-next {
    left: auto !important;
  }
  
  /* Tarjetas de precios */
  .pricing-card {
    margin: 0 auto !important;
    max-width: 350px !important;
  }
  
  /* Razones / Beneficios */
  div[style*="display:flex;gap:20px"] {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  div[style*="min-width:60px;height:60px"] {
    min-width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
  }
  
  /* Misión y Visión */
  div[style*="padding: 50px 40px; border-radius: 20px"] {
    padding: 35px 25px !important;
  }
  
  /* Ocultar elementos decorativos en móvil */
  div[style*="position:absolute"][style*="opacity:0.1"] {
    display: none !important;
  }
}

/* MÓVILES EXTRA PEQUEÑOS (max-width: 480px) */
@media screen and (max-width: 480px) {
  
  .hero-text-wrapper h1 {
    font-size: 1.6rem !important;
  }
  
  .hero-text-wrapper p {
    font-size: 0.95rem !important;
  }
  
  .hero-logo img {
    max-width: 120px !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.2rem !important;
  }
  
  section {
    padding: 40px 15px !important;
  }
  
  .btn {
    font-size: 0.95rem !important;
    padding: 12px 25px !important;
  }
  
  /* Tarjetas de contacto */
  div[style*="padding: 50px 40px"],
  div[style*="padding: 35px 25px"] {
    padding: 25px 20px !important;
  }
  
  a[style*="word-break: break-all"] {
    font-size: 0.9rem !important;
    padding: 12px 20px !important;
  }
  
  /* Valores carousel */
  .valor-card {
    flex: 0 0 250px !important;
    padding: 25px 15px !important;
  }
  
  /* Modal */
  .modal-content {
    width: 95% !important;
    padding: 20px !important;
  }
  
  .btn-modal {
    font-size: 0.95rem !important;
    padding: 12px 25px !important;
  }
}

/* LANDSCAPE MODE (orientación horizontal en móviles) */
@media screen and (max-height: 500px) and (orientation: landscape) {
  
  .hero-section {
    min-height: 100vh !important;
  }
  
  .nav-menu {
    flex-direction: row !important;
    gap: 15px !important;
  }
  
  .header-container {
    flex-direction: row !important;
  }
}