/* ====== NAV PRINCIPAL (LIZONEX) ====== */
    .main-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding: 12px 14px;
    pointer-events: none; /* para que solo el contenido interno capture clicks */
    }

    .nav-wrap{
    pointer-events: auto;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid rgba(148,163,184,0.22);
    background: rgba(2,6,23,0.62);
    backdrop-filter: blur(12px);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    box-shadow: 0 18px 55px rgba(2,6,23,0.55);
    position: relative;
    overflow: hidden;
    }

    .nav-wrap::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(circle at 20% 10%, rgba(34,197,94,0.20), transparent 55%),
        radial-gradient(circle at 80% 40%, rgba(239,68,68,0.14), transparent 60%);
    filter: blur(26px);
    opacity: 0.75;
    pointer-events:none;
    }

    .nav-brand{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    }

    .nav-brand-mark{
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--score-gradient);
    box-shadow: 0 0 0 5px rgba(34,197,94,0.16);
    }

    .nav-brand-text{
    font-weight: 900;
    letter-spacing: 0.18em;
    font-size: 0.82rem;
    text-transform: uppercase;
    color: rgba(229,231,235,0.95);
    }

    .nav-links{
    display: flex;
    align-items: center;
    gap: 10px;
    }

    .nav-link{
    font-size: 0.88rem;
    color: rgba(229,231,235,0.86);
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
    opacity: 0.92;
    }

    .nav-link:hover{
    opacity: 1;
    transform: translateY(-1px);
    background: rgba(15,23,42,0.55);
    border-color: rgba(148,163,184,0.22);
    }

    .nav-actions{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    }

    .nav-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(34,197,94,0.35);
    background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(15,23,42,0.62));
    color: rgba(229,231,235,0.95);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    transition: transform .25s ease, filter .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .nav-cta:hover{
    transform: translateY(-1px);
    filter: brightness(1.06);
    border-color: rgba(34,197,94,0.70);
    box-shadow: 0 18px 45px rgba(2,6,23,0.6);
    }

    /* Hamburguesa */
    .nav-burger{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.22);
    background: rgba(15,23,42,0.62);
    cursor: pointer;
    display: none;
    position: relative;
    transition: transform .25s ease, border-color .25s ease, filter .25s ease;
    }

    .nav-burger:hover{
    transform: translateY(-1px);
    border-color: rgba(34,197,94,0.55);
    filter: brightness(1.06);
    }

    .nav-burger span{
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    background: rgba(229,231,235,0.92);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: transform .25s ease, opacity .25s ease, top .25s ease;
    }

    .nav-burger span:nth-child(1){ top: 14px; }
    .nav-burger span:nth-child(2){ top: 21px; }
    .nav-burger span:nth-child(3){ top: 28px; }

    /* Panel móvil */
    .nav-mobile{
    pointer-events: auto;
    max-width: 1200px;
    margin: 10px auto 0;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,0.22);
    background: rgba(2,6,23,0.78);
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 70px rgba(2,6,23,0.6);

    display: none;
    transform-origin: top;
    overflow: hidden;
    }

    .nav-m-link{
    display: block;
    padding: 12px 12px;
    border-radius: 14px;
    color: rgba(229,231,235,0.90);
    border: 1px solid transparent;
    background: rgba(15,23,42,0.40);
    margin-bottom: 8px;
    transition: transform .2s ease, border-color .2s ease, filter .2s ease;
    }

    .nav-m-link:hover{
    transform: translateY(-1px);
    border-color: rgba(34,197,94,0.45);
    filter: brightness(1.06);
    }

    .nav-m-cta{
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 12px 14px;
    border-radius: 999px;
    border: 1px solid rgba(34,197,94,0.35);
    background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(15,23,42,0.62));
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    }

    /* Responsive: en móvil ocultamos links y mostramos burger */
    @media (max-width: 900px){
    .nav-links{ display: none; }
    .nav-burger{ display: inline-flex; }
    .nav-cta{ display: none; } /* opcional: puedes dejarlo si quieres */
    }


    /* ================================
    LOGO EN MENÚ PRINCIPAL
    ================================ */

    .nav-brand{
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    transition: transform 0.25s ease, filter 0.25s ease;
    }

    .nav-brand:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
    }

    /* Logo principal */
    .nav-logo{
    height: 32px;           /* Tamaño ideal desktop */
    width: auto;
    display: block;
    object-fit: contain;
    }

    /* Ajuste móvil */
    @media (max-width: 640px){
    .nav-logo{
        height: 28px;
    }
    }

    
    
    
    
    :root {
  --bg-body: #050816;
  --bg-card: #0b1020;
  --bg-card-soft: #0f172a;
  --accent: #22c55e;
  --accent-strong: #16a34a;
  --accent-soft: rgba(34, 197, 94, 0.20);
  --score-red: #ef4444;
  --score-yellow: #facc15;
  --score-green: #22c55e;
  --score-red-soft: rgba(239, 68, 68, 0.22);
  --score-yellow-soft: rgba(250, 204, 21, 0.20);
  --score-green-soft: rgba(34, 197, 94, 0.22);
  --score-gradient: linear-gradient(135deg, var(--score-red), var(--score-yellow), var(--score-green));
  --score-gradient-right: linear-gradient(to right, var(--score-red), var(--score-yellow), var(--score-green));
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --border-soft: rgba(148, 163, 184, 0.25);
  --radius-xl: 1.5rem;
  --shadow-soft: 0 24px 60px rgba(15, 23, 42, 0.8);
  --transition-fast: 0.25s ease;
}

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* === FIX OVERFLOW HORIZONTAL / RESPONSIVE GLOBAL === */
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }


    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
      background: #020617;
      color: var(--text-main);
      min-height: 100vh;
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }

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

    .page {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1.25rem 3rem;
    }

    /* PORTADA FULL HERO CON IMAGEN PROFESIONAL */
    .top-cover {
      position: relative;
      width: 100%;
      /*min-height: 80vh;*/              /* Portada alta solo en la parte superior */
      min-height: 110vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 1.5rem 4.5rem;
      margin: 0;
      overflow: hidden;
      background: #020617;           /* Fondo base oscuro */
    }



    /* Degradado de transición entre la portada y el contenido (versión más fuerte) */
    .top-cover::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;

      /* Puedes subir o bajar la altura si lo quieres más grande */
      height: 180px;

      background: linear-gradient(
        to bottom,
        rgba(2, 6, 23, 0) 0%,
        rgba(2, 6, 23, 0.75) 40%,
        rgba(2, 6, 23, 0.92) 70%,
        #020617 100%
      );

      z-index: 3;
      pointer-events: none;
    }

    .top-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(2, 6, 23, 0.25),
        rgba(2, 6, 23, 0.9)
      );
      z-index: 1;  /* Encima de la imagen, debajo del contenido y efectos */
    }

    /* Aros de luz difuminados */
    .top-orbits {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }

    .top-orbits::before,
    .top-orbits::after {
        content: "";
        position: absolute;
        border-radius: 999px;

        /* Borde ligeramente más suave (20% menos) */
        border: 2px solid rgba(250,204,21,0.60);

        /* Glow ajustado al 80% de la intensidad anterior */
        box-shadow:
            0 0 18px rgba(250,204,21,0.80),
            0 0 48px rgba(34,197,94,0.68),
            0 0 72px rgba(239,68,68,0.45),
            0 0 95px rgba(239,68,68,0.33);

        filter: blur(0.4px);

        opacity: 0.70; /* antes 0.85 → solo 20% menos */

        animation: orbitRotate 26s linear infinite;
    }


    .top-orbits::before {
      width: 460px;
      height: 460px;
      top: -100px;
      left: -140px;
    }

    .top-orbits::after {
      width: 360px;
      height: 360px;
      bottom: -120px;
      right: -110px;
      animation-duration: 34s;
      animation-direction: reverse;
    }

    @keyframes orbitRotate {
      0%   { transform: rotate(0deg); }
      50%  { transform: rotate(180deg); }
      100% { transform: rotate(360deg); }
    }


      @media (max-width: 640px) {
      /* ORBITS más pequeñas en móvil */
      .top-orbits::before {
        width: 200px;   /* antes 460px */
        height: 200px;
        top: -80px;
        left: -90px;
      }

      .top-orbits::after {
        width: 200px;   /* antes 360px */
        height: 200px;
        bottom: -90px;
        right: -70px;
      }
    }


    /* Partículas de fondo */
    .top-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
    }

    .top-particles span {
        position: absolute;
        display: block;
        width: 6px;                /* antes 4px → un poco más grandes */
        height: 6px;
        border-radius: 999px;

        /* COLORES MÁS CLAROS Y BRILLANTES */
        background: radial-gradient(circle at center, #fde047, #22c55e);

        /* MÁS GLOW / MÁS INTENSIDAD */
        box-shadow:
            0 0 12px rgba(250,204,21,0.90),
            0 0 30px rgba(34,197,94,0.75),
            0 0 50px rgba(239,68,68,0.45);

        opacity: 0;
        animation: floatParticle 12s linear infinite;
    }


    .top-particles span:nth-child(1) { top: 12%; left: 18%; animation-delay: 0s; }
    .top-particles span:nth-child(2) { top: 25%; left: 78%; animation-delay: 2s; }
    .top-particles span:nth-child(3) { top: 38%; left: 44%; animation-delay: 4s; }
    .top-particles span:nth-child(4) { top: 58%; left: 16%; animation-delay: 6s; }
    .top-particles span:nth-child(5) { top: 68%; left: 84%; animation-delay: 8s; }
    .top-particles span:nth-child(6) { top: 78%; left: 53%; animation-delay: 10s; }
    .top-particles span:nth-child(7) { top: 18%; left: 88%; animation-delay: 3s; }
    .top-particles span:nth-child(8) { top: 47%; left: 8%;  animation-delay: 5s; }
    .top-particles span:nth-child(9) { top: 63%; left: 33%; animation-delay: 7s; }
    .top-particles span:nth-child(10){ top: 32%; left: 57%; animation-delay: 9s; }

    @keyframes floatParticle {
      0% {
        transform: translateY(12px) scale(0.6);
        opacity: 0;
      }
      15% {
        opacity: 1;
      }
      50% {
        transform: translateY(-24px) scale(1);
        opacity: 0.9;
      }
      85% {
        opacity: 0;
      }
      100% {
        transform: translateY(-46px) scale(0.7);
        opacity: 0;
      }
    }

    .top-cover-inner {
      position: relative;
      z-index: 5;
      max-width: 1120px;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: center;
    }

    .top-cover-text {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 70vh;
    }

    .top-cover-label {
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: #9ca3af;
      opacity: 0.9;
    }

    .top-cover-title {
      font-size: clamp(2.4rem, 4.5vw, 3.4rem);
      font-weight: 700;
      letter-spacing: -0.07em;
      color: #e5e7eb;
      text-align: justify;
    }

    .top-cover-title span {
      background: var(--score-gradient-right);
      -webkit-background-clip: text;
      color: transparent;
    }

    .top-cover-subtitle {
      font-size: 1.50rem;
      color: #9ca3af;
      max-width: 540px;
      line-height: 1.7;
      text-align: justify;
    }

    .top-cover-actions {
      margin-top: 0.5rem;
      display: flex;
      /*flex-wrap: wrap;*/
      flex-wrap: nowrap;
      /*gap: 0.75rem;*/
      gap: 0.75rem;
      align-items: center;
    }

      .top-cover-btn-whatsapp {
      padding: 0.9rem 1.4rem;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;

      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: #ffffff;
      font-size: 0.92rem;
      font-weight: 600;
      text-transform: uppercase;

      border: 1px solid rgba(34, 197, 94, 0.7);
      cursor: pointer;
      transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
      text-decoration: none;
    }

    .top-cover-btn-whatsapp:hover {
      transform: translateY(-2px);
      filter: brightness(1.07);
      box-shadow: 0 18px 45px rgba(22, 163, 74, 0.6);
    }


    /* BOTÓN PORTADA (TOP) – contraste + texto más blanco */
    .top-cover-btn{
      padding: 0.9rem 1.8rem;
      border-radius: 999px;

      position: relative;
      overflow: hidden;
      isolation: isolate;

      border: 1px solid rgba(148,163,184,0.18);
      background: var(--score-gradient);

      /* oscurece el degradado SIN cambiar los colores (mejor contraste) */
      box-shadow:
        0 18px 45px rgba(2, 6, 23, 0.85),
        inset 0 0 0 999px rgba(2, 6, 23, 0.35);


      color: #ffffff !important;
      text-shadow:
        0 1px 0 rgba(2, 6, 23, 0.55),
        0 10px 25px rgba(2, 6, 23, 0.35);

      -webkit-font-smoothing: antialiased;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;

      transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    }

    /* halo difuminado para que el texto resalte más sin cambiar paleta */
    .top-cover-btn::before{
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 30% 30%, rgba(34,197,94,0.35), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(239,68,68,0.28), transparent 60%);
      opacity: 0.35;
      filter: blur(18px);
      z-index: -1;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .top-cover-btn:hover{
      transform: translateY(-2px);
      filter: brightness(1.06);
      box-shadow:
        0 18px 45px rgba(2, 6, 23, 0.85),
        inset 0 0 0 999px rgba(2, 6, 23, 0.35);

    }

    .top-cover-btn:hover::before{ opacity: 0.55; }



    .top-cover-btn-secondary {
      padding: 0.9rem 1.4rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
      background: rgba(15, 23, 42, 0.9);
      color: #e5e7eb;
      font-size: 0.9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .top-cover-btn-secondary:hover {
      background: rgba(15, 23, 42, 1);
      border-color: rgba(148, 163, 184, 0.95);
      transform: translateY(-1px);
    }

    .top-cover-metrics {
      margin-top: 1.4rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      font-size: 0.8rem;
      color: #9ca3af;
    }

    .metric-label {
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.7rem;
      opacity: 0.85;
    }

    .metric-value {
      display: block;
      margin-top: 0.15rem;
      font-size: 0.98rem;
      color: #e5e7eb;
    }

    .top-cover-image-card {
      display: flex;
      justify-content: flex-end;
    }

    .top-cover-image-inner {
      position: relative;
      width: 100%;
      max-width: 360px;
      border-radius: 1.7rem;
      padding: 0.9rem;
      background: radial-gradient(circle at top left, #111827, #020617 60%, #020617 100%);
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.95);
      overflow: hidden;
      isolation: isolate;
    }

    /* brillo dinámico detrás de la imagen */
    .top-cover-image-inner::before {
      content: "";
      position: absolute;
      inset: -25%;
      background:
        radial-gradient(circle at 30% 20%, rgba(34,197,94,0.45), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(239,68,68,0.4), transparent 60%);
      opacity: 0.55;
      filter: blur(22px);
      z-index: -1;
      animation: glowPulse 10s ease-in-out infinite alternate;
    }

    @keyframes glowPulse {
      0% {
        transform: scale(0.95) translate3d(-6px, 4px, 0);
        opacity: 0.45;
      }
      50% {
        transform: scale(1.02) translate3d(0, 0, 0);
        opacity: 0.7;
      }
      100% {
        transform: scale(1.07) translate3d(6px, -4px, 0);
        opacity: 0.5;
      }
    }

    .top-cover-image {
      width: 100%;
      border-radius: 1.3rem;
      object-fit: cover;
      display: block;
      filter: saturate(1.05) contrast(1.02);
    }

    .top-cover-badge {
      position: absolute;
      top: 1.1rem;
      left: 1.2rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(59, 130, 246, 0.7);
      backdrop-filter: blur(10px);
    }

    .badge-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.45);
    }

    .badge-title {
      font-size: 0.76rem;
      color: #e5e7eb;
      font-weight: 500;
    }

    .badge-sub {
      font-size: 0.7rem;
      color: #9ca3af;
    }

    .top-cover-tag {
      position: absolute;
      bottom: 1.1rem;
      left: 50%;
      transform: translateX(-50%);
      padding: 0.45rem 0.9rem;
      border-radius: 999px;
      font-size: 0.75rem;
      color: #e5e7eb;
      background: rgba(15, 23, 42, 0.96);
      border: 1px solid rgba(148, 163, 184, 0.7);
      backdrop-filter: blur(10px);
    }

    /* Secciones generales */
    /* =========================================
    SECTION TITLES – MÁS GRANDES Y NOTABLES
    (Pégalo al final del <style>)
    ========================================= */

    /* Opcional: crea más separación visual entre secciones */
    section{
    margin-top: clamp(3.2rem, 5vw, 4.6rem);
    }

    /* Contenedor del header más "marcado" */
    .section-header{
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(148,163,184,0.18);
    position: relative;
    }

    /* Glow suave detrás del header */
    .section-header::before{
    content:"";
    position:absolute;
    inset: -22px -14px -12px -14px;
    background:
        radial-gradient(650px 220px at 18% 30%, rgba(34,197,94,0.18), transparent 60%),
        radial-gradient(600px 220px at 82% 25%, rgba(239,68,68,0.14), transparent 58%);
    opacity: .9;
    pointer-events:none;
    filter: blur(0.2px);
    }

    /* TÍTULO: aquí está el cambio fuerte */
    .section-title{
    position: relative;
    width: fit-content;
    font-size: clamp(2.05rem, 3.2vw, 2.75rem);   /* MÁS GRANDE */
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    padding: 0.35rem 1.05rem 0.55rem;
    border-radius: 999px;

    /* “placa” elegante */
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(148,163,184,0.22);
    box-shadow:
        0 18px 55px rgba(2,6,23,0.45),
        0 0 0 1px rgba(34,197,94,0.08) inset;

    backdrop-filter: blur(10px);
    }

    /* Borde degradado suave (premium) */
    .section-title::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius: 999px;
    padding: 2px;
    background: linear-gradient(90deg, rgba(239,68,68,0.95), rgba(250,204,21,0.95), rgba(34,197,94,0.95));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.9;
    pointer-events:none;
    }

    /* Línea degradada debajo (para que “corte” la sección) */
    .section-title::after{
    content:"";
    position:absolute;
    left: 12px;
    bottom: -14px;
    width: min(220px, 82%);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(239,68,68,0.95), rgba(250,204,21,0.95), rgba(34,197,94,0.95));
    opacity: 0.9;
    box-shadow:
        0 10px 28px rgba(34,197,94,0.18),
        0 10px 28px rgba(239,68,68,0.12);
    }

    /* Subtítulo un poco más grande para acompañar */
    .section-subtitle{
    font-size: 0.98rem;
    max-width: 560px;
    color: rgba(156,163,175,0.95);
    text-align: justify;
    }

    /* Responsive para móvil (no exagera pero sigue siendo notable) */
    @media (max-width: 640px){
    .section-title{
        font-size: 1.85rem;
        /*padding: 0.32rem 0.9rem 0.52rem;*/
        padding: 0.35rem 1.05rem 0.55rem;
    }
    .section-title::after{
        bottom: -12px;
        height: 3px;
        width: min(190px, 86%);
    }
    }

    .section-title{
    margin-bottom: 1.6rem;
    }

    .section-subtitle{
    margin-top: 0.7rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(148,163,184,0.18);
    font-size: 1rem;
    line-height: 1.7;
    }



    /* Hero secundario (debajo de la portada) */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 2rem;
      margin-top: 3rem;
      align-items: center;
    }

    .hero-text {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(148, 163, 184, 0.4);
      font-size: 0.75rem;
      color: var(--text-muted);
      width: fit-content;
    }

    .hero-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: radial-gradient(circle at center, #4ade80, #22c55e);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.35);
    }

    .hero-title {
      font-size: clamp(2.1rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .hero-title span {
      background: var(--score-gradient-right);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 0.98rem;
      color: var(--text-muted);
      max-width: 560px;
      text-align: justify;
    }

    .hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 0.5rem;
    }

    .btn-primary {
      padding: 0.9rem 1.8rem;
      border-radius: 999px;

      position: relative;
      overflow: hidden;
      isolation: isolate;

      border: 1px solid rgba(148,163,184,0.18);
      background: var(--score-gradient);

      /* oscurece el degradado SIN cambiar los colores (mejor contraste) */
      box-shadow:
        0 18px 45px rgba(2, 6, 23, 0.85),
        inset 0 0 0 999px rgba(2, 6, 23, 0.35);


      color: #ffffff !important;
      text-shadow:
        0 1px 0 rgba(2, 6, 23, 0.55),
        0 10px 25px rgba(2, 6, 23, 0.35);

      -webkit-font-smoothing: antialiased;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;

      transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    }

    /* halo difuminado para que el texto resalte más sin cambiar paleta */
    .btn-primary::before{
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 30% 30%, rgba(34,197,94,0.35), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(239,68,68,0.28), transparent 60%);
      opacity: 0.35;
      filter: blur(18px);
      z-index: -1;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.06);
      box-shadow:
        0 18px 45px rgba(2, 6, 23, 0.85),
        inset 0 0 0 999px rgba(2, 6, 23, 0.35);
    }

    .btn-primary:hover::before{ opacity: 0.55; }

    /* =========================================
    BTN PRIMARY – RESPONSIVE MOBILE
    ========================================= */

    @media (max-width: 768px){
    .btn-primary{
        width: 100%;              /* ocupa el ancho disponible */
        justify-content: center;
        padding: 0.85rem 1.3rem;  /* un poco más compacto */
        font-size: 0.9rem;
        letter-spacing: 0.04em;
    }
    }

    @media (max-width: 480px){
    .btn-primary{
        padding: 0.8rem 1.2rem;
        font-size: 0.88rem;
    }
    }


    .btn-ghost {
      padding: 0.85rem 1.4rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.7);
      font-size: 0.9rem;
      color: var(--text-main);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: background var(--transition-fast), border-color var(--transition-fast),
        transform var(--transition-fast);
    }

    .btn-ghost:hover {
      background: rgba(15, 23, 42, 1);
      border-color: rgba(148, 163, 184, 0.95);
      transform: translateY(-1px);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      margin-top: 1.25rem;
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .hero-meta-item {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .hero-meta-label {
      text-transform: uppercase;
      letter-spacing: 0.09em;
      font-size: 0.7rem;
      opacity: 0.8;
    }

    .hero-meta-value {
      font-size: 0.9rem;
      color: var(--text-main);
    }

    .hero-media {
      position: relative;
    }

    .hero-card {
      border-radius: var(--radius-xl);
      background: radial-gradient(circle at top left, #111827, #020617 60%, #020617 100%);
      padding: 1rem;
      border: 1px solid rgba(148, 163, 184, 0.32);
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .hero-video {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
      border: 1px solid rgba(148, 163, 184, 0.45);
      background: #020617;
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
    }

    .hero-video-play {
      position: absolute;
      z-index: 10;
      width: 68px;
      height: 68px;
      border-radius: 999px;
      background: radial-gradient(circle at top, #f97316, #ea580c);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      border: 3px solid rgba(248, 250, 252, 0.9);
      box-shadow: 0 20px 45px rgba(251, 146, 60, 0.95);
      cursor: pointer;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        filter var(--transition-fast);
    }

    .hero-video-play:hover {
      transform: scale(1.05) translateY(-1px);
      box-shadow: 0 26px 60px rgba(251, 146, 60, 1);
      filter: brightness(1.05);
    }

    .hero-card-footer {
      margin-top: 0.9rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.75rem;
    }

    .hero-label-pill {
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.6);
    }

    .hero-stats {
      display: flex;
      gap: 0.9rem;
      color: var(--text-muted);
    }

    .hero-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
    }

    /* SOBRE EL CURSO */
    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 2rem;
    }

    .about-card {
      background: rgba(15, 23, 42, 0.9);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border-soft);
      padding: 1.5rem;
      box-shadow: var(--shadow-soft);
      text-align: justify;
    }

    .about-list {
      margin-top: 1rem;
      list-style: none;
      display: grid;
      gap: 0.6rem;
      font-size: 0.9rem;
    }

    .about-item {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
    }

    .about-bullet {
      margin-top: 0.2rem;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: var(--accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: var(--accent);
      flex-shrink: 0;
    }

    .about-tag-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .about-tag {
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.5);
      background: rgba(15, 23, 42, 0.8);
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .about-highlight-card {
      background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), #020617);
      border-radius: var(--radius-xl);
      border: 1px solid rgba(37, 99, 235, 0.8);
      padding: 1.4rem;
      box-shadow: 0 18px 40px rgba(37, 99, 235, 0.7);
      font-size: 0.85rem;
    }

    .about-highlight-card strong {
      font-size: 0.9rem;
    }

    .about-highlight-list {
      margin-top: 0.9rem;
      list-style: none;
      display: grid;
      gap: 0.4rem;
      text-align: justify;
    }

    /* PLANES */
    .plans-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.3rem;
    }

    .plan-card {
      background: rgba(15, 23, 42, 0.9);
      border-radius: 1.3rem;
      border: 1px solid var(--border-soft);
      padding: 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      overflow: hidden;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        border-color var(--transition-fast), background var(--transition-fast);
    }

    .plan-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at top, rgba(59, 130, 246, 0.22), transparent 60%);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-fast);
    }

    .plan-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(15, 23, 42, 1);
      border-color: rgba(59, 130, 246, 0.9);
      background: radial-gradient(circle at top, rgba(15, 23, 42, 0.96), #020617 65%);
    }

    .plan-card:hover::before {
      opacity: 1;
    }

    .plan-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
    }

    .plan-name {
      font-size: 1.05rem;
      font-weight: 600;
    }

    .plan-price {
      font-size: 1.4rem;
      font-weight: 700;
      display: flex;
      align-items: baseline;
      gap: 0.25rem;
    }

    .plan-price span {
      font-size: 0.8rem;
      color: var(--text-muted);
      font-weight: 400;
    }

    .plan-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .plan-features {
      list-style: none;
      display: grid;
      gap: 0.4rem;
      font-size: 0.82rem;
    }

    .plan-feature {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
    }

    .plan-check {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: rgba(34, 197, 94, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      color: #4ade80;
      flex-shrink: 0;
    }

    .plan-cta {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .plan-btn {
      width: 100%;
      padding: 0.7rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.85);
      background: rgba(15, 23, 42, 0.95);
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      color: var(--text-main);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      transition: background var(--transition-fast), border-color var(--transition-fast),
        transform var(--transition-fast);
    }

    .plan-btn:hover {
      background: rgba(15, 23, 42, 1);
      border-color: rgba(59, 130, 246, 0.95);
      transform: translateY(-1px);
    }

    .plan-card.featured {
      border-color: rgba(251, 191, 36, 0.9);
      background: radial-gradient(circle at top, rgba(251, 191, 36, 0.12), #020617);
    }

    .plan-card.featured::before {
      background: radial-gradient(circle at top, rgba(251, 191, 36, 0.3), transparent 60%);
    }

    .plan-tag-featured {
      position: absolute;
      top: 1rem;
      right: 1.1rem;
      font-size: 0.7rem;
      padding: 0.2rem 0.5rem;
      border-radius: 999px;
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.7);
      color: #facc15;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* SECCIONES */

    .section-card {
      background: rgba(15, 23, 42, 0.95);
      border-radius: 1.2rem;
      border: 1px solid var(--border-soft);
      padding: 0.9rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        border-color var(--transition-fast), background var(--transition-fast);
      position: relative;
      overflow: hidden;
    }

    .section-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at top, rgba(59, 130, 246, 0.18), transparent 60%);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-fast);
    }

    .section-card:hover {
      transform: translateY(3px);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.95);
      border-color: rgba(59, 130, 246, 0.9);
      background: radial-gradient(circle at top, rgba(59, 130, 246, 0.12), #020617);
    }

    .section-card:hover::before {
      opacity: 1;
    }

    .section-thumb{
      position: relative;
      border-radius: 0.95rem;
      overflow: hidden;
      border: 1px solid rgba(30, 64, 175, 0.65);

      background: linear-gradient(135deg, #111827, #020617);

      display: flex;
      align-items: center;
      justify-content: center;

      /* Desktop */
      height: 190px;
    }

    .section-thumb img{
      width: 100%;
      height: 100%;
      object-fit: cover;      /* SIEMPRE completa */
      object-position: center;
      display: block;
      filter: saturate(1.02) contrast(1.02);
    }

    /* Ajuste RESPONSIVE para que la imagen SIEMPRE se vea completa */
    @media (max-width: 1024px){
      .section-thumb{
        height: 180px;
      }
    }

    @media (max-width: 768px){
      .section-thumb{
        height: 200px; /* más alto para evitar recorte en tablets */
      }
    }

    @media (max-width: 480px){
      .section-thumb{
        height: 220px; /* móvil: más alto = imagen completa */
      }
    }




    .section-thumb-badge {
      position: absolute;
      left: 0.75rem;
      bottom: 0.75rem;
      padding: 0.3rem 0.6rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.92);
      border: 1px solid rgba(148, 163, 184, 0.65);
      font-size: 0.72rem;
      color: #e5e7eb;
      backdrop-filter: blur(10px);
    }

    .section-title-sm {
      font-size: 0.95rem;
      font-weight: 600;
    }

    .section-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.6;
      text-align: justify;
    }

    .section-actions {
      margin-top: auto;
      display: flex;
      gap: 0.6rem;
      align-items: center;
      justify-content: space-between;
    }

    .section-btn{
      width: 100%;
      padding: 0.9rem 1.8rem;
      border-radius: 999px;

      position: relative;
      overflow: hidden;
      isolation: isolate;

      border: 1px solid rgba(148,163,184,0.18);
      background: var(--score-gradient);

      /* oscurece el degradado SIN cambiar los colores (mejor contraste) */
      box-shadow:
        0 18px 45px rgba(2, 6, 23, 0.85),
        inset 0 0 0 999px rgba(2, 6, 23, 0.35);


      color: #ffffff !important;
      text-shadow:
        0 1px 0 rgba(2, 6, 23, 0.55),
        0 10px 25px rgba(2, 6, 23, 0.35);

      -webkit-font-smoothing: antialiased;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;

      transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    }

    .section-btn::before{
      content: "";
      position: absolute;
      inset: -40%;
      background:
        radial-gradient(circle at 30% 30%, rgba(34,197,94,0.35), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(239,68,68,0.28), transparent 60%);
      opacity: 0.35;
      filter: blur(18px);
      z-index: -1;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .section-btn:hover{
      transform: translateY(-2px);
      filter: brightness(1.06);
    }

    .section-btn:hover::before{
      opacity: 0.9;
      animation: sectionShine 0.9s ease forwards;
    }

    .section-btn:active{
      transform: translateY(0);
      box-shadow:
        0 8px 20px rgba(59, 130, 246, 0.42);
    }



    /* ===============================
   PREMIUM FIX: Botón ÚNICO (logo + Nexus)
   =============================== */

  /* ===============================
    PREMIUM: Botón ÚNICO (logo + Nexus) – tamaño aumentado
    =============================== */

  .section-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;                /* más aire */

    padding: 0.7rem 1.1rem;      /* botón más robusto */
    border-radius: 999px;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(148,163,184,0.24);

    box-shadow:
      0 12px 28px rgba(2,6,23,0.38),
      inset 0 0 0 999px rgba(2,6,23,0.18);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: transform 0.25s ease, filter 0.25s ease;
  }

  /* Contenido interno */
  .section-btn-brand{
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;                 /* separa mejor logo/texto */
  }

  /* LOGO MÁS GRANDE */
  .section-btn-logo-wrap{
    width: var(--nexus-logo-size, 34px);
    height: var(--nexus-logo-size, 34px);
    border-radius: 999px;

    display: grid;
    place-items: center;

    /* 🔥 MISMO ESTILO, 20% MÁS OSCURO QUE EL ANTERIOR */
    background:
      radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,0.52),   /* antes ~0.65 */
        rgba(220,235,255,0.48) 40%,
        rgba(120,170,255,0.14) 70%,
        rgba(2,6,23,0.34) 100%
      );

    /*border: 1px solid rgba(120,170,255,0.28);*/

    box-shadow:
      0 10px 22px rgba(2,6,23,0.45),
      0 0 0 4px rgba(120,170,255,0.08),
      inset 0 0 0 1px rgba(255,255,255,0.26);
  }




  .section-btn-logo{
    width: 78%;                  /* logo más dominante */
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(2,6,23,0.55));
  }

  /* TEXTO “NEXUS” MÁS GRANDE */
  .section-btn-brand-text{
    font-weight: 900;            /* más presencia */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.95rem;          /* ⬅ antes ~0.78rem */
    opacity: 0.95;
  }

  /* Hover sutil */
  .section-btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
  }

  /* Mobile: ajustamos para que no se vea enorme */
  @media (max-width: 420px){
    .section-btn{
      padding: 0.55rem 0.9rem;
    }

    .section-btn-logo-wrap{
      width: 30px;
      height: 30px;
    }

    .section-btn-brand-text{
      font-size: 0.86rem;
      letter-spacing: 0.1em;
    }
  }


    @keyframes sectionShine{
      0%   { left: -60%; }
      100% { left: 120%; }
    }


    .section-link {
      font-size: 0.78rem;
      color: #fde047;
      opacity: 0.9;
    }

    .section-link:hover {
      opacity: 1;
    }

    /* Responsive SECCIONES */
    /* SECCIONES - 1 sola línea horizontal (con scroll suave si no cabe) */
    .sections-grid{
      display: grid;
      grid-auto-flow: column;                 /* fuerza una sola fila */
      grid-auto-columns: minmax(240px, 1fr);  /* ancho mínimo por card */
      gap: 1rem;

      overflow-x: auto;
      padding-bottom: 0.5rem;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .section-card{
      scroll-snap-align: start;
    }

    /* Scrollbar discreta */
    .sections-grid::-webkit-scrollbar{
      height: 8px;
    }
    .sections-grid::-webkit-scrollbar-track{
      background: rgba(148,163,184,0.12);
      border-radius: 999px;
    }
    .sections-grid::-webkit-scrollbar-thumb{
      background: rgba(148,163,184,0.35);
      border-radius: 999px;
    }
    .sections-grid::-webkit-scrollbar-thumb:hover{
      background: rgba(148,163,184,0.55);
    }



    /* VIDEOS */
    .videos-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }

    .video-card {
      background: rgba(15, 23, 42, 0.95);
      border-radius: 1.2rem;
      border: 1px solid var(--border-soft);
      padding: 0.8rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      cursor: pointer;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        border-color var(--transition-fast), background var(--transition-fast);
      position: relative;
      overflow: hidden;
    }

    .video-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.95);
      border-color: rgba(59, 130, 246, 0.9);
      background: radial-gradient(circle at top, rgba(59, 130, 246, 0.12), #020617);
    }

    .video-thumb {
      position: relative;
      border-radius: 0.9rem;
      overflow: hidden;
      border: 1px solid rgba(30, 64, 175, 0.7);
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, #1f2937, #020617);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .video-play-small {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: radial-gradient(circle at top, #f97316, #ea580c);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
      border: 2px solid rgba(248, 250, 252, 0.9);
      box-shadow: 0 12px 30px rgba(251, 146, 60, 0.9);
    }

    .video-title {
      font-size: 0.9rem;
      font-weight: 500;
    }

    .video-meta {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* CTA FINAL */
    .cta-section {
      margin-top: 4rem;
      border-radius: var(--radius-xl);
      background: radial-gradient(circle at top, rgba(37, 99, 235, 0.22), #020617);
      border: 1px solid rgba(59, 130, 246, 0.9);
      padding: 1.8rem 1.5rem;
      box-shadow: var(--shadow-soft);
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 1.5rem;
      align-items: center;
    }

    .cta-title {
      font-size: 1.25rem;
      font-weight: 600;
      text-align: justify;
    }

    .cta-text {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-top: 0.4rem;
      max-width: 480px;
      text-align: justify;
    }

    .cta-highlight {
      font-size: 0.8rem;
      margin-top: 0.6rem;
      color: #bfdbfe;
      text-align: justify;
    }

    .cta-actions {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      align-items: flex-start;
      text-align: justify;
    }

    .cta-note {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* Footer */
    footer {
      margin-top: 2.5rem;
      font-size: 0.75rem;
      color: var(--text-muted);
      border-top: 1px solid rgba(55, 65, 81, 0.8);
      padding-top: 1rem;
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
      padding: 2%;
    }

    footer a {
      color: #fde047;
      font-size: 0.75rem;
    }

    /* Botón volver arriba */
    /* ================================
      BOTÓN VOLVER ARRIBA – PREMIUM
    ================================ */
    .back-to-top-pro{
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 52px;
      height: 52px;
      border-radius: 999px;

      /* Gradiente funcional (subir) */
      background: linear-gradient(
        135deg,
        rgba(34,197,94,0.95),
        rgba(239,68,68,0.95)
      );

      border: 1px solid rgba(99,102,241,0.65);

      display: inline-flex;
      align-items: center;
      justify-content: center;

      box-shadow:
        0 18px 45px rgba(34,197,94,0.55),
        0 6px 20px rgba(239,68,68,0.35);

      backdrop-filter: blur(10px);
      z-index: 100;

      transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
    }

    /* Ícono */
    .back-to-top-pro svg{
      width: 20px;
      height: 20px;
      fill: #ffffff;

      /* Animación sutil de “subir” */
      animation: arrowFloat 1.8s ease-in-out infinite;
    }

    /* Hover elegante */
    .back-to-top-pro:hover{
      transform: translateY(-3px);
      filter: brightness(1.08);

      box-shadow:
        0 24px 65px rgba(34,197,94,0.75),
        0 10px 30px rgba(239,68,68,0.55);
    }

    /* Efecto de halo */
    .back-to-top-pro::before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius: 999px;
      background: radial-gradient(
        circle at center,
        rgba(239,68,68,0.35),
        transparent 60%
      );
      opacity: 0;
      filter: blur(8px);
      transition: opacity 0.25s ease;
    }

    .back-to-top-pro:hover::before{
      opacity: 1;
    }

    /* Animación flecha */
    @keyframes arrowFloat{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-3px); }
    }

    /* Mobile: un poco más compacto */
    @media (max-width: 640px){
      .back-to-top-pro{
        width: 48px;
        height: 48px;
      }
      .back-to-top-pro svg{
        width: 18px;
        height: 18px;
      }
    }




    /* Responsive */
    @media (max-width: 900px) {
      .top-cover-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
      }

      .top-cover-image-card {
        justify-content: center;
        order: -1;
      }

      .top-cover {
        padding-top: 3.2rem;
      }

      .hero {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (max-width: 768px) {
      .plans-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .videos-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      section {
        margin-top: 3rem;
      }
    }

    @media (max-width: 640px) {
      .top-cover {
        padding-inline: 1.25rem;
      }

      .top-cover-title {
        font-size: 2rem;
      }

      .top-cover-actions {
        flex-direction: column;
        align-items: flex-start;
      }

      .top-cover-image-inner {
        max-width: 320px;
      }

      .page {
        padding-inline: 1.25rem;
      }
    }


    /* FOOTER PREMIUM */
    /* ================================
      FOOTER ULTRA-PREMIUM (PRO)
    ================================ */
    .site-footer{
      margin-top: 3.2rem;
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(148, 163, 184, 0.18);

      background:
        radial-gradient(circle at top, rgba(34,197,94,0.16), transparent 55%),
        radial-gradient(circle at 85% 30%, rgba(239,68,68,0.12), transparent 55%),
        linear-gradient(to bottom, rgba(2,6,23,0.45), rgba(2,6,23,0.92));

      /*padding: clamp(2.2rem, 4vw, 3.2rem) 5% 1.4rem;*/
      padding: 5%;
    }

    /* Línea superior animada (muy sutil, elegante) */
    .site-footer::after{
      content:"";
      position:absolute;
      left:-30%;
      top:0;
      width:160%;
      height:2px;
      background: linear-gradient(
        90deg,
        rgba(34,197,94,0) 0%,
        rgba(34,197,94,0.85) 25%,
        rgba(239,68,68,0.85) 55%,
        rgba(34,197,94,0) 100%
      );
      opacity: 0.75;
      animation: footerLine 6.5s linear infinite;
    }

    @keyframes footerLine{
      0% { transform: translateX(-10%); }
      100% { transform: translateX(10%); }
    }

    /* Glow interno */
    .site-footer::before{
      content:"";
      position:absolute;
      inset:-35%;
      background:
        radial-gradient(circle at 30% 20%, rgba(34,197,94,0.20), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(239,68,68,0.16), transparent 65%);
      filter: blur(30px);
      opacity: 0.75;
      pointer-events:none;
    }

    /* Partículas sutiles (pro) */
    .footer-sparkles{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity: 0.55;
      z-index: 0;
    }
    .footer-sparkles span{
      position:absolute;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: radial-gradient(circle at center, rgba(203,231,255,0.95), rgba(118,168,255,0.55));
      box-shadow:
        0 0 12px rgba(148,197,255,0.75),
        0 0 30px rgba(118,168,255,0.45);
      opacity: 0;
      animation: footerFloat 10s linear infinite;
    }
    .footer-sparkles span:nth-child(1){ top:20%; left:12%; animation-delay:0s; }
    .footer-sparkles span:nth-child(2){ top:55%; left:20%; animation-delay:2s; }
    .footer-sparkles span:nth-child(3){ top:30%; left:45%; animation-delay:4s; }
    .footer-sparkles span:nth-child(4){ top:70%; left:55%; animation-delay:6s; }
    .footer-sparkles span:nth-child(5){ top:25%; left:78%; animation-delay:1.5s; }
    .footer-sparkles span:nth-child(6){ top:62%; left:86%; animation-delay:3.5s; }

    @keyframes footerFloat{
      0%   { transform: translateY(14px) scale(0.7); opacity: 0; }
      15%  { opacity: 1; }
      55%  { transform: translateY(-24px) scale(1); opacity: 0.85; }
      100% { transform: translateY(-52px) scale(0.7); opacity: 0; }
    }

    /* Layout */
    .footer-inner{
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      display:grid;
      grid-template-columns: 1.35fr 0.95fr 0.95fr 1.15fr;
      gap: 1.25rem;
      align-items: start;
    }

    .footer-brand{
      display:flex;
      flex-direction: column;
      gap: 0.7rem;
    }

    .footer-logo{
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .footer-desc{
      font-size: 0.88rem;
      color: rgba(229,231,235,0.78);
      line-height: 1.75;
      max-width: 520px;
    }

    .footer-col-title{
      font-size: 0.78rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(156,163,175,0.95);
      margin-bottom: 0.8rem;
    }

    /* Links con underline animado */
    .footer-links{
      list-style:none;
      display:grid;
      gap: 0.5rem;
    }
    .footer-links a{
      position: relative;
      display:inline-flex;
      align-items:center;
      gap: 0.55rem;
      color: rgba(229,231,235,0.85);
      font-size: 0.88rem;
      opacity: 0.9;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .footer-links a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-6px;
      height:1px;
      width: 0%;
      background: linear-gradient(90deg, rgba(34,197,94,0.9), rgba(239,68,68,0.9));
      transition: width 0.25s ease;
      opacity: 0.9;
    }
    .footer-links a:hover{
      opacity: 1;
      transform: translateX(3px);
    }
    .footer-links a:hover::after{
      width: 100%;
    }

    /* Botones contacto */
    .footer-actions{
      display:flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .footer-btn{
      width: 100%;
      padding: 0.92rem 1.05rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.25);
      background: rgba(15, 23, 42, 0.62);
      color: #e5e7eb;

      font-size: 0.86rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;

      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 0.6rem;

      position: relative;
      overflow: hidden;

      transition: transform 0.25s ease, filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .footer-btn::before{
      content:"";
      position:absolute;
      top:-40%;
      left:-70%;
      width:60%;
      height:180%;
      background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.50) 45%,
        rgba(255,255,255,0) 100%
      );
      transform: rotate(10deg);
      opacity: 0;
    }
    .footer-btn:hover{
      transform: translateY(-2px);
      filter: brightness(1.06);
      border-color: rgba(34,197,94,0.6);
      box-shadow: 0 18px 45px rgba(2,6,23,0.7);
    }
    .footer-btn:hover::before{
      opacity: 0.9;
      animation: footerShine 0.9s ease forwards;
    }
    @keyframes footerShine{
      0%   { left:-70%; }
      100% { left:130%; }
    }
    .footer-btn.whatsapp{
      border-color: rgba(34,197,94,0.35);
      background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(15,23,42,0.65));
    }
    .footer-btn.whatsapp:hover{ border-color: rgba(34,197,94,0.70); }
    .footer-btn.email{
      border-color: rgba(34,197,94,0.35);
      background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(15,23,42,0.65));
    }

    /* Social: halo animado */
    .footer-socials{
      margin-top: 0.95rem;
      display:flex;
      flex-wrap: wrap;
      gap: 0.65rem;
    }
    .footer-social{
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.60);
      border: 1px solid rgba(148,163,184,0.25);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position: relative;
      transition: transform 0.25s ease, border-color 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    }
    .footer-social::before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius: 999px;
      background: radial-gradient(circle at center, rgba(34,197,94,0.24), transparent 60%);
      opacity: 0;
      filter: blur(6px);
      transition: opacity 0.25s ease;
    }
    .footer-social:hover{
      transform: translateY(-2px);
      border-color: rgba(34,197,94,0.75);
      filter: brightness(1.06);
      box-shadow: 0 18px 45px rgba(2,6,23,0.75);
    }
    .footer-social:hover::before{
      opacity: 1;
      animation: haloPulse 1.5s ease-in-out infinite;
    }
    @keyframes haloPulse{
      0%,100%{ transform: scale(0.98); opacity: 0.75; }
      50%{ transform: scale(1.04); opacity: 1; }
    }
    .footer-social svg{
      width: 18px;
      height: 18px;
      fill: rgba(255,255,255,0.92);
    }

    /* Mapa */
    .footer-map-card{
      border-radius: 1.1rem;
      overflow: hidden;
      border: 1px solid rgba(148,163,184,0.20);
      background: rgba(15,23,42,0.55);
      box-shadow: 0 18px 45px rgba(2,6,23,0.55);
      transition: transform 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    }
    .footer-map-card:hover{
      transform: translateY(-2px);
      border-color: rgba(34,197,94,0.55);
      filter: brightness(1.03);
    }
    .footer-map-card iframe{
      width: 100%;
      height: 165px;
      border: 0;
      display: block;
      filter: saturate(0.9) contrast(1.05);
    }
    .footer-map-note{
      margin-top: 0.55rem;
      font-size: 0.8rem;
      color: rgba(229,231,235,0.75);
      line-height: 1.6;
    }

    /* Bottom */
    .footer-bottom{
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 1.35rem auto 0;
      padding-top: 1.05rem;
      border-top: 1px solid rgba(148, 163, 184, 0.16);

      display:flex;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;

      color: rgba(156,163,175,0.92);
      font-size: 0.8rem;
    }
    .footer-bottom a{
      color:#fde047;
      opacity: 0.9;
      transition: opacity 0.25s ease;
    }
    .footer-bottom a:hover{ opacity: 1; }

    .footer-legal{
      display:inline-flex;
      align-items:center;
      gap: 0.55rem;
    }
    .footer-sep{ opacity: 0.55; }

    /* Botón flotante derecha (más pro y animado) */
    .back-to-top-fab{
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 48px;
      height: 48px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.88);
      border: 1px solid rgba(148,163,184,0.28);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 18px 55px rgba(2,6,23,0.68);
      backdrop-filter: blur(10px);
      z-index: 99;
      transition: transform 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
    }
    .back-to-top-fab:hover{
      transform: translateY(-3px);
      border-color: rgba(34,197,94,0.75);
      filter: brightness(1.06);
    }
    .back-to-top-fab svg{
      animation: arrowBob 1.7s ease-in-out infinite;
    }
    @keyframes arrowBob{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-2px); }
    }

    /* Responsive */
    @media (max-width: 1024px){
      .footer-inner{ grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 700px){
      .footer-inner{ grid-template-columns: 1fr; }
      .footer-map-card iframe{ height: 190px; }
    }


    .footer-inner{
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: 1.2rem;
      align-items: start;
    }

    .footer-brand{
      display:flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .footer-logo{
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .footer-desc{
      font-size: 0.85rem;
      color: rgba(229,231,235,0.78);
      line-height: 1.7;
      max-width: 520px;
    }

    .footer-col-title{
      font-size: 0.78rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(156,163,175,0.95);
      margin-bottom: 0.7rem;
    }

    .footer-links{
      list-style: none;
      display: grid;
      gap: 0.45rem;
    }

    .footer-links a{
      color: rgba(229,231,235,0.82);
      font-size: 0.85rem;
      opacity: 0.9;
      transition: opacity 0.25s ease, transform 0.25s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }

    .footer-links a:hover{
      opacity: 1;
      transform: translateX(2px);
    }

    /* Botones contacto */
    .footer-actions{
      display:flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    .footer-btn{
      width: 100%;
      padding: 0.85rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background: rgba(15, 23, 42, 0.72);
      color: #e5e7eb;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      transition: transform 0.25s ease, filter 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .footer-btn:hover{
      transform: translateY(-2px);
      filter: brightness(1.06);
      border-color: rgba(34,197,94,0.55);
      background: rgba(15, 23, 42, 0.88);
    }

    .footer-btn.whatsapp{
      border: 1px solid rgba(34, 197, 94, 0.45);
      background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(15,23,42,0.78));
    }

    .footer-btn.whatsapp:hover{
      border-color: rgba(34,197,94,0.75);
    }

    .footer-btn.email{
      border: 1px solid rgba(34,197,94,0.45);
      background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(15,23,42,0.78));
    }

    .footer-btn svg{
      display:block;
    }

    .footer-bottom{
      position: relative;
      max-width: 1200px;
      margin: 1.25rem auto 0;
      padding-top: 1rem;
      border-top: 1px solid rgba(148, 163, 184, 0.18);
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
      color: rgba(156,163,175,0.9);
      font-size: 0.78rem;
    }

    .footer-bottom a{
      color: #fde047;
      opacity: 0.9;
    }

    .footer-bottom a:hover{
      opacity: 1;
    }

    /* Responsive footer */
    @media (max-width: 900px){
      .footer-inner{
        grid-template-columns: 1fr;
      }
    }


    /* REDES SOCIALES (FOOTER) */
    .footer-socials{
      margin-top: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    .footer-social{
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.72);
      border: 1px solid rgba(148,163,184,0.35);

      display: inline-flex;
      align-items: center;
      justify-content: center;

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

    .footer-social:hover{
      transform: translateY(-2px);
      border-color: rgba(34,197,94,0.75);
      filter: brightness(1.06);
      box-shadow: 0 14px 35px rgba(15,23,42,0.95);
    }

    .footer-social svg{
      width: 18px;
      height: 18px;
      fill: rgba(255,255,255,0.92);
    }






    /* =========================================
    ABOUT HIGHLIGHT – PREMIUM STEPS
    ========================================= */
    .about-highlight-card.pro-steps{
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    border: 1px solid rgba(148,163,184,0.22);
    background:
        radial-gradient(900px 320px at 20% 10%, rgba(34,197,94,0.16), transparent 60%),
        radial-gradient(850px 320px at 85% 25%, rgba(239,68,68,0.12), transparent 58%),
        linear-gradient(to bottom, rgba(2,6,23,0.60), rgba(15,23,42,0.72));
    box-shadow:
        0 26px 70px rgba(2,6,23,0.60),
        0 0 0 1px rgba(34,197,94,0.08) inset;
    }

    .about-highlight-card.pro-steps::before{
    content:"";
    position:absolute;
    inset:-35%;
    background:
        radial-gradient(circle at 30% 20%, rgba(34,197,94,0.22), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(239,68,68,0.16), transparent 65%);
    filter: blur(28px);
    opacity: .8;
    pointer-events:none;
    }

    /* Header */
    .pro-steps-head{
    position: relative;
    z-index: 1;
    padding: 1.35rem 1.35rem 0.9rem;
    }

    .pro-steps-badge{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.22);
    background: rgba(15,23,42,0.60);
    color: rgba(229,231,235,0.88);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    }

    .pro-steps-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle at center, #4ade80, #22c55e);
    box-shadow: 0 0 0 5px rgba(34,197,94,0.18);
    }

    .pro-steps-title{
    margin-top: 0.75rem;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    }

    .pro-steps-subtitle{
    margin-top: 0.35rem;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(156,163,175,0.95);
    max-width: 560px;
    text-align: justify;
    }

    /* Steps list */
    .pro-steps-list{
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.75rem;
    padding: 0.7rem 1.15rem 1.25rem;
    }

    .pro-step{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 0.95rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(15,23,42,0.55);
    transition: transform .25s ease, border-color .25s ease, filter .25s ease, box-shadow .25s ease;
    overflow: hidden;
    }

    .pro-step::after{
    content:"";
    position:absolute;
    top:-45%;
    left:-70%;
    width:60%;
    height:190%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 45%, rgba(255,255,255,0) 100%);
    transform: rotate(10deg);
    opacity: 0;
    }

    .pro-step:hover{
    transform: translateY(-2px);
    border-color: rgba(34,197,94,0.42);
    filter: brightness(1.04);
    box-shadow: 0 18px 55px rgba(2,6,23,0.55);
    }

    .pro-step:hover::after{
    opacity: 1;
    animation: proShine .95s ease forwards;
    }

    @keyframes proShine{
    0%{ left:-70%; }
    100%{ left:140%; }
    }

    .pro-step-left{
    display:flex;
    align-items:center;
    gap: 0.65rem;
    }

    /* Número */
    .pro-step-num{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    font-weight: 900;
    font-size: 0.9rem;
    color: rgba(229,231,235,0.92);
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.20);
    box-shadow: 0 16px 40px rgba(34,197,94,0.10);
    }

    /* Ícono */
    .pro-step-icon{
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display:grid;
    place-items:center;
    color: rgba(229,231,235,0.92);
    background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(239,68,68,0.10));
    border: 1px solid rgba(148,163,184,0.18);
    box-shadow: 0 18px 45px rgba(2,6,23,0.45);
    }

    .pro-step-icon svg{
    width: 22px;
    height: 22px;
    stroke: currentColor;
    }

    .pro-step-title{
    font-weight: 900;
    letter-spacing: -0.01em;
    font-size: 0.98rem;
    }

    .pro-step-desc{
    margin-top: 0.2rem;
    font-size: 0.86rem;
    color: rgba(156,163,175,0.95);
    line-height: 1.6;
    text-align: justify;
    }

    /* Pill derecha */
    .pro-step-pill{
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(229,231,235,0.92);
    border: 1px solid rgba(148,163,184,0.18);
    background: rgba(2,6,23,0.25);
    white-space: nowrap;
    }

    /* Animación suave de entrada */
    .pro-steps .pro-step{
    animation: stepIn .55s ease both;
    }
    .pro-steps .pro-step:nth-child(1){ animation-delay: .05s; }
    .pro-steps .pro-step:nth-child(2){ animation-delay: .10s; }
    .pro-steps .pro-step:nth-child(3){ animation-delay: .15s; }
    .pro-steps .pro-step:nth-child(4){ animation-delay: .20s; }
    .pro-steps .pro-step:nth-child(5){ animation-delay: .25s; }

    @keyframes stepIn{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
    }

    /* Mobile */
    @media (max-width: 640px){
    .pro-steps-head{ padding: 1.15rem 1.15rem 0.7rem; }
    .pro-steps-list{ padding: 0.65rem 1rem 1.1rem; }
    .pro-step{
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        align-items: start;
    }
    .pro-step-pill{
        grid-column: 2 / -1;
        justify-self: start;
        margin-left: 0.1rem;
        margin-top: 0.35rem;
    }
    }

    /* Respeta accesibilidad */
    @media (prefers-reduced-motion: reduce){
    .pro-steps .pro-step{ animation: none !important; }
    .pro-step:hover{ transform: none; }
    .pro-step::after{ display:none; }
    }



    /* =========================================
   ABOUT MERGE – Unir about-card + pro-steps
========================================= */

