/* ========================================================================== base.css — Reset, tipografía base, utilidades y tratamiento fotográfico ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); color-scheme: dark; /* main.js lo cambia a "light" cuando el tema se vuelve claro */ scroll-padding-top: var(--header-h); } /* Lenis */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ::selection { background: var(--rojo); color: var(--blanco); } /* Foco visible (brass sobre negro: contraste alto) */ :focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } main:focus { outline: none; } .skip-link { position: fixed; left: var(--gutter); top: -100px; z-index: 200; padding: 12px 20px; background: var(--blanco); color: var(--negro); font-weight: 700; transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Tipografía ─────────────────────────────────────────────────────────── */ /* Display = arquitectura: escala cartel, interlineado cerrado, tracking negativo */ .display { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; } .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--calido); /* brass sobre oscuro (~8:1) · naranja quemado oscuro sobre claro (~5,6:1) */ } /* [data-fit]: el JS ajusta font-size para que la palabra llene el ancho de su caja */ [data-fit] { display: block; width: max-content; white-space: nowrap; /* el tracking en "em" debe resolverse AQUÍ (en el elemento que cambia de tamaño); si se hereda de un padre, llega como px fijos y deja de escalar con el titular gigante. */ letter-spacing: var(--ls-display); } /* ── Estados iniciales de animación (solo con JS y movimiento normal) ─────── El JS los revela; si falla, y main.js retiran "js" / añaden "rm". */ .js:not(.rm) [data-hide], .js:not(.rm) [data-reveal] { opacity: 0; } .js:not(.rm) [data-split], .js:not(.rm) [data-lines] { visibility: hidden; } /* Máscaras de SplitText (nombre = clase de letra/línea + "-mask"): holgura para tildes y cursivas */ .jv-ch-mask, .jv-line-mask { padding-block: .14em; margin-block: -.14em; padding-inline: .06em; margin-inline: -.06em; } /* Firma (SVG inline) */ .firma { display: block; overflow: visible; } .firma--nav { width: clamp(112px, 9vw, 150px); height: auto; } /* ≥ 113px: mínimo del manual (versión larga) */ /* ── Botones: ghost con borde, sin rellenos genéricos ────────────────────── */ .btn-ghost { position: relative; display: inline-flex; align-items: center; gap: .75em; padding: 14px 26px; border: 1px solid var(--rojo); border-radius: var(--radius); color: var(--fg); font-family: var(--font-display); font-size: var(--fs-small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; overflow: hidden; isolation: isolate; transition: color var(--t-med) var(--ease-out); } .btn-ghost::before { /* relleno que barre de izquierda a derecha en hover */ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rojo); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-med) var(--ease-out); } /* La flecha va en Figtree: Hubiron no trae → */ .btn-ghost .arrow { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; transition: transform var(--t-med) var(--ease-out); } @media (hover: hover) { .btn-ghost:hover { color: var(--blanco); } /* blanco sobre el relleno rojo, en tema oscuro y claro */ .btn-ghost:hover::before { transform: scaleX(1); } .btn-ghost:hover .arrow { transform: translateX(6px); } } .btn-ghost:active { color: var(--blanco); } .btn-ghost:active::before { transform: scaleX(1); } /* Enlace con subrayado que se dibuja */ .link-line { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--t-med) var(--ease-out), color var(--t-fast); } @media (hover: hover) { .link-line:hover { background-size: 100% 1px; } } .link-line:focus-visible { background-size: 100% 1px; } /* ── Tratamiento fotográfico de marca ──────────────────────────────────────── B/N + filtro negro en multiplicar (30%–70%) + degradado de marca opcional. */ .photo { position: relative; display: block; overflow: hidden; background: var(--negro-2); } .photo--ar { aspect-ratio: var(--ar); } .photo--fill { position: absolute; inset: 0; } .photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); } /* Filtro negro multiplicar: --veil = 0.3 (sutil) … 0.7 (máxima legibilidad) */ .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgb(0 0 0 / var(--veil, .4)); mix-blend-mode: multiply; } /* Degradado de marca como filtro atmosférico: se apila con el velo en la misma capa (multiplicar por A y luego por B equivale a multiplicar por A·B). */ .photo--tint::after { background: linear-gradient(rgb(0 0 0 / var(--veil, .4)), rgb(0 0 0 / var(--veil, .4))), var(--grad-filtro); } /* Duotone de marca: la foto (en B/N) se MULTIPLICA sobre el degradado rojo → brass, de modo que las sombras quedan en negro y las luces toman el degradado. Con --duo-luz se sube o baja el brillo. */ .photo--duo { isolation: isolate; background: var(--grad-marca); } .photo--duo > img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1) brightness(var(--duo-luz, 1.4)); } /* Placeholders (mientras no se suben las fotos reales) */ .photo--ph { background-color: var(--negro-2); background-size: cover; background-position: center; } .photo--portrait { background-image: url("../img/placeholders/ph-portrait.svg"); } .photo--scene { background-image: url("../img/placeholders/ph-scene.svg"); } .photo--duo.photo--portrait { background-image: url("../img/placeholders/ph-portrait.svg"), var(--grad-marca); background-blend-mode: multiply, normal; } .photo--duo.photo--scene { background-image: url("../img/placeholders/ph-scene.svg"), var(--grad-marca); background-blend-mode: multiply, normal; } /* Etiqueta del placeholder: el nombre EXACTO del archivo que hay que subir (foto1.jpg, foto2.jpg…) */ .photo--ph[data-ph]::before { content: attr(data-ph); position: absolute; left: 14px; top: 14px; z-index: 4; padding: 6px 12px; background: var(--negro); color: var(--blanco); border: 1px solid var(--linea-fuerte); font: 700 clamp(13px, .9vw + 8px, 20px)/1.2 var(--font-body); letter-spacing: .04em; text-transform: none; mix-blend-mode: normal; pointer-events: none; } .puerta__mini .photo--ph[data-ph]::before { left: 6px; top: 6px; padding: 3px 7px; font-size: 12px; } /* En el hero el marco tiene margen de parallax: la etiqueta va centrada para verse siempre */ .hero__photo.photo--ph[data-ph]::before { top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 22px; font-size: clamp(18px, 1.6vw + 8px, 32px); } /* ── Patrón J/V como textura: la forma es una máscara, el color sale del tema ── */ .pattern-jv { background: var(--fg); -webkit-mask: url("../svg/patron-jv.svg") 0 0 / var(--pat-size, 380px) repeat; mask: url("../svg/patron-jv.svg") 0 0 / var(--pat-size, 380px) repeat; pointer-events: none; } /* ── Grano fotográfico (estático, sin animación: costo casi nulo) ─────────── */ .has-grain::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Movimiento reducido: sin transiciones largas ni animaciones ───────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }