/* ── EL ESTILO DE LA WEB ──────────────────────────────────────────────────────
   Uno solo para las dos páginas: la vidriera (/) y el equipo (/equipo). Estaba
   metido adentro del HTML y ahora vive acá por dos razones: el navegador lo
   guarda en cache y no lo vuelve a bajar en cada visita, y tocar un color no es
   entrar a un archivo de 200 líneas donde el estilo y el contenido están
   mezclados.

   Tema claro y cálido. Marfil de fondo, tinta para leer, oro para el acento.
   Los colores del texto están elegidos para que se lean de verdad: todos pasan
   4.5:1 contra el fondo, que es el mínimo para que alguien con la vista cansada
   —o con el sol en la pantalla, que en Pilar pasa— pueda leerlos.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --marfil:#fbf8f3;        /* el fondo */
  --papel:#ffffff;         /* las tarjetas, un tono más arriba */
  --crema:#f3ece2;         /* las bandas alternas */
  --tinta:#1d1a16;         /* el texto */
  --tenue:#6b6155;         /* el texto secundario — 5.7:1 sobre marfil */
  --linea:#e7ded1;
  --oro:#8a6425;           /* el acento, para texto — 5.0:1 */
  --oro-claro:#c9a96e;     /* decorativo, y para texto sobre oscuro */
  --verde:#0f7a41;         /* WhatsApp, legible sobre claro */
  --verde-vivo:#25d366;    /* el botón flotante, con texto oscuro encima */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sombra:0 1px 2px rgba(29,26,22,.05), 0 10px 30px rgba(29,26,22,.07);
  --sombra-alta:0 30px 80px rgba(29,26,22,.26);
  --curva:cubic-bezier(.16,.84,.44,1);
  --gutter:20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--marfil);color:var(--tinta);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.trabada{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}

.wrap{max-width:1040px;margin:0 auto;padding:0 var(--gutter)}
.angosto{max-width:720px}

/* ── Tipografía ──────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.02em;line-height:1.12}
h1{font-size:clamp(38px,8.5vw,72px)}
h2{font-size:clamp(28px,4.4vw,40px)}
h3{font-size:22px;font-weight:400}
.rotulo{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);font-weight:400;
}
.rotulo::after{content:'';display:block;width:34px;height:1px;background:var(--oro-claro);margin-top:10px}
.centrado .rotulo::after{margin-left:auto;margin-right:auto}
.plomo{color:var(--tenue)}
.entrada{font-size:18px;color:var(--tenue);max-width:38em}

/* ── Cabecera ─────────────────────────────────────────────────────────────
   Arranca transparente encima de la foto y se vuelve marfil sólido cuando la
   página baja. El cambio lo maneja el JS agregando .compacta, no un scroll
   listener que repinta en cada píxel. */