.about-grid.about-merge{
  display: block; /* anulamos tu grid original de 2 cards */
}

.about-merged-card{
  position: relative;
  overflow: hidden;

  border-radius: 1.7rem;
  border: 1px solid rgba(148,163,184,0.22);

  background:
    radial-gradient(900px 320px at 20% 10%, rgba(34,197,94,0.16), transparent 60%),
    radial-gradient(850px 320px at 85% 25%, rgba(239,68,68,0.12), transparent 58%),
    linear-gradient(to bottom, rgba(2,6,23,0.55), rgba(15,23,42,0.72));

  box-shadow:
    0 28px 75px rgba(2,6,23,0.62),
    0 0 0 1px rgba(34,197,94,0.07) inset;

  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 1.2rem;

  padding: 1.2rem;
}

.about-merged-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,197,94,0.22), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(239,68,68,0.16), transparent 65%);
  filter: blur(30px);
  opacity: .8;
  pointer-events:none;
}

/* Separador interno elegante */
.about-merged-left,
.about-merged-right{
  position: relative;
  z-index: 1;
  border-radius: 1.35rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.45);
  padding: 1.1rem;
}

/* Columna izquierda (contenido original) */
.about-merged-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.35rem 0.7rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.20);
  background: rgba(2,6,23,0.20);
  color: rgba(229,231,235,0.88);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-merged-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at center, #facc15, #ef4444);
  box-shadow: 0 0 0 5px rgba(34,197,94,0.16);
}

