*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
    --green-darkest:#081c15;--green-dark:#1b4332;--green-mid:#2d6a4f;--green-light:#40916c;--green-accent:#52b788;--green-pale:#d8f3dc;
    --lila-dark:#5B0FA8;--lila-mid:#8B2BE2;--lila-light:#C060F0;--lila-pale:#f5eeff;
    --white:#ffffff;--bg:#f4f7f5;--text:#1a1a1a;
}
html{scroll-behavior:smooth;}
body{font-family:'Jost',sans-serif;background-color:var(--bg);color:var(--text);}
header{background:var(--green-dark);padding:0 5%;height:70px;box-shadow:0 2px 10px rgba(0,0,0,0.2);display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;z-index:100;}
.logo-text{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.7rem;color:var(--white);display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-text i{color:var(--green-accent);font-size:1.4rem;}
.logo-text span{color:var(--green-accent);font-style:italic;}
nav ul{display:flex;list-style:none;gap:2rem;margin:0;padding:0;}
nav a{text-decoration:none;color:var(--green-pale);font-size:0.88rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;transition:color 0.2s;}
nav a:hover,nav a.active{color:var(--white);}
nav a.active{font-weight:600;}
.hero-section{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-image:url('../images/lila-katze.png');background-size:cover;background-position:left center;background-repeat:no-repeat;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(91,15,168,0.55) 0%,rgba(139,43,226,0.35) 40%,rgba(192,96,240,0.15) 65%,rgba(220,140,255,0.05) 100%);}
.hero-container{position:relative;z-index:2;width:100%;max-width:1300px;margin:0 auto;padding:0 5%;display:flex;align-items:center;min-height:100vh;padding-top:70px;}
.hero-space{flex:1;}
.hero-text-box{flex:0 0 480px;background:rgba(27,67,50,0.88);backdrop-filter:blur(10px);border:1px solid rgba(82,183,136,0.3);border-radius:24px;padding:3rem 2.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:fadeInRight 1s ease both;}
.hero-text-box h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:2.2rem;color:var(--green-pale);line-height:1.1;margin-bottom:0.2rem;}
.hero-text-box h2 .big{font-size:3.2rem;font-weight:600;color:var(--white);display:block;font-style:italic;}
.hero-text-box p{color:rgba(216,243,220,0.85);font-size:0.97rem;font-weight:300;line-height:1.75;margin:1.2rem 0 2rem;}
.hero-button{display:inline-block;background:var(--green-light);color:var(--white);text-decoration:none;padding:0.85rem 2rem;border-radius:50px;font-size:0.88rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;transition:background 0.25s,transform 0.2s,box-shadow 0.2s;box-shadow:0 4px 15px rgba(0,0,0,0.2);}
.hero-button:hover{background:var(--green-mid);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.3);}
#temas{padding:80px 5%;background:linear-gradient(160deg,#1b4332 0%,#2d6a4f 50%,#1a3d2e 100%);text-align:center;}
#temas h2{font-family:'Cormorant Garamond',serif;color:var(--white);font-size:2.4rem;font-weight:400;margin-bottom:0.5rem;}
#temas .subtitle{color:var(--green-accent);font-size:0.9rem;font-weight:300;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:3rem;}
.cards-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1200px;margin:0 auto;}
.card{background:linear-gradient(145deg,#ffffff 0%,#f5eeff 100%);padding:2rem 1.8rem;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.15);width:260px;transition:transform 0.3s,box-shadow 0.3s;text-align:center;border-top:4px solid var(--lila-mid);border-bottom:3px solid transparent;}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(139,43,226,0.2);border-bottom-color:var(--lila-mid);}
.card i{font-size:2.2rem;color:var(--lila-mid);margin-bottom:1rem;display:block;}
.card h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--green-dark);margin-bottom:0.6rem;}
.card p{color:#555;font-size:0.9rem;font-weight:300;line-height:1.65;}
.card-link{display:inline-block;margin-top:1.2rem;color:var(--lila-mid);font-size:0.82rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:color 0.2s;}
.card-link:hover{color:var(--lila-dark);}
.link-section{background:linear-gradient(135deg,var(--lila-dark),var(--lila-mid));padding:60px 5%;text-align:center;color:var(--white);}
.link-section h3{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;margin-bottom:0.8rem;}
.link-section p{font-size:0.95rem;font-weight:300;opacity:0.85;margin-bottom:1.8rem;}
.btn-white{display:inline-block;background:var(--white);color:var(--lila-dark);padding:0.85rem 2.2rem;border-radius:50px;font-size:0.88rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 4px 20px rgba(0,0,0,0.2);}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.3);}
footer{background:var(--green-darkest);color:#b7e4c7;padding:50px 5% 25px;font-size:0.9rem;}
.footer-grid{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid #1b4332;}
.footer-col h4{color:var(--white);font-size:0.85rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1rem;}
.footer-col p{color:#95d5b2;line-height:1.7;font-weight:300;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem;}
.footer-col a{color:#b7e4c7;text-decoration:none;font-weight:300;transition:color 0.2s;}
.footer-col a:hover{color:var(--white);}
.footer-bottom{text-align:center;color:#74c69d;font-size:0.8rem;max-width:1200px;margin:0 auto;}
@keyframes fadeInRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
@media(max-width:860px){.hero-text-box{flex:0 0 100%;}.hero-container{flex-direction:column;justify-content:flex-end;padding-bottom:4rem;}.hero-space{display:none;}nav ul{gap:1rem;}.card{width:100%;max-width:320px;}}
