/* ===========================================================
   VIDA NATURAL — hoja de estilos compartida
   =========================================================== */
:root{
  --cream:#F3ECDC;
  --paper:#EFE6D2;
  --forest:#2C3D2E;
  --forest-deep:#1F2C20;
  --moss:#6E7B45;
  --moss-light:#8C975E;
  --clay:#B5663C;
  --clay-soft:#C9885E;
  --bark:#5A4632;
  --ink:#2A2620;
  --muted:#736A56;
  --line:rgba(90,70,50,.18);
  --shadow:24px 24px 60px -30px rgba(31,44,32,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Spectral",Georgia,serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(243,236,220,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Fraunces";font-size:1.4rem;font-weight:600;color:var(--forest);letter-spacing:-.02em}
.brand .leaf{width:30px;height:30px;flex:none}
nav ul{display:flex;gap:32px;list-style:none}
nav a{font-family:"Spectral";font-size:.96rem;letter-spacing:.02em;color:var(--bark);position:relative;padding:4px 0;transition:color .25s}
nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--clay);transition:width .3s ease}
nav a:hover,nav a.active{color:var(--forest)}
nav a:hover::after,nav a.active::after{width:100%}
.menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--forest)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--clay);color:#FBF6EA;font-family:"Spectral";font-size:1rem;letter-spacing:.02em;padding:15px 30px;border-radius:40px;border:none;cursor:pointer;transition:transform .3s,background .3s;box-shadow:0 12px 30px -10px rgba(120,55,25,.6)}
.btn:hover{background:var(--clay-soft);transform:translateY(-3px)}
.btn svg{width:17px;height:17px;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--forest);border:1.5px solid var(--moss);box-shadow:none}
.btn.ghost:hover{background:var(--moss);color:#FBF6EA}

/* ---------- HERO (home) ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:0}
.hero svg.scene{position:absolute;inset:0;width:100%;height:100%}
.hero .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(20,30,20,.42),transparent 70%)}
.hero-content{position:relative;z-index:3;color:#F6F0E1;padding:0 24px;max-width:820px}
.eyebrow{font-family:"Spectral";font-style:italic;letter-spacing:.32em;text-transform:uppercase;font-size:.8rem;opacity:.92;margin-bottom:22px}
.hero h1{font-size:clamp(2.7rem,6.6vw,5rem);color:#FBF6EA;text-shadow:0 2px 40px rgba(20,30,20,.5)}
.hero h1 em{font-style:italic;color:#E3CBA0}
.hero p{font-size:clamp(1.05rem,1.7vw,1.25rem);margin:26px auto 38px;max-width:540px;color:#EFE7D6;text-shadow:0 1px 20px rgba(20,30,20,.5)}

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-head{position:relative;text-align:center;padding:84px 0 70px;overflow:hidden;border-bottom:1px solid var(--line)}
.page-head.green{background:var(--forest);color:#EFE7D6}
.page-head .tag{font-family:"Spectral";font-style:italic;letter-spacing:.28em;text-transform:uppercase;font-size:.78rem;color:var(--clay);margin-bottom:16px;display:block}
.page-head.green .tag{color:var(--clay-soft)}
.page-head h1{font-size:clamp(2.3rem,5vw,3.6rem);color:var(--forest);max-width:18ch;margin:0 auto}
.page-head.green h1{color:#FBF6EA}
.page-head p{margin:20px auto 0;max-width:52ch;color:var(--muted);font-size:1.08rem}
.page-head.green p{color:#D8CDB6}
.crumbs{font-family:"Spectral";font-style:italic;font-size:.85rem;color:var(--bark);margin-bottom:22px}
.page-head.green .crumbs{color:#B6AC93}
.crumbs a:hover{color:var(--clay)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- SECTIONS ---------- */
section{padding:90px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.sec-head .tag{font-family:"Spectral";font-style:italic;color:var(--clay);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;display:block;margin-bottom:10px}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);color:var(--forest);max-width:16ch}
.sec-head p{color:var(--muted);max-width:38ch;font-size:1.02rem}
.alt{background:var(--paper)}
.featured{background:var(--paper)}

/* ---------- CARDS ---------- */
.feat-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px}
.feat-grid .card:first-child{grid-row:span 1}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--cream);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.alt .card{background:var(--cream)}
.featured .card{background:var(--cream)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card .thumb{height:200px;position:relative;overflow:hidden}
.feat-grid .card:first-child .thumb{height:330px}
.card .thumb svg{width:100%;height:100%;display:block}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.pill{align-self:flex-start;font-family:"Spectral";font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);background:rgba(110,123,69,.12);padding:5px 12px;border-radius:30px}
.card h3{font-size:1.32rem;color:var(--forest);line-height:1.18}
.feat-grid .card:first-child h3{font-size:1.8rem}
.card p{color:var(--muted);font-size:.96rem}
.meta{margin-top:auto;padding-top:8px;font-family:"Spectral";font-style:italic;font-size:.85rem;color:var(--bark);display:flex;align-items:center;gap:8px}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--clay)}

.divider{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--moss);opacity:.6;padding:10px 0}
.divider span{height:1px;width:90px;background:var(--line)}