.about-merged-title{
  margin-top: 0.75rem;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.about-merged-subtitle{
  margin-top: 0.35rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(156,163,175,0.95);
  max-width: 560px;
  text-align: justify;
}

.about-merged-text{
  margin-top: 0.95rem;
  color: rgba(229,231,235,0.85);
  line-height: 1.7;
  font-size: 0.92rem;
  text-align: justify;
}

.about-merged-list{
  margin-top: 0.95rem;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.about-merged-item{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  color: rgba(229,231,235,0.88);
  font-size: 0.9rem;
  line-height: 1.6;
}

.about-merged-check{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 0.8rem;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.22);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.about-merged-tags{
  margin-top: 1rem;
  display:flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.about-merged-tag{
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.20);
  font-size: 0.78rem;
  color: rgba(156,163,175,0.95);
}

/* Ajuste del pro-steps dentro de la columna derecha */
.about-merged-right .pro-steps-head{
  padding: 0.25rem 0.25rem 0.75rem;
}
.about-merged-right .pro-steps-list{
  padding: 0.2rem 0.2rem 0.2rem;
}

/* Responsive */
@media (max-width: 1024px){
  .about-merged-card{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
  .about-merged-card{
    padding: 1rem;
  }
  .about-merged-left,
  .about-merged-right{
    padding: 0.95rem;
  }
}




/* ================================
   SOBRE LA EMPRESA – PREMIUM
================================ */

.company-section{
  margin-top: clamp(3.5rem, 5vw, 4.8rem);
}

.company-card{
  position: relative;
  overflow: hidden;

  border-radius: 1.8rem;
  border: 1px solid rgba(148,163,184,0.22);

  background:
    radial-gradient(900px 320px at 20% 10%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(850px 320px at 85% 25%, rgba(239,68,68,0.14), transparent 58%),
    linear-gradient(to bottom, rgba(2,6,23,0.55), rgba(15,23,42,0.78));

  box-shadow:
    0 30px 80px rgba(2,6,23,0.65),
    0 0 0 1px rgba(34,197,94,0.08) inset;

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 1.4rem;
  padding: 1.4rem;
}

.company-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,197,94,0.22), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(239,68,68,0.16), transparent 65%);
  filter: blur(30px);
  opacity: .8;
  pointer-events:none;
}

/* Izquierda */
.company-left{
  position: relative;
  z-index: 1;
  padding: 1.2rem;
  border-radius: 1.4rem;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.16);
}

