/* ════════════════════════════════════════════════════════════════════════════
   LA NAVAJA BARBER SHOP — sistema visual (Dirección B: oscura y de sastre)

   Paleta 100% real, sacada del CSS de producción de lanavajabarbershopsevilla.com,
   nada inventado ni sampleado de foto: crema #fdfbf7, verde muy oscuro #182a24,
   acento óxido #7a2021, beige #f0ebe1, cuero #8e644b. Aquí el oscuro pasa a ser
   el fondo dominante en vez del crema — ellos mismos ya usan ese verde como
   fondo de tarjeta en su propio sitio, así que no es un color nuevo, es un
   cambio de qué color manda.

   Tipografía: mismo sistema que el resto del catálogo de muestras (Newsreader,
   Archivo, Schibsted), servido en local — la CSP de la plataforma no admite
   Google Fonts en páginas propias. Su EB Garamond + Inter original no se
   pueden auto-alojar aquí sin añadir una fuente nueva al repositorio; Newsreader
   cumple el mismo papel de serif clásica sin salirse del sistema ya aprobado.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Newsreader';src:url('/fonts/newsreader-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Schibsted';src:url('/fonts/schibsted-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}

:root{
  --crema:#fdfbf7;
  --oscuro:#182a24;
  --oscuro-2:#20362f;
  --acento:#7a2021;
  --acento-2:#9c3233;
  --acento-claro:#bc8e8c; /* mismo óxido, aclarado a mano para pasar 4.5:1 en texto sobre #182a24 */
  --beige:#f0ebe1;
  --cuero:#8e644b;
  --hueso-2:#c9c2b3;
  --hueso-3:#8f9791;
  --filete:rgba(253,251,247,.14);
  --curva:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--oscuro);color:var(--crema);font-family:'Schibsted',system-ui,sans-serif;
     font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--acento);color:var(--crema)}
.hoja{max-width:1180px;margin:0 auto;padding:0 28px}
.et{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acento-claro)}

/* ── aviso de que es un concepto de rediseño, no la web oficial ────────────── */
.aviso{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso-3);
       padding:11px 28px;border-bottom:1px solid var(--filete);text-align:center}
.aviso a{color:var(--acento-claro)}

/* ── cabecera ────────────────────────────────────────────────────────────── */
/* Sin backdrop-filter a propósito: esa propiedad convierte a header.top en el
   "contenedor" para cualquier position:fixed de dentro (el menú móvil incluido),
   así que en vez de cubrir toda la pantalla se queda encajado en la altura de
   la propia cabecera (~64px). Fondo algo más opaco para compensar el blur perdido. */
header.top{position:sticky;top:0;z-index:20;background:rgba(24,42,36,.97);
           border-bottom:1px solid var(--filete)}
header.top .fila{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0}
.marca-logo{height:40px;width:auto;display:block}
nav.principal{display:flex;gap:24px;align-items:center}
nav.principal a{text-decoration:none;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
                color:var(--hueso-2);border-bottom:1px solid transparent;padding-bottom:3px;
                transition:border-color .18s var(--curva),color .18s var(--curva)}
nav.principal a:hover,nav.principal a[aria-current="page"]{color:var(--crema);border-bottom-color:var(--acento-claro)}
.tel-cabecera{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--crema);
              font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em}
.tel-cabecera svg{width:16px;height:16px;stroke:var(--acento-claro)}
/* 44x44px como mínimo táctil (el icono solo, a 16.5px heredados del body,
   quedaba minúsculo y costaba acertar el toque en el móvil real). */
.burger{display:none;background:none;border:none;color:var(--crema);
        width:44px;height:44px;align-items:center;justify-content:center;
        font-size:26px;line-height:1;cursor:pointer;margin:-8px -8px -8px 4px}
.burger:focus-visible{outline:2px solid var(--crema);outline-offset:2px}

/* ── botones ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:800;
     font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;text-decoration:none;
     border-radius:2px;transition:background .18s var(--curva),transform .12s var(--curva),border-color .18s var(--curva);
     white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.solido{background:var(--acento);color:var(--crema);border:1px solid var(--acento)}
.btn.solido:hover{background:var(--acento-2)}
.btn.linea{border:1.5px solid var(--hueso-2);color:var(--crema);background:transparent}
.btn.linea:hover{border-color:var(--crema)}
.btn:focus-visible{outline:2px solid var(--crema);outline-offset:3px}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:64px 0 76px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
              background:radial-gradient(circle at 25% 15%,rgba(122,32,33,.24),transparent 55%)}
/* height:auto es obligatorio aquí: el atributo HTML height="402" del <img>
   fija esa altura en crudo, y sin anularla el navegador no puede derivar la
   proporción a partir de aspect-ratio — encoge el ancho a la pantalla pero
   deja la altura en los 402px reales del archivo, y el logo sale estirado. */
