/* ============================================
   RESPONSIVE: MOBILE FIRST
   ============================================ */

/* En pantallas móviles, mostrar contenido y ocultar mensaje desktop */
@media screen and (max-width: 768px) {
  .only-mobile {
    display: block !important;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  .only-desktop {
    display: none !important;
  }
}

/* ============================================
   HERO SECTION RESPONSIVE
   ============================================ */
@media (min-width: 769px) {
  .parallax-background {
    width: 100%;
    height: 60vh;
  }
  
  .hero-content-modal {
    min-height: 40vh;
    padding: 5rem 0 7rem 0;
  }
}

@media (max-width: 768px) {
  .parallax-background {
    width: 100%;
    height: 60vh;
  }
  
  .hero-content-modal {
    min-height: 40vh;
    padding: 4rem 0 6rem 0;
  }
  
  .hero-content-modal > div {
    gap: 0.4rem !important;
    padding: 0.8rem 0.5rem !important;
  }
  
  .hero-content-modal h1 {
    font-size: 3rem !important;
    margin: 0 !important;
  }
  
  .hero-content-modal h2 {
    font-size: 3.8rem !important;
    margin: 0.1rem 0 !important;
  }
  
  .hero-content-modal span {
    font-size: 0.85rem !important;
    margin-bottom: 0.1rem !important;
  }
  
  .hero-content-modal p {
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 0.2rem 0 !important;
  }
  
  .hero-content-modal svg {
    width: 100px !important;
    height: 25px !important;
    margin: 0.1rem 0 !important;
  }
  
  .hero-content-modal div[style*="width: 250px"] {
    width: 180px !important;
    margin: 0.1rem 0 !important;
  }
}

@media (max-width: 640px) {
  .parallax-background {
    width: 100%;
    height: 60vh;
  }
  
  .parallax-background::before {
    background-size: 100% auto;
    background-position: center top;
    min-height: 100%;
  }
  
  .hero-content-modal {
    min-height: calc(100vh - 90vw);
    padding: 3rem 0 5rem 0;
  }
  
  .hero-content-modal > div {
    gap: 0.5rem !important;
    padding: 1rem 0.8rem !important;
  }
  
  .hero-content-modal h1 {
    font-size: 2.8rem !important;
  }
  
  .hero-content-modal h2 {
    font-size: 3.5rem !important;
  }
  
  .hero-content-modal div[style*="width: 250px"] {
    width: 200px !important;
  }
}

@media (max-width: 480px) {
  .parallax-background {
    width: 100%;
    height: 60vh;
  }
  
  .parallax-background::before {
    background-size: 100% auto;
    background-position: center top;
    min-height: 100%;
  }
  
  .hero-content-modal {
    min-height: calc(100vh - 90vw);
    padding: 2.5rem 0 4rem 0;
  }
  
  .hero-content-modal > div {
    gap: 0.4rem !important;
    padding: 0.8rem 0.6rem !important;
  }
  
  .hero-content-modal h1 {
    font-size: 2.5rem !important;
  }
  
  .hero-content-modal h2 {
    font-size: 3.2rem !important;
  }
  
  .hero-content-modal span {
    font-size: 0.8rem !important;
  }
  
  .hero-content-modal p {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  
  .hero-content-modal svg {
    width: 80px !important;
    height: 20px !important;
  }
  
  .hero-content-modal div[style*="width: 250px"] {
    width: 150px !important;
  }
  
  .hero-content-modal::before {
    left: 10px !important;
  }
  
  .hero-content-modal::after {
    right: 10px !important;
  }
}

@media (max-width: 375px) {
  .parallax-background {
    width: 100%;
    height: 60vh;
  }
  
  .parallax-background::before {
    background-size: 100% auto;
    background-position: center top;
    min-height: 100%;
  }
  
  .hero-content-modal {
    min-height: calc(100vh - 95vw);
    padding: 2rem 0 3.5rem 0;
  }
  
  .hero-content-modal > div {
    gap: 0.3rem !important;
    padding: 0.6rem 0.5rem !important;
  }
  
  .hero-content-modal h1 {
    font-size: 2rem !important;
  }
  
  .hero-content-modal h2 {
    font-size: 2.6rem !important;
  }
  
  .hero-content-modal span {
    font-size: 0.75rem !important;
  }
  
  .hero-content-modal p {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  
  .hero-content-modal svg {
    width: 70px !important;
    height: 18px !important;
  }
  
  .hero-content-modal div[style*="width: 250px"] {
    width: 140px !important;
  }
}

@media (max-width: 320px) {
  .parallax-background {
    width: 100%;
    height: 60vh;
  }
  
  .parallax-background::before {
    background-size: 100% auto;
    background-position: center top;
    min-height: 100%;
  }
  
  .hero-content-modal {
    min-height: calc(100vh - 100vw);
    padding: 1.5rem 0 3rem 0;
  }
  
  .hero-content-modal > div {
    gap: 0.25rem !important;
    padding: 0.5rem 0.4rem !important;
  }
  
  .hero-content-modal h1 {
    font-size: 1.8rem !important;
  }
  
  .hero-content-modal h2 {
    font-size: 2.2rem !important;
  }
  
  .hero-content-modal span {
    font-size: 0.7rem !important;
  }
  
  .hero-content-modal p {
    font-size: 11px !important;
    line-height: 16px !important;
  }
  
  .hero-content-modal svg {
    width: 60px !important;
    height: 15px !important;
  }
  
  .hero-content-modal div[style*="width: 250px"] {
    width: 120px !important;
  }
  
  .hero-content-modal::before {
    left: 5px !important;
  }
  
  .hero-content-modal::after {
    right: 5px !important;
  }
}

/* ============================================
   WELCOME MODAL RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  #welcomeModal {
    padding: 1rem;
  }
  
  #welcomeModal h1 {
    font-size: 3.5rem !important;
  }
  
  #welcomeModal h2 {
    font-size: 4.5rem !important;
  }
  
  #welcomeModal span {
    font-size: 0.9rem !important;
  }
  
  #welcomeModal p[style*="MIS 15 AÑOS"] {
    font-size: 20px !important;
    line-height: 30px !important;
  }
  
  #welcomeModal p:not([style*="MIS 15 AÑOS"]) {
    font-size: 0.85rem !important;
  }
  
  #welcomeModal button {
    min-width: 230px !important;
    width: 230px !important;
    margin: 0px 5px 15px 5px !important;
  }
  
  #welcomeModal div[style*="flex-direction: row"] {
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {
  #welcomeModal h1 {
    font-size: 2.8rem !important;
  }
  
  #welcomeModal h2 {
    font-size: 3.6rem !important;
  }
  
  #welcomeModal span {
    font-size: 0.85rem !important;
  }
  
  #welcomeModal p[style*="MIS 15 AÑOS"] {
    font-size: 18px !important;
    line-height: 27px !important;
  }
  
  #welcomeModal svg[style*="width: 140px"] {
    width: 100px !important;
  }
}

/* ============================================
   CARDS RESPONSIVE
   ============================================ */
@media (max-width: 576px) {
  body,
  .container,
  .main-wrapper,
  .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  #floralBackground,
  #floralBackgroundCards {
    display: none !important;
  }
  
  .card-musica, .card-dresscode, .content-item-fiesta {
    max-width: 85vw !important;
    width: 85vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  #cards .card-custom {
    max-width: 90vw;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .card-musica .card-text,
  .content-item-fiesta .card-text {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================
   CUENTA ATRÁS RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  #cuenta-atras h2 {
    font-size: 2.5rem !important;
  }
  
  #cuenta-atras #timer div[style*="font-size: 2.5rem"] {
    font-size: 2rem !important;
  }
  
  #cuenta-atras #timer div[style*="width: 1px"] {
    height: 50px !important;
  }
}

@media (max-width: 480px) {
  #cuenta-atras {
    padding: 2rem 1rem !important;
  }
  
  #cuenta-atras h2 {
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  #cuenta-atras #timer {
    max-width: 100% !important;
    gap: 0.5rem !important;
  }
  
  #cuenta-atras #timer div[style*="font-size: 2.5rem"] {
    font-size: 1.5rem !important;
  }
  
  #cuenta-atras #timer div[style*="font-size: 0.9rem"] {
    font-size: 0.75rem !important;
  }
  
  #cuenta-atras #timer div[style*="width: 1px"] {
    height: 40px !important;
  }
}

