/* ============================================================
   CORTINAS - cortinas.html unicamente
   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 y filas alternadas). Aqui solo va lo que es
   propio de cortinas.

   Todo esta bajo .cortinas (la segunda clase del <body>), asi que
   ninguna otra pagina puede verse afectada aunque este archivo se
   cargara por error.

   NOTA DE ARQUITECTURA: al cerrar la fase 3, lo comun de
   servicio.css y este archivo se saca a css/base-v2.css y
   cada pagina se queda solo con lo suyo.
   ============================================================ */

/* ============================================================
   CATALOGO DE TIPOS - ajustes sobre las filas de servicio.css
   ============================================================ */

/* La foto va VERTICAL, no horizontal como en las paginas de servicio. La
   cortineria se fotografia de piso a techo: un recorte apaisado le
   corta la caida de la tela, que es justo lo que hay que ver. Es la
   misma proporcion que usa la seccion de lineas del home. */
.cortinas .obra__media{aspect-ratio:3/4}

/* Aqui el nombre del tipo SI es un <h2> (ya lo era antes y no se
   toca la estructura de encabezados), asi que se le da el mismo
   aspecto que al .obra__nombre de servicio.css. */
.cortinas .obra__texto h2{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-3)}

/* En servicio.css la seccion de filas no lleva padding arriba
   porque viene despues de otra seccion del mismo fondo claro. Aqui
   viene despues de la banda oscura de Pentagrama, asi que necesita
   aire para que la primera fila no arranque pegada al borde. */
.cortinas .obras{padding-top:var(--space-6)}

/* El enlace de la galeria es un <button>, no un <a>: abre una ventana
   dentro de la misma pagina, no lleva a otra direccion. Se le quitan
   los estilos propios del boton para que se vea igual que el enlace
   con flecha de base-v2.css. */
.cortinas button.link-flecha{background:none;border:0;border-radius:var(--radius);padding:0 0 var(--space-1);margin:0;font-family:var(--font-sans);font-size:var(--text-label);text-align:left;cursor:pointer}

/* ============================================================
   SELLO PENTAGRAMA
   Banda oscura de ancho completo entre la intro y el catalogo.
   El peso lo dan el fondo oscuro, las dos lineas doradas finas y el
   tamano de la palabra: no hay insignia, ni estrella, ni color de
   relleno. El dorado sigue siendo casi invisible - solo las dos
   lineas divisorias.
   ============================================================ */
.cortinas .pentagrama{background:var(--color-bg-dark);border-top:1px solid var(--color-accent-gold);border-bottom:1px solid var(--color-accent-gold);padding:var(--space-7) 0;text-align:center}
.cortinas .pentagrama .label{color:var(--color-text-on-dark-muted);margin-bottom:var(--space-3)}
.cortinas .pentagrama__marca{font-family:var(--font-serif);font-weight:300;font-size:var(--text-h2);line-height:var(--leading-tight);letter-spacing:.02em;color:var(--color-text-on-dark);margin:0 0 var(--space-3)}
.cortinas .pentagrama p{font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-text-on-dark-muted);max-width:52ch;margin:0 auto}
.cortinas .pentagrama strong{color:var(--color-text-on-dark);font-weight:400}

/* ============================================================
   RESPONSIVE
   Misma proporcion de reduccion que en las otras paginas.
   ============================================================ */
@media(max-width:880px){
  .cortinas .pentagrama{padding:var(--space-6) 0}
  .cortinas .obras{padding-top:var(--space-5)}
}
/* El lightbox de estas galerias vive ahora en css/lightbox.css,
   porque tambien lo usan las paginas de proyecto. */
