/* ==========================================================================
   DornaStudio Framework (Bundled)
   - Archivo compilado para evitar waterfall por @import
   ========================================================================== */

/* --- BEGIN: assets/css/core/tokens.css --- */
/* ==========================================================================
   Tokens (Light Mode Only) – DornaStudio
   - Colores semánticos ajustados
   - Tipografía Archivo
   - Escalas fluidas balanceadas
   ========================================================================== */

:root {
  /* --------------------------------------------------
     Typography
     -------------------------------------------------- */
  --font-base: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-display: var(--font-base);

  /* Font weights */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Base font size (16px equivalent) */
  --fs-base: 1rem;

  /* Fluid type scale (balanceada) */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-md: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.28rem + 0.9vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.55rem + 1.3vw, 2.75rem);
  --fs-4xl: clamp(3.55rem, 2.45rem + 3.05vw, 5.6rem);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* --------------------------------------------------
     Spacing scale (fluid)
     -------------------------------------------------- */
  --sp-2xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
  --sp-xs: clamp(0.375rem, 0.32rem + 0.2vw, 0.5rem);
  --sp-s: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --sp-m: clamp(0.75rem, 0.65rem + 0.35vw, 1rem);
  --sp-l: clamp(1rem, 0.85rem + 0.55vw, 1.5rem);
  --sp-xl: clamp(1.5rem, 1.2rem + 0.9vw, 2.25rem);
  --sp-2xl: clamp(2rem, 1.6rem + 1.2vw, 3rem);
  --sp-3xl: clamp(3rem, 2.3rem + 2vw, 4.5rem);

  /* --------------------------------------------------
     Radius & shadows
     -------------------------------------------------- */
  --radius-xs: 0.25rem;
  --radius-s: 0.5rem;
  --radius-m: 0.9rem;
  --radius-l: 1.4rem;
  --radius-pill: 999rem;

  --shadow-s: 0 0.25rem 0.9rem rgba(14, 16, 30, 0.06);
  --shadow-m: 0 0.6rem 1.8rem rgba(14, 16, 30, 0.08);
  --shadow-l: 0 1.2rem 3rem rgba(14, 16, 30, 0.1);

  /* --------------------------------------------------
     Brand colors
     -------------------------------------------------- */
  --blue-700: #0400c7;
  --blue-600: #3a57f8;
  --blue-500: #123af6;
  --blue-400: #6a82fa;
  --blue-200: #bbd2ff;
  --blue-100: #d4e4ff;

  /* Neutrals */
  --n-950: #0e101e;
  --n-900: #181a21;
  --n-800: #2c2e33;

  --n-500: #6a737c;
  --n-300: #adb9cd;
  --n-200: #dce4f1;
  --n-100: #ecf1f9;
  --n-050: #f6f8fc;

  /* Status */
  --danger: #fc4040;
  --warning: #fca311;
  --success: #c4ffc4;

  /* --------------------------------------------------
     Semantic tokens (AJUSTADOS)
     -------------------------------------------------- */

  /* Fondo global */
  --bg: #ecf1f9;

  /* Tarjetas / secciones */
  --surface: #f6f8fc;
  --surface-2: #ffffff;

  /* Texto */
  --heading: #2c2e33;
  --muted: #6a737c;

  /* Compatibilidad */
  --text: var(--heading);
  --text-2: var(--heading);

  /* Líneas */
  --line: var(--n-200);

  /* Primary */
  --primary: var(--blue-500);
  --primary-hover: var(--blue-600);

  /* Focus */
  --focus-ring: rgba(18, 58, 246, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Container */
  --container-max: 80rem;
  --container-pad: var(--sp-l);
}

/* --- END: assets/css/core/tokens.css --- */

/* --- BEGIN: assets/css/core/base.css --- */
/* ==========================================================================
   Base / Reset suave – DornaStudio
   - Light mode
   - Tipografía y colores coherentes por defecto
   ========================================================================== */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset básico */
html,
body {
  margin: 0;
  padding: 0;
}

/* HTML base */
html {
  font-size: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Body */
body {
  font-family: var(--font-base);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);

  /* ✅ Párrafos por defecto */
  color: var(--muted);

  /* ✅ Fondo global */
  background-color: var(--bg);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;
}

/* Media fluidos */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Enlaces */
a {
  color: var(--primary);
  text-decoration: none;
}

a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
  border-radius: 0.25rem;
}

/* Inputs y botones */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Listas limpias */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--fw-600);
  line-height: var(--lh-snug);
  color: var(--heading);
}


/* Párrafos */
p {
  margin: 0;
  color: inherit;
}

/* Selección */
::selection {
  background-color: var(--blue-200);
  color: var(--heading);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- END: assets/css/core/base.css --- */

/* --- BEGIN: assets/css/utilities/layout.css --- */
/* ==========================================================================
   Utilities: Layout
   - container
   - display helpers
   - flex/grid basics
   - stacks
   - responsive variants (sm:/md:/lg:/xl:)
   - viewport sizing utilities
   - width/max-width helpers (NEW)
   - flex proportions (NEW)
   ========================================================================== */

/* --------------------------------------------------
   Container
   -------------------------------------------------- */
.u-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.u-container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --------------------------------------------------
   Display
   -------------------------------------------------- */
.u-block {
  display: block;
}
.u-inline {
  display: inline;
}
.u-inline-block {
  display: inline-block;
}
.u-flex {
  display: flex;
}
.u-inline-flex {
  display: inline-flex;
}
.u-grid {
  display: grid;
}
.u-hidden {
  display: none;
}

/* --------------------------------------------------
   Flex helpers
   -------------------------------------------------- */
.u-flex-col {
  flex-direction: column;
}
.u-flex-row {
  flex-direction: row;
}

.u-wrap {
  flex-wrap: wrap;
}
.u-nowrap {
  flex-wrap: nowrap;
}

.u-jc-start {
  justify-content: flex-start;
}
.u-jc-center {
  justify-content: center;
}
.u-jc-end {
  justify-content: flex-end;
}
.u-jc-between {
  justify-content: space-between;
}
.u-jc-around {
  justify-content: space-around;
}

.u-ai-start {
  align-items: flex-start;
}
.u-ai-center {
  align-items: center;
}
.u-ai-end {
  align-items: flex-end;
}
.u-ai-stretch {
  align-items: stretch;
}

.u-as-start {
  align-self: flex-start;
}
.u-as-center {
  align-self: center;
}
.u-as-end {
  align-self: flex-end;
}
.u-as-stretch {
  align-self: stretch;
}

.u-grow {
  flex: 1 1 auto;
}
.u-shrink {
  flex: 0 1 auto;
}
.u-no-shrink {
  flex-shrink: 0;
}

/* --------------------------------------------------
   Flex proportions (ratio-based) (NEW)
   - Use with .u-flex on the parent
   - Examples:
     - 60/40 => u-flex-6 + u-flex-4
     - 70/30 => u-flex-7 + u-flex-3
     - 50/50 => u-flex-5 + u-flex-5
     - 40/60 => u-flex-4 + u-flex-6
   -------------------------------------------------- */
.u-flex-1 {
  flex: 1 1 0;
}
.u-flex-2 {
  flex: 2 1 0;
}
.u-flex-3 {
  flex: 3 1 0;
}
.u-flex-4 {
  flex: 4 1 0;
}
.u-flex-5 {
  flex: 5 1 0;
}
.u-flex-6 {
  flex: 6 1 0;
}
.u-flex-7 {
  flex: 7 1 0;
}
.u-flex-8 {
  flex: 8 1 0;
}
.u-flex-9 {
  flex: 9 1 0;
}
.u-flex-10 {
  flex: 10 1 0;
}

/* Gap (por tokens fluid) */
.u-gap-2xs {
  gap: var(--sp-2xs);
}
.u-gap-xs {
  gap: var(--sp-xs);
}
.u-gap-s {
  gap: var(--sp-s);
}
.u-gap-m {
  gap: var(--sp-m);
}
.u-gap-l {
  gap: var(--sp-l);
}
.u-gap-xl {
  gap: var(--sp-xl);
}
.u-gap-2xl {
  gap: var(--sp-2xl);
}
.u-gap-3xl {
  gap: var(--sp-3xl);
}

/* --------------------------------------------------
   Grid helpers
   -------------------------------------------------- */
.u-grid-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.u-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.u-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.u-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.u-place-center {
  place-items: center;
}

/* --------------------------------------------------
   Stack patterns (vertical / horizontal)
   -------------------------------------------------- */
.u-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
}

.u-row {
  display: flex;
  flex-direction: row;
  gap: var(--sp-m);
}

/* --------------------------------------------------
   Breakpoints (solo para layout principalmente)
   Nota: aunque uses valores fluidos, aquí necesitamos media queries.
   -------------------------------------------------- */
