/* ============================================================
   ÓSCAR EDÚ — Sistema de diseño compartido
   Blanco protagonista · negro · dorado envejecido · editorial de lujo
   ============================================================ */

:root{
  --white:#ffffff;
  --ink:#161616;
  --ink-soft:#333333;
  --ink-faint:rgba(22,22,22,0.4);
  --gold:#b6884f;
  --gold-deep:#96703f;
  --gold-soft:#d8bd8f;
  --hairline:#e4dfd4;
  --gray-photo-a:#e9e7e2;
  --gray-photo-b:#d8d4cb;
  --max:1180px;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--white);
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 6vw;
}

.eyebrow{
  font-family:'Cormorant Garamond', serif;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
}

.serif-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  letter-spacing:0.01em;
}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--hairline);
}
.site-header .bar{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand .mark{
  width:32px; height:32px;
  border:1px solid var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:200;
  letter-spacing:0.05em;
}
.brand .name{
  font-weight:200;
  font-size:16px;
  letter-spacing:0.04em;
  color:var(--gold-deep);
}
.brand .mark{ border-color:var(--gold); color:var(--gold-deep); }
.site-nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.site-nav a{
  text-decoration:none;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease;
}
.site-nav a:hover, .site-nav a.active{
  color:var(--gold-deep);
  border-color:var(--gold-soft);
}
.cart-toggle{
  background:none;
  border:1px solid var(--ink);
  border-radius:50%;
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:12px;
  font-family:'Montserrat', sans-serif;
  position:relative;
  transition:border-color .3s ease, color .3s ease;
}
.cart-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.cart-count{
  position:absolute;
  top:-6px; right:-6px;
  background:var(--gold);
  color:var(--white);
  font-size:9px;
  min-width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
}
.cart-count[data-empty="true"]{ display:none; }

/* ---------- FACETA HERO ---------- */
.faceta-hero{
  padding:110px 6vw 72px;
  border-bottom:1px solid var(--hairline);
}
.faceta-hero .back-link{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-bottom:18px;
}
.faceta-hero .back-link:hover{ color:var(--gold-deep); }
.faceta-hero .wrap{ padding:0; max-width:var(--max); margin:0 auto; }
.faceta-hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(38px, 6vw, 68px);
  letter-spacing:0.01em;
  margin-top:10px;
  color:var(--gold-deep);
}
.faceta-hero .title-rule{
  width:44px; height:1px;
  background:var(--gold);
  margin-top:16px;
}
.faceta-hero .hero-caption{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:15px;
  color:var(--gold-deep);
  margin-top:16px;
}
.faceta-hero .intro{
  margin-top:22px;
  max-width:58ch;
  font-size:15px;
  color:var(--ink-soft);
  font-weight:300;
}
.faceta-hero .intro .draft-flag{
  display:block;
  margin-top:10px;
  font-size:10px;
  letter-spacing:0.05em;
  color:var(--ink-faint);
}

/* ---------- SECTIONS ---------- */
section{ padding:96px 6vw; }
section .wrap{ padding:0; }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:56px;
  gap:20px;
  flex-wrap:wrap;
}
.section-head h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(24px, 3vw, 34px);
}
.section-head .sub{
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-faint);
}

/* ---------- GALLERY / PROYECTOS GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
}
.tile{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  display:flex;
  align-items:flex-end;
  text-decoration:none;
  color:var(--ink);
}
.tile .tile-fill{ position:absolute; inset:0; transition:transform .8s ease; }
.tile:hover .tile-fill{ transform:scale(1.04); }
.tile .tile-cap{
  position:relative;
  z-index:2;
  padding:18px;
  width:100%;
}
.tile .tile-cap .t{
  font-family:'Cormorant Garamond', serif;
  font-size:17px;
}
.tile .tile-cap .s{
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--ink-faint);
  margin-top:2px;
}
.tile .placeholder-note{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  font-size:9px;
  letter-spacing:0.1em;
  color:rgba(22,22,22,0.32);
}

/* ---------- PRODUCT / ADQUIERE ---------- */
.products{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}
.product-card{ display:flex; flex-direction:column; gap:12px; }
.product-card .thumb{
  aspect-ratio:1/1;
  min-height:220px;
  background:linear-gradient(160deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.product-card .thumb.thumb-book{
  aspect-ratio:auto;
  min-height:0;
  background:none;
  display:flex;
  align-items:flex-end;
}
.product-card .thumb.thumb-book img{
  width:100%;
  height:auto;
  display:block;
}
.product-card .thumb .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.product-card .name{ font-family:'Cormorant Garamond', serif; font-size:17px; }
.product-card .price{ font-size:13px; color:var(--ink-soft); }
.product-card .external{
  font-size:10px;
  letter-spacing:0.06em;
  color:var(--ink-faint);
}
.product-card .external a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border:1px solid var(--ink);
  background:none;
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover{ background:var(--ink); color:var(--white); }
.btn.gold{ border-color:var(--gold); color:var(--gold); }
.btn.gold:hover{ background:var(--gold); color:var(--white); }
.btn.small{ padding:8px 16px; font-size:10px; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }
.btn:disabled:hover{ background:none; color:var(--ink); }

/* ---------- PLATFORM LINKS ---------- */
.platform-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:6px;
}
.platform-links a{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:1px solid var(--hairline);
  padding-bottom:2px;
  transition:color .3s ease, border-color .3s ease;
}
.platform-links a:hover{ color:var(--gold); border-color:var(--gold-soft); }

/* ---------- CONTACT / FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--hairline);
  padding:84px 6vw 56px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
}
.footer-grid .label{
  font-size:10px;
  letter-spacing:0.15em;
  color:var(--ink-faint);
  margin-bottom:10px;
  text-transform:uppercase;
}
.footer-grid a{
  display:block;
  font-size:13px;
  text-decoration:none;
  margin-bottom:8px;
  color:var(--ink-soft);
  transition:color .3s ease;
}
.footer-grid a:hover{ color:var(--gold); }
.footer-bottom{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid var(--hairline);
  font-size:10px;
  color:var(--ink-faint);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- CART DRAWER ---------- */
.cart-overlay{
  position:fixed; inset:0;
  background:rgba(22,22,22,0.25);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  z-index:90;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width:min(400px, 90vw);
  background:var(--white);
  border-left:1px solid var(--hairline);
  transform:translateX(100%);
  transition:transform .4s ease;
  z-index:95;
  display:flex;
  flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer .cart-head{
  padding:24px;
  border-bottom:1px solid var(--hairline);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cart-drawer .cart-head h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:20px;
}
.cart-close{
  background:none; border:none; cursor:pointer;
  font-size:14px; color:var(--ink-soft);
}
.cart-items{
  flex:1;
  overflow-y:auto;
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.cart-empty{ font-size:12px; color:var(--ink-faint); }
.cart-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
}
.cart-item .ci-name{ font-family:'Cormorant Garamond', serif; font-size:15px; }
.cart-item .ci-meta{ font-size:10px; color:var(--ink-faint); margin-top:2px; }
.cart-item .ci-remove{
  background:none; border:none; cursor:pointer;
  font-size:10px; letter-spacing:0.06em;
  color:var(--ink-faint);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cart-item .ci-remove:hover{ color:var(--gold); }
.cart-foot{
  border-top:1px solid var(--hairline);
  padding:20px 24px 26px;
}
.cart-total{
  display:flex; justify-content:space-between;
  font-size:13px; margin-bottom:14px;
}
.paypal-slot{
  border:1px dashed var(--hairline);
  padding:14px;
  text-align:center;
  font-size:10px;
  letter-spacing:0.05em;
  color:var(--ink-faint);
  margin-top:10px;
}

/* ---------- BIOGRAFÍA (Escritor y otras facetas) ---------- */
.bio-block{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:60px;
  align-items:start;
}
.bio-portrait{
  aspect-ratio:4/5;
  min-height:340px;
  background:linear-gradient(160deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.bio-portrait .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.bio-quote{
  margin-top:18px;
  padding-left:16px;
  border-left:1px solid var(--gold);
}
.bio-quote p{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.6;
}
.bio-text p{
  font-size:14px;
  line-height:1.95;
  color:var(--ink-soft);
  max-width:60ch;
  margin-bottom:16px;
}
.bio-text strong{
  font-weight:500;
  color:var(--ink);
}
.bio-text .draft-flag{
  display:block;
  font-size:10px;
  letter-spacing:0.05em;
  color:var(--ink-faint);
  margin-top:6px;
}

/* ---------- MODELO — PORTADA / HUB (4 accesos alrededor del centro) ----------
   .hub-center reutiliza el mismo .bio-block que Escritor/Actor (foto+cita+bio).
   Las 4 tarjetas (.hub-card) se colocan en cuadrantes reales alrededor del
   centro mediante grid-template-areas: arriba-izq MODA, arriba-der TALENT,
   abajo-izq MANOS, abajo-der VIDA. Sistema propio, no reutiliza .portfolio-grid
   ni .actor-collage. */
.modelo-hub{
  display:grid;
  grid-template-columns: 0.85fr 2.3fr 0.85fr;
  grid-template-areas:
    "moda   center talent"
    "manos  center vida";
  gap:44px 40px;
  align-items:stretch;
}
.hub-center{ grid-area:center; display:flex; align-items:center; }
.hub-center .bio-block{ width:100%; }
.hub-moda{   grid-area:moda; }
.hub-talent{ grid-area:talent; }
.hub-manos{  grid-area:manos; }
.hub-vida{   grid-area:vida; }

.hub-card{
  display:flex;
  align-items:center;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.hub-card-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:38px 0;
  border-bottom:1px solid var(--hairline);
  transition:border-color 0.3s ease;
}
.hub-card:hover .hub-card-label{ border-color:var(--gold); }
.hub-card-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(24px, 2.4vw, 32px);
  letter-spacing:0.03em;
  color:var(--gold-deep);
  transition:color 0.3s ease, letter-spacing 0.3s ease;
}
.hub-card:hover .hub-card-name{ color:var(--gold); letter-spacing:0.05em; }
.hub-card-rule{
  width:32px; height:1px;
  background:var(--gold);
  opacity:0.6;
  transition:width 0.3s ease, opacity 0.3s ease;
}
.hub-card:hover .hub-card-rule{ width:48px; opacity:1; }

/* ---------- MANOS — collage editorial libre (Modelo) ----------
   Sistema propio de esta sección, independiente de .moda-collage,
   .talent-wall y .vida-collage — pero reutilizando el mismo criterio
   visual ya afinado en Moda (mismo tipo de retícula: cada pieza
   conserva su proporción real, sin recorte ni deformación; el alto
   de fila lo calcula manos-collage.js). El único vídeo de YouTube es
   una pieza más del collage, sin cabecera ni tratamiento diferenciado:
   solo un icono de play centrado para indicar que es reproducible. */
.manos-subhead{
  margin-bottom:28px;
}
.manos-subhead h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(20px, 2.4vw, 26px);
  color:var(--ink);
}
.manos-subhead .sub{
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-top:4px;
  display:block;
}
.manos-collage{
  --manos-cols:12;
  --manos-row:6px;
  --manos-gap:6px;
  display:grid;
  grid-auto-flow:dense;
  grid-template-columns:repeat(var(--manos-cols), 1fr);
  grid-auto-rows:var(--manos-row);
  gap:var(--manos-gap);
  margin-bottom:16px;
}
.manos-item{
  position:relative;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  grid-row-end:span 40;
}
.manos-item.m-video{ cursor:pointer; }
.manos-item img, .manos-item iframe{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border:0;
}
.manos-item .m-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
  pointer-events:none;
}
.manos-item .m-play::before{
  content:"";
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--ink);
  margin-left:3px;
}
.manos-item.m-xs{ grid-column:span 2; }
.manos-item.m-s{  grid-column:span 3; }
.manos-item.m-m{  grid-column:span 4; }
.manos-item.m-l{  grid-column:span 5; }
.manos-item.m-xl{ grid-column:span 6; }

/* ---------- VIDA DE MODELO — diario visual en columnas (Modelo) ----------
   Sistema propio de esta sección: mosaico de columnas (masonry), pensado
   para un material mayoritariamente vertical (fotos de móvil, backstage,
   carteles de calle, ilustraciones) muy distinto del de Moda o Talent.
   Cada foto conserva su alto natural según el ancho de su columna — sin
   recortes ni niveles curados de tamaño; la propia variedad de alturas
   crea el ritmo visual. Los 2 reels de Instagram y el vídeo de YouTube
   usan el mismo lenguaje ya validado (imagen real + play + enlace de
   salida), igual que en Vida de actor, pero con clases propias. */
.vida-collage{
  column-count:4;
  column-gap:16px;
}
.vida-item{
  break-inside:avoid;
  margin-bottom:16px;
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
}
.vida-item img{
  width:100%;
  height:auto;
  display:block;
}
.vida-item.v-reel, .vida-item.v-video{ cursor:pointer; }
.vida-item .v-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
  pointer-events:none;
}
.vida-item .v-play::before{
  content:"";
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--ink);
  margin-left:3px;
}
.vida-item .v-tag{
  position:absolute;
  bottom:10px; left:10px;
  font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff;
  background:rgba(22,22,22,0.55);
  padding:4px 8px;
  pointer-events:none;
}

