
:root{
  --ink:#172b39; --ink-soft:#33495a; --bg:#f8faf9; --bg-2:#e9efed; --card:#ffffff; --card-2:#f4f7f3;
  --olive:#728657; --olive-2:#85975d; --lime:#dceca2; --lime-h:#cfe48a; --pale:#e2eace;
  --muted:#56666f; --line:#d5dcda; --on-dark:#c9d3d8;
  --font:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0; background:var(--bg); color:var(--ink); font:400 1.0625rem/1.65 var(--font); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--olive); outline-offset:3px; border-radius:4px}
.wrap{width:min(1180px, 100% - 3rem); margin-inline:auto}
.skip{position:absolute; left:-999px; top:0; background:var(--lime); padding:.6rem 1rem; z-index:99}
.skip:focus{left:1rem; top:calc(env(safe-area-inset-top,0px) + .5rem)}

/* Logo */
.logo{display:inline-flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1}
.logo b{font-weight:700; font-size:2.6rem; letter-spacing:-.075em; line-height:.9; margin-left:-.04em}
.logo small{font-weight:600; font-size:.66rem; letter-spacing:.34em; margin-top:.45rem}
.logo.light{color:#fff}

/* Header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:92px; gap:1rem}
.menu{display:flex; gap:1.8rem; align-items:center; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-size:.97rem; font-weight:500}
.menu a:not(.btn):hover{color:var(--olive)}
.toggle{display:none; width:56px; height:56px; background:transparent; border:1.5px solid var(--line); border-radius:6px; cursor:pointer; color:var(--ink); place-items:center}
.toggle span{display:block; width:24px; height:1.5px; background:currentColor; box-shadow:0 8px 0 currentColor; transform:translateY(-4px); transition:.2s}
.toggle[aria-expanded="true"] span{box-shadow:none; transform:rotate(45deg)}
.toggle[aria-expanded="true"] span::after{content:""; display:block; width:24px; height:1.5px; background:currentColor; transform:rotate(-90deg)}
@media (max-width:960px){
  .toggle{display:grid}
  .menu{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); padding:.5rem 1.5rem 1.5rem; border-bottom:1px solid var(--line); display:none}
  .menu.open{display:flex}
  .menu li a:not(.btn){display:block; padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.1rem}
  .menu .btn{margin-top:1rem; width:100%}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:1rem 1.6rem; border-radius:6px; font:700 1rem var(--font); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s}
.btn-lime{background:var(--lime); color:var(--ink)}
.btn-lime:hover{background:var(--lime-h)}
.btn-line{border-color:#c5cdcf; color:var(--ink); background:transparent}
.btn-line:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-soft)}
.menu .btn{padding:.7rem 1.2rem}

/* Eyebrow */
.eyebrow{display:flex; align-items:center; gap:1.1rem; font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; margin:0 0 2rem}
.eyebrow::before{content:""; width:2.8rem; height:3px; background:var(--olive-2); flex:none}
.eyebrow.plain::before{display:none}
.dark .eyebrow{color:var(--on-dark)}

h1,h2,h3,h4{font-weight:500; letter-spacing:-.055em; line-height:1.02; margin:0}
h1{font-size:clamp(3.4rem,9vw,6.4rem)}
h2{font-size:clamp(2.6rem,6vw,4.4rem)}
h1 em,h2 em,h3 em{font-style:normal; color:var(--olive)}
.dark h2 em,.dark h3 em{color:var(--lime)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--muted); max-width:44ch; margin:1.8rem 0 2.2rem}

/* Hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center}
.cta-row{display:flex; flex-wrap:wrap; gap:1rem}
.photo{position:relative; border-radius:110px 14px 14px 14px; overflow:hidden; background:var(--ink); min-height:460px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 50%}
.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,43,57,0) 30%, rgba(23,43,57,.88) 100%)}
.photo-txt{position:relative; z-index:1; padding:2.2rem 2.4rem}
.photo-txt .over{font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; margin:0 0 .8rem}
.photo-txt h3{font-size:clamp(2rem,3.4vw,2.7rem); color:#fff}
.photo-badge{position:absolute; z-index:2; top:1.4rem; right:1.4rem; background:var(--bg); color:var(--ink); border-radius:10px; padding:.9rem 1.1rem; font-size:.9rem; line-height:1.35; box-shadow:0 10px 30px rgba(23,43,57,.18)}
.photo-badge b{display:block; font-weight:700}
.hero-strip{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--line); font-size:.9rem}
.hero-strip a{font-weight:700; text-decoration:none; border-bottom:2px solid var(--lime)}
.hero-strip .tag{font-weight:700; letter-spacing:.24em; font-size:.75rem; text-transform:uppercase}
.hero-strip .count{color:var(--muted); font-variant-numeric:tabular-nums}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:2.5rem}.photo{min-height:420px}}

/* Ticker */
.ticker{background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap; padding:1.15rem 0; font-size:1.25rem; font-weight:500; letter-spacing:-.02em}
.ticker-track{display:inline-flex; animation:slide 40s linear infinite}
.ticker-track span{padding:0 1.6rem}
.ticker-track span::after{content:"·"; color:var(--lime); margin-left:3.2rem; font-weight:700}
@keyframes slide{to{transform:translateX(-50%)}}

