/* ========================================================================== ARTESSA — Base / Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Recorta el desbordamiento horizontal en el elemento raíz (el scroller natural del documento). Es lo que realmente evita el desplazamiento lateral en iOS Safari: `overflow-x: hidden` solo en no basta. Puesto en sí clipa y no crea un segundo contenedor de scroll que compita con el viewport. */ overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--color-black-ceremonial); color: var(--color-ivory); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; /* `clip` recorta cualquier desbordamiento horizontal residual SIN convertir a en contenedor de scroll (a diferencia de `hidden`, que fuerza overflow-y: auto y provoca el scroll "trabado" y los toques descalibrados en iOS). El desbordamiento real ya se elimina en origen (revelados laterales, ver 03-animations.css). */ overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.no-scroll { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; margin: 0; color: var(--color-white-warm); letter-spacing: 0.005em; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } .container { width: min(100% - 3rem, var(--content-max)); margin-inline: auto; } @media (max-width: 640px) { .container { width: min(100% - 2.2rem, var(--content-max)); } } .container--narrow { width: min(100% - 3rem, var(--content-narrow)); margin-inline: auto; } .measure { max-width: var(--measure); } /* ---------- Foco accesible ---------- */ :focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 4px; border-radius: 2px; } /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: 1rem; top: -60px; background: var(--color-black-warm); color: var(--color-gold-light); padding: 0.75rem 1.25rem; border: var(--border-hairline-strong); z-index: 999; transition: top var(--dur-fast) var(--ease-soft); } .skip-link:focus { top: 1rem; } /* ---------- Selección de texto ---------- */ ::selection { background: var(--color-gold-antique); color: var(--color-black-ceremonial); } /* ---------- Scrollbar (progresiva, no invasiva) ---------- */ @media (min-width: 900px) { ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--color-black-ceremonial); } ::-webkit-scrollbar-thumb { background: var(--color-gold-muted); border: 2px solid var(--color-black-ceremonial); border-radius: 8px; } } /* ---------- Utilidades tipográficas ---------- */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-gold-light); font-weight: 600; } .lead { font-size: var(--fs-lead); color: var(--color-text-muted); font-weight: 400; } .text-muted { color: var(--color-text-muted); } .text-gold { color: var(--color-gold-light); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Placeholders de imagen (cuando no hay foto real) ---------- */ .img-placeholder { position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, rgba(183, 138, 61, 0.08), transparent 60%), linear-gradient(155deg, var(--color-black-soft), var(--color-black-ceremonial)); border: var(--border-hairline); color: var(--color-text-muted); text-align: center; font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-md); width: 100%; height: 100%; min-height: 260px; } .img-placeholder span { max-width: 22ch; opacity: 0.75; } .img-placeholder::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(183, 138, 61, 0.3); pointer-events: none; }