/* ============================================================
   FUNDACIÓN PANACA — TOPBAR / HEADER / MEGA-MENÚ / FOOTER / FLOTANTES
   Misma jerarquía del referente; colores y tipografía del Figma.
   ============================================================ */

/* ---------- TOPBAR (azul noche) ---------- */
.topbar { background: var(--azul); color: #C9D7E2; font-size: var(--step--1); }
.topbar__in { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem; }
.topbar__msg { display:flex; align-items:center; gap:.5em; opacity:.95; }
.topbar__msg b { color:#fff; }
.topbar__heart { width:1em; height:1em; color: var(--rojo); flex-shrink:0; }
.topbar__links { display:flex; align-items:center; gap:1.2rem; }
.topbar__links a { opacity:.85; transition:opacity .25s; }
.topbar__links a:hover { opacity:1; }
.topbar__lang { border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill); padding:.15em .7em; }
@media (max-width:900px){ .topbar__msg{ display:none; } }
@media (max-width:600px){ .topbar__in{ justify-content:flex-end; } .topbar__links a:first-child{ display:none; } }

/* ---------- HEADER ---------- */
.header { position: sticky; top: 0; z-index: 100; transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s; }
.header__in { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding-block:.8rem; }
.header.is-solid { background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--linea), var(--shadow-sm); }
.brand { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand__logo { height: 46px; width:auto; transition: transform .4s var(--ease); }
.brand:hover .brand__logo { transform: scale(1.04); }

/* Nav principal (8 categorías del mapa de navegación) */
.nav { display:flex; align-items:center; gap:0; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display:inline-flex; align-items:center; gap:.35em;
  padding:.7em .62em; border-radius: var(--r-btn);
  font-weight:600; font-size: var(--step--1); letter-spacing:-.005em;
  color: var(--tinta); transition: color .25s, background .25s;
}
.nav__link .caret { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); opacity:.55; }
.nav__item:hover .nav__link { background: var(--rojo-suave); color: var(--rojo); }
.nav__item:hover .caret { transform: rotate(225deg) translateY(-1px); }
.nav__link.is-active { color: var(--rojo); }
.nav__link.is-active::after { content:""; position:absolute; left:.62em; right:.62em; bottom:.3em; height:2px; border-radius:0; background: var(--rojo); }

