/* ==========================================================
   NARRATIVO
   STYLE.CSS
   PART 1
   ========================================================== */

:root{

    --bg:#FCFBF2;
    --surface:#F8F6ED;

    --text:#171717;
    --muted:#6B675F;

    --blue:#84BFE8;
    --red:#C92E36;
    --gold:#B8913E;

    --line:#E5E0D5;

    --container:1180px;

    --radius:18px;

    --transition:.25s ease;

}

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:"Manrope",sans-serif;

    font-size:18px;

    line-height:1.8;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font:inherit;

    border:none;

    background:none;

}

/* ==========================================================
   GLOBAL
   ========================================================== */

.container{

    width:min(var(--container),92%);

    margin:auto;

}

.narrow{

    max-width:760px;

}

section{

    padding:140px 0;

}

h1,h2,h3{

    line-height:1;

    letter-spacing:-.04em;

}

h1{

    font-size:clamp(4rem,7vw,7rem);

    font-weight:800;

}

h2{

    font-size:clamp(2.6rem,5vw,4.2rem);

    font-weight:700;

    margin-bottom:34px;

}

h3{

    font-size:1.45rem;

    margin-bottom:18px;

}

p{

    color:var(--muted);

}

.eyebrow{

    display:inline-block;

    margin-bottom:22px;

    color:var(--red);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.72rem;

    font-weight:700;

}

/* ==========================================================
   HEADER
   ========================================================== */

header{

    position:sticky;

    top:0;

    z-index:1000;

    backdrop-filter:blur(10px);

    background:rgba(252,251,242,.92);

    border-bottom:1px solid rgba(0,0,0,.04);

}

nav{

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.brand-mark{

    width:54px;

    height:54px;

    flex-shrink:0;

}

.brand-lockup{

    display:flex;

    flex-direction:column;

}

.brand-name{

    font-family:"Passero One",serif;

    font-size:2.2rem;

    line-height:1;

    color:var(--text);

}

.brand-tag{

    margin-top:6px;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:var(--muted);

}

nav ul{

    list-style:none;

    display:flex;

    gap:40px;

}

nav li{

    display:flex;

    align-items:center;

}

nav a{

    transition:var(--transition);

}

nav ul a{

    position:relative;

    font-weight:600;

    font-size:.95rem;

    transition:color .25s ease;

}

nav ul a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--blue);

    transition:width .25s ease;

}

nav ul a:hover::after{

    width:100%;

}

nav ul a:hover{

    color:var(--red);

}

.mobile-menu{

    display:none;

}

/* ==========================================================
   HERO
   ========================================================== */

.hero{

    padding-top:110px;

    padding-bottom:170px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:90px;

    align-items:center;

}

.hero-copy{

    max-width:720px;

}

.hero-subtitle{

    margin-top:14px;

    font-size:1.45rem;

    color:var(--red);

    font-weight:600;

}

.hero-intro{

    margin-top:40px;

    max-width:620px;

    font-size:1.3rem;

    line-height:1.9;

}

.hero-buttons{

    margin-top:55px;

    display:flex;

    gap:28px;

    align-items:center;

}

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 34px;

    background:var(--red);

    color:#fff;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.button:hover{

    background:#a81d26;

    transform:translateY(-2px);

}

.text-link{

    color:var(--blue);

    font-weight:700;

}

.text-link:hover{

    color:var(--red);

}

.hero-logo{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-logo img{

    width:min(420px,80%);

    opacity:.95;

    transition:var(--transition);

}

.hero-logo img:hover{

    transform:rotate(-4deg);

}

/* ==========================================================
   INTRO
   ========================================================== */

.intro{

    background:var(--surface);

}

.intro h2{

    max-width:680px;

}

.intro p{

    margin-top:28px;

    font-size:1.2rem;

    line-height:1.9;

}

/* ==========================================================
   HOW WE THINK
   ========================================================== */

.section-heading{

    margin-bottom:70px;

}

.thinking-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

}

.thinking-grid article{

    position:relative;

    padding-top:24px;

}

.thinking-grid article::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:48px;

    height:3px;

    background:var(--red);

    border-radius:99px;

}

.thinking-grid p{

    line-height:1.85;

}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:var(--blue);

    color:#111;

}

/* ==========================================================
   SERVICES
   ========================================================== */

#services{

    background:var(--bg);

}

.section-intro{

    max-width:720px;

    font-size:1.2rem;

    margin-top:20px;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:70px 80px;

}

.services-grid div{

    padding-bottom:34px;

    border-bottom:1px solid var(--line);

    transition:var(--transition);

}

.services-grid div:hover{

    border-color:var(--blue);

}

.services-grid h3{

    color:var(--text);

}

.services-grid p{

    line-height:1.9;

}