@media (min-width: 30em) {
  /* ~480 */
  :is(.sm\:u-hidden) {
    display: none;
  }
  :is(.sm\:u-block) {
    display: block;
  }
  :is(.sm\:u-flex) {
    display: flex;
  }
  :is(.sm\:u-grid) {
    display: grid;
  }
  :is(.sm\:u-flex-col) {
    flex-direction: column;
  }
  :is(.sm\:u-flex-row) {
    flex-direction: row;
  }
  :is(.sm\:u-grid-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 48em) {
  /* ~768 */
  :is(.md\:u-hidden) {
    display: none;
  }
  :is(.md\:u-block) {
    display: block;
  }
  :is(.md\:u-flex) {
    display: flex;
  }
  :is(.md\:u-grid) {
    display: grid;
  }
  :is(.md\:u-flex-col) {
    flex-direction: column;
  }
  :is(.md\:u-flex-row) {
    flex-direction: row;
  }
  :is(.md\:u-grid-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.md\:u-grid-3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Responsive flex proportions (NEW)
     Add more only as you actually use them. */
  :is(.md\:u-flex-1) {
    flex: 1 1 0;
  }
  :is(.md\:u-flex-2) {
    flex: 2 1 0;
  }
  :is(.md\:u-flex-3) {
    flex: 3 1 0;
  }
  :is(.md\:u-flex-4) {
    flex: 4 1 0;
  }
  :is(.md\:u-flex-5) {
    flex: 5 1 0;
  }
  :is(.md\:u-flex-6) {
    flex: 6 1 0;
  }
  :is(.md\:u-flex-7) {
    flex: 7 1 0;
  }
  :is(.md\:u-flex-8) {
    flex: 8 1 0;
  }
  :is(.md\:u-flex-9) {
    flex: 9 1 0;
  }
  :is(.md\:u-flex-10) {
    flex: 10 1 0;
  }
}

@media (min-width: 64em) {
  /* ~1024 */
  :is(.lg\:u-hidden) {
    display: none;
  }
  :is(.lg\:u-block) {
    display: block;
  }
  :is(.lg\:u-flex) {
    display: flex;
  }
  :is(.lg\:u-grid) {
    display: grid;
  }
  :is(.lg\:u-grid-3) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :is(.lg\:u-grid-4) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  /* ~1280 */
  :is(.xl\:u-grid-4) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Viewport sizing utilities
   - Full width / full height
   - Mobile-safe viewport units
   ========================================================================== */

/* Width */
.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

/* Relative width helpers (NEW)
   Use for hero wrappers or sections that should not be full-bleed. */
.w-95 {
  width: 95%;
}
.w-90 {
  width: 90%;
}
.w-80 {
  width: 80%;
}
.w-70 {
  width: 70%;
}
.w-60 {
  width: 60%;
}

/* Height (container based) */
.h-full {
  height: 100%;
}

.min-h-full {
  min-height: 100%;
}

/* Height (viewport based) */
.h-screen {
  height: 100vh;
}

.min-h-screen {
  min-height: 100vh;
}

/* Modern viewport units */
.h-dvh {
  height: 100dvh;
}

.min-h-dvh {
  min-height: 100dvh;
}

.h-svh {
  height: 100svh;
}

.min-h-svh {
  min-height: 100svh;
}

/* Full viewport sections */
.u-vp {
  width: 100vw;
  min-height: 100dvh;
  margin-inline: auto;
}

.u-vp-center {
  width: 100vw;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------
   Max-width helpers (content) (NEW)
   Useful for text blocks, keeping readable line length.
   -------------------------------------------------- */
.max-w-xs {
  max-width: 24rem;
}
.max-w-s {
  max-width: 32rem;
}
.max-w-m {
  max-width: 40rem;
}
.max-w-l {
  max-width: 48rem;
}
.max-w-xl {
  max-width: 56rem;
}

/* --- END: assets/css/utilities/layout.css --- */

/* --- BEGIN: assets/css/utilities/spacing.css --- */
/* ==========================================================================
   Utilities: Spacing
   - Padding / Margin
   - Escala fluida simbólica
   - Variantes responsive (sm:, md:, lg:)
   ========================================================================== */

/* --------------------------------------------------
   Padding (all)
   -------------------------------------------------- */
.p-2xs {
  padding: var(--sp-2xs);
}
.p-xs {
  padding: var(--sp-xs);
}
.p-s {
  padding: var(--sp-s);
}
.p-m {
  padding: var(--sp-m);
}
.p-l {
  padding: var(--sp-l);
}
.p-xl {
  padding: var(--sp-xl);
}
.p-2xl {
  padding: var(--sp-2xl);
}
.p-3xl {
  padding: var(--sp-3xl);
}

/* Padding X / Y */
.px-2xs {
  padding-inline: var(--sp-2xs);
}
.px-xs {
  padding-inline: var(--sp-xs);
}
.px-s {
  padding-inline: var(--sp-s);
}
.px-m {
  padding-inline: var(--sp-m);
}
.px-l {
  padding-inline: var(--sp-l);
}
.px-xl {
  padding-inline: var(--sp-xl);
}
.px-2xl {
  padding-inline: var(--sp-2xl);
}
.px-3xl {
  padding-inline: var(--sp-3xl);
}

.py-2xs {
  padding-block: var(--sp-2xs);
}
.py-xs {
  padding-block: var(--sp-xs);
}
.py-s {
  padding-block: var(--sp-s);
}
.py-m {
  padding-block: var(--sp-m);
}
.py-l {
  padding-block: var(--sp-l);
}
.py-xl {
  padding-block: var(--sp-xl);
}
.py-2xl {
  padding-block: var(--sp-2xl);
}
.py-3xl {
  padding-block: var(--sp-3xl);
}

/* Padding single sides */
.pt-m {
  padding-top: var(--sp-m);
}
.pr-m {
  padding-right: var(--sp-m);
}
.pb-m {
  padding-bottom: var(--sp-m);
}
.pb-l {
  padding-bottom: var(--sp-l);
}
.pb-xl {
  padding-bottom: var(--sp-xl);
}
.pb-2xl {
  padding-bottom: var(--sp-2xl);
}
.pb-3xl {
  padding-bottom: var(--sp-3xl);
}
.pl-m {
  padding-left: var(--sp-m);
}

/* --------------------------------------------------
   Margin (all)
   -------------------------------------------------- */
.m-2xs {
  margin: var(--sp-2xs);
}
.m-xs {
  margin: var(--sp-xs);
}
.m-s {
  margin: var(--sp-s);
}
.m-m {
  margin: var(--sp-m);
}
.m-l {
  margin: var(--sp-l);
}
.m-xl {
  margin: var(--sp-xl);
}
.m-2xl {
  margin: var(--sp-2xl);
}
.m-3xl {
  margin: var(--sp-3xl);
}

/* Margin X / Y */
.mx-auto {
  margin-inline: auto;
}

.mx-2xs {
  margin-inline: var(--sp-2xs);
}
.mx-xs {
  margin-inline: var(--sp-xs);
}
.mx-s {
  margin-inline: var(--sp-s);
}
.mx-m {
  margin-inline: var(--sp-m);
}
.mx-l {
  margin-inline: var(--sp-l);
}
.mx-xl {
  margin-inline: var(--sp-xl);
}
.mx-2xl {
  margin-inline: var(--sp-2xl);
}
.mx-3xl {
  margin-inline: var(--sp-3xl);
}

.my-2xs {
  margin-block: var(--sp-2xs);
}
.my-xs {
  margin-block: var(--sp-xs);
}
.my-s {
  margin-block: var(--sp-s);
}
.my-m {
  margin-block: var(--sp-m);
}
.my-l {
  margin-block: var(--sp-l);
}
.my-xl {
  margin-block: var(--sp-xl);
}
.my-2xl {
  margin-block: var(--sp-2xl);
}
.my-3xl {
  margin-block: var(--sp-3xl);
}

/* Margin single sides */
.mt-m {
  margin-top: var(--sp-m);
}
.mr-m {
  margin-right: var(--sp-m);
}
.mb-m {
  margin-bottom: var(--sp-m);
}
.ml-m {
  margin-left: var(--sp-m);
}
.ml-l {
  margin-left: var(--sp-l);
}
.ml-xl {
  margin-left: var(--sp-xl);
}

/* --------------------------------------------------
   Responsive variants
   -------------------------------------------------- */
@media (min-width: 30em) {
  /* sm */
  :is(.sm\:p-m) {
    padding: var(--sp-m);
  }
  :is(.sm\:px-l) {
    padding-inline: var(--sp-l);
  }
  :is(.sm\:py-l) {
    padding-block: var(--sp-l);
  }
  :is(.sm\:m-l) {
    margin: var(--sp-l);
  }
}

@media (min-width: 48em) {
  /* md */
  :is(.md\:p-l) {
    padding: var(--sp-l);
  }
  :is(.md\:px-xl) {
    padding-inline: var(--sp-xl);
  }
  :is(.md\:py-xl) {
    padding-block: var(--sp-xl);
  }
  :is(.md\:m-xl) {
    margin: var(--sp-xl);
  }
}

@media (min-width: 64em) {
  /* lg */
  :is(.lg\:p-xl) {
    padding: var(--sp-xl);
  }
  :is(.lg\:px-2xl) {
    padding-inline: var(--sp-2xl);
  }
  :is(.lg\:py-2xl) {
    padding-block: var(--sp-2xl);
  }
  :is(.lg\:m-2xl) {
    margin: var(--sp-2xl);
  }
}

/* --- END: assets/css/utilities/spacing.css --- */

/* --- BEGIN: assets/css/utilities/type.css --- */
/* ==========================================================================
   Utilities: Typography
   - Tamaños fluidos
   - Pesos
   - Line-heights
   - Alineación
   ========================================================================== */

/* --------------------------------------------------
   Font family
   -------------------------------------------------- */
.t-base {
  font-family: var(--font-base);
}
.t-display {
  font-family: var(--font-display);
}

/* --------------------------------------------------
   Font sizes (fluid)
   -------------------------------------------------- */
.t-xs {
  font-size: var(--fs-xs);
}
.t-sm {
  font-size: var(--fs-sm);
}
.t-md {
  font-size: var(--fs-md);
}
.t-lg {
  font-size: var(--fs-lg);
}
.t-xl {
  font-size: var(--fs-xl);
}
.t-2xl {
  font-size: var(--fs-2xl);
}
.t-3xl {
  font-size: var(--fs-3xl);
}
.t-4xl {
  font-size: var(--fs-4xl);
}

/* --------------------------------------------------
   Font weights (Archivo)
   -------------------------------------------------- */
.t-300 {
  font-weight: var(--fw-300);
}
.t-400 {
  font-weight: var(--fw-400);
}
.t-500 {
  font-weight: var(--fw-500);
}
.t-600 {
  font-weight: var(--fw-600);
}
.t-700 {
  font-weight: var(--fw-700);
}

/* --------------------------------------------------
   Line height utilities
   -------------------------------------------------- */
.lh-tight {
  line-height: var(--lh-tight);
}
.lh-snug {
  line-height: var(--lh-snug);
}
.lh-normal {
  line-height: var(--lh-normal);
}
.lh-relaxed {
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------
   Text alignment
   -------------------------------------------------- */
.t-left {
  text-align: left;
}
.t-center {
  text-align: center;
}
.t-right {
  text-align: right;
}

/* --------------------------------------------------
   Text transform
   -------------------------------------------------- */
.t-upper {
  text-transform: uppercase;
}
.t-lower {
  text-transform: lowercase;
}
.t-cap {
  text-transform: capitalize;
}

/* --------------------------------------------------
   Letter spacing (muy sutil)
   -------------------------------------------------- */
.tracking-tight {
  letter-spacing: -0.015em;
}
.tracking-base {
  letter-spacing: 0;
}
.tracking-wide {
  letter-spacing: 0.08em;
}

/* --------------------------------------------------
   Responsive variants
   -------------------------------------------------- */
@media (min-width: 48em) {
  /* md */
  :is(.md\:t-lg) {
    font-size: var(--fs-lg);
  }
  :is(.md\:t-xl) {
    font-size: var(--fs-xl);
  }
  :is(.md\:t-2xl) {
    font-size: var(--fs-2xl);
  }
}

@media (min-width: 64em) {
  /* lg */
  :is(.lg\:t-xl) {
    font-size: var(--fs-xl);
  }
  :is(.lg\:t-2xl) {
    font-size: var(--fs-2xl);
  }
  :is(.lg\:t-3xl) {
    font-size: var(--fs-3xl);
  }
}

/* --- END: assets/css/utilities/type.css --- */

/* --- BEGIN: assets/css/utilities/colors.css --- */
/* ==========================================================================
   Utilities: Colors
   - Backgrounds / Text / Borders
   - Preferencia: tokens semánticos
   - Acceso opcional a brand scale
   ========================================================================== */

/* --------------------------------------------------
   Text colors (semantic)
   -------------------------------------------------- */
.c-text {
  color: var(--text);
}
.c-text-2 {
  color: var(--text-2);
}
.c-muted {
  color: var(--muted);
}

.c-primary {
  color: var(--primary);
}
.c-danger {
  color: var(--danger);
}
.c-warning {
  color: var(--warning);
}
.c-success {
  color: var(--success);
}

/* Brand access (si lo necesitas directo) */
.c-blue-700 {
  color: var(--blue-700);
}
.c-blue-600 {
  color: var(--blue-600);
}
.c-blue-500 {
  color: var(--blue-500);
}
.c-blue-400 {
  color: var(--blue-400);
}

/* --------------------------------------------------
   Background colors (semantic)
   -------------------------------------------------- */
.bg-base {
  background-color: var(--bg);
}
.bg-surface {
  background-color: var(--surface);
}
.bg-surface-2 {
  background-color: var(--surface-2);
}

.bg-primary {
  background-color: var(--primary);
}
.bg-danger {
  background-color: var(--danger);
}
.bg-warning {
  background-color: var(--warning);
}
.bg-success {
  background-color: var(--success);
}

/* Brand access */
.bg-blue-700 {
  background-color: var(--blue-700);
}
.bg-blue-600 {
  background-color: var(--blue-600);
}
.bg-blue-500 {
  background-color: var(--blue-500);
}
.bg-blue-400 {
  background-color: var(--blue-400);
}
.bg-blue-200 {
  background-color: var(--blue-200);
}
.bg-blue-100 {
  background-color: var(--blue-100);
}

/* --------------------------------------------------
   Border colors (semantic)
   -------------------------------------------------- */
.bd-line {
  border-color: var(--line);
}
.bd-primary {
  border-color: var(--primary);
}
.bd-danger {
  border-color: var(--danger);
}
.bd-warning {
  border-color: var(--warning);
}
.bd-success {
  border-color: var(--success);
}

/* Border width helpers (mínimos; si luego quieres más, ampliamos) */
.bd {
  border-style: solid;
  border-width: 0.0625rem;
} /* hairline equivalente */
.bd-0 {
  border-width: 0;
}
.bd-2 {
  border-width: 0.125rem;
}

/* --------------------------------------------------
   Hover helpers (básicos)
   Nota: no hacemos “hover:” prefijo aún; lo hacemos con clases
   -------------------------------------------------- */
.hover\:c-primary:hover {
  color: var(--primary);
}
.hover\:bg-primary:hover {
  background-color: var(--primary);
}
.hover\:bg-primary-hover:hover {
  background-color: var(--primary-hover);
}
/* --- END: assets/css/utilities/colors.css --- */

/* --- BEGIN: assets/css/utilities/effects.css --- */
/* ==========================================================================
   Utilities: Effects
   - Radius
   - Shadows
   - Blur
   - Transitions
   ========================================================================== */

/* --------------------------------------------------
   Radius
   -------------------------------------------------- */
.r-0 {
  border-radius: 0;
}
.r-xs {
  border-radius: var(--radius-xs);
}
.r-s {
  border-radius: var(--radius-s);
}
.r-m {
  border-radius: var(--radius-m);
}
.r-l {
  border-radius: var(--radius-l);
}
.r-pill {
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------
   Shadows
   -------------------------------------------------- */
.sh-s {
  box-shadow: var(--shadow-s);
}
.sh-m {
  box-shadow: var(--shadow-m);
}
.sh-l {
  box-shadow: var(--shadow-l);
}

/* --------------------------------------------------
   Blur (para overlays, glass, etc.)
   Nota: blur en rem para mantener coherencia
   -------------------------------------------------- */
.blur-s {
  backdrop-filter: blur(0.6rem);
}
.blur-m {
  backdrop-filter: blur(1rem);
}
.blur-l {
  backdrop-filter: blur(1.6rem);
}

/* --------------------------------------------------
   Transitions (rápidas y consistentes)
   -------------------------------------------------- */
.tr {
  transition-property: color, background-color, border-color, opacity, transform,
    box-shadow, filter;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
}

.tr-fast {
  transition-duration: var(--dur-fast);
}
.tr-slow {
  transition-duration: var(--dur-slow);
}

/* --------------------------------------------------
   Interaction helpers
   -------------------------------------------------- */
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  user-select: none;
}
.pointer-none {
  pointer-events: none;
}
.pointer-auto {
  pointer-events: auto;
}

/* --------------------------------------------------
   Opacity / Transform (mínimos)
   -------------------------------------------------- */
.op-0 {
  opacity: 0;
}
.op-20 {
  opacity: 0.2;
}
.op-50 {
  opacity: 0.5;
}
.op-100 {
  opacity: 1;
}

.scale-100 {
  transform: scale(1);
}
.scale-105 {
  transform: scale(1.05);
}

/* ==================================================
   PATCH (SAFE): Safari backdrop-filter support
   - No cambia tu API: mantiene .blur-s/.blur-m/.blur-l
   ================================================== */
.blur-s {
  -webkit-backdrop-filter: blur(0.6rem);
}
.blur-m {
  -webkit-backdrop-filter: blur(1rem);
}
.blur-l {
  -webkit-backdrop-filter: blur(1.6rem);
}

/* ==================================================
   PATCH (SAFE): UI transition (sin opacity/transform)
   - Útil para header, pills, botones, links
   - Evita conflictos cuando GSAP anima opacity/transform
   ================================================== */
.tr-ui {
  transition: color 220ms var(--ease-out),
    background-color 220ms var(--ease-out), border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out), filter 220ms var(--ease-out);
}

/* ==================================================
   PATCH (SAFE): mobile tap highlight off
   - No afecta desktop, solo evita el flash azul en mobile
   ================================================== */
.tap-none {
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------
   Noise overlay (utility)
   Uso: añade .u-noise al contenedor (section/hero/etc.)
   -------------------------------------------------- */
.u-noise {
  position: relative;
  isolation: isolate;
}

.u-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url("../media/images/preload/noise-preload.webp");
  background-repeat: repeat;
  background-size: 200px 200px;

  opacity: 0.3;
  /*mix-blend-mode: soft-light;*/
  transform: translateZ(0);
}

.u-noise.is-animated::before {
  animation: dorna-noise-shift 8s steps(2) infinite;
}

.u-noise.noise-soft::before {
  z-index: 15;
  opacity: 0.4;
  background-image: url("../media/images/preload/noise-preload.png");
  background-size: 180px 180px;
}

@keyframes dorna-noise-shift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(-1%, 1%, 0);
  }
  40% {
    transform: translate3d(1%, -1%, 0);
  }
  60% {
    transform: translate3d(-1%, -1%, 0);
  }
  80% {
    transform: translate3d(1%, 1%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-noise.is-animated::before {
    animation: none;
  }
}

/* ==================================================
   FX Gate (NO FLASH)
   Por defecto, los elementos animables están ocultos.
   JS los revelará cuando toque.
   ================================================== */
/* Por defecto oculto */
[data-anim="lines-up"],
[data-anim="hero-heading"],
[data-anim="shutter-up"] {
  visibility: hidden;
}

/* Se revela SOLO cuando JS lo indica */
[data-anim="lines-up"].is-anim-ready,
[data-anim="hero-heading"].is-anim-ready,
[data-anim="shutter-up"].is-anim-ready {
  visibility: visible;
}

/* Wrapper de recorte */
.split-line {
  overflow: hidden;
  display: block;
}

[data-anim="hero-heading"] .split-line {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* --- END: assets/css/utilities/effects.css --- */

/* --- BEGIN: assets/css/utilities/helpers.css --- */
/* ==========================================================================
   Utilities: Helpers – DornaStudio
   - Accesibilidad
   - Visibilidad
   - Overflow
   - Position / z-index
   - Scrollbar control (GLOBAL + estable)
   - Debug
   ========================================================================== */

/* --------------------------------------------------
   Accesibilidad
   -------------------------------------------------- */

.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;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --------------------------------------------------
   Visibilidad
   -------------------------------------------------- */
.vis-hidden {
  visibility: hidden;
}
.vis-visible {
  visibility: visible;
}

/* --------------------------------------------------
   Overflow
   -------------------------------------------------- */
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}

/* --------------------------------------------------
   Position helpers
   -------------------------------------------------- */
.pos-relative {
  position: relative;
}
.pos-absolute {
  position: absolute;
}
.pos-fixed {
  position: fixed;
}
.pos-sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

/* --------------------------------------------------
   Z-index helpers
   -------------------------------------------------- */
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}
.z-100 {
  z-index: 100;
}
.z-200 {
  z-index: 200;
}
.z-500 {
  z-index: 500;
}
.z-1000 {
  z-index: 1000;
}

/* --------------------------------------------------
   Scrollbar control (SOLUCIÓN REAL)
   -------------------------------------------------- */

/* Firefox */
html.no-scrollbar-stable,
body.no-scrollbar-stable {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Chrome / Safari / Edge */
html.no-scrollbar-stable::-webkit-scrollbar,
body.no-scrollbar-stable::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* --------------------------------------------------
   Debug helpers (solo desarrollo)
   -------------------------------------------------- */
.debug-outline {
  outline: 2px dashed rgba(18, 58, 246, 0.4);
  outline-offset: -2px;
}

.debug-bg {
  background-color: rgba(252, 163, 17, 0.15);
}

/* ==========================================================================
   Scroll Lock (para preload / transitions)
   - Bloquea scroll mientras el overlay está activo
   ========================================================================== */

html.is-scroll-locked,
body.is-scroll-locked {
  overflow: hidden !important;
  height: 100%;
}

/* Mobile: evita gestos de scroll */
html.is-scroll-locked {
  touch-action: none;
}
/* ==================================================
   PATCH (SAFE): Focus ring utility
   - Accesibilidad + consistencia visual
   ================================================== */
.focus-ring:focus-visible {
  outline: var(--focus-ring, 2px solid var(--primary));
  outline-offset: 2px;
}

/* --- END: assets/css/utilities/helpers.css --- */

/* --- BEGIN: assets/css/components/preload.css --- */
/* ==================================================
   OVERLAY base (fix premium)
   - is-active: visible
   - is-hiding: fade out sin cortar visibility
   ================================================== */

.dorna-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999;

  display: grid;
  place-items: center;
  overflow: hidden;

  background: transparent;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* visibility NO se anima como quieres: usamos delay */
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.dorna-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 220ms ease, visibility 0s linear 0s;
}

/* Fade out sin cortar la escena durante el zoom */
.dorna-overlay.is-active.is-hiding {
  opacity: 0;
  visibility: visible; /* clave anti-corte */
  pointer-events: none;

  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

/* ==================================================
   STAGE (GSAP) - contiene todo
   ================================================== */

.dorna-overlay__stage {
  position: absolute;
  inset: 0;

  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* ==================================================
   PANEL AZUL
   ================================================== */

.dorna-overlay__panel {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: #0400c7;
}

/* ==================================================
   WAVES
   ================================================== */

.dorna-overlay__bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.dorna-overlay__bg svg {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 120vw;
  height: 120vh;
  max-width: none;
  max-height: none;

  transform: translate(-50%, -50%) scale(1.15);
  transform-origin: center;

  display: block;
  will-change: transform;
}

/* Drift continuo */
.dorna-overlay.is-animating .dorna-overlay__bg svg {
  animation: dornaWavesMove 6s linear infinite;
}

@keyframes dornaWavesMove {
  from {
    transform: translate(-52%, -48%) scale(1.15);
  }
  to {
    transform: translate(-46%, -54%) scale(1.15);
  }
}

/* ==================================================
   NOISE overlay
   ================================================== */

.dorna-overlay__bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 3;
  pointer-events: none;

  background-image: url("../media/images/preload/noise-preload.webp");
  background-repeat: repeat;
  background-size: 200px 200px;

  opacity: 0.35;
  animation: dornaGrain 1.2s steps(6) infinite;
  will-change: transform;
}

@keyframes dornaGrain {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-4%, 4%);
  }
}

/* ==================================================
   CONTENT (centrado)
   ================================================== */

.dorna-overlay__inner {
  position: absolute;
  inset: 0;
  z-index: 4;

  display: grid;
  place-items: center;
  padding: 2vh 4vw;
  pointer-events: none;
}

/* Preload logo */
.dorna-overlay__preload-logo {
  width: clamp(180px, 22vw, 440px);
  aspect-ratio: 1538 / 230;
  overflow: hidden;
}

.dorna-overlay__preload-logo svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.dorna-overlay__preload-logo [id] {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* ==================================================
   TRANSITION IMAGOTIPO (SVG)
   ================================================== */

.dorna-overlay__transition-mark {
  display: none;
  width: clamp(120px, 14vw, 240px);
  height: auto;
  overflow: visible;
  will-change: transform, opacity;
}

.dorna-overlay__transition-mark svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.dorna-overlay[data-mode="transition"] .dorna-overlay__preload-logo {
  display: none;
}

.dorna-overlay[data-mode="transition"] .dorna-overlay__transition-mark {
  display: block;
}

.dorna-overlay__hint {
  display: none;
}
/* ==================================================
   CLIP PATH (para morph a cuadrado del CTA)
   ================================================== */
.dorna-overlay {
  clip-path: inset(0 0 0 0 round 0px);
  -webkit-clip-path: inset(0 0 0 0 round 0px);
  will-change: clip-path;
}

/* ==================================================
   Accessibility
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  .dorna-overlay.is-animating .dorna-overlay__bg svg,
  .dorna-overlay__bg::after {
    animation: none;
  }

  .dorna-overlay {
    transition: none;
  }
}

/* --- END: assets/css/components/preload.css --- */

/* --- BEGIN: assets/css/components/megamen.css --- */
/* ==================================================
   Header Floating + MegaMenu (component CSS)
   Solo lo imprescindible (el resto son utilities).
   ================================================== */

/* 1) Header positioning */
.c-header-float {
  top: var(--sp-m);
  left: 0;
}

/* 2) Brand (imagotipo + logotipo SVG) */
.c-brand {
  text-decoration: none;
  gap: 0.35rem;
}
.c-brand__mark,
.c-brand__logo {
  display: inline-flex;
  align-items: center;
}
.c-brand__mark svg,
.c-brand__logo svg {
  display: block;
  height: 1.5rem;
  width: auto;
  overflow: visible;
}
.c-brand__mark svg {
  height: 1.55rem;
}

/* ✅ IMPORTANTE:
   El pill debe ser el "anchor" del mega (para portal absoluto)
*/
.c-header-float__pill {
  position: relative;
}

/* ✅ Portal: ocupa el ancho EXACTO del pill */
.c-mega-portal {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 200;
  pointer-events: none; /* se activa solo si hay panel abierto */
}

/* 3) MegaPanel (ahora vive dentro del portal, no dentro del item) */
.c-mega__panel {
  position: absolute;
  left: 0;
  top: var(--sp-s); /* separación entre pill y panel */
  width: 100%;

  transform-origin: top center;
  will-change: transform, opacity;
  min-width: 0;
  max-width: none;
  transform: translateZ(0);
  pointer-events: auto;
}

/* 4) Mega trigger reset */
.c-mega__trigger {
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
}
.c-mega__trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.c-mega__panel a {
  text-decoration: none;
}

/* Services mega menu */
.c-services-mega {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(18rem, 0.95fr);
  gap: var(--sp-l);
  align-items: stretch;
}

.c-services-mega__main {
  display: grid;
  gap: var(--sp-s);
}

.c-services-mega__intro {
  max-width: 42rem;
}

.c-services-mega__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.c-services-mega__eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999rem;
  background: currentColor;
  opacity: 0.9;
}

.c-services-mega__title {
  max-width: 28ch;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--heading);
}

.c-services-mega__lead,
.c-services-mega__aside-copy,
.c-services-mega__step-copy,
.c-services-mega__cta-copy {
  color: var(--muted);
  line-height: var(--lh-relaxed);
}

.c-services-mega__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-m);
}

