/* =========================
   TYPOGRAPHY SYSTEM (v64)
   - Sans: Manrope
   - Display: Bebas Neue
   ========================= */
:root {
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Bebas Neue", var(--font-sans);
  --font-serif: "Playfair Display", serif;
  --lh-body: 1.6;
  --fw-body: 500;
  --fw-strong: 700;
  --tracking-display: .6px;
  --tracking-nav: .12em;
  --bg: #0e1117;
  --ink: #e7e9ee;
  --muted: #a9b1c5;
  --line: #212638;
  --brand: #8b5cf6;
  --brand-700: #7c3aed;
  --brand-300: #c4b5fd;
  --accent: #FFD11A;
  --radius: 22px;
  --shadow: 0 18px 48px rgba(0, 0, 0, .45);
  --soft: 0 10px 28px rgba(0, 0, 0, .35);
  --hdr: 72px;
  --radius-lg: var(--radius);
  --radius-sm: var(--ui-radius-sm, 18px);
  --shadow-lg: var(--shadow);
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, .35);
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong,
b {
  font-weight: var(--fw-strong);
}

/* Headings: consistent, premium */
/* Headings: consistent, premium - WIDER IS MORE LUXURY */
h1,
h2,
h3,
h4,
.heroTitle,
.hero-cine-title,
.secTitle,
.m-secTitle,
.pp-title,
.pt-num,
.cfTitle {
  font-family: var(--font-display);
  letter-spacing: .08em;
  /* Premium feel */
  text-transform: uppercase;
}

/* UI text */
.nav a,
.links a {
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}

/* ========================= */


@media (min-width: 1024px) {

  /* 1) Panel de la tarjeta: arriba, compacto y con fondo tipo referencia */
  #programa .progCoverflow .cfPanel {
    position: absolute !important;
    top: 18px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(640px, 74%) !important;
    padding: 18px 22px 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  }

  /* 2) El contenedor del contenido: deja de empujar el panel abajo */
  #programa .progCoverflow .cfBody {
    justify-content: flex-start !important;
    padding: 34px 44px 34px !important;
  }

  /* 3) Número + etiqueta (Base/Plan/etc) alineados y con presencia */
  #programa .progCoverflow .cfMeta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
  }

  #programa .progCoverflow .cfNum {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    color: #fff !important;
    background: rgba(0, 0, 0, .55) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
  }

  #programa .progCoverflow .cfTag,
  #programa .progCoverflow .cfPill {
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: rgba(139, 92, 246, .16) !important;
    border: 1px solid rgba(139, 92, 246, .38) !important;
  }

  /* 4) Tipografía: blanco nuclear y sin opacidades raras */
  #programa .progCoverflow .cfTitle,
  #programa .progCoverflow .cfText,
  #programa .progCoverflow .cfBody {
    opacity: 1 !important;
    color: #fff !important;
  }

  #programa .progCoverflow .cfTitle {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    font-weight: 900 !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .85) !important;
  }

  #programa .progCoverflow .cfText {
    text-shadow: 0 10px 30px rgba(0, 0, 0, .85) !important;
  }

  #programa .progCoverflow .cfPanel,
  #programa .progCoverflow .cfPanel * {
    opacity: 1 !important;
  }

  /* 5) Chips: visibles, coherentes y legibles */
  #programa .progCoverflow .cfChips {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
  }

  /* 5b) Evitar solapes: los chips SIEMPRE debajo del panel, en flujo normal */
  #programa .progCoverflow .cfBody {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #programa .progCoverflow .cfChips {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 16px !important;
    width: min(740px, 92%) !important;
  }

  #programa .progCoverflow .cfChips .chip,
  #programa .progCoverflow .cfChip {
    color: #fff !important;
    background: rgba(0, 0, 0, .48) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* 6) Toggle "Ver el plan por dentro" como la referencia (pill + círculo con flecha centrada) */
  #programa .toggle-link {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid rgba(245, 197, 66, .55) !important;
    color: rgba(245, 197, 66, .98) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .60), 0 0 0 6px rgba(245, 197, 66, .10) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #programa .toggle-link__icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 197, 66, .60) !important;
    background: rgba(0, 0, 0, .35) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  #programa .toggle-link__label {
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  #programa .toggle-link__icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 197, 66, .55) !important;
    background: rgba(0, 0, 0, .28) !important;
    line-height: 1 !important;
  }
}


/* PC refinements (no mobile changes) */
.seo-title {
  text-align: center;
  margin: 0 0 14px;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 800;
  letter-spacing: .8px;
  line-height: 1.05;
  font-size: clamp(1.75rem, 5.4vw, 2.35rem);
}

.seo-title .seo-title-top {
  display: block;
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase
}

.seo-title .seo-title-bottom {
  display: block;
  color: var(--brand);
  margin-top: 8px;
  text-transform: uppercase
}


@media (min-width:1021px) {

  /* Subhero (SEO intro) like the reference */
  .seo-title {
    display: block;
    text-align: center;
    margin: 0 0 14px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    letter-spacing: .8px;
    line-height: 1.05;
    font-size: clamp(2.1rem, 3.2vw, 2.85rem);
  }

  .seo-title .seo-title-top {
    display: block;
    color: rgba(255, 255, 255, .92)
  }

  .seo-title .seo-title-bottom {
    display: block;
    color: var(--brand);
    margin-top: 8px
  }

  .seo-card {
    padding: 44px 52px;
    border-radius: 44px;
  }

  .seo-card p {
    max-width: 56rem;
    margin-inline: auto;
  }

  .seo-card .sig {
    display: none
  }

  .seo-chips {
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 22px !important;
  }

  .seo-chip {
    padding: 10px 18px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .28) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    font-size: .95rem !important;
    line-height: 1.05 !important;
  }

  /* Ver el plan por dentro (desktop cards) */
  .inside-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 10px
  }

  .inside-panel {
    padding: 26px 26px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
  }

  .inside-kicker {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    letter-spacing: .8px;
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .92);
  }

  .inside-accentline {
    width: 28px;
    height: 2px;
    background: rgba(255, 209, 26, .85);
    border-radius: 999px;
    margin-top: 10px;
  }

  .inside-lead {
    margin: 14px 0 16px;
    color: #cbd5e1;
    line-height: 1.65
  }

  .inside-list {
    list-style: none;
    padding: 0;
    margin: 0
  }

  .inside-list li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #cbd5e1;
    line-height: 1.55
  }

  .inside-list li:first-child {
    border-top: none
  }

  .inside-dot {
    margin-top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 209, 26, .85);
    box-shadow: 0 0 0 3px rgba(255, 209, 26, .12);
    flex: 0 0 auto;
  }

  .inside-note {
    margin-top: 16px;
    color: #9ca3af;
    line-height: 1.6
  }

  .inside-divider {
    height: 1px;
    background: rgba(255, 255, 255, .07);
    margin: 16px 0
  }

  .inside-small {
    color: #9ca3af;
    line-height: 1.6;
    margin: 0
  }

  .inside-subtitle {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    letter-spacing: .8px;
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 6px;
  }

  /* Testimonios: flechas más finas y elegantes, amarillas al hover */
  .t2-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 56px !important;
    height: 56px !important;
    color: rgba(255, 255, 255, .38) !important;
  }

  .t2-nav svg {
    width: 28px;
    height: 28px
  }

  .t2-nav:hover {
    background: transparent !important;
    color: rgba(255, 209, 26, .95) !important
  }

  .t2-prev {
    left: -6px
  }

  .t2-next {
    right: -6px
  }
}


/* === AJUSTES SOLO PC (no tocar móvil) === */
@media (min-width: 1024px) {

  /* Subhero: texto encima de las pills */
  .seo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .seo-title {
    order: 1;
  }

  .seo-card>p {
    order: 2;
  }

  .seo-chips {
    order: 3;
  }

  .seo-card .sig {
    order: 4;
  }

  /* FAQ: indicador desplegable con chevron estilo flechas */
  .faq details summary::after {
    content: "›";
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 26, .35);
    background: rgba(255, 209, 26, .08);
    color: rgba(255, 209, 26, .85);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    flex: 0 0 34px;
  }

  .faq details summary:hover::after {
    background: rgba(255, 209, 26, .12);
    border-color: rgba(255, 209, 26, .55);
    color: rgba(255, 209, 26, .98);
  }

  .faq details[open] summary::after {
    transform: rotate(-90deg);
  }

  /* Bloque "Para empezar a tu ritmo": estilo V5 (más sobrio + CTA dorada) */
  .programas-bridge {
    padding: 64px 0 56px;
  }

  .programas-bridge__card {
    border: 1px solid rgba(255, 209, 26, .22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    background: rgba(255, 255, 255, .02);
  }

  .programas-bridge__grid {
    grid-template-columns: 1.55fr .75fr;
    gap: 34px;
    padding: 32px 34px;
  }

  .programas-bridge__kicker {
    gap: 12px;
    margin-bottom: 10px;
  }

  .programas-bridge__title {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 8px 0 14px;
    color: rgba(255, 255, 255, .92);
  }

  .programas-bridge__btn {
    border: 1px solid rgba(255, 209, 26, .65);
    color: rgba(255, 209, 26, .95);
    background: rgba(255, 209, 26, .04);
    box-shadow: none;
    padding: 13px 18px;
  }

  .programas-bridge__btn:hover {
    background: rgba(255, 209, 26, .12);
    border-color: rgba(255, 209, 26, .9);
    transform: translateY(-1px);
  }

  .programas-bridge__btn:active {
    transform: translateY(0px);
  }

  .programas-bridge__cta-inner {
    justify-items: end;
    text-align: right;
    gap: 14px;
  }

  .programas-bridge__note {
    text-align: right;
    color: rgba(255, 255, 255, .55);
  }


  /* ===============================
     JERARQUÍA: Contacto manda.
     (Solo PC. Móvil intacto.)
     =============================== */

  /* 1) "Para empezar a tu ritmo" pasa a ser secundario */
  .programas-bridge {
    padding: 28px 0 18px;
  }

  .programas-bridge__card {
    max-width: 980px;
    margin: 0 auto;
    border-color: rgba(255, 209, 26, .14);
    background: rgba(255, 255, 255, .015);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  }

  .programas-bridge__grid {
    grid-template-columns: 1.4fr .65fr;
    gap: 22px;
    padding: 22px 24px;
  }

  .programas-bridge__kicker {
    font-size: 15px;
    line-height: 1.25;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 8px;
  }

  .programas-bridge__kicker .tag {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    opacity: .9;
  }

  .programas-bridge__text {
    display: none;
  }

  .programas-bridge__list {
    margin-top: 6px;
    gap: 8px;
  }

  .programas-bridge__list li {
    font-size: 15px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .70);
  }

  /* Recortamos bullets en PC para que no compita con Contacto */
  .programas-bridge__list li:nth-child(n+3) {
    display: none;
  }

  .programas-bridge__btn {
    padding: 11px 16px;
    font-size: 13.5px;
    letter-spacing: .02em;
  }

  .programas-bridge__note {
    font-size: 13px;
    line-height: 1.35;
    opacity: .75;
  }

  /* 2) Contacto: protagonista real */
  #contacto.cta-band {
    position: relative;
    padding: 54px 58px;
    border-radius: 34px;
    margin-top: 16px;
    border: 1px solid rgba(139, 92, 246, .32);
    background:
      radial-gradient(900px 420px at 20% 0%, rgba(139, 92, 246, .22), transparent 62%),
      radial-gradient(900px 420px at 90% 30%, rgba(255, 209, 26, .10), transparent 60%),
      rgba(255, 255, 255, .04);
    box-shadow: 0 20px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  }

  #contacto h2 {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
  }

  #contacto .muted {
    font-size: 18px;
    line-height: 1.45;
    max-width: 760px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, .72);
  }

  #contacto .cta-row {
    gap: 16px;
  }

  #contacto .btn {
    min-width: 280px;
    padding: 16px 22px;
    font-size: 16px;
    border-radius: 999px;
  }

  /* Calendly = CTA principal (más sólido) */
  #contacto .btn:not(.alt) {
    background: rgba(255, 255, 255, .92);
    color: rgba(20, 20, 24, .95);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }

  #contacto .btn:not(.alt):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  }

  /* WhatsApp = alternativa, sin robar foco */
  #contacto .btn.alt {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 209, 26, .55);
    color: rgba(255, 255, 255, .92);
  }

  #contacto .btn.alt:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 209, 26, .85);
    transform: translateY(-1px);
  }

}


/* --- Testimonials (PC): flechas más finas y elegantes, sin tocar móvil --- */
@media (min-width: 992px) {
  .t2-viewport {
    padding: 0 32px;
  }

  /* hueco para que no pisen las tarjetas */
  .t2-nav {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    box-shadow: none;
    opacity: .85;
  }

  .t2-nav:hover {
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
  }

  .t2-nav svg {
    width: 40px;
    height: 40px;
  }

  .t2-prev {
    left: -10px;
  }

  .t2-next {
    right: -10px;
  }
}


/* =========================================================
   SEO Intro - Compacto en móvil (sin ocultar contenido)
   ========================================================= */
@media (max-width: 820px) {
  .seo-intro {
    padding: 10px 0 14px !important;
  }

  .seo-card {
    padding: 18px 16px !important;
    border-radius: 24px !important;
  }

  .seo-title {
    font-size: clamp(1.35rem, 6vw, 1.7rem) !important;
    line-height: 1.06 !important;
    letter-spacing: .3px;
    margin: 0 0 8px 0;
  }

  .seo-title .seo-title-bottom {
    margin-top: 6px !important;
    font-size: .95em;
  }

  .seo-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .seo-chip {
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  .seo-card p {
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Toggle SEO (móvil): resumen + desplegable elegante */
  .seo-toggle {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .seo-toggle summary {
    order: 2;
    /* botón debajo del texto */
    list-style: none;
    cursor: pointer;
    align-self: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    line-height: 1;
    user-select: none;
  }

  .seo-toggle summary::-webkit-details-marker {
    display: none;
  }

  .seo-toggle summary .less {
    display: none;
  }

  .seo-toggle[open] summary .more {
    display: none;
  }

  .seo-toggle[open] summary .less {
    display: inline;
  }

  .seo-toggle .seo-more {
    order: 1;
  }

  .seo-toggle .seo-text {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
    line-height: 1.35;
  }

  .seo-toggle:not([open]) .seo-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 2 líneas por defecto */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
  }

  .seo-toggle:not([open]) .seo-more {
    position: relative;
  }

  .seo-toggle:not([open]) .seo-more:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
    border-radius: 0 0 16px 16px;
  }

}



/* Mobile: ensure section headers remain styled even after downgrading duplicate H2s */
@media (max-width:820px) {
  .m-mobile-head .m-secTitle {
    margin: 0 0 12px 0;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.05;
    font-size: 30px;
    color: var(--brand);
    position: relative;
    padding-bottom: 12px;
  }

  .m-secTitle .accent {
    color: var(--brand);
  }

  .m-secTitle:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(139, 92, 246, .95), rgba(139, 92, 246, 0));
    opacity: .95;
  }
}


/* ==== extracted from inline styles ==== */

/* HERO (móvil): mejora legibilidad del morado con stroke fino */
@media (max-width:1023px) {
  .hero-cine-title .hl {
    color: #8b5cf6;
    -webkit-text-stroke: .4px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
    position: relative;
  }

  /* Difuminado a negro: más suave y solo al final */
  .hero-cine-title .hl::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, .35) 100%);
    mix-blend-mode: multiply;
    opacity: .45;
  }
}



* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  padding-top: var(--hdr);
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(139, 92, 246, .18), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

a {
  color: inherit;
  text-decoration: none
}

.container {
  width: min(1280px, 94%);
  margin-inline: auto
}

/* Header (fijo) + sombreado en scroll */
header {
  pointer-events: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  background: rgba(10, 12, 17, .75);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background .25s, box-shadow .25s, border-color .25s
}

header.scrolled {
  background: rgba(10, 12, 17, .92);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), 0 1px 0 rgba(139, 92, 246, .12)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  color: #fff
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px
}

.logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: url('../img/logo.png') center/cover no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .15)
}

.wordmark {
  font-weight: 700;
  letter-spacing: .1px;
  font-family: Manrope, Manrope, system-ui, sans-serif
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0
}

nav a {
  color: #d1d5db;
  font-weight: 700
}

nav a:hover {
  color: #fff
}

.cta-top {
  background: #ffffff;
  color: var(--brand);
  padding: .6rem 1rem;
  border-radius: 14px;
  font-weight: 900;
  border: 2px solid #fff
}

.mobile-toggle {
  display: none;
  background: #17171b;
  border: 1px solid #2a2a35;
  color: #fff;
  border-radius: 12px;
  padding: .6rem .8rem;
  z-index: 5001;
}


/* Desktop header refinement (solo PC) */
@media (min-width: 900px) {
  :root {
    --hdr: 60px;
  }

  body {
    padding-top: var(--hdr);
  }

  header {
    border-bottom-color: rgba(255, 255, 255, .07);
  }

  .nav {
    padding: 10px 0;
  }

  .brand {
    gap: 12px;
  }

  .logo {
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
  }

  .wordmark {
    font-size: 16px;
    letter-spacing: .15px;
  }

  nav ul {
    gap: 26px;
  }

  nav a {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(209, 213, 219, .9);
  }

  nav a:hover {
    color: #fff;
  }

  .cta-top {
    padding: .52rem .92rem;
    border-radius: 12px;
    border-width: 1.5px;
  }
}


/* Hovers sutiles */
.btn {
  transition: transform .15s ease, box-shadow .2s, background .2s, border-color .2s
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  border-color: var(--accent)
}

.btn:active {
  transform: translateY(0)
}

.feature {
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  border-color: rgba(139, 92, 246, .35)
}

/* Hero */

/* Elementos solo para escritorio (no afectan a móvil) */
.hero-cinematic {
  display: none;
}

.seo-intro {
  display: block;
  padding: 18px 0 26px;
  background: transparent;
}

.hero {
  padding: 84px 0 46px
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: center
}

/* Hero background slideshow (solo escritorio) */
@media (min-width: 900px) {
  .hero {
    position: relative;
    overflow: hidden
  }

  .hero .container {
    position: relative;
    z-index: 2
  }

  .hero-bg,
  .hero-overlay {
    position: absolute;
    inset: 0
  }

  .hero-bg {
    z-index: 0
  }

  .hero-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, .55)
  }

  .hero-bg span {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroFade 28s infinite
  }

  .hero-bg .s1 {
    background-image: url('../img/1.png');
    animation-delay: 0s
  }

  .hero-bg .s2 {
    background-image: url('../img/2.png');
    animation-delay: 4s
  }

  .hero-bg .s3 {
    background-image: url('../img/3.png');
    animation-delay: 8s
  }

  .hero-bg .s4 {
    background-image: url('../img/4.png');
    animation-delay: 12s
  }

  .hero-bg .s5 {
    background-image: url('../img/5.png');
    animation-delay: 16s
  }

  .hero-bg .s6 {
    background-image: url('../img/6.png');
    animation-delay: 20s
  }

  .hero-bg .s7 {
    background-image: url('../img/7.png');
    animation-delay: 24s
  }

  @keyframes heroFade {
    0% {
      opacity: 0
    }

    5% {
      opacity: 1
    }

    20% {
      opacity: 1
    }

    25% {
      opacity: 0
    }

    100% {
      opacity: 0
    }
  }

  /* Si existe imagen de fondo previa, la dejamos como fallback */

  /* Cinematic hero (solo escritorio) */
  .hero-cinematic {
    display: flex;
  }

  .seo-intro {
    display: block;
  }

  .hero {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center
  }

  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 0;
    align-items: stretch
  }

  .hero-cinematic {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 6vw
  }

  .hero-cinematic-inner {
    max-width: 980px
  }

  .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .78rem;
    color: rgba(255, 255, 255, .82)
  }

  .hero-cine-title {
    font-family: "Bebas Neue", system-ui, sans-serif;
    letter-spacing: .6px;
    font-weight: 800;
    line-height: .95;
    margin: 1.05rem 0 .6rem;
    font-size: clamp(3.2rem, 6.8vw, 5.6rem);
    text-transform: uppercase
  }

  .hero-cine-sub {
    color: rgba(255, 255, 255, .72);
    font-size: 1.05rem;
    max-width: 62ch;
    margin: 0 auto
  }

  /* Ocultamos el hero original en escritorio (móvil se mantiene) */
  .hero .hero-poster,
  .hero .hero-sheet,
  .hero .hero-media {
    display: none
  }

  .hero .badges,
  .hero .stats,
  .hero .cta-row,
  .hero .byline {
    display: none
  }

  /* Bloque SEO bajo el hero (solo escritorio) */
  .seo-intro {
    padding: 54px 0 46px
  }

  .seo-intro .container {
    max-width: 1100px
  }

  .seo-intro h2 {
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0 0 12px;
    font-weight: 900
  }

  .seo-intro h2 .accent {
    color: var(--accent);
  }

  .seo-intro h2 {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }

  .seo-intro p {
    color: var(--muted);
    font-size: 1.06rem;
    max-width: 78ch;
    margin: 0 auto
  }

  .seo-intro .sig {
    margin-top: 12px;
    color: rgba(255, 255, 255, .55);
    font-weight: 700;
    font-size: .98rem
  }

  .seo-intro .rule {
    width: 56px;
    height: 3px;
    border-radius: 999px;
    margin: 14px auto 18px;
    background: linear-gradient(90deg, rgba(139, 92, 246, .0), rgba(139, 92, 246, .9), rgba(139, 92, 246, .0))
  }


}

/* HERO TYPOGRAPHY & LAYOUT */
.kicker {
  letter-spacing: .2em;
  color: var(--brand-300);
  /* Lighter brand color for elegance */
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: .8rem;
  display: inline-block;
}

h1 {
  font-family: var(--font-display);
  letter-spacing: .02em;
  font-weight: 800;
  line-height: 0.95;
  margin: .4rem 0 1rem;
  font-size: clamp(3rem, 7vw, 5.5rem);
  /* Slightly larger */
  color: #fff;
  text-transform: uppercase;
}

h1 .hl {
  background: linear-gradient(90deg, var(--brand-300), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  /* Helps with gradient clipping */
}

.lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 24px;
  font-weight: 400;
}

/* Premium Buttons (Luxury Gradient + Glow) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 999px;
  /* Pill shape is more modern/luxury */
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.95rem;

  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #f0f0f0 0%, #dcdcdc 100%);
  color: #0b0b0f;

  box-shadow:
    0 4px 12px rgba(255, 255, 255, 0.15) inset,
    /* Inner light */
    0 10px 20px rgba(0, 0, 0, 0.3);
  /* Drop shadow */

  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  opacity: 0.2;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 16px rgba(255, 255, 255, 0.25) inset,
    0 14px 28px rgba(0, 0, 0, 0.4);
  border-color: #fff;
}

/* Secondary Button (Glass + Gold Border) */
.btn.alt {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255, 209, 26, 0.4);
  /* Gold subtle */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn.alt:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 209, 26, 0.8);
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 209, 26, 0.15);
  /* Gold glow */
}

/* Toggle del bloque "Ver el plan por dentro" (estilo link, no CTA) */
.toggle-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center
}

.toggle-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .2px;
  padding: .25rem .1rem;
  cursor: pointer;
}

.toggle-link__label {
  border-bottom: none;
  padding-bottom: 2px;
}

.toggle-link:focus-visible {
  outline: 3px solid rgba(255, 209, 26, .35);
  outline-offset: 6px;
  border-radius: 12px;
}

.toggle-link__icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 209, 26, .35);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  line-height: 1;
}

.toggle-link:hover .toggle-link__icon {
  border-color: rgba(255, 209, 26, .85);
  background: rgba(255, 209, 26, .08)
}

.toggle-link.is-open .toggle-link__icon {
  transform: rotate(180deg)
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px
}

.hero .media {
  aspect-ratio: 4/5;
  border-radius: 30px;
  object-fit: cover;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, .08);
  background: #000
}

/* Wrappers (solo para remaquetar el hero en móvil). En escritorio no deben alterar nada */
.hero-poster,
.hero-sheet {
  display: contents;
}

.badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.badge {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(235, 235, 255, 0.9);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;

  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  text-align: center;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat .big {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #e6e0ff;
  line-height: 1
}

.byline {
  margin-top: 12px;
  font-size: .9rem;
  color: var(--muted);
  font-weight: 700
}

.only-desktop {
  display: inline;
}

/* Sections */
section {
  padding: 74px 0;
  scroll-margin-top: calc(var(--hdr) + 8px);
}

h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 800;
  letter-spacing: .6px;
  margin: 0 0 22px;
  font-size: clamp(2rem, 5vw, 3.2rem)
}

/* Section title color overrides */
#programa h2,
#dolor h2,
#quien h2,
#testi-title,
#faq-title {
  color: var(--brand);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px
}

/* Unified Glassmorphism for Feature Cards & Dolor Stack */
.feature,
#dolorStack .card,
#quien .grid-2>.feature {
  padding: 32px;
  border-radius: 28px;

  /* Deep Glass */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}

.feature:hover,
#dolorStack .card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

/* Ajuste fino de altura del bloque de texto en #quien */
#quien .grid-2>.feature:first-child {
  padding-top: 18px;
  padding-bottom: 16px
}

#quien .grid-2>.feature:first-child p {
  margin: 10px 0
}

#quien .grid-2>.feature:first-child ul {
  margin: 10px 0
}

#quien .grid-2>.feature:first-child li {
  margin: 6px 0
}

/* Bloque de imagen en #quien: que la foto ocupe todo el recuadro (sin barra negra) */
#quien .grid-2 {
  align-items: stretch;
}

#quien .grid-2>.feature:last-child {
  padding: 0 !important;
  overflow: hidden;
}

#quien .grid-2>.feature:last-child>div {
  padding: 0 !important;
  height: 100%;
  width: 100%;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
}

#quien .grid-2>.feature:last-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  border: 0 !important;
  border-radius: inherit !important;
}

/* Tamaño y alineación de la imagen de Noemí */
#quien .grid-2 {
  align-items: center;
}

#quien .grid-2>.feature:last-child>div {
  max-width: 380px;
  margin-inline: auto;
}

#quien .grid-2 img {
  max-height: 480px;
  width: 100%;
  height: auto;
}

#quien #quien-subtitle {
  margin-top: -6px;
  margin-bottom: 26px;
  max-width: 48rem;
  font-weight: 600;
  color: var(--muted);
}

.feature h3 {
  margin: .3rem 0 .4rem
}

.muted {
  color: var(--muted)
}

/* Testimonios (híbrido) — preservado */
/* Testimonios (Premium Cards) */
.testi-block {
  position: relative
}

.t2-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 40px
}

/* Extra bottom padding for shadows */
.t2-track {
  display: flex;
  gap: 20px
}

.t2-card {
  flex: 0 0 85%;
  max-width: 400px;
  scroll-snap-align: center;
  padding: 30px;
  border-radius: 24px;

  /* Glassmorphism Dark */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Subtle top highlight for luxury feel */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 10px 30px rgba(0, 0, 0, 0.25);

  text-align: left;
  /* Elegant left align */
  position: relative;
}

/* Quote decoration */
.t2-card::before {
  content: "“";
  font-family: serif;
  font-size: 60px;
  color: rgba(255, 209, 26, 0.15);
  /* Low opacity gold */
  position: absolute;
  top: 10px;
  left: 20px;
  line-height: 1;
}

.t2-card p {
  margin: 10px 0 0;
  color: #d1d5db;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.t2-card .author {
  margin-top: 20px;
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 400;
  /* Bebas is bold enough */
  letter-spacing: 1px;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.t2-dots,
.t2-nav {
  display: none
}

@media (min-width:768px) {
  .t2-viewport {
    overflow: hidden;
    scroll-snap-type: none;
    padding: 0
  }

  .t2-card {
    flex: 0 0 auto
  }

  /* Flechas testimonios: amarillo (solo PC) */
  .t2-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 26, .35);
    background: rgba(255, 209, 26, .08);
    color: rgba(255, 209, 26, .95);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35)
  }

  .t2-nav:hover {
    background: rgba(255, 209, 26, .12);
    border-color: rgba(255, 209, 26, .55)
  }

  .t2-prev {
    left: 4px
  }

  .t2-next {
    right: 4px
  }

  .t2-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px
  }

  .t2-dots button {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    cursor: pointer
  }

  .t2-dots button[aria-selected="true"] {
    background: var(--brand);
    border-color: var(--brand)
  }
}

/* CTA */
.hl-brand {
  color: var(--brand)
}

.hl-brand-alt {
  color: var(--accent)
}

.cta-band {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Unified border style */
  padding: 40px;
  border-radius: 32px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

#contacto {
  text-align: center;
  margin-bottom: 44px;
}

#contacto .cta-row {
  justify-content: center;
}

/* Footer */
footer {
  padding: 60px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent !important;
  /* Force transparent for clean look */
  color: rgba(169, 177, 197, 0.7);
  font-size: 0.9rem;
}

footer .cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

footer .brand {
  margin-bottom: 16px;
}

/* Minimalist Socials */
.socials a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
}

.socials a:hover {
  color: #fff;
}

.ig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-ig {
  color: var(--brand);
  font-weight: 800;
}

.footer-ig:hover {
  color: var(--brand-300);
  text-decoration: underline;
}

@media (max-width: 820px) {
  footer {
    text-align: center;
  }

  footer .cols {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  footer .brand,
  footer .socials,
  footer .ig {
    justify-content: center;
  }
}

/* Responsive */
/* Responsive: Mobile Sidebar / Drawer (Luxury) */
@media (max-width:1020px) {
  body {
    background: var(--bg);
  }

  .cta-band {
    background: rgba(255, 255, 255, .04);
  }

  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 24px
  }

  nav ul {
    display: none
  }

  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1)
  }

  /* Sidebar Drawer Style */
  #primaryNav {
    position: fixed;
    top: 14px;
    right: 14px;
    height: calc(100dvh - 28px);
    width: min(86vw, 340px);
    z-index: 9999;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 14px;

    padding: 84px 18px 18px; /* deja respirar al header */
    border-radius: 26px;
    background: rgba(12, 12, 14, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.65);

    transform: translateX(110%);
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
    visibility: hidden;
  }


  #primaryNav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  #primaryNav a{
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  padding: 12px 14px;

  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.88);
  text-align: left;

  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);

  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

  #primaryNav a:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: #ffffff;
  transform: translateY(-1px);
}

  #primaryNav .cta-top{
  /* CTA del menú móvil: ancho = texto (sin efecto ladeado) */
  margin: 14px auto 0;
  width: fit-content;
  max-width: calc(100vw - 56px);
  padding: 14px 22px;
  border-radius: 999px;

  background: var(--brand);
  color: #fff;

  border: 1px solid rgba(255, 209, 26, .45); /* dorado fino */
  box-shadow:
    0 10px 26px rgba(139, 92, 246, .10),
    0 10px 24px rgba(0, 0, 0, .35);

  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;

  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

  /* Backdrop with fade */
  .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none;
    /* JS toggles display:block then opacity */
    backdrop-filter: blur(4px);
  }

  .backdrop.is-visible {
    opacity: 1;
  }


  .grid-3,
  .grid-2,
  .stats {
    grid-template-columns: 1fr
  }

  footer .cols {
    grid-template-columns: 1fr
  }

  .logo {
    width: 50px;
    height: 50px
  }
}

/* MÓVIL FINO: subimos kicker y separamos del H1, y kicker en gris */
@media (max-width:480px) {
  .hero {
    /* En móvil, acercamos el kicker al header (menos aire arriba) */
    padding: 56px 0 32px;
  }

  h1 {
    font-size: clamp(2rem, 11vw, 3.2rem);
    line-height: 1;
  }

  .kicker {
    margin-bottom: 2.2rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--muted);
  }

  /* HERO CTAs en móvil: dos botones en una fila (50/50) */
  .hero .cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .hero .cta-row .btn {
    padding: 14px 10px;
    font-size: .92rem;
    line-height: 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }

  .btn {
    width: 100%;
    justify-content: center
  }

  .badge {
    font-size: .85rem
  }

  .logo {
    width: 48px;
    height: 48px
  }

  .hero .wrap>div {
    text-align: center;
  }

  .hero .lead {
    margin-inline: auto;
  }

  .badges {
    justify-content: space-between;
  }

  .badge {
    flex: 0 0 calc(50% - 6px);
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .stats {
    text-align: center;
  }

  /* Stats más compactas en móvil */
  .stats {
    gap: 10px;
    margin-top: 12px;
  }

  .stat {
    padding: 10px 12px;
    gap: 0;
    border-radius: 16px;
    background: rgba(14, 17, 23, .92);
  }

  .stat .big {
    font-size: 1.7rem;
  }

  .stat .muted {
    font-size: .90rem;
  }

  footer .cols {
    text-align: center;
  }
}

/* Desktop slots for testimonials (>=768px) */
@media (min-width:768px) {
  .t2-viewport {
    display: none;
  }

  .t2-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
  }

  .t2-slots .t2-card {
    padding: 12px;
    height: var(--t2-slot-h, 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .t2-slots .t2-card p {
    margin: 0;
  }

  .t2-slots .t2-card .author {
    margin-top: 10px;
  }
}

/* A11y: skip link + focus visible */
.skip {
  position: absolute;
  left: -9999px;
  top: 0
}

.skip:focus {
  left: 10px;
  top: 10px;
  background: #fff;
  color: #000;
  padding: .6rem 1rem;
  border-radius: 10px;
  z-index: 9999
}

:focus-visible {
  outline: 2px solid var(--brand, #8b5cf6);
  outline-offset: 3px;
  border-radius: 10px
}

/* Perf: evita trabajo fuera de pantalla */
#programa,
#dolor,
#quien,
#faq,
[aria-labelledby="testi-title"],
#contacto {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* Footer RRSS */
.socials {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  list-style: none;
  padding: 0
}

.socials a {
  display: inline-flex;
  align-items: center;
  color: #c9cde4;
  padding: 6px;
  border-radius: 10px
}

.socials svg {
  opacity: .98;
  transition: transform .2s, filter .2s, color .2s
}

.socials a:hover svg {
  transform: translateY(-1px)
}

.socials a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 10px
}

.socials a.tt:hover {
  color: #25F4EE
}

.socials a.yt:hover {
  color: #FF0033
}

.socials a.fb:hover {
  color: #1877F2
}

@media (min-width:1020px) {
  #primaryNav a[aria-current="true"] {
    color: var(--accent) !important;
  }
}

/* FAQ */
/* FAQ (Premium Accordion) */
.faq {
  display: grid;
  gap: 16px;
}

.faq details {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  transition: background 0.3s;
}

.faq details:hover {
  background: rgba(255, 255, 255, 0.015);
}

.faq details[open] {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border-bottom: none;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 20px 10px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.3s;
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Custom Chevron using CSS pseudo-element */
.faq summary::after {
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 20px;
  font-weight: 300;
  color: var(--muted);
  transition: transform 0.3s ease, color 0.3s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--accent);
}

.faq details>div {
  padding: 20px 10px 24px;
  color: rgba(235, 235, 245, 0.7);
  line-height: 1.7;
  font-weight: 400;
}


/* Enlace destacado dentro del FAQ */
.faq a.programas-link {
  color: var(--brand);
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(139, 92, 246, .65);
  text-underline-offset: 3px;
}

.faq a.programas-link:hover {
  color: #fff;
  text-decoration-color: rgba(255, 209, 26, .65);
}