/* ---------- TALENT — muro audiovisual panorámico (Modelo) ----------
   Sistema propio de esta sección, reconstruido desde cero: NO es una
   retícula/masonry de columnas (esa arquitectura apilaba contenido y
   crecía en altura). Es un muro de FILAS horizontales de altura fija
   (mismo principio que un collage fotográfico tipo Google Fotos/Flickr):
   cada fila tiene una altura común y el ancho de cada pieza lo decide
   su proporción real (aspect-ratio) — así varias piezas horizontales
   caben literalmente en la misma franja, y las 5 verticales de
   Instagram quedan como acentos estrechos dentro de filas cortas, no
   como columnas largas. talent-collage.js calcula la altura de fila
   según el ancho disponible y fija esa altura + aspect-ratio en cada
   pieza; el navegador reparte el ancho de cada una automáticamente.
   Nada se recorta ni se deforma: cada caja tiene siempre exactamente
   la proporción real de su contenido. */
.talent-wall{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px;
  margin-bottom:16px;
}
.talent-item{
  position:relative;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  cursor:default;
  flex:0 0 auto;
}
.talent-item.t-video, .talent-item.t-reel{ cursor:pointer; }
.talent-item img, .talent-item iframe{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover; /* la caja ya tiene, por construcción, la proporción real de la imagen: cover no recorta nada aquí, solo evita costuras de redondeo */
  border:0;
}
.talent-item .t-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
  pointer-events:none;
}
.talent-item .t-play::before{
  content:"";
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--ink);
  margin-left:3px;
}
.talent-item .t-tag{
  position:absolute;
  bottom:10px; left:10px;
  font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff;
  background:rgba(22,22,22,0.55);
  padding:4px 8px;
  pointer-events:none;
}