/* Mega menú */
.mega {
  position:absolute; top: calc(100% + 10px); left:50%; translate:-50% 0;
  width: min(640px, 88vw);
  background: var(--blanco); border:1px solid var(--linea);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 1.3rem; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 120;
}
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity:1; visibility:visible; transform:none; }
.mega::before { content:""; position:absolute; top:-14px; left:0; right:0; height:16px; }
.mega--wide { width: min(760px, 92vw); }
.mega__grid { display:grid; grid-template-columns: 1fr 1fr; gap:.3rem 1.2rem; }
.mega__col-title { grid-column:1/-1; font-size:var(--step--1); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.2rem; }
.mega__link { display:flex; gap:.85rem; align-items:flex-start; padding:.65rem .75rem; border-radius:var(--r-md); transition: background .25s; }
.mega__link:hover { background: var(--hueso); }
.mega__link .ic { flex-shrink:0; width:36px; height:36px; border-radius:0; display:grid; place-items:center; background: var(--rojo-suave); color:var(--rojo); }
.mega__link .ic svg { width:18px; height:18px; }
.mega__link.verde .ic   { background: var(--verde-suave); color: var(--verde); }
.mega__link.naranja .ic { background: var(--naranja-suave); color: var(--naranja-hover); }
.mega__link.vino .ic    { background: var(--vino-suave); color: var(--vino); }
.mega__link b { display:block; font-size:var(--step-0); color:var(--tinta); font-weight:600; line-height:1.2; }
.mega__link span { font-size:var(--step--1); color:var(--tinta-3); line-height:1.35; }
.mega__feature {
  margin-top:.9rem; padding:1rem 1.15rem; border-radius:var(--r-md);
  background: var(--azul); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.mega__feature b { font-size:var(--step-1); font-weight:600; }
.mega__feature.rojo { background: var(--rojo); }
.mega__feature.verde { background: var(--verde); }

.header__cta { display:flex; align-items:center; gap:.6rem; }

/* Hamburguesa */
.burger { display:none; width:46px; height:46px; border-radius:var(--r-btn); border:1px solid var(--linea); background:var(--blanco); flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span { width:20px; height:2px; background:var(--tinta); border-radius:0; transition: transform .35s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* 8 categorías: la nav necesita ancho. Bajo 1280px colapsa a hamburguesa. */
@media (max-width: 1279px){ .nav { display:none; } .burger { display:flex; } }
@media (max-width: 700px){ .header__cta .btn { display:none; } }
@media (max-width: 380px){
  .header__in { gap:.5rem; }
  .brand__logo { height:38px; }
}

/* Menú móvil */
.mobile-menu {
  position: fixed; inset:0; z-index:200; background: var(--blanco);
  transform: translateX(100%); transition: transform .45s var(--ease);
  display:flex; flex-direction:column; padding: 1.2rem var(--gutter) 2rem; overflow-y:auto;
}
.mobile-menu.is-open { transform:none; }
.mobile-menu__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.mobile-menu__close { width:46px; height:46px; border-radius:var(--r-btn); border:1px solid var(--linea); font-size:1.6rem; line-height:1; }
.mobile-menu details { border-bottom:1px solid var(--linea); }
.mobile-menu summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:1rem .2rem; font-size:var(--step-1); font-weight:600; cursor:pointer; }
.mobile-menu summary::-webkit-details-marker{ display:none; }
.mobile-menu summary .pm { transition: transform .3s; color:var(--rojo); font-weight:400; }
.mobile-menu details[open] summary .pm { transform: rotate(45deg); }
.mobile-menu__sub { padding: 0 .2rem 1rem; display:grid; gap:.1rem; }
.mobile-menu__sub a { padding:.55rem .2rem; color:var(--tinta-2); font-weight:500; font-size:var(--step-0); }
.mobile-menu__flat { padding:1rem .2rem; font-size:var(--step-1); font-weight:600; border-bottom:1px solid var(--linea); }
.mobile-menu__cta { margin-top:auto; padding-top:1.5rem; display:grid; gap:.6rem; }

/* ---------- FLOTANTE WHATSAPP ---------- */
.wa {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index:150;
  display:flex; align-items:center; gap:.6rem;
  background: var(--verde); color:#fff; font-weight:600; font-size:var(--step--1);
  padding:.8em 1.15em; border-radius:var(--r-pill);
  box-shadow: 0 16px 40px -14px rgba(16,96,73,.65);
  transition: transform .35s var(--ease-out), background .3s;
}
.wa:hover { transform: translateY(-3px) scale(1.03); background: var(--verde-hover); }
.wa svg { width:22px; height:22px; }
.wa__txt { max-width:0; overflow:hidden; white-space:nowrap; transition: max-width .45s var(--ease); }
.wa:hover .wa__txt { max-width:180px; }
@media (max-width:600px){ .wa__txt{ display:none; } }

/* ---------- FOOTER ---------- */
.footer { background: var(--azul); color:#B9C9D6; padding-block: clamp(3.5rem,6vw,6rem) 2rem; position:relative; overflow:hidden; }
.footer__glow { position:absolute; top:-30%; left:-10%; width:60%; height:120%; background: radial-gradient(circle, rgba(16,96,73,.35), transparent 62%); pointer-events:none; }
.footer__in { position:relative; z-index:1; }
.footer__top { display:grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.12); }
.footer__brand-logo { height:52px; margin-bottom:1.2rem; filter: brightness(0) invert(1); opacity:.95; }
.footer h5 { font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; opacity:.7; font-weight:600; }
.footer__col a { display:block; padding:.32rem 0; color:#AFC0CE; transition:color .25s, padding-left .25s; font-size:var(--step-0); }
.footer__col a:hover { color:#fff; padding-left:5px; }
.footer__manifesto { font-size:var(--step-1); line-height:1.35; color:#E4ECF2; max-width:32ch; }
.footer__manifesto b { color:var(--naranja); font-weight:600; font-style:italic; }
.footer__social { display:flex; gap:.6rem; margin-top:1.4rem; }
.footer__social a { width:42px; height:42px; border-radius:var(--r-btn); border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; transition: background .3s, transform .3s, border-color .3s; }
.footer__social a:hover { background:var(--rojo); border-color:var(--rojo); color:#fff; transform:translateY(-3px); }
.footer__bottom { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; font-size:var(--step--1); color:#8199AC; }
.footer__certs { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; opacity:.85; }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; gap:2rem; } .footer__brand{ grid-column:1/-1; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } }