/* =========================================================================
   PERIFERIA IT GROUP — Design System CSS
   Identidad visual confirmada (colores, tipografía, botones) aplicada a una
   arquitectura de información nueva: Necesidad → Propuesta de valor →
   Evidencia → Profundización → CTA.
   ========================================================================= */

:root{
  /* === COLOR TOKENS (confirmados) === */
  --color-black: #000000;
  --color-black-soft: #2b2b2b;
  --color-green-dark: #15601D;
  --color-blue-green: #063635;
  --color-green-bright: #6DFD8C;
  --color-mint-bg: #BFE8C0;
  --color-mint-bg-deep: #CCFFD6;
  --color-white: #FFFFFF;
  --color-text-body: #000000;
  --color-text-muted: #000000;
  --color-border: #E5E7EB;

  /* tintas derivadas (uso funcional, no rompen la paleta confirmada) */
  --color-green-bright-10: rgba(109,253,140,.10);
  --color-green-bright-18: rgba(109,253,140,.18);
  --color-green-dark-08: rgba(21,96,29,.08);
  --color-black-06: rgba(33,33,33,.06);
  --color-on-dark-muted: rgba(255,255,255,.68);
  --color-on-dark-border: rgba(255,255,255,.14);

  /* === TYPOGRAPHY === */
  --font-base: "Montserrat", -apple-system, sans-serif;
  --font-body: "Montserrat", -apple-system, sans-serif;
  --font-display: "Outfit", -apple-system, sans-serif;
  --fs-h1: clamp(2.4rem, 4.4vw, 4rem);
  --fs-h2: clamp(1.7rem, 2.8vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.05rem;
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* === SPACING (base 8px) === */
  --space-1: 4px; --space-2: 8px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px;
  --space-7: 64px; --space-8: 96px; --space-9: 128px;

  /* === RADIUS === */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* === SHADOW === */
  --shadow-card: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-card-lg: 0 20px 48px rgba(0,0,0,0.14);
  --shadow-focus: 0 0 0 3px rgba(109,253,140,.55);

  /* === LAYOUT === */
  --container-max: 1272px;
  --container-pad: clamp(20px, 5vw, 48px);
  --header-h: 84px;

  /* === MOTION === */
  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t-base: .32s;
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-base);
  color: var(--color-text-body);
  background: var(--color-white);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; }
ul, ol{ margin:0; padding:0; list-style:none; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor:pointer; background:none; border:none; }
h1,h2,h3,h4,p{ margin:0; }

section[id], div[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background: var(--color-green-bright); color: var(--color-black);
  padding:10px 18px; border-radius: var(--radius-pill); font-weight:var(--fw-bold);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline: 3px solid var(--color-green-bright); outline-offset: 2px; }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible{ box-shadow: var(--shadow-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================================
   LAYOUT UTILITIES
   ========================================================================= */
.wrap{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--container-pad); }
.section{ padding: var(--space-8) 0; }
.section-sm{ padding: var(--space-6) 0; }
.section-mint{ background: var(--color-mint-bg-deep); }
.section-white{ background: var(--color-white); }
.section-dark{ background: var(--color-black); color: var(--color-white); position:relative; overflow:hidden; }
.section-dark .dotfield{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(109,253,140,.18) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, black 40%, transparent 85%);
}

/* --- Flow field: animated network background, signature motif for "tecnología que mueve negocio" --- */
.flow-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.flow-field svg{ width:100%; height:100%; display:block; }
.flow-field .flow-line{ fill:none; stroke:var(--color-on-dark-border); stroke-width:1.4; }
.flow-field .flow-pulse{ fill:none; stroke:var(--color-green-bright); stroke-width:2.2; stroke-linecap:round; opacity:.8; }
.flow-field .node{ fill:var(--color-green-bright); opacity:.5; }
.flow-field .p1{ stroke-dasharray:10 340; animation:flow-run 4.6s linear infinite; }
.flow-field .p2{ stroke-dasharray:8 300; animation:flow-run 5.3s linear infinite; animation-delay:.6s; }
.flow-field .p3{ stroke-dasharray:9 320; animation:flow-run 6.1s linear infinite; animation-delay:1.4s; }
.flow-field .p4{ stroke-dasharray:7 280; animation:flow-run 4.9s linear infinite; animation-delay:.3s; }
.flow-field .p5{ stroke-dasharray:11 360; animation:flow-run 5.7s linear infinite; animation-delay:1.9s; }
@keyframes flow-run{ to{ stroke-dashoffset:-1700; } }

/* --- Circles illustration: overlapping-circles motif described in the confirmed design system --- */
.circles-illustration{ width:100%; max-width:320px; margin-inline:auto; display:block; }

/* --- Principle band: "Tecnología que mueve negocio" statement ---- */
.principle-band{ padding: var(--space-7) 0; background: var(--color-green-bright-18); overflow:hidden; }
.principle-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6); align-items:center; }
.principle-grid h2{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:var(--fw-extrabold); color:var(--color-green-dark); line-height:1.18; margin-bottom:var(--space-3); }
.principle-grid p{ font-size:1.05rem; color:var(--color-text-body); max-width:520px; line-height:1.6; }

/* --- Footprint strip: de-emphasized scale/tenure facts, subordinate to impact metrics --- */
.footprint-strip{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; padding-top:var(--space-4); margin-top:var(--space-2); border-top:1px dashed var(--color-border); }
.footprint-strip span{ font-size:.82rem; color:var(--color-text-muted); }
.footprint-strip strong{ color:var(--color-black); font-weight:var(--fw-bold); }
.footprint-strip.on-dark{ border-top-color:var(--color-on-dark-border); }
.footprint-strip.on-dark span{ color:var(--color-on-dark-muted); }
.footprint-strip.on-dark strong{ color:#fff; }

/* --- Callout: reusable trust/context note (differentiator, risk-mitigation, peer reference) --- */
.callout{ background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-green-dark); border-radius:var(--radius-md); padding: var(--space-4) var(--space-5); }
.callout.on-dark{ background:rgba(255,255,255,.05); border-color:var(--color-on-dark-border); border-left-color:var(--color-green-bright); }
.callout p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--color-text-body); }
.callout.on-dark p{ color:var(--color-white); }
.callout strong{ color:var(--color-green-dark); }
.callout.on-dark strong{ color:var(--color-green-bright); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--color-green-dark); margin-bottom: var(--space-3);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--color-green-bright); box-shadow: 0 0 0 3px var(--color-green-bright-18); flex:none; }
.eyebrow.on-dark{ color: var(--color-green-bright); }

.section-head{ max-width: 760px; margin-bottom: var(--space-6); }
.section-head h2{ font-size: var(--fs-h2); font-weight: var(--fw-extrabold); line-height:1.15; margin:0 0 var(--space-3); font-family: var(--font-display); }
.section-head p{ color: var(--color-text-muted); font-size: 1.05rem; margin:0; }
.section-head.on-dark h2{ color:#fff; }
.section-head.on-dark p{ color: var(--color-on-dark-muted); }
.section-head em{ color: var(--color-green-dark); font-style:normal; }
.section-head.on-dark em{ color: var(--color-green-bright); }
.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: var(--space-7) 0 var(--space-4);
}

.section-head-row h3 {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.section-head-row .callout {
  margin: 0;
  max-width: 760px;
  flex: 1;
}

.section-head-row .callout p {
  margin: 0;
}
@media (max-width: 768px) {
  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-head-row .callout {
    width: 100%;
    max-width: none;
  }
}
/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
h1{ font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height:1.08; letter-spacing:-.01em; }
h2{ font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-extrabold); line-height:1.15; }
h3{ font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.lead{ font-size: var(--fs-lead); color: var(--color-text-muted); line-height:1.55; }
.on-dark .lead, .section-dark .lead{ color: var(--color-white); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  font-weight: var(--fw-bold); font-size: var(--fs-small);
  text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--color-green-bright); color: var(--color-black); }
