/* ============================================================ PAGINA DE PROYECTO - las siete de renderizacion Se carga DESPUES de base-v2.css (header, hero, boton, label, CTA, footer, enlace con flecha, revelado) y de servicio.css (seccion clara de lectura). Aqui solo va lo propio de una pagina de proyecto. Todo esta bajo .proyecto, la tercera clase del : Es la plantilla que mas se repite en el sitio: siete paginas iguales cambiando fotos y textos. Por eso no lleva nada que dependa de un proyecto concreto. ============================================================ */ /* ============================================================ HERO - el nombre del proyecto manda servicio.css pone el H1 en --text-h1 y la columna en 52ch, que es la medida de una pagina de servicio. Aqui el nombre es EL elemento de la pagina, asi que sube a --text-hero y la columna se ensancha para que quepa. ============================================================ */ /* El contenido del hero se apoya abajo (align-items:flex-end viene de base-v2.css). Con el nombre a --text-hero el bloque es alto, y en una ventana baja llegaba a meterse debajo del header, que es fijo y mide 102px. Este padding-top reserva esa franja: cuando el hero no da de si, en vez de deslizarse bajo la barra el bloque empuja hacia abajo. En pantallas normales no cambia nada, porque el contenido sigue apoyado en el borde inferior. */ .proyecto .hero{padding-top:var(--space-8)} /* El padding de abajo tiene que dejar sitio al scroll-hint, que ocupa 86px desde el borde inferior del hero. Con --space-7 los creditos se le montaban encima 20px; con --space-8 quedaban a 12px, demasiado justo. La suma de dos tokens deja los creditos a 130px del borde: 44px de aire limpio sobre el aviso. */ .proyecto .hero-content{max-width:min(90ch,100%);padding-bottom:calc(var(--space-8) + var(--space-4))} .proyecto .hero h1{font-size:var(--text-hero);max-width:14ch} /* El hero ES la foto numero uno de la galeria, no un adorno de fondo. Por eso se puede pulsar y abre el lightbox en esa misma foto, y por eso NO se repite mas abajo en la galeria visible. El degradado se aclara arriba (de .72 a .45) para que el render se vea de verdad: si el hero es material, tiene que leerse como tal. */ .proyecto .hero-media{cursor:pointer} .proyecto .hero-shade{background:linear-gradient(to bottom,rgba(15,15,17,.45) 0%,rgba(15,15,17,.10) 30%,rgba(15,15,17,.50) 66%,rgba(15,15,17,.94) 100%)} /* Aviso de que hay contenido debajo, el mismo del home. Asi no hace falta recortar el hero: a 100vh el render pierde solo un 6% de alto; a 65vh perderia el 39%, que en un sitio de renders es inaceptable. */ .proyecto .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)} .proyecto .scroll-hint i{background:var(--color-accent-gold)} /* El enlace de vuelta, arriba del nombre */ .proyecto .hero .link-flecha{color:var(--color-text-on-dark-muted);margin-bottom:var(--space-4)} .proyecto .hero .link-flecha:hover{color:var(--color-text-on-dark)} /* --- Creditos editoriales --- Datos, sin adjetivos: tipo, ubicacion y disciplina, separados por espacio y apoyados sobre una linea dorada fina. El dorado es la linea; el texto va en gris claro. */ .proyecto .creditos{max-width:52ch;margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-accent-gold);display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5)} .proyecto .creditos span{font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-on-dark-muted);line-height:1.4} /* ============================================================ GALERIA Pocas fotos a la vista y grandes, una debajo de otra a todo el ancho del contenedor. Sin recorte: cada render se ve completo, con su proporcion. El resto de las fotos no estan en el HTML, viven en el atributo data-galeria y las inyecta js/lightbox.js cuando alguien las pide. Mismo mecanismo que cortinas. ============================================================ */ /* La descripcion se comprime: --space-6 arriba y NADA abajo, para que la primera foto de la galeria entre en pantalla pegada al final del texto. Antes eran 128px arriba y 128 abajo para dos lineas. OJO: al quitar el relleno de abajo, el margen inferior del ultimo parrafo se escapaba fuera de la seccion (margin collapsing) y dejaba una franja de 32px con el fondo oscuro del asomando entre la descripcion y la galeria. Por eso el margen del ultimo parrafo se pone a cero: sin margen que se escape, no hay franja. */ .proyecto .detalle{padding:var(--space-6) 0 0} .proyecto .lectura p:last-of-type{margin-bottom:0} .proyecto .obras{padding-top:var(--space-5)} /* --- La galeria se adapta al numero de fotos --- 1-3 fotos: todas visibles, a ancho completo y una debajo de otra. 4-7: 3 visibles, la primera ancha y dos a media. 8-11: 5 visibles, la primera ancha y cuatro en cuadricula. 12 o mas: 4 visibles, TODAS en cuadricula, ninguna a ancho completo. El resto de las fotos, en el lightbox. El cuarto escalon existe por las paginas de remodelacion: sus fotos son verticales (726x1290), y una vertical a ancho completo mide 2047px de alto, mas de dos pantallas por foto. A media anchura baja a 967px. Sin este escalon, una galeria de 13 verticales ocupaba 4,7 pantallas ella sola. Lo marca la clase que pone el HTML, porque el CSS no sabe contar hijos de forma fiable sin :has() ni nth-last-child encadenado. */ .proyecto .galeria-proy{display:grid;gap:var(--space-6)} .proyecto .galeria-proy--medias, .proyecto .galeria-proy--muchas, .proyecto .galeria-proy--muchisimas{grid-template-columns:1fr 1fr;gap:var(--space-4)} .proyecto .galeria-proy--medias .foto:first-child, .proyecto .galeria-proy--muchas .foto:first-child, .proyecto .galeria-proy--medias .galeria-abrir, .proyecto .galeria-proy--muchas .galeria-abrir, .proyecto .galeria-proy--muchisimas .galeria-abrir{grid-column:1/-1} .proyecto .foto{margin:0} .proyecto .foto__marco{display:block;overflow:hidden;cursor:pointer} .proyecto .foto__marco img{display:block;width:100%;height:auto;transition:transform var(--transition-slow)} .proyecto .foto__marco:hover img{transform:scale(1.03)} /* Pie de foto: etiqueta corta arriba y descripcion en serif */ .proyecto .foto figcaption{margin-top:var(--space-2)} .proyecto .foto .tag{display:block;font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-on-light-muted);margin-bottom:var(--space-1)} .proyecto .foto .tt{font-family:var(--font-serif);font-weight:300;font-size:var(--text-h3);line-height:var(--leading-tight);color:var(--color-text-on-light)} .proyecto .galeria-pie{margin-top:var(--space-5)} /* ============================================================ ANTES Y DESPUES - la banda de los comparadores En una remodelacion, el antes/despues es el argumento: no puede ser una foto mas de la galeria. Va en banda oscura de ancho completo entre la descripcion y el resultado, con el mismo tratamiento que el sello Pentagrama de cortinas y la banda de proyectos.html. Uno destacado a ancho completo y los demas en cuadricula de dos: el primero da la escala, los otros dan la extension del trabajo. El aspecto del comparador en si vive en css/comparador.css; aqui solo se pone la proporcion de cada caja. ============================================================ */ .proyecto .antes-despues{background:var(--color-bg-dark);color:var(--color-text-on-dark);border-top:1px solid var(--color-accent-gold);border-bottom:1px solid var(--color-accent-gold);padding:var(--space-7) 0} .proyecto .antes-despues .label{color:var(--color-text-on-dark-muted);margin-bottom:var(--space-2)} /* Apto Huertas tiene un H2 propio para esta seccion y Casa Huertas no. La regla vale para las dos: si el H2 existe se estiliza, y si no existe no estorba. La estructura de encabezados de cada pagina se respeta tal cual estaba. */ .proyecto .antes-despues h2{font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin:0 0 var(--space-3)} .proyecto .ad-nota{font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-on-dark-muted);max-width:58ch;margin:0 0 var(--space-5)} .proyecto .ad-destacado{margin:0 0 var(--space-6)} .proyecto .ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .proyecto .ad-pie{font-family:var(--font-sans);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-on-dark-muted);margin-top:var(--space-2)} /* El destacado va apaisado y grande; los cuatro de la cuadricula, algo mas altos, porque a media anchura una caja 3/2 se queda en 363px y arrastrar ahi dentro es incomodo. */ .proyecto .ad-destacado .ba{aspect-ratio:3/2} .proyecto .ad-grid .ba{aspect-ratio:4/3} /* ============================================================ NAVEGACION ENTRE PROYECTOS Solo texto con flecha, sin cajas. Cuando falta uno de los dos extremos (el primero no tiene anterior, el ultimo no tiene siguiente), el que queda se va a su lado con margin-left:auto. ============================================================ */ .proyecto .proy-nav{background:var(--color-bg-light);color:var(--color-text-on-light);padding:0 0 var(--space-8)} .proyecto .proy-nav .wrap{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;border-top:1px solid var(--color-border-light);padding-top:var(--space-4)} .proyecto .proy-nav .link-flecha--sig{margin-left:auto;text-align:right} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:880px){ .proyecto .obras{padding-top:var(--space-4)} /* En el movil el hero va justo y el scroll-hint se montaba sobre los creditos. En una pantalla tactil el gesto de bajar es evidente, asi que el aviso sobra: se oculta y el hero respira. */ .proyecto .scroll-hint{display:none} .proyecto .hero{padding-top:var(--space-7)} .proyecto .hero-content{padding-bottom:var(--space-6)} .proyecto .proy-nav{padding-bottom:var(--space-7)} /* Apilados, el "siguiente" ya no necesita empujarse a la derecha */ .proyecto .proy-nav .link-flecha--sig{margin-left:0;text-align:left} /* FOTOS A SANGRE: en el movil las fotos salen del contenedor y van de borde a borde. Un render apaisado pasa de 327 a 375px de ancho (de 218 a 250px de alto) y, sobre todo, es el gesto de las referencias aprobadas. El pie de foto sí se queda dentro del margen de lectura. El margen negativo es exactamente el padding del contenedor. */ .proyecto .galeria-proy{grid-template-columns:1fr;gap:var(--space-5)} .proyecto .galeria-proy .foto{grid-column:auto} /* Los comparadores tambien se apilan, y suben a 4/3 porque a 375px de ancho una caja 3/2 se queda en 250px de alto. */ .proyecto .antes-despues{padding:var(--space-6) 0} .proyecto .ad-grid{grid-template-columns:1fr;gap:var(--space-5)} .proyecto .ad-destacado{margin-bottom:var(--space-5)} .proyecto .ad-destacado .ba,.proyecto .ad-grid .ba{aspect-ratio:4/3} .proyecto .foto__marco{margin-left:calc(var(--container-padding) * -1);margin-right:calc(var(--container-padding) * -1)} .proyecto .foto figcaption{margin-top:var(--space-2)} }