.c-services-mega__group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.c-services-mega__group-label {
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}

.c-services-mega__services {
  display: grid;
  gap: 0.55rem;
}

.c-services-mega__service {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.35rem 0.45rem;
  margin-inline: -0.45rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--muted);
  --service-icon-color: currentColor;
  transition: background-color 180ms ease, color 180ms ease;
}

.c-services-mega__service::before {
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.06rem;
  flex: 0 0 auto;
  background-color: var(--service-icon-color);
  -webkit-mask: center / contain no-repeat
    url("../svg/icons-services/branding.svg");
  mask: center / contain no-repeat
    url("../svg/icons-services/branding.svg");
  opacity: 0.95;
}

@media (hover: hover) and (pointer: fine) {
  .c-services-mega__service:hover {
    background: var(--n-100);
    color: var(--heading);
    --service-icon-color: var(--primary);
  }
}

.c-services-mega__aside {
  padding: var(--sp-l);
  border-left: 1px solid rgba(31, 41, 55, 0.08);
  border-radius: var(--radius-m);
  background:
    radial-gradient(circle at top right, rgba(18, 58, 246, 0.08), transparent 52%),
    linear-gradient(180deg, rgba(236, 241, 249, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.c-services-mega__aside-title {
  max-width: 18ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--heading);
}

.c-services-mega__steps {
  margin-top: var(--sp-xs);
}

.c-services-mega__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-s);
  align-items: start;
}

