/* /assets/css/tokens/fonts.css */
/* Montserrat — the brand typeface named in the Manual de Identidad
   (Julieta Ulanovsky, 2011). Self-hosted: the design system loaded it from
   Google Fonts, which is one external request the theme does not make. */
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /assets/css/tokens/colors.css */
:root{
  /* Base brand palette — measured from the Manual de Identidad artwork */
  --azul-900:#0B1226;
  --azul-800:#101B39;      /* AZUL institucional (manual: R26 G28 B58 / C100 M93 Y40 K55) */
  --azul-700:#1B2B54;
  --azul-600:#27406F;
  --azul-300:#8794AF;
  --azul-100:#DDE2EC;
  --azul-050:#EFF2F7;

  --verde-800:#153A1B;
  --verde-700:#215628;     /* VERDE ingeniería (manual: R31 G86 B39 / C87 M39 Y100 K39) */
  --verde-600:#2E7136;
  --verde-300:#8CB593;
  --verde-100:#DEEBE0;

  --marron-900:#241010;    /* MARRÓN tierra (manual: R48 G25 B16 / C53 M75 Y73 K82) */
  --marron-700:#3D1E1A;
  --marron-300:#A98D86;
  --marron-100:#EBE0DD;

  /* Neutrals — the grey used for device/frame furniture in the manual, plus paper tints */
  --gris-500:#A6B2B1;
  --gris-400:#C3CBD4;
  --gris-300:#DCE1E8;
  --gris-200:#E8EBF0;
  --gris-100:#F4F6F9;
  --blanco:#FFFFFF;
  --negro:#020407;

  /* Semantic aliases */
  --text-strong:var(--azul-800);
  --text-body:#2A3247;
  --text-muted:#5C6579;
  --text-inverse:var(--blanco);
  --text-on-verde:var(--blanco);
  --text-link:var(--verde-700);
  --text-link-hover:var(--azul-800);

  --surface-page:var(--blanco);
  --surface-subtle:var(--gris-100);
  --surface-card:var(--blanco);
  --surface-inverse:var(--azul-800);
  --surface-inverse-deep:var(--azul-900);
  --surface-accent:var(--verde-700);
  --surface-earth:var(--marron-900);

  --border-hairline:var(--gris-300);
  --border-strong:var(--gris-500);
  --border-inverse:rgba(255,255,255,.24);

  --action-primary:var(--verde-700);
  --action-primary-hover:var(--verde-800);
  --action-secondary:var(--azul-800);
  --action-secondary-hover:var(--azul-900);
  --focus-ring:var(--verde-600);

  --state-success:var(--verde-700);
  --state-warning:#8A5A12;
  --state-danger:#8C2020;
  --state-info:var(--azul-600);

  /* Protection gradient for text over photography */
  --scrim-navy:linear-gradient(90deg,rgba(16,27,57,.92) 0%,rgba(16,27,57,.72) 45%,rgba(16,27,57,0) 100%); /* @kind color */
  --scrim-bottom:linear-gradient(180deg,rgba(2,4,7,0) 40%,rgba(2,4,7,.78) 100%); /* @kind color */
}

/* /assets/css/tokens/typography.css */
:root{
  --font-core:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-core);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  --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 */
  --fw-extrabold:800; /* @kind font */

  --fs-display-xl:64px;
  --fs-display:52px;
  --fs-h1:40px;
  --fs-h2:30px;
  --fs-h3:22px;
  --fs-h4:18px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-eyebrow:12px;

  --lh-tight:1.06; /* @kind font */
  --lh-heading:1.18; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-loose:1.75; /* @kind font */

  --ls-display:-0.02em; /* @kind font */
  --ls-heading:-0.01em; /* @kind font */
  --ls-body:0em; /* @kind font */
  --ls-eyebrow:0.18em; /* @kind font */   /* "SERVICIOS DE INGENIERÍA" descriptor spacing */
  --ls-button:0.04em; /* @kind font */

  /* Semantic type roles */
  --type-display:var(--fw-extrabold) var(--fs-display)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-h1:var(--fw-extrabold) var(--fs-h1)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3:var(--fw-semibold) var(--fs-h3)/1.3 var(--font-core); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-core); /* @kind font */
  --type-body-lg:var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-core); /* @kind font */
  --type-eyebrow:var(--fw-semibold) var(--fs-eyebrow)/1.2 var(--font-core); /* @kind font */
  --type-button:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-core); /* @kind font */
}

/* /assets/css/tokens/spacing.css */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter:24px;
  --section-y:96px;
  --section-y-sm:64px;
  --container-max:1280px;
  --container-narrow:760px;
  --header-h:88px;
  --bar-h:36px;          /* thin utility bar above the main nav */
}

/* /assets/css/tokens/effects.css */
:root{
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --radius-pill:999px;

  --border-w:1px; /* @kind spacing */
  --border-w-thick:3px; /* @kind spacing */
  --rule-accent:3px solid var(--verde-700); /* @kind other */

  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(16,27,57,.08);
  --shadow-card:0 2px 6px rgba(16,27,57,.08);
  --shadow-raised:0 10px 28px rgba(16,27,57,.14);
  --shadow-header:0 1px 0 var(--gris-300);
  --shadow-inset-top:inset 0 3px 0 var(--verde-700);

  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */

  --pattern-ceiba:url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/tokens/../assets/pattern-ceiba-tile.png"); /* @kind other */
  --pattern-size:160px; /* @kind spacing */
  --blur-glass:saturate(140%) blur(12px); /* @kind other */
}

/* /assets/css/site.css */
/* ==========================================================================
   La Ceiba C.A. — site layer
   Built on top of the design-system tokens. Mobile-first: every breakpoint
   below uses min-width, so the base declarations are the phone layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fluid type — replaces the fixed --fs-* tokens with clamp() ranges.
   Min values are the phone sizes, max values are the DS desktop sizes.
   Body copy is deliberately NOT fluid: 16px everywhere.
   -------------------------------------------------------------------------- */
:root{
  --fs-display-xl:clamp(40px, 7.4vw, 64px);
  --fs-display:clamp(34px, 6vw, 52px);
  --fs-h1:clamp(28px, 4.6vw, 40px);
  --fs-h2:clamp(23px, 3.4vw, 30px);
  --fs-h3:clamp(19px, 2vw, 22px);
  --fs-h4:clamp(17px, 1.6vw, 18px);

  /* Section rhythm shrinks on phones — 96px of air reads as emptiness there */
  --section-y:56px;
  --section-y-sm:40px;
  --pad-x:16px;
  --header-h:64px;

  --pattern-ceiba:url("https://inglaceiba.com/wp-content/themes/la-ceiba/assets/css/../img/pattern-ceiba-tile.png");
}

@media (min-width:480px){ :root{ --pad-x:24px } }
@media (min-width:768px){ :root{ --section-y:72px; --section-y-sm:52px } }
@media (min-width:1024px){
  :root{ --section-y:96px; --section-y-sm:64px; --pad-x:32px; --header-h:88px }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
/* Must outrank `img,svg{display:block}` below, or [hidden] icons stay visible */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font:var(--type-body); font-family:var(--font-core);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block }
a{ color:var(--text-link); text-decoration:none }
a:hover{ color:var(--text-link-hover); text-decoration:underline }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
ul{ padding:0; list-style:none }
button{ font:inherit; color:inherit }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:2px;
}

h1{ font:var(--fw-extrabold) var(--fs-h1)/var(--lh-heading) var(--font-display);
    letter-spacing:var(--ls-heading); color:var(--text-strong) }
h2{ font:var(--fw-extrabold) var(--fs-h2)/var(--lh-heading) var(--font-display);
    letter-spacing:var(--ls-heading); color:var(--text-strong) }
h3{ font:var(--fw-semibold) var(--fs-h3)/1.3 var(--font-core); color:var(--text-strong) }
h4{ font:var(--fw-semibold) var(--fs-h4)/1.35 var(--font-core); color:var(--text-strong) }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--pad-x) }
.section{ padding-block:var(--section-y) }
.section--sm{ padding-block:var(--section-y-sm) }
.section--subtle{ background:var(--surface-subtle) }
.stack{ display:flex; flex-direction:column; gap:var(--space-6) }
.stack--lg{ gap:var(--space-7) }

