/* ============================================
   universal.css — Reset, variables, tipografía base
   ============================================ */

@layer reset, tokens, base, primitivas, componentes, utilidades;

@layer reset {
  /* Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

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

@layer tokens {
  /* CSS Custom Properties — Brand */
  :root {
    /* Brand colors */
    --accent: #FBB03B;
    --accent-soft: #FFE7B0;
    --accent-ink: #5A3B06;
    --blue: #0268B4;
    --deep: #034577;
    --deep-2: #023556;
    --ink: #0E2233;
    --muted: #54677A;
    --paper: #FBF8F2;
    --paper-2: #F1EADC;
    --line: #E7DFCF;

    /* Typography */
    --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Spacing scale */
    --space-xs: 0.5rem;

    /* Layout */
    --container-max: 1200px;
    --container-padding: 32px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-card: 0 18px 40px -28px rgba(14, 34, 51, 0.35);
    --shadow-deep: 0 22px 44px -24px rgba(3, 69, 119, 0.55);
    --shadow-hero: 0 30px 60px -20px rgba(3, 69, 119, 0.5);
  }

  /* En móvil el respiro lateral se reduce: 32px sobre 360px se come el contenido */
  @media (max-width: 600px) {
    :root {
      --container-padding: 20px;
    }
  }
}

@layer base {
  /* Base body */
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    /* Red de seguridad contra desbordes laterales.
       `clip` (no `hidden`) para no romper el position:sticky del header. */
    overflow-x: clip;
  }

  /* Headings */
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    line-height: 1.03;
    letter-spacing: -0.02em;
    font-weight: 800;
  }

  /* Links */
  a {
    color: var(--blue);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: var(--deep);
  }

  /* Emphasis — heading sans, obliqued (matches the client's reference template).
     Bricolage Grotesque ships no true italic face on Google Fonts, so an explicit
     oblique angle is used instead of `italic` — deterministic across browsers,
     rather than leaving synthetic-italic slant angle up to each engine's default. */
  .em {
    font-family: var(--font-heading);
    font-weight: 500;
    font-style: oblique 8deg;
    letter-spacing: -0.01em;
  }

  /* Strong */
  strong {
    font-weight: 700;
    color: var(--deep);
  }

  /* Lists */
  :where(ul, ol) {
    list-style: none;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Selection */
  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
  }
}

@layer utilidades {
  /* Screen-reader only */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ============================================
   animations.css — Keyframes reutilizables
   ============================================ */

@layer componentes {

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes wave {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* Animation utility classes */
.animate-floaty-delay {
  animation: floaty 6s ease-in-out infinite 0.6s;
}

/* Wave bars — each bar needs its own delay */
.wave-bar {
  transform-origin: bottom;
  animation: wave 1.4s ease-in-out infinite;
}

}

/* ============================================
   button.css — Componente de botón reutilizable
   Variantes: accent, deep, outline, white
   Tamaños: small, medium, large
   ============================================ */

@layer componentes {

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn__arrow {
  font-size: 0.9em;
}

/* Sizes */
.btn--small {
  font-size: 14.5px;
  padding: 12px 20px;
}

.btn--medium {
  font-size: 16px;
  padding: 17px 28px;
}

/* Variants */
.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 2px 0 rgba(90, 59, 6, 0.25);
}

.btn--accent:hover {
  color: var(--accent-ink);
  box-shadow: 0 4px 0 rgba(90, 59, 6, 0.3);
}

.btn--deep {
  background: var(--deep);
  color: #fff;
  box-shadow: 0 3px 0 rgba(2, 53, 86, 0.4);
}

.btn--deep:hover {
  color: #fff;
  box-shadow: 0 5px 0 rgba(2, 53, 86, 0.45);
}

.btn--outline {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line);
}

.btn--outline:hover {
  color: var(--ink);
  border-color: var(--deep);
}

.btn--white {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--deep);
}

.btn--white:hover {
  color: var(--deep);
}

}

/* ============================================
   header.css — Header sticky con backdrop blur
   ============================================ */

