/* ==========================================================================
   INK FIRE — banners de publicidad propia
   Cinco formatos estándar. Cada banner es un <a class="ifb s-300x250">.
   Usa las mismas tipografías que el sitio (Inter + Lexend Giga).
   ========================================================================== */

.ifb{
  --ink:#16171a;
  --brasa:#e2542c;
  --ease-out:cubic-bezier(.16,1,.3,1);
  position:relative;display:block;overflow:hidden;
  width:var(--w);height:var(--h);
  background:var(--ink);color:#fff;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  text-decoration:none;-webkit-font-smoothing:antialiased;
  isolation:isolate;
}
.ifb *,.ifb *::before,.ifb *::after{box-sizing:border-box}
.s-728x90 {--w:728px;--h:90px}
.s-970x250{--w:970px;--h:250px}
.s-300x250{--w:300px;--h:250px}
.s-300x600{--w:300px;--h:600px}
.s-320x100{--w:320px;--h:100px}

/* marco fino interior: el detalle que lo hace ver de estudio, no de anuncio */
.ifb::after{
  content:"";position:absolute;inset:7px;z-index:3;pointer-events:none;
  border:1px solid rgba(255,255,255,.14);
}

/* ---------- foto ------------------------------------------------------- */
.ifb-media{position:absolute;inset:0;z-index:0;display:flex}
.ifb-media img{
  flex:1;min-width:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.04);
  transform:scale(1.01);
  transition:transform 1.6s var(--ease-out);
}
.ifb:hover .ifb-media img{transform:scale(1.06)}
.ifb-media figure{position:relative;flex:1;margin:0;min-width:0;display:flex}
.ifb-media figure + figure{border-left:1px solid rgba(255,255,255,.35)}
.ifb-media figcaption{
  position:absolute;left:0;right:0;bottom:12px;z-index:2;text-align:center;
  font-family:'Lexend Giga',Inter,sans-serif;font-weight:300;
  font-size:8px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-shadow:0 0 6px rgba(0,0,0,.6);
}
.ifb-shade{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- textos ----------------------------------------------------- */
.ifb-body{position:absolute;z-index:2;display:flex;flex-direction:column}
.ifb-logo{display:block;height:16px;width:auto;opacity:.92}
.ifb-flama{display:block;height:34px;width:auto;opacity:.9}
.ifb-eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-family:'Lexend Giga',Inter,sans-serif;font-weight:300;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;
}
.ifb-eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--brasa);box-shadow:0 0 8px rgba(226,84,44,.7);
}
.ifb-title{
  margin:0;font-weight:900;letter-spacing:-.055em;line-height:.9;
  text-wrap:balance;
}
.ifb-note{
  margin:0;font-weight:300;line-height:1.45;letter-spacing:-.005em;
  color:rgba(255,255,255,.72);
}
.ifb-cta{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  white-space:nowrap;padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.45);
  transition:border-color .4s ease,gap .5s var(--ease-out);
}
.ifb-cta svg{width:22px;height:8px;flex:none;transition:transform .5s var(--ease-out)}
.ifb:hover .ifb-cta{border-color:var(--brasa);gap:14px}
.ifb:hover .ifb-cta svg{transform:translateX(3px)}
.ifb-rule{display:none;width:1px;align-self:stretch;background:rgba(255,255,255,.18);flex:none}
.s-728x90 .ifb-rule{display:block;margin:22px 0}
/* en los formatos verticales y el billboard: logo arriba, todo lo demás abajo */
.s-300x250 .ifb-body,.s-300x600 .ifb-body,.s-970x250 .ifb-body{justify-content:flex-end}
.ifb-head{margin-bottom:auto}

/* ---------- 300 × 250 · rectángulo ------------------------------------- */
.s-300x250 .ifb-shade{background:linear-gradient(to bottom,rgba(22,23,26,.55),rgba(22,23,26,0) 32%),linear-gradient(to top,rgba(22,23,26,.97) 10%,rgba(22,23,26,.62) 46%,rgba(22,23,26,.08) 78%)}
.s-300x250 .ifb-body{inset:22px}
.s-300x250 .ifb-copy{display:flex;flex-direction:column;gap:10px}
.s-300x250 .ifb-title{font-size:27px}
.s-300x250 .ifb-cta{margin-top:16px}
.s-300x250 .ifb-note,.s-300x250 .ifb-flama{display:none}

/* ---------- 300 × 600 · media página ----------------------------------- */
.s-300x600 .ifb-media{bottom:auto;height:60%}
.s-300x600 .ifb-shade{background:
  linear-gradient(to bottom,rgba(22,23,26,.55),rgba(22,23,26,0) 18%),
  linear-gradient(to top,var(--ink) 40%,rgba(22,23,26,.0) 62%)}
.s-300x600 .ifb-body{inset:28px 28px 32px}
.s-300x600 .ifb-copy{display:flex;flex-direction:column;gap:14px}
.s-300x600 .ifb-title{font-size:40px}
.s-300x600 .ifb-note{font-size:13px}
.s-300x600 .ifb-cta{margin-top:26px}
.s-300x600 .ifb-flama{display:none}

