/* ============================================================
   CRÉCIMA — Contacto
   Medido sobre los frames "Contacto — Desktop 1440",
   "Contacto - tablet 768" y "contacto - mobile 390".
   Header, botones y footer viven en main.css: acá va sólo lo
   propio de esta página.
   ============================================================ */

:root {
  /* El diseño deja 90px de margen a cada lado en 1440:
     1440 − 180 = 1260. */
  --container-cto: 1260px;
  --pad-cto: 90px;

  /* Alto de los campos, igual en las tres rupturas. */
  --campo-alto: 58px;
  --campo-radio: 4px;
  --campo-borde: #180f34;

  /* Separación vertical entre campos. */
  --campo-sep: 27px;

  /* Color con el que la etiqueta flotante tapa el borde del
     campo cuando sube. Es el tono de arranque del degradado del
     panel: en las tres rupturas los campos caen en el tramo
     plano de ese degradado, así que el recorte es exacto.
     Si algún día un campo con etiqueta flotante baja al tramo
     oscuro del panel, este valor deja de coincidir. */
  --cto-notch: #f8f7ff;
}

body.pagina-contacto { background: var(--bg-lavender); }

.container-cto {
  width: 100%;
  max-width: calc(var(--container-cto) + 2 * var(--pad-cto));
  margin-inline: auto;
  padding-inline: var(--pad-cto);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------
   Fondo plano: es el mismo color del body. El panel de abajo se
   apoya encima y por fuera de su radio se ve este lavanda, así
   que no hace falta margen negativo como en otras páginas.
   ------------------------------------------------------------ */
.cto-hero {
  /* Los tres frames no siguen una curva: en tablet el título
     arranca más abajo que en escritorio. Por eso van los tres
     valores escritos, medidos de cada uno, y no un clamp. */
  padding: 154px var(--gutter) 55px;
  text-align: center;
}
.cto-hero__title {
  font-size: clamp(2rem, 1.9rem + 1.49vw, 3.25rem);   /* 32 → 42 → 52 */
  font-weight: 400;
  line-height: 1.19;
  letter-spacing: -0.005em;
  color: var(--text);
  /* El ancho de la caja es lo que decide dónde corta el título.
     En el diseño mide 586 y entra en una línea; en móvil se
     angosta a propósito para que parta en dos. */
  max-width: 586px;
  margin-inline: auto;
}
.cto-hero__lead {
  margin: 10px auto 0;
  max-width: 586px;
  font-size: var(--fs-lead);
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */
.cto-panel {
  /* 60px acá, no el radio de panel general (48): es lo que mide
     el frame de esta página. */
  border-radius: 60px 60px 0 0;
  padding-block: clamp(59px, 6.8vw, 98px) clamp(80px, 12vw, 160px);
  background: #f8f7ff;
}

/* Dos columnas en escritorio. En tablet y móvil el formulario
   sube al primer lugar: es cambiar el `order`, no el marcado. */
.cto-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: clamp(57px, 8vw, 96px);
}
.cto-info { flex: 0 1 407px; order: 1; }
.cto-form { flex: 0 1 690px; order: 2; }

/* ------------------------------------------------------------
   COLUMNA DE DATOS
   ------------------------------------------------------------ */
.cto-info__title {
  font-size: 40px;
  font-weight: 500;
  /* Interlineado más chico que el cuerpo: es lo que trae el
     diseño (caja de 24 con glifos de 40). Los glifos sobresalen
     de la caja, que es justamente lo que hace que la separación
     con el bloque de datos se lea igual que en Figma. */
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--text);
}
/* En escritorio el título arranca un poco más abajo que el
   primer campo del formulario, como en el frame. */
@media (min-width: 1025px) {
  .cto-info__title { margin-top: 11px; }
}
.cto-datos {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 27px;
}
.cto-dato dt {
  font-size: var(--fs-small);
  line-height: 24px;
  color: var(--text);
}
.cto-dato dd {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: var(--text);
}
.cto-dato dd a { transition: color var(--dur-fast) var(--ease-out); }
.cto-dato dd a:hover { color: var(--brand); }
/* La dirección es la única que puede partirse en dos líneas. */
.cto-dato__dir { font-size: var(--fs-lead) !important; }

