/* Contacto — Alf Álvarez. Se apoya en sistema.css y home.css. */

[hidden] { display: none !important; }

/* Al saltar a #formulario, la barra fija no debe taparlo: margen = alto de la barra + un respiro */
html { scroll-behavior: smooth; }
#formulario { scroll-margin-top: 112px; }
@media (max-width: 860px) { #formulario { scroll-margin-top: 104px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.contacto { max-width: var(--contenido-max); margin-inline: auto; padding: clamp(112px, 16svh, 160px) var(--margen) clamp(96px, 10vw, 140px); }

.contacto__cabeza { display: grid; gap: var(--space-3); max-width: 900px; margin-bottom: clamp(48px, 7vw, 96px); }
.contacto__titulo {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(48px, min(15vw, 22svh), 208px); line-height: .85;
}
.contacto__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--blanco); max-width: 46ch; }

.contacto__cuerpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.contacto__form-wrap { min-width: 0; }

/* Formulario */
.formulario { gap: var(--space-6); }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-3); }
.grupo > legend { padding: 0; margin-bottom: var(--space-3); color: var(--blanco); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rejilla .ancho { grid-column: 1 / -1; }
.alf-campo-grupo { min-width: 0; }
.alf-campo::placeholder { color: #6e6e76; }
textarea.alf-campo { resize: vertical; min-height: 120px; }
select.alf-campo {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffc81e' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px;
}
.alf-campo[aria-invalid="true"] { border-color: var(--magenta); }

/* Motivos como chips: radio real, oculto a la vista */
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip .alf-chip { transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover .alf-chip { border-color: var(--blanco); }
.chip input:checked + .alf-chip { background: var(--amarillo); border-color: var(--amarillo); color: var(--sobre-amarillo); }
.chip input:focus-visible + .alf-chip { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.condicional:not([hidden]) { animation: aparecer .45s var(--curva) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.nota { color: var(--gris); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.nota--pequena { font-size: 14px; }
.campo__error { color: var(--magenta); font-size: 15px; font-weight: 600; }
.si-requerido[hidden] { display: none; }
.envio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.boton-enviar { font-size: 20px; padding: 20px 44px; }
.boton-enviar[disabled] { opacity: .6; cursor: progress; }
.turnstile:empty { display: none; }
.turnstile { min-height: 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Éxito */
.exito { display: grid; gap: var(--space-3); justify-items: start; }
.exito[hidden] { display: none; }
.exito__titulo { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, min(14vw, 20svh), 160px); line-height: .85; }
.exito:focus { outline: none; }

/* Columna lateral */
.contacto__lado { display: grid; gap: var(--space-6); padding-top: var(--space-1); border-top: 3px solid var(--amarillo); padding-block-start: var(--space-4); }
.lado__bloque { display: grid; gap: var(--space-2); justify-items: start; }
.lado__correo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; word-break: break-all; }
.copiar {
  font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blanco); background: transparent; border: 1px solid var(--borde); border-radius: var(--radius-pill);
  padding: 8px 12px; cursor: pointer;
}
.copiar:hover { border-color: var(--amarillo); color: var(--amarillo); }
.copiar:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.barra__nav a[aria-current="page"] { color: var(--amarillo); }

@media (max-width: 860px) {
  .contacto__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .boton-enviar { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .condicional:not([hidden]) { animation: none; }
}