/* Generated split from dual.css + convenios.css
   File: core/base.css
*/

/* Accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .dual-hero__divider {
    transition: none;
  }
}



@media (max-width: 980px) {
  .dual-hero__container {
    grid-template-columns: 1fr;
  }
}



/* ========= SECCIONES (reuso de tu sistema) ========= */
/* .section > .grid-3,
.section > .gallery,
.section > .resources-split {
  max-width: 1100px;
  margin-inline: auto;
}


 */
.section-title {
  position: relative;
}


.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: white;
  margin: 0.2rem auto 0;
  opacity: 0;
}



/* Media cards preparación */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}


.media-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 14px;
  padding: 0.9rem;
  align-items: center;
}


.media-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
}


.media-card h3 {
  color: var(--cecns-burgundy);
  margin: 0.1rem 0 0.35rem;
  font-size: 1.05rem;
}


.media-card p {
  color: #374151;
  margin: 0;
}



/* Galería */
/* .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}


.gallery a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e6ebf1;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
  text-decoration: none !important;
}


.gallery img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}



@media (max-width: 980px) {
  .media-grid {
    grid-template-columns: 1fr;
  }
  .media-card {
    grid-template-columns: 1fr;
  }
  .feature {
    min-height: unset;
  }
  /*   .gallery img {
    height: 170px;
  } */
}



/* Responsivo */
@media (max-width: 980px) {
  .prep-grid {
    grid-template-columns: 1fr 1fr;
  }
}


@media (max-width: 640px) {
  .prep-grid {
    grid-template-columns: 1fr;
  }
  .prep-media {
    gap: 0.5rem;
  }
}



/* Pausa auto-rotación si el usuario pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .dual-carousel__btn,
  .dual-carousel__dots button {
    transition: none;
  }
}



/* fallback cross-browser (si algún navegador no soporta mask) */
@supports not (mask-image: url("")) {
  .dual-hero__points li::before {
    background: var(--cecns-gold)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%230b3a66" d="M9.2 16.2 5.5 12.5 4 14l5.2 5.2L20 8.4 18.5 7z"/></svg>')
      center/66% 66% no-repeat;
    box-shadow: 0 0 0 2px rgba(21, 51, 74, 0.9);
  }
}



/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .galleryDual {
    --cols-min: 220px;
  }
}


@media (max-width: 900px) {
  .galleryDual {
    --cols-min: 200px;
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 640px) {
  .galleryDual {
    height: clamp(320px, 60svh, 520px);
    grid-template-rows: 1fr; /* una sola fila en móvil */
  }
  .galleryDual .tall {
    grid-row: span 1;
  } /* sin piezas “altas” en 1 fila */
  .galleryDual .wide {
    grid-column: span 1;
  } /* quepan mejor en móvil */
}


.lb.is-open {
  opacity: 1;
  pointer-events: auto;
}



/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .lb {
    transition: none;
  }
}



/* Evita scroll de fondo cuando está abierto */
body.lb-open {
  overflow: hidden;
}



/* ---------- 2) BASE / UTILIDADES ---------- */
.section {
  padding: var(--section-pad) 0;
}


.section > .grid-3,
.section > .gallery,
.section > .resources-split {
  max-width: var(--container-w);
  margin-inline: auto;
}



.section-title {
  color: var(--cecns-navy);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin: 0 0 0.75rem;
}



.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--card-pad);
  box-shadow: var(--shadow-1);
  max-width: var(--container-w);
  margin-inline: auto;
}


.card--accent {
  border: 2px solid rgba(45, 140, 60, 0.45);
  box-shadow: var(--shadow-2);
}



.bullets {
  margin: 0.5rem 0 0 1rem;
}


.bullets li {
  margin: 0.25rem 0;
}



/* divisores animados */
.title-divider,
.title-divider-hero {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--cecns-gold);
  margin: 0.4rem calc(var(--card-pad) * -1) 2rem;
  transform: scaleX(0.25);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}


.title-divider {
  transform-origin: center;
  margin-top: -1rem;
}


.title-divider-hero {
  transform-origin: left;
  margin-top: 1rem;
}