@layer componentes {

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(251, 248, 242, 0.82);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px var(--container-padding);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo-img {
  height: 40px;
  width: auto;
  display: block;
}

/* Nav links — en móvil se pliegan en el menú hamburguesa. El CTA (.nav__actions)
   queda fuera de este bloque para verse siempre en la barra fija. */
.nav__links {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 28px;
  margin-left: 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
}

.nav__link {
  color: inherit;
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__link[aria-current="page"] {
  color: var(--deep);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Nav item with a dropdown submenu (desktop: hover/focus opens; CSS-only,
   same :hover/:focus-within pattern used by .nav__checkbox for mobile). */
.nav__item {
  position: relative;
}

.nav__item--has-children > .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav__caret {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.nav__item--has-children:hover .nav__caret,
.nav__item--has-children:focus-within .nav__caret {
  transform: rotate(-180deg);
}

.nav__submenu {
  position: absolute;
  top: 100%;
  left: -14px;
  margin-top: 14px;
  min-width: 240px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

/* Invisible bridge so the pointer can travel from the link down to the
   submenu without the gap (margin-top above) closing the :hover state. */
.nav__submenu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav__item--has-children:hover .nav__submenu,
.nav__item--has-children:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__submenu-link {
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav__submenu-link:hover,
.nav__submenu-link:focus-visible {
  background: var(--paper-2);
  color: var(--deep);
}

.nav__submenu-link[aria-current="page"] {
  color: var(--deep);
  background: var(--paper-2);
}

/* Actions */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile burger — hidden by default */
.nav__checkbox {
  display: none;
}

.nav__burger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  width: 28px;
  flex-shrink: 0;
  padding: 6px 0;
}

.nav__burger span {
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile responsive */
@media (max-width: 860px) {
  .nav {
    gap: 12px;
  }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: 0 1 auto;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    margin-left: 0;
    padding: 14px var(--container-padding) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -18px rgba(14, 34, 51, 0.25);
    font-size: 16px;
  }

  .nav__link {
    padding: 10px 0;
  }

  .nav__link[aria-current="page"] {
    box-shadow: none;
    color: var(--blue);
  }

  /* Submenú: en móvil no depende de hover — se muestra siempre expandido
     e indentado bajo su item padre, dentro del propio menú hamburguesa.
     El padre (p. ej. "Services") sigue siendo un enlace normal a su propia
     página de resumen; el submenú solo se agrega debajo, no lo reemplaza. */
  .nav__caret {
    display: none;
  }

  .nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 2px 0 6px;
    padding: 0 0 0 14px;
    border: none;
    box-shadow: none;
    background: none;
    gap: 0;
  }

  .nav__submenu::before {
    content: none;
  }

  .nav__submenu-link {
    padding: 8px 0;
    font-size: 15px;
    color: var(--muted);
  }

  /* El CTA se queda en la barra, entre el logo y el burger */
  .nav__actions {
    margin-left: auto;
  }

  .nav__checkbox:checked ~ .nav__links {
    display: flex;
  }

    /* Focusable por teclado, pero fuera de la vista (no display:none) */
  .nav__checkbox {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .nav__burger {
    display: flex;
  }

  .nav__checkbox:focus-visible ~ .nav__burger {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* Burger → X */
  .nav__checkbox:checked ~ .nav__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav__checkbox:checked ~ .nav__burger span:nth-child(2) {
    opacity: 0;
  }

  .nav__checkbox:checked ~ .nav__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Pantallas estrechas: logo y CTA caben en una línea junto al burger */
@media (max-width: 520px) {
  .nav {
    gap: 10px;
  }

  .nav__logo-img {
    height: 32px;
  }

  .nav__actions .btn--small {
    font-size: 13px;
    padding: 10px 14px;
  }

  .nav__actions .btn__arrow,
  .nav__cta-extra {
    display: none;
  }
}

}

/* ============================================
   footer.css — Footer del sitio
   ============================================ */

@layer componentes {

.site-footer {
  background: var(--ink);
  color: #fff;
}

.footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--container-padding) 40px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}

/* Brand */
.footer__logo-img {
  height: 60px;
  width: auto;
  display: block;
}

.footer__tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-top: 16px;
  max-width: 320px;
  font-weight: 500;
}

/* Labels */
.footer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Links */
.footer__contact-links,
.footer__social-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
}

.footer__contact-links a,
.footer__social-links a {
  color: #fff;
}

.footer__contact-links .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.footer__contact-links a:not(.btn):hover,
.footer__social-links a:hover {
  color: var(--accent);
}

/* Bottom bar */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 40px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ====== COOKIE BANNER (global, cargado por default/main layouts) ====== */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 560px;
  margin-inline: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 16px);
  padding: 18px 22px;
  box-shadow: 0 22px 44px -18px rgba(14, 34, 51, 0.4);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 500;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.cookie-banner__btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

.cookie-banner__btn--ghost:hover {
  border-color: var(--muted);
  color: var(--ink);
}

.cookie-banner__btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.cookie-banner__btn--accent:hover {
  filter: brightness(1.05);
}

@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-banner__actions {
    justify-content: center;
  }
}

}

/* ============================================
   styles-home.css — Estilos de la página de inicio
   Todas las secciones: Hero, Logo strip, Stats, Who we serve,
   Core services, Podcast engine, How it works, Add-ons,
   Results, Testimonials, Why Magnetic, Pricing, Not a fit, Final CTA
   ============================================ */

