/* ═══ Vidriera visual de los cursos (prefijo cs-) ═══
   Capa compartida por las páginas de venta: videos en teléfonos, cinta,
   reel, muro de piezas, contadores, secciones plegables y CTA final con fondo
   en movimiento. Cada página define su paleta en --cs-a, --cs-b y --cs-c.
   Contrato del sitio: el CSS base es la composición terminada; el JS solo
   agrega .cs-in cuando el bloque entra en pantalla, nunca con movimiento reducido. */
:root {
  --cs-a: #00b8ff;
  --cs-b: #ff3d78;
  --cs-c: #ffc93c;
  --cs-ink: #0b0b14;
  --cs-grad: linear-gradient(120deg, var(--cs-a) 0%, var(--cs-b) 60%, var(--cs-c) 100%);
}
.cs-grad { background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs-sec { position: relative; padding: 5.5rem 0; overflow: hidden; }
.cs-sec.alt { background: var(--bg2); }
.cs-head { text-align: center; max-width: 760px; margin: 0 auto 2.8rem; }
.cs-kick { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-c); margin-bottom: .9rem; }
.cs-kick::before { content: ''; width: 22px; height: 2px; background: var(--cs-grad); border-radius: 2px; }
.cs-h2 { font-family: var(--font-head); font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 900; line-height: 1.04; letter-spacing: -.03em; margin: 0; }
.cs-sub { color: var(--text2); font-size: 1.02rem; line-height: 1.6; margin: 1rem auto 0; max-width: 560px; }

/* ── Botón con brillo ── */
.cs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.8rem; border-radius: 14px; font-weight: 900; font-size: 1rem; text-decoration: none; color: var(--cs-ink) !important; background: var(--cs-grad); box-shadow: 0 10px 34px color-mix(in srgb, var(--cs-b) 35%, transparent); transition: transform .2s, box-shadow .2s; isolation: isolate; overflow: hidden; border: 0; }
.cs-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); background-size: 220% 100%; animation: csShine 3s linear infinite; z-index: -1; mix-blend-mode: overlay; }
.cs-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 44px color-mix(in srgb, var(--cs-b) 50%, transparent); }
.cs-btn:active { transform: scale(.97); }
@keyframes csShine { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } }

/* ═══ HERO: fondo y escenario de teléfonos ═══ */
.cs-hero { isolation: isolate; }
.cs-aurora { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .5; }
.cs-aurora i { position: absolute; border-radius: 50%; }
.cs-aurora i:nth-child(1) { width: 520px; height: 520px; left: 55%; top: 4%; background: var(--cs-a); animation: csDrift 14s ease-in-out infinite; }
.cs-aurora i:nth-child(2) { width: 420px; height: 420px; left: 74%; top: 36%; background: var(--cs-b); opacity: .7; animation: csDrift 17s ease-in-out infinite reverse; }
.cs-aurora i:nth-child(3) { width: 360px; height: 360px; left: 2%; top: 50%; background: var(--cs-c); opacity: .35; animation: csDrift 19s ease-in-out infinite; }
@keyframes csDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,40px) scale(1.12); } }
.cs-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; padding: 7px; background: linear-gradient(150deg, #39445e, #0b1120 55%, #1a2236); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.cs-phone::before { content: ''; position: absolute; top: 14px; left: 50%; width: 30%; height: 15px; transform: translateX(-50%); border-radius: 999px; background: #05070d; z-index: 3; }
.cs-phone video, .cs-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: #000; }
.cs-ai { position: absolute; left: 16px; bottom: 18px; z-index: 3; font-size: .58rem; font-weight: 900; letter-spacing: .12em; color: var(--cs-ink); background: var(--cs-c); padding: .25rem .5rem; border-radius: 6px; }
.cs-stage { position: relative; height: 600px; }
.cs-stage .cs-phone { position: absolute; width: 228px; top: 50%; left: 50%; }
.cs-stage .p1 { transform: translate(-50%,-50%); z-index: 3; width: 262px; animation: csBob 6s ease-in-out infinite; }
.cs-stage .p2 { transform: translate(-128%,-44%) rotate(-9deg); z-index: 2; animation: csBob2 7s ease-in-out infinite; }
.cs-stage .p3 { transform: translate(28%,-40%) rotate(8deg); z-index: 2; animation: csBob3 7.5s ease-in-out infinite; }
@keyframes csBob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-53%); } }
@keyframes csBob2 { 0%,100% { transform: translate(-128%,-44%) rotate(-9deg); } 50% { transform: translate(-128%,-41%) rotate(-7deg); } }
@keyframes csBob3 { 0%,100% { transform: translate(28%,-40%) rotate(8deg); } 50% { transform: translate(28%,-43%) rotate(10deg); } }
.cs-vf { position: absolute; inset: 4% 2%; pointer-events: none; z-index: 4; }
.cs-vf i { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.7); }
.cs-vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.cs-vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.cs-vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cs-vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.cs-live { position: absolute; top: 2.4%; left: 6%; z-index: 5; display: inline-flex; align-items: center; gap: .45rem; font: 800 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; background: rgba(0,0,0,.55); padding: .4rem .65rem; border-radius: 8px; backdrop-filter: blur(6px); }
.cs-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: csBlink 1s steps(2) infinite; }
@keyframes csBlink { 50% { opacity: .15; } }
.cs-float { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 12px; background: rgba(10,15,28,.84); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); font-size: .76rem; font-weight: 800; color: var(--text); box-shadow: 0 12px 30px rgba(0,0,0,.35); white-space: nowrap; }
.cs-float > i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; color: var(--cs-ink); }
.cs-float small { display: block; font-size: .64rem; font-weight: 700; color: var(--muted); }
.cs-float.f1 { top: 34%; right: -3%; animation: csFloatY 5s ease-in-out infinite; }
.cs-float.f1 > i { background: var(--cs-c); }
.cs-float.f2 { bottom: 16%; left: -4%; animation: csFloatY 6s ease-in-out infinite .8s; }
.cs-float.f2 > i { background: var(--cs-a); }
.cs-float.f3 { bottom: 5%; right: 4%; animation: csFloatY 5.5s ease-in-out infinite 1.4s; }
.cs-float.f3 > i { background: var(--cs-b); color: #fff; }
@keyframes csFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cs-sticker { position: absolute; top: 3%; right: 16%; z-index: 7; background: var(--cs-c); color: var(--cs-ink); font-weight: 900; font-size: .78rem; line-height: 1.1; text-align: center; padding: .6rem; border-radius: 50%; width: 92px; height: 92px; display: grid; place-items: center; box-shadow: 0 10px 30px color-mix(in srgb, var(--cs-c) 35%, transparent); animation: csSpinSlow 18s linear infinite; }
@keyframes csSpinSlow { from { transform: rotate(10deg); } to { transform: rotate(370deg); } }
.cs-rot { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.35em; }
.cs-rot span { grid-area: 1 / 1; font-weight: 900; color: var(--cs-c); white-space: nowrap; transform: translateY(110%); opacity: 0; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s; }
.cs-rot span.on { transform: none; opacity: 1; }
.cs-rot span.off { transform: translateY(-110%); opacity: 0; }

/* ═══ Cinta ═══ */
.cs-tape { position: relative; background: var(--cs-grad); color: var(--cs-ink); transform: rotate(-1.2deg); margin: 1.2rem -2% 0; padding: .85rem 0; overflow: hidden; z-index: 3; box-shadow: 0 14px 40px color-mix(in srgb, var(--cs-b) 25%, transparent); }
.cs-tape-track { display: flex; width: max-content; animation: csMarq 38s linear infinite; }
.cs-tape-track span { display: inline-flex; align-items: center; gap: 1rem; padding-right: 1rem; font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.cs-tape-track span::after { content: '✦'; font-size: .85rem; }
@keyframes csMarq { to { transform: translateX(-50%); } }

/* ═══ Reel de videos ═══ */
.cs-reel { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1.1rem; }
.cs-reel-item { position: relative; }
.cs-reel-item .cs-phone { border-radius: 26px; padding: 6px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.cs-reel-item .cs-phone video { border-radius: 21px; }
.cs-reel-item:nth-child(even) { transform: translateY(34px); }
.cs-reel-item:hover .cs-phone { transform: translateY(-6px) rotate(-1deg); }
.cs-prog { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.cs-prog b { display: block; height: 100%; width: 0; background: var(--cs-c); }
.cs-reel-cap { margin-top: .85rem; text-align: center; }
.cs-reel-cap strong { display: block; font-size: .9rem; font-weight: 900; line-height: 1.25; }
.cs-reel-cap span { font-size: .74rem; color: var(--muted); font-weight: 700; }
.cs-note { text-align: center; font-size: .78rem; color: var(--muted); margin: 3.4rem auto 0; max-width: 560px; }
.cs-note i { color: var(--cs-c); }

/* ═══ Contadores ═══ */
.cs-nums { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; max-width: 920px; margin: 0 auto; }
.cs-nums div { text-align: center; padding: 1.3rem .6rem; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); transition: transform .3s, border-color .3s; }
.cs-nums div:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cs-a) 55%, transparent); }
.cs-nums strong { display: block; font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1; }
.cs-nums span { font-size: .8rem; color: var(--text2); font-weight: 700; }

