:root{
  --warm: #fdfcf9;
  --warm2:#fffdf8;
  --black:#0f0f10;
  --line: rgba(15,15,16,.18);
  --glass: rgba(244,240,232,.62);

  --wrap: min(1040px, 92vw);

  --serifA: "Fraunces", serif;          /* títulos grandes */
  --serifB: "Libre Baskerville", serif; /* manifiesto / textos editoriales */
  --sans: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{
  background: var(--warm);
  color: var(--black);
  font-family: var(--sans);
  padding-top: 76px;
}

/* ====== BASE ====== */
.wrap{ width: var(--wrap); margin: 0 auto; }
.section{ padding: 44px 0; }
.section--top{ padding-top: 22px; }
.rule{ height:1px; background: var(--line); width:100%; margin: 18px 0; }

.section__head{
  display:flex; align-items:center; gap: 18px;
  margin: 10px 0 18px;
}
.section__label{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  opacity: .75;
}
.section__line{ flex:1; height:1px; background: var(--line); }

/* ====== HEADER (glass) ====== */
.header{
  position: fixed; top:0; left:0; right:0;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
}
.header__inner{
  width: var(--wrap);
  margin: 0 auto;
  padding: 16px 0;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
}
.brand{
  font-family: var(--serifA);
  font-weight: 420;
  letter-spacing: .08em;
  text-decoration:none;
  color: var(--black);
  font-size: 22px;
}

.burger{
  display:none;
  border:0;
  background: transparent;
  font-size: 22px;
  cursor:pointer;
}

.nav__list{
  list-style:none;
  display:flex;
  gap: 28px;
  align-items:center;
}
.nav__link{
  text-decoration:none;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  opacity: .85;
  background: transparent;
  border:0;
  cursor:pointer;
  padding: 10px 6px;
}
.nav__link:hover{ opacity:.6; }
.nav__cta{ border-bottom: 1px solid rgba(15,15,16,.35); padding-bottom: 6px; }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute;
  top: 44px; left:0;
  min-width: 250px;
  list-style:none;
  background: rgba(250,247,241,.95);
  border: 1px solid var(--line);
  padding: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events:none;
  transition: .2s ease;
}
.has-dropdown.active .dropdown{
  opacity:1; transform: translateY(0);
  pointer-events:auto;
}
.dropdown__link{
  display:block;
  padding: 10px;
  text-decoration:none;
  color: var(--black);
  font-size: 13px;
  opacity: .9;
}
.dropdown__link:hover{ background: rgba(15,15,16,.06); }

/* ====== NEWS (blog) ====== */
.news__kicker{
  font-family: var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.75;
}
.news__title{
  font-family: var(--serifA);
  font-size: 34px;
  margin-top: 8px;
}
.news__desc{
  margin-top: 10px;
  opacity: .75;
  max-width: 58ch;
}
.news__card{
  margin-top: 18px;
  display:block;
  border: 1px solid var(--line);
  padding: 18px;
  text-decoration:none;
  color: var(--black);
}
.news__meta{
  display:flex; gap: 12px;
  font-size: 11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.7;
}
.news__headline{
  margin-top: 12px;
  font-family: var(--serifB);
  font-size: 18px;
}
.news__more{
  margin-top: 12px;
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
}

/* ====== COVER (collage + título) ====== */
.cover{ padding: 18px 0 40px; }
.cover__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 14px;
}
.cover__img{ display:block; border:1px solid var(--line); }
.cover__img img{ width:100%; height: 220px; object-fit: cover; display:block; }
.cover__text{ padding: 22px 0 10px; }
.cover__kicker{
  font-family: var(--sans);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:11px;
  opacity:.75;
}
.cover__title{
  font-family: var(--serifA);
  font-size: 64px;
  line-height: .95;
  margin-top: 10px;
}
.cover__title span{ font-weight: 320; letter-spacing:.04em; }

.btn{
  display:inline-block;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid var(--black);
  text-decoration:none;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
}
.btn--line{ border-color: rgba(15,15,16,.45); opacity:.9; }

/* ====== Two col ====== */
.two-col{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
  align-items:start;
}
.media{ border:1px solid var(--line); display:block; }
.media img{ width:100%; height: 320px; object-fit: cover; display:block; }
.text-block__body{
  font-family: var(--serifB);
  font-size: 18px;
  line-height: 1.5;
}
.text-block__sub{
  margin-top: 12px;
  font-size: 13px;
  letter-spacing:.08em;
  text-transform: uppercase;
  opacity: .75;
}

/* ====== Banner ====== */
.banner{ display:block; border:1px solid var(--line); }
.banner img{ width:100%; height: 180px; object-fit: cover; display:block; }

/* ====== Columns ====== */
.cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.col{ border-top: 1px solid var(--line); padding-top: 14px; }
.col__title{
  font-family: var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size: 11px;
  opacity:.75;
}
.list{ margin-top: 10px; padding-left: 18px; }
.list li{ margin: 8px 0; font-size: 13px; opacity: .9; }