/* Bloque sutil: alternativa a Tu Mejor Versión (programas guiados) */
.programas-bridge {
  padding: 0 0 34px;
}

.programas-bridge__card {
  border-radius: 26px;
  border: 1px solid rgba(139, 92, 246, .22);
  background:
    radial-gradient(760px 240px at 6% 18%, rgba(139, 92, 246, .22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .03));
  box-shadow: var(--soft);
  overflow: hidden;
}

.programas-bridge__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 22px;
}

.programas-bridge__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #e9e3ff;
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.programas-bridge__kicker .tag {
  display: inline-block;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, .14);
  border: 1px solid rgba(139, 92, 246, .28);
  color: var(--brand-300);
  font-weight: 900;
  font-size: .86rem;
  white-space: nowrap;
}

.programas-bridge__left {
  display: flex;
  justify-content: center;
}

.programas-bridge__left-inner {
  width: min(70ch, 100%);
}

.programas-bridge__cta {
  display: flex;
  justify-content: center;
}

.programas-bridge__cta-inner {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  width: min(320px, 100%);
}

.programas-bridge__text {
  color: var(--muted);
  margin: 0 0 10px;
  padding-left: 18px;
}

.programas-bridge__list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  display: grid;
  gap: .45rem;
}

.programas-bridge__list li {
  position: relative;
  padding-left: 18px;
}

.programas-bridge__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: .02rem;
  color: rgba(233, 227, 255, .78);
  font-weight: 900;
}

.programas-bridge__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, .55);
  background: rgba(139, 92, 246, .10);
  color: #efeaff;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
  width: 100%;
}

.programas-bridge__btn:hover {
  transform: translateY(-2px);
  background: rgba(139, 92, 246, .16);
  border-color: rgba(139, 92, 246, .78);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
}

.programas-bridge__note {
  margin: 0;
  color: rgba(169, 177, 197, .88);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  text-align: center;
}

@media (max-width: 820px) {
  .only-desktop {
    display: none !important;
  }

  .hero .hero-sheet .byline {
    text-align: center !important;
  }

  .programas-bridge__grid {
    grid-template-columns: 1fr;
  }

  .programas-bridge__left {
    justify-content: flex-start;
  }

  .programas-bridge__left-inner {
    width: 100%;
  }

  .programas-bridge__cta {
    justify-content: flex-start;
  }

  .programas-bridge__cta-inner {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .programas-bridge__note {
    text-align: left;
  }
}


/* FAQ como "subpágina" */
body.faq-mode main>section:not(#faq) {
  filter: blur(1.5px);
  opacity: .6;
  pointer-events: none;
  transition: filter .2s, opacity .2s
}

body.faq-mode #faq {
  position: relative;
  z-index: 1
}

/* Backdrop visible cuando el menú móvil está abierto */
@media (max-width:1020px) {
  #navBackdrop {
    display: none
  }
}

/* Cookie overlay */
#cn-cookie {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(820px, 94%);
  padding: 16px 18px;
  background: rgba(18, 21, 33, .96);
  color: #e7e9ee;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  z-index: 9999
}

#cn-cookie p {
  margin: 0 0 10px
}

#cn-cookie .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

#cn-cookie .actions .btn {
  min-width: 120px
}

@media (max-width:560px) {
  #cn-cookie {
    bottom: 12px
  }

  #cn-cookie .actions .btn {
    flex: 1
  }
}

/* Footer responsive sin sección de recursos */
@media (max-width:560px) {
  footer .cols {
    grid-template-columns: 1fr;
    text-align: center
  }

  footer .brand {
    justify-content: center
  }

  footer .socials {
    justify-content: center
  }
}

/* #quien: alto marcado por el texto + imagen completa sin recorte (relleno sin bandas) */
@media (min-width:1021px) {

  /* 1) Que el alto del row lo marque el texto */
  #quien .grid-2 {
    align-items: stretch !important;
  }

  /* 2) La card de la imagen sin padding que añada alto */
  #quien .grid-2>.feature:last-child {
    padding: 0 !important;
  }

  /* 3) Frame ocupa exactamente el alto del recuadro (el que marque el texto) */
  #quien .quien-photo-frame {
    position: relative;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    border-radius: 22px;
    overflow: hidden;
    background: #0e1117;
  }

  /* 4) Relleno para que no se vean bandas negras/grises con contain */
  #quien .quien-photo-frame::before {
    content: "";
    position: absolute;
    inset: -18px;
    background: url("../img/noemi1.webp") center/cover no-repeat;
    /* usa la MISMA imagen */
    filter: blur(18px);
    transform: scale(1.06);
    opacity: .45;
    z-index: 0;
    pointer-events: none;
  }

  /* 5) Imagen principal completa (NO recorta) y no “empuja” el alto */
  #quien .quien-photo-frame img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    z-index: 1;
  }
}

/* Base (todas las vistas): wrappers de imágenes (mantiene móvil igual) */
.hero .hero-media {
  display: block;
}

#quien .quien-photo-frame {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  place-items: center;
}

#quien .quien-photo-frame img {
  image-rendering: auto;
  object-fit: cover;
  aspect-ratio: 4/5;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  object-position: center center;
}

/* === Ajustes SOLO escritorio: igualar altura imagen/texto (Hero y Quién soy) === */
@media (min-width:1021px) {

  /* HERO: la imagen no debe "mandar" la altura. Se ajusta a la altura del bloque de texto */
  .hero .wrap {
    align-items: stretch;
  }

  .hero .hero-media {
    position: relative;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, .08);
    background: #000;
  }

  .hero .hero-media>img.media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .hero .hero-media>img.media {
    z-index: 0;
  }

  /* Capítulos (PC): micro-variación de fondo para evitar "todo el mismo negro" */
  #dolor {
    background:
      radial-gradient(1200px 520px at 20% 10%, rgba(139, 92, 246, .10), transparent 62%),
      radial-gradient(900px 520px at 86% 40%, rgba(255, 209, 26, .05), transparent 64%);
  }

  #programa {
    background:
      radial-gradient(1100px 520px at 80% 10%, rgba(139, 92, 246, .08), transparent 62%),
      radial-gradient(900px 520px at 12% 55%, rgba(255, 209, 26, .04), transparent 64%);
  }

  #quien {
    background:
      radial-gradient(1200px 560px at 16% 18%, rgba(139, 92, 246, .09), transparent 62%),
      radial-gradient(900px 520px at 88% 70%, rgba(255, 209, 26, .035), transparent 64%);
  }

  section[aria-labelledby="testi-title"] {
    background:
      radial-gradient(1200px 560px at 78% 12%, rgba(139, 92, 246, .075), transparent 62%),
      radial-gradient(900px 520px at 18% 70%, rgba(255, 209, 26, .04), transparent 64%);
  }

  #faq {
    background:
      radial-gradient(1200px 560px at 18% 18%, rgba(139, 92, 246, .07), transparent 62%),
      radial-gradient(900px 520px at 82% 70%, rgba(255, 209, 26, .035), transparent 64%);
  }

  /* QUIÉN ES NOEMÍ: la imagen ocupa todo el recuadro y se ve completa */
  #quien .grid-2 {
    align-items: stretch !important;
  }

  /* El recuadro de la foto sin padding raro */
  #quien .grid-2>.feature:last-child {
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* El frame no debe tener padding 16 ni centrar con grid */
  #quien .quien-photo-frame {
    padding: 0 !important;
    display: block !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* Anula los topes que la encogen */
  #quien .grid-2>.feature:last-child>div {
    max-width: none !important;
    margin: 0 !important;
  }

  #quien .grid-2 img {
    max-height: none !important;
  }

  /* Imagen: completa dentro del recuadro */
  #quien .quien-photo-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* CLAVE: no recorta */
    object-position: center !important;
    border: 0 !important;
    border-radius: inherit !important;
    display: block !important;
  }


}

/* =============================
   MOBILE PREMIUM RESTYLING v8
   (solo móvil) – HERO más “poster” (foto manda) + sheet más compacta
   Objetivo: ver MUCHA más imagen sin perder CTAs ni claridad
   ============================= */
@media (max-width: 820px) {

  /* Header más ligero encima del hero */
  header {
    background: #000 !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
  }

  header.scrolled {
    background: #000 !important;
  }

  /* HERO full-bleed: imagen protagonista */
  .hero {
    position: relative !important;
    min-height: calc(100svh - var(--hdr)) !important;
    padding: 0 0 12px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/noemi2.webp');
    background-size: cover;
    /* subimos el encuadre para que se vea MÁS cara/arriba */
    background-position: center 6%;
    transform: scale(1.02);
    filter: brightness(1.12) saturate(1.05) contrast(1.04);
  }

  /* Oscurecido controlado: solo para legibilidad (sin matar la foto) */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(980px 520px at 30% 12%, rgba(139, 92, 246, .16), transparent 62%),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .06) 26%,
        rgba(14, 17, 23, .22) 52%,
        rgba(14, 17, 23, .62) 78%,
        rgba(14, 17, 23, 1) 100%);
  }


  /* Transición suave HERO → sección dolor (solo móvil)
     Fade real al final del hero (no depende de z-index del #dolor). */
  .hero {
    position: relative;
  }

  .hero .hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 110px;
    pointer-events: none;
    z-index: 1;
    /* por encima del fondo, por debajo del contenido (container z-index:2) */
    background: linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(5, 6, 7, .55) 55%,
        rgba(5, 6, 7, 1) 100%);
  }

  .hero .container.wrap {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: calc(100svh - var(--hdr)) !important;
    padding: calc(var(--hdr) + 12px) 0 0 !important;
  }

  /* Ocultamos la imagen duplicada: el fondo ya es la imagen */
  .hero .hero-media {
    display: none !important;
  }

  /* El bloque de contenido del hero no debe parecer “caja encima de foto” */
  .hero .container.wrap>div:first-child {
    margin: 0 !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Poster: lo bajamos para que se vea MÁS imagen arriba */
  .hero .hero-poster {
    /* Ocupa el espacio para que la foto sea protagonista y el título quede abajo */
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    padding: 0 14px 10px !important;
    margin-top: 0 !important;
    min-height: 32vh !important;
  }

  /* Kicker como chip premium (más pequeño para no tapar la cara) */
  .hero {
    position: relative !important;
    padding-bottom: 0 !important;
  }

  .hero .hero-poster .kicker {
    position: absolute !important;
    top: calc(var(--navH, 72px) + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(14, 17, 23, .28) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: rgba(233, 227, 255, .88) !important;
    font-size: 10px !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    backdrop-filter: blur(10px) saturate(1.12);
    -webkit-backdrop-filter: blur(10px) saturate(1.12);
  }

  .hero .hero-poster .kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 209, 26, .10);
  }

  /* Titular: MÁS contraste sobre foto (placa sutil + glow) */
  .hero .hero-poster h1 {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 10px 14px 12px !important;
    margin: 0 !important;
    font-size: clamp(26px, 6.7vw, 32px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    color: #0b0c10 !important;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    -webkit-font-smoothing: antialiased;
  }

  .hero .hero-poster h1::before {
    content: "";
    position: absolute;
    inset: -10px -12px -12px -12px;
    border-radius: 22px 28px 18px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .10));
    border: 1px solid rgba(255, 255, 255, .20);
    backdrop-filter: blur(12px) saturate(1.10);
    -webkit-backdrop-filter: blur(12px) saturate(1.10);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
    z-index: -1;
  }

  .hero .hero-poster h1 .hl {
    color: transparent;
    background: linear-gradient(90deg, rgba(139, 92, 246, 1) 0%, rgba(76, 29, 149, 1) 60%, rgba(11, 12, 16, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .22));
  }


  /* Sheet: más compacta, más abajo, y con menos “muralla” */
  .hero .hero-sheet {
    display: block !important;
    position: relative !important;
    margin: 10px 0 0 !important;
    padding: 14px 14px 14px !important;
    border-radius: 28px 28px 18px 28px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: linear-gradient(180deg, rgba(15, 17, 22, .94), rgba(15, 17, 22, .88)) !important;
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .62);
  }

  .hero .hero-sheet::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(139, 92, 246, .70), rgba(255, 255, 255, .12), rgba(139, 92, 246, .12));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .45;
  }

  /* Copy: menos altura, más aire */
  .hero .hero-sheet .lead {
    font-size: 14.7px !important;
    line-height: 1.5 !important;
    color: rgba(192, 199, 214, .92) !important;
    margin: 0 0 12px !important;
    display: block !important;
  }

  /* CTAs: rediseño (pill premium + ghost sólido) */
  .hero .hero-sheet .cta-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    margin-top: 6px !important;
  }

  .hero .hero-sheet .cta-row .btn {
    width: 100% !important;
    border-radius: 999px !important;
    padding: 14px 16px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    letter-spacing: .2px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .52) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(124, 58, 237, 1)) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
  }

  .hero .hero-sheet .cta-row .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 60px at 18% 30%, rgba(255, 255, 255, .28), transparent 60%);
    opacity: .45;
    pointer-events: none;
  }

  /* Icono en burbuja a la derecha */
  .hero .hero-sheet .cta-row .btn::after {
    content: "→";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .16);
    font-weight: 900;
  }

  .hero .hero-sheet .cta-row .btn.alt {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .92) !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
  }

  .hero .hero-sheet .cta-row .btn.alt::before {
    opacity: .35;
  }

  .hero .hero-sheet .cta-row .btn.alt::after {
    content: "↘";
    background: rgba(255, 255, 255, .06);
  }

  /* Byline: más compacto */
  .hero .hero-sheet .byline {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(201, 207, 222, .86) !important;
    font-weight: 700 !important;
    text-align: left !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Beneficios: chips en carrusel (más compactos) */
  .hero .hero-sheet .badges {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 10px 2px 2px !important;
    margin-top: 6px !important;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .hero .hero-sheet .badges::-webkit-scrollbar {
    display: none
  }

  .hero .hero-sheet .badge {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    border-radius: 999px !important;
    padding: 9px 12px !important;
    background: rgba(28, 31, 40, .85) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: rgba(240, 238, 255, .92) !important;
    font-weight: 900 !important;
    font-size: 12.7px !important;
    white-space: nowrap;
  }

  /* Stats: 3 en la misma línea y MISMO ancho (sin scroll) */
  .hero .hero-sheet .stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .hero .hero-sheet .stat {
    min-width: 0 !important;
    padding: 10px 10px !important;
    border-radius: 22px 22px 14px 22px !important;
    background: rgba(28, 31, 40, .78) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    text-align: center !important;
  }

  .hero .hero-sheet .stat .big {
    font-size: 19px !important;
    letter-spacing: .2px;
  }

  .hero .hero-sheet .stat .muted {
    font-size: 11px !important;
    line-height: 1.15 !important;
    display: block;
  }




  /* ====== v10 tweaks (solo móvil) ====== */

  /* Header flotante minimal */
  :root {
    --hdr: 60px;
  }

  body {
    padding-top: 0 !important;
  }

  header {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    border-radius: 999px !important;
    padding: 8px 8px !important;
    background: #000 !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }

  header.scrolled {
    background: #000 !important;
    border-color: rgba(255, 255, 255, .14) !important;
  }

  header .container.nav {
    padding: 0 !important;
    gap: 10px !important;
  }

  header .brand {
    gap: 10px !important;
  }

  header .brand .logo {
    width: 30px !important;
    height: 30px !important;
  }

  header .brand .wordmark {
    font-size: 15px !important;
    font-weight: 850 !important;
    letter-spacing: .15px !important;
  }

  header .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
    backdrop-filter: blur(10px) saturate(1.1) !important;
    position: relative !important;
    margin-left: auto !important;
    align-self: center !important;
    top: 0 !important;
    /* centrado vertical */
    margin-top: 0 !important;
    margin-right: 0 !important;
  }

  header .mobile-toggle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 0 rgba(255, 255, 255, .78), 0 -6px 0 rgba(255, 255, 255, .78);
    transform: translate(-50%, -50%);
    /* centra de verdad dentro del círculo */
    opacity: .92;
  }

  /* Menú desplegable: que caiga justo debajo de la pill del header (no pegado arriba) */
  #primaryNav {
    top: calc(10px + var(--hdr) + 10px) !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 18px !important;
  }


  /* Kicker arriba del todo, debajo del header (más protagonista la cara) */
  .hero .hero-poster {
    position: relative !important;
  }

  .hero .hero-poster .kicker {
    position: absolute !important;
    top: calc(var(--hdr) + 10px) !important;
    left: 14px !important;
    right: 14px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
    background: rgba(14, 17, 23, .38) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
  }

  /* Título: 1 sola línea, abajo, y sin tapar la cara */
  .hero .hero-poster h1 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;

    /* 1 línea */
    white-space: nowrap !important;
    font-size: clamp(30px, 8.5vw, 40px) !important;
    letter-spacing: .25px !important;

    /* Pegado a la sheet */
    margin: 0 0 6px !important;
    padding: 10px 14px 12px !important;
  }

  .hero .hero-poster h1::before {
    inset: -10px 0 -12px 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(10, 12, 16, .40), rgba(10, 12, 16, .10)) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
  }

  /* Quitar la “línea” entre hero y la siguiente sección (suavizar degradado + solape 1px) */
  .hero {
    padding-bottom: 0 !important;
  }

  .hero::after {
    background:
      radial-gradient(980px 520px at 30% 12%, rgba(139, 92, 246, .14), transparent 62%),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .05) 28%,
        rgba(14, 17, 23, .20) 56%,
        rgba(14, 17, 23, .58) 82%,
        rgba(14, 17, 23, 1) 100%) !important;
  }

  #dolor {
    margin-top: -1px !important;
  }

  /* Transición: cabecera centrada en móvil para que el salto desde el hero se vea intencional */
  #dolor .container>h2,
  #dolor .container>.lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 42ch;
  }

  #dolor .container>h2 {
    letter-spacing: -.2px;
  }

  #dolor .container>.lead {
    opacity: .92;
  }

  /* Ajuste global: tarjetas menos “rectángulo de plantilla” */
  .feature {
    border-radius: 26px 26px 26px 12px !important;
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  }

  /* ====== v13 ajustes (solo móvil) ====== */

  /* 1) Ocultar kicker (no nos gusta cómo queda) */
  .hero .hero-poster .kicker {
    display: none !important;
  }

  /* 2) “Tu mejor versión” en morado difuminando a negro para mejor contraste con la foto */
  .hero .hero-poster h1 .hl {
    background: linear-gradient(90deg,
        rgba(139, 92, 246, 1) 0%,
        rgba(139, 92, 246, .92) 55%,
        rgba(11, 11, 18, 1) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .45));
  }

  /* 3) Byline centrada (horizontal + vertical) en móvil */
  .hero .hero-sheet .byline {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
  }


  /* ====== v14 refinado premium (solo móvil) ====== */

  /* Header: borde degradado sutil y tacto más premium */
  header {
    overflow: visible !important;
  }

  header::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(139, 92, 246, .55), rgba(255, 255, 255, .18), rgba(139, 92, 246, .14));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .80;
  }

  header .mobile-toggle {
    transition: transform .15s ease, background .2s ease, border-color .2s ease;
  }

  header .mobile-toggle:active {
    transform: scale(.97);
  }

  /* Hero: movimiento leve del fondo (respeta reducir movimiento) */
  .hero::before {
    will-change: transform;
  }

  @keyframes heroZoom {
    0% {
      transform: scale(1.02);
    }

    50% {
      transform: scale(1.07);
    }

    100% {
      transform: scale(1.02);
    }
  }

  /* Sheet: highlight superior para acabado premium */
  .hero .hero-sheet {
    overflow: hidden !important;
  }

  .hero .hero-sheet::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 28%),
      radial-gradient(240px 140px at 18% 0%, rgba(139, 92, 246, .18), transparent 70%);
    pointer-events: none;
    opacity: .55;
  }

  /* CTAs: microinteracción al tocar */
  .hero .hero-sheet .cta-row .btn {
    transition: transform .12s ease, filter .2s ease;
  }

  .hero .hero-sheet .cta-row .btn:active {
    transform: translateY(1px) scale(.992);
    filter: brightness(1.02);
  }

  .hero .hero-sheet .cta-row .btn.alt:active {
    filter: brightness(1.08);
  }

  /* Badges: snap y borde más definido */
  .hero .hero-sheet .badges {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .hero .hero-sheet .badge {
    scroll-snap-align: start;
    background: rgba(28, 31, 40, .88) !important;
    border-color: rgba(255, 255, 255, .14) !important;
  }

  .hero .hero-sheet .badges::-webkit-scrollbar {
    display: none;
  }

  /* Stats: siempre 3 columnas iguales, sin recortes */
  .hero .hero-sheet .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .hero .hero-sheet .stat {
    min-width: 0 !important;
  }

  /* Transición a la siguiente sección: menos aire arriba (evita “salto raro”) */
  #dolor {
    padding-top: 44px !important;
    background: var(--bg) !important;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: heroZoom 18s ease-in-out infinite;
  }
}


@media (max-width: 820px) {

  /* Remove the tiny seam between hero and next section */
  .hero {
    position: relative;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 28px;
    background: linear-gradient(to bottom, rgba(14, 17, 23, 0) 0%, var(--bg) 85%);
    pointer-events: none;
  }

  #dolor {
    margin-top: -1px;
  }
}

@media (max-width: 480px) {
  .hero .hero-sheet .stat .big {
    font-size: 18px !important;
  }

  .hero .hero-sheet .stat .muted {
    font-size: 10.5px !important;
  }

  .hero .hero-poster {
    margin-top: clamp(100px, 30vh, 220px) !important;
  }

  .hero .hero-poster h1 {
    font-size: clamp(26px, 7.4vw, 32px) !important;
    padding: 9px 12px 11px !important;
  }

  .hero .hero-poster h1::before {
    inset: -9px -11px -11px -11px;
  }

  .hero .hero-sheet .cta-row .btn {
    padding: 13px 16px !important;
  }

  .hero .hero-sheet .stat {
    min-width: 112px;
  }
}



/* ====== v18: transición hero → #dolor más elegante (solo móvil) ====== */
@media (max-width:820px) {

  /* Separación real: nada de solapes raros */
  .hero .hero-sheet {
    margin-bottom: 16px !important;
  }

  /* Entrada suave a la sección de dolor (sin “amontonamiento”) */
  #dolor {
    position: relative;
    margin-top: 0 !important;
    padding-top: 28px !important;
    background: var(--bg);
  }

  /* Fade superior sutil para integrar visualmente, sin pegar secciones */
  #dolor::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 26px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    background: linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, 1) 100%);
    pointer-events: none;
  }
}

/* Panel superior curvo para que no haya corte brusco a fondo full-width */
#dolor {
  position: relative;
  margin-top: -26px !important;
  padding-top: 76px !important;
  /* compensa el solape */
  background: var(--bg);
}

#dolor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  height: 72px;
  border-top-left-radius: 34px;
  border-top-right-radius: 34px;
  background: linear-gradient(180deg,
      rgba(15, 17, 22, 0) 0%,
      rgba(14, 17, 23, .80) 45%,
      rgba(14, 17, 23, 1) 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .06) inset;
  pointer-events: none;
}
}


/* ====== v19: ajustes finales (solo móvil) ====== */
@media (max-width:820px) {

  /* Beneficios: 4 chips en grid centrado (mismo ancho) */
  .hero .hero-sheet .badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 10px 0 0 !important;
    margin: 10px auto 0 !important;
    max-width: 360px;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .hero .hero-sheet .badge {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 40px;
  }

  /* Transición hero → #dolor más suave y “premium” */
  .hero {
    position: relative;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 72px;
    background: linear-gradient(180deg, rgba(14, 17, 23, 0) 0%, rgba(14, 17, 23, .92) 55%, rgba(14, 17, 23, 1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .hero .hero-sheet {
    position: relative;
    z-index: 2;
    margin-bottom: -34px !important;
  }

  #dolor {
    margin-top: -34px !important;
    padding-top: 68px !important;
  }

  #dolor::before {
    top: -34px !important;
    height: 86px !important;
    border-top-left-radius: 38px !important;
    border-top-right-radius: 38px !important;
    background: linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, .55) 35%,
        rgba(14, 17, 23, 1) 100%) !important;
    box-shadow: none !important;
  }
}




/* ====== v26: FIX corte en móvil (stacking del solape hero → #dolor) ====== */
@media (max-width:820px) {

  /* En algunos móviles, el ::before de #dolor se pinta por encima y “corta” la fila de stats.
     Solución: forzar orden de apilado: hero siempre por encima del panel curvo. */
  .hero {
    position: relative;
    z-index: 5 !important;
  }

  .hero .hero-sheet {
    position: relative;
    z-index: 6 !important;
  }

  #dolor {
    position: relative;
    z-index: 1 !important;
  }

  #dolor::before {
    z-index: 0 !important;
  }

  #dolor .container {
    position: relative;
    z-index: 2;
  }
}

/* ====== v21: barra superior negra + transición tipográfica más elegante (solo móvil) ====== */
@media (max-width:820px) {

  /* Barra superior: negro sólido (sin gris translúcido) */
  header {
    background: #05060a !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }

  header.scrolled {
    background: #05060a !important;
  }

  header .mobile-toggle {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .14) !important;
  }

  /* Transición: mantenemos el cuerpo de la página a la izquierda,
     pero en el arranque de #dolor centramos el título y dejamos el texto alineado a la izquierda (más natural). */
  #dolor .container>h2 {
    text-align: center !important;
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #dolor .container>.lead {
    text-align: left !important;
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ====== v27: FIX definitivo corte en móvil (espacio bajo stats para que la transición no tape contenido) ====== */
@media (max-width:820px) {

  /* La transición hace un “solape” hacia arriba; añadimos colchón inferior a la tarjeta del hero
     para que el solape se coma fondo, no texto. */
  .hero .hero-sheet {
    padding-bottom: 54px !important;
  }
}




/* Quién es: en escritorio no plegamos (mantiene lectura y SEO) */
#quien .readmore {
  max-height: none;
  overflow: visible;
}

#quien .readmore-btn {
  display: none;
}

/* =============================
   MOBILE PREMIUM RESTYLING v30
   (solo móvil) – resto de la página
   Objetivo: menos “plantilla”, más “premium app”
   ============================= */
@media (max-width:820px) {

  /* 0) Ritmo y tipografía general en móvil */
  section {
    padding: 46px 0 !important;
  }

  main {
    overflow-x: hidden;
  }

  .lead {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* 1) Cabeceras de sección con detalle premium (solo dentro de main, no en footer/modales) */
  main>section:not(.hero) h2 {
    position: relative;
    margin: 0 0 14px !important;
    letter-spacing: .6px;
  }

  main>section:not(.hero) h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 1), rgba(255, 209, 26, .92));
    opacity: .92;
  }

  /* 2) “Panel” premium para cada bloque: fondo, borde y sombra suaves */
  #dolor .container,
  #programa .container,
  #quien .container,
  #faq .container,
  section[aria-labelledby="testi-title"] .container {
    padding: 18px 16px !important;
    border-radius: 28px !important;
    background:
      radial-gradient(720px 220px at 10% 0%, rgba(139, 92, 246, .10), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)) !important;
    border: 1px solid rgba(255, 255, 255, .075) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .30) !important;
  }

  /* Secciones largas: menos glow para descansar la vista */
  #quien .container,
  #faq .container {
    background:
      radial-gradient(720px 220px at 10% 0%, rgba(139, 92, 246, .075), transparent 62%),
      linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .26) !important;
  }

  /* 3) Tarjetas: menos “bloque”, más “glass” */
  .feature {
    border-radius: 26px 26px 26px 14px !important;
    background: rgba(255, 255, 255, .032) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
  }

  .feature h3 {
    margin: .2rem 0 .45rem !important;
  }

  .feature .muted {
    color: rgba(169, 177, 197, .92) !important;
  }


  /* 3.5) Señales visuales de swipe: hint + dots + fades en los laterales */
  .m-swipe-wrap {
    position: relative;
    margin-top: 8px;
  }

  .m-swipe-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 10px;
  }

  .m-swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: .82rem;
    color: rgba(169, 177, 197, .92);
    letter-spacing: .1px;
    user-select: none;
  }

  .m-swipe-arrow {
    color: rgba(255, 209, 26, .95);
    font-size: 1rem;
    line-height: 1;
  }

  .m-swipe-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .95;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(10, 12, 17, .42);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px) saturate(1.08);
    -webkit-backdrop-filter: blur(8px) saturate(1.08);
  }

  .m-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  }

  .m-dot.is-active {
    background: rgba(255, 209, 26, .92);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 209, 26, .10);
  }

  .m-swipe-wrap::before,
  .m-swipe-wrap::after {
    content: "";
    position: absolute;
    top: 44px;
    /* debajo de hint+dots */
    bottom: 0;
    width: 30px;
    pointer-events: none;
    z-index: 4;
  }

  .m-swipe-wrap::before {
    left: -1px;
    background: linear-gradient(90deg, rgba(14, 17, 23, 1) 0%, rgba(14, 17, 23, 0) 100%);
  }

  .m-swipe-wrap::after {
    right: -1px;
    background: linear-gradient(270deg, rgba(14, 17, 23, 1) 0%, rgba(14, 17, 23, 0) 100%);
  }

  .m-swipe-wrap.has-scrolled .m-swipe-hint {
    opacity: .55;
  }

  /* Affordance extra: que se note el swipe aunque el wrapper no aparezca (móvil) */
  #dolor .grid-3,
  #programa .grid-3 {
    position: relative;
  }

  #dolor .grid-3::before,
  #dolor .grid-3::after,
  #programa .grid-3::before,
  #programa .grid-3::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    z-index: 5;
  }

  #dolor .grid-3::before,
  #programa .grid-3::before {
    left: 0;
    background: linear-gradient(90deg, rgba(14, 17, 23, 1) 0%, rgba(14, 17, 23, 0) 100%);
  }

  #dolor .grid-3::after,
  #programa .grid-3::after {
    right: 0;
    background: linear-gradient(270deg, rgba(14, 17, 23, 1) 0%, rgba(14, 17, 23, 0) 100%);
  }

  /* Etiqueta “Desliza” (solo al principio) */
  .m-swipe-label {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 850;
    font-size: .78rem;
    color: rgba(236, 238, 247, .92);
    background: rgba(18, 20, 28, .62);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    user-select: none;
  }

  .m-swipe-label i {
    font-style: normal;
    color: rgba(255, 209, 26, .92);
    font-size: 1rem;
    line-height: 1;
  }

  @keyframes swipeNudge {

    0%,
    100% {
      transform: translateX(0);
      opacity: 1;
    }

    50% {
      transform: translateX(-6px);
      opacity: .92;
    }
  }

  .m-swipe-label.is-anim {
    animation: swipeNudge 1.25s ease-in-out infinite;
  }


  /* 4) “Dolor” en carrusel swipe (más dinámico y premium) */
  #dolor .grid-3 {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px 16px 12px !important;
    margin: 14px -16px 0 !important;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  #dolor .grid-3::-webkit-scrollbar {
    display: none;
  }

  #dolor .grid-3>.feature {
    flex: 0 0 86%;
    max-width: 420px;
    scroll-snap-stop: always;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
  }

  #dolor .grid-3>.feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(220px 120px at 16% 8%, rgba(255, 209, 26, .10), transparent 60%),
      radial-gradient(240px 140px at 92% 0%, rgba(139, 92, 246, .12), transparent 62%);
    opacity: .9;
  }

  /* 5) “Programa” en carrusel con numeración elegante */
  #programa .grid-3 {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px 16px 12px !important;
    margin: 14px -16px 0 !important;
    counter-reset: prog;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }

  #programa .grid-3::-webkit-scrollbar {
    display: none;
  }

  #programa .grid-3>.feature {
    flex: 0 0 82%;
    max-width: 420px;
    scroll-snap-stop: always;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    padding-top: 18px !important;
  }

  #programa .grid-3 {
    counter-reset: prog;
  }

  #programa .grid-3>.feature {
    counter-increment: prog;
  }

  #programa .grid-3>.feature::before {
    content: counter(prog, decimal-leading-zero);
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: .98rem;
    letter-spacing: .02em;
    color: rgba(226, 232, 240, .92);
    background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(139, 92, 246, .06));
    border: 1px solid rgba(139, 92, 246, .26);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }

  #programa .grid-3>.feature::after {
    /* Línea de acento lateral */
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 14px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .0), rgba(139, 92, 246, .55), rgba(255, 209, 26, .28), rgba(139, 92, 246, .0));
    opacity: .85;
    pointer-events: none;
  }

  #programa .grid-3>.feature h3 {
    padding-left: 10px;
  }

  /* 6) Toggle “Ver el plan por dentro”: que parezca parte del flujo, no un botón perdido */
  #programa .toggle-cta {
    margin-top: 12px !important;
  }

  #programa .toggle-link {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 14px 16px !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    position: relative;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  #programa .toggle-link__label {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
  }

  #programa .toggle-link__icon {
    position: static;
  }

  #programaExtra {
    margin-top: 12px !important;
    gap: 14px !important;
  }

  #programaExtra .feature {
    padding: 18px !important;
  }

  #programaExtra ol,
  #programaExtra ul {
    padding-left: 18px !important;
  }

  #programaExtra li {
    margin: 10px 0 !important;
  }


  #dolor .m-mobile-head .lead {
    text-align: center;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }


  /* 6.b) Contenido desplegable "plan por dentro" (móvil): evitar 2 columnas, mejorar lectura */
  @media (max-width: 820px) {

    /* El contenedor estaba pensado como grid 2 columnas: en móvil debe apilarse */
    #programaExtra.grid-2 {
      gap: 0 !important;
    }

    #programaExtra.grid-2.is-open {
      display: block !important;
    }

    #programaExtra .feature {
      width: 100% !important;
      margin: 0 0 14px 0 !important;
      padding: 16px 16px 14px 16px !important;
      border-radius: 18px !important;
      background: rgba(0, 0, 0, .22) !important;
      border: 1px solid rgba(255, 255, 255, .10) !important;
      box-shadow: 0 18px 48px rgba(0, 0, 0, .55) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
    }

    #programaExtra .feature h3 {
      margin: 0 0 10px 0 !important;
      font-size: 18px !important;
      line-height: 1.15 !important;
      color: rgba(255, 255, 255, .92) !important;
      letter-spacing: .2px !important;
    }

    #programaExtra .feature p.muted {
      font-size: 15px !important;
      line-height: 1.45 !important;
      color: rgba(255, 255, 255, .78) !important;
      margin: 0 0 12px 0 !important;
    }

    /* Lista como "pasos" legibles, sin columnas raras */
    #programaExtra .feature ol.muted {
      list-style: none !important;
      padding: 0 !important;
      margin: 0 0 12px 0 !important;
      counter-reset: step;
    }

    #programaExtra .feature ol.muted li {
      counter-increment: step;
      position: relative;
      padding: 12px 12px 12px 48px !important;
      margin: 0 0 10px 0 !important;
      border-radius: 16px !important;
      background: rgba(255, 255, 255, .04) !important;
      border: 1px solid rgba(255, 255, 255, .10) !important;
      color: rgba(255, 255, 255, .80) !important;
      line-height: 1.45 !important;
    }

    #programaExtra .feature ol.muted li::before {
      content: counter(step);
      position: absolute;
      left: 14px;
      top: 12px;
      width: 26px;
      height: 26px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 13px;
      color: rgba(255, 255, 255, .92);
      background: rgba(139, 92, 246, .18);
      /* lila suave */
      border: 1px solid rgba(139, 92, 246, .45);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    }

    #programaExtra .feature ol.muted li strong {
      color: rgba(255, 255, 255, .92) !important;
    }

    /* Bullets de "Para quién es" y demás listas */
    #programaExtra .feature ul {
      padding-left: 18px !important;
      margin: 0 0 10px 0 !important;
    }

    #programaExtra .feature ul li {
      margin: 0 0 8px 0 !important;
      line-height: 1.45 !important;
      color: rgba(255, 255, 255, .78) !important;
    }
  }

  /* 7) Quién es: texto más legible y foto con encuadre “premium” */
  #quien #quien-subtitle {
    margin: 2px 0 14px !important;
  }

  #quien .grid-2 {
    gap: 14px !important;
  }

  #quien .grid-2>.feature:first-child p {
    margin: 10px 0 !important;
    line-height: 1.62;
  }

  #quien .grid-2>.feature:first-child ul {
    margin: 10px 0 0 !important;
  }

  #quien .grid-2>.feature:first-child strong {
    /* Más sutil: destaca sin parecer un neón */
    font-weight: 650;
    color: rgba(235, 232, 255, .92);
    background: linear-gradient(transparent 72%, rgba(139, 92, 246, .18) 72%);
    padding: 0 .14rem;
    border: 0;
    border-radius: 6px;
  }

  #quien .grid-2>.feature:last-child {
    border-radius: 28px !important;
  }

  #quien .quien-photo-frame {
    padding: 0 !important;
  }

  #quien .quien-photo-frame img {
    aspect-ratio: 4/5;
    object-fit: cover !important;
    object-position: center 18% !important;
    border-radius: 28px !important;
  }

  /* 7b) Quién es: cortes visuales + leer más (solo móvil) */
  #quien .mini-h3 {
    margin: 12px 0 6px !important;
    font-size: .96rem;
    letter-spacing: .3px;
    font-weight: 900;
    color: rgba(231, 233, 238, .92);
  }

  #quien .mini-h3:first-child {
    margin-top: 0 !important;
  }

  #quien .readmore-btn {
    width: 100%;
    margin: 12px 0 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
    letter-spacing: .1px;
    cursor: pointer;
  }

  #quien .readmore-btn.is-open .readmore-icon {
    transform: rotate(180deg);
  }

  #quien .readmore-icon {
    color: rgba(255, 209, 26, .92);
    font-size: 1rem;
    transition: transform .18s ease;
  }

  #quien .readmore {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }

  #quien .readmore.is-open {
    max-height: 2200px;
  }

  /* 8) Testimonios: tarjetas más “premium” + comillas sutiles */
  .t2-viewport {
    padding: 0 10px !important;
  }

  .t2-card {
    border-radius: 22px !important;
    padding: 22px !important;
    text-align: left !important;
    position: relative;
  }

  .t2-card p {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .t2-card p::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 42px;
    line-height: 1;
    color: rgba(139, 92, 246, .35);
    font-family: "Bebas Neue", system-ui, sans-serif;
    pointer-events: none;
  }

  .t2-card .author {
    margin-top: 12px !important;
    font-weight: 900 !important;
  }

  /* 9) FAQ: acordeón más claro (icono +/–) */
  .faq details {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .03) !important;
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px !important;
  }

  .faq summary::after {
    content: "+";
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: rgba(231, 233, 238, .92);
    background: rgba(139, 92, 246, .10);
    border: 1px solid rgba(139, 92, 246, .25);
    box-shadow: none;
    flex: 0 0 auto;
  }

  .faq details[open] summary::after {
    content: "–";
    background: rgba(139, 92, 246, .18);
    border-color: rgba(139, 92, 246, .35);
    color: #ffffff;
  }

  .faq details>div {
    padding: 0 16px 16px !important;
  }

  /* 10) CTA final: jerarquía clara en móvil (primero reservar, luego WhatsApp) */
  #contacto {
    text-align: left !important;
    margin-bottom: 28px !important;
  }

  #contacto .cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-content: stretch !important;
  }

  #contacto .cta-row a[href*="calendly"] {
    order: 0;
  }

  #contacto .cta-row a[href*="wa.me"] {
    order: 1;
  }

  #contacto .cta-row .btn {
    width: 100% !important;
  }
}