/* activar animación al enfocar/interactuar la sección contenedora */
.section:hover .title-divider,
.section:focus-within .title-divider,
.section:hover .title-divider-hero,
.section:focus-within .title-divider-hero {
  transform: scaleX(1);
}



@media (prefers-reduced-motion: reduce) {
  .title-divider,
  .title-divider-hero {
    transition: none;
    transform: scaleX(1);
  }
}



/* botones genéricos */
.btn-pill,
.btn-link,
.btn-solid,
.btn-outline {
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
}


.btn-pill {
  margin-top: 0.75rem;
  padding: 0.55rem 1rem;
  border: 2px solid var(--cecns-gold);
  color: var(--cecns-burgundy);
  font-weight: 600;
  text-decoration: none;
}


.btn-pill:hover {
  background: var(--cecns-gold);
  color: #1d1d1d;
}



.btn-link {
  padding: 0.45rem 0.8rem;
  border: 1.8px solid var(--cecns-gold);
  color: var(--cecns-burgundy);
  font-weight: 600;
}


.btn-link:hover {
  background: var(--cecns-gold);
  color: #1d1d1d;
}



.btn-solid {
  background: var(--cecns-gold);
  color: var(--cecns-navy);
  border: 2px solid var(--cecns-navy);
  padding: 0.9rem 1rem;
  text-decoration: none;
}


.btn-solid:hover {
  filter: brightness(1.05);
}



.btn-outline {
  border: 2px solid var(--cecns-gold);
  color: var(--cecns-bg);
  padding: 0.55rem 1rem;
  text-decoration: none;
}


.btn-outline:hover {
  background: var(--cecns-gold);
  color: var(--cecns-navy);
}



/* ---------- 3) LAYOUTS / GRIDS ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}



.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}


.gallery a {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  text-decoration: none !important;
}


.gallery img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}



.resources-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}


.resources-split ul {
  margin: 0;
}


.resources-split a {
  color: var(--cecns-navy);
  text-decoration: underline;
}



/* Media cards (experiencias) */
.media-grid {
  gap: 1rem;
}


.media-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  background: var(--surface);
  align-items: center;
}


.media-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}


.media-card h3 {
  color: var(--cecns-burgundy);
  margin: 0.1rem 0 0.35rem;
  font-size: 1.05rem;
}


.media-card p {
  color: #374151;
  margin: 0 0 0.5rem;
}


.media-card .btn-link {
  align-self: flex-start;
}



/* Experiencias: mini-galería dentro de tarjeta */
.xp-card {
  display: grid;
  gap: 0.9rem;
}


.xp-media {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
  gap: 0.6rem;
  align-items: stretch;
  cursor: pointer;
}


.xp-media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.xp-media img.main {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  height: 100%;
  min-height: 240px;
}


.xp-media img.thumb {
  grid-column: 2 / 3;
  height: 116px;
}


.xp-media img:hover {
  transform: translateY(-1px);
}


.xp-media img:focus {
  outline: 3px solid var(--cecns-gold);
  outline-offset: 2px;
}


.xp-media img[aria-current="true"] {
  box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.45);
}



/* ---------- 5) HEROES ---------- */
/* Hero PASCH “signature” */
.hero--signature {
  background: radial-gradient(
      900px 480px at 20% 20%,
      rgba(255, 195, 0, 0.1),
      transparent 55%
    ),
    linear-gradient(180deg, #0b3a66 0%, #082a48 100%);
  color: #fff;
  padding: 1rem 3.5rem;
}


.hero--signature .hero__container {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 4vw, 36px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px) 0;
  margin-top: -1.9rem;
}


.hero--signature .hero__eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}


.hero--signature .hero__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.06;
  margin: 0.25rem 0 0.55rem;
}


.hero--signature .hero__divider {
  /* mismo estilo que title-divider-hero */
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--cecns-gold);
  margin: 0.4rem calc(var(--card-pad) * -1) 2rem;
  transform-origin: left;
  transform: scaleX(0.25);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-top: 1rem;
}


.hero--signature .hero__lead {
  max-width: 70ch;
  color: #e7eef6;
}


.hero--signature .hero__cta {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.8rem;
}


.hero--signature .hero__creds {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}


.hero--signature .hero__creds img {
  height: 5rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}



