/* ==========================================================================
   La Logia Barbería — lalogiabarberia.com
   Sistema visual: "carta de logia" — tinta, hueso, oxblood y latón.
   Sin dependencias, sin build. Un archivo, una intención.
   ========================================================================== */

:root{
  /* color */
  --tinta:      #0B0B0C;   /* el fondo del logo: la calle de noche */
  --tinta-2:    #141416;
  --hueso:      #E8E1D3;   /* papel envejecido: el salón por dentro */
  --hueso-2:    #F3EEE5;
  --rojo:       #D81E15;   /* tomado del logotipo */
  --rojo-hondo: #7A0E0A;
  --laton:      #B08D4F;   /* filetes, versalitas, el sello */
  --humo:       #8A857C;
  --humo-osc:   #5C574E;

  /* tipografía */
  --display: "Bodoni Moda", "Times New Roman", serif;
  --lapida:  "Cinzel", "Bodoni Moda", serif;
  --texto:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* medidas */
  --ancho: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --aire: clamp(4.5rem, 10vw, 9rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--rojo); color:#fff; padding:.75rem 1.25rem; font-weight:600;
}
.skip:focus{ left:.5rem; top:.5rem; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--laton); outline-offset:3px; border-radius:2px;
}

/* ── piezas compartidas ───────────────────────────────────────────────── */

.cejilla{
  font-family:var(--lapida);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--laton);
  margin:0 0 1.5rem;
}
.cejilla--osc{ color:var(--rojo-hondo); }

.titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 2.5rem;
}
.titulo--claro{ color:var(--hueso-2); }

.btn{
  --alto:.95rem;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:var(--alto) 1.9rem;
  font-family:var(--texto);
  font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:1px;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn--sm{ --alto:.7rem; padding:var(--alto) 1.2rem; font-size:.72rem; }
.btn--lg{ --alto:1.15rem; padding:var(--alto) 2.6rem; }

.btn--rojo{ background:var(--rojo); color:#fff; border-color:var(--rojo); }
.btn--rojo:hover{ background:var(--rojo-hondo); border-color:var(--rojo-hondo); }

.btn--linea{ color:var(--hueso); border-color:rgba(232,225,211,.35); }
.btn--linea:hover{ border-color:var(--laton); color:var(--laton); }

.btn--linea-osc{ color:var(--tinta); border-color:rgba(11,11,12,.28); }
.btn--linea-osc:hover{ border-color:var(--rojo); color:var(--rojo); }

/* aparición al desplazar */
.reveal{ opacity:0; transform:translateY(18px); }
.is-in .reveal{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.is-in .reveal:nth-child(2){ transition-delay:.10s; }
.is-in .reveal:nth-child(3){ transition-delay:.20s; }
.is-in .reveal:nth-child(4){ transition-delay:.30s; }
.is-in .reveal:nth-child(5){ transition-delay:.40s; }
.is-in .reveal:nth-child(6){ transition-delay:.50s; }

/* ── barra superior ───────────────────────────────────────────────────── */

.barra{
  position:fixed; inset:0 0 auto; z-index:50;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
  overflow:hidden;
}

.barra__bg{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  z-index:0; opacity:.2;
}

.barra.esta-abajo{
  background:rgba(11,11,12,.9);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(176,141,79,.22);
}

.barra.esta-abajo .barra__bg{
  opacity:.1;
}

.barra__in{
  position:relative; z-index:1;
  max-width:var(--ancho); margin-inline:auto;
  padding:1rem var(--gutter);
  display:flex; align-items:center; gap:2rem;
}
.barra__marca{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--hueso);
  font-family:var(--lapida); font-size:.9rem;
  letter-spacing:.22em; text-transform:uppercase;
  margin-right:auto;
}
.barra__nav{ display:flex; gap:2rem; }
.barra__nav a{
  text-decoration:none; color:rgba(232,225,211,.72);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.barra__nav a:hover{ color:var(--hueso); border-bottom-color:var(--rojo); }

@media (max-width:900px){
  .barra__nav{ display:none; }
}

/* ── portada ──────────────────────────────────────────────────────────── */

.portada{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:8rem var(--gutter) 6rem;
  background:
    radial-gradient(120% 85% at 50% 8%, #1B1B1E 0%, var(--tinta) 62%),
    var(--tinta);
  color:var(--hueso);
  text-align:center;
  overflow:hidden;
}

.portada__bg{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  z-index:0; opacity:1;
}

/* filete doble estilo diploma */
.portada__cerco{
  position:absolute; inset:clamp(.9rem,2.2vw,1.9rem);
  border:1px solid rgba(176,141,79,.30);
  pointer-events:none;
  z-index:1;
}
.portada__cerco::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(176,141,79,.14);
}
.portada__in{ position:relative; z-index:2; max-width:44rem; }

.portada__logo{
  width:clamp(190px,26vw,300px);
  margin:0 auto 2.25rem;
  filter:drop-shadow(0 18px 48px rgba(216,30,21,.20));
}
.portada__titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,1.2rem + 4.4vw,4.25rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
}
.portada__titulo em{
  display:block; font-style:italic; font-weight:700; color:var(--rojo);
}
.portada__bajada{
  max-width:34rem; margin:0 auto 2.75rem;
  color:rgba(232,225,211,.72);
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
}
.portada__acciones{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
}
.portada__nota{
  margin:1.75rem 0 0;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(232,225,211,.42);
}
.portada__scroll{
  position:absolute; bottom:2.4rem; left:50%; translate:-50% 0;
  width:1px; height:56px; background:rgba(176,141,79,.28); overflow:hidden;
}
.portada__scroll span{
  position:absolute; inset:0; background:var(--rojo);
  animation:cae 2.6s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cae{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ── junta: sello + prueba social ─────────────────────────────────────── */

.junta{
  position:relative;
  background:var(--tinta);
  padding:0 var(--gutter) clamp(3.5rem,7vw,5.5rem);
  text-align:center;
}
.junta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(176,141,79,.4),transparent);
}

.sello{
  position:relative;
  width:clamp(126px,17vw,168px); aspect-ratio:1;
  margin:0 auto clamp(2.5rem,5vw,3.5rem);
  display:grid; place-items:center;
}
.sello svg{ position:absolute; inset:0; width:100%; height:100%; }
.sello img{ width:44%; opacity:.94; }
.sello__borde{ fill:none; stroke:var(--laton); stroke-width:1.4; opacity:.5; }
.sello__borde--fino{ stroke-width:.7; opacity:.3; }
.sello__giro{ transform-origin:100px 100px; animation:gira 46s linear infinite; }
.sello__texto{
  font-family:var(--lapida); font-size:11.5px; font-weight:600;
  letter-spacing:.24em; fill:var(--laton); opacity:.85;
}
@keyframes gira{ to{ transform:rotate(360deg); } }

.prueba{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.75rem,6vw,5rem);
}
.prueba li{ display:grid; gap:.35rem; }
.prueba b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem);
  line-height:1; color:var(--hueso-2);
}
.prueba span{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--humo);
}