.company-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background: rgba(2,6,23,0.25);
  border:1px solid rgba(148,163,184,0.22);
}

.company-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: linear-gradient(135deg,#22c55e,#ef4444);
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

.company-title{
  margin-top:.8rem;
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.02em;
}

.company-title span{
  background: linear-gradient(to right,#facc15,#ef4444);
  -webkit-background-clip:text;
  color:transparent;
}

.company-text{
  margin-top:.7rem;
  font-size:.95rem;
  line-height:1.7;
  color:rgba(229,231,235,.9);
  text-align: justify;
}

.company-list{
  margin-top:.9rem;
  list-style:none;
  display:grid;
  gap:.55rem;
}

.company-list li{
  display:flex;
  gap:.6rem;
  font-size:.9rem;
}

.company-check{
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:.8rem;
  color:#4ade80;
  background: rgba(34,197,94,0.12);
  border:1px solid rgba(34,197,94,0.22);
}

/* Tags */
.company-tags{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.company-tags span{
  padding:.3rem .65rem;
  border-radius:999px;
  font-size:.78rem;
  background: rgba(2,6,23,0.25);
  border:1px solid rgba(148,163,184,0.22);
  color:rgba(156,163,175,.95);
}

/* Derecha */
.company-right{
  position: relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1rem;
  padding:1.2rem;
  border-radius:1.4rem;
  background: rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.16);
}

.company-stat strong{
  font-size:1.25rem;
  font-weight:900;
}

.company-stat span{
  font-size:.8rem;
  color:rgba(156,163,175,.9);
}

/* CTA */
.company-cta{
  margin-top:auto;
  text-align:center;
  padding:.9rem 1rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;

  background: linear-gradient(135deg,#22c55e,#ef4444);
  color:#f9fafb;

  box-shadow:
    0 14px 34px rgba(34,197,94,.55),
    0 6px 18px rgba(239,68,68,.42);

  transition: transform .25s ease, filter .25s ease;
}

.company-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Responsive */
@media (max-width:1024px){
  .company-card{
    grid-template-columns:1fr;
  }
}








/* ================================
   BLOQUE VIDEO – SOBRE LIZONEX
================================ */

.company-video-block{
  margin-top: 1.2rem;
  cursor: pointer;

  border-radius: 1.4rem;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.55);

  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.company-video-block:hover{
  transform: translateY(-3px);
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 22px 60px rgba(2,6,23,0.75);
}

/* Thumb del video */
.company-video-thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #020617, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botón play */
.company-video-play{
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: radial-gradient(circle at top, #f97316, #ea580c);
  color: #fff;
  font-size: 1.6rem;
  display: grid;
  place-items: center;

  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 20px 50px rgba(251,146,60,0.95);
  transition: transform .25s ease, box-shadow .25s ease;
}

.company-video-block:hover .company-video-play{
  transform: scale(1.05);
  box-shadow: 0 28px 70px rgba(251,146,60,1);
}

/* Info */
.company-video-info{
  padding: 1rem 1.1rem 1.15rem;
}

.company-video-badge{
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 999px;

  background: rgba(2,6,23,0.35);
  border: 1px solid rgba(148,163,184,0.25);
  color: rgba(229,231,235,0.9);
}

.company-video-info h4{
  margin-top: .6rem;
  font-size: 1rem;
  font-weight: 900;
}

.company-video-info p{
  margin-top: .35rem;
  font-size: .86rem;
  line-height: 1.6;
  color: rgba(156,163,175,0.95);
  text-align: justify;
}


/* =========================================
   FIX ALTURA – BLOQUE "CÓMO FUNCIONA"
========================================= */

/* Fuerza a que la columna derecha use todo el alto */
.about-merged-right{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header del bloque */
.about-merged-right .pro-steps-head{
  flex-shrink: 0;
}

/* Lista de pasos ocupa el espacio restante */
.about-merged-right .pro-steps-list{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 🔑 elimina el espacio vacío */
}

/* Cada paso se adapta mejor */
.about-merged-right .pro-step{
  flex-grow: 1;
  display: flex;
  align-items: center;
}

/* =========================================
   FIX RESPONSIVE MÓVIL – SECCIÓN EMPRESA
   (evita estiramientos y espacios raros)
========================================= */

@media (max-width: 700px){

  /* Cuando ya es 1 columna, NO estiramos el bloque */
  .about-merged-right{
    height: auto !important;
    display: block !important;
  }

  /* La lista vuelve a layout normal (sin space-between) */
  .about-merged-right .pro-steps-list{
    display: grid !important;
    gap: 0.75rem !important;
    justify-content: initial !important;
  }

  /* Cada paso deja de crecer (evita que se “alarguen”) */
  .about-merged-right .pro-step{
    flex-grow: 0 !important;
    display: grid !important; /* vuelve al diseño original de steps */
    align-items: center !important;
  }

  /* Ajuste extra: mejor respiración interna en móvil */
  .company-card{
    padding: 1.05rem !important;
    gap: 1rem !important;
  }

  .company-left,
  .about-merged-right{
    padding: 0.95rem !important;
  }
}


.company-cta-whatsapp{
  display: inline-flex;
  justify-content: center;
  width: 100%;
}



/* ================================
   SECCIÓN MAPA – PREMIUM / DINÁMICA
================================ */

.map-section{
  margin-top: clamp(3.2rem, 5vw, 4.6rem);
}

.map-card{
  position: relative;
  overflow: hidden;
  border-radius: 1.8rem;
  border: 1px solid rgba(148,163,184,0.22);
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(34,197,94,0.16), transparent 60%),
    radial-gradient(850px 320px at 85% 25%, rgba(239,68,68,0.12), transparent 58%),
    linear-gradient(to bottom, rgba(2,6,23,0.55), rgba(15,23,42,0.78));
  box-shadow:
    0 30px 85px rgba(2,6,23,0.65),
    0 0 0 1px rgba(34,197,94,0.08) inset;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1.2rem;
  padding: 1.2rem;
  isolation: isolate;
}

.map-glow{
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,197,94,0.22), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(239,68,68,0.18), transparent 65%);
  filter: blur(30px);
  opacity: .8;
  pointer-events: none;
  z-index: -1;
  animation: mapGlow 10s ease-in-out infinite alternate;
}

@keyframes mapGlow{
  0%{ transform: translate3d(-10px, 6px, 0) scale(0.98); opacity: .65; }
  100%{ transform: translate3d(10px, -6px, 0) scale(1.05); opacity: .9; }
}

.map-left, .map-right{
  border-radius: 1.35rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.45);
  padding: 1.1rem;
}

.map-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(2,6,23,0.20);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,231,235,0.9);
}