/* Media / glass card compartida por heroes */
.glass-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
  border-radius: var(--radius-2xl);
  padding: 0.65rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(230, 235, 241, 0.55);
  box-shadow: var(--shadow-glass);
  block-size: clamp(420px, 64vh, 640px); /* altura flexible */
  grid-auto-rows: 1fr; /* ocupa toda la altura */
}



.hero__figure {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #0c2743;
  block-size: 100%; /* siempre llena la tarjeta */
}


.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* cambia a contain si quieres ver todo */
  object-position: center;
}



.hero__caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(
    180deg,
    rgba(8, 42, 72, 0),
    rgba(8, 42, 72, 0.88)
  );
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: #f6fbff;
}



/* barra de progreso */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
}


.progress__bar {
  height: 100%;
  width: 0;
  background: var(--cecns-gold);
}



/* thumbs */
.thumbs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: center;
  padding: 0.2rem;
  max-block-size: 100%;
  overflow: auto;
  width: 7rem;
}


.thumbs button {
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  flex: 0 0 auto; /* evita encogerse */
}


.thumbs button.is-active {
  border-color: var(--cecns-gold);
  box-shadow: 0 6px 14px rgba(255, 195, 0, 0.25);
}


.thumbs button img {
  display: block;
  width: 84px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}


.thumbs button:hover {
  transform: translateY(-2px);
}


.thumbs button:focus-visible {
  outline: 3px solid var(--cecns-gold);
}



@media (prefers-reduced-motion: reduce) {
  .thumbs button:hover {
    transform: none;
  }
}



/* Blob decorativo */
.hero__blob {
  position: absolute;
  right: -8%;
  top: -10%;
  width: min(44vw, 520px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: radial-gradient(
      closest-side,
      rgba(255, 195, 0, 0.32),
      rgba(255, 195, 0, 0) 65%
    ),
    radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0) 70%
    );
  filter: blur(22px);
  pointer-events: none;
}



/* Hero “elegant” full viewport */
.hero--elegant {
  --hero-pad: clamp(20px, 3vw, 32px);
}


.hero--elegant .hero__container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  min-block-size: 100svh;
  padding-block: var(--hero-pad);
}


.hero--elegant .hero__col--media {
  display: grid;
  align-items: center;
}


.hero--elegant .hero__figure {
  max-block-size: calc(100svh - var(--hero-pad) * 2);
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: radial-gradient(
    120% 120% at 70% 30%,
    rgba(255, 255, 255, 0.04),
    rgba(0, 0, 0, 0.06)
  );
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.18);
}


.hero--elegant .hero__figure img {
  object-fit: contain;
}


.hero--elegant .hero__title {
  margin: 0.25rem 0 0.6rem;
}


.hero--elegant .hero__lead {
  margin: 0;
  max-width: 60ch;
}



/* ---------- 6) RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .hero--signature .hero__container {
    grid-template-columns: 1fr;
  }
  .glass-card {
    grid-template-columns: 1fr;
  }
  .thumbs {
    flex-direction: row;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
    max-block-size: none;
    width: 100%;
  }
  .btn-outline {
    padding-top: 1rem;
    line-height: 2rem;
  }
}



@media (max-width: 980px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .media-card {
    grid-template-columns: 1fr;
  }
  .resources-split {
    grid-template-columns: 1fr;
  }
  .feature {
    min-height: unset;
  }
  .gallery img {
    height: 170px;
  }
}



@media (max-width: 900px) {
  .hero--elegant .hero__container {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .hero--elegant .hero__col--media,
  .hero--elegant .hero__figure {
    width: 100%;
    max-block-size: calc(100svh - var(--hero-pad) * 2);
  }
}



@media (max-width: 820px) {
  .xp-media img.main {
    min-height: 200px;
  }
  .xp-media img.thumb {
    height: 100px;
  }
}



@media (max-width: 560px) {
  .xp-media {
    grid-template-columns: 1fr 100px;
    gap: 0.5rem;
  }
  .xp-media img.main {
    min-height: 180px;
  }
  .xp-media img.thumb {
    height: 90px;
  }
  .thumbs button img {
    width: 86px;
    height: 66px;
  }
}



/* ---------- 7) STATES / HOVERS COLECTIVOS ---------- */
.hero:hover .title-divider,
.hero:focus-within .title-divider {
  transform: scaleX(1);
}