/* ── la casa ──────────────────────────────────────────────────────────── */

.casa{ background:var(--hueso); padding:var(--aire) var(--gutter); }
.casa__in{ max-width:var(--ancho); margin-inline:auto; }
.casa__cols{
  display:grid; gap:2rem clamp(2rem,5vw,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  max-width:56rem;
}
.casa__texto{
  margin:0; font-size:1.06rem; color:var(--humo-osc);
}
.casa__texto:first-child::first-letter{
  font-family:var(--display); font-weight:700;
  font-size:3.6rem; line-height:.78;
  float:left; margin:.28rem .55rem 0 0; color:var(--rojo);
}

/* ── carta de servicios ───────────────────────────────────────────────── */

.carta{
  background:var(--hueso-2);
  padding:var(--aire) var(--gutter);
  border-block:1px solid rgba(11,11,12,.09);
}
.carta__in{ max-width:var(--ancho); margin-inline:auto; }

.carta__lista{
  list-style:none; margin:0 0 3rem; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));
  border-top:1px solid rgba(11,11,12,.14);
}
.carta__lista li{
  padding:1.9rem clamp(0rem,2.5vw,2rem) 1.9rem 0;
  border-bottom:1px solid rgba(11,11,12,.14);
  position:relative;
  transition:background .3s ease;
}
.carta__lista li:hover{ background:rgba(216,30,21,.035); }
.carta__lista h3{
  font-family:var(--display); font-weight:700;
  font-size:1.4rem; line-height:1.15; margin:0 0 .55rem;
}
.carta__lista p{ margin:0; color:var(--humo-osc); font-size:.95rem; max-width:26rem; }

.carta__pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;
  margin:0; color:var(--humo-osc); font-size:.95rem; max-width:52rem;
}

/* ── el rito ──────────────────────────────────────────────────────────── */

