/* PRODUCCIÓN — generada de styles.css + ui_kits/website/site.css. No editar a mano. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/* ===== tokens/fonts.css ===== */
/* ==========================================================================
   INPRIA NORTE — Fonts
   Brand typeface: Poppins (Google Fonts, free).
   Logo & headlines: Poppins Light (300). Body: Regular (400) / Medium (500).
   Loaded from Google Fonts. To ship offline, self-host the woff2 files and
   replace this @import with local @font-face rules.
   ========================================================================== */

/* ===== tokens/colors.css ===== */
/* ==========================================================================
   INPRIA NORTE — Color tokens
   "El blanco es la base." White is the ground of everything.
   Azul Marino (navy) is the principal ink. Granate is the accent — small
   touches only ("pequeños golpes"). Grafito for long-form body text.
   ========================================================================== */
:root {
  /* ---- Brand core (from the brand book) -------------------------------- */
  --paper:        #FFFFFF; /* Blanco / Paper — base & background of everything */
  --navy:         #0E2F4F; /* Azul Marino — principal ink, text, south arrow  */
  --granate:      #7E1F2E; /* Granate — accent, north arrow, details (sparing)*/
  --grafito:      #2B3138; /* Grafito — long-form body text                   */

  /* ---- Compass mark facets --------------------------------------------- */
  /* The mark's arrows are folded: the left facet of each takes a lighter    */
  /* tone of its own colour. Never introduce new hues here.                 */
  --mark-north:        #7E1F2E; /* granate — north arrow, right facet       */
  --mark-north-light:  #9A3340; /* granate-600 — north arrow, left facet    */
  --mark-south:        #0E2F4F; /* navy — south arrow, right facet          */
  --mark-south-light:  #1B4267; /* navy-600 — south arrow, left facet       */

  /* ---- Navy scale (cool, technical) ------------------------------------ */
  --navy-900:     #081E34;
  --navy-800:     #0A2440; /* press / deep                                   */
  --navy-700:     #0E2F4F; /* = --navy base                                  */
  --navy-600:     #1B4267; /* hover (lighter)                                */
  --navy-500:     #2C567F;
  --navy-300:     #6E8AA6;
  --navy-200:     #AFC0D2;
  --navy-100:     #DCE5EE;
  --navy-50:      #EEF3F8; /* faint navy wash surface                        */

  /* ---- Granate scale (use with measure) -------------------------------- */
  --granate-900:  #5C141F;
  --granate-800:  #6A1826; /* hover / press                                  */
  --granate-700:  #7E1F2E; /* = --granate base                               */
  --granate-600:  #9A3340;
  --granate-300:  #C98A92;
  --granate-100:  #F0DBDE;
  --granate-50:   #FBF3F4; /* faint granate wash                             */

  /* ---- Neutral / graphite scale (cool grey) ---------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F8FA; /* subtle panel surface                           */
  --neutral-100:  #EEF1F4;
  --neutral-200:  #E1E6EB; /* hairline borders                               */
  --neutral-300:  #CFD6DD; /* borders strong                                 */
  --neutral-400:  #AAB3BD;
  --neutral-500:  #8A929C; /* captions / meta (brand book grey)              */
  --neutral-600:  #5A636D;
  --neutral-700:  #3E454D;
  --neutral-800:  #2B3138; /* = --grafito                                    */
  --neutral-900:  #1A1F24;

  /* ---- Status (derived, restrained — technical not playful) ------------ */
  --success:      #1E7A4D;
  --success-bg:   #E8F4EE;
  --warning:      #B5751A;
  --warning-bg:   #FBF1DF;
  --danger:       #A32437; /* near-granate, slightly brighter for alerts     */
  --danger-bg:    #F8E7EA;
  --info:         #1B4267;
  --info-bg:      #EEF3F8;

  /* ---- Semantic aliases ------------------------------------------------ */
  --bg:               var(--paper);
  --surface:          var(--paper);
  --surface-subtle:   var(--neutral-50);
  --surface-sunken:   var(--neutral-100);
  --surface-navy:     var(--navy-700); /* dark sections (footer, hero band)  */

  --text:             var(--navy-700);  /* default UI ink = navy             */
  --text-body:        var(--grafito);   /* long-form paragraphs              */
  --text-strong:      var(--navy-900);
  --text-muted:       var(--neutral-500);
  --text-on-navy:     var(--paper);
  --text-on-granate:  var(--paper);

  --accent:           var(--granate-700);
  --accent-hover:     var(--granate-800);
  --primary:          var(--navy-700);
  --primary-hover:    var(--navy-600);
  --primary-press:    var(--navy-800);

  --link:             var(--navy-700);
  --link-hover:       var(--granate-700);

  --border:           var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-navy:      var(--navy-100);
  --rule-accent:      var(--granate-700); /* the thin granate hairline       */

  --focus-ring:       color-mix(in srgb, var(--navy-700) 45%, transparent);
}

/* ===== tokens/typography.css ===== */
/* ==========================================================================
   INPRIA NORTE — Typography tokens
   One family: Poppins. Geometric, clean, technical.
   Headlines run LIGHT (300) — fina, geométrica, elegante.
   Body runs Regular (400) / Medium (500). Eyebrows & the wordmark use
   tracked uppercase (the "NORTE" lockup treatment).
   ========================================================================== */
:root {
  /* ---- Families ---- */
  --font-sans:    'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif; /* used at weight 300 */
  --font-mono:    ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* ---- Type scale (px, 1.25 modular-ish) ---- */
  --text-2xs:     0.6875rem; /* 11 — legal / micro labels */
  --text-xs:      0.75rem;   /* 12 — captions, meta        */
  --text-sm:      0.875rem;  /* 14 — secondary UI          */
  --text-base:    1rem;      /* 16 — body default          */
  --text-md:      1.125rem;  /* 18 — lead body             */
  --text-lg:      1.25rem;   /* 20 — subheads              */
  --text-xl:      1.5rem;    /* 24 — H4 / card titles      */
  --text-2xl:     1.875rem;  /* 30 — H3                    */
  --text-3xl:     2.375rem;  /* 38 — H2                    */
  --text-4xl:     3rem;      /* 48 — H1                    */
  --text-5xl:     3.75rem;   /* 60 — display               */
  --text-6xl:     4.75rem;   /* 76 — hero display          */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.12; /* display headlines */
  --leading-snug:    1.25;
  --leading-normal:  1.5;  /* body */
  --leading-relaxed: 1.65; /* long-form grafito */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em; /* large light display */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em; /* eyebrows / NORTE-style tracked uppercase */
  --tracking-widest:  0.22em; /* widest UI tracking (tracked uppercase labels) */
  --tracking-wordmark: 0.627em; /* the logotype "NORTE" treatment — matches the logo files */

  /* ---- Semantic roles ---- */
  --display-weight:  var(--fw-light);
  --heading-weight:  var(--fw-light);
  --eyebrow-weight:  var(--fw-medium);
  --body-weight:     var(--fw-regular);
  --label-weight:    var(--fw-medium);
}

/* ===== tokens/spacing.css ===== */
/* ==========================================================================
   INPRIA NORTE — Spacing, radius, shadow, layout tokens
   Geometric and orderly. Lots of white. Restrained radii (technical, not soft).
   Shadows are subtle and navy-tinted — the brand is flat & clean, never glassy.
   ========================================================================== */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* ---- Radii (modest, geometric) ---- */
  --radius-none: 0;
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-pill: 0;

  /* ---- Borders ---- */
  --border-width:      1px;
  --border-width-thick: 2px;
  --rule-width:        2px;   /* the granate hairline accent */

  /* ---- Shadows (navy-tinted, subtle) ---- */
  --shadow-xs:  0 1px 2px rgba(14, 47, 79, 0.06);
  --shadow-sm:  0 1px 3px rgba(14, 47, 79, 0.08), 0 1px 2px rgba(14, 47, 79, 0.05);
  --shadow-md:  0 4px 12px rgba(14, 47, 79, 0.09), 0 2px 4px rgba(14, 47, 79, 0.05);
  --shadow-lg:  0 12px 28px rgba(14, 47, 79, 0.12), 0 4px 8px rgba(14, 47, 79, 0.06);
  --shadow-xl:  0 24px 48px rgba(14, 47, 79, 0.16);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --gutter:        var(--space-5);
  --section-y:     var(--space-11);

  /* ---- Motion (calm, professional — no bounce) ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      320ms; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ==========================================================================
   INPRIA NORTE — Base element defaults
   Opinionated, lightweight. Establishes the white ground, navy ink,
   Poppins body, and the light-weight heading rhythm. Consumers can rely on
   these or override per component.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  color: var(--text);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-medium); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-base); font-weight: var(--fw-medium); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

strong { font-weight: var(--fw-semibold); color: var(--text); }
small { font-size: var(--text-xs); }

::selection { background: var(--navy-100); color: var(--navy-900); }

/* The signature eyebrow / kicker: tracked uppercase, navy, with optional
   granate tick. */
.in-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
}
.in-eyebrow--accent { color: var(--accent); }

/* The thin granate rule used as a brand detail under titles. */
.in-rule {
  width: 48px;
  height: var(--rule-width);
  background: var(--rule-accent);
  border: 0;
  margin: var(--space-4) 0;
}

