/* ============================================================
   MIKUY — layout.css
   Estructura fija de la pagina: barra superior, header/nav y footer.
   ============================================================ */

/* ---------- Barra superior ---------- */
.topbar{background:var(--green-900);color:#CFE6D8;font-size:.82rem}
.topbar .wrap{display:flex;gap:22px;align-items:center;justify-content:space-between;min-height:42px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:.2s}
.topbar a:hover{color:#fff}
.topbar-left{display:flex;gap:22px;flex-wrap:wrap}
.topbar .ruc{opacity:.7;letter-spacing:.04em}
.topbar svg{width:14px;height:14px;stroke:var(--lime)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.45);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.45);transition:box-shadow .3s}
.header.scrolled{box-shadow:0 10px 30px -22px rgba(14,33,25,.5)}
.nav{display:flex;align-items:center;gap:26px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{height:44px;width:auto;object-fit:contain}
.brand .fallback{font-family:var(--ff-display);font-size:1.6rem;font-weight:700;color:var(--green-800);letter-spacing:.02em;display:none}
.menu{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{font-size:.92rem;font-weight:600;color:var(--ink-2);position:relative;padding:6px 0;transition:.2s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--lime);transition:right .28s}
.menu a:hover{color:var(--green-800)}
.menu a:hover::after{right:0}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg)}
.burger.open span::after{top:0;transform:rotate(-45deg)}


/* ---------- Footer ---------- */
.footer{background:var(--green-900);color:#AFCBBB;padding:70px 0 0;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px}
/* Chip blanco: el logo original se lee bien sobre el footer oscuro sin importar sus colores */
.flogo-chip{display:inline-block;background:#fff;border-radius:14px;padding:12px 18px;margin-bottom:20px}
.footer img.flogo{height:40px;width:auto;display:block}
.footer h4{font-family:var(--ff-body);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:800}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a:hover{color:var(--lime)}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--lime);border-color:var(--lime)}
.socials svg{width:17px;height:17px;fill:currentColor}
.socials a:hover svg{fill:var(--green-900)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;opacity:.8}