/* Sections */
section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.dark{background:var(--ink); color:#fff}
.dark .sub{color:var(--on-dark)}
.sub{color:var(--muted); font-size:1.15rem; max-width:52ch; margin:1.6rem 0 0}
.head{margin-bottom:3.2rem}

/* Tabs + services */
.tabs{display:inline-flex; border:1.5px solid var(--line); border-radius:8px; padding:.3rem; margin-bottom:2.4rem; background:var(--card)}
.tabs button{border:0; background:none; font:700 1rem var(--font); color:var(--ink); padding:.8rem 1.4rem; border-radius:5px; cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink); color:#fff}
.services{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.svc{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2rem; display:flex; flex-direction:column}
.svc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:2.4rem}
.num{display:inline-grid; place-items:center; min-width:3rem; height:3rem; border-radius:8px; background:var(--pale); font-weight:500; font-size:1rem}
.svc-top .tag{font-size:.75rem; font-weight:700; letter-spacing:.22em; color:var(--olive)}
.svc h3{font-size:2rem; margin-bottom:1rem}
.svc p{color:var(--muted); margin:0 0 1.4rem}
.svc ul{list-style:none; padding:1.2rem 0 0; margin:0 0 1.8rem; border-top:1px solid var(--line); display:grid; gap:.55rem}
.svc li{padding-left:1.5rem; position:relative; font-size:.98rem}
.svc li::before{content:""; position:absolute; left:0; top:.68em; width:.7rem; height:2px; background:var(--olive-2)}
.svc .link{margin-top:auto; font-weight:700; text-decoration:none; border-bottom:2px solid var(--lime); align-self:flex-start; padding-bottom:2px}
.svc .link:hover{border-color:var(--olive)}
[hidden]{display:none!important}
@media (max-width:900px){.services{grid-template-columns:1fr}}
.cv-band{margin-top:2rem; background:var(--ink); color:#fff; border-radius:14px 14px 14px 80px; padding:clamp(2rem,4vw,3rem); display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between}
.cv-band .over{font-size:.75rem; letter-spacing:.24em; font-weight:700; color:var(--lime); margin:0 0 .8rem}
.cv-band h3{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.cv-band p{margin:.6rem 0 0; color:var(--on-dark)}

/* Método */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; list-style:none; padding:0; margin:0}
.step{border-top:3px solid var(--ink); padding-top:1.6rem}
.step .num{margin-bottom:1.6rem}
.step h3{font-size:1.9rem; margin-bottom:.7rem}
.step p{color:var(--muted); margin:0}
.value{margin-top:4rem; background:var(--bg-2); border-radius:110px 14px 14px 14px; padding:clamp(2.4rem,5vw,4rem); display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center}
.value .mark{font-weight:700; font-size:clamp(4rem,9vw,7rem); letter-spacing:-.075em; line-height:.8; color:var(--ink)}
.value .over{font-size:.75rem; letter-spacing:.24em; font-weight:700; color:var(--olive); margin:0 0 .8rem}
.value p{margin:0; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.035em; line-height:1.2; font-weight:500; max-width:26ch}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr; row-gap:2.4rem}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.value{grid-template-columns:1fr; gap:1.2rem}}

/* Sobre */
.about{display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:start}
.about .big{font-size:clamp(1.35rem,2.2vw,1.65rem); line-height:1.4; letter-spacing:-.02em; margin:0 0 1.4rem; max-width:34ch}
.about p{color:var(--muted); max-width:56ch}
.person{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2.2rem}
.avatar{width:76px; height:76px; border-radius:50%; background:var(--pale); display:grid; place-items:center; font-weight:700; font-size:1.6rem; letter-spacing:-.04em; margin-bottom:1.4rem}
.person h3{font-size:2rem}
.person .role{color:var(--olive); font-weight:600; margin:.5rem 0 1rem; font-size:.95rem}
.person p{margin:0 0 1.8rem}
@media (max-width:900px){.about{grid-template-columns:1fr; gap:2.5rem}}

