/* =======================================================================
   🎨 REINGENIERÍA CROMÁTICA: PALETA DE ESTUDIO PREMIUM "18PERCENT.ART"
   ======================================================================= */
:root {
  --bg: #f3f6f9;    /* Su blanco roto virado al azul ártico / hielo */
  
  /* 🚀 CAMBIO DE TINTA: De negro puro a Azul Marino Profundo Petróleo */
  --ink: #0b1d28;   
  
  /* 🚀 TEXTOS SECUNDARIOS: Un azul grisáceo atenuado que respira con el fondo */
  --muted: #627785;  
  
  --line: rgba(11, 29, 40, 0.12); /* Líneas divisorias en sintonía con el azul */
  --font: "Helvetica Neue","Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  width:100%; background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  scrollbar-width:none; -ms-overflow-style:none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }
body{ height:350vh; }
a{ color:inherit; text-decoration:none; }

.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:1.9em 2.4em; font-size:13px; letter-spacing:0.02em; }
.header-left{ display:flex; align-items:center; gap:3em; }
.brand{ font-weight:600; font-size:16px; letter-spacing:0.06em; }
.brand-dot{ font-size:9px; vertical-align:super; margin-left:2px; }
.nav{ display:flex; gap:2.2em; font-weight:500; }
.nav a{ position:relative; opacity:0.62; transition:opacity .3s ease; }
.nav a.is-active, .nav a:hover{ opacity:1; }
.nav a.is-active::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--ink); }
.lang{ display:flex; gap:0.5em; font-weight:500; }
.menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; height:18px;
  padding:0; background:none; border:none; cursor:pointer; }
.menu-toggle span{ display:block; width:100%; height:1.5px; background:var(--ink); }
.lang .sep, .lang .muted{ opacity:0.4; }

.corner{ position:fixed; bottom:2.2em; z-index:50; background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink);
  padding-bottom:4px; border-bottom:1px solid var(--ink); transition:opacity .3s ease; }
.corner:hover{ opacity:0.55; }
.corner i{ font-style:normal; margin-left:0.4em; }
.corner--left{ left:2.4em; }
.corner--right{ right:2.4em; }

.scene{ position:fixed; inset:0; overflow:hidden; perspective:1600px; perspective-origin:50% 50%; }
.gallery{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }

.item{ position:absolute; top:0; left:0; width:78px; height:78px; transform-style:preserve-3d; }
.item-card{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none;
  border:1px solid rgba(255,255,255,0.65); transition:box-shadow .4s ease; }
.item-card img{ width:100%; height:100%; object-fit:fill; display:block; filter:saturate(0.92) brightness(0.99); transform: rotate(-90deg); }
.item-card.is-active{ box-shadow:0 6px 16px -10px rgba(0,0,0,0.35); }

.center{ position:absolute; top:43%; left:50%; transform:translate(-50%,-50%); width:min(520px,42vw);
  text-align:center; pointer-events:none; z-index:5; }
