/* =========================================================
   AUCCA · Hoja de Estilos principal (style.css)
   Coherente, minimalista y accesible
   ========================================================= */

/* ---------------------------
   1) Variables y Reset básico
   --------------------------- */
:root {
  /* Paleta AUCCA */
  --green-1: #7ADAA5;        /* borde/acento suave */
  --green-2: #1D7A58;        /* acento principal */
  --green-3: #0E4F3A;        /* acento oscuro */
  --mint-soft: #EAF7F1;      /* fondos tenues */
  --sand: #F4EFE6;           /* bloques templados */
  --ink: #112E4D;            /* texto principal */
  --ink-2: #2C3E50;          /* texto secundario */
  --muted: #6B7B79;          /* texto suave */
  --bg: #FFFFFF;             /* fondo base */
  --bg-alt: #F7FAF8;         /* fondo alterno */
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --maxw: 1080px;
  --r: 16px;
  --r-lg: 20px;
  --gap: 1rem;

  /* Header */
  --header-solid: #ffffff; /* fondo sólido del header */
  --header-grad-top: #ffffff; 
  --header-grad-bot: #F5FBF7; /* leve tinte verdoso para armonía */
  --header-border: rgba(122,218,165,.65);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-alt);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------
   2) Layout
   --------------------------- */
.container,
.page-main {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem;
}
.page-main { padding: 1.25rem 1rem 2.5rem; }
.section { margin: 2rem 0; }

/* Tarjetas */
.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.glassy {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(122,218,165,.25);
}

/* Títulos */
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .6rem; }
h1 { font-size: clamp(1.8rem, 2.2vw + 1.2rem, 2.4rem); }
h2 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.8rem); }
h3 { font-size: 1.2rem; color: var(--green-2); }
.section-lead { color: var(--muted); margin: .25rem 0 1rem; }

/* ---------------------------
   3) Header y Navegación
   --------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  /* Fondo SÓLIDO y armónico (deja de ser translúcido) */
  background: linear-gradient(180deg, var(--header-grad-top) 0%, var(--header-grad-bot) 100%);
  border-bottom: 2px solid var(--header-border);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Si de verdad quisieras el efecto glassy en el header, descomenta: */
/*
.site-header.glassy {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
*/

.site-header .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .6rem 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand .logo { width: 44px; height: auto; }
.brand .subtitle { color: var(--green-2); font-size: .92rem; }

.menu-toggle {
  border: 0; background: transparent; color: var(--ink);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
  padding: .25rem .4rem; border-radius: 10px;
}
.menu-toggle:hover { background: rgba(0,0,0,.03); }
.menu-toggle:focus-visible { outline: 2px solid var(--green-1); }

