/* ClickaCierre — celular «formulario» del hero (#hxf, «el formulario que no se termina»), biblioteca de la plantilla #7,
   pilar Diseño UX/UI y conversión. Lo carga la página con p.estilos, después de landing.css. Usa las clases del celular
   del hero (.hx, .dx-*, .hx-tag, .hx-miss) y solo agrega lo propio, con el prefijo .hf-. Lo que se mueve es solo
   transform y opacity (translate, scale).
   La pantalla tiene cuatro capas apiladas: la web del negocio, el formulario, el teclado (dibujado con teclas sin letras)
   y la hoja de la cuenta; encima, las tres marcas y el aro del toque.
   Sin movimiento y sin JS queda un solo fotograma: el formulario lleno, el teclado abajo y la hoja de la cuenta encima,
   con las tres marcas; debajo, la línea final y el enlace. La web es un dibujo (aria-hidden) que queda cubierto; el
   formulario y la hoja son texto real y el sr-only de la figura cuenta la historia. Nada se esconde sin JS. */

/* ---------- la pantalla: debajo de la barra de estado, de borde a borde del celular */
.hx-formulario .hf-screen{position:absolute;left:0;right:0;top:36px;bottom:34px;z-index:3;overflow:hidden;background:#fff;color:#202124;font-family:Arial,sans-serif;transition:opacity .35s}
.hx-formulario .hf-screen.is-fade{opacity:0}
.hx-formulario.is-reset .hf-screen *,.hx-formulario.is-reset .hf-screen *:before,.hx-formulario.is-reset .hf-screen *:after{transition:none !important;animation:none !important}

/* ---------- las capas, apiladas: web, formulario, teclado, hoja de la cuenta, marcas, aro */
.hf-layer{position:absolute;inset:0;overflow:hidden;background:#fff}
.hf-web{z-index:1;display:flex;flex-direction:column}
.hf-form{z-index:2;display:flex;flex-direction:column;padding:13px 14px 12px}
.hf-keys{position:absolute;left:0;right:0;bottom:0;z-index:3;height:36%;display:flex;flex-direction:column;justify-content:space-evenly;padding:6px 6px;background:#d2d5db;border-top:1px solid #bcc0c7}
.hf-wall{position:absolute;inset:0;z-index:4;pointer-events:none}
.hf-wall:before{content:'';position:absolute;inset:0;background:rgba(11,18,32,.4)}
.hf-tags{position:absolute;inset:0;z-index:5;pointer-events:none}
.hf-fx{position:absolute;inset:0;z-index:6;pointer-events:none}

/* ---------- 1. tu web: una página dentro del navegador del celular (un dibujo) */
.hf-bar{display:flex;align-items:center;flex:none;gap:8px;height:34px;margin:8px 12px 6px;padding:0 14px;border-radius:999px;background:#f1f3f4;font:13px/1 Arial,sans-serif;color:#202124}
.hf-bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hf-lock{position:relative;flex:none;width:9px;height:7px;margin-top:4px;border-radius:2px;background:#5f6368}
.hf-lock:before{content:'';position:absolute;left:1.5px;bottom:5px;width:6px;height:6px;border:1.6px solid #5f6368;border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.hf-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:6px 12px 0;overflow:hidden;border-top:1px solid #ebebeb}
.hf-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:6px 4px 9px;border-bottom:1px solid #ebebeb;font:700 15px/1.2 Arial,sans-serif;color:#202124}
.hf-nav b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hf-burger{position:relative;flex:none;width:18px;height:2px;border-radius:2px;background:#5f6368;box-shadow:0 -6px 0 #5f6368,0 6px 0 #5f6368}
.hf-ban{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;min-height:118px;padding:16px 16px 18px;border-radius:12px;background:linear-gradient(160deg,#9aa4b5,#5d6b82 60%,#3f4a5c);color:#fff}
.hf-ban b{font:700 23px/1.12 Arial,sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.hf-bl{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.4)}
.hf-bl:nth-of-type(1){width:78%}
.hf-bl:nth-of-type(2){width:52%}
.hf-go{position:relative}
/* el botón de la web y los del formulario: el mismo, en lima con letra de tinta */
.hf-btn{display:grid;place-items:center;min-height:42px;padding:0 16px;border-radius:999px;background:#b8f34a;color:#0b1220;font:700 15px/1 Arial,sans-serif;box-shadow:0 8px 16px -9px rgba(11,18,32,.55);transition:scale .2s}
.hf-btn.is-press{scale:.95}
.hf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hf-tiles span{min-width:0}
.hf-tiles i{display:block;height:56px;margin-bottom:7px;border-radius:10px;background:#eef0f2}
.hf-tiles span:nth-child(2) i{background:#e6ebe4}
.hf-tiles b{display:block;font:700 11.5px/1.25 Arial,sans-serif;color:#3c4043;overflow-wrap:anywhere}
.hf-lines{display:flex;flex-direction:column;gap:8px}
.hf-lines i{display:block;height:9px;border-radius:5px;background:#e8eaed}
.hf-lines i:nth-child(2){width:64%}

/* ---------- 2. el formulario: nueve campos con su etiqueta, un contador y el botón de enviar */
.hf-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px;font:700 16px/1.2 Arial,sans-serif;color:#202124}
.hf-head b{min-width:0;font-weight:700}
.hf-count{flex:none;font:700 12px/1 Arial,sans-serif;color:#5f6368;white-space:nowrap}
.hf-dots{flex:none;display:flex;justify-content:space-between;gap:4px;margin-bottom:8px}
.hf-dots i{position:relative;flex:1;max-width:30px;height:5px;border-radius:3px;background:#e1e4e8}
.hf-dots i:before{content:'';position:absolute;inset:0;border-radius:inherit;background:#0b1220;transform-origin:0 50%}
.hf-fields{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px 0 0;border-radius:10px}
.hf-field{margin:0}
.hf-lb{display:block;margin-bottom:2px;font:700 10.5px/1.2 Arial,sans-serif;color:#3c4043;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-in{position:relative;display:block;height:19px;overflow:hidden;border:1px solid #dadde1;border-radius:6px;background:#f6f7f9}
/* lo que se «escribió»: una barra gris, sin letras; se llena de izquierda a derecha */
.hf-in i{position:absolute;left:6px;top:50%;width:55%;height:6px;margin-top:-3px;border-radius:3px;background:#9aa0a6;transform-origin:0 50%}
.hf-fields .hf-field:nth-child(1) .hf-in i{width:44%}
.hf-fields .hf-field:nth-child(2) .hf-in i{width:58%}
.hf-fields .hf-field:nth-child(3) .hf-in i{width:34%}
.hf-fields .hf-field:nth-child(4) .hf-in i{width:70%}
.hf-fields .hf-field:nth-child(5) .hf-in i{width:48%}
.hf-fields .hf-field:nth-child(6) .hf-in i{width:62%}
.hf-fields .hf-field:nth-child(7) .hf-in i{width:38%}
.hf-fields .hf-field:nth-child(8) .hf-in i{width:54%}
.hf-fields .hf-field:nth-child(9) .hf-in i{width:80%}
.hf-send{flex:none;margin-top:9px;min-height:38px}

/* ---------- 3. el teclado: teclas dibujadas, sin letras (no es el de ningún sistema operativo) */
.hf-kr{display:flex;justify-content:center;gap:5px}
.hf-kr i{flex:1;max-width:30px;height:26px;border-radius:7px;background:#fff;box-shadow:0 1.5px 0 #9ca1a9}
.hf-kr i.w{flex:1.5;max-width:44px;background:#b9bec6}
.hf-kr i.w2{flex:2;max-width:64px;background:#b9bec6}
.hf-kr i.sp{flex:6;max-width:none}

/* ---------- 4. la hoja de la cuenta: pide un correo y una contraseña antes de enviar */
.hf-sheet{position:absolute;left:14px;right:14px;bottom:40%;pointer-events:auto;display:flex;flex-direction:column;gap:9px;padding:15px 14px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(11,18,32,.08),0 20px 38px -12px rgba(11,18,32,.6)}
.hf-st{display:flex;align-items:flex-start;gap:10px;margin:0 0 2px}
.hf-st b{flex:1;min-width:0;font:700 14px/1.25 Arial,sans-serif;color:#202124}
.hf-x{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:#eceff1}
.hf-x:before,.hf-x:after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;border-radius:2px;background:#5f6368;rotate:45deg}
.hf-x:after{rotate:-45deg}
.hf-sheet .hf-btn{margin-top:3px;min-height:38px}

/* ---------- las tres marcas. La 1 y la 2 viven en su propia capa (sobre el borde de los campos y sobre el borde del
   teclado); la 3, dentro de la hoja. La 2 va a la derecha, para que no se amontonen */
.hf-part{position:absolute;left:0;right:0;height:0}
.hf-part[data-part="1"]{top:57px}
.hf-part[data-part="2"]{bottom:36%}
.hx-formulario .hx-tag{left:8px;top:0;cursor:default}
.hx-formulario .hf-part[data-part="2"] .hx-tag{left:auto;right:8px}
.hx-formulario .hf-sheet>.hx-tag{left:8px}
.hx-formulario .hx-tag{pointer-events:auto}

/* el cursor (o el toque) sobre una marca o la cosa que señala: se recuadra en lima y la marca se levanta, aunque aún no haya llegado */
.hx-formulario [data-part]{transition:box-shadow .25s,background .25s}
.hx-formulario[data-hot="1"] .hf-fields,.hx-formulario .hf-fields:hover{box-shadow:0 0 0 2.5px #b8f34a,0 0 0 6px rgba(184,243,74,.38);background:rgba(184,243,74,.14)}
.hx-formulario[data-hot="2"] .hf-keys,.hx-formulario .hf-keys:hover{box-shadow:inset 0 0 0 3px #b8f34a,inset 0 0 0 7px rgba(184,243,74,.4)}
.hx-formulario[data-hot="3"] .hf-sheet,.hx-formulario .hf-sheet:hover{box-shadow:0 0 0 2.5px #b8f34a,0 0 0 6px rgba(184,243,74,.5),0 20px 38px -12px rgba(11,18,32,.6)}
.hx-formulario[data-hot="1"] .hf-part[data-part="1"]>.hx-tag,.hx-formulario[data-hot="2"] .hf-part[data-part="2"]>.hx-tag,.hx-formulario[data-hot="3"] .hf-sheet>.hx-tag,
.hx-formulario .hf-part:hover>.hx-tag,.hx-formulario .hf-sheet:hover>.hx-tag{scale:1.06;box-shadow:0 0 0 2px #fff,0 0 0 4.5px #0b1220,0 10px 20px -8px rgba(11,18,32,.55)}

/* ---------- el aro del toque: un círculo que se asienta y se va (el JS lo coloca sobre el botón o la ✕) */
.hf-tap{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(32,33,36,.26);box-shadow:0 0 0 2px rgba(255,255,255,.85);opacity:0;scale:.3}
.hf-tap.is-on{animation:hf-press .95s ease-out both}
@keyframes hf-press{0%{opacity:0;scale:.3}22%{opacity:1;scale:1}66%{opacity:1;scale:.92}100%{opacity:0;scale:1.5}}

/* ---------- con movimiento (la clase .is-armed la pone telefono-formulario.js): cada capa espera su turno */
.js-motion .hx-formulario.is-armed .hf-form{translate:0 102%;box-shadow:0 -18px 30px -18px rgba(11,18,32,.35);transition:translate .6s var(--m-ease)}
.js-motion .hx-formulario.is-armed.is-form .hf-form{translate:0 0}
.js-motion .hx-formulario.is-armed .hf-keys{translate:0 102%;transition:translate .55s var(--m-ease),box-shadow .25s}
.js-motion .hx-formulario.is-armed.is-keys .hf-keys{translate:0 0}
.js-motion .hx-formulario.is-armed .hf-wall:before{opacity:0;transition:opacity .4s}
.js-motion .hx-formulario.is-armed.is-wall .hf-wall:before{opacity:1}
.js-motion .hx-formulario.is-armed .hf-sheet{translate:0 240%;opacity:0;transition:translate .6s var(--m-ease),opacity .25s,box-shadow .25s}
.js-motion .hx-formulario.is-armed.is-wall .hf-sheet{translate:0 0;opacity:1}
/* los campos se llenan uno tras otro, y con ellos el contador y sus puntos */
.js-motion .hx-formulario.is-armed .hf-field:not(.is-on) .hf-in i{scale:0 1}
.js-motion .hx-formulario.is-armed .hf-in i{transition:scale .32s var(--m-ease)}
.js-motion .hx-formulario.is-armed .hf-dots i:not(.is-on):before{scale:0 1}
.js-motion .hx-formulario.is-armed .hf-dots i:before{transition:scale .32s var(--m-ease)}
/* las marcas: cada una llega en su momento y se queda mientras su cosa sigue a la vista */
.js-motion .hx-formulario.is-armed .hx-tag{opacity:0;scale:.4;transform-origin:14px 50%;pointer-events:none;transition:opacity .2s,scale .55s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.js-motion .hx-formulario.is-armed .hf-part[data-part="2"] .hx-tag{transform-origin:calc(100% - 14px) 50%}
.js-motion .hx-formulario.is-armed .is-tagged>.hx-tag{opacity:1;scale:1;pointer-events:auto}
.js-motion .hx-formulario.is-armed[data-hot="1"] .hf-part[data-part="1"]>.hx-tag,.js-motion .hx-formulario.is-armed[data-hot="2"] .hf-part[data-part="2"]>.hx-tag,.js-motion .hx-formulario.is-armed[data-hot="3"] .hf-sheet>.hx-tag,
.js-motion .hx-formulario.is-armed .hf-part:hover>.hx-tag,.js-motion .hx-formulario.is-armed .hf-sheet:hover>.hx-tag{opacity:1;scale:1.06;pointer-events:auto}

@media (max-width:380px){
  .hf-btn{font-size:14px}
  .hf-ban b{font-size:21px}
  .hf-tiles b{font-size:10.5px}
  .hf-st b{font-size:13px}
  .hf-head{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.hf-tap{animation:none}}