/* Mapa. El alto lo decide esta regla en cada ruptura y la
   pieza de adentro —el iframe de Google o una imagen— se
   estira para llenarlo. El gris queda de fondo mientras el
   mapa todavía no cargó. */
.cto-mapa {
  margin-top: 26px;
  height: 250px;
  display: grid;
  border-radius: var(--radius-img);
  background: #d9d9d9;
  overflow: hidden;
}
.cto-mapa :is(img, iframe) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.cto-mapa figcaption {
  place-self: center;
  font-size: var(--fs-small);
  color: var(--text);
}

/* ------------------------------------------------------------
   CAMPOS DEL FORMULARIO
   ------------------------------------------------------------
   Un solo componente para los tres estados del diseño: vacío
   (texto guía al medio), escribiendo (borde violeta y etiqueta
   arriba, recortando el borde) y lleno (igual pero en oscuro).
   Todo sale de :placeholder-shown — por eso cada control lleva
   placeholder=" ": sin ese espacio el selector nunca se apaga.
   ------------------------------------------------------------ */
.cto-form__campos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--campo-sep) 14px;
}
.campo {
  position: relative;
  flex: 1 1 calc(50% - 7px);
  min-width: 0;
}
.campo--ancho { flex-basis: 100%; }

.campo__input {
  width: 100%;
  height: var(--campo-alto);
  padding: 0 16px;
  border: 1px solid var(--campo-borde);
  border-radius: var(--campo-radio);
  background: transparent;
  /* En bloque, no en línea: dentro de un <p> un control en
     línea se apoya sobre la línea base y arrastra el hueco del
     descendente debajo. Eso corría el botón unos píxeles. */
  display: block;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* El borde de foco mide 2px en el diseño. Se hace con una
   sombra interior y no engordando el borde, así el campo no se
   corre un píxel al enfocarlo. */
.campo__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.campo__label {
  position: absolute;
  left: 16px;
  top: calc(var(--campo-alto) / 2);
  translate: 0 -50%;
  padding-inline: 4px;
  margin-left: -4px;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  pointer-events: none;
  transition: top var(--dur-fast) var(--ease-out),
              font-size var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
/* Va con :has() y no con "input + label" porque Contact Form 7
   mete un <span> envolviendo cada control: con el hermano
   adyacente la etiqueta dejaría de responder apenas el
   formulario lo sirva el plugin. Preguntando por el ancestro
   funcionan las dos formas con las mismas reglas. */
.campo:has(.campo__input:focus) .campo__label,
.campo:has(.campo__input:not(:placeholder-shown)) .campo__label {
  top: 0;
  font-size: 12px;
  font-weight: 400;
  background: var(--cto-notch);
}
.campo:has(.campo__input:focus) .campo__label { color: var(--brand); }

/* Área de texto: el guía arranca arriba, no centrado. */
.campo--area .campo__input {
  height: 209px;
  padding: 18px 16px;
  line-height: var(--lh-body);
  resize: vertical;
}
.campo--area .campo__label {
  top: 18px;
  translate: 0 0;
}
.campo--area:has(.campo__input:focus) .campo__label,
.campo--area:has(.campo__input:not(:placeholder-shown)) .campo__label {
  top: 0;
  translate: 0 -50%;
}

/* ------------------------------------------------------------
   CASILLAS
   ------------------------------------------------------------ */
.cto-opciones {
  margin: 32px 0 0;
  padding: 0;
  border: 0;
}
.cto-opciones__titulo {
  padding: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.cto-opciones__lista,
.cto-opciones .wpcf7-checkbox {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
.opcion,
.cto-opciones .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--text);
  cursor: pointer;
}
.opcion input,
.cto-opciones .wpcf7-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--brand-light);
  border-radius: 3px;
  background: transparent no-repeat center / 20px 20px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.opcion input:checked,
.cto-opciones .wpcf7-list-item input[type="checkbox"]:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 16.6 5.4 12.45 4 13.85l5.55 5.55 12-12L20.15 6z'/%3E%3C/svg%3E");
}
.opcion input:focus-visible,
.cto-opciones .wpcf7-list-item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* El área de texto y el botón van fuera de la grilla de campos:
   la separación va acá. Selector de descendencia y no de hijo
   directo: con Contact Form 7 el <p> cuelga del <form> del
   plugin y no de .cto-form, y con ">" el margen se perdía. */