/* DUO RH */
.rh-grid{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center}
.chips{display:flex; flex-wrap:wrap; gap:.8rem; margin:2.4rem 0 2.6rem; padding:0; list-style:none}
.chips li{border:1.5px solid rgba(255,255,255,.28); border-radius:4px; padding:.65rem 1.1rem; color:var(--on-dark)}
.panel-wrap{position:relative}
.panel-wrap::after{content:""; position:absolute; inset:2rem -1.2rem -1.2rem 2rem; background:#2c4252; border-radius:22px; z-index:0}
.panel{position:relative; z-index:1; background:var(--card-2); color:var(--ink); border-radius:22px; padding:clamp(1.8rem,4vw,2.6rem)}
.panel-top{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:3rem}
.rh-logo{display:flex; align-items:flex-end; gap:.45rem}
.rh-logo b{font-weight:700; font-size:2.7rem; letter-spacing:-.075em; line-height:.85}
.rh-logo span{background:var(--pale); border-radius:5px; padding:.35rem .55rem .25rem; font-size:1.55rem; font-weight:500; letter-spacing:-.04em; line-height:1}
.panel-top small{font-size:.75rem; letter-spacing:.24em; font-weight:500}
.panel h3{font-size:clamp(2rem,3.6vw,2.6rem); margin-bottom:2.2rem}
.mod{display:flex; gap:1.4rem; align-items:center; padding:1.15rem 0; border-top:1px solid var(--line)}
.mod h4{font-size:1.3rem; letter-spacing:-.03em; font-weight:600}
.mod p{margin:.15rem 0 0; color:var(--muted); font-size:.95rem}
.panel-foot{margin:1.4rem 0 0; font-size:.72rem; letter-spacing:.24em; font-weight:700; color:var(--olive)}
@media (max-width:900px){.rh-grid{grid-template-columns:1fr}.panel-wrap::after{inset:1.5rem -.6rem -.8rem 1.5rem}}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem}
.faq-side p{color:var(--muted); font-size:1.05rem}
.faq-side a{font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--lime)}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0; font-weight:600; font-size:1.18rem; letter-spacing:-.02em; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:""; position:absolute; right:.3rem; top:50%; width:2rem; height:2rem; margin-top:-1rem; border-radius:50%; background:var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172b39' stroke-width='2'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 1.6rem; color:var(--muted); max-width:60ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr; gap:2.4rem}}

/* Contacto */
.contact{background:var(--bg-2)}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start}
.contact-info{list-style:none; padding:0; margin:2.4rem 0 0; display:grid; gap:1rem}
.contact-info li{display:flex; gap:.9rem; align-items:center; font-weight:500}
.contact-info svg{width:20px; height:20px; flex:none; stroke:var(--olive)}
.contact-info a{text-decoration:none; border-bottom:2px solid var(--lime)}
form{background:var(--card); border-radius:14px; padding:clamp(1.6rem,4vw,2.6rem); border:1px solid var(--line)}
form h3{font-size:clamp(1.8rem,3vw,2.3rem); margin-bottom:1.8rem}
label{display:block; font-weight:500; font-size:1.05rem; margin:0 0 .6rem}
input,select,textarea{width:100%; font:inherit; font-size:1.1rem; color:var(--ink); background:#fbfcfa; border:1.5px solid var(--line); border-radius:6px; padding:1rem 1.1rem; margin-bottom:1.6rem; -webkit-appearance:none; appearance:none}
input::placeholder,textarea::placeholder{color:#9aa4a8}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23172b39' stroke-width='2'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:20px; padding-right:3rem}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--olive)}
textarea{min-height:150px; resize:vertical}
form .btn{width:100%; padding:1.15rem; font-size:1.1rem}
.fine{font-size:.98rem; color:var(--muted); margin:1.2rem 0 0}
.err{color:#a3402a; font-size:.95rem; margin:-.8rem 0 1.2rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:2.5rem}}

/* Footer */
footer{background:var(--ink); color:var(--on-dark); padding:4rem 0 2.2rem}
.foot{display:grid; grid-template-columns:1fr auto 1fr; gap:2.4rem; align-items:center}
.foot .tagline{justify-self:end; text-align:right; font-size:1.3rem; line-height:1.5; margin:0}
.social{display:flex; gap:1.1rem; justify-content:center}
.social a{width:58px; height:58px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); display:grid; place-items:center}
.social a:hover{background:rgba(255,255,255,.08)}
.social svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.18); margin-top:3rem; padding-top:1.8rem; font-size:.95rem}
.legal a{text-decoration:none}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.social{grid-column:1/-1; order:3}}

