/* CF7 "Registro piloto Screen-Train" - estructura y estilo PROPIOS, sin
   depender de .form-container--oartrain-one (su sistema de rejilla de 12
   columnas + .form-group/span-N es mucho mas complejo de lo que hace falta
   aqui, y arrastraba el <p> automatico de WordPress sobre el formulario -
   ver wpcf7_autop_or_not en callback_registro_piloto.php, que lo desactiva
   SOLO para este formulario). Calcado 1:1 del mockup del companero
   (screentrain_formulario_piloto_ejemplo.html), adaptado a las etiquetas de
   Contact Form 7 (los campos van dentro de <label>, con su propio
   <span class="wpcf7-form-control-wrap"> alrededor del control real). */

.form-container--screentrain-piloto {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #163c43;
}

.form-container--screentrain-piloto .st-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 680px) {
  .form-container--screentrain-piloto .st-grid {
    grid-template-columns: 1fr;
  }
}

.form-container--screentrain-piloto .st-field {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #008698;
}

.form-container--screentrain-piloto .st-optional {
  font-weight: 400;
  color: #60767a;
}

.form-container--screentrain-piloto input:not([type="checkbox"]):not([type="submit"]),
.form-container--screentrain-piloto select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: 1px solid #bfced0 !important;
  background: #ffffff !important;
  border-radius: 6px;
  padding: 13px 12px;
  font: inherit;
  font-weight: 400;
  color: #163c43;
  min-height: 44px;
}

.form-container--screentrain-piloto input:not([type="checkbox"]):not([type="submit"]):focus,
.form-container--screentrain-piloto select:focus {
  outline: 2px solid #00889a;
  outline-offset: 2px;
}

.form-container--screentrain-piloto .st-privacy {
  background: #f3f8f8;
  border-radius: 8px;
  padding: 17px;
  margin-top: 6px;
  margin-bottom: 18px;
}

.form-container--screentrain-piloto .st-privacy h3 {
  font-size: 13px;
  margin: 0 0 10px;
  color: #008698;
  font-weight: bold;
}

.form-container--screentrain-piloto .st-privacy details {
  font-size: 12px;
  margin-top: 8px;
  color: #163c43;
}

.form-container--screentrain-piloto .st-privacy summary {
  cursor: pointer;
  color: #006873;
  font-weight: 700;
  text-decoration: none;
}

.form-container--screentrain-piloto .st-privacy p {
  margin: 7px 0;
}

/* Las casillas de aceptacion de CF7 ya traen su propio <label> generado
   (envolviendo input+texto) - aqui solo se da formato a ese label y al
   contenedor .st-check que lo rodea, sin anadir ningun <label> propio. */
.form-container--screentrain-piloto .st-check {
  margin: 14px 0;
  font-size: 12px;
  line-height: 1.6;
}

.form-container--screentrain-piloto .st-check label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  color: #163c43;
  cursor: pointer;
}

/* Casillas cuadradas de 18px con acento teal.
   mu-plugins/at-cf7-checkbox-style.php redondea a proposito (border-radius:999px)
   TODAS las casillas de TODOS los formularios CF7 del sitio (decision ya tomada
   para OAR-Train, documentada y duplicada adrede - inline style + fallback en
   wp_head - para resistir cualquier cache/minificador). No se toca ese fichero
   compartido: aqui solo se sobreescribe, para ESTE formulario, el radio de las
   DOS variantes que usa ese mismo mu-plugin (casilla nativa directa, y la
   casilla oculta + pseudo-elemento ::before que CF7 pinta cuando el campo va
   envuelto en <label>, que es la estructura real de nuestro markup). La clase
   repetida (".form-container--screentrain-piloto.form-container--screentrain-piloto")
   no es un error: suma un punto de especificidad para ganarle con seguridad a
   los selectores del mu-plugin (misma especificidad + !important en ambos
   bandos), sin depender del orden de carga de las hojas de estilo. */