/* ---------- GALERÍA FLEXIBLE (ampliable sin rediseño) ---------- */
.flex-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.flex-gallery .g-item{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  min-height:180px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  overflow:hidden;
}
.flex-gallery .g-item.tall{ grid-row: span 2; aspect-ratio:auto; }
.flex-gallery .g-item .g-tag{
  position:absolute; top:10px; left:10px;
  font-size:9px; letter-spacing:0.08em;
  color:rgba(22,22,22,0.4);
  background:rgba(255,255,255,0.75);
  padding:3px 7px;
}
.flex-gallery .g-item .g-source{
  position:absolute; bottom:10px; left:10px;
  font-size:8px; letter-spacing:0.06em;
  color:rgba(22,22,22,0.32);
}
.flex-gallery .g-item img,
.flex-gallery .g-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.flex-gallery .g-item.video-item{ background:#111; }
.gallery-note{
  margin-top:18px;
  font-size:11px;
  color:var(--ink-faint);
  max-width:60ch;
}

/* ---------- LECTURA GRATUITA ---------- */
/* Contenedor preparado para varias piezas gratuitas; con una sola,
   se comporta igual que antes — no se muestran huecos ni tarjetas vacías. */
.free-read-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(480px, 1fr));
  gap:32px;
}
.free-read-item{
  border:1px solid var(--hairline);
  padding:72px 6vw;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  align-items:center;
}
.free-read-item .cover{
  aspect-ratio:3/4;
  min-height:260px;
  background:linear-gradient(160deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.free-read-item .cover.cover-natural{
  aspect-ratio:auto;
  min-height:0;
  background:none;
  display:flex;
  align-items:flex-start;
}
.free-read-item .cover.cover-natural img{
  width:100%;
  height:auto;
  display:block;
}
.free-read-item .cover .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.free-read-item .eyebrow{ margin-bottom:8px; }
.free-read-item h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:26px;
  color:var(--ink);
  margin-bottom:14px;
}
.free-read-item p{
  font-size:14px;
  color:var(--ink-soft);
  max-width:52ch;
  margin-bottom:20px;
}
.btn.outline-gold{
  border:1px solid var(--gold);
  color:var(--gold-deep);
  background:none;
}
.btn.outline-gold:hover{ background:var(--gold); color:var(--white); }

/* ---------- FICHA TÉCNICA (Actor) ---------- */
.spec-table{
  margin-top:26px;
  border-top:1px solid var(--hairline);
}
.spec-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid var(--hairline);
}
.spec-row .k{
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.spec-row .v{
  font-size:13px;
  color:var(--ink-soft);
  text-align:right;
}
.cv-download{
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.cv-download .pending-note{
  font-size:10px;
  letter-spacing:0.05em;
  color:var(--ink-faint);
}

/* ---------- VIDEOBOOK Y ESCENAS (Actor) ---------- */
.videobook-main{
  aspect-ratio:16/9;
  min-height:320px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.videobook-main .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:0.1em; color:rgba(22,22,22,0.35);
}
.videobook-main iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.scenes-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:14px;
}
.scenes-row .scene{
  position:relative;
  aspect-ratio:16/9;
  min-height:100px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
}
.scenes-row .scene iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.scenes-row .scene .s-label{
  position:absolute; bottom:8px; left:8px;
  font-size:9px; letter-spacing:0.08em;
  color:rgba(22,22,22,0.4);
}

/* ---------- FILMSTRIP — Vida de actor (identidad propia, distinta de Escritor) ---------- */
.filmstrip{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:20px 0;
  border-top:1px dashed var(--hairline);
  border-bottom:1px dashed var(--hairline);
}
.filmstrip .f-item{
  position:relative;
  flex:0 0 auto;
  width:280px;
  aspect-ratio:3/2;
  min-height:170px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
}
.filmstrip .f-item .f-tag{
  position:absolute; top:10px; left:10px;
  font-size:9px; letter-spacing:0.08em;
  color:rgba(22,22,22,0.4);
  background:rgba(255,255,255,0.75);
  padding:3px 7px;
}
.filmstrip .f-item .f-source{
  position:absolute; bottom:10px; left:10px;
  font-size:8px; letter-spacing:0.06em;
  color:rgba(22,22,22,0.32);
}

/* ---------- REPRESENTACIÓN / AGENCIA (Actor) ---------- */
.agency-block{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:40px;
  align-items:start;
}
.agency-logo{
  aspect-ratio:1/1;
  min-height:140px;
  background:var(--white);
  border:1px solid var(--hairline);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.agency-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.agency-logo .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px;
  font-size:9px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.agency-details .name{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:21px;
  color:var(--ink);
  margin-bottom:14px;
}

/* ---------- DISCOGRAFÍA (Músico) ---------- */
.tier-label{
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:14px;
}
.discography-main{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:48px;
  align-items:center;
  padding-bottom:48px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:40px;
}
.discography-main .cover{
  width:320px;
  height:320px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.discography-main .cover .release-tag{
  position:absolute; top:14px; left:14px;
  font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--white);
  background:var(--gold-deep);
  padding:5px 10px;
}
.discography-main .cover .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px;
  font-size:10px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.discography-main .info h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:30px;
  color:var(--ink);
  margin-top:8px;
}
.discography-main .info p{
  font-size:13px;
  color:var(--ink-faint);
  margin-top:6px;
}

/* Catálogo anterior — mismo nivel que existía tras el álbum, ahora explícito */
.catalog-row{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:14px;
  padding-bottom:40px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:40px;
}
.catalog-item{ display:flex; flex-direction:column; gap:8px; }
.catalog-item .thumb{
  width:100%;
  aspect-ratio:1/1;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
  opacity:0.85;
}
.catalog-item .thumb .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; color:rgba(22,22,22,0.3);
}
.catalog-item .name{ font-size:11px; color:var(--ink-soft); line-height:1.3; }
.catalog-item .year{ font-size:9px; color:var(--ink-faint); }