.btn-primary:hover{ opacity:.92; }
.btn-dark{ background: var(--color-black); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:transparent; color: var(--color-black); border:2px solid var(--color-black); padding:13px 28px; }
.btn-outline:hover{ background: var(--color-black); color:#fff; }
.btn-outline-light{ background:transparent; color:#fff;border-radius: var(--radius-pill); ;border:2px solid var(--color-on-dark-border); padding:13px 28px; }
.btn-outline-light:hover{ border-color: var(--color-green-bright); color: var(--color-green-bright); }
.btn-sm{ padding:10px 20px; font-size: var(--fs-micro); }
.btn-block{ width:100%; }

.btn-link{ background:transparent; color: var(--color-green-dark); padding:0; gap:12px; font-weight:var(--fw-bold); font-size: var(--fs-small); text-decoration:none; display:inline-flex; align-items:center; }
.on-dark .btn-link, .section-dark .btn-link{ color: var(--color-green-bright); }
.btn-link .circle-arrow{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:2px solid currentColor; display:flex; align-items:center; justify-content:center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  font-size:15px;
}
.btn-link:hover .circle-arrow{ background:var(--color-blue-green); color: var(--color-green-bright); transform: translateX(3px); }
.on-dark .btn-link:hover .circle-arrow, .section-dark .btn-link:hover .circle-arrow{ color: var(--color-green-bright); }

.icon-btn{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid var(--color-on-dark-border); transition: border-color var(--t-fast); }
.icon-btn:hover{ border-color: var(--color-green-bright); color: var(--color-green-bright); }

.icon{ width:2em; height:2em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{
  position: sticky; top:0; z-index:100;
  background: var(--color-black);
  display:flex; align-items:center; justify-content:space-between;
  height: var(--header-h);
  padding: 0 var(--container-pad);
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.brand-mark{ width:38px; height:38px; border-radius:50%; background: var(--color-green-bright); color:var(--color-black); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:var(--fw-extrabold); font-size:1.1rem; flex:none; }
.brand-name{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name strong{ font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size:1.05rem; letter-spacing:.01em; }
.brand-name small{ font-size:.62rem; letter-spacing:.16em; color: var(--color-green-bright); font-weight:var(--fw-bold); }

.main-nav{ display:flex; align-items:center; gap: var(--space-5); }
.main-nav > li{ position:relative; }
.main-nav a, .nav-btn{ color:#fff; text-decoration:none; font-weight:var(--fw-medium); font-size: var(--fs-small); display:flex; align-items:center; gap:6px; padding: 10px 2px; background:none; border:none; }
.main-nav a:hover, .nav-btn:hover, .main-nav a.is-active{ color: var(--color-green-bright); }
.nav-btn .caret{ display:inline-block; width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition: transform var(--t-fast); }
.has-dropdown:hover .caret, .has-dropdown.is-open .caret{ transform:rotate(-135deg); margin-top:3px; }

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:300px;
  padding:var(--space-2);
  border-radius:var(--radius-md);
  background:#fff;
  box-shadow:var(--shadow-card-lg);

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

  transform:translateY(0);
  transition:
    opacity var(--t-fast) var(--ease),
    visibility var(--t-fast) var(--ease);
}

.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.dropdown a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  text-decoration:none;
}

.dropdown a:hover{
  background:var(--color-mint-bg);
}

.dropdown strong{
  color:#000;
  font-size:.9rem;
  font-weight:var(--fw-bold);
}

.dropdown span{
  color:var(--color-text-muted);
  font-size:.76rem;
}

.header-actions{ display:flex; align-items:center; gap: var(--space-4); }
.menu-toggle{ display:none; width:38px; height:32px; flex-direction:column; justify-content:space-between; padding:4px 0; }
.menu-toggle span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition: transform var(--t-fast), opacity var(--t-fast); }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.breadcrumb{ padding: 1%; font-size: var(--fs-small); color: var(--color-text-muted); }
.breadcrumb .wrap{ display:flex; gap:8px; align-items:center; }
.breadcrumb a{ text-decoration:none; color: var(--color-text-muted); }
.breadcrumb a:hover{ color: var(--color-green-dark); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color: var(--color-green-dark); font-weight:var(--fw-medium); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ background: var(--color-black); color:#fff; position:relative; overflow:hidden; padding: var(--space-8) 0 var(--space-7); }
.hero-photo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 30%;
    filter: saturate(85%);
    transform: scale(1.06);
}
.hero-photo-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(33,33,33,.55) 0%, var(--color-black) 78%), radial-gradient(circle at 30% 35%, rgba(21,96,29,.35), transparent 55%); }
.hero .flow-field{ z-index:1; }
.hero .wrap.hero-grid{ z-index:2; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items:start; position:relative; z-index:1; }
.hero h1{ color:#fff; margin: 0 0 var(--space-4); }
.hero h1 .accent{ color: var(--color-green-bright); }
.hero .lead{ max-width:520px; margin-bottom: var(--space-5); }
.hero-cta{ display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; margin-bottom: var(--space-6); }

.hero-proof{ display:flex; flex-wrap:wrap; gap: var(--space-6); padding-top: var(--space-5); border-top:1px solid var(--color-on-dark-border); max-width:600px; }
.proof-item strong{ display:block; font-family:var(--font-display); font-size:1.7rem; font-weight:var(--fw-extrabold); color: var(--color-green-bright); line-height:1; margin-bottom:6px; }
.proof-item span{ font-size:.8rem; color: var(--color-on-dark-muted); max-width:180px; display:block; line-height:1.3; }

/* --- Need selector (signature interactive element) --- */
.need-selector{ background: var(--color-black-soft); border:1px solid var(--color-on-dark-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.need-selector-title{ font-family: var(--font-display); font-weight:var(--fw-extrabold); font-size:1.15rem; margin-bottom: 4px; }
.need-selector-hint{ color: var(--color-on-dark-muted); font-size:.85rem; margin-bottom: var(--space-4); }
.need-list{ display:flex; flex-direction:column; gap:8px; margin-bottom: var(--space-4); }
.need-btn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border-radius: var(--radius-md); border:1px solid transparent;
  background: rgba(255,255,255,.04); transition: background var(--t-fast), border-color var(--t-fast);
}
.need-btn:hover{ background: rgba(255,255,255,.08); }
.need-btn.is-active{ background: var(--color-green-bright-10); border-color: var(--color-green-bright); }
.need-btn .letter{ flex:none; width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold); font-size:.78rem; }
.need-btn.is-active .letter{ background: var(--color-green-bright); color: var(--color-black); }
.need-btn .icon{ width:20px; height:20px; color: var(--color-green-bright); flex:none; }
.need-btn .label{ font-size:.88rem; font-weight:var(--fw-medium); line-height:1.3; }

.need-panel{ background: rgba(255,255,255,.05); border-radius: var(--radius-md); padding: var(--space-4); min-height:126px; }
.need-panel .tag{ display:inline-block; font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color: var(--color-green-bright); margin-bottom:8px; }
.need-panel p{ font-size:.9rem; color: var(--color-on-dark-muted); line-height:1.5; margin-bottom: var(--space-3); }
.need-panel .btn-link{ font-size:.82rem; }

/* =========================================================================
   LAYER STEPPER (Base · Evolución · Sostenibilidad)
   ========================================================================= */
.layer-stepper{ display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-6); }
.layer-stepper .layer{ display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius: var(--radius-pill); background: var(--color-white); border:1px solid var(--color-border); }
.layer-stepper .layer b{ width:26px; height:26px; border-radius:50%; background: var(--color-green-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:var(--fw-bold); flex:none; }
.layer-stepper .layer span{ font-size:.82rem; font-weight:var(--fw-bold); color: var(--color-black); }
.layer-stepper .layer small{ display:block; font-size:.72rem; color: var(--color-text-muted); font-weight:var(--fw-regular); }
.layer-stepper .arrow{ color: var(--color-border); font-size:1.1rem; }
.section-dark .layer-stepper .layer{ background: rgba(255,255,255,.06); border-color: var(--color-on-dark-border); }
.section-dark .layer-stepper .layer span{ color:#fff; }
.section-dark .layer-stepper .layer small{ color: var(--color-on-dark-muted); }

/* =========================================================================
   DOORS GRID (5 ofertas — Propuesta de valor)
   ========================================================================= */
.doors-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.door{ grid-column: span 3; }
.doors-grid > .door:nth-child(1),
.doors-grid > .door:nth-child(2),
.doors-grid > .door:nth-child(3){ grid-column: span 2; }

.door-card{
  height:100%; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-card); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base);
  position:relative;
}
.door-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card-lg); border-color: var(--color-green-bright); }
.door-layer{ position:absolute; top:var(--space-5); right:var(--space-5); font-size:.63rem; font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color: var(--color-text-muted); }
.door-icon{ width:52px; height:52px; border-radius: var(--radius-md); background: var(--color-mint-bg); color: var(--color-green-dark); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-4); }
.door-icon .icon{ width:26px; height:26px; }
.door-num{ font-family:var(--font-display); font-size:.75rem; font-weight:var(--fw-bold); color: var(--color-text-muted); margin-bottom:6px; }
.door-card h3{ font-size:1.3rem; font-weight:var(--fw-extrabold); font-family:var(--font-display); margin-bottom:2px; }
.door-sub{ font-size:.78rem; color: var(--color-green-dark); font-weight:var(--fw-bold); margin-bottom: var(--space-3); }
.door-desc{ color: var(--color-text-muted); font-size:.92rem; line-height:1.5; margin-bottom: var(--space-4); flex-grow:1; }
.door-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom: var(--space-4); }
.door-pills span{ font-size:.72rem; font-weight:var(--fw-medium); padding:5px 12px; border-radius: var(--radius-pill); background: var(--color-mint-bg); color: var(--color-green-dark); }
.door-card .btn-link{ margin-top:auto; }

/* =========================================================================
   MATRIX (Necesidad × Oferta)
   ========================================================================= */