/* ═══ Muro de piezas (dos filas en movimiento) ═══ */
.cs-wall { display: flex; flex-direction: column; gap: 14px; margin: 0 -2rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-wall-row { display: flex; gap: 14px; width: max-content; animation: csMarq 70s linear infinite; }
.cs-wall-row.rev { animation-direction: reverse; animation-duration: 80s; }
.cs-wall:hover .cs-wall-row { animation-play-state: paused; }
.cs-tile { position: relative; width: 210px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; flex: none; background: #111; margin: 0; }
.cs-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.cs-tile:hover img { transform: scale(1.06); }
.cs-tile figcaption { position: absolute; inset: auto 0 0; padding: 1.6rem .7rem .6rem; background: linear-gradient(transparent, rgba(0,0,0,.78)); font-size: .72rem; font-weight: 800; color: #fff; }

/* ═══ Abanico de piezas ═══ */
.cs-fan { position: relative; height: 470px; max-width: 1000px; margin: 0 auto; }
.cs-fan figure { position: absolute; left: 50%; top: 50%; width: 230px; aspect-ratio: 4 / 5; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.55); transform: translate(-50%,-50%) rotate(0deg); transition: transform 1s cubic-bezier(.22,1,.36,1), box-shadow .3s; background: #111; }
.cs-fan figure img { width: 100%; height: 100%; object-fit: cover; }
.cs-fan.cs-open figure { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
.cs-fan.cs-open figure:hover { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 16px)) rotate(0deg) scale(1.06); z-index: 9; box-shadow: 0 30px 80px color-mix(in srgb, var(--cs-b) 35%, transparent); }

/* ═══ Secciones plegables (menos texto a la vista) ═══ */
.cs-fold { position: relative; }
.cs-fold.cs-folded { max-height: 560px; overflow: hidden; }
.cs-fold.cs-folded::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, transparent, var(--cs-fold-bg, var(--bg)) 78%); pointer-events: none; z-index: 2; }
.cs-more { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; font-weight: 800; font-size: .86rem; color: var(--text); background: rgba(10,15,28,.85); border: 1.5px solid color-mix(in srgb, var(--cs-a) 55%, transparent); backdrop-filter: blur(8px); cursor: pointer; transition: transform .2s, border-color .2s; }
.cs-more:hover { transform: translateX(-50%) translateY(-2px); border-color: var(--cs-c); }
.cs-fold:not(.cs-folded) .cs-more { display: none; }

/* ═══ CTA final con fondo en movimiento ═══ */
.cs-final-bg { position: absolute; inset: 0; z-index: 0; display: flex; gap: 10px; opacity: .28; filter: saturate(1.2); transform: rotate(-6deg) scale(1.25); pointer-events: none; }
.cs-final-bg > div { display: flex; flex-direction: column; gap: 10px; flex: 1; animation: csUp 40s linear infinite; }
.cs-final-bg > div:nth-child(even) { animation-direction: reverse; }
.cs-final-bg img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
@keyframes csUp { to { transform: translateY(-50%); } }
.cs-final-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(8,14,26,.55), var(--bg) 78%); }
.cta-banner.cs-final { position: relative; overflow: hidden; isolation: isolate; }
.cta-banner.cs-final > .container { position: relative; z-index: 2; }

