/** * 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; } 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. */ .site-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .site-section--hero { padding-top: 0; } /* 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; } /* «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; } .site-section:nth-of-type(even) { background: var(--site-surface, #fff); } /* --- 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; }