.discography-secondary{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:30px;
}
.disco-item{ display:flex; flex-direction:column; gap:10px; }
.disco-item .thumb{
  aspect-ratio:1/1;
  min-height:180px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.disco-item .thumb .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.disco-item .name{ font-family:'Cormorant Garamond', serif; font-size:16px; color:var(--ink); }
.disco-item .type{ font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- VIDA DE MÚSICO — mosaico con ritmo propio ---------- */
.stage-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows:100px;
  gap:10px;
}
.stage-gallery .st-item{
  position:relative;
  grid-row:span 2;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
}
.stage-gallery .st-item.tall{ grid-row:span 3; }
.stage-gallery .st-item.wide{ grid-column:span 2; }
.stage-gallery .st-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.stage-gallery .st-item.video-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.stage-gallery .st-item .st-tag{
  position:absolute; top:10px; left:10px;
  font-size:9px; letter-spacing:0.08em;
  color:rgba(22,22,22,0.4);
  background:rgba(255,255,255,0.75);
  padding:3px 7px;
}
.stage-gallery .st-item .st-source{
  position:absolute; bottom:10px; left:10px;
  font-size:8px; letter-spacing:0.06em;
  color:rgba(22,22,22,0.32);
}

/* ---------- TRABAJOS — vitrina editorial (Modelo) ---------- */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
}
.portfolio-item{
  position:relative;
  aspect-ratio:3/4;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  overflow:hidden;
}
.portfolio-item.wide{
  grid-column:span 2;
  aspect-ratio:16/9;
}
.portfolio-item .cap-bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  background:linear-gradient(to top, rgba(22,22,22,0.55), rgba(22,22,22,0));
  display:flex; justify-content:space-between; align-items:flex-end;
}
.portfolio-item .cap-bar .p-type{
  font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--white);
}
.portfolio-item .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}

/* ---------- MODA Y EDITORIAL — collage libre (Modelo) ----------
   Sistema propio, independiente de .portfolio-grid y .actor-collage.
   Cada fotografía conserva su proporción original (nunca se recorta
   ni se deforma). El ancho de cada pieza lo decide su nivel
   (.m-xs / .m-s / .m-m / .m-l / .m-xl); el alto lo calcula un pequeño
   script a partir de la proporción real de cada imagen, para que el
   conjunto encaje como un mosaico editorial sin huecos y sin
   ampliar ninguna imagen por encima de su resolución. ---------- */