/* ===== components/brand/Eyebrow.css ===== */
/* Eyebrow — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--fw-medium); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--navy-700); }
.inn-eyebrow__tick{ width:18px; height:2px; background:var(--granate-700); display:inline-block; }
.inn-eyebrow--accent{ color:var(--granate-700); }
.inn-eyebrow--on-dark{ color:#C98A92; }

/* ===== components/brand/Logo.css ===== */
/* Logo — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-logo{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display); line-height:1; }
.inn-logo--stacked{ flex-direction:column; gap:.5em; text-align:center; }
.inn-logo__mark{ flex:none; display:block; transition:transform .6s cubic-bezier(.4,0,.2,1); transform-origin:50% 50%; }
.inn-logo:hover .inn-logo__mark{ transform:rotate(360deg); }
.inn-logo__word{ font-weight:var(--fw-light); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.inn-logo__word .inn-logo__in{ color:var(--navy-700); }
.inn-logo__word .inn-logo__no{ color:var(--granate-700); }
.inn-logo--on-dark .inn-logo__in{ color:#fff; }

/* ===== components/brand/SectionTitle.css ===== */
/* SectionTitle — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-sectiontitle{ font-family:var(--font-display); }
.inn-sectiontitle__h{ font-weight:var(--fw-light); color:var(--navy-700); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); font-size:var(--text-3xl); margin:.5rem 0 0; text-wrap:balance; }
.inn-sectiontitle__rule{ width:48px; height:2px; background:var(--granate-700); border:0; margin:1rem 0 0; }
.inn-sectiontitle--center{ text-align:center; }
.inn-sectiontitle--center .inn-sectiontitle__rule{ margin-left:auto; margin-right:auto; }
.inn-sectiontitle--on-dark .inn-sectiontitle__h{ color:#fff; }

/* ===== components/display/Avatar.css ===== */
/* Avatar — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  background:var(--navy-700); color:var(--paper); font-family:var(--font-sans); font-weight:var(--fw-medium);
  border-radius:50%; overflow:hidden; text-transform:uppercase; user-select:none;
}
.inn-avatar img{ width:100%; height:100%; object-fit:cover; }
.inn-avatar--square{ border-radius:0; }
.inn-avatar--granate{ background:var(--granate-700); }
.inn-avatar--neutral{ background:var(--neutral-200); color:var(--neutral-700); }
.inn-avatar--sm{ width:28px; height:28px; font-size:11px; }
.inn-avatar--md{ width:40px; height:40px; font-size:14px; }
.inn-avatar--lg{ width:56px; height:56px; font-size:18px; }

/* ===== components/display/Badge.css ===== */
/* Badge — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-badge{
  display:inline-flex; align-items:center; gap:.35em; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--fw-medium); line-height:1; letter-spacing:.01em;
  padding:.35em .6em; border-radius:0; white-space:nowrap;
}
.inn-badge--navy{ background:var(--navy-50); color:var(--navy-700); }
.inn-badge--granate{ background:var(--granate-50); color:var(--granate-700); }
.inn-badge--neutral{ background:var(--neutral-100); color:var(--neutral-700); }
.inn-badge--solid{ background:var(--navy-700); color:var(--paper); }
.inn-badge--success{ background:var(--success-bg); color:var(--success); }
.inn-badge--warning{ background:var(--warning-bg); color:var(--warning); }
.inn-badge--danger{ background:var(--danger-bg); color:var(--danger); }
.inn-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ===== components/display/Card.css ===== */
/* Card — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-card{
  background:var(--surface); border:1px solid var(--border); border-radius:0;
  overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.inn-card--raised{ box-shadow:var(--shadow-sm); border-color:transparent; }
.inn-card--interactive{ cursor:pointer; }
.inn-card--interactive:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.inn-card--accent{ border-top:3px solid var(--granate-700); }
.inn-card--navy{ background:var(--navy-700); border-color:var(--navy-700); color:var(--paper); }
.inn-card__body{ padding:var(--space-5); }
.inn-card__media{ display:block; width:100%; }

/* ===== components/display/Stat.css ===== */
/* Stat — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-stat{ font-family:var(--font-sans); }
.inn-stat__value{ font-family:var(--font-display); font-weight:var(--fw-light); color:var(--navy-700); line-height:1; font-size:var(--text-4xl); letter-spacing:var(--tracking-tight); }
.inn-stat__value em{ font-style:normal; color:var(--granate-700); }
.inn-stat__label{ font-size:var(--text-sm); color:var(--text-muted); margin-top:8px; }
.inn-stat--sm .inn-stat__value{ font-size:var(--text-2xl); }

/* ===== components/display/Tag.css ===== */
/* Tag — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-tag{
  display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--fw-medium); color:var(--navy-700);
  padding:.3em .65em; border:1px solid var(--border-strong); border-radius:0;
  background:var(--paper); white-space:nowrap;
}
.inn-tag--removable{ padding-right:.35em; }
.inn-tag__x{ display:inline-flex; cursor:pointer; border:0; background:transparent; color:var(--neutral-500); padding:2px; border-radius:50%; line-height:0; }
.inn-tag__x:hover{ color:var(--granate-700); background:var(--neutral-100); }

/* ===== components/feedback/Alert.css ===== */
/* Alert — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-alert{
  display:flex; gap:.8rem; font-family:var(--font-sans); font-size:var(--text-sm);
  border:1px solid var(--border); border-left-width:3px; border-radius:0;  padding:.85rem 1rem; background:var(--surface); color:var(--grafito); align-items:flex-start;
}
.inn-alert[hidden]{ display:none; }
.inn-alert__icon{ flex:none; margin-top:1px; display:inline-flex; }
.inn-alert__body{ flex:1; min-width:0; }
.inn-alert__title{ font-weight:var(--fw-medium); color:var(--navy-800); margin-bottom:2px; }
.inn-alert__close{ flex:none; border:0; background:transparent; cursor:pointer; color:var(--neutral-500); padding:2px; line-height:0; border-radius:0; }
.inn-alert__close:hover{ color:var(--navy-700); background:var(--neutral-100); }
.inn-alert--info{ border-left-color:var(--navy-700); background:var(--info-bg); }
.inn-alert--info .inn-alert__icon{ color:var(--navy-700); }
.inn-alert--success{ border-left-color:var(--success); background:var(--success-bg); }
.inn-alert--success .inn-alert__icon{ color:var(--success); }
.inn-alert--warning{ border-left-color:var(--warning); background:var(--warning-bg); }
.inn-alert--warning .inn-alert__icon{ color:var(--warning); }
.inn-alert--danger{ border-left-color:var(--danger); background:var(--danger-bg); }
.inn-alert--danger .inn-alert__icon{ color:var(--danger); }

/* ===== components/feedback/Tooltip.css ===== */
/* Tooltip — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-tip{ position:relative; display:inline-flex; }
.inn-tip__bubble{
  position:absolute; z-index:50; left:50%; transform:translateX(-50%) translateY(4px);
  bottom:calc(100% + 8px); background:var(--navy-800); color:var(--paper);
  font-family:var(--font-sans); font-size:var(--text-xs); line-height:1.4; font-weight:var(--fw-regular);
  padding:.4rem .6rem; border-radius:0; white-space:nowrap; box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.inn-tip__bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--navy-800); }
.inn-tip:hover .inn-tip__bubble, .inn-tip:focus-within .inn-tip__bubble{ opacity:1; transform:translateX(-50%) translateY(0); }
.inn-tip--bottom .inn-tip__bubble{ bottom:auto; top:calc(100% + 8px); }
.inn-tip--bottom .inn-tip__bubble::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--navy-800); }

/* ===== components/forms/Button.css ===== */
/* Button — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css.
   Variants set colour properties directly (no private custom properties), so
   the token compiler never mistakes them for theme tokens. */
.inn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-weight:var(--fw-medium); line-height:1; white-space:nowrap;
  border:1px solid transparent; background:var(--navy-700); color:var(--paper);
  border-radius:0; cursor:pointer; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.inn-btn:hover{ background:var(--navy-600); }
.inn-btn:active{ background:var(--navy-800); transform:translateY(1px); }
.inn-btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.inn-btn[disabled],.inn-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
/* sizes */
.inn-btn--sm{ font-size:var(--text-sm); padding:0 .75rem; height:32px; }
.inn-btn--md{ font-size:var(--text-sm); padding:0 1.1rem; height:40px; }
.inn-btn--lg{ font-size:var(--text-base); padding:0 1.5rem; height:48px; }
/* variants */
.inn-btn--secondary{ background:var(--paper); color:var(--navy-700); border-color:var(--border-strong); }
.inn-btn--secondary:hover{ background:var(--neutral-50); }
.inn-btn--secondary:active{ background:var(--neutral-100); color:var(--navy-700); }
.inn-btn--ghost{ background:transparent; color:var(--navy-700); border-color:transparent; }
.inn-btn--ghost:hover{ background:var(--neutral-100); }
.inn-btn--ghost:active{ background:var(--neutral-200); }
.inn-btn--accent{ background:var(--granate-700); color:var(--paper); position:relative; overflow:hidden; isolation:isolate; }
.inn-btn--accent::before{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg); pointer-events:none; }
.inn-btn--accent:hover{ background:var(--granate-800); transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(126,31,46,.55); }
.inn-btn--accent:hover::before{ animation:btnSheen .85s ease; }
.inn-btn--accent:active{ background:var(--granate-900); transform:translateY(0); box-shadow:none; }
@keyframes btnSheen{ from{ left:-60%; } to{ left:140%; } }
.inn-btn--link{ background:transparent; color:var(--navy-700); border-color:transparent; height:auto; padding:0; border-radius:0; }
.inn-btn--link:hover{ background:transparent; color:var(--granate-700); text-decoration:underline; text-underline-offset:3px; }
.inn-btn--link:active{ background:transparent; transform:none; }
.inn-btn--block{ display:flex; width:100%; }

