/* Full-section ambient backdrop, with a clear left rail for the key. */
#contacto { position: relative; isolation: isolate; overflow: hidden; }
.contact-architecture { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: .58; mask-image: linear-gradient(90deg, #000 0%, #000 45%, #0009 70%, #0005 100%),
    linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.contact-architecture img, .contact-architecture video { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: fill; }
.contact-architecture video { opacity: 0; }
.contact-architecture video[data-ready="true"] { opacity: 1; }
.contact-architecture video[data-failed="true"] { opacity: 0; }
#contacto .contact-info > :not(.contact-key-scene) { position: relative; text-shadow: 0 2px 8px #100d14; }
#contacto .contact-inner { align-items: start; margin-left: 22vw; margin-right: 0;
  max-width: none; gap: clamp(24px, 3vw, 60px); }
#contacto .contact-info, #contacto .contact-form { min-width: 0; }
#contacto .ci-text .val { overflow-wrap: anywhere; }
.contact-key-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact-key-media { position: absolute; width: 52vw; aspect-ratio: 16 / 9;
  left: -4vw; top: 50%; transform: translateY(-50%);
  mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 100%),
    linear-gradient(transparent, #000 18%, #000 84%, transparent);
  mask-composite: intersect; }
.contact-key-media img, .contact-key-media video {
  display: block; width: 100%; height: 100%; object-fit: contain;
  /* Keep the key solid while revealing the architecture through its backdrop. */
  mask-image: url('contact-key-mask.svg');
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.contact-key-media video { position: absolute; inset: 0; opacity: 0; }
#contacto[data-ambient-ready="true"] .contact-key-media video { opacity: 1; }
#contacto[data-ambient-failed="true"] .contact-key-media video { opacity: 0; }
#contacto .section-ambient-toggle { left: 24px; right: auto; bottom: 24px; pointer-events: auto; }
#contacto .section-ambient-toggle:focus-visible { outline: 2px solid #e7c99b; outline-offset: 4px; }
@media (max-width: 900px) {
  .contact-architecture { opacity: .35; }
  #contacto .contact-inner { margin-inline: 0; }
  #contacto .contact-info { position: relative; padding-bottom: 62vw; }
  .contact-key-scene { inset: auto -5.56vw 0; height: 62vw; }
  .contact-key-media { width: 110vw; left: -8vw; }
  #contacto .section-ambient-toggle { bottom: 8px; left: 5.56vw; }
}
@media (prefers-reduced-motion: reduce) {
  #contacto .contact-architecture video { display: none; }
  #contacto .contact-key-media video { display: none; }
}