/* A Puro Fuego · parrilla argentina · RDW Novatech Web Studio */
:root{
  --carbon:#15110e;
  --carbon-2:#211a15;
  --brasa:#d4512a;      /* color principal */
  --brasa-viva:#f27a3d;
  --hueso:#f2e8d8;
  --mostaza:#d9a441;
  --ceniza:#9a8f84;
  --linea:rgba(242,232,216,.14);
  --display:"Ultra", "Rockwell Extra Bold", Georgia, serif;
  --texto:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --pad:clamp(20px, 5vw, 72px);
  --radio:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--carbon);color:var(--hueso);font-family:var(--texto);font-size:17px;line-height:1.6;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{text-wrap:pretty}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:var(--hueso);color:var(--carbon);padding:8px 14px;z-index:99}
.saltar:focus{left:8px}
:focus-visible{outline:2px solid var(--mostaza);outline-offset:3px}

.etiqueta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mostaza);margin:0 0 14px}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(34px, 5.4vw, 72px);line-height:1;letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
.h2 em{font-style:normal;color:var(--brasa-viva)}
.sub{color:var(--ceniza);max-width:56ch;margin:0}
.cabeza{max-width:1200px;margin:0 auto 44px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;transition:transform .25s, background .25s, color .25s, border-color .25s;position:relative;overflow:hidden}
.btn-brasa{background:var(--brasa);color:#fff}
.btn-brasa::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%, var(--mostaza), transparent 60%);opacity:0;transition:opacity .35s}
.btn-brasa:hover::after{opacity:.55}
.btn-brasa > *{position:relative;z-index:1}
.btn-linea{border-color:var(--linea);color:var(--hueso)}
.btn-linea:hover{border-color:var(--hueso)}
.btn:active{transform:scale(.97)}
.btn-chico{min-height:40px;padding:0 18px;font-size:14px}

/* barra */
.barra{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px var(--pad);padding-top:max(12px, env(safe-area-inset-top));background:linear-gradient(var(--carbon) 30%, rgba(21,17,14,0));transition:background .3s}
.barra.solida{background:rgba(21,17,14,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:20px;letter-spacing:.01em;margin-right:auto;white-space:nowrap}
.marca-llama{width:26px;height:26px;fill:var(--brasa);animation:latido 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.08) rotate(-2deg)}}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-size:14px;color:var(--ceniza);transition:color .2s}
.nav a:hover{color:var(--hueso)}
.estado{display:none;font-family:var(--mono);font-size:12px;color:var(--ceniza);white-space:nowrap}
.estado.abierto{color:#9fd18b}
.estado::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}
@media (min-width:1000px){.nav{display:flex}.estado{display:inline}}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;gap:36px;padding:110px var(--pad) 60px;overflow:hidden;isolation:isolate}
.chispas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;background:radial-gradient(60% 60% at 40% 100%, rgba(212,81,42,.35), transparent 70%);z-index:-2}
.titular{font-family:var(--display);font-weight:400;font-size:clamp(46px, 6.4vw, 104px);line-height:.95;letter-spacing:-.02em;margin:0 0 24px;animation:sube .8s cubic-bezier(.2,.8,.2,1) both}
.caliente{color:var(--brasa-viva);text-shadow:0 0 28px rgba(242,122,61,.45);animation:brasa 3.2s ease-in-out infinite}
@keyframes brasa{0%,100%{text-shadow:0 0 18px rgba(242,122,61,.35)}45%{text-shadow:0 0 42px rgba(242,122,61,.7), 0 0 4px rgba(255,200,120,.5)}60%{text-shadow:0 0 24px rgba(242,122,61,.4)}}
@keyframes sube{from{transform:translateY(24px)}to{transform:none}}
.hero-sub{max-width:46ch;color:#d7cbb9;margin:0 0 28px;animation:sube .8s .12s cubic-bezier(.2,.8,.2,1) both}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;animation:sube .8s .2s cubic-bezier(.2,.8,.2,1) both}
.nota{display:flex;align-items:center;gap:16px;margin-top:34px;padding-top:24px;border-top:1px solid var(--linea);max-width:420px}
.nota-num{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;color:var(--mostaza)}
.nota p{margin:2px 0 0;font-size:14px;color:var(--ceniza)}
.estrellas{position:relative;display:inline-block;font-size:18px;letter-spacing:3px;color:rgba(242,232,216,.2)}
.estrellas span{position:absolute;inset:0;width:calc(var(--nota) * 100%);overflow:hidden;color:var(--mostaza);white-space:nowrap}

.hero-foto{position:relative;margin:0;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/5;max-height:72svh;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.hero-foto.lista img{transform:scale(1)}
figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:11px;color:rgba(242,232,216,.75);background:rgba(21,17,14,.55);padding:3px 8px;border-radius:2px}
.humo{position:absolute;right:5%;top:0;width:min(560px, 80vw);height:90%;opacity:.045;pointer-events:none;z-index:-1;mix-blend-mode:screen}
@media (min-width:900px){
  .hero{grid-template-columns:1.2fr .8fr;gap:5vw}
  .hero-texto{min-width:0}
  .hero-foto{transform:rotate(1.2deg)}
}

/* marcas de parrilla: rejilla que se quema sobre la foto */
.marcas{position:relative}
.rejilla{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-32deg, transparent 0 46px, rgba(20,10,6,.55) 46px 52px, transparent 52px 58px);mix-blend-mode:multiply;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) .15s;opacity:.55}
.marcas.quemada .rejilla{clip-path:inset(0 0 0 0)}
.marcas::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg, transparent 35%, rgba(255,160,80,.35) 50%, transparent 65%);transform:translateX(-120%)}
.marcas.quemada::after{animation:paso 1.3s .1s ease-out}
@keyframes paso{to{transform:translateX(120%)}}

