/* Rodao · cabecera y menú, iguales en toda la web (portada, coches, fichas, búsquedas, stores, privacidad).
   El HTML lo genera menu.py y el comportamiento está en menu.js. */
:root{--navh:58px}
@media (min-width:700px){:root{--navh:66px}}
/* ===== NAV: logo a la izquierda y bloques a la derecha (Hablemos, coches, Menú) ===== */
.nav{position:fixed;inset:0 0 auto;z-index:80;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;color:var(--orange);padding-right:0!important}
.nav > *{pointer-events:auto}
.nav-logo{padding-top:calc(18px + env(safe-area-inset-top,0px));font:900 1.35rem/1 var(--f-logo);font-stretch:125%;letter-spacing:-.04em;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s,color .4s}
.nav.scrolled .nav-logo{opacity:1;transform:none}
.nav-r{display:flex;align-items:stretch}
.nb{display:inline-flex;align-items:center;gap:14px;height:calc(var(--navh) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 20px 0;font:500 .74rem/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;transition:background .3s,color .3s}
.nb-d{background:var(--black);color:var(--white);border-left:1px solid rgba(255,255,255,.12)}
.nb-d i{font-style:normal;font-size:1.1rem;font-weight:300;opacity:.6}
.nb-d sup{font:500 .68rem var(--f-mono);color:var(--orange);margin-right:-6px;align-self:flex-start;margin-top:calc(16px + env(safe-area-inset-top,0px))}
.nb-o{background:var(--orange);color:var(--black);padding-inline:20px 22px}
.lines{position:relative;display:block;width:42px;height:12px}
.lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s cubic-bezier(.7,0,.2,1),top .5s}
.lines i:first-child{top:2px}.lines i:last-child{top:9px}
.menu-open .burger .lines i:first-child,.menu-close .lines i:first-child{top:5px;transform:rotate(12deg)}
.menu-open .burger .lines i:last-child,.menu-close .lines i:last-child{top:5px;transform:rotate(-12deg)}
.menu-open .nav-r .nb-d{opacity:0;pointer-events:none}
@media (min-width:700px){.nb{padding-inline:26px}.nb-o{padding-inline:26px 30px}.nb-d sup{margin-top:calc(20px + env(safe-area-inset-top,0px))}}
@media (max-width:599px){.nav .hide-s{display:none}}

/* ===== MENÚ ===== */
.menu{position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;visibility:hidden;pointer-events:none}
.menu-main,.menu-side{clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
.menu-main{background:var(--black);display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding-top:calc(92px + env(safe-area-inset-top,0px));padding-bottom:22px;overflow-y:auto}
.menu-side{background:var(--orange);color:var(--black);display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:20px max(var(--gut),env(safe-area-inset-left,0px)) calc(22px + env(safe-area-inset-bottom,0px));transition-delay:.06s}
.menu-close{display:none}
.menu-scrim{display:none}
.menu-open .menu{visibility:visible;pointer-events:auto}
.menu-open .menu-main,.menu-open .menu-side{clip-path:inset(0)}
.menu-list{display:flex;flex-direction:column;align-items:flex-start}
.menu-list > a,.menu-sub > button{display:flex;align-items:flex-start;gap:14px;max-width:100%;background:var(--white);color:var(--black);font:500 clamp(2.6rem,6.2vw,5.2rem)/1.02 var(--f-sans);letter-spacing:-.05em;
  padding:.04em .32em .08em .2em;border-bottom:1px solid var(--black);text-align:left;transform:translateY(30px);opacity:0;transition:background .25s,padding .3s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
.menu-open .menu-list > a,.menu-open .menu-sub > button{transform:none;opacity:1;transition-delay:0s,0s,calc(.25s + var(--d,0) * .06s),calc(.25s + var(--d,0) * .06s)}
.menu-sub{--d:2}
.menu-sub > button{transition-delay:0s,0s,calc(.25s + .12s),calc(.25s + .12s)}
.menu-list sup{font:500 .7rem/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin-top:.9em;max-width:9ch}
.menu-list sup b{font-weight:500}
.menu-sub > button i{font-style:normal;font-weight:300;transition:transform .3s}
.menu-sub.open > button i{transform:rotate(45deg)}
.subs{display:flex;flex-direction:column;align-items:flex-start;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
.menu-open .nav-logo{color:var(--orange)!important;opacity:1;transform:none}
.menu-sub.open .subs{max-height:260px}
.subs a{background:var(--orange);color:var(--black);font:500 clamp(1.35rem,2.6vw,2.1rem)/1.1 var(--f-sans);letter-spacing:-.03em;padding:.12em .4em .16em .3em;border-bottom:1px solid var(--black)}
.menu-foot{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;font-size:.86rem;color:var(--mute-d)}
.status{display:flex;align-items:center;gap:8px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#3BD16F;box-shadow:0 0 0 4px rgba(59,209,111,.2)}
.menu-social{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:1.05rem}
.menu-legal{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;opacity:.75}
@media (hover:hover){.menu-list > a:hover,.menu-sub > button:hover{background:var(--orange);padding-left:.45em}.subs a:hover{background:var(--white)}.menu-social a:hover{text-decoration:underline}.nb-d:hover{background:#1d1d1d}.nb-o:hover{background:var(--white)}}
@media (min-width:900px){
  .menu{grid-template-columns:1fr min(330px,26vw);grid-template-rows:min(78vh,760px) 1fr}
  .menu-main{padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:26px}
  .menu-side{justify-content:space-between;padding:0 28px 30px;height:100%}
  .menu-close{display:flex;align-items:center;justify-content:flex-end;gap:16px;height:66px;align-self:stretch;margin-inline:-28px;padding-inline:26px 30px;font:500 .74rem/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--black)}
  .menu-social{flex-direction:column;gap:4px;font-size:1.25rem;margin-top:auto;margin-bottom:28px}
  .menu-scrim{display:block;grid-column:1/-1;background:rgba(10,10,10,.35);border:0;opacity:0;transition:opacity .5s}
  .menu-open .menu-scrim{opacity:1}
  .menu-open .nav .burger{opacity:0;pointer-events:none}
}


/* páginas interiores: barra negra fija con el logo siempre visible */
.nav.solid{background:rgba(10,10,10,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-left:max(var(--gut,16px),env(safe-area-inset-left,0px))}
.nav.solid .nav-logo{opacity:1;transform:none;padding-top:calc((var(--navh) - 1.35rem) / 2 + env(safe-area-inset-top,0px))}
.nav.solid .nb-d{border-left-color:rgba(255,255,255,.1)}
body.has-nav{padding-top:calc(var(--navh) + env(safe-area-inset-top,0px))}
.menu-open .nav.solid{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav a,.menu a{text-decoration:none}
.nav.solid .nav-logo{color:var(--orange)}
/* con el menú abierto, la cabecera no tapa el botón «Cerrar» (solo el botón Menú/Cerrar del móvil recibe clics) */
.menu-open .nav-r{pointer-events:none}
.menu-open .nav-r .burger{pointer-events:auto}
@media (min-width:900px){.menu-open .nav-r .burger{pointer-events:none}}