/* ==========================================================================
   BLIXTOR · css/p/formulario.css  (el formulario de captación y su acuse)
   --------------------------------------------------------------------------
   Lo usan /contacto y la landing /lp/paginas-web (16 oct 2026). Marcado en
   tools/generador/formulario.js; comportamiento en js/formulario-contacto.js.
   Salió tal cual de css/p/contacto.css: mismo aspecto en las dos páginas.
   Forma (DESIGN.md): los campos y las opciones llevan el radio de medios
   (10 px); el botón, píldora. Los filetes de los campos tienen 3:1 sobre
   blanco (WCAG 1.4.11) y el rojo de error 7:1; el error nunca va solo con
   color (icono y texto). Campos de 17 px: iOS no hace zoom.
   La tarjeta que lo contiene es de cada página (.cx__card, .lp-card).
   ========================================================================== */

:root{
  --f-line:#9A858B;   /* filete de campo: 3.4:1 sobre blanco, 3.2:1 sobre crema */
  --f-ph:#806469;     /* placeholder: 5:1 sobre crema */
  --f-error:#A3263A;  /* error: 7.3:1 sobre blanco */
  --f-on:#FDF2F5;     /* fondo de la opción elegida */
}

/* ==========================================================================
   FORMULARIO · etiqueta visible encima de cada campo (el placeholder es un
   ejemplo, nunca la etiqueta). El asterisco marca lo obligatorio y
   "(opcional)" lo que no.
   ========================================================================== */
.fc{display:grid;gap:1.25rem}
.fc__h{font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);font-weight:600;line-height:1.15;letter-spacing:-.025em}
.fc__sub{margin-top:.4rem;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.fc__req{font-weight:600;color:var(--accent)}
.fc__opt{font-weight:400;color:var(--ink-2)}

.fc__field{display:grid;gap:.45rem;min-width:0}
.fc__label{font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--ink)}
fieldset.fc__set{display:block;margin:0;padding:0;border:0}
.fc__set legend{padding:0;margin-bottom:.55rem}

