:root{
  --papel:#FAF9F6; --tinta:#141414; --plata:#6F6E6A; --linea:#D9D6CF; --suave:#F1EFEA;
  --serif:'Libre Caslon Display',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.65;color:var(--tinta);background:var(--papel);-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12}
h2{font-size:clamp(1.9rem,6vw,2.9rem);margin-bottom:1rem}
h3{font-size:1.5rem}
em{font-style:italic}
section{padding:4.5rem 1.25rem}
.rotulo{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plata);margin-bottom:1rem}
.rotulo.claro{color:#B9B6AF}

/* Encabezado: integrado a la portada, toma color al hacer scroll */
.encabezado{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;height:64px;background:var(--papel);border-bottom:1px solid rgba(20,20,20,.55);transition:background .25s,color .25s,border-color .25s}
.encabezado.solido{background:var(--tinta);color:#fff;border-bottom-color:var(--tinta)}
.marca{display:inline-flex;align-items:center;min-height:44px;font-weight:500;letter-spacing:.3em;font-size:.85rem;text-decoration:none}
.menu-btn{min-height:44px;min-width:44px;padding:0 1rem;font:inherit;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid currentColor;color:inherit;cursor:pointer}
nav{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;background:var(--tinta);color:#fff}
nav.abierto{display:flex}
nav a{padding:1rem 1.25rem;text-decoration:none;border-top:1px solid rgba(255,255,255,.15);min-height:48px}

/* Portada */
.portada{padding-top:8rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.logo{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:1.5rem}
.sobre{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plata);margin-bottom:1.25rem}
h1{font-size:clamp(2.3rem,9vw,4.6rem);max-width:15ch;margin-bottom:1.25rem}
h1 em{color:var(--plata)}
.bajada{max-width:34ch;color:var(--plata);margin-bottom:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:340px;min-height:52px;padding:0 2rem;font:inherit;font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;background:var(--tinta);color:#fff;border:1px solid var(--tinta);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:#fff;color:var(--tinta)}
.btn.claro{background:#fff;color:var(--tinta);border-color:#fff}
.btn.claro:hover{background:transparent;color:#fff}
.nota{margin-top:1rem;font-size:.9rem;color:var(--plata);max-width:34ch}
.cierre .nota{color:#C9C6BF}
.paleta{display:flex;gap:.5rem;margin-top:3rem}
.paleta i{width:34px;height:34px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.12)}

/* Datos rápidos */
.datos{padding:0;border-block:1px solid var(--linea)}
.datos dl{display:grid;grid-template-columns:1fr 1fr}
.datos div{padding:1.5rem 1.25rem;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);text-align:center}
.datos div:nth-child(2n){border-right:0}
.datos div:nth-last-child(-n+2){border-bottom:0}
.datos dt{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plata);margin-bottom:.4rem}
.datos dd{font-family:var(--serif);font-size:1.15rem;line-height:1.3}

/* Foco */
.foco{text-align:center;max-width:720px;margin:0 auto}
.foco p:last-child{color:var(--plata)}
.foco strong{font-weight:500;color:var(--tinta)}

/* Servicios */
.trabajamos{background:var(--suave)}
.indice{max-width:960px;margin:2rem auto 0}
.tabs{display:flex;flex-direction:column;border-top:1px solid var(--tinta)}
.tabs button{min-height:56px;text-align:left;padding:0 .25rem;font-family:var(--serif);font-size:1.5rem;background:none;border:0;border-bottom:1px solid var(--linea);color:var(--plata);cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--tinta)}
.tabs button[aria-selected="true"]::after{content:" —"}
.panel{padding:1.75rem 0 0}
.panel h3{margin-bottom:.75rem}
.panel .cuando{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--linea);color:var(--plata);font-size:.98rem}
.fotos{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.5rem}
.fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center bottom}
@media (max-width:759px){.fotos{max-width:420px}}

/* Tips */
.tips{max-width:860px;margin:0 auto}
.intro{color:var(--plata);margin-bottom:2rem;max-width:56ch}
.lista{list-style:none;border-top:1px solid var(--tinta)}
.lista li{display:flex;gap:1.25rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--linea);font-family:var(--serif);font-size:1.3rem;line-height:1.3}
.lista span{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;color:var(--plata);flex:none}
.enlace{display:inline-flex;align-items:center;min-height:48px;margin-top:1.5rem;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;font-weight:400;border-bottom:1px solid var(--tinta);text-decoration:none}

/* Pasos */
.turno{background:var(--suave);text-align:left}
.turno>*{max-width:860px;margin-left:auto;margin-right:auto}
.pasos{list-style:none;margin-top:2rem}
.pasos li{display:flex;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--linea)}
.pasos b{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1;width:3rem;flex:none;color:var(--plata)}
.pasos h3{font-size:1.35rem;margin-bottom:.3rem}
.pasos p{color:var(--plata)}