.moda-subhead{
  margin-bottom:28px;
}
.moda-subhead h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(20px, 2.4vw, 26px);
  color:var(--ink);
}
.moda-subhead .sub{
  font-size:12px;
  letter-spacing:0.06em;
  color:var(--ink-faint);
  margin-top:4px;
  display:block;
}
.moda-collage{
  --moda-cols:12;
  --moda-row:6px;
  --moda-gap:6px;
  display:grid;
  grid-auto-flow:dense; /* rellena huecos con las siguientes piezas que quepan, sin dejar blancos */
  grid-template-columns:repeat(var(--moda-cols), 1fr);
  grid-auto-rows:var(--moda-row);
  gap:var(--moda-gap);
  margin-bottom:16px;
}
.moda-item{
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  grid-row-end:span 40; /* valor de respaldo hasta que el script calcule el real */
}
.moda-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain; /* nunca recorta: en cuanto el script fija el alto real del contenedor a partir de la proporción de cada imagen, la foto lo ocupa por completo sin recorte ni deformación */
}
.moda-item.m-xs{ grid-column:span 2; }
.moda-item.m-s{  grid-column:span 3; }
.moda-item.m-m{  grid-column:span 4; }
.moda-item.m-l{  grid-column:span 5; }
.moda-item.m-xl{ grid-column:span 6; }

/* ---------- COLECCIONA — etiqueta de categoría (Modelo) ---------- */
.product-card .category{
  font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint);
}
.product-card .story{
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:30ch;
}

/* ---------- REPRESENTACIÓN MÚLTIPLE (Modelo) ---------- */
.agency-role{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:14px;
}
.agency-group + .agency-group{ margin-top:44px; }

/* ---------- REELS dentro de Trabajos (Modelo) ---------- */
.reel-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:14px;
}
.reel-item{
  position:relative;
  aspect-ratio:16/9;
  min-height:180px;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  overflow:hidden;
}
.reel-item .cap-bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 14px;
  background:linear-gradient(to top, rgba(22,22,22,0.6), rgba(22,22,22,0));
}
.reel-item .cap-bar .p-type{
  font-size:9px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--white);
}
.reel-item .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px;
  font-size:10px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}

/* ---------- PRESENTACIÓN — mosaico de 35 años (Modelo) ---------- */
.photo-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.photo-row + .photo-row{ margin-top:8px; }
.mosaic-cell{
  position:relative;
  aspect-ratio:3/4;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  overflow:hidden;
}
.mosaic-cell .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:10px;
  font-size:9px; letter-spacing:0.1em; color:rgba(22,22,22,0.32);
}
.mosaic-cell.polaroid{
  background:var(--white);
  border:1px solid var(--hairline);
  padding:10px 10px 26px;
}
.mosaic-cell.polaroid .inner{
  width:100%; height:100%;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  position:relative;
}
.mosaic-cell.polaroid .inner .placeholder-note{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; letter-spacing:0.08em; color:rgba(22,22,22,0.3);
}
.mosaic-cell.statement{
  background:var(--white);
  border:1px solid var(--hairline);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:16px;
}
.mosaic-cell.statement .big-num{
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  font-size:clamp(40px, 5vw, 62px);
  color:var(--gold-deep);
  line-height:1;
}
.mosaic-cell.statement .stmt-label{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:10px;
}
.mosaic-cell.statement .stmt-years{
  font-size:10px; color:var(--ink-faint);
  margin-top:6px;
}

/* ---------- VIDA DE ACTOR — collage libre (Actor) ---------- */
.actor-collage{
  column-count:4;
  column-gap:10px;
}
.actor-collage .c-item{
  break-inside:avoid;
  margin-bottom:10px;
  position:relative;
  display:block;
}
.actor-collage .c-item img{
  width:100%;
  height:auto;
  display:block;
}
.actor-collage .c-item.c-reel{
  cursor:pointer;
}
.actor-collage .c-item .c-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.88);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  color:var(--ink);
  box-shadow:0 2px 10px rgba(0,0,0,0.18);
}
.actor-collage .c-item .c-play::before{
  content:"";
  width:0; height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid var(--ink);
  margin-left:3px;
}
.actor-collage .c-item .c-reel-tag{
  position:absolute;
  bottom:10px; left:10px;
  font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff;
  background:rgba(22,22,22,0.55);
  padding:4px 8px;
}

