/* ══════════════════════════════════════════════════════════════════════
   SISTEMA DE DISEÑO BICM — servicios.bienalcartel.org
   ──────────────────────────────────────────────────────────────────────
   Unifica este tema con bicm-main (bienalcartel.org): misma tipografía,
   misma paleta, mismas curvas de animación, mismos botones.

   Se carga DESPUÉS de style.css para poder redefinir sus tokens. Lo que
   cambia respecto al tema original:

     --font   Inter  →  Gill Sans (la del sitio principal)
     paleta   2 colores  →  los 8 institucionales
     curvas   cubic-bezier(.4,0,.2,1)  →  --smooth de bicm-main

   El amarillo y el verde que ya usaba (#FDB913 / #74B743) resultaron ser
   exactamente los institucionales, así que esos no se mueven: la paleta
   no estaba mal, estaba incompleta.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --font: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', Calibri, 'Trebuchet MS', sans-serif;

  /* Paleta institucional completa */
  --orange: rgb(250,117,22);
  --blue:   rgb(27,111,183);
  --yellow: #FDB913;
  --green:  #74B743;
  --purple: #702c91;
  --teal:   rgb(0,162,169);
  --red:    rgb(225,27,34);
  --pink:   rgb(209,25,114);
  --accent: rgb(0,162,169);

  --black:   #0A0A0A;
  --white:   #ffffff;
  --gray-50: #f9f9f9;
  --gray-100:#f3f3f3;
  --placeholder: #d9d9d9;
  --max-w:   1920px;

  /* Las dos curvas del sitio. --smooth es la de "entrar y asentarse";
     --ease-out queda como estaba para no romper lo ya animado. */
  --ease:     cubic-bezier(0,0,0,1);
  --smooth:   cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body { font-family: var(--font); }

/* ── Tipografía ────────────────────────────────────────────────────────
   Regla de kerning de bicm-main: títulos grandes CERRADOS, textos chicos
   ABIERTOS. Cerrar un párrafo de 14px lo apelmaza; abrir un título de
   46px lo desarma. */