/* ===== components/forms/Checkbox.css ===== */
/* Checkbox, Radio and Switch — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-check{ display:inline-flex; align-items:flex-start; gap:.6rem; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--grafito); cursor:pointer; }
.inn-check input{ position:absolute; opacity:0; width:0; height:0; }
.inn-check__box{
  flex:none; width:18px; height:18px; margin-top:1px; border:1px solid var(--border-strong);
  border-radius:0; background:var(--paper); display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.inn-check__box--radio{ border-radius:0; }
.inn-check:hover .inn-check__box{ border-color:var(--navy-500); }
.inn-check input:focus-visible + .inn-check__box{ box-shadow:var(--shadow-focus); }
.inn-check input:checked + .inn-check__box{ background:var(--navy-700); border-color:var(--navy-700); }
.inn-check__box svg{ opacity:0; }
.inn-check input:checked + .inn-check__box svg{ opacity:1; }
.inn-check__dot{ width:8px; height:8px; border-radius:50%; background:var(--paper); opacity:0; }
.inn-check input:checked + .inn-check__box .inn-check__dot{ opacity:1; }
.inn-check input:disabled ~ *{ opacity:.5; }
.inn-check__label{ line-height:1.4; }

/* ===== components/forms/Field.css ===== */
/* Field — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.inn-field[hidden]{ display:none; }
.inn-field__label{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--navy-700); }
.inn-field__req{ color:var(--granate-700); margin-left:2px; }
.inn-field__hint{ font-size:var(--text-xs); color:var(--text-muted); }
.inn-field__error{ font-size:var(--text-xs); color:var(--danger); }
.inn-control{
  font-family:var(--font-sans); font-size:var(--text-sm); color:var(--grafito);
  background:var(--paper); border:1px solid var(--border-strong); border-radius:0;
  padding:0 .75rem; height:40px; width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.inn-control::placeholder{ color:var(--neutral-400); }
.inn-control:hover{ border-color:var(--navy-300); }
.inn-control:focus{ outline:none; border-color:var(--navy-700); box-shadow:var(--shadow-focus); }
.inn-control[disabled]{ background:var(--neutral-50); color:var(--text-muted); cursor:not-allowed; }
.inn-control--textarea{ height:auto; min-height:96px; padding:.6rem .75rem; resize:vertical; line-height:var(--leading-normal); }
.inn-control--invalid{ border-color:var(--danger); }
.inn-control--invalid:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }
.inn-select-wrap{ position:relative; }
.inn-select-wrap::after{ content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; border-right:1.5px solid var(--navy-600); border-bottom:1.5px solid var(--navy-600); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.inn-control--select{ appearance:none; padding-right:2rem; cursor:pointer; }

/* ===== components/forms/IconButton.css ===== */
/* IconButton — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; color:var(--navy-700);
  border-radius:0; cursor:pointer; padding:0;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.inn-iconbtn:hover{ background:var(--neutral-100); }
.inn-iconbtn:active{ background:var(--neutral-200); }
.inn-iconbtn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.inn-iconbtn[disabled]{ opacity:.4; pointer-events:none; }
.inn-iconbtn--sm{ width:32px; height:32px; }
.inn-iconbtn--md{ width:40px; height:40px; }
.inn-iconbtn--lg{ width:48px; height:48px; }
.inn-iconbtn--solid{ background:var(--navy-700); color:var(--paper); }
.inn-iconbtn--solid:hover{ background:var(--navy-600); }
.inn-iconbtn--outline{ border-color:var(--border-strong); }

/* ===== components/forms/Switch.css ===== */
/* Switch — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-switch{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-sans); font-size:var(--text-sm); color:var(--grafito); cursor:pointer; }
.inn-switch input{ position:absolute; opacity:0; width:0; height:0; }
.inn-switch__track{
  flex:none; width:38px; height:22px; border-radius:0; background:var(--neutral-300);
  position:relative; transition:background var(--dur-base) var(--ease-standard);
}
.inn-switch__thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--paper);
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out);
}
.inn-switch input:checked + .inn-switch__track{ background:var(--navy-700); }
.inn-switch input:checked + .inn-switch__track .inn-switch__thumb{ transform:translateX(16px); }
.inn-switch input:focus-visible + .inn-switch__track{ box-shadow:var(--shadow-focus); }
.inn-switch input:disabled ~ *{ opacity:.5; }

/* ===== components/navigation/Tabs.css ===== */
/* Tabs — INPRIA NORTE. Real stylesheet so the static marketing pages can
   use these classes with no React on the page. Imported from styles.css. */
.inn-tabs{ font-family:var(--font-sans); }
.inn-tabs__list{ display:flex; gap:4px; border-bottom:1px solid var(--border); }
.inn-tabs__tab{
  position:relative; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--neutral-600);
  padding:.7rem 1rem; margin-bottom:-1px; border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.inn-tabs__tab:hover{ color:var(--navy-700); }
.inn-tabs__tab[aria-selected="true"]{ color:var(--navy-700); border-bottom-color:var(--granate-700); }
.inn-tabs__tab:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:0; }
.inn-tabs__panel{ padding-top:var(--space-4); }

/* ===== components/navigation/site-chrome.css ===== */
/* ==========================================================================
   INPRIA NORTE — Site chrome (header, footer, breadcrumbs)
   Real CSS, not injected from JS: the marketing pages are STATIC HTML, so the
   markup must be styleable with no React on the page. The matching JSX
   components render exactly these classes for Design System cards.
   ========================================================================== */

/* ---------- Common header ---------- */
.inn-hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,0);border-bottom:1px solid transparent;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.inn-hd.is-solid{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom-color:var(--border)}
.inn-hd__in{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-6);display:flex;align-items:center;gap:var(--space-5);height:68px}
.inn-hd__logo{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;flex:none}
.inn-hd__logo svg{display:block;width:16px;height:auto;flex:none;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-origin:50% 50%}
.inn-hd__logo:hover svg{transform:rotate(360deg)}
.inn-hd__wm{font-family:var(--font-display);font-weight:var(--fw-light);font-size:16px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;line-height:1}
.inn-hd__wm b{font-weight:var(--fw-light);color:var(--navy-700)}
.inn-hd__wm i{font-style:normal;color:var(--granate-700)}
.inn-hd__nav{display:flex;gap:0;margin-left:auto;align-self:stretch}
.inn-hd__nav>a[hidden],.inn-hd__menu a[hidden],.inn-ft__nav a[hidden]{display:none}
.inn-hd__nav>a,.inn-hd__navitem{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--navy-700);text-decoration:none;position:relative;display:flex;align-items:center;height:100%;padding:0 var(--space-3);transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.inn-hd__navitem{padding:0}
.inn-hd__navitem>a{display:flex;align-items:center;height:100%;padding:0 var(--space-3);color:inherit;text-decoration:none}
.inn-hd__nav>a:hover,.inn-hd__navitem:hover>a{background:var(--granate-100);color:var(--granate-800)}
.inn-hd__nav a[aria-current="page"]{color:var(--granate-700)}
.inn-hd__nav a[aria-current="page"]:hover{color:var(--granate-800)}
.inn-hd__nav a[aria-current="page"]::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3);bottom:0;height:2px;background:var(--granate-700)}
.inn-hd__nav a[aria-current="page"]:hover::after{background:var(--granate-800)}
.inn-hd__dd{position:absolute;top:100%;left:0;min-width:230px;background:var(--paper);border:1px solid var(--border);box-shadow:0 24px 44px -20px rgba(14,47,79,.35);padding:6px;z-index:70;display:none}
.inn-hd__navitem:hover .inn-hd__dd:not(:empty){display:block}
.inn-hd__dd a{display:block;padding:10px 14px;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--navy-700);text-decoration:none;border-radius:0;white-space:nowrap}
.inn-hd__dd a:hover{background:var(--granate-100);color:var(--granate-800)}
.inn-hd__cta{margin-left:var(--space-2);flex:none}
.inn-hd__burger{display:none;border:0;background:none;color:var(--navy-700);cursor:pointer;margin-left:auto;padding:6px}
.inn-hd__menu{display:none;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-6) var(--space-6);background:var(--paper);border-bottom:1px solid var(--border)}
.inn-hd__menu[hidden]{display:none}
.inn-hd__menu a{font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--navy-700);text-decoration:none;padding:var(--space-2) 0}
.inn-hd__menu a[aria-current="page"]{color:var(--granate-700)}

/* ---------- Breadcrumbs ---------- */
.inn-bc{width:100%;max-width:var(--container-xl);margin:0 auto;padding:var(--space-5) var(--space-6) 0}
.inn-bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-xs)}
.inn-bc li{display:flex;align-items:center;gap:8px;color:var(--text-muted)}
.inn-bc li+li::before{content:"/";color:var(--navy-200)}
.inn-bc a{color:var(--text-muted);text-decoration:none}
.inn-bc a:hover{color:var(--granate-700)}
.inn-bc [aria-current="page"]{color:var(--navy-700);font-weight:var(--fw-medium)}

