@import url('cartrigo-theme.css');

:root {
  --black: var(--ct-bg);
  --white: var(--ct-ink);
  --gold: var(--ct-gold);
  --gold-light: var(--ct-gold-hover);
  --dark-1: var(--ct-bg);
  --dark-2: var(--ct-surface);
  --dark-3: var(--ct-surface-hover);
  --text-muted: var(--ct-text-muted);
  --text-mid: var(--ct-text-muted);
  --border: var(--ct-border);
  --bg: var(--ct-bg);
  --bg2: var(--ct-surface);
  --bg3: var(--ct-surface-hover);
  --text: var(--ct-ink);
  --muted: var(--ct-text-muted);
  --muted2: var(--ct-text-muted);
  --dark: var(--ct-bg);
  --d2: var(--ct-surface);
  --d3: var(--ct-surface-hover);
  --surface: var(--ct-surface);
  --surface2: var(--ct-surface-hover);
  --paper: var(--ct-surface);
  --paper2: var(--ct-surface-hover);
  --paper3: var(--ct-bg);
  --ink: var(--ct-ink);
  --ink2: var(--ct-ink);
  --ink3: var(--ct-text-muted);
  --rule: var(--ct-border);
  --rule2: var(--ct-surface-hover);
  --nav-bg: var(--ct-header);
  --nav-text: var(--ct-header-text);
}

body { background: var(--ct-bg); color: var(--ct-ink); overflow-x: hidden; }
nav { background: rgba(26, 23, 20, .96) !important; color: var(--ct-header-text); }
nav::before { background: rgba(26, 23, 20, .96) !important; }
nav .nav-logo,
nav .logo,
nav .nav-links a:not(.nav-cta),
nav .lang-btn:not(.active) { color: var(--ct-header-text); }
nav .nav-links a:hover,
nav .nav-links a.active:not(.nav-cta) { color: var(--ct-surface); }
nav .nav-cta,
nav .btn-primary,
nav a[class*="cta"] { background: var(--ct-gold) !important; color: var(--ct-ink) !important; }
.menu-toggle span { background: var(--ct-surface) !important; }
footer {
  background: var(--ct-header) !important;
  color: var(--ct-header-text) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
footer .footer-logo,
footer h1,
footer h2,
footer h3,
footer h4,
footer strong { color: var(--ct-surface) !important; }
footer a,
footer p,
footer span,
footer .footer-tagline,
footer .footer-copy,
footer .footer-bottom { color: var(--ct-header-text) !important; }
footer a:hover { color: var(--ct-surface) !important; }
input,
select,
textarea { background: var(--ct-surface); color: var(--ct-ink); border-color: var(--ct-border); }

.ct-shell-nav {
  /* RESPONSIVE HOTFIX: the inline page <style> sets `nav{position:fixed;...}` but this class selector
     (higher specificity than the bare `nav` element selector) was overriding it back to `position:relative`,
     silently turning off the sticky/fixed header on every page once cartrigo-shell.js renders the nav. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 76px;
  padding: 0 clamp(20px, 5vw, 72px) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 1000;
}
.ct-shell-nav .nav-logo img,
.ct-shell-footer .footer-logo img { display: block; width: auto; height: 38px; }
.ct-shell-nav .nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.ct-shell-nav .nav-links a { color: var(--ct-header-text); text-decoration: none; white-space: nowrap; }
.ct-shell-nav .nav-links a:hover,
.ct-shell-nav .nav-links a.active { color: var(--ct-surface); }
.ct-shell-nav .nav-cta {
  padding: 11px 18px;
  background: var(--ct-gold) !important;
  color: var(--ct-ink) !important;
}
.ct-shell-nav .menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.ct-shell-backdrop { display: none; }  /* baseline: only ever shown inside the <=1050px rule below */
.ct-shell-nav .menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; }

.ct-shell-footer { padding: 48px clamp(20px, 5vw, 72px) 24px !important; }
.ct-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr));
  gap: 36px;
  text-align: left;
}
.ct-footer-brand p { max-width: 320px; margin-top: 16px; line-height: 1.6; }
.ct-footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ct-footer-group strong { margin-bottom: 4px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.ct-footer-group a { font-size: .82rem; text-decoration: none; }
.ct-footer-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .72rem;
}