/* One grid rule for the whole site: 1 col on phones, 2 at md, 3 at lg. */
.grid{ display:grid; gap:var(--space-5); grid-template-columns:1fr }
@media (min-width:768px){ .grid--2,.grid--3{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){
  .grid--3{ grid-template-columns:repeat(3,1fr) }
}

.eyebrow{
  font:var(--type-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--verde-700); margin-bottom:var(--space-3);
}
.eyebrow--inverse{ color:var(--verde-300) }
.lede{ font:var(--type-body-lg); font-family:var(--font-core); max-width:52ch; color:var(--text-muted) }
.prose{ max-width:70ch }
.prose p + p{ margin-top:var(--space-4) }

.section-heading{ max-width:34ch }
.section-heading .lede{ margin-top:var(--space-4) }

/* Icon helper — Lucide sprite, inherits colour and never distorts */
.icon{ width:24px; height:24px; flex:none; stroke:currentColor; fill:none;
       stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.icon--sm{ width:20px; height:20px }
.icon--lg{ width:32px; height:32px }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:13px 24px; border:1px solid transparent;
  border-radius:var(--radius-xs); cursor:pointer;
  font:var(--type-button); font-family:var(--font-core);
  letter-spacing:var(--ls-button); text-transform:uppercase; white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:hover{ text-decoration:none }
.btn:active{ transform:translateY(1px) }
.btn--primary{ background:var(--action-primary); color:var(--text-inverse) }
.btn--primary:hover{ background:var(--action-primary-hover); color:var(--text-inverse) }
.btn--outline{ background:transparent; color:var(--azul-800); border-color:var(--azul-800) }
.btn--outline:hover{ background:var(--azul-800); color:var(--blanco) }
.btn--inverse{ background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.6) }
.btn--inverse:hover{ background:var(--blanco); color:var(--azul-800); border-color:var(--blanco) }
.btn--block{ width:100% }
@media (min-width:768px){ .btn--block{ width:auto } }

/* --------------------------------------------------------------------------
   5. Masthead — utility bar, sticky header, hamburger and the mobile panel.
   The theme renders its own header rather than core's Navigation block: that
   block's overlay runs on the Interactivity API and did not open reliably, and
   it left no room for the logo, the CTA and the phone number the panel needs.
   -------------------------------------------------------------------------- */
.utility{ display:none; background:var(--azul-900); color:rgba(255,255,255,.78); font-size:var(--fs-caption) }
@media (min-width:1024px){
  .utility{ display:block }
  .utility .container{ display:flex; align-items:center; justify-content:flex-end;
                       gap:var(--space-5); height:var(--bar-h) }
}
.utility a{ color:inherit; display:inline-flex; align-items:center; gap:6px }
.utility a:hover{ color:var(--blanco); text-decoration:none }
.utility__sep{ width:1px; height:14px; background:rgba(255,255,255,.24) }
/* Language switcher: a button showing the language being read, and a list of
   the others under it. It was a row of two codes, which only works while there
   are two — and read as a pair of buttons rather than as a choice. */
/* align-self, because inside the mobile panel this is a flex item in a column
   and would otherwise stretch the full width — which put the list, anchored to
   its right edge, on the far side of the panel from its own button. */
.lang{ position:relative; display:inline-flex; align-self:flex-start }
.lang__button{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 8px; min-height:32px;
  background:none; border:0; border-radius:var(--radius-xs);
  color:inherit; font:inherit; cursor:pointer;
  transition:background-color var(--dur-base) var(--ease-out);
}
.lang__button:hover{ background:rgba(255,255,255,.12); color:var(--blanco) }
.lang__chevron{ transition:transform var(--dur-base) var(--ease-out) }
.lang__button[aria-expanded="true"] .lang__chevron{ transform:rotate(180deg) }
.lang__flag{
  width:16px; height:11px; flex:none; border-radius:1px;
  /* The flags are 16x11 bitmaps; a hairline stops a white one from
     disappearing into a light panel. */
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
/* Anchored to the button's left edge by default, because the switcher sits on
   the left of the mobile panel and a list wider than its button would otherwise
   hang off the screen. In the utility bar it is the last thing on the right, so
   there it anchors the other way. */
.lang__list{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  min-width:170px; margin:0; padding:6px; list-style:none;
  background:var(--blanco); border-radius:var(--radius-xs);
  box-shadow:0 12px 28px rgba(16,27,57,.22);
  /* The colour is set on the panel and the links inherit it. The switcher sits
     in two places that paint their own text white — the utility bar and the
     mobile panel — and both style their anchors as `color:inherit`. Set on the
     anchor here, that rule ties and wins by order, and the list came out white
     on white. Inherited from the box it sits in, either rule gives the same
     answer. */
  color:var(--text-strong);
}
.lang__list[hidden]{ display:none }
.lang__list a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-xs);
  color:inherit; font-size:var(--fs-body-sm); white-space:nowrap;
  text-transform:none; letter-spacing:normal;
}
/* The extra .lang is doing work, not decoration.
   This white panel hangs inside chrome that is dark, and both places it hangs
   in — the utility bar and the mobile panel — turn their links white on hover.
   On this background that makes the option under the pointer disappear, which
   is what "the hover is broken" looked like. Those rules and a plain
   `.lang__list a:hover` have the same specificity, and one of them sits further
   down the stylesheet, so a tie is not good enough: the selector has to outrank
   them outright. The colour is inherited from the panel, so it stays right
   wherever the switcher is put next. */
.lang .lang__list a:hover,
.lang .lang__list a:focus-visible{ background:var(--gris-100); color:inherit; text-decoration:none }
.lang__list [aria-current="true"]{ font-weight:var(--fw-semibold); background:var(--gris-100) }
.utility .lang__list{ left:auto; right:0 }

/* Without JavaScript the list has no way to open, so it simply stays open —
   the plain list of links this replaced. The script adds the attribute that
   closes it. */
.js .lang__list{ display:none }
.js .lang__list:not([hidden]){ display:block }

.masthead{
  position:sticky; top:0; z-index:50; background:var(--blanco);
  box-shadow:var(--shadow-header);
  transition:box-shadow var(--dur-base) var(--ease-out);
}

/* The header has to stick to the page, not to its own wrapper.
   WordPress boxes a template part in a div of its own, and that div is only as
   tall as the header inside it — around 124px. A sticky element travels no
   further than its containing block, so the masthead held for the height of the
   utility bar and then left with the wrapper, which is what made the menu
   disappear on the first scroll. Taking the wrapper out of the box tree hands
   the masthead the page as its container, and it stays.

   Only the wrapper holding the masthead: the footer part keeps its box. */
.wp-site-blocks > .wp-block-template-part:has(.masthead){ display:contents }
.masthead__bar{ display:flex; align-items:center; justify-content:space-between;
                gap:var(--space-4); height:var(--header-h) }

.brand{ display:flex; align-items:center; gap:10px; color:var(--azul-800) }
.brand:hover{ text-decoration:none }
.brand__mark{ width:38px; height:38px; flex:none;
              transition:transform var(--dur-slow) var(--ease-in-out) }
/* One whole turn of the gear, not the old quarter-nudge. `ease-in-out` and the
   slow token are what keep 360deg reading as a deliberate rotation rather than
   a flicker: at --dur-base the mark simply appears to jump back to where it
   started. */
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark{ transform:rotate(360deg) }
@media (prefers-reduced-motion:reduce){
  .brand__mark{ transition:none }
  .brand:hover .brand__mark,
  .brand:focus-visible .brand__mark{ transform:none }
}
.brand__name{ font:var(--fw-extrabold) 17px/1 var(--font-display); letter-spacing:-.01em;
              white-space:nowrap; text-transform:uppercase }
.brand__desc{ display:block; font:var(--fw-semibold) 8px/1.4 var(--font-core);
              letter-spacing:.18em; color:var(--text-muted); text-transform:uppercase; margin-top:3px }
@media (min-width:1024px){
  .brand{ gap:14px }
  .brand__mark{ width:52px; height:52px }
  .brand__name{ font-size:22px }
  .brand__desc{ font-size:9.5px }
}

/* The desktop navigation starts at 1280px, not at 1024.

   The bar carries a 227px lockup, seven links and the quote button; laid out at
   full size that wants 1245px, and the container of a 1024px screen offers 960.
   What used to happen there was that «Trabaje con nosotros» wrapped onto a
   second line — which also broke the underline, anchored as it is to the
   baseline of a single line. Below 1280 the burger and its panel do the job,
   and the panel already carries every link, the button and the languages.

   Between 1280 and 1439 the row is tightened rather than dropped: 14px on a
   16px gap fits 1164 into 1216 with room to spare. */
.nav-desktop{ display:none }
@media (min-width:1280px){
  .nav-desktop{ display:block; height:100% }
  .nav{ display:flex; align-items:center; gap:var(--space-4); height:100%; margin:0 }
  .nav > li{ height:100%; display:flex; align-items:center }
}
@media (min-width:1440px){
  .nav{ gap:var(--space-5) }
  .nav__link{ font-size:15px }
}
.nav__link{
  position:relative; display:inline-flex; align-items:center; height:100%;
  font-weight:var(--fw-semibold); font-size:14px; color:var(--text-strong);
  /* One line, always: the underline below is positioned from the middle of the
     bar and a second line would leave it floating over the words. */
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
/* The link fills the full header height so the whole area is clickable, which
   left the underline sitting at the bottom of the masthead rather than under
   the word. Anchored to the text's baseline instead. */
.nav__link::after{
  content:""; position:absolute; left:0; right:0;
  top:calc(50% + 13px); bottom:auto;
  height:var(--border-w-thick); background:var(--verde-700);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__link:hover{ color:var(--verde-700); text-decoration:none }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1) }
.nav__link[aria-current="page"]{ color:var(--azul-800) }


/* Hamburger: three rules that fold into an X. */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-8px;
  background:none; border:0; cursor:pointer; color:var(--azul-800);
}
@media (min-width:1280px){ .burger{ display:none } }
.burger__box{ position:relative; display:block; width:24px; height:2px }
.burger__line,
.burger__line::before,
.burger__line::after{
  position:absolute; left:0; width:24px; height:2px; border-radius:1px;
  background:currentColor; transition:transform var(--dur-base) var(--ease-out),
                                      opacity var(--dur-fast) var(--ease-out);
}
.burger__line{ top:0 }
.burger__line::before{ content:""; top:-7px }
.burger__line::after{ content:""; top:7px }
[aria-expanded="true"] .burger__line{ background:transparent }
[aria-expanded="true"] .burger__line::before{ transform:translateY(7px) rotate(45deg) }
[aria-expanded="true"] .burger__line::after{ transform:translateY(-7px) rotate(-45deg) }