.hero .marca-logo-grande{width:min(300px,66vw);height:auto;margin:0 auto 22px;position:relative}
.hero h1{position:relative;font-family:'Newsreader',Georgia,serif;font-weight:300;
         font-size:clamp(2.3rem,6vw,4rem);letter-spacing:-.02em;line-height:1.04;margin:14px 0}
.hero h1 em{font-style:italic;color:var(--acento-claro)}
.hero .sub{position:relative;color:var(--hueso-2);max-width:46ch;margin:0 auto;font-size:1.04rem;line-height:1.65}
.hero .ctas{position:relative;display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* ── franja de datos ─────────────────────────────────────────────────────── */
.datos{border-top:1px solid var(--filete);display:grid;grid-template-columns:repeat(4,1fr)}
.dato{padding:22px 22px;border-right:1px solid var(--filete);text-align:center}
.dato:last-child{border-right:none}
.dato b{display:block;font-family:'Archivo',sans-serif;font-weight:800;color:var(--acento-claro);font-size:1.05rem;
        font-variant-numeric:tabular-nums}
.dato span{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--hueso-3)}

/* ── secciones ───────────────────────────────────────────────────────────── */
section{padding:64px 0;border-bottom:1px solid var(--filete)}
section.sin-borde{border-bottom:none}
.doble{display:grid;grid-template-columns:150px 1fr;gap:36px}
h2{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(1.8rem,3.4vw,2.5rem);
   letter-spacing:-.01em;line-height:1.12;margin-bottom:10px;text-wrap:balance}
h2 em{font-style:italic;color:var(--acento-claro)}
.intro{color:var(--hueso-2);max-width:56ch;margin-bottom:30px;line-height:1.65}
.ancla{scroll-margin-top:84px}

/* ── lista de servicios ──────────────────────────────────────────────────── */
.serv{display:grid;grid-template-columns:1fr auto;gap:5px 28px;align-items:baseline;
      padding:22px 0;border-top:1px solid var(--filete)}
.serv:last-child{border-bottom:1px solid var(--filete)}
.serv h3{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:1.35rem}
.serv .p{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.3rem;color:var(--acento-claro);
         font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.serv .d{grid-column:1;color:var(--hueso-2);font-size:.95rem;max-width:58ch}
.serv .t{grid-column:2;text-align:right;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--hueso-3);font-variant-numeric:tabular-nums}

/* ── golpe de marca ──────────────────────────────────────────────────────── */
.golpe p.frase{font-family:'Newsreader',Georgia,serif;font-weight:300;font-style:italic;
               font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.28;max-width:20ch;text-wrap:balance}
.golpe p.frase b{font-weight:400;font-style:normal;color:var(--acento-claro);font-family:'Archivo',sans-serif;
                 font-size:.86em;letter-spacing:-.01em}
.golpe .pie{color:var(--hueso-2);max-width:48ch;margin-top:18px;font-size:.97rem}

/* ── reseñas ─────────────────────────────────────────────────────────────── */
.resenas{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.resena{border-top:1px solid var(--filete);padding-top:16px}
.resena .estrellas{color:var(--acento-claro);font-size:13px;letter-spacing:2px;margin-bottom:8px}
.resena p{color:var(--hueso-2);font-size:.95rem;line-height:1.6}
.resena b{display:block;margin-top:10px;font-family:'Archivo',sans-serif;font-size:11.5px;
          letter-spacing:.08em;text-transform:uppercase;color:var(--crema)}

/* ── franja de banco de productos ────────────────────────────────────────── */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.equipo .col{border-top:1px solid var(--hueso-3);padding-top:14px}
.equipo h3{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:1.16rem;margin-bottom:5px}
.equipo p{color:var(--hueso-2);font-size:.94rem}

/* ── horario ─────────────────────────────────────────────────────────────── */
.horas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.horas b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hueso-3);margin-bottom:4px}
.horas span{font-family:'Newsreader',Georgia,serif;font-size:1.14rem;font-variant-numeric:tabular-nums}