/* ---------- CATÁLOGO COMPLETO con tracklist (Músico) ---------- */
.catalog-full-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:36px;
}
.catalog-item-full{
  border-top:1px solid var(--hairline);
  padding-top:18px;
}
.catalog-item-full .thumb{
  aspect-ratio:1/1;
  background:linear-gradient(150deg, var(--gray-photo-a), var(--gray-photo-b));
  margin-bottom:14px;
}
.catalog-item-full .thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.catalog-item-full .name{
  font-family:'Cormorant Garamond', serif;
  font-size:20px;
  color:var(--ink);
}
.catalog-item-full .year{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold-deep);
  margin:4px 0 12px;
}
.catalog-item-full .tracklist{
  list-style:none; padding:0; margin:0;
}
.catalog-item-full .tracklist li{
  font-size:12.5px;
  line-height:1.9;
  color:var(--ink-soft);
  border-bottom:1px solid var(--hairline);
  padding:5px 0;
}
.catalog-item-full .tracklist li:last-child{ border-bottom:none; }

/* ---------- VÍDEOS agrupados por álbum (Músico) ---------- */
.video-group{ margin-bottom:36px; }
.video-group h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:19px;
  color:var(--gold-deep);
  margin-bottom:14px;
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}
.video-tile .v-title{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:8px;
  line-height:1.5;
}
.video-tile .v-embed{
  position:relative;
  aspect-ratio:16/9;
  background:#111;
}
.video-tile .v-embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ---------- RESPONSIVE ---------- */

/* MODA Y EDITORIAL — en escritorio, el collage rompe el ancho máximo de
   .wrap (1180px) para leer en horizontal, mostrar más fotografías por
   franja y reducir sensiblemente la altura total de la composición.
   Solo cambia el ancho/nº de columnas de la retícula: ninguna imagen
   cambia de archivo, proporción ni nivel de tamaño (xs/s/m/l/xl). */
/* ---------- SERVICIO DE HABITACIONES — bloque protagonista (Músico) ---------- */
.sdh-block{
  display:grid;
  grid-template-columns:minmax(280px, 420px) 1fr;
  gap:56px;
  align-items:start;
}
.sdh-left .cover img{
  width:100%; height:auto; display:block;
}
.sdh-left .sdh-tagline{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:19px;
  color:var(--gold-deep);
  text-align:center;
  margin:20px 0 24px;
}
.sdh-left .sdh-concept{
  font-size:13.5px;
  line-height:1.9;
  color:var(--ink-soft);
  margin-bottom:28px;
  white-space:pre-line;
}
.sdh-left .promo img{
  width:100%; height:auto; display:block;
}

.sdh-rooms-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.sdh-room{
  position:relative;
  aspect-ratio:9/16;
  background:#000;
  overflow:hidden;
}
.sdh-room img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.sdh-room .sdh-num{
  position:absolute; top:12px; left:0; right:0;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-size:13px; letter-spacing:0.1em;
  color:var(--gold-soft);
}
.sdh-room.locked .sdh-lock-text{
  position:absolute; left:0; right:0; bottom:16px;
  text-align:center;
  padding:0 10px;
}
.sdh-room.locked .sdh-lock-text .title{
  font-size:11px; color:var(--white);
  margin-bottom:6px;
  line-height:1.3;
}
.sdh-room.locked .sdh-lock-text .date{
  font-size:9.5px; letter-spacing:0.04em;
  color:var(--gold-soft);
  line-height:1.4;
}
.sdh-room.open{ cursor:pointer; }
.sdh-room .sdh-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center;
}
.sdh-room .sdh-play::before{
  content:"";
  width:0; height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid var(--ink);
  margin-left:4px;
}
.sdh-room-caption{
  margin-top:10px;
}
.sdh-lyrics-toggle{
  display:block;
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold-deep);
  cursor:pointer;
  text-align:center;
  padding:4px 0;
}
.sdh-lyrics-panel{
  display:none;
  font-size:12px;
  line-height:1.8;
  color:var(--ink-soft);
  padding:10px 4px 2px;
  border-top:1px solid var(--hairline);
  margin-top:6px;
  white-space:pre-line;
}
.sdh-lyrics-panel.open{ display:block; }

.sdh-separator{
  margin:64px 0 40px;
  border-top:1px solid var(--hairline);
}

/* ---------- LIGHTBOX de vídeo vertical (Servicio de Habitaciones) ---------- */
.sdh-lightbox{
  position:fixed; inset:0;
  background:rgba(10,10,10,0.94);
  display:none;
  align-items:center; justify-content:center;
  z-index:200;
}
.sdh-lightbox.open{ display:flex; }
.sdh-lightbox .sdh-lightbox-inner{
  position:relative;
  width:min(92vw, calc(92vh * 9 / 16));
  aspect-ratio:9/16;
}
.sdh-lightbox video{
  width:100%; height:100%;
  display:block;
  background:#000;
}
.sdh-lightbox .sdh-lightbox-close{
  position:absolute; top:-42px; right:0;
  background:none; border:0;
  color:var(--white);
  font-size:14px; letter-spacing:0.08em;
  cursor:pointer;
}

