/* ══════════════════════════════════════════════════════════════════════════
   contacto.css
   Tarjetas de contacto y formulario
   Procede de styles.css (secciones 13) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 13. CONTACTO Y FORMULARIO ═══════════════ */
.tarjeta-contacto {
  padding: 1.5rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-suave);
}
.tarjeta-contacto__titulo {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tinta);
}

.fila-telefono {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--area-tactil);
  margin-top: 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  background: var(--color-fondo);
  transition: border-color var(--transicion), background var(--transicion);
}
a.fila-telefono:hover {
  border-color: var(--color-acento);
  background: var(--color-acento-tenue);
}
.formulario {
  padding: 1.5rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-suave);
}
@media (min-width: 768px) { .formulario { padding: 2rem; } }

.campo { display: flex; flex-direction: column; }

.etiqueta {
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-tinta);
}

.entrada {
  width: 100%;
  min-height: var(--area-tactil);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: 10px;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: inherit;
  font-size: 1rem;      /* 16px evita el zoom automático en iOS */
  line-height: 1.5;
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.entrada::placeholder { color: #8C8175; }   /* 4,6:1 sobre el fondo hueso ✔ */
.entrada:hover { border-color: var(--color-acento); }
.entrada:focus {
  outline: none;
  background: var(--color-superficie);
  border-color: var(--color-acento-oscuro);
  box-shadow: 0 0 0 3px rgba(201, 146, 47, 0.28);
}
.entrada[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
textarea.entrada { resize: vertical; min-height: 8rem; }

/* La flecha nativa del select no se controla por CSS: se sustituye. */
select.entrada {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238A5E14'%3E%3Cpath fill-rule='evenodd' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.25rem;
}
select.entrada option { background: var(--color-superficie); color: var(--color-texto); }

.contador-caracteres { float: right; color: var(--color-texto-suave); }

.mensaje-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-error);
}
.mensaje-error::before { content: '⚠'; }

.casilla {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-texto-suave);
  cursor: pointer;
}
/* 1.5rem = 24px: mínimo de WCAG 2.1 AA (criterio 2.5.8, tamaño de objetivo).
   Además la etiqueta completa es clicable, así que el área real es mayor. */
.casilla input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  accent-color: var(--color-acento-oscuro);
  cursor: pointer;
}

/* Campo trampa anti-spam: fuera de pantalla, nunca visible ni enfocable. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.boton-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  background: var(--color-acento);
  color: var(--color-tinta);          /* 5,5:1 sobre el dorado ✔ */
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 26px -16px rgba(201, 146, 47, 0.9);
  transition: background var(--transicion), transform var(--transicion);
}
@media (min-width: 640px) { .boton-enviar { width: auto; } }
.boton-enviar:hover { background: var(--color-acento-medio); color: #FFFFFF; }
.boton-enviar:active { transform: scale(0.99); }
.boton-enviar[disabled] { opacity: 0.65; cursor: progress; }

.boton-enviar__cargando {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(42, 38, 34, 0.3);
  border-top-color: var(--color-tinta);
  border-radius: 50%;
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.estado-formulario {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
}
.estado-formulario--ok {
  border-color: rgba(15, 124, 60, 0.5);
  background: rgba(15, 124, 60, 0.09);
}
.estado-formulario--error {
  border-color: rgba(179, 38, 30, 0.45);
  background: rgba(179, 38, 30, 0.07);
}
.estado-formulario a { color: var(--color-acento-oscuro); text-decoration: underline; }