/* NAV pills */
.top-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-self: end;
}
.top-nav a {
  display: inline-block;
  padding: .44rem .82rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ink);
  background: rgba(26, 127, 89, .06); /* leve tinte para armonía sobre fondo claro */
  font-weight: 600;
}
.top-nav a:hover { background: rgba(26,127,89,.12); text-decoration: none; }
.top-nav a.active {
  background: var(--green-2); 
  color: #fff; 
  border-color: var(--green-2);
  box-shadow: 0 6px 12px rgba(29,122,88,.18);
}
.top-nav a.btn { background: var(--green-2); color: #fff; box-shadow: 0 6px 14px rgba(29,122,88,.18); }
.top-nav a.btn.subtle { background: transparent; color: var(--green-2); border: 1px solid var(--green-1); box-shadow: none; }

/* Navegación responsive */
.hidden { display: none; }  /* ¡sin !important! */

@media (max-width: 920px) {
  .site-header .header-inner { grid-template-columns: auto 1fr auto; }
  .menu-toggle { display: inline-block; }
  .top-nav {
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: calc(56px + 6px); /* bajo el header */
    margin: 0 auto;
    width: min(92%, var(--maxw));
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    box-shadow: 0 16px 28px rgba(0,0,0,.14);
    padding: .6rem;
  }
  .top-nav.hidden { display: none; }
  .top-nav a {
    display: block; margin: .25rem 0;
    background: transparent; border: 1px solid transparent; color: var(--ink);
  }
  .top-nav a.active { background: var(--mint-soft); color: var(--green-3); border-color: var(--green-1); box-shadow: none; }
}

/* En escritorio el menú siempre visible y alineado a la derecha */
@media (min-width: 921px) {
  .menu-toggle { display: none !important; }
  .top-nav { display: flex !important; }
  .top-nav.hidden { display: flex !important; }
}

/* ---------------------------
   4) Botones
   --------------------------- */
.btn {
  display: inline-block;
  background: var(--green-2);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 6px 14px rgba(29,122,88,.18);
  transition: transform .04s ease, box-shadow .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.small { padding: .45rem .8rem; font-size: .95rem; }
.btn.tiny  { padding: .25rem .6rem; font-size: .85rem; }
.btn.ghost { background: transparent; color: var(--green-2); border: 2px solid var(--green-1); box-shadow: none; }
.btn.subtle { background: transparent; color: var(--green-2); border: 1px solid var(--green-1); box-shadow: none; }
.btn[aria-disabled="true"], .btn.disabled { opacity: .7; cursor: not-allowed; filter: grayscale(20%); }

/* ---------------------------
   5) Listas, figuras, utilidades
   --------------------------- */
ul, ol { padding-left: 1.1rem; }
figure { margin: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.fade-in { animation: fade .35s ease-out both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.center { text-align: center; }

/* ---------------------------
   6) Instagram Embed
   --------------------------- */
.insta-embed {
  display: flex; justify-content: center;
  margin: 1rem auto 1.25rem; max-width: 640px; width: 100%;
}
.insta-embed .instagram-media {
  background: #fff; border: 0 !important; border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  margin: 0 auto !important; max-width: 540px !important; width: 100% !important; overflow: hidden;
}
.insta-embed iframe { border-radius: 12px !important; }
.insta-fallback { text-align: center; font-size: .95rem; color: #4b6b4f; margin-top: .5rem; }
@media (prefers-color-scheme: dark) {
  .insta-embed .instagram-media { background: #111; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  .insta-fallback { color: #c8d6c1; }
}

/* ---------------------------
   7) Programa de Talleres + Recursos
   --------------------------- */
.workshops {
  counter-reset: w;
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid; gap: 1.4rem;
}
.workshop {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(122,218,165,.25);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.2rem .9rem;
}
.workshop-head { display: grid; gap: .35rem; margin-bottom: .6rem; }
.workshop-head > strong { font-size: 1.1rem; color: var(--green-2); }
.w-date { font-size: .95rem; color: #4b6b4f; }
.w-desc { margin: .2rem 0 0; color: var(--ink-2); }

/* Lista de recursos */
.resource-list {
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: grid; gap: .6rem;
}
.resource-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .8rem; background: var(--mint-soft);
  border: 1px solid rgba(35,155,167,.15); border-radius: 12px;
  padding: .8rem .9rem;
}
.resource-item.pending { opacity: .65; }

.resource-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 28px; padding: 0 .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: #fff; user-select: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.resource-chip.pdf  { background: #E74C3C; }
.resource-chip.pptx { background: #2E86C1; }
.resource-chip.doc  { background: #5E60CE; }
.resource-chip.xls  { background: #1B9C85; }

.resource-title { color: var(--green-2); font-weight: 600; line-height: 1.35; }
.resource-actions { display: inline-flex; gap: .4rem; align-items: center; }

/* Responsive recursos */
@media (max-width: 720px) {
  .resource-item { grid-template-columns: 1fr; gap: .5rem; }
  .resource-actions { justify-content: flex-start; }
}

/* ---------------------------
   8) Galería, Footer
   --------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.gallery figure { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: 12px; overflow:hidden; box-shadow: var(--shadow); }
.gallery figcaption { padding: .45rem .6rem; color: var(--muted); font-size: .95rem; }

.site-footer {
  background: linear-gradient(180deg, #F8FBFA 0%, #FFFFFF 100%);
  border-top: 2px solid var(--header-border);
  padding: 1rem; margin-top: 2rem;
}
.site-footer .footer-row {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
}

/* ---------------------------
   9) Accesibilidad & Dark mode
   --------------------------- */
:focus-visible { outline: 2px solid var(--green-1); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1110; --bg-alt: #0B0F0E; --ink: #E8F5F0; --ink-2: #CFE3DC;
    --muted: #9BB0A9; --sand: #19201D; --shadow: 0 10px 28px rgba(0,0,0,.35);
    --header-grad-top: #141C1A; --header-grad-bot: #101614; --header-border: rgba(122,218,165,.28);
  }
  .card, .glassy { background: rgba(20,28,26,.6); border-color: rgba(122,218,165,.18); }
  .top-nav a { color: #E6F4EE; background: rgba(255,255,255,.04); }
  .top-nav a:hover { background: rgba(255,255,255,.08); }
  .btn { box-shadow: 0 8px 18px rgba(0,0,0,.35); }
}