/* =============================================================================
   convocatoria.css — Rediseño de la página pública de evento (evento.php)
   Mobile-first, MODO CLARO. Todo bajo el scope .cv para no chocar con el CSS
   legacy ni con el formulario de inscripción. Basado en el hi-fi de Claude Design.
   ============================================================================= */
/* Nunito + Barlow ya los carga tokens.css; NO usar @import aquí (render-blocking). */

.cv {
  --cv-green: #00E276;
  --cv-green-press: #00c268;
  --cv-green-soft: rgba(0, 226, 118, .14);
  --cv-blue: #0099FF;
  --cv-purple: #B748FF;
  --cv-purple-soft: rgba(183, 72, 255, .13);
  --cv-red: #FC445F;
  --cv-orange: #FF7639;
  --cv-orange-soft: rgba(255, 118, 57, .15);
  --cv-yellow: #FFC55F;
  --cv-ink: #131319;
  --cv-t2: #5A5A66;
  --cv-muted: #8A8A99;
  --cv-page: #F5F6F8;
  --cv-card: #FFFFFF;
  --cv-line: #E3E5EA;
  --cv-hair: rgba(0, 0, 0, .08);
  --cv-nun: 'Nunito', system-ui, -apple-system, sans-serif;
  --cv-bar: 'Barlow', system-ui, sans-serif;
  --cv-sh-sm: 0 1px 3px rgba(19, 19, 25, .07);
  --cv-sh: 0 2px 6px rgba(19, 19, 25, .05), 0 10px 26px rgba(19, 19, 25, .07);
  --cv-sh-lg: 0 8px 20px rgba(19, 19, 25, .10), 0 24px 60px rgba(19, 19, 25, .14);

  background: var(--cv-page);
  font-family: var(--cv-nun);
  color: var(--cv-ink);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px; /* espacio para la barra fija */
}
.cv * { box-sizing: border-box; }
.cv .num { font-family: var(--cv-bar); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
/* .cv-ic NO fija font-family: hereda la de .material-symbols-sharp del sistema */
.cv .cv-ic { line-height: 1; vertical-align: middle; }

/* ---------- Botones ---------- */
.cv .cv-btn {
  border: none; cursor: pointer; font-family: var(--cv-nun); font-weight: 900;
  background: var(--cv-green); color: var(--cv-ink);
  border-radius: 13px; padding: 14px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease;
}
.cv .cv-btn:active { transform: translateY(1px) scale(.99); }
.cv .cv-btn--primary { box-shadow: 0 6px 18px rgba(0, 226, 118, .32); width: 100%; }
.cv .cv-btn--sm { padding: 8px 15px; font-size: 12.5px; font-weight: 800; border-radius: 10px; }
.cv .cv-btn--ghost {
  background: var(--cv-card); color: var(--cv-ink);
  border: 1px solid var(--cv-line); box-shadow: var(--cv-sh-sm);
}

/* ---------- Layout ---------- */
.cv-body { max-width: 640px; margin: 0 auto; }
.cv-sec { padding: var(--space-6) var(--space-4) 0; }
/* Reset de tipografía dentro de .cv: el CSS legacy del sitio ponía los títulos
   en verde/mayúsculas/centrados. El handoff los quiere negros, a la izquierda y
   sin mayúsculas (solo el ícono va en verde). */
.cv h1, .cv h2, .cv h3 { text-transform: none; text-align: left; color: var(--cv-ink); }
.cv .cv-sec__head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 12px; text-align: left; }
.cv .cv-sec__head .cv-ic { font-size: 19px; color: var(--cv-green-press); }
.cv .cv-sec__head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--cv-ink); text-transform: none; letter-spacing: normal; text-align: left; }
.cv .cv-card {
  background: var(--cv-card); border: 1px solid var(--cv-hair);
  border-radius: 16px; box-shadow: var(--cv-sh-sm); overflow: hidden;
}