/* ---------- Common footer ---------- */
.inn-ft{background:var(--navy-900);color:var(--navy-100);padding:var(--space-8) 0}
.inn-ft__in{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-6);display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:start}
.inn-ft__brand{display:flex;flex-direction:column;gap:var(--space-3)}
.inn-ft__logo{display:inline-flex;align-items:center;gap:.55em;text-decoration:none}
.inn-ft__logo svg{display:block;width:15px;height:auto;flex:none}
.inn-ft__wm{font-family:var(--font-display);font-weight:var(--fw-light);font-size:15px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;line-height:1;color:#fff}
.inn-ft__wm i{font-style:normal;color:var(--granate-300)}
.inn-ft__tag{font-family:var(--font-display);font-weight:var(--fw-light);color:var(--navy-200);margin:0}
.inn-ft__nav{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-self:end}
.inn-ft__nav a{color:var(--navy-100);font-size:var(--text-sm);text-decoration:none}
.inn-ft__nav a:hover{color:#fff}
.inn-ft__legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.1);font-size:var(--text-xs);color:var(--navy-300)}
.inn-ft__legal a{color:var(--navy-300);text-decoration:none}
.inn-ft__legal a:hover{color:#fff}

@media (max-width:860px){
  .inn-hd__nav,.inn-hd__cta{display:none}
  .inn-hd__burger{display:inline-flex}
  .inn-hd__menu:not([hidden]){display:flex}
  /* Sin JavaScript el botón no puede abrir nada: el menú queda desplegado. */
  html:not(.js) .inn-hd__burger{display:none}
  html:not(.js) .inn-hd__menu[hidden]{display:flex}
  .inn-ft__in{grid-template-columns:1fr}
}
@media (max-width:620px){
  .inn-hd__in,.inn-bc,.inn-ft__in{padding-left:var(--space-4);padding-right:var(--space-4)}
  .inn-ft__legal{flex-direction:column}
}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .inn-hd,.inn-hd__logo svg,.inn-hd__nav a{transition:none}
  .inn-hd__logo:hover svg{transform:none}
}

/* ===== ui_kits/website/site.css ===== */
/* ==========================================================================
   INPRIA NORTE — maquetación de las páginas web
   Fuente de trabajo. Se concatena al final de assets/styles.min.css, que es
   lo único que enlazan las páginas publicadas.
   ========================================================================== */
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--grafito);margin:0}
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-6)}
a{color:var(--navy-700)}
a:hover{color:var(--granate-700)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Cinta de resultados ---------- */
.tk{background:var(--navy-700);border-bottom:1px solid var(--navy-600);overflow:hidden;position:relative}
.tk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--navy-700) 0,transparent 6%,transparent 94%,var(--navy-700) 100%)}
.tk__track{display:flex;width:max-content;animation:tkRoll 62s linear infinite}
.tk:hover .tk__track{animation-play-state:paused}
.tk__run{display:flex;flex:none}
.tk__i{display:inline-flex;align-items:baseline;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-right:1px solid rgba(255,255,255,.14);white-space:nowrap}
.tk__k{font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--navy-200)}
.tk__v{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--text-lg);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight)}
.tk__v.is-up{color:var(--granate-300)}
@keyframes tkRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Migas de pan ---------- */
.bc{width:100%;max-width:var(--container-xl);margin:0 auto;padding:var(--space-5) var(--space-6) var(--space-4)}
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-xs)}
.bc li{display:flex;align-items:center;gap:8px;color:var(--text-muted)}
.bc li+li::before{content:"/";color:var(--navy-200)}
.bc a{color:var(--text-muted);text-decoration:none}
.bc a:hover{color:var(--granate-700)}
.bc [aria-current="page"]{color:var(--navy-700);font-weight:var(--fw-medium)}

/* ---------- Franja del titular ---------- */
.hero{position:relative;overflow:hidden;height:88vh;min-height:560px;max-height:880px;display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--navy-800,#0a2136)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s var(--ease-out)}
.hero__img[data-loaded]{opacity:1}
.hero .hero__wm{position:absolute;right:-8%;top:50%;transform:translateY(-50%);height:150%;width:auto;opacity:.05;z-index:1;pointer-events:none}
.js .hero__img[data-loaded]{animation:heroZoom 20s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.05) 62%,rgba(0,0,0,0) 80%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 75%)}
.hero__in{position:relative;z-index:2;width:100%}
.hero__copy{max-width:none}
.hero__lead{font-size:var(--text-md);color:rgba(255,255,255,.85);max-width:none;line-height:var(--leading-relaxed);margin:var(--space-4) 0 0}
.hero__act{display:flex;gap:var(--space-3);margin-top:var(--space-6)}
.hero__act .inn-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75)}
.hero__act .inn-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero__scroll{position:absolute;left:50%;bottom:var(--space-6);z-index:2;transform:translateX(-50%);width:22px;height:36px;border:2px solid rgba(255,255,255,.55);border-radius:11px}
.hero__scroll span{position:absolute;left:50%;top:6px;width:4px;height:8px;background:#fff;border-radius:2px;transform:translateX(-50%)}
.js .hero__scroll span{animation:heroScroll 1.8s ease-in-out infinite}
@keyframes heroScroll{0%{opacity:1;top:6px}70%{opacity:0;top:18px}100%{opacity:0;top:6px}}
/* Titular simple de página interior (sin la franja de dos columnas) */
.pg-hero{position:relative;overflow:hidden;min-height:48vh;display:flex;align-items:center}
.pg-hero__bg{position:absolute;inset:0;z-index:0;background:var(--navy-800,#0a2136)}
.pg-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s var(--ease-out)}
.pg-hero__img[data-loaded]{opacity:1}
.pg-hero .pg-hero__wm{position:absolute;right:-8%;top:50%;transform:translateY(-50%);height:150%;width:auto;opacity:.05;z-index:1;pointer-events:none}
.js .pg-hero__img[data-loaded]{animation:heroZoom 20s ease-out forwards}
.pg-hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.05) 62%,rgba(0,0,0,0) 80%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 75%)}
.pg-hero__in{position:relative;z-index:2;width:100%;padding:var(--space-9) 0}
.pg-hero__eb{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--granate-300);margin-bottom:var(--space-4)}
.pg-hero__eb i{width:20px;height:2px;background:var(--granate-300);display:inline-block}
.pg-hero__t{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:var(--fw-light);color:#fff;line-height:1.1;letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4);max-width:26ch}
.pg-hero__lead{font-size:var(--text-md);color:rgba(255,255,255,.85);max-width:62ch;line-height:var(--leading-relaxed);margin:0}

/* ---------- Secciones ---------- */
.sec{padding:var(--space-11) 0;position:relative}
.sec--tint{background:var(--neutral-50);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec--first{padding-top:var(--space-8)}
.sec--sm{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.sec--navy{background:var(--navy-700)}
.sec__head{max-width:62ch;margin-bottom:var(--space-8)}
.sec__head--flush{margin-bottom:0}
.sec__head--sm{margin-bottom:var(--space-6)}
.sec__lead{font-size:var(--text-md);color:var(--text-muted);max-width:58ch;margin:var(--space-4) 0 0;line-height:var(--leading-relaxed)}
.sec__lead--sm{font-size:var(--text-sm);margin-top:var(--space-3);max-width:50ch}
.sec__more{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-6);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--granate-700);text-decoration:none}
.sec__more span{transition:transform var(--dur-base) var(--ease-out)}
.sec__more:hover span{transform:translateX(5px)}

/* ---------- Cifras grandes ---------- */
.figs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-7);align-items:start}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5);margin:0}
.bf{border-top:2px solid var(--navy-700);padding-top:var(--space-2);display:flex;flex-direction:column-reverse}
.bf__k{margin-top:4px}
.bf--acc{border-top-color:var(--granate-700)}
.bf__v{font-family:var(--font-display);font-weight:var(--fw-light);font-size:clamp(2rem,3.2vw,2.9rem);color:var(--navy-700);line-height:1;margin:0;letter-spacing:var(--tracking-tighter);font-variant-numeric:tabular-nums}
.bf--acc .bf__v{color:var(--granate-700)}
.bf__u{font-size:.4em;font-weight:var(--fw-regular);margin-left:.1em;letter-spacing:0}
.bf__u--pre{margin:0 .02em 0 0}
.bf__k{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);margin:0;max-width:24ch;line-height:var(--leading-normal)}

/* ---------- Clientes ---------- */
.cli-top{margin-bottom:var(--space-6)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-8)}
.cat-grid:has(.catcard:only-child){grid-template-columns:1fr;max-width:360px}
.catcard{display:block;background:var(--paper);border:1px solid var(--border);border-top:3px solid var(--granate-700);padding:var(--space-6);text-decoration:none;box-shadow:0 1px 2px rgba(14,47,79,.05);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1)}
.catcard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(14,47,79,.35)}
.catcard__t{font-size:var(--text-lg);font-weight:var(--fw-medium);color:var(--navy-700);margin:0 0 var(--space-2)}
.catcard__n{font-size:var(--text-sm);color:var(--text-muted);margin:0}
.catcard__cta{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-4);font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--granate-700)}
.catcard__cta span{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.catcard:hover .catcard__cta span{transform:translateX(4px)}
.cli-empty{padding:var(--space-8) 0;text-align:center;color:var(--text-muted);font-size:var(--text-md)}
.cli-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-9)}
.cli-index[hidden]{display:none}
.cli-index a{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--navy-700);background:var(--paper);border:1px solid var(--navy-200);padding:8px 16px;text-decoration:none;transition:border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.cli-index a:hover{border-color:var(--granate-700);color:var(--granate-700)}
@media (max-width:1000px){.cat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cat-grid{grid-template-columns:1fr}}
.cli-tot{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4) var(--space-5);margin:0 0 var(--space-10)}
.cli-tot .bf{border-top:2px solid var(--navy-700);padding-top:var(--space-2)}
.cli-tot .bf:first-child{border-top-color:var(--granate-700)}

