@charset "UTF-8";
/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  color: #000;
  background: #fff;
}

html, body { height: 100%; }

body{
  font-family: "Montserrat", Arial, sans-serif;
  color: #000;
  background: #fff;

  /* elimina flexbox para flujo normal */
  display: block;
  min-height: auto;
}

.page{
  flex: 1;            /* empuja el footer abajo */
  padding-top: 85px;  /* ajusta según tu header */
}


/* HEADER */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 40px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* LOGO */
.logo {
  justify-self: start;
  text-decoration: none;
  color: #000;

  font-size: 27px;
  letter-spacing: 0.16em;
}

/* MENU CENTRO */
.menu {
  transform: translateX(90px);

  display: flex;
  gap:55px;
}

.menu a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  letter-spacing: 0.15em;
}

/* CART */
.cart {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #000;
}

.cart-count {
  font-size: 12px;
}

.menu a.active {
  font-weight: 500;   /* más grosor */
}	
	
.about-link{
  justify-self: center;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: #000;
  opacity: 0.7;
}

.about-link:hover{
  opacity: 1;
}

.menu{
  transform: translateX(100px); /* ajusta: 10px, 20px, 30px */
}


/* HOME LINKS */

.home{
  padding-top: 85px;
}


.subnav{

  max-width: 1000px;
  margin: 0 auto;        /* centrado */
  padding: 70px 40px 0;  /* separación arriba y abajo */
  display: flex;
  justify-content: center; /* enlaces centrados */
  gap: 20px;               /* espacio entre enlaces */
  flex-wrap: wrap;         /* evita que se rompa en pantallas pequeñas */
}


.subnav-link{
  color: #8a8a8a;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
}

.subnav-link-2 {
  color: black;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
	
}

.subnav-sep{
  color: #8a8a8a;
  opacity: 0.75;
  font-size: 16px;
  letter-spacing: 0.1em;
}

.subnav-link:hover{
  opacity: 0.6;
}