.matrix-scroll{ overflow-x:auto; border-radius: var(--radius-lg); border:1px solid var(--color-border); background:#fff; }
.matrix-table{ width:100%; border-collapse:collapse; min-width:760px; }
.matrix-table caption{ text-align:left; padding: var(--space-4) var(--space-4) 0; font-size:.85rem; color: var(--color-text-muted); }
.matrix-table th, .matrix-table td{ padding: 14px 16px; border-bottom:1px solid var(--color-border); text-align:center; vertical-align:middle; }
.matrix-table thead th{ text-align:center; font-size:.72rem; font-weight:var(--fw-bold); color: var(--color-black); text-transform:uppercase; letter-spacing:.03em; background: var(--color-mint-bg); }
.matrix-table thead th:first-child{ text-align:left; background: var(--color-white); }
.matrix-table tbody th{ text-align:left; font-size:.86rem; font-weight:var(--fw-medium); color: var(--color-black); white-space:nowrap; position:sticky; left:0; background:#fff; }
.matrix-table tbody tr:last-child td, .matrix-table tbody tr:last-child th{ border-bottom:none; }
.matrix-dot{ display:inline-block; vertical-align:middle; width:14px; height:14px; border-radius:50%; margin-inline:auto; }
.matrix-dot.core{ background: var(--color-green-dark); }
.matrix-dot.support{ background: var(--color-green-bright); }
.matrix-dot.na{ background: var(--color-border); }
.matrix-legend{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-4); font-size:.82rem; color: var(--color-text-muted); }
.matrix-legend span{ display:inline-flex; align-items:center; gap:8px; }

/* =========================================================================
   METRICS / BADGES
   ========================================================================= */
.metrics-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.metric-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); text-align:left; }
.metric-card strong{ display:block; font-family:var(--font-display); font-size:2.1rem; font-weight:var(--fw-extrabold); color: var(--color-green-dark); line-height:1; margin-bottom:10px; }
.metric-card span{ color: var(--color-text-muted); font-size:.85rem; line-height:1.4; display:block; }

.badges-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: var(--space-5); }
.badge{ font-size:.78rem; font-weight:var(--fw-bold); color: var(--color-green-dark); background: var(--color-mint-bg); padding:8px 16px; border-radius: var(--radius-pill); }

/* =========================================================================
   CASES / EVIDENCE
   ========================================================================= */
.case-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.case-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); display:flex; flex-direction:column; height:100%; }
.case-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom: var(--space-3); }
.case-tags .tag-industry{ font-size:.68rem; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.04em; color: var(--color-black); background: var(--color-mint-bg-deep); padding:5px 11px; border-radius: var(--radius-pill); }
.case-tags .tag-cap{ font-size:.68rem; font-weight:var(--fw-medium); color: var(--color-text-muted); padding:5px 2px; }
.case-card h3{ font-size:1.05rem; margin-bottom:8px; line-height:1.3; }
.case-card p{ color: var(--color-text-muted); font-size:.88rem; line-height:1.5; margin-bottom: var(--space-4); flex-grow:1; }
.case-metrics{ display:flex; gap: var(--space-3); border-top:1px dashed var(--color-border); padding-top: var(--space-3); }
.case-metrics div strong{ display:block; font-family:var(--font-display); color: var(--color-green-dark); font-size:1.15rem; font-weight:var(--fw-extrabold); }
.case-metrics div span{ font-size:.72rem; color: var(--color-text-muted); }

