/* Madix Design System — global entry point. Consumers link this one file. */


:root{
  /* ── Base: structural ink ───────────────────────────────── */
  --madix-black:#111111;
  --madix-black-true:#000000;
  --madix-white:#FFFFFF;

  /* ── Warm neutral ramp ──────────────────────────────────────
     The ground of the system. Every step is #111111 nudged toward
     a warm hue, so the whole page reads like paper rather than
     screen. --warm-100 is the page; pure white is a surface. */
  --warm-50:#FDFCFA;
  --warm-100:#F7F4EE;
  --warm-200:#EFEAE0;
  --warm-300:#DED8CB;
  --warm-400:#8A8680; /* 3.24:1 on the cream page — non-essential metadata only */
  --warm-500:#71717A; /* brand "Neutral Gray" — the logo descriptor line. 4.40:1 on cream: decorative only, never body text */
  --warm-550:#68686F; /* 4.94:1 on cream — the readable secondary; --text-muted points here */
  --warm-600:#565358;
  --warm-700:#3B3937;
  --warm-800:#26241F;
  --warm-900:#1A1917;

  /* ── Ink at opacity (tonal unity) ───────────────────────────
     Derived from --madix-black so every tint shares one hue. */
  --ink-03:rgba(17,17,17,0.03);
  --ink-06:rgba(17,17,17,0.06);
  --ink-10:rgba(17,17,17,0.10);
  --ink-20:rgba(17,17,17,0.20);
  --ink-40:rgba(17,17,17,0.40);
  --ink-60:rgba(17,17,17,0.60);
  --ink-80:rgba(17,17,17,0.80);

  /* ── The five accents (one per business vertical) ───────────
     Taken from the coloured cuts in the madix wordmark. */
  --madix-cyan:#0099E5;
  --madix-magenta:#C0007A;
  --madix-ochre:#EA9A3E;
  --madix-lime:#98C93C;
  --madix-yellow:#FACC15;

  /* accent tints for backgrounds & chart fills */
  --cyan-tint:#E6F5FC;
  --magenta-tint:#F9E6F2;
  --ochre-tint:#FDF2E5;
  --lime-tint:#F1F8E2;
  --yellow-tint:#FEF8DD;

  /* accent shades for text-on-white (AA at body sizes) */
  --cyan-deep:#0072AC;
  --magenta-deep:#96005F;
  --ochre-deep:#A66413;
  --lime-deep:#5E8317;
  --yellow-deep:#8A6D00;

  /* ── Vertical aliases ───────────────────────────────────────
     Rx · Consumo & OTC · Tecnología Clínica · Veterinaria · Nutrición */
  --vertical-rx:var(--madix-cyan);
  --vertical-rx-tint:var(--cyan-tint);
  --vertical-rx-deep:var(--cyan-deep);
  --vertical-otc:var(--madix-magenta);
  --vertical-otc-tint:var(--magenta-tint);
  --vertical-otc-deep:var(--magenta-deep);
  --vertical-tech:var(--madix-ochre);
  --vertical-tech-tint:var(--ochre-tint);
  --vertical-tech-deep:var(--ochre-deep);
  --vertical-vet:var(--madix-lime);
  --vertical-vet-tint:var(--lime-tint);
  --vertical-vet-deep:var(--lime-deep);
  --vertical-nutri:var(--madix-yellow);
  --vertical-nutri-tint:var(--yellow-tint);
  --vertical-nutri-deep:var(--yellow-deep);

  /* ── Semantic: text ────────────────────────────────────────── */
  --text-heading:var(--madix-black);
  --text-body:var(--warm-700);
  --text-muted:var(--warm-550);
  --text-faint:var(--warm-400);
  --text-inverse:var(--madix-white);
  --text-inverse-muted:rgba(255,255,255,0.66);
  --text-link:var(--madix-black);
  --text-link-hover:var(--cyan-deep);

  /* ── Semantic: surfaces ──────────────────────────────────────
     The page is warm cream. Cards lift off it by going lighter,
     not by casting a shadow. */
  --surface-page:var(--warm-100);
  --surface-card:#FDFCFA;
  --surface-sunken:#F2EDE3;
  --surface-raised:var(--madix-white);
  --surface-inverse:var(--madix-black);
  --surface-hover:var(--ink-03);
  --surface-active:var(--ink-06);

  /* ── Semantic: borders ─────────────────────────────────────── */
  --border-hairline:var(--warm-200);
  --border-strong:var(--warm-300);
  --border-warm:#E4DED2;
  --border-interactive:var(--ink-40);
  --border-inverse:rgba(255,255,255,0.18);
  --border-focus:var(--madix-cyan);

  /* ── Semantic: status ──────────────────────────────────────── */
  --status-info:var(--madix-cyan);
  --status-success:var(--lime-deep);
  --status-warning:var(--madix-ochre);
  --status-critical:var(--madix-magenta);
}

