/* Lumera - Estilos principales */
/* Separado desde Main.html */

@media (max-width: 768px) {
  .pdf-viewer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 4px !important;
    border-width: 1px !important;
  }
  .section-block {
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
  }
}

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

:root{
      --lav-1:#EFBDEB;
      --lav-2:#B68CB8;
      --green-1:#C6EBBE;
      --green-2:#A9DBB8;
      --violet:#443850;
      --ink:#1f2430;
      --muted:#5f6675;
      --bg:#ffffff;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height:1.5;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}

    /* Negrita solo en móvil (sin afectar desktop) */
    .mobile-only-bold{font-weight:inherit;}
    @media(max-width:768px){
      .mobile-only-bold{font-weight:700;}
    }
    button{
      font:inherit;
      cursor:pointer;
      border:none;
      border-radius:999px;
      padding:0.6rem 1.1rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:0.25rem;
    }
    /* Layout básico */
    header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      width:100%;
      z-index:1000;
      backdrop-filter:blur(16px);
      background:rgba(255,255,255,0.95);
      border-bottom:1px solid rgba(0,0,0,0.04);
    }
    .text-red{
    color: #d64545;
    font-weight: 500;
    }
    .nav{
      max-width:1400px;
      margin:0 auto;
      padding:0.45rem 0.6rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    @media(max-width:768px){
      .nav{
        flex-wrap:wrap;
        gap:0.5rem;
        padding:0.5rem;
      }
      .logo-mark{
        font-size:0.75rem;
        gap:0.3rem;
        flex-shrink:0;
      }
      .logo-icon{
        width:22px;
        height:22px;
        flex:0 0 22px;
        aspect-ratio:1/1;
      }
      .nav-cta{
        order:1;
        flex-shrink:0;
        gap:0.3rem;
      }
      .nav-cta button{
        padding:0.35rem 0.7rem;
        font-size:0.75rem;
      }
      .nav-links{
        order:2;
        width:100%;
        max-width:100%;
        display:flex;
        overflow-x:auto;
        overflow-y:hidden;
        justify-content:center;
        gap:0.3rem;
        padding:0.3rem 0;
        -webkit-overflow-scrolling:touch;
        scroll-behavior:smooth;
      }
      .nav-links button{
        padding:0.25rem 0.5rem;
        font-size:0.7rem;
        flex-shrink:0;
      }
      /* Orden móvil: Home, Agendar evaluación, Nosotros, Descubre si Lumera es para ti, Aprende más */
      .nav-links button:nth-child(1){ order:1; } /* Home */
      .nav-links button:nth-child(5){ order:2; } /* Agendar evaluación */
      .nav-links button:nth-child(3){ order:3; } /* Nosotros */
      .nav-links button:nth-child(4){ order:4; } /* Descubre si Lumera es para ti */
      .nav-links button:nth-child(2){ order:5; } /* Aprende más */
    }
    .logo-mark{
      display:flex;
      align-items:center;
      gap:0.5rem;
      font-weight:600;
      letter-spacing:0.08em;
      text-transform:uppercase;
      font-size:0.9rem;
      color:var(--violet);
    }
    .logo-icon{
      width:28px;height:28px;
      flex:0 0 28px;
      aspect-ratio:1/1;
      display:block;
      border-radius:999px;
      background:conic-gradient(from 180deg at 50% 50%,var(--lav-1),var(--lav-2),var(--green-2),var(--lav-1));
      position:relative;
      overflow:hidden;
    }
    .logo-icon::after{
      content:"";
      position:absolute;
      inset:4px;
      border-radius:999px;
      background:rgba(255,255,255,0.9);
      mix-blend-mode:screen;
    }
    .nav-links{
      display:flex;
      flex-wrap:wrap;
      gap:0.5rem;
      font-size:0.9rem;
    }
    .nav-links button{
      background:transparent;
      padding:0.4rem 0.9rem;
      border-radius:999px;
      border:1px solid transparent;
      color:var(--muted);
      transition:all 0.2s ease;
      white-space:nowrap;
    }
    .nav-links button:hover{
      border-color:rgba(0,0,0,0.08);
      background:rgba(239,189,235,0.18);
      color:var(--violet);
    }
    .nav-links button.active{
      background:var(--violet);
      color:#fff;
    }
    /* Orden header (desktop y móvil): Home, Agendar evaluación, Nosotros, Descubre si Lumera es para ti, Aprende más */
    .nav-links button:nth-child(1){ order:1; } /* Home */
    .nav-links button:nth-child(5){ order:2; } /* Agendar evaluación */
    .nav-links button:nth-child(3){ order:3; } /* Nosotros */
    .nav-links button:nth-child(4){ order:4; } /* Descubre si Lumera es para ti */
    .nav-links button:nth-child(2){ order:5; } /* Aprende más */
    .nav-cta{
      display:flex;
      gap:0.5rem;
      align-items:center;
    }
    /* Make header logo look like plain text (transparent button) */
    .logo-mark{
      background:transparent;
      border:none;
      padding:0;
      border-radius:0;
      cursor:pointer;
    }
    .logo-mark:focus{outline:0}
    /* Keep CTA buttons on one line and align their content horizontally */
    .nav-cta button{white-space:nowrap}
    .nav-cta .btn-primary{display:inline-flex;align-items:center;gap:0.35rem}
    .btn-primary{
      background:var(--violet);
      color:#fff;
      box-shadow:0 10px 30px rgba(68,56,80,0.25);
      transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
    }
    .btn-primary:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 40px rgba(68,56,80,0.3);
      background:#312437;
    }
    /* Ajuste específico para el botón Crear cuenta */
    #btnRegistrar{ margin-top:1.2rem; }
    /* Ajuste específico para el botón Entrar (portal pacientes) */
    #btnLogin{ margin-top:1.2rem; }
    .btn-white{
      background:#ffffff;
      border:1px solid rgba(68,56,80,0.12);
      color:var(--violet);
    }
    .btn-ghost{
      background:rgba(255,255,255,0.6);
      border:1px solid rgba(68,56,80,0.12);
      color:var(--violet);
    }
    main{
      max-width:1120px;
      margin:0 auto;
      padding:1.5rem 1rem 4rem;
    }
    .page-section{
      display:none;
      padding:1rem 0 3rem;
    }
    .page-section.active{display:block;}

    /* Autoevaluación: reducir margen superior al entrar desde el header */
    #evalua.page-section{ padding-top:0.1rem; }
    #evalua .section-block{ margin-top:0.75rem; }
    @media(max-width:768px){
      #evalua .section-block{ margin-top:0.5rem; }
    }

    /* Agenda: reducir margen superior al entrar desde el header */
    #agenda.page-section{ padding-top:0.1rem; }
    #agenda .section-block{
      margin-top:0.25rem;
      background:#F9EEF9;
    }
    #agenda .section-block::before{ opacity:0; }
    section+.section-block{margin-top:2rem;}
    .section-block{
      margin-top:2.5rem;
      padding:2rem;
      border-radius:1.5rem;
      background:#ffffff;
      box-shadow:0 18px 60px rgba(0,0,0,0.06);
      position:relative;
      overflow:hidden;
    }
    /* En móvil, reduce el margen lateral de la encuesta (autoevaluación) a la mitad */
    @media(max-width:768px){
      #evalua .section-block{ margin-left:-2rem; margin-right:-2rem; }
    }
      #que-es-rtms.section-block{
        background:#F9EEF9;
        overflow:hidden;
      }
      #que-es-rtms.section-block::before{opacity:0;}

    /* Igualar fondo de la tarjeta “Nuestro equipo” al de “¿Qué es rTMS?” */
    #equipo .section-block{background:#F9EEF9;}
    #equipo .section-block::before{opacity:0;}
    /* Nuestro equipo: menos espacio arriba y laterales, sin romper el gap de tarjetas */
    #equipo.page-section{ padding-top:0.25rem; }
    #equipo .section-block{
      margin-top:1.25rem;
      padding:1.5rem;
    }
    @media(min-width:1024px){
      /* Ensancha el recuadro dentro del max-width del main usando márgenes negativos responsivos */
      #equipo .section-block{
        margin-left:clamp(-1rem, -4vw, -5.5rem);
        margin-right:clamp(-1rem, -4vw, -5.5rem);
      }
    }
    /* Igualar fondo de “Flujo completo” al estilo de “¿Qué es Lumera?” */
    #como-funciona.section-block{
      background:radial-gradient(circle at 0 0,rgba(249,238,249,0.9),transparent 60%),
                 radial-gradient(circle at 100% 100%,rgba(166,219,184,0.7),transparent 60%),
                 linear-gradient(135deg,#fff,#f3f0f7);
    }
    #como-funciona.section-block::before{opacity:0;}


    /* Desktop: ensancha horizontalmente los bloques principales */
    @media(min-width:1024px){
      #como-funciona.section-block,
      #evidencia.section-block,
      .hero,
      #que-es-rtms.section-block,
      #testimonios.section-block,
      #aval-medico.section-block,
      #seguridad.section-block,
      #experiencia.section-block,
      #lumera-casa.section-block,
      #reset.section-block {
        margin-left:clamp(-1rem, -6vw, -8.5rem);
        margin-right:clamp(-1rem, -6vw, -8.5rem);
      }
      /* Desktop: mantener 4 tarjetas en una sola fila */
      #como-funciona .grid.grid-4{
        grid-template-columns:repeat(4, minmax(0, 1fr));
      }
      #como-funciona .card{
        padding:1.05rem 1.1rem 1rem;
      }
      #como-funciona .card h3{
        font-size:1rem;
      }
    }
    @media(min-width:900px){
      #evalua .section-block{ margin-left:-3rem; margin-right:-3rem; }
    }
    .section-block::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:radial-gradient(circle at 0 0,rgba(239,189,235,0.35),transparent 60%),
                 radial-gradient(circle at 100% 100%,rgba(166,219,184,0.3),transparent 60%);
      opacity:0.55;
      pointer-events:none;
    }
    .section-inner{position:relative;z-index:1;}
    h1,h2,h3,h4{
      font-weight:600;
      color:var(--violet);
      margin-bottom:0.5rem;
    }
    h1{font-size:2.1rem;line-height:1.1;}
    h2{font-size:1.5rem;}
    h3{font-size:1.1rem;}
    p{margin-top:0.3rem;color:var(--muted);font-size:0.96rem;}
    .tagline{font-size:0.9rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--lav-2);font-weight:600;margin-bottom:0.5rem;}
    .grid{
      display:grid;
      gap:1.5rem;
    }
    #que-es-rtms .section-inner.grid{align-items:start;}
    /* Evita desbordes de grid/flex en pantallas pequeñas */
    /* Eliminado max-width restrictivo para igualar el ancho */

    @media(min-width:1024px){
      #que-es-rtms.section-block {
        margin-left:clamp(-1rem, -6vw, -8.5rem);
        margin-right:clamp(-1rem, -6vw, -8.5rem);
      }
    }
    #que-es-rtms .rtms-title,
    #que-es-rtms .rtms-media,
    #que-es-rtms .rtms-body{min-width:0;}
    @media(min-width:768px){
      #que-es-rtms .section-inner.grid.grid-2{
        grid-template-columns: minmax(0,0.75fr) minmax(0,1.25fr);
        grid-template-rows:auto 1fr;
      }
      /* Desktop: foto a la izquierda (alto completo), título+texto a la derecha */
      #que-es-rtms .rtms-title{grid-column:2;grid-row:1;}
      #que-es-rtms .rtms-media{
        grid-column:1;
        grid-row:1 / span 2;
        align-self:stretch;
        display:flex;
        /* Quita los márgenes visibles: la imagen llega al borde del recuadro redondeado */
        margin:-2rem 0 -2rem -2rem;
      }
      #que-es-rtms .rtms-body{grid-column:2;grid-row:2;}

      /* La imagen debe llenar la altura y recortarse dentro del recuadro */
      #que-es-rtms .rtms-card{
        height:100%;
        width:100%;
        justify-content:flex-start;
        align-items:stretch;
        overflow:hidden;
      }
      #que-es-rtms .rtms-persona{
        height:100%;
        width:140%;
        max-width:none;
        object-fit:cover;
        transform-origin:left center;
        /* Ajuste para que se vea como la 3ra imagen (zoom + traslado) */
        transform:translate(-3%, 8%) scale(0.95);
      }
    }
    #que-es-rtms .rtms-card{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;margin:0 auto;align-self:start;background:transparent;padding:0;border:none;box-shadow:none;overflow:hidden;}
    @media(max-width:768px){
      #que-es-rtms .section-inner.grid.grid-2{grid-template-columns:1fr;}
      #que-es-rtms .rtms-persona{width:100%;height:auto;max-width:min(450px, 100%);}
    }
    .lumera-home-grid{align-items:center;}
    @media(min-width:768px){
      .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
      .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
      .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:0.5rem;
      margin-top:0.75rem;
    }
    .chip{
      font-size:0.8rem;
      padding:0.3rem 0.7rem;
      border-radius:999px;
      background:rgba(255,255,255,0.8);
      border:1px solid rgba(0,0,0,0.04);
      color:var(--muted);
      backdrop-filter:blur(8px);
    }
    .muted{color:var(--muted);font-size:0.9rem;}
    /* Hero */
    .hero{
      min-height:60vh;
      display:grid;
      gap:1.5rem;
      align-items:center;
      position:relative;
      overflow:hidden;
      border-radius:1.75rem;
      padding:2.5rem 2rem;
      background:radial-gradient(circle at 0 0,rgba(239,189,235,0.6),transparent 60%),
                 radial-gradient(circle at 100% 100%,rgba(166,219,184,0.7),transparent 60%),
                 linear-gradient(135deg,#fff,#f3f0f7);
      box-shadow:0 25px 80px rgba(68,56,80,0.26);
    }
    @media(min-width:900px){
      .hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}
    }
    .hero-title{
      font-size:2.4rem;
      line-height:1.05;
      letter-spacing:-0.03em;
      margin-bottom:0.75rem;
    }
    .hero-sub{
      font-size:1rem;
      max-width:34rem;
    }
    .hero-cta{
      margin-top:1.4rem;
      display:flex;
      flex-wrap:wrap;
      gap:0.75rem;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:0.5rem;
      margin-top:1.4rem;
    }
    .hero-badge{
      font-size:0.8rem;
      padding:0.35rem 0.75rem;
      border-radius:999px;
      background:rgba(255,255,255,0.85);
      border:1px solid rgba(0,0,0,0.04);
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      gap:0.35rem;
    }
    .hero-orbit{
      position:relative;
      width:360px;
      height:360px;
      max-width:88vw;
      max-height:88vw;
      margin:0 auto;
    }

    @media(max-width:768px){
      .hero{padding:1.75rem 1.25rem;}
      .hero-title{font-size:2rem;}
    }
    .hero-orbit-core{
      position:absolute;

    @media (max-width: 768px){
      /* Paso 4 (móvil): opciones más cerca de Anterior/Siguiente */
      .wizard.step-4 .wizard-nav{ margin-top:clamp(1.4rem, 3vh, 2.2rem); }
    }
      inset:22%;
      border-radius:999px;
      background:radial-gradient(circle at 30% 0%,#fff,rgba(239,189,235,0.3));
      box-shadow:0 18px 60px rgba(68,56,80,0.3);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:1.2rem;
    }
    .hero-orbit-core svg{
      width:100%;
      height:100%;
      max-width:140px;
      max-height:140px;
      display:block;
    }
    .hero-orbit-core img.orbit-core-img{
    width:100%;
    height:100%;
    max-width:200px;
    max-height:200px;
    display:block;
    object-fit:contain;
    }
    .hero-orbit-core span{
      font-size:0.9rem;
      color:var(--muted);
    }
    /* Stack the descriptive lines vertically under the hero orbit and center them */
    .hero-visual{display:flex;flex-direction:column;align-items:center;gap:6px}
    .hero-vertical-steps{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
    .hero-vertical-steps .step{max-width:220px;margin:0}
    .hero-vertical-steps .arrow{font-size:0.95rem;color:var(--muted);line-height:1;margin:0}
    @media(min-width:900px){
      .hero-vertical-steps .step{max-width:260px}
    }
    .orbit-ring{
      position:absolute;
      inset:40px;
      border-radius:999px;
      border:0.2px dashed rgba(255,255,255,0.8);
      animation:spin 26s linear infinite;
    }
    .orbit-node{
      position:absolute;
      width:14px;height:14px;
      border-radius:999px;
      background:var(--lav-2);
      box-shadow:0 0 14px rgba(182,140,184,0.9);
      will-change:transform;
      animation-timing-function:ease-in-out;
      animation-iteration-count:infinite;
      animation-direction:alternate;
    }
    .orbit-node:nth-child(1){top:100%;left:55%;animation-name:orbit-float-1;animation-duration:16s;animation-delay:0s;}
    .orbit-node:nth-child(2){top:60%;left:90%;animation-name:orbit-float-2;animation-duration:18s;animation-delay:0.4s;}
    .orbit-node:nth-child(3){top:88%;left:35%;animation-name:orbit-float-3;animation-duration:17s;animation-delay:0.2s;}
    .orbit-node:nth-child(4){top:50%;left:5%; animation-name:orbit-float-4; animation-duration:15s;animation-delay:0.6s;}

    /* Pequenos movimientos independientes por nodo */
    @keyframes orbit-float-1{from{transform:translate(-4px,-6px);}to{transform:translate(6px,5px);}}
    @keyframes orbit-float-2{from{transform:translate(5px,-5px);} to{transform:translate(-5px,7px);}}
    @keyframes orbit-float-3{from{transform:translate(-6px,4px);} to{transform:translate(6px,-6px);}}
    @keyframes orbit-float-4{from{transform:translate(6px,6px);}  to{transform:translate(-6px,-4px);}}
    @keyframes spin{
      from{transform:rotate(0deg);}
      to{transform:rotate(360deg);}
    }
    /* Tarjetas y listas */
    .card{
      border-radius:1.2rem;
      padding:1.2rem 1.2rem 1.1rem;
      background:rgba(255,255,255,0.9);
      border:1px solid rgba(0,0,0,0.04);
      box-shadow:0 10px 30px rgba(0,0,0,0.04);
    }

    /* Hover zoom (mismo efecto que "Flujo completo") */
    .zoom-hover{
      transition:transform 180ms ease, box-shadow 180ms ease;
      will-change:transform;
      transform-origin:center;
    }
    .zoom-hover:hover{
      transform:scale(1.06);
      box-shadow:0 14px 40px rgba(0,0,0,0.06);
      z-index:2;
    }

    #como-funciona .card{
      transition:transform 180ms ease, box-shadow 180ms ease;
      will-change:transform;
      transform-origin:center;
    }
    #como-funciona .card h3{display:flex;align-items:center;gap:0.5rem;}
    #como-funciona .card-icon{width:18px;height:18px;flex:0 0 18px;color:var(--violet);}
    #como-funciona .card-icon *{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
    #como-funciona .card:hover{
      transform:scale(1.06);
      box-shadow:0 14px 40px rgba(0,0,0,0.06);
      z-index:2;
    }
    .card h3{margin-bottom:0.35rem;}
    .card ul{
      margin-top:0.35rem;
      padding-left:1.1rem;
      color:var(--muted);
      font-size:0.9rem;
    }

    /* Qué es Lumera: imagen casco lateral */
    .hero .hero-visual{display:flex;align-items:center;justify-content:center;}
    .hero .hero-visual-mobile{display:none;}
    /* Usa % del contenedor (columna derecha) para aprovechar el espacio */
    .hero .hero-side-helmet{width:min(1200px, 130%);height:auto;display:block;object-fit:contain;max-width:none;}
    @media(max-width:768px){
      /* En móvil: casco debajo del título */
      .hero > .hero-visual{display:none;}
      .hero .hero-visual-mobile{display:flex;align-items:center;justify-content:center;margin:0.85rem 0 0.85rem;}
      .hero .hero-visual-mobile .hero-side-helmet{width:min(980px, 140%);}
    }

    /* Testimonios (carrusel) */
    #testimonios .testimonials-carousel{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding:0.25rem 0.25rem 0.75rem;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      /* Oculta scrollbar nativa (usamos una barra custom debajo) */
      scrollbar-width:none;
    }
    #testimonios .testimonials-carousel::-webkit-scrollbar{height:0;}
    #testimonios .testimonial-card{
      scroll-snap-align:start;
      flex:0 0 280px;
      border-radius:1.2rem;
      padding:1.1rem;
      background:rgba(255,255,255,0.9);
      border:1px solid rgba(0,0,0,0.04);
      box-shadow:0 10px 30px rgba(0,0,0,0.04);
    }
    #testimonios .testimonials-scrollbar{
      display:flex;
      justify-content:center;
      margin-top:0.55rem;
    }
    #testimonios .testimonials-scrollbar-track{
      width:min(280px, 70%);
      height:8px;
      border-radius:999px;
      background:rgba(0,0,0,0.08);
      position:relative;
      overflow:hidden;
    }
    @supports (background: color-mix(in srgb, black, white)){
      #testimonios .testimonials-scrollbar-track{
        background:color-mix(in srgb, var(--violet) 18%, transparent);
      }
    }
    #testimonios .testimonials-scrollbar-thumb{
      height:100%;
      width:48px;
      border-radius:999px;
      background:var(--violet);
      opacity:0.85;
      transform:translateX(0);
      transition:transform 120ms ease;
      pointer-events:none;
    }

    /* Evidencia científica (carrusel tipo testimonios, usando tarjetas .card) */
    #evidencia .evidence-carousel{
      display:flex;
      gap:1rem;
      overflow-x:auto;
      padding:0.25rem 0.25rem 0.75rem;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    #evidencia .evidence-carousel::-webkit-scrollbar{height:0;}
    #evidencia .evidence-carousel .card{
      scroll-snap-align:start;
      flex:0 0 290px;
      max-width:96vw;
    }
    @media(min-width:900px){
      #evidencia .evidence-carousel .card{
        flex-basis:340px;
        max-width:370px;
      }
    }
    #evidencia .evidence-scrollbar{
      display:flex;
      justify-content:center;
      margin-top:0.55rem;
    }
    #evidencia .evidence-scrollbar-track{
      width:min(280px, 70%);
      height:8px;
      border-radius:999px;
      background:rgba(0,0,0,0.08);
      position:relative;
      overflow:hidden;
    }
    @supports (background: color-mix(in srgb, black, white)){
      #evidencia .evidence-scrollbar-track{
        background:color-mix(in srgb, var(--violet) 18%, transparent);
      }
    }
    #evidencia .evidence-scrollbar-thumb{
      height:100%;
      width:48px;
      border-radius:999px;
      background:var(--violet);
      opacity:0.85;
      transform:translateX(0);
      transition:transform 120ms ease;
      pointer-events:none;
    }
    @media(min-width:900px){
      #testimonios .testimonial-card{flex-basis:320px;}
    }
    #testimonios .testimonial-head{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.6rem;}
    #testimonios .testimonial-avatar.avatar{width:44px;height:44px;font-size:0.95rem;}
    #testimonios .testimonial-name{font-weight:600;color:var(--violet);line-height:1.2;}
    #testimonios .testimonial-stars{display:flex;gap:0.2rem;color:var(--violet);margin-top:0.15rem;}
    #testimonios .testimonial-stars .star{width:16px;height:16px;flex:0 0 16px;}
    #testimonios .testimonial-stars .star path{fill:currentColor;}
    #testimonios .testimonial-quote{margin:0.25rem 0 0.6rem;color:var(--muted);font-size:0.95rem;}
    #testimonios .testimonial-loc{font-size:0.85rem;color:var(--muted);}
    .pill-label{
      display:inline-block;
      font-size:0.75rem;
      text-transform:uppercase;
      letter-spacing:0.12em;
      color:var(--lav-2);
      margin-bottom:0.25rem;
    }
    /* Tabla comparativa */
    .table{
      width:100%;
      /* Rounded corners support */
      border-collapse:separate;
      border-spacing:0;
      border-radius:12px;
      overflow:hidden;
      font-size:0.9rem;
      margin-top:0.75rem;
    }
    .table th,.table td{
      padding:0.55rem 0.7rem;
      border-bottom:1px solid rgba(0,0,0,0.05);
      text-align:left;
    }
    .table th{
      font-weight:600;
      color:var(--violet);
      background:rgba(239,189,235,0.21);
    }
    .table tr:nth-child(even) td{background:rgba(255,255,255,0.7);}

    .table .feature-cell{display:flex;align-items:center;gap:0.5rem;}
    .table .feature-icon{width:18px;height:18px;flex:0 0 18px;color:var(--violet);}
    .table .feature-icon *{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
    /* Tabs Aprende Más */
    .tabs{
      display:flex;
      flex-wrap:wrap;
      gap:0.5rem;
      margin-bottom:1rem;
    }
    .tabs button{
      background:rgba(255,255,255,0.9);
      border-radius:999px;
      padding:0.4rem 0.9rem;
      border:1px solid rgba(0,0,0,0.06);
      font-size:0.85rem;
      color:var(--muted);
      white-space:nowrap;
      transition:all 0.15s ease;
    }
    .tabs button.active{
      background:var(--violet);
      color:#fff;
      border-color:transparent;
    }
    .topic-panel{display:none;margin-top:0.5rem;}
    .topic-panel.active{display:block;}
    .bullet-columns{
      display:grid;
      gap:0.8rem;
    }
    @media(min-width:768px){
      .bullet-columns{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    .bullet-columns ul{
      font-size:0.9rem;
      color:var(--muted);
      padding-left:1.1rem;
    }
    /* Links dentro de Ciencia rTMS */
    .rtms-link{ text-decoration:underline; color:var(--violet); }
    .rtms-link:hover{ opacity:0.9; }
    .rtms-answers{ background:#fff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; padding:1.2rem; }
    .rtms-answers h4{ scroll-margin-top:90px; }
    #rtms-topics{ scroll-margin-top:90px; }
    html{ scroll-behavior:smooth; }
    /* Alinea las viñetas con el texto circundante */
    .aligned-bullets{
      list-style-position:inside;
      padding-left:0;
      margin-left:0;
    }
    /* Listas sin viñetas (para usar solo con tildes/ticks en el texto) */
    .no-bullets{
      list-style:none;
      padding-left:0;
      margin-left:0;
    }
    /* Centrado vertical dentro de celdas/grid */
    .v-center{ display:flex; align-items:center; }
    /* Limita el ancho máximo de columnas de texto en grids de dos columnas */
    .max-half{ max-width:520px; }
    /* Footer */
    footer.site-footer{
      margin-top:2rem;
      background:#FFF0FF;
      color:#443850;
      padding:2.5rem 1.5rem 2rem;
    }
    .footer-inner{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      gap:2rem;
    }
    @media(min-width:900px){
      .footer-inner{grid-template-columns:1.5fr 1fr 1fr;align-items:start;}
    }
    .footer-brand{
      display:flex;
      gap:0.9rem;
      align-items:center;
      font-weight:700;
      font-size:1.05rem;
      letter-spacing:0.03em;
      margin-bottom:1rem;
    }
    .footer-logo{
      width:56px;height:56px;border-radius:14px;
      background:linear-gradient(135deg,var(--lav-1),var(--green-2));
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 14px 30px rgba(0,0,0,0.12);
    }
    .footer-logo img{width:28px;height:28px;object-fit:contain;}
    .footer-title{font-size:1.1rem;color:#443850;}
    .footer-text{color:#443850;opacity:0.9;line-height:1.4;}
    .footer-col h4{margin-bottom:0.6rem;color:#443850;}
    .footer-col p,.footer-col small{margin:0;color:#443850;opacity:0.9;line-height:1.5;display:block;}
    .footer-note{
      margin-top:1.8rem;
      border-top:1px solid rgba(68,56,80,0.15);
      padding-top:1rem;
      font-size:0.9rem;
      color:#443850;
      opacity:0.85;
      text-align:center;
    }
    /* Pequeño empuje hacia la izquierda */
    .shift-left-sm{ margin-left:-0.5rem; }
    /* Equipo */
    .team-card{
      border-radius:1.3rem;
      padding:1.3rem;
      background:rgba(255,255,255,0.9);
      border:1px solid rgba(0,0,0,0.04);
      display:flex;
      flex-direction:column;
      gap:0.6rem;
    }
    /* Alinea viñetas con el texto dentro de las tarjetas del equipo */
    .team-card ul{
      margin:0.35rem 0 0;
      padding-left:1.1rem;
    }
    .team-card li{ margin:0.25rem 0; }
    .team-head{
      display:flex;
      gap:0.7rem;
      align-items:center;
    }
    .avatar{
      width:52px;height:52px;border-radius:999px;
      background:linear-gradient(135deg,var(--lav-1),var(--green-2));
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-weight:600;
    }
    .badge{
      display:inline-block;
      border-radius:999px;
      padding:0.2rem 0.6rem;
      font-size:0.75rem;
      background:rgba(239,189,235,0.5);
      color:var(--violet);
    }
    /* Wizard autoevaluación */
    .wizard{
      --wizard-panel-h: clamp(350px,42vh,470px);
      border-radius:1.5rem;
      padding:1.5rem;
      background:radial-gradient(circle at 0 0,rgba(239,189,235,0.6),transparent 60%),
                 radial-gradient(circle at 100% 100%,rgba(166,219,184,0.7),transparent 60%),
                 linear-gradient(135deg,#fff,#f3f0f7);
      box-shadow:0 16px 50px rgba(0,0,0,0.08);
      position:relative;
      overflow:hidden;
    }
    @media(max-width:768px){
      /* En móvil: deja que el recuadro crezca verticalmente y evita que el CTA quede bajo la barra inferior */
      .wizard{
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
      }
    }
    /* Paso 1: mini-hero dentro del wizard */
    .wizard-intro{
      position:relative;
      overflow:hidden;
      border-radius:1.25rem;
      /* Un poco más ancho dentro del recuadro */
      margin-left:-0.75rem;
      margin-right:-0.75rem;
      padding:clamp(14px,2.4vw,26px);
      /* Mantener el tamaño estable durante la secuencia */
      min-height:var(--wizard-panel-h);
      background:transparent;
      text-align:center;
      color:var(--violet);
    }
    @media(max-width:768px){
      .wizard-intro{ margin-left:-0.5rem; margin-right:-0.5rem; }
    }
    .wizard-intro > *{position:relative;z-index:1;}
    .wizard-intro-title{
      margin:0;
      font-size:clamp(26px,4.8vw,46px);
      line-height:1.08;
      letter-spacing:0.01em;
      color:var(--violet);
    }
    .wizard-intro-sub{
      margin-top:0.6rem;
      font-size:clamp(15px,2.6vw,20px);
      color:var(--muted);
    }
    .wizard-intro-body{
      margin-top:0.85rem;
      color:var(--muted);
      max-width:68ch;
      margin-left:auto;
      margin-right:auto;
    }

    .wizard-intro-formhead{ display:none; }

    .wizard-intro-start{
      max-width:68ch;
      margin:1.45rem auto 0;
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:52px; /* reserva espacio para que no cambie el tamaño */
      opacity:1;
      transform:none;
      filter:none;
      transition:opacity 320ms ease, transform 520ms cubic-bezier(.2,.6,.2,1), filter 520ms cubic-bezier(.2,.6,.2,1);
    }
    .wizard-panel[data-step="1"] #wizardStart{
      box-shadow:none;
      padding:0.85rem 1.9rem;
      font-size:1rem;
      opacity:0;
      transform:translateY(10px);
      filter:blur(10px);
      pointer-events:none;
      transition:opacity 320ms ease, transform 520ms cubic-bezier(.2,.6,.2,1), filter 520ms cubic-bezier(.2,.6,.2,1);
      will-change:transform,opacity,filter;
    }
    .wizard-panel[data-step="1"].start-ready #wizardStart{
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
      pointer-events:auto;
    }
    .wizard #wizardStart:hover{ box-shadow:none; }

    /* Fase 1 (bienvenida): oculta campos y slot del siguiente */
    .wizard-panel[data-step="1"]:not(.phase-form) .wizard-intro-fields,
    .wizard-panel[data-step="1"]:not(.phase-form) .wizard-intro-next{ display:none; }

    /* Paso 1 (fase bienvenida): centra verticalmente el bloque Bienvenido → Comencemos */
    .wizard-panel[data-step="1"]:not(.phase-form) .wizard-intro{
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .wizard-panel[data-step="1"]:not(.phase-form) .wizard-intro-welcome{ margin:0; }
    .wizard-panel[data-step="1"]:not(.phase-form) .wizard-intro-start{ margin:1.1rem auto 0; }

    /* Fase 2 (form): oculta bienvenida + botón Comencemos, muestra encabezado y campos */
    .wizard-panel[data-step="1"].phase-form .wizard-intro-welcome,
    .wizard-panel[data-step="1"].phase-form .wizard-intro-start{ display:none; }
    .wizard-panel[data-step="1"].phase-form .wizard-intro-formhead{ display:block; }
    .wizard-panel[data-step="1"].phase-form .wizard-intro-fields{ display:flex; }
    .wizard-panel[data-step="1"].phase-form .wizard-intro-next{ display:flex; }
    .wizard-panel[data-step="1"].phase-form .wizard-intro-next{ margin-top:1.85rem; }

    /* Click Comencemos: difumina y desvanece el bloque actual sin cambiar tamaño */
    .wizard-panel[data-step="1"].intro-out .wizard-intro-welcome,
    .wizard-panel[data-step="1"].intro-out .wizard-intro-start{
      opacity:0;
      transform:translateY(-6px);
      filter:blur(10px);
    }

    .wizard-intro-fields{
      max-width:68ch;
      margin:1.75rem auto 0;
      display:flex;
      gap:1.1rem;
      justify-content:center;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    @media(max-width:768px){
      .wizard-intro-fields{ margin-top:1.35rem; gap:0.75rem; }
    }

    /* Contenedor de errores centralizado */
    .wizard-intro-errors{
      max-width:68ch;
      margin:0.8rem auto 0;
      text-align:center;
      min-height:1.4em;
      color:#d64545;
      font-size:0.85rem;
      font-weight:500;
      opacity:0;
      transform:translateY(-6px);
      transition:opacity 320ms ease, transform 320ms ease;
    }
    .wizard-intro-errors.visible{
      opacity:1;
      transform:translateY(0);
    }

    .wizard-intro-next{
      max-width:68ch;
      margin:1.35rem auto 0;
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:44px; /* reserva espacio: no cambia el tamaño del recuadro */
    }
    .wizard-panel[data-step="1"] #wizardNext{
      box-shadow:none;
      display:inline-flex;
      opacity:0;
      transform:translateY(12px);
      filter:blur(10px);
      pointer-events:none;
      background:#9e9e9e;
      cursor:not-allowed;
      will-change:transform,opacity,background-color,filter;
      transition:background-color 420ms ease, opacity 650ms cubic-bezier(.2,.6,.2,1), transform 650ms cubic-bezier(.2,.6,.2,1), filter 650ms cubic-bezier(.2,.6,.2,1);
    }
    .wizard #wizardNext:hover{ box-shadow:none; }
    .wizard-panel[data-step="1"].next-ready #wizardNext{
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
      pointer-events:auto;
      background:#9e9e9e;
      cursor:not-allowed;
    }
    .wizard-panel[data-step="1"] #wizardNext:disabled{
      background:#9e9e9e;
      cursor:not-allowed;
    }

    .wizard-panel[data-step="1"] #wizardNext:not(:disabled){
      background:var(--violet);
      cursor:pointer;
      transition:background-color 420ms ease;
    }
    .wizard-field{
      display:block;
      visibility:hidden;
      pointer-events:none;
      opacity:0;
      transform:translateY(12px);
      filter:blur(10px);
      will-change:transform,opacity,filter;
      flex:0 1 180px;
    }
    .wizard-field label{
      display:block;
      font-size:0.9rem;
      color:var(--ink);
      margin-bottom:0.25rem;
      text-align:center;
    }
    .wizard-field input[type="text"]{
      width:100%;
      max-width:220px;
      text-align:left;
    }
    
    @keyframes wizardFieldIn{
      to{ opacity:1; transform:translateY(0); filter:blur(0); }
    }
    .wizard-panel[data-step="1"].show-name .wizard-field-firstname{
      visibility:visible;
      pointer-events:auto;
      animation:wizardFieldIn 650ms cubic-bezier(.2,.6,.2,1) forwards;
    }
    .wizard-panel[data-step="1"].show-lastname .wizard-field-lastname{
      visibility:visible;
      pointer-events:auto;
      animation:wizardFieldIn 650ms cubic-bezier(.2,.6,.2,1) forwards;
      animation-delay:100ms;
    }
    .wizard-panel[data-step="1"].show-age .wizard-field-age{
      visibility:visible;
      pointer-events:auto;
      animation:wizardFieldIn 650ms cubic-bezier(.2,.6,.2,1) forwards;
      animation-delay:200ms;
    }

    /* Animación suave de aparición (desde el fondo) */
    .wizard-reveal{
      opacity:0;
      transform:translateY(14px);
      filter:blur(10px);
      will-change:transform,opacity,filter;
    }
    .wizard-panel[data-step="1"].play .wizard-reveal{
      animation:wizardHeroIn 900ms cubic-bezier(.2,.6,.2,1) forwards;
    }
    /* Retraso global: se mantiene el desfase relativo entre partes */
    .wizard-panel[data-step="1"].play .wizard-reveal.d1{animation-delay:350ms;}
    .wizard-panel[data-step="1"].play .wizard-reveal.d2{animation-delay:1050ms;}
    .wizard-panel[data-step="1"].play .wizard-reveal.d3{animation-delay:1850ms;}
    @keyframes wizardHeroIn{
      to{ opacity:1; transform:translateY(0); filter:blur(0); }
    }
    .wizard-steps{
      display:flex;
      gap:0.9rem;
      flex-wrap:wrap;
      margin-bottom:1rem;
    }
    @media(max-width:768px){
      /* En móvil, centra los dots para que la animación se vea "cuadrada" y centrada */
      .wizard-steps{ justify-content:center; }
    }
    .wizard-step-pill{
      width:14px;
      height:14px;
      border-radius:999px;
      background:rgba(255,255,255,0.95);
      display:inline-block;
      flex:0 0 14px;
      overflow:hidden;
      text-indent:-9999px;
      white-space:nowrap;
      transition:transform 220ms ease, background-color 320ms ease;
      cursor:pointer;
    }
    .wizard-step-pill:focus-visible{
      outline:2px solid rgba(68,56,80,0.55);
      outline-offset:3px;
    }
    .wizard-step-pill.active{
      background:var(--violet);
      transform:scale(1.65);
      animation:wizardDotGrow 240ms ease-out;
    }
    .wizard-step-pill.leaving{
      animation:wizardDotShrink 240ms ease-in;
    }
    @keyframes wizardDotGrow{
      from{ transform:scale(1); }
      to{ transform:scale(1.65); }
    }
    @keyframes wizardDotShrink{
      from{ transform:scale(1.65); }
      to{ transform:scale(1); }
    }
    .wizard-panel{display:none;}
    .wizard-panel.active{
      display:block;
      height:var(--wizard-panel-h);
      overflow-y:auto;
      overflow-x:hidden;
    }

    @media(max-width:768px){
      /* Móvil: por defecto, que los pasos se ajusten al contenido (sin scroll interno) */
      .wizard-panel.active{
        height:auto;
        overflow:visible;
      }
      /* Excepción: Paso 1 en bienvenida debe mantener altura fija para su centrado/animación */
      .wizard-panel[data-step="1"]:not(.phase-form).active{
        height:var(--wizard-panel-h);
        overflow:hidden;
      }
      /* Paso 6 define height/overflow propios; en móvil también debe auto-ajustar */
      .wizard-panel[data-step="6"].active{
        height:auto;
        overflow:visible;
      }
    }

    @media(max-width:768px){
      /* Móvil (solo Paso 1 en fase formulario): que el recuadro se ajuste al contenido
         para que el botón "Siguiente" no se corte y no requiera scroll interno. */
      .wizard-panel[data-step="1"].phase-form.active{
        height:auto;
        overflow:visible;
      }
      .wizard-panel[data-step="1"].phase-form .wizard-intro{
        min-height:auto;
      }
      .wizard-panel[data-step="1"].phase-form .wizard-intro-next{
        margin-top:1.55rem;
      }
    }

    /* Paso 6: pantalla final centrada (sin scroll visible) */
    .wizard-panel[data-step="6"].active{
      display:flex;
      flex-direction:column;
      text-align:center;
      overflow-y:hidden;
      height:var(--wizard-panel-h);
    }
    /* Desktop: mantener el alto base, pero permitir que crezca HACIA ABAJO (sin recortar). */
    @media (min-width: 769px){
      .wizard-panel[data-step="6"].active{
        min-height:var(--wizard-panel-h);
        height:auto;
        /* Evita que blur/scale provoquen scrollbar momentáneo */
        overflow-y:clip;
        overflow-x:clip;
        contain:paint;
      }
    }
    @media(max-width:768px){
      /* En móvil, permitir que el contenido del paso 6 crezca (evita recortes) */
      .wizard-panel[data-step="6"].active{
        height:auto;
        overflow:visible;
      }
    }
    .wizard-panel[data-step="6"] .s6-center{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0.8rem;
      padding:0 0.5rem;
    }
    /* Desktop: anclar ARRIBA solo para resultados (ok/review/stop).
       La subvista "loading" debe quedar centrada. */
    @media (min-width: 769px){
      .wizard-panel[data-step="6"] .s6-center:has(.s6-view.active:not([data-s6view="form"]):not([data-s6view="loading"])){
        justify-content:flex-start;
        padding-top:0.95rem;
      }
    }
    .wizard-panel[data-step="6"] .wizard-intro-title{ margin:0; }
    .wizard-panel[data-step="6"] .wizard-intro-sub{ margin-top:0.15rem; }
    .wizard-panel[data-step="6"] .s6-email{
      width:100%;
      max-width:340px;
      display:flex;
      flex-direction:column;
      align-items:center;
      margin-top:0.5rem;
      margin-left:auto;
      margin-right:auto;
    }
    .wizard-panel[data-step="6"] .s6-email input{
      width:100%;
      max-width:260px;
      border-radius:0.7rem;
      border:1px solid rgba(0,0,0,0.12);
      padding:0.6rem 0.8rem;
      text-align:center;
      margin-left:auto;
      margin-right:auto;
    }
    .wizard-panel[data-step="6"] .s6-error{
      width:100%;
      max-width:260px;
      margin-top:0.35rem;
      margin-left:auto;
      margin-right:auto;
      font-size:0.78rem;
      min-height:1.2em; /* reserva espacio para que NO mueva el botón */
      opacity:0;
      transform:translateY(-6px);
      filter:blur(10px);
      transition:opacity 420ms ease, transform 420ms ease, filter 420ms ease;
    }
    .wizard-panel[data-step="6"] .s6-error.visible{
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
    }

    .wizard-panel[data-step="6"] .s6-terms{
      width:100%;
      max-width:340px;
      margin:0.35rem auto 0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0.25rem;
    }
    .wizard-panel[data-step="6"] .s6-consents{
      width:100%;
      max-width:340px;
      margin:0.55rem auto 0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0.35rem;
    }
    .wizard-panel[data-step="6"] .s6-terms-label{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:0.55rem;
      color:var(--muted);
      font-size:0.92rem;
      cursor:pointer;
      user-select:none;
    }
    .wizard-panel[data-step="6"] .s6-terms-link{
      text-decoration:underline;
      color:inherit;
      cursor:pointer;
    }

    .s6-terms-pop{
      position:fixed;
      left:0;
      top:0;
      transform:translateY(-100%);
      width:min(420px, calc(100vw - 1.4rem));
      background:#ffffff;
      border:1px solid rgba(0,0,0,0.12);
      border-radius:12px;
      padding:0.75rem 0.9rem;
      text-align:left;
      color:var(--muted);
      font-size:0.82rem;
      line-height:1.35;
      opacity:0;
      pointer-events:none;
      z-index:50;
      transition:opacity 150ms ease;
    }
    .s6-terms-pop.is-open{
      opacity:1;
      pointer-events:auto;
    }
    .s6-terms-pop strong{
      color:var(--text);
      font-weight:600;
    }
    .wizard-panel[data-step="6"] .s6-terms-label input{
      position:absolute;
      opacity:0;
      width:1px;
      height:1px;
      pointer-events:none;
    }
    .wizard-panel[data-step="6"] .s6-terms-box{
      width:14px;
      height:14px;
      border-radius:4px;
      border:1.5px solid rgba(0,0,0,0.18);
      background:#ffffff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 14px;
      position:relative;
    }
    .wizard-panel[data-step="6"] .s6-terms-box::after{
      content:"";
      width:7px;
      height:7px;
      border-radius:2px;
      background:var(--muted);
      opacity:0;
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
    }
    .wizard-panel[data-step="6"] #s6Terms:checked + .s6-terms-box,
    .wizard-panel[data-step="6"] #s6Auth:checked + .s6-terms-box{
      border-color:rgba(0,0,0,0.18);
      background:#ffffff;
    }
    .wizard-panel[data-step="6"] #s6Terms:checked + .s6-terms-box::after,
    .wizard-panel[data-step="6"] #s6Auth:checked + .s6-terms-box::after{ opacity:0.55; }

    /* Paso 6: separación del botón "Ver Resultados" */
    .wizard-panel[data-step="6"] #s6ViewResults{ margin-top:0.35rem; }

    /* Paso 6: subpantallas de resultado (internas) */
    .wizard-panel[data-step="6"] .s6-view{
      display:none;
      width:100%;
      max-width:860px;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }
    .wizard-panel[data-step="6"] .s6-view.active{ display:flex; }
    .wizard-panel[data-step="6"] .s6-block{ width:100%; max-width:720px; }

    @media(max-width:768px){
      /* En móvil, usa todo el ancho y fuerza un recuadro más grande (más "cuadrado") */
      .wizard-panel[data-step="6"] .s6-view{ max-width:none; }
      .wizard-panel[data-step="6"] .s6-block{ max-width:none; }
      .wizard-panel[data-step="6"] .s6-view.active .s6-block{
        min-height:min(72vh, calc(100vw - 2.5rem));
        display:flex;
        flex-direction:column;
        justify-content:center;
      }
    }

    /* Paso 6: transición interna (aparecer / desvanecer) al cambiar de subvista */
    .wizard-panel[data-step="6"] .s6-view.transition-out{
      pointer-events:none;
      overflow:clip;
      animation:wizardPanelOut 560ms cubic-bezier(.2,.6,.2,1) forwards;
    }
    .wizard-panel[data-step="6"] .s6-view.transition-in{
      overflow:clip;
      animation:wizardPanelIn 820ms cubic-bezier(.2,.6,.2,1) both;
    }

    /* Paso 6: subvista "Calculando tus resultados" */
    .wizard-panel[data-step="6"] .s6-loading{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:0.65rem;
      padding:0.5rem 0;
    }
    .wizard-panel[data-step="6"] .s6-spinner{
      width:56px;
      height:56px;
      display:block;
      filter: drop-shadow(0 8px 22px rgba(68,56,80,0.18));
      transform-origin: 50% 50%;
      animation: s6SpinnerSpin 1.6s linear infinite;
    }
    @keyframes s6SpinnerSpin{
      from{ transform: rotate(0deg); }
      to{ transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce){
      .wizard-panel[data-step="6"] .s6-spinner{ animation:none; }
    }

    /* Paso 6: transición interna más lenta y escalonada (título -> subtítulos -> botones) */
    .wizard-panel[data-step="6"] .s6-view .wizard-intro-title,
    .wizard-panel[data-step="6"] .s6-view .wizard-intro-sub,
    .wizard-panel[data-step="6"] .s6-view .btn-primary,
    .wizard-panel[data-step="6"] .s6-view .btn-secondary{
      opacity:1;
    }

    /* Variante sin blur (más fluida) para Paso 6 */
    @keyframes wizardPanelInNoBlur{
      from{ opacity:0; transform:translateY(10px); }
      to{ opacity:1; transform:translateY(0); }
    }
    .wizard-panel[data-step="6"] .s6-view.active .wizard-intro-title{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:0ms;
      will-change:opacity, transform;
    }
    .wizard-panel[data-step="6"] .s6-view.active .wizard-intro-sub{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:170ms;
      will-change:opacity, transform;
    }
    .wizard-panel[data-step="6"] .s6-view.active .btn-primary,
    .wizard-panel[data-step="6"] .s6-view.active .btn-secondary{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:360ms;
      will-change:opacity, transform;
    }

    /* Paso 6 (ok/review): secuencia específica (subtítulo -> tarjetas -> texto -> botón) */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-cards,
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-bottom .wizard-intro-sub,
    .wizard-panel[data-step="6"] :is(#s6ResultOk #s6AgendaOk, #s6ResultReview #s6AgendaReview){
      opacity:0;
      transform:translateY(10px);
      will-change:opacity, transform;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-ok-top .wizard-intro-title{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:0ms;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-ok-top .wizard-intro-sub{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:170ms;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-cards{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:360ms;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-ok-bottom .wizard-intro-sub{
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:540ms;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk.active #s6AgendaOk, #s6ResultReview.active #s6AgendaReview){
      animation:wizardPanelInNoBlur 1100ms cubic-bezier(.22,1,.36,1) both;
      animation-delay:700ms;
    }

    /* Subtítulo inferior: más abajo y más cerca del botón */
    .wizard-panel[data-step="6"] .s6-gap-lg{ margin-top:1.65rem; }
    .wizard-panel[data-step="6"] .s6-cta{ margin-top:1rem; box-shadow:none; }
    .wizard-panel[data-step="6"] .s6-cta:hover{ box-shadow:none; }

    /* Paso 6 (ok/review): layout top / cards / bottom dentro del MISMO recuadro */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview){ max-width:1400px; flex:1 1 auto; --s6-check-size:30px; }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-block{
      max-width:1400px;
      width:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:0.9rem;
      padding-top:0.25rem;
      padding-bottom:0.35rem;
    }
    /* En desktop, agranda la “pestaña” (wizard) cuando está activa la vista OK.
       Así las tarjetas tienen más ancho útil SIN cambiar su padding interno. */
    @media (min-width: 769px){
      .wizard:has(.wizard-panel[data-step="6"].active :is(#s6ResultOk, #s6ResultReview).active){
        margin-left:-1rem;
        margin-right:-1rem;
      }
    }
    /* En desktop, usa la altura del panel para empujar top/bottom */
    @media (min-width: 769px){
      .wizard-panel[data-step="6"].active :is(#s6ResultOk, #s6ResultReview).active{ align-self:stretch; }
      .wizard-panel[data-step="6"].active :is(#s6ResultOk, #s6ResultReview).active .s6-block{ min-height:calc(var(--wizard-panel-h) - 0.5rem); }
    }
    /* En móvil el paso 6 crece; no forzar alturas */
    @media (max-width: 768px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-block{ min-height:auto; padding-top:0; padding-bottom:0; }
    }

    /* Resultado OK/Review: subir SOLO el bloque superior (sin crear panel interno) */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-top{ margin-top:0; }
    @media (min-width: 769px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-top .wizard-intro-title{ margin-top:0; }
    }
    @media (max-width: 768px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-top .wizard-intro-title{ margin-top:0; }
    }

    /* Bajar el CTA inferior (desktop: más cerca del borde inferior del recuadro) */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-bottom{ padding-bottom:0; }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-bottom .wizard-intro-sub{ margin-top:0; }
    /* Más aire entre tarjetas y CTA (texto + botón) */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-bottom{ margin-top:1.05rem; }
    @media (max-width: 768px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-ok-bottom{ margin-top:0.85rem; }
    }

    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-cards{
      margin-top:1.05rem;
      display:grid;
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:0.7rem;
      align-items:stretch;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card{
      text-align:left;
      padding:0.85rem 0.85rem 0.8rem;
      /* Evita el "salto"/re-rasterizado del texto: la animación escala SOLO el fondo (::before) */
      position:relative;
      background:transparent;
      border:0;
      box-shadow:none;
      transform:none;
      transform-origin:center;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background-color:rgba(255,255,255,0.9);
      border:1px solid rgba(0,0,0,0.04);
      box-shadow:0 10px 30px rgba(0,0,0,0.04);
      transform:scale(1);
      transform-origin:center;
      pointer-events:none;
      will-change:transform, background-color;
      z-index:0;
    }
    /* Shadow extra (solo opacity) para evitar animar box-shadow (caro) */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      opacity:0;
      box-shadow:0 18px 52px rgba(0,0,0,0.08);
      transform:scale(1);
      transform-origin:center;
      will-change:opacity, transform;
      z-index:0;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card > *{
      position:relative;
      z-index:1;
    }
    /* Reduce el "jitter" del texto al transformar */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-head,
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-text{
      transform:translateZ(0);
      backface-visibility:hidden;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-head{
      display:flex;
      flex-direction:column;
      gap:0.35rem;
      align-items:center;
      justify-content:flex-start;
      margin-bottom:0.45rem;
      min-width:0; /* clave: permite que el texto se recorte dentro de flex */
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-title{
      width:100%;
      text-align:left;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-icon{
      width:24px;
      height:24px;
      flex:0 0 24px;
      color:var(--violet);
      margin-top:0;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-icon *{
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-title{
      font-weight:600;
      color:var(--violet);
      line-height:1.2;
      font-size:0.94rem;
      min-width:0;
    }
    /* Objetivo: títulos en 1 línea (desktop). */
    @media (min-width: 980px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-title{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
    }

    /* Paso 6 (ok): animación de foco por tarjetas (post-texto) */
    @keyframes s6CardComplete{
      0%{ transform:scale(1); background-color:rgba(255,255,255,0.9); }
      /* Subida ULTRA rápida (pero visible): llega al pico temprano */
      3%{ transform:scale(1.008); background-color:rgba(255,255,255,0.9); }
      6%{ transform:scale(1.018); background-color:rgba(255,255,255,0.9); }
      9%{ transform:scale(1.032); background-color:rgba(255,255,255,0.9); }
      12%{ transform:scale(1.048); background-color:rgba(255,255,255,0.9); }
      14%{ transform:scale(1.062); background-color:rgba(255,255,255,0.9); }
      16%{ transform:scale(1.07); background-color:rgba(255,255,255,0.9); }
      /* Mantiene el foco (zoom) */
      52%{ transform:scale(1.07); background-color:rgba(255,255,255,0.9); }
      /* Coloreado gradual */
      68%{ transform:scale(1.07); background-color:rgba(248,253,248,0.92); }
      82%{ transform:scale(1.07); background-color:#F2FBF1; }
      /* Bajada más fluida (más frames) */
      84%{ transform:scale(1.069); background-color:#F2FBF1; }
      86%{ transform:scale(1.066); background-color:#F2FBF1; }
      88%{ transform:scale(1.062); background-color:#F2FBF1; }
      90%{ transform:scale(1.055); background-color:#F2FBF1; }
      92%{ transform:scale(1.045); background-color:#F2FBF1; }
      94%{ transform:scale(1.035); background-color:#F2FBF1; }
      96%{ transform:scale(1.026); background-color:#F2FBF1; }
      98%{ transform:scale(1.014); background-color:#F2FBF1; }
      100%{ transform:scale(1); background-color:#F2FBF1; }
    }

    @keyframes s6CardCompleteShadow{
      0%{ opacity:0; transform:scale(1); }
      3%{ opacity:0.25; transform:scale(1.008); }
      6%{ opacity:0.55; transform:scale(1.018); }
      9%{ opacity:0.8; transform:scale(1.032); }
      12%{ opacity:1; transform:scale(1.048); }
      14%{ opacity:1; transform:scale(1.062); }
      16%{ opacity:1; transform:scale(1.07); }
      82%{ opacity:1; transform:scale(1.07); }
      92%{ opacity:0.55; transform:scale(1.045); }
      100%{ opacity:0; transform:scale(1); }
    }

    /* Versión móvil: mismo efecto pero con zoom más sutil para evitar solapes */
    @keyframes s6CardCompleteMobile{
      0%{ transform:scale(1); background-color:rgba(255,255,255,0.9); }
      /* Subida ULTRA rápida (pero visible) */
      6%{ transform:scale(1.02); background-color:rgba(255,255,255,0.9); }
      10%{ transform:scale(1.045); background-color:rgba(255,255,255,0.9); }
      13%{ transform:scale(1.065); background-color:rgba(255,255,255,0.9); }
      16%{ transform:scale(1.075); background-color:rgba(255,255,255,0.9); }
      52%{ transform:scale(1.075); background-color:rgba(255,255,255,0.9); }
      68%{ transform:scale(1.075); background-color:rgba(248,253,248,0.92); }
      82%{ transform:scale(1.075); background-color:#F2FBF1; }
      84%{ transform:scale(1.074); background-color:#F2FBF1; }
      88%{ transform:scale(1.066); background-color:#F2FBF1; }
      92%{ transform:scale(1.05); background-color:#F2FBF1; }
      96%{ transform:scale(1.03); background-color:#F2FBF1; }
      100%{ transform:scale(1); background-color:#F2FBF1; }
    }
    @keyframes s6CardCompleteShadowMobile{
      0%{ opacity:0; transform:scale(1); }
      6%{ opacity:0.55; transform:scale(1.018); }
      13%{ opacity:0.9; transform:scale(1.034); }
      16%{ opacity:1; transform:scale(1.075); }
      82%{ opacity:1; transform:scale(1.075); }
      92%{ opacity:0.55; transform:scale(1.05); }
      100%{ opacity:0; transform:scale(1); }
    }
    @keyframes s6CardCompleteHeadMobile{
      0%{ transform:scale(1); }
      6%{ transform:scale(1.01); }
      10%{ transform:scale(1.025); }
      16%{ transform:scale(1.06); }
      52%{ transform:scale(1.06); }
      84%{ transform:scale(1.055); }
      92%{ transform:scale(1.035); }
      100%{ transform:scale(1); }
    }
    @keyframes s6CardCompleteTextMobile{
      0%{ transform:scale(1); }
      6%{ transform:scale(1.008); }
      10%{ transform:scale(1.02); }
      16%{ transform:scale(1.045); }
      52%{ transform:scale(1.045); }
      84%{ transform:scale(1.04); }
      92%{ transform:scale(1.026); }
      100%{ transform:scale(1); }
    }
    @keyframes s6CardCurrentMobile{
      0%{ transform:scale(1); }
      14%{ transform:scale(1.012); }
      28%{ transform:scale(1.03); }
      44%{ transform:scale(1.075); }
      100%{ transform:scale(1.075); }
    }
    @keyframes s6CardCurrentHeadMobile{
      0%{ transform:scale(1); }
      14%{ transform:scale(1.01); }
      28%{ transform:scale(1.024); }
      44%{ transform:scale(1.06); }
      100%{ transform:scale(1.06); }
    }
    @keyframes s6CardCurrentTextMobile{
      0%{ transform:scale(1); }
      14%{ transform:scale(1.008); }
      28%{ transform:scale(1.02); }
      44%{ transform:scale(1.045); }
      100%{ transform:scale(1.045); }
    }
    /* Solo para icono+título: que sí crezcan, sin mover el texto descriptivo */
    @keyframes s6CardCompleteHead{
      0%{ transform:scale(1); }
      4%{ transform:scale(1.008); }
      7%{ transform:scale(1.016); }
      10%{ transform:scale(1.026); }
      13%{ transform:scale(1.04); }
      15%{ transform:scale(1.054); }
      16%{ transform:scale(1.06); }
      52%{ transform:scale(1.06); }
      /* Bajada más suave (más frames) */
      84%{ transform:scale(1.055); }
      86%{ transform:scale(1.05); }
      88%{ transform:scale(1.045); }
      90%{ transform:scale(1.038); }
      92%{ transform:scale(1.03); }
      94%{ transform:scale(1.022); }
      96%{ transform:scale(1.015); }
      98%{ transform:scale(1.008); }
      100%{ transform:scale(1); }
    }

    /* Texto descriptivo: también crece/achica, pero más sutil que el head */
    @keyframes s6CardCompleteText{
      0%{ transform:scale(1); }
      4%{ transform:scale(1.008); }
      7%{ transform:scale(1.016); }
      10%{ transform:scale(1.026); }
      13%{ transform:scale(1.038); }
      15%{ transform:scale(1.05); }
      16%{ transform:scale(1.055); }
      52%{ transform:scale(1.055); }
      /* Bajada más suave (más frames) */
      84%{ transform:scale(1.052); }
      86%{ transform:scale(1.046); }
      88%{ transform:scale(1.04); }
      90%{ transform:scale(1.032); }
      92%{ transform:scale(1.024); }
      94%{ transform:scale(1.016); }
      96%{ transform:scale(1.01); }
      98%{ transform:scale(1.005); }
      100%{ transform:scale(1); }
    }
    @keyframes s6CardCurrent{
      0%{ transform:scale(1); box-shadow:0 10px 30px rgba(0,0,0,0.04); }
      6%{ transform:scale(1.008); box-shadow:0 10.5px 31px rgba(0,0,0,0.042); }
      12%{ transform:scale(1.018); box-shadow:0 11px 32px rgba(0,0,0,0.045); }
      18%{ transform:scale(1.03); box-shadow:0 12px 34px rgba(0,0,0,0.05); }
      24%{ transform:scale(1.042); box-shadow:0 13px 36px rgba(0,0,0,0.055); }
      30%{ transform:scale(1.052); box-shadow:0 14px 39px rgba(0,0,0,0.06); }
      36%{ transform:scale(1.06); box-shadow:0 15px 42px rgba(0,0,0,0.065); }
      44%{ transform:scale(1.065); box-shadow:0 15.5px 43px rgba(0,0,0,0.067); }
      54%{ transform:scale(1.068); box-shadow:0 15.8px 43.6px rgba(0,0,0,0.069); }
      62%{ transform:scale(1.07); box-shadow:0 16px 44px rgba(0,0,0,0.07); }
      100%{ transform:scale(1.07); box-shadow:0 16px 44px rgba(0,0,0,0.07); }
    }
    @keyframes s6CardCurrentHead{
      0%{ transform:scale(1); }
      8%{ transform:scale(1.008); }
      14%{ transform:scale(1.016); }
      20%{ transform:scale(1.026); }
      28%{ transform:scale(1.038); }
      36%{ transform:scale(1.05); }
      48%{ transform:scale(1.056); }
      62%{ transform:scale(1.06); }
      100%{ transform:scale(1.06); }
    }
    @keyframes s6CardCurrentText{
      0%{ transform:scale(1); }
      8%{ transform:scale(1.008); }
      14%{ transform:scale(1.016); }
      20%{ transform:scale(1.026); }
      28%{ transform:scale(1.038); }
      36%{ transform:scale(1.05); }
      48%{ transform:scale(1.056); }
      62%{ transform:scale(1.06); }
      100%{ transform:scale(1.06); }
    }

    /* Paso 6 (ok): check de completado en tarjeta 1 */
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-check-wrap{
      margin-top:0.55rem;
      height:calc(var(--s6-check-size) + 2px);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-check{
      width:var(--s6-check-size);
      height:var(--s6-check-size);
      opacity:0;
      transform:translateY(8px) scale(0.6);
      filter: drop-shadow(0 8px 18px rgba(68,56,80,0.18));
      will-change:opacity, transform;
    }
    @keyframes s6CheckIn{
      0%{ opacity:0; transform:translateY(10px) scale(0.55); }
      70%{ opacity:1; transform:translateY(0) scale(1.06); }
      100%{ opacity:1; transform:translateY(0) scale(1); }
    }

    /* Inicia después de que terminan las animaciones del texto/botón (ver delays arriba) */
    @media (min-width: 769px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1){ z-index:2; }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2){ z-index:1; }

      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::before{
        animation:s6CardComplete 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::after{
        animation:s6CardCompleteShadow 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2)::before{
        animation:s6CardCurrent 520ms cubic-bezier(.16,1,.3,1) both;
        /* empieza apenas termina la 1 (más fluido, sin pausa larga) */
        animation-delay:4150ms;
      }

      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-head{
        animation:s6CardCompleteHead 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
        transform-origin:center top;
        will-change:transform;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-text{
        animation:s6CardCompleteText 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
        transform-origin:center top;
        will-change:transform;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2) .s6-flow-card-head{
        animation:s6CardCurrentHead 520ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:4150ms;
        transform-origin:center top;
        will-change:transform;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2) .s6-flow-card-text{
        animation:s6CardCurrentText 520ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:4150ms;
        transform-origin:center top;
        will-change:transform;
      }

      /* Aparece justo después de que la tarjeta 1 vuelve a su tamaño normal (1900ms delay + 1900ms duration = 3800ms) */
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-check{
        animation:s6CheckIn 350ms cubic-bezier(.22,1,.36,1) both;
        animation-delay:3800ms;
      }
    }

    /* Móvil: habilita la misma secuencia (tarjeta 1 -> check -> tarjeta 2) */
    @media (max-width: 768px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::before{
        animation:s6CardCompleteMobile 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::after{
        animation:s6CardCompleteShadowMobile 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-head{
        animation:s6CardCompleteHeadMobile 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
        transform-origin:center top;
        will-change:transform;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-text{
        animation:s6CardCompleteTextMobile 1900ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:1900ms;
        transform-origin:center top;
        will-change:transform;
      }

      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2)::before{
        animation:s6CardCurrentMobile 520ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:4150ms;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2) .s6-flow-card-head{
        animation:s6CardCurrentHeadMobile 520ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:4150ms;
        transform-origin:center top;
        will-change:transform;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2) .s6-flow-card-text{
        animation:s6CardCurrentTextMobile 520ms cubic-bezier(.16,1,.3,1) both;
        animation-delay:4150ms;
        transform-origin:center top;
        will-change:transform;
      }

      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-check{
        animation:s6CheckIn 350ms cubic-bezier(.22,1,.36,1) both;
        animation-delay:3800ms;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1),
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2){
        animation:none;
        transform:none;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1){
        background:transparent;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::before,
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2)::before{
        animation:none;
        transform:none;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-head,
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2) .s6-flow-card-head,
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1) .s6-flow-card-text,
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(2) .s6-flow-card-text{
        animation:none;
        transform:none;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::before{
        background-color:#F2FBF1;
      }
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview).active .s6-flow-card:nth-child(1)::after{
        opacity:0;
      }

      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-check{
        opacity:1;
        transform:none;
        animation:none;
      }
    }
    .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-card-text{
      margin:0.2rem 0 0;
      color:var(--muted);
      line-height:1.35;
      font-size:0.88rem;
    }

    @media (max-width: 980px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 680px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 420px){
      .wizard-panel[data-step="6"] :is(#s6ResultOk, #s6ResultReview) .s6-flow-cards{ grid-template-columns:1fr; }
    }

    /* Paso 6 (review): fallback móvil para asegurar tarjetas en celular */
    @media (max-width: 768px){
      .wizard-panel[data-step="6"] #s6ResultReview .s6-flow-cards{
        display:grid;
        grid-template-columns:1fr;
        gap:0.7rem;
      }
    }

    /* Paso 6: en subpantallas (no el form), sube título/subtítulo superior */
    .wizard-panel[data-step="6"] .s6-view:not([data-s6view="form"]) .wizard-intro-title{ margin-top:0; margin-bottom:0.35rem; }
    .wizard-panel[data-step="6"] .s6-view:not([data-s6view="form"]) .wizard-intro-sub:not(.s6-gap-lg){ margin-top:0; }

    /* Paso 5: evitar que aparezca scrollbar durante las animaciones (recuadro fijo) */
    .wizard-panel[data-step="5"].active{ overflow-y:hidden; }

    @media (max-width: 768px){
      /* En móvil, el paso 5 puede crecer: no recortar contenido */
      .wizard-panel[data-step="5"].active{ overflow:visible; }
    }

    /* Transición suave entre pasos (mismo recuadro, cambia contenido) */
    .wizard-panel.transition-out{
      pointer-events:none;
      animation:wizardPanelOut 420ms ease forwards;
    }
    .wizard-panel.transition-in{
      animation:wizardPanelIn 650ms cubic-bezier(.2,.6,.2,1) both;
    }
    @keyframes wizardPanelOut{
      to{ opacity:0; transform:translateY(-6px); filter:blur(10px); }
    }
    @keyframes wizardPanelIn{
      from{ opacity:0; transform:translateY(10px); filter:blur(10px); }
      to{ opacity:1; transform:translateY(0); filter:blur(0); }
    }

    /* Paso 2, 3, 4 y 5: intereses/diagnósticos en formato “burbujas” */
    .wizard-panel[data-step="2"] .symptom-group,
    .wizard-panel[data-step="3"] .symptom-group,
    .wizard-panel[data-step="4"] .symptom-group,
    .wizard-panel[data-step="5"] .symptom-group{ display:none; }
    .wizard-panel[data-step="2"],
    .wizard-panel[data-step="3"],
    .wizard-panel[data-step="4"],
    .wizard-panel[data-step="5"]{ text-align:center; }
    .wizard-panel[data-step="2"].active,
    .wizard-panel[data-step="3"].active,
    .wizard-panel[data-step="4"].active,
    .wizard-panel[data-step="5"].active{
      display:flex;
      flex-direction:column;
    }
    .wizard-panel[data-step="2"] .interest-intro,
    .wizard-panel[data-step="3"] .interest-intro,
    .wizard-panel[data-step="4"] .interest-intro,
    .wizard-panel[data-step="5"] .interest-intro{
      margin-top:0;
      flex:1 1 auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .wizard-panel[data-step="2"] .interest-grid,
    .wizard-panel[data-step="3"] .interest-grid,
    .wizard-panel[data-step="4"] .interest-grid,
    .wizard-panel[data-step="5"] .interest-grid{
      margin-top:0;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap:0.6rem;
      row-gap:1rem;
      justify-items:center;
      width:100%;
      align-content:start;
    }

    @media (max-width: 768px){
      /* Móvil: más aire entre subtítulo y botones, y evita centrado vertical exagerado */
      .wizard-panel[data-step="2"] .wizard-intro-sub,
      .wizard-panel[data-step="3"] .wizard-intro-sub,
      .wizard-panel[data-step="4"] .wizard-intro-sub,
      .wizard-panel[data-step="5"] .wizard-intro-sub{ margin-bottom:1.35rem; }

      .wizard-panel[data-step="2"] .interest-intro,
      .wizard-panel[data-step="3"] .interest-intro,
      .wizard-panel[data-step="4"] .interest-intro,
      .wizard-panel[data-step="5"] .interest-intro{
        flex:0 0 auto;
        min-height:auto;
        align-items:flex-start;
        justify-content:flex-start;
      }

      .wizard-panel[data-step="2"] .interest-grid,
      .wizard-panel[data-step="3"] .interest-grid,
      .wizard-panel[data-step="4"] .interest-grid,
      .wizard-panel[data-step="5"] .interest-grid{ row-gap:0.9rem; }

      /* Móvil: separación extra entre opciones y navegación */
      .wizard.step-2 .wizard-nav,
      .wizard.step-3 .wizard-nav,
      .wizard.step-4 .wizard-nav,
      .wizard.step-5 .wizard-nav{ margin-top:clamp(3.2rem, 7vh, 5.2rem); }
    }
    @media (min-width: 720px){
      .wizard-panel[data-step="2"] .interest-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .wizard-panel[data-step="3"] .interest-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 860px;
        margin-left:auto;
        margin-right:auto;
      }
      .wizard-panel[data-step="4"] .interest-grid,
      .wizard-panel[data-step="5"] .interest-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 760px;
        margin-left:auto;
        margin-right:auto;
      }
    }

    /* Paso 5: sí/no siempre centrado en 2 columnas (no 3) */
    .wizard-panel[data-step="5"] .interest-grid.yesno-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 420px;
      margin-left:auto;
      margin-right:auto;
    }
    @media (min-width: 720px){
      .wizard-panel[data-step="5"] .interest-grid.yesno-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    /* Paso 5: pantalla introductoria con animación y fase de contenido */
    .wizard-panel[data-step="5"]{ position:relative; }
    .wizard-panel[data-step="5"] .s5-intro{
      display:none;
      flex:1 1 auto;
      min-height:0;
      align-items:center;
      justify-content:center;
      text-align:center;
      flex-direction:column;
      gap:0.6rem;
    }
    .wizard-panel[data-step="5"].phase-intro .s5-intro{ display:flex; }
    .wizard-panel[data-step="5"] .s5-content{ display:none; flex:1 1 auto; min-height:0; }
    .wizard-panel[data-step="5"].phase-content .s5-content{ display:flex; flex-direction:column; }

    .wizard-panel[data-step="5"] .s5-q{ display:none; flex:1 1 auto; min-height:0; }
    .wizard-panel[data-step="5"] .s5-q.active{
      display:flex;
      flex-direction:column;
      flex:1 1 auto;
      min-height:0;
      /* Mantén layout estable; el desplazamiento se aplica al título */
      padding-top: 0;
    }

    /* Paso 5: título fijo (centrado en intro, luego sube suavemente al entrar a contenido) */
    .wizard-panel[data-step="5"] .s5-fixed-title{
      position:absolute;
      left:50%;
      width:min(720px, calc(100% - 2rem));
      text-align:center;
      transform:translateX(-50%);
      transition:top 750ms cubic-bezier(.2,.6,.2,1);
      will-change:top;
      pointer-events:none;
    }
    .wizard-panel[data-step="5"].phase-intro .s5-fixed-title{
      /* En intro se ajusta por JS para que el gap título-subtítulo == subtítulo-botón */
      top:42%;
    }
    .wizard-panel[data-step="5"].phase-content .s5-fixed-title{
      top: clamp(3.2rem, 10.5vh, 6.6rem);
    }

    @media (max-width: 768px){
      /* Móvil: en la intro el título absoluto puede superponerse con el subtítulo.
         Lo dejamos "en flujo" para que no choque con el texto. */
      .wizard-panel[data-step="5"].phase-intro .s5-fixed-title{
        position:static;
        left:auto;
        top:auto;
        transform:none;
        width:100%;
        margin:0.6rem auto 1rem;
      }
      .wizard-panel[data-step="5"].phase-intro .s5-intro{
        justify-content:flex-start;
        padding-top:0.2rem;
      }
    }

    /* Paso 5: en intro, mantenemos subtítulo y botón como estaban (no desplazar) */

    /* Paso 5: en contenido, deja espacio bajo el título fijo para preguntas/controles */
    .wizard-panel[data-step="5"].phase-content .s5-q.active{
      padding-top: clamp(5.6rem, 14vh, 9.2rem);
    }

    @media (max-width: 768px){
      /* En móvil el título fijo ocupa más alto relativo: deja más espacio para que NO se solape */
      .wizard-panel[data-step="5"].phase-content .s5-q.active{
        padding-top: clamp(7.2rem, 18vh, 11rem);
      }
    }

    /* Paso 5: separa más los subtítulos/textos del título (sin mover botones) */
    .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="2"] .wizard-intro-sub,
    .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="3"] .wizard-intro-sub,
    .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="4"] .wizard-intro-sub,
    .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="2"] .text-sm.muted,
    .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="3"] .text-sm.muted,
    .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="4"] .text-sm.muted{
      position:relative;
      top:30px;
    }

    @media (max-width: 768px){
      /* En móvil, usar márgenes en vez de desplazar con top (evita solapes) */
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="2"] .wizard-intro-sub,
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="3"] .wizard-intro-sub,
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="4"] .wizard-intro-sub,
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="2"] .text-sm.muted,
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="3"] .text-sm.muted,
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="4"] .text-sm.muted{
        position:static;
        top:auto;
      }
      .wizard-panel[data-step="5"].phase-content .s5-q .wizard-intro-sub{ margin-top:0.9rem; }
      .wizard-panel[data-step="5"].phase-content .s5-q .text-sm.muted{ margin-top:0.35rem; }

      /* Implantes (subpaso 3): (ej...) justo debajo del subtítulo */
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="3"] .wizard-intro-sub{ margin-bottom:0.1rem; }
      .wizard-panel[data-step="5"].phase-content .s5-q[data-s5sub="3"] .text-sm.muted{ margin-top:0; }

      /* Paso 5 (móvil): más espacio entre el texto y los botones Sí/No */
      .wizard-panel[data-step="5"].phase-content .s5-q .interest-intro{ margin-top:1.15rem; }
    }
    .wizard-panel[data-step="5"] .s5-reveal{ opacity:0; transform:translateY(14px); filter:blur(10px); will-change:transform,opacity,filter; }
    .wizard-panel[data-step="5"].s5-play .s5-reveal{ animation:wizardHeroIn 900ms cubic-bezier(.2,.6,.2,1) forwards; }
    .wizard-panel[data-step="5"].s5-play .s5-reveal.d1{ animation-delay:0ms; }
    .wizard-panel[data-step="5"].s5-play .s5-reveal.d2{ animation-delay:350ms; }
    .wizard-panel[data-step="5"].s5-play .s5-reveal.d3{ animation-delay:900ms; }
    .wizard-panel[data-step="5"] .s5-intro.s5-hide .s5-reveal{ opacity:0; transform:translateY(-6px); filter:blur(10px); transition:opacity 420ms ease, transform 420ms ease, filter 420ms ease; }

    /* Paso 5: al presionar Continuar, también desvanece el botón Anterior */
    .wizard.step-5.s5-nav-fade #wizardPrev{
      opacity:0;
      transform:translateY(-6px);
      filter:blur(10px);
      pointer-events:none;
      transition:opacity 420ms ease, transform 420ms ease, filter 420ms ease;
    }

    /* Paso 5: quitar difuminado (shadow) del botón Continuar */
    .wizard-panel[data-step="5"] #s5Continue{ box-shadow:none; }
    .wizard-panel[data-step="5"] #s5Continue:hover{ box-shadow:none; }
    /* Paso 4: área de texto para 'Otros' (animada, márgenes simétricos) */
    .wizard-panel[data-step="4"] .other-field-slot{
      width:100%;
      display:block;
      max-width:560px;
      margin:1rem auto; /* márgenes simétricos arriba/abajo */
      /* animación similar a transiciones existentes sin cambiar proporciones */
      max-height:0;
      opacity:0;
      transform:translateY(10px);
      filter:blur(10px);
      overflow:hidden;
      transition:max-height 420ms ease, opacity 420ms ease, transform 420ms ease, filter 420ms ease;
    }
    .wizard-panel[data-step="4"] .other-field-slot.visible{
      max-height:200px; /* suficiente para 2 líneas + padding */
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
    }
    .wizard-panel[data-step="4"] .other-field-slot textarea{
      width:100%;
      border-radius:0.7rem;
      border:1px solid rgba(0,0,0,0.1);
      padding:0.6rem 0.8rem;
      resize:none;
    }
    .interest-pill{
      appearance:none;
      border:0px solid var(--violet);
      background:#fff;
      color:var(--violet);
      border-radius:999px;
      padding:0.72rem 0.9rem;
      font:inherit;
      font-weight:600;
      text-align:center;
      width:100%;
      max-width:190px;
      white-space:normal;
      line-height:1.12;
      cursor:pointer;
      transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease, transform 420ms ease;
      will-change: transform;
    }

    @media (max-width: 768px){
      /* Móvil: todos iguales y texto en 1 línea */
      .interest-pill{
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
        padding:0.62rem 0.75rem;
        min-height:44px;
        white-space:nowrap;
        line-height:1;
      }
    }
    .interest-pill:hover{ transform:translateY(-1px); }
    .interest-pill:focus-visible{
      outline:2px solid rgba(68,56,80,0.55);
      outline-offset:3px;
    }
    .interest-pill.active{
      background:var(--lav-2);
      border-color:var(--lav-2);
      color:#fff;
      transform:translateY(-1px);
    }
    .interest-pill{
      animation:interestFloat 6.8s ease-in-out infinite;
    }
    .interest-pill:nth-child(2){ animation-duration: 7.4s; animation-delay: -1.3s; }
    .interest-pill:nth-child(3){ animation-duration: 6.2s; animation-delay: -2.0s; }
    .interest-pill:nth-child(4){ animation-duration: 7.8s; animation-delay: -0.7s; }
    .interest-pill:nth-child(5){ animation-duration: 6.6s; animation-delay: -1.8s; }
    .interest-pill:nth-child(6){ animation-duration: 7.1s; animation-delay: -2.4s; }
    .interest-pill:nth-child(7){ animation-duration: 6.4s; animation-delay: -1.1s; }
    .interest-pill:nth-child(8){ animation-duration: 7.6s; animation-delay: -2.2s; }
    @keyframes interestFloat{
      0%,100%{ transform:translateY(0); }
      50%{ transform:translateY(-2px); }
    }
    @media (prefers-reduced-motion: reduce){
      .interest-pill{ animation:none; transition:none; }
      .wizard-panel.transition-out, .wizard-panel.transition-in{ animation:none; }
    }
    .wizard-nav{
      display:flex;
      justify-content:space-between;
      margin-top:1.2rem;
      gap:0.75rem;
      flex-wrap:wrap;
    }
    /* Desktop: que el "espacio" se reparta hasta el botón Siguiente (sin margen extra en la nav) */
    @media (min-width: 769px){
      .wizard.step-2 .wizard-nav{ margin-top:0; }
      .wizard.step-3 .wizard-nav{ margin-top:0; }
      .wizard.step-4 .wizard-nav{ margin-top:0; }
      .wizard.step-5 .wizard-nav{ margin-top:0; }
      .wizard.step-6 .wizard-nav{ margin-top:0; }
    }
    .wizard-nav > div{
      margin-left:auto;
      display:flex;
      gap:0.6rem;
      align-items:center;
      flex-wrap:wrap;
    }
    .form-row{
      margin-top:0.8rem;
      display:flex;
      flex-direction:column;
      gap:0.25rem;
    }
    label{font-size:0.9rem;color:var(--ink);}
    /* Alinea el texto de la etiqueta y el mensaje de error a la misma línea */
    .form-row > label{display:flex;align-items:center;justify-content:space-between;gap:0.6rem}
    input[type="text"],input[type="email"],input[type="password"],select,textarea,input[type="date"],input[type="time"]{
      border-radius:0.7rem;
      border:1px solid rgba(0,0,0,0.1);
      padding:0.55rem 0.75rem;
      font:inherit;
    }
    .field-error{
      color:#ff4d4f;
      font-size:0.78rem;
      margin-left:0.5rem;
      vertical-align:middle;
      display:inline-block;
    }
    textarea{min-height:90px;resize:vertical;}
    .symptom-group{
      margin-top:0.9rem;
      padding:0.8rem 0.9rem;
      border-radius:1rem;
      background:rgba(239,189,235,0.08);
      border:1px solid rgba(0,0,0,0.03);
    }
    .symptom-header{
      display:flex;
      justify-content:space-between;
      gap:0.5rem;
      align-items:center;
    }
    .symptom-controls{
      margin-top:0.5rem;
      display:none;
      gap:0.4rem;
      flex-wrap:wrap;
      font-size:0.85rem;
      color:var(--muted);
    }
    .symptom-controls.visible{display:flex;}
    .toggle-btn{
      border-radius:999px;
      padding:0.25rem 0.7rem;
      font-size:0.8rem;
      border:1px solid rgba(0,0,0,0.12);
      background:#fff;
      color:var(--muted);
    }
    .toggle-btn.active{
      background:var(--violet);
      color:#fff;
      border-color:transparent;
    }
    input[type="range"]{width:150px;}
    .range-label{font-size:0.8rem;}
    /* Resultados & hexágono */
    .results-box{
      margin-top:1rem;
      border-radius:1.2rem;
      padding:1rem;
      background:rgba(239,189,235,0.15);
      border:1px solid rgba(182,140,184,0.4);
    }
    .radar-wrapper{
      margin-top:1rem;
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      align-items:center;
    }
    .radar-hexagon{
      width:180px;
      height:180px;
      margin:0 auto;
      position:relative;
      background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.9),rgba(239,189,235,0.4));
      clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .radar-fill{
      width:150px;
      height:150px;
      border-radius:50%;
      background:radial-gradient(circle at 50% 0%,rgba(182,140,184,0.9),rgba(198,235,190,0.7));
      opacity:0.75;
      transform:scale(var(--radar-scale,0.4));
      transition:transform 0.5s ease;
    }
    .radar-labels{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:0.3rem 0.8rem;
      font-size:0.82rem;
      color:var(--muted);
    }
    /* Calendario */
    .calendar-grid{
      display:grid;
      gap:0.5rem;
      grid-template-columns:repeat(7,minmax(0,1fr));
      margin-top:0.8rem;
      font-size:0.8rem;
    }
    .calendar-cell{
      border-radius:0.6rem;
      padding:0.4rem 0.2rem;
      text-align:center;
      cursor:pointer;
      border:1px solid transparent;
      color:var(--violet);
      -webkit-appearance:none;
      appearance:none;
    }
    .calendar-cell.header{
      font-weight:600;
      color:var(--muted);
      cursor:default;
    }
    .calendar-cell.disabled{
      color:rgba(0,0,0,0.25);
      cursor:not-allowed;
    }
    .calendar-cell.available{
      background:#fff;
      border-color:rgba(0,0,0,0.08);
    }
    .calendar-cell.available:hover{
      border-color:rgba(68,56,80,0.22);
      background:#fff;
    }
    .calendar-cell.selected{
      background:var(--violet);
      color:#fff;
      border-color:transparent;
    }
    .calendar-widget{
      margin-top:0.6rem;
      border-radius:1rem;
      border:2px solid rgba(68,56,80,0.18);
      background:radial-gradient(circle at 0 0,rgba(239,189,235,0.22),transparent 62%),
                 radial-gradient(circle at 100% 100%,rgba(166,219,184,0.22),transparent 62%),
                 linear-gradient(135deg,#fff,#f8f6fb);
      box-shadow:0 12px 30px rgba(0,0,0,0.05);
      overflow:hidden;
      max-height:0;
      padding:0;
      opacity:0;
      transform:translateY(-10px);
      pointer-events:none;
      transition:max-height 900ms cubic-bezier(.2,.6,.2,1), opacity 650ms cubic-bezier(.2,.6,.2,1), transform 900ms cubic-bezier(.2,.6,.2,1), padding 650ms cubic-bezier(.2,.6,.2,1);
    }
    .calendar-widget.open{
      max-height:520px;
      padding:0.9rem;
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }

    .date-input-wrap{ position:relative; width:100%; }
    .date-input-wrap > input{ width:100%; display:block; padding-left:2.6rem; }
    .date-input-wrap::before{
      content:"";
      position:absolute;
      right:0.75rem;
      top:50%;
      transform:translateY(-50%);
      width:18px;
      height:18px;
      left:0.75rem;
      right:auto;
      background-color:var(--violet);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E") no-repeat center / contain;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h1V3a1 1 0 0 1 1-1Zm12 8H5v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10ZM6 6a1 1 0 0 0-1 1v1h14V7a1 1 0 0 0-1-1H6Z'/%3E%3C/svg%3E") no-repeat center / contain;
      pointer-events:none;
      opacity:0.95;
    }
    .calendar-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:0.5rem;
    }
    .calendar-month{
      font-weight:600;
      color:var(--violet);
      letter-spacing:0.01em;
      text-align:center;
      flex:1;
    }
    .cal-nav-btn{
      width:36px;
      height:36px;
      border-radius:999px;
      background:rgba(255,255,255,0.85);
      border:1px solid rgba(0,0,0,0.08);
      color:var(--violet);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
    }
    .cal-nav-btn:hover{ background:#fff; }
    .time-slots{
      margin-top:1rem;
      display:flex;
      flex-wrap:wrap;
      gap:0.4rem;
      font-size:0.85rem;
    }
    .time-slot{
      padding:0.35rem 0.7rem;
      border-radius:999px;
      border:1px solid rgba(0,0,0,0.1);
      cursor:pointer;
      background:#fff;
      color:var(--violet);
      -webkit-appearance:none;
      appearance:none;
      transition:background-color 180ms ease, color 180ms ease, border-color 180ms ease;
    }
    .time-slot.selected{
      background:var(--violet);
      color:#fff;
      border-color:transparent;
    }
    .time-slot.disabled{
      opacity:0.3;
      cursor:not-allowed;
    }
    .success-box{
      margin-top:1rem;
      border-radius:1rem;
      padding:1rem;
      background:color-mix(in srgb, var(--green-1) 22%, #fff);
      border:1px solid var(--green-2);
      font-size:0.9rem;
      color:var(--violet);
      display:none;
      opacity:0;
      transform:translateY(10px);
      transition:opacity 420ms ease, transform 420ms ease;
    }
    .success-box.visible{
      opacity:1;
      transform:translateY(0);
    }
    /* Portal Pacientes */
    .auth-grid{
      display:grid;
      gap:1.5rem;
    }
    @media(min-width:800px){
      .auth-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
    .tag-pill{
      font-size:0.75rem;
      padding:0.25rem 0.6rem;
      border-radius:999px;
      background:rgba(166,219,184,0.2);
      color:var(--violet);
      display:inline-block;
      margin-bottom:0.4rem;
    }
    .portal-nav{
      display:flex;
      flex-wrap:wrap;
      gap:0.4rem;
      margin-bottom:0.8rem;
    }
    .portal-tab{
      padding:0.35rem 0.9rem;
      border-radius:999px;
      border:1px solid rgba(0,0,0,0.08);
      font-size:0.8rem;
      background:#fff;
    }
    .portal-tab.active{
      background:var(--violet);
      color:#fff;
      border-color:transparent;
    }
    .portal-panel{display:none;font-size:0.9rem;}
    .portal-panel.active{display:block;}
    .list-inline{
      margin-top:0.4rem;
      padding-left:1.1rem;
      color:var(--muted);
      font-size:0.9rem;
    }
    /* Animaciones de texto */
    .fade-in{
      opacity:0;
      translate:0 16px;
      /* Delay solo para fade-in (opacity/translate). Hover zoom siempre sin delay. */
      transition:
        opacity 0.7s ease var(--fade-delay,0s),
        translate 0.7s ease var(--fade-delay,0s),
        transform 180ms ease 0s,
        box-shadow 180ms ease 0s;
    }
    .fade-in.visible{
      opacity:1;
      translate:0 0;
    }
    .delay-1{--fade-delay:0.05s;}
    .delay-2{--fade-delay:0.15s;}
    .delay-3{--fade-delay:0.25s;}
    .delay-4{--fade-delay:0.35s;}
    .delay-5{--fade-delay:0.45s;}
    /* Utilidades */
    .mt-1{margin-top:0.5rem;}
    .mt-2{margin-top:1rem;}
    .mt-3{margin-top:1.5rem;}
    .text-sm{font-size:0.85rem;}
    .text-center{text-align:center;}
    .text-right{text-align:right;}
    .highlight{
      color:var(--violet);
      font-weight:600;
    }
    .divider{
      margin:1.2rem 0;
      border-bottom:1px dashed rgba(0,0,0,0.08);
    }

    /* Hero dinámico */
    .lumera-hero{
    position: relative; min-height:100vh;
    display:flex;align-items: center; place-items:center;
    overflow:hidden; isolation:isolate;;justify-content: center;
    background:linear-gradient(180deg,#fff 0%,#fff7ff 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* elimina el espacio blanco superior que viene de main */
    margin-top: -3rem;

    /* separación con el hero de abajo */
    margin-bottom: 3rem;

    /* sin bordes redondeados */
    border-radius: 0;
    }

    @media(max-width:768px){
      .lumera-hero{
        min-height:78vh;
      }
    }
    .lumera-hero::before{
    content:""; position:absolute; inset:-20% -20%; z-index:-1;
    background:
        radial-gradient(45% 60% at 15% 20%, var(--lav-1) 0%, transparent 60%),
        radial-gradient(50% 65% at 85% 25%, var(--green-2) 0%, transparent 60%),
        radial-gradient(55% 70% at 50% 80%, var(--lav-2) 0%, transparent 60%);
    filter:blur(28px) saturate(110%);
    animation:lumera-blobs 18s cubic-bezier(.2,.6,.2,1) infinite alternate;
    transform:translateZ(0);
    }
    .lumera-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    opacity:.07; mix-blend-mode:multiply;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 0.55"/></feComponentTransfer></filter><rect width="120" height="120" filter="url(%23n)"/></svg>');
    background-size:300px 300px;
    animation:lumera-noise 1.8s steps(2,end) infinite;
    }

    /* Tipografías / tamaños */
    .lumera-hero .inner{ display:flex; flex-direction:column; padding:clamp(16px,4vw,40px); color:var(--violet); align-items: center; text-align: center; }
    .lumera-hero .brand{ font-size:clamp(40px,8vw,96px); font-weight:700; letter-spacing:4px; margin:0 0 8px; color:var(--violet); }
    .lumera-hero .subtitle{ font-size:clamp(20px,3vw,32px); margin:0 0 16px; font-weight:400; color:#5f6675; }
    .lumera-hero p{ margin:0 auto; max-width:60ch; color:#5f6675; font-size:clamp(16px,2.2vw,18px) }
    .lumera-hero-buttons{ display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center; margin-top:1.4rem; }

    /* Botón */
    .cta{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:12px 18px; border-radius:14px; background:var(--violet); color:#fff; text-decoration:none; font-weight:700; box-shadow:0 10px 24px #44385044; }
    .cta:hover{ transform:translateY(-1px) }
    .lumera-hero-buttons .cta{ margin-top:0; }
    .cta.btn-white{ background:#faf5f9; color:var(--violet); }

    /* Animaciones */
    @keyframes lumera-blobs{
    0%{   transform:translate3d(0,0,0) scale(1);   filter:blur(28px) saturate(110%); background-position:0% 0%,100% 0%,50% 100%; }
    50%{  transform:translate3d(0,-2%,0) scale(1.03);                                background-position:5% 10%,95% 15%,50% 90%; }
    100%{ transform:translate3d(0, 2%,0) scale(1.06); filter:blur(30px) saturate(120%); background-position:10% 5%,90% 20%,50% 85%; }
    }
    @keyframes lumera-noise{ to{ background-position:300px 0 } }

    /* Accesibilidad */
    @media (prefers-reduced-motion: reduce){
    .lumera-hero::before, .lumera-hero::after, .wizard-intro::before, .wizard-intro::after{ animation:none !important; }
    }

    /* Molecule labels: small rounded tags positioned over/under the SVG */
    .molecule-wrap{position:relative;width:100%;max-width:340px;height:auto;min-height:220px;margin:0 auto}
    .molecule-wrap svg{display:block;width:100%;height:auto;margin:0 auto}
    .molecule-tag{
      position:absolute;
      background:#B68CB8; /* palette color */
      color:#fff;
      padding:8px 14px;
      border-radius:999px;
      font-size:0.95rem;
      box-shadow:0 10px 24px rgba(182,140,184,0.18);
      white-space:nowrap;
      display:inline-flex;align-items:center;justify-content:center;
      transform:translateX(-50%) translateY(0);
      will-change:transform;
      z-index:2;
      /* default animation settings — each tag uses its own keyframes */
      animation-timing-function:ease-in-out;
      animation-iteration-count:infinite;
      animation-direction:alternate;
    }
    /* Ensure all tags share the same size (match "Calma/Claridad") */
    .molecule-tag.small{padding:8px 14px;font-size:0.95rem}
    /* approximate positions — tweak if you want different placement */
    .molecule-tag.tag-1{left:10%; bottom:18px}
    .molecule-tag.tag-2{left:32%; bottom:-27px}
    .molecule-tag.tag-3{left:60%; bottom:-20px}
    .molecule-tag.tag-4{left:87%; bottom:1px}


    /* Per-tag animation names, durations and staggered delays */
    .molecule-tag.tag-1{ animation-name:float-1; animation-duration:15s; animation-delay:0s }
    .molecule-tag.tag-2{ animation-name:float-2; animation-duration:17s; animation-delay:0.25s }
    .molecule-tag.tag-3{ animation-name:float-3; animation-duration:18s; animation-delay:0.5s }
    .molecule-tag.tag-4{ animation-name:float-4; animation-duration:16s; animation-delay:0.35s }


    /* Reducción más agresiva de viñetas en móviles */
    @media(max-width:768px){
      .molecule-tag{
        padding:5px 10px;
        font-size:0.75rem;
        box-shadow:0 6px 16px rgba(182,140,184,0.15);
      }
      .molecule-tag.small{padding:5px 10px;font-size:0.75rem}
      
      /* Redistribución de viñetas en móviles: 2 filas x 2 columnas */
      .molecule-tag.tag-1{left:10%; bottom:30px} /* Calma */
      .molecule-tag.tag-2{left:31.5%; bottom:-15px} /* Equilibrio */
      .molecule-tag.tag-3{left:68%; bottom:-15px} /* Claridad */
      .molecule-tag.tag-4{left:88%; bottom:30px} /* Bienestar */
      
      /* Animaciones más rápidas en móviles */
      .molecule-tag.tag-1{ animation-duration:7s; }
      .molecule-tag.tag-2{ animation-duration:8.5s; }
      .molecule-tag.tag-3{ animation-duration:9.5s; }
      .molecule-tag.tag-4{ animation-duration:8s; }
    }
    

    /* Different start/end positions so initial movement direction varies */
    @keyframes float-1{
      /* starts slightly left & up → moves right & down */
      from{ transform: translateX(calc(-50% - 6px)) translateY(-6px); }
      to  { transform: translateX(calc(-50% + 6px)) translateY(6px); }
    }
    @keyframes float-2{
      /* starts slightly left & down → moves right & up */
      from{ transform: translateX(calc(-50% - 12px)) translateY(6px); }
      to  { transform: translateX(calc(-50% + 6px)) translateY(-6px); }
    }
    @keyframes float-3{
      /* starts left & down → moves right & up */
      from{ transform: translateX(calc(-50% - 6px)) translateY(6px); }
      to  { transform: translateX(calc(-50% + 6px)) translateY(-6px); }
    }
    @keyframes float-4{
      /* starts right & up → moves left & down */
      from{ transform: translateX(calc(-50% + 6px)) translateY(-6px); }
      to  { transform: translateX(calc(-50% - 6px)) translateY(6px); }
    }

    /* Respect user's reduced-motion preference */
    @media (prefers-reduced-motion: reduce){
      .molecule-tag{ animation: none !important; }
    }

    /* Animaciones más sutiles en móviles */
    @media(max-width:768px){
      @keyframes float-1{
        from{ transform: translateX(calc(-50% - 3px)) translateY(-3px); }
        to  { transform: translateX(calc(-50% + 3px)) translateY(3px); }
      }
      @keyframes float-2{
        from{ transform: translateX(calc(-50% - 6px)) translateY(3px); }
        to  { transform: translateX(calc(-50% + 3px)) translateY(-3px); }
      }
      @keyframes float-3{
        from{ transform: translateX(calc(-50% - 3px)) translateY(3px); }
        to  { transform: translateX(calc(-50% + 3px)) translateY(-3px); }
      }
      @keyframes float-4{
        from{ transform: translateX(calc(-50% + 3px)) translateY(-3px); }
        to  { transform: translateX(calc(-50% - 3px)) translateY(3px); }
      }
    }

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

#aprende.page-section { margin-top: 1rem !important; padding-top: 0 !important; }
    #aprende .section-block { margin-top: 0 !important; padding-top: 0.5rem !important; }

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

@media (max-width: 600px) {
            .pdf-iframe {
              width: 100vw !important;
              max-width: 100vw !important;
              min-width: 100vw !important;
              left: 0 !important;
              right: 0 !important;
              margin: 0 !important;
              position: relative;
              padding: 0 !important;
              box-sizing: border-box;
            }
            .pdf-viewer {
              margin-left: 0 !important;
              margin-right: 0 !important;
              border-radius: 4px !important;
              border-width: 1px !important;
              padding: 0 !important;
            }
            .section-block {
              padding-left: 0 !important;
              padding-right: 0 !important;
            }
          }

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

@media (max-width: 600px) {
            .pdf-iframe {
              width: 100vw !important;
              left: 50%;
              right: 50%;
              margin-left: -50vw;
              margin-right: -50vw;
              position: relative;
            }
          }

@media (max-width: 768px) {
  .pdf-viewer {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    height: 100vh !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .pdf-viewer iframe {
    height: 200vh !important;
    min-height: 200vh;
  }

  /* Mantener padding interno en otros elementos */
  .section-block {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}