/* ======================================================================
   NUBO — Formulario de contacto
   ----------------------------------------------------------------------
   CSS propio, escrito a mano y legible. NO lo genera Tailwind: este
   archivo ES la fuente, no un compilado. Se hizo así a propósito porque
   en el equipo donde se monta el formulario no hay Node ni el CLI de
   Tailwind, y la alternativa era volver a parchear a mano el styles.css
   minificado — cuanto más código, más frágil. Aquí no hay paso de
   compilación que se pueda olvidar.

   Se carga SOLO en las páginas que llevan formulario (portada y gracias).

   Paleta: la de marca, sin inventar nada.
     Azul Nubo #0E3A5F · Cian Horizonte #4FB6C4 · Verde Ría #2F8F5B
     Grafito #23272B · Bruma #F3F5F6 · Niebla #DCE2E6
   La única adición es un color de alerta, porque la marca no tenía uno
   (ver más abajo).
   ====================================================================== */

:root {
  /* El aviso NO se pinta de rojo: se dibuja con trazo discontinuo.

     Se probaron cuatro tonos (terracota, teja, granate y el rojo del
     propio manual) y ninguno terminaba de encajar, porque el problema
     no era el color concreto: es que la paleta de NUBO no tiene ningún
     cálido, así que cualquier rojo entra como cuerpo extraño por muy
     bien elegido que esté.

     La salida no era buscar un quinto rojo, sino dejar de usar el color
     como señal. En dibujo técnico la línea discontinua significa algo
     que falta o que no está — y este mismo sitio ya la usa con ese
     sentido en el 404, en la vía que se corta. O sea que la marca ya
     tenía un lenguaje para "aquí falta algo"; solo había que aplicarlo.

     Comparado a tamaño real con el rojo: los campos incompletos se
     localizan ANTES, porque una diferencia de forma salta más que una
     de tono, y el campo ya relleno se lee solo como terminado por
     llevar línea continua. Además funciona igual para quien no
     distingue colores, sin depender de nada más.

     --alerta se queda como variable porque el mensaje sí lleva color;
     lo que cambia es que ese color ya es de la paleta. */
  --alerta: #0A2C48;
  --alerta-suave: #F1F4F7;
}

/* ---------------------------------------------------------------- */
/* Tarjeta que contiene el formulario                               */
/* ---------------------------------------------------------------- */
.tarjeta-formulario {
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 2rem 1.75rem 2.25rem;
  /* Sin sombra, la tarjeta era blanco plano sobre azul plano y se leía
     como un recorte pegado encima. Amplia, muy difusa y desplazada hacia
     abajo, para que se asiente en el panel en vez de flotar sobre él.
     El color es azul profundo, no negro: un negro sobre el azul de marca
     ensucia el tono. */
  box-shadow: 0 22px 55px -20px rgba(10, 44, 72, 0.6);
}
@media (min-width: 640px) {
  .tarjeta-formulario { padding: 2.75rem 2.5rem 3rem; }
}
@media (min-width: 1024px) {
  .tarjeta-formulario { padding: 3rem 3rem 3.25rem; }
}

/* Datos de contacto sobre el fondo azul de la sección */
.dato-contacto-etiqueta {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;      /* igual que .kicker, en styles.css */
  text-transform: uppercase;
  color: #9FC4D8;              /* 6,6:1 sobre el azul: cumple AA */
  margin-bottom: 0.5rem;
}
/* Enlaces de correo y domicilio sobre azul. Van con padding vertical
   propio: en móvil son zonas táctiles, no solo texto. */