/* ═══ Entradas (solo con .cs-in) ═══ */
@media (prefers-reduced-motion: no-preference) {
  .cs-js .cs-pop { opacity: 0; transform: translateY(28px) scale(.98); }
  .cs-js .cs-in .cs-pop { animation: csPop .8s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  @keyframes csPop { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .cs-tape-track, .cs-wall-row, .cs-final-bg > div, .cs-aurora i, .cs-stage .cs-phone, .cs-float, .cs-sticker, .cs-btn::after, .cs-live i { animation: none !important; }
  .cs-wall { overflow-x: auto; }
  .cs-fan figure { transition: none; }
}

/* ═══ Responsive ═══ */
@media (max-width: 1199px) {
  .cs-reel { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 3rem; }
  .cs-reel-item:nth-child(even) { transform: none; }
}
@media (max-width: 991px) {
  .cs-stage { height: 520px; max-width: 520px; margin: 1.5rem auto 0; width: 100%; }
}
@media (max-width: 640px) {
  .cs-sec { padding: 4rem 0; }
  .cs-stage { height: 430px; }
  .cs-stage .cs-phone { width: 166px; }
  .cs-stage .p1 { width: 194px; }
  .cs-float.f2 { left: 0; } .cs-float.f1 { right: 0; }
  .cs-sticker { width: 72px; height: 72px; font-size: .64rem; right: 6%; }
  .cs-reel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .9rem; margin: 0 -16px; padding: 0 16px 1rem; }
  .cs-reel-item { flex: 0 0 62%; scroll-snap-align: center; }
  .cs-nums { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cs-tile { width: 150px; }
  .cs-fan { height: 360px; }
  .cs-fan figure { width: 150px; }
  .cs-fold.cs-folded { max-height: 640px; }
}

/* ═══════════════════════════════════════════════════════════════
   SKIN de las páginas de curso (body.cs-page): lleva las secciones
   viejas (prefijos cl-, ia-, cp-, en-, si-) a la estética de la vidriera.
   ═══════════════════════════════════════════════════════════════ */
/* Títulos y etiquetas */
.cs-page .section-title { font-family: var(--font-head); font-weight: 900; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(2rem, 4.4vw, 3.1rem); }
body.cs-page[data-cx] .section-title span, body.cs-page[data-cx] .ce-section-heading h2 span, body.cs-page[data-cx] .section-title > span { background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; }
.cs-page .section-label { color: var(--cs-c) !important; border: 0 !important; background: none !important; padding: 0 !important; font-weight: 800; letter-spacing: .16em; }
.cs-page .section-label::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--cs-grad); }
.cs-page .section-label i { display: none; }
.cs-page .section-sub { font-size: 1.02rem; line-height: 1.6; }

/* Fondos: cada sección suma una luz de color suave, alternando el lado */
body.cs-page > section:not(.cs-hero):not(.cta-banner):not(.cs-sec) { background-image: radial-gradient(640px 420px at 0% 0%, color-mix(in srgb, var(--cs-a) 9%, transparent), transparent 70%) !important; }
body.cs-page > section:not(.cs-hero):not(.cta-banner):not(.cs-sec):nth-of-type(even) { background-image: radial-gradient(640px 420px at 100% 100%, color-mix(in srgb, var(--cs-b) 9%, transparent), transparent 70%) !important; }

/* Tarjetas */
.cs-page :is(.cl-card, .ia-card, .cp-card, .en-card, .si-card, .cl-eco-card) { background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012)) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 22px !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.cs-page :is(.cl-card, .ia-card, .cp-card, .en-card, .si-card, .cl-eco-card):hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--cs-a) 60%, transparent) !important; box-shadow: 0 20px 50px color-mix(in srgb, var(--cs-a) 16%, transparent) !important; }
.cs-page :is(.cl-card-icon, .ia-card-icon, .cp-card-icon, .en-card-icon, .si-card-icon, .cl-eco-icon) { background: var(--cs-grad) !important; color: var(--cs-ink) !important; border: 0 !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--cs-b) 30%, transparent); }
.cs-page :is(.cl-card-icon, .ia-card-icon, .cp-card-icon, .en-card-icon, .si-card-icon, .cl-eco-icon) i { color: var(--cs-ink) !important; }

