.wedding-site .mobile-menu, .digitization-site .mobile-menu { display: none; } @media (max-width: 760px) { html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; } body { overflow-x: clip; } .tcvideo-site .hero, .digitization-site .hero, .vivo-site .hero { height: auto; min-height: max(740px, 100svh); } .tcvideo-site .hero { background-image: url("tcvideo-hero-poster.jpg"); background-position: 42% center; } .tcvideo-site .hero-inner { padding: 132px 0 72px; } .tcvideo-site .hero-video video { object-position: 42% center; } .digitization-site .hero { background-image: url("cintas-digitalizacion-hero.png"); background-position: 58% center; } .digitization-site .hero-copy { padding: 138px 0 88px; } .digitization-site .hero h1 { font-size: clamp(48px, 12.8vw, 68px); line-height: .98; } .digitization-site .hero p { max-width: 35rem; } .digitization-site .hero-caption { right: 20px; bottom: 20px; max-width: calc(100% - 40px); } .vivo-site .hero { background-image: url("vivo-hero-poster.jpg"); background-position: 42% center; } .vivo-site .hero-video { object-position: 42% center; } .vivo-site .hero h1 { font-size: clamp(51px, 13.5vw, 78px); } .wedding-site .wedding-hero { height: auto; min-height: max(760px, 100svh); background-image: url("bodas-hero-poster.jpg"); background-position: 52% center; } .wedding-site .cover-video-fullscreen video { object-position: 52% center; } .wedding-site .wedding-hero .hero-content { min-height: inherit; padding-top: 132px; padding-bottom: 92px; } .wedding-site .wedding-hero .cover-copy h1 { font-size: clamp(48px, 12.8vw, 70px); } .wedding-site .wedding-hero .cover-copy .hero-copy { font-size: 15px !important; line-height: 1.65 !important; } .wedding-site .wedding-hero .actions { gap: 16px 22px; flex-wrap: wrap; } .cv-page .cv-hero { min-height: 100svh; padding-top: 112px; padding-bottom: 68px; } .cv-page .cv-hero-grid { gap: 27px; } .cv-page .cv-profile { width: min(220px, 68vw); } .cv-page .cv-profile:before { inset: 0; width: auto; height: auto; } .cv-page .cv-profile:after { inset: 10px; width: auto; height: auto; } .cv-page .cv-profile-photo { object-position: center 28%; } } @media (max-width: 760px) { .wedding-site .mobile-menu, .digitization-site .mobile-menu { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.65); background: rgba(17,17,17,.42); color: #fff; font: 600 20px/1 var(--body, sans-serif); cursor: pointer; } .wedding-site .links.mobile-links, .digitization-site .nav-links.mobile-links { display: none; } .wedding-site .links.mobile-links.open, .digitization-site .nav-links.mobile-links.open { position: absolute; top: 70px; left: 20px; right: 20px; z-index: 10; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px; border: 1px solid rgba(255,255,255,.22); background: rgba(18,18,18,.97); box-shadow: 0 18px 38px rgba(0,0,0,.28); font-size: 14px; } .wedding-site .links.mobile-links.open a, .digitization-site .nav-links.mobile-links.open a, .digitization-site .nav-links.mobile-links.open a:not(.nav-cta) { display: block; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.13); opacity: 1; } .wedding-site .links.mobile-links.open a:last-child, .digitization-site .nav-links.mobile-links.open a:last-child { border-bottom: 0; } .digitization-site .nav-links.mobile-links.open a.nav-cta { border: 1px solid rgba(255,255,255,.4); } } @media (max-width: 760px) { .wedding-site #reels .section-head { display: block; } .wedding-site #reels .section-head > p { max-width: 38rem; margin: 1rem 0 0; } .wedding-site #reels .reel-preview-grid { grid-template-columns: minmax(0, 1fr) !important; width: min(100%, 380px); gap: 1rem; margin: 1.75rem auto 0; } .wedding-site #reels .reel-embed { display: block; width: 100%; max-width: 380px; min-width: 0; margin: 0 auto; padding: 0; } .wedding-site #reels .reel-embed iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .wedding-site #reels .instagram-cta a { min-height: 48px; justify-content: center; text-align: center; } .wedding-site .mobile-menu { width: 48px; height: 48px; } .wedding-site .wedding-hero .actions .button { min-height: 48px; } .wedding-site .contact-form input, .wedding-site .contact-form textarea { font-size: 16px !important; } } @media (max-width: 380px) { .wedding-site #reels .reel-preview-grid { width: 100%; } .wedding-site #reels .section-head h2 { font-size: clamp(2rem, 10vw, 2.8rem); } .wedding-site .wedding-hero .hero-content { width: calc(100% - 28px); padding-left: 4px; padding-right: 4px; } } .wedding-site #reels .reel-preview-grid { align-items: start; } .wedding-site #reels .reel-embed { box-sizing: border-box; position: relative; padding: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 22px; background: linear-gradient(145deg, #292927, #191918 72%); box-shadow: 0 0 0 4px rgba(255,255,255,.045), 0 20px 48px rgba(0,0,0,.28); } .wedding-site #reels .reel-embed iframe { position: absolute; inset: 10px; display: block; width: calc(100% - 20px); height: calc(100% - 20px); border: 0; border-radius: 13px; }