.evidence-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: var(--space-5); }
.filter-chip{ font-size:.8rem; font-weight:var(--fw-medium); padding:9px 18px; border-radius: var(--radius-pill); border:1px solid var(--color-border); background:#fff; color: var(--color-text-body); transition: all var(--t-fast); }
.filter-chip:hover{ border-color: var(--color-green-dark); }
.filter-chip.is-active{ background: var(--color-black); border-color: var(--color-black); color:#fff; }

/* =========================================================================
   INDUSTRIES
   ========================================================================= */
.industry-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.industry-card{ background: var(--color-white); border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.industry-card .tag-cap{ font-size:.68rem; color: var(--color-green-dark); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.03em; }
.industry-card h4{ font-size:1rem; font-weight:var(--fw-bold); margin: 6px 0 8px; }
.industry-card p{ font-size:.82rem; color: var(--color-text-muted); line-height:1.5; margin:0; }

/* =========================================================================
   INSIGHTS
   ========================================================================= */
.insight-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.insight-card{ background: rgba(255,255,255,.05); border:1px solid var(--color-on-dark-border); border-radius: var(--radius-lg); padding: var(--space-5); display:flex; flex-direction:column; height:100%; }
.insight-card .tag{ font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.06em; color: var(--color-green-bright); margin-bottom: var(--space-3); }
.insight-card h3{ color:#fff; font-size:1.05rem; margin-bottom:10px; line-height:1.35; }
.insight-card p{ color: var(--color-on-dark-muted); font-size:.86rem; line-height:1.55; margin-bottom: var(--space-4); flex-grow:1; }

/* =========================================================================
   OFFER PAGE — HERO / PROBLEM / PILLARS / CHIPS / PROCESS / PRODUCTS
   ========================================================================= */
.offer-hero{ background: var(--color-black); color:#fff; padding: var(--space-7) 0 var(--space-8); position:relative; overflow:hidden; }
.offer-hero-grid{ display:grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items:end; position:relative; z-index:1; }
.offer-hero h1{ color:#fff; max-width:820px; }
.offer-hero .lead{ max-width:640px; margin-top: var(--space-4); }
.offer-hero-cta{ display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-5); }
.offer-icon-badge{ width:96px; height:96px; border-radius: var(--radius-lg); background: var(--color-green-bright); border:1px solid var(--color-green-bright); color: var(--color-green-bright); display:flex; align-items:center; justify-content:center; flex:none; }
.offer-icon-badge .icon{ width:46px; height:46px; }

.problem-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.problem-card{ background:#fff; border:1px solid var(--color-border); border-left:4px solid var(--color-green-bright); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); }
.problem-card p{ font-size:.95rem; color: var(--color-text-body); line-height:1.55; margin:0; }

.pillars-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.pillar-card{ background: var(--color-mint-bg); border-radius: var(--radius-lg); padding: var(--space-5); }
.pillar-card .pillar-num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: var(--color-blue-green); color:#fff; font-weight:var(--fw-bold); font-size:.85rem; margin-bottom: var(--space-3); }
.pillar-card h3{ font-size:1.1rem; margin-bottom:8px; color: var(--color-green-dark); font-family:var(--font-display); }
.pillar-card p{ font-size:.9rem; color: var(--color-text-body); line-height:1.55; margin:0; }

.capability-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:var(--fw-medium); padding:10px 18px; border-radius: var(--radius-pill); background:#fff; border:1px solid var(--color-border); }
.chip .icon{ width:15px; height:15px; color: var(--color-green-dark); }

.process-flow{ display:flex; gap: var(--space-2); overflow-x:auto; padding-bottom: var(--space-2); }
.process-step{ flex:1 1 150px; min-width:150px; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); position:relative; }
.process-step::after{ content:"→"; position:absolute; right:-18px; top:50%; transform:translateY(-50%); color: var(--color-border); font-size:1.1rem; z-index:1; }
.process-step:last-child::after{ display:none; }
.process-step b{ display:block; font-family:var(--font-display); color: var(--color-green-dark); font-size:.95rem; margin-bottom:6px; }
.process-step span{ font-size:.78rem; color: var(--color-text-muted); line-height:1.4; display:block; }

.product-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.product-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.product-card .door-icon{ width:44px; height:44px; margin-bottom:var(--space-3); }
.product-card .door-icon .icon{ width:22px; height:22px; }
.product-card .tag-cap{ font-size:.68rem; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.04em; color: var(--color-green-dark); background: var(--color-mint-bg); padding:4px 10px; border-radius: var(--radius-pill); display:inline-block; margin-bottom: var(--space-3); }
.product-card h3{ font-size:1.05rem; margin-bottom:8px; }
.product-card p{ font-size:.86rem; color: var(--color-text-muted); line-height:1.5; margin:0; }

/* --- Leadership tracks (details/summary progressive disclosure) --- */
.track-list{ display:flex; flex-direction:column; gap: var(--space-3); }
.track-item{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); overflow:hidden; }
.track-item summary{ list-style:none; cursor:pointer; padding: var(--space-4) var(--space-5); display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); font-weight:var(--fw-bold); font-family:var(--font-display); font-size:1.02rem; }
.track-item summary::-webkit-details-marker{ display:none; }
.track-item summary .plus{ width:28px; height:28px; border-radius:50%; border:2px solid var(--color-green-dark); flex:none; display:flex; align-items:center; justify-content:center; color: var(--color-green-dark); transition: transform var(--t-fast); font-size:1rem; }
.track-item[open] summary .plus{ transform: rotate(45deg); }
.track-item summary .track-format{ font-size:.72rem; font-weight:var(--fw-medium); color: var(--color-text-muted); text-transform:none; margin-left:auto; margin-right:6px; }
.track-modules{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.module-card{ background: var(--color-mint-bg); border-radius: var(--radius-md); padding: var(--space-4); }
.module-card b{ display:block; font-size:.85rem; margin-bottom:6px; }
.module-card span{ font-size:.78rem; color: var(--color-text-body); line-height:1.4; display:block; }

/* --- Cross-sell --- */
.crosssell-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.crosssell-card{ display:flex; align-items:center; gap: var(--space-4); text-decoration:none; color:inherit; background: var(--color-mint-bg); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); transition: transform var(--t-fast); }
.crosssell-card:hover{ transform: translateX(4px); }
.crosssell-card .door-icon{ margin:0; background:#fff; }
.crosssell-card div p{ margin:2px 0 0; font-size:.82rem; color: var(--color-text-muted); }
.crosssell-card div strong{ font-family:var(--font-display); font-size:1rem; }
.crosssell-card .arrow{ margin-left:auto; color: var(--color-green-dark); font-size:1.3rem; flex:none; }

/* =========================================================================
   CONTACT / CTA
   ========================================================================= */
.contact-section{ background: var(--color-black); color:#fff; padding: var(--space-8) 0; position:relative; overflow:hidden; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); position:relative; z-index:1; }
.contact-copy h2{ color:#fff; margin-bottom: var(--space-3); }
.contact-copy .lead{ margin-bottom: var(--space-5); }
.contact-alt{ display:flex; align-items:center; gap: var(--space-3); padding-top: var(--space-5); margin-top: var(--space-5); border-top:1px solid var(--color-on-dark-border); }
.contact-alt strong{ display:block; font-size:.95rem; }
.contact-alt span{ font-size:.82rem; color: var(--color-on-dark-muted); }

.form{ background: rgba(255,255,255,.05); border:1px solid var(--color-on-dark-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-3); }
.form label{ display:block; color: var(--color-green-bright); font-size: var(--fs-small); font-weight:var(--fw-bold); margin-bottom:6px; }
.form input, .form textarea, .form select{
  width:100%; padding:13px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--color-on-dark-border); background: rgba(255,255,255,.04); color:#fff;
  font-family:var(--font-base); margin-bottom: var(--space-3); font-size: var(--fs-small);
}
.form select option{ color:#000; }
.form input::placeholder, .form textarea::placeholder{ color: rgba(255,255,255,.4); }
.form input:focus, .form textarea:focus, .form select:focus{ border-color: var(--color-green-bright); outline:none; }
.form-note{ font-size:.76rem; color: var(--color-on-dark-muted); margin-top: var(--space-2); }
.form-success{ display:none; background: var(--color-green-bright-10); border:1px solid var(--color-green-bright); border-radius: var(--radius-md); padding: var(--space-4); font-size:.88rem; }
.form-success.is-visible{ display:block; }
.form.is-submitted .form-fields{ display:none; }
.form.is-submitted .btn, .form.is-submitted .form-note{ display:none; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background: var(--color-black); color:#fff; padding: var(--space-6) 0; border-top:1px solid var(--color-on-dark-border); }
.footer-top{ display:flex; justify-content:space-between; gap: var(--space-6); flex-wrap:wrap; padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom:1px solid var(--color-on-dark-border); }
.footer-tagline{ color: var(--color-white); font-size:.85rem; margin-top: var(--space-3); max-width:280px; }
.footer-grid{ display:grid; grid-template-columns: repeat(3, minmax(130px,1fr)); gap: var(--space-5); }
.footer-col h4{ color: var(--color-green-bright); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin:0 0 var(--space-3); }
.footer-col a{ display:block; color: var(--color-on-dark-muted); text-decoration:none; margin-bottom: 10px; font-size: var(--fs-small); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-4); flex-wrap:wrap; padding-top: var(--space-5); margin-top: var(--space-5); border-top:1px solid var(--color-on-dark-border); font-size:.78rem; color: var(--color-on-dark-muted); }
.social-row{ display:flex; gap:10px; }
.social-icon{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.06); border:1px solid var(--color-on-dark-border); display:flex; align-items:center; justify-content:center; color:#fff; transition: background var(--t-fast), border-color var(--t-fast); }
.social-icon:hover{ background: var(--color-green-bright); border-color: var(--color-green-bright); color: var(--color-black); }


/* =========================================================================
   REVEAL / MOTION
   ========================================================================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.15s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.21s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.27s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.33s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
  .metrics-strip{ grid-template-columns: repeat(2, 1fr); }
  .offer-hero-grid{ grid-template-columns:1fr; }
  .offer-icon-badge{ display:none; }
  .principle-grid{ grid-template-columns:1fr; text-align:center; }
  .principle-grid p{ margin-inline:auto; }
  .circles-illustration{ max-width:220px; order:-1; }
}

@media (max-width: 900px){
  .main-nav{ display:none; }
  .header-actions .btn-sm{ display:none; }
  .menu-toggle{ display:flex; }
  .doors-grid > .door{ grid-column: span 6; }
}

@media (max-width: 640px){
  :root{ --header-h:72px; }
  .site-header{ padding: 0 var(--container-pad); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .footer-col:last-child{ grid-column: span 2; }
  .footer-top{ flex-direction:column; }
  .layer-stepper{ display:none; }
  .need-list{ gap:6px; }
  .process-step::after{ display:none; }
  .process-flow{ flex-direction:column; }
  .breadcrumb{ display:none; }
}

/* =========================================================================
   MOBILE NAV PANEL
   ========================================================================= */
.mobile-nav{
  position:fixed; inset: var(--header-h) 0 0 0; background: var(--color-black); z-index:99;
  padding: var(--space-5) var(--container-pad); overflow-y:auto;
  transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.mobile-nav a{ display:block; color:#fff; text-decoration:none; font-size:1.15rem; font-weight:var(--fw-bold); padding: var(--space-3) 0; border-bottom:1px solid var(--color-on-dark-border); font-family:var(--font-display); }
.mobile-nav .mobile-sub{ padding-left: var(--space-3); }
.mobile-nav .mobile-sub a{ font-size:.95rem; font-weight:var(--fw-medium); color: var(--color-on-dark-muted); border-bottom:none; padding: 10px 0; }
.mobile-nav .btn{ margin-top: var(--space-5); }

/* =========================================================================
   AMPLIACIÓN — Capacidades puntuales + módulo de foto (revisión humana)
   ========================================================================= */
.cap-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); }
.cap-card{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.cap-card .door-icon{ width:44px; height:44px; margin-bottom:var(--space-3); }
.cap-card .door-icon .icon{ width:22px; height:22px; }
.cap-card .tag-cap{ font-size:.68rem; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.04em; color: var(--color-green-dark); background: var(--color-mint-bg); padding:4px 10px; border-radius: var(--radius-pill); display:inline-block; margin-bottom: var(--space-3); }
.cap-card h3{ font-size:1.05rem; margin-bottom:4px; }
.cap-card .cap-sub{ font-size:.78rem; color: var(--color-text-muted); display:block; margin-bottom: var(--space-3); }
.cap-card ul{ display:flex; flex-direction:column; gap:7px; }
.cap-card li{ font-size:.84rem; color: var(--color-text-body); line-height:1.45; padding-left:18px; position:relative; }
.cap-card li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background: var(--color-green-bright); }

.photo-feature{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-card-lg); aspect-ratio: 4/5; }
.photo-feature img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-feature .photo-caption{ position:absolute; left:0; right:0; bottom:0; padding: var(--space-5) var(--space-5) var(--space-4); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%); color:#fff; }
.photo-feature .photo-caption strong{ display:block; font-family:var(--font-display); font-size:1.1rem; margin-bottom:2px; }
.photo-feature .photo-caption span{ font-size:.8rem; color: rgba(255,255,255,.85); }
.about-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items:center; }
.about-grid .photo-feature{ aspect-ratio: 5/4; }
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; } .about-grid .photo-feature{ order:-1; } }

/* =========================================================================
   MENÚ CIRCULAR DE CAPACIDADES (reemplaza doors-grid + matriz Necesidad×Oferta)
   ========================================================================= */
.wm-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items:center; margin-top: var(--space-6); }
.wm-panel{ background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); min-height:300px; display:flex; flex-direction:column; justify-content:center; box-shadow: var(--shadow-card); }
.wm-kicker{ font-size:.72rem; font-weight:var(--fw-bold); letter-spacing:.1em; color: var(--color-green-dark); text-transform:uppercase; margin-bottom: var(--space-2); }
.wm-panel h3{ font-family:var(--font-display); font-size:1.5rem; margin:0 0 var(--space-3); line-height:1.15; }
.wm-panel > p{ color: var(--color-text-body); font-size:.95rem; line-height:1.5; margin:0 0 var(--space-4); max-width:440px; }
.wm-panel .door-pills{ margin-bottom: var(--space-4); min-height:26px; }
.wm-panel .btn-link{ opacity:1; transition:opacity .15s ease; }
.wm-panel .btn-link.is-hidden{ opacity:0; pointer-events:none; height:0; overflow:hidden; margin:0; }
.wm-helper{ margin-top: var(--space-4); padding-top: var(--space-3); font-size:.78rem; color: var(--color-text-muted); display:flex; align-items:center; gap:8px; border-top:1px dashed var(--color-border); }
.wm-helper-dot{ width:7px; height:7px; border-radius:50%; background: var(--color-green-bright); border:2px solid var(--color-green-dark); flex-shrink:0; }

