/* Menu panel (desktop), up to the site's editorial voice.
   - One surface with the header, edge to edge (a spread shadow clipped to the sides, so the
     layout and the open/close transition stay as they were).
   - It ends with the house's angled cut (the footer's edge, mirrored: peak at 62%).
   - Groups as the home's section titles (green square); sections set large in the heading
     face like a magazine index, each with its icon.
   - Items arrive in a short stagger; hover stays soft background and colour (180 ms).
   The phone drawer keeps its own layout (editorial.css). */

#hearder{--sv-panel:#fff;--sv-panel-cap:clamp(22px,2.6vw,38px)}

@media(min-width:761px){
/* Header band edge to edge with a layer behind it (clipping the header itself would also
   clip the panel, which hangs from it). */
body.menu-open #hearder{background:var(--sv-panel);box-shadow:none}
/* Widened by a clipped spread shadow, not by offsets: a shadow never makes the page scroll sideways. */
body.menu-open #hearder::before{content:"";position:absolute;z-index:-1;top:-24px;bottom:0;left:0;right:0;background:var(--sv-panel);
  box-shadow:0 0 0 100vmax var(--sv-panel);clip-path:inset(0 -100vmax);pointer-events:none}

/* 12px of room on each side (offset by left/width, so the content stays aligned) for the links'
   hover background, which bleeds 12px out; without it the panel scrolls sideways. */
body.js #hearder #primary-navigation{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;
  left:-12px;width:calc(100% + 24px);overflow-x:hidden;
  background:var(--sv-panel);box-shadow:0 0 0 100vmax var(--sv-panel);padding:22px 12px calc(44px + var(--sv-panel-cap));
  clip-path:polygon(-100vmax 0,calc(100% + 100vmax) 0,calc(100% + 100vmax) calc(100% - var(--sv-panel-cap) * .4),62% 100%,-100vmax calc(100% - var(--sv-panel-cap) * .75))}

/* Search across the top. */
#primary-navigation #search{grid-column:1/-1;margin:0 0 30px}
#primary-navigation #search form{min-height:56px}
#primary-navigation #search input{font-size:18px}

/* Index: the three groups side by side (no «Portada» link: the logo leads home). */
#hearder #primary-navigation #main_menu{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,44px);margin:0;padding:0;border:0}
#hearder #main_menu>li{border:0;margin:0;padding:0}

#hearder #main_menu .nav-group-heading{margin:0 0 10px}
#hearder #main_menu .nav-group-label{display:flex;align-items:center;gap:10px;font:600 19px/1.3 var(--font-heading);letter-spacing:var(--heading-tracking);color:var(--ink);padding:0}
#hearder #main_menu .nav-group-label::before{content:"";flex:0 0 8px;width:8px;height:8px;background:#87a735}

#hearder #main_menu .subnav{display:block;margin:0;padding:0}
#hearder #main_menu .subnav>li{margin:0;padding:0;border:0}
#hearder #main_menu .subnav a{display:flex;align-items:center;gap:12px;margin:0 -12px;padding:10px 12px;
  font:400 clamp(21px,1.9vw,26px)/1.2 var(--font-heading);letter-spacing:var(--heading-tracking);color:var(--ink);text-decoration:none;
  transition:background-color 180ms ease,color 180ms ease}
#hearder #main_menu .subnav .nav-item-icon{width:22px;height:22px;flex:0 0 22px;color:#6f8a3d}
#hearder #main_menu .subnav a:hover,#hearder #main_menu .subnav a:focus-visible{background:#f3f6ed;color:var(--accent)}
#hearder #main_menu .subnav a.active{color:var(--accent);font-weight:500}
#hearder #main_menu .subnav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Behind: the page dims and softens. */
.menu-backdrop{background:rgba(25,29,23,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Arrival: groups and sections in a short stagger. */
#hearder #main_menu>li:nth-child(1){--g:0}
#hearder #main_menu>li:nth-child(2){--g:1}
#hearder #main_menu>li:nth-child(3){--g:2}
#hearder #main_menu .subnav>li:nth-child(1){--i:1}
#hearder #main_menu .subnav>li:nth-child(2){--i:2}
#hearder #main_menu .subnav>li:nth-child(3){--i:3}
#hearder #main_menu .subnav>li:nth-child(4){--i:4}
#hearder #main_menu .subnav>li:nth-child(5){--i:5}
body.js.menu-open #hearder #main_menu .nav-group-heading,
body.js.menu-open #hearder #main_menu .subnav>li{animation:sv-panel-in 420ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--g,0) * 70ms + var(--i,0) * 40ms + 60ms)}
@keyframes sv-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){
body.js.menu-open #hearder #main_menu .nav-group-heading,body.js.menu-open #hearder #main_menu .subnav>li{animation:none}
#hearder #main_menu .subnav a{transition:none}
}