/* UNIVERS BOLD */
@font-face {
  font-family: 'Univers-Bold';
  src: url('fonts/Univers-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* UNIVERS BOLD CONDENSED */
@font-face {
  font-family: 'Univers-Bold-Condensed';
  src: url('fonts/Univers-Bold-Condensed.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}


/* --------------------------------------------------
   RESET GENERAL
-------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: #fff;
  color: #000;
  font-family: 'Inter', sans-serif;
}

/* --------------------------------------------------
   HEADER + MENÚ SUPERIOR DERECHA
-------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 26px 40px;
  background: #ffffff;
  z-index: 50;
}

nav {
  display: flex;
  gap: 28px;
}

nav a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* --------------------------------------------------
   TITULAR PRINCIPAL FIJO — “CLARA GRAN”
-------------------------------------------------- */
.brand a {
  text-decoration: none;
  color: black;
}

/* --------------------------------------------------
   SECCIÓN DE OBRAS (IMÁGENES)
-------------------------------------------------- */
main {
  padding-top: 300px;  /* espacio superior para que el scroll no tape imágenes */
}

.works {
  display: flex;
  flex-direction: column;
  gap:200px;           /* separación entre bloques */
}

.work {
  display: flex;
  align-items: flex-start;   /* alinea la parte superior de imagen y texto */
  gap: 15px;                 /* separación entre imagen y texto */
  margin-bottom: 10px;       /* separación entre obras (ajústalo si quieres menos o más) */
}

/* Imagen */
.work img {
  display: block;
  margin-left: 250px;         /* margen desde el borde izquierdo de la página */
  max-width: 55vw;           /* evita que la imagen coma demasiado espacio y empuje el texto fuera */
  height: auto;
  object-fit: contain;
}

/* Título y año */
.meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* evita que se centren entre sí */
  margin-top: 0;             /* se alinean arriba */
  margin-right: 40px;        /* margen derecho igual que la imagen izquierda para equilibrio */
}

.meta h2 {
  margin: 0;
  font-size: 14px;
  font-family: 'Univers-Bold', sans-serif;
  font-weight: bold;
}

.meta p {
  margin: 4px 0 0 0;
  font-size: 12px;
  font-family: 'Univers-Bold', sans-serif;
  font-weight: bold;
}


/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */
@media (max-width: 768px) {
  .brand {
    top: 90px;
    left: 20px;
    font-size: 28px;
  }

  header {
    padding: 20px 22px;
  }

  nav {
    gap: 18px;
  }

  .meta {
    margin: 12px 20px 0;
  }
}

.about-text {
  margin-left: -40px;   /* mueve todo el bloque 40px hacia la izquierda */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 60px;
  height: 100vh;
  flex-direction: column;  /* aquí obligamos los párrafos a ir en columna */
}



.about-text p {
  margin-bottom: 17px;   /* espacio entre párrafos */
  font-family: "Helvetica", sans-serif;
  font-size: 11pt;
  line-height: 1.55;
  max-width: 700px;
  text-align: justify;
  text-align-last: left;   /* última línea centrada */
  hyphens: no;             /* división correcta de palabras */
}
/* ------------------------ */


/* HEADER FIJO */
.site-header {
  **position: fixed;**
  **top: 0;**
  **left: 0;**
  **width: 100%;**
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  z-index: 200;
  **border-bottom: 1px solid #fff;**
}


/* CLARA GRAN */
.brand {
  font-family: "Univers Bold Condensed", sans-serif;
  font-size: 36px;
  margin: 0;
}
.brand a {
  text-decoration: none;
  color: black;
}

/* MENÚ */
nav a {
  font-family: "Univers Bold", sans-serif;
  font-size: 14px;
  color: black;
  text-decoration: none;
  margin-left: 40px;
}
nav a:hover {
  opacity: 0.6;
}

/* ------------------------ */
/* LAYOUT PÁGINA PROYECTO */
.project {
  display: flex;
  flex-direction: row;
  gap: 160px; /* aumenta separación entre texto e imágenes */
  padding: 180px 40px 60px; /* espacio para el header fijo */
}

/* TEXTO */
.project-text {
  width: 40%; 
  max-width: 400px;
}
.project-text h2 {
  font-family: "Univers Bold", sans-serif;
  font-size: 14px;
  margin-bottom: 5px;
  text-transform: uppercase;
  margin-left: 80px;
}
.project-text p {
  font-family: Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.55;
  text-align: justify;
  text-align-last: left;
  margin-bottom: 22px;
  margin-left: 80px;
}

/* GALERÍA */
.project-gallery {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
margin-bottom: 140px;
}
.project-gallery img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.project-page .site-header {
  **position: fixed;   /* mantiene menú fijo en todas las páginas */**
}
/* Mantener layout anterior */
.soup-image {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 140px;
}

/* ---- HOME ESPECIAL ---- */
body.home .brand {
  position: fixed;
  top: 100px;
  left: 20px;
  z-index: 300;
}

body.home .brand a {
  font-family: 'Univers-Bold-Condensed', sans-serif;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.5px;
  pointer-events: none; /* evita bloquear clics */
  text-decoration: none;
  color: black;
}

/* ---- RESTO DE PÁGINAS ---- */
body:not(.home) .brand {
  position: relative;
  top: 0;
  left: 0;
}

body:not(.home) .brand a {
  font-family: 'Univers-Bold-Condensed', sans-serif;
  font-size: 30px; /* tamaño alineado con menú */
  color: black;
  text-decoration: none;
}

/* ---- CORRECCIÓN PÁGINA ABOUT ---- */
body.about-page .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  border-bottom: 1px solid white;
}

body.about-page .brand {
  position: relative;
  margin: 0;
}

body.about-page .brand a {
  font-family: 'Univers-Bold-Condensed', sans-serif;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

}
/* Layout vertical para ROUND */
/* ---- LAYOUT PÁGINA ROUND (vertical centrado) ---- */

/* ---- LAYOUT PÁGINA ROUND (vertical centrado) ---- */
body.round-page {
  margin: 0;
}

.project--vertical {
  display: flex;              /* flex correcto */
  flex-direction: column;     /* columna: primero vídeo, luego texto */
  align-items: center;        /* centra horizontalmente los hijos */
  padding-top: 160px;         /* despeja el header fijo */
  gap: 60px;                  /* separación entre bloques */
  width: 100%;
  max-width: 900px;           /* límite de ancho del contenido */
  margin: 0 auto 200px;       /* centra el contenedor en la página */
}

.project--vertical .project-media,
.project--vertical .project-text {
  width: 100%;
  max-width: 900px;           /* mismo ancho para vídeo y texto */
}

.project--vertical .project-media iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

body.round-page .project-text h2,
.project--vertical .project-text p {
  font-size: 11pt;
  line-height: 1.55;
  text-align: justify;       /* justifica todas las líneas */
  text-align-last: left;     /* última línea alineada a la izquierda */
  margin-bottom: 20px;
}


/* MORFS layout */
.morfs-page .project-header-fixed {
  position: fixed;
  top: 90px;              /* debajo del menú */
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  width: 100%;
  max-width: 900px;
  background: white;
  padding-bottom: 15px;
  z-index: 10;
}

.morfs-gallery {
  margin-top: 240px;      /* despeja área del título y texto */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.morfs-gallery img {
  width: 100%;
  cursor: pointer;
}

/* LIGHTBOX */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 50;
}

#lightbox-img {
  max-width: 80%;
  max-height: 85%;
}

#close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.arrow {
  position: absolute;
  top: 50%;
  font-size: 60px;
  cursor: pointer;
  user-select: none;
  color: white;
}

