/* Ruberoid — the brand family */
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-LightOblique.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-Oblique.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:'Ruberoid';src:url('fonts/Ruberoid-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:'Ruberoid','Hanken Grotesk',system-ui,-apple-system,sans-serif;font-weight:400;color:#15233f;background:#ffffff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  ::selection{background:#156afe;color:#fff}
  /* Big portadilla titles — Ruberoid ExtraBold (PDF 72pt) */
  .ff-cover{font-family:'Ruberoid','Hanken Grotesk',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
  /* Section titles — Ruberoid ExtraBold */
  .ff-title{font-family:'Ruberoid','Hanken Grotesk',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
  @keyframes mtFade{from{transform:translateY(15px)}to{transform:translateY(0)}}
  @keyframes mtFadeIn{from{opacity:0}to{opacity:1}}

  /* Scroll-triggered reveals — re-trigger every time element enters viewport */
  [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
  [data-reveal="left"]{transform:translateX(-32px)}
  [data-reveal="right"]{transform:translateX(32px)}
  [data-reveal="scale"]{transform:scale(.94)}
  [data-reveal].in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  }
  /* SVG color tokens — the files in /img stay untouched; their internal classes get painted here */
  .svg-host{display:block}
  .svg-host > svg{display:block;width:100%;height:100%}
  .svg-white .st0{fill:none}
  .svg-white .st1,.svg-white .st2{fill:#ffffff}
  .svg-dark .st0{fill:none}
  .svg-dark .st1,.svg-dark .st2{fill:#15233f}
  .svg-titulo .st0{fill:none}
  .svg-titulo .st1{fill:#ffffff}
  .svg-titulo .st2{fill:#156afe}
/* Local-only additions */
.mt-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(21,35,63,.09)}
.mt-header-inner{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4.5vw,60px);height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mt-logo-link{all:unset;cursor:pointer;display:flex;align-items:center}
.mt-menu-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:11px;padding:10px 20px 10px 18px;border:1px solid rgba(21,35,63,.16);border-radius:100px;background:#fff;transition:background .2s ease,border-color .2s ease,color .2s ease}
.mt-menu-btn:hover{background:#156afe;border-color:#156afe;color:#fff}
.mt-menu-dots{display:flex;gap:4px}
.mt-menu-dots span{width:6px;height:6px;border-radius:50%;background:#156afe}
.mt-menu-btn:hover .mt-menu-dots span{background:#fff}
.mt-menu-label{font-size:14px;font-weight:600;letter-spacing:.02em}
.mt-header-actions{display:inline-flex;align-items:center;gap:8px}
.mt-lang-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:40px;min-width:52px;padding:0 16px;border:1px solid rgba(21,35,63,.16);border-radius:100px;background:#fff;color:#156afe;transition:background .2s ease,border-color .2s ease,color .2s ease}
.mt-lang-btn:hover{background:#156afe;border-color:#156afe;color:#fff}
.mt-lang-code{font-size:13px;font-weight:700;letter-spacing:.08em}

/* Smaller Metalsa logo + keep the header on a single row */
.mt-header .mt-logo-link .svg-host{height:clamp(15px,1.6vw,19px) !important}
.mt-header-inner{flex-wrap:nowrap}
.mt-logo-link,.mt-header-actions{flex-shrink:0}

/* Milestones — expandable blue cards (accordion, grows downward) */
.mt-mile-card{background:#fff;border:1.6px solid #156afe;border-radius:18px;overflow:hidden;transition:box-shadow .25s ease}
.mt-mile-card.open{box-shadow:0 12px 28px rgba(21,106,254,.16)}
.mt-mile-head{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:16px;padding:22px 24px;min-height:96px}
.mt-mile-head:hover .mt-mile-title{color:#0f52c9}
.mt-mile-ico{width:22px;height:22px;flex:none;object-fit:contain}
.mt-mile-title{margin:0;flex:1;color:#156afe;font-weight:700;font-size:clamp(15px,1.35vw,17px);line-height:1.3}
.mt-mile-chev{flex:none;width:11px;height:11px;border-right:2.5px solid #156afe;border-bottom:2.5px solid #156afe;transform:rotate(45deg) translateY(-2px);transition:transform .3s ease;margin-right:4px}
.mt-mile-card.open .mt-mile-chev{transform:rotate(-135deg) translateY(-2px)}
.mt-mile-panel{height:0;overflow:hidden;transition:height .38s cubic-bezier(.22,.61,.36,1)}
.mt-mile-panel-inner{padding:0 24px 24px 62px}
.mt-mile-desc{margin:0;color:#15233f;font-size:clamp(14px,1.12vw,16px);line-height:1.62;font-weight:400}

/* Desktop inline nav — always visible on web */
.mt-nav{display:none}
.mt-nav-link{color:#15233f;text-decoration:none;font-weight:600;font-size:clamp(10px,.92vw,12.5px);letter-spacing:0;line-height:1;white-space:nowrap;padding:6px 1px;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease}
.mt-nav-link:hover{color:#156afe}
.mt-nav-link[aria-current="page"]{color:#156afe;border-bottom-color:#156afe}

/* Language dropdown (arrow submenu) */
.mt-lang{position:relative;display:inline-flex}
.mt-lang-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid rgba(21,35,63,.16);border-radius:100px;background:#fff;transition:background .2s ease,border-color .2s ease,color .2s ease}
.mt-lang-toggle:hover{background:#156afe;border-color:#156afe;color:#fff}
.mt-lang-toggle .mt-lang-code{font-size:13px;font-weight:700;letter-spacing:.08em}
.mt-lang-arrow{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s ease}
.mt-lang.open .mt-lang-arrow{transform:rotate(-135deg) translate(-1px,-1px)}
.mt-lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:158px;background:#fff;border:1px solid rgba(21,35,63,.12);border-radius:14px;box-shadow:0 12px 32px rgba(21,35,63,.16);padding:6px;display:none;flex-direction:column;z-index:80}
.mt-lang.open .mt-lang-menu{display:flex}
.mt-lang-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:#15233f;text-decoration:none;font-size:14px;font-weight:600;transition:background .16s ease,color .16s ease}
.mt-lang-opt:hover{background:rgba(21,106,254,.08);color:#156afe}
.mt-lang-opt[aria-current="page"]{color:#156afe;background:rgba(21,106,254,.06)}
.mt-lang-opt .mt-lang-tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.08em;opacity:.55}

@media (min-width:1024px){
  .mt-header-inner{gap:clamp(12px,1.5vw,24px)}
  .mt-nav{display:flex;flex:1;justify-content:center;align-items:center;gap:clamp(8px,1.1vw,16px);flex-wrap:nowrap;min-width:0}
  .mt-menu-btn{display:none}
}

.mt-overlay{position:fixed;inset:0;z-index:100;background:#156afe;color:#fff;overflow-y:auto;display:none;animation:mtFadeIn .35s ease}
.mt-overlay.open{display:block}
.mt-overlay-inner{max-width:1240px;margin:0 auto;padding:clamp(24px,4vw,48px) clamp(20px,5vw,64px) clamp(48px,6vw,80px)}
.mt-overlay-head{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;background:#156afe;padding:8px 0 22px;z-index:2}
.mt-overlay-eyebrow{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.mt-overlay-close{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border:1px solid rgba(255,255,255,.4);border-radius:100px;font-size:14px;font-weight:600}
.mt-overlay-close:hover{background:#fff;color:#156afe}
.mt-overlay-title{font-weight:800;font-size:clamp(44px,8.4vw,108px);line-height:.96;letter-spacing:-.02em;margin:8px 0 clamp(36px,5vw,64px)}
.mt-overlay-list{max-width:880px;display:flex;flex-direction:column}
.mt-overlay-item{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:clamp(18px,2vw,24px) 0;border-bottom:1px solid rgba(255,255,255,.22);transition:padding-left .3s ease;color:#fff;text-decoration:none}
.mt-overlay-item:hover{padding-left:14px}
.mt-overlay-item .ttl{flex:1;font-weight:700;font-size:clamp(20px,2.4vw,30px);line-height:1.2}
.mt-overlay-item .num{opacity:.65;font-size:14px;letter-spacing:.04em}
body.mt-menu-open{overflow:hidden}


/* Hide broken-image glyphs gracefully while user drops their files in */
img[data-slot] { background: #eef1f6; color: transparent; }
img[data-slot]:not([src=""])::before { content: ""; display: block; }