/* ========================================================================== Pulpería 9 Rabos — base Reset corto, tipografía de partida, foco, botones y utilidades. Los @font-face NO van aquí: van en el CSS crítico en línea del , donde la ruta se resuelve desde la raíz (assets/fonts/, no ../fonts/). ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--e10); } body { margin: 0; background: var(--negro); color: var(--hueso); font-family: var(--fuente-cuerpo); font-size: var(--t-cuerpo); line-height: var(--alto-cuerpo); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-family: var(--fuente-titular); font-weight: var(--peso-titular); line-height: var(--alto-titular); letter-spacing: var(--track-titular); text-wrap: balance; } h1 { font-size: var(--t-hero); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } p { margin: 0 0 var(--e2); max-width: var(--ancho-texto); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: 0.22em; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } /* --- Foco visible, siempre en oro ------------------------------------- */ :focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: var(--radio); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--oro); color: var(--negro-puro); } /* --- Salto al contenido ----------------------------------------------- */ .saltar { position: absolute; left: var(--e2); top: -100px; z-index: 999; padding: var(--e1) var(--e2); background: var(--oro); color: var(--negro-puro); font-weight: 700; border-radius: var(--radio); /* SIN transición, a propósito. Esto se dispara con Tab, y las acciones de teclado no llevan animación nunca: quien navega así lo hace decenas de veces y la animación lo vuelve lento. Además `top` es propiedad de layout y animarla dispara layout + paint + composite en cada fotograma. */ } .saltar:focus { top: var(--e2); } /* --- Contenedores ------------------------------------------------------ */ .envoltura { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen); } .seccion { padding-block: var(--hueco-seccion); } .acto { padding-block: var(--hueco-acto); } /* --- Rótulo de acto: I · EL MAR ---------------------------------------- */ .rotulo-acto { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e4); font-family: var(--fuente-titular); font-size: var(--t-micro); font-weight: var(--peso-fuerte); letter-spacing: var(--track-acto); text-transform: uppercase; color: var(--oro); } .rotulo-acto::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borde-fuerte), transparent); } /* --- Botones ------------------------------------------------------------ */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e1); min-height: 48px; padding: 0 var(--e4); border: 1px solid transparent; border-radius: var(--radio); font-family: var(--fuente-titular); font-size: var(--t-pequeno); font-weight: var(--peso-fuerte); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; /* El movimiento con la curva fuerte; los colores con `ease`, que es lo que pide la curva de decision para hover y cambios de color. */ transition: transform var(--dur-corta) var(--sal-entra), background-color var(--dur-corta) ease, border-color var(--dur-corta) ease, color var(--dur-corta) ease; } .boton--oro { background: var(--oro); border-color: var(--oro); color: var(--negro-puro); } .boton--linea { background: transparent; border-color: var(--borde-fuerte); color: var(--hueso); } .boton--texto { min-height: 44px; padding: 0 var(--e1); background: none; border: 0; color: var(--gris-marea); letter-spacing: 0.08em; } @media (hover: hover) and (pointer: fine) { .boton--oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); } .boton--linea:hover { border-color: var(--oro); color: var(--oro); } .boton--texto:hover { color: var(--oro); } } .boton:active { transform: translateY(1px); } /* --- Sello de origen: la bandera de Galicia ---------------------------- */ .sello { display: inline-flex; align-items: center; gap: var(--e1); padding: 6px var(--e2) 6px 6px; border: var(--linea); border-radius: var(--radio-pildora); font-family: var(--fuente-cuerpo); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; color: var(--blanco-cal); text-transform: uppercase; } .sello svg { flex: none; border-radius: 2px; } /* --- Utilidades --------------------------------------------------------- */ .oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tenue { color: var(--gris-marea); } .oro { color: var(--oro); } /* Movimiento reducido significa MENOS y MÁS SUAVE, no cero. Lo que molesta a quien activa ese ajuste es el movimiento —desplazamientos, parallax, escalados—, no que un color cambie con suavidad. Así que se conservan opacidad y color, que ayudan a entender la interfaz, y se anula solo lo que se mueve. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-property: opacity, color, background-color, border-color, box-shadow, outline-color !important; transition-duration: 150ms !important; transform: none !important; } }