:root{
  /* ── El espectro Madix ───────────────────────────────────────
     Los cinco acentos en el orden del wordmark. Es el gradiente
     firma: sólo aquí los cinco colores conviven. */
  --gradient-spectrum:linear-gradient(90deg,#FACC15 0%,#0099E5 26%,#C0007A 52%,#EA9A3E 76%,#98C93C 100%); /* @kind other */
  --gradient-spectrum-soft:linear-gradient(90deg,rgba(250,204,21,0.16) 0%,rgba(0,153,229,0.16) 26%,rgba(192,0,122,0.16) 52%,rgba(234,154,62,0.16) 76%,rgba(152,201,60,0.16) 100%); /* @kind other */

  /* ── Lavados atmosféricos ───────────────────────────────────
     Radiales muy diluidos para el fondo de un hero o una portada.
     Nunca por encima del 14% de opacidad: el texto manda. */
  --wash-warm:radial-gradient(1100px 620px at 12% -8%,rgba(250,204,21,0.20) 0%,rgba(250,204,21,0) 62%),radial-gradient(900px 560px at 88% 4%,rgba(192,0,122,0.14) 0%,rgba(192,0,122,0) 60%),radial-gradient(1000px 700px at 62% 96%,rgba(0,153,229,0.13) 0%,rgba(0,153,229,0) 64%); /* @kind other */
  --wash-cool:radial-gradient(1000px 600px at 84% -6%,rgba(0,153,229,0.22) 0%,rgba(0,153,229,0) 62%),radial-gradient(860px 520px at 8% 12%,rgba(152,201,60,0.14) 0%,rgba(152,201,60,0) 58%); /* @kind other */
  --wash-dark:radial-gradient(1000px 560px at 82% 4%,rgba(0,153,229,0.17) 0%,rgba(0,153,229,0) 62%),radial-gradient(760px 480px at 4% 92%,rgba(234,154,62,0.12) 0%,rgba(234,154,62,0) 58%); /* @kind other */

  /* ── Gradientes por vertical ────────────────────────────────
     Del acento a su tinte. Para cabeceras de tarjeta y áreas de imagen. */
  --gradient-rx:linear-gradient(148deg,#0099E5 0%,#5CC4F5 58%,#E6F5FC 100%); /* @kind other */
  --gradient-otc:linear-gradient(148deg,#C0007A 0%,#F06FB4 58%,#F9E6F2 100%); /* @kind other */
  --gradient-tech:linear-gradient(148deg,#EA9A3E 0%,#F5C88A 58%,#FDF2E5 100%); /* @kind other */
  --gradient-vet:linear-gradient(148deg,#98C93C 0%,#C3E184 58%,#F1F8E2 100%); /* @kind other */
  --gradient-nutri:linear-gradient(148deg,#FACC15 0%,#FDE47A 58%,#FEF8DD 100%); /* @kind other */

  /* ── Superficies con gradiente ──────────────────────────────
     Cremas apenas modulados: dan volumen sin introducir color. */
  --gradient-surface:linear-gradient(180deg,#FDFCFA 0%,#F7F4EE 100%); /* @kind other */
  --gradient-surface-sunken:linear-gradient(180deg,#F4F0E7 0%,#F7F4EE 100%); /* @kind other */
  --gradient-ink:linear-gradient(168deg,#1D1B18 0%,#111111 62%); /* @kind other */

  /* ── Texto con gradiente ────────────────────────────────────
     Una palabra por titular, nunca la frase completa. */
  --gradient-text:linear-gradient(96deg,#0099E5 0%,#C0007A 54%,#EA9A3E 100%); /* @kind other */
}

:root{
  --font-core:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* type scale — px values are literal, do not round */
  --size-display-1:76px;
  --size-display-2:60px;
  --size-display-3:46px;
  --size-heading-1:34px;
  --size-heading-2:26px;
  --size-heading-3:21px;
  --size-body-lg:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --size-caption:13px;
  --size-micro:11px;

  --leading-display:1.02;
  --leading-heading:1.16;
  --leading-snug:1.35;
  --leading-body:1.55;
  --leading-loose:1.7;

  --tracking-display-1:-2.4px;
  --tracking-display-2:-1.8px;
  --tracking-display-3:-1.2px;
  --tracking-heading-1:-0.7px;
  --tracking-heading-2:-0.4px;
  --tracking-heading-3:-0.2px;
  --tracking-body:0;
  --tracking-eyebrow:0.14em;
  --tracking-descriptor:0.18em;
}

:root{
  /* 4px base, 8px rhythm */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* balanced density: section rhythm sits mid-scale */
  --section-y:88px;
  --section-y-tight:56px;
  --section-y-loose:128px;

  --container-max:1240px;
  --container-narrow:760px;
  --container-gutter:32px;
  --container-gutter-mobile:20px;
}

:root{
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-3xl:40px;
  --radius-pill:999px;
  /* Curva generosa: las tarjetas viven en 20–28px y los CTA principales
     en pill. Los campos de formulario se quedan en 8px para no perder
     la sensación de precisión. */
}

:root{
  /* Containment comes from hairline borders, not shadow.
     Shadow appears only when something genuinely floats. */
  --shadow-none:none;
  --shadow-raise:0 1px 2px rgba(17,17,17,0.05);
  --shadow-float:0 4px 16px rgba(17,17,17,0.08);
  --shadow-overlay:0 16px 48px rgba(17,17,17,0.14);
  --shadow-focus:0 0 0 3px rgba(0,153,229,0.28);
  --shadow-focus-inverse:0 0 0 3px rgba(255,255,255,0.36);
}

:root{
  --ease-standard:cubic-bezier(0.2,0,0.2,1); /* @kind other */
  --ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65,0,0.35,1); /* @kind other */
  --duration-instant:90ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:380ms; /* @kind other */
  /* No bounce, no spring, no overshoot. Colour and opacity carry state. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-core);font-size:var(--size-body);line-height:var(--leading-body);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-family:var(--font-display);font-weight:var(--weight-semibold);line-height:var(--leading-heading);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
img,svg{display:block;max-width:100%}
hr{border:0;border-top:1px solid var(--border-hairline);margin:0}
::selection{background:var(--madix-cyan);color:#fff}
.madix-eyebrow{font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.madix-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-gutter)}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--container-gutter)}
.wash{position:absolute;inset:0;pointer-events:none}
.wash--warm{background-image:var(--wash-warm)}.wash--cool{background-image:var(--wash-cool)}.wash--dark{background-image:var(--wash-dark)}
.mono{font-family:var(--font-mono)}
[data-v="rx"]{--acc:var(--madix-cyan);--acc-tint:var(--cyan-tint);--acc-deep:var(--cyan-deep);--acc-grad:var(--gradient-rx)}
[data-v="otc"]{--acc:var(--madix-magenta);--acc-tint:var(--magenta-tint);--acc-deep:var(--magenta-deep);--acc-grad:var(--gradient-otc)}
[data-v="tech"]{--acc:var(--madix-ochre);--acc-tint:var(--ochre-tint);--acc-deep:var(--ochre-deep);--acc-grad:var(--gradient-tech)}
[data-v="vet"]{--acc:var(--madix-lime);--acc-tint:var(--lime-tint);--acc-deep:var(--lime-deep);--acc-grad:var(--gradient-vet)}
[data-v="nutri"]{--acc:var(--madix-yellow);--acc-tint:var(--yellow-tint);--acc-deep:var(--yellow-deep);--acc-grad:var(--gradient-nutri)}
/* ── Botones ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;font-family:var(--font-core);font-size:15px;font-weight:var(--weight-medium);line-height:1.2;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.btn--sm{padding:8px 16px;font-size:14px;gap:6px}
.btn--lg{padding:16px 30px;font-size:17px;gap:10px}
.btn--primary{background:var(--madix-black);color:var(--madix-white)}
.btn--primary:hover{background:var(--warm-800);color:var(--madix-white)}
.btn--secondary{background:var(--madix-white);color:var(--madix-black);border-color:var(--ink-40)}
.btn--secondary:hover{background:var(--warm-50);color:var(--madix-black);border-color:var(--madix-black)}
.btn--spectrum{background-image:var(--gradient-text);color:var(--madix-white)}
.btn--spectrum:hover{color:var(--madix-white);filter:brightness(1.06)}
.btn--full{display:flex;width:100%}
/* ── Eyebrow / badge / tag ───────────────── */
.eyebrow{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.eyebrow i{font-style:normal;opacity:.55}
.eyebrow--inverse{color:rgba(255,255,255,.62)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;background:var(--warm-100);color:var(--warm-700);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase;line-height:1.4;white-space:nowrap}
.badge--v{background:var(--acc-tint);color:var(--acc-deep);border-color:transparent}
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;background:transparent;color:var(--warm-700);border:1px solid var(--border-strong);border-radius:var(--radius-pill);font-family:var(--font-core);font-size:var(--size-body-sm);line-height:1.3;white-space:nowrap;cursor:pointer;user-select:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.tag:hover{border-color:var(--madix-black)}
.tag[aria-pressed="true"]{background:var(--madix-black);color:var(--madix-white);border-color:var(--madix-black)}
/* ── Section header ──────────────────────── */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-10)}
.sh__body{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;max-width:720px}
.sh h2{font-size:var(--size-heading-1);letter-spacing:var(--tracking-heading-1)}
.sh p{font-size:var(--size-body-lg);line-height:var(--leading-snug);color:var(--text-body)}
.sh--center{flex-direction:column;align-items:center;text-align:center}
.sh--center .sh__body{align-items:center;max-width:640px}
.sh--inverse h2{color:var(--madix-white)}.sh--inverse p{color:var(--text-inverse-muted)}
/* ── Navbar ──────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,244,238,.78);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--border-warm)}
.nav__in{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-gutter);height:72px;display:flex;align-items:center;gap:var(--space-10)}
.nav__logo{display:flex;flex:0 0 auto;text-decoration:none}
.nav__logo img{height:36px;width:auto}
.nav__links{display:flex;align-items:center;gap:var(--space-8);margin-left:auto}
.nav__links a{font-size:var(--size-body-sm);color:var(--warm-600);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:color var(--duration-fast) var(--ease-standard)}
.nav__links a:hover{color:var(--madix-black)}
.nav__links a.is-active{color:var(--madix-black);font-weight:var(--weight-medium);border-bottom-color:var(--madix-black)}
.burger{display:none;margin-left:auto;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:1px solid var(--border-warm);border-radius:var(--radius-md);cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--madix-black);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--madix-black)}
.burger span::before{top:-5px}.burger span::after{top:5px}
/* ── Hero ────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--surface-page)}
.hero__in{position:relative;max-width:var(--container-max);margin:0 auto;padding:128px var(--container-gutter) 104px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-8)}
.hero__pill{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;background:rgba(253,252,250,.72);border:1px solid var(--border-warm);border-radius:var(--radius-pill);backdrop-filter:blur(6px)}
.hero__pill>span:first-child{font-size:var(--size-body-sm);color:var(--warm-700);white-space:nowrap}
.dots{display:flex;gap:3px;padding:5px 10px;background:var(--surface-card);border-radius:var(--radius-pill)}
.dots i{display:block;width:6px;height:6px;border-radius:50%}
.hero h1{font-size:clamp(40px,7.2vw,96px);line-height:.98;letter-spacing:-3.4px;color:var(--madix-black);max-width:1000px}
.grad-text{background-image:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lede{font-size:var(--size-body-lg);line-height:1.5;color:var(--warm-600);max-width:620px}
.hero__cta{display:flex;gap:var(--space-3);padding-top:var(--space-2);flex-wrap:wrap;justify-content:center}
.hero__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6);padding-top:var(--space-10);width:100%}
.fact{display:flex;align-items:baseline;gap:8px}
.fact b{font-family:var(--font-display);font-size:34px;font-weight:var(--weight-semibold);letter-spacing:-1px;color:var(--madix-black);font-variant-numeric:tabular-nums}
.fact span{font-size:var(--size-body-sm);color:var(--text-muted)}
.fact--note{align-items:center}
.fact--note span{max-width:210px;line-height:1.35;text-wrap:pretty}
.hero__band{position:relative;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-gutter)}
.hero__band>div{position:relative;aspect-ratio:16/5;border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;background-image:var(--gradient-spectrum);padding:3px 3px 0;overflow:hidden}
.hero__band>div>div{height:100%;border-radius:calc(var(--radius-3xl) - 3px) calc(var(--radius-3xl) - 3px) 0 0;background-image:var(--gradient-spectrum-soft),var(--gradient-surface);display:flex;align-items:center;justify-content:center;gap:14px}
.hero__band em{font-style:normal;width:8px;height:8px;border-radius:50%;border:1px solid var(--border-strong)}
.hero__band span{font-family:var(--font-mono);font-size:var(--size-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--warm-600);text-align:center}
/* ── Verticales ──────────────────────────── */
.sec{background:var(--surface-page)}
.sec__in{max-width:var(--container-max);margin:0 auto;padding:var(--section-y) var(--container-gutter);display:flex;flex-direction:column;gap:var(--space-12)}
.sec__in--loose{padding-top:var(--section-y-loose)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:stretch}
.vcard{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8) var(--space-6) var(--space-6);background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-xl);overflow:hidden;transition:border-color var(--duration-base) var(--ease-standard)}
.vcard:hover{border-color:var(--acc)}
.vcard__bar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--acc-grad)}
.vcard__glow{position:absolute;top:5px;left:0;right:0;height:96px;background:linear-gradient(180deg,var(--acc-tint) 0%,transparent 100%);pointer-events:none}
.vcard__kicker{position:relative;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--acc-deep)}
.vcard h3{position:relative;font-size:var(--size-heading-2);letter-spacing:var(--tracking-heading-2)}
.vcard p{position:relative;font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--text-body)}
.vcard ul{position:relative;margin:0;padding:var(--space-3) 0 0;list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:auto;border-top:1px solid var(--border-hairline)}
.vcard li{display:flex;align-items:center;gap:9px;min-height:20px;font-size:var(--size-caption);color:var(--text-muted)}
.vcard li i{flex:0 0 auto;width:4px;height:4px;border-radius:50%;background:var(--acc)}
.vcard--open{display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding:var(--space-8);border-radius:var(--radius-xl);background-image:var(--gradient-spectrum-soft);border:1px solid var(--border-warm)}
.vcard--open p{font-size:var(--size-body);line-height:var(--leading-body);color:var(--warm-700)}

.hero__band>div>div{display:block;position:relative;overflow:hidden}
.hero__band img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
@media(max-width:760px){.hero__band>div{aspect-ratio:4/5}}
.hero__band video{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero__band-copy{position:absolute;left:clamp(24px,4.5%,64px);top:50%;transform:translateY(-50%);max-width:min(44%,470px);display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px)}
.hero__band-copy p{margin:0;font-family:var(--font-display);font-size:clamp(15px,1.55vw,25px);font-weight:var(--weight-medium);line-height:1.32;letter-spacing:-.015em;color:var(--madix-black);text-wrap:pretty}
.hero__band-copy ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.hero__band-copy a{display:inline-block;padding:5px 11px;background:rgba(253,252,250,.72);border:1px solid var(--border-warm);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:clamp(9px,.72vw,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--warm-700);text-decoration:none;backdrop-filter:blur(4px);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.hero__band-copy a:hover{background:var(--madix-black);border-color:var(--madix-black);color:var(--madix-white)}
@media(max-width:760px){.hero__band video{object-position:66% 62%}.hero__band-copy{top:24px;left:20px;right:20px;transform:none;max-width:none;gap:12px}.hero__band-copy p{font-size:16px}.hero__band-copy a{font-size:9px;padding:4px 9px}}

/* ── Aparición al hacer scroll ───────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
/* ── Hero secundario: visión del CEO ─────── */
.ceo{position:relative;overflow:hidden;background:var(--surface-page)}
.ceo__in{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--section-y-loose) var(--container-gutter) var(--section-y);display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-20);align-items:center}
.ceo__media{margin:0;position:relative;aspect-ratio:4/5;border-radius:var(--radius-3xl);background-image:var(--gradient-spectrum);padding:3px;overflow:hidden}
.ceo__media>div{height:100%;border-radius:calc(var(--radius-3xl) - 3px);background-image:repeating-linear-gradient(135deg,var(--ink-03) 0 10px,transparent 10px 20px),var(--gradient-surface);display:flex;align-items:flex-end;justify-content:center;padding:var(--space-6)}
.ceo__media img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius-3xl) - 3px)}
.ceo__media span{font-family:var(--font-mono);font-size:var(--size-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--warm-600);text-align:center}
.ceo__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.ceo__quote{margin:0}
.ceo__quote p{font-family:var(--font-display);font-size:clamp(23px,2.1vw,32px);font-weight:var(--weight-semibold);line-height:1.28;letter-spacing:var(--tracking-heading-2);color:var(--madix-black);text-wrap:pretty}
.ceo__quote em{font-style:normal;background-image:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ceo__author{display:flex;align-items:center;gap:14px}
.ceo__rule{flex:0 0 auto;width:34px;height:3px;background-image:var(--gradient-spectrum)}
.ceo__author span{display:flex;flex-direction:column}
.ceo__author b{font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--madix-black)}
.ceo__author em{font-style:normal;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.ceo__lede{font-size:var(--size-body-lg);line-height:1.55;color:var(--warm-600);max-width:560px}
@media(max-width:1080px){.ceo__in{gap:var(--space-12)}}
@media(max-width:760px){.ceo__in{grid-template-columns:1fr;gap:var(--space-10)}.ceo__media{max-width:380px;aspect-ratio:4/5}}

/* Hero de visión sobre fondo de tinta */
.ceo{background:none;background-image:var(--gradient-ink)}
.ceo .wash--cool{background-image:var(--wash-dark)}
.ceo__spectrum{position:absolute;top:0;left:0;right:0;height:4px;background-image:var(--gradient-spectrum)}
.ceo__quote p{color:var(--madix-white)}
.ceo__author b{color:var(--madix-white)}
.ceo__author em{color:rgba(255,255,255,.55)}
.ceo__lede{color:var(--text-inverse-muted)}
.ceo__media>div{background-image:none;background:rgba(255,255,255,.04)}
/* ── Pilares ─────────────────────────────── */
.sec--sunken{position:relative;overflow:hidden;background:var(--surface-sunken)}
.sec--sunken .sec__in{position:relative}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);align-items:stretch}
.pillar{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-10) var(--space-8) var(--space-8);background:var(--gradient-surface);border:1px solid var(--border-warm);border-radius:var(--radius-2xl)}
.pillar{padding-top:0}
.pillar__media{position:relative;margin:0 calc(-1 * var(--space-8)) var(--space-3);aspect-ratio:16/9;overflow:hidden;background:var(--surface-sunken)}
.pillar__media img{display:block;width:100%;height:100%;object-fit:cover}
.pillar__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--acc-tint) 100%);opacity:.45;pointer-events:none}
.pillar__hd{padding-top:var(--space-4)}
.pillar--wide .pillar__media{aspect-ratio:40/9}
@media(max-width:760px){.pillar__media{margin-inline:calc(-1 * var(--space-5))}.pillar--wide .pillar__media{aspect-ratio:16/9}}
.pillar__bar{position:absolute;top:0;left:0;right:0;height:5px;background-image:var(--acc-grad)}
.pillar h3{font-size:var(--size-heading-2);letter-spacing:var(--tracking-heading-2);line-height:1.14}
.pillar__hd{display:flex;flex-direction:column;gap:var(--space-3)}
.pillar ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.pillar li{display:flex;align-items:baseline;gap:10px;font-size:var(--size-body);line-height:var(--leading-snug);color:var(--text-body)}
.pillar li i{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--acc);transform:translateY(-3px)}
.pillar__ft{display:flex;flex-direction:column;gap:var(--space-4);margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--border-warm)}
.pillar--wide{grid-column:1/-1}
@media(min-width:1081px){.pillar--wide .pillar__ft{flex-direction:row;gap:var(--space-10)}.pillar--wide .pillar__ft>div{flex:1}.pillar--wide ul{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-8)}}
.pillar__ft>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pillar__ft p{font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--warm-700)}
/* ── Casos ───────────────────────────────── */
.filters{display:flex;gap:var(--space-2);flex-wrap:wrap}
.cases{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-5)}
.case{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-2xl);overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;transition:border-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-out)}
.case:hover{border-color:var(--acc);transform:translateY(-2px)}
.case__media{position:relative;background-image:linear-gradient(152deg,var(--acc-tint) 0%,#FDFCFA 92%);display:flex;align-items:center;justify-content:center}
.case__media i{position:absolute;top:0;left:0;right:0;height:4px;background-image:var(--acc-grad)}
.case__media span{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-deep);opacity:.66;text-align:center;padding:0 24px}
.case__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5)}
.case__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.case__meta b{font-weight:400;letter-spacing:.1em}
.case h3{font-size:var(--size-heading-2);letter-spacing:var(--tracking-heading-2);line-height:1.18}
.case__media img,.case__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.case__desc{font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--warm-700);text-wrap:pretty}
/* ── Clientes ────────────────────────────── */
@keyframes madix-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{position:relative;margin-top:var(--space-10);overflow:hidden}
.marquee__fade{position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee__fade--l{left:0;background:linear-gradient(90deg,var(--surface-page) 0%,transparent 100%)}
.marquee__fade--r{right:0;background:linear-gradient(270deg,var(--surface-page) 0%,transparent 100%)}
.marquee__track{display:flex;width:max-content;gap:var(--space-4);animation:madix-marquee 44s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.slot{display:flex;align-items:center;justify-content:center;width:232px;height:96px;flex:0 0 auto;padding:var(--space-4);border:1px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--size-body-sm);font-weight:var(--weight-medium);text-align:center;line-height:1.3;color:var(--text-muted)}
.slot{border:none;background:none;padding:var(--space-4) var(--space-5)}
.slot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:.78;transition:opacity var(--duration-base) var(--ease-standard)}
.slot:hover img{opacity:1}
.clients__note{display:flex;justify-content:center;padding:var(--space-8) var(--container-gutter) var(--section-y)}
.clients__note span{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;border-radius:var(--radius-pill);background-image:var(--gradient-spectrum-soft);border:1px solid var(--border-warm);font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--warm-700)}
/* ── Cifras ──────────────────────────────── */
.sec--ink{position:relative;overflow:hidden;background-image:var(--gradient-ink)}
.sec--ink .sec__in{position:relative;gap:var(--space-16)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-12)}
.stat{display:flex;flex-direction:column;gap:var(--space-2)}
.stat b{font-family:var(--font-display);font-size:var(--size-display-3);font-weight:var(--weight-semibold);line-height:1;letter-spacing:var(--tracking-display-3);color:var(--madix-white);font-variant-numeric:tabular-nums}
.stat b[data-v]{color:var(--acc)}
.stat span{font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--madix-white)}
.stat em{font-style:normal;font-size:var(--size-caption);line-height:1.45;color:rgba(255,255,255,.55)}
.quote{margin:0;display:flex;flex-direction:column;gap:var(--space-6);padding-top:var(--space-6);border-top:3px solid var(--acc);max-width:780px}
.quote p{font-family:var(--font-display);font-size:var(--size-display-3);line-height:1.28;letter-spacing:var(--tracking-display-3);color:var(--madix-white)}
.quote footer{display:flex;flex-direction:column;gap:2px}
.quote b{font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--madix-white)}
.quote span{font-size:var(--size-caption);color:rgba(255,255,255,.55)}
/* ── Formularios ─────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--size-body-sm);font-weight:var(--weight-medium);color:var(--madix-black);letter-spacing:-.005em}
.field label i{font-style:normal;color:var(--madix-magenta);margin-left:3px}
.field .hint{font-size:var(--size-caption);line-height:1.45;color:var(--text-muted)}
.input,.select select,textarea.input{width:100%;padding:11px 13px;background:var(--surface-card);color:var(--madix-black);font-family:var(--font-core);font-size:var(--size-body);line-height:1.4;border:1px solid var(--border-strong);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
textarea.input{line-height:var(--leading-body);resize:vertical}
.input:focus,.select select:focus{border-color:var(--border-focus)}
.select{position:relative;display:block}
.select select{padding-right:38px;appearance:none;cursor:pointer}
.select i{position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--warm-500);border-bottom:1.5px solid var(--warm-500);rotate:45deg;margin-top:-7px;pointer-events:none}
.check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;user-select:none;font-size:var(--size-body-sm);line-height:1.45;color:var(--warm-700)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check b{flex:0 0 auto;margin-top:1px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-xs);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.check b i{display:none;width:9px;height:5px;border-left:1.75px solid #fff;border-bottom:1.75px solid #fff;rotate:-45deg;margin-top:-2px}
.check input:checked+b{background:var(--madix-black);border-color:var(--madix-black)}
.check input:checked+b i{display:block}
.alert{position:relative;display:flex;gap:var(--space-4);padding:var(--space-5);background:var(--lime-tint);border-radius:var(--radius-lg);overflow:hidden}
.alert i{position:absolute;top:0;left:0;right:0;height:4px;background:var(--madix-lime)}
.alert div{display:flex;flex-direction:column;gap:4px}
.alert strong{font-size:var(--size-body-sm);font-weight:var(--weight-semibold);color:var(--lime-deep)}
.alert span{font-size:var(--size-body-sm);line-height:1.5;color:var(--warm-700)}
/* ── Contacto ────────────────────────────── */
.contact{position:relative;overflow:hidden;background:var(--surface-page)}
.contact__in{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--section-y) var(--container-gutter);display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-20);align-items:start}
.contact__aside{display:flex;flex-direction:column;gap:var(--space-6)}
.contact__data{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:rgba(253,252,250,.7);border:1px solid var(--border-warm);border-radius:var(--radius-xl);backdrop-filter:blur(6px)}
.contact__data div{display:flex;justify-content:space-between;gap:16px;font-size:var(--size-body)}
.contact__data a{color:var(--madix-black);text-decoration:none}
.contact__data a:hover{color:var(--cyan-deep)}
.contact__data span{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);padding:var(--space-10);background:var(--gradient-surface);border:1px solid var(--border-warm);border-radius:var(--radius-2xl)}
.form .span2{grid-column:1/-1}
.form__submit{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-4)}
/* ── Footer ──────────────────────────────── */
.foot{position:relative;overflow:hidden;background-image:var(--gradient-ink);color:var(--text-inverse-muted)}
.foot__spectrum{position:absolute;top:0;left:0;right:0;height:4px;background-image:var(--gradient-spectrum)}
.foot__in{position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--space-20) var(--container-gutter) var(--space-10)}
.foot__cols{display:grid;grid-template-columns:2fr repeat(2,1fr);gap:var(--space-12);align-items:start}
.foot__brand{display:flex;flex-direction:column;gap:var(--space-4);max-width:300px}
.foot__brand img{height:30px;width:auto}
.foot__brand p{font-size:var(--size-body-sm);line-height:1.5;color:rgba(255,255,255,.55)}
.foot__col{display:flex;flex-direction:column;gap:var(--space-3)}
.foot__col>span{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.42)}
.foot__col a{font-size:var(--size-body-sm);color:rgba(255,255,255,.78);text-decoration:none}
.foot__col a:hover{color:var(--madix-white)}
.foot__bar{margin-top:var(--space-16);padding-top:var(--space-6);border-top:1px solid var(--border-inverse);display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.foot__bar>span:first-child{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.06em;color:rgba(255,255,255,.38)}
.foot__rule{display:flex;gap:6px}
.foot__rule i{width:22px;height:3px}


#inicio,#clientes,#vision,#servicios,#casos,#contacto,.pillar{scroll-margin-top:84px}

/* ── Aviso de mensaje recibido ───────────── */
.dialog__panel--sent{max-width:440px;position:relative;text-align:center;align-items:center;padding-top:var(--space-10)}
.dialog__panel--sent .dialog__hd{align-items:center}
.dialog__panel--sent .dialog__ft{justify-content:center}
.sent__spectrum{position:absolute;top:0;left:0;right:0;height:5px;background-image:var(--gradient-spectrum)}
.sent__mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--lime-tint);color:var(--lime-deep)}
/* ── WhatsApp ────────────────────────────── */
.contact__wa{display:inline-flex;align-items:center;gap:9px;color:var(--madix-black)}
.contact__wa svg{flex:0 0 auto;width:20px;height:20px;color:#25D366}
.contact__wa:hover{color:var(--madix-black)}
.contact__wa:hover span{text-decoration:underline}
.contact__data div:has(.contact__wa){flex-direction:column;align-items:flex-start;gap:6px}
.contact__wa{align-items:flex-start;line-height:1.45}
.contact__wa svg{margin-top:2px}
.wa-bubble{position:fixed;right:24px;bottom:84px;z-index:60;display:inline-flex;align-items:center;gap:0;height:52px;padding:0 13px;background:#25D366;color:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-overlay);text-decoration:none;overflow:hidden;transition:gap var(--duration-base) var(--ease-out),padding var(--duration-base) var(--ease-out),filter var(--duration-fast) var(--ease-standard)}
.wa-bubble svg{flex:0 0 auto;width:26px;height:26px}
.wa-bubble span{max-width:0;opacity:0;white-space:nowrap;font-family:var(--font-core);font-size:15px;font-weight:var(--weight-medium);color:#fff;transition:max-width var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-standard)}
.wa-bubble:hover,.wa-bubble:focus-visible{gap:9px;padding-right:20px;filter:brightness(1.05);color:#fff}
.wa-bubble:hover span,.wa-bubble:focus-visible span{max-width:140px;opacity:1}
@media(max-width:760px){.wa-bubble{right:16px;bottom:70px;height:48px;padding:0 11px}.wa-bubble svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.wa-bubble,.wa-bubble span{transition:none}}
.alert[hidden]{display:none}
/* ── Botón volver arriba ─────────────────── */
.totop{position:fixed;right:24px;bottom:24px;z-index:60;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--madix-black);color:var(--madix-white);border:none;border-radius:50%;box-shadow:var(--shadow-overlay);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-out),visibility var(--duration-base),background var(--duration-fast) var(--ease-standard)}
.totop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background-image:var(--gradient-text)}
@media(max-width:760px){.totop{right:16px;bottom:16px;width:44px;height:44px}}
/* ── Diálogo ─────────────────────────────── */
.dialog{position:fixed;inset:0;z-index:100;background:rgba(17,17,17,.42);display:none;align-items:center;justify-content:center;padding:max(24px,4vh) var(--space-6);overflow-y:auto;overscroll-behavior:contain}
.dialog[open],.dialog.is-open{display:flex}
.dialog__panel{width:100%;max-width:520px;max-height:calc(100vh - max(48px,8vh));overflow-y:auto;margin:auto;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-2xl);box-shadow:var(--shadow-overlay);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)}
.dialog__hd{display:flex;flex-direction:column;gap:var(--space-2)}
.dialog h2{font-size:var(--size-heading-2);letter-spacing:var(--tracking-heading-2)}
.dialog__hd p{font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--text-body)}
.dialog__body{display:flex;flex-direction:column;gap:16px}
.dialog__ft{display:flex;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-2);flex-wrap:wrap}
/* ── Responsive ──────────────────────────── */
@media(max-width:1080px){
  .grid-3,.grid-2{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--space-10)}
  .contact__in{grid-template-columns:1fr;gap:var(--space-12)}
  .cases>*{grid-column:span 3!important}
  .case__media{aspect-ratio:16/10!important}
  .foot__cols{grid-template-columns:1fr 1fr;gap:var(--space-10)}
}
@media(max-width:760px){
  :root{--container-gutter:var(--container-gutter-mobile);--section-y:64px;--section-y-loose:80px;--size-heading-1:28px;--size-display-3:36px}
  .nav__links{position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-5);margin:0;padding:var(--space-6) var(--container-gutter) var(--space-8);background:var(--surface-page);border-bottom:1px solid var(--border-warm);display:none}
  .nav__links.is-open{display:flex}
  .nav__links .btn{align-self:flex-start}
  .burger{display:flex}
  .hero__in{padding:72px var(--container-gutter) 64px}
  .hero h1{letter-spacing:-1.6px}
  .hero__band>div{aspect-ratio:16/9}
  .grid-3,.grid-2,.stats,.cases,.form{grid-template-columns:1fr}
  .cases>*{grid-column:auto!important}
  .sh{flex-direction:column;align-items:flex-start;gap:var(--space-6)}
  .pillar{padding:var(--space-8) var(--space-5) var(--space-6)}
  .form{padding:var(--space-6)}
  .marquee__fade{width:48px}
  .foot__cols{grid-template-columns:1fr}
  .foot__bar{margin-top:var(--space-12)}
}

.alert--error{background:var(--magenta-tint)}
.alert--error i{background:var(--madix-magenta)}
.alert--error strong{color:var(--magenta-deep)}