/* Fichas de cliente: feed apilado a ancho completo, imagen + info, lados alternos */
.cli-feed{display:flex;flex-direction:column;gap:0}
.cli{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center;padding:var(--space-9) 0;scroll-margin-top:88px}
.cli:nth-child(even){background:var(--neutral-50);margin:0 calc(50% - 50vw);padding:var(--space-9) calc(50vw - 50%)}
.cli__media{order:1}
.cli__info{order:2;display:flex;flex-direction:column;gap:var(--space-4)}
.cli:nth-child(even) .cli__media{order:2}
.cli:nth-child(even) .cli__info{order:1}
.cli__ph{position:relative;overflow:hidden;background:var(--neutral-100);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:220px}
.cli__ph img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.cli:hover .cli__ph img{transform:scale(1.04)}
.cli__ph-empty{width:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);color:var(--navy-400);background:var(--neutral-100)}
.cli__ph-empty svg{width:34px;height:34px}
.cli__ph-empty span{font-size:var(--text-xs);color:var(--text-muted)}
.cli__logo{position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;max-width:240px;max-height:80px;flex:none;background:var(--paper);border:1px solid var(--border);overflow:visible;padding:14px}
.cli__logo img{display:block;width:auto;height:auto;max-width:212px;max-height:52px;object-fit:contain}
.cli__logo-name{display:flex;align-items:center;justify-content:center;width:160px;height:64px;background:linear-gradient(135deg,var(--navy-600),var(--navy-700));padding:6px;text-align:center}
.cli__logo-name span{font-family:var(--font-display);font-weight:var(--fw-light);font-size:10px;color:#fff;letter-spacing:var(--tracking-tight);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.cli__nm{font-family:var(--font-display);font-weight:var(--fw-light);font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--navy-700);margin:0;letter-spacing:var(--tracking-tight);line-height:1.1}
.cli__desc{font-size:var(--text-md);color:var(--grafito);line-height:var(--leading-relaxed);margin:0;max-width:52ch}
.cli__since{display:flex;align-items:baseline;gap:8px;font-size:var(--text-sm);color:var(--text-muted);margin:0}
.cli__since b{font-family:var(--font-display);font-weight:var(--fw-medium);color:var(--granate-700);font-size:var(--text-md);letter-spacing:var(--tracking-tight)}
.cli__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.cli__tag{font-size:var(--text-2xs);padding:4px 11px;letter-spacing:.02em;background:transparent;border:1px solid var(--navy-200);color:var(--navy-700);font-weight:var(--fw-medium)}
.cli__figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:0;padding:var(--space-4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cli__figs[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cli__figs[data-n="1"]{grid-template-columns:1fr}
.cli__figs > div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0;padding-left:var(--space-4);border-left:1px solid var(--border)}
.cli__figs > div:first-child{border-left:0;padding-left:0}
.cli__figs dt{font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);line-height:1.3}
.cli__figs dd{margin:0;font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--text-xl);color:var(--navy-700);font-variant-numeric:tabular-nums}
.cli__contact{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.cli__ci{display:flex;align-items:baseline;gap:10px;font-size:var(--text-sm)}
.cli__ci-ic{flex:none;width:16px;height:16px;color:var(--granate-700);position:relative;top:2px}
.cli__ci-ic svg{width:100%;height:100%;display:block}
.cli__web{font-weight:var(--fw-medium);color:var(--navy-700);text-decoration:none}
.cli__web:hover{color:var(--granate-700)}
.cli__web.is-empty{color:var(--neutral-400);font-weight:var(--fw-regular)}
.cli__tel{color:var(--navy-700);font-weight:var(--fw-medium);text-decoration:none}
.cli__tel:hover{color:var(--granate-700)}
.cli__mail{color:var(--navy-700)}
.cli__addr{display:inline;text-align:left;background:none;border:0;padding:0;margin:0;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--navy-700);cursor:pointer}
.cli__addr:hover{color:var(--granate-700)}
.cli__copied{margin-left:8px;font-size:10px;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--neutral-400)}
.cli__copied.is-on{color:#1F8A5B;font-weight:var(--fw-medium)}
.js .cli__media{opacity:0;transform:translateX(-36px);transition:opacity .7s cubic-bezier(.22,.7,.2,1),transform .7s cubic-bezier(.22,.7,.2,1)}
.js .cli__info{opacity:0;transform:translateX(36px);transition:opacity .7s cubic-bezier(.22,.7,.2,1) .1s,transform .7s cubic-bezier(.22,.7,.2,1) .1s}
.js .cli.is-in .cli__media,.js .cli.is-in .cli__info{opacity:1;transform:none}
.js .cli[data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- Entregables ---------- */
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.srv{padding:var(--space-6) var(--space-6) var(--space-6) 0;border-right:1px solid var(--border)}
.srv--sm{padding:var(--space-4) var(--space-5) var(--space-4) 0}
.srv:last-child{border-right:0}
.srv:not(:first-child){padding-left:var(--space-6)}
.srv__n{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--text-3xl);color:var(--navy-700);margin:0 0 var(--space-3);line-height:1;letter-spacing:var(--tracking-tighter);font-variant-numeric:tabular-nums}
.srv__n--sm{font-size:var(--text-2xl);margin-bottom:var(--space-2)}
.srv__k{display:block;font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--granate-700);margin-top:var(--space-2)}
.srv__t{font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--navy-700);margin:0 0 var(--space-2)}
.srv__t--sm{font-size:var(--text-md)}
.srv__d{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:var(--leading-relaxed);max-width:34ch}
.areas{margin-top:var(--space-10);padding-top:var(--space-7);border-top:1px solid var(--border)}
.areas__t{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-5)}
.areas__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.areas__i{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--text-xl);color:var(--navy-700);border:1px solid var(--navy-200);padding:var(--space-3) var(--space-5);letter-spacing:var(--tracking-tight);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);box-shadow:0 1px 2px rgba(14,47,79,.04)}
.areas__i:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff;box-shadow:0 10px 22px -12px rgba(14,47,79,.45);transform:translateY(-2px)}
.areas__note{font-size:var(--text-xs);color:var(--text-muted);margin:var(--space-5) 0 0}

/* ---------- Formación ---------- */
.frm-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-7);align-items:start;margin-bottom:var(--space-6)}
.frm-figs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:0;align-self:center}
.frm-figs > div{border-top:2px solid var(--navy-700);padding-top:4px}
.frm-figs > div:last-child{border-top-color:var(--granate-700)}
.frm-figs dt{font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-bottom:2px}
.frm-figs dd{margin:0;font-family:var(--font-display);font-weight:var(--fw-light);font-size:clamp(1.5rem,2.2vw,2rem);color:var(--navy-700);line-height:1;letter-spacing:var(--tracking-tighter);font-variant-numeric:tabular-nums}
.frm-figs dd.up{color:var(--granate-700)}
.frm-temas{list-style:none;margin:0 0 var(--space-7);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.frm-temas li{font-size:var(--text-xs);color:var(--navy-700);background:var(--paper);border:1px solid var(--navy-200);padding:6px 12px;letter-spacing:.01em}
.ses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.ses{background:var(--paper);border:1px solid var(--border);display:flex;flex-direction:column;transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);box-shadow:0 1px 2px rgba(14,47,79,.05)}
.ses:hover{border-color:var(--navy-700);transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(14,47,79,.35)}
.ses__ph{position:relative;width:100%;aspect-ratio:16/10;background:var(--neutral-100);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ses__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ses__ph-empty{font-size:var(--text-xs);color:var(--navy-600)}
.ses__body{padding:var(--space-5)}
.ses__meta{font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--granate-700);margin:0 0 var(--space-3);font-weight:var(--fw-medium)}
.ses__t{font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--navy-700);margin:0 0 var(--space-2);line-height:var(--leading-tight)}
.ses__d{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:var(--leading-normal)}
.frm-note{font-size:var(--text-xs);color:var(--text-muted);margin:var(--space-7) 0 0;padding-top:var(--space-5);border-top:1px solid var(--border);max-width:60ch;line-height:var(--leading-normal)}

