/* Componentes de contacto: resources/views/components/contacto/* */

/* estado-en-linea */
@keyframes en-linea-pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.en-linea{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);font-size:14px;font-weight:500;color:#8EF0B5}
.en-linea__punto{width:8px;height:8px;border-radius:50%;background:#25D366;animation:en-linea-pulso 2.2s ease-out infinite}

/* tarjeta-formulario */
@keyframes tarjeta-form-flecha{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.tarjeta-form{width:100%;max-width:560px;box-sizing:border-box;display:flex;align-items:center;gap:18px;padding:18px 18px 18px 22px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid #23417A;color:#F5F7FB;transition:background .25s ease,border-color .25s ease}
.tarjeta-form:hover{background:rgba(255,255,255,.08);border-color:#6CCBFA;color:#F5F7FB}
.tarjeta-form__icono{flex:0 0 48px;height:48px;border-radius:14px;background:rgba(108,203,250,.14);display:flex;align-items:center;justify-content:center}
.tarjeta-form__texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tarjeta-form__titulo{font-size:18px;font-weight:600;letter-spacing:-.02em;color:#FFFFFF}
.tarjeta-form__bajada{font-size:15px;line-height:1.45;color:#A9B8D4}
.tarjeta-form__flecha{flex:0 0 52px;height:52px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:tarjeta-form-flecha 1.8s ease-in-out infinite}

/* tarjeta-qr */
@keyframes tarjeta-qr-scan{0%{top:10%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:88%;opacity:0}}
.tarjeta-qr{position:relative;width:100%;max-width:380px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:20px;padding:34px 32px 30px;border-radius:32px;background:#FFFFFF;color:#0B1730;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.45),0 0 0 8px rgba(37,211,102,.12);transition:transform .3s ease}
.tarjeta-qr--inclinada{transform:rotate(-1.5deg)}
.tarjeta-qr:hover{color:#0B1730;transform:rotate(0) translateY(-3px)}
.tarjeta-qr__etiqueta{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#E3F7EA;color:#128C46;font-size:13px;font-weight:600}
.tarjeta-qr__etiqueta-icono{width:18px;height:18px;border-radius:50%;background:#25D366;display:inline-flex;align-items:center;justify-content:center}
.tarjeta-qr__marco{position:relative;display:flex;padding:14px}
.tarjeta-qr__codigo{display:flex;width:220px;height:220px}
.tarjeta-qr__codigo svg{width:100%;height:100%;display:block}
.tarjeta-qr__scan{position:absolute;left:8%;right:8%;top:10%;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(37,211,102,0),#25D366,rgba(37,211,102,0));box-shadow:0 0 14px rgba(37,211,102,.8);animation:tarjeta-qr-scan 2.8s ease-in-out infinite;pointer-events:none}
.tarjeta-qr__esq{position:absolute;width:26px;height:26px;border:3px solid #25D366}
.tarjeta-qr__esq.tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.tarjeta-qr__esq.tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.tarjeta-qr__esq.bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 10px}
.tarjeta-qr__esq.br{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
.tarjeta-qr__texto{display:flex;flex-direction:column;gap:6px}
.tarjeta-qr__titulo{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#07316D}
.tarjeta-qr__bajada{font-size:15px;line-height:1.5;color:#5F6A7D}
.tarjeta-qr__boton{align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:#25D366;color:#FFFFFF;font-size:16px;font-weight:600}
.tarjeta-qr__numero{font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:#5F6A7D}

/* pasos */
.pasos{margin:0;padding:8px 0 0;list-style:none;display:flex;flex-direction:column;gap:22px}
.pasos__item{display:flex;gap:16px}
.pasos__num{flex:0 0 40px;height:40px;border-radius:12px;background:#EEF4FB;display:flex;align-items:center;justify-content:center;font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;color:#0266BE}
.pasos__texto{display:flex;flex-direction:column;gap:4px}
.pasos__titulo{font-size:18px;font-weight:600;letter-spacing:-.02em;color:#07316D}
.pasos__bajada{font-size:15px;line-height:1.5;color:#4E5869}

/* formulario + campo */
.form-contacto{flex:1.4 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px;padding:36px;border-radius:28px;background:#F2F6FB;border:1px solid #E3E9F2}
.form-contacto__grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.form-contacto__opciones{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px}
.form-contacto__opciones legend{padding:0 0 10px;font-size:14px;font-weight:500;color:#33405A}
.form-contacto__opciones>div{display:flex;flex-wrap:wrap;gap:8px}
.form-contacto__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}
.form-contacto__privacidad{font-size:13px;line-height:1.45;color:#5F6A7D;max-width:320px}
.form-contacto__boton{min-height:52px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(135deg,#0558B0,#0277D0);color:#FFFFFF;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer;box-shadow:0 10px 30px rgba(2,102,190,.25)}
.form-contacto__boton:hover{filter:brightness(1.08)}
.campo{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:#33405A}
.campo__opcional{font-weight:400;color:#8A96A8}
.campo__error{font-size:13px;font-weight:400;color:#B42318}
.inp{width:100%;box-sizing:border-box;min-height:50px;padding:12px 16px;border-radius:14px;border:1px solid #D6E2F2;background:#FFFFFF;font-family:inherit;font-size:16px;color:#0B1730;outline:none}
.inp:focus{border-color:#0266BE;box-shadow:0 0 0 4px rgba(2,102,190,.12)}
.inp.is-invalid{border-color:#D14343}
.inp--area{resize:vertical;min-height:120px}
.pick{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid #D6E2F2;background:#FFFFFF;font-size:14px;font-weight:500;color:#33405A;cursor:pointer}
.pick input{accent-color:#0266BE;margin:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.aviso{padding:14px 18px;border-radius:14px;font-size:15px;line-height:1.5}
.aviso--ok{background:#E3F4EA;color:#1E6E40;border:1px solid #BFE5CE}
.aviso--error{background:#FDECEC;color:#8A1C1C;border:1px solid #F5C7C7}

/* seccion-formulario */
.seccion-form{background:#FFFFFF}
.seccion-form__in{max-width:1200px;margin:0 auto;padding:104px 24px;display:flex;flex-wrap:wrap;gap:64px}
.seccion-form__lado{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:28px}

@media (max-width:600px){
  .tarjeta-form{gap:14px;padding:16px}
  .tarjeta-form__icono{display:none}
  .tarjeta-qr--inclinada{transform:none}
  .tarjeta-qr{padding:26px 22px 24px}
  .tarjeta-qr__codigo{width:180px;height:180px}
  .form-contacto{padding:22px;border-radius:22px}
  .seccion-form__in{padding:64px 20px;gap:40px}
}
@media (prefers-reduced-motion:reduce){.en-linea__punto,.tarjeta-form__flecha,.tarjeta-qr__scan{animation:none}.tarjeta-qr__scan{opacity:0}}