.map-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#22c55e,#ef4444);
  box-shadow: 0 0 0 5px rgba(34,197,94,0.16);
}

.map-title{
  margin-top: .85rem;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.map-title span{
  opacity: .65;
}

.map-text{
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.7;
  color: rgba(229,231,235,0.88);
  text-align: justify;
}

.map-chips{
  margin-top: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.map-chip{
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.22);
  color: rgba(229,231,235,0.9);
  font-size: .82rem;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, filter .2s ease, background .2s ease;
}

.map-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,0.45);
  filter: brightness(1.05);
}

.map-chip.is-active{
  border-color: rgba(34,197,94,0.75);
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(239,68,68,0.12));
}

.map-details{
  margin-top: 1rem;
  display: grid;
  gap: .55rem;
}

.map-detail{
  display: grid;
  gap: .15rem;
  padding: .75rem .85rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.55);
}

.map-detail strong{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.95);
}

.map-detail span{
  font-size: .92rem;
  color: rgba(229,231,235,0.88);
}

.map-actions{
  margin-top: 1rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.map-btn{
  flex: 1;
  min-width: 180px;
  padding: .9rem 1rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.62);
  color: rgba(229,231,235,0.95);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.map-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 18px 45px rgba(2,6,23,0.7);
}

.map-btn.primary{
  border-color: rgba(34,197,94,0.45);
  background: linear-gradient(135deg, rgba(34,197,94,0.95), rgba(239,68,68,0.95));
  color: #fff;
}