/* v33: Ajustes CTA final en móvil */
@media (max-width: 820px) {

  #contacto h2,
  #contacto p {
    text-align: center !important;
  }

  #contacto .cta-row {
    justify-content: center !important;
  }

  #contacto .cta-row .btn {
    width: 100%;
  }

  #contacto .cta-row {
    flex-direction: column;
    gap: 12px;
  }
}


/* v33: Swipe hint premium (visible solo en móvil) */
@media (max-width: 820px) {
  .m-swipe-wrap {
    position: relative;
    margin-top: 10px;
  }

  .m-swipe-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 10px;
    opacity: .95;
    transition: opacity .25s ease, transform .25s ease, filter .25s ease;
  }

  .m-swipe-top.is-dismissed {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(2px);
    pointer-events: none;
  }

  .m-swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(17, 21, 33, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 850;
    font-size: .82rem;
    color: rgba(226, 232, 240, .92);
    user-select: none;
  }

  .m-swipe-arrow {
    color: rgba(255, 209, 26, .92);
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
    animation: mSwipeNudge 1.2s ease-in-out infinite;
  }

  @keyframes mSwipeNudge {

    0%,
    100% {
      transform: translateX(0);
      opacity: .95;
    }

    50% {
      transform: translateX(4px);
      opacity: 1;
    }
  }

  .m-swipe-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .95;
  }

  .m-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  }

  .m-dot.is-active {
    background: rgba(139, 92, 246, .92);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .12);
  }

  .m-swipe-wrap::before,
  .m-swipe-wrap::after {
    content: "";
    position: absolute;
    top: 44px;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 4;
  }

  .m-swipe-wrap::before {
    left: -2px;
    background: linear-gradient(90deg, rgba(13, 16, 25, .95), rgba(13, 16, 25, 0));
  }

  .m-swipe-wrap::after {
    right: -2px;
    background: linear-gradient(270deg, rgba(13, 16, 25, .95), rgba(13, 16, 25, 0));
  }

  .m-swipe-track {
    position: relative;
    z-index: 3;
  }
}



/* 3.9) FIX swipe (móvil): quitar bandas que ensucian las tarjetas al deslizar */
@media (max-width: 820px) {

  /* Las bandas de degradado por pseudo-elementos creaban bloques oscuros al mover el carrusel */
  .m-swipe-wrap::before,
  .m-swipe-wrap::after,
  #dolor .grid-3::before,
  #dolor .grid-3::after,
  #programa .grid-3::before,
  #programa .grid-3::after {
    content: none !important;
    display: none !important;
  }

  /* Fade limpio: usamos mask en el propio carrusel (sin tapar las tarjetas) */
  .m-swipe-track {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
  }

  /* Un pelín más de aire lateral para que se entienda el swipe sin recortes raros */
  #dolor .grid-3,
  #programa .grid-3 {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    scroll-padding-left: 18px !important;
    scroll-padding-right: 18px !important;
  }

  /* Suavizar el “peek” para que el corte no sea tan duro */
  #dolor .grid-3>.feature,
  #programa .grid-3>.feature {
    box-shadow: 0 18px 42px rgba(0, 0, 0, .45) !important;
  }
}




/* Sticky CTA: oculto fuera de móvil */
.m-cta-bar {
  display: none;
}

/* =============================
   MOBILE PREMIUM RESTYLING v35
   Inspirado en patrones de producto top:
   - CTA sticky tipo e‑commerce
   - Controles visibles en carruseles
   - Animaciones de aparición suaves (con respeto a reduce-motion)
   ============================= */
@media (max-width: 820px) {

  /* Evitar que el CTA sticky tape contenido */
  html.has-m-cta body {
    padding-bottom: 92px;
  }

  /* Reveal suave (tipo Apple/Tesla: sin circo) */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }

  .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }


  /* Carrusel: hacer flechas más “premium” y visibles */
  .m-swipe-btn {
    top: 78px;
    width: 54px;
  }

  .m-swipe-btn button {
    width: 42px;
    height: 42px;
    background: rgba(10, 12, 18, .55);
    border: 1px solid rgba(255, 255, 255, .12);
  }

  .m-swipe-progress {
    height: 4px;
  }

  /* Hint “Desliza” con micro-animación (solo si no reduce motion) */
  @media (prefers-reduced-motion: no-preference) {
    .m-swipe-hint {
      animation: swipeHint 2.2s ease-in-out infinite;
    }

    @keyframes swipeHint {

      0%,
      100% {
        transform: translateX(0);
        opacity: .92;
      }

      50% {
        transform: translateX(6px);
        opacity: 1;
      }
    }
  }


  /* Carrusel: botones prev/next visibles + barra de progreso */
  .m-swipe-btn {
    position: absolute;
    top: 56px;
    bottom: 0;
    width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    pointer-events: none;
  }

  .m-swipe-btn.prev {
    left: 4px;
  }

  .m-swipe-btn.next {
    right: 4px;
  }

  .m-swipe-btn button {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(17, 21, 33, .56);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(236, 238, 247, .92);
    display: grid;
    place-items: center;
    padding: 0;
  }

  .m-swipe-btn button:active {
    transform: scale(.96);
  }

  .m-swipe-btn[hidden] {
    display: none !important;
  }

  .m-swipe-progress {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    overflow: hidden;
    margin: 2px 2px 8px;
  }

  .m-swipe-progress>span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(139, 92, 246, .95), rgba(255, 209, 26, .92));
    transition: width .12s linear;
  }

  /* Numeración del programa: watermark elegante (menos “sticker”) */
  #programa .grid-3>.feature {
    position: relative;
  }

  #programa .grid-3>.feature>* {
    position: relative;
    z-index: 2;
  }

  #programa .grid-3>.feature::before {
    content: counter(prog, decimal-leading-zero) !important;
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-weight: 950 !important;
    font-size: 3.15rem !important;
    letter-spacing: .02em !important;
    color: rgba(139, 92, 246, .32) !important;
    text-shadow: 0 0 18px rgba(139, 92, 246, .22) !important;
    opacity: 1 !important;
    z-index: 1 !important;
    pointer-events: none;
  }

  #programa .grid-3>.feature::after {
    opacity: .55 !important;
  }

  /* CTA sticky bottom bar (móvil) – sutil pero distinguible */
  .m-cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: rgba(8, 10, 14, .72);
    border-top: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .40);
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform .22s ease, opacity .22s ease;
  }

  .m-cta-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(139, 92, 246, 0),
        rgba(139, 92, 246, .55),
        rgba(234, 179, 8, .30),
        rgba(139, 92, 246, 0));
    opacity: .55;
    pointer-events: none;
  }

  .m-cta-bar.is-hidden {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
  }

  .m-cta-bar .inner {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 46px;
    gap: 10px;
    align-items: center;
  }

  .m-cta-bar a {
    height: 46px;
    border-radius: 999px;
    padding: 0 14px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .32);
    -webkit-tap-highlight-color: transparent;
  }

  .m-cta-bar a.primary {
    color: rgba(236, 238, 247, .98);
    background: linear-gradient(135deg, rgba(139, 92, 246, .34), rgba(255, 255, 255, .06));
    border-color: rgba(139, 92, 246, .38);
    position: relative;
    overflow: hidden;
  }

  .m-cta-bar a.primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 60px at 20% 20%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%);
    opacity: .55;
    pointer-events: none;
  }

  .m-cta-bar a.primary:hover {
    border-color: rgba(139, 92, 246, .48);
  }

  .m-cta-bar a.primary:active {
    transform: scale(.985);
  }

  .m-cta-bar a.icon {
    width: 46px;
    padding: 0;
    background: rgba(255, 255, 255, .06);
    color: rgba(236, 238, 247, .92);
    border-color: rgba(255, 255, 255, .14);
  }

  .m-cta-bar a.icon:active {
    transform: scale(.97);
  }

  .m-cta-bar a.icon svg {
    width: 20px;
    height: 20px;
  }
}




/* ===== Desktop sanity overrides (keep premium swipe only on mobile) ===== */
@media (min-width: 1021px) {

  /* Restore desktop grids (avoid horizontal swipe behavior) */
  #dolor .grid-3,
  #programa .grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior-x: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Kill mobile swipe UI on desktop */
  .m-swipe-top,
  .m-swipe-hint,
  .m-swipe-dots,
  .m-swipe-progress,
  .m-swipe-btn,
  .m-swipe-label {
    display: none !important;
  }

  /* Remove edge fades used to suggest swipe */
  #dolor .grid-3::before,
  #dolor .grid-3::after,
  #programa .grid-3::before,
  #programa .grid-3::after {
    content: none !important;
    display: none !important;
  }
}

/* Ensure swipe helpers only appear on mobile */
@media (max-width: 1020px) {
  .m-swipe-top {
    display: flex !important;
  }
}


/* =============================
   MOBILE: Tarjetas con imagen (coverflow)
   Solo en móvil: reemplaza el swipe simple por tarjetas con foto (exito1-6, dolor1-3)
   ============================= */
@media (max-width:820px) {

  /* Oculta el carrusel antiguo (solo en estas secciones) */
  #dolor .legacy-swipe,
  #programa .legacy-swipe {
    display: none !important;
  }

  /* Muestra el nuevo coverflow */
  #dolor .m-coverflow,
  #programa .m-coverflow {
    display: block !important;
  }
}

/* Por defecto (PC/Tablet): dejamos el diseño tal cual estaba */
#dolor .m-coverflow,
#programa .m-coverflow {
  display: none;
}

/* ---- Coverflow (scoped, no toca el resto) ---- */
@media (max-width:820px) {
  .m-coverflow {
    margin-top: 14px;
  }

  .m-coverflow .progCoverflow {
    position: relative;
    width: 100%;
  }

  .m-coverflow .cfStage {
    position: relative;
    height: 520px;
    max-width: 560px;
    margin: 0 auto;
    perspective: 1200px;
    outline: none;
  }

  .m-coverflow .cfCard {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
    transform-origin: center;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, filter .35s ease;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  }

  .m-coverflow .cfCard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--img) center/cover no-repeat;
    filter: saturate(1.05) contrast(1.05);
    opacity: .38;
    transform: scale(1.02);
  }

  .m-coverflow .cfMedia {
    position: absolute;
    inset: 0;
    background: var(--img) center/cover no-repeat;
    opacity: .0;
  }

  .m-coverflow .cfBody {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
  }

  .m-coverflow .cfPanel {
    padding: 16px 16px 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .35));
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .m-coverflow .cfMeta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .m-coverflow .cfNum {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(139, 92, 246, .16);
    border: 1px solid rgba(139, 92, 246, .32);
    font-weight: 900;
    letter-spacing: .5px;
  }

  .m-coverflow .cfTag {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
  }

  .m-coverflow .cfTitle {
    font-size: 28px;
    line-height: 1.05;
    margin: 0 0 10px;
    letter-spacing: -.6px;
  }

  .m-coverflow .cfText {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
    font-size: 15px;
    letter-spacing: -.1px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  }

  .m-coverflow .cfChips {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 0 4px 2px;
    justify-content: center;
    align-items: center;
  }

  .m-coverflow .cfChips {
    overflow: visible;
  }

  .m-coverflow .cfChip {
    white-space: nowrap;
  }

  .m-coverflow .cfChip {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .m-coverflow .cfChip span {
    opacity: .9;
    font-weight: 900;
  }

  .m-coverflow .cfNav {
    position: absolute;
    top: 76%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 209, 26, .35);
    color: rgba(255, 209, 26, .95);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    z-index: 5;
  }

  .m-coverflow .cfNav:active {
    transform: translateY(-50%) scale(.98);
  }

  .m-coverflow .cfPrev {
    left: 50%;
    margin-left: -54px;
  }

  .m-coverflow .cfNext {
    left: 50%;
    margin-left: 12px;
  }

  .m-coverflow .cfDots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 2px;
  }

  .m-coverflow .cfDot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .16);
  }

  .m-coverflow .cfDot[aria-current="true"] {
    background: rgba(139, 92, 246, .9);
    border-color: rgba(139, 92, 246, .9);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .14);
  }
}

/* --- Mobile coverflow tweaks (v4): evitar solapes, centrar textos, numeración fantasma --- */
.m-coverflow .cfBody {
  padding: 16px 16px 22px;
}

/* un pelín más de aire abajo */
.m-coverflow .cfChips {
  padding: 0 6px 8px;
  gap: 12px;
}

/* como “Datos claros / Motivación real” */
.m-coverflow .cfNav {
  top: auto;
  bottom: 96px;
  transform: none;
}

/* flechas por encima de chips */
.m-coverflow .cfNav:active {
  transform: scale(.98);
}

.m-coverflow .cfPanel {
  position: relative;
  text-align: center;
}

.m-coverflow .cfTitle,
.m-coverflow .cfText {
  text-align: center;
}

.m-coverflow .cfNum {
  display: none;
}

/* quitamos el cuadrito */
.m-coverflow .cfPanel::after {
  content: attr(data-num);
  position: absolute;
  right: 14px;
  top: 8px;
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 86px;
  line-height: 1;
  color: rgba(139, 92, 246, .22);
  filter: blur(.25px);
  pointer-events: none;
}

/* En dolor no mostramos la etiqueta "Dolor" (queda redundante) */
.m-coverflow [data-coverflow="dolor"] .cfTag {
  display: none;
}


/* Mobile-only section headings (no van dentro del carrusel oculto) */
.m-mobile-head {
  display: none;
}

@media (max-width:820px) {
  .m-mobile-head {
    display: block;
    margin: 0 0 12px;
  }
}

/* === Fix modales legales en móvil (cookies/privacidad/aviso) === */
@media (max-width:820px) {
  dialog[id^="modal-"] {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 120px);
    margin: 60px auto !important;
    overflow: auto;
    padding: 0;
    border-radius: 18px;
  }

  dialog[id^="modal-"]::backdrop {
    background: rgba(0, 0, 0, .65);
  }

  /* Mantener acciones visibles y evitar que el contenido “corte” en móviles */
  dialog[id^="modal-"] form[method="dialog"] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(16, 18, 28, 1), rgba(16, 18, 28, .86));
    padding: 12px 18px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  dialog[id^="modal-"] form[method="dialog"] button {
    width: 100%;
  }

  /* Tablas dentro de la política: scroll horizontal en móvil */
  dialog[id^="modal-"] table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* PC: el desplegable "Ver el plan por dentro" debe respetar el ancho del layout */
@media (min-width: 900px) {
  #programaExtra {
    width: min(1280px, 94%);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}



/* PC – Programa (Qué incluye el programa) – legibilidad y alineación (solo desktop) */
@media (min-width: 721px) {
  #programa .progCoverflow .cfBody {
    justify-content: center;
    gap: 18px;
    padding: 18px;
  }

  #programa .progCoverflow .cfPanel {
    max-width: 640px;
    margin: 0 auto;
    padding: 18px 20px 16px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .46));
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  #programa .progCoverflow .cfMeta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
  }

  #programa .progCoverflow .cfNum {
    position: relative;
    top: -1px;
  }

  #programa .progCoverflow .cfTitle {
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 255, 255, .16), 0 2px 22px rgba(0, 0, 0, .60);
  }

  #programa .progCoverflow .cfText {
    color: #fff;
    text-shadow: 0 0 14px rgba(255, 255, 255, .10), 0 2px 18px rgba(0, 0, 0, .70);
  }

  #programa .progCoverflow .cfChips {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  #programa .progCoverflow .cfChip {
    color: #fff;
    background: rgba(0, 0, 0, .32);
    border: 1px solid rgba(255, 255, 255, .14);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .60);
  }

  #programa .progCoverflow .cfChip span {
    color: rgba(255, 255, 255, .95);
  }

  /* Inactivos: baja presencia, pero el activo se lee perfecto */
  #programa .progCoverflow .cfCard:not(.isActive) .cfPanel {
    opacity: .18;
  }

  #programa .progCoverflow .cfCard:not(.isActive) .cfChips {
    opacity: .14;
  }

  #programa .progCoverflow .cfCard.isActive .cfPanel,
  #programa .progCoverflow .cfCard.isActive .cfChips {
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
  }
}



/* =============================
   MOBILE PREMIUM POLISH (v2.1)
   - Arregla el “corte” Hero -> Dolor (mobile) sin pelearse con el resto de parches
   - Reduce marcos en coverflow (Dolor + Programa)
   - Refina FAQ + Testimonios
   ============================= */
@media (max-width: 820px) {

  /* 1) Transición HERO -> DOLOR
     En versiones anteriores, el solape estaba bien, pero luego un “section{ padding:... !important }”
     lo pisaba y volvía a aparecer la banda/costura. Aquí fijamos el estado final. */
  .hero .hero-sheet {
    margin-bottom: -34px !important;
    padding-bottom: 64px !important;
    /* colchón para que el solape no muerda texto */
  }

  #dolor {
    margin-top: -34px !important;
    padding-top: 68px !important;
    /* compensa el solape (no dejar que lo pise el padding global) */
    background: var(--bg) !important;
  }

  #dolor::before {
    top: -34px !important;
    height: 92px !important;
    border-top-left-radius: 38px !important;
    border-top-right-radius: 38px !important;
    background: linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, .55) 35%,
        rgba(14, 17, 23, 1) 100%) !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  /* 2) Coverflow: menos “marco”, más lujo (sombra + stroke interior suave) */
  .m-coverflow .cfCard {
    border: none !important;
    background: transparent !important;
    box-shadow: 0 28px 86px rgba(0, 0, 0, .62) !important;
  }

  .m-coverflow .cfCard::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .075);
    pointer-events: none;
  }

  .m-coverflow .cfPanel {
    border-color: rgba(255, 255, 255, .10) !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .30)) !important;
  }

  /* 3) FAQ: más aire y menos “caja de app” */
  .faq {
    display: grid;
    gap: 10px;
  }

  .faq details {
    border-radius: 20px !important;
    border-color: rgba(255, 255, 255, .09) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .018)) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .44);
  }

  .faq summary {
    padding: 16px 16px !important;
    font-size: 1rem;
    line-height: 1.25;
  }

  .faq summary::after {
    width: 30px;
    height: 30px;
    background: rgba(139, 92, 246, .09);
    border-color: rgba(139, 92, 246, .22);
    color: rgba(231, 233, 238, .92);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }

  .faq details[open] summary::after {
    background: rgba(255, 209, 26, .10);
    border-color: rgba(255, 209, 26, .34);
    color: rgba(255, 209, 26, .96);
  }

  .faq details>div {
    padding: 0 16px 16px !important;
    color: rgba(231, 233, 238, .82);
    line-height: 1.6;
  }

  /* 4) Testimonios: sin comillas, con detalle mínimo */
  .t2-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02)) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 22px 62px rgba(0, 0, 0, .55) !important;
  }

  .t2-card p::before {
    content: none !important;
    display: none !important;
  }

  .t2-card::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 16px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 209, 26, 0), rgba(255, 209, 26, .40), rgba(139, 92, 246, .34), rgba(255, 209, 26, 0));
    opacity: .55;
    pointer-events: none;
  }
}


/* ====== v58: más aire antes de "Si te pasa esto" (solo móvil) ====== */
(max-width:820px) {
  #dolor {
    padding-top: 112px !important;
  }
}



/* ==== extracted from inline styles ==== */


.pcOnly {
  display: none;
}

.mobOnly {
  display: block;
}

@media (min-width: 1024px) {
  .pcOnly {
    display: block;
  }

  .mobOnly {
    display: none;
  }
}


/* ==== extracted from inline styles ==== */


.pcv8 {
  --bg: #000;
  --bg2: #000;
  --card: rgba(255, 255, 255, .06);
  --card2: rgba(255, 255, 255, .08);
  --stroke: rgba(255, 255, 255, .14);
  --stroke2: rgba(167, 139, 250, .35);
  --text: rgba(255, 255, 255, .92);
  --muted: rgba(255, 255, 255, .70);
  --muted2: rgba(255, 255, 255, .55);
  --accent: #8b5cf6;
  --accent2: #d946ef;
  --gold: #f5c542;
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --r: 18px;
  --r2: 26px;
  --max: 1160px;
  --panelH: 420px;
}

.pcv8 * {
  box-sizing: border-box
}

.pcv8 html,
.pcv8 body {
  height: 100%
}

.pcv8 body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: #000;
  color: var(--text);
  overflow-x: hidden;
}

.pcv8 a {
  color: inherit;
  text-decoration: none
}

.pcv8 .wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px
}

.pcv8 .noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="180" height="180" filter="url(%23n)" opacity=".35"/></svg>');
}

.pcv8 header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #3a3f46;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pcv8 .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.pcv8 .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

.pcv8 .brand img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  object-fit: cover;
}

.pcv8 .brand span i {
  color: var(--accent);
  font-style: normal
}

.pcv8 .links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 600;
  color: var(--muted)
}

.pcv8 .links a {
  padding: 10px 10px;
  border-radius: 12px
}

.pcv8 .links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .06)
}

.pcv8 .links a.active {
  color: var(--gold)
}

.pcv8 .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  background: #fff;
  color: #151822;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.pcv8 .hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 44px 0 66px;
  isolation: isolate;
}

.pcv8 .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .78)),
    url("../img/OIP.jfif") center/cover no-repeat;
  filter: grayscale(.35) saturate(.82) contrast(1.06);
  z-index: -2;
}

.pcv8 .hero::after {
  display: none;
}

.pcv8 .heroGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.pcv8 .badgeTop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .82);
  box-shadow: none;
  backdrop-filter: none;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
  font-size: 13px;
}

.pcv8 .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: none;
}

.pcv8 h1 {
  margin: 10px 0 0;
  font-size: clamp(42px, 5.2vw, 66px);
  line-height: .95;
  letter-spacing: -1.2px;
  text-shadow: 0 16px 60px rgba(0, 0, 0, .55);
}

.pcv8 h1 .accent {
  color: var(--accent)
}

.pcv8 .sub {
  max-width: 820px;
  margin: 10px auto 0;
  color: rgba(255, 255, 255, .78);
  font-size: 18px;
  line-height: 1.45;
  text-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

.pcv8 .heroCard {
  width: min(940px, 100%);
  margin-top: 16px;
  padding: 18px 18px 16px;
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.pcv8 .heroCard::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(650px 260px at 20% 0%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(520px 260px at 85% 20%, rgba(217, 70, 239, .18), transparent 60%);
  pointer-events: none;
}

.pcv8 .heroCardInner {
  position: relative
}

.pcv8 .heroCardTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.pcv8 .stepTitle {
  font-weight: 900;
  letter-spacing: .35px;
  font-size: 13px;
  color: rgba(255, 255, 255, .86);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.pcv8 .heroCard p {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  line-height: 1.45;
  font-size: 14.6px;
}

.pcv8 .ctaRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}

.pcv8 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select: none;
}

.pcv8 .btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .11)
}

.pcv8 .btn.primary {
  background: linear-gradient(90deg, var(--gold), #ffd66f);
  color: #161824;
  border-color: rgba(0, 0, 0, .12);
}

.pcv8 .chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px
}

.pcv8 .chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
  font-size: 12.5px;
}

.pcv8 .stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pcv8 .stat {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  padding: 12px 12px;
}

.pcv8 .stat b {
  display: block;
  font-size: 18px;
  letter-spacing: .2px
}

.pcv8 .stat span {
  color: rgba(255, 255, 255, .65);
  font-weight: 650;
  font-size: 12.5px
}

.pcv8 .heroHint {
  margin-top: 14px;
  color: rgba(255, 255, 255, .62);
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, .18);
}

.pcv8 .heroHint .mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pcv8 .arrowDown {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
}

.pcv8 section {
  padding: 72px 0;
  background: #000;
}

.pcv8 .secTitle {
  font-size: 34px;
  margin: 0 0 10px;
  letter-spacing: -.6px
}

.pcv8 .secTitle .accent {
  color: var(--accent)
}

.pcv8 .secSub {
  margin: 0 0 26px;
  color: var(--muted);
  max-width: 840px;
  line-height: 1.45
}

.pcv8 .grid2 {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

.pcv8 .panel {
  height: var(--panelH);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.pcv8 .panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02) contrast(1.04);
  transform: scale(1.01);
}

.pcv8 .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .70));
  pointer-events: none;
}

.pcv8 .panelCaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  color: rgba(255, 255, 255, .82);
  font-weight: 800;
}

.pcv8 .panelCaption small {
  display: block;
  color: rgba(255, 255, 255, .62);
  font-weight: 700
}

.pcv8 .panelTag {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .12);
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
}

.pcv8 .stack {
  height: var(--panelH);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pcv8 .card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  padding: 16px 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  cursor: pointer;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.pcv8 .card h3 {
  margin: 0 0 8px;
  font-size: 18px
}

.pcv8 .card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 14px
}

.pcv8 .card.active {
  border-color: var(--stroke2);
  background: linear-gradient(180deg, rgba(139, 92, 246, .14), rgba(255, 255, 255, .06));
  transform: translateY(-1px);
}

.pcv8 .carouselWrap {
  height: var(--panelH);
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pcv8 .carousel {
  height: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.pcv8 .track {
  display: flex;
  height: 100%;
  gap: 14px;
  padding: 16px;
  transform: translateX(0px);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.pcv8 .pCard {
  flex: 0 0 calc(100% - 0px);
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .04));
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .42);
}

.pcv8 .pCard::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(520px 240px at 18% 12%, rgba(139, 92, 246, .18), transparent 60%),
    radial-gradient(520px 240px at 82% 10%, rgba(217, 70, 239, .14), transparent 60%);
  pointer-events: none;
}

.pcv8 .pCardInner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px
}

.pcv8 .pTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pcv8 .pNum {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .14);
  font-weight: 950;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
}

.pcv8 .pBadge {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  font-weight: 800;
  font-size: 12px;
}

.pcv8 .pCard h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.2px
}

.pcv8 .pCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 14.5px
}

.pcv8 .pBottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .72);
  font-weight: 800;
  font-size: 12.5px;
}

.pcv8 .pBottom span {
  color: rgba(255, 255, 255, .58);
  font-weight: 750
}

.pcv8 .carBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .28);
  cursor: pointer;
  user-select: none;
  z-index: 5;
}

.pcv8 .carBtn:hover {
  background: rgba(0, 0, 0, .36)
}

.pcv8 .carPrev {
  left: 12px
}

.pcv8 .carNext {
  right: 12px
}

.pcv8 .carBtn svg {
  opacity: .92
}

.pcv8 .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
  z-index: 6;
}

.pcv8 .dotBtn {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}

.pcv8 .dotBtn.on {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(245, 197, 66, .16);
}

.pcv8 .faq {
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pcv8 details {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 16px 16px;
}

.pcv8 details:first-child {
  border-top: 0
}

.pcv8 summary {
  list-style: none;
  cursor: pointer;
  font-weight: 900;
  color: rgba(255, 255, 255, .90);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pcv8 summary::-webkit-details-marker {
  display: none
}

.pcv8 .plus {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .22);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.pcv8 details[open] .plus {
  border-color: rgba(245, 197, 66, .35)
}

.pcv8 details p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .72);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .pcv8 {
    --panelH: 420px;
  }

  .pcv8 .grid2 {
    grid-template-columns: 1fr;
  }

  .pcv8 .panel {
    order: 2
  }

  .pcv8 .stack {
    order: 1
  }

  .pcv8 .heroCard {
    text-align: left
  }

  .pcv8 .stats {
    grid-template-columns: 1fr;
  }

  .pcv8 .links {
    display: none
  }
}

@media (max-width: 560px) {
  .pcv8 {
    --panelH: 440px;
  }

  .pcv8 .hero {
    padding: 34px 0 54px
  }

  .pcv8 .heroCard {
    padding: 16px
  }

  .pcv8 .track {
    padding: 14px
  }

  .pcv8 .pCard {
    padding: 16px
  }
}

.pcv8

/* --- Premium Hero v2 (PC) --- */
.heroGrid2 {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
}

.pcv8 .heroLeft {
  text-align: left;
}

.pcv8 .heroLeft .sub {
  margin-left: 0;
  margin-right: 0;
}

.pcv8 .heroCtas {
  justify-content: flex-start;
}

.pcv8 .heroChips {
  justify-content: flex-start;
}

.pcv8 .heroInlineStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.pcv8 .heroStat {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  padding: 12px 12px;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .35);
}

.pcv8 .heroStat b {
  display: block;
  font-size: 18px;
  letter-spacing: .2px
}

.pcv8 .heroStat span {
  color: rgba(255, 255, 255, .65);
  font-weight: 650;
  font-size: 12.5px
}

.pcv8 .heroRight {
  position: relative;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
}

.pcv8 .heroRight::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(720px 380px at 20% 18%, rgba(139, 92, 246, .26), transparent 62%),
    radial-gradient(680px 360px at 88% 6%, rgba(217, 70, 239, .18), transparent 60%);
  pointer-events: none;
}

.pcv8 .heroDeck {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  z-index: 1;
}

.pcv8 .heroCard {
  width: 100%;
  margin: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .40);
}

.pcv8 .heroCardA {
  transform: translateY(0px);
}

.pcv8 .heroCardB {
  background: linear-gradient(180deg, rgba(139, 92, 246, .16), rgba(255, 255, 255, .05));
  border-color: rgba(167, 139, 250, .30);
}

.pcv8 .heroMiniRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pcv8 .miniPill {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .80);
  font-weight: 850;
  font-size: 12px;
}

.pcv8 .heroProof {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
}

.pcv8 .heroProofIcon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(245, 197, 66, .30);
  background: rgba(245, 197, 66, .12);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 46px rgba(0, 0, 0, .35);
  flex: 0 0 auto;
}

.pcv8 .heroHintRight {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 14px;
  padding-top: 12px;
}

.pcv8 .miniLink {
  pointer-events: auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
}

.pcv8 .miniLink:hover {
  border-color: rgba(245, 197, 66, .30);
  color: rgba(255, 255, 255, .92);
}

.pcv8 .heroOrb {
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(245, 197, 66, .22), rgba(139, 92, 246, .18), transparent 62%);
  filter: blur(0px);
  opacity: .95;
  z-index: 0;
  pointer-events: none;
}

.pcv8

/* --- Programa: tarjetas limpias y pro (v4) --- */
.pCard {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

.pcv8 .pCard::before {
  display: none;
}

.pcv8 .pCard::after {
  display: none;
}

.pcv8 .pCardInner {
  gap: 16px;
  text-align: center;
  justify-content: center;
}

.pcv8 .pTop {
  justify-content: center;
  gap: 10px;
  flex-direction: column;
}

.pcv8 .pNum {
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  padding: 0;
  font-weight: 950;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, .92);
}

.pcv8 .pBadge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .70);
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
}

.pcv8 .pCard h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.3px;
}

.pcv8 .pCard p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .72);
}

.pcv8 .pBottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  justify-content: center;
  gap: 18px;
  text-align: center;
}

.pcv8 .pBottom>div {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0;
}

.pcv8 .pBottom>div span {
  color: rgba(255, 255, 255, .58);
  font-weight: 750;
}

.pcv8

/* --- Plan por dentro (desplegable real) --- */
.insideWrap {
  margin-top: 14px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.2, .8, .2, 1);
}

.pcv8 .insideWrap.open {
  max-height: 1000px;
}

.pcv8 .insideInner {
  padding: 18px;
}

.pcv8 .insideGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.pcv8 .insideItem {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  padding: 14px 14px;
}

.pcv8 .insideItem b {
  display: block;
  font-weight: 950;
  letter-spacing: -.2px;
  margin-bottom: 6px;
}