@layer componentes {

/* ====== BADGE / TAG ====== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 13px;
  border-radius: var(--radius-full);
}

.badge--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.badge--soft {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.badge--white {
  background: #fff;
  color: var(--deep);
  border: 1px solid var(--line);
}


/* ====== HERO ====== */
.hero {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 72px;
  /* .hero__glow sobresale 60px por la derecha: sin esto genera scroll lateral */
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: 60px;
  right: -60px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5BB6F2, #0268B4 70%);
  filter: blur(8px);
  opacity: 0.16;
  z-index: 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero__title {
  font-size: clamp(2.5rem, 5.5vw, 3.875rem);
  font-weight: 800;
  margin-top: 26px;
  color: var(--ink);
  line-height: 1.2;
}

.hero__title .em {
  color: var(--blue);
  font-weight: 900;
}

.hero__subtitle {
  font-size: 19px;
  color: var(--muted);
  margin-top: 26px;
  max-width: 520px;
  font-weight: 500;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.hero__actions--tight {
  margin-top: 28px;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.hero__avatars {
  display: flex;
}

.hero__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--paper);
}

.hero__avatar:nth-child(1) { background: linear-gradient(135deg, #FBB03B, #F2793B); }
.hero__avatar:nth-child(2) { background: linear-gradient(135deg, #5BB6F2, #0268B4); margin-left: -10px; }
.hero__avatar:nth-child(3) { background: linear-gradient(135deg, #034577, #0E2233); margin-left: -10px; }

/* Hero visual card */
.hero__visual {
  position: relative;
  height: 460px;
}

.hero__visual--compact {
  height: 340px;
}

.hero__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero__card-content--photo {
  background: linear-gradient(180deg, rgba(2, 104, 180, 0) 40%, rgba(3, 69, 119, 0.92) 100%);
}

.hero__card {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(150deg, #0268B4, #034577);
  box-shadow: var(--shadow-hero);
  overflow: hidden;
}

.hero__card-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #FBB03B, #F2793B);
  opacity: 0.9;
}

.hero__card-content {
  position: relative;
  padding: 28px;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hero__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero__card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.hero__card-ep {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.16);
  padding: 4px 9px;
  border-radius: var(--radius-full);
}

.hero__card-bottom {
  margin-top: auto;
}

.hero__wave {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 66px;
  margin-bottom: 22px;
}

.hero__wave-bar {
  flex: 1;
  border-radius: 3px;
  height: 100%;
}

.hero__wave-bar:nth-child(1) { animation-delay: 0s; }
.hero__wave-bar:nth-child(2) { animation-delay: 0.2s; }
.hero__wave-bar:nth-child(3) { animation-delay: 0.35s; }
.hero__wave-bar:nth-child(4) { animation-delay: 0.5s; }
.hero__wave-bar:nth-child(5) { animation-delay: 0.15s; }
.hero__wave-bar:nth-child(6) { animation-delay: 0.6s; }
.hero__wave-bar:nth-child(7) { animation-delay: 0.28s; }
.hero__wave-bar:nth-child(8) { animation-delay: 0.44s; }

.hero__wave-bar--accent {
  background: var(--accent);
}

.hero__wave-bar--white {
  background: rgba(255, 255, 255, 0.7);
}

.hero__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 23px;
}

.hero__card-meta {
  opacity: 0.8;
  font-size: 13.5px;
  margin-top: 3px;
}

/* Hero floating badges */
.hero__float-output {
  position: absolute;
  bottom: -18px;
  right: -20px;
  background: #fff;
  padding: 15px 17px;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 30px -12px rgba(14, 34, 51, 0.3);
  border: 1px solid var(--line);
}

.hero__float-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
}

.hero__float-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__float-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.hero__float-output .hero__float-value {
  color: var(--deep);
}

.hero__float-sub {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}


/* ====== LOGO STRIP ====== */
.logo-strip {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--container-padding) 64px;
}

.logo-strip--tight {
  padding-top: 72px;
}

.logo-strip__title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}

.logo-strip__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 48px;
  align-items: center;
}

/* Real logos (client brands, or the companies featured in embedded
   interviews) replacing a plain-text brand name. Both the
   home's brand strip and the "interviews featuring leaders from" strip
   share this — one component, two data sets. */
.logo-strip__logo-link {
  display: flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.logo-strip__logo-link:hover,
.logo-strip__logo-link:focus-visible {
  opacity: 1;
}

.logo-strip__logo {
  /* Fixed height, not a bounding box: the 10 logos across both strips range
     from near-square (PeopleReign) to very wide wordmarks (Angie Sammartino,
     D2DExperts), so they line up on a shared height and each keeps its own
     width from its natural ratio — the browser derives this same box from
     the width/height already set on each <img>/<svg>, so there's no layout
     shift once it loads. */
  height: 40px;
  width: auto;
  display: block;
}

/* When .logo-strip__logo wraps an inline <svg> (D2DExperts,
   Angie Sammartino, auggie) instead of an <img>, the height above only
   constrains the wrapper span — the svg still carries its own fixed
   width/height attributes and won't resize on its own. Same fix as
   .case-card__logo-mark svg. */
.logo-strip__logo svg {
  display: block;
  width: auto;
  height: 100%;
}


/* ====== STATS BAR ====== */
.stats-bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px var(--container-padding) 0;
}

.stats-bar--tight {
  padding-top: 56px;
}

.stats-bar__grid {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 20px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stats-bar__item {
  padding: 0 28px;
  text-align: center;
}

.stats-bar__item + .stats-bar__item {
  border-left: 1px solid var(--line);
}

.stats-bar__number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--deep);
  line-height: 1;
}

.stats-bar__unit {
  font-size: 22px;
  color: var(--muted);
}

.stats-bar__unit--accent {
  color: var(--accent);
}

.stats-bar__label {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 12px;
}


/* ====== SECTION HEADER (reusable) ====== */
.section-header {
  text-align: center;
  margin-bottom: 52px;
}

.section-header__title {
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 800;
  margin: 22px auto 0;
  max-width: 840px;
}

.section-header__title .em {
  color: var(--blue);
}

.section-header__desc {
  font-size: 17px;
  color: var(--muted);
  max-width: 660px;
  margin: 22px auto 0;
  font-weight: 500;
}


/* ====== WHO WE SERVE ====== */
.who-serve {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
  text-align: center;
}

.who-serve__title {
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 800;
  margin: 22px auto 0;
  max-width: 840px;
}

.who-serve__title .em {
  color: var(--blue);
}

.who-serve__desc {
  font-size: 17px;
  color: var(--muted);
  max-width: 660px;
  margin: 22px auto 0;
  font-weight: 500;
}


/* ====== CORE SERVICES ====== */
.services {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 72px var(--container-padding) 0;
}

.services__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.services__title {
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 800;
  margin-top: 18px;
}

.services__title .em {
  color: var(--blue);
}

.services__intro {
  color: var(--muted);
  max-width: 360px;
  font-weight: 500;
  font-size: 15px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.services__grid--four {
  grid-template-columns: repeat(2, 1fr);
}

/* Service card */
.service-card {
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.service-card__visual {
  height: 200px;
  position: relative;
}

.service-card__visual .hero__card-img {
  object-position: center 28%;
}

.service-card__visual--audio {
  background: linear-gradient(140deg, #5BB6F2, #0268B4);
}

.service-card__visual--video {
  background: linear-gradient(140deg, #FBB03B, #F2793B);
  display: grid;
  place-items: center;
}

.service-card__visual--launch {
  background: linear-gradient(140deg, #023556, #0268B4);
  overflow: hidden;
}

/* Audio wave bars in visual — a short meter strip along the bottom edge,
   not a full-height overlay, so it accents the photo instead of hiding it. */
.service-card__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 26px 14px;
}

.service-card__wave-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
}

.service-card__wave-bar:nth-child(1) { height: 28%; }
.service-card__wave-bar:nth-child(2) { height: 64%; }
.service-card__wave-bar:nth-child(3) { height: 92%; }
.service-card__wave-bar:nth-child(4) { height: 50%; }
.service-card__wave-bar:nth-child(5) { height: 78%; }
.service-card__wave-bar:nth-child(6) { height: 36%; }
.service-card__wave-bar:nth-child(7) { height: 60%; }

/* Video play button */
.service-card__play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
}

.service-card__play-icon {
  width: 0;
  height: 0;
  border-left: 16px solid var(--accent-ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}

/* Launch glow circle */
.service-card__glow {
  position: absolute;
  top: -30px;
  left: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #FBB03B, #F2793B);
  opacity: 0.85;
}

/* Most popular badge */
.service-card__popular {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  z-index: 2;
}

/* Card body */
.service-card__body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card__title {
  font-size: 23px;
  font-weight: 800;
}

.service-card__desc {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 10px;
  font-weight: 500;
}

.service-card__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.service-card__list li {
  display: flex;
  gap: 8px;
}

.service-card__check {
  color: var(--blue);
}

.service-card__link {
  margin-top: 24px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--deep);
}

/* ====== MID-PAGE CTA ====== */
.mid-cta {
  display: flex;
  justify-content: center;
  padding: 56px var(--container-padding) 0;
}

/* Dark variant (launch card) */
.service-card--dark {
  background: var(--deep);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-deep);
}

.service-card--dark .service-card__desc {
  color: rgba(255, 255, 255, 0.78);
}

.service-card--dark .service-card__list {
  color: #fff;
}

.service-card--dark .service-card__check {
  color: var(--accent);
}

.service-card--dark .service-card__link {
  color: var(--accent);
}


/* ====== PODCAST ENGINE (4 pillars) ====== */
.engine {
  background: var(--paper-2);
  margin-top: 104px;
}

.engine__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding);
}

.engine__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.pillar {
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 22px;
}

.pillar__title {
  font-size: 19px;
  font-weight: 800;
  margin-top: 20px;
}

.pillar__desc {
  font-size: 14px;
  margin-top: 10px;
  font-weight: 500;
}

.pillar__desc--spaced {
  margin-top: 14px;
}

.pillar__link {
  display: inline-block;
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pillar__link:hover,
.pillar__link:focus-visible {
  text-decoration: underline;
}

/* Pillar color variants */
.pillar--blue {
  background: linear-gradient(155deg, #5BB6F2, #0268B4);
  color: #fff;
}

.pillar--blue .pillar__icon {
  background: rgba(255, 255, 255, 0.2);
}

.pillar--blue .pillar__desc {
  color: rgba(255, 255, 255, 0.88);
}

.pillar--blue .pillar__link {
  color: var(--accent);
}

.pillar--deep {
  background: linear-gradient(155deg, #0A5A93, #023556);
  color: #fff;
}

.pillar--deep .pillar__icon {
  background: rgba(255, 255, 255, 0.18);
}

.pillar--deep .pillar__desc {
  color: rgba(255, 255, 255, 0.85);
}

.pillar--deep .pillar__link {
  color: var(--accent);
}

.pillar--teal {
  background: linear-gradient(155deg, #3FC7D4, #1B8FB0);
  color: #04333B;
}

.pillar--teal .pillar__icon {
  background: rgba(255, 255, 255, 0.35);
}

.pillar--teal .pillar__desc {
  color: rgba(4, 51, 59, 0.82);
  font-weight: 600;
}

.pillar--teal .pillar__link {
  color: #fff;
}

.pillar--accent {
  background: linear-gradient(155deg, #FBB03B, #F2793B);
  color: var(--accent-ink);
}

.pillar--accent .pillar__icon {
  background: rgba(255, 255, 255, 0.4);
}

.pillar--accent .pillar__link {
  color: #fff;
}

.pillar--accent .pillar__desc {
  color: rgba(90, 59, 6, 0.85);
  font-weight: 600;
}


/* ====== HOW IT WORKS ====== */
.how {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
}

.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* .how__grid is shared with the 3-step process sections on service pages —
   this modifier is scoped to the home page's 4-step version only, so it
   doesn't change column count anywhere .how__grid is reused with 3 items. */
.how__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.step {
  border-radius: var(--radius-lg);
  padding: 34px;
  overflow: hidden;
}

.step__number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}

.step__title {
  font-size: 21px;
  font-weight: 800;
  margin-top: 22px;
}

.step__desc {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 10px;
  font-weight: 500;
}

/* Step color variants */
.step--1 {
  background: #E8F2FB;
  border: 1px solid #CFE4F6;
}

.step--1 .step__number {
  color: #fff;
  background: var(--blue);
}

.step--2 {
  background: #FFF3DE;
  border: 1px solid #F6E4C0;
}

.step--2 .step__number {
  color: var(--accent-ink);
  background: var(--accent);
}

.step--3 {
  background: #E4F5F7;
  border: 1px solid #C6E8EC;
}

.step--3 .step__number {
  color: #fff;
  background: #1B8FB0;
}

.step--4 {
  background: #E3EAF2;
  border: 1px solid #C9D8E8;
}

.step--4 .step__number {
  color: #fff;
  background: var(--deep);
}


/* ====== ADD-ONS ====== */
.addons {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
}

.addons__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.addons__title {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  font-weight: 800;
  margin-top: 18px;
}

.addons__title .em {
  color: var(--blue);
}

.addons__intro {
  color: var(--muted);
  max-width: 360px;
  font-weight: 500;
  font-size: 15px;
}

.addons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.addon-card {
  border-radius: var(--radius-lg);
  padding: 30px;
}

.addon-card__title {
  font-size: 17px;
  font-weight: 800;
}

.addon-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.addon-card__tag {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 9px;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.addon-card__tag:hover,
.addon-card__tag:focus-visible {
  transform: translateY(-2px);
}

/* Addon variants */
.addon-card--social {
  background: linear-gradient(160deg, #EAF3FB, #fff);
  border: 1px solid #D8E8F5;
}

.addon-card--social .addon-card__title {
  color: var(--blue);
}

.addon-card--media {
  background: linear-gradient(160deg, #FDF3E2, #fff);
  border: 1px solid #F4E4C6;
}

.addon-card--media .addon-card__title {
  color: #B9761A;
}

.addon-card--brand {
  background: linear-gradient(160deg, #E6F5F7, #fff);
  border: 1px solid #C9E8EC;
}

.addon-card--brand .addon-card__title {
  color: #12798F;
}


/* ====== RESULTS ====== */
.results {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* .results__grid is shared site-wide and defaults to 4 columns — this
   modifier scopes down to podcast-launch's 2-card "outcomes" section only,
   so no other page's 4-card grid is affected. Narrower + centered so the
   2 cards don't stretch to a width designed for 4. */
.results__grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin: 0 auto;
}

.result-card {
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--shadow-card);
}

.result-card__number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 38px;
}

.result-card__label {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 8px;
}

/* Result color variants */
.result-card--blue {
  background: linear-gradient(150deg, #5BB6F2, #0268B4);
  color: #fff;
}

.result-card--blue .result-card__label {
  opacity: 0.9;
}

.result-card--deep {
  background: var(--deep);
  color: #fff;
}

.result-card--deep .result-card__number {
  color: var(--accent);
}

.result-card--deep .result-card__label {
  opacity: 0.9;
}

.result-card--accent {
  background: linear-gradient(150deg, #FBB03B, #F2793B);
  color: var(--accent-ink);
}

.result-card--accent .result-card__label {
  font-weight: 700;
}

.result-card--teal {
  background: linear-gradient(150deg, #3FC7D4, #1B8FB0);
  color: #04333B;
}

.result-card--teal .result-card__label {
  font-weight: 700;
}


/* ====== TESTIMONIALS ====== */
.testimonials {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
}

.testimonials__title {
  text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 2.125rem);
  font-weight: 800;
  margin-bottom: 48px;
  max-width: 760px;
  margin-inline: auto;
}

.testimonials__title .em {
  color: var(--blue);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Componente .testimonial — reutilizado en home, about y case-studies.
   Vivía en components.css; se restauró aquí al eliminarse ese archivo. */
.testimonial {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

/* Cada testimonial-card enlaza afuera (al perfil o canal de quien habla).
   El link envuelve el <figure> completo; el estilo visual vive en .testimonial,
   así que el wrapper solo aporta el comportamiento de tarjeta clicable. */
.testimonial-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease;
}

.testimonial-card-link:hover,
.testimonial-card-link:focus-visible {
  transform: translateY(-3px);
}

.testimonial-card-link:hover .testimonial,
.testimonial-card-link:focus-visible .testimonial {
  box-shadow: var(--shadow-deep);
}

.testimonial-card-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.testimonial__quote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 500;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__name {
  display: block;
  font-weight: 800;
}

.testimonial__role {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}


/* ====== WHY MAGNETIC ====== */
.why {
  background: var(--deep);
  color: #fff;
  margin-top: 104px;
  position: relative;
  overflow: hidden;
}

/* Foto de estudio de fondo: reutiliza .hero__card-img, solo se atenúa */
.why .hero__card-img {
  opacity: 0.18;
}

.why__container {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.why__title {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  font-weight: 800;
  margin-top: 20px;
}

.why__title .em {
  color: var(--accent);
}

.why__desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  margin-top: 20px;
  font-weight: 500;
}

.why__stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.why__stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 32px;
  color: var(--accent);
}

.why__stat-label {
  font-size: 13px;
  opacity: 0.8;
  font-weight: 600;
}

.why__certs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cert {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 22px;
}

.cert__name {
  font-weight: 800;
  font-size: 15px;
}

.cert__desc {
  font-size: 12.5px;
  opacity: 0.75;
  margin-top: 6px;
  font-weight: 500;
}

.cert--light {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink);
}

.cert--light .cert__desc {
  color: var(--muted);
  opacity: 1;
}


/* ====== PRICING ====== */
.pricing {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card {
  border-radius: 26px;
  padding: 36px;
  display: flex;
  flex-direction: column;
}

.price-card--light {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.price-card--dark {
  background: var(--deep);
  color: #fff;
  position: relative;
  box-shadow: var(--shadow-deep);
}

.price-card__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: var(--radius-full);
}

.price-card__tier {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-card--dark .price-card__tier {
  color: rgba(255, 255, 255, 0.7);
}

/* Small label sitting above the big price ("Starting at") — separate from
   .price-card__period, which sits inline right after the number ("/month",
   "one-time"). Two different positions, so two different elements. */
.price-card__starting-at {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 14px;
}

.price-card--dark .price-card__starting-at {
  color: rgba(255, 255, 255, 0.7);
}

.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}

.price-card__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 46px;
  color: var(--ink);
}

.price-card--dark .price-card__price {
  color: var(--accent);
}

.price-card__period {
  color: var(--muted);
  font-weight: 600;
}

.price-card--dark .price-card__period {
  color: rgba(255, 255, 255, 0.7);
}

.price-card__desc {
  color: var(--muted);
  font-size: 14px;
  margin-top: 10px;
  font-weight: 500;
}

.price-card--dark .price-card__desc {
  color: rgba(255, 255, 255, 0.8);
}

.price-card__list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 600;
}

.price-card__list li {
  display: flex;
  gap: 8px;
}

.price-card__check {
  color: var(--blue);
}

.price-card--dark .price-card__check {
  color: var(--accent);
}

.price-card__cta {
  display: block;
  text-align: center;
  font-weight: 700;
  padding: 14px;
  border-radius: var(--radius-full);
  margin-top: 28px;
}

.price-card__cta--outline {
  background: #fff;
  border: 1.5px solid var(--deep);
  color: var(--deep);
}

.price-card__cta--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.pricing__note {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 22px;
  font-family: var(--font-mono);
}


/* ====== INLINE CTA (in-content) ====== */
.inline-cta {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--container-padding) 0;
}

.inline-cta__box {
  background: var(--paper-2);
  border-radius: 26px;
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.inline-cta__headline {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.inline-cta__box .btn {
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .inline-cta__box {
    flex-direction: column;
    text-align: center;
    padding: 32px;
  }
}

/* ====== NOT A FIT ====== */
.not-fit {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding) 0;
}

.not-fit__box {
  background: var(--paper-2);
  border-radius: 26px;
  padding: 52px;
}

.not-fit__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
}

.not-fit__title {
  font-size: clamp(1.75rem, 3.5vw, 2rem);
  font-weight: 800;
  margin-top: 18px;
}

.not-fit__title .em {
  color: var(--blue);
}

.not-fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Hanging dash, not flexbox: when a list item's text contains an inline
   element (a link mid-sentence, e.g. "...our <a>free resources</a> will..."),
   display:flex splits the text into several anonymous flex items — the dash,
   the text before the link, the <a> itself, the text after — each one a
   separate row item that wraps *on its own*, so a two-word link like "free
   resources" can break into "free" / "resources" on two lines while its
   flex item shrinks. Pulling the dash out with position:absolute instead
   keeps the rest of the <li> as one normal text flow that wraps as a whole
   paragraph, exactly like any other paragraph containing a link. */
.not-fit__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.not-fit__dash {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: 800;
}


/* ====== FINAL CTA ====== */
.final-cta {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 104px var(--container-padding);
}

.final-cta__box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #FBB03B, #F2793B);
  padding: 72px 40px;
  text-align: center;
}

.final-cta__glow-1 {
  position: absolute;
  top: -50px;
  left: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.final-cta__glow-2 {
  position: absolute;
  bottom: -60px;
  right: -30px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(3, 69, 119, 0.18);
}

.final-cta__content {
  position: relative;
}

.final-cta__title {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 800;
  color: var(--accent-ink);
  max-width: 680px;
  margin: 0 auto;
}

.final-cta__desc {
  color: rgba(90, 59, 6, 0.85);
  font-size: 17px;
  margin: 20px auto 0;
  max-width: 540px;
  font-weight: 600;
}

.final-cta__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  background: var(--deep);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 19px 34px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 0 rgba(2, 53, 86, 0.4);
}

.final-cta__action:hover {
  color: #fff;
  box-shadow: 0 6px 0 rgba(2, 53, 86, 0.45);
  transform: translateY(-1px);
}


/* ====== RESPONSIVE ====== */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero__visual {
    height: 380px;
  }

  .how__grid,
  .addons__grid,
  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .services__grid,
  .engine__grid,
  .how__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .results__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  .why__container {
    grid-template-columns: 1fr;
  }

  .not-fit__grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bar__item:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 600px) {
  .services__grid,
  .engine__grid,
  .how__grid--4 {
    grid-template-columns: 1fr;
  }

  .results__grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__item + .stats-bar__item {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 24px;
  }

  .why__certs {
    grid-template-columns: 1fr;
  }

  .why__stats {
    flex-direction: column;
    gap: 20px;
  }

  .hero__float-output {
    display: none;
  }
}

}

/* ============================================
   pages.css — Componentes compartidos de páginas internas
   (services, pricing, about, case studies, blog, schedule)
   Reutiliza el sistema de styles-home.css; aquí solo lo nuevo:
   page-hero, breadcrumb, marquee, tabs, compare-table,
   faq, case-card, addon-row, calendly, prose/post, post-card
   ============================================ */

@layer componentes {

/* ====== PAGE HERO (internal pages) ====== */
.page-hero {
  background: linear-gradient(150deg, var(--deep-2, #023556), var(--deep) 55%, #0268B4);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.page-hero__glow {
  position: absolute;
  top: -80px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, #FBB03B, #F2793B);
  opacity: 0.35;
  filter: blur(10px);
}

.page-hero__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 88px var(--container-padding) 72px;
  position: relative;
  z-index: 1;
}

.page-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.375rem);
  font-weight: 800;
  max-width: 780px;
  margin-top: 24px;
}

.page-hero__title .em {
  color: var(--accent);
}

.page-hero__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin-top: 22px;
  font-weight: 500;
}

.page-hero__subtitle strong {
  color: var(--accent-soft);
}

.page-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.page-hero--split .page-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  padding-block: 48px;
}

.page-hero--split .page-hero__title {
  margin-top: 18px;
}

.page-hero--split .calendly-box__frame {
  height: 660px;
}

.page-hero--center {
  text-align: center;
}

.page-hero--center .page-hero__title,
.page-hero--center .page-hero__subtitle {
  margin-inline: auto;
}

.page-hero--center .page-hero__actions {
  justify-content: center;
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.page-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  padding: 7px 13px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
  transition: background 0.2s ease, color 0.2s ease;
}

/* Chips are sometimes plain <span> (a static fact) and sometimes <a>
   (linking to the relevant page) — when they're links, override the
   site-wide a:hover { color: var(--deep) }. Deep is a dark navy meant for
   light backgrounds; the page-hero itself IS dark navy, so without this the
   chip's text would turn nearly invisible (navy-on-navy) on hover/focus. */
a.page-hero__chip:hover,
a.page-hero__chip:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

/* ====== BREADCRUMB ====== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb__current {
  color: var(--accent);
}

/* ====== MARQUEE (CSS-only carousel) ====== */
.marquee {
  overflow: hidden;
  padding-block: 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee--reverse {
  padding-top: 0;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee__item {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 12px 22px;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}

.marquee__item--accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ====== TABS (CSS-only, radio) ====== */
.tabs {
  max-width: var(--container-max);
  margin: 0 auto;
}

.tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tabs__nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 6px;
  width: max-content;
  margin: 0 auto 44px;
}

.tabs__label {
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  padding: 12px 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.25s ease;
}

.tabs__label:hover {
  color: var(--deep);
}

.tabs__panel {
  display: none;
}

#tab-1:checked ~ .tabs__nav .tabs__label[for="tab-1"],
#tab-2:checked ~ .tabs__nav .tabs__label[for="tab-2"] {
  background: var(--deep);
  color: #fff;
  box-shadow: var(--shadow-deep);
}

#tab-1:checked ~ .tabs__panels .tabs__panel:nth-of-type(1),
#tab-2:checked ~ .tabs__panels .tabs__panel:nth-of-type(2) {
  display: block;
  animation: fade-up 0.4s ease;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====== COMPARE TABLE ====== */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.compare-table th,
.compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.compare-table thead th {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--deep);
  background: var(--paper-2);
}