/* ====== Cards (sharp) ====== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border:1px solid var(--line);
  text-decoration:none;
  color: var(--black);
  display:block;
}
.card img{ width:100%; height: 220px; object-fit: cover; display:block; }
.card__cap{
  padding: 12px;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  opacity:.8;
}

/* ====== Manifiesto ====== */
.manifesto{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.man__big{
  font-family: var(--serifA);
  font-size: 26px;
  line-height: 1.15;
}
.man__img{ border:1px solid var(--line); display:block; }
.man__img img{ width:100%; height: 320px; object-fit: cover; display:block; }

/* ====== Recent ====== */
.recent{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 14px;
  align-items:end;
}
.recent__main, .recent__side{ border:1px solid var(--line); display:block; }
.recent__main img{ width:100%; height: 320px; object-fit: cover; display:block; }
.recent__side img{ width:100%; height: 200px; object-fit: cover; display:block; }
.recent__title{ grid-column: 1 / -1; margin-top: 12px; }
.recent__name{
  font-family: var(--serifA);
  font-size: 28px;
  letter-spacing:.02em;
}
.recent__desc{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.75;
}

/* ====== Contact ====== */
.contact__grid{
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.contact__big{
  font-family: var(--serifA);
  font-size: 54px;
  line-height: .95;
}
.contact__row{ display:grid; grid-template-columns: 120px 1fr; padding: 10px 0; border-bottom: 1px solid rgba(15,15,16,.10); }
.contact__k{ font-size: 11px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; }
.contact__v{ font-size: 13px; opacity:.9; }

/* ====== Reveal motion (entradas laterales) ====== */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal[data-reveal="left"]{ transform: translateX(-28px); }
.reveal[data-reveal="right"]{ transform: translateX(28px); }
.reveal[data-reveal="up"]{ transform: translateY(22px); }
.reveal.active{ opacity: 1; transform: translate(0,0); }

/* ====== Modal ====== */
.modal{ position: fixed; inset: 0; display:none; z-index: 1200; }
.modal.show{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(15,15,16,.35); }
.modal__panel{
  position: relative;
  width: min(520px, 92vw);
  margin: 12vh auto 0;
  background: var(--warm2);
  border: 1px solid var(--line);
  padding: 18px;
}
.modal__close{
  position:absolute; top: 10px; right: 10px;
  border:0; background:transparent; cursor:pointer; font-size: 18px;
}
.modal__kicker{ font-size: 11px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; }
.modal__title{ font-family: var(--serifA); font-size: 24px; margin-top: 8px; }
.modal__text{ margin-top: 10px; opacity:.78; }
.modal__actions{ margin-top: 14px; display:flex; gap: 10px; flex-wrap: wrap; }
.modal__dont{ margin-top: 12px; display:flex; gap: 10px; align-items:center; font-size: 12px; opacity:.75; }

/* ====== Mobile nav overlay ====== */
.overlay{
  position: fixed;
  inset:0;
  background: rgba(15,15,16,.25);
  z-index: 900;
}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .cover__title{ font-size: 54px; }
  .cards{ grid-template-columns: 1fr 1fr 1fr; }
  .media img{ height: 280px; }
  .man__img img{ height: 280px; }
}

@media (max-width: 768px){
  body{ padding-top: 72px; }

  .burger{ display:block; }
  .nav{
    position: fixed;
    top:0; right:-100%;
    width: min(84vw, 360px);
    height: 100vh;
    background: rgba(250,247,241,.95);
    border-left: 1px solid var(--line);
    padding: 86px 18px 18px;
    transition: right .28s ease;
    z-index: 950;
  }
  .nav.active{ right:0; }
  .nav__list{ flex-direction: column; align-items:flex-start; gap: 10px; }

  .dropdown{
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: 0;
    background: transparent;
    padding: 6px 0 0 10px;
    display:none;
  }
  .has-dropdown.active .dropdown{ display:block; }

  .cover__grid{ grid-template-columns: 1fr; }
  .cover__img img{ height: 220px; }

  .two-col{ grid-template-columns: 1fr; }
  .cols{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .manifesto{ grid-template-columns: 1fr; }
  .recent{ grid-template-columns: 1fr; }
  .contact__grid{ grid-template-columns: 1fr; }
  .contact__big{ font-size: 44px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; }
}

.cover__card{
  display:block;
  text-decoration:none;
  color: var(--black);
  border: 1px solid var(--line);
  background: transparent;
}

.cover__card img{
  width: 100%;
  aspect-ratio: 4 / 7; /* HISTORIA */
  height: auto;
  object-fit: cover;
  display:block;
}

.cover__meta{
  padding: 14px 14px 16px;
  border-top: 1px solid rgba(15,15,16,.12);
}

.cover__name{
  font-family: var(--serifA);
  font-size: 18px;
  letter-spacing: .02em;
}

.cover__desc{
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  line-height: 1.4;
}