/* ==========================================================
   Taxi Oficial Puerto de la Cruz · LM 21 — capa de rediseño 2027 · v2
   Se carga DESPUÉS de style.css.

   Tokens en 3 capas:  1 primitivos → 2 semánticos → 3 componentes.
   Claro / oscuro automático según el sistema (sin interruptor propio).
   Zonas seguras de iPhone, objetivos táctiles de 44 px, movimiento solo
   cuando responde a una acción. Sin fuentes ni recursos de terceros.
   ========================================================== */

/* ---------- 1 · PRIMITIVOS (valores crudos, sin significado) ---------- */
:root{
  --gray-0:#FFFFFF;  --gray-50:#F5F5F7;  --gray-150:#E3E3E6;  --gray-250:#CFCFD4;
  --gray-300:#A1A1A6; --gray-550:#5E5E63; --gray-900:#1D1D1F;
  --black:#000000;   --gray-850:#1C1C1E; --gray-800:#2C2C2E;  --gray-750:#38383A; --gray-700:#48484A;
  --blue-400:#2997FF; --blue-600:#0066CC; --blue-700:#00529F;
  --amber-400:#FFC83D; --amber-300:#FFD768;
  --ink-950:#101216; --ink-900:#0B0C0E; --ink-700:#262A31;
  --green-700:#047857; --green-800:#065F46;
  --red-700:#B42318;  --red-400:#FF6B60;

  --radius-s:.875rem; --radius-m:1.1rem; --radius-l:1.5rem;
  --ease:cubic-bezier(.22,.8,.3,1);
}

/* ---------- 2 · SEMÁNTICOS (qué significa cada color) — aquí cambia el tema ---------- */
:root{
  color-scheme:light dark;
  --bg:var(--gray-50);
  --surface:var(--gray-0);
  --surface-2:var(--gray-50);
  --text:var(--gray-900);
  --text-muted:var(--gray-550);          /* 5,9:1 sobre blanco · 5,4:1 sobre --bg */
  --border:var(--gray-150);
  --border-strong:var(--gray-250);
  --accent:var(--blue-600);
  --accent-ink:var(--blue-700);
  --accent-soft:rgba(0,102,204,.10);
  --danger:var(--red-700);
  --ok:var(--green-700);
  --glass:rgba(245,245,247,.78);
  --glass-card:rgba(255,255,255,.72);
  --seg-bg:rgba(60,60,67,.12);
  --seg-active:var(--gray-0);
  --shadow-1:0 1px 2px rgba(16,18,22,.04),0 1px 1px rgba(16,18,22,.03);
  --shadow-2:0 10px 30px -12px rgba(16,18,22,.18),0 2px 6px rgba(16,18,22,.05);
  --img-dim:1;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--black);
    --surface:var(--gray-850);
    --surface-2:var(--gray-800);
    --text:#F5F5F7;
    --text-muted:var(--gray-300);          /* 6,9:1 sobre --surface */
    --border:var(--gray-750);
    --border-strong:var(--gray-700);
    --accent:var(--blue-400);
    --accent-ink:var(--blue-400);
    --accent-soft:rgba(41,151,255,.18);
    --danger:var(--red-400);
    --glass:rgba(0,0,0,.72);
    --glass-card:rgba(44,44,46,.62);
    --seg-bg:rgba(118,118,128,.24);
    --seg-active:#636366;
    --shadow-1:none;
    --shadow-2:0 18px 40px -18px rgba(0,0,0,.85);
    --img-dim:.92;                          /* HIG: no dejar que lo blanco «brille» en oscuro */
  }
}
@media (prefers-contrast:more){
  :root{--text-muted:#48484D;--border:var(--gray-250)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{--text-muted:#C7C7CC;--border:var(--gray-700)}
}

/* puente con las utilidades de Tailwind ya compiladas en style.css */
:root{
  --color-apple-bg:var(--bg);
  --color-apple-card:var(--surface);
  --color-apple-text:var(--text);
  --color-apple-subtext:var(--text-muted);
  --color-apple-accent:var(--accent);
  --color-apple-accentHover:var(--accent-ink);
  --color-apple-border:var(--border);
}

/* ---------- 3 · COMPONENTES ---------- */
:root{
  --btn-bg:var(--gray-900);  --btn-bg-hover:#000;       --btn-fg:#FFFFFF;
  --fab-bg:var(--green-700); --fab-bg-hover:var(--green-800);
  --field-bg:var(--surface); --field-border:var(--border-strong);
  --chip-bg:var(--surface-2);
  --meter-bg:var(--ink-950); --meter-edge:var(--ink-700);
  --meter-digits:var(--amber-400); --meter-label:#A7ABB5; --meter-route:#D5D8DF;
  --meter-cta-bg:var(--amber-400); --meter-cta-bg-hover:var(--amber-300); --meter-cta-fg:#1A1405;
}
@media (prefers-color-scheme:dark){
  :root{
    --btn-bg:#F5F5F7; --btn-bg-hover:#FFFFFF; --btn-fg:#1D1D1F;
    --field-bg:var(--surface-2); --field-border:var(--gray-700);
    --meter-bg:var(--ink-900);
  }
}

/* ==========================================================
   BASE
   ========================================================== */
html{scroll-padding-top:5.25rem;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);letter-spacing:-.003em;text-rendering:optimizeLegibility}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* tipografía: escala algo más generosa (HIG: 17 pt por defecto, mínimo 11 pt) */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h1{letter-spacing:-.035em}
h2{letter-spacing:-.028em}
.text-xs{font-size:.8125rem;line-height:1.4}
.text-\[13px\]{font-size:.875rem}
.text-\[15px\]{font-size:1rem}
.text-apple-subtext{color:var(--text-muted)}

