/* Estilos de la pagina de contacto.
   Van en un fichero PROPIO y no en estilo.css a proposito (18-09-2026):
   la CDN de Hostinger tenia cacheada una copia de estilo.css de dos dias
   antes, servia esa version al navegador —y solo en la variante
   comprimida, asi que curl decia que todo estaba bien— e ignoraba el
   ?v= de la URL. Un fichero con nombre nuevo no puede estar cacheado. */
/* ── Contacto ──────────────────────────────────────────────────────────────
   Nada de aquí cambia el resto del sitio: todo cuelga de .formulario, .acuse
   o .boton, que solo existen en la página de contacto. */

.boton{
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--acento);
  border-radius: 10px;
  background: var(--acento);
  color: #06231d;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: filter .15s ease;
}
.boton:hover{ filter: brightness(1.08); }
/* Un foco visible de verdad: quien navega con el teclado tiene que ver dónde
   está, y el contorno del navegador se pierde sobre un fondo oscuro. */
.boton:focus-visible,
.formulario input:focus-visible,
.formulario textarea:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.formulario{ max-width: 620px; margin-top: 22px; }

.campo{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }

.campo label{ font-weight: 600; font-size: .92rem; }

.obligatorio{ color: var(--acento); }

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea{
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--borde);
  border-radius: 9px;
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-size: .95rem;
}
.formulario textarea{ resize: vertical; min-height: 150px; line-height: 1.55; }

.formulario input[aria-invalid="true"],
.formulario textarea[aria-invalid="true"]{ border-color: var(--d-fury); }

.error{ color: var(--d-fury); font-size: .84rem; }

.contador{ color: var(--apagado); font-size: .8rem; }

.aviso-error{
  margin: 18px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--d-fury);
  border-radius: 9px;
  background: rgba(255,107,107,.09);
  font-size: .9rem;
}

.consentimiento label{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 500;
  line-height: 1.5;
}
.consentimiento input{ margin-top: 3px; flex: none; }
.letra-pequena{ color: var(--apagado); font-size: .82rem; line-height: 1.6; }

/* La trampa para robots. `display:none` la saltan algunos, así que se saca de
   la pantalla en vez de ocultarla. */
.trampa{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.acuse{
  margin-top: 26px;
  padding: 26px 28px;
  border: 1px solid var(--acento);
  border-radius: 14px;
  background: var(--panel-alto);
}
.acuse h2{ margin-top: 0; }
.acuse .volver{ margin-bottom: 0; margin-top: 22px; }