/* ==========================================================================
   Parrilla El Capo — identidad "fuego y ruta"
   Paleta sacada del material del propio local: verde del logo (#98c838) sobre
   negro humo (los negros y marrones de sus fotos de parrilla).
   Tipografía: Bebas Neue (cartel de ruta) + Inter (texto).
   ========================================================================== */

:root{
  --carbon:#0f0e0c;          /* fondo general */
  --carbon-2:#151310;        /* bandas */
  --panel:#191712;           /* tarjetas */
  --panel-2:#1f1c15;
  --linea:#2e2a20;
  --linea-2:#3d382b;
  --verde:#9ac93c;           /* verde del logo de El Capo */
  --verde-osc:#6f9427;
  --brasa:#e2622a;           /* acento cálido (fuego) */
  --hueso:#f2efe6;
  --gris:#a9a294;
  --gris-2:#7d7668;
  --wa:#25d366;
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --texto:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}      /* el atributo hidden tiene que ganarle a display:flex/grid */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}    /* que la barra fija no tape los títulos al navegar */
body{
  margin:0;background:var(--carbon);color:var(--hueso);
  font-family:var(--texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}

h1,h2,h3,.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;margin:0}
h1{font-size:clamp(2.9rem,7vw,5.4rem);line-height:.93}
h2{font-size:clamp(2rem,4.4vw,3.2rem);line-height:.98}
h3{font-size:1.35rem;letter-spacing:.04em}
p{margin:0 0 1rem}

.kicker{
  font-size:.76rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--verde);margin:0 0 .9rem
}
/* reja: motivo de parrilla (varillas) */
.reja{position:relative}
.reja::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(242,239,230,.055) 0 1px,transparent 1px 13px);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}

/* ---------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:.65rem 1.35rem;border-radius:3px;border:1px solid transparent;
  font-family:var(--texto);font-size:.86rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;transition:.18s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-verde{background:var(--verde);color:#12160a}
.btn-verde:hover{background:#a9d84a}
.btn-linea{border-color:var(--linea-2);color:var(--hueso);background:transparent}
.btn-linea:hover{border-color:var(--verde);color:var(--verde)}
.btn-grande{min-height:56px;padding:.8rem 1.7rem;font-size:.92rem}
.btn.chico{min-height:42px;padding:.4rem 1rem;font-size:.78rem}

/* ------------------------------------------------------------------ barra */
.barra{
  position:sticky;top:0;z-index:40;background:rgba(15,14,12,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea);
}
.barra .wrap{display:flex;align-items:center;gap:20px;min-height:72px}
.marca{display:flex;align-items:center;gap:12px;color:var(--hueso)}
.marca:hover{text-decoration:none}
.marca img{width:50px;height:50px;flex:none}
.marca-texto{display:flex;flex-direction:column;line-height:1}
.marca-texto b{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em}
.marca-texto i{font-style:normal;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2);margin-top:3px;white-space:nowrap}
.menu{display:flex;gap:19px;margin-left:auto}
.menu a{
  color:var(--gris);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent
}
.menu a:hover{color:var(--hueso);text-decoration:none}
.acciones{display:flex;gap:10px;align-items:center}

/* ---------------------------------------------------------------- portada */
.portada{padding:64px 0 54px;position:relative;overflow:hidden}
.portada::after{
  content:"";position:absolute;right:-14%;top:-22%;width:60%;height:130%;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(226,98,42,.22),transparent 62%);
}
.portada .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.portada-texto{position:relative;z-index:2}
.bajada{font-size:1.1rem;color:var(--gris);max-width:34rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px}
.estado{
  display:inline-flex;align-items:center;gap:10px;margin:14px 0 0;
  padding:.5rem 1rem .5rem .85rem;border:1px solid var(--linea-2);border-radius:999px;
  font-size:.86rem;font-weight:600;letter-spacing:.04em;color:var(--hueso);background:rgba(255,255,255,.02)
}
.estado .punto{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 rgba(154,201,60,.6);animation:latido 2.2s infinite}
.estado.cerrado .punto{background:var(--brasa);animation:none;box-shadow:none}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(154,201,60,.55)}70%{box-shadow:0 0 0 11px rgba(154,201,60,0)}100%{box-shadow:0 0 0 0 rgba(154,201,60,0)}}
.puntaje{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--gris);font-size:.92rem}
.puntaje b{font-family:var(--display);font-size:2.1rem;color:var(--verde);letter-spacing:.02em}

