/* ============================================================
   FERIA DEL LIBRO BARILOCHE 2026 — fliba.ar
   Identidad tomada de la pieza gráfica oficial:
   azul #188bc4, menta #cffbd8, blanco, tipografía geométrica
   (Poppins ExtraBold) y el círculo blanco como motivo.
   ============================================================ */

:root{
  /* Color */
  --azul:        #188bc4;   /* azul de marca (fondo principal) */
  --azul-hondo:  #0e4d6b;   /* azul del "2026" del logo: títulos y texto fuerte */
  --azul-noche:  #072e44;   /* pie de página */
  --menta:       #cffbd8;   /* acento del título */
  --menta-hondo: #2f7f57;   /* menta legible sobre blanco */
  --papel:       #fbfcfd;   /* blanco papel */
  --pizarra:     #4d6b7b;   /* neutro frío, sesgado al azul */
  --kraft:       #8a5a3b;   /* marrón de las hojas del logo */
  --linea:       #d7e6ee;

  /* Tipografía */
  --display: "Poppins", "Trebuchet MS", system-ui, sans-serif;
  --texto:   "Literata", Georgia, "Times New Roman", serif;

  /* Escala */
  --paso: clamp(2.35rem, 8vw, 6rem);
  --barra: 69px;   /* alto de la barra superior, incluido su borde de 1px */
  --radio: 18px;
  --ancho: 1180px;

  color-scheme: light;
}

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

/* El atributo hidden tiene que ganarle a cualquier display que venga
   de una clase. Sin esto, un [hidden] sobre algo con display:grid o
   display:flex no oculta nada. */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
section[id]{ scroll-margin-top: 84px; }

