/* ================================================================================ */
/* === RESPONSIVE.CSS - DISEÑO ADAPTABLE PARA DIFERENTES TAMAÑOS DE PANTALLA === */
/* ================================================================================ */
/* Este archivo contiene consultas de medios (media queries) que adaptan el diseño */
/* según el tamaño de pantalla del dispositivo */

/* ================================================================================ */
/* === BREAKPOINTS (PUNTOS DE QUIEBRE) ESTÁNDAR === */
/* ================================================================================ */
/* Los breakpoints definen en qué tamaños de pantalla cambia el diseño */
/*  - Mobile muy pequeño: max-width: 320px (teléfonos antiguos) */
/*  - Mobile pequeño: max-width: 480px (iPhone SE, etc.) */
/*  - Mobile: max-width: 768px (la mayoría de teléfonos) */
/*  - Tablet: 769px - 1024px (iPads, tablets Android) */
/*  - Desktop: min-width: 1025px (computadoras de escritorio) */

/* ================================================================================ */
/* === ACORDEÓN RESPONSIVE === */
/* ================================================================================ */

/* @media screen es una consulta de medios que aplica estilos según condiciones */
/* max-width: 480px significa "cuando el ancho de pantalla es 480px o menos" */

@media screen and (max-width: 480px) {
  .contenedor-acordeon {
    width: 98% !important;
    padding: 0.5rem !important;
    margin: 0.25rem auto !important;
  }

  .acordeon {
    padding: 0.75rem !important;
    border-radius: 8px !important;
  }

  /* clamp(min, preferido, max) limita un valor entre un mínimo y máximo */
  /* Ejemplo: clamp(4px, 0.8vw, 6px) nunca será menor a 4px ni mayor a 6px */

  .h1-acordeon {
    font-size: 1.4rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.1 !important;
  }

  /* ::after es un pseudoelemento que inserta contenido después del elemento */
  .titulo-acordeon {
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem !important;
    margin-bottom: 0.25rem !important;
  }

  .titulo-acordeon::after {
    font-size: 0.8rem !important;
  }

  .bloque.activo {
    padding: 0.6rem !important;
  }

  .contenido-acordeon p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 0.4rem 0 !important;
  }

  /* El selector > significa "hijo directo" */
  /* address > div selecciona solo los div que son hijos directos de address */

  .contenido-acordeon address > div {
    font-size: 0.75rem !important;
    margin: 0.3rem 0 !important;
  }

  .contenido-acordeon address a {
    font-size: 0.75rem !important;
    padding: 0.1rem 0.2rem !important;
  }
}

/* min-width y max-width juntos crean un rango de tamaños */
/* Este código se aplica solo entre 481px y 768px */