.wm-shell{ display:flex; justify-content:center; align-items:center; min-width:0; }
.wm-ring{ position:relative; width:min(36vw, 500px); aspect-ratio:1; filter: drop-shadow(0 18px 34px rgba(21,96,29,.14)); isolation:isolate; }
.wm-ring::before{ content:""; position:absolute; inset:0; border:4px solid var(--color-green-bright); border-radius:50%; z-index:5; pointer-events:none; box-shadow: inset 0 0 0 8px #fff, 0 0 0 1px var(--color-border); }
.wm-ring::after{ content:""; position:absolute; inset:21%; border-radius:50%; border:1px dashed var(--color-green-dark-08); z-index:6; pointer-events:none; }
.wm-svg{ width:100%; height:100%; display:block; overflow:visible; border-radius:50%; }
.wm-segment{ fill:#fff; stroke:var(--color-border); stroke-width:8; cursor:pointer; transition: transform .28s cubic-bezier(.2,.75,.2,1), fill .2s ease, stroke .2s ease, filter .2s ease; transform-box:fill-box; transform-origin:center; }
.wm-segment:hover, .wm-segment.is-active{ fill: var(--color-green-bright); stroke: var(--color-blue-green); filter: drop-shadow(0 7px 12px rgba(21,96,29,.16)); }
.wm-labels{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.wm-label{ position:absolute; transform:translate(-50%,-50%); width:30%; text-align:center; color: var(--color-black); text-decoration:none; transition: transform .2s ease, color .2s ease; display:grid; justify-items:center; gap:5px; pointer-events:auto; padding:6px; border-radius: var(--radius-md); }
.wm-label:hover, .wm-label.is-active, .wm-label:focus-visible{ transform:translate(-50%,-50%) scale(1.07); outline:none; }
.wm-label .icon{ width:28px; height:28px; color: var(--color-green-dark); }
.wm-label h4{ margin:0; font-family:var(--font-display); font-size:clamp(.72rem,1.1vw,.92rem); line-height:1.1; letter-spacing:-.01em; color:var(--color-black); }
.wm-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:37%; aspect-ratio:1; border-radius:50%; background: var(--color-blue-green); color:#fff; z-index:10; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:7%; box-shadow: 0 14px 28px rgba(8,53,15,.22), 0 0 0 8px #fff, 0 0 0 9px var(--color-border); }
.wm-center-kicker{ font-size:clamp(.6rem,.8vw,.72rem); font-weight:var(--fw-bold); letter-spacing:.1em; color: var(--color-green-bright); }
.wm-center-title{ font-family:var(--font-display); font-size:clamp(.95rem,1.6vw,1.4rem); font-weight:var(--fw-bold); line-height:1.05; margin-top:3px; }
.wm-center-rule{ width:34px; height:2px; background: var(--color-green-bright); margin:10px 0 8px; }
.wm-center p{ font-size:clamp(.65rem,.85vw,.8rem); line-height:1.3; margin:0; max-width:210px; color: var(--color-white); }
@media (max-width: 900px){
  .wm-wrap{ grid-template-columns:1fr; gap: var(--space-5); }
  .wm-ring{ width:min(80vw, 420px); }
  .wm-shell{ order:1; }
  .wm-panel{ order:2; min-height:0; }
}
@media (max-width: 520px){
  .wm-label h4{ font-size:.66rem; }
  .wm-label .icon{ width:22px; height:22px; }
}


/* =========================================================================
   KPI MICROSTORIES — evidencia que se anima según lo que le ocurrió al dato
   ========================================================================= */
.case-card-story{
  overflow:hidden;
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.case-card-story:hover{
  border-color:rgba(21,96,29,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.11);
  transform:translateY(-3px);
}
.kpi-story{
  border-top:1px dashed var(--color-border);
  padding-top:14px;
  margin-top:auto;
  min-height:158px;
  position:relative;
}
.kpi-story-label{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:18px;
  margin-bottom:10px;
  color:var(--color-text-muted);
  font-size:.64rem;
  font-weight:var(--fw-bold);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.kpi-signal{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-green-dark);
  box-shadow:0 0 0 4px var(--color-green-dark-08);
  flex:none;
}
.kpi-story-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:10px;
}
.kpi-story-metric{min-width:0;}
.kpi-number{
  display:block;
  font-family:var(--font-display);
  color:var(--color-green-dark);
  font-size:1.2rem;
  line-height:1;
  font-weight:var(--fw-extrabold);
  white-space:nowrap;
}
.kpi-story-metric > span{
  display:block;
  margin-top:7px;
  color:var(--color-text-muted);
  font-size:.69rem;
  line-height:1.35;
}

/* Retail · documentos que cruzan el proceso + timeline de 3 semanas */
.doc-flow{
  height:28px;
  position:relative;
  overflow:hidden;
  border-radius:999px;
  background:var(--color-green-dark-08);
}
.doc-flow::after{
  content:"";
  position:absolute;
  left:13px;
  right:31px;
  top:50%;
  height:1px;
  background:rgba(21,96,29,.2);
}
.doc-token{
  --i:0;
  position:absolute;
  z-index:2;
  left:9px;
  top:7px;
  width:12px;
  height:14px;
  border:1.5px solid var(--color-green-dark);
  border-radius:2px;
  background:#fff;
  opacity:.18;
  transform:translateX(0) scale(.9);
}
.doc-token::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:4px;
  height:1px;
  background:var(--color-green-dark);
  box-shadow:0 3px 0 var(--color-green-dark),0 6px 0 var(--color-green-dark);
  opacity:.55;
}
.doc-finish{
  position:absolute;
  z-index:3;
  right:8px;
  top:4px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--color-green-dark);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  transform:scale(.72);
  opacity:.28;
}
.kpi-story-retail.is-playing .doc-token,
.kpi-story-retail.is-complete .doc-token{
  animation:doc-through .92s var(--ease) calc(var(--i) * 105ms) both;
}
.kpi-story-retail.is-playing .doc-finish,
.kpi-story-retail.is-complete .doc-finish{
  animation:finish-pop .32s var(--ease) .72s both;
}
@keyframes doc-through{
  0%{opacity:0;transform:translateX(0) scale(.82)}
  18%{opacity:1}
  80%{opacity:1}
  100%{opacity:0;transform:translateX(205px) scale(1)}
}
@keyframes finish-pop{to{opacity:1;transform:scale(1)}}
.week-timeline{
  height:16px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr) 18px;
  align-items:center;
  margin-bottom:4px;
}
.week-timeline i{
  position:absolute;
  left:4px;
  right:9px;
  top:7px;
  height:1px;
  background:rgba(21,96,29,.2);
  transform-origin:left;
  transform:scaleX(.08);
}
.week-timeline b{
  --i:0;
  z-index:2;
  justify-self:start;
  width:14px;
  height:14px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid rgba(21,96,29,.28);
  color:var(--color-green-dark);
  font-size:.52rem;
  font-weight:700;
  opacity:.35;
  transform:scale(.8);
}
.week-timeline em{
  z-index:2;
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--color-green-dark);
  color:#fff;
  font-size:.55rem;
  font-style:normal;
  opacity:.25;
  transform:scale(.72);
}
.kpi-story-retail.is-playing .week-timeline i,
.kpi-story-retail.is-complete .week-timeline i{animation:timeline-draw .7s var(--ease) .55s forwards;}
.kpi-story-retail.is-playing .week-timeline b,
.kpi-story-retail.is-complete .week-timeline b{animation:week-pop .28s var(--ease) calc(.62s + var(--i) * 150ms) forwards;}
.kpi-story-retail.is-playing .week-timeline em,
.kpi-story-retail.is-complete .week-timeline em{animation:finish-pop .3s var(--ease) 1.05s forwards;}
@keyframes timeline-draw{to{transform:scaleX(1)}}
@keyframes week-pop{to{opacity:1;transform:scale(1);background:var(--color-mint-bg)}}