/* Números y estadísticas */
.cs-page :is(.cl-stat-num, .ia-stat-num, .si-stat-num, .en-stat-num, .cp-count-num, .en-count-num, .cl-price-big, .ia-price-big, .si-price-big, .cp-price-big, .en-price-big) { background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs-page :is(.cl-stat, .ia-stat, .si-stat, .en-stat, .cp-count-box, .en-count-box) { border-radius: 18px !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; transition: transform .3s, border-color .3s; }
.cs-page :is(.cl-stat, .ia-stat, .si-stat, .en-stat, .cp-count-box, .en-count-box):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cs-a) 55%, transparent) !important; }

/* Precios: la tarjeta destacada con borde animado */
.cs-page :is(.cl-price-card, .ia-price-card, .si-price-card, .cp-price-card, .en-price-card) { border-radius: 24px !important; background: var(--bg2) !important; transition: transform .3s, box-shadow .3s; }
.cs-page :is(.cl-price-card, .ia-price-card, .si-price-card, .cp-price-card, .en-price-card):hover { transform: translateY(-6px); }
.cs-page :is(.cl-price-featured, .ia-price-featured, .si-price-featured, .cp-price-featured, .en-price-featured) { border: 2px solid transparent !important; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(120deg, var(--cs-a), var(--cs-c), var(--cs-b), var(--cs-a)) border-box !important; background-size: 100% 100%, 300% 300% !important; animation: csBorder 6s linear infinite; box-shadow: 0 0 60px color-mix(in srgb, var(--cs-b) 22%, transparent) !important; }
@keyframes csBorder { 0%,100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
.cs-page :is(.cl-price-badge, .ia-price-badge, .si-price-badge, .cp-price-badge, .en-price-badge) { background: var(--cs-grad) !important; color: var(--cs-ink) !important; border: 0 !important; }
.cs-page :is(.cl-price-feat, .ia-price-feat, .si-price-feat, .cp-price-feat, .en-price-feat) li i { color: var(--cs-a) !important; }

/* Botones principales con degradé y brillo (incluye los de pago: solo cambia el aspecto) */
.cs-page :is(.cl-btn-green, .ia-btn-violet, .si-btn-blue, .cp-btn-mint, .en-btn-amber, .ce-button) { position: relative; background: var(--cs-grad) !important; color: var(--cs-ink) !important; border: 0 !important; box-shadow: 0 10px 30px color-mix(in srgb, var(--cs-b) 32%, transparent) !important; overflow: hidden; isolation: isolate; font-weight: 900 !important; }
.cs-page :is(.cl-btn-green, .ia-btn-violet, .si-btn-blue, .cp-btn-mint, .en-btn-amber, .ce-button)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); background-size: 220% 100%; animation: csShine 3s linear infinite; z-index: -1; mix-blend-mode: overlay; pointer-events: none; }
.cs-page :is(.cl-btn-green, .ia-btn-violet, .si-btn-blue, .cp-btn-mint, .en-btn-amber, .ce-button) i { color: var(--cs-ink) !important; }

/* Antes y después */
.cs-page :is(.cl-before, .ia-before, .si-before, .cp-vs-a, .en-vs-a) { border-radius: 22px !important; }
.cs-page :is(.cl-after, .ia-after, .si-after, .cp-vs-b, .en-vs-b) { border-radius: 22px !important; border: 2px solid transparent !important; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--cs-grad) border-box !important; box-shadow: 0 0 50px color-mix(in srgb, var(--cs-a) 16%, transparent); }

/* Preguntas frecuentes */
.cs-page :is(.cl-faq-item, .ia-faq-item, .si-faq-item, .cp-faq, .en-faq) { border-radius: 16px !important; background: var(--bg2) !important; border: 1px solid rgba(255,255,255,.08) !important; }
.cs-page :is(.cl-faq-item, .ia-faq-item, .si-faq-item, .cp-faq, .en-faq):hover { border-color: color-mix(in srgb, var(--cs-a) 45%, transparent) !important; }

/* Foto del docente */
.cs-page :is(.cl-img-wrap, .ia-img-wrap, .si-img-wrap) img { border: 2px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--cs-grad) border-box; transform: rotate(-2deg); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.cs-page :is(.cl-img-wrap, .ia-img-wrap, .si-img-wrap):hover img { transform: none; }

/* ═══ Franja de compra a mitad de página ═══ */
.cs-band { position: relative; padding: 0 0 4.5rem; }
.cs-band-box { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1.6rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: 24px; overflow: hidden; border: 2px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(120deg, var(--cs-a), var(--cs-c), var(--cs-b), var(--cs-a)) border-box; background-size: 100% 100%, 300% 300%; animation: csBorder 6s linear infinite; box-shadow: 0 20px 60px color-mix(in srgb, var(--cs-b) 18%, transparent); }
.cs-band-phones { display: flex; }
.cs-band-phones img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; border: 2px solid var(--bg2); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.cs-band-phones img + img { margin-left: -18px; }
.cs-band-phones img:nth-child(1) { transform: rotate(-8deg); } .cs-band-phones img:nth-child(3) { transform: rotate(8deg); }
.cs-band h3 { font-family: var(--font-head); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 900; letter-spacing: -.02em; margin: 0 0 .25rem; }
.cs-band p { margin: 0; font-size: .88rem; color: var(--text2); }
.cs-band p b { color: var(--cs-c); }

/* ═══ Prueba en el hero ═══ */
.cs-proof { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cs-proof span { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 800; padding: .4rem .75rem; border-radius: 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); color: var(--text); }
.cs-proof i { color: var(--cs-c); }

/* ═══ Tira de fotos entre secciones ═══ */
.cs-strip { padding: 1.5rem 0 1rem; overflow: hidden; }
.cs-strip .cs-wall-row { animation-duration: 55s; }
.cs-strip .cs-tile { width: 150px; border-radius: 14px; }

@media (max-width: 767px) {
  .cs-band-box { grid-template-columns: 1fr; text-align: center; }
  .cs-band-phones { justify-content: center; }
  .cs-band .cs-btn { width: 100%; }
  .cs-strip .cs-tile { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-band-box, .cs-page :is(.cl-price-featured, .ia-price-featured, .si-price-featured, .cp-price-featured, .en-price-featured), .cs-page :is(.cl-btn-green, .ia-btn-violet, .si-btn-blue, .cp-btn-mint, .en-btn-amber, .ce-button)::after { animation: none !important; }
}

/* Hero: título más grande y con degradé, como IA para Contenido */
body.cs-page[data-cx] .ce-title { font-weight: 900; letter-spacing: -.045em; line-height: 1; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
body.cs-page[data-cx] .ce-title > span:not(.ce-course-name) { background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
body.cs-page[data-cx] .ce-title .ce-course-name { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-c); margin-bottom: .8rem; }
body.cs-page[data-cx] .ce-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); }
body.cs-page .ce-facts li { font-weight: 800; border-radius: 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); padding: .4rem .8rem; }
body.cs-page .ce-price-hint { border: 1px dashed color-mix(in srgb, var(--cs-c) 45%, transparent) !important; background: color-mix(in srgb, var(--cs-c) 5%, transparent) !important; border-radius: 12px; }
body.cs-page .ce-facts { gap: .5rem; }
body.cs-page .ce-facts li + li { margin-left: 0; padding-left: .8rem; border-left: 1px solid rgba(255,255,255,.1); }

/* Hero: el nombre del curso va en su propia línea */
body.cs-page[data-cx] .ce-title .ce-course-name { display: flex; width: fit-content; }

