/* =========================================================================
   Franco Salomone · Landing, las piezas interactivas
   Vestidas con Happiness Coach: toman sus colores, sus fuentes y su escala
   de theme.json por variables de WordPress, con el valor del tema como
   respaldo. Si se cambia la paleta en Estilos, las piezas la siguen.

   Todo va adentro de .fsl, salvo el último bloque, que arregla dos cosas
   de la plantilla de inicio. Ver docs/16-happiness-coach.md.
   ========================================================================= */

.fsl {
  --fsl-tinta:    var(--wp--preset--color--heading-text, #281830);
  --fsl-texto:    var(--wp--preset--color--paragraph-text, #705F77);  /* 5,8:1 sobre blanco, 5,4:1 sobre el claro */
  --fsl-apagado:  var(--wp--preset--color--muted-text, #BAB0B7);      /* solo decorativo: 1,9:1 sobre blanco */
  --fsl-linea:    var(--wp--preset--color--rule, #EDE5E0);
  --fsl-blanco:   var(--wp--preset--color--white, #FFFFFF);
  --fsl-claro:    var(--wp--preset--color--background-light, #FAF5F3);
  --fsl-primario: var(--wp--preset--color--primary, #2D1B36);
  --fsl-acento:   var(--wp--preset--color--secondary, #FF6B35);       /* 2,8:1 sobre blanco: nunca como texto chico */

  /* La serif de las citas del tema. "Lora" se pedía y no se cargaba: caía en Georgia. */
  --fsl-serif: var(--wp--preset--font-family--merriweather, var(--wp--preset--font-family--fraunces, Georgia, "Times New Roman", serif));
  --fsl-sans:  var(--wp--preset--font-family--inter, "Inter", system-ui, sans-serif);

  --fsl-t-chico:  var(--wp--preset--font-size--small, 15px);
  --fsl-t-base:   var(--wp--preset--font-size--medium, 17px);
  --fsl-t-grande: var(--wp--preset--font-size--heading-h-5, 24px);
  --fsl-t-h2:     var(--wp--preset--font-size--heading-h-2, 56px);

  --fsl-radio:    24px;
  --fsl-radio-2:  16px;
  --fsl-radio-3:  12px;
  --fsl-pildora:  50px;
  --fsl-sombra:   0 10px 28px rgba(40, 24, 48, 0.08);
  --fsl-campo:    50px;
  --fsl-icono:    18px;

  font-family: var(--fsl-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fsl-tinta);
}

.fsl *,
.fsl *::before,
.fsl *::after { box-sizing: border-box; }

.fsl [hidden] { display: none !important; }

/* Los párrafos de las piezas no toman el tamaño de párrafo de Estilos. */
.fsl p { font-size: inherit; }

.fsl h2,
.fsl p,
.fsl ul,
.fsl li,
.fsl figure { margin: 0; }
.fsl ul { padding: 0; list-style: none; }

/* --- Piezas comunes ------------------------------------------------------ */

.fsl .card {
  background: var(--fsl-blanco);
  border: 1px solid var(--fsl-linea);
  border-radius: var(--fsl-radio);
  padding: clamp(24px, 3.2vw, 44px);
}

/* La letra y el peso son los de los títulos del tema (Estilos > Tipografía). */
.fsl .h2 {
  font-size: var(--fsl-t-h2);
  line-height: 1.12;
  color: var(--fsl-tinta);
  text-wrap: balance;
  max-width: 20ch;
}

.fsl .lead {
  font-size: var(--fsl-t-base);
  line-height: 1.65;
  color: var(--fsl-texto);
  max-width: 58ch;
}

.fsl .note { font-size: var(--fsl-t-chico); color: var(--fsl-texto); }
.fsl .mt6 { margin-top: 16px; }
.fsl .mt10 { margin-top: 48px; }

.fsl .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--fsl-campo);
  padding: 14px 32px;
  border: 0;
  border-radius: var(--fsl-pildora);
  background: var(--fsl-primario);
  color: var(--fsl-blanco);
  font-family: var(--fsl-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.16s ease;
}
.fsl .btn:hover { opacity: 0.88; }
.fsl .btn:disabled { cursor: not-allowed; opacity: 0.45; }
.fsl .btn[aria-busy="true"] { cursor: progress; opacity: 0.6; }

/* El del buscador no es la acción de la página: blanco con borde. */
.fsl .btn--line {
  background: var(--fsl-blanco);
  color: var(--fsl-tinta);
  box-shadow: inset 0 0 0 1px var(--fsl-texto);
}

.fsl input:not([type="checkbox"]),
.fsl select {
  display: block;
  width: 100%;
  min-height: var(--fsl-campo);
  padding: 12px 16px;
  border: 1px solid var(--fsl-texto);   /* un campo pide 3:1 para su borde */
  border-radius: var(--fsl-radio-3);
  background: var(--fsl-blanco);
  color: var(--fsl-tinta);
  font: inherit;
  font-size: 16px;
}
.fsl input::placeholder { color: var(--fsl-texto); opacity: 1; }

/* --- La prueba ----------------------------------------------------------- */

.fsl .prueba-label { display: block; font-size: var(--fsl-t-chico); font-weight: 600; }
.fsl .prueba-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.fsl .prueba-campo { position: relative; flex: 1 1 220px; min-width: 0; }
.fsl .prueba-campo svg {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  width: var(--fsl-icono);
  height: var(--fsl-icono);
  color: var(--fsl-texto);
  pointer-events: none;
}
.fsl .prueba-campo input { padding-left: 46px; }
@media (max-width: 479px) { .fsl .prueba-fila .btn { width: 100%; } }

/* --- La auditoría de perfil ---------------------------------------------- */

.fsl .auditoria__lista { margin-top: 32px; display: grid; column-gap: 48px; }
@media (min-width: 900px) {
  .fsl .auditoria__lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Del 1 al 4 a la izquierda y del 5 al 8 a la derecha; el teclado
     sigue yendo del 1 al 8. */
  .fsl .auditoria__lista > li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .fsl .auditoria__lista > li:nth-child(2) { grid-column: 1; grid-row: 2; }
  .fsl .auditoria__lista > li:nth-child(3) { grid-column: 1; grid-row: 3; }
  .fsl .auditoria__lista > li:nth-child(4) { grid-column: 1; grid-row: 4; }
  .fsl .auditoria__lista > li:nth-child(5) { grid-column: 2; grid-row: 1; }
  .fsl .auditoria__lista > li:nth-child(6) { grid-column: 2; grid-row: 2; }
  .fsl .auditoria__lista > li:nth-child(7) { grid-column: 2; grid-row: 3; }
  .fsl .auditoria__lista > li:nth-child(8) { grid-column: 2; grid-row: 4; }
}
.fsl .auditoria__lista > li { border-bottom: 1px solid var(--fsl-linea); }

.fsl .auditoria__item {
  display: grid;
  grid-template-columns: var(--fsl-icono) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-block: 16px;
  font-size: var(--fsl-t-base);
  line-height: 1.5;
  color: var(--fsl-tinta);
  cursor: pointer;
}
.fsl .auditoria__item input {
  width: var(--fsl-icono);
  height: var(--fsl-icono);
  margin: 0.2em 0 0;
  padding: 0;
  accent-color: var(--fsl-primario);
  cursor: pointer;
}

/* Las tres frases con el mismo tratamiento, sin recuadro ni puntaje. */
.fsl .auditoria__frase {
  margin-top: 32px;
  max-width: 44ch;
  font-family: var(--fsl-serif);
  font-size: var(--fsl-t-grande);
  line-height: 1.35;
  color: var(--fsl-tinta);
}

/* --- Lo que queda armado: las cuatro maquetas ------------------------------
   HTML y CSS, sin imágenes y sin nada que parezca una plataforma. Lo de
   antes va atenuado sobre el claro del tema; lo de después, en blanco con
   una raya del acento. */

.fsl .armado__grilla { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .fsl .armado__grilla { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .fsl .armado__grilla > .maqueta--titular     { grid-column: 1 / span 5; grid-row: 1; }
  .fsl .armado__grilla > .maqueta--experiencia { grid-column: 6 / span 7; grid-row: 1; }
  .fsl .armado__grilla > .maqueta--cv          { grid-column: 1 / span 6; grid-row: 2; }
  .fsl .armado__grilla > .maqueta--ruta        { grid-column: 7 / span 6; grid-row: 2; }
}

.fsl .maqueta { display: flex; flex-direction: column; gap: 24px; }
.fsl .maqueta > :first-child { flex: 1 0 auto; }
.fsl .maqueta__pie {
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--fsl-texto);
}

/* El titular */
.fsl .mq-titular {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-content: center;
  row-gap: 12px;
}
.fsl .mq-titular__fila {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 8px 16px;
  align-items: baseline;
  padding: 16px 20px;
  border-radius: var(--fsl-radio-2);
}
.fsl .mq-titular__fila--antes { background: var(--fsl-claro); color: var(--fsl-texto); }
.fsl .mq-titular__fila--despues {
  background: var(--fsl-blanco);
  color: var(--fsl-tinta);
  border: 1px solid var(--fsl-linea);
  box-shadow: inset 3px 0 0 var(--fsl-acento);
}
.fsl .mq-etiqueta {
  grid-column: 1;
  justify-self: start;
  padding: 2px 12px;
  border: 1px solid var(--fsl-linea);
  border-radius: var(--fsl-pildora);
  background: var(--fsl-blanco);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--fsl-texto);
}
.fsl .mq-titular__fila--despues .mq-etiqueta {
  background: var(--fsl-primario);
  border-color: var(--fsl-primario);
  color: var(--fsl-blanco);
}
.fsl .mq-titular__texto { grid-column: 2; font-size: var(--fsl-t-chico); line-height: 1.45; }
.fsl .mq-titular__fila--despues .mq-titular__texto {
  font-family: var(--fsl-serif);
  font-size: 18px;
  line-height: 1.4;
}
@media (max-width: 479px) {
  .fsl .mq-titular { grid-template-columns: minmax(0, 1fr); }
  .fsl .mq-titular__texto { grid-column: 1; }
}

/* La experiencia */
.fsl .mq-experiencia { display: grid; gap: 12px; align-content: center; }
@media (min-width: 620px) {
  .fsl .mq-experiencia { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; }
  .fsl .mq-puesto--antes   { grid-column: 1; grid-row: 1; }
  .fsl .mq-puesto--despues { grid-column: 2; grid-row: 1; }
}
.fsl .mq-puesto {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 20px;
  border-radius: var(--fsl-radio-2);
}
.fsl .mq-puesto--antes { background: var(--fsl-claro); color: var(--fsl-texto); }
.fsl .mq-puesto--despues {
  background: var(--fsl-blanco);
  color: var(--fsl-tinta);
  border: 1px solid var(--fsl-linea);
  box-shadow: inset 3px 0 0 var(--fsl-acento);
}
.fsl .mq-puesto__t { font-size: 16px; line-height: 1.35; }
.fsl .mq-puesto--despues .mq-puesto__t { font-family: var(--fsl-serif); font-size: 18px; }
.fsl .mq-puesto__lugar { font-size: var(--fsl-t-chico); color: var(--fsl-texto); }
.fsl .mq-puesto__fecha { font-size: 13px; font-variant-numeric: tabular-nums; }
.fsl .mq-puesto--despues .mq-puesto__fecha { color: var(--fsl-texto); }
.fsl .mq-puesto__detalle {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--fsl-linea);
  font-size: 13px;
  color: var(--fsl-texto);
}

/* El CV: dos hojas superpuestas */
.fsl .mq-cv { position: relative; aspect-ratio: 4 / 3; }
.fsl .mq-hoja {
  position: absolute;
  top: 8%;
  left: 50%;
  height: 84%;
  aspect-ratio: 1 / 1.414;
  display: flex;
  flex-direction: column;
  /* Los renglones que no entran enteros pasan a una segunda columna que
     queda fuera de la hoja: nunca se ve uno cortado. */
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 8px;
  column-gap: 48px;
  padding: 20px 16px;
  overflow: hidden;
  background: var(--fsl-blanco);
  border: 1px solid var(--fsl-linea);
  border-radius: 8px;
  box-shadow: var(--fsl-sombra);
}
.fsl .mq-hoja--atras { background: var(--fsl-claro); translate: -78% 0; rotate: -6deg; }
.fsl .mq-hoja--frente { translate: -30% 3%; rotate: 3deg; }
.fsl .mq-renglon {
  display: block;
  flex: none;
  height: 6px;
  border-radius: var(--fsl-pildora);
  background: var(--fsl-apagado);
}
.fsl .mq-renglon--nombre { width: 62%; height: 10px; margin-bottom: 8px; background: var(--fsl-texto); }
.fsl .mq-renglon:nth-child(2) { width: 44%; }
.fsl .mq-renglon:nth-child(3) { width: 92%; }
.fsl .mq-renglon:nth-child(4) { width: 86%; }
.fsl .mq-renglon:nth-child(5) { width: 95%; }
.fsl .mq-renglon:nth-child(6) { width: 68%; }
.fsl .mq-renglon:nth-child(7) { width: 90%; }
.fsl .mq-renglon:nth-child(8) { width: 82%; }
.fsl .mq-renglon:nth-child(9) { width: 58%; }
.fsl .mq-renglon:nth-child(10) { width: 90%; }
.fsl .mq-renglon:nth-child(11) { width: 74%; }
.fsl .mq-renglon:nth-child(12) { width: 94%; }
.fsl .mq-renglon:nth-child(13) { width: 52%; }
.fsl .mq-renglon:nth-child(14) { width: 88%; }
.fsl .mq-renglon:nth-child(15) { width: 66%; }
.fsl .mq-renglon--parrafo { margin-top: 12px; }

/* La hoja de ruta */
.fsl .mq-ruta { display: grid; align-content: center; }
.fsl .mq-ruta__fila {
  display: grid;
  grid-template-columns: var(--fsl-icono) minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--fsl-linea);
}
.fsl .mq-ruta__fila:first-child { border-top: 1px solid var(--fsl-linea); }
.fsl .mq-ruta__tilde { grid-column: 1; grid-row: 1; font-weight: 700; color: var(--fsl-primario); }
.fsl .mq-ruta__t { grid-column: 2; grid-row: 1; font-size: var(--fsl-t-chico); line-height: 1.4; color: var(--fsl-texto); }
.fsl .mq-ruta__n {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--fsl-serif);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fsl .mq-ruta__fila--hecha .mq-ruta__t { font-weight: 600; color: var(--fsl-tinta); }

/* --- El formulario del diagnóstico ----------------------------------------- */

.fsl .campo + .campo { margin-top: 18px; }
.fsl .campo label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fsl-t-chico);
  font-weight: 600;
  color: var(--fsl-tinta);
}
/* El botón que envía es la acción de la página: el mismo azul de los demás
   botones (blanco sobre #2563EB, 5,2:1). */
.fsl .form .btn { margin-top: 28px; width: 100%; background: var(--fsl-acento); font-weight: 600; }
.fsl .form .btn:not(:disabled):hover { background: var(--fsl-primario); opacity: 1; }
.fsl .form .note { margin-top: 12px; }

.fsl .form-ok {
  padding: 24px;
  border-radius: var(--fsl-radio-2);
  background: var(--fsl-claro);
  color: var(--fsl-tinta);
  font-size: var(--fsl-t-base);
  line-height: 1.5;
}

/* El campo trampa: una persona no lo ve, un robot que completa todo sí. */
.fsl .trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   Dos arreglos para la plantilla de inicio
   ========================================================================= */

/* El salto al formulario no queda pegado al borde de la ventana. */
#diagnostico { scroll-margin-top: 24px; }

/* "Lo que esto no es": las cinco columnas separadas por una raya vertical.
   Apiladas en teléfono, la raya pasa abajo. */
@media (max-width: 781px) {
  .fsl-cinco > .wp-block-column {
    border-right: 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--paragraph-text, #705F77);
    padding-right: 0 !important;
  }
  .fsl-cinco > .wp-block-column:last-child { border-bottom: 0; }
}