.bicm-title {
  font-size: clamp(26px,3vw,46px); font-weight: 700;
  letter-spacing: -.03em; line-height: .95; text-transform: uppercase;
}
.bicm-subtitle {
  font-size: clamp(20px,2.2vw,32px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.05; text-transform: uppercase;
}
.bicm-eyebrow {
  font-size: clamp(10px,.78vw,13px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.bicm-text {
  font-size: clamp(13px,1vw,15px); font-weight: 500;
  line-height: 1.55; letter-spacing: .012em; color: #444;
}
.bicm-price {
  font-size: clamp(24px,2.4vw,34px); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ── Botón principal ───────────────────────────────────────────────────
   El barrido de color entra desde ABAJO, no es un cambio de fondo seco.
   Es el gesto que identifica al sitio. */
.bicm-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: clamp(14px,1.4vw,20px) clamp(18px,2vw,28px);
  border: 0; background: var(--teal); color: #fff; cursor: pointer;
  font-family: var(--font);
  font-size: clamp(13px,1vw,16px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  transition: color .3s ease, transform .3s var(--smooth);
}
.bicm-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--black);
  transform: translateY(101%); transition: transform .38s var(--smooth);
}
.bicm-btn:hover::before, .bicm-btn:focus-visible::before { transform: none; }
.bicm-btn:active { transform: scale(.985); }
.bicm-btn[disabled] {
  background: rgba(0,0,0,.09); color: rgba(0,0,0,.4); cursor: default; transform: none;
}
.bicm-btn[disabled]::before { display: none; }

.bicm-btn--dark   { background: var(--black); }
.bicm-btn--dark::before   { background: var(--teal); }
.bicm-btn--yellow { background: var(--yellow); color: var(--black); }
.bicm-btn--yellow::before { background: var(--black); }
.bicm-btn--yellow:hover, .bicm-btn--yellow:focus-visible { color: #fff; }
.bicm-btn--green  { background: var(--green); }

/* Enlace de texto con flecha */
.bicm-link {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: clamp(13px,1vw,16px); font-weight: 500;
  letter-spacing: .01em; text-decoration: underline; text-underline-position: from-font;
}
.bicm-link span { display: inline-block; margin-left: .45em; transition: transform .25s var(--smooth); }
.bicm-link:hover span, .bicm-link:focus-visible span { transform: translate(.15em,-.15em); }

/* ── Modal / ficha ─────────────────────────────────────────────────────
   Patrón de .catalog-panel de bicm-main: velo con desenfoque, caja que
   sube y se asienta, contenido en cascada. */
.bicm-modal {
  position: fixed; inset: 0; z-index: 650;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px,3vw,56px);
  background: rgba(8,8,8,.62);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--smooth);
}
.bicm-modal.is-open { opacity: 1; pointer-events: auto; }
.bicm-modal[hidden] { display: none; }

.bicm-modal__box {
  position: relative; width: min(940px, 100%);
  background: #fff; color: var(--black); padding: clamp(24px,3.2vw,52px);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.55);
  transform: translateY(14px) scale(.99);
  transition: transform .5s var(--smooth);
}
.bicm-modal.is-open .bicm-modal__box { transform: none; }
.bicm-modal__box--narrow { width: min(560px, 100%); }

/* CERRAR a la IZQUIERDA: en bicm-main el selector de idioma es fixed
   arriba-derecha con z-index 10050 y tapaba el botón en esa esquina.
   Se mantiene el mismo lado en los dos sitios por consistencia. */
.bicm-modal__close {
  position: absolute; top: clamp(12px,1.4vw,20px); left: clamp(12px,1.4vw,20px); z-index: 2;
  border: 0; background: transparent; color: var(--black); cursor: pointer;
  font-family: var(--font);
  font-size: clamp(11px,.85vw,14px); font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase;
  opacity: .5; transition: opacity .2s ease;
}
.bicm-modal__close:hover, .bicm-modal__close:focus-visible { opacity: 1; }

.bicm-modal__body > * { opacity: 0; transform: translateY(8px); }
.bicm-modal.is-open .bicm-modal__body > * {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .45s var(--smooth);
}
.bicm-modal.is-open .bicm-modal__body > *:nth-child(1) { transition-delay: .08s; }
.bicm-modal.is-open .bicm-modal__body > *:nth-child(2) { transition-delay: .12s; }
.bicm-modal.is-open .bicm-modal__body > *:nth-child(3) { transition-delay: .16s; }
.bicm-modal.is-open .bicm-modal__body > *:nth-child(4) { transition-delay: .20s; }
.bicm-modal.is-open .bicm-modal__body > *:nth-child(5) { transition-delay: .24s; }

/* ── Tarjeta con imagen ────────────────────────────────────────────────
   El recorte lo hace el contenedor, nunca la imagen. */
.bicm-card {
  position: relative; display: block; overflow: hidden;
  border: 0; padding: 0; background: var(--placeholder); color: inherit;
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--smooth), box-shadow .5s var(--smooth);
}
.bicm-card:hover, .bicm-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.3);
}
.bicm-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.bicm-card__media { position: relative; display: block; overflow: hidden; background: var(--placeholder); }
.bicm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--smooth); }
.bicm-card:hover .bicm-card__media img { transform: scale(1.04); }

/* ── Entrada al hacer scroll ───────────────────────────────────────────
   El estado inicial lo pone la clase, no el JS, para que no parpadee
   antes de que corra el script. */
.bicm-fade { opacity: 0; transform: translateY(24px); }
.bicm-fade.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .8s var(--smooth);
}

/* ── Accesibilidad ─────────────────────────────────────────────────────
   Se anulan también los estados iniciales: sin transición que los
   revele, un opacity:0 quedaría invisible para siempre. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bicm-fade, .bicm-modal__body > * { opacity: 1 !important; transform: none !important; }
}