/* Cierre */
.cierre{background:var(--tinta);color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center}
.cierre p{color:#D8D5CE;margin-bottom:2rem;max-width:40ch}
.cierre .rotulo{margin-bottom:1rem}
.pie{padding:1.75rem 1.25rem;text-align:center;font-size:.9rem;color:var(--plata);background:var(--papel);border-top:1px solid var(--linea)}
.pie a{display:inline-flex;align-items:center;min-height:44px}

@media (min-width:760px){
  section{padding:6.5rem 2rem}
  .encabezado{padding:0 2.5rem}
  .menu-btn{display:none}
  nav{position:static;display:flex;flex-direction:row;background:none;color:inherit;gap:2rem}
  nav a{padding:0;border:0;min-height:auto;font-size:.9rem;letter-spacing:.08em}
  .portada{padding-top:10rem}
  .datos dl{grid-template-columns:repeat(4,1fr)}
  .datos div{border-bottom:0;border-right:1px solid var(--linea)}
  .datos div:nth-child(2n){border-right:1px solid var(--linea)}
  .datos div:last-child{border-right:0}
  .indice{display:grid;grid-template-columns:260px 1fr;gap:3rem}
  .panel{padding-top:.5rem}
  .btn{width:auto}
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* Pulido: tonos de pelo como hilo conductor */
.banda{display:grid;grid-template-columns:repeat(6,1fr);height:10px}
.banda i{background:var(--c)}
.cierre{background:#141414}
.encabezado.solido{background:#141414;border-bottom-color:#141414}
.turno{background:#ECE3D0}
.turno .pasos li{border-top-color:#CDBFA6}
.turno .pasos p,.turno .pasos b{color:#5C5448}
.turno .rotulo{color:#5C5448}
.trabajamos{background:var(--suave)}
.foco h2{font-size:clamp(2.1rem,6.5vw,3.4rem)}
.enlace.claro{border-bottom-color:#fff;color:#fff;margin-top:1.75rem}
.btn:focus-visible,.enlace:focus-visible,.tabs button:focus-visible,.menu-btn:focus-visible,.marca:focus-visible{outline:2px solid #B8683F;outline-offset:3px}

/* Encabezado: oscuro al inicio, semitransparente al hacer scroll */
.encabezado{background:#141414;color:#fff;border-bottom:1px solid #141414;-webkit-backdrop-filter:none;backdrop-filter:none}
.encabezado.solido{background:#141414;color:#fff;border-bottom-color:#141414}
.encabezado.solido:not(:has(nav.abierto)){background:rgba(20,20,20,.72);border-bottom-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
nav{background:#141414}
@media (min-width:760px){nav{background:none}}
.encabezado :focus-visible{outline-color:#fff}
button.enlace{font:inherit;font-size:.85rem;font-weight:400;color:inherit;background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;letter-spacing:.1em;text-transform:uppercase}
.tips .nota{margin-top:1rem}

/* enlaces como botones */
a.btn{text-decoration:none}
.foco p+p{margin-top:1rem}
.fotos[hidden]{display:none}

/* Equipo y galería (fotos de Sergio, 12/11) */
.equipo{padding:0;background:var(--suave)}
.equipo img{width:100%;height:auto}
@media (min-width:760px){.equipo{padding:2.5rem 1.25rem}.equipo img{max-width:760px;margin:0 auto}}
.galeria{max-width:1200px;margin:0 auto}
.galeria .grilla{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
@media (min-width:760px){.galeria{max-width:1080px}}
.galeria .grilla li{min-width:0}
.galeria [data-foto]{display:block;width:100%;padding:0;border:0;background:var(--suave);cursor:zoom-in;overflow:hidden}
.galeria [data-foto] img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 72%;transition:transform .5s ease}
.galeria [data-foto]:hover img{transform:scale(1.04)}
.galeria [data-foto]:focus-visible{outline:2px solid #B8683F;outline-offset:3px}
.desliza{display:none}

/* Celular: carrusel que se desliza, con la foto siguiente asomando */
@media (max-width:759px){
  .galeria{padding-left:0;padding-right:0}
  .galeria .rotulo,.galeria h2,.desliza{padding:0 1.25rem}
  .desliza{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--plata)}
  .galeria .grilla{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1.25rem;padding:0 1.25rem 1rem;margin-top:1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .galeria .grilla::-webkit-scrollbar{display:none}
  .galeria .grilla li{flex:0 0 78%;scroll-snap-align:start}
  .galeria [data-foto]{cursor:pointer}
  .galeria [data-foto]:hover img{transform:none}
}

/* Visor de fotos */
.visor{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0e0e0e;color:#fff}
.visor::backdrop{background:#0e0e0e}
.visor[open]{display:flex;align-items:center;justify-content:center}
.visor img{max-width:min(92vw,900px);max-height:84dvh;width:auto;height:auto;object-fit:contain;user-select:none}
.visor-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,20,.55);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;border-radius:50%}
.visor-btn:hover{background:#fff;color:#141414}
.visor-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.visor-cerrar{top:16px;right:16px;font-size:1.1rem}
.visor-ant{left:16px;top:50%;transform:translateY(-50%)}
.visor-sig{right:16px;top:50%;transform:translateY(-50%)}
.visor-cuenta{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:.85rem;letter-spacing:.15em;color:#C9C6BF}
@media (max-width:759px){
  .visor img{max-width:100vw;max-height:72dvh;margin-bottom:40px}
  .visor-ant,.visor-sig{top:auto;bottom:12px;transform:none}
  .visor-ant{left:20px}.visor-sig{right:20px}
  .visor-cuenta{bottom:28px}
}
@media (prefers-reduced-motion:reduce){.galeria [data-foto] img{transition:none}}

/* Videos: franja de 3 verticales; en celular se deslizan */
.sub-videos{margin-top:3rem;font-size:.82rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--plata);text-align:center}
.videos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:780px;margin:1.25rem auto 0}
.videos li{min-width:0}
.videos video{display:block;width:100%;height:auto;aspect-ratio:478/850;object-fit:cover;background:var(--suave)}
@media (max-width:759px){
  .sub-videos{padding:0 1.25rem}
  .videos{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1.25rem;padding:0 1.25rem 1rem;scrollbar-width:none}
  .videos::-webkit-scrollbar{display:none}
  .videos li{flex:0 0 60%;scroll-snap-align:start}
}
