/* ============================================================ HOME - index.html unicamente Se carga DESPUES de base-v2.css, que ya trae lo comun a las cuatro paginas rediseñadas (contenedor, tipografia, label, boton, header, hero, footer, CTA, revelado). Aqui solo va lo que es propio del home. Todo esta bajo .home, la segunda clase del : Todo el espaciado sale de los tokens de tokens.css. ============================================================ */ /* ============================================================ HERO - lo que no coincide con las paginas de servicio El resto del hero (la caja, el medio, el degradado, el label y la cursiva dorada del H1) vive en base-v2.css. ============================================================ */ .home .hero-content{position:relative;z-index:2;max-width:min(60ch,100%);animation:none;padding-bottom:var(--space-7)} .home .hero h1{font-size:var(--text-hero);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin:0 0 var(--space-3)} .home .hero p{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-on-dark-muted);max-width:52ch;margin:0 0 var(--space-4)} .home .hero-cta{display:flex;gap:var(--space-2);flex-wrap:wrap} .home .scroll-hint{bottom:var(--space-3);font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-text-on-dark-muted);gap:var(--space-1)} .home .scroll-hint i{background:var(--color-accent-gold)} /* ============================================================ TRES LINEAS DE NEGOCIO - filas alternadas sobre fondo claro Es el mismo patron que las filas de las paginas de servicio, pero alli la fila se llama .obra y aqui .linea. No se pueden unificar: en el home, .obra ya significa otra cosa (una pieza de la grilla de proyectos, mas abajo en este mismo archivo). ============================================================ */ .home .lineas{background:var(--color-bg-light);color:var(--color-text-on-light);padding:var(--space-8) 0} .home .lineas .sec-head{max-width:34ch;margin:0 0 var(--space-7)} .home .lineas .sec-head .label{color:var(--color-text-on-light-muted);margin-bottom:var(--space-2)} .home .lineas h2{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-light);margin:0} /* align-items centra ambas columnas; align-self en el texto deja el centrado explicito y a prueba de cambios futuros en la fila. */ .home .linea{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center} .home .linea__texto{align-self:center} .home .linea + .linea{margin-top:var(--space-8)} .home .linea__media{position:relative;overflow:hidden;aspect-ratio:3/4} .home .linea__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)} .home .linea:hover .linea__media img{transform:scale(1.04)} /* Fila invertida: el texto pasa a la izquierda y la foto a la derecha */ .home .linea--invertida .linea__media{order:2} .home .linea--invertida .linea__texto{order:1} .home .linea__texto .label{color:var(--color-text-on-light-muted);margin-bottom:var(--space-3)} .home .linea__texto h3{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-light);margin:0 0 var(--space-3)} .home .linea__texto p{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-on-light-muted);max-width:46ch;margin:0 0 var(--space-4)} .home .linea__nota{display:block;font-family:var(--font-sans);font-size:var(--text-small);letter-spacing:.04em;color:var(--color-text-on-light);margin:0 0 var(--space-4);padding-top:var(--space-2);border-top:1px solid var(--color-border-light);max-width:46ch} /* El subrayado dorado tambien aparece al pasar el cursor por la fila entera, no solo por el enlace. El resto del enlace con flecha esta en base-v2.css. */ .home .link-flecha:hover::after,.home .linea:hover .link-flecha::after{width:100%} /* ============================================================ PROYECTOS - grilla asimetrica sobre fondo oscuro OJO CON EL NOMBRE: aqui .obra es una pieza de esta grilla. En las paginas de servicio, .obra es una fila alternada. Son dos componentes distintos con el mismo nombre, y por eso ninguno de los dos puede vivir en base-v2.css. ============================================================ */ .home .porta{background:var(--color-bg-dark);padding:var(--space-8) 0} .home .porta .sec-head{max-width:34ch;margin:0 0 var(--space-6)} .home .porta .sec-head .label{color:var(--color-text-on-dark-muted);margin-bottom:var(--space-2)} .home .porta h2{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin:0} .home .galeria{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(190px,21vw,300px);gap:var(--space-1)} .home .obra{position:relative;overflow:hidden;aspect-ratio:auto;border:none;background:var(--color-bg-dark);display:block} .home .obra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow),opacity var(--transition-medium)} .home .obra:hover img{transform:scale(1.05);opacity:.55} /* Grilla asimetrica: dos piezas grandes (7 columnas) y tres menores (5 columnas) */ .home .obra:nth-child(1){grid-column:span 7;grid-row:span 2} .home .obra:nth-child(2){grid-column:span 5} .home .obra:nth-child(3){grid-column:span 5} .home .obra:nth-child(4){grid-column:span 5} .home .obra:nth-child(5){grid-column:span 7} .home .obra figcaption{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--space-3);background:none;opacity:0;transform:translateY(var(--space-1));transition:opacity var(--transition-medium),transform var(--transition-medium)} .home .obra:hover figcaption{opacity:1;transform:none} .home .obra .tt{display:block;font-family:var(--font-serif);font-weight:300;font-size:var(--text-h3);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin-bottom:var(--space-1)} .home .obra .tag{display:block;font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-accent-gold)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ /* Sin hover en tactil: nombre y tipo de proyecto siempre visibles */ .home .obra figcaption{opacity:1;transform:none;background:linear-gradient(transparent,rgba(15,15,17,.9))} .home .obra:hover img{transform:none;opacity:1} } @media(max-width:880px){ .home .lineas,.home .porta{padding:var(--space-7) 0} /* Filas apiladas: imagen arriba, texto abajo (tambien en las invertidas). Apiladas ya no hay nada que centrar: el texto va debajo de la imagen con su espaciado normal, asi que se desactiva el centrado vertical. */ .home .linea{grid-template-columns:1fr;gap:var(--space-4);align-items:start} .home .linea__texto{align-self:start} .home .linea + .linea{margin-top:var(--space-7)} .home .linea--invertida .linea__media{order:1} .home .linea--invertida .linea__texto{order:2} .home .linea__media{aspect-ratio:4/3} /* Grilla de proyectos: una sola columna */ .home .galeria{grid-template-columns:1fr;grid-auto-rows:auto;gap:var(--space-2)} .home .obra:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:4/3} /* Esta regla NO puede irse a base-v2.css: su regla base vive aqui arriba, y base-v2 carga antes, asi que alli perderia. */ .home .hero-content{padding-bottom:var(--space-6)} } /* ============================================================ MENOS MOVIMIENTO - respeta prefers-reduced-motion Las dos reglas generales (.rv y el parallax del hero) estan en base-v2.css. Aqui solo los dos zooms propios del home. ============================================================ */ @media(prefers-reduced-motion:reduce){ .home .obra:hover img{transform:none} .home .linea:hover .linea__media img{transform:none} }