/* ---------- HERO (variante Tarjeta) ---------- */
.cv-hero { position: relative; }
.cv-hero__banner {
  height: 240px; position: relative; overflow: hidden; isolation: isolate;
}
/* capa de imagen: sobresale 12% arriba y abajo para tener recorrido de parallax */
.cv-hero__banner::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  background-image: var(--cv-portada); background-size: cover; background-position: center 26%;
}
/* capa de degradado: queda quieta, el parallax no la arrastra */
.cv-hero__banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 14, 0) 55%, rgba(10, 10, 14, .28));
}
.cv-hero__card {
  margin: -46px 16px 0; position: relative; max-width: 620px;
  margin-left: auto; margin-right: auto;
  background: var(--cv-card); border: 1px solid var(--cv-hair);
  border-radius: 20px; padding: var(--space-5); box-shadow: var(--cv-sh);
}
@media (min-width: 640px) { .cv-hero__card { margin-left: auto; margin-right: auto; } }
.cv-hero__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.cv-badge, .cv-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px;
}
.cv-badge--open { background: var(--cv-green); color: var(--cv-ink); }
.cv-badge--closed { background: var(--cv-red); color: #fff; }
.cv-pill--disc { background: var(--cv-purple-soft); color: var(--cv-purple); }
.cv-hero__logo {
  margin: 12px 0 0; width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  background: var(--cv-page); border: 1px solid var(--cv-line);
  display: flex; align-items: center; justify-content: center;
}
.cv-hero__logo img { width: 100%; height: 100%; object-fit: contain; }
.cv-title { margin: 11px 0 0; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.cv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--cv-t2); }
.cv-meta__item { display: inline-flex; align-items: center; gap: 6px; }
.cv-meta__item .cv-ic { font-size: 17px; color: var(--cv-green-press); }
.cv-count {
  display: flex; align-items: center; gap: 8px; margin-top: var(--space-4);
  padding: 12px; background: var(--cv-page); border-radius: 13px;
}
.cv-count > .cv-ic { font-size: 20px; color: var(--cv-orange); }
.cv-count__lbl { font-size: 11px; font-weight: 700; color: var(--cv-t2); }
.cv-count__row { margin-left: auto; display: flex; gap: 10px; text-align: center; align-items: center; }
.cv-count__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 34px; }
.cv-count__cell .num { font-size: 22px; font-weight: 800; line-height: 1; display: block; text-align: center; }
.cv-count__cell small { display: block; text-align: center; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cv-muted); }
.cv-count__sep { color: var(--cv-line); font-size: 20px; font-weight: 800; }
.cv-hero__card .cv-btn--primary { margin-top: 14px; }
.cv-trust {
  text-align: center; margin: 8px 0 0; font-size: 11px; font-weight: 600; color: var(--cv-t2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cv-trust .cv-ic { font-size: 14px; color: var(--cv-green-press); }
.cv-social {
  display: flex; justify-content: center; gap: 9px; margin-top: 13px;
  padding-top: 13px; border-top: 1px solid var(--cv-line);
}
.cv-social a {
  width: 34px; height: 34px; border-radius: 99px; background: var(--cv-page);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.cv-social a img { width: 17px; height: 17px; }

/* ---------- DATOS DEL EVENTO ---------- */
.cv-datos__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
/* Móvil: 2 por renglón (Fecha+Salida, Sede+Estado); el aviso ocupa todo el ancho */
.cv .cv-datosCard { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 8px; }
.cv .cv-datosCard .cv-datos__row--full { grid-column: 1 / -1; }
.cv-datos__ic { width: 34px; height: 34px; border-radius: 10px; background: var(--cv-green-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.cv-datos__ic .cv-ic { font-size: 19px; color: var(--cv-green-press); }
.cv-datos__label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cv-muted); }
.cv-datos__valwrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.cv-datos__val { font-size: 14px; font-weight: 700; color: var(--cv-ink); }
.cv-tag { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; }
.cv-tag--up { background: var(--cv-orange-soft); color: var(--cv-orange); }
.cv-tag--close { background: rgba(252, 68, 95, .13); color: var(--cv-red); }
.cv-tag .cv-ic { font-size: 12px; }

/* ---------- DISTANCIAS ---------- */
/* Contenedor: transparente (que solo se vean las tarjetas de cada distancia) */
.cv .cv-distCard { display: flex; flex-direction: column; gap: var(--space-3); background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; padding: 0; }
.cv-dist__row { background: var(--cv-card); border: 1px solid var(--cv-hair); border-radius: 15px; box-shadow: var(--cv-sh-sm); padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.cv-dist__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cv-dist__name { line-height: 1.05; }
.cv-dist__price { line-height: 1; }
.cv-dist__cta { width: 100%; padding: 11px; font-size: 14px; border-radius: 11px; }
.cv-dist__info { min-width: 0; }
.cv-dist__name { font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.cv-dist__pricewrap { text-align: right; flex: none; }
.cv-dist__price { font-size: 26px; font-weight: 800; line-height: 1; color: var(--cv-green-press); }
.cv-dist__serv { font-size: 10px; font-weight: 600; color: var(--cv-muted); }
.cv-dist__urg { font-size: 12px; font-weight: 800; color: var(--cv-red); display: flex; align-items: center; gap: 5px; }
.cv-dist__urg p { margin: 0; }
.cv-dist__urg:empty { display: none; }
.cv-prepago { margin-top: var(--space-4); display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--cv-green-soft); border-radius: 12px; }
.cv-prepago .cv-ic { font-size: 18px; color: var(--cv-green-press); }
.cv-prepago div { font-size: 12px; font-weight: 700; color: var(--cv-ink); }

/* ---------- ACCIONES RÁPIDAS ---------- */
.cv-acc__stack { display: flex; flex-direction: column; gap: var(--space-3); }
.cv-acc__btn {
  width: 100%; border: 1px solid var(--cv-line); cursor: pointer; background: var(--cv-card);
  border-radius: 14px; padding: var(--space-4); display: flex; align-items: center; gap: 12px;
  box-shadow: var(--cv-sh-sm); font-family: var(--cv-nun); text-align: left;
}
.cv-acc__btn .cv-ic { font-size: 22px; }
.cv-acc__btn .cv-acc__ic--cal { color: var(--cv-blue); }
.cv-acc__btn .cv-acc__ic--rec { color: var(--cv-purple); }
.cv-acc__btn span.cv-acc__txt { font-size: 13.5px; font-weight: 800; color: var(--cv-ink); }
.cv-acc__btn .cv-acc__chev { margin-left: auto; color: var(--cv-muted); transition: transform .2s ease; }
.cv-acc__btn[aria-expanded="true"] .cv-acc__chev { transform: rotate(180deg); }

/* Panel de calendario (reusa el JS existente; solo restyle bajo .cv) */
.cv .panelCalendario {
  max-width: none; margin: 11px 0 0; padding: 15px; border-radius: 14px;
  background: var(--cv-card); border: 1px solid var(--cv-hair); box-shadow: var(--cv-sh);
  text-align: left; color: var(--cv-ink);
}
.cv .panelCalendario__titulo { font-size: 13px; font-weight: 800; margin: 0 0 11px; color: var(--cv-ink); }
.cv .panelCalendario__opciones label,
.cv #panelCalendario__opciones label {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer;
  color: #131319 !important; border: 1px solid var(--cv-line); background: var(--cv-page);
  border-radius: 11px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700;
}
.cv .panelCalendario__acciones { display: flex; gap: 9px; margin-top: 5px; }
.cv .panelCalendario__acciones .cv-btn { flex: 1; }
.cv .panelCalendario__nota { font-size: 11px; color: var(--cv-muted); margin: 10px 0 0; }

/* ---------- Recupera tu confirmación: panel inline (ya no modal full-screen) ---------- */
#boxConfirmacion.rc-inline {
  position: static !important; inset: auto !important;
  width: 100% !important; height: auto !important; min-height: 0 !important;
  max-width: none !important; margin: 11px 0 0 !important; z-index: auto !important;
  background: var(--cv-card) !important; border: 1px solid var(--cv-hair);
  border-radius: 16px; box-shadow: var(--cv-sh); animation: none !important;
  display: none; overflow: hidden;
}
#boxConfirmacion.rc-inline .contenedorColumnas { max-width: none !important; padding: 16px !important; }
#boxConfirmacion.rc-inline .btnCerrarVentanas { top: 12px; right: 12px; }

/* ---------- COMPARTIR ---------- */
.cv-compartir { padding: 15px; }
.cv-compartir__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cv-compartir__head .cv-ic { font-size: 18px; color: var(--cv-t2); }
.cv-compartir__head span { font-size: 13px; font-weight: 800; }
.cv-share { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cv .cv-share__btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--cv-nun); }
.cv-share__ic { width: 46px; height: 46px; border-radius: 99px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 19px; flex: none; }
.cv-share__ic--rect { width: 100%; border-radius: 14px; }
.cv-share__ic svg { display: block; }
.cv-share__ic .cv-ic { line-height: 1; }                         /* centra verticalmente (correo) */
.cv-share__ic--rect .cv-ic { font-size: 26px; }                  /* ícono de enlace más grande */
.cv-share__ic svg { width: 30px; height: 30px; }                 /* WhatsApp/SMS más grandes */
.cv-share__img { width: 52px; height: 52px; display: block; flex: none; filter: drop-shadow(0 4px 9px rgba(19, 19, 25, .18)); }
.cv-share__lbl { font-size: 10.5px; font-weight: 700; color: var(--cv-t2); text-align: center; line-height: 1.2; }
/* Etiquetas de una sola línea → todos los botones misma altura, íconos alineados. */
.cv .cv-share { align-items: flex-start; }
.cv .cv-share__lbl { white-space: nowrap; }

/* ---------- CONVOCATORIA ---------- */
.cv-conv { position: relative; padding: var(--space-5); }
.cv-conv__body { max-height: none; overflow: hidden; }
.cv-conv__body.is-collapsed { max-height: 220px; }
.cv-conv__fade { position: absolute; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--cv-card)); pointer-events: none; }
.cv-conv__toggle {
  margin-top: var(--space-4); width: 100%; border: 1px solid var(--cv-line); cursor: pointer;
  background: var(--cv-page); color: var(--cv-green-press); font-family: var(--cv-nun);
  font-weight: 800; font-size: 13px; padding: 11px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cv-conv__toggle .cv-ic { font-size: 18px; }
/* la convocatoria viene de Quill: legibilidad editorial */
.cv-conv__body.ql-editor { padding: 0; font-family: var(--cv-nun); color: var(--cv-t2); }
.cv-conv__body.ql-editor h1, .cv-conv__body.ql-editor h2, .cv-conv__body.ql-editor h3 { color: var(--cv-ink); }
.cv-conv__body.ql-editor img { max-width: 100%; height: auto; border-radius: 10px; }
/* El HTML de la convocatoria trae sus propias tablas (barras laterales de color,
   precios, categorías) con anchos y colores INLINE. Las reglas globales de
   componentes.css (`table{width:100%}` y `tbody td{padding:12px 16px;border-bottom}`)
   se filtran a este HTML arbitrario y lo deforman: con table-layout auto la barra
   de 4px se engorda y se meten padding/bordes ajenos. Respetar el layout inline
   dentro del contenedor: fixed honra el width:4px de las barras; sin padding/border. */
.cv-conv__body.ql-editor table { table-layout: fixed; }
.cv-conv__body.ql-editor td { padding: 0; border: 0; }

/* ---------- ORGANIZADOR ---------- */
.cv-org {
  margin: var(--space-6) var(--space-4) 0; background: var(--cv-ink); border-radius: 16px; padding: var(--space-5);
  display: flex; align-items: center; gap: 13px;
}
.cv-org__logo { width: 48px; height: 48px; border-radius: 99px; object-fit: contain; background: #fff; flex: none; border: 2px solid var(--cv-green); }
.cv-org__meta { min-width: 0; flex: 1; }
.cv-org__over { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--cv-muted); }
.cv-org__name { font-size: 15px; font-weight: 800; color: #fff; }
.cv-org__sub { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.cv-org__pb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cv-org__pb img { height: 28px; width: auto; display: block; }

/* ---------- BARRA FIJA (móvil) ---------- */
.cv-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--cv-ink); display: flex; align-items: center; gap: var(--space-3);
}
.cv-sticky__block { flex: none; }
.cv-sticky__block--sep { padding-left: var(--space-3); border-left: 1px solid rgba(255, 255, 255, .14); }
.cv-sticky__lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cv-muted); }
.cv-sticky__val { font-size: 20px; font-weight: 800; line-height: 1; color: #fff; }
.cv-sticky__val--warn { color: var(--cv-yellow); }
.cv-sticky .cv-btn { margin-left: auto; flex: none; padding: 13px 20px; font-size: 14px; border-radius: 12px; }

/* ---------- INSCRIPCIONES CERRADAS ----------
   Sustituye a los botones de inscripción cuando el evento ya no admite registros
   (interruptor del organizador o plazo vencido). Sin la barra fija el hueco que
   `.cv` reserva para ella sobra, y `cv--sinBarra` lo recupera. */
.cv--sinBarra { padding-bottom: 40px; }
.cv-cerrado {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--cv-page); border: 1px solid var(--cv-line); color: var(--cv-t2);
}
.cv-cerrado .cv-ic { flex: none; font-size: 22px; color: var(--cv-red); }
.cv-cerrado strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--cv-ink); }
/* `div span` a propósito: `.cv-cerrado span` también alcanzaba al ícono
   (`<span class="cv-ic">lock</span>`) y le cambiaba el trazo del Material Symbol. */
