/* ------------------------------ FONTS (añade en ) ---------------------------------- */ @font-face { font-family: 'Alan Sans'; src: url('../fonts/Alan_Sans/AlanSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Alan Sans Light'; src: url('../fonts/alan-sans/AlanSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Royalty Free'; src: url('../fonts/Royalty_Free/Royalty-Free.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ------------------------------ ---------------- RESETEO GENERAL ---------------- --------------------------------*/ body { margin: 0; font-family: 'Alan Sans', sans-serif; background-color: #fff; color: #0d3b3b; } /* ------------------------------ ---------------- 1. HERO Y PORTADA ---------------- --------------------------------*/ :root { --avion-size-desktop: 340px; } .hero-img-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; } .hero-avion-esquina { position: absolute; top: 0; left: 0; width: clamp(150px, 24vw, 320px); height: auto; z-index: 2; pointer-events: none; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .hero-texto { position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 90%; max-width: 900px; z-index: 2; } .hero-texto p { font-family: 'Alan Sans Light', sans-serif; font-size: clamp(2.3rem, 4vw, 3.9rem); font-weight: 300; line-height: 1.35; margin: 0 0 1rem 0; color: rgba(255, 255, 255, 0.9); } .hero-texto h1 { font-family: 'Alan Sans', sans-serif; font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 600; line-height: 1.15; margin: 0.4rem 0 0.6rem 0; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.88); } .firma-svg { display: block; margin: 4.2rem auto 0; max-width: 100%; height: auto; transform: scale(1.2); transform-origin: center top; } /* ------------------------------ AVIÓN ESTELA - ANIMADO ------------------------------ */ .avion-estela { position: absolute; top: 67%; right: -3%; width: var(--avion-size-desktop); max-width: none; transform: translate(20px, -60%) rotate(30deg); animation: plane-in 2.6s ease-out forwards, plane-hover 3s ease-in-out infinite 2.6s; z-index: 3; overflow: visible; } .avion-estela svg { width: 100%; height: auto; display: block; transform: translateX(-10%); } /* ✨ Animaciones */ @keyframes plane-in { 0% { transform: translate(350px, -40%) rotate(30deg); opacity: 0; } 30% { transform: translate(200px, -50%) rotate(20deg); opacity: 0.6; } 60% { transform: translate(80px, -56%) rotate(12deg); opacity: 0.85; } 100% { transform: translate(0, -50%) rotate(8deg); opacity: 1; } } @keyframes plane-hover { 0% { transform: translate(0, -50%) rotate(8deg); } 50% { transform: translate(12px, -52%) rotate(12deg); } 100% { transform: translate(0, -50%) rotate(8deg); } } /* ─────────────────────── Móvil (<400px) ──────────────────────── */ @media (max-width: 400px) { .hero-texto { top: 72%; max-width: 520px; width: 92%; } .hero-texto p { font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.2; margin-bottom: 0.5rem; } .hero-texto h1 { font-size: clamp(1.2rem, 4.6vw, 1.8rem); letter-spacing: 0.06em; margin: 0.25rem 0 0.4rem 0; white-space: nowrap; } .firma-svg { max-width: 70%; transform: scale(1); transform-origin: center top; margin-top: 1.3rem; margin-bottom: 2rem; } .hero-avion-esquina { width: clamp(65px, 22vw, 120px); } .avion-estela { width: 25%; right: 0; top: 70%; transform: translate(0, -60%) rotate(30deg); } .avion-estela svg { transform: none; } } /* ─────────────────────── Tablet (401px–767px) ──────────────────────── */ @media (min-width: 401px) and (max-width: 767px) { .hero-texto { top: 72%; max-width: 520px; width: 92%; } .hero-texto p { font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.2; margin-bottom: 0.5rem; } .hero-texto h1 { font-size: clamp(1.3rem, 4.7vw, 2rem); letter-spacing: 0.06em; margin: 0.25rem 0 0.4rem 0; white-space: nowrap; } .firma-svg { max-width: 72%; transform: scale(1); transform-origin: center top; margin-top: 1.2rem; margin-bottom: 2.8rem; } .hero-avion-esquina { width: clamp(90px, 20vw, 170px); } .avion-estela { width: 26%; right: 0; top: 68%; transform: translate(0, -60%) rotate(30deg); } .avion-estela svg { transform: none; } } /* ─────────────────────── Tablet grande (768px–1024px) ──────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .hero-texto { top: 68%; max-width: 620px; width: 88%; } .hero-texto p { font-size: clamp(2.3rem, 3vw, 2.8rem); line-height: 1.25; margin-bottom: 0.6rem; } .hero-texto h1 { font-size: clamp(2.3rem, 5vw, 3.2rem); letter-spacing: 0.07em; margin: 0.3rem 0 0.5rem 0; white-space: nowrap; } .firma-svg { max-width: 80%; transform: scale(1.05); transform-origin: center top; margin-top: 2.2rem; margin-bottom: 1.6rem; } .hero-avion-esquina { width: clamp(150px, 21vw, 250px); } .avion-estela { width: 25%; right: 0; top: 68%; transform: translate(0, -60%) rotate(30deg); } .avion-estela svg { transform: none; } } /* ─────────────────────── Tablet / Laptop pequeño (1024px–1210px) ──────────────────────── */ @media (min-width: 1024px) and (max-width: 1210px) { .hero-texto { top: 65%; max-width: 620px; width: 88%; } .hero-texto p { font-size: clamp(2.9rem, 3.7vw, 3.5rem); line-height: 1.25; margin-bottom: 0.6rem; } .hero-texto h1 { font-size: clamp(2.5rem, 5.2vw, 3.4rem); letter-spacing: 0.07em; margin: 0.3rem 0 0.5rem 0; white-space: nowrap; } .firma-svg { max-width: 90%; transform: scale(1.2); transform-origin: center top; margin-top: 2rem; } .hero-avion-esquina { width: clamp(160px, 22vw, 260px); } .avion-estela { width: 26%; right: 0; top: 68%; transform: translate(0, -60%) rotate(30deg); } .avion-estela svg { transform: none; } } /* Surface Pro / tablets altas tipo 912×1368 */ @media (min-width: 880px) and (max-width: 980px) and (min-height: 1200px) { .hero-texto { top: 66%; } .hero-texto p { font-size: clamp(2.8rem, 3.6vw, 4.6rem); line-height: 1.28; } .hero-texto h1 { font-size: clamp(3rem, 4vw, 4.2rem); margin-top: 0.5rem; } .firma-svg { margin-top: 2.2rem; transform: scale(1.25); } } /* Ajuste especial: pantallas tipo Surface Duo (540x720 aprox) */ @media (min-width: 480px) and (max-width: 720px) and (max-aspect-ratio: 3/4) { .hero-texto { top: 72%; } /* 1) Texto más grande */ .hero-texto p { font-size: clamp(1.6rem, 4.2vw, 2.4rem); } .hero-texto h1 { font-size: clamp(1.8rem, 4.6vw, 2.6rem); } /* 2) Firma más abajo y un pelín más grande */ .firma-svg { margin-top: 1.8rem; transform: scale(1); } .hero-avion-esquina { position: absolute; top: 0; left: 0; width: clamp(125px, 22vw, 260px); height: auto; z-index: 2; pointer-events: none; } } @media (max-width: 400px) and (min-height: 850px) and (max-aspect-ratio: 10/22) { .hero-texto { top: 72%; max-width: 520px; width: 92%; } .hero-texto p { font-size: clamp(1rem, 2.5vw, 1.4rem); line-height: 1.2; margin-bottom: 0.5rem; } .hero-texto h1 { font-size: clamp(1.1rem, 4.5vw, 1.7rem); letter-spacing: 0.06em; margin: 0.25rem 0 0.4rem 0; white-space: nowrap; } .firma-svg { max-width: 70%; transform: scale(1); transform-origin: center top; margin-top: 1rem; margin-bottom: 1.8rem; } } /* ───────────────────────────────────────────── LANDSCAPE BAJAS (1024×600) ───────────────────────────────────────────── */ @media (min-width: 64rem) and (max-height: 40rem) and (min-aspect-ratio: 16/10) { .hero-texto { top: 67%; width: 88%; } .hero-texto p { font-size: clamp(2.9rem, 3.7vw, 3.5rem); line-height: 1.25; margin-bottom: 0.6rem; } .hero-texto h1 { font-size: clamp(2.5rem, 5.2vw, 3.4rem); letter-spacing: 0.07em; margin: 0.3rem 0 0.5rem 0; white-space: nowrap; } .firma-svg { max-width: 90%; transform: scale(1.2); transform-origin: center top; margin-top: 3.2rem; } } /* ───────────────────────────────────────────── LANDSCAPE NORMAL (tipo 1280×800) ───────────────────────────────────────────── */ @media (min-width: 80rem) and (max-height: 55rem) and (min-aspect-ratio: 16/10) { .hero-texto { top: 67%; } .hero-texto p { font-size: clamp(3.4rem, 4.2vw, 4rem); line-height: 1.25; margin-bottom: 0.6rem; } .hero-texto h1 { font-size: clamp(3rem, 5.7vw, 3.9rem); letter-spacing: 0.07em; margin: 0.3rem 0 0.5rem 0; white-space: nowrap; } .firma-svg { margin: 3.2rem auto 0; transform: scale(1); } } /* ------------------------------ ---------------- 2. CUENTA ATRÁS ---------------- --------------------------------*/ .cuenta-atras { position: relative; margin-top: -22vh; display: flex; justify-content: center; z-index: 10; } .cuenta-box { background-color: #c7dbc6; border-radius: 0 0 8rem 8rem; padding: 5rem 2rem 7rem; max-width: 1000px; width: 95%; min-height: 400px; text-align: center; box-shadow: 0px 4px 15px rgba(0,0,0,0.1); font-family: 'Alan Sans', sans-serif; clip-path: polygon( 0 0, 48% 0, 50% 1.2rem, 52% 0, 100% 0, 100% 100%, 0 100% ); } .cuenta-intro { font-size: clamp(1.8rem, 2.2vw, 2.1rem); color: #0d3b3b; margin-bottom: 3rem; font-family: 'Alan Sans Light', sans-serif; } .contador { display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .contador div { background-color: #F7EADA; border: 4px solid #ffffff; border-radius: 50%; width: clamp(95px, 12.5vw, 130px); height: clamp(95px, 12.5vw, 130px); display: flex; justify-content: center; align-items: center; color: #0d3b3b; font-weight: bold; font-family: 'Alan Sans', sans-serif; position: relative; flex-direction: column; margin-bottom: 2.6rem; } .contador span { font-size: clamp(1.9rem, 2.8vw, 2.6rem); } .contador small { position: absolute; top: 100%; margin-top: 1.2rem; font-size: clamp(0.95rem, 1.6vw, 1.2rem); font-weight: normal; font-family: 'Alan Sans Light', sans-serif; line-height: 1; } .cuenta-frase { font-size: clamp(2.4rem, 3.5vw, 3.6rem); font-weight: bold; color: #0d3b3b; margin-bottom: 1.8rem; font-family: 'Alan Sans', sans-serif; } .btn-agendar { background-color: #ffffff; color: #0d3b3b; padding: 1.5rem 2.8rem; border-radius: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); text-decoration: none; font-family: 'Alan Sans', sans-serif; display: inline-flex; justify-content: center; align-items: center; width: auto; min-width: 14rem; max-width: 90%; margin-top: 1.4rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease; text-align: center; } .btn-agendar:hover { background-color: #f2f2f2; } /* ───────────────────────────── Móvil < 400px ───────────────────────────── */ @media (max-width: 400px) { .cuenta-atras { position: relative; margin-top: -6vh; display: flex; justify-content: center; z-index: 10; } .cuenta-box { transform: scale(0.65); transform-origin: top center; height: fit-content; min-height: unset; padding-bottom: 2rem; padding-top: 2rem; border-radius: 0 0 3.5rem 3.5rem; } .cuenta-intro { font-size: clamp(1rem, 2.6vw, 1.5rem); margin-bottom: 1.4rem; } .contador { gap: 1rem; margin-bottom: 1.6rem; } .contador div { width: clamp(50px, 13vw, 65px); height: clamp(50px, 13vw, 65px); margin-bottom: 1rem; } .contador span { font-size: clamp(0.95rem, 3vw, 1.2rem); } .contador small { font-size: 0.75rem; margin-top: 0.4rem; } .cuenta-frase { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 0.6rem; } .btn-agendar{ font-size: clamp(1.1rem, 3vw, 1.3rem); padding: 0.7rem 1rem; margin-top: 0.4rem; min-width: 0; border-radius: 12px; width: clamp(8rem, 50vw, 10rem); display: inline-flex; justify-content: center; align-items: center; } } /* ───────────────────────────── Móvil <400 pero MUY ALTO (ej: 390×844) ───────────────────────────── */ @media (max-width: 400px) and (max-aspect-ratio: 1/2) { .cuenta-atras{ margin-top: -4vh; } .cuenta-box{ transform: scale(0.72); padding-top: 1.8rem; padding-bottom: 2rem; width: 98%; } .cuenta-intro{ margin-bottom: 1.35rem; } .contador{ margin-bottom: 1.75rem; } .cuenta-frase { font-size: clamp(1.5rem, 4vw, 2.2rem); margin-bottom: 0.9rem; } .btn-agendar{ margin-top: 0.6rem; } } /* Galaxy Z Fold 5 / móviles muy estrechos y altos (ej. 344x882 ≈ 0.39) */ @media (max-width: 360px) and (max-aspect-ratio: 9/20) { .cuenta-atras{ margin-top: -4vh; } .cuenta-box{ transform: scale(0.66); transform-origin: top center; width: 96%; padding-top: 1.7rem; padding-bottom: 2rem; } .cuenta-intro{ font-size: clamp(0.9rem, 3.2vw, 1.1rem); margin-bottom: 1.1rem; } .contador{ gap: 0.85rem; margin-bottom: 1.35rem; } .contador div{ width: clamp(46px, 13vw, 58px); height: clamp(46px, 13vw, 58px); margin-bottom: 1.2rem; } .contador span{ font-size: clamp(0.9rem, 3vw, 1.1rem); } .contador small{ font-size: 0.7rem; margin-top: 0.55rem; } .cuenta-frase{ font-size: clamp(1.4rem, 3.9vw, 1.8rem); margin-bottom: 0.6rem; } .btn-agendar{ font-size: clamp(1rem, 3vw, 1.2rem); padding: 0.5rem 1rem; margin-top: 0.45rem; border-radius: 12px; width: 8rem; /* ajusta a gusto */ max-width: 80%; } } /* ───────────────────────────── Móvil < 768px ───────────────────────────── */ @media (min-width: 401px) and (max-width: 767px) { .cuenta-atras { position: relative; margin-top: -4.5vh; display: flex; justify-content: center; z-index: 10; } .cuenta-box { transform: scale(0.70); transform-origin: top center; height: fit-content; min-height: unset; padding-top: 2.3rem; padding-bottom: 2.2rem; border-radius: 0 0 4rem 4rem; } .cuenta-intro { font-size: clamp(1.1rem, 2.3vw, 1.6rem); margin-bottom: 1.2rem; } .contador { gap: 1rem; margin-bottom: 1.4rem; } .contador div { width: clamp(54px, 14.5vw, 68px); height: clamp(54px, 14.5vw, 68px); margin-bottom: 0.9rem; } .contador span { font-size: clamp(0.95rem, 3.2vw, 1.2rem); } .contador small { font-size: 0.8rem; margin-top: 0.45rem; } .cuenta-frase { font-size: clamp(1.7rem, 4.2vw, 2.4rem); margin-bottom: 0.55rem; } .btn-agendar{ font-size: clamp(1.1rem, 3vw, 1.3rem); padding: 0.6rem 1rem; margin-top: 0.4rem; min-width: 0; width: clamp(8rem, 50vw, 10rem); display: inline-flex; justify-content: center; align-items: center; border-radius: 12px; } } /* Ajuste especial: pantallas 401–767 con poca altura (Surface Duo 540×720) */ @media (min-width: 401px) and (max-width: 767px) and (max-height: 740px) { .cuenta-atras{ margin-top: -6.5vh; } .cuenta-box{ width: 86%; max-width: 30rem; min-height: 16rem; padding-top: 3rem; padding-bottom: 3rem; transform: scale(0.70); transform-origin: top center; } .cuenta-intro{ margin-bottom: 2rem; margin-top: 1rem; font-size: clamp(1.3rem, 2.5vw, 1.8rem); } .contador div { width: clamp(56px, 15vw, 70px); height: clamp(56px, 15vw, 70px); margin-bottom: 1.3rem; } .contador small { font-size: 1rem; margin-top: 0.75rem; } .contador{ margin-bottom: 2.8rem; } .cuenta-frase{ margin-bottom: 1.5rem; font-size: clamp(1.9rem, 4.3vw, 2.6rem); } .btn-agendar { font-size: clamp(1.3rem, 3.1vw, 1.5rem); padding: 0.65rem 0.8rem; margin-top: 0.4rem; width: clamp(10rem, 55vw, 12rem); } } /* ─────────────────────── Tablet (768px–1024px) ──────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .cuenta-atras { position: relative; margin-top: -15vh; display: flex; justify-content: center; z-index: 10; } .cuenta-intro { font-size: clamp(1.9rem, 2.6vw, 2.3rem); margin-bottom: 2.2rem; } .cuenta-box{ transform: scale(0.75); width: 88%; max-width: 760px; padding-top: 3.2rem; padding-bottom: 4.3rem; min-height: 460px; border-radius: 0 0 6.5rem 6.5rem; } .contador small { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 1.2rem; } .cuenta-frase { font-size: clamp(3rem, 4.6vw, 3.8rem); margin-bottom: 0.8rem; } .contador{ gap: 2.2rem; margin-bottom: 2.3rem; } .btn-agendar{ margin-top: 1.1rem; font-size: clamp(2rem, 3vw, 2.4rem); border-radius: 22px; min-width: clamp(17rem, 25vw, 23rem); } } /* ─────────────────────── Tablet (1024px–1210px) ──────────────────────── */ @media (min-width: 1024px) and (max-width: 1200px) { .cuenta-atras { position: relative; margin-top: -10vh; display: flex; justify-content: center; z-index: 10; } .cuenta-box { transform: scale(0.9); transform-origin: top center; height: fit-content; padding-bottom: 4rem; padding-top: 4.5rem; max-width: 720px; border-radius: 0 0 7rem 7rem; width: 90%; } .cuenta-intro { font-size: clamp(2rem, 2.6vw, 2.4rem); margin-bottom: 1.5rem; margin-top: 1rem; } .contador { gap: 3rem; margin-bottom: 2rem; flex-wrap: nowrap; justify-content: center; } .contador div { width: clamp(4rem, 10vw, 6rem); height: clamp(4rem, 10vw, 6rem); margin-bottom: 2rem; } .contador span { font-size: clamp(1.4rem, 2.7vw, 1.8rem); } .contador small { font-size: clamp(1.1rem, 2.2vw, 1.4rem); margin-top: 0.8rem; } .cuenta-frase { font-size: clamp(3.2rem, 4.2vw, 3.6rem); margin-bottom: 1.5rem; } .btn-agendar { font-size: clamp(2.1rem, 3.1vw, 2.5rem); padding: 1.5rem 2.5rem; border-radius: 24px; min-width: clamp(18rem, 26vw, 24rem); } } /* ───────────────────────────── Cuenta atrás — Landscape bajito (ej: 1280×800) ───────────────────────────── */ @media (min-width: 1200px) and (max-height: 860px) { .cuenta-atras{ margin-top: -17vh; } .cuenta-box{ width: 84%; max-width: 860px; min-height: unset; padding-top: 4.2rem; padding-bottom: 4.5rem; border-radius: 0 0 7rem 7rem; } .cuenta-intro { font-size: clamp(2.2rem, 2.8vw, 2.6rem); margin-bottom: 3rem; margin-top: 1rem; } .contador small { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 1rem; } .contador div { margin-bottom: 4rem; } .contador{ gap: 1.8rem; } .btn-agendar { font-size: clamp(1.9rem, 2.9vw, 2.3rem); padding: 1.3rem 2.65rem; border-radius: 18px; } } /* ------------------------------ ---------------- 3. SECCIÓN CEREMONIA ---------------- --------------------------------*/ .ceremonia { padding: 6vh 5vw; text-align: center; background-color: #fff; font-family: 'Alan Sans', sans-serif; position: relative; } .decoracion-estela-ceremonia { position: absolute; left: 0px; top: 40%; transform: translateY(-30%); height: 135%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: clamp(50px, 10vw, 100px); display: inline-block; vertical-align: top; } .ceremonia-titulo { font-family: 'Alan Sans', sans-serif; font-size: clamp(2.6rem, 5.4vw, 3.6rem); color: #0d3b3b; margin-top: 0rem; margin-bottom: 0.6rem; } .ceremonia-subtitulo { font-weight: normal; font-family: 'Alan Sans Light', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: #0d3b3b; margin-bottom: 2.5rem; line-height: 1.2; } .ceremonia-datos { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-bottom: 2.5rem; } .ceremonia-fecha, .ceremonia-hora { font-family: 'Alan Sans', sans-serif; font-size: clamp(2.2rem, 5.4vw, 2.8rem); font-weight: bold; color: #0d3b3b; } .barra-divisoria { width: 1.5px; height: 5rem; background-color: #0d3b3b; opacity: 0.5; margin: 0 2rem; } .btn-ubicacion { background-color: #0d3b3b; color: #fff; padding: 1.5rem 3.4rem; border-radius: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); text-decoration: none; font-family: 'Alan Sans', sans-serif; display: inline-flex; justify-content: center; align-items: center; margin-top: 1.4rem; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease; text-align: center; min-width: 10rem; } .btn-ubicacion:hover { background-color: #094242; } /* ---------------------- MÓVILES pequeños < 400px ------------------------- */ @media (max-width: 400px) { .ceremonia { margin-top: -7.7rem; padding: 5vh 6vw 7vh; } .decoracion-estela-ceremonia{ position: absolute; left: 0; top: 40%; transform: translateY(-30%); height: 100%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 48px; margin-bottom: 0.1rem; } .ceremonia-titulo { font-size: 0.95rem; margin-bottom: 0.4rem; } .ceremonia-subtitulo { font-size: 0.7rem; margin-bottom: 1.2rem; } .ceremonia-datos { gap: 1rem; margin-bottom: 1rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 0.8rem; } .barra-divisoria { height: 1.7rem; margin: 0 0.6rem; } .btn-ubicacion{ min-width: 0; width: clamp(6.6rem, 26vw, 7.6rem); padding: 0.65rem 0.8rem; font-size: clamp(0.72rem, 2.4vw, 0.85rem); border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* ───────────────────────────── Móvil <400 pero MUY ALTO (ej: 390×844) ───────────────────────────── */ @media (max-width: 400px) and (max-aspect-ratio: 1/2) { .ceremonia { margin-top: -6.5rem; padding: 5vh 6vw 7vh; } .decoracion-estela-ceremonia{ position: absolute; left: 0; top: 40%; transform: translateY(-30%); height: 90%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 50px; margin-bottom: 0.1rem; } .ceremonia-titulo { font-size: 1.05rem; margin-bottom: 0.4rem; } .ceremonia-subtitulo { font-size: 0.8rem; margin-bottom: 1.2rem; } .ceremonia-datos { gap: 1rem; margin-bottom: 1rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 0.9rem; } .barra-divisoria { height: 1.7rem; margin: 0 0.5rem; } .btn-ubicacion{ min-width: 0; width: clamp(7rem, 28vw, 8rem); padding: 0.65rem 0.8rem; font-size: clamp(0.75rem, 2.4vw, 0.88rem); border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* Móvil <400 ALTO MEDIO (ej: 360×740) */ @media (max-width: 400px) and (min-aspect-ratio: 1/2.1) and (max-aspect-ratio: 1/1.9) { .decoracion-estela-ceremonia{ position: absolute; left: 0; top: 40%; transform: translateY(-30%); height: 80%; width: auto; pointer-events: none; z-index: 1; } } /* Galaxy Z Fold 5 / móviles muy estrechos y altos (ej. 344x882 ≈ 0.39) */ @media (max-width: 360px) and (max-aspect-ratio: 9/20) { .ceremonia { margin-top: -7.5rem; padding: 5vh 6vw 7vh; } .decoracion-estela-ceremonia{ position: absolute; left: 0; top: 40%; transform: translateY(-30%); height: 90%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 48px; margin-bottom: 0.1rem; } .ceremonia-titulo { font-size: 0.9rem; margin-bottom: 0.4rem; } .ceremonia-subtitulo { font-size: 0.75rem; margin-bottom: 1.2rem; } .ceremonia-datos { gap: 1rem; margin-bottom: 1rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 0.9rem; } .barra-divisoria { height: 1.7rem; margin: 0 0.5rem; } .btn-ubicacion{ min-width: 0; width: clamp(5.5rem, 24vw, 6.5rem); padding: 0.55rem 0.7rem; font-size: clamp(0.7rem, 2.2vw, 0.82rem); border-radius: 9px; margin-top: 0.45rem; margin-bottom: 0.7rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* -------------------------- MÓVILES >400px and <767px --------------------------- */ @media (min-width: 401px) and (max-width: 767px) { .ceremonia { margin-top: -6rem; padding: 3vh 6vw 4vh; } .decoracion-estela-ceremonia{ position: absolute; left: 0; top: 40%; transform: translateY(-30%); height: 95%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 58px; margin-bottom: 0.5rem; } .ceremonia-titulo { font-size: 1.15rem; margin-bottom: 0.5rem; } .ceremonia-subtitulo { font-size: 0.85rem; margin-bottom: 1.1rem; } .ceremonia-datos { gap: 1.4rem; margin-bottom: 1.5rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 1rem; } .barra-divisoria { height: 2rem; margin: 0 0.45rem; } .btn-ubicacion{ min-width: 0; width: clamp(6.8rem, 26vw, 7.8rem); padding: 0.65rem 0.8rem; font-size: clamp(0.75rem, 2.4vw, 0.88rem); border-radius: 10px; margin-top: 0.4rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* Ajuste especial: pantallas 401–767 con poca altura (Surface Duo 540×720) */ @media (min-width: 401px) and (max-width: 767px) and (max-height: 740px) { .ceremonia { margin-top: -7.5rem; padding: 3vh 6vw 4vh; } .decoracion-estela-ceremonia{ position: absolute; left: 0; top: 40%; transform: translateY(-30%); height: 115%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 58px; margin-bottom: 0.5rem; } .ceremonia-titulo { font-size: 1.4rem; margin-bottom: 0.6rem; } .ceremonia-subtitulo { font-size: 1rem; margin-bottom: 1.1rem; } .ceremonia-datos { gap: 1.4rem; margin-bottom: 1.5rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 1.15rem; } .barra-divisoria { height: 2.7rem; margin: 0 0.45rem; } .btn-ubicacion{ min-width: 0; width: clamp(7rem, 27vw, 8rem); padding: 0.65rem 0.8rem; font-size: clamp(0.85rem, 2.6vw, 1.1rem); border-radius: 10px; margin-top: 0.4rem; margin-bottom: 2.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* ---------------------- TABLET 768px–1024px ------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { .ceremonia { margin-top: -4rem; padding: 4vh 8vw 5vh; } .decoracion-estela-ceremonia { position: absolute; left: 0px; top: 40%; transform: translateY(-30%); height: 110%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 85px; margin-bottom: 0.5rem; } .ceremonia-titulo { font-size: 2rem; margin-bottom: 0.6rem; } .ceremonia-subtitulo { font-size: 1.5rem; margin-bottom: 2rem; } .ceremonia-datos { gap: 1.8rem; margin-bottom: 2.5rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 1.7rem; } .barra-divisoria { height: 3rem; margin: 0 1rem; } .btn-ubicacion{ width: clamp(14.2rem, 18.2vw, 17.2rem); padding: 1.40rem 1.50rem; font-size: clamp(1.5rem, 1.9vw, 1.8rem); border-radius: 20px; margin-top: 0.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ---------------------- TABLET 768px–1024px (SurfacePro7) ------------------------- */ @media (min-width: 768px) and (max-width: 1023px) and (min-aspect-ratio: 2/3) and (min-height: 1200px){ .icono-anillos { width: 105px; margin-bottom: 0.7rem; } .decoracion-estela-ceremonia { position: absolute; left: 0px; top: 40%; transform: translateY(-30%); height: 110%; width: auto; pointer-events: none; z-index: 1; } .ceremonia-titulo { font-size: 2.4rem; margin-bottom: 0.8rem; } .ceremonia-subtitulo { font-size: 1.8rem; margin-bottom: 2rem; } .ceremonia-datos { gap: 2.2rem; margin-bottom: 2.8rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 1.9rem; } .barra-divisoria { height: 4rem; margin: 0 1rem; } .btn-ubicacion{ width: clamp(11rem, 19vw, 15rem); padding: 1.45rem 3rem; font-size: clamp(1.5rem, 1.9vw, 1.8rem); border-radius: 20px; margin-top: 0.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ------------------------------- 768px–1024px (Asus Zenbook Fold) -------------------------------- */ @media (min-width: 840px) and (max-width: 920px) and (min-height: 1200px) { .icono-anillos { width: 105px; margin-bottom: 0.7rem; } .decoracion-estela-ceremonia { position: absolute; left: 0px; top: 40%; transform: translateY(-30%); height: 110%; width: auto; pointer-events: none; z-index: 1; } .ceremonia-titulo { font-size: 2.3rem; margin-bottom: 0.8rem; } .ceremonia-subtitulo { font-size: 1.7rem; margin-bottom: 2rem; } .ceremonia-datos { gap: 2.2rem; margin-bottom: 2.8rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 1.9rem; } .barra-divisoria { height: 4rem; margin: 0 1rem; } } /* ---------------------- TABLET 1024px–1210px ------------------------- */ @media (min-width: 1024px) and (max-width: 1210px) { .ceremonia { margin-top: -2rem; padding: 4vh 8vw 5vh; } .decoracion-estela-ceremonia { position: absolute; left: 0px; top: 40%; transform: translateY(-30%); height: 120%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 100px; margin-bottom: 0.6rem; } .ceremonia-titulo { font-size: 2.7rem; margin-bottom: 0.6rem; } .ceremonia-subtitulo { font-size: 2rem; margin-bottom: 2.2rem; } .ceremonia-datos { gap: 2rem; margin-bottom: 3rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 2.3rem; } .barra-divisoria { height: 4.5rem; margin: 0 1.2rem; } .btn-ubicacion{ width: clamp(15rem, 19vw, 18rem); padding: 1.65rem 2.85rem; font-size: clamp(1.8rem, 1.95vw, 2.15rem); border-radius: 24px; margin-top: 0.8rem; margin-bottom: 1.4rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ───────────────────────────── Landscape bajito (ej: 1280×800) ───────────────────────────── */ @media (min-width: 1200px) and (max-height: 860px) { .ceremonia { margin-top: 2rem; padding: 4vh 8vw 5vh; } .decoracion-estela-ceremonia { position: absolute; left: 0px; top: 40%; transform: translateY(-30%); height: 120%; width: auto; pointer-events: none; z-index: 1; } .icono-anillos { width: 110px; margin-bottom: 0.6rem; } .ceremonia-titulo { font-size: 3.5rem; margin-bottom: 0.6rem; } .ceremonia-subtitulo { font-size: 2.3rem; margin-bottom: 2.2rem; } .ceremonia-datos { gap: 2rem; margin-bottom: 3rem; } .ceremonia-fecha, .ceremonia-hora { font-size: 2.8rem; } .barra-divisoria { height: 5.5rem; margin: 0 1.2rem; } .btn-ubicacion{ width: clamp(16rem, 20vw, 19rem); padding: 1.75rem 2.25rem; font-size: clamp(2rem, 2.2vw, 2.4rem); border-radius: 18px; margin-top: 0.95rem; margin-bottom: 1.55rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ------------------------------ ---------------- 4. SECCIÓN GALERÍA ---------------- --------------------------------*/ .galeria { background-color: #fff; padding: 5rem 2rem; display: flex; justify-content: center; position: relative; } .galeria-contenedor { display: flex; gap: 1.5rem; max-width: 1000px; width: 100%; justify-content: center; } .galeria-img { width: 52%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.2rem; display: block; } /* Imagen izquierda: baja el recorte (más parte de abajo visible) */ .galeria-img:nth-child(1) { object-position: center 95%; } /* Imagen derecha: sube el recorte (más parte de arriba visible) */ .galeria-img:nth-child(2) { object-position: center 10%; } /* ───────────────────────────── Móvil < 400px ───────────────────────────── */ @media (max-width: 400px) { .galeria { padding: 3rem 1rem; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 0.4rem; width: 100%; transform: translateY(-4rem); } .galeria-img { width: 34%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.8rem; } .galeria-img:nth-child(1) { object-position: center 90%; } .galeria-img:nth-child(2) { object-position: center 15%; } } /* ───────────────────────────── Móvil <400 pero MUY ALTO (ej: 390×844) ───────────────────────────── */ @media (max-width: 400px) and (max-aspect-ratio: 1/2) { .galeria { padding: 3rem 1rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 0.4rem; width: 100%; transform: translateY(-4.5rem); } .galeria-img { width: 38%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.8rem; } } /* Galaxy Z Fold 5 / móviles muy estrechos y altos (ej. 344x882 ≈ 0.39) */ @media (max-width: 360px) and (max-aspect-ratio: 9/20) { .galeria { padding: 3rem 1rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 0.4rem; width: 100%; transform: translateY(-5rem); } .galeria-img { width: 37%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.8rem; } } /* ───────────────────────────── Móvil 400-767px ───────────────────────────── */ @media (min-width: 401px) and (max-width: 767px) { .galeria { padding: 3.5rem 1.5rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 0.5rem; width: 100%; transform: translateY(-4rem); } .galeria-img { width: 38%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; } .galeria-img:nth-child(1) { object-position: center 90%; } .galeria-img:nth-child(2) { object-position: center 15%; } } /* Ajuste especial: pantallas 401–767 con poca altura (Surface Duo 540×720) */ @media (min-width: 401px) and (max-width: 767px) and (max-height: 740px) { .galeria { padding: 3.5rem 1.5rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 0.5rem; width: 100%; transform: translateY(-4.5rem); } .galeria-img { width: 37%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; } } /* ───────────────────────────── Tablet 768-1023px ───────────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .galeria { padding: 4rem 2rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 1rem; width: 90%; max-width: 900px; transform: translateY(-3rem); } .galeria-img { width: 42%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.2rem; } } /* ───────────────────────────── Tablet 1024-1200px ───────────────────────────── */ @media (min-width: 1024px) and (max-width: 1200px) { .galeria { padding: 5rem 3rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 1.2rem; width: 90%; max-width: 1000px; transform: translateY(-3.5rem); } .galeria-img { width: 42%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.4rem; } } /* ───────────────────────────── Landscape bajito (ej: 1280×800) ───────────────────────────── */ @media (min-width: 1200px) and (max-height: 860px) { .galeria { padding: 5rem 3rem; display: flex; justify-content: center; } .galeria-contenedor { display: flex; flex-direction: row; justify-content: center; gap: 1.2rem; width: 90%; max-width: 1000px; transform: translateY(-1rem); } .galeria-img { width: 47%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.4rem; } } /* ------------------------------ ---------------- 5. SECCIÓN AUTOBÚS ---------------- --------------------------------*/ .bus { background-color: #fff; padding: 6vh 5vw; display: flex; justify-content: center; text-align: center; color: #0d3b3b; margin-top: -3rem; position: relative; } .decoracion-estela-bus-ida { position: absolute; right: 0px; top: 30%; transform: translateY(-50%); height: 80%; width: auto; pointer-events: none; z-index: 1; } .bus-contenido { max-width: 90vw; width: 100%; } .icono-bus-dia, .icono-bus-noche { width: clamp(70px, 8vw, 100px); height: auto; margin-bottom: 1.2rem; margin-top: 0.8rem; } .bus-titulo { font-size: clamp(2.6rem, 5.4vw, 3.6rem); font-weight: bold; margin-top: 1rem; margin-bottom: 1rem; letter-spacing: 0.5px; font-family: 'Alan Sans', sans-serif; } .bus-subtitulo { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 2.2rem; font-family: 'Alan Sans Light', sans-serif; line-height: 1.2; } .bus-grupo { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } .bus-select-custom { width: clamp(220px, 50vw, 320px); margin: 0 auto; font-family: 'Alan Sans', sans-serif; } .bus-select-trigger { background-color: #0d3b3b; color: white; padding: 1.5rem 2.8rem; border-radius: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-family: 'Alan Sans', sans-serif; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; cursor: pointer; box-sizing: border-box; } .bus-select-arrow { margin-left: 1rem; font-size: 0.9em; } .bus-select-panel { background-color: #0d3b3b; border-radius: 1rem; margin-top: 0.4rem; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease; overflow-y: auto; } .bus-select-custom.open .bus-select-panel { max-height: 40vh; opacity: 1; transform: translateY(0); pointer-events: auto; } .bus-option, .bus-suboption { width: 100%; background: none; border: none; color: white; padding: 1.3rem 2.4rem; text-align: left; cursor: pointer; font-family: 'Alan Sans', sans-serif; font-size: clamp(1rem, 1.6vw, 1.15rem); } .bus-option:hover, .bus-suboption:hover { background-color: rgba(255, 255, 255, 0.08); } .bus-suboptions { display: none; padding-left: 1rem; } .bus-select-custom.show-suboptions .bus-suboptions { display: block; } .bus-select-custom.open { margin-bottom: 2rem; } .bus-select-custom.selected .bus-select-trigger { font-size: clamp(1.3rem, 2vw, 1.6rem); transition: font-size 0.2s ease; } .decoracion-avion-bus-vuelta { position: absolute; left: -5px; top: 70px; width: 260px; height: auto; pointer-events: none; z-index: 1; } /* ───────────────────────────── BUS — Móvil < 400px ───────────────────────────── */ @media (max-width: 400px) { /* 1) En móvil: mata el -3rem del global y reduce padding real */ .bus{ margin-top: -4rem; padding: 1.6rem 5vw 1.9rem; position: relative; z-index: 2; } .galeria + .bus{ transform: translateY(-2.2rem); padding-bottom: calc(1.9rem + 2.2rem); } .bus + .bus{ margin-top: -6rem; padding-top: 0.8rem; } .icono-bus-dia, .icono-bus-noche{ width: 48px; display: block; margin: 0 auto 0.35rem; } .bus-titulo{ margin-top: 0.2rem; margin-bottom: 0.35rem; font-size: 0.95rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 1rem; font-size: 0.7rem; } /* 1) Ancho tipo botón (un pelín más estrecho) */ .bus-select-custom{ width: clamp(8.2rem, 36vw, 10.5rem); margin: 0 auto; font-family: 'Alan Sans', sans-serif; } /* 2) Trigger con “cuerpo” de botón */ .bus-select-trigger{ width: 100% !important; min-width: 0; background-color: #0d3b3b; color: #fff; padding: 0.65rem 0.9rem; border-radius: 10px; font-size: clamp(0.7rem, 3.2vw, 0.9rem); line-height: 1.1; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; box-shadow: 0 3px 8px rgba(0,0,0,0.12); box-sizing: border-box; margin-top: 0.5rem; margin-bottom: 0.8rem; } .bus-select-text{ overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bus-select-arrow{ margin-left: 0; font-size: 0.9em; flex: 0 0 auto; line-height: 1; } /* 3) Panel del mismo ancho y compacto */ .bus-select-panel{ width: 100%; border-radius: 10px; margin-top: 0.35rem; } .bus-option, .bus-suboption{ padding: 0.65rem 0.95rem; font-size: clamp(0.78rem, 3vw, 0.95rem); } .bus-suboptions{ padding-left: 0.6rem; } .bus-select-custom.open{ margin-bottom: 1rem; } /* 4) CUANDO ESTÁ SELECCIONADO: - reduce tipografía - permite 2 líneas para ver TODO el texto - alinea mejor arriba */ .bus-select-custom.selected .bus-select-trigger{ font-size: clamp(0.74rem, 2.9vw, 0.9rem) !important; padding: 0.7rem 0.9rem; white-space: normal !important; align-items: flex-start; } .bus-select-custom.selected .bus-select-text{ overflow: visible !important; text-overflow: unset !important; display: block; max-width: 100%; } /* Decoraciones */ .decoracion-estela-bus-ida{ top: 25%; height: 50%; right: 0vw; } .decoracion-avion-bus-vuelta{ width: 24vw; top: 0%; left: 0vw; } } /* ───────────────────────────── Móvil <400 pero MUY ALTO (ej: 390×844) ───────────────────────────── */ @media (max-width: 400px) and (max-aspect-ratio: 1/2) { .bus{ margin-top: -4.5rem; } .bus-select-trigger{ padding: 0.6rem 0.85rem; } .icono-bus-dia, .icono-bus-noche{ width: 50px; display: block; margin: 0 auto 0.45rem; } .bus-titulo{ margin-top: 0.2rem; margin-bottom: 0.35rem; font-size: 1.05rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 1rem; font-size: 0.8rem; } } /* Móvil <400 ALTO MEDIO (ej: 360×740) */ @media (max-width: 400px) and (min-aspect-ratio: 1/2.1) and (max-aspect-ratio: 1/1.9) { .bus-select-custom{ width: clamp(8.6rem, 37vw, 10.9rem); margin: 0 auto; font-family: 'Alan Sans', sans-serif; } } /* Galaxy Z Fold 5 / móviles muy estrechos y altos (ej. 344x882 ≈ 0.39) */ @media (max-width: 360px) and (max-aspect-ratio: 9/20) { .bus{ margin-top: -6rem; z-index: 2; } .galeria + .bus{ transform: translateY(-2.2rem); padding-bottom: calc(1.9rem + 2.2rem); } .bus + .bus{ margin-top: -7rem; padding-top: 0.8rem; } .icono-bus-dia, .icono-bus-noche{ width: 48px; display: block; margin: 0 auto 0.45rem; } .bus-titulo{ margin-top: 0.2rem; margin-bottom: 0.35rem; font-size: 0.9rem; } .bus-subtitulo{ margin-top: 0; margin-bottom: 0.8rem; font-size: 0.75rem; } /* 1) Ancho tipo botón (un pelín más estrecho) */ .bus-select-custom{ width: clamp(6.8rem, 34vw, 9.1rem); margin: 0 auto; font-family: 'Alan Sans', sans-serif; } /* 2) Trigger con “cuerpo” de botón */ .bus-select-trigger{ width: 100% !important; min-width: 0; background-color: #0d3b3b; color: #fff; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: clamp(0.7rem, 3.2vw, 0.9rem); line-height: 1.1; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; box-shadow: 0 3px 8px rgba(0,0,0,0.12); box-sizing: border-box; margin-top: 0.5rem; margin-bottom: 0.8rem; } .bus-select-text{ overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bus-select-arrow{ margin-left: 0; font-size: 0.9em; flex: 0 0 auto; line-height: 1; } /* 3) Panel del mismo ancho y compacto */ .bus-select-panel{ width: 100%; border-radius: 10px; margin-top: 0.35rem; } .bus-option, .bus-suboption{ padding: 0.65rem 0.95rem; font-size: clamp(0.78rem, 3vw, 0.95rem); } .bus-suboptions{ padding-left: 0.6rem; } .bus-select-custom.open{ margin-bottom: 1rem; } /* 4) CUANDO ESTÁ SELECCIONADO: - reduce tipografía - permite 2 líneas para ver TODO el texto - alinea mejor arriba */ .bus-select-custom.selected .bus-select-trigger{ font-size: clamp(0.74rem, 2.9vw, 0.9rem) !important; padding: 0.7rem 0.9rem; white-space: normal !important; align-items: flex-start; } .bus-select-custom.selected .bus-select-text{ overflow: visible !important; text-overflow: unset !important; display: block; max-width: 100%; } } /* ───────────────────────────── Móvil 400-767px ───────────────────────────── */ @media (min-width: 401px) and (max-width: 767px) { .bus{ margin-top: -4.5rem; padding: 1.6rem 5vw 1.9rem; position: relative; z-index: 2; } .galeria + .bus{ transform: translateY(-2.2rem); padding-bottom: calc(1.9rem + 2.2rem); } .bus + .bus{ margin-top: -6rem; padding-top: 0.8rem; } .icono-bus-dia, .icono-bus-noche{ width: 58px; display: block; margin: 0 auto 0.75rem; } .bus-titulo{ margin-top: 0.2rem; margin-bottom: 0.5rem; font-size: 1.15rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 1rem; font-size: 0.85rem; } /* 1) Ancho tipo botón (un pelín más estrecho) */ .bus-select-custom{ width: clamp(7.7rem, 33vw, 9.7rem); margin: 0 auto; font-family: 'Alan Sans', sans-serif; } /* 2) Trigger con “cuerpo” de botón */ .bus-select-trigger{ width: 100% !important; min-width: 0; background-color: #0d3b3b; color: #fff; padding: 0.6rem 0.8rem; border-radius: 10px; font-size: clamp(0.82rem, 3.2vw, 0.98rem); line-height: 1.1; white-space: nowrap; display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; box-shadow: 0 3px 8px rgba(0,0,0,0.12); box-sizing: border-box; margin-top: 0.5rem; margin-bottom: 0.8rem; } .bus-select-text{ overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bus-select-arrow{ margin-left: 0; font-size: 0.9em; flex: 0 0 auto; line-height: 1; } /* 3) Panel del mismo ancho y compacto */ .bus-select-panel{ width: 100%; border-radius: 10px; margin-top: 0.35rem; } .bus-option, .bus-suboption{ padding: 0.65rem 0.95rem; font-size: clamp(0.78rem, 3vw, 0.95rem); } .bus-suboptions{ padding-left: 0.6rem; } .bus-select-custom.open{ margin-bottom: 1rem; } /* 4) CUANDO ESTÁ SELECCIONADO: - reduce tipografía - permite 2 líneas para ver TODO el texto - alinea mejor arriba */ .bus-select-custom.selected .bus-select-trigger{ font-size: clamp(0.74rem, 2.9vw, 0.9rem) !important; padding: 0.7rem 0.9rem; white-space: normal !important; align-items: flex-start; } .bus-select-custom.selected .bus-select-text{ overflow: visible !important; text-overflow: unset !important; display: block; max-width: 100%; } /* Decoraciones */ .decoracion-estela-bus-ida{ top: 25%; height: 50%; right: 0vw; } .decoracion-avion-bus-vuelta{ width: 24vw; top: 0%; left: 0vw; } } /* Ajuste especial: pantallas 401–767 con poca altura (Surface Duo 540×720) */ @media (min-width: 401px) and (max-width: 767px) and (max-height: 740px) { .icono-bus-dia, .icono-bus-noche{ width: 58px; display: block; margin: 0 auto 0.75rem; } .bus-titulo{ margin-top: 0.2rem; margin-bottom: 0.5rem; font-size: 1.4rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 1.3rem; font-size: 1rem; } .bus-select-trigger{ padding: 0.6rem 0.8rem; border-radius: 10px; font-size: clamp(0.8rem, 3.2vw, 0.9rem); } .decoracion-estela-bus-ida{ top: 25%; height: 60%; right: 0vw; } } /* ───────────────────────────── Móvil 768-1023px ───────────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .bus{ margin-top: -3.2rem; padding: 2.6rem 5vw 2.8rem; position: relative; z-index: 2; } /* Primer bus (el que viene tras galería) */ .galeria + .bus{ transform: translateY(-1.6rem); padding-bottom: calc(2.8rem + 1.6rem); /* compensa el translate */ } /* Separación entre bus ida y bus vuelta */ .bus + .bus{ margin-top: -3.4rem; /* antes -6rem (demasiado) */ padding-top: 1.2rem; } .icono-bus-dia, .icono-bus-noche{ width: 85px; /* sube respecto a 58px */ display: block; margin: 0 auto 1rem; } .bus-titulo{ margin-top: 0.3rem; margin-bottom: 0.8rem; font-size: 2rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 2.4rem; font-size: 1.5rem; line-height: 1.25; } /* 1) MÁS ANCHO (afecta a TODO: trigger + panel) */ .bus-select-custom{ width: clamp(13.6rem, 35vw, 16.8rem); margin: 0 auto; } /* 2) MÁS ALTO el “botón” selector */ .bus-select-trigger{ padding: 1.35rem 1.35rem; /* ↑ alto + un poco más ancho */ border-radius: 20px; gap: 0.6rem; font-size: clamp(1.4rem, 1.8vw, 1.7rem); display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; } /* 3) Panel más “grande” y consistente con el trigger */ .bus-select-panel{ width: 100%; border-radius: 12px; margin-top: 0.45rem; } /* 4) Opciones (lo que cuelga) más ALTAS */ .bus-option, .bus-suboption{ padding: 1rem 1.35rem; /* ↑ alto + ancho */ font-size: clamp(0.98rem, 2vw, 1.15rem); } .bus-suboptions{ padding-left: 0.85rem; /* un poco más de sangría */ } /* 5) Cuando está seleccionado: permite 2 líneas, pero mantiene el “cuerpo” grande */ .bus-select-custom.selected .bus-select-trigger{ padding: 1.15rem 1.35rem; white-space: normal !important; align-items: flex-start; font-size: clamp(0.95rem, 2vw, 1.15rem) !important; } .bus-select-custom.selected .bus-select-text{ overflow: visible !important; text-overflow: unset !important; display: block; max-width: 100%; } .decoracion-estela-bus-ida{ top: 25%; height: 70%; right: 0vw; } .decoracion-avion-bus-vuelta{ width: 22vw; top: 0%; left: 0vw; } } /* ---------------------- TABLET 768px–1024px (SurfacePro7) ------------------------- */ @media (min-width: 768px) and (max-width: 1023px) and (min-aspect-ratio: 2/3) and (min-height: 1200px){ .bus{ margin-top: -2rem; padding: 1.6rem 5vw 1.9rem; position: relative; z-index: 2; } .galeria + .bus{ transform: translateY(-2rem); padding-bottom: calc(1.9rem + 2.4rem); } .bus + .bus{ margin-top: -5rem; padding-top: 0.8rem; } .icono-bus-dia, .icono-bus-noche{ width: 105px; /* sube respecto a 58px */ display: block; margin: 0 auto 1rem; } .bus-titulo{ margin-top: 0.3rem; margin-bottom: 0.8rem; font-size: 2.4rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 2.8rem; font-size: 1.8rem; line-height: 1.25; } } /* ------------------------------- 768px–1024px (Asus Zenbook Fold) -------------------------------- */ @media (min-width: 840px) and (max-width: 920px) and (min-height: 1200px) { .bus-titulo{ margin-top: 0.3rem; margin-bottom: 0.8rem; font-size: 2.3rem; letter-spacing: 0.04em; } .bus-subtitulo{ margin-top: 0; margin-bottom: 2.8rem; font-size: 1.7rem; line-height: 1.25; } } /* ───────────────────────────── Móvil 1024-1210px ───────────────────────────── */ @media (min-width: 1024px) and (max-width: 1210px) { .bus{ margin-top: -3.5rem; padding: 2.6rem 5vw 2.8rem; position: relative; z-index: 2; } /* Primer bus (el que viene tras galería) */ .galeria + .bus{ transform: translateY(-2.6rem); padding-bottom: calc(2.8rem + 2.6rem); /* compensa el translate */ } /* Separación entre bus ida y bus vuelta */ .bus + .bus{ margin-top: -6rem; padding-top: 1.2rem; } .icono-bus-dia, .icono-bus-noche { width: 100px; margin-bottom: 0.8rem; } .bus-titulo { font-size: 2.7rem; margin-bottom: 0.8rem; } .bus-subtitulo { font-size: 2rem; margin-bottom: 2.8rem; } /* 1) MÁS ANCHO (afecta a TODO: trigger + panel) */ .bus-select-custom{ width: clamp(18.5rem, 40.5vw, 20.5rem); margin: 0 auto; } /* 2) MÁS ALTO el “botón” selector */ .bus-select-trigger{ padding: 1.6rem 3.5rem; /* ↑ alto + un poco más ancho */ border-radius: 22px; gap: 0.6rem; font-size: clamp(1.8rem, 1.95vw, 2.15rem); display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; } /* 3) Panel más “grande” y consistente con el trigger */ .bus-select-panel{ width: 100%; border-radius: 12px; margin-top: 0.45rem; } /* 4) Opciones (lo que cuelga) más ALTAS */ .bus-option, .bus-suboption{ padding: 1rem 1.35rem; /* ↑ alto + ancho */ font-size: clamp(1.8rem, 1.95vw, 2.15rem); } .bus-suboptions{ padding-left: 0.85rem; /* un poco más de sangría */ } /* 5) Cuando está seleccionado: permite 2 líneas, pero mantiene el “cuerpo” grande */ .bus-select-custom.selected .bus-select-trigger{ padding: 1.15rem 1.35rem; white-space: normal !important; align-items: flex-start; font-size: clamp(1.8rem, 1.95vw, 2.15rem) !important; } .bus-select-custom.selected .bus-select-text{ overflow: visible !important; text-overflow: unset !important; display: block; max-width: 100%; } .decoracion-estela-bus-ida{ top: 25%; height: 70%; right: 0vw; } .decoracion-avion-bus-vuelta{ width: 22vw; top: 0%; left: 0vw; } } /* ───────────────────────────── Landscape bajito (ej: 1280×800) ───────────────────────────── */ @media (min-width: 1200px) and (max-height: 860px) { .icono-bus-dia, .icono-bus-noche { width: 110px; margin-bottom: 0.8rem; } .bus-titulo { font-size: 3.5rem; margin-bottom: 0.8rem; } .bus-subtitulo { font-size: 2.3rem; margin-bottom: 2.8rem; } /* 1) MÁS ANCHO (afecta a TODO: trigger + panel) */ .bus-select-custom{ width: clamp(18.5rem, 40.5vw, 20.5rem); margin: 0 auto; } /* 2) MÁS ALTO el “botón” selector */ .bus-select-trigger{ padding: 1.65rem 2.95rem; /* ↑ alto + un poco más ancho */ border-radius: 18px; gap: 0.6rem; font-size: clamp(1.9rem, 2vw, 2.2rem); display: inline-flex; justify-content: center; align-items: center; gap: 0.45rem; } /* 3) Panel más “grande” y consistente con el trigger */ .bus-select-panel{ width: 100%; border-radius: 18px; margin-top: 0.45rem; } /* 4) Opciones (lo que cuelga) más ALTAS */ .bus-option, .bus-suboption{ padding: 1rem 1.35rem; /* ↑ alto + ancho */ font-size: clamp(1.8rem, 1.95vw, 2.15rem); } .bus-suboptions{ padding-left: 0.85rem; /* un poco más de sangría */ } /* 5) Cuando está seleccionado: permite 2 líneas, pero mantiene el “cuerpo” grande */ .bus-select-custom.selected .bus-select-trigger{ padding: 1.15rem 1.35rem; white-space: normal !important; align-items: flex-start; font-size: clamp(1.8rem, 1.95vw, 2.15rem) !important; } .bus-select-custom.selected .bus-select-text{ overflow: visible !important; text-overflow: unset !important; display: block; max-width: 100%; } } /* ------------------------------ ---------------- 6. SECCIÓN CONFIRMAR ASISTENCIA ---------------- --------------------------------*/ .confirmacion { background: #c7dbc6; background-color: #c7dbc6; margin-top: 3rem; padding: 6vh 5vw 5vh; display: flex; justify-content: center; text-align: center; clip-path: polygon( 0 0, 48% 0, 50% 1.2rem, 52% 0, 100% 0, 100% 100%, 0 100% ); } .confirmacion-box { width: 100%; max-width: 700px; } .confirmacion-titulo { font-size: clamp(2.6rem, 5.4vw, 3.6rem); color: #0d3b3b; font-family: 'Alan Sans', sans-serif; margin-bottom: 0.6rem; } .confirmacion-subtitulo { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 2rem; color: #0d3b3b; font-family: 'Alan Sans Light', sans-serif; } .confirmacion-opciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 6rem; font-size: clamp(1.5rem, 3.2vw, 1.9rem); color: #0d3b3b; font-family: 'Alan Sans', sans-serif; margin: 2.5rem 0; } .confirmacion-opciones input { margin-right: 0.6rem; transform: scale(1.5); } #form-asistencia input, #form-asistencia textarea { width: 100%; padding: 0.9rem 1rem; border-radius: 12px; border: none; margin-bottom: 1rem; font-size: clamp(1.2rem, 2.3vw, 1.6rem); font-family: 'Alan Sans', sans-serif; resize: none; box-sizing: border-box; } #form-asistencia textarea { height: 7.5rem; } .btn-confirmar { background-color: #0d3b3b; color: white; padding: 1.5rem 2.8rem; border-radius: 14px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); border: none; cursor: pointer; text-decoration: none; font-family: 'Alan Sans', sans-serif; display: inline-block; box-shadow: 0 3px 8px rgba(0,0,0,0.12); transition: background-color 0.2s ease; margin-top: 2rem; margin-bottom: 1.5rem; width: clamp(220px, 50vw, 320px); text-align: center; } .btn-confirmar:hover { background-color: #0a2f2f; } /* ───────────────────────────── Móvil < 400px ───────────────────────────── */ @media (max-width: 400px) { .confirmacion{ background: #c7dbc6; margin-top: 0; padding: 1.4rem 5vw 1.2rem; /* menos alto, más estable que vh */ clip-path: polygon( 0 0, 48% 0, 50% 0.55rem, 52% 0, 100% 0, 100% 100%, 0 100% ); } .confirmacion-box{ width: 100%; max-width: 420px; /* mantiene “cuadrado” sin estirar demasiado */ margin: 0 auto; } .confirmacion-titulo{ font-size: 0.95rem; margin: 0.6rem 0 0.35rem; } .confirmacion-subtitulo{ font-size: 0.7rem; margin: 0.35rem 0 0.6rem; line-height: 1.25; } .confirmacion-opciones{ gap: 0.9rem; font-size: clamp(0.7rem, 2.2vw, 0.82rem); margin: 0.6rem 0 0.8rem; } .confirmacion-opciones input{ transform: scale(0.9); /* 0.5 lo deja enano */ margin-right: 0.35rem; } /* ✅ CLAVE: más ancho para que no crezca en vertical */ #form-asistencia input, #form-asistencia textarea{ width: 100%; max-width: 80%; /* antes 75% = demasiado estrecho */ margin-left: auto; margin-right: auto; font-size: clamp(0.7rem, 2.5vw, 0.82rem); padding: 0.5rem 0.85rem; border-radius: 10px; margin-bottom: 0.45rem; box-sizing: border-box; } #form-asistencia textarea{ height: 4.6rem; /* un pelín menos alto */ } .btn-confirmar{ min-width: 0; width: clamp(7rem, 26vw, 8rem); padding: 0.65rem 4.2rem; font-size: clamp(0.72rem, 2.4vw, 0.85rem); border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* ───────────────────────────── <400 pero MUY ALTO (ej: 390×844) ───────────────────────────── */ @media (max-width: 400px) and (max-aspect-ratio: 1/2) { /* Caja más “cuadrada” y colocada arriba */ .confirmacion{ background: #c7dbc6; margin-top: 0; padding: 1.15rem 5vw 1.1rem; clip-path: polygon( 0 0, 48% 0, 50% 0.55rem, 52% 0, 100% 0, 100% 100%, 0 100% ); } .confirmacion-box{ width: 100%; max-width: 420px; margin: 0 auto; } .confirmacion-opciones{ gap: 0.9rem; font-size: clamp(0.7rem, 2.2vw, 0.82rem); margin: 0.6rem 0 1.3rem; } .confirmacion-titulo { font-size: 1.05rem; margin-top: 0.95rem; } .confirmacion-subtitulo { font-size: 0.8rem; margin-bottom: 0.8rem; margin-top: 0.2rem; } /* ✅ Layout del form (sin cambiar letra) */ #form-asistencia input, #form-asistencia textarea{ width: 100%; max-width: 80%; margin-left: auto; margin-right: auto; /* NO tocamos font-size */ padding: 0.5rem 0.85rem; border-radius: 10px; margin-bottom: 0.45rem; box-sizing: border-box; } #form-asistencia textarea{ height: 4.6rem; } .btn-confirmar{ min-width: 0; width: clamp(7rem, 26vw, 8rem); padding: 0.65rem 4.45rem; border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* Móvil <400 ALTO MEDIO (ej: 360×740) */ @media (max-width: 400px) and (min-aspect-ratio: 1/2.1) and (max-aspect-ratio: 1/1.9) { .confirmacion{ background: #c7dbc6; padding: 1.rem 5vw 1.35rem; } #form-asistencia input, #form-asistencia textarea{ border-radius: 8px; max-width: 82%; } .btn-confirmar{ border-radius: 10px; padding: 0.65rem 4.3rem; } } /* Galaxy Z Fold 5 / móviles muy estrechos y altos (ej. 344x882 ≈ 0.39) */ @media (max-width: 360px) and (max-aspect-ratio: 9/20) { /* (Dejo tu letra tal cual, no la toco) */ .confirmacion-titulo { font-size: 0.9rem; margin-top: 1rem; } .confirmacion-subtitulo { font-size: 0.75rem; margin-bottom: 0.8rem; margin-top: 0.4rem; } /* ✅ Contenedor más “cuadrado” */ .confirmacion{ background: #c7dbc6; margin-top: 0; padding: 1.05rem 5vw 0.95rem; clip-path: polygon( 0 0, 48% 0, 50% 0.55rem, 52% 0, 100% 0, 100% 100%, 0 100% ); } .confirmacion-box{ width: 100%; max-width: 380px; /* un poco menos para que no “estire” */ margin: 0 auto; } .confirmacion-opciones{ gap: 0.9rem; margin: 0.55rem 0 1.15rem; /* compacta y cuadra */ } /* ✅ Form más cuadrado */ #form-asistencia input, #form-asistencia textarea{ width: 100%; max-width: 82%; /* un pelín más ancho para bajar altura total */ margin-left: auto; margin-right: auto; padding: 0.5rem 0.85rem; border-radius: 8px; margin-bottom: 0.45rem; box-sizing: border-box; } #form-asistencia textarea{ height: 4.4rem; } .btn-confirmar{ min-width: 0; width: clamp(7rem, 26vw, 8rem); padding: 0.55rem 3.7rem; border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* ───────────────────────────── Móvil 400-767px ───────────────────────────── */ @media (min-width: 401px) and (max-width: 767px) { .confirmacion{ background: #c7dbc6; margin-top: 0rem; padding: 1.8rem 5vw 1.7rem; clip-path: polygon( 0 0, 48% 0, 50% 0.65rem, 52% 0, 100% 0, 100% 100%, 0 100% ); } .confirmacion-box{ width: 100%; max-width: 520px; margin: 0 auto; } .confirmacion-titulo{ font-size: 1.05rem; margin: 0.4rem 0 0.45rem; } .confirmacion-subtitulo{ font-size: 0.8rem; margin: 0.45rem 0 0.75rem; line-height: 1.25; } .confirmacion-opciones{ gap: 1.2rem; font-size: clamp(0.8rem, 2.2vw, 0.95rem); margin: 0.75rem 0 1.2rem; } .confirmacion-opciones input{ transform: scale(0.9); margin-right: 0.4rem; } #form-asistencia input, #form-asistencia textarea{ width: 100%; max-width: 82%; margin-left: auto; margin-right: auto; font-size: clamp(0.8rem, 2.2vw, 0.95rem); padding: 0.6rem 0.95rem; border-radius: 10px; margin-bottom: 0.5rem; box-sizing: border-box; } #form-asistencia textarea{ height: 5.2rem; } .btn-confirmar{ width: clamp(7.6rem, 26vw, 8.6rem); padding: 0.6rem 4.38rem; font-size: clamp(0.8rem, 2.1vw, 0.95rem); border-radius: 10px; margin-top: 0.7rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* Ajuste especial: pantallas 401–767 con poca altura (Surface Duo 540×720) */ @media (min-width: 401px) and (max-width: 767px) and (max-height: 740px) { .confirmacion-titulo { font-size: 1.4rem; margin-top: 1.5rem; } .confirmacion-subtitulo { font-size: 1rem; margin-top: 1rem; margin-bottom: 1rem; } .btn-confirmar{ width: clamp(7.7rem, 26vw, 8.7rem); padding: 0.72rem 4.83rem; font-size: clamp(0.85rem, 2.2vw, 1rem); border-radius: 10px; margin-top: 0.7rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* ───────────────────────────── Tablet 768–1023px ───────────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .confirmacion { padding: 3vh 6vw 4vh; margin-top: 1rem; } .confirmacion-titulo { font-size: 2rem; margin-top: 1.8rem; } .confirmacion-subtitulo { font-size: 1.5rem; margin-top: 1.2rem; margin-bottom: 1.4rem; } .confirmacion-opciones { gap: 3rem; font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin: 1.8rem 0; } .confirmacion-opciones input { transform: scale(1.3); margin-right: 0.6rem; } #form-asistencia input, #form-asistencia textarea { font-size: clamp(1rem, 2.5vw, 1.2rem); padding: 0.9rem 1.8rem; border-radius: 12px; max-width: 85%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 1rem; } #form-asistencia textarea { height: 7.2rem; } .btn-confirmar{ width: clamp(11rem, 19vw, 15rem); padding: 1.45rem 8.5rem; font-size: clamp(1.4rem, 1.8vw, 1.7rem); border-radius: 20px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ---------------------- TABLET 768px–1024px (SurfacePro7) ------------------------- */ @media (min-width: 768px) and (max-width: 1023px) and (min-aspect-ratio: 2/3) and (min-height: 1200px){ #form-asistencia input, #form-asistencia textarea { font-size: clamp(1rem, 2.5vw, 1.2rem); padding: 0.9rem 1.8rem; border-radius: 12px; max-width: 85%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 1rem; } #form-asistencia textarea { height: 7.2rem; } .confirmacion-titulo { font-size: 2.4rem; margin-top: 1.8rem; } .confirmacion-subtitulo { font-size: 1.8rem; margin-top: 1.2rem; margin-bottom: 1.4rem; } .btn-confirmar{ width: clamp(11rem, 19vw, 15rem); padding: 1.45rem 8.5rem; font-size: clamp(1.4rem, 1.8vw, 1.7rem); border-radius: 20px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ------------------------------- 768px–1024px (Asus Zenbook Fold) -------------------------------- */ @media (min-width: 840px) and (max-width: 920px) and (min-height: 1200px) { .confirmacion-titulo { font-size: 2.3rem; margin-top: 1.8rem; } .confirmacion-subtitulo { font-size: 1.7rem; margin-top: 1.2rem; margin-bottom: 1.4rem; } } /* ───────────────────────────── Pantallas 1024–1210px ───────────────────────────── */ @media (min-width: 1024px) and (max-width: 1210px) { .confirmacion { padding: 4vh 6vw 4.5vh; margin-top: 1.5rem; } .confirmacion-titulo { font-size: 2.7rem; margin-top: 2rem; } .confirmacion-subtitulo { font-size: 2rem; margin-top: 1.2rem; margin-bottom: 1.6rem; } .confirmacion-opciones { gap: 3.5rem; font-size: clamp(1.4rem, 2.7vw, 1.7rem); margin: 2rem 0; } .confirmacion-opciones input { transform: scale(1.7); margin-right: 0.6rem; } #form-asistencia input, #form-asistencia textarea { font-size: clamp(1.2rem, 2.6vw, 1.5rem); padding: 1.4rem 2.8rem; border-radius: 18px; max-width: 95%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 1.2rem; } #form-asistencia textarea { height: 10.5rem; } .btn-confirmar{ width: clamp(11rem, 19vw, 15rem); padding: 1.75rem 10.3rem; font-size: clamp(1.8rem, 1.95vw, 2.15rem); border-radius: 22px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ───────────────────────────── Landscape bajito (ej: 1280×800) ───────────────────────────── */ @media (min-width: 1200px) and (max-height: 860px) { .confirmacion-titulo { font-size: 3.5rem; margin-top: 2rem; } .confirmacion-subtitulo { font-size: 2.3rem; margin-top: 1.2rem; margin-bottom: 1.6rem; } .confirmacion-opciones { gap: 3.5rem; font-size: clamp(1.4rem, 2.7vw, 1.7rem); margin: 2rem 0; } .confirmacion-opciones input { transform: scale(1.7); margin-right: 0.6rem; } #form-asistencia input, #form-asistencia textarea { font-size: clamp(1.2rem, 2.6vw, 1.5rem); padding: 1.4rem 3.8rem; border-radius: 18px; max-width: 95%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 1rem; } #form-asistencia textarea { height: 11.5rem; } .btn-confirmar{ width: clamp(11rem, 19vw, 15rem); padding: 1.8rem 10.3rem; font-size: clamp(1.8rem, 1.95vw, 2.15rem); border-radius: 18px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } } /* ------------------------------ ---------------- 7. SECCIÓN REGALOS Y DESPEDIDA ---------------- --------------------------------*/ .regalos { background-color: white; padding: 6vh 5vw 4vh; text-align: center; position: relative; overflow: hidden; color: #0d3b3b; font-family: 'Alan Sans', sans-serif; } .decoracion-estela-regalos { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 70%; width: auto; pointer-events: none; z-index: 1; } .decoracion-avion-regalos { position: absolute; right: -5px; bottom: 70px; width: 300px; height: auto; pointer-events: none; z-index: 1; } .regalos-contenido { position: relative; z-index: 2; } .regalos-contenido { max-width: 90ch; margin: 0 auto; } .icono-ramo { width: clamp(70px, 8vw, 100px); height: auto; margin-bottom: 1.4rem; } .regalos-titulo { font-size: clamp(2.6rem, 5.4vw, 3.6rem); margin-top: 0.8rem; margin-bottom: 1.2rem; letter-spacing: 0.5px; } .regalos-texto { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 2.5rem; line-height: 1.5; font-family: 'Alan Sans Light', sans-serif; } .btn-datos { background-color: #0d3b3b; color: white; padding: 1.5rem 2.8rem; border-radius: 14px; text-decoration: none; font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-family: 'Alan Sans', sans-serif; display: inline-block; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease; width: clamp(210px, 50vw, 310px); text-align: center; } .btn-datos:hover { background-color: #0a2f2f; } .despedida { margin-top: 7vh; padding-bottom: 4vh; } .despedida-mensaje { font-family: 'Royalty Free', cursive; font-size: clamp(5.8rem, 9vw, 7.4rem); margin-bottom: 0.5rem; margin-top: 2rem; color: #0d3b3b; } .despedida-nombres { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: bold; color: #0d3b3b; font-family: 'Alan Sans', sans-serif; margin-bottom: 0.5rem; } .btn-datos { border: none; cursor: pointer; } /* POPUP DATOS BANCARIOS */ .popup-overlay { position: fixed; inset: 0; background: rgba(13, 59, 59, 0.55); display: none; justify-content: center; align-items: center; z-index: 1000; } .popup-overlay.activo { display: flex; } .popup-datos { background: #ffffff; color: #0d3b3b; padding: 2.8rem 2.4rem; border-radius: 24px; width: min(92%, 440px); text-align: center; position: relative; font-family: 'Alan Sans', sans-serif; } .popup-datos h3 { font-size: 1.6rem; margin-bottom: 0.8rem; } .popup-datos p { font-size: 1rem; margin-bottom: 1.8rem; font-family: 'Alan Sans Light', sans-serif; } .popup-cerrar { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: #0d3b3b; } .iban-box { background: #f4f7f7; padding: 1.6rem; border-radius: 16px; } .iban { display: block; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 1.4rem; font-size: 1.25rem; } .btn-copiar { background: #0d3b3b; color: white; border: none; padding: 0.9rem 2.4rem; border-radius: 28px; font-size: 1.2rem; font-family: 'Alan Sans', sans-serif; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .btn-copiar:hover { background-color: #0a2f2f; transform: translateY(-1px); } /* ───────────────────────────── Móvil < 400px ───────────────────────────── */ @media (max-width: 400px) { .regalos { padding: 2.1vh 4vw 2.2vh; } .icono-ramo { width: 48px; margin: 0.5rem auto 0.7rem; display: block; } .regalos-titulo { font-size: 0.95rem; margin-top: 0.4rem; margin-bottom: 0.8rem; } .regalos-texto { font-size: 0.7rem; margin-bottom: 1rem; line-height: 1.4; } .btn-datos{ min-width: 0; width: clamp(7rem, 26vw, 8rem); padding: 0.65rem 4.2rem; font-size: clamp(0.72rem, 2.4vw, 0.85rem); border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } .despedida{ margin-top: 1.4rem; /* rem estable, no “salta” */ padding-bottom: 1.4rem; } .despedida-mensaje { font-size: clamp(2.7rem, 6vw, 3.7rem); margin-bottom: 0.5rem; margin-top: 0.8rem; } .despedida-nombres { font-size: 0.7rem; margin-bottom: 1rem; } .decoracion-estela-regalos { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 40%; width: auto; pointer-events: none; z-index: 1; } .decoracion-avion-regalos { position: absolute; right: -2vw; bottom: 6vh; width: 28vw; height: auto; pointer-events: none; z-index: 1; } .popup-overlay{ padding: 4vh 5vw; } .popup-datos{ width: 92vw; max-width: 92vw; padding: 1.25rem 1.1rem; } .popup-cerrar{ top: 0.6rem; right: 0.7rem; font-size: 1.25rem; } .popup-datos h3{ font-size: 1.05rem; margin-bottom: 0.45rem; } .popup-datos p{ font-size: 0.75rem; margin-bottom: 1rem; line-height: 1.25; } .iban-box{ padding: 0.85rem; border-radius: 8px; } .iban{ font-size: 0.82rem; letter-spacing: 0.06em; margin-bottom: 0.8rem; word-break: break-word; } .btn-copiar{ width: 40%; padding: 0.65rem 0.8rem; font-size: 0.8rem; } .btn-copiar:hover{ transform: none; } } /* ───────────────────────────── Móvil <400 pero MUY ALTO (ej: 390×844) ───────────────────────────── */ @media (max-width: 400px) and (max-aspect-ratio: 1/2) { .icono-ramo { width: 50px; margin-bottom: 0.6rem; } .regalos-titulo { font-size: 1.05rem; margin-top: 0.4rem; margin-bottom: 0.8rem; } .regalos-texto { font-size: 0.8rem; margin-bottom: 1rem; line-height: 1.4; } .btn-datos{ min-width: 0; width: clamp(7rem, 26vw, 8rem); padding: 0.65rem 4.45rem; border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* Móvil <400 ALTO MEDIO (ej: 360×740) */ @media (max-width: 400px) and (min-aspect-ratio: 1/2.1) and (max-aspect-ratio: 1/1.9) { .btn-datos{ border-radius: 10px; padding: 0.65rem 4.3rem; } } /* Galaxy Z Fold 5 / móviles muy estrechos y altos (ej. 344x882 ≈ 0.39) */ @media (max-width: 360px) and (max-aspect-ratio: 9/20) { .icono-ramo { width: 48px; margin-bottom: 0.6rem; } .regalos-titulo { font-size: 0.9rem; margin-top: 0.4rem; margin-bottom: 0.8rem; } .regalos-texto { font-size: 0.75rem; margin-bottom: 1rem; line-height: 1.4; } .btn-datos{ min-width: 0; width: clamp(7rem, 26vw, 8rem); padding: 0.55rem 3.7rem; border-radius: 10px; margin-top: 0.5rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } } /* ───────────────────────────── 401–767px ───────────────────────────── */ @media (min-width: 401px) and (max-width: 767px) { /* REGALOS: menos alto (sin tocar fuentes) */ .regalos{ padding: 1.35rem 5vw 1.25rem; /* ↓ antes 2rem/2rem */ position: relative; overflow: hidden; } .icono-ramo{ width: 58px; margin-bottom: 0.75rem; /* ↓ antes 1.1rem */ } .regalos-titulo{ font-size: 1.15rem; margin-top: 0.35rem; /* ↓ antes 0.5rem */ margin-bottom: 0.75rem; /* ↓ antes 1rem */ } .regalos-texto{ font-size: 0.85rem; margin-bottom: 1rem; /* ↓ antes 1.4rem */ line-height: 1.45; } .btn-datos{ width: clamp(7.6rem, 26vw, 8.6rem); padding: 0.6rem 4.38rem; font-size: clamp(0.8rem, 2.1vw, 0.95rem); border-radius: 10px; margin-top: 0.7rem; margin-bottom: 0.5rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } /* DESPEDIDA: compacta */ .despedida{ margin-top: 1.2rem; /* ↓ antes 2.2rem */ padding-bottom: 1.1rem; /* ↓ antes 2rem */ position: relative; overflow: hidden; } .despedida-mensaje{ font-size: clamp(3.2rem, 9vw, 4rem); /* ✅ más grande y legible */ margin-top: 0.15rem; /* mantiene compacto */ margin-bottom: 0.25rem; line-height: 1.03; } .despedida-nombres{ font-size: 0.85rem; margin-top: 0.45rem; } .decoracion-estela-regalos { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 40%; width: auto; pointer-events: none; z-index: 1; } .decoracion-avion-regalos { position: absolute; right: -2vw; bottom: 3vh; width: 28vw; height: auto; pointer-events: none; z-index: 1; } .popup-overlay{ padding: 1.6rem 1.6rem; } .popup-datos{ width: min(78vw, 34rem); max-width: 78vw; padding: 1.35rem 1.25rem; border-radius: 12px; } .popup-cerrar{ top: 0.75rem; right: 0.85rem; font-size: 1.35rem; } .popup-datos h3{ font-size: 1.2rem; margin-bottom: 0.6rem; } .popup-datos p{ font-size: 0.95rem; margin-bottom: 1.1rem; line-height: 1.35; } .iban-box{ padding: 0.95rem; border-radius: 10px; } .iban{ font-size: 0.95rem; letter-spacing: 0.06em; margin-bottom: 0.9rem; word-break: break-word; } .btn-copiar{ width: min(16rem, 55%); padding: 0.75rem 1rem; font-size: 0.95rem; } .btn-copiar:hover{ transform: none; } } /* Ajuste especial: pantallas 401–767 con poca altura (Surface Duo 540×720) */ @media (min-width: 401px) and (max-width: 767px) and (max-height: 740px) { .icono-ramo { width: 58px; margin-bottom: 1.3rem; } .regalos-titulo { font-size: 1.4rem; margin-top: 0.7rem; margin-bottom: 1.2rem; } .regalos-texto { font-size: 1rem; margin-bottom: 1.4rem; line-height: 1.45; } .btn-datos{ width: clamp(7.7rem, 26vw, 8.7rem); padding: 0.72rem 4.83rem; font-size: clamp(0.85rem, 2.2vw, 1rem); border-radius: 10px; margin-top: 0.7rem; margin-bottom: 0.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.1; white-space: nowrap; } .popup-overlay{ padding: 1.6rem 1.6rem; } .popup-datos{ width: min(78vw, 34rem); max-width: 78vw; padding: 1.35rem 1.25rem; border-radius: 12px; } .popup-cerrar{ top: 0.75rem; right: 0.85rem; font-size: 1.35rem; } .popup-datos h3{ font-size: 1.4rem; margin-bottom: 0.6rem; } .popup-datos p{ font-size: 0.95rem; margin-bottom: 1.1rem; line-height: 1.35; } .iban-box{ padding: 0.95rem; border-radius: 10px; } .iban{ font-size: 1.15rem; letter-spacing: 0.06em; margin-bottom: 0.9rem; word-break: break-word; } .btn-copiar{ width: 40%; padding: 0.65rem 0.8rem; font-size: 0.8rem; } .btn-copiar:hover{ transform: none; } .despedida { margin-top: 3vh; padding-bottom: 2vh; } .despedida-mensaje { font-size: clamp(4rem, 7vw, 5rem); margin-bottom: 0.8rem; margin-top: 0.5rem; } .despedida-nombres { font-size: clamp(0.85rem, 2.5vw, 1.2rem); margin-bottom: 1rem; } } /* ───────────────────────────── Móvil 768-1023px ───────────────────────────── */ @media (min-width: 768px) and (max-width: 1023px) { .regalos { padding: 5vh 7vw 5vh; } .icono-ramo { width: 85px; margin-bottom: 1.3rem; } .regalos-titulo { font-size: 2rem; margin-top: 0.7rem; margin-bottom: 1.2rem; } .regalos-texto { font-size: 1.5rem; margin-bottom: 2rem; line-height: 1.5; } .btn-datos { font-size: clamp(1rem, 2.2vw, 1.3rem); padding: 1rem 2.2rem; border-radius: 12px; } .despedida { margin-top: 6vh; padding-bottom: 4vh; } .despedida-mensaje { font-size: clamp(6rem, 10vw, 7.5rem); margin-bottom: 0.5rem; margin-top: 0.5rem; } .despedida-nombres { font-size: clamp(1.3rem, 3.1vw, 1.7rem); margin-bottom: 1rem; } .btn-datos{ width: clamp(11rem, 19vw, 15rem); padding: 1.45rem 8.5rem; font-size: clamp(1.4rem, 1.8vw, 1.7rem); border-radius: 20px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } .decoracion-estela-regalos { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 40%; width: auto; pointer-events: none; z-index: 1; } .decoracion-avion-regalos { position: absolute; right: -2vw; bottom: 6vh; width: 28vw; height: auto; pointer-events: none; z-index: 1; } .popup-overlay{ padding: 1.6rem 1.6rem; } .popup-datos{ width: 82vw; max-width: 42rem; padding: 2.35rem 1.8rem; border-radius: 18px; } .popup-datos h3{ font-size: 2.5rem; margin-bottom: 1.15rem; } .popup-datos p{ font-size: 1.12rem; margin-bottom: 1.55rem; line-height: 1.45; } .iban-box{ width: 100%; padding: 1.6rem; border-radius: 16px; box-sizing: border-box; } .iban{ font-size: 1.95rem; margin-bottom: 1.25rem; letter-spacing: 0.06em; word-break: break-word; } .btn-copiar{ width: min(18rem, 80%); padding: 1.3rem 1.55rem; font-size: 1.65rem; border-radius: 999px; } .btn-copiar:hover{ transform: none; } } /* ---------------------- TABLET 768px–1024px (SurfacePro7) ------------------------- */ @media (min-width: 768px) and (max-width: 1023px) and (min-aspect-ratio: 2/3) and (min-height: 1200px){ .icono-ramo { width: 105px; margin-bottom: 1.3rem; } .regalos-titulo { font-size: 2.4rem; margin-top: 0.7rem; margin-bottom: 1.2rem; } .regalos-texto { font-size: 1.8rem; margin-bottom: 2rem; line-height: 1.5; } } /* ------------------------------- 768px–1024px (Asus Zenbook Fold) -------------------------------- */ @media (min-width: 840px) and (max-width: 920px) and (min-height: 1200px) { .icono-ramo { width: 105px; margin-bottom: 1.3rem; } .regalos-titulo { font-size: 2.3rem; margin-top: 0.7rem; margin-bottom: 1.2rem; } .regalos-texto { font-size: 1.7rem; margin-bottom: 2rem; line-height: 1.5; } } /* ───────────────────────────── Móvil 1024-1210px ───────────────────────────── */ @media (min-width: 1024px) and (max-width: 1210px) { .regalos { padding: 5.5vh 8vw 5.5vh; } .icono-ramo { width: 100px; margin-bottom: 1.5rem; } .regalos-titulo { font-size: 2.7rem; margin-top: 1rem; margin-bottom: 1.4rem; } .regalos-texto { font-size: 2rem; margin-bottom: 2.4rem; line-height: 1.6; } .btn-datos{ width: clamp(11rem, 19vw, 15rem); padding: 1.75rem 10.3rem; font-size: clamp(1.8rem, 1.95vw, 2.15rem); border-radius: 22px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } .despedida { margin-top: 6.5vh; padding-bottom: 4.5vh; } .despedida-mensaje { font-size: clamp(5.4rem, 8vw, 6.8rem); margin-bottom: 1rem; margin-top: 1.8rem; } .despedida-nombres { font-size: clamp(1.2rem, 3vw, 1.6rem); margin-bottom: 1rem; } .decoracion-estela-regalos { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 50%; width: auto; pointer-events: none; z-index: 1; } .decoracion-avion-regalos { position: absolute; right: -2vw; bottom: 8vh; width: 25vw; height: auto; pointer-events: none; z-index: 1; } .popup-overlay{ padding: 1.6rem 1.6rem; } .popup-datos{ width: 92vw; max-width: 44rem; padding: 2.35rem 1.8rem; border-radius: 18px; } .popup-datos h3{ font-size: 2.5rem; margin-bottom: 1.15rem; } .popup-datos p{ font-size: 1.12rem; margin-bottom: 1.55rem; line-height: 1.45; } .iban-box{ width: 100%; padding: 1.6rem; border-radius: 16px; box-sizing: border-box; } .iban{ font-size: 1.95rem; margin-bottom: 1.25rem; letter-spacing: 0.06em; word-break: break-word; } .btn-copiar{ width: min(18rem, 80%); padding: 1.3rem 1.55rem; font-size: 1.65rem; border-radius: 999px; } .btn-copiar:hover{ transform: none; } } /* ───────────────────────────── Landscape bajito (ej: 1280×800) ───────────────────────────── */ @media (min-width: 1200px) and (max-height: 860px) { .icono-ramo { width: 110px; margin-bottom: 1.5rem; } .regalos-titulo { font-size: 3.5rem; margin-top: 1rem; margin-bottom: 1.4rem; } .regalos-texto { font-size: 2.3rem; margin-bottom: 2.4rem; line-height: 1.6; } .btn-datos{ width: clamp(11rem, 19vw, 15rem); padding: 1.8rem 10.3rem; font-size: clamp(1.8rem, 1.95vw, 2.15rem); border-radius: 18px; margin-top: 1.5rem; margin-bottom: 1.2rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1.15; white-space: nowrap; } .decoracion-estela-regalos { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 50%; width: auto; pointer-events: none; z-index: 1; } .decoracion-avion-regalos { position: absolute; right: -2vw; bottom: 7vh; width: 25vw; height: auto; pointer-events: none; z-index: 1; } .popup-overlay{ padding: 1.6rem 1.6rem; } .popup-datos{ width: 92vw; max-width: 44rem; padding: 2.35rem 1.8rem; border-radius: 18px; } .popup-datos h3{ font-size: 2.5rem; margin-bottom: 1.15rem; } .popup-datos p{ font-size: 1.12rem; margin-bottom: 1.55rem; line-height: 1.45; } .iban-box{ width: 100%; padding: 1.6rem; border-radius: 16px; box-sizing: border-box; } .iban{ font-size: 1.95rem; margin-bottom: 1.25rem; letter-spacing: 0.06em; word-break: break-word; } .btn-copiar{ width: min(18rem, 80%); padding: 1.3rem 1.55rem; font-size: 1.65rem; border-radius: 999px; } .btn-copiar:hover{ transform: none; } } .modal { position: fixed; inset: 0; display: none; z-index: 9999; } .modal.activo { display: block; } .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .modal-contenido { position: relative; max-width: 420px; margin: 15vh auto; background: #fff; padding: 2rem; border-radius: 16px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } #modal-texto { font-size: 1.1rem; margin-bottom: 1.5rem; color: #0d3b3b; }