.cto-form .campo--area { margin-top: 43px; }
.cto-form__envio { margin-top: 32px; }

/* El botón del diseño mide 235 × 60 con el texto en 16, más
   ancho y más bajo que el .btn--lg del resto del sitio. */
.cto-form__envio .btn {
  width: 235px;
  height: 60px;
  padding: 0;
  justify-content: center;
  font-size: var(--fs-body);
}

/* ------------------------------------------------------------
   CONTACT FORM 7
   ------------------------------------------------------------
   El plugin sirve el formulario con su propio andamiaje: un
   <div> envolviendo el <form>, un <span> por control, y su
   propia estructura para el grupo de casillas. Las reglas de
   arriba ya contemplan las dos formas; acá va sólo lo que hay
   que corregirle al plugin.

   Todo va colgado de `.pagina-contacto` a propósito. Contact
   Form 7 trae su hoja de estilos y varias de sus reglas empatan
   en especificidad con éstas — `.wpcf7 .wpcf7-list-item`,
   `.wpcf7 form .wpcf7-response-output`. En un empate gana la que
   se cargó última, y eso depende del orden en que el plugin y el
   tema encolen. Con la clase del body no hay empate y el orden
   deja de importar.

   Si algún día se saca CF7, este bloque se borra entero y el
   resto del archivo sigue funcionando igual.
   ------------------------------------------------------------ */

/* CF7 envuelve el <form> en un <div>: el que ordena la grilla
   pasa a ser ese contenedor y las dos capas de adentro se
   limitan a ocupar el ancho. */
.pagina-contacto .cto-form .wpcf7,
.pagina-contacto .cto-form .wpcf7-form { width: 100%; }

/* El envoltorio de cada control viene en línea: en bloque, para
   que no arrastre el hueco de la línea base debajo del campo. */
.pagina-contacto .cto-form .wpcf7-form-control-wrap { display: block; }

/* El grupo de casillas ya toma las reglas de .cto-opciones__lista.
   Lo propio es el margen que CF7 le pone a cada opción, que acá
   sobra porque la separación la da el `gap`.
   El tag del formulario tiene que llevar `use_label_element`: sin
   esa opción CF7 no envuelve cada opción en un <label> y las
   casillas se quedan con el aspecto del navegador. */
.pagina-contacto .cto-opciones .wpcf7-list-item {
  margin: 0;
  /* En flex y no en el inline-block que trae el plugin: así el
     <label> de adentro no arma línea de texto y la fila mide lo
     que mide la casilla, igual que en el formulario propio. */
  display: flex;
}
.pagina-contacto .cto-opciones .wpcf7-form-control-wrap { margin-top: 0; }

/* Aviso de campo inválido, debajo del campo. */
.pagina-contacto .cto-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: #c0202a;
}
.pagina-contacto .cto-form .campo__input.wpcf7-not-valid {
  border-color: #c0202a;
  box-shadow: inset 0 0 0 1px #c0202a;
}

/* El mensaje de resultado. El plugin lo trae con borde de 2px
   celeste y márgenes propios; acá se lee como el resto del sitio. */
.pagina-contacto .cto-form .wpcf7 form .wpcf7-response-output {
  margin: var(--space-lg) 0 0;
  padding: 14px 18px;
  border: 1px solid var(--neutral-600);
  border-radius: var(--campo-radio);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text);
}
.pagina-contacto .cto-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: #2e7d4f;
  background: rgba(46, 125, 79, 0.08);
}
.pagina-contacto .cto-form .wpcf7 form.invalid .wpcf7-response-output,
.pagina-contacto .cto-form .wpcf7 form.unaccepted .wpcf7-response-output,
.pagina-contacto .cto-form .wpcf7 form.failed .wpcf7-response-output,
.pagina-contacto .cto-form .wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c0202a;
  background: rgba(192, 32, 42, 0.07);
}

/* El botón de CF7 es un <input type="submit">: hereda .btn, y la
   medida se la pone .cto-form__envio. La rueda de espera al lado
   y no debajo. */
.pagina-contacto .cto-form__envio .wpcf7-spinner { margin: 0 0 0 14px; }