/* ===== FIX: Espacio excesivo entre imagen principal y miniaturas ===== */

/* 1) En escritorio: que la columna de thumbs no “flote” al centro */
.glass-card .thumbs {
  align-self: start; /* antes: center */
}



/* 2) No fuerzas filas a ocupar toda la altura */
.glass-card {
  grid-auto-rows: auto; /* antes: 1fr (provocaba estiramiento) */
}



/* 3) En móvil, la tarjeta no debe tener altura fija: crece según contenido */
@media (max-width: 1080px) {
  .glass-card {
    block-size: auto; /* elimina el alto forzado */
    row-gap: 0.5rem; /* separa justo lo necesario */
    padding: 0.55rem;
  }
  .hero__figure {
    block-size: auto; /* deja que la figura tome la altura de su imagen */
  }
  .thumbs {
    margin-top: 0.4rem; /* acerca las miniaturas a la imagen */
  }
}



/* opcional, más compacto en desktop */
.glass-card {
  block-size: clamp(350px, 10vh, 520px);
}



/* ========== PDF Lightbox ========== */
.pdf-modal[hidden] {
  display: none;
}


.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
}


.pdf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 30, 0.7);
  backdrop-filter: blur(2px);
}


.pdf-dialog {
  position: relative;
  z-index: 1;
  width: min(1100px, 96vw);
  height: min(90svh, 900px);
  background: #0b1726;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(230, 235, 241, 0.35);
}


.pdf-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
}


.pdf-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.9;
}


.pdf-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}


.pdf-body {
  flex: 1 1 auto;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}


#pdfFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
}


.pdf-fallback {
  color: #cbd5e1;
  padding: 1rem;
  text-align: center;
}



/* Botón que dispara (opcional): apariencia link */
a.btn-link[data-pdf] {
  cursor: pointer;
}



/* Scroll del <body> bloqueado cuando el modal está abierto */
body.pdf-open {
  overflow: hidden;
}



/* Evita que aparezcan controles del usuario del navegador al seleccionar/arrastrar */
.pdf-dialog,
.pdf-body {
  user-select: none;
}



/* Asegura que nada “se salga” durante el intercambio */
.xp-media {
  overflow: hidden;
}



/* Galleria flotante para Experiencias  */

/* Lightbox base */
.xp-lightbox[hidden] {
  display: none;
}


.xp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}


.xp-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 20, 0.7);
  backdrop-filter: blur(2px);
}



/* contenedor */
.xp-lb__dialog {
  position: relative;
  width: min(1080px, 94vw);
  color: #fff;
}


.xp-lb__head {
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
}


.xp-lb__count {
  margin-right: auto;
  opacity: 0.9;
}


.xp-lb__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
}



/* escenario */
.xp-lb__stage {
  position: relative;
  padding: 0.5rem;
  display: grid;
  place-items: center;
  max-height: 86vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}


.xp-lb__stage img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
}



/* navegación */
.xp-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
}


.xp-lb__nav.prev {
  left: -56px;
}


.xp-lb__nav.next {
  right: -56px;
}


.xp-lb__nav:hover {
  background: rgba(0, 0, 0, 0.6);
}



@media (max-width: 720px) {
  .xp-lb__nav.prev {
    left: 8px;
  }
  .xp-lb__nav.next {
    right: 8px;
  }
}



/* Por si hay micro-reflujos, recorta dentro del marco */
.xp-media {
  overflow: hidden;
}



@media (max-width: 640px) {
  .gal-quilt {
    --min: 46vw;
    grid-auto-rows: 120px;
  }
  .gal-quilt .tile.wide {
    grid-column: span 1;
  } /* simplifica en móvil */
  .gal-quilt .tile.tall {
    grid-row: span 1;
  }
}



.xp-lb__stage {
  position: relative; /* ya lo tienes */
}



.xp-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}


.xp-lb__nav.prev {
  left: 8px;
}

 /* <-- antes -56px */
.xp-lb__nav.next {
  right: 8px;
}

 /* <-- antes -56px */
