/* =========================================================================
   WindMar Commercial Landing Page
   WindMar Home · División Comercial

   Implementation of "Propuesta Comercial Farmacias Caridad.dc.html"
   (Claude Design prototype). Tokens and base typography are lifted verbatim
   from the design system's colors_and_type.css; everything below the
   TOKENS/BASE blocks is this page.
   ========================================================================= */

/* ------------------------------------------------------------------ FONTS */

@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("assets/fonts/Montserrat-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Bebas Neue"; src:url("assets/fonts/BebasNeue-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

/* ----------------------------------------------------------------- TOKENS */

:root {
  --wm-blue:#1D429B; --wm-blue-deep:#21274E; --wm-orange:#F89B24;

  --wm-blue-50:#EEF3FD;  --wm-blue-100:#D8E3F7; --wm-blue-200:#AFC3EE;
  --wm-blue-300:#7F9CDF; --wm-blue-400:#4A70C8; --wm-blue-500:#1D429B;
  --wm-blue-600:#183785; --wm-blue-700:#152D6B; --wm-blue-800:#21274E;
  --wm-blue-900:#0A0F1B;

  --wm-orange-300:#FBC074; --wm-orange-500:#F89B24; --wm-orange-600:#E28312;
  /* The updated design uses --wm-orange-50/-100, which colors_and_type.css does
     not define (its orange scale stops at 300). Without these the card and chip
     gradients resolve to nothing. Tints matched to the blue scale's steps. */
  --wm-orange-50:#FEF5E9;  --wm-orange-100:#FCE4C4;

  --wm-black:#231F20;    --wm-gray-700:#4B4B4E; --wm-gray-500:#8A8A8F;
  --wm-gray-300:#C8C9CE; --wm-gray-200:#E4E5E9; --wm-gray-100:#F1F2F5;
  --wm-gray-50:#F7F8FA;  --wm-white:#FFFFFF;

  --wm-bg:var(--wm-white);
  --wm-fg:var(--wm-black);
  --wm-fg-muted:var(--wm-gray-700);
  --wm-fg-subtle:var(--wm-gray-500);
  --wm-fg-brand:var(--wm-blue);

  --wm-gradient-dark: linear-gradient(135deg,#0A0F1B 0%,#223264 100%);
  --wm-gradient-hero: linear-gradient(180deg,#1D429B 0%,#21274E 100%);

  --wm-shadow-sm:0 1px 2px rgba(33,39,78,.08);
  --wm-shadow-md:0 8px 24px rgba(33,39,78,.10);
  --wm-shadow-info:0 18px 40px rgba(29,66,155,.22);

  --wm-font-sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --wm-font-display:"Bebas Neue","Montserrat","Helvetica Neue",Arial,sans-serif;

  --wm-fs-h1:48px; --wm-fs-h2:36px; --wm-fs-h3:28px; --wm-fs-h4:22px;
  --wm-fs-lead:18px; --wm-fs-body:16px; --wm-fs-small:14px; --wm-fs-micro:12px;

  --wm-lh-tight:1.05; --wm-lh-snug:1.2; --wm-lh-normal:1.45;

  /* Sticky-header allowance for in-page anchors. Must exceed the rendered
     rendered header height or an anchored section lands underneath the sticky
     bar. Header is 84px on desktop (59px logo + 12px padding + border) and
     73px below 900px. */
  --wm-header-h:95px;

  --wm-shell:1140px;
  --wm-pad-y:72px;
  --wm-pad-x:32px;
}

/* ------------------------------------------------------------------- BASE */

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

html { scroll-behavior:smooth; }

html, body {
  font-family:var(--wm-font-sans);
  font-size:var(--wm-fs-body);
  line-height:var(--wm-lh-normal);
  color:var(--wm-fg);
  background:var(--wm-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body { margin:0; }

h1 { font-size:var(--wm-fs-h1); line-height:var(--wm-lh-tight); letter-spacing:-.01em; color:var(--wm-fg-brand); font-weight:900; text-wrap:balance; }
h2 { font-size:var(--wm-fs-h2); line-height:var(--wm-lh-snug);  letter-spacing:-.01em; color:var(--wm-fg-brand); font-weight:800; text-wrap:balance; }
h3 { font-size:var(--wm-fs-h3); line-height:var(--wm-lh-snug);  color:var(--wm-fg-brand); font-weight:700; }
h4 { font-size:var(--wm-fs-h4); line-height:var(--wm-lh-snug);  color:var(--wm-fg-brand); font-weight:600; }
h1, h2, h3, h4 { font-family:var(--wm-font-sans); }

p { font-size:var(--wm-fs-body); line-height:var(--wm-lh-normal); font-weight:400; text-wrap:pretty; }

img { max-width:100%; }

a {
  color:var(--wm-blue);
  text-decoration:underline;
  text-decoration-color:var(--wm-orange);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
a:hover { color:var(--wm-blue-600); }

::selection { background:var(--wm-orange); color:var(--wm-white); }

:focus-visible {
  outline:3px solid var(--wm-orange);
  outline-offset:3px;
  border-radius:4px;
}

.wm-eyebrow {
  display:block;
  font-size:var(--wm-fs-small);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wm-fg-brand);
}

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--wm-blue); color:#fff; padding:12px 20px;
  border-radius:0 0 12px 0; font-weight:700; text-decoration:none;
}
.skip-link:focus { left:0; color:#fff; }

/* ----------------------------------------------------------------- LAYOUT */

.section { padding:var(--wm-pad-y) var(--wm-pad-x); }
.section--white   { background:#fff; }
.section--muted   { background:var(--wm-gray-50); }
.section--dark    { background:var(--wm-gradient-dark); }
.section--hero-bg { background:var(--wm-gradient-hero); color:#fff; }
.section[id] { scroll-margin-top:var(--wm-header-h); }

.shell { max-width:var(--wm-shell); margin:0 auto; }


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

/* ----------------------------------------------------------------- BUTTON */
/* Design-system Button. The prototype's `accent` variant, rendered as a link
   so the mailto works without JS. */

.wm-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:14px;
  padding:13px 24px;
  border-radius:999px;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), background .18s cubic-bezier(.2,.8,.2,1);
}
.wm-btn:active { transform:scale(.98); }
.wm-btn--accent { background:var(--wm-orange); color:#fff; }
.wm-btn--accent:hover { background:var(--wm-orange-600); color:#fff; }

.wm-btn--outline-light {
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.5);
  padding:11px 22px;
}
.wm-btn--outline-light:hover { background:rgba(255,255,255,.1); color:#fff; }

/* -------------------------------------------------------------- INFOBLOCK */
/* Design-system InfoBlock. */

.wm-infoblock {
  background:var(--wm-gradient-hero);
  color:#fff;
  border-radius:28px;
  padding:20px 26px;
  box-shadow:var(--wm-shadow-info);
}

/* ----------------------------------------------------------------- HEADER */

.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--wm-gray-200);
  padding:12px var(--wm-pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header__home { display:inline-flex; text-decoration:none; border-radius:8px; }
.site-header__logo { height:59px; width:95px; object-fit:contain; display:block; }

.site-header__actions { display:flex; align-items:center; gap:12px; }

/* Menu button — mobile only. */
.site-header__toggle { display:none; }
.site-header__bars { display:grid; gap:4px; }
.site-header__bars span {
  display:block; width:18px; height:2px;
  background:var(--wm-blue); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.site-header.is-open .site-header__bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.site-header.is-open .site-header__bars span:nth-child(2) { opacity:0; }
.site-header.is-open .site-header__bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.visually-hidden {
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.site-nav { display:flex; gap:22px; flex-wrap:wrap; }
.site-nav a {
  color:var(--wm-gray-700);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
}
.site-nav a:hover { color:var(--wm-blue); }

.site-header__cta {
  background:var(--wm-blue);
  color:#fff;
  text-decoration:none;
  padding:10px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
}
.site-header__cta:hover { background:var(--wm-blue-600); color:#fff; }

/* ------------------------------------------------------------------- HERO */

.hero { padding:88px var(--wm-pad-x) 72px; position:relative; overflow:hidden; }
/* Hero backdrop. Opacity lives on the wrapper so the poster and the video
   never composite on top of each other during the crossfade. */
.hero__media {
  position:absolute; inset:0;
  overflow:hidden;
  opacity:.14;
}
.hero__media img,
.hero__media video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero__media video { opacity:0; transition:opacity .6s ease; }
.hero__media.is-playing video { opacity:1; }
.hero__media.is-playing img { opacity:0; transition:opacity .6s ease; }
.hero__inner {
  position:relative;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:56px;
  align-items:center;
}
.hero__eyebrow {
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wm-orange-300); margin-bottom:16px;
}
.hero__title { font-size:52px; font-weight:700; line-height:1.06; color:#fff; margin:0 0 20px; }
.hero__lead { font-size:18px; line-height:1.55; color:rgba(255,255,255,.88); margin:0 0 12px; max-width:560px; }
.hero__lead strong { color:var(--wm-orange-300); }
.hero__sub  { font-size:15px; line-height:1.55; color:rgba(255,255,255,.7);  margin:0 0 32px; max-width:560px; }
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; }

.hero__stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat-card {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:22px;
}
.stat-card__num { font-size:34px; font-weight:900; line-height:1; color:var(--wm-orange); }
.stat-card__label { font-size:13px; margin-top:8px; color:rgba(255,255,255,.8); }

/* ------------------------------------------------------- THESIS STATEMENT */

.thesis {
  padding:88px var(--wm-pad-x);
  background:linear-gradient(135deg, var(--wm-orange-300), var(--wm-orange) 55%, var(--wm-orange-600));
}
.thesis__inner { max-width:980px; margin:0 auto; text-align:center; }
.thesis .wm-eyebrow { font-size:14px; color:var(--wm-blue); }
.thesis h2 {
  margin:16px 0 24px;
  font-family:var(--wm-font-display);
  font-size:80px; font-weight:400; letter-spacing:-.01em; line-height:1.05;
  color:var(--wm-blue-deep); text-transform:uppercase;
}
.thesis p {
  margin:0 auto; max-width:860px;
  font-size:22px; line-height:1.5; font-weight:600;
  color:var(--wm-blue-deep);
}
.thesis strong { color:var(--wm-blue); }

/* ----------------------------------------------------- SECTION HEADINGS */

.section__head { text-align:center; max-width:760px; margin:0 auto 44px; }
.section__head h2 { margin:14px 0 14px; }
.section__head p { color:var(--wm-fg-muted); font-size:17px; line-height:1.6; margin:0; }
.on-dark .section__head h2 { color:#fff; }
.on-dark .section__head p { color:rgba(255,255,255,.8); }

/* ------------------------------------------------ DIVISIÓN · CAROUSEL */

#division { padding:64px var(--wm-pad-x) 72px; }

.carousel { position:relative; }
.carousel__track {
  display:flex; gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:8px;
}
.carousel__track::-webkit-scrollbar { display:none; }

.pillar {
  flex:0 0 350px;
  scroll-snap-align:start;
  min-height:340px;
  border-radius:24px;
  padding:28px;
  display:flex; flex-direction:column;
}
.pillar--blue   { background:linear-gradient(135deg, var(--wm-blue-50),   var(--wm-blue-100));   }
.pillar--orange { background:linear-gradient(135deg, var(--wm-orange-50), var(--wm-orange-100)); }
.pillar--gray   { background:linear-gradient(135deg, var(--wm-gray-50),   var(--wm-gray-100));   }

.pillar__num { font-family:var(--wm-font-display); font-size:44px; font-weight:800; line-height:1; }
.pillar__icon {
  width:44px; height:44px; margin:18px 0 0;
  fill:none; stroke-width:1.5px; stroke-linecap:round; stroke-linejoin:round;
}
.pillar--blue   .pillar__num, .pillar--blue   .pillar__icon { color:var(--wm-blue-400);   stroke:var(--wm-blue-400);   }
.pillar--orange .pillar__num, .pillar--orange .pillar__icon { color:var(--wm-orange-600); stroke:var(--wm-orange-600); }
.pillar--gray   .pillar__num, .pillar--gray   .pillar__icon { color:var(--wm-gray-500);   stroke:var(--wm-gray-500);   }

.pillar h4 {
  margin:24px 0 0; padding-top:16px;
  min-height:40px; display:flex; align-items:flex-end;
  font-size:16px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wm-blue); font-weight:800;
}
.pillar p { margin:10px 0 0; font-size:14px; line-height:1.55; min-height:88px; color:var(--wm-fg-muted); }

.carousel__btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:none; cursor:pointer;
  background:var(--wm-blue); color:#fff;
  display:grid; place-items:center;
  box-shadow:var(--wm-shadow-md);
}
.carousel__btn:hover { background:var(--wm-blue-600); }
/* Mid widths have only ~24-32px of gutter, so the buttons sit just inside the
   track. Wider viewports pull them outward — see the min-width rule below. */
.carousel__btn--prev { left:12px; }
.carousel__btn--next { right:12px; }
.carousel__btn svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2.5px; stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------- PROCESO · TIMELINE */

.timeline { position:relative; }
.timeline__rail {
  position:absolute; left:19px; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent 0%, var(--wm-gray-200) 8%, var(--wm-gray-200) 92%, transparent 100%);
}
.timeline__fill {
  position:absolute; left:0; top:0; width:2px; height:0;
  border-radius:999px; opacity:0;
  background:linear-gradient(to bottom, var(--wm-blue), var(--wm-orange));
}
.timeline__steps { display:flex; flex-direction:column; gap:56px; padding:8px 0; }

.tl-step { display:grid; grid-template-columns:340px 1fr; gap:28px; align-items:start; }
.tl-step__label { position:sticky; top:calc(var(--wm-header-h) + 10px); display:flex; align-items:center; gap:22px; }
.tl-step__dot {
  width:40px; height:40px; border-radius:999px;
  background:var(--wm-gray-50);
  display:grid; place-items:center; flex-shrink:0;
}
.tl-step__dot i {
  width:14px; height:14px; border-radius:999px; display:block;
  background:var(--wm-blue); border:3px solid var(--wm-blue-100);
}
.tl-step--final .tl-step__dot i { background:var(--wm-orange); border-color:var(--wm-orange-100); }
.tl-step__no { font-family:var(--wm-font-display); font-size:44px; line-height:1; color:var(--wm-blue-200); }
.tl-step h3 { margin:6px 0 0; font-size:22px; color:var(--wm-blue-deep); }
.tl-step__card { background:#fff; border-radius:20px; padding:26px; box-shadow:var(--wm-shadow-sm); }
.tl-step__card p { margin:0; font-size:15px; line-height:1.6; color:var(--wm-fg-muted); }

/* ------------------------------------------- DIVISIÓN · EQUIPOS (was a table) */

.teams { margin-top:36px; background:var(--wm-blue-50); border-radius:24px; padding:36px 40px; }
.teams__head {
  display:flex; align-items:baseline; justify-content:center;
  gap:20px; flex-wrap:wrap; margin-bottom:24px;
}
.teams__title {
  margin:0;
  font-family:var(--wm-font-display); font-size:44px; font-weight:400;
  line-height:1.05; text-transform:uppercase; color:var(--wm-blue);
  text-align:center;
}

.teams__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.team {
  background:#fff; border-radius:18px; padding:22px 20px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--wm-shadow-sm);
}
.team__top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--wm-blue); }
.team__top svg {
  width:30px; height:30px;
  fill:none; stroke:currentColor; stroke-width:1.75px; stroke-linecap:round; stroke-linejoin:round;
}
.team__count { font-family:var(--wm-font-display); font-size:38px; line-height:1; color:var(--wm-blue); }
.team--accent .team__top, .team--accent .team__count { color:var(--wm-orange-600); }
.team__name { font-size:14px; font-weight:700; color:var(--wm-blue-deep); line-height:1.25; }
.team__desc { font-size:12px; color:var(--wm-fg-muted); line-height:1.4; }
.teams__note {
  font-size:13px; color:var(--wm-fg-subtle);
  margin:22px 0 0;
  border-top:1px solid rgba(29,66,155,.12); padding-top:16px;
}

/* ----------------------------------------------- PROCESO · SUBSECTIONS */
/* Both of these were collapsed <details> in the previous design. */

.subsection { margin-top:48px; }
.subsection__head { text-align:center; margin-bottom:24px; }
.subsection__head h3 { margin:0; font-size:36px; color:var(--wm-blue); font-weight:800; }
.subsection__head p { margin:6px 0 0; font-size:17px; color:var(--wm-fg-muted); }

/* Service-type cards (was the LUMA rates table) */
.specs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.spec {
  background:#fff; border:1px solid var(--wm-gray-100); border-radius:18px;
  padding:24px 22px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:var(--wm-shadow-sm);
}
.spec__tile {
  width:60px; height:60px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--wm-blue-50); color:var(--wm-blue);
}
.spec__tile svg {
  width:34px; height:34px;
  fill:none; stroke:currentColor; stroke-width:1.6px; stroke-linecap:round; stroke-linejoin:round;
}
.spec__name { font-size:15px; font-weight:800; color:var(--wm-blue-deep); line-height:1.25; }
.spec dl { margin:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.spec__row {
  display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--wm-gray-100); padding-bottom:8px;
}
.spec__row dt { color:var(--wm-fg-subtle); }
.spec__row dd { margin:0; font-weight:700; color:var(--wm-blue-deep); text-align:right; }
.spec__row--total { border-bottom:0; padding-bottom:0; align-items:baseline; }
.spec__row--total dd {
  font-family:var(--wm-font-display); font-size:22px; font-weight:400; color:var(--wm-blue);
}
.spec--accent .spec__tile { background:var(--wm-orange-50); color:var(--wm-orange-600); }
.spec--accent .spec__row--total dd { color:var(--wm-orange-600); }

/* Permit-scenario cards */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tier {
  background:#fff; border:1px solid var(--wm-gray-100); border-radius:18px;
  padding:24px 22px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--wm-shadow-sm);
}
.tier__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tier__tile {
  width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--wm-blue-50); color:var(--wm-blue);
}
.tier__tile svg {
  width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:1.75px; stroke-linecap:round; stroke-linejoin:round;
}
.tier__size { font-family:var(--wm-font-display); font-size:30px; line-height:1; color:var(--wm-blue); }
.tier--accent .tier__tile { background:var(--wm-orange-50); color:var(--wm-orange-600); }
.tier--accent .tier__size { color:var(--wm-orange-600); }
.tier__name { font-size:16px; font-weight:800; color:var(--wm-blue-deep); }
.tier__kicker {
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wm-orange-600); margin-top:4px;
}
.tier__bar { height:8px; border-radius:999px; background:rgba(29,66,155,.08); overflow:hidden; }
.tier__bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--wm-blue), var(--wm-orange)); }
.tier p { margin:0; font-size:13px; line-height:1.5; color:var(--wm-fg-muted); }
.tiers__note {
  font-size:13px; color:var(--wm-fg-subtle);
  margin:18px auto 0; text-align:center; max-width:860px;
}