/* ── migas de pan ────────────────────────────────────────────────────────── */
.migas{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hueso-3);
       display:flex;gap:8px;flex-wrap:wrap;padding:18px 0 0}
.migas a{color:var(--hueso-2);text-decoration:none}
.migas a:hover{color:var(--crema)}

/* ── tarjetas de producto (tienda) ───────────────────────────────────────── */
.filtro{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filtro button{background:transparent;border:1px solid var(--filete);color:var(--hueso-2);
               font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
               padding:9px 16px;cursor:pointer;transition:border-color .18s var(--curva),color .18s var(--curva)}
.filtro button:hover,.filtro button[aria-pressed="true"]{border-color:var(--acento-claro);color:var(--crema)}
.productos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.producto{border-top:1px solid var(--filete);padding-top:18px}
.producto h3{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:1.14rem;margin-bottom:6px}
.producto p{color:var(--hueso-3);font-size:.87rem;line-height:1.5}
.producto .marca-p{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acento-claro);margin-bottom:6px;
                    display:block}

/* ── contacto / mapa ─────────────────────────────────────────────────────── */
.mapa{aspect-ratio:16/9;background:var(--beige);border:1px solid var(--filete);overflow:hidden}
.mapa iframe{width:100%;height:100%;border:0;filter:grayscale(.5) sepia(.15);transition:filter .5s var(--curva)}
.mapa:hover iframe{filter:none}
.medio{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--filete)}
.medio svg{width:20px;height:20px;stroke:var(--acento-claro);flex-shrink:0;margin-top:2px}
.medio b{display:block;font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--hueso-3);margin-bottom:3px}
.medio a{text-decoration:none;color:var(--crema)}
.medio a:hover{color:var(--acento-claro)}

/* ── cierre / footer ─────────────────────────────────────────────────────── */
.cierre{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:56px 0}
.cierre p{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:300;
          max-width:22ch;line-height:1.22}
footer.pie-sitio{padding:26px 0 90px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
                 color:var(--hueso-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.pie-sitio nav{display:flex;gap:20px;flex-wrap:wrap}
footer.pie-sitio a{color:inherit;text-decoration:none}
footer.pie-sitio a:hover{color:var(--crema)}

/* ── franja lateral / carrusel / banda reutilizan comun/anima.css ──────────── */
.carrusel{background:rgba(253,251,247,.06)}
.carrusel figcaption{font-family:'Newsreader',Georgia,serif;font-size:1.02rem}
.banda-mov{background:var(--acento);color:var(--crema);border:none}
.banda-mov span{font-family:'Archivo',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.22em}
.banda-mov i{opacity:.65}

/* ── CTA fija en móvil: llamar siempre a mano ───────────────────────────── */
.cta-fija{display:none}
@media(max-width:760px){
  .cta-fija{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;
            padding:10px 14px calc(10px + env(safe-area-inset-bottom));
            background:rgba(20,34,29,.96);backdrop-filter:blur(8px);border-top:1px solid var(--filete)}
  .cta-fija .btn{flex:1;justify-content:center;padding:14px 12px}
  body{padding-bottom:68px}
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .doble{grid-template-columns:1fr;gap:14px}
  .datos{grid-template-columns:repeat(2,1fr)}
  .dato:nth-child(2){border-right:none}
  .dato:nth-child(3),.dato:nth-child(4){border-top:1px solid var(--filete)}
  .resenas,.equipo,.productos{grid-template-columns:1fr}
  .productos{grid-template-columns:repeat(2,1fr)}
  /* Cubre hasta abajo del todo (bottom:0, no auto): un menú que se corta a
     media pantalla deja la mitad de un panel flotando sobre el contenido de
     detrás — aquí, encima del H1 de la portada. Con fondo sólido hasta el
     final no hay nada que pueda asomar por debajo. */
  nav.principal{position:fixed;inset:64px 0 0 0;background:var(--oscuro);flex-direction:column;
               align-items:flex-start;padding:18px 28px;gap:16px;overflow-y:auto;
               transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s var(--curva),transform .2s var(--curva)}
  nav.principal.abierta{opacity:1;transform:none;pointer-events:auto}
  .burger{display:flex}
  section{padding:48px 0}
}
@media(max-width:520px){.productos{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}