.c-services-mega__step-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999rem;
  background: rgba(18, 58, 246, 0.1);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-700);
}

.c-services-mega__step-copy {
  margin: 0;
  font-size: var(--fs-sm);
}

.c-services-mega__cta {
  margin-top: auto;
  padding: var(--sp-m);
  border-radius: var(--radius-s);
  background: var(--n-950);
  color: var(--surface-2);
  align-items: flex-end;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.c-services-mega__cta:hover,
.c-services-mega__cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 1rem 2.2rem rgba(14, 16, 30, 0.14);
}

.c-services-mega__cta-label {
  color: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}

.c-services-mega__cta-copy {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

.c-services-mega__cta .c-cta-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  background: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.c-services-mega__cta .c-cta-icon__fill {
  background: #171a2a;
}

.c-services-mega__cta .c-cta-icon svg,
.c-services-mega__cta .c-cta-icon svg * {
  width: 0.8rem;
  height: 0.8rem;
  fill: var(--surface-2) !important;
  stroke: var(--surface-2) !important;
}

/* Experience mega menu */
.c-experience-mega {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(18rem, 0.95fr);
  gap: var(--sp-l);
  align-items: stretch;
}

.c-experience-mega__main {
  display: grid;
  gap: var(--sp-s);
}

.c-experience-mega__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-m);
}