#prev { left: 40px; }
#next { right: 40px; }

.morfs-page .project-header-fixed h2 {
  position: fixed;
  top: 30px;                /* baja el texto justo debajo del menú */
  text-align: left;
  width: 100%;
  max-width: 3000;
  padding-bottom: 15px;
  z-index: 10;
  margin-left: -250px;
  font-size: 14px;   /* antes era grande, ahora más discreto */
  margin-bottom: 6px;
  font-weight: 600;

}

.project-header-fixed p {
 position: fixed;
  top: 35px;
 font-size: 14px;   /* reduce tamaño */
  line-height: 1.35;
  max-width: 200px;  /* hace que no se vea demasiado ancho */
margin-left: -250px;
}

body.morfs-page .brand a {
  font-family: 'Univers-Bold-Condensed', sans-serif;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
body.morfs-page .site-header {
  justify-content: space-between;     /* mantiene logo a la izq y menú a la derecha */
}
/* Oculta el menú cuando el lightbox está abierto */
body.lightbox-open header,
body.lightbox-open .site-header {
  display: none !important;
}

/* Bloquea el scroll de fondo mientras el lightbox está activo */
body.lightbox-open,
html.lightbox-open {
  overflow: hidden;
}

/* El lightbox siempre por encima */
#lightbox {
  z-index: 9999;
}