/* The panel */
.panel{
  position:fixed; inset:var(--header-h) 0 0; z-index:49;
  background-color:var(--azul-800); overflow-y:auto;
}
.panel[hidden]{ display:none }
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-ceiba); background-size:180px; opacity:.05;
}
.panel__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:var(--space-6);
  padding:var(--space-6) var(--pad-x) var(--space-8);
  animation:panel-in var(--dur-slow) var(--ease-out) both;
}
@keyframes panel-in{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.panel__nav{ display:flex; flex-direction:column }
.panel__nav a{
  padding:15px 0; color:var(--blanco);
  font:var(--fw-semibold) 19px/1.2 var(--font-core);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.panel__nav a:hover{ color:var(--verde-300); text-decoration:none }
.panel__nav a[aria-current="page"]{ color:var(--verde-300) }
.panel__nav a[aria-current="page"]::before{
  content:""; display:inline-block; width:3px; height:16px; margin-right:10px;
  background:var(--verde-600); vertical-align:-2px;
}
.panel__meta{ display:flex; flex-direction:column; gap:var(--space-3);
              color:rgba(255,255,255,.78); font-size:var(--fs-body-sm) }
.panel__meta a{ display:inline-flex; align-items:center; gap:8px; color:inherit }
.panel__meta a:hover{ color:var(--blanco) }
/* The language switcher, which on a phone is only reachable from here: the
   utility bar that holds it on a desktop is hidden below 1024px, and the whole
   navigation is a panel below 1280. Set apart from
   the phone number and the address above it, and given room to be tapped. */
.panel__meta .lang{ gap:var(--space-2); padding-top:var(--space-3);
                    border-top:1px solid rgba(255,255,255,.16) }
.panel__meta .lang a{ min-height:44px; min-width:44px; justify-content:center; padding:0 12px }
@media (min-width:1280px){ .panel{ display:none } }

body.has-nav-open{ overflow:hidden }

/* --------------------------------------------------------------------------
   6. Hero — photography with a protection scrim, three messages in rotation.
   The DS scrim runs left-to-right; on phones the crop puts the copy over the
   bright part of the frame, so below 768px it rotates to bottom-to-top.
   -------------------------------------------------------------------------- */
.hero{ position:relative; background:var(--azul-900); isolation:isolate }
.hero__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.hero__slide.is-active{
  position:relative; opacity:1; visibility:visible;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:60% center }
.hero__slide::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(16,27,57,.55) 0%, rgba(16,27,57,.80) 55%, rgba(16,27,57,.94) 100%);
}
@media (min-width:768px){
  .hero__slide::before{ background:var(--scrim-navy) }
}
.hero__inner{
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(78vh, 560px); padding-block:var(--space-8) var(--space-9);
}
@media (min-width:768px){
  .hero__inner{ min-height:min(80vh, 640px); justify-content:center }
}
@media (min-width:1024px){ .hero__inner{ min-height:min(82vh, 720px) } }
@media (min-width:1440px){ .hero__inner{ min-height:min(82vh, 780px) } }
.hero__title{
  font:var(--fw-extrabold) var(--fs-display)/var(--lh-tight) var(--font-display);
  letter-spacing:var(--ls-display); color:var(--blanco); max-width:18ch;
}
.hero__intro{ margin-top:var(--space-4); max-width:52ch; color:rgba(255,255,255,.82);
              font:var(--type-body-lg); font-family:var(--font-core) }
.hero__intro--justified{ text-align:justify; hyphens:auto }
.hero__actions{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-6) }
@media (min-width:480px){ .hero__actions{ flex-direction:row; flex-wrap:wrap } }

/* Thin arrows at the edges, indicators centred along the bottom. Both sit on
   the scrim, so they never need a plate behind them. */
.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:none; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.72);
  transition:color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hero__arrow svg{
  width:34px; height:34px; fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}
.hero__arrow:hover{ color:var(--blanco) }
.hero__arrow--prev{ left:4px }
.hero__arrow--next{ right:4px }
.hero__arrow--prev:hover{ transform:translateY(-50%) translateX(-3px) }
.hero__arrow--next:hover{ transform:translateY(-50%) translateX(3px) }
@media (min-width:768px){
  .hero__arrow{ display:inline-flex }
  .hero__arrow--prev{ left:16px }
  .hero__arrow--next{ right:16px }
}
@media (min-width:1280px){
  .hero__arrow--prev{ left:32px }
  .hero__arrow--next{ right:32px }
}

.hero__dots{
  position:absolute; left:0; right:0; bottom:var(--space-5); z-index:3;
  display:flex; gap:10px; align-items:center; justify-content:center;
}
@media (min-width:768px){ .hero__dots{ bottom:var(--space-6) } }
.hero__dot{
  width:36px; height:3px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.34); border-radius:2px;
  transition:background-color var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.hero__dot:hover{ background:rgba(255,255,255,.65) }
.hero__dot[aria-selected="true"]{ background:var(--verde-600); width:52px }

@media (prefers-reduced-motion:reduce){
  .hero__slide{ transition:none }
}

/* --------------------------------------------------------------------------
   7. Pillars — the five values, as icon + label
   -------------------------------------------------------------------------- */
.pillars{ display:grid; gap:var(--space-5); grid-template-columns:1fr }
@media (min-width:600px){ .pillars{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .pillars{ grid-template-columns:repeat(5,1fr); gap:var(--space-4) } }
.pillar{ display:flex; gap:var(--space-3); align-items:flex-start }
@media (min-width:1024px){ .pillar{ flex-direction:column; gap:var(--space-3) } }
.pillar__icon{ color:var(--verde-700) }
.pillar h3{ font-size:var(--fs-h4) }
.pillar p{ margin-top:6px; font-size:var(--fs-body-sm); color:var(--text-muted) }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width:768px){ .card{ padding:var(--space-6) } }
.card--link:hover{ box-shadow:var(--shadow-raised); transform:translateY(-2px) }
.card--accent{ border-top:var(--rule-accent) }
.card--flush{ padding:0; overflow:hidden }
.card__body{ padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3) }
@media (min-width:768px){ .card__body{ padding:var(--space-6) } }
.card__media{ aspect-ratio:16/10; background:var(--gris-200) }
.card__media img{ width:100%; height:100%; object-fit:cover }
.card p{ color:var(--text-muted); font-size:var(--fs-body-sm) }
.card ul.bullets{ display:flex; flex-direction:column; gap:8px; font-size:var(--fs-body-sm); color:var(--text-muted) }
.card ul.bullets li{ display:flex; gap:8px; align-items:flex-start }
.card ul.bullets .icon{ color:var(--verde-600); margin-top:2px }

.badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  padding:4px 10px; border-radius:var(--radius-xs);
  font:var(--fw-semibold) 11px/1.4 var(--font-core); letter-spacing:.08em; text-transform:uppercase;
}
.badge--ok{ background:var(--verde-100); color:var(--verde-800) }
.badge--busy{ background:#F5E6C8; color:var(--state-warning) }
.badge--hold{ background:var(--azul-100); color:var(--azul-700) }

.specs{ display:flex; flex-direction:column; gap:0; font-size:var(--fs-body-sm) }
.specs div{ display:flex; justify-content:space-between; gap:var(--space-4);
            padding:9px 0; border-bottom:1px solid var(--border-hairline) }
.specs div:last-child{ border-bottom:0 }
.specs dt{ color:var(--text-muted) }
.specs dd{ margin:0; font-weight:var(--fw-semibold); color:var(--text-strong); text-align:right }

/* --------------------------------------------------------------------------
   9. Dark bands — carry the ceiba watermark, as the manual sets its own pages
   -------------------------------------------------------------------------- */
/* The watermark sits at 7% rather than on background-blend-mode: soft-light,
   which rendered the tile far louder than the manual sets it on its own pages. */
.band{ position:relative; background-color:var(--surface-inverse); color:var(--blanco); overflow:hidden }
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-ceiba); background-size:200px; opacity:.07;
}
.band > *{ position:relative; z-index:1 }
.band--earth{ background-color:var(--surface-earth) }
.band h2,.band h3{ color:var(--blanco) }
.band p{ color:rgba(255,255,255,.82) }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5) }
@media (min-width:768px){ .stats{ grid-template-columns:repeat(4,1fr) } }
.stat__value{ font:var(--fw-extrabold) clamp(32px,6vw,44px)/1 var(--font-display);
              letter-spacing:var(--ls-display); color:var(--blanco) }
.stat__label{ margin-top:8px; font-size:var(--fs-body-sm); color:rgba(255,255,255,.78) }

/* The four pledges of the vision-zero band: a ringed icon over a short label,
   drawn from the client's own safety artwork. */
.pledges{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5) }
@media (min-width:768px){ .pledges{ grid-template-columns:repeat(4,1fr); gap:var(--space-6) } }
.pledge{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center }
.pledge .icon{
  width:76px; height:76px; padding:18px; box-sizing:border-box; flex:none;
  border:2px solid rgba(255,255,255,.7); border-radius:50%; color:var(--blanco);
}
.pledge p{
  margin:0; font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold);
  letter-spacing:.12em; text-transform:uppercase; line-height:1.5; color:var(--blanco);
}
@media (min-width:768px){
  .pledge + .pledge{ border-left:1px solid rgba(255,255,255,.22) }
}
.band .section-heading .lede{ color:rgba(255,255,255,.82) }

/* Photo and video gallery: the core gallery block, spaced like the cards. */
.media-gallery .wp-block-gallery{ gap:var(--space-3) }
.media-gallery .wp-block-gallery img{ border-radius:var(--radius-sm) }
.media-gallery .wp-block-video{ margin:0 }
.media-gallery .wp-block-video video{ width:100%; border-radius:var(--radius-sm); background:var(--azul-800) }
.media-gallery .wp-block-video figcaption{ margin-top:var(--space-2); font-size:var(--fs-caption); color:var(--text-muted) }

.callout{ display:flex; flex-direction:column; gap:var(--space-5) }
@media (min-width:1024px){
  .callout{ flex-direction:row; align-items:center; justify-content:space-between; gap:var(--space-8) }
  .callout__text{ max-width:62ch }
}
.callout h2{ max-width:22ch }

/* HSE split band */
.split{ display:grid; gap:var(--space-6); align-items:center }
@media (min-width:1024px){ .split{ grid-template-columns:1fr 1fr; gap:var(--space-8) } }

/* --------------------------------------------------------------------------
   10. Client logo strip — placeholder plates until real marks arrive
   -------------------------------------------------------------------------- */
/* Continuous logo ribbon.
   The track holds the set twice and travels exactly half its width, so the
   moment it wraps, the second copy is sitting where the first began and the
   seam is invisible. No script involved. The manual bans autoplay carousels
   that move the reader's content; this is a passive strip that carries none,
   so it keeps going — it used to stop under the pointer, which read as the
   animation breaking rather than as a courtesy. It still stops under reduced
   motion, where it lays the logos out in rows instead. */