.xp-lb__nav:hover {
  background: rgba(0, 0, 0, 0.6);
}



/* ====== 0) GUTTERS UNIVERSALES ====== */
.section {
  padding-inline: clamp(12px, 4vw, 28px);
}



/* ====== 1) HERO – padding fluido + tipografía segura ====== */
.hero--signature {
  padding: clamp(12px, 2.5vw, 24px) clamp(16px, 5vw, 56px);
}


.hero--signature .hero__title {
  font-size: clamp(1.6rem, 4.6vw, 3.25rem);
  line-height: 1.1;
}


.hero--signature .hero__lead {
  font-size: clamp(0.98rem, 2.3vw, 1.06rem);
}



/* Mejora el flujo de thumbs en pantallas medianas */
@media (max-width: 1200px) {
  .glass-card {
    grid-template-columns: 1fr;
    row-gap: 0.65rem;
  }
  .thumbs {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
  }
}



/* Móvil pequeño: evita “saltos” de altura */
@media (max-width: 420px) {
  .hero--signature .hero__creds img {
    height: 3.75rem;
  }
  .hero__figure {
    border-radius: var(--radius-lg);
  }
}



/* ====== 2) GRID – puntos intermedios (2 col en tablets) ====== */
@media (max-width: 1280px) and (min-width: 981px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* ====== 3) MEDIA CARDS – mejor escala en móviles ====== */
@media (max-width: 980px) {
  .media-card {
    grid-template-columns: 1fr;
  }
  .media-card img {
    height: clamp(160px, 40vw, 220px);
  }
}


@media (max-width: 420px) {
  .media-card {
    padding: 0.75rem;
  }
  .media-card h3 {
    font-size: 1rem;
  }
}



/* ====== 4) MINI-GALERÍA EN TARJETA (xp-media) ====== */
@media (max-width: 820px) {
  .xp-media img.main {
    min-height: clamp(180px, 36vw, 260px);
  }
  .xp-media img.thumb {
    height: clamp(86px, 18vw, 120px);
  }
}


@media (max-width: 560px) {
  .xp-media {
    grid-template-columns: 1fr 96px;
    gap: 0.5rem;
  }
  .xp-media img.main {
    min-height: 180px;
  }
  .xp-media img.thumb {
    height: 90px;
  }
}


@media (max-width: 1100px) {
  .gal-quilt {
    --min: 200px;
    grid-auto-rows: 150px;
  }
}


@media (max-width: 900px) {
  .gal-quilt {
    --min: 180px;
    grid-auto-rows: 140px;
  }
}


@media (max-width: 640px) {
  .gal-quilt {
    --min: 46vw;
    grid-auto-rows: 38vw; /* más “cuadrado” en móvil */
  }
  .gal-quilt .tile.wide {
    grid-column: span 1;
  }
  .gal-quilt .tile.tall {
    grid-row: span 1;
  }
}



/* Lei de Fitts: ampliar el área táctil del caption en mobile */
@media (hover: none) and (pointer: coarse) {
  .gal-quilt .tile::after {
    opacity: 1;
  }
  .gal-quilt .cap {
    opacity: 1;
    transform: none;
  }
}



/* ====== 7) LIGHTBOX – viewport dinámico + safe areas ====== */
.xp-lb__dialog {
  width: min(
    1080px,
    calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px)
  );
  margin-left: env(safe-area-inset-left);
  margin-right: env(safe-area-inset-right);
}


.xp-lb__stage {
  max-height: 86vh;
}


@supports (height: 100dvh) {
  .xp-lb__stage {
    max-height: 86dvh;
  }
}


.xp-lb__head {
  top: max(-44px, calc(env(safe-area-inset-top) * -1 + -44px));
  padding-right: max(0.6rem, env(safe-area-inset-right));
}


.xp-lb__close {
  touch-action: manipulation;
}



/* Nav siempre dentro en pantallas angostas */
.xp-lb__nav.prev {
  left: 8px;
}


.xp-lb__nav.next {
  right: 8px;
}



/* ====== 8) PDF MODAL – viewport dinámico y safe areas ====== */
.pdf-dialog {
  width: min(1100px, calc(100vw - 2rem));
  height: min(90vh, 900px);
}


