/* Contacto (Halo). Lo común vive en paginas.css; aquí: teléfonos grandes, oficina, ubicación con mapa y formulario sobre noche.
   Nada de esta hoja oculta ni mueve teléfonos, botones, .ir ni campos: se ven siempre. */

/* Cabecera más baja: los teléfonos tienen que verse en el primer pliegue del celular */
.cab-pag { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem); }
.cab-pag .baranda { margin-top: 1rem; }
.titulo-seccion--media { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }

/* Emergencias: los dos celulares muy grandes, el principal relleno de oro tenue */
.seccion--emergencia { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(7, 26, 69, .85), rgba(5, 11, 31, 0)); }
.emergencia { align-items: center; }
.emergencia p { color: var(--texto-suave); }
.emergencia__lista { display: grid; gap: 1rem; }
.emergencia__nota { margin-top: .4rem; font-size: .9375rem; color: var(--oro-halo) !important; }
.telefono-grande { display: flex; align-items: center; min-height: 4.5rem; padding: .6rem min(1.25rem, 4vw); border: 1.5px solid var(--oro-halo); border-radius: 6px; background: rgba(7, 26, 69, .55); color: var(--marfil);
  font-size: min(clamp(1.9rem, 1rem + 4.8vw, 2.6rem), 10.5vw); font-weight: 600; letter-spacing: .01em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
  box-shadow: 0 0 40px rgba(226, 201, 143, .08); transition: background-color .15s, color .15s; }
.emergencia__lista > li:first-child .telefono-grande { background: var(--oro-halo); color: var(--fondo); box-shadow: 0 0 60px rgba(226, 201, 143, .22); }
@media (hover: hover) and (pointer: fine) {
  .telefono-grande:hover { background: var(--marfil); color: var(--fondo); }
}

/* Oficina y correo */
.fijos { display: grid; gap: .25rem; }
.telefono-medio { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: min(1.5rem, 8.5vw); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--marfil); text-decoration-color: var(--oro-halo); }
.correo { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.2rem; font-weight: 600; overflow-wrap: anywhere; color: var(--marfil); text-decoration-color: var(--oro-halo); }
#h-oficina ~ p, #h-correo ~ p { color: var(--texto-suave); }
#h-oficina ~ p.x, .seccion--linea .dividido > .flujo > p:not(:has(a)) { color: var(--texto-suave); }

/* Dirección y mapa: el primer botón de .ir en estilo primario; el mapa lleva su marco dorado (halo.css) */
.ubicacion { align-items: center; }
.ubicacion address { font-style: normal; color: var(--marfil); font-size: 1.25rem; line-height: 1.4; }
.ubicacion .flujo > p { color: var(--texto-suave); }
.ubicacion .ir__btn:first-child { background: var(--oro-halo); border-color: var(--oro-halo); color: var(--fondo); }
@media (hover: hover) and (pointer: fine) { .ubicacion .ir__btn:first-child:hover { background: #fff; border-color: #fff; } }
.ubicacion .mapa { aspect-ratio: 4 / 3; }
.mapa__enlace { margin-top: 1.1rem; }

/* Formulario sobre noche. Controles oscuros con borde de oro (≥ 3:1), texto marfil, foco con aro de oro, errores en rojo claro */
form[data-form-whatsapp] { --error: #FF9E9E; color-scheme: dark; padding: clamp(1.25rem, 3vw, 2.25rem); background: rgba(7, 26, 69, .5); border: 1px solid rgba(226, 201, 143, .38); border-radius: 6px; }
.formulario__aviso { margin-bottom: 1.75rem; padding: 1rem 1.15rem; background: rgba(7, 26, 69, .5); border-left: 3px solid var(--oro-halo); border-radius: 0 6px 6px 0; color: var(--texto); }
.campo__etiqueta { color: var(--marfil); font-size: 1.05rem; }
.campo__ayuda { color: var(--texto-suave); }
.campo__control { background: #0A1536; color: var(--marfil); border: 1.5px solid #A8996F; border-radius: 4px; }
.campo__control option { background: #0A1536; color: var(--marfil); }
.campo__control option:disabled { color: #9AA6C4; }
@media (hover: hover) and (pointer: fine) { .campo__control:hover { border-color: var(--oro-halo); } }
.campo__control:focus-visible { outline: 2px solid var(--oro-halo); outline-offset: 2px; border-color: var(--oro-halo); background: #0D1C45; }
.campo--error .campo__control { border-color: var(--error); border-width: 2px; }
.campo__error { color: var(--error); }
.resumen-errores { background: rgba(255, 158, 158, .08); border: 2px solid var(--error); color: var(--error); }
.resumen-errores a { color: var(--error); }
.formulario__nota { margin-top: 1.25rem; font-size: .9375rem; color: var(--texto-suave); }
.formulario__nota a { font-weight: 600; }

/* M-1 (auditoría 1): en celulares bajos (≤ 700 px de alto) los dos celulares y WhatsApp quedan por encima de la barra fija sin hacer scroll.
   Solo compacta espacios y tamaños; ni los números ni el orden cambian. */
@media (max-width: 899px) and (max-height: 700px) {
  .cab-pag { padding-block: .5rem .25rem; }
  .cab-pag__titulo { font-size: 2.1rem; }
  .cab-pag .baranda { margin-top: .4rem; }
  .seccion--emergencia { padding-block: .9rem 1.5rem; }
  .seccion--emergencia .titulo-seccion { font-size: 1.55rem; }
  .emergencia { gap: .75rem; }
  .emergencia .flujo { --sep: .5rem; }
  .emergencia p { font-size: 1rem; line-height: 1.4; }
  .emergencia__lista { gap: .5rem; }
  .emergencia__nota { margin-top: .15rem; font-size: .875rem; }
  .telefono-grande { min-height: 3.25rem; padding-block: .3rem; font-size: min(1.9rem, 9.5vw); }
}

/* Cabecera con foto: arco pequeño para que los celulares sigan en el primer pliegue de escritorio (la ruta urgente manda sobre la foto) */
@media (min-width: 900px) {
  .cab-pag--foto { --col: 13rem; }
  /* H-3 (auditoría 2): anillos reducidos (≈ 52 %) para que quepan enteros en la cabecera; el centrado lo da --col en paginas.css */
  .cab-pag__anillos { --anillos-d: 14.5rem; }
}