/* ------------------------------------------------------------
   TABLET — 768
   ------------------------------------------------------------
   El formulario pasa arriba y los datos quedan abajo repartidos
   en dos: texto a la izquierda, mapa a la derecha, ocupando el
   alto de las dos filas.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --pad-cto: 40px; }

  .cto-hero { padding: 163px var(--gutter) 73px; }
  .cto-hero__title { max-width: 474px; }
  .cto-hero__lead { margin-top: 26px; }

  .cto-info, .cto-form { flex-basis: 100%; }
  .cto-form { order: 1; }
  .cto-info { order: 2; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .cto-info {
    display: grid;
    grid-template-columns: minmax(0, 358fr) minmax(0, 273fr);
    column-gap: 56px;
    align-items: start;
  }
  .cto-info__title { grid-column: 1; font-size: 32px; }
  .cto-datos      { grid-column: 1; }
  .cto-mapa {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    height: 318px;
  }
}

/* ------------------------------------------------------------
   MÓVIL — 390
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  :root {
    --pad-cto: 16px;
    --campo-sep: 24px;
  }

  .cto-hero { padding: 135px var(--gutter) 44px; }
  .cto-hero__title { font-size: 32px; max-width: 240px; }
  .cto-hero__lead {
    max-width: 232px;
    font-size: var(--fs-body);
    line-height: 20px;
  }

  /* Un campo por línea. */
  .campo { flex-basis: 100%; }

  /* Una opción por línea, como en el frame. */
  .cto-opciones__lista,
  .cto-opciones .wpcf7-checkbox { flex-direction: column; gap: 8px; }

  .cto-form .campo--area { margin-top: 32px; }
  .cto-form__envio { margin-top: 16px; text-align: center; }
  /* La rueda de espera de CF7 va después del botón y, aunque no
     se vea, ocupa lugar: al centrar se centraba el conjunto y el
     botón quedaba 19px corrido. El margen negativo le devuelve a
     la línea el ancho que la rueda le saca (24 de ancho + 14 de
     separación), así el que queda centrado es el botón. */
  .pagina-contacto .cto-form__envio .wpcf7-spinner { margin-right: -38px; }

  .cto-info__title { font-size: 24px; }
  .cto-datos { margin-top: 44px; }

  .cto-mapa { margin-top: 22px; height: 167px; }
}


/* =========================================================
   FORMULARIO GENERAL
========================================================= */

.formulario-contacto {
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
    color: #19162f;
    font-family: inherit;
}

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

.formulario-contacto p {
    margin-top: 0;
}

/* =========================================================
   FILAS Y COLUMNAS
========================================================= */

.fila-formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.campo-completo {
    width: 100%;
}

/* =========================================================
   CAMPOS FLOTANTES
========================================================= */

.campo-flotante {
    position: relative;
    width: 100%;
}

.campo-flotante > p {
    position: relative;
    width: 100%;
    margin: 0;
}

.campo-flotante > p > br {
    display: none;
}

.campo-flotante .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* =========================================================
   INPUTS Y TEXTAREA
========================================================= */

