/* ═══════════════════════════════════════════
   OBRAS PAGE — page-obras.css
   Extracted from page-obras.php inline styles
═══════════════════════════════════════════ */

/* ══ HERO ACCORDION ══ */
.hi{position:relative;width:100%;height:100vh;min-height:700px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#060402;}
.hi-header{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;width:100%;transition:opacity .45s ease,transform .5s cubic-bezier(.23,1,.32,1);}
.hi:hover .hi-header{opacity:0;transform:translate(-50%,-58%);pointer-events:none;}
.hi-titulo{font-family:'MajorShift',sans-serif;font-size:clamp(4rem,10vw,8rem);line-height:0.9;color:#fff;text-shadow:0 12px 48px rgba(0,0,0,.8);margin-bottom:24px;animation: fadeUp 0.9s var(--ease-out) forwards 0.25s; opacity:0;}
.hi-sub{font-family:'Quantico',sans-serif;font-size:1rem;font-weight:600;color:#c1440e;letter-spacing:.3em;text-transform:uppercase;animation: fadeUp 0.9s var(--ease-out) forwards 0.4s; opacity:0;}
.hi-panels{position:absolute;inset:0;display:flex;z-index:5;}
.hi-panel{flex:1;position:relative;overflow:hidden;cursor:pointer;transition:flex .7s cubic-bezier(.23,1,.32,1);}
.hi-panels:hover .hi-panel{flex:0.55;}
.hi-panels:hover .hi-panel:hover{flex:2.4;}
.hi-pbg{position:absolute;inset:0;background-size:cover;background-position:center top;transform:scale(1.08);transition:transform .7s ease,filter .5s ease;filter:brightness(.35) saturate(.4);}
.hi-panel:hover .hi-pbg{transform:scale(1.0);filter:brightness(.75) saturate(1);}
.hi-pov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(6,4,2,.95) 100%);opacity:.65;transition:opacity .5s ease;}
.hi-panel:hover .hi-pov{opacity:1;}
.hi-pnombre-mini{font-family:'MajorShift',sans-serif;font-size:1.8rem;color:rgba(255,255,255,.7);letter-spacing:.1em;transition:opacity .4s ease,transform .4s ease;}
.hi-panel:hover .hi-pnombre-mini{opacity:0;transform:translateY(10px);}
.hi-pinfo{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.5rem;display:flex;align-items:center;justify-content:center;z-index:3;transition:opacity .4s ease;}
.hi-panel:hover .hi-pinfo{opacity:0;}
.hi-pexpand{position:absolute;bottom:0;left:0;right:0;padding:0 28px 44px;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(28px);transition:opacity .5s ease .1s,transform .5s ease .1s;z-index:4;}
.hi-panel:hover .hi-pexpand{opacity:1;transform:translateY(0);}
.hi-pnombre{font-family:'MajorShift',sans-serif;font-size:clamp(3rem,6vw,5.5rem);line-height:0.9;color:#fff;text-shadow:0 12px 48px rgba(0,0,0,.6);margin-bottom:12px;}
.hi-pdesc{font-family:'Quantico',serif;font-size:1.15rem;font-style:italic;color:rgba(255,255,255,.7);margin-bottom:20px;}

/* ══ DETAIL VIEW ══ */
.dv {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.25,1,0.5,1), transform 0.6s cubic-bezier(0.25,1,0.5,1);
}
.dv.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Back Arrow (fixed right) ── */
.dv-back {
  position: fixed;
  right: 2rem;
  bottom: 2.5rem;
  z-index: 500;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(18,13,8,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(193,68,14,0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.dv-back.is-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.dv-back:hover {
  background: #c1440e;
  border-color: #c1440e;
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 8px 36px rgba(193,68,14,0.35);
}
.dv-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #c1440e;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}
.dv-back:hover svg {
  stroke: #f2e4d0;
}
.dv-back__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(18,13,8,0.95);
  color: #f2e4d0;
  font-family: 'Quantico', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  border: 1px solid rgba(193,68,14,0.25);
}
.dv-back:hover .dv-back__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Concepto CTA ── */
.dv-concepto-cta {
  text-align: center;
  margin-top: 3rem;
}
.dv-concepto-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Quantico', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #c1440e;
  border: 1px solid rgba(193,68,14,0.4);
  padding: 0.9rem 2rem;
  transition: all 0.3s ease;
}
.dv-concepto-btn:hover {
  background: #c1440e;
  color: #f2e4d0;
  border-color: #c1440e;
  transform: translateY(-2px);
}
.dv-concepto-btn svg {
  transition: transform 0.3s;
}
.dv-concepto-btn:hover svg {
  transform: translateX(4px);
}

/* ── Header ── */
.dv-header {
  background: #120d08;
  padding: 4rem 6rem 6rem; /* Reducido de 8rem a 4rem para que el título suba */
  position: relative;
  border-bottom: 1px solid rgba(193,68,14,0.15);
}
.dv-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dv-header__eyebrow {
  font-family: 'Quantico', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #c1440e;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: dvFadeIn 0.8s cubic-bezier(0.25,1,0.5,1) 0.1s forwards;
}
.dv-header__title {
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: dvFadeIn 0.9s cubic-bezier(0.25,1,0.5,1) 0.2s forwards;
}

.dv-header__title-line1 {
  display: block;
  font-family: 'MajorShift', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,228,208,0.6);
  line-height: 1.2;
}

.dv-header__title-line2 {
  display: block;
  font-family: 'MajorShift', sans-serif;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 0.9;
  color: #f2e4d0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.dv-header__line {
  display: none;
}
.dv-header__curaduria {
  opacity: 0;
  animation: dvFadeIn 0.8s ease 0.5s forwards;
  margin-top: 22rem; /* Distancia vertical aumentada para empujarlo más abajo */
  margin-left: 680px; /* Sangría fija para alinear debajo de la letra "H" de Guguchachis */
}
.dv-header__cur-label {
  font-family: 'Quantico', sans-serif;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(242,228,208,0.4);
  display: block;
  margin-bottom: 1.5rem;
}
.dv-header__cur-names {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.dv-header__cur-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dv-header__cur-dash {
  color: rgba(193,68,14, 0.6);
  font-family: 'Quantico', sans-serif;
}
.dv-header__cur-name {
  font-family: 'Quantico', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #c1440e;
  text-decoration: none;
  transition: color 0.3s ease;
}
.dv-header__cur-name:hover {
  color: #f2e4d0;
}

@keyframes dvFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Description Block ── */
.dv-desc {
  background: #120d08;
  padding: 8rem 6rem;
  border-top: 1px solid rgba(193,68,14,0.15);
}
.dv-desc__inner {
  max-width: 950px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr; 
  gap: 6rem;
  align-items: start;
  min-height: 75vh;
}
.dv-desc__serie-name {
  margin-top: 0;
  position: sticky;
  top: 120px;
}
.dv-desc__title-line1 {
  display: block;
  font-family: 'MajorShift', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,228,208,0.6);
  line-height: 1.2;
}
.dv-desc__title-line2 {
  display: block;
  font-family: 'MajorShift', sans-serif;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.9;
  color: #c1440e;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}
.dv-desc__text {
  padding: 0;
  margin-top: 7rem; /* Baja el texto notablemente para que no inicie a la par del título */
}
.dv-desc__text p {
  font-family: 'Quantico', sans-serif;
  font-size: 1.05rem; /* Ligeramente más pequeño para el look de columna densa */
  font-weight: 300;
  font-style: normal;
  line-height: 1.85;
  color: rgba(242,228,208,0.7);
  margin-bottom: 2rem;
  letter-spacing: 0.03em;
  text-align: justify; /* Borde recto alineado a ambos lados como en la imagen */
  max-width: 440px; /* Tamaño de caja (columna) estrecha */
}
.dv-desc__text p:last-child {
  margin-bottom: 0;
}

/* ══ GALERÍA ══ */
.galeria-sec{background:#f2e4d0;padding:6rem 5% 10rem;position:relative;}
.o-subsec{margin-bottom:8rem;margin-top:5rem;}
.o-subsec:first-child{margin-top:0;}
.o-subsec__header{display:flex;align-items:center;gap:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(193,68,14,0.12);}
.o-subsec__desc-container{padding:0 4rem;border-left:none;margin:2rem auto 5rem;max-width:900px;text-align:center;}
.o-subsec__desc-text{font-family:'Quantico',sans-serif;font-size:1.15rem;font-style:normal;line-height:1.75;font-weight:300;color:#1a1510;margin:0;letter-spacing:0.01em;}
.o-subsec__title{font-family:'MajorShift',sans-serif;font-size:1.8rem;letter-spacing:0.06em;line-height:1;color:#120d08;}
.o-subsec__line{flex:1;height:1px;background:rgba(193,68,14,0.1);}
.o-subsec__count{font-family:'Quantico',sans-serif;font-size:0.65rem;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;white-space:nowrap;color:rgba(193,68,14,0.5);}

.o-grid{display:grid;gap:4px;}
.o-grid--2{grid-template-columns:repeat(2,1fr);}
.o-grid--3{grid-template-columns:repeat(3,1fr);}
.o-grid--4{grid-template-columns:repeat(4,1fr);}
.o-grid--doc{grid-template-columns:repeat(3,1fr);}

.o-card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:#120d08;}
.o-grid--2 .o-card{aspect-ratio:3/4;}
.o-grid--4 .o-card{aspect-ratio:2/3;}
.o-grid--doc .o-card{aspect-ratio:4/3;}

@media(max-width:1100px){.o-grid--4{grid-template-columns:repeat(3,1fr);}}
@media(max-width:960px){.o-grid--3,.o-grid--4,.o-grid--doc{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){
  .o-grid--3,.o-grid--4,.o-grid--doc{grid-template-columns:1fr;}
  .o-card { height: 380px !important; aspect-ratio: auto !important; }
  .o-card__nombre { font-size: 1rem !important; margin-bottom: 0.2rem !important; line-height: 1.1 !important; }
  .o-card__tec { font-size: 0.6rem !important; }
  .o-card__info { padding: 1.2rem 1rem !important; }
}
.o-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(0.25,1,0.5,1),filter 1.2s ease;filter:saturate(0.85);}
.o-card:hover .o-card__img{transform:scale(1.05);filter:saturate(1.05);}
.o-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,13,8,0.98) 0%,rgba(18,13,8,0.4) 45%,transparent 85%);pointer-events:none;opacity:0;transition:opacity 1s ease-out;}
.o-card:hover .o-card__overlay{opacity:1;}
.o-card__info{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.5rem;text-align:center;transform:translateY(10px);transition:transform 1s ease-out,opacity 1s ease-out;pointer-events:none;opacity:0;}
.o-card:hover .o-card__info{transform:translateY(0);opacity:1;}
.o-card__nombre{font-family:'MajorShift',sans-serif;font-size:1.25rem;color:#f2e4d0;line-height:1.1;display:block;letter-spacing:0.04em;text-transform:none;font-weight:400;opacity:0;transform:translateY(8px);transition:opacity 0.8s ease-out 0.3s,transform 0.8s ease-out 0.3s;margin-bottom:0.8rem;}
.o-card:hover .o-card__nombre{opacity:1;transform:translateY(0);}
.o-card__tec{font-family:'Quantico',sans-serif;font-style:normal;font-size:0.65rem;font-weight:400;color:#c1440e;letter-spacing: 0.15em;display:block;margin-top:0.4rem;opacity:0;transform:translateY(8px);transition:opacity 0.8s ease-out 0.45s,transform 0.8s ease-out 0.45s;}
.o-card:hover .o-card__tec{opacity:1;transform:translateY(0);}

/* ══════════════════════════════════════════════════════════════
   MODAL / LIGHTBOX — Ventana para ver cada obra individual
   ══════════════════════════════════════════════════════════════ */

/* --- Fondo oscuro del modal (cubre toda la pantalla) --- */
.modal-bg{position:fixed;inset:0;z-index:3000;background:rgba(6,4,2,0.97);opacity:0;pointer-events:none;transition:opacity 0.4s ease;display:flex;align-items:center;justify-content:center;}
.modal-bg.is-open{opacity:1;pointer-events:all;}

/* --- Caja principal del modal (imagen izq + texto der) --- */
.modal-box{max-width:1000px;width:95vw;background:#120d08;border-top:2px solid #c1440e;display:grid;grid-template-columns:1fr 1.2fr;height:85vh;position:relative;}

/* --- Zona de la imagen --- */
.modal-img-wrap{position:relative;cursor:zoom-in;height:100%;overflow:hidden;}
.modal-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-img-hover{position:absolute;inset:0;background:rgba(18,13,8,0.15);opacity:0;transition:opacity 0.3s ease;pointer-events:none;}
.modal-img-wrap:hover .modal-img-hover{opacity:1;}
.modal-icon-zoom{position:absolute;bottom:1.5rem;right:1.5rem;color:#fcf8f2;border:1px solid rgba(242,228,208,0.3);padding:0.7rem 1.2rem;background:rgba(6,4,2,0.85);font-family:'Quantico',sans-serif;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.2em;display:flex;align-items:center;gap:0.75rem;}
.modal-icon-zoom svg{width:16px;height:16px;stroke:#c1440e;}

/* --- Zona de texto (lado derecho del modal) ---
   Contiene: título, descripción, técnica/año, botones.
   Todo alineado a la derecha. */
.modal-body {
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  height: 100%;
  overflow: hidden;
  text-align: right;    /* Alineación general a la derecha */
}

/* --- Título de la obra (dos líneas) ---
   Línea 1: nombre pequeño (ej. "GUERRERO PROVISTO")
   Línea 2: parte grande (ej. "DE UN DISCO")
   Fuente: MajorShift (la tipografía decorativa del tema) */
.modal-title-group {
  margin-bottom: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Línea 1 del título — texto pequeño/ligero */
.modal-title-line1 {
  display: block;
  font-family: 'MajorShift', sans-serif;
  font-size: 1.15rem;       /* Tamaño pequeño */
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242,228,208,0.6); /* Color suave/apagado */
  line-height: 1.2;
}

/* Línea 2 del título — texto grande/destacado */
.modal-title-line2 {
  display: block;
  font-family: 'MajorShift', sans-serif;
  font-size: 2.8rem;        /* Tamaño grande */
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fcf8f2;           /* Color blanco brillante */
  line-height: 0.95;
  margin-top: 0.15rem;
}

/* Subtítulo de subcategoría (ej. "Misil", "Pukuna", "Sello") */
.modal-title-sub {
  display: block;
  font-family: 'Quantico', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #c1440e;
  margin-top: 0.6rem;
  opacity: 0.85;
}

/* --- Bloque central: descripción + técnica/año ---
   Se centra verticalmente entre el título y los botones */
.modal-center-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;  /* Centrado vertical */
}

/* --- Descripción de la obra ---
   Texto en mayúsculas/minúsculas, alineado a la derecha */
.modal-desc-wrap {
  margin: 0;
  overflow-y: auto;
  max-width: 280px;         /* Limita aún más el ancho para líneas de texto muy cortas */
}
.modal-desc-wrap:empty { display: none; }
.modal-desc-wrap::-webkit-scrollbar { width: 3px; }
.modal-desc-wrap::-webkit-scrollbar-thumb { background: rgba(193,68,14,0.3); border-radius: 4px; }

.modal-desc-lines,
#modalDescripcion {
  font-family: 'Quantico', sans-serif;
  font-style: normal;
  font-size: 0.9rem;        /* Tamaño de la descripción */
  font-weight: 300;
  color: rgba(242,228,208,0.8);
  line-height: 1.5;         /* Interlineado */
  text-transform: none;     /* Mayúsculas y minúsculas naturales */
  letter-spacing: 0.03em;
  text-align: justify;      /* Texto justificado como en la referencia */
  margin: 0;
}

/* --- Ficha técnica: Técnica + Año en una línea ---
   Incluye cuadraditos de color antes de cada etiqueta */
.modal-ficha-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 1.5rem;       /* Separación respecto a la descripción */
  flex-shrink: 0;
}



/* Etiquetas "Técnica:" y "Año:" */
.modal-fi-label {
  font-family: 'Quantico', sans-serif;
  font-size: 0.65rem;       /* Tamaño de la etiqueta */
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c1440e;           /* Color naranja */
}

/* Valores "Cerámica" y "2002" */
.modal-fi-val {
  font-family: 'Quantico', sans-serif;
  font-size: 0.85rem;       /* Tamaño del valor */
  color: #b0a090;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-right: 0.8rem;     /* Espacio entre Técnica y Año */
}

/* --- Botones de navegación (Anterior / Siguiente) --- */
.modal-nav {
  display: flex;
  gap: 1.5rem;
  margin-top: auto;         /* Empuja al fondo */
  flex-shrink: 0;
  padding-top: 1.5rem;
}
.modal-nav-btn{font-family:'Quantico',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#b0a090;background:rgba(193,68,14,0.06);border:1px solid rgba(193,68,14,0.2);padding:1.2rem 1.5rem;cursor:pointer;flex:1;transition:all 0.3s;}
.modal-nav-btn:hover{background:#c1440e;color:#120d08;}

/* --- Visor a pantalla completa (al hacer clic en la imagen) --- */
.fullscreen-viewer { position:fixed; inset:0; z-index:9999; background:#040302; display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:opacity 0.4s ease; backdrop-filter:blur(5px); }
.fullscreen-viewer.is-open { opacity:1; pointer-events:all; }
.fullscreen-viewer__img { width:90%; height:90%; object-fit:contain; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.fullscreen-viewer__close { position:absolute; top:2rem; right:3rem; color:#f2e4d0; font-size:3rem; background:none; border:none; cursor:pointer; opacity:0.6; transition:opacity 0.3s; z-index:10000; }
.fullscreen-viewer__close:hover { opacity:1; color:#c1440e; }
.fullscreen-viewer__title { position:absolute; left:3%; bottom:3%; color:#f2e4d0; font-family:'Quantico', sans-serif; font-size:1.1rem; font-weight:300; letter-spacing:0.1em; background:rgba(6,4,2,0.85); padding:1rem 1.5rem; border-left:2px solid #c1440e; z-index:10000; display:flex; align-items:center; gap:1rem; }

/* --- Botón "Consultar por esta obra" --- */
.modal-consultar{display:inline-flex;align-items:center;justify-content:center;gap:0.8rem;text-align:center;font-family:'Quantico',sans-serif;font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;color:#f2e4d0;background:rgba(193,68,14,0.1);border:1px solid rgba(193,68,14,0.3);padding:1rem 1.8rem;margin-top:1.5rem;transition:all 0.3s ease;flex-shrink:0;}
.modal-consultar:hover{background:#c1440e;border-color:#c1440e;color:#fff;transform:translateY(-2px);}

/* --- Botón de cerrar (X) --- */
.modal-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background:rgba(18,13,8,0.5);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(242,228,208,0.5);font-family:sans-serif;font-size:1.5rem;font-weight:300;transition:all 0.3s ease;z-index:100;}
.modal-close:hover{background:#c1440e;color:#fff;transform:scale(1.1);}



/* ══ SCROLL ANIMATIONS ══ */
.scroll-anim-obra{opacity:0;transform:translateY(40px);transition:opacity 1.5s cubic-bezier(0.25,1,0.5,1),transform 1.5s cubic-bezier(0.25,1,0.5,1);will-change:opacity,transform;}
.scroll-anim-obra.is-visible{opacity:1;transform:translateY(0);}
.masonry__item{animation:slowFadeIn 1.5s cubic-bezier(0.25,1,0.5,1) forwards;}
@keyframes slowFadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ══ RESPONSIVE ══ */
@media(max-width:900px) {
  .dv-header { padding: 5rem 2.5rem 4rem; }
  .dv-desc { padding: 4rem 2.5rem 5rem; }
  .dv-desc__inner { grid-template-columns: 1fr; gap: 2rem; }
  .dv-desc__serie-name { font-size: 2rem; position: static !important; }
  .dv-back { right: 1.2rem; bottom: 1.5rem; width: 46px; height: 46px; }
  .modal-box { grid-template-columns: 1fr; height: 90vh; display: flex; flex-direction: column; }
  .modal-box--b { direction: ltr; }
  .modal-img-wrap { height: 40vh; flex-shrink: 0; background: #0a0806; }
  .modal-img-wrap img { object-fit: contain !important; }
  .modal-body { padding: 2.5rem 2rem; overflow-y: auto; flex: 1; }
  .modal-title-line1 { font-size: 1.1rem; }
  .modal-title-line2 { font-size: 2.2rem; }
  .o-card { border-radius: 16px; overflow: hidden; }
  .o-card__img { object-fit: cover !important; }
  .o-grid--3,.o-grid--4,.o-grid--doc { gap: 48px !important; }
  /* Activar texto e información automáticamente al scroll */
  .o-card.is-visible .o-card__overlay { opacity: 1 !important; }
  .o-card.is-visible .o-card__info { opacity: 1 !important; transform: translateY(0) !important; }
  .o-card.is-visible .o-card__nombre { opacity: 1 !important; transform: translateY(0) !important; }
  .o-card.is-visible .o-card__tec { opacity: 1 !important; }
}

@media(max-width:1024px) {
  .hi { height: 100vh; min-height: 600px; margin-top: 0; } /* Eliminado margen para recuperar transparencia del header */
  .hi-header { display: none !important; }
  .hi-panels { flex-direction: column; height: 100%; padding-top: 85px; box-sizing: border-box; }
  .hi-panel { 
    flex: 1 !important; 
    width: 100%; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    transition: flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); 
  }
  .hi-pbg { 
    filter: brightness(0.4) saturate(0.6) !important; 
    transform: scale(1.05) !important; 
    transition: filter 0.6s ease, transform 0.6s ease !important;
  }
  .hi-pinfo { 
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; 
    background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; 
    opacity: 1 !important; transition: opacity 0.4s ease;
  }
  .hi-pnombre-mini { 
    opacity: 1 !important; transform: none !important; 
    font-size: 1.8rem; letter-spacing: 0.15em; text-shadow: 0 4px 12px rgba(0,0,0,0.8); 
  }
  .hi-pexpand { display: none !important; }

  /* --- ESTADO ACTIVO MÓVIL --- */
  .hi-panel.activo-movil {
    flex: 3 !important; /* Se expande notablemente */
  }
  .hi-panel.activo-movil .hi-pbg {
    filter: brightness(0.8) saturate(1) !important;
    transform: scale(1) !important;
  }
  .hi-panel.activo-movil .hi-pinfo {
    opacity: 0 !important;
    display: none !important; /* Evita que el texto pequeño se vea detrás */
  }
  .hi-panel.activo-movil .hi-pexpand {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
  }
  .hi-panel.activo-movil .hi-pnombre {
    font-size: clamp(2.2rem, 9vw, 3.8rem);
    text-shadow: 0 4px 25px rgba(0,0,0,1);
    margin: 0;
    text-align: center;
    line-height: 1;
  }

  .page-hero__inner { display: none; }
  .dv-header__curaduria { margin-left: 0; margin-top: 3rem; }
  .dv-desc__text { margin-top: 2rem; }
  .dv-desc__text p { max-width: 100%; }
  .galeria-sec { padding: 4rem 3% 6rem; }
  .o-subsec__desc-container { padding: 0 1rem; }
}

@media(max-width:520px) {
  .hi { height: 100vh; }
  .galeria-sec { padding: 3rem 12% 5rem !important; }
  .o-grid--3,.o-grid--4,.o-grid--doc { grid-template-columns: 1fr; gap: 64px !important; }
  .o-card { height: auto !important; aspect-ratio: 3/4 !important; border-radius: 16px; overflow: hidden; background: #120d08; }
  .o-card__img { object-fit: cover !important; }
  .o-card__nombre { font-size: 1.15rem !important; margin-bottom: 0.2rem !important; line-height: 1.2 !important; letter-spacing: 0.03em !important; }
  .o-card__tec { font-size: 0.65rem !important; }
  .o-card__info { padding: 1rem !important; }
  .dv-header { min-height: 100vh; display: flex; flex-direction: column; padding: 6rem 1.8rem 5rem; position: relative; box-sizing: border-box; }
  .dv-header__inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; flex: 1; width: 100%; }
  .dv-header__title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .dv-header__cur-names { flex-direction: column; gap: 0.3rem; }
  .dv-desc { padding: 2rem 1.5rem 4rem; }
  .dv-desc__serie-name { font-size: 1.8rem; position: static !important; }
  .dv-desc__text { margin-top: 2rem; }
  .dv-desc__text p { font-size: 0.95rem; line-height: 1.8; max-width: 100%; }
  .dv-back { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
  .dv-back__tooltip { display: none; }
  /* ── Modal móvil: imagen más grande y visible, tipografías legibles ── */
  .modal-box { height: 90vh; width: 92vw; margin: auto; display: flex; flex-direction: column; border-radius: 12px; }
  .modal-img-wrap { height: 35vh; min-height: auto; flex-shrink: 0; border-radius: 12px 12px 0 0; background: #0a0806; }
  .modal-img-wrap img { object-fit: contain !important; }
  .modal-body { padding: 1.2rem 1.2rem 1rem; overflow-y: auto; flex: 1; text-align: left !important; }
  .modal-title-group { align-items: flex-start !important; }
  .modal-title-line1 { font-size: 0.95rem !important; text-align: left !important; }
  .modal-title-line2 { font-size: 1.85rem !important; margin-bottom: 0.2rem; line-height: 1.1; text-align: left !important; }
  .modal-title-sub { font-size: 0.75rem !important; margin-top: 0.3rem; text-align: left !important; }
  .modal-center-block { align-items: flex-start !important; }
  .modal-fi-val { font-size: 0.75rem !important; }
  .modal-fi-label { font-size: 0.65rem !important; }
  .modal-fi-dot { width: 4px; height: 4px; }
  .modal-ficha-inline { gap: 0.2rem; justify-content: flex-start !important; }
  .modal-desc-wrap { max-width: 100% !important; }
  #modalDescripcion { font-size: 0.85rem !important; line-height: 1.4; text-align: left !important; }
  .modal-desc-lines { text-align: left !important; }
  .modal-desc-wrap { margin-top: 0.5rem; margin-bottom: 0.5rem; }
  .modal-nav { justify-content: flex-start; }
  .modal-nav-btn { font-size: 0.65rem !important; padding: 0.8rem !important; }
  .modal-consultar { font-size: 0.6rem !important; padding: 0.8rem !important; margin-top: 1rem !important; align-self: flex-start; }
  .dv-header__curaduria { margin-left: 0; margin-top: auto; padding-top: 3rem; }
  .masonry__img img { object-position: top center; }
  .modal-img { object-position: top center; border-radius: 12px 12px 0 0; object-fit: contain !important; background: #0a0806; }
  .scroll-anim-obra { transition: opacity 1.2s cubic-bezier(0.25, 1, 0.3, 1) !important; transform: none !important; }
  /* Activar texto e información automáticamente al scroll */
  .o-card.is-visible .o-card__overlay { opacity: 1 !important; }
  .o-card.is-visible .o-card__info { opacity: 1 !important; transform: translateY(0) !important; }
  .o-card.is-visible .o-card__nombre { opacity: 1 !important; transform: translateY(0) !important; }
  .o-card.is-visible .o-card__tec { opacity: 1 !important; }
}