/* ---------- ARTICLE PAGE ---------- */
.article{max-width:720px;margin:0 auto;padding:70px 28px 90px}
.article .hero-img{height:380px;border-radius:20px;overflow:hidden;margin-bottom:40px;box-shadow:var(--shadow)}
.article .hero-img svg{width:100%;height:100%}
.article .a-meta{font-family:"Spectral";font-style:italic;color:var(--bark);display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.article h1{font-size:clamp(2.1rem,4.6vw,3.2rem);color:var(--forest);margin-bottom:22px;line-height:1.12}
.article h2{font-size:1.7rem;color:var(--forest);margin:42px 0 16px}
.article h3{font-size:1.3rem;color:var(--bark);margin:32px 0 12px}
.article p{font-size:1.12rem;color:var(--ink);margin-bottom:20px}
.article ul,.article ol{margin:0 0 22px 22px;color:var(--ink)}
.article li{font-size:1.1rem;margin-bottom:10px}
.article blockquote{border-left:3px solid var(--clay);padding:6px 24px;margin:30px 0;font-style:italic;font-size:1.25rem;color:var(--bark);font-family:"Fraunces"}
.article .lead{font-size:1.28rem;color:var(--bark);font-style:italic;margin-bottom:34px;font-family:"Fraunces"}
.share{display:flex;gap:12px;align-items:center;margin-top:46px;padding-top:28px;border-top:1px solid var(--line);font-family:"Spectral";font-style:italic;color:var(--muted)}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-grid .portrait{height:440px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.about-grid .portrait svg{width:100%;height:100%}
.prose p{font-size:1.1rem;margin-bottom:20px;color:var(--ink)}
.prose p:first-of-type{font-family:"Fraunces";font-style:italic;font-size:1.3rem;color:var(--bark)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}
.value{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:30px 26px;text-align:center}
.value .ic{width:52px;height:52px;margin:0 auto 16px;color:var(--moss)}
.value h3{font-size:1.25rem;color:var(--forest);margin-bottom:8px}
.value p{color:var(--muted);font-size:.97rem}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.member{text-align:center}
.member .avatar{width:130px;height:130px;border-radius:50%;overflow:hidden;margin:0 auto 16px;box-shadow:var(--shadow)}
.member .avatar svg{width:100%;height:100%}
.member h3{font-size:1.2rem;color:var(--forest)}
.member span{font-family:"Spectral";font-style:italic;color:var(--clay);font-size:.92rem}
.member p{color:var(--muted);font-size:.95rem;margin-top:8px;max-width:30ch;margin-left:auto;margin-right:auto}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact-info h3{font-size:1.4rem;color:var(--forest);margin-bottom:18px}
.contact-info .row{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.contact-info .row .ic{width:24px;height:24px;color:var(--clay);flex:none;margin-top:3px}
.contact-info .row b{font-family:"Fraunces";color:var(--bark);display:block;margin-bottom:2px}
.contact-info .row span{color:var(--muted)}
.form-field{margin-bottom:18px;display:flex;flex-direction:column;gap:7px}
.form-field label{font-family:"Spectral";font-style:italic;color:var(--bark);font-size:.95rem}
.form-field input,.form-field textarea{font-family:"Spectral";font-size:1rem;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);outline:none;transition:border .25s}
.form-field input:focus,.form-field textarea:focus{border-color:var(--moss)}
.form-field textarea{min-height:130px;resize:vertical}
.form-ok{display:none;background:rgba(110,123,69,.14);border:1px solid var(--moss);color:var(--forest);padding:16px 20px;border-radius:12px;font-style:italic}

/* ---------- NEWSLETTER ---------- */
.news{background:var(--forest);color:#EFE7D6;position:relative;overflow:hidden}
.news::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(181,102,60,.28),transparent 45%);pointer-events:none}
.news .wrap{position:relative;text-align:center;max-width:640px}
.news .tag{color:var(--clay-soft)}
.news h2{color:#FBF6EA;font-size:clamp(2rem,4vw,3rem);margin-bottom:14px}
.news p{color:#D8CDB6;margin-bottom:34px}
.news form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:230px;background:rgba(243,236,220,.1);border:1px solid rgba(243,236,220,.28);color:#FBF6EA;font-family:"Spectral";font-size:1rem;padding:15px 20px;border-radius:40px;outline:none;transition:border .25s}
.news input::placeholder{color:#B6AC93}
.news input:focus{border-color:var(--clay-soft)}
.news .ok{display:none;color:#D9CDAE;font-style:italic;margin-top:18px;font-family:"Spectral"}

/* ---------- FOOTER ---------- */
footer{background:var(--forest-deep);color:#C7BFA9;padding:64px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer .brand{color:#EFE7D6;margin-bottom:14px}
footer .brand .leaf path:first-child{fill:#8C975E}
footer p{font-size:.95rem;color:#A99F88;max-width:34ch}
footer h4{font-family:"Fraunces";color:#E3CBA0;font-size:1.05rem;margin-bottom:16px;font-weight:500}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{font-size:.94rem;color:#B9B09A;transition:color .2s}
footer ul a:hover{color:#EFE7D6}
.socials{display:flex;gap:14px;margin-top:6px}
.socials a{width:38px;height:38px;border:1px solid rgba(231,203,160,.3);border-radius:50%;display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--clay);border-color:var(--clay)}
.socials svg{width:17px;height:17px}
.copy{border-top:1px solid rgba(231,203,160,.14);padding-top:24px;text-align:center;font-size:.85rem;color:#8B826E;font-style:italic;font-family:"Spectral"}

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  nav ul{display:none;position:absolute;top:74px;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
  nav ul li{padding:0 28px}
  nav ul li a{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-grid .card:first-child{grid-column:span 2}
  .feat-grid .card:first-child .thumb{height:240px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .values,.team{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .feat-grid,.cat-grid,.values,.team{grid-template-columns:1fr}
  .feat-grid .card:first-child{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr}
  section{padding:64px 0}
}