/* =====================================================================
   Piel de los formularios de HubSpot — versión APILADA (campos en filas).

   La usan la home (#hsDemo) y Partners (#hsPartner) a través de la clase
   `hs-skin`. El del blog NO: es de un solo campo en línea y tiene su propio
   CSS en la página.

   Vive acá y no dentro de cada página porque las dos necesitan exactamente lo
   mismo: al tercer formulario, duplicar ~50 líneas garantizaba que el próximo
   ajuste llegara a una sola. Ya pasó una vez — la regla del reseteo de lista
   apuntaba a `ul.no-list`, que no es la clase que HubSpot usa.

   CÓMO SE USA
     1. <div id="loQueSea" class="hs-skin"> como `target` del embed.
     2. `extraCss={["hs-form.css"]}` en el <Base> de la página.
     3. `css: ''` en hbspt.forms.create — imprescindible: además de no cargar la
        hoja de HubSpot, hace que el formulario se renderice EN LÍNEA. Sin eso
        viene dentro de un iframe y nada de esto lo alcanza.

   Los valores salen de los formularios escritos a mano que estas páginas tenían
   antes, para que el reemplazo no se note.
   ===================================================================== */

.hs-skin .hs-form { display:flex; flex-direction:column; gap:16px; }

/* HubSpot envuelve cada fila en un <fieldset> —que trae margen y borde del
   navegador— y le pone `form-columns-N` con la cantidad de campos de esa fila.
   Hay que RESPETAR esa clase: si se fuerza una sola columna, los campos se
   apilan pero conservan su ancho porcentual y quedan a media caja. */
.hs-skin fieldset { max-width:none !important; margin:0; padding:0; border:0; }
.hs-skin fieldset.form-columns-1 { display:block; }
.hs-skin fieldset.form-columns-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hs-skin fieldset.form-columns-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
/* Los campos ocupan su celda entera: el reparto ya lo hace la grilla. */
.hs-skin .hs-form-field { display:block; width:100% !important; float:none !important; }
.hs-skin .input { margin:0 !important; }
/* En pantallas angostas, dos columnas dejan campos de ~140px: se apilan. */
@media (max-width:600px) {
  .hs-skin fieldset.form-columns-2,
  .hs-skin fieldset.form-columns-3 { grid-template-columns:1fr; }
}

.hs-skin label { display:block; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#64748B; margin-bottom:7px; }
/* El asterisco de obligatorio ya viene dentro del texto del label */
.hs-skin .hs-form-required { color:#94A3B8; margin-left:2px; }

.hs-skin .hs-input { width:100%; height:46px; padding:0 13px; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:9px; font-family:var(--font-sans); font-size:14px; font-weight:300; color:#1E293B; outline:none; transition:border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.hs-skin .hs-input:focus { border-color:#084AF3; box-shadow:0 0 0 3px rgba(8,74,243,0.15); }
.hs-skin .hs-input::placeholder { color:#94A3B8; }
.hs-skin select.hs-input { cursor:pointer; padding-right:34px; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; }
/* El textarea es el único campo que no mide 46px */
.hs-skin textarea.hs-input { height:auto; min-height:96px; padding:12px 13px; line-height:1.55; resize:vertical; }

/* Teléfono internacional: HubSpot lo arma como selector de país + número. Por
   defecto se apilan; en fila se lee como un solo campo. */
.hs-skin .hs-fieldtype-intl-phone.hs-input { display:flex; gap:10px; width:100%; height:auto; padding:0; background:none; border:0; box-shadow:none; }
.hs-skin .hs-fieldtype-intl-phone.hs-input select { flex:0 0 112px; width:112px; }
.hs-skin .hs-fieldtype-intl-phone.hs-input input { flex:1; min-width:0; }

/* Consentimiento: casilla + texto legal.
   OJO con la lista: HubSpot mete la casilla en un <ul class="inputs-list"> con
   un <li>. Como el embed va con `css: ''`, no llega ninguna hoja suya que la
   resetee, así que quedan los valores POR DEFECTO DEL NAVEGADOR — la viñeta
   redonda y los 40px de sangría. */
.hs-skin .legal-consent-container { margin-top:2px; }
.hs-skin .legal-consent-container ul,
.hs-skin ul.inputs-list { list-style:none; padding:0; margin:0; }
.hs-skin .legal-consent-container li { list-style:none; display:block; margin:0; }
.hs-skin .legal-consent-container .hs-form-booleancheckbox-display { display:flex; align-items:flex-start; gap:9px; }
/* La separación la define ese `gap` y NADA MÁS: HubSpot le pone al <span> del
   texto un margin-left de 20px y el navegador le da su margen al checkbox. */
.hs-skin .legal-consent-container .hs-form-booleancheckbox-display > span { margin:0 !important; }
.hs-skin .legal-consent-container input[type=checkbox] { width:17px; height:17px; flex:0 0 17px; margin:1px 0 0 !important; accent-color:#084AF3; cursor:pointer; }
.hs-skin .legal-consent-container label,
.hs-skin .legal-consent-container p { font-size:12.5px; font-weight:300; line-height:1.5; color:#64748B; text-transform:none; letter-spacing:0; margin:0; }
.hs-skin .legal-consent-container a { color:#084AF3; text-decoration:underline; text-underline-offset:2px; }
/* El párrafo de "Utilizaremos tus datos…" trae el margen de <p> del navegador */
.hs-skin .hs-richtext { margin:0 0 10px; }
.hs-skin .hs-richtext p { margin:0; }

.hs-skin .hs-button { display:inline-flex; align-items:center; justify-content:center; width:100%; height:52px; margin-top:4px; border:none; border-radius:10px; background:linear-gradient(180deg,#2C66FF,#084AF3); color:#fff; font-family:var(--font-sans); font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 14px 34px -10px rgba(8,74,243,0.6); transition:transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.hs-skin .hs-button:hover { transform:translateY(-2px); box-shadow:0 20px 46px -10px rgba(8,74,243,0.85); }
.hs-skin .hs-button:active { transform:translateY(0); }

/* Errores de validación */
.hs-skin .hs-error-msg, .hs-skin .hs-main-font-element { font-size:12.5px; font-weight:400; color:#DC2626; margin:6px 0 0; text-transform:none; letter-spacing:0; }
.hs-skin .hs-input.invalid { border-color:#DC2626; }
.hs-skin .hs-input.invalid:focus { box-shadow:0 0 0 3px rgba(220,38,38,0.15); }
.hs-skin ul.no-list, .hs-skin .hs-error-msgs { list-style:none; padding:0; margin:0; }

/* Mensaje de gracias, cuando HubSpot reemplaza el formulario */
.hs-skin .submitted-message { font-size:15px; font-weight:300; color:#475569; line-height:1.6; text-align:center; padding:20px 8px; }

/* Placeholder mientras baja el script de HubSpot: barras que laten, para que el
   hueco no se vea vacío ni cambie de alto de golpe. */
.hs-skin .hs-cargando { display:flex; flex-direction:column; gap:16px; padding:4px 0; }
.hs-skin .hs-cargando span { display:block; height:46px; border-radius:9px; background:#F1F5F9; animation:hsPulso 1.4s ease-in-out infinite; }
.hs-skin .hs-cargando span:nth-child(2) { animation-delay:.15s; }
.hs-skin .hs-cargando span:nth-child(3) { animation-delay:.3s; }
@keyframes hsPulso { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .hs-skin .hs-cargando span { animation:none; } }