.marquee{
  position:relative; overflow:hidden; width:100%;
  /* Fade the ends so logos enter and leave instead of being cut off. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; align-items:stretch; gap:var(--space-4);
  width:max-content; margin:0; padding:0; list-style:none;
  animation:marquee 42s linear infinite;
}
@media (min-width:768px){ .marquee__track{ gap:var(--space-5) } }
@keyframes marquee{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; width:100% }
}
.marquee .client{ flex:0 0 auto; width:210px }

.client{
  display:flex; align-items:center; justify-content:center; min-height:72px;
  border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:var(--fs-caption); text-align:center; padding:var(--space-3);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.footer{ background:var(--surface-inverse-deep); color:rgba(255,255,255,.78); padding-block:var(--section-y-sm) }
.footer__grid{ display:grid; gap:var(--space-6); grid-template-columns:1fr }
@media (min-width:600px){ .footer__grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .footer__grid{ grid-template-columns:2fr 1fr 1fr 1.2fr; gap:var(--space-7) } }
.footer h4{ color:var(--blanco); font-size:12px; letter-spacing:var(--ls-eyebrow);
            text-transform:uppercase; margin-bottom:var(--space-4) }
.footer a{ color:rgba(255,255,255,.78) }
.footer a:hover{ color:var(--blanco) }
.footer__links{ display:flex; flex-direction:column; gap:12px; font-size:var(--fs-body-sm) }
.footer__brand .brand{ color:var(--blanco) }
.footer__brand .brand__desc{ color:rgba(255,255,255,.6) }
.footer__blurb{ margin-top:var(--space-4); font-size:var(--fs-body-sm); max-width:38ch }
.footer__contact{ display:flex; flex-direction:column; gap:12px; font-size:var(--fs-body-sm) }
.footer__contact a,.footer__contact span{ display:flex; gap:10px; align-items:flex-start }
.footer__contact .icon{ color:var(--verde-300); margin-top:2px }

.social{ display:flex; gap:10px; margin-top:var(--space-5) }
.social a{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--border-inverse); border-radius:var(--radius-xs); color:var(--blanco);
  transition:background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.social a:hover{ background:var(--verde-700); border-color:var(--verde-700) }

.footer__legal{
  margin-top:var(--section-y-sm); padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:var(--space-3);
  font-size:var(--fs-caption); color:rgba(255,255,255,.6);
}
@media (min-width:768px){
  .footer__legal{ flex-direction:row; align-items:center; justify-content:space-between }
}
.footer__legal nav{ display:flex; flex-wrap:wrap; gap:var(--space-4) }

/* Floating controls: WhatsApp, as the proposal asks for, and back-to-top.
   They live in one stack so they line up whether or not a WhatsApp number has
   been set. */
.floaters{
  position:fixed; right:16px; bottom:16px; z-index:40;
  display:flex; flex-direction:column-reverse; gap:10px;
}
@media (min-width:1024px){ .floaters{ right:24px; bottom:24px } }

.floater{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; padding:0; border:0; cursor:pointer;
  border-radius:var(--radius-pill); box-shadow:var(--shadow-raised);
  transition:background-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out),
             visibility var(--dur-base) var(--ease-out);
}
.floater:hover{ transform:translateY(-2px); text-decoration:none }

.floater--wa{ background:var(--verde-700); color:var(--blanco) }
.floater--wa:hover{ background:var(--verde-800); color:var(--blanco) }

/* Back-to-top stays out of the way until the visitor is well down the page. */
.floater--top{
  background:var(--azul-800); color:var(--blanco);
  opacity:0; visibility:hidden; pointer-events:none;
}
.floater--top.is-visible{ opacity:1; visibility:visible; pointer-events:auto }
.floater--top:hover{ background:var(--azul-900) }

@media (prefers-reduced-motion:reduce){
  .floater{ transition:opacity var(--dur-fast) linear, visibility var(--dur-fast) linear }
  .floater:hover{ transform:none }
}

/* --------------------------------------------------------------------------
   12. Demo-data marking — NOT part of the delivered theme.
   Anything the client still has to supply is underlined in amber so nobody
   mistakes placeholder figures for verified ones.
   -------------------------------------------------------------------------- */
.demo{ border-bottom:2px dotted #C98A12; cursor:help }
/* Block-level values (stat figures) would otherwise underline the whole column */
p.demo,h3.demo{ display:inline-block }
.band .demo,.footer .demo{ border-bottom-color:#E0A83A }
body.no-demo .demo{ border-bottom:0 }

/* --------------------------------------------------------------------------
   13. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .card--link:hover{ transform:none }
}

/* ==========================================================================
   14. WordPress integration
   Core blocks emit their own markup and class names; this section maps them
   onto the design system rather than fighting them.
   ========================================================================== */

/* Buttons: core emits .wp-block-button__link, the design system styles .btn */
.wp-block-button__link{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.wp-block-button.is-style-ceiba-secondary .wp-block-button__link{ background:var(--action-secondary) }
.wp-block-button.is-style-ceiba-secondary .wp-block-button__link:hover{ background:var(--action-secondary-hover) }
.wp-block-button.is-style-ceiba-outline .wp-block-button__link{
  background:transparent; color:var(--azul-800); border:1px solid var(--azul-800);
}
.wp-block-button.is-style-ceiba-outline .wp-block-button__link:hover{ background:var(--azul-800); color:var(--blanco) }
.wp-block-button.is-style-ceiba-inverse .wp-block-button__link{
  background:transparent; color:var(--blanco); border:1px solid rgba(255,255,255,.6);
}
.wp-block-button.is-style-ceiba-inverse .wp-block-button__link:hover{
  background:var(--blanco); color:var(--azul-800); border-color:var(--blanco);
}

/* Query Loop grids.
   The .grid classes sit on the .wp-block-query wrapper for readability, but the
   element that must actually become the grid is core's .wp-block-post-template
   inside it. Without this reset the wrapper became a three-column grid as well
   and the whole post list was squeezed into its first column — which is what
   broke every card listing on the site. */
.wp-block-query.grid{ display:block }

/* Query Loop grids: core wraps posts in .wp-block-post-template, which would
   otherwise swallow the grid declared on the parent. */
.wp-block-query.grid > .wp-block-post-template{
  display:grid; gap:var(--space-5); grid-template-columns:1fr; width:100%; margin:0; padding:0; list-style:none;
}
@media (min-width:768px){
  .wp-block-query.grid--2 > .wp-block-post-template,
  .wp-block-query.grid--3 > .wp-block-post-template{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:1024px){
  .wp-block-query.grid--3 > .wp-block-post-template{ grid-template-columns:repeat(3,1fr) }
}
/* Core's flow layout puts a margin-block-start on every child except the first.
   Inside a grid that lifts the first card out of line with its row and makes its
   cell taller. Grid gap owns the spacing here, so the margins have to go. */
.wp-block-post-template > li{ display:flex; margin-block:0 !important }
.wp-block-post-template > li > .card{ width:100% }

/* The vacancy card writes its own heading rather than core's title block, so
   it is named here alongside it and takes the same treatment. */
.card .wp-block-post-title,
.vacancy h3{ font:var(--fw-semibold) var(--fs-h3)/1.3 var(--font-core); color:var(--text-strong) }
.card .wp-block-post-title a,
.vacancy h3 a{ color:inherit }
.card .wp-block-post-title a:hover,
.vacancy h3 a:hover{ color:var(--verde-700); text-decoration:none }
.card .wp-block-post-excerpt__excerpt{ color:var(--text-muted); font-size:var(--fs-body-sm) }
.card .wp-block-post-excerpt__more-text{ margin-top:var(--space-3) }
.card .wp-block-post-featured-image{ margin:0 }
.card .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; border-radius:0 }

.wp-block-query-pagination{ margin-top:var(--space-6); gap:var(--space-3); font-weight:var(--fw-semibold) }

.footer .wp-block-columns{ gap:var(--space-6) }
@media (min-width:1024px){ .footer .wp-block-columns{ gap:var(--space-7) } }
.footer .wp-block-heading{ color:var(--blanco); font-size:12px; letter-spacing:var(--ls-eyebrow);
                           text-transform:uppercase; margin-bottom:var(--space-4) }

/* Spec sheet table inside an equipment post */
.wp-block-table.is-style-specs table{ width:100%; border-collapse:collapse }
.wp-block-table.is-style-specs thead{ display:none }
.wp-block-table.is-style-specs td{
  padding:9px 0; border:0; border-bottom:1px solid var(--border-hairline); font-size:var(--fs-body-sm);
}
.wp-block-table.is-style-specs td:first-child{ color:var(--text-muted) }
.wp-block-table.is-style-specs td:last-child{ font-weight:var(--fw-semibold); color:var(--text-strong); text-align:right }
/* On a phone the two columns do not fit side by side: the label lost the
   fight for width and broke mid-word — «Mot/or», «Más/til». Each row stacks
   instead, label over value, and the value keeps its weight but drops the
   right alignment it no longer has anything to align against. */
@media (max-width:479px){
  .wp-block-table.is-style-specs tr{ display:flex; flex-direction:column; gap:2px; padding:9px 0;
                                     border-bottom:1px solid var(--border-hairline) }
  .wp-block-table.is-style-specs td{ padding:0; border-bottom:0 }
  .wp-block-table.is-style-specs td:first-child{ font-size:11px; letter-spacing:.06em; text-transform:uppercase }
  .wp-block-table.is-style-specs td:last-child{ text-align:left }
}

/* ==========================================================================
   15. Pieces the patterns and dynamic blocks introduce
   ========================================================================== */

.page-header{ padding-block:var(--section-y-sm) }
.page-header__title{ color:var(--blanco); margin-top:var(--space-3) }

.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
             font-size:var(--fs-body-sm); color:var(--text-muted) }
.band .breadcrumb{ color:rgba(255,255,255,.72) }
.band .breadcrumb a{ color:rgba(255,255,255,.86) }
.breadcrumb__sep{ opacity:.5 }

.filters{ display:flex; flex-wrap:wrap; gap:var(--space-2) }
.tag{
  display:inline-flex; align-items:center; min-height:36px; padding:6px 14px;
  border:1px solid var(--border-hairline); border-radius:var(--radius-pill);
  font-size:var(--fs-body-sm); font-weight:var(--fw-semibold); color:var(--text-body); background:var(--blanco);
}
.tag:hover{ border-color:var(--verde-600); color:var(--verde-700); text-decoration:none }
.tag--active{ background:var(--verde-700); border-color:var(--verde-700); color:var(--blanco) }
.tag--active:hover{ color:var(--blanco) }

.eyebrow--tight{ margin-bottom:0 }
.split__copy{ margin-top:var(--space-4); max-width:60ch }
.split__action{ margin-top:var(--space-6) }
.note{ font-size:var(--fs-body-sm); color:var(--text-muted) }

.detail__meta{ margin-block:var(--space-3); color:var(--text-muted); font-size:var(--fs-body-sm) }
.detail__media img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-sm) }

