/* =====================================================================
   Exitbrands — hoja base del tema.
   Generado a partir del proyecto Astro (tokens + global.scss + secciones).
   Las rutas de fuentes son relativas a este archivo (assets/css/ -> ../fonts/).
   ===================================================================== */

/* ---------- Tipografias ---------- */
@font-face { font-family: "Avenir Exitbrands"; src: url("../fonts/Avenir LT 35 Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir Exitbrands"; src: url("../fonts/Avenir LT 65 Medium.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir Exitbrands"; src: url("../fonts/Avenir LT 65 Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir Exitbrands"; src: url("../fonts/Avenir LT 95 Black.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Montserrat Exitbrands"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat Exitbrands"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Lato Exitbrands"; src: url("../fonts/Lato-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Exitbrands"; src: url("../fonts/Lato-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Exitbrands"; src: url("../fonts/Lato-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Exitbrands"; src: url("../fonts/Lato-Semibold (1).ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Exitbrands"; src: url("../fonts/Lato-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato Exitbrands"; src: url("../fonts/Lato-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "Skyna Regular Exitbrands"; src: url("../fonts/Skyna-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Skyna DemiBold Exitbrands"; src: url("../fonts/Skyna-DemiBold.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bellota Text Exitbrands"; src: url("../fonts/BellotaText-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pink Bloom Exitbrands"; src: url("../fonts/Pink Bloom.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens / variables base ---------- */
:root {
  --font-body: "Avenir Exitbrands", "Montserrat Exitbrands", "Segoe UI", sans-serif;
  --font-display: "Avenir Exitbrands", "Montserrat Exitbrands", "Segoe UI", sans-serif;
  --font-script: "Pink Bloom Exitbrands", "Brush Script MT", cursive;
  --motion-base: 320ms;
  --motion-slow: 520ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Paleta de marca (espejo de _tokens.scss) */
  --eb-navy: #102d45;
  --eb-teal: #0c8c98;
  --eb-lime: #9eb429;
  --eb-mustard: #db9500;
  --eb-white: #ffffff;
}

/* ---------- Reveal on scroll (de BaseLayout.astro) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--motion-slow) var(--motion-ease),
      transform var(--motion-slow) var(--motion-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-reveal-visible {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   Bloque: exitbrands/difference  (origen: DifferenceSection.astro)
   Los colores expuestos al editor entran como custom properties:
   --diff-bg, --diff-combo-teal, --diff-final  (con fallback de marca).
   ===================================================================== */
.difference-section {
  --difference-shell-gutter: max(1rem, calc((100vw - 1280px) / 2));
  --difference-title-inset: clamp(3.25rem, 13vw, 12.75rem);
  --diff-bg: var(--eb-navy);
  --diff-combo-teal: var(--eb-teal);
  --diff-final: var(--eb-lime);
  position: relative;
  overflow: clip;
  padding: 0 0 2rem 0;
  background: var(--diff-bg);
  color: var(--eb-white);
}
.difference-section *,
.difference-tail * { box-sizing: border-box; }

.difference-section__shell { width: min(calc(100% - 2rem), 1280px); margin-inline: auto; min-width: 0; }

.difference-section__top { display: grid; gap: 0; min-width: 0; align-items: start; }
@media (min-width: 64.01rem) {
  .difference-section__top { position: relative; grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); }
}

.difference-section__title-wrap { position: relative; min-width: 0; padding-bottom: clamp(1.1rem, 1.8vw, 1.35rem); z-index: 2; }
.difference-section__title-wrap h2 { display: grid; gap: 0; line-height: 0.84; justify-items: start; margin: 0; }

.difference-section__intro,
.difference-section__title-line {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% + var(--difference-shell-gutter));
  margin-left: calc(-1 * var(--difference-shell-gutter));
  background: var(--diff-bg);
  border-radius: 0 999px 999px 0;
}

.difference-section__intro {
  margin: 0;
  max-width: calc(100% + var(--difference-shell-gutter));
  padding: 0.42rem clamp(1.05rem, 1.9vw, 1.65rem) 0.5rem calc(var(--difference-shell-gutter) + var(--difference-title-inset));
}
.difference-section__intro span {
  display: block;
  font-family: "Avenir Exitbrands", var(--font-body);
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  font-weight: 500;
  line-height: 1.06;
}

.difference-section__title-line {
  align-items: center;
  min-height: 0.94em;
  overflow: visible;
  padding-left: calc(var(--difference-shell-gutter) + var(--difference-title-inset));
  max-width: 103%;
  font-family: "Avenir Exitbrands", var(--font-display);
  font-size: clamp(3.8rem, 8.1vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.difference-section__title-line--combo {
  color: var(--eb-white);
  gap: clamp(0.5rem, 1.1vw, 0.95rem);
  min-height: 1.02em;
  margin-left: clamp(0.2rem, 0.7vw, 0.6rem);
  max-width: none;
  padding-left: clamp(0.2rem, 0.5vw, 0.45rem);
  padding-top: 0.2em;
  padding-bottom: 0.08em;
  padding-right: clamp(0.95rem, 1.7vw, 1.45rem);
}
.difference-section__title-line--final {
  color: var(--diff-final) !important;
  gap: clamp(0.01em, 0.05vw, 0.04em);
  margin-top: 0;
  margin-left: clamp(0.2rem, 0.7vw, 0.6rem);
  max-width: none;
  padding-left: clamp(0.2rem, 0.5vw, 0.45rem);
  padding-right: clamp(1.2rem, 2.4vw, 2rem);
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.difference-section__title-word { display: inline-flex; align-items: center; line-height: 0.92; }
.difference-section__title-word--white { color: var(--eb-white) !important; }
.difference-section__title-word--teal { color: var(--diff-combo-teal) !important; }
.difference-section__title-word--lime { color: var(--diff-final) !important; }

.difference-section__title-o-image { display: block; width: 0.72em; height: 0.72em; flex: 0 0 auto; object-fit: contain; transform: translateY(0.02em); }

.difference-section__bullets-wrap { min-width: 0; display: grid; align-self: start; z-index: 1; }
@media (min-width: 75rem) {
  .difference-section__bullets-wrap { position: absolute; right: clamp(-1rem, -1.1vw, -0.25rem); width: min(100%, clamp(33rem, 47vw, 45rem)); }
}

.difference-section__bullets {
  display: grid;
  align-content: center;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  min-width: 0;
  height: auto;
  margin: 0;
  padding: clamp(1.45rem, 2.7vw, 2rem) clamp(1.55rem, 2.6vw, 2.45rem) clamp(1.6rem, 2.8vw, 2.15rem) clamp(2rem, 3.1vw, 3rem);
  transform: translateX(-30%);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(135deg, #d89400 0%, #db9500 48%, #c88500 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #000;
  list-style: none;
}
@media (min-width: 75rem) {
  .difference-section__bullets { width: 100%; transform: none; padding-left: clamp(7rem, 19vw, 19.5rem); }
}
.difference-section__bullets li {
  position: relative;
  padding-left: 1.2rem;
  font-family: "Avenir Exitbrands", var(--font-body);
  font-size: clamp(0.98rem, 1.06vw, 1.18rem);
  font-weight: 400;
  line-height: 1.18;
}
.difference-section__bullets li::before { content: "\2022"; position: absolute; top: 0.04rem; left: 0; font-size: 1.15em; }
.difference-section__bullets span,
.difference-section__bullets strong { display: block; }
.difference-section__bullets span { color: var(--eb-white); }
.difference-section__bullets strong { font-family: "Lato Exitbrands", var(--font-body); font-weight: 700; }

@media (min-width: 64.01rem) and (max-width: 66rem) {
  .difference-section__bullets { transform: none; gap: 0.6rem; padding-top: 0.85rem; padding-bottom: 0.9rem; }
}
@media (min-width: 66rem) and (max-width: 74.99rem) {
  .difference-section__top { grid-template-columns: minmax(0, 1fr) minmax(23rem, 30rem); }
  .difference-section__bullets-wrap { width: calc(100% + 1.4rem); margin-right: -1.4rem; }
  .difference-section__bullets { transform: none; gap: 0.7rem; padding-top: 1.4rem; padding-bottom: 1.45rem; }
}
@media (max-width: 64rem) {
  .difference-section { --difference-shell-gutter: 0.5rem; --difference-title-inset: 1rem; }
  .difference-section__shell { width: min(calc(100% - 1rem), 1280px); }
  .difference-section__top { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .difference-section__title-wrap { padding: 1.3rem 1rem 1.4rem; border-radius: 1.75rem; }
  .difference-section__intro { margin-bottom: 0; padding: 0.3rem 0.9rem 0.42rem calc(var(--difference-shell-gutter) + var(--difference-title-inset)); }
  .difference-section__intro span { font-size: clamp(0.92rem, 4vw, 1.05rem); }
  .difference-section__title-line { padding-left: calc(var(--difference-shell-gutter) + var(--difference-title-inset)); font-size: clamp(2.35rem, 13vw, 3.75rem); letter-spacing: -0.06em; text-wrap: balance; }
  .difference-section__title-line--combo { margin-left: calc(var(--difference-title-inset) - 0.35rem); padding-left: 0.35rem; }
  .difference-section__title-line--final { font-size: clamp(1.8rem, 10vw, 2.75rem); gap: 0; margin-left: calc(var(--difference-title-inset) - 0.2rem); padding-left: 0.2rem; padding-right: 0.5rem; letter-spacing: -0.05em; text-wrap: nowrap; }
  .difference-section__bullets-wrap { order: 2; overflow: clip; }
  .difference-section__bullets { padding: 1.35rem 1rem 1.35rem 1.5rem; transform: none; border-radius: 1.75rem; }
  .difference-section__bullets li { font-size: clamp(0.86rem, 3.85vw, 0.98rem); }
}

/* ---------- Cola / cierre de la seccion ---------- */
.difference-tail { position: relative; z-index: 2; margin-top: 0; background: var(--eb-white); }
.difference-tail__shell {
  width: min(calc(100% - 2rem), 1280px);
  margin-inline: auto;
  display: grid;
  gap: 0.85rem;
  align-items: center;
  padding-top: clamp(0.45rem, 0.9vw, 0.75rem);
  padding-bottom: clamp(1rem, 1.8vw, 1.35rem);
}
@media (min-width: 56rem) {
  .difference-tail__shell { grid-template-columns: minmax(14rem, 17.5rem) minmax(0, 1fr); column-gap: clamp(1rem, 2vw, 2rem); }
}
.difference-tail__caption {
  padding-top: clamp(0.7rem, 1.05vw, 0.95rem);
  font-family: "Avenir Exitbrands", var(--font-body);
  font-size: clamp(0.98rem, 1.1vw, 1.15rem);
  font-weight: 500;
  line-height: 1.12;
  color: #0e2a3f;
  margin: 0;
}
.difference-tail__highlight {
  display: grid;
  gap: 0.36rem;
  min-width: 0;
  align-content: start;
  margin-top: clamp(-0.95rem, -1.15vw, -0.65rem);
}
.difference-tail__highlight span {
  display: inline-flex;
  max-width: 100%;
  width: fit-content;
  padding: 0.28rem 0.95rem 0.42rem;
  border-radius: 1rem;
  font-family: "Lato Exitbrands", var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
  color: var(--eb-white);
}
.difference-tail__highlight span:first-child { background: var(--eb-teal); margin-top: -1.4rem; }
.difference-tail__highlight span:last-child { background: var(--eb-lime); }
@media (max-width: 39.99rem) {
  .difference-tail__shell { width: min(calc(100% - 1rem), 1280px); gap: 0.7rem; padding-top: 0.6rem; padding-bottom: 1rem; }
  .difference-tail__caption { max-width: 15rem; padding-top: 0; }
  .difference-tail__highlight { margin-top: 0; }
  .difference-tail__highlight span { font-size: clamp(1.2rem, 7vw, 1.72rem); }
}

/* =====================================================================
   Secciones EB a todo el ancho y sin separación entre bloques.
   (Cada sección maneja su propio padding interno.)
   Funciona en cualquier plantilla: nuestras secciones renderizan un
   <section> como hijo directo de la zona de contenido, así que las
   sacamos de la caja centrada y les quitamos el gap vertical.
   ===================================================================== */
.wp-block-post-content > section { max-width: none; margin-block: 0; margin-inline: 0; width: 100%; }

/* Editor: aproximar el mismo efecto a ancho completo dentro del lienzo. */
.editor-styles-wrapper [data-type^="exitbrands/"] { max-width: none; }
.editor-styles-wrapper [data-type^="exitbrands/"] > section { max-width: none; }

/* =====================================================================
   Utilidades base compartidas
   ===================================================================== */
.container { width: min(calc(100% - 2rem), 1120px); margin-inline: auto; min-width: 0; }

.section { padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); }
.section-label { display: inline-block; margin-bottom: 1rem; color: rgba(17, 36, 58, 0.22); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.prose { display: grid; gap: 1rem; }
.prose p { color: #11243a; font-size: 1.02rem; line-height: 1.55; }
.dark-prose p { color: rgba(255, 255, 255, 0.92); }

/* Resaltados tipo "mark" (origen: global.scss) */
mark { display: inline-flex; align-items: center; padding: 0.08rem 0.5rem 0.15rem; border-radius: 999px; background: #db9500; color: #fff; font-weight: 700; }
mark.is-green { background-color: #359a9d; }
mark.is-orange { background-color: #ff9c00; }
mark.is-green--titania { font-family: var(--font-body); }

/* =====================================================================
   Logo (BrandLockup) + Redes (SocialLinks)
   ===================================================================== */
.brand-lockup { display: inline-flex; width: 12.4rem; min-width: 0; color: #000; }
.brand-lockup__frame { display: block; width: 100%; line-height: 0; }
.brand-lockup__image { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.brand-lockup--compact { width: 9.6rem; }
.brand-lockup--light .brand-lockup__image { filter: brightness(0) invert(1); }

.social-links { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; color: var(--eb-mustard); }
/* color: inherit evita que el color de enlace global de WordPress (azul) pinte el icono. */
.social-links a { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 0.16rem; overflow: visible; background: transparent; color: inherit; }
.social-links a:hover, .social-links a:focus-visible { color: inherit; opacity: 0.78; }
.social-links__icon {
  display: block; place-self: stretch; width: 100%; height: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--social-icon); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  mask-image: var(--social-icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain;
}
/* En el sitio original las dos variantes mantienen el color mostaza (solo cambia el fondo). */
.social-links--light { color: var(--eb-mustard); }

/* =====================================================================
   Bloque: exitbrands/site-header  (origen: SiteHeader.astro, variante solid)
   ===================================================================== */
.site-header {
  position: sticky; top: 0; width: 100%; z-index: 40; padding: 1rem 0;
  background: rgba(247, 244, 238, 0.92);
  border-bottom: 1px solid rgba(16, 45, 69, 0.12);
  backdrop-filter: blur(10px);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, padding 180ms ease;
}
.site-header--scrolled {
  padding: 0.7rem 0;
  background: rgba(16, 45, 69, 0.98);
  border-bottom: 1px solid rgba(219, 149, 0, 0.2);
  box-shadow: 0 12px 28px rgba(6, 20, 31, 0.18);
  backdrop-filter: blur(12px);
}
.site-header__inner { width: min(calc(100% - 2rem), 1220px); margin-inline: auto; display: grid; gap: 1rem; align-items: center; }
.site-header__inner--desktop { display: none; }
.site-header__side { display: grid; gap: 0.7rem; }
.site-header__side--right { justify-items: start; }
.site-header__brand { order: -1; justify-self: start; }
.site-header__nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.site-header__nav a { color: #000; font-family: "Lato Exitbrands", var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.site-header__nav a:hover, .site-header__nav a:focus-visible { opacity: 0.72; }
.site-header__nav--right { justify-content: flex-start; }
.site-header--scrolled .site-header__nav a { color: var(--eb-mustard); }
.site-header--scrolled .brand-lockup__image { filter: brightness(0) saturate(100%) invert(56%) sepia(96%) saturate(1001%) hue-rotate(7deg) brightness(94%) contrast(101%); }

@media (min-width: 56rem) {
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header__inner--desktop { display: grid; }
  .site-header__side--right { justify-items: end; }
  .site-header__brand { order: initial; justify-self: center; }
  .site-header__nav--right { justify-content: flex-end; }
}

/* Cabecera movil */
.site-header__mobile { position: relative; width: min(calc(100% - 2rem), 40rem); margin-inline: auto; }
.site-header__mobile-bar { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 5.25rem; align-items: center; gap: clamp(0.75rem, 4vw, 1.5rem); min-height: clamp(5.8rem, 19vw, 7.2rem); padding: clamp(1.2rem, 5vw, 1.6rem) 0; list-style: none; cursor: pointer; }
.site-header__mobile-bar::-webkit-details-marker { display: none; }
.site-header__menu-icon { display: grid; align-content: center; justify-self: start; gap: 0.32rem; width: clamp(1.75rem, 7vw, 2.25rem); height: clamp(1.75rem, 7vw, 2.25rem); }
.site-header__menu-icon span { display: block; width: 100%; height: 3px; border-radius: 999px; background: var(--eb-mustard); transition: opacity 160ms ease, transform 160ms ease; }
.site-header__mobile[open] .site-header__menu-icon span:nth-child(1) { transform: translateY(0.38rem) rotate(45deg); }
.site-header__mobile[open] .site-header__menu-icon span:nth-child(2) { opacity: 0; }
.site-header__mobile[open] .site-header__menu-icon span:nth-child(3) { transform: translateY(-0.38rem) rotate(-45deg); }
.site-header__mobile-brand { display: inline-flex; justify-self: center; width: min(100%, 14.8rem, 56vw); min-width: 0; }
.site-header__mobile-brand .brand-lockup { width: 100%; }
.site-header__mobile-brand .brand-lockup__image { filter: brightness(0) saturate(100%) invert(56%) sepia(96%) saturate(1001%) hue-rotate(7deg) brightness(94%) contrast(101%); }
.site-header__mobile-social { justify-self: end; }
.site-header__mobile-social .social-links { gap: 0.28rem; }
.site-header__mobile-social .social-links a { width: clamp(1.05rem, 4.2vw, 1.22rem); height: clamp(1.05rem, 4.2vw, 1.22rem); }
.site-header__mobile-panel { display: grid; gap: 1.25rem; padding: 0 0 1.4rem; background: #0b2235; }
.site-header__mobile-nav { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.site-header__mobile-nav a { display: block; padding: 0.85rem 0; border-bottom: 1px solid rgba(219, 149, 0, 0.24); color: var(--eb-mustard); font-family: "Lato Exitbrands", var(--font-body); font-size: clamp(0.92rem, 4vw, 1.05rem); font-weight: 800; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; }
.site-header__mobile-nav li:last-child a { border-bottom: 0; }

@media (max-width: 55.99rem) {
  .site-header { position: sticky; padding: 0; background: #0b2235; }
  .site-header--scrolled { background: rgba(16, 45, 69, 0.98); }
}
@media (min-width: 56rem) {
  .site-header__mobile { display: none; }
}

/* =====================================================================
   Bloque: exitbrands/site-footer  (origen: SiteFooter.astro)
   ===================================================================== */
.site-footer__nav-shell { padding: 1.15rem 0; background: #000; color: #fff; }
.site-footer__nav-row { display: grid; gap: 1rem; align-items: center; justify-items: center; }
.site-footer__nav-row .social-links { justify-content: center; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.4rem; justify-content: center; margin: 0; padding: 0; list-style: none; }
.site-footer__nav a { color: #fff; font-family: "Lato Exitbrands", var(--font-body); font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; }
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { color: var(--eb-mustard); }
.site-footer__legal { padding: 1rem 0 1.2rem; background: #fff; color: #11243a; text-align: center; }
.site-footer__legal p { font-size: 0.92rem; margin: 0; }

@media (min-width: 56rem) {
  .site-footer__nav-row { grid-template-columns: minmax(0, 1fr) auto; justify-items: initial; }
  .site-footer__nav { justify-content: start; }
}

/* =====================================================================
   Botones (pill) — origen: global.scss
   ===================================================================== */
/* Selector a.button (especificidad 0,1,1) para ganarle al .button del admin de WordPress. */
a.button, a.button--dark, a.button--light,
.button, .button--dark, .button--light {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: 0.55rem 1.15rem; border: 0; border-radius: 999px;
  font-family: "Lato Exitbrands", var(--font-body);
  font-size: 0.88rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  max-width: 100%; position: relative; isolation: isolate; overflow: hidden; text-align: center; text-decoration: none;
  transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), background-position 420ms var(--motion-ease), filter var(--motion-base) ease;
}
a.button, .button { background-image: linear-gradient(135deg, #db9500 0%, #ff9c00 100%); color: #fff; box-shadow: 0 10px 24px rgba(219, 149, 0, 0.24); }
a.button:hover, a.button:focus-visible, .button:hover, .button:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(219, 149, 0, 0.3); }
a.button--dark, .button--dark { background-image: linear-gradient(135deg, #000 0%, #102d45 100%); color: #fff; box-shadow: 0 10px 24px rgba(16, 45, 69, 0.28); }
a.button--dark:hover, a.button--dark:focus-visible, .button--dark:hover, .button--dark:focus-visible { background-image: linear-gradient(135deg, #c88500 0%, #ff9c00 100%); box-shadow: 0 16px 34px rgba(219, 149, 0, 0.28); }
a.button--light, .button--light { background-image: linear-gradient(135deg, #fff 0%, #f0f6f8 100%); color: #102d45; box-shadow: 0 10px 24px rgba(16, 45, 69, 0.12); }

/* =====================================================================
   ImagePlaceholder (modo asset, usado por el Hero) + HeroArtwork
   ===================================================================== */
.image-placeholder { position: relative; min-height: var(--placeholder-height); border-radius: 4rem; }
.image-placeholder::before, .image-placeholder::after { content: ""; position: absolute; inset: auto; border-radius: 999px; filter: blur(28px); opacity: 0.85; pointer-events: none; }
.image-placeholder::before { top: 8%; left: 18%; width: 34%; height: 18%; }
.image-placeholder::after { right: 12%; bottom: 8%; width: 28%; height: 14%; }
.image-placeholder__frame { position: relative; display: grid; place-items: center; min-height: inherit; padding: 1.75rem; border: 2px dashed rgba(255, 255, 255, 0.24); border-radius: inherit; overflow: hidden; text-align: center; }
.image-placeholder__frame::before { content: ""; position: absolute; inset: 1rem; border-radius: calc(4rem - 0.75rem); border: 1px solid rgba(255, 255, 255, 0.15); }
.image-placeholder__image { position: relative; z-index: 1; width: 100%; height: var(--placeholder-height); object-fit: var(--placeholder-fit); object-position: center bottom; user-select: none; -webkit-user-drag: none; }
.image-placeholder--warm::before { background: rgba(158, 180, 41, 0.5); }
.image-placeholder--warm::after { background: rgba(255, 156, 0, 0.55); }
.image-placeholder--olive::before { background: rgba(12, 140, 152, 0.35); }
.image-placeholder--olive::after { background: rgba(255, 156, 0, 0.52); }
.image-placeholder--lime::before { background: rgba(255, 255, 255, 0.42); }
.image-placeholder--lime::after { background: rgba(12, 140, 152, 0.42); }
.image-placeholder--magenta::before { background: rgba(125, 74, 199, 0.52); }
.image-placeholder--magenta::after { background: rgba(215, 76, 149, 0.5); }
.image-placeholder--aurora::before { background: rgba(12, 140, 152, 0.48); }
.image-placeholder--aurora::after { background: rgba(255, 156, 0, 0.46); }
.image-placeholder--spectrum::before { background: rgba(125, 74, 199, 0.52); }
.image-placeholder--spectrum::after { background: rgba(158, 180, 41, 0.42); }
.image-placeholder--dark::before { background: rgba(12, 140, 152, 0.42); }
.image-placeholder--dark::after { background: rgba(255, 156, 0, 0.38); }
.image-placeholder--square { border-radius: 0; }
.image-placeholder--square::before, .image-placeholder--square::after { display: none; }
.image-placeholder--square .image-placeholder__frame, .image-placeholder--square .image-placeholder__frame::before, .image-placeholder--square .image-placeholder__image { border-radius: 0; }
.image-placeholder--square .image-placeholder__image { object-position: center; }
.image-placeholder--asset { background: transparent; }
.image-placeholder--asset .image-placeholder__frame { padding: 0; border: 0; background: transparent; }
.image-placeholder--asset .image-placeholder__frame::before { display: none; }

.hero-artwork { position: relative; width: 100%; min-height: var(--hero-art-height, 44rem); }
.hero-artwork__foreground { position: relative; z-index: 1; }
.hero-artwork__foreground::after { content: ""; position: absolute; left: 50%; bottom: 2.5rem; z-index: 0; width: min(62%, 16rem); height: 3.2rem; transform: translateX(-50%); border-radius: 999px; background: radial-gradient(circle, rgba(16, 45, 69, 0.28) 0%, rgba(16, 45, 69, 0.14) 45%, rgba(16, 45, 69, 0) 100%); filter: blur(14px); pointer-events: none; }
.hero-artwork .image-placeholder--asset .image-placeholder__image { position: relative; z-index: 1; filter: drop-shadow(0 12px 18px rgba(16, 45, 69, 0.18)); }

/* =====================================================================
   Bloque: exitbrands/hero  (origen: HeroSection.astro)
   ===================================================================== */
.hero-section {
  position: relative; overflow: hidden; padding-top: 3rem; padding-bottom: 0;
  background: linear-gradient(180deg, var(--hero-bg, #db9500) 0%, var(--hero-bg, #db9500) 16%, #ffffff 82%);
}
.hero-section__guides { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: start; pointer-events: none; }
.hero-section__guides span {
  height: var(--column-depth); min-width: 0; border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, rgba(252, 189, 7, 0.16) 32%, rgba(243, 162, 1, 0.24) var(--column-solid-stop), rgba(217, 147, 3, 0.18) var(--column-fade-end), rgba(217, 147, 3, 0) 100%);
}
.hero-section__guides span.hero-section__guide-column--soft {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, rgba(252, 189, 7, 0.1) 32%, rgba(243, 162, 1, 0.17) var(--column-solid-stop), rgba(217, 147, 3, 0.12) var(--column-fade-end), rgba(217, 147, 3, 0) 100%);
}
.hero-section__guides span:last-child { border-right: 1px solid rgba(255, 255, 255, 0.12); }
.hero-section__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; padding-top: clamp(1rem, 4vw, 3rem); }
.hero-section__eyebrow { align-self: start; padding-top: 2rem; max-width: 15rem; font-size: 1rem; line-height: 1.1; }
.hero-section__eyebrow p { color: #000; font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(1rem, 1.7vw, 1.55rem); font-weight: 500; overflow-wrap: normal; word-break: keep-all; margin: 0; }
.hero-section__eyebrow p:first-child { font-weight: 300; white-space: nowrap; }
.hero-section__media { position: relative; z-index: 2; align-self: end; min-width: 0; transform: translateY(-8rem); }
.hero-section__copy { display: grid; align-content: center; gap: 1rem; padding-top: clamp(0rem, 2vw, 2rem); width: min(100%, 29rem); min-width: 0; }
.hero-section__copy h1 { color: #ffffff; font-family: "Lato Exitbrands", var(--font-body); max-width: 100%; font-size: 2.5rem; line-height: 1.02; text-transform: uppercase; margin: 0; }
.hero-section__copy h1 span { display: block; max-width: 100%; overflow-wrap: normal; word-break: keep-all; }
.hero-section__copy h1 span:nth-child(1), .hero-section__copy h1 span:nth-child(2) { font-weight: 800; }
.hero-section__copy h1 span:nth-child(3) { font-weight: 500; }
.hero-section__description { display: grid; gap: 0.05rem; max-width: 20rem; font-size: 1rem; }
.hero-section__description p { color: #000; font-family: "Lato Exitbrands", var(--font-body); font-size: clamp(1.1rem, 1.3vw, 1.2rem); font-weight: 400; line-height: 1.1; margin: 0; }
/* Especificidad alta: evita que el .button del admin de WordPress pise el nuestro. */
.hero-section .button {
  color: #fff;
  font-family: "Lato Exitbrands", var(--font-body);
  font-weight: 800;
  width: fit-content;
  border: 0;
  background-image: linear-gradient(135deg, #000 0%, #102d45 100%);
  box-shadow: 0 10px 24px rgba(16, 45, 69, 0.28);
}
.hero-section .button:hover, .hero-section .button:focus-visible {
  background-image: linear-gradient(135deg, #c88500 0%, #ff9c00 100%);
  box-shadow: 0 16px 34px rgba(219, 149, 0, 0.28);
}

@media (min-width: 56.25rem) {
  .hero-section__grid { grid-template-columns: minmax(8rem, 0.75fr) minmax(20rem, 28rem) minmax(0, 1.35fr); align-items: start; }
  .hero-section__media { margin-bottom: -8rem; }
}
@media (min-width: 56rem) and (max-width: 56.24rem) {
  .hero-section__grid { grid-template-columns: minmax(8rem, 0.55fr) minmax(18rem, 1fr); align-items: center; padding-top: 0; }
  .hero-section__eyebrow { grid-column: 1 / -1; padding-top: 0; }
  .hero-section__copy { padding-top: 0; }
}
@media (max-width: 55.99rem) {
  .hero-section { padding-top: 0; padding-bottom: 0; background: linear-gradient(180deg, var(--hero-bg, #db9500) 0%, #df9d05 72%, #f6df9e 92%, #ffffff 100%); }
  .hero-section__guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-section__guides span:nth-child(n + 5) { display: none; }
  .hero-section__guides span:nth-child(1), .hero-section__guides span:nth-child(4) { height: 100%; --column-solid-stop: 80%; --column-fade-end: 100%; }
  .hero-section__guides span:nth-child(2), .hero-section__guides span:nth-child(3) { height: 100%; --column-solid-stop: 86%; --column-fade-end: 100%; }
  .hero-section__guides span:nth-child(1) { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, rgba(252, 189, 7, 0.18) 32%, rgba(243, 162, 1, 0.28) var(--column-solid-stop), rgba(217, 147, 3, 0.2) var(--column-fade-end), rgba(217, 147, 3, 0) 100%); }
  .hero-section__guides span:nth-child(2) { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, rgba(252, 189, 7, 0.12) 32%, rgba(243, 162, 1, 0.18) var(--column-solid-stop), rgba(217, 147, 3, 0.12) var(--column-fade-end), rgba(217, 147, 3, 0) 100%); }
  .hero-section__guides span:nth-child(3) { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, rgba(252, 189, 7, 0.14) 32%, rgba(243, 162, 1, 0.22) var(--column-solid-stop), rgba(217, 147, 3, 0.15) var(--column-fade-end), rgba(217, 147, 3, 0) 100%); }
  .hero-section__guides span:nth-child(4) { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 7%, rgba(252, 189, 7, 0.1) 32%, rgba(243, 162, 1, 0.16) var(--column-solid-stop), rgba(217, 147, 3, 0.1) var(--column-fade-end), rgba(217, 147, 3, 0) 100%); }
  .hero-section__grid { position: relative; gap: 0; padding-top: 0; min-height: clamp(39rem, 200vw, 52rem); }
  .hero-section__eyebrow { position: absolute; top: clamp(14rem, 50vw, 18rem); right: clamp(0.85rem, 4vw, 1.5rem); z-index: 3; width: min(45vw, 19rem); padding-top: 0; max-width: none; }
  .hero-section__eyebrow p { font-size: clamp(0.78rem, 3.1vw, 1rem); line-height: 1.04; text-align: left; }
  .hero-section__eyebrow p:first-child { white-space: normal; }
  .hero-section__media { position: absolute; left: 32%; bottom: 22%; z-index: 2; justify-self: start; width: clamp(18rem, 86vw, 23.5rem); transform: translateX(-61%) translateY(0.35rem); }
  .hero-section__media .hero-artwork { min-height: clamp(25rem, 112vw, 33rem); }
  .hero-section__media .image-placeholder { min-height: clamp(25rem, 112vw, 33rem); }
  .hero-section__media .image-placeholder__image { height: clamp(25rem, 112vw, 33rem); object-position: center bottom; }
  .hero-section__media .hero-artwork__foreground::after { bottom: 1.45rem; width: min(54%, 11rem); height: 2rem; }
  .hero-section__copy { position: absolute; top: clamp(16.2rem, 58vw, 20.5rem); right: clamp(1.75rem, 7vw, 3rem); z-index: 3; gap: 0.55rem; padding-top: 0; width: min(47vw, 17.5rem); max-width: none; }
  .hero-section__copy h1 { font-size: clamp(1.7rem, 7.2vw, 2.35rem); line-height: 0.92; }
  .hero-section__description { max-width: 100%; }
  .hero-section__description p { font-size: clamp(0.82rem, 3.35vw, 0.96rem); line-height: 1.05; }
  .hero-section .button { min-height: 1.85rem; padding: 0.32rem 0.82rem; font-size: 0.66rem; }
}
@media (max-width: 30rem) {
  .hero-section__grid { min-height: clamp(35rem, 148vw, 46rem); }
  .hero-section__eyebrow { top: clamp(12.2rem, 60vw, 14.8rem); right: 1.9rem; width: min(44vw, 9.75rem); }
  .hero-section__eyebrow p { font-size: clamp(0.72rem, 2.95vw, 0.9rem); }
  .hero-section__media { width: clamp(16rem, 78vw, 20.5rem); transform: translateX(-63%) translateY(0.15rem); }
  .hero-section__media .hero-artwork { min-height: clamp(22rem, 98vw, 28rem); }
  .hero-section__media .image-placeholder { min-height: clamp(22rem, 98vw, 28rem); }
  .hero-section__media .image-placeholder__image { height: clamp(22rem, 98vw, 28rem); }
  .hero-section__copy { top: clamp(17.3rem, 53vw, 17.2rem); right: 0.9rem; gap: 0.45rem; width: min(45vw, 10.75rem); }
  .hero-section__copy h1 { font-size: clamp(1.3rem, 6.7vw, 2rem); }
  .hero-section__description p { font-size: clamp(0.76rem, 3.2vw, 0.88rem); }
  .hero-section .button { min-height: 1.75rem; padding: 0.28rem 0.74rem; font-size: 0.62rem; }
}

/* permite el transform de imagen (usado por las tarjetas dobles) */
.image-placeholder__image { transform: var(--placeholder-image-transform, none); }

/* =====================================================================
   Bloque: exitbrands/about  (origen: AboutTransformationSection.astro)
   ===================================================================== */
.about-section { position: relative; overflow: hidden; background: #fff; }
.about-section__grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .about-section__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: start; } }
.about-section .section-label { color: #cccccc; font-family: "Lato Exitbrands", var(--font-body); font-weight: 700; }
.about-section__display { display: grid; gap: 1.1rem; }
.about-section__intro { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.55rem; color: #000; font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.1; margin: 0; }
.about-section__badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 1.4em; padding: 0.08em 0.7em 0.14em; background-image: url("../img/about/badge.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; white-space: nowrap; color: #fff; font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(1.08rem, 1.9vw, 1.6rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; }
.about-section__wordmark { display: grid; color: #000; line-height: 0.82; text-transform: uppercase; }
.about-section__wordmark-text, .about-section__wordmark-line { font-family: "Avenir Exitbrands", var(--font-display); font-size: clamp(3.35rem, 18vw, 6.9rem); font-weight: 800; }
.about-section__wordmark-text { display: block; }
.about-section__wordmark-line { display: inline-flex; align-items: flex-end; gap: 0.02em; }
.about-section__wordmark-o { display: block; width: 0.9em; height: 0.9em; flex: 0 0 auto; margin-bottom: 0.04em; }
.about-section__copy { gap: 1.35rem; padding-top: clamp(1rem, 2vw, 3rem); max-width: 32rem; font-family: "Lato Exitbrands", var(--font-body); font-weight: 500; color: #0e2a3f; }
.about-section__copy p { font-size: 1.04rem; font-weight: 500; color: #0e2a3f; }
.about-section__copy-logo { display: block; width: 12.4rem; max-width: 100%; height: auto; }
@media (max-width: 39.99rem) {
  .about-section { padding-top: clamp(2.85rem, 11vw, 4.2rem); padding-bottom: clamp(2.75rem, 10vw, 4rem); }
  .about-section__grid { position: relative; z-index: 1; gap: clamp(1.65rem, 6vw, 2.25rem); }
  .about-section__display { justify-items: start; gap: 0.75rem; text-align: left; }
  .about-section .section-label { display: block; width: 100%; margin-bottom: 0.45rem; color: #0b2235; font-size: clamp(1.55rem, 6.8vw, 2rem); font-weight: 800; letter-spacing: 0.05em; text-align: left; }
  .about-section__intro { justify-content: flex-start; gap: 0.18rem 0.3rem; max-width: 100%; font-size: clamp(1rem, 4.15vw, 1.22rem); line-height: 1.03; text-align: left; letter-spacing: -0.03em; text-wrap: balance; }
  .about-section__badge { min-height: 1.44em; padding: 0.08em 0.68em 0.14em; font-size: clamp(0.9rem, 3.85vw, 1.08rem); }
  .about-section__wordmark { justify-items: start; width: 100%; line-height: 0.8; text-align: left; }
  .about-section__wordmark-text, .about-section__wordmark-line { font-size: clamp(4.6rem, 20.8vw, 8rem); }
  .about-section__wordmark-text { width: 100%; text-align: left; }
  .about-section__wordmark-line { justify-content: flex-start; width: 100%; gap: 0; }
  .about-section__wordmark-line .about-section__wordmark-text { width: auto; flex: 0 0 auto; }
  .about-section__copy { gap: 1.35rem; padding-top: 0; max-width: 100%; }
  .about-section__copy p { font-size: clamp(0.98rem, 4.45vw, 1.2rem); line-height: 1.24; }
  .about-section__copy mark { padding: 0.06em 0.55em 0.16em; font-size: 0.94em; line-height: 0.94; white-space: nowrap; }
  .about-section__copy-logo { display: none; }
}
@media (max-width: 30rem) {
  .about-section__grid { gap: 1.45rem; }
  .about-section__intro { font-size: clamp(0.92rem, 4vw, 1.08rem); }
  .about-section__wordmark-text, .about-section__wordmark-line { font-size: clamp(4rem, 20vw, 6.4rem); }
  .about-section__copy { gap: 1.15rem; }
  .about-section__copy p { font-size: clamp(0.92rem, 4.1vw, 1.08rem); }
}

/* =====================================================================
   Bloque: exitbrands/experience-purpose  (origen: ExperiencePurposeSection.astro)
   ===================================================================== */
.experience-purpose { padding: 2.75rem 0 3rem; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.46), transparent 22%), linear-gradient(90deg, #db9500 0%, rgba(219, 149, 0, 0.92) 50%, #db9500 100%); }
.experience-purpose__grid { display: grid; gap: 2rem; }
.experience-purpose article { text-align: center; }
.experience-purpose h2 { margin-bottom: 1rem; color: #000; font-family: "Skyna DemiBold Exitbrands", var(--font-display); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 400; line-height: 0.95; }
.experience-purpose h2 span { display: block; color: #000; font-family: "Skyna Regular Exitbrands", var(--font-body); font-size: 0.65em; font-weight: 400; }
.experience-purpose .prose { max-width: 28rem; margin-inline: auto; gap: 0.8rem; color: #000; }
.experience-purpose .prose p { color: #000; font-family: "Avenir Exitbrands", var(--font-body); font-size: 0.98rem; font-weight: 500; }
.experience-purpose .prose strong { font-weight: 800; }
@media (min-width: 56rem) {
  .experience-purpose { padding: 0; background: #fff; }
  .experience-purpose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .experience-purpose article { display: grid; align-content: start; padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(1.8rem, 3vw, 2.8rem) clamp(2.75rem, 4vw, 3.5rem); overflow: hidden; }
  .experience-purpose article:first-child { background: linear-gradient(90deg, #eda100 0%, #f3a201 46%, rgba(255, 255, 255, 0) 100%); text-align: right; }
  .experience-purpose article:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(249, 232, 181, 0.95) 18%, #ffc211 52%, #eda100 100%); text-align: left; }
  .experience-purpose article:first-child h2 { justify-self: end; width: min(100%, 30rem); text-align: right; }
  .experience-purpose article:last-child h2 { justify-self: start; width: min(100%, 30rem); text-align: left; }
  .experience-purpose article:first-child .prose { max-width: 33rem; margin-inline: auto 0; }
  .experience-purpose article:first-child .prose p { text-align: right; }
  .experience-purpose article:last-child .prose { max-width: 33rem; margin-inline: 0 auto; }
  .experience-purpose article:last-child .prose p { text-align: left; }
}
@media (max-width: 55.99rem) {
  .experience-purpose { padding: clamp(2.4rem, 7vw, 3rem) 0 clamp(2.6rem, 8vw, 3.2rem); background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.78) 0%, rgba(247, 244, 238, 0.62) 12%, rgba(255, 255, 255, 0) 30%), linear-gradient(90deg, #eda100 0%, #f3a201 50%, #eda100 100%); }
  .experience-purpose__grid { gap: clamp(1.65rem, 5vw, 2.2rem); }
  .experience-purpose article { padding-inline: clamp(1.2rem, 5vw, 1.8rem); background: transparent; }
}

/* =====================================================================
   Bloque: exitbrands/trajectory  (origen: TrajectorySection.astro)
   ===================================================================== */
.trajectory-section { --trajectory-ring-size: 7.2rem; --trajectory-button-height: 2.85rem; padding-block: clamp(4rem, 7vw, 6rem); background: #fff; overflow: clip; }
.trajectory-section .section-label { font-family: "Lato Exitbrands", var(--font-body); font-weight: 700; }
.trajectory-section__band { position: relative; isolation: isolate; margin-top: 1rem; }
.trajectory-section__band::before { content: ""; position: absolute; z-index: -1; top: calc(var(--trajectory-ring-size) / 2); bottom: calc(var(--trajectory-button-height) / 2); left: 50%; width: 100vw; transform: translateX(-50%); background: #efebe4; }
.trajectory-section__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); }
@media (min-width: 56rem) { .trajectory-section__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trajectory-section__item { text-align: center; }
.trajectory-section__item p { max-width: 16rem; margin-inline: auto; color: #11243a; font-family: "Lato Exitbrands", var(--font-body); font-size: 0.95rem; font-weight: 500; line-height: 1.45; }
.trajectory-section__item p strong { font-weight: 800; }
.trajectory-section__ring { --ring-border-width: 0.4rem; --ring-border: linear-gradient(90deg, #0c8c98 0%, #0c8c98 100%); --ring-glow-opacity: 0.4; position: relative; isolation: isolate; display: grid; place-items: center; width: var(--trajectory-ring-size); height: var(--trajectory-ring-size); margin: 0 auto 1rem; border-radius: 50%; background: #000; }
.trajectory-section__ring::before { content: ""; position: absolute; inset: -0.15rem; z-index: -1; border-radius: 50%; filter: blur(1.15rem); opacity: var(--ring-glow-opacity); transform: scale(1.08); background: var(--ring-border); }
.trajectory-section__ring::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: var(--ring-border-width); background: var(--ring-border); pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.trajectory-section__ring span { position: relative; z-index: 1; color: #fff; font-family: "Lato Exitbrands", var(--font-body); font-size: 3.2rem; font-weight: 500; line-height: 1; }
.trajectory-section__ring.is-teal { --ring-border: linear-gradient(90deg, #0a8fa3 0%, #129cb0 34%, #44a48e 64%, #97b323 100%); --ring-glow-opacity: 0.5; }
.trajectory-section__ring.is-gold { --ring-border: linear-gradient(90deg, #ffc400 0%, #ffb400 32%, #ff9500 68%, #ff562e 100%); --ring-glow-opacity: 0.55; }
.trajectory-section__ring.is-violet { --ring-border: linear-gradient(90deg, #89d2d2 0%, #43c0c8 24%, #2d4fa8 48%, #6d3fa0 72%, #b22f90 100%); --ring-glow-opacity: 0.52; }
.trajectory-section__ring.is-green { --ring-border: linear-gradient(90deg, #0a8fa3 0%, #159db0 30%, #49a38b 62%, #9db624 100%); --ring-glow-opacity: 0.5; }
.trajectory-section__cta { display: flex; justify-content: center; margin-top: 1.8rem; }
.trajectory-section .button { font-family: "Lato Exitbrands", var(--font-body); font-weight: 800; min-height: var(--trajectory-button-height); }

/* =====================================================================
   Bloque: exitbrands/methodology  (origen: MethodologySection.astro)
   ===================================================================== */
.methodology-section { position: relative; overflow: hidden; padding-top: 0; padding-bottom: 0; background: #102d45; color: #fff; }
.methodology-section__grid { display: grid; gap: 2.25rem; }
@media (min-width: 56rem) { .methodology-section__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: start; } }
.methodology-section__brand { display: flex; align-items: flex-start; justify-content: flex-start; }
.methodology-section__image { display: block; width: 100%; height: auto; }
.methodology-section__content { display: grid; gap: 1.6rem; align-content: center; padding-top: 1rem; padding-bottom: 1rem; }
.methodology-section__prose { gap: 1rem; }
.methodology-section__prose p { max-width: 36rem; font-family: "Lato Exitbrands", var(--font-body); font-size: clamp(0.9rem, 1vw, 1.05rem); font-weight: 500; line-height: 1.35; letter-spacing: 0.01em; }
.methodology-section__prose mark.is-green { padding: 0.12rem 0.7rem 0.2rem; border-radius: 999px; background-color: #1194ae; background-image: linear-gradient(90deg, #1194ae 0%, #9bb624 100%); color: #fff; font-weight: 700; }
.methodology-section__badge-row { display: grid; grid-template-columns: minmax(0, 8.25rem) minmax(0, 1fr); gap: 1rem; align-items: center; }
.methodology-section__badge-image { display: block; width: min(100%, 11rem); height: auto; filter: drop-shadow(0 0 24px rgba(255, 183, 0, 0.22)); }
.methodology-section__badge-copy { display: grid; gap: 0.7rem; align-content: center; }
.methodology-section__badge-label { color: #fff; font-family: "Lato Exitbrands", var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: clamp(0.14em, 0.8vw, 0.28em); text-transform: uppercase; }
.methodology-section__badge-row small { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; padding: 0.5rem 1rem 0.6rem; border-radius: 0.8rem; background-color: #db9500; background-image: linear-gradient(90deg, #f2b205 0%, #ff5a2d 100%); color: #fff; font-family: "Lato Exitbrands", var(--font-body); font-size: 0.9rem; font-weight: 700; letter-spacing: clamp(0.02em, 0.3vw, 0.04em); line-height: 1.1; text-transform: uppercase; }
.methodology-section__button { justify-self: start; font-family: "Lato Exitbrands", var(--font-body); font-weight: 800; min-height: 2.85rem; }
@media (max-width: 30rem) {
  .methodology-section__badge-row { grid-template-columns: minmax(0, 1fr); }
  .methodology-section__badge-image { width: min(100%, 11rem); }
}

/* =====================================================================
   Bloque: exitbrands/services-intro  (origen: ServicesIntroSection.astro)
   ===================================================================== */
.services-intro { padding-block: clamp(4rem, 7vw, 6rem); background: #f7f4ee; }
.services-intro__inner { max-width: 62rem; margin-inline: 0; text-align: left; }
.services-intro h2 { color: #c88500; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: clamp(0.03em, 1.1vw, 0.12em); overflow-wrap: anywhere; text-transform: uppercase; }
@media (min-width: 56rem) { .services-intro h2 { text-align: center; } }
.services-intro p { margin-top: 0.8rem; font-size: clamp(1.05rem, 1.9vw, 1.55rem); line-height: 1.4; }

/* =====================================================================
   Bloque: exitbrands/service-showcase  (origen: ServiceShowcaseSection.astro)
   ===================================================================== */
.service-showcase { --service-edge-gutter: max(1rem, calc((100cqw - 1120px) / 2)); container-type: inline-size; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.service-showcase__grid { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .service-showcase__grid { grid-template-columns: minmax(16rem, 0.95fr) minmax(20rem, 1fr) minmax(16rem, 0.95fr); align-items: center; } }
.service-showcase__panel { padding: clamp(2rem, 4vw, 3rem); border-radius: 4rem; background: #102d45; color: #fff; }
.service-showcase__panel-title { display: inline-flex; align-items: flex-start; gap: 0; max-width: 100%; margin-bottom: 1rem; color: #9eb429; font-family: "Avenir Exitbrands", var(--font-display); font-size: min(2.8125rem, 10vw); font-weight: 400; letter-spacing: -0.03em; line-height: 0.92; overflow-wrap: anywhere; }
.service-showcase__panel-title strong { font-weight: 800; }
.service-showcase__panel-title span { font-weight: 400; }
.service-showcase__brand-mark { align-self: flex-start; position: relative; top: -0.32em; margin-left: 0.04em; font-size: 0.2em; font-style: normal; font-weight: 400; line-height: 0.8; }
.service-showcase__panel p { max-width: 18rem; font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 300; line-height: 1.25; }
.service-showcase__media { position: relative; z-index: 1; min-width: 0; }
.service-showcase__copy { gap: 1rem; }
.service-showcase__copy p { color: #11243a; font-size: 1rem; }
.service-showcase__lead { font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(1.2rem, 1.75vw, 1.55rem) !important; font-weight: 300; line-height: 1.35; }
.service-showcase .button { justify-self: start; width: fit-content; font-family: "Lato Exitbrands", var(--font-body); font-weight: 800; min-height: 2.85rem; }
@media (min-width: 56rem) {
  .service-showcase--panel-left .service-showcase__panel { margin-left: calc(-1 * var(--service-edge-gutter)); padding-left: calc(clamp(2rem, 4vw, 3rem) + var(--service-edge-gutter)); border-radius: 0 9rem 9rem 0; }
  .service-showcase--panel-right .service-showcase__panel { margin-right: calc(-1 * var(--service-edge-gutter)); padding-right: calc(clamp(2rem, 4vw, 3rem) + var(--service-edge-gutter)); border-radius: 9rem 0 0 9rem; }
  .service-showcase__media { margin-inline: -2rem; }
}
@media (max-width: 55.99rem) {
  .service-showcase__grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; gap: 1.25rem; }
  .service-showcase__panel, .service-showcase__media, .service-showcase__copy { grid-column: 1; }
  .service-showcase__panel, .service-showcase__media { grid-row: 1; }
  .service-showcase__copy { grid-row: 2; gap: 0.95rem; padding-top: 0.35rem; }
  .service-showcase__copy p { font-size: 0.98rem; }
  .service-showcase__lead { font-size: clamp(1.05rem, 4.7vw, 1.22rem) !important; line-height: 1.28; }
  .service-showcase__panel { width: calc(100% + 2rem); min-height: clamp(29rem, 138vw, 36rem); margin-left: -1rem; padding: 1.95rem 1.55rem clamp(15rem, 72vw, 19rem); border-radius: 0 clamp(7.5rem, 36vw, 12rem) clamp(7.5rem, 36vw, 12rem) 0; }
  .service-showcase__panel-title { margin-bottom: 0.65rem; font-size: clamp(2.35rem, 10vw, 2.8125rem); }
  .service-showcase__brand-mark { top: -0.34em; font-size: 0.18em; }
  .service-showcase__panel p { max-width: 12.5rem; font-size: 1.05rem; line-height: 1.12; }
  .service-showcase__media { align-self: end; justify-self: end; width: min(calc(100% - 0.5rem), clamp(18.5rem, 64vw, 24rem)); margin-right: -0.75rem; }
  .service-showcase__media .image-placeholder { min-height: clamp(18rem, 64vw, 24rem); }
  .service-showcase__media .image-placeholder__image { height: clamp(18rem, 64vw, 24rem); }
}

/* =====================================================================
   Bloque: exitbrands/dual-service-cards  (origen: DualServiceCardsSection.astro)
   ===================================================================== */
.dual-service-cards { padding-bottom: clamp(3.5rem, 7vw, 6rem); --dual-service-image-transform: scale(1.2); }
.dual-service-cards__grid { display: grid; gap: 1.5rem; padding-inline: 1rem; }
.dual-service-cards__card { position: relative; display: grid; gap: 1.5rem; min-width: 0; min-height: 100%; padding: clamp(2rem, 4vw, 3rem); border-radius: 3rem; background: #102d45; color: #fff; overflow: hidden; isolation: isolate; }
.dual-service-cards__card::before { display: none; }
.dual-service-cards__copy { display: grid; gap: 1rem; position: relative; z-index: 2; }
.dual-service-cards h3 { color: #9eb429; font-size: min(2.8125rem, 9vw); font-family: "Avenir Exitbrands", var(--font-display); font-weight: 400; letter-spacing: -0.03em; line-height: 0.95; overflow-wrap: anywhere; }
.dual-service-cards__title { max-width: 20rem; font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(1.75rem, 2.15vw, 2.35rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; }
.dual-service-cards__copy .prose { gap: 1rem; }
.dual-service-cards__copy .prose p { max-width: 22rem; font-family: "Avenir Exitbrands", var(--font-body); font-size: 1rem; font-weight: 300; line-height: 1.28; }
.dual-service-cards__media { position: relative; z-index: 1; min-width: 0; }
.dual-service-cards__media .image-placeholder { min-height: 0; --placeholder-image-transform: var(--dual-service-image-transform); }
.dual-service-cards__media .image-placeholder__image { width: 100%; height: auto; object-fit: contain; object-position: center bottom; }
.dual-service-cards .button { justify-self: start; width: fit-content; font-family: "Lato Exitbrands", var(--font-body); font-weight: 800; min-height: 2.85rem; }
@media (min-width: 56rem) {
  .dual-service-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(1.25rem, 2vw, 1.5rem); padding-inline: clamp(1rem, 1.8vw, 1.5rem); }
  .dual-service-cards__card { min-height: clamp(45rem, 57vw, 48rem); padding: clamp(2.5rem, 3.2vw, 3rem); border-radius: 0; background: transparent; overflow: visible; }
  .dual-service-cards__card::before { content: ""; position: absolute; inset: 0; z-index: 0; display: block; border-radius: clamp(3.8rem, 5vw, 4.5rem) clamp(3.8rem, 5vw, 4.5rem) 0 0; background: #102d45; }
  .dual-service-cards__media { position: absolute; pointer-events: none; z-index: 1; }
  .dual-service-cards__copy { max-width: 23.5rem; }
  .dual-service-cards__card.is-futurize { padding-top: clamp(3rem, 3.9vw, 3.6rem); padding-bottom: clamp(13rem, 19vw, 15rem); }
  .dual-service-cards__card.is-futurize .dual-service-cards__copy { max-width: 22rem; }
  .dual-service-cards__card.is-futurize .dual-service-cards__media { left: 0; right: 0; bottom: clamp(-2.4rem, -2.6vw, -1.25rem); width: auto; }
  .dual-service-cards__card.is-motionmutant { --dual-service-image-transform: none; padding-top: clamp(20rem, 23vw, 22rem); padding-bottom: clamp(3rem, 3.8vw, 3.6rem); }
  .dual-service-cards__card.is-motionmutant .dual-service-cards__copy { max-width: 21rem; }
  .dual-service-cards__card.is-motionmutant .dual-service-cards__media { top: clamp(-6rem, -6.2vw, -4.5rem); left: 0; right: 0; width: auto; }
  .dual-service-cards__card.is-futurize .dual-service-cards__media .image-placeholder__image { height: clamp(13rem, 16vw, 15rem); object-fit: contain; object-position: center bottom; }
  .dual-service-cards__card.is-motionmutant .dual-service-cards__media .image-placeholder__image { height: clamp(20rem, 25vw, 24rem); object-fit: contain; object-position: center top; }
}
@media (max-width: 39.99rem) {
  .dual-service-cards__card { padding: 1.5rem; border-radius: 1.5rem; }
  .dual-service-cards .image-placeholder { min-height: clamp(13rem, 58vw, 18rem); }
  .dual-service-cards .image-placeholder__image { height: clamp(13rem, 58vw, 18rem); }
}

/* =====================================================================
   Bloque: exitbrands/newsletter  (origen: MutantbrandsNewsletterSection.astro)
   ===================================================================== */
.mutantbrands-newsletter { position: relative; padding: 2.6rem 0; background: #db9500; }
.mutantbrands-newsletter__grid { display: grid; gap: 1.2rem; align-items: center; }
.mutantbrands-newsletter__grid > p { color: #fff; font-family: "Lato Exitbrands", var(--font-body); font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.12; margin: 0; }
.mutantbrands-newsletter__center { display: grid; gap: 0.4rem; text-align: center; }
.mutantbrands-newsletter__center h2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.25rem; color: #11243a; font-size: clamp(2.45rem, 5vw, 4.35rem); line-height: 0.88; text-transform: uppercase; margin: 0; }
.mutantbrands-newsletter__center small { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.85rem; margin-top: 0.55rem; color: #fff; font-family: "Avenir Exitbrands", var(--font-body); font-size: clamp(0.94rem, 1.1vw, 1.06rem); font-weight: 500; }
.mutantbrands-newsletter__center small > span:first-child { font-family: "Lato Exitbrands", var(--font-body); font-weight: 500; }
.mutantbrands-newsletter__title-light { font-family: "Lato Exitbrands", var(--font-body); font-weight: 300; white-space: nowrap; }
.mutantbrands-newsletter__title-bold { font-family: "Bellota Text Exitbrands", var(--font-display); font-weight: 700; white-space: nowrap; }
.mutantbrands-newsletter__pill { display: inline-flex; position: relative; align-items: center; justify-content: center; margin: 0.08rem 0.9rem 0.18rem 0.78rem; padding: 0.28rem 0.88rem 0.34rem; border: 0; border-radius: 999px; background: #d1007f; color: #fff; font-family: "Lato Exitbrands", var(--font-body); font-size: 0.94em; font-weight: 900; line-height: 1; box-shadow: 0 0 0 0.34rem #db9500, 0 0 0 0.52rem #d1007f, 0 0 0 0.8rem #db9500, 0 0 0 0.98rem #d1007f; }
.mutantbrands-newsletter__action { display: flex; justify-content: center; }
.mutantbrands-newsletter .button--dark { background: #000; background-image: none; box-shadow: 0 10px 24px rgba(16, 45, 69, 0.24); }
.mutantbrands-newsletter .button--dark:hover, .mutantbrands-newsletter .button--dark:focus-visible { background: #000; background-image: none; box-shadow: 0 16px 32px rgba(12, 140, 152, 0.24); }
@media (min-width: 56rem) {
  .mutantbrands-newsletter__grid { grid-template-columns: auto clamp(2rem, 4vw, 3rem) minmax(0, 1fr) auto; column-gap: 0; }
  .mutantbrands-newsletter__grid > p { grid-column: 1; align-self: center; transform: translateY(-1rem); white-space: nowrap; }
  .mutantbrands-newsletter__center { grid-column: 3; }
  .mutantbrands-newsletter__action { grid-column: 4; justify-content: flex-start; }
}
@media (max-width: 55.99rem) {
  .mutantbrands-newsletter { padding: 2.2rem 0; }
  .mutantbrands-newsletter__grid { justify-items: start; }
  .mutantbrands-newsletter__grid > p, .mutantbrands-newsletter__center, .mutantbrands-newsletter__action { width: 100%; }
  .mutantbrands-newsletter__center, .mutantbrands-newsletter__center h2, .mutantbrands-newsletter__center small { justify-content: flex-start; text-align: left; }
  .mutantbrands-newsletter__center small { flex-wrap: nowrap; gap: 0.3rem; font-size: clamp(0.76rem, 3.05vw, 0.88rem); }
  .mutantbrands-newsletter__center small > span:first-child { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
  .mutantbrands-newsletter__center { justify-items: start; }
  .mutantbrands-newsletter__title-light, .mutantbrands-newsletter__title-bold { white-space: normal; }
  .mutantbrands-newsletter__pill { flex: 0 0 auto; margin: 0.08rem 0.5rem 0.18rem 0.15rem; padding: 0.22rem 0.54rem 0.28rem; font-size: 0.84em; }
  .mutantbrands-newsletter__action { justify-content: flex-start; }
}

/* =====================================================================
   Bloque: exitbrands/contact  (origen: ContactSection.astro)
   ===================================================================== */
.contact-section { padding: 3rem 0; background: #102d45; color: #fff; }
.contact-section .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; }
.contact-section__grid { display: grid; gap: 2rem; }
.contact-section__info { display: grid; gap: 1.2rem; }
.contact-section__title-pill { display: inline-flex; position: relative; isolation: isolate; max-width: 100%; width: fit-content; padding: 0.38rem 0.9rem; border: 4px solid rgba(12, 140, 152, 0.95); border-radius: 999px; box-shadow: 0 0 26px rgba(219, 149, 0, 0.5); }
.contact-section__title-pill::after { content: ""; position: absolute; top: -2.35rem; right: -3.1rem; z-index: -1; width: clamp(5.5rem, 9vw, 8rem); aspect-ratio: 1; background: url("../img/contact/contact-shine.svg") center / contain no-repeat; pointer-events: none; }
.contact-section__title-pill span { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(1.45rem, 2.6vw, 2.4rem); overflow-wrap: anywhere; text-transform: uppercase; }
.contact-section__subtitle { max-width: 18rem; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.1; }
.contact-section__locations { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.contact-section__locations div { display: grid; gap: 0.1rem; }
.contact-section__locations small { color: rgba(255, 255, 255, 0.72); }
.contact-section__locations strong { color: #db9500; font-family: var(--font-script); font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 0.9; }
.contact-section__details { display: grid; grid-template-columns: minmax(6.4rem, 8rem) minmax(0, 1fr); gap: 0.9rem; align-items: end; }
.contact-section__qr { width: 8rem; max-width: 8rem; aspect-ratio: 1; }
.contact-section__qr .contact-section__qr-asset { min-height: 100%; border-radius: 0; }
.contact-section__qr .contact-section__qr-asset .image-placeholder__frame { min-height: 100%; border-radius: 0; }
.contact-section__qr .contact-section__qr-asset .image-placeholder__image { height: 100%; object-position: center; }
.contact-section__lines { display: grid; gap: 0.25rem; font-size: 1.05rem; }
.contact-section__domain { color: #db9500; font-size: 1.5rem; line-height: 1; overflow-wrap: anywhere; }
.contact-section__form { display: grid; gap: 0.85rem; }
.contact-section__form input, .contact-section__form textarea { width: 100%; padding: 1rem 1.1rem; border: 0; border-radius: 0.7rem; background: #fff; color: #11243a; }
.contact-section__form button { justify-self: end; }
@media (min-width: 40rem) { .contact-section__details { grid-template-columns: 8rem auto; } }
@media (min-width: 56rem) { .contact-section__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 39.99rem) {
  .contact-section__title-pill { border-width: 2px; }
  .contact-section__title-pill::after { top: -1.6rem; right: -2.1rem; width: 5rem; }
  .contact-section__subtitle { max-width: 100%; }
  .contact-section__details { justify-items: start; }
  .contact-section__form button { justify-self: stretch; }
}