/* ============================================================
   GODSIDE BARBERSHOP — Noir · Gimnasio José Valenciano
   Paleta: fondo #0B0B0C · texto #EDEAE4 · acento #C4A24E
   Tipos: Anton (display) · Oswald (UI) · monospace (datos)
   ============================================================ */

:root{
  --bg:#0B0B0C;
  --ink:#EDEAE4;
  --acc:#C4A24E;
  --grain:0.05;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

html{background:var(--bg);scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc)}
::selection{background:var(--acc);color:var(--bg)}
img{display:block}

/* Grano de película (5%) sobre todo el sitio */
body::after{content:'';position:fixed;inset:0;z-index:2147480000;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");background-size:280px 280px}

/* ---------- utilidades tipográficas ---------- */
.kicker{margin:0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:0.24em;color:var(--acc)}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;color:rgba(237,234,228,0.45)}
.display{margin:0;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:0.95}
.line-wrap{display:block;overflow:hidden}
.line-wrap>[data-line]{display:block}

/* ---------- barra de progreso ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;z-index:1200}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;align-items:center;gap:16px;padding:0 clamp(16px,4vw,48px);height:64px;background:rgba(11,11,12,0.88);border-bottom:1px solid rgba(237,234,228,0.12);backdrop-filter:blur(6px)}
/* Logo en dos líneas: GODSIDE arriba y BARBERSHOP debajo, sangrado y a un 68%
   del tamaño. Mismo bloque en la barra y en el pie, de ahí la clase suelta.
   Todo va en em (sangrado, tamaño, separación) para que baste con cambiar el
   font-size del contenedor y el conjunto escale sin descuadrarse. */
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:0.16em;font-family:'Anton',sans-serif;font-size:18px;line-height:0.88;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap}
.logo__b{font-size:0.68em;margin-left:1.35em;letter-spacing:0.14em}
.logo em{color:var(--acc);font-style:normal}
.nav-links{display:flex;gap:clamp(12px,2.4vw,32px);margin-left:auto;overflow:hidden;font-family:'Oswald',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;white-space:nowrap}
.nav-links a{color:rgba(237,234,228,0.7)}
.nav-links a:hover{color:var(--acc)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:0;cursor:pointer;background:var(--acc);color:var(--bg);font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;transition:background 200ms ease}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:active{transform:translateY(1px)}
.btn-nav{flex:none;height:38px;padding:0 22px;font-size:12px}
.btn-lg{height:56px;padding:0 40px;font-size:14px;letter-spacing:0.26em}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0.55) 0%,rgba(11,11,12,0.15) 40%,rgba(11,11,12,0.92) 100%)}
.hero-top{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding:88px clamp(16px,4vw,48px) 0;font-family:var(--mono);font-size:10px;letter-spacing:0.18em;color:rgba(237,234,228,0.65);text-transform:uppercase}
.hero-title{position:relative;margin:auto 0 0;padding:6vh clamp(16px,4vw,48px) clamp(48px,8vh,96px);font-size:clamp(52px,12.5vw,184px);line-height:0.92;display:flex;flex-direction:column}
.hero-title .stroke{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero-title .right{align-self:flex-end;text-align:right}
.hero-title .dot{color:var(--acc)}
.hero-bottom{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:0 clamp(16px,4vw,48px) 28px;font-family:var(--mono);font-size:10px;letter-spacing:0.18em;color:rgba(237,234,228,0.5)}

/* ---------- secciones ---------- */
.section{padding:clamp(96px,16vh,180px) clamp(16px,4vw,48px);border-top:1px solid rgba(237,234,228,0.1)}
.section-inner{max-width:1080px;margin:0 auto}
.section-inner-wide{max-width:1280px;margin:0 auto}

/* ---------- concepto ---------- */
.concepto{position:relative;padding:clamp(96px,16vh,180px) clamp(16px,4vw,48px)}
.concepto-bg{position:absolute;inset:0;overflow:hidden}
.concepto-bg img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;opacity:0.32;filter:grayscale(1) contrast(1.3)}
.concepto-bg .scrim{position:absolute;inset:0;background:linear-gradient(180deg,#0B0B0C 0%,rgba(11,11,12,0.55) 50%,#0B0B0C 100%)}
.concepto-grid{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,6vw,96px);align-items:end}
.concepto h2{font-size:clamp(40px,6.5vw,88px);line-height:0.96}
.concepto-text{max-width:460px;border-left:1px solid rgba(237,234,228,0.14);padding-left:clamp(20px,3vw,36px)}
.concepto-text p{margin:0 0 16px;font-size:15px;line-height:1.7;color:rgba(237,234,228,0.85)}
.concepto-text p+p{color:rgba(237,234,228,0.6);margin-bottom:28px}
.concepto-text .meta{margin:0;font-size:11px;color:rgba(237,234,228,0.5)}

/* ---------- tarifas ---------- */
.tarifas-header{text-align:center;margin-bottom:clamp(40px,7vh,72px)}
.tarifas-header h2{font-size:clamp(48px,9vw,128px)}
.tarifas-header .meta{margin:16px 0 0}
.price-list{display:flex;flex-direction:column}
.price-row{display:flex;align-items:baseline;gap:16px;padding:22px 0;border-top:1px solid rgba(237,234,228,0.14)}
.price-row:last-child{border-bottom:1px solid rgba(237,234,228,0.14)}
.price-row.featured{border-top:2px solid var(--acc)}
.price-row.featured .name{color:var(--acc)}
.price-row .name{font-family:'Anton',sans-serif;font-size:clamp(22px,3.2vw,36px);text-transform:uppercase;letter-spacing:0.02em}
.price-row .sub{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:rgba(237,234,228,0.45)}
.price-row .leader{flex:1;border-bottom:1px dotted rgba(237,234,228,0.3);transform:translateY(-6px)}
.price-row .dur{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:rgba(237,234,228,0.45)}
.price-row .price{font-family:var(--mono);font-size:clamp(18px,2.4vw,26px);color:var(--acc)}
.tarifas-foot{margin:28px 0 0;text-align:center}
.tarifas-foot a{color:var(--acc)}

/* ---------- historia ---------- */
.historia-header{margin-bottom:clamp(40px,7vh,80px)}
.historia-header h2{font-size:clamp(44px,8vw,112px)}
.quote{margin:24px 0 0;max-width:520px;font-size:16px;line-height:1.6;font-style:italic;color:rgba(237,234,228,0.7)}
.quote cite{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:0.18em;color:rgba(237,234,228,0.45)}
.fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,5vw,72px);align-items:start;margin-bottom:clamp(40px,7vh,80px)}
.foto{position:relative;margin:0;overflow:hidden}
.foto.offset{padding-top:clamp(0px,6vh,64px)}
.foto img{width:100%;height:clamp(420px,60vh,620px);object-fit:cover;filter:contrast(1.06) saturate(1.05)}
.foto .scrim{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,0.78) 100%)}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 18px;font-family:var(--mono);font-size:10px;letter-spacing:0.22em;color:rgba(237,234,228,0.9)}
.foto figcaption .acc{color:var(--acc)}
.rounds{display:flex;flex-direction:column}
.round{position:relative;display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,64px);align-items:baseline;padding:clamp(28px,5vh,48px) 0;border-top:1px solid rgba(237,234,228,0.14)}
.round:last-child{border-bottom:1px solid rgba(237,234,228,0.14)}
.round .num{flex:none;width:clamp(90px,12vw,160px);font-family:'Anton',sans-serif;font-size:clamp(56px,8vw,110px);line-height:0.9;color:transparent;-webkit-text-stroke:1px rgba(237,234,228,0.35)}
.round.final .num{color:var(--acc);-webkit-text-stroke:0}
.round .body{flex:1;min-width:min(100%,320px)}
.round .tag{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:0.24em;color:var(--acc)}
.round h3{margin:0 0 12px;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(24px,3vw,36px);text-transform:uppercase}
.round p:last-child{margin:0;max-width:520px;font-size:15px;line-height:1.7;color:rgba(237,234,228,0.65)}

