/* Hyrapp · web comercial en Laravel (home, landings y páginas).
   Cada página usa las hojas de Lanzamiento-Hyrapp tal cual (public/css/web, que
   genera herramientas/portar_web.py). Aquí solo va lo que allí no hay: el
   diálogo de la demo (nada sale de .demo-dialog) y el botón de WhatsApp.
   Colores y tipografías, los de la V7 (variables de base-v2.css). */

.demo-dialog{width:640px}
.demo-dialog h2{margin-bottom:10px;padding-right:34px}
.demo-dialog .demo-dialog__intro{font-size:15px}
.demo-dialog .demo-dialog__quote{margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--soft);color:var(--ink);font-size:13px;font-weight:600;line-height:1.45}
.demo-dialog .demo-dialog__done{margin-top:20px;padding:16px 18px;border-radius:14px;background:var(--lime);color:var(--ink);font-size:15px;font-weight:600;line-height:1.5}
.demo-dialog .demo-dialog__done:focus{outline:none}

.demo-form{margin-top:22px;display:grid;gap:18px}
.demo-form__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.demo-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.demo-form__field{display:grid;gap:6px;align-content:start;min-width:0}
.demo-form label{font-size:13px;font-weight:700;line-height:1.35;color:var(--ink)}
.demo-form label span[aria-hidden]{color:#5840c9}
.demo-form input[type=text],.demo-form input[type=email],.demo-form input[type=tel],.demo-form input[type=number],.demo-form select,.demo-form textarea{width:100%;min-height:46px;border:1px solid #bfc0ca;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:15px;line-height:1.4;padding:11px 13px}
.demo-form select{padding-right:34px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.demo-form textarea{min-height:92px;resize:vertical}
.demo-form input:focus-visible,.demo-form select:focus-visible,.demo-form textarea:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-color:var(--violet)}
.demo-form .is-invalid input,.demo-form .is-invalid select,.demo-form .is-invalid textarea{border-color:#b3261e}
.demo-dialog .demo-form__error{font-size:12px;line-height:1.4;font-weight:600;color:#b3261e}
.demo-dialog .demo-form__error:empty{display:none}

.demo-form__ai{display:flex;flex-wrap:wrap;gap:10px 26px;border:0;margin:0;padding:0;min-width:0}
.demo-form__ai legend{width:100%;padding:0;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--ink)}
.demo-form .demo-form__check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.45;cursor:pointer}
.demo-form__check input{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;accent-color:var(--violet);cursor:pointer}
.demo-form__check input:focus-visible{outline-offset:3px}
.demo-form__check a{color:#533bcc;font-weight:700}

.demo-dialog .demo-form__alert{padding:10px 14px;border-radius:12px;background:#fdecee;color:#8c1d27;font-size:13px;font-weight:600;line-height:1.45}
.demo-form__submit{justify-self:start}
.demo-form__submit[aria-busy=true]{opacity:.6;pointer-events:none}

.demo-form__privacy{border-top:1px solid var(--line);padding-top:14px}
.demo-dialog .demo-form__privacy>p{margin-bottom:6px;font-size:12px;font-weight:700;color:var(--ink)}
.demo-form__privacy dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.demo-form__privacy dt{font-weight:700;color:var(--ink)}
.demo-form__privacy dd{margin:0}
.demo-form__privacy a{color:#533bcc}

/* Formulario en dos pasos (10 de octubre de 2026): pasos, preguntas con
   respuestas en píldora y acciones. */
.demo-steps{list-style:none;display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:0;font-size:13px;font-weight:600;line-height:1.3;color:var(--muted)}
.demo-steps li{display:flex;align-items:center;gap:8px}
.demo-steps li+li::before{content:"";width:22px;height:2px;background:var(--line)}
.demo-steps b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--soft);color:#533bcc;font-weight:700}
.demo-steps .is-on b{background:var(--violet);color:#fff}
.demo-steps .is-done b{background:var(--ink);color:var(--lime)}
.demo-form[hidden]{display:none}
.demo-dialog .demo-form__note{font-size:12px;line-height:1.4;color:var(--muted);font-weight:400}
.demo-form__optional{font-weight:400;color:var(--muted)}
.demo-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.demo-form__link{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:700;color:#533bcc;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.demo-form__link[aria-busy=true]{opacity:.6;pointer-events:none}
.demo-form__question{border:0;margin:0;padding:0;min-width:0}
.demo-form__question legend{padding:0;font-size:14px;font-weight:700;color:var(--ink)}
.demo-form__options{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.demo-form .demo-form__options label{position:relative;cursor:pointer;font-weight:400}
.demo-form__options span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid #bfc0ca;border-radius:999px;background:#fff;font-size:14px;font-weight:500;line-height:1.2;color:var(--ink)}
.demo-form__options input{position:absolute;inset:0;opacity:0;cursor:pointer}
.demo-form__options input:checked+span{border-color:var(--violet);background:var(--soft);color:#3b24b8;font-weight:700}
.demo-form__options input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.demo-form__grid[hidden]{display:none}

/* Botón fijo de WhatsApp (solo si en /interno está encendido y el número, conectado). */
.wa-fab{position:fixed;right:24px;bottom:calc(24px + var(--wa-fab-lift,0px));transition:bottom .18s ease;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:#25d366;color:#06301a;font:700 15px/1 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:0 12px 30px rgba(32,36,43,.22)}
.wa-fab:hover{background:#1fc45c}
/* Al final de la página el botón no puede quedar encima de la última fila del pie (idioma y dominio), que ya no
   se puede subir: con botón, el pie deja ese hueco debajo. */
[data-wa] .site-footer::after{content:"";display:block;height:60px}
/* Con el menú del móvil abierto el botón se aparta: quedaba encima de la esquina del panel, sobre «Solicita una demo». */
body:has(.web-nav.open) .wa-fab{opacity:0;pointer-events:none}
.wa-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wa-fab svg{width:26px;height:26px;flex:none}

/* En el móvil y en cualquier pantalla táctil, 16 px en los campos: con menos, Safari de iPhone amplía la página
   al tocar un campo y hay que alejarla a mano. */
@media(max-width:820px),(pointer:coarse){
 .demo-form input[type=text],.demo-form input[type=email],.demo-form input[type=tel],.demo-form input[type=number],.demo-form select,.demo-form textarea{font-size:16px}
 /* Y 44 px de alto en lo que se toca y no es un botón entero: «Prefiero que me escribáis vosotros» y el enlace a la
    política de la capa de privacidad, sin moverlos. */
 .demo-form__link{min-height:44px}
 .demo-form__privacy a{padding-block:14px}
}
@media(max-width:560px){
 .demo-form__grid{grid-template-columns:1fr}
 .demo-form__privacy dl{grid-template-columns:1fr;gap:0}
 .demo-form__privacy dd{margin-bottom:5px}
 .demo-form__submit{justify-self:stretch}
 .demo-form__actions .btn{flex:1 1 100%;justify-content:center}
 .demo-steps span{display:none}
 .demo-steps .is-on span{display:inline}
}
/* Hasta 1150 px (móvil y tableta, donde el contenido llega a los bordes y el configurador va en una columna) el
   botón va sin texto: con él tapaba 250 px de lo que hubiera debajo (QA del 13 de octubre de 2026; antes, hasta 720). */
@media(max-width:1150px){
 .wa-fab{right:16px;bottom:calc(16px + var(--wa-fab-lift,0px));padding:14px}
 .wa-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}