/* ============================================
   CARRUSEL RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  #recorrido h2 {
    font-size: 2rem !important;
  }
  
  #recorrido .carousel-wrapper {
    height: 300px !important;
  }
  
  #recorrido .polaroid-card {
    max-width: 250px;
    height: 270px;
    padding: 0;
  }
  
  #recorrido .carousel-arrow {
    width: 35px;
    height: 35px;
  }
  
  #recorrido .carousel-arrow svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  #recorrido {
    padding: 2rem 1rem !important;
  }
  
  #recorrido h2 {
    font-size: 1.8rem !important;
  }
  
  #recorrido p {
    font-size: 0.9rem !important;
  }
  
  #recorrido .carousel-wrapper {
    height: 250px !important;
  }
  
  #recorrido .polaroid-card {
    max-width: 200px;
    height: 220px;
    padding: 0;
  }
  
  #recorrido .carousel-dot {
    width: 8px;
    height: 8px;
  }
  
  #recorrido .carousel-arrow {
    width: 32px;
    height: 32px;
  }
  
  #recorrido .carousel-arrow-prev {
    left: 5px;
  }
  
  #recorrido .carousel-arrow-next {
    right: 5px;
  }
  
  #recorrido .carousel-arrow svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   MODALES RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .modal-content {
    max-width: 90%;
    width: auto;
    top: 25%;
    padding: 1rem;
  }
}

/* ============================================
   UTILIDADES RESPONSIVE
   ============================================ */
@media (max-width: 576px) {
  .btn {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}