.portada-foto{margin:0;position:relative}
.portada-foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;
  box-shadow:0 26px 60px rgba(0,0,0,.6)
}
.portada-foto::before{
  content:"";position:absolute;left:-14px;top:22px;bottom:44px;width:6px;background:var(--verde);border-radius:3px
}
.portada-foto figcaption{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);margin-top:12px;padding-left:2px
}

/* ----------------------------------------------------------------- franja */
.franja{background:var(--carbon-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.franja-caja{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea)}
.fdato{background:var(--carbon-2);padding:24px 18px;display:flex;flex-direction:column;gap:4px}
.fdato b{font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;color:var(--hueso)}
.fdato span{font-size:.8rem;color:var(--gris-2);letter-spacing:.03em}

/* --------------------------------------------------------------- secciones */
section{padding:72px 0}
.oscura{background:var(--carbon-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.titulo{max-width:56rem;margin-bottom:34px}
.titulo .lead{font-size:1.05rem;color:var(--gris);margin:.7rem 0 0}
.nota{font-size:.88rem;color:var(--gris-2);margin-top:24px;max-width:52rem}

/* --------------------------------------------------------------- tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tarjeta{margin:0;background:var(--panel);border:1px solid var(--linea);border-radius:4px;overflow:hidden;transition:.2s}
.tarjeta:hover{border-color:var(--verde-osc);transform:translateY(-3px)}
.tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tarjeta figcaption{padding:16px 18px 20px}
.tarjeta b{font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;display:block}
.tarjeta span{font-size:.9rem;color:var(--gris);display:block;margin-top:2px}

/* --------------------------------------------------------------- reservas */
.reserva{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.form{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  background:var(--panel);border:1px solid var(--linea);border-radius:4px;padding:24px
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo-ancho{grid-column:1 / -1}
.campo-corto{max-width:150px}
.campo label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-2);font-weight:600}
.campo input,.campo select{
  min-height:50px;padding:.6rem .8rem;border-radius:3px;border:1px solid var(--linea-2);
  background:#100f0c;color:var(--hueso);font-family:var(--texto);font-size:1rem
}
.campo input:focus,.campo select:focus{outline:2px solid var(--verde);outline-offset:1px}
.acciones-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.copiado{font-size:.82rem;color:var(--verde);min-height:1em}
.vista-previa{background:#110f0c;border:1px dashed var(--linea-2);border-radius:4px;padding:22px}
.vista-titulo{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-2);margin:0 0 12px}
.vista-previa pre{
  margin:0;white-space:pre-wrap;font-family:var(--texto);font-size:.92rem;color:var(--hueso);
  background:#0c0b09;border:1px solid var(--linea);border-radius:3px;padding:14px;line-height:1.55
}
.vista-pie{font-size:.82rem;color:var(--gris-2);margin:12px 0 0}

/* ---------------------------------------------------------------- galeria */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.galeria button{
  padding:0;border:1px solid var(--linea);border-radius:3px;background:none;cursor:pointer;overflow:hidden;position:relative
}
.galeria button:hover{border-color:var(--verde)}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;transition:.35s}
.galeria button:hover img{transform:scale(1.06)}
.galeria button:nth-child(1),.galeria button:nth-child(6){grid-column:span 2;grid-row:span 2}
.galeria button:nth-child(1) img,.galeria button:nth-child(6) img{aspect-ratio:1}

/* ------------------------------------------------------------ horarios/mapa */
.dos-columnas{display:grid;grid-template-columns:1fr 1.1fr;gap:26px}
.panel{background:var(--panel);border:1px solid var(--linea);border-radius:4px;padding:24px}
.panel h3{margin:0 0 16px;color:var(--hueso)}
.horarios{width:100%;border-collapse:collapse;font-size:.95rem}
.horarios td{padding:11px 0;border-bottom:1px solid var(--linea);color:var(--gris)}
.horarios td:first-child{color:var(--hueso);font-weight:500;width:42%}
.horarios tr:last-child td{border-bottom:0}
.horarios tr.hoy td{color:var(--verde);font-weight:600}
.horarios tr.hoy td:first-child::before{content:"▍";color:var(--verde);margin-right:6px}
.direccion{font-size:1.02rem;color:var(--hueso)}
.mapa{margin:14px 0 16px;border:1px solid var(--linea);border-radius:3px;overflow:hidden;height:290px;background:#0c0b09}
.mapa iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.chico:not(.btn){font-size:.85rem;color:var(--gris-2)}
.resena{
  margin:34px 0 0;padding:24px 26px;border-left:3px solid var(--verde);background:var(--panel);
  border-radius:0 4px 4px 0
}
.resena p{font-size:1.12rem;color:var(--hueso);margin:0 0 8px}
.resena cite{font-style:normal;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2)}

/* -------------------------------------------------------------- contactos */
.contactos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grande{font-family:var(--display);font-size:1.9rem;letter-spacing:.04em;color:var(--hueso);margin:0 0 16px}
.instalar{
  display:flex;gap:20px;align-items:flex-start;margin-top:28px;padding:24px;
  border:1px solid var(--linea-2);border-radius:4px;background:linear-gradient(180deg,var(--panel-2),var(--panel))
}
.instalar img{width:64px;height:64px;flex:none}
.instalar b{font-family:var(--display);font-size:1.4rem;letter-spacing:.05em;display:block}
.instalar p{margin:.3rem 0 0;color:var(--gris);font-size:.94rem}
.fila-instalar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.estado-instalar{font-size:.85rem;color:var(--verde)}
.ayuda-instalar{font-size:.9rem;color:var(--gris)}

/* -------------------------------------------------------------------- pie */
.pie{background:#0b0a08;border-top:1px solid var(--linea);padding:30px 0}
.pie .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;font-size:.9rem;color:var(--gris)}
.pie b{font-family:var(--display);font-size:1.2rem;letter-spacing:.06em;color:var(--hueso)}
.credito{font-size:.84rem;color:var(--gris-2)}

/* ----------------------------------------------------------- barra móvil */
.barra-movil{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,10,8,.96);border-top:1px solid var(--linea-2);backdrop-filter:blur(8px)
}
.barra-movil .btn{flex:1}

/* ------------------------------------------------------------------ visor */
.visor{
  display:none;position:fixed;inset:0;z-index:70;background:rgba(8,7,6,.96);
  align-items:center;justify-content:center;padding:24px
}
.visor.abierto{display:flex}
.visor img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;border-radius:4px}
.visor .cerrar{
  position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--linea-2);color:var(--hueso);font-size:1.1rem;cursor:pointer
}
.visor p{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--gris);font-size:.88rem;margin:0;padding:0 20px}