/* 🔹 DEKOS LAYOUT */


/* --- DEKOS TÍTULO Y TEXTO FIJOS --- */
.dekos-page .project-header-fixed {
 position: fixed;
  top: 100px;                /* baja el texto justo debajo del menú */
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  width: 100%;
  max-width: 3000;
  padding-bottom: 15px;
  z-index: 10;
  margin-left: 40px;
  font-size: 14px;   /* antes era grande, ahora más discreto */
  margin-bottom: 6px;
  font-weight: 200;
}

/* Título */
.dekos-page .project-header-fixed h2 {

  font-family: "Univers-Bold", sans-serif;
  font-size: 14px;
  margin-bottom: 6px;
}

/* Descripción */
.dekos-page .project-header-fixed p {
position: fixed;
  top: 5px;
 font-size: 14px;   /* reduce tamaño */
  line-height: 1.35;
  max-width: 180px;  /* hace que no se vea demasiado ancho */
 margin-left: 0px;
}

/* 🔹 contenedor general */
body.dekos-page .dekos-container {
  margin: 220px auto 60px;
  width: 50%;
  max-width: 1200px;
}

/* 🔹 galería */
.dekos-page .dekos-gallery {
  margin-top: 0px;  /* despeja el texto fijo */
  gap: 20px;
  width: 85%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.dekos-page .dekos-gallery img {
  width: 100%;
  cursor: pointer;
margin-bottom: 30px
}

/* 🔹 lightbox */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
}

#close, #prev, #next {
  position: absolute;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

#close { top: 20px; right: 30px; }
#prev { left: 40px; top: 50%; transform: translateY(-50%); }
#next { right: 40px; top: 50%; transform: translateY(-50%); }

/* 🔹 eliminar menú cuando lightbox abierto */
body.lightbox-open header {
  **display: none !important;**
}

/* 🔹 bloquear scroll durante lightbox */
body.lightbox-open {
  **overflow: hidden;**
}



/* CONTACT */

.contact-page .project-header-fixed {
  position: fixed;
  top: 90px;              /* debajo del menú */
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  width: 100%;
  max-width: 900px;
  background: white;
  padding-bottom: 15px;
  z-index: 10;
}

.contact-gallery {
  margin-top: 240px;      /* despeja área del título y texto */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
  width: 90%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-gallery img {
  width: 100%;
  cursor: pointer;
}

/* LIGHTBOX */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 50;
}

#lightbox-img {
  max-width: 80%;
  max-height: 85%;
}

#close {
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.arrow {
  position: absolute;
  top: 50%;
  font-size: 60px;
  cursor: pointer;
  user-select: none;
  color: white;
}

#prev { left: 40px; }
#next { right: 40px; }

.contact-page .project-header-fixed h2 {
  position: fixed;
  top: 30px;                /* baja el texto justo debajo del menú */
  text-align: left;
  width: 100%;
  max-width: 3000;
  padding-bottom: 15px;
  z-index: 10;
  margin-left: -250px;
  font-size: 14px;   /* antes era grande, ahora más discreto */
  margin-bottom: 6px;
  font-weight: 600;

}

.project-header-fixed p {
 position: fixed;
  top: 35px;
 font-size: 14px;   /* reduce tamaño */
  line-height: 1.35;
  max-width: 200px;  /* hace que no se vea demasiado ancho */
margin-left: -250px;
}

body.contact-page .brand a {
  font-family: 'Univers-Bold-Condensed', sans-serif;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
body.contact-page .site-header {
  justify-content: space-between;     /* mantiene logo a la izq y menú a la derecha */
}
/* Oculta el menú cuando el lightbox está abierto */
body.lightbox-open header,
body.lightbox-open .site-header {
  display: none !important;
}

/* Bloquea el scroll de fondo mientras el lightbox está activo */
body.lightbox-open,
html.lightbox-open {
  overflow: hidden;
}

/* El lightbox siempre por encima */
#lightbox {
  z-index: 9999;
}


/* ABOUT */
.about-page .about-text {
  margin: 0 auto;
  padding-top: 600px;  /* espacio para el menú fijo */
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-page .about-photo {
  width: 650px;
  height: auto;
  margin-bottom: 34px;
  object-fit: cover;
  border-radius: 2px;
}

.about-page .about-text p {
  font-family: Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.55;
  text-align: justify;
  text-align-last: left;
  margin-bottom: 20px;
}