/**
 * GSS HubSpot Forms — Estilos del contenedor
 * Marker: .gss-hsform
 * ─────────────────────────────────────────────────────────────
 * Este es el fichero que va a producción. Cubre el embed NUEVO de
 * HubSpot, el único disponible para los formularios creados en su
 * editor actual:
 *
 *   <div class="gss-hsform">
 *     <script src="https://js-eu1.hsforms.net/forms/embed/<portalId>.js" defer></script>
 *     <div class="hs-form-frame" data-region="eu1"
 *          data-form-id="…" data-portal-id="…"></div>
 *   </div>
 *
 * Ese embed mete el formulario en un <iframe> CROSS-ORIGIN
 * (js-eu1.hsforms.net, render en forms-eu1.hsforms.com/embed/v3,
 * altura por postMessage). Comprobado el 14-08-2026: ni el CSS ni el
 * JS de la página pueden entrar — `iframe.contentDocument` es null.
 * El embed clásico v2 (hbspt.forms.create) tampoco renderiza inline:
 * delega en el mismo iframe.
 *
 * Por tanto aquí sólo se estila lo alcanzable: la card, el ancho y el
 * estado de carga. Lo de dentro (Poppins, colores, botón pill, bordes)
 * se configura en el editor de estilos de HubSpot — ver README.
 *
 * Si algún día se embebe un formulario LEGACY (editor antiguo), ése sí
 * renderiza inline en el DOM: para ese caso están gss-hsform-inline.css
 * y gss-hsform-inline.js, que estilan el formulario entero (labels,
 * inputs, combo box de selects, checkboxes, botón, errores) y añaden el
 * guard de email corporativo. No están registrados en el loader: son
 * código muerto hasta que haga falta.
 *
 * Tokens: gss-design-system/colors_and_type.css.
 */


/* ═════════════════════════════════════════════════════════════
   CARD CONTENEDORA
   Modifier `gss-hsform--bare` si la landing la quiere transparente
   (por ejemplo cuando el formulario ya va sobre un fondo claro y la
   card de HubSpot dentro del iframe ya aporta su propio blanco).
═════════════════════════════════════════════════════════════ */

