/* ═══════════════════════════════════════════════════════════════════
   TALENTO URBANO · Barbería, Lautaro 738, Los Ángeles
   demo personalizada DRAKO — arquetipo 13 · Industrial Nocturno
   (oscuro · sans condensada en versales · foto a sangre · grid asimétrico)

   ⚖️ Deliberadamente NADA que ver con la demo de Ópalo del mismo día:
   aquella es clara, serif editorial y carta con puntitos; esta es oscura,
   condensada y de bloques. La regla de la casa: si dos demos puestas lado a
   lado dejan ver el molde, está mal hecho.

   La paleta sale de SUS fotos: negro del local y de las capas, gris del
   cemento de la pared, y el cobre del óxido de su cartel de chapa.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --negro:#0E0E10;
  --carbon:#17171B;
  --humo:#22222A;
  --cemento:#8C8C96;
  --hueso:#F2EFEA;
  --cobre:#C87F3F;      /* el oxido de su cartel */
  --cobre-vivo:#E39B54;
  --linea:rgba(242,239,234,.12);
  --display:"Oswald","Haettenschweiler","Arial Narrow",Impact,ui-sans-serif,system-ui,sans-serif;
  --texto:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ancho:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--hueso);font-family:var(--texto);
  font-size:17px;line-height:1.65;overflow-x:hidden}
/* 🪤 height:auto obligatorio: las <img> llevan width/height en el HTML y ese
   atributo le gana al aspect-ratio del CSS. Medido el 1-sep-2026 en la demo de
   Ópalo: sin esto un retrato salia 330x900 en vez de 330x440. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.env{width:min(100% - 2.4rem,var(--ancho));margin-inline:auto}

h1,h2,h3,.display{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;line-height:.98;margin:0}
h1{font-size:clamp(2.7rem,8vw,6rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.05rem,2vw,1.3rem);letter-spacing:.06em}
.ojo{font-family:var(--texto);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cobre);font-weight:700;margin:0 0 1rem}
.tenue{color:var(--cemento)}

/* ── encabezado ── */
.top{position:sticky;top:0;z-index:60;background:rgba(14,14,16,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea)}
.top .env{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.marca{margin-right:auto;text-decoration:none;display:flex;align-items:center}
.marca img{height:26px;width:auto}
.menu{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:.82rem;color:var(--cemento);transition:color .2s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--cobre)}

/* ── botones ──
   ⚠️ El de reservar NO es verde: verde promete WhatsApp y esto abre su agenda TUU. */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;
  padding:1.05rem 2rem;position:relative;overflow:hidden;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-reserva{background:var(--cobre);color:#141416}
.btn-reserva::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .7s}
.btn-reserva:hover::after{transform:translateX(130%)}
.btn-linea{background:transparent;color:var(--hueso);border:1px solid var(--linea)}
.btn-linea:hover{border-color:var(--cobre);color:var(--cobre)}
.btn-wa{background:#128C7E;color:#fff}

/* ── portada: foto a sangre ── */
.portada{position:relative;min-height:min(90vh,760px);display:grid;align-items:end;overflow:hidden}
.portada .fondo{position:absolute;inset:0}
.portada .fondo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:grayscale(.25) contrast(1.06)}
.portada .velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,16,.55) 0%,rgba(14,14,16,.25) 38%,rgba(14,14,16,.94) 100%)}
.portada .env{position:relative;padding-block:clamp(2.6rem,7vw,5rem)}
.portada .bajada{max-width:44ch;color:#D9D5CE;margin:1.2rem 0 0}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ── cintillo de datos duros ── */
.cintillo{background:var(--carbon);border-block:1px solid var(--linea)}
.cintillo .env{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem;
  padding-block:1.8rem}
.dato b{font-family:var(--display);display:block;font-size:1.7rem;color:var(--cobre);line-height:1}
.dato span{font-size:.82rem;color:var(--cemento);display:block;margin-top:.25rem}

.bloque{padding:clamp(3.2rem,7vw,5.4rem) 0}
.bloque.gris{background:var(--carbon)}
.cabecera{max-width:54ch;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.cabecera p{color:var(--cemento);margin:.9rem 0 0}

/* grid asimetrico de trabajos: una grande y dos chicas */
/* 🪤 La primera columna es mas ancha (1.4fr), asi que con `aspect-ratio:3/4` sale MAS ALTA
   y define el alto de la fila; las otras dos quedaban cortas y dejaban un hueco negro
   debajo. Visto en el render, no en el codigo. Se arregla estirando las celdas y dejando
   que la imagen llene el alto: `height:100%` gana al `height:auto` global por especificidad. */
.mosaico{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.9rem;grid-auto-rows:1fr}
.mosaico figure{margin:0;position:relative;overflow:hidden;background:var(--humo);height:100%}
.mosaico img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mosaico figure:hover img{transform:scale(1.05)}
.mosaico figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(14,14,16,.9));font-family:var(--display);
  text-transform:uppercase;letter-spacing:.09em;font-size:.78rem}