.dato-contacto-enlace {
  display: inline-block;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 4px;
  padding: 0.5rem 0;
  min-height: 2.75rem;
  transition: text-decoration-color 0.2s ease;
}
.dato-contacto-enlace:hover { text-decoration-color: #4FB6C4; }

/* ---------------------------------------------------------------- */
/* Campos                                                           */
/* ----------------------------------------------------------------
   Campos con LÍNEA, no con caja.

   La versión anterior eran cinco rectángulos grises apilados, cada uno
   con su rótulo en versales: un kit de formulario por defecto pegado
   encima de una página que ya se había resuelto por espacio y
   tipografía. Cinco cajas dentro de una tarjeta blanca, que a su vez
   está sobre el azul, son tres superficies compitiendo.

   Aquí la tarjeta es la única superficie y cada campo es una línea
   sobre la que se escribe — que es exactamente el gesto de rellenar un
   impreso técnico, y encaja con una empresa que habla de expedientes.
   Es la misma decisión que se tomó en el resto de la página: quitar
   bordes y dejar que manden el espacio y la jerarquía de tamaños.

   Sobre la legibilidad del gesto: el rótulo va encima, la banda del
   campo mide 52px y la línea es #C9D1D8, bastante más marcada que la
   niebla de marca — no es un susurro. Y no hay textos de ejemplo
   dentro del campo a propósito: desaparecen al escribir y dejan a
   media frase a quien se distrae. */

/* Nombre y teléfono van en la misma fila en pantallas anchas: son
   campos cortos y así el formulario deja de ser una columna infinita
   de cinco huecos iguales. */
.campo-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.75rem;
}
@media (min-width: 640px) {
  .campo-fila { grid-template-columns: 1fr 1fr; }
}

.campo { margin-bottom: 1.75rem; }

/* Rótulo en caja baja, NO en versales.
   El estilo de versales con letra espaciada es el de las etiquetas de
   sección de toda la web, y cinco seguidas ahí dentro eran justo lo que
   hacía que esto pareciera un impreso de ventanilla. Se reserva ese
   estilo para los rótulos de dato de la columna izquierda (metadatos) y
   aquí se usa un rótulo normal, que es lo que es. */
.campo-etiqueta {
  display: block;
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(35, 39, 43, 0.62);
  margin-bottom: 0.35rem;
  transition: color 0.18s ease;
}
.campo-opcional {
  font-weight: 400;
  color: rgba(35, 39, 43, 0.42);
}
/* El rótulo se tiñe cuando el campo tiene el foco: refuerza dónde
   estás sin añadir ningún elemento nuevo. */
