/* ==========================================================================
   Componente: contact — CV Galería
   Reglas portadas verbatim desde template/styles.css (regla primordial 2).
   ========================================================================== */

.contact{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--navy);color:#fff;padding:120px 8vw;gap:8vw}
.contact-intro h2{font:65px/1 Georgia,serif;margin:0 0 30px}
.contact-intro>p:not(.eyebrow){font:18px/1.6 Georgia;color:#d6d6dd;max-width:430px}
.contact-meta{display:flex;flex-direction:column;font-size:11px;letter-spacing:.12em;margin-top:90px;color:#a8aab5}
.form-card{background:#fff;color:var(--ink);padding:42px 46px;min-height:590px}
.form-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#777}
.form-head i{display:inline-block;width:45px;height:3px;background:#ddd;margin-left:4px}
.form-head i.active{background:var(--navy)}
.form-card h3{font:34px Georgia,serif;margin:35px 0}
.form-card label,.form-card legend{display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.06em;margin-bottom:18px}
.form-card input,.form-card select{border:0;border-bottom:1px solid #bbb;padding:12px 0;background:transparent;border-radius:0;outline:none}
.form-card input:focus,.form-card select:focus{border-color:var(--navy)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.form-button{width:100%;margin-top:16px}
.form-note{font-size:10px;line-height:1.5;color:#777;margin-top:20px}
.check,.radio{flex-direction:row!important;align-items:center;letter-spacing:0!important}
.check input,.radio input{width:auto}
.form-card fieldset{border:0;padding:0;margin:25px 0}
.form-actions{display:flex;align-items:center;gap:20px}
.back{border:0;background:none}
.success{text-align:center;padding-top:120px}
.success span{display:grid;place-items:center;margin:auto;border:1px solid #b9a377;width:60px;height:60px;border-radius:50%;font-size:25px}
.success p{line-height:1.7;color:#666}
@media(max-width:900px){.contact{grid-template-columns:1fr}.contact-meta{margin-top:40px}}
@media(max-width:560px){.form-card{padding:32px 24px}.form-row{grid-template-columns:1fr}.contact{padding:85px 6vw}.contact-meta{margin-bottom:20px}}
.how-it-works{margin-top:64px;padding-top:26px;border-top:1px solid #41465f}
.how-it-works>span{font-size:9px;letter-spacing:.22em;color:var(--gold)}
.how-it-works ol{list-style:none;padding:0;margin:25px 0 0;display:flex;gap:28px;flex-wrap:wrap}
.how-it-works li{font:18px Georgia,serif}
.how-it-works b{font:9px Arial;color:var(--gold);margin-right:7px}
.response-time{text-align:center;font-size:11px;font-weight:bold;color:#6d5a3c;margin:20px 0 0}
@media(max-width:560px){.how-it-works ol{flex-direction:column;gap:14px}.contact-meta{margin-top:50px}}

/* ==========================================================================
   AGREGADO DEL TEMA (no proviene de template/styles.css)
   Contact Form 7 envuelve cada campo en <span class="wpcf7-form-control-wrap">,
   un nodo que el formulario estático del diseño no tenía. Estas reglas lo
   neutralizan para que los campos hereden exactamente el layout original
   (.form-card label es flex column) y estilan los mensajes propios de CF7.
   ========================================================================== */
.form-card .wpcf7-form-control-wrap{display:block;width:100%}
.form-card input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.form-card select,
.form-card textarea{width:100%}
.form-card .check .wpcf7-form-control-wrap{width:auto}
.form-card .check .wpcf7-list-item{margin:0;display:flex;align-items:center;gap:8px}
.form-card .wpcf7-spinner{display:block;margin:10px auto 0}

/* --------------------------------------------------------------------------
   Mensajes de estado de Contact Form 7

   CF7 los pinta con su paleta de administrador de WordPress —verde #46b450,
   rojo #dc3232, naranja #f56e28, amarillo #ffb900, borde de 2px— que no tiene
   nada que ver con el diseño. Sus reglas son `.wpcf7 form .wpcf7-response-output`
   (0,2,1) y `.wpcf7 form.sent .wpcf7-response-output` (0,3,1), así que hay que
   prefijar con .form-card para ganarles.

   La plantilla no tiene mensajes de error: su único estado de resultado es el
   bloque .success (círculo dorado con un ✓ y texto gris). De ahí salen el
   dorado del éxito (#b9a377, borde del círculo) y su color de texto (#6d5a3c,
   el mismo de .response-time). Para los avisos de validación se usa el navy,
   que es el color instructivo del diseño. El único valor ajeno a la plantilla
   es el rojo apagado de los fallos duros: el diseño no contempla ese estado.
   -------------------------------------------------------------------------- */
.form-card .wpcf7 form .wpcf7-response-output{
  margin:22px 0 0;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:0;
  background:#f7f5f0;
  color:var(--ink);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.04em;
}

/* Enviado — dorado del diseño */
.form-card .wpcf7 form.sent .wpcf7-response-output{
  border-color:#b9a377;
  background:#f8f4ea;
  color:#6d5a3c;
  font-weight:bold;
}

/* Validación: faltan datos o el usuario no aceptó algo. Es una instrucción,
   no un fallo, así que va en el navy del diseño. */
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.unaccepted .wpcf7-response-output,
.form-card .wpcf7 form.payment-required .wpcf7-response-output{
  border-color:var(--navy);
  background:#f4f4f7;
  color:var(--navy);
}

/* Fallos duros: no se pudo enviar, se abortó o se marcó como spam */
.form-card .wpcf7 form.failed .wpcf7-response-output,
.form-card .wpcf7 form.aborted .wpcf7-response-output,
.form-card .wpcf7 form.spam .wpcf7-response-output{
  border-color:#a33a2d;
  background:#faf2f1;
  color:#8a2f24;
}

/* Aviso bajo cada campo con error */
.form-card .wpcf7-not-valid-tip{
  font-size:10px;
  letter-spacing:.02em;
  line-height:1.5;
  color:#a33a2d;
  margin-top:6px;
}

/* El campo con error mantiene el subrayado del diseño, en rojo */
.form-card .wpcf7-form-control.wpcf7-not-valid{
  border-bottom-color:#a33a2d;
}

/* ==========================================================================
   AGREGADO DEL TEMA (no proviene de template/styles.css)

   Devuelve a los controles que emite Contact Form 7 el aspecto que el
   formulario tiene en el diseño. design-system.css trae su propio sistema de
   formularios (pensado para el markup del scaffold) y alcanza a estos
   controles con selectores de elemento o de mayor especificidad que los del
   diseño. Lo que rompía y por qué:

     input,select,textarea{appearance:none}
         El <select> pierde su flecha nativa y el checkbox deja de dibujarse
         (con appearance:none el navegador ya no pinta el control, y el
         `border:0;background:transparent` de .form-card input lo vuelve
         invisible). En la plantilla standalone no pasa porque ahí nadie
         declara appearance.

     select{color:rgba(0,0,0,.7)}
         El <select> deja de heredar el color de .form-card.

     input[type=checkbox]{width:20px;height:20px;…}
         Caja de 20px en vez del tamaño nativo.

     .wpcf7 input[type=submit]{…}
         Le impone el preset de botón del Customizer —mayúsculas, peso 700,
         borde de 2px, min-width 150px— porque (0,2,1) le gana a .button
         (0,1,0); y en :hover lo invierte a fondo crema. El diseño usa un
         <button class="button form-button"> sin estado hover, y CF7 emite un
         <input type="submit">, así que hay que re-declarar ese look.

   Acá solo se reafirma lo que el diseño ya declara, con la especificidad justa.
   ========================================================================== */

/* <select>: flecha nativa y color heredado */
.form-card select{
  -webkit-appearance:auto;
  appearance:auto;
  color:inherit;
}

/* Checkbox / radio: vuelven al control nativo. Con appearance:auto el
   navegador los pinta él mismo e ignora el border/background que .form-card
   input les quita — igual que en la plantilla standalone. */
.form-card input[type="checkbox"],
.form-card input[type="radio"]{
  -webkit-appearance:auto;
  appearance:auto;
  width:auto;
  height:auto;
  margin:0;
}

/* Botón de envío: replica .button + .form-button del diseño */
.form-card .wpcf7 input[type="submit"],
.form-card input[type="submit"]{
  width:100%;
  margin-top:16px;
  padding:17px 25px;
  border:0;
  border-radius:0;
  background:var(--navy);
  color:#fff;
  font:inherit;
  letter-spacing:.02em;
  text-transform:none;
  min-width:0;
  box-shadow:none;
}
.form-card .wpcf7 input[type="submit"]:hover,
.form-card input[type="submit"]:hover{
  background:var(--navy);
  color:#fff;
  box-shadow:none;
  transform:none;
}

/* --------------------------------------------------------------------------
   Interlineado de la tarjeta del formulario

   design-system.css declara `body{line-height:22px}` —un valor FIJO, no
   unitless— y el `body` de la plantilla de diseño no declara line-height, así
   que ese 22px gana y se hereda literal por cada descendiente sin importar su
   tamaño de fuente. En la plantilla standalone el interlineado es `normal`.

   En el resto del sitio casi no se nota porque el diseño fija su propio
   line-height en cada bloque, pero acá sí: las etiquetas son de 11px y los
   inputs heredan la métrica vía `button,input,select{font:inherit}`, así que
   cada campo crecía ~18px (etiqueta 13->22 y caja del input 37->46).

   Se restituye el `normal` que el diseño renderiza, acotado a la tarjeta.
   -------------------------------------------------------------------------- */
.form-card{
  line-height:normal;
}

/* --------------------------------------------------------------------------
   Casilla de consentimiento ([acceptance] de Contact Form 7)

   CF7 la emite envuelta en su propio <label>:
     span.wpcf7-form-control-wrap > span.wpcf7-acceptance > span.wpcf7-list-item
       > label > input + span.wpcf7-list-item-label

   Ese <label> interno lo alcanza `.form-card label`, que es flex en columna:
   dejaría la casilla encima del texto. Acá se pasa a fila, como hace `.check`
   con la casilla "Aún no definida" del diseño.

   La alineación es `flex-start` y no `center` a propósito: el texto lleva un
   enlace y puede ocupar dos líneas, y con `center` la casilla quedaría flotando
   a media altura del párrafo.
   -------------------------------------------------------------------------- */
.form-card .wpcf7-acceptance .wpcf7-list-item{
  margin:0;
}
.form-card .wpcf7-acceptance label{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:9px;
  margin:0;
  font-size:11px;
  letter-spacing:0;
  line-height:1.5;
  cursor:pointer;
}
.form-card .wpcf7-acceptance input[type="checkbox"]{
  flex:0 0 auto;
  margin-top:1px;
}
.form-card .wpcf7-acceptance a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-card .wpcf7-acceptance a:hover{
  color:var(--navy);
}
/* Separación respecto del botón de envío */
.form-card .wpcf7-form-control-wrap[data-name="acepto_privacidad"]{
  margin-top:6px;
}