/* ============================================================ FERNANDO XAVIER — Fotografía de Retrato Hoja de estilos principal Estética: editorial clásica (Arena / Azul noche / Oro) — ver investigacion-mercado/24_sistema_color.md ============================================================ */ /* ------------------------------------------------------------- 1. VARIABLES / TOKENS DE DISEÑO ------------------------------------------------------------- */ :root { /* Paleta de marca — Fernando Xavier (ver 24_sistema_color.md) */ --color-black: #0C1017; /* Tinta noche — fondos oscuros / nocturnos */ --color-ink: #16253F; /* Azul noche — texto principal / estructura */ --color-charcoal: #16253F; /* Azul noche — secciones y placeholders oscuros */ --color-graphite: #33425C; /* Azul-grafito — texto secundario / bordes */ --color-gray: #6E6753; /* Gris cálido — etiquetas / texto atenuado (sobre Arena) */ --color-mist: #C7BEA6; /* Arena atenuada — texto sobre fondos oscuros */ --color-paper: #F0E6CE; /* Arena cálida — EXCLUSIVA de la navegación (header sólido), ronda 17 */ --color-body: #E2D5B8; /* Arena profundo — fondo del cuerpo, separado de --color-paper (ronda 17): compartían el mismo tono y la nav se fundía con la página al hacer scroll */ --color-label-on-body: var(--color-graphite); /* Gris cálido da 3,87:1 sobre Arena profundo (bajo 4,5:1); Azul-grafito da 6,96:1. Solo para texto que cae directo sobre el cuerpo, no sobre tarjetas Crema (ahí --color-gray sigue bien, 5,27:1). */ --color-white: #FBF7EF; /* Crema mármol — superficies claras / texto sobre oscuro */ /* Acento — Oro (la "luz" de la marca; NO texto de cuerpo, ver 24 §2) */ --color-accent: #A67C2C; /* Oro antiguo */ --color-accent-light: #D3AC58; /* Oro luz — acento sobre fondos oscuros */ /* Arena "canónica" para superficies OSCURAS (CTA sobre home, texto claro sobre oscuro). DESACOPLADA del fondo global candidato #F0E6CE (que sigue en evaluación). Ver ALE-FUNCIONAL/06 §2. */ --color-on-dark-primary: #F1EADC; /* Superficies de HERO interno y CTA — opción L2 "azul-grafito luminoso" ELEGIDA por Fernando (ronda 12): base azul-grafito más clara que el azul noche + luz crema localizada arriba-derecha (lejos del texto), SIN oliva. Texto Crema (ver contraste). Historial: original con franja oliva y C provisional, descartados. */ --grad-night: radial-gradient(85% 100% at 88% 90%, rgba(241,234,220,.42), transparent 55%), linear-gradient(135deg, #3E4C69 0%, #55617D 100%); /* Superficies PROFUNDAS que NO se aclaran (menú móvil, WhatsApp) — VIS-12: cada contexto con su token, no un gradiente universal. */ --surface-menu: linear-gradient(155deg, #16253F 0%, #0C1017 100%); /* Tipografía */ --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* Escala de espaciado */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; /* --- LAYOUT: gutter y anchos (Lote 07-A, ALE-FUNCIONAL/07) --- Fuente única de verdad para márgenes laterales y anchos de banda. El header y el cuerpo comparten --gutter y --content-max para que sus bordes coincidan de 320px a ultra-wide (ver §15/§16 de la auditoría). */ --gutter: clamp(1.25rem, 4vw, 3rem); /* margen lateral fluido compartido */ --content-max: 1400px; /* banda de contenido estándar (portfolio, secciones, header) */ --wide-max: 1600px; /* banda ancha opcional (galerías full-bleed acotadas) */ --narrow-max: 760px; /* banda estrecha (heroes de página, intros) */ --reading-max: 680px; /* ancho de lectura para párrafos largos (~68ch) */ --header-max: var(--content-max); /* banda del header = cuerpo → bordes alineados */ --header-clearance: 9rem; /* espacio superior en páginas internas para librar el header fijo */ --radius-btn: 13px; /* redondeo de TODOS los botones (decisión de Fernando, ronda 08) */ --radius-media: 16px; /* redondeo de imágenes y tarjetas (galería, portadas, retrato, glass) */ /* Relieve 3D de botones y selector (Fernando, ronda 13): labio inferior + sombra suave; se hunde al presionar. */ --btn-3d: 0 3px 0 rgba(12,16,23,.22), 0 6px 14px rgba(12,16,23,.20); --btn-3d-press: 0 1px 0 rgba(12,16,23,.22), 0 2px 6px rgba(12,16,23,.20); /* Compat: --max-width sigue apuntando a la banda estándar */ --max-width: var(--content-max); /* Transiciones */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --speed: 0.6s; } /* ------------------------------------------------------------- 2. RESET / BASE ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--color-ink); background-color: var(--color-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--speed) var(--ease); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0 0 var(--space-sm); letter-spacing: 0.01em; } ul { list-style: none; margin: 0; padding: 0; } /* Utilidad: texto con tracking amplio (nav, etiquetas) */ .eyebrow { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-label-on-body); } .eyebrow--on-dark { color: var(--color-mist); } /* eyebrow sobre superficies oscuras */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); } /* Variantes de ancho de banda (reemplazan max-width inline en las páginas) */ .container--wide { max-width: var(--wide-max); } .container--narrow { max-width: var(--narrow-max); } .container--reading { max-width: var(--reading-max); } /* ------------------------------------------------------------- 2B. ACCESIBILIDAD (07-B · ronda 08 §8) ------------------------------------------------------------- */ /* Foco visible global (teclado): anillo Oro luz con separación. No depende solo del color: es un contorno adicional, no un cambio de color del elemento. */ :focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 3px; border-radius: 2px; } /* Quita el foco solo cuando NO es navegación por teclado (evita anillos con el mouse). */ :focus:not(:focus-visible) { outline: none; } /* Skip link: oculto hasta recibir foco; entonces baja a la vista. */ .skip-link { position: fixed; top: 0; left: 50%; transform: translate(-50%, -130%); z-index: 300; background: var(--color-ink); color: var(--color-white); padding: 0.7rem 1.3rem; border-radius: 0 0 var(--radius-btn) var(--radius-btn); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; transition: transform var(--speed) var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } /* Oculto visualmente pero disponible para lectores de pantalla (WCAG 4.1.3 / patrón estándar "sr-only") — ej. el contador de foto del Portfolio, que Fernando pidió sacar de la vista pero que sigue anunciando el cambio. */ .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; } /* Landmark principal: sin estilos que alteren el layout. */ main { display: block; } /* Bloqueo del scroll del fondo mientras el menú móvil está abierto. */ body.nav-open { overflow: hidden; } /* ------------------------------------------------------------- 3. HEADER / NAVEGACIÓN ------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; /* El fondo ocupa todo el ancho, pero el CONTENIDO se centra en una banda de --header-max con el mismo gutter que el cuerpo → bordes alineados (§15/§16). Sin wrapper HTML: el padding lateral crece en ultra-wide para acotar la banda. */ padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: max(var(--gutter), calc((100% - var(--header-max)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--header-max)) / 2 + var(--gutter))); color: var(--color-white); transition: color var(--speed) var(--ease); } /* El fondo/blur van en un ::before, NO en el header, para que el header no cree un containing block que descoloque el menú fijo (`position:fixed` debe referirse al viewport, no al header con padding). Ver regresión móvil ronda 08 §1-2. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: transparent; border-bottom: 1px solid transparent; transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease); } /* Fondo sólido: en páginas internas y en la home tras hacer scroll. Arena con texto azul noche (NO blanco) — la marca no usa negro. OPACO (ronda 17, Ale): antes era Arena translúcida (.92) sin leer el token; quedaba visualmente igual al --color-body al pasar sobre fotos claras y no garantizaba separación. Ahora usa --color-paper al 100% — separación cierta sobre cualquier fondo, sin depender de qué haya detrás. */ .site-header--solid { color: var(--color-ink); } /* Azul noche */ .site-header--solid::before { background: var(--color-paper); /* Arena cálida, opaca */ border-bottom-color: rgba(22, 37, 63, 0.12); } .site-header .brand { display: flex; align-items: center; flex-shrink: 0; } /* el logo nunca se comprime */ .site-header .brand img { height: 54px; width: auto; display: block; } /* Logo reverso (home sobre hero): SIN velo — decisión de Fernando (2026-09-04), prefiere la versión limpia crema+oro (opción B). La clase se conserva por si se necesita un tratamiento futuro. */ .brand--reverse { /* sin velo */ } /* Legibilidad del menú cuando la barra es transparente (sobre el hero) */ .site-header:not(.site-header--solid) .nav-menu a, .site-header:not(.site-header--solid) .nav-toggle { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } .nav-menu { display: flex; align-items: center; /* centra verticalmente enlaces, selector y CTA (evita el desnivel) */ gap: var(--space-md); } .nav-menu a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; position: relative; } .nav-menu a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: currentColor; transition: width var(--speed) var(--ease); } .nav-menu a:hover::after { width: 100%; } .nav-menu a[aria-current="page"]::after { width: 100%; } /* página actual: subrayado persistente */ /* Botón hamburguesa (móvil): ícono de 3 líneas que se transforma en X al abrir. */ .nav-toggle { display: none; background: none; border: none; color: inherit; cursor: pointer; width: 44px; height: 44px; padding: 0; position: relative; } .nav-toggle__lines, .nav-toggle__lines::before, .nav-toggle__lines::after { content: ""; display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background 0.2s var(--ease); } .nav-toggle__lines { position: relative; margin: 0 auto; } .nav-toggle__lines::before { position: absolute; left: 0; top: -7px; } .nav-toggle__lines::after { position: absolute; left: 0; top: 7px; } .nav-toggle.is-open .nav-toggle__lines { background: transparent; } .nav-toggle.is-open .nav-toggle__lines::before { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle__lines::after { transform: translateY(-7px) rotate(-45deg); } /* Selector de idiomas segmentado (dirección Multi Oral, aprobado ronda 08 §3). La cápsula exterior CLARA es fija en toda superficie (header claro, header sobre foto y overlay móvil) → mismo lenguaje visual y legibilidad garantizada. Activo = cápsula interior Azul noche con texto Arena (NO oro). Inactivos = Azul noche sobre la cápsula clara. Orden PT · EN · ES. Estado no solo por color. */ .nav-lang { display: flex; align-items: center; } .lang-switch { display: inline-flex; align-items: center; gap: 1px; padding: 2px; border-radius: 999px; background: var(--color-white); /* Crema mármol: superficie clara fija */ border: 1px solid rgba(22, 37, 63, 0.22); /* borde fino Azul noche */ box-shadow: 0 2px 5px rgba(12, 16, 23, .18); /* relieve 3D de la cápsula (ronda 13) */ } /* Escritorio: compacto y elegante, a tono con el texto de la nav. En el overlay móvil se agranda a 44px táctil (ver bloque @media). */ .lang-switch .lang { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 26px; padding: 0 0.5rem; background: none; border: none; cursor: pointer; color: var(--color-ink); /* inactivo: Azul noche */ font-family: var(--font-body); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; border-radius: 999px; transition: background var(--speed) var(--ease), color var(--speed) var(--ease); } .lang-switch .lang::after { display: none; } /* los enlaces del selector no llevan el subrayado de la nav */ .lang-switch .lang:hover:not(.is-active) { background: rgba(22, 37, 63, 0.08); } /* realce por fondo, no solo color */ .lang-switch .lang.is-active { background: var(--color-ink); /* Azul noche (NO oro) */ color: var(--color-on-dark-primary); /* Arena */ font-weight: 600; box-shadow: 0 2px 0 rgba(12,16,23,.30), 0 3px 6px rgba(12,16,23,.24); /* píldora activa en relieve 3D */ transition: box-shadow 0.12s var(--ease), transform 0.12s var(--ease), background var(--speed) var(--ease); } .lang-switch .lang:active { transform: translateY(1px); } .lang-switch .lang:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* CTA del header — variantes por superficie (misma lógica que el logo positivo/reverso). BASE (header oscuro/home + overlay móvil): chip Arena con texto Azul noche. */ .nav-menu .nav-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; /* altura cómoda; en el overlay móvil el padding la sube */ min-width: 13rem; /* MISMO ancho en los 3 idiomas (entra "Vamos conversar", el más largo) */ background: var(--color-on-dark-primary); /* Arena exacta #F1EADC (desacoplada del fondo global) */ color: var(--color-ink); /* Azul noche */ border: 1px solid var(--color-on-dark-primary); padding: 0.5rem 1.35rem; border-radius: var(--radius-btn); /* mismo redondeo que el resto de los botones */ box-shadow: var(--btn-3d); /* relieve 3D */ transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease), transform 0.12s var(--ease), box-shadow 0.12s var(--ease); } .nav-menu .nav-cta a::after { display: none; } .nav-menu .nav-cta a:hover { background: var(--color-accent-light); /* oro luz */ color: var(--color-ink); border-color: var(--color-accent-light); } .nav-menu .nav-cta a:active { transform: translateY(2px); box-shadow: var(--btn-3d-press); } /* Header CLARO (páginas internas): CTA oscuro para no perderse sobre Arena. */ .site-header--solid .nav-cta a { background: var(--color-ink); /* Azul noche */ color: var(--color-on-dark-primary); /* Arena exacta #F1EADC sobre el chip oscuro */ border-color: var(--color-ink); } .site-header--solid .nav-cta a:hover { background: var(--color-accent); /* oro antiguo */ color: var(--color-ink); border-color: var(--color-accent); } /* ------------------------------------------------------------- 3B. CABECERA DE PÁGINA INTERNA (page-hero) Reemplaza los patrones inline repetidos (padding-top, fondo, color, tamaño de H1, intro) de portfolio/experiencias/about/contact. Ver §22. ------------------------------------------------------------- */ /* .section.page-hero: la especificidad (0-2-0) gana a .section (0-1-0) para que el despeje del header fijo no lo pise el padding-block de .section. */ .section.page-hero { padding-top: var(--header-clearance); } /* Variante oscura (portfolio, experiencias): degradado de marca + texto claro. */ .page-hero--dark { background: var(--grad-night); color: var(--color-white); } /* Bloque de introducción centrado y angosto (contact). */ .page-hero__lead { max-width: var(--reading-max); margin: 0 auto; text-align: center; } /* Título de página: tamaño editorial fluido y peso liviano (antes inline en cada H1). */ .page-title { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 300; } .page-title--xl { font-size: clamp(2.5rem, 7vw, 5rem); } /* heroes oscuros de experiencias */ /* Portfolio (rondas 21-23, Ale): el Portfolio debe abrir con la obra, no con un hero grande — la galería es la primera experiencia visual, no contenido después de un hero. Cabecera reducida a una entrada editorial angosta (antes 376px de alto con el hero estándar; ahora bastante menos), para que miniaturas entren en 1440×900. */ .page-title--compact { font-size: clamp(1.3rem, 2.2vw, 1.8rem); } /* Especificidad (0-2-0) para ganarle a ".section.page-hero" de arriba (mismo peso, pero esta regla va después): si no, el padding-top de 9rem no se achicaba. */ .section.page-hero--compact { padding-top: 4rem; padding-bottom: 0.15rem; } .page-hero--compact .eyebrow { margin-bottom: 0.2rem; } /* Párrafo introductorio bajo el título. --tone permite el matiz por contexto. */ .page-intro { max-width: 56ch; color: var(--page-intro-color, var(--color-graphite)); } .page-hero--dark .page-intro { --page-intro-color: var(--color-white); } /* Crema: AA sobre L2 */ .page-hero__lead .page-intro { max-width: none; } /* centrado: el ancho lo da el lead */ /* Enlace subrayado en oro (antes inline en el mailto de contacto). */ .link-gold { border-bottom: 1px solid var(--color-accent); } /* Separación del formulario respecto del lead (antes inline margin-top). */ .page-hero__lead + .form { margin-top: var(--space-lg); } /* ------------------------------------------------------------- 4. HERO ------------------------------------------------------------- */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; color: var(--color-white); overflow: hidden; background: var(--color-black); } .hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; /* Sustituye por tu retrato principal: */ background-image: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.75) 100%), url("../images/hero/hero-01.jpg"); transform: scale(1.05); animation: heroZoom 12s var(--ease) forwards; } @keyframes heroZoom { to { transform: scale(1); } } .hero__content { position: relative; z-index: 2; padding-bottom: var(--space-xl); max-width: 900px; } .hero__content h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); font-weight: 300; line-height: 0.98; } .hero__content p { max-width: 42ch; color: var(--color-mist); font-weight: 300; } /* Scroll cue */ .scroll-cue { position: absolute; bottom: var(--space-md); right: var(--space-md); z-index: 3; writing-mode: vertical-rl; font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-mist); } /* ------------------------------------------------------------- 4b. HERO SHOWCASE — columnas con desplazamiento vertical (inspirado en el landing de Lindsay Adler) ------------------------------------------------------------- */ /* Portada bloqueada: una sola pantalla, sin scroll */ body.home-locked { overflow: hidden; height: 100vh; height: 100dvh; /* respeta la barra del navegador en móvil */ } .hero-scroll { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: var(--color-black); } /* Rejilla de columnas que se deslizan. Inclinada (--tilt) y sobredimensionada para cubrir la pantalla al rotar. */ .scroll-columns { position: absolute; top: 50%; left: 50%; width: 140%; height: 170%; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); /* --tilt: inclinación respecto a la vertical. 15deg = columnas casi de pie (≈75° desde la horizontal). Sutil y elegante. */ transform: translate(-50%, -50%) rotate(var(--tilt, 15deg)); transform-origin: center center; } .scroll-col { display: flex; flex-direction: column; will-change: transform; } /* Cada columna lleva su set de fotos DUPLICADO; al llegar a -50% el contenido coincide con el inicio → bucle sin costuras. */ .scroll-col--up { animation: slideUp var(--dur, 60s) linear infinite; } .scroll-col--down { animation: slideDown var(--dur, 60s) linear infinite; } .scroll-col img { width: 100%; height: auto; display: block; margin-bottom: var(--space-sm); /* separación en el elemento => bucle exacto */ border-radius: var(--radius-media); filter: grayscale(30%) brightness(0.85); transition: filter var(--speed) var(--ease); } .hero-scroll:hover .scroll-col { animation-play-state: paused; } .scroll-col img:hover { filter: grayscale(0%) brightness(1); } @keyframes slideUp { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes slideDown { from { transform: translateY(-50%); } to { transform: translateY(0); } } /* Velo oscuro + contenido superpuesto */ .hero-scroll__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.15) 35%, rgba(10,10,10,.65) 100%); } .hero-scroll__content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--color-white); /* Zonas seguras arriba/abajo: el texto nunca se mete bajo el header fijo ni bajo los controles inferiores (Pause a la izquierda, WhatsApp a la derecha). Simétrico → en pantallas altas el centro visual se conserva; en bajas evita la superposición que Ale reprodujo a 320×568 y 812×375 (ronda 14). */ padding: 5.25rem var(--space-md); pointer-events: none; } .hero-scroll__content h1 { font-size: clamp(2.8rem, 9vw, 7rem); font-weight: 300; line-height: 0.98; } .hero-scroll__content p { color: var(--color-mist); max-width: 46ch; } /* Panel de legibilidad de la home — B (glass azul/tinta), ELEGIDO por Fernando (ronda 12). Tarjeta esmerilada con fallback sin backdrop-filter. */ .hero-scroll__panel { position: relative; max-width: 42rem; padding: 2rem 2.4rem; background: rgba(18, 28, 48, .42); -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05); border: 1px solid rgba(251, 247, 239, .14); border-radius: var(--radius-media); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-scroll__panel { background: rgba(18, 28, 48, .82); } /* fallback sin blur: más opaco */ } /* Pantallas bajas (celular apaisado 812×375, o 320×568 con texto largo en EN): el hero deja de centrar a la fuerza y pasa a alinear arriba + permitir scroll, con tipografía y panel reducidos. Garantiza cero superposición del texto con el header o los controles, en los tres idiomas (Ale, ronda 14). */ @media (max-height: 640px) { .hero-scroll__content { justify-content: flex-start; overflow-y: auto; pointer-events: auto; /* permite el desplazamiento táctil dentro del hero */ -webkit-overflow-scrolling: touch; padding-top: 5rem; padding-bottom: 5rem; } .hero-scroll__content h1 { font-size: clamp(2rem, 7vw, 3.4rem); } .hero-scroll__content p { font-size: 0.95rem; } .hero-scroll__panel { padding: 1.2rem 1.4rem; max-width: 34rem; } } /* Apaisado de celular (≈375 px de alto): compactar a fondo para que el bloque completo (eyebrow + título + intro) entre en la banda segura sin quedar detrás de Pause/WhatsApp. Mantiene la composición B, solo más chica. */ @media (max-height: 430px) { .hero-scroll__content { padding-top: 4.75rem; padding-bottom: 4.75rem; } .hero-scroll__content h1 { font-size: clamp(1.5rem, 5.2vw, 2.1rem); line-height: 1; margin: 0.15rem 0; } .hero-scroll__content p { font-size: 0.8rem; line-height: 1.35; } .hero-scroll__panel { padding: 0.7rem 1.2rem; max-width: 42rem; } .hero-scroll__panel .eyebrow { margin-bottom: 0.25rem; font-size: 0.62rem; } } /* Respeta a quien prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { .scroll-col--up, .scroll-col--down { animation: none; } } /* ------------------------------------------------------------- 5. SECCIONES GENERALES ------------------------------------------------------------- */ /* Solo padding vertical: el lateral (gutter) lo aporta .container y NO debe pisarse cuando un elemento combina .section + .container (bug VIS-03: gutter quedaba en 0). */ .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-lg); } /* Dos bloques pegados (portfolio: categorías consecutivas; about: pasos → cta) sumaban su padding-block y duplicaban el espacio (Fernando, 2026-09-06). No toca el primer bloque después del hero (excluido con :not(.page-hero)). */ .section:not(.page-hero) + .section, .section:not(.page-hero) + .cta { padding-top: 0; } /* Último bloque de
antes del footer: no necesita el padding-bottom completo, el footer ya aporta el suyo arriba. */ main > .section:last-child, main > .cta:last-child { padding-bottom: var(--space-lg); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; } .section-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 300; } /* ------------------------------------------------------------- 6. PORTFOLIO — PESTAÑAS (CUR-07, ronda 20) ------------------------------------------------------------- */ /* El heading no queda tapado por el header fijo al saltar con #ancla */ #corporate, #editorial, #fashion { scroll-margin-top: 90px; } /* Menos aire tras la cabecera compacta: la foto + miniaturas deben entrar en la primera pantalla (ronda 21, Ale: las pestañas arrancaban en y=547 a 1440×900). */ /* Menos aire entre la tira de miniaturas y el bloque siguiente (CTA con degradado azul) — Fernando lo pidió más ajustado (ronda 23). */ .section.portfolio-tabs { padding-top: 0.9rem; padding-bottom: var(--space-md); } .portfolio-tablist { display: flex; flex-wrap: wrap; /* móvil: nunca corta una etiqueta */ justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-xs); } /* Tipografía de marca (Cormorant Garamond, la misma de h1/h2) en vez de la sans-serif de UI — Fernando pidió algo "más elegante" para el nombre de las pestañas (2026-09-07). Forma de píldora tipo "agenda" en vez de subrayado, con espacio entre cada una (Fernando, 2026-09-09): borde redondeado, sin línea inferior. */ .portfolio-tab { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.01em; color: var(--color-label-on-body); background: none; border: 1px solid var(--color-graphite); border-radius: 999px; padding: 0.45rem 1.4rem; cursor: pointer; transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease), border-color var(--speed) var(--ease); } .portfolio-tab:hover { color: var(--color-ink); border-color: var(--color-ink); } .portfolio-tab[aria-selected="true"] { color: var(--color-on-dark-primary); background: var(--color-ink); border-color: var(--color-ink); } .portfolio-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .portfolio-panel__empty { color: var(--color-label-on-body); } /* En escritorio, la foto llena el espacio libre entre la cabecera y la tira de miniaturas (en vez de un alto fijo calculado a mano) — así la tira queda siempre pegada abajo, sin asomo del bloque de CTA, en cualquier monitor (pedido de Fernando, 2026-09-08). En móvil se mantiene el flujo normal con scroll (ronda 21): forzar esto ahí dejaría huecos raros en pantallas angostas. */ @media (min-width: 901px) { .section.portfolio-tabs { display: flex; flex-direction: column; /* 100vh menos lo que ya ocupan el header fijo + la cabecera compacta de Portfolio (medido: ~150px combinados). Si cualquiera de los dos cambia de alto, ajustar este número. Tiene que ser "height" (no min-height): los hijos de abajo usan porcentajes de alto para llenar el espacio, y eso solo funciona si este contenedor tiene un alto DEFINIDO, no un mínimo — con min-height quedaba indefinido y la foto se salía de cualquier límite (probado a 900/1080/1440px de alto, siempre igual). */ height: calc(100vh - 150px); min-height: calc(100vh - 150px); } .portfolio-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* display:flex tiene la misma especificidad que [hidden]{display:none} del navegador, y el CSS del sitio siempre le gana a esa regla por defecto — sin esto, un panel "hidden" se mostraba igual (bug real reportado por Fernando: las tres pestañas apiladas al mismo tiempo). */ .portfolio-panel[hidden] { display: none; } .portfolio-viewer { flex: 1 1 auto; min-height: 0; } .portfolio-strip { flex: 0 0 auto; } } /* Composición C (ronda 21, referencia de Fernando/Ale en home_editorial_comparacion.html #hero-c): foto protagonista a la izquierda, texto breve de categoría a la derecha, ambas sobre el Arena del cuerpo — sin recuadro ni fondo oscuro propio. */ .portfolio-viewer { display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: center; } /* Marco 2:3 (formato de la mayoría de las fotos, vertical): mismo marco para todas. La foto que no calce se ve COMPLETA, sin recortar (`contain`, elegido por Fernando el 2026-09-08 sobre `cover`: prefiere ver qué fotos no encajan bien y corregirlas él mismo a 2:3 en Photoshop antes que recortarlas automáticamente). En escritorio, la altura la da el espacio libre real de la fila (`.portfolio-viewer` con `flex:1`, ver media query de más arriba) — el marco crece hasta llenarlo, `max-width:100%` evita que se pase del ancho de su columna. En móvil (sin ese flex) manda el ancho, con `height:auto` más abajo. */ .portfolio-viewer__media { position: relative; touch-action: pan-y; aspect-ratio: 2 / 3; height: 100%; max-width: 100%; align-self: stretch; overflow: hidden; border-radius: var(--radius-media); background: var(--color-charcoal); } .portfolio-viewer__img { width: 100%; height: 100%; object-fit: contain; /* foto completa, sin recortar — Fernando eligió esto sobre cover (2026-09-08) */ display: block; cursor: zoom-in; } .portfolio-viewer__enlarge { position: absolute; right: 1rem; bottom: 1rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(251, 247, 239, 0.4); background: rgba(12, 16, 23, 0.55); color: var(--color-white); font-size: 1.1rem; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background var(--speed) var(--ease); } .portfolio-viewer__enlarge:hover { background: rgba(12, 16, 23, 0.75); } .portfolio-viewer__prev, .portfolio-viewer__next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(12, 16, 23, 0.45); color: var(--color-white); font-size: 1.6rem; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background var(--speed) var(--ease), opacity var(--speed) var(--ease); } .portfolio-viewer__prev { left: 0.6rem; } .portfolio-viewer__next { right: 0.6rem; } .portfolio-viewer__prev:hover:not(:disabled), .portfolio-viewer__next:hover:not(:disabled) { background: rgba(12, 16, 23, 0.75); } .portfolio-viewer__prev:disabled, .portfolio-viewer__next:disabled { opacity: 0.3; cursor: default; } .portfolio-viewer__text h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 300; color: var(--color-ink); margin-bottom: var(--space-xs); } .portfolio-viewer__text p { color: var(--color-label-on-body); max-width: 40ch; margin-bottom: var(--space-sm); } .portfolio-viewer__counter { color: var(--color-label-on-body); font-size: 0.72rem; letter-spacing: 0.18em; margin-top: var(--space-sm); } @media (max-width: 900px) { .portfolio-viewer { grid-template-columns: 1fr; gap: var(--space-md); } /* Apilado: la foto vuelve a mandar por ancho (no por vh, que en un teléfono angosto la dejaría chica y centrada con bandas vacías a los costados). */ .portfolio-viewer__media { width: 100%; height: auto; max-width: none; align-self: auto; } } .portfolio-strip { display: flex; gap: var(--space-sm); margin-top: var(--space-xs); padding-bottom: 0.4rem; overflow-x: auto; /* la tira puede desplazarse; la página no */ scroll-behavior: smooth; /* Barra de desplazamiento integrada al Arena en vez del blanco por defecto del navegador (Fernando, ronda 23): pulgar visible/accesible, riel transparente para que se funda con el fondo de la página. */ scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--color-graphite) transparent; } .portfolio-strip::-webkit-scrollbar { height: 6px; } /* Chrome/Edge/Safari */ .portfolio-strip::-webkit-scrollbar-track { background: transparent; } .portfolio-strip::-webkit-scrollbar-thumb { background: var(--color-graphite); border-radius: var(--radius-btn); } .portfolio-strip::-webkit-scrollbar-thumb:hover { background: var(--color-ink); } .portfolio-strip__thumb { flex: 0 0 auto; width: 92px; aspect-ratio: 2 / 3; padding: 0; border: 3px solid transparent; border-radius: var(--radius-media); overflow: hidden; background: var(--color-charcoal); cursor: pointer; transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease); } .portfolio-strip__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .portfolio-strip__thumb:hover { transform: translateY(-2px); } .portfolio-strip__thumb[aria-current="true"] { border-color: var(--color-accent); } .portfolio-strip__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ------------------------------------------------------------- Lightbox — ver la foto a pantalla completa ------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(8, 8, 8, 0.96); opacity: 0; transition: opacity 0.3s var(--ease); } .lightbox.is-open { display: flex; opacity: 1; } .lightbox__img { max-width: 92vw; max-height: 92vh; object-fit: contain; /* foto entera, sin recorte, para ver el detalle */ border-radius: var(--radius-media); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); } .lightbox button { position: absolute; background: none; border: none; color: var(--color-white); cursor: pointer; line-height: 1; opacity: 0.75; transition: opacity var(--speed) var(--ease); -webkit-user-select: none; user-select: none; } .lightbox button:hover { opacity: 1; } .lightbox__close { top: 1.4rem; right: 1.6rem; font-size: 2.4rem; } .lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 0.5rem 1rem; } .lightbox__prev { left: 0.8rem; } .lightbox__next { right: 0.8rem; } .lightbox__counter { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: var(--color-mist); font-size: 0.72rem; letter-spacing: 0.22em; } /* ------------------------------------------------------------- 7. BLOQUE INTRO / SPLIT ------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; } .split__text p { color: var(--color-graphite); max-width: 52ch; } .split__text h2 { font-size: 2.4rem; font-weight: 300; } /* títulos de experiencia (antes inline) */ .split__media img { width: 100%; filter: grayscale(20%); border-radius: var(--radius-media); } /* ------------------------------------------------------------- Experiencias (tipos de sesión) ------------------------------------------------------------- */ .exp { margin-bottom: var(--space-xl); } .exp:last-of-type { margin-bottom: 0; } .exp__media { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-charcoal); border-radius: var(--radius-media); } .exp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%); transition: transform 1.2s var(--ease), filter var(--speed) var(--ease); } .exp:hover .exp__media img { transform: scale(1.04); filter: grayscale(0%); } .exp__for { font-size: 0.95rem; color: var(--color-label-on-body); margin-top: var(--space-sm); } .exp__for strong { color: var(--color-ink); font-weight: 500; } .exp .btn { margin-top: var(--space-md); } /* Alterna el lado de la imagen en escritorio; en móvil la imagen queda arriba */ @media (min-width: 901px) { .split--reverse .split__media { order: 2; } } /* ------------------------------------------------------------- 8. CATEGORÍAS (índice de portfolio) ------------------------------------------------------------- */ .categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); } .categories h3 { font-size: 1.8rem; } /* títulos de paso en Estudio (antes inline) */ .category { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: flex-end; color: var(--color-white); border-radius: var(--radius-media); } .category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) brightness(0.75); transition: transform 1.2s var(--ease), filter var(--speed) var(--ease); } .category:hover img { transform: scale(1.05); filter: grayscale(0%) brightness(0.85); } .category__label { position: relative; z-index: 2; padding: var(--space-md); } .category__label h3 { font-size: 1.8rem; margin: 0; } /* ------------------------------------------------------------- 9. CTA / CONTACTO ------------------------------------------------------------- */ .cta { text-align: center; padding: var(--space-xl) var(--space-md); background: var(--grad-night); color: var(--color-white); } .cta h2 { font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 300; } .cta p { color: var(--color-white); max-width: 48ch; margin: 0 auto var(--space-md); } /* Crema: AA sobre L2 */ /* Eyebrow legible sobre las superficies L2 (más claras que el azul noche): Crema para AA. */ .page-hero--dark .eyebrow, .cta .eyebrow { color: var(--color-white); } .btn { display: inline-block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding: 1rem 2.4rem; border: 1px solid currentColor; border-radius: var(--radius-btn); /* todos los botones redondeados (Fernando, ronda 08) */ box-shadow: var(--btn-3d); /* relieve 3D (Fernando, ronda 13) */ transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform 0.12s var(--ease), box-shadow 0.12s var(--ease); } .btn:hover { background: var(--color-white); color: var(--color-black); } .btn--dark:hover { background: var(--color-black); color: var(--color-white); } .btn:active { transform: translateY(2px); box-shadow: var(--btn-3d-press); } /* Botón sólido Azul noche (mismo look que "Vamos conversar" del header sobre Arena) — Fernando lo pidió con color de relleno en vez del borde transparente de .btn--dark para el CTA de categoría en Portfolio (2026-09-08). */ .btn--navy { background: var(--color-ink); color: var(--color-on-dark-primary); border-color: var(--color-ink); } .btn--navy:hover { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); } /* ------------------------------------------------------------- 10. FORMULARIO ------------------------------------------------------------- */ /* Tarjeta del formulario: color propio, distinto del fondo Arena (Fernando, ronda 13). */ .form { max-width: 640px; margin: 0 auto; display: grid; gap: var(--space-md); background: var(--color-white); /* Crema mármol, se despega del Arena */ padding: clamp(1.5rem, 4vw, 2.4rem); border-radius: var(--radius-media); box-shadow: 0 12px 34px rgba(12, 16, 23, .10); } .form-help { margin: 0.8rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--color-gray); } .field { display: grid; gap: var(--space-xs); } .field label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gray); } .field input, .field textarea { font-family: var(--font-body); font-size: 1rem; padding: 0.9rem 0; border: none; border-bottom: 1px solid var(--color-mist); background: transparent; color: var(--color-ink); transition: border-color var(--speed) var(--ease); } /* Foco de formulario: anillo visible + borde más grueso (no depende solo del color). */ .field input:focus-visible, .field textarea:focus-visible { border-color: var(--color-accent); border-bottom-width: 2px; outline: 2px solid var(--color-accent-light); outline-offset: 3px; } /* Botón "Enviar por WhatsApp" del formulario (ronda 16, Fernando): .btn--dark no tiene fondo/color propios (solo :hover, ver §9), así que este