/* etiquetas en frase, no en MAYÚSCULAS espaciadas */
section p.eyebrow{
  text-transform:none;letter-spacing:0;font-size:1rem;font-weight:600;color:var(--accent-ink);
}
label.block{
  text-transform:none;letter-spacing:0;font-size:.875rem;font-weight:600;color:var(--text);
}
.req::after{color:var(--danger)}
.opt::after{font-weight:500}

/* ==========================================================
   COMPONENTES
   ========================================================== */

/* ---------- cabecera ---------- */
header.fixed{
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--border);
  padding-top:env(safe-area-inset-top);
}
header nav a{position:relative;padding:.5rem 0;transition:color .2s var(--ease)}
header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1.5px;
  background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
header nav a:hover::after{transform:scaleX(1)}
header [role="group"]{background:var(--seg-bg)}
header [role="group"] a{position:relative}
header [role="group"] a::before{content:"";position:absolute;inset:-4px -3px}   /* diana táctil de 44 px sin cambiar el aspecto */
header [role="group"] a[aria-current="true"]{background:var(--seg-active);color:var(--text);box-shadow:var(--shadow-1)}
main{padding-top:calc(6rem + env(safe-area-inset-top))}

/* ---------- botones ---------- */
.bg-apple-text{background-color:var(--btn-bg);color:var(--btn-fg)}
a.bg-apple-text:hover,button.bg-apple-text:hover{background-color:var(--btn-bg-hover)}
a.rounded-full,button.rounded-full{transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
a.bg-apple-text:active,button.bg-apple-text:active{transform:scale(.98)}
a.bg-apple-accent{background-color:var(--accent);color:#fff}
a.bg-apple-accent:hover{background-color:var(--accent-ink)}
.fab-wa{background:var(--fab-bg)!important;color:#fff!important}
.fab-wa:hover{background:var(--fab-bg-hover)!important}
.fab-wa,.fab-wrap .bg-apple-text{box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.fab-wrap{
  bottom:max(1rem,env(safe-area-inset-bottom));
  left:max(1rem,env(safe-area-inset-left));
  right:max(1rem,env(safe-area-inset-right));
}
@media (min-width:640px){.fab-wrap{left:auto;right:max(1.5rem,env(safe-area-inset-right))}}
#b-submit:disabled{background:var(--gray-550);color:#fff;opacity:.55}
@media (prefers-color-scheme:dark){#b-submit:disabled{background:var(--gray-700);color:var(--gray-300);opacity:1}}

/* ---------- portada ---------- */
.hero h1{font-size:clamp(2.1rem,6vw,4rem);line-height:1.06}
.hero h1 br{display:none}
.hero h1 span:last-child{display:block;font-size:.58em;line-height:1.2;margin-top:.45em;letter-spacing:-.02em}
.hero-facts{
  display:grid;grid-template-columns:1fr;gap:.75rem;margin:3rem auto 0;max-width:52rem;text-align:left;
}
.hero-facts + div{margin-top:2rem}
@media (min-width:640px){.hero-facts{grid-template-columns:repeat(3,1fr)}}
.hero-fact{
  display:flex;align-items:flex-start;gap:.75rem;
  background:var(--glass-card);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:.9rem 1rem;box-shadow:var(--shadow-1);
  font-size:.875rem;line-height:1.4;color:var(--text);font-weight:500;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.hero-fact svg{flex:none;width:1.25rem;height:1.25rem;margin-top:.05rem;color:var(--accent)}

/* ---------- galería ---------- */
section figure{box-shadow:var(--shadow-1);border-color:var(--border);background:var(--surface)}
section figure img{filter:brightness(var(--img-dim));transition:transform .8s var(--ease)}
@media (hover:hover){section figure:hover img{transform:scale(1.025)}}

/* ---------- tarjetas ---------- */
.bento-card{
  border-color:var(--border);box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
@media (hover:hover){
  .bento-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--border-strong)}
}
.bento-card h3{letter-spacing:-.02em}
@media (prefers-color-scheme:dark){
  .bg-blue-50{background:rgba(41,151,255,.16)}
  .bg-amber-50{background:rgba(255,200,61,.14)}
  .bg-emerald-50{background:rgba(52,211,153,.14)}
  .bg-purple-50{background:rgba(192,132,252,.16)}
  .bg-rose-50{background:rgba(251,113,133,.16)}
  .text-amber-600{color:#FBBF24}
  .text-emerald-600{color:#34D399}
  .text-purple-600{color:#C084FC}
  .text-rose-600{color:#FB7185}
}
.text-red-600{color:var(--danger)}

/* ---------- tarifas ---------- */
#tarifas{box-shadow:var(--shadow-1)}
.price-chip{
  display:flex;flex-direction:column;gap:.35rem;
  background:var(--chip-bg);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:.85rem 1rem;min-height:72px;cursor:pointer;text-align:left;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.price-chip:hover{border-color:var(--accent);transform:none;background:var(--surface)}
.price-chip.active{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.price-chip .chip-name{display:flex;align-items:center;gap:.4rem;font-size:.875rem;color:var(--text-muted);line-height:1.2}
.price-chip .chip-name svg{flex:none;width:1rem;height:1rem;color:var(--accent)}
.price-chip .chip-price{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}

/* el taxímetro: el elemento memorable de la página */
.meter-panel{
  background:var(--meter-bg)!important;border:1px solid var(--meter-edge)!important;color:#fff;
  border-radius:var(--radius-l)!important;padding:1.5rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -20px rgba(0,0,0,.6);
}
.meter-panel .meter-label{color:var(--meter-label)!important;text-transform:none!important;letter-spacing:0!important;font-size:.875rem!important}
.meter-panel .meter-route{color:var(--meter-route)!important;font-size:.875rem!important;min-height:1.25rem}
.meter-panel .meter-price{
  color:var(--meter-digits);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-weight:600;text-shadow:0 0 28px rgba(255,200,61,.28);
}
.meter-panel a{background:var(--meter-cta-bg)!important;color:var(--meter-cta-fg)!important;font-weight:600}
.meter-panel a:hover{background:var(--meter-cta-bg-hover)!important}

/* ---------- formulario ---------- */
.field{
  min-height:3rem;background:var(--field-bg);border:1px solid var(--field-border);border-radius:var(--radius-s);
  padding:.75rem 1rem;font-size:1rem;color:var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field:hover{border-color:var(--text-muted)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field:user-invalid{border-color:var(--danger);box-shadow:0 0 0 4px rgba(180,35,24,.14)}
select.field{
  appearance:none;-webkit-appearance:none;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
#priv-hint{color:var(--text-muted)}
#b-submit{min-height:3.25rem;font-size:1rem}
input[type="checkbox"]{cursor:pointer;accent-color:var(--accent)}
#f-priv,#c-check,#f-asap{width:1.25rem;height:1.25rem;flex:none}

/* ---------- FAQ ---------- */
details{transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
details:hover{border-color:var(--border-strong)}
details[open]{box-shadow:var(--shadow-2);border-color:var(--border-strong)}
details summary{border-radius:1rem}
details summary:focus-visible{outline-offset:-2px}

/* ---------- audioguía ---------- */
.lang-chip{background:var(--surface);color:var(--text-muted);border-color:var(--border)}
.lang-chip.on{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}

/* ---------- diálogos y aviso de cookies ---------- */
#consent>div:last-child,#cookie-dialog>div:last-child{box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
#cookie-banner{box-shadow:var(--shadow-2)}

/* ---------- pie ---------- */
footer{background:var(--surface);padding-bottom:calc(7rem + env(safe-area-inset-bottom))}
@media (min-width:640px){footer{padding-bottom:3rem}}
footer a,footer button{transition:color .2s var(--ease);min-height:44px;display:inline-flex;align-items:center}

/* ---------- objetivos táctiles ≥ 44 px (HIG · WCAG 2.2) ---------- */
header a[href="#top"],header a[href^="tel:"]{position:relative}
header a[href="#top"]::before,header a[href^="tel:"]::before{content:"";position:absolute;inset:-8px -4px}
header nav a{padding:.8rem 0}
header nav a::after{bottom:.55rem}
.min-h-\[40px\]{min-height:44px}
a[data-i18n="hero-rev"]{display:inline-flex;align-items:center;min-height:44px;padding:0 .25rem}
a.text-apple-accent[href="#tarifas"],a.text-apple-accent[href="#audioguia"]{display:inline-flex;align-items:center;min-height:44px}
#reservar .space-y-3>a{min-height:44px}
label:has(#f-priv){min-height:44px;align-items:center}

/* ---------- foco visible ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:.5rem}
.meter-panel a:focus-visible{outline-color:#fff}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  section figure img{transition:none}
}

/* ---------- móvil ---------- */
@media (max-width:639px){
  .hero{padding-top:.5rem}
  .hero-facts{margin-top:2rem;gap:.5rem}
  .hero-fact{padding:.7rem .9rem}
  #tarifas,#reservar{border-radius:var(--radius-l)}
}

/* ---- aviso tras enviar la reserva ---- */
:root{--ok-ink:#047857}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok-ink:#34D399}}
.sent-note{display:none;align-items:flex-start;gap:.625rem;margin-top:.875rem;padding:.75rem .875rem;border-radius:var(--radius-md,14px);background:color-mix(in srgb,var(--ok-ink) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok-ink) 30%,transparent);font-size:14px;line-height:1.45;color:var(--text)}
.sent-note.show{display:flex;animation:sent-in .25s var(--ease,ease-out)}
.sent-note svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--ok-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sent-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:.5rem 0;min-height:44px;box-sizing:border-box}
@keyframes sent-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- opiniones ---- */
.rev-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:768px){.rev-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
.rev-card{margin:0;display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;border-radius:var(--radius-xl,24px);background:var(--surface);border:1px solid var(--border)}
.rev-card blockquote{margin:0;display:grid;gap:.5rem}
.rev-stars{display:flex;gap:2px;color:#F5A623}
.rev-stars svg{width:18px;height:18px;fill:currentColor}
.rev-card p{margin:0;text-wrap:auto;font-size:16px;line-height:1.55;color:var(--text)}
.rev-card figcaption{margin-top:auto;padding-top:.5rem;font-size:14px;font-weight:600;color:var(--text-muted)}
.rev-link{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem;color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---- carrusel de opiniones en móvil ---- */
.rev-dots{display:none}
@media (max-width:767px){
  .rev-grid{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter,1rem));padding-inline:var(--gutter,1rem);scroll-padding-inline:var(--gutter,1rem);overscroll-behavior-x:contain}
  .rev-grid::-webkit-scrollbar{display:none}
  .rev-card{flex:0 0 84%;scroll-snap-align:start}
  .rev-dots{display:flex;justify-content:center;gap:8px;margin-top:-.25rem}
  .rev-dots i{width:7px;height:7px;border-radius:50%;background:var(--border-strong);transition:background .2s,transform .2s}
  .rev-dots i.on{background:var(--text);transform:scale(1.15)}
}
.rev-grid:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-xl,24px)}

/* ---- opción: ubicación en directo ---- */
.track-opt{display:flex;align-items:flex-start;gap:.75rem;min-height:44px;padding:.25rem 0;cursor:pointer}
.track-opt input{flex:none;margin-top:.1rem}
.track-t{display:block;font-size:14px;font-weight:500;color:var(--text)}
.track-h{display:block;font-size:13px;color:var(--text-muted);line-height:1.4;margin-top:1px}

/* ---- ajustes finales de maquetación ---- */
/* Tarifas: la última casilla ocupa la fila entera para no quedar sola */
@media (min-width:640px){#chips .price-chip:last-child{grid-column:1/-1;min-height:60px}}
/* Reserva: la columna de información acompaña al formulario */
@media (min-width:1024px){#reservar .lg\:col-span-5{position:sticky;top:6rem;align-self:start}}
/* Pie: mismo ancho útil que el contenido y alineado a la izquierda */
footer > div{max-width:69rem}
@media (min-width:640px){
  footer > div > div:first-child{flex-direction:column;align-items:flex-start;gap:1rem}
  footer > div > div:first-child > div:last-child{justify-content:flex-start}
}

/* ---- galería: 3 fotos verticales del mismo tamaño (4:5) ---- */
.gallery-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery-trio figure{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--radius-xl,24px);border:1px solid var(--border);background:var(--surface-2)}
.gallery-trio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){
  .gallery-trio{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter,1rem));padding-inline:var(--gutter,1rem);scroll-padding-inline:var(--gutter,1rem);overscroll-behavior-x:contain}
  .gallery-trio::-webkit-scrollbar{display:none}
  .gallery-trio figure{flex:0 0 76%;scroll-snap-align:start}
}


/* ---- taxi adaptado PMR (servicio de un compañero): discreto, al final de Reservar ---- */
.pmr-card{display:flex;gap:.875rem;align-items:flex-start;margin-top:2rem;padding:1rem 1.125rem;border-radius:var(--radius-m,14px);background:var(--surface-2);border:1px solid var(--border)}
.pmr-ico{flex:none;font-size:1.5rem;line-height:1.2}
.pmr-body{min-width:0}
.pmr-t{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.pmr-d{margin:.25rem 0 0;font-size:14px;line-height:1.45;color:var(--text-muted)}
.pmr-tel{display:inline-flex;align-items:center;min-height:44px;margin-top:.25rem;font-size:15px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.foot-badge{width:96px;height:96px;border-radius:50%;flex:none;box-shadow:0 6px 18px rgba(10,48,120,.22)}
@media (prefers-color-scheme:dark){.foot-badge{box-shadow:0 0 0 1px rgba(255,255,255,.12)}}

@media (max-width:639px){
  #cookie-banner{padding:.5rem .75rem;gap:.625rem;left:.75rem;right:.75rem}
  #cookie-banner p{font-size:12px;line-height:1.35}
  #cookie-banner button.shrink-0{min-height:36px;padding-inline:.875rem}
}

/* ---- menú móvil (☰) ---- */
.nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:0;background:var(--chip-bg,rgba(0,0,0,.05));color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-burger path{transition:transform .25s var(--ease,ease),opacity .2s;transform-origin:12px 12px}
.nav-burger[aria-expanded="true"] .b-top{transform:translateY(4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .b-mid{opacity:0}
.nav-burger[aria-expanded="true"] .b-bot{transform:translateY(-4px) rotate(-45deg)}
.m-menu[hidden]{display:none}
.m-menu{position:fixed;z-index:49;top:56px;left:0;right:0;display:flex;flex-direction:column;padding:.5rem 1rem 1rem;background:var(--glass,var(--surface));-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);box-shadow:var(--shadow-2);border-radius:0 0 22px 22px;animation:mmIn .22s var(--ease,ease)}
.m-menu a{display:block;padding:.95rem .5rem;font-size:17px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
.m-menu a:last-child{border-bottom:0}
.m-menu .m-call{margin-top:.5rem;text-align:center;border-radius:999px;background:var(--text);color:var(--bg);font-size:15px;padding:.85rem 1rem}
@keyframes mmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.m-menu{animation:none}.nav-burger path{transition:none}}
@media (max-width:767px){.nav-burger{display:inline-flex}}
@media (max-width:639px){.hdr-call{display:none!important}}
@media (min-width:768px){.m-menu{display:none!important}}