.c-experience-mega__group-label {
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}

.c-experience-mega__sectors {
  display: grid;
  gap: 0.6rem;
}

.c-experience-mega__sector {
  display: grid;
  gap: 0.2rem;
  padding: 0.45rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: var(--radius-xs);
  transition: background-color 180ms ease, color 180ms ease;
}

.c-experience-mega__sector-title {
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  line-height: 1.3;
}

.c-experience-mega__sector-copy {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.c-experience-panel {
  overflow: hidden;
  position: relative;
}

.c-experience-panel::before {
  content: "";
  position: absolute;
  inset: auto -14% 16% auto;
  width: 11rem;
  height: 11rem;
  border-radius: 999rem;
  background: radial-gradient(circle, rgba(18, 58, 246, 0.18) 0%, rgba(18, 58, 246, 0) 72%);
  pointer-events: none;
}

.c-experience-panel__title {
  margin: 0;
  max-width: 14ch;
  color: var(--heading);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.c-experience-panel__signals {
  position: relative;
  z-index: 1;
}

.c-experience-panel__signal {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-s);
  border: 1px solid rgba(18, 58, 246, 0.08);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.c-experience-panel__signal-title {
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-700);
}

.c-experience-panel__signal-copy {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.c-experience-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.c-experience-panel__stat {
  display: grid;
  gap: 0.18rem;
  min-height: 4.7rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(18, 58, 246, 0.08);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(8px);
}

.c-experience-panel__stat-value {
  color: var(--heading);
  font-size: clamp(1rem, 0.8rem + 0.55vw, 1.32rem);
  font-weight: var(--fw-700);
  line-height: 1;
}

.c-experience-panel__stat-label,
.c-experience-panel__viz-kicker,
.c-experience-panel__bar-value {
  color: var(--muted);
  font-size: var(--fs-xs);
}

.c-experience-panel__stat-label {
  line-height: 1.45;
}

.c-experience-panel__viz {
  padding: 0.8rem 0.9rem 0.9rem;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(236, 242, 255, 0.94) 100%);
  border: 1px solid rgba(18, 58, 246, 0.08);
}

.c-experience-panel__viz-kicker {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: var(--fw-600);
}

.c-experience-panel__viz-copy {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.c-experience-panel__bars {
  margin-top: 0.1rem;
}

.c-experience-panel__bar {
  display: grid;
  gap: 0.28rem;
}

.c-experience-panel__bar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.c-experience-panel__bar-label {
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
}

.c-experience-panel__bar-track {
  position: relative;
  display: block;
  width: 100%;
  height: 0.34rem;
  overflow: hidden;
  border-radius: 999rem;
  background: rgba(17, 24, 39, 0.08);
}

.c-experience-panel__bar-fill {
  display: block;
  width: var(--bar-fill, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(18, 58, 246, 0.95) 0%, rgba(83, 124, 255, 0.78) 100%);
  box-shadow: 0 0 1.2rem rgba(18, 58, 246, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .c-experience-mega__sector:hover {
    background: var(--n-100);
  }

  .c-experience-mega__sector:hover .c-experience-mega__sector-title {
    color: var(--primary);
  }

  .c-experience-mega__sector:hover .c-experience-mega__sector-copy {
    color: var(--heading);
  }
}

/* 5) CTA (icon + arrow swap + elegant fill wipe) */
.c-cta__icon {
  width: 1.75rem;
  height: 1.75rem;

  position: relative;
  overflow: hidden;

  display: grid;
  place-items: center;

  background-color: var(--primary);
  will-change: transform;
}

/* Capa de relleno (color “sube”) */
.c-cta__fill {
  position: absolute;
  inset: 0;
  background: var(--n-950);
  transform: translate3d(0, 110%, 0);
  will-change: transform;
  z-index: 0;
}

/* Flechas (capas A y B) encima del fill */
.c-cta__arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  z-index: 1;
}

/* Flecha SIEMPRE blanca */
.c-cta__icon svg,
.c-cta__icon svg * {
  fill: var(--surface) !important;
  stroke: var(--surface) !important;
}

/* Tamaño del SVG */
.c-cta__icon svg {
  width: 0.62rem;
  height: 0.62rem;
  display: block;
}

/* ==================================================
   MegaMenu arrow (trigger indicator)
   ================================================== */

.c-mega__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* control de tamaño */
  width: 0.4rem;
  height: 0.4rem;

  /* micro ajuste vertical */
  transform: translateY(1px);

  /* transición suave para futuros estados */
  transition: transform 0.25s ease, color 0.25s ease;
}

/* El SVG hereda color */
.c-mega__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Fill y stroke controlados por CSS */
.c-mega__arrow svg,
.c-mega__arrow svg * {
  fill: var(--muted);
  opacity: 0.6;
}

.c-mega__arrow--ghost {
  visibility: hidden;
}

/* Color por defecto (hereda del botón) */
.c-mega__trigger {
  color: var(--text);
}

/* Estado abierto (opcional, pero recomendado) */
.c-mega__trigger[aria-expanded="true"] .c-mega__arrow {
  transform: translateY(1px) rotate(180deg);
}
.c-mega__trigger[aria-expanded="true"] .c-mega__arrow svg {
  opacity: 0.95;
}

/* ==================================================
   Hover pill sutil (header / megamenu)
   ================================================== */

.h-pill-hover {
  position: relative;
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Estado hover / focus */
.h-pill-hover:hover,
.h-pill-hover:focus-visible {
  background-color: var(--n-100);
  box-shadow: var(--sh-xs);
}

/* ==================================================
   Header text hover (shutter / rollover)
   ================================================== */

.c-header-hovertext {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  line-height: 1.15;
  padding-block: 0.08em;
  vertical-align: top;
}

.c-header-hovertext__row {
  grid-area: 1 / 1;
  display: inline-flex;
  white-space: nowrap;
}

.c-header-hovertext__glyph {
  display: inline-block;
  transition: transform 720ms cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--glyph-index, 0) * 0.012s);
  will-change: transform;
}

.c-header-hovertext__row--current .c-header-hovertext__glyph {
  transform: translateY(0);
}

.c-header-hovertext__row--next .c-header-hovertext__glyph {
  transform: translateY(112%);
}

.h-pill-hover:hover .c-header-hovertext__row--current .c-header-hovertext__glyph,
.h-pill-hover:focus-visible .c-header-hovertext__row--current .c-header-hovertext__glyph,
.c-cta:hover .c-header-hovertext__row--current .c-header-hovertext__glyph,
.c-cta:focus-visible .c-header-hovertext__row--current .c-header-hovertext__glyph {
  transform: translateY(-112%);
}

.h-pill-hover:hover .c-header-hovertext__row--next .c-header-hovertext__glyph,
.h-pill-hover:focus-visible .c-header-hovertext__row--next .c-header-hovertext__glyph,
.c-cta:hover .c-header-hovertext__row--next .c-header-hovertext__glyph,
.c-cta:focus-visible .c-header-hovertext__row--next .c-header-hovertext__glyph {
  transform: translateY(0);
}

/* 6) Mobile (si luego haces offcanvas, esto es “por si acaso”) */
@media (max-width: 48em) {
  .c-mega-portal {
    position: static;
    width: 100%;
  }

  .c-mega__panel {
    position: static;
    width: 100%;
  }

  .c-services-mega {
    grid-template-columns: 1fr;
  }

  .c-services-mega__columns {
    grid-template-columns: 1fr;
  }

  .c-experience-mega {
    grid-template-columns: 1fr;
  }

  .c-experience-mega__columns {
    grid-template-columns: 1fr;
  }

  .c-experience-panel__stats {
    grid-template-columns: 1fr;
  }

  .c-services-mega__aside {
    border-left: 0;
    border-top: 1px solid rgba(31, 41, 55, 0.08);
  }
}

/* --- END: assets/css/components/megamen.css --- */

/* --- BEGIN: assets/css/components/cta.css --- */
/* ==================================================
   CTA Component (Global)
   Icon + arrow swap + elegant fill wipe
   ================================================== */

/* Wrapper base */
.c-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  text-decoration: none;
}

/* Texto */
.c-cta__text {
  white-space: nowrap;
}

/* --------------------------------------------------
   Icon block (cuadrado animado)
   -------------------------------------------------- */
.c-cta-icon {
  width: 1.75rem;
  height: 1.75rem;

  position: relative;
  overflow: hidden;

  display: grid;
  place-items: center;

  background-color: var(--primary);
  will-change: transform;
}

/* Capa de relleno (wipe desde abajo) */
.c-cta-icon__fill {
  position: absolute;
  inset: 0;
  background: var(--n-950);
  transform: translate3d(0, 110%, 0);
  will-change: transform;
  z-index: 0;
}

/* Flechas (capas A y B) */
.c-cta-icon__arrow {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  z-index: 1;
}

/* Flecha siempre blanca */
.c-cta-icon svg,
.c-cta-icon svg * {
  fill: var(--surface) !important;
  stroke: var(--surface) !important;
}