@media screen and (min-width: 481px) and (max-width: 768px) {
  .contenedor-acordeon {
    width: 96% !important;
    padding: 0.6rem !important;
  }

  .acordeon {
    padding: 1rem !important;
  }

  .h1-acordeon {
    font-size: 1.8rem !important;
    margin-bottom: 0.8rem !important;
  }

  .titulo-acordeon {
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
  }

  .contenido-acordeon p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  .contenido-acordeon address > div {
    font-size: 0.85rem !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .contenedor-acordeon {
    width: 90% !important;
    padding: 1rem !important;
  }

  .h1-acordeon {
    font-size: 2.2rem !important;
  }

  .titulo-acordeon {
    font-size: 1.1rem !important;
  }

  .contenido-acordeon p {
    font-size: 0.95rem !important;
  }
}

/* :not() es un pseudoclase que excluye elementos que coinciden con el selector */
/* .contenedor-acordeon:not(.siempre-visible) selecciona acordeones SIN la clase "siempre-visible" */

@media screen and (min-width: 769px) {
  .contenedor-acordeon:not(.siempre-visible) {
    display: none !important;
  }
}

/* ================================================================================ */
/* === NAVBAR RESPONSIVE === */
/* ================================================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .logo {
    width: 260px;
    max-height: 80px;
  }
}

@media (min-width: 1025px) {
  .logo {
    width: 320px;
    max-height: 100px;
  }
  .navbar-horizontal {
    padding: 20px 40px;
  }
}

@media (min-width: 1025px) {
  .nav-buttons a,
  .nav-buttons button {
    font-size: 16px;
    padding: 16px 20px;
  }
}

/* ================================================================================ */
/* === MENÚ HAMBURGUESA PARA MÓVIL === */
/* ================================================================================ */
/* El menú hamburguesa es el icono de 3 líneas que aparece en dispositivos móviles */

@media (max-width: 768px) {
  .navbar-horizontal {
    padding: 15px 20px;
    border-radius: 12px;
  }

  .menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0;
  }

  /* Las líneas del icono hamburguesa */
  .hamburger-line {
    width: 20px;
    height: 2px;
  }

  /* :nth-child(n) selecciona el elemento hijo número n */
  /* top posiciona la línea verticalmente dentro del contenedor */

  .hamburger-line:nth-child(1) { top: 14px; }
  .hamburger-line:nth-child(2) { top: 19px; }
  .hamburger-line:nth-child(3) { top: 24px; }

  /* Cuando el menú está activo, las líneas se transforman en una X */
  /* transform: rotate() gira el elemento en grados */

  .menu-toggle.active .hamburger-line:nth-child(1) {
    top: 19px;
    transform: translateX(-50%) rotate(45deg);
  }

  .menu-toggle.active .hamburger-line:nth-child(2) {
    top: 19px;
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
  }

  .menu-toggle.active .hamburger-line:nth-child(3) {
    top: 19px;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* ================================================================================ */
  /* === MENÚ DESPLEGABLE MÓVIL === */
  /* ================================================================================ */
  /* max-height: 0 oculta el menú inicialmente */
  /* La transición crea una animación suave al abrir/cerrar */

  .nav-buttons {
    display: none;
    flex-direction: column;
    gap: 5px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
    justify-content: flex-start;
    width: 100%;
    margin-top: 10px;
    opacity: 0;
    padding: 0;
    background: var(--nav-bg);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  /* Cuando el menú tiene la clase .show, se expande */
  .nav-buttons.show {
    display: flex;
    max-height: 600px;
    opacity: 1;
    padding: 15px 5px;
    overflow-y: auto;
  }

  .nav-buttons li {
    margin-bottom: 2px;
    width: 100%;
  }

  .nav-buttons a,
  .nav-buttons button {
    font-size: 16px;
    padding: 12px 16px;
    width: 100%;
    text-align: center;
    border-radius: 6px;
    display: block;
    position: relative;
  }

  /* transform: translateX() mueve el elemento horizontalmente */
  .nav-buttons a:hover,
  .nav-buttons a:focus,
  .nav-buttons button:hover,
  .nav-buttons button:focus {
    transform: translateX(5px);
  }

  /* ================================================================================ */
  /* === DROPDOWN EN MÓVIL === */
  /* ================================================================================ */

  .dropdown {
    position: relative;
    width: 100%;
  }

  .dropdown > button {
    width: 100% !important;
    position: relative;
    z-index: 1;
  }

  /* position: static hace que el elemento siga el flujo normal del documento */
  .dropdown-menu {
    position: static;
    background: rgba(255,255,255,0.95);
    border: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    transform: none;
    left: auto;
    margin-top: 5px;
    border-radius: 6px;
    width: 100%;
    z-index: 2;
  }

  /* animation: nombre-animación duración función-tiempo */
  .dropdown-menu.show {
    display: block;
    animation: slideDown 0.3s ease;
  }

  .dropdown-menu li a {
    padding: 8px 20px;
    font-size: 14px;
  }

  .search-container {
    margin-top: 15px;
    order: 3;
  }

  .search-results-list,
  .search-results-list.elemento-visible {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
  }

  .nav-header {
    margin-bottom: 0;
  }

  .navbar-horizontal {
    flex-direction: column;
  }
}

/* ================================================================================ */
/* === AJUSTES PARA MÓVILES MUY PEQUEÑOS === */
/* ================================================================================ */

@media (max-width: 480px) {
  .logo {
    width: 160px;
    max-height: 60px;
  }

  .search-toggle-btn,
  .search-submit-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .search-input {
    padding: 14px;
    font-size: 16px;
  }

  .menu-toggle {
    width: 36px;
    height: 36px;
  }

  .hamburger-line {
    width: 18px;
  }

  .hamburger-line:nth-child(1) { top: 12px; }
  .hamburger-line:nth-child(2) { top: 17px; }
  .hamburger-line:nth-child(3) { top: 22px; }

  .menu-toggle.active .hamburger-line:nth-child(1) { top: 17px; }
  .menu-toggle.active .hamburger-line:nth-child(3) { top: 17px; }
}

/* ================================================================================ */
/* === BOTÓN DE CAMBIO DE TEMA RESPONSIVE === */
/* ================================================================================ */

@media (max-width: 480px) {
  .container-boton-cambiar-tema {
    max-width: 76px;
    padding: 0 6px;
  }

  /* Variables CSS personalizadas específicas para el componente */
  .toggle-switch {
    --track-width: 72px;
    --track-height: 30px;
    --track-padding: 5px;
  }

  .toggle-switch .slider::before {
    background-size: 70%;
  }
}

/* ================================================================================ */
/* === CARRUSEL RESPONSIVE === */
/* ================================================================================ */

/* max() devuelve el valor máximo entre las opciones */
/* max(2vw, 30px) será 2vw si es mayor que 30px, o 30px si 2vw es menor */

@media (min-width: 769px) {
  .carrusel-wrapper .carrusel-indicators {
    width: 100% !important;
    max-width: 90vw !important;
    padding: 2vw 4vw !important;
    gap: max(2vw, 30px) !important;
  }

  /* clamp(min, preferido, max) limita un valor flexible entre un mínimo y máximo */
  .carrusel-wrapper .carrusel-indicators .carrusel-indicator {
    width: clamp(24px, 3vw, 60px) !important;
    height: clamp(24px, 3vw, 60px) !important;
    border: max(2px, 0.2vw) solid rgba(26, 56, 100, 0.6) !important;
    box-shadow: 0 0 0 max(4px, 0.4vw) rgba(248, 155, 41, 0.4) !important;
  }
}

@media (max-width: 768px) {
  .carrusel-wrapper .carrusel-indicators {
    gap: 15px !important;
    padding: 15px 25px !important;
    margin: 20px auto !important;
    border-radius: 30px !important;
  }

  .carrusel-wrapper .carrusel-indicators .carrusel-indicator {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border: 1px solid rgba(26, 56, 100, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(248, 155, 41, 0.4) !important;
  }

  .carrusel-title {
    font-size: 1.6rem;
    margin-bottom: 25px;
  }

  .slide {
    height: 350px;
  }

  .carrusel-btn {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    top: 40%;
  }

  .carrusel-btn.prev { left: 10px; }
  .carrusel-btn.next { right: 10px; }

  .carrusel-container {
    margin: 0 5px;
  }

  .slide {
    animation: slideInMobile 0.5s ease-out;
  }
}

@media (max-width: 480px) {
  .carrusel-wrapper {
    padding: 15px;
    margin: 20px auto;
  }

  .slide {
    height: 280px;
  }

  .carrusel-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }

  .carrusel-btn {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    top: 35%;
  }

  .carrusel-btn.prev { left: 8px; }
  .carrusel-btn.next { right: 8px; }

  .carrusel-wrapper .carrusel-indicators {
    gap: 12px !important;
    padding: 12px 20px !important;
    margin: 15px auto !important;
    border-radius: 25px !important;
  }

  .card-overlay .text-container {
    padding: 10px 12px;
    max-width: 95%;
  }

  .card-overlay h3 {
    font-size: 1rem;
  }

  .card-overlay p {
    font-size: 0.75rem;
    line-height: 1.2;
  }
}

@media (max-width: 375px) {
  .carrusel-wrapper .carrusel-indicators {
    gap: 10px !important;
    padding: 10px 18px !important;
    margin: 12px auto !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 320px) {
  .carrusel-wrapper .carrusel-indicators {
    gap: 8px !important;
    padding: 8px 15px !important;
    margin: 10px auto !important;
    border-radius: 18px !important;
  }
}

/* ================================================================================ */
/* === GOOGLE MAPS RESPONSIVE === */
/* ================================================================================ */

@media (max-width: 768px) {
  .map-container {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .map-container {
    height: 200px;
  }
}

/* ================================================================================ */
/* === REDES SOCIALES RESPONSIVE === */
/* ================================================================================ */

@media (max-width: 768px) {
  .wrapper {
    justify-content: center;
    flex-wrap: wrap;
  }

  .wrapper .icon {
    margin: 5px;
  }
}

/* ================================================================================ */
/* === TIPOGRAFÍA RESPONSIVE === */
/* ================================================================================ */

@media (max-width: 768px) {
  p {
    font-size: 1.1rem;
  }

  li {
    font-size: 1.05rem;
  }
}

@media (max-width: 400px) {
  p {
    font-size: 1.2rem;
  }
}

/* ================================================================================ */
/* === OCULTAR ESCRITORIO INFO UTU EN MÓVIL === */
/* ================================================================================ */

@media screen and (max-width: 768px) {
  .contenedor-escritorio-infoUTU {
    display: none;
  }
}

/* ================================================================================ */
/* === ANIMACIONES KEYFRAMES === */
/* ================================================================================ */
/* @keyframes define una animación que puede reutilizarse */
/* from y to definen el estado inicial y final de la animación */

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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