/* ---------- galería ---------- */
.gal-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(32px,6vh,56px)}
.gal-header h2{font-size:clamp(44px,8vw,112px)}
/* Flex, no grid: las fotos se reparten el ancho y nunca queda una celda vacía,
   haya 2, 3 o 9. Cada figura mantiene el vertical 3:4 de las fotos originales. */
.gal{display:flex;flex-wrap:wrap;gap:2px}
.gal figure{position:relative;flex:1 1 clamp(240px,24vw,340px);margin:0;overflow:hidden;aspect-ratio:3/4}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal-scrim{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,0.82) 100%);pointer-events:none}
.gal figcaption{position:absolute;left:0;bottom:0;padding:16px 18px;font-family:var(--mono);font-size:10px;letter-spacing:0.22em;color:rgba(237,234,228,0.9)}

/* Enlace a Instagram cerrando la galería. Pegado a las fotos (los mismos 2px de
   hueco que hay entre ellas) para que se lea como el último módulo de la tira. */
.gal-ig{display:flex;align-items:center;gap:clamp(14px,2.4vw,22px);margin-top:2px;padding:clamp(18px,3vw,26px) clamp(18px,3vw,28px);color:var(--ink);border:1px solid rgba(237,234,228,0.18);transition:background 240ms ease,border-color 240ms ease,color 240ms ease}
.gal-ig:hover{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.gal-ig__ico{flex:none;width:clamp(30px,4vw,38px);height:clamp(30px,4vw,38px)}
.gal-ig__txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.gal-ig__handle{font-family:'Anton',sans-serif;font-size:clamp(20px,3.2vw,32px);letter-spacing:0.03em;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
/* .meta va en gris fijo: sobre el oro del hover no se leería */
.gal-ig:hover .meta{color:rgba(11,11,12,0.72)}
.gal-ig__go{margin-left:auto;flex:none;font-size:clamp(20px,3vw,28px);line-height:1}
@media (prefers-reduced-motion:reduce){.gal img{transition:none}.gal figure:hover img{transform:none}}

/* ---------- ubicación ---------- */
.ubi-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(32px,6vw,96px);align-items:start}
.ubi-grid h2{margin-bottom:28px;font-size:clamp(40px,6vw,80px);line-height:0.96}
.ubi-grid address{font-style:normal;margin:0 0 32px;font-size:15px;line-height:1.8;color:rgba(237,234,228,0.8)}
.hours{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:rgba(237,234,228,0.75)}
.hours>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(237,234,228,0.14)}
.hours>div:last-child{border-bottom:1px solid rgba(237,234,228,0.14)}
.hours .open{color:var(--ink)}
.hours .closed{color:var(--acc)}
.map{border:1px solid rgba(237,234,228,0.14)}
.map iframe{display:block;width:100%;height:clamp(320px,50vh,520px);border:0;filter:grayscale(1) invert(0.92) contrast(1.05)}
.map p{margin:0;padding:12px 16px;border-top:1px solid rgba(237,234,228,0.14)}
.map a{color:rgba(237,234,228,0.65)}

