/* SURTANK: animated data ocean and the original five-color journey. */
[hidden]{display:none!important}
/* Full-bleed calm ocean. Text stays in the content grid above the image. */
.hero{position:relative;isolation:isolate;padding-top:0;background:#211e1b;color:#fff8ec}
.hero .ocean-visual{position:absolute;inset:0;margin:0;width:100%;height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;isolation:isolate;touch-action:pan-y}
.ocean-visual:before{display:none}
.ocean-image,#ocean-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block}
#ocean-canvas{opacity:0;pointer-events:none}
.ocean-ready #ocean-canvas{opacity:1}
.ocean-ready .ocean-image{opacity:0}
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,19,18,.8),rgba(20,19,18,.55) 34%,rgba(20,19,18,.08) 60%,transparent 80%)}
.hero .hero-grid{position:relative;z-index:2;display:block;min-height:660px;padding-block:62px 50px;pointer-events:none}
.hero .hero-copy{max-width:620px;padding:0;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero .hero-copy .eyebrow{color:#f5e9d5}
.hero h1{font-size:clamp(56px,5.7vw,86px);line-height:1.02;letter-spacing:-4px;text-shadow:0 2px 24px #00000026}
.hero h1 .accent{color:#f9af1d}
.hero .hero-intro{color:#fff4e2;max-width:440px;font-size:17px;line-height:1.65;margin-top:26px}
.hero .button{background:#f9af1d;color:#262626;border-color:#f9af1d;margin-top:28px}
.hero .button:hover{background:#ffc64d;border-color:#ffc64d}
.hero .hero-note{color:#eee4d6;font-size:10px}
.hero .hero-bottom{position:relative;z-index:2;margin-top:0;color:#e6d9c8;border-color:#ffffff30;pointer-events:none}
.hero .hero-bottom a{color:#fff4df;pointer-events:auto}
.ocean-motion{position:absolute;right:24px;top:24px;z-index:3;width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffe6af75;border-radius:50%;background:#26262655;color:#fff0cc;backdrop-filter:blur(8px);font-size:17px}
.ocean-motion:hover{background:#f9af1d33;border-color:#f9af1d}
.ocean-motion:focus-visible{outline-color:#ffdc65}
.ocean-visual:focus-visible{outline:2px solid #f9af1d;outline-offset:-4px}
.stage-tab[data-stage="0"],.stage-panel[data-stage="0"]{--stage-color:#f9af1d;--stage-tint:#fff6db}
.stage-tab[data-stage="1"],.stage-panel[data-stage="1"]{--stage-color:#f1870f;--stage-tint:#fff0db}
.stage-tab[data-stage="2"],.stage-panel[data-stage="2"]{--stage-color:#ee7113;--stage-tint:#ffebdc}
.stage-tab[data-stage="3"],.stage-panel[data-stage="3"]{--stage-color:#ea5e16;--stage-tint:#ffe8df}
.stage-tab[data-stage="4"],.stage-panel[data-stage="4"]{--stage-color:#e8441e;--stage-tint:#ffe7e1}
.stage-tab{position:relative;padding-inline:7px 12px;gap:21px}
.stage-mark{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;position:relative;margin:4px 5px 0}
.stage-mark:before{content:"";position:absolute;inset:3px;transform:rotate(45deg);border:1px solid var(--stage-color);background:var(--stage-color);opacity:.85;transition:background .2s,box-shadow .2s}
.stage-mark .stage-num{align-self:auto;color:#262626;margin:0;position:relative;font-size:10px;font-weight:600;z-index:1}
.stage-tab[aria-selected="true"] .stage-mark:before{background:var(--stage-color);box-shadow:0 0 20px color-mix(in srgb,var(--stage-color) 24%,transparent)}
.stage-tab[aria-selected="true"] .stage-mark .stage-num{color:#262626}
.stage-tab[aria-selected="true"] .tab-arrow{color:var(--stage-color)}
.stage-tab[aria-selected="true"]{border-bottom-color:var(--stage-color)}
.stage-tab:focus-visible{outline-color:var(--stage-color)}
.stage-panels{display:flex;flex-direction:column;gap:22px;min-width:0}
.stage-panel{border-top:5px solid var(--stage-color);background:var(--stage-tint);min-height:468px;transition:background .2s}
.panel-topline>span:last-child{font-size:16px;color:#262626;font-weight:600;position:relative;display:grid;place-items:center;width:40px;height:40px;isolation:isolate}
.panel-topline>span:last-child:before{content:"";position:absolute;inset:5px;background:var(--stage-color);transform:rotate(45deg);z-index:-1}
.panel-topline{margin-bottom:27px}
.stage-panel h3{max-width:390px}
.contact-form .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-note{margin-top:35px;padding-top:20px;border-top:1px solid var(--line);max-width:320px;font-size:12px;line-height:1.8;color:var(--muted)}
.form-result{border-left:4px solid #c79218;background:#fff9e9}
.form-result[role="alert"]{background:#fff1eb;border-color:#c24b20}
.form-submit[aria-busy="true"]{cursor:progress}
.form-privacy a{text-decoration:underline;text-underline-offset:2px}
.form-notice a{color:var(--burnt);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){.stage-tab{gap:15px}.hero .hero-grid{min-height:650px}.hero .hero-copy{max-width:540px}}
@media(max-width:820px){.stage-mark{width:30px;height:30px;margin-inline:3px}.stage-tab{gap:12px}.stage-panel{padding:25px;min-height:475px}.hero .hero-grid{padding-block:54px 110px;min-height:640px}.hero .hero-intro{max-width:410px;font-size:16px}.hero:after{background:linear-gradient(90deg,#141312d4,#14131280 54%,#14131220)}}
@media(max-width:640px){.stage-mark{width:30px;height:30px;margin-inline:4px}.stage-tab{gap:18px;padding-block:16px}.stage-panel{min-height:440px}.contact-note{margin-top:25px}.hero .hero-grid{min-height:730px;padding-block:48px 205px}.hero .hero-copy{max-width:none}.hero h1{font-size:clamp(48px,12.5vw,72px);letter-spacing:-2.8px}.hero .hero-copy .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:23px}.hero .hero-intro{font-size:15px;max-width:340px;margin-top:24px}.hero .hero-note{font-size:9px;max-width:310px}.hero:after{background:linear-gradient(180deg,#141312c9 0%,#14131270 48%,#1413120d 76%,#14131260)}.hero .hero-bottom{padding-block:20px;font-size:9px}.ocean-motion{top:auto;bottom:88px;right:20px}}
@media(prefers-reduced-motion:reduce){.stage-panel,.stage-mark:before{transition:none}}

/* Header colors follow the actual section behind the fixed navigation. */
.site-header{position:fixed;inset:0 0 auto;width:100%;--header-ink:#262626;--header-border:#26262624;--header-bg:#ffffffed;--header-menu:#fffffff7;color:var(--header-ink);background:var(--header-bg);border-bottom-color:var(--header-border);box-shadow:0 4px 24px #00000006;backdrop-filter:blur(16px);transition:background-color .38s ease,color .38s ease,border-color .38s ease,box-shadow .38s ease}
.site-header[data-tone="dark"]{--header-ink:#fff5e4;--header-border:#fff2d92e;--header-bg:#181715c9;--header-menu:#1b1916f7;box-shadow:none}
.site-header[data-tone="dark"][data-at-top="true"]{--header-bg:#19181624;--header-border:transparent;backdrop-filter:blur(4px)}
.site-header .brand{position:relative}
.site-header .brand-light{position:absolute;inset:0;filter:brightness(0) invert(1);clip-path:inset(0 0 52% 0);opacity:0;transition:opacity .38s ease}
.site-header[data-tone="dark"] .brand-light{opacity:1}
.site-header .main-nav{color:inherit}
.site-header .main-nav a{transition:color .38s ease,background-color .25s ease,border-color .38s ease}
.site-header .nav-contact{border-color:currentColor}
.site-header[data-tone="dark"] .nav-contact:hover{background:#fff5e4;color:#262626}
.site-header .menu-toggle{color:inherit;border-color:var(--header-border);transition:border-color .38s ease}
.site-header .menu-toggle span{background:currentColor;transition:transform .2s ease,background-color .38s ease}
.site-header :focus-visible{outline-color:currentColor}
.hero .hero-grid{padding-top:166px;min-height:764px}
.ocean-motion{top:128px}
@media(max-width:1100px){.hero .hero-grid{min-height:754px}}
@media(max-width:820px){.hero .hero-grid{padding-top:142px;min-height:728px}.ocean-motion{top:112px}}
@media(max-width:640px){.hero .hero-grid{padding-top:126px;min-height:808px}.ocean-motion{top:auto}.site-header .main-nav{background:var(--header-menu);border-color:var(--header-border);transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background-color .38s ease,color .38s ease}.site-header .main-nav>a:not(.nav-contact){border-bottom-color:var(--header-border)}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .brand-light,.site-header .main-nav,.site-header .main-nav a,.site-header .menu-toggle,.site-header .menu-toggle span{transition:none}}
@media print{.site-header{position:static;background:#fff;color:#262626}.site-header .brand-light{display:none}.hero .hero-grid{padding-top:20px;min-height:500px}}

/* Careers / Ofertas laborales section */
.careers{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.careers-page{padding-top:calc(var(--space) + 84px)}
.careers-page-title{font-weight:500;font-size:clamp(42px,4.4vw,66px);line-height:1.05;letter-spacing:-3px;margin:0}
.main-nav>a[aria-current="page"]:after{width:100%}
.careers-intro>p{max-width:520px}
.careers-intro strong{color:var(--ink);font-weight:600}

.benefits-showcase{margin-top:64px;background:var(--ink);color:#fff;padding:48px;position:relative;overflow:hidden}
.benefits-showcase:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#f9af1d 0% 20%,#f1870f 20% 40%,#ee7113 40% 60%,#ea5e16 60% 80%,#e8441e 80% 100%)}
.benefits-header{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;padding-bottom:36px;border-bottom:1px solid #3d3d38}
.benefits-header .eyebrow{color:#f9af1d;margin-bottom:14px}
.benefits-header h3{font-size:clamp(28px,2.8vw,40px);font-weight:500;letter-spacing:-1.4px;line-height:1.12}
.benefits-sub{font-size:14px;line-height:1.8;color:#c9c8c0}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
.benefit-card{background:#2f2f2b;border:1px solid #42423c;padding:28px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s}
.benefit-card:hover{border-color:#f9af1d;transform:translateY(-2px)}
.benefit-num{font-size:11px;font-weight:700;color:#f9af1d;letter-spacing:1.4px}
.benefit-card h4{margin:0;font-size:18px;font-weight:600;letter-spacing:-.4px;line-height:1.3;color:#fff}
.benefit-card p{font-size:13px;line-height:1.75;color:#c4c3bb}

.jobs-header{margin-top:72px;margin-bottom:36px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.jobs-header .eyebrow{color:var(--burnt);margin-bottom:12px}
.jobs-header h3{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-1.6px;line-height:1.1}
.bilingual-pill{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid #e0cabd;padding:14px 20px;font-size:12px;line-height:1.5;color:var(--ink);box-shadow:0 6px 20px #26262608}
.bilingual-pill strong{color:var(--burnt)}

.jobs-grid{display:grid;grid-template-columns:1fr;gap:32px}
.job-card{background:#fff;border:1px solid var(--line);border-top:5px solid var(--stage-color,var(--orange));padding:40px;transition:box-shadow .25s,border-color .25s}
.job-card[data-stage="0"]{--stage-color:#f9af1d}
.job-card[data-stage="1"]{--stage-color:#f1870f}
.job-card[data-stage="2"]{--stage-color:#ee7113}
.job-card[data-stage="3"]{--stage-color:#e8441e}
.job-card:hover{box-shadow:0 18px 42px #2626260d}

.job-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.job-badges{display:flex;flex-wrap:wrap;gap:8px}
.job-badge{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:6px 12px;line-height:1.3}
.badge-area{background:var(--warm);color:var(--ink);border:1px solid var(--line)}
.badge-lang{background:#fff1eb;color:var(--burnt);border:1px solid #f3c4b0}
.badge-mode{background:#f3f2ed;color:var(--muted)}
.job-index{font-size:14px;font-weight:700;color:var(--ink);width:36px;height:36px;display:grid;place-items:center;position:relative;isolation:isolate;flex-shrink:0}
.job-index:before{content:"";position:absolute;inset:4px;background:var(--stage-color,var(--orange));transform:rotate(45deg);z-index:-1;opacity:.85}

.job-card h3{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-1px;line-height:1.15;margin-bottom:14px;color:var(--ink)}
.job-summary{font-size:15px;line-height:1.8;color:var(--muted);max-width:920px;padding-bottom:28px;border-bottom:1px solid var(--line)}

.job-columns{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-top:28px}
.job-col h4{margin:0 0 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--burnt)}
.job-col ul{display:grid;gap:12px}
.job-col li{font-size:13px;line-height:1.7;color:#4a4a46;display:flex;gap:11px;align-items:baseline}
.job-col li:before{content:"↗";color:var(--burnt);font-size:13px;font-weight:700;flex-shrink:0}
.job-col li strong{color:var(--ink);font-weight:600}

.job-footer{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.job-perks-mini{display:flex;flex-wrap:wrap;gap:8px 16px}
.job-perks-mini span{font-size:11px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.job-perks-mini span:before{content:"";width:5px;height:5px;background:var(--stage-color,var(--orange));transform:rotate(45deg);display:inline-block}
.job-apply-btn{min-height:50px;padding:14px 22px;font-size:12px}

.contact-note a{color:var(--burnt);text-decoration:underline;text-underline-offset:3px;font-weight:600}

@media(max-width:1100px){
  .benefits-showcase{padding:38px}
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .job-card{padding:32px}
  .job-columns{gap:28px}
}
@media(max-width:820px){
  .benefits-header{grid-template-columns:1fr;gap:18px}
  .benefits-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .job-columns{grid-template-columns:1fr;gap:26px}
  .job-card{padding:26px}
}
@media(max-width:640px){
  .benefits-showcase{padding:28px 22px;margin-top:42px}
  .benefits-grid{grid-template-columns:1fr;gap:16px;margin-top:26px}
  .benefit-card{padding:22px}
  .jobs-header{margin-top:48px;margin-bottom:26px}
  .bilingual-pill{width:100%;padding:12px 15px;font-size:11px}
  .job-card{padding:22px 18px}
  .job-summary{font-size:14px;padding-bottom:22px}
  .job-col li{font-size:12px}
  .job-footer{flex-direction:column;align-items:stretch}
  .job-apply-btn{width:100%}
}