.pcv8 .insideItem span {
  color: rgba(255, 255, 255, .72);
  font-weight: 750;
  line-height: 1.45;
  font-size: 13.8px;
  display: block;
}

.pcv8 .insideFoot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .70);
  font-weight: 750;
  line-height: 1.45;
  font-size: 13.8px;
}

.pcv8

/* --- Quién: historia dentro (sin romper el layout) --- */
.whoStory {
  flex: 1.3;
  cursor: default;
}

.pcv8 .whoStory .storyBody {
  margin-top: 8px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.55;
  font-size: 14px;
}

.pcv8

/* --- Testimonios --- */
.testiShell {
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.pcv8 .testiTrack {
  display: flex;
  gap: 14px;
  padding: 16px;
  transform: translateX(0px);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.pcv8 .tCard {
  flex: 0 0 calc((100% - 28px) / 3);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18));
  padding: 16px 16px;
  position: relative;
  overflow: hidden;
  min-height: 170px;
}

.pcv8 .tCard::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(520px 240px at 18% 12%, rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(520px 240px at 82% 10%, rgba(217, 70, 239, .12), transparent 60%);
  pointer-events: none;
  opacity: .9;
}

.pcv8 .tInner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcv8 .tStars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 12px;
}

.pcv8 .tText {
  color: rgba(255, 255, 255, .78);
  font-weight: 750;
  line-height: 1.45;
  font-size: 14px;
}

.pcv8 .tMeta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.pcv8 .tName {
  font-weight: 950;
  letter-spacing: -.2px;
}

.pcv8 .tTag {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .72);
  font-weight: 850;
  font-size: 12px;
  white-space: nowrap;
}

.pcv8 .testiBtns .carBtn {
  top: 50%;
}

.pcv8 .testiDots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 6;
  pointer-events: none;
}

@media (max-width: 980px) {
  .pcv8 .heroGrid2 {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pcv8 .heroLeft {
    text-align: center;
  }

  .pcv8 .heroCtas {
    justify-content: center;
  }

  .pcv8 .heroChips {
    justify-content: center;
  }

  .pcv8 .heroInlineStats {
    grid-template-columns: 1fr;
  }

  .pcv8 .heroRight {
    padding: 12px;
  }

  .pcv8 .insideGrid {
    grid-template-columns: 1fr;
  }

  .pcv8 .tCard {
    flex: 0 0 calc(100% - 0px);
  }
}

.pcv8

/* --- HERO estilo "This is Sleep" (v4) --- */
.heroClean {
  max-width: 900px;
}

.pcv8 .hero h1 {
  text-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}

.pcv8 .hero .sub {
  color: rgba(255, 255, 255, .78);
  max-width: 860px;
}

.pcv8 .hero .btn.primary {
  background: #fff;
  color: #111827;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.pcv8 .hero .btn {
  background: rgba(0, 0, 0, .38);
  border-color: rgba(255, 255, 255, .18);
}

.pcv8 .hero .btn:hover {
  background: rgba(0, 0, 0, .48);
}

.pcv8 .heroInlineStats {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.pcv8 .heroStat {
  border: none;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.pcv8 .heroStat b {
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .92);
}

.pcv8 .heroStat span {
  font-size: 13px;
  color: rgba(255, 255, 255, .70);
  font-weight: 650;
}

.pcv8 .heroStat b::after {
  content: " ·";
  color: rgba(255, 255, 255, .45);
  font-weight: 700;
  margin-left: 6px;
}

.pcv8 .heroStat:last-child b::after {
  content: "";
}

.pcv8 .heroSteps {
  display: none;
}

.pcv8 .heroLinkRow {
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.pcv8 .heroScroll {
  opacity: .85;
}

.pcv8 .heroOrb {
  display: none;
}

.pcv8

/* --- Clean Hero + Programa (v3) --- */
.heroClean {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.pcv8 .heroClean .sub {
  margin-left: auto;
  margin-right: auto;
}

.pcv8 .heroInlineStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.pcv8 .heroStat {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  padding: 12px 12px;
}

.pcv8 .heroStat b {
  display: block;
  font-size: 18px;
  letter-spacing: .2px
}

.pcv8 .heroStat span {
  color: rgba(255, 255, 255, .65);
  font-weight: 650;
  font-size: 12.5px
}

.pcv8 .heroSteps {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pcv8 .stepCard {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  text-align: left;
}

.pcv8 .stepNum {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 197, 66, .35);
  color: var(--gold);
  font-weight: 950;
  letter-spacing: .6px;
  background: rgba(245, 197, 66, .06);
  flex: 0 0 auto;
}

.pcv8 .stepHd {
  font-weight: 950;
  letter-spacing: -.2px;
  margin-top: -2px;
}

.pcv8 .stepTx {
  margin-top: 6px;
  color: rgba(255, 255, 255, .74);
  line-height: 1.45;
  font-weight: 700;
  font-size: 13.8px;
}

.pcv8 .heroLinkRow {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .70);
  font-weight: 800;
  font-size: 12.8px;
}

.pcv8 .heroLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .88);
  font-weight: 900;
}

.pcv8 .heroLink:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(245, 197, 66, .55);
}

.pcv8 .heroScroll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pcv8
/* Programa: tarjetas más limpias */

/* Programa – coverflow premium con imágenes (exito1..6) */
.progCoverflow {
  position: relative;
  margin-top: 26px;
}

.pcv8 .cfStage {
  position: relative;
  height: 420px;
  perspective: 1200px;
  outline: none;
  user-select: none;
}

.pcv8 .cfCard {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(720px, 78vw);
  height: 420px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55);
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform .55s ease, opacity .55s ease, filter .55s ease;
  background: #0b0b0b;
}

.pcv8 .cfMedia {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: translateZ(-1px);
  filter: saturate(.92) contrast(1.06);
}

.pcv8 .cfCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 700px at 20% 15%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .88) 100%);
  pointer-events: none;
}

.pcv8 .cfBody {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 30px 22px;
  display: grid;
  gap: 12px;
}

.pcv8 .cfMeta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pcv8 .cfNum {
  font-weight: 950;
  font-size: 34px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .92);
  line-height: 1;
  text-shadow: 0 12px 40px rgba(0, 0, 0, .7);
}

.pcv8 .cfTag {
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88);
}

.pcv8 .cfTitle {
  margin: 0 0 8px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 900;
  color: rgba(255, 255, 255, .97);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 14px 44px rgba(0, 0, 0, .65);
}

.pcv8 .cfText {
  margin: 0;
  font-size: 16.5px;
  color: rgba(255, 255, 255, .90);
  line-height: 1.55;
  text-shadow: 0 12px 40px rgba(0, 0, 0, .70);
}

.pcv8 .cfChips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.pcv8 .cfChip {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, .40);
  background: rgba(6, 6, 10, .62);
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pcv8 .cfChip span {
  color: rgba(255, 255, 255, 1);
  font-weight: 900;
}

.pcv8 .cfNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(245, 197, 66, .55);
  background: rgba(0, 0, 0, .38);
  color: rgba(245, 197, 66, .98);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .55), 0 0 0 6px rgba(245, 197, 66, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pcv8 .cfNav:hover {
  background: rgba(0, 0, 0, .55);
  box-shadow: 0 14px 46px rgba(0, 0, 0, .6), 0 0 0 7px rgba(245, 197, 66, .14);
}

.pcv8 .cfPrev {
  left: 8px;
}

.pcv8 .cfNext {
  right: 8px;
}

.pcv8 .cfDots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.pcv8 .cfDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .10);
}

.pcv8 .cfDot.on {
  background: rgba(139, 92, 246, .92);
  border-color: rgba(139, 92, 246, .92);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, .12);
}

.pcv8

/* posiciones (look tipo “posters” con perspectiva) */
.cfCard.isActive {
  transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1);
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
  filter: none;
  cursor: default;
}

.pcv8 .cfCard.isLeft1 {
  transform: translateX(calc(-50% - 380px)) translateZ(-140px) rotateY(18deg) scale(.92);
  opacity: .78;
  filter: saturate(.75);
}

.pcv8 .cfCard.isRight1 {
  transform: translateX(calc(-50% + 380px)) translateZ(-140px) rotateY(-18deg) scale(.92);
  opacity: .78;
  filter: saturate(.75);
}

.pcv8 .cfCard.isLeft2 {
  transform: translateX(calc(-50% - 660px)) translateZ(-280px) rotateY(26deg) scale(.84);
  opacity: .42;
  filter: saturate(.55) blur(.0px);
}

.pcv8 .cfCard.isRight2 {
  transform: translateX(calc(-50% + 660px)) translateZ(-280px) rotateY(-26deg) scale(.84);
  opacity: .42;
  filter: saturate(.55) blur(.0px);
}

.pcv8 .cfCard.isFar {
  transform: translateX(-50%) translateZ(-600px) scale(.75);
  opacity: 0;
  pointer-events: none;
}

.pcv8
/* responsive */
@media (max-width: 980px) {
  .cfStage {
    height: 440px;
  }

  .cfCard {
    height: 440px;
    width: min(720px, 88vw);
  }

  .cfCard.isLeft1 {
    transform: translateX(calc(-50% - 300px)) translateZ(-140px) rotateY(18deg) scale(.92);
  }

  .cfCard.isRight1 {
    transform: translateX(calc(-50% + 300px)) translateZ(-140px) rotateY(-18deg) scale(.92);
  }

  .cfCard.isLeft2 {
    transform: translateX(calc(-50% - 520px)) translateZ(-280px) rotateY(24deg) scale(.84);
  }

  .cfCard.isRight2 {
    transform: translateX(calc(-50% + 520px)) translateZ(-280px) rotateY(-24deg) scale(.84);
  }
}

@media (max-width: 680px) {
  .pcv8 .cfStage {
    height: 520px;
  }

  .pcv8 .cfCard {
    height: 520px;
    width: min(520px, 92vw);
  }

  .pcv8 .cfTitle {
    font-size: 24px;
  }

  .pcv8 .cfNav {
    width: 44px;
    height: 44px;
  }

  .pcv8 .cfPrev {
    left: 6px;
  }

  .pcv8 .cfNext {
    right: 6px;
  }

  .pcv8 .cfCard.isLeft1,
  .pcv8 .cfCard.isRight1,
  .pcv8 .cfCard.isLeft2,
  .pcv8 .cfCard.isRight2 {
    opacity: 0;
    pointer-events: none;
  }

  .pcv8 .cfCard.isActive {
    transform: translateX(-50%) scale(1);
  }
}

.pcv8 .pCard {
  background: rgba(0, 0, 0, .22);
  border-color: rgba(255, 255, 255, .14);
}

.pcv8 .pCard::before {
  display: none;
}

.pcv8 .pCardInner {
  justify-content: center;
}

.pcv8 .pTop {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.pcv8 .pNum {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(245, 197, 66, .06);
  border: 1px solid rgba(245, 197, 66, .30);
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .8px;
}

.pcv8 .pBadge {
  background: transparent;
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .74);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.pcv8 .pCard h3 {
  text-align: center;
  margin-top: 12px;
  font-size: 20px;
}

.pcv8 .pCard p {
  text-align: center;
  margin: 10px auto 0;
  max-width: 520px;
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
}

.pcv8 .pBottom {
  margin-top: 18px;
  border-top: 0;
  padding-top: 0;
  gap: 10px;
}

.pcv8 .pBottom>div {
  flex: 1;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pcv8 .pBottom span {
  color: rgba(255, 255, 255, .62);
  font-weight: 850;
}

@media (max-width: 980px) {
  .pcv8 .heroSteps {
    grid-template-columns: 1fr;
  }

  .pcv8 .heroLinkRow {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pcv8 .heroInlineStats {
    grid-template-columns: 1fr;
  }
}

.pcv8

/* --- Fondo negro total: sin brillos entre secciones (v4) --- */
.heroCard::before,
.pcv8 .heroRight::before,
.pcv8 .tCard::before {
  display: none !important;
}

.pcv8 .noise {
  opacity: .03;
}

.pcv8
/* =========================================================
   vNEXT (Hero opción A + Programa opción 2) – refinado premium
   ========================================================= */

/* Fondo 100% negro sin transiciones raras */
body {
  background: #000 !important;
}

.pcv8 section {
  background: #000 !important;
}

.pcv8

/* HERO minimal */
.hero {
  min-height: 76vh;
}

.pcv8 .heroCleanMinimal {
  max-width: 980px;
}

.pcv8 .heroCleanMinimal .subShort {
  margin-top: 12px;
  font-size: 18px;
  max-width: 720px;
  color: rgba(255, 255, 255, .78);
}

.pcv8 .heroInlineLine {
  margin-top: 14px;
  display: flex !important;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, .70);
  font-weight: 650;
}

.pcv8 .heroInlineLine span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.pcv8 .heroInlineLine b {
  font-weight: 900;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .2px;
}

.pcv8 .heroInlineLine span:not(:last-child)::after {
  content: "•";
  margin-left: 14px;
  color: rgba(255, 255, 255, .40);
  font-weight: 700;
}

.pcv8 .heroSteps {
  display: none !important;
}

.pcv8 .heroLinkRowMinimal {
  border-top: 1px solid rgba(255, 255, 255, .10) !important;
  margin-top: 18px;
}

.pcv8

/* SEO strip bajo el hero (minimalista, .pcv8 sin caja) */
.heroSeoStrip {
  padding: 16px 0 36px;
}

.pcv8 .heroSeoStrip .seoStripInner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
}

.pcv8 .heroSeoStrip .seoGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px 40px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 18px;
}

.pcv8 .heroSeoStrip .seoCopy {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
  font-size: 14.5px;
}

.pcv8 .heroSeoStrip .seoCopy strong {
  color: rgba(255, 255, 255, .92);
  font-weight: 850;
}

.pcv8 .heroSeoStrip .seoPoints {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pcv8 .heroSeoStrip .seoPoints li {
  color: rgba(255, 255, 255, .70);
  font-size: 14.5px;
  line-height: 1.45;
  position: relative;
  padding-left: 14px;
}

.pcv8 .heroSeoStrip .seoPoints li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 197, 66, .92);
  position: absolute;
  left: 0;
  top: .55em;
}

@media (max-width: 860px) {
  .pcv8 .heroSeoStrip .seoGrid {
    grid-template-columns: 1fr;
  }
}

.pcv8

/* Programa – tarjetas (opción 2: número en banda lateral) */
.pCard {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.pcv8 .pCard::before {
  display: none !important;
}

.pcv8

/* adiós glow */
.pRailLayout {
  height: 100%;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0;
}

.pcv8 .pRail {
  padding: 18px 14px;
  border-right: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.pcv8 .pNumBig {
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.6px;
  color: rgba(255, 255, 255, .92);
  line-height: 1;
}

.pcv8 .pBadgeMini {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  padding: 6px 0;
}

.pcv8 .pMain {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
}

.pcv8 .pMain h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.3px;
  font-weight: 900;
}

.pcv8 .pMain p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .72);
  line-height: 1.55;
  font-size: 14.6px;
  font-weight: 650;
  max-width: 520px;
}

.pcv8 .pBottomClean {
  margin-top: auto;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255, 255, 255, .70);
  font-weight: 800;
  font-size: 12.7px;
}

.pcv8 .pBottomClean span {
  color: rgba(255, 255, 255, .58);
  font-weight: 750;
}

.pcv8

/* Rejilla y aire: hairlines coherentes */
.carouselWrap,
.pcv8 .panel {
  border-color: rgba(255, 255, 255, .12);
}

.pcv8 .card {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .45);
}

.pcv8 .links a:hover {
  background: rgba(255, 255, 255, .05);
}

.pcv8
/* --- vNEXT_C polish: hero + coverflow legibilidad --- */

/* HERO: más limpio, .pcv8 menos "neón" */
.hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .70) 58%, rgba(0, 0, 0, .90) 100%),
    url("../img/OIP.jfif") center/cover no-repeat;
  filter: grayscale(.18) saturate(.92) contrast(1.02);
}

.pcv8 .heroClean {
  max-width: 860px;
}

.pcv8 .hero h1 {
  text-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  letter-spacing: -0.02em;
}

.pcv8 h1 .accent {
  color: rgba(255, 255, 255, .96);
  position: relative;
  display: inline-block;
  padding: 0 .06em;
}

.pcv8 h1 .accent::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: .08em;
  height: .18em;
  background: rgba(139, 92, 246, .55);
  border-radius: 10px;
  z-index: -1;
}

.pcv8 .hero .sub {
  color: rgba(255, 255, 255, .78);
  max-width: 740px;
  line-height: 1.45;
}

.pcv8 .heroInlineStats {
  gap: 16px;
  margin-top: 12px;
  opacity: .95;
}

.pcv8 .heroStat {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .22);
}

.pcv8 .hero .btn {
  border-radius: 999px;
}

.pcv8 .hero .btn.secondary {
  background: rgba(0, 0, 0, .30);
}

.pcv8 .hero .btn.secondary:hover {
  background: rgba(0, 0, 0, .40);
}

.pcv8

/* Header un pelín más fino */
.topbar,
.pcv8 .header {
  height: 64px !important;
}

.pcv8 .navlinks a {
  font-weight: 600;
}

.pcv8 .header .cta {
  border-radius: 999px;
}

.pcv8

/* SEO moved: sección discreta (no pegada al hero) */
.methodSeoSection {
  padding: 36px 0 10px;
}

.pcv8 .methodSeoInner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

.pcv8 .methodSeoSection .seoGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}

.pcv8 .methodSeoSection .seoCopy {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14.5px;
  line-height: 1.6;
}

.pcv8 .methodSeoSection .seoPoints {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
  line-height: 1.7;
}

.pcv8 .methodSeoSection .seoPoints li {
  margin: 8px 0;
}

@media (max-width: 860px) {
  .pcv8 .methodSeoSection .seoGrid {
    grid-template-columns: 1fr;
  }
}

.pcv8

/* COVERFLOW: texto legible, .pcv8 centrado, .pcv8 sin "difuminado" raro */
.cfCard {
  overflow: hidden;
}

.pcv8 .cfMedia {
  transform: none !important;
  filter: saturate(1) contrast(1.06);
  backface-visibility: hidden;
  will-change: transform;
}

.pcv8 .cfCard::after {
  background:
    radial-gradient(1100px 520px at 50% 50%, rgba(0, 0, 0, .08), rgba(0, 0, 0, .72) 70%, rgba(0, 0, 0, .88) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .62) 60%, rgba(0, 0, 0, .78));
  opacity: .95;
}

.pcv8 .cfBody {
  inset: 0;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.pcv8 .cfPanel {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(560px, 78%);
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .32) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}

.pcv8 .cfMeta {
  justify-content: center;
  margin-bottom: 10px;
}

.pcv8 .cfNum {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 16px;
  letter-spacing: .06em;
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}

.pcv8 .cfTag {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  font-weight: 700;
  letter-spacing: .04em;
}

.pcv8 .cfTitle {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.15vw, 34px);
  line-height: 1.18;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

.pcv8 .cfText {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 15.5px;
  line-height: 1.65;
}

.pcv8 .cfChips {
  justify-content: center;
  margin-top: 2px;
}

.pcv8 .cfChip {
  background: rgba(0, 0, 0, .38);
  border-color: rgba(255, 255, 255, .14);
}

.pcv8 .cfChip span {
  color: rgba(255, 255, 255, .88);
}

.pcv8

/* Atenuar contenido de tarjetas laterales (sin perder el efecto "hay más") */
.cfCard:not(.isActive) .cfPanel {
  opacity: .22;
}

.pcv8 .cfCard:not(.isActive) .cfChips {
  opacity: .0;
}

.pcv8 .cfCard.isActive .cfPanel {
  opacity: 1;
  filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
}

.pcv8

/* === D: coverflow UX + readability polish === */
.cfStage {
  cursor: grab;
  touch-action: pan-y;
}

.pcv8 .cfStage:active {
  cursor: grabbing;
}

@media (max-width: 980px) {
  .pcv8

  /* Arrows bottom-center (solo móvil/tablet) */
  .cfNav {
    top: auto !important;
    bottom: 18px !important;
    transform: none !important;
  }

  .pcv8 .cfPrev {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-64px) !important;
  }

  .pcv8 .cfNext {
    left: 50% !important;
    right: auto !important;
    transform: translateX(14px) !important;
  }
}

@media (max-width: 860px) {
  .pcv8 .cfNav {
    bottom: 14px !important;
  }

  .pcv8 .cfPrev {
    transform: translateX(-58px) !important;
  }

  .pcv8 .cfNext {
    transform: translateX(10px) !important;
  }
}

.pcv8

/* Remove grey overlay panel, .pcv8 improve text contrast */
.cfBody {
  justify-content: flex-end !important;
  align-items: center !important;
  text-align: center !important;
  padding: 34px 44px 86px !important;
}

.pcv8 .cfPanel {
  max-width: 560px !important;
  width: min(560px, 78%) !important;
  padding: 18px 18px 16px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .32) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45) !important;
  border-radius: 18px !important;
  backdrop-filter: none !important;
}

.pcv8 .cfCard:not(.isActive) .cfPanel {
  opacity: .75 !important;
}

.pcv8 .cfTitle,
.pcv8 .cfText,
.pcv8 .cfKicker {
  text-shadow: 0 12px 34px rgba(0, 0, 0, .9) !important;
}

.pcv8 .cfText {
  opacity: .92 !important;
}

.pcv8 .cfCard::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .46) 58%, rgba(0, 0, 0, .90) 100%) !important;
}

.pcv8 .cfCard:not(.isActive) {
  opacity: .60 !important;
  filter: saturate(.85) !important;
}

.pcv8
/* =========================
       PREMIUM OVERRIDES (Hero + Header)
       ========================= */

body {
  font-family: var(--font-sans);
}

.pcv8 .heroTitle,
.pcv8 .h1Serif {
  font-family: var(--font-display);
}

.pcv8 header {
  background: rgba(10, 10, 14, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.pcv8 .nav {
  height: 72px
}

.pcv8 .brand {
  gap: 12px
}

.pcv8 .brand img {
  width: 34px;
  height: 34px;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}

.pcv8 .brand span {
  font-weight: 800;
  letter-spacing: .1px;
}

.pcv8 .brand span i {
  color: var(--accent)
}

.pcv8 .links {
  gap: 22px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.pcv8 .links a {
  padding: 10px 12px;
  border-radius: 999px;
  background: transparent;
  transition: background .2s ease, color .2s ease;
}

.pcv8 .links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.pcv8 .links a.active {
  color: var(--accent);
  background: rgba(139, 92, 246, .12);
  border: 1px solid rgba(139, 92, 246, .18);
}

.pcv8 .pill {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: none;
  padding: 10px 18px;
  font-weight: 800;
}

.pcv8 .pill:hover {
  background: #fff;
  color: #0b0c10;
  border-color: rgba(255, 255, 255, .0);
}

.pcv8 .hero {
  min-height: 82vh;
  padding: 52px 0 74px;
}

.pcv8 .hero::before {
  background:
    radial-gradient(900px 420px at 50% 30%, rgba(139, 92, 246, .18), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .82) 78%),
    url("../img/OIP.jfif") center/cover no-repeat;
  filter: saturate(.92) contrast(1.08);
}

.pcv8 .badgeTop {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.pcv8 .badgeTop .dot {
  width: 8px;
  height: 8px;
  opacity: .9
}

.pcv8 .heroTitle {
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 18px 60px rgba(0, 0, 0, .65);
}

.pcv8 .heroTitle .accent {
  color: var(--accent);
  text-shadow: 0 18px 70px rgba(139, 92, 246, .22);
}

.pcv8 .underline {
  display: none
}

.pcv8 .heroSub {
  max-width: 720px;
  font-size: 18px;
  color: rgba(255, 255, 255, .82);
  margin-top: 10px;
  text-shadow: 0 14px 44px rgba(0, 0, 0, .55);
}

.pcv8 .heroCtas {
  gap: 14px
}

.pcv8 .btnPrimary {
  background: #fff;
  color: #0b0c10;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .08);
}

.pcv8 .btnPrimary:hover {
  transform: translateY(-1px)
}

.pcv8 .btnGhost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: none;
}

.pcv8 .btnGhost:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
  transform: translateY(-1px);
}

.pcv8 .heroMeta {
  color: rgba(255, 255, 255, .70);
  font-weight: 700;
  letter-spacing: .02em;
}

.pcv8 .heroMeta strong {
  color: #fff
}

.pcv8 .scrollHint {
  opacity: .72;
}

.pcv8

/* === EXTRA OVERRIDES (match current markup) === */
.heroClean h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 18px 60px rgba(0, 0, 0, .65);
}

.pcv8 .heroClean h1 .accent {
  color: var(--accent);
  text-shadow: 0 18px 70px rgba(139, 92, 246, .22);
}

.pcv8 .heroClean .sub {
  max-width: 740px;
  font-size: 18px;
  color: rgba(255, 255, 255, .82);
  margin: 12px auto 0;
  text-shadow: 0 14px 44px rgba(0, 0, 0, .55);
}

.pcv8 .ctaRow {
  gap: 14px
}

.pcv8 .ctaRow .btn {
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
}

.pcv8 .ctaRow .btn.primary {
  background: #fff;
  color: #0b0c10;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
}

.pcv8 .ctaRow .btn.primary:hover {
  transform: translateY(-1px)
}

.pcv8 .ctaRow .btn.ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  box-shadow: none;
}

.pcv8 .ctaRow .btn.ghost:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
  transform: translateY(-1px);
}

.pcv8 .metaRow {
  color: rgba(255, 255, 255, .70);
  font-weight: 700;
  letter-spacing: .02em
}

.pcv8 .metaRow strong {
  color: #fff
}

.pcv8

/* Program cards readability */
.cfPanel {
  background: linear-gradient(180deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .26) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45) !important;
  padding: 18px 18px 16px !important;
}

.pcv8 .cfTitle {
  color: rgba(255, 255, 255, .97) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 14px 44px rgba(0, 0, 0, .65) !important;
}

.pcv8 .cfText {
  color: rgba(255, 255, 255, .90) !important;
  text-shadow: 0 12px 40px rgba(0, 0, 0, .70) !important;
}

.pcv8

/* === vNEXT_J: Programa coverflow legible + drag UX + hero/header polish === */
/* Programa: panel abajo, .pcv8 sin "caja gris" gigante y con texto que se lea */
#cfStage {
  cursor: grab;
}

.pcv8 #cfStage.dragging {
  cursor: grabbing;
}

.pcv8 .cfPanel {
  top: auto !important;
  bottom: 26px !important;
  transform: translate(-50%, 0) !important;
  width: min(780px, 82vw) !important;
  padding: 18px 22px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.62) 28%, rgba(0, 0, 0, 0.86) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) saturate(115%) !important;
}

.pcv8 .cfKicker {
  opacity: .95 !important;
}

.pcv8 .cfTitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.80) !important;
  letter-spacing: -.02em !important;
}

.pcv8 .cfDesc {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.78) !important;
}

.pcv8 .cfPill {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

.pcv8

/* Evita que las tarjetas laterales "maten" el texto del panel */
.cfCard:not(.isActive) {
  opacity: .55 !important;
}

.pcv8 .cfCard:not(.isActive) .cfPanel {
  opacity: .95 !important;
}

.pcv8

/* Flechas dentro del panel: que no tapen el texto */
.cfPanel .cfArrows {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.pcv8 .cfPanel .cfArrowBtn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pcv8 .cfPanel .cfArrowBtn:hover {
  background: rgba(0, 0, 0, 0.72);
}

.pcv8

/* Hero: tipografía más premium y header más limpio */
.siteHeader {
  background: rgba(12, 12, 14, 0.55) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.pcv8 .navLink {
  opacity: .82 !important;
}

.pcv8 .navLink:hover {
  opacity: 1 !important;
}

.pcv8 .navLink.active {
  color: var(--accent) !important;
  opacity: 1 !important;
}

.pcv8 .heroTitle {
  font-weight: 750 !important;
  letter-spacing: -.03em !important;
}

.pcv8 .heroTitle .accent {
  background: linear-gradient(90deg, rgba(171, 132, 255, 1), rgba(212, 180, 255, 1)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.pcv8 .heroSub {
  color: rgba(255, 255, 255, 0.80) !important;
}

.pcv8 .heroUnder {
  height: 6px !important;
  opacity: .55 !important;
  filter: blur(.2px) !important;
}

@media (max-width: 900px) {
  .pcv8 .cfPanel {
    width: min(720px, 90vw) !important;
    padding: 16px 18px !important;
  }

  .pcv8 .cfTitle {
    font-size: 34px !important;
  }
}

.pcv8

/* === FINAL OVERRIDES (program cards readability + alignment) === */
#programa .progCoverflow .cfPanel {
  background: linear-gradient(180deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .62)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

.pcv8 #programa .progCoverflow .cfCard.isActive .cfPanel {
  opacity: 1 !important;
}

.pcv8 #programa .progCoverflow .cfCard.isActive::after {
  opacity: .75 !important;
}

.pcv8 #programa .progCoverflow .cfCard:not(.isActive) .cfPanel {
  opacity: .40 !important;
}

.pcv8 #programa .progCoverflow .cfMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.pcv8 #programa .progCoverflow .cfNum {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.pcv8 #programa .progCoverflow .cfPill {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  line-height: 1 !important;
}

.pcv8 #programa .progCoverflow .cfTitle {
  color: #ffffff;
  text-shadow: 0 18px 55px rgba(0, 0, 0, .75), 0 2px 0 rgba(0, 0, 0, .35) !important;
  text-align: center !important;
}

.pcv8 #programa .progCoverflow .cfBody {
  color: rgba(255, 255, 255, .86) !important;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .80) !important;
  text-align: center !important;
  max-width: 62ch !important;
  margin: 0 auto !important;
}

.pcv8 #programa .progCoverflow .cfTag {
  background: rgba(0, 0, 0, .35) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .82) !important;
}

.pcv8 #programa .progCoverflow .cfCard.isActive {
  filter: none !important;
  opacity: 1 !important;
}

.pcv8 #programa .progCoverflow .cfCard:not(.isActive) {
  filter: saturate(.8) contrast(.95) brightness(.9) !important;
}

.pcv8

/* === FINAL OVERRIDE: Programa (texto legible + meta alineada) === */
#programa .progCoverflow .cfPanel {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 26px 28px 22px !important;
}

.pcv8 #programa .progCoverflow .cfPanel::before {
  content: "";
  position: absolute;
  inset: -18px -22px -20px -22px;
  border-radius: 28px;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 45%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 76%);
}

.pcv8 #programa .progCoverflow .cfPanel>* {
  position: relative;
  z-index: 1;
}

.pcv8 #programa .progCoverflow .cfMeta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px 0 !important;
}

.pcv8 #programa .progCoverflow .cfNum,
.pcv8 #programa .progCoverflow .cfTag {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0.5px);
}

.pcv8 #programa .progCoverflow .cfNum {
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: .12em;
  color: #fff !important;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .18);
}

.pcv8 #programa .progCoverflow .cfTag {
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #fff !important;
  background: rgba(138, 92, 246, .18);
  border: 1px solid rgba(138, 92, 246, .45);
}

.pcv8 #programa .progCoverflow .cfTitle {
  color: #ffffff;
  text-shadow: 0 10px 28px rgba(0, 0, 0, .78);
}

.pcv8 #programa .progCoverflow .cfText {
  color: rgba(255, 255, 255, .92) !important;
  opacity: 1 !important;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .75);
  font-size: 16px !important;
  line-height: 1.55 !important;
}

.pcv8

/* chips un pelín más legibles */
#programa .progCoverflow .cfChips .chip {
  color: rgba(255, 255, 255, .92) !important;
  background: rgba(0, 0, 0, .38) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
}

.pcv8

/* === Program cards readability + alignment (final overrides) === */
#programa .progCoverflow .cfStage {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.pcv8 #programa .progCoverflow .cfCard.isActive .cfPanel {
  opacity: 1 !important;
}

.pcv8 #programa .progCoverflow .cfCard:not(.isActive) .cfPanel {
  opacity: .16 !important;
}

.pcv8 #programa .progCoverflow .cfPanel {
  background: transparent !important;
}

.pcv8 #programa .progCoverflow .cfPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .78));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .08);
  pointer-events: none;
}

.pcv8 #programa .progCoverflow .cfMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.pcv8 #programa .progCoverflow .cfNum {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #ffffff !important;
}

.pcv8 #programa .progCoverflow .cfTag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .14);
  border: 1px solid rgba(139, 92, 246, .28);
  color: #ffffff !important;
}

.pcv8 #programa .progCoverflow .cfTitle {
  color: #ffffff;
  opacity: 1 !important;
  font-weight: 850 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 0 10px rgba(139, 92, 246, .20);
}

.pcv8 #programa .progCoverflow .cfBody {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
}

.pcv8 #programa .progCoverflow .cfText {
  max-width: 56ch;
}

.pcv8

/* ===== Program cards final polish (readability + alignment + chips) ===== */
#programa .progCoverflow .cfPanel {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

/* PC only: sube el panel para que respire más */
@media (min-width: 900px) {
  .pcv8 #programa .progCoverflow .cfBody {
    bottom: 34px;
  }

  .pcv8 #programa .progCoverflow .cfMeta {
    margin-bottom: 16px;
  }
}

.pcv8

/* Meta row: number + label aligned and prettier */
#programa .progCoverflow .cfMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

.pcv8 #programa .progCoverflow .cfNum {
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .55) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 6px rgba(139, 92, 246, .14) !important;
  backdrop-filter: blur(10px);
}

.pcv8 #programa .progCoverflow .cfTag {
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: rgba(0, 0, 0, .45) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38) !important;
  backdrop-filter: blur(10px);
}

.pcv8

/* Title + body: true white, .pcv8 with soft shadow for readability */
#programa .progCoverflow .cfTitle {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75) !important;
  font-weight: 900 !important;
}

.pcv8 #programa .progCoverflow .cfBody {
  color: rgba(255, 255, 255, .92) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .75) !important;
}

.pcv8

/* Chips (recuadro rojo): make them actually visible */
#programa .progCoverflow .cfChips {
  gap: 10px !important;
  margin-top: 16px !important;
}

.pcv8 #programa .progCoverflow .cfChips .chip {
  background: rgba(0, 0, 0, .58) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(10px);
}

.pcv8 #programa .progCoverflow .cfChips .chip strong {
  color: var(--accent) !important;
  text-shadow: 0 0 16px rgba(139, 92, 246, .45) !important;
}

.pcv8 #programa .progCoverflow .cfChips .chip:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, .66) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}

.pcv8
/* FINAL OVERRIDES: chips ultra-legibles (PC) */

/* Chips — high-contrast (no more “grey sadness”) */
#programa .progCoverflow .cfChips {
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 3;
}

.pcv8 #programa .progCoverflow .cfChips .chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(124, 58, 237, .38),
      rgba(0, 0, 0, .62));
  border: 1px solid rgba(124, 58, 237, .70);
  box-shadow:
    0 10px 24px rgba(124, 58, 237, .18),
    0 2px 10px rgba(0, 0, 0, .40),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.pcv8 #programa .progCoverflow .cfChips .chip span {
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  letter-spacing: .2px;
}

.pcv8 #programa .progCoverflow .cfChips .chip strong {
  color: rgba(255, 255, 255, 1);
  font-weight: 800;
  text-shadow: 0 0 14px rgba(124, 58, 237, .28);
}