.cv-cerrado div span { font-size: 12.5px; font-weight: 600; }
/* SOLO CÓDIGOS DE PREPAGO — la venta en línea cerró pero los talonarios ya
   vendidos se siguen canjeando. No es el cartel muerto de arriba: el aviso
   explica por qué no hay botón de compra y debajo va la entrada que sí queda.
   Naranja (no rojo): "cerrado a medias" no es lo mismo que "cerrado". */
.cv-soloCdgo { display: flex; flex-direction: column; gap: 10px; }
.cv-soloCdgo .cv-cerrado { background: var(--cv-orange-soft); border-color: transparent; }
.cv-soloCdgo .cv-cerrado .cv-ic { color: var(--cv-orange); }
/* Texto OSCURO sobre el naranja, como hace `--open` sobre el verde: blanco sobre
   #FF7639 da ~2.6:1 y esta insignia es de 10px (muy por debajo del 4.5:1 de AA). */
.cv-badge--codigos { background: var(--cv-orange); color: var(--cv-ink); }
.cv-dist__cerrado {
  text-align: center; padding: 11px 14px; border-radius: 12px;
  background: var(--cv-page); border: 1px dashed var(--cv-line);
  font-size: 13px; font-weight: 700; color: var(--cv-t2);
}

/* ---------- Tarjeta de inscripción (aside, solo desktop) ---------- */
.cv-inscard { background: var(--cv-card); border: 1px solid var(--cv-hair); border-radius: 18px; box-shadow: var(--cv-sh); padding: var(--space-6); }
.cv-inscard__top { display: flex; align-items: flex-end; justify-content: space-between; }
.cv-inscard__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cv-muted); }
.cv-inscard__price { font-size: 40px; font-weight: 800; line-height: .95; }
.cv-inscard__price span { font-family: var(--cv-nun); font-size: 14px; font-weight: 700; color: var(--cv-muted); }
.cv-inscard__close { font-size: 30px; font-weight: 800; line-height: 1; color: var(--cv-red); }
.cv-inscard .cv-btn--primary { font-size: 17px; padding: 16px; }

