/* ═══════════════════════════════════════
   RESPONSIVE — Breakpoints
   ═══════════════════════════════════════ */

@media (max-width: 1100px) {
  .wrap    { padding: 0 36px; }
  .wrap-sm { padding: 0 36px; }
  .wrap-xs { padding: 0 36px; }
}

@media (max-width: 960px) {
  section { padding: 64px 0; }
  .wrap    { padding: 0 24px; }
  .wrap-sm { padding: 0 24px; }
  .wrap-xs { padding: 0 24px; }

  /* Splits → stack */
  .split { grid-template-columns: 1fr; }
  .split-img { min-height: 56vw; }
  .split-txt { padding: 52px 24px; }

  /* Grids → single col */
  .id-grid,
  .parati-grid,
  .date-grid,
  .fases-grid,
  .route-grid,
  .tgrid,
  .igrid { grid-template-columns: 1fr; }

  .egrid { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }

  .pi:nth-child(2n) { border-right: 1px solid var(--line); }

  /* Journey cards */
  .jcard { grid-template-columns: 1fr; }
  .jcard-img { min-height: 48vw; }
  .jcard-txt { padding: 44px 24px; }

  /* Conf event */
  .conf-event-block img { height: 280px; }
  .conf-event-block .ev-text { padding: 24px 24px; }

  /* Hero grids (handled in page CSS, but ensure stacking) */
  .hero-2col { grid-template-columns: 1fr !important; }
  .hero-2col .h-img,
  .hero-2col .hd-img { height: 58vw; }
  .hero-2col .h-text,
  .hero-2col .hd-text { padding: 80px 24px 52px; }

  /* 2-col generic */
  .sobre-2col,
  .sobre-2col-alt,
  .ca-inner {
    grid-template-columns: 1fr !important;
    gap: 36px;
    padding: 0 24px;
  }
  .ca-photo { height: 56vw; }

  /* Products */
  .pgrid3 { grid-template-columns: 1fr; }

  /* WhatsApp */
  .wa-btn { bottom: 20px; left: 20px; width: 48px; height: 48px; }
  .wa-btn svg { width: 22px; height: 22px; }
}

@media (max-width: 600px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .egrid { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }

  .btn, .btn-o, .btn-dark {
    padding: 12px 28px;
    font-size: 9px;
  }

  .jnum { font-size: 52px; }
  .checkout-price { font-size: 44px; }

  .toast { left: 16px; right: 16px; bottom: 16px; }
}

/* ── Inner page hero grids — stack on mobile ── */
@media (max-width: 960px) {
  #punto-hero-grid,
  #acomp-hero-grid,
  #conf-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 80px !important;
  }

  /* Image columns in hero grids */
  #punto-hero-grid > div:last-child,
  #conf-hero-grid > div:last-child {
    height: 60vw;
    min-height: 240px;
  }
  #acomp-hero-grid > div:first-child {
    height: 60vw;
    min-height: 240px;
  }

  /* Text columns get proper padding */  
  #punto-hero-grid > div:first-child,
  #conf-hero-grid > div:first-child,
  #acomp-hero-grid .h-text {
    padding: 48px 24px !important;
  }
}

/* ══════════════════════════════════════════════
   MOBILE-ONLY FIXES (≤ 768px)
   No desktop styles are affected here
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. ALL images show full / uncropped ── */

  /* Hero splits stack: image gets natural auto height */
  .hero-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-split .hs-text {
    padding: 100px 24px 40px !important;
    order: 1;
  }
  .hero-split .hs-img {
    order: 2;
    height: auto !important;        /* let image breathe */
    min-height: 0 !important;
  }
  .hero-split .hs-img img {
    width: 100%;
    height: auto !important;        /* full image, no crop */
    object-fit: contain !important; /* never crop */
    object-position: top center;
  }
  /* Keep the left-to-bottom gradient on mobile */
  .hero-split .hs-img::before {
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 20%) !important;
  }

  /* Sobre hero — full images */
  #sobre-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 80px !important;
  }
  #sobre-hero-grid > div:last-child {
    height: auto !important;
  }
  #sobre-hero-grid > div:last-child img {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
  }

  /* split-img (Angela portrait sections) — show full */
  .split-img {
    min-height: 0 !important;
    height: auto !important;
  }
  .split-img img {
    height: auto !important;
    object-fit: contain !important;
    width: 100%;
  }

  /* jcard images — show full */
  .jcard-img {
    min-height: 0 !important;
    height: auto !important;
  }
  .jcard-img img {
    height: auto !important;
    object-fit: contain !important;
    width: 100%;
  }

  /* sobre 2-col image blocks */
  .sobre-2col-alt > div:first-child {
    height: auto !important;
  }
  .sobre-2col-alt > div:first-child img {
    height: auto !important;
    object-fit: contain !important;
    width: 100%;
  }

  /* Conf bio photo */
  #conf-bio-grid {
    grid-template-columns: 1fr !important;
  }
  #conf-bio-grid > div:first-child {
    aspect-ratio: auto !important;
    height: auto !important;
  }
  #conf-bio-grid > div:first-child img {
    height: auto !important;
    object-fit: contain !important;
    width: 100%;
  }

  /* ── 2. Acompañamientos — texto siempre primero en mobile ── */
  /*
    Estructura HTML real dentro de #acomp:
      hijo 2 = card 01 (img, txt) → img va primero por defecto → flipear
      hijo 3 = card 02 (txt, img) → txt ya va primero ✓
      hijo 4 = card 03 (img, txt) → img va primero por defecto → flipear  ← evita img+img
      hijo 5 = card 04 (txt, img) → txt ya va primero ✓
  */

  /* Todos los jcard: flex column para que order funcione */
  .jcard {
    display: flex !important;
    flex-direction: column !important;
  }
  .jcard-txt, .jcard-img {
    width: 100% !important;
  }

  /* Cards que tienen imagen primero en HTML (01 y 03): poner texto primero en mobile */
  #acomp > .jcard:nth-child(2) .jcard-img { order: 2; }
  #acomp > .jcard:nth-child(2) .jcard-txt { order: 1; }

  #acomp > .jcard:nth-child(4) .jcard-img { order: 2; }
  #acomp > .jcard:nth-child(4) .jcard-txt { order: 1; }

  /* Cards que tienen texto primero en HTML (02 y 04): mantener como está */
  #acomp > .jcard:nth-child(3) .jcard-txt { order: 1; }
  #acomp > .jcard:nth-child(3) .jcard-img { order: 2; }

  #acomp > .jcard:nth-child(5) .jcard-txt { order: 1; }
  #acomp > .jcard:nth-child(5) .jcard-img { order: 2; }

  /* ── Inner hero grids — also full images ── */
  #punto-hero-grid > div:last-child,
  #conf-hero-grid > div:last-child,
  #acomp-hero-grid > div:first-child {
    height: auto !important;
    min-height: 0 !important;
  }
  #punto-hero-grid > div:last-child img,
  #conf-hero-grid > div:last-child img,
  #acomp-hero-grid > div:first-child img {
    height: auto !important;
    object-fit: contain !important;
    width: 100%;
  }

  /* home-pc-grid image */
  #home-pc-grid {
    grid-template-columns: 1fr !important;
  }
  #home-pc-grid > div.rr {
    height: auto !important;
  }
  #home-pc-grid > div.rr img {
    height: auto !important;
    object-fit: contain !important;
    width: 100%;
  }

  /* conf-insignia image */
  #conf-insignia-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════════
   iOS / SAFARI FIXES
   Targets Safari on iPhone and iPad (all versions)
   No changes to desktop/Android layout
   ══════════════════════════════════════════════════════ */

