/* Formulario de cotización del hero (páginas de SEO). Componente único: /assets/js/hero-quote.js */
.hq{position:relative;z-index:3;width:100%;max-width:440px;box-sizing:border-box;margin:0;padding:26px 24px 20px;background:#fff;border:1px solid #d7e8dd;border-radius:20px;box-shadow:0 18px 50px rgba(8,18,12,.16)}
.hq *{box-sizing:border-box}
.hq__t{margin:0;text-align:center;color:var(--green,#0a7a2e);font-size:30px;line-height:1.08;font-weight:800;letter-spacing:-.025em}
.hq__s{margin:8px 0 18px;text-align:center;color:#4b5a52;font-size:15px;line-height:1.4}
.hq__f{display:block;position:relative;margin:0 0 10px}
.hq__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hq__f input{display:block;width:100%;min-height:50px;padding:0 16px;border:1.5px solid #c3d0c8;border-radius:12px;background:#fff;color:#0f1a14;font-family:inherit;font-weight:500;font-size:16px;line-height:1.2;outline:0;transition:border-color .15s,box-shadow .15s}
.hq__f input::placeholder{color:#64748b}
.hq__f input:focus{border-color:var(--green,#0a7a2e);box-shadow:0 0 0 3px rgba(10,122,46,.18)}
.hq__f input[aria-invalid=true]{border-color:#b91c1c}
.hq__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.hq__b{display:block;width:100%;min-height:52px;margin-top:4px;border:0;border-radius:12px;background:var(--green,#0a7a2e);color:#fff;font-family:inherit;font-weight:800;font-size:16px;line-height:1;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:filter .15s,transform .15s}
.hq__b:hover{filter:brightness(1.08)}
.hq__b:active{transform:translateY(1px)}
.hq__b[disabled],.hq__call[disabled]{opacity:.65;cursor:progress}
.hq__call{display:block;width:100%;margin:10px 0 0;padding:6px;border:0;background:none;color:#33423a;font-family:inherit;font-weight:600;font-size:14px;line-height:1.2;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hq__m{min-height:18px;margin:8px 0 0;text-align:center;color:#b91c1c;font-size:13px;line-height:1.35}
.hq__chips{display:flex;justify-content:space-between;gap:8px;margin:12px 0 0;padding:14px 0 0;list-style:none;border-top:1px solid #e3ede7}
.hq__chips li{flex:1;text-align:center;color:#4b5a52;font-size:12px;line-height:1.25}
.hq__chips b{display:block;color:#0f1a14;font-size:15px;font-weight:800}
.hq__done{padding:18px 4px 8px;text-align:center}
.hq__done h3{margin:0 0 8px;color:var(--green,#0a7a2e);font-size:26px;line-height:1.1;font-weight:800}
.hq__done p{margin:0 0 16px;color:#33423a;font-size:15px;line-height:1.45}
.hq__done a{display:block;padding:15px 16px;border-radius:12px;background:var(--green,#0a7a2e);color:#fff;font-weight:800;text-decoration:none}
@media (max-width:640px){
  .hq{max-width:none;padding:22px 18px 16px;border-radius:18px}
  .hq__t{font-size:26px}
  .hq__f input{font-size:16px}
}

/* Posición en el hero. Plantilla 'ciudad': el formulario va dentro de .hero-media, encima de la foto. */
.hero-media>.hq{margin:0 auto 18px}
/* Plantilla 'costo' (/cuanto-cuesta-cancha-futbol-7/): el formulario va sobre la foto del hero (columna derecha); en móvil, justo debajo del texto. */
@media (min-width:981px){
  .hero2 .hq-grid>.hq{grid-area:media;justify-self:center;align-self:end;margin:0 24px 24px}
  .hero2 .hq-grid>.hero-media{min-height:680px}
}
@media (max-width:980px){
  .hero2 .hero-grid.hq-grid{display:flex;flex-direction:column}
  .hero2 .hq-grid>.hero-copy{order:1}
  .hero2 .hq-grid>.hq{order:2;max-width:none;margin:24px 0 0}
  .hero2 .hq-grid>.hero-media{order:3}
  .hero2 .hq-grid>.hero-card{order:4}
  .hero2 .hq-grid>.hero-note{order:5}
}

/* Variante con etiquetas visibles y selector de tipo de cancha (cuánto cuesta) */
.hq__l{display:none}
.hq--labels .hq__l{display:block;margin:0 0 5px;color:#0f1a14;font-size:14px;font-weight:700;line-height:1.2}
.hq__type{margin:0 0 12px;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hq__type legend{grid-column:1/-1;padding:0}
.hq__type label{display:block;position:relative;margin:0}
.hq__type input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.hq__type span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;border:1.5px solid #c3d0c8;border-radius:12px;background:#fff;color:#0f1a14;font-size:15px;font-weight:700}
.hq__type input:checked+span{border-color:var(--green,#0a7a2e);background:#effaf2;color:var(--green,#0a7a2e)}
.hq__type input:focus-visible+span{box-shadow:0 0 0 3px rgba(10,122,46,.25)}
.hq__priv{margin:6px 0 0;text-align:center;color:#5f6b65;font-size:13px}
.hq--mini{max-width:none;margin:20px 0 0;padding:18px 0 0;border:0;border-top:1px solid #e3ede7;border-radius:0;box-shadow:none;background:none}
.hq--mini .hq__s{margin:0 0 14px;text-align:left}