/* ===== CPD Sales (scoped) ===== */
:root{
  /* Paleta CPD 2026 */
  --cpd26-primary: #3b2682;
  --cpd26-primary-dark: #241650;
  --cpd26-secondary: #c22388;
  --cpd26-secondary-light: #e35bab;

  /* Tipografía CPD 2026 */
  --cpd26-font-title: 'Bricolage Grotesque', sans-serif;    /* ExtraBold 800 — títulos */
  --cpd26-font-subtitle: 'Bricolage Grotesque', sans-serif; /* Medium 500 — subtítulos y bajadas */
  --cpd26-font-text: 'Roboto', sans-serif;                  /* Regular 400 — textos */

  --cpd26-maxw:1180px;
}

.cpd26-sales-hero{
  position: relative;
  padding: clamp(84px, 10vw, 128px) 0;
  color:#fff;
  isolation:isolate;
  font-family: var(--cpd26-font-text);
}
.cpd26-hero-container{ max-width: var(--cpd26-maxw); }

/* FONDO + OVERLAY — con fallback si los PNG no cargan */
.cpd26-hero-bg{
  position:absolute; inset:0;
  /* capa 1: imagen; capa 2 (fallback): gradiente */
  background:
    url('../images/hero/CPD-FondoHero.png') center/cover no-repeat;
  z-index:-2;
}
.cpd26-hero-overlay{
  position:absolute; inset:0;
  /* capa 1: overlay con flechas; capa 2 (fallback): gradiente violeta-cyan */
  background:
    url('../images/hero/CPD-FondoHero-Overlay.png') center/cover no-repeat;
  mix-blend-mode: screen; opacity:.95; z-index:-1;
}

.cpd26-brand{ margin-bottom: 16px; }
.cpd26-brand-logo{ height: 40px; width:auto; }
.cpd26-brand-kicker{ letter-spacing:.12em; text-transform:uppercase; font-weight:600; opacity:.9; }

.cpd26-hero-date{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
  color:#fff;
  font-family: var(--cpd26-font-subtitle);
  font-weight:500;
  font-size:14px;
  letter-spacing:.03em;
  margin-bottom:16px;
}
.cpd26-hero-date-icon{ color: var(--cpd26-secondary); flex:0 0 auto; }