.pcv8 #programa .progCoverflow .cfChips .chip:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, .92);
  background: linear-gradient(180deg,
      rgba(124, 58, 237, .48),
      rgba(0, 0, 0, .58));
  box-shadow:
    0 14px 32px rgba(124, 58, 237, .22),
    0 2px 12px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.pcv8

/* Si algún padre estaba bajando opacidad, .pcv8 la anulamos para que los chips no hereden el gris */
#programa .progCoverflow .cfCard.isActive .cfPanel {
  opacity: 1 !important;
}

.pcv8 #programa .progCoverflow .cfCard.isActive .cfPanel * {
  opacity: 1 !important;
}



/* ===== PC only adjustments (requested) ===== */
@media (min-width: 1024px) {

  /* Section titles: uppercase + purple, no yellow shouting */
  .pcv8 .secTitle {
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--accent) !important;
  }

  .pcv8 .secTitle .accent,
  .pcv8 .secTitle .hl,
  .pcv8 .secTitle .gold {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: none !important;
  }

  /* Make sure our CSS vars actually exist on the scope */
  .pcv8 {
    --max: 1120px;
    --accent: #8b5cf6;
    --gold: #f5c542;
    --panelH: 420px;
  }

  /* Constrain widths to match rest (footer/testimonials) */
  .pcv8 .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
  }

  /* Fix "Si te pasa esto" card sizing jump (vars were not applying => heights became auto) */
  .pcv8 #dolor .stack {
    height: var(--panelH) !important;
  }

  .pcv8 #dolor .card {
    flex: 1 1 0;
    min-height: 0;
  }

  /* Program coverflow: improve readability + align number/pills */
  .pcv8 #programa .progCoverflow {
    --cardW: 860px;
  }

  .pcv8 #programa .progCoverflow .cfPanel {
    background: linear-gradient(180deg, rgba(8, 9, 16, .72), rgba(8, 9, 16, .52));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    transform: translateY(-24px);
  }

  .pcv8 #programa .progCoverflow .cfTitle {
    color: #ffffff;
    text-shadow:
      0 0 10px rgba(255, 255, 255, .22),
      0 18px 60px rgba(0, 0, 0, .75);
  }

  .pcv8 #programa .progCoverflow .cfText {
    color: rgba(255, 255, 255, .92);
    text-shadow:
      0 0 8px rgba(255, 255, 255, .12),
      0 16px 46px rgba(0, 0, 0, .78);
  }

  .pcv8 #programa .progCoverflow .cfMeta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .pcv8 #programa .progCoverflow .cfNum {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, .35);
    background: rgba(11, 13, 20, .55);
    color: rgba(255, 255, 255, .92);
    font-weight: 950;
    letter-spacing: .5px;
  }

  .pcv8 #programa .progCoverflow .cfTag {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .28);
    color: rgba(255, 255, 255, .84);
    font-weight: 700;
    letter-spacing: .2px;
  }

  .pcv8 #programa .progCoverflow .cfChips {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .pcv8 #programa .progCoverflow .cfChip {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .88);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
  }

  .pcv8 #programa .progCoverflow .cfChip b {
    color: #fff;
    font-weight: 900;
  }

  /* Programa (PC) – ajustes finos: texto "blanco radioactivo", panel más arriba y flechas laterales */
  .pcv8 #programa .progCoverflow .cfTitle,
  .pcv8 #programa .progCoverflow .cfText,
  .pcv8 #programa .progCoverflow .cfBody {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 0 22px rgba(255, 255, 255, .10), 0 12px 44px rgba(0, 0, 0, .75) !important;
  }

  .pcv8 #programa .progCoverflow .cfText {
    color: #ffffff !important;
  }

  /* Subir el bloque de contenido dentro de cada tarjeta */
  .pcv8 #programa .progCoverflow .cfBody {
    bottom: 54px !important;
    /* antes pegado abajo */
    padding-bottom: 18px !important;
  }

  /* Alinear mejor número + etiqueta con el título */
  .pcv8 #programa .progCoverflow .cfMeta {
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .pcv8 #programa .progCoverflow .cfTitle {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Flechas laterales (y no centradas abajo) SOLO en Programa */
  .pcv8 #programa .progCoverflow .cfNav {
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
  }

  .pcv8 #programa .progCoverflow .cfPrev {
    left: 10px !important;
    right: auto !important;
  }

  .pcv8 #programa .progCoverflow .cfNext {
    right: 10px !important;
    left: auto !important;
  }


  /* Extra: mejorar legibilidad del panel (más contraste + glow sutil) */
  .pcv8 #programa .progCoverflow .cfPanel {
    background: rgba(0, 0, 0, .58) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  }

  .pcv8 #programa .progCoverflow .cfTitle {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 255, 255, .12), 0 14px 48px rgba(0, 0, 0, .75) !important;
  }

  .pcv8 #programa .progCoverflow .cfText {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255, 255, 255, .10), 0 14px 48px rgba(0, 0, 0, .78) !important;
  }

  /* Flechas más a los laterales del bloque */
  .pcv8 #programa .progCoverflow .cfPrev {
    left: 22px !important;
  }

  .pcv8 #programa .progCoverflow .cfNext {
    right: 22px !important;
  }

  /* Yellow button (and make it look like premium, not warning sign) */
  .pcv8 .btn.gold {
    background: linear-gradient(180deg, rgba(245, 197, 66, .98), rgba(245, 197, 66, .86));
    color: #15161a;
    border-color: rgba(245, 197, 66, .35);
    box-shadow: 0 14px 40px rgba(245, 197, 66, .14);
  }

  .pcv8 .btn.gold:hover {
    filter: brightness(1.03);
  }

  /* Inside program (toggle content) */
  .pcv8 .insidePc {
    max-width: var(--max);
    margin: 18px auto 0;
  }

  .pcv8 .insideGrid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
  }

  .pcv8 .insideGrid .feature {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(14, 15, 22, .45);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  }

  .pcv8 .insideGrid .feature h3 {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 900;
    color: rgba(255, 255, 255, .92);
    margin: 10px 0 12px;
  }

  .pcv8 .insideNote {
    margin: 14px 6px 0;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
  }

  /* PC premium polish: desplegable 'Ver el plan por dentro' con más jerarquía visual */
  .pcv8 .insidePc {
    position: relative;
  }

  .pcv8 .insidePc::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    opacity: .9;
  }

  .pcv8 .insideGrid {
    align-items: start;
  }

  .pcv8 .insideGrid .feature {
    padding: 24px 24px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), rgba(12, 13, 18, .55);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
  }

  .pcv8 .insideGrid .feature::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 18px;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(245, 197, 66, .22), transparent);
    opacity: .9;
    pointer-events: none;
  }

  .pcv8 .insideGrid .feature {
    position: relative;
  }

  .pcv8 .insideGrid .feature h3 {
    font-size: 18px;
    letter-spacing: .2px;
    color: #ffffff;
    margin: 8px 0 12px;
  }

  .pcv8 .insideGrid .feature h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .55);
    opacity: .85;
  }

  .pcv8 .insideGrid .muted {
    color: rgba(255, 255, 255, .78);
    line-height: 1.65;
    font-size: 15px;
  }

  .pcv8 .insideGrid p.muted {
    margin: 0 0 12px;
  }

  .pcv8 .insideGrid strong {
    color: rgba(255, 255, 255, .96);
  }

  .pcv8 .insideGrid .muted strong {
    color: rgba(255, 255, 255, .95);
    font-weight: 750;
  }

  /* OL como lista con puntos (más premium, menos UI) */
  .pcv8 .insideGrid ol.muted {
    margin: 12px 0 14px;
    padding: 0;
    list-style: none;
  }

  .pcv8 .insideGrid ol.muted>li {
    position: relative;
    padding: 10px 0 10px 18px;
    margin: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .pcv8 .insideGrid ol.muted>li:last-child {
    border-bottom: 0;
  }

  .pcv8 .insideGrid ol.muted>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .65);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, .08);
  }

  /* UL con bullets sutiles (oro suave) */
  .pcv8 .insideGrid ul.muted {
    margin: 12px 0 12px;
    padding: 0;
    list-style: none;
  }

  .pcv8 .insideGrid ul.muted>li {
    position: relative;
    padding-left: 18px;
    margin: 8px 0;
  }

  .pcv8 .insideGrid ul.muted>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .70);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, .10);
  }

  /* Micro separación entre bloques dentro de la columna derecha */
  .pcv8 .insideGrid .feature p.muted[style*='margin-top'] {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  /* PC premium v3: desplegable más editorial (menos UI) */
  .pcv8 #programa .toggle-link {
    padding: 11px 16px !important;
    border-color: rgba(245, 197, 66, .32) !important;
    color: rgba(245, 197, 66, .92) !important;
    background: rgba(0, 0, 0, .18) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .55) !important;
  }

  .pcv8 #programa .toggle-link:hover {
    border-color: rgba(245, 197, 66, .40) !important;
    background: rgba(0, 0, 0, .26) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .60) !important;
  }

  .pcv8 #programa .toggle-link__label {
    font-weight: 850 !important;
    letter-spacing: .03em !important;
  }

  .pcv8 #programa .toggle-link__icon {
    width: 32px !important;
    height: 32px !important;
    border-color: rgba(245, 197, 66, .30) !important;
    background: rgba(0, 0, 0, .20) !important;
    font-size: 14px !important;
  }

  .pcv8 .insideGrid {
    gap: 20px;
  }

  .pcv8 .insideGrid .feature {
    padding: 26px 26px 24px;
    border-color: rgba(255, 255, 255, .09);
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)), rgba(10, 11, 16, .56);
  }

  .pcv8 .insideGrid .feature h3 {
    font-size: 19px;
    margin: 6px 0 14px;
    letter-spacing: .25px;
  }

  .pcv8 .insideGrid .muted {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .76);
  }

  .pcv8 .insideGrid p.muted {
    margin: 0 0 14px;
    max-width: 58ch;
  }

  .pcv8 .insideGrid .feature:nth-child(2) p.muted {
    max-width: 56ch;
  }

  .pcv8 .insideGrid ol.muted>li {
    padding: 14px 0 14px 48px;
    margin: 8px 0;
    border-bottom-color: rgba(255, 255, 255, .05);
  }

  .pcv8 .insideGrid ol.muted>li::before {
    top: 14px;
    width: 20px;
    height: 20px;
    color: rgba(245, 197, 66, .78);
    border-color: rgba(245, 197, 66, .18);
    box-shadow: none;
  }

  .pcv8 .insideGrid ul.muted>li {
    margin: 12px 0;
  }

  .pcv8 .insideGrid ul.muted>li::before {
    background: rgba(245, 197, 66, .55);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, .08);
  }


  /* PC premium v5: headings en mayúsculas + lista izquierda con bullets (menos interlineado) */
  .pcv8 .insidePc .feature>h3 {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 900;
    font-size: 13px;
    color: rgba(255, 255, 255, .90);
  }

  .pcv8 .insidePc .feature>h3::after {
    width: 34px;
    height: 2px;
    opacity: .75;
  }

  .pcv8 .insidePc ol.muted {
    list-style: none;
    padding: 0;
    margin: 12px 0 14px;
    counter-reset: none;
  }

  .pcv8 .insidePc ol.muted>li {
    padding: 8px 0 8px 18px;
    margin: 8px 0;
    border-bottom: 0;
  }

  .pcv8 .insidePc ol.muted>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .55);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, .08);
    border: 0;
  }

  /* Un pelín menos aire entre bullets en la derecha también */
  .pcv8 .insidePc ul.muted>li {
    margin: 9px 0;
  }

  /* Sub-headers dentro de la columna derecha (No es para ti / Resultados...) */
  .pcv8 .insideGrid .feature p.muted[style*='margin-top'] strong {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
  }

  .pcv8 .insideGrid .feature ul.muted+p.muted[style*='margin-top'] {
    margin-top: 16px !important;
  }

  .pcv8 .insideGrid .feature p.muted[style*='margin-top:12px'] {
    margin-top: 18px !important;
  }

  /* Sin divisor vertical: más limpio, más “premium calm” */
  .pcv8 .insideGrid {
    position: relative;
  }

  /* Quien es Noemí: constrain width + improve photo crop + remove highlighted card */
  .pcv8 #quien .panel img {
    object-fit: cover;
    object-position: 50% 15%;
  }

  .pcv8 #quien .card.active {
    background: rgba(14, 15, 22, .45) !important;
    border-color: rgba(255, 255, 255, .10) !important;
  }
}


/* ====== AJUSTE FINAL PC: Programa (coverflow) legible + panel más arriba ====== */
@media (min-width: 901px) {

  /* Panel más arriba y respirado */
  .pcv8 #programa .progCoverflow .cfBody {
    justify-content: center !important;
    padding: 22px 44px 96px !important;
  }

  /* Asegura que el centro sea el “activo” en lectura */
  .pcv8 #programa .progCoverflow .cfCard.isActive .cfPanel,
  .pcv8 #programa .progCoverflow .cfCard.isActive .cfPanel * {
    opacity: 1 !important;
  }

  .pcv8 #programa .progCoverflow .cfCard:not(.isActive) .cfPanel {
    opacity: .28 !important;
  }

  /* Subimos ligeramente el panel (look premium, menos “colgado”) */
  .pcv8 #programa .progCoverflow .cfPanel {
    transform: translateY(-18px) !important;
  }

  /* Texto “blanco radioactivo” con glow sutil */
  .pcv8 #programa .progCoverflow .cfTitle,
  .pcv8 #programa .progCoverflow .cfText,
  .pcv8 #programa .progCoverflow .cfKicker {
    color: #ffffff !important;
    text-shadow:
      0 0 14px rgba(255, 255, 255, .14),
      0 18px 55px rgba(0, 0, 0, .85) !important;
  }

  .pcv8 #programa .progCoverflow .cfText {
    color: rgba(255, 255, 255, .92) !important;
  }

  /* Número + etiqueta alineados y con más presencia */
  .pcv8 #programa .progCoverflow .cfMeta {
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .pcv8 #programa .progCoverflow .cfNum {
    line-height: 1 !important;
    opacity: 1 !important;
  }

  .pcv8 #programa .progCoverflow .cfChip {
    opacity: 1 !important;
  }

  /* Pills visibles (blanco + borde suave) */
  .pcv8 #programa .progCoverflow .cfPills .pill,
  .pcv8 #programa .progCoverflow .cfChips .cfTag,
  .pcv8 #programa .progCoverflow .cfTags .cfTag {
    color: #ffffff !important;
    background: rgba(0, 0, 0, .35) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, .08) !important;
  }

  /* Flechas laterales: que no se “pierdan” */
  .pcv8 #programa .progCoverflow .sideNav,
  .pcv8 #programa .progCoverflow .cfNav {
    z-index: 40 !important;
  }

  /* Toggle “Ver el plan por dentro” en amarillo (no morado) */
  .pcv8 #programa .toggle-link,
  .pcv8 #programa .toggle-link span,
  .pcv8 #programa .toggle-button {
    color: var(--gold) !important;
  }

  .pcv8 #programa .toggle-icon {
    border-color: rgba(245, 200, 76, .38) !important;
  }
}



/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* Fix solape chips: en PC, cfBody funciona como columna y apila panel + chips */
  #programa .pcOnly .cfBody {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding-top: 18px !important;
  }

  /* Panel como bloque normal arriba */
  #programa .pcOnly .cfPanel {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Chips debajo del panel (no flotando) */
  #programa .pcOnly .cfChips {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }

  /* Título más blanco y con más jerarquía */
  #programa .pcOnly .cfTitle {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 800 !important;
  }

  /* Flecha centrada dentro del círculo */
  #programa .toggle-link__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transform: none !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* Programa: títulos más blancos y con jerarquía */
  #programa .progCoverflow .cfTitle {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 0 22px rgba(255, 255, 255, .16), 0 2px 26px rgba(0, 0, 0, .70) !important;
  }

  /* Toggle: flecha centrada en el círculo */
  #programa .toggle-link__icon {
    font-size: 18px !important;
    line-height: 0 !important;
    position: relative !important;
    top: -1px !important;
  }

  /* Hero: resaltar 'TU MEJOR VERSIÓN' en morado (solo PC) */
  .hero h1 .hl {
    color: var(--brand, #8b5cf6) !important;
    text-shadow: 0 0 18px rgba(139, 92, 246, .35), 0 2px 24px rgba(0, 0, 0, .65) !important;
  }

  /* Quién: bullets más legibles en las 4 tarjetas (solo PC) */
  #quien .whoBullets {
    margin: 10px 0 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, .88);
  }

  #quien .whoBullets li {
    margin: 8px 0;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* HERO: 'TU MEJOR VERSIÓN' en morado (solo PC) */
  .hero-cine-title .hl {
    color: #8b5cf6 !important;
    text-shadow: 0 0 18px rgba(139, 92, 246, .35), 0 2px 24px rgba(0, 0, 0, .65) !important;
  }

  /* PROGRAMA: que el valor (span) de los chips destaque en blanco */
  #programa .progCoverflow .cfChip {
    color: rgba(255, 255, 255, .78) !important;
  }

  #programa .progCoverflow .cfChip span {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
  }

  /* PROGRAMA: flecha amarilla centrada en el círculo del desplegable */
  #programa .toggle-link__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
  }

  /* QUIÉN ES: quitar el “apretón” (las tarjetas no deben repartirse a la fuerza) */
  .pcv8 #quien .stack {
    height: auto !important;
  }

  .pcv8 #quien .card {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }

  .pcv8 #quien .card h3 {
    margin: 0 0 10px !important;
  }

  .pcv8 #quien .card p,
  .pcv8 #quien .whoBullets {
    line-height: 1.6 !important;
  }

  .pcv8 #quien .whoBullets {
    margin-top: 10px !important;
  }

  /* Foto acompaña la altura del stack sin deformarse */
  .pcv8 #quien .panel {
    height: auto !important;
    min-height: var(--panelH) !important;
  }

  .pcv8 #quien .panel img {
    height: 100% !important;
  }

  /* PROGRAMA: valores de chips (span) todavía más blancos y con contraste */
  #programa .progCoverflow .cfChip {
    color: rgba(255, 255, 255, .92) !important;
    opacity: 1 !important;
  }

  #programa .progCoverflow .cfChip span {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .75) !important;
  }

  /* QUIÉN ES (PC): tarjetas más compactas (menos "tocho") */
  .pcv8 #quien .stack {
    gap: 10px !important;
  }

  .pcv8 #quien .card {
    padding: 12px 14px !important;
  }

  .pcv8 #quien .card h3 {
    font-size: 16px !important;
    margin: 0 0 8px !important;
  }

  .pcv8 #quien .card p,
  .pcv8 #quien .whoBullets {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .pcv8 #quien .whoBullets {
    margin-top: 8px !important;
    padding-left: 16px !important;
  }

  .pcv8 #quien .whoBullets li {
    margin: 5px 0 !important;
  }

}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* PROGRAMA (PC): chips reales (.cfChip) con el valor en blanco */
  #programa .cfChip {
    color: rgba(255, 255, 255, .72) !important;
  }

  #programa .cfChip span {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
  }

  /* PROGRAMA (PC): flecha del desplegable centrada dentro del círculo */
  #programa .toggle-link__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
    padding-top: 1px !important;
    /* corrige la “caída” visual del glifo */
  }

  /* QUIÉN (PC v8): el texto NO se reparte a la fuerza ni se pisa */
  #quien .pcOnly.pcv8 .grid2 {
    align-items: start !important;
  }

  #quien .pcOnly.pcv8 .stack {
    height: auto !important;
    /* adiós altura fija */
    gap: 14px !important;
  }

  #quien .pcOnly.pcv8 .card {
    flex: 0 0 auto !important;
    /* no “cuatro tarjetas iguales” */
    justify-content: flex-start !important;
    min-height: unset !important;
  }

  #quien .pcOnly.pcv8 .card h3 {
    margin: 0 0 10px !important;
  }

  #quien .pcOnly.pcv8 .card p {
    line-height: 1.6 !important;
  }

  #quien .pcOnly.pcv8 .whoBullets {
    line-height: 1.6 !important;
  }

  /* QUIÉN (PC): igualamos alturas. La foto se estira al alto real del texto (fila completa) */
  #quien .pcOnly.pcv8 .grid2 {
    align-items: stretch !important;
  }

  #quien .pcOnly.pcv8 .panel {
    height: auto !important;
    align-self: stretch !important;
    min-height: unset !important;
  }

  #quien .pcOnly.pcv8 .panel img {
    height: 100% !important;
  }

  /* QUIÉN (PC): compactar un pelín más para que no parezca un testamento */
  #quien .pcOnly.pcv8 .stack {
    gap: 10px !important;
  }

  #quien .pcOnly.pcv8 .card {
    padding: 12px 14px !important;
  }

  #quien .pcOnly.pcv8 .card h3 {
    font-size: 15.5px !important;
    margin: 0 0 8px !important;
  }

  #quien .pcOnly.pcv8 .card p,
  #quien .pcOnly.pcv8 .whoBullets {
    font-size: 13.2px !important;
    line-height: 1.45 !important;
  }

  #quien .pcOnly.pcv8 .whoBullets {
    margin-top: 8px !important;
    padding-left: 16px !important;
  }

  #quien .pcOnly.pcv8 .whoBullets li {
    margin: 5px 0 !important;
  }

  /* PROGRAMA (PC): texto nuclear sin que los inactivos se vuelvan ilegibles por la opacidad global */
  .pcv8 #programa .progCoverflow .cfTitle,
  .pcv8 #programa .progCoverflow .cfText,
  .pcv8 #programa .progCoverflow .cfChip,
  .pcv8 #programa .progCoverflow .cfChip span {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Panel más oscuro para contraste real (el blanco sin fondo es postureo) */
  .pcv8 #programa .progCoverflow .cfPanel {
    background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 100%) !important;
    border-color: rgba(255, 255, 255, .16) !important;
  }

  /* Inactivos: seguir “de fondo”, pero que se lean */
  .pcv8 #programa .progCoverflow .cfCard:not(.isActive) {
    opacity: .78 !important;
    filter: saturate(.90) !important;
  }

  .pcv8 #programa .progCoverflow .cfCard:not(.isActive) .cfPanel {
    opacity: .88 !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* PROGRAMA (PC): el overlay ::after estaba por encima del contenido y apagaba el texto */
  .pcv8 .cfCard {
    position: absolute !important;
  }

  .pcv8 .cfCard::after {
    z-index: 0 !important;
  }

  .pcv8 .cfMedia {
    z-index: 0 !important;
  }

  .pcv8 .cfBody {
    position: absolute !important;
    z-index: 2 !important;
  }

  .pcv8 .cfPanel,
  .pcv8 .cfChips {
    position: relative !important;
    z-index: 3 !important;
  }

  /* PROGRAMA (PC): blanco nuclear real (sin RGBA) */
  #programa .pcv8 .progCoverflow .cfTitle,
  #programa .pcv8 .progCoverflow .cfText,
  #programa .pcv8 .progCoverflow .cfMeta,
  #programa .pcv8 .progCoverflow .cfNum,
  #programa .pcv8 .progCoverflow .cfTag,
  #programa .pcv8 .progCoverflow .cfChip,
  #programa .pcv8 .progCoverflow .cfChip span {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* QUIÉN ES NOEMÍ (PC): la foto debe tener el mismo alto que el bloque de texto */
  #quien .pcOnly.pcv8 .grid2 {
    align-items: stretch !important;
  }

  #quien .pcOnly.pcv8 .panel {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #quien .pcOnly.pcv8 .panel img {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  #quien .pcOnly.pcv8 .panelCaption {
    flex: 0 0 auto !important;
  }

  /* QUIÉN ES NOEMÍ (PC): anula alturas fijas heredadas (panelH) */
  #quien .pcOnly.pcv8 .panel {
    max-height: none !important;
    min-height: 0 !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* QUIEN ES NOEMÍ: la foto debe estirar al alto real del stack */
  #quien .pcOnly.pcv8 .grid2 {
    align-items: stretch !important;
  }

  #quien .pcOnly.pcv8 .panel {
    height: auto !important;
    min-height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
  }

  #quien .pcOnly.pcv8 .panel img {
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Evita que un max-height heredado o inline vuelva a limitar */
  #quien .pcOnly.pcv8 .panel,
  #quien .pcOnly.pcv8 .panel * {
    max-height: none !important;
  }

  /* SUBHERO (seo-intro): más premium, menos subrayador amarillo */
  .seo-intro {
    padding: 56px 0 60px !important;
  }

  .seo-intro .container {
    max-width: 980px !important;
  }

  .seo-intro h2 {
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.4px !important;
    text-transform: none !important;
    max-width: 980px !important;
    margin: 0 auto 14px !important;
    color: rgba(255, 255, 255, .92) !important;
  }

  .seo-intro h2 .accent {
    color: var(--accent) !important;
    text-shadow: none !important;
    background: none !important;
  }

  .seo-intro .rule {
    width: 64px !important;
    height: 2px !important;
    margin: 10px auto 18px !important;
    opacity: .9 !important;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0), rgba(139, 92, 246, .9), rgba(139, 92, 246, 0)) !important;
  }

  .seo-intro p {
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .70) !important;
    max-width: 860px !important;
    margin: 0 auto 14px !important;
  }

  .seo-intro .sig {
    font-size: 14px !important;
    letter-spacing: .2px !important;
    color: rgba(255, 255, 255, .58) !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* QUIÉN ES NOEMÍ: la fila del grid se define por el stack; el panel debe llenarla */
  #quien .pcOnly.pcv8 .grid2 {
    align-items: stretch !important;
  }

  #quien .pcOnly.pcv8 .panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  /* Mata cualquier min-height heredado que fuerce panelH */
  .pcv8 #quien .panel {
    min-height: 0 !important;
  }

  #quien .pcOnly.pcv8 .panel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* SUBHERO (seo-intro): más elegante, sin amarillo */
  .seo-intro {
    padding: 52px 0 58px !important;
  }

  .seo-intro .container {
    max-width: 980px !important;
  }

  .seo-intro h2 {
    font-size: 26px !important;
    line-height: 1.22 !important;
    font-weight: 850 !important;
    letter-spacing: -0.25px !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .90) !important;
    text-shadow: none !important;
    margin: 0 auto 12px !important;
  }

  .seo-intro h2 .accent {
    color: var(--brand) !important;
    background: none !important;
    text-shadow: none !important;
  }

  .seo-intro .rule {
    width: 54px !important;
    height: 2px !important;
    margin: 10px auto 16px !important;
    opacity: .85 !important;
  }

  .seo-intro p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .66) !important;
    max-width: 860px !important;
  }

  .seo-intro .sig {
    font-size: 13.5px !important;
    letter-spacing: .15px !important;
    color: rgba(255, 255, 255, .52) !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* QUIÉN ES NOEMÍ (PC): igualar alturas de verdad.
     En grid con altura auto, height:100% no estira. Solución: layout flex-row con stretch.
     Solo afecta a #quien en PC. */
  #quien .pcOnly.pcv8 .grid2 {
    display: flex !important;
    gap: 22px !important;
    align-items: stretch !important;
  }

  #quien .pcOnly.pcv8 .panel {
    flex: 1.05 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #quien .pcOnly.pcv8 .stack {
    flex: .95 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: flex !important;
  }

  #quien .pcOnly.pcv8 .panel img {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Mata la altura fija original */
  .pcv8 #quien .panel,
  .pcv8 #quien .stack {
    height: auto !important;
    min-height: 0 !important;
  }
}


/* ==== extracted from inline styles ==== */


/* AJUSTES 22 — QUIÉN ES NOEMÍ (PC ONLY): foto con el MISMO alto que el texto.
   No usamos media query: la seguridad es .pcOnly (en móvil está oculto), así no afecta a la vista móvil. */
.pcOnly.pcv8 #quien .grid2 {
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
}

.pcOnly.pcv8 #quien .panel {
  /* mata la altura fija base (var(--panelH)) */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1.05 1 0 !important;
  align-self: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.pcOnly.pcv8 #quien .stack {
  flex: .95 1 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

.pcOnly.pcv8 #quien .panel>img {
  /* saca la imagen del flujo para que NO imponga altura propia */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 0 !important;
}

/* que la caption quede por encima de la imagen */
.pcOnly.pcv8 #quien .panelCaption {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
}

/* opcional: leve velo para legibilidad de la caption sin cambiar el look */
.pcOnly.pcv8 #quien .panelCaption {
  background: linear-gradient(180deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .55)) !important;
}


/* ==== extracted from inline styles ==== */


/* AJUSTES 23 — QUIÉN ES NOEMÍ (PC): foto con el MISMO alto que el texto.
   Clave: el #quien NO vive dentro de .pcOnly, así que usamos media query de escritorio.
   La vista móvil no se toca porque este bloque solo aplica >=981px. */
@media (min-width: 1024px) {
  #quien .grid2 {
    display: flex !important;
    align-items: stretch !important;
    gap: 22px !important;
  }

  /* Columna izquierda: panel foto */
  #quien .grid2>.panel {
    flex: 1.05 1 0 !important;
    align-self: stretch !important;
    position: relative !important;
    overflow: hidden !important;

    /* mata alturas heredadas tipo var(--panelH) */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: block !important;
    /* importante: no flex aquí para que no cree alturas raras */
  }

  /* Imagen a fondo, fuera del flujo */
  #quien .grid2>.panel>img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    z-index: 0 !important;
  }

  /* Caption por encima */
  #quien .grid2>.panel .panelCaption {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 14px !important;
    z-index: 2 !important;
  }

  /* Columna derecha: stack */
  #quien .grid2>.stack {
    flex: .95 1 0 !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }

  /* Truco definitivo: la altura la marca el stack; el panel la copia por 'stretch' del flex.
     Para evitar que el panel se quede bajito si no tiene "altura de referencia", le damos un min-height = altura del stack usando align-items:stretch.
     Si el navegador sigue con gracia, le damos 'height: auto' y se estira igual. */
}


/* ==== extracted from inline styles ==== */



/* =========================
   PC Refinements (2026-02-10)
   Objetivo: más premium, menos arcade.
   SOLO escritorio: no afecta a móvil.
========================= */
@media (min-width: 900px) {

  /* Bloque SEO: menos "pantalla vacía", más integrado */
  .seo-intro {
    padding: 28px 0 44px !important;
  }

  .seo-intro .rule {
    margin: 10px auto 16px !important;
    opacity: .65 !important;
  }

  .seo-intro p {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Testimonios: menos vacío, más lectura y detalle */
  .t2-card {
    padding: 34px 34px 28px !important;
  }

  .t2-card p {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    letter-spacing: .1px !important;
  }

  .t2-card p::before {
    content: "“";
    display: block;
    font-size: 42px;
    line-height: 1;
    opacity: .28;
    margin-bottom: 10px;
  }

  .t2-card .author {
    font-size: .98rem !important;
    opacity: .95 !important;
  }

  /* Flechas testimonios: más finas, menos "botón ascensor" */
  .t2-nav {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 209, 26, .22) !important;
    background: rgba(0, 0, 0, .20) !important;
    color: rgba(255, 209, 26, .92) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .t2-nav:hover {
    background: rgba(255, 209, 26, .10) !important;
    border-color: rgba(255, 209, 26, .35) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .33) !important;
  }

  /* Dots: más discretos */
  .t2-dots button {
    width: 7px !important;
    height: 7px !important;
    opacity: .65 !important;
  }

  .t2-dots button[aria-current="true"] {
    opacity: 1 !important;
  }

  /* Dropdown del "Ver el plan por dentro": icono centrado */
  .toggle-link__icon {
    transform: none !important;
  }

  /* CTA final: amarillo como acento, no como grito */
  .cta-band .hl-brand-alt {
    color: var(--brand) !important;
    text-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  }

  .cta-band h2 {
    letter-spacing: .2px;
  }

  /* FAQ: menos altura por ítem */
  .faq summary {
    padding: 14px 16px !important;
    font-weight: 800;
  }

  .faq details>div {
    padding: 14px 16px !important;
  }
}

/* Integración visual del bloque SEO con el hero (sin tocar la primera vista)
   Nota: el hero mantiene su composición centrada; el bloque SEO queda justo después. */
@media (min-width: 900px) {
  .hero+.seo-intro {
    margin-top: -10px;
  }
}



/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* --- 2. PROGRAMA BENTO GRID (Glass Triggers) --- */
  .premium-program-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
    height: 580px;
    margin-top: 40px;
  }

  .prog-triggers {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column stack for elegance */
    grid-auto-rows: 1fr;
    gap: 12px;
  }

  .prog-trigger {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding: 0 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Centered layout */
    align-items: center;
    /* Center horizon */
    justify-content: center;
    /* Center vertical */
    gap: 10px;
    /* Spacing */
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Center text */
  }

  .prog-trigger:hover {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.04), transparent);
    border-left-color: rgba(139, 92, 246, 0.4);
  }

  .prog-trigger.active {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.15), transparent);
    /* Top-down gradient */
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    /* Reset left border */
    border: 1px solid #8b5cf6;
    /* Full border for active */
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.2);
  }

  .pt-num {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.2rem;
    /* Larger number */
    color: rgba(255, 255, 255, 0.2);
    line-height: 1;
    transition: color 0.3s;
    margin-bottom: 0;
  }

  .prog-trigger.active .pt-num {
    color: #8b5cf6;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
  }

  .pt-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center text stack */
  }

  .pt-title {
    font-size: 0.9rem;
    font-weight: 500;
    /* More light/elegant */
    color: #fff;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .pt-sub {
    font-size: 0.7rem;
    color: rgba(148, 163, 184, 0.7);
    margin-top: 6px;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    font-style: italic;
  }

  /* Right: Preview Panel */
  .prog-preview {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  }

  /* (Reusable previous preview styles) */
  .pp-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    z-index: 1;
  }

  .pp-item.active {
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
    visibility: visible;
    z-index: 2;
  }

  .pp-item.active .pp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.1);
  }

  .pp-content {
    transform: translateY(30px);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
  }

  .pp-item.active .pp-content {
    transform: translateY(0);
  }

  .pp-title {
    font-family: "Bebas Neue";
    font-size: 3.5rem;
    line-height: 0.9;
    margin: 0 0 20px;
    color: #fff;
    text-transform: uppercase;
  }

  .pp-desc {
    font-size: 1.15rem;
    color: #cbd5e1;
    max-width: 55ch;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .pp-tags {
    display: flex;
    gap: 12px;
    justify-content: center;
    /* Centered tags */
  }

  .pp-tag {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #d8b4fe;
  }

  /* Toggle Button (Premium v5 - Sophisticated) */
  .toggle-btn-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    padding: 8px 20px;
    /* Even more compact */
    border-radius: 50px;
    font-weight: 500;
    /* Lighter weight for sophistication */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    font-size: 0.72rem;
    /* Even smaller */
    letter-spacing: 0.2em;
    /* More spacing */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .toggle-btn-premium:hover {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.15);
  }

  .toggle-btn-premium span:last-child {
    transition: transform 0.4s ease;
    display: flex;
    align-items: center;
  }

  .toggle-btn-premium.active span:last-child {
    transform: rotate(180deg);
  }
}



/* ==== extracted from inline styles ==== */