.fc__input{
  display:block;width:100%;min-height:54px;padding:.85rem 1rem;
  font-size:1.0625rem;line-height:1.4;color:var(--ink);
  background:var(--bg);border:1px solid var(--f-line);border-radius:var(--r-media);
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out);
}
.fc__input::placeholder{color:var(--f-ph);opacity:1}
.fc__input:focus,.fc__input:focus-visible{outline:none;background:#FFF;border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,48,96,.2)}
.fc__area{min-height:7.75rem;resize:vertical;line-height:1.5}
.fc__ctl{position:relative}
.fc__wa{position:absolute;left:1rem;top:50%;width:1.25rem;height:1.25rem;transform:translateY(-50%);color:var(--ink-2);pointer-events:none;transition:color .2s}
.fc__ctl:focus-within .fc__wa{color:var(--accent)}
.fc__input--tel{padding-left:2.85rem;font-variant-numeric:tabular-nums}
.fc__hint,.fc__count{font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.fc__count{font-variant-numeric:tabular-nums}

.fc__error{display:flex;gap:.45rem;align-items:flex-start;font-size:.875rem;font-weight:500;line-height:1.45;color:var(--f-error)}
.fc__ei{width:1.05rem;height:1.05rem;flex:none;margin-top:.1rem}
.fc__set .fc__error{margin-top:.55rem}
.is-invalid .fc__input,.is-invalid .fc__box{border-color:var(--f-error)}
.is-invalid .fc__input:focus{box-shadow:0 0 0 3px rgba(163,38,58,.16)}
@media(prefers-reduced-motion:no-preference){
  .fc__error:not([hidden]){animation:fc-in .3s var(--ease-out)}
}

/* "¿En qué te ayudamos?": radios nativos (flechas, Tab y lector de
   pantalla funcionan solos) vestidos de opción a todo lo ancho: icono,
   texto y el anillo que se llena al elegir. */
.fc__choices{display:grid;gap:.6rem}
.fc__choice{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fc__radio{position:absolute;top:50%;left:1rem;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.fc__box{
  display:grid;grid-template-columns:1.375rem minmax(0,1fr) 1.25rem;gap:.85rem;align-items:center;
  min-height:56px;padding:.75rem 1rem;
  background:var(--bg);border:1px solid var(--f-line);border-radius:var(--r-media);
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .16s var(--ease-out);
}
.fc__ico{width:1.375rem;height:1.375rem;color:var(--ink-2);transition:color .2s}
.fc__ct{font-size:1rem;font-weight:500;line-height:1.35;color:var(--ink)}
.fc__ring{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;border:1.5px solid var(--f-line);background:#FFF;transition:border-color .2s}
.fc__ring::after{content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .28s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .fc__input:hover:not(:focus),.fc__choice:hover .fc__box{border-color:var(--ink-2)}
}
.fc__choice:active .fc__box{transform:scale(.99)}
.fc__radio:checked + .fc__box{border-color:var(--accent);background:var(--f-on);box-shadow:inset 0 0 0 1px var(--accent)}
.fc__radio:checked + .fc__box .fc__ring{border-color:var(--accent)}
.fc__radio:checked + .fc__box .fc__ring::after{transform:scale(1)}
.fc__radio:checked + .fc__box .fc__ico{color:var(--accent)}
.fc__radio:focus-visible + .fc__box{outline:2px solid var(--accent);outline-offset:2px}

/* Honeypot: fuera de pantalla (no display:none, que algunos bots saltan),
   fuera del árbol de accesibilidad (aria-hidden) y del Tab (tabindex). */
.fc__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Turnstile en modo "interaction-only": el contenedor no ocupa sitio (ni
   abre hueco en la rejilla del formulario) hasta que Cloudflare pide un
   clic; entonces js/formulario-contacto.js le pone .is-visible. */
.fc__ts{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.fc__ts.is-visible{position:static;width:auto;height:auto;overflow:visible;clip-path:none;min-height:65px}
.fc__ts-nota{font-size:.875rem;line-height:1.45;font-weight:500;color:var(--ink)}

/* Envío: el botón a todo lo ancho; mientras envía, cambia el texto y la
   flecha deja su sitio a un indicador (sin giro con movimiento reducido:
   el texto "Enviando…" ya lo dice). */
.fc__send{display:grid;gap:.85rem;margin-top:.25rem}
.fc__btn{width:100%}
.fc__spin{display:none;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#FFF}
.fc__btn.is-loading{cursor:progress}
.fc__btn.is-loading::before{transform:none}
.fc__btn.is-loading .fc__arrow{display:none}
.fc__btn.is-loading .fc__spin{display:block}
@media(prefers-reduced-motion:no-preference){
  .fc__btn.is-loading .fc__spin{animation:fc-spin .7s linear infinite}
}
@keyframes fc-spin{to{transform:rotate(360deg)}}
.fc__alert{padding:.1rem 0 .1rem .9rem;border-left:3px solid var(--f-error);font-size:.9375rem;line-height:1.5;color:var(--ink-body)}
.fc__fine{font-size:.8125rem;line-height:1.5;color:var(--ink-2)}

/* Acuse: sustituye al formulario dentro de la misma tarjeta. El círculo y
   la palomita se trazan al aparecer (responde al envío); lo demás entra
   unos píxeles. Debajo, lo que conviene tener a la mano para la llamada. */
.fc-ok{display:grid;gap:1rem}
.fc-ok:focus{outline:none}
.fc-ok__check{width:56px;height:56px;overflow:visible}
.fc-ok__c{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.fc-ok__p{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.fc-ok__h{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.fc-ok__lead{font-size:1.0625rem;line-height:1.55;color:var(--c-body)}
.fc-ok__lead strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-ok__prep{margin-top:.25rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.fc-ok__lab{font-size:var(--fs-small);font-weight:600;line-height:1.45;color:var(--ink)}
.fc-ok__list{display:grid;gap:.5rem;margin-top:.75rem}
.fc-ok__list li{display:grid;grid-template-columns:.75rem minmax(0,1fr);gap:.75rem;align-items:start;font-size:var(--fs-small);line-height:1.5;color:var(--c-body)}
.fc-ok__ring{display:block;width:.7rem;height:.7rem;margin-top:.42rem;border-radius:50%;border:1.5px solid var(--accent)}
.fc-ok__calc{margin-top:1rem;font-size:var(--fs-small);line-height:1.6;color:var(--c-body)}
.fc-ok__alt{padding-top:1rem;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.55;color:var(--ink-2)}
@media(prefers-reduced-motion:no-preference){
  .fc-ok:not([hidden]) .fc-ok__c{animation:fc-draw .6s var(--ease-out) backwards}
  .fc-ok:not([hidden]) .fc-ok__p{animation:fc-draw .45s .4s var(--ease-out) backwards}
  .fc-ok:not([hidden]) > :not(.fc-ok__check){animation:fc-in .5s .2s var(--ease-out) backwards}
}
@keyframes fc-draw{from{stroke-dashoffset:1}}
@keyframes fc-in{from{opacity:0;transform:translateY(6px)}}

@media print{
  .fc-ok *{animation:none!important;transform:none!important;opacity:1!important}
}