/* =============================================================================
   FORMULARIO BRIOX · la tarjeta con el anillo de luz, sus campos y sus estados

   POR QUÉ ESTÁ EN UN ARCHIVO Y NO DENTRO DE CADA PÁGINA (28-ago-2026)
   Nació dentro de contacto.html. Al montar el formulario de EMPLEO hacía falta el
   mismo aspecto, y copiarlo habría creado dos formularios que se parecen HOY y
   dejan de parecerse a la primera corrección — que es exactamente lo que prohíbe
   la regla del componente único de Juan.

   Es un MOVIMIENTO, no una reescritura: el mismo CSS, en el mismo orden, cargado
   en el mismo sitio (después de styles.css). La cascada no cambia.

   Lo usan: /contacto y /personal.
   ============================================================================= */
    /* Pie: MISMA fuente de la web (Poppins), NO la mono "techy" ni una serif ajena.
       El © sobrio, en Poppins, como el resto del footer (Juan, 27-jul: "igual que la web"). */
    .site-footer .footer__meta{ font-family:var(--font); text-transform:none; font-weight:500;
      font-size:13px; letter-spacing:.02em; color:var(--muted); }

    /* El header es el ÚNICO de la web (tools/partes-web.mjs): rejilla de 3 pistas con
       el logo en el eje. Aquí NO se toca su layout — antes había un `display:flex`
       que lo pisaba y dejaba la navegación amontonada contra el logo. */
    .m-header__cta{ font-size:var(--fs-small); font-weight:var(--fw-med); color:var(--cream);
      border:1px solid var(--line-gold); border-radius:999px; padding:.5rem 1rem; white-space:nowrap;
      transition:background .16s var(--ease,ease); }
    .m-header__cta:hover{ background:rgba(255, 181, 0,.1); text-decoration:none; }
    /* Header NO pegajoso en /contacto (Juan 27-jul: "si hago scroll, el header que se quede
       donde está y desaparezca"). El de la home es sticky, pero aquí no hay JS de scroll y
       eso solo hacía que la barra persiguiera y tapara el formulario. ESTÁTICO: se queda
       arriba y se va con el scroll. Fondo sólido para que el logo no pise la rejilla del fondo. */
    /* `position:relative`, NO `static`. Parece un detalle y no lo es: un elemento
       estático IGNORA su z-index, así que el header perdía su z-index:50 y el
       panel del menú (z-index:49) le pasaba por encima tapando el aspa de cerrar.
       Resultado en móvil: abrías el menú y NO PODÍAS SALIR (solo con Escape, que
       en un móvil no existe). Con `relative` el z-index vuelve a contar y el
       header sigue sin ser pegajoso, que era lo que Juan pidió el 27-jul. */
    .site-header{ position:relative; z-index:51; background:#080605; }

    /* ——— FORMULARIO DE CONTACTO (scoped .cf-*) ——— */
    /* El .cf es flex, y eso pisaba a [hidden] al enviar (se veían form Y éxito a la vez).
       Con id+atributo gana la especificidad y el formulario sí se oculta. */
    #cf[hidden]{ display:none; }
    /* El header es STICKY (ocupa su sitio en el flujo), así que NO hace falta reservarle
       hueco con padding: eso metía ~77px de aire muerto entre la barra y el form (Juan
       27-jul: "quita ese aire"). Solo un respiro mínimo arriba. */
    .cf-hero{ padding:clamp(.6rem,2vw,1.3rem) 0 clamp(1.5rem,4vw,2.5rem); }
    /* CERO FRICCIÓN (Juan, 27-ago): lo PRIMERO que se ve al aterrizar es el FORMULARIO,
       en móvil y en escritorio. El titular y los bullets bajan DEBAJO, como refuerzo para
       quien duda. El orden es el del DOM (form → copy → extra): sin trucos de `order`, así
       lo que se lee y lo que se tabula coinciden. El H1 sigue en el DOM → SEO intacto. */
    .cf-hero__grid{ display:grid; gap:1.6rem; align-items:start; grid-template-columns:1fr; }
    /* Kicker "Venta al por mayor": AHORA en Poppins (la mono queda PROHIBIDA, Juan 27-jul)
       y colocado DEBAJO de los bullets, como un sello discreto de la categoría. */
    .cf-eyebrow{ font-family:var(--font); text-transform:uppercase; letter-spacing:.14em;
      font-size:12px; color:var(--gold); margin:1.4rem 0 0; font-weight:var(--fw-semi); }
    .cf-title{ font-size:clamp(2.1rem,5.2vw,3.4rem); line-height:1.02; letter-spacing:var(--ls-h2);
      font-weight:var(--fw-black); color:var(--cream); margin:0 0 1rem; text-wrap:balance; }
    .cf-title .g{ color:var(--gold); }
    /* Sin margen inferior: el subtítulo va DEBAJO del formulario y el hueco hasta los
       bullets lo pone el `gap` de la rejilla. */
    .cf-lead{ font-size:var(--fs-lead); color:var(--muted); margin:0; max-width:34ch; }
    .cf-usps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
    .cf-usps li{ display:flex; align-items:center; gap:.6rem; color:var(--cream); font-size:var(--fs-body); font-weight:var(--fw-med); }
    .cf-usps svg{ width:1.15em; height:1.15em; color:var(--gold); flex:none; }

    /* ESCRITORIO: una sola columna centrada — FORMULARIO arriba, y debajo el titular y los
       bullets, anchos y centrados. Va DESPUÉS de las reglas base y con selector más específico
       para ganarlas de verdad. */
    @media (min-width:760px){
      .cf-hero__grid{ gap:clamp(2.2rem,4.6vw,3.6rem); }
      .cf-hero__grid .cf-hero__copy{ text-align:center; }
      .cf-hero__grid .cf-title{ font-size:clamp(2.8rem,6.4vw,4.8rem); max-width:none; margin-inline:auto; }
      .cf-hero__grid .cf-lead{ max-width:58ch; margin-left:auto; margin-right:auto;
        font-size:clamp(1.05rem,1.7vw,1.35rem); }
      .cf-hero__grid .cf-card{ max-width:640px; width:100%; margin-inline:auto; }
      .cf-hero__grid .cf-hero__extra{ text-align:center; }
      /* Los 3 bullets, MISMO ARRANQUE EN X: `align-items:center` centraba cada línea por su
         cuenta y los tres checks salían en zigzag. Se centra la LISTA como bloque y dentro
         alinean a la izquierda — filas hermanas, mismo arranque (regla de Juan). */
      .cf-hero__grid .cf-usps{ width:max-content; max-width:100%; margin-inline:auto; align-items:flex-start; }
      .cf-hero__grid .cf-eyebrow{ text-align:center; }
    }

    /* La tarjeta del formulario · fondo MÁS OSCURO + ANILLO de luz animado calcado del
       catálogo (Juan 27-jul). Técnica del catálogo: @property anima el ángulo de un
       conic-gradient dorado y una máscara (mask-composite:exclude) deja el oro SOLO en el
       borde → una luz recorre el marco, lenta y con un respiro de brillo. */
    @property --anillo-a{ syntax:'<angle>'; inherits:false; initial-value:0deg }
    .cf-card{ position:relative; background:#0d0b0a; border:1px solid var(--line); border-radius:20px;
      padding:clamp(1.7rem,3.4vw,2.8rem); box-shadow:0 24px 60px -30px rgba(0,0,0,.75); }
    .cf-card::before{
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none; z-index:1;
      background:conic-gradient(from var(--anillo-a),
        rgba(255,181,0,.22) 0deg, rgba(255,181,0,.22) 40deg, rgba(255,181,0,.6) 66deg, var(--gold) 84deg, #fff7db 96deg,
        var(--gold) 108deg, rgba(255,181,0,.6) 126deg, rgba(255,181,0,.22) 152deg, rgba(255,181,0,.22) 360deg);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      /* mov-ok: el anillo de luz del marco es el efecto que Juan aprobó el 27-jul
         ("calcado del catálogo"): el movimiento continuo ES el punto — un anillo que
         da una vuelta y se para no es una luz recorriendo el marco, es un tic. Anima
         el ÁNGULO de un conic-gradient (@property) y la opacidad de una capa gemela,
         las dos en el compositor: no recoloca nada. Y se apaga con reduced-motion. */
      animation:anilloGira 7s linear infinite, anilloRespira 3.5s ease-in-out infinite alternate; }
    /* Para PARTICULAR el anillo va en AZUL, como el resto del acento. */
    .cf-card.is-particular::before{ background:conic-gradient(from var(--anillo-a),
      rgba(76,141,255,.22) 0deg, rgba(76,141,255,.22) 40deg, rgba(76,141,255,.55) 66deg, var(--acc) 84deg, #dbe8ff 96deg,
      var(--acc) 108deg, rgba(76,141,255,.55) 126deg, rgba(76,141,255,.22) 152deg, rgba(76,141,255,.22) 360deg); }
    @keyframes anilloGira{ from{ --anillo-a:0deg } to{ --anillo-a:360deg } }
    @keyframes anilloRespira{ from{ opacity:.72 } to{ opacity:1 } }
    @media (prefers-reduced-motion:reduce){ .cf-card::before{ animation:none; opacity:.9 } }
    /* CELEBRACIÓN al enviar (Juan 27-jul): el anillo se enciende ENTERO y da UNA vuelta
       rápida (~1s). Dorado, o azul si es particular. El JS pone/quita la clase .celebra. */
    @keyframes anilloCelebra{ from{ --anillo-a:0deg } to{ --anillo-a:360deg } }
    .cf-card.celebra::before{ opacity:1; animation:anilloCelebra .9s cubic-bezier(.25,.9,.25,1) 1;
      background:conic-gradient(from var(--anillo-a),
        rgba(255,181,0,.7) 0deg, var(--gold) 55deg, #fff7db 110deg, var(--gold) 165deg,
        rgba(255,181,0,.7) 220deg, var(--gold) 300deg, rgba(255,181,0,.7) 360deg); }
    .cf-card.is-particular.celebra::before{ background:conic-gradient(from var(--anillo-a),
      rgba(76,141,255,.7) 0deg, var(--acc) 55deg, #dbe8ff 110deg, var(--acc) 165deg,
      rgba(76,141,255,.7) 220deg, var(--acc) 300deg, rgba(76,141,255,.7) 360deg); }
    @media (prefers-reduced-motion:reduce){ .cf-card.celebra::before{ animation:none } }
    .cf{ display:flex; flex-direction:column; gap:1.5rem; }
    .cf-field{ display:flex; flex-direction:column; gap:.6rem; }
    .cf-grid2{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
    @media (min-width:520px){ .cf-grid2{ grid-template-columns:1fr 1fr; } }
    .cf-lab{ font-size:var(--fs-small); font-weight:var(--fw-med); color:var(--cream); letter-spacing:.005em; }
    .cf-lab small{ color:var(--muted); font-weight:var(--fw-reg); }
    .cf-req{ color:var(--gold); }
    /* BORDE DORADO, no gris (Juan, 28-ago: "te faltó recuadro en este"). Con `--line`
       sobre el fondo casi negro de la tarjeta, la caja del campo no se veía: parecía un
       hueco, no algo donde escribir. El mismo borde que ya llevan las casillas de opción
       y la zona del currículum — una sola manera de decir "aquí se toca". */
    .cf input, .cf textarea{ width:100%; font:inherit; font-size:var(--fs-body); color:var(--cream);
      background:var(--surface-1); border:1px solid var(--line-gold); border-radius:12px;
      padding:.9rem 2.4rem .9rem 1rem; transition:border-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease); min-height:54px; }
    .cf textarea{ resize:vertical; min-height:104px; line-height:1.5; }
    .cf input::placeholder, .cf textarea::placeholder{ color:#6f665a; }
    .cf input:focus, .cf textarea:focus{ outline:none; border-color:var(--gold);
      box-shadow:0 0 0 3px rgba(255, 181, 0,.16); }
    .cf input:user-invalid, .cf textarea:user-invalid{ border-color:rgba(221,29,29,.55); }
    /* VALIDACIÓN EN VIVO: ✓ verde que hace "POP" al aparecer. Truco: la imagen de fondo
       no se escala con transform, pero SÍ se anima el background-size (0 → 18px) con un
       easing de rebote, y da el mismo efecto de aparición (Juan 27-jul). */
    .cf input:required, .cf textarea:required{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2342d885' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 14px center; background-size:0;
      transition:border-color .16s var(--ease,ease), box-shadow .16s var(--ease,ease), background-size .17s cubic-bezier(.34,1.7,.5,1); }
    .cf textarea:required{ background-position:right 16px top 16px; }
    .cf input:required:valid, .cf textarea:required:valid{ background-size:18px; }

    /* Hilo de progreso ARRIBA del formulario: mismo % que el botón (Juan 27-jul). Lee
       --fill, que el JS pone en el <form> → lo heredan el hilo Y la barra del botón. */
    .cf-prog{ height:3px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:.2rem; }
    .cf-prog i{ display:block; height:100%; width:var(--fill,0%); border-radius:99px;
      background:linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow:0 0 8px rgba(255, 181, 0,.55);
      /* mov-ok: es una BARRA DE PROGRESO y el ancho es el dato. Con `transform:scaleX`
         el degradado se estiraría con ella —el oro del final se arrastraría hacia el
         principio— y el brillo se deformaría. Son 3 px de alto dentro de su caja: no
         recoloca nada de la página, solo se repinta a sí misma. */
      transition:width .4s var(--ease,ease); }
    .cf-card.is-particular .cf-prog i{ background:linear-gradient(90deg, var(--acc-2), var(--acc)); box-shadow:0 0 8px rgba(76,141,255,.55); }
    /* Enlace "saltar al formulario": OCULTO hasta enfocarlo con teclado (a11y). En
       contacto no se linka mayorista.css, por eso su estilo va aquí (si no, se veía). */
    .m-skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--gold); color:var(--ink-invert);
      padding:.6rem 1rem; border-radius:0 0 10px 0; font-weight:600; font-size:var(--fs-small); }
    .m-skip:focus{ left:0; }
    /* Teléfono con banderita del país (según el prefijo que escriba). */
    .cf-tel{ position:relative; }
    .cf-tel-flag{ position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:19px; line-height:1; pointer-events:none; }
    .cf-tel input{ padding-left:46px; }

    /* Buscador de CIUDAD: sugerencias mientras escribe (España + Portugal + Francia). Es una
       AYUDA, NO obliga a elegir de la lista (Juan 27-jul: "aquí no hacemos fricción"). Dropdown
       oscuro premium, con el nombre en claro y la provincia/país a la derecha en apagado. */
    .cf-ac{ position:relative; }
    .cf-ac__list{ position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px;
      list-style:none; max-height:238px; overflow-y:auto; -webkit-overflow-scrolling:touch;
      background:var(--surface-2); border:1px solid var(--line-gold); border-radius:12px;
      box-shadow:0 22px 46px -22px rgba(0,0,0,.8); }
    .cf-ac__list li{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; cursor:pointer;
      padding:.55rem .7rem; border-radius:8px; color:var(--cream); font-size:var(--fs-body); }
    .cf-ac__list li b{ font-weight:var(--fw-med); }
    .cf-ac__list li span{ color:var(--muted); font-size:var(--fs-small); flex:none; }
    .cf-ac__list li.is-sel, .cf-ac__list li:hover{ background:rgba(255, 181, 0,.14); }
    .cf-card.is-particular .cf-ac__list{ border-color:rgba(76,141,255,.5); }
    .cf-card.is-particular .cf-ac__list li.is-sel, .cf-card.is-particular .cf-ac__list li:hover{ background:rgba(76,141,255,.16); }

    /* Segmento negocio/particular */
    .cf-seg{ display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--surface-1);
      border:1px solid var(--line); border-radius:12px; padding:5px; }
    .cf-seg__b{ font:inherit; font-size:var(--fs-small); font-weight:var(--fw-med); color:var(--muted);
      background:transparent; border:0; border-radius:8px; padding:.6rem .5rem; cursor:pointer; min-height:44px;
      /* 44px, no 42: es el mínimo que Apple da por tocable con el dedo. Estos botones
         son la respuesta a media pregunta del formulario y el 90% de quien los pulsa
         llega desde un anuncio, en el móvil, con una mano. */
      transition:background .16s, color .16s; }
    .cf-seg__b.is-on{ background:var(--gold); color:var(--ink-invert); font-weight:var(--fw-semi); }

    /* Consentimiento */
    .cf-consent{ display:flex; align-items:flex-start; gap:.6rem; font-size:var(--fs-small);
      color:var(--muted); line-height:1.45; }
    /* Casilla PREMIUM (Juan 27-jul: "la casilla blanca la veo muy android"). Se quita el
       checkbox nativo (accent-color) y se dibuja a mano: cuadro redondeado oscuro con borde
       dorado; al marcar, se llena de oro y el check aparece con un "pop" (mismo lenguaje que
       el ✓ de los campos). min-height:0 + padding:0: la regla general `.cf input` le metía
       54px de alto y lo descuadraba. */
    .cf-consent input{ appearance:none; -webkit-appearance:none; width:22px; height:22px; min-height:0;
      padding:0; margin-top:1px; flex:none; cursor:pointer; border:1.5px solid var(--line-gold);
      border-radius:7px; background-color:var(--surface-1); background-repeat:no-repeat; background-position:center;
      background-size:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23140f06' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      transition:background-color .16s var(--ease,ease), border-color .16s var(--ease,ease),
        background-size .18s cubic-bezier(.34,1.7,.5,1), box-shadow .16s var(--ease,ease); }
    .cf-consent input:hover{ border-color:var(--gold); }
    .cf-consent input:checked{ background-color:var(--gold); border-color:var(--gold); background-size:14px; }
    .cf-consent input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255, 181, 0,.22); }
    .cf-card.is-particular .cf-consent input{ border-color:rgba(76,141,255,.55); }
    .cf-card.is-particular .cf-consent input:hover{ border-color:var(--acc); }
    .cf-card.is-particular .cf-consent input:checked{ background-color:var(--acc); border-color:var(--acc); }
    .cf-consent a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
    .cf-consent--opt{ margin-top:-.4rem; }
    .cf-consent--opt small{ opacity:.8; }

    /* Campos que se ocultan para PARTICULAR (negocio + consumo). El .cf-field es flex,
       así que necesita este [hidden] explícito para desaparecer de verdad. */
    .cf-field[hidden]{ display:none; }
    /* En el "gracias", el bloque de la App para particular (a pedir muestras). */
    .cf-ok-app{ margin-top:1.6rem; padding-top:1.5rem; border-top:1px solid var(--line); }
    .cf-ok-app .cf-app__stores{ margin-top:1rem; }
    /* Botón a WhatsApp con Lucía (verde WhatsApp reconocible, sobrio). El JS le pone el href. */
    .cf-wa{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
      margin-top:1.5rem; padding:.9rem 1.2rem; min-height:54px; border-radius:12px; background:#25d366;
      color:#07331d; font-weight:var(--fw-semi); font-size:var(--fs-body); text-decoration:none;
      box-shadow:0 12px 30px -14px rgba(37,211,102,.55); transition:transform .12s var(--ease,ease), filter .16s var(--ease,ease); }
    .cf-wa:hover{ filter:brightness(1.06); text-decoration:none; }
    .cf-wa:active{ transform:scale(.98); }
    .cf-wa svg{ width:1.5em; height:1.5em; flex:none; }
    .cf-wa[hidden]{ display:none; }
    /* Botón al CATÁLOGO (dorado de marca) — se muestra mientras Lucía está apagada. */
    .cf-cat{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
      margin-top:1.5rem; padding:.9rem 1.2rem; min-height:54px; border-radius:12px;
      background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:var(--ink-invert);
      font-weight:var(--fw-semi); font-size:var(--fs-body); text-decoration:none;
      box-shadow:0 12px 30px -14px rgba(255, 181, 0,.5); transition:transform .12s var(--ease,ease), filter .16s var(--ease,ease); }
    .cf-cat:hover{ filter:brightness(1.05); text-decoration:none; }
    .cf-cat:active{ transform:scale(.98); }
    .cf-cat svg{ width:1.4em; height:1.4em; flex:none; }
    .cf-cat[hidden]{ display:none; }
    /* Grid de fondo MÁS SUAVE en esta página (Juan 27-jul: "está muy fuerte"). */
    .grid-bg::before, .grid-bg::after{ opacity:.5; }

    /* Slider PREMIUM · barra DORADA que brilla (Juan 27-jul: "nada android"). El `.cf .cf-slider`
       gana en especificidad a `.cf input` para poder resetear su caja. El relleno lo pinta el JS. */
    .cf-slider-wrap{ display:flex; flex-direction:column; gap:1rem; padding:.5rem 0 .3rem; }
    /* El input es ALTO como el thumb (transparente); la barra visible es el
       runnable-track (10px), que webkit CENTRA dentro → el círculo queda a la línea.
       El relleno dorado lo controla --pct (lo pone el JS). margin-top = (10-24)/2 = -7. */
    .cf .cf-slider{ -webkit-appearance:none; appearance:none; width:100%; height:26px; padding:0; min-height:0;
      background:transparent; border:none; outline:none; cursor:pointer; --pct:0%; }
    .cf-slider::-webkit-slider-runnable-track{ height:10px; border-radius:99px; border:1px solid var(--line);
      background:linear-gradient(90deg, var(--gold-2), var(--gold) var(--pct), var(--surface-1) var(--pct), var(--surface-1)); }
    .cf-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; box-sizing:border-box;
      width:24px; height:24px; margin-top:-7px; border-radius:50%; cursor:grab; border:2px solid rgba(255,255,255,.45);
      background:radial-gradient(circle at 34% 30%, var(--gold-2), var(--gold) 62%);
      box-shadow:0 0 0 4px rgba(255, 181, 0,.16), 0 0 16px 3px rgba(255, 181, 0,.62), 0 2px 6px rgba(0,0,0,.55); }
    .cf-slider::-moz-range-track{ height:10px; border-radius:99px; border:1px solid var(--line);
      background:linear-gradient(90deg, var(--gold-2), var(--gold) var(--pct), var(--surface-1) var(--pct), var(--surface-1)); }
    .cf-slider::-moz-range-thumb{ box-sizing:border-box; width:24px; height:24px; border-radius:50%; cursor:grab;
      border:2px solid rgba(255,255,255,.45); background:radial-gradient(circle at 34% 30%, var(--gold-2), var(--gold) 62%);
      box-shadow:0 0 0 4px rgba(255, 181, 0,.16), 0 0 16px 3px rgba(255, 181, 0,.62); }
    .cf .cf-slider:active::-webkit-slider-thumb{ cursor:grabbing;
      box-shadow:0 0 0 5px rgba(255, 181, 0,.24), 0 0 24px 5px rgba(255, 181, 0,.82), 0 2px 6px rgba(0,0,0,.55); }
    .cf-slider-out{ font-size:var(--fs-body); color:var(--gold); font-weight:var(--fw-semi); font-variant-numeric:tabular-nums; }
    .cf-slider-out.cf-vol-muted{ color:var(--muted); font-weight:var(--fw-reg); font-size:var(--fs-small); }
    /* SIN rectángulo de foco en el slider (Juan 27-jul: "aparece un rectángulo bordeando
       todo"). El foco de teclado se ve en el borde del thumb, no en un recuadro gigante. */
    .cf .cf-slider:focus, .cf .cf-slider:focus-visible{ outline:none; box-shadow:none; border-color:transparent; }

    /* ── EL DESLIZADOR, PARA UN DEDO (16-ago-2026) ──────────────────────────
       Medido sobre los leads REALES: 5 negocios entraron sin decir su consumo, y
       los CINCO desde el móvil. El control medía 26 px de alto con una pista de 10:
       por debajo del mínimo de 44 px para un dedo, y con una pista tan fina hay que
       acertar casi al píxel para arrastrarlo o tocarlo.
       No es que no quisieran contestar: es que no podían.
       Se le da 44 px de zona de toque SIN engordar la pista, que sigue fina porque
       es lo que se ve bonito — lo que crece es lo que se toca, no lo que se pinta. */
    /* Ojo con el selector: la regla base es `.cf .cf-slider`, no `.cf-slider` a secas.
       Con la corta, esta media query no ganaba y el control seguía midiendo 26 px —
       la regla encajaba, estaba en la página, y no hacía NADA. Se ve midiendo el alto
       final, no leyendo el CSS. Una media query no añade peso: manda la especificidad. */
    @media (pointer: coarse){
      .cf .cf-slider{ height:44px; }
      .cf .cf-slider::-webkit-slider-runnable-track{ height:12px; }
      .cf .cf-slider::-moz-range-track{ height:12px; }
      /* El pulgar, más grande: es el objetivo del dedo. */
      .cf .cf-slider::-webkit-slider-thumb{ width:32px; height:32px; margin-top:-11px; }
      .cf .cf-slider::-moz-range-thumb{ width:32px; height:32px; }
    }

    /* ── CUANDO FALTA UN CAMPO OBLIGATORIO ──────────────────────────────────
       Antes el aviso salía SOLO arriba del formulario, y en un móvil con el
       formulario largo eso lo lee quien ya está mirando el botón: nadie.
       Ahora se lleva al campo y se le enciende el borde un momento. Late dos veces
       y para — un parpadeo infinito molesta y se acaba ignorando. */
    .cf-falta{ animation:cfFalta 1.3s cubic-bezier(.16,1,.3,1) 2; border-radius:14px; }
    @keyframes cfFalta{
      0%,100%{ box-shadow:0 0 0 0 rgba(255,181,0,0); }
      35%    { box-shadow:0 0 0 3px rgba(255,181,0,.5), 0 0 22px 4px rgba(255,181,0,.28); }
    }
    .cf-falta .cf-lab{ color:var(--gold); }
    @media (prefers-reduced-motion:reduce){
      .cf-falta{ animation:none; box-shadow:0 0 0 3px rgba(255,181,0,.5); }
    }
    .cf .cf-slider:focus-visible::-webkit-slider-thumb{ border-color:var(--cream); }
    .cf .cf-slider:focus-visible::-moz-range-thumb{ border-color:var(--cream); }

    /* ACENTO por tipo de cliente: dorado (negocio) o AZUL (particular, Juan 27-jul). */
    .cf-card{ --acc:var(--gold); --acc-2:var(--gold-2); --acc-ink:var(--ink-invert); }
    .cf-card.is-particular{ --acc:#4c8dff; --acc-2:#8fb8ff; --acc-ink:#fff; }
    .cf-seg__b.is-on{ background:var(--acc); color:var(--acc-ink); font-weight:var(--fw-semi); }

    /* Flujo PARTICULAR → App (a pedir muestras). */
    .cf-app{ text-align:center; padding:.4rem .2rem 0; }
    .cf-app__t{ font-size:var(--fs-h3); font-weight:var(--fw-black); color:var(--cream); margin:.3rem 0 .5rem; letter-spacing:var(--ls-h3); }
    .cf-app__d{ color:var(--muted); font-size:var(--fs-body); margin:0 auto 1.2rem; max-width:34ch; }
    .cf-app__d b{ color:var(--acc-2); }
    .cf-app__stores{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }

    .cf-submit{ width:100%; justify-content:center; font-size:var(--fs-body); padding:.95rem 1.2rem;
      margin-top:.25rem; min-height:54px; }
    /* Botón "BARRA DE CARGA": gris y se rellena en DORADO según completas los campos;
       solo se activa (y el texto se oscurece) al 100% (Juan 27-jul). */
    .cf .cf-submit{ position:relative; overflow:hidden; background:#33302b; color:var(--cream);
      border:1px solid var(--line); text-shadow:0 1px 2px rgba(0,0,0,.35); transition:color .25s, border-color .25s; }
    .cf .cf-submit::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--fill,0%);
      background:linear-gradient(90deg, var(--gold-2), var(--gold));
      /* mov-ok: el mismo caso que la barra de arriba — el botón se va LLENANDO de oro
         según se completa el formulario, y el ancho es la medida. Va en `position:
         absolute` dentro del botón, así que su cambio no mueve ni un píxel del resto. */
      transition:width .4s var(--ease,ease); z-index:0; }
    .cf-submit__t{ position:relative; z-index:1; }
    .cf .cf-submit.is-complete{ color:var(--ink-invert); text-shadow:none; border-color:transparent; }
    .cf .cf-submit:disabled{ cursor:not-allowed; }
    .cf .cf-submit:not(:disabled):active{ transform:scale(.98); }
    .cf-card.is-particular .cf-submit::before{ background:linear-gradient(90deg, var(--acc-2), var(--acc)); }
    .cf-note{ text-align:center; font-size:var(--fs-small); color:var(--muted); margin:.2rem 0 0; }
    .cf-error{ margin:0; font-size:var(--fs-small); color:#ff8f8f; background:rgba(221,29,29,.1);
      border:1px solid rgba(221,29,29,.3); border-radius:10px; padding:.6rem .8rem; }

    /* Honeypot: fuera de la vista y del tabulador, pero rellenable por un bot. */
    .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

    /* Estado de ÉXITO */
    .cf-ok{ text-align:center; padding:clamp(1.5rem,4vw,2.5rem) 1rem; }
    .cf-ok__ring{ width:74px; height:74px; margin:0 auto 1.1rem; border-radius:50%;
      display:grid; place-items:center; background:rgba(255, 181, 0,.12); border:1px solid var(--line-gold); }
    .cf-ok__ring svg{ width:38px; height:38px; color:var(--gold); }
    .cf-ok__ring path{ stroke-dasharray:30; stroke-dashoffset:30; animation:cfCheck .5s .05s var(--ease,ease) forwards; }
    @keyframes cfCheck{ to{ stroke-dashoffset:0; } }
    .cf-ok h2{ font-size:var(--fs-h3); color:var(--cream); font-weight:var(--fw-black); margin:0 0 .5rem; }
    .cf-ok p{ color:var(--muted); font-size:var(--fs-body); margin:0 auto; max-width:40ch; }
    @media (prefers-reduced-motion:reduce){ .cf-ok__ring path{ animation:none; stroke-dashoffset:0; } }