.gss-hsform {
    background: var(--gss-white, #FFFFFF);
    border-radius: var(--gss-radius-lg, 20px);
    box-shadow: var(--gss-shadow-lg, 0 8px 32px rgba(4, 20, 56, 0.12));
    padding: 36px 32px;
    box-sizing: border-box;
    contain: layout paint;
}

.gss-hsform--bare {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 600px) {
    .gss-hsform {
        padding: 24px 20px;
        border-radius: var(--gss-radius-md, 12px);
    }
}

/* Enlaces que la landing ponga junto al formulario dentro de la card
   (política de privacidad, "ver todos los recursos"…). */
.gss-hsform a {
    color: var(--gss-neon-blue, #5078FF);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
}

.gss-hsform a:hover {
    border-bottom-color: var(--gss-neon-blue, #5078FF);
}


/* ═════════════════════════════════════════════════════════════
   EL FRAME
   OJO: el script de HubSpot escribe `height` inline en el
   CONTENEDOR y controla la `visibility` del iframe. No tocar
   ninguna de las dos: sólo `min-height` mientras carga.
═════════════════════════════════════════════════════════════ */

.gss-hsform .hs-form-frame,
.gss-hsform.hs-form-frame {
    width: 100%;
    box-sizing: border-box;
}

/* ── Ajuste del formulario al borde de la card ──────────────────
   HubSpot ya trae su propio padding DENTRO del iframe: medido el
   14-08-2026 en el form d1acc4da…, unos 40px arriba y a los lados
   y ~24px abajo. Si encima ponemos el padding de la card (36/32),
   el formulario queda flotando en el centro con el doble de aire.
   Por eso en modo iframe la card NO pone padding: el del propio
   formulario hace de padding, y el resultado cuadra con el ritmo
   de espaciado GSS.

   `.has-frame` la aplica gss-hsform.js; el `:has()` es el fallback
   sin JS (y en navegadores sin :has() se vuelve al padding normal,
   que sólo se ve más holgado — nada roto).

   Si una landing necesita más aire alrededor:
     <div class="gss-hsform" style="--gss-hsform-pad:16px">
─────────────────────────────────────────────────────────────── */

.gss-hsform.has-frame,
.gss-hsform:has(> .hs-form-frame) {
    padding: var(--gss-hsform-pad, 0);
    /* El iframe es rectangular: que lo recorte el radio de la card. */
    overflow: hidden;
}

/* Opción agresiva: recorta parte del padding interno de HubSpot
   tirando del frame hacia fuera (con overflow:hidden en la card, la
   banda que sobresale se corta). Deja el contenido a ~16px del borde
   en lugar de ~40px.

   Úsala sólo si con lo anterior el formulario sigue pareciendo
   pequeño dentro de la caja, y revisa en el navegador que no se
   corte nada que viva en esa banda de 24px: el aro de foco de los
   campos, los mensajes de error y, sobre todo, el desplegable de un
   <select> (se dibuja dentro del iframe y puede llegar a su borde).

     <div class="gss-hsform gss-hsform--tight">
     <div class="gss-hsform gss-hsform--tight" style="--gss-hsform-crop:16px">

   No pases de ~24px: por encima empieza a comerse el contenido. */
.gss-hsform--tight .hs-form-frame {
    margin: calc(-1 * var(--gss-hsform-crop, 24px));
    width: calc(100% + 2 * var(--gss-hsform-crop, 24px));
}

.gss-hsform .hs-form-frame > iframe,
.gss-hsform.hs-form-frame > iframe {
    display: block;
    width: 100% !important;
    border: 0 !important;
    color-scheme: light;
}


/* ═════════════════════════════════════════════════════════════
   ESTADO DE CARGA (reserva de espacio anti-CLS + skeleton)

   `.is-loading` lo pone y lo quita gss-hsform.js, que espera a que
   HubSpot escriba la altura real del contenedor (el `load` del
   iframe llega antes y no sirve: medido, dispara a ~2 s con el
   contenedor todavía en `height: 0px`).

   El `:not(:has(iframe))` es el fallback sin JS: tapa el hueco
   hasta que HubSpot crea el iframe.
═════════════════════════════════════════════════════════════ */

.gss-hsform.is-loading .hs-form-frame,
.gss-hsform.is-loading.hs-form-frame,
.gss-hsform .hs-form-frame:not(:has(iframe)),
.gss-hsform.hs-form-frame:not(:has(iframe)) {
    /* Ajústalo por página según lo largo que sea el formulario:
       `<div class="gss-hsform" style="--gss-hsform-skeleton-h:280px">`.
       Medido: el form de 3 campos se estabiliza en 230px; el valor por
       defecto cubre uno de 4-5 campos. Cuanto más se acerque al alto
       real, menos salto de layout. */
    min-height: var(--gss-hsform-skeleton-h, 420px);
    border-radius: 12px;
    background:
        linear-gradient(
            100deg,
            rgba(80, 120, 255, 0.04) 30%,
            rgba(80, 120, 255, 0.10) 50%,
            rgba(80, 120, 255, 0.04) 70%
        );
    background-size: 200% 100%;
    animation: gss-hsform-shimmer 1400ms ease-in-out infinite;
}

@keyframes gss-hsform-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}


/* ═════════════════════════════════════════════════════════════
   RESPETO A prefers-reduced-motion
═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .gss-hsform a {
        transition: none !important;
    }

    .gss-hsform.is-loading .hs-form-frame,
    .gss-hsform.is-loading.hs-form-frame,
    .gss-hsform .hs-form-frame:not(:has(iframe)),
    .gss-hsform.hs-form-frame:not(:has(iframe)) {
        animation: none;
        background: rgba(80, 120, 255, 0.05);
    }
}