/* ---------- 970 × 250 · billboard -------------------------------------- */
.s-970x250 .ifb-media{left:auto;width:54%}
.s-970x250 .ifb-shade{background:linear-gradient(90deg,var(--ink) 46%,rgba(22,23,26,.55) 60%,rgba(22,23,26,0) 80%)}
.s-970x250 .ifb-body{inset:34px 40px 34px 44px;justify-content:center}
.s-970x250 .ifb-copy,.s-970x250 .ifb-cta{max-width:430px}
.s-970x250 .ifb-head{position:absolute;top:0;right:0;margin:0}
.s-970x250 .ifb-copy{display:flex;flex-direction:column;gap:12px}
.s-970x250 .ifb-title{font-size:42px}
.s-970x250 .ifb-note{font-size:13px;max-width:34em}
.s-970x250 .ifb-cta{margin-top:18px}
.s-970x250 .ifb-flama{display:none}

/* ---------- 728 × 90 · leaderboard ------------------------------------- */
.s-728x90 .ifb-media{left:auto;width:32%}
.s-728x90 .ifb-shade{background:linear-gradient(90deg,var(--ink) 66%,rgba(22,23,26,.4) 78%,rgba(22,23,26,0) 92%)}
.s-728x90 .ifb-body{inset:0 30% 0 0;flex-direction:row;align-items:center;gap:18px;padding:0 0 0 26px}
.s-728x90 .ifb-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.s-728x90 .ifb-title{font-size:23px;white-space:nowrap}
.s-728x90 .ifb-cta{margin-left:auto;align-self:center}
.s-728x90 .ifb-flama{height:38px}
.s-728x90 .ifb-logo,.s-728x90 .ifb-note,.s-728x90 .ifb-title .ifb-long{display:none}

/* ---------- 320 × 100 · móvil ------------------------------------------ */
.s-320x100 .ifb-media{left:auto;width:36%}
.s-320x100 .ifb-shade{background:linear-gradient(90deg,var(--ink) 62%,rgba(22,23,26,.35) 76%,rgba(22,23,26,0) 92%)}
.s-320x100 .ifb-body{inset:0 34% 0 0;flex-direction:row;align-items:center;gap:13px;padding-left:20px}
.s-320x100 .ifb-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.s-320x100 .ifb-title{font-size:17px;white-space:nowrap}
.s-320x100 .ifb-eyebrow{font-size:7.5px;letter-spacing:.26em}
.s-320x100 .ifb-cta{display:none}
.s-320x100 .ifb-flama{height:30px}
.s-320x100 .ifb-media figcaption{display:none}
.s-320x100 .ifb-logo,.s-320x100 .ifb-note,.s-320x100 .ifb-title .ifb-long,.s-320x100 .ifb-rule{display:none}

/* el título corto sólo vive en los formatos de una línea */
.ifb-short{display:none}
.s-728x90 .ifb-title .ifb-short,.s-320x100 .ifb-title .ifb-short{display:inline}
.ifb-eyebrow .ifb-short{display:none!important}
.s-320x100 .ifb-eyebrow .ifb-long{display:none!important}
.s-320x100 .ifb-eyebrow .ifb-short{display:inline!important}
.s-728x90 .ifb-media figcaption{bottom:8px;font-size:7px}

@media (prefers-reduced-motion:reduce){
  .ifb *{transition:none!important}
}

/* ==========================================================================
   s-fluid — la versión que va dentro del sitio, antes del pie.
   Ocupa el ancho de la columna: billboard en escritorio, cuadro en teléfono.
   ========================================================================== */
.promo{padding:0 0 clamp(4rem,9vh,6.5rem)}
.s-fluid{--w:100%;--h:auto}
.s-fluid .ifb-flama,.s-fluid .ifb-rule{display:none}

@media (min-width:760px){
  .s-fluid{height:clamp(250px,24vw,320px)}
  .s-fluid .ifb-media{left:auto;width:56%}
  .s-fluid .ifb-shade{background:linear-gradient(90deg,var(--ink) 44%,rgba(22,23,26,.55) 58%,rgba(22,23,26,0) 78%)}
  .s-fluid .ifb-body{inset:clamp(30px,3.4vw,46px) clamp(30px,3.4vw,46px) clamp(30px,3.4vw,46px) clamp(32px,4vw,60px);justify-content:center}
  .s-fluid .ifb-head{position:absolute;top:0;right:0;margin:0}
  .s-fluid .ifb-copy{display:flex;flex-direction:column;gap:14px;max-width:min(36rem,48%)}
  .s-fluid .ifb-title{font-size:clamp(36px,3.9vw,54px)}
  .s-fluid .ifb-note{font-size:14px;max-width:30em}
  .s-fluid .ifb-cta{margin-top:22px;font-size:10px}
  .s-fluid .ifb-logo{height:18px}
  .s-fluid .ifb-eyebrow{font-size:10px}
}
@media (max-width:759px){
  .s-fluid{aspect-ratio:4/5;max-height:560px}
  .s-fluid .ifb-shade{background:linear-gradient(to bottom,rgba(22,23,26,.55),rgba(22,23,26,0) 28%),linear-gradient(to top,rgba(22,23,26,.97) 22%,rgba(22,23,26,.6) 52%,rgba(22,23,26,.05) 80%)}
  .s-fluid .ifb-body{inset:26px;justify-content:flex-end}
  .s-fluid .ifb-copy{display:flex;flex-direction:column;gap:12px}
  .s-fluid .ifb-title{font-size:clamp(30px,9vw,40px)}
  .s-fluid .ifb-note{font-size:13.5px}
  .s-fluid .ifb-cta{margin-top:20px}
}