/* ---------- Únete ---------- */
.join{background:radial-gradient(120% 160% at 88% 110%,var(--navy-600) 0%,var(--navy-700) 45%,var(--navy-900) 100%);padding:var(--space-10) 0;position:relative;overflow:hidden}
.join::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%)}
.join__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-9);align-items:center}
.join__eb{display:block;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--granate-300);margin-bottom:var(--space-4)}
.join__t{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:var(--fw-light);color:#fff;line-height:1.1;letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4)}
.join__lead{font-size:var(--text-md);color:var(--navy-200);line-height:var(--leading-relaxed);max-width:48ch;margin:0 0 var(--space-6)}
.join__act{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.join__note{font-size:var(--text-sm);color:var(--navy-200)}
.join__note b{color:#fff;font-weight:var(--fw-medium)}
.join__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.join--page{padding:var(--space-11) 0}
.join--page .join__in{grid-template-columns:1fr;max-width:none;margin:0;text-align:center}
.join--page .join__act{justify-content:center}
.join--page .join__lead{max-width:none;margin-left:auto;margin-right:auto}
.vent{display:flex;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:1px solid rgba(255,255,255,.12)}
.vent:last-child{border-bottom:0}
.vent__n{font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--text-xl);color:var(--granate-300);flex:none;width:40px;line-height:1.2}
.vent__t{font-size:var(--text-md);font-weight:var(--fw-medium);color:#fff;margin:0 0 var(--space-2)}
.vent__d{font-size:var(--text-sm);color:var(--navy-200);margin:0;line-height:var(--leading-normal)}

/* ---------- Contacto ---------- */
.cnt{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:start}
.cnt__t{font-size:var(--text-4xl);font-weight:var(--fw-light);color:#fff;line-height:1.1;margin:var(--space-3) 0 var(--space-4);letter-spacing:var(--tracking-tight)}
.cnt__lead{font-size:var(--text-md);color:var(--navy-200);line-height:var(--leading-relaxed);max-width:46ch}
.cnt__meta{margin:var(--space-7) 0 0;display:flex;flex-direction:column;gap:var(--space-4)}
.cnt__meta div{display:flex;gap:var(--space-4);font-size:var(--text-sm)}
.cnt__meta dt{color:var(--granate-300);font-weight:var(--fw-medium);flex:none;width:64px}
.cnt__meta dd{margin:0;color:var(--navy-100);line-height:var(--leading-normal)}
.cnt__meta dd a{color:var(--navy-100);text-decoration:none}
.cnt__meta dd a:hover{color:#fff}
.cnt__card{background:var(--paper);padding:var(--space-6);border:1px solid var(--navy-600);box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
.cnt__switch{display:flex;gap:6px;padding:4px;margin-bottom:var(--space-5);background:var(--neutral-50);border-radius:0}
.cnt__switch button{flex:1 1 0;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--text-muted);background:transparent;border:0;border-radius:0;padding:10px 8px;cursor:pointer;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.cnt__switch button.is-on{background:var(--granate-700);color:#fff}
.cnt__switch--perfil{flex-wrap:wrap}
.cnt__switch--perfil button{flex:1 1 auto;min-width:0}
.cnt__ctx{font-size:var(--text-sm);color:var(--text-muted);margin:0 0 var(--space-5)}
.cnt__form{display:flex;flex-direction:column;gap:var(--space-4)}
.cnt__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

/* ---------- Legal ---------- */
.legal{max-width:74ch;margin:0 auto}
.legal h2{font-size:var(--text-2xl);font-weight:var(--fw-medium);color:var(--navy-700);margin:var(--space-9) 0 var(--space-4)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:var(--text-md);font-weight:var(--fw-semibold);color:var(--navy-700);margin:var(--space-6) 0 var(--space-2)}
.legal p{font-size:var(--text-sm);color:var(--grafito);line-height:var(--leading-relaxed);margin:0 0 var(--space-4)}
.legal ul{margin:0 0 var(--space-4);padding-left:1.3em;font-size:var(--text-sm);color:var(--grafito);line-height:var(--leading-relaxed)}
.legal li{margin-bottom:var(--space-2)}
.legal .updated{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-8)}

/* ---------- Aparición al hacer scroll ----------
   Solo se oculta si hay JavaScript para volver a mostrarlo (clase .js en
   <html>). Sin JS, el contenido se ve desde el primer momento. */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (max-width:1000px){
  .hero__in{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
  .figs-top{grid-template-columns:1fr;gap:var(--space-7)}
  .cli{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-7) 0}
  .cli:nth-child(even){padding:var(--space-7) calc(50vw - 50%)}
  .cli__media,.cli:nth-child(even) .cli__media{order:1}
  .cli__info,.cli:nth-child(even) .cli__info{order:2}
  .cli-feed{gap:var(--space-8)}
  .cli-tot{grid-template-columns:repeat(2,1fr)}
  .srv-grid{grid-template-columns:repeat(2,1fr)}
  .srv{border-right:0;border-bottom:1px solid var(--border);padding-right:var(--space-5)}
  .srv:nth-child(2n){padding-left:var(--space-5)}
  .srv:nth-child(2n+1){padding-left:0}
  .frm-top{grid-template-columns:1fr;gap:var(--space-6)}
  .ses-grid{grid-template-columns:repeat(2,1fr)}
  .join__in,.cnt{grid-template-columns:1fr;gap:var(--space-7)}
}
@media (max-width:620px){
  .container,.bc{padding-left:var(--space-4);padding-right:var(--space-4)}
  .bf-grid,.srv-grid,.cli-tot,.ses-grid,.cnt__row{grid-template-columns:1fr}
  .srv{padding-left:0!important;padding-right:0}
  .hero__act{width:100%}
  .tk__i{padding:var(--space-3) var(--space-4)}
  .cli__figs{grid-template-columns:1fr!important}
  .cli__figs > div{border-left:0;padding-left:0;padding-top:var(--space-2);border-top:1px solid var(--border)}
  .cli__figs > div:first-child{border-top:0;padding-top:0}
}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .tk__track{animation:none}
  .sec__more span{transition:none}
  .proy__txt{opacity:1!important;transform:none!important}
  .js .proy.is-in .proy__bg img[data-loaded]{animation:none}
}

/* ---------- Proyectos: bloques a sangre, coherentes con el hero ---------- */
.proy-feed{display:flex;flex-direction:column}
.proy{position:relative;overflow:hidden;min-height:86vh;display:flex;align-items:flex-end}
.proy__bg{position:absolute;inset:0;z-index:0;background:var(--navy-800,#0a2136)}
.proy__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s var(--ease-out)}
.proy__bg img[data-loaded]{opacity:1}
.js .proy.is-in .proy__bg img[data-loaded]{animation:heroZoom 20s ease-out forwards}
.proy__wm{position:absolute;right:-8%;top:50%;transform:translateY(-50%);height:150%;width:auto;opacity:.05;z-index:1;pointer-events:none}
.proy__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.05) 62%,rgba(0,0,0,0) 80%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 78%)}
.proy__in{position:relative;z-index:2;width:100%;padding:var(--space-10) 0}
.proy__txt{max-width:760px}
.proy__estado{display:inline-flex;padding:6px 14px;background:var(--granate-700);color:#fff;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin:0 0 var(--space-4)}
.proy__t{font-family:var(--font-display);font-weight:var(--fw-light);font-size:clamp(2rem,4vw,3.4rem);color:#fff;line-height:1.05;letter-spacing:var(--tracking-tight);margin:0 0 var(--space-3);text-wrap:balance}
.proy__meta{font-size:var(--text-md);color:var(--navy-100);margin:0 0 var(--space-5)}
.proy__group{margin:0 0 var(--space-4)}
.proy__group-lbl{display:block;font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--navy-200);margin:0 0 8px}
.proy__tags{display:flex;flex-wrap:wrap;gap:8px}
.proy__tag{font-size:var(--text-xs);padding:5px 13px;border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:var(--fw-medium);background:rgba(255,255,255,.08)}
.proy__desc{font-size:var(--text-md);color:var(--navy-100);line-height:var(--leading-relaxed);max-width:64ch;margin:var(--space-4) 0 0}
.proy__stats{display:flex;gap:var(--space-7);flex-wrap:wrap;margin:var(--space-5) 0 0;padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.18)}
.proy__stats div{display:flex;flex-direction:column;gap:2px}
.proy__stats dt{font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--navy-200)}
.proy__stats dd{margin:0;font-family:var(--font-display);font-weight:var(--fw-light);font-size:var(--text-xl);color:#fff}
.js .proy__txt{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.7,.2,1),transform .8s cubic-bezier(.22,.7,.2,1)}
.js .proy.is-in .proy__txt{opacity:1;transform:none}
@media (max-width:768px){
  .proy{min-height:70vh}
  .proy__t{font-size:clamp(1.7rem,6vw,2.4rem)}
}

/* ============================================================================
   Home rediseñada — hero con revelado por palabras, entregables/especialidades
   /perfiles con aparición escalonada, bloque de oficina con parallax y mapa
   de zona con trazado progresivo. Todo CSS + IntersectionObserver, respeta
   prefers-reduced-motion y se ve completo sin JavaScript.
   ========================================================================== */

/* ---------- Hero: revelado palabra a palabra ---------- */
.hero__t2{font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:700;color:#fff;line-height:1.04;letter-spacing:var(--tracking-tight);margin:0;max-width:none;text-wrap:balance}
.hw{display:inline-block}
.hw--accent{color:var(--granate-300)}
.js .hw{opacity:0;transform:translateY(10px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.js [data-hero-words].is-in .hw{opacity:1;transform:none}
.js [data-hero-words].is-in .hw:nth-child(1){transition-delay:0ms}
.js [data-hero-words].is-in .hw:nth-child(2){transition-delay:60ms}
.js [data-hero-words].is-in .hw:nth-child(3){transition-delay:120ms}
.js [data-hero-words].is-in .hw:nth-child(4){transition-delay:180ms}
.js [data-hero-words].is-in .hw:nth-child(5){transition-delay:240ms}
.js [data-hero-words].is-in .hw:nth-child(6){transition-delay:300ms}
.js [data-hero-words].is-in .hw:nth-child(7){transition-delay:360ms}
.js [data-hero-words].is-in .hw:nth-child(8){transition-delay:420ms}
.js [data-hero-words].is-in .hw:nth-child(9){transition-delay:480ms}
.js [data-hero-words].is-in .hw:nth-child(n+10){transition-delay:540ms}

/* ---------- Aparición escalonada de hijos ---------- */
.js [data-stagger] > *{opacity:0;transform:translateY(18px);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1)}
.js [data-reveal].is-in[data-stagger] > *,
.js [data-reveal].is-in [data-stagger] > *{opacity:1;transform:none}
[data-stagger] > *:nth-child(1){transition-delay:0ms}
[data-stagger] > *:nth-child(2){transition-delay:80ms}
[data-stagger] > *:nth-child(3){transition-delay:160ms}
[data-stagger] > *:nth-child(4){transition-delay:240ms}
[data-stagger] > *:nth-child(5){transition-delay:320ms}
[data-stagger] > *:nth-child(6){transition-delay:400ms}

/* ---------- Especialidades ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4)}
.spec{background:var(--paper);border:1px solid var(--border);padding:var(--space-5);transition:border-color .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1)}
.spec:hover{border-color:var(--navy-700);transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(14,47,79,.35)}
.spec__icon{width:38px;height:38px;color:var(--navy-700);margin-bottom:var(--space-4);transition:color .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1)}
.spec:hover .spec__icon{color:var(--granate-700);transform:scale(1.08)}
.spec__t{font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--navy-700);margin:0 0 var(--space-2)}
.spec__d{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:var(--leading-normal)}

/* ---------- Qué hacemos + Especialidades, una junto a la otra ---------- */
.qh-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:start}
.qh-col{display:flex;flex-direction:column}
.qh-split .srv-grid{display:flex;flex-direction:column;grid-template-columns:1fr;border-top:1px solid var(--border)}
.qh-split .srv{border-right:0;border-bottom:1px solid var(--border);padding:var(--space-3) 0}
.qh-split .srv:last-child{border-bottom:0}
.qh-split .srv__d{max-width:none}
.qh-split .srv__n{color:var(--granate-700)}
.qh-split .spec-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){
  .qh-split{grid-template-columns:1fr;gap:var(--space-8)}
}
@media (max-width:620px){
  .qh-split .spec-grid{grid-template-columns:1fr}
}

/* ---------- Para quién trabajamos ---------- */
.perfil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.perfil{display:block;cursor:default;background:var(--paper);border:1px solid transparent;border-top:3px solid var(--granate-700);padding:var(--space-5);text-decoration:none;box-shadow:0 12px 28px -16px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),border-color .35s cubic-bezier(.4,0,.2,1)}
a.perfil[href]{cursor:pointer}
a.perfil[href]:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 40px -16px rgba(0,0,0,.5);border-color:var(--granate-700)}
.perfil__cta{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-4);font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--granate-700)}
.perfil__cta span{transition:transform .3s cubic-bezier(.4,0,.2,1)}
a.perfil:hover .perfil__cta span{transform:translateX(4px)}
.perfil__t{font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--navy-700);margin:0 0 var(--space-2)}
.perfil__d{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:var(--leading-relaxed)}