@supports (height: 100dvh) {
  .pdf-dialog {
    height: min(90dvh, 900px);
  }
}


.pdf-head {
  padding-right: max(0.75rem, env(safe-area-inset-right));
}



/* ====== 9) MICRO-AJUSTES DE TIPOGRAFÍA / ESPACIADOS ====== */
.card {
  padding: clamp(0.9rem, 2.2vw, var(--card-pad));
}


.section-title {
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
}



/* ====== 10) ACCESIBILIDAD TÁCTIL ====== */
@media (hover: none) and (pointer: coarse) {
  .btn-link,
  .btn-solid,
  .btn-outline,
  .xp-lb__nav,
  .pdf-close {
    min-height: 44px;
    min-width: 44px;
  }
}



/* Evita scroll horizontal accidental */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}



/* Corta cualquier “sangrado” interno como los dividers */
.card,
.hero--signature .hero__col--text {
  overflow-x: clip;
}

 /* (o hidden) */

/* El divisor a ancho completo sin márgenes negativos */
.title-divider,
.title-divider-hero {
  margin-inline: 0; /* sin márgenes negativos */
  width: 100%;
}



/* Si quieres conservar el efecto “full-bleed” dentro de la card: */
.card .title-divider,
.card .title-divider-hero {
  width: calc(100% + var(--card-pad) * 2);
  margin-left: calc(var(--card-pad) * -1);
  margin-right: calc(var(--card-pad) * -1);
  /* al tener overflow-x: clip en .card, no saldrá del viewport */
}



/* ===== Galería: 2 columnas en móvil ===== */
@media (max-width: 640px) {
  .gal-quilt {
    /* dos columnas iguales */
    grid-template-columns: repeat(2, 1fr);
    /* alto de cada fila -> 3:2 aprox; cambia a 1fr si prefieres libre */
    grid-auto-rows: 38vw; /* ~relación 3:2 en la mayoría de pantallas */
    gap: 0.6rem; /* separador un poco menor en móvil */
  }

  /* anula los spans para que TODO ocupe 1x1 bloque */
  .gal-quilt .tile.wide {
    grid-column: span 1;
  }
  .gal-quilt .tile.tall {
    grid-row: span 1;
  }

  /* asegura que la imagen se recorte correctamente al alto de la celda */
  .gal-quilt .tile,
  .gal-quilt img {
    height: 100%;
  }
}



/* Si prefieres miniaturas cuadradas en móviles muy pequeños: */
@media (max-width: 420px) {
  .gal-quilt {
    grid-auto-rows: 45vw;
  } /* casi 1:1 */
}



/* 17 */

/* ====== Interactive Hub (ihub) ====== */
.ihub__tabs {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}


.ihub__tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-alt);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-lg);
  font-weight: 700;
  color: var(--cecns-navy);
  cursor: pointer;
}


.ihub__tab:is(:hover, :focus-visible) {
  outline: 3px solid transparent;
  border-color: var(--cecns-gold);
  box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.25);
}


.ihub__tab.is-active {
  background: var(--cecns-gold);
  color: var(--cecns-ink);
  border-color: var(--cecns-gold);
}



.ihub__panel {
  display: none;
}


.ihub__panel.is-active {
  display: block;
}



.ihub__filter {
  display: flex;
  justify-content: flex-end;
  margin: 0.25rem 0 0.75rem;
}


.ihub__filter-input {
  inline-size: min(360px, 100%);
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--surface-alt);
}


.ihub__filter-input:focus {
  outline: 3px solid var(--cecns-gold);
  outline-offset: 2px;
}



.ihub__card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}


.ihub__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}



.ihub__more {
  cursor: pointer;
  font-weight: 700;
  color: var(--cecns-navy);
}


.ihub__more:hover {
  text-decoration: underline;
}



.ihub__cta {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}



.ihub__faq {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.8rem;
  margin: 0.5rem 0;
  background: var(--surface);
}


.ihub__faq > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cecns-navy);
}


.ihub__dl {
  margin-top: 0.6rem;
}



/* Responsive */
@media (max-width: 640px) {
  .ihub__tabs {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}