/* The admin bar would otherwise sit on top of the sticky masthead */
.admin-bar .masthead{ top:32px }
@media (max-width:782px){ .admin-bar .masthead{ top:46px } }

/* ==========================================================================
   16. Motion
   Functional only, per the manual: 360ms entrances on cubic-bezier(0,0,.2,1),
   200ms elevation, 120ms colour. No bounce, no spring, no parallax.
   ========================================================================== */

/* Guarded by .js, set by an inline snippet in the head. Without it a blocked or
   broken script would leave every section permanently invisible — a worse
   failure than having no animation at all. */
.js .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible{ opacity:1; transform:none }

/* Children of a .reveal-group arrive one after another as the row scrolls in. */
.js .reveal-item{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal-item.is-visible{ opacity:1; transform:none }

/* Cards lift 2px and their rule grows — the one flourish the manual allows. */
.card--accent{ position:relative; overflow:hidden }
.card--accent::after{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--border-w-thick);
  background:var(--verde-700); transform:scaleX(.25); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.card--accent{ border-top:0 }
.card--link:hover .card--accent::after,
.card--accent:hover::after{ transform:scaleX(1) }

.card--flush .card__media{ overflow:hidden }
.card--flush .card__media img{ transition:transform var(--dur-slow) var(--ease-out) }
.card--link:hover .card__media img{ transform:scale(1.04) }

@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal-item{ opacity:1; transform:none; transition:none }
  .card--link:hover .card__media img{ transform:none }
  .panel__inner{ animation:none }
}

/* Pending social accounts, visible only in preview mode */
.social__pending{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px dashed rgba(255,255,255,.35); border-radius:var(--radius-xs);
  color:rgba(255,255,255,.4); cursor:help;
}

/* Page content is ranged left inside the container, not centred in it: the
   design system aligns text left by default and only centres a short intro. */
.container.prose{ margin-inline:0; max-width:70ch }
.section > .container.prose{ margin-inline:auto }
.wp-block-group.container.prose > *{ margin-left:0; margin-right:0 }
.container.prose .wp-block-group,
.container.prose > .wp-block-post-content > *{ max-width:100% }

/* Grid rows stay aligned because the flow margin is reset above, not because
   the items are frozen — so each one can animate in on its own. */
.wp-block-post-template{ align-items:stretch }

/* Section headings are ranged left everywhere, clients included: the design
   system aligns content left by default, and one centred block among a dozen
   left-aligned ones reads as a mistake rather than as emphasis. */
.clients-block .section-heading{ max-width:34ch }

/* The ribbon needs air above it, or the heading collides with the moving track. */
.marquee{ margin-block:var(--space-6) }
@media (min-width:768px){ .marquee{ margin-block:var(--space-7) } }

/* Template parts inherit the global block gap, which left a white strip between
   the closing band and the footer. Header and footer butt against the content. */
.wp-site-blocks > .wp-block-template-part{ margin-block:0 }
.wp-site-blocks > *{ margin-block-start:0 }
.wp-site-blocks > main{ margin-block:0 }

/* Footer link matching the page being viewed */
.footer__links a[aria-current="page"]{
  color:var(--blanco); font-weight:var(--fw-semibold);
}
.footer__links a[aria-current="page"]::before{
  content:""; display:inline-block; width:3px; height:12px; margin-right:8px;
  background:var(--verde-600); vertical-align:-1px;
}

/* ==========================================================================
   17. Nosotros — composition instead of running text
   ========================================================================== */

.about-intro{ display:grid; gap:var(--space-6); align-items:center }
@media (min-width:900px){
  .about-intro{ grid-template-columns:1.05fr .95fr; gap:var(--space-8) }
}
.about-intro__text h2{ margin-top:var(--space-2); max-width:16ch }
.about-intro__text .lede{ margin-top:var(--space-5); max-width:56ch }
.about-intro__media{ margin:0; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:4/3 }
.about-intro__media img{ width:100%; height:100%; object-fit:cover }
/* Prose the client adds under the intro, in a container of its own so it
   ranges with the intro rather than centring in the section. Padding, not
   margin: the section is a constrained layout in production, and core zeroes
   the block margins of every child of one after this sheet has loaded. */
.about-story{ padding-top:var(--space-7) }
.about-story > * + *{ margin-top:var(--space-4) }

.statement-pair{ display:grid; gap:var(--space-5) }
@media (min-width:900px){ .statement-pair{ grid-template-columns:1fr 1fr; gap:var(--space-6) } }
.statement{
  position:relative; background:var(--blanco); padding:var(--space-6);
  border:1px solid var(--border-hairline); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
}
@media (min-width:768px){ .statement{ padding:var(--space-7) } }
.statement__rule{
  position:absolute; top:0; left:0; width:56px; height:var(--border-w-thick);
  background:var(--verde-700);
}
.statement h3{
  margin-top:var(--space-2);
  font:var(--fw-extrabold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  letter-spacing:var(--ls-heading); color:var(--azul-800);
}
.statement p{ margin-top:var(--space-4); color:var(--text-body); max-width:52ch }

.value-list{ display:grid; gap:var(--space-3); grid-template-columns:1fr }
@media (min-width:600px){ .value-list{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .value-list{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1280px){ .value-list{ grid-template-columns:repeat(5,1fr); gap:var(--space-4) } }
/* Each value is a title over a sentence, so the card stacks at every width:
   icon, then the name, then what it means. */
.value{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-5);
  background:var(--surface-subtle); border-left:var(--rule-accent);
  font-weight:var(--fw-semibold); color:var(--text-strong); line-height:1.3;
}
.value .icon{ color:var(--verde-700); flex:none }
.value h3{ font-size:var(--fs-h4); margin:0 }
.value p{ margin:0; font-weight:var(--fw-regular); font-size:var(--fs-body-sm);
          line-height:1.55; color:var(--text-muted) }
.value h3 + p{ margin-top:calc(var(--space-2) * -1) }

/* Brand marks are filled shapes, not line icons: the sprite's default of
   fill:none + stroke would render them invisible. */
.icon--solid{ fill:currentColor !important; stroke:none !important }

/* Page body: block-built pages bring their own sections and containers, so the
   wrapper adds none. Loose paragraphs still get a readable measure. */
.page-body > .wp-block-post-content > p,
.page-body > .wp-block-post-content > ul,
.page-body > .wp-block-post-content > ol,
.page-body > .wp-block-post-content > h2,
.page-body > .wp-block-post-content > h3{
  width:100%; max-width:70ch;
  margin-inline:auto; padding-inline:var(--pad-x);
}
.page-body > .wp-block-post-content > p:first-child{ margin-top:var(--section-y-sm) }
.page-body > .wp-block-post-content > :last-child{ margin-bottom:var(--section-y-sm) }

/* ==========================================================================
   18. Industrial premium — more air, more presence, same brand rules
   ========================================================================== */

:root{ --icon-xl:44px }
.icon--xl{ width:var(--icon-xl); height:var(--icon-xl); stroke-width:1.4 }

/* Wider rhythm between sections on large screens: the manual's 96px was
   designed for a 1280 canvas and reads tight at 1600+. */
@media (min-width:1440px){
  :root{ --section-y:120px; --section-y-sm:80px }
}

/* Service cards get a crest: the service's own photograph, or — when it has
   none — the ceiba watermark behind an oversized line icon. No stock
   photography invented for services that have none. */
.card__crest{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:132px; margin:calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  background-color:var(--azul-800); color:var(--verde-300); overflow:hidden;
}
@media (min-width:768px){
  .card__crest{ margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-6) }
}
.card__crest::before{
  content:""; position:absolute; inset:0;
  background-image:var(--pattern-ceiba); background-size:120px; opacity:.09;
}
.card__crest .icon{ position:relative; z-index:1;
  transition:transform var(--dur-slow) var(--ease-out), color var(--dur-base) var(--ease-out) }
.card--link:hover .card__crest .icon{ transform:scale(1.08); color:var(--blanco) }

/* With a photograph in it the crest is the photograph: the watermark behind it
   would only show through as noise, and the navy is left as the colour the
   image loads against. The same slow scale on hover the icon gets, so a card
   with a picture and a card without still behave like one another. */
.card__crest--photo::before{ content:none }
.card__crest--photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.card--link:hover .card__crest--photo img{ transform:scale(1.05) }
@media (prefers-reduced-motion:reduce){
  .card--link:hover .card__crest--photo img{ transform:none }
}
/* The accent rule sits on the crest, so it needs to clear it. */
.card--accent{ padding-top:0 }
.card--accent::after{ z-index:2 }
/* A vacancy card opens with words, not with a crest, so under the accent rule
   it keeps the padding the crest would otherwise have stood in for. */
.vacancy.card--accent{ padding-top:var(--space-5) }
@media (min-width:768px){ .vacancy.card--accent{ padding-top:var(--space-6) } }

/* Figures carry the page: display weight, not body weight. */
.stat__value{
  font:var(--fw-extrabold) clamp(40px, 7vw, 68px)/1 var(--font-display) !important;
  letter-spacing:-.03em;
}
.stat__label{ font-size:var(--fs-body); letter-spacing:.02em }
.stats{ gap:var(--space-6) }
@media (min-width:768px){ .stats{ gap:var(--space-7) } }

/* Full-bleed photography for the HSE band instead of a side-by-side image. */
.band--photo{ position:relative; isolation:isolate; overflow:hidden }
.band--photo > .container{ position:relative; z-index:2 }
.band--photo .band__media{ position:absolute; inset:0; z-index:0 }
.band--photo .band__media img{ width:100%; height:100%; object-fit:cover }
.band--photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(36,16,16,.94) 0%, rgba(36,16,16,.86) 45%, rgba(36,16,16,.55) 100%);
}
@media (max-width:767px){
  .band--photo::after{
    background:linear-gradient(180deg, rgba(36,16,16,.80) 0%, rgba(36,16,16,.94) 70%);
  }
}
.band--photo .split{ display:block }
.band--photo .split__copy{ max-width:56ch }

/* Cards lift a little more decisively, still within the 200ms the manual sets. */
.card--link:hover{ box-shadow:var(--shadow-raised); transform:translateY(-3px) }