/* ── 1. Webkit prefixes for backdrop-filter ── */
nav,
nav.light-nav,
nav.solid,
.mob-menu,
.popup-overlay,
#checkout-overlay .checkout-box {
  -webkit-backdrop-filter: blur(20px);
}
.popup-overlay {
  -webkit-backdrop-filter: blur(8px);
}

/* ── 2. inset: 0 fallback (iOS < 14.5 doesn't support inset shorthand) ── */
.popup-overlay,
#yt-popup,
.mob-menu {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.vid-box img,
.pop-img::after,
.hero-split .hs-img::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ── 3. position:fixed + backdrop-filter bug on iOS ──
   iOS Safari has a known rendering bug where fixed+backdrop-filter
   causes the element to flicker or disappear when scrolling.
   Fix: use -webkit-transform to force GPU compositing layer. */
nav {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.popup-overlay {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── 4. 100vh fix for iOS Safari (address bar eats viewport height) ──
   iOS Safari's 100vh = full screen including hidden address bar.
   This causes content overflow. Use -webkit-fill-available as fallback. */
.hero-split {
  min-height: -webkit-fill-available;
}
@supports not (min-height: -webkit-fill-available) {
  .hero-split {
    min-height: 90vh;
  }
}

/* ── 5. mix-blend-mode: multiply over fixed elements crashes on iOS ──
   Remove mix-blend-mode on iOS when content is near fixed nav,
   replace with a subtle opacity effect that looks similar. */
@supports (-webkit-touch-callout: none) {
  /* This @supports block ONLY targets iOS/Safari */

  /* Replace multiply blend with simple opacity — visually similar, no crash */
  .split-img img,
  .hs-img img,
  .hero-split .hs-img img,
  #sobre-hero-grid img,
  #acomp-hero-grid img,
  #conf-hero-grid img {
    mix-blend-mode: normal;
    opacity: 0.92;
    filter: saturate(0.88) contrast(1.02);
  }
  /* jcard-img only on mobile (don't touch desktop layout) */
  @media (max-width: 768px) {
    .jcard-img img {
      mix-blend-mode: normal;
      opacity: 0.92;
      filter: saturate(0.88) contrast(1.02);
    }
  }

  /* gap fallback for flex containers on older iOS (< 14) */
  .pop-form { gap: 0; }
  .pop-form input + input,
  .pop-form input + button,
  .pop-form button { margin-top: 9px; }

  .nav-links { gap: 0; }
  .nav-links li + li { margin-left: 28px; }

  /* Ensure popup renders above everything on iOS */
  .popup-overlay {
    z-index: 99999;
    -webkit-overflow-scrolling: touch;
  }

  /* Fix for iOS momentum scrolling inside scrollable containers */
  .testi-carousel,
  .fases-grid {
    -webkit-overflow-scrolling: touch;
  }

  /* iOS tap highlight removal */
  .btn, .btn-o, .opt, .ro, .co, .testi-btn, .faq-q, button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* Font rendering on iOS */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* iOS Safari ignores some font-weight values — force them */
  .serif, h1, h2, h3 {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }
}

/* ── 6. Safe area for iPhone notch / Dynamic Island ── */
@supports (padding-top: env(safe-area-inset-top)) {
  nav {
    padding-left: max(64px, env(safe-area-inset-left));
    padding-right: max(64px, env(safe-area-inset-right));
  }
  footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  @media (max-width: 768px) {
    nav {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }
  }
}