.form-container--screentrain-piloto.form-container--screentrain-piloto input[type="checkbox"],
.form-container--screentrain-piloto.form-container--screentrain-piloto .wpcf7-list-item > label > input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 3px !important;
  accent-color: #00889a !important;
  flex-shrink: 0 !important;
  margin: 2px 0 0 !important;
}

.form-container--screentrain-piloto.form-container--screentrain-piloto .wpcf7-list-item > label > input[type="checkbox"] + .wpcf7-list-item-label::before {
  border-radius: 3px !important;
}

.form-container--screentrain-piloto .st-submit {
  margin-top: 4px;
}

/* text-transform:none porque varios CSS de MasterStudy LMS (cuentas, wizard,
   deprecated/membership...) ponen .btn{text-transform:uppercase} y el
   submit de CF7 lleva la clase .btn por defecto. */
.form-container--screentrain-piloto .wpcf7-submit {
  background: #00889a !important;
  border: 0 !important;
  color: #ffffff !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 16px !important;
  border-radius: 6px !important;
  cursor: pointer;
  text-transform: none !important;
}

.form-container--screentrain-piloto .wpcf7-submit:hover {
  background: #006873 !important;
}

/* ---------------------------------------------------------------------
 * Ajustes de la FILA/COLUMNAS de la pagina (post 20763), no del formulario.
 * El mockup del companero (screentrain_formulario_piloto_ejemplo.html) usa
 * CSS grid con columnas asimetricas (grid-template-columns: 1fr 1.08fr;
 * gap: 76px dentro de un main{max-width:1240px;padding:68px 36px}), pero
 * WPBakery monta esta fila con su sistema de columnas tipo Bootstrap 3
 * (float + width% como clase vc_col-sm-6, sin gap real). En vez de fijar
 * anchos en pixeles (primer intento: se veia bien en escritorio pero no se
 * adaptaba nada por debajo de ~1200px de viewport, desbordando en movil -
 * exactamente el bug que reporto Adrian), se convierte la fila en un CSS
 * grid de verdad, igual que el mockup: las dos columnas pasan a ser items
 * de grid (width/margin/padding propios anulados, grid-template-columns +
 * gap hacen el reparto), con lo que se adapta solo a cualquier ancho
 * intermedio, no solo en los puntos de corte exactos. Los dos breakpoints
 * (900px y 680px) son los mismos valores que ya trae el CSS del mockup. */
.vc_custom_screentrainpiloto1.vc_custom_screentrainpiloto1 {
  display: grid !important;
  grid-template-columns: 1fr 1.08fr !important;
  gap: 76px !important;
  padding: 68px 36px !important;
}