/* ═══ Acordeón "Todo el detalle" ═══ */
.cs-acc { max-width: 900px; margin: 0 auto; display: grid; gap: .7rem; }
.cs-acc-item { border-radius: 18px; background: var(--bg); border: 1px solid rgba(255,255,255,.08); transition: border-color .25s, box-shadow .25s; scroll-margin-top: 110px; }
.cs-acc-item:hover { border-color: color-mix(in srgb, var(--cs-a) 45%, transparent); }
.cs-acc-item[open] { border-color: color-mix(in srgb, var(--cs-a) 55%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--cs-a) 12%, transparent); }
.cs-acc-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "k i" "t i"; align-items: center; gap: .15rem 1rem; padding: 1.1rem 1.3rem; }
.cs-acc-item > summary::-webkit-details-marker { display: none; }
.cs-acc-k { grid-area: k; font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-c); }
.cs-acc-item > summary strong { grid-area: t; font-family: var(--font-head); font-size: 1.08rem; font-weight: 800; line-height: 1.3; color: var(--text); }
.cs-acc-item > summary strong span { background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs-acc-item > summary i { grid-area: i; font-style: normal; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: rgba(255,255,255,.06); transition: transform .3s, background .3s; }
.cs-acc-item[open] > summary i { transform: rotate(45deg); background: var(--cs-grad); color: var(--cs-ink); }
.cs-acc-body { padding: .2rem 1.3rem 1.4rem; }
.cs-acc-body .reveal { opacity: 1 !important; transform: none !important; }
.cs-acc-lead { color: var(--text2); font-size: .95rem; line-height: 1.65; margin: 0 0 1.2rem; }

/* ═══ Opiniones en cinta ═══ */
.cs-quotes { margin: 0; }
.cs-quotes .cs-wall-row { animation-duration: 90s; align-items: stretch; }
.cs-quotes .cs-wall-row.rev { animation-duration: 100s; }
.cs-quote { flex: none; width: 340px; margin: 0; padding: 1.3rem 1.3rem 1.1rem; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; gap: .7rem; transition: border-color .3s, transform .3s; }
.cs-quote:hover { border-color: color-mix(in srgb, var(--cs-a) 55%, transparent); transform: translateY(-4px); }
.cs-stars { color: var(--cs-c); letter-spacing: .12em; font-size: .9rem; }
.cs-quote blockquote { margin: 0; flex: 1; font-size: .88rem; line-height: 1.55; color: var(--text2); }
.cs-quote figcaption { display: flex; align-items: center; gap: .65rem; }
.cs-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--cs-ink); background: var(--cs-grad); flex: none; }
.cs-quote figcaption b { display: block; font-size: .88rem; }
.cs-quote figcaption small { font-size: .7rem; font-weight: 800; color: var(--cs-c); letter-spacing: .04em; }
@media (max-width: 640px) { .cs-quote { width: 280px; } }

/* ═══ HERO con el estilo de IA para Contenido ═══ */
.cs-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; padding: .45rem .95rem .45rem .55rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font-size: .78rem; font-weight: 800; color: var(--text); }
.cs-badge b { background: var(--cs-b); color: #fff; padding: .18rem .55rem; border-radius: 999px; font-size: .66rem; letter-spacing: .08em; }
.cs-h1 { font-family: var(--font-head); font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 900; line-height: .98; letter-spacing: -.045em; margin: 1.2rem 0 1.1rem; color: var(--text); }
.cs-hero h1.cs-h1 span.cs-grad { background: var(--cs-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cs-hero h1.cs-h1 span.cs-under { position: relative; white-space: nowrap; background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.cs-h1 .cs-under svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; }
.cs-h1 .cs-under path { fill: none; stroke: var(--cs-c); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cs-rot-line { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text2); font-weight: 600; margin: 0 0 1.4rem; line-height: 1.45; }
.cs-rot-line .cs-rot { min-width: 12ch; height: 1.45em; }
.cs-facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.8rem; }
.cs-facts li { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 800; padding: .45rem .85rem; border-radius: 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); color: var(--text); }
.cs-facts li i { color: var(--cs-c); }
.cs-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.4rem; border-radius: 14px; font-weight: 800; color: var(--text) !important; text-decoration: none; border: 1.5px solid rgba(255,255,255,.18); transition: border-color .2s, background .2s; }
.cs-ghost:hover { border-color: var(--cs-c); background: color-mix(in srgb, var(--cs-c) 6%, transparent); }
.cs-hero .ce-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.cs-hero .ce-price-hint { margin-top: 1.4rem; }
/* aurora más intensa detrás de los teléfonos y grano */
.cs-hero .cs-aurora { opacity: .62; filter: blur(70px); }
.cs-hero .cs-aurora i:nth-child(1) { width: 560px; height: 560px; left: 52%; top: 2%; background: var(--cs-b); }
.cs-hero .cs-aurora i:nth-child(2) { width: 440px; height: 440px; left: 72%; top: 34%; background: var(--cs-c); opacity: .6; }
.cs-hero .cs-aurora i:nth-child(3) { width: 400px; height: 400px; left: 2%; top: 46%; background: var(--cs-a); opacity: .45; }
.cs-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .cs-js body.cs-page .cs-h1 .cs-under path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: csDraw 1.1s .5s cubic-bezier(.65,0,.35,1) forwards !important; }
  @keyframes csDraw { to { stroke-dashoffset: 0; } }
}