:root{
  --ink:#18202a;
  --muted:#6f7480;
  --paper:#f6f3ec;
  --white:#fff;
  --line:#dfdcd3;
  --red:#ef473d;
  --blue:#2768b0;
  --yellow:#efb532;
  --green:#3f8a67;
  --orange:#d97b42;
  --violet:#7662a4;
  --shadow:0 18px 44px rgba(30,35,43,.10)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased
}

.container{
  width:min(1280px,92%);
  margin:auto
}

/* HEADER */

header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20
}

.top{
  height:76px;
  display:flex;
  align-items:center;
  gap:46px
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  min-width:210px
}

.brand b{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:var(--ink);
  color:#fff;
  font-size:13px;
  position:relative;
  overflow:hidden
}

.brand b:after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(
    90deg,
    var(--red) 0 25%,
    var(--yellow) 25% 50%,
    var(--blue) 50% 75%,
    var(--green) 75%
  )
}

.brand span{
  display:flex;
  flex-direction:column
}

.brand strong{
  font-size:16px
}

.brand small{
  color:var(--muted);
  margin-top:2px;
  font-size:10px;
  letter-spacing:.5px;
  text-transform:uppercase
}

.top nav{
  display:flex;
  gap:30px;
  margin-right:auto
}

.top nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:11px;
  font-weight:900;
  letter-spacing:.55px;
  text-transform:uppercase
}

.top nav a:hover{
  color:var(--red)
}

.suggest{
  color:var(--ink);
  text-decoration:none;
  padding:10px 0;
  border-bottom:2px solid var(--red);
  font-weight:900;
  font-size:11px;
  letter-spacing:.55px;
  text-transform:uppercase
}

.suggest span{
  color:var(--red);
  margin-left:5px
}

/* HERO */

.hero{
  background:#fff;
  padding:24px 0 20px;
  border-bottom:1px solid var(--line)
}

.hero-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:34px;
  align-items:center;
  min-height:300px
}

.hero-copy{
  padding:8px 0;
  position:relative;
  z-index:5
}

.eyebrow{
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:900;
  color:var(--red)
}

.eyebrow.blue{
  color:var(--blue)
}

h1{
  font-size:clamp(42px,4.1vw,60px);
  line-height:.97;
  letter-spacing:-3.2px;
  margin:9px 0 13px;
  max-width:600px
}

h1 em{
  font-style:normal;
  color:var(--red)
}

.hero-lead{
  font-size:14px;
  color:var(--muted);
  line-height:1.45;
  max-width:540px;
  margin:0
}

.hero-stats{
  display:flex;
  gap:12px;
  margin-top:16px
}

.hero-stats div{
  display:flex;
  align-items:center;
  gap:11px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(30,35,43,.05);
  padding:9px 13px;
  min-width:150px
}

.hero-stats strong{
  font-size:20px;
  letter-spacing:-1px;
  color:var(--ink)
}

.hero-stats span{
  font-size:10px;
  color:var(--muted);
  line-height:1.25
}

/* HERO VISUAL */

.hero-media{
  position:relative;
  height:290px;
  overflow:visible;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center
}

.color-ribbons{
  position:absolute;
  inset:-15px -12px;
  z-index:0;
  overflow:hidden;
  pointer-events:none
}

.color-ribbons i{
  position:absolute;
  display:block;
  transform:rotate(12deg);
  transform-origin:center;
  height:400px
}

.color-ribbons i:nth-child(1){
  width:72px;
  background:var(--red);
  left:23%;
  top:-55px
}

.color-ribbons i:nth-child(2){
  width:68px;
  background:var(--blue);
  left:39%;
  top:-55px
}

.color-ribbons i:nth-child(3){
  width:64px;
  background:var(--yellow);
  left:55%;
  top:-55px
}

.hero-photo-frame{
  position:relative;
  z-index:2;
  width:min(500px,82%);
  margin-left:7%;
  background:#fff;
  padding:7px;
  box-shadow:
    0 20px 42px rgba(30,35,43,.15),
    0 4px 10px rgba(30,35,43,.07);
  transform:rotate(-1deg)
}

