/* Rentas Tulum v7 — pulido de escritorio y móvil sobre el recorrido 3D (complementa styles.css, world3d.css,
   v5.css y v6.css) y aviso elegante para las fotos que todavía no se pueden mostrar. */

/* ——— Fotos que no cargan (p. ej. carpetas de Google Drive todavía privadas) ———
   En lugar de una imagen rota se ve un aviso con ícono de cámara. */
.cg-slide img, .dg-tile img, .dg-slide img, .mc-media img { position: relative; z-index: 1; }
.pimg.err, .lb-slide img.err { opacity: 0; }
.cg-slide:has(> .pimg.err)::before, .dg-tile:has(> .pimg.err)::before, .dg-slide:has(> .pimg.err)::before, .mc-media:has(> .pimg.err)::before {
  content: "Fotos próximamente"; position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; padding: 3.25rem 1rem 1rem; text-align: center;
  font-size: .9375rem; font-weight: 650; color: var(--ink-2);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d5f2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.6-2.4h6.8L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E") center calc(50% - 14px) / 34px no-repeat,
    linear-gradient(160deg, #f1e9da, #e2d5bf);
}
.lb-slide { position: relative; }
.lb-slide:has(> img.err)::before {
  content: "Esta foto no está disponible por ahora"; position: absolute; inset: 0;
  display: grid; place-items: center; padding: 1rem; text-align: center; color: rgba(255, 255, 255, .86); font-weight: 600;
}

/* Ningún elemento puede ensanchar la página en el teléfono (sin romper las tarjetas fijas "sticky") */
main, .footer { overflow-x: clip; }

/* ——— Barra superior ——— */
@media (min-width: 1024px) and (max-width: 1199px) { .topnav a[data-nav="destacadas"] { display: none; } }
/* En móvil, sobre el mundo 3D, la barra es casi opaca (sin desenfoque: más fluido en teléfonos) */
@media (max-width: 1023px) {
  html.w3d-on .topbar:not(.scrolled), html.w3d-static .topbar:not(.scrolled) { background: rgba(243, 241, 236, .9); }
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ——— Opening ——— */
.hero-copy .kicker { color: var(--gold-ink); }
@media (max-width: 1023px) {
  .hero-inner { gap: var(--s4); padding-top: calc(var(--topbar-h) + env(safe-area-inset-top) + var(--s5)); }
  .hero h1 { font-size: clamp(2.25rem, 1.6rem + 4.6vw, 3.25rem); }
  .hero-sub { margin-top: var(--s3); font-size: 1.0625rem; }
  .hero .hero-search { margin-top: var(--s4); box-shadow: var(--shadow-2); }
  .hero-chips { margin-top: var(--s3); }
  .hero-pick { box-shadow: var(--shadow-2); }
}

/* ——— Paradas ——— */
.il-card .kicker { color: var(--gold-ink); }
.il-actions .btn { min-height: 48px; }
@media (max-width: 1023px) {
  .il-card { width: 100%; max-width: 520px; padding: var(--s4) var(--s4) var(--s4); border-radius: 24px; }
  .il-card h2 { font-size: clamp(1.625rem, 1.3rem + 2vw, 2.125rem); }
  .il-devs { font-size: .8125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .il-actions .btn { flex: 1 1 auto; justify-content: center; padding-inline: 1em; }
}
@media (max-width: 380px) { .il-actions .btn { flex: 1 1 100%; } }

/* Etiquetas del mundo en pantallas angostas */
@media (max-width: 640px) {
  .beacon span { min-height: 44px; padding: 5px 12px; border-radius: 14px; }
  .beacon b { font-size: .875rem; }
  .beacon small { font-size: .7188rem; }
}

/* ——— Paneles ——— */
.panel .section-head h2 { letter-spacing: -.02em; }
@media (max-width: 1023px) {
  .panel { box-shadow: 0 -10px 30px rgba(42, 33, 25, .1); }
  .panel > .section { padding-top: var(--s7); }
}

/* ——— Contacto sobre las ruinas ——— */
.contact-card { border-color: rgba(255, 255, 255, .7); }
@media (min-width: 1024px) {
  .contact-card { padding: clamp(2rem, 1rem + 3vw, 3.5rem); }
}
@media (max-width: 1023px) {
  .contact { min-height: 0; padding-top: 40vh; padding-top: 40svh; }
  .contact-card { width: 100%; border-radius: 26px; }
  .lead-form { padding: var(--s4); }
}

/* ——— Pie ——— */
.footer { box-shadow: 0 -10px 30px rgba(42, 33, 25, .06); }

/* ——— Toques ——— */
@media (hover: none) { .il-thumbs a:hover, .beacon:hover span { transform: none; } }