/* =============================================================================
   estilo.css — la hoja de /planesweb/ y de /soporte-y-evolucion/.

   Estaba incrustada en planesweb/index.html y salió al crear la página de
   soporte, que tiene que verse exactamente igual. Un cambio aquí vale para
   las dos; no busques el <style> en el HTML, ya no está.

   La página de soporte no lleva el lienzo del metal (#metal), así que esas
   reglas no le afectan: sin canvas no pintan nada.
   ========================================================================== */
  /* ==========================================================================
     LO QUE SE TE ESCAPA — differentissgood
     Página de un solo mundo: negro con metal líquido de fondo. No cambia con
     el tema del visor a propósito, así que todos los colores se pintan aquí
     de forma explícita y nada se hereda del anfitrión.
     ========================================================================== */
  :root{
    --papel:#0a0a0a;
    --tarjeta:#171413;
    --tarjeta-solida:#171413;
    --tinta:#ffffff;
    --tinta-suave:rgba(255,255,255,.66);
    --tinta-tenue:rgba(255,255,255,.42);
    --linea:rgba(255,255,255,.13);
    --acento:#ff5c00;
    --acento-texto:#ff8a45;
    --sobre-acento:#0a0a0a;

    --display:'Anton','Arial Narrow',Impact,sans-serif;
    --cuerpo:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    --alt:'Space Grotesk','Inter',system-ui,Helvetica,Arial,sans-serif;
    --curva:cubic-bezier(.22,1,.36,1);
    --radio:22px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:clip;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

  body{
    margin:0; background:var(--papel); color:var(--tinta);
    font-family:var(--cuerpo); font-size:16.5px; line-height:1.62;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }

  /* --- El metal, de fondo de toda la página --- */
  #metal{position:fixed; inset:0; width:100%; height:100%; z-index:0;
         display:block; background:#0a0a0a; opacity:.42;}
  /* Degradado que lo va apagando al bajar: arriba se intuye, abajo casi no
     está. Nunca es el protagonista, solo da profundidad. */
  .velo-global{position:fixed; inset:0; z-index:1; pointer-events:none;
    /* El velo es FIJO: su degradado va con la pantalla, no con el scroll, así
       que lo que queda arriba del todo se ve igual de claro en cualquier
       sección. Por eso el tramo superior tiene que ser ya bastante opaco, o
       las tarjetas de los planes parecen tapadas por una neblina. */
    background:linear-gradient(180deg,
      rgba(10,10,10,.72) 0%, rgba(10,10,10,.90) 40%,
      rgba(10,10,10,.95) 72%, rgba(10,10,10,.96) 100%);}
  .grano{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .lamina{position:relative; z-index:3;}

  .sr-solo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .env{width:100%; max-width:1140px; margin-inline:auto; padding-inline:22px;}
  .env--estrecho{max-width:860px;}

  h1,h2,h3{font-family:var(--display); font-weight:400; line-height:.94;
           letter-spacing:.004em; text-wrap:balance; margin:0; color:var(--tinta);}
  h1{font-size:clamp(3rem,8.4vw,6.2rem);}
  h2{font-size:clamp(2.2rem,5.6vw,4rem);}
  h3{font-size:clamp(1.5rem,3.4vw,2.2rem);}
  p{margin:0;}
  em{font-style:normal; color:var(--acento-texto);}

  .rotulo{font-family:var(--alt); font-size:.7rem; letter-spacing:.24em;
          text-transform:uppercase; color:var(--acento-texto);
          display:inline-flex; align-items:center; gap:13px;}
  .rotulo::before{content:""; width:30px; height:1px; background:currentColor; flex:none;}

  .bloque{padding-block:clamp(58px,8vh,96px);}

  @media (prefers-reduced-motion:no-preference){
    /* Con reloj sí puede atenuar: siempre termina. */
    .sube{animation:sube 1.1s var(--curva) both;}
    @supports (animation-timeline: view()){
      /* Atado al scroll, NO se toca la opacidad. Cerca del final del
         documento se acaba el scroll antes que la animación, y los
         elementos se quedaban clavados a media transparencia: el
         formulario de contacto llegaba a verse al 38 %. Solo se mueve. */
      .sube{animation:subeSolo 1s linear both; opacity:1;
            animation-timeline:view(); animation-range:entry 0% entry 80%;}
    }
  }
  @keyframes sube{from{opacity:.3; transform:translateY(28px);} to{opacity:1; transform:none;}}
  @keyframes subeSolo{from{transform:translateY(26px);} to{transform:none;}}

  /* ---------------------------- Botones ---------------------------- */
  .acciones{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:38px;}
  .btn{display:inline-flex; align-items:center; gap:11px; cursor:pointer;
    /* appearance:none es obligatorio: sin esto un <button> hereda el estilo
       del sistema y en iOS sale con el azul de Safari. */
    -webkit-appearance:none; appearance:none; background:transparent;
    font-family:var(--alt); font-size:.84rem; letter-spacing:.09em; text-transform:uppercase;
    text-decoration:none; border-radius:100px; padding:16px 30px;
    border:1.5px solid transparent; color:var(--tinta);
    transition:transform .5s var(--curva), background-color .5s var(--curva),
               color .5s var(--curva), border-color .5s var(--curva);}
  .btn--primario{background:var(--acento); color:#fff;}
  .btn--primario:hover{transform:translateY(-4px);}
  .btn--claro{border-color:rgba(255,255,255,.34);}
  .btn--claro:hover{border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-4px);}
  .btn svg{width:16px; height:16px; flex:none;}

  /* Los dos botones de envio del formulario: nada de azul de sistema.
     WhatsApp lleva el naranja de la marca; el correo, una linea fina. */
  .btn--enviar{justify-content:center; flex:1 1 230px; padding:17px 28px;
    letter-spacing:.1em;}
  .btn--wsp{background:var(--acento); color:#fff; border-color:var(--acento);}
  .btn--wsp:hover{background:#ff7524; border-color:#ff7524; transform:translateY(-3px);}
  .btn--correo{background:rgba(255,255,255,.04); color:var(--tinta);
    border-color:rgba(255,255,255,.28);}
  .btn--correo:hover{background:rgba(255,255,255,.1); border-color:#fff;
    transform:translateY(-3px);}
  .btn--enviar svg{width:18px; height:18px;}

  /* ------------------ El formulario, plegado tras "Empezar" ------------------
     Se anima con grid-template-rows, igual que la seccion 07 de la home: es
     lo unico que interpola de 0 a "lo que mida" sin fijar una altura a mano. */
  .arranque{margin-top:34px;}
  .arranque[hidden]{display:none;}
  .arranque .btn{padding:19px 44px; font-size:.9rem;}
  .plegado{display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .7s var(--curva), opacity .5s var(--curva);}
  .plegado > *{overflow:hidden; min-height:0;}
  .plegado--abierto{grid-template-rows:1fr; opacity:1;}
  @media (prefers-reduced-motion:reduce){
    .plegado{transition:none;}
  }
  .nota{font-size:.87rem; color:var(--tinta-tenue); margin-top:16px;}

  /* ============================ PORTADA ============================ */
  .portada{min-height:min(78vh,720px); display:flex; align-items:center;
           padding-block:clamp(78px,11vh,120px) clamp(48px,7vh,76px);}
  .portada h1{margin-top:28px; max-width:14ch;}
  .portada__bajada{margin-top:28px; max-width:46ch;
                   font-size:clamp(1.04rem,2vw,1.26rem); color:var(--tinta-suave);}
  .linea{display:block; overflow:hidden;}
  .linea > span{display:block;}
  @media (prefers-reduced-motion:no-preference){
    .linea > span{animation:asoma 1.05s var(--curva) both;}
    .linea:nth-child(1) > span{animation-delay:.10s;}
    .linea:nth-child(2) > span{animation-delay:.22s;}
    .linea:nth-child(3) > span{animation-delay:.34s;}
    .entra{animation:asoma 1s var(--curva) .52s both;}
    .entra--tarde{animation-delay:.70s;}
  }
  @keyframes asoma{from{transform:translateY(105%);} to{transform:none;}}

  /* ============ NECESIDADES: BANDA CLARA Y CARRUSEL HORIZONTAL ============
     Rompe el negro a propósito: es la única parte clara de la página, así se
     lee de un vistazo y se distingue de todo lo demás. Sobre crema el naranja
     de marca no contrasta, así que aquí el texto usa el tono hondo. */
  .banda-clara{
    background:#efeae1; color:#141210;
    padding-block:clamp(56px,8vh,88px) clamp(46px,7vh,74px);
    --acento-aqui:#b64708;
  }
  .banda-clara h2, .banda-clara h3{color:#141210;}
  .banda-clara .rotulo{color:var(--acento-aqui);}
  .banda-clara .intro{margin-top:16px; color:#4c473f; max-width:52ch;}

  .carril{position:relative; margin-top:34px;}
  .carril__pista{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; padding:4px 0 20px;
    /* el sangrado lateral deja ver que hay más fichas a la derecha */
    padding-inline:max(22px, calc((100vw - 1140px) / 2 + 22px));
    margin-inline:calc(50% - 50vw); width:100vw;
    scrollbar-width:thin; scrollbar-color:rgba(20,18,16,.28) transparent;
    overscroll-behavior-x:contain;
  }
  .carril__pista::-webkit-scrollbar{height:6px;}
  .carril__pista::-webkit-scrollbar-thumb{background:rgba(20,18,16,.26); border-radius:100px;}
  .carril__pista::-webkit-scrollbar-track{background:transparent;}
  @media (prefers-reduced-motion:reduce){.carril__pista{scroll-behavior:auto;}}

  .ficha{
    flex:none; scroll-snap-align:start;
    width:min(86vw, 440px); display:flex; flex-direction:column;
    background:#fbf8f3; border:1px solid rgba(20,18,16,.12); border-radius:20px;
    overflow:hidden;
    transition:transform .45s var(--curva), box-shadow .45s var(--curva);
  }
  .ficha:hover{transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(60,35,10,.35);}
  .ficha__parte{padding:26px 24px; display:flex; flex-direction:column; gap:10px;}
  .ficha__parte--problema{background:#fbf8f3;}
  /* La solución va justo debajo, sobre un tono cálido: se ve que son dos
     mitades de la misma ficha y cuál es cuál. */
  .ficha__parte--solucion{background:rgba(255,92,0,.08); flex:1;
                          border-top:1px solid rgba(20,18,16,.10);}
  .ficha__et{font-family:var(--alt); font-size:.64rem; letter-spacing:.2em;
             text-transform:uppercase;}
  .ficha__parte--problema .ficha__et{color:rgba(20,18,16,.48);}
  .ficha__parte--solucion .ficha__et{color:var(--acento-aqui);}
  .ficha h3{font-size:clamp(1.25rem,2.6vw,1.55rem); line-height:1.02;}
  .ficha__parte--solucion h3{color:var(--acento-aqui) !important;}
  .ficha p.texto{font-size:.95rem; line-height:1.5; color:#4c473f;}
  .ficha__precio{margin-top:4px; font-family:var(--alt); font-size:.7rem;
                 letter-spacing:.12em; text-transform:uppercase; color:rgba(20,18,16,.52);}
  /* La costura entre las dos mitades: una flecha hacia abajo, centrada */
  .ficha__union{position:relative; height:0; display:grid; place-items:center; z-index:2;}
  .ficha__union span{
    position:absolute; top:-17px; width:34px; height:34px; border-radius:50%;
    background:var(--acento); color:#fff; display:grid; place-items:center;
    box-shadow:0 4px 12px rgba(120,52,8,.32);}
  .ficha__union svg{width:17px; height:17px;}

  /* Mando del carril: flechas y cuenta. En móvil se desliza con el dedo, así
     que las flechas solo aparecen donde hay ratón. */
  .carril__mando{display:flex; align-items:center; gap:12px; margin-top:6px;}
  .carril__btn{width:42px; height:42px; border-radius:50%; cursor:pointer;
    border:1.5px solid rgba(20,18,16,.24); background:transparent; color:#141210;
    display:grid; place-items:center;
    transition:background-color .4s var(--curva), border-color .4s var(--curva),
               opacity .4s var(--curva), transform .4s var(--curva);}
  .carril__btn:hover{background:var(--acento); border-color:var(--acento); color:#fff;
                     transform:scale(1.06);}
  .carril__btn:disabled{opacity:.3; cursor:default; transform:none;
                        background:transparent; border-color:rgba(20,18,16,.24); color:#141210;}
  .carril__btn svg{width:18px; height:18px;}
  .carril__cuenta{font-family:var(--alt); font-size:.72rem; letter-spacing:.14em;
                  text-transform:uppercase; color:rgba(20,18,16,.52);
                  font-variant-numeric:tabular-nums;}
  .carril__pista:focus-visible{outline:3px solid var(--acento-aqui); outline-offset:4px;
                               border-radius:8px;}
  @media (pointer:coarse){.carril__btn{display:none;}}

  /* ---------------------------- LA CUENTA ---------------------------- */
  .cuenta{background:var(--tarjeta);
          border:1px solid var(--linea); border-radius:var(--radio);
          padding:clamp(28px,4.5vw,56px); margin-top:64px;}
  .cuenta__rejilla{display:grid; gap:40px; align-items:center;}
  @media(min-width:900px){.cuenta__rejilla{grid-template-columns:1fr 1fr; gap:64px;}}
  .cuenta h2{max-width:14ch;}
  .campo{display:flex; flex-direction:column; gap:10px; margin-top:28px;}
  .campo label{font-size:.94rem; color:var(--tinta-suave);}
  .campo__fila{display:flex; align-items:center; gap:18px;}
  .campo input[type=range]{flex:1; accent-color:var(--acento); height:28px; min-width:0;}
  .campo output{font-family:var(--display); font-size:1.65rem; min-width:4.2ch; text-align:right;
                font-variant-numeric:tabular-nums; color:var(--acento-texto);}
  .marcador{text-align:center; padding:clamp(30px,4vw,46px) clamp(20px,3vw,34px);
            border:1px solid var(--linea); border-radius:var(--radio);
            background:rgba(10,10,10,.55);}
  .marcador__et{font-family:var(--alt); font-size:.68rem; letter-spacing:.2em;
                text-transform:uppercase; color:var(--tinta-tenue);}
  .marcador__cifra{font-family:var(--display); font-size:clamp(3rem,9vw,5rem);
                   color:var(--acento-texto); line-height:.95; margin-top:16px;
                   font-variant-numeric:tabular-nums;}
  .marcador__cifra{will-change:transform;}
  .marcador__cifra.late{animation:lateCifra .5s var(--curva);}
  @keyframes lateCifra{
    0%{transform:scale(1);}
    38%{transform:scale(1.055);}
    100%{transform:scale(1);}
  }
  /* El marcador respira cuando la cifra cambia: un aro naranja que se abre
     y se apaga. Es el único adorno de la sección, y solo aparece al tocar. */
  .marcador{position:relative; overflow:hidden;}
  .marcador::after{
    content:""; position:absolute; inset:-1px; border-radius:inherit;
    border:1px solid var(--acento); opacity:0; pointer-events:none;}
  .marcador.late::after{animation:aro .75s var(--curva);}
  @keyframes aro{from{opacity:.55; transform:scale(.985);} to{opacity:0; transform:scale(1.015);}}

  /* Un brillo que cruza la tarjeta destacada al pasar por encima */
  .plan--estrella{position:relative; overflow:hidden;}
  .plan--estrella::before{
    content:""; position:absolute; top:0; bottom:0; width:38%;
    left:-45%; pointer-events:none; z-index:0;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);}
  @media (prefers-reduced-motion:no-preference){
    .plan--estrella:hover::before{animation:brillo 1.05s var(--curva);}
  }
  @keyframes brillo{to{left:115%;}}
  .plan--estrella > *{position:relative; z-index:1;}

  .marcador__nota{margin-top:20px; color:var(--tinta-suave); font-size:.97rem;}
  .marcador__nota b{color:var(--tinta); font-weight:600;}

  /* ------------------------------ PLANES ------------------------------ */
  .planes{display:grid; gap:20px; margin-top:52px; align-items:start;}
  @media(min-width:1000px){.planes{grid-template-columns:1fr 1.1fr 1fr; align-items:center;}}
  .plan{display:flex; flex-direction:column; gap:17px;
        background:var(--tarjeta);
        border:1px solid var(--linea); border-radius:var(--radio);
        padding:30px 28px 32px;
        transition:transform .5s var(--curva), border-color .5s var(--curva);}
  .plan:hover{transform:translateY(-10px); border-color:var(--acento);}
  .plan--estrella{background:var(--acento); border-color:var(--acento);
                  color:var(--sobre-acento); backdrop-filter:none; padding:36px 30px 38px;}
  .plan--estrella:hover{border-color:#fff;}
  @media(min-width:1000px){.plan--estrella{margin-block:-28px;}}
  .plan--estrella h3{color:var(--sobre-acento);}
  .insignia{align-self:flex-start; font-family:var(--alt); font-size:.64rem; letter-spacing:.2em;
            text-transform:uppercase; background:var(--sobre-acento); color:var(--acento);
            padding:7px 14px; border-radius:100px;}
  .plan__lema{font-size:.97rem; color:var(--tinta-suave);}
  .plan--estrella .plan__lema{color:rgba(10,10,10,.76);}
  .plan__precio{display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;
                padding-top:8px; border-top:1px solid var(--linea);}
  .plan--estrella .plan__precio{border-top-color:rgba(10,10,10,.22);}
  .plan__precio b{font-family:var(--display); font-weight:400;
                  font-size:clamp(2.3rem,5vw,3rem); line-height:1; font-variant-numeric:tabular-nums;}
  .plan--estrella .plan__precio b{font-size:clamp(2.6rem,5.6vw,3.4rem);}
  .plan__pago{font-size:.82rem; color:var(--tinta-tenue); margin-top:-9px;}
  .plan--estrella .plan__pago{color:rgba(10,10,10,.64);}
  .plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .plan li{display:flex; gap:12px; font-size:.95rem; line-height:1.48;}
  .plan li svg{width:16px; height:16px; flex:none; margin-top:5px; color:var(--acento-texto);}
  .plan--estrella li svg{color:var(--sobre-acento);}
  .plan .btn{justify-content:center; margin-top:auto;}
  .plan--estrella .btn--primario{background:var(--sobre-acento); color:var(--acento);}
  /* ----------------------- Mantenimiento mensual ----------------------- */
  /* Es un <a> a /soporte-y-evolucion/, no un boton: hay que apagar el subrayado
     y el color de enlace que trae el navegador de serie. */
  .plan__mant{display:flex; align-items:center; justify-content:space-between; gap:12px;
    text-decoration:none; color:inherit;
    width:100%; cursor:pointer; text-align:left;
    background:rgba(255,92,0,.10); border:1px solid rgba(255,92,0,.34);
    border-radius:14px; padding:13px 16px; color:var(--tinta);
    font-family:var(--cuerpo); font-size:.88rem;
    transition:background-color .4s var(--curva), border-color .4s var(--curva);}
  .plan__mant:hover{background:rgba(255,92,0,.18); border-color:var(--acento);}
  .plan__mant b{font-family:var(--display); font-weight:400; font-size:1.15rem;
                color:var(--acento-texto); font-variant-numeric:tabular-nums;}
  .plan__mant span{display:flex; flex-direction:column; gap:2px; line-height:1.3;}
  .plan__mant small{font-size:.72rem; color:var(--tinta-tenue);
                    text-decoration:underline; text-underline-offset:3px;}
  .plan--estrella .plan__mant{background:rgba(10,10,10,.14); border-color:rgba(10,10,10,.30);
                              color:var(--sobre-acento);}
  .plan--estrella .plan__mant:hover{background:rgba(10,10,10,.22); border-color:var(--sobre-acento);}
  .plan--estrella .plan__mant b{color:var(--sobre-acento);}
  .plan--estrella .plan__mant small{color:rgba(10,10,10,.62);}

  /* El panel flotante de mantenimiento se fue a /soporte-y-evolucion/,
     que es una pagina de verdad y se puede enlazar y compartir. */

  .plan__entrega{display:flex; flex-direction:column; gap:5px; padding-top:14px;
                 border-top:1px solid var(--linea);
                 font-family:var(--alt); font-size:.71rem; letter-spacing:.11em;
                 text-transform:uppercase; color:var(--tinta-tenue);}
  .plan--estrella .plan__entrega{border-top-color:rgba(10,10,10,.22); color:rgba(10,10,10,.68);}

  /* --------------------------- QUIÉNES SOMOS --------------------------- */
  .sitio{display:inline-flex; align-items:center; gap:12px; margin-top:34px;
         padding:13px 22px; border:1px solid var(--linea); border-radius:100px;
         font-family:var(--alt); font-size:.8rem; letter-spacing:.14em;
         text-transform:uppercase; color:var(--tinta);}
  .sitio svg{width:19px; height:19px; color:var(--acento-texto); flex:none;}
  .somos p{margin-top:22px; color:var(--tinta-suave); font-size:1.05rem; max-width:52ch;}
  .cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
          margin-top:44px; border-top:1px solid var(--linea);}
  .cifra{padding:22px 16px 8px; border-right:1px solid var(--linea);}
  .cifra:last-child{border-right:0;}
  .cifra b{display:block; font-family:var(--display); font-weight:400;
           font-size:clamp(1.6rem,3.4vw,2.1rem); color:var(--acento-texto); line-height:1;}
  .cifra span{display:block; margin-top:10px; font-size:.83rem; color:var(--tinta-suave); line-height:1.4;}

  /* ----------------------------- CONTACTO ----------------------------- */
  .cierre{text-align:center;}
  .cierre h2{max-width:15ch; margin-inline:auto;}
  .cierre p.cuerpo{margin-top:24px; color:var(--tinta-suave); max-width:44ch;
                   margin-inline:auto; font-size:1.06rem;}
  .cierre .acciones{justify-content:center;}
  /* ----------------------- Formulario de contacto ----------------------- */
  .formulario{margin-top:36px; text-align:left; display:grid; gap:16px;
              background:var(--tarjeta); border:1px solid var(--linea);
              border-radius:var(--radio); padding:clamp(24px,4vw,40px);}
  @media(min-width:720px){.formulario{grid-template-columns:1fr 1fr;}}
  .campo-f{display:flex; flex-direction:column; gap:8px;}
  .campo-f--ancho{grid-column:1 / -1;}
  .campo-f label{font-family:var(--alt); font-size:.68rem; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--tinta-tenue);}
  .campo-f input, .campo-f textarea{
    width:100%; background:rgba(255,255,255,.05); color:var(--tinta);
    border:1px solid var(--linea); border-radius:12px; padding:13px 16px;
    font-family:var(--cuerpo); font-size:.96rem; line-height:1.5;
    transition:border-color .4s var(--curva), background-color .4s var(--curva);}
  .campo-f input:focus, .campo-f textarea:focus{border-color:var(--acento);
    background:rgba(255,255,255,.08); outline:none;}
  .campo-f input::placeholder, .campo-f textarea::placeholder{color:rgba(255,255,255,.34);}
  .campo-f textarea{resize:vertical; min-height:110px;}
  .campo-f--error input, .campo-f--error textarea{border-color:#ff6b5c;}
  .campo-f .error{font-size:.8rem; color:#ff8a7d;}
  .formulario__botones{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:12px;
                       align-items:center; margin-top:4px;}
  .formulario__aviso{grid-column:1 / -1; font-size:.86rem; color:var(--tinta-suave);
                     border-left:2px solid var(--acento); padding-left:14px;}
  .formulario__aviso[hidden]{display:none;}
  .pie{padding-block:34px; text-align:center; font-size:.85rem; color:var(--tinta-tenue);
       border-top:1px solid var(--linea);}

  /* El asistente flotante propio se fue: la burbuja y el panel los pinta
     ahora el widget de GoHighLevel, con su propio estilo. */

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:3px solid var(--acento-texto); outline-offset:3px;}
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;}
    .plan:hover,.btn:hover{transform:none;}
  }

  /* ==========================================================================
     AGENTE IA — el bloque dorado
     No es un cuarto plan: es un servicio aparte, y se nota porque es lo único
     de la página que no es naranja. El oro va editorial —degradado oscuro a
     claro, borde metálico fino, un reflejo que cruza muy lento— y nunca plano:
     un amarillo liso a este tamaño se lee como casino, no como premium.
     ========================================================================== */
  :root{
    --oro:#C8A45D;
    --oro-claro:#E7C77A;
    --oro-oscuro:#8B6A2F;
    --oro-tenue:rgba(200,164,93,.16);
  }

  .agente{position:relative; z-index:2;}
  .agente__caja{
    position:relative; overflow:hidden; border-radius:var(--radio);
    padding:clamp(30px,4.6vw,56px);
    background:
      radial-gradient(120% 90% at 8% 0%, rgba(231,199,122,.13), transparent 58%),
      linear-gradient(158deg, #1b1610 0%, #120f0c 46%, #0d0b09 100%);
    border:1px solid rgba(200,164,93,.38);
    box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(231,199,122,.20);
  }
  /* El filo metálico de arriba: una línea que va de oscuro a claro y otra vez
     a oscuro, que es lo que hace que parezca metal y no un borde de color. */
  .agente__caja::before{
    content:''; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--oro-oscuro) 18%, var(--oro-claro) 50%, var(--oro-oscuro) 82%, transparent);
  }
  /* El reflejo que cruza. 14 s y muy poca opacidad: si se ve pasar, molesta. */
  .agente__caja::after{
    content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
    pointer-events:none; transform:skewX(-16deg);
    background:linear-gradient(90deg, transparent, rgba(231,199,122,.075), transparent);
    animation:oroPasa 14s linear infinite;
  }
  @keyframes oroPasa{ 0%{left:-60%;} 55%,100%{left:130%;} }

  .agente__rotulo{font-family:var(--alt); font-size:.7rem; letter-spacing:.24em;
    text-transform:uppercase; color:var(--oro-claro);}
  .agente__titulo{font-family:var(--display); font-weight:400; line-height:.94;
    font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:.005em; margin:18px 0 0;
    background:linear-gradient(174deg, var(--oro-claro) 6%, var(--oro) 46%, var(--oro-oscuro) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;}
  .agente__lema{margin:14px 0 0; font-size:clamp(1.05rem,2.3vw,1.3rem); color:#f3ead9; max-width:30ch;}
  .agente__intro{margin:16px 0 0; color:rgba(243,234,217,.70); max-width:56ch;}

  /* Los dos importes, separados de verdad: una caja cada uno, para que nadie
     confunda la implantación con la cuota. */
  .agente__precios{display:grid; gap:14px; margin-top:30px;}
  @media(min-width:620px){.agente__precios{grid-template-columns:1fr 1fr;}}
  .agente__precio{padding:20px 22px; border-radius:15px;
    background:rgba(200,164,93,.07); border:1px solid rgba(200,164,93,.26);}
  .agente__precio dt{font-family:var(--alt); font-size:.66rem; letter-spacing:.2em;
    text-transform:uppercase; color:rgba(231,199,122,.82);}
  .agente__precio dd{margin:8px 0 0; font-family:var(--display); font-weight:400;
    font-size:clamp(2rem,5vw,2.7rem); line-height:1; color:var(--oro-claro);
    overflow-wrap:break-word;}
  .agente__precio small{display:block; margin-top:7px; font-family:var(--cuerpo);
    font-size:.78rem; letter-spacing:0; text-transform:none; color:rgba(243,234,217,.55);}

  .agente__junto{margin-top:18px; padding:15px 18px; border-radius:13px;
    font-size:.9rem; color:#f3ead9;
    background:linear-gradient(100deg, rgba(200,164,93,.15), rgba(200,164,93,.05));
    border:1px solid rgba(200,164,93,.30);}
  .agente__junto b{color:var(--oro-claro);}

  .agente__lista{list-style:none; padding:0; margin:30px 0 0; display:grid; gap:11px;}
  @media(min-width:760px){.agente__lista{grid-template-columns:1fr 1fr; gap:11px 30px;}}
  .agente__lista li{display:flex; gap:11px; align-items:flex-start;
    font-size:.94rem; color:rgba(243,234,217,.88);}
  .agente__lista svg{width:18px; height:18px; flex:none; margin-top:3px; color:var(--oro);}

  .agente__acciones{display:flex; flex-wrap:wrap; gap:13px; align-items:center; margin-top:32px;}
  .btn--oro{
    background:linear-gradient(168deg, var(--oro-claro), var(--oro) 52%, var(--oro-oscuro));
    color:#221a09; border:1px solid rgba(231,199,122,.55); font-weight:600;
    box-shadow:0 10px 30px rgba(139,106,47,.34);
  }
  .btn--oro:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(139,106,47,.44);
    border-color:var(--oro-claro);}
  .agente__vermas{color:var(--oro-claro); font-size:.9rem; text-decoration:none;
    border-bottom:1px solid rgba(231,199,122,.4); padding-bottom:2px;}
  .agente__vermas:hover{border-bottom-color:var(--oro-claro);}
  .agente__nota{margin:22px 0 0; font-size:.82rem; color:rgba(243,234,217,.48); max-width:62ch;}

  @media (prefers-reduced-motion:reduce){
    .agente__caja::after{animation:none; display:none;}
    .btn--oro:hover{transform:none;}
  }

  /* ==========================================================================
     SOPORTE Y EVOLUCIÓN — la página de las mensualidades
     Reutiliza .bloque, .env, .plan y el resto. Solo añade lo propio.
     ========================================================================== */
  .volver{display:inline-flex; align-items:center; gap:9px; color:var(--tinta-suave);
    text-decoration:none; font-size:.88rem; padding:9px 0;}
  .volver:hover{color:var(--tinta);}
  .volver svg{width:17px; height:17px;}

  /* Compensa que el ancla no quede pegada al borde de arriba. */
  .mant-bloque{scroll-margin-top:26px; padding-block:clamp(38px,5.4vh,62px);
    border-top:1px solid var(--linea);}
  .mant-bloque:first-of-type{border-top:0;}
  .mant-cab{display:flex; align-items:baseline; justify-content:space-between;
    gap:16px; flex-wrap:wrap;}
  .mant-cab h2{margin:0; font-size:clamp(1.9rem,4.6vw,2.7rem);}
  .mant-cab__precio{font-family:var(--display); font-weight:400;
    font-size:clamp(1.5rem,3.4vw,2rem); color:var(--acento-texto); white-space:nowrap;}
  .mant-idea{margin:16px 0 0; color:var(--tinta-suave); max-width:60ch;}
  .mant-lista{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:15px;}
  @media(min-width:820px){.mant-lista{grid-template-columns:1fr 1fr; gap:17px 34px;}}
  .mant-lista li{display:flex; gap:12px; align-items:flex-start;}
  .mant-lista svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--acento);}
  .mant-lista b{display:block; font-weight:600; font-size:.94rem;}
  .mant-lista span span{display:block; margin-top:3px; font-size:.86rem;
    color:var(--tinta-tenue); line-height:1.5;}
  .mant-pie{margin:26px 0 0; font-size:.86rem; color:var(--tinta-tenue);}

  /* La sección del agente, aquí también dorada */
  .mant-bloque--oro .mant-cab h2{
    background:linear-gradient(174deg, var(--oro-claro) 10%, var(--oro) 58%, var(--oro-oscuro));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;}
  .mant-bloque--oro .mant-cab__precio{color:var(--oro-claro);}
  .mant-bloque--oro .mant-lista svg{color:var(--oro);}
  .mant-bloque--oro{border-top-color:rgba(200,164,93,.30);}
  .mant-aviso{margin:26px 0 0; padding:16px 19px; border-radius:13px; font-size:.86rem;
    color:rgba(243,234,217,.78); background:rgba(200,164,93,.07);
    border:1px solid rgba(200,164,93,.26);}

  /* ==========================================================================
     LA CUENTA DEL AGENTE
     El mismo componente que "Haz la cuenta" (.cuenta, .campo, .marcador), en
     dorado. Se reutiliza tal cual y solo se repinta: si se toca el original,
     este va detrás sin tener que acordarse.
     ========================================================================== */
  .cuenta--oro{
    background:
      radial-gradient(120% 90% at 8% 0%, rgba(231,199,122,.10), transparent 58%),
      linear-gradient(158deg,#1b1610 0%,#120f0c 46%,#0d0b09 100%);
    border:1px solid rgba(200,164,93,.34);
  }
  .cuenta--oro .rotulo{color:var(--oro-claro);}
  .cuenta--oro .campo input[type=range]{accent-color:var(--oro);}
  .cuenta--oro .campo output{color:var(--oro-claro);}
  .cuenta--oro .marcador{border-color:rgba(200,164,93,.30); background:rgba(200,164,93,.06);}
  .cuenta--oro .marcador__et{color:rgba(231,199,122,.80);}
  .cuenta--oro .marcador__cifra{color:var(--oro-claro);}
  .cuenta--oro .marcador__nota b{color:var(--oro-claro);}
  /* El aro que late al cambiar la cifra, en oro */
  .cuenta--oro .marcador::after{border-color:rgba(200,164,93,.55);}

  /* Las dos filas de la comparación, debajo del marcador */
  .compara-oro{display:grid; gap:9px; margin-top:24px; text-align:left;}
  .compara-oro div{display:flex; justify-content:space-between; gap:14px;
    font-size:.88rem; padding:10px 0; border-bottom:1px solid rgba(200,164,93,.16);}
  .compara-oro div:last-child{border-bottom:0;}
  .compara-oro span{color:var(--tinta-suave);}
  .compara-oro b{font-weight:600; white-space:nowrap;}

  /* ==========================================================================
     LA VENTANA DE "VER QUE INCLUYE"
     Una sola para los cuatro: los tres planes y el agente. El agente le pone
     la clase --oro encima y se repinta; el resto es identico, que es la razon
     de no tener cuatro ventanas que mantener por separado.

     Los enlaces apuntan a /soporte-y-evolucion/ en el HTML. El preventDefault
     vive solo en el JS: si el script no carga, el clic lleva a la pagina y la
     persona ve lo mismo. Nunca se queda sin verlo.
     ========================================================================== */
  .fondo-panel{position:fixed; inset:0; z-index:70; display:grid; place-items:center;
    padding:22px; background:rgba(5,4,3,.78); backdrop-filter:blur(7px);
    transition:opacity .4s var(--curva), visibility .4s var(--curva);}
  .fondo-panel[hidden]{display:grid !important; opacity:0; visibility:hidden; pointer-events:none;}

  .hoja-panel{width:min(100%,600px); max-height:min(86vh,760px); overflow-y:auto;
    border-radius:var(--radio); padding:clamp(26px,4vw,40px);
    background:var(--tarjeta-solida); border:1px solid var(--linea);
    box-shadow:0 30px 90px rgba(0,0,0,.6);}
  .hoja-panel__cab{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;}
  .hoja-panel__cab h3{margin:0; font-family:var(--display); font-weight:400;
    font-size:clamp(1.7rem,4.4vw,2.3rem); line-height:1; color:var(--tinta);}
  .hoja-panel__cerrar{-webkit-appearance:none; appearance:none; background:none; cursor:pointer;
    border:1px solid var(--linea); border-radius:50%; width:38px; height:38px;
    flex:none; display:grid; place-items:center; color:var(--tinta-suave);}
  .hoja-panel__cerrar:hover{border-color:var(--tinta); color:var(--tinta);
    background:rgba(255,255,255,.07);}
  .hoja-panel__cerrar svg{width:17px; height:17px;}
  .hoja-panel__precio{margin:16px 0 0; font-family:var(--display); font-weight:400;
    font-size:1.5rem; color:var(--acento-texto);}
  .hoja-panel__idea{margin:12px 0 0; color:var(--tinta-suave); font-size:.94rem;}
  .hoja-panel ul{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:13px;}
  .hoja-panel li{display:flex; gap:11px; align-items:flex-start;}
  .hoja-panel li svg{width:18px; height:18px; flex:none; margin-top:3px; color:var(--acento);}
  .hoja-panel li b{display:block; font-weight:600; font-size:.93rem; color:var(--tinta);}
  .hoja-panel li span span{display:block; margin-top:3px; font-size:.85rem;
    color:var(--tinta-tenue); line-height:1.5;}
  .hoja-panel__aviso{margin:22px 0 0; padding:14px 17px; border-radius:12px; font-size:.84rem;
    color:var(--tinta-suave); background:rgba(255,255,255,.05); border:1px solid var(--linea);}
  .hoja-panel__aviso[hidden]{display:none;}
  .hoja-panel__pie{margin:18px 0 0; font-size:.84rem; color:var(--tinta-tenue);}
  .hoja-panel__pie a{color:var(--acento-texto);}

  /* --- La misma ventana, en oro, para el agente --- */
  .hoja-panel--oro{
    background:
      radial-gradient(120% 80% at 10% 0%, rgba(231,199,122,.12), transparent 58%),
      linear-gradient(160deg,#1b1610,#0d0b09);
    border-color:rgba(200,164,93,.40);
    box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(231,199,122,.20);}
  .hoja-panel--oro .hoja-panel__cab h3{
    background:linear-gradient(174deg,var(--oro-claro) 10%,var(--oro) 58%,var(--oro-oscuro));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;}
  .hoja-panel--oro .hoja-panel__cerrar{border-color:rgba(200,164,93,.30); color:var(--oro-claro);}
  .hoja-panel--oro .hoja-panel__cerrar:hover{border-color:var(--oro-claro);
    background:rgba(200,164,93,.12);}
  .hoja-panel--oro .hoja-panel__precio{color:var(--oro-claro);}
  .hoja-panel--oro .hoja-panel__idea{color:rgba(243,234,217,.74);}
  .hoja-panel--oro li svg{color:var(--oro);}
  .hoja-panel--oro li b{color:#f3ead9;}
  .hoja-panel--oro li span span{color:rgba(243,234,217,.55);}
  .hoja-panel--oro .hoja-panel__aviso{color:rgba(243,234,217,.76);
    background:rgba(200,164,93,.07); border-color:rgba(200,164,93,.24);}
  .hoja-panel--oro .hoja-panel__pie{color:rgba(243,234,217,.50);}
  .hoja-panel--oro .hoja-panel__pie a{color:var(--oro-claro);}