/* Ajustes SOLO escritorio (móvil intacto) */
@media (min-width: 1024px) {

  /* Dolor: columna izquierda más estrecha y foto más protagonista */
  .pcOnly.pcv8#dolor,
  .pcv8 #dolor {}

  .pcv8 #dolor .grid2 {
    grid-template-columns: .82fr 1.18fr !important;
    gap: 26px !important;
  }

  /* Programa (PC): sin zoom agresivo + panel inferior centrado + pills */
  #programa .pp-item.active .pp-img {
    transform: none !important;
  }

  #programa .pp-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  #programa .pp-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 34px !important;
    pointer-events: none;
  }

  #programa .pp-content {
    width: min(640px, 74%) !important;
    padding: 34px 44px 34px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .42) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
    text-align: center !important;
    pointer-events: none;
  }

  #programa .pp-title {
    text-shadow: 0 12px 34px rgba(0, 0, 0, .85) !important;
  }

  #programa .pp-desc {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #programa .pp-tags {
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap;
  }

  #programa .pp-tag {
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: rgba(0, 0, 0, .55) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
  }
}

/* Scrollbar fina y amarilla (PC y móvil, sin tocar layout) */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 197, 66, .85) rgba(0, 0, 0, .22);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .22);
}

::-webkit-scrollbar-thumb {
  background: rgba(245, 197, 66, .85);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .25);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 197, 66, .95);
}


/* ==== extracted from inline styles ==== */


/* PC refinements (no mobile changes) */
.seo-title {
  text-align: center;
  margin: 0 0 14px;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 800;
  letter-spacing: .8px;
  line-height: 1.05;
  font-size: clamp(1.75rem, 5.4vw, 2.35rem);
}

.seo-title .seo-title-top {
  display: block;
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase
}

.seo-title .seo-title-bottom {
  display: block;
  color: var(--brand);
  margin-top: 8px;
  text-transform: uppercase
}


@media (min-width:1021px) {

  /* Subhero (SEO intro) like the reference */
  .seo-title {
    display: block;
    text-align: center;
    margin: 0 0 14px;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    letter-spacing: .8px;
    line-height: 1.05;
    font-size: clamp(2.1rem, 3.2vw, 2.85rem);
  }

  .seo-title .seo-title-top {
    display: block;
    color: rgba(255, 255, 255, .92)
  }

  .seo-title .seo-title-bottom {
    display: block;
    color: var(--brand);
    margin-top: 8px
  }

  .seo-card {
    padding: 44px 52px;
    border-radius: 44px;
  }

  .seo-card p {
    max-width: 56rem;
    margin-inline: auto;
  }

  .seo-card .sig {
    display: none
  }

  .seo-chips {
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 22px !important;
  }

  .seo-chip {
    padding: 14px 26px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .28) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .9px !important;
  }

  /* Ver el plan por dentro (desktop cards) */
  .inside-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 10px
  }

  .inside-panel {
    padding: 26px 26px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
  }

  .inside-kicker {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    letter-spacing: .8px;
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .92);
  }

  .inside-accentline {
    width: 28px;
    height: 2px;
    background: rgba(255, 209, 26, .85);
    border-radius: 999px;
    margin-top: 10px;
  }

  .inside-lead {
    margin: 14px 0 16px;
    color: #cbd5e1;
    line-height: 1.65
  }

  .inside-list {
    list-style: none;
    padding: 0;
    margin: 0
  }

  .inside-list li {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #cbd5e1;
    line-height: 1.55
  }

  .inside-list li:first-child {
    border-top: none
  }

  .inside-dot {
    margin-top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 209, 26, .85);
    box-shadow: 0 0 0 3px rgba(255, 209, 26, .12);
    flex: 0 0 auto;
  }

  .inside-note {
    margin-top: 16px;
    color: #9ca3af;
    line-height: 1.6
  }

  .inside-divider {
    height: 1px;
    background: rgba(255, 255, 255, .07);
    margin: 16px 0
  }

  .inside-small {
    color: #9ca3af;
    line-height: 1.6;
    margin: 0
  }

  .inside-subtitle {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
    letter-spacing: .8px;
    font-size: 1.12rem;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 6px;
  }

  /* Testimonios: flechas más finas y elegantes, amarillas al hover */
  .t2-nav {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 56px !important;
    height: 56px !important;
    color: rgba(255, 255, 255, .38) !important;
  }

  .t2-nav svg {
    width: 28px;
    height: 28px
  }

  .t2-nav:hover {
    background: transparent !important;
    color: rgba(255, 209, 26, .95) !important
  }

  .t2-prev {
    left: -6px
  }

  .t2-next {
    right: -6px
  }
}


/* ==== extracted from inline styles ==== */


/* PC ONLY overrides: keep móvil intacto */
@media (min-width: 1024px) {

  /* FAQ: chevron elegante a la derecha (sin círculos), como en referencias */
  #faq .faq details summary {
    position: relative;
    padding-right: 56px;
    /* espacio para la flecha */
  }

  #faq .faq details summary::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid rgba(245, 199, 55, 0.98);
    border-bottom: 2px solid rgba(245, 199, 55, 0.98);
    transform: translateY(-50%) rotate(45deg);
    border-radius: 1px;
    transition: transform .18s ease, opacity .18s ease, filter .18s ease;
    opacity: .95;
    background: transparent;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 1px 6px rgba(245, 199, 55, .25));
  }

  #faq .faq details summary:hover::after {
    border-right-color: #f5c737;
    border-bottom-color: #f5c737;
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
  }

  #faq .faq details[open] summary::after {
    transform: translateY(-50%) rotate(-135deg);
    opacity: 1;
  }

  /* Si en alguna versión anterior quedó un "plus" circular, lo neutralizamos en PC */
  #faq .faq details summary .plus {
    display: none !important;
  }

  /* "Para empezar a tu ritmo" -> más sobrio y elegante (como referencia 4) */
  .programas-bridge__card {
    background: rgba(14, 16, 21, 0.92) !important;
    /* sólido, sin glow morado */
    border: 1px solid rgba(245, 199, 55, 0.18) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important;
  }

  .programas-bridge__content {
    padding: 44px 56px !important;
    gap: 42px !important;
  }

  .programas-bridge__kicker {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px !important;
    font-size: 12px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .programas-bridge__kicker .tag {
    background: rgba(140, 92, 255, 0.22) !important;
    border: 1px solid rgba(140, 92, 255, 0.32) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 8px 14px !important;
  }

  .programas-bridge__title {
    font-size: 44px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 18px !important;
  }

  .programas-bridge__bullets li {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  .programas-bridge__btn {
    max-width: 320px !important;
    border: 1px solid rgba(245, 199, 55, 0.28) !important;
    background: transparent !important;
    color: #f5c737 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  .programas-bridge__btn:hover {
    border-color: rgba(245, 199, 55, 0.55) !important;
    box-shadow: 0 18px 45px rgba(245, 199, 55, 0.12) !important;
    transform: translateY(-1px);
  }

  .programas-bridge__aside {
    padding-top: 38px !important;
  }

  .programas-bridge__aside .muted {
    color: rgba(255, 255, 255, 0.62) !important;
  }
}


/* ==== extracted from inline styles ==== */


/* PC-only polish: keep mobile untouched */
@media (min-width:1021px) {
  :root {
    --ui-radius: 22px;
    --ui-radius-sm: 18px;
    /* mute yellow slightly so it doesn't fight the purple */
    --accent: #e6b71e;
    --accent-soft: rgba(230, 183, 30, .55);
    --brand-glow-soft: rgba(139, 92, 246, .18);
    --stroke-subtle: rgba(255, 255, 255, .10);
    --stroke-subtle-2: rgba(255, 255, 255, .14);
  }

  /* Very subtle noise overlay to avoid banding on big dark gradients */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    background-size: 260px 260px;
    opacity: .06;
    mix-blend-mode: overlay;
  }

  header,
  main,
  section,
  footer {
    position: relative;
    z-index: 1;
  }

  /* Premium glow: whisper, don't scream */
  h1,
  h2,
  .hero-cine-title,
  .hero-title,
  #faq-title,
  #testi-title {
    text-shadow: 0 0 10px var(--brand-glow-soft) !important;
    filter: none !important;
  }

  /* Global radius consistency on key UI surfaces */
  .t2-card,
  .faq details,
  .faq details summary,
  .faq details .answer,
  .programas-bridge,
  .programas-bridge__btn,
  .cta-primary,
  .cta-secondary,
  .btn,
  .pill,
  .subhero .pill,
  .carousel-btn,
  .t2-nav button {
    border-radius: var(--ui-radius) !important;
  }

  /* Borders: unify subtle stroke */
  .t2-card,
  .faq details,
  .faq details summary,
  .programas-bridge {
    border-color: var(--stroke-subtle) !important;
  }

  /* Typography: breathe a touch more on long copy */
  .t2-card p,
  .programas-bridge p,
  .programas-bridge li,
  .faq details .answer,
  .faq details .answer p,
  .faq details .answer li {
    line-height: 1.65 !important;
  }

  /* Tracking: reduce on long uppercase (especially buttons) */
  .programas-bridge__btn,
  .cta-primary,
  .cta-secondary,
  .btn {
    letter-spacing: .08em !important;
  }

  /* Button consistency: same height, weight, hover feel */
  .programas-bridge__btn,
  .cta-primary,
  .cta-secondary,
  .btn {
    min-height: 48px;
    padding: 12px 20px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  }

  .programas-bridge__btn:hover,
  .cta-primary:hover,
  .cta-secondary:hover,
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  }

  /* Fix: CTA text not spilling outside its own pill/button */
  .programas-bridge__btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Yellow = actions only. Testimonials: move name highlight to brand, not accent */
  .t2-card .author {
    color: rgba(139, 92, 246, .85) !important;
    font-weight: 750;
  }

  /* Testimonials nav: stop yelling in yellow */
  .t2-nav button {
    border: 1px solid var(--stroke-subtle);
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .03);
  }

  .t2-nav button:hover {
    border-color: rgba(139, 92, 246, .35);
    background: rgba(139, 92, 246, .08);
    color: rgba(139, 92, 246, .92);
  }

  /* Dots: brand-led, not casino-led */
  .t2-dots button {
    background: rgba(255, 255, 255, .14) !important;
  }

  .t2-dots button[aria-current="true"] {
    background: rgba(139, 92, 246, .95) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .14);
  }

  /* FAQ chevrons: elegant, clearly clickable, aligned right */
  .faq details summary {
    padding-right: 56px !important;
  }

  .faq details summary::after {
    content: "";
    width: 18px !important;
    height: 18px !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(139, 92, 246, .92);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .9;
  }

  .faq details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Section spacing: small, consistent breathing room */
  section[aria-labelledby="testi-title"],
  section#faq {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }

  /* Programas bridge: softer border + cleaner hierarchy */
  .programas-bridge {
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 30px 80px rgba(0, 0, 0, .35);
  }

  .programas-bridge__kicker {
    border-color: rgba(139, 92, 246, .35) !important;
    background: rgba(139, 92, 246, .10) !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 721px) {

  /* Header: más fino + fijo al hacer scroll (desktop) */
  :root {
    --hdr: 64px;
  }

  header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;
  }

  header .container.nav {
    padding: 10px 0 !important;
  }

  header .logo {
    width: 44px !important;
    height: 44px !important;
  }

  /* Unificar títulos: mismo tamaño/estilo que "Qué incluye el programa" */
  #testi-title,
  #faq-title {
    font-size: 34px !important;
    letter-spacing: -.6px !important;
    margin: 0 0 10px !important;
    font-weight: 900 !important;
  }

  /* Testimonios: nombre en amarillo (no morado) */
  .testi-block .author {
    color: var(--accent) !important;
  }

  /* Programa: panel de texto invisible + pills morado/rosa claro */
  #programa .progCoverflow .cfPanel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }

  #programa .progCoverflow .cfChips {
    margin-top: 14px !important;
  }

  #programa .progCoverflow .cfChip {
    background: rgba(196, 181, 253, .22) !important;
    /* brand-300 suave */
    border: 1px solid rgba(196, 181, 253, .45) !important;
    color: #f5f3ff !important;
  }

  #programa .progCoverflow .cfChip span {
    color: #f5f3ff !important;
  }

  /* Programa: texto pequeño de los 6 recuadros en amarillo al hover/activo */
  #programa .prog-trigger .pt-sub {
    color: rgba(231, 233, 238, .55) !important;
  }

  #programa .prog-trigger:hover .pt-sub,
  #programa .prog-trigger.active .pt-sub {
    color: var(--accent) !important;
  }

  /* FAQ: chevron amarillo, sutil, sin círculo; rota al abrir y resalta al hover */
  .faq summary {
    position: relative;
    padding-right: 28px !important;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::marker {
    content: "";
  }

  .faq summary::after {
    content: "▾";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 14px;
    opacity: .75;
    transition: transform .18s ease, opacity .18s ease, filter .18s ease;
  }

  .faq details[open]>summary::after {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
    filter: drop-shadow(0 0 10px rgba(255, 209, 26, .20));
  }

  .faq summary:hover::after {
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
    filter: drop-shadow(0 0 10px rgba(255, 209, 26, .18));
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 721px) {

  /* FIX 1: texto pequeño (pt-sub) amarillo en hover/activo, nunca morado */
  #programa .pcv8 .prog-trigger .pt-sub {
    color: rgba(231, 233, 238, .55) !important;
  }

  #programa .pcv8 .prog-trigger:hover .pt-sub,
  #programa .pcv8 .prog-trigger.active .pt-sub {
    /* Ojo: dentro de .pcv8 --accent es morado. Aquí queremos amarillo real. */
    color: rgba(255, 209, 26, .95) !important;
  }

  /* FIX 2: pills (pp-tag) con texto moradito suave (como referencia) */
  #programa .pcv8 .pp-tag {
    background: rgba(196, 181, 253, .18) !important;
    border-color: rgba(196, 181, 253, .35) !important;
    color: rgba(196, 181, 253, .95) !important;
  }

  /* (si aparece también en el coverflow superior) */
  #programa .pcv8 .progCoverflow .cfChip,
  #programa .pcv8 .progCoverflow .cfChip span {
    color: rgba(196, 181, 253, .95) !important;
  }

  /* FIX 3: FAQ chevron sutil amarillo (sin círculo) */
  #faq .faq details summary {
    position: relative;
    padding-right: 56px !important;
  }

  /* Oculta el marker nativo del <summary> (Safari/Chrome + Firefox) */
  #faq .faq summary::-webkit-details-marker {
    display: none;
  }

  #faq .faq summary::marker {
    content: "";
  }

  #faq .faq details summary::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid rgba(245, 199, 55, 0.98);
    border-bottom: 2px solid rgba(245, 199, 55, 0.98);
    transform: translateY(-50%) rotate(45deg);
    border-radius: 1px;
    transition: transform .18s ease, opacity .18s ease, filter .18s ease;
    opacity: .95;
    background: transparent;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 1px 6px rgba(245, 199, 55, .25));
  }

  #faq .faq details summary:hover::after {
    opacity: 1;
    filter: drop-shadow(0 2px 10px rgba(245, 199, 55, .35));
    filter: drop-shadow(0 0 10px rgba(255, 209, 26, .18));
  }

  #faq .faq details[open] summary::after {
    transform: translateY(-50%) rotate(-135deg) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 12px rgba(255, 209, 26, .22)) !important;
  }

  /* FIX 4: ancho consistente entre secciones (PC) */
  main>section>.container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Programa PC usa .wrap, lo igualamos al resto */
  #programa .pcOnly.pcv8 .wrap {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* FAQ puede ir un poco más estrecho */
  #faq>.container {
    max-width: 1080px !important;
  }
}


/* ==== extracted from inline styles ==== */


/* Parches SOLO PC: no tocar móvil */
@media (min-width: 721px) {

  /* =========================
     1) Testimonios: dots amarillos (se vean de verdad)
     ========================= */
  .t2-dots button {
    border: 1px solid rgba(245, 199, 55, .65) !important;
    background: rgba(245, 199, 55, .18) !important;
    box-shadow: 0 0 0 4px rgba(245, 199, 55, .07) !important;
  }

  .t2-dots button[aria-selected="true"],
  .t2-dots button[aria-current="true"] {
    background: rgba(245, 199, 55, .95) !important;
    border-color: rgba(245, 199, 55, .95) !important;
    box-shadow: 0 0 0 5px rgba(245, 199, 55, .18) !important;
  }

  /* Si esta versión usa dots alternativos en testimonios */
  .pcv8 .testiDots .dotBtn,
  .pcv8 .dots .dotBtn {
    background: rgba(245, 199, 55, .22) !important;
    box-shadow: 0 0 0 4px rgba(245, 199, 55, .08) !important;
  }

  .pcv8 .testiDots .dotBtn.on,
  .pcv8 .dots .dotBtn.on {
    background: rgba(245, 199, 55, .95) !important;
    box-shadow: 0 0 0 5px rgba(245, 199, 55, .18) !important;
  }

  /* =========================
     2) FAQ: chevron amarillo sutil SIN círculo (forzado)
     ========================= */
  #faq .faq summary {
    position: relative !important;
    padding-right: 56px !important;
  }

  /* Anula cualquier + / – anterior */
  #faq .faq summary::after {
    content: "" !important;
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid rgba(245, 199, 55, .92) !important;
    border-bottom: 2px solid rgba(245, 199, 55, .92) !important;
    background: transparent !important;
    border-radius: 1px !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transition: transform .18s ease, opacity .18s ease, border-color .18s ease !important;
    opacity: .85 !important;
    box-shadow: none !important;
  }

  #faq .faq summary:hover::after {
    opacity: 1 !important;
    border-right-color: rgba(245, 199, 55, 1) !important;
    border-bottom-color: rgba(245, 199, 55, 1) !important;
  }

  #faq .faq details[open]>summary::after {
    transform: translateY(-50%) rotate(-135deg) !important;
    opacity: 1 !important;
  }

  /* Si quedase un wrapper de icono de otras versiones, fuera */
  #faq .faq summary .plus {
    display: none !important;
  }
}


/* ==== extracted from inline styles ==== */


/* =========================================================
   Desktop-only polish (>=981px)
   Objetivo: premium, elegante. Móvil intacto.
   ========================================================= */
@media (min-width: 1024px) {

  /* 1) Dolor: menos caja en texto + imagen un poco más protagonista */
  #dolor .pcv8 {
    --panelH: 380px;
  }

  #dolor .pcv8 .grid2 {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 26px;
    align-items: center;
  }

  #dolor .pcv8 #dolorStack.card,
  #dolor .pcv8 .stack .card {
    padding: 14px 16px;
    border-radius: 16px;
  }

  #dolor .pcv8 .stack .card h3 {
    font-size: 16px;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }

  #dolor .pcv8 .stack .card p {
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
  }

  #dolor .pcv8 .panel {
    border-radius: 20px;
    overflow: hidden;
  }

  #dolor .pcv8 .panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    filter: saturate(1.02) contrast(1.02);
  }

  /* 2) Toggle "Ver el plan por dentro": animación slide + fade + rotación icon */
  #programaExtra {
    display: block !important;
    /* dejamos visible para animar */
    overflow: hidden !important;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .46s ease, opacity .32s ease, transform .46s ease;
    will-change: max-height, opacity, transform;
  }

  #programaExtra.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  #programa .toggle-link__icon {
    display: inline-grid !important;
    place-items: center !important;
    transition: transform .42s ease;
  }

  #programa .toggle-link.is-open .toggle-link__icon {
    transform: rotate(180deg);
  }

  /* 3) Testimonios: tarjetas oscuras glass + dorado en autor + carrusel fino */
  .testi-block {
    position: relative;
  }

  .testi-block .t2-viewport {
    padding: 8px 54px 0;
  }

  /* deja aire a las flechas */
  .testi-block .t2-card {
    background: rgba(10, 12, 20, .55);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
  }

  .testi-block .t2-card p {
    color: rgba(255, 255, 255, .90);
    font-size: 14.5px;
    line-height: 1.55;
  }

  .testi-block .t2-card .author {
    color: var(--gold);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 12px;
  }

  .testi-block .t2-nav {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(245, 197, 66, .38);
    background: rgba(0, 0, 0, .18);
    color: rgba(245, 197, 66, .92);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .testi-block .t2-nav:hover {
    border-color: rgba(245, 197, 66, .55);
    background: rgba(0, 0, 0, .26);
  }

  .testi-block .t2-dots button {
    border-color: rgba(255, 255, 255, .30);
  }

  .testi-block .t2-dots button[aria-selected="true"] {
    background: rgba(245, 197, 66, .95);
    border-color: rgba(245, 197, 66, .95);
  }

  /* 4) CTA final: más ligero, menos bloque */
  #contacto.cta-band {
    padding: 22px 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  #contacto.cta-band h2 {
    font-size: 30px;
    line-height: 1.08;
    margin-bottom: 10px;
  }

  #contacto.cta-band .muted {
    margin-bottom: 16px;
  }

  #contacto .cta-row {
    gap: 12px;
  }

  #contacto .cta-row .btn {
    padding: 12px 16px;
    border-radius: 14px;
  }
}


/* ==== extracted from inline styles ==== */


/* Cambios solicitados: SOLO PC (móvil intacto) */
@media (min-width: 721px) {

  /* 1) Dolor: quitar textos superpuestos bajo la imagen */
  #dolor .pcv8 .panelCaption small,
  #dolor .pcv8 .panelCaption .panelTag {
    display: none !important;
  }

  /* 2) Qué incluye el programa: pills (chips) legibles y elegantes (alto contraste) */
  /* Nota: algunos elementos no cuelgan de .pcv8 en todas las versiones, así que lo hacemos robusto */
  #programa .pp-tag,
  #programa .pp-tags .pp-tag,
  #programa .progCoverflow .cfChip,
  #programa .progCoverflow .cfChip span,
  #programa .progCoverflow .cfPills .pill,
  #programa .progCoverflow .cfTag,
  #programa .progCoverflow .cfChips .cfChip,
  #programa .progCoverflow .cfChips .cfChip span {
    color: rgba(255, 255, 255, .95) !important;
    background: rgba(10, 12, 18, .58) !important;
    /* glass oscuro */
    border: 1px solid rgba(255, 209, 26, .38) !important;
    /* dorado suave */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .60) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  #programa .progCoverflow .cfChip {
    border-radius: 999px !important;
    padding: 10px 14px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
  }

  #programa .progCoverflow .cfChip span {
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 900 !important;
  }

  #programa .pp-tag:hover,
  #programa .progCoverflow .cfChip:hover,
  #programa .progCoverflow .cfPills .pill:hover {
    background: rgba(10, 12, 18, .70) !important;
    border-color: rgba(255, 209, 26, .60) !important;
  }

  /* 3) Quién es Noemí: quitar pill redundante */
  #quien .pcv8 .panelCaption .panelTag {
    display: none !important;
  }

  /* 4) FAQ: asegurar flecha amarilla visible (por si otra regla la pisaba) */
  #faq .faq details>summary {
    position: relative !important;
    padding-right: 58px !important;
  }

  #faq .faq summary::-webkit-details-marker {
    display: none !important;
  }

  #faq .faq summary::marker {
    content: "" !important;
  }

  #faq .faq details>summary::after {
    content: "" !important;
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border-right: 2px solid rgba(255, 209, 26, .92) !important;
    border-bottom: 2px solid rgba(255, 209, 26, .92) !important;
    transform: translateY(-50%) rotate(45deg) !important;
    opacity: .9 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 10px rgba(255, 209, 26, .18)) !important;
  }

  #faq .faq details[open]>summary::after {
    transform: translateY(-50%) rotate(-135deg) !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 12px rgba(255, 209, 26, .24)) !important;
  }

  #faq .faq details>summary:hover::after {
    opacity: 1 !important;
    border-right-color: rgba(255, 209, 26, 1) !important;
    border-bottom-color: rgba(255, 209, 26, 1) !important;
  }



  /* Fallback: si no existe el contenedor .faq, igual pintamos la flecha */
  #faq details>summary {
    position: relative !important;
    padding-right: 58px !important;
  }

  #faq details>summary::after {
    content: "" !important;
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border-right: 2px solid rgba(255, 209, 26, .92) !important;
    border-bottom: 2px solid rgba(255, 209, 26, .92) !important;
    transform: translateY(-50%) rotate(45deg) !important;
    opacity: .9 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 10px rgba(255, 209, 26, .18)) !important;
  }

  #faq details[open]>summary::after {
    transform: translateY(-50%) rotate(-135deg) !important;
  }

  /* 5) Para empezar a tu ritmo: sin “recuadro gigante” a ancho completo + sin subrayado raro */
  .programas-bridge {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .programas-bridge::before,
  .programas-bridge::after {
    content: none !important;
  }

  .programas-bridge__kicker {
    background: transparent !important;
    width: auto !important;
    padding: 0 !important;
  }

  .programas-bridge__kicker::before,
  .programas-bridge__kicker::after {
    content: none !important;
  }

  /* 6) CTA Contacto: “Reservar entrevista gratuita” con borde amarillo y relleno blanco */
  #contacto .cta-row a.btn:not(.alt) {
    border: 1px solid rgba(255, 209, 26, .95) !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .25) !important;
  }

  #contacto .cta-row a.btn:not(.alt):hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .30) !important;
  }
}

/* 7) “Ver el plan por dentro” en PC: modal con entrada más pro */
#programaExtra.is-modal {
  transform-origin: top center;
  position: fixed !important;
}

#programaExtra.is-modal::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  pointer-events: none;
  background: radial-gradient(700px 240px at 18% 0%, rgba(124, 58, 237, .22), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, rgba(245, 199, 55, .10), rgba(255, 255, 255, 0));
  opacity: .9;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;
  box-sizing: border-box;
}

@keyframes planPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -22px) scale(.98);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes planOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -14px) scale(.985);
    filter: blur(6px);
  }
}

#programaExtra.is-modal.modal-enter {
  animation: planPop .32s cubic-bezier(.2, .9, .2, 1) both;
}

#programaExtra.is-modal.modal-leave {
  animation: planOut .22s ease both;
}

/* Botón toggle: icono rota + mini glow cuando está abierto */
@media (min-width: 1024px) {
  .toggle-link.is-open {
    box-shadow: 0 0 0 1px rgba(245, 199, 55, .28), 0 14px 34px rgba(0, 0, 0, .35) !important;
  }

  .toggle-link.is-open .toggle-link__icon {
    transform: rotate(180deg);
  }
}


/* ==== extracted from inline styles ==== */


/* ============================
   FIX ESPECÍFICO (MÓVIL)
   Transición HERO -> #dolor sin banda negra
   Objetivo: que el siguiente bloque "suba" y se funda con el hero
   ============================ */
@media (max-width:820px) {

  /* Reduce el hueco real (venía de solape pequeño + padding-top enorme) */
  .hero {
    padding-bottom: 0 !important;
  }

  /* El sheet se mete un poco más para tapar el salto */
  .hero .hero-sheet {
    margin-bottom: -48px !important;
  }

  /* La sección de dolor sube y baja su padding superior */
  #dolor {
    margin-top: -48px !important;
    padding-top: 52px !important;
  }

  /* Banda de fusión más larga y suave */
  #dolor::before {
    top: -48px !important;
    height: 122px !important;
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
    background: linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, .35) 30%,
        rgba(14, 17, 23, .72) 62%,
        rgba(14, 17, 23, 1) 100%) !important;
    box-shadow: none !important;
  }

  /* Por si algún margen superior del container te vuelve a crear aire */
  #dolor .container {
    margin-top: 0 !important;
  }

  #dolor .m-mobile-head {
    margin-top: 0 !important;
  }
}


/* ==== extracted from inline styles ==== */


/* =========================================================
   Testimonios: upgrade premium (solo sección "Lo que dicen")
   Objetivo: menos borde "cutre", más glass y detalle lujo.
   ========================================================= */

section[aria-labelledby="testi-title"] {
  position: relative;
  overflow: hidden;
}

/* Fondo sutil: evita el bloque plano y da profundidad */
section[aria-labelledby="testi-title"]::before {
  content: "";
  position: absolute;
  inset: -140px -90px -160px -90px;
  pointer-events: none;
  background:
    radial-gradient(620px 320px at 18% 18%, rgba(139, 92, 246, .14), transparent 60%),
    radial-gradient(560px 320px at 85% 35%, rgba(245, 197, 66, .10), transparent 60%),
    radial-gradient(520px 300px at 45% 95%, rgba(255, 255, 255, .06), transparent 65%);
  opacity: .95;
  filter: saturate(1.02);
}

/* Mantén el contenido por delante */
.testi-block {
  position: relative;
  z-index: 1;
}

/* Título con subrayado premium */
#testi-title {
  position: relative;
  display: inline-block;
  margin-bottom: 18px;
}

#testi-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), rgba(245, 197, 66, .92));
  opacity: .9;
}

/* Layout desktop: dos tarjetas más centradas y con aire */
@media (min-width:768px) {
  section[aria-labelledby="testi-title"] {
    padding: 66px 0 72px;
  }

  .testi-block .t2-slots {
    max-width: 980px;
    margin-inline: auto;
    gap: 26px;
  }

  .testi-block .t2-prev {
    left: -10px !important;
  }

  .testi-block .t2-next {
    right: -10px !important;
  }
}

/* Tarjetas: una sola capa, glass fino, borde suave, detalle dorado */
.testi-block .t2-card {
  position: relative;
  padding: 24px 26px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022)) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  box-shadow: 0 22px 72px rgba(0, 0, 0, .56) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  overflow: hidden;
}

/* Bisel interior (sensación de "producto") */
.testi-block .t2-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 0 1px rgba(0, 0, 0, .22);
}

/* Detalle dorado superior */
.testi-block .t2-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 54px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(245, 197, 66, .92), rgba(245, 197, 66, 0));
  opacity: .9;
  pointer-events: none;
}

.testi-block .t2-card p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: .1px;
}

.testi-block .t2-card .author {
  margin-top: 16px !important;
  color: rgba(245, 197, 66, .95) !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-size: 12px !important;
}

/* Hover: micro-lift (solo donde existe hover) */
@media (hover:hover) and (min-width:768px) {
  .testi-block .t2-card {
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  }

  .testi-block .t2-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 197, 66, .22) !important;
    box-shadow: 0 26px 86px rgba(0, 0, 0, .62) !important;
  }
}

/* Flechas: menos "botón amarillo", más control de lujo */
.testi-block .t2-nav {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(0, 0, 0, .22) !important;
  color: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.testi-block .t2-nav svg {
  width: 22px !important;
  height: 22px !important;
}

.testi-block .t2-nav:hover {
  border-color: rgba(245, 197, 66, .30) !important;
  color: rgba(245, 197, 66, .95) !important;
  background: rgba(0, 0, 0, .30) !important;
}

/* Paginación: cápsulas finas (más premium que "lunares") */
.testi-block .t2-dots {
  margin-top: 16px !important;
  gap: 10px !important;
}

.testi-block .t2-dots button {
  width: 18px !important;
  height: 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .04) !important;
}

.testi-block .t2-dots button[aria-selected="true"],
.testi-block .t2-dots button[aria-current="true"] {
  background: rgba(245, 197, 66, .95) !important;
  border-color: rgba(245, 197, 66, .95) !important;
  box-shadow: 0 8px 22px rgba(245, 197, 66, .18) !important;
}


/* ==== extracted from inline styles ==== */


/* =========================================================
   Testimonios (desktop): look premium tipo "coverflow" + auto-scroll suave
   - 3 tarjetas visibles
   - bordes mínimos, glass fino
   - desvanecido en extremos
   ========================================================= */

@media (min-width:768px) {

  /* En desktop usamos el carrusel (viewport/track), no el grid de slots */
  .testi-block .t2-viewport {
    display: block !important;
  }

  .testi-block .t2-slots {
    display: none !important;
  }

  .testi-block .t2-dots {
    display: none !important;
  }

  /* Viewport con desvanecido lateral */
  .testi-block .t2-viewport {
    position: relative;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 78px 8px !important;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge legacy */
    mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  }

  .testi-block .t2-viewport::-webkit-scrollbar {
    display: none;
  }

  .testi-block .t2-track {
    display: flex !important;
    gap: 26px !important;
    align-items: stretch;
    padding: 0 0 10px;
  }

  /* Tarjeta base */
  .testi-block .t2-card {
    flex: 0 0 clamp(300px, 30vw, 430px) !important;
    scroll-snap-align: center;
    padding: 28px 30px !important;
    border-radius: 22px !important;
    text-align: center;

    background: linear-gradient(180deg, rgba(255, 255, 255, .040), rgba(255, 255, 255, .014)) !important;
    border: 1px solid rgba(255, 255, 255, .075) !important;
    box-shadow: 0 26px 90px rgba(0, 0, 0, .58) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: .18;
    transform: translateY(0) scale(.985);
    transition: opacity .38s ease, transform .38s ease, border-color .38s ease, box-shadow .38s ease, filter .38s ease;
    filter: saturate(.92);
  }

  /* Texto */
  .testi-block .t2-card p {
    font-style: italic;
    color: rgba(255, 255, 255, .86) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    letter-spacing: .1px;
  }

  /* Autor con raya fina + dorado */
  .testi-block .t2-card .author {
    margin-top: 18px !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    color: rgba(245, 197, 66, .96) !important;
  }

  .testi-block .t2-card .author::before {
    content: "—";
    color: rgba(255, 255, 255, .22);
    font-weight: 700;
  }

  /* Estados: centro y cercanos */
  .testi-block .t2-card.is-near {
    opacity: .55;
    transform: translateY(0) scale(.995);
    filter: saturate(.98);
  }

  .testi-block .t2-card.is-center {
    opacity: 1;
    transform: translateY(-2px) scale(1);
    border-color: rgba(245, 197, 66, .20) !important;
    box-shadow: 0 34px 120px rgba(0, 0, 0, .66) !important;
    filter: saturate(1.05);
  }

  /* Flechas: chevrons discretos (sin “botón”) */
  .testi-block .t2-nav {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: color .22s ease, transform .22s ease, opacity .22s ease;
    opacity: .95;
  }

  .testi-block .t2-nav svg {
    width: 30px !important;
    height: 30px !important;
  }

  .testi-block .t2-nav:hover {
    color: rgba(255, 255, 255, .55) !important;
    transform: translateY(-1px);
  }

  .testi-block .t2-prev {
    left: 6px !important;
  }

  .testi-block .t2-next {
    right: 6px !important;
  }
}


/* ==== extracted from inline styles ==== */

/* =========================================================
   TWEAKS v8 (solo sección LO QUE DICEN)
   - Más luminosidad y contraste (sin perder foco en la card central)
   - Flechas estables (sin salto)
   - Cards ligeramente más juntas
   ========================================================= */
