/* ==========================================================================
   /ad_formats/ — page-specific layout
   Links after site.css (tokens/buttons) + inner.css (shared inner-page bits).
   Reuses the shared dark-art hero background (.ihero) but overrides its inner
   layout (this hero is copy-left / illustration-right, not centered+video).
   Signature feature: the T395 platform filter (JS in /js/ad_formats.js).
   ========================================================================== */

/* Body offset: fixed 82px header + fixed 50px 2nd-level strip (>=1200px);
   below 1200px the strip is hidden and the header collapses to 60px. */
body { padding-top: 132px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* 2nd-level strip: mark the current page active. Live does this with inline JS
   (fontWeight 900), but Tilda's t396_init rebuilds the artboard and drops the
   inline style, so we pin it page-scoped here (data-elem-id 1714458621061 =
   "Ad Formats" in the shared menu-2nd partial). Robust against the JS timing. */
#menu-2nd #to-ad-formats a { font-weight: 900; }

/* ============================================================= 01 HERO ==== */
/* .ihero (inner.css) supplies the dark hexagon art + veil + red glow. */
.afhero { padding: 64px 0 80px; }
.afhero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: center;
  min-height: 460px;
}
.afhero-title {
  font-size: clamp(40px, 5.4vw, 62px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 26px;
}
.afhero-title .af-white { color: #fff; display: block; }
.afhero-title em { font-style: normal; color: var(--coral); display: block; }
.afhero-sub {
  font-size: 20px; line-height: 1.55; color: #fff;
  margin: 0 0 40px; max-width: 480px;
}
.afhero-btn { border-radius: 30px; height: 55px; padding: 0 34px; font-size: 14px; }

/* copy-left / illustration-right */
.afhero-visual { position: relative; min-height: 360px; }
.afhero-laptop {
  display: block; width: 82%; height: auto; margin-left: auto;
  filter: drop-shadow(0 24px 46px rgba(6,8,30,.4));
}
.afhero-phone {
  position: absolute; left: 0; bottom: -4%;
  width: 30%; height: auto;
  filter: drop-shadow(0 22px 36px rgba(6,8,30,.45));
}

/* ================================================ 02 FILTER + 03 GRID ==== */
.af-formats { padding-top: 90px; }

/* -- filter tab bar (desktop) -- */
.af-filter {
  display: inline-flex;
  margin: 0 auto 46px;
  padding: 4px;
  border: 1.5px solid #CDD4E2;
  border-radius: 40px;
  background: transparent;
}
/* center the inline-flex bar */
.af-formats .wrap { text-align: center; }
.af-grid, .af-card { text-align: left; }

.af-tab {
  position: relative;
  appearance: none;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit;
  font-size: 20px; font-weight: 600; line-height: 1;
  color: var(--navy);
  padding: 14px 24px;
  border-radius: 40px;
  transition: background .15s ease, color .15s ease;
}
.af-tab:not(.is-active) { font-weight: 400; }
/* subtle vertical dividers between inactive tabs */
.af-tab:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(13,18,64,.14);
}
.af-tab.is-active::before,
.af-tab.is-active + .af-tab::before { opacity: 0; }
.af-tab.is-active { background: var(--navy); color: #fff; }
.af-tab:hover:not(.is-active) { color: var(--red); }

/* -- filter dropdown (mobile) -- */
.af-select-wrap { display: none; }
.af-select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  font-family: inherit; font-size: 18px; font-weight: 600;
  color: #fff; background: var(--navy);
  border: 0; border-radius: 40px;
  padding: 20px 52px 20px 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 26px center;
}

/* -- formats grid -- */
.af-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.af-card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px 28px;
  box-shadow: 0 18px 40px rgba(13,18,64,.06);
}
.af-card[hidden] { display: none; }

.af-card-media {
  min-height: 150px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.af-card-media img { width: 100%; height: auto; }

.af-tags { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Device tabs on the original Tilda page show cards without platform tags —
   tags only appear under "All Formats". `.af-filtered` is set by ad_formats.js. */
.af-formats.af-filtered .af-tags { display: none; }
.af-tags li {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy);
  background: #EDEFFA;
  border-radius: 20px;
  padding: 6px 14px;
}

.af-card-title { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0 0 8px; }
.af-card-sublabel { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.af-card-desc { font-size: 16px; line-height: 1.5; color: var(--body); margin: 0 0 16px; }

.af-bullets { list-style: none; margin: 0 0 22px; padding: 0; }
.af-bullets li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  font-size: 16px; line-height: 1.45; color: var(--body);
}
.af-bullets li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--body);
}

.af-demo {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  margin-top: auto;
  background: var(--red); color: #fff;
  border-radius: 30px;
  padding: 14px 30px;
  font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.af-demo:hover { background: var(--red-dark); box-shadow: 0 8px 22px rgba(221,66,66,.35); }

/* ==================================== 04 Ready to maximize revenue? (CTA) == */
.af-cta-section { padding: 72px 0 90px; }
.af-cta {
  text-align: center;
  border: 1px solid #E8EBF2;
  border-radius: 40px;
  padding: 56px 24px 64px;
}
.af-cta-illus { width: 220px; height: auto; margin: 0 auto 22px; display: block; }
.af-cta-head {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.08; font-weight: 700; color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 auto 20px; max-width: 720px;
}
.af-cta-sub { font-size: 20px; line-height: 1.55; color: var(--body); margin: 0 auto 34px; max-width: 560px; }
.af-cta-btn { border-radius: 70px; }

/* accessibility helper */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1100px) {
  .af-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 900px) {
  .afhero { padding: 32px 0 44px; }
  .afhero-inner { grid-template-columns: 1fr; gap: 26px; min-height: 0; }
  .afhero-visual { order: -1; min-height: 0; max-width: 460px; margin: 0 auto; }
  .afhero-title { font-size: clamp(36px, 9vw, 52px); }
  .afhero-sub { max-width: none; margin-bottom: 30px; }
  /* the long ES label ("Encuentre los mejores formatos para mi sitio") +
     global .pill-btn nowrap gave the button a 454px min-content, blowing the
     1fr hero column past the viewport and clipping title/copy/button — let
     the label wrap inside the pill instead */
  .afhero-btn { width: 100%; white-space: normal; height: auto; min-height: 55px; padding: 8px 18px; text-align: center; }
}

/* filter -> dropdown on narrow screens (matches live mobile behaviour) */
@media screen and (max-width: 700px) {
  .af-filter { display: none; }
  .af-select-wrap { display: block; max-width: 520px; margin: 0 auto 40px; }
  .af-formats { padding-top: 40px; }
}

@media screen and (max-width: 640px) {
  .af-grid { grid-template-columns: 1fr; gap: 22px; }
  .af-card { max-width: 480px; margin: 0 auto; width: 100%; }
  .af-cta { padding: 40px 20px 46px; border-radius: 28px; }
  .af-cta-btn { width: 100%; }
}