/* aulauniversitaria
   Built by Nadia Kaufman from Tomás Iriarte's design specification.
   Modern visual update: Rich aesthetics, Google Font Plus Jakarta Sans,
   ambient glowing gradients, elevated glassmorphic cards, and tactile micro-interactions.
   Accessibility targets preserved: body text 20px minimum, contrast 7:1 or better on
   body copy, touch targets 48px minimum, no hover-only interaction. */

:root{
  --red:#B8142A;
  --red-dark:#8A0B1E;
  --red-soft:#FFF0F3;
  --red-glow:rgba(184,20,42,.18);
  --ink:#161514;
  --ink-soft:#484542;
  --ink-muted:#736E68;
  --line:#E2DDD7;
  --line-hover:#C5BFB8;
  --paper:#FFFFFF;
  --paper-alt:#F9F7F4;
  --focus:#0B5FCC;
  --radius:18px;
  --radius-sm:10px;
  --wrap:1140px;
  --fs:20px;          /* base body size, raised by the A+ control */
  --shadow-sm:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --shadow:0 4px 14px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03);
  --shadow-card:0 4px 18px -2px rgba(22,21,20,.06), 0 2px 6px -1px rgba(22,21,20,.03);
  --shadow-hover:0 18px 36px -6px rgba(184,20,42,.14), 0 8px 18px -2px rgba(22,21,20,.06);
  --shadow-lg:0 14px 34px -4px rgba(22,21,20,.08), 0 4px 12px -2px rgba(22,21,20,.03);
}

html[data-textsize="big"]{ --fs:24px; }

*{box-sizing:border-box}

/* The hidden attribute must always win. */
[hidden]{ display:none !important }
html{ font-size:var(--fs); -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

.wrap{ width:min(var(--wrap), calc(100% - 3rem)); margin-inline:auto }

h1,h2,h3{ line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em }
h1{ font-size:2.4rem; font-weight:800; letter-spacing:-.03em }
h2{ font-size:1.85rem; font-weight:800 }
h3{ font-size:1.18rem; font-weight:700 }
p{ margin:0 0 1rem; max-width:68ch }

a{ color:var(--red-dark); text-underline-offset:.18em; text-decoration-thickness:.09em; transition:color .18s ease }
a:hover{ color:var(--red) }

:focus-visible{ outline:4px solid var(--focus); outline-offset:3px; border-radius:6px }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:1rem 1.5rem; border-radius:0 0 var(--radius) 0
}
.skip:focus{ left:0 }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}

.header-inner{ display:flex; align-items:center; gap:.7rem; padding:.85rem 0; flex-wrap:wrap }

.brand{ display:flex; flex-direction:column; text-decoration:none; flex:0 0 auto; transition:transform .18s ease }
.brand:hover{ transform:scale(1.01) }
.brand-mark{ display:block; height:1.95rem; width:auto }
.brand-tag{
  align-self:flex-end; margin-top:-.15rem; margin-right:.15rem;
  color:var(--red); font-size:.72rem; font-style:italic; font-weight:700; letter-spacing:.02em
}

.site-nav{ display:flex; gap:.25rem; margin-left:auto; flex-wrap:nowrap }
.site-nav a{
  display:inline-flex; align-items:center; min-height:48px; padding:0 .65rem;
  border-radius:12px; color:var(--ink); text-decoration:none; font-weight:700; font-size:.92rem;
  white-space:nowrap; transition:background .18s ease, color .18s ease
}
.site-nav a:hover{ background:var(--paper-alt); color:var(--red) }

.header-tools{ display:flex; gap:.5rem }
.tool{
  min-height:48px; min-width:48px; padding:0 .75rem;
  border:2px solid var(--line); border-radius:12px; background:#fff;
  font:inherit; font-size:.92rem; font-weight:700; color:var(--ink); cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.tool:hover{ border-color:var(--ink); transform:translateY(-1px) }
.tool[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink) }