.center-eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1.4em; }
.center-title{ font-size:clamp(34px,4.4vw,60px); font-weight:500; line-height:1.02; letter-spacing:-0.02em; }
.center-title em{ font-style:italic; font-weight:400; }
.center-sub{ margin-top:1.3em; font-size:14px; color:var(--muted); }
.center-default,.center-project{ transition:opacity .55s ease; }
.center-project{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; }
.center.show-project .center-default{ opacity:0; }
.center.show-project .center-project{ opacity:1; }
.preview-img{ width:320px; height:auto; flex-shrink:0; overflow:hidden; background:#e7e6e3; }
.preview-img img{ width:100%; height:100%; object-fit:fill; }
.preview-cat{ margin-top:1.1em; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.preview-title{ margin-top:0.4em; font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-0.01em; }

.labels{ position:absolute; inset:0; pointer-events:none; }
.label{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:14px; font-weight:500;
  letter-spacing:0.01em; pointer-events:none; opacity:0.85; }
.label .ul{ border-bottom:1px solid var(--ink); padding-bottom:2px; }
.label sup{ font-size:10px; color:var(--muted); margin-left:3px; }

.mobile-preview{ display:none; }
.mobile-ring-hitbox{ display:none; }

@media (max-width:768px){
  .mobile-ring-hitbox{ display:block; position:fixed; left:0; right:0; bottom:0; top:50%;
    z-index:20; touch-action:none; pointer-events:auto; }
  body{ height:auto; }
  .scene{ height:100svh; overflow:hidden; }
  .center, .labels{ display:none; }
  .custom-cursor{ display:none !important; }
  .site-header{ padding:1.15em 1em; align-items:center; }
  .nav, .lang{ display:none; }
  .menu-toggle{ display:flex; }
  .corner{ bottom:auto; top:3.6em; font-size:13px; }
  .corner--left{ left:1em; }
  .corner--right{ right:1em; }
  .mobile-preview{ display:block; position:fixed; top:6.2em; left:0; right:0; z-index:6; padding:0 1em; pointer-events:none; }
  .mp-cat{ font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
  .mp-title{ font-size:23px; line-height:1.05; font-weight:500; letter-spacing:-0.01em; margin-bottom:14px; }
  .mp-img{ width:80%; aspect-ratio:auto; overflow:hidden; background:#e7e6e3; }
  .mp-img img{ width:100%; height:100%; object-fit:fill; display:block; }
  .mp-view{ display:inline-block; margin-top:11px; font-size:14px; font-weight:700;
    border-bottom:1px solid var(--ink); padding-bottom:2px; pointer-events:auto; }
  .mp-view i{ font-style:normal; margin-left:0.35em; }
}

.custom-cursor{ display:none; }
/* =======================================================================
   🎨 AJUSTE ESTÉTICO: CURSOR AZUL MARINO OSCURO PETRÓLEO
   ======================================================================= */
@media (pointer:fine) and (hover:hover){
  body{ cursor:none; }
  .custom-cursor{ 
    display:block; 
    position:fixed; 
    top:0; 
    left:0; 
    width:13px; 
    height:13px;
    border-radius:999px; 
    
    /* 🚀 REENTREGA DE COLOR: Cambie #000 por su azul petróleo profundo #0033aa o rojo intenso #b6121a*/
    background: #b6121a; 
    
    pointer-events:none; 
    z-index:99999; 
    will-change:transform; 
    transition:opacity .3s ease; 
  }
  .custom-cursor.is-hidden{ opacity:0; }
}


body:not(.page-ready) .scene{ opacity:0; }

.loading-screen{ position:fixed; inset:0; z-index:999999; background:var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:default; }
.loading-screen.is-hidden{ pointer-events:none; }
.loading-inner{ text-align:center; opacity:0; animation:load-in .8s ease forwards; }
.loading-brand{ font-weight:600; font-size:20px; letter-spacing:0.06em; }
.loading-brand span{ font-size:10px; vertical-align:super; margin-left:2px; }
.loading-text{ margin-top:1.1em; font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); animation:load-pulse 1.8s ease-in-out infinite; }
.loading-bar{ width:120px; height:1px; margin:1.6em auto 0; background:rgba(0,0,0,0.12); overflow:hidden; }
.loading-bar span{ display:block; width:100%; height:100%; background:var(--ink); transform:scaleX(0);
  transform-origin:left center; animation:load-bar 1.4s ease-in-out forwards; }
@keyframes load-in{ to{ opacity:1; } }
@keyframes load-pulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }
@keyframes load-bar{ to{ transform:scaleX(1); } }
@media (max-width:768px){ .loading-screen{ height:100svh; } }

/* =======================================================================
   🚀 ACABADOS PREMIUM: VISUALIZADOR A PANTALLA COMPLETA (LIGHTBOX)
   ======================================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg); /* Mantiene el color hueso off-white original del sitio */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  will-change: opacity;
}

/* Estado activo: cuando el motor le indique encender */
.lightbox.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Botón de cierre en la esquina superior derecha */
.lightbox-close {
  position: absolute;
  top: 1.9em;
  right: 2.4em;
  background: none;
  border: none;
  font-size: 24px;
  font-family: var(--font);
  color: var(--ink);
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}
.lightbox-close:hover {
  opacity: 0.5;
}

/* Flechas laterales de navegación (Izquierda y Derecha) */
.lightbox-nav {
  background: none;
  border: none;
  font-size: 32px;
  font-family: var(--font);
  color: var(--ink);
  cursor: pointer;
  padding: 1em;
  z-index: 10;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.lightbox-nav:hover {
  opacity: 0.5;
  transform: scale(1.1);
}
.lightbox-nav--prev:hover { transform: scale(1.1) translateX(-4px); }
.lightbox-nav--next:hover { transform: scale(1.1) translateX(4px); }

/* Contenedor central de la Obra y sus textos */
.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 85vh;
}

/* =======================================================================
   🚀 AJUSTE DE ALTURA FIJA Y ANCHO ELÁSTICO (PARA FORMATOS VARIABLES)
   ======================================================================= */
.lightbox-img-wrap {
  /* Fijamos una altura máxima segura basada en el alto de la pantalla (vh) */
  height: 68vh;              /* <--- Ocupará siempre el 68% del alto de la pantalla */
  max-height: 780px;         /* <--- Límite máximo de altura en monitores gigantes */
  
  /* El ancho se vuelve completamente libre y dinámico */
  width: auto;               /* <--- El ancho dependerá del archivo de la foto */
  max-width: 85vw;           /* <--- Límite para que un paisaje ultra ancho no toque las flechas */
  
  overflow: hidden;
  background: #e7e6e3;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,0.2);
  
  /* Centrado interno */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Forzamos a la imagen interna a obedecer la altura del cascarón */
.lightbox-img-wrap img {
  height: 100%;
  width: auto;               /* <--- Permite que la imagen se estire horizontalmente */
  object-fit: contain;       /* <--- Muestra el 100% de la foto sin recortar un solo pixel */
}


/* Bloque de textos informativos de la obra */
.lightbox-meta {
  text-align: center;
  margin-top: 1.8em;
  font-family: var(--font);
}
.lightbox-cat {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4em;
}
.lightbox-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lightbox-counter {
  font-size: 12px;
  color: var(--muted);
  margin-top: 0.8em;
  letter-spacing: 0.06em;
}

/* Adaptación responsiva para pantallas móviles */
@media (max-width: 768px) {
  .lightbox {
    padding: 0 1em;
    flex-direction: column;
    justify-content: center;
    gap: 2em;
  }
  .lightbox-nav {
    position: absolute;
    bottom: 2em;
    font-size: 28px;
  }
  .lightbox-nav--prev { left: 2em; }
  .lightbox-nav--next { right: 2em; }
  .lightbox-img-wrap {
    width: 85vw;
    height: 85vw; /* Cuadrado adaptado al ancho del teléfono */
  }
  .lightbox-close {
    top: 1.15em;
    right: 1em;
  }
}

/* =======================================================================
   🚀 ACABADOS PREMIUM: MENÚ DESPLEGABLE DE FILTROS (CORNERS)
   ======================================================================= */
.corner-filter-wrap {
  position: fixed;
  left: 2.4em;
  bottom: 2.2em;
  z-index: 100; /* Asegura que flote por encima del anillo 3D */
}

/* Redefinimos la esquina izquierda para que sea el ancla del menú */
.corner-filter-wrap .corner--left {
  position: relative;
  left: 0;
  bottom: 0;
  margin: 0;
}

/* El contenedor del menú colgante que esconderá los 6 botones raros */
.filter-dropdown {
  position: absolute;
  bottom: 100%; /* Se despliega hacia ARRIBA del botón para no chocar con el borde de la pantalla */
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8em;
  padding: 1.2em 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Clase activa: Cuando se le dé clic o se pase el cursor, el menú se revela con elegancia */
.corner-filter-wrap:hover .filter-dropdown,
.filter-dropdown.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* El diseño de los 6 botones individuales de categorías */
.filter-dropdown button {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}

/* Efecto hover premium para cada categoría de fotografía */
.filter-dropdown button:hover {
  color: var(--ink);
  transform: translateX(4px); /* Se desliza sutilmente hacia la derecha */
}

/* Adaptación para pantallas de teléfonos móviles */
@media (max-width: 768px) {
  .corner-filter-wrap {
    left: 1em;
    top: 3.6em; /* En móvil se alinea arriba debajo del encabezado */
    bottom: auto;
  }
  .filter-dropdown {
    bottom: auto;
    top: 100%; /* En móviles se despliega hacia ABAJO */
    background: var(--bg); /* Capa de protección para que no se mezcle con el fondo */
    padding: 1em;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  }
}

/* =======================================================================
   🚀 ACABADOS PREMIUM: SECCIONES INTERNAS (INFO & CONTACTO)
   ======================================================================= */
.site-section {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(10px);
  will-change: opacity, transform;
}

/* Estado activo: cuando el usuario dé clic en el menú superior */
.site-section.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.section-content {
  text-align: center;
  font-family: var(--font);
}

/* =======================================================================
   🚀 ACABADOS PREMIUM: FORMULARIO DE CONTACTO MINIMALISTA
   ======================================================================= */
.contact-form {
  width: min(450px, 85vw);
  margin: 2.2em auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s ease;
}

/* El cuadro se ilumina sutilmente al darle clic */
.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--ink);
}

/* Evita que el usuario deforme la caja de texto hacia los lados */
.form-group textarea {
  resize: vertical;
}

/* Botón de envío estilizado como los botones de esquina del sitio */
.form-submit-btn {
  align-self: center;
  margin-top: 1em;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.3s ease;
}
.form-submit-btn:hover {
  opacity: 0.55;
}
.form-submit-btn i {
  font-style: normal;
  margin-left: 0.4em;
}
/* =======================================================================
   🎨 ACABADO DEL LOGO ENSO EN LA PANTALLA DE CARGA
   ======================================================================= */
.loading-logo-wrap {
  width: 222px;          /* Size balance ideal para no saturar el espacio */
  height: 222px;
  margin: 0 auto;
  opacity: 0.9;
}
.loading-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Aplica un filtro sutil si quiere que el negro del pincel combine con su tono ink */
  filter: brightness(0.05); 
}
/* =======================================================================
   🎨 DISPOSICIÓN EDITORIAL DE LUJO: SECCIÓN INFO DOUBLE-COLUMN
   ======================================================================= */