/* Energy · 4h viaja y se convierte en 24 min mientras la barra se comprime */
.time-journey{
  height:38px;
  position:relative;
  display:flex;
  align-items:center;
  margin:0 0 3px;
}
.time-before,
.time-traveler{
  position:absolute;
  top:4px;
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  line-height:1;
}
.time-before{left:0;color:var(--color-black);font-size:1rem;}
.time-traveler{
  left:27px;
  color:var(--color-green-dark);
  font-size:1rem;
  opacity:.12;
  white-space:nowrap;
}
.time-line{
  position:absolute;
  left:32px;
  right:58px;
  top:14px;
  height:2px;
  background:rgba(21,96,29,.13);
  overflow:visible;
}
.time-line i{
  display:block;
  width:100%;
  height:100%;
  background:var(--color-green-dark);
  transform-origin:left;
  transform:scaleX(.04);
}
.time-line b{
  position:absolute;
  right:-2px;
  top:-3px;
  width:8px;
  height:8px;
  border-right:2px solid var(--color-green-dark);
  border-top:2px solid var(--color-green-dark);
  transform:rotate(45deg);
  opacity:.25;
}
.time-drop{
  position:absolute;
  right:0;
  bottom:0;
  padding:2px 7px;
  border-radius:999px;
  background:var(--color-mint-bg-deep);
  color:var(--color-green-dark);
  font-size:.62rem;
  font-weight:800;
  opacity:.15;
  transform:translateY(4px) scale(.9);
}
.kpi-story-energy.is-playing .time-line i,
.kpi-story-energy.is-complete .time-line i{animation:time-line-draw .65s var(--ease) .1s forwards;}
.kpi-story-energy.is-playing .time-line b,
.kpi-story-energy.is-complete .time-line b{animation:arrow-show .2s ease .64s forwards;}
.kpi-story-energy.is-playing .time-traveler,
.kpi-story-energy.is-complete .time-traveler{animation:time-travel .9s var(--ease) .22s forwards;}
.kpi-story-energy.is-playing .time-drop,
.kpi-story-energy.is-complete .time-drop{animation:drop-show .3s var(--ease) .9s forwards;}
@keyframes time-line-draw{to{transform:scaleX(1)}}
@keyframes arrow-show{to{opacity:1}}
@keyframes time-travel{0%{left:27px;opacity:.15}20%{opacity:1}100%{left:calc(100% - 55px);opacity:1}}
@keyframes drop-show{to{opacity:1;transform:translateY(0) scale(1)}}
.compression-bars{display:grid;gap:4px;margin-top:2px;}
.compression-bars div{display:grid;grid-template-columns:42px 1fr;gap:7px;align-items:center;}
.compression-bars span{font-size:.48rem;letter-spacing:.08em;font-weight:700;color:var(--color-text-muted);}
.compression-bars i{height:4px;border-radius:999px;background:var(--color-green-dark);display:block;transform-origin:left;}
.bar-long{opacity:.2;}
.bar-short{width:100%;opacity:.25;transform:scaleX(1);}
.kpi-story-energy.is-playing .bar-long,
.kpi-story-energy.is-complete .bar-long{animation:bar-before-fade .6s ease .28s forwards;}
.kpi-story-energy.is-playing .bar-short,
.kpi-story-energy.is-complete .bar-short{animation:bar-compress .85s var(--ease) .38s forwards;}
@keyframes bar-before-fade{to{opacity:.1}}
@keyframes bar-compress{to{transform:scaleX(.1);opacity:1}}

/* Cyber · 11 hallazgos pasan de riesgo a resueltos antes del go-live */
.vuln-map{
  display:grid;
  grid-template-columns:repeat(11,1fr);
  gap:5px;
  min-height:24px;
  align-items:center;
  margin-bottom:10px;
}
.vuln-node{
  --i:0;
  width:100%;
  max-width:20px;
  aspect-ratio:1;
  justify-self:center;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--color-black-06);
  border:1px solid rgba(33,33,33,.18);
  color:var(--color-text-muted);
  font-size:.53rem;
  font-weight:800;
  transform:scale(.82);
}
.kpi-story-cyber.is-playing .vuln-node,
.kpi-story-cyber.is-complete .vuln-node{
  animation:resolve-node .26s var(--ease) calc(.12s + var(--i) * 70ms) forwards;
}
@keyframes resolve-node{
  45%{transform:scale(1.15)}
  100%{transform:scale(1);background:var(--color-green-dark);border-color:var(--color-green-dark);color:#fff}
}
.status-journey{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:5px;
  min-height:21px;
}
.status-journey i{
  height:1px;
  background:rgba(21,96,29,.2);
  transform-origin:left;
  transform:scaleX(.08);
}
.status-chip{
  font-size:.5rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  border-radius:999px;
  padding:5px 7px;
  white-space:nowrap;
}
.status-risk{background:var(--color-black-06);color:var(--color-text-muted);}
.status-valid{background:var(--color-mint-bg);color:var(--color-green-dark);opacity:.18;transform:translateY(3px);}
.status-go{background:var(--color-green-dark);color:#fff;opacity:.12;transform:translateY(3px);}
.kpi-story-cyber.is-playing .status-journey i,
.kpi-story-cyber.is-complete .status-journey i{animation:status-line .42s var(--ease) .72s forwards;}
.kpi-story-cyber.is-playing .status-valid,
.kpi-story-cyber.is-complete .status-valid{animation:status-show .28s var(--ease) .78s forwards;}
.kpi-story-cyber.is-playing .status-go,
.kpi-story-cyber.is-complete .status-go{animation:status-show .32s var(--ease) 1.16s forwards;}
@keyframes status-line{to{transform:scaleX(1)}}
@keyframes status-show{to{opacity:1;transform:translateY(0)}}

@media (max-width:420px){
  .kpi-story{min-height:150px;}
  .kpi-story-grid{gap:10px;}
  .kpi-number{font-size:1.08rem;}
  .vuln-map{gap:3px;}
  .status-chip{font-size:.46rem;padding:4px 5px;}
}
@media (prefers-reduced-motion:reduce){
  .doc-token{opacity:0!important;}
  .doc-finish,.week-timeline b,.week-timeline em,.time-traveler,.time-drop,.status-valid,.status-go{opacity:1!important;transform:none!important;}
  .week-timeline i,.time-line i,.status-journey i{transform:scaleX(1)!important;}
  .bar-short{transform:scaleX(.1)!important;opacity:1!important;}
  .vuln-node{background:var(--color-green-dark)!important;border-color:var(--color-green-dark)!important;color:#fff!important;transform:none!important;}
}


/* =========================================================================
   RESEARCH LIBRARY — editorial horizontal rail inspired by leading insight hubs
   Adapted to Periferia: dark canvas, green interaction, mixed cover treatments.
   ========================================================================= */
.research-section{
  padding: var(--space-8) 0 var(--space-9);
  background:var(--color-black);
}
.research-section .research-flow{ opacity:.48; }
.research-shell{ overflow:visible; }
.research-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-5);
  margin-bottom:var(--space-5);
}
.research-copy{ margin-bottom:0; }
.research-see-all{
  display:inline-flex;
  align-items:center;
  gap:14px;
  flex:none;
  color:#fff;
  text-decoration:none;
  font-weight:var(--fw-bold);
  font-size:.92rem;
  padding-bottom:6px;
}
.research-see-all span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:var(--color-green-bright);
  color:var(--color-black);
  transition:transform var(--t-base) var(--ease), background var(--t-fast);
}
.research-see-all:hover span{ transform:translateX(4px); background:#fff; }

.research-topicbar{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:64px;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  margin-bottom:var(--space-6);
  overflow-x:auto;
  scrollbar-width:none;
}
.research-topicbar::-webkit-scrollbar{ display:none; }
.research-topicbar__label{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  padding:0 24px 0 0;
  color:var(--color-green-bright);
  font-weight:var(--fw-bold);
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.research-topics{
  display:flex;
  align-items:stretch;
  flex:1 0 max-content;
}
.research-topic{
  color:#fff;
  min-height:64px;
  padding:0 25px;
  border-left:1px solid rgba(255,255,255,.10);
  font-size:.9rem;
  white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast);
}
.research-topic:hover{ background:rgba(255,255,255,.07); }
.research-topic.is-active{
  background:var(--color-green-bright);
  color:var(--color-black);
  font-weight:var(--fw-bold);
}

.research-rail-wrap{ position:relative; }
.research-rail{
  display:flex;
  gap:26px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 10px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.research-rail::-webkit-scrollbar{ display:none; }
.research-rail:focus-visible{ outline-offset:8px; }

.research-card{
  position:relative;
  flex:0 0 clamp(300px, 29vw, 370px);
  height:520px;
  overflow:hidden;
  scroll-snap-align:start;
  background:#242424;
  border:1px solid rgba(255,255,255,.13);
  transition:transform .45s var(--ease), border-color .3s ease, opacity .28s ease;
}
.research-card[hidden]{ display:none !important; }
.research-card:hover{
  transform:translateY(-8px);
  border-color:rgba(109,253,140,.62);
}
.research-card__link{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:32px;
  color:#fff;
  text-decoration:none;
  overflow:hidden;
}
.research-card__body{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.research-card__type{
  display:block;
  margin-bottom:30px;
  font-size:.75rem;
  line-height:1;
  letter-spacing:.045em;
  font-weight:var(--fw-bold);
  text-transform:uppercase;
}
.research-card h3{
  max-width:310px;
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2vw,1.88rem);
  line-height:1.12;
  letter-spacing:-.015em;
}
.research-card p{
  margin-top:16px;
  max-width:300px;
  color:rgba(255,255,255,.76);
  font-size:.9rem;
  line-height:1.55;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .4s var(--ease);
}
.research-card:hover p,
.research-card:focus-within p{ opacity:1; transform:none; }
.research-card__cta{
  position:relative;
  z-index:4;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.24);
  color:var(--color-green-bright);
  font-size:.86rem;
  font-weight:var(--fw-bold);
}
.research-card__cta b{
  width:36px;
  height:36px;
  border:1px solid currentColor;
  display:grid;
  place-items:center;
  font-size:1rem;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-base) var(--ease);
}
.research-card:hover .research-card__cta b{ background:var(--color-green-bright); color:var(--color-black); transform:translateX(3px); }

