/** * 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; } .reveal-on .reveal-item.reveal-in { opacity: 1; transform: none; } /* 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; } } /* 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; } /* «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; } .site-section--distribuidor { 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; } .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; }