/* Tamaño del SVG */
.c-cta-icon svg {
  width: 0.62rem;
  height: 0.62rem;
  display: block;
}

/* --------------------------------------------------
   Icon only mode
   -------------------------------------------------- */
.c-cta.is-icon-only .c-cta__text {
  display: none;
}

/* --- END: assets/css/components/cta.css --- */

/* --- BEGIN: assets/css/components/showcase.css --- */
/* =========================================================
   DORNA — Hero Showcase (Clean Responsive Grid)
   File: assets/css/components/showcase.css

   Objetivo:
   - Grid 100% ancho
   - Wrap natural (sin absolute)
   - Tarjetas SIEMPRE cuadradas
   - Evitar header (safe-top)
   - 5 columnas en desktop
   ========================================================= */

[data-hero-showcase] {
  width: 100%;
  height: 100%;
  min-height: 320px;
  position: relative;
  overflow: hidden;

  /* Safe zones (ajusta si el header cambia) */
  --showcase-safe-top: clamp(110px, 12vh, 170px);
  --showcase-safe-bottom: clamp(14px, 5vh, 50px);

  /* Tamaño objetivo de tarjeta */
  --card: clamp(72px, 8vw, 110px);

  /* Espacio entre tarjetas */
  --gap: clamp(12px, 1.4vw, 20px);
}

/* =========================================================
   HUB (relativo, nunca absolute)
   ========================================================= */

[data-showcase-hub] {
  width: 100%;
  height: 100%;
  position: relative;

  padding-top: var(--showcase-safe-top);
  padding-bottom: var(--showcase-safe-bottom);

  box-sizing: border-box;
}

.c-hero__kicker-line {
  display: block;
}


[data-hero-rotator] {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  line-height: inherit;
  vertical-align: baseline;
  overflow: hidden;
}

/* SCENE layer (futuro, no tocar ahora) */
[data-showcase-scene] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* =========================================================
   GRID
   - 5 columnas fijas en desktop
   - ocupa TODO el ancho disponible
   - wrap automático
   ========================================================= */

.c-showcase__grid {
  width: 100%;
  height: 100%;

  display: grid;
  gap: var(--gap);

  /* 🔑 CAMBIO CLAVE: 5 columnas */
  grid-template-columns: repeat(5, minmax(0, 1fr));

  align-content: center;
  justify-items: stretch;

  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* =========================================================
   CARD (SIEMPRE SQUARE)
   ========================================================= */

.c-showcase__card {
  width: 100%;

  /* 🔒 regla inquebrantable */
  aspect-ratio: 1 / 1;

  border-radius: 18px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(10, 20, 40, 0.1);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  pointer-events: auto;
  transform: translateZ(0);
}

/* Estados */

.c-showcase__card.is-ghost {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(10, 20, 40, 0.1);
  box-shadow: none;
  opacity: 0.9;
}

.c-showcase__card.is-active {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 20, 40, 0.08);
  box-shadow:
    0 20px 48px rgba(10, 20, 40, 0.12),
    0 2px 10px rgba(10, 20, 40, 0.06);
  z-index: 2;
}

.c-showcase__card.is-hover {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .c-showcase__card:hover {
    border-color: rgba(10, 20, 40, 0.14);
  }
}

/* =========================================================
   INNER CONTENT
   ========================================================= */

.c-showcase__inner {
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
}

.c-showcase__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(10, 20, 40, 0.16);
}

.c-showcase__icon::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(10, 20, 40, 0.18);
  transform: rotate(12deg);
  opacity: 0.75;
}

/* Label solo active / hover */

.c-showcase__label {
  font-size: 13px;
  line-height: 1.2;
  color: rgba(10, 20, 40, 0.7);
  white-space: nowrap;
  display: none;
}

.c-showcase__card.is-active .c-showcase__label,
.c-showcase__card.is-hover .c-showcase__label {
  display: block;
}

/* =========================================================
   Proof Section
   ========================================================= */

.c-proof-section {
  position: relative;
  overflow: hidden;
}

.c-proof-section::before {
  content: "";
  position: absolute;
  inset: 4rem auto auto 7%;
  width: 18rem;
  height: 18rem;
  border-radius: 999rem;
  background: radial-gradient(circle, rgba(18, 58, 246, 0.09) 0%, rgba(18, 58, 246, 0) 72%);
  pointer-events: none;
}

.c-proof-shell {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-l);
  background:
    radial-gradient(circle at top right, rgba(18, 58, 246, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 255, 0.98) 100%);
  box-shadow: 0 1.4rem 3.5rem rgba(17, 24, 39, 0.08);
}

.c-proof-shell::after {
  content: "";
  position: absolute;
  inset: auto auto -4rem -3rem;
  width: 13rem;
  height: 13rem;
  border-radius: 999rem;
  background: radial-gradient(circle, rgba(18, 58, 246, 0.08) 0%, rgba(18, 58, 246, 0) 70%);
  pointer-events: none;
}

.c-proof {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.08fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
}

.c-proof__intro {
  top: clamp(5.5rem, 8vw, 6.75rem);
  align-self: start;
  display: grid;
  gap: var(--sp-m);
  padding-block: 0.35rem;
}

.c-proof__title {
  max-width: 10.5ch;
  color: var(--heading);
  font-size: clamp(2.4rem, 1.5rem + 2.7vw, 4.9rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.c-proof__lead {
  max-width: 33rem;
  color: var(--muted);
  font-size: clamp(1rem, 0.92rem + 0.36vw, 1.24rem);
  line-height: 1.65;
}

.c-proof__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 38rem;
}

.c-proof__meta-item,
.c-proof__card {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition:
    opacity var(--capture-form-enter-duration, 0.64s) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--capture-form-enter-duration, 0.64s) cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
  will-change: transform, opacity;
}

.c-proof__meta-item.is-anim-ready,
.c-proof__card.is-anim-ready {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

.c-proof__meta-item {
  display: grid;
  gap: 0.2rem;
  min-height: 6rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.c-proof__meta-value {
  color: var(--heading);
  font-size: clamp(1.15rem, 0.94rem + 0.7vw, 1.7rem);
  font-weight: var(--fw-700);
  line-height: 1;
}

.c-proof__meta-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.c-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.c-proof__card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.9rem;
  min-height: 15.5rem;
  padding: clamp(1.1rem, 1.4vw, 1.5rem);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1.1rem 2.8rem rgba(17, 24, 39, 0.08);
}

.c-proof__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(18, 58, 246, 0.05) 100%);
  pointer-events: none;
}

.c-proof__card--hero,
.c-proof__card--dark {
  grid-column: 1 / -1;
}

.c-proof__card--hero {
  min-height: 18rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 244, 255, 0.94) 100%);
}