@media (max-width: 1050px) {
  .ct-shell-nav .menu-toggle { display: block; cursor: pointer; }

  /* HAMBURGER HOTFIX (round 2): true off-canvas overlay, isolated with every box-model property this rule
     needs set explicitly (not just position). A page-local `.nav-links`/`.menu-toggle` mobile-drawer style
     still ships inline on every en/*.html page as a no-JS fallback (bare class selectors, e.g.
     `.nav-links{position:fixed;right:0;bottom:0;width:100%;max-width:300px;transform:translateX(100%);
     height:100vh;z-index:100;text-align:right;...}`). Those bare-class rules are LOWER specificity than
     `.ct-shell-nav .nav-links` and lose on any property both sides set, but silently WIN on any property only
     they set (z-index, border-left, justify-content, padding, gap) because this block never declared it. The
     visible symptom was exactly that half-open black column reported on phones: right-aligned drawer geometry
     (old) combined with dropdown positioning (previous fix here), because not every property was reset.
     Every relevant box property is pinned below, and this block is also excluded from flex/grid document flow
     by `position: fixed` — it never participates in the nav's own flex layout and can never change nav's or
     the document's width. `.ct-shell-nav` itself is the positioning anchor (`position: fixed`, set above). */
  .ct-shell-nav .nav-links {
    display: none;
    position: fixed;
    top: 76px;              /* nav's own min-height; kept in sync with .ct-shell-nav min-height above */
    right: 0;
    left: auto;
    /* MOBILE NAV FIX: `bottom: auto` here on purpose (must stay an explicit declaration, not just an
       omitted property — a legacy per-page inline <style> fallback, shipped on every en/*.html page for
       (max-width: 900px), still sets `.nav-links{bottom:0}` at lower specificity; if this rule doesn't
       declare `bottom` at all, that legacy `bottom:0` is the only declaration left standing and still wins).
       With `bottom` AND `top` both resolving to a set length on a `position:fixed` box whose `height` is
       `auto`, the vertical auto-height calc (CSS2.1 10.6.4 case 5) is content-based, but combined with this
       element's own `overflow-y:auto` Chrome/WebKit resolves that content-based pass to 0 (i.e. the box
       collapses to just its padding: 48px), even though the drawer's real content (nav links) is 250px+
       tall. This was the actual bug: the backdrop showed (it has no such auto-height dependency) while the
       drawer rendered as an invisible 48px sliver behind/under it. Forcing `bottom: auto` lets the box size
       to its content instead (confirmed in a live repro: 48px -> ~300px), while `max-height` below still
       clamps it to the viewport and `overflow-y: auto` still makes it scroll if the menu ever grows taller
       than that. Do not remove this `bottom: auto` or re-add `bottom: 0` without re-testing on a real phone. */
    bottom: auto;
    width: min(360px, 88vw);
    max-width: 100vw;
    height: auto;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    margin: 0;
    padding: 24px;
    background: var(--ct-header);
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, .08);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    transform: none;
    transition: none;
    text-align: left;
    z-index: 1001;
    box-sizing: border-box;
  }
  .ct-shell-nav .nav-links.open { display: flex; }
  .ct-shell-nav .nav-links a { display: block; text-align: left; }

  /* Backdrop rendered by cartrigo-shell.js behind the drawer; tapping it closes the menu. */
  .ct-shell-backdrop {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
  }
  .ct-shell-backdrop.open { display: block; }
}

@media (max-width: 760px) {
  .ct-footer-inner { grid-template-columns: 1fr 1fr; }
  .ct-footer-brand { grid-column: 1 / -1; }
  .ct-footer-bottom { flex-direction: column; }
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 24px 0 !important;
  }
  [style*="grid-template-columns:1fr auto 1fr"] > div,
  [style*="grid-template-columns: 1fr auto 1fr"] > div {
    padding: 18px 20px !important;
    border-left: 0 !important;
  }
}

@media (max-width: 480px) {
  .ct-footer-inner { grid-template-columns: 1fr; }
  .ct-footer-brand { grid-column: auto; }
}

/* TICKET (final public header polish): single shared language-switch component. Restores the ES|EN control
   that used to exist in this project — its CSS survived, orphaned, in index.html/equipo.html/gracias.html
   only (both EN and ES), with no markup left anywhere referencing it (confirmed by grep: zero lang-btn
   elements in any page). Centralized here — rather than duplicated per page, which is how it drifted into
   3 slightly different local versions — so every public page renders an identical, on-palette selector.
   Uses only the existing --ct-* tokens already used elsewhere in this file; no new colors. !important is
   used because 3 pages still carry their own older, lower-specificity .lang-btn rules from before this
   ticket; those are left in place (out of scope) and simply overridden. */
.lang-toggle { display:flex; gap:0; border:1px solid rgba(255,255,255,0.15); border-radius:4px; overflow:hidden; margin-left:4px; }
nav .lang-btn { padding:5px 10px; font-size:0.7rem; font-weight:700; cursor:pointer; transition:all 0.15s ease; text-decoration:none; letter-spacing:0.04em; line-height:1.4; }
nav .lang-btn.active { background: var(--ct-gold) !important; color: var(--ct-ink) !important; }
nav .lang-btn:not(.active) { color: var(--ct-header-text) !important; background:transparent !important; }
nav .lang-btn:not(.active):hover { color: var(--ct-surface) !important; }
@media (max-width: 1050px) {
  /* Both mobile drawer implementations in this project use column flex layout with stretch as the default
     cross-axis alignment (the ES/legacy per-page drawers at 900px, the EN shell drawer at 1050px) — without
     this, .lang-toggle (no width of its own) would stretch to the drawer's full width instead of sizing to
     its two small buttons. flex-start keeps it compact and left-aligned like every other drawer item. */
  .nav-links .lang-toggle,
  .ct-shell-nav .nav-links .lang-toggle { align-self: flex-start; margin: 0 0 8px 0; }
}

/* TICKET (final public header polish): single shared rule enlarging the CARTRIGO Advanced logo across every
   public EN/ES page. Overrides each page's own inline height:1.4em (which rendered ~25-28px depending on
   that page's local .nav-logo font-size, itself inconsistent per page) with one fixed size so every page
   matches exactly. width:auto keeps the logo file's own aspect ratio intact — no crop, no distortion, no
   new asset. */
.nav-logo img { height: 38px !important; width: auto !important; }