body{
    font-family: "Inter", sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
  }
  h1, h2, h3, h4, h5, h6{
    font-family: "Plus Jakarta Sans", sans-serif;
  }
  
  /* Transiciones fluidas de SPA */
  .view-section{
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .view-section.hidden{
    display: none;
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }

  /* Efecto de desvanecimiento para imágenes de fondo en el Hero */
  

  /* Sutiles sombras de diseño editorial */
  .card-shadow-3d{
    box-shadow: 0 30px 60px -15px rgba(2, 12, 27, 0.8), 0 0 50px rgba(197, 168, 90, 0.15);
  }

  /* Efecto Vidrio Premium (Glassmorphism de alta fidelidad mejorado y más claro) */
  .premium-glass{
    background: rgba(15, 41, 74, 0.35);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .premium-glass-gold{
    background: rgba(15, 41, 74, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(197, 168, 90, 0.3);
  }

  /* Contenedores con profundidad 3D para el tilt de las tarjetas */
  .perspective-container{
    perspective: 1000px;
  }

  .tilting-card-wrapper{
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
  }

  ::-webkit-scrollbar{
    width: 6px;
  }
  ::-webkit-scrollbar-track{
    background: #020C1B;
  }
  ::-webkit-scrollbar-thumb{
    background: #C5A85A;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: #A3843B;
  }


  /* =========================================================
     HERO FLUIDO: responde al ancho Y a la altura del viewport
     ========================================================= */
  #hero-shell{
    min-height: calc(100svh - 4.75rem);
    height: auto;
    padding-block: clamp(1.75rem, 5vh, 5rem);
  }

  #hero-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }

  #hero-left-content, #hero-stage, #hero-deck{
    min-width: 0;
  }

  #hero-left-content{
    width: 100%;
    max-width: 46rem;
  }

  #hero-left-content > * + *{
    margin-top: clamp(0.9rem, 2.4vh, 1.5rem) !important;
  }

  #hero-badge{
    width: max-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(0.625rem, 1.6vw, 0.75rem);
    line-height: 1.2;
  }

  #hero-slide-title{
    max-width: 100%;
    font-size: clamp(2.25rem, 8vw, 4.75rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  #hero-slide-desc{
    max-width: 38rem;
    font-size: clamp(0.86rem, 2vw, 1rem);
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  #hero-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.5rem);
  }

  #hero-primary-btn{
    min-width: min(100%, 14rem);
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  #hero-video-btn{
    min-width: 0;
    max-width: 100%;
  }

  #hero-video-btn > span:last-child{
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    line-height: 1.25;
  }

  #hero-stage{
    width: 100%;
    min-height: 0 !important;
  }

  #hero-deck{
    width: min(92vw, 31rem);
    max-width: 100%;
    height: auto;
    isolation: isolate;
  }

  #deck-card-active, #deck-card-prev, #deck-card-next{
    max-width: 100%;
  }

  #card-active-title, #card-active-desc, #card-active-category{
    overflow-wrap: anywhere;
  }

  #deck-card-active > div:last-child > div:last-child{
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  #hero-controls{
    width: min(100%, 21.25rem);
    gap: 0.65rem;
  }

  #hero-dots-container{
    min-width: 0;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  /* Teléfonos muy pequeños: nunca forzar una línea ni una anchura fija. */
  @media (max-width: 359px) {
    #hero-shell{
      padding-block: 1.25rem 2rem;
    }

    #hero-slide-title{
      font-size: clamp(2rem, 11.5vw, 2.55rem);
    }

    #hero-actions, #hero-primary-btn, #hero-video-btn{
      width: 100%;
    }

    #hero-video-btn{
      justify-content: flex-start;
    }

    #hero-deck{
      width: min(90vw, 20.5rem);
    }

    #deck-card-active{
      padding: 1.1rem !important;
    }
  }

  /* Tablet vertical y pantallas medianas altas: contenido apilado y natural. */
  @media (min-width: 640px) and (max-width: 839px) {
    #hero-deck{
      width: min(74vw, 27rem);
    }
  }

  /*
   * Pantallas medianas apaisadas: no esperar al breakpoint lg.
   * Se utiliza una composición compacta de dos columnas cuando la relación
   * de aspecto demuestra que sí existe espacio horizontal real.
   */
  @media (min-width: 840px) and (min-aspect-ratio: 4 / 3) {
    #hero-shell{
      min-height: calc(100svh - 4.75rem);
      padding-block: clamp(1.25rem, 3vh, 2.75rem);
    }

    #hero-grid{
      grid-template-columns: minmax(0, 1.08fr) minmax(17rem, 0.92fr);
      gap: clamp(1.5rem, 3vw, 3.25rem);
    }

    #hero-left-content, #hero-stage{
      grid-column: auto !important;
    }

    #hero-slide-title{
      font-size: clamp(2.35rem, 4.65vw, 4.15rem);
    }

    #hero-slide-desc{
      font-size: clamp(0.84rem, 1.45vw, 1rem);
    }

    #hero-deck{
      width: min(39vw, 26rem);
    }
  }

  /* Laptops y tablets apaisadas de poca altura, como 968 × 528. */
  @media (min-width: 840px) and (min-aspect-ratio: 4 / 3) and (max-height: 700px) {
    #hero-shell{
      padding-block: clamp(0.9rem, 2.2vh, 1.4rem);
    }

    #hero-grid{
      gap: clamp(1rem, 2.25vw, 2rem);
    }

    #hero-left-content > * + *{
      margin-top: clamp(0.65rem, 1.7vh, 1rem) !important;
    }

    #hero-badge{
      padding: 0.55rem 0.9rem !important;
      font-size: clamp(0.58rem, 1.1vw, 0.7rem);
    }

    #hero-slide-title{
      font-size: clamp(2rem, 4.25vw, 3.15rem);
      line-height: 0.98;
    }

    #hero-slide-desc{
      font-size: clamp(0.8rem, 1.35vw, 0.93rem);
      line-height: 1.5;
    }

    #hero-actions{
      padding-top: 0.2rem !important;
      gap: 0.75rem 1rem;
    }

    #hero-primary-btn{
      min-width: 0;
      padding: 0.85rem 1.5rem !important;
      font-size: 0.68rem;
    }

    .hero-video-icon{
      width: 2.75rem !important;
      height: 2.75rem !important;
      flex: 0 0 2.75rem;
    }

    #hero-video-btn > span:last-child{
      font-size: 0.68rem !important;
      letter-spacing: 0.08em !important;
    }

    #hero-deck{
      width: min(32vw, 19.25rem);
    }

    #deck-card-active{
      padding: clamp(1rem, 2vw, 1.35rem) !important;
      border-radius: 1.35rem !important;
    }

    #deck-card-prev, #deck-card-next{
      border-radius: 1.35rem !important;
    }

    #card-active-num{
      font-size: clamp(2rem, 4vw, 2.8rem) !important;
    }

    #card-active-title{
      font-size: clamp(1.25rem, 2.3vw, 1.75rem) !important;
      line-height: 1.15;
    }

    #card-active-desc, #card-active-category, #deck-card-active button, #deck-card-active span.font-mono{
      font-size: clamp(0.58rem, 1vw, 0.72rem) !important;
    }

    #hero-controls{
      margin-top: 0.7rem !important;
    }

    #hero-controls > button{
      width: 2.35rem !important;
      height: 2.35rem !important;
      flex: 0 0 2.35rem;
    }

    #hero-social{
      display: none !important;
    }
  }

  /* Alturas extremadamente reducidas: priorizar legibilidad y permitir scroll. */
  @media (max-height: 480px) and (min-width: 840px) {
    #hero-shell{
      align-items: flex-start;
      min-height: 0;
      padding-block: 0.8rem 1.4rem;
    }

    #hero-deck{
      width: min(29vw, 16.75rem);
    }
  }


  /* =========================================================
     ABANICO 3D PREMIUM: profundidad, barrido y brillo editorial
     ========================================================= */
  #hero-deck{
    --fan-x: clamp(2.35rem, 9vw, 6rem);
    --fan-y: clamp(0.9rem, 2.8vw, 2rem);
    --fan-rotate: 13deg;
    --fan-side-scale: 0.9;
    isolation: isolate;
    perspective: 1750px;
    transform-style: preserve-3d;
  }

  /* Halo ambiental detrás del abanico. */
  #hero-deck::before, #hero-deck::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    z-index: 0;
  }

  #hero-deck::before{
    width: 92%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(197, 168, 90, 0.2) 0%, rgba(56, 189, 248, 0.08) 38%, transparent 72%);
    filter: blur(24px);
    opacity: 0.55;
    transition: opacity 500ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  #hero-deck::after{
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(197, 168, 90, 0.18);
    box-shadow:
      0 0 45px rgba(197, 168, 90, 0.08),
      inset 0 0 40px rgba(56, 189, 248, 0.05);
    opacity: 0.36;
  }

  #deck-card-active, #deck-card-prev, #deck-card-next{
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #deck-card-active{
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-scale: 1;
    transform:
      perspective(1350px)
      translate3d(0, -1.2%, 46px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      scale3d(var(--tilt-scale), var(--tilt-scale), var(--tilt-scale));
    transform-origin: 50% 84%;
    transition:
      transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 420ms ease,
      filter 420ms ease;
  }

  /* Barrido luminoso premium sobre la tarjeta principal. */
  #deck-card-active::before{
    content: "";
    position: absolute;
    inset: -32%;
    z-index: 18;
    pointer-events: none;
    background: linear-gradient(
      112deg,
      transparent 34%,
      rgba(255, 255, 255, 0.03) 42%,
      rgba(197, 168, 90, 0.22) 49%,
      rgba(56, 189, 248, 0.11) 53%,
      transparent 61%
    );
    transform: translate3d(-68%, 0, 0) rotate(7deg);
    opacity: 0;
  }

  #deck-card-active::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 19;
    pointer-events: none;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 -34px 52px rgba(2, 12, 27, 0.16);
  }

  #deck-card-prev{
    opacity: 0.54;
    filter: saturate(0.84) brightness(0.72) blur(0.15px);
    transform-origin: 90% 97%;
    transform:
      translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px)
      rotateZ(calc(var(--fan-rotate) * -1))
      rotateY(11deg)
      scale(var(--fan-side-scale));
    transition:
      transform 820ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 480ms ease,
      filter 480ms ease;
  }

  #deck-card-next{
    opacity: 0.54;
    filter: saturate(0.84) brightness(0.72) blur(0.15px);
    transform-origin: 10% 97%;
    transform:
      translate3d(var(--fan-x), var(--fan-y), -128px)
      rotateZ(var(--fan-rotate))
      rotateY(-11deg)
      scale(var(--fan-side-scale));
    transition:
      transform 820ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 480ms ease,
      filter 480ms ease;
  }

  #hero-deck:hover::before{
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.08);
  }

  #hero-deck:hover #deck-card-active{
    filter: brightness(1.07) saturate(1.08);
    box-shadow:
      0 48px 92px -26px rgba(2, 12, 27, 0.98),
      0 0 76px rgba(197, 168, 90, 0.22),
      0 0 32px rgba(56, 189, 248, 0.08);
  }

  #hero-deck:hover #deck-card-prev{
    opacity: 0.72;
    filter: saturate(0.98) brightness(0.87);
    transform:
      translate3d(calc(var(--fan-x) * -1.16), calc(var(--fan-y) * 1.12), -96px)
      rotateZ(calc(var(--fan-rotate) * -1.22))
      rotateY(8deg)
      scale(calc(var(--fan-side-scale) + 0.028));
  }

  #hero-deck:hover #deck-card-next{
    opacity: 0.72;
    filter: saturate(0.98) brightness(0.87);
    transform:
      translate3d(calc(var(--fan-x) * 1.16), calc(var(--fan-y) * 1.12), -96px)
      rotateZ(calc(var(--fan-rotate) * 1.22))
      rotateY(-8deg)
      scale(calc(var(--fan-side-scale) + 0.028));
  }

  #card-prev-img, #card-next-img{
    transform: scale(1.09);
    animation: fanImageDrift 11s ease-in-out infinite alternate;
  }

  #card-next-img{
    animation-delay: -5.2s;
  }

  #card-active-hud{
    min-width: 0;
  }

  #card-active-tag{
    display: inline-flex;
    align-items: center;
    max-width: none;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  #card-active-num{
    flex: 0 1 auto;
    min-width: 0;
    line-height: 0.9;
  }

  /* El halo y el aro reaccionan al cambio de tarjeta. */
  #hero-deck.fan-next::before, #hero-deck.fan-prev::before{
    animation: premiumFanAura 1040ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  #hero-deck.fan-next::after{
    animation: premiumOrbitNext 1040ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  #hero-deck.fan-prev::after{
    animation: premiumOrbitPrev 1040ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  #hero-deck.fan-next #deck-card-active::before{
    animation: premiumCardSheenNext 1040ms ease-in-out both;
  }

  #hero-deck.fan-prev #deck-card-active::before{
    animation: premiumCardSheenPrev 1040ms ease-in-out both;
  }

  /* Animación principal: elevación, apertura, cruce visual y asentamiento. */
  #hero-deck.fan-next #deck-card-active{
    animation: premiumActiveNext 1040ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  }

  #hero-deck.fan-next #deck-card-prev{
    animation: premiumPrevRecede 1040ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  }

  #hero-deck.fan-next #deck-card-next{
    animation: premiumNextSweep 1040ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  }

  #hero-deck.fan-prev #deck-card-active{
    animation: premiumActivePrev 1040ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  }

  #hero-deck.fan-prev #deck-card-prev{
    animation: premiumPrevSweep 1040ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  }

  #hero-deck.fan-prev #deck-card-next{
    animation: premiumNextRecede 1040ms cubic-bezier(0.16, 0.82, 0.18, 1) both;
  }

  @keyframes premiumActiveNext {
    0% {
      z-index: 30;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) rotateZ(0) scale(1);
      filter: brightness(1) saturate(1);
      opacity: 1;
    }
    22% {
      z-index: 34;
      transform: perspective(1350px) translate3d(-3%, -7%, 152px) rotateX(2deg) rotateY(-7deg) rotateZ(-2.5deg) scale(1.045);
      filter: brightness(1.09) saturate(1.1);
      opacity: 1;
    }
    54% {
      z-index: 26;
      transform: perspective(1350px) translate3d(calc(var(--fan-x) * -0.62), -3%, 42px) rotateX(1deg) rotateY(-19deg) rotateZ(-8deg) scale(0.94);
      filter: brightness(0.64) saturate(0.68) blur(1.8px);
      opacity: 0.03;
    }
    76% {
      z-index: 31;
      transform: perspective(1350px) translate3d(2%, -3.5%, 96px) rotateX(-1deg) rotateY(5deg) rotateZ(1.8deg) scale(1.018);
      filter: brightness(1.06) saturate(1.08);
      opacity: 0.98;
    }
    100% {
      z-index: 30;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) rotateZ(0) scale(1);
      filter: brightness(1) saturate(1);
      opacity: 1;
    }
  }

  @keyframes premiumNextSweep {
    0% {
      z-index: 10;
      transform: translate3d(var(--fan-x), var(--fan-y), -128px) rotateZ(var(--fan-rotate)) rotateY(-11deg) scale(var(--fan-side-scale));
      filter: saturate(0.84) brightness(0.72);
      opacity: 0.54;
    }
    25% {
      z-index: 22;
      transform: translate3d(calc(var(--fan-x) * 1.3), calc(var(--fan-y) * 0.85), -72px) rotateZ(calc(var(--fan-rotate) * 1.32)) rotateY(-14deg) scale(0.93);
      opacity: 0.7;
    }
    52% {
      z-index: 46;
      transform: perspective(1350px) translate3d(3%, -7%, 182px) rotateX(-1deg) rotateY(3deg) rotateZ(3deg) scale(1.055);
      filter: saturate(1.1) brightness(1.12);
      opacity: 1;
    }
    74% {
      z-index: 36;
      transform: perspective(1350px) translate3d(-1%, -2.5%, 90px) rotateY(-3deg) rotateZ(-1deg) scale(1.015);
      opacity: 0.96;
    }
    100% {
      z-index: 10;
      transform: translate3d(var(--fan-x), var(--fan-y), -128px) rotateZ(var(--fan-rotate)) rotateY(-11deg) scale(var(--fan-side-scale));
      filter: saturate(0.84) brightness(0.72);
      opacity: 0.54;
    }
  }

  @keyframes premiumPrevRecede {
    0%, 100% {
      z-index: 10;
      transform: translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px) rotateZ(calc(var(--fan-rotate) * -1)) rotateY(11deg) scale(var(--fan-side-scale));
      opacity: 0.54;
    }
    46% {
      z-index: 4;
      transform: translate3d(calc(var(--fan-x) * -1.58), calc(var(--fan-y) * 1.52), -240px) rotateZ(calc(var(--fan-rotate) * -1.58)) rotateY(20deg) scale(0.77);
      filter: brightness(0.5) saturate(0.58) blur(1.2px);
      opacity: 0.18;
    }
  }

  @keyframes premiumActivePrev {
    0% {
      z-index: 30;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) rotateZ(0) scale(1);
      filter: brightness(1) saturate(1);
      opacity: 1;
    }
    22% {
      z-index: 34;
      transform: perspective(1350px) translate3d(3%, -7%, 152px) rotateX(2deg) rotateY(7deg) rotateZ(2.5deg) scale(1.045);
      filter: brightness(1.09) saturate(1.1);
      opacity: 1;
    }
    54% {
      z-index: 26;
      transform: perspective(1350px) translate3d(calc(var(--fan-x) * 0.62), -3%, 42px) rotateX(1deg) rotateY(19deg) rotateZ(8deg) scale(0.94);
      filter: brightness(0.64) saturate(0.68) blur(1.8px);
      opacity: 0.03;
    }
    76% {
      z-index: 31;
      transform: perspective(1350px) translate3d(-2%, -3.5%, 96px) rotateX(-1deg) rotateY(-5deg) rotateZ(-1.8deg) scale(1.018);
      filter: brightness(1.06) saturate(1.08);
      opacity: 0.98;
    }
    100% {
      z-index: 30;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) rotateZ(0) scale(1);
      filter: brightness(1) saturate(1);
      opacity: 1;
    }
  }

  @keyframes premiumPrevSweep {
    0% {
      z-index: 10;
      transform: translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px) rotateZ(calc(var(--fan-rotate) * -1)) rotateY(11deg) scale(var(--fan-side-scale));
      filter: saturate(0.84) brightness(0.72);
      opacity: 0.54;
    }
    25% {
      z-index: 22;
      transform: translate3d(calc(var(--fan-x) * -1.3), calc(var(--fan-y) * 0.85), -72px) rotateZ(calc(var(--fan-rotate) * -1.32)) rotateY(14deg) scale(0.93);
      opacity: 0.7;
    }
    52% {
      z-index: 46;
      transform: perspective(1350px) translate3d(-3%, -7%, 182px) rotateX(-1deg) rotateY(-3deg) rotateZ(-3deg) scale(1.055);
      filter: saturate(1.1) brightness(1.12);
      opacity: 1;
    }
    74% {
      z-index: 36;
      transform: perspective(1350px) translate3d(1%, -2.5%, 90px) rotateY(3deg) rotateZ(1deg) scale(1.015);
      opacity: 0.96;
    }
    100% {
      z-index: 10;
      transform: translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px) rotateZ(calc(var(--fan-rotate) * -1)) rotateY(11deg) scale(var(--fan-side-scale));
      filter: saturate(0.84) brightness(0.72);
      opacity: 0.54;
    }
  }

  @keyframes premiumNextRecede {
    0%, 100% {
      z-index: 10;
      transform: translate3d(var(--fan-x), var(--fan-y), -128px) rotateZ(var(--fan-rotate)) rotateY(-11deg) scale(var(--fan-side-scale));
      opacity: 0.54;
    }
    46% {
      z-index: 4;
      transform: translate3d(calc(var(--fan-x) * 1.58), calc(var(--fan-y) * 1.52), -240px) rotateZ(calc(var(--fan-rotate) * 1.58)) rotateY(-20deg) scale(0.77);
      filter: brightness(0.5) saturate(0.58) blur(1.2px);
      opacity: 0.18;
    }
  }

  @keyframes premiumFanAura {
    0%, 100% {
      opacity: 0.55;
      transform: translate(-50%, -50%) scale(1);
      filter: blur(24px);
    }
    44% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.22);
      filter: blur(32px);
    }
  }

  @keyframes premiumOrbitNext {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.36; }
    50% { transform: translate(-50%, -50%) rotate(34deg) scale(1.12); opacity: 0.78; }
  }

  @keyframes premiumOrbitPrev {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.36; }
    50% { transform: translate(-50%, -50%) rotate(-34deg) scale(1.12); opacity: 0.78; }
  }

  @keyframes premiumCardSheenNext {
    0%, 18% { transform: translate3d(-68%, 0, 0) rotate(7deg); opacity: 0; }
    43% { opacity: 0.82; }
    72% { transform: translate3d(68%, 0, 0) rotate(7deg); opacity: 0.28; }
    100% { transform: translate3d(82%, 0, 0) rotate(7deg); opacity: 0; }
  }

  @keyframes premiumCardSheenPrev {
    0%, 18% { transform: translate3d(68%, 0, 0) rotate(-7deg); opacity: 0; }
    43% { opacity: 0.82; }
    72% { transform: translate3d(-68%, 0, 0) rotate(-7deg); opacity: 0.28; }
    100% { transform: translate3d(-82%, 0, 0) rotate(-7deg); opacity: 0; }
  }

  @keyframes fanImageDrift {
    from { transform: scale(1.09) translate3d(-1.8%, -1.2%, 0); }
    to   { transform: scale(1.18) translate3d(1.8%, 1.2%, 0); }
  }

  @media (max-width: 639px) {
    #hero-deck{
      --fan-x: clamp(1.2rem, 7vw, 2rem);
      --fan-y: 0.55rem;
      --fan-rotate: 8deg;
    }

    #deck-card-active{
      width: 98%;
    }

    #hero-deck::after{
      width: 84%;
    }
  }

  @media (min-width: 840px) and (min-aspect-ratio: 4 / 3) and (max-height: 700px) {
    #hero-deck{
      --fan-x: clamp(1.5rem, 4vw, 2.8rem);
      --fan-y: 0.65rem;
      --fan-rotate: 9deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #hero-deck::before, #hero-deck::after, #deck-card-active, #deck-card-prev, #deck-card-next, #deck-card-active::before, #card-prev-img, #card-next-img, #hero-slide-title, #hero-slide-desc{
      transition: none !important;
      animation: none !important;
    }
  }


  /* ==========================================
     MÓDULO CEFEIN · CURSOS PREMIUM
     Añadido sin retirar componentes existentes.
     ========================================== */
  .premium-courses-shell{
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .premium-courses-shell::before, .premium-courses-shell::after{
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(10px);
    opacity: 0.22;
    z-index: -1;
  }

  .premium-courses-shell::before{
    width: clamp(15rem, 34vw, 34rem);
    aspect-ratio: 1;
    top: 4%;
    right: -12%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.45), transparent 68%);
  }

  .premium-courses-shell::after{
    width: clamp(13rem, 30vw, 30rem);
    aspect-ratio: 1;
    bottom: 5%;
    left: -10%;
    background: radial-gradient(circle, rgba(197, 168, 90, 0.42), transparent 68%);
  }

.premium-course-card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    overflow: hidden;
    border-radius: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid rgba(197, 168, 90, 0.22);
    background:
      linear-gradient(145deg, rgba(15, 41, 74, 0.94), rgba(2, 12, 27, 0.98)),
      radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 42%);
    box-shadow: 0 24px 65px -38px rgba(2, 12, 27, 0.95);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 320ms ease,
                box-shadow 420ms ease;
  }

  .premium-course-card::before{
    content: "";
    position: absolute;
    inset: -45% auto auto -30%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 168, 90, 0.18), transparent 72%);
    pointer-events: none;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .premium-course-card:hover, .premium-course-card:focus-within{
    transform: translateY(-0.45rem);
    border-color: rgba(197, 168, 90, 0.62);
    box-shadow: 0 34px 90px -42px rgba(56, 189, 248, 0.38),
                0 24px 70px -38px rgba(197, 168, 90, 0.42);
  }

  .premium-course-card:hover::before, .premium-course-card:focus-within::before{
    transform: translate3d(18%, 14%, 0) scale(1.12);
  }

  .premium-course-cover{
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 16 / 8.7;
    min-height: 9.5rem;
    padding: clamp(1rem, 3vw, 1.4rem);
    overflow: hidden;
    background:
      linear-gradient(to top, rgba(2, 12, 27, 0.98), rgba(2, 12, 27, 0.08)),
      var(--course-cover, linear-gradient(135deg, #0f294a, #020c1b));
    background-size: cover;
    background-position: center;
  }

  .premium-course-cover::after{
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 90%);
    pointer-events: none;
  }

  .premium-course-icon{
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: clamp(3rem, 8vw, 3.75rem);
    aspect-ratio: 1;
    border-radius: 1.1rem;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(2, 12, 27, 0.58);
    color: #C5A85A;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    box-shadow: 0 16px 32px -18px rgba(0,0,0,0.95);
  }

  .premium-course-badge{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    width: fit-content;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: clamp(0.63rem, 1.7vw, 0.72rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .premium-course-badge--async{
    color: #7dd3fc;
    background: rgba(14, 116, 144, 0.24);
    border: 1px solid rgba(56, 189, 248, 0.34);
  }

  .premium-course-badge--live{
    color: #fecaca;
    background: rgba(185, 28, 28, 0.2);
    border: 1px solid rgba(248, 113, 113, 0.38);
  }

  .premium-course-status-list{
    display: grid;
    gap: 0.58rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .premium-course-status{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.7rem 0.78rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255,255,255,0.075);
    background: rgba(255,255,255,0.035);
  }

  .premium-course-status > span{
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .premium-investment{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(197, 168, 90, 0.4);
    background: linear-gradient(135deg, rgba(197, 168, 90, 0.18), rgba(197, 168, 90, 0.06));
    color: #f8e9b7;
  }

  .premium-card-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: auto;
  }

  .premium-action-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
    height: auto;
    padding: 0.78rem 0.9rem;
    border-radius: 999px;
    font-size: clamp(0.67rem, 1.8vw, 0.75rem);
    line-height: 1.25;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease;
  }

  .premium-action-button:hover{
    transform: translateY(-0.12rem);
  }

  .premium-filter-bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
  }

  .premium-filter-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    height: auto;
    padding: 0.65rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.045);
    color: #cbd5e1;
    font-size: clamp(0.66rem, 1.8vw, 0.75rem);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    white-space: normal;
    text-align: center;
    transition: all 220ms ease;
  }

  .premium-filter-button.is-active, .premium-filter-button:hover{
    color: #020C1B;
    background: #C5A85A;
    border-color: #C5A85A;
  }

  .premium-search-field{
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0.9rem 1rem 0.9rem 2.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(2,12,27,0.64);
    color: #fff;
    outline: none;
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }

  .premium-search-field:focus{
    border-color: rgba(197,168,90,0.72);
    box-shadow: 0 0 0 4px rgba(197,168,90,0.1);
  }

  .premium-detail-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
  }

  .premium-detail-card{
    min-width: 0;
    height: auto;
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(145deg, rgba(15,41,74,0.72), rgba(2,12,27,0.86));
    box-shadow: 0 30px 80px -48px rgba(2,12,27,0.95);
  }

  .premium-benefit-grid, .premium-payment-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: .58rem;
  }

  .premium-benefit-item, .premium-payment-item{
    min-width: 0;
    height: auto;
    padding: .72rem;
    border-radius: .78rem;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.04);
    overflow-wrap: anywhere;
  }

  .premium-payment-item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .premium-payment-brand{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.55rem 0.82rem;
    border-radius: 0.8rem;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.08);
    color: #fff;
  }

  .premium-accordion{
    display: grid;
    gap: 0.75rem;
  }

  .premium-accordion details{
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1rem;
    background: rgba(255,255,255,0.035);
    overflow: clip;
  }

  .premium-accordion summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    color: #fff;
    font-weight: 800;
    line-height: 1.35;
    list-style: none;
  }

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

  .premium-accordion summary::after{
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(197,168,90,0.14);
    color: #C5A85A;
    transition: transform 260ms ease;
  }

  .premium-accordion details[open] summary::after{
    transform: rotate(45deg);
  }

  .premium-accordion-content{
    padding: 0 1rem 1rem;
    color: #cbd5e1;
    font-size: 0.84rem;
    line-height: 1.65;
  }

  .premium-certificate-stage{
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(197,168,90,0.25);
    background: #020C1B;
  }

  .premium-certificate-track{
    display: flex;
    width: 200%;
    transform: translateX(0);
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .premium-certificate-track[data-slide="1"]{
    transform: translateX(-50%);
  }

  .premium-certificate-slide{
    flex: 0 0 50%;
    min-width: 0;
    padding: clamp(1rem, 4vw, 2rem);
  }

  .premium-certificate-paper{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    aspect-ratio: 1.414 / 1;
    min-height: 15rem;
    height: auto;
    padding: clamp(1.1rem, 4vw, 2.4rem);
    overflow: hidden;
    border: clamp(0.4rem, 1vw, 0.7rem) double #C5A85A;
    background:
      radial-gradient(circle at center, rgba(197,168,90,0.08), transparent 58%),
      #f8fafc;
    color: #0F294A;
    box-shadow: inset 0 0 0 1px rgba(15,41,74,0.2);
  }

  .premium-certificate-paper::before{
    content: "CEFEIN";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    color: rgba(15,41,74,0.055);
    font: 900 clamp(2.5rem, 10vw, 7rem) / 1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0.08em;
    pointer-events: none;
  }

  

  

  .premium-empty-state{
    grid-column: 1 / -1;
    padding: clamp(2rem, 6vw, 4rem) 1rem;
    border-radius: 1.5rem;
    border: 1px dashed rgba(197,168,90,0.38);
    color: #94a3b8;
    text-align: center;
    background: rgba(15,41,74,0.25);
  }

  @media (min-width: 768px) {
    .premium-card-actions{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-card-actions .premium-action-button:first-child{
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 1100px) {
    .premium-detail-layout{
      grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    }

    .premium-detail-sticky{
      position: sticky;
      top: 6.5rem;
    }
  }

  @media (max-width: 767px) {

.premium-certificate-paper{
      aspect-ratio: auto;
      min-height: 20rem;
    }
  }

  @media (min-width: 1536px) and (max-width: 1760px) {
    #site-header .nav-link{
      padding-left: 0.68rem !important;
      padding-right: 0.68rem !important;
      font-size: 0.63rem !important;
      letter-spacing: 0.045em !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .premium-course-card, .premium-course-card::before, .premium-certificate-track, .premium-accordion summary::after, .premium-action-button{
      transition: none !important;
    }
  }


  /* Catálogo premium integrado dentro de las pestañas oficiales */
  .catalog-premium-zone{
    position: relative;
    isolation: isolate;
    display: grid;
    gap: clamp(1.25rem, 2.8vw, 2rem);
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid rgba(197, 168, 90, 0.22);
    background:
      radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 34%),
      radial-gradient(circle at 0% 100%, rgba(197, 168, 90, 0.13), transparent 36%),
      linear-gradient(145deg, rgba(15, 41, 74, 0.96), rgba(2, 12, 27, 0.99));
    box-shadow: 0 34px 90px -52px rgba(2, 12, 27, 0.95);
    overflow: hidden;
  }

  .catalog-premium-zone::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 86%);
  }

  .catalog-premium-heading{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  .catalog-premium-kicker{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    max-width: 100%;
    color: #C5A85A;
    font-size: clamp(.66rem, 1.7vw, .75rem);
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
  }

  .catalog-premium-title{
    margin-top: .45rem;
    color: #fff;
    font-size: clamp(1.45rem, 4vw, 2.35rem);
    line-height: 1.08;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .catalog-premium-copy{
    max-width: 52rem;
    margin-top: .6rem;
    color: #94a3b8;
    font-size: clamp(.76rem, 2vw, .92rem);
    line-height: 1.7;
  }

  .catalog-premium-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 2.3rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(197,168,90,.28);
    background: rgba(197,168,90,.09);
    color: #C5A85A;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media (min-width: 640px) {
    .catalog-premium-heading{
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }

  .premium-course-card{
    --course-accent: #C5A85A;
    --course-accent-rgb: 197, 168, 90;
    border-color: rgba(var(--course-accent-rgb), .28);
    background:
      radial-gradient(circle at 100% 0%, rgba(var(--course-accent-rgb), .17), transparent 38%),
      linear-gradient(150deg, rgba(15, 41, 74, .98), rgba(2, 12, 27, .995));
  }

  .premium-course-card:hover, .premium-course-card:focus-within{
    border-color: rgba(var(--course-accent-rgb), .72);
    box-shadow:
      0 38px 95px -48px rgba(var(--course-accent-rgb), .6),
      0 28px 75px -42px rgba(2, 12, 27, .98);
  }

  .premium-course-cover{
    isolation: isolate;
    min-height: clamp(11rem, 24vw, 14rem);
    background: linear-gradient(135deg, rgba(var(--course-accent-rgb), .30), rgba(2,12,27,.96));
  }

  .premium-course-photo{
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.88) contrast(1.04) brightness(.82);
    transform: scale(1.015);
    transition: transform 720ms cubic-bezier(.16,1,.3,1), filter 520ms ease;
  }

  .premium-course-image-overlay{
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(to top, rgba(2,12,27,.99) 0%, rgba(2,12,27,.72) 42%, rgba(2,12,27,.12) 100%),
      linear-gradient(125deg, rgba(var(--course-accent-rgb), .28), transparent 58%);
  }

  .premium-course-card:hover .premium-course-photo, .premium-course-card:focus-within .premium-course-photo{
    transform: scale(1.075);
    filter: saturate(1.05) contrast(1.06) brightness(.92);
  }

  .premium-course-card .premium-course-icon{
    color: var(--course-accent);
    border-color: rgba(var(--course-accent-rgb), .38);
    box-shadow: 0 18px 38px -18px rgba(var(--course-accent-rgb), .72);
  }

  .premium-course-card .premium-investment{
    border-color: rgba(var(--course-accent-rgb), .28);
    background: linear-gradient(135deg, rgba(var(--course-accent-rgb), .17), rgba(255,255,255,.035));
  }


  /* ==========================================
     CATÁLOGO CEFEIN · ACABADO EDITORIAL SOBRIO
     Paleta institucional, sin neón ni gradientes ornamentales.
     ========================================== */
  :root{
    --cefein-ink: #091722;
    --cefein-panel: #102331;
    --cefein-panel-soft: #162B3A;
    --cefein-line: #314352;
    --cefein-brass: #B59A62;
    --cefein-brass-light: #D0BC8C;
    --cefein-live: #A46F61;
    --cefein-text-soft: #AEB9C2;
  }

  #view-catalogo > div:first-child{
    background: #0C1A25 !important;
    border-bottom: 1px solid rgba(181, 154, 98, 0.2);
  }

  #view-catalogo > div:nth-child(2){
    background: #091722 !important;
  }

  #view-catalogo .inline-flex.p-1\.5{
    background: #102331 !important;
    border-color: #314352 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .catalog-premium-zone{
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .catalog-premium-zone::before{
    display: none;
  }

  .catalog-premium-heading{
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(174, 185, 194, 0.18);
  }

  .catalog-premium-kicker{
    color: var(--cefein-brass-light);
    letter-spacing: 0.09em;
  }

  .catalog-premium-title{
    color: #F3F5F6;
    font-weight: 800;
    letter-spacing: -0.025em;
  }

  .catalog-premium-copy{
    color: var(--cefein-text-soft);
  }

  .catalog-premium-count{
    border-color: rgba(181, 154, 98, 0.34);
    background: transparent;
    color: var(--cefein-brass-light);
    border-radius: 0.65rem;
  }

.premium-course-card{
    --course-accent: var(--cefein-brass);
    --course-accent-rgb: 181, 154, 98;
    border: 1px solid var(--cefein-line);
    border-radius: 1rem;
    background: var(--cefein-panel);
    box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.88);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  }

  .premium-course-card::before{
    display: none;
  }

  .premium-course-card:hover, .premium-course-card:focus-within{
    transform: translateY(-0.22rem);
    border-color: rgba(var(--course-accent-rgb), 0.72);
    box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.95);
  }

  .premium-course-cover{
    min-height: clamp(12rem, 24vw, 15rem);
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--cefein-line);
    background: #172735;
  }

  .premium-course-cover::after{
    display: none;
  }

  .premium-course-photo{
    filter: saturate(0.62) contrast(1.03) brightness(0.74);
    transform: scale(1.01);
    transition: transform 420ms ease, filter 420ms ease;
  }

  .premium-course-card:hover .premium-course-photo, .premium-course-card:focus-within .premium-course-photo{
    transform: scale(1.035);
    filter: saturate(0.72) contrast(1.04) brightness(0.79);
  }

  .premium-course-image-overlay{
    background:
      linear-gradient(to top, rgba(9, 23, 34, 0.98) 0%, rgba(9, 23, 34, 0.58) 48%, rgba(9, 23, 34, 0.12) 100%),
      linear-gradient(110deg, rgba(var(--course-accent-rgb), 0.16), transparent 62%);
  }

  .premium-course-icon{
    width: 3.2rem;
    border-radius: 0.72rem;
    border-color: rgba(var(--course-accent-rgb), 0.55) !important;
    background: rgba(9, 23, 34, 0.86);
    color: var(--course-accent) !important;
    box-shadow: none !important;
  }

  .premium-course-badge{
    border-radius: 0.55rem;
    letter-spacing: 0.045em;
    font-weight: 750;
  }

  .premium-course-badge--async{
    color: #D7E0E5;
    background: rgba(53, 78, 94, 0.82);
    border-color: rgba(174, 185, 194, 0.28);
  }

  .premium-course-badge--live{
    color: #F0DDD8;
    background: rgba(111, 64, 57, 0.88);
    border-color: rgba(164, 111, 97, 0.56);
  }

  .premium-course-card .relative.z-10.flex.flex-col{
    background: var(--cefein-panel);
  }

  .premium-course-card h3{
    color: #F2F4F5;
    font-weight: 750;
    letter-spacing: -0.012em;
  }

  .premium-course-card p{
    color: var(--cefein-text-soft);
  }

  .premium-course-card .text-\[10px\].font-extrabold{
    color: var(--course-accent) !important;
  }

  .premium-course-status{
    border-color: rgba(174, 185, 194, 0.14);
    background: #132837;
    border-radius: 0.68rem;
  }

  .premium-course-status > i{
    color: var(--course-accent) !important;
  }

  .premium-investment, .premium-course-card .premium-investment{
    border-color: rgba(var(--course-accent-rgb), 0.42);
    border-radius: 0.72rem;
    background: rgba(var(--course-accent-rgb), 0.08);
    color: #E9DFC8;
  }

  .premium-action-button{
    min-height: 2.85rem;
    border-radius: 0.68rem;
    letter-spacing: 0.035em;
    font-weight: 750;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .premium-card-actions .premium-action-button:nth-child(1){
    background: var(--course-accent) !important;
    color: #101820 !important;
    border: 1px solid var(--course-accent) !important;
  }

  .premium-card-actions .premium-action-button:nth-child(1):hover{
    background: #C9B27E !important;
  }

  .premium-card-actions .premium-action-button:nth-child(2){
    background: transparent !important;
    color: #D5DDE2 !important;
    border: 1px solid #506271 !important;
  }

  .premium-card-actions .premium-action-button:nth-child(2):hover{
    background: #243947 !important;
    color: #FFFFFF !important;
  }

  .premium-card-actions .premium-action-button:nth-child(3){
    background: #172C3B !important;
    color: #E9EDF0 !important;
    border: 1px solid #314B5B !important;
  }

  .premium-card-actions .premium-action-button:nth-child(3):hover{
    border-color: var(--course-accent) !important;
    color: var(--course-accent) !important;
  }

  .premium-search-field{
    border-radius: 0.7rem;
    border-color: #3B4E5C;
    background: #102331;
    color: #F2F4F5;
    box-shadow: none;
  }

  .premium-search-field:focus{
    border-color: var(--cefein-brass);
    box-shadow: 0 0 0 3px rgba(181, 154, 98, 0.12);
  }

  .premium-filter-button{
    border-radius: 0.65rem;
    border-color: #3B4E5C;
    background: transparent;
    color: #C5CDD2;
    letter-spacing: 0.035em;
  }

  .premium-filter-button.is-active, .premium-filter-button:hover{
    color: #101820;
    background: var(--cefein-brass);
    border-color: var(--cefein-brass);
  }

  .premium-empty-state{
    border-color: #3B4E5C;
    border-radius: 0.8rem;
    background: #102331;
  }

  @media (max-width: 639px) {
    .catalog-premium-heading{
      align-items: flex-start;
    }

    .premium-course-cover{
      min-height: 12.25rem;
    }
  }


  /* =========================================================
     PORTADA · TRANSICIÓN FANTASMA ULTRAFLUIDA
     La geometría del abanico permanece fija. Al cambiar de
     programa, las tres tarjetas solo se desvanecen brevemente.
     ========================================================= */
  #hero-deck, #hero-deck::before, #hero-deck::after, #deck-card-active, #deck-card-prev, #deck-card-next, #deck-card-active::before, #card-prev-img, #card-next-img{
    animation: none !important;
  }

  #hero-deck::before, #hero-deck::after{
    transition: opacity 180ms ease !important;
  }

  #deck-card-active{
    transition:
      opacity 135ms linear,
      filter 135ms ease,
      box-shadow 220ms ease !important;
  }

  #deck-card-prev, #deck-card-next{
    transition:
      opacity 135ms linear,
      filter 135ms ease !important;
  }

  

  

  

  /* =========================================================
     PESTAÑAS Y CATÁLOGO · PALETA INSTITUCIONAL NEUTRA
     Sin azul intenso ni estados verdes.
     ========================================================= */
  #view-catalogo .catalog-tabs-shell{
    background: #191a19 !important;
    border: 1px solid #454139 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .catalog-tab-button{
    background: transparent !important;
    color: #d8d4cb !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition:
      background-color 160ms ease,
      color 160ms ease,
      border-color 160ms ease !important;
  }

  .catalog-tab-button:hover{
    background: #24231f !important;
    color: #f1e8d5 !important;
  }

  .catalog-tab-button.is-active{
    background: #b59a62 !important;
    color: #111718 !important;
    border-color: #d0bc8c !important;
  }

  .premium-course-badge--async{
    color: #e8e3d9 !important;
    background: #292a27 !important;
    border-color: #5a554b !important;
  }

  .premium-course-badge--live{
    color: #f0ddd8 !important;
    background: #65453f !important;
    border-color: #a46f61 !important;
  }

  .premium-course-status .status-available{
    color: #d0bc8c !important;
  }

  .premium-course-status .status-unavailable{
    color: #c99a8d !important;
  }

  

  


  
  #view-catalogo{
    --cefein-ink: #020C1B;
    --cefein-panel: #0F294A;
    --cefein-panel-soft: #153554;
    --cefein-line: #294968;
    --cefein-brass: #C5A85A;
    --cefein-brass-light: #D9C487;
    --cefein-text-soft: #AEBFD1;
  }

  #view-catalogo > div:first-child{
    background: linear-gradient(180deg, #020C1B 0%, #0F294A 100%) !important;
    border-bottom: 1px solid rgba(197, 168, 90, 0.18) !important;
  }

  #view-catalogo > div:nth-child(2){
    background: #020C1B !important;
  }

  #view-catalogo .catalog-tabs-shell{
    background: rgba(15, 41, 74, 0.92) !important;
    border: 1px solid rgba(94, 132, 170, 0.38) !important;
    box-shadow: 0 16px 40px -28px rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #view-catalogo .catalog-tab-button{
    background: transparent !important;
    color: #C6D3E1 !important;
    border: 1px solid transparent !important;
  }

  #view-catalogo .catalog-tab-button:hover{
    background: rgba(255, 255, 255, 0.055) !important;
    color: #FFFFFF !important;
  }

  #view-catalogo .catalog-tab-button.is-active{
    background: #C5A85A !important;
    color: #071423 !important;
    border-color: #D9C487 !important;
    box-shadow: 0 8px 22px -14px rgba(197, 168, 90, 0.75) !important;
  }

  #view-catalogo .catalog-premium-heading{
    border-bottom-color: rgba(126, 160, 194, 0.2) !important;
  }

  #view-catalogo .catalog-premium-title{
    color: #F4F7FA !important;
  }

  #view-catalogo .catalog-premium-copy{
    color: #AEBFD1 !important;
  }

  #view-catalogo .catalog-premium-count{
    color: #D9C487 !important;
    border-color: rgba(197, 168, 90, 0.38) !important;
    background: rgba(197, 168, 90, 0.06) !important;
  }

  #view-catalogo .premium-course-card{
    --course-accent: #C5A85A;
    --course-accent-rgb: 197, 168, 90;
    background: #0F294A !important;
    border-color: #294968 !important;
    box-shadow: 0 18px 42px -30px rgba(0, 0, 0, 0.92) !important;
  }

  #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    border-color: rgba(197, 168, 90, 0.68) !important;
    box-shadow: 0 26px 58px -34px rgba(0, 0, 0, 0.96) !important;
  }

  #view-catalogo .premium-course-card .relative.z-10.flex.flex-col{
    background: #0F294A !important;
  }

  #view-catalogo .premium-course-cover{
    background: #102E50 !important;
    border-bottom-color: #294968 !important;
  }

  #view-catalogo .premium-course-image-overlay{
    background:
      linear-gradient(to top, rgba(2, 12, 27, 0.98) 0%, rgba(7, 28, 52, 0.66) 48%, rgba(7, 28, 52, 0.12) 100%),
      linear-gradient(110deg, rgba(197, 168, 90, 0.13), transparent 64%) !important;
  }

  #view-catalogo .premium-course-status{
    background: #12304F !important;
    border-color: rgba(126, 160, 194, 0.17) !important;
  }

  #view-catalogo .premium-search-field{
    background: #0E2948 !important;
    border-color: #345878 !important;
    color: #F4F7FA !important;
  }

  #view-catalogo .premium-search-field::placeholder{
    color: #90A5B9 !important;
  }

  #view-catalogo .premium-search-field:focus{
    border-color: #C5A85A !important;
    box-shadow: 0 0 0 3px rgba(197, 168, 90, 0.12) !important;
  }

  #view-catalogo .premium-filter-button{
    background: #0E2948 !important;
    border-color: #345878 !important;
    color: #C6D3E1 !important;
  }

  #view-catalogo .premium-filter-button:hover, #view-catalogo .premium-filter-button.is-active{
    background: #C5A85A !important;
    border-color: #C5A85A !important;
    color: #071423 !important;
  }

  #view-catalogo .premium-course-badge--async{
    color: #D8E5F1 !important;
    background: rgba(36, 76, 112, 0.92) !important;
    border-color: rgba(126, 160, 194, 0.38) !important;
  }

  #view-catalogo .premium-course-badge--live{
    color: #F3E8E4 !important;
    background: rgba(113, 65, 57, 0.92) !important;
    border-color: rgba(180, 119, 104, 0.62) !important;
  }

  #view-catalogo .premium-empty-state{
    background: #0F294A !important;
    border-color: #345878 !important;
  }


  
  .home-section-shell{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #eef3f7;
    background: #071522;
    border-top: 1px solid rgba(197, 168, 90, 0.12);
  }

  .home-section-shell--soft{
    background: #0b1d2c;
  }

  .home-section-inner{
    width: min(100% - 2rem, 80rem);
    margin-inline: auto;
    padding-block: clamp(4rem, 8vw, 7rem);
  }

  .home-section-heading{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }

  .home-section-kicker{
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    color: #d0bc8c;
    font-size: clamp(0.66rem, 1.7vw, 0.76rem);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .home-section-title{
    max-width: 53rem;
    color: #f8fafc;
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.04;
    font-weight: 850;
    letter-spacing: -0.035em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  .home-section-copy{
    max-width: 48rem;
    color: #aebbc5;
    font-size: clamp(0.86rem, 2vw, 1rem);
    line-height: 1.75;
  }

  .home-section-action-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
  }

  .home-round-control{
    display: inline-grid;
    place-items: center;
    width: clamp(2.75rem, 7vw, 3.25rem);
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(208, 188, 140, 0.34);
    background: #102638;
    color: #f4ead2;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
  }

  .home-round-control:hover, .home-round-control:focus-visible{
    transform: translateY(-0.12rem);
    background: #c5a85a;
    color: #071522;
    outline: none;
  }

  /* Carrusel de todos los programas asincrónicos. */
  .home-program-carousel{
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .home-program-carousel::-webkit-scrollbar{
    display: none;
  }

  .home-program-track{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(18.5rem, 31vw, 23.5rem);
    gap: clamp(0.9rem, 2vw, 1.25rem);
    width: max-content;
    padding: 0.2rem 0.15rem 1rem;
  }

  .home-program-card{
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    overflow: hidden;
    scroll-snap-align: start;
    
    border-radius: 1.15rem;
    
    
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }

  .home-program-card:hover, .home-program-card:focus-within{
    transform: translateY(-0.3rem);
    border-color: rgba(197, 168, 90, 0.72);
    box-shadow: 0 30px 64px -42px rgba(0, 0, 0, 0.98);
  }

  .home-program-cover{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #102638;
  }

  .home-program-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.72) contrast(1.04) brightness(0.76);
    transform: scale(1.01);
    transition: transform 420ms ease, filter 420ms ease;
  }

  .home-program-card:hover .home-program-cover img, .home-program-card:focus-within .home-program-cover img{
    transform: scale(1.045);
    filter: saturate(0.82) contrast(1.04) brightness(0.82);
  }

  .home-program-cover::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(7, 21, 34, 0.96), rgba(7, 21, 34, 0.06) 72%);
  }

  .home-program-type{
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    max-width: calc(100% - 1.8rem);
    padding: 0.42rem 0.66rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(7, 21, 34, 0.78);
    color: #f4ead2;
    font-size: 0.62rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    overflow-wrap: anywhere;
  }

  .home-program-body{
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    padding: clamp(1rem, 3vw, 1.35rem);
  }

  .home-program-body h3{
    color: #f7f9fa;
    font-size: clamp(1rem, 2.2vw, 1.18rem);
    line-height: 1.35;
    font-weight: 780;
    overflow-wrap: anywhere;
  }

  .home-program-body p{
    color: #9fadb8;
    font-size: 0.78rem;
    line-height: 1.65;
  }

  .home-program-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #c9d2d8;
    font-size: 0.68rem;
    line-height: 1.4;
  }

  .home-program-meta span{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .home-program-footer{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(174, 185, 194, 0.14);
  }

  .home-program-price{
    color: #d0bc8c;
    font-size: 1.05rem;
    font-weight: 850;
    white-space: nowrap;
  }

  .home-program-button, .home-academic-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 2.65rem;
    height: auto;
    padding: 0.7rem 0.95rem;
    border-radius: 0.7rem;
    border: 1px solid #c5a85a;
    background: #c5a85a;
    color: #071522;
    font-size: 0.68rem;
    line-height: 1.25;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    transition: transform 180ms ease, background-color 180ms ease;
  }

  .home-program-button:hover, .home-academic-button:hover{
    transform: translateY(-0.12rem);
    background: #d0bc8c;
  }

  .home-carousel-counter{
    min-width: 5.5rem;
    color: #b8c3cb;
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
    letter-spacing: 0.06em;
  }

  
  .home-academic-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }

  .home-academic-panel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.85rem;
  }

  .home-academic-card{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    height: auto;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid #2b465b;
    border-radius: 1rem;
    background: #102638;
    transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
  }

  .home-academic-card:hover, .home-academic-card:focus-within{
    transform: translateY(-0.22rem);
    border-color: rgba(197, 168, 90, 0.64);
    background: #132c40;
  }

  .home-academic-icon{
    display: inline-grid;
    place-items: center;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    border: 1px solid rgba(197, 168, 90, 0.34);
    background: #071522;
    color: #d0bc8c;
    font-size: 1.05rem;
  }

  .home-academic-card h3{
    color: #f6f8f9;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 780;
  }

  .home-academic-card p{
    flex: 1;
    color: #9fadb8;
    font-size: 0.77rem;
    line-height: 1.65;
  }

  .home-academic-link{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    color: #d0bc8c;
    font-size: 0.67rem;
    font-weight: 820;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Árbol fotográfico social. */
  .community-tree-stage{
    position: relative;
    width: 100%;
    min-height: clamp(38rem, 62vw, 48rem);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #294257;
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background:
      radial-gradient(circle at 50% 48%, rgba(197, 168, 90, 0.13), transparent 18%),
      radial-gradient(circle at 50% 52%, rgba(24, 61, 88, 0.62), transparent 54%),
      #071522;
  }

  .community-branches{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.58;
  }

  .community-branches line{
    stroke: rgba(197, 168, 90, 0.42);
    stroke-width: 0.35;
    stroke-dasharray: 1.4 1.1;
  }

  .community-tree-center{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: clamp(8rem, 17vw, 11rem);
    aspect-ratio: 1;
    padding: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(208, 188, 140, 0.64);
    background: #102638;
    color: #f4ead2;
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0.7rem rgba(197, 168, 90, 0.05), 0 24px 55px -30px rgba(0,0,0,0.98);
  }

  .community-tree-center i{
    color: #d0bc8c;
    font-size: clamp(1.35rem, 4vw, 2rem);
  }

  .community-tree-center strong{
    display: block;
    margin-top: 0.35rem;
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    line-height: 1.25;
    letter-spacing: 0.05em;
  }

  .community-photo-tree{
    position: absolute;
    inset: 0;
  }

  .community-photo-node{
    position: absolute;
    z-index: 3;
    width: clamp(8.25rem, 17vw, 13rem);
    min-width: 0;
    overflow: hidden;
    border: 1px solid #315069;
    border-radius: 1rem;
    background: #0d2233;
    box-shadow: 0 18px 42px -30px rgba(0,0,0,0.98);
    transform: translate3d(0, 0, 0) rotate(var(--node-rotate, 0deg));
    transition: transform 480ms cubic-bezier(0.16,1,0.3,1), border-color 240ms ease, opacity 240ms ease;
    animation: communityNodeFloat 6.5s ease-in-out infinite;
    animation-delay: var(--node-delay, 0s);
  }

  .community-photo-node.is-active{
    z-index: 7;
    border-color: #d0bc8c;
    transform: translate3d(0, -0.45rem, 0) rotate(0deg) scale(1.07);
  }

  .community-photo-node button{
    display: block;
    width: 100%;
    color: inherit;
    text-align: left;
  }

  .community-photo-node img{
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(0.78) contrast(1.03) brightness(0.82);
  }

  .community-photo-caption{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    color: #dbe3e8;
    font-size: clamp(0.62rem, 1.5vw, 0.72rem);
    line-height: 1.3;
  }

  .community-photo-caption span{
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .community-photo-caption i{
    flex: 0 0 auto;
    color: #d0bc8c;
  }

  .community-photo-node:nth-child(1){ left: 3%; top: 6%; --node-rotate: -4deg; --node-delay: -0.6s; }
  .community-photo-node:nth-child(2){ left: 28%; top: 3%; --node-rotate: 3deg; --node-delay: -1.8s; }
  .community-photo-node:nth-child(3){ right: 28%; top: 3%; --node-rotate: -3deg; --node-delay: -3s; }
  .community-photo-node:nth-child(4){ right: 3%; top: 7%; --node-rotate: 4deg; --node-delay: -4.1s; }
  .community-photo-node:nth-child(5){ left: 3%; bottom: 6%; --node-rotate: 3deg; --node-delay: -2.2s; }
  .community-photo-node:nth-child(6){ left: 28%; bottom: 3%; --node-rotate: -3deg; --node-delay: -5s; }
  .community-photo-node:nth-child(7){ right: 28%; bottom: 3%; --node-rotate: 3deg; --node-delay: -3.7s; }
  .community-photo-node:nth-child(8){ right: 3%; bottom: 6%; --node-rotate: -4deg; --node-delay: -1.1s; }

  @keyframes communityNodeFloat {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -0.42rem; }
  }

  @media (min-width: 900px) {
    .home-section-heading--row{
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }

    .home-academic-layout{
      grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
    }
  }

  @media (max-width: 767px) {
    .home-section-inner{
      width: min(100% - 1.25rem, 80rem);
    }

    .home-program-track{
      grid-auto-columns: min(88vw, 20.5rem);
    }

    .home-program-footer{
      align-items: stretch;
    }

    .home-program-button{
      width: 100%;
    }

    .community-tree-stage{
      display: grid;
      gap: 1rem;
      min-height: 0;
      aspect-ratio: auto;
      padding: 1rem;
      overflow: visible;
    }

    .community-branches{
      display: none;
    }

    .community-tree-center{
      position: relative;
      left: auto;
      top: auto;
      width: min(11rem, 48vw);
      margin-inline: auto;
      transform: none;
    }

    .community-photo-tree{
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .community-photo-node, .community-photo-node:nth-child(n){
      position: relative;
      inset: auto;
      width: 100%;
      transform: none;
      animation-duration: 7.5s;
    }

    .community-photo-node.is-active{
      transform: translateY(-0.2rem) scale(1.015);
    }
  }

  @media (max-width: 399px) {
    .community-photo-tree{
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-program-card, .home-program-cover img, .home-round-control, .home-academic-card, .community-photo-node{
      transition: none !important;
      animation: none !important;
    }

    .home-program-carousel{
      scroll-behavior: auto;
    }
  }


  /* =========================================================
     AJUSTES v13 · PALETA AZUL CONSISTENTE + COLLAGE DINÁMICO
     ========================================================= */
  .home-section-shell, .home-section-shell--soft, #home-async-showcase, #home-academic-showcase, #home-community-showcase{
    background: linear-gradient(180deg, #020C1B 0%, #0F294A 100%) !important;
  }

  .home-section-shell::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% 10%, rgba(197,168,90,0.08), transparent 24%), radial-gradient(circle at 80% 0%, rgba(255,255,255,0.03), transparent 18%);
  }

  

  

  .home-program-cover, .home-academic-icon{
    background: #12304F !important;
  }

  .home-program-cover::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(15,41,74,0.52) 0%, rgba(2,12,27,0.08) 42%, rgba(197,168,90,0.08) 100%);
  }

  .home-program-cover::after{
    z-index: 1;
    background: linear-gradient(to top, rgba(2,12,27,0.98) 0%, rgba(7,28,52,0.72) 48%, rgba(7,28,52,0.14) 100%) !important;
  }

  .home-program-cover img, .community-collage-item img{
    filter: saturate(0.9) contrast(1.03) brightness(0.8) !important;
  }

  .home-program-type{
    z-index: 2;
    border-color: rgba(255, 223, 140, 0.95) !important;
    background: linear-gradient(135deg, #D4AF37 0%, #F7D774 100%) !important;
    color: #071522 !important;
    box-shadow: 0 10px 20px -14px rgba(212,175,55,0.85);
  }

  .home-section-kicker, .home-academic-link, .home-program-price{
    color: #F7D774 !important;
  }

  .home-round-control{
    background: #12304F !important;
    border-color: rgba(247, 215, 116, 0.35) !important;
    color: #FFF7DD !important;
  }

  .home-round-control:hover, .home-round-control:focus-visible, .home-program-button, .home-academic-button{
    background: linear-gradient(135deg, #D4AF37 0%, #F7D774 100%) !important;
    border-color: #F7D774 !important;
    color: #071522 !important;
  }

  .home-program-button:hover, .home-academic-button:hover{
    background: linear-gradient(135deg, #E2BE49 0%, #FFE28D 100%) !important;
  }

  .community-collage-stage{
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 3vw, 1.3rem);
    border-radius: clamp(1.25rem, 3vw, 2rem);
  }

  .community-collage-stage::before, .community-collage-stage::after{
    content: "";
    position: absolute;
    inset: auto;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.18;
  }

  .community-collage-stage::before{
    top: -4rem;
    left: -4rem;
    background: rgba(247, 215, 116, 0.4);
  }

  .community-collage-stage::after{
    right: -5rem;
    bottom: -5rem;
    background: rgba(65, 128, 196, 0.34);
  }

  .community-collage-grid{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: clamp(0.7rem, 2vw, 1rem);
  }

  .community-collage-item{
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #345878;
    aspect-ratio: 4 / 3;
    opacity: 0.5;
    transform: translateY(0.35rem) scale(0.98);
    transition: transform 340ms ease, opacity 340ms ease, border-color 340ms ease, box-shadow 340ms ease;
    animation: communityFadeFlow 8.8s ease-in-out infinite;
    animation-delay: calc(var(--community-index, 0) * -0.7s);
  }

  .community-collage-item.is-highlight{
    opacity: 1;
    transform: translateY(-0.2rem) scale(1.02);
    border-color: rgba(247, 215, 116, 0.92) !important;
    box-shadow: 0 26px 48px -34px rgba(0,0,0,0.95), 0 0 0 1px rgba(247,215,116,0.08) inset;
  }

  .community-collage-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease, filter 420ms ease;
  }

  .community-collage-item.is-highlight img{
    transform: scale(1.05);
    filter: saturate(0.96) brightness(0.86) !important;
  }

  .community-collage-item::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2,12,27,0.92) 0%, rgba(2,12,27,0.18) 54%, rgba(2,12,27,0.04) 100%);
    pointer-events: none;
  }

  .community-collage-item figcaption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    color: #EFF4FA;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .community-collage-item figcaption i{
    color: #F7D774;
    flex: 0 0 auto;
  }

  @keyframes communityFadeFlow {
    0%, 100% { opacity: 0.46; }
    50% { opacity: 0.82; }
  }

  #view-catalogo, #view-catalogo > div:first-child, #view-catalogo > div:nth-child(2){
    background: linear-gradient(180deg, #020C1B 0%, #0F294A 100%) !important;
  }

  #view-catalogo .catalog-tabs-shell, #view-catalogo .premium-course-card, #view-catalogo .premium-course-card .relative.z-10.flex.flex-col, #view-catalogo .premium-course-status, #view-catalogo .premium-search-field, #view-catalogo .premium-filter-button, #view-catalogo .premium-empty-state{
    background: #0F294A !important;
    border-color: #345878 !important;
  }

  #view-catalogo .premium-course-cover{
    background: #12304F !important;
    border-bottom-color: #345878 !important;
  }

  #view-catalogo .premium-course-image-overlay{
    background: linear-gradient(to top, rgba(2,12,27,0.98) 0%, rgba(7,28,52,0.74) 50%, rgba(7,28,52,0.10) 100%), linear-gradient(135deg, rgba(247,215,116,0.14), transparent 64%) !important;
  }

  .premium-course-badge--async, #view-catalogo .premium-course-badge--async{
    color: #071522 !important;
    background: linear-gradient(135deg, #D4AF37 0%, #F7D774 100%) !important;
    border-color: #FFE08B !important;
    box-shadow: 0 10px 24px -18px rgba(212,175,55,0.9);
  }

  .premium-course-badge--live, #view-catalogo .premium-course-badge--live{
    color: #FFF2F0 !important;
    background: linear-gradient(135deg, #D9342B 0%, #FF5A3D 100%) !important;
    border-color: #FF977F !important;
    box-shadow: 0 10px 24px -18px rgba(255,90,61,0.8);
  }

  .premium-course-status .status-available, #view-catalogo .premium-course-status .status-available{
    color: #22C55E !important;
    font-weight: 800;
  }

  .premium-course-status .status-unavailable, #view-catalogo .premium-course-status .status-unavailable{
    color: #EF4444 !important;
    font-weight: 800;
  }

  .premium-course-status i.fa-circle-check, .premium-course-status i.fa-unlock-keyhole, .premium-course-status i.fa-file-circle-check, .premium-course-status i.fa-certificate{
    color: #F7D774;
  }

  #view-catalogo .catalog-tab-button.is-active, #view-catalogo .premium-filter-button:hover, #view-catalogo .premium-filter-button.is-active{
    background: linear-gradient(135deg, #D4AF37 0%, #F7D774 100%) !important;
    border-color: #F7D774 !important;
    color: #071522 !important;
  }

  #view-catalogo .catalog-premium-count, #view-catalogo .premium-search-field:focus{
    box-shadow: 0 0 0 3px rgba(247, 215, 116, 0.12) !important;
  }

  @media (max-width: 640px) {
    .community-collage-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }


  /* =========================================================
     AJUSTES v14 · NUBE DE PALABRAS + PALETA ARMÓNICA
     ========================================================= */
  .community-wordcloud-stage{
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: clamp(30rem, 55vw, 43rem);
    height: auto;
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 3rem);
    border: 1px solid #345878;
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background:
      radial-gradient(circle at 50% 48%, rgba(103, 199, 232, 0.14), transparent 30%),
      radial-gradient(circle at 28% 34%, rgba(231, 199, 106, 0.1), transparent 24%),
      linear-gradient(180deg, #0F294A 0%, #071A2E 100%);
    box-shadow: 0 30px 68px -46px rgba(0, 0, 0, 0.98);
  }

  .community-wordcloud-stage::before{
    content: "";
    position: absolute;
    inset: 7% 5%;
    z-index: 0;
    border-radius: 48%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.035), transparent 72%);
    filter: blur(0.1px);
    pointer-events: none;
  }

  .community-wordcloud-orbit{
    position: absolute;
    z-index: 0;
    width: min(78vw, 52rem);
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    border: 1px solid rgba(103, 199, 232, 0.1);
    pointer-events: none;
    animation: communityOrbit 26s linear infinite;
  }

  .community-wordcloud-orbit--two{
    width: min(62vw, 41rem);
    border-color: rgba(231, 199, 106, 0.1);
    animation-direction: reverse;
    animation-duration: 34s;
    transform: rotate(17deg);
  }

  .community-wordcloud{
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0.9vw, 0.75rem) clamp(0.55rem, 1.5vw, 1.35rem);
    width: min(100%, 68rem);
    min-height: clamp(24rem, 45vw, 35rem);
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.2rem);
    transform-origin: center;
    animation: communityCloudBreath 18s ease-in-out infinite alternate;
  }

  .community-word{
    --word-scale: calc(0.75 + (var(--word-weight) * 0.08));
    display: inline-block;
    max-width: 100%;
    padding: 0.05em 0.12em;
    color: #DCE9F5;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(
      calc(0.72rem + (var(--word-weight) * 0.045rem)),
      calc(0.55rem + (var(--word-weight) * 0.42vw)),
      calc(0.95rem + (var(--word-weight) * 0.32rem))
    );
    line-height: 1.04;
    font-weight: calc(520 + (var(--word-weight) * 55));
    letter-spacing: -0.035em;
    white-space: nowrap;
    opacity: 0.48;
    transform: translate3d(0, 0, 0) rotate(var(--word-tilt)) scale(0.96);
    text-shadow: 0 10px 28px rgba(0,0,0,0.38);
    transition: color 500ms ease, opacity 500ms ease, transform 500ms ease, text-shadow 500ms ease;
    animation: communityWordFloat var(--word-duration) ease-in-out var(--word-delay) infinite;
  }

  .community-word--tone-0{ color: #E7C76A; }
  .community-word--tone-1{ color: #67C7E8; }
  .community-word--tone-2{ color: #E8F2FA; }
  .community-word--tone-3{ color: #A9B8FF; }
  .community-word--tone-4{ color: #75D7C5; }

  .community-word.is-highlight{
    opacity: 1;
    transform: translate3d(0, -0.08em, 0) rotate(0deg) scale(1.09);
    text-shadow: 0 0 18px currentColor, 0 14px 32px rgba(0,0,0,0.46);
  }

  @keyframes communityWordFloat {
    0%, 100% {
      opacity: 0.42;
      transform: translate3d(-0.12em, 0.12em, 0) rotate(var(--word-tilt)) scale(0.96);
    }
    45% {
      opacity: 0.78;
      transform: translate3d(0.12em, -0.16em, 0) rotate(calc(var(--word-tilt) * -0.35)) scale(1.025);
    }
    72% {
      opacity: 0.58;
      transform: translate3d(0.04em, 0.06em, 0) rotate(var(--word-tilt)) scale(0.99);
    }
  }

  @keyframes communityCloudBreath {
    0% { transform: translate3d(-0.45%, 0, 0) scale(0.985); }
    100% { transform: translate3d(0.45%, -0.3%, 0) scale(1.012); }
  }

  @keyframes communityOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Paleta de programas compatible con azul CEFEIN. */
  #view-catalogo .premium-course-card{
    background:
      radial-gradient(circle at 100% 0%, rgba(var(--course-accent-rgb), 0.14), transparent 35%),
      linear-gradient(155deg, #123354 0%, #0F294A 48%, #071A2E 100%) !important;
    border-color: rgba(var(--course-accent-rgb), 0.38) !important;
  }

  #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    border-color: rgba(var(--course-accent-rgb), 0.78) !important;
    box-shadow: 0 28px 64px -40px rgba(var(--course-accent-rgb), 0.52), 0 24px 48px -34px rgba(0,0,0,0.96) !important;
  }

  #view-catalogo .premium-course-card .relative.z-10.flex.flex-col{
    background: transparent !important;
  }

  .premium-course-badge--async, #view-catalogo .premium-course-badge--async{
    color: #071522 !important;
    background: linear-gradient(135deg, #DDBD62 0%, #F0D58C 100%) !important;
    border-color: rgba(255, 232, 165, 0.92) !important;
    box-shadow: 0 10px 24px -18px rgba(221, 189, 98, 0.75) !important;
  }

  .premium-course-badge--live, #view-catalogo .premium-course-badge--live{
    color: #041522 !important;
    background: linear-gradient(135deg, #65C7F2 0%, #8EA8FF 100%) !important;
    border-color: rgba(196, 226, 255, 0.9) !important;
    box-shadow: 0 10px 24px -18px rgba(101, 199, 242, 0.75) !important;
  }

  .premium-course-status .status-available, #view-catalogo .premium-course-status .status-available{
    color: #75D7C5 !important;
    font-weight: 800;
  }

  .premium-course-status .status-unavailable, #view-catalogo .premium-course-status .status-unavailable{
    color: #AEBFD1 !important;
    font-weight: 750;
  }

  #view-catalogo .premium-course-status > i{
    color: var(--course-accent) !important;
  }

  #view-catalogo .premium-investment, #view-catalogo .premium-course-card .premium-investment{
    color: #F3E5B8 !important;
    border-color: rgba(var(--course-accent-rgb), 0.48) !important;
    background: rgba(var(--course-accent-rgb), 0.09) !important;
  }

  #view-catalogo .premium-card-actions .premium-action-button:nth-child(1){
    background: var(--course-accent) !important;
    border-color: var(--course-accent) !important;
    color: #061521 !important;
  }

  #view-catalogo .premium-card-actions .premium-action-button:nth-child(1):hover{
    filter: brightness(1.08);
  }

  #view-catalogo .premium-card-actions .premium-action-button:nth-child(2){
    color: #C9D9E8 !important;
    border-color: #456888 !important;
    background: rgba(18, 48, 79, 0.75) !important;
  }

  #view-catalogo .premium-card-actions .premium-action-button:nth-child(3){
    color: #E8F2FA !important;
    border-color: rgba(var(--course-accent-rgb), 0.42) !important;
    background: rgba(var(--course-accent-rgb), 0.08) !important;
  }

  .home-program-type{
    color: #041522 !important;
    background: linear-gradient(135deg, #65C7F2 0%, #A9B8FF 100%) !important;
    border-color: rgba(213, 235, 255, 0.92) !important;
    box-shadow: 0 10px 22px -16px rgba(101, 199, 242, 0.72) !important;
  }

  .home-program-meta i{
    color: #75D7C5 !important;
  }

  @media (max-width: 640px) {
    .community-wordcloud-stage{
      min-height: 35rem;
      padding: 1rem;
    }

    .community-wordcloud{
      gap: 0.35rem 0.65rem;
      padding: 0.7rem;
    }

    .community-word{
      white-space: normal;
      text-align: center;
      overflow-wrap: anywhere;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .community-wordcloud, .community-wordcloud-orbit, .community-word{
      animation: none !important;
      transition: none !important;
    }
  }


  /* =========================================================
     AJUSTES v15 · MARQUEE HORIZONTAL + COLORES POR TIPO
     ========================================================= */
  .community-wordcloud-stage{
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0.25rem 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .community-wordcloud-stage::before, .community-wordcloud-orbit{
    display: none !important;
  }

  .community-wordcloud{
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0.6rem !important;
    animation: none !important;
  }

  .community-word-lane{
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }

  .community-word-lane-track{
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    width: max-content;
    white-space: nowrap;
    padding-inline: 0.15rem;
    will-change: transform;
    animation: communityLaneDrive var(--lane-duration, 20s) linear infinite;
  }

  .community-word-lane.is-reverse .community-word-lane-track{
    animation-name: communityLaneDriveReverse;
  }

  .community-word{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.85rem !important;
    border-radius: 999px;
    border: 1px solid rgba(90, 127, 163, 0.3);
    background: rgba(15, 41, 74, 0.78);
    opacity: 0.82 !important;
    transform: none !important;
    text-shadow: none !important;
    animation: communityWordPulse var(--word-duration, 6s) ease-in-out var(--word-delay, 0s) infinite !important;
    box-shadow: 0 10px 24px -18px rgba(0,0,0,0.78);
  }

  .community-word.is-highlight{
    opacity: 1 !important;
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 0 0 1px currentColor inset, 0 0 18px color-mix(in srgb, currentColor 40%, transparent), 0 12px 26px -18px rgba(0,0,0,0.82);
  }

  @keyframes communityLaneDrive {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  @keyframes communityLaneDriveReverse {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }

  @keyframes communityWordPulse {
    0%, 100% { filter: brightness(0.98); }
    50% { filter: brightness(1.12); }
  }

  @media (max-width: 640px) {
    .community-word{ padding: 0.33rem 0.72rem !important; }
  }

  .course-type-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.58rem;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
  }

  .course-type-label{
    display: inline-block;
    font-size: 0.64rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .home-program-type--diplomado, .course-type-chip--diplomado{
    background: linear-gradient(135deg, #B91C1C 0%, #EF4444 100%) !important;
    color: #FFF4F4 !important;
    border-color: rgba(254, 202, 202, 0.68) !important;
  }
  .course-type-label--diplomado{ color: #F87171 !important; }

  .home-program-type--curso, .course-type-chip--curso{
    background: linear-gradient(135deg, #0F8A4B 0%, #22C55E 100%) !important;
    color: #F2FFF7 !important;
    border-color: rgba(187, 247, 208, 0.72) !important;
  }
  .course-type-label--curso{ color: #4ADE80 !important; }

  .home-program-type--programa, .course-type-chip--programa{
    background: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%) !important;
    color: #EFF6FF !important;
    border-color: rgba(191, 219, 254, 0.74) !important;
  }
  .course-type-label--programa{ color: #60A5FA !important; }

  .home-program-type--taller, .course-type-chip--taller{
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important;
    color: #FFF8EB !important;
    border-color: rgba(253, 230, 138, 0.76) !important;
  }
  .course-type-label--taller{ color: #FBBF24 !important; }

  .home-program-type--formativo, .course-type-chip--formativo{
    background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%) !important;
    color: #F5F3FF !important;
    border-color: rgba(221, 214, 254, 0.74) !important;
  }
  .course-type-label--formativo{ color: #A78BFA !important; }

  .home-program-card.course-type-theme--diplomado, #view-catalogo .premium-course-card.course-type-theme--diplomado{
    --course-accent: #EF4444 !important;
    --course-accent-rgb: 239, 68, 68 !important;
  }
  .home-program-card.course-type-theme--curso, #view-catalogo .premium-course-card.course-type-theme--curso{
    --course-accent: #22C55E !important;
    --course-accent-rgb: 34, 197, 94 !important;
  }
  .home-program-card.course-type-theme--programa, #view-catalogo .premium-course-card.course-type-theme--programa{
    --course-accent: #3B82F6 !important;
    --course-accent-rgb: 59, 130, 246 !important;
  }
  .home-program-card.course-type-theme--taller, #view-catalogo .premium-course-card.course-type-theme--taller{
    --course-accent: #F59E0B !important;
    --course-accent-rgb: 245, 158, 11 !important;
  }
  .home-program-card.course-type-theme--formativo, #view-catalogo .premium-course-card.course-type-theme--formativo{
    --course-accent: #8B5CF6 !important;
    --course-accent-rgb: 139, 92, 246 !important;
  }

  

  .home-program-card:hover, .home-program-card:focus-within{
    border-color: rgba(var(--course-accent-rgb, 197,168,90), 0.7) !important;
    box-shadow: 0 28px 64px -40px rgba(var(--course-accent-rgb, 197,168,90), 0.45), 0 22px 42px -28px rgba(0,0,0,0.95) !important;
  }


  /* =========================================================
     AJUSTES v16 · COMUNIDAD + TARJETAS CROMÁTICAS ARMÓNICAS
     ========================================================= */
  #home-community-showcase .home-section-inner{
    padding-block: clamp(1.8rem, 4vw, 3rem) !important;
  }

  #home-community-showcase .community-wordcloud-stage{
    margin-top: 0 !important;
  }

  .community-wordcloud{
    gap: 0.72rem !important;
  }

  /* Tarjetas coloreadas por tipo, con texto blanco y mejor armonía visual */
  .home-program-card, #view-catalogo .premium-course-card{
    color: #ffffff !important;
  }

  .home-program-card .home-program-body, #view-catalogo .premium-course-card .relative.z-10.flex.flex-col{
    color: #ffffff !important;
  }

  .home-program-card h3, .home-program-card p, .home-program-card .home-program-price, .home-program-card .home-program-meta, .home-program-card .home-section-kicker, .home-program-card .home-program-body *, #view-catalogo .premium-course-card h3, #view-catalogo .premium-course-card p, #view-catalogo .premium-course-card .premium-investment, #view-catalogo .premium-course-card .premium-investment *, #view-catalogo .premium-course-card .premium-course-status span, #view-catalogo .premium-course-card .premium-course-status-list, #view-catalogo .premium-course-card .text-slate-400, #view-catalogo .premium-course-card .text-slate-300, #view-catalogo .premium-course-card .text-xs, #view-catalogo .premium-course-card .text-base, #view-catalogo .premium-course-card .text-lg{
    color: #ffffff !important;
  }

  .home-program-card .home-section-kicker, .home-program-card .home-program-meta, .home-program-card .home-program-body p, #view-catalogo .premium-course-card .premium-course-status span.text-xs, #view-catalogo .premium-course-card p.text-xs, #view-catalogo .premium-course-card .premium-investment span{
    color: rgba(255,255,255,0.88) !important;
  }

  .home-program-card .home-program-footer, #view-catalogo .premium-course-card .premium-course-status, #view-catalogo .premium-course-card .premium-investment{
    border-color: rgba(255,255,255,0.16) !important;
  }

  #view-catalogo .premium-course-card .premium-course-status{
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #view-catalogo .premium-course-card .premium-investment{
    background: rgba(255,255,255,0.09) !important;
  }

  .home-program-card .home-program-button, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:first-child{
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home-program-card .home-program-button:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:first-child:hover{
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2), #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3){
    background: rgba(0,0,0,0.16) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2):hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3):hover{
    background: rgba(255,255,255,0.16) !important;
  }

  

  

  

  

  

  .home-program-card:hover, .home-program-card:focus-within, #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    transform: translateY(-0.28rem) !important;
    box-shadow: 0 28px 60px -34px rgba(0,0,0,0.45), 0 12px 28px -18px rgba(0,0,0,0.28) !important;
  }

  .home-program-card .home-program-cover::after, #view-catalogo .premium-course-image-overlay{
    background: linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.26) 45%, rgba(0,0,0,0.08) 100%) !important;
  }

  .home-program-card .home-program-cover, #view-catalogo .premium-course-cover{
    background: transparent !important;
  }

  .home-program-card .home-program-cover img, #view-catalogo .premium-course-photo{
    filter: saturate(0.95) contrast(1.02) brightness(0.82) !important;
  }

  .home-program-card .home-program-type, #view-catalogo .premium-course-card .course-type-chip{
    box-shadow: 0 10px 24px -18px rgba(0,0,0,0.38) !important;
  }

  .premium-course-status .status-available, #view-catalogo .premium-course-status .status-available{
    color: #dcfce7 !important;
  }

  .premium-course-status .status-unavailable, #view-catalogo .premium-course-status .status-unavailable{
    color: #fee2e2 !important;
  }


  /* =========================================================
     AJUSTES v17 · PALETA PREMIUM SUAVE Y ARMÓNICA
     ========================================================= */
  :root{
    --cefein-diplomado-1: #6E3140;
    --cefein-diplomado-2: #8B4356;
    --cefein-diplomado-chip: #915064;

    --cefein-curso-1: #1F5A56;
    --cefein-curso-2: #2D736D;
    --cefein-curso-chip: #3A7F78;

    --cefein-programa-1: #26496E;
    --cefein-programa-2: #3A658F;
    --cefein-programa-chip: #4776A6;

    --cefein-taller-1: #7A5A36;
    --cefein-taller-2: #9A7547;
    --cefein-taller-chip: #A88355;

    --cefein-formativo-1: #54456F;
    --cefein-formativo-2: #6F5D90;
    --cefein-formativo-chip: #7E6AA0;
  }

  /* Chips/etiquetas por tipo: tonos suaves, elegantes y legibles */
  .home-program-type--diplomado, .course-type-chip--diplomado{
    background: linear-gradient(135deg, var(--cefein-diplomado-1) 0%, var(--cefein-diplomado-chip) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.20) !important;
  }
  .course-type-label--diplomado{ color: #F2D9E0 !important; }

  .home-program-type--curso, .course-type-chip--curso{
    background: linear-gradient(135deg, var(--cefein-curso-1) 0%, var(--cefein-curso-chip) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.20) !important;
  }
  .course-type-label--curso{ color: #D8F1ED !important; }

  .home-program-type--programa, .course-type-chip--programa{
    background: linear-gradient(135deg, var(--cefein-programa-1) 0%, var(--cefein-programa-chip) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.20) !important;
  }
  .course-type-label--programa{ color: #DDEAFE !important; }

  .home-program-type--taller, .course-type-chip--taller{
    background: linear-gradient(135deg, var(--cefein-taller-1) 0%, var(--cefein-taller-chip) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.20) !important;
  }
  .course-type-label--taller{ color: #F4E5D2 !important; }

  .home-program-type--formativo, .course-type-chip--formativo{
    background: linear-gradient(135deg, var(--cefein-formativo-1) 0%, var(--cefein-formativo-chip) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.20) !important;
  }
  .course-type-label--formativo{ color: #E7DEF6 !important; }

  /* Tarjetas del carrusel y del catálogo con fondos premium por tipo */
  

  

  

  

  

  /* Acentos refinados para hover */
  .home-program-card:hover, .home-program-card:focus-within, #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    box-shadow: 0 26px 56px -32px rgba(0,0,0,0.36), 0 16px 34px -22px rgba(0,0,0,0.22) !important;
    border-color: rgba(255,255,255,0.18) !important;
  }

  /* Mejor integración del texto blanco */
  .home-program-card .home-section-kicker, .home-program-card .home-program-meta, .home-program-card .home-program-body p, #view-catalogo .premium-course-card .premium-course-status span.text-xs, #view-catalogo .premium-course-card p.text-xs, #view-catalogo .premium-course-card .premium-investment span{
    color: rgba(255,255,255,0.84) !important;
  }

  #view-catalogo .premium-course-card .premium-course-status{
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.14) !important;
  }

  #view-catalogo .premium-course-card .premium-investment{
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.16) !important;
  }

  /* Estados menos chillosos, más premium */
  .premium-course-status .status-available, #view-catalogo .premium-course-status .status-available{
    color: #DDF4EC !important;
    font-weight: 800;
  }

  .premium-course-status .status-unavailable, #view-catalogo .premium-course-status .status-unavailable{
    color: #F5E1E6 !important;
    font-weight: 780;
  }

  /* Botones con vidrio suave para no competir con el fondo */
  .home-program-card .home-program-button, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:first-child, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2), #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3){
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
  }

  .home-program-card .home-program-button:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:first-child:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2):hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3):hover{
    background: rgba(255,255,255,0.18) !important;
  }


  /* =========================================================
     AJUSTES v18 · COLORES VIVOS CON DEGRADADO
     ========================================================= */
  :root{
    --cefein-diplomado-1: #B61F4A;
    --cefein-diplomado-2: #E94B7A;
    --cefein-diplomado-3: #FF7AA2;

    --cefein-curso-1: #0D9E6E;
    --cefein-curso-2: #1FCB8E;
    --cefein-curso-3: #5BE6B2;

    --cefein-programa-1: #2563EB;
    --cefein-programa-2: #3B82F6;
    --cefein-programa-3: #60A5FA;

    --cefein-taller-1: #D97706;
    --cefein-taller-2: #F59E0B;
    --cefein-taller-3: #FBBF24;

    --cefein-formativo-1: #7C3AED;
    --cefein-formativo-2: #9F57FF;
    --cefein-formativo-3: #B983FF;
  }

  .home-program-type--diplomado, .course-type-chip--diplomado{
    background: linear-gradient(135deg, var(--cefein-diplomado-1) 0%, var(--cefein-diplomado-2) 55%, var(--cefein-diplomado-3) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.24) !important;
  }
  .course-type-label--diplomado{ color: #FFD8E4 !important; }

  .home-program-type--curso, .course-type-chip--curso{
    background: linear-gradient(135deg, var(--cefein-curso-1) 0%, var(--cefein-curso-2) 55%, var(--cefein-curso-3) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.22) !important;
  }
  .course-type-label--curso{ color: #D5FFF0 !important; }

  .home-program-type--programa, .course-type-chip--programa{
    background: linear-gradient(135deg, var(--cefein-programa-1) 0%, var(--cefein-programa-2) 55%, var(--cefein-programa-3) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.22) !important;
  }
  .course-type-label--programa{ color: #DCEBFF !important; }

  .home-program-type--taller, .course-type-chip--taller{
    background: linear-gradient(135deg, var(--cefein-taller-1) 0%, var(--cefein-taller-2) 55%, var(--cefein-taller-3) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.22) !important;
  }
  .course-type-label--taller{ color: #FFF0CD !important; }

  .home-program-type--formativo, .course-type-chip--formativo{
    background: linear-gradient(135deg, var(--cefein-formativo-1) 0%, var(--cefein-formativo-2) 55%, var(--cefein-formativo-3) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.22) !important;
  }
  .course-type-label--formativo{ color: #EFE3FF !important; }

  

  

  

  

  

  .home-program-card:hover, .home-program-card:focus-within, #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    box-shadow: 0 28px 64px -34px rgba(0,0,0,0.34), 0 18px 36px -20px rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.22) !important;
  }

  .home-program-card .home-program-cover::after, #view-catalogo .premium-course-image-overlay{
    background: linear-gradient(to top, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.20) 46%, rgba(0,0,0,0.05) 100%) !important;
  }

  .home-program-card .home-program-cover img, #view-catalogo .premium-course-photo{
    filter: saturate(1.02) contrast(1.03) brightness(0.86) !important;
  }

  .home-program-card .home-program-button, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:first-child, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2), #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3){
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
  }

  .home-program-card .home-program-button:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:first-child:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2):hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3):hover{
    background: rgba(255,255,255,0.21) !important;
  }

  #view-catalogo .premium-course-card .premium-course-status{
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }

  #view-catalogo .premium-course-card .premium-investment{
    background: rgba(255,255,255,0.11) !important;
    border-color: rgba(255,255,255,0.16) !important;
  }

  .premium-course-status .status-available, #view-catalogo .premium-course-status .status-available{
    color: #ECFFF6 !important;
  }

  .premium-course-status .status-unavailable, #view-catalogo .premium-course-status .status-unavailable{
    color: #FFF1F4 !important;
  }


  /* =========================================================
     AJUSTES v19 · DEGRADADOS NEGRO + AZUL OSCURO
     Paleta premium coherente con el fondo institucional CEFEIN.
     ========================================================= */
  :root{
    --type-diplomado-start: #02050B;
    --type-diplomado-mid: #0A1830;
    --type-diplomado-end: #234C7A;
    --type-diplomado-accent: #6FA8DC;

    --type-curso-start: #020609;
    --type-curso-mid: #09202D;
    --type-curso-end: #15516A;
    --type-curso-accent: #69B7D0;

    --type-programa-start: #02050A;
    --type-programa-mid: #0B1A36;
    --type-programa-end: #285A96;
    --type-programa-accent: #78AEEF;

    --type-taller-start: #030609;
    --type-taller-mid: #142333;
    --type-taller-end: #385A78;
    --type-taller-accent: #91B2D0;

    --type-formativo-start: #03040A;
    --type-formativo-mid: #15172F;
    --type-formativo-end: #3C4780;
    --type-formativo-accent: #9BA8E8;
  }

  /* Tarjetas: negro profundo hacia azul oscuro. */
  .home-program-card.course-type-theme--diplomado, #view-catalogo .premium-course-card.course-type-theme--diplomado{
    --course-accent: var(--type-diplomado-accent) !important;
    --course-accent-rgb: 111, 168, 220 !important;
    
  }

  .home-program-card.course-type-theme--curso, #view-catalogo .premium-course-card.course-type-theme--curso{
    --course-accent: var(--type-curso-accent) !important;
    --course-accent-rgb: 105, 183, 208 !important;
    
  }

  .home-program-card.course-type-theme--programa, #view-catalogo .premium-course-card.course-type-theme--programa{
    --course-accent: var(--type-programa-accent) !important;
    --course-accent-rgb: 120, 174, 239 !important;
    
  }

  .home-program-card.course-type-theme--taller, #view-catalogo .premium-course-card.course-type-theme--taller{
    --course-accent: var(--type-taller-accent) !important;
    --course-accent-rgb: 145, 178, 208 !important;
    
  }

  .home-program-card.course-type-theme--formativo, #view-catalogo .premium-course-card.course-type-theme--formativo{
    --course-accent: var(--type-formativo-accent) !important;
    --course-accent-rgb: 155, 168, 232 !important;
    
  }

  /* Etiquetas por tipo: todas en familia azul oscura, con diferencias sutiles. */
  .home-program-type, .course-type-chip{
    color: #F7FAFF !important;
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow: 0 12px 26px -18px rgba(0,0,0,0.9) !important;
  }

  .home-program-type--diplomado, .course-type-chip--diplomado{
    background: linear-gradient(135deg, #0A1425 0%, #285A8B 100%) !important;
  }

  .home-program-type--curso, .course-type-chip--curso{
    background: linear-gradient(135deg, #081923 0%, #196079 100%) !important;
  }

  .home-program-type--programa, .course-type-chip--programa{
    background: linear-gradient(135deg, #0A1630 0%, #326BB0 100%) !important;
  }

  .home-program-type--taller, .course-type-chip--taller{
    background: linear-gradient(135deg, #111B26 0%, #496A88 100%) !important;
  }

  .home-program-type--formativo, .course-type-chip--formativo{
    background: linear-gradient(135deg, #101329 0%, #4B5891 100%) !important;
  }

  .course-type-label--diplomado{ color: #AFCDEA !important; }
  .course-type-label--curso{ color: #A9D6E4 !important; }
  .course-type-label--programa{ color: #B9D4FA !important; }
  .course-type-label--taller{ color: #C4D7E8 !important; }
  .course-type-label--formativo{ color: #CBD2FA !important; }

  /* Superficies internas coherentes con el degradado oscuro. */
  #view-catalogo .premium-course-card .relative.z-10.flex.flex-col{
    background: transparent !important;
  }

  #view-catalogo .premium-course-card .premium-course-status, #view-catalogo .premium-course-card .premium-investment{
    background: linear-gradient(135deg, rgba(0,0,0,0.26), rgba(255,255,255,0.07)) !important;
    border-color: rgba(255,255,255,0.14) !important;
  }

  .home-program-card .home-program-footer{
    border-top-color: rgba(255,255,255,0.15) !important;
  }

  .home-program-card .home-program-button, #view-catalogo .premium-course-card .premium-action-button{
    background: linear-gradient(135deg, rgba(0,0,0,0.34), rgba(54,101,148,0.38)) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
  }

  .home-program-card .home-program-button:hover, #view-catalogo .premium-course-card .premium-action-button:hover{
    background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(86,145,201,0.52)) !important;
    border-color: rgba(255,255,255,0.3) !important;
  }

  .home-program-card:hover, .home-program-card:focus-within, #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    border-color: rgba(var(--course-accent-rgb), 0.58) !important;
    box-shadow:
      0 30px 66px -38px rgba(0,0,0,0.86),
      0 0 34px -22px rgba(var(--course-accent-rgb), 0.58) !important;
  }

  .home-program-card .home-program-cover::after, #view-catalogo .premium-course-image-overlay{
    background:
      linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(3,13,27,0.46) 48%, rgba(3,13,27,0.08) 100%),
      linear-gradient(120deg, rgba(var(--course-accent-rgb),0.18), transparent 64%) !important;
  }

  .home-program-card .home-program-cover img, #view-catalogo .premium-course-photo{
    filter: saturate(0.9) contrast(1.04) brightness(0.78) !important;
  }

  .home-program-card:hover .home-program-cover img, #view-catalogo .premium-course-card:hover .premium-course-photo, #view-catalogo .premium-course-card:focus-within .premium-course-photo{
    filter: saturate(1.02) contrast(1.05) brightness(0.88) !important;
  }


  /* =========================================================
     AJUSTES v20 · SOLO ETIQUETAS EN COLORES ENTEROS VIVOS
     Las tarjetas conservan el degradado negro + azul oscuro.
     ========================================================= */
  .home-program-type, .course-type-chip, .course-type-label, .premium-course-badge{
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    box-shadow: 0 10px 22px -14px rgba(0,0,0,0.72) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  }

  /* Diplomado · rojo vivo */
  .home-program-type--diplomado, .course-type-chip--diplomado, .course-type-label--diplomado{
    background: #E11D48 !important;
    color: #FFFFFF !important;
  }

  /* Curso · verde vivo */
  .home-program-type--curso, .course-type-chip--curso, .course-type-label--curso{
    background: #10B981 !important;
    color: #FFFFFF !important;
  }

  /* Programa / evento · azul vivo */
  .home-program-type--programa, .course-type-chip--programa, .course-type-label--programa{
    background: #2563EB !important;
    color: #FFFFFF !important;
  }

  /* Taller · naranja vivo */
  .home-program-type--taller, .course-type-chip--taller, .course-type-label--taller{
    background: #EA580C !important;
    color: #FFFFFF !important;
  }

  /* Formativo · violeta vivo */
  .home-program-type--formativo, .course-type-chip--formativo, .course-type-label--formativo{
    background: #8B5CF6 !important;
    color: #FFFFFF !important;
  }

  /* El texto de tipo dentro de la tarjeta ahora funciona como insignia. */
  .course-type-label{
    width: fit-content;
    max-width: 100%;
    padding: 0.38rem 0.64rem;
    border-radius: 0.55rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  /* Modalidad: colores enteros para diferenciar de inmediato. */
  .premium-course-badge--live, #view-catalogo .premium-course-badge--live{
    background: #F43F5E !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.30) !important;
  }

  .premium-course-badge--async, #view-catalogo .premium-course-badge--async{
    background: #0284C7 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.28) !important;
  }

  .home-program-type:hover, .course-type-chip:hover, .course-type-label:hover, .premium-course-badge:hover{
    filter: brightness(1.08) saturate(1.08);
  }


  /* =========================================================
     AJUSTE v21 · EN VIVO / MUY PRONTO EN ROJO TRANSPARENTE
     ========================================================= */
  .premium-course-badge--live, #view-catalogo .premium-course-badge--live{
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.76) 0%, rgba(190, 24, 93, 0.66) 100%) !important;
    color: #FFF7F8 !important;
    border: 1px solid rgba(251, 113, 133, 0.62) !important;
    box-shadow: 0 10px 26px -16px rgba(190, 24, 93, 0.72), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  }

  .premium-course-badge--live i, #view-catalogo .premium-course-badge--live i{
    color: #FDA4AF !important;
  }


  /* =========================================================
     AJUSTE v22 · TARJETAS GLASS PREMIUM
     Degradado negro/azul translúcido, brillo interior y profundidad.
     ========================================================= */
  .home-program-card, #view-catalogo .premium-course-card{
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background:
      radial-gradient(circle at 92% 4%, rgba(var(--course-accent-rgb, 120, 174, 239), 0.24) 0%, transparent 36%),
      linear-gradient(145deg, rgba(12, 33, 58, 0.82) 0%, rgba(5, 18, 34, 0.74) 50%, rgba(0, 4, 11, 0.88) 100%) !important;
    backdrop-filter: blur(24px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
    box-shadow:
      0 30px 72px -42px rgba(0, 0, 0, 0.96),
      0 18px 38px -30px rgba(var(--course-accent-rgb, 120, 174, 239), 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 -1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  /* Cristal superior: luz suave diagonal sin tapar el contenido. */
  .home-program-card::before, #view-catalogo .premium-course-card::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit;
    background:
      linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.035) 18%, transparent 42%),
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.10), transparent 28%) !important;
    opacity: 0.82;
    transform: none !important;
  }

  /* Borde luminoso interior para el acabado de vidrio. */
  .home-program-card::after, #view-catalogo .premium-course-card::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      inset 0 18px 30px -28px rgba(255, 255, 255, 0.28),
      inset 0 -30px 46px -38px rgba(0, 0, 0, 0.88);
  }

  .home-program-card > *, #view-catalogo .premium-course-card > *{
    position: relative;
    z-index: 1;
  }

  /* Mantener una base azul oscura común y usar el tipo solo como resplandor. */
  

  .home-program-cover, #view-catalogo .premium-course-cover{
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(3, 15, 29, 0.52) !important;
  }

  .home-program-cover::after, #view-catalogo .premium-course-image-overlay{
    background:
      linear-gradient(to top, rgba(0, 4, 12, 0.94) 0%, rgba(4, 18, 35, 0.54) 48%, rgba(4, 18, 35, 0.10) 100%),
      linear-gradient(125deg, rgba(var(--course-accent-rgb), 0.22), transparent 62%) !important;
  }

  .home-program-cover img, #view-catalogo .premium-course-photo{
    filter: saturate(0.96) contrast(1.06) brightness(0.80) !important;
  }

  .home-program-card:hover .home-program-cover img, #view-catalogo .premium-course-card:hover .premium-course-photo, #view-catalogo .premium-course-card:focus-within .premium-course-photo{
    filter: saturate(1.08) contrast(1.07) brightness(0.91) !important;
  }

  .home-program-body, #view-catalogo .premium-course-card .relative.z-10.flex.flex-col{
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012)) !important;
  }

  .home-program-card h3, #view-catalogo .premium-course-card h3{
    color: #FFFFFF !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
  }

  .home-program-card p, .home-program-card .home-program-meta, #view-catalogo .premium-course-card p, #view-catalogo .premium-course-card .premium-course-status span.text-xs{
    color: rgba(235, 243, 251, 0.88) !important;
  }

  #view-catalogo .premium-course-status, #view-catalogo .premium-course-card .premium-investment{
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(15px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 24px -22px rgba(0, 0, 0, 0.88) !important;
  }

  .home-program-footer{
    border-top-color: rgba(255, 255, 255, 0.14) !important;
  }

  .home-program-button, #view-catalogo .premium-course-card .premium-action-button{
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(77, 137, 196, 0.19)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(14px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 14px 28px -22px rgba(0, 0, 0, 0.88) !important;
  }

  .home-program-button:hover, #view-catalogo .premium-course-card .premium-action-button:hover{
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.23), rgba(89, 158, 224, 0.30)) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    color: #FFFFFF !important;
  }

  .home-program-card:hover, .home-program-card:focus-within, #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    transform: translateY(-0.42rem) scale(1.008) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow:
      0 38px 88px -46px rgba(0, 0, 0, 0.98),
      0 22px 48px -32px rgba(var(--course-accent-rgb), 0.64),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-program-card, #view-catalogo .premium-course-card{
      background:
        radial-gradient(circle at 94% 2%, rgba(var(--course-accent-rgb), 0.20), transparent 40%),
        linear-gradient(145deg, #102B49 0%, #07182C 50%, #01050C 100%) !important;
    }
  }

  @media (max-width: 640px) {
    .home-program-card, #view-catalogo .premium-course-card{
      backdrop-filter: blur(18px) saturate(1.25) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-program-card, #view-catalogo .premium-course-card, .home-program-cover img, #view-catalogo .premium-course-photo{
      transition: none !important;
    }
  }


  /* =========================================================
     AJUSTES v23 · CONTROLES SÓLIDOS PREMIUM POR TIPO
     Sin degradados en inversión, estados y botones.
     ========================================================= */
  #view-catalogo .premium-course-card{
    --type-main: #3478C5;
    --type-deep: #1F4775;
    --type-mid: #285D96;
    --type-alt: #3F6FA5;
    --type-line: #6EA2D8;
    --type-soft-text: #EAF4FF;
  }

  #view-catalogo .premium-course-card.course-type-theme--diplomado{
    --type-main: #B63E61;
    --type-deep: #5C2034;
    --type-mid: #7E2D47;
    --type-alt: #963852;
    --type-line: #D77A94;
    --type-soft-text: #FFF0F5;
  }

  #view-catalogo .premium-course-card.course-type-theme--curso{
    --type-main: #20936D;
    --type-deep: #145541;
    --type-mid: #1B7156;
    --type-alt: #278263;
    --type-line: #62B99A;
    --type-soft-text: #EDFFF8;
  }

  #view-catalogo .premium-course-card.course-type-theme--programa{
    --type-main: #3478C5;
    --type-deep: #1F4775;
    --type-mid: #285D96;
    --type-alt: #3F6FA5;
    --type-line: #6EA2D8;
    --type-soft-text: #EAF4FF;
  }

  #view-catalogo .premium-course-card.course-type-theme--taller{
    --type-main: #C9822C;
    --type-deep: #66441D;
    --type-mid: #8C5B24;
    --type-alt: #A96D27;
    --type-line: #E0AA69;
    --type-soft-text: #FFF7E8;
  }

  #view-catalogo .premium-course-card.course-type-theme--formativo{
    --type-main: #8359B8;
    --type-deep: #463060;
    --type-mid: #624582;
    --type-alt: #75509E;
    --type-line: #AB89D1;
    --type-soft-text: #F7F0FF;
  }

  /* Caja de inversión/preinscripción: color sólido y jerarquía clara. */
  #view-catalogo .premium-course-card .premium-investment{
    background: var(--type-deep) !important;
    border: 1px solid var(--type-line) !important;
    color: #FFFFFF !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 14px 28px -22px rgba(0,0,0,0.90) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #view-catalogo .premium-course-card .premium-investment span, #view-catalogo .premium-course-card .premium-investment strong{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card .premium-investment span{
    opacity: 0.86;
  }

  /* Estados internos con un tono sólido más discreto del mismo tipo. */
  #view-catalogo .premium-course-card .premium-course-status{
    background: var(--type-deep) !important;
    border: 1px solid color-mix(in srgb, var(--type-line) 72%, transparent) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #view-catalogo .premium-course-card .premium-course-status > i, #view-catalogo .premium-course-card .premium-course-status span, #view-catalogo .premium-course-card .premium-course-status .status-available, #view-catalogo .premium-course-card .premium-course-status .status-unavailable{
    color: var(--type-soft-text) !important;
  }

  /* Botones sólidos: cada uno conserva función y profundidad visual. */
  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button{
    border: 1px solid rgba(255,255,255,0.20) !important;
    color: #FFFFFF !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 12px 24px -20px rgba(0,0,0,0.88) !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(1){
    background-color: var(--type-main) !important;
    border-color: var(--type-line) !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2){
    background-color: var(--type-mid) !important;
    border-color: color-mix(in srgb, var(--type-line) 82%, transparent) !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3){
    background-color: var(--type-alt) !important;
    border-color: color-mix(in srgb, var(--type-line) 82%, transparent) !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:focus-visible{
    filter: brightness(1.10) saturate(1.04);
    transform: translateY(-0.12rem) !important;
    border-color: rgba(255,255,255,0.42) !important;
    color: #FFFFFF !important;
    outline: none;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:active{
    filter: brightness(0.96);
    transform: translateY(0) !important;
  }

  /* Fallback para navegadores sin color-mix. */
  @supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    #view-catalogo .premium-course-card .premium-course-status, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(2), #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:nth-child(3){
      border-color: rgba(255,255,255,0.22) !important;
    }
  }


  /* =========================================================
     AJUSTES v24 · COLOR SOLO AL SELECCIONAR + HEADER RESPONSIVE
     ========================================================= */
  #site-header nav::-webkit-scrollbar{
    display: none;
  }

  #site-header nav{
    scrollbar-width: none;
  }

  @media (min-width: 768px) and (max-width: 1279px) {
    #site-header .nav-link{
      flex: 0 0 auto;
      padding: 0.48rem 0.58rem !important;
      font-size: 0.6rem !important;
      letter-spacing: 0.035em !important;
    }

    #site-header img[alt="CEFEIN"]{
      max-width: 8rem !important;
    }
  }

  /* Estado normal: controles oscuros, elegantes y neutros. */
  #view-catalogo .premium-course-card .premium-investment, #view-catalogo .premium-course-card .premium-course-status, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button{
    background-color: rgba(13, 28, 48, 0.88) !important;
    background-image: none !important;
    border-color: rgba(148, 174, 205, 0.24) !important;
    color: #FFFFFF !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 12px 26px -22px rgba(0,0,0,0.94) !important;
  }

  #view-catalogo .premium-course-card .premium-investment *, #view-catalogo .premium-course-card .premium-course-status *, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card{
    cursor: pointer;
  }

  #view-catalogo .premium-course-card button, #view-catalogo .premium-course-card a{
    cursor: pointer;
  }

  /* Colores enteros por categoría, aplicados únicamente al hacer clic. */
  #view-catalogo .premium-course-card.course-type-theme--diplomado{
    --selected-solid: #DC2626;
    --selected-border: #FCA5A5;
    --selected-text: #FFFFFF;
    --selected-glow: 220, 38, 38;
  }

  #view-catalogo .premium-course-card.course-type-theme--curso{
    --selected-solid: #16A34A;
    --selected-border: #86EFAC;
    --selected-text: #FFFFFF;
    --selected-glow: 22, 163, 74;
  }

  #view-catalogo .premium-course-card.course-type-theme--programa{
    --selected-solid: #2563EB;
    --selected-border: #93C5FD;
    --selected-text: #FFFFFF;
    --selected-glow: 37, 99, 235;
  }

  #view-catalogo .premium-course-card.course-type-theme--taller{
    --selected-solid: #FACC15;
    --selected-border: #FEF08A;
    --selected-text: #172033;
    --selected-glow: 250, 204, 21;
  }

  #view-catalogo .premium-course-card.course-type-theme--formativo{
    --selected-solid: #9333EA;
    --selected-border: #D8B4FE;
    --selected-text: #FFFFFF;
    --selected-glow: 147, 51, 234;
  }

  #view-catalogo .premium-course-card.is-selected{
    border-color: var(--selected-border) !important;
    box-shadow:
      0 0 0 1px rgba(var(--selected-glow), 0.24),
      0 24px 58px -32px rgba(var(--selected-glow), 0.62),
      0 22px 44px -30px rgba(0,0,0,0.96) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-investment, #view-catalogo .premium-course-card.is-selected .premium-course-status, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button{
    background-color: var(--selected-solid) !important;
    background-image: none !important;
    border-color: var(--selected-border) !important;
    color: var(--selected-text) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      0 14px 30px -22px rgba(var(--selected-glow), 0.88) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-investment *, #view-catalogo .premium-course-card.is-selected .premium-course-status *, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button *{
    color: var(--selected-text) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button:hover, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button:focus-visible{
    filter: brightness(1.08) saturate(1.05);
    border-color: #FFFFFF !important;
  }

  @media (max-width: 767px) {
    #site-header nav, #site-header .nav-link{
      display: none !important;
    }
  }


  /* =========================================================
     AJUSTES v25 · COLORES ACTIVOS VIVOS + CABECERA LIMPIA
     ========================================================= */
  #view-catalogo .premium-course-card.course-type-theme--diplomado{
    --selected-solid: #FF1744;
    --selected-border: #FF8AA4;
    --selected-text: #FFFFFF;
    --selected-glow: 255, 23, 68;
  }

  #view-catalogo .premium-course-card.course-type-theme--curso{
    --selected-solid: #00C853;
    --selected-border: #7CFFAE;
    --selected-text: #FFFFFF;
    --selected-glow: 0, 200, 83;
  }

  #view-catalogo .premium-course-card.course-type-theme--programa{
    --selected-solid: #2979FF;
    --selected-border: #8AB4FF;
    --selected-text: #FFFFFF;
    --selected-glow: 41, 121, 255;
  }

  #view-catalogo .premium-course-card.course-type-theme--taller{
    --selected-solid: #FFD600;
    --selected-border: #FFF48A;
    --selected-text: #171A22;
    --selected-glow: 255, 214, 0;
  }

  #view-catalogo .premium-course-card.course-type-theme--formativo{
    --selected-solid: #AA00FF;
    --selected-border: #D98AFF;
    --selected-text: #FFFFFF;
    --selected-glow: 170, 0, 255;
  }

  #view-catalogo .premium-course-card.is-selected{
    border-color: var(--selected-border) !important;
    box-shadow:
      0 0 0 1px rgba(var(--selected-glow), 0.36),
      0 0 24px rgba(var(--selected-glow), 0.22),
      0 28px 64px -30px rgba(var(--selected-glow), 0.78),
      0 22px 44px -30px rgba(0,0,0,0.96) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-investment, #view-catalogo .premium-course-card.is-selected .premium-course-status, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button:nth-child(3){
    background: var(--selected-solid) !important;
    background-image: none !important;
    border-color: var(--selected-border) !important;
    color: var(--selected-text) !important;
    opacity: 1 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      0 16px 34px -20px rgba(var(--selected-glow), 0.92) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-investment *, #view-catalogo .premium-course-card.is-selected .premium-course-status *, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button *{
    color: var(--selected-text) !important;
  }

  #site-header .header-enroll-button{
    flex: 0 0 auto;
  }

  @media (max-width: 767px) {
    #site-header .header-enroll-button, #site-header nav, #site-header .nav-link{
      display: none !important;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    #site-header .header-enroll-button{
      padding-inline: 0.72rem !important;
      letter-spacing: 0.035em !important;
    }
  }


  /* =========================================================
     AJUSTES v26 · PESTAÑAS SIEMPRE CENTRADAS
     ========================================================= */
  @media (min-width: 768px) {
    #site-header #header-main-row{
      display: grid !important;
      grid-template-columns: minmax(7rem, 1fr) auto minmax(7rem, 1fr);
      align-items: center;
      column-gap: clamp(0.45rem, 1.4vw, 1.15rem);
      width: 100%;
    }

    #site-header #header-desktop-logo{
      display: flex !important;
      justify-self: start;
      min-width: 0;
      max-width: 100%;
    }

    #site-header #header-main-nav{
      display: flex !important;
      justify-self: center;
      justify-content: center !important;
      align-items: center;
      width: max-content;
      max-width: min(100%, 42rem);
      margin: 0 !important;
      overflow: visible !important;
      white-space: nowrap;
    }

    #site-header #header-desktop-actions{
      display: flex !important;
      justify-self: end;
      min-width: 0;
      max-width: 100%;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    #site-header #header-main-row{
      grid-template-columns: minmax(6.4rem, 1fr) auto minmax(6.4rem, 1fr);
      column-gap: 0.45rem;
    }

    #site-header #header-main-nav{
      gap: 0.16rem !important;
    }

    #site-header #header-main-nav .nav-link{
      padding-inline: clamp(0.42rem, 0.82vw, 0.62rem) !important;
      font-size: clamp(0.52rem, 0.78vw, 0.61rem) !important;
      letter-spacing: 0.025em !important;
    }

    #site-header #header-desktop-logo img{
      width: clamp(6.8rem, 12vw, 8rem) !important;
      max-width: 100% !important;
    }

    #site-header #header-desktop-actions .header-enroll-button{
      padding-inline: clamp(0.58rem, 1vw, 0.8rem) !important;
      font-size: clamp(0.54rem, 0.75vw, 0.62rem) !important;
    }
  }

  @media (min-width: 1280px) {
    #site-header #header-main-nav{
      gap: 0.35rem !important;
    }
  }


  /* =========================================================
     AJUSTES v27 · BOTONES ACTIVOS MÁS BRILLANTES
     Los colores aparecen únicamente al seleccionar la tarjeta.
     ========================================================= */
  #view-catalogo .premium-course-card{
    --action-program-bg: var(--selected-solid, #2979FF);
    --action-program-border: var(--selected-border, #8AB4FF);
    --action-program-text: var(--selected-text, #FFFFFF);
  }

  /* Estado seleccionado: cada acción conserva una función cromática clara. */
  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(1){
    background-color: var(--action-program-bg) !important;
    background-image: none !important;
    border-color: var(--action-program-border) !important;
    color: var(--action-program-text) !important;
    opacity: 1 !important;
    filter: brightness(1.16) saturate(1.16);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.36),
      0 0 0 1px rgba(var(--selected-glow),0.22),
      0 0 22px rgba(var(--selected-glow),0.30),
      0 16px 34px -18px rgba(var(--selected-glow),0.92) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(1), #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(1) *{
    color: var(--action-program-text) !important;
  }

  /* Aula virtual: rojo brillante sólido. */
  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(2){
    background-color: #E11D48 !important;
    background-image: none !important;
    border-color: #FF8FA8 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.34),
      0 0 0 1px rgba(255,23,68,0.20),
      0 0 22px rgba(255,23,68,0.34),
      0 16px 34px -18px rgba(255,23,68,0.92) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(2), #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(2) *{
    color: #FFFFFF !important;
  }

  /* Inscribirse: dorado brillante sólido con texto oscuro. */
  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(3){
    background-color: #FFD400 !important;
    background-image: none !important;
    border-color: #FFF09A !important;
    color: #101827 !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.54),
      0 0 0 1px rgba(255,212,0,0.24),
      0 0 24px rgba(255,212,0,0.34),
      0 16px 34px -18px rgba(255,212,0,0.94) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(3), #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(3) *{
    color: #101827 !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:hover, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:focus-visible{
    transform: translateY(-0.14rem) scale(1.015);
    filter: brightness(1.10) saturate(1.08) !important;
    border-color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(3):hover, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .premium-action-button:nth-child(3):focus-visible{
    color: #101827 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    #view-catalogo .premium-course-card.is-selected
    .premium-card-actions .premium-action-button{
      transform: none !important;
    }
  }


  /* =========================================================
     AJUSTES v28 · BOTONES ACTIVOS CON COLORES EXACTOS
     ========================================================= */
  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-view-program{
    background: var(--selected-solid, #2979FF) !important;
    border-color: color-mix(in srgb, var(--selected-solid, #2979FF) 72%, white) !important;
    color: var(--selected-text, #FFFFFF) !important;
    opacity: 1 !important;
    filter: brightness(1.28) saturate(1.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.44),
      0 0 0 1px rgba(var(--selected-glow),0.28),
      0 0 26px rgba(var(--selected-glow),0.42),
      0 18px 38px -18px rgba(var(--selected-glow),0.98) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-view-program, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-view-program *{
    color: var(--selected-text, #FFFFFF) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-virtual-classroom{
    background: #FF003D !important;
    border-color: #FF6B8D !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: brightness(1.08) saturate(1.20) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.40),
      0 0 0 1px rgba(255,0,61,0.26),
      0 0 28px rgba(255,0,61,0.48),
      0 18px 38px -18px rgba(255,0,61,0.98) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-virtual-classroom, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-virtual-classroom *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-enroll-course{
    background: #FFD21A !important;
    border-color: #FFF1A3 !important;
    color: #071522 !important;
    opacity: 1 !important;
    filter: brightness(1.08) saturate(1.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.62),
      0 0 0 1px rgba(255,210,26,0.28),
      0 0 30px rgba(255,210,26,0.46),
      0 18px 38px -18px rgba(255,210,26,0.98) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-enroll-course, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-enroll-course *{
    color: #071522 !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-view-program:hover, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-virtual-classroom:hover, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-enroll-course:hover, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-view-program:focus-visible, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-virtual-classroom:focus-visible, #view-catalogo .premium-course-card.is-selected
  .premium-card-actions .action-enroll-course:focus-visible{
    transform: translateY(-0.16rem) scale(1.018) !important;
    border-color: #FFFFFF !important;
  }


  /* =========================================================
     AJUSTES v29 · CORRECCIÓN DEFINITIVA DE COLORES ACTIVOS
     Mayor especificidad que las reglas heredadas.
     ========================================================= */
  #view-catalogo .premium-course-card{
    cursor: pointer;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-view-program:nth-child(1){
    background-color: var(--selected-solid, #2979FF) !important;
    background-image: none !important;
    border-color: var(--selected-border, #8AB4FF) !important;
    color: var(--selected-text, #FFFFFF) !important;
    opacity: 1 !important;
    filter: brightness(1.34) saturate(1.38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.48),
      0 0 0 1px rgba(var(--selected-glow),0.28),
      0 0 28px rgba(var(--selected-glow),0.48),
      0 18px 40px -18px rgba(var(--selected-glow),1) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-view-program:nth-child(1), #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-view-program:nth-child(1) *{
    color: var(--selected-text, #FFFFFF) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-virtual-classroom:nth-child(2){
    background-color: #FF003D !important;
    background-image: none !important;
    border-color: #FF8AA5 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: brightness(1.12) saturate(1.30) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.46),
      0 0 0 1px rgba(255,0,61,0.30),
      0 0 30px rgba(255,0,61,0.56),
      0 18px 40px -18px rgba(255,0,61,1) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-virtual-classroom:nth-child(2), #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-virtual-classroom:nth-child(2) *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-enroll-course:nth-child(3){
    background-color: #FFD21A !important;
    background-image: none !important;
    border-color: #FFF3A8 !important;
    color: #071522 !important;
    opacity: 1 !important;
    filter: brightness(1.12) saturate(1.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.68),
      0 0 0 1px rgba(255,210,26,0.32),
      0 0 32px rgba(255,210,26,0.58),
      0 18px 40px -18px rgba(255,210,26,1) !important;
  }

  #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-enroll-course:nth-child(3), #view-catalogo .premium-course-card.is-selected
  .premium-card-actions > .premium-action-button.action-enroll-course:nth-child(3) *{
    color: #071522 !important;
  }


  /* =========================================================
     AJUSTES v30 · COLORES REALES APLICADOS POR JAVASCRIPT
     El estilo inline con !important evita herencias antiguas.
     ========================================================= */
  #view-catalogo .premium-course-card.is-selected .premium-card-actions{
    isolation: isolate;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button{
    mix-blend-mode: normal !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }


  /* =========================================================
     AJUSTES v32 · BOTONES SELECCIONADOS VIVOS Y VISIBLES
     ========================================================= */
  #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button{
    opacity: 1 !important;
    filter: brightness(1.16) saturate(1.28) !important;
  }

  #view-catalogo .premium-course-card.is-selected.course-type-theme--diplomado .action-view-program{
    background: #E11D48 !important;
    border-color: #FDA4AF !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px #FDA4AF, 0 0 24px rgba(225,29,72,.72), 0 16px 34px -18px rgba(225,29,72,.72) !important;
  }
  #view-catalogo .premium-course-card.is-selected.course-type-theme--curso .action-view-program{
    background: #00C853 !important;
    border-color: #9AE6B4 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px #9AE6B4, 0 0 24px rgba(0,200,83,.72), 0 16px 34px -18px rgba(0,200,83,.72) !important;
  }
  #view-catalogo .premium-course-card.is-selected.course-type-theme--programa .action-view-program{
    background: #2979FF !important;
    border-color: #93C5FD !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px #93C5FD, 0 0 24px rgba(41,121,255,.72), 0 16px 34px -18px rgba(41,121,255,.72) !important;
  }
  #view-catalogo .premium-course-card.is-selected.course-type-theme--taller .action-view-program{
    background: #FFC400 !important;
    border-color: #FDE68A !important;
    color: #1F1500 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px #FDE68A, 0 0 24px rgba(255,196,0,.78), 0 16px 34px -18px rgba(255,196,0,.78) !important;
  }
  #view-catalogo .premium-course-card.is-selected.course-type-theme--formativo .action-view-program{
    background: #7C3AED !important;
    border-color: #C4B5FD !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px #C4B5FD, 0 0 24px rgba(124,58,237,.72), 0 16px 34px -18px rgba(124,58,237,.72) !important;
  }

  #view-catalogo .premium-course-card.is-selected .action-virtual-classroom{
    background: #E11D48 !important;
    border-color: #FDA4AF !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 0 1px #FDA4AF, 0 0 24px rgba(225,29,72,.78), 0 16px 34px -18px rgba(225,29,72,.78) !important;
  }

  #view-catalogo .premium-course-card.is-selected .action-enroll-course{
    background: #FFD400 !important;
    border-color: #FFF0A0 !important;
    color: #071522 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 0 0 1px #FFF0A0, 0 0 24px rgba(255,212,0,.82), 0 16px 34px -18px rgba(255,212,0,.82) !important;
  }


  /* Marca institucional en lugar de la numeración 01, 02, etc. */
  #card-active-num{
    flex: 0 0 auto;
    max-width: 48%;
    font-size: clamp(0.92rem, 2.4vw, 1.35rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.12em;
    white-space: nowrap;
    text-align: right;
  }


  /* =========================================================
     AJUSTES v37 · FORMACIÓN ASINCRÓNICA TOTALMENTE ADAPTATIVA
     Jerarquía fluida y espaciado vertical controlado.
     ========================================================= */
  #home-async-showcase .home-section-inner{
    width: min(calc(100% - clamp(1rem, 4vw, 2.5rem)), 84rem);
    padding-block: clamp(2.75rem, 7vw, 6.25rem);
  }

  #home-async-showcase .home-section-heading{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: clamp(1.35rem, 3vw, 2.25rem);
    margin-bottom: clamp(1.65rem, 4vw, 2.8rem);
  }

  #home-async-showcase .home-async-copy-block{
    display: grid;
    min-width: 0;
    max-width: 58rem;
  }

  #home-async-showcase .home-section-kicker{
    margin: 0 0 clamp(0.7rem, 1.6vw, 1rem);
    font-size: clamp(0.64rem, 1.25vw, 0.76rem);
    line-height: 1.35;
    letter-spacing: clamp(0.075em, 0.18vw, 0.11em);
  }

  #home-async-showcase .home-section-title{
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.78rem, 5vw, 3.75rem);
    line-height: clamp(1.06, 1.08, 1.12);
    letter-spacing: clamp(-0.035em, -0.2vw, -0.018em);
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  #home-async-showcase .home-section-copy{
    max-width: 48rem;
    margin: clamp(0.85rem, 2vw, 1.2rem) 0 0;
    font-size: clamp(0.88rem, 1.7vw, 1rem);
    line-height: 1.72;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }

  #home-async-showcase .home-section-action-row{
    justify-self: start;
    align-self: end;
    max-width: 100%;
    gap: clamp(0.55rem, 1.5vw, 0.8rem);
  }

  #home-async-showcase .home-carousel-counter{
    min-width: clamp(4.6rem, 13vw, 5.6rem);
    font-variant-numeric: tabular-nums;
  }

  #home-async-showcase .home-program-carousel{
    min-width: 0;
    max-width: 100%;
  }

  #home-async-showcase .home-program-track{
    grid-auto-columns: clamp(18rem, 31vw, 23.5rem);
  }

  @media (min-width: 54rem) {
    #home-async-showcase .home-section-heading{
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: clamp(1.5rem, 4vw, 4rem);
    }

    #home-async-showcase .home-section-action-row{
      justify-self: end;
      padding-bottom: 0.15rem;
    }
  }

  @media (max-width: 47.99rem) {
    #home-async-showcase .home-section-inner{
      width: min(calc(100% - clamp(1rem, 5vw, 1.5rem)), 84rem);
      padding-block: clamp(2.4rem, 10vw, 4rem);
    }

    #home-async-showcase .home-section-heading{
      gap: 1.2rem;
      margin-bottom: clamp(1.4rem, 6vw, 2rem);
    }

    #home-async-showcase .home-section-action-row{
      width: 100%;
      justify-content: flex-start;
    }

    #home-async-showcase .home-program-track{
      grid-auto-columns: min(88vw, 20.5rem);
    }
  }

  @media (max-width: 23rem) {
    #home-async-showcase .home-section-title{
      font-size: clamp(1.6rem, 9vw, 1.9rem);
      line-height: 1.12;
    }

    #home-async-showcase .home-section-copy{
      font-size: 0.86rem;
      line-height: 1.65;
    }

    #home-async-showcase .home-round-control{
      width: 2.55rem;
    }

    #home-async-showcase .home-carousel-counter{
      min-width: 4.25rem;
      font-size: 0.68rem;
    }
  }

  @media (min-width: 100rem) {
    #home-async-showcase .home-section-inner{
      width: min(calc(100% - 5rem), 90rem);
    }

    #home-async-showcase .home-section-copy{
      max-width: 52rem;
    }
  }


  /* =========================================================
     AJUSTES v38 · PORTADA ESTÁTICA Y TÁCTIL EN CELULAR
     Una sola tarjeta normal, sin abanico, tilt ni fundidos.
     ========================================================= */
  @media (max-width: 767px) {
    #hero-stage{
      min-height: 0 !important;
      justify-content: flex-start !important;
    }

    #hero-deck{
      display: block !important;
      width: min(100%, 25rem) !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: auto !important;
      perspective: none !important;
      transform: none !important;
      transform-style: flat !important;
      isolation: auto !important;
      touch-action: pan-y !important;
    }

    #hero-deck::before, #hero-deck::after, #deck-card-prev, #deck-card-next{
      display: none !important;
    }

    #deck-card-active{
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: clamp(28rem, 142vw, 34rem) !important;
      aspect-ratio: auto !important;
      transform: none !important;
      transform-style: flat !important;
      transition: none !important;
      animation: none !important;
      filter: none !important;
      cursor: default !important;
      touch-action: pan-y !important;
      will-change: auto !important;
    }

    #deck-card-active::before, #deck-card-active::after{
      animation: none !important;
      transition: none !important;
    }

    #deck-card-active:hover, #hero-deck:hover #deck-card-active, #hero-deck.fan-next #deck-card-active, #hero-deck.fan-prev #deck-card-active{
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }

    #card-active-img, #card-active-hud, #deck-card-active > .relative.z-10{
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }

    #hero-controls{
      margin-top: clamp(1rem, 4vw, 1.4rem) !important;
    }

    #hero-controls > button{
      touch-action: manipulation;
    }
  }


  /* =========================================================
     AJUSTES v39 · REDES, WHATSAPP, AÑO Y BOTONES DEL CATÁLOGO
     ========================================================= */
  .header-social-menu{
    position: relative;
    flex: 0 0 auto;
  }

  .header-social-menu > summary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-width: 2.45rem;
    min-height: 2.45rem;
    padding: 0.55rem 0.72rem;
    border: 1px solid rgba(197,168,90,0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    color: #F3E8C7;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .header-social-menu > summary::-webkit-details-marker{ display: none; }

  .header-social-menu > summary:hover, .header-social-menu[open] > summary{
    transform: translateY(-0.08rem);
    border-color: rgba(197,168,90,0.62);
    background: rgba(197,168,90,0.12);
  }

  .header-social-popover{
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(4, minmax(2.55rem, 1fr));
    gap: 0.5rem;
    min-width: 13rem;
    padding: 0.7rem;
    border: 1px solid rgba(197,168,90,0.24);
    border-radius: 1rem;
    background: rgba(2,12,27,0.96);
    box-shadow: 0 24px 58px -30px rgba(0,0,0,0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .header-social-popover a, .mobile-social-links a, .footer-social-links a, .hero-social-links a{
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 0.78rem;
    background: rgba(255,255,255,0.055);
    color: #EAF2FA;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }

  .header-social-popover a:hover, .mobile-social-links a:hover, .footer-social-links a:hover, .hero-social-links a:hover{
    transform: translateY(-0.12rem);
    border-color: rgba(197,168,90,0.68);
    background: rgba(197,168,90,0.13);
    color: #F7D774;
  }

  .mobile-social-links, .footer-social-links, .hero-social-links{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }

  .mobile-social-links{
    padding: 0.55rem 0.25rem 0.15rem;
  }

  .footer-social-links{
    margin-top: 0.9rem;
  }

  .hero-social-links{
    justify-content: flex-end;
  }

  .hero-social-links a{
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 50%;
  }

  .whatsapp-widget{
    position: fixed;
    right: clamp(0.75rem, 2vw, 1.4rem);
    bottom: clamp(0.75rem, 2vw, 1.4rem);
    z-index: 120;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    max-width: calc(100vw - 1.5rem);
  }

  .whatsapp-fab{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.3rem;
    height: auto;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    background: #18B96E;
    color: #FFFFFF;
    font-size: clamp(0.72rem, 2vw, 0.82rem);
    font-weight: 850;
    letter-spacing: 0.025em;
    box-shadow: 0 18px 42px -22px rgba(24,185,110,0.92), inset 0 1px 0 rgba(255,255,255,0.24);
    transition: transform 180ms ease, background-color 180ms ease;
  }

  .whatsapp-fab:hover, .whatsapp-fab:focus-visible{
    transform: translateY(-0.15rem) scale(1.015);
    background: #10A760;
    outline: none;
  }

  .whatsapp-fab i{ font-size: 1.35rem; }

  .whatsapp-panel{
    width: min(22rem, calc(100vw - 1.5rem));
    min-width: 0;
    max-height: min(75vh, 32rem);
    overflow-y: auto;
    padding: clamp(1rem, 3vw, 1.25rem);
    border: 1px solid rgba(126,239,177,0.28);
    border-radius: 1.25rem;
    background: rgba(4,22,35,0.97);
    color: #FFFFFF;
    box-shadow: 0 30px 70px -34px rgba(0,0,0,0.98), 0 18px 42px -28px rgba(24,185,110,0.68);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }

  .whatsapp-panel.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .whatsapp-panel-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .whatsapp-eyebrow{
    display: block;
    color: #7EEBB2;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .whatsapp-panel h3{
    margin-top: 0.28rem;
    color: #FFFFFF;
    font-size: clamp(1rem, 4vw, 1.22rem);
    line-height: 1.25;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .whatsapp-panel > p{
    margin-top: 0.7rem;
    color: #BBD0DF;
    font-size: 0.76rem;
    line-height: 1.55;
  }

  .whatsapp-close{
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    background: rgba(255,255,255,0.055);
    color: #E7EEF5;
  }

  .whatsapp-options{
    display: grid;
    gap: 0.58rem;
    margin-top: 1rem;
  }

  .whatsapp-option{
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 0.68rem;
    min-width: 0;
    min-height: 3rem;
    height: auto;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(126,239,177,0.20);
    border-radius: 0.85rem;
    background: rgba(24,185,110,0.09);
    color: #F3FFF8;
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 760;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  .whatsapp-option:hover, .whatsapp-option:focus-visible{
    transform: translateX(0.16rem);
    border-color: rgba(126,239,177,0.55);
    background: rgba(24,185,110,0.17);
    outline: none;
  }

  .whatsapp-option i{
    color: #62E69D;
    font-size: 1.1rem;
  }

  /* Colores finales del catálogo: se activan al seleccionar la tarjeta. */
  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-view-program *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-view-program{
    background: #E11D48 !important;
    border-color: #FDA4AF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 22px rgba(225,29,72,.60) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom{
    background: #00C853 !important;
    border-color: #86EFAC !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 22px rgba(0,200,83,.52) !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-enroll-course, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-enroll-course *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-enroll-course{
    background: #0B2A55 !important;
    border-color: #3B82F6 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 22px rgba(37,99,235,.42) !important;
  }

  @media (max-width: 767px) {
    .whatsapp-fab span{ display: none; }
    .whatsapp-fab{
      width: 3.35rem;
      min-width: 3.35rem;
      padding-inline: 0;
      border-radius: 50%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header-social-popover a, .mobile-social-links a, .footer-social-links a, .hero-social-links a, .whatsapp-fab, .whatsapp-panel, .whatsapp-option{
      transition: none !important;
    }
  }


  /* =========================================================
     AJUSTES v40 · BOTONES TRANSPARENTES CON SOMBRA PREMIUM
     Sin rojo, verde ni azul sólido en las acciones del catálogo.
     ========================================================= */
  #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card .premium-card-actions > .action-enroll-course{
    background: rgba(255, 255, 255, 0.065) !important;
    background-color: rgba(255, 255, 255, 0.065) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: blur(16px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -1px 0 rgba(255,255,255,0.035),
      0 14px 30px -22px rgba(0,0,0,0.94) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.38);
  }

  #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button *, #view-catalogo .premium-course-card .premium-card-actions > .action-view-program *, #view-catalogo .premium-course-card .premium-card-actions > .action-virtual-classroom *, #view-catalogo .premium-course-card .premium-card-actions > .action-enroll-course *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card.is-selected .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-enroll-course{
    background: rgba(255, 255, 255, 0.105) !important;
    background-color: rgba(255, 255, 255, 0.105) !important;
    background-image: none !important;
    border-color: rgba(255,255,255,0.34) !important;
    color: #FFFFFF !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(255,255,255,0.055),
      0 0 0 1px rgba(120,174,239,0.07),
      0 18px 38px -22px rgba(0,0,0,0.96),
      0 0 28px rgba(120,174,239,0.15) !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button:hover, #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button:focus-visible, #view-catalogo .premium-course-card .premium-card-actions > .action-view-program:hover, #view-catalogo .premium-course-card .premium-card-actions > .action-virtual-classroom:hover, #view-catalogo .premium-course-card .premium-card-actions > .action-enroll-course:hover{
    background: rgba(255,255,255,0.145) !important;
    background-color: rgba(255,255,255,0.145) !important;
    border-color: rgba(255,255,255,0.46) !important;
    color: #FFFFFF !important;
    filter: none !important;
    transform: translateY(-0.14rem) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      0 20px 40px -22px rgba(0,0,0,0.98),
      0 0 30px rgba(120,174,239,0.18) !important;
    outline: none;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button{
      background: rgba(19,45,75,0.92) !important;
    }
  }


  /* =========================================================
     AJUSTES v41 · BOTONES GLASS AZUL OSCURO
     ========================================================= */
  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button, #view-catalogo .premium-course-card .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card .premium-card-actions > .action-enroll-course, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-enroll-course{
    background: rgba(7, 26, 54, 0.82) !important;
    background-color: rgba(7, 26, 54, 0.82) !important;
    background-image: none !important;
    border-color: rgba(103, 148, 201, 0.34) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.03), 0 16px 32px -22px rgba(0,0,0,0.94), 0 0 18px rgba(34,82,143,0.18) !important;
    backdrop-filter: blur(14px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
    filter: none !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button *, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:hover, #view-catalogo .premium-course-card .premium-card-actions .premium-action-button:focus-visible, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button:hover, #view-catalogo .premium-course-card.is-selected .premium-card-actions .premium-action-button:focus-visible{
    background: rgba(10, 34, 68, 0.9) !important;
    background-color: rgba(10, 34, 68, 0.9) !important;
    border-color: rgba(145, 187, 235, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.04), 0 20px 38px -22px rgba(0,0,0,0.96), 0 0 22px rgba(58,112,181,0.24) !important;
  }


  /* =========================================================
     AJUSTES v42 · BOTONES GLASS EN TODAS LAS SECCIONES
     Incluye portada, formación asincrónica y catálogo.
     ========================================================= */
  .premium-course-card .premium-card-actions > .premium-action-button, .premium-course-card .premium-card-actions > .action-view-program, .premium-course-card .premium-card-actions > .action-virtual-classroom, .premium-course-card .premium-card-actions > .action-enroll-course, .premium-course-card.is-selected .premium-card-actions > .premium-action-button, .premium-course-card.is-selected .premium-card-actions > .action-view-program, .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom, .premium-course-card.is-selected .premium-card-actions > .action-enroll-course, #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .premium-action-button{
    background: rgba(5, 20, 43, 0.76) !important;
    background-color: rgba(5, 20, 43, 0.76) !important;
    background-image: none !important;
    border: 1px solid rgba(108, 151, 200, 0.34) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.46) !important;
    backdrop-filter: blur(16px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.13),
      inset 0 -1px 0 rgba(255,255,255,0.025),
      0 14px 30px -20px rgba(0,0,0,0.96),
      0 0 18px rgba(45, 94, 154, 0.14) !important;
  }

  .premium-course-card .premium-card-actions > .premium-action-button *, .premium-course-card .premium-card-actions > .action-view-program *, .premium-course-card .premium-card-actions > .action-virtual-classroom *, .premium-course-card .premium-card-actions > .action-enroll-course *, .premium-course-card.is-selected .premium-card-actions > .premium-action-button *{
    color: #FFFFFF !important;
  }

  .premium-course-card .premium-card-actions > .premium-action-button:hover, .premium-course-card .premium-card-actions > .premium-action-button:focus-visible, .premium-course-card.is-selected .premium-card-actions > .premium-action-button:hover, .premium-course-card.is-selected .premium-card-actions > .premium-action-button:focus-visible{
    background: rgba(8, 30, 61, 0.88) !important;
    background-color: rgba(8, 30, 61, 0.88) !important;
    border-color: rgba(154, 194, 239, 0.48) !important;
    color: #FFFFFF !important;
    filter: none !important;
    transform: translateY(-0.12rem) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.17),
      inset 0 -1px 0 rgba(255,255,255,0.035),
      0 18px 36px -20px rgba(0,0,0,0.98),
      0 0 22px rgba(61, 116, 184, 0.20) !important;
    outline: none;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .premium-course-card .premium-card-actions > .premium-action-button{
      background: #081E3C !important;
      background-color: #081E3C !important;
    }
  }


  /* =========================================================
     AJUSTES v43 · BOTONES GLASS EN CATÁLOGO DESDE EL INICIO
     ========================================================= */
  #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card .premium-card-actions > .action-enroll-course, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .action-enroll-course{
    background: rgba(7, 26, 54, 0.82) !important;
    background-color: rgba(7, 26, 54, 0.82) !important;
    background-image: none !important;
    border: 1px solid rgba(103, 148, 201, 0.34) !important;
    color: #FFFFFF !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 16px 32px -22px rgba(0,0,0,0.94),
      0 0 18px rgba(34,82,143,0.18) !important;
    backdrop-filter: blur(14px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
    filter: none !important;
    opacity: 1 !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button *, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .premium-action-button *{
    color: #FFFFFF !important;
  }

  #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button:hover, #view-catalogo .premium-course-card .premium-card-actions > .premium-action-button:focus-visible, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .premium-action-button:hover, #view-catalogo .premium-course-card.is-selected .premium-card-actions > .premium-action-button:focus-visible{
    background: rgba(10, 34, 68, 0.90) !important;
    background-color: rgba(10, 34, 68, 0.90) !important;
    border-color: rgba(145, 187, 235, 0.46) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(255,255,255,0.04),
      0 20px 38px -22px rgba(0,0,0,0.96),
      0 0 22px rgba(58,112,181,0.24) !important;
    transform: translateY(-0.08rem);
  }


  /* =========================================================
     AJUSTES v44 · GLASS FIJO DESDE LA CARGA, SIN SELECCIÓN
     ========================================================= */
  body .premium-course-card .premium-card-actions > button.premium-action-button, body .premium-course-card.is-selected .premium-card-actions > button.premium-action-button{
    background: rgba(5,20,43,0.86) !important;
    background-color: rgba(5,20,43,0.86) !important;
    background-image: none !important;
    border: 1px solid rgba(111,156,209,0.42) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 16px 32px -22px rgba(0,0,0,0.96),
      0 0 18px rgba(42,91,153,0.20) !important;
    backdrop-filter: blur(14px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.48) !important;
  }

  body .premium-course-card .premium-card-actions > button.premium-action-button *, body .premium-course-card.is-selected .premium-card-actions > button.premium-action-button *{
    color: #FFFFFF !important;
  }

  body .premium-course-card .premium-card-actions > button.premium-action-button:hover, body .premium-course-card .premium-card-actions > button.premium-action-button:focus-visible{
    background: rgba(9,33,67,0.94) !important;
    background-color: rgba(9,33,67,0.94) !important;
    border-color: rgba(151,193,239,0.54) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 20px 38px -22px rgba(0,0,0,0.98),
      0 0 24px rgba(58,112,181,0.26) !important;
  }


  /* =========================================================
     AJUSTES v45 · GLASS PERSISTENTE AL CAMBIAR DE TARJETA
     ========================================================= */
  #view-catalogo .premium-course-card:not(.is-selected) .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card:not(.is-selected) .premium-card-actions > .action-view-program, #view-catalogo .premium-course-card:not(.is-selected) .premium-card-actions > .action-virtual-classroom, #view-catalogo .premium-course-card:not(.is-selected) .premium-card-actions > .action-enroll-course{
    background: rgba(5, 20, 43, 0.82) !important;
    background-color: rgba(5, 20, 43, 0.82) !important;
    background-image: none !important;
    border-color: rgba(111, 156, 209, 0.40) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 16px 32px -22px rgba(0,0,0,0.96),
      0 0 18px rgba(42,91,153,0.20) !important;
    backdrop-filter: blur(14px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
  }

  #view-catalogo .premium-course-card:not(.is-selected) .premium-card-actions > .premium-action-button, #view-catalogo .premium-course-card:not(.is-selected) .premium-card-actions > .premium-action-button *{
    color: #FFFFFF !important;
  }


  /* =========================================================
     AJUSTES v46 · WHATSAPP PC ANIMADO Y ATRACTIVO
     ========================================================= */
  .whatsapp-fab{
    position: relative;
    overflow: visible;
  }

  .whatsapp-fab-assistant, .whatsapp-fab-orbit{
    display: none;
  }

  @media (min-width: 1024px) {
    .whatsapp-widget{
      right: clamp(1rem, 1.8vw, 1.5rem);
      bottom: clamp(1rem, 1.8vw, 1.5rem);
    }

    .whatsapp-fab{
      padding-inline: 1.08rem 1.18rem;
      min-height: 3.45rem;
      box-shadow:
        0 22px 48px -24px rgba(24,185,110,0.92),
        inset 0 1px 0 rgba(255,255,255,0.26),
        0 0 0 1px rgba(255,255,255,0.08);
    }

    .whatsapp-fab-assistant{
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      position: absolute;
      right: calc(100% + 0.9rem);
      top: 50%;
      transform: translateY(-50%);
      min-height: 2.9rem;
      padding: 0.55rem 0.88rem;
      border-radius: 999px;
      background: rgba(255,255,255,0.97);
      color: #0C243E;
      border: 1px solid rgba(24,185,110,0.24);
      box-shadow: 0 18px 34px -18px rgba(0,0,0,0.34), 0 6px 18px -10px rgba(24,185,110,0.28);
      white-space: nowrap;
      pointer-events: none;
      animation: whatsappAssistantFloat 3.2s ease-in-out infinite;
    }

    .whatsapp-fab-assistant::after{
      content: "";
      position: absolute;
      right: -0.38rem;
      top: 50%;
      width: 0.82rem;
      height: 0.82rem;
      background: rgba(255,255,255,0.97);
      border-right: 1px solid rgba(24,185,110,0.24);
      border-bottom: 1px solid rgba(24,185,110,0.24);
      transform: translateY(-50%) rotate(-45deg);
      border-radius: 0 0 0.18rem 0;
    }

    .whatsapp-fab-face{
      display: inline-grid;
      place-items: center;
      width: 1.85rem;
      height: 1.85rem;
      border-radius: 50%;
      background: linear-gradient(135deg, #FFE79A 0%, #FFD460 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 8px 16px -10px rgba(255,177,32,0.58);
      font-size: 1rem;
      flex: 0 0 auto;
    }

    .whatsapp-fab-assistant-text{
      font-size: 0.83rem;
      line-height: 1.1;
      font-weight: 850;
      letter-spacing: 0.01em;
    }

    .whatsapp-fab-orbit{
      display: inline-grid;
      place-items: center;
      position: absolute;
      width: 1.65rem;
      height: 1.65rem;
      border-radius: 50%;
      color: #FFFFFF;
      pointer-events: none;
      box-shadow: 0 12px 24px -14px rgba(0,0,0,0.36);
    }

    .whatsapp-fab-orbit i{
      font-size: 0.82rem;
    }

    .whatsapp-fab-orbit--leaf{
      top: -0.42rem;
      left: -0.35rem;
      background: linear-gradient(135deg, #67D56F 0%, #2CB966 100%);
      animation: whatsappLeafOrbit 2.8s ease-in-out infinite;
    }

    .whatsapp-fab-orbit--help{
      right: -0.35rem;
      top: -0.55rem;
      background: linear-gradient(135deg, #4E7DFF 0%, #23B7FF 100%);
      animation: whatsappHelpOrbit 3.1s ease-in-out infinite;
    }

    .whatsapp-fab:hover .whatsapp-fab-assistant, .whatsapp-fab:focus-visible .whatsapp-fab-assistant{
      animation-duration: 2.2s;
    }
  }

  @keyframes whatsappAssistantFloat {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(calc(-50% - 0.18rem)) translateX(-0.12rem); }
  }

  @keyframes whatsappLeafOrbit {
    0%, 100% { transform: translate3d(0,0,0) rotate(-8deg) scale(1); }
    50% { transform: translate3d(-0.12rem,-0.18rem,0) rotate(8deg) scale(1.06); }
  }

  @keyframes whatsappHelpOrbit {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50% { transform: translate3d(0.14rem,-0.16rem,0) rotate(10deg) scale(1.05); }
  }

  @media (prefers-reduced-motion: reduce) {
    .whatsapp-fab-assistant, .whatsapp-fab-orbit{
      animation: none !important;
    }
  }


  /* =========================================================
     AJUSTES v47 · WHATSAPP SOLO ÍCONO + BURBUJA HOLA
     ========================================================= */
  .whatsapp-fab{
    width: 3.35rem !important;
    min-width: 3.35rem !important;
    min-height: 3.35rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }

  .whatsapp-fab > span:not(.whatsapp-fab-assistant):not(.whatsapp-fab-orbit){
    display: none !important;
  }

  .whatsapp-fab i.fa-brands.fa-whatsapp{
    font-size: 1.45rem !important;
  }

  @media (min-width: 1024px) {
    .whatsapp-fab{
      width: 3.55rem !important;
      min-width: 3.55rem !important;
      min-height: 3.55rem !important;
      padding: 0 !important;
    }

    .whatsapp-fab-assistant{
      min-height: 2.75rem !important;
      padding: 0.52rem 0.84rem !important;
    }

    .whatsapp-fab-assistant-text{
      font-size: 0.86rem !important;
      letter-spacing: 0.01em;
    }
  }


  /* =========================================================
     AJUSTES v48 · WHATSAPP SOLO ÍCONO
     ========================================================= */
  .whatsapp-fab-assistant, .whatsapp-fab-orbit, .whatsapp-fab-face, .whatsapp-fab-assistant-text{
    display: none !important;
  }

  .whatsapp-fab{
    width: 3.45rem !important;
    min-width: 3.45rem !important;
    min-height: 3.45rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .whatsapp-fab > i.fa-brands.fa-whatsapp{
    display: inline-block !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }


  /* =========================================================
     AJUSTES v49 · WHATSAPP GLASS + OPCIÓN DE MENSAJE LIBRE
     ========================================================= */
  .whatsapp-fab{
    background: rgba(16, 167, 96, 0.28) !important;
    border: 1px solid rgba(167, 255, 207, 0.42) !important;
    color: #FFFFFF !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(255,255,255,0.05),
      0 18px 40px -22px rgba(0,0,0,0.88),
      0 0 24px rgba(24,185,110,0.28) !important;
    backdrop-filter: blur(18px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
  }

  .whatsapp-fab:hover, .whatsapp-fab:focus-visible{
    background: rgba(16, 167, 96, 0.42) !important;
    border-color: rgba(203, 255, 227, 0.62) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      inset 0 -1px 0 rgba(255,255,255,0.06),
      0 22px 44px -22px rgba(0,0,0,0.92),
      0 0 30px rgba(24,185,110,0.38) !important;
  }

  .whatsapp-panel{
    background: linear-gradient(145deg, rgba(4,22,35,0.78), rgba(10,42,59,0.64)) !important;
    border: 1px solid rgba(167,255,207,0.24) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 30px 70px -34px rgba(0,0,0,0.98),
      0 18px 42px -28px rgba(24,185,110,0.46) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
  }

  .whatsapp-option{
    background: rgba(255,255,255,0.065) !important;
    border-color: rgba(167,255,207,0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(12px) saturate(1.10) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.10) !important;
  }

  .whatsapp-option:hover, .whatsapp-option:focus-visible{
    background: rgba(24,185,110,0.14) !important;
    border-color: rgba(167,255,207,0.44) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 14px 30px -22px rgba(0,0,0,0.88) !important;
  }

  .whatsapp-option--free{
    border-style: dashed !important;
  }

  .whatsapp-option--free i{
    color: #A7F3D0 !important;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .whatsapp-fab{
      background: #15895A !important;
    }

    .whatsapp-panel{
      background: #071D2C !important;
    }

    .whatsapp-option{
      background: #0E2C3D !important;
    }
  }


  /* =========================================================
     AJUSTES v50 · WHATSAPP CONSULTA + REDES EN PANTALLA
     ========================================================= */

  .whatsapp-fab{
    background: rgba(37, 211, 102, 0.96) !important;
    border-color: rgba(255,255,255,0.34) !important;
    box-shadow: 0 18px 42px -22px rgba(37,211,102,0.96), inset 0 1px 0 rgba(255,255,255,0.30), 0 0 26px rgba(37,211,102,0.36) !important;
  }

  .whatsapp-fab:hover, .whatsapp-fab:focus-visible{
    background: rgba(52, 232, 122, 0.98) !important;
  }

  .whatsapp-panel{
    border-color: rgba(72, 241, 137, 0.32) !important;
    box-shadow: 0 30px 70px -34px rgba(0,0,0,0.98), 0 18px 42px -28px rgba(37,211,102,0.74) !important;
  }

  .whatsapp-eyebrow, .whatsapp-option i, .whatsapp-freeform-label i{
    color: #7BFFB1 !important;
  }

  .whatsapp-option{
    border-color: rgba(72,241,137,0.24) !important;
    background: rgba(37,211,102,0.12) !important;
  }

  .whatsapp-option:hover, .whatsapp-option:focus-visible{
    border-color: rgba(123,255,177,0.52) !important;
    background: rgba(37,211,102,0.19) !important;
  }

  .whatsapp-freeform{
    margin-top: 0.25rem;
    padding: 0.92rem;
    border-radius: 1rem;
    border: 1px solid rgba(72,241,137,0.20);
    background: rgba(37,211,102,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .whatsapp-freeform-label{
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 780;
    color: #F3FFF8;
    margin-bottom: 0.68rem;
  }

  .whatsapp-freeform-textarea{
    width: 100%;
    min-height: 5.3rem;
    resize: vertical;
    border-radius: 0.85rem;
    border: 1px solid rgba(126,239,177,0.24);
    background: rgba(255,255,255,0.05);
    color: #FFFFFF;
    padding: 0.82rem 0.88rem;
    font-size: 0.8rem;
    line-height: 1.45;
    outline: none;
  }

  .whatsapp-freeform-textarea::placeholder{
    color: #BBD0DF;
  }

  .whatsapp-freeform-textarea:focus{
    border-color: rgba(123,255,177,0.52);
    box-shadow: 0 0 0 3px rgba(37,211,102,0.14);
  }

  .whatsapp-freeform-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.9rem;
    margin-top: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(37,211,102,0.92);
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 820;
    box-shadow: 0 14px 30px -18px rgba(37,211,102,0.72), inset 0 1px 0 rgba(255,255,255,0.28);
    transition: transform 180ms ease, background-color 180ms ease;
  }

  .whatsapp-freeform-button:hover, .whatsapp-freeform-button:focus-visible{
    transform: translateY(-0.08rem);
    background: rgba(52,232,122,0.98);
    outline: none;
  }


  /* AJUSTE v51 · ICONOS DE REDES EN CABECERA */
  .header-social-menu > summary{
    min-width: auto !important;
    padding: 0.55rem 0.86rem !important;
  }

  .header-social-inline{
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
    font-size: 0.92rem;
    line-height: 1;
  }

  .header-social-inline i{
    color: #F3E8C7;
  }


  /* AJUSTE v52 · REDES ADAPTATIVAS EN CABECERA */
  .header-social-links{
    flex: 0 0 auto;
  }

  .header-social-links a{
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    border: 1px solid rgba(197,168,90,0.28);
    background: rgba(255,255,255,0.055);
    color: #F3E8C7;
    box-shadow: 0 10px 22px -16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .header-social-links a:hover, .header-social-links a:focus-visible{
    transform: translateY(-0.08rem);
    border-color: rgba(197,168,90,0.62);
    background: rgba(197,168,90,0.12);
    outline: none;
  }

  .header-social-menu > summary{
    min-width: 2.45rem !important;
    padding: 0.55rem 0.72rem !important;
  }


  /* =========================================================
     AJUSTES v55 · SELECTOR DE IDIOMA FUNCIONAL
     ========================================================= */
  #hero-shell{
    padding-bottom: clamp(4.9rem, 9vw, 6.2rem) !important;
  }

  .hero-language-switcher{
    position: absolute;
    left: clamp(0.8rem, 3vw, 2rem);
    bottom: clamp(0.8rem, 2vw, 1.35rem);
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: calc(100% - 1.6rem);
    padding: 0.36rem;
    border: 1px solid rgba(197, 168, 90, 0.28);
    border-radius: 999px;
    background: rgba(7, 26, 54, 0.72);
    color: #E7EEF5;
    box-shadow: 0 16px 34px -22px rgba(0,0,0,0.86), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }

  .hero-language-switcher > i{
    padding-inline: 0.48rem 0.35rem;
    color: #D9C487;
    font-size: 0.82rem;
  }

  .language-option{
    display: inline-grid;
    place-items: center;
    min-width: 2.35rem;
    min-height: 2.1rem;
    height: auto;
    padding: 0.42rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #CBD7E3;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0.06em;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .language-option:hover, .language-option:focus-visible{
    color: #FFFFFF;
    border-color: rgba(197,168,90,0.35);
    background: rgba(255,255,255,0.07);
    outline: none;
  }

  .language-option.is-active{
    color: #071522;
    border-color: #D9C487;
    background: #C5A85A;
    box-shadow: 0 9px 20px -14px rgba(197,168,90,0.78);
  }

  .google-translate-engine{
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .goog-te-balloon-frame{
    display: none !important;
  }

  body{
    top: 0 !important;
  }

  @media (max-width: 359px) {
    .hero-language-switcher{
      left: 0.55rem;
      bottom: 0.65rem;
      max-width: calc(100% - 1.1rem);
    }

    .hero-language-switcher > i{
      display: none;
    }

    .language-option{
      min-width: 2.15rem;
      padding-inline: 0.45rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .language-option{
      transition: none !important;
    }
  }


  /* AJUSTE v56 · SELECTOR DE IDIOMA JUNTO A REDES */
  .header-language-switcher, .mobile-language-switcher{
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.36rem;
    border: 1px solid rgba(197, 168, 90, 0.28);
    border-radius: 999px;
    background: rgba(7, 26, 54, 0.72);
    color: #E7EEF5;
    box-shadow: 0 16px 34px -22px rgba(0,0,0,0.86), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }

  .header-language-switcher > i, .mobile-language-switcher > i{
    padding-inline: 0.48rem 0.35rem;
    color: #D9C487;
    font-size: 0.82rem;
    flex: 0 0 auto;
  }

  .header-language-switcher .language-option, .mobile-language-switcher .language-option, .header-social-popover .language-option{
    min-width: 2.1rem;
    min-height: 2rem;
    padding: 0.38rem 0.5rem;
  }

  .header-social-language-divider{
    width: 100%;
    height: 1px;
    margin: 0.25rem 0 0.05rem;
    background: linear-gradient(90deg, transparent, rgba(197,168,90,0.24), transparent);
  }

  .header-language-switcher--popover{
    width: 100%;
    justify-content: center;
    margin-top: 0.1rem;
  }

  .mobile-language-switcher{
    width: max-content;
    max-width: 100%;
    margin-top: 0.8rem;
  }

  @media (max-width: 1279px) {
    .header-language-switcher:not(.header-language-switcher--popover){
      display: none !important;
    }
  }


  /* AJUSTE v57 · SOLO ESPAÑOL E INGLÉS, SIN ÍCONO */
  .header-language-switcher, .mobile-language-switcher, .header-language-switcher--popover{
    gap: 0.22rem !important;
    padding: 0.3rem !important;
  }

  .header-language-switcher > i, .mobile-language-switcher > i, .header-language-switcher--popover > i{
    display: none !important;
  }


  /* AJUSTE v58 · BOTONES DE INSCRIPCIÓN E IDIOMA MÁS CUADRADOS */
  #site-header .header-enroll-button, #mobile-menu .mobile-enroll-button{
    border-radius: 0.72rem !important;
  }

  .header-language-switcher, .mobile-language-switcher, .header-language-switcher--popover{
    border-radius: 0.72rem !important;
  }

  .header-language-switcher .language-option, .mobile-language-switcher .language-option, .header-social-popover .language-option{
    border-radius: 0.48rem !important;
  }

  @media (max-width: 380px) {
    #site-header .header-enroll-button, #mobile-menu .mobile-enroll-button, .header-language-switcher, .mobile-language-switcher, .header-language-switcher--popover{
      border-radius: 0.62rem !important;
    }
  }


  /* =========================================================
     AJUSTES v59 · IDIOMA ROJO/BLANCO + INSCRIBIRSE VERDE
     ========================================================= */
  .header-language-switcher, .mobile-language-switcher, .header-language-switcher--popover{
    background: rgba(166, 28, 46, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -18px rgba(120, 10, 28, 0.52), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  }

  .header-language-switcher .language-option, .mobile-language-switcher .language-option, .header-social-popover .language-option{
    border-radius: 0.55rem !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .header-language-switcher .language-option:hover, .header-language-switcher .language-option:focus-visible, .mobile-language-switcher .language-option:hover, .mobile-language-switcher .language-option:focus-visible, .header-social-popover .language-option:hover, .header-social-popover .language-option:focus-visible{
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(255,255,255,0.36) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
  }

  .header-language-switcher .language-option.is-active, .mobile-language-switcher .language-option.is-active, .header-social-popover .language-option.is-active{
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #A61C2E !important;
    box-shadow: 0 8px 16px -12px rgba(255,255,255,0.75) !important;
  }

  .header-enroll-button, .mobile-enroll-button{
    border-radius: 0.6rem !important;
    background: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 18px 36px -22px rgba(16,185,129,0.7), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }

  .header-enroll-button:hover, .header-enroll-button:focus-visible, .mobile-enroll-button:hover, .mobile-enroll-button:focus-visible{
    background: #12D18F !important;
    color: #FFFFFF !important;
    box-shadow: 0 20px 40px -22px rgba(18,209,143,0.78), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  }

  .header-enroll-button i{
    color: #FFFFFF !important;
  }


  /* =========================================================
     AJUSTES v60 · WHATSAPP SOLO DUDAS + IDIOMA GLASS + INSCRIBIRSE VERDE WHATSAPP
     ========================================================= */
  .whatsapp-options--single{
    display: block !important;
  }

  .whatsapp-options--single .whatsapp-freeform{
    margin-top: 0 !important;
  }

  .header-language-switcher, .mobile-language-switcher, .header-language-switcher--popover{
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    color: #FFFFFF !important;
    box-shadow: 0 16px 34px -22px rgba(0,0,0,0.86), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(12px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
  }

  .header-language-switcher .language-option, .mobile-language-switcher .language-option, .header-social-popover .language-option{
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 22px -18px rgba(0,0,0,0.45) !important;
  }

  .header-language-switcher .language-option:hover, .header-language-switcher .language-option:focus-visible, .mobile-language-switcher .language-option:hover, .mobile-language-switcher .language-option:focus-visible, .header-social-popover .language-option:hover, .header-social-popover .language-option:focus-visible{
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.26) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
  }

  .header-language-switcher .language-option.is-active, .mobile-language-switcher .language-option.is-active, .header-social-popover .language-option.is-active{
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.32) !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 26px -18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }

  .header-enroll-button, .mobile-enroll-button{
    border-radius: 0.6rem !important;
    background: #25D366 !important;
    color: #FFFFFF !important;
    box-shadow: 0 18px 36px -22px rgba(37,211,102,0.74), inset 0 1px 0 rgba(255,255,255,0.22), 0 0 22px rgba(37,211,102,0.18) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
  }

  .header-enroll-button:hover, .header-enroll-button:focus-visible, .mobile-enroll-button:hover, .mobile-enroll-button:focus-visible{
    background: #34EB7A !important;
    color: #FFFFFF !important;
    box-shadow: 0 20px 40px -22px rgba(52,235,122,0.82), inset 0 1px 0 rgba(255,255,255,0.24), 0 0 26px rgba(52,235,122,0.22) !important;
  }

  .header-enroll-button i{
    color: #FFFFFF !important;
  }


  /* =========================================================
     AJUSTES v61 · REDES CON COLOR OFICIAL POR PLATAFORMA
     ========================================================= */
  .social-link--facebook{
    background: #1877F2 !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -18px rgba(24,119,242,0.58), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }

  .social-link--instagram{
    background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -18px rgba(221,42,123,0.54), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }

  .social-link--tiktok{
    background: #111111 !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -18px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.14) !important;
    position: relative;
  }

  .social-link--whatsapp{
    background: #25D366 !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -18px rgba(37,211,102,0.58), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }

  .social-link--facebook:hover, .social-link--facebook:focus-visible{
    background: #2D84F4 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 18px 34px -18px rgba(24,119,242,0.7), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .social-link--instagram:hover, .social-link--instagram:focus-visible{
    background: linear-gradient(135deg, #F89A3D 0%, #E64686 52%, #9850C1 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 18px 34px -18px rgba(221,42,123,0.68), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .social-link--tiktok:hover, .social-link--tiktok:focus-visible{
    background: #181818 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 18px 34px -18px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .social-link--whatsapp:hover, .social-link--whatsapp:focus-visible{
    background: #34E777 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 18px 34px -18px rgba(37,211,102,0.72), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }


  /* =========================================================
     AJUSTES v62 · HEADER CON YOUTUBE Y COLORES SEMITRANSPARENTES
     ========================================================= */
  .social-link--youtube{
    background: #FF0000 !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #FFFFFF !important;
    box-shadow: 0 14px 30px -18px rgba(255,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  }

  .social-link--youtube:hover, .social-link--youtube:focus-visible{
    background: #FF2A2A !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: 0 18px 34px -18px rgba(255,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  /* Solo en header: colores oficiales pero semitransparentes */
  .header-social-links .social-link, .header-social-popover .social-link{
    color: #FFFFFF !important;
    backdrop-filter: blur(12px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
  }

  .header-social-links .social-link--facebook, .header-social-popover .social-link--facebook{
    background: rgba(24,119,242,0.34) !important;
    border-color: rgba(24,119,242,0.42) !important;
    box-shadow: 0 12px 28px -18px rgba(24,119,242,0.34), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  .header-social-links .social-link--instagram, .header-social-popover .social-link--instagram{
    background: linear-gradient(135deg, rgba(245,133,41,0.34) 0%, rgba(221,42,123,0.34) 52%, rgba(129,52,175,0.34) 100%) !important;
    border-color: rgba(221,42,123,0.34) !important;
    box-shadow: 0 12px 28px -18px rgba(221,42,123,0.34), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  .header-social-links .social-link--tiktok, .header-social-popover .social-link--tiktok{
    background: rgba(17,17,17,0.46) !important;
    border-color: rgba(255,255,255,0.20) !important;
    box-shadow: 0 12px 28px -18px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  .header-social-links .social-link--youtube, .header-social-popover .social-link--youtube{
    background: rgba(255,0,0,0.34) !important;
    border-color: rgba(255,0,0,0.42) !important;
    box-shadow: 0 12px 28px -18px rgba(255,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  .header-social-links .social-link--facebook:hover, .header-social-links .social-link--facebook:focus-visible, .header-social-popover .social-link--facebook:hover, .header-social-popover .social-link--facebook:focus-visible{
    background: rgba(24,119,242,0.48) !important;
    border-color: rgba(24,119,242,0.58) !important;
  }

  .header-social-links .social-link--instagram:hover, .header-social-links .social-link--instagram:focus-visible, .header-social-popover .social-link--instagram:hover, .header-social-popover .social-link--instagram:focus-visible{
    background: linear-gradient(135deg, rgba(245,133,41,0.48) 0%, rgba(221,42,123,0.48) 52%, rgba(129,52,175,0.48) 100%) !important;
    border-color: rgba(221,42,123,0.52) !important;
  }

  .header-social-links .social-link--tiktok:hover, .header-social-links .social-link--tiktok:focus-visible, .header-social-popover .social-link--tiktok:hover, .header-social-popover .social-link--tiktok:focus-visible{
    background: rgba(17,17,17,0.62) !important;
    border-color: rgba(255,255,255,0.32) !important;
  }

  .header-social-links .social-link--youtube:hover, .header-social-links .social-link--youtube:focus-visible, .header-social-popover .social-link--youtube:hover, .header-social-popover .social-link--youtube:focus-visible{
    background: rgba(255,0,0,0.48) !important;
    border-color: rgba(255,0,0,0.58) !important;
  }


  /* =========================================================
     AJUSTES v65 · COLOR EN EL CONTORNO DEL ÍCONO, NO DEL CUADRO
     ========================================================= */
  .header-social-links .social-link, .header-social-popover .social-link{
    width: 2.7rem !important;
    height: 2.7rem !important;
    border-radius: 0.82rem !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 16px 30px -20px rgba(0,0,0,0.58) !important;
    color: #FFFFFF !important;
  }

  .header-social-links .social-link i, .header-social-popover .social-link i{
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.08));
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
  }

  .header-social-links .social-link--facebook i, .header-social-popover .social-link--facebook i{
    color: #3B82F6 !important;
    text-shadow: 0 1px 8px rgba(59,130,246,0.28);
  }

  .header-social-links .social-link--instagram i, .header-social-popover .social-link--instagram i{
    color: #E1306C !important;
    text-shadow: 0 1px 8px rgba(225,48,108,0.28);
  }

  .header-social-links .social-link--tiktok i, .header-social-popover .social-link--tiktok i{
    color: #F8FAFC !important;
    text-shadow: 0 1px 8px rgba(248,250,252,0.18);
  }

  .header-social-links .social-link--youtube i, .header-social-popover .social-link--youtube i{
    color: #FF3B30 !important;
    text-shadow: 0 1px 8px rgba(255,59,48,0.28);
  }

  .header-social-links .social-link:hover, .header-social-links .social-link:focus-visible, .header-social-popover .social-link:hover, .header-social-popover .social-link:focus-visible{
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.26) !important;
    transform: translateY(-0.08rem) scale(1.02) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(255,255,255,0.05),
      0 20px 34px -20px rgba(0,0,0,0.66),
      0 0 0 1px rgba(255,255,255,0.06) !important;
  }

  .header-social-links .social-link--facebook:hover i, .header-social-links .social-link--facebook:focus-visible i, .header-social-popover .social-link--facebook:hover i, .header-social-popover .social-link--facebook:focus-visible i{
    color: #60A5FA !important;
    text-shadow: 0 1px 10px rgba(96,165,250,0.34);
  }

  .header-social-links .social-link--instagram:hover i, .header-social-links .social-link--instagram:focus-visible i, .header-social-popover .social-link--instagram:hover i, .header-social-popover .social-link--instagram:focus-visible i{
    color: #F04F88 !important;
    text-shadow: 0 1px 10px rgba(240,79,136,0.34);
  }

  .header-social-links .social-link--tiktok:hover i, .header-social-links .social-link--tiktok:focus-visible i, .header-social-popover .social-link--tiktok:hover i, .header-social-popover .social-link--tiktok:focus-visible i{
    color: #FFFFFF !important;
    text-shadow: 0 1px 10px rgba(255,255,255,0.22);
  }

  .header-social-links .social-link--youtube:hover i, .header-social-links .social-link--youtube:focus-visible i, .header-social-popover .social-link--youtube:hover i, .header-social-popover .social-link--youtube:focus-visible i{
    color: #FF5A52 !important;
    text-shadow: 0 1px 10px rgba(255,90,82,0.34);
  }


  /* =========================================================
     AJUSTES v68 · FOOTER CON MISMO ESTILO QUE EL HEADER
     ========================================================= */
  .footer-social-links .social-link{
    width: 2.7rem !important;
    height: 2.7rem !important;
    min-width: 2.7rem !important;
    min-height: 2.7rem !important;
    border-radius: 0.82rem !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 16px 30px -20px rgba(0,0,0,0.58) !important;
    color: #FFFFFF !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
  }

  .footer-social-links .social-link i{
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.08));
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
  }

  .footer-social-links .social-link--facebook i{
    color: #3B82F6 !important;
    text-shadow: 0 1px 8px rgba(59,130,246,0.28);
  }

  .footer-social-links .social-link--instagram i{
    color: #E1306C !important;
    text-shadow: 0 1px 8px rgba(225,48,108,0.28);
  }

  .footer-social-links .social-link--tiktok i{
    color: #F8FAFC !important;
    text-shadow: 0 1px 8px rgba(248,250,252,0.18);
  }

  .footer-social-links .social-link--whatsapp i{
    color: #25D366 !important;
    text-shadow: 0 1px 8px rgba(37,211,102,0.28);
  }

  .footer-social-links .social-link:hover, .footer-social-links .social-link:focus-visible{
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.26) !important;
    transform: translateY(-0.08rem) scale(1.02) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(255,255,255,0.05),
      0 20px 34px -20px rgba(0,0,0,0.66),
      0 0 0 1px rgba(255,255,255,0.06) !important;
  }

  .footer-social-links .social-link--facebook:hover i, .footer-social-links .social-link--facebook:focus-visible i{
    color: #60A5FA !important;
    text-shadow: 0 1px 10px rgba(96,165,250,0.34);
  }

  .footer-social-links .social-link--instagram:hover i, .footer-social-links .social-link--instagram:focus-visible i{
    color: #F04F88 !important;
    text-shadow: 0 1px 10px rgba(240,79,136,0.34);
  }

  .footer-social-links .social-link--tiktok:hover i, .footer-social-links .social-link--tiktok:focus-visible i{
    color: #FFFFFF !important;
    text-shadow: 0 1px 10px rgba(255,255,255,0.22);
  }

  .footer-social-links .social-link--whatsapp:hover i, .footer-social-links .social-link--whatsapp:focus-visible i{
    color: #34EB7A !important;
    text-shadow: 0 1px 10px rgba(52,235,122,0.34);
  }


  /* =========================================================
     AJUSTES v69 · FOOTER YOUTUBE + QR MÁS ABAJO + RECLAMACIONES
     ========================================================= */
  .footer-qr-wrap{
    margin-top: 0.45rem;
  }

  .footer-social-links .social-link--youtube i{
    color: #FF3B30 !important;
    text-shadow: 0 1px 8px rgba(255,59,48,0.28);
  }

  .footer-social-links .social-link--youtube:hover i, .footer-social-links .social-link--youtube:focus-visible i{
    color: #FF5A52 !important;
    text-shadow: 0 1px 10px rgba(255,90,82,0.34);
  }

  .footer-claims-card{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 38px -28px rgba(0,0,0,0.72);
    backdrop-filter: blur(14px) saturate(1.04);
    -webkit-backdrop-filter: blur(14px) saturate(1.04);
  }

  .footer-claims-icon{
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    background: rgba(197,168,90,0.12);
    border: 1px solid rgba(197,168,90,0.22);
    color: #D8BF7A;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .footer-claims-text{
    font-size: 0.75rem;
    line-height: 1.6;
    color: #94A3B8;
    margin: 0;
  }

  .footer-claims-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.72rem 0.95rem;
    border-radius: 0.75rem;
    background: rgba(37,211,102,0.92);
    border: 1px solid rgba(255,255,255,0.16);
    color: #FFFFFF;
    font-size: 0.76rem;
    font-weight: 800;
    box-shadow: 0 18px 32px -22px rgba(37,211,102,0.62), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }

  .footer-claims-button:hover, .footer-claims-button:focus-visible{
    transform: translateY(-0.08rem);
    background: rgba(52,235,122,0.98);
    box-shadow: 0 20px 36px -22px rgba(52,235,122,0.74), inset 0 1px 0 rgba(255,255,255,0.22);
    outline: none;
  }


  /* =========================================================
     AJUSTES v70 · LIBRO DE RECLAMACIONES JUNTO A TÉRMINOS
     ========================================================= */
  .footer-claims-column, .footer-claims-card{
    display: none !important;
  }

  .footer-legal-links{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
  }

  .footer-claims-link{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(197,168,90,0.20);
    background: rgba(255,255,255,0.035);
    color: #CBD5E1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
  }

  .footer-claims-link i{
    color: #D0BC8C;
  }

  .footer-claims-link:hover, .footer-claims-link:focus-visible{
    color: #FFFFFF;
    border-color: rgba(197,168,90,0.42);
    background: rgba(197,168,90,0.08);
    transform: translateY(-1px);
    outline: none;
  }

  @media (max-width: 639px) {
    #site-footer .pt-6{
      align-items: center;
      text-align: center;
    }

    .footer-legal-links{
      width: 100%;
      flex-direction: column;
      gap: 0.55rem;
    }
  }


  /* =========================================================
     AJUSTES v71 · DORADO MÁS BRILLANTE EN PESTAÑAS ACTIVAS
     ========================================================= */
  :root{
    --cefein-gold-bright: #C5A85A;
    --cefein-gold-bright-hover: #FFE08A;
    --cefein-gold-bright-border: rgba(197, 168, 90, 0.68);
    --cefein-gold-bright-shadow: rgba(197, 168, 90, 0.34);
  }

  #site-header .nav-link.is-current{
    background: var(--cefein-gold-bright) !important;
    color: #020C1B !important;
    box-shadow: 0 14px 28px -18px var(--cefein-gold-bright-shadow), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  }

  #site-header .nav-link:hover, #site-header .nav-link:focus-visible, #mobile-menu .mobile-nav-link:hover, #mobile-menu .mobile-nav-link:focus-visible{
    color: var(--cefein-gold-bright) !important;
  }

  #view-catalogo .catalog-tab-button.is-active, #view-catalogo .premium-filter-button.is-active, .premium-filter-button.is-active, .catalog-tab-button.is-active{
    background: var(--cefein-gold-bright) !important;
    border-color: var(--cefein-gold-bright) !important;
    color: #020C1B !important;
    box-shadow: 0 14px 28px -18px var(--cefein-gold-bright-shadow), inset 0 1px 0 rgba(255,255,255,0.22) !important;
  }

  #view-catalogo .catalog-tab-button.is-active:hover, #view-catalogo .premium-filter-button.is-active:hover, .premium-filter-button.is-active:hover, .catalog-tab-button.is-active:hover{
    background: var(--cefein-gold-bright-hover) !important;
    border-color: var(--cefein-gold-bright-hover) !important;
  }

  .mobile-nav-link.is-active{
    background: rgba(197, 168, 90, 0.16) !important;
    border: 1px solid var(--cefein-gold-bright-border) !important;
    color: var(--cefein-gold-bright) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 22px -18px rgba(197,168,90,0.22) !important;
  }


  /* AJUSTE v72 · ESTADO ACTIVO CORRECTO DE NAVEGACIÓN */
  #site-header .nav-link:not(.is-current){
    background: transparent !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
  }

  #site-header .nav-link:not(.is-current):hover, #site-header .nav-link:not(.is-current):focus-visible{
    color: var(--cefein-gold-bright) !important;
    background: rgba(255,255,255,0.05) !important;
  }


  /* =========================================================
     AJUSTES v73 · PESTAÑAS MÁS CUADRADAS + TEXTO SIEMPRE VISIBLE
     ========================================================= */
  #site-header .nav-link, #view-catalogo .catalog-tab-button, #view-catalogo .premium-filter-button, .catalog-tab-button, .premium-filter-button{
    border-radius: 0.68rem !important;
  }

  @media (max-width: 900px) {
    #site-header .nav-link, #view-catalogo .catalog-tab-button, #view-catalogo .premium-filter-button, .catalog-tab-button, .premium-filter-button{
      border-radius: 0.62rem !important;
    }
  }

  /* La tarjeta principal nunca desaparece durante el cambio de curso. */
  

  

  #card-active-title, #card-active-desc, #card-active-category, #card-active-tag, #card-active-duration{
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 2px 12px rgba(2,12,27,0.76);
  }

  #deck-card-active > .relative.z-10{
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 24 !important;
  }

  /* Más contraste cuando la tarjeta se acerca o recibe hover. */
  #hero-deck:hover #card-active-title, #hero-deck:hover #card-active-desc, #hero-deck:hover #card-active-category, #hero-deck:hover #card-active-tag, #hero-deck:hover #card-active-duration{
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 3px 16px rgba(2,12,27,0.92), 0 1px 2px rgba(0,0,0,0.9);
  }


  /* =========================================================
     AJUSTES v74 · TEXTO DE PESTAÑA ACTIVA SIEMPRE VISIBLE
     ========================================================= */
  /* Navegación principal: caja y texto centrados en ambos ejes. */
  #site-header #header-main-nav .nav-link{
    position: relative !important;
    isolation: isolate !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.55rem;
    margin: 0 !important;
    vertical-align: middle;
    overflow: visible !important;
    line-height: 1 !important;
  }

  #site-header #header-main-nav .nav-link .nav-link-label{
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 1em;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-indent: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none;
    transform: none !important;
  }

  #mobile-menu .mobile-nav-link{
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  #mobile-menu .mobile-nav-link .nav-link-label{
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-indent: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    pointer-events: none;
  }

  #site-header .nav-link.is-current, #site-header .nav-link[aria-current="page"]{
    background: #C5A85A !important;
    color: #071522 !important;
    -webkit-text-fill-color: #071522 !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.48),
      0 12px 26px -17px rgba(197,168,90,0.48) !important;
  }

  #site-header .nav-link.is-current .nav-link-label, #site-header .nav-link[aria-current="page"] .nav-link-label{
    color: #071522 !important;
    -webkit-text-fill-color: #071522 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #site-header .nav-link:not(.is-current) .nav-link-label{
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }

  #site-header .nav-link, #view-catalogo .catalog-tab-button, #view-catalogo .premium-filter-button, .catalog-tab-button, .premium-filter-button{
    border-radius: 0.52rem !important;
  }


  /* =========================================================
     AJUSTES v75 · BORDES DEL MISMO COLOR Y SOMBRA EN PESTAÑAS ACTIVAS
     ========================================================= */
  #site-header .nav-link.is-current, #site-header .nav-link[aria-current="page"]{
    background: #C5A85A !important;
    color: #071522 !important;
    -webkit-text-fill-color: #071522 !important;
    border: 1px solid #C5A85A !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.38),
      0 10px 24px -14px rgba(197,168,90,0.56),
      0 0 0 1px rgba(197,168,90,0.18) !important;
  }

  .catalog-tab-button.is-active, #view-catalogo .catalog-tab-button.is-active, .premium-filter-button.is-active, #view-catalogo .premium-filter-button.is-active{
    background: #C5A85A !important;
    border: 1px solid #C5A85A !important;
    color: #071522 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.32),
      0 10px 24px -14px rgba(197,168,90,0.48),
      0 0 0 1px rgba(197,168,90,0.16) !important;
  }

  .mobile-nav-link.is-active{
    background: rgba(197, 168, 90, 0.18) !important;
    border: 1px solid rgba(197, 168, 90, 0.72) !important;
    color: #C5A85A !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 10px 22px -18px rgba(197,168,90,0.26) !important;
  }


  /* =========================================================
     AJUSTES v76 · OCULTAR BARRA SUPERIOR DE GOOGLE TRANSLATE
     ========================================================= */
  html, body, html.translated-ltr, html.translated-rtl, body.translated-ltr, body.translated-rtl{
    top: 0 !important;
    margin-top: 0 !important;
  }

  body > .skiptranslate, body > iframe.skiptranslate, iframe.goog-te-banner-frame, iframe[class*="goog-te-banner"], iframe[class*="VIpgJd-ZVi9od-ORHb"], .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, .goog-te-balloon-frame, .goog-te-menu-frame, .goog-te-spinner-pos, .goog-tooltip, #goog-gt-tt, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Evita que el traductor reserve espacio por encima del header sticky. */
  #site-header{
    top: 0 !important;
  }


  /* =========================================================
     AJUSTES v77 · REDES SOCIALES MÓVIL CON ESTILO HEADER/FOOTER
     ========================================================= */
  .mobile-social-links .social-link{
    width: 2.7rem !important;
    height: 2.7rem !important;
    min-width: 2.7rem !important;
    min-height: 2.7rem !important;
    border-radius: 0.82rem !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(255,255,255,0.03),
      0 16px 30px -20px rgba(0,0,0,0.58) !important;
    color: #FFFFFF !important;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
  }

  .mobile-social-links .social-link i{
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.08));
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
  }

  .mobile-social-links .social-link--facebook i{
    color: #3B82F6 !important;
    text-shadow: 0 1px 8px rgba(59,130,246,0.28);
  }

  .mobile-social-links .social-link--instagram i{
    color: #E1306C !important;
    text-shadow: 0 1px 8px rgba(225,48,108,0.28);
  }

  .mobile-social-links .social-link--tiktok i{
    color: #F8FAFC !important;
    text-shadow: 0 1px 8px rgba(248,250,252,0.18);
  }

  .mobile-social-links .social-link--whatsapp i{
    color: #25D366 !important;
    text-shadow: 0 1px 8px rgba(37,211,102,0.28);
  }

  .mobile-social-links .social-link:hover, .mobile-social-links .social-link:focus-visible{
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.26) !important;
    transform: translateY(-0.08rem) scale(1.02) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(255,255,255,0.05),
      0 20px 34px -20px rgba(0,0,0,0.66),
      0 0 0 1px rgba(255,255,255,0.06) !important;
  }

  .mobile-social-links .social-link--facebook:hover i, .mobile-social-links .social-link--facebook:focus-visible i{
    color: #60A5FA !important;
    text-shadow: 0 1px 10px rgba(96,165,250,0.34);
  }

  .mobile-social-links .social-link--instagram:hover i, .mobile-social-links .social-link--instagram:focus-visible i{
    color: #F04F88 !important;
    text-shadow: 0 1px 10px rgba(240,79,136,0.34);
  }

  .mobile-social-links .social-link--tiktok:hover i, .mobile-social-links .social-link--tiktok:focus-visible i{
    color: #FFFFFF !important;
    text-shadow: 0 1px 10px rgba(255,255,255,0.22);
  }

  .mobile-social-links .social-link--whatsapp:hover i, .mobile-social-links .social-link--whatsapp:focus-visible i{
    color: #34EB7A !important;
    text-shadow: 0 1px 10px rgba(52,235,122,0.34);
  }


  /* =========================================================
     AJUSTES v78 · CATÁLOGO, CERTIFICACIÓN, TÉRMINOS Y VERIFICACIÓN
     ========================================================= */
  .certification-trust-banner{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    max-width: 52rem;
    margin-top: 1.25rem;
    padding: clamp(0.9rem, 2vw, 1.15rem);
    border: 1px solid rgba(197, 168, 90, 0.24);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 38px -30px rgba(0,0,0,0.82);
    backdrop-filter: blur(14px) saturate(1.04);
    -webkit-backdrop-filter: blur(14px) saturate(1.04);
  }

  .certification-trust-banner > i{
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.78rem;
    color: #C5A85A;
    background: rgba(197,168,90,0.10);
    border: 1px solid rgba(197,168,90,0.22);
  }

  .certification-trust-banner strong{
    display: block;
    color: #FFFFFF;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .certification-trust-banner p{
    margin-top: 0.3rem;
    color: #AEBECD;
    font-size: 0.74rem;
    line-height: 1.55;
  }

  .premium-certification-policy{
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(56,189,248,0.20);
    background: rgba(56,189,248,0.07);
    color: #C8D7E4;
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .premium-certification-policy strong{ color: #FFFFFF; }

  .premium-cert-back-features{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.45rem 0.8rem;
  }

  .premium-cert-back-features span{
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
  }

  .verification-shell{
    min-height: 70svh;
    background:
      radial-gradient(circle at 12% 8%, rgba(56,189,248,0.10), transparent 30%),
      radial-gradient(circle at 88% 12%, rgba(197,168,90,0.08), transparent 26%),
      #020C1B;
    color: #FFFFFF;
  }

  .verification-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.1rem, 3vw, 2rem);
  }

  @media (min-width: 960px) {
    .verification-layout{
      grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
      align-items: start;
    }
  }

  .verification-card, .verification-source-card{
    min-width: 0;
    padding: clamp(1.1rem, 3vw, 1.7rem);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1.15rem;
    background: rgba(255,255,255,0.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 54px -38px rgba(0,0,0,0.94);
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
  }

  .verification-form{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 1.15rem;
  }

  @media (min-width: 640px) {
    .verification-form{
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
    }
  }

  .verification-input{
    width: 100%;
    min-height: 3.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 0.82rem;
    background: rgba(255,255,255,0.055);
    color: #FFFFFF;
    font-size: 0.9rem;
    line-height: 1.35;
    outline: none;
  }

  .verification-input::placeholder{ color: #8293A4; }
  .verification-input:focus{
    border-color: rgba(197,168,90,0.55);
    box-shadow: 0 0 0 3px rgba(197,168,90,0.10);
  }

  .verification-button{
    min-height: 3.2rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.82rem;
    border: 1px solid #C5A85A;
    background: #C5A85A;
    color: #071522;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 16px 30px -20px rgba(197,168,90,0.52), inset 0 1px 0 rgba(255,255,255,0.34);
  }

  .verification-button:hover, .verification-button:focus-visible{
    background: #FFE08A;
    border-color: #FFE08A;
    outline: none;
  }

  .verification-results{
    margin-top: 1rem;
  }

  .verification-empty, .verification-error, .verification-success{
    padding: 1rem;
    border-radius: 0.9rem;
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .verification-empty{
    border: 1px dashed rgba(255,255,255,0.16);
    color: #93A4B5;
  }

  .verification-error{
    border: 1px solid rgba(244,63,94,0.26);
    background: rgba(244,63,94,0.08);
    color: #FDA4AF;
  }

  .verification-success{
    border: 1px solid rgba(37,211,102,0.25);
    background: rgba(37,211,102,0.08);
    color: #B7F7CF;
  }

  .verification-result-list{
    display: grid;
    gap: 0.75rem;
    margin-top: 0.8rem;
  }

  .verification-result-item{
    padding: 0.95rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.035);
  }

  .verification-result-item h3{
    color: #FFFFFF;
    font-size: 0.84rem;
    line-height: 1.45;
    font-weight: 800;
  }

  .verification-result-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin-top: 0.45rem;
    color: #93A4B5;
    font-size: 0.68rem;
  }

  .verification-source-list{
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
  }

  .verification-source-item{
    padding: 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.035);
  }

  .verification-source-item.is-active{
    border-color: rgba(37,211,102,0.26);
  }

  .verification-source-status{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.66rem;
    font-weight: 800;
    color: #6EE7A4;
  }

  .verification-source-status.is-progress{ color: #C5A85A; }

  

  

  

  

  

  

  

  

  .terms-acceptance{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    padding: 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.035);
  }

  .terms-acceptance input{
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
    accent-color: #25D366;
  }

  .terms-acceptance label{
    color: #AEBECD;
    font-size: 0.72rem;
    line-height: 1.55;
  }

  

  @media (max-width: 420px) {
    .certification-trust-banner{ grid-template-columns: 1fr; }
    .certification-trust-banner > i{ width: 2.25rem; height: 2.25rem; }
  }


  /* =========================================================
     AJUSTES v79 · TERCERA PESTAÑA + RESULTADO EN UN SOLO CUADRO
     ========================================================= */
  #view-catalogo .catalog-tabs-shell{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 48rem);
    max-width: 100%;
    gap: 0.38rem;
  }

  #view-catalogo .catalog-tab-button{
    width: 100%;
    min-width: 0;
    min-height: 3.15rem;
    height: auto;
    padding: clamp(0.68rem, 2vw, 0.9rem) clamp(0.48rem, 2vw, 1.2rem) !important;
    font-size: clamp(0.58rem, 1.8vw, 0.76rem) !important;
    line-height: 1.22;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .catalog-verification-panel{
    min-height: auto;
    margin-top: 0;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
  }

  .verification-person-card{
    overflow: hidden;
    border: 1px solid rgba(37,211,102,0.26);
    border-radius: 1rem;
    background: rgba(255,255,255,0.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 46px -34px rgba(0,0,0,0.86);
  }

  .verification-person-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.35rem);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(37,211,102,0.07);
  }

  .verification-person-kicker{
    margin: 0 0 0.3rem;
    color: #6EE7A4;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .verification-person-header h3{
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.3;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .verification-person-header p:last-child{
    margin: 0.38rem 0 0;
    color: #9FB0C1;
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .verification-person-count{
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0.45rem;
    border-radius: 0.75rem;
    background: #25D366;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: 0 14px 28px -18px rgba(37,211,102,0.72), inset 0 1px 0 rgba(255,255,255,0.22);
  }

  .verification-table-wrap{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .verification-table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .verification-table th, .verification-table td{
    padding: clamp(0.78rem, 2.4vw, 1rem);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .verification-table th:first-child, .verification-table td:first-child{
    width: 72%;
  }

  .verification-table th:last-child, .verification-table td:last-child{
    width: 28%;
  }

  .verification-table th{
    background: rgba(255,255,255,0.045);
    color: #C5A85A;
    font-size: 0.65rem;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .verification-table td{
    color: #EDF4FA;
    font-size: clamp(0.72rem, 2vw, 0.82rem);
    line-height: 1.5;
  }

  .verification-table tbody tr:last-child td{
    border-bottom: 0;
  }

  .verification-table tbody tr:hover{
    background: rgba(255,255,255,0.025);
  }

  .verification-type-badge{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.38rem 0.52rem;
    border: 1px solid rgba(197,168,90,0.24);
    border-radius: 0.55rem;
    background: rgba(197,168,90,0.08);
    color: #FFE08A;
    font-size: 0.64rem;
    line-height: 1.3;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  @media (max-width: 430px) {
    #view-catalogo .catalog-tabs-shell{
      gap: 0.28rem;
      padding: 0.34rem !important;
    }

    #view-catalogo .catalog-tab-button{
      min-height: 3.45rem;
      padding-inline: 0.34rem !important;
      letter-spacing: 0.02em;
    }

    .catalog-verification-panel{
      padding: 0.85rem;
      border-radius: 1rem;
    }

    .verification-person-header{
      gap: 0.7rem;
    }

    .verification-table th:first-child, .verification-table td:first-child{
      width: 68%;
    }

    .verification-table th:last-child, .verification-table td:last-child{
      width: 32%;
    }
  }


  /* =========================================================
     AJUSTES v80 · CATÁLOGO AZUL, ESTRELLAS Y BÚSQUEDA INTELIGENTE
     ========================================================= */
  #view-catalogo{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #020C1B !important;
  }

  #view-catalogo::before, #view-catalogo::after{
    content: "";
    position: absolute;
    inset: -35rem 0 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle, rgba(147,197,253,0.78) 0 1px, transparent 1.8px),
      radial-gradient(circle, rgba(255,255,255,0.72) 0 1px, transparent 1.7px),
      radial-gradient(circle, rgba(96,165,250,0.58) 0 1.2px, transparent 2px);
    background-size: 8.5rem 10.5rem, 13rem 16rem, 19rem 23rem;
    background-position: 1rem 0, 6rem 3rem, 2rem 8rem;
    opacity: 0.42;
    animation: cefein-stars-fall 24s linear infinite;
  }

  #view-catalogo::after{
    background-size: 11rem 14rem, 17rem 20rem, 23rem 28rem;
    opacity: 0.24;
    filter: blur(0.2px);
    animation-duration: 38s;
    animation-delay: -15s;
  }

  #view-catalogo > *{
    position: relative;
    z-index: 1;
  }

  #view-catalogo > div, #view-catalogo .catalog-panel, #view-catalogo .catalog-premium-zone, #view-catalogo .verification-shell{
    background-color: transparent !important;
  }

  #view-catalogo > div:first-child{
    background: linear-gradient(180deg, rgba(2,12,27,0.98), rgba(7,26,54,0.92)) !important;
  }

  #view-catalogo > div:nth-child(2){
    background: linear-gradient(180deg, rgba(2,12,27,0.94), rgba(4,19,42,0.98)) !important;
  }

  #view-catalogo .catalog-tabs-shell, #view-catalogo .catalog-premium-zone, #view-catalogo .verification-card, #view-catalogo .verification-source-card, #view-catalogo .verification-person-card, #view-catalogo .verification-candidates{
    background: rgba(7,26,54,0.78) !important;
    border-color: rgba(96,165,250,0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 58px -38px rgba(0,0,0,0.88) !important;
    backdrop-filter: blur(18px) saturate(1.06);
    -webkit-backdrop-filter: blur(18px) saturate(1.06);
  }

  #view-catalogo .catalog-tab-button, #view-catalogo .premium-filter-button, #view-catalogo .verification-button, #view-catalogo .verification-candidate-button, #view-catalogo .verification-results-back{
    border-color: rgba(96,165,250,0.20) !important;
  }

  #view-catalogo .catalog-tab-button.is-active, #view-catalogo .premium-filter-button.is-active{
    background: #0F3C70 !important;
    border-color: #2F6EA8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 15px 30px -20px rgba(47,110,168,0.64), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  }

  .catalog-panel-toolbar{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
  }

  .verification-results-back{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    background: rgba(15,60,112,0.48);
    border: 1px solid rgba(96,165,250,0.20);
    color: #DCEBFA;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 28px -22px rgba(0,0,0,0.78);
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  .verification-results-back:hover, .verification-results-back:focus-visible{
    transform: translateY(-0.08rem);
    background: rgba(20,76,138,0.66);
    border-color: rgba(96,165,250,0.38) !important;
    outline: none;
  }

  .verification-candidates{
    overflow: hidden;
    border: 1px solid rgba(96,165,250,0.18);
    border-radius: 1.15rem;
  }

  .verification-candidates-heading{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 3vw, 1.4rem);
    border-bottom: 1px solid rgba(96,165,250,0.14);
  }

  .verification-candidates-heading h3{
    margin-top: 0.2rem;
    color: #FFFFFF;
    font-size: clamp(1rem, 3.5vw, 1.35rem);
    font-weight: 850;
  }

  .verification-candidates-heading p:last-child{
    margin-top: 0.35rem;
    color: #94AFC8;
    font-size: 0.76rem;
    line-height: 1.55;
  }

  .verification-candidate-list{
    display: grid;
    gap: 0.58rem;
    padding: clamp(0.8rem, 2.5vw, 1.1rem);
  }

  .verification-candidate-button{
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-height: 4.2rem;
    padding: 0.78rem;
    border-radius: 0.82rem;
    background: rgba(4,19,42,0.72);
    border: 1px solid rgba(96,165,250,0.14);
    color: #FFFFFF;
    text-align: left;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  .verification-candidate-button:hover, .verification-candidate-button:focus-visible{
    transform: translateY(-0.08rem);
    background: rgba(10,45,84,0.86);
    border-color: rgba(96,165,250,0.36) !important;
    outline: none;
  }

  .verification-candidate-icon{
    display: inline-grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.72rem;
    background: rgba(37,99,235,0.16);
    border: 1px solid rgba(96,165,250,0.22);
    color: #79B8FF;
  }

  .verification-candidate-copy{
    min-width: 0;
  }

  .verification-candidate-copy strong, .verification-candidate-copy small{
    display: block;
    overflow-wrap: anywhere;
  }

  .verification-candidate-copy strong{
    color: #F8FBFF;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .verification-candidate-copy small{
    margin-top: 0.2rem;
    color: #8FAAC4;
    font-size: 0.69rem;
  }

  .verification-candidate-action{
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #7AB9FF;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .verification-program-issuer{
    display: block;
    margin-top: 0.36rem;
    color: #7F9DB9;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.45;
  }

  .verification-results-back{
    margin: 0.9rem 1rem 0;
  }

  .verification-whatsapp-help{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.9rem;
    padding: 0.72rem 0.9rem;
    border-radius: 0.72rem;
    background: #25D366;
    color: #FFFFFF;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: 0 16px 32px -22px rgba(37,211,102,0.72);
  }

  @keyframes cefein-stars-fall {
    from { background-position: 1rem -30rem, 6rem -42rem, 2rem -58rem; }
    to { background-position: 1rem 60rem, 6rem 82rem, 2rem 108rem; }
  }

  @media (max-width: 639px) {
    .catalog-tabs-shell{
      display: grid !important;
      width: 100%;
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }

    .verification-candidate-button{
      grid-template-columns: auto minmax(0,1fr);
    }

    .verification-candidate-action{
      grid-column: 2;
      white-space: normal;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #view-catalogo::before, #view-catalogo::after{
      animation: none !important;
    }
  }


  /* =========================================================
     AJUSTES v83 · PESTAÑAS DEL CATÁLOGO CON TEXTO SIEMPRE VISIBLE
     ========================================================= */
  #view-catalogo .catalog-tabs-shell{
    gap: 0.42rem !important;
    padding: 0.42rem !important;
    border-radius: 1rem !important;
    background: rgba(6, 25, 52, 0.86) !important;
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 22px 48px -32px rgba(0,0,0,0.92) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  #view-catalogo .catalog-tab-button{
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    border-radius: 0.72rem !important;
    background: rgba(10, 35, 65, 0.88) !important;
    border: 1px solid rgba(96, 165, 250, 0.24) !important;
    color: #DCE8F5 !important;
    -webkit-text-fill-color: #DCE8F5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 850 !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transition:
      background-color 260ms cubic-bezier(.2,.8,.2,1),
      border-color 260ms cubic-bezier(.2,.8,.2,1),
      color 140ms linear,
      box-shadow 260ms cubic-bezier(.2,.8,.2,1),
      transform 220ms cubic-bezier(.2,.8,.2,1) !important;
    will-change: transform, background-color, box-shadow;
  }

  /* Fuerza la visibilidad incluso si Google Translate agrega spans/font internos. */
  #view-catalogo .catalog-tab-button *, #view-catalogo .catalog-tab-button font, #view-catalogo .catalog-tab-button span{
    position: relative !important;
    z-index: 2 !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: inherit !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }

  #view-catalogo .catalog-tab-button:not(.is-active):hover, #view-catalogo .catalog-tab-button:not(.is-active):focus-visible{
    background: rgba(16, 55, 96, 0.96) !important;
    border-color: rgba(96, 165, 250, 0.46) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 12px 26px -20px rgba(59,130,246,0.48) !important;
    outline: none !important;
  }

  #view-catalogo .catalog-tab-button.is-active, #view-catalogo .catalog-tab-button.is-active:hover, #view-catalogo .catalog-tab-button.is-active:focus-visible{
    background: #C5A85A !important;
    border-color: #C5A85A !important;
    color: #071522 !important;
    -webkit-text-fill-color: #071522 !important;
    text-shadow: none !important;
    transform: translateY(0) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.46),
      0 14px 30px -18px rgba(197,168,90,0.64),
      0 0 0 1px rgba(197,168,90,0.18) !important;
    animation: catalogTabActivate 360ms cubic-bezier(.2,.85,.25,1) both;
    outline: none !important;
  }

  #view-catalogo .catalog-tab-button.is-active *, #view-catalogo .catalog-tab-button.is-active font, #view-catalogo .catalog-tab-button.is-active span{
    color: #071522 !important;
    -webkit-text-fill-color: #071522 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
  }

  #view-catalogo .catalog-tab-button:focus-visible{
    outline: 2px solid rgba(147,197,253,0.78) !important;
    outline-offset: 2px !important;
  }

  @keyframes catalogTabActivate {
    0% {
      transform: scale(0.975);
      filter: brightness(0.92);
    }
    55% {
      transform: scale(1.018);
      filter: brightness(1.06);
    }
    100% {
      transform: scale(1);
      filter: brightness(1);
    }
  }

  @media (max-width: 640px) {
    #view-catalogo .catalog-tabs-shell{
      gap: 0.28rem !important;
      padding: 0.32rem !important;
      border-radius: 0.82rem !important;
    }

    #view-catalogo .catalog-tab-button{
      border-radius: 0.58rem !important;
      font-size: clamp(0.54rem, 2.55vw, 0.68rem) !important;
      line-height: 1.18 !important;
      padding: 0.68rem 0.34rem !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #view-catalogo .catalog-tab-button, #view-catalogo .catalog-tab-button.is-active{
      animation: none !important;
      transition: none !important;
    }
  }


  /* =========================================================
     AJUSTES v84 · HEADER TOTALMENTE ADAPTATIVO + RENDIMIENTO
     ========================================================= */

  /* El contenido del header nunca puede desbordar el viewport. */
  #site-header, #site-header > div, #site-header #header-main-row{
    max-width: 100% !important;
  }

  #site-header > div{
    width: min(100%, 96rem) !important;
    padding-inline: clamp(0.55rem, 1.25vw, 1rem) !important;
  }

  #site-header #header-main-row{
    min-width: 0 !important;
  }

  #site-header #header-desktop-actions{
    min-width: max-content !important;
    flex-shrink: 1 !important;
  }

  #site-header .header-enroll-button{
    min-width: max-content !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    padding: clamp(0.62rem, 0.75vw, 0.78rem) clamp(0.72rem, 1vw, 1rem) !important;
    font-size: clamp(0.58rem, 0.68vw, 0.7rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* En tablet se usa el header móvil: evita colisiones y recortes. */
  @media (min-width: 768px) and (max-width: 1023px) {
    #site-header #header-main-row{
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      min-height: 3rem;
    }

    #site-header #header-desktop-logo, #site-header #header-main-nav, #site-header #header-desktop-actions{
      display: none !important;
    }

    #site-header #header-main-row > .md\:hidden{
      display: flex !important;
    }

    #site-header #header-main-row > .md\:hidden.pointer-events-none{
      display: flex !important;
    }

    #mobile-menu{
      display: none;
    }

    #mobile-menu:not(.hidden){
      display: block !important;
    }
  }

  /* Laptop: reduce elementos secundarios antes de reducir el botón. */
  @media (min-width: 1024px) and (max-width: 1399px) {
    #site-header #header-main-row{
      grid-template-columns: minmax(5.4rem, 0.72fr) minmax(0, auto) minmax(8rem, 0.9fr) !important;
      column-gap: clamp(0.28rem, 0.7vw, 0.62rem) !important;
    }

    #site-header #header-desktop-logo img{
      width: clamp(6.3rem, 8vw, 7.6rem) !important;
      max-width: 100% !important;
    }

    #site-header #header-main-nav{
      gap: 0.08rem !important;
      max-width: 100% !important;
    }

    #site-header #header-main-nav .nav-link{
      padding: 0.58rem clamp(0.48rem, 0.72vw, 0.68rem) !important;
      font-size: clamp(0.56rem, 0.66vw, 0.65rem) !important;
      letter-spacing: 0.028em !important;
    }

    #site-header .header-social-links, #site-header > div .header-language-switcher:not(.header-language-switcher--popover){
      display: none !important;
    }

    #site-header .header-social-menu{
      display: block !important;
    }

    #site-header #header-desktop-actions{
      gap: 0.36rem !important;
    }

    #site-header .header-enroll-button i{
      display: none !important;
    }
  }

  @media (min-width: 1400px) {
    #site-header #header-main-row{
      grid-template-columns: minmax(7rem, 0.85fr) minmax(0, auto) minmax(19rem, 1.15fr) !important;
      column-gap: clamp(0.5rem, 1vw, 1rem) !important;
    }

    #site-header .header-social-links{
      display: flex !important;
    }

    #site-header .header-social-menu{
      display: none !important;
    }

    #site-header > div .header-language-switcher:not(.header-language-switcher--popover){
      display: inline-flex !important;
    }
  }

  /* Transiciones rápidas: solo propiedades baratas para la GPU. */
  #site-header .nav-link, #site-header .header-enroll-button, #site-header .social-link, .catalog-tab-button, .premium-filter-button, .premium-action-button, .mobile-nav-link, .language-option{
    transition-property: transform, opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: 150ms !important;
    transition-timing-function: ease-out !important;
  }

  /* Evita animar filtros en decenas de palabras simultáneamente. */
  .community-word{
    animation: none !important;
    filter: none !important;
  }

  .community-word-lane-track{
    animation-duration: max(var(--lane-duration, 20s), 28s) !important;
    transform: translate3d(0,0,0);
  }

  /* Una sola capa de estrellas en laptops: conserva el efecto y reduce repintado. */
  @media (max-width: 1599px) {
    #view-catalogo::after{
      display: none !important;
    }

    #view-catalogo::before{
      animation-duration: 34s !important;
      opacity: 0.28 !important;
    }
  }

  /* Tarjetas fuera de pantalla no fuerzan layout ni pintura. */
  .premium-course-card, .home-program-card, .resource-card, .verification-result-card{
    content-visibility: auto;
    contain-intrinsic-size: 22rem;
    contain: layout paint style;
  }

  /* Las animaciones continuas se pausan automáticamente fuera de pantalla. */
  .is-performance-paused, .is-performance-paused *{
    animation-play-state: paused !important;
  }

  html.page-not-visible *, html.page-not-visible *::before, html.page-not-visible *::after{
    animation-play-state: paused !important;
  }

  
  html.performance-lite .community-word-lane-track{
    animation-duration: 40s !important;
  }

  html.performance-lite #view-catalogo::after, html.performance-lite .premium-course-card::before, html.performance-lite .premium-course-card::after{
    display: none !important;
  }

  html.performance-lite .premium-course-card, html.performance-lite .home-program-card, html.performance-lite .catalog-tab-shell, html.performance-lite .header-social-popover, html.performance-lite .whatsapp-panel{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.performance-lite #hero-deck.fan-next #deck-card-active, html.performance-lite #hero-deck.fan-prev #deck-card-active, html.performance-lite #hero-deck.fan-next #deck-card-next, html.performance-lite #hero-deck.fan-prev #deck-card-prev{
    animation-duration: 460ms !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .community-word-lane-track, #view-catalogo::before, #view-catalogo::after{
      animation: none !important;
    }
  }


  /* =========================================================
     AJUSTES v85 · PORTADA CON FADE, SIN PARALLAX DE MOUSE
     ========================================================= */
  #hero-shell{
    isolation: isolate;
  }

  #hero-shell #hero-bg-container, #hero-shell #three-neural-backdrop, #hero-shell #hero-grid, #hero-shell #hero-deck{
    transition:
      opacity 360ms ease,
      transform 560ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  

  

  

  

  

  /* Desactiva el movimiento por cursor y conserva una composición estable. */
  #deck-card-active{
    --tilt-x: 0deg !important;
    --tilt-y: 0deg !important;
    --tilt-scale: 1 !important;
    transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) scale3d(1,1,1) !important;
    transition:
      opacity 360ms ease,
      transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 360ms ease !important;
  }

  /* El abanico queda estático al pasar el mouse y solo cambia mediante fade. */
  #hero-deck:hover::before{
    opacity: 0.55 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  #hero-deck:hover #deck-card-active{
    filter: none !important;
    transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) scale3d(1,1,1) !important;
  }

  #hero-deck:hover #deck-card-prev{
    opacity: 0.54 !important;
    filter: saturate(0.84) brightness(0.72) !important;
    transform:
      translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px)
      rotateZ(calc(var(--fan-rotate) * -1))
      rotateY(11deg)
      scale(var(--fan-side-scale)) !important;
  }

  #hero-deck:hover #deck-card-next{
    opacity: 0.54 !important;
    filter: saturate(0.84) brightness(0.72) !important;
    transform:
      translate3d(var(--fan-x), var(--fan-y), -128px)
      rotateZ(var(--fan-rotate))
      rotateY(-11deg)
      scale(var(--fan-side-scale)) !important;
  }

  #hero-deck.fan-next #deck-card-active, #hero-deck.fan-next #deck-card-prev, #hero-deck.fan-next #deck-card-next, #hero-deck.fan-prev #deck-card-active, #hero-deck.fan-prev #deck-card-prev, #hero-deck.fan-prev #deck-card-next{
    animation: none !important;
  }

  

  @media (prefers-reduced-motion: reduce) {
    #hero-shell #hero-bg-container, #hero-shell #three-neural-backdrop, #hero-shell #hero-grid, #hero-shell #hero-deck, #deck-card-active{
      transition: none !important;
    }
  }


  /* =========================================================
     AJUSTES v86 · HOVER LIGERO + ABANICO FLUIDO AUTOMÁTICO
     Solo transform y opacity: evita filtros costosos en cada frame.
     ========================================================= */
  #hero-deck, #deck-card-active, #deck-card-prev, #deck-card-next{
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #card-prev-img, #card-next-img{
    animation: none !important;
  }

  /* Hover simple: una ampliación discreta sin abrir el abanico ni aplicar filtros. */
  #hero-deck:hover::before{
    opacity: 0.58 !important;
    transform: translate(-50%, -50%) scale(1.01) !important;
  }

  #hero-deck:hover #deck-card-active{
    filter: none !important;
    transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) scale3d(1.015, 1.015, 1.015) !important;
    box-shadow: 0 32px 64px -30px rgba(2,12,27,0.92) !important;
  }

  #hero-deck:hover #deck-card-prev{
    opacity: 0.56 !important;
    filter: none !important;
    transform:
      translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px)
      rotateZ(calc(var(--fan-rotate) * -1))
      rotateY(11deg)
      scale(calc(var(--fan-side-scale) + 0.008)) !important;
  }

  #hero-deck:hover #deck-card-next{
    opacity: 0.56 !important;
    filter: none !important;
    transform:
      translate3d(var(--fan-x), var(--fan-y), -128px)
      rotateZ(var(--fan-rotate))
      rotateY(-11deg)
      scale(calc(var(--fan-side-scale) + 0.008)) !important;
  }

  #deck-card-active, #deck-card-prev, #deck-card-next{
    transition:
      transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 180ms ease,
      box-shadow 180ms ease !important;
  }

  /* Abanico GPU-friendly: movimiento breve y continuo, sin blur ni brillo animado. */
  #hero-deck.fan-next #deck-card-active{
    animation: cefeinFanActiveNext 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #hero-deck.fan-prev #deck-card-active{
    animation: cefeinFanActivePrev 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #hero-deck.fan-next #deck-card-prev{
    animation: cefeinFanPrevOut 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #hero-deck.fan-next #deck-card-next{
    animation: cefeinFanNextIn 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #hero-deck.fan-prev #deck-card-prev{
    animation: cefeinFanPrevIn 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #hero-deck.fan-prev #deck-card-next{
    animation: cefeinFanNextOut 680ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  #hero-deck.fan-next #deck-card-active::before, #hero-deck.fan-prev #deck-card-active::before, #hero-deck.fan-next::before, #hero-deck.fan-prev::before, #hero-deck.fan-next::after, #hero-deck.fan-prev::after{
    animation: none !important;
  }

  @keyframes cefeinFanActiveNext {
    0% {
      opacity: 1;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateZ(0) scale(1);
    }
    42% {
      opacity: 0.48;
      transform: perspective(1350px) translate3d(-4.5%, -2.2%, 30px) rotateZ(-1.4deg) scale(0.978);
    }
    58% {
      opacity: 0.56;
      transform: perspective(1350px) translate3d(3.5%, -1.8%, 34px) rotateZ(1deg) scale(0.984);
    }
    100% {
      opacity: 1;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateZ(0) scale(1);
    }
  }

  @keyframes cefeinFanActivePrev {
    0% {
      opacity: 1;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateZ(0) scale(1);
    }
    42% {
      opacity: 0.48;
      transform: perspective(1350px) translate3d(4.5%, -2.2%, 30px) rotateZ(1.4deg) scale(0.978);
    }
    58% {
      opacity: 0.56;
      transform: perspective(1350px) translate3d(-3.5%, -1.8%, 34px) rotateZ(-1deg) scale(0.984);
    }
    100% {
      opacity: 1;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateZ(0) scale(1);
    }
  }

  @keyframes cefeinFanPrevOut {
    0%, 100% {
      opacity: 0.54;
      transform: translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px) rotateZ(calc(var(--fan-rotate) * -1)) rotateY(11deg) scale(var(--fan-side-scale));
    }
    50% {
      opacity: 0.30;
      transform: translate3d(calc(var(--fan-x) * -1.1), calc(var(--fan-y) + 1.2%), -150px) rotateZ(calc(var(--fan-rotate) * -1.08)) rotateY(12deg) scale(calc(var(--fan-side-scale) - 0.018));
    }
  }

  @keyframes cefeinFanNextIn {
    0%, 100% {
      opacity: 0.54;
      transform: translate3d(var(--fan-x), var(--fan-y), -128px) rotateZ(var(--fan-rotate)) rotateY(-11deg) scale(var(--fan-side-scale));
    }
    50% {
      opacity: 0.78;
      transform: translate3d(calc(var(--fan-x) * 0.78), calc(var(--fan-y) - 1.4%), -76px) rotateZ(calc(var(--fan-rotate) * 0.72)) rotateY(-7deg) scale(calc(var(--fan-side-scale) + 0.035));
    }
  }

  @keyframes cefeinFanPrevIn {
    0%, 100% {
      opacity: 0.54;
      transform: translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px) rotateZ(calc(var(--fan-rotate) * -1)) rotateY(11deg) scale(var(--fan-side-scale));
    }
    50% {
      opacity: 0.78;
      transform: translate3d(calc(var(--fan-x) * -0.78), calc(var(--fan-y) - 1.4%), -76px) rotateZ(calc(var(--fan-rotate) * -0.72)) rotateY(7deg) scale(calc(var(--fan-side-scale) + 0.035));
    }
  }

  @keyframes cefeinFanNextOut {
    0%, 100% {
      opacity: 0.54;
      transform: translate3d(var(--fan-x), var(--fan-y), -128px) rotateZ(var(--fan-rotate)) rotateY(-11deg) scale(var(--fan-side-scale));
    }
    50% {
      opacity: 0.30;
      transform: translate3d(calc(var(--fan-x) * 1.1), calc(var(--fan-y) + 1.2%), -150px) rotateZ(calc(var(--fan-rotate) * 1.08)) rotateY(-12deg) scale(calc(var(--fan-side-scale) - 0.018));
    }
  }

  /* Tarjetas del catálogo: hover corto, sin cambios de filtros ni desplazamientos grandes. */
  .home-program-card, #view-catalogo .premium-course-card{
    transition:
      transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1),
      border-color 170ms ease,
      box-shadow 170ms ease !important;
  }

  .home-program-card:hover, .home-program-card:focus-within, #view-catalogo .premium-course-card:hover, #view-catalogo .premium-course-card:focus-within{
    transform: translate3d(0, -2px, 0) scale(1.01) !important;
    box-shadow: 0 20px 42px -28px rgba(0,0,0,0.78) !important;
  }

  .home-program-card:hover .home-program-cover img, .home-program-card:focus-within .home-program-cover img, #view-catalogo .premium-course-card:hover .premium-course-photo, #view-catalogo .premium-course-card:focus-within .premium-course-photo{
    transform: none !important;
    filter: saturate(0.94) contrast(1.04) brightness(0.82) !important;
    transition: none !important;
  }

  .home-program-card::before, .home-program-card::after, #view-catalogo .premium-course-card::before, #view-catalogo .premium-course-card::after{
    animation: none !important;
  }

  @media (max-width: 767px), (prefers-reduced-motion: reduce) {
    #hero-deck.fan-next #deck-card-active, #hero-deck.fan-prev #deck-card-active, #hero-deck.fan-next #deck-card-prev, #hero-deck.fan-next #deck-card-next, #hero-deck.fan-prev #deck-card-prev, #hero-deck.fan-prev #deck-card-next{
      animation: none !important;
    }
  }


  /* =========================================================
     AJUSTES v95 · BASE OPTIMIZADA + CEREBRO INDEPENDIENTE
     ========================================================= */
  #three-neural-backdrop{
    opacity: 0.75 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }

  #three-neural-backdrop canvas{
    display: block;
    width: 100% !important;
    height: 100% !important;
    contain: strict;
    pointer-events: none;
  }

  

  #hero-deck, #deck-card-active, #deck-card-prev, #deck-card-next, .premium-course-card, .home-program-card, .resource-card{
    will-change: auto !important;
  }

  #deck-card-active, #deck-card-prev, #deck-card-next{
    transition-property: transform, opacity, box-shadow !important;
    transition-duration: 220ms !important;
    filter: none !important;
  }

  .premium-glass, .premium-glass-gold{
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .home-program-card, #view-catalogo .premium-course-card, #view-catalogo .premium-course-status, #view-catalogo .premium-investment, #view-catalogo .premium-action-button{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #home-async-showcase, #home-academic-showcase, #home-community-showcase, #view-catalogo, #view-recursos, #view-nosotros, #view-contacto{
    content-visibility: auto;
    contain-intrinsic-size: auto 56rem;
  }

  button, a, [role="button"], .nav-link, .mobile-nav-link{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #hero-prev-button, #hero-next-button{
    position: relative;
    z-index: 70;
    min-width: 2.75rem;
    min-height: 2.75rem;
    pointer-events: auto !important;
  }

  @media (hover: none), (pointer: coarse) {
    #hero-deck:hover #deck-card-active, #hero-deck:hover #deck-card-prev, #hero-deck:hover #deck-card-next, .home-program-card:hover, #view-catalogo .premium-course-card:hover{
      transform: none !important;
      filter: none !important;
    }

    #site-header, #hero-controls > button, .premium-glass, .premium-glass-gold{
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
  }

  @media (max-width: 767px) {
    #hero-controls{
      position: relative;
      z-index: 80;
      width: min(100%, 20rem) !important;
      padding-inline: 0.25rem;
    }

    #hero-bg-container{
      opacity: 0.82;
    }
  }

  html.page-not-visible #three-neural-backdrop canvas{
    visibility: hidden;
  }


  /* =========================================================
     AJUSTES v96 · TARJETAS ULTRAFLUIDAS + NAVEGACIÓN MÓVIL REAL
     ========================================================= */

  /* La marca CEFEIN funciona como marca de agua, no como dato principal. */
  #card-active-hud{
    position: relative !important;
    min-height: clamp(3rem, 7vw, 4.6rem);
    isolation: isolate;
  }

  #card-active-tag{
    position: relative;
    z-index: 2;
  }

  #card-active-num{
    position: absolute !important;
    top: clamp(-0.15rem, 0.4vw, 0.25rem) !important;
    right: clamp(-0.2rem, 0.3vw, 0.2rem) !important;
    z-index: 0 !important;
    display: block !important;
    max-width: 76% !important;
    color: rgba(255, 255, 255, 0.08) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.08) !important;
    opacity: 1 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: clamp(3rem, 7.4vw, 5.8rem) !important;
    font-weight: 900 !important;
    line-height: 0.8 !important;
    letter-spacing: 0.055em !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
    transform: none !important;
  }

  /* El contenido izquierdo permanece estable; solo cambian las portadas. */
  #hero-shell #hero-grid{
    transition: none !important;
  }

  

  #hero-shell #hero-bg-container{
    transition: opacity 220ms ease-out !important;
  }

  

  #hero-shell #hero-deck{
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease !important;
  }

  

  

  #hero-deck #deck-card-active, #hero-deck #deck-card-prev, #hero-deck #deck-card-next{
    filter: none !important;
    transition:
      transform 145ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 145ms ease,
      border-color 145ms ease,
      box-shadow 145ms ease !important;
  }

  /* Hover exclusivo para mouse: escala mínima, sin blur ni recoloreado. */
  @media (hover: hover) and (pointer: fine) {
    #hero-deck:hover #deck-card-active{
      filter: none !important;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) scale3d(1.008, 1.008, 1.008) !important;
      box-shadow: 0 28px 58px -32px rgba(2,12,27,0.84) !important;
    }

    #hero-deck:hover #deck-card-prev{
      opacity: 0.6 !important;
      filter: none !important;
      transform:
        translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px)
        rotateZ(calc(var(--fan-rotate) * -1))
        rotateY(11deg)
        scale(calc(var(--fan-side-scale) + 0.012)) !important;
    }

    #hero-deck:hover #deck-card-next{
      opacity: 0.6 !important;
      filter: none !important;
      transform:
        translate3d(var(--fan-x), var(--fan-y), -128px)
        rotateZ(var(--fan-rotate))
        rotateY(-11deg)
        scale(calc(var(--fan-side-scale) + 0.012)) !important;
    }
  }

  /* Cambio de portada: 420 ms y únicamente transform + opacity. */
  #hero-deck.fan-next #deck-card-active, #hero-deck.fan-prev #deck-card-active, #hero-deck.fan-next #deck-card-prev, #hero-deck.fan-next #deck-card-next, #hero-deck.fan-prev #deck-card-prev, #hero-deck.fan-prev #deck-card-next{
    animation-duration: 420ms !important;
    filter: none !important;
  }

  .hero-mobile-overlay{
    display: none;
  }

  @media (max-width: 767px) {
    #hero-deck{
      position: relative !important;
      overflow: visible !important;
    }

    #card-active-hud{
      min-height: 3.65rem;
    }

    #card-active-num{
      top: 0.15rem !important;
      right: -0.1rem !important;
      max-width: 78% !important;
      font-size: clamp(2.65rem, 15vw, 4.35rem) !important;
      color: rgba(255, 255, 255, 0.06) !important;
    }

    .hero-mobile-overlay{
      position: absolute;
      top: 50%;
      z-index: 110;
      display: grid;
      place-items: center;
      width: 3.15rem;
      min-width: 3.15rem;
      height: 3.15rem;
      min-height: 3.15rem;
      padding: 0;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      background: rgba(6, 20, 37, 0.86);
      color: #FFFFFF;
      box-shadow: 0 16px 32px -22px rgba(0,0,0,0.92);
      transform: translateY(-50%);
      pointer-events: auto !important;
      touch-action: manipulation !important;
      -webkit-tap-highlight-color: transparent;
    }

    .hero-mobile-overlay--prev{ left: 0.55rem; }
    .hero-mobile-overlay--next{ right: 0.55rem; }

    .hero-mobile-overlay:active{
      background: #C5A85A;
      color: #020C1B;
      transform: translateY(-50%) scale(0.96);
    }

    #hero-controls{
      z-index: 120 !important;
      pointer-events: auto !important;
    }

    #hero-prev-button, #hero-next-button{
      display: grid !important;
      place-items: center !important;
      width: 3rem !important;
      min-width: 3rem !important;
      height: 3rem !important;
      min-height: 3rem !important;
      padding: 0 !important;
      pointer-events: auto !important;
      touch-action: manipulation !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #hero-deck #deck-card-active, #hero-deck #deck-card-prev, #hero-deck #deck-card-next, #hero-shell #hero-bg-container, #hero-shell #hero-deck{
      transition: none !important;
      animation: none !important;
    }
  }


  /* =========================================================
     AJUSTES v97 · CAMBIO INSTANTÁNEO + CONTROLES INFERIORES
     ========================================================= */

  /* Se eliminan definitivamente las flechas superpuestas a la tarjeta. */
  .hero-mobile-overlay, #hero-prev-overlay, #hero-next-overlay{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* El abanico permanece quieto: el cambio usa un crossfade de 155 ms. */
  #hero-deck, #hero-deck #deck-card-active, #hero-deck #deck-card-prev, #hero-deck #deck-card-next{
    animation: none !important;
  }

  #hero-deck #deck-card-active, #hero-deck #deck-card-prev, #hero-deck #deck-card-next{
    transition:
      opacity 82ms linear,
      transform 110ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  

  

  #hero-shell #hero-bg-container{
    transition: opacity 125ms linear !important;
  }

  /* Controles inferiores: área táctil amplia y siempre por encima del deck. */
  #hero-controls{
    position: relative !important;
    z-index: 160 !important;
    isolation: isolate;
    pointer-events: auto !important;
    width: min(100%, 22rem) !important;
    min-height: 3.35rem;
    padding: 0.15rem 0.25rem;
  }

  #hero-prev-button, #hero-next-button{
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 3rem !important;
    width: 3rem !important;
    min-width: 3rem !important;
    height: 3rem !important;
    min-height: 3rem !important;
    padding: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 90ms ease,
      background-color 120ms ease,
      color 120ms ease,
      border-color 120ms ease !important;
  }

  #hero-prev-button:active, #hero-next-button:active{
    transform: scale(0.93) !important;
    background: #C5A85A !important;
    color: #020C1B !important;
  }

  #hero-dots-container{
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
    pointer-events: auto !important;
  }

  #hero-dots-container .hero-dot{
    min-width: 0.48rem;
    min-height: 0.48rem;
    padding: 0;
    touch-action: manipulation;
    pointer-events: auto !important;
  }

  @media (max-width: 767px) {
    #hero-controls{
      margin-top: 1rem !important;
      width: min(100%, 21rem) !important;
    }

    #hero-prev-button, #hero-next-button{
      flex-basis: 3.15rem !important;
      width: 3.15rem !important;
      min-width: 3.15rem !important;
      height: 3.15rem !important;
      min-height: 3.15rem !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #hero-deck #deck-card-active, #hero-deck #deck-card-prev, #hero-deck #deck-card-next, #hero-shell #hero-bg-container{
      transition: none !important;
    }
  }


  /* =========================================================
     AJUSTES v98 · SNAP INMEDIATO + CONTROLES INFERIORES REALES
     ========================================================= */

  /* Ninguna flecha flotante debe aparecer encima de la tarjeta. */
  .hero-mobile-overlay, #hero-prev-overlay, #hero-next-overlay{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Se neutraliza el crossfade retardado heredado. */
  

  #hero-shell #hero-bg-container{
    transition: opacity 75ms linear !important;
  }

  #hero-stage{
    position: relative !important;
    z-index: 40 !important;
    pointer-events: auto !important;
    isolation: isolate;
  }

  #hero-deck{
    pointer-events: auto !important;
  }

  /* Los únicos controles móviles son los del pie de la tarjeta. */
  #hero-controls{
    position: relative !important;
    z-index: 1000 !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: min(100%, 22rem) !important;
    min-height: 3.7rem !important;
    margin-inline: auto !important;
    padding: 0.25rem !important;
    pointer-events: auto !important;
    transform: translateZ(0);
  }

  #hero-prev-button, #hero-next-button{
    position: relative !important;
    z-index: 1001 !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 clamp(3.2rem, 12vw, 3.55rem) !important;
    width: clamp(3.2rem, 12vw, 3.55rem) !important;
    min-width: clamp(3.2rem, 12vw, 3.55rem) !important;
    height: clamp(3.2rem, 12vw, 3.55rem) !important;
    min-height: clamp(3.2rem, 12vw, 3.55rem) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 65ms ease, background-color 80ms linear, color 80ms linear !important;
  }

  #hero-prev-button > *, #hero-next-button > *{
    pointer-events: none !important;
  }

  #hero-prev-button:active, #hero-next-button:active{
    transform: scale(0.9) !important;
    background-color: #C5A85A !important;
    color: #020C1B !important;
  }

  #hero-dots-container{
    position: relative !important;
    z-index: 1001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    pointer-events: auto !important;
  }

  #hero-dots-container .hero-dot{
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  @media (max-width: 767px) {
    #hero-controls{
      margin-top: 0.75rem !important;
      width: min(calc(100% - 0.5rem), 22rem) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #hero-shell #hero-bg-container{
      transition: none !important;
    }
  }


  /* El contenedor invisible de WhatsApp no debe bloquear los controles del hero. */
  #whatsapp-widget, .whatsapp-widget{
    pointer-events: none !important;
  }

  #whatsapp-fab, .whatsapp-fab, #whatsapp-panel.is-open, .whatsapp-panel.is-open{
    pointer-events: auto !important;
  }

  #whatsapp-panel:not(.is-open), .whatsapp-panel:not(.is-open){
    pointer-events: none !important;
  }


  
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


  /* =========================================================
     AJUSTES v100 · MÁRGENES FLUIDOS DEL CATÁLOGO
     Espaciado interior consistente en móvil, laptop y escritorio.
     ========================================================= */
  #view-catalogo > div:nth-child(2){
    padding-block: clamp(1.5rem, 4vw, 3.75rem) !important;
  }

  #view-catalogo > div:nth-child(2) > .max-w-7xl{
    width: min(calc(100% - clamp(1.25rem, 4vw, 3rem)), 80rem) !important;
    max-width: 80rem !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  #view-catalogo .catalog-panel{
    width: 100% !important;
    min-width: 0 !important;
  }

  #view-catalogo .catalog-premium-zone{
    display: grid !important;
    gap: clamp(1.15rem, 2.4vw, 1.9rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: clamp(1rem, 2.5vw, 2rem) !important;
    border: 1px solid rgba(96,165,250,0.18) !important;
    border-radius: clamp(1rem, 2vw, 1.5rem) !important;
    overflow: hidden !important;
  }

  #view-catalogo .catalog-premium-heading{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-bottom: clamp(0.9rem, 1.8vw, 1.25rem) !important;
    gap: 0.85rem !important;
  }

  #view-catalogo .catalog-premium-heading > div, #view-catalogo .catalog-premium-copy, #view-catalogo .catalog-premium-title{
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #view-catalogo .catalog-premium-count{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #view-catalogo .premium-search-field{
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 639px) {
    #view-catalogo > div:nth-child(2){
      padding-block: 1rem 2rem !important;
    }

    #view-catalogo > div:nth-child(2) > .max-w-7xl{
      width: calc(100% - 1rem) !important;
    }

    #view-catalogo .catalog-premium-zone{
      gap: 1rem !important;
      padding: 1rem 0.85rem !important;
      border-radius: 1rem !important;
    }

    #view-catalogo .catalog-premium-heading{
      align-items: flex-start !important;
      padding-bottom: 0.9rem !important;
    }

    #view-catalogo .catalog-premium-count{
      align-self: flex-start !important;
    }
  }


  /* =========================================================
     AJUSTES v101 · PORTADA TOTALMENTE ADAPTATIVA
     Mobile-first, alturas naturales y tipografía fluida.
     ========================================================= */
  #view-inicio, #hero-shell, #hero-grid, #hero-left-content, #hero-stage, #hero-deck, #deck-card-active{
    min-width: 0 !important;
    max-width: 100%;
  }

  #hero-shell{
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    padding-block: clamp(1.35rem, 5vw, 3.25rem) !important;
    overflow-x: clip !important;
    overflow-y: hidden !important;
  }

  #hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    width: min(100%, 92rem) !important;
    margin-inline: auto !important;
    padding-inline: clamp(0.9rem, 4vw, 1.35rem) !important;
    gap: clamp(1.65rem, 6vw, 3rem) !important;
  }

  #hero-left-content{
    display: grid !important;
    gap: clamp(0.85rem, 3vw, 1.35rem) !important;
    width: 100% !important;
    max-width: 48rem !important;
    margin: 0 !important;
  }

  #hero-left-content > *{
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #hero-badge{
    width: fit-content !important;
    max-width: 100% !important;
    padding: clamp(0.55rem, 2vw, 0.72rem) clamp(0.75rem, 3vw, 1rem) !important;
    border-radius: 0.9rem !important;
    font-size: clamp(0.62rem, 2.6vw, 0.76rem) !important;
    line-height: 1.3 !important;
    letter-spacing: clamp(0.055em, 0.35vw, 0.11em) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #hero-slide-title{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(2rem, 10.4vw, 3.35rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.04em !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto;
  }

  #hero-slide-desc{
    width: 100% !important;
    max-width: 42rem !important;
    margin: 0 !important;
    font-size: clamp(0.84rem, 3.6vw, 1rem) !important;
    line-height: 1.68 !important;
    overflow-wrap: anywhere !important;
  }

  #hero-actions{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0.8rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #hero-primary-btn, #hero-video-btn{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 3.15rem !important;
    height: auto !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #hero-primary-btn{
    padding: 0.9rem 1.15rem !important;
    font-size: clamp(0.68rem, 2.9vw, 0.78rem) !important;
    line-height: 1.3 !important;
  }

  #hero-video-btn{
    justify-content: center !important;
    gap: 0.72rem !important;
    padding: 0.2rem 0 !important;
    text-align: left !important;
  }

  #hero-video-btn > span:last-child{
    min-width: 0 !important;
    font-size: clamp(0.68rem, 2.8vw, 0.78rem) !important;
    line-height: 1.35 !important;
    letter-spacing: clamp(0.05em, 0.4vw, 0.1em) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .hero-video-icon{
    flex: 0 0 clamp(2.75rem, 12vw, 3rem) !important;
    width: clamp(2.75rem, 12vw, 3rem) !important;
    height: clamp(2.75rem, 12vw, 3rem) !important;
  }

  #hero-stage{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: start !important;
    gap: clamp(0.75rem, 3vw, 1rem) !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #hero-deck{
    position: relative !important;
    display: grid !important;
    place-items: stretch !important;
    width: min(100%, 27rem) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  /* En móvil y tablet se muestra una única portada, sin tarjetas que invadan el texto. */
  #deck-card-prev, #deck-card-next{
    display: none !important;
  }

  #deck-card-active, #hero-deck:hover #deck-card-active{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(28rem, 132vw, 35rem) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: clamp(1rem, 4.8vw, 1.4rem) !important;
    border-radius: clamp(1.25rem, 5vw, 1.75rem) !important;
    transform: none !important;
    filter: none !important;
  }

  #card-active-img, #card-prev-img, #card-next-img{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  #card-active-hud{
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    min-height: clamp(2.8rem, 14vw, 4rem) !important;
    transform: none !important;
  }

  #card-active-tag{
    max-width: min(72%, 15rem) !important;
    padding: 0.48rem 0.7rem !important;
    font-size: clamp(0.55rem, 2.5vw, 0.68rem) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  #card-active-num{
    top: 0.1rem !important;
    right: 0 !important;
    max-width: 76% !important;
    font-size: clamp(2.75rem, 15vw, 4.45rem) !important;
    line-height: 0.82 !important;
    color: rgba(255, 255, 255, 0.06) !important;
    letter-spacing: 0.045em !important;
  }

  #deck-card-active > div:last-child{
    display: grid !important;
    gap: clamp(0.58rem, 2.7vw, 0.9rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: auto !important;
    transform: none !important;
  }

  #card-active-category, #card-active-title, #card-active-desc, #card-active-duration, #hero-open-program-button{
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #card-active-category{
    margin: 0 !important;
    font-size: clamp(0.62rem, 2.6vw, 0.75rem) !important;
    line-height: 1.35 !important;
    letter-spacing: clamp(0.07em, 0.4vw, 0.12em) !important;
  }

  #card-active-title{
    margin: 0 !important;
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance !important;
  }

  #card-active-desc{
    margin: 0 !important;
    font-size: clamp(0.76rem, 3.2vw, 0.92rem) !important;
    line-height: 1.58 !important;
  }

  #deck-card-active > div:last-child > div:last-child{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: stretch !important;
    gap: 0.55rem !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 0.75rem !important;
  }

  #hero-open-program-button{
    display: inline-flex !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    min-height: 2.55rem !important;
    padding: 0.45rem 0 !important;
    font-size: clamp(0.66rem, 2.8vw, 0.78rem) !important;
    line-height: 1.35 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #card-active-duration{
    display: block !important;
    font-size: clamp(0.64rem, 2.6vw, 0.75rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #hero-controls{
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(0.45rem, 2vw, 0.7rem) !important;
    width: min(100%, 23rem) !important;
    min-height: 3.7rem !important;
    margin: 0 !important;
    padding: 0.2rem !important;
  }

  #hero-prev-button, #hero-next-button{
    flex: none !important;
    width: clamp(3.1rem, 13vw, 3.45rem) !important;
    min-width: clamp(3.1rem, 13vw, 3.45rem) !important;
    height: clamp(3.1rem, 13vw, 3.45rem) !important;
    min-height: clamp(3.1rem, 13vw, 3.45rem) !important;
  }

  #hero-dots-container{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.34rem !important;
    min-width: 0 !important;
  }

  #hero-dots-container .hero-dot{
    flex: 0 0 auto !important;
  }

  #three-neural-backdrop{
    opacity: 0.62 !important;
  }

  @media (max-width: 379px) {
    #hero-shell{
      padding-block: 1.1rem 1.5rem !important;
    }

    #hero-grid{
      padding-inline: 0.72rem !important;
      gap: 1.35rem !important;
    }

    #hero-slide-title{
      font-size: clamp(1.8rem, 10.5vw, 2.35rem) !important;
    }

    #hero-slide-title br{ display: block !important; content: ""; }

    #deck-card-active{
      min-height: 27.5rem !important;
      padding: 0.9rem !important;
    }

    #card-active-title{
      font-size: 1.35rem !important;
    }
  }

  @media (min-width: 480px) {
    #hero-actions{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      align-items: center !important;
    }

    #hero-video-btn{
      justify-content: flex-start !important;
    }

    #deck-card-active > div:last-child > div:last-child{
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
    }

    #card-active-duration{
      text-align: right !important;
    }
  }

  @media (min-width: 640px) and (max-width: 899px) {
    #hero-shell{
      padding-block: clamp(2rem, 5vw, 3.5rem) !important;
    }

    #hero-grid{
      width: min(100%, 54rem) !important;
      padding-inline: clamp(1.25rem, 4vw, 2rem) !important;
      gap: 2.4rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.75rem, 7.7vw, 4.3rem) !important;
    }

    #hero-deck{
      width: min(72vw, 31rem) !important;
    }

    #deck-card-active{
      min-height: clamp(35rem, 90vw, 39rem) !important;
      padding: clamp(1.4rem, 3.5vw, 2rem) !important;
    }

    #card-active-title{
      font-size: clamp(1.85rem, 4.8vw, 2.4rem) !important;
    }
  }

  /* Escritorio: dos columnas reales solo cuando existe espacio suficiente. */
  @media (min-width: 900px) {
    #hero-shell{
      min-height: calc(100svh - 4.75rem) !important;
      padding-block: clamp(1.5rem, 3.5vh, 3.25rem) !important;
    }

    #hero-grid{
      grid-template-columns: minmax(0, 0.94fr) minmax(22rem, 1.06fr) !important;
      align-items: center !important;
      width: min(100%, 86rem) !important;
      padding-inline: clamp(1.5rem, 4vw, 3.5rem) !important;
      gap: clamp(2rem, 5vw, 5rem) !important;
    }

    #hero-left-content{
      justify-self: end !important;
      max-width: 43rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.8rem, 5.2vw, 5rem) !important;
    }

    #hero-slide-desc{
      font-size: clamp(0.9rem, 1.35vw, 1.05rem) !important;
    }

    #hero-actions{
      grid-template-columns: auto minmax(0, 1fr) !important;
      justify-content: start !important;
      width: fit-content !important;
      max-width: 100% !important;
      gap: 1rem !important;
    }

    #hero-primary-btn{
      width: auto !important;
      min-width: 13.5rem !important;
    }

    #hero-video-btn{
      width: auto !important;
      min-width: 0 !important;
    }

    #hero-stage{
      align-content: center !important;
      min-height: 0 !important;
    }

    #hero-deck{
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: min(38vw, 31rem) !important;
      max-width: 100% !important;
      aspect-ratio: 4 / 5 !important;
      overflow: visible !important;
    }

    #deck-card-prev, #deck-card-next{
      display: block !important;
    }

    #deck-card-active, #hero-deck:hover #deck-card-active{
      position: absolute !important;
      inset: auto !important;
      width: 94% !important;
      min-height: 0 !important;
      height: auto !important;
      aspect-ratio: 4 / 5 !important;
      padding: clamp(1.35rem, 2.4vw, 2rem) !important;
      transform: perspective(1350px) translate3d(0, -1.2%, 46px) rotateX(0) rotateY(0) scale3d(1,1,1) !important;
    }

    #deck-card-prev, #deck-card-next{
      width: 88% !important;
      height: auto !important;
      aspect-ratio: 4 / 5 !important;
    }

    #card-active-hud{
      min-height: clamp(3.5rem, 5vw, 4.75rem) !important;
    }

    #card-active-num{
      font-size: clamp(3.8rem, 6vw, 6rem) !important;
    }

    #card-active-title{
      font-size: clamp(1.65rem, 2.4vw, 2.35rem) !important;
    }

    #card-active-desc{
      font-size: clamp(0.78rem, 1.1vw, 0.95rem) !important;
    }

    #hero-controls{
      width: min(100%, 22rem) !important;
    }
  }

  /* Laptops de poca altura: reducir proporcionalmente sin cortar contenido. */
  @media (min-width: 900px) and (max-height: 720px) {
    #hero-shell{
      min-height: auto !important;
      padding-block: 1rem 1.4rem !important;
    }

    #hero-grid{
      gap: clamp(1.25rem, 3vw, 2.5rem) !important;
    }

    #hero-left-content{
      gap: 0.72rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.3rem, 4.3vw, 3.65rem) !important;
    }

    #hero-slide-desc{
      font-size: 0.84rem !important;
      line-height: 1.52 !important;
    }

    #hero-primary-btn, #hero-video-btn{
      min-height: 2.8rem !important;
    }

    #hero-deck{
      width: min(31vw, 23rem) !important;
    }

    #deck-card-active{
      padding: 1.15rem !important;
    }

    #card-active-hud{
      min-height: 3rem !important;
    }

    #card-active-num{
      font-size: clamp(3rem, 5vw, 4.35rem) !important;
    }

    #card-active-title{
      font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    }

    #card-active-desc{
      font-size: 0.73rem !important;
      line-height: 1.45 !important;
    }

    #hero-controls{
      min-height: 3.1rem !important;
    }

    #hero-prev-button, #hero-next-button{
      width: 2.8rem !important;
      min-width: 2.8rem !important;
      height: 2.8rem !important;
      min-height: 2.8rem !important;
    }
  }

  @media (min-width: 1440px) {
    #hero-grid{
      width: min(100%, 94rem) !important;
      grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr) !important;
    }

    #hero-deck{
      width: min(34vw, 34rem) !important;
    }
  }

  @media (min-width: 1920px) {
    #hero-grid{
      width: min(100%, 106rem) !important;
      gap: clamp(4rem, 6vw, 7rem) !important;
    }

    #hero-left-content{
      max-width: 48rem !important;
    }

    #hero-slide-title{
      font-size: clamp(4.4rem, 4.8vw, 6.2rem) !important;
    }

    #hero-deck{
      width: min(31vw, 38rem) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #hero-shell *, #hero-shell *::before, #hero-shell *::after{
      scroll-behavior: auto !important;
    }
  }


  /* =========================================================
     AJUSTES v102 · CORRECCIÓN ADAPTATIVA REAL DE PORTADA
     Evita superposición entre texto, acciones y tarjetas.
     ========================================================= */

  #hero-shell{
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  #hero-grid, #hero-left-content, #hero-stage, #hero-deck, #deck-card-active, #hero-actions{
    min-width: 0 !important;
  }

  #hero-slide-title, #hero-slide-desc, #card-active-title, #card-active-desc, #card-active-category, #card-active-duration{
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: auto;
  }

  /* Cabecera compacta hasta que exista espacio real para el menú completo. */
  @media (max-width: 1199px) {
    #site-header #header-main-row{
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      min-height: 3.75rem !important;
      height: auto !important;
      gap: 0.75rem !important;
    }

    #site-header #header-desktop-logo, #site-header #header-main-nav, #site-header #header-desktop-actions{
      display: none !important;
    }

    #site-header #header-main-row > :nth-child(2){
      display: block !important;
      flex: 0 0 2.75rem !important;
      width: 2.75rem !important;
    }

    #site-header #header-main-row > :nth-child(3){
      display: flex !important;
      max-width: calc(100% - 7rem) !important;
    }

    #site-header #header-main-row > :nth-child(3) img{
      width: auto !important;
      height: clamp(2rem, 5vw, 2.65rem) !important;
      max-width: min(12rem, 100%) !important;
    }

    #site-header #header-main-row > :nth-child(6){
      display: flex !important;
      flex: 0 0 2.75rem !important;
      width: 2.75rem !important;
    }

    #site-header #nav-toggle{
      display: inline-grid !important;
      place-items: center !important;
      width: 2.75rem !important;
      min-width: 2.75rem !important;
      height: 2.75rem !important;
      min-height: 2.75rem !important;
      touch-action: manipulation !important;
    }

    #site-header #mobile-menu:not(.hidden){
      display: block !important;
      max-height: calc(100svh - 4.5rem) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
    }
  }

  /* Teléfonos, tablets y laptops compactas: portada apilada y sin cruces. */
  @media (max-width: 1199px) {
    #hero-shell{
      display: block !important;
      min-height: auto !important;
      padding-block: clamp(1.4rem, 4.5vw, 3.5rem) !important;
    }

    #hero-grid{
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: start !important;
      justify-items: center !important;
      width: min(100%, 70rem) !important;
      padding-inline: clamp(0.9rem, 4vw, 2.25rem) !important;
      gap: clamp(2rem, 5vw, 3.5rem) !important;
    }

    #hero-left-content{
      justify-self: center !important;
      width: min(100%, 55rem) !important;
      max-width: 55rem !important;
      text-align: center !important;
      gap: clamp(0.9rem, 2.5vw, 1.35rem) !important;
    }

    #hero-badge{
      margin-inline: auto !important;
      justify-content: center !important;
      text-align: center !important;
    }

    #hero-slide-title{
      max-width: 16ch !important;
      margin-inline: auto !important;
      font-size: clamp(2.15rem, 7.2vw, 4.8rem) !important;
      line-height: 1.02 !important;
      letter-spacing: -0.045em !important;
      text-align: center !important;
      text-wrap: balance !important;
    }

    #hero-slide-title br{ display: block !important; content: ""; }

    #hero-slide-desc{
      max-width: 47rem !important;
      margin-inline: auto !important;
      font-size: clamp(0.88rem, 2.1vw, 1.05rem) !important;
      line-height: 1.65 !important;
      text-align: center !important;
    }

    #hero-actions{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      align-items: center !important;
      width: min(100%, 38rem) !important;
      margin-inline: auto !important;
      gap: clamp(0.7rem, 2vw, 1rem) !important;
    }

    #hero-primary-btn, #hero-video-btn{
      width: 100% !important;
      min-width: 0 !important;
      min-height: 3.25rem !important;
    }

    #hero-video-btn{
      justify-content: center !important;
      padding-inline: 0.65rem !important;
    }

    #hero-stage{
      width: min(100%, 38rem) !important;
      min-height: 0 !important;
      margin-inline: auto !important;
      overflow: visible !important;
    }

    #hero-deck{
      display: grid !important;
      place-items: stretch !important;
      width: min(100%, 31rem) !important;
      height: auto !important;
      aspect-ratio: auto !important;
      margin-inline: auto !important;
      overflow: visible !important;
      perspective: none !important;
      transform-style: flat !important;
    }

    #hero-deck::before, #hero-deck::after, #deck-card-prev, #deck-card-next{
      display: none !important;
    }

    #deck-card-active, #hero-deck:hover #deck-card-active{
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      min-height: clamp(31rem, 112vw, 39rem) !important;
      height: auto !important;
      aspect-ratio: auto !important;
      transform: none !important;
      filter: none !important;
      margin: 0 !important;
    }

    #card-active-hud{
      min-height: 3.2rem !important;
    }

    #card-active-num{
      font-size: clamp(3rem, 11vw, 5.2rem) !important;
    }

    #card-active-title{
      font-size: clamp(1.55rem, 5vw, 2.45rem) !important;
      line-height: 1.12 !important;
    }

    #card-active-desc{
      font-size: clamp(0.8rem, 2.3vw, 0.98rem) !important;
      line-height: 1.58 !important;
    }

    #hero-controls{
      position: relative !important;
      z-index: 80 !important;
      width: min(100%, 24rem) !important;
      margin-top: clamp(0.8rem, 2.2vw, 1.15rem) !important;
      pointer-events: auto !important;
    }
  }

  @media (max-width: 559px) {
    #hero-grid{
      padding-inline: clamp(0.72rem, 4vw, 1rem) !important;
      gap: 1.7rem !important;
    }

    #hero-left-content{
      gap: 0.85rem !important;
    }

    #hero-slide-title{
      max-width: 12ch !important;
      font-size: clamp(2rem, 10vw, 3.2rem) !important;
    }

    #hero-actions{
      grid-template-columns: minmax(0, 1fr) !important;
      width: min(100%, 24rem) !important;
    }

    #hero-primary-btn, #hero-video-btn{
      min-height: 3.05rem !important;
    }

    #hero-deck{
      width: min(100%, 27rem) !important;
    }

    #deck-card-active{
      min-height: clamp(29rem, 142vw, 35rem) !important;
      padding: clamp(0.95rem, 4vw, 1.3rem) !important;
    }

    #deck-card-active > div:last-child > div:last-child{
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: start !important;
    }

    #card-active-duration{
      text-align: left !important;
    }
  }

  /* Escritorio amplio: dos columnas equilibradas, sin invasión entre bloques. */
  @media (min-width: 1200px) {
    #site-header #header-main-row{
      width: 100% !important;
    }

    #hero-shell{
      min-height: calc(100svh - 5rem) !important;
      padding-block: clamp(1.75rem, 3.5vh, 3.5rem) !important;
    }

    #hero-grid{
      grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.92fr) !important;
      align-items: center !important;
      width: min(100%, 92rem) !important;
      padding-inline: clamp(2rem, 4vw, 4.5rem) !important;
      gap: clamp(3rem, 5vw, 6rem) !important;
    }

    #hero-left-content{
      justify-self: end !important;
      width: 100% !important;
      max-width: 42rem !important;
      text-align: left !important;
    }

    #hero-badge{
      margin-inline: 0 !important;
    }

    #hero-slide-title{
      max-width: 12ch !important;
      font-size: clamp(3.15rem, 4.8vw, 5.4rem) !important;
      line-height: 0.99 !important;
      text-align: left !important;
      overflow-wrap: normal !important;
    }

    #hero-slide-desc{
      max-width: 40rem !important;
      font-size: clamp(0.92rem, 1.15vw, 1.05rem) !important;
      text-align: left !important;
    }

    #hero-actions{
      grid-template-columns: auto minmax(0, 1fr) !important;
      width: fit-content !important;
      max-width: 100% !important;
      margin-inline: 0 !important;
    }

    #hero-stage{
      justify-self: start !important;
      width: 100% !important;
      min-width: 27rem !important;
      overflow: visible !important;
    }

    #hero-deck{
      width: min(34vw, 31rem) !important;
      max-width: 31rem !important;
    }

    #deck-card-active, #hero-deck:hover #deck-card-active{
      width: 92% !important;
    }

    #deck-card-prev, #deck-card-next{
      width: 84% !important;
    }

    #hero-deck{
      --fan-x: clamp(2rem, 4vw, 3.6rem) !important;
      --fan-y: clamp(0.5rem, 1vw, 0.9rem) !important;
      --fan-rotate: 8deg !important;
    }
  }

  @media (min-width: 1200px) and (max-height: 760px) {
    #hero-shell{
      min-height: auto !important;
      padding-block: 1rem 1.5rem !important;
    }

    #hero-grid{
      gap: clamp(2rem, 3vw, 3.5rem) !important;
    }

    #hero-left-content{
      gap: 0.72rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.65rem, 4vw, 4rem) !important;
    }

    #hero-deck{
      width: min(29vw, 24rem) !important;
    }

    #deck-card-active{
      padding: 1.15rem !important;
    }
  }

  @media (min-width: 1600px) {
    #hero-grid{
      width: min(100%, 100rem) !important;
      grid-template-columns: minmax(0, 1fr) minmax(31rem, 0.9fr) !important;
    }

    #hero-deck{
      width: min(31vw, 34rem) !important;
      max-width: 34rem !important;
    }
  }


  /* =========================================================
     AJUSTES v103 · HERO FLUIDO REAL, SIN CORTES NI ESPACIOS MUERTOS
     - Corrige columnas implícitas causadas por lg:col-span-6.
     - Tipografía basada en el ancho real de cada bloque.
     - La tarjeta crece si el contenido necesita más altura.
     ========================================================= */

  #hero-shell{
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding-block: clamp(1.25rem, 3.6vw, 3.6rem) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    container-type: inline-size;
  }

  #hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: min(100%, 96rem) !important;
    max-width: 96rem !important;
    margin-inline: auto !important;
    padding-inline: clamp(0.85rem, 3.5vw, 4.5rem) !important;
    gap: clamp(1.75rem, 4vw, 4.75rem) !important;
  }

  /* Impide que las clases Tailwind lg:col-span-6 creen columnas implícitas. */
  #hero-left-content, #hero-stage{
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #hero-left-content{
    container-type: inline-size;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-self: center !important;
    gap: clamp(0.85rem, 2.2cqi, 1.4rem) !important;
    max-width: min(100%, 70rem) !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Neutraliza space-y heredado para que el gap sea la única fuente de separación. */
  #hero-left-content > *{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #hero-badge{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 2.55rem !important;
    height: auto !important;
    margin-inline: auto !important;
    padding: 0.65rem clamp(0.85rem, 2.6cqi, 1.25rem) !important;
    font-size: clamp(0.65rem, 1.6cqi, 0.78rem) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  #hero-slide-title{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    font-size: clamp(2rem, 8.5cqi, 5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: clamp(-0.045em, -0.8cqi, -0.02em) !important;
    text-align: center !important;
    text-wrap: balance !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    overflow: visible !important;
  }

  /* Los saltos manuales generaban cortes y líneas innecesarias. */
  #hero-slide-title br{ display: block !important; content: ""; }

  #hero-slide-title span{
    display: inline !important;
    white-space: normal !important;
  }

  #hero-slide-desc{
    width: 100% !important;
    max-width: 56rem !important;
    margin-inline: auto !important;
    font-size: clamp(0.88rem, 2.15cqi, 1.08rem) !important;
    line-height: 1.65 !important;
    text-align: center !important;
    text-wrap: pretty !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
  }

  #hero-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 44rem !important;
    margin: 0 auto !important;
    padding-top: clamp(0.15rem, 0.8cqi, 0.5rem) !important;
    gap: clamp(0.7rem, 2cqi, 1.25rem) !important;
  }

  #hero-primary-btn, #hero-video-btn{
    flex: 1 1 15rem !important;
    width: auto !important;
    min-width: min(100%, 15rem) !important;
    max-width: 100% !important;
    min-height: 3.25rem !important;
    height: auto !important;
    padding-block: 0.85rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }

  #hero-video-btn{
    justify-content: center !important;
    padding-inline: clamp(0.65rem, 2cqi, 1rem) !important;
    text-align: left !important;
  }

  #hero-video-btn > span:last-child{
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #hero-stage{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: center !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #hero-deck{
    container-type: inline-size;
    display: block !important;
    width: min(100%, 30rem) !important;
    max-width: 30rem !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  #deck-card-active, #hero-deck:hover #deck-card-active{
    position: relative !important;
    inset: auto !important;
    width: min(94%, 29rem) !important;
    min-height: clamp(31rem, 122cqi, 39rem) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin-inline: auto !important;
    padding: clamp(1rem, 5cqi, 1.75rem) !important;
    transform: none !important;
    filter: none !important;
  }

  #deck-card-prev, #deck-card-next{
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  #card-active-hud{
    min-width: 0 !important;
    gap: clamp(0.55rem, 2cqi, 0.9rem) !important;
  }

  #card-active-tag{
    max-width: 58% !important;
    min-height: 1.9rem !important;
    height: auto !important;
    padding: 0.42rem 0.72rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  #card-active-num{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 48% !important;
    font-size: clamp(2.35rem, 13cqi, 4.7rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  #deck-card-active > div:last-child{
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.65rem, 2.6cqi, 1rem) !important;
    min-width: 0 !important;
    margin-top: clamp(5rem, 18cqi, 8rem) !important;
  }

  #deck-card-active > div:last-child > *{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #card-active-category{
    font-size: clamp(0.66rem, 2.5cqi, 0.82rem) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #card-active-title{
    max-width: 100% !important;
    font-size: clamp(1.45rem, 7.2cqi, 2.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    text-wrap: balance !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
  }

  #card-active-desc{
    max-width: 100% !important;
    font-size: clamp(0.8rem, 3.25cqi, 1rem) !important;
    line-height: 1.58 !important;
    text-wrap: pretty !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
  }

  #deck-card-active > div:last-child > div:last-child{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    gap: 0.7rem !important;
    padding-top: 0.85rem !important;
  }

  #hero-open-program-button{
    flex: 1 1 13rem !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    height: auto !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }

  #card-active-duration{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
  }

  #hero-controls{
    position: relative !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: min(100%, 25rem) !important;
    max-width: 25rem !important;
    min-width: 0 !important;
    margin: clamp(0.9rem, 2.8vw, 1.35rem) auto 0 !important;
    gap: clamp(0.55rem, 2vw, 0.9rem) !important;
  }

  #hero-prev-button, #hero-next-button{
    width: clamp(2.85rem, 9vw, 3.25rem) !important;
    min-width: clamp(2.85rem, 9vw, 3.25rem) !important;
    height: clamp(2.85rem, 9vw, 3.25rem) !important;
    min-height: clamp(2.85rem, 9vw, 3.25rem) !important;
    touch-action: manipulation !important;
  }

  #hero-dots-container{
    min-width: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.38rem !important;
  }

  /* Móvil: una sola tarjeta y botones apilados; nada se recorta. */
  @media (max-width: 639px) {
    #hero-shell{
      padding-block: 1rem 2.25rem !important;
    }

    #hero-grid{
      padding-inline: clamp(0.7rem, 4vw, 1rem) !important;
      gap: 1.45rem !important;
    }

    #hero-left-content{
      gap: 0.78rem !important;
    }

    #hero-slide-title{
      font-size: clamp(1.82rem, 9.7cqi, 3rem) !important;
      line-height: 1.04 !important;
      letter-spacing: -0.035em !important;
    }

    #hero-slide-desc{
      font-size: clamp(0.84rem, 4.15cqi, 0.98rem) !important;
      line-height: 1.58 !important;
    }

    #hero-actions{
      flex-direction: column !important;
      align-items: stretch !important;
      max-width: 24rem !important;
      gap: 0.68rem !important;
    }

    #hero-primary-btn, #hero-video-btn{
      flex: 0 1 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 3.05rem !important;
    }

    #hero-deck{
      width: min(100%, 27rem) !important;
    }

    #deck-card-prev, #deck-card-next, #hero-deck::before, #hero-deck::after{
      display: none !important;
    }

    #deck-card-active, #hero-deck:hover #deck-card-active{
      width: 100% !important;
      min-height: clamp(29rem, 142cqi, 36rem) !important;
      border-radius: clamp(1.15rem, 5vw, 1.75rem) !important;
    }

    #deck-card-active > div:last-child > div:last-child{
      align-items: flex-start !important;
    }

    #card-active-duration{
      flex-basis: 100% !important;
      text-align: left !important;
    }
  }

  /* Tablet: composición apilada y centrada, con ancho útil completo. */
  @media (min-width: 640px) and (max-width: 1023px) {
    #hero-left-content{
      max-width: 58rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.5rem, 7.7cqi, 4.5rem) !important;
    }

    #hero-stage{
      width: min(100%, 34rem) !important;
    }

    #deck-card-prev, #deck-card-next{
      display: none !important;
    }
  }

  /* Laptop y escritorio: dos columnas explícitas; sin columnas fantasma. */
  @media (min-width: 1024px) {
    #hero-shell{
      min-height: calc(100svh - 4.75rem) !important;
      display: flex !important;
      align-items: center !important;
      padding-block: clamp(1.25rem, 3vh, 3rem) !important;
    }

    #hero-grid{
      grid-template-columns: minmax(0, 1.06fr) minmax(22rem, 0.94fr) !important;
      align-items: center !important;
      gap: clamp(2rem, 4vw, 5rem) !important;
    }

    #hero-left-content{
      grid-column: 1 !important;
      grid-row: 1 !important;
      align-items: flex-start !important;
      justify-self: stretch !important;
      max-width: none !important;
      text-align: left !important;
    }

    #hero-stage{
      grid-column: 2 !important;
      grid-row: 1 !important;
      justify-self: stretch !important;
      width: 100% !important;
    }

    #hero-badge{
      margin-inline: 0 !important;
      justify-content: flex-start !important;
      text-align: left !important;
    }

    #hero-slide-title{
      max-width: 100% !important;
      margin-inline: 0 !important;
      font-size: clamp(2.25rem, 10.5cqi, 5.15rem) !important;
      line-height: 0.99 !important;
      text-align: left !important;
    }

    #hero-slide-desc{
      max-width: 44rem !important;
      margin-inline: 0 !important;
      font-size: clamp(0.9rem, 2.55cqi, 1.08rem) !important;
      text-align: left !important;
    }

    #hero-actions{
      justify-content: flex-start !important;
      max-width: 42rem !important;
      margin-inline: 0 !important;
    }

    #hero-primary-btn, #hero-video-btn{
      flex: 0 1 auto !important;
      min-width: 0 !important;
    }

    #hero-primary-btn{
      width: auto !important;
      min-width: 13.5rem !important;
    }

    #hero-video-btn{
      width: auto !important;
      max-width: 18rem !important;
      justify-content: flex-start !important;
    }

    #hero-deck{
      width: min(100%, 29rem) !important;
    }

    #deck-card-active, #hero-deck:hover #deck-card-active{
      width: 90% !important;
      min-height: clamp(31rem, 116cqi, 39rem) !important;
    }

    #deck-card-prev, #deck-card-next{
      display: block !important;
      width: 82% !important;
    }
  }

  /* Laptops de poca altura: tipografía y tarjeta se reducen sin ocultar texto. */
  @media (min-width: 1024px) and (max-height: 760px) {
    #hero-shell{
      min-height: auto !important;
      padding-block: 1rem 1.45rem !important;
    }

    #hero-grid{
      gap: clamp(1.5rem, 3vw, 3rem) !important;
    }

    #hero-left-content{
      gap: 0.7rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.1rem, 8.8cqi, 3.85rem) !important;
      line-height: 1.01 !important;
    }

    #hero-slide-desc{
      font-size: clamp(0.84rem, 2.25cqi, 0.98rem) !important;
      line-height: 1.52 !important;
    }

    #hero-actions{
      padding-top: 0 !important;
    }

    #hero-deck{
      width: min(100%, 24rem) !important;
    }

    #deck-card-active, #hero-deck:hover #deck-card-active{
      min-height: clamp(28rem, 116cqi, 33rem) !important;
      padding: 1.05rem !important;
    }
  }

  /* Escritorios amplios y ultrawide: limita la lectura, no estira los textos. */
  @media (min-width: 1600px) {
    #hero-grid{
      grid-template-columns: minmax(0, 1.08fr) minmax(29rem, 0.92fr) !important;
      width: min(100%, 104rem) !important;
      max-width: 104rem !important;
    }

    #hero-left-content{
      max-width: 48rem !important;
    }

    #hero-deck{
      width: min(100%, 32rem) !important;
      max-width: 32rem !important;
    }
  }

  /* Header: evita que navegación e inscripción salgan del viewport. */
  @media (max-width: 1279px) {
    #site-header #header-main-row{
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      min-height: 3.75rem !important;
      height: auto !important;
      gap: 0.75rem !important;
    }

    #site-header #header-desktop-logo, #site-header #header-main-nav, #site-header #header-desktop-actions{
      display: none !important;
    }

    #site-header #nav-toggle{
      display: inline-grid !important;
      place-items: center !important;
      width: 2.75rem !important;
      min-width: 2.75rem !important;
      height: 2.75rem !important;
      min-height: 2.75rem !important;
    }
  }

  @media (min-width: 1280px) and (max-width: 1439px) {
    #site-header #header-main-row{
      display: grid !important;
      grid-template-columns: minmax(7rem, 1fr) auto minmax(7rem, 1fr) !important;
      column-gap: 0.45rem !important;
    }

    #site-header #header-main-nav{
      gap: 0.08rem !important;
    }

    #site-header #header-main-nav .nav-link{
      padding-inline: 0.48rem !important;
      font-size: 0.56rem !important;
      letter-spacing: 0.018em !important;
    }

    #site-header #header-desktop-actions .header-enroll-button{
      padding-inline: 0.72rem !important;
      font-size: 0.58rem !important;
      letter-spacing: 0.025em !important;
    }
  }


  
  :root{
    --cefein-content-max: 80rem;
    --cefein-page-gutter: clamp(1rem, 3.2vw, 2rem);
  }

  .site-content-shell, #site-header > div:first-child, #site-footer > div:first-child{
    width: min(calc(100% - (var(--cefein-page-gutter) * 2)), var(--cefein-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    min-width: 0;
  }

  #site-header #header-main-row{
    min-width: 0;
  }

  #site-header .header-social-links .social-link::after{
    content: none;
  }

  @media (min-width: 1280px) and (max-width: 1439px) {
    #site-header #header-main-row{
      display: grid !important;
      grid-template-columns: minmax(7.2rem, 1fr) auto minmax(12rem, 1fr) !important;
      gap: clamp(0.35rem, 1vw, 0.8rem) !important;
    }

    #site-header .header-social-links{
      display: flex !important;
      gap: 0.2rem !important;
    }

    #site-header .header-social-links .social-link{
      width: auto !important;
      min-width: 1.75rem !important;
      height: 1.75rem !important;
      padding: 0.2rem 0.36rem !important;
      border-radius: 0.55rem !important;
    }

    #site-header .header-social-links .social-link i{
      display: none !important;
    }

    #site-header .header-social-links .social-link::after{
      content: attr(data-short) !important;
      display: block;
      color: currentColor;
      font-size: 0.56rem;
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    #site-header .header-language-switcher{
      display: inline-flex !important;
    }

    #site-header .header-social-menu{
      display: none !important;
    }

    #site-header #header-main-nav .nav-link{
      padding-inline: 0.58rem !important;
      font-size: 0.59rem !important;
      letter-spacing: 0.025em !important;
    }
  }

  @media (min-width: 1440px) {
    #site-header #header-main-row{
      display: grid !important;
      grid-template-columns: minmax(8rem, 1fr) auto minmax(16rem, 1fr) !important;
    }
  }

  

  

  

  

  

  

  

  .academic-legal-note{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: clamp(1rem, 3vw, 1.4rem);
    border: 1px solid rgba(197,168,90,0.32);
    border-radius: 1rem;
    background: rgba(197,168,90,0.07);
  }

  .academic-legal-note > i{
    color: #c5a85a;
    font-size: 1.15rem;
    margin-top: 0.1rem;
  }

  .academic-legal-note strong{
    display: block;
    color: #0f294a;
    margin-bottom: 0.25rem;
  }

  .dark .academic-legal-note strong{ color: #fff; }

  .academic-legal-note p{
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.65;
  }

  .dark .academic-legal-note p{ color: #aebfd1; }

  

  

  

  

  

  

  

  

  .academic-search-wrap{
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .academic-search-wrap > i{
    position: absolute;
    left: 0.9rem;
    top: 50%;
    color: #94a3b8;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .academic-search-wrap input, .contact-field input, .contact-field select, .contact-field textarea{
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
    height: auto;
    border: 1px solid #cbd5e1;
    border-radius: 0.8rem;
    background: #fff;
    color: #172033;
    font-size: 0.78rem;
    line-height: 1.4;
    outline: none;
  }

  .academic-search-wrap input{
    padding: 0.8rem 0.9rem 0.8rem 2.65rem;
  }

  .contact-field input, .contact-field select, .contact-field textarea{
    padding: 0.78rem 0.9rem;
  }

  .dark .academic-search-wrap input, .dark .contact-field input, .dark .contact-field select, .dark .contact-field textarea{
    border-color: #304962;
    background: #071a2e;
    color: #fff;
  }

  .academic-search-wrap input:focus, .contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus{
    border-color: #c5a85a;
    box-shadow: 0 0 0 3px rgba(197,168,90,0.12);
  }

  

  .contact-field{
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    min-width: 0;
  }

  .contact-field > label{
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.3;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .dark .contact-field > label{ color: #c0ccd7; }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .academic-empty-state{
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 2.5rem 1rem;
    border: 1px dashed rgba(197,168,90,0.45);
    border-radius: 1rem;
    color: #64748b;
    text-align: center;
  }

  .academic-empty-state i{ color: #c5a85a; font-size: 1.8rem; }

  .home-academic-button--secondary{
    border-color: rgba(197,168,90,0.45) !important;
    background: transparent !important;
    color: #f4ead2 !important;
  }

  .contact-form-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .contact-field--full{
    grid-column: 1 / -1;
  }

  .contact-field textarea{
    min-height: 8rem;
    resize: vertical;
  }

  .contact-field small{
    color: #64748b;
    font-size: 0.66rem;
    line-height: 1.5;
  }

  .dark .contact-field small{ color: #94a3b8; }

  .contact-submit-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 3rem;
    height: auto;
    padding: 0.8rem 1rem;
    border: 1px solid #30d76b;
    border-radius: 999px;
    background: #25d366;
    color: #071522;
    font-size: 0.72rem;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: normal;
  }

  @media (min-width: 640px) {
    

    .contact-form-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  

  


  /* Cabecera completa desde laptops; redes abreviadas cuando el ancho es limitado. */
  @media (min-width: 1024px) and (max-width: 1439px) {
    #site-header #header-desktop-logo, #site-header #header-main-nav, #site-header #header-desktop-actions{
      display: flex !important;
    }

    #site-header #header-main-row > :nth-child(2), #site-header #header-main-row > :nth-child(3), #site-header #header-main-row > :nth-child(6){
      display: none !important;
    }

    #site-header #header-main-row{
      display: grid !important;
      grid-template-columns: minmax(6.6rem, 0.8fr) auto minmax(12.2rem, 1fr) !important;
      column-gap: clamp(0.25rem, 0.8vw, 0.65rem) !important;
    }

    #site-header #header-desktop-logo img{
      width: clamp(6.7rem, 9.5vw, 8rem) !important;
      max-width: 100% !important;
    }

    #site-header #header-main-nav{
      gap: 0.08rem !important;
    }

    #site-header #header-main-nav .nav-link{
      padding-inline: clamp(0.38rem, 0.55vw, 0.55rem) !important;
      font-size: clamp(0.52rem, 0.56vw, 0.59rem) !important;
      letter-spacing: 0.018em !important;
    }

    #site-header #header-desktop-actions{
      justify-content: flex-end !important;
      gap: 0.22rem !important;
    }

    #site-header .header-social-links{
      display: flex !important;
      gap: 0.16rem !important;
    }

    #site-header .header-social-links .social-link{
      width: auto !important;
      min-width: 1.62rem !important;
      height: 1.68rem !important;
      padding: 0.18rem 0.3rem !important;
      border-radius: 0.5rem !important;
    }

    #site-header .header-social-links .social-link i{
      display: none !important;
    }

    #site-header .header-social-links .social-link::after{
      content: attr(data-short) !important;
      display: block !important;
      color: currentColor;
      font-size: 0.53rem;
      line-height: 1;
      font-weight: 900;
    }

    #site-header .header-language-switcher{
      display: inline-flex !important;
      padding: 0.12rem !important;
      gap: 0.08rem !important;
    }

    #site-header .language-option{
      min-width: 1.65rem !important;
      padding-inline: 0.3rem !important;
      font-size: 0.54rem !important;
    }

    #site-header .header-social-menu{
      display: none !important;
    }

    #site-header .header-enroll-button{
      padding-inline: clamp(0.58rem, 0.75vw, 0.78rem) !important;
      font-size: 0.55rem !important;
      letter-spacing: 0.025em !important;
    }
  }

  @media (max-width: 1023px) {
    #site-header #header-main-row{
      display: flex !important;
    }
  }


  /* =========================================================
     AJUSTES v105 · HEADER SIN SUPERPOSICIÓN + TIPOGRAFÍA FLUIDA
     Mobile-first, 320 px → ultrawide. Sin textos cortados.
     ========================================================= */
  :root{
    --cefein-content-max: 92rem;
    --cefein-page-gutter: clamp(0.85rem, 2.5vw, 2rem);
    --cefein-header-h: clamp(3.75rem, 5vw, 4.65rem);
  }

  html{
    min-width: 320px;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body, main, .view-section, section, #hero-shell, #hero-grid, #hero-left-content, #hero-stage, #hero-deck{
    min-width: 0 !important;
    max-width: 100%;
  }

  img, svg, video, canvas{
    max-width: 100%;
  }

  h1, h2, h3, h4, h5, h6, p, li, a, button, label, span{
    max-width: 100%;
  }

  h1, h2, h3, h4, h5, h6{
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    text-wrap: balance;
  }

  /* ---------- Cabecera ---------- */
  #site-header{
    width: 100% !important;
    padding-block: clamp(0.45rem, 0.8vw, 0.7rem) !important;
    overflow: visible !important;
  }

  #site-header > div:first-child, #site-footer > div:first-child, .site-content-shell{
    width: min(calc(100% - (var(--cefein-page-gutter) * 2)), var(--cefein-content-max)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  #site-header #header-main-row{
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--cefein-header-h) !important;
    height: auto !important;
    gap: clamp(0.45rem, 1vw, 0.9rem) !important;
  }

  #site-header a, #site-header button, #site-header summary{
    touch-action: manipulation;
  }

  #site-header img[alt="CEFEIN"]{
    display: block;
    width: auto !important;
    height: clamp(2rem, 3vw, 2.65rem) !important;
    max-width: clamp(7rem, 9vw, 9.5rem) !important;
    object-fit: contain !important;
  }

  /* Hasta 1535 px se usa la cabecera compacta: elimina cualquier colisión. */
  @media (max-width: 1535px) {
    #site-header #header-main-row{
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    #site-header #header-desktop-logo, #site-header #header-main-nav, #site-header #header-desktop-actions{
      display: none !important;
    }

    #site-header #header-main-row > .md\:hidden{
      display: flex !important;
    }

    #site-header #header-main-row > .md\:hidden.pointer-events-none{
      display: flex !important;
      max-width: calc(100% - 7rem) !important;
    }

    #site-header #nav-toggle{
      display: inline-grid !important;
      place-items: center !important;
      width: 2.8rem !important;
      min-width: 2.8rem !important;
      height: 2.8rem !important;
      min-height: 2.8rem !important;
      padding: 0 !important;
      flex: 0 0 2.8rem !important;
    }

    #site-header #mobile-menu:not(.hidden){
      display: block !important;
      max-height: calc(100svh - var(--cefein-header-h)) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      padding-inline: var(--cefein-page-gutter) !important;
    }
  }

  /* Escritorio: tres zonas estables; la navegación nunca invade acciones. */
  @media (min-width: 1536px) {
    #site-header #header-main-row{
      display: grid !important;
      grid-template-columns: minmax(7.25rem, 0.8fr) minmax(0, auto) minmax(12rem, 0.9fr) !important;
      align-items: center !important;
      column-gap: clamp(0.35rem, 0.8vw, 0.75rem) !important;
    }

    #site-header #header-desktop-logo{
      display: flex !important;
      justify-self: start !important;
      min-width: 0 !important;
    }

    #site-header #header-main-nav{
      display: flex !important;
      justify-self: center !important;
      justify-content: center !important;
      align-items: center !important;
      min-width: 0 !important;
      max-width: 100% !important;
      gap: 0.08rem !important;
      white-space: nowrap !important;
    }

    #site-header #header-main-nav .nav-link{
      flex: 0 0 auto !important;
      min-width: 0 !important;
      padding: 0.55rem clamp(0.42rem, 0.5vw, 0.62rem) !important;
      font-size: clamp(0.52rem, 0.52vw, 0.64rem) !important;
      line-height: 1 !important;
      letter-spacing: 0.018em !important;
    }

    #site-header #header-desktop-actions{
      display: flex !important;
      justify-self: end !important;
      align-items: center !important;
      justify-content: flex-end !important;
      min-width: 0 !important;
      max-width: 100% !important;
      gap: 0.28rem !important;
    }

    #site-header #header-main-row > .md\:hidden, #site-header #nav-toggle{
      display: none !important;
    }

    #site-header .header-enroll-button{
      flex: 0 0 auto !important;
      min-width: 0 !important;
      padding: 0.68rem clamp(0.72rem, 0.7vw, 0.95rem) !important;
      font-size: clamp(0.55rem, 0.52vw, 0.66rem) !important;
      line-height: 1 !important;
      letter-spacing: 0.025em !important;
      white-space: nowrap !important;
    }
  }

  /* Escritorio compacto: redes abreviadas y selector ES/EN reducido. */
  @media (min-width: 1536px) and (max-width: 1799px) {
    #site-header .header-social-links{
      display: flex !important;
      gap: 0.16rem !important;
    }

    #site-header .header-social-links .social-link{
      display: inline-grid !important;
      place-items: center !important;
      width: auto !important;
      min-width: 1.7rem !important;
      height: 1.7rem !important;
      padding: 0.15rem 0.3rem !important;
      border-radius: 0.48rem !important;
    }

    #site-header .header-social-links .social-link i{
      display: none !important;
    }

    #site-header .header-social-links .social-link::after{
      content: attr(data-short) !important;
      display: block !important;
      font-size: 0.52rem !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
    }

    #site-header .header-language-switcher:not(.header-language-switcher--popover){
      display: inline-flex !important;
      transform: scale(0.9);
      transform-origin: right center;
    }

    #site-header .header-social-menu{
      display: none !important;
    }
  }

  @media (min-width: 1800px) {
    #site-header #header-main-row{
      grid-template-columns: minmax(8.5rem, 0.9fr) minmax(0, auto) minmax(18rem, 1.1fr) !important;
    }

    #site-header .header-social-links, #site-header .header-language-switcher:not(.header-language-switcher--popover){
      display: flex !important;
    }

    #site-header .header-social-menu{
      display: none !important;
    }
  }

  /* ---------- Portada principal ---------- */
  #hero-shell{
    min-height: auto !important;
    height: auto !important;
    padding-block: clamp(1.2rem, 3.8vw, 3.75rem) clamp(2rem, 5vw, 4.5rem) !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  #hero-grid{
    width: min(calc(100% - (var(--cefein-page-gutter) * 2)), 92rem) !important;
    max-width: 92rem !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    align-items: center !important;
    gap: clamp(1.35rem, 3.5vw, 3.5rem) !important;
  }

  #hero-left-content{
    width: 100% !important;
    max-width: 48rem !important;
    gap: clamp(0.72rem, 1.8vw, 1.15rem) !important;
  }

  #hero-badge{
    width: fit-content !important;
    max-width: 100% !important;
    padding: 0.52rem 0.8rem !important;
    font-size: clamp(0.58rem, 1.5vw, 0.72rem) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  #hero-slide-title{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.9rem, 7.6vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
  }

  #hero-slide-title br{ display: block !important; content: ""; }

  #hero-slide-desc{
    width: 100% !important;
    max-width: 43rem !important;
    margin: 0 !important;
    font-size: clamp(0.82rem, 2.6vw, 1rem) !important;
    line-height: 1.62 !important;
    overflow-wrap: break-word !important;
  }

  #hero-actions{
    width: 100% !important;
    max-width: 43rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.7rem !important;
    padding-top: 0.15rem !important;
  }

  #hero-primary-btn, #hero-video-btn{
    min-width: 0 !important;
    min-height: 3rem !important;
    height: auto !important;
    white-space: normal !important;
  }

  #hero-primary-btn{
    flex: 1 1 12.5rem !important;
  }

  #hero-video-btn{
    flex: 1 1 12rem !important;
  }

  #hero-video-btn > span:last-child{
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  #hero-stage, #hero-deck{
    width: 100% !important;
    min-width: 0 !important;
  }

  #hero-deck{
    max-width: 30rem !important;
    margin-inline: auto !important;
  }

  #deck-card-active, #deck-card-prev, #deck-card-next{
    max-width: 100% !important;
  }

  #card-active-title{
    font-size: clamp(1.25rem, 4.4vw, 2rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  #card-active-desc{
    font-size: clamp(0.73rem, 2.2vw, 0.9rem) !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
  }

  @media (max-width: 639px) {
    #hero-grid{
      grid-template-columns: minmax(0, 1fr) !important;
      text-align: left !important;
    }

    #hero-left-content{
      align-items: flex-start !important;
      text-align: left !important;
    }

    #hero-slide-title{
      font-size: clamp(1.82rem, 9.4vw, 2.62rem) !important;
    }

    #hero-actions{
      flex-direction: column !important;
      align-items: stretch !important;
    }

    #hero-primary-btn, #hero-video-btn{
      width: 100% !important;
      flex-basis: auto !important;
    }

    #hero-stage{
      margin-top: 0.25rem !important;
    }
  }

  @media (min-width: 640px) and (max-width: 1199px) {
    #hero-grid{
      grid-template-columns: minmax(0, 1fr) !important;
      justify-items: center !important;
    }

    #hero-left-content{
      align-items: center !important;
      text-align: center !important;
      max-width: 54rem !important;
    }

    #hero-badge, #hero-actions{
      margin-inline: auto !important;
    }

    #hero-slide-title{
      font-size: clamp(2.2rem, 6.2vw, 3.45rem) !important;
      text-align: center !important;
    }

    #hero-slide-desc{
      text-align: center !important;
      margin-inline: auto !important;
    }

    #hero-stage{
      width: min(100%, 32rem) !important;
    }
  }

  @media (min-width: 1200px) {
    #hero-grid{
      grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr) !important;
      justify-items: stretch !important;
    }

    #hero-left-content{
      align-items: flex-start !important;
      text-align: left !important;
    }

    #hero-slide-title{
      font-size: clamp(2.35rem, 3.7vw, 3.9rem) !important;
      text-align: left !important;
    }

    #hero-stage{
      width: 100% !important;
      max-width: 31rem !important;
      justify-self: end !important;
    }
  }

  @media (min-width: 1200px) and (max-height: 760px) {
    #hero-shell{
      padding-block: 1rem 1.6rem !important;
    }

    #hero-slide-title{
      font-size: clamp(2.15rem, 3.15vw, 3.3rem) !important;
      line-height: 1.03 !important;
    }

    #hero-slide-desc{
      font-size: clamp(0.82rem, 1.1vw, 0.94rem) !important;
      line-height: 1.52 !important;
    }

    #hero-deck{
      max-width: 25rem !important;
    }
  }

  @media (min-width: 1800px) {
    #hero-slide-title{
      font-size: clamp(3rem, 3vw, 4.15rem) !important;
    }

    #hero-grid{
      grid-template-columns: minmax(0, 1.02fr) minmax(28rem, 0.98fr) !important;
    }
  }

  /* ---------- Jerarquía tipográfica del resto del sitio ---------- */
  main h1:not(#hero-slide-title):not(#premium-detail-title){
    font-size: clamp(1.85rem, 4.1vw, 3.35rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -0.035em !important;
  }

  main h2, .home-section-title, .catalog-premium-title{
    font-size: clamp(1.45rem, 3.2vw, 2.55rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }

  main h3, .premium-course-card h3, .home-program-card h3{
    font-size: clamp(1rem, 2.1vw, 1.35rem) !important;
    line-height: 1.28 !important;
  }

  #premium-detail-title{
    font-size: clamp(1.7rem, 3.6vw, 3rem) !important;
    line-height: 1.08 !important;
  }

  .home-section-inner, #view-contacto .site-content-shell, #view-convenios .site-content-shell, #view-nosotros .site-content-shell{
    padding-inline: 0 !important;
  }

  @media (max-width: 480px) {
    main h1:not(#hero-slide-title):not(#premium-detail-title){
      font-size: clamp(1.75rem, 8.8vw, 2.45rem) !important;
    }

    main h2, .home-section-title, .catalog-premium-title{
      font-size: clamp(1.35rem, 7vw, 2rem) !important;
    }
  }


  /* =========================================================
     AJUSTES v106 · TÍTULOS UNIFORMES + PESTAÑAS MÁS LEGIBLES
     + ICONOGRAFÍA PREMIUM PARA ENLACES DE INVESTIGACIÓN
     ========================================================= */

  /* Título principal de cada pestaña: misma escala visual exacta. */
  #view-nosotros > div:first-child h1, #view-catalogo > div:first-child h1, #view-convenios > div:first-child h1, #view-contacto > div:first-child h1{
    width: 100% !important;
    max-width: 62rem !important;
    margin-inline: auto !important;
    font-size: clamp(2rem, 3.25vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.032em !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-wrap: balance !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Subtítulos principales de contenido: escala coherente en todas las vistas. */
  #view-nosotros h2, #view-catalogo .catalog-premium-title, #view-convenios h2, #view-contacto h2, .home-section-title{
    font-size: clamp(1.5rem, 2.45vw, 2.15rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.024em !important;
    text-wrap: balance !important;
    overflow-wrap: break-word !important;
  }

  /* Pestañas del header: ligeramente mayores, sin romper la adaptación. */
  @media (min-width: 1536px) {
    #site-header #header-main-nav .nav-link{
      min-height: 2.55rem !important;
      padding: 0.62rem clamp(0.52rem, 0.62vw, 0.78rem) !important;
      font-size: clamp(0.66rem, 0.58vw, 0.76rem) !important;
      line-height: 1.05 !important;
      letter-spacing: 0.025em !important;
    }

    #site-header #header-main-nav{
      gap: clamp(0.08rem, 0.18vw, 0.22rem) !important;
    }
  }

  /* Pestañas internas del catálogo: más legibles y con área táctil adecuada. */
  #view-catalogo .catalog-tab-button{
    min-height: 3rem !important;
    padding: 0.78rem clamp(0.9rem, 2vw, 1.35rem) !important;
    font-size: clamp(0.7rem, 1vw, 0.82rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.035em !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
  }

  /* Menú móvil: pestañas un poco mayores y cómodas para tocar. */
  #mobile-menu .mobile-nav-link{
    min-height: 3rem !important;
    font-size: clamp(0.92rem, 4vw, 1.02rem) !important;
    line-height: 1.3 !important;
  }

  /* Portales externos: tarjetas con iconos distintivos, vivos y accesibles. */
  

  

  

  

  

  

  

  

  

  
  
  
  
  
  
  
  
  
  

  @media (max-width: 639px) {
    #view-nosotros > div:first-child h1, #view-catalogo > div:first-child h1, #view-convenios > div:first-child h1, #view-contacto > div:first-child h1{
      font-size: clamp(1.85rem, 8.2vw, 2.35rem) !important;
      text-align: left !important;
      margin-inline: 0 !important;
    }

    #view-catalogo .catalog-tab-button{
      min-height: 2.85rem !important;
      font-size: 0.72rem !important;
      padding-inline: 0.78rem !important;
    }

    

    

    
  }


  
  

  

  

  

  

  

  

  

  

  

  

  

  .academic-view-toggle{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.32rem;
    border: 1px solid #d7e0e8;
    border-radius: 0.85rem;
    background: #eef3f7;
  }

  .dark .academic-view-toggle{
    border-color: #294968;
    background: #071a2e;
  }

  .academic-view-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.58rem 0.78rem;
    border-radius: 0.65rem;
    color: #52657a;
    font-size: 0.68rem;
    line-height: 1.15;
    font-weight: 850;
    white-space: nowrap;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
  }

  .dark .academic-view-button{ color: #b9c7d4; }

  .academic-view-button.is-active{
    background: #c5a85a;
    color: #071522;
    box-shadow: 0 8px 18px -14px rgba(197,168,90,0.85);
  }

  .academic-view-button:active{ transform: scale(0.98); }

  

  

  .academic-search-wrap--explorer input{
    min-height: 3.05rem !important;
    border-radius: 0.75rem !important;
  }

  .academic-tabs{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .academic-tabs::-webkit-scrollbar{ display: none; }

  .academic-tab-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    flex: 0 0 auto;
    min-height: 3.05rem;
    padding: 0.68rem 0.8rem;
    border: 1px solid #d7e0e8;
    border-radius: 0.72rem;
    background: #f6f8fa;
    color: #42566b;
    font-size: 0.68rem;
    line-height: 1.15;
    font-weight: 850;
    white-space: nowrap;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
  }

  .dark .academic-tab-button{
    border-color: #345878;
    background: #071a2e;
    color: #c6d3e1;
  }

  .academic-tab-button:hover, .academic-tab-button:focus-visible{
    border-color: #c5a85a;
    color: #b59a62;
    outline: none;
  }

  .academic-tab-button.is-active{
    border-color: #d9c487;
    background: #c5a85a;
    color: #071522;
    box-shadow: 0 10px 20px -16px rgba(197,168,90,0.82);
  }

  .academic-tab-button:active{ transform: scale(0.98); }

  

  

  .academic-legal-note--compact{
    padding: 0.8rem 0.9rem !important;
    gap: 0.7rem !important;
  }

  .academic-legal-note--compact p{
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
  }

  

  

  

  .academic-individual-view{
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(0.6rem, 1.6vw, 1rem);
    align-items: center;
    min-width: 0;
    padding: clamp(0.75rem, 2vw, 1rem);
    border: 1px solid #d8e0e7;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 22px 48px -38px rgba(2,12,27,0.76);
  }

  .dark .academic-individual-view{
    border-color: #294968;
    background: #0f294a;
  }

  .academic-individual-view[hidden]{ display: none !important; }

  #academic-individual-content{ min-width: 0; }

  .academic-individual-nav{
    display: grid;
    place-items: center;
    width: clamp(2.75rem, 5vw, 3.25rem);
    aspect-ratio: 1;
    border: 1px solid #d7e0e8;
    border-radius: 50%;
    background: #f4f7f9;
    color: #0f294a;
    font-size: 0.9rem;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
    touch-action: manipulation;
  }

  .dark .academic-individual-nav{
    border-color: #345878;
    background: #071a2e;
    color: #fff;
  }

  .academic-individual-nav:hover, .academic-individual-nav:focus-visible{
    background: #c5a85a;
    color: #071522;
    outline: none;
  }

  .academic-individual-nav:active{ transform: scale(0.96); }

  .academic-individual-counter{
    grid-column: 1 / -1;
    justify-self: center;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: rgba(197,168,90,0.12);
    color: #b59a62;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.05em;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .academic-empty-state{
    grid-column: 1 / -1;
  }

  @media (max-width: 1023px) {
    

    .academic-tabs{
      padding-bottom: 0.1rem;
    }

    .academic-tab-button{
      flex: 1 0 auto;
    }
  }

  @media (max-width: 767px) {
    

    

    

    

    .academic-view-toggle{
      width: 100%;
    }

    .academic-view-button{
      flex: 1 1 9rem;
    }

    

    .academic-individual-view{
      grid-template-columns: minmax(0, 1fr);
      padding-bottom: 4.3rem;
    }

    .academic-individual-nav{
      position: absolute;
      bottom: 0.75rem;
      z-index: 4;
    }

    .academic-individual-nav--prev{ left: 0.75rem; }
    .academic-individual-nav--next{ right: 0.75rem; }

    .academic-individual-counter{
      position: absolute;
      bottom: 1.25rem;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }

    

    

    

    

    
  }

  @media (max-width: 399px) {
    .academic-view-button span, .academic-tab-button span{
      font-size: 0.63rem;
    }

    .academic-tab-button{
      padding-inline: 0.65rem;
    }
  }










.academic-view-toggle, .academic-individual-view, .academic-legal-note--compact{
  border-color: rgba(67,99,133,0.46) !important;
  background: linear-gradient(140deg, rgba(9,26,45,0.98) 0%, rgba(8,22,39,0.96) 52%, rgba(13,37,65,0.96) 100%) !important;
  box-shadow: 0 22px 46px -36px rgba(0,0,0,0.78) !important;
}
.academic-view-button, .academic-tab-button{
  border-color: rgba(74,111,150,0.44) !important;
  background: rgba(255,255,255,0.03) !important;
  color: #DCE7F1 !important;
}
.academic-view-button.is-active, .academic-tab-button.is-active{
  background: linear-gradient(135deg, #C5A85A 0%, #C5A85A 100%) !important;
  color: #071522 !important;
  border-color: rgba(197,168,90,0.65) !important;
  box-shadow: 0 12px 24px -18px rgba(197,168,90,0.72) !important;
}
.academic-tab-button:hover, .academic-tab-button:focus-visible, .academic-view-button:hover, .academic-view-button:focus-visible{
  border-color: rgba(197,168,90,0.6) !important;
  color: #C5A85A !important;
}
.academic-search-wrap--explorer input{
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(83,118,154,0.44) !important;
  color: #F8FAFC !important;
}
.academic-search-wrap--explorer input::placeholder{ color: #95A9BE !important; }

.academic-legal-note--compact strong{ color: #FFF1C2 !important; }
.academic-legal-note--compact p{ color: #BFD0E1 !important; }



















#academic-individual-content{
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
}








@media (max-width: 767px) {
  
  .academic-individual-view, .academic-legal-note--compact{
    border-radius: 1rem !important;
  }
  
  
}









.academic-legal-note--compact{
  border: 1px solid rgba(74, 111, 150, 0.36) !important;
  border-radius: 1.15rem !important;
  background: linear-gradient(145deg, rgba(8,25,43,0.98) 0%, rgba(10,29,49,0.96) 46%, rgba(15,41,74,0.96) 100%) !important;
  box-shadow: 0 24px 50px -38px rgba(0,0,0,0.82) !important;
}




.academic-tabs{
  gap: 0.45rem !important;
}
.academic-tab-button{
  min-height: 2.9rem !important;
  border-color: rgba(74, 111, 150, 0.42) !important;
  background: rgba(255,255,255,0.035) !important;
  color: #D8E4EF !important;
}
.academic-tab-button.is-active{
  background: linear-gradient(135deg, #C5A85A 0%, #C5A85A 100%) !important;
  border-color: rgba(197,168,90,0.68) !important;
  color: #071522 !important;
}
.academic-search-wrap--explorer input{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(74, 111, 150, 0.4) !important;
  color: #fff !important;
}
.academic-search-wrap--explorer input::placeholder{
  color: #94A9BE !important;
}
.academic-legal-note--compact p{
  color: #C1D2E2 !important;
}
.academic-legal-note--compact strong{
  color: #C5A85A !important;
}




































.academic-empty-state{
  display: grid;
  place-items: center;
  gap: 0.45rem;
  padding: 2.1rem 1rem;
  border: 1px dashed rgba(74,111,150,0.36);
  border-radius: 1rem;
  background: rgba(255,255,255,0.02);
  color: #D3E0EB;
}
















































































/* =========================================================
   AJUSTES v112 · RECURSO INDIVIDUAL COMPACTO + HEADER ADAPTATIVO
   ========================================================= */




@media (min-width: 768px) {
  #site-header #header-main-row > .md\:hidden, #site-header #header-main-row > .md\:hidden.pointer-events-none, #mobile-menu{
    display: none !important;
  }

  #site-header #header-desktop-logo, #site-header #header-main-nav, #site-header #header-desktop-actions{
    display: flex !important;
  }

  #site-header.header-logo-only #header-main-row{
    justify-content: center !important;
  }

  #site-header.header-logo-only #header-main-nav, #site-header.header-logo-only #header-desktop-actions{
    display: none !important;
  }

  #site-header.header-logo-only #header-desktop-logo{
    display: flex !important;
    margin-inline: auto !important;
    justify-content: center !important;
  }

  #site-header.header-logo-only #header-desktop-logo img{
    width: auto !important;
    max-width: min(18rem, 70vw) !important;
    height: clamp(2.25rem, 4vw, 2.9rem) !important;
  }
}



:root{ --cefein-header-height: 4.5rem; }
html{ scroll-padding-top: calc(var(--cefein-header-height) + 0.75rem); }
body{ padding-top: var(--cefein-header-height) !important; }
#site-header{
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}
.view-section, .catalog-premium-zone{
  scroll-margin-top: calc(var(--cefein-header-height) + 0.75rem);
}













@media (max-width: 767px) {
  :root{ --cefein-header-height: 4.25rem; }
  
}




/* Portada: una sola acción principal, sin reservar espacio para vídeo. */
#hero-actions{
  justify-content: flex-start !important;
  gap: 0 !important;
}
#hero-primary-btn{
  width: auto !important;
  max-width: 100% !important;
}

/* Catálogo asincrónico: texto visible y subrayado premium. */
#panel-cat-asincronico .premium-filter-bar{
  align-items: stretch !important;
  gap: 0.45rem !important;
}
#panel-cat-asincronico .premium-filter-button{
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 2.85rem !important;
  padding: 0.72rem 0.92rem 0.82rem !important;
  border: 1px solid rgba(100, 137, 176, 0.4) !important;
  border-radius: 0.72rem !important;
  background: rgba(255,255,255,0.035) !important;
  color: #E8F0F7 !important;
  -webkit-text-fill-color: #E8F0F7 !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}
#panel-cat-asincronico .premium-filter-button::after{
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: 0.38rem;
  height: 0.14rem;
  border-radius: 999px;
  background: #C5A85A;
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}
#panel-cat-asincronico .premium-filter-button:hover, #panel-cat-asincronico .premium-filter-button:focus-visible{
  border-color: rgba(197,168,90,0.6) !important;
  background: rgba(197,168,90,0.1) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  outline: none !important;
}
#panel-cat-asincronico .premium-filter-button:hover::after, #panel-cat-asincronico .premium-filter-button:focus-visible::after{
  opacity: 1;
  transform: scaleX(1);
}
#panel-cat-asincronico .premium-filter-button.is-active{
  border-color: #C5A85A !important;
  background: #C5A85A !important;
  color: #071522 !important;
  -webkit-text-fill-color: #071522 !important;
  box-shadow: 0 12px 24px -17px rgba(197,168,90,0.42) !important;
}
#panel-cat-asincronico .premium-filter-button.is-active::after{
  opacity: 1;
  transform: scaleX(1);
  background: #071522;
}

/* Oculta contadores decorativos: las etiquetas quedan limpias y premium. */
#view-catalogo .catalog-premium-count, #premium-results-count{
  display: none !important;
}




/* Investigación: tarjetas naturales, sin huecos ni alineaciones forzadas. */










@media (max-width: 640px) {
  #hero-primary-btn{
    width: 100% !important;
  }
  #panel-cat-asincronico .premium-filter-button{
    min-height: 2.75rem !important;
    padding-inline: 0.78rem !important;
  }
}


/* =========================================================
   AJUSTES v115 · ANIMACIÓN DE PESTAÑAS, DORADO Y FOTOGRAFÍAS
   ========================================================= */
:root{
  --cefein-gold: #C5A85A;
  --cefein-gold-rgb: 197, 168, 90;
}

/* Catálogo asincrónico: botones limpios, sin subrayado decorativo. */
#panel-cat-asincronico .premium-filter-button::after{
  content: none !important;
  display: none !important;
}
#panel-cat-asincronico .premium-filter-button{
  padding-bottom: 0.72rem !important;
}
#panel-cat-asincronico .premium-filter-button:hover, #panel-cat-asincronico .premium-filter-button:focus-visible{
  border-color: rgba(var(--cefein-gold-rgb), 0.58) !important;
  background: rgba(var(--cefein-gold-rgb), 0.11) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
#panel-cat-asincronico .premium-filter-button.is-active{
  border-color: var(--cefein-gold) !important;
  background: var(--cefein-gold) !important;
  color: #071522 !important;
  -webkit-text-fill-color: #071522 !important;
}

/* Reproduce la entrada suave del encabezado de Nosotros en cada pestaña. */
@keyframes cefeinTabIntroEnter {
  0% {
    opacity: 0;
    transform: translateY(0.7rem) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.cefein-tab-intro-animate{
  animation: cefeinTabIntroEnter 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  transform-origin: center top;
}
@media (prefers-reduced-motion: reduce) {
  .cefein-tab-intro-animate{
    animation: none !important;
  }
}

/* Marco circular para la fotografía de Dirección en Nosotros. */
.cefein-profile-photo{
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(6.8rem, 12vw, 9rem);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 0.24rem solid var(--cefein-gold);
  border-radius: 50%;
  background: #071A2E;
  box-shadow:
    0 0 0 0.38rem rgba(var(--cefein-gold-rgb), 0.13),
    0 1.4rem 2.8rem -1.9rem rgba(0, 0, 0, 0.86);
}
.cefein-profile-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Galería circular para docentes dentro del detalle del programa. */










/* =========================================================
   AJUSTES v116 · CTA ASESOR + EVENTOS SOLO COMO RESEÑA
   ========================================================= */
#hero-advisor-btn, .hero-advisor-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 15.5rem);
  border: 1px solid rgba(254, 202, 202, 0.34);
  background: linear-gradient(135deg, #B91C1C 0%, #DC2626 52%, #991B1B 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 38px -24px rgba(220, 38, 38, 0.88), inset 0 1px 0 rgba(255,255,255,0.16);
  text-shadow: 0 1px 2px rgba(0,0,0,0.32);
}
#hero-advisor-btn:hover, #hero-advisor-btn:focus-visible, .hero-advisor-button:hover, .hero-advisor-button:focus-visible{
  background: linear-gradient(135deg, #DC2626 0%, #EF4444 52%, #B91C1C 100%) !important;
  border-color: rgba(254, 202, 202, 0.58);
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -24px rgba(239, 68, 68, 0.92), inset 0 1px 0 rgba(255,255,255,0.2);
  outline: none;
}

.premium-course-card--historical{
  cursor: default !important;
}
.premium-course-badge--historical{
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  color: #E2E8F0 !important;
}
.historical-event-note{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.9rem;
  background: rgba(148, 163, 184, 0.06);
  color: #CBD5E1;
  font-size: 0.76rem;
  line-height: 1.55;
}
.historical-event-note i{
  margin-top: 0.1rem;
  color: #C5A85A;
}
.premium-card-actions--unavailable{
  display: block !important;
  margin-top: auto;
}
.premium-action-unavailable, .home-program-unavailable{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.85rem;
  background: rgba(71, 85, 105, 0.32);
  color: #CBD5E1;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: not-allowed;
}
.home-program-footer--unavailable{
  display: block !important;
}
.home-program-card.is-historical-event .home-program-body{
  align-content: start;
}
.home-program-card.is-historical-event .home-program-unavailable{
  width: auto;
  min-width: 10rem;
}
@media (max-width: 639px) {
  #hero-advisor-btn, .hero-advisor-button{
    width: 100%;
  }
}


/* =========================================================
   AJUSTES v117 · BOTONES DE PORTADA SEPARADOS Y MÁS CUADRADOS
   ========================================================= */
#hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  column-gap: clamp(1rem, 2.2vw, 1.75rem) !important;
  row-gap: clamp(0.85rem, 1.8vw, 1.2rem) !important;
}

#hero-primary-btn, #hero-advisor-btn{
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: min(100%, 13.75rem) !important;
  max-width: 100% !important;
  min-height: 3.25rem !important;
  padding: 0.9rem clamp(1.15rem, 2vw, 1.75rem) !important;
  border-radius: 0.72rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

#hero-advisor-btn{
  margin: 0 !important;
}

@media (max-width: 639px) {
  #hero-actions{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.9rem !important;
  }

  #hero-primary-btn, #hero-advisor-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   AJUSTES v118 · TARJETAS DE INVESTIGACIÓN UNIFORMES
   ========================================================= */



































































/* =========================================================
   AJUSTES v122 · PORTADA A PANTALLA COMPLETA + CEREBRO VIVO
   ========================================================= */
:root{
  --cefein-header-height: 5rem;
}

#hero-shell{
  min-height: calc(100svh - var(--cefein-header-height)) !important;
  min-height: calc(100dvh - var(--cefein-header-height)) !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: clamp(1rem, 3vh, 2.4rem) !important;
  overflow-x: clip !important;
  overflow-y: hidden !important;
}

#hero-grid{
  min-height: calc(100svh - var(--cefein-header-height) - clamp(2rem, 6vh, 4.8rem)) !important;
  min-height: calc(100dvh - var(--cefein-header-height) - clamp(2rem, 6vh, 4.8rem)) !important;
  align-content: center !important;
}

#three-neural-backdrop canvas{
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1199px) {
  #hero-shell{
    overflow-y: visible !important;
  }

  #hero-grid{
    min-height: auto !important;
  }
}

@media (max-width: 639px) {
  #hero-shell{
    min-height: calc(100svh - var(--cefein-header-height)) !important;
    min-height: calc(100dvh - var(--cefein-header-height)) !important;
    padding-block: 1rem 1.5rem !important;
  }
}













/* =========================================================
   AJUSTES v124 · CEREBRO EN UN GIRO + PORTADAS PSICOLOGÍA
   ========================================================= */






  

  

  

  /* =========================================================
     PORTADA · TRANSICIÓN SUAVE Y TIPOGRAFÍA ÍNTEGRA
     Ninguna palabra se divide, recorta o desaparece.
     ========================================================= */
  #hero-bg-container {
    isolation: isolate;
    background: #020c1b;
  }

  .hero-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
  }

  .hero-bg-layer.is-current {
    z-index: 1;
    opacity: 1;
  }

  #hero-slide-title,
  #hero-slide-desc,
  #card-active-category,
  #card-active-title,
  #card-active-desc,
  #card-active-duration {
    text-shadow: none;
  }

  #hero-slide-title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding-block: 0.08em 0.18em;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    text-wrap: balance;
    line-height: 1.06 !important;
    transform-origin: left center;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  #hero-slide-title br {
    display: block !important;
    content: "";
  }

  #hero-slide-title span {
    display: inline;
    max-width: 100%;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  #hero-slide-desc,
  .hero-card-text-reveal {
    overflow: visible;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  @media (max-width: 639px) {
    #hero-slide-title {
      font-size: clamp(1.75rem, 8.7vw, 2.55rem) !important;
      line-height: 1.08 !important;
      letter-spacing: -0.03em !important;
    }
  }

  @media (min-width: 640px) and (max-width: 1199px) {
    #hero-slide-title {
      font-size: clamp(2.05rem, 5.6vw, 3.35rem) !important;
      line-height: 1.07 !important;
      letter-spacing: -0.035em !important;
    }
  }

  @media (min-width: 1200px) {
    #hero-slide-title {
      font-size: clamp(2.35rem, 3.45vw, 3.75rem) !important;
      line-height: 1.06 !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-bg-layer,
    #hero-slide-title,
    #hero-slide-desc,
    .hero-card-text-reveal {
      transition: none !important;
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
      will-change: auto;
    }
  }

  /* CATÁLOGO · CUADRÍCULA RESPONSIVA DE ANCHO ESTABLE */
  .premium-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 22rem));
    justify-content: start;
    align-items: stretch;
    gap: clamp(1rem, 2.2vw, 1.45rem);
    width: 100%;
    min-width: 0;
  }

  /* Un único resultado conserva el mismo ancho que una tarjeta normal. */
  .premium-course-grid > .premium-course-card {
    width: 100%;
    max-width: 22rem;
  }

  @media (max-width: 479px) {
    .premium-course-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .premium-course-grid > .premium-course-card {
      max-width: none;
    }
  }



  
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  



  /* =========================================================
     PALETA DE SUPERFICIES CEFEIN · IMPLEMENTACIÓN ÚNICA
     Las superficies amplias permanecen en azul oscuro.
     Los colores se reservan para iconos, etiquetas y estados.
     ========================================================= */
  .home-program-card,
  #view-catalogo .premium-course-card {
    border: 1px solid rgba(72, 116, 154, .48) !important;
    background: linear-gradient(145deg, #102B49 0%, #07182C 52%, #020C1B 100%) !important;
    box-shadow: 0 28px 68px -44px rgba(0, 0, 0, .96), inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  .home-program-card:hover,
  .home-program-card:focus-within,
  #view-catalogo .premium-course-card:hover,
  #view-catalogo .premium-course-card:focus-within {
    border-color: rgba(125, 211, 252, .46) !important;
    box-shadow: 0 34px 78px -46px rgba(0, 0, 0, .98), 0 18px 42px -34px rgba(56,189,248,.34) !important;
  }

  .catalog-card-v5 {
    border: 1px solid rgba(72, 116, 154, .48) !important;
    background: linear-gradient(155deg, #102946 0%, #07172B 68%, #061322 100%) !important;
    box-shadow: 0 26px 70px -42px rgba(0,0,0,.94) !important;
  }

  .catalog-card-v5:hover,
  .catalog-card-v5:focus-within,
  .catalog-card-v5.is-selected {
    border-color: rgba(125, 211, 252, .5) !important;
    box-shadow: 0 34px 82px -44px rgba(56,189,248,.23), 0 24px 64px -42px rgba(0,0,0,.96) !important;
  }

  .catalog-card-v5__format-picker,
  .catalog-card-v5__format-fixed,
  .catalog-card-v5__facts li {
    border: 1px solid rgba(72, 116, 154, .34) !important;
    background: rgba(10, 32, 56, .84) !important;
  }

  .catalog-learning-principle,
  .contact-advisor-free-note {
    border: 1px solid rgba(72, 116, 154, .42) !important;
    background: linear-gradient(145deg, rgba(15,41,74,.9), rgba(4,17,32,.96)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 44px -34px rgba(0,0,0,.9) !important;
    color: #F8FAFC !important;
  }

  .payment-v193__contacts a{
    border: 1px solid rgba(72, 116, 154, .48) !important;
    background: linear-gradient(145deg, #102B49, #07182C) !important;
    color: #F8FAFC !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  .payment-v193__contacts a:hover, .payment-v193__contacts a:focus-visible{
    border-color: rgba(125,211,252,.54) !important;
    background: linear-gradient(145deg, #153858, #0A2038) !important;
  }

  .payment-v193__method--mobile {
    border-color: rgba(72, 116, 154, .34) !important;
  }

  .contact-claims-note {
    border: 1px solid rgba(248,113,113,.3) !important;
    background: linear-gradient(145deg, rgba(15,41,74,.9), rgba(4,17,32,.96)) !important;
  }

  



/* Hoja consolidada de componentes. Orden conservado para mantener la cascada. */

  /* =========================================================
     CATÁLOGO Y COMPONENTES BASE
     ========================================================= */

  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  

  #view-catalogo .premium-course-grid .premium-course-card {
    background:
      radial-gradient(circle at 92% 0%, rgba(var(--course-accent-rgb),.16), transparent 34%),
      linear-gradient(160deg, #0D2845 0%, #061625 58%, #020C1B 100%) !important;
    border-color: rgba(var(--course-accent-rgb),.34) !important;
  }
  #view-catalogo .premium-course-grid .premium-course-card:nth-child(6n/**/+1) { box-shadow: 0 30px 70px -52px rgba(56,189,248,.82) !important; }
  #view-catalogo .premium-course-grid .premium-course-card:nth-child(6n/**/+2) { box-shadow: 0 30px 70px -52px rgba(167,139,250,.78) !important; }
  #view-catalogo .premium-course-grid .premium-course-card:nth-child(6n/**/+3) { box-shadow: 0 30px 70px -52px rgba(45,212,191,.72) !important; }
  #view-catalogo .premium-course-grid .premium-course-card:nth-child(6n/**/+4) { box-shadow: 0 30px 70px -52px rgba(244,114,182,.70) !important; }
  #view-catalogo .premium-course-grid .premium-course-card:nth-child(6n/**/+5) { box-shadow: 0 30px 70px -52px rgba(251,191,36,.68) !important; }
  #view-catalogo .premium-course-grid .premium-course-card:nth-child(6n/**/+6) { box-shadow: 0 30px 70px -52px rgba(96,165,250,.74) !important; }

  .premium-card-facts {
    display: grid;
    gap: .56rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .premium-card-facts li {
    display: grid;
    grid-template-columns: 1.35rem minmax(0,1fr) auto;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .68rem .74rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .78rem;
    background: rgba(255,255,255,.035);
  }
  .premium-card-facts i { color: #FFFFFF; font-size: .76rem; text-align: center; }
  .premium-card-facts span { color: #BFD0E1; font-size: .7rem; line-height: 1.35; }
  .premium-card-facts strong { color: #FFFFFF; font-size: .68rem; line-height: 1.35; text-align: right; }
  .premium-card-actions--v125 { display: grid !important; grid-template-columns: 1fr !important; gap: .58rem !important; }

  .premium-benefit-item--compact {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .55rem;
    align-items: start;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09) !important;
    background: linear-gradient(150deg, rgba(255,255,255,.052), rgba(255,255,255,.018)) !important;
  }

  .premium-benefit-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.82rem;
    aspect-ratio: 1;
    border-radius: .56rem;
    color: #C5A85A;
    border: 1px solid rgba(197,168,90,.26);
    background: rgba(197,168,90,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }

  .premium-benefit-copy { min-width: 0; }
  .premium-benefit-copy h3 {margin: 0;color: #fff;font-size: .72rem;line-height: 1.3;}
  .premium-benefit-copy p { margin: .16rem 0 0; color: #9FB0C1; font-size: .64rem; line-height: 1.42; }

  .premium-payment-grid--animated .premium-payment-item {
    position: relative;
    overflow: hidden;
    animation: cefeinPaymentFloat 5.8s ease-in-out infinite;
    animation-delay: var(--payment-delay, 0s);
  }
  .premium-payment-grid--animated .premium-payment-item::after {
    content: "";
    position: absolute;
    inset: -80% auto -80% -45%;
    width: 32%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    animation: cefeinPaymentShine 7.2s ease-in-out infinite;
    animation-delay: var(--payment-delay, 0s);
  }
  .premium-payment-brand { display: inline-flex !important; align-items: center; gap: .4rem; }
  .premium-payment-brand--yape { color: #E9D5FF !important; background: rgba(168,85,247,.16) !important; }
  .premium-payment-brand--plin { color: #A5F3FC !important; background: rgba(6,182,212,.15) !important; }
  @keyframes cefeinPaymentFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }
  @keyframes cefeinPaymentShine {
    0%, 45% { left: -45%; opacity: 0; }
    60% { opacity: 1; }
    78%, 100% { left: 125%; opacity: 0; }
  }

  .terms-acceptance--optional { opacity: .92; }
  .terms-acceptance--optional label { color: #64748B; }

  
  
  
  

  @media (max-width: 479px) {
    
    
    .premium-card-facts li { grid-template-columns: 1.25rem minmax(0,1fr); }
    .premium-card-facts strong { grid-column: 2; text-align: left; }
  }
  @media (prefers-reduced-motion: reduce) {
    .premium-payment-grid--animated .premium-payment-item,
    .premium-payment-grid--animated .premium-payment-item::after { animation: none !important; }
    
  }

  /* =========================================================
     NAVEGACIÓN, CONTACTO Y FORMULARIOS
     ========================================================= */
#view-catalogo .premium-card-actions--v125 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.42rem, 1vw, 0.58rem) !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  #view-catalogo .premium-card-actions--v125 > .premium-action-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3.1rem !important;
    height: auto !important;
    padding: 0.72rem clamp(0.45rem, 1.3vw, 0.72rem) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.18 !important;
    font-size: clamp(0.56rem, 1.35vw, 0.68rem) !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
  }

  #view-catalogo .premium-card-actions--v125 > .action-view-program {
    grid-column: 1 / -1 !important;
  }

  #view-catalogo .premium-card-actions--v125 > .premium-action-button i {
    flex: 0 0 auto !important;
  }

  #view-catalogo .premium-course-grid .premium-course-card {
    --catalog-card-rgb: var(--course-accent-rgb, 55, 198, 244);
    background:
      radial-gradient(circle at 12% 8%, rgba(var(--catalog-card-rgb), 0.34), transparent 34%),
      radial-gradient(circle at 96% 92%, rgba(var(--catalog-card-rgb), 0.16), transparent 38%),
      linear-gradient(155deg, rgba(var(--catalog-card-rgb), 0.18) 0%, rgba(8, 28, 54, 0.97) 43%, #020C1B 100%) !important;
    border-color: rgba(var(--catalog-card-rgb), 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 20px 46px -30px rgba(var(--catalog-card-rgb), 0.82),
      0 18px 48px -28px rgba(0,0,0,0.92) !important;
    transition: transform 360ms cubic-bezier(.22,1,.36,1), border-color 360ms ease, box-shadow 360ms ease, filter 360ms ease !important;
  }

  #view-catalogo .premium-course-grid .premium-course-card:hover,
  #view-catalogo .premium-course-grid .premium-course-card:focus-within {
    transform: translateY(-0.35rem) !important;
    border-color: rgba(var(--catalog-card-rgb), 0.82) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 26px 60px -30px rgba(var(--catalog-card-rgb), 0.92),
      0 24px 54px -30px rgba(0,0,0,0.96) !important;
  }

  #view-catalogo .premium-course-grid .premium-course-card .premium-card-facts li {
    background: linear-gradient(135deg, rgba(var(--catalog-card-rgb), 0.13), rgba(255,255,255,0.035)) !important;
    border-color: rgba(var(--catalog-card-rgb), 0.23) !important;
  }

  #view-catalogo .premium-course-grid .premium-course-card .premium-card-facts i,
  #view-catalogo .premium-course-grid .premium-course-card .course-type-label,
  #view-catalogo .premium-course-grid .premium-course-card .premium-course-icon {
    color: rgb(var(--catalog-card-rgb)) !important;
  }

  #catalog-live-premium-grid .premium-course-card:nth-child(6n + 1),
  #catalog-async-premium-grid .premium-course-card:nth-child(6n + 1) { --catalog-card-rgb: 55, 198, 244; }
  #catalog-live-premium-grid .premium-course-card:nth-child(6n + 2),
  #catalog-async-premium-grid .premium-course-card:nth-child(6n + 2) { --catalog-card-rgb: 139, 124, 255; }
  #catalog-live-premium-grid .premium-course-card:nth-child(6n + 3),
  #catalog-async-premium-grid .premium-course-card:nth-child(6n + 3) { --catalog-card-rgb: 45, 212, 191; }
  #catalog-live-premium-grid .premium-course-card:nth-child(6n + 4),
  #catalog-async-premium-grid .premium-course-card:nth-child(6n + 4) { --catalog-card-rgb: 244, 114, 182; }
  #catalog-live-premium-grid .premium-course-card:nth-child(6n + 5),
  #catalog-async-premium-grid .premium-course-card:nth-child(6n + 5) { --catalog-card-rgb: 245, 158, 11; }
  #catalog-live-premium-grid .premium-course-card:nth-child(6n),
  #catalog-async-premium-grid .premium-course-card:nth-child(6n) { --catalog-card-rgb: 96, 165, 250; }

  #view-contacto .contact-field select,
  #view-contacto .contact-field input,
  #view-contacto .contact-field textarea {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  @media (max-width: 360px) {
    #view-catalogo .premium-card-actions--v125 > .premium-action-button {
      padding-inline: 0.34rem !important;
      font-size: 0.53rem !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #view-catalogo .premium-course-grid .premium-course-card {
      transition: none !important;
    }
  }

  
#hero-stage,
  #hero-deck {
    overflow: visible !important;
  }

  @media (min-width: 640px) {
    #hero-stage {
      width: min(100%, 38rem) !important;
      max-width: 38rem !important;
      padding-inline: clamp(2rem, 5vw, 4.5rem) !important;
      justify-self: center !important;
    }

    #hero-deck {
      --fan-x: clamp(3.15rem, 5vw, 4.8rem) !important;
      --fan-y: clamp(0.65rem, 1.6vw, 1.25rem) !important;
      --fan-rotate: 10deg !important;
      --fan-side-scale: 0.88 !important;
      width: min(100%, 31rem) !important;
      max-width: 31rem !important;
    }

    #deck-card-active { width: 84% !important; }
    #deck-card-prev,
    #deck-card-next {
      display: block !important;
      width: 78% !important;
      opacity: 0.66 !important;
      visibility: visible !important;
      z-index: 12 !important;
    }

    #deck-card-next { transform-origin: 8% 94% !important; }
    #deck-card-prev { transform-origin: 92% 94% !important; }
  }

  @media (min-width: 1200px) {
    #hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(31rem, 0.95fr) !important;
    }
    #hero-stage {
      justify-self: center !important;
    }
  }

  #view-catalogo .premium-course-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.35rem) !important;
    align-items: stretch !important;
  }

  #view-catalogo .premium-course-card {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 1.35rem !important;
  }

  #view-catalogo .premium-course-cover {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #view-catalogo .premium-course-grid .premium-course-card .course-type-label,
  #view-catalogo .premium-course-grid .premium-course-card .course-type-chip,
  #view-catalogo .premium-course-grid .premium-course-card .premium-course-badge,
  #view-catalogo .premium-course-grid .premium-course-card .course-type-label *,
  #view-catalogo .premium-course-grid .premium-course-card .course-type-chip *,
  #view-catalogo .premium-course-grid .premium-course-card .premium-course-badge * {
    color: #FFFFFF !important;
  }

  #view-catalogo .course-type-label {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 0.42rem 0.72rem !important;
    border-radius: 0.7rem !important;
    line-height: 1.15 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }

  #view-catalogo .premium-card-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  #view-catalogo .premium-card-facts li {
    min-height: 0 !important;
    padding: 0.7rem !important;
    align-content: start !important;
  }

  #view-catalogo .premium-card-facts span,
  #view-catalogo .premium-card-facts strong {
    color: #FFFFFF !important;
  }

  @media (max-width: 420px) {
    #view-catalogo .premium-card-facts { grid-template-columns: 1fr !important; }
  }

  

  

  
  
  
  
  
  
  
  

  .classroom-shell,
  .jobs-shell {
    min-width: 0;
    background: #020C1B;
    color: #F8FAFC;
  }

  .classroom-container,
  .jobs-container {
    width: min(calc(100% - clamp(1.5rem, 5vw, 4rem)), 90rem);
    margin-inline: auto;
  }

  .classroom-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.2rem, 6vw, 5.25rem);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background:
      radial-gradient(circle at 78% 16%, rgba(56,189,248,0.2), transparent 32%),
      radial-gradient(circle at 14% 88%, rgba(197,168,90,0.15), transparent 30%),
      linear-gradient(145deg, #020C1B, #0A2440 52%, #071526);
  }

  .classroom-hero-glow {
    position: absolute;
    width: min(42rem, 78vw);
    aspect-ratio: 1;
    right: -16rem;
    top: -23rem;
    border-radius: 999px;
    border: 1px solid rgba(125,211,252,0.16);
    box-shadow: 0 0 90px rgba(56,189,248,0.09), inset 0 0 80px rgba(197,168,90,0.05);
  }

  .classroom-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
    gap: clamp(1.25rem, 4vw, 3.5rem);
    align-items: end;
  }

  .classroom-hero-copy { min-width: 0; }
  .classroom-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #BFD0E1;
    font-size: 0.75rem;
    font-weight: 800;
  }
  .classroom-back-button:hover { color: #FFFFFF; }
  .jobs-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #C5A85A;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .classroom-hero h1,
  .jobs-hero h1 {margin-top: 0.7rem;font-size: clamp(2rem, 5vw, 4.6rem);line-height: 1.02;letter-spacing: -0.045em;color: #FFFFFF;}
  .classroom-hero-copy > p,
  .jobs-hero p {
    max-width: 48rem;
    margin-top: 0.85rem;
    color: #BFD0E1;
    font-size: clamp(0.9rem, 1.5vw, 1.04rem);
    line-height: 1.65;
  }
  .classroom-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.15rem;
  }
  .classroom-hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.52rem 0.72rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.045);
    color: #E6EEF7;
    font-size: 0.68rem;
    font-weight: 800;
  }
  .classroom-selector-card {
    display: grid;
    gap: 0.58rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1.25rem;
    background: rgba(3,16,34,0.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 28px 50px -34px rgba(0,0,0,0.95);
  }
  .classroom-selector-card label {
    color: #BFD0E1;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .classroom-selector-card select {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(125,168,216,0.28);
    border-radius: 0.8rem;
    background: #07182C;
    color: #FFFFFF;
    font-size: 0.8rem;
    font-weight: 750;
  }
  .classroom-progress-summary { margin-top: 0.45rem; }
  .classroom-progress-summary > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #BFD0E1;
    font-size: 0.73rem;
  }
  .classroom-progress-summary strong { color: #FFFFFF; }
  .classroom-progress-track {
    height: 0.42rem;
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
  }
  .classroom-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #C5A85A, #38BDF8);
    transition: width 500ms cubic-bezier(.22,1,.36,1);
  }

  .classroom-main {
    display: grid;
    gap: clamp(1.4rem, 4vw, 3rem);
    padding-block: clamp(1.5rem, 5vw, 4rem);
  }
  
  .classroom-session-panel, .classroom-owner-panel{
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 1.35rem;
    background: linear-gradient(155deg, rgba(15,41,74,0.82), rgba(5,20,39,0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 26px 54px -38px rgba(0,0,0,0.95);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  .classroom-session-panel {
    padding: clamp(1rem, 2vw, 1.25rem);
    max-height: min(42rem, 78vh);
    overflow: auto;
  }
  .classroom-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .classroom-panel-heading span:first-child { color: #C5A85A; font-size: 0.61rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
  .classroom-panel-heading h2 { margin-top: 0.18rem; color: #FFFFFF; font-size: 1rem; }
  .classroom-count-chip { padding: 0.36rem 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.055); color: #BFD0E1; font-size: 0.6rem; font-weight: 850; white-space: nowrap; }
  .classroom-session-list { display: grid; gap: 0.62rem; margin-top: 0.85rem; }
  .classroom-session-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    width: 100%;
    min-height: 3.65rem;
    padding: 0.7rem;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 0.9rem;
    background: rgba(255,255,255,0.025);
    text-align: left;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  }
  .classroom-session-item:hover,
  .classroom-session-item:focus-visible,
  .classroom-session-item.is-active {
    transform: translateX(0.16rem);
    border-color: rgba(56,189,248,0.38);
    background: rgba(56,189,248,0.075);
  }
  .classroom-session-index {
    display: grid;
    place-items: center;
    width: 2.1rem;
    aspect-ratio: 1;
    border-radius: 0.7rem;
    background: rgba(197,168,90,0.1);
    color: #C5A85A;
    font-size: 0.68rem;
    font-weight: 900;
  }
  .classroom-session-item.is-complete .classroom-session-index { background: rgba(16,185,129,0.16); color: #6EE7B7; }
  .classroom-session-info { min-width: 0; }
  .classroom-session-info strong { display: block; color: #FFFFFF; font-size: 0.74rem; line-height: 1.35; }
  .classroom-session-info span { display: block; margin-top: 0.16rem; color: #8FA9C1; font-size: 0.62rem; }
  .classroom-session-state { color: #6F8DA7; font-size: 0.68rem; }
  .classroom-session-item.is-complete .classroom-session-state { color: #6EE7B7; }

  .classroom-owner-panel { overflow: hidden; }
  .classroom-owner-panel > summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.15rem;
    color: #E7EEF6;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
  }
  .classroom-owner-panel > summary::-webkit-details-marker { display: none; }
  .classroom-owner-panel[open] > summary { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .classroom-owner-content { display: grid; gap: 1rem; padding: 1rem; }
  .classroom-owner-note { display: flex; gap: 0.65rem; padding: 0.8rem; border-radius: 0.85rem; background: rgba(56,189,248,0.075); border: 1px solid rgba(56,189,248,0.16); color: #BFD0E1; font-size: 0.72rem; line-height: 1.55; }
  .classroom-owner-note i { color: #7DD3FC; margin-top: 0.15rem; }
  .classroom-owner-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .classroom-owner-form label { display: grid; gap: 0.35rem; color: #BFD0E1; font-size: 0.68rem; font-weight: 800; }
  .classroom-owner-form input,
  .classroom-owner-form textarea {
    width: 100%;
    min-width: 0;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(125,168,216,0.23);
    border-radius: 0.75rem;
    background: #06172B;
    color: #FFFFFF;
    font-size: 0.78rem;
  }
  .classroom-owner-wide { grid-column: 1 / -1; }
  .classroom-owner-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }
  .classroom-owner-actions button { min-height: 2.7rem; padding: 0.7rem 0.95rem; border-radius: 0.72rem; background: #C5A85A; color: #020C1B; font-size: 0.7rem; font-weight: 900; }
  .classroom-owner-actions button.is-secondary { background: rgba(255,255,255,0.055); color: #DCE7F1; border: 1px solid rgba(255,255,255,0.1); }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  .jobs-hero {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background:
      radial-gradient(circle at 82% 20%, rgba(197,168,90,0.2), transparent 28%),
      linear-gradient(145deg, #020C1B, #0E2B4B);
  }
  .jobs-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: center; }
  .jobs-hero-icon { display: grid; place-items: center; width: clamp(5rem, 10vw, 8rem); aspect-ratio: 1; border-radius: 2rem; border: 1px solid rgba(197,168,90,0.3); background: rgba(197,168,90,0.08); color: #C5A85A; font-size: clamp(1.8rem, 4vw, 3rem); transform: rotate(3deg); }
  .jobs-main { display: grid; gap: 2rem; padding-block: clamp(1.5rem, 5vw, 4rem); }
  .jobs-disclaimer { display: flex; gap: 0.7rem; padding: 0.95rem 1rem; border-radius: 1rem; border: 1px solid rgba(56,189,248,0.17); background: rgba(56,189,248,0.055); color: #BCD0E2; font-size: 0.74rem; line-height: 1.55; }
  .jobs-disclaimer i { color: #7DD3FC; margin-top: 0.18rem; }
  .jobs-section { display: grid; gap: 1rem; }
  .jobs-section-heading span {color: #C5A85A;font-size: 0.65rem;letter-spacing: 0.09em;text-transform: uppercase;}
  .jobs-section-heading h2 {margin-top: 0.3rem;color: #FFFFFF;font-size: clamp(1.25rem, 3vw, 2rem);}
  .jobs-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
  .jobs-grid--compact { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .job-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 18rem; padding: 1rem; border: 1px solid rgba(255,255,255,0.09); border-radius: 1.2rem; background: linear-gradient(155deg, rgba(15,41,74,0.85), rgba(4,18,35,0.94)); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 44px -32px rgba(0,0,0,0.95); transition: transform 320ms cubic-bezier(.22,1,.36,1), border-color 320ms ease, box-shadow 320ms ease; }
  .job-card:hover,
  .job-card:focus-visible { transform: translateY(-0.35rem); border-color: rgba(197,168,90,0.42); box-shadow: 0 30px 54px -30px rgba(197,168,90,0.2), 0 24px 50px -32px rgba(0,0,0,0.98); }
  .job-logo { display: grid; place-items: center; width: 3.3rem; aspect-ratio: 1; border-radius: 0.9rem; background: #FFFFFF; border: 1px solid rgba(255,255,255,0.22); }
  .job-logo img { width: 2rem; height: 2rem; object-fit: contain; }
  .job-card-tag { align-self: flex-start; margin-top: 0.9rem; padding: 0.34rem 0.5rem; border-radius: 999px; background: rgba(197,168,90,0.1); color: #DCCB9A; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
  .job-card h3 {margin-top: 0.65rem;color: #FFFFFF;font-size: 1.05rem;}
  .job-card p { margin-top: 0.45rem; color: #AFC3D7; font-size: 0.73rem; line-height: 1.58; }
  .job-action { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 1rem; color: #C5A85A; font-size: 0.7rem; font-weight: 900; }

  @media (max-width: 960px) {
    .classroom-hero-grid{ grid-template-columns: 1fr; }
    .classroom-session-panel { max-height: none; }
    
    .jobs-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 640px) {
    .classroom-hero-grid,
    .jobs-hero-grid { grid-template-columns: 1fr; }
    .jobs-hero-icon { display: none; }
    
    
    .classroom-owner-form, .jobs-grid, .jobs-grid--compact{ grid-template-columns: 1fr; }
    
    
    .job-card { min-height: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .classroom-progress-track span,
    .classroom-session-item,
    .job-card { transition: none !important; }
  }

  /* =========================================================
     RESPONSIVIDAD GENERAL
     ========================================================= */
#view-catalogo .premium-course-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)) !important;
    gap: clamp(1rem, 2.2vw, 1.45rem) !important;
  }

  #view-catalogo .premium-course-card {
    container-type: inline-size;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #view-catalogo .premium-course-card .relative.z-10.flex.flex-col {
    min-width: 0 !important;
    padding: clamp(1rem, 3.6vw, 1.35rem) !important;
    gap: clamp(0.9rem, 2vw, 1.15rem) !important;
  }

  #view-catalogo .premium-course-card h3,
  #view-catalogo .premium-course-card p,
  #view-catalogo .premium-course-card span,
  #view-catalogo .premium-course-card strong,
  #view-catalogo .premium-course-card button {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none;
  }

  #view-catalogo .premium-course-card h3 {
    font-size: clamp(1.02rem, 2.2vw, 1.25rem) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
  }

  #view-catalogo .premium-course-card p {
    font-size: clamp(0.75rem, 1.2vw, 0.84rem) !important;
    line-height: 1.58 !important;
  }

  #view-catalogo .premium-course-badge,
  #view-catalogo .course-type-chip,
  #view-catalogo .course-type-label,
  #view-catalogo .premium-course-badge *,
  #view-catalogo .course-type-chip *,
  #view-catalogo .course-type-label * {
    color: #FFFFFF !important;
    line-height: 1.2 !important;
  }

  #view-catalogo .premium-course-badge,
  #view-catalogo .course-type-chip {
    max-width: min(100%, 12rem) !important;
    padding: 0.45rem 0.65rem !important;
    font-size: clamp(0.58rem, 1.1vw, 0.68rem) !important;
    text-align: center !important;
  }

  #view-catalogo .premium-card-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.62rem !important;
  }

  #view-catalogo .premium-card-facts li {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.55rem !important;
    row-gap: 0.18rem !important;
    align-items: start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0.75rem !important;
  }

  #view-catalogo .premium-card-facts li > i {
    grid-row: 1 / span 2 !important;
    margin-top: 0.12rem !important;
  }

  #view-catalogo .premium-card-facts li > span,
  #view-catalogo .premium-card-facts li > strong {
    grid-column: 2 !important;
    display: block !important;
    color: #FFFFFF !important;
    text-align: left !important;
  }

  #view-catalogo .premium-card-facts li > span {
    font-size: clamp(0.65rem, 1.1vw, 0.72rem) !important;
    line-height: 1.3 !important;
  }

  #view-catalogo .premium-card-facts li > strong {
    font-size: clamp(0.69rem, 1.15vw, 0.77rem) !important;
    line-height: 1.35 !important;
  }

  #view-catalogo .premium-card-actions--v125 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.62rem !important;
  }

  #view-catalogo .premium-card-actions--v125 .action-view-program {
    grid-column: 1 / -1 !important;
  }

  #view-catalogo .premium-card-actions--v125 .premium-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    min-height: 3rem !important;
    height: auto !important;
    padding: 0.72rem 0.78rem !important;
    font-size: clamp(0.64rem, 1.15vw, 0.74rem) !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  @container (max-width: 23rem) {
    #view-catalogo .premium-card-facts,
    #view-catalogo .premium-card-actions--v125 {
      grid-template-columns: 1fr !important;
    }
    #view-catalogo .premium-card-actions--v125 .action-view-program {
      grid-column: auto !important;
    }
  }

  @media (max-width: 470px) {
    #view-catalogo .premium-course-grid {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    #view-catalogo .premium-card-facts,
    #view-catalogo .premium-card-actions--v125 {
      grid-template-columns: 1fr !important;
    }
    #view-catalogo .premium-card-actions--v125 .action-view-program {
      grid-column: auto !important;
    }
  }

  .classroom-shell {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(circle at 12% 8%, rgba(56,189,248,0.10), transparent 28rem),
      radial-gradient(circle at 86% 38%, rgba(197,168,90,0.08), transparent 30rem),
      linear-gradient(180deg, #010814 0%, #031226 46%, #020C1B 100%) !important;
  }

  .classroom-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.2;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
  }

  .classroom-hero {
    display: flex;
    align-items: center;
    min-height: min(58svh, 42rem);
    padding-block: clamp(2.5rem, 7vw, 6rem) !important;
    background:
      radial-gradient(circle at 78% 18%, rgba(56,189,248,0.25), transparent 30%),
      radial-gradient(circle at 16% 92%, rgba(197,168,90,0.17), transparent 32%),
      linear-gradient(135deg, rgba(1,8,20,0.98), rgba(7,34,61,0.97) 52%, rgba(2,12,27,0.98)) !important;
  }

  .classroom-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 9rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, #010916);
  }

  .classroom-hero-grid {
    align-items: center !important;
  }

  .classroom-hero-copy h1 {
    max-width: 18ch;
    text-wrap: balance;
  }

  .classroom-selector-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.1rem, 3vw, 1.6rem) !important;
    border-color: rgba(125,211,252,0.18) !important;
    background: linear-gradient(155deg, rgba(8,32,58,0.82), rgba(2,12,27,0.88)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 30px 70px -42px rgba(56,189,248,0.48),
      0 24px 54px -36px rgba(0,0,0,0.98) !important;
    backdrop-filter: blur(20px) saturate(1.15);
  }

  .classroom-selector-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7DD3FC, #C5A85A, transparent);
  }

  .classroom-main {
    position: relative;
    z-index: 2;
    margin-top: clamp(-2.4rem, -3vw, -1.2rem);
  }

  

  

  

  

  .classroom-session-panel {
    position: sticky;
    top: calc(var(--cefein-header-h, 4.5rem) + 1rem);
    max-height: calc(100svh - var(--cefein-header-h, 4.5rem) - 2rem);
    overflow: auto;
    border-color: rgba(197,168,90,0.16) !important;
    background: linear-gradient(160deg, rgba(11,36,63,0.92), rgba(2,12,27,0.97)) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(197,168,90,0.44) transparent;
  }

  .classroom-session-item {
    border-color: rgba(255,255,255,0.065) !important;
    background: rgba(255,255,255,0.028) !important;
  }

  .classroom-session-item:hover,
  .classroom-session-item.is-active {
    transform: translateX(0.22rem);
    border-color: rgba(125,211,252,0.25) !important;
    background: linear-gradient(90deg, rgba(56,189,248,0.12), rgba(255,255,255,0.035)) !important;
  }

  .classroom-owner-panel{
    border-radius: 1.5rem !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: linear-gradient(150deg, rgba(8,31,56,0.86), rgba(2,12,27,0.94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 28px 60px -42px rgba(0,0,0,0.95) !important;
  }

  

  

  
  
  
  

  
  

  .classroom-exam-open-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.15rem;
    padding: 0.82rem 1rem;
    border-radius: 0.9rem;
    color: #020C1B;
    background: linear-gradient(135deg, #C5A85A, #F2DA94);
    font-size: 0.74rem;
    font-weight: 950;
    box-shadow: 0 20px 38px -24px rgba(197,168,90,0.88), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease;
  }
  .classroom-exam-open-button:hover,
  .classroom-exam-open-button:focus-visible {
    transform: translateY(-0.18rem);
    box-shadow: 0 26px 48px -24px rgba(197,168,90,0.95), inset 0 1px 0 rgba(255,255,255,0.56);
  }

  
  

  
  
  
  

  

  .job-logo {
    display: grid !important;
    place-items: center !important;
    width: 3.6rem !important;
    aspect-ratio: 1 !important;
    border-radius: 1rem !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 18px 34px -22px rgba(0,0,0,0.9) !important;
    font-size: 1.22rem !important;
  }
  .job-logo i { color: #FFFFFF !important; }
  .job-logo--blue { background: linear-gradient(145deg, #2563EB, #0EA5E9) !important; }
  .job-logo--violet { background: linear-gradient(145deg, #7C3AED, #A855F7) !important; }
  .job-logo--emerald { background: linear-gradient(145deg, #059669, #10B981) !important; }
  .job-logo--rose { background: linear-gradient(145deg, #E11D48, #F43F5E) !important; }
  .job-logo--amber { background: linear-gradient(145deg, #D97706, #F59E0B) !important; }

  @media (max-width: 960px) {
    .classroom-session-panel {
      position: relative !important;
      top: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }
  }

  @media (max-width: 720px) {
    .classroom-hero { min-height: auto; }
    .classroom-main { margin-top: -1rem; }
    
    .classroom-exam-open-button {
      grid-column: 1 / -1;
      width: 100%;
    }
    
    
  }

  @media (max-width: 460px) {
    
    
  }

  @media (prefers-reduced-motion: reduce) {
    .classroom-exam-open-button{ animation: none !important; transition: none !important; }
  }

  /* =========================================================
     INTERACCIONES Y ACCESIBILIDAD
     ========================================================= */
.header-enroll-button,
  .mobile-enroll-button { letter-spacing: .08em !important; }

  

  .jobs-eyebrow i,
  .jobs-hero-icon,
  .jobs-hero-icon i { color: #FFFFFF !important; }
  .jobs-hero-icon {
    background: linear-gradient(145deg, #2563EB, #0F294A) !important;
    border-color: rgba(255,255,255,.2) !important;
  }
  .job-logo--amber i { color: #FFFFFF !important; }

  .premium-card-actions.is-live-coming-soon {
    grid-template-columns: 1fr !important;
  }
  .premium-action-coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    width: 100%;
    padding: .8rem 1rem;
    border-radius: .85rem;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    color: #FFFFFF;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .premium-action-button.is-coming-soon,
  .premium-action-button:disabled {
    cursor: not-allowed !important;
    opacity: .78 !important;
    transform: none !important;
  }

  
  
  

  .classroom-academic-requirements {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    border-radius: 1.25rem;
    border: 1px solid rgba(197,168,90,.24);
    background:
      radial-gradient(circle at 90% 0%, rgba(197,168,90,.13), transparent 34%),
      linear-gradient(145deg, rgba(15,41,74,.94), rgba(2,12,27,.96));
    box-shadow: 0 24px 60px -42px rgba(0,0,0,.94);
  }
  .classroom-requirement-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }
  .classroom-requirement-heading span {
    display: block;
    color: #C5A85A;
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .classroom-requirement-heading h2 {
    margin-top: .25rem;
    color: #FFFFFF;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    font-weight: 900;
    line-height: 1.15;
  }
  .classroom-requirement-heading > strong {
    flex: 0 0 auto;
    color: #FFFFFF;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    white-space: nowrap;
  }
  .classroom-requirement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .8rem;
  }
  .classroom-requirement-item {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .75rem;
    min-width: 0;
    padding: .95rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
  }
  .classroom-requirement-item > i {
    display: grid;
    place-items: center;
    width: 2.35rem;
    aspect-ratio: 1;
    border-radius: .75rem;
    background: rgba(56,189,248,.12);
    color: #7DD3FC;
  }
  .classroom-requirement-item.is-monograph > i {
    background: rgba(197,168,90,.14);
    color: #F4D06F;
  }
  .classroom-requirement-item span,
  .classroom-requirement-item strong,
  .classroom-requirement-item p { display: block; }
  .classroom-requirement-item span {
    color: #94A3B8;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
  }
  .classroom-requirement-item strong {
    margin-top: .2rem;
    color: #FFFFFF;
    font-size: .9rem;
    line-height: 1.3;
  }
  .classroom-requirement-item p {
    margin-top: .35rem;
    color: #BFD0E1;
    font-size: .76rem;
    line-height: 1.55;
  }
  .classroom-requirement-item a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .65rem;
    color: #F4D06F;
    font-size: .75rem;
    font-weight: 900;
  }

  .home-academic-card--coming-soon { position: relative; }
  .home-academic-soon-badge {
    position: absolute;
    top: .85rem;
    right: .85rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: #C5A85A;
    color: #071522;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .home-academic-link.is-disabled { cursor: default; opacity: .82; }
  
  
  
  
  
  .footer-channel-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #FFFFFF;
    font-size: .72rem;
    font-weight: 800;
  }
  .footer-qr-wrap { transition: transform .3s ease, box-shadow .3s ease; }
  .footer-qr-wrap:hover,
  .footer-qr-wrap:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 38px -24px rgba(197,168,90,.7); }

  @media (max-width: 900px) {
    .classroom-requirement-grid{ grid-template-columns: 1fr !important; }
    
  }
  @media (max-width: 640px) {
    .classroom-requirement-heading{ grid-template-columns: 1fr; }
    .classroom-requirement-heading { flex-direction: column; }
    .classroom-requirement-heading > strong { white-space: normal; }
    
    
  }

  /* =========================================================
     DETALLE DE PROGRAMAS
     ========================================================= */
#premium-detail-panel {
  --detail-gutter: clamp(.85rem, 3vw, 2rem);
  --detail-radius: clamp(1rem, 2vw, 1.55rem);
  --detail-line: rgba(255,255,255,.11);
  --detail-muted: #B9C8D8;
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  color: #F8FAFC;
  background:
    radial-gradient(circle at 15% 8%, rgba(56,189,248,.08), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(197,168,90,.08), transparent 26rem),
    #020C1B;
}
#premium-detail-panel,
#premium-detail-panel * { box-sizing: border-box; }
#premium-detail-panel :is(h1,h2,h3,p,span,strong,small,em,li,button,summary) {min-width: 0;max-width: 100%;white-space: normal;overflow-wrap: break-word;word-break: normal;hyphens: none;}
.premium-detail-container {
  width: min(calc(100% - (var(--detail-gutter) * 2)), 90rem);
  margin-inline: auto;
}
.premium-detail-backbar {
  padding-block: clamp(.9rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--detail-line);
  background: rgba(5,20,38,.88);
  backdrop-filter: blur(14px);
}
.premium-detail-backbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: fit-content;
  max-width: 100%;
  min-height: 2.65rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem;
  background: rgba(255,255,255,.055);
  color: #F8FAFC;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.premium-detail-body { padding-block: clamp(1.15rem, 3vw, 2.5rem); }
#premium-detail-panel .premium-detail-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: start;
  width: 100%;
  min-width: 0;
}
.premium-detail-main-column,
.premium-detail-sticky {
  display: grid;
  gap: clamp(1rem, 2.3vw, 1.4rem);
  min-width: 0;
}
#premium-detail-panel .premium-detail-card {
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: clamp(1rem, 2.6vw, 1.65rem);
  overflow: visible;
  border: 1px solid var(--detail-line);
  border-radius: var(--detail-radius);
  background: linear-gradient(145deg, rgba(15,41,74,.78), rgba(4,17,32,.94));
  box-shadow: 0 24px 56px -42px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.035);
}
.premium-detail-hero-card {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 90% 10%, rgba(197,168,90,.13), transparent 19rem),
    linear-gradient(145deg, rgba(15,41,74,.9), rgba(4,17,32,.96)) !important;
}
#premium-detail-panel .premium-detail-hero-card > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start !important;
  gap: clamp(.8rem, 2vw, 1.25rem) !important;
}
#premium-detail-title {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: clamp(1.65rem, 4.15vw, 3.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: balance;
}
#premium-detail-summary {
  max-width: 70ch !important;
  font-size: clamp(.88rem, 1.45vw, 1rem) !important;
  line-height: 1.65 !important;
  color: var(--detail-muted) !important;
}
#premium-detail-panel .premium-course-icon {
  width: clamp(3.15rem, 7vw, 4.75rem);
  min-width: clamp(3.15rem, 7vw, 4.75rem);
  aspect-ratio: 1;
  border-radius: 1rem;
}
#premium-detail-panel .premium-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem),1fr));
  gap: .55rem;
}
#premium-detail-panel .premium-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem),1fr));
  gap: .65rem;
}
#premium-detail-panel .premium-benefit-item {
  min-width: 0;
  height: auto;
  padding: .66rem;
  border-radius: .75rem;
}
#premium-detail-panel .premium-payment-item {
  min-width: 0;
  height: auto;
  padding: .82rem;
  border-radius: .84rem;
}

#premium-detail-panel .premium-accordion summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: .75rem;
  height: auto;
  padding: .9rem;
}
#premium-detail-panel .premium-accordion-content { padding: 0 .9rem .95rem; }
#premium-detail-panel .premium-certificate-stage { overflow: hidden !important; }
#premium-detail-panel .premium-certificate-paper {
  height: auto !important;
  min-height: clamp(22rem, 58vw, 31rem);
  padding: clamp(.85rem, 2.5vw, 1.6rem) !important;
}




.premium-enrollment-panel,
.premium-status-panel { display: grid; gap: 1rem; }
.premium-panel-heading {display: grid;gap: .3rem;}
.premium-panel-heading p{margin: 0;color: #C5A85A;font-size: .66rem;letter-spacing: .12em;text-transform: uppercase;}
.premium-panel-heading h2{margin: 0;color: #FFFFFF;line-height: 1.18;}
.premium-panel-heading h2 {font-size: clamp(1.2rem, 2.7vw, 1.65rem);}
.premium-panel-heading > span {color: var(--detail-muted);font-size: .8rem;line-height: 1.5;}
.premium-panel-heading--compact {gap: .22rem;}





.premium-investment-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid rgba(197,168,90,.3);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(197,168,90,.13), rgba(197,168,90,.045));
}
.premium-investment-box > div { min-width: 0; }
.premium-investment-box span {
  color: #D6DFE9;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#premium-detail-price-usd { margin: .18rem 0 0; color: #9FB0C1; font-size: .7rem; }
#premium-detail-price-pen {
  flex: 0 0 auto;
  color: #E3C977;
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  line-height: 1;
  text-align: right;
}
.premium-detail-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .7rem;
}
#premium-detail-panel .premium-detail-action-tile {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.8rem minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: .78rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: .88rem !important;
  border-radius: .95rem !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #FFFFFF !important;
  text-align: left !important;
  overflow: visible !important;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease !important;
}
#premium-detail-panel .premium-detail-action-tile--classroom {
  background: linear-gradient(135deg, rgba(22,83,128,.95), rgba(5,25,46,.98)) !important;
}
#premium-detail-panel .premium-detail-action-tile--enroll {
  background: linear-gradient(135deg, rgba(120,91,25,.95), rgba(30,23,8,.98)) !important;
}
#premium-detail-panel .premium-detail-action-tile:not(:disabled):hover,
#premium-detail-panel .premium-detail-action-tile:not(:disabled):focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,.32) !important;
  box-shadow: 0 18px 34px -26px rgba(0,0,0,.95) !important;
}
#premium-detail-panel .premium-detail-action-tile:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: saturate(.55);
}
#premium-detail-panel .premium-detail-action-icon {
  display: grid !important;
  place-items: center !important;
  width: 2.8rem !important;
  min-width: 2.8rem !important;
  aspect-ratio: 1 !important;
  border-radius: .78rem !important;
  color: #FFFFFF !important;
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
}
#premium-detail-panel .premium-detail-action-copy { display: grid !important; gap: .14rem !important; min-width: 0 !important; }
#premium-detail-panel .premium-detail-action-copy small {
  color: rgba(255,255,255,.68) !important;
  font-size: .61rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
#premium-detail-panel .premium-detail-action-copy strong {
  color: #FFFFFF !important;
  font-size: clamp(.88rem, 2vw, 1rem) !important;
  line-height: 1.25 !important;
}
#premium-detail-panel .premium-detail-action-copy em {
  color: rgba(255,255,255,.72) !important;
  font-size: .69rem !important;
  font-style: normal !important;
  line-height: 1.38 !important;
}
.premium-detail-action-arrow { color: #FFFFFF; opacity: .7; }
.premium-payment-disclosure {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .95rem;
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.premium-payment-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 2.85rem;
  padding: .78rem .9rem;
  color: #FFFFFF;
  cursor: pointer;
  list-style: none;
  font-size: .78rem;
  font-weight: 850;
}
.premium-payment-disclosure summary::-webkit-details-marker { display: none; }
.premium-payment-disclosure summary > span { display: inline-flex; align-items: center; gap: .55rem; }
.premium-payment-disclosure[open] summary > i { transform: rotate(180deg); }
.premium-payment-disclosure .premium-payment-grid { padding: 0 .75rem .75rem; }
.premium-payment-disclosure .premium-payment-item p { margin: 0; color: #9FB0C1; font-size: .68rem; line-height: 1.4; }
#premium-detail-panel .premium-course-status-list { display: grid; gap: .55rem; margin: 0; padding: 0; }
#premium-detail-panel .premium-course-status {
  display: grid !important;
  grid-template-columns: 1.8rem minmax(0,1fr) !important;
  align-items: start !important;
  gap: .62rem !important;
  min-width: 0 !important;
  height: auto !important;
  padding: .72rem !important;
  border-radius: .85rem !important;
}
#premium-detail-panel .premium-course-status > :last-child {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}
.premium-certificate-query-button {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-width: 0;
  min-height: 2.9rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(197,168,90,.27);
  border-radius: .9rem;
  background: rgba(197,168,90,.07);
  color: #E2C873;
  font-size: .76rem;
  font-weight: 850;
  text-align: left;
}

#premium-detail-panel .premium-certificate-track {
  width: 200% !important;
  min-width: 200% !important;
}
#premium-detail-panel .premium-certificate-slide {
  flex: 0 0 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  padding: clamp(.45rem, 1.8vw, 1rem) !important;
}
#premium-detail-panel .premium-certificate-paper {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: clamp(.8rem, 2.3vw, 1.4rem) !important;
  gap: clamp(.75rem, 2vw, 1.15rem) !important;
}
#premium-detail-panel .premium-certificate-paper > div {
  min-width: 0 !important;
  max-width: 100% !important;
}
#premium-detail-panel .premium-certificate-paper > div:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .4rem .7rem !important;
}
#premium-detail-panel .premium-certificate-paper > div:last-child,
#premium-detail-panel .premium-certificate-paper ol {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem),1fr)) !important;
}
#premium-detail-panel .premium-certificate-paper :is(h3,p,span,li,div) {overflow-wrap: break-word !important;word-break: normal !important;white-space: normal !important;}

@media (min-width: 700px) and (max-width: 1119px) {
  
  
  
  .premium-detail-primary-actions {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (min-width: 1120px) {
  #premium-detail-panel .premium-detail-layout {
    grid-template-columns: minmax(0,1.55fr) minmax(20rem,.72fr);
  }
  .premium-detail-sticky {
    position: sticky;
    top: calc(var(--cefein-header-h, 4.5rem) + 1rem);
  }
  
}
@media (max-width: 520px) {
  #premium-detail-title {
    font-size: clamp(1.45rem, 8.1vw, 2.25rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
  }
  #premium-detail-summary {
    font-size: clamp(.82rem, 3.7vw, .94rem) !important;
    line-height: 1.58 !important;
  }
  #premium-detail-panel .premium-detail-hero-card > div:first-child {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #premium-detail-panel .premium-course-icon { display: none !important; }
  
  
  .premium-investment-box {
    align-items: flex-start;
    flex-direction: column;
  }
  #premium-detail-price-pen { text-align: left; }
  #premium-detail-panel .premium-detail-action-tile {
    grid-template-columns: 2.7rem minmax(0,1fr) !important;
  }
  .premium-detail-action-arrow { display: none; }
}
@media (max-width: 350px) {
  #premium-detail-panel { --detail-gutter: .65rem; }
  #premium-detail-panel .premium-detail-card { padding: .82rem; border-radius: .9rem; }
  
  
  #premium-detail-panel .premium-detail-action-copy em { font-size: .65rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  #premium-detail-panel *, #premium-detail-panel *::before, #premium-detail-panel *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

  
.cefein-news-section {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) 0;
    color: #fff;
    background:
      radial-gradient(circle at 12% 16%, rgba(56,189,248,.13), transparent 30%),
      radial-gradient(circle at 88% 84%, rgba(197,168,90,.12), transparent 32%),
      linear-gradient(180deg, #020c1b, #0f294a);
  }
  .cefein-news-inner {
    width: min(calc(100% - 2rem), 78rem);
    margin-inline: auto;
  }
  .cefein-news-heading {
    max-width: 48rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
  }
  .cefein-news-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #d9c487;
    font-size: clamp(.68rem, 1.4vw, .78rem);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .cefein-news-heading h2 {
    margin-top: .7rem;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }
  .cefein-news-heading p {
    margin: .85rem auto 0;
    max-width: 42rem;
    color: #c4d0dc;
    font-size: clamp(.9rem, 1.6vw, 1.03rem);
    line-height: 1.7;
  }
  .news-carousel-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: clamp(1.25rem, 3vw, 2rem);
    background: #071526;
    box-shadow: 0 34px 90px -48px rgba(0,0,0,.92);
  }
  .news-slider-viewport {
    display: grid;
    overflow: hidden;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1.28fr) minmax(19rem, .72fr);
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .news-slide-media {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    min-height: clamp(24rem, 48vw, 39rem);
    overflow: hidden;
    background: #020c1b;
    isolation: isolate;
  }
  .news-slide-backdrop {
    position: absolute;
    inset: -5%;
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: blur(26px) saturate(.8);
    opacity: .34;
    transform: scale(1.12);
  }
  .news-slide-image {
    position: absolute;
    box-sizing: border-box;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    padding: clamp(.65rem, 1.6vw, 1.2rem);
    object-fit: contain;
    object-position: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity 420ms ease, transform 620ms cubic-bezier(.22,1,.36,1);
  }
  .news-slide-image.is-changing {
    opacity: .45;
    transform: scale(.985);
  }
  .news-slide-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2,12,27,.06), rgba(2,12,27,.22));
  }
  .news-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(2.55rem, 5vw, 3.2rem);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: #fff;
    background: rgba(2,12,27,.74);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
  }
  .news-arrow:hover,
  .news-arrow:focus-visible {
    color: #020c1b;
    background: #c5a85a;
    transform: translateY(-50%) scale(1.06);
  }
  .news-arrow--prev { left: clamp(.65rem, 1.8vw, 1.2rem); }
  .news-arrow--next { right: clamp(.65rem, 1.8vw, 1.2rem); }
  .news-slide-content {
    display: flex;
    width: 100%;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(.85rem, 1.8vw, 1.2rem);
    padding: clamp(1.4rem, 4vw, 3rem);
    background:
      radial-gradient(circle at 100% 0%, rgba(197,168,90,.11), transparent 34%),
      linear-gradient(150deg, rgba(15,41,74,.98), rgba(2,12,27,.99));
  }
  .news-badge {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .5rem;
    padding: .52rem .78rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: .65rem;
    color: #fff;
    background: var(--news-badge, #2563eb);
    font-size: clamp(.62rem, 1.2vw, .72rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .news-date {
    margin: 0;
    color: #d9c487;
    font-size: clamp(.67rem, 1.3vw, .78rem);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: .1em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .news-title {
    margin: 0;
    max-width: 100%;
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 3.2rem) !important;
    font-weight: 900;
    line-height: 1.05 !important;
    letter-spacing: -.035em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .news-description {
    margin: 0;
    max-width: 40rem;
    color: #d3dde7;
    font-size: clamp(.9rem, 1.5vw, 1.04rem) !important;
    line-height: 1.75 !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .news-action-link {
    display: inline-flex;
    box-sizing: border-box;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 2.9rem;
    padding: .78rem 1rem;
    border: 1px solid rgba(197,168,90,.45);
    border-radius: .75rem;
    color: #f3dd9c;
    background: rgba(197,168,90,.09);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .news-action-link:hover,
  .news-action-link:focus-visible {
    color: #020c1b;
    background: #c5a85a;
  }
  .news-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: .3rem;
  }
  .news-dot {
    width: .58rem;
    height: .58rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    transition: width 260ms ease, background-color 260ms ease, transform 260ms ease;
  }
  .news-dot.is-active {
    width: 1.9rem;
    background: #c5a85a;
  }

  
  
  
  
  
  
  

  @media (max-width: 920px) {
    .news-slider-viewport {
      grid-template-columns: minmax(0, 1fr);
    }
    .news-slide-media {
      min-height: 0;
      aspect-ratio: 16 / 10;
    }
    .news-slide-content {
      padding: clamp(1.25rem, 5vw, 2rem);
    }
  }

  @media (max-width: 520px) {
    .cefein-news-inner {
      width: min(calc(100% - 1rem), 78rem);
    }
    .news-carousel-shell {
      border-radius: 1rem;
    }
    .news-slide-media {
      aspect-ratio: 4 / 3;
    }
    .news-slide-image {
      padding: .45rem;
    }
    .news-slide-content {
      gap: .72rem;
      padding: 1rem;
    }
    .news-arrow {
      width: 2.45rem;
    }
    .news-title {
      font-size: clamp(1.45rem, 8.4vw, 2.1rem);
    }
    .news-action-link {
      width: 100%;
    }
    
  }

  @media (prefers-reduced-motion: reduce) {
    .news-slide-image,
    .news-arrow,
    .news-dot,
    .news-action-link {
      transition: none !important;
    }
  }

  /* =========================================================
     DIAPOSITIVAS RESPONSIVE
     ========================================================= */
.cefein-news-section {
    padding-block: clamp(2.4rem, 6vw, 5.5rem) !important;
  }

  .cefein-news-inner {
    width: min(calc(100% - clamp(1rem, 4vw, 2.5rem)), 82rem) !important;
  }

  .cefein-news-heading {
    margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
  }

  .news-carousel-shell {
    isolation: isolate;
    border-radius: clamp(1.15rem, 3vw, 2.25rem) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: #020c1b !important;
    box-shadow:
      0 42px 100px -48px rgba(0, 0, 0, 0.98),
      0 0 0 1px rgba(197, 168, 90, 0.045) inset !important;
  }

  .news-carousel-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04),
      inset 0 -4rem 7rem -5rem rgba(0, 0, 0, 0.95);
  }

  .news-slider-viewport {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(clamp(31rem, 120vw, 42rem), auto) !important;
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    overflow: hidden;
    background: #020c1b;
  }

  .news-slide-media,
  .news-slide-content {
    grid-area: 1 / 1;
    min-width: 0;
    max-width: 100%;
  }

  .news-slide-media {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: #020c1b;
  }

  .news-slide-backdrop {
    inset: -8% !important;
    filter: blur(34px) saturate(0.95) !important;
    opacity: 0.48 !important;
    transform: scale(1.18) !important;
  }

  .news-slide-image {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(0.9) contrast(1.04) brightness(0.82);
    transform: scale(1.015);
    transition:
      opacity 380ms ease,
      transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 520ms ease !important;
  }

  .news-slider-viewport:hover .news-slide-image {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.05) brightness(0.88);
  }

  .news-slide-image.is-changing {
    opacity: 0.42 !important;
    transform: scale(1.025) !important;
  }

  .news-slide-shade {
    z-index: 2 !important;
    background:
      linear-gradient(90deg, rgba(2, 12, 27, 0.94) 0%, rgba(2, 12, 27, 0.70) 43%, rgba(2, 12, 27, 0.18) 76%, rgba(2, 12, 27, 0.08) 100%),
      linear-gradient(0deg, rgba(2, 12, 27, 0.93) 0%, rgba(2, 12, 27, 0.12) 58%, rgba(2, 12, 27, 0.10) 100%) !important;
  }

  .news-slide-content {
    position: relative;
    z-index: 5;
    align-self: end;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end !important;
    gap: clamp(0.65rem, 1.8vw, 1rem) !important;
    width: calc(100% - clamp(1rem, 4vw, 2.5rem));
    max-width: min(44rem, calc(100% - clamp(1rem, 4vw, 2.5rem))) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(0.5rem, 2vw, 1.25rem);
    padding: clamp(1rem, 4vw, 2.2rem) !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: clamp(1rem, 2.4vw, 1.55rem);
    background:
      linear-gradient(145deg, rgba(8, 29, 51, 0.74), rgba(2, 12, 27, 0.62)) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    box-shadow:
      0 28px 70px -38px rgba(0, 0, 0, 0.96),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(255, 255, 255, 0.035);
  }

  .news-slide-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background:
      radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--news-accent, #2563eb) 30%, transparent), transparent 42%),
      linear-gradient(115deg, rgba(255, 255, 255, 0.095), transparent 36%);
  }

  .news-badge {
    align-self: flex-start;
    padding: clamp(0.43rem, 1.3vw, 0.58rem) clamp(0.66rem, 2vw, 0.9rem) !important;
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    font-size: clamp(0.58rem, 2.4vw, 0.73rem) !important;
    line-height: 1.25;
    box-shadow:
      0 12px 28px -18px color-mix(in srgb, var(--news-accent, #2563eb) 76%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .news-date {
    color: #f2d98f !important;
    font-size: clamp(0.62rem, 2.4vw, 0.78rem) !important;
    letter-spacing: clamp(0.06em, 0.8vw, 0.11em) !important;
  }

  .news-title {
    max-width: 18ch !important;
    font-size: clamp(1.75rem, 8.8vw, 4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  }

  .news-description {
    max-width: 62ch !important;
    color: rgba(240, 246, 252, 0.91) !important;
    font-size: clamp(0.82rem, 3.4vw, 1.04rem) !important;
    line-height: 1.62 !important;
  }

  .news-action-link {
    min-height: 2.75rem !important;
    margin-top: 0.1rem;
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.11) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .news-action-link:hover,
  .news-action-link:focus-visible {
    color: #071522 !important;
    background: #f0d58c !important;
    border-color: #f7e4aa !important;
    outline: none;
  }

  .news-dots {
    margin-top: clamp(0.15rem, 1vw, 0.4rem) !important;
  }

  .news-dot {
    width: clamp(0.52rem, 1.7vw, 0.62rem) !important;
    height: clamp(0.52rem, 1.7vw, 0.62rem) !important;
    background: rgba(255, 255, 255, 0.34) !important;
  }

  .news-dot.is-active {
    width: clamp(1.7rem, 6vw, 2.15rem) !important;
    background: #f0d58c !important;
  }

  .news-slider-viewport.is-revealing .news-slide-content > * {
    animation: newsPremiumReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .news-slider-viewport.is-revealing .news-slide-content > :nth-child(2) { animation-delay: 45ms; }
  .news-slider-viewport.is-revealing .news-slide-content > :nth-child(3) { animation-delay: 90ms; }
  .news-slider-viewport.is-revealing .news-slide-content > :nth-child(4) { animation-delay: 135ms; }
  .news-slider-viewport.is-revealing .news-slide-content > :nth-child(5) { animation-delay: 180ms; }
  .news-slider-viewport.is-revealing .news-slide-content > :nth-child(6) { animation-delay: 225ms; }

  @keyframes newsPremiumReveal {
    from { opacity: 0; transform: translateY(0.8rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  .news-arrow {
    top: clamp(0.75rem, 2.2vw, 1.25rem) !important;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 9 !important;
    width: clamp(2.4rem, 8vw, 3.05rem) !important;
    background: rgba(2, 12, 27, 0.62) !important;
    transform: none !important;
    box-shadow:
      0 14px 28px -20px rgba(0, 0, 0, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .news-arrow--prev {
    right: calc(clamp(0.75rem, 2.2vw, 1.25rem) + clamp(2.4rem, 8vw, 3.05rem) + 0.55rem) !important;
    left: auto !important;
  }

  .news-arrow--next {
    right: clamp(0.75rem, 2.2vw, 1.25rem) !important;
    left: auto !important;
  }

  .news-arrow:hover,
  .news-arrow:focus-visible {
    color: #071522 !important;
    background: #f0d58c !important;
    transform: translateY(-0.12rem) scale(1.035) !important;
    outline: none;
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .news-slide-content {
      background: rgba(4, 22, 42, 0.94) !important;
    }
  }

  @supports not (color: color-mix(in srgb, #000 50%, transparent)) {
    .news-slide-content::before {
      background: linear-gradient(115deg, rgba(255, 255, 255, 0.095), transparent 36%);
    }

    .news-badge {
      box-shadow: 0 12px 28px -18px rgba(37, 99, 235, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
  }

  @media (min-width: 640px) {
    .news-slider-viewport {
      grid-template-rows: minmax(clamp(29rem, 66vw, 40rem), auto) !important;
    }

    .news-slide-content {
      margin: clamp(1rem, 3vw, 2rem);
    }
  }

  @media (min-width: 900px) {
    .news-slider-viewport {
      grid-template-rows: minmax(clamp(31rem, 48vw, 42rem), auto) !important;
    }

    .news-slide-content {
      width: min(44rem, calc(100% - 4rem));
      max-width: min(44rem, calc(100% - 4rem)) !important;
      margin: clamp(1.5rem, 3.2vw, 2.6rem);
    }
  }

  @media (min-width: 1440px) {
    .news-slider-viewport {
      grid-template-rows: minmax(42rem, 48rem) !important;
    }

    .news-slide-content {
      max-width: 48rem !important;
    }
  }

  @media (max-width: 520px) {
    .cefein-news-section {
      padding-block: 2rem 2.75rem !important;
    }

    .cefein-news-inner {
      width: min(calc(100% - 0.75rem), 82rem) !important;
    }

    .cefein-news-heading {
      padding-inline: 0.35rem;
    }

    .news-slider-viewport {
      grid-template-rows: minmax(clamp(33rem, 164vw, 43rem), auto) !important;
    }

    .news-slide-shade {
      background:
        linear-gradient(0deg, rgba(2, 12, 27, 0.97) 0%, rgba(2, 12, 27, 0.73) 47%, rgba(2, 12, 27, 0.12) 82%, rgba(2, 12, 27, 0.05) 100%) !important;
    }

    .news-slide-content {
      width: calc(100% - 1rem);
      max-width: calc(100% - 1rem) !important;
      margin: 0.5rem;
      padding: clamp(0.9rem, 4.5vw, 1.2rem) !important;
      border-radius: 1rem;
      backdrop-filter: blur(16px) saturate(1.18);
      -webkit-backdrop-filter: blur(16px) saturate(1.18);
    }

    .news-title {
      max-width: 100% !important;
    }

    .news-description {
      display: block;
      overflow: visible;
    }

    .news-action-link {
      width: 100%;
    }
  }

  @media (max-width: 359px) {
    .news-slider-viewport {
      grid-template-rows: minmax(36rem, auto) !important;
    }

    .news-slide-content {
      gap: 0.58rem !important;
      padding: 0.85rem !important;
    }

    .news-badge {
      max-width: calc(100% - 5.6rem);
    }

    .news-title {
      font-size: clamp(1.55rem, 10vw, 2rem) !important;
    }

    .news-description {
      font-size: 0.79rem !important;
      line-height: 1.52 !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .news-slide-image,
    .news-slider-viewport:hover .news-slide-image,
    .news-arrow,
    .news-action-link,
    .news-dot,
    .news-slider-viewport.is-revealing .news-slide-content > * {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }
  }

  /* =========================================================
     COMPONENTES PREMIUM ADAPTATIVOS
     ========================================================= */


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  #hero-stage,
  #hero-deck {
    overflow: visible !important;
  }

  #hero-deck {
    width: min(96vw, 36rem) !important;
    max-width: 100% !important;
    --fan-x: clamp(2rem, 7vw, 4.35rem) !important;
    --fan-y: clamp(.8rem, 2.2vw, 1.45rem) !important;
    --fan-rotate: 11deg !important;
    --fan-side-scale: .88 !important;
    padding-inline: clamp(.35rem, 2vw, 1rem) !important;
  }

  #deck-card-prev,
  #deck-card-next {
    width: 82% !important;
    opacity: .62 !important;
  }

  #deck-card-prev {
    left: 0 !important;
  }

  #deck-card-next {
    right: 0 !important;
  }

  @media (min-width: 640px) {
    #hero-deck {
      width: min(94vw, 39rem) !important;
    }
  }

  @media (min-width: 1100px) {
    #hero-deck {
      width: min(40vw, 33rem) !important;
    }
  }

  .news-slider-viewport {
    grid-template-rows: minmax(clamp(26rem, 88vw, 42rem), auto) !important;
  }

  .news-slide-shade {
    background:
      linear-gradient(90deg, rgba(2,12,27,.76) 0%, rgba(2,12,27,.52) 28%, rgba(2,12,27,.24) 55%, rgba(2,12,27,.14) 100%) !important;
  }

  .news-slide-content {
    z-index: 4 !important;
    align-self: end !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: clamp(.75rem, 2vw, 1rem) !important;
    width: min(100% - clamp(1rem, 5vw, 3rem), 44rem) !important;
    margin: clamp(1rem, 4vw, 2rem) !important;
    padding: clamp(1rem, 3vw, 1.7rem) !important;
    border-radius: clamp(1rem, 2vw, 1.45rem) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(7, 21, 38, 0.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    box-shadow:
      0 26px 60px -40px rgba(0,0,0,.95),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  .news-badge,
  .news-date,
  .news-title,
  .news-description,
  .news-action-link,
  .news-dots {
    position: relative;
    z-index: 1;
  }

  .news-title {
    font-size: clamp(1.8rem, 4.8vw, 3.15rem) !important;
    line-height: 1.04 !important;
    text-wrap: balance !important;
  }

  .news-description {
    max-width: 36rem !important;
    font-size: clamp(.92rem, 1.55vw, 1.04rem) !important;
    line-height: 1.7 !important;
  }

  .news-action-link {
    width: fit-content !important;
    max-width: 100% !important;
  }

  .news-arrow {
    top: auto !important;
    bottom: clamp(1rem, 4vw, 1.8rem) !important;
  }

  .news-arrow--prev {
    left: auto !important;
    right: clamp(5.6rem, 10vw, 8rem) !important;
  }

  .news-arrow--next {
    right: clamp(1rem, 4vw, 1.8rem) !important;
  }

  @media (max-width: 767px) {
    .news-slider-viewport {
      grid-template-rows: minmax(clamp(25rem, 120vw, 35rem), auto) !important;
    }

    .news-slide-image {
      object-position: center center !important;
    }

    .news-slide-shade {
      background:
        linear-gradient(180deg, rgba(2,12,27,.14) 0%, rgba(2,12,27,.24) 22%, rgba(2,12,27,.58) 58%, rgba(2,12,27,.86) 100%) !important;
    }

    .news-slide-content {
      width: calc(100% - 1.4rem) !important;
      margin: .7rem !important;
      padding: 1rem !important;
      gap: .72rem !important;
    }

    .news-title {
      font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
    }

    .news-description {
      font-size: clamp(.88rem, 3.7vw, .98rem) !important;
      line-height: 1.6 !important;
    }

    .news-arrow {
      width: 2.65rem !important;
      height: 2.65rem !important;
      bottom: auto !important;
      top: 1rem !important;
    }

    .news-arrow--prev {
      right: 4.1rem !important;
    }

    .news-arrow--next {
      right: 1rem !important;
    }

    .news-action-link {
      width: 100% !important;
      justify-content: center !important;
    }
  }

  @media (min-width: 1600px) {
    .news-slider-viewport {
      grid-template-rows: minmax(38rem, 44rem) !important;
    }
    .news-slide-content {
      width: min(46rem, 52%) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .news-slide-content, #deck-card-prev, #deck-card-next, #deck-card-active{
      transition: none !important;
      animation: none !important;
    }
  }

  /* =========================================================
     AULA, CERTIFICADOS Y FOOTER
     ========================================================= */
#site-header {
    background-color: rgba(2, 12, 27, 0.22) !important;
    border-bottom-color: rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  
  
  
  
  
  
  
  
  
  
  

  .news-slide-content {
    background: rgba(7, 21, 38, 0.10) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 48px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter: blur(14px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  }
  .news-slide-shade {
    background:
      linear-gradient(90deg, rgba(2,12,27,.82) 0%, rgba(2,12,27,.48) 38%, rgba(2,12,27,.14) 68%, rgba(2,12,27,.06) 100%),
      linear-gradient(0deg, rgba(2,12,27,.80) 0%, rgba(2,12,27,.10) 52%, rgba(2,12,27,.05) 100%) !important;
  }
  .news-slide-image { object-fit: cover !important; object-position: center !important; }

  @media (max-width: 767px) {
    .news-slide-content {
      width: calc(100% - 1rem) !important;
      margin: .5rem !important;
      padding: 1rem !important;
      background: rgba(7,21,38,.14) !important;
    }
    .news-slide-shade {
      background: linear-gradient(180deg, rgba(2,12,27,.12) 0%, rgba(2,12,27,.28) 24%, rgba(2,12,27,.56) 55%, rgba(2,12,27,.84) 100%) !important;
    }
  }

  #view-catalogo .premium-course-cover {
    aspect-ratio: 16 / 10.3 !important;
    min-height: clamp(12.4rem, 31vw, 15rem) !important;
    align-items: flex-end !important;
  }
  #view-catalogo .premium-course-photo {
    transform: scale(1.03) !important;
    filter: saturate(.92) contrast(1.02) brightness(.76) !important;
  }
  #view-catalogo .premium-course-card .course-type-label { display: none !important; }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 {
    margin-top: -5rem !important;
    padding: .95rem 1rem 1rem !important;
    border-radius: 1rem !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(6, 18, 34, 0.18) !important;
    box-shadow: 0 18px 34px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.14) !important;
    backdrop-filter: blur(15px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.1) !important;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 h3 {
    font-size: clamp(1.02rem, 2.1vw, 1.24rem) !important;
    line-height: 1.22 !important;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 p {
    color: rgba(255,255,255,.92) !important;
    font-size: clamp(.8rem, 1.35vw, .9rem) !important;
    line-height: 1.58 !important;
  }
  @media (max-width: 640px) {
    #view-catalogo .premium-course-card .space-y-2.min-w-0 { margin-top: -4.35rem !important; padding: .85rem .85rem .92rem !important; }
  }

  
  
  
  

  .footer-legal-links { row-gap: .65rem !important; }
  @media (max-width: 767px) {
    .footer-legal-links { justify-content: flex-start !important; padding-right: 5.8rem !important; }
    .footer-claims-link { margin-right: auto !important; }
    #whatsapp-widget, .whatsapp-widget { right: .75rem !important; bottom: .9rem !important; }
  }

  /* =========================================================
     PULIDO VISUAL GENERAL
     ========================================================= */
.news-slide-content {
    width: min(100%, 34rem) !important;
    max-width: calc(100% - 2rem) !important;
    margin: clamp(1rem, 2.4vw, 1.6rem) !important;
    border-radius: clamp(1rem, 2vw, 1.35rem) !important;
  }
  .news-title {
    text-wrap: balance;
    text-shadow: 0 10px 32px rgba(0,0,0,.42);
  }
  .news-description {
    max-width: 32rem !important;
    text-shadow: 0 6px 18px rgba(0,0,0,.3);
  }
  .news-arrow {
    box-shadow: 0 16px 38px -26px rgba(0,0,0,.88);
  }
  @media (min-width: 768px) {
    .news-slide-content {
      align-self: end !important;
      justify-self: start !important;
      padding: clamp(1.1rem, 2vw, 1.45rem) !important;
    }
  }
  @media (max-width: 767px) {
    .news-slide-content {
      width: calc(100% - .9rem) !important;
      max-width: calc(100% - .9rem) !important;
      margin: .45rem !important;
      padding: .92rem .92rem 1rem !important;
    }
    .news-arrow { top: auto !important; bottom: calc(100% - 3.35rem) !important; transform: none !important; }
    .news-arrow--prev { left: .6rem !important; }
    .news-arrow--next { right: .6rem !important; }
    .news-arrow:hover, .news-arrow:focus-visible { transform: scale(1.06) !important; }
  }

  #view-catalogo .premium-course-card .course-type-chip {
    display: none !important;
  }
  #view-catalogo .premium-course-card .course-type-label {
    display: inline-flex !important;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: .45rem;
    padding: .42rem .78rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    font-size: .7rem !important;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
  }
  #view-catalogo .premium-course-card .course-type-label--diplomado {
    background: rgba(185, 28, 28, 0.88) !important;
    color: #ffffff !important;
    border-color: rgba(254,202,202,.34) !important;
  }
  #view-catalogo .premium-course-card .course-type-label--curso {
    background: rgba(15, 138, 75, 0.9) !important;
    color: #ffffff !important;
    border-color: rgba(187,247,208,.32) !important;
  }
  #view-catalogo .premium-course-card .course-type-label--programa {
    background: rgba(29, 78, 216, 0.9) !important;
    color: #ffffff !important;
    border-color: rgba(191,219,254,.32) !important;
  }
  #view-catalogo .premium-course-card .course-type-label--taller {
    background: rgba(217, 119, 6, 0.92) !important;
    color: #ffffff !important;
    border-color: rgba(253,230,138,.32) !important;
  }
  #view-catalogo .premium-course-card .course-type-label--formativo {
    background: rgba(109, 40, 217, 0.9) !important;
    color: #ffffff !important;
    border-color: rgba(221,214,254,.32) !important;
  }
  #view-catalogo .premium-course-card .premium-course-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,12,27,.04) 0%, rgba(2,12,27,.18) 50%, rgba(2,12,27,.74) 100%);
    pointer-events: none;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 {
    position: relative;
    z-index: 2;
  }
  #view-catalogo .premium-course-card:hover .premium-course-photo,
  #view-catalogo .premium-course-card:focus-within .premium-course-photo {
    transform: scale(1.06) !important;
    filter: saturate(1) contrast(1.03) brightness(.8) !important;
  }

  .home-program-carousel { padding-block: .2rem .4rem !important; }
  .home-program-card { overflow: hidden; }
  .home-program-cover { aspect-ratio: 16 / 10.6 !important; }
  .home-program-cover img { object-position: center !important; transform: scale(1.015); transition: transform 340ms ease, filter 340ms ease; }
  .home-program-card:hover .home-program-cover img,
  .home-program-card:focus-within .home-program-cover img { transform: scale(1.055); filter: brightness(.9); }
  .home-program-body { position: relative; }
  .home-program-body h3 { text-wrap: balance; }

  
  
  
  

  
  

  .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem .9rem;
  }
  @media (max-width: 767px) {
    .footer-legal-links { max-width: calc(100% - 5.9rem); }
  }

  /* =========================================================
     VIDEO, DIAPOSITIVAS Y CATÁLOGO
     ========================================================= */

  
  .classroom-session-panel {
    order: 2;
    max-height: none !important;
    overflow: visible !important;
  }
  
  
  
  
  

  .news-slide-image {
    filter: saturate(1.02) contrast(1.02) brightness(.88) !important;
    transform: scale(1.02);
    transition: opacity 420ms ease, transform 9000ms ease, filter 420ms ease !important;
  }
  .news-slider-viewport:hover .news-slide-image {
    transform: scale(1.06);
    filter: saturate(1.06) contrast(1.03) brightness(.92) !important;
  }
  .news-slide-content {
    background: rgba(7, 21, 38, 0.12) !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  #view-catalogo .premium-course-card { overflow: visible !important; }
  #view-catalogo .premium-course-cover {
    aspect-ratio: 16 / 9.2 !important;
    min-height: clamp(13.5rem, 34vw, 17rem) !important;
    padding: clamp(1rem, 2.2vw, 1.25rem) !important;
    align-items: flex-start !important;
  }
  #view-catalogo .premium-course-icon {
    position: absolute !important;
    right: 1rem !important;
    bottom: 1rem !important;
    top: auto !important;
    z-index: 3 !important;
    width: clamp(3rem, 6vw, 3.6rem) !important;
    background: rgba(2,12,27,.72) !important;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 {
    margin-top: -3.25rem !important;
    padding: 1rem 1rem 1.05rem !important;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 h3 {
    padding-right: 4.4rem !important;
  }
  #view-catalogo .premium-course-card .course-type-label {
    margin-bottom: .55rem !important;
  }
  @media (max-width: 640px) {
    #view-catalogo .premium-course-cover { min-height: 12.6rem !important; }
    #view-catalogo .premium-course-card .space-y-2.min-w-0 { margin-top: -2.6rem !important; }
    #view-catalogo .premium-course-card .space-y-2.min-w-0 h3 { padding-right: 3.9rem !important; }
    #view-catalogo .premium-course-icon { right: .85rem !important; bottom: .85rem !important; }
  }

  /* =========================================================
     FOOTER MÓVIL E ICONOGRAFÍA
     ========================================================= */
@media (max-width: 767px) {
    #site-footer {
      padding-top: 3.5rem !important;
      padding-bottom: 6.25rem !important;
    }
    #site-footer > div {
      padding-left: clamp(1.15rem, 5vw, 1.6rem) !important;
      padding-right: clamp(1.15rem, 5vw, 1.6rem) !important;
    }
    #site-footer .grid.grid-cols-1 {
      gap: 1.9rem !important;
    }
    #site-footer .space-y-4.text-left,
    #site-footer .space-y-5.text-left {
      padding-inline: .05rem;
    }
    #site-footer .footer-social-links {
      gap: .7rem !important;
      flex-wrap: wrap;
    }
    #site-footer .grid.grid-cols-2 {
      column-gap: 1.1rem !important;
      row-gap: .65rem !important;
    }
    #site-footer .pt-6 {
      padding-top: 1.35rem !important;
    }
  }

  #view-catalogo .premium-course-card {
    overflow: visible !important;
  }
  #view-catalogo .premium-course-cover {
    overflow: visible !important;
    z-index: 4 !important;
    isolation: isolate !important;
  }
  #view-catalogo .premium-course-cover::after {
    z-index: 1 !important;
  }
  #view-catalogo .premium-course-photo {
    position: relative;
    z-index: 0;
  }
  #view-catalogo .premium-course-badge,
  #view-catalogo .course-type-chip {
    position: relative;
    z-index: 3 !important;
  }
  #view-catalogo .premium-course-icon {
    z-index: 9 !important;
    right: 1rem !important;
    bottom: -1.05rem !important;
    top: auto !important;
    transform: translateZ(0) !important;
    box-shadow: 0 24px 40px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08) !important;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 {
    position: relative;
    z-index: 2 !important;
    margin-top: -2.95rem !important;
  }
  #view-catalogo .premium-course-card .space-y-2.min-w-0 h3 {
    padding-right: 4.9rem !important;
  }
  @media (max-width: 640px) {
    #view-catalogo .premium-course-icon {
      right: .95rem !important;
      bottom: -.9rem !important;
    }
    #view-catalogo .premium-course-card .space-y-2.min-w-0 {
      margin-top: -2.65rem !important;
    }
    #view-catalogo .premium-course-card .space-y-2.min-w-0 h3 {
      padding-right: 4.45rem !important;
    }
  }

  /* =========================================================
     CATÁLOGO Y FOOTER CENTRADO
     ========================================================= */
#view-catalogo .premium-course-cover {
    min-height: clamp(14.6rem, 38vw, 18.4rem) !important;
    aspect-ratio: 16 / 9.6 !important;
    background:
      linear-gradient(to top, rgba(2, 12, 27, 0.28), rgba(2, 12, 27, 0.04) 48%, rgba(2, 12, 27, 0.02) 100%),
      var(--course-cover, linear-gradient(135deg, #0f294a, #020c1b)) !important;
    background-size: cover !important;
    background-position: center center !important;
    align-items: flex-start !important;
    padding: clamp(1rem, 2.2vw, 1.25rem) !important;
  }

  #view-catalogo .premium-course-cover::after {
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.38), transparent 88%) !important;
    opacity: .75 !important;
  }

  #view-catalogo .premium-course-photo {
    transform: scale(1.06) translateY(-0.15rem) !important;
    filter: saturate(.98) contrast(1.02) brightness(.9) !important;
  }

  #view-catalogo .premium-course-card .space-y-2.min-w-0 {
    margin-top: -1.55rem !important;
    background: rgba(6, 18, 34, 0.14) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 16px 36px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  #view-catalogo .premium-course-card .course-type-label {
    margin-bottom: .62rem !important;
  }

  @media (max-width: 767px) {

    #site-footer > div > .grid > div:nth-child(4) {
      text-align: center !important;
      justify-self: center !important;
      width: 100% !important;
      max-width: 20rem !important;
      margin-inline: auto !important;
    }

    #site-footer > div > .grid > div:nth-child(4) h4 {
      text-align: center !important;
    }

    #site-footer > div > .grid > div:nth-child(4) > div {
      align-items: center !important;
      text-align: center !important;
    }

    #site-footer > div > .grid > div:nth-child(4) .footer-qr-wrap {
      margin-inline: auto !important;
    }

    #site-footer > div > .grid > div:nth-child(4) .footer-channel-link {
      justify-content: center !important;
      margin-inline: auto !important;
    }

    #site-footer .pt-6 {
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }

    #site-footer .pt-6 > span {
      display: block !important;
      width: 100% !important;
      text-align: center !important;
    }

    #site-footer .footer-legal-links {
      width: 100% !important;
      max-width: 20rem !important;
      margin-inline: auto !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      padding-right: 0 !important;
    }

    #site-footer .footer-claims-link {
      margin-inline: auto !important;
    }
  }

  
  #catalog-live-premium-grid,
  #catalog-async-premium-grid,
  #premium-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1rem, 2.2vw, 1.55rem);
    align-items: stretch;
  }

  .catalog-card-v5 {
    --catalog-accent: #C5A85A;
    --catalog-accent-rgb: 197, 168, 90;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    
    border-radius: clamp(1.2rem, 2.8vw, 1.7rem);
    
    
    transition: border-color 280ms ease, box-shadow 280ms ease;
  }

  

  .catalog-card-v5__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(25rem, 46vw, 30rem);
    margin: clamp(.58rem, 1.6vw, .76rem) clamp(.58rem, 1.6vw, .76rem) 0;
    padding: clamp(.82rem, 2vw, 1rem);
    overflow: hidden;
    border-radius: clamp(1rem, 2.2vw, 1.35rem);
    isolation: isolate;
  }

  .catalog-card-v5__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: var(--catalog-card-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transform: scale(1.025);
    transition: transform 720ms cubic-bezier(.16,1,.3,1), filter 420ms ease;
  }

  .catalog-card-v5__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(180deg, rgba(2,12,27,.03) 0%, rgba(2,12,27,.05) 42%, rgba(2,12,27,.44) 72%, rgba(2,12,27,.8) 100%),
      linear-gradient(125deg, rgba(var(--catalog-accent-rgb), .07), transparent 62%);
    pointer-events: none;
  }

  .catalog-card-v5:hover .catalog-card-v5__visual::before,
  .catalog-card-v5:focus-within .catalog-card-v5__visual::before {
    transform: scale(1.055);
    filter: saturate(1.04) brightness(1.02);
  }

  .catalog-card-v5__status,
  .catalog-card-v5__type {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: fit-content;
    max-width: 100%;
    min-height: 2rem;
    padding: .5rem .78rem;
    border-radius: .78rem;
    color: #fff;
    font-size: .68rem;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
  }

  .catalog-card-v5__status {
    position: relative;
    z-index: 3;
    align-self: flex-start;
    border: 1px solid rgba(226,246,255,.28);
    background: linear-gradient(135deg, #168fd7, #2aa8f2);
    box-shadow: 0 12px 24px -18px rgba(42,168,242,.7);
  }

  .catalog-card-v5__status--live { background: linear-gradient(135deg, #a16207, #d97706); }
  .catalog-card-v5__status--historical { background: linear-gradient(135deg, #475569, #64748b); }
  .catalog-card-v5__status--certificate {
    color: #E0F2FE;
    background: rgba(14,116,144,.84);
    border-color: rgba(125,211,252,.52);
  }

  .catalog-card-v5__spacer {
    flex: 1 1 auto;
    min-height: clamp(7.5rem, 18vw, 12rem);
  }

  .catalog-card-v5__icon-row {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: .64rem;
  }

  .catalog-card-v5__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    border: 1px solid rgba(var(--catalog-accent-rgb), .46);
    border-radius: .9rem;
    color: var(--catalog-accent);
    background: rgba(5,18,34,.8);
    box-shadow: 0 18px 34px -22px rgba(0,0,0,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .catalog-card-v5__intro {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(.9rem, 2vw, 1.05rem);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.08rem;
    background: rgba(6,18,34,.48);
    box-shadow: 0 20px 42px -30px rgba(0,0,0,.94), inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter: blur(13px) saturate(1.06);
    -webkit-backdrop-filter: blur(13px) saturate(1.06);
  }

  .catalog-card-v5__type {
    margin: 0 0 .72rem;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  }

  .catalog-card-v5__type--diplomado { background: linear-gradient(135deg, #c61c1c, #ef4444); }
  .catalog-card-v5__type--curso { background: linear-gradient(135deg, #0f8a4b, #22c55e); }
  .catalog-card-v5__type--programa { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
  .catalog-card-v5__type--taller { background: linear-gradient(135deg, #d97706, #f59e0b); }

  .catalog-card-v5__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.06rem, 2vw, 1.25rem);
    line-height: 1.23;
    font-weight: 850;
    letter-spacing: -.024em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .catalog-card-v5__summary {
    margin: .5rem 0 0;
    color: #e0e9f1;
    font-size: clamp(.8rem, 1.4vw, .89rem);
    line-height: 1.58;
    overflow-wrap: anywhere;
  }

  .catalog-card-v5__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .78rem;
    min-width: 0;
    padding: clamp(.9rem, 2.1vw, 1.12rem);
  }

  .catalog-card-v5__format-picker,
  .catalog-card-v5__format-fixed {
    display: grid;
    gap: .38rem;
    min-width: 0;
    padding: .65rem .7rem;
    
    border-radius: .78rem;
    
  }

  .catalog-card-v5__format-picker label,
  .catalog-card-v5__format-fixed span {
    color: #b9cad8;
    font-size: .63rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .065em;
    text-transform: uppercase;
  }

  .catalog-card-v5__format-picker select {
    width: 100%;
    min-width: 0;
    min-height: 2.3rem;
    padding: .48rem 2rem .48rem .65rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: .62rem;
    color: #fff;
    background: #0a2038;
    font-size: .72rem;
    line-height: 1.3;
    font-weight: 750;
    outline: none;
  }

  .catalog-card-v5__format-picker select:focus-visible {
    border-color: rgba(var(--catalog-accent-rgb), .72);
    box-shadow: 0 0 0 3px rgba(var(--catalog-accent-rgb), .12);
  }

  .catalog-card-v5__format-fixed strong {
    color: #fff;
    font-size: .76rem;
    line-height: 1.4;
  }

  .catalog-card-v5__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .catalog-card-v5__facts li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .3rem .45rem;
    align-items: start;
    min-width: 0;
    padding: .62rem;
    
    border-radius: .74rem;
    
  }


  .catalog-card-v5__facts span {
    color: #c2d0dc;
    font-size: .63rem;
    line-height: 1.3;
  }

  .catalog-card-v5__facts strong {
    color: #fff;
    font-size: .69rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .catalog-card-v5__notice {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: .62rem;
    align-items: start;
    padding: .72rem;
    border: 1px solid rgba(245,158,11,.28);
    border-radius: .78rem;
    background: rgba(161,98,7,.11);
  }

  .catalog-card-v5__notice i { color: #fbbf24; }
  .catalog-card-v5__notice strong,
  .catalog-card-v5__notice span { display: block; }
  .catalog-card-v5__notice strong { color: #fff; font-size: .76rem; }
  .catalog-card-v5__notice span { margin-top: .16rem; color: #cbd5e1; font-size: .69rem; line-height: 1.45; }

  .catalog-card-v5__actions { margin-top: auto; }

  .catalog-card-v5__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(125,168,216,.38);
    border-radius: .78rem;
    color: #fff;
    background: rgba(5,20,43,.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 32px -22px rgba(0,0,0,.96);
    font-size: .7rem;
    line-height: 1.25;
    font-weight: 850;
    letter-spacing: .032em;
    text-transform: uppercase;
    text-align: center;
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
  }

  .catalog-card-v5__button:hover,
  .catalog-card-v5__button:focus-visible {
    transform: translateY(-.08rem);
    border-color: rgba(var(--catalog-accent-rgb), .7);
    background: rgba(var(--catalog-accent-rgb), .18);
    outline: none;
  }

  .catalog-card-v5__button--historical {
    cursor: default;
    color: #cbd5e1;
    border-color: rgba(148,163,184,.24);
    background: rgba(71,85,105,.3);
  }

  @media (max-width: 640px) {
    #catalog-live-premium-grid,
    #catalog-async-premium-grid,
    #premium-course-grid { grid-template-columns: minmax(0, 1fr); }

    .catalog-card-v5__visual {
      min-height: 27rem;
      margin: .58rem .58rem 0;
      padding: .82rem;
      border-radius: 1.02rem;
    }

    .catalog-card-v5__spacer { min-height: 8.5rem; }
    .catalog-card-v5__intro { padding: .85rem; }
    .catalog-card-v5__body { padding: .86rem; }
    .catalog-card-v5__facts { grid-template-columns: minmax(0, 1fr); }
  }

  @media (prefers-reduced-motion: reduce) {
    .catalog-card-v5,
    .catalog-card-v5__visual::before,
    .catalog-card-v5__button { transition: none !important; }
  }

  /* =========================================================
     ANCHO RESPONSIVE DEL ABANICO
     ========================================================= */  /* =========================================================
     ANCHO RESPONSIVE DEL ABANICO
     ========================================================= */
#hero-stage {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #hero-deck {
    width: min(96vw, 46.5rem) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  #deck-card-active,
  #deck-card-prev,
  #deck-card-next {
    width: 100% !important;
    max-width: 100% !important;
  }

  #hero-controls {
    width: min(100%, 31.5rem) !important;
  }

  @media (max-width: 359px) {
    #hero-deck {
      width: min(92vw, 30.75rem) !important;
    }

    #hero-controls {
      width: min(100%, 24rem) !important;
    }
  }

  @media (min-width: 360px) and (max-width: 639px) {
    #hero-deck {
      width: min(94vw, 34rem) !important;
    }
  }

  @media (min-width: 640px) and (max-width: 839px) {
    #hero-deck {
      width: min(86vw, 40.5rem) !important;
    }

    #hero-controls {
      width: min(100%, 28.5rem) !important;
    }
  }

  @media (min-width: 840px) and (min-aspect-ratio: 4 / 3) {
    #hero-deck {
      width: min(52vw, 39rem) !important;
    }

    #hero-controls {
      width: min(100%, 29.5rem) !important;
    }
  }

  @media (min-width: 840px) and (min-aspect-ratio: 4 / 3) and (max-height: 700px) {
    #hero-deck {
      width: min(48vw, 36rem) !important;
    }
  }

  @media (min-width: 1500px) {
    #hero-deck {
      width: min(42vw, 43rem) !important;
    }
  }

  /* =========================================================
     INTERACCIÓN FINAL DEL ABANICO
     ========================================================= */
@media (hover: hover) and (pointer: fine) {

    #hero-deck:hover #deck-card-active,
    #hero-deck #deck-card-active:hover {
      transform: none !important;
      filter: none !important;
      box-shadow: inherit !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    #hero-deck:hover #deck-card-prev,
    #hero-deck #deck-card-prev:hover {
      transform:
        translate3d(calc(var(--fan-x) * -1), var(--fan-y), -128px)
        rotateZ(calc(var(--fan-rotate) * -1))
        rotateY(11deg)
        scale(var(--fan-side-scale)) !important;
      filter: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    #hero-deck:hover #deck-card-next,
    #hero-deck #deck-card-next:hover {
      transform:
        translate3d(var(--fan-x), var(--fan-y), -128px)
        rotateZ(var(--fan-rotate))
        rotateY(-11deg)
        scale(var(--fan-side-scale)) !important;
      filter: none !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    #hero-deck:hover #card-active-hud,
    #hero-deck:hover #deck-card-active > .relative.z-10,
    #hero-deck:hover #deck-card-prev > .relative.z-10,
    #hero-deck:hover #deck-card-next > .relative.z-10,
    #hero-deck:hover #deck-card-active :is(h1,h2,h3,h4,p,span,a,button),
    #hero-deck:hover #deck-card-prev :is(h1,h2,h3,h4,p,span,a,button),
    #hero-deck:hover #deck-card-next :is(h1,h2,h3,h4,p,span,a,button) {
      transform: none !important;
      filter: none !important;
      text-shadow: none !important;
    }

    #card-active-img,
    #card-prev-img,
    #card-next-img {
      transition: transform 1.45s cubic-bezier(.22, 1, .36, 1) !important;
      will-change: transform;
    }

    #hero-deck:hover #card-active-img,
    #hero-deck #deck-card-active:hover #card-active-img {
      transform: scale(1.08) !important;
    }

    #hero-deck:hover #card-prev-img,
    #hero-deck #deck-card-prev:hover #card-prev-img,
    #hero-deck:hover #card-next-img,
    #hero-deck #deck-card-next:hover #card-next-img {
      transform: scale(1.12) !important;
    }
  }

  @media (max-width: 839px) {
    #hero-deck:hover #deck-card-active,
    #hero-deck:hover #deck-card-prev,
    #hero-deck:hover #deck-card-next {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #card-active-img,
    #card-prev-img,
    #card-next-img,
    #deck-card-active,
    #deck-card-prev,
    #deck-card-next {
      transition: none !important;
    }
  }


  /* =========================================================
     CATÁLOGO ASINCRÓNICO · ORDEN CONTINUO E ICONOGRAFÍA CROMÁTICA
     Una sola cuadrícula: primero contenido grabado, luego el resto.
     ========================================================= */
  .catalog-learning-principle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .9rem;
    padding: clamp(1rem, 2.2vw, 1.25rem);
    
    border-radius: 1rem;
    
    
  }

  .catalog-learning-principle__icon {
    display: grid;
    place-items: center;
    width: 2.7rem;
    min-width: 2.7rem;
    aspect-ratio: 1;
    border-radius: .86rem;
    color: #D1FAE5;
    background: linear-gradient(145deg, rgba(16,185,129,.3), rgba(14,165,233,.24));
    border: 1px solid rgba(110,231,183,.42);
    box-shadow: 0 14px 28px -20px rgba(16,185,129,.9), inset 0 1px 0 rgba(255,255,255,.15);
  }

  .catalog-learning-principle strong {
    display: block;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(.9rem, 1.3vw, 1rem);
    line-height: 1.35;
    font-weight: 850;
  }

  .catalog-learning-principle p {
    margin: .32rem 0 0;
    color: #B9C9D7;
    font-size: clamp(.76rem, 1vw, .84rem);
    line-height: 1.62;
    overflow-wrap: break-word;
  }

  /* Icono principal: cada tarjeta recibe una paleta estable desde JavaScript. */
  .catalog-card-v5__icon {
    color: var(--catalog-icon-color, #7DD3FC) !important;
    background: var(--catalog-icon-bg, rgba(14,165,233,.18)) !important;
    border-color: var(--catalog-icon-border, rgba(125,211,252,.4)) !important;
    box-shadow:
      0 18px 34px -22px var(--catalog-icon-shadow, rgba(14,165,233,.9)),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  /* Iconos pequeños de datos: color funcional y consistente. */
  .catalog-card-v5__fact-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    margin-top: .02rem;
    border-radius: .58rem;
    border: 1px solid currentColor;
    font-size: .72rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  }

  .catalog-card-v5__fact-icon i { color: inherit !important; }
  .catalog-card-v5__fact-icon--open {
    color: #86EFAC;
    background: rgba(34,197,94,.14);
    border-color: rgba(134,239,172,.32);
  }
  .catalog-card-v5__fact-icon--closed {
    color: #FDA4AF;
    background: rgba(244,63,94,.14);
    border-color: rgba(253,164,175,.32);
  }
  .catalog-card-v5__fact-icon--hours {
    color: #7DD3FC;
    background: rgba(14,165,233,.14);
    border-color: rgba(125,211,252,.32);
  }
  .catalog-card-v5__fact-icon--evaluation {
    color: #C4B5FD;
    background: rgba(139,92,246,.14);
    border-color: rgba(196,181,253,.32);
  }
  .catalog-card-v5__fact-icon--price {
    color: #FDE68A;
    background: rgba(245,158,11,.14);
    border-color: rgba(253,230,138,.32);
  }

  .catalog-card-v5__button > i {
    display: grid;
    place-items: center;
    width: 1.72rem;
    min-width: 1.72rem;
    height: 1.72rem;
    border-radius: .54rem;
    color: var(--catalog-icon-color, #7DD3FC);
    background: var(--catalog-icon-bg, rgba(14,165,233,.18));
    border: 1px solid var(--catalog-icon-border, rgba(125,211,252,.38));
  }

  .catalog-card-v5__button--historical > i {
    color: #CBD5E1;
    background: rgba(100,116,139,.2);
    border-color: rgba(203,213,225,.22);
  }

  @media (max-width: 639px) {
    .catalog-learning-principle { grid-template-columns: 1fr; }
    .catalog-learning-principle__icon {
      width: 2.5rem;
      min-width: 2.5rem;
    }
  }

  .premium-format-selector-card {
    display: grid;
    gap: .72rem;
    min-width: 0;
    padding: clamp(.78rem, 1.8vw, .92rem);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .92rem;
    background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }

  .premium-format-selector-card__heading {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .65rem;
  }

  .premium-format-selector-card__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    aspect-ratio: 1;
    border-radius: .72rem;
    color: #C5A85A;
    border: 1px solid rgba(197,168,90,.3);
    background: rgba(197,168,90,.1);
  }

  .premium-format-selector-card__heading small,
  .premium-format-selector-card__heading strong {display: block;min-width: 0;}

  .premium-format-selector-card__heading small,
  .premium-format-selector-card__control > span {
    color: #8FA1B3;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .premium-format-selector-card__heading strong {margin-top: .12rem;color: #fff;font-size: clamp(.94rem, 2.2vw, 1.08rem);line-height: 1.3;overflow-wrap: anywhere;}

  .premium-format-selector-card__control {
    display: grid;
    gap: .4rem;
    min-width: 0;
  }

  .premium-format-selector-card__control select {
    width: 100%;
    min-width: 0;
    min-height: 2.55rem;
    padding: .58rem 2.25rem .58rem .72rem;
    border: 1px solid rgba(197,168,90,.28);
    border-radius: .72rem;
    color: #fff;
    background: #071a2e;
    font-size: .76rem;
    line-height: 1.35;
    font-weight: 750;
    outline: none;
  }

  .premium-format-selector-card__control select:focus-visible {
    border-color: rgba(197,168,90,.72);
    box-shadow: 0 0 0 3px rgba(197,168,90,.11);
  }

  .premium-format-selector-card__control select:disabled {
    cursor: default;
    opacity: .86;
  }

  .premium-format-selector-card__control small {
    color: #8294A6;
    font-size: .64rem;
    line-height: 1.45;
  }

  .premium-format-selector-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: .5rem;
    margin: 0;
  }

  .premium-format-selector-card__facts > div {
    min-width: 0;
    padding: .58rem;
    border-radius: .68rem;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(2,12,27,.42);
  }

  .premium-format-selector-card__facts dt,
  .premium-format-selector-card__facts dd { margin: 0; overflow-wrap: anywhere; }

  .premium-format-selector-card__facts dt {
    color: #8395A7;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
  }

  .premium-format-selector-card__facts dd {
    margin-top: .22rem;
    color: #F8FAFC;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.38;
  }

  #premium-detail-price-usd {
    max-width: 30rem;
    overflow-wrap: anywhere;
  }

  @media (max-width: 479px) {
    .catalog-learning-principle {
      grid-template-columns: 1fr;
    }

    .catalog-learning-principle__icon {
      width: 2.35rem;
    }

    .premium-format-selector-card__facts {
      grid-template-columns: 1fr;
    }
  }



  /* =========================================================
     CONTACTO · ORIENTACIÓN INICIAL SIN COSTO
     ========================================================= */
  .contact-advisor-free-note {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
    gap: .8rem;
    min-width: 0;
    padding: .95rem 1rem;
    
    border-radius: 1rem;
    
    
  }

  .contact-advisor-free-note__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    border: 1px solid rgba(74,222,128,.38);
    background: rgba(34,197,94,.14);
    color: #86EFAC;
    font-size: 1rem;
  }

  .contact-advisor-free-note strong {
    display: block;
    margin: 0;
    color: #FFFFFF;
    font-size: .9rem;
    line-height: 1.3;
  }

  .contact-advisor-free-note p {
    margin: .24rem 0 0;
    color: #BFD4C6;
    font-size: .76rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  /* =========================================================
     DETALLE · AULA VIRTUAL NO DISPONIBLE
     ========================================================= */
  

  

  

  

  

  @media (max-width: 479px) {
    .contact-advisor-free-note {
      grid-template-columns: 2.5rem minmax(0, 1fr);
      gap: .7rem;
      padding: .85rem;
    }

    .contact-advisor-free-note__icon {
      width: 2.5rem;
      height: 2.5rem;
    }

    
  }

/* =========================================================
     FOOTER LEGAL · MOBILE EN CUADRÍCULA / ESCRITORIO EN LÍNEA
     ========================================================= */

  .footer-bottom-panel {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    text-align: center;
  }

  .footer-bottom-copy {
    margin: 0;
    max-width: 24rem;
    color: #94A3B8;
    font-size: 0.78rem;
    line-height: 1.55;
  }

  .footer-legal-grid {
    width: min(100%, 22rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: stretch;
  }

  .footer-legal-action {
    width: 100%;
    min-width: 0;
    min-height: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.75rem 0.72rem;
    border: 1px solid rgba(197, 168, 90, 0.18);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    color: #CBD5E1;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease,
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  .footer-legal-action i {
    flex: 0 0 auto;
    color: #D0BC8C;
  }

  .footer-legal-action span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .footer-legal-action--wide {
    grid-column: 1 / -1;
    width: 100%;
  }

  .footer-legal-action:hover,
  .footer-legal-action:focus-visible {
    color: #FFFFFF;
    border-color: rgba(197, 168, 90, 0.42);
    background: rgba(197, 168, 90, 0.08);
    transform: translateY(-1px);
    box-shadow:
      0 14px 24px -18px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    outline: none;
  }

  /* Escritorio y pantallas anchas: composición horizontal original. */
  @media (min-width: 640px) {
    .footer-bottom-panel {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      text-align: left;
    }

    .footer-bottom-copy {
      flex: 0 1 auto;
      max-width: none;
      font-size: 0.75rem;
      white-space: nowrap;
    }

    .footer-legal-grid {
      width: auto;
      max-width: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem 1rem;
    }

    .footer-legal-action {
      width: auto;
      min-height: auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #94A3B8;
      font-size: 0.75rem;
      font-weight: 500;
      box-shadow: none;
    }

    .footer-legal-action i {
      display: none;
    }

    .footer-legal-action--wide {
      grid-column: auto;
      min-height: 2.25rem;
      padding: 0.45rem 0.7rem;
      border: 1px solid rgba(197, 168, 90, 0.20);
      border-radius: 0.6rem;
      background: rgba(255, 255, 255, 0.035);
      color: #CBD5E1;
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .footer-legal-action--wide i {
      display: inline-block;
    }

    .footer-legal-action:hover,
    .footer-legal-action:focus-visible {
      color: #FFFFFF;
      background: transparent;
      border-color: transparent;
      transform: none;
      box-shadow: none;
      text-decoration: underline;
      text-underline-offset: 0.2rem;
    }

    .footer-legal-action--wide:hover,
    .footer-legal-action--wide:focus-visible {
      border-color: rgba(197, 168, 90, 0.42);
      background: rgba(197, 168, 90, 0.08);
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      text-decoration: none;
    }
  }

  @media (min-width: 1280px) {
    .footer-bottom-panel {
      gap: 2rem;
    }

    .footer-legal-grid {
      flex-wrap: nowrap;
    }
  }

/* =========================================================
     PREMIUM DETAIL · BENEFICIOS RECONSTRUIDOS DESDE CERO
     Evita palabras cortadas y mantiene responsividad total.
     ========================================================= */

  #premium-detail-panel .premium-benefit-grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: .85rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #premium-detail-panel .premium-benefit-card {
    display: grid !important;
    grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    align-items: start !important;
    gap: .8rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: .95rem 1rem !important;
    border-radius: .95rem !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.045) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    overflow: visible !important;
  }

  #premium-detail-panel .premium-benefit-card__icon {
    width: 2.8rem !important;
    min-width: 2.8rem !important;
    height: 2.8rem !important;
    display: grid !important;
    place-items: center !important;
    border-radius: .78rem !important;
    border: 1px solid rgba(197,168,90,.28) !important;
    background: rgba(197,168,90,.10) !important;
    color: #D7BA70 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  #premium-detail-panel .premium-benefit-card--unavailable {
    border-color: rgba(248,113,113,.28) !important;
    background: rgba(127,29,29,.12) !important;
  }

  #premium-detail-panel .premium-benefit-card--unavailable .premium-benefit-card__icon {
    border-color: rgba(248,113,113,.42) !important;
    background: rgba(239,68,68,.14) !important;
    color: #FCA5A5 !important;
  }

  #premium-detail-panel .premium-benefit-card--unavailable .premium-benefit-card__text {
    color: #FCA5A5 !important;
    font-weight: 750 !important;
  }

  #premium-detail-panel .premium-benefit-card__content {
    display: grid !important;
    gap: .28rem !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #premium-detail-panel .premium-benefit-card__title {margin: 0 !important;color: #FFFFFF !important;font-size: clamp(.96rem, 1.35vw, 1.12rem) !important;line-height: 1.2 !important;white-space: normal !important;word-break: normal !important;overflow-wrap: normal !important;hyphens: none !important;text-wrap: pretty !important;}

  #premium-detail-panel .premium-benefit-card__text {
    margin: 0 !important;
    color: #9FB0C1 !important;
    font-size: clamp(.78rem, 1vw, .86rem) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-wrap: pretty !important;
  }

  @media (min-width: 640px) {
    #premium-detail-panel .premium-benefit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (min-width: 1100px) {
    #premium-detail-panel .premium-benefit-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 479px) {
    #premium-detail-panel .premium-benefit-card {
      grid-template-columns: 2.55rem minmax(0, 1fr) !important;
      gap: .72rem !important;
      padding: .88rem .9rem !important;
    }

    #premium-detail-panel .premium-benefit-card__icon {
      width: 2.55rem !important;
      min-width: 2.55rem !important;
      height: 2.55rem !important;
      border-radius: .72rem !important;
      font-size: .92rem !important;
    }

    #premium-detail-panel .premium-benefit-card__title {font-size: .92rem !important;line-height: 1.18 !important;}

    #premium-detail-panel .premium-benefit-card__text {
      font-size: .76rem !important;
      line-height: 1.4 !important;
    }
  }

#contact-credential-field[hidden] {
    display: none !important;
  }

  /* =========================================================
     SISTEMA TIPOGRÁFICO EDITORIAL CEFEIN
     Implementación única para títulos de toda la plataforma.
     ========================================================= */
  :where(main, footer, #legal-modal, #whatsapp-panel) :is(h1, h2, h3, h4) {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    font-synthesis: weight;
    text-rendering: optimizeLegibility;
  }

  :where(main, footer, #legal-modal, #whatsapp-panel) :is(h1, h2, h3, h4) {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Bolsa de trabajo */
  #view-empleo .jobs-hero h1 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  #view-empleo .jobs-section-heading h2 {
    margin: .3rem 0 0;
    color: #FFFFFF;
    font-size: clamp(1.3rem, 3vw, 2rem);
    line-height: 1.16;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }

  #view-empleo .job-card h3 {
    margin: .65rem 0 0;
    color: #FFFFFF;
    font-size: clamp(1rem, 1.8vw, 1.12rem);
    line-height: 1.24;
    letter-spacing: -0.012em;
    text-wrap: pretty;
  }

  /* Programa completo */
  #premium-detail-panel #premium-detail-title {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.75rem, 4.15vw, 3.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.038em !important;
    text-wrap: balance;
  }

  

  

  #premium-detail-panel .premium-panel-heading h2 {
    margin: 0;
    font-size: clamp(1.2rem, 2.7vw, 1.65rem) !important;
  }

  #premium-detail-panel :is(.premium-benefit-card__title, .premium-detail-action-copy strong, .premium-course-status-list strong, .premium-format-selector-card__heading strong) {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  #premium-detail-panel .premium-benefit-card__title {
    line-height: 1.22 !important;
    text-wrap: pretty;
  }

  @media (max-width: 479px) {
    #view-empleo .jobs-hero h1 {
      font-size: clamp(1.85rem, 10vw, 2.65rem);
    }

    #premium-detail-panel #premium-detail-title {
      font-size: clamp(1.7rem, 9.2vw, 2.45rem) !important;
      line-height: 1.1 !important;
      letter-spacing: -0.03em !important;
    }
  }


  
  #premium-faculty-section[hidden] {
    display: none !important;
  }

  .premium-faculty-section {
    display: grid;
    gap: clamp(.9rem, 2vw, 1.2rem);
  }

  .premium-faculty-heading {
    display: grid;
    gap: .28rem;
    min-width: 0;
  }

  .premium-faculty-heading p {
    margin: 0;
    color: #C5A85A;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .13em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .premium-faculty-heading h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(1.18rem, 2.8vw, 1.7rem);
    font-weight: 900;
    line-height: 1.18;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .premium-faculty-heading span {
    color: #94A3B8;
    font-size: clamp(.76rem, 1.2vw, .86rem);
    line-height: 1.55;
  }

  .premium-faculty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: .85rem;
    min-width: 0;
  }

  .premium-faculty-card {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
    min-width: 0;
    padding: clamp(.9rem, 2vw, 1.05rem);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: .95rem;
    background: rgba(255,255,255,.038);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .premium-faculty-avatar {
    display: grid;
    place-items: center;
    width: 3.1rem;
    min-width: 3.1rem;
    aspect-ratio: 1;
    border: 1px solid rgba(197,168,90,.34);
    border-radius: .88rem;
    background: rgba(197,168,90,.11);
    color: #E4C875;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .04em;
  }

  .premium-faculty-copy {
    display: grid;
    gap: .35rem;
    min-width: 0;
  }

  .premium-faculty-copy h3 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(.94rem, 1.5vw, 1.08rem);
    font-weight: 900;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .premium-faculty-copy p {
    margin: 0;
    color: #B5C1CC;
    font-size: clamp(.75rem, 1vw, .84rem);
    line-height: 1.58;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  @media (max-width: 399px) {
    .premium-faculty-card {
      grid-template-columns: 2.75rem minmax(0, 1fr);
      gap: .72rem;
      padding: .82rem;
    }

    .premium-faculty-avatar {
      width: 2.75rem;
      min-width: 2.75rem;
      font-size: .74rem;
    }
  }



/* =========================================================
   PROGRAMA COMPLETO · ACCESO AL AULA
   Una sola implementación responsive, sin texto vertical.
   ========================================================= */
#premium-detail-panel .premium-access-card {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .92rem 1rem;
  border-radius: .95rem;
  border: 1px solid rgba(90, 151, 205, .34);
  background: linear-gradient(145deg, #123453, #0A2138);
  color: #F8FAFC;
  text-align: left;
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

#premium-detail-panel .premium-access-card:not(:disabled):hover,
#premium-detail-panel .premium-access-card:not(:disabled):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(197,168,90,.56);
  outline: none;
}

#premium-detail-panel .premium-access-card__icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .78rem;
  border: 1px solid rgba(125, 211, 252, .28);
  background: rgba(14, 116, 144, .2);
  color: #7DD3FC;
  font-size: 1rem;
}

#premium-detail-panel .premium-access-card__copy {
  display: grid;
  gap: .18rem;
  min-width: 0;
}

#premium-detail-panel .premium-access-card__copy small,
#premium-detail-panel .premium-access-card__copy strong,
#premium-detail-panel .premium-access-card__copy em {
  display: block;
  min-width: 0;
  margin: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

#premium-detail-panel .premium-access-card__copy small {
  color: #8FA9C0;
  font-size: .62rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#premium-detail-panel .premium-access-card__copy strong {
  color: #FFFFFF;
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.25;
  font-weight: 850;
}

#premium-detail-panel .premium-access-card__copy em {
  color: #9FB1C2;
  font-size: .72rem;
  line-height: 1.42;
  font-style: normal;
}

#premium-detail-panel .premium-access-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-width: max-content;
  padding: .48rem .68rem;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, .22);
  background: rgba(14, 116, 144, .15);
  color: #BAE6FD;
  font-size: .69rem;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}

#premium-detail-panel .premium-access-card--unavailable,
#premium-detail-panel .premium-access-card--unavailable:hover,
#premium-detail-panel .premium-access-card--unavailable:focus-visible {
  cursor: not-allowed;
  transform: none;
  opacity: 1;
  border-color: rgba(248, 113, 113, .34);
  background: linear-gradient(145deg, #132940, #0A192C);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

#premium-detail-panel .premium-access-card--unavailable .premium-access-card__icon {
  border-color: rgba(248, 113, 113, .34);
  background: rgba(127, 29, 29, .18);
  color: #FCA5A5;
}

#premium-detail-panel .premium-access-card--unavailable .premium-access-card__status {
  border-color: rgba(248, 113, 113, .28);
  background: rgba(127, 29, 29, .16);
  color: #FCA5A5;
}

@media (max-width: 479px) {
  #premium-detail-panel .premium-access-card {
    grid-template-columns: 2.55rem minmax(0, 1fr);
    align-items: start;
    gap: .72rem;
    padding: .88rem;
  }

  #premium-detail-panel .premium-access-card__icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: .72rem;
  }

  #premium-detail-panel .premium-access-card__status {
    grid-column: 2;
    justify-self: start;
    margin-top: .28rem;
  }
}

/* =========================================================
   PROGRAMA COMPLETO · MODELOS OFICIALES DE CERTIFICADO
   ========================================================= */
#premium-detail-panel .official-certificate-card {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

#premium-detail-panel .official-certificate-heading {
  display: grid;
  gap: .28rem;
}

#premium-detail-panel .official-certificate-heading p,
#premium-detail-panel .official-certificate-heading h2,
#premium-detail-panel .official-certificate-heading span {
  margin: 0;
}

#premium-detail-panel .official-certificate-heading p {
  color: #C5A85A;
  font-size: .65rem;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#premium-detail-panel .official-certificate-heading h2 {
  color: #FFFFFF;
  font-size: clamp(1.22rem, 2.8vw, 1.8rem);
  line-height: 1.18;
  font-weight: 850;
  text-wrap: balance;
}

#premium-detail-panel .official-certificate-heading span {
  max-width: 72ch;
  color: #9FB1C2;
  font-size: .8rem;
  line-height: 1.55;
}

#premium-detail-panel .official-certificate-gallery {
  display: grid;
  gap: .85rem;
  min-width: 0;
}

#premium-detail-panel .official-certificate-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(197,168,90,.24);
  background: #061728;
}

#premium-detail-panel .official-certificate-track {
  display: flex;
  width: 100%;
  min-width: 0;
  transform: translate3d(0,0,0);
  transition: transform 520ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

#premium-detail-panel .official-certificate-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  display: grid;
  gap: .72rem;
  margin: 0;
  padding: clamp(.55rem, 1.8vw, .9rem);
}

#premium-detail-panel .official-certificate-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: .8rem;
  background: #020C1B;
}

#premium-detail-panel .official-certificate-slide figcaption {
  margin: 0;
  color: #AFC0D0;
  font-size: clamp(.72rem, 1.2vw, .82rem);
  line-height: 1.5;
  text-align: center;
}

#premium-detail-panel .official-certificate-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

#premium-detail-panel .official-certificate-arrow {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: #0B243D;
  color: #FFFFFF;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

#premium-detail-panel .official-certificate-arrow:hover,
#premium-detail-panel .official-certificate-arrow:focus-visible {
  transform: translateY(-1px);
  background: #C5A85A;
  color: #071423;
  outline: none;
}

#premium-detail-panel .official-certificate-dots {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
}

#premium-detail-panel .official-certificate-dot {
  width: .62rem;
  height: .62rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
  transition: width 220ms ease, background-color 220ms ease;
}

#premium-detail-panel .official-certificate-dot.is-active {
  width: 1.8rem;
  background: #C5A85A;
}

@media (max-width: 479px) {
  #premium-detail-panel .official-certificate-slide {
    padding: .45rem;
    gap: .58rem;
  }

  #premium-detail-panel .official-certificate-heading h2 {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #premium-detail-panel .official-certificate-track,
  #premium-detail-panel .official-certificate-arrow,
  #premium-detail-panel .official-certificate-dot,
  #premium-detail-panel .premium-access-card {
    transition: none;
  }
}



  /* NOSOTROS */
  .about-v193 { background: #020C1B; color: #E2E8F0; }
  .about-v193__container { width: min(calc(100% - clamp(2rem, 6vw, 6rem)), 80rem); margin-inline: auto; }
  .about-v193__hero { padding-block: clamp(3rem, 8vw, 6.5rem); background: radial-gradient(circle at 88% 8%, rgba(197,168,90,.18), transparent 30rem), linear-gradient(145deg,#0F294A,#020C1B); }
  .about-v193__hero-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(1.25rem,4vw,3rem); align-items: center; }
  .about-v193__hero-copy { min-width: 0; }
  .about-v193__eyebrow { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; padding: .55rem .85rem; border: 1px solid rgba(197,168,90,.35); border-radius: 999px; color: #E7C76A; background: rgba(197,168,90,.09); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
  .about-v193__hero h1 { margin: 1rem 0 0; max-width: 18ch; color: #fff; font-size: clamp(2rem,6vw,4.7rem); line-height: 1.02; font-weight: 900; letter-spacing: -.045em; text-wrap: balance; }
  .about-v193__hero p { margin: 1rem 0 0; max-width: 62ch; color: #B8C6D4; font-size: clamp(.92rem,1.5vw,1.08rem); line-height: 1.7; }
  .about-v193__principle { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1rem; padding: 1.1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.15rem; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .about-v193__principle > i { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; color: #E7C76A; background: rgba(197,168,90,.12); }
  .about-v193__principle strong { display: block; color: #fff; font-size: 1rem; }
  .about-v193__principle p { margin: .28rem 0 0; font-size: .8rem; line-height: 1.55; }
  .about-v193__body { padding-block: clamp(3rem,7vw,6rem); }
  .about-v193__intro { max-width: 52rem; margin-bottom: clamp(1.8rem,4vw,3rem); }
  .about-v193__intro > span { color: #E7C76A; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .about-v193__intro h2 { margin: .55rem 0 0; color: #fff; font-size: clamp(1.65rem,4vw,3rem); line-height: 1.1; font-weight: 900; text-wrap: balance; }
  .about-v193__intro p { margin: .8rem 0 0; color: #9FB0C1; line-height: 1.7; }
  .about-v193__directors { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,26rem),1fr)); gap: clamp(1rem,2.4vw,1.5rem); align-items: stretch; }
  .about-v193__card { min-width: 0; display: grid; align-content: start; gap: 1.2rem; padding: clamp(1.15rem,3vw,1.8rem); border: 1px solid rgba(255,255,255,.1); border-radius: 1.35rem; background: linear-gradient(145deg,rgba(15,41,74,.9),rgba(4,17,32,.96)); box-shadow: 0 26px 60px -44px #000; }
  .about-v193__card--cefein { border-color: rgba(197,168,90,.3); }
  .about-v193__card--mmpj { border-color: rgba(56,189,248,.24); }
  .about-v193__card-head { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1rem; align-items: center; min-width: 0; }
  .about-v193__avatar { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 1rem; color: #020C1B; background: linear-gradient(145deg,#F3D77B,#A3843B); font-weight: 950; letter-spacing: .04em; }
  .about-v193__card-head p { margin: 0; color: #E7C76A; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .about-v193__card-head h3 { margin: .22rem 0 0; color: #fff; font-size: clamp(1.15rem,2.4vw,1.55rem); line-height: 1.2; font-weight: 900; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .about-v193__card-head strong { display: block; margin-top: .26rem; color: #B8C6D4; font-size: .75rem; line-height: 1.4; }
  .about-v193__card-content { display: grid; gap: .75rem; }
  .about-v193__card-content p, .about-v193__studies li, .about-v193__profile-list dd { color: #B8C6D4; font-size: .84rem; line-height: 1.65; }
  .about-v193__card-content p { margin: 0; }
  .about-v193__card blockquote { margin: 0; padding: 1rem; border-left: .2rem solid #C5A85A; border-radius: 0 .8rem .8rem 0; color: #F8FAFC; background: rgba(197,168,90,.08); font-size: .88rem; line-height: 1.6; font-style: italic; }
  .about-v193__profile-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap: .65rem; margin: 0; }
  .about-v193__profile-list > div { min-width: 0; padding: .8rem; border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; background: rgba(255,255,255,.035); }
  .about-v193__profile-list dt { color: #8294A6; font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .about-v193__profile-list dd { margin: .28rem 0 0; color: #fff; font-weight: 750; }
  .about-v193__studies h4 { margin: 0 0 .7rem; color: #fff; font-size: .9rem; font-weight: 900; }
  .about-v193__studies ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
  .about-v193__studies li { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); gap: .55rem; align-items: start; }
  .about-v193__studies i { color: #E7C76A; margin-top: .2rem; }

  /* PAGOS */
  .payment-v193 { width: 100%; border: 1px solid rgba(197,168,90,.24); border-radius: 1rem; background: rgba(2,12,27,.42); overflow: clip; }
  .payment-v193 summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .95rem 1rem; color: #fff; cursor: pointer; font-size: .82rem; font-weight: 900; list-style: none; }
  .payment-v193 summary::-webkit-details-marker { display: none; }
  .payment-v193 summary span { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
  .payment-v193 summary span i { color: #E7C76A; }
  .payment-v193[open] summary > i { transform: rotate(180deg); }
  .payment-v193__content { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
  .payment-v193__step { display: grid; grid-template-columns: 2.35rem minmax(0,1fr); gap: .75rem; align-items: start; }
  .payment-v193__step-number { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem; color: #020C1B; background: #C5A85A; font-weight: 950; }
  .payment-v193__step h3 { margin: 0; color: #fff; font-size: .88rem; font-weight: 900; }
  .payment-v193__step p { margin: .22rem 0 0; color: #9FB0C1; font-size: .72rem; line-height: 1.5; }
  .payment-v193__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap: .65rem; }
  .payment-v193__method { min-width: 0; display: grid; gap: .3rem; padding: .8rem; border: 1px solid rgba(255,255,255,.09); border-radius: .85rem; background: rgba(255,255,255,.04); }
  .payment-v193__method > span { display: inline-flex; align-items: center; gap: .45rem; color: #B8C6D4; font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
  .payment-v193__method > span i { color: #E7C76A; }
  .payment-v193__method strong, .payment-v193__method small { overflow-wrap: anywhere; }
  .payment-v193__method strong { color: #fff; font-size: .76rem; line-height: 1.4; }
  .payment-v193__method small { color: #8FA1B3; font-size: .65rem; line-height: 1.4; }
  
  .payment-v193__contacts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
  .payment-v193__contacts a { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem; border-radius: .8rem;    font-size: .72rem; font-weight: 850; text-align: center; }

  /* RECLAMOS */
  .contact-claims-note { display: grid; grid-template-columns: 2.75rem minmax(0,1fr); gap: .8rem; align-items: start; padding: .95rem 1rem;  border-radius: 1rem;  }
  .contact-claims-note[hidden] { display: none !important; }
  .contact-claims-note__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; color: #FDA4AF; background: rgba(244,63,94,.12); border: 1px solid rgba(253,164,175,.28); }
  .contact-claims-note strong { display: block; color: #0F294A; font-size: .9rem; font-weight: 900; }
  .dark .contact-claims-note strong { color: #fff; }
  .contact-claims-note p { margin: .24rem 0 0; color: #64748B; font-size: .76rem; line-height: 1.55; }
  .dark .contact-claims-note p { color: #B8C6D4; }

  @media (min-width: 900px) {
    .about-v193__hero-grid { grid-template-columns: minmax(0,1.25fr) minmax(18rem,.75fr); }
  }
  @media (max-width: 520px) {
    .about-v193__card-head { grid-template-columns: 3.35rem minmax(0,1fr); gap: .8rem; }
    .about-v193__avatar { width: 3.35rem; height: 3.35rem; border-radius: .85rem; }
    .payment-v193__contacts { grid-template-columns: minmax(0,1fr); }
    .contact-claims-note { grid-template-columns: 2.4rem minmax(0,1fr); }
    .contact-claims-note__icon { width: 2.4rem; height: 2.4rem; }
  }


/* =========================================================
   CONTACTO EN PORTADA · COMPONENTE RESPONSIVO
   ========================================================= */
.home-contact-v195 {
  position: relative;
  isolation: isolate;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-top: 1px solid rgba(197,168,90,.14);
  background:
    radial-gradient(circle at 12% 10%, rgba(56,189,248,.12), transparent 24rem),
    radial-gradient(circle at 90% 90%, rgba(197,168,90,.13), transparent 22rem),
    #071522;
  color: #F8FAFC;
}

.home-contact-v195__inner {
  width: min(100%, 78rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: clamp(1.1rem, 2vw, 1.5rem);
  background: linear-gradient(145deg, rgba(15,41,74,.82), rgba(4,17,32,.94));
  box-shadow: 0 30px 68px -52px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.045);
}

.home-contact-v195__copy {
  min-width: 0;
}

.home-contact-v195__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #D7BA70;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-contact-v195__copy h2 {
  margin: .45rem 0 0;
  color: #FFFFFF;
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.025em;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.home-contact-v195__copy p {
  margin: .7rem 0 0;
  max-width: 58ch;
  color: #B8C7D5;
  font-size: clamp(.84rem, 1.3vw, .98rem);
  line-height: 1.65;
}

.home-contact-v195__channels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
  min-width: 0;
}

.home-contact-v195__channel {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
  min-width: 0;
  padding: .8rem .9rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem;
  background: rgba(255,255,255,.045);
  color: #F8FAFC;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.home-contact-v195__channel > span {
  display: grid;
  place-items: center;
  width: 2.65rem;
  min-width: 2.65rem;
  aspect-ratio: 1;
  border-radius: .78rem;
  background: rgba(197,168,90,.12);
  color: #E3CA87;
}

.home-contact-v195__channel--whatsapp > span {
  background: rgba(34,197,94,.13);
  color: #86EFAC;
}

.home-contact-v195__channel div {
  min-width: 0;
}

.home-contact-v195__channel small,
.home-contact-v195__channel strong {
  display: block;
  min-width: 0;
}

.home-contact-v195__channel small {
  color: #8FA1B3;
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-contact-v195__channel strong {
  margin-top: .12rem;
  color: #FFFFFF;
  font-size: clamp(.82rem, 1.3vw, .94rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.home-contact-v195__channel:hover,
.home-contact-v195__channel:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(197,168,90,.38);
  background: rgba(197,168,90,.075);
  outline: none;
}

.home-contact-v195__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 3rem;
  padding: .78rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .9rem;
  background: #C5A85A;
  color: #071522;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.home-contact-v195__button:hover,
.home-contact-v195__button:focus-visible {
  transform: translateY(-1px);
  background: #E0C878;
  box-shadow: 0 18px 34px -24px rgba(197,168,90,.85);
  outline: none;
}

@media (min-width: 640px) {
  .home-contact-v195__channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-contact-v195__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(28rem, .95fr);
  }

  .home-contact-v195__copy {
    grid-row: 1 / span 2;
  }

  .home-contact-v195__channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-contact-v195__button {
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    padding-inline: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-contact-v195__channel,
  .home-contact-v195__button {
    transition: none;
  }
}
.classroom-session-info {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .classroom-session-info strong {
    display: block !important;
    width: 100% !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }



  .institutional-v196 {
    --institutional-bg: #020c1b;
    --institutional-card: #0b223b;
    --institutional-line: rgba(148,163,184,.2);
    --institutional-text: #f8fafc;
    --institutional-muted: #b8c6d4;
    --institutional-gold: #c5a85a;
    color: var(--institutional-text);
    background: var(--institutional-bg);
  }

  .institutional-v196__container {
    width: min(calc(100% - clamp(2rem, 7vw, 6rem)), 78rem);
    margin-inline: auto;
    min-width: 0;
  }

  .institutional-v196__hero {
    padding-block: clamp(2.8rem, 8vw, 5.4rem);
    background:
      radial-gradient(circle at 82% 12%, rgba(56,189,248,.13), transparent 24rem),
      radial-gradient(circle at 12% 0%, rgba(197,168,90,.13), transparent 22rem),
      linear-gradient(145deg, #0f294a, #020c1b 72%);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .institutional-v196__hero-inner {
    display: grid;
    justify-items: center;
    gap: .9rem;
    text-align: center;
  }

  .institutional-v196__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    padding: .58rem .82rem;
    border: 1px solid rgba(197,168,90,.32);
    border-radius: 999px;
    background: rgba(197,168,90,.1);
    color: #e4c978;
    font-size: clamp(.68rem, 1.4vw, .78rem);
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .institutional-v196__hero h1 {
    width: min(100%, 58rem);
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 6vw, 4.25rem) !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
    line-height: 1.03 !important;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
  }

  .institutional-v196__hero p {
    width: min(100%, 48rem);
    margin: 0;
    color: #c2cfdb;
    font-size: clamp(.9rem, 1.8vw, 1.05rem);
    line-height: 1.7;
  }

  .institutional-v196__body {
    padding-block: clamp(2rem, 6vw, 5rem);
  }

  .institutional-v196__grid,
  .institutional-v196__highlight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 1.6rem);
  }

  .institutional-v196__card,
  .institutional-v196__highlight {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--institutional-line);
    border-radius: clamp(1rem, 2vw, 1.35rem);
    background: linear-gradient(155deg, rgba(15,41,74,.92), rgba(4,17,32,.98));
    box-shadow: 0 28px 64px -46px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.04);
  }

  .institutional-v196__card {
    display: flex;
    flex-direction: column;
  }

  .institutional-v196__media {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #071526;
  }

  .institutional-v196__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(2,12,27,.8));
    pointer-events: none;
  }

  .institutional-v196__media img,
  .institutional-v196__highlight-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 900ms cubic-bezier(.22,1,.36,1), filter 900ms ease;
  }

  .institutional-v196__media--logo img,
  .institutional-v196__media--poster img {
    object-fit: contain;
    background: #071526;
  }

  .institutional-v196__media figcaption {
    position: absolute;
    z-index: 2;
    left: .8rem;
    bottom: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: calc(100% - 1.6rem);
    padding: .48rem .65rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .68rem;
    background: rgba(2,12,27,.76);
    color: #fff;
    font-size: .66rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
  }

  .institutional-v196__content {
    display: grid;
    align-content: start;
    gap: .65rem;
    flex: 1;
    padding: clamp(1rem, 3vw, 1.45rem);
  }

  .institutional-v196__kicker,
  .institutional-v196__section-heading span {
    margin: 0;
    color: #d9bd70;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .institutional-v196__content h2,
  .institutional-v196__highlight h3,
  .institutional-v196__section-heading h2 {
    margin: 0;
    color: #fff;
    font-weight: 900 !important;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
  }

  .institutional-v196__content h2 {
    font-size: clamp(1.15rem, 3vw, 1.55rem) !important;
    line-height: 1.18 !important;
  }

  .institutional-v196__content > p:last-child,
  .institutional-v196__highlight p {
    margin: 0;
    color: var(--institutional-muted);
    font-size: clamp(.82rem, 1.5vw, .92rem);
    line-height: 1.65;
  }

  .institutional-v196__highlights {
    margin-top: clamp(2.4rem, 6vw, 4.5rem);
    padding-top: clamp(1.8rem, 4vw, 3rem);
    border-top: 1px solid rgba(255,255,255,.09);
  }

  .institutional-v196__section-heading {
    display: grid;
    gap: .4rem;
    margin-bottom: clamp(1rem, 3vw, 1.6rem);
  }

  .institutional-v196__section-heading h2 {
    font-size: clamp(1.55rem, 4.5vw, 2.6rem) !important;
    line-height: 1.08 !important;
  }

  .institutional-v196__highlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .institutional-v196__highlight-media {
    min-width: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #071526;
  }

  .institutional-v196__highlight figcaption {
    display: grid;
    align-content: center;
    gap: .55rem;
    padding: clamp(1rem, 3vw, 1.5rem);
  }

  .institutional-v196__highlight figcaption > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    max-width: 100%;
    color: #e1c778;
    font-size: .68rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .institutional-v196__highlight h3 {
    font-size: clamp(1.15rem, 3vw, 1.5rem) !important;
    line-height: 1.18 !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .institutional-v196__card:hover img,
    .institutional-v196__highlight:hover img {
      transform: scale(1.035);
      filter: saturate(1.06) contrast(1.02);
    }
  }

  @media (min-width: 700px) {
    .institutional-v196__grid,
    .institutional-v196__highlight-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 980px) {
    .institutional-v196__highlight {
      grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr);
    }

    .institutional-v196__highlight-media {
      aspect-ratio: auto;
      min-height: 17rem;
    }
  }

  @media (max-width: 479px) {
    .institutional-v196__container {
      width: min(calc(100% - 1.5rem), 78rem);
    }

    .institutional-v196__hero-inner {
      justify-items: start;
      text-align: left;
    }

    .institutional-v196__hero h1 {
      font-size: clamp(1.9rem, 10vw, 2.65rem) !important;
      text-align: left !important;
    }

    .institutional-v196__media figcaption {
      font-size: .6rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .institutional-v196 img {
      transition: none !important;
    }
  }


/* =========================================================
   CEFEIN MPA · capa técnica no visual
   Conserva el diseño original y muestra solo la sección del documento.
   ========================================================= */
html, body {
  min-height: 100%;
  background-color: #020C1B;
}
.mpa-page.view-section {
  display: block !important;
  width: 100%;
  min-width: 0;
  opacity: 1 !important;
  transform: none !important;
}
html.cefein-js-ready .mpa-page.view-section {
  visibility: visible;
}
#site-header .nav-link,
#site-header .mobile-nav-link,
#site-footer a {
  -webkit-tap-highlight-color: transparent;
}