/* ============================================================
   ECLIPSE · RESPONSIVE
   Archivo de adaptación responsive. DEBE cargarse DESPUÉS de:
   - styles.css
   - hero-eclipse.css
   ============================================================ */

/* ============================================================
   1. GLOBAL OVERFLOW GUARD
   El principal problema del proyecto: muchos contenedores
   tienen widths fijos en px (579px, 736px, 1050px, 1200px...)
   que fuerzan scroll horizontal en mobile.
   Aquí prevenimos el overflow y neutralizamos los anchos fijos
   comunes para que se comporten fluidamente.
============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* En viewports menores al diseño original, los widths fijos
   de los bloques de contenido deben pasar a 100% */
@media (max-width: 1280px) {
  .section1 .section-description,
  .section2 .section-description,
  .section3 .section-description,
  .section5 .section-description,
  .section6 .section-description,
  .section7 .section-description,
  .section8 .cards-wrapper,
  .section9 .cards-wrapper,
  .section2 .card,
  .section4 .card,
  .section5 .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Contain + inner wrappers: respect container padding */
  .section1 .contain,
  .section2 .contain,
  .section3 .contain,
  .section5 .contain,
  .section6 .card,
  .section7 .contain,
  .section8 .contain,
  .section9 .contain,
  .section10 .frame-parent {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============================================================
   2. BLUR ORBS (decorative blobs posicionados con top/left px)
   En mobile salen fuera del viewport y arrastran el layout.
   Los escondemos en TODOS los viewports porque son decorativos
   puros y el overflow:hidden del parent no funciona bien con
   filter: blur.
============================================================ */
.section8 .contain-child,
.section8 .contain-item,
.section8 .contain-inner,
.section9 .contain-child,
.section9 .contain-item,
.section9 .contain-inner,
.section10 .card-child {
  display: none !important;
}

/* ============================================================
   3. HERO FIXES
   Arreglos específicos que faltaban:
   - Typo en index.html línea 48 (assets/imageso → assets/images)
     → Lo arreglamos vía CSS forzando background como fallback.
   - Rutas absolutas (/assets/...) que fallan si el sitio no
     se sirve desde el root. No podemos arreglarlo desde CSS,
     solo documentarlo.
============================================================ */
/* El título del hero puede overflow en mobile por las 4 capas */
@media (max-width: 768px) {
  .eclipse-hero__title-stack {
    max-width: 100%;
  }
  .eclipse-hero__title {
    white-space: normal; /* permite que el título se rompa en dos líneas */
  }
}

/* ============================================================
   4. NAVBAR — refinamiento del existente
   El navbar ya tiene el toggle pero hay detalles a mejorar
============================================================ */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 20px;
  }
  .nav-logo img {
    width: 130px;
    height: auto;
  }
  /* En mobile: ocultar nav-actions (Book Now queda dentro del menú) */
  .nav-actions {
    display: none;
  }
  /* lang + hamburger juntos, separados 16px */
  .nav-controls {
    gap: 16px;
  }
}

/* ============================================================
   5. SECTION 1 — Ventajas (3 cards)
============================================================ */
@media (max-width: 1024px) {
  .section1 .cards-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
  }
  .section1 .card,
  .section1 .card2,
  .section1 .card3 {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .section1 .section-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .section1 {
    padding: 70px 0 !important;
  }
  .section1 .cards-wrapper {
    grid-template-columns: 1fr !important;
  }
  .section1 .section-title {
    font-size: 32px;
    text-align: center;
  }
  .section1 .section-description {
    font-size: 16px;
  }
  .section1 .contain {
    gap: 40px;
  }
}

