/* ============================================================
   UNIVERSAL LEARNING — Detalle de solución (Opción 1b) en la
   PÁGINA real. Hace fluido y responsive el layout .sd que en el
   lienzo es de ancho fijo (1280). Solo se carga en Soluciones.html.
   ============================================================ */

/* El detalle ocupa el ancho de su columna (no 1280px fijo) y sin caja */
.sector-detail .sd { width: 100%; }
.soldetail--redesign {
  border: none; box-shadow: none; border-radius: 0; background: transparent; position: relative; overflow: visible;
}

/* Botón cerrar flotante (esquina superior derecha) */
.sd__closebtn {
  position: sticky; top: 108px; z-index: 30;
  display: flex; align-items: center; gap: 9px; width: fit-content;
  margin: 0 18px -44px auto;
  font: 700 15px/1 var(--font-body); letter-spacing: 0.04em; text-transform: none;
  color: var(--ul-navy-deep); background: var(--ul-yellow);
  border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-pill);
  padding: 11px 19px; cursor: pointer; box-shadow: var(--shadow-md);
  transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.sd__closebtn:hover { filter: brightness(1.06); box-shadow: var(--shadow-lg); }
.sd__closebtn svg { width: 16px; height: 16px; }

/* Hero: grid responsive en vez del cluster absoluto del lienzo */
.sector-detail .sd--editorial .sd__hero {
  display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center;
  min-height: 0; padding-top: 84px; padding-bottom: 20px;
}
.sector-detail .sd--editorial .sd__ghost { font-size: 220px; top: 4px; left: 60px; }
.sector-detail .sd--editorial .sd__hero-copy { width: auto; padding-top: 0; position: relative; z-index: 2; }
.sector-detail .sd__lead {
  max-width: 90ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* Cluster de 3 imágenes como collage asimétrico que escala */
.sector-detail .sd--editorial .sd__cluster {
  position: relative; top: auto; right: auto; width: 100%; height: auto;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px;
  aspect-ratio: 1 / 0.94;
}
.sector-detail .sd--editorial .sd__cluster .sd__imgcard {
  position: relative; inset: auto; top: auto; right: auto; width: auto; height: auto;
}
.sector-detail .sd--editorial .sd__c1 { grid-column: 2; grid-row: 1 / span 2; }
.sector-detail .sd--editorial .sd__c2 { grid-column: 1; grid-row: 2; }
.sector-detail .sd--editorial .sd__c3 { grid-column: 1; grid-row: 1; }
.sector-detail .sd--editorial .sd__cluster image-slot { width: 100%; height: 100%; }
.sector-detail .sd--editorial .sd__dot { display: none; }

/* Video band: reusa .soldetail__media (cableado por wireVideo) */
.sector-detail .sd--editorial .sd__videoband { padding: 72px 88px; display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: stretch; }
.sector-detail .sd__videoband .soldetail__media {
  flex: 1 1 380px; min-width: 0; max-width: 920px; width: auto; margin: 0; aspect-ratio: 16 / 9;
}
/* El play solo aparece cuando hay video real */
.sector-detail .sd__videoband .soldetail__media .sp-media__play { display: none; }
.sector-detail .sd__videoband .soldetail__media.has-video .sp-media__play { display: flex; }

/* Nota de servicios incluidos (callout) */
.sd__note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 22px;
  padding: 16px 18px; background: var(--ul-bg-tint);
  border: 1px solid rgba(14, 239, 218, 0.4); border-radius: var(--radius-md);
}
.sd__note svg { width: 20px; height: 20px; color: var(--ul-turquoise-dark); flex: 0 0 auto; margin-top: 2px; }
.sd__note p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ul-slate); }
.sd__note strong { color: var(--ul-navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sector-detail .sd--editorial .sd__hero { grid-template-columns: 1fr; gap: 30px; padding-top: 66px; }
  .sector-detail .sd--editorial .sd__ghost { font-size: 150px; left: 24px; top: 2px; }
  .sector-detail .sd--editorial .sd__cluster { aspect-ratio: 16 / 9; }
  .sector-detail .sd--editorial .sd__videoband { padding: 56px 28px; }
  .sector-detail .sd--editorial .sd__resuelve { grid-template-columns: 1fr; gap: 24px; padding: 64px 28px 8px; }
  .sector-detail .sd--editorial .sd__benefits { padding: 56px 28px 72px; }
  .sector-detail .sd--editorial .sd__fan { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sector-detail .sd--editorial .sd__fan .sd__benefit { transform: none !important; }
}
@media (max-width: 600px) {
  .sector-detail .sd--editorial .sd__fan { grid-template-columns: 1fr; }
  .sector-detail .sd--editorial .sd__hero { padding-top: 60px; }
  .sector-detail .sd__final { margin-top: 64px; padding: 48px 24px 56px; }
  .sector-detail .sd__final-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .sector-detail .sd__wrap { padding: 0 24px; }
  .sector-detail .sd__closebtn { top: 84px; margin-right: 12px; }
}