body{
  margin:0;
  background: var(--papel);
  color: var(--azul-hondo);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, .display{
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p{ margin: 0; }
a{ color: inherit; }
img{ max-width: 100%; display: block; }

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

.envoltura{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* Etiquetas: la vela del logo como viñeta */
.etiqueta{
  font-family: var(--display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--menta-hondo);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.etiqueta::before{
  content:"";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid var(--kraft);
  flex: none;
}
.sobre-azul .etiqueta{ color: var(--menta); }
.sobre-azul .etiqueta::before{ border-bottom-color: var(--menta); }

/* ============================ BARRA ============================ */
.barra{
  position: sticky; top: 0; z-index: 40;
  background: var(--azul);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.barra .envoltura{
  display: flex; align-items: center; gap: 1.5rem;
  min-height: calc(var(--barra) - 1px);
}
.marca{
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-weight: 700;
  font-size: .95rem; line-height: 1.1; letter-spacing: -.01em;
  text-decoration: none; margin-right: auto;
}
.marca .disco{
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  flex: none;
}
.marca .disco img{ width: auto; height: 28px; }
.marca span{ display: block; }
.marca em{
  display: block; font-style: normal; font-weight: 500;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--menta);
}
.menu{
  display: flex; gap: clamp(.9rem, 2vw, 1.7rem);
  font-family: var(--display); font-weight: 500; font-size: .9rem;
}
.menu a{ text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover{ border-bottom-color: var(--menta); }
.chip-gratis{
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--menta); color: var(--azul-hondo);
  padding: .5rem .9rem; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 900px){
  .barra .chip-gratis{ display: none; }
}
@media (max-width: 640px){
  .menu{ display: none; }
}

/* ============================ PORTADA ============================ */
.portada{
  position: relative;
  background: var(--azul);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Foto de portada opcional: descomentar el <img class="foto-portada"> del HTML */
.foto-portada{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .28; mix-blend-mode: luminosity;
  z-index: -2;
}
.portada .envoltura{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}
.edicion{
  font-family: var(--display); font-weight: 600;
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--menta);
  margin-bottom: 1.4rem;
}
.titulo{
  font-size: var(--paso);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.titulo .verde{ color: var(--menta); display: block; }

.fecha{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  line-height: 1.15; letter-spacing: -.01em;
  margin-bottom: .7rem;
}
.fecha b{ color: var(--menta); font-weight: 800; }
.sede{
  max-width: 34ch;
  color: rgba(255,255,255,.92);
  font-size: 1.02rem; line-height: 1.5;
}
.sede strong{ font-weight: 600; }

.acciones{
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.boton{
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  padding: .85rem 1.5rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.boton.solido{ background: var(--menta); color: var(--azul-hondo); }
.boton.linea{ border: 2px solid rgba(255,255,255,.55); color: #fff; }
.boton:hover{ transform: translateY(-2px); }
.boton.linea:hover{ background: #fff; color: var(--azul-hondo); border-color: #fff; }

/* Logo dentro del círculo blanco — el motivo de la pieza gráfica */
.medallon{
  position: relative;
  justify-self: center;
  width: min(430px, 92%);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.medallon::before{
  content:"";
  position: absolute; inset: 0; z-index: -1;
  background: #fff; border-radius: 50%;
  box-shadow: 0 26px 60px rgba(7,46,68,.22);
}
.logo-portada{ width: 49%; }

/* Cuenta regresiva */
.regresiva{
  border-top: 1px solid rgba(255,255,255,.22);
  background: #12769f;   /* azul de marca, un paso más oscuro */
  position: relative; z-index: 1;
}
.regresiva .envoltura{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem;
  padding-block: 1.1rem;
  color: #fff;
}
.regresiva dl{
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0;
  font-variant-numeric: tabular-nums;
}
.regresiva div{ display: flex; align-items: baseline; gap: .4rem; }
.regresiva dt{
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  color: var(--menta);
}
.regresiva dd{
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.regresiva .rotulo{
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72);
}

@media (max-width: 860px){
  .portada .envoltura{ grid-template-columns: 1fr; text-align: left; }
  .medallon{ width: min(300px, 74%); justify-self: center; margin-top: .5rem; }
  .regresiva dl{ gap: .4rem 1.1rem; }
  .regresiva dt{ font-size: 1.3rem; }
}

/* En una ventana de PC la portada y la tira de la cuenta regresiva tienen que
   entrar juntas: medida solo contra el ancho, la portada quedaba fija en unos
   1000px de alto y la cuenta caía abajo del pliegue en cualquier monitor.
   La .tapa reserva una pantalla y la portada se estira para llenar lo que la
   cuenta regresiva deje libre —así no hay que saber de antemano cuánto mide—,
   y todo lo que ocupa alto (tipografía, aires y medallón) se mide también
   contra el alto de la ventana para que el contenido entre. */
@media (min-width: 861px){
  .tapa{
    min-height: calc(100svh - var(--barra));
    display: flex; flex-direction: column;
  }
  .tapa > .portada{ flex: 1; display: flex; }
  .tapa > .portada > .envoltura{
    flex: 1;
    padding-block: clamp(1.5rem, 4vh, 5rem) clamp(1.75rem, 4.5vh, 5.5rem);
  }
  .portada .titulo{
    font-size: clamp(2.35rem, min(8vw, 9.6vh), 6rem);
    margin-bottom: clamp(1rem, 2.4vh, 2rem);
  }
  .portada .edicion{ margin-bottom: clamp(.7rem, 1.8vh, 1.4rem); }
  .portada .acciones{ margin-top: clamp(1.1rem, 3vh, 2.4rem); }
  .medallon{ width: min(430px, 92%, 52vh); }
}

/* ============================ SECCIONES ============================ */
.seccion{ padding-block: clamp(3.5rem, 8vw, 6rem); }
.seccion.sobre-azul{ background: var(--azul); color: #fff; }
.seccion.sobre-menta{ background: var(--menta); color: var(--azul-hondo); }
.seccion h2{
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  max-width: 30ch;
  margin-block: .8rem 1.2rem;
}
.entrada{ max-width: 62ch; font-size: 1.08rem; }
.entrada + .entrada{ margin-top: 1rem; }
.sobre-azul .entrada{ color: rgba(255,255,255,.94); }

.dos-columnas{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px){ .dos-columnas{ grid-template-columns: 1fr; } }

.datos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 1rem;
  margin: 0;
  border-top: 2px solid var(--azul);
  padding-top: 1.5rem;
}
.datos > div > dt{
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.datos > div > dd{
  margin: .5rem 0 0; font-size: .95rem; color: var(--pizarra);
  max-width: 22ch;
}

/* --- Círculos (participantes / invitados) --- */
.circulos{
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 170px), 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.circulos li{ text-align: center; }
.circulos a, .circulos .hueco{
  display: block; text-decoration: none;
}
.disco-grande{
  aspect-ratio: 1; width: 100%;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  padding: 16%;
  box-shadow: 0 10px 26px rgba(7,46,68,.12);
  transition: transform .22s ease, box-shadow .22s ease;
}
.circulos a:hover .disco-grande{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 34px rgba(7,46,68,.2);
}
.disco-grande.vacante{
  background: transparent;
  border: 2px dashed rgba(255,255,255,.5);
  box-shadow: none;
  color: rgba(255,255,255,.75);
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 12%;
}
.sobre-menta .disco-grande.vacante{
  border-color: rgba(14,77,107,.35);
  color: rgba(14,77,107,.6);
}
.circulos .nombre{
  display: block; margin-top: .8rem;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
}
.circulos .rol{
  display: block; font-size: .82rem; opacity: .8;
}

/* --- Cronograma --- */
.dias{
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem;
}
.dia{
  background: #fff;
  border: 1px solid var(--linea);
  border-top: 5px solid var(--azul);
  border-radius: var(--radio);
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: .35rem;
  min-height: 190px;
}
.dia .num{
  font-family: var(--display); font-weight: 800;
  font-size: 3.4rem; line-height: .9; letter-spacing: -.04em;
  color: var(--azul);
}
.dia .dow{
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pizarra);
}
.dia .pend{
  margin-top: auto; font-size: .92rem; color: var(--pizarra);
}
.dia.feriado .num{ color: var(--kraft); }
.dia.feriado{ border-top-color: var(--kraft); }

/* --- Galería --- */
.carrusel{
  position: relative;
  margin-top: 2.5rem;
}
.pista{
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.pista > figure{
  flex: 0 0 clamp(240px, 32vw, 380px);
  scroll-snap-align: start;
  margin: 0;
}
.marco{
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
  border: 2px dashed rgba(14,77,107,.28);
  display: grid; place-items: center;
  color: var(--pizarra);
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 1rem;
}
/* Con la foto adentro, el marco deja de ser el recuadro punteado de espera. */
.marco:has(img){ border-color: transparent; padding: 0; }
.marco img{ width: 100%; height: 100%; object-fit: cover; }
.pista figcaption{
  margin-top: .6rem; font-size: .9rem; color: var(--pizarra);
}
.flechas{ display: flex; gap: .6rem; margin-top: .5rem; }
.flechas button{
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--azul); background: #fff; color: var(--azul);
  font-size: 1.1rem; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .18s ease, color .18s ease;
}
.flechas button:hover{ background: var(--azul); color: #fff; }

/* --- Cierre / CTA --- */
.cierre{
  background: var(--azul);
  color: #fff;
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.cierre h2{ font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.cierre .fecha{ margin-top: 1.2rem; }

/* --- Pie --- */
.pie{
  background: var(--azul-noche);
  color: rgba(255,255,255,.82);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: .95rem;
}
.pie .envoltura{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}
.pie h3{
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--menta); margin-bottom: 1rem;
}
.pie a{ color: #fff; }
/* --- Tira de logos del pie ---
   Va sin título: los logos hablan solos. Está armada por líneas (.fila) para
   poder sumar más adelante otras filas con logos de tamaños distintos.
   Vienen en versión blanca, así que van directo sobre el azul noche. */
.pie .tira{ display: block; margin-top: 3rem; }
.institucional{ display: flex; flex-direction: column; gap: 2rem; }
.institucional .fila{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.4rem clamp(1.8rem, 4vw, 3.5rem);
}
.institucional a{ display: block; }
.institucional img{ width: auto; max-width: 100%; opacity: .92; }
.institucional a:hover img{ opacity: 1; }
/* Una altura por logo: cada marca tiene su propia proporción. */
.institucional .logo-unco{ height: 76px; }
.institucional .logo-empro{ height: 34px; }
.legal{
  border-top: 1px solid rgba(255,255,255,.16);
  margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .85rem; color: rgba(255,255,255,.6);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}

/* --- Apariciones al hacer scroll --- */
.aparece{ opacity: 0; transform: translateY(22px); }
.aparece.visible{
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  /* La duración y también el delay: con el delay puesto, el contenido de
     la portada sigue invisible los primeros 300 ms aunque la animación
     dure nada, porque las entradas usan fill backwards. */
  *{ animation-duration: .001s !important; animation-delay: 0s !important;
     transition-duration: .001s !important; }
  .aparece{ opacity: 1; transform: none; }
  .pista{ scroll-behavior: auto; }
}

/* --- Entrada de la portada --- */
@keyframes surge{ from{ opacity:0; transform: translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes iza{ from{ opacity:0; transform: scale(.9) translateY(14px); } to{ opacity:1; transform:none; } }
.portada .edicion, .portada .titulo, .portada .fecha, .portada .sede, .portada .acciones{
  animation: surge .8s cubic-bezier(.22,.7,.3,1) backwards;
}
.portada .edicion{ animation-delay: .05s; }
.portada .titulo{ animation-delay: .15s; }
.portada .fecha{ animation-delay: .3s; }
.portada .sede{ animation-delay: .38s; }
.portada .acciones{ animation-delay: .46s; }
.medallon{ animation: iza 1s cubic-bezier(.22,.7,.3,1) .3s backwards; }