.campo:focus-within .campo-etiqueta,
.motivo-grupo:focus-within legend { color: #0E3A5F; }

.campo-control {
  display: block;
  width: 100%;
  min-height: 3rem;                /* 48px de banda tactil */
  /* Sin relleno lateral: el texto arranca justo donde empieza la línea
     y donde está el rótulo, así que todo el formulario cae sobre el
     mismo eje vertical. */
  padding: 0.5rem 0;
  font-family: Manrope, Arial, sans-serif;
  /* 17px: por encima del rótulo (13px). Lo que la persona escribe pesa
     más que la etiqueta, no al revés — y por encima de 16px iOS no hace
     zoom al enfocar. */
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #23272B;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #C9D1D8;
  border-radius: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.campo-control:hover { border-bottom-color: #8FA0AD; }



textarea.campo-control {
  min-height: 5.25rem;
  line-height: 1.6;
  resize: none;
  overflow-y: hidden;
}
/* Si el JavaScript no corre, el campo no crece solo: entonces si hace
   falta el tirador y una altura de partida mayor. */
.sin-js textarea.campo-control {
  min-height: 8rem;
  resize: vertical;
  overflow-y: auto;
}

/* Estado de error. Se marca por atributo, no por clase, para que el
   estilo y lo que anuncia un lector de pantalla no puedan separarse:
   si se ve marcado, aria-invalid está puesto, y al revés.

   La línea pasa a DISCONTINUA y aparece el mensaje. Nada más: sin
   fondo teñido, sin icono y sin rojo. Con cinco campos fallando a la
   vez, cualquier cosa más gritaba demasiado — y quien se ha dejado un
   campo no necesita una alarma, necesita saber cuál.

   La señal es de forma, no de color, así que funciona igual sin
   distinguir tonos: continuo = relleno, discontinuo = falta. Y el
   mensaje es texto, que es la información de verdad. */
.campo-control[aria-invalid="true"] {
  border-bottom-style: dashed;
  border-bottom-width: 2px;
  border-bottom-color: #0E3A5F;
  box-shadow: none;
}

/* Foco: la línea pasa de 1px gris a 2px azul (el segundo píxel lo pone
   la sombra, para que no se mueva nada de sitio al enfocar) y el rótulo
   se tiñe. Cambia el GROSOR además del color, así que no depende de
   distinguir tonos.

   NI rectángulo NI fondo teñido, que es lo que había antes y quedaba
   mal: en un campo que no tiene caja, cualquier rectángulo al enfocar
   aparece de la nada y se lee como un error de maquetación. Por eso se
   anula también el anillo global de :focus-visible de styles.css, que
   dibujaba justo eso. El indicador es la línea, que es donde está el
   campo. */
.campo-control:focus,
.campo-control:focus-visible {
  outline: none;
  /* Se restituye el trazo continuo a proposito: mientras se escribe en
     el campo, la marca de error sobra -- ya se esta corrigiendo. Al
     salir vuelve a discontinuo si sigue estando mal. Esta regla va
     DESPUES de la de error para ganarle, que tienen la misma
     especificidad. */
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #0E3A5F;
  box-shadow: 0 1px 0 0 #0E3A5F;
}

.campo-error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--alerta);
  font-weight: 400;
}
.campo-error[data-visible="true"] { display: block; }

/* ---------------------------------------------------------------- */
/* Motivo de la consulta — grupo de opciones                        */
/* ---------------------------------------------------------------- */
/* El <fieldset> se deja en display:block. Con display:flex, algunos
   navegadores sacan el <legend> del flujo y el rótulo acaba encima de
   las pastillas — el flex va en el contenedor de dentro. */
.motivo-grupo {
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}
.motivo-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.motivo-grupo legend {
  font-family: Manrope, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(35, 39, 43, 0.62);
  margin-bottom: 0.6rem;
  padding: 0;
  transition: color 0.18s ease;
}
/* El radio real se mantiene enfocable y accesible: se coloca debajo de
   su etiqueta, no se oculta con display:none (eso lo saca del orden de
   tabulación en algunos navegadores). */
.motivo-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.motivo-etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;             /* 44px de zona táctil */
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  /* 400 y no 500: Manrope Medium se descargaba (19 KB) para esta unica
     regla de toda la web. La pastilla ya se distingue por su borde, su
     punto indicador y, al marcarla, por el color -- no necesitaba peso.
     Ver el comentario de las @font-face en input.css. */
  font-weight: 400;
  color: rgba(35, 39, 43, 0.75);
  background: #FFFFFF;
  border: 1px solid #DCE2E6;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.motivo-etiqueta:hover { border-color: #B9C4CC; }
/* Punto indicador a la izquierda.
   Existe por accesibilidad, no por adorno: hasta ahora la opción
   marcada se distinguía SOLO por color (borde cian, sombra cian, texto
   azul), y quien no distinga bien esos tonos no veía cuál estaba
   elegida. Un punto que aparece y desaparece es un cambio de FORMA, que
   es lo que pide la norma para no depender del color.

   Ocupa sitio desde el principio (transparente) para que al marcar no
   se mueva el texto de la pastilla. */
.motivo-etiqueta::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(35, 39, 43, 0.22);
  flex-shrink: 0;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

/* En la selección, contorno fino en el color de acento — nunca un
   relleno sólido oscuro: para una pastilla de este tamaño pesaría
   demasiado y se comería la jerarquía del botón de envío. */
.motivo-radio:checked + .motivo-etiqueta {
  border-color: #4FB6C4;
  box-shadow: inset 0 0 0 1px #4FB6C4;
  color: #0E3A5F;
  background: #FFFFFF;
}
.motivo-radio:checked + .motivo-etiqueta::before {
  background: #4FB6C4;
  box-shadow: inset 0 0 0 1px #4FB6C4;
}
.motivo-radio:focus-visible + .motivo-etiqueta {
  outline: 2px solid #4FB6C4;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Casilla de privacidad                                            */
/* ---------------------------------------------------------------- */
.privacidad-fila {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 2.25rem 0 2rem;
}
.privacidad-casilla {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: #0E3A5F;
  cursor: pointer;
}
.privacidad-texto {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(35, 39, 43, 0.75);
  cursor: pointer;
}
.privacidad-texto a {
  color: #0E3A5F;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #DCE2E6;
  text-underline-offset: 3px;
  /* Zona táctil: el enlace vive dentro de un párrafo pequeño y en móvil
     es de lo más difícil de acertar con el dedo. */
  padding: 0.35rem 0;
  display: inline-block;
}
.privacidad-texto a:hover { text-decoration-color: #0E3A5F; }

/* ---------------------------------------------------------------- */
/* Botón de envío                                                   */
/* ---------------------------------------------------------------- */
.boton-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.375rem;            /* 54px */
  padding: 0.95rem 2.25rem;
  font-family: Manrope, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  background: #0E3A5F;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.boton-enviar:hover { background: #0A2C48; }
.boton-enviar:disabled { opacity: 0.55; cursor: progress; }
@media (min-width: 480px) {
  .boton-enviar { width: auto; }
}

/* La flecha se desplaza un poco al pasar por encima, igual que el
   enlace "Contactar" del hero: el mismo gesto en los dos sitios donde
   se invita a dar el paso. */
.boton-enviar .flecha {
  /* Desaceleración al final. Una curva que acelera hacia el final deja
     sensación de que el movimiento no termina de completarse. */
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.boton-enviar:hover .flecha { transform: translateX(4px); }

/* Nota bajo el boton. No es relleno: responde a la pregunta que se hace
   cualquiera antes de dar su correo a una empresa. Y es verificable —
   dice lo mismo que el punto 5 de la politica de privacidad. */
.nota-envio {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(35, 39, 43, 0.55);
}

/* ---------------------------------------------------------------- */
/* Trampa para bots (honeypot)                                      */
/* ----------------------------------------------------------------
   Ni display:none ni type="hidden": los dos los reconocen los bots que
   valen algo, y se saltan el campo. Se saca de la pantalla, que sigue
   estando en el DOM como un campo normal. aria-hidden y tabindex="-1"
   van en el HTML para que ninguna persona lo encuentre ni tabulando ni
   con lector de pantalla. */
.campo-trampa {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* Confirmación de envío                                            */
/* ----------------------------------------------------------------
   Con presencia real: ocupa el sitio del formulario, con icono y
   contraste alto. Nada de una línea gris pequeña que pase inadvertida
   justo en el momento en que la persona necesita saber si su mensaje
   salió o no. */
.confirmacion {
  display: none;
  text-align: left;
}
.confirmacion[data-visible="true"] {
  /* Con altura mínima y contenido centrado: al sustituir al formulario,
     la tarjeta pasaba de 600px a un muñón de 150 y el salto se comía la
     sensación de que algo había ido bien. Así queda un panel con
     presencia propia en vez de un resto. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 17rem;
  padding: 1rem 0;
  animation: confirmacion-entra 0.4s ease-out forwards;
}
/* Aro, no mancha.
   Un círculo verde macizo era el único bloque de color saturado de todo
   el formulario y desentonaba con una tarjeta resuelta a base de líneas
   finas. Un aro sobre un relleno muy claro dice lo mismo con el mismo
   verde de marca, y mantiene 3,5:1 entre el trazo y su fondo — por
   encima del 3:1 que pide la norma para un gráfico con significado. */
.confirmacion-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.35rem;
  border-radius: 999px;
  background: rgba(47, 143, 91, 0.12);
  box-shadow: inset 0 0 0 1.5px #2F8F5B;
}
/* Versión grande, para la página /gracias.html: allí el icono sostiene
   una pantalla entera, no un hueco dentro de una tarjeta. Va como clase
   y no como style="" en el HTML porque la CSP del sitio es estricta
   (style-src 'self') y bloquea los estilos en línea. */
.confirmacion-icono-grande {
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 2rem;
  /* En /gracias.html el fondo es azul, no blanco: ahí el aro se hace en
     blanco, que es lo que contrasta. */
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.confirmacion-titulo {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0E3A5F;
  margin-bottom: 0.75rem;
}
.confirmacion-texto {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(35, 39, 43, 0.75);
}

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

/* Error devuelto por el servidor (fallo de envío, límite alcanzado...) */
.aviso-servidor {
  display: none;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--alerta);
  background: var(--alerta-suave);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #0A2C48;                  /* azul profundo sobre tinte azul */
}
.aviso-servidor[data-visible="true"] { display: block; }

/* ---------------------------------------------------------------- */
/* Movimiento reducido                                              */
/* ----------------------------------------------------------------
   Atenuar, no apagar. La preferencia pide evitar desplazamiento,
   escala y parallax — no cualquier cambio visual, y menos el único
   aviso de que un formulario se envió de verdad. Así que se quita el
   desplazamiento vertical y se conserva el fundido de opacidad.

   El !important es necesario: styles.css trae una regla universal
   `* { animation-duration: .01ms !important }` que si no mataría esto.
   Al cargarse formulario.css DESPUÉS, con la misma prioridad, gana
   esta. */
@media (prefers-reduced-motion: reduce) {
  .confirmacion[data-visible="true"] {
    animation: confirmacion-entra-suave 0.4s ease-out forwards !important;
  }
  @keyframes confirmacion-entra-suave {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}