/* ==========================================================================
   19. Scrollbar
   Styled to the brand rather than left as the browser default: a thin navy
   thumb on the paper grey the site already uses. Firefox gets the standard
   properties, WebKit its pseudo-elements; anything else keeps its own.
   ========================================================================== */

html{
  scrollbar-color: var(--azul-700) var(--gris-100);
  scrollbar-width: thin;
  scroll-behavior: smooth;
  /* The sticky masthead would otherwise cover an anchored heading. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:var(--gris-100) }
::-webkit-scrollbar-thumb{
  background:var(--azul-700); border-radius:6px;
  border:2px solid var(--gris-100);
}
::-webkit-scrollbar-thumb:hover{ background:var(--azul-800) }
::-webkit-scrollbar-corner{ background:var(--gris-100) }

/* Dark surfaces get a thumb that reads against them. */
.band ::-webkit-scrollbar-track,
.footer ::-webkit-scrollbar-track{ background:rgba(255,255,255,.08) }
.band ::-webkit-scrollbar-thumb,
.footer ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); border-color:transparent }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
}

/* ==========================================================================
   20. Standardised entry pages
   Every detail page — service, equipment, project — uses the same skeleton:
   navy page header, lead paragraph, body, related items, closing band.
   ========================================================================== */

/* Card call to action: the same button the rest of the site uses, so a card
   ends in a control that looks clickable rather than a line of green text. */
.card__cta{ margin-top:auto; padding-top:var(--space-4) }
.card__cta .wp-block-read-more,
a.card__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:11px 20px;
  background:transparent; color:var(--azul-800);
  border:1px solid var(--border-strong); border-radius:var(--radius-xs);
  font:var(--type-button); font-family:var(--font-core);
  letter-spacing:var(--ls-button); text-transform:uppercase; text-decoration:none;
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.card__cta .wp-block-read-more:hover,
a.card__cta:hover{
  background:var(--verde-700); border-color:var(--verde-700); color:var(--blanco);
}
/* The hover state has to repaint the label too: a white label on the pale
   green the button lightened to was unreadable. */
.card--link:hover a.card__cta,
.card--link:hover .card__cta .wp-block-read-more{
  background:var(--verde-700); border-color:var(--verde-700); color:var(--blanco);
}
.card__cta a.card__cta{ margin:0 }

/* Template parts wrap what they hold in a div of their own. Where the layout
   around them is a grid or a flex column, that wrapper would become the item
   instead of the section or the aside inside it — so it is taken out of the
   box tree and its children take its place. */
main > .wp-block-template-part,
.entry > .wp-block-template-part,
.entry__main > .wp-block-template-part,
.wp-block-query > .wp-block-template-part{ display:contents }

/* The quote card and the closing band are blocks now: core writes
   .wp-block-buttons where the theme used to write a bare .btn. */
.aside-card .wp-block-buttons{ margin-top:var(--space-4) }
.aside-card .wp-block-button,
.aside-card .wp-block-button__link{ width:100% }

/* Entry layout */
.entry{ display:grid; gap:var(--space-7) }
@media (min-width:1024px){
  .entry{ grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-8); align-items:start }
}
.entry__lead{
  font:var(--type-body-lg); font-family:var(--font-core);
  color:var(--text-strong); max-width:60ch;
  padding-left:var(--space-5); border-left:var(--rule-accent);
}
.entry__body{ max-width:70ch }
.entry__body > * + *{ margin-top:var(--space-5) }
.entry__body h2{ margin-top:var(--space-7) }
.entry__body h3{ margin-top:var(--space-6) }

/* Sticky aside with the conversion path, so the CTA follows the reader down a
   long technical page. */
.entry__aside{ display:flex; flex-direction:column; gap:var(--space-5) }
@media (min-width:1024px){
  .entry__aside{ position:sticky; top:calc(var(--header-h) + var(--space-5)) }
}
.aside-card{
  background:var(--surface-subtle); border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm); padding:var(--space-5);
}
.aside-card--dark{
  background:var(--surface-inverse); border-color:transparent; color:var(--blanco);
  position:relative; overflow:hidden;
}
.aside-card--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-ceiba); background-size:150px; opacity:.06;
}
.aside-card--dark > *{ position:relative; z-index:1 }
.aside-card h3{ font-size:var(--fs-h4) }
.aside-card--dark h3{ color:var(--blanco) }
.aside-card p{ margin-top:var(--space-3); font-size:var(--fs-body-sm); color:var(--text-muted) }
.aside-card--dark p{ color:rgba(255,255,255,.82) }
.aside-card .btn{ margin-top:var(--space-4); width:100% }
.aside-list{ display:flex; flex-direction:column; margin-top:var(--space-3) }
.aside-list a{
  padding:11px 0; font-size:var(--fs-body-sm); font-weight:var(--fw-semibold);
  color:var(--text-strong); border-bottom:1px solid var(--border-hairline);
}
.aside-list a:last-child{ border-bottom:0 }
.aside-list a:hover{ color:var(--verde-700); text-decoration:none }
.aside-list a[aria-current="page"]{ color:var(--verde-700) }

.entry__main{ display:flex; flex-direction:column; gap:var(--space-5); min-width:0 }
.entry__main .detail__media{ margin:0 0 var(--space-3) }
.entry__main .detail__media img{ width:100%; border-radius:var(--radius-sm) }

/* Legal links in the footer bar mark the page being viewed too. */
.footer__legal a[aria-current="page"]{ color:var(--blanco); font-weight:var(--fw-semibold) }

/* ==========================================================================
   21. Content pages — one skeleton for HSE, team, clients, careers and legal
   ========================================================================== */

.page-hero{ display:grid; gap:var(--space-6); align-items:center }
@media (min-width:900px){ .page-hero{ grid-template-columns:1.05fr .95fr; gap:var(--space-8) } }
.page-hero__text h2{ margin-top:var(--space-2); max-width:18ch }
.page-hero__text .lede{ margin-top:var(--space-5) }
.page-hero__media{ margin:0; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:4/3 }
.page-hero__media img{ width:100%; height:100%; object-fit:cover }

.feature-grid{ display:grid; gap:var(--space-5); grid-template-columns:1fr }
@media (min-width:768px){ .feature-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .feature-grid--3{ grid-template-columns:repeat(3,1fr) } }
.feature{
  background:var(--blanco); border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width:768px){ .feature{ padding:var(--space-6) } }
.feature:hover{ box-shadow:var(--shadow-raised); transform:translateY(-3px) }
.feature__icon{ color:var(--verde-700) }
.feature h3{ font-size:var(--fs-h4) }
.feature p{ color:var(--text-muted); font-size:var(--fs-body-sm) }

/* Legal pages: numbered clauses with an index that follows the reader. */
.legal{ display:grid; gap:var(--space-6) }
@media (min-width:1024px){ .legal{ grid-template-columns:260px minmax(0,1fr); gap:var(--space-8); align-items:start } }
.legal__index{ display:none }
@media (min-width:1024px){
  .legal__index{
    display:block; position:sticky; top:calc(var(--header-h) + var(--space-5));
    padding-left:var(--space-4); border-left:1px solid var(--border-hairline);
  }
}
.legal__index a{ display:block; padding:8px 0; font-size:var(--fs-body-sm); color:var(--text-muted) }
.legal__index a:hover{ color:var(--verde-700); text-decoration:none }
.legal__clauses{ max-width:70ch; counter-reset:clause }
.legal__clause{ padding-block:var(--space-5); border-bottom:1px solid var(--border-hairline) }
.legal__clause:last-child{ border-bottom:0 }
.legal__clause h2{
  counter-increment:clause; display:flex; gap:var(--space-3); align-items:baseline;
  font-size:var(--fs-h3); margin:0;
}
.legal__clause h2::before{
  content:counter(clause, decimal-leading-zero);
  font:var(--fw-extrabold) var(--fs-body-sm)/1 var(--font-display);
  color:var(--verde-700); letter-spacing:.04em;
}
.legal__clause p{ margin-top:var(--space-3); color:var(--text-body) }
.legal__notice{
  display:flex; gap:var(--space-3); align-items:flex-start;
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-6);
  background:var(--surface-subtle); border-left:var(--rule-accent);
  font-size:var(--fs-body-sm); color:var(--text-muted);
}
.legal__notice .icon{ color:var(--verde-700); flex:none; margin-top:2px }

/* Search results */
.search-head h1{ margin-top:var(--space-2) }
.search-head .lede{ margin-top:var(--space-3) }
.result__type{
  align-self:flex-start; padding:4px 10px; border-radius:var(--radius-xs);
  background:var(--azul-050); color:var(--azul-700);
  font:var(--fw-semibold) 11px/1.4 var(--font-core);
  letter-spacing:.08em; text-transform:uppercase;
}
.empty-state{
  grid-column:1 / -1; padding:var(--space-8) var(--space-5); text-align:center;
  background:var(--blanco); border:1px dashed var(--border-strong); border-radius:var(--radius-sm);
}
.empty-state p{ margin:var(--space-3) auto 0; max-width:52ch; color:var(--text-muted) }
.empty-state .wp-block-buttons{ justify-content:center; margin-top:var(--space-5) }

/* Contact page: form beside the details */
.contact{ display:grid; gap:var(--space-7) }
@media (min-width:1024px){ .contact{ grid-template-columns:minmax(0,1.15fr) 340px; gap:var(--space-8); align-items:start } }
.contact__aside{ display:flex; flex-direction:column; gap:var(--space-5) }
@media (min-width:1024px){ .contact__aside{ position:sticky; top:calc(var(--header-h) + var(--space-5)) } }

.contact-row{ display:flex; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--border-hairline) }
.contact-row:last-child{ border-bottom:0 }
.contact-row .icon{ color:var(--verde-700); flex:none; margin-top:3px }
.contact-row__label{
  display:block; font-size:11px; font-weight:var(--fw-semibold);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
}
.contact-row__value{ display:block; margin-top:3px; font-size:var(--fs-body-sm); color:var(--text-strong) }
.contact__form .section-heading{ margin-bottom:var(--space-6); max-width:44ch }

/* Detail-page crest: the card treatment at banner scale, so the listing and the
   page it opens read as the same family. */