.rito{
  background:var(--tinta);
  color:var(--hueso);
  padding:var(--aire) var(--gutter);
}
.rito__in{ max-width:var(--ancho); margin-inline:auto; text-align:center; }
.rito__pasos{
  list-style:none; margin:0 0 3.25rem; padding:0;
  display:grid; gap:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  text-align:left;
}
.rito__pasos li{
  padding-top:1.6rem;
  border-top:1px solid rgba(176,141,79,.32);
}
.rito__num{
  display:block;
  font-family:var(--lapida); font-size:.95rem; letter-spacing:.2em;
  color:var(--rojo); margin-bottom:1rem;
}
.rito__pasos h3{
  font-family:var(--display); font-weight:700; font-size:1.3rem;
  margin:0 0 .6rem; color:var(--hueso-2);
}
.rito__pasos p{ margin:0; color:rgba(232,225,211,.62); font-size:.95rem; }

/* ── visita ───────────────────────────────────────────────────────────── */

.visita{ background:var(--hueso); padding:var(--aire) var(--gutter); }
.visita__in{
  max-width:var(--ancho); margin-inline:auto;
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  align-items:start;
}
.ficha{ margin:0 0 2.5rem; display:grid; gap:1.4rem; }
.ficha div{ padding-left:1.1rem; border-left:2px solid var(--rojo); }
.ficha dt{
  font-family:var(--lapida); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rojo-hondo); margin-bottom:.3rem;
}
.ficha dd{ margin:0; color:var(--humo-osc); }
.ficha a{ color:var(--tinta); text-decoration-color:var(--rojo); text-underline-offset:3px; }

.visita__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2rem; }

.redes{ list-style:none; margin:0; padding:0; display:flex; gap:1.75rem; }
.redes a{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--humo-osc); text-decoration:none;
  border-bottom:1px solid rgba(11,11,12,.2); padding-bottom:2px;
}
.redes a:hover{ color:var(--rojo); border-bottom-color:var(--rojo); }

.visita__mapa{
  aspect-ratio:4/3.4;
  border:1px solid rgba(11,11,12,.16);
  background:var(--hueso-2);
  overflow:hidden;
}
.visita__mapa iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(.85) contrast(1.06);
  transition:filter .5s ease;
}
.visita__mapa:hover iframe{ filter:none; }

/* ── cierre ───────────────────────────────────────────────────────────── */

.cierre{
  position:relative;
  background:var(--tinta);
  color:var(--hueso);
  padding:var(--aire) var(--gutter);
  text-align:center;
  overflow:hidden;
}

.cierre__bg{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; z-index:0;
  opacity:.4;
}

.cierre__in{ position:relative; z-index:1; max-width:38rem; margin-inline:auto; }
.cierre img{ margin:0 auto 2rem; width:clamp(84px,10vw,120px); opacity:.92; }
.cierre__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,1.2rem + 3.2vw,3.25rem);
  line-height:1.08; margin:0 0 2.5rem;
}
.cierre__titulo em{ font-style:italic; font-weight:700; color:var(--rojo); }

/* ── galería ──────────────────────────────────────────────────────────────── */

.galeria{
  background:var(--hueso-2); padding:var(--aire) var(--gutter);
}
.galeria__in{
  max-width:var(--ancho); margin-inline:auto;
}
.galeria .titulo{ margin-top:1.5rem; }

/* ── coverflow carousel ──────────────────────────────────────────────────── */

.coverflow{
  position:relative; width:100%; margin-top:3rem;
}

.coverflow__frame{
  position:relative; width:100%;
  perspective:1200px;
  outline:none; cursor:grab;
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y;
}

.coverflow__frame:active{ cursor:grabbing; }

.coverflow__frame:focus-visible{
  ring:2px solid var(--rojo);
  ring-offset:2px;
  border-radius:8px;
}

.coverflow__track{
  position:relative;
  height:clamp(280px, 50vw, 500px);
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  padding:40px 0;
}

.coverflow__slide{
  position:absolute;
  width:clamp(200px, 30vw, 380px);
  height:clamp(200px, 30vw, 380px);
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) rotateY(0deg) translateZ(0px);
  transform-style:preserve-3d;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  will-change:transform, opacity;
  transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.6s ease;
  opacity:0;
}

.coverflow__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

.coverflow__slide.is-center{
  opacity:1;
  z-index:10;
}

.coverflow__slide.is-prev,
.coverflow__slide.is-next{
  opacity:0.6;
}

.coverflow__slide.is-prev-2,
.coverflow__slide.is-next-2{
  opacity:0.3;
}

/* Navegación */

.coverflow__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  background:rgba(11,11,12,.7);
  backdrop-filter:blur(12px);
  border:1px solid rgba(216,30,21,.2);
  color:var(--hueso);
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.3s ease;
  padding:0;
}