.compare-table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody th {
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
}

.compare-table__check {
  color: var(--blue);
  font-weight: 800;
}

.compare-table__no {
  color: var(--line);
}

.compare-table__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  color: var(--deep);
}

.compare-table--highlight td:nth-child(3),
.compare-table--highlight th:nth-child(3) {
  background: #FFF8EA;
}

/* ====== FAQ (details/summary) ====== */
.faq {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.faq__item[open] {
  box-shadow: var(--shadow-card);
  border-color: var(--accent);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--deep);
  transition: transform 0.3s ease, background 0.3s ease;
}

.faq__item[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--accent);
  color: var(--accent-ink);
}

.faq__answer {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  max-width: 680px;
}

.faq__answer a {
  font-weight: 700;
}

/* ====== CASE CARD ====== */
.case-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}

.case-card + .case-card {
  margin-top: 32px;
}

.case-card__aside {
  position: relative;
  overflow: hidden;
  padding: 40px 34px;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.case-card__aside .hero__card-img {
  opacity: 0.3;
  z-index: -1;
}

.case-card__aside--blue { background: linear-gradient(150deg, #5BB6F2, #0268B4); }
.case-card__aside--deep { background: linear-gradient(150deg, #0A5A93, #023556); }
.case-card__aside--accent { background: linear-gradient(150deg, #FBB03B, #F2793B); color: var(--accent-ink); }
.case-card__aside--teal { background: linear-gradient(150deg, #3FC7D4, #1B8FB0); color: #04333B; }

/* Some clients (D2D Experts, BabyQuip, Angie Sammartino) don't have a
   themed stock photo the way the others do — using a mismatched generic
   photo here would just be a different flavor of the "imprecise" case
   studies the client asked us to fix. Their real logo stands in for the
   photo instead (the background photo is absolutely positioned behind
   everything else regardless, so skipping it doesn't change the flow —
   no padding adjustment needed). The filter forces every logo
   (recolored-ink SVG or full-color raster alike) to render as a clean
   white mark, since these asides only ship 4 accent-heavy gradients,
   not a light background. */
.case-card__logo-mark {
  filter: brightness(0) invert(1);
  opacity: 0.95;
  max-width: 150px;
  max-height: 46px;
  width: auto;
  height: auto;
}

/* The div wrapper's max-width/max-height above only constrains the box —
   the inline <svg> child still carries its own fixed width/height
   attributes and won't shrink to fit on its own. This makes it scale down
   with its parent instead of overflowing at full intrinsic size. */
.case-card__logo-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.case-card__logo-mark--img {
  display: block;
  margin-bottom: 4px;
}

.case-card__client {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.case-card__metric {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  margin-top: 16px;
  line-height: 1;
}

.case-card__metric-label {
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 10px;
  opacity: 0.92;
}

.case-card__services {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-card__service-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.case-card__body {
  padding: 40px 38px;
}

.case-card__title {
  font-size: 23px;
  font-weight: 800;
}

.case-card__block {
  margin-top: 20px;
}

.case-card__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
}

.case-card__text {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  margin-top: 6px;
}

.case-card__quote {
  margin: 24px 0 0;
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: oblique 8deg;
  font-size: 16.5px;
  color: var(--ink);
}

.case-card__quote-author {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 10px;
}

/* ====== ADDON ROW (catalog with price) ====== */
.addon-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  scroll-margin-top: 96px;
}

.addon-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.addon-row__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font-size: 21px;
}

.addon-row__title {
  font-size: 16.5px;
  font-weight: 800;
}

.addon-row__desc {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 6px;
}

.addon-row__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--deep);
  white-space: nowrap;
}

.addon-row__price-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: right;
}

.addons-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ====== EPISODE EMBED (facade click-to-load) ====== */
.episode-embeds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
}

.episode-embed {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.episode-embed__facade {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--deep);
}

.episode-embed[data-platform="youtube"] .episode-embed__facade { aspect-ratio: 16 / 9; }
.episode-embed[data-platform="spotify"] .episode-embed__facade,
.episode-embed[data-platform="apple"] .episode-embed__facade { aspect-ratio: 1 / 1; }

.episode-embed__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}

.episode-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.episode-embed__platform {
  position: absolute;
  top: 12px;
  left: 12px;
}

.episode-embed__title {
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.episode-embed__title a { color: inherit; }
.episode-embed__title a:hover { color: var(--blue); }

.episode-embed__frame {
  width: 100%;
  border: 0;
  display: block;
}

.episode-embed[data-platform="youtube"] .episode-embed__frame { aspect-ratio: 16 / 9; }
.episode-embed[data-platform="spotify"] .episode-embed__frame { height: 152px; }
.episode-embed[data-platform="apple"] .episode-embed__frame { height: 175px; }

@media (max-width: 600px) {
  .episode-embeds { grid-template-columns: 1fr; }
}

/* ====== CALENDLY / CONTACT BOX ====== */
.calendly-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.calendly-box__frame {
  width: 100%;
  height: 700px;
  border: 0;
  display: block;
}

.calendly-box__note {
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ====== PROSE (blog post body) ====== */
.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16.5px;
}

.prose > * + * {
  margin-top: 1.35em;
}

.prose h2 {
  font-size: 28px;
  margin-top: 2em;
}

.prose h3 {
  font-size: 21px;
  margin-top: 1.7em;
}

.prose ul,
.prose ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  font-weight: 500;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose ul li::marker,
.prose ol li::marker {
  color: var(--blue);
  font-weight: 700;
}

.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: oblique 8deg;
  font-size: 19px;
  color: var(--deep);
}

.prose img {
  border-radius: var(--radius-md);
}

.prose figure img {
  max-height: 460px;
  width: auto;
  margin-inline: auto;
}

.prose figcaption {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}

.prose .prose__summary {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  font-weight: 600;
  color: var(--ink);
}

/* ====== POST META / HEADER ====== */
.post-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px var(--container-padding) 44px;
  text-align: center;
}

.post-header__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  margin-top: 22px;
}

.post-header__meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.post-body {
  padding: 0 var(--container-padding) 88px;
}

/* ====== AUTHOR BOX (firma E-E-A-T al pie del post) ====== */
.author-box {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.author-box > picture {
  flex-shrink: 0;
}

.author-box__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.author-box__name {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--deep);
  font-size: 17px;
}

.author-box__role {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 2px;
}

.author-box__bio {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  margin-top: 12px;
}

.author-box__links {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* ====== POST CARD (blog index) ====== */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.post-card:hover {
  transform: translateY(-4px);
}

.post-card__visual {
  height: 150px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #5BB6F2, #0268B4);
  display: grid;
  place-items: center;
  font-size: 40px;
}

.post-card__visual--accent {
  background: linear-gradient(140deg, #FBB03B, #F2793B);
}

.post-card__visual--deep {
  background: linear-gradient(140deg, #0A5A93, #023556);
}

.post-card__body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.post-card__title a {
  color: var(--ink);
}

.post-card__title a:hover {
  color: var(--blue);
}

.post-card__excerpt {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 12px;
}

.post-card__meta {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ====== SPLIT SECTION (text + visual card) ====== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split > * {
  min-width: 0;
}

.split__title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 800;
  margin-top: 18px;
}

.split__title .em {
  color: var(--blue);
}

.split__desc {
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 18px;
  font-weight: 500;
}

.split__list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
}

.split__list li {
  display: flex;
  gap: 10px;
}

.split__check {
  color: var(--blue);
  font-weight: 800;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 960px) {
  .page-hero--split .page-hero__container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .case-card {
    grid-template-columns: 1fr;
  }

  .addons-list {
    grid-template-columns: 1fr;
  }

  .posts-grid {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .tabs__nav {
    width: 100%;
  }

  .tabs__label {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
  }
}

@media (max-width: 600px) {
  .addon-row {
    grid-template-columns: 1fr;
  }

  .addon-row__price-label {
    text-align: left;
  }

  .calendly-box__frame {
    height: 620px;
  }

  .author-box {
    flex-direction: column;
    gap: 16px;
  }

  /* width:max-content desborda el viewport con dos pestañas largas */
  .tabs__nav {
    width: 100%;
    max-width: 100%;
  }

  .tabs__label {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    font-size: 14px;
  }
}

}