@media (min-width:768px) {

  /* Un pelín más de vida en el bloque, muy suave */
  .testi-block {
    position: relative !important;
    isolation: isolate;
  }

  .testi-block::before {
    content: "";
    position: absolute;
    inset: -140px -120px;
    pointer-events: none;
    background:
      radial-gradient(700px 260px at 50% 35%, rgba(139, 92, 246, .14), rgba(0, 0, 0, 0) 70%),
      radial-gradient(520px 220px at 15% 55%, rgba(245, 197, 66, .06), rgba(0, 0, 0, 0) 72%);
    opacity: .9;
    z-index: 0;
  }

  .testi-block>* {
    position: relative;
    z-index: 1;
  }

  /* Más juntas (sin atasco) */
  .testi-block .t2-viewport {
    padding: 12px 64px 10px !important;
  }

  .testi-block .t2-track {
    gap: 18px !important;
  }

  /* Cards: sube luminosidad y evita el “apagado” */
  .testi-block .t2-card {
    opacity: .42 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .030)) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 22px 80px rgba(0, 0, 0, .55) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .testi-block .t2-card.is-near {
    opacity: .78 !important;
  }

  /* Centro: foco premium */
  .testi-block .t2-card.is-center {
    opacity: 1 !important;
    border-color: rgba(245, 197, 66, .18) !important;
    box-shadow:
      0 36px 130px rgba(0, 0, 0, .62),
      0 0 0 1px rgba(255, 255, 255, .04) inset !important;
  }

  /* Texto: más legible (el opacity ya hace lo suyo en laterales) */
  .testi-block .t2-card p {
    color: rgba(245, 245, 255, .92) !important;
  }

  .testi-block .t2-card.is-center p {
    color: rgba(255, 255, 255, .96) !important;
  }

  .testi-block .t2-card .author {
    color: rgba(245, 197, 66, .92) !important;
  }

  /* Detalle dorado: todavía más sutil y solo en centro */
  .testi-block .t2-card::before {
    width: 26px !important;
    height: 3px !important;
    top: 16px !important;
    left: 16px !important;
    opacity: 0 !important;
    background: linear-gradient(90deg, rgba(245, 197, 66, .55), rgba(245, 197, 66, 0)) !important;
  }

  .testi-block .t2-card.is-center::before {
    opacity: .45 !important;
  }

  /* Flechas: estabilidad total (sin salto al hover) */
  .testi-block .t2-prev,
  .testi-block .t2-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
  }

  .testi-block .t2-nav {
    will-change: opacity, color;
    transform: translateY(-50%) !important;
    background: rgba(255, 209, 26, .06) !important;
    border-color: rgba(255, 209, 26, .24) !important;
    color: rgba(255, 209, 26, .82) !important;
  }

  .testi-block .t2-nav:hover {
    transform: translateY(-50%) !important;
    background: rgba(255, 209, 26, .09) !important;
    border-color: rgba(255, 209, 26, .34) !important;
    color: rgba(255, 209, 26, .92) !important;
  }

  /* Hover en tarjetas: micro-lift aún más sutil */
  @media (hover:hover) {
    .testi-block .t2-card:hover {
      transform: translateY(-1px) scale(1) !important;
    }
  }
}


/* ==== extracted from inline styles ==== */


/* =========================================================
   v9 (PC only): oscurecer el fondo de testimonios
   - Menos “amarillo” en el degradado ambiental
   - Mantener acento dorado solo donde toca (centro/autor)
   ========================================================= */
@media (min-width:768px) {

  /* Fondo de sección: más oscuro y neutro */
  section[aria-labelledby="testi-title"]::before {
    background:
      radial-gradient(640px 320px at 18% 18%, rgba(139, 92, 246, .16), transparent 62%),
      radial-gradient(560px 320px at 85% 35%, rgba(245, 197, 66, .045), transparent 64%),
      radial-gradient(520px 300px at 45% 95%, rgba(255, 255, 255, .045), transparent 68%) !important;
    opacity: .85 !important;
    filter: saturate(.92) brightness(.92) !important;
  }

  /* Glow del bloque: bajamos oro y subimos profundidad */
  .testi-block::before {
    background:
      radial-gradient(760px 280px at 50% 35%, rgba(139, 92, 246, .15), rgba(0, 0, 0, 0) 72%),
      radial-gradient(560px 240px at 15% 55%, rgba(245, 197, 66, .030), rgba(0, 0, 0, 0) 74%) !important;
    opacity: .78 !important;
  }

  /* Flechas: quita tinte amarillo de fondo (deja el dorado para hover) */
  .testi-block .t2-nav {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: rgba(255, 255, 255, .32) !important;
  }

  .testi-block .t2-nav:hover {
    background: rgba(255, 255, 255, .04) !important;
    border-color: rgba(255, 209, 26, .28) !important;
    color: rgba(255, 209, 26, .88) !important;
  }
}


/* ==== extracted from inline styles ==== */


/* =========================================================
   v11 (PC only): Testimonios simétricos, 3 cards completas, más elegantes
   - Sin degradados “amarillos”
   - 3 tarjetas exactas en el ancho disponible
   - Texto centrado (vertical + horizontal)
   ========================================================= */
@media (min-width: 1024px) {

  /* Quita el “ambiente” extra: que sea más limpio y consistente con el resto */
  section[aria-labelledby="testi-title"]::before {
    display: none !important;
  }

  .testi-block::before {
    display: none !important;
  }

  /* Viewport: usa TODO el ancho del contenedor y sin máscaras */
  .testi-block .t2-viewport {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    /* dejamos scroll programático */
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .testi-block .t2-viewport::-webkit-scrollbar {
    display: none;
  }

  /* Track: gap más compacto para encajar 3 justas */
  .testi-block .t2-track {
    --t2-gap: 16px;
    gap: var(--t2-gap) !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* Cards: mismas proporciones, sin recortes, más lujo */
  .testi-block .t2-card {
    flex: 0 0 var(--t2-card-w, 360px) !important;
    width: var(--t2-card-w, 360px) !important;
    max-width: none !important;

    border-radius: 24px !important;
    padding: 30px 28px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* centra vertical */
    align-items: center !important;
    /* centra horizontal */
    text-align: center !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .020)) !important;
    border: 1px solid rgba(255, 255, 255, .090) !important;
    box-shadow: 0 30px 95px rgba(0, 0, 0, .60) !important;

    opacity: .90 !important;
    transform: translateZ(0) scale(1) !important;
    filter: saturate(1) !important;
  }

  /* Elimina la barrita dorada: deja el dorado en el autor (más fino) */
  .testi-block .t2-card::before {
    display: none !important;
  }

  .testi-block .t2-card p {
    margin: 0 !important;
    max-width: 46ch;
    font-size: 16px !important;
    line-height: 1.72 !important;
    color: rgba(245, 245, 255, .93) !important;
    font-style: italic;
  }

  .testi-block .t2-card .author {
    margin-top: 14px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    color: rgba(255, 209, 26, .88) !important;
  }

  .testi-block .t2-card .author::before {
    content: "—";
    color: rgba(255, 255, 255, .22);
    font-weight: 700;
    margin-right: 10px;
  }

  /* Foco: sutil, sin apagar el resto */
  .testi-block .t2-card.is-near {
    opacity: .95 !important;
    border-color: rgba(255, 255, 255, .10) !important;
  }

  .testi-block .t2-card.is-center {
    opacity: 1 !important;
    border-color: rgba(139, 92, 246, .30) !important;
    box-shadow:
      0 38px 130px rgba(0, 0, 0, .66),
      0 0 0 1px rgba(139, 92, 246, .14) inset !important;
  }

  /* Flechas: simétricas y sin “bote” */
  .testi-block {
    overflow: visible !important;
  }

  .testi-block .t2-prev,
  .testi-block .t2-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .testi-block .t2-nav {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: rgba(12, 12, 16, .64) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .46) !important;
    color: rgba(255, 255, 255, .44) !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
  }

  .testi-block .t2-nav:hover {
    transform: translateY(-50%) scale(1.02) !important;
    background: rgba(16, 16, 22, .78) !important;
    border-color: rgba(255, 209, 26, .24) !important;
    color: rgba(255, 209, 26, .90) !important;
  }

  .testi-block .t2-prev {
    left: -22px !important;
  }

  .testi-block .t2-next {
    right: -22px !important;
  }
}


/* ==== extracted from inline styles ==== */


/* PC ONLY: igualar comentarios + barra lateral (scrollbar) al index antiguo */
@media (min-width: 981px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #fbbf24 #0b0d12;
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0b0d12;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    border-radius: 10px;
    border: 2px solid #0b0d12;
  }

  /* Ajuste de layout para que las flechas respiren como en el index antiguo */
  .testi-block {
    position: relative;
    margin: 0 -30px;
  }

  /* --- 3. TESTIMONIOS SLIDER (Auto-Playing) --- */
  .premium-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0 60px;
    /* Add space for shadows */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

  .premium-slider-track {
    display: flex;
    gap: 24px;
    width: max-content;
    /* Animation handled by JS for infinite loop control or simple CSS marquee if preferred. 
       Let's use CSS Marquee as base, or JS for page-by-page. 
       User asked for "change alone every 3 seconds". That implies pagination or sliding. 
       Let's do a smooth JS transition layout. */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .ps-card {
    width: 380px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    user-select: none;
  }

  .ps-quote {
    font-size: 1.05rem;
    color: #e2e8f0;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 20px;
  }

  .ps-author {
    font-weight: 800;
    color: var(--accent);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ps-author::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
  }

  /* Toggle Button (Premium v5 - Sophisticated) */
  .toggle-btn-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    padding: 8px 20px;
    /* Even more compact */
    border-radius: 50px;
    font-weight: 500;
    /* Lighter weight for sophistication */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    font-size: 0.72rem;
    /* Even smaller */
    letter-spacing: 0.2em;
    /* More spacing */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .toggle-btn-premium:hover {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.15);
  }

  .toggle-btn-premium span:last-child {
    transition: transform 0.4s ease;
    display: flex;
    align-items: center;
  }

  .toggle-btn-premium.active span:last-child {
    transform: rotate(180deg);
  }

  /* --- GLOBAL PREMIUM ENHANCEMENTS (v6) --- */

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0b0d12;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    border-radius: 10px;
    border: 2px solid #0b0d12;
  }

  /* Fixed Glass Navigation */
  header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000 !important;
    background: rgba(14, 17, 23, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease;
  }

  /* Reveal Animation Utility */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* Testimonial Arrows (Minimal-Luxe v7) */
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    z-index: 100;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    padding: 20px;
  }

  .slider-arrow svg {
    width: 48px;
    /* Longer legacy look */
    height: 48px;
    stroke-width: 0.8;
    /* Ultra-thin */
  }

  .slider-arrow:hover {
    color: #fbbf24;
    transform: translateY(-50%) scale(1.1);
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
  }

  .slider-arrow.prev {
    left: -40px;
  }

  .slider-arrow.next {
    right: -40px;
  }

  /* Asegura el modo PC del bloque de testimonios */
  .testi-block .pcOnly {
    display: block !important;
  }

  .testi-block .mobOnly {
    display: none !important;
  }
}

@media (max-width: 980.98px) {
  .testi-block .pcOnly {
    display: none !important;
  }

  .testi-block .mobOnly {
    display: block !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (max-width:820px) {

  /* 1) Contraste del titular del hero: blanco y legible sobre la foto */
  .hero .hero-poster h1 {
    color: rgba(255, 255, 255, .94) !important;
    text-shadow: 0 18px 60px rgba(0, 0, 0, .62) !important;
  }

  .hero .hero-poster h1::before {
    background: linear-gradient(180deg, rgba(6, 8, 12, .55), rgba(6, 8, 12, .18)) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }

  /* 2) Radio coherente y simétrico (menos plantilla, más premium) */
  :root {
    --m-radius: 24px;
    --m-radius-sm: 18px;
  }

  .hero .hero-sheet,
  #dolor .container,
  #programa .container,
  #quien .container,
  #faq .container,
  section[aria-labelledby=testi-title] .container {
    border-radius: var(--m-radius) !important;
  }

  .feature {
    border-radius: var(--m-radius) !important;
  }

  .hero .hero-sheet .stat {
    border-radius: var(--m-radius-sm) !important;
  }

  .t2-card {
    border-radius: var(--m-radius) !important;
  }

  .faq details {
    border-radius: var(--m-radius-sm) !important;
  }

  #programa .toggle-link {
    border-radius: var(--m-radius-sm) !important;
  }

  /* 3) Menos circo tipográfico en botones (sigue siendo premium, pero legible) */
  .btn,
  .m-cta-bar a {
    letter-spacing: .02em !important;
  }

  /* 4) Safe-area: header y menú en móviles con notch */
  header {
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    right: calc(10px + env(safe-area-inset-right)) !important;
  }

  #primaryNav {
    top: calc(10px + env(safe-area-inset-top) + var(--hdr) + 10px) !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    right: calc(10px + env(safe-area-inset-right)) !important;
  }

  /* 5) Testimonios: quitar comillas decorativas */
  .t2-card p::before {
    content: none !important;
    display: none !important;
  }
}


/* ==== extracted from inline styles ==== */


/* =========================================================
   HERO (MÓVIL) – Rediseño premium: integrar SEO sin “tocho”
   - Oculta badges/stats del hero (redundantes)
   - Mueve el resumen SEO al hero (compacto)
   - Oculta el bloque SEO externo en móvil para evitar repetición
   ========================================================= */
@media (max-width:820px) {

  /* Limpieza del hero: menos ruido */
  .hero .hero-sheet .byline,
  .hero .hero-sheet .badges,
  .hero .hero-sheet .stats {
    display: none !important;
  }

  /* Evitar duplicación: el bloque SEO debajo del hero no se muestra en móvil */
  /* Bloque SEO compacto dentro del hero */
  .hero .hero-seo-block {
    margin-top: 14px;
    padding-top: 12px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .hero .hero-seo-kicker {
    margin: 0 0 6px 0;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 13px;
    color: rgba(255, 255, 255, .88);
  }

  .hero .hero-seo-title {
    margin: 0 0 10px 0;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1.08;
    color: rgba(255, 255, 255, .92);
  }

  .hero .hero-seo-micro {
    margin: 0 0 10px 0;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, .78);
  }

  .hero .hero-seo-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .hero .hero-seo-chip {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
  }
}


/* ==== extracted from inline styles ==== */


@media (max-width: 820px) {

  /* Suaviza el corte entre el final del hero y el inicio del bloque de dolor */
  section.hero {
    position: relative;
  }

  section.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, .55) 55%,
        rgba(14, 17, 23, 1) 100%);
    z-index: 3;
  }

  /* Da aire antes del título de dolor sin mover PC */
  #dolor .mobOnly {
    padding-top: 18px;
  }

  #dolor .mobOnly .m-mobile-head {
    margin-top: 10px;
  }

  /* Evita sensación de pegote si algún bloque anterior trae márgenes negativos */
  #dolor {
    margin-top: 0 !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* ===== Coverflow card content: match the "recuadro pegado arriba" look ===== */
  .pcv8 #programa .progCoverflow .cfBody {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 18px 22px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  .pcv8 #programa .progCoverflow .cfPanel {
    width: min(860px, 86vw) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 22px 18px !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .70), rgba(0, 0, 0, .42)) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .60) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  }

  /* Limpieza: anula pseudo-capas heredadas de overrides antiguos */
  .pcv8 #programa .progCoverflow .cfPanel::before,
  .pcv8 #programa .progCoverflow .cfPanel::after {
    content: none !important;
    display: none !important;
  }

  .pcv8 #programa .progCoverflow .cfMeta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
  }

  .pcv8 #programa .progCoverflow .cfNum {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .40) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 13px !important;
    letter-spacing: .18em !important;
    font-weight: 900 !important;
    text-shadow: 0 10px 26px rgba(0, 0, 0, .75) !important;
  }

  .pcv8 #programa .progCoverflow .cfTag {
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .34) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
  }

  .pcv8 #programa .progCoverflow .cfTitle {
    font-size: 48px !important;
    line-height: 1.05 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
    color: #ffffff;
    text-shadow: 0 12px 40px rgba(0, 0, 0, .78) !important;
  }

  .pcv8 #programa .progCoverflow .cfText {
    margin: 0 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 16.5px !important;
    line-height: 1.58 !important;
    max-width: 58ch !important;
    text-shadow: 0 12px 34px rgba(0, 0, 0, .78) !important;
  }

  /* Chips: keep them right under the panel like the reference */
  .pcv8 #programa .progCoverflow .cfChips {
    margin-top: 6px !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* ===== Toggle "Ver el plan por dentro" like ref (pill + circle chevron) ===== */
  .pcv8 #programa .toggle-link {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid rgba(245, 197, 66, .55) !important;
    color: rgba(245, 197, 66, .98) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .60), 0 0 0 6px rgba(245, 197, 66, .10) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .pcv8 #programa .toggle-link:hover {
    background: rgba(0, 0, 0, .34) !important;
    box-shadow: 0 16px 52px rgba(0, 0, 0, .65), 0 0 0 7px rgba(245, 197, 66, .14) !important;
  }

  .pcv8 #programa .toggle-link__label {
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  .pcv8 #programa .toggle-link__icon {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(245, 197, 66, .55) !important;
    background: rgba(0, 0, 0, .28) !important;
    line-height: 1 !important;
    transform-origin: 50% 50% !important;

    font-size: 16px !important;
  }
}


/* AJUSTES 20 (PC only): QUIÉN = foto iguala altura del texto (sin altura intrínseca) + SEO intro refinado */
@media (min-width: 1024px) {

  /* --- QUIÉN ES NOEMÍ --- */
  .pcv8 #quien .grid2 {
    display: flex !important;
    align-items: stretch !important;
    gap: 22px !important;
  }

  /* La columna de foto NO debe imponer altura: fuera height: var(--panelH) */
  .pcv8 #quien .panel {
    flex: 0 0 48% !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  /* La imagen se saca del flujo para que no cree altura intrínseca */
  .pcv8 #quien .panel img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* El stack deja de tener height fija */
  .pcv8 #quien .stack {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* --- SUBHERO SEO INTRO (más elegante) --- */
  .seo-intro {
    padding: 48px 0 58px !important;
  }

  .seo-intro .container {
    max-width: 980px !important;
  }

  .seo-intro h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, .90) !important;
    text-shadow: none !important;
    margin: 0 auto 12px !important;
  }

  .seo-intro h2 .accent {
    color: rgba(139, 92, 246, .95) !important;
  }

  .seo-intro .rule {
    width: 52px !important;
    height: 2px !important;
    margin: 10px auto 16px !important;
    opacity: .9 !important;
  }

  .seo-intro p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .66) !important;
    max-width: 860px !important;
  }

  .seo-intro .sig {
    font-size: 13.5px !important;
    letter-spacing: .12px !important;
    color: rgba(255, 255, 255, .52) !important;
  }
}



/* ==== extracted from inline styles ==== */


/* PC polish: SEO subhero sin caja + testimonios sin comillas raras */
@media (min-width: 721px) {

  /* SEO title top: baja brillo del blanco (solo PC) */
  .seo-title-top {
    color: rgba(255, 255, 255, .78) !important;
  }

  /* SEO subhero: limpio, sin rectángulo, y pegado al hero sin comerse la primera vista */
  .seo-intro {
    padding: 28px 0 26px !important;
    background: transparent !important;
  }

  .seo-intro .container {
    max-width: 1040px;
  }

  .seo-intro .seo-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  .seo-intro h2 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 750;
    color: rgba(255, 255, 255, .92);
  }

  .seo-intro h2 .accent {
    color: rgba(139, 92, 246, .95);
  }

  .seo-intro .rule {
    width: 52px;
    height: 2px;
    margin: 10px auto 14px;
    opacity: .85;
  }

  .seo-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0 6px;
  }

  .seo-chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .02);
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
  }

  .seo-intro p {
    margin: 10px auto 0;
    max-width: 860px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .70);
  }

  .seo-intro .sig {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .52);
  }
}

/* Quitar comillas raras de testimonios */
.t2-card p::before,
.t2-card p::after {
  content: "" !important;
  display: none !important;
}


/* v42: SEO intro móvil con "Ver más" (sin ocultar contenido, sin romper PC) */
.seo-intro .seo-toggle {
  display: none;
}

@media (max-width: 820px) {

  /* seo-intro es solo desktop (pcOnly) */
  .seo-intro .seo-card {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .seo-intro .seo-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
  }

  .seo-intro .seo-chip {
    font-size: 12px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
  }

  .seo-intro .seo-toggle {
    display: block;
    margin: 10px auto 0;
    width: fit-content;
  }

  .seo-intro .seo-toggle summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    letter-spacing: .2px;
  }

  .seo-intro .seo-toggle summary::-webkit-details-marker {
    display: none;
  }

  .seo-intro .seo-toggle .less {
    display: none;
  }

  .seo-intro .seo-toggle[open] .more {
    display: none;
  }

  .seo-intro .seo-toggle[open] .less {
    display: inline;
  }

  .seo-intro .seo-text {
    font-size: 16px !important;
    line-height: 1.55 !important;
    padding: 0 18px !important;
    margin: 10px auto 0 !important;
    max-width: 560px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .seo-intro .seo-toggle[open]+.seo-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

.seo-intro .seo-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.seo-intro .seo-copy {
  font-size: 16px !important;
  line-height: 1.55 !important;
  padding: 0 18px !important;
  margin: 10px auto 0 !important;
  max-width: 560px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* =========================
     FAQ: flecha sutil amarilla + glow al hover/open
     ========================= */
  .faq summary {
    position: relative;
    padding-right: 58px;
    transition: color .18s ease, text-shadow .18s ease;
  }

  .faq summary::after {
    content: "▾";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: rgba(245, 197, 66, .85);
    border: 1px solid rgba(245, 197, 66, .25);
    background: rgba(0, 0, 0, .18);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, filter .22s ease;
  }

  .faq details:hover summary::after {
    color: rgba(245, 197, 66, .98);
    border-color: rgba(245, 197, 66, .45);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .58), 0 0 0 6px rgba(245, 197, 66, .10);
    filter: drop-shadow(0 0 10px rgba(245, 197, 66, .18));
  }

  .faq details[open] summary {
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 12px 34px rgba(0, 0, 0, .62);
  }

  .faq details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
    color: rgba(245, 197, 66, 1);
    border-color: rgba(245, 197, 66, .55);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .62), 0 0 0 7px rgba(245, 197, 66, .14);
  }

  /* =========================
     Programas bridge: menos protagonismo (no compite con CTA)
     ========================= */
  .programas-bridge {
    padding: 0 0 22px !important;
  }

  .programas-bridge__card {
    border-color: rgba(139, 92, 246, .16) !important;
    background:
      radial-gradient(620px 200px at 6% 18%, rgba(139, 92, 246, .14), transparent 62%),
      linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .025)) !important;
  }

  .programas-bridge__grid {
    padding: 16px 18px !important;
    gap: 14px !important;
  }

  .programas-bridge__left-inner {
    width: min(58ch, 100%) !important;
  }

  .programas-bridge__kicker {
    font-size: .96rem !important;
    margin: 0 0 6px !important;
    letter-spacing: .25px !important;
  }

  .programas-bridge__text {
    margin: 0 0 8px !important;
  }

  .programas-bridge__list {
    gap: .34rem !important;
  }

  .programas-bridge__list li {
    line-height: 1.22 !important;
  }

  .programas-bridge__note {
    line-height: 1.18 !important;
    font-size: .88rem !important;
    opacity: .88 !important;
  }

  /* =========================
     "Ver el plan por dentro" (programaExtra): hacerlo más espectacular
     ========================= */
  #programaExtra {
    border-radius: 28px;
    overflow: hidden;
  }

  #programaExtra.is-open {
    /* micro brillo cuando abre */
    box-shadow: 0 26px 80px rgba(0, 0, 0, .55);
  }

  #programaExtra .feature {
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .34)) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .50) !important;
    position: relative;
    overflow: hidden;
    transform: translateY(6px);
    opacity: 0;
    clip-path: inset(0 0 20% 0 round 26px);
    transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .35s ease, clip-path .55s cubic-bezier(.2, .9, .2, 1);
  }

  #programaExtra.is-open .feature {
    transform: translateY(0);
    opacity: 1;
    clip-path: inset(0 0 0 0 round 26px);
  }

  /* “sweep” premium: un brillo que pasa una vez al abrir */
  #programaExtra .feature::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(110deg, transparent 0%, rgba(245, 197, 66, .10) 38%, rgba(139, 92, 246, .10) 52%, transparent 72%);
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
  }

  #programaExtra.is-open .feature::before {
    animation: progSweep 900ms ease forwards;
    opacity: 1;
  }

  @keyframes progSweep {
    0% {
      transform: translateX(-120%);
      opacity: 0;
    }

    15% {
      opacity: .9;
    }

    100% {
      transform: translateX(120%);
      opacity: 0;
    }
  }

  /* Titulares con línea-acento */
  #programaExtra .feature h3 {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #programaExtra .feature h3::after {
    content: "";
    height: 2px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, rgba(245, 197, 66, .85), rgba(139, 92, 246, .55), transparent);
    opacity: .75;
    border-radius: 999px;
  }

  /* Listas: stagger reveal */
  #programaExtra ol li,
  #programaExtra ul li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .38s cubic-bezier(.2, .9, .2, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
  }

  #programaExtra.is-open ol li,
  #programaExtra.is-open ul li {
    opacity: 1;
    transform: translateY(0);
  }

  /* Respeta reduce motion */
  @media (prefers-reduced-motion: reduce) {

    #programaExtra .feature,
    #programaExtra ol li,
    #programaExtra ul li {
      transition: none !important;
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }

    #programaExtra .feature::before {
      display: none !important;
    }
  }

  /* ============================
     10) CTA CONTACTO más ancho (solo PC)
     ============================ */
  #contacto.cta-band {
    width: min(1480px, 96%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ============================
     11) Modal espectacular: "Ver el plan por dentro" (solo PC)
     ============================ */
  body.modal-open {
    overflow: hidden;
  }

  #planOverlayBackdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background:
      radial-gradient(900px 520px at 30% 20%, rgba(139, 92, 246, .22), transparent 60%),
      radial-gradient(900px 520px at 70% 40%, rgba(245, 197, 66, .14), transparent 62%),
      rgba(0, 0, 0, .62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  body.modal-open #planOverlayBackdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel modal usando el propio #programaExtra */
  #programaExtra.is-modal {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.98) !important;
    width: min(1120px, 92vw) !important;
    max-height: min(78vh, 760px) !important;
    overflow: auto !important;
    z-index: 10001 !important;

    padding: 28px 28px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(139, 92, 246, .34) !important;
    background:
      radial-gradient(900px 420px at 20% 0%, rgba(139, 92, 246, .22), transparent 62%),
      radial-gradient(900px 420px at 90% 30%, rgba(245, 197, 66, .12), transparent 60%),
      rgba(10, 10, 14, .92) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .65) !important;
  }

  #programaExtra.is-modal {
    animation: planModalIn .22s ease both;
  }

  @keyframes planModalIn {
    from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(.96);
    }

    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(.98);
    }
  }

  /* Cierre real (botón) */
  #programaExtra.is-modal::after {
    content: none !important;
  }

  #programaExtra.is-modal .planModalClose {
    grid-column: 1 / -1;
    justify-self: end;
    position: sticky;
    top: 0;
    width: 44px;
    height: 44px;
    margin: -6px -6px 6px 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  #programaExtra.is-modal .planModalClose:hover {
    transform: translateY(-1px) scale(1.02);
    background: rgba(245, 197, 66, .12);
    border-color: rgba(245, 197, 66, .35);
  }

  #programaExtra.is-modal::-webkit-scrollbar {
    width: 10px;
  }

  #programaExtra.is-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .35);
  }

  /* Asegura que la grid se vea premium dentro del modal */
  #programaExtra.is-modal.grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  #programaExtra.is-modal .feature {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 22px !important;
    padding: 18px 18px !important;

    /* Entrada más espectacular: cards con stagger */
    #programaExtra.is-modal.modal-enter .feature {
      opacity: 0;
      transform: translateY(10px) scale(.99);
      animation: featIn .42s cubic-bezier(.2, .9, .2, 1) forwards;
      animation-delay: calc(var(--i, 0) * 55ms);
    }

    @keyframes featIn {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #programaExtra.is-modal {
      animation: none !important;
    }

    #planOverlayBackdrop {
      transition: none !important;
    }
  }

}

/* =========================================================
   PC ONLY: Ajuste "Para empezar a tu ritmo" + Contacto más ancho
   - Objetivo: que "Contacto" sea el protagonista
   - Programas guiados: secundario, más fino y ordenado
   ========================================================= */
@media (min-width: 1024px) {

  /* Contacto: más ancho (sin tocar móvil) */
  .cta-band {
    max-width: 1280px !important;
    width: min(1280px, calc(100% - 64px)) !important;
  }

  /* Programas bridge: layout y jerarquía */
  .programas-bridge .container {
    max-width: 1040px !important;
  }

  .programas-bridge__card {
    background: radial-gradient(1000px 360px at 18% 0%, rgba(139, 92, 246, .18), rgba(0, 0, 0, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
    border: 1px solid rgba(139, 92, 246, .22);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
  }

  .programas-bridge__kicker {
    margin: 0 0 8px 0 !important;
  }

  .programas-bridge__headline {
    margin: 0 0 12px 0;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  }

  .programas-bridge__text {
    display: none !important;
  }

  /* fuera el pretexto */
  .programas-bridge__list li:nth-child(n+3) {
    display: none;
  }

  /* solo 2 bullets en PC */
  .programas-bridge__btn {
    opacity: .92;
    border-color: rgba(245, 158, 11, .42) !important;
    background: rgba(0, 0, 0, .22) !important;
  }

  .programas-bridge__note {
    opacity: .72;
  }
}


/* ==== extracted from inline styles ==== */


/* Este bloque va al final para ganar a cualquier override previo (solo PC). */
@media (min-width: 1024px) {

  #dolor .pcv8 .panelCaption small,
  #dolor .pcv8 .panelCaption .panelTag {
    display: none !important;
  }

  #programa .pcv8 .pp-tag {
    color: rgba(255, 255, 255, .96) !important;
    background: rgba(10, 12, 18, .62) !important;
    border-color: rgba(255, 209, 26, .44) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .60) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  #quien .pcv8 .panelCaption .panelTag {
    display: none !important;
  }

  #faq .faq details summary::after {
    display: block !important;
    opacity: .85 !important;
    border-right-color: rgba(245, 199, 55, 0.98) !important;
    border-bottom-color: rgba(245, 199, 55, 0.98) !important;
  }

  .programas-bridge {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .programas-bridge::before,
  .programas-bridge::after {
    content: none !important;
  }

  .programas-bridge__kicker {
    background: transparent !important;
    width: auto !important;
    padding: 0 !important;
  }

  .programas-bridge__kicker::before,
  .programas-bridge__kicker::after {
    content: none !important;
  }

  #contacto .cta-row a.btn:not(.alt) {
    border: 1px solid rgba(255, 209, 26, .95) !important;
    background: #fff !important;
    color: #111 !important;
  }
}

/* Modal “plan por dentro” (PC): override de animaciones anteriores */
#programaExtra.is-modal.modal-enter {
  animation: planPop .32s cubic-bezier(.2, .9, .2, 1) both !important;
}

#programaExtra.is-modal.modal-leave {
  animation: planOut .22s ease both !important;
}

/* =========================================================
   PC: Modal premium para “Ver el plan por dentro” (sin tocar móvil)
   ========================================================= */
@media (min-width: 1024px) {
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .insideModalBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 10040;
  }

  body.insideModalOpen .insideModalBackdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.insideModalOpen {
    overflow: hidden;
  }

  /* El contenido existente se convierte en modal solo cuando abrimos */
  #insidePc.is-modal {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    margin-top: 0 !important;
    width: min(1120px, calc(100vw - 96px));
    max-height: calc(100vh - 150px);
    overflow: auto;
    overscroll-behavior: contain;

    display: block !important;
    border-radius: 22px;
    padding: 26px 22px 18px;

    background: rgba(12, 14, 20, .88);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
      0 28px 80px rgba(0, 0, 0, .70),
      0 0 0 1px rgba(245, 197, 66, .10);

    transition: opacity .30s ease, transform .34s cubic-bezier(.2, .9, .2, 1);
    z-index: 10050;
  }

  body.insideModalOpen #insidePc.is-modal {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  #insidePc.is-modal .insideModalClose {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(245, 197, 66, .35);
    background: rgba(0, 0, 0, .28);
    color: rgba(255, 255, 255, .92);
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }

  #insidePc.is-modal .insideModalClose:hover {
    background: rgba(0, 0, 0, .42);
    box-shadow:
      0 14px 40px rgba(0, 0, 0, .45),
      0 0 18px rgba(245, 197, 66, .12);
  }

  /* Entrada con micro “wow” sin circo */
  body.insideModalOpen #insidePc.is-modal .inside-panel {
    animation: insideRise .42s cubic-bezier(.2, .85, .2, 1) both;
  }

  body.insideModalOpen #insidePc.is-modal .inside-panel:nth-child(2) {
    animation-delay: .06s;
  }

  @keyframes insideRise {
    from {
      transform: translateY(10px);
      opacity: .0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .insideModalBackdrop,
    #insidePc.is-modal {
      transition: none !important;
    }

    body.insideModalOpen #insidePc.is-modal .inside-panel {
      animation: none !important;
    }
  }
}



/* ============================== 
   High-ticket polish (solo PC)
   ============================== */

/* CTA superior: texto distinto en desktop sin tocar móvil */
.cta-top .cta-desktop-label {
  display: none;
}

.cta-top .cta-mobile-label {
  display: inline;
}

@media (min-width: 860px) {
  .cta-top {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cta-top .cta-desktop-label {
    display: inline;
  }

  .cta-top .cta-mobile-label {
    display: none;
  }
}

@media (min-width: 860px) {

  /* SEO bloque (PC): beneficio manda */
  .seo-title .seo-kicker {
    letter-spacing: .18em;
    opacity: .92;
  }

  .seo-title .seo-claim {
    color: rgba(255, 255, 255, .86);
    text-shadow: none;
  }
}

@media (min-width: 860px) {

  /* Pills dentro de tarjetas: más legible, menos "botón de app" */
  #programa .cfPills .pill {
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
  }

  #programa .cfPills .pill:hover {
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    transform: translateY(-1px);
  }
}

@media (min-width: 860px) {

  /* Modal "Plan por dentro": entrada premium + header + scrollbar discreto */
  .insideBackdrop {
    position: fixed;
    inset: 0;
    z-index: 10040;
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    transition: opacity .28s ease, background .28s ease;
  }

  body.insideModalOpen .insideBackdrop {
    opacity: 1;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(8px) saturate(1.08);
    -webkit-backdrop-filter: blur(8px) saturate(1.08);
  }

  #insidePc.is-modal {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px) scale(.985);
    transition: opacity .28s ease, transform .28s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
  }

  body.insideModalOpen #insidePc.is-modal {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }

  /* Scrollbar solo dentro del modal (evita el amarillo global) */
  #insidePc.is-modal::-webkit-scrollbar {
    width: 10px;
  }

  #insidePc.is-modal::-webkit-scrollbar-track {
    background: transparent;
  }

  #insidePc.is-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    border: 3px solid rgba(0, 0, 0, 0);
    background-clip: content-box;
  }

  #insidePc.is-modal:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .26);
  }

  /* Sugerencia de scroll sin gritarlo */
  #insidePc.is-modal::before,
  #insidePc.is-modal::after {
    content: "";
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, calc(100vw - 72px));
    height: 54px;
    pointer-events: none;
    z-index: 10041;
  }

  #insidePc.is-modal::before {
    top: 56px;
    background: linear-gradient(to bottom, rgba(12, 12, 16, .92), rgba(12, 12, 16, 0));
    border-radius: 26px 26px 0 0;
  }

  #insidePc.is-modal::after {
    bottom: 56px;
    background: linear-gradient(to top, rgba(12, 12, 16, .92), rgba(12, 12, 16, 0));
    border-radius: 0 0 26px 26px;
  }

  #insidePc.is-modal>* {
    position: relative;
    z-index: 10042;
  }

  .insideModalHead {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 18px 66px 14px 24px;
    /* deja hueco para la X */
    margin: 0 0 10px 0;
    background: rgba(13, 14, 18, .74);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px 24px 18px 18px;
  }

  .insideModalHead .imh-title {
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 10px;
  }

  .insideModalHead .imh-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
  }

  .insideModalHead .imh-cols span {
    display: block;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
}

