/* AVECTOR — Contacto
   Depende de styles.css: de ahí vienen tokens, base, nav, tipografía, los
   controles de formulario y el pie. Mismas reglas del handoff: border-radius 0,
   sin sombras, jerarquía por filetes de 1px. */

/* Igual que en el reto: el pie se ancla abajo, si no sube y baja según qué tan
   alta sea la pantalla. Y sin snap, que aquí no hay secciones que enganchar. */
.pagina-contacto{
  scroll-snap-type:none;
  min-height:100svh;display:flex;flex-direction:column;
}
.pagina-contacto .pie{flex-shrink:0}

.contacto{
  flex:1 0 auto;
  max-width:760px;margin:0 auto;width:100%;
  padding:calc(var(--nav-alto) + clamp(40px,7vh,80px)) var(--pad-lat) clamp(56px,9vh,110px);
}

/* Las etiquetas mono suben 25% respecto a los 11px del sitio: aquí son
   controles y texto legal, no rótulos decorativos. */
.pagina-contacto .eyebrow{font-size:13.75px}
.contacto__pantalla{animation:aparecer 400ms ease-out}

.contacto__entrada{font-size:17px;line-height:1.6;max-width:58ch;margin-top:22px;color:var(--texto-2)}
.contacto__acciones{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:40px}
.contacto__aviso{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;line-height:1.6;letter-spacing:.09em;
  color:var(--gris-calido);margin-top:40px;max-width:60ch;
}
.contacto__pendiente{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;color:var(--alerta);
}

/* Más ancho que los 440px del reto: aquí hay un área de mensaje y a 440 el
   texto largo queda en una columna incómoda de leer mientras se escribe. */
.formulario--contacto{max-width:560px}

/* El título de la confirmación recibe el foco al llegar; sin esto el contorno
   se dibuja pegado a la línea de texto. */
#enviado-titulo:focus-visible{outline-offset:6px}

/* ---------- Resumen de lo enviado ---------- */

.resumen{margin-top:40px;border-bottom:1px solid var(--filete)}
.resumen__clave{
  font-family:'IBM Plex Mono',monospace;
  font-size:13.75px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris-calido);border-top:1px solid var(--filete);padding-top:20px;
}
.resumen__valor{
  font-size:17px;line-height:1.6;margin:10px 0 20px;
  max-width:58ch;text-wrap:pretty;white-space:pre-wrap;
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion:reduce){
  .contacto__pantalla{animation:none}
}