/**
 * ============================================
 * CONTACTO-CUSTOM.CSS
 * ============================================
 * Estilos específicos para la página de contacto (contacto.html)
 * Incluye: tipografía, correcciones de autocompletado en modo oscuro
 */

/* ============================================
   TIPOGRAFÍA
   ============================================ */
body { 
  font-family: 'Noto Sans', sans-serif; 
}

/* Títulos: Noto Serif Display Thin (100) en toda la web */
.font-serif { 
  font-family: 'Noto Serif Display', serif; 
  font-weight: 100; 
}

/* ============================================
   CORRECCIONES DE AUTOCOMPLETADO (MODO OSCURO)
   ============================================ */
/* Evitar que los inputs Nombre y Correo se pongan blancos con autocompletado o al escribir (modo oscuro).
   Los navegadores aplican fondo claro por defecto a :-webkit-autofill; lo anulamos con inset box-shadow. */
html.dark #nombre-contacto:-webkit-autofill,
html.dark #nombre-contacto:-webkit-autofill:hover,
html.dark #nombre-contacto:-webkit-autofill:focus,
html.dark #nombre-contacto:-webkit-autofill:active,
html.dark #correo-contacto:-webkit-autofill,
html.dark #correo-contacto:-webkit-autofill:hover,
html.dark #correo-contacto:-webkit-autofill:focus,
html.dark #correo-contacto:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px var(--gray-dark) inset !important;
  box-shadow: 0 0 0 100px var(--gray-dark) inset !important;
  -webkit-text-fill-color: #f3f4f6 !important;
  caret-color: #f3f4f6;
  border-color: var(--gray-dark);
}

html.dark #nombre-contacto,
html.dark #correo-contacto {
  background-color: var(--gray-dark) !important;
}