/* ---------- small-screen menu ---------- */
.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:0 .85rem;
  border:2px solid var(--line); border-radius:12px; background:#fff;
  font:inherit; font-size:.95rem; font-weight:700; color:var(--ink); cursor:pointer;
  transition:all .18s ease;
}
.nav-toggle[hidden]{ display:none }
.nav-toggle:hover{ border-color:var(--ink) }
.nav-toggle-bars{ display:block; width:20px; height:14px; position:relative; flex:0 0 auto }
.nav-toggle-bars span{
  position:absolute; left:0; width:100%; height:2.5px; border-radius:2px;
  background:currentColor; transition:transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars span:nth-child(1){ top:0 }
.nav-toggle-bars span:nth-child(2){ top:5.75px }
.nav-toggle-bars span:nth-child(3){ top:11.5px }
.nav-toggle[aria-expanded="true"]{ background:var(--ink); color:#fff; border-color:var(--ink) }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(5.75px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-5.75px) rotate(-45deg) }
:root[data-theme="dark"] .nav-toggle{ background:#201E1C }
:root[data-theme="dark"] .nav-toggle[aria-expanded="true"]{ background:var(--ink); color:#17110F }

@media (max-width:1220px){
  .header-inner{ gap:.5rem }
  .site-nav{ gap:0 }
  .site-nav a{ padding:0 .4rem; font-size:.87rem }
  .tool{ min-width:46px; padding:0 .5rem; font-size:.88rem }
  .brand-mark{ height:1.85rem }
}
@media (min-width:761px) and (max-width:1120px){
  .site-nav{ order:3; width:100%; margin-left:0; justify-content:flex-start; gap:.15rem }
  .site-nav a{ padding:0 .6rem; font-size:.9rem }
  .header-tools{ margin-left:auto }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(900px 480px at 85% 15%, rgba(184,20,42,.08) 0%, transparent 70%),
    radial-gradient(750px 380px at 15% 85%, rgba(245,175,185,.14) 0%, transparent 60%),
    linear-gradient(180deg, #FAF7F4 0%, #FFFFFF 100%);
  border-bottom:1px solid var(--line);
}
.hero-inner{ padding:4.5rem 0 3.75rem }

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.35rem .95rem; margin-bottom:1.15rem;
  color:var(--red-dark); font-size:.86rem; font-weight:700;
  box-shadow:var(--shadow-sm);
}
.kicker::before{
  content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 3px rgba(184,20,42,.2);
}

.hero h1{ font-size:clamp(2.2rem,4.8vw,3.25rem); max-width:19ch; line-height:1.16 }
.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:60ch; line-height:1.65 }

.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; margin:2rem 0 2.75rem }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 1.8rem; border-radius:14px;
  font:inherit; font-weight:800; font-size:1.02rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-sm{ min-height:48px; padding:0 1.15rem; font-size:.92rem; border-radius:11px }

.btn-primary{
  background:linear-gradient(180deg, #C2162E 0%, #9F0F23 100%);
  color:#fff;
  box-shadow:0 6px 20px -2px rgba(184,20,42,.32);
}
.btn-primary:hover{
  background:linear-gradient(180deg, #D41A34 0%, #8C0B1E 100%);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px -2px rgba(184,20,42,.42);
}

.btn-ghost{
  background:#fff; color:var(--ink); border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{
  background:var(--ink); color:#fff; border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.hero-facts{ display:flex; gap:1.1rem; flex-wrap:wrap; list-style:none; padding:0; margin:0 }
.hero-facts li{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:16px;
  padding:.95rem 1.4rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero-facts li:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:var(--line-hover);
}
.hero-facts strong{ font-size:1.7rem; font-weight:800; color:var(--red); line-height:1.15; letter-spacing:-.02em }
.hero-facts span{ font-size:.88rem; font-weight:600; color:var(--ink-soft); margin-top:.2rem }

/* ---------- sections ---------- */
.section{ padding:3.75rem 0 }
.section-alt{
  background:
    radial-gradient(800px 400px at 90% 90%, rgba(184,20,42,.04) 0%, transparent 60%),
    var(--paper-alt);
  border-block:1px solid var(--line);
}
.section-lead{ color:var(--ink-soft); font-size:1.08rem; margin-bottom:1.85rem }

/* ---------- filters ---------- */
.filters{
  display:flex; gap:1.1rem; flex-wrap:wrap; align-items:end;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:20px;
  padding:1.4rem; box-shadow:var(--shadow-lg); margin-bottom:1.75rem;
}
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:11rem }
.field-grow{ flex:1 1 18rem }
.field label{ font-size:.86rem; font-weight:700; color:var(--ink-soft) }
.field input, .field select{
  min-height:52px; padding:0 1rem; font:inherit; font-size:1rem;
  border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:hover, .field select:hover{ border-color:var(--line-hover) }
.field input:focus, .field select:focus{
  border-color:var(--red);
  box-shadow:0 0 0 4px var(--red-glow);
  outline:none;
}

.count{ font-weight:700; color:var(--ink-soft); margin:0 0 1.35rem }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(21.5rem,1fr)); gap:1.35rem }
.card{
  display:flex; flex-direction:column; gap:.65rem; position:relative;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.45rem; box-shadow:var(--shadow-card);
  transition:transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--red) 0%, #E83A54 100%);
  border-radius:18px 18px 0 0;
}
.card.is-workshop::before{
  background:linear-gradient(90deg, #187747 0%, #30A86B 100%);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:#E9C5CB;
}
.card h3{ margin:0; font-size:1.15rem; font-weight:800; line-height:1.3 }
.card-meta{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.15rem }
.chip{
  display:inline-block; padding:.25rem .7rem; border-radius:999px;
  font-size:.78rem; font-weight:700; background:var(--paper-alt); color:var(--ink-soft); border:1px solid var(--line)
}
.chip-when{ background:var(--red-soft); color:var(--red-dark); border-color:#F5C6CE }
.chip-online{ background:#EBF4FD; color:#0B4E96; border-color:#C8DFF7 }
.chip-new{ background:#E8F5EE; color:#155E3B; border-color:#C4E4D2 }
.card-line{ font-size:.95rem; color:var(--ink-soft); margin:0 }
.card-line strong{ color:var(--ink) }
.card-note{ font-size:.88rem; color:var(--ink-soft); margin:0; padding-top:.4rem; border-top:1px dashed var(--line) }
.card-cta{ margin-top:auto; padding-top:1rem }
.card-cta a{
  display:flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 1.1rem; border-radius:12px;
  background:var(--red-soft); border:2px solid #F5BAC4; color:var(--red-dark);
  font-weight:800; font-size:.96rem; text-decoration:none;
  transition:all .18s ease;
}
.card-cta a:hover{
  background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:0 6px 18px rgba(184,20,42,.32);
}

/* ---------- week ---------- */
.week{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); gap:1.35rem }
.day{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.25rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.day:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.day h3{
  margin:0 0 .85rem; padding-bottom:.55rem;
  border-bottom:2.5px solid var(--red); font-size:1.1rem; font-weight:800;
}
.day ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem }
.day li{ font-size:.92rem; line-height:1.45 }
.day time{
  display:inline-block; font-weight:700; color:var(--red-dark);
  background:var(--red-soft); padding:.15rem .5rem; border-radius:6px;
  min-width:3.8rem; text-align:center; margin-right:.4rem;
}

/* ---------- steps ---------- */
.steps{ list-style:none; counter-reset:s; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1.5rem }
.steps li{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.steps li:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.step-n{
  display:flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:linear-gradient(135deg, #C2162E 0%, #8C0A1F 100%); color:#fff;
  font-weight:800; font-size:1.2rem; margin-bottom:.9rem;
  box-shadow:0 4px 12px rgba(184,20,42,.3);
}
.step-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem }

.notice{
  margin-top:2.25rem; background:#fff;
  border:1px solid var(--line); border-left:6px solid var(--red);
  border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm);
}
.notice h3{ margin-top:0 }
.notice p{ margin-bottom:0 }

/* ---------- info + contact ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1.5rem }
.info{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.5rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.info:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.info h3{ color:var(--red-dark); font-weight:800 }
.info p{ margin-bottom:0; font-size:.98rem; color:var(--ink-soft) }

.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:2.5rem }
.big-contact{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; margin-bottom:1.25rem }
.big-contact a{
  display:inline-flex; align-items:center; min-height:54px; padding:0 1.4rem;
  border-radius:14px; border:2px solid var(--ink); color:var(--ink);
  font-size:1.05rem; font-weight:800; text-decoration:none;
  transition:all .18s ease;
}
.big-contact a:first-child{
  background:linear-gradient(180deg, #C2162E 0%, #9F0F23 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px -2px rgba(184,20,42,.32);
}
.big-contact a:first-child:hover{
  background:linear-gradient(180deg, #D41A34 0%, #8C0B1E 100%);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -2px rgba(184,20,42,.42);
}
.big-contact a:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px) }
.contact-grid p a:not(.big-contact a){ display:inline-block; min-height:44px; line-height:44px }

/* ---------- states ---------- */
.state{
  background:#FFF7F8; border:2px solid #F5BAC4; border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow-sm);
}
.state h3{ margin-top:0; color:var(--red-dark) }
.state.is-loading{ background:var(--paper-alt); border-color:var(--line) }
.state.is-loading h3{ color:var(--ink) }

/* ---------- footer ---------- */
.site-footer{
  background:linear-gradient(180deg, #1C1B19 0%, #121110 100%);
  color:#E8E6E3; padding:3rem 0; margin-top:2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer a{ color:#fff }
.site-footer p{ font-size:.92rem; color:#C9C6C2; max-width:70ch }
.foot-brand{ font-size:1.35rem; font-weight:800; color:#fff; margin-bottom:.35rem; letter-spacing:-.01em }
.foot-tag{ color:#FFA2B2; font-style:italic; font-weight:700; font-size:.88rem }
.datasource{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem; color:#A5A2A0 }

/* ---------- dark theme, opt in only ---------- */
:root[data-theme="dark"]{
  --ink:#F2F0EE; --ink-soft:#C2BFBC; --line:#353330; --line-hover:#4A4744;
  --paper:#141312; --paper-alt:#1C1A18; --red:#FF667C; --red-dark:#FF8999; --red-soft:#2E171B; --focus:#7FB4FF;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow:0 4px 14px rgba(0,0,0,.4);
  --shadow-card:0 4px 18px -2px rgba(0,0,0,.45);
  --shadow-hover:0 18px 36px -6px rgba(0,0,0,.65);
  --shadow-lg:0 14px 34px -4px rgba(0,0,0,.5);
}
:root[data-theme="dark"] body{ background:var(--paper); color:var(--ink) }
:root[data-theme="dark"] .site-header{ background:rgba(20,19,18,.94); border-color:var(--line) }
:root[data-theme="dark"] .hero{
  background:
    radial-gradient(900px 480px at 85% 15%, rgba(255,102,124,.12) 0%, transparent 70%),
    radial-gradient(750px 380px at 15% 85%, rgba(184,20,42,.15) 0%, transparent 60%),
    linear-gradient(180deg, #1A1816 0%, #141312 100%);
}
:root[data-theme="dark"] .kicker{ background:#221F1C; border-color:var(--line); color:var(--red) }
:root[data-theme="dark"] .hero-facts li{ background:rgba(28,26,24,.9); border-color:var(--line) }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .day,
:root[data-theme="dark"] .info,
:root[data-theme="dark"] .steps li,
:root[data-theme="dark"] .filters,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .tool{ background:#1C1A18; border-color:var(--line) }
:root[data-theme="dark"] .card-cta a{ background:#2E171B; border-color:#5E242E; color:var(--red) }
:root[data-theme="dark"] .card-cta a:hover{ background:var(--red); color:#17110F; border-color:var(--red) }
:root[data-theme="dark"] .btn-ghost{ background:#1C1A18; color:var(--ink); border-color:var(--line) }
:root[data-theme="dark"] .btn-primary{ background:var(--red); color:#141110; box-shadow:0 6px 20px -2px rgba(255,102,124,.35) }
:root[data-theme="dark"] .btn-primary:hover{ background:#FF8999; color:#141110 }
:root[data-theme="dark"] .chip{ background:#282522; border-color:var(--line) }
:root[data-theme="dark"] .chip-when{ background:#3A1D22; color:#FFB3BE; border-color:#5A2B33 }
:root[data-theme="dark"] .chip-online{ background:#152A3E; color:#9CC9F5; border-color:#25415C }
:root[data-theme="dark"] .chip-new{ background:#16301F; color:#9BD9B4; border-color:#26492F }
:root[data-theme="dark"] .day time{ background:#3A1D22; color:#FFB3BE }
:root[data-theme="dark"] .state{ background:#2A1A1C; border-color:#5E242E }
:root[data-theme="dark"] .site-footer{ background:#0C0B0A }
:root[data-theme="dark"] .brand-mark{ filter:invert(1) hue-rotate(180deg) saturate(1.4) }

/* ---------- narrow screens ---------- */
@media (max-width:760px){
  .wrap{ width:calc(100% - 2rem) }
  .header-inner{ gap:.5rem; padding:.5rem 0 }
  .brand-mark{ height:1.5rem }
  .brand-tag{ font-size:.6rem; margin-top:-.1rem }
  .site-nav{
    order:4; width:100%; margin-left:0; margin-top:.5rem; padding-top:.5rem;
    flex-direction:column; gap:.25rem; overflow:visible;
    border-top:1px solid var(--line);
  }
  .site-nav[hidden]{ display:none }
  .site-nav a{
    min-height:52px; padding:0 .75rem; font-size:1rem; white-space:normal;
    border-radius:12px; background:var(--paper-alt);
  }
  .nav-toggle{ order:2 }
  .header-tools{ order:3; margin-left:auto }
  .tool{ min-height:44px; min-width:44px; padding:0 .55rem; font-size:.85rem }
  .hero-inner{ padding:2.5rem 0 2.25rem }
  .hero-facts{ gap:.8rem }
  .hero-facts li{ width:calc(50% - .4rem) }
  .btn{ width:100% }
  .btn-sm{ width:auto }
  .cards{ grid-template-columns:1fr }
}

@media print{
  .site-header,.hero-cta,.filters,.header-tools,.skip{ display:none }
  body{ font-size:11pt }
  .card,.day{ break-inside:avoid; box-shadow:none }
}

/* theme button */
.theme-icon{ font-size:1.15rem; line-height:1 }

/* ---------- teachers ---------- */
.teachers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(20.5rem,1fr)); gap:1.35rem }

.teacher{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.45rem; box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease;
}
.teacher:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover) }
.teacher-head{ display:flex; align-items:center; gap:.95rem; margin-bottom:.65rem }
.teacher-head h3{ margin:0; font-size:1.12rem; line-height:1.25; font-weight:800 }

.teacher-photo,
.teacher-initials{
  flex:0 0 auto; width:3.4rem; height:3.4rem; border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px #F2A4B0;
}
.teacher-initials{
  display:flex; align-items:center; justify-content:center;
  background:var(--red-soft); border:none;
  color:var(--red-dark); font-weight:800; font-size:1.1rem; letter-spacing:.02em;
}
.teacher-teaches{ margin:.2rem 0 0; font-size:.88rem; color:var(--red-dark); font-weight:700 }
.teacher-count{ margin:0 0 .6rem; font-size:.82rem; color:var(--ink-soft); font-weight:700 }

.teacher-bio p{ margin:0; font-size:.93rem; line-height:1.55; color:var(--ink-soft) }
.teacher-bio.is-clamped p{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

.teacher-more,
.teacher-link{
  align-self:flex-start; min-height:46px; margin-top:.6rem; padding:0 1rem;
  border:2px solid var(--line); border-radius:11px; background:transparent;
  font:inherit; font-size:.88rem; font-weight:700; color:var(--red-dark); cursor:pointer;
  transition:all .18s ease;
}
.teacher-more:hover,
.teacher-link:hover{ border-color:var(--red); background:var(--red-soft); transform:translateY(-1px) }
.teacher-link{ margin-top:auto }

:root[data-theme="dark"] .teacher{ background:#1C1A18 }
:root[data-theme="dark"] .teacher-photo,
:root[data-theme="dark"] .teacher-initials{ box-shadow:0 0 0 3px #1C1A18, 0 0 0 5px #5E242E }
:root[data-theme="dark"] .teacher-initials{ background:#2E171B }

@media (max-width:760px){ .teachers{ grid-template-columns:1fr } }

/* ---------- holiday notice ---------- */
.holidays{
  background:#FFFBF2; border:1px solid #EEDFBC; border-left:6px solid #C49102;
  border-radius:18px; padding:1.25rem 1.45rem; margin:0 0 1.6rem;
  box-shadow:var(--shadow-sm);
}
.holidays h3{ margin:0 0 .35rem; font-size:1.08rem; color:#7A5B04; font-weight:800 }
.holidays-lead{ margin:0 0 .75rem; font-size:.93rem; color:var(--ink-soft) }
.holidays ul{ list-style:none; margin:0 0 .75rem; padding:0; display:flex; flex-direction:column; gap:.45rem }
.holidays li{ font-size:.98rem; line-height:1.45 }
.holidays li strong{ text-transform:capitalize }
.holidays-name{ color:var(--ink-soft) }
.holidays-count{
  display:inline-block; margin-left:.25rem; padding:.12rem .55rem; border-radius:999px;
  background:#F2E6C6; border:1px solid #E0CB94; color:#6B4E02;
  font-size:.76rem; font-weight:700; white-space:nowrap;
}
.holidays-foot{ margin:0; font-size:.88rem; color:var(--ink-soft) }

:root[data-theme="dark"] .holidays{ background:#241E10; border-color:#4A3D1C; border-left-color:#C79A22 }
:root[data-theme="dark"] .holidays h3{ color:#E8C972 }
:root[data-theme="dark"] .holidays-count{ background:#3A3018; border-color:#5A4A24; color:#E8C972 }

/* ---------- calendar export ---------- */
.card-cal{ display:flex; flex-direction:column; gap:.35rem; margin:.65rem 0 0 }
.card-cal-label{ font-size:.8rem; font-weight:700; color:var(--ink-soft) }
.card-cal-when{ font-size:.78rem; font-weight:700; color:var(--ink); margin-top:.2rem }
.card-cal-pair{ display:flex; gap:.45rem }
.card-cal-btn{
  display:inline-flex; align-items:center; justify-content:center;
  flex:1 1 0; min-height:46px; padding:0 .7rem;
  border:2px solid var(--line); border-radius:10px; background:transparent;
  font:inherit; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-decoration:none; transition:all .18s ease;
}
.card-cal-btn:hover{ border-color:var(--red); color:var(--red-dark); background:var(--red-soft) }
.card-cal-btn[data-go]{ border-color:#C8DFF7; color:#0B4E96; background:#F4F9FD }
.card-cal-btn[data-go]:hover{ border-color:#0B4E96; background:#E5F1FC }
:root[data-theme="dark"] .card-cal-btn[data-go]{ border-color:#25415C; color:#9CC9F5; background:#122131 }
:root[data-theme="dark"] .card-cal-btn[data-go]:hover{ background:#172D43; border-color:#9CC9F5 }

/* ---------- Instagram and social links ---------- */
.tool-ig{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--ink);
}
.tool-ig:hover{ border-color:var(--red); color:var(--red) }
.ig-glyph{ display:block; flex:0 0 auto }

.social{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; margin-right:.9rem;
  color:var(--red-dark); font-weight:700; text-decoration:none;
  transition:color .18s ease;
}
.social span{ text-decoration:underline; text-underline-offset:.18em }
.social:hover{ color:var(--red) }

.foot-social{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin:.75rem 0 0 }
.site-footer .social{ color:#fff }
.site-footer .social:hover{ color:#FFA2B2 }

@media (max-width:760px){
  .social{ margin-right:.6rem }
}

/* ==========================================================================
   LANDING PORTAL & PROMOVER INSTITUTIONAL STYLES
   ========================================================================== */

/* ---------- Portal Split Selector ---------- */
.portal-hero{
  position:relative;
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(27,106,69,.09) 0%, transparent 65%),
    radial-gradient(1000px 500px at 80% 20%, rgba(184,20,42,.09) 0%, transparent 65%),
    linear-gradient(180deg, #F8F6F3 0%, #FFFFFF 100%);
  border-bottom:1px solid var(--line);
  padding:4rem 0 4.5rem;
}
.portal-hero-inner{ text-align:center; max-width:1080px; margin-inline:auto }
.portal-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.35rem 1rem; margin-bottom:1.25rem;
  font-size:.86rem; font-weight:800; color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
}
.portal-title{
  font-size:clamp(2.3rem, 5vw, 3.4rem);
  font-weight:800; line-height:1.15; letter-spacing:-.03em; margin:0 0 .8rem;
}
.portal-lead{
  font-size:1.18rem; color:var(--ink-soft); margin:0 auto 2.75rem;
  max-width:65ch; line-height:1.65;
}

.portal-grid{
  display:grid; grid-template-columns:1fr;
  gap:2rem; margin-top:1.5rem; text-align:left;
}
@media (min-width:768px){
  .portal-grid{
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
}

.portal-card{
  display:flex; flex-direction:column; position:relative;
  background:#fff; border:2px solid var(--line); border-radius:22px;
  padding:2.2rem; box-shadow:var(--shadow-card);
  transition:transform .24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .24s ease, border-color .24s ease;
  overflow:hidden;
}
.portal-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 40px -8px rgba(0,0,0,.12), 0 8px 16px -4px rgba(0,0,0,.04);
}
.portal-card.card-au{ border-top:6px solid var(--red) }
.portal-card.card-au:hover{ border-color:#E8A8B2; border-top-color:var(--red) }

.portal-card.card-promover{ border-top:6px solid #1B6A45 }
.portal-card.card-promover:hover{ border-color:#A3D3BD; border-top-color:#1B6A45 }

.portal-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.25rem .75rem; border-radius:999px; width:fit-content; margin-bottom:1.1rem;
}
.portal-badge.badge-au{ background:var(--red-soft); color:var(--red-dark); border:1px solid #F5C6CE }
.portal-badge.badge-promover{ background:#EEF7F2; color:#125234; border:1px solid #C4E4D3 }

.portal-logo-wrap{
  min-height:75px; display:flex; align-items:center; margin-bottom:1.25rem;
}
.portal-logo-au{ max-height:2.6rem; width:auto; max-width:100% }
.portal-logo-promover{ max-height:3.6rem; width:auto; max-width:100% }

.portal-card h2{ font-size:1.55rem; font-weight:800; margin:0 0 .5rem; line-height:1.25 }
.portal-desc{ font-size:1rem; color:var(--ink-soft); line-height:1.6; margin:0 0 1.35rem }

.portal-highlights{
  display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; padding:0; margin:0 0 1.75rem;
}
.portal-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .75rem; border-radius:999px; background:var(--paper-alt);
  border:1px solid var(--line); font-size:.82rem; font-weight:700; color:var(--ink);
}

.portal-cta{ margin-top:auto }
.portal-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:56px; padding:0 1.5rem; border-radius:14px;
  font:inherit; font-size:1.05rem; font-weight:800; text-decoration:none;
  transition:all .18s ease; cursor:pointer;
}
.portal-btn.btn-au{
  background:linear-gradient(180deg, #C2162E 0%, #9F0F23 100%);
  color:#fff; box-shadow:0 6px 18px -2px rgba(184,20,42,.32);
}
.portal-btn.btn-au:hover{
  background:linear-gradient(180deg, #D41A34 0%, #8C0B1E 100%);
  transform:translateY(-2px); box-shadow:0 10px 24px -2px rgba(184,20,42,.45);
}
.portal-btn.btn-promover{
  background:linear-gradient(180deg, #1B6A45 0%, #114C30 100%);
  color:#fff; box-shadow:0 6px 18px -2px rgba(27,106,69,.32);
}
.portal-btn.btn-promover:hover{
  background:linear-gradient(180deg, #228255 0%, #0C3E26 100%);
  transform:translateY(-2px); box-shadow:0 10px 24px -2px rgba(27,106,69,.45);
}

/* ---------- Institutional Sections (Promover) ---------- */
.inst-section{ padding:4rem 0 }
.inst-header{ max-width:760px; margin-bottom:2.75rem }
.inst-kicker{
  display:inline-block; font-size:.85rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:#1B6A45; margin-bottom:.5rem;
}
.inst-title{ font-size:2.2rem; font-weight:800; line-height:1.2; margin:0 0 .8rem }

/* 4 Pillars Grid */
.pillars-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  gap:1.4rem;
}
.pillar-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pillar-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.pillar-icon{
  display:flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; border-radius:14px;
  background:#EEF7F2; color:#1B6A45; font-size:1.4rem; font-weight:800; margin-bottom:1rem;
}
.pillar-card h3{ font-size:1.2rem; font-weight:800; color:#1B6A45; margin:0 0 .5rem }
.pillar-card p{ font-size:.95rem; color:var(--ink-soft); line-height:1.55; margin:0 }

/* Strategy & Projects Grid */
.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
  gap:1.5rem;
}
.project-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:1.6rem; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.project-card.flagship{
  border:2px solid #F5C6CE; border-left:6px solid var(--red);
}
.project-card h3{ font-size:1.25rem; font-weight:800; margin:0 0 .5rem }
.project-card p{ font-size:.96rem; color:var(--ink-soft); line-height:1.6; margin:0 0 1rem }

/* Team tags */
.team-list{
  display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:1rem 0;
}
.team-chip{
  padding:.35rem .85rem; border-radius:999px; background:#fff;
  border:1px solid var(--line); font-size:.9rem; font-weight:700; color:var(--ink);
  box-shadow:var(--shadow-sm);
}

/* Dark theme overrides for portal and Promover */
:root[data-theme="dark"] .portal-hero{
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(27,106,69,.18) 0%, transparent 65%),
    radial-gradient(1000px 500px at 80% 20%, rgba(255,102,124,.15) 0%, transparent 65%),
    linear-gradient(180deg, #181615 0%, #141312 100%);
}
:root[data-theme="dark"] .portal-card,
:root[data-theme="dark"] .pillar-card,
:root[data-theme="dark"] .project-card{ background:#1C1A18; border-color:var(--line) }
:root[data-theme="dark"] .portal-kicker{ background:#221F1C; border-color:var(--line); color:var(--ink) }
:root[data-theme="dark"] .portal-pill,
:root[data-theme="dark"] .team-chip{ background:#252320; border-color:var(--line); color:var(--ink) }
:root[data-theme="dark"] .portal-badge.badge-promover{ background:#102D1E; color:#78D6A4; border-color:#1E5237 }
:root[data-theme="dark"] .pillar-icon{ background:#102D1E; color:#78D6A4 }
:root[data-theme="dark"] .inst-kicker,
:root[data-theme="dark"] .pillar-card h3{ color:#78D6A4 }
:root[data-theme="dark"] .portal-logo-promover text[fill="#141414"]{ fill:#F2F0EE }