.cpd26-hero-title{
  font-family: var(--cpd26-font-title);
  font-weight:800;
  font-size:clamp(36px, 6.2vw, 64px);
  line-height:1.1;
  margin: 6px 0 16px;
  color: white ;
}
.cpd26-hero-title .cpd26-gradient{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpd26-hero-lead{
  font-family: var(--cpd26-font-subtitle);
  font-weight:500; color:#e9f1ff;
  max-width:60ch; font-size:clamp(16px, 2.2vw, 20px);
  margin-bottom:40px;
  margin-top: 20;
  line-height: 1.6em;
}

.cpd26-btn-primary{
  font-family: var(--cpd26-font-title);
  background: linear-gradient(90deg, var(--cpd26-primary) 0%, var(--cpd26-secondary) 100%);
  border:none; color:#fff; font-weight:800; padding:12px 28px; border-radius:999px;
}
.cpd26-btn-primary:hover{
  background: linear-gradient(90deg, var(--cpd26-secondary) 0%, var(--cpd26-primary) 100%);
  color: white;
}

.cpd26-btn-secondary{
  font-family: var(--cpd26-font-subtitle);
  border:1.5px solid rgba(255,255,255,.7); background:#fff; color: var(--cpd26-primary); padding:12px 28px; border-radius:999px;
  backdrop-filter: blur(2px); font-weight:500;
}
.cpd26-btn-secondary:hover{ background: var(--cpd26-primary); color:#fff; border-color: var(--cpd26-primary); }

.cpd26-hero-frame{
  position:relative;
  /* border-radius:24px; padding:10px;
  background: linear-gradient(180deg, rgba(116,247,238,.35), rgba(111,98,255,.35));
  box-shadow: 0 20px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.2); */
  width:min(520px, 92%);
}
.cpd26-hero-photo{ display:block; width:100%; height:auto; border-radius:18px; }
.cpd26-frame-glow{
  position:absolute; inset:-12px; border-radius:30px; pointer-events:none;
  box-shadow: 0 0 80px rgba(59,38,130,.28), 0 0 120px rgba(194,35,136,.22);
}

@media (max-width: 575px){
  .cpd26-brand-logo{ height:32px; }
  .cpd26-hero-frame{ margin-top:12px; }
}

/* ===== Secciones nuevas ===== */
.cpd26-maxw{ max-width:var(--cpd26-maxw); }
.section-pad{ padding: clamp(60px, 8vw, 110px) 0; }

.cpd26-h2{
  font-weight:800; font-family: var(--cpd26-font-title);
  font-size: clamp(35px, 4.4vw, 45px);
  margin-bottom:30px;
}
.cpd26-lead, .cpd26-text{
  font-weight:400; font-family: var(--cpd26-font-text);
  font-size: clamp(16px, 2.2vw, 18px);
  color:#1d2b3a;
}
@media (max-width: 575px){
  .cpd26-text{
    text-align: left !important;
  }
}

.cpd26-text-light{ font-family: var(--cpd26-font-text); color:#e9f1ff; font-size:clamp(16px, 2.2vw, 18px); }

/* ¿Qué es? */
.cpd26-quees{ background:#fff; }
.cpd26-quees .cpd26-gradient{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpd26-list{ list-style:none; padding:0; margin:18px 0 0; font-family: var(--cpd26-font-text); }
.cpd26-list li{ padding-left:28px; position:relative; margin:.6rem 0; }
.cpd26-list li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:50%;
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
}
.cpd26-quees-media img{ object-fit:cover; aspect-ratio:16/9; }

/* Estilo especial para la lista de "Qué es el CPD" */
.cpd26-quees .cpd26-list li{
  background: linear-gradient(135deg, rgba(59, 38, 130, 0.55), rgba(194, 35, 136, 0.35));
  border-radius: 16px 0 16px 0; /* superior-izq. e inferior-der. redondeados; el resto en ángulo recto */
  padding: 1rem 1.25rem;
  margin-bottom: 12px;
  list-style: none;
  color: #fff; /* asegura contraste */
  position: relative;
}

/* opcional: eliminar bullet por defecto */
.cpd26-quees .cpd26-list{
  padding: 0;
}


/* Fotos */
.cpd26-fotos{ background:#f7f8ff; }
.cpd26-fotos .cpd26-carousel img{ width:100%; height:340px; object-fit:cover; border-radius:16px; }
@media (max-width:991px){ .cpd26-fotos .cpd26-carousel img{ height:260px; } }
.slick-slide{ padding:0 10px; }

/* Sponsors */
.cpd26-sponsors{ background:#fff; }
.cpd26-sponsors-title{ color:#d24658; }
.cpd26-grid-cards{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.cpd26-card{ border:1px solid rgba(0,0,0,.08); border-radius:16px 0 16px 0; padding:16px; background:#fff; }
.cpd26-card h5{ margin:0 0 6px; font-weight:700; font-family: var(--cpd26-font-title); }
@media (max-width:991px){ .cpd26-grid-cards{ grid-template-columns:1fr; } }

/* CTA final */
.cpd26-cta-organizar{
  background: radial-gradient(80% 70% at 50% 20%, rgba(194,35,136,.18), transparent 60%), var(--cpd26-primary-dark);
  color:#fff;
}

/* ======= NAVBAR CPD ======= */
.cpd26-navbar{
  /* background: linear-gradient(180deg, rgba(10,12,40,.85), rgba(10,12,40,.35));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08); */
  z-index: 1030;
  top: 35px;
}
.cpd26-nav-logo{ height: 60px; width:auto; }
@media (max-width:575px){ .cpd26-nav-logo{ height: 40px; } }

.cpd26-nav-links .nav-link{
  font-family: var(--cpd26-font-subtitle);
  color:#fff; opacity:.9; padding:.6rem 1rem; font-weight:500;
}
.cpd26-nav-links .nav-link:hover,
.cpd26-nav-links .nav-link.active{ color: var(--cpd26-secondary); opacity:1; }

/* Asegurar espacio del Hero con navbar fixed */
.cpd26-sales-hero{ padding-top: calc(84px + 68px); } /* 68px ≈ alto del nav */

/* ======= HERO tweaks ======= */
/* H1 blanco, excepto el span con gradiente */
.cpd26-hero-title{ color:#fff; }
.cpd26-hero-title .cpd26-gradient{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Lead con interlineado más ajustado */
.cpd26-hero-lead{ line-height: 1.6; }





/* ======= EJES temáticos ======= */
.cpd26-ejes{ background:#fff; }

.cpd26-ejes-blue{
  position: relative;
  /* color: #eef5ff; */
  /* Fondo: imagen + degradado fallback */
  background:
    url('../images/CPD-web/CPD-Ejes-Fondo.png') center/cover no-repeat;

}

/* Icono de flechas en Ejes temáticos */
.cpd26-ejes-icon{
  text-align:center;
  margin-bottom: 18px;
   margin-top: -150px;
}
.cpd26-ejes-icon img{
  width:200px; height:auto;
  display:inline-block;
}


.cpd26-ejes .cpd26-gradient{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.cpd26-chip-grid{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.cpd26-chip{
  font-family: var(--cpd26-font-subtitle);
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, var(--cpd26-primary), var(--cpd26-secondary)) border-box;
  border-radius: 999px; /* Example border-radius */
  border: 2px solid transparent; /* Essential for showing the background gradient as a border */
  padding:10px 14px;
  font-weight:500;
  text-align: center;
}

.cpd26-chip:hover{
  color:#fff;
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  transition: transform 0.3s ease;
  transform: translateY(-5px);
}

.cpd26-chip-2{
  font-family: var(--cpd26-font-subtitle);
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, var(--cpd26-secondary), var(--cpd26-primary)) border-box;
  border-radius: 999px; /* Example border-radius */
  border: 2px solid transparent; /* Essential for showing the background gradient as a border */
  padding:10px 14px;
  font-weight:500;
  text-align: center;
}

.cpd26-chip-2:hover{
  color:#fff;
  background: linear-gradient(90deg, var(--cpd26-secondary), var(--cpd26-primary));
  transition: transform 0.3s ease;
  transform: translateY(-5px);
}

/* .cpd26-fotos .cpd26-gradient{
  background: linear-gradient(90deg, #ff009d, #ff6200);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
} */

/* ======= Accesibilidad / foco ======= */
.cpd26-nav-links .nav-link:focus,
.cpd26-btn-primary:focus,
.cpd26-btn-secondary:focus,
.cpd26-chip:focus{ outline:2px solid var(--cpd26-secondary); outline-offset:2px; }


/* ===== NAVBAR behavior (override global style.css) ===== */
.cpd26-navbar{
  position: fixed;
  top: 35px !important;            /* separación superior al cargar */
  left: 0; right: 0;
  background: transparent !important;   /* fondo oculto al cargar */
  backdrop-filter: none !important;     /* sin blur al cargar */
  border-bottom: transparent !important;
  box-shadow: none !important;
  transition: top .25s ease, background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  z-index: 1030;
}
.cpd26-navbar.scrolled{
  top: 0px !important;                 /* reduce separación al scrollear */
  background: rgba(36,22,80,.92) !important;  /* fondo visible */
  backdrop-filter: blur(6px) !important;       /* blur activo */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.cpd26-nav-logo{ height: 60px !important; width:auto; transition: height .25s ease; }
.cpd26-navbar.scrolled .cpd26-nav-logo{ height: 46px !important; }

/* Logo más grande al cargar (antes de scrollear), solo en escritorio */
@media (min-width: 992px){
  .cpd26-navbar:not(.scrolled) .cpd26-nav-logo{ height: 84px !important; }
}

/* Links: forzar por encima de style.css */
.cpd26-navbar .nav-link{
  font-family: var(--cpd26-font-title) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:800 !important;              /* bien bold, siempre */
  position: relative;
  letter-spacing:.03em;
  text-transform:none;
  padding:.6rem 1rem;
  transition: color .25s ease;
}

.cpd26-navbar .nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:2px;
  background:#fff;
  transition:width .25s ease;
}

.cpd26-navbar .nav-link:hover,
.cpd26-navbar .nav-link.active{
  color:#fff !important;
}

.cpd26-navbar .nav-link:hover::after,
.cpd26-navbar .nav-link.active::after{
  width:100%;
}



/* === Animaciones de entrada (sutiles) === */
.cpd26-anim{ opacity:0; transform: translateY(12px); will-change: opacity, transform; }
.cpd26-anim.is-in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }
.cpd26-anim-0.is-in{ transition-delay: 0s; }   /* Fecha */
.cpd26-anim-1.is-in{ transition-delay: .05s; } /* H1 */
.cpd26-anim-2.is-in{ transition-delay: .18s; } /* lead */
.cpd26-anim-3.is-in{ transition-delay: .28s; } /* botones */
.cpd26-anim-4.is-in{ transition-delay: .20s; } /* marco de foto */

/* Respeto de accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cpd26-anim, .cpd26-anim.is-in{ transition: none !important; transform: none !important; }
}

/* ---- FIX slideshow hero: dar altura al contenedor ---- */
.cpd26-hero-slideshow{
  position: relative;
  width: 100%;
  aspect-ratio: 1;        /* ajustá si tu foto tiene otra relación (p. ej. 3/4, 16/9) */
  border-radius: 18px;
  overflow: hidden;
}

/* fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1){
  .cpd26-hero-slideshow::before{
    content:"";
    display:block;
    padding-top: 125%;         /* 4/5 = 80% -> 1/(4/5)=125% para mantener proporción */
  }
}

/* imágenes apiladas y animadas por opacidad */
.cpd26-hero-slideshow img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18px;
  opacity: 0;
  animation: cpd26Crossfade 12s infinite ease-in-out;
}

/* asegurar que se vea algo instantáneamente */
.cpd26-hero-slideshow img:first-child{ opacity: 1; }

/* offsets del crossfade (si añadís más imágenes, sumá más delays) */
.cpd26-hero-slideshow img:nth-child(1){ animation-delay: 0s; }
.cpd26-hero-slideshow img:nth-child(2){ animation-delay: 4s; }
.cpd26-hero-slideshow img:nth-child(3){ animation-delay: 8s; }

@keyframes cpd26Crossfade{
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  28%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 575px){
  /* un poco más baja en mobile, si querés */
  .cpd26-hero-slideshow{ aspect-ratio: 3 / 4; }  /* opcional */
}



/* === Slideshow crossfade para Hero === */
.cpd26-hero-slideshow{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* 490x490 -> cuadrado */
  border-radius: 18px;
  overflow: hidden;
}
.cpd26-hero-slideshow img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18px;
  opacity: 0;
  animation: cpd26Crossfade 12s infinite;
}
.cpd26-hero-slideshow img:nth-child(1){ animation-delay: 0s; }
.cpd26-hero-slideshow img:nth-child(2){ animation-delay: 4s; }
.cpd26-hero-slideshow img:nth-child(3){ animation-delay: 8s; }

@keyframes cpd26Crossfade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .cpd26-hero-slideshow img{ animation: none; opacity: 1; }
}

/* ===== El Congreso: fondo azul + contraste ===== */
.cpd26-quees--blue{
  position: relative;
  color: #eef5ff;
  /* Fondo: imagen + degradado fallback */
  background:
    url('../images/CPD-web/CPD-Congreso-Fondo.png') center/cover no-repeat;
    /* Fondo de Ejes con efecto parallax simple */

  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* parallax “rápido” */
}

.cpd26-quees--blue .cpd26-h2{ color: #ffffff; }
.cpd26-quees--blue .cpd26-lead,
.cpd26-quees--blue .cpd26-text{ color:#e9f1ff; }

.tx-blue-invert{ color: var(--cpd26-secondary-light); } /* pequeño acento turquesa en el título */

.cpd26-list--invert li{ color:#f2f6ff; }
.cpd26-list--invert li::before{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  box-shadow: 0 0 8px rgba(194,35,136,.35);
}



/* ===== Video vertical 1080x1920 con marco redondeado ===== */
.cpd26-quees--blue .section-pad{ padding: clamp(40px, 6vw, 80px) 0; }

.cpd26-video-vertical{
  position: relative;
  width: min(340px, 100%);
  aspect-ratio: 9 / 16;            /* vertical */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(5,10,40,.35), inset 0 0 0 1px rgba(255,255,255,.18);
  margin-inline: auto;
}
.cpd26-video-vertical iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #000;                /* por si tarda en cargar */
}

/* En pantallas chicas: apretar un poco */
@media (max-width: 575px){
  .cpd26-video-vertical{ border-radius: 18px; }
}

/* Botón overlay para activar sonido */
.cpd26-unmute{
  position:absolute;
  left:50%; bottom:14px; transform:translateX(-50%);
  padding:10px 14px;
  font-weight:700; font-size:14px;
  background:#ffffff;
  color:#001222;
  border:none; border-radius:999px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  cursor:pointer; z-index:2;
  transition:transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.cpd26-unmute:hover{ transform:translateX(-50%) scale(1.03); box-shadow:0 10px 36px rgba(0,0,0,.3); }

/* Ocultar el botón una vez activado el sonido */
.cpd26-video-vertical.is-unmuted .cpd26-unmute{ opacity:0; pointer-events:none; }

/* === WOW + Animate: compat global === */

/* 1) Asegurá el flujo de visibilidad que usa WOW */
.wow { visibility: hidden; }          /* WOW marca hidden al inicio */
.wow.animated { visibility: visible; }/* y visible cuando dispara */

/* 2) Si un nodo usa .wow y .cpd26-anim, no lo dejes "oculto" por .cpd26-anim */
.wow.cpd26-anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;  /* evita que la transición de .cpd26-anim interfiera */
}

/* 3) Alias para clases "históricas" si cargaste Animate.css v4
   (en v4 las clases son animate__animated/animate__fadeInUp, pero
   las keyframes se siguen llamando fadeInUp/fadeInDown). */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeInUp   { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }

/* Si preferís duraciones/delays por defecto para todas: */
/* .wow.animated { animation-duration: .7s; } */


/* ===== Galería: tira horizontal 4:5, loop infinito ===== */
.cpd26-fotos{ background:#f7f8ff; }

/* Viewport de la tira: ya no scrollea de forma nativa, se anima por JS (transform) */
.cpd26-strip{
  position: relative;
  overflow: hidden;
  padding-left: 0;
  margin-left: 0;
  cursor: grab;
  touch-action: pan-y;
  --cpd26-card-w: clamp(220px, 25vw, 320px); /* ajustá tu tamaño */
  --cpd26-gap: clamp(10px, 2vw, 18px);
}
.cpd26-strip:active{ cursor: grabbing; }

/* Tira interna: contiene el set original + el duplicado, se traslada con transform */
.cpd26-strip-track{
  display: flex;
  gap: var(--cpd26-gap);
  width: max-content;
  will-change: transform;
}

.cpd26-photo{
  flex: 0 0 var(--cpd26-card-w);
  aspect-ratio: 1 / 1;                /* cuadrado */
  border-radius: 18px;                 /* marco redondeado */
  overflow: hidden;
  background:#fff;                     /* fondo contenedor */
  box-shadow: 0 6px 20px rgba(10,12,40,.08);
  border: 2px solid #e3e6f0;           /* opcional: línea suave de marco */
  transition: transform .18s ease, box-shadow .18s ease;
}
.cpd26-photo:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(10,12,40,.15);
}
.cpd26-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;          /* evita el drag nativo de la imagen */
  -webkit-user-drag: none;
  user-select: none;
}

/* Compacto en mobile: un poco más grandes y menos gap */
@media (max-width: 575px){
  .cpd26-strip{ --cpd26-card-w: clamp(60%, 70vw, 80%); --cpd26-gap: 10px; }
}

/* Full-bleed solo para la tira de galería */
@media (min-width: 992px){
  .cpd26-fotos .cpd26-strip{
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    padding-inline: clamp(16px, 4vw, 48px);
  }
}

/* La tira ya la tenés, sólo ajustamos el tamaño de cada item */
@media (min-width: 992px){
  .cpd26-strip{
    --cpd26-card-w: clamp(300px, 28vw, 420px);
    --cpd26-gap: clamp(12px, 2vw, 20px);
  }
}
@media (min-width: 1400px){
  .cpd26-strip{
    --cpd26-card-w: clamp(360px, 30vw, 520px);
  }
}

@media (prefers-reduced-motion: reduce){
  .cpd26-strip-track{ transition: none !important; }
}


/* ===== Stats bajo galería ===== */
.cpd26-stats{
  margin: clamp(28px, 5vw, 48px) auto 0;
  padding: clamp(12px, 2.5vw, 22px) clamp(10px, 3vw, 24px);
  display: grid;
  align-items: center;
  justify-content: center;
  grid-auto-flow: column;
  gap: clamp(18px, 5vw, 64px);
  /* background: #f4f6ff;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(10,12,40,.08); */
}

.cpd26-stat{
  text-align: center;
  min-width: clamp(160px, 22vw, 280px);
}

.stat-num{
  font-family: var(--cpd26-font-title);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(65px, 15vw, 120px);   /* grande en desktop */
  margin-bottom: clamp(8px, 1.2vw, 12px);
  letter-spacing: .5px;
  /* Estilo “outline” + gradiente de relleno */
  -webkit-text-fill-color: transparent;
  background-clip: text; -webkit-background-clip: text;
  /* contorno para reforzar el diseño del mock */
  -webkit-text-stroke: 2px rgba(0,0,0,.08);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.stat-label{
  font-family: var(--cpd26-font-subtitle);
  font-weight: 500;
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.1;
}

/* Gradientes coherentes con el sistema visual */
.stat-pink  { background-image: linear-gradient(90deg, var(--cpd26-secondary) 0%, var(--cpd26-primary) 100%); }
.stat-cyan  { background-image: linear-gradient(90deg, var(--cpd26-primary) 0%, var(--cpd26-secondary) 100%); }
.stat-violet{ background-image: linear-gradient(90deg, var(--cpd26-secondary-light) 0%, var(--cpd26-primary-dark) 100%); }

.stat-blue{ background-image: linear-gradient(45deg, var(--cpd26-primary) 0%, var(--cpd26-secondary) 100%); }

/* Divisores verticales solo en desktop */
.cpd26-stat-divider{
  width: 1px; height: clamp(48px, 8vw, 120px);
  background: rgba(59,38,130,.18);
  display: inline-block;
  border-radius: 1px;
}



/* Responsive: apilar en mobile y ocultar divisores */
@media (max-width: 767px){
  .cpd26-stats{
    grid-auto-flow: row;
    gap: 18px;
    padding: 16px;
  }
  .cpd26-stat{ min-width: 0; }
  .cpd26-stat-divider{ display: none; }
}

/* Alineación vertical y centrado del bloque (por si acaso) */
.cpd26-stat{
  display: flex;
  flex-direction: column;
  align-items: center;           /* centra número y etiqueta */
}
.stat-label{ margin-top: .35em; } /* respirito entre número y etiqueta */


/* Labels con relleno en gradiente */
.tx-grad-pink{
  background: linear-gradient(90deg, var(--cpd26-secondary) 0%, var(--cpd26-primary) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tx-grad-cyan{
  background: linear-gradient(90deg, var(--cpd26-primary) 0%, var(--cpd26-secondary) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tx-grad-violet{
  background: linear-gradient(90deg, var(--cpd26-secondary-light) 0%, var(--cpd26-primary-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}




.cpd26-gallery-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cpd26-gallery-title .title-icon{
  width: 40px; height: auto;
}
@media (max-width: 575px){
  .cpd26-gallery-title .title-icon{ width: 28px; }
}

.cpd26-fotos .cpd26-gradient{
  background: linear-gradient(45deg, var(--cpd26-primary) 0%, var(--cpd26-secondary) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* Asegura que el contenedor de galería sea relativo */
.cpd26-fotos{ position: relative; }

.cpd26-carousel-nav{
  position: absolute;
  inset: 0;                      /* ocupa todo el alto del wrapper */
  display: flex;
  align-items: center;           /* centrado vertical respecto a la tira */
  justify-content: space-between;
  padding-inline: clamp(8px, 2vw, 16px);
  pointer-events: none;          /* deja pasar el scroll de la tira */
  z-index: 3;
}

.cpd26-carousel-nav .nav-btn{
  pointer-events: auto;          /* los botones sí clickeables */
  background: none; border: 0; padding: 0;
  width: 56px; height: 56px; cursor: pointer;
}

.cpd26-carousel-nav .nav-btn img{
  width: 100%; height: auto;
  display: block;
}
.cpd26-carousel-nav .left{ left: 12px; }
.cpd26-carousel-nav .right{ right: 12px; }


/* === Galería: wrapper y tira === */
.cpd26-strip-wrap{
  position: relative;            /* referencia para el overlay de flechas */
}

.cpd26-cta-organizar-blue{
  position: relative;
  /* color: #eef5ff; */
  /* Fondo: imagen + degradado fallback */
  background:
    url('../images/CPD-web/CPD-CTA-Fondo.png') center/cover no-repeat;
  /* Fondo de Ejes con efecto parallax simple */

  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* parallax “rápido” */
}

.cpd26-sponsor--invert li{ color:#000000; }
.cpd26-sponsor--invert li::before{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  box-shadow: 0 0 8px rgba(194,35,136,.35);
}

/* El grid pasa a UNA sola columna siempre, y se centra dentro del container */
.cpd26-grid-cards{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr !important;   /* fuerza 1 columna en todos los breakpoints */
  gap: clamp(16px, 2vw, 22px);
  max-width: 1100px;                       /* ancho cómodo en desktop */
  margin-inline: auto;                     /* centrar dentro del container */
  align-items: stretch;
  min-width: 0;
}

/* Fases responsivas */
@media (max-width: 1200px){
  .cpd26-grid-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 col */
  }
}
@media (max-width: 768px){
  .cpd26-grid-cards{
    grid-template-columns: 1fr;   /* 1 col en mobile */
  }
}

/* Contenedor de la tarjeta */
.cpd26-card{
  position: relative;
  padding-top: 3.5rem; /* espacio para el chip */
  border-radius: 18px 0 18px 0;
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* Tarjeta más “ancha que alta” en pantallas grandes */
.cpd26-card{
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 16px 0 16px 0;
  box-shadow: 0 6px 20px rgba(14, 0, 93, 0.05);
  display: flex;
  flex-direction: column;
  min-width: 0;
}


.cpd26-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px 0 18px 0;
  padding:3px; /* grosor borde */
  background:inherit; /* fallback */
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  z-index:0;
}

.cpd26-card:hover{
  transition: transform 0.3s ease;
  transform: translateY(-6px);
  box-shadow: 0 12px 28px  rgba(14, 0, 93, 0.15);
}

/* Chip superior */
.cpd26-card h5{
  position:absolute;
  top:0; left:50%; transform:translate(-50%, -50%);
  margin:0;
  padding: .35rem 1.2rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  background:#fff;
  color:#111;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:2;
}

/* Título con altura uniforme (para alinear el inicio de las listas) */
.cpd26-card h5{
  margin: 0 0 12px;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.35;
  /* min-height: clamp(2.6rem, 3.2vw, 3.6rem); ajustá si necesitás más/menos alto */
  display: flex;
  align-items: flex-end;
}

/* Pequeño afinado para pantallas muy chicas */
@media (max-width: 480px){
  .cpd26-card{ padding: 16px 18px; }
}


/* Ajuste listas sin ícono */
.cpd26-card ul{ list-style:disc; margin:0; padding-left:1.4rem; font-family: var(--cpd26-font-text); }
.cpd26-card li{ margin-bottom:.5rem; line-height:1.4; }



/* Gradientes distintos (colores semánticos de nivel de sponsor: se mantienen) */
.cpd26-card-colab {
  background: linear-gradient(135deg, #ffffff, #b1c2dc);
  border-image: linear-gradient(135deg, #0061ff, #60efff) 1;
}
.cpd26-card-plata {
  background: linear-gradient(135deg, #ffffff, #aebcc2);
  border-image: linear-gradient(135deg, #d0d0d0, #a0a0a0) 1;
}
.cpd26-card-oro {
  background: linear-gradient(135deg, #ffffff, #d0c6ae);
  border-image: linear-gradient(135deg, #ffd700, #ff7a00) 1;
}


.cpd26-cta-icon{
  text-align:center;
  margin-bottom: 18px;
   margin-top: -30px;
}
.cpd26-cta-icon img{
  width:100px; height:auto;
  display:inline-block;
}

/* Contenedor de la tarjeta */
.cpd26-card{
  position: relative;
  padding-top: 3.5rem; /* espacio para el chip */
  border-radius: 18px 0 18px 0; /* superior-izq. e inferior-der. redondeados; el resto en ángulo recto */
  background-clip: padding-box;
  border: 3px solid transparent;
  margin-top: 0.5em;
}
.cpd26-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px 0 18px 0;
  padding:3px; /* grosor borde */
  background:inherit; /* fallback */
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  z-index:0;
}

/* Chip superior */
.cpd26-card h5{
  position:absolute;
  top:0; left:50%; transform:translate(-50%, -50%);
  margin:0;
  padding: .35rem 1.2rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 800;
  background:#fff;
  color: var(--cpd26-primary);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:2;
}

/* Ajuste listas sin ícono */
.cpd26-card ul{ list-style:disc; margin:0; padding-left:1.4rem; }
.cpd26-card li{ margin-bottom:.5rem; line-height:1.4; }


/* 1) Nunca permitir scroll horizontal en la página */
html, body { overflow-x: hidden; }

/* 2) Asegurar box-sizing correcto y que las medias jamás crezcan de más */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* 3) Restringir los bloques full-bleed en mobile para que no sobrepasen el viewport */
@media (max-width: 991.98px){
  /* Hero y overlays */
  .cpd26-sales-hero,
  .cpd26-hero-bg,
  .cpd26-hero-overlay,
  .cpd26-hero-frame,
  .cpd26-hero-slideshow { max-width: 100vw; overflow: hidden; }

  /* Tira de galería: sin sangrar hacia los lados en mobile */
  .cpd26-fotos .cpd26-strip-wrap{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw;
    overflow: hidden;           /* oculta cualquier desborde residual */
  }
  .cpd26-strip { padding-inline: 12px; }
}

/* 4) En desktop sí dejamos el “bleed” de la galería, pero sin exceder 100vw */
@media (min-width: 992px){
  .cpd26-fotos .cpd26-strip-wrap{
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;           /* clave para no pasarse del viewport */
    overflow: hidden;
  }
}
@media (max-width: 768px){
  .navbar-collapse {
    background-color: var(--cpd26-primary-dark) !important;
  }
}


/* Altura del header para compensar anclas y cálculo */
:root { --cpd26-nav-h: 80px; }                /* ajústalo si tu nav varía */
@media (max-width: 991.98px){ :root { --cpd26-nav-h: 64px; }}

/* Cuando hacés click a #id que el navegador “pare” debajo del header */
[id] { scroll-margin-top: calc(var(--cpd26-nav-h) + 16px); }

/* Estilo del ítem activo (usa tu clase existente si tenés una) */
.cpd26-nav .nav-link.active {
  font-weight: 700;
  position: relative;
}
.cpd26-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  border-radius:2px;
}

/* ======================================================= */
/* ===== Programa 2026 ===== */
/* ======================================================= */
.cpd26-programa{ background:#fff; }

.cpd26-programa .cpd26-gradient,
.cpd26-speakers .cpd26-gradient{
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.cpd26-programa-kicker{
  font-family: var(--cpd26-font-title);
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:14px;
  color: var(--cpd26-secondary);
  margin-bottom:8px;
}

.cpd26-programa-groups{ margin-top: 28px; }

.cpd26-programa-subtitle{
  font-family: var(--cpd26-font-subtitle);
  font-weight:500;
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 36px 0 18px;
  color: var(--cpd26-primary);
  text-align:center;
  position:relative;
  padding-bottom:6px;
}
.cpd26-programa-subtitle::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:140px; height:3px; border-radius:2px;
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
}
.cpd26-programa-groups > .cpd26-programa-subtitle:first-child{ margin-top:0; }

.cpd26-panel-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
@media (max-width:767px){ .cpd26-panel-grid{ grid-template-columns:1fr; } }

.cpd26-panel-card{
  border-radius:16px 0 16px 0; /* superior-izq. e inferior-der. redondeados; el resto en ángulo recto */
  padding:22px 24px;
  background:#fff;
  border:2px solid #ab2c9a;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cpd26-panel-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(14,0,93,.1);
}
.cpd26-panel-tag{
  font-family: var(--cpd26-font-title);
  display:inline-block;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
  background: linear-gradient(90deg, var(--cpd26-primary), var(--cpd26-secondary));
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.cpd26-panel-card h4{
  font-family: var(--cpd26-font-title); font-weight:800;
  font-size:22px; line-height:1.15; margin:0 0 8px; color:#ab2c9a;
}
.cpd26-panel-card p{ font-family: var(--cpd26-font-text); font-size:15px; color:#4b4f66; margin:0; line-height:1.5; }

.cpd26-expo-grid{
  display:flex; flex-wrap:wrap; gap:12px;
}
.cpd26-expo-chip{
  font-family: var(--cpd26-font-subtitle);
  background:#fff;
  border-radius:14px 0 14px 0; /* superior-izq. e inferior-der. redondeados; el resto en ángulo recto */
  border:2px solid #7557ff;
  padding:12px 16px;
  font-weight:500;
  font-size:25px;
  line-height:1.15;
  color:#7557ff;
  flex:1 1 260px;
  max-width:100%;
}
.cpd26-expo-chip.cpd26-magistral{
  background:#fff;
  border-color:#7557ff;
}
.cpd26-expo-chip small{
  font-family: var(--cpd26-font-title);
  display:block; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:11px; color: var(--cpd26-secondary); margin-bottom:4px;
}

/* ======================================================= */
/* ===== Expositores destacados ===== */
/* ======================================================= */
.cpd26-speakers{
  background: #f7f8ff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* consistente con las demás secciones con fondo */
}

.cpd26-speaker-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: 20px;
}
@media (max-width:991px){ .cpd26-speaker-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:575px){ .cpd26-speaker-grid{ grid-template-columns: repeat(2, 1fr); } }

.cpd26-speaker{
  text-align:center;
}
.cpd26-speaker img{
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 12px;
  transition: transform .2s ease;
}
.cpd26-speaker:hover img{ transform: translateY(-4px); }
.cpd26-speaker-name{
  font-family: var(--cpd26-font-title);
  font-weight:800; font-size:17px; color: var(--cpd26-primary); line-height:1.25;
}
.cpd26-speaker-role{
  font-family: var(--cpd26-font-text);
  font-size:12.5px; color:#000; font-weight:400; margin-top:2px; line-height:1.3;
}

/* ======================================================= */
/* ===== Entradas (compra de tickets) ===== */
/* ======================================================= */
#entradas .cpd26-h2{
  position:relative;
  display:inline-block;
  padding-bottom:8px;
}
#entradas .cpd26-h2::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:160px; height:3px; border-radius:2px;
  background:#fff;
}

.cpd26-btn-eventbrite{
  font-family: var(--cpd26-font-title);
  background: var(--cpd26-primary);
  border:none; color:#fff; font-weight:800; padding:14px 34px; border-radius:999px;
  font-size:17px; display:inline-flex; align-items:center; gap:10px;
}
.cpd26-btn-eventbrite:hover{
  background: var(--cpd26-secondary);
  color:#fff;
}
.cpd26-entradas-note{
  font-family: var(--cpd26-font-text);
  color:#e9f1ff; font-size:14px; opacity:.8; margin-top:16px;
}

/* ======================================================= */
/* ===== Sección discreta: organizar el evento ===== */
/* ======================================================= */
.cpd26-organizar-discreto{
  background:#f7f8ff;
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid rgba(59,38,130,.08);
}
.cpd26-organizar-discreto .container{ max-width: 760px; text-align:center; }
.cpd26-organizar-discreto h3{
  font-family: var(--cpd26-font-title); font-weight:800;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--cpd26-primary); margin-bottom:8px;
}
.cpd26-organizar-discreto p{
  font-family: var(--cpd26-font-text);
  color:#5a5f77; font-size:14.5px; margin-bottom:16px; line-height:1.55;
}
.cpd26-btn-discreto{
  font-family: var(--cpd26-font-title);
  border:1.5px solid rgba(59,38,130,.25);
  color: var(--cpd26-primary); padding:9px 20px; border-radius:999px;
  font-weight:800; font-size:14px; display:inline-block;
}
.cpd26-btn-discreto:hover{ background: var(--cpd26-primary); color:#fff; border-color: var(--cpd26-primary); }