/** * Estilos globales del sitio público (Light DOM). El interior de cada sección * lo estilan los componentes en su Shadow DOM; aquí van cabecera, pie, * espaciados y tokens base. Los colores usan variables --site-* de /theme.css * con respaldo por si la hoja del tema no cargara. */ :root { --site-max: 1120px; /* --site-font y los tokens de color los define /theme.css (editable desde el panel). Aquí solo el respaldo en las propiedades que los consumen, por si esa hoja no cargara. */ } * { box-sizing: border-box; } /* La cabecera es fija (sticky); al saltar a un ancla, desplazamos un poco más para que el título de la sección no quede oculto bajo ella. */ html { scroll-behavior: smooth; scroll-padding-top: 150px; } @media (max-width: 980px) { html { scroll-padding-top: 105px; } } body { margin: 0; font-family: var(--site-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); color: var(--site-text, #143029); background: var(--site-bg, #f7faf9); line-height: 1.6; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img { max-width: 100%; height: auto; } /* Tipografía por rol también en contenido Light DOM (p. ej. cuerpo del blog). Los componentes aplican estas mismas variables en su Shadow DOM. */ h1, h2 { font-family: var(--site-font-title, inherit); } h3, h4, h5, h6 { font-family: var(--site-font-subtitle, inherit); } a { color: var(--site-primary, #0a7d72); } /* --- Enlace de salto accesible --- */ .skip-link { position: absolute; left: -999px; top: .5rem; background: var(--site-primary, #0a7d72); color: var(--site-primary-ink, #fff); padding: .6rem 1rem; border-radius: 8px; z-index: 100; } .skip-link:focus { left: .5rem; } /* La cabecera () y el pie () encapsulan su estilo en Shadow DOM; aquí solo quedan los estilos del Light DOM (cuerpo y secciones). */ /* --- Secciones --- */ /* El desplazamiento al saltar a un ancla lo aporta SOLO `scroll-padding-top` del (arriba). No repetir aquí `scroll-margin-top`: ambos se sumarían y dejarían un gran hueco en blanco bajo la cabecera al pulsar un enlace. */ /* Relleno superior reducido ~30% (menos hueco arriba de cada bloque); el inferior se mantiene. top = clamp(1.75,4.2vw,3.15) ≈ 70% de 2.5/6vw/4.5. */ .site-section { padding: clamp(1.75rem, 4.2vw, 3.15rem) 0 clamp(2.5rem, 6vw, 4.5rem); } .site-section--hero { padding-top: 0; } /* ── Aparición al hacer scroll ──────────────────────────────────────────────── Cada bloque aparece con un leve desvanecido + desplazamiento hacia arriba a medida que entra en pantalla (sensación de movimiento al bajar el scroll). Solo se activa si el JS marca el con «.reveal-on» → sin JS el contenido se ve siempre. Respeta prefers-reduced-motion (quien lo prefiera, no ve animación). */ /* Cada bloque marcado como «reveal-item» (por el JS; excluye el hero y el carrusel, que ya se ven al cargar) parte oculto y desplazado, y se revela al entrar en pantalla. La regla «.reveal-in» gana en especificidad (clase marcadora, sin :not). */ .reveal-on .reveal-item { opacity: 0; transform: translateY(100px) scale(.95); /* Fundido de transparencia + desplazamiento amplio + leve zoom, con curva ease-out muy suave y duración larga para una aparición MUY marcada al bajar el scroll. */ transition: opacity 1.6s cubic-bezier(.22, .61, .36, 1), transform 1.8s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } /* Al revelarse: se resetea el desplazamiento Y SE QUITA el will-change. Mantener will-change:transform tras la animación deja a la sección como «bloque contenedor» de los position:fixed descendientes (p. ej. el lightbox de la galería), que entonces no cubre toda la pantalla y se corta con el bloque de abajo. Con will-change:auto el lightbox vuelve a anclarse al viewport y la imagen se ve completa y por encima de todo. */ .reveal-on .reveal-item.reveal-in { opacity: 1; transform: none; will-change: auto; } /* Para quien prefiere menos movimiento: desplazamiento notorio igualmente (el sitio quiere que la aparición se vea claramente), sin el zoom. */ @media (prefers-reduced-motion: reduce) { .reveal-on .reveal-item { transform: translateY(72px); transition: opacity 1.3s ease, transform 1.5s ease; } /* También aquí se debe resetear al revelarse (si no, el bloque queda desplazado permanentemente y el último bloque se solapa con el footer). */ .reveal-on .reveal-item.reveal-in { transform: none; will-change: auto; } } /* Bloque de marcas: menos aire arriba y abajo (≈ mitad del padding de sección). La 2.ª regla gana en especificidad sobre «slideshow + section» (que pone 6rem arriba cuando el bloque va justo debajo del carrusel). */ .site-section--marcas { padding: clamp(.9rem, 2.1vw, 1.55rem) 0; } .site-section--slideshow + .site-section.site-section--marcas { padding-top: clamp(.9rem, 2.1vw, 1.55rem); } /* En móvil (celular) el bloque de marcas NO se muestra: debajo de la cabecera va directamente el bloque de productos. */ @media (max-width: 767px) { .site-section--marcas { display: none; } } /* El buscador es una barra compacta pegada al header y al slideshow (sin hueco). */ .site-section--buscador { padding: 0; } /* El slideshow va pegado arriba y abajo (sin hueco con el bloque siguiente). */ .site-section--slideshow { padding-top: 0; padding-bottom: 0; background: transparent; } /* La sección que sigue al carrusel se acerca (menos hueco): el carrusel ya trae su propio aire, así que el bloque siguiente (p. ej. marcas) no necesita los 72px completos de relleno superior. */ .site-section--slideshow + .site-section { padding-top: 4.2rem; } /* El buscador va PEGADO al carrusel (sin franja blanca). */ .site-section--slideshow + .site-section--buscador { padding-top: 0; } /* Ocultar el carrusel de inicio en móvil cuando el tenant activa carousel_hide_mobile. */ @media (max-width: 760px) { .site-section--slideshow.s--hide-mobile { display: none !important; } } /* «Personaliza tu viaje» es una banda a sangre completa: su propio relleno interno (oscuro) da el espaciado, así que la sección no añade margen blanco. */ .site-section--personaliza { padding: 0; } /* Newsletter: sin relleno de sección (arriba/abajo). La banda del propio bloque ya trae su relleno interno, así que no debe quedar espacio blanco alrededor. */ .site-section--newsletter { padding: 0; } /* Libro de Reclamaciones: sin relleno de sección; el propio bloque aporta su espacio (y, si tiene color de fondo, pinta la banda a todo el ancho sin huecos blancos). */ .site-section--libro { padding: 0; } /* Reserva tu viaje (citas): banda a sangre completa, sin hueco con el bloque de ARRIBA (y sin franja blanca propia). El bloque de ABAJO conserva su relleno superior habitual para que respire. El propio bloque aporta su relleno interno. */ .site-section--citas { padding: 0; } .site-section:has(+ .site-section--citas) { padding-bottom: 0; } /* «Personaliza tu viaje» es banda a sangre completa (padding:0): el bloque de ARRIBA (p. ej. «Galería de destinos») se pega a ella, sin franja blanca intermedia. */ .site-section:has(+ .site-section--personaliza) { padding-bottom: 0; } /* Página cuyo ÚLTIMO bloque es una galería (p. ej. la página «Cruceros»): la galería se pega al footer, sin franja blanca del relleno inferior de sección. */ main > .site-section--galeria:last-child { padding-bottom: 0; } .site-section:nth-of-type(even) { background: var(--site-surface, #fff); } /* Galería adjunta a una subpágina propia (p. ej. la de Servicio técnico): se une a la sección de texto anterior —sin hueco arriba ni cambio de fondo alterno—, de modo que el texto y las fotos se lean como un solo bloque integrado. */ .site-section--about + .site-section--galeria { padding-top: 0; background: transparent; } /* --- Estados de arranque / error --- */ .site-booting, .site-error { max-width: var(--site-max); margin: 0 auto; padding: 4rem 1.25rem; text-align: center; } .site-booting__hint { color: var(--site-text-soft, #4b6358); } .noscript-msg { text-align: center; padding: 1rem; background: #fff3cd; color: #664d03; } /* --- Contenido renderizado en servidor (SEO / sin-JS) --- Solo lo ve el rastreador, el visitante sin JavaScript y el instante previo a que el SPA hidrate la página. Un estilo sobrio y legible es suficiente. */ .ssr { max-width: var(--site-max, 1100px); margin: 0 auto; padding: 2rem 1.25rem 3rem; line-height: 1.6; color: var(--site-text, #16271f); } .ssr h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .75rem; } .ssr h2 { font-size: 1.25rem; margin: 1.75rem 0 .5rem; } .ssr p { margin: .5rem 0; } .ssr .ssr-cover { display: block; width: 100%; height: auto; border-radius: 12px; margin: 1rem 0 1.25rem; } .ssr .ssr-meta, .ssr .ssr-dates, .ssr .ssr-origin { color: var(--site-text-soft, #4b6358); } .ssr .ssr-price strong { font-size: 1.3rem; } .ssr-body ul, .ssr-body ol { padding-left: 1.4rem; } .ssr-body figure { margin: 1.5rem 0; } .ssr-body img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 1.2rem auto; } .ssr-body figcaption { color: var(--site-text-soft, #4b6358); font-size: .9rem; text-align: center; margin-top: .5rem; } .ssr--404 { text-align: center; padding: 4rem 1.25rem; }