.map-btn.ghost{
  border-color: rgba(34,197,94,0.35);
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(15,23,42,0.65));
}

.map-note{
  margin-top: .85rem;
  font-size: .8rem;
  color: rgba(156,163,175,0.95);
  line-height: 1.6;
}

/* Frame del mapa */
.map-frame{
  position: relative;
  overflow: hidden;
  border-radius: 1.15rem;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(2,6,23,0.35);
  box-shadow: 0 22px 60px rgba(2,6,23,0.55);
}

.map-topbar{
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.55);
}

.map-pill{
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(229,231,235,0.92);
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.25);
}

.map-pill.subtle{
  opacity: .85;
}

.map-frame iframe{
  width: 100%;
  height: 500px;
  border: 0;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}

.map-overlay{
  position: absolute;
  inset: auto 14px 14px 14px;
  pointer-events: none;
}

.map-overlay-card{
  border-radius: 1rem;
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(10px);
  padding: .75rem .85rem;
  display: grid;
  gap: .2rem;
}

.map-overlay-card strong{
  font-size: .86rem;
}

.map-overlay-card span{
  font-size: .8rem;
  color: rgba(156,163,175,0.95);
}

/* Responsive */
@media (max-width: 1024px){
  .map-card{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .map-card{ padding: 1rem; }
  .map-left, .map-right{ padding: .95rem; }
  .map-frame iframe{ height: 300px; }
  .map-actions{ flex-direction: column; }
  .map-btn{ width: 100%; min-width: 100%; }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .map-glow{ animation: none !important; }
  .map-btn:hover, .map-chip:hover{ transform: none; }
}



/* ================================
   ICONOS EN BOTONES DEL MAPA
================================ */

.map-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

.map-btn svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Variantes sutiles */
.map-btn.whatsapp{
  border-color: rgba(34,197,94,0.45);
  background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(15,23,42,0.65));
}