@media (min-width: 861px){
  .moda-collage{
    --moda-cols:20;
    width:94vw;
    max-width:1760px;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .moda-item.m-xs{ grid-column:span 2; }
  .moda-item.m-s{  grid-column:span 3; }
  .moda-item.m-m{  grid-column:span 4; }
  .moda-item.m-l{  grid-column:span 6; }
  .moda-item.m-xl{ grid-column:span 8; }

  .talent-wall{
    width:96vw;
    max-width:1920px;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .manos-collage{
    --manos-cols:20;
    width:94vw;
    max-width:1760px;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .manos-item.m-xs{ grid-column:span 2; }
  .manos-item.m-s{  grid-column:span 3; }
  .manos-item.m-m{  grid-column:span 4; }
  .manos-item.m-l{  grid-column:span 6; }
  .manos-item.m-xl{ grid-column:span 8; }
}

@media (max-width: 860px){
  .site-nav{ display:none; }
  .grid{ grid-template-columns:repeat(2, 1fr); }
  .products{ grid-template-columns:repeat(2, 1fr); gap:28px; }
  .free-read-list{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .bio-block{ grid-template-columns:1fr; gap:32px; }
  .flex-gallery{ grid-template-columns:repeat(2, 1fr); }
  .free-read-item{ grid-template-columns:1fr; gap:24px; }
  .scenes-row{ grid-template-columns:repeat(1, 1fr); }
  .agency-block{ grid-template-columns:1fr; gap:20px; }
  .agency-logo{ width:140px; }
  .discography-main{ grid-template-columns:1fr; gap:24px; }
  .catalog-row{ grid-template-columns:repeat(4, 1fr); gap:16px 12px; }
  .portfolio-grid{ grid-template-columns:repeat(2, 1fr); }
  .photo-row{ grid-template-columns:repeat(2, 1fr); }
  .actor-collage{ column-count:3; }
  .vida-collage{ column-count:3; column-gap:12px; }
  .sdh-block{ grid-template-columns:1fr; gap:32px; }
  .sdh-rooms-grid{ grid-template-columns:repeat(2, 1fr); }
  .modelo-hub{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "center center"
      "moda   talent"
      "manos  vida";
    gap:32px 24px;
  }
  .moda-collage{
    --moda-cols:14;
    width:94vw;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .moda-item.m-xs{ grid-column:span 2; }
  .moda-item.m-s{  grid-column:span 3; }
  .moda-item.m-m{  grid-column:span 4; }
  .moda-item.m-l{  grid-column:span 6; }
  .moda-item.m-xl{ grid-column:span 8; }

  .talent-wall{
    width:94vw;
    margin-left:50%;
    transform:translateX(-50%);
  }

  .manos-collage{
    --manos-cols:14;
    width:94vw;
    margin-left:50%;
    transform:translateX(-50%);
  }
  .manos-item.m-xs{ grid-column:span 2; }
  .manos-item.m-s{  grid-column:span 3; }
  .manos-item.m-m{  grid-column:span 4; }
  .manos-item.m-l{  grid-column:span 6; }
  .manos-item.m-xl{ grid-column:span 8; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns:1fr 1fr; }
  .products{ grid-template-columns:1fr; }
  .flex-gallery{ grid-template-columns:1fr 1fr; }
  .filmstrip .f-item{ width:220px; }
  .actor-collage{ column-count:2; }
  .vida-collage{ column-count:2; column-gap:10px; }
  .modelo-hub{
    grid-template-columns:1fr;
    grid-template-areas:
      "center"
      "moda"
      "talent"
      "manos"
      "vida";
    gap:28px;
  }
  .moda-collage{ --moda-cols:4; --moda-gap:5px; }
  .moda-item.m-xs{ grid-column:span 2; }
  .moda-item.m-s{  grid-column:span 2; }
  .moda-item.m-m{  grid-column:span 2; }
  .moda-item.m-l{  grid-column:span 4; }
  .moda-item.m-xl{ grid-column:span 4; }

  .manos-collage{ --manos-cols:4; --manos-gap:5px; }
  .manos-item.m-xs{ grid-column:span 2; }
  .manos-item.m-s{  grid-column:span 2; }
  .manos-item.m-m{  grid-column:span 2; }
  .manos-item.m-l{  grid-column:span 4; }
  .manos-item.m-xl{ grid-column:span 4; }
}