/* -------------------------------------------------------- SOLUCIONES */

.solution-note {
  background:var(--wm-gradient-hero);
  border-radius:24px;
  padding:36px 40px;
  margin-bottom:36px;
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  box-shadow:var(--wm-shadow-md);
}
.solution-note__icon {
  width:72px; height:72px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center; flex-shrink:0;
}
.solution-note__icon svg {
  width:38px; height:38px;
  fill:none; stroke:var(--wm-orange); stroke-width:1.75px; stroke-linecap:round; stroke-linejoin:round;
}
.solution-note p { margin:0; font-size:18px; line-height:1.6; color:#fff; }
.solution-note strong { color:var(--wm-orange-300); }

.solutions { gap:22px; margin-bottom:22px; }
.solution { border:1px solid var(--wm-gray-200); border-radius:20px; overflow:hidden; }
.solution img { width:100%; height:150px; object-fit:cover; display:block; }
.solution__body { padding:20px 22px; }
.solution h4 { margin:0 0 8px; font-weight:800; }
.solution p  { margin:0; font-size:14px; color:var(--wm-fg-muted); }

.chips { gap:16px; margin-top:22px; }
.chip {
  display:flex; align-items:center; gap:12px;
  background:var(--wm-gray-50);
  border-radius:14px;
  padding:14px 16px;
  font-size:13px; font-weight:600;
}
.icon-blue { width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--wm-blue); stroke-width:1.75px; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------------------------------------------------- EJEMPLOS */

.eyebrow-accent {
  display:block;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wm-orange-300);
}