.coverflow__nav:hover{
  background:rgba(11,11,12,.85);
  color:var(--rojo);
  border-color:var(--rojo);
  transform:translateY(-50%) scale(1.05);
}

.coverflow__nav:active{
  transform:translateY(-50%) scale(0.98);
}

.coverflow__nav svg{
  width:24px;
  height:24px;
  stroke-width:2.5;
}

.coverflow__nav--prev{
  left:20px;
}

.coverflow__nav--next{
  right:20px;
}

@media (max-width:760px){
  .coverflow__nav{
    width:40px;
    height:40px;
  }
  .coverflow__nav--prev{
    left:12px;
  }
  .coverflow__nav--next{
    right:12px;
  }
}

/* Paginación */

.coverflow__pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:2.5rem;
}

.coverflow__dot{
  width:10px;
  height:10px;
  border:2px solid var(--laton);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:all 0.3s ease;
  padding:0;
}

.coverflow__dot:hover{
  background:var(--laton);
  transform:scale(1.2);
}

.coverflow__dot--active{
  background:var(--rojo);
  border-color:var(--rojo);
  width:12px;
  height:12px;
}

@media (max-width:760px){
  .coverflow__pagination{
    gap:10px;
    margin-top:2rem;
  }
  .coverflow__dot{
    width:8px;
    height:8px;
  }
  .coverflow__dot--active{
    width:10px;
    height:10px;
  }
}

/* ── reseñas ──────────────────────────────────────────────────────────────── */

.resenas{
  background:var(--tinta-2); color:var(--hueso); padding:var(--aire) var(--gutter);
}
.resenas__in{
  max-width:var(--ancho); margin-inline:auto;
}
.resenas .cejilla{ color:var(--laton); }
.resenas .titulo{ color:var(--hueso); }
.resenas__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:2rem;
  margin-top:3rem;
}
.resena{
  background:rgba(176,141,79,.08); padding:2.5rem 2rem; border-radius:8px;
  border-left:4px solid var(--rojo);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  opacity:1; transform:translateY(0); visibility:visible;
}
.resena__encabezado{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  margin-bottom:1.5rem;
  padding-bottom:1rem; border-bottom:1px solid rgba(176,141,79,.2);
}
.resena__autor{
  flex:1;
}
.resena__nombre{
  margin:0; font-weight:700; font-size:1.1rem;
  color:var(--hueso);
}
.resena__fecha{
  margin:0.4rem 0 0; font-size:.8rem; color:var(--humo);
  text-transform:uppercase; letter-spacing:.05em;
}
.resena__estrellas{
  color:var(--laton); font-size:1rem; letter-spacing:.08em;
  flex-shrink:0; font-weight:700;
}
.resena__texto{
  margin:0 0 1.5rem; color:var(--hueso); line-height:1.7;
  font-size:.95rem; font-style:italic;
}
.resena__fuente{
  display:inline-block; font-size:.75rem;
  color:var(--laton); text-decoration:none;
  border-bottom:1px solid var(--laton); padding-bottom:3px;
  transition:all .3s ease; text-transform:uppercase; letter-spacing:.05em;
}
.resena__fuente:hover{
  color:var(--rojo); border-bottom-color:var(--rojo); transform:translateX(2px);
}
@media (max-width:760px){
  .resenas__grid{ grid-template-columns:1fr; gap:1.5rem; }
  .resena{ padding:2rem 1.5rem; }
  .resena__encabezado{ flex-direction:column; }
}

/* ── pie ──────────────────────────────────────────────────────────────── */

.pie{
  position:relative; background:var(--tinta); color:var(--humo);
  border-top:1px solid rgba(176,141,79,.18);
  padding:2rem var(--gutter) 6rem;
  font-size:.78rem;
  overflow:hidden;
}

.pie__bg{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; z-index:0;
  opacity:.4;
}

.pie__in{
  position:relative; z-index:1;
  max-width:var(--ancho); margin-inline:auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
}
.pie p{ margin:0; }
.pie a{ color:var(--laton); text-decoration:none; }
.pie a:hover{ text-decoration:underline; }

/* ── barra de reserva en móvil ────────────────────────────────────────── */

.movil{
  position:fixed; inset:auto 0 0; z-index:60;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:var(--rojo); color:#fff; text-decoration:none;
  font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.movil span{
  font-size:.6rem; font-weight:400; letter-spacing:.16em; opacity:.8; margin-top:.15rem;
}
@media (max-width:760px){
  .movil{ display:flex; }
  .barra .btn{ display:none; }
  .pie{ padding-bottom:7rem; }
}

/* ── accesibilidad: movimiento reducido ───────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}