/* -------------------------------------------------------- aviso de instalación */
.aviso-instalar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:14px;
  max-width:560px;margin:0 auto;padding:14px 16px;background:var(--panel-2);border:1px solid var(--linea-2);
  border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.55)
}
.aviso-instalar img{width:44px;height:44px;flex:none}
.aviso-texto{display:flex;flex-direction:column;font-size:.85rem;color:var(--gris);flex:1}
.aviso-texto b{font-family:var(--display);font-size:1.15rem;letter-spacing:.05em;color:var(--hueso)}
.aviso-cerrar{background:none;border:0;color:var(--gris-2);font-size:1.05rem;cursor:pointer;padding:6px}
body.con-aviso .barra-movil{bottom:92px}

/* --------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .portada .wrap{grid-template-columns:1fr;gap:34px}
  .portada-foto img{aspect-ratio:16/11}
  .tarjetas,.contactos{grid-template-columns:repeat(2,1fr)}
  .reserva,.dos-columnas{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .franja-caja{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .solo-grande,.menu{display:none}
  .barra .wrap{min-height:64px}
  .marca img{width:42px;height:42px}
  .marca-texto i{display:none}
  .acciones{margin-left:auto}
  section{padding:54px 0}
  .portada{padding:40px 0 38px}
  .tarjetas,.contactos{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria button:nth-child(1),.galeria button:nth-child(6){grid-column:span 2;grid-row:auto}
  .form{grid-template-columns:1fr;padding:18px}
  .campo-corto{max-width:none}
  .barra-movil{display:flex}
  .pie{padding-bottom:96px}
  .visor{padding:12px}
  .aviso-instalar{flex-wrap:wrap;gap:10px 12px;padding:13px 14px}
  .aviso-instalar img{width:38px;height:38px}
  .aviso-texto{font-size:.8rem}
  .aviso-texto b{font-size:1.02rem}
  .aviso-instalar .btn{flex:1;min-height:44px}
  .aviso-cerrar{order:1}
  body.con-aviso .barra-movil{bottom:118px}
}