/* ---------- Dónde estamos: oficina, dirección y mapa de zona ---------- */
.oficina{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-9);align-items:start}
.oficina__photos{display:block}
.oficina__ph{position:relative;overflow:hidden;background:var(--neutral-100);border:1px solid var(--border)}
.oficina__ph--despacho{aspect-ratio:4/3}
.oficina__ph img{width:100%;height:118%;position:relative;top:-9%;object-fit:cover;display:block;will-change:transform}
.oficina__ph-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);color:var(--navy-400);background:var(--neutral-100)}
.oficina__ph-empty svg{width:34px;height:34px}
.oficina__ph-empty span{font-size:var(--text-xs);color:var(--text-muted)}
.oficina__info{display:flex;flex-direction:column;gap:var(--space-7)}
.oficina__addr-k{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--granate-700);margin:0 0 var(--space-3)}
.oficina__addr{font-size:var(--text-md);color:var(--navy-700);margin:0;line-height:var(--leading-relaxed)}
.oficina__zona-list{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.oficina__zona-list li{font-size:var(--text-xs);color:var(--navy-700);border:1px solid var(--navy-200);padding:5px 12px}
.zona-map{width:100%;height:auto;max-width:280px}
.zona-map path{fill:var(--navy-100);stroke:var(--navy-700);stroke-width:1.2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1),fill .5s cubic-bezier(.4,0,.2,1)}
.zona-map.is-in path{stroke-dashoffset:0}
.zona-map.is-in path:nth-of-type(1){transition-delay:0ms}
.zona-map.is-in path:nth-of-type(2){transition-delay:120ms}
.zona-map.is-in path:nth-of-type(3){transition-delay:240ms}
.zona-map.is-in path:nth-of-type(4){transition-delay:360ms}
.zona-map.is-in path:nth-of-type(5){transition-delay:480ms}
.zona-map:not(.is-in) path{fill:transparent}