.vc_custom_screentrainpiloto1 > .wpb_column:nth-child(1),
.vc_custom_screentrainpiloto1 > .wpb_column:nth-child(2) {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* La auto-colocacion de grid (sin indicar celda) estaba metiendo cada
   columna en su PROPIA fila en vez de ponerlas lado a lado (columna 1
   acababa en la pista derecha, columna 2 ~900px mas abajo en la
   izquierda) - bug real visto en Chrome en esta pagina, no reproducible
   en un HTML minimo aislado con las mismas reglas, así que en vez de
   perseguir la causa exacta se fija la celda de cada columna a mano,
   quitando la ambiguedad por completo. */
.vc_custom_screentrainpiloto1 > .wpb_column:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.vc_custom_screentrainpiloto1 > .wpb_column:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

@media (max-width: 900px) {
  .vc_custom_screentrainpiloto1.vc_custom_screentrainpiloto1 {
    gap: 35px !important;
    padding: 40px 24px !important;
  }

  /* h1 lleva font-size inline (style="font-size:58px") puesto por el propio
     shortcode de WPBakery - un !important aqui es obligatorio para ganarle,
     el peso normal de un media query no basta contra un inline style. */
  .vc_custom_screentrainh1 h1 {
    font-size: 45px !important;
  }

  .vc_custom_screentrainpiloto3 {
    padding: 24px !important;
  }
}

@media (max-width: 680px) {
  .vc_custom_screentrainpiloto1.vc_custom_screentrainpiloto1 {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 35px 20px !important;
  }

  /* Con una sola columna de grid ya no hay pista 2 - si se deja la
     columna 1 fijada en "columna 1" se apilan bien solas. */
  .vc_custom_screentrainpiloto1 > .wpb_column:nth-child(1),
  .vc_custom_screentrainpiloto1 > .wpb_column:nth-child(2) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* "01/02/03": el css="" del shortcode (.vc_custom_screentrainbadgeN) ya pide
   font-weight:700 !important, pero mismo patron de siempre - esa clase va en
   el DIV contenedor, el numero real esta en el masterstudy-custom-title de
   dentro, que no lo hereda porque el tema fija su propio peso ahi. */
.vc_custom_screentrainbadge1 .masterstudy-custom-title,
.vc_custom_screentrainbadge2 .masterstudy-custom-title,
.vc_custom_screentrainbadge3 .masterstudy-custom-title {
  font-weight: 700 !important;
}

/* Caja "Participacion voluntaria...": el mockup la centra con flex
   (justify-content:center), no con text-align en un bloque simple. En la
   practica ambas tecnicas dan el mismo resultado visual aqui (medido: 17px a
   cada lado), pero se deja igual que el original por fidelidad. */
.vc_custom_screentraininfo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 17px !important;
}

/* Doble espaciado entre los pasos 01/02/03: el tema (masterstudy/assets/css/
   styles.css) pone ".vc_row{margin-bottom:35px}" en TODA fila de WPBakery
   del sitio (no se toca esa regla global, afectaria a cualquier otra pagina)
   - aqui se suma con el "vc_empty_space" que ya ponemos entre pasos,
   doblando el hueco. Se anula solo para las filas internas (vc_row_inner,
   la clase "vc_inner") dentro de nuestra propia fila de la pagina. */
.vc_custom_screentrainpiloto1 .vc_row.vc_inner {
  margin-bottom: 0 !important;
}

.vc_custom_screentraininfotxt p {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

/* La linea divisoria antes de los 3 pasos: el shortcode "stm_multy_separator"
   del tema (masterstudy/partials/vc_templates/multy_separator.php) dibuja un
   acento de color (.multiseparator::after, 50px amarillo) encima de una linea
   gris mas larga (::before) - el mockup solo quiere la linea gris simple. Se
   oculta el acento y se estira la linea gris al 100% del ancho de la columna
   en vez de tocar el shortcode en si. */
.vc_custom_screentrainpiloto1 .multiseparator::after {
  display: none !important;
}

.vc_custom_screentrainpiloto1 .multiseparator::before {
  left: 0 !important;
  width: 100% !important;
  background-color: #dce8e9 !important;
}

/* Mismo patron que el h2 (ver callback de BD/post 20763): la clase que genera
   el css="" del shortcode vc_custom_heading va en el DIV contenedor, no en el
   h1 real de dentro (que lleva su propia clase masterstudy-custom-title) - y
   el tema fija su propio letter-spacing:-0.4px directamente sobre "h1" que
   gana por ser una declaracion directa sobre el propio elemento (no heredada). */
.vc_custom_screentrainh1 h1 {
  letter-spacing: -2px !important;
}

/* "Participacion voluntaria - Version en desarrollo": este texto salia en
   Abril Fatface, puesto como INLINE style (style="...font-family:Abril
   Fatface...") directamente sobre el <p> por el propio shortcode de
   MasterStudy - un inline style propio del elemento siempre gana a un valor
   heredado del contenedor (aunque ese valor venga con !important), asi que
   hay que apuntar al <p> de dentro, no a la clase del div contenedor.
   La pagina entera usa Open Sans (confirmado: cuerpo, parrafos del paso 1/2/3,
   etc. - el mockup del companero pone Montserrat en su CSS, pero forzar esa
   fuente solo aqui crearia una inconsistencia nueva con el resto de la
   pagina en vez de arreglar la vieja; mejor heredar la fuente real del sitio). */
.vc_custom_screentraininfotxt p {
  font-family: inherit !important;
}