.info-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5em;
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
}

/* Contenedor del retrato de autor (Formato vertical premium) */
.info-profile-image {
  width: min(340px, 35vw);
  aspect-ratio: 3 / 4; /* Proporción clásica de retrato de galería */
  overflow: hidden;
  background: #e7e6e3;
  box-shadow: 0 20px 45px -25px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.info-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bloque de textos alineado a la izquierda para mejor lectura */
.info-text-block {
  text-align: left;
  max-width: 520px;
  font-family: var(--font);
}
.info-brand-title {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0.1em;
  margin-bottom: 0.8em;
}
.info-brand-title em {
  font-style: italic;
  font-weight: 400;
}

.info-body-text {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.info-body-text p {
  font-size: 15px;
  line-height: 1.6;
  color: #333330; /* Un tono ligeramente más suave que el negro puro para mejorar la lectura */
}
.info-body-text strong {
  color: var(--ink);
  font-weight: 500;
}

/* Adaptación responsiva automática para el celular */
@media (max-width: 768px) {
  .info-container {
    flex-direction: column;
    gap: 2.5em;
    padding-top: 5em; /* Da espacio para que no choque con la cabecera móvil */
  }
  .info-profile-image {
    width: 65vw;
  }
  .info-text-block {
    text-align: center;
  }
  .info-body-text p {
    font-size: 14px;
  }
}
/* =======================================================================
   🎨 ACABADO PREMIUM: LOGO ENSO AL CENTRO DE LA ELIPSE 3D
   ======================================================================= */
.center-logo-enso {
  width: 200px;             /* Escala balanceada para el centro de la elipse */
  height: 200px;
  margin: 0 auto 1.4em;    /* Centrado horizontal y separación del texto de abajo */
  opacity: 0.85;           /* Ligera transparencia para mimetizarse con la estética */
  transition: transform 0.3s ease;
}

.center-logo-enso img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* El filtro tiñe el trazo de tinta con su nuevo color azul petróleo de las letras */
  filter: brightness(0.1) sepia(1) saturate(5) hue-rotate(175deg); 
}
/* =======================================================================
   🎨 ACABADO DE AUTOR: LOGO ENSO DENTRO DEL PUNTO ROJO INESPERADO
   ======================================================================= */
.custom-cursor {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease, background-color 0.3s ease, width 0.3s ease, height 0.3s ease !important;
}

/* El logo Ensō inicia oculto y a escala cero */
#cursorEnso {
  width: 80%;
  height: 80%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  /* Tiñe el logo interno en un gris azulado elegante que combina con var(--muted) */
  filter: brightness(0.4) sepia(1) saturate(2) hue-rotate(180deg);
}

/* Cuando el cursor se expande sobre las fotos, el Ensō despierta */
.custom-cursor.is-expanded #cursorEnso {
  opacity: 0.55; /* Escala de opacidad grisácea tenue para no competir con la foto */
  transform: scale(1);
}