/* ---------- reserva ---------- */
.reserva-box{max-width:920px;margin:0 auto;border:2px solid var(--acc);padding:clamp(28px,6vw,72px)}
.reserva-box h2{margin-bottom:20px;font-size:clamp(44px,7vw,96px)}
.reserva-box .lead{margin:0 0 32px;max-width:480px;font-size:15px;line-height:1.7;color:rgba(237,234,228,0.65)}
.widget-ph{min-height:220px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(237,234,228,0.3);margin-bottom:24px}
.widget-ph p,.modal-ph p{margin:0;padding:24px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;line-height:2;color:rgba(237,234,228,0.45)}
.reserva-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ---------- footer ---------- */
/* El logo del pie ya no es una línea suelta: con dos, baseline alineaba el
   copyright con GODSIDE y dejaba BARBERSHOP colgando por debajo. Centrado los
   dos bloques quedan a la misma altura. */
.footer{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:32px clamp(16px,4vw,48px);border-top:1px solid rgba(237,234,228,0.12)}
.footer-logo{font-size:18px} /* mismo cuerpo que el de la barra: el resto lo pone .logo */
.footer .meta{letter-spacing:0.18em;color:rgba(237,234,228,0.4)}
/* Con .footer .meta delante hace falta la misma especificidad para el color */
.footer .footer-ig{white-space:nowrap;color:rgba(237,234,228,0.6)}
.footer .footer-ig:hover{color:var(--acc)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:2000;background:rgba(11,11,12,0.92);display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-box{width:min(100%,620px);max-height:86vh;overflow:auto;background:var(--bg);border:1px solid var(--acc);padding:clamp(24px,5vw,48px);position:relative}
.modal-close{cursor:pointer;position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid rgba(237,234,228,0.25);border-radius:0;background:transparent;color:var(--ink);font-size:18px;line-height:1}
.modal-close:hover{border-color:var(--acc);color:var(--acc)}
.modal-box h3{margin:0 0 20px;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(30px,5vw,48px);text-transform:uppercase;line-height:0.95}
.modal-ph{min-height:320px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(237,234,228,0.3)}
body.modal-open{overflow:hidden}

/* ---------- parallax + progreso con scroll-driven animations ---------- */
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes par{from{transform:translateY(-6.5%)}to{transform:translateY(6.5%)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    [data-progress]{animation:growX linear both;animation-timeline:scroll()}
    [data-parallax]{animation:par linear both;animation-timeline:view()}
  }
}

/* ---------- móvil ---------- */
@media (max-width:720px){
  html{scroll-padding-top:64px}
  .nav-links{display:none}
  .btn-nav{margin-left:auto}
  .price-row{flex-wrap:wrap;row-gap:2px;column-gap:12px}
  .price-row .leader{display:none}
  .price-row .price{margin-left:auto}
  .price-row .dur,.price-row .sub{flex-basis:100%;order:3}
}

/* ============================================================
   AÑADIDOS DE LA INTEGRACIÓN EN WORDPRESS
   Todo lo de arriba es el diseño original, sin tocar.
   ============================================================ */

/* La barra de admin de WP solo es fija a partir de 783px; por debajo la pone
   absolute y se va con el scroll. Compensar ahí dejaría el nav despegado del
   borde para siempre, así que el desplazamiento va solo en escritorio. */
@media (min-width:783px){
  body.admin-bar .nav{top:32px}
  body.admin-bar .progress{top:32px}
}

/* wp_nav_menu envuelve los enlaces en un <ul>: lo hacemos transparente al flex */
.nav-links ul{display:flex;gap:inherit;align-items:center;list-style:none;margin:0;padding:0}
.nav-links li{margin:0}
.nav-links .current-menu-item>a{color:var(--acc)}

/* Embeds reales de Booksy (sustituyen a .widget-ph cuando hay URL) */
.booksy-embed{margin-bottom:24px;border:1px solid rgba(237,234,228,0.2)}
.booksy-embed iframe{display:block;width:100%;height:clamp(420px,70vh,720px);border:0}
.modal-embed iframe{display:block;width:100%;height:min(64vh,560px);border:0}

/* Botón de reserva por WhatsApp.
   Hereda .btn: se queda en el oro del theme y solo se tiñe de verde WhatsApp al
   pasar por encima, para no romper la paleta noir con un botón de marca ajena. */
.btn-wa{gap:12px;letter-spacing:0.2em}
.btn-wa:hover{background:#25D366;color:var(--bg)}
.btn-ico{flex:none;width:20px;height:20px;fill:currentColor}

/* Variante secundaria: cuando Booksy manda, WhatsApp pasa a ser el plan B.
   El contorno va en box-shadow y no en border porque .btn tiene border:0 y una
   línea real le sumaría 2px de alto al lado del botón principal. */
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(237,234,228,0.35)}
.btn-ghost:hover{background:#25D366;color:var(--bg);box-shadow:none}

@media (max-width:720px){
  /* A 390px los dos botones caben mejor apilados y a todo el ancho de la caja */
  .reserva-cta .btn{width:100%;padding:0 20px;font-size:13px;letter-spacing:0.16em}
}

/* Clase de accesibilidad que WordPress usa en su marcado (paginación, formularios) */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}

/* ------------------------------------------------------------
   NAVEGACIÓN MÓVIL (≤720px)
   El escritorio no se toca: fuera del media query el botón no existe
   y .nav-links se queda exactamente como estaba.
   ------------------------------------------------------------ */

.nav-toggle{display:none}
.nav-scrim{display:none}

@media (max-width:720px){

  /* El aire vertical está calculado para escritorio: 16vh arriba y abajo son
     135px cada uno a 844 de alto, o sea 270px de nada entre sección y sección.
     Aquí baja a ~55px, algo más de la mitad de recorte. */
  .section,.concepto{padding-top:clamp(40px,6.5vh,60px);padding-bottom:clamp(40px,6.5vh,60px)}

  /* La línea de "Godside Barbershop — Gimnasio José Valenciano · Chamberí, Madrid" repite
     lo que ya cuentan el Concepto y la Ubicación, y a 390px parte en dos líneas. */
  .hero-top{display:none}

  /* margin-bottom:auto empuja todo el hueco libre hacia abajo y deja el título
     arriba del todo; el padding lo separa de la barra fija de 64px. */
  /* gap en vez de line-height: cada línea vive en un .line-wrap con overflow
     hidden, y tocar el line-height cambiaría la altura del recorte y con ella
     el recorrido de la animación de entrada. El gap no interfiere. */
  .hero-title{margin:0 0 auto;padding-top:88px;padding-bottom:0;gap:0.6em}

  /* "a pie" va pegado al borde derecho. Se separa de él sin perder el escalonado
     respecto a las otras dos líneas, que arrancan a la izquierda. */
  .hero-title .right{margin-right:2.4em}

  .kicker{font-size:14px}

  /* El último round cierra con una línea y la sección siguiente abre con otra.
     Con el aire reducido quedan a 55px: se leen como raya doble. Sobra la de arriba. */
  .round:last-child{border-bottom:0}

  /* En la barra conviven logo + Reservar + hamburguesa sin poder partir línea.
     Partido en dos, el logo ocupa la mitad de ancho que en una sola línea, así
     que aquí basta con un escalado suave para los móviles estrechos. */
  .nav-logo{font-size:clamp(15px,4.2vw,18px);letter-spacing:0.03em}

  .nav-toggle{display:block;position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{content:'';position:absolute;width:22px;height:2px;background:var(--ink);transition:transform 260ms var(--ease),background 160ms linear}
  .nav-toggle__bar{left:11px;top:21px}
  .nav-toggle__bar::before{left:0;top:-7px}
  .nav-toggle__bar::after{left:0;top:7px}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{transform:translateY(7px) rotate(45deg);background:var(--acc)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{transform:translateY(-7px) rotate(-45deg);background:var(--acc)}

  /* El backdrop-filter convertía a .nav en bloque contenedor de sus hijos
     position:fixed, así que el panel se medía contra la barra (390×64) y no
     contra la pantalla. Sin blur aquí, fixed vuelve a referirse al viewport.
     La opacidad del fondo sube porque ya no hay desenfoque que lo compense. */
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(11,11,12,0.96)}

  /* Cajón lateral desde la derecha. Arranca bajo la barra a propósito: así el
     logo, Reservar y la X siguen visibles y siempre hay forma de cerrar.
     Sigue siendo el mismo <nav> del escritorio, sin marcado duplicado. */
  .nav-links{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:fixed;top:64px;right:0;bottom:0;left:auto;width:min(78vw,320px);z-index:1090;margin:0;padding:28px clamp(20px,5vw,28px) 32px;gap:0;overflow-y:auto;overscroll-behavior:contain;white-space:normal;background:var(--bg);border-left:1px solid rgba(237,234,228,0.16);transform:translateX(100%);visibility:hidden;transition:transform 380ms var(--ease),visibility 0s linear 380ms}
  .nav-links.is-open{transform:none;visibility:visible;transition-delay:0s,0s}

  /* Velo sobre el resto de la página: enfoca el cajón y da zona para cerrarlo */
  .nav-scrim{display:block;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:1080;background:rgba(11,11,12,0.72);opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 0s linear 300ms}
  body.nav-open .nav-scrim{opacity:1;visibility:visible;transition-delay:0s,0s}

  /* wp_nav_menu envuelve en <ul>: se apila igual que los enlaces sueltos */
  .nav-links ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-links li{width:100%}

  .nav-links a{display:block;width:100%;padding:18px 0;font-family:'Anton',sans-serif;font-size:clamp(24px,6.5vw,30px);font-weight:400;letter-spacing:0.02em;line-height:1.05;color:var(--ink);border-bottom:1px solid rgba(237,234,228,0.12)}
  .nav-links a:active{color:var(--acc)}

  body.nav-open{overflow:hidden}

  /* Duración y descripción caben en la misma línea en vez de apilarse en dos */
  .price-row .sub,.price-row .dur{flex-basis:auto}

  /* El iframe del mapa se traga el swipe vertical y atrapa el scroll.
     Queda como imagen; para interactuar está el enlace ABRIR MAPA. */
  .map iframe{pointer-events:none}

  /* Los enlaces en mono son de 10px: se les da superficie táctil sin cambiar el aspecto */
  .tarifas-foot a,.map p a{display:inline-block;padding:8px 2px}
}

/* Sin animación, pero conservando el transform: el estado cerrado del cajón
   depende de translateX(100%): anularlo lo dejaría abierto para siempre. */
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .nav-links,.nav-scrim,
  .nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{transition:none}
}

/* Plantilla de respaldo (blog, páginas sueltas, 404): hereda la estética noir */
.entry{max-width:720px;margin:0 auto}
.entry+.entry{margin-top:56px;padding-top:56px;border-top:1px solid rgba(237,234,228,0.14)}
.entry__title{margin:0 0 16px;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(32px,5vw,64px);text-transform:uppercase;line-height:0.98}
.entry__title a{color:var(--ink)}
.entry__thumb{margin:0 0 24px}
.entry__content{font-size:15px;line-height:1.7;color:rgba(237,234,228,0.75)}
.entry__content>*+*{margin-top:16px}
.entry__content a{color:var(--acc)}
.pagination{max-width:720px;margin:56px auto 0;font-family:var(--mono);font-size:11px;letter-spacing:0.18em}
.pagination .page-numbers{display:inline-block;padding:6px 10px;color:rgba(237,234,228,0.6)}
.pagination .current{background:var(--acc);color:var(--bg)}