.page-hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2.8rem,7vw,5rem)}
.empty{background:var(--card); border:1px solid var(--line); border-radius:110px 14px 14px 14px; padding:clamp(2rem,5vw,3.5rem); display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center}
.empty h2{font-size:clamp(2rem,4.5vw,3rem)}
.empty p{color:var(--muted); margin:1rem 0 0; max-width:48ch}
.empty .side{display:grid; gap:.8rem}
@media (max-width:860px){.empty{grid-template-columns:1fr}}
.jobs{display:grid; gap:1.2rem}
.job{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2rem}
.job-meta{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 1.4rem; padding:0; list-style:none}
.job-meta li{background:var(--pale); border-radius:4px; padding:.3rem .7rem; font-size:.88rem; font-weight:500}
.job h3{font-size:2rem}
.job .ref{font-size:.75rem; letter-spacing:.2em; font-weight:700; color:var(--olive)}
.job h4{font-size:1.1rem; letter-spacing:-.02em; margin:1.4rem 0 .5rem; font-weight:600}
.job ul.req{margin:0; padding-left:1.2rem; color:var(--muted)}
.job.closed{opacity:.6}
.split{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.2rem}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.box{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:clamp(1.6rem,4vw,2.4rem)}
.box h3{font-size:1.9rem; margin-bottom:.8rem}
.box p{color:var(--muted); margin:0 0 1.4rem}
.box.dark-box{background:var(--ink); color:#fff; border-color:var(--ink)}
.box.dark-box p{color:var(--on-dark)}
.box.dark-box input{background:#fff}
.box.dark-box label{color:#fff}
.box form{background:none; border:0; padding:0; border-radius:0}
.legal-note{font-size:.88rem; color:var(--muted); margin-top:2rem; max-width:70ch}
.hp{position:absolute; left:-9999px}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.post-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2rem; display:flex; flex-direction:column; text-decoration:none; transition:border-color .15s, transform .15s}
.post-card:hover{border-color:var(--ink); transform:translateY(-2px)}
.post-card:first-child{border-radius:80px 14px 14px 14px}
.post-card .cat{font-size:.72rem; letter-spacing:.22em; font-weight:700; color:var(--olive); margin-bottom:2.4rem}
.post-card h2{font-size:1.75rem; letter-spacing:-.04em; line-height:1.1; margin-bottom:1rem}
.post-card p{color:var(--muted); margin:0 0 1.6rem}
.post-card .more{margin-top:auto; font-weight:700; border-bottom:2px solid var(--lime); align-self:flex-start}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.article{max-width:720px; margin-inline:auto}
.article .cat{font-size:.78rem; letter-spacing:.22em; font-weight:700; color:var(--olive); text-transform:uppercase}
.article h1{font-size:clamp(2.4rem,6vw,3.8rem); margin:1rem 0 1.4rem}
.byline{color:var(--muted); font-size:.95rem; display:flex; gap:.8rem; align-items:center; padding-bottom:2rem; border-bottom:1px solid var(--line)}
.byline .avatar{width:44px; height:44px; font-size:1rem; margin:0}
.body{font-size:1.12rem; line-height:1.75}
.body p{margin:1.4rem 0}
.body h2{font-size:clamp(1.7rem,3.4vw,2.2rem); margin:2.8rem 0 .2rem}
.body ul,.body ol{padding-left:1.3rem}
.body li{margin:.5rem 0}
.body .lead-p{font-size:1.3rem; letter-spacing:-.01em; color:var(--ink)}
.body blockquote{margin:2.2rem 0; padding:1.4rem 1.6rem; background:var(--pale); border-radius:10px; font-size:1.3rem; letter-spacing:-.02em; font-weight:500; line-height:1.4}
.article-cta{margin-top:3.5rem; background:var(--ink); color:#fff; border-radius:14px 14px 14px 60px; padding:2.2rem}
.article-cta h3{font-size:1.8rem; margin-bottom:.6rem}
.article-cta p{color:var(--on-dark); margin:0 0 1.4rem}
.back{display:block; width:max-content; margin-bottom:2rem; font-weight:600; text-decoration:none; color:var(--muted)}
.back:hover{color:var(--ink)}

/* Casilla de consentimiento visible en todos los navegadores (incluido iPhone) */
input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:24px!important;height:24px;min-width:24px;padding:0!important;margin:.15rem 0 0!important;border:2px solid var(--line);border-radius:6px;background:#fff;display:inline-grid;place-content:center;cursor:pointer;flex:none}
input[type="checkbox"]::before{content:"";width:7px;height:12px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
input[type="checkbox"]:checked{background:var(--lime);border-color:var(--lime)}
input[type="checkbox"]:checked::before{opacity:1}
input[type="checkbox"]:focus-visible{outline:3px solid var(--olive);outline-offset:2px}