.hero-photo-frame:before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(24,32,42,.08);
  pointer-events:none
}

.hero-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
  position:relative;
  z-index:1
}

.art-note{
  position:absolute;
  right:0;
  bottom:8px;
  z-index:4;
  padding:10px 12px;
  background:#fff;
  box-shadow:0 8px 24px rgba(30,35,43,.10);
  font-size:11px;
  line-height:1.15;
  text-transform:uppercase
}

.art-note span{
  display:block;
  width:22px;
  height:3px;
  background:var(--yellow);
  margin-bottom:9px
}

.art-note strong{
  font-size:12px;
  letter-spacing:.2px
}

.art-note em{
  font-style:normal;
  color:var(--red)
}

/* FILTROS */

.filter-shell{
  margin-top:10px
}

.filters{
  background:#fff;
  border:1px solid var(--line);
  padding:9px;
  display:flex;
  gap:10px;
  box-shadow:var(--shadow)
}

.filters label{
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:145px
}

.filters .grow{
  flex:1
}

.filters input,
.filters select{
  border:1px solid #ebe9e3;
  background:#faf9f6;
  color:var(--ink);
  padding:9px 11px;
  font-size:13px;
  outline:none
}

.filters input:focus,
.filters select:focus{
  border-color:#b9c8da
}

/* AGENDA */

.agenda{
  padding:32px 0 64px
}

.history{
  padding:58px 0 68px;
  background:#fff;
  border-top:1px solid var(--line)
}

.heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:24px;
  gap:24px
}

.compact-heading{
  margin-bottom:20px
}

.heading h2{
  font-size:clamp(30px,3vw,42px);
  letter-spacing:-1.8px;
  margin:7px 0 0;
  line-height:1
}

.heading>span{
  color:var(--muted);
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase
}

.section-copy{
  color:var(--muted);
  max-width:610px;
  margin:10px 0 0;
  line-height:1.5;
  font-size:13px
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px
}

/* CARDS */

.card{
  --accent:var(--red);
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
  position:relative;
  min-width:0
}

.card:nth-child(6n+2){
  --accent:var(--blue)
}

.card:nth-child(6n+3){
  --accent:var(--yellow)
}

.card:nth-child(6n+4){
  --accent:var(--green)
}

.card:nth-child(6n+5){
  --accent:var(--orange)
}

.card:nth-child(6n+6){
  --accent:var(--violet)
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow)
}

.visual{
  height:176px;
  position:relative;
  overflow:hidden;
  background:#ece8df
}

.visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease
}

.card:hover .visual img{
  transform:scale(1.025)
}

.visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(15,21,29,.14),
    transparent 45%
  );
  pointer-events:none
}

.visual .editorial{
  position:absolute;
  right:8px;
  bottom:7px;
  z-index:3;
  color:#fff;
  background:rgba(24,32,42,.72);
  padding:4px 6px;
  font-size:7px;
  letter-spacing:.9px;
  font-weight:900;
  text-transform:uppercase
}

.date{
  position:absolute;
  top:0;
  left:0;
  width:68px;
  height:100%;
  background:var(--accent);
  color:#fff;
  padding:13px 8px;
  text-align:center;
  z-index:4
}

.date b{
  display:block;
  font-size:30px;
  line-height:.9;
  letter-spacing:-1.8px
}

.date span{
  font-size:10px;
  font-weight:900;
  letter-spacing:1px
}

.date small{
  display:block;
  margin-top:6px;
  font-size:8px;
  line-height:1.2;
  color:#fff
}

.past-flag{
  position:absolute;
  right:8px;
  top:8px;
  background:rgba(24,32,42,.88);
  color:#fff;
  padding:6px 8px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.9px;
  z-index:4
}

.body{
  padding:15px 15px 14px
}

.tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center
}

.pill,
.type{
  display:inline-block;
  padding:4px 6px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.55px;
  text-transform:uppercase
}

