/* styles.css — estilos propios del sitio.
 *
 * Los colores de marca se definen en dos sitios, conviene mantenerlos sincronizados:
 *   1) assets/js/tema.js  -> colores que Tailwind usa para las clases brand-*
 *   2) :root de este archivo -> colores que usan las clases propias (.btn, .tarjeta...)
 */
:root {
  --brand-50: #F2F7FC;
  --brand-100: #E1EEF8;
  --brand-200: #C2DCF1;
  --brand-300: #A3CAEA;
  --brand-400: #8FB9E0;
  --brand-700: #2F6BA8;
  --brand-800: #204F7E;
  --brand-900: #163A5C;
  --radio: 1rem;
}

html {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Accesibilidad: foco siempre visible y enlace de salto al contenido */
:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; border-radius: 6px; }
.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff;
  color: var(--brand-800); font-weight: 700; padding: .75rem 1rem; border-radius: 0 0 .75rem 0;
}
.salto-contenido:focus { left: 0; }

/* Enlaces */
.enlace { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { color: var(--brand-800); }
.enlace-pie { color: var(--brand-200); text-decoration: none; }
.enlace-pie:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 9999px; border: 2px solid transparent;
  font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primario { background: var(--brand-700); color: #fff; }
.btn-primario:hover { background: var(--brand-800); }
.btn-secundario { background: #fff; color: var(--brand-800); border-color: var(--brand-700); }
.btn-secundario:hover { background: var(--brand-50); }
.btn-claro { background: #fff; color: var(--brand-800); }
.btn-claro:hover { background: var(--brand-50); }

/* Tarjetas */
.tarjeta {
  background: #fff; border: 1px solid var(--brand-100); border-radius: var(--radio);
  box-shadow: 0 14px 34px -28px rgba(22, 58, 92, .65);
}
.tarjeta-enlace { transition: transform .2s ease, border-color .2s ease; }
.tarjeta-enlace:hover { transform: translateY(-3px); border-color: var(--brand-300); }

/* Etiquetas de estado de proyecto */
.etiqueta {
  display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: .25rem .65rem; border-radius: 9999px;
}
.etiqueta-activo { background: #DCEBFA; color: var(--brand-800); }
.etiqueta-finalizado { background: var(--brand-100); color: var(--brand-900); }

/* Avisos de contenido pendiente: desaparecen al completar data/site.json */
.pendiente {
  border: 1px dashed var(--brand-300); background: var(--brand-50); color: var(--brand-800);
  border-radius: .75rem; padding: .7rem 1rem; font-size: .9rem;
}

/* Navegación principal */
.nav-enlace { position: relative; display: inline-block; color: var(--brand-800); font-weight: 500; text-decoration: none; }
.nav-enlace:hover { color: var(--brand-700); }
.nav-enlace[aria-current="page"] { color: var(--brand-700); font-weight: 700; }
.nav-enlace[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor; border-radius: 2px;
}

/* Menú móvil */
#menu-movil[hidden] { display: none; }
#boton-menu[aria-expanded="true"] .icono-abrir { display: none; }
#boton-menu[aria-expanded="false"] .icono-cerrar { display: none; }

/* Redes sociales */
.enlace-red {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 9999px; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .2s ease;
}
.enlace-red:hover { background: rgba(255, 255, 255, .26); }
.enlace-red svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* Formulario */
.campo {
  width: 100%; background: #fff; color: var(--brand-900); border: 1px solid var(--brand-200);
  border-radius: .75rem; padding: .7rem .9rem; font: inherit;
}
.campo::placeholder { color: #7C93A8; }
.campo:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(47, 107, 168, .2); }
.campo[aria-invalid="true"] { border-color: #B3261E; }
.error-campo { color: #B3261E; font-size: .85rem; margin-top: .25rem; }

/* Animación de entrada */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visible { opacity: 1; transform: none; }

/* Anclas: hueco para el encabezado pegajoso */
[id] { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .tarjeta-enlace:hover { transform: none; }
  .btn, .enlace-red { transition: none; }
}

/* Filtros de la página de proyectos */
.filtro { background: #fff; border-color: var(--brand-200); color: var(--brand-800); }
.filtro:hover { background: var(--brand-50); }
.filtro[aria-pressed="true"] { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }

/* Redes sociales sobre fondo claro (página de contacto) */
.enlace-red-claro { background: var(--brand-100); color: var(--brand-700); }
.enlace-red-claro:hover { background: var(--brand-200); color: var(--brand-800); }