/* tarjetas de servicio (Ópalo usa carta con puntitos: aca son bloques) */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.tarjeta{background:var(--humo);border:1px solid var(--linea);padding:1.6rem 1.5rem;
  transition:border-color .25s,transform .25s}
.tarjeta:hover{border-color:var(--cobre);transform:translateY(-4px)}
.tarjeta h3{color:var(--hueso);margin-bottom:.6rem}
.tarjeta p{color:var(--cemento);font-size:.94rem;margin:0}
.tarjeta .val{display:inline-block;margin-top:1rem;font-family:var(--display);font-size:.76rem;
  letter-spacing:.1em;color:var(--cobre);text-transform:uppercase}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.duo img{width:100%}

.cierre{background:var(--cobre);color:#141416;padding:clamp(2.8rem,6vw,4.4rem) 0;text-align:center}
.cierre h2{color:#141416}
.cierre p{max-width:50ch;margin:1rem auto 2rem;color:rgba(20,20,22,.8)}
.cierre .btn-reserva{background:#141416;color:var(--hueso)}
.cierre .btn-linea{border-color:rgba(20,20,22,.35);color:#141416}
.cierre .btn-linea:hover{background:#141416;color:var(--hueso);border-color:#141416}

.pie{background:var(--negro);border-top:1px solid var(--linea);color:var(--cemento);
  padding:2.6rem 0 1.8rem;font-size:.9rem}
.pie .env{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.8rem}
.pie h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--hueso);
  font-size:.86rem;margin:0 0 .7rem}
.pie a{color:var(--cemento);text-decoration:none}
.pie a:hover{color:var(--cobre)}
.pie .legal{grid-column:1/-1;border-top:1px solid var(--linea);padding-top:1.2rem;font-size:.76rem;
  color:rgba(140,140,150,.75)}

.flota{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  text-decoration:none;transition:transform .25s}
.flota:hover{transform:scale(1.08)}
.flota svg{width:29px;height:29px;fill:#fff}

/* ── revelado con PLAN B: el estado oculto lo pone el JS, no el CSS ── */
.js .rev{opacity:0;transform:translateY(20px)}
.js .rev.visto{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none}
  .btn:hover,.mosaico figure:hover img,.tarjeta:hover{transform:none}
  html{scroll-behavior:auto}
}

@media (max-width:880px){
  .duo{grid-template-columns:1fr}
  .mosaico{grid-template-columns:1fr 1fr}
  .mosaico figure:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:16px}
  .top .env{min-height:62px;flex-wrap:wrap;gap:.5rem 1rem;padding-block:.55rem}
  .menu{order:3;width:100%;justify-content:space-between;gap:.4rem}
  .menu a{font-size:.74rem;letter-spacing:.08em}
  .acciones .btn{flex:1 1 100%;justify-content:center}
  .mosaico{grid-template-columns:1fr}
  .mosaico figure:first-child{grid-column:auto}
}