/* ==========================================================================
   KLOVER - layout.css
   Navbar, footer, ritmo de secciones y contenedores estructurales.
   ========================================================================== */

/* ---- Navbar ---- */
.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:.5px solid var(--line);
}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.logo img{height:30px;width:auto;display:block;flex:none}
.logo small{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--u,var(--indigo));padding-left:11px;border-left:1.5px solid var(--line2)}

.nav-right{display:flex;align-items:center;gap:24px}
.navlinks{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600;color:var(--ink2)}
.navlinks a{transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a.btn{color:#fff}

.nav-toggle{
  display:none;
  width:42px;height:42px;border:1px solid var(--line2);border-radius:10px;
  background:#fff;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .2s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav-right{
    position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:.5px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(18,18,18,.4);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav-right.open{max-height:420px}
  .navlinks{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .navlinks a{padding:16px 40px;border-top:.5px solid var(--line)}
  .navlinks a.btn{margin:16px 40px;justify-content:center}
}

/* ---- Secciones ---- */
section{padding:90px 0}
.sec-head{max-width:64ch}
.sec-head h2{font-weight:800;font-size:42px;letter-spacing:-.03em}
.sec-head p{color:var(--ink2);font-size:18px;margin-top:16px;font-weight:500}
@media(max-width:620px){.sec-head h2{font-size:32px}}

/* ---- Hero (esqueleto comun) ---- */
.hero{padding:84px 0 60px}
.hero .wrap{display:grid;grid-template-columns:1.4fr .9fr;gap:34px;align-items:center}
.hero h1{font-weight:800;letter-spacing:-.035em;margin-top:20px}
.hero .row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}
@media(max-width:840px){.hero .wrap{grid-template-columns:1fr}.hero-art{display:none}}

/* Trebol animado del hero */
.clover-svg{width:290px;height:290px;animation:cloverSpin 55s linear infinite}
@keyframes cloverSpin{to{transform:rotate(360deg)}}
.petals{transform-box:fill-box;transform-origin:center;animation:cloverBreathe 5s ease-in-out infinite}
@keyframes cloverBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@media(prefers-reduced-motion:reduce){
  .clover-svg,.petals{animation:none}
  .clover-svg circle[fill],.recupero-meter .bar div{transition:none}
}

/* ---- Footer ---- */
footer{border-top:.5px solid var(--line);padding:44px 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center;color:var(--ink3);font-size:13px;font-weight:500}
footer .logo{font-size:17px;color:var(--ink)}
footer .logo img{height:26px}
footer .fl{display:flex;gap:20px;flex-wrap:wrap}
footer .fl a{transition:color .2s}
footer .fl a:hover{color:var(--ink)}