/* ==========================================================
   EXPERIENCE
   ========================================================== */

.experience{

    background:var(--surface);

}

.experience p{

    max-width:860px;

    margin-top:26px;

    font-size:1.15rem;

    line-height:1.9;

}

.experience strong{

    color:var(--text);

    font-weight:700;

}

/* ==========================================================
   ABOUT
   ========================================================== */

.split{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:start;

}

.split p{

    margin-bottom:28px;

    line-height:1.9;

    font-size:1.1rem;

}

/* ==========================================================
   MANIFESTO
   ========================================================== */

.manifesto{

    background:var(--surface);

    text-align:center;

}

.manifesto-list{

    display:flex;

    flex-direction:column;

    gap:34px;

}

.manifesto-list p{

    font-size:clamp(1.6rem,3vw,2.6rem);

    color:var(--text);

    line-height:1.35;

    letter-spacing:-.03em;

    font-weight:600;

}

.manifesto-list p:nth-child(2){

    color:var(--red);

}

.manifesto-list p:nth-child(4){

    color:var(--blue);

}

.manifesto-list p:last-child{

    max-width:900px;

    margin:auto;

}

/* ==========================================================
   CTA
   ========================================================== */

.cta{

    text-align:center;

}

.cta h2{

    max-width:900px;

    margin:0 auto 30px;

}

.cta p{

    max-width:700px;

    margin:0 auto 50px;

    font-size:1.2rem;

    line-height:1.9;

}

/* ==========================================================
   FOOTER
   ========================================================== */

footer{

    padding:80px 0;

    border-top:1px solid var(--line);

}

.footer{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:50px;

    align-items:flex-start;

}

.footer-brand{

    display:flex;

    gap:18px;

    align-items:center;

}

.footer-mark{

    width:46px;

    height:46px;

    flex-shrink:0;

}

.footer-name{

    font-family:"Passero One",serif;

    font-size:2rem;

    color:var(--text);

    line-height:1;

}

.footer-brand p{

    margin-top:6px;

    font-size:.95rem;

}

footer p{

    color:var(--muted);

}

footer a{

    display:block;

    margin-bottom:14px;

    font-weight:600;

    transition:var(--transition);

}

footer a:hover{

    color:var(--red);

}

/* ==========================================================
   SUBTLE MOTION
   ========================================================== */

section{

    animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   LANGUAGE TOGGLE
   ========================================================== */

[data-lang="en"] .lang-es{

    display:none !important;

}

[data-lang="es"] .lang-en{

    display:none !important;

}

.lang-switch{

    display:inline-flex;

    align-items:center;

    gap:2px;

    padding:4px;

    border:1px solid var(--line);

    border-radius:999px;

    background:var(--surface);

}

.lang-switch button{

    cursor:pointer;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.08em;

    padding:6px 14px;

    border-radius:999px;

    color:var(--muted);

    transition:var(--transition);

}

.lang-switch button:hover{

    color:var(--text);

}

.lang-switch button.is-active{

    background:var(--blue);

    color:var(--text);

}

@media (max-width:520px){

.lang-switch button{

    padding:6px 11px;

    font-size:.68rem;

}

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1000px){

.hero-grid,
.split,
.services-grid,
.thinking-grid,
.footer{

    grid-template-columns:1fr;

}

.hero-grid{

    gap:70px;

}

.hero-logo{

    order:-1;

}

.hero-logo img{

    width:260px;

}

.split{

    gap:50px;

}

.footer{

    gap:40px;

}

}

@media (max-width:760px){

body{

    font-size:17px;

}

section{

    padding:90px 0;

}

header{

    position:relative;

}

nav{

    flex-direction:column;

    align-items:flex-start;

    height:auto;

    padding:28px 0;

    gap:28px;

}

.brand{

    width:100%;

}

.brand-name{

    font-size:2rem;

}

.brand-tag{

    letter-spacing:.14em;

    font-size:.68rem;

}

nav ul{

    width:100%;

    justify-content:flex-start;

    flex-wrap:wrap;

    gap:18px 24px;

}

h1{

    font-size:3.5rem;

}

h2{

    font-size:2.4rem;

}

.hero{

    padding-top:70px;

    padding-bottom:110px;

}

.hero-intro{

    font-size:1.15rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}

.button{

    width:100%;

    max-width:280px;

}

.manifesto-list p{

    font-size:1.8rem;

}

}

@media (max-width:520px){

.container{

    width:90%;

}

.hero-logo img{

    width:180px;

}

.brand{

    gap:14px;

}

.brand-mark{

    width:44px;

    height:44px;

}

.brand-name{

    font-size:1.8rem;

}

.brand-tag{

    display:none;

}

.footer{

    text-align:center;

}

.footer-brand{

    justify-content:center;

}

}