@media (min-width: 860px) {

  /* Testimonios: menos vacío, más densidad visual */
  section[aria-labelledby="testi-title"] {
    padding-top: 64px !important;
    padding-bottom: 70px !important;
  }

  .t2-viewport {
    padding: 8px 34px !important;
  }

  .t2-slots {
    gap: 22px !important;
  }
}

@media (min-width: 860px) {

  /* FAQ: chevron fino + interacción limpia (solo PC) */
  .faq details summary {
    position: relative;
    padding-right: 54px;
  }

  .faq details summary::after {
    content: "›";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 22px;
    color: rgba(255, 255, 255, .42);
    transition: transform .22s ease, color .22s ease;
  }

  .faq details:hover summary::after {
    color: rgba(255, 200, 60, .9);
  }

  .faq details[open] summary::after {
    transform: translateY(-50%) rotate(-90deg);
    color: rgba(255, 200, 60, .95);
  }
}

@media (min-width: 860px) {

  /* CTA final: un principal claro (entrevista) + WhatsApp discreto */
  #contacto .cta-actions {
    gap: 12px;
  }

  #contacto .btn.alt {
    opacity: .78;
    border-color: rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .04) !important;
  }

  #contacto .btn.alt:hover {
    opacity: .92;
    background: rgba(255, 255, 255, .06) !important;
  }
}


/* ==== extracted from inline styles ==== */


@media (min-width: 1024px) {

  /* Fondo: apaga el amarillo, deja solo un halo morado MUY suave */
  section[aria-labelledby="testi-title"] {
    background: transparent !important;
  }

  section[aria-labelledby="testi-title"]::before {
    background: radial-gradient(900px 380px at 52% 0%, rgba(139, 92, 246, .07), rgba(0, 0, 0, 0) 70%) !important;
    opacity: .07 !important;
    filter: saturate(.9) !important;
  }

  .testi-block::before {
    background: radial-gradient(760px 260px at 50% 18%, rgba(139, 92, 246, .07), rgba(0, 0, 0, 0) 72%) !important;
    opacity: .05 !important;
    filter: saturate(.9) !important;
  }

  /* 3 tarjetas completas siempre (PC) + carrusel “paso a paso” */
  .t2-viewport {
    padding: 10px 0 12px !important;
    width: min(1180px, calc(100vw - 160px)) !important;
    margin-inline: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .t2-track {
    gap: 16px !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .t2-card {
    flex: 0 0 var(--t2-card-w, 360px) !important;
    width: var(--t2-card-w, 360px) !important;
    max-width: none !important;
  }

  /* Que se vean (sin apagarse) pero manteniendo foco premium */
  .t2-card {
    opacity: .92 !important;
    transform: translateZ(0) scale(.99) !important;
  }

  .t2-card.is-near {
    opacity: .96 !important;
    transform: translateZ(0) scale(1.0) !important;
  }

  .t2-card.is-center {
    opacity: 1 !important;
    transform: translateZ(0) scale(1.01) !important;
  }

  .t2-card::before {
    opacity: .22 !important;
  }

  .t2-card.is-center::before {
    opacity: .30 !important;
  }

  /* Flechas: nada de “bailes” al hover */
  .t2-nav {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(12, 12, 16, .62) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .42) !important;
    transform: translateY(-50%) !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease !important;
  }

  .t2-nav:hover {
    background: rgba(16, 16, 22, .78) !important;
    border-color: rgba(255, 200, 60, .26) !important;
    transform: translateY(-50%) scale(1.03) !important;
  }

  .t2-prev {
    left: -8px !important;
  }

  .t2-next {
    right: -8px !important;
  }
}


/* ==== extracted from inline styles ==== */


/* v11 (PC only) override FINAL: simetría + 3 tarjetas completas + centrado */
@media (min-width: 1024px) {
  section[aria-labelledby="testi-title"]::before {
    display: none !important;
  }

  .testi-block::before {
    display: none !important;
  }

  .testi-block .t2-viewport {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .testi-block .t2-viewport::-webkit-scrollbar {
    display: none;
  }

  .testi-block .t2-track {
    --t2-gap: 16px;
    gap: var(--t2-gap) !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .testi-block .t2-card {
    flex: 0 0 var(--t2-card-w, 360px) !important;
    width: var(--t2-card-w, 360px) !important;

    border-radius: 24px !important;
    padding: 30px 28px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    background: linear-gradient(180deg, rgba(255, 255, 255, .060), rgba(255, 255, 255, .020)) !important;
    border: 1px solid rgba(255, 255, 255, .090) !important;
    box-shadow: 0 30px 95px rgba(0, 0, 0, .60) !important;

    opacity: .90 !important;
    transform: translateZ(0) scale(1) !important;
  }

  .testi-block .t2-card::before {
    display: none !important;
  }

  .testi-block .t2-card p {
    margin: 0 !important;
    max-width: 46ch;
    font-size: 16px !important;
    line-height: 1.72 !important;
    color: rgba(245, 245, 255, .93) !important;
    font-style: italic;
  }

  .testi-block .t2-card .author {
    margin-top: 14px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    color: rgba(255, 209, 26, .88) !important;
  }

  .testi-block .t2-card .author::before {
    content: "—";
    color: rgba(255, 255, 255, .22);
    font-weight: 700;
    margin-right: 10px;
  }

  .testi-block .t2-card.is-near {
    opacity: .95 !important;
  }

  .testi-block .t2-card.is-center {
    opacity: 1 !important;
    border-color: rgba(139, 92, 246, .30) !important;
    box-shadow:
      0 38px 130px rgba(0, 0, 0, .66),
      0 0 0 1px rgba(139, 92, 246, .14) inset !important;
  }

  .testi-block {
    overflow: visible !important;
  }

  .testi-block .t2-prev,
  .testi-block .t2-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .testi-block .t2-nav {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: rgba(12, 12, 16, .64) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .46) !important;
    color: rgba(255, 255, 255, .44) !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
  }

  .testi-block .t2-nav:hover {
    transform: translateY(-50%) scale(1.02) !important;
    background: rgba(16, 16, 22, .78) !important;
    border-color: rgba(255, 209, 26, .24) !important;
    color: rgba(255, 209, 26, .90) !important;
  }

  .testi-block .t2-prev {
    left: -22px !important;
  }

  .testi-block .t2-next {
    right: -22px !important;
  }
}

/* ====== v37: premium mobile polish (solo móvil) ====== */
@media (max-width:820px) {

  /* FAQ: adiós al +. Chevron fino y elegante (amarillo solo puntual, aquí morado/neutral). */
  #faq .faq summary {
    position: relative !important;
    padding-right: 54px !important;
  }

  #faq .faq summary::-webkit-details-marker {
    display: none !important;
  }

  #faq .faq summary::marker {
    content: "" !important;
  }

  #faq .faq details>summary::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 1.5px solid rgba(231, 233, 238, .62) !important;
    border-bottom: 1.5px solid rgba(231, 233, 238, .62) !important;
    transform: translateY(-60%) rotate(45deg) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: .95 !important;
    pointer-events: none !important;
  }

  #faq .faq details[open]>summary::after {
    transform: translateY(-35%) rotate(-135deg) !important;
    border-right-color: rgba(139, 92, 246, .95) !important;
    border-bottom-color: rgba(139, 92, 246, .95) !important;
  }

  /* CTA final: amarillo solo en el principal. WhatsApp más discreto (y sigue siendo clicable). */
  #contacto .cta-row .btn.alt {
    border-color: rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .92) !important;
    background: rgba(255, 255, 255, .02) !important;
  }

  #contacto .cta-row .btn.alt:hover {
    border-color: rgba(139, 92, 246, .40) !important;
    background: rgba(139, 92, 246, .08) !important;
  }

  #contacto .cta-row .btn {
    border-color: rgba(255, 209, 26, .88) !important;
  }

  /* Transición hero → #dolor: suaviza el “corte” restaurando overlay completo + fade largo inferior. */
  .hero {
    position: relative !important;
    overflow: hidden;
  }

  .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(980px 520px at 30% 12%, rgba(139, 92, 246, .14), transparent 62%),
      linear-gradient(180deg,
        rgba(0, 0, 0, .00) 0%,
        rgba(0, 0, 0, .06) 18%,
        rgba(14, 17, 23, .18) 42%,
        rgba(14, 17, 23, .46) 66%,
        rgba(14, 17, 23, .80) 84%,
        rgba(14, 17, 23, 1) 100%),
      linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, 0) 58%,
        rgba(14, 17, 23, .55) 78%,
        rgba(14, 17, 23, 1) 100%);
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* El panel curvo de #dolor: más gradual para que parezca intencional. */
  #dolor::before {
    background: linear-gradient(180deg,
        rgba(14, 17, 23, 0) 0%,
        rgba(14, 17, 23, .38) 35%,
        rgba(14, 17, 23, .86) 68%,
        rgba(14, 17, 23, 1) 100%) !important;
  }
}


/* ====== v38: títulos menos 'colorín' + testimonios más premium (solo móvil) ====== */
@media (max-width:820px) {

  /* Subrayado de títulos: solo morado, con fade elegante (sin amarillo). */
  main>section:not(.hero) h2::after {
    height: 3px !important;
    width: 56px !important;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0), rgba(139, 92, 246, .92), rgba(139, 92, 246, 0)) !important;
    opacity: .85 !important;
  }

  /* Testimonios: menos 'plantilla', más lujo discreto. */
  section[aria-labelledby="testi-title"] .container {
    padding-top: 20px !important;
  }

  .testi-block .t2-card {
    text-align: left !important;
    padding: 18px 18px 16px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 18px 56px rgba(0, 0, 0, .38) !important;
  }

  .testi-block .t2-card::before {
    content: "★★★★★";
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 209, 26, .70);
  }

  .testi-block .t2-card p {
    color: rgba(245, 246, 255, .92) !important;
    font-size: 1.02rem !important;
    line-height: 1.55 !important;
  }

  .testi-block .t2-card .author {
    margin-top: 12px !important;
    color: rgba(231, 233, 238, .72) !important;
    font-weight: 650 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-size: .78rem !important;
  }

  .testi-block .t2-card .author::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-right: 8px;
    background: rgba(139, 92, 246, .85);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
    transform: translateY(-1px);
  }
}


/* ====== v39: mobile ultra-premium polish (solo móvil) ====== */
@media (max-width:820px) {

  /* 1) Hero → Dolor: elimina la franja “rara” entre foto y bloque (más solape). */
  .hero {
    padding-bottom: 0 !important;
  }

  .hero .hero-sheet {
    margin-bottom: -66px !important;
  }

  #dolor {
    margin-top: -66px !important;
    padding-top: 92px !important;
    position: relative;
    z-index: 2;
  }

  #dolor::before {
    top: -66px !important;
    height: 132px !important;
  }

  /* 2) Testimonios: fuera la rayita que pisa texto. Card editorial, limpia y premium. */
  .testi-block .t2-card {
    position: relative !important;
    text-align: left !important;
    padding: 34px 20px 18px !important;
  }

  /* Mata el “★★★★★” o cualquier invento anterior y lo sustituye por una línea fina bien colocada */
  .testi-block .t2-card::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 20px !important;
    width: 46px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(139, 92, 246, .96), rgba(139, 92, 246, 0)) !important;
    opacity: .95 !important;
  }

  .testi-block .t2-card::after {
    content: "“" !important;
    position: absolute !important;
    right: 14px !important;
    bottom: -22px !important;
    font-size: 92px !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, .06) !important;
    font-family: var(--font-sans) !important;
    pointer-events: none !important;
  }

  .testi-block .t2-card p {
    margin: 0 !important;
  }

  .testi-block .t2-card .author {
    margin-top: 14px !important;
    color: rgba(231, 233, 238, .70) !important;
  }

  /* 3) “Ver el plan por dentro”: que no parezca un Word pegado. */
  #programaExtra {
    border-radius: 24px !important;
    overflow: hidden !important;
    animation: planReveal .32s ease both;
  }

  @keyframes planReveal {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #programaExtra .feature {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 18px 58px rgba(0, 0, 0, .42) !important;
  }

  #programaExtra strong {
    display: block;
    color: rgba(255, 255, 255, .92);
    letter-spacing: .01em;
    margin: 6px 0 10px;
  }

  #programaExtra p {
    color: rgba(231, 233, 238, .76) !important;
  }

  #programaExtra ol,
  #programaExtra ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
  }

  /* Pasos numerados (Dentro del programa) */
  #programaExtra ol {
    counter-reset: step;
  }

  #programaExtra ol li {
    counter-increment: step;
    display: flex;
    gap: 12px;
    padding: 12px 12px;
    margin: 10px 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
  }

  #programaExtra ol li::before {
    content: counter(step);
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(139, 92, 246, .18);
    border: 1px solid rgba(139, 92, 246, .35);
    color: rgba(255, 255, 255, .96);
    font-weight: 800;
    letter-spacing: .02em;
  }

  /* Bullets (Para quién es / Resultados) con punto morado fino */
  #programaExtra ul li {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
  }

  #programaExtra ul li::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    margin-top: 7px;
    background: rgba(139, 92, 246, .90);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .14);
  }

  /* Micro-ajuste para que los bloques largos respiren */
  #programaExtra .feature+.feature {
    margin-top: 14px !important;
  }
}


/* ========= FIX MÓVIL: desplegable "Ver el plan por dentro" (evitar aspecto tabla) ========= */
@media (max-width: 820px) {

  /* No queremos que los <strong> se vuelvan bloques (eso rompe el texto) */
  #programaExtra strong {
    display: inline !important;
    margin: 0 !important;
  }

  /* Bullets (Para quién es / Resultados): en móvil NO puede ser flex (si no, el texto se parte en "columnas") */
  #programaExtra ul li {
    display: block !important;
    position: relative !important;
    padding: 10px 12px 10px 28px !important;
    gap: 0 !important;
  }

  #programaExtra ul li::before {
    position: absolute !important;
    left: 12px !important;
    top: 16px !important;
    margin-top: 0 !important;
    flex: none !important;
  }

  /* Tarjetas de pasos: 1 columna, legibles */
  #programaExtra ol {
    counter-reset: step !important;
  }

  #programaExtra ol li {
    display: block !important;
    /* anula el flex "tabla" */
    position: relative !important;
    padding: 12px 14px 12px 48px !important;
    gap: 0 !important;
    counter-increment: none !important;
  }

  #programaExtra ol li::before {
    content: counter(step) !important;
    counter-increment: step !important;
    position: absolute !important;
    left: 14px !important;
    top: 12px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, .92) !important;
    background: rgba(139, 92, 246, .18) !important;
    border: 1px solid rgba(139, 92, 246, .45) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45) !important;
  }

  /* El primer strong (título del paso) sí va en bloque arriba */
  #programaExtra ol li>strong:first-child {
    display: block !important;
    margin: 0 0 6px 0 !important;
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
  }

  /* El resto de strong dentro del texto: inline, sin cortar líneas */
  #programaExtra ol li strong {
    display: inline !important;
    margin: 0 !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, .92) !important;
  }

  /* UL: mantener bullets y que strong no rompa */
  #programaExtra ul li strong {
    display: inline !important;
    margin: 0 !important;
  }
}


/* v62: más aire entre hero y sección dolor (solo móvil) */
@media (max-width: 820px) {
  #dolor {
    padding-top: 30px;
  }
}


/* =========================
   TYPOGRAPHY HARD OVERRIDES (legacy safety)
   ========================= */
html,
body {
  font-family: var(--font-sans) !important;
}

h1,
h2,
h3,
h4,
.heroTitle,
.hero-cine-title,
.secTitle,
.m-secTitle,
.pp-title,
.pt-num,
.cfTitle {
  font-family: var(--font-display) !important;
}


/* =========================================================
   TIPOGRAFÍA (LEGIBILIDAD) — Opción 1
   Mantén la display (Bebas) para titulares grandes,
   pero usa Manrope para títulos pequeños dentro de tarjetas/paneles.
   ========================================================= */
#dolor .feature h3,
#dolor .feature h4,
#dolor .feature .cfTitle,
#programa .cfTitle,
#programa .cfPanel .cfTitle,
#programa .progCoverflow .cfTitle,
#programa .m-coverflow .cfTitle,
#programa .feature h3,
#programa .feature h4 {
  font-family: var(--font-sans) !important;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Ajuste fino de tamaño en desktop para que no se vea “aplastado” */
@media (min-width: 1024px) {

  #dolor .feature h3,
  #programa .cfTitle {
    font-size: 18px;
  }
}

/* Ajuste fino en móvil */
@media (max-width: 820px) {

  #dolor .feature h3,
  #programa .cfTitle {
    font-size: 17px;
  }
}

/* === Mobile: igualar tipografía de tarjetas Dolor a Programa (solo móvil) === */
@media (max-width:820px) {
  #dolor .m-coverflow .cfTitle {
    font-family: var(--font-sans) !important;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: 17px;
    /* mismo ajuste móvil que programa */
  }
}


/* ====== v66e: títulos unificados en VISTA WEB (no tocar móvil) ====== */
@media (min-width: 721px) {

  /* Base común para todos los títulos de sección */
  .secTitle {
    font-size: 34px;
    line-height: 1.05;
    margin: 0 0 10px;
  }

  .secSub {
    margin: 0 0 26px;
    max-width: 840px;
    line-height: 1.45;
  }

  /* Pequeño aire cuando el título va en cabecera separada (container) */
  #programa .programa-head {
    margin-bottom: 12px;
  }

  #dolor .dolor-head {
    margin-bottom: 0;
  }

  /* la separación la da el .secSub */
}


/* === Oswald desktop micro-headings (v66f) === */
@media (min-width: 981px) {
  :root {
    --font-oswald: 'Oswald', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  }

  /* Pills/chips under hero + SEO block */
  .hero-seo-chip,
  .seo-chip {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .06em;
  }

  /* Dolor cards (títulos dentro de tarjetas) */
  #dolor .pcOnly .card>h3,
  .pcv8 #dolorStack .card>h3 {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .04em;
  }

  /* Programa: lista izquierda + título del panel derecho + tags */
  .pt-title,
  .pp-title,
  .pp-tag {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .05em;
  }

  /* Modal “Ver el plan por dentro” (kickers) */
  .inside-kicker {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .06em;
  }

  /* Quién es Noemí: títulos de tarjetas (PC) */
  #quien .pcOnly .card h3 {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .04em;
  }

  /* Testimonios: nombre */
  .ps-author {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .08em;
  }

  /* Programas bridge: titular + botón */
  .programas-bridge__headline,
  .programas-bridge__btn {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .03em;
  }

  /* CTA final: titular + botones */
  .cta-band h2,
  .cta-band .btn {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .02em;
  }

  /* Botón “Ver el plan por dentro” (PC) */
  .toggle-btn-premium {
    font-family: var(--font-oswald) !important;
    font-weight: 600;
    letter-spacing: .06em;
  }
}

/* === Oswald desktop: subhero + mayúsculas puntuales (v66g) === */
@media (min-width: 981px) {

  /* Subhero (kicker + seo title) en Oswald, sin tocar colores */
  .hero-seo-kicker,
  .seo-title-top,
  .seo-title-bottom {
    font-family: var(--font-oswald) !important;
    letter-spacing: .02em;
    /* aire para legibilidad */
  }

  /* Solo MAYÚSCULAS (sin tocar fuente/tamaño/colores) en los textos marcados */
  /* Dolor: títulos de tarjetas + caption */
  #dolor .card h3,
  #dolorCap,
  .cfTitle {
    text-transform: uppercase;
  }

  /* Quién soy: títulos de tarjetas */
  #quien h3,
  #quien .mini-h3 {
    text-transform: uppercase;
  }

  /* Bloque programas: titular y botón */
  .programas-bridge__headline,
  .programas-bridge__btn {
    text-transform: uppercase;
  }

  /* CTA final: titular */
  .cta-band h2 {
    text-transform: uppercase;
  }

  /* Footer: títulos columnas (marca sin mayúsculas) */
  footer strong {
    text-transform: uppercase;
  }
}

/* =========================================================
   v66h: PC-only font tweak (Display font like section titles)
   Targets ONLY: hero sub-SEO lines + "Para empezar a tu ritmo" tag + CTA title
   Keep sizes/colors intact. Uppercase only.
   ========================================================= */
@media (min-width: 981px) {

  /* Subhero (SEO title) */
  .seo-title,
  .seo-title-top,
  .seo-title-bottom {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
  }

  /* Programas bridge kicker tag */
  .programas-bridge__kicker .tag {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
  }

  /* CTA title */
  #cta-title {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
  }
}

/* =========================================================
   v66i: remove uppercase ONLY for brand wordmark (header/footer)
   and for the question heading in "Para empezar a tu ritmo".
   Desktop-only.
   ========================================================= */
@media (min-width: 981px) {

  header .wordmark,
  footer .wordmark {
    text-transform: none !important;
  }

  .programas-bridge__title,
  .programas-bridge__headline {
    text-transform: none !important;
  }
}

/* ====== v66j: ajustes SOLO móvil ====== */
@media (max-width: 820px) {

  /* 1) Un pelín más de aire antes de la sección Dolor */
  #dolor {
    padding-top: 128px !important;
  }

  /* 2) Quitar mayúsculas en el titular del bloque "Para empezar a tu ritmo" */
  .programas-bridge__headline {
    text-transform: none !important;
  }
}

/* AJUSTE FINAL — QUIÉN ES NOEMÍ (PC): igualar alto foto + columna texto
   Fix: el IMG está dentro de <picture>, no como hijo directo de .panel.
   SOLO escritorio. Móvil intacto. */
@media (min-width: 981px) {

  #quien .pcOnly.pcv8 .grid2,
  #quien .grid2 {
    display: flex !important;
    align-items: stretch !important;
  }

  /* Panel foto: sin altura propia, que se estire al alto del stack */
  #quien .grid2>.panel {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  /* El <picture> y la <img> van a modo "fondo" */
  #quien .grid2>.panel>picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0 !important;
  }

  #quien .grid2>.panel>picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Por si el navegador decide ignorar <picture> absolute, cazamos también el img dentro */
  #quien .grid2>.panel img {
    object-fit: cover !important;
  }

  /* Caption siempre por encima */
  #quien .grid2>.panel .panelCaption {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 14px !important;
    z-index: 2 !important;
  }

  #quien .grid2>.stack {
    align-self: stretch !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   MOBILE ONLY – Final micro-fixes (hero title + top gap)
   - CONSIGUE SER: negro
   - TU MEJOR VERSIÓN: morado (mismo tono que CTA)
   - Oscurecido final: mínimo (solo al final)
   - Banda gris superior (detrás del header): negro puro
   ========================================================= */
@media (max-width: 820px) {

  /* Si hay cualquier hueco arriba del hero, que sea negro (no gris) */
  html,
  body {
    background: #000 !important;
  }

  /* Asegura que el bloque hero no “enseña” fondo raro arriba */
  .hero {
    background: #000 !important;
  }

  /* Título del hero (pill): negro + morado CTA */
  .hero .hero-poster h1,
  .hero .hero-poster .hero-title {
    color: rgba(255, 255, 255, .92) !important;
    /* CONSIGUE SER */
  }

  .hero .hero-poster h1 .hl,
  .hero .hero-poster .hero-title .hl,
  .hero-cine-title .hl {
    color: rgb(139, 92, 246) !important;
    /* mismo morado del CTA */
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .22) !important;
    /* micro-contraste sin “sombra” cantosa */
    position: relative;
  }

  /* Reduce al mínimo el oscurecido final (solo un pelín al final) */
  .hero .hero-poster h1 .hl::after,
  .hero .hero-poster .hero-title .hl::after,
  .hero-cine-title .hl::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 90%,
        rgba(0, 0, 0, .18) 96%,
        rgba(0, 0, 0, .35) 100%);
    opacity: .25;
    filter: blur(.6px);
  }
}


/* ===== Mobile tweaks: black top strip + hero title colors ===== */
@media (max-width: 900px) {

  html,
  body {
    background: #000 !important;
  }

  header {
    background: #000 !important;
  }
}

/* =========================================================
   FIX MÓVIL: eliminar la “franja” apagada arriba del hero
   Causa: overlay fijo (body::before) tapando la foto.
   Solución: quitar overlay y forzar header sólido negro.
   SOLO MÓVIL
   ========================================================= */
@media (max-width: 1023px) {

  /* si quedaba el overlay anterior, lo anulamos */
  body::before{
    display: none !important;
  }

  /* el fondo general, negro puro (por si hay huecos) */
  html, body{
    background: #000 !important;
  }

  /* header sólido, sin transparencia/blur que “grisifique” el fondo */
  header{
    background: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* si hay borde/halo decorativo en header, fuera (en móvil se ve grisáceo) */
  header::before{
    display: none !important;
  }

  /* subimos un pelín el encuadre del hero (más “arriba”) */
  .hero::before{
    background-position: center 2% !important;
  }
}



/* fin de styles.css — estilos premium en luxury-v2.css */

.inside-kicker,
.cfTag,
.tag,
.inside-tag,
.seo-chip,
.inside-note {
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  color: var(--accent) !important;
}

.secSub,
.hero-cine-sub,
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.85;
}

/* 2. Testimonios (Comentarios) - Elevación Top */
.premium-slider-container {
  padding: 60px 0 !important;
}

.ps-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 40px !important;
  padding: 56px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ps-card:hover {
  transform: translateY(-12px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5) !important;
}

.ps-quote {
  font-size: 1.25rem !important;
  line-height: 1.85 !important;
  color: #f1f5f9 !important;
  font-style: normal !important;
  margin-bottom: 28px !important;
  position: relative;
  font-weight: 400 !important;
}

.ps-card::before {
  content: "“";
  font-family: "Playfair Display", serif;
  font-size: 160px;
  color: rgba(255, 210, 26, 0.06);
  position: absolute;
  top: -40px;
  left: 20px;
  line-height: 1;
  pointer-events: none;
}

.ps-author {
  font-family: "Playfair Display", serif !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 1.35rem !important;
  color: var(--accent) !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.ps-author::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
}

/* 3. FAQ - Experiencia de Lujo */
.faq {
  max-width: 1000px;
  margin: 0 auto;
  gap: 24px !important;
}

.faq details {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: transparent !important;
  border-radius: 24px !important;
}

.faq details:hover {
  background: rgba(255, 255, 255, 0.015) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.faq details[open] {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: transparent !important;
  padding: 0 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
  transform: scale(1.01);
}

.faq summary {
  font-family: var(--font-sans);
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  padding: 32px 20px !important;
  letter-spacing: -0.01em;
  color: #fff !important;
}

.faq summary::after {
  content: "" !important;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,209,26,0.5)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M12 6v12m6-6H6'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.faq details[open] summary::after {
  transform: rotate(135deg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,209,26,1)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M12 6v12m6-6H6'/%3E%3C/svg%3E") !important;
}

.faq details>div {
  padding: 0 20px 40px !important;
  font-size: 1.15rem !important;
  line-height: 1.95 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 400 !important;
}

}

/* =========================================================
   PATCH: FAQ (SOLO PC) — línea morada al abrir
   ========================================================= */
@media (min-width: 721px){
  #faq .faq details{ position: relative; }

  #faq .faq details > summary{
    padding-left: 18px !important;
  }

  #faq .faq details > summary + *{
    margin-left: 18px;
  }

  #faq .faq details::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 999px;
    background: rgba(139, 92, 246, .95);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, .18), 0 10px 28px rgba(139, 92, 246, .12);
    opacity: 0;
    transform: translateX(-2px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }

  #faq .faq details[open]::before{
    opacity: 1;
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce){
    #faq .faq details::before{ transition: none !important; }
  }
}


/* =========================================================
   PATCH: HERO (SOLO PC) — línea negra visible por detrás del titular
   Nota: una sola línea (sin duplicados) y con contraste suficiente
   ========================================================= */
@media (min-width: 721px){
  .hero-cinematic .hero-cine-title{
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  /* el texto por encima de la línea */
  .hero-cinematic .hero-cine-title,
  .hero-cinematic .hero-cine-title *{
    position: relative;
    z-index: 2;
  }

  .hero-cinematic .hero-cine-title::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  height: 2px;

  /* ancho = texto + margen a ambos lados */
  width: calc(100% + 260px);
  max-width: 1200px;

  /* una sola línea CLARA por detrás del texto */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 14%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.28) 86%,
    rgba(255,255,255,0) 100%
  );

  opacity: .62;
  border-radius: 999px;
  filter: none;
  box-shadow: 0 1px 10px rgba(0,0,0,.35);
  z-index: 0;
  pointer-events: none;
}
}



/* =========================================================
   PATCH: FAQ (SOLO PC) — línea morada al abrir acordeón
   ========================================================= */
@media (min-width: 1024px){
  #faq .faq details{
    position: relative;
  }

  /* más “tarjeta” al abrir, sin tocar móvil */
  #faq .faq details[open]{
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
  }

  /* la línea morada de estado (como en tu referencia) */
  #faq .faq details[open]::before{
    content: "";
    position: absolute;
    left: 14px;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg,
      rgba(139,92,246,0) 0%,
      rgba(139,92,246,.95) 18%,
      rgba(139,92,246,.95) 82%,
      rgba(139,92,246,0) 100%
    );
    box-shadow: 0 0 14px rgba(139,92,246,.35);
    pointer-events: none;
  }

  /* dejamos espacio para que la línea no “muerda” el texto */
  #faq .faq details[open] > summary,
  #faq .faq details[open] > div{
    padding-left: 34px;
  }

  /* micro detalle: el borde inferior del summary al abrir */
  #faq .faq details[open] > summary{
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
}



/* =========================================================
   FIX MÓVIL: “franja gris” arriba del hero
   Causa real: el layout deja un hueco superior (body padding-top / offset)
   y se ve el background del body detrás del header flotante.
   Solución robusta: subir el hero para que su fondo (foto) rellene ese hueco.
   NO toca el header.
   ========================================================= */
@media (max-width: 820px){
  /* Asegura que no exista hueco superior reservado para el header */
  body{ padding-top: 0 !important; }

  /* El hero rellena también el área superior (detrás del header flotante) */
  .hero{
    margin-top: calc(-1 * var(--hdr)) !important;
  }
}


/* =========================================================
   ÚLTIMOS RETOQUES (PC + MÓVIL) — 2026-02-20
   - Subhero chips: misma tipografía y color que los títulos "Empiezas de cero..."
   - Modal "Dentro del programa / Para quién es": misma tipografía (manteniendo color dorado)
   - FAQ más compacto (PC + móvil) + línea morada también en móvil
   - Tag "Para empezar a tu ritmo": misma tipografía; en móvil color blanco/gris (no amarillo)
   ========================================================= */

/* 1) Subhero chips (hero-seo-chip + seo-chip): tipografía estilo títulos */
.hero-seo-chip,
.seo-chip{
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: rgba(255,255,255,.86) !important; /* mismo rollo que los títulos */
}

/* Mantén el look de “pill” pero un pelín más premium */
.hero-seo-chip,
.seo-chip{
  border-color: rgba(255,255,255,.18) !important;
}

/* 2) Modal (desplegable del programa): misma tipografía, sin tocar color */
.inside-kicker{
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* 3) Tag “Para empezar a tu ritmo”: misma tipografía; color igual en desktop */
.programas-bridge__kicker .tag,
.tag{
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
}

/* En móvil: quita el amarillo y pásalo a blanco/gris (sin tocar desktop) */
@media (max-width: 820px){
  .programas-bridge__kicker .tag{
    color: rgba(255,255,255,.82) !important;
  }
}

/* 4) FAQ más compacto (PC + móvil) */
#faq .faq details{
  border-radius: 18px;
}

#faq .faq details > summary{
  padding: 14px 18px !important;        /* antes era demasiado alto */
  line-height: 1.2 !important;
}

#faq .faq details > summary + *{
  padding: 0 18px 14px 18px !important; /* reduce el “aire” del contenido */
}

@media (max-width: 820px){
  #faq .faq details > summary{
    padding: 12px 16px !important;
  }
  #faq .faq details > summary + *{
    padding: 0 16px 12px 16px !important;
  }
}

/* 5) Línea morada al abrir: también en móvil (sin romper el PC que ya estaba bien) */
#faq .faq details{
  position: relative;
}

#faq .faq details[open]::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .95);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .18), 0 10px 28px rgba(139, 92, 246, .12);
  opacity: 1;
}

/* Da hueco a la línea solo cuando está abierto (más limpio) */
#faq .faq details[open] > summary{
  padding-left: 20px !important;
}
#faq .faq details[open] > summary + *{
  margin-left: 0;
  padding-left: 20px !important;
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  #faq .faq details::before{ transition: none !important; }
}



/* =========================================================
   RETOQUE: tamaño de "pills" del subhero (PC)
   Objetivo: que el texto de las pills tenga el mismo tamaño que
   "Pierde grasa sin dietas rígidas" y no se dispare.
   ========================================================= */

.seo-title-top,
.seo-title-bottom{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.1 !important;
}

/* Chips/pills del subhero */
.seo-chip{
  font-size: clamp(0.9rem, 1.05vw, 1.0rem) !important;
  line-height: 1.1 !important;
  padding: 10px 18px !important;
}

/* Chips/pills del subhero en móvil (hero-seo-chip) */
.hero-seo-chip{
  font-size: 0.86rem !important;
  line-height: 1.1 !important;
  padding: 8px 14px !important;
}
/* =========================================================
   RETOQUE: "Para empezar a tu ritmo" (PC)
   Un pelín más pequeño, sin tocar color.
   ========================================================= */
.programas-bridge__kicker .tag{
  font-size: 0.92rem !important;
}

/* =========================================================
   ÚLTIMO AJUSTE (PC): Subhero pills con tipografía/tamaño del
   botón "Ver el plan por dentro" (sin cambiar el color de las pills).
   ========================================================= */
@media (min-width: 821px){
  /* Solo afecta al bloque subhero de PC */
  .seo-intro.pcOnly .seo-chip{
    /* Tamaño y “feeling” del toggle-link */
    font-size: 0.82rem !important;  /* más compacto */
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;

    /* Ajuste de altura para que no parezcan botones enormes */
    padding: 8px 16px !important;
  }
}


/* =========================================================
   FINAL FIX (Móvil): Menú más compacto + CTA con misma tipografía
   - Evita panel gigante hasta abajo (altura automática)
   - CTA centrada y con ancho del texto (no a todo el panel)
   - CTA con misma fuente/estilo que el resto del menú
   ========================================================= */
@media (max-width: 820px){

  /* Panel del menú: que mida lo que necesita (sin “sábana” hasta el suelo) */
  #primaryNav{
    height: auto !important;
    max-height: min(72dvh, 560px) !important;
    overflow: auto !important;
    padding: 86px 18px 18px !important;  /* respeta el header */
  }

  /* Centrar el CTA sin que ocupe todo el ancho */
  #primaryNav > li:last-child{
    display: flex !important;
    justify-content: center !important;
  }

  /* El CTA real es el <a class="cta-top"> (no un wrapper) */
  #primaryNav a.cta-top{
    width: fit-content !important;
    align-self: center !important;

    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1.02rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;

    /* Mantener color lila actual, con sombra morada suave y borde dorado finito */
    box-shadow: 0 8px 18px rgba(138, 92, 246, .12) !important;
    border: 1px solid rgba(160, 140, 88, .55) !important;

    padding: 12px 18px !important;
    border-radius: 999px !important;
  }

  #primaryNav a.cta-top .cta-mobile-label{
    font-family: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
  }
}