/* ---------- HERO DESKTOP (inmersivo full-bleed) — solo ≥960px ---------- */
.cv-heroD { display: none; }
.cv-heroD { position: relative; min-height: 460px; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; }
/* capa de imagen: sobresale 12% arriba y abajo para tener recorrido de parallax */
.cv-heroD::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0;
  background-image: var(--cv-portada); background-size: cover; background-position: center 30%;
}
/* capa de degradado: queda quieta, el parallax no la arrastra */
.cv-heroD::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 14, .30) 0%, rgba(10, 10, 14, .30) 40%, rgba(12, 12, 16, .82) 100%);
}
.cv-heroD__bar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1240px; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; }
.cv-heroD__org { display: flex; align-items: center; gap: 11px; }
.cv-heroD__orglogo { width: 44px; height: 44px; border-radius: 12px; background: #fff; object-fit: contain; flex: none; }
.cv-heroD__orgname { font-size: 14px; font-weight: 800; }
.cv-heroD__orgsub { font-size: 11px; color: rgba(255, 255, 255, .72); font-weight: 600; }
.cv-heroD__social { display: flex; gap: 10px; }
.cv-heroD__social a { width: 38px; height: 38px; border-radius: 99px; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cv-heroD__social a img { width: 19px; height: 19px; }
.cv-heroD__inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px 44px; position: relative; z-index: 2; }
.cv-heroD__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-pill--glass { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(4px); }
.cv .cv-heroD__title { margin: 16px 0 0; font-weight: 900; font-size: 60px; line-height: .96; letter-spacing: -.025em; color: #fff; }
.cv-heroD__meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; font-size: 16px; font-weight: 700; color: #fff; }
.cv-heroD__meta .cv-meta__item { color: #fff; }
.cv-heroD__meta .cv-meta__item .cv-ic { color: var(--cv-green); font-size: 21px; }

/* ---------- Cronómetro dentro de la tarjeta de inscripción (desktop) ---------- */
.cv-inscard__count { display: flex; gap: 8px; margin-top: 16px; }
.cv-inscard__cell { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--cv-page); border-radius: 12px; padding: 10px 4px; }
.cv-inscard__cell .num { font-size: 24px; font-weight: 800; line-height: 1; display: block; }
.cv-inscard__cell small { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-muted); }

/* ---------- MÓVIL: columna única con el orden del mockup móvil ---------- */
.cv-body { display: flex; flex-direction: column; }
.cv-main, .cv-aside { display: contents; } /* aplanan para poder reordenar por 'order' */
.cv-inscard { display: none; }             /* la tarjeta de inscripción es solo desktop */
.cv-o1 { order: 1; }
.cv-o2 { order: 2; }
.cv-o3 { order: 3; } /* Acciones rápidas (calendario/recupera/compartir) tras distancias */
.cv-o4 { order: 4; }
.cv-o5 { order: 5; }

/* ---------- DESKTOP: 2 columnas + aside sticky (como el mockup PC) ---------- */
@media (min-width: 960px) {
  .cv-hero { display: none; }      /* oculta el hero Tarjeta (móvil) */
  .cv-heroD { display: flex; }     /* muestra el hero inmersivo (PC) */
  .cv-body {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px;
    align-items: start; max-width: 1120px; margin: 0 auto; padding: 12px 24px 0;
  }
  .cv-main, .cv-aside { display: block; }
  .cv-main { grid-column: 1; min-width: 0; }
  .cv-main > * { order: 0; }               /* en desktop el orden lo da el DOM/grid */
  .cv-aside { grid-column: 2; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
  .cv-inscard { display: block; }
  .cv-sec { padding: 0; margin-bottom: var(--space-8); }
  .cv-conv { padding: var(--space-6); }
  .cv-aside .cv-sec { margin-bottom: 0; }
  .cv .cv-sec__head { margin-bottom: 14px; }
  .cv .cv-sec__head h2 { font-size: 20px; }
  .cv .cv-sec__head .cv-ic { font-size: 22px; }
  /* Datos del evento en PC: 3 columnas × 2 renglones, sin líneas divisorias */
  .cv .cv-datosCard { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px; }
  .cv-datosCard .cv-datos__row { padding: var(--space-4); }
  /* Distancias en PC: grid de 2 columnas */
  .cv .cv-distCard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .cv-distCard .cv-dist__row { padding: var(--space-4); gap: 7px; }
  .cv-distCard .cv-dist__name { font-size: 26px; }
  .cv-distCard .cv-dist__price { font-size: 28px; }
  .cv-distCard .cv-dist__serv { font-size: 10.5px; }
  .cv-distCard .cv-dist__cta { font-size: 14.5px; padding: 12px; }
  .cv-distCard .cv-dist__urg { font-size: 12px; }
  /* Datos del evento (PC) — tamaños del handoff */
  .cv-datosCard .cv-datos__ic { width: 38px; height: 38px; }
  .cv-datosCard .cv-datos__ic .cv-ic { font-size: 21px; }
  .cv-datosCard .cv-datos__label { font-size: 11px; }
  .cv-datosCard .cv-datos__val { font-size: 14.5px; }
  /* Acciones rápidas (PC) */
  .cv-acc__btn span.cv-acc__txt { font-size: 14px; }
  .cv-acc__btn .cv-ic { font-size: 22px; }
  /* Compartir (PC) */
  .cv-compartir__head span { font-size: 14px; }
  .cv-share__ic { width: 48px; height: 48px; font-size: 20px; }
  .cv-share__lbl { font-size: 11px; }
  .cv-org { margin: 0; max-width: none; padding: var(--space-6); }
  .cv-sticky { display: none; }            /* en desktop manda la tarjeta sticky */
  .cv { padding-bottom: 40px; }
}

/* ---------- PARALLAX del banner (CSS puro, scroll-driven animations) ----------
   La capa de imagen se desplaza más lento que la página: da sensación de que el
   banner está detrás y la convocatoria flota encima. Solo la imagen se mueve;
   el degradado (::after) y los textos quedan quietos.
   Sin soporte del navegador o con "reducir movimiento", el banner queda estático.

   OJO — por qué `scroll(root block)` y NO `view()` ni `view-timeline-name`:
   ambas variantes de view() miden al sujeto contra su contenedor de scroll MÁS
   CERCANO, y en este sitio `principal.css` tiene `body { overflow-x: hidden }`, lo
   que obliga a `overflow-y: auto` → el body entero ES un contenedor de scroll, y no
   scrollea (scrollea el viewport). Resultado: el reloj se congelaba (medido en Chrome
   150 vía CDP: `timeline.currentTime` fijo en 92%) y la imagen no se movía.
   Ese `overflow-x: hidden` del body NO se puede cambiar a `clip`: `hidden` crea un
   contexto de formato que contiene los floats del sitio y `clip` no, así que con clip
   la página colapsa de 5649px a 1923px de alto (medido en vivo).
   `scroll(root block)` nombra explícitamente el scroller raíz y se salta el problema.
   Como ambos banners empiezan en el tope de la página (top=0, verificado en vivo), el
   rango va de 0 al alto del banner: mientras el banner cruza la pantalla.
   Si cambia el alto de un banner, ajustar su `animation-range` a ese mismo alto. */
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes cvParallax {
      from { transform: translateY(-12%); }
      to   { transform: translateY(12%); }
    }
    .cv-hero__banner::before,
    .cv-heroD::before {
      animation: cvParallax linear both;
      animation-timeline: scroll(root block);
    }
    .cv-hero__banner::before { animation-range: 0 240px; } /* = height del banner móvil */
    .cv-heroD::before        { animation-range: 0 460px; } /* = min-height del hero PC */
  }
}