/* visual cover cards */
.research-card--visual{ background:#111; }
.research-card__art{
  position:absolute;
  inset:0;
  z-index:0;
  color:var(--color-green-bright);
  background:#111;
}
.research-card__art svg{ width:100%; height:100%; }
.research-card__art svg *{ vector-effect:non-scaling-stroke; }
.research-net path,
.research-finance-grid path,
.research-finance-grid rect{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  opacity:.55;
}
.research-net circle,
.research-finance-grid circle{ fill:var(--color-green-bright); opacity:.85; }
.research-art-number{
  fill:rgba(255,255,255,.12);
  font-size:106px;
  font-weight:800;
  font-family:Arial,sans-serif;
}
.research-card__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,.35);
  transition:background .4s ease;
}
.research-card--visual-alt .research-card__art{ background:#1d271f; }
.research-card:hover .research-card__scrim{ background:rgba(0,0,0,.55); }
.research-card__art svg{
  transform:scale(1.01);
  transition:transform 1s var(--ease);
}
.research-card:hover .research-card__art svg{ transform:scale(1.07) translateY(-6px); }

/* paper / perspective card */
.research-card--paper{
  background:#f5f5f2;
  border-color:#f5f5f2;
}
.research-card--paper .research-card__link,
.research-card--paper h3{ color:#171717; }
.research-card--paper p{ color:#505050; opacity:1; transform:none; }
.research-card--paper .research-card__type{ color:var(--color-green-dark); }
.research-card--paper .research-card__cta{
  color:var(--color-green-dark);
  border-top-color:rgba(0,0,0,.18);
}
.research-card__illustration{
  margin:auto -8px 18px;
  color:#171717;
}
.research-card__illustration svg{ width:100%; }
.research-card__illustration .research-dots{ fill:var(--color-green-dark); stroke:none; }
.research-card--paper:hover{ border-color:var(--color-green-bright); }
.research-card--paper:hover .research-card__cta b{ background:var(--color-green-dark); color:#fff; }

/* solid brand cover */
.research-card--green{
  background:var(--color-green-dark);
  border-color:rgba(109,253,140,.38);
}
.research-card--green p{ color:rgba(255,255,255,.84); opacity:1; transform:none; }
.research-card--green .research-card__type{ color:var(--color-green-bright); }
.research-card__signal{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin:auto 0 28px;
  color:#fff;
  font-size:.62rem;
  font-weight:var(--fw-bold);
  letter-spacing:.06em;
}
.research-card__signal span{ text-align:center; }
.research-card__signal i{
  width:22px;
  height:1px;
  background:var(--color-green-bright);
  position:relative;
}
.research-card__signal i::after{
  content:"";
  position:absolute;
  right:-1px;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--color-green-bright);
}

.research-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  margin-top:26px;
}
.research-arrow{
  width:46px;
  height:46px;
  flex:none;
  display:grid;
  place-items:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.32);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.research-arrow:hover:not(:disabled){ background:var(--color-green-bright); border-color:var(--color-green-bright); color:var(--color-black); transform:translateY(-2px); }
.research-arrow:disabled{ opacity:.32; cursor:default; }
.research-progress{
  width:min(250px, 26vw);
  height:2px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}
.research-progress span{
  display:block;
  width:25%;
  height:100%;
  background:var(--color-green-bright);
  transform-origin:left center;
  transition:width .25s ease;
}

@media (max-width: 900px){
  .research-intro{ align-items:flex-start; }
  .research-card{ flex-basis:min(78vw,350px); height:500px; }
  .research-topicbar__label{ display:none; }
  .research-topic:first-child{ border-left:0; }
}

@media (max-width: 640px){
  .research-section{ padding:var(--space-7) 0; }
  .research-intro{ display:block; }
  .research-see-all{ margin-top:20px; }
  .research-topicbar{ margin-inline:calc(var(--container-pad) * -1); padding-left:var(--container-pad); }
  .research-topic{ padding:0 18px; min-height:58px; }
  .research-rail{ margin-right:calc(var(--container-pad) * -1); padding-right:var(--container-pad); gap:16px; }
  .research-card{ flex-basis:84vw; max-width:340px; height:490px; }
  .research-card__link{ padding:26px; }
  .research-card p{ opacity:1; transform:none; }
  .research-controls{ justify-content:space-between; }
  .research-progress{ flex:1; width:auto; }
}
.research-card--visual .research-card__body{ height:100%; }


/* =========================================================================
   AJUSTE PUNTUAL 2026-08-26
   1) Hero completo dentro del primer viewport en desktop.
   2) Centro del menú circular forzado a proporción 1:1.
   El resto de la experiencia permanece sin cambios.
   ========================================================================= */

/* El centro debe conservar exactamente la misma anchura y altura. */
.wm-center{
  width:37%;
  height:37%;
  aspect-ratio:auto;
  border-radius:50%;
  overflow:hidden;
}

/* Compactación controlada únicamente para la portada en pantallas desktop
   de altura estándar / baja, de modo que header + hero entren en 1 viewport. */
@media (min-width:1081px) and (max-height:920px){
  .hero{
    min-height:calc(100vh - var(--header-h));
    padding:clamp(30px,4.2vh,42px) 0 clamp(22px,3vh,30px);
    display:flex;
    align-items:center;
  }
  .hero .wrap.hero-grid{ width:100%; }
  .hero-grid{
    gap:clamp(34px,3.2vw,50px);
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.65rem,3.55vw,3.55rem);
    line-height:.98;
    margin-bottom:18px;
  }
  .hero .lead{
    font-size:clamp(.95rem,1.12vw,1.08rem);
    line-height:1.48;
    margin-bottom:22px;
    max-width:540px;
  }
  .hero-cta{ margin-bottom:24px; }
  .hero-proof{
    gap:clamp(22px,2.5vw,34px);
    padding-top:18px;
  }
  .proof-item strong{ font-size:1.45rem; }
  .proof-item span{ font-size:.74rem; line-height:1.25; }

  .need-selector{ padding:22px 24px; }
  .need-selector-title{ font-size:1.08rem; }
  .need-selector-hint{ margin-bottom:14px; }
  .need-list{ gap:6px; margin-bottom:14px; }
  .need-btn{ padding:8px 12px; gap:10px; }
  .need-btn .letter{ width:27px; height:27px; }
  .need-btn .label{ font-size:.84rem; }
  .need-panel{
    min-height:112px;
    padding:16px 18px;
  }
  .need-panel .tag{ margin-bottom:5px; }
  .need-panel p{
    font-size:.82rem;
    line-height:1.4;
    margin-bottom:10px;
  }
  .need-panel .btn-link{ font-size:.78rem; }
}

/* ===== Ecosistema + propósito: bloque compacto de confianza ===== */
.trust-ecosystem{padding:clamp(46px,5.5vw,78px) 0;border-top:1px solid var(--color-border);overflow:hidden}
.trust-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:22px}
.trust-head h2{font-family:var(--font-display);font-size:clamp(2rem,3.1vw,3.6rem);line-height:.98;letter-spacing:-.045em;max-width:920px}
.trust-head h2 em{font-style:normal;color:var(--color-green-dark)}
.trust-head>p{color:var(--color-text-muted);font-size:1rem;line-height:1.55;max-width:520px}
.trust-tabs{display:flex;gap:8px;align-items:center;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}.trust-tabs::-webkit-scrollbar{display:none}
.trust-tab{appearance:none;border:1px solid var(--color-border);background:#fff;color:var(--color-text);padding:10px 16px;border-radius:999px;font:700 .82rem/1 var(--font-body);cursor:pointer;white-space:nowrap;transition:.2s ease}
.trust-tab:hover,.trust-tab:focus-visible{border-color:var(--color-green-dark);outline:none}.trust-tab.is-active{background:var(--color-black);border-color:var(--color-black);color:#fff}
.trust-stage{border:1px solid var(--color-border);border-radius:28px;background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);min-height:300px;box-shadow:0 18px 48px rgba(18,34,20,.055);overflow:hidden}
.trust-panel{padding:clamp(24px,3vw,38px);min-height:300px}.trust-panel[hidden]{display:none!important}.trust-panel.is-active{animation:trustIn .35s ease both}@keyframes trustIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#panel-impacto{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.impact-tag{display:inline-flex;color:var(--color-green-dark);font:800 .72rem/1 var(--font-body);letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px}
.impact-copy h3,.logo-panel-head h3{font-family:var(--font-display);font-size:clamp(1.55rem,2.2vw,2.4rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}.impact-copy p,.logo-panel-copy{color:var(--color-text-muted);line-height:1.55;max-width:660px}.impact-copy .btn-link{margin-top:20px}
.impact-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.impact-pillar{min-height:180px;border:1px solid var(--color-border);border-radius:20px;padding:22px;background:#fff;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.impact-pillar:before{content:"";position:absolute;width:86px;height:86px;border-radius:50%;right:-28px;top:-28px;background:var(--color-mint-bg-deep)}.impact-num{position:absolute;left:22px;top:20px;color:var(--color-green-dark);font:800 .76rem/1 var(--font-body)}.impact-pillar strong{font-size:1rem;margin-bottom:7px}.impact-pillar small{color:var(--color-text-muted);line-height:1.35;font-size:.78rem}
.logo-periferia {
    width: 150px;
    height: auto;
}
.logo-panel-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.logo-panel-actions{display:flex;gap:8px}.logo-nav{width:42px;height:42px;border-radius:50%;border:1px solid var(--color-border);background:#fff;color:var(--color-green-dark);font-size:1.1rem;cursor:pointer;transition:.2s}.logo-nav:hover,.logo-nav:focus-visible{background:var(--color-green-dark);color:#fff;border-color:var(--color-green-dark);outline:none}.logo-panel-copy{margin:-2px 0 22px;font-size:.9rem}
.logo-rail{
    display:grid;
    grid-template-rows:repeat(3, 112px);
    grid-auto-flow:column;
    grid-auto-columns:clamp(150px,13vw,190px);
    gap:10px;
    overflow:hidden;
    padding:2px 2px 10px;
    position:relative;
}

/* Cada logo */
.logo-tile{
    height:112px;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:10px;
    transition:.2s ease;
}

.logo-tile:hover{
    border-color:rgba(21,96,29,.45);
    transform:translateY(-2px);
}

.logo-tile img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.2s;
}

.logo-tile:hover img{
    filter:none;
    opacity:1;
}

.logo-tile span{
    position:absolute;
    left:10px;
    right:10px;
    bottom:9px;
    text-align:center;
    color:var(--color-text-muted);
    font:700 .64rem/1.2 var(--font-body);
    opacity:.78;
}

.logo-tile img:not([hidden])+span{
    opacity:0;
}

.logo-tile:hover img:not([hidden])+span{
    opacity:.75;
}
.client-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.client-filter {
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text-muted);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.client-filter:hover {
    border-color: var(--color-blue-green);
    color: var(--color-blue-green);
}

.client-filter.is-active {
    background: var(--color-blue-green);
    border-color: var(--color-blue-green);
    color: var(--color-green-bright);
}

.logo-tile.is-hidden {
    display: none !important;
}
@media(max-width:640px){

    .logo-rail{
        grid-template-rows:repeat(3, 100px);
        grid-auto-columns:148px;
        gap:8px;
        overflow:hidden;
    }

    .logo-tile{
        height:100px;
        padding:15px;
    }

    .logo-tile img{
        max-width:100px;
        max-height:38px;
    }

}

@media(max-width:900px){.trust-head{grid-template-columns:1fr;gap:16px}.trust-head>p{max-width:720px}#panel-impacto{grid-template-columns:1fr}.impact-pillars{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.trust-ecosystem{padding:40px 0}.trust-stage{border-radius:22px;min-height:unset}.trust-panel{padding:22px;min-height:unset}.impact-pillars{grid-template-columns:1fr}.impact-pillar{min-height:118px}.logo-panel-head{align-items:center}.logo-panel-head h3{font-size:1.45rem}.logo-panel-copy{margin-top:5px}.logo-rail{grid-auto-columns:148px}.logo-tile{height:100px}.logo-panel-actions{flex-shrink:0}}

/* =====================================================
   PRINCIPLE BAND - IMAGEN
   ===================================================== */

.principle-image {
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: 24px;
}

.principle-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
}

@media (max-width: 768px) {

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

    .principle-image {
        height: 280px;
        border-radius: 20px;
    }

    .principle-image img {
        border-radius: 20px;
    }

}/* ===== Capability grid (bento) — reemplazo de la rueda circular ===== */
.capgrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows:auto;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.capgrid-card{
  display:flex;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  text-decoration:none;
  color: var(--color-text-body);
  transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.capgrid-card:hover{ box-shadow: var(--shadow-card-lg); border-color: var(--color-green-bright); transform: translateY(-2px); }

.capgrid-icon{ width:34px; height:34px; object-fit:contain; }

.capgrid-title{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  line-height:1.2;
  margin: var(--space-3) 0 0;
  color: var(--color-black);
}
.capgrid-hr{ border:none; border-top:1px solid var(--color-border); margin: var(--space-3) 0; width:100%; }
.capgrid-desc{ font-size:.85rem; line-height:1.45; color: var(--color-text-muted); margin:0 0 var(--space-4); }

.capgrid-cta{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--color-blue-green); color:#fff;
  padding:6px 16px 6px 6px; border-radius: var(--radius-pill);
  font-size:.76rem; font-weight:var(--fw-bold);
  width:fit-content; margin-top:auto;
}
.capgrid-cta .plus{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background: var(--color-green-bright); color: var(--color-blue-green);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:800; line-height:1;
}
.capgrid-card:hover .capgrid-cta{ background: var(--color-green-dark); }

/* Card layout variants */
.capgrid-strategy{
  grid-column: 1; grid-row: 1 / 3;
  flex-direction:column;
}
.capgrid-vert{ grid-row:1; flex-direction:column; }
.capgrid-staffing{ grid-column:2; }
.capgrid-software{ grid-column:3; }
.capgrid-vert-head{ display:flex; align-items:flex-start; gap:12px; }
.capgrid-vert-head .capgrid-title{ margin-top:2px; }
.capgrid-vert-head .capgrid-icon{ margin-top:2px; }
.capgrid-vert .capgrid-hr{ margin-top: var(--space-3); }

.capgrid-wide{ flex-direction:row; align-items:center; grid-row:2; }
.capgrid-products{ grid-column: 2 / 4; }
.capgrid-leadership{ grid-column: 1 / 4; grid-row:3; }
.capgrid-wide-left{ display:flex; align-items:center; gap:14px; flex:0 0 34%; }
.capgrid-wide-left .capgrid-title{ margin:0; }
.capgrid-divider-v{ width:1px; align-self:stretch; background: var(--color-border); flex-shrink:0; }
.capgrid-wide-right{ flex:1; padding-left: var(--space-5); display:flex; flex-direction:column; gap:10px; }
.capgrid-wide-right .capgrid-desc{ margin:0; }
.capgrid-wide-right .capgrid-cta{ margin-top:0; }

@media (max-width: 900px){
  .capgrid{ grid-template-columns: 1fr; }
  .capgrid-strategy{ grid-column:1; grid-row:auto; }
  .capgrid-staffing, .capgrid-software{ grid-column:1; grid-row:auto; }
  .capgrid-products, .capgrid-leadership{ grid-column:1; grid-row:auto; }
  .capgrid-wide{ flex-direction:column; align-items:flex-start; }
  .capgrid-wide-left{ flex:none; }
  .capgrid-divider-v{ display:none; }
  .capgrid-wide-right{ padding-left:0; margin-top: var(--space-3); }
}

/* ===== Wrapper: panel izquierdo + grilla de capacidades ===== */
.capgrid-wrap{
  display:grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--space-6);
  align-items:start;
  margin-top: var(--space-6);
}
.capgrid-wrap .wm-panel{ position:sticky; top: calc(var(--header-h) + 24px); }

.capgrid-card.is-active{
  background: var(--color-green-bright);
  border-color: var(--color-green-dark);
  box-shadow: var(--shadow-card-lg);
}
.capgrid-card.is-active .capgrid-hr{ border-top-color: rgba(6,54,53,.25); }
.capgrid-card.is-active .capgrid-cta{ background: var(--color-blue-green); }
.capgrid-card.is-active .capgrid-divider-v{ background: rgba(6,54,53,.25); }

@media (max-width: 900px){
  .capgrid-wrap{ grid-template-columns: 1fr; }
  .capgrid-wrap .wm-panel{ position:static; }
}

/* ===== Botón flotante de WhatsApp ===== */
.wa-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  z-index: 999;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{ transform: scale(1.07); box-shadow: 0 12px 30px rgba(0,0,0,.34); }
.wa-float:active{ transform: scale(.96); }

.wa-float::before{
  content:"";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: .55;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%   { transform: scale(.92); opacity:.55; }
  70%  { transform: scale(1.45); opacity:0; }
  100% { opacity:0; }
}

.wa-float-icon{ width:30px; height:30px; fill:#fff; }

.wa-float-tip{
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #111;
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-float:hover .wa-float-tip{ opacity: 1; transform: translateY(-50%) translateX(-4px); }

@media (max-width: 520px){
  .wa-float{ width:52px; height:52px; right:16px; bottom:16px; }
  .wa-float-icon{ width:26px; height:26px; }
  .wa-float-tip{ display:none; }
}