/* ============================================================
     Academia Vesalius — CSS del tema hijo.
     SOLO efectos que Elementor no puede producir con controles nativos.
     Cada bloque está documentado en NOTAS.md. Los valores provienen
     del design-tokens.md (React aprobado).
     ============================================================ */

/* 1. Caja de resaltado dentro de títulos (.mark del React).
     Se usa como HTML inline dentro de widgets Heading. */
.ves-mark {
   display: inline-block;
   background: linear-gradient(90deg, #5bd9e4 0%, #0452b0 100%);
   color: #fff;
   text-shadow: 0 0 3px rgba(1, 28, 80, 0.4);
   padding: 0 0.3em;
   border-radius: 8px;
   white-space: nowrap;
}
.ves-mark--turq { background: linear-gradient(90deg, #0452b0 0%, #5bd9e4 100%); }
.ves-mark--gold { background: #ffc64a; color: #4a2c00; text-shadow: none; }
@media (max-width: 620px) { .ves-mark { white-space: normal; } }

/* 2. Texto dorado con contorno (1ª línea del hero y numerales de
     "¿Por qué Vesalius?"): background-clip + text-stroke, sin control nativo. */
.ves-gold-line {
   background: linear-gradient(90deg, #e9a100 0%, #f7d239 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-stroke: 1.5px #6d1119;
   paint-order: stroke fill;
   display: inline-block;
}

/* 3. Palabra resaltada en color dentro de párrafos (.hl del React). */
.ves-hl { color: #0dc1e2; font-weight: 700; }
.ves-seccion-oscura .ves-hl { color: #69f9fb; }

/* 4. Ráfaga cónica de los pósters de ciclo (repeating-conic-gradient). */
.ves-poster { position: relative; overflow: hidden; }
.ves-poster::before {
   content: '';
   position: absolute; left: 50%; top: 46%;
   width: 190%; aspect-ratio: 1; transform: translate(-50%, -50%);
   background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.085) 0deg 5deg, transparent 5deg 11deg);
   z-index: 0;
   transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
   pointer-events: none;
}
.ves-poster::after {
   content: '';
   position: absolute; inset: 0;
   background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.16), transparent 58%);
   z-index: 0;
   pointer-events: none;
}
.ves-poster:hover::before { transform: translate(-50%, -50%) rotate(22deg) scale(1.08); }
.ves-poster > * { position: relative; z-index: 1; }

/* 5. Botón flotante de WhatsApp con doble onda expansiva. */
.ves-fab {
   position: fixed; right: 20px; bottom: 22px; z-index: 90;
   display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.ves-fab__red {
   width: 42px; height: 42px; border-radius: 999px;
   display: inline-flex; align-items: center; justify-content: center;
   color: #fff; box-shadow: 0 8px 20px rgba(1, 28, 80, 0.26);
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ves-fab__red:hover { transform: scale(1.22) translateX(-2px); color: #fff; }
.ves-fab__red svg { width: 20px; height: 20px; }
.ves-fab__wa {
   position: relative; z-index: 1;
   width: 62px; height: 62px; border-radius: 999px;
   display: inline-flex; align-items: center; justify-content: center;
   background: #25d366; color: #fff;
   box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
   transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.ves-fab__wa:hover { transform: scale(1.22); box-shadow: 0 18px 40px rgba(37, 211, 102, 0.6); color: #fff; }
.ves-fab__wa svg { width: 30px; height: 30px; }
.ves-fab__wa::before,
.ves-fab__wa::after {
   content: '';
   position: absolute; inset: 0; z-index: -1;
   border-radius: 999px; background: #25d366;
   animation: vesWaPulso 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.ves-fab__wa::after { animation-delay: 1.3s; }
.ves-fab__wa:hover::before, .ves-fab__wa:hover::after { animation-play-state: paused; opacity: 0; }
@keyframes vesWaPulso {
   0% { transform: scale(1); opacity: 0.55; }
   70% { transform: scale(1.9); opacity: 0; }
   100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 620px) {
   .ves-fab { right: 14px; bottom: 16px; gap: 0; }
   .ves-fab__red { display: none; }
   .ves-fab__wa { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
   .ves-fab__wa::before, .ves-fab__wa::after { animation: none; opacity: 0; }
}

/* 6. Barra de progreso de lectura (fija arriba, la mueve vesalius.js). */
.ves-progress {
   position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
   width: 0;
   background: linear-gradient(90deg, #5bd9e4, #0452b0);
   transition: width 0.1s linear;
   pointer-events: none;
}

/* 7. Listas y chips generados por shortcodes (lista_acf / chips_acf). */
.ves-lista-check { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.ves-lista-check li {
   display: flex; gap: 10px; font-size: 0.9rem; color: #4b5a75;
   font-family: 'Open Sans', sans-serif; line-height: 1.5;
}
.ves-lista-check li::before {
   content: '';
   flex: none; width: 17px; height: 17px; margin-top: 3px;
   background: no-repeat center / contain
      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315aedf' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.ves-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ves-chip-ghost {
   display: inline-flex; align-items: center;
   font-family: 'Poppins', sans-serif; font-weight: 700;
   font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
   padding: 5px 12px; border-radius: 999px;
   color: #0dc1e2; border: 1.6px solid #15aedf; background: transparent;
   white-space: nowrap;
}

/* 8. Polaroids alternos rotados dentro de un Loop Carousel/Grid
     (nth-child no existe como control nativo por ítem del loop). */
.ves-polaroids .e-loop-item:nth-child(odd) .ves-polaroid-frame { transform: rotate(-1.6deg); }
.ves-polaroids .e-loop-item:nth-child(even) .ves-polaroid-frame { transform: rotate(1.4deg); }
.ves-polaroid-frame { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease; }
.ves-polaroid-frame:hover { transform: rotate(0deg) translateY(-6px) !important; }

/* 9. Reproductor de video bajo demanda (testimonios) y de TikTok:
     el botón de play cubre el póster; al pulsar, vesalius.js reproduce/inserta. */
.ves-video { position: relative; border-radius: 20px; overflow: hidden; background: #01143b; }
.ves-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.ves-video__play {
   position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; border: 0;
   background: linear-gradient(180deg, rgba(1, 28, 80, 0.04), rgba(1, 28, 80, 0.44));
   transition: background 0.25s ease; width: 100%;
}
.ves-video__play:hover { background: linear-gradient(180deg, rgba(1, 28, 80, 0.14), rgba(1, 28, 80, 0.54)); }
.ves-video__play span {
   width: 66px; height: 66px; border-radius: 999px;
   background: #15aedf; color: #fff;
   display: grid; place-items: center;
   box-shadow: 0 10px 0 rgba(1, 67, 176, 0.45);
   transition: transform 0.25s ease;
}
.ves-video__play:hover span { transform: scale(1.08); }
.ves-video__play svg { width: 26px; height: 26px; }
.ves-video.is-playing .ves-video__play { display: none; }

.ves-tiktok { position: relative; border-radius: 20px; overflow: hidden; background: #011c50; aspect-ratio: 9 / 16; }
.ves-tiktok img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; }
.ves-tiktok:hover img { transform: scale(1.06); }
.ves-tiktok iframe { width: 100%; height: 100%; border: 0; display: block; position: absolute; inset: 0; }

/* 10. La sombra "3D" de los botones crece al hover (Elementor permite sombra
     por estado, pero no anima el salto de -3px con el crecimiento de sombra
     en el mismo control). Se aplica sobre la clase del botón del React. */
.ves-btn-3d .elementor-button,
a.ves-btn-3d { transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.22s ease; }
.ves-btn-3d .elementor-button:hover,
a.ves-btn-3d:hover { transform: translateY(-3px); }

/* ============================================================
     COMPONENTES PHP (shortcodes) — estilos portados 1:1 del React.
     ============================================================ */

/* ---------- Botones (los usan los componentes PHP) ---------- */
.ves-btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 9px;
   font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.95rem;
   padding: 13px 28px; border-radius: 999px; border: 0; cursor: pointer;
   white-space: nowrap; text-decoration: none;
   transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.22s ease, color 0.22s ease;
}
.ves-btn svg { flex: none; }
a.ves-btn.ves-btn--primary, .ves-btn.ves-btn--primary { background: #15aedf; color: #fff; box-shadow: 0 8px 0 rgba(1, 67, 176, 0.28); }
a.ves-btn.ves-btn--primary:hover, .ves-btn.ves-btn--primary:hover { background: #0dc1e2; color: #fff; transform: translateY(-3px); box-shadow: 0 11px 0 rgba(1, 67, 176, 0.28); }
a.ves-btn.ves-btn--outline-light, .ves-btn.ves-btn--outline-light { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.5); }
a.ves-btn.ves-btn--outline-light:hover, .ves-btn.ves-btn--outline-light:hover { border-color: #69f9fb; color: #69f9fb; transform: translateY(-3px); }
.ves-btn--block { width: 100%; }

/* ---------- Chips de componentes ---------- */
.ves-chip {
   display: inline-flex; align-items: center; gap: 6px;
   font-family: 'Poppins', sans-serif; font-weight: 700;
   font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
   padding: 5px 12px; border-radius: 999px;
   background: #15aedf; color: #fff; white-space: nowrap;
}
.ves-chip--dark { background: #011c50; }
.ves-chip--white { background: #fff; color: #013591; }
.ves-chip--gold { background: #ffc64a; color: #4a2c00; }

/* ---------- FORMULARIO ---------- */
.ves-form { display: grid; gap: 15px; font-family: 'Open Sans', sans-serif; }
.ves-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ves-field { display: grid; gap: 6px; }
.ves-field label { font-family: 'Poppins', sans-serif; font-size: 0.78rem; font-weight: 700; color: #013591; }
.ves-field input, .ves-field select, .ves-field textarea {
   border: 1.6px solid #dde6f4; border-radius: 12px;
   padding: 12px 15px; font-size: 0.95rem; color: #0d1b34; background: #fff;
   font-family: inherit; width: 100%; max-width: 100%; min-width: 0;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ves-field input:focus, .ves-field select:focus, .ves-field textarea:focus {
   outline: none; border-color: #15aedf; box-shadow: 0 0 0 4px rgba(21, 174, 223, 0.15);
}
.ves-field textarea { resize: vertical; min-height: 118px; }
.ves-form__note { font-size: 0.8rem; color: #7b89a2; margin: 0; }
.ves-form__ok { background: rgba(21, 174, 223, 0.12); border: 1.6px solid #15aedf; color: #0b6f92; border-radius: 12px; padding: 13px 16px; font-size: 0.9rem; }
.ves-form--dark label { color: #69f9fb; }
.ves-form--dark input, .ves-form--dark select, .ves-form--dark textarea {
   background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); color: #fff;
}
.ves-form--dark input::placeholder, .ves-form--dark textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.ves-form--dark .ves-form__note { color: rgba(255, 255, 255, 0.62); }
@media (max-width: 620px) { .ves-form__row { grid-template-columns: 1fr; } }

/* ---------- PÓSTER DE CICLO ---------- */
.ves-poster-card {
    display: block; position: relative; aspect-ratio: 1 / 1;
    border-radius: 30px; overflow: hidden; text-decoration: none;
    border: 6px solid #011c50;
    box-shadow: 0 14px 34px rgba(1, 28, 80, 0.16);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ves-poster-card:hover { transform: translateY(-7px); box-shadow: 0 26px 54px rgba(1, 28, 80, 0.26); }
.ves-poster__top {
   position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
   display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ves-poster__brand {
   font-family: 'Poppins', sans-serif; font-weight: 700;
   font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
   color: rgba(255, 255, 255, 0.85);
}
.ves-poster__body {
   position: absolute; inset: 0; z-index: 2;
   display: grid; place-items: center; text-align: center; padding: 46px 20px 68px;
}
.ves-poster__body h3 {
   font-family: 'Lemon Milk', 'Poppins', sans-serif; font-weight: 700;
   color: #fff; text-transform: uppercase; margin: 0;
   font-size: clamp(1.6rem, 3.1vw, 2.35rem);
   line-height: 0.95; letter-spacing: -0.04em;
   text-shadow: 0 4px 0 rgba(1, 28, 80, 0.55), 0 10px 26px rgba(0, 0, 0, 0.35);
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ves-poster-card:hover .ves-poster__body h3 { transform: scale(1.06); }
.ves-poster__body .sub {
   display: inline-block; margin-top: 14px;
   background: #69f9fb; color: #02224f;
   font-family: 'Poppins', sans-serif; font-weight: 800;
   font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
   padding: 7px 16px; border-radius: 8px;
   box-shadow: 0 5px 0 rgba(1, 28, 80, 0.4);
}
.ves-poster__foot {
   position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
   background: rgba(1, 28, 80, 0.66);
   backdrop-filter: blur(4px);
   display: flex; align-items: center; justify-content: center; gap: 10px;
   padding: 11px 14px;
   border-top: 2px solid rgba(105, 249, 251, 0.35);
   transition: background 0.3s ease;
}
.ves-poster-card:hover .ves-poster__foot { background: rgba(1, 28, 80, 0.85); }
.ves-poster__foot img { width: 26px; }
.ves-poster__foot span {
   font-family: 'Poppins', sans-serif; font-weight: 800;
   font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.ves-ciclo__meta {
   display: flex; flex-wrap: wrap; gap: 6px 14px;
   justify-content: center; margin-top: 15px;
   font-size: 0.82rem; color: #4b5a75; font-family: 'Open Sans', sans-serif;
}
.ves-ciclo__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ves-ciclo__meta svg { color: #15aedf; }
.ves-seccion-oscura .ves-ciclo__meta { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 620px) { .ves-poster-card { border-width: 4px; border-radius: 22px; } .ves-poster__body h3 { font-size: 1.5rem; } }

/* ---------- POLAROID ---------- */
.ves-polaroid { text-align: center; padding: 12px 6px 0; }
.ves-polaroid-frame {
   background: #fff; padding: 12px 12px 14px; border-radius: 6px;
   box-shadow: 0 14px 34px rgba(1, 28, 80, 0.17);
   position: relative;
}
.ves-polaroid-frame:hover { box-shadow: 0 24px 50px rgba(1, 28, 80, 0.24); }
.ves-polaroid-frame img { border-radius: 3px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ves-polaroid-frame:hover img { transform: scale(1.05); }
.ves-polaroid__uni {
   position: absolute; top: -12px; left: 50%;
   transform: translateX(-50%) rotate(-2deg);
   z-index: 2; box-shadow: 0 6px 14px rgba(1, 28, 80, 0.25);
}
.ves-polaroid__name {
   font-family: 'Poppins', sans-serif; font-weight: 700;
   font-size: 0.95rem; color: #011c50; margin: 16px 0 0; line-height: 1.25;
}
.ves-polaroid__carrera {
   display: block; margin-top: 9px;
   background: #15aedf; color: #fff;
   font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.78rem;
   padding: 6px 10px; border-radius: 7px;
   transition: background 0.28s ease, transform 0.28s ease;
}
.ves-polaroid:hover .ves-polaroid__carrera { background: #0dc1e2; transform: translateY(-2px); }
.ves-polaroid__proceso { display: block; font-size: 0.72rem; color: #7b89a2; margin-top: 8px; font-family: 'Open Sans', sans-serif; }
.ves-seccion-oscura .ves-polaroid__name { color: #fff; }
.ves-seccion-oscura .ves-polaroid__proceso { color: rgba(255, 255, 255, 0.6); }

/* ---------- TESTIMONIO ---------- */
.ves-testimonio { border-radius: 20px; overflow: hidden; background: #01143b; box-shadow: 0 18px 44px rgba(1, 28, 80, 0.13); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.ves-testimonio:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(1, 28, 80, 0.28); }
.ves-testimonio .ves-video { border-radius: 0; }
.ves-testimonio__foot { padding: 14px 18px; color: #fff; }
.ves-testimonio__foot strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.94rem; }
.ves-testimonio__foot span { color: #69f9fb; font-size: 0.8rem; font-family: 'Open Sans', sans-serif; }

/* ---------- ACORDEÓN DE SEGMENTOS ---------- */
.ves-acc { border: 1.6px solid #dde6f4; border-radius: 20px; overflow: hidden; background: #fff; }
.ves-acc + .ves-acc, .e-loop-item + .e-loop-item .ves-acc { margin-top: 0; }
.ves-acc.is-open { border-color: #15aedf; }
.ves-acc__head {
   width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
   padding: 17px 22px; text-align: left; border: 0; background: none; cursor: pointer;
   font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; color: #011c50;
}
.ves-acc__head:hover { background: #f7fafd; }
.ves-acc__head svg { flex: none; color: #15aedf; transition: transform 0.3s ease; }
.ves-acc.is-open .ves-acc__head svg { transform: rotate(180deg); }
.ves-acc__body { display: none; padding: 0 22px 22px; color: #4b5a75; font-size: 0.94rem; font-family: 'Open Sans', sans-serif; }
.ves-acc.is-open .ves-acc__body { display: block; }
.ves-acc__body ul { list-style: none; margin: 10px 0 0; padding: 0; }
.ves-acc__body li { display: flex; gap: 10px; padding: 5px 0; }
.ves-acc__body li::before { content: '▹'; color: #15aedf; font-weight: 700; }

/* ---------- PÍLDORAS 3D (18 cursos) ---------- */
.ves-pills { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.ves-pill {
   display: inline-flex; align-items: center;
   font-family: 'Poppins', sans-serif; font-weight: 700;
   font-size: 0.82rem; letter-spacing: 0.02em;
   padding: 9px 18px; border-radius: 999px;
   background: linear-gradient(160deg, #15aedf, #0dc1e2);
   color: #fff;
   box-shadow: 0 6px 0 rgba(1, 28, 80, 0.35);
}

/* ---------- TESELA Y TARJETA DE UNIVERSIDAD ---------- */
.ves-unilogo {
   background: #fff; border-radius: 20px;
   padding: 20px 12px 16px; text-align: center;
   box-shadow: 0 12px 28px rgba(1, 15, 52, 0.3);
   transition: transform 0.28s ease, box-shadow 0.28s ease;
   display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
   height: 100%;
}
.ves-unilogo:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(1, 15, 52, 0.4); }
.ves-unilogo img { height: 76px; width: auto; object-fit: contain; margin-bottom: 10px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ves-unilogo:hover img { transform: scale(1.12) rotate(-3deg); }
.ves-unilogo strong { font-family: 'Lemon Milk', 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: #013591; line-height: 1; }
.ves-unilogo span { font-size: 0.68rem; color: #7b89a2; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-family: 'Open Sans', sans-serif; }
.ves-unilogo--extra { background: #69f9fb; justify-content: center; text-decoration: none; }
.ves-unilogo--extra strong { color: #02224f; font-size: 1.15rem; }
.ves-unilogo--extra span { color: #05407a; }
@media (max-width: 620px) { .ves-unilogo { padding: 16px 10px 12px; } .ves-unilogo img { height: 58px; } }

.ves-unicard {
   border-radius: 20px; overflow: hidden; background: #fff;
   border: 1.6px solid #dde6f4; height: 100%;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.ves-unicard:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(1, 28, 80, 0.13); border-color: rgba(21, 174, 223, 0.55); }
.ves-unicard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ves-unicard:hover img { transform: scale(1.07); }
.ves-unicard__body { padding: 16px 16px 20px; text-align: center; }
.ves-unicard__body strong { display: block; font-family: 'Lemon Milk', 'Poppins', sans-serif; font-weight: 700; font-size: 1.35rem; color: #013591; }
.ves-unicard__body > span:not(.ves-chip) { display: block; font-size: 0.76rem; color: #7b89a2; margin-top: 4px; line-height: 1.35; font-family: 'Open Sans', sans-serif; }
.ves-unicard__body .ves-chip { margin-top: 12px; }
@media (max-width: 620px) { .ves-unicard img { aspect-ratio: 16 / 10; } }

/* ---------- TARJETA DE POST ---------- */
.ves-post { display: flex; flex-direction: column; height: 100%; font-family: 'Open Sans', sans-serif; }
.ves-post__media {
   position: relative; aspect-ratio: 16 / 10; display: block;
   border-radius: 20px; overflow: hidden;
   background: linear-gradient(140deg, #022a74 0%, #014cc1 60%, #15aedf 100%);
}
.ves-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; }
.ves-post__media:hover img { transform: scale(1.08); }
.ves-post__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1, 28, 80, 0.05), rgba(1, 28, 80, 0.55)); }
.ves-post__playmark {
   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
   width: 54px; height: 54px; border-radius: 999px;
   background: #15aedf; color: #fff;
   display: grid; place-items: center;
   box-shadow: 0 8px 0 rgba(1, 67, 176, 0.45);
   transition: transform 0.25s ease;
}
.ves-post__media:hover .ves-post__playmark { transform: translate(-50%, -50%) scale(1.1); }
.ves-post__chips { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; gap: 7px; flex-wrap: wrap; }
.ves-post__body { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ves-post__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ves-post__body h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.16rem; line-height: 1.24; margin: 0; letter-spacing: -0.025em; }
.ves-post__body h3 a { color: #011c50; text-decoration: none; }
.ves-post__body h3 a:hover { color: #014cc1; }
.ves-post__body p { color: #7b89a2; font-size: 0.9rem; flex: 1; margin: 0; }
.ves-post__date { font-size: 0.75rem; color: #7b89a2; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }
.ves-post__mas { display: inline-flex; align-items: center; gap: 7px; color: #0dc1e2; font-weight: 700; font-size: 0.88rem; text-decoration: none; }

/* ---------- GRILLA DE ESCUDOS ---------- */
.ves-unilogos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .ves-unilogos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- PILA DE PÓSTERS INCLINADOS (.fanned del React) ---------- */
.ves-fanned { position: relative; height: 380px; }
.ves-fanned .elementor-widget-image { position: absolute; width: 47%; }
.ves-fanned .elementor-widget-image img {
   border-radius: 14px; border: 4px solid #fff;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32); width: 100%;
   transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.ves-fanned .elementor-widget-image:nth-child(1) { left: 0; top: 10px; transform: rotate(-7deg); }
.ves-fanned .elementor-widget-image:nth-child(2) { left: 24%; top: 42px; transform: rotate(-1deg); z-index: 2; }
.ves-fanned .elementor-widget-image:nth-child(3) { left: 49%; top: 76px; transform: rotate(6deg); z-index: 3; }
.ves-fanned .elementor-widget-image:hover { z-index: 5; }
.ves-fanned .elementor-widget-image:hover img { transform: translateY(-16px) scale(1.05); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.45); }
@media (max-width: 900px) { .ves-fanned { height: 330px; } }
@media (max-width: 620px) {
   .ves-fanned { height: 272px; }
   .ves-fanned .elementor-widget-image { width: 46%; }
   .ves-fanned .elementor-widget-image img { border-width: 3px; }
   .ves-fanned .elementor-widget-image:nth-child(1) { top: 0; }
   .ves-fanned .elementor-widget-image:nth-child(2) { top: 26px; }
   .ves-fanned .elementor-widget-image:nth-child(3) { top: 52px; }
}

/* ---------- Polaroids alternados también dentro del carrusel (swiper) ---------- */
.ves-polaroids .swiper-slide:nth-child(odd) .ves-polaroid-frame { transform: rotate(-1.6deg); }
.ves-polaroids .swiper-slide:nth-child(even) .ves-polaroid-frame { transform: rotate(1.4deg); }

/* El póster ocupa el ancho de su contenedor (CTA y columnas sueltas). */
.ves-ciclo { width: 100%; }

/* Póster dentro del CTA: máx. 320px pegado a la derecha (React .cta__poster). */
.ves-cta-poster .ves-ciclo { max-width: 320px; margin-left: auto; }
@media (max-width: 900px) { .ves-cta-poster .ves-ciclo { max-width: 300px; margin: 0 auto; } }

/* ============================================================
     Neutralización de los estilos globales de <button> del kit
     (.elementor-kit-N button) sobre los componentes PHP.
     ============================================================ */
.ves-video .ves-video__play {
   background: linear-gradient(180deg, rgba(1, 28, 80, 0.04), rgba(1, 28, 80, 0.44));
   border-radius: 0; padding: 0; border: 0; color: inherit;
}
.ves-video .ves-video__play:hover { background: linear-gradient(180deg, rgba(1, 28, 80, 0.14), rgba(1, 28, 80, 0.54)); }
.ves-acc .ves-acc__head {
   background: none; color: #011c50; border-radius: 0; border: 0;
   padding: 17px 22px;
   font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem;
}
.ves-acc .ves-acc__head:hover { background: #f7fafd; }
.ves-form button.ves-btn.ves-btn--primary { background: #15aedf; color: #fff; border-radius: 999px; padding: 13px 28px; }

/* ---------- DETALLE DE CICLO ---------- */
.ves-ciclo-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ves-ciclo-hero h1 {
   font-family: 'Lemon Milk', 'Poppins', sans-serif; font-weight: 700;
   font-size: clamp(2rem, 4.6vw, 3.2rem); text-transform: uppercase;
   color: #fff; margin: 16px 0 0; line-height: 1.14; letter-spacing: 0;
}
.ves-ciclo-hero p { color: rgba(255, 255, 255, 0.84); margin: 14px 0 0; font-size: 1.02rem; font-family: 'Open Sans', sans-serif; }
.ves-ciclo-hero__cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 26px; }

.ves-ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .ves-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.ves-ficha__item {
   background: #fff; border: 1.6px solid #dde6f4; border-radius: 20px;
   padding: 26px 20px; text-align: center;
   display: flex; flex-direction: column; align-items: center; gap: 4px;
   transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.ves-ficha__item:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(1, 28, 80, 0.13); border-color: rgba(21, 174, 223, 0.55); }
.ves-ficha__icon {
   width: 60px; height: 60px; border-radius: 18px; margin-bottom: 14px;
   display: grid; place-items: center;
   background: linear-gradient(150deg, #e7f7fd, #d3eefa);
   border: 1.6px solid #bfe6f6; color: #0dc1e2;
}
.ves-ficha__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: #7b89a2; font-family: 'Open Sans', sans-serif; }
.ves-ficha__item strong { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1rem; color: #011c50; margin-top: 4px; }

.ves-h2 {
   font-family: 'Lemon Milk', 'Poppins', sans-serif; font-weight: 700;
   font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: #011c50; margin: 0; line-height: 1.14; letter-spacing: 0;
}
.ves-h2--blanco { color: #fff; text-transform: uppercase; }
.ves-parrafo { color: #4b5a75; margin: 16px 0 0; font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.62; }
.ves-parrafo--claro { color: rgba(255, 255, 255, 0.8); }

.ves-aside { background: #fff; border: 1.6px solid #dde6f4; border-radius: 20px; padding: 28px; position: sticky; top: 100px; }
.ves-aside h3 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; color: #011c50; margin: 0; letter-spacing: -0.025em; }
@media (max-width: 620px) { .ves-aside { position: static; } }

a.ves-btn.ves-btn--outline-tk { background: transparent; color: #013591; border: 2px solid #15aedf; }
a.ves-btn.ves-btn--outline-tk:hover { background: #15aedf; color: #fff; transform: translateY(-3px); }

/* El grid de segmentos del temario: tarjetas apiladas con 12px entre sí. */
.ves-programa .elementor-loop-container { display: grid; gap: 12px; }

/* ---------- Prosa legal ---------- */
.ves-prosa { max-width: 76ch; }
.ves-prosa h2 {
   font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.32rem;
   text-transform: uppercase; color: #011c50; margin: 32px 0 12px; letter-spacing: -0.025em;
}
.ves-prosa p { margin-bottom: 14px; }

/* Play de TikTok: misma neutralización del botón global del kit. */
.ves-tiktok .ves-video__play {
   background: linear-gradient(180deg, rgba(1, 28, 80, 0.06), rgba(1, 28, 80, 0.5));
   border-radius: 0; padding: 0; border: 0; color: inherit;
   position: absolute; inset: 0; width: 100%;
}
.ves-tiktok .ves-video__play:hover { background: linear-gradient(180deg, rgba(1, 28, 80, 0.16), rgba(1, 28, 80, 0.6)); }
.ves-tiktok .ves-video__play span { width: 62px; height: 62px; }

/* ---------- Cifras en móvil: número a la izquierda, textos a la derecha ---------- */
@media (max-width: 620px) {
   .ves-stat {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      column-gap: 16px;
      text-align: left;
      padding: 18px 2px;
   }
   .ves-stat .elementor-widget-counter { grid-row: 1 / span 3; grid-column: 1; min-width: 108px; }
   .ves-stat .elementor-widget-heading, .ves-stat > .elementor-widget { grid-column: 2; }
   .ves-stat .elementor-widget-counter { grid-column: 1; }
   .ves-stat .elementor-heading-title { text-align: left !important; }
   .ves-stat + .ves-stat { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}
@media (max-width: 620px) {
   .ves-stat > .elementor-widget:last-child { justify-self: start; width: auto; }
}

/* Lista de segmentos del programa (shortcode ves_programa). */
.ves-programa-lista { display: grid; gap: 12px; }

/* ---------- Hero en carrusel anidado de Elementor ---------- */
/* Las tres líneas del titular se apilan (el heading nativo no separa líneas). */
.ves-titulo-hero .line { display: block; }
.ves-titulo-hero .line + .line { margin-top: 8px; }
/* Flechas y puntos con el estilo del React. */
.ves-hero-carrusel .e-n-carousel ~ .elementor-swiper-button,
.ves-hero-carrusel .elementor-swiper-button {
   width: 42px; height: 42px; border-radius: 999px;
   background: #fff; color: #013591;
   box-shadow: 0 3px 12px rgba(1, 28, 80, 0.07);
   display: flex; align-items: center; justify-content: center;
   font-size: 19px;
   transition: all 0.22s ease;
}
.ves-hero-carrusel .elementor-swiper-button:hover { background: #15aedf; color: #fff; }
.ves-hero-carrusel .swiper-pagination-bullet {
   width: 9px; height: 9px; background: rgba(255, 255, 255, 0.32); opacity: 1;
   border-radius: 999px; transition: all 0.3s ease;
}
.ves-hero-carrusel .swiper-pagination-bullet-active { width: 28px; background: #69f9fb; }
.ves-hero-carrusel .swiper-pagination { bottom: 16px; }
@media (max-width: 620px) { .ves-hero-carrusel .elementor-swiper-button { display: none; } }

/* Los flotantes en blanco: el color de enlace del kit les ganaba en especificidad. */
.ves-fab a.ves-fab__red, .ves-fab a.ves-fab__red:hover { color: #fff; }
.ves-fab a.ves-fab__wa, .ves-fab a.ves-fab__wa:hover { color: #fff; }


/* ========================================
     POPUP DE TIKTOK
======================================== */

.ves-popup {
      display: none;
      position: fixed;
/* 1. Obliga a que la fila o columna de Elementor que contiene las tarjetas estire sus elementos */
.elementor-element-editable, 
.elementor-widget-container,
.elementor-posts-container,
.elementor-grid {
    align-items: stretch !important;
}

/* 2. Convierte cada tarjeta en una caja flexible estirada al 100% de la altura */
article.ves-post {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* 3. El cuerpo de la tarjeta ocupa todo el espacio vertical disponible */
article.ves-post .ves-post__body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* 4. El párrafo de texto toma el espacio flexible libre del medio */
article.ves-post .ves-post__body p {
    flex-grow: 1 !important;
    margin-bottom: 16px !important;
}

/* 5. Empuja las letras celestes ("Ver video") al fondo absoluto de la tarjeta */
article.ves-post .ves-post__body .ves-post__mas {
    margin-top: auto !important;
    display: inline-block !important;
}