:root {
  --max-w:1200px;
  --font-serif:"Playfair Display","Times New Roman",serif;
  --font-sans:"Inter","Helvetica Neue",sans-serif;
  --bg:#fff; 
  --text:#111; 
  --muted:rgba(0,0,0,.66);
  --soft:#f7f7f7; 
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --qa-max: clamp(900px, 68vw, 1100px);
  --header-h:56px;
}

/* Desktop aire Vogue */
@media (min-width: 1200px) {
  :root { --max-w: 1400px; }
  .magazine { padding-left:.5rem; padding-right:.5rem; }
  .mag-block.dark, .mag-block.alt-bg { padding-left:1.5rem; padding-right:1.5rem; }
}

/* BASE */
* { box-sizing:border-box; }
img { display:block; max-width:100%; }
html, body { max-width:100%; }
body {
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  overflow-x:hidden;
  padding-top: var(--header-h); /* espacio para header fijo */
}
html.no-scroll, body.no-scroll { overflow:hidden; }

h1,h2,h3,blockquote { font-family:var(--font-serif); }
.sr-only {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* PROGRESS BAR */
.progress-wrap {
  position:fixed; inset:0 0 auto 0; height:3px; z-index:9999; background:transparent;
}
#progress-bar {
  height:100%; width:0%;
  background:linear-gradient(90deg,#111,#666);
  transition:width .1s linear;
}

/* HEADER fijo */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:10000;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  min-height:var(--header-h);
  padding:.6rem 1rem; background:rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* GM a la izq, menú a la dcha */
.brand {
  grid-column:1; justify-self:start; display:flex; align-items:center; gap:.55rem;
  color:var(--text); text-decoration:none;
}
.brand-logo {
  font-family:"Cinzel", var(--font-serif); font-weight:700; font-size:1.05rem;
  letter-spacing:.02em; border:1.5px solid #111; border-radius:999px;
  padding:.3rem .58rem; line-height:1; user-select:none;
}
.nav-toggle {
  grid-column:3; justify-self:end; width:38px; height:32px;
  border:1px solid rgba(0,0,0,.14); border-radius:999px;
  background:rgba(255,255,255,.55); cursor:pointer;
}
.nav-toggle span {
  display:block; height:2px; background:#111; margin:6px 8px;
  transition:transform .25s,opacity .25s;
}
.nav-open .nav-toggle span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* NAV desplegable */
.site-nav {
  position:fixed; top:var(--header-h); left:0; right:0;
  display:grid; justify-items:center; gap:.35rem;
  padding:1rem 1.25rem 1.25rem;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transform:translateY(-120%); transition:transform .25s ease;
  visibility:hidden; pointer-events:none; z-index:10001;
}
.nav-open .site-nav { transform:translateY(0); visibility:visible; pointer-events:auto; }
.site-nav a {
  display:block; width:min(680px, 92vw);
  text-align:center;
  color:var(--text); text-decoration:none;
  font:400 1.1rem var(--font-serif);
  letter-spacing:.12em; text-transform:uppercase;
  padding:.85rem 1rem;
  border-radius:999px;
  background:transparent; border:1px solid rgba(0,0,0,.10);
}
.site-nav a:hover, .site-nav a:focus {
  background:rgba(0,0,0,.06); outline:none;
}
.site-nav a.is-active {
  background:#111; color:#fff; border-color:#111;
}

/* HERO */
.hero {
  position:relative; height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.72);
  transform:translate(var(--heroTX,0),var(--heroTY,0)) scale(1.08);
  will-change:transform,filter;
  animation: heroBreath 16s ease-in-out infinite,
             editorialPan 24s ease-in-out infinite alternate;
}
@keyframes heroBreath {
  0%{filter:brightness(.72) saturate(1);}
  50%{filter:brightness(.78) saturate(1.05);}
  100%{filter:brightness(.72) saturate(1);}
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 30%,rgba(0,0,0,.25));
}
.hero-content { position:relative; text-align:center; color:#fff; }
.hero-title { letter-spacing:3px; font-size:clamp(2.6rem,6vw,5rem); }
.hero-sub { opacity:.92; }
@keyframes editorialPan{
  0%{ transform: translate(var(--heroTX,0), var(--heroTY,0)) scale(1.05); }
  100%{ transform: translate(calc(var(--heroTX,0) + 8px), calc(var(--heroTY,0) + 6px)) scale(1.12); }
}

/* MAG LAYOUT */
.magazine {
  max-width:var(--max-w); margin:0 auto; padding:3rem 1rem;
  display:flex; flex-direction:column; gap:5rem; overflow:visible;
}
.mag-block { display:flex; flex-direction:column; gap:1.5rem; text-align:center; }
.mag-block.dark {
  background:#111; color:#fff; padding:3rem 1rem; border-radius:8px;
}
.mag-block.dark .mag-lead { color:rgba(255,255,255,.86); }
.mag-block.alt-bg {
  background:var(--soft); padding:3rem 1rem; border-radius:8px;
}

/* TEXTOS */
.eyebrow {
  font:600 .75rem var(--font-sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.eyebrow.centered { text-align:center; }
.mag-title {
  font-size:clamp(2rem,5vw,3rem); font-weight:400;
  letter-spacing:2px; text-transform:uppercase;
}
.subtitle {
  display:block; font:600 .95rem var(--font-sans); color:var(--muted);
  letter-spacing:1px; margin-top:.25rem;
}
.mag-lead {
  max-width:760px; margin:0 auto; color:var(--muted); font-size:1.05rem;
}
.mag-lead.dropcap { text-align:left; }
.dropcap::first-letter {
  float:left; font-family:var(--font-serif); font-size:3.8rem;
  line-height:.86; margin:.06rem 0 0 0;
}
.editorial-quote {
  font-size:clamp(2rem,5vw,3rem); font-style:italic;
  margin:1.2rem auto; max-width:820px;
}
.editorial-quote span {
  display:block; font-size:1rem; color:#888; margin-top:.4rem;
}

/* Editorial oscuro */
.mag-block.dark .mag-lead.readable {
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:1.15rem; letter-spacing:.2px; color:rgba(255,255,255,.92);
}
.mag-block.dark .pullquote {
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.5rem); letter-spacing:.2px;
  color:#fff; margin:1rem auto 2rem; max-width:900px;
}

/* LEAD IMAGE */
.lead { position:relative; display:block; }
.lead img {
  width:100%; height:auto; border-radius:6px;
  box-shadow:var(--shadow); max-height:92vh; object-fit:cover;
}
.lead figcaption {
  text-align:center; color:#8a8a8a; font-style:italic; margin-top:.35rem;
}
.lead.full-bleed {
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-radius:0;
}
.lead.full-bleed img { border-radius:0; }

/* Xavi cuadrada centrada */
.lead.square-centered {
  width:min(100%, var(--qa-max)); margin:0 auto; margin-top: 100px; display:block;
}
@media (min-width:1024px) {
  .lead.square-centered { aspect-ratio:1/1; overflow:hidden; border-radius:8px; }
  .lead.square-centered img { width:100%; height:100%; object-fit:cover; }
}

/* GRIDS */
.mag-images { display:grid; gap:1rem; }
.mag-images.single { grid-template-columns:1fr; }
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.mag-images figure { margin:0; }
.mag-images img {
  width:100%; height:auto; max-height:82vh; object-fit:cover;
  border-radius:6px; box-shadow:var(--shadow);
}
figcaption {
  font-family:var(--font-serif); font-size:.9rem; color:#8a8a8a;
  text-align:center; margin-top:.35rem;
}

/* Tríptico oscuro */
.mag-block.dark .mag-images.grid-3 figure {
  aspect-ratio:3/4; overflow:hidden; border-radius:8px;
}
.mag-block.dark .mag-images.grid-3 img {
  height:100%; width:100%; object-fit:cover; max-height:none;
}

/* Hover */
@media (hover:hover) {
  .lead:hover img, .mag-images figure:hover img,
  .mag-mosaic figure:hover img, .mag-carousel img:hover {
    transform:translateY(-2px) scale(1.03);
    transition:transform .45s ease, box-shadow .45s ease;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
  }
}
@media (hover:none) {
  .lead:active img, .mag-images figure:active img,
  .mag-mosaic figure:active img { transform:scale(1.02); }
}

/* MOSAICO DESKTOP */
.mag-mosaic {
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(140px,auto); gap:1rem;
}
.mag-mosaic .m1{grid-column:1/3;}
.magmosaic .m2{grid-column:3/5;}
.mag-mosaic .m2{grid-column:3/5;}
.mag-mosaic .m3{grid-column:5/7;}
.mag-mosaic img {
  height:100%; object-fit:cover; max-height:70vh;
  border-radius:6px; box-shadow:var(--shadow);
}

/* CARRUSEL (MÓVIL) */
.mag-carousel {
  display:none; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.mag-carousel::-webkit-scrollbar { display:none; }
.carousel-track { display:flex; gap:1rem; }
.carousel-track img {
  flex:0 0 80%; scroll-snap-align:center;
  border-radius:6px;
  /* sin sombras en carrusel */
  box-shadow:none;
  max-height:70vh; object-fit:cover;
}

/* MEDIDAS */
.measurements-block {
  position:relative; background:var(--soft); padding:2.6rem 1.25rem;
  border-radius:8px; overflow:hidden; display:grid; gap:1.5rem;
}
.mag-overlay-letter {
  position:absolute; top:14px; left:14px; font-family:var(--font-serif);
  font-size:10rem; color:rgba(0,0,0,.05); user-select:none;
}
.measure-content, .measure-aside { position:relative; z-index:1; }
.measurements-block dl {
  max-width:760px; margin:1rem auto 0;
  columns:2; column-gap:3rem; text-align:left;
}
.measurements-block dt { font-family:var(--font-serif); font-weight:700; }
.measurements-block dd { margin:0 0 .6rem; color:var(--muted); }
.measure-aside { display:none; }
.measure-aside img {
  border-radius:8px; box-shadow:var(--shadow);
  max-height:75vh; object-fit:cover;
}

/* ENTREVISTA */
.mag-images.single figure { max-width:var(--qa-max); margin:0 auto; }
.interview .qa {
  max-width:var(--qa-max); margin:0 auto; text-align:left;
  font-family:var(--font-serif);
}
.interview.twocol .qa-grid {
  display:grid; grid-template-columns:minmax(320px,480px) minmax(320px,480px);
  column-gap:clamp(2rem,6vw,6rem); justify-content:center; position:relative;
}
.interview.twocol .qa-grid::before {
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:rgba(0,0,0,.08);
}
.interview.twocol .col.left { justify-self:end; }
.interview.twocol .col.right { justify-self:start; }
.question {
  font-weight:700; margin-top:1rem; position:relative; padding-left:2rem;
}
.answer {
  font-style:italic; font-size:1.2rem; margin:.2rem 0 .35rem;
  position:relative; padding-left:2rem;
}
.question::before, .answer::before {
  position:absolute; left:0; top:.1rem;
  font:700 1.1rem var(--font-serif); color:#bbb;
}
.question::before { content:"Q"; }
.answer::before { content:"A"; }
.note { color:#8a8a8a; margin-bottom:.8rem; padding-left:2rem; }

/* CONTACTO */
.mag-contact {
  text-align:center; background:#111; color:#fff;
  padding:4rem 1.5rem; border-radius:8px;
}
.mag-contact a { color:#fff; text-decoration:underline; }

/* FOOTER */
.site-footer {
  text-align:center; color:#8a8a8a; padding:2rem 1rem;
}

/* LIGHTBOX */
.lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.92);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; z-index:11000; padding:2rem;
}
.lightbox-img { max-width:90%; max-height:80vh; object-fit:contain; margin-bottom:1rem; }
.lightbox-caption { color:#fff; font-family:var(--font-serif); text-align:center; }

/* X limpia, sin recuadro */
.lightbox-close {
  position:absolute; top:16px; right:24px;
  background:none; border:none; box-shadow:none; outline:none;
  color:#fff; font-size:2rem; line-height:1; cursor:pointer;
  padding:0; margin:0;
}
.lightbox-close:focus { outline:none; }

/* ANIMACIONES */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
[data-animate]{opacity:0;}
[data-animate].animated{opacity:1;animation:fadeUp 900ms ease forwards;}
.stagger figure,.stagger img{opacity:0;transform:translateY(24px);}
.stagger.revealed figure,.stagger.revealed img{animation:fadeUp .8s ease forwards;}
.stagger.revealed figure:nth-child(1),.stagger.revealed img:nth-child(1){animation-delay:.05s;}
.stagger.revealed figure:nth-child(2),.stagger.revealed img:nth-child(2){animation-delay:.15s;}
.stagger.revealed figure:nth-child(3),.stagger.revealed img:nth-child(3){animation-delay:.25s;}
.stagger.revealed figure:nth-child(4),.stagger.revealed img:nth-child(4){animation-delay:.35s;}
.stagger.revealed figure:nth-child(5),.stagger.revealed img:nth-child(5){animation-delay:.45s;}

/* ENTREVISTA en móvil */
@media (max-width: 900px){
  .interview.twocol .qa-grid{
    grid-template-columns: 1fr; column-gap:0; row-gap:1rem;
  }
  .interview.twocol .qa-grid::before{ display:none; }
  .interview.twocol .col.left, .interview.twocol .col.right{ justify-self:stretch; }
  .question,.answer,.note{ padding-left:1.5rem; overflow-wrap:anywhere; }
}

/* CARRUSEL móvil */
@media (max-width: 900px){
  .mag-mosaic{ display:none; }
  .mag-carousel{
    display:block; position:relative;
    padding:.5rem 0 1.25rem; margin:.5rem -1rem 0;
    -ms-overflow-style:none; touch-action: pan-x pinch-zoom;
  }
  /* ⛔ Quitamos las cortinas superpuestas que causaban la “raya” */
  .mag-carousel::before, .mag-carousel::after{ display:none; }

  .carousel-track{ padding:0 10vw; gap:1.2rem; }
  .carousel-track img{
    flex:0 0 82vw; aspect-ratio: 4 / 5;
    object-fit:cover; border-radius:10px;
    scroll-snap-align:center; scroll-snap-stop:always;
    /* sin sombras en carrusel móvil */
    box-shadow:none;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    transform:translateZ(0); -webkit-transform:translateZ(0);
  }
}

html, body, .magazine{ overflow-x:hidden; }

/* FIX full-bleed desktop */
@media (min-width: 1024px) {
  .magazine .lead.full-bleed {
    width: 100vw; max-width: 100vw;
    margin: 2rem 0;
    margin-left: calc(-1 * (50vw - 50%));
    margin-right: calc(-1 * (50vw - 50%));
    position: relative; left: 0; border-radius: 0;
  }
  .magazine .lead.full-bleed img {
    width: 100vw; height: auto; display: block; border-radius: 0; box-shadow: none;
  }
}

/* ✅ FIX: Bloque 6 imágenes pequeñas en móvil */
@media (max-width: 768px) {
  .mag-images.grid-2 { grid-template-columns: 1fr; }
  .mag-images.grid-2 figure { max-width: 100%; }
}

/* MEDIDAS · asegurar foto fullbody visible en desktop */
@media (min-width: 1024px){
  .measurements-block{
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
  .measure-aside{ display:block !important; }
  .measure-aside figure{ margin:0; height:auto; }
  .measure-aside img{ width:100%; height:auto; object-fit:cover; border-radius:8px; box-shadow:var(--shadow); }
}

/* Reduce motion (opcional del usuario) */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* HERO · zoom invertido solo en móvil */
@media (max-width: 900px){
  .hero-bg{
    /* Arranca un poco más cerca y hace zoom OUT primero */
    transform: translate(var(--heroTX,0), var(--heroTY,0)) scale(1.18);
    animation:
      heroBreath 16s ease-in-out infinite,
      /* mismo pan, pero en sentido inverso al iniciar (zoom out) */
      editorialPan 24s ease-in-out infinite alternate-reverse;
  }
}

/* ====== AJUSTES SOLO PARA BLOQUES OSCUROS ====== */
.mag-block.dark { background:#111; color:#fff; }
.mag-block.dark .subtitle { color: rgba(255,255,255,.66); }

/* === Overrides para carruseles: sin sombras incluso en hover === */
.mag-carousel img{ box-shadow:none !important; }
@media (hover:hover){ .mag-carousel img:hover{ box-shadow:none !important; } }