/* ==========================================================================
   formulario-embed.css — Fisio en Francia
   Estilos del cuestionario embebido (formulario-embed.js) y de los
   formularios cortos de /contacto y /empresas (formulario-simple.js).

   Todo va con prefijo .fe- a propósito: estas hojas conviven con los estilos
   de cada página (style.css, formulario.css…) y no deben pisarse entre ellas.
   ========================================================================== */

.fe,
.fe-form {
  container-type: inline-size;
  --fe-azul: #2c4a74;
  --fe-azul-claro: #3b6094;
  --fe-dorado: #e9bb65;
  --fe-texto: #233044;
  --fe-borde: #d4dae3;
  --fe-error: #c0392b;
  box-sizing: border-box;
  width: 100%;
}

.fe *,
.fe-form * { box-sizing: border-box; }

.fe-form {
  display: block;
  font-family: inherit;
  color: var(--fe-texto);
  text-align: left;
}

/* ---------- Progreso ---------- */
.fe-barra {
  width: 100%;
  height: 6px;
  background: #eef1f5;
  border-radius: 99px;
  overflow: hidden;
}

.fe-barra-relleno {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--fe-azul-claro), var(--fe-dorado));
  border-radius: 99px;
  transition: width .3s ease;
}

.fe-contador {
  margin: 8px 0 14px;
  font-size: 13px;
  color: #7b8798;
}

/* ---------- Pasos ---------- */
.fe-paso { animation: fe-entra .25s ease; }

@keyframes fe-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-paso { animation: none; }
  .fe-barra-relleno { transition: none; }
}

.fe-titulo {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--fe-azul);
}

.fe-campo { margin-bottom: 14px; }

.fe-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fe-azul);
}

.fe-control {
  width: 100%;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;            /* 16px evita que iOS haga zoom al enfocar */
  color: var(--fe-texto);
  background: #fff;
  border: 1.5px solid var(--fe-borde);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

select.fe-control {
  /* Flecha propia, porque quitamos la nativa con appearance:none */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%232c4a74' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

textarea.fe-control { resize: vertical; min-height: 96px; }

.fe-control:focus {
  outline: none;
  border-color: var(--fe-azul-claro);
  box-shadow: 0 0 0 3px rgba(59, 96, 148, .15);
}

.fe-control.fe-error {
  border-color: var(--fe-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.fe-ayuda {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #7b8798;
}

/* ---------- Botones ---------- */
.fe-botones {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.fe-btn {
  flex: 1 1 auto;
  min-width: 0;             /* si no, un texto largo desborda la fila */
  padding: 14px 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s ease, transform .08s ease;
}

.fe-btn:active { transform: translateY(1px); }
.fe-btn:disabled { opacity: .65; cursor: default; }

.fe-btn-principal {
  background: var(--fe-dorado);
  color: #2b2008;
}

.fe-btn-principal:hover:not(:disabled) { filter: brightness(1.06); }

.fe-btn-atras {
  flex: 0 0 auto;
  min-width: 96px;
  background: #eef1f5;
  color: var(--fe-azul);
}

.fe-btn-atras:hover { filter: brightness(.97); }

/* ---------- Avisos ---------- */
.fe-aviso {
  margin: 12px 0 0;
  min-height: 1px;
  font-size: 14px;
  color: var(--fe-error);
}

.fe-aviso:empty { display: none; }

.fe-gracias { text-align: center; padding: 10px 0; }
.fe-gracias p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }

/* ---------- reCAPTCHA ---------- */
.fe-captcha,
.fe-simple-captcha {
  margin-top: 16px;
  /* El widget de Google mide 304px fijos. Se reduce cuando el hueco disponible
     no da (el modal de /empleos es más estrecho que la ventana), midiendo el
     contenedor y no la pantalla. */
  transform-origin: 0 0;
}

@container (max-width: 336px) {
  .fe-captcha,
  .fe-simple-captcha { transform: scale(.85); height: 66px; }
}

@container (max-width: 300px) {
  .fe-captcha,
  .fe-simple-captcha { transform: scale(.76); height: 60px; }
}

/* Respaldo para navegadores sin @container */
@supports not (container-type: inline-size) {
  @media (max-width: 360px) {
    .fe-captcha,
    .fe-simple-captcha { transform: scale(.85); height: 66px; }
  }
}

/* ---------- Trampa anti-bot (invisible, pero no para lectores de pantalla) ---------- */
.fe-trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* ---------- Formularios cortos (/contacto y /empresas) ---------- */
form.fe-simple { container-type: inline-size; }

.fe-simple-aviso {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

.fe-simple-aviso.fe-ok { color: #1e7a4b; }
.fe-simple-aviso.fe-ko { color: var(--fe-error); }
.fe-simple-aviso:empty { display: none; }

.fe-simple-captcha { margin: 14px 0 4px; }

/* ---------- Etiqueta solo para lectores de pantalla ----------
   Los formularios cortos de /contacto y /empresas se diseñaron con el texto
   dentro del placeholder; la etiqueta se mantiene para quien navega con
   lector de pantalla, sin cambiar cómo se ve el formulario. */
.fe-oculto-visual {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Botón de descarga de la guía ---------- */
.fe-btn-descarga {
  display: block;
  margin-top: 14px;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
}

.fe-gracias .fe-ayuda { margin-top: 10px; }

/* =========================================================================
   Arreglo 13/10/2026 — botón «Enviar» inalcanzable en móvil (/guia-gratuita)

   En móvil el hero .home es una caja fija (500-600 px, overflow:hidden) con
   el contenido en absoluto: el paso final del cuestionario (mensaje +
   reCAPTCHA + botón) crecía más que la caja y quedaba cortado sin scroll,
   con el botón tapado por el captcha, el banner de cookies y el header.
   Desde el 05/10 no entraba NI UNA candidatura desde esta página por esto.

   Solo afecta a los heros que contienen el cuestionario embebido
   (.home:has(.fe)); el resto de páginas no cambian. Esta hoja carga después
   de style.css únicamente en las páginas del embed.
   ========================================================================= */
@media (max-width: 1000px) {
    .home:has(.fe) {
        height: auto;
        min-height: 500px;
        overflow: visible;
    }

    /* El vídeo pasa a fondo a pantalla completa del hero crecido */
    .home:has(.fe) .home__video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0;
    }

    /* El contenido vuelve al flujo normal: empuja la altura del hero.
       position:relative conserva el z-index por encima del degradado ::after */
    .home:has(.fe) .home__content {
        position: relative;
        z-index: 1;
        top: 0;
        height: auto;
        padding: 130px 0 40px; /* hueco del nav fijo arriba */
    }

    /* Que el final del formulario no quede bajo el banner de cookies fijo */
    .home:has(.fe) .fe-form {
        margin-bottom: 90px;
    }
}

/* El modal de candidatura (.postula, fijo en top:5vh y sin scroll propio)
   sufría lo mismo con el cuestionario dentro: en pantallas bajas el captcha
   y el botón quedaban fuera del viewport sin forma de llegar. Pasa a ocupar
   la pantalla con scroll propio. Solo el modal que contiene el embed. */
.postula:has(.fe) {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4vh 0;
    /* por encima del banner de cookies (z-index 9999), que si no
       tapa la mitad inferior del modal en móvil y roba los clics */
    z-index: 10001;
}