html,body{overflow-x:hidden;width:100%;}

:root{ --cafe:#1B0E0B; --mostaza:#E3A72F; --crema:#F5F0E8; --blanco:#FFFFFF; }
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Jost',sans-serif;background:var(--crema);color:var(--cafe);}
h1,h2,h3,.logo-wrap span,.footer-brand,.closing-title,.article-title,.closing-line{font-family:'Bebas Neue','Arial Narrow',Impact,sans-serif;}
a{color:inherit;}
button{font-family:'Jost',sans-serif;cursor:pointer;}

nav{position:fixed;top:0;left:0;right:0;z-index:100;height:76px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;padding:0 40px;gap:12px;transition:background .2s;}
nav.transparent{background:transparent;}
nav.solid{background:var(--crema);border-bottom:1px solid rgba(27,14,11,0.1);}
.logo-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0;}
.logo-wrap img{width:32px;height:32px;flex-shrink:0;border-radius:4px;display:block;}
.logo-wrap span{font-size:clamp(13px,2.6vw,22px);letter-spacing:1px;white-space:nowrap;}
nav.transparent .logo-wrap span{color:var(--blanco);}
nav.solid .logo-wrap span{color:var(--cafe);}
.nav-items{display:flex;flex-wrap:nowrap;gap:clamp(14px,3vw,28px);align-items:center;overflow-x:auto;}
.nav-items a{font-size:clamp(13px,2.5vw,15px);cursor:pointer;flex-shrink:0;padding-bottom:4px;border-bottom:2px solid transparent;text-decoration:none;}
nav.transparent .nav-items a{color:var(--blanco);}
nav.solid .nav-items a{color:var(--cafe);}
.nav-items a.active{border-bottom:2px solid var(--mostaza);}

main{padding-top:92px;}
.inner-section{padding:96px 40px;max-width:1200px;margin:0 auto;}
h2{font-size:clamp(32px,4vw,48px);margin-bottom:40px;}
h3{font-size:24px;margin-bottom:16px;}

.hero{min-height:100vh;background:var(--cafe);color:var(--blanco);display:flex;flex-direction:column;
  justify-content:center;padding:40px 40px 100px;gap:28px;margin-top:-92px;}
.hero > *, .card > *, .closing > *, .quien-soy-text > *, .article-section > *, form > *, .contacto-side > *, footer > *{min-width:0;}
.hero h1{font-size:clamp(44px,8vw,104px);line-height:0.98;max-width:1000px;}
.hero h1 span{color:var(--mostaza);}
.hero p{font-size:clamp(16px,2vw,20px);}
.btn-primary{font-weight:600;font-size:16px;background:var(--mostaza);color:var(--cafe);border:none;
  border-radius:4px;padding:16px 32px;align-self:flex-start;}
.btn-secondary{font-weight:600;font-size:16px;background:transparent;color:var(--cafe);
  border:1.5px solid var(--cafe);border-radius:4px;padding:16px 32px;}

.cards-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.cards-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:64px;}
.card{background:var(--blanco);border:1px solid rgba(27,14,11,0.14);border-radius:4px;padding:32px;
  display:flex;flex-direction:column;gap:10px;}
.card.clickable{cursor:pointer;}
.card h3{font-size:22px;letter-spacing:0.5px;margin:0;}
.card p{font-size:15px;line-height:1.5;margin:0;}
.date-line{font-size:13px;opacity:.65;margin:0;}

.closing{padding:96px 40px 120px;max-width:900px;margin:0 auto;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:32px;}
.closing-title{font-size:clamp(32px,5vw,56px);}
.closing-title span{color:var(--mostaza);}

.quien-soy-layout{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;}
.photo-frame{width:320px;aspect-ratio:3/4;flex-shrink:0;display:flex;flex-direction:column;}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-frame .mostaza-line{height:4px;background:var(--mostaza);width:100%;margin-top:0;}
.quien-soy-text{flex:1 1 420px;display:flex;flex-direction:column;gap:20px;}
.body-text{font-size:17px;line-height:1.65;max-width:680px;}
.credenciales-row{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:12px;border-top:1px solid rgba(27,14,11,.15);padding-top:20px;font-size:14px;}

.como-trabajo{border-top:1px solid rgba(27,14,11,.15);padding-top:40px;margin-bottom:48px;}
.como-trabajo ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.como-trabajo li{font-size:17px;padding-left:20px;border-left:3px solid var(--mostaza);}
.cta-block{display:flex;flex-wrap:wrap;align-items:center;gap:24px;}
.email-link{font-size:16px;text-decoration:underline;}

.filters-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:40px;}
.filters-row button{font-size:14px;padding:8px 18px;border-radius:4px;border:1px solid var(--cafe);background:transparent;color:var(--cafe);}
.filters-row button.active{background:var(--mostaza);}
.leer-mas{font-size:14px;color:var(--cafe);font-weight:600;text-decoration:underline;display:inline-block;}

.article-section{padding:140px 24px 100px;max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}
.article-title{font-size:clamp(30px,5vw,44px);}
blockquote{font-size:19px;border-left:3px solid var(--mostaza);padding-left:20px;margin:16px 0;}
.sources-box{border-top:1px solid rgba(27,14,11,.15);padding-top:20px;margin-top:20px;}
.sources-label{font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:6px;}
.sources-text{font-size:14px;opacity:.75;}

.contacto-layout{display:flex;flex-wrap:wrap;gap:56px;margin-bottom:48px;}
form{flex:1 1 380px;display:flex;flex-direction:column;gap:18px;}
label{font-size:14px;display:flex;flex-direction:column;gap:6px;}
input,textarea,select{font-family:'Jost',sans-serif;font-size:15px;padding:12px 14px;border:1px solid rgba(27,14,11,.3);border-radius:4px;background:var(--blanco);color:var(--cafe);}
textarea{min-height:120px;resize:vertical;}
.contacto-side{flex:1 1 240px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.social-row{display:flex;flex-wrap:wrap;gap:18px;}
.social-row a{font-size:15px;text-decoration:underline;}
.closing-line{font-size:22px;margin-top:40px;}
.form-sent{font-size:14px;}

footer{background:var(--cafe);color:var(--blanco);padding:56px 40px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.footer-brand{font-size:22px;color:var(--mostaza);}
footer .social-row a{color:var(--blanco);text-decoration:none;opacity:.85;}
.footer-email{font-size:14px;color:var(--blanco);text-decoration:underline;}

@media (max-width: 900px){
  nav{padding:0 16px;height:auto;min-height:64px;flex-wrap:wrap;row-gap:8px;padding-top:10px;padding-bottom:10px;}
  .logo-wrap span{display:none;}
  .nav-items{gap:14px;width:100%;justify-content:space-between;overflow-x:visible;flex-wrap:wrap;}
  .hero{padding-top:130px;}
}