/* FOOTER */
.site-footer {
  padding: 60px 40px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative; /* 👈 importante */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left,
.footer-right {
  font-size: 13px;
  letter-spacing: 0.15em;
}

.footer-right {
  text-decoration: none;
  color: #000;
}

.footer-ig {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  text-decoration: none;
}

/* HOVER */
a:hover {
  opacity: 0.6;
}

/* PRINTS */
.prints-page{
  display: block;
  justify-content: center;
  align-items: flex-start;
}

.prints-subnav{
  position: relative;            /* necesario para la flecha */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 40px 0;          /* ⬆ más aire arriba */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;                     /* ⬅ más separación entre items */
}




.prints-link{
  color: #000;
  text-decoration: none;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.22em;
}

.prints-link.activo{
  font-weight: 500;
}

.prints-sep{
  color: #000;
  opacity: 0.55;
  font-size: 16px;
  letter-spacing: 0.1em;
}

.prints-link:hover{
  opacity: 0.6;
}

/* =============================
CONTACT PAGE
============================= */

.contact-page{
  display: flex;
  justify-content: center;
}

.contact-wrap{
  max-width: 600px;
  margin: 50px auto 0;
  padding: 0 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* FOTO */

.contact-media{
  margin-bottom: 40px;
}

.contact-img{
  width: 270px;
  height: 340px;

  object-fit: cover;
  object-position: center;

  display: block;
}

/* TEXTO */

.contact-info{
  max-width: 420px;
}

.contact-name{
  font-size: 18px;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.contact-bio{
  font-size: 13px;
  color: #555;
  margin-bottom: 35px;
  line-height: 1.6;
}

/* LISTA */

.contact-list{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact-item{
  display: flex;
  justify-content: space-between;
  align-items: center;

  text-decoration: none;
  color: #000;

  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.contact-item:last-child{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.contact-label{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #777;
}

.contact-value{
  font-size: 13px;
  letter-spacing: 0.08em;
}
/* =============================
   GALERÍA FP
   ============================= */

.gallery.editorial{
  max-width: 1600px;
  margin: 140px auto 0px;
  padding: 0 80px;
	
}

.row{
  position: relative;
  min-height: auto;
  margin-bottom: 0;
}

.img{
  position: absolute;
  top: 0;
  width: 22%;
  height: auto;
}

.row img:nth-child(1){ left: 0%; }
.row img:nth-child(2){ left: 26%; }
.row img:nth-child(3){ left: 52%; }
.row img:nth-child(4){ left: 78%; }

.row-1 { min-height: 400px; }
.row-2 { min-height: 400px; }
.row-3 { min-height: 400px; }
.row-4 { min-height: 400px; }
.row-5 { min-height: 500px; }
.row-6 { min-height: 400px; }
.row-7 { min-height: 600px; }
.row-8 { min-height: 500px; }
.row-9 { min-height: 400px; }
.row-10 { min-height: 400px; }
.row-11 { min-height: 400px; }
.row-12 { min-height: 400px; }
.row-13 { min-height: 400px; }
.row-14 { min-height: 400px; }
.row-15 { min-height: 400px; }
.row-16 { min-height: 400px; }
.row-17 { min-height: 400px; }
.row-18 { min-height: 400px; }
.row-spacer{
  min-height: 2400px; /* ajusta visualmente */
}

/*row 1*/ 

.img-1{ top: -10px;
        width: 303px;
	transform: translateX(-40px);
}
.img-2{ top: -60px;
        max-width: 230px;
	transform: translateX(0px);
}
.img-3{ top: 70px;
        max-width: 260px;
	transform: translateX(30px);
}
.img-4{ top: -40px;
        max-width: 280px;
	transform: translateX(40px);
}

/*row 2*/ 

.img-5{ top: 150px;
        max-width: 260px;
	transform: translateX(50px);
}
.img-6{ top: -10px;
        max-width: 250px;
	transform: translateX(40px);
}
.img-7{ top: 190px;
        width: 290px;
	transform: translateX(10px);
}
.img-8{ top: 110px;
        max-width: 220px;
	transform: translateX(60px);
}

/*row 3*/ 

.img-9{ top: 230px;
        max-width: 240px;
	transform: translateX(50px);
}

.img-59{ top: 310px;
        width: 510px;
	transform: translateX(130px);
}

.img-11{ top: 160px;
        max-width: 260px;
	transform: translateX( 380px);
}

/*row 4*/ 

.img-60{ top: 320px;
        width: 420px;
	transform: translateX(-50px);
}

.img-12{ top: 390px;
        max-width: 300px;
	transform: translateX(180px);
}

.img-10{ top: 340px;
        max-width: 300px;
	transform: translateX(260px);
}

/*row 5*/ 

.img-13{ top: 320px;
        max-width: 260px;
	transform: translateX(-20px);
}

.img-14{ top: 490px;
        max-width: 220px;
	transform: translateX(10px);
}

.img-15{ top: 590px;
        width: 310px;
	transform: translateX(0px);
}

.img-16{ top: 490px;
        max-width: 260px;
	transform: translateX(50px);
}

/*row 6*/ 

.img-17{ top: 350px;
        max-width: 290px;
	transform: translateX(-20px);
}

.img-18{ top: 460px;
        max-width: 240px;
	transform: translateX(-20px);
}

.img-19{ top: 645px;
        width: 310px;
	transform: translateX(-20px);
}

.img-20{ top: 465px;
        max-width: 220px;
	transform: translateX(90px);
}

/*row 7*/
 
.img-21{ top: 450px;
        width: 230px;
	transform: translateX(-50px);
}

.img-22{ top: 600px;
        width: 360px;
	transform: translateX(-120px);
}

.img-23{ top: 550px;
        width: 280px;
	transform: translateX(330px);
}

/*row 8*/ 

.img-24{ top: 590px;
        max-width: 280px;
	transform: translateX(0px);
}

.img-25{ top: 640px;
        max-width: 280px;
	transform: translateX(0px);
}

.img-26{ top: 430px;
        width: 220px;
	transform: translateX(30px);
}

.img-27{ top: 720px;
        max-width: 280px;
	transform: translateX(50px);
}

/*row 9*/
 
.img-28{ top: 730px;
        width: 220px;
	transform: translateX(-50px);
}

.img-29{ top: 800px;
        width: 470px;
	transform: translateX(-120px);
}

.img-30{ top: 520px;
        width: 260px;
	transform: translateX(70px);
}

/*row 10*/ 

.img-31{ top: 900px;
        max-width: 280px;
	transform: translateX(-10px);
}

.img-32{ top: 825px;
        width: 300px;
	transform: translateX(40px);
}

.img-62{ top: 670px;
        width: 220px;
	transform: translateX(80px);
}

.img-33{ top: 590px;
        max-width: 280px;
	transform: translateX(50px);
}

/*row 11*/
 
.img-34{ top: 1020px;
        width: 300px;
	transform: translateX(40px);
}

.img-35{ top: 990px;
        width: 240px;
	transform: translateX(90px);
}

.img-36{ top: 720px;
        width: 540px;
	transform: translateX(80px);
}

/*row 12*/ 

.img-37{ top: 1180px;
        max-width: 250px;
	transform: translateX(-10px);
}

.img-38{ top: 1135px;
        width: 310px;
	transform: translateX(40px);
}

.img-39{ top: 820px;
        width: 220px;
	transform: translateX(80px);
}

.img-40{ top: 920px;
        max-width: 280px;
	transform: translateX(50px);
}

/*row 13*/ 

.img-41{ top: 1270px;
        width: 310px;
	transform: translateX(-10px);
}

.img-42{ top: 1315px;
        width: 280px;
	transform: translateX(40px);
}

.img-43{ top: 1020px;
        width: 265px;
	transform: translateX(80px);
}

.img-44{ top: 1120px;
        max-width: 220px;
	transform: translateX(80px);
}

/*row 14*/
 
.img-55{ top: 1400px;
        width: 600px;
	transform: translateX(50px);
}

.img-45{ top: 1300px;
        width: 240px;
	transform: translateX(380px);
}

.img-46{ top: 1150px;
        width: 300px;
	transform: translateX(360px);
}

/*row 15*/
 
.img-47{ top: 1580px;
        width: 290px;
	transform: translateX(80px);
}

.img-48{ top: 1510px;
        width: 260px;
	transform: translateX(100px);
}

.img-56{ top: 1330px;
        width: 500px;
	transform: translateX(80px);
}

/*row 16*/
 
.img-61{ top: 1700px;
        width: 550px;
	transform: translateX(80px);
}

.img-49{ top: 1620px;
        width: 280px;
	transform: translateX(380px);
}

.img-50{ top: 1400px;
        width: 300px;
	transform: translateX(360px);
}

/*row 17*/ 

.img-51{ top: 1790px;
        width: 320px;
	transform: translateX(-20px);
}

.img-52{ top: 1840px;
        width: 265px;
	transform: translateX(70px);
}

.img-53{ top: 1710px;
        width: 265px;
	transform: translateX(80px);
}

.img-54{ top: 1840px;
        max-width: 275px;
	transform: translateX(80px);
}

/*row 18*/
 
.img-63{ top: 1950px;
        width: 600px;
	transform: translateX(50px);
}

.img-57{ top: 1900px;
        width: 450px;
	transform: translateX(380px);
}

.img-58{ top: 2300px;
        width: 450px;
	transform: translateX(150px);
}

/*row 19*/
 
.img-65{ top: 2050px;
        width: 280px;
	transform: translateX(270px);
}

.img-66{ top: 2280px;
        width: 500px;
	transform: translateX(380px);
}

.img-67{ top: 2530px;
        width: 450px;
	transform: translateX(-480px);
}

/*row 20*/
 
.img-68{ top: 2530px;
        width: 500px;
	transform: translateX(-30px);
}

.img-69{ top: 2310px;
        width: 450px;
	transform: translateX(380px);
}

.img-70{ top: 2730px;
        width: 270px;
	transform: translateX(-150px);
}


/*row 21*/

.img-71{ top: 2390px;
        width: 400px;
	transform: translateX(910px);
}
/* =============================
   SCROLL REVEAL
   ============================= */

.reveal{
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.reveal.is-visible{
  opacity: 1;
}







@media (max-width: 900px){
  .contact-wrap{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 34px 18px 0;
  }
}



/* RESPONSIVE */
@media (max-width: 768px) {
  .home {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .header-inner {
    padding: 20px;
  }
} 


/* mobile */
@media (max-width: 768px){
  .subnav{
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 34px 18px 0;
  }
  .subnav-sep{ display: none; } /* en móvil quita los | para que no se rompa */
  .subnav-link{ letter-spacing: 0.16em; font-size: 13px; }
}

@media (max-width: 768px){
  .prints-subnav{
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 34px 18px 0;
  }
  .prints-sep{ display: none; }
  .prints-link{ letter-spacing: 0.16em; font-size: 13px; }
}


/* =============================
   DOCUMENTARY · 
   ============================= */

.gallery-documentary{
  max-width: 1400px;
  margin: 140px auto 0px;
  padding: 0 80px;
}

.doc-row{
  position: relative;
  min-height: 450px;   /* base */
  margin-bottom: 120px;
}

.foto{
  position: absolute;
  height: auto;
}

.doc-row img:nth-child(1){ left: 0%; }
.doc-row img:nth-child(2){ left: 35%; }
.doc-row img:nth-child(3){ left: 70%; }

.column-1{ min-height: 315px; }
.column-2{ min-height: 315px; }
.column-3{ min-height: 315px; }
.column-4{ min-height: 300px; }



/* ROW 1 */

.foto-1{
  width: 245px;
  top: 0;
transform: translateX(30px);	
}

.foto-2{
  width: 557px;
  top: 0px;
	transform: translateX(-90px);
}

.foto-3{
  width: 245px;
  top: 0px;
	transform: translateX(100px);
}


/* ROW 2 */

.foto-4{
  width: 557px;
  top: 0;
	transform: translateX(30px);
}

.foto-5{
  width: 245px;
  top: 0px;
	transform: translateX(220px);
}

.foto-6{
  width: 245px;
  top: 0px;
	transform: translateX(100px);
}

/* ROW 3 */

.foto-7{
  width: 245px;
  top: 0;
transform: translateX(30px);	
}

.foto-8{
  width: 557px;
  top: 0px;
	transform: translateX(-90px);
}

.foto-9{
  width: 245px;
  top: 0px;
	transform: translateX(100px);
}

/* ROW 4 */

.foto-10{
  width: 260px;
  top: 0;
	transform: translateX(200px);
}

.foto-11{
  width: 260px;
  top: 0px;
	transform: translateX(100px);
}


/* =============================
   FAMILY GALLERY
   ============================= */


.gallery-family{
  max-width: 1400px;
  margin: 140px auto 0;
  padding: 0 80px;
}

.gallery-family img{
  position: absolute;
}

.fam-row{
  position: relative;
	min-height: 450px;
  margin-bottom: 120px;
}

.fam-row img{
  position: absolute;
  height: auto;
}

/* ===== FILA 4 COL ===== */

.fam-row.col-4 img:nth-child(1){ left: 0%; }
.fam-row.col-4 img:nth-child(2){ left: 26%; }
.fam-row.col-4 img:nth-child(3){ left: 52%; }
.fam-row.col-4 img:nth-child(4){ left: 78%; }

/* ===== FILA 3 COL ===== */

.fam-row.col-3 img:nth-child(1){ left: 0%; }
.fam-row.col-3 img:nth-child(2){ left: 35%; }
.fam-row.col-3 img:nth-child(3){ left: 70%; }

.fam-row.row-1{ min-height: 315px; }
.fam-row.row-2{ min-height: 315px; }
.fam-row.row-3{ min-height: 315px; }
.fam-row.row-4{ min-height: 315px; }
.fam-row.row-5{ min-height: 315px; }
.fam-row.row-6{ min-height: 315px; }
.fam-row.row-7{ min-height: 315px; }
.fam-row.row-8{ min-height: 315px; }

/* ===== ROW 1 ===== */

.fam-1{ width: 245px; top: 0; transform: translateX(0px); }
.fam-2{ width: 245px; top: 0px;transform: translateX(15px); }
.fam-3{ width: 245px; top: 0px;transform: translateX(15px); }
.fam-4{ width: 245px; top: 0px;transform: translateX(30px); }

/* ===== ROW 2 ===== */

.fam-5{ width: 245px; top: 0; }     /* vertical */
.fam-6{ width: 557px; top: 0px; transform: translateX(-90px);}  /* horizontal */
.fam-7{ width: 245px; top: 0px; transform: translateX(130px); } /* vertical */

/* ===== ROW 3 ===== */

.fam-8{ width: 557px; top: 0; }     
.fam-9{ width: 250px; top: 0px; transform: translateX(210px);}  
.fam-10{ width: 270px; top: 0px; transform: translateX(110px); } 

/* ===== ROW 4 ===== */

.fam-11{ width: 245px; top: 0; transform: translateX(0px); }
.fam-12{ width: 245px; top: 0px;transform: translateX(15px); }
.fam-13{ width: 245px; top: 0px;transform: translateX(15px); }
.fam-14{ width: 245px; top: 0px;transform: translateX(30px); }

/* ===== ROW 5 ===== */

.fam-15{ width: 515px; top: 0; }     
.fam-16{ width: 270px; top: 0px; transform: translateX(180px);}  
.fam-17{ width: 270px; top: 0px; transform: translateX(110px); }

/* ===== ROW 6 ===== */

.fam-18{ width: 245px; top: 0; }     /* vertical */
.fam-19{ width: 557px; top: 0px; transform: translateX(-90px);}  /* horizontal */
.fam-20{ width: 245px; top: 0px; transform: translateX(130px); } /* vertical */

/* ===== ROW 7 ===== */

.fam-21{ width: 250px; top: 0; }     
.fam-22{ width: 245px; top: 0px; transform: translateX(-90px);}  
.fam-23{ width: 557px; top: 0px; transform: translateX(-180px); }

/* ===== ROW 8 ===== */

.fam-24{ width: 557px; top: 0px; transform: translateX(150px);}  /* horizontal */

/* =============================
   LIFESTYLE · GRID DE ENTRADA
   ============================= */

.gallery.lifestyle{
  max-width: 1400px;
  margin: 120px auto 0px;
  padding: 0 80px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
}

/* tarjeta */
.life-item{
  text-decoration: none;
  color: #000;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.life-item img{
  width: 100%;
  height: auto;        /* 👈 clave */
  object-fit: unset;  /* o simplemente elimínalo */
  margin-bottom: 18px;
}


/* título */
.life-title{
  font-size: 12px;
  letter-spacing: 0.22em;
 
  text-align: center;
}

/* hover sutil */
.life-item:hover img{
  opacity: 0.85;
}

@media (max-width: 900px){
  .gallery.lifestyle{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 0 30px;
  }
}


/* =============================
   MENU VISUAL · 5 ENTRADAS
   ============================= */

/* =============================
   PRINTS · SUBTÍTULO
   ============================= */

.prints-subtitle{
  max-width: 1600px;
  margin: 170px auto 0px;   /* 👈 MENOS AIRE */
  padding: 0 0px;

  text-align: center;       /* 👈 CENTRADO */
  font-size: 15px;
  letter-spacing: 0.22em;
 
  color: #8a8a8a;
}

@media (max-width: 900px){
  .prints-subtitle{
    margin: 70px auto 20px;
    padding: 0 30px;
    font-size: 11px;
  }
}


.gallery.menu-visual{
  max-width: 1600px;
  margin: 10px auto 90px;
  padding: 80px 80px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

/* item */
.menu-item{
  text-decoration: none;
  color: #000;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* imagen */
.menu-item img{
  width: 270px;              /* 👈 CLAVE: ancho editorial fijo */
  height: auto;
  margin-bottom: 18px;
  transition: opacity 0.3s ease;
}

/* corrige solo la 2ª imagen del menú */
.menu-visual .menu-item:nth-child(2) img{
 width: 270px;
  height: 405px;
  object-fit: cover; 
	object-position: 80% 50%;  
}


/* título */
.menu-title{
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-align: center;
  max-width: 220px;          /* 👈 alinea con la imagen */
}

/* hover */
.menu-item:hover img{
  opacity: 0.85;
}

/* =============================
   ABOUT · EDITORIAL
   ============================= */

.about{
  padding-top: 100px;
  padding-bottom: 100px;
}

/* CONTENEDOR PRINCIPAL */
.about-inner{
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 80px;

  display: grid;
  grid-template-columns: 1.35fr 0.65fr; /* texto más ancho */
  gap: 140px;
  align-items: end; /* texto e imagen alineados abajo */
}

/* =============================
   TEXTO
   ============================= */

.about-text{
  display: grid;
  grid-template-columns: 1fr 1fr; /* DOS COLUMNAS */
  column-gap: 90px;
  row-gap: 0;

  /* este margen baja TODO el bloque de texto */
  margin-top: 120px;
}

/* HI */
.about-text h1{
  grid-column: 1;
  grid-row: 1;

  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.14em;

  margin-bottom: 100px; /* separación controlada */
	
}

/* TEXTO GENERAL */
.about-text p{
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.85;
  text-align: justify;
  margin-bottom: 22px;
}

/* PRIMER PÁRRAFO (intro) */
.about-text p:nth-of-type(1){
  grid-column: 1;
  grid-row: 3; /* empieza MÁS ABAJO */
}

/* SEGUNDO PÁRRAFO */
.about-text p:nth-of-type(2){
  grid-column: 1;
  grid-row: 4;
}

/* TERCER PÁRRAFO (columna derecha, MISMA ALTURA) */
.about-text p:nth-of-type(3){
  grid-column: 2;
  grid-row: 4;
}

/* CUARTO PÁRRAFO */
.about-text p:nth-of-type(4){
  grid-column: 1;
  grid-row: 5;
}

/* QUINTO PÁRRAFO */
.about-text p:nth-of-type(5){
  grid-column: 2;
  grid-row: 5;
}

/* =============================
   IMAGEN
   ============================= */

.about-image{
  display: flex;
  align-items: flex-end; /* base alineada con texto */
}

.about-image img{
  height: calc(100vh - 240px); /* nunca obliga a scroll */
  width: 100%;
  max-width: 420px;           /* controla lo ancha */
  
  aspect-ratio: 3 / 4;        /* 🔑 VERTICAL EDITORIAL */
  object-fit: cover;          /* 🔑 RECORTE LIMPIO */
  object-position: center;    /* centra el recorte */

  display: block;
}



/* =============================
   RESPONSIVE
   ============================= */

@media (max-width: 1100px){

  .about{
    padding-top: 160px;
    padding-bottom: 140px;
  }

  .about-inner{
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .about-text{
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .about-text h1{
    margin-bottom: 28px;
  }

  .about-text p{
    grid-column: 1 !important;
    grid-row: auto !important;
    text-align: left;
  }

  .about-image{
    align-items: center;
  }

  .about-image img{
    max-height: none;
    width: 100%;
  }
}

/* =============================
   PRINT SERIES · SCROLL
   ============================= */

.print-series{
  max-width: 1100px;
  margin: 150px auto 200px; /* 👈 debajo del subnav */
  padding: 0 40px;

  display: flex;
  flex-direction: column;
  align-items: center;     /* 🔑 CENTRADO REAL */
  gap: 140px;
}

/* imágenes */
.print-img{
  display: block;
  height: auto;
  margin: 0 auto;          /* 🔑 refuerzo */

}

/* verticales */
.print-img.vertical{
  width: 70%;
  max-width: 400px;
}

/* horizontal */
.print-img.horizontal{
  width: 100%;
  max-width: 600px;
}

.subnav-back{
  position: absolute;
  left: -80px;        /* 👈 empuja a la izquierda */
  top: 92px;          /* 👈 alineada verticalmente */

  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-weight: 300;
}

.subnav-back:hover{
  opacity: 0.6;
}

/* =============================
   PRINT ITEM + CAPTION
   ============================= */

/* CONTENEDOR DE CADA FOTO */
.print-item{
  width: 100%;              /* 👈 no limita la imagen */
  display: flex;
  flex-direction: column;
  align-items: center;      /* centra imagen + texto */
}


/* subtítulo */
.print-caption{
  margin-top: 18px;

  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  

  color: #6a6a6a;
  text-align: center;
}


@media (max-width: 900px){

  .row{
    display: flex;
    justify-content: space-between;
    min-height: auto;
  }

  .row img{
    position: static;
    width: 22%;
    transform: none !important;
  }

}


/* PRINT SHOP */

.prints-shop{
  max-width: 1350px;
  margin: 40px auto 200px;
  padding: 0 60px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px 80px;
}

.shop-img{
  width: 100%;
  height: auto;
  display: block;
}

.shop-info{
  margin-top: 18px;
}

.title{
  font-size: 14px;
  letter-spacing: 0.08em;
}

.date{
  font-size: 12px;
  color: #777;
  margin-top: 4px;
}

.price{
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

@media (max-width:900px){

  .prints-shop{
    grid-template-columns: 1fr;
    gap: 70px;
    padding: 0 30px;
  }

}

/* =============================
COLLECTION INTRO
============================= */

.collection-intro{
  max-width: 700px;
  margin: 60px auto 60px;
  padding: 0 40px;
  text-align: center;
}

.collection-title{
  font-size: 18px;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.collection-text{
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #555;
}

/* =============================
PRODUCT PAGE
============================= */

.product{
  max-width: 1400px;
  margin: 80px auto 200px;
  padding: 0 80px;

  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 120px;
	
	 align-items: start;
}


/* =============================
BACK ARROW
============================= */

.product-back{
  display: block;
  max-width: 1400px;
  margin: 40px auto 20px;
  padding: 0 80px;

  text-decoration: none;
  color: #000;

  font-size: 18px;
}


/* =============================
IMAGE
============================= */

.product-series{
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #777;
margin-top: -50px;
  margin-bottom: 14px;
}

.product-img{
  width: 100%;
  height: auto;
  display: block;
}

/* vertical */
.product-img.vertical{
  max-width: 520px;
}
/* horizontal */
.product-img.horizontal{
  max-width: 720px;
}

/* =============================
INFO
============================= */

.product-title{
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
	
	
}

.product-year{
  font-size: 13px;
  color: #666;
  margin-bottom: 30px;
}

.product-price{
  font-size: 18px;
  margin-bottom: 40px;
}


/* =============================
SIZE SELECTOR
============================= */

.product-options label{
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}

.product-select{
  width: fit-content;

  border: 1px solid #000;
  background: none;

  padding: 12px 24px;

  font-size: 12px;
  letter-spacing: 0.18em;

  margin-bottom: 30px;

  appearance: none;
}
.product-select,
.product-buy{
  width: 180px;
}


/* =============================
QUANTITY
============================= */

.product-qty{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.qty-btn{
  width: 34px;
  height: 34px;
  border: 1px solid #ccc;
  background: none;
}

.qty-number{
  font-size: 14px;
}


/* =============================
BUY BUTTON
============================= */

.product-buy{
  width: fit-content;

  background: none;
  color: #000;

  border: 1px solid #000;

  padding: 12px 24px;

  font-size: 12px;
  letter-spacing: 0.18em;

  margin-bottom: 40px;

  cursor: pointer;

  transition: all 0.2s ease;
}

.product-buy:hover{
  background: #000;
  color: #fff;
}


/* =============================
DESCRIPTION
============================= */

.product-description{
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}

.product-description p{
  margin-bottom: 8px;
}


/* =============================
RESPONSIVE
============================= */

@media (max-width:900px){

  .product{
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 0 30px;
  }

  .product-back{
    padding: 0 30px;
  }

}

.qty-number{
  width: 30px;
  text-align: center;
  display: inline-block;
}


/* =============================
LIGHTBOX
============================= */

.image-lightbox{

  position: fixed;
  inset: 0;

  background: rgba(255,255,255,0.92);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 2000;

  cursor: zoom-in;
}


/* imagen grande */

.lightbox-img{

  max-width: 90vw;
  max-height: 90vh;

  transition: transform .3s ease;

}


/* cerrar */

.lightbox-close{

  position: absolute;
  top: 40px;
  right: 50px;

  width: 28px;
  height: 28px;

  cursor: pointer;
}


/* línea 1 */
.lightbox-close::before,
.lightbox-close::after{
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  width: 20px;
  height: 2px;

  background: black;

}


/* diagonal */
.lightbox-close::before{
  transform: rotate(45deg);
}

/* diagonal opuesta */
.lightbox-close::after{
  transform: rotate(-45deg);
}

.zoomed{
  transform: scale(2);
  cursor: zoom-out;
}

.shop-item{
  text-decoration: none;
  color: inherit;
  display: block;
}

.title-small{
  font-size: 25px;
  letter-spacing: 0.08em;
}



/* =============================
INVESTMENT PAGE
============================= */

.investment-page{
  max-width: 800px;
  margin: 160px auto 200px;
  padding: 0 40px;
  text-align: center;
}

.investment-title{
  font-size: 21px;
  letter-spacing: 0.18em;
  margin-bottom: 5px;
}

.investment-intro{
  font-size: 13px;
  color: darkgray;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 80px;
}


/* CARD */

.investment-card{
  border: 1px solid rgba(0,0,0,0.1);
  padding: 70px 60px;
}


/* TITLE */

.session-title{
  font-size: 15px;
  letter-spacing: 0.22em;
  margin-bottom: 30px;
}


/* PRICE */

.session-price{
  font-size: 22px;
  letter-spacing: 0.08em;
  margin-bottom: 35px;
}


/* DETAILS */

.session-details{
  font-size: 12px;
  color: #777;
  line-height: 1.9;
  margin-bottom: 40px;
}


/* BUTTON */

.session-button{
  display: inline-block;

  border: 1px solid #000;
  padding: 12px 28px;

  font-size: 11px;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: #000;

  transition: all .2s ease;
}

.session-button:hover{
  background: #000;
  color: #fff;
}


/* =============================
   MESTIZA GALLERY
   ============================= */

.gallery-mestiza{
  max-width: 1400px;
  margin: 140px auto 0;
  padding: 0 80px;
}

/* filas */

.mestiza-row{
  position: relative;
  min-height: 315px;
  margin-bottom: 120px;
}

.mestiza-row img{
  position: absolute;
  height: auto;
}

/* columnas */

.mestiza-row img:nth-child(1){ left: 0%; }
.mestiza-row img:nth-child(2){ left: 35%; }
.mestiza-row img:nth-child(3){ left: 70%; }


/* =============================
ROW 1
============================= */

.mestiza-1{
  width: 245px;
  top: 0;
  transform: translateX(30px);
}

.mestiza-2{
  width: 245px;
  top: 0;
  transform: translateX(-85px);
}

.mestiza-3{
  width: 557px;
  top: 0;
  transform: translateX(-200px);
}


/* =============================
ROW 2
============================= */

.mestiza-4{
  width: 557px;
  top: 0;
  transform: translateX(30px);
}

.mestiza-5{
  width: 245px;
  top: 0;
  transform: translateX(230px);
}

.mestiza-6{
  width: 245px;
  top: 0;
  transform: translateX(115px);
}


/* =============================
ROW 3
============================= */

.mestiza-7{
  width: 260px;
  top: 0;
  transform: translateX(200px);
}

/* =============================
   BARANZATE GALLERY
   ============================= */

.gallery-baranzate{
  max-width: 1400px;
  margin: 140px auto 0;
  padding: 0 80px;
}

/* filas */

.baranzate-row{
  position: relative;
  min-height: 315px;
  margin-bottom: 120px;
}

.baranzate-row img{
  position: absolute;
  height: auto;
}

/* columnas */

.baranzate-row img:nth-child(1){ left: 0%; }
.baranzate-row img:nth-child(2){ left: 35%; }
.baranzate-row img:nth-child(3){ left: 70%; }



/* =============================
ROW 1
============================= */

.baranzate-1{
  width: 250px;
  top: 0;
  transform: translateX(30px);
}

.baranzate-2{
  width: 245px;
  top: 0;
  transform: translateX(-85px);
}

.baranzate-3{
  width: 557px;
  top: 0;
  transform: translateX(-200px);
}


/* =============================
ROW 2
============================= */

.baranzate-4{
  width: 245px;
  top: 0;
	  transform: translateX(30px);
}

.baranzate-5{
  width: 557px;
  top: 0;
  transform: translateX(-83px);
}

.baranzate-6{
  width: 245px;
  top: 0;
  transform: translateX(115px);
}


/* =============================
ROW 3
============================= */

.baranzate-7{
  width: 557px;
  top: 0;
	transform: translateX(30px);
}

.baranzate-8{
  width: 250px;
  top: 0;
  transform: translateX(230px);
}

/* =============================
   VINCENZA GALLERY
   ============================= */

.gallery-vincenza{
  max-width: 1400px;
  margin: 140px auto 0;
  padding: 0 80px;
}

/* filas */

.vincenza-row{
  position: relative;
  min-height: 315px;
  margin-bottom: 120px;
}

.vincenza-row img{
  position: absolute;
  height: auto;
}

/* columnas */

.vincenza-row img:nth-child(1){ left:0%; }
.vincenza-row img:nth-child(2){ left:35%; }
.vincenza-row img:nth-child(3){ left:70%; }


/* =============================
ROW 1
horizontal vertical vertical
============================= */

.vincenza-1{
  width:557px;
  top:0;
	  transform: translateX(30px);
}

.vincenza-2{
  width:248px;
  top:0;
  transform:translateX(220px);
}

.vincenza-3{
  width:255px;
  top:0;
  transform:translateX(105px);
}


/* =============================
ROW 2
horizontal horizontal
============================= */

.vincenza-4{
  width:557px;
  top:0;
	transform: translateX(30px);
}

.vincenza-5{
  width:557px;
  top:0;
  transform:translateX(236px);
}


/* =============================
ROW 3
vertical horizontal
============================= */

.vincenza-6{
  width:245px;
  top:0;
	transform: translateX(30px);
}

.vincenza-7{
  width:557px;
  top:0;
  transform:translateX(-75px);
}

/* =============================
   PETIT GALLERY
   ============================= */

.gallery-petit{
  max-width: 1400px;
  margin: 140px auto 0;
  padding: 0 80px;
}

/* fila */

.petit-row{
  position: relative;
  min-height: 450px;
  margin-bottom: 120px;
}

.petit-row img{
  position: absolute;
  height: auto;
}

/* columnas */

.petit-row img:nth-child(1){ left:0%; }
.petit-row img:nth-child(2){ left:35%; }
.petit-row img:nth-child(3){ left:70%; }


/* =============================
ROW 1
vertical vertical vertical
============================= */

.petit-1{
  width:270px;
  top:0;
	transform:translateX(120px);
}

.petit-2{
  width:270px;
  top:0;
  transform:translateX(55px);
}

.petit-3{
  width:270px;
  top:0;
  transform:translateX(-10px);
}

/* FRAME OPTIONS */

.frame-options{
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.frame-btn{
  border: 1px solid rgba(0,0,0,0.2);
  background: none;
  padding: 10px 18px;

  font-size: 11px;
  letter-spacing: 0.18em;

  color: #555;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover sutil */
.frame-btn:hover{
  border-color: #000;
  color: #000;
}

/* activo (muy fino) */
.frame-btn.active{
  border-color: #000;
  color: #000;
  background: rgba(0,0,0,0.04);
}


.frame-request-note{
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #777;
  margin-top: -15px; /* pega al selector */
  margin-bottom: 30px;
}

.frame-request-note a{
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  padding-bottom: 2px;
  margin-left: 4px;
}

.frame-request-note a:hover{
  opacity: 0.6;
}
.frame-request-note{
  display: none;
}

/* SOLO verticales con marco */
.product-img.vertical.frame-version{
  max-width: 580px;
}

/* horizontales con marco = igual tamaño */
.product-img.horizontal.frame-version{
  max-width: 720px;
}
}

/* =============================
PACKAGES
============================= */

.packages{
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 100px;
}

/* tarjeta */

.package{
  border: 1px solid rgba(0,0,0,0.08);
  padding: 40px 40px 30px;
  position: relative;
}

/* etiqueta arriba */

.package-top{
  position: absolute;
  top: -16px;
  left: 30px;

  background: #f2f2f2; /* 👈 gris sólido limpio (no cálido) */
  color: #000;

  padding: 6px 18px;
  border-radius: 20px;

  font-size: 11px;
  letter-spacing: 0.22em;
}

/* contenido */

.package-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* info */

.package-info p{
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #444;
  line-height: 1.9;
	text-align:left;
}

/* precio */

.package-price{
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #000;
}

/* =============================
INCLUDED
============================= */

.included{
  margin-top: 60px;
}

.included-title{
  font-size: 14px;
  letter-spacing: 0.22em;
  margin-bottom: 30px;
}

/* caja */

.included-box{
  border: 1px solid rgba(0,0,0,0.08);
  padding: 40px;

  text-align: left;
}

/* texto */

.included-box p{
  font-size: 13px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* responsive */

@media (max-width:700px){

  .package-content{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .package-price{
    font-size: 26px;
  }

}

/* =============================
CTA BUTTON SERVICES
============================= */

.services-cta{
  display: inline-block;
  margin-top: 60px;

  border: 1px solid #000;
  padding: 12px 32px;

  font-size: 11px;
  letter-spacing: 0.22em;
  text-decoration: none;
  color: #000;

  transition: all 0.2s ease;
}

/* hover sutil */
.services-cta:hover{
  background: #000;
  color: #fff;
}
.cart-page{
  max-width: 900px;
  margin: 140px auto 200px;
  padding: 0 40px;
}

.cart-title{
  font-size: 14px;
  letter-spacing: 0.22em;
  margin-bottom: 60px;
}

/* =============================
CART PAGE
============================= */

.cart-page{
  max-width: 900px;
  margin: 100px auto 200px;
  padding: 0 40px;
}


/* =============================
HEADER
============================= */

.cart-header{
  display: flex;
  align-items: center;
  gap: 20px;

  margin-bottom: 80px;
}

.cart-back{
  position: fixed;

  top: 30px;
  left: 40px;

  text-decoration: none;
  color: #000;
  font-size: 18px;

  z-index: 2000; /* para que esté por encima */
}

.cart-title{
  font-size: 26px;
  letter-spacing: 0.18em;
}


/* =============================
ITEM
============================= */

.cart-item{
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 30px;

  margin-bottom: 20px;
}

.cart-img{
  width: 120px;
  height: auto;
  display: block;
}

.cart-info{
  font-size: 13px;
}

.cart-name{
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.cart-details{
  font-size: 12px;
  color: #777;
}


/* =============================
QTY
============================= */

.cart-qty{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cart-qty .qty-btn{
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0,0,0,0.2);
  background: none;
  cursor: pointer;
}

.cart-qty .qty-number{
  font-size: 13px;
  width: 20px;
  text-align: center;
}

/* QTY centrado (nuevo bloque) */

.cart-qty-center{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;

  margin-bottom: 40px;
}

.cart-qty-center .qty-btn{
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0,0,0,0.2);
  background: none;
}

.cart-qty-center .qty-number{
  font-size: 14px;
  width: 24px;
  text-align: center;
}



/* =============================
SUMMARY
============================= */

.cart-summary{
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  margin-top: 40px;
}

.cart-summary-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}


.cart-total{
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #555;
}


/* =============================
BUTTON
============================= */

.cart-checkout{
  border: 1px solid #000;
  background: none;

  padding: 12px 32px; /* 👈 más grande */
  font-size: 12px;
  letter-spacing: 0.24em;

  margin-bottom: 10px;

  cursor: pointer;
  transition: all 0.2s ease;
}

.cart-checkout:hover{
  background: #000;
  color: #fff;
}

.cart-price{
  font-size: 14px;
  letter-spacing: 0.08em;
}