/* fileteado */
.filete{padding:6px 0;overflow:hidden}
.filete svg{width:100%;height:46px;display:block}
.trazo{fill:none;stroke:var(--mostaza);stroke-width:2;stroke-dasharray:1800;stroke-dashoffset:1800;transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1)}
.t2{stroke:var(--brasa);transition-delay:.25s}
.filete.visto .trazo{stroke-dashoffset:0}

/* mesa */
.mesa{position:relative;padding:100px var(--pad);}
.platos{list-style:none;margin:0 auto;padding:0;max-width:1200px;border-top:1px solid var(--linea)}
.plato{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:24px 0;border-bottom:1px solid var(--linea);position:relative;transition:padding .3s}
.plato .num{grid-row:span 3;color:var(--brasa);font-size:13px;padding-top:10px}
.plato h3{font-family:var(--display);font-weight:400;font-size:clamp(26px, 3.6vw, 44px);line-height:1.05;margin:0}
.plato h3 small{font-family:var(--texto);font-size:.42em;color:var(--ceniza);font-weight:500;vertical-align:middle}
.plato p{margin:0;color:var(--ceniza)}
.pedir{font-family:var(--mono);font-size:13px;color:var(--mostaza);text-decoration:none;justify-self:start;padding:6px 0}
.pedir:hover{text-decoration:underline}
@media (min-width:900px){
  .plato{grid-template-columns:70px 1.1fr 1fr auto;align-items:center;gap:24px}
  .plato .num{grid-row:auto;padding:0}
  .plato:hover{padding-left:14px}
  .plato:hover h3{color:var(--brasa-viva)}
}
.flotante{position:fixed;left:0;top:0;width:280px;aspect-ratio:4/3;margin:0;border-radius:var(--radio);overflow:hidden;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .25s, transform .25s;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.flotante img{width:100%;height:100%;object-fit:cover}
.flotante.ver{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
@media not ((hover:hover) and (pointer:fine)){.flotante{display:none}}
.centro{display:flex;width:max-content;margin:44px auto 0}

/* término */
.termino{display:grid;gap:40px;align-items:center;padding:100px var(--pad);background:var(--carbon-2);border-block:1px solid var(--linea)}
@media (min-width:900px){.termino{grid-template-columns:1fr 1fr}}
.rango{display:block;margin:34px 0 10px}
.rango input{width:100%;appearance:none;-webkit-appearance:none;height:8px;border-radius:8px;background:linear-gradient(90deg,#7a1020,#b8333a,#d9746a,#a67458,#6b4a35);outline-offset:6px}
.rango input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--hueso);border:5px solid var(--brasa);cursor:grab}
.rango input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--hueso);border:5px solid var(--brasa);cursor:grab}
.term-nombres{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:11px;color:var(--ceniza)}
.term-nombres li.activo{color:var(--hueso)}
.term-desc{margin:26px 0 0;min-height:3.2em;font-size:18px}
.term-desc strong{color:var(--brasa-viva)}
.corte svg{width:100%;max-width:520px;margin:0 auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.c1{stop-color:var(--c1,#d9746a);transition:stop-color .6s}
.c2{stop-color:var(--c2,#c25a48);transition:stop-color .6s}
.c3{stop-color:var(--c3,#7a4a36);transition:stop-color .6s}
.grasa{fill:none;stroke:rgba(255,240,220,.4);stroke-width:5;stroke-linecap:round}
.marcas-svg path{stroke:rgba(25,12,6,.45);stroke-width:9;stroke-linecap:round}

/* casa */
.casa{display:grid;gap:40px;padding:110px var(--pad);max-width:1340px;margin:0 auto;align-items:center}
@media (min-width:900px){.casa{grid-template-columns:.9fr 1.1fr;gap:6vw}}
.casa-foto{border-radius:var(--radio);overflow:hidden;aspect-ratio:1/1}
.casa-foto img{width:100%;height:100%;object-fit:cover}
.casa-texto p{color:#d7cbb9;max-width:52ch}
.hechos{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.hechos li{padding-left:22px;position:relative;color:var(--ceniza)}
.hechos li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--brasa);clip-path:polygon(50% 0,100% 100%,0 100%)}
.hechos .mono{color:var(--hueso);margin-right:6px}

/* galería */
.galeria{padding:90px var(--pad)}
.mosaico{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);max-width:1240px;margin:0 auto}
.g{margin:0;border-radius:var(--radio);overflow:hidden;background:var(--carbon-2)}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.g:hover img{transform:scale(1.04)}
.g1{grid-row:span 2}
.g5{grid-column:1/-1;aspect-ratio:16/6}
@media (min-width:900px){
  .mosaico{grid-template-columns:1fr 1.4fr 1fr;grid-auto-rows:240px}
  .g1{grid-row:span 2}.g2{grid-column:2}.g3{grid-column:3;grid-row:1 / span 2}.g4{grid-column:2}
  .g5{grid-column:1/-1;aspect-ratio:auto}
}
.aviso-fotos{text-align:center;font-family:var(--mono);font-size:12px;color:var(--ceniza);margin:18px 0 0}

/* opiniones */
.opiniones{display:grid;gap:30px;align-items:center;padding:90px var(--pad);max-width:1200px;margin:0 auto}
@media (min-width:900px){.opiniones{grid-template-columns:.7fr 1.3fr;gap:6vw}}
.op-num h2{font-family:var(--display);font-weight:400;font-size:clamp(90px, 14vw, 170px);line-height:.9;margin:0;color:var(--mostaza)}
.op-num small{font-size:.3em;color:var(--ceniza)}
.op-num p{margin:10px 0 0;color:var(--ceniza)}
.termometro{height:10px;border-radius:10px;background:rgba(242,232,216,.1);overflow:hidden;margin-top:14px;max-width:320px}
.termometro span{display:block;height:100%;width:calc(var(--nota)*100%);background:linear-gradient(90deg,var(--mostaza),var(--brasa));transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.opiniones.visto .termometro span{transform:scaleX(1)}
.resumen{font-size:clamp(20px, 2.4vw, 28px);line-height:1.4;margin:0 0 26px}
.resumen strong{color:var(--brasa-viva);font-weight:600}

/* visita */
.visita{display:grid;gap:40px;padding:90px var(--pad) 110px;max-width:1340px;margin:0 auto}
@media (min-width:900px){.visita{grid-template-columns:1fr 1fr;align-items:start}}
.direccion{color:var(--ceniza);margin:0 0 26px}
.horario{width:100%;max-width:460px;border-collapse:collapse;font-size:15px}
.horario th,.horario td{padding:10px 0;border-bottom:1px solid var(--linea);text-align:left;font-weight:400}
.horario td{text-align:right;font-family:var(--mono);font-size:14px;color:var(--ceniza)}
.horario tr.hoy th,.horario tr.hoy td{color:var(--brasa-viva);font-weight:600}
.visita-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mapa{border-radius:var(--radio);overflow:hidden;min-height:380px;border:1px solid var(--linea);background:var(--carbon-2)}
.mapa iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(.6) contrast(1.05)}

/* pie */
.pie{text-align:center;padding:60px var(--pad) calc(110px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);color:var(--ceniza);font-size:14px}
.pie-marca{font-family:var(--display);font-size:34px;color:var(--hueso);margin:0 0 10px}
.pie p{margin:6px 0}
.pie a{color:var(--hueso)}
.pie-chico{font-size:13px}
.firma{margin-top:26px !important;font-family:var(--mono);font-size:12px;letter-spacing:.06em}

/* whatsapp flotante */
.wa-flotante{position:fixed;right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:32px;height:32px;fill:#fff}

/* aparición suave (solo si hay JS; el contenido es visible por defecto) */
.js .aparece{opacity:0;transform:translateY(26px);transition:opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1)}
.js .aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .aparece{opacity:1;transform:none}
  .rejilla{clip-path:none}
}
@media (max-width:520px){
  .marca span{font-size:17px}
  .hero{padding-top:96px}
  .btn{width:100%}
  .barra .btn{width:auto}
  .centro{width:100%}
}