/* ---------- Cierre ---------- */
.cierre{background:var(--navy-700);padding:var(--space-11) 0;text-align:center}
.cierre__lema{font-family:var(--font-display);font-weight:var(--fw-light);font-size:clamp(2.2rem,4vw,3.2rem);color:#fff;margin:0 0 var(--space-6);letter-spacing:var(--tracking-tight)}

@media (max-width:1000px){
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .perfil-grid{grid-template-columns:1fr 1fr}
  .oficina{grid-template-columns:1fr;gap:var(--space-7)}
  .oficina__photos{grid-template-columns:1fr 1.2fr}
}
@media (max-width:620px){
  .spec-grid,.perfil-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){
  .hw,[data-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  .zona-map path{transition:none;stroke-dashoffset:0;fill:var(--navy-100)}
  .oficina__ph img{transform:none!important}
}

#contacto-form{background:var(--paper) radial-gradient(ellipse 55% 50% at 12% 15%,var(--navy-50) 0%,transparent 62%),radial-gradient(ellipse 48% 42% at 88% 78%,var(--granate-50) 0%,transparent 58%),radial-gradient(ellipse 42% 50% at 68% 8%,var(--navy-50) 0%,transparent 60%),radial-gradient(ellipse 40% 45% at 25% 95%,var(--granate-50) 0%,transparent 60%)}
#contacto-form .inn-eyebrow--on-dark{color:var(--granate-700)}
#contacto-form .cnt__t{color:var(--navy-800)}
#contacto-form .cnt__lead{color:var(--text-muted)}
#contacto-form .vent{border-bottom:1px solid var(--border)}
#contacto-form .vent__t{color:var(--navy-800)}
#contacto-form .vent__d{color:var(--text-muted)}
#contacto-form .join__note{color:var(--text-muted)}
#contacto-form .join__note b{color:var(--navy-800)}
#contacto-form .cnt__meta dt{color:var(--granate-700)}
#contacto-form .cnt__meta dd{color:var(--grafito)}
#contacto-form .cnt__meta dd a{color:var(--navy-700)}
#contacto-form .cnt__meta dd a:hover{color:var(--granate-700)}
#contacto-form .cnt__card{border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(14,47,79,.18)}

/* ===== Botones · diseño común (sin animaciones al pasar el ratón) ===== */
.inn-btn,.inn-btn--accent,.cta-b--main,.dm-go,.qt-btn{background:#8B1E2D;color:#fff;border:1.5px solid #8B1E2D;border-radius:0;font-weight:500;transform:none;box-shadow:none;overflow:visible;transition:background-color .2s ease,border-color .2s ease}
.inn-btn:hover,.inn-btn:focus,.inn-btn:active,.inn-btn--accent:hover,.inn-btn--accent:active,.cta-b--main:hover,.cta-b--main:active,.dm-go:hover,.dm-go:active,.qt-btn:hover{background:#74192A;border-color:#74192A;color:#fff;transform:none;box-shadow:none;text-decoration:none}
.inn-btn--accent::before{content:none;display:none;animation:none}
.inn-btn:focus-visible,.cta-b--main:focus-visible,.dm-go:focus-visible{outline:2px solid currentColor;outline-offset:3px;box-shadow:none}
.inn-btn--ghost,.hero__act .inn-btn--ghost,.cta-b--line{background:transparent;color:#fff;border:1.5px solid #fff}
.inn-btn--ghost:hover,.inn-btn--ghost:active,.hero__act .inn-btn--ghost:hover,.cta-b--line:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ===== Cabecera · herramienta de dimensionado como acción principal ===== */
.inn-hd__tool{gap:.5em}
.inn-hd__tool svg{flex:none}
.inn-hd__cta--2,.inn-hd__cta--2:focus,.inn-hd__menu .inn-hd__cta--2{background:transparent;color:#0F2D50;border-color:rgba(15,45,80,.4)}
.inn-hd__cta--2:hover,.inn-hd__cta--2:active{background:rgba(15,45,80,.06);color:#0F2D50;border-color:#0F2D50}
.hero__tool{display:inline-flex;align-items:center;gap:.5em;margin-top:var(--space-5);color:#fff;font-size:var(--text-sm);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px}
.hero__tool:hover{color:#fff;border-bottom-color:#fff}
@media (max-width:1080px){.inn-hd__nav~.inn-hd__cta--2{display:none}}
.inn-hd__menu .inn-hd__tool,.inn-hd__menu .inn-hd__tool:hover,.inn-hd__menu .inn-hd__tool:focus{color:#fff;justify-content:center}
.inn-hd__menu .inn-hd__cta--2,.inn-hd__menu .inn-hd__cta--2:hover{color:#0F2D50;border:1.5px solid rgba(15,45,80,.4);justify-content:center}
/* ===== Proyectos · rejilla de casillas ===== */
.pgr-wrap{padding:var(--space-8) 0 var(--space-9);background:#F5F7FA}
.pgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.pgr-empty{grid-column:1/-1;margin:0;padding:56px 24px;text-align:center;color:#4A5B6E;font-size:var(--text-md);border:1px dashed rgba(15,45,80,.25);border-radius:0;background:#fff}
.pgc{display:flex;flex-direction:column;background:#fff;border-radius:0;overflow:hidden;box-shadow:0 1px 2px rgba(15,45,80,.06),0 12px 32px -18px rgba(15,45,80,.28);transition:box-shadow .4s ease,transform .4s ease}
.pgc:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,45,80,.06),0 20px 40px -18px rgba(15,45,80,.36)}
.pgc__ph{position:relative;aspect-ratio:4/3;background:#0F2D50;overflow:hidden}
.pgc__ph .proy__wm{position:absolute;left:50%;top:50%;width:34px;height:auto;transform:translate(-50%,-50%);opacity:.35}
.pgc__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .8s ease}
.pgc__ph img[data-loaded]{opacity:1}
.pgc:hover .pgc__ph img{transform:scale(1.03)}
.pgc__st{position:absolute;left:14px;top:14px;padding:5px 10px;border-radius:0;font-size:12px;font-weight:500;letter-spacing:.02em;background:#fff;color:#0F2D50}
.pgc__st--ejecucion{background:#8B1E2D;color:#fff}
.pgc__b{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px}
.pgc__m{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8B1E2D}
.pgc__t{margin:0;font-size:clamp(1.15rem,1rem + .4vw,1.35rem);font-weight:500;line-height:1.3;color:#0F2D50;text-wrap:pretty}
.pgc__d{margin:0;font-size:var(--text-sm);line-height:1.6;color:#3E4F62;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.pgc__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pgc__tags span{font-size:12px;padding:3px 9px;border-radius:0;background:#EEF2F7;color:#0F2D50}
/* ===== Intro del logotipo: la frase ocupa sola la fila, se contrae a INPRIA y viaja al logotipo ===== */
html.wmi-pre .inn-hd__in>*{opacity:0!important;transition:none!important}
html.wmi-pre .inn-hd__in *{opacity:0!important;transition:none!important}
.inn-hd__in{position:relative}
.wmo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3}
.wmo-w{display:inline-block;white-space:pre;color:#0F2D50;font-size:clamp(15px,2.1vw,26px);line-height:1.4;transform-origin:0 50%;opacity:0;transform:translateY(6px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.65,0,.35,1)}
.wmo.is-in .wmo-w{opacity:1;transform:none}
.wmo-k{color:#0F2D50}
.wmo-d{display:inline-block;vertical-align:top;overflow:hidden;overflow:clip visible;white-space:pre;color:#0F2D50;opacity:.5;transition:width 1.1s cubic-bezier(.65,0,.35,1),opacity .8s ease}
.wmo.is-cut .wmo-d{opacity:0}
.inn-hd__in>:not(.inn-hd__logo):not(.wmo):not(.wml){transition:opacity 1s ease}
.inn-hd__logo svg,.inn-hd__wm i{transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.inn-hd__in.wmi-run>:not(.inn-hd__logo):not(.wmo):not(.wml){opacity:0;pointer-events:none}
.inn-hd__in.wmi-run .inn-hd__wm b{opacity:0}
.inn-hd__in.wmi-run:not(.wmi-mark) .inn-hd__logo svg{opacity:0;transform:scale(.85)}
.inn-hd__in.wmi-run .inn-hd__wm i{opacity:0;transform:translateX(-8px)}
.inn-hd__in.wmi-wait>:not(.inn-hd__logo):not(.wmo):not(.wml){opacity:0;pointer-events:none}
.inn-hd__in.wmi-wait .inn-hd__wm i{opacity:0;transform:translateX(-8px)}
.inn-hd__in.wmi-run:not(.wmi-mark) .inn-hd__logo svg{transform:none}
/* Titulares de páginas interiores: anclados al margen izquierdo de la página */
.pg-hero__in.container{max-width:none;margin:0;padding:var(--space-9) clamp(24px,5vw,80px)}

/* Menú: el granate sube desde abajo al pasar o pulsar */
.inn-hd__nav>a,.inn-hd__navitem>a{background:linear-gradient(var(--granate-100),var(--granate-100)) no-repeat left bottom/100% 0;transition:background-size .42s cubic-bezier(.22,.7,.2,1),color .3s ease}
.inn-hd .inn-hd__nav>a:hover,.inn-hd .inn-hd__navitem:hover>a{background:linear-gradient(var(--granate-100),var(--granate-100)) no-repeat left bottom/100% 100%;color:var(--granate-800)}.inn-hd__nav>a:focus{outline:none}.inn-hd__nav>a:focus-visible{outline:2px solid var(--granate-700);outline-offset:-2px}
.inn-hd__nav>a::before,.inn-hd__navitem>a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--granate-700);transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.7,.2,1)}
.inn-hd__navitem>a{position:relative}
.inn-hd__nav>a:hover::before,.inn-hd__navitem:hover>a::before{transform:scaleX(1)}.inn-hd__nav a[aria-current="page"]::before{display:none}
.inn-hd__nav>a:active,.inn-hd__navitem>a:active{background-image:linear-gradient(var(--granate-200,#F1D3D8),var(--granate-200,#F1D3D8));transition-duration:.15s}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.inn-hd__nav>a,.inn-hd__navitem>a,.inn-hd__nav>a::before,.inn-hd__navitem>a::before{transition:none}}

/* Pantallas grandes: la web escala con el ancho en lugar de quedarse en 1240px centrada */
@media (min-width:1500px){
html{font-size:min(1.111vw,24px)}
.container,.inn-hd__in,.hero__in{max-width:min(86vw,2200px)}
}

/* ===== Intro del lema ===== */
.wml{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;z-index:3}
.wml-t{display:flex;font-family:Poppins,sans-serif;font-weight:300;font-size:clamp(12px,1.45vw,19px);letter-spacing:.42em;margin-right:-.42em;color:#0F2D50;white-space:nowrap;overflow:hidden;padding:2px 0}
.wml-c{display:inline-block;opacity:0;transform:translateY(80%);filter:blur(3px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.wml.is-in .wml-c{opacity:1;transform:none;filter:none}
.wml.is-out .wml-c{opacity:0;transform:translateY(-60%);filter:blur(3px);transition-duration:.6s}
.wml-l{display:block;width:min(240px,40%);height:1px;background:#8B1E2D;transform:scaleX(0);transform-origin:50% 50%;transition:transform 1.4s cubic-bezier(.65,0,.35,1) .5s}
.wml.is-in .wml-l{transform:scaleX(1)}
.wml.is-out .wml-l{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.65,0,.35,1) 0s}
.inn-hd__in.wmi-run .inn-hd__wm b{transition:opacity .9s ease}
.inn-hd__in.wmi-run.wmi-word .inn-hd__wm b{opacity:1}
@media (max-width:640px){.wml-t{letter-spacing:.2em;margin-right:-.2em;font-size:12px}}

/*radio-circ*/.inn-check__box--radio{border-radius:50%}

/* ===== Menú móvil: botón con texto y panel a pantalla completa ===== */
@media (max-width:860px){
.inn-hd__burger{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 14px;border:1.5px solid rgba(15,45,80,.22);background:#fff;color:#0F2D50;font-family:var(--font-sans,Poppins,sans-serif);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-radius:0}
.inn-hd__burger[aria-expanded="true"]{background:#0F2D50;border-color:#0F2D50;color:#fff}
.menu-open{overflow:hidden}
.menu-open .inn-hd{background:#fff;border-bottom-color:#E3E8EF}
.inn-hd__menu:not([hidden]){display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;height:calc(100svh - var(--hdb,68px));overflow-y:auto;overscroll-behavior:contain;background:#0F2D50;padding:8px 24px calc(24px + env(safe-area-inset-bottom));border:0;counter-reset:mn;animation:mnIn .35s cubic-bezier(.22,.61,.36,1) both}
.inn-hd__menu>a:not(.inn-btn){counter-increment:mn;display:flex;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;font-family:var(--font-display,Poppins,sans-serif);font-size:1.6rem;font-weight:300;line-height:1.2;text-decoration:none}
.inn-hd__menu>a:not(.inn-btn)::before{content:counter(mn,decimal-leading-zero);font-size:.75rem;font-weight:500;letter-spacing:.12em;color:#E39AA5;min-width:22px}
.inn-hd__menu>a:not(.inn-btn)::after{content:"→";margin-left:auto;font-size:1.1rem;color:rgba(255,255,255,.45)}
.inn-hd__menu>a[aria-current="page"]:not(.inn-btn){color:#fff;font-weight:500}
.inn-hd__menu>a[aria-current="page"]:not(.inn-btn)::after{content:"";width:8px;height:8px;align-self:center;background:#8B1E2D}
.inn-hd__menu .inn-btn{height:52px;margin-top:12px;justify-content:center;font-size:.95rem}
.inn-hd__menu>a:not(.inn-btn)+.inn-btn{margin-top:28px}
.inn-hd__menu .inn-hd__tool,.inn-hd__menu .inn-hd__tool:hover,.inn-hd__menu .inn-hd__tool:focus{background:#8B1E2D;border-color:#8B1E2D;color:#fff}
.inn-hd__menu .inn-hd__cta--2,.inn-hd__menu .inn-hd__cta--2:hover,.inn-hd__menu .inn-hd__cta--2:focus{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.inn-hd__menu-mail{margin:auto 0 0;padding-top:28px;font-size:.9rem}
.inn-hd__menu-mail a{color:#C9D3E0}
}
.inn-hd__menu-mail{display:none}
@media (max-width:860px){.inn-hd__menu:not([hidden]) .inn-hd__menu-mail{display:block}}
@keyframes mnIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce) and (min-width:100000px){.inn-hd__menu:not([hidden]){animation:none}}
.inn-hd__menu>a[hidden]{display:none!important}