:root{ --icon-hero:76px }
.icon--hero{ width:var(--icon-hero); height:var(--icon-hero); stroke-width:1.2 }
.entry__crest{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:200px; margin-bottom:var(--space-3);
  background-color:var(--azul-800); color:var(--verde-300);
  border-radius:var(--radius-sm); overflow:hidden;
}
@media (min-width:768px){ .entry__crest{ min-height:260px } }
.entry__crest::before{
  content:""; position:absolute; inset:0;
  background-image:var(--pattern-ceiba); background-size:150px; opacity:.09;
}
.entry__crest .icon{ position:relative; z-index:1 }
/* With a featured image the crest becomes the photograph itself: the same
   frame, filled edge to edge, the watermark and the icon out of the way. */
.entry__crest--photo{ min-height:0; aspect-ratio:16/8; background-color:var(--azul-800) }
.entry__crest--photo::before{ content:none }
.entry__crest--photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}

/* The data-sheet card on a unit's page: icon, a line of text, one button. */
.datasheet{
  display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-7);
  padding:var(--space-5); background:var(--surface-subtle);
  border:1px solid var(--border-hairline); border-left:var(--rule-accent); border-radius:var(--radius-sm);
}
@media (min-width:768px){ .datasheet{ flex-direction:row; align-items:center; gap:var(--space-5); padding:var(--space-6) } }
.datasheet__icon{ color:var(--verde-700); flex:none }
.datasheet__text{ flex:1; min-width:0 }
.datasheet h3{ font-size:var(--fs-h4); margin:0 }
.datasheet p{ margin:var(--space-2) 0 0; font-size:var(--fs-body-sm); color:var(--text-muted) }
.datasheet__note{ white-space:nowrap }
.datasheet__action{ flex:none; align-self:flex-start }
@media (min-width:768px){ .datasheet__action{ align-self:center } }

.entry__includes{ margin-top:var(--space-8) }
.entry__includes .section-heading{ margin-bottom:var(--space-5) }
.entry__includes .feature-grid{ grid-template-columns:1fr }
@media (min-width:600px){ .entry__includes .feature-grid{ grid-template-columns:repeat(2,1fr) } }

/* ==========================================================================
   22. Pagination
   Core prints "1 2 3 Next Page" as bare text. This is a real control: square
   targets, the current page in green, and arrows that move on hover.
   ========================================================================== */

.wp-block-query-pagination{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin-top:var(--space-7);
}
.wp-block-query-pagination-numbers{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px;
  background:var(--blanco); color:var(--text-strong);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xs);
  font-weight:var(--fw-semibold); font-size:var(--fs-body-sm); text-decoration:none;
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers:hover{
  background:var(--surface-subtle); border-color:var(--border-strong);
  color:var(--azul-800); text-decoration:none;
}
.wp-block-query-pagination .page-numbers.current{
  background:var(--verde-700); border-color:var(--verde-700); color:var(--blanco);
}
.wp-block-query-pagination .page-numbers.dots{
  border-color:transparent; background:transparent; color:var(--text-muted); min-width:24px; padding:0;
}

/* Previous and next read as labelled controls, not as another number. */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next{ gap:8px; letter-spacing:var(--ls-button); text-transform:uppercase; font-size:12px }
.wp-block-query-pagination-previous::before{ content:"←"; font-size:15px; line-height:1 }
.wp-block-query-pagination-next::after{ content:"→"; font-size:15px; line-height:1 }
.wp-block-query-pagination-previous:hover{ transform:translateX(-2px) }
.wp-block-query-pagination-next:hover{ transform:translateX(2px) }

@media (max-width:479px){
  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next{ font-size:0; padding:0; min-width:44px }
  .wp-block-query-pagination-previous::before,
  .wp-block-query-pagination-next::after{ font-size:18px }
}
@media (prefers-reduced-motion:reduce){
  .wp-block-query-pagination-previous:hover,
  .wp-block-query-pagination-next:hover{ transform:none }
}

/* ==========================================================================
   23. Spacing discipline
   WordPress adds margin-block-start to every child of a layout container, on
   top of the gap the theme's own flex and grid containers already declare. The
   two stack, so identical cards ended up with different internal rhythm
   depending on which blocks they happened to contain. Inside a theme container,
   gap is the single source of spacing.
   ========================================================================== */

.card > *,
.card__body > *,
.feature > *,
.stack > *,
.section-heading > *,
.entry__main > *,
.entry__aside > *,
.contact__aside > *,
.hero__inner > *,
.page-hero__text > *{
  margin-block:0 !important;
}

/* One rhythm for every card, whatever it holds. */
.card{ gap:var(--space-4) }
.card__body{ gap:var(--space-4) }
.card__crest{ margin-bottom:0 }
.card .badge{ margin-bottom:calc(var(--space-2) * -1) }
.card__cta{ padding-top:var(--space-2) }

/* Every card in a row ends on the same line.
   A grid row makes its cards equally tall, but nothing was spending that height:
   the body stopped at its last line of text and the slack piled up underneath,
   so each button landed wherever its own excerpt happened to finish. The body
   now takes the height the row gives it, and the call to action pins to the
   bottom of it.

   The pinning has to be spelled out against the rhythm reset above, which zeroes
   margin-block on every child of a card with !important — that reset was eating
   the auto margin, which is why the buttons stayed ragged whatever was declared
   on .card__cta alone. */
.card__body{ flex:1 1 auto }
.card > .card__cta,
.card__body > .card__cta{ margin-top:auto !important }

/* And every line inside a card starts level across the row. The title, the
   operator/location line above it and a pillar's heading each keep two lines'
   worth of space whether they need one or two, so the text below them no longer
   steps down wherever one of them happened to wrap. Nothing is clipped — a
   longer title simply grows, and the button stays pinned to the bottom either
   way.

   Only once the items actually sit side by side. In a single column there is no
   row to line up with and the reserved second line would just be a blank one.

   Two lines is the floor, not the answer. A title that runs to three — at three
   columns `Inspección y certificación de equipos` does — still pushes its own
   text down, and no fixed number fixes that: it would have to be re-guessed at
   every width and in both languages, since the Spanish titles are the longer
   ones. assets/js/rows.js measures each row and lifts the floor to the tallest
   title in it, which is the only version that holds for copy nobody has written
   yet. This reserve is what a visitor without JavaScript gets, and it is already
   right wherever no title exceeds two lines. */
@media (min-width:600px){
  .pillar h3{ min-height:2lh }
}
@media (min-width:768px){
  .card .wp-block-post-title,
  .vacancy h3,
  .card .eyebrow--tight{ min-height:2lh }
}

/* Headings keep their own internal steps, since eyebrow and lead are not peers
   of the heading in the way two paragraphs are. */
.section-heading .eyebrow{ margin-bottom:var(--space-3) !important }
.section-heading .lede{ margin-top:var(--space-4) !important }
.page-hero__text h2{ margin-top:var(--space-2) !important }
.page-hero__text .lede{ margin-top:var(--space-5) !important }

/* Feature cards: same steps as the service cards. */
.feature{ gap:var(--space-3) }
.feature h3{ margin-top:var(--space-1) !important }

/* Entry pages */
.entry__main{ gap:var(--space-5) }
.entry__body > * + *{ margin-top:var(--space-5) !important }
.entry__body > h2{ margin-top:var(--space-7) !important }
.entry__body > h3{ margin-top:var(--space-6) !important }

/* ==========================================================================
   24. One vertical rhythm for every page
   Archives place their content in a single .section; pages nest the block's own
   .section inside .page-body, so the two paddings stacked and the gap under the
   navy header changed from one page to the next. Only .section may set vertical
   padding, and only once.
   ========================================================================== */

/* Structural wrappers carry no rhythm of their own. */
.page-body,
main > .wp-block-group:not(.section):not(.band),
.entry-content,
.wp-block-post-content{
  padding-block:0 !important;
  margin-block:0 !important;
}

/* A section inside another section would double the padding. */
.section .section{ padding-block:0 }

/* Loose paragraphs in a page that brings no sections of its own still need air. */
.page-body > .wp-block-post-content > p:first-child,
.page-body > .wp-block-post-content > h2:first-child{ margin-top:var(--section-y) !important }
.page-body > .wp-block-post-content > :last-child{ margin-bottom:var(--section-y) !important }

/* The distance under the navy header is owned by the header itself, not by
   whatever section happens to follow. Chasing it through the following element
   left three different gaps depending on how each page was composed; setting it
   once here makes every page open identically. */
.page-header{ margin-bottom:var(--section-y) }

.page-header + .section,
.page-header + * > .section:first-child,
.page-header + * > * > .section:first-child,
.page-header + * .section:first-of-type,
.page-header + * > * > * > .section:first-child{
  padding-block-start:0 !important;
}

/* The paired intro is a grid whose first row was adding its own leading. The
   header's margin already sets the distance, so it starts flush. */
.page-header + * .page-hero,
.page-header + * .about-intro{ margin-top:0 !important }
.page-header + * .section:first-of-type > .container{ margin-top:0 !important }

/* ==========================================================================
   25. Page loader
   Gated behind .js: with scripting off the markup renders hidden and never
   appears, so the site can never be covered by a curtain that cannot lift.
   ========================================================================== */

.loader{ display:none }
.js .loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul-800);
  transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.js .loader[hidden]{ display:none }
.js .loader::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-ceiba); background-size:180px; opacity:.05;
}
.js .loader.is-done{ opacity:0; visibility:hidden }

.loader__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-5);
  padding:var(--pad-x);
}
.loader__mark{
  width:72px; height:72px; color:var(--blanco);
  animation:loader-pulse 1.6s var(--ease-in-out) infinite;
}
@media (min-width:768px){ .loader__mark{ width:88px; height:88px } }
@keyframes loader-pulse{
  0%, 100%{ opacity:.75 }
  50%{ opacity:1 }
}
.loader__name{
  font:var(--fw-extrabold) 16px/1 var(--font-display);
  letter-spacing:.06em; color:var(--blanco); text-transform:uppercase;
}
.loader__bar{
  width:min(220px, 60vw); height:3px; border-radius:2px;
  background:rgba(255,255,255,.18); overflow:hidden;
}
.loader__bar span{
  display:block; width:8%; height:100%;
  background:var(--verde-600); border-radius:2px;
  transition:width var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  .loader__mark{ animation:none }
  .loader__bar span{ transition:none; width:100% }
}

