/* ===== CPD Sales (scoped) ===== */
:root{
  --cpd-indigo:#1d05ff;
  --cpd-violet:#6a00ff;
  --cpd-cyan:#00e7cc;
  --cpd-blue:#0000ff;
  --cpd-maxw:1180px;
}

.cpd-sales-hero{
  position: relative;
  padding: clamp(84px, 10vw, 128px) 0;
  color:#fff;
  isolation:isolate;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cpd-hero-container{ max-width: var(--cpd-maxw); }

/* FONDO + OVERLAY — con fallback si los PNG no cargan */
.cpd-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;
}
.cpd-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;
}

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

.cpd-hero-title{
  font-weight:800;
  font-size:clamp(36px, 6.2vw, 64px);
  line-height:1.1;
  margin: 6px 0 16px;
  color: white ;
}
.cpd-hero-title .cpd-gradient{
  background: linear-gradient(90deg, #74f7ee, #35cfff 40%, #6f62ff 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpd-hero-lead{
  font-weight:300; color:#e9f1ff;
  max-width:60ch; font-size:clamp(16px, 2.2vw, 20px);
  margin-bottom:40px;
  margin-top: 20;
  line-height: 1.6em;
}

.cpd-btn-primary{
  background: linear-gradient(90deg, #00e7cc 0%, #00bbff 100%);
  border:none; color:#001986; font-weight:800; padding:12px 28px; border-radius:999px;
}
.cpd-btn-primary:hover{ 
  background: linear-gradient(90deg, #00bbff 0%, #00e7cc 100%);
  color: white;
}

.cpd-btn-secondary{
  border:1.5px solid rgba(255,255,255,.7); color:#fff; padding:12px 28px; border-radius:999px;
  backdrop-filter: blur(2px); font-weight:600;
}
.cpd-btn-secondary:hover{ background:#fff; color:#3400c4; }

.cpd-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%);
}
.cpd-hero-photo{ display:block; width:100%; height:auto; border-radius:18px; }
.cpd-frame-glow{
  position:absolute; inset:-12px; border-radius:30px; pointer-events:none;
  box-shadow: 0 0 80px rgba(116,247,238,.25), 0 0 120px rgba(111,98,255,.22);
}

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

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

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

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

/* ¿Qué es? */
.cpd-quees{ background:#fff; }
.cpd-quees .cpd-gradient{
  background: linear-gradient(90deg, #74f7ee, #35cfff 40%, #6f62ff 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cpd-list{ list-style:none; padding:0; margin:18px 0 0; }
.cpd-list li{ padding-left:28px; position:relative; margin:.6rem 0; }
.cpd-list li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:13px; border-radius:50%;
  background: linear-gradient(90deg, #00e7cc, #25f0e6);
}
.cpd-quees-media img{ object-fit:cover; aspect-ratio:16/9; }

/* Estilo especial para la lista de "Qué es el CPD" */
.cpd-quees .cpd-list li{
  background: linear-gradient(135deg, rgba(0, 0, 95, 0.6), rgba(0, 0, 213, 0.4));
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 12px;
  list-style: none;
  color: #fff; /* asegura contraste */
  position: relative;
}

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


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

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

/* CTA final */
.cpd-cta-organizar{
  background: radial-gradient(80% 70% at 50% 20%, rgba(0,231,204,.15), transparent 60%), #0f0a3d;
  color:#fff;
}

/* ======= NAVBAR CPD ======= */
.cpd-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;
}
.cpd-nav-logo{ height: 60px; width:auto; }
@media (max-width:575px){ .cpd-nav-logo{ height: 40px; } }

.cpd-nav-links .nav-link{
  color:#fff; opacity:.9; padding:.6rem 1rem; font-weight:600;
}
.cpd-nav-links .nav-link:hover,
.cpd-nav-links .nav-link.active{ color:#00e7cc; opacity:1; }

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

/* ======= HERO tweaks ======= */
/* H1 blanco, excepto el span con gradiente */
.cpd-hero-title{ color:#fff; }
.cpd-hero-title .cpd-gradient{
  background: linear-gradient(90deg, #74f7ee, #35cfff 40%, #6f62ff 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

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





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

.cpd-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 */
.cpd-ejes-icon{
  text-align:center;
  margin-bottom: 18px;
   margin-top: -150px;
}
.cpd-ejes-icon img{
  width:200px; height:auto;
  display:inline-block;
}


.cpd-ejes .cpd-gradient{
  background: linear-gradient(90deg, #35cfff, #6f62ff);
  -webkit-background-clip:text; background-clip:text; 
  color:transparent;
}

.cpd-chip-grid{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.cpd-chip{
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #35cfff, #6f62ff) 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:600;
  text-align: center;
}

.cpd-chip:hover{
  color:#fff;
  background: linear-gradient(90deg, #35cfff, #6f62ff);
  transition: transform 0.3s ease;
  transform: translateY(-5px);
}

.cpd-chip-2{
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #ff009d, #6200ff) 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:600;
  text-align: center;
}

.cpd-chip-2:hover{
  color:#fff;
  background: linear-gradient(90deg, #ff009d, #6200ff);
  transition: transform 0.3s ease;
  transform: translateY(-5px);
}

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

/* ======= Accesibilidad / foco ======= */
.cpd-nav-links .nav-link:focus,
.cpd-btn-primary:focus,
.cpd-btn-secondary:focus,
.cpd-chip:focus{ outline:2px solid #00e7cc; outline-offset:2px; }


/* ===== NAVBAR behavior (override global style.css) ===== */
.cpd-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;
}
.cpd-navbar.scrolled{
  top: 0px !important;                 /* reduce separación al scrollear */
  background: rgba(10,12,40,.88) !important;  /* fondo visible */
  backdrop-filter: blur(6px) !important;       /* blur activo */
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

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

/* Links: forzar por encima de style.css */
.cpd-navbar .nav-link{
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;              /* estado inicial normal */
  position: relative;
  letter-spacing:.03em;
  text-transform:none;
  padding:.6rem 1rem;
  transition: color .25s ease, font-weight .25s ease;
}

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

.cpd-navbar .nav-link:hover,
.cpd-navbar .nav-link.active{
  color:#00e7cc !important;
  font-weight:700;               /* solo en hover o active */
}

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



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

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

/* ---- FIX slideshow hero: dar altura al contenedor ---- */
.cpd-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){
  .cpd-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 */
.cpd-hero-slideshow img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18px;
  opacity: 0;
  animation: cpdCrossfade 12s infinite ease-in-out;
}

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

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

@keyframes cpdCrossfade{
  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 */
  .cpd-hero-slideshow{ aspect-ratio: 3 / 4; }  /* opcional */
}



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

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

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

/* ===== El Congreso: fondo azul + contraste ===== */
.cpd-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” */
}

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

.tx-blue-invert{ color:#7ff3eb; } /* pequeño acento turquesa en el título */

.cpd-list--invert li{ color:#f2f6ff; }
.cpd-list--invert li::before{
  background: linear-gradient(90deg, #00e7cc, #25f0e6);
  box-shadow: 0 0 8px rgba(0,231,204,.35);
}



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

.cpd-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;
}
.cpd-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){
  .cpd-video-vertical{ border-radius: 18px; }
}

/* Botón overlay para activar sonido */
.cpd-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;
}
.cpd-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 */
.cpd-video-vertical.is-unmuted .cpd-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 .cpd-anim, no lo dejes "oculto" por .cpd-anim */
.wow.cpd-anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;  /* evita que la transición de .cpd-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 ===== */
.cpd-fotos{ background:#f7f8ff; }
/* Tira scrolleable (no debe tener padding-left que empuje la 1ª foto) */
.cpd-strip{
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 25vw, 320px); /* ajustá tu tamaño */
  gap: clamp(10px, 2vw, 18px);
  overflow-x: auto;
  padding-left: 0;               /* ← clave: primera foto pegada */
  margin-left: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Ocultar barra de scroll, mantener desplazamiento */
  -ms-overflow-style: none;      /* IE/Edge legacy */
  scrollbar-width: none;         /* Firefox */
}

.cpd-strip::-webkit-scrollbar{ height: 8px; display: none; }
.cpd-strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 8px; }
.cpd-strip::-webkit-scrollbar-track{ background: transparent; }


.cpd-strip::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

.cpd-photo{
  aspect-ratio: 1 / 1;                /* cuadrado */
  scroll-snap-align: center;
  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;
}
.cpd-photo:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(10,12,40,.15);
}
.cpd-photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

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

/* Full-bleed solo para la tira de galería */
@media (min-width: 992px){
  .cpd-fotos .cpd-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){
  .cpd-strip{
    /* antes: grid-auto-columns: clamp(220px, 25vw, 320px) */
    grid-auto-columns: clamp(300px, 28vw, 420px);
    gap: clamp(12px, 2vw, 20px);
  }
}
@media (min-width: 1400px){
  .cpd-strip{
    grid-auto-columns: clamp(360px, 30vw, 520px);
  }
}


/* ===== Stats bajo galería ===== */
.cpd-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); */
}

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

.stat-num{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 200;
  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: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.1;
}

/* Gradientes coherentes con el sistema visual */
.stat-pink  { background-image: linear-gradient(90deg,#ff00b8 0%,#ff7a00 100%); }
.stat-cyan  { background-image: linear-gradient(90deg,#00e7cc 0%,#0061ff 100%); }
.stat-violet{ background-image: linear-gradient(90deg,#7f00ff 0%,#ff0080 100%); }

.stat-blue{ background-image: linear-gradient(45deg, #000c77 0%,#7900f1 100%); }

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



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

/* Alineación vertical y centrado del bloque (por si acaso) */
.cpd-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,#ff00b8 0%,#ff7a00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tx-grad-cyan{
  background: linear-gradient(90deg,#00e7cc 0%,#0061ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tx-grad-violet{
  background: linear-gradient(90deg,#7f00ff 0%,#ff0080 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}




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

.cpd-fotos .cpd-gradient{
  background: linear-gradient(45deg, #000c77 0%,#7900f1 100%);
  -webkit-background-clip:text; background-clip:text; 
  color:transparent;
}

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

.cpd-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; 
}

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

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


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

.cpd-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” */
}

.cpd-sponsor--invert li{ color:#000000; }
.cpd-sponsor--invert li::before{
  background: linear-gradient(90deg, #1700e7, #612cff);
  box-shadow: 0 0 8px rgba(0,231,204,.35);
}

/* El grid pasa a UNA sola columna siempre, y se centra dentro del container */
.cpd-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){
  .cpd-grid-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 col */
  }
}
@media (max-width: 768px){
  .cpd-grid-cards{
    grid-template-columns: 1fr;   /* 1 col en mobile */
  }
}

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

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


.cpd-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  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;
}

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

/* Chip superior */
.cpd-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) */
.cpd-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){
  .cpd-card{ padding: 16px 18px; }
}


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



/* Gradientes distintos */
.cpd-card-colab {
  background: linear-gradient(135deg, #ffffff, #b1c2dc);
  border-image: linear-gradient(135deg, #0061ff, #60efff) 1;
}
.cpd-card-plata {
  background: linear-gradient(135deg, #ffffff, #aebcc2);
  border-image: linear-gradient(135deg, #d0d0d0, #a0a0a0) 1;
}
.cpd-card-oro {
  background: linear-gradient(135deg, #ffffff, #d0c6ae);
  border-image: linear-gradient(135deg, #ffd700, #ff7a00) 1;
}


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

/* Contenedor de la tarjeta */
.cpd-card{
  position: relative;
  padding-top: 3.5rem; /* espacio para el chip */
  border-radius: 18px;
  background-clip: padding-box;
  border: 3px solid transparent;
  margin-top: 0.5em;
}
.cpd-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  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 */
.cpd-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:#6766b2;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:2;
}

/* Ajuste listas sin ícono */
.cpd-card ul{ list-style:disc; margin:0; padding-left:1.4rem; }
.cpd-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 */
  .cpd-sales-hero,
  .cpd-hero-bg,
  .cpd-hero-overlay,
  .cpd-hero-frame,
  .cpd-hero-slideshow { max-width: 100vw; overflow: hidden; }

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

/* 4) En desktop sí dejamos el “bleed” de la galería, pero sin exceder 100vw */
@media (min-width: 992px){
  .cpd-fotos .cpd-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: #2a008f !important;
  }
}


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

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

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