.pill{
  background:#e8f2ec;
  color:#317052
}

.historical-card .pill{
  background:#eceae5;
  color:#676b72
}

.type{
  background:color-mix(in srgb,var(--accent) 13%,white);
  color:var(--accent)
}

.body h3{
  font-size:16px;
  line-height:1.18;
  letter-spacing:-.2px;
  margin:11px 0 14px;
  min-height:57px
}

.meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35
}

.bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  margin-top:13px;
  padding-top:11px;
  font-size:9px;
  gap:8px
}

.bottom b{
  color:var(--accent);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.25px
}

.historical-card{
  background:#faf9f6
}

.historical-card .visual img{
  filter:saturate(.65) contrast(.94)
}

/* HISTÓRICO / SOBRE */

.history-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.7fr);
  gap:30px;
  align-items:start
}

.history-main .grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.about-panel{
  border:1px solid var(--line);
  background:#fbfaf7;
  padding:24px;
  position:sticky;
  top:98px
}

.about-panel h3{
  font-size:27px;
  line-height:1.05;
  letter-spacing:-1px;
  margin:8px 0 18px
}

.about-panel ul{
  list-style:none;
  padding:0;
  margin:0
}

.about-panel li{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  padding:13px 0;
  border-top:1px solid var(--line)
}

.about-panel li b{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:#fff;
  font-size:9px
}

.about-panel li:nth-child(2) b{
  background:var(--blue)
}

.about-panel li:nth-child(3) b{
  background:var(--yellow);
  color:var(--ink)
}

.about-panel li span{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:10px;
  color:var(--muted);
  line-height:1.35
}

.about-panel li strong{
  color:var(--ink);
  font-size:11px
}

.about-panel blockquote{
  margin:22px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.5px
}

.empty{
  text-align:center;
  padding:50px;
  color:var(--muted)
}

/* FOOTER */

footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:34px 0
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr auto;
  gap:30px;
  align-items:center
}

.footer-brand{
  display:flex;
  flex-direction:column
}

.footer-brand strong{
  font-size:18px
}

.footer-brand span{
  color:var(--red);
  font-size:10px;
  font-weight:900;
  margin-top:3px
}

.footer-grid p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45
}

.footer-grid a{
  color:var(--ink);
  text-decoration:none;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  border-bottom:2px solid var(--red);
  padding-bottom:6px
}

/* MODAL */

dialog{
  border:0;
  padding:0;
  width:min(680px,92%);
  box-shadow:0 30px 90px #0005;
  background:#fff;
  color:var(--ink)
}

dialog::backdrop{
  background:#18202ab8;
  backdrop-filter:blur(3px)
}

#close{
  position:absolute;
  right:14px;
  top:12px;
  border:0;
  background:#fff;
  width:36px;
  height:36px;
  font-size:24px;
  cursor:pointer;
  z-index:5
}

.modalVisual{
  height:220px;
  background:#eee;
  position:relative;
  overflow:hidden
}

.modalVisual img{
  width:100%;
  height:100%;
  object-fit:cover
}

.modalVisual:after{
  content:"1:64";
  position:absolute;
  right:18px;
  bottom:4px;
  font-size:44px;
  font-weight:900;
  color:#ffffff66;
  letter-spacing:-4px
}

.image-credit{
  position:absolute;
  left:10px;
  bottom:8px;
  z-index:2;
  margin:0;
  padding:5px 7px;
  max-width:70%;
  background:#111c;
  color:#fff;
  font-size:10px;
  line-height:1.25
}

.image-credit a{color:inherit}

.modalBody{
  padding:26px
}

.modalBody h2{
  font-size:29px;
  letter-spacing:-1px;
  margin:13px 0
}

.history-note{
  background:#f2f0ea;
  color:var(--muted);
  padding:10px 12px;
  font-size:11px
}

.details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:18px 0
}

.details div{
  background:var(--paper);
  padding:12px
}