/* ============================================================
   6. SECTION 2 — "What's Included"
   Layout: 2 columnas (texto + card imagen) con grid interno 2x...
============================================================ */
@media (max-width: 1024px) {
  .section2 .contain {
    flex-direction: column;
    gap: 40px;
  }
  .section2 .card {
    width: 100% !important;
    order: 2;
  }
  .section2 .section-header-parent {
    order: 1;
    width: 100%;
  }
  .section2 .frame-parent {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100%;
  }
  .section2 .frame-group,
  .section2 .frame-container,
  .section2 .frame-div,
  .section2 .frame-parent2,
  .section2 .frame-parent3,
  .section2 .frame-parent4,
  .section2 .frame-parent5,
  .section2 .frame-parent6,
  .section2 .frame-parent7 {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;   /* permite que flex children se encojan */
  }
  .section2 .h-3-6-pm,
  .section2 .free-wifi,
  .section2 .complementary-light-snacks {
    width: auto !important;
    flex: 1;
    min-width: 0;
  }
  .section2 .section-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .section2 {
    padding: 70px 0 !important;
  }
  .section2 .section-title {
    font-size: 32px;
    text-align: center;
  }
  .section2 .section-header {
    align-items: center;
    text-align: center;
  }
  .section2 .frame-parent {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .section2 .default {
    align-self: center;
  }
  .section2 .ef-372f-4b2a-8cdd-620cfb58066a-icon {
    max-height: 400px;
  }
}

/* ============================================================
   7. SECTION 3 — Traffic Light (3 cards de color)
============================================================ */
@media (max-width: 1024px) {
  .section3 .cards-wrapper {
    grid-template-columns: 1fr !important;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
  }
  .section3 .card,
  .section3 .card2,
  .section3 .card3,
  .section3 .card4,
  .section3 .card5,
  .section3 .card6 {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
  }
  .section3 .section-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .section3 {
    padding: 70px 0 !important;
  }
  .section3 .section-title {
    font-size: 32px;
  }
}

/* ============================================================
   8. SECTION 4 — Quote / Spectacular Setting
   Tenía width: 1200px fijo en la card — brutal para mobile.
============================================================ */
@media (max-width: 1280px) {
  .section4 .card {
    width: 100% !important;
    max-width: calc(100% - 48px) !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  .section4 .card {
    height: auto !important;
    min-height: 400px;
  }
  .section4 .a-spectacular-setting {
    font-size: 28px;
    padding: 0 20px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .section4 {
    padding: 60px 0 !important;
    min-height: auto !important;
  }
  .section4 .card {
    min-height: 340px;
    border-radius: 24px;
  }
  .section4 .a-spectacular-setting {
    font-size: 22px;
  }
  .section4 .default {
    width: 100% !important;
    max-width: calc(100% - 16px);
  }
}

/* ============================================================
   9. SECTION 5 — Open Bar (card imagen + contenido)
============================================================ */
@media (max-width: 1024px) {
  .section5 .contain {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .section5 .section-header-parent {
    width: 100%;
    order: 1;
  }
  .section5 .card {
    width: 100% !important;
    height: auto !important;
    min-height: 500px;
    order: 2;
  }
  .section5 .card2 {
    top: 12px !important;
    right: 12px !important;
  }
  .section5 .section-title {
    font-size: 40px;
  }
  /* Card3 = Drinks list (internal grid) */
  .section5 .card3 {
    width: 100% !important;
    box-sizing: border-box;
  }
  .section5 .card3 .frame-parent {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .section5 .card3 .frame-container,
  .section5 .card3 .frame-parent2,
  .section5 .card3 .frame-parent3,
  .section5 .card3 .frame-parent4,
  .section5 .card3 .frame-parent5,
  .section5 .card3 .frame-parent6 {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0;
  }
  .section5 .card3 .premium-ron,
  .section5 .card3 .special-bottles,
  .section5 .card3 .presidente-beer,
  .section5 .card3 .section-description2 {
    width: auto !important;
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .section5 {
    padding: 70px 0 !important;
  }
  .section5 .section-header,
  .section5 .section-title,
  .section5 .section-description {
    text-align: center !important;
  }
  .section5 .section-header {
    align-items: center !important;
  }
  .section5 .section-title {
    font-size: 32px;
  }
  .section5 .card {
    min-height: 380px;
  }
  .section5 .card3 .frame-parent {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   10. SECTION 6 — Info / Booking cards
   card interna con width: 271px y card2 con width: 326px
============================================================ */
@media (max-width: 1024px) {
  .section6 .card {
    flex-direction: column !important;
    gap: 40px !important;
    padding: 32px !important;
  }
  .section6 .section-header {
    width: 100% !important;
  }
  .section6 .frame-group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .section6 .card-wrapper,
  .section6 .card2 {
    width: 100% !important;
    max-width: 340px;
    opacity: 1 !important;  /* el original tenía opacity:0, lo hacemos visible */
    height: auto !important;
    min-height: 400px;
  }
  .section6 .section-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .section10 .what-to-expect-parent {
    text-align: center;
    align-items: center;
  }
  .section10 .card-parent {
    padding: 0px !important;
  }
  .section10 .section-header {
    align-items: center;
  }
  .section6 .card-wrapper {
    padding: 0px;
  }
  .section7 .cards-wrapper {
    display: flex;
    flex-direction: column;
  }
  .section7 .contain {
    gap: 32px;
  }
  .card-wrapper.reveal.visible, .section6 .card2, .section6 .card3 {
    max-width: 1000px;
    width: 100%;
}
.section6 .card2, .section6 .card3 {
  padding: 24px;
}
  .section6 {
    padding: 70px 0 !important;
  }
  .section6 .card {
    border-radius: 24px;
  }
  .section6 .section-title {
    font-size: 28px;
  }
  .section6 .all-tickets-include {
    width: 100% !important;
  }
  .section6 .frame-group {
    flex-direction: column;
    align-items: center;
  }
}

/* ============================================================
   11. SECTION 7 — Schedule (2 cards)
============================================================ */
@media (max-width: 1024px) {
  .section7 .section-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .section7 {
    padding: 70px 0 !important;
  }
  .section7 .cards-wrapper {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .section7 .card {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 32px !important;
  }
  .section7 .frame-parent {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .section7 .section-title {
    font-size: 32px;
  }
}

/* ============================================================
   12. SECTION 8 — FAQ
   Tiene cards-wrapper con width: 1050px — crítico para mobile
============================================================ */
@media (max-width: 1280px) {
  .section8 .cards-wrapper {
    width: 100% !important;
    max-width: 1050px;
    margin: 0 auto;
  }
}

@media (max-width: 1024px) {
  .section8 .section-title {
    font-size: 40px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .section8 {
    padding: 70px 0 !important;
  }
  .section8 .section-title {
    font-size: 28px;
  }
  .section8 .card {
    padding: 20px 24px !important;
    border-radius: 16px !important;
  }
  .section8 .what-do-red {
    font-size: 16px;
    line-height: 1.35;
  }
  .section8 .cards-wrapper {
    gap: 16px;
    font-size: 18px;
  }
}

/* ============================================================
   13. SECTION 9 — Gallery / Start here cards
============================================================ */
@media (max-width: 1024px) {
  .section9 .cards-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
  }
  .section9 .card,
  .section9 .card2,
  .section9 .card3 {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .section9 .section-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .section9 {
    padding: 70px 0 !important;
  }
  .section9 .cards-wrapper {
    grid-template-columns: 1fr !important;
  }
  .section9 .section-title {
    font-size: 32px;
  }
  .section9 .section-header-child,
  .section9 .section-header-item {
    display: none; /* elementos decorativos absolutos, estorban en mobile */
  }
}

/* ============================================================
   14. SECTION 10 — Footer / Awards
============================================================ */
@media (max-width: 1280px) {
  .section10 .card-parent {
    width: 100% !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  .section10 .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 1024px) {
  .section10 .ranking-es-1-parent {
    flex-wrap: wrap;
    gap: 24px !important;
    padding: 24px 32px !important;
    justify-content: center;
  }
  .section10 .card {
    grid-template-columns: 1fr !important;
    padding: 40px !important;
    gap: 40px !important;
  }
  .section10 .card > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .section10 .card2 {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  .section10 .section-title {
    width: 100% !important;
    font-size: 36px;
    text-align: center !important;
  }
  .section10 .frame-group {
    width: 100%;
    gap: 16px !important;
  }
  .section10 .frame-container {
    align-self: stretch;
    min-width: 0;
  }
  .section10 .email-us-parent {
    min-width: 0;
    flex: 1;
  }
  .section10 .operacioneshispaniolahotmail {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Fix copyright bar: 100vw breaks inside padded parent */
  .section10 .eclipse-punta-cana-all-rights-parent {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .section10 {
    padding: 60px 0 !important;
  }
  .section10 .frame-parent {
    gap: 60px;
  }
  .section10 .card {
    padding: 32px !important;
    border-radius: 24px !important;
    gap: 32px !important;
  }
  .section10 .section-title {
    font-size: 26px;
  }
  .section10 .ranking-es-1-parent {
    padding: 20px !important;
    gap: 20px !important;
  }
  /* Award images scale down */
  .section10 .ranking-es-1-icon { width: 160px !important; }
  .section10 .wedding-wire2018-2021-1-icon { width: 60px !important; }
  .section10 .ltg-award-2021-2022-1-icon { width: 130px !important; }
  .section10 .viator2022-1-parent {
    width: 160px !important;
    height: 60px !important;
  }
  .section10 .viator2022-1-icon,
  .section10 .viator2023-1-icon,
  .section10 .viator2024-1-icon {
    width: 53.3px !important;
    height: 60px !important;
  }
  .section10 .viator2023-1-icon { left: 53.3px !important; }
  .section10 .viator2024-1-icon { left: 106.6px !important; }
  .section10 .award2016-1-icon { width: 160px !important; }

  .section10 .card2 {
    padding: 24px !important;
  }
  .section10 .frame-container {
    flex: 1 1 100%;
  }
  .section10 .eclipse-punta-cana-all-rights-parent {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .section10 .card {
    padding: 24px !important;
  }
  .section10 .ranking-es-1-parent {
    padding: 16px !important;
  }
  /* Award images even smaller */
  .section10 .ranking-es-1-icon { width: 120px !important; }
  .section10 .ltg-award-2021-2022-1-icon { width: 100px !important; }
  .section10 .award2016-1-icon { width: 120px !important; }
}

/* ============================================================
   15. TIPOGRAFÍA FLUIDA GLOBAL
   Reducir fuentes base en mobile para todo lo que no cubrieron
   las reglas anteriores.
============================================================ */
@media (max-width: 768px) {
  .section-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  .section-description,
  .section-description2 {
    font-size: 15px !important;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 26px !important;
  }
}

/* ============================================================
   16. IMÁGENES — evitar overflow y mantener ratio
============================================================ */
img {
  max-width: 100%;
  height: auto;
}

/* Imágenes con anchos/alturas fijos en el CSS existente */
@media (max-width: 768px) {
  .section1 .card-child,
  .section3 .card-child,
  .section7 .frame-child {
    flex-shrink: 0;
  }
}