.map-btn.email{
  border-color: rgba(34,197,94,0.45);
  background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(15,23,42,0.65));
}



/* =========================================
   SECTION HEADER – ESTILO PREMIUM (GLASS)
========================================= */

.section-header{
  position: relative;
  margin-bottom: 2rem;

  padding: 1.4rem 1.6rem;
  border-radius: 1.6rem; /* 🔥 redondeado premium */

  background:
    radial-gradient(600px 220px at 15% 10%, rgba(34,197,94,0.18), transparent 55%),
    linear-gradient(
      to bottom,
      rgba(15,23,42,0.65),
      rgba(2,6,23,0.85)
    );

  border: 1px solid rgba(148,163,184,0.25);

  box-shadow:
    0 30px 80px rgba(2,6,23,0.65),
    inset 0 0 0 1px rgba(34,197,94,0.08);
}

/* Glow sutil decorativo */
.section-header::before{
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 20%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(239,68,68,0.14), transparent 65%);
  filter: blur(28px);
  /* opacity: .85;*/
  opacity: .05;
  pointer-events: none;
  z-index: -1;
}

/* Ajustes tipográficos internos */
.section-header .section-title{
  /* margin-bottom: .35rem;*/
  margin-bottom: 1.35rem;
}

.section-header .section-subtitle{
  max-width: 780px;
  color: rgba(203,213,225,0.95);
}

/* Responsive */
@media (max-width: 640px){
  .section-header{
    padding: 1.1rem 1.15rem;
    border-radius: 1.3rem;
  }
}




/* ================================
   MODAL INFO (SECCIONES) – PREMIUM
================================ */
.info-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
  padding: 1.25rem;
}

.info-modal.is-open{ display: grid; place-items: center; }

.info-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.info-modal-card{
  position: relative;
  width: min(980px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;

  border-radius: 1.6rem;
  border: 1px solid rgba(148,163,184,0.22);

  background:
    radial-gradient(900px 340px at 15% 10%, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(900px 340px at 85% 25%, rgba(239,68,68,0.14), transparent 58%),
    linear-gradient(to bottom, rgba(2,6,23,0.72), rgba(15,23,42,0.92));

  box-shadow:
    0 45px 120px rgba(2,6,23,0.78),
    0 0 0 1px rgba(34,197,94,0.08) inset;

  padding: 1.05rem;
  animation: infoModalIn .18s ease-out both;
}

@keyframes infoModalIn{
  from{ transform: translateY(8px) scale(0.985); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

.info-modal-close{
  position: absolute;
  top: 30px;
  right: 30px;

  width: 40px;
  height: 40px;
  border-radius: 50%;

  border: 1px solid rgba(148,163,184,0.22);

  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  color: rgba(255,255,255,0.9);
  font-size: 16px;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow:
    0 8px 22px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.03);

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.info-modal-close:hover{
  transform: translateY(-1px);

  background: rgba(15,23,42,0.7);
  border-color: rgba(34,197,94,0.45);

  box-shadow:
    0 12px 32px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(34,197,94,0.18);
}


.info-modal-head{
  padding: .7rem .75rem .95rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.45);
}

.info-modal-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(2,6,23,0.25);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(229,231,235,0.9);
}

.info-modal-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg,#22c55e,#ef4444);
  box-shadow: 0 0 0 5px rgba(34,197,94,0.16);
}

.info-modal-title{
  margin-top: .7rem;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.info-modal-subtitle{
  margin-top: .35rem;
  font-size: .95rem;
  line-height: 1.7;
  color: rgba(229,231,235,0.80);
  text-align: justify;
}

.info-modal-grid{
  margin-top: .9rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: .85rem;
}

.info-modal-block{
  border-radius: 1.25rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(15,23,42,0.45);
  padding: 1rem;
}

.info-modal-block-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .75rem;
}

.info-modal-block h4{
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.info-modal-pill{
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,231,235,0.9);
  border: 1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.25);
}
.info-modal-pill.subtle{ opacity: .85; }

.info-modal-list{
  list-style: none;
  margin: .85rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.info-modal-list li{
  display:flex;
  align-items:flex-start;
  gap: .6rem;
  color: rgba(229,231,235,0.88);
  line-height: 1.6;
  font-size: .92rem;
}

.info-check{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: .78rem;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.22);
  flex-shrink: 0;
  margin-top: .15rem;
}