.profiles { gap:18px; }
.profile {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:24px;
  display:flex; flex-direction:column; gap:6px;
}
.profile__type {
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wm-orange-300);
}
.profile__meta    { font-size:12px; color:rgba(255,255,255,.55); margin-bottom:10px; }
.profile__size    { font-size:30px; font-weight:900; color:#fff; line-height:1; }
.profile__modules { font-size:12px; color:rgba(255,255,255,.6); margin-bottom:14px; }
.profile__rows {
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:14px;
  display:flex; flex-direction:column; gap:6px;
  margin:0;
}
.profile__row { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.profile__row dt { color:rgba(255,255,255,.6); }
.profile__row dd { margin:0; color:#fff; font-weight:600; }
.profile__row dd.is-was { text-decoration:line-through; text-decoration-color:var(--wm-orange); }
.profile__row dd.is-now { color:var(--wm-orange); font-weight:900; font-size:18px; }
.profile__row dd.is-cover { font-weight:700; }
.profile__row dd.is-save { color:#7CD992; font-weight:900; font-size:16px; }

.examples-note {
  max-width:820px; margin:36px auto 0; text-align:center;
  border-top:1px solid rgba(255,255,255,.18); padding-top:28px;
}
.examples-note__body { font-size:15px; line-height:1.7; color:rgba(255,255,255,.85); margin:0; }
.examples-note__kicker { font-size:16px; font-weight:700; color:#fff; margin:16px 0 0; }
.examples-note__kicker span { color:var(--wm-orange-300); }

/* ----------------------------------------------------- FINANCIAMIENTO */

.loans { gap:22px; }
.loan { border-radius:20px; padding:28px; }
.loan--blue   { border:2px solid var(--wm-blue); }
.loan--orange { border:2px solid var(--wm-orange); }
.loan__kicker {
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wm-fg-subtle);
}
.loan h3 { margin:8px 0 16px; }
.loan dl { margin:0; display:flex; flex-direction:column; gap:10px; }
.loan__row {
  display:flex; justify-content:space-between; gap:16px;
  font-size:15px;
  border-bottom:1px solid var(--wm-gray-100);
  padding-bottom:10px;
}
.loan__row:last-child { border-bottom:0; padding-bottom:0; }
.loan__row dt { color:var(--wm-fg-muted); }
.loan__row dd { margin:0; font-weight:700; }

/* Formerly <details>; the updated design shows these expanded. */
.panel-block { border-radius:20px; }
.panel-block--muted { background:var(--wm-gray-50); }
.panel-block--white { background:#fff; box-shadow:var(--wm-shadow-sm); }
.panel-block__title { padding:20px 26px 4px; font-weight:700; color:var(--wm-blue); font-size:15px; }
.panel-block__body { padding:0 26px 26px; }

.coop { background:#fff; border-radius:14px; padding:18px; }
.coop__name { font-weight:800; color:var(--wm-blue); }
.coop p { margin:8px 0 0; font-size:13px; color:var(--wm-fg-muted); }

/* --------------------------------------------------------- SERVICIO */

.service-split { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; }

.panel { background:#fff; border-radius:20px; padding:28px; box-shadow:var(--wm-shadow-sm); }
.panel--tight { padding:22px; }
.panel h4 { margin:0 0 16px; }

.checklist { margin:0; padding:0; list-style:none; }
.check {
  display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start;
  margin-bottom:10px; font-size:15px; color:var(--wm-fg);
}
.check:last-child { margin-bottom:0; }
.check__mark {
  width:22px; height:22px;
  border:2px solid var(--wm-blue); border-radius:999px;
  display:grid; place-items:center; margin-top:2px;
}
.check__mark svg { width:13px; height:13px; fill:none; stroke:var(--wm-blue); stroke-width:2.5px; stroke-linecap:round; stroke-linejoin:round; }

.service-aside { display:flex; flex-direction:column; gap:16px; }

.wm-infoblock {
  background:var(--wm-gradient-hero);
  color:#fff;
  border-radius:28px;
  padding:20px 26px;
  box-shadow:var(--wm-shadow-info);
}
.codigo-rojo { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.codigo-rojo__label {
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wm-orange-300);
}
.codigo-rojo p { margin:0; font-size:15px; line-height:1.5; color:var(--wm-blue-50); }
.codigo-rojo__phone { font-size:14px; margin-top:6px; }
.codigo-rojo__phone strong { font-size:17px; }
.codigo-rojo__phone a { color:#fff; text-decoration:none; }
.codigo-rojo__phone a:hover { text-decoration:underline; text-decoration-color:var(--wm-orange); }

.sla { margin:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.sla__row {
  display:flex; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--wm-gray-100); padding-bottom:8px;
}
.sla__row:last-child { border-bottom:0; padding-bottom:0; }
.sla__row dt { flex:1; }
.sla__row dd { margin:0; font-weight:700; color:var(--wm-blue); white-space:nowrap; }

.warranty { border:1px solid var(--wm-gray-200); border-radius:14px; padding:20px; }
.warranty__name  { font-weight:800; color:var(--wm-blue); font-size:16px; }
.warranty__terms { font-size:12px; font-weight:700; color:var(--wm-orange-600); margin:4px 0 10px; }
.warranty p { margin:0; font-size:13px; color:var(--wm-fg-muted); }

/* ------------------------------------------------------- PORTAFOLIO */

.kpis { gap:18px; margin-bottom:44px; }
.kpi { background:var(--wm-blue-50); border-radius:16px; padding:18px 20px; }
.kpi__num   { font-size:28px; font-weight:900; color:var(--wm-blue); line-height:1; }
.kpi__label { font-size:12px; color:var(--wm-fg-muted); margin-top:6px; }

.feature { display:grid; grid-template-columns:1.4fr 1fr; gap:22px; margin-bottom:44px; align-items:stretch; }
.feature__media { position:relative; border-radius:24px; overflow:hidden; min-height:340px; }
.feature__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature__scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,15,27,0) 35%, rgba(10,15,27,.85) 100%); }
.feature__caption { position:absolute; left:26px; right:26px; bottom:22px; color:#fff; }
.feature__kicker {
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wm-orange-300);
}
.feature__name { font-size:24px; font-weight:900; margin-top:4px; }
.feature__meta { font-size:14px; opacity:.85; margin-top:4px; }
.feature__aside {
  display:flex; flex-direction:column; gap:14px; justify-content:center;
  background:var(--wm-gray-50); border-radius:24px; padding:28px;
}
.feature__aside h4 { margin:0; font-weight:800; }
.feature__aside p  { margin:0; font-size:14px; color:var(--wm-fg-muted); }

/* Sector legend */
.sectors { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.sectors__label {
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--wm-fg-subtle); margin-right:4px;
}
.sector {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; border-radius:999px; padding:6px 14px;
}
.sector--blue   { color:var(--wm-blue);       background:var(--wm-blue-50);   }
.sector--orange { color:var(--wm-orange-600); background:var(--wm-orange-50); }
.sector--gray   { color:var(--wm-gray-700);   background:var(--wm-gray-100);  }

/* Fanned card gallery */
.fan-wrap {
  position:relative;
  overflow-x:clip;
  margin:0 calc(var(--wm-pad-x) * -1);
  padding:0 var(--wm-pad-x);
}
/* Baseline is a plain grid of every card, so the gallery still works with no
   JS, with GSAP blocked, and on paper. JS adds .is-fanned to switch to the
   animated arc. */
.fan { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.fan-card {
  position:relative;
  width:auto; height:230px;
  border-radius:20px; overflow:hidden;
  opacity:1;
  box-shadow:0 18px 44px rgba(10,15,27,.28);
  will-change:transform;
  cursor:pointer;
  background:var(--wm-gray-100);
  border:0; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left;
  display:block;
}
.fan-nav { display:none; }

.fan-wrap.is-fanned .fan {
  display:flex; position:relative;
  height:520px;
  justify-content:center; align-items:center;
  touch-action:pan-y; cursor:grab; user-select:none;
}
.fan-wrap.is-fanned .fan:active { cursor:grabbing; }
.fan-wrap.is-fanned .fan-card {
  position:absolute;
  width:300px; height:400px;
  opacity:0;
}
.fan-wrap.is-fanned .fan-nav { display:flex; }
.fan-card__img { position:absolute; inset:0; background-size:cover; background-position:center; }
.fan-card__tag {
  position:absolute; top:14px; left:14px;
  font-size:11px; font-weight:700;
  color:var(--wm-blue-deep); background:rgba(255,255,255,.92);
  border-radius:999px; padding:5px 12px;
}
.fan-card__cap {
  position:absolute; inset:auto 0 0 0;
  padding:44px 18px 16px;
  background:linear-gradient(180deg, rgba(10,15,27,0), rgba(10,15,27,.88));
  color:#fff;
}
.fan-card__title { font-size:15px; font-weight:800; }
.fan-card__meta  { font-size:12px; opacity:.85; margin-top:2px; }

.fan-nav { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:10px; }
.fan-nav__btn {
  width:46px; height:46px; border-radius:999px;
  border:1.5px solid var(--wm-gray-200); background:#fff; color:var(--wm-blue);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:var(--wm-shadow-sm);
}
.fan-nav__btn:hover { background:var(--wm-blue-50); }
.fan-nav__btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.5px; stroke-linecap:round; stroke-linejoin:round; }
.fan-dots { display:flex; align-items:center; gap:8px; }
.fan-dot {
  width:8px; height:8px; border-radius:999px;
  background:rgba(29,66,155,.18);
  transition:background .3s, transform .3s;
}
.fan-dot.is-active { background:var(--wm-orange); transform:scale(1.3); }

/* Card detail lightbox */
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so the
   attribute must be honoured explicitly or the dialog renders over the page. */
.lightbox[hidden] { display:none !important; }
.lightbox {
  position:fixed; inset:0; z-index:100;
  background:rgba(10,15,27,.74);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.lightbox__dialog {
  position:relative; background:#fff;
  border-radius:24px; overflow:hidden;
  display:grid; grid-template-columns:1.15fr 1fr;
  width:min(960px, 100%); max-height:82vh;
  box-shadow:0 32px 80px rgba(10,15,27,.5);
}
.lightbox__img { width:100%; height:100%; min-height:400px; background-size:cover; background-position:center; }
.lightbox__body { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; gap:16px; overflow-y:auto; }
.lightbox__tag {
  align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--wm-blue); background:var(--wm-blue-50);
  border-radius:999px; padding:6px 14px;
}
.lightbox__body h3 { margin:0; font-size:26px; line-height:1.2; color:var(--wm-blue-deep); }
.lightbox__rows { margin:0; display:flex; flex-direction:column; }
.lightbox__row {
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--wm-gray-100);
}
.lightbox__row:last-child { border-bottom:0; }
.lightbox__row dt { font-size:13px; color:var(--wm-fg-subtle); }
.lightbox__row dd { margin:0; font-size:14px; font-weight:700; color:var(--wm-blue-deep); text-align:right; }
.lightbox__cta {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wm-blue); color:#fff; text-decoration:none;
  padding:12px 24px; border-radius:999px; font-weight:700; font-size:14px;
  margin-top:6px;
}
.lightbox__cta:hover { background:var(--wm-blue-600); color:#fff; }
.lightbox__close {
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(10,15,27,.55); color:#fff;
  display:grid; place-items:center;
}
.lightbox__close svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.5px; stroke-linecap:round; }

.certs { margin-top:44px; background:var(--wm-gray-50); border-radius:20px; padding:26px; gap:18px; }
.cert { display:flex; align-items:start; gap:12px; font-size:13px; }
.cert svg { width:22px; height:22px; flex-shrink:0; fill:none; stroke:var(--wm-blue); stroke-width:1.75px; stroke-linecap:round; stroke-linejoin:round; }

/* --------------------------------------------------------------- CONTACTO */

.contact { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.contact h2 { margin:12px 0 24px; color:#fff; }

.next-steps { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; counter-reset:step; }
.next-steps li {
  display:grid; grid-template-columns:32px 1fr; gap:14px; align-items:start;
  font-size:15px; line-height:1.5; color:rgba(255,255,255,.9);
}
.next-steps li::before {
  counter-increment:step;
  content:counter(step);
  width:28px; height:28px;
  border-radius:999px;
  background:var(--wm-orange);
  color:#fff;
  display:grid; place-items:center;
  font-weight:900; font-size:14px;
}
.next-steps a { color:var(--wm-orange-300); text-decoration:none; }
.next-steps a:hover { text-decoration:underline; }

.contact-card {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  padding:32px;
  display:flex; flex-direction:column; gap:20px;
}
.contact-card h3 { margin:0; color:#fff; }
.contact-card__label {
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--wm-orange-300);
}
.contact-card__name { font-size:17px; font-weight:800; margin-top:6px; }
.contact-card__role { font-size:13px; color:rgba(255,255,255,.75); }
.contact-card__line { font-size:14px; margin-top:6px; }
.contact-card__line a { color:#fff; text-decoration:none; }
.contact-card__line a:hover { text-decoration:underline; text-decoration-color:var(--wm-orange); }
.contact-card__block { border-top:1px solid rgba(255,255,255,.14); padding-top:18px; }
.contact-card__phone { font-size:20px; font-weight:900; margin-top:6px; }
.contact-card__phone a { color:#fff; text-decoration:none; }
.contact-card__phone a:hover { text-decoration:underline; text-decoration-color:var(--wm-orange); }

/* ----------------------------------------------------------------- FOOTER */

.site-footer { background:var(--wm-gradient-dark); color:#fff; padding:44px var(--wm-pad-x) 28px; }
.site-footer__top {
  max-width:var(--wm-shell); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.site-footer__logo { height:99px; width:184px; object-fit:contain; }
.site-footer__meta { font-size:13px; color:rgba(255,255,255,.75); text-align:right; line-height:1.6; }
.site-footer__meta a { color:var(--wm-orange-300); text-decoration:none; }
.site-footer__meta a:hover { text-decoration:underline; }
.site-footer__tagline {
  max-width:var(--wm-shell); margin:24px auto 0;
  text-align:center; font-style:italic; font-size:14px; color:rgba(255,255,255,.7);
}

/* ------------------------------------------------------------ RESPONSIVE */

/* Nudge the carousel arrows out past the track so they stop covering the cards
   scrolling underneath. Gated at 1100px: below that the gutter beside the
   1140px shell is only ~24-32px, and a negative offset would push the buttons
   off-screen and create horizontal overflow. */
@media (min-width:1100px) {
  .carousel__btn--prev { left:-26px; }
  .carousel__btn--next { right:-26px; }
}

/* Under 1100px there is no gutter to move the arrows into — the shell fills the
   viewport minus 24-32px of padding. Rather than overlay the cards, drop the
   pair into a centred row beneath the track, matching the fan gallery's nav.
   The track keeps its native swipe/scroll-snap, so this is additive on touch.
   Buttons are siblings of the track, so flex-wrap does it without new markup. */
@media (max-width:1099px) {
  .carousel { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
  .carousel__track { flex:1 0 100%; }
  .carousel__btn {
    position:static;
    transform:none;
    width:44px; height:44px;          /* full 44px touch target */
  }
  .carousel__btn:active { transform:scale(.96); }
}

@media (max-width:1080px) {
  :root { --wm-pad-y:56px; --wm-pad-x:24px; --wm-fs-h2:30px; }

  .hero { padding:64px var(--wm-pad-x) 56px; }
  .hero__inner { grid-template-columns:1fr; gap:40px; }
  .hero__title { font-size:44px; }
  .hero__lead, .hero__sub { max-width:none; }

  .thesis { padding:64px var(--wm-pad-x); }
  .thesis h2 { font-size:60px; }
  .thesis p { font-size:19px; }

  #division { padding:56px var(--wm-pad-x); }

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

  .teams { padding:28px 24px; }
  .teams__grid { grid-template-columns:repeat(3,1fr); }
  .teams__title { font-size:34px; }
  .specs { grid-template-columns:repeat(3,1fr); }
  .subsection__head h3 { font-size:28px; }

  .feature { grid-template-columns:1fr; }
  .feature__media { min-height:280px; }
  .fan { grid-template-columns:repeat(3,1fr); }
  .service-split { grid-template-columns:1fr; }
  .contact { grid-template-columns:1fr; gap:40px; }

  .solution-note { padding:28px; gap:20px; }
  .solution-note p { font-size:16px; }

  /* Timeline: stack the sticky label above its card, clearing the rail. */
  .tl-step { grid-template-columns:1fr; gap:14px; }
  .tl-step__label { position:static; }
  .tl-step__card { margin-left:62px; }
  .timeline__steps { gap:40px; }

  .lightbox__dialog { grid-template-columns:1fr; max-height:88vh; }
  .lightbox__img { min-height:240px; }
  .lightbox__body { padding:28px 26px; }
}

@media (max-width:900px) {
  /* Single-row header: logo, then the CTA and the menu button together. */
  .site-header { gap:12px; padding:10px var(--wm-pad-x); }
  .site-header__logo { height:52px; width:84px; }
  .site-header__cta { padding:9px 16px; }

  .site-header__toggle {
    display:grid; place-items:center;
    width:44px; height:44px; flex-shrink:0;
    border:1px solid var(--wm-gray-200); border-radius:12px;
    background:#fff; cursor:pointer;
  }
  .site-header__toggle:hover { background:var(--wm-gray-50); }

  /* Links drop out of the bar into a panel under it. */
  .site-nav {
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    padding:6px 0;
    background:#fff;
    border-bottom:1px solid var(--wm-gray-200);
    box-shadow:var(--wm-shadow-md);
  }
  .site-header.is-open .site-nav { display:flex; }
  .site-nav a { padding:13px var(--wm-pad-x); font-size:15px; }
  .site-nav a:hover { background:var(--wm-gray-50); color:var(--wm-blue); }

  :root { --wm-header-h:84px; }
}

@media (max-width:720px) {
  :root { --wm-pad-y:48px; --wm-fs-h2:26px; --wm-fs-h3:22px; --wm-fs-h4:19px; }

  .hero { padding:48px var(--wm-pad-x); }
  .hero__title { font-size:34px; }
  .hero__lead { font-size:17px; }
  .hero__actions .wm-btn { flex:1 1 100%; justify-content:center; }

  .thesis { padding:48px var(--wm-pad-x); }
  .thesis h2 { font-size:42px; }
  .thesis p { font-size:17px; }
  .thesis .wm-eyebrow { font-size:13px; }

  .section__head { margin-bottom:32px; }
  .section__head p { font-size:16px; }

  .grid--3, .grid--4 { grid-template-columns:1fr; }
  .teams__grid { grid-template-columns:repeat(2,1fr); }
  .teams { padding:24px 20px; }
  .teams__title { font-size:28px; }
  .specs { grid-template-columns:1fr; }
  .tiers { grid-template-columns:1fr; }
  .subsection { margin-top:36px; }
  .subsection__head h3 { font-size:24px; }
  .subsection__head p { font-size:15px; }
  .hero__stats { grid-template-columns:1fr 1fr; }
  .grid--2 { grid-template-columns:1fr; }

  .pillar { flex:0 0 280px; height:auto; min-height:320px; padding:24px; }
  .pillar p { height:auto; min-height:88px; }

  .solution-note { grid-template-columns:1fr; text-align:left; }

  .panel-block__title { padding:18px 18px 4px; }
  .panel-block__body { padding:0 18px 18px; }

  .panel { padding:22px; }
  .loan { padding:22px; }
  .contact-card { padding:24px; }
  .certs { padding:20px; }
  .feature__aside { padding:22px; }
  .feature__caption { left:18px; right:18px; bottom:18px; }
  .feature__name { font-size:20px; }

  /* Fan: smaller cards so the arc still reads on a phone. */
  .fan { grid-template-columns:repeat(2,1fr); }
  .fan-wrap.is-fanned .fan { height:400px; }
  .fan-wrap.is-fanned .fan-card { width:220px; height:295px; }
  .fan-card__cap { padding:34px 14px 12px; }
  .fan-card__title { font-size:13px; }
  .fan-card__meta { font-size:11px; }

  .lightbox { padding:16px; }

  .site-footer__top { justify-content:center; }
  .site-footer__meta { text-align:center; }
}

@media (max-width:420px) {
  .hero__stats { grid-template-columns:1fr; }
  .profile__row { flex-direction:column; gap:2px; }
  .profile__row dd { font-weight:700; }
  .tl-step__card { margin-left:0; }
  .timeline__rail { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .hero__media video { display:none; }
  .hero__media img { opacity:1; }
}

/* --------------------------------------------------------------- PRINTING */

@media print {
  :root { --wm-pad-y:24px; --wm-pad-x:0px; }

  html, body { background:#fff; }
  *, *::before, *::after { -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .site-header { position:static; }
  .site-nav, .site-header__cta, .site-header__toggle, .skip-link, .hero__actions { display:none; }
  .hero__media video { display:none; }
  .hero__media img { opacity:1; }

  /* Interactive-only chrome has no meaning on paper. */
  .carousel__btn, .fan-nav, .lightbox { display:none !important; }
  .timeline__fill { height:100% !important; opacity:1 !important; }

  /* The carousel and the fan only show part of their content on screen;
     print every card instead, laid out as a plain grid. */
  .carousel__track { display:grid !important; grid-template-columns:repeat(2,1fr); gap:16px; overflow:visible !important; }
  .pillar { height:auto !important; }
  .fan-wrap { margin:0; padding:0; }
  .fan-wrap.is-fanned .fan { display:grid !important; grid-template-columns:repeat(3,1fr); gap:14px; height:auto !important; }
  .fan-wrap.is-fanned .fan-card {
    position:static !important; opacity:1 !important;
    width:auto !important; height:220px !important;
    transform:none !important; box-shadow:none !important;
    border:1px solid #E4E5E9;
  }

  .section, .hero { break-inside:auto; }
  .pillar, .profile, .loan, .warranty, .coop, .kpi, .panel, .tier,
  .feature, .contact-card, .wm-infoblock, .tl-step, .fan-card,
  .team, .spec, .tier { break-inside:avoid; }
  h2, h3, h4 { break-after:avoid; }
  .site-footer { break-before:avoid; }
}