.cabecera{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s var(--curva), box-shadow .35s var(--curva), border-color .35s;
  border-bottom:1px solid transparent;
}
.cabecera.menu-abierto,.cabecera.compacta{
  background:rgba(251,248,243,.92);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--linea);box-shadow:0 1px 20px rgba(29,26,22,.05);
}
.barra{display:flex;align-items:center;justify-content:space-between;gap:14px;height:74px;transition:height .35s var(--curva)}
.cabecera.compacta .barra{height:62px}
.marca{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:21px;letter-spacing:.06em}
.marca img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--oro-claro)}
.cabecera:not(.compacta):not(.opaca):not(.menu-abierto) .marca{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.cabecera:not(.compacta):not(.opaca):not(.menu-abierto) .menu a{color:rgba(255,255,255,.88);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.cabecera:not(.compacta):not(.opaca):not(.menu-abierto) .hamburguesa span{background:#fff}

.menu{display:none;align-items:center;gap:26px}
.menu a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);position:relative;padding:4px 0}
.menu a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--oro);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--curva);
}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a.turno{color:var(--verde)}
.cabecera:not(.compacta):not(.opaca):not(.menu-abierto) .menu a.turno{color:#a8f0c4}
/* La hamburguesa es para el celular y el menú para la pantalla grande. Estaban
   declarados al revés —la regla suelta después del media query— y a 1280px se
   veían los dos. Primero la regla general, después el corte por ancho. */
.hamburguesa{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;align-items:flex-end}
.hamburguesa span{display:block;width:24px;height:1.5px;background:var(--tinta);transition:transform .3s var(--curva),opacity .2s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.cajon{
  display:grid;grid-template-rows:0fr;overflow:hidden;
  background:var(--marfil);border-bottom:1px solid transparent;
  transition:grid-template-rows .4s var(--curva),border-color .3s;
}
@media(min-width:840px){
  .menu{display:flex}
  .hamburguesa,.cajon{display:none}
}
.cajon[data-abierto]{grid-template-rows:1fr;border-bottom-color:var(--linea)}
.cajon > div{min-height:0;display:flex;flex-direction:column}
.cajon a{
  padding:15px var(--gutter);border-top:1px solid var(--linea);
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
}
.cajon a:first-child{border-top:none}

/* ── Portada ─────────────────────────────────────────────────────────────── */
.portada{
  position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:#221d18;
}
.portada .foto{
  position:absolute;inset:0;background-size:cover;background-position:center;
  animation:acercarse 26s ease-out both;
}
@keyframes acercarse{from{transform:scale(1.1)}to{transform:scale(1)}}
.portada::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,17,14,.92) 0%,rgba(20,17,14,.5) 45%,rgba(20,17,14,.3) 100%);
}
.portada .texto{position:relative;z-index:2;color:#fff;padding:130px var(--gutter) 70px;width:100%}
.portada h1{color:#fff}
.portada .bajada{
  color:#f0e2c8;font-size:clamp(15px,2.2vw,19px);letter-spacing:.04em;
  margin-top:16px;max-width:30em;
}
.portada .rotulo{color:var(--oro-claro)}
.portada .rotulo::after{background:var(--oro-claro)}
/* Acá había una flechita de "seguí bajando" centrada abajo. Se comía los
   botones de turnos en el celular, y una portada con dos botones a la vista ya
   dice sola que hay más abajo. */

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion{padding:clamp(58px,9vw,104px) 0}
/* La cabecera es fija, así que un salto a #servicios dejaba el título tapado
   atrás de ella. Esto le dice al navegador que frene un poco más arriba. */
section[id],div[id]{scroll-margin-top:calc(var(--alto-cabecera, 104px) + 14px)}
/* Cuánto mide la cabecera, para que una página sin portada arranque abajo de
   ella y no atrás. El alto lo mide el JS: cambia según si está la banda del
   borrador. Va con .seccion adelante a propósito — sola perdía contra el
   padding de .seccion, que se declara después y es igual de específico. */
.seccion.bajo-cabecera{padding-top:calc(var(--alto-cabecera, 104px) + 54px)}
.seccion.crema{background:var(--crema)}
.titulo{margin-bottom:38px}
.titulo h2{margin-top:14px}
.titulo .entrada{margin-top:14px}
.centrado{text-align:center}
.centrado .entrada{margin-left:auto;margin-right:auto}

/* ── Servicios ───────────────────────────────────────────────────────────── */
.fichas{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.ficha{
  padding:9px 18px;border:1px solid var(--linea);border-radius:999px;background:var(--papel);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
  transition:.25s var(--curva);
}
.ficha:hover{border-color:var(--oro-claro);color:var(--tinta)}
.ficha[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--marfil)}
#lista{max-width:880px}
.grupo{margin-bottom:44px}
.grupo[hidden]{display:none}
.grupo h3{color:var(--oro);margin-bottom:4px}
.grupo .cuantos{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-bottom:16px}
.servicio{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--linea);
}
.servicio:last-child{border-bottom:none}
.servicio .nom{font-size:17px}
.servicio .det{font-size:13.5px;color:var(--tenue);margin-top:3px;max-width:44em}
.servicio .precio{font-family:var(--serif);font-size:21px;color:var(--oro);white-space:nowrap;text-align:right}
.servicio .precio small{
  display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin-top:1px;
}
.servicio .precio.consultar{font-size:14px;font-family:var(--sans);color:var(--tenue)}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--tinta);color:var(--tinta);background:transparent;
  transition:.3s var(--curva);
}
.boton:hover{background:var(--tinta);color:var(--marfil);transform:translateY(-2px)}
.boton.wa{border-color:var(--verde);color:var(--verde)}
.boton.wa:hover{background:var(--verde);color:#fff}
.boton.claro{border-color:rgba(255,255,255,.7);color:#fff}
.boton.claro:hover{background:#fff;color:var(--tinta)}
.botonera{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.flota{
  position:fixed;right:16px;bottom:16px;z-index:55;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--verde-vivo);color:#0a2e18;border-radius:999px;
  padding:14px 22px;font-size:13.5px;font-weight:400;
  box-shadow:0 10px 32px rgba(18,140,74,.4);
  transition:.3s var(--curva);
}
.flota:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(18,140,74,.5)}
.flota svg{width:19px;height:19px;flex:none}

/* ── La puerta a los servicios ───────────────────────────────────────────── */
.puerta{background:var(--crema)}
.categorias{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.categorias a{
  padding:10px 20px;border:1px solid var(--linea);border-radius:999px;background:var(--papel);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
  transition:.25s var(--curva);
}
.categorias a:hover{border-color:var(--oro-claro);color:var(--tinta);transform:translateY(-2px)}

/* ── Historia ────────────────────────────────────────────────────────────── */
.historia{display:grid;gap:clamp(28px,5vw,60px);align-items:start}
@media(min-width:840px){.historia{grid-template-columns:1.15fr .85fr}}
.historia .texto p{white-space:pre-line;font-size:17px;color:#3b352d}
.historia .retrato{position:relative}
.historia .retrato img{aspect-ratio:4/5;object-fit:cover;box-shadow:var(--sombra)}
.historia .retrato::before{
  content:'';position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--oro-claro);z-index:-1;
}

/* ── Equipo ──────────────────────────────────────────────────────────────── */
.equipo{display:grid;gap:clamp(18px,3vw,30px);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.equipo.tira{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.persona{
  position:relative;text-align:left;width:100%;display:block;
  transition:transform .4s var(--curva);
}
.persona:hover{transform:translateY(-5px)}
.persona .marco{position:relative;overflow:hidden;background:var(--crema)}
.persona .marco img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform .7s var(--curva),filter .4s}
.persona:hover .marco img{transform:scale(1.05)}
.persona .lupa{
  position:absolute;inset:auto 0 0 0;padding:14px;color:#fff;
  background:linear-gradient(to top,rgba(20,17,14,.8),transparent);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:.35s var(--curva);
}
.persona:hover .lupa,.persona:focus-visible .lupa{opacity:1;transform:none}
.persona .nom{font-family:var(--serif);font-size:23px;margin-top:14px;line-height:1.2}
.persona .rol{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-top:4px}
.persona .bio{font-size:13.5px;color:var(--tenue);margin-top:8px}

/* El monograma: mientras no haya foto, la inicial en un marco de papel. Un
   cuadrado gris con un ícono de "imagen rota" avisa que falta algo; esto no. */
.mono{
  aspect-ratio:3/4;display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.9),transparent 60%),
    linear-gradient(150deg,var(--crema),#e8dccb);
}
.mono span{
  font-family:var(--serif);font-size:clamp(48px,7vw,74px);color:var(--oro);
  width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--oro-claro);line-height:1;padding-bottom:.08em;
}
.tira .mono span{font-size:clamp(36px,5vw,52px)}

/* ── Galería ─────────────────────────────────────────────────────────────── */
.galeria{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.galeria .primera{grid-column:span 2;grid-row:span 2}
@media(max-width:560px){.galeria .primera{grid-column:span 1;grid-row:span 1}}
.foto-btn{position:relative;overflow:hidden;display:block;width:100%;background:var(--crema)}
.foto-btn img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;transition:transform .8s var(--curva)}
.galeria .primera .foto-btn img{aspect-ratio:1}
.foto-btn:hover img{transform:scale(1.06)}
.foto-btn figcaption{
  position:absolute;inset:auto 0 0 0;padding:14px 16px;text-align:left;
  background:linear-gradient(to top,rgba(20,17,14,.85),transparent);
  color:#f5eee3;font-size:12px;letter-spacing:.04em;
  opacity:0;transform:translateY(10px);transition:.35s var(--curva);
}
.foto-btn:hover figcaption,.foto-btn:focus-visible figcaption{opacity:1;transform:none}
/* En un celular no hay mouse, así que un epígrafe que aparece al pasar por
   encima no aparece nunca. Y estos epígrafes dicen "render del proyecto": son
   justamente los que no se pueden esconder, porque una clienta que llega y
   encuentra otra cosa se siente estafada, con razón. Donde no hay hover, van
   siempre a la vista. */
@media(hover:none),(max-width:700px){
  .foto-btn figcaption{opacity:1;transform:none;position:static;background:none;
    color:var(--tenue);padding:10px 2px 0;font-size:12.5px}
  .persona .lupa{opacity:1;transform:none}
}

/* ── El local ────────────────────────────────────────────────────────────── */
.datos{display:grid;gap:22px}
@media(min-width:680px){.datos{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.dato .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:6px}
.dato .v{font-size:15.5px;line-height:1.55}

/* ── Capa (el perfil y las fotos, centrados) ──────────────────────────────
   Una sola capa para las dos cosas: el perfil de una persona y una foto del
   local en grande. Eran dos y ahora es una — la misma decisión que en el
   resto del sistema. */
.capa{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(24,20,16,.62);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .34s var(--curva);
}
.capa[data-abierta]{opacity:1;pointer-events:auto}
.capa .panel{
  position:relative;max-width:820px;width:100%;max-height:calc(100vh - 40px);
  overflow-y:auto;background:var(--papel);box-shadow:var(--sombra-alta);
  transform:translateY(22px) scale(.965);opacity:0;
  transition:transform .42s var(--curva),opacity .3s;
}
.capa[data-abierta] .panel{transform:none;opacity:1}
.capa .panel:focus,.capa .panel:focus-visible{outline:none}
.capa .cerrar{
  position:absolute;top:16px;right:16px;z-index:3;width:46px;height:46px;
  display:grid;place-items:center;font-size:24px;line-height:1;
  color:var(--tinta);background:rgba(255,255,255,.88);border-radius:50%;
  transition:.25s;
}
.capa .cerrar:hover{background:var(--tinta);color:var(--marfil);transform:rotate(90deg)}
.capa .mover{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:50px;height:50px;display:grid;place-items:center;font-size:20px;
  background:rgba(255,255,255,.9);color:var(--tinta);border-radius:50%;
  box-shadow:0 4px 18px rgba(0,0,0,.18);transition:.25s;
}
.capa .mover:hover{background:var(--tinta);color:var(--marfil)}
/* Pegadas al borde de la pantalla en el celular, y justo al costado del panel
   cuando hay lugar (el panel mide 820, la mitad 410, más 68 de aire). */
.capa .mover.ant{left:10px}
.capa .mover.sig{right:10px}
@media(min-width:1020px){
  .capa .mover.ant{left:calc(50% - 478px)}
  .capa .mover.sig{right:calc(50% - 478px)}
}

.perfil{display:grid}
@media(min-width:680px){.perfil{grid-template-columns:300px 1fr}}
.perfil .lado img,.perfil .lado .mono{height:100%;width:100%;aspect-ratio:3/4;object-fit:cover}
@media(max-width:679px){.perfil .lado img,.perfil .lado .mono{aspect-ratio:4/3;max-height:40vh}}
.perfil .cuerpo{padding:clamp(28px,4vw,46px)}
.perfil .rol{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.perfil h3{font-size:clamp(30px,4.5vw,42px);margin:10px 0 18px}
.perfil .bio{font-size:16.5px;color:#3b352d;white-space:pre-line}
.perfil .pie-perfil{margin-top:28px;padding-top:20px;border-top:1px solid var(--linea)}

.capa .sola img{width:100%;max-height:78vh;object-fit:contain;background:#171310}
.capa .sola figcaption{padding:16px 22px;font-size:14px;color:var(--tenue)}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#cdc3b6;padding:56px 0 100px;font-size:13.5px}
.pie .marca{color:#f2e9dc;margin-bottom:18px}
.pie a:hover{color:var(--oro-claro)}
.pie .fila{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}
.pie .dominio{letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:#8d8275;margin-top:14px}

/* ── El cartel del borrador ────────────────────────────────────────────────
   Va ADENTRO de la cabecera, no arriba de ella. Estaba suelto al principio del
   documento y, como la cabecera es fija, las dos cosas quedaban en el mismo
   lugar: la banda tapaba la barra y el menú del celular no se podía tocar. Un
   cartel que rompe la página que viene a explicar no sirve de nada.
   Adentro de la cabecera son un solo bloque: no se superponen y no hay que
   medir nada con JS. */
.borrador{
  background:#8c2f2f;color:#fff;
  text-align:center;padding:10px 16px;font-size:13px;line-height:1.45;
}
.borrador b{color:#ffdede}

/* ── La página en obra ───────────────────────────────────────────────────── */
.obra{min-height:78vh;display:grid;place-items:center;text-align:center;padding:80px 20px}
.obra h1{font-size:clamp(34px,7vw,56px)}
.obra p{color:var(--tenue);margin-top:14px}

/* ── Entrada al hacer scroll ──────────────────────────────────────────────
   Cada sección sube 20px y aparece cuando entra en pantalla. Lo dispara un
   IntersectionObserver, que el navegador resuelve solo: no hay un listener de
   scroll recalculando posiciones en cada píxel. */
[data-revela]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--curva),transform .7s var(--curva)}
[data-revela].visible{opacity:1;transform:none}

/* Quien pidió menos movimiento en su sistema no tiene por qué pelearse con la
   web de una peluquería. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-revela]{opacity:1;transform:none}
  .portada .foto{animation:none}
}