/* ==========================================================================
   26. Mega menu
   Services and equipment group by taxonomy, so each column is a term. The panel
   is a full-width band under the masthead, not a floating box: at this scale a
   dropdown would either overflow the viewport or squeeze the columns.
   ========================================================================== */

.nav__item{ position:static }
.nav__chevron{
  width:16px; height:16px; margin-left:6px;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__item--mega .nav__link{ gap:0 }
.nav__item--mega .nav__link[aria-expanded="true"] .nav__chevron{ transform:rotate(180deg) }

.mega-wrap{
  position:absolute; left:0; right:0; top:100%; z-index:45;
  background:var(--blanco);
  border-top:1px solid var(--border-hairline);
  box-shadow:0 18px 40px rgba(16,27,57,.14);
  animation:mega-in var(--dur-base) var(--ease-out) both;
}
.mega-wrap[hidden]{ display:none }
@keyframes mega-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* One column of its own width. There used to be a 300px second one holding two
   featured entries with their photographs; the panel is a map of the catalogue,
   and the width reads better spent on the map. */
.mega__inner{ display:grid; gap:var(--space-7); padding-block:var(--space-6) var(--space-7) }

/* Row gap as well as column gap: every category is listed now, so a fifth and a
   sixth wrap to a second row instead of being silently dropped. */
.mega__cols{ display:grid; gap:var(--space-6); grid-template-columns:repeat(2,1fr) }
@media (min-width:1024px){ .mega__cols{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1400px){ .mega__cols{ grid-template-columns:repeat(4,1fr) } }

.mega__title{
  padding-bottom:var(--space-3); margin-bottom:var(--space-3);
  border-bottom:1px solid var(--border-hairline);
  font:var(--type-eyebrow); font-family:var(--font-core);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--verde-700);
}
.mega__links{ display:flex; flex-direction:column; gap:2px; margin:0 }
.mega__links a{
  display:block; padding:7px 0; font-size:var(--fs-body-sm); color:var(--text-strong);
  transition:color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.mega__links a:hover{ color:var(--verde-700); padding-left:6px; text-decoration:none }
.mega__all{
  display:inline-block; margin-top:var(--space-3);
  font:var(--fw-semibold) 11px/1.4 var(--font-core);
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde-700);
}
.mega__all:hover{ color:var(--azul-800); text-decoration:none }

/* The panel belongs to the desktop nav, which only exists from 1280px. */
@media (max-width:1279px){ .mega-wrap{ display:none !important } }

@media (prefers-reduced-motion:reduce){
  .mega-wrap{ animation:none }
  .mega__links a:hover{ padding-left:0 }
}

/* ==========================================================================
   22. Block-built pages

   The page copy used to be echoed from PHP; it is now ordinary blocks the
   client edits. The design is unchanged — these rules only teach the existing
   selectors the shapes core blocks come in: a <figure> where there was a bare
   <img>, a <div> where there was an <li>, a <p> where there was a <span>.
   ========================================================================== */

/* The green rule above a statement was an empty <span> nobody could have
   written in the editor. It is drawn by the card itself now. */
.statement{ isolation:isolate }
.statement::before{
  content:""; position:absolute; top:0; left:0; width:56px;
  height:var(--border-w-thick); background:var(--verde-700);
}
/* The old composition still ships its own span; two rules would stack. */
.statement__rule + *{ margin-top:0 }
.statement .statement__rule{ display:none }

/* Core wraps images in <figure>, which arrives with a margin of its own. */
.wp-block-image.about-intro__media,
.wp-block-image.page-hero__media,
.wp-block-image.band__media{ margin:0 }

/* Text that used to be a <span> inside a flex row is a paragraph now. */
.value > p,
.legal__notice > p,
.client > p{ margin:0 }

/* Wrappers core introduces where the markup had an unclassed <div>. */
.pillar__body > *,
.split__text > *,
.callout__text > *,
.about-intro__text > .wp-block-buttons{ margin-block:0 }

.pillar__body{ min-width:0 }
.split__text{ position:relative; z-index:2 }

/* The block styles registered for the design system, so choosing "Antetítulo"
   or "Entradilla" from the editor's Styles panel does what it says. */
.is-style-ceiba-eyebrow{
  font:var(--fw-semibold) var(--fs-eyebrow)/1.4 var(--font-core);
  letter-spacing:.18em; text-transform:uppercase; color:var(--verde-700);
}
.is-style-ceiba-lede{
  font:var(--type-body-lg); font-family:var(--font-core);
  max-width:52ch; color:var(--text-muted);
}
/* "Justificado": on a paragraph or a list it is that block; on a group it is
   every paragraph and list inside, so a whole section is one click. Hyphens
   keep the word spacing even, the way the client's own documents set it. */
.is-style-ceiba-justified,
.is-style-ceiba-justified p,
.is-style-ceiba-justified li{ text-align:justify; hyphens:auto }

/* A group standing in for the old <ul>: the grid rules are unchanged, but the
   list-reset that came free with <ul> is not. */
.value-list,
.pillars,
.marquee__track{ list-style:none; padding-left:0 }

/* Core's flow rhythm, kept out of the theme's components.

   A section written as blocks is a core/group, and core gives every group's
   children a top margin of their own (`:where(.is-layout-flow) > *`). These
   components already carry their own spacing — set by gap, by min-height or by
   the rules just above — so the imported margin only made them taller. It is
   dropped here, and the few gaps the design does want are restated. */
/* Inside a component, where the spacing is the component's own business. */
.statement > *,
.value > *,
.pillar > *,
.pillar__body > *,
.callout__text > *,
.split__text > *,
.legal__notice > *,
.legal__clause > *,
.aside-card > *{ margin-block-start:0 }

/* And on the items of every grid the theme lays out. This one matters more
   than it looks: a margin on a grid item is added to its row, so a 24px top
   margin on the second card made every row 24px taller than the card in it. */
.value-list > *,
.pillars > *,
.pledges > *,
.feature-grid > *,
.statement-pair > *,
.grid > *,
.stats > *,
.marquee__track > *,
.about-intro > *,
.page-hero > *,
.contact > *,
.split > *,
.callout > *,
.legal > *,
.legal__clauses > *,
.clients-block > *{ margin-block-start:0 }

/* Restated as the logical property, not `margin-top`. The two are separate
   properties that resolve to the same edge, and between them the cascade goes
   by declaration order rather than specificity — so a plain `margin-top` here
   would lose to the `margin-block-start:0` above it however specific it was. */
/* `:first-child` is in the selector to outweigh core's own
   `:root :where(.is-layout-flow) > :first-child{ margin-block-start:0 }`,
   which counts as two classes and beat the plain `.statement h3`. */
.statement h3:first-child{ margin-block-start:var(--space-2) }
.statement p{ margin-block-start:var(--space-4) }
.legal__clause p{ margin-block-start:var(--space-3) }
.pillar__body p{ margin-block-start:6px }
.split__copy{ margin-block-start:var(--space-4) }
.split__action{ margin-block-start:var(--space-6) }

/* The footer, now that it is written as blocks in the template part.

   Same story as the pages: core makes every group a flow container and gives
   its children a top margin, which on a grid item is added to the row. The
   list also arrives with the bullets and indent a plain <ul> did not have. */
.footer__grid > *,
.footer__brand > *,
.footer__grid > .wp-block-group > *{ margin-block-start:0 }

/* Both written to outweigh the reset above, which reaches two levels down. */
.footer__brand > .footer__blurb{ margin-block-start:var(--space-4) }
.footer__brand > .social{ margin-block-start:var(--space-5) }

.footer__links{ list-style:none; padding-left:0; margin:0 }
.footer__links li{ margin:0 }

/* The heading sits straight on top of its column. */
.footer__grid h4{ margin-block:0 var(--space-4) }


/* ==========================================================================
   27. September 2026 revisions
   ========================================================================== */

/* The hero eyebrow carries the company name now, not a category, and at 12px
   it read as a caption. Two sizes up, still a whisper next to the headline. */
.hero__inner .eyebrow{ font-size:15px; letter-spacing:.16em }

/* A project page opens on its text with the green rule beside the whole of it,
   where the lead paragraph alone used to carry the rule. */
.entry__body--rule{ padding-left:var(--space-5); border-left:var(--rule-accent) }
.entry__body--rule > *:first-child{ margin-top:0 }

/* A rig page: the base of operation takes the rule the summary used to have. */
.detail__meta--rule{
  padding-left:var(--space-4); border-left:var(--rule-accent);
  color:var(--text-strong); font-size:var(--fs-body);
}
.detail__meta--rule .wp-block-post-terms__prefix{ color:var(--text-muted) }

/* Goals band: two panels of figures on the safety and sustainability pages —
   perfect days per unit on one side, the people on the other. */
.goals{ display:grid; gap:var(--space-5) }
@media (min-width:900px){ .goals{ grid-template-columns:1fr 1fr; gap:var(--space-6) } }
.goal{
  padding:var(--space-5) var(--space-6);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
}
.goal .eyebrow{ margin-bottom:var(--space-4) }
/* Two figures side by side, each as wide as its label needs and no wider: a
   half-and-half grid squeezed «LC-001 · nov 2025 – ago 2026» onto three lines. */
.goal .stats{ grid-template-columns:repeat(2, minmax(0, max-content)); column-gap:var(--space-7); row-gap:var(--space-4) }
.goal .stat__value{ font-size:clamp(36px,5vw,52px) }
.goal .stat__label{ color:rgba(255,255,255,.86); max-width:18ch }
.goal > p:last-child{ margin-top:var(--space-5); max-width:48ch; color:rgba(255,255,255,.82) }
.goal > p:last-child strong{ color:var(--blanco) }

/* A menu entry with children: the same disclosure as the catalogue panels, in
   a box the width of its list rather than a band across the page. */
.nav__item--menu{ position:relative }
.mega-wrap--menu{
  left:0; right:auto; min-width:260px;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.mega--menu{ padding:var(--space-3) var(--space-5) var(--space-4) }
.mega--menu .mega__links a{ white-space:nowrap }

/* And on the phone, a child is the next line, set in from its parent. */
.panel__nav .panel__child{ padding-left:var(--space-5); font-size:16px }