.campo-flotante input[type="text"],
.campo-flotante input[type="email"],
.campo-flotante input[type="tel"],
.campo-flotante textarea {
    display: block;
    width: 100%;
    margin: 0;
    color: #19162f;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    background-color: transparent;
    border: 1px solid #27233f;
    border-radius: 3px;
    outline: none;
    appearance: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.campo-flotante input[type="text"],
.campo-flotante input[type="email"],
.campo-flotante input[type="tel"] {
    height: 60px;
    padding: 20px 15px 10px;
}

.campo-flotante textarea {
    height: 210px;
    min-height: 160px;
    padding: 23px 15px 15px;
    resize: vertical;
}

/* Oculta el placeholder real, pero permite detectar contenido */

.campo-flotante input::placeholder,
.campo-flotante textarea::placeholder {
    color: transparent;
    opacity: 0;
}

/* =========================================================
   LABEL INICIAL
========================================================= */

.campo-flotante > p > label {
    position: absolute;
    top: 30px;
    left: 15px;
    z-index: 2;
    display: block;
    width: auto;
    max-width: calc(100% - 30px);
    margin: 0;
    padding: 0 5px;
    color: #27233f;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    background-color: #f8f7ff;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition:
        top 0.2s ease,
        color 0.2s ease,
        font-size 0.2s ease,
        transform 0.2s ease;
}

/* Posición inicial del label del textarea */

.campo-textarea > p > label {
    top: 22px;
}

/* =========================================================
   ESTADO FOCUS
========================================================= */

.campo-flotante:focus-within input[type="text"],
.campo-flotante:focus-within input[type="email"],
.campo-flotante:focus-within input[type="tel"],
.campo-flotante:focus-within textarea {
    border-color: #7900ff;
    box-shadow: 0 0 0 1px #7900ff;
}

.campo-flotante:focus-within > p > label {
    top: 0;
    color: #7900ff;
    font-size: 12px;
    transform: translateY(-50%);
}

/* =========================================================
   CAMPO COMPLETADO
========================================================= */

.campo-flotante > p:has(input:not(:placeholder-shown)) > label,
.campo-flotante > p:has(textarea:not(:placeholder-shown)) > label,
.campo-flotante > p:has(input:-webkit-autofill) > label {
    top: 0;
    color: #7900ff;
    font-size: 12px;
    transform: translateY(-50%);
}

.campo-flotante > p:has(input:not(:placeholder-shown)) input,
.campo-flotante > p:has(textarea:not(:placeholder-shown)) textarea,
.campo-flotante > p:has(input:-webkit-autofill) input {
    border-color: #7900ff;
}

/* Corrige el color del autocompletado de Chrome */

.campo-flotante input:-webkit-autofill,
.campo-flotante input:-webkit-autofill:hover,
.campo-flotante input:-webkit-autofill:focus {
    -webkit-text-fill-color: #19162f;
    box-shadow: 0 0 0 1000px #f7f6ff inset;
    transition: background-color 9999s ease-out;
}

/* =========================================================
   GRUPO DE SERVICIOS
========================================================= */

.grupo-servicios {
    width: 100%;
}

.grupo-servicios > p:first-child {
    margin: 0 0 16px;
    color: #19162f;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.grupo-servicios > p:last-child {
    margin: 0;
}

.grupo-servicios .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.grupo-servicios .wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
}

.grupo-servicios .wpcf7-list-item {
    margin: 0;
}

.grupo-servicios .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #19162f;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}

/* Checkbox */

.grupo-servicios input[type="checkbox"] {
    position: relative;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    margin: 0;
    background-color: transparent;
    border: 1px solid #9d82ff;
    border-radius: 2px;
    appearance: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.grupo-servicios input[type="checkbox"]:hover {
    border-color: #7900ff;
}

.grupo-servicios input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(121, 0, 255, 0.25);
    outline-offset: 2px;
}

.grupo-servicios input[type="checkbox"]:checked {
    background-color: #7900ff;
    border-color: #7900ff;
}

.grupo-servicios input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}

/* =========================================================
   BOTÓN ENVIAR
========================================================= */

.boton-formulario {
    width: 100%;
}

.boton-formulario > p {
    margin: 0;
}

.pagina-contacto .cto-form input.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0.72em 1.5em;
    color: #ffffff;
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: inherit;
    background: var(--grad-btn);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
}

.pagina-contacto .cto-form input.wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(106, 76, 224, 0.75);
    filter: saturate(1.08);
}

.pagina-contacto .cto-form input.wpcf7-submit:active {
    transform: none;
}

.pagina-contacto .cto-form input.wpcf7-submit:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: 3px;
}

.pagina-contacto .cto-form input.wpcf7-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Spinner de Contact Form 7 */

.boton-formulario .wpcf7-spinner {
    margin: 0 0 0 12px;
}

/* =========================================================
   VALIDACIÓN Y ERRORES
========================================================= */

.campo-flotante .wpcf7-not-valid-tip {
    display: block;
    margin-top: 7px;
    color: #dc3232;
    font-size: 13px;
    line-height: 1.4;
}

.campo-flotante:has(.wpcf7-not-valid)
input[type="text"],
.campo-flotante:has(.wpcf7-not-valid)
input[type="email"],
.campo-flotante:has(.wpcf7-not-valid)
input[type="tel"],
.campo-flotante:has(.wpcf7-not-valid)
textarea {
    border-color: #dc3232;
    box-shadow: 0 0 0 1px #dc3232;
}

.campo-flotante:has(.wpcf7-not-valid) > p > label {
    color: #dc3232;
}

.formulario-contacto + .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    .formulario-contacto {
        gap: 22px;
    }

    .fila-formulario {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .grupo-servicios .wpcf7-checkbox {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
    }

    .campo-flotante textarea {
        height: 180px;
    }

}