.c-proof__card--accent {
  background: linear-gradient(145deg, rgba(236, 243, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.c-proof__card--dark {
  background: linear-gradient(180deg, #111524 0%, #171c30 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1.5rem 3rem rgba(9, 12, 24, 0.28);
}

.c-proof__card-top,
.c-proof__signals {
  position: relative;
  z-index: 1;
}

.c-proof__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.c-proof__card-index {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-proof__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: 0.7rem;
  border: 1px solid rgba(18, 58, 246, 0.1);
  border-radius: 999rem;
  background: rgba(18, 58, 246, 0.06);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  line-height: 1;
}

.c-proof__card-title,
.c-proof__card-copy {
  position: relative;
  z-index: 1;
  margin: 0;
}

.c-proof__card-title {
  max-width: 14ch;
  color: var(--heading);
  font-size: clamp(1.35rem, 1.1rem + 0.55vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.c-proof__card-copy {
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.c-proof__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.c-proof__signal {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding-inline: 0.68rem;
  border-radius: 999rem;
  background: rgba(17, 24, 39, 0.06);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
}

.c-proof__card-ghost {
  position: absolute;
  right: 1rem;
  bottom: 0.7rem;
  font-size: clamp(2.7rem, 1.6rem + 3vw, 5.6rem);
  font-weight: var(--fw-700);
  letter-spacing: -0.08em;
  line-height: 0.84;
  color: rgba(17, 24, 39, 0.06);
  pointer-events: none;
  user-select: none;
}

.c-proof__card--dark .c-proof__card-title,
.c-proof__card--dark .c-proof__signal,
.c-proof__card--dark .c-proof__chip {
  color: var(--surface-2);
}

.c-proof__card--dark .c-proof__card-copy {
  color: rgba(255, 255, 255, 0.72);
}

.c-proof__card--dark .c-proof__signal {
  background: rgba(255, 255, 255, 0.08);
}

.c-proof__card--dark .c-proof__chip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

.c-proof__card--dark .c-proof__card-ghost {
  color: rgba(255, 255, 255, 0.07);
}

@media (hover: hover) and (pointer: fine) {
  .c-proof__card:hover {
    border-color: rgba(18, 58, 246, 0.14);
    box-shadow: 0 1.35rem 3.2rem rgba(17, 24, 39, 0.12);
  }
}

@media (max-width: 63.99em) {
  .c-proof {
    grid-template-columns: 1fr;
  }

  .c-proof__intro {
    position: static;
    top: auto;
  }

  .c-proof__title {
    max-width: 12ch;
  }

  .c-proof__meta,
  .c-proof__grid {
    grid-template-columns: 1fr;
  }

  .c-proof__card--hero,
  .c-proof__card--dark {
    grid-column: auto;
  }
}

/* =========================================================
   Impact Section
   ========================================================= */

.c-impact {
  position: relative;
  width: 100vw;
  background:
    linear-gradient(180deg, rgba(245, 248, 255, 0.98) 0%, rgba(234, 241, 255, 0.94) 100%);
}

.c-impact__pin {
  position: relative;
  height: 100svh;
  min-height: 46rem;
  overflow: hidden;
  padding: clamp(1rem, 1.9vw, 1.8rem);
}

.c-impact__orb {
  position: absolute;
  display: block;
  border-radius: 999rem;
  pointer-events: none;
  filter: blur(8px);
}

.c-impact__orb--a {
  inset: 8% auto auto -4%;
  width: clamp(14rem, 24vw, 28rem);
  height: clamp(14rem, 24vw, 28rem);
  background: radial-gradient(circle, rgba(18, 58, 246, 0.12) 0%, rgba(18, 58, 246, 0) 70%);
}

.c-impact__orb--b {
  inset: auto -6% 8% auto;
  width: clamp(12rem, 22vw, 24rem);
  height: clamp(12rem, 22vw, 24rem);
  background: radial-gradient(circle, rgba(18, 58, 246, 0.1) 0%, rgba(18, 58, 246, 0) 72%);
}

.c-impact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
  height: 100%;
}

.c-impact__copy {
  max-width: min(42rem, 42vw);
  padding-left: clamp(0rem, 1vw, 0.75rem);
}

.c-impact__kicker,
.c-impact__lead {
  margin: 0;
}

.c-impact__kicker {
  margin-top: 1.15rem;
  color: var(--heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
  line-height: 1.25;
}

.c-impact__title {
  margin: 1rem 0 0;
  color: var(--heading);
  font-size: clamp(3.1rem, 5.4vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.09em;
}

.c-impact__title-line {
  display: block;
}

.c-impact__lead {
  margin-top: 1.35rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 0.92rem + 0.38vw, 1.22rem);
  line-height: 1.72;
}

.c-impact__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.c-impact__metric {
  display: grid;
  gap: 0.18rem;
  min-width: 8.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

.c-impact__metric-value {
  color: var(--heading);
  font-size: clamp(1.05rem, 0.9rem + 0.52vw, 1.5rem);
  font-weight: var(--fw-700);
  line-height: 1;
}

.c-impact__metric-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.c-impact__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: min(72vh, 44rem);
}

.c-impact__background-word {
  position: absolute;
  inset: 50% -2vw auto auto;
  transform: translateY(-50%);
  width: min(44rem, 44vw);
  height: min(44rem, 44vw);
  pointer-events: none;
}

.c-impact__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center end;
  color: rgba(18, 58, 246, 0.08);
  font-size: clamp(6rem, 14vw, 13rem);
  font-weight: var(--fw-700);
  letter-spacing: -0.09em;
  line-height: 0.82;
  text-transform: uppercase;
  opacity: 0;
}

.c-impact__stack {
  position: relative;
  width: min(40rem, 42vw);
  height: min(70vh, 43rem);
}

.c-impact-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1rem;
  padding: clamp(1.15rem, 1.5vw, 1.55rem);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.4rem 3.5rem rgba(17, 24, 39, 0.12);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.c-impact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(18, 58, 246, 0.06) 100%);
  pointer-events: none;
}

.c-impact-card--brand {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 244, 255, 0.96) 100%);
}

.c-impact-card--web {
  background: linear-gradient(145deg, rgba(232, 240, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.c-impact-card--content {
  background: linear-gradient(145deg, rgba(250, 252, 255, 0.98) 0%, rgba(241, 245, 255, 0.96) 100%);
}

.c-impact-card--growth {
  background: linear-gradient(180deg, #101321 0%, #181d31 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1.6rem 3.6rem rgba(9, 12, 24, 0.3);
}

.c-impact-card__top,
.c-impact-card__title,
.c-impact-card__copy,
.c-impact-card__signals {
  position: relative;
  z-index: 1;
  margin: 0;
}

.c-impact-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.c-impact-card__index {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-impact-card__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: 0.74rem;
  border: 1px solid rgba(18, 58, 246, 0.1);
  border-radius: 999rem;
  background: rgba(18, 58, 246, 0.06);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  line-height: 1;
}

.c-impact-card__title {
  max-width: 14ch;
  color: var(--heading);
  font-size: clamp(1.55rem, 1.2rem + 0.75vw, 2.3rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.c-impact-card__copy {
  max-width: 31rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.72;
}

.c-impact-card__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.c-impact-card__signal {
  display: inline-flex;
  align-items: center;
  min-height: 1.95rem;
  padding-inline: 0.72rem;
  border-radius: 999rem;
  background: rgba(17, 24, 39, 0.06);
  color: var(--heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-500);
}

.c-impact-card--growth .c-impact-card__title,
.c-impact-card--growth .c-impact-card__chip,
.c-impact-card--growth .c-impact-card__signal {
  color: var(--surface-2);
}

.c-impact-card--growth .c-impact-card__copy {
  color: rgba(255, 255, 255, 0.72);
}

.c-impact-card--growth .c-impact-card__signal,
.c-impact-card--growth .c-impact-card__chip {
  background: rgba(255, 255, 255, 0.08);
}

.c-impact-card--growth .c-impact-card__chip {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 63.99em) {
  .c-impact__pin {
    height: auto;
    min-height: unset;
    padding-block: 5.5rem 2rem;
  }

  .c-impact__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .c-impact__copy {
    max-width: none;
  }

  .c-impact__title {
    font-size: clamp(2.55rem, 10vw, 4.35rem);
  }

  .c-impact__visual,
  .c-impact__stack {
    min-height: unset;
    height: auto;
  }

  .c-impact__background-word {
    display: none;
  }

  .c-impact__stack {
    display: grid;
    width: 100%;
    gap: 1rem;
  }

  .c-impact-card {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   Results Section
   ========================================================= */

.c-results-section {
  position: relative;
  min-height: 280svh;
  width: 100vw;
  overflow: clip;
  background:
    radial-gradient(circle at top left, rgba(18, 58, 246, 0.08) 0%, rgba(18, 58, 246, 0) 34%),
    linear-gradient(180deg, rgba(247, 249, 255, 0.98) 0%, rgba(241, 246, 255, 0.96) 100%);
}

.c-results__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  padding: clamp(1rem, 1.6vw, 1.55rem);
}

.c-results__orb {
  position: absolute;
  display: block;
  border-radius: 999rem;
  filter: blur(12px);
  pointer-events: none;
}

.c-results__orb--a {
  inset: 12% auto auto -6%;
  width: clamp(16rem, 26vw, 30rem);
  height: clamp(16rem, 26vw, 30rem);
  background: radial-gradient(circle, rgba(18, 58, 246, 0.12) 0%, rgba(18, 58, 246, 0) 72%);
}

.c-results__orb--b {
  inset: auto -8% 4% auto;
  width: clamp(15rem, 24vw, 26rem);
  height: clamp(15rem, 24vw, 26rem);
  background: radial-gradient(circle, rgba(18, 58, 246, 0.11) 0%, rgba(18, 58, 246, 0) 72%);
}

.c-results__intro,
.c-results__viewport {
  position: relative;
  z-index: 1;
}

.c-results__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(21rem, 0.88fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
}

.c-results__eyebrow {
  margin-bottom: 1.05rem;
}

.c-results__headline {
  max-width: 46rem;
}

.c-results__title {
  margin: 0;
  color: var(--heading);
  max-width: 8.5ch;
  font-size: clamp(2.65rem, 4.4vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.08em;
}

.c-results__title-line {
  display: block;
}

.c-results__aside {
  display: grid;
  gap: 1.2rem;
  max-width: 28rem;
  padding-top: clamp(0.5rem, 1.3vw, 1.35rem);
}

.c-results__copy {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.24rem);
  line-height: 1.72;
}

.c-results__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.c-results__stat {
  display: grid;
  gap: 0.2rem;
  min-height: 5.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(10px);
}

.c-results__stat,
.c-results__cta {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition:
    opacity var(--capture-form-enter-duration, 0.64s) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--capture-form-enter-duration, 0.64s) cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.c-results__stat.is-anim-ready,
.c-results__cta.is-anim-ready {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.c-results__stat-value {
  color: var(--heading);
  font-size: clamp(1.1rem, 0.92rem + 0.62vw, 1.6rem);
  font-weight: var(--fw-700);
  line-height: 1;
}

.c-results__stat-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.c-results__cta {
  width: fit-content;
  margin-top: 0.15rem;
  padding: 0.8rem 0.88rem 0.8rem 0.95rem;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1rem 2.4rem rgba(17, 24, 39, 0.08);
}

.c-results__cta-label {
  color: var(--heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
}

.c-results__cta-copy {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.c-results__cta .c-cta-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-xs);
  background: var(--primary);
}

.c-results__cta .c-cta-icon svg,
.c-results__cta .c-cta-icon svg * {
  width: 0.8rem;
  height: 0.8rem;
  fill: var(--surface-2) !important;
  stroke: var(--surface-2) !important;
}

.c-results__viewport {
  margin-top: clamp(1rem, 2.6vh, 2rem);
  overflow: hidden;
}

.c-results__track {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  width: max-content;
  padding-right: clamp(18vw, 24vw, 28vw);
  will-change: transform;
}

.c-result-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 clamp(18.5rem, 28vw, 27rem);
  min-height: clamp(21rem, 47vh, 26rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: clamp(0.95rem, 1.25vw, 1.2rem);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.35rem 3.2rem rgba(17, 24, 39, 0.1);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.c-result-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(18, 58, 246, 0.05) 100%);
  pointer-events: none;
}

.c-result-card--b2b {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 244, 255, 0.96) 100%);
}

.c-result-card--estate {
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.98) 0%, rgba(241, 246, 255, 0.96) 100%);
}

.c-result-card--hospitality {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 255, 0.95) 100%);
}

.c-result-card--growth {
  background: linear-gradient(180deg, #0f1322 0%, #171c30 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1.6rem 3.4rem rgba(9, 12, 24, 0.32);
}

.c-result-card__top,
.c-result-card__body,
.c-result-card__metrics {
  position: relative;
  z-index: 1;
}

.c-result-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.c-result-card__index {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-result-card__sector {
  color: rgba(17, 24, 39, 0.2);
  font-size: clamp(1.45rem, 1rem + 1.2vw, 2.35rem);
  font-weight: var(--fw-700);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.c-result-card__body {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.c-result-card__title,
.c-result-card__copy {
  margin: 0;
}

.c-result-card__title {
  max-width: 13ch;
  color: var(--heading);
  font-size: clamp(1.28rem, 1.02rem + 0.6vw, 1.72rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.c-result-card__copy {
  max-width: 28rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.72;
}

.c-result-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.c-result-card__metric {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-height: 5.4rem;
  padding: 0.72rem 0.78rem;
  border-radius: var(--radius-s);
  background: rgba(17, 24, 39, 0.05);
}

.c-result-card__metric--accent {
  background: rgba(18, 58, 246, 0.12);
}

.c-result-card__metric-value {
  color: var(--heading);
  font-size: clamp(1rem, 0.92rem + 0.34vw, 1.24rem);
  font-weight: var(--fw-700);
  line-height: 1.08;
}

.c-result-card__metric-label {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.c-result-card--growth .c-result-card__title,
.c-result-card--growth .c-result-card__metric-value {
  color: var(--surface-2);
}

.c-result-card--growth .c-result-card__copy,
.c-result-card--growth .c-result-card__metric-label {
  color: rgba(255, 255, 255, 0.72);
}

.c-result-card--growth .c-result-card__sector {
  color: rgba(255, 255, 255, 0.15);
}

.c-result-card--growth .c-result-card__metric {
  background: rgba(255, 255, 255, 0.08);
}

.c-result-card--growth .c-result-card__metric--accent {
  background: rgba(18, 58, 246, 0.24);
}

@media (max-width: 63.99em) {
  .c-results-section {
    min-height: auto;
  }

  .c-results__pin {
    position: relative;
    height: auto;
    padding-block: 5.5rem 2rem;
  }

  .c-results__intro {
    grid-template-columns: 1fr;
  }

  .c-results__title {
    font-size: clamp(2.75rem, 10vw, 4.6rem);
  }

  .c-results__stats,
  .c-result-card__metrics {
    grid-template-columns: 1fr;
  }

  .c-results__track {
    display: grid;
    width: 100%;
    padding-right: 0;
  }

  .c-result-card {
    flex-basis: auto;
    min-height: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- END: assets/css/components/showcase.css --- */

/* --- Results Section Override --- */
.c-results-section {
  position: relative;
  min-height: auto;
  width: 100vw;
  overflow: hidden;
  background: var(--n-050);
}

.c-results__pin {
  position: relative;
  max-width: min(100vw, 1920px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
  padding: clamp(4.2rem, 6vw, 6.8rem) clamp(1rem, 1.9vw, 2rem) clamp(2.2rem, 3vw, 3.5rem);
  z-index: 1;
}

.c-results__orb {
  display: none !important;
}

.c-results__orb--a {
  display: none !important;
}

.c-results__orb--b {
  display: none !important;
}

.c-results__intro,
.c-results__rail-head,
.c-results__viewport {
  position: relative;
  z-index: 1;
}

.c-results__liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.c-results__liquid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  opacity: 0.3;
}

.c-results__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(26rem, 0.66fr);
  gap: clamp(0.85rem, 1.6vw, 1.6rem);
  align-items: start;
  min-height: clamp(11.5rem, 15vw, 14rem);
}

.c-results__eyebrow {
  margin-bottom: 1.15rem;
}

.c-results__headline {
  width: 100%;
  max-width: none;
  align-self: start;
}

.c-results__title {
  margin: 0;
  width: 100%;
  max-width: none;
  color: var(--heading);
  font-size: clamp(2.65rem, 1.95rem + 2vw, 4.25rem);
  font-weight: var(--fw-700);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: normal;
  overflow: visible;
}

.c-results__title-line {
  display: block;
  white-space: normal;
}

.c-results__accent {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.03em;
}

.c-results__aside {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 27rem;
  justify-self: end;
  align-self: start;
  padding-top: clamp(2.45rem, 3vw, 3.2rem);
  text-align: right;
}

.c-results__copy {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.98rem, 0.92rem + 0.22vw, 1.14rem);
  font-weight: var(--fw-500);
  line-height: 1.7;
}

.c-results__cta {
  width: min(100%, 31rem);
  margin-top: 0.15rem;
  padding: 1.05rem 1.1rem 1.05rem 1.2rem;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1rem 2.5rem rgba(18, 24, 39, 0.06);
}

.c-results__cta-label {
  color: var(--heading);
  font-size: clamp(1.02rem, 0.98rem + 0.16vw, 1.14rem);
  font-weight: var(--fw-700);
}

.c-results__cta-copy {
  color: var(--muted);
  font-size: clamp(0.92rem, 0.9rem + 0.08vw, 0.98rem);
  line-height: 1.45;
}

.c-results__cta .c-cta-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-s);
  background: var(--primary);
}

.c-results__cta .c-cta-icon svg,
.c-results__cta .c-cta-icon svg * {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--surface-2) !important;
  stroke: var(--surface-2) !important;
}

.c-results__viewport {
  margin-top: 2rem;
  overflow: visible;
  padding-bottom: 0;
}

.c-results__test-block {
  margin-top: 2rem;
  min-height: 24rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.c-results__test-copy {
  max-width: 56rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 0.96rem + 0.24vw, 1.16rem);
  line-height: 1.75;
}

.c-results__track {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 1.25rem;
  width: 100%;
  padding-right: 0;
  transition: grid-template-columns 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.c-result-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  min-height: clamp(18rem, 24vw, 22rem);
  padding: 1.55rem 1.35rem 1.1rem;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: calc(var(--radius-l) + 0.1rem);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1.4rem 3rem rgba(18, 24, 39, 0.06);
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.c-result-card::before {
  content: none;
}

.c-result-card--b2b {
  background: rgba(255, 255, 255, 0.98);
}

.c-result-card--estate {
  background: rgba(255, 255, 255, 0.98);
}

.c-result-card--hospitality {
  background: rgba(255, 255, 255, 0.98);
}

@media (hover: hover) and (pointer: fine) {
  .c-results__track:has(.c-result-card:nth-child(1):hover),
  .c-results__track:has(.c-result-card:nth-child(1):focus-within) {
    grid-template-columns: 1.12fr 0.94fr 0.94fr;
  }

  .c-results__track:has(.c-result-card:nth-child(2):hover),
  .c-results__track:has(.c-result-card:nth-child(2):focus-within) {
    grid-template-columns: 0.94fr 1.12fr 0.94fr;
  }

  .c-results__track:has(.c-result-card:nth-child(3):hover),
  .c-results__track:has(.c-result-card:nth-child(3):focus-within) {
    grid-template-columns: 0.94fr 0.94fr 1.12fr;
  }
}

.c-result-card__brand,
.c-result-card__metrics,
.c-result-card__hover-cta {
  position: relative;
  z-index: 1;
}

.c-result-card__link {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.c-result-card__hover-cta {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  display: inline-flex;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  transition:
    visibility 0s linear 220ms,
    opacity 220ms ease,
    transform 220ms ease;
}

.c-result-card__hover-cta .c-cta-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-s);
  background: var(--primary);
  box-shadow: 0 0.8rem 1.8rem rgba(18, 58, 246, 0.18);
}

.c-result-card__hover-cta .c-cta-icon svg,
.c-result-card__hover-cta .c-cta-icon svg * {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--surface-2) !important;
  stroke: var(--surface-2) !important;
}

.c-result-card__brand {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: start;
  color: var(--heading);
  font-size: clamp(2.5rem, 3.1vw, 4rem);
  font-weight: var(--fw-700);
  line-height: 0.92;
  letter-spacing: -0.07em;
  text-transform: none;
}

.c-result-card--estate .c-result-card__brand,
.c-result-card--hospitality .c-result-card__brand {
  font-size: clamp(2rem, 2.35vw, 3.1rem);
  letter-spacing: -0.04em;
  font-weight: var(--fw-500);
}

.c-result-card__brand-media {
  display: block;
  width: auto;
  max-width: min(14rem, 82%);
  max-height: clamp(2.6rem, 4.6vw, 4.35rem);
  object-fit: contain;
  object-position: left top;
}

.c-result-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  width: 100%;
  margin-top: auto;
}

.c-result-card--two-metrics .c-result-card__metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-result-card__metric {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  min-height: 5.2rem;
  width: 100%;
  padding: 0.9rem 0.95rem;
  border-radius: var(--radius-s);
  background: rgba(17, 24, 39, 0.05);
}

.c-result-card__metric-value {
  color: var(--heading);
  font-size: clamp(1.5rem, 1.2rem + 0.5vw, 2rem);
  font-weight: var(--fw-700);
  line-height: 1;
  letter-spacing: -0.05em;
}

.c-result-card__metric-label {
  color: var(--heading);
  font-size: clamp(0.88rem, 0.86rem + 0.08vw, 0.96rem);
  font-weight: var(--fw-500);
  line-height: 1.25;
}

@media (hover: hover) and (pointer: fine) {
  .c-result-card:hover .c-result-card__hover-cta,
  .c-result-card:focus-within .c-result-card__hover-cta {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    transition-delay: 0s;
  }
}

.c-result-card__metric--icon {
  display: none !important;
}

@media (max-width: 63.99em) {
  .c-results__pin {
    padding: 4.6rem 1rem 2rem;
  }

  .c-results__intro {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .c-results__headline,
  .c-results__aside {
    max-width: none;
  }

  .c-results__aside {
    justify-self: stretch;
  }

  .c-results__title {
    max-width: 10.5ch;
    font-size: clamp(2.55rem, 10.5vw, 4.2rem);
  }

  .c-results__title-line {
    white-space: normal;
  }

  .c-results__track {
    grid-template-columns: 1fr;
  }

  .c-result-card {
    min-height: 16rem;
  }

  .c-result-card__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-result-card__hover-cta {
    display: none;
  }
}