/* ============================================================
   Espacios Resonantes — III Festival de Arquitectura y Escucha
   Reconstrucción fiel del artboard 1511 × 822 (desktop / landscape).
   Tokens extraídos del SVG original.
   ============================================================ */

:root{
  --ink:        #1d1d1b;   /* negro tipográfico del diseño */
  --ink-01:     rgba(29, 29, 27, 0.1);  /* negro tipográfico del diseño con 10% de opacidad */
  --card:       #f6f6f6;   /* fondo de la tarjeta          */
  --bg:         #000000;   /* fondo de la página           */
  --radius:     46px;      /* esquinas de la tarjeta (rx 44.7) */
  --pill-radius: 8px;      /* píldoras Bases—Formulario (rx 7.5) */

  --font-display: "Karla", sans-serif;          /* "Espacios Resonantes" / 01.2027 */
  --font-text:    "Space Grotesk", sans-serif;  /* todo lo demás */
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Lienzo negro ---------- */
.poster{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Tarjeta ---------- */
.card{
  position: relative;
  width: 100%;
  max-width: 1359px;
  aspect-ratio: 1359 / 720;           /* proporción del artboard */
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  /* trama de puntos del fondo (generada en CSS, fiel al grid del SVG) */
  background-image: radial-gradient(circle, rgba(29,29,27,.16) 1px, transparent 1.6px);
  background-size: 17px 17px;
  background-position: 6px 6px;
  container-type: inline-size;        /* permite escalar la tipografía con cqw */
}

.content{
  padding: 2.2cqw 4.6cqw 3cqw;
}

/* ============================================================
   DECORACIONES DE CARBÓN
   mix-blend-mode: multiply hace desaparecer el blanco del PNG,
   igual que en el Illustrator original.
   ============================================================ */
.deco{
  position: absolute;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.deco--smudge{
  top: 41%;
    left: 32%;
    width: 18%;
    opacity: .95;
}
.deco--pile{
  right: 1.5%;
  bottom: 5.5%;
  width: 31%;
}

/* ============================================================
   REJILLA PRINCIPAL · dos columnas
   ============================================================ */
.grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 7cqw;
  align-items: end;
}

.col{ min-width: 0; }

/* ---------- Cabecera de marca (izquierda) ---------- */
.brand{
  display: flex;
  align-items: flex-start;
  gap: 1cqw;
}
.brand__mark{
  width: 10.6cqw;
  height: auto;
  mix-blend-mode: multiply;
  margin-top: -1.4cqw;
  position: absolute;
}
.brand__text, .brand_logo { 
  padding-left: 11cqw;
}
.brand_logo img {max-width: 300px; }
.brand__name{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1cqw;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.brand__sub{
  margin: .35cqw 0 0;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.18cqw;
  letter-spacing: .005em;
}
.brand__sub .num{ font-weight: 600; }

/* ---------- Cabecera derecha (glifos + edición) ---------- */
.header {
  background-color: #e8e8e8;
  padding: 2cqw 4.6cqw 1cqw;
}
.brand--right{
  align-items: flex-end;
  justify-content: flex-end;
  gap: 2cqw;
  position: relative;
  height: 55px;
  padding-bottom: 0px;
}
.brand__glyphs{
  max-width: 420px;
    height: auto;
    mix-blend-mode: multiply;
    position: absolute;
    width: 28cqw;
    left: 0;
    bottom: -3.2cqw;
}
.edition{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3cqw;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  margin: 0 0 1cqw;
  font-weight: 600;
  font-size: 1.22cqw;
  letter-spacing: .002em;
}

/* ---------- Titular ---------- */
.headline{
  margin: 0;
  font-weight: 300;
  font-size: 5cqw;
  line-height: 1.04;
  letter-spacing: -.012em;
  max-width: 12ch;
}

/* ---------- CTA: píldora + lugar ---------- */
.cta{
  display: flex;
  align-items: center;
  gap: .9cqw;
  margin: 1.4cqw 0 1.5cqw;
  cursor: pointer;
}
.cta__buttons {
  border: 2px solid var(--ink);
  border-radius: 50px;
  display: flex;
  gap: 0px;
  overflow: hidden;
}
.pill--base {
  border-right: 2px solid var(--ink);
  background: var(--ink);
  color: var(--card) !important;
  transition: all 0.3s ease;
}
.pill{
  display: inline-block;
  color: var(--ink);
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 1.18cqw;
  line-height: 1;
  padding: .62em .9em;
  white-space: nowrap;
}
.place{
  font-weight: 800;
  font-size: 1.82cqw;
  letter-spacing: .01em;
}

/* ---------- Fechas ---------- */
.dates{
  margin: 0 0 0;
  font-weight: 600;
  font-size: 1.62cqw;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position: absolute;
  left: 4.6cqw;
  right: 4.6cqw;
  bottom: 3cqw;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4.5cqw;
}
.fgroup{ flex: 0 0 auto; }
.fgroup--collab{ margin-right: .5cqw;  }

.fgroup__label{
  display: block;
  font-weight: 500;
  font-size: 1.05cqw;
  margin-bottom: 1cqw;
  letter-spacing: .01em;
}

.logos{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
}
.logos img{
  display: block;
  width: auto;
  height: 3.1cqw;          /* altura uniforme para todos los sellos */
  max-height: 46px;
  mix-blend-mode: multiply;
}

/* Organiza: sello + wordmark */
.logos--organiza li{
  display: flex;
  align-items: center;
  gap: .8cqw;
}
.org-mark{ height: 3.3cqw !important; max-height: 50px; }
.org-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05cqw;
  line-height: 1.05;
}

/* ============================================================
   RESPONSIVE — primer apaño hasta tener el artboard de móvil.
   A partir de ~820px las dos columnas se apilan y el footer fluye.
   ============================================================ */
@media (max-width: 820px){
  .fgroup--collab{ width: 100%; }
  .card{
    aspect-ratio: auto;
    border-radius: 30px;
  }
  .header {
    padding: 6.2cqw 4.6cqw 1cqw;
  }
  .grid{
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  header .grid {
    row-gap: 28px;
  }
  /* a una columna, los cqw se vuelven grandes: fijamos tamaños legibles */
  .content{
    padding-top: 8.2cqw;
  }
  .brand__name{ font-size: 26px; }
  .brand__sub,
  .eyebrow,
  .pill,
  .fgroup__label,
  .org-name{ font-size: 14px; }
  .edition{ font-size: 23px; }
  .headline{ font-size: clamp(34px, 9vw, 56px); max-width: none; }
  .place,
  .dates{ font-size: 20px; }
  .brand__mark{ width: 44px; }
  .brand__text { padding-left: 50px; }
  .brand_logo { padding-left: 50px;}
  .brand_logo img { max-width: 250px; }
  .brand--right{ flex-wrap: wrap; gap: 10px; }
  .brand__glyphs{ width: min(62%, 230px); }
  .dates { margin-top: 47px; font-size: 18px;}

  .deco--pile{ width: 150px; right: 2%; bottom: auto; top: 30%; opacity:.5; }
  .deco--smudge{ display: none; }

  .footer{
    position: static;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 44px;
  }
  .logos{ flex-wrap: wrap; gap: 18px; }
  .logos img{ height: 38px; }
  .org-mark{ height: 42px !important; }
  .fgroup__label{ margin-bottom: 10px; }
}