.details small{
  display:block;
  color:var(--muted);
  margin-bottom:4px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.5px
}

.official{
  display:inline-block;
  margin-top:8px;
  color:var(--red);
  font-weight:900;
  text-decoration:none;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px
}

/* RESPONSIVO */

@media(max-width:1050px){

  .top nav{
    display:none
  }

  .hero-grid{
    grid-template-columns:1fr 1fr
  }

  .history-layout{
    grid-template-columns:1fr
  }

  .about-panel{
    position:static
  }

  .history-main .grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
  }
}

@media(max-width:820px){

  .hero{
    padding:42px 0 30px
  }

  .hero-grid{
    grid-template-columns:1fr;
    min-height:430px;
    gap:30px
  }

  .hero-copy{
    padding:22px 0 0
  }

  h1{
    font-size:clamp(46px,5vw,72px);
    line-height:.98;
    margin:12px 0 18px;
    max-width:650px
  }

  .hero-lead{
    font-size:16px;
    line-height:1.55;
    max-width:570px
  }

  .hero-stats{
    margin-top:24px
  }

  .hero-stats div{
    padding:12px 16px;
    min-width:160px
  }

  .hero-stats strong{
    font-size:22px
  }

  .hero-media{
    height:360px;
    margin-top:6px
  }

  .hero-photo-frame{
    width:min(620px,82%);
    margin-left:0;
    padding:8px
  }

  .color-ribbons{
    inset:-20px -12px
  }

  .color-ribbons i{
    height:500px
  }

  .color-ribbons i:nth-child(1){
    left:25%
  }

  .color-ribbons i:nth-child(2){
    left:42%
  }

  .color-ribbons i:nth-child(3){
    left:59%
  }

  .art-note{
    right:5%;
    bottom:15px
  }

  .filter-shell{
    margin-top:18px
  }

  .filters{
    padding:12px;
    flex-wrap:wrap
  }

  .filters input,
  .filters select{
    padding:12px 13px
  }

  .filters .grow{
    flex-basis:100%
  }

  .agenda{
    padding-top:54px
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .footer-grid{
    grid-template-columns:1fr 1fr
  }

  .footer-grid a{
    justify-self:start
  }
}

@media(max-width:560px){

  .container{
    width:92%
  }

  .top{
    height:70px
  }

  .brand small{
    display:none
  }

  .brand{
    min-width:0
  }

  .suggest{
    font-size:9px;
    margin-left:auto
  }

  .hero{
    padding-top:26px
  }

  .hero-grid{
    min-height:0
  }

  .hero-media{
    height:275px;
    margin-top:12px
  }

  .hero-photo-frame{
    width:88%;
    margin-left:0;
    padding:5px;
    transform:rotate(-1deg)
  }

  .color-ribbons{
    inset:-10px -20px
  }

  .color-ribbons i:nth-child(1){
    width:50px;
    left:22%
  }

  .color-ribbons i:nth-child(2){
    width:46px;
    left:42%
  }

  .color-ribbons i:nth-child(3){
    width:44px;
    left:61%
  }

  .art-note{
    right:0;
    bottom:4px;
    padding:9px 10px
  }

  .art-note strong{
    font-size:10px
  }

  h1{
    font-size:44px;
    letter-spacing:-2.4px
  }

  .hero-lead{
    font-size:14px
  }

  .hero-stats{
    gap:8px
  }

  .hero-stats div{
    min-width:0;
    flex:1;
    padding:10px
  }

  .filters label{
    width:100%;
    min-width:0
  }

  .agenda,
  .history{
    padding:44px 0
  }

  .grid,
  .history-main .grid{
    grid-template-columns:1fr
  }

  .heading{
    align-items:flex-start;
    flex-direction:column
  }

  .heading h2{
    font-size:33px
  }

  .visual{
    height:190px
  }

  .body h3{
    min-height:0
  }

  .footer-grid{
    grid-template-columns:1fr;
    align-items:start
  }

  .details{
    grid-template-columns:1fr
  }
}