.info-modal-note{
  margin-top: .9rem;
  padding: .75rem .85rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(2,6,23,0.22);
  color: rgba(156,163,175,0.95);
  font-size: .85rem;
  line-height: 1.6;
}

.info-modal-actions{
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.info-modal-social-title{
  margin-top: 1rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.95);
}

.info-modal-socials{
  margin-top: .65rem;
  display:flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.info-modal-mini{
  margin-top: 1rem;
  display:flex;
  align-items:center;
  gap: .55rem;
  padding: .65rem .75rem;
  border-radius: 1.05rem;
  border: 1px solid rgba(148,163,184,0.16);
  background: rgba(2,6,23,0.20);
  color: rgba(229,231,235,0.78);
  font-size: .85rem;
  line-height: 1.5;
}

.info-mini-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at center, #22c55e, #ef4444);
  box-shadow: 0 0 0 6px rgba(34,197,94,0.14);
  flex-shrink: 0;
}

@media (max-width: 900px){
  .info-modal-grid{ grid-template-columns: 1fr; }
  .info-modal-card{ padding: .95rem; }
}

@media (prefers-reduced-motion: reduce){
  .info-modal-card{ animation: none !important; }
}












/* =========================================================
   Smooth-scroll feedback (Back to top + footer links)
   ========================================================= */
.back-to-top-pro.is-animating{
  transform: translateY(-2px) scale(0.96);
  filter: brightness(1.12);
  box-shadow:
    0 26px 80px rgba(34,197,94,0.55),
    0 12px 36px rgba(239,68,68,0.38);
}

.footer-links a.is-animating{
  text-decoration: none;
  filter: brightness(1.15);
}

.scroll-target-flash{
  position: relative;
}

.scroll-target-flash::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 22px;
  pointer-events:none;
  border: 1px solid rgba(99,102,241,0.38);
  box-shadow:
    0 0 0 0 rgba(99,102,241,0),
    0 0 0 0 rgba(34,197,94,0);
  animation: targetFlash 0.9s ease-out both;
}

@keyframes targetFlash{
  0%{
    opacity: 0;
    transform: translateY(0);
    box-shadow:
      0 0 0 0 rgba(99,102,241,0),
      0 0 0 0 rgba(34,197,94,0);
  }
  35%{
    opacity: 1;
    box-shadow:
      0 0 0 8px rgba(99,102,241,0.14),
      0 22px 70px rgba(34,197,94,0.10);
  }
  100%{
    opacity: 0;
    box-shadow:
      0 0 0 0 rgba(99,102,241,0),
      0 0 0 0 rgba(34,197,94,0);
  }
}















/* =========================
   GOOGLE TRANSLATE: OCULTAR BARRAS / WIDGET
========================= */
.gt-hidden { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* Oculta el banner y elementos visuales de Google */
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate { display: none !important; }
.goog-logo-link, .goog-te-gadget { display: none !important; }
.goog-te-gadget-icon { display: none !important; }
iframe.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* =========================
   BOTÓN FLOTANTE "IDIOMA" (abajo-izquierda)
========================= */
.lang-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9998;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(120% 120% at 20% 20%, rgba(0,180,255,.22) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff;
  cursor: pointer;

  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.lang-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border-color: rgba(0,180,255,.28);
}

.lang-fab__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, rgba(0,180,255,.25), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
}

.lang-fab__icon svg{ color: #fff; opacity: .95; }
.lang-fab__text{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 14px;
  white-space: nowrap;
}

/* =========================
   MODAL PREMIUM (centrado + animado)
========================= */
.lang-lock { overflow: hidden; } /* bloquea scroll al abrir modal */

.lang-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.lang-modal.is-open{ display: block; }

.lang-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: langFadeIn .25s ease both;
}

.lang-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(560px, calc(100vw - 34px));
  border-radius: 22px;

  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 120% at 15% 15%, rgba(0,180,255,.18) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.78) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  padding: 20px 20px 16px;

  animation: langPopIn .28s cubic-bezier(.2,.8,.2,1) both;
}

.lang-modal__header{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-right: 46px; /* espacio para el botón X */
}

.lang-modal__badge{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, rgba(0,180,255,.28), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  flex: 0 0 auto;
}

.lang-modal__title{
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}

.lang-modal__subtitle{
  margin: 6px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13.5px;
  line-height: 1.35;
}

.lang-modal__grid{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.lang-card{
  width: 100%;
  border-radius: 18px;
  padding: 14px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;

  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.lang-card:hover{
  transform: translateY(-2px);
  background: rgba(0,180,255,.10);
  border-color: rgba(0,180,255,.22);
}

.lang-card__left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-card__flag{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  font-size: 20px;
}

.lang-card__name{
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2px;
}

.lang-card__desc{
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
}

.lang-card__cta{
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
}

.lang-modal__footer{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.lang-modal__hint{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
}

.lang-modal__hint .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,180,255,.85);
  box-shadow: 0 0 0 6px rgba(0,180,255,.12);
}

@keyframes langFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes langPopIn{
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Responsive refinado */
@media (max-width: 480px){
  .lang-modal__panel{ padding: 16px 16px 14px; border-radius: 20px; }
  .lang-modal__title{ font-size: 18px; }
  .lang-fab{ left: 14px; bottom: 14px; }
}












/* =========================================
   TOP COVER – BTN SECONDARY (BRAND LOOK)
   Similar al estilo actual (score-gradient + dark overlay)
========================================= */

.top-cover-btn-secondary.top-cover-btn-secondary--brand{
  padding: 0.9rem 1.55rem;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Base: mismo lenguaje visual del site */
  background: var(--score-gradient);
  border: 1px solid rgba(148,163,184,0.18);

  /* Lo hacemos "secondary": más oscuro que el primary */
  box-shadow:
    0 18px 45px rgba(2, 6, 23, 0.78),
    inset 0 0 0 999px rgba(2, 6, 23, 0.58);

  color: rgba(229,231,235,0.96) !important;
  text-shadow: 0 1px 0 rgba(2,6,23,0.55);

  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

/* Glow suave parecido al primary/btn-primary */
.top-cover-btn-secondary.top-cover-btn-secondary--brand::before{
  content:"";
  position:absolute;
  inset:-55%;
  background:
    radial-gradient(circle at 25% 30%, rgba(34,197,94,0.38), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(239,68,68,0.28), transparent 60%),
    radial-gradient(circle at 55% 35%, rgba(250,204,21,0.25), transparent 58%);
  opacity: 0.35;
  filter: blur(20px);
  z-index: -1;
  transition: opacity .25s ease;
  pointer-events:none;
}

/* Línea premium sutil (marca) */
.top-cover-btn-secondary.top-cover-btn-secondary--brand::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--score-gradient-right);
  opacity: 0.55;
  filter: blur(0.1px);
  z-index: 0;
  pointer-events:none;
}

.top-cover-btn-secondary.top-cover-btn-secondary--brand .tcb-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 999px;

  /* “píldora” como en tu UI */
  background: rgba(15,23,42,0.70);
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 12px 28px rgba(2,6,23,0.55);

  font-size: 0.95rem;
  transform: translateY(-0.5px);
  transition: transform .25s ease, filter .25s ease, border-color .25s ease;
}

.top-cover-btn-secondary.top-cover-btn-secondary--brand:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 22px 58px rgba(2, 6, 23, 0.90),
    inset 0 0 0 999px rgba(2, 6, 23, 0.52);
}

.top-cover-btn-secondary.top-cover-btn-secondary--brand:hover::before{
  opacity: 0.55;
}

.top-cover-btn-secondary.top-cover-btn-secondary--brand:hover .tcb-icon{
  transform: translate(2px, -1px);
  filter: brightness(1.05);
  border-color: rgba(34,197,94,0.45);
}













/* =========================================
   PORTADA: SLIDER 3 IMÁGENES (NUEVO)
   Crossfade + zoom suave, sin conflictos
========================================= */

:root{
  /* Usa tus 2 URLs actuales y agrega la tercera */
  --cover-img-1: url("https://res.cloudinary.com/dwxiqchos/image/upload/v1767823834/santiagoFinal_jfzmjt.png");
  --cover-img-2: url("https://res.cloudinary.com/dwxiqchos/image/upload/v1767823835/zaulFinal_rdftwo.png");
  --cover-img-3: url("https://res.cloudinary.com/dwxiqchos/image/upload/v1767823611/lisbet-portada2_ymfjuc.png");
}

/* ===== PORTADA: SLIDER 3 IMÁGENES (ORDEN 1-2-3) ===== */

.top-cover-slides{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cover-slide{
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  opacity: 0;
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.05);

  will-change: opacity, transform, filter;
}

/* Imágenes */
.cover-slide.s1{ background-image: var(--cover-img-1); animation: coverS1 18s ease-in-out infinite; }
.cover-slide.s2{ background-image: var(--cover-img-2); animation: coverS2 18s ease-in-out infinite; }
.cover-slide.s3{ background-image: var(--cover-img-3); animation: coverS3 18s ease-in-out infinite; }

/* Crossfade “premium”: entra, se mantiene, sale (con zoom suave) */
@keyframes coverS1{
  0%   { opacity: 1; transform: scale(1.03); filter: saturate(1.06) contrast(1.05); }
  27%  { opacity: 1; transform: scale(1.00); }
  33%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; }
}

@keyframes coverS2{
  0%   { opacity: 0; }
  30%  { opacity: 0; transform: scale(1.06); }
  36%  { opacity: 1; transform: scale(1.03); }
  60%  { opacity: 1; transform: scale(1.00); }
  66%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; }
}

@keyframes coverS3{
  0%   { opacity: 0; }
  63%  { opacity: 0; transform: scale(1.06); }
  69%  { opacity: 1; transform: scale(1.03); }
  94%  { opacity: 1; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .cover-slide{ animation: none !important; }
  .cover-slide.s1{ opacity: 1; transform: none; }
  .cover-slide.s2,
  .cover-slide.s3{ opacity: 0; }
}














/* ===============================
   INFO MODAL - checklist con descripción
================================ */

.info-modal-list li.info-item{
  display: block;              /* anula el flex del li normal */
  padding: 0.15rem 0;
}

.info-item-head{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.info-item-title{
  color: rgba(229,231,235,0.92);
  line-height: 1.6;
  font-size: 0.92rem;
  font-weight: 650;
}

.info-item-desc{
  margin: 0.35rem 0 0 1.6rem;  /* se alinea debajo del texto (después del check) */
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(156,163,175,0.95);
  text-align: justify;
}