/* Directorio */
.dir-single{ max-width:1100px; margin:2rem auto; padding:0 1rem; color:var(--re-txt); }
.dir-hero{ display:grid; grid-template-columns:1fr; gap:1rem; }
.dir-gallery{ display:grid; grid-template-columns:80px 1fr; gap:.75rem; }
.dir-thumbs{ display:flex; flex-direction:column; gap:.5rem; }
.dir-thumb{ padding:0; border:1px solid var(--re-border); border-radius:.5rem; overflow:hidden; background:#fff; cursor:pointer; }
.dir-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dir-thumb.is-active{ outline:2px solid var(--re-pri); }
.dir-thumb--video{ display:grid; place-items:center; height:80px; background:#111827; color:#fff; }
.dir-stage{ margin:0; border:1px solid var(--re-border); border-radius:.5rem; overflow:hidden; background:#f3f4f6; }
.dir-stage__img{ width:100%; height:auto; display:block; }
.dir-info{ border:1px solid var(--re-border); border-radius:.5rem; background:#fff; padding:1rem; }
.dir-title{ margin:.25rem 0 .5rem; font-size:1.6rem; }
.dir-rating{ display:flex; align-items:center; gap:.35rem; }
.star{ color:#d1d5db; }
.star.full{ color:#f59e0b; }
.star.half{ color:#f59e0b; position:relative; }
.star.half::after{ content:'☆'; position:absolute; left:0; color:#d1d5db; clip-path: inset(0 50% 0 0); }
.dir-excerpt p{ margin:.5rem 0; }
.dir-map-wrap{ margin:1rem 0 1.25rem; }
.dir-map{ height:360px; width:100%; border:1px solid var(--re-border); border-radius:.5rem; overflow:hidden; }
.dir-map-actions{ margin-top:.5rem; }
.dir-map-actions .btn{ padding:.55rem .85rem; border-radius:.6rem; border:1px solid var(--re-border); background:#fff; }
.dir-related h2{ margin:1rem 0 .75rem; }
.dir-grid{ display:grid; gap:.75rem; grid-template-columns: repeat(1, minmax(0,1fr)); }
.dir-card{ background:#fff; border:1px solid var(--re-border); border-radius:.7rem; overflow:hidden; display:flex; flex-direction:column; }
.dir-card__media img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.dir-card__body{ padding:.8rem; display:flex; flex-direction:column; gap:.35rem; }
.dir-card__title{ font-size:1.05rem; margin:0; }
.dir-card__foot{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem; color:var(--re-muted); }
@media (max-width:640px){
  .dir-gallery{ grid-template-columns:1fr; }
  .dir-thumbs{ flex-direction:row; overflow:auto; scrollbar-width:none; }
  .dir-thumbs::-webkit-scrollbar{ display:none; }
  .dir-thumb, .dir-thumb--video{ width:80px; height:80px; }
}
@media (min-width:980px){
  .dir-hero{ grid-template-columns:1fr 1fr; align-items:start; }
  .dir-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* === Enfatizar imagen central vs. info (desktop) === */
@media (min-width: 980px){
  /* La imagen ocupa más ancho que la info */
  .dir-hero{
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 1rem;
  }

  /* Galería: miniaturas + stage ocupan toda la altura disponible */
  .dir-gallery{ align-items: stretch; }

  /* Stage más alto y protagonista */
  .dir-stage{
    /* altura adaptable: sube en pantallas grandes, pero con límite */
    height: clamp(460px, 62vh, 800px);
  }
  .dir-stage__img{
    width: 100%;
    height: 100%;
    object-fit: cover;   /* recorta para llenar sin deformar */
    display: block;
  }
  .dir-stage__video iframe{
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Panel de información más compacto */
  .dir-info{
    padding: .85rem 1rem;
    font-size: .95rem;
  }
  .dir-title{ font-size: 1.35rem; }
  .dir-excerpt p{ font-size: .95rem; line-height: 1.5; }
  .dir-block p{ font-size: .9rem; }
}

/* Aún más prioridad a la imagen en pantallas muy grandes */
@media (min-width: 1280px){
  .dir-hero{
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  }
  .dir-stage{
    height: clamp(520px, 66vh, 900px);
  }
}
/* ====== Layout 60/40 y stage a pantalla ====== */
@media (min-width: 980px){
  /* 60% galería (izq) / 40% info (der) */
  .dir-hero{
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 1rem;
  }

  /* Stage grande y alto adaptable */
  .dir-stage{
    position: relative;               /* para superponer imagen / video */
    height: clamp(480px, 62vh, 880px);/* más alto, pero con límites */
    overflow: hidden;
  }

  /* La imagen y el video ocupan 100% del stage */
  .dir-stage__img,
  .dir-stage__video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .dir-stage__img{
    object-fit: cover;   /* recorta sin deformar */
    display: block;
  }

  /* El embed de YouTube se estira al alto del stage */
  .dir-stage__video iframe{
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
  }

  /* Asegura ocultamiento cuando JS pone hidden */
  .dir-stage__video[hidden]{ display: none !important; }

  /* Panel de info un poco más compacto para no competir con la imagen */
  .dir-info{ padding: .9rem 1rem; font-size: .95rem; }
  .dir-title{ font-size: 1.35rem; margin-top: .2rem; }
}
/* --- Stage: que la imagen nunca se salga y llene el contenedor --- */
.dir-stage{
  position: relative;
  overflow: clip;              /* recorta lo que sobresalga */
  border-radius: 12px;         /* el borde redondo también recorta */
}
@supports not (overflow: clip){
  .dir-stage{ overflow: hidden; }
}

/* La imagen ocupa 100% del stage y mantiene proporción */
.dir-stage__img,
.dir-stage img{                /* fallback si no trae la clase */
  position: absolute;
  inset: 0;                    /* top/right/bottom/left = 0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;           /* rellena sin deformar, puede recortar */
  object-position: center;
  display: block;
  max-width: none;             /* ignora tamaños naturales */
  border-radius: inherit;      /* respeta el borde del stage */
}

/* El video también se ajusta exactamente al stage */
.dir-stage__video,
.dir-stage__video iframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.dir-stage__video[hidden]{ display: none !important; }

/* En móvil: stage arriba y miniaturas abajo (scroll horizontal) */
@media (max-width: 640px){
  .dir-gallery{ display:flex; flex-direction:column; gap:.75rem; }
  .dir-stage{ order: -1; }         /* primero el stage */
  .dir-thumbs{ order: 0; display:flex; overflow:auto; gap:.5rem; }
  .dir-thumbs::-webkit-scrollbar{ display:none; }
  .dir-thumb, .dir-thumb--video{ width:90px; height:90px; flex:0 0 auto; }
  .dir-stage__img{ display:block; width:100%; height:auto; }
}