/* ==========================================================================
   05-FORMULARIO.CSS · Cierre con foto + formulario de datos + pie de página
   --------------------------------------------------------------------------
   El formulario envía a Google Sheets (js/07-formulario.js).
   ========================================================================== */

.cierre{position:relative;isolation:isolate;padding-block:clamp(80px,11vw,150px) clamp(140px,14vw,170px)}
.cierre-fondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.cierre::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,30,21,.94) 0%,rgba(11,30,21,.84) 55%,rgba(11,30,21,.7) 100%);
}
.cierre-grid{display:grid;gap:36px;align-items:start}
.cierre-texto{display:grid;gap:20px}
.cierre-texto .bajada{color:rgba(241,244,236,.86)}
.ventajas{display:grid;gap:10px;margin-top:4px}
.ventajas li{display:flex;gap:12px;align-items:center}
.ventajas svg{width:22px;height:22px;flex:none;stroke:var(--lima);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* La caja blanca del formulario */
.formulario-caja{
  background:var(--papel);color:var(--sobre-papel);color-scheme:light;border-radius:var(--radio);
  padding:clamp(22px,3.4vw,36px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.formulario-caja h3{font-family:var(--f-titulo);font-weight:400;font-size:1.7rem;letter-spacing:-.02em;margin-bottom:18px}
.campo{display:grid;gap:7px;margin-bottom:16px}
.campo label{font-weight:600;font-size:.95rem}
.campo input,.campo select{
  min-height:52px;padding:0 14px;border-radius:12px;border:1px solid var(--linea-p);
  background:#f8faf4;color:var(--sobre-papel);width:100%;
}
.campo input::placeholder{color:#7b8b80}
.campo input[aria-invalid="true"]{border-color:var(--error);background:#fdf3ef}
.campo-error{color:var(--error);font-size:.88rem}
.autoriza{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--suave-papel);margin:4px 0 18px}
.autoriza input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--verde)}
.autoriza a{color:var(--verde);font-weight:600}
.formulario-caja .boton{width:100%;min-height:56px;font-size:1.05rem}
.alterno{display:block;margin-top:16px;text-align:center;font-weight:600;color:var(--verde)}
.mensaje{margin-top:14px;text-align:center;font-size:.92rem;min-height:1.2em}
.mensaje--ok{color:var(--verde);font-weight:600}
.mensaje--error{color:var(--error)}
.gracias{display:grid;gap:14px}
.gracias p{color:var(--suave-papel)}
.gracias .boton{margin-top:6px}

/* ---------- Pie de página ---------- */
.pie{
  background:var(--ink);border-top:1px solid var(--linea-o);
  padding-block:48px calc(120px + env(safe-area-inset-bottom,0px));
}
.pie-grid{display:grid;gap:18px;color:var(--suave-oscuro);font-size:.95rem}
.pie-grid .marca{color:var(--sobre-oscuro)}
.pie-grid a{color:var(--sobre-oscuro)}

@media (min-width:880px){
  .cierre-grid{grid-template-columns:1.05fr 1fr;gap:72px}
}