/* ============================================================ PAGINAS DE SERVICIO - renderizacion, cortinas y proyectos Antes se llamaba renderizacion.css, pero el nombre mentia: lo cargan las tres paginas que comparten esta estructura (hero oscuro, seccion clara de lectura y filas alternadas). Se carga DESPUES de base-v2.css, que ya trae lo comun a las cuatro paginas rediseñadas (contenedor, tipografia, label, boton, header, footer, CTA, revelado). Todo esta bajo .servicio, la segunda clase del : renderizacion.html cortinas.html proyectos.html ============================================================ */ /* ============================================================ HERO - lo que no coincide con el home El resto del hero (la caja, el medio, el degradado, el label y la cursiva dorada del H1) vive en base-v2.css. ============================================================ */ .servicio .hero-content{position:relative;z-index:2;max-width:min(52ch,100%);padding-bottom:var(--space-7)} .servicio .hero h1{font-size:var(--text-h1);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin:0} /* ============================================================ DETALLE DEL SERVICIO - fondo claro, ancho de lectura comodo ============================================================ */ .servicio .detalle{background:var(--color-bg-light);color:var(--color-text-on-light);padding:var(--space-8) 0} /* Ancho de lectura: la columna de texto no llega al borde del contenedor. Alrededor de 58 caracteres por linea, que es donde la lectura es mas comoda. */ .servicio .lectura{max-width:58ch} .servicio .lectura .label{color:var(--color-text-on-light-muted);margin-bottom:var(--space-2)} .servicio .lectura h2{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-light);margin:0 0 var(--space-4)} .servicio .lectura p{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-on-light-muted);margin:0 0 var(--space-3)} .servicio .lectura p:last-of-type{margin-bottom:var(--space-4)} /* Etiquetas de tipo de visualizacion */ .servicio .scope{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0} .servicio .scope span{font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-on-light);border:1px solid var(--color-border-light);border-radius:var(--radius);padding:var(--space-1) var(--space-2)} /* ============================================================ OBRAS - filas alternadas Mismo patron que las tres lineas de negocio del home: la foto a un lado y el texto al otro, y en la fila siguiente al reves. La clase obra--invertida es la unica que cambia el orden. Fondo claro, igual que la seccion de arriba. OJO CON EL NOMBRE: aqui .obra es una FILA. En el home, .obra es una pieza de la grilla de proyectos. Son dos componentes distintos con el mismo nombre, y por eso ninguno de los dos puede vivir en base-v2.css. Cada uno se queda en su archivo. ============================================================ */ /* SIN padding arriba: .detalle tiene el mismo fondo claro y ya cierra con --space-8 abajo. Ponerlo en las dos secciones sumaba 256px de aire invisible entre los botones de tipo y la primera fila. */ .servicio .obras{background:var(--color-bg-light);color:var(--color-text-on-light);padding:0 0 var(--space-7)} /* align-items centra ambas columnas; align-self en el texto deja el bloque centrado verticalmente respecto a la foto. Los tres valores de la primera linea (aspect-ratio, background, border) anulan lo que estilos.css le pone a .obra en las paginas viejas: aqui .obra ya no es una tarjeta, es una fila. */ .servicio .obra{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center;aspect-ratio:auto;background:none;border:none;overflow:visible} .servicio .obra__texto{align-self:center} .servicio .obra + .obra{margin-top:var(--space-7)} .servicio .obra__media{position:relative;display:block;overflow:hidden;aspect-ratio:3/2} .servicio .obra__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)} .servicio .obra:hover .obra__media img{transform:scale(1.04)} /* Fila invertida: el texto pasa a la izquierda y la foto a la derecha */ .servicio .obra--invertida .obra__media{order:2} .servicio .obra--invertida .obra__texto{order:1} .servicio .obra__nombre{font-family:var(--font-serif);font-weight:300;font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-light);margin:0 0 var(--space-2)} .servicio .obra__texto .label{color:var(--color-text-on-light-muted);margin-bottom:var(--space-3)} .servicio .obra__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)} /* 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. */ .servicio .link-flecha:hover::after,.servicio .obra:hover .link-flecha::after{width:100%} .servicio .proj-more{text-align:center;color:var(--color-text-on-light-muted);font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;margin-top:var(--space-6)} .servicio .proj-more::before,.servicio .proj-more::after{content:"";display:inline-block;width:var(--space-4);height:1px;background:var(--color-border-light);vertical-align:middle;margin:0 var(--space-2)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:880px){ .servicio .detalle{padding:var(--space-7) 0} /* .obras no lleva padding arriba: lo aporta el .detalle, que tiene el mismo fondo claro. Ver la nota de la regla base. */ .servicio .obras{padding:0 0 var(--space-6)} /* Filas apiladas: imagen arriba, texto abajo (tambien en las invertidas). Apiladas ya no hay nada que centrar verticalmente: el texto va debajo de la imagen. */ .servicio .obra{grid-template-columns:1fr;gap:var(--space-4);align-items:start} .servicio .obra__texto{align-self:start} .servicio .obra + .obra{margin-top:var(--space-6)} .servicio .obra--invertida .obra__media{order:1} .servicio .obra--invertida .obra__texto{order:2} /* Esta regla NO puede irse a base-v2.css: su regla base vive aqui arriba, y base-v2 carga antes, asi que alli perderia. */ .servicio .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 el zoom de las filas. ============================================================ */ @media(prefers-reduced-motion:reduce){ .servicio .obra:hover .obra__media img{transform:none} }