/* =======================
   Carne Puerko – styles.css
   Animaciones sutiles + estilos minimal
======================= */
:root{
  --bg:#0f1215;
  --panel:#171b1f;
  --panel-2:#0d1013;
  --brand:#f39c12;   /* dorado/naranja */
  --text:#f2f2f2;
  --muted:#c7c7c7;
  --ring:rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:
    radial-gradient(1200px 700px at 10% -10%, #1a1f25 0%, #0c0f12 40%, #090b0d 100%),
    var(--bg);
  background-size:120% 120%;
  animation:bg-pan 24s ease-in-out infinite alternate;
}

/* contenedor */
.wrapper{
  max-width:960px;
  margin:32px auto 64px;
  padding:16px;
  animation:fade-in .6s ease both;
}

/* tarjeta del menú */
.menu-card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  overflow:hidden;
  animation:soft-pop .5s ease .05s both;
}

/* header */
.header{padding:28px 22px 10px;text-align:center}
.brand{
  font-family:Cinzel,serif;
  font-size:42px;letter-spacing:.08em;
  color:#f6f2ee;
  text-shadow:0 1px 0 #000,0 0 10px rgba(255,255,255,.05);
}
.tagline{margin-top:8px;color:#f0b252;font-weight:700;font-size:14px;letter-spacing:.02em;opacity:.9}

/* secciones */
.section{padding:18px 18px 8px}
.section-title{
  color:var(--brand);font-weight:800;letter-spacing:.08em;font-size:14px;margin:4px 4px 14px;
  position:relative;display:inline-block;
}
.section-title:after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:linear-gradient(90deg,var(--brand),transparent);
  animation:underline 1.2s ease both;
}

/* lista de items */
.items{display:grid;grid-template-columns:1fr;gap:14px;padding:0 8px 24px}

/* item */
.item{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.03);
  border-radius:14px;padding:12px 12px;
  box-shadow:0 0 0 1px var(--ring) inset;
  cursor:pointer; 
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation:rise .45s ease both;
}
.item:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.05);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.item:active{transform:translateY(0) scale(.995)}

/* miniatura */
.thumb{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.05);
  transition:transform .25s ease;
}
.item:hover .thumb{ transform:rotate(-2deg) scale(1.03) }

/* texto del item */
.item-body{display:flex;align-items:center;gap:10px;width:100%;min-width:0;font-family:"Caveat",cursive;font-size:22px}
.name{white-space:nowrap}
.dots{flex:1;margin:0 6px;position:relative}
.dots:after{content:"";display:block;border-bottom:2px dotted rgba(255,255,255,.18);transform:translateY(2px)}
.price{
  font-family:Nunito,sans-serif;font-weight:800;letter-spacing:.02em;color:var(--brand);
  transition:transform .2s ease, text-shadow .2s ease;
}
.item:hover .price{ transform:translateY(-1px); text-shadow:0 0 8px rgba(243,156,18,.25) }

.note{font-size:12px;color:var(--muted);margin:6px 6px 0}

/* grid en desktop */
@media (min-width:900px){
  .items{grid-template-columns:repeat(2,1fr)}
  .item{flex-direction:column;align-items:flex-start}
  .item-body{width:100%;font-size:20px}
  .thumb{width:88px;height:88px}
}

/* ===== Modal ===== */
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:saturate(120%) blur(2px);z-index:50;padding:20px;
  opacity:0;transition:opacity .25s ease;
}
.modal.open{display:flex;opacity:1}

.modal-card{
  width:min(560px,95vw);
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  transform:scale(.96);opacity:.95;
  transition:transform .25s ease, opacity .25s ease;
}
.modal.open .modal-card{ transform:scale(1); opacity:1 }

.modal-header{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.modal-title{font-weight:900;letter-spacing:.02em;color:var(--brand)}
.modal-close{appearance:none;border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px;transition:background .2s ease, transform .2s ease}
.modal-close:hover{background:rgba(255,255,255,.08);transform:rotate(90deg)}
.modal-body{padding:16px}
.modal-img{width:100%;max-height:320px;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.modal-meta{display:flex;justify-content:space-between;margin-top:10px;font-weight:800}
.modal-desc{margin-top:10px;color:var(--muted);line-height:1.5}

/* ===== Animaciones ===== */
@keyframes bg-pan{
  0%{background-position:0% 0%}
  100%{background-position:100% 100%}
}
@keyframes fade-in{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}
@keyframes soft-pop{
  from{opacity:0; transform:scale(.98)}
  to{opacity:1; transform:scale(1)}
}
@keyframes underline{
  from{width:0}
  to{width:100%}
}
@keyframes rise{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}

/* Aparición escalonada de items */
.items .item:nth-child(1){animation-delay:.05s}
.items .item:nth-child(2){animation-delay:.1s}
.items .item:nth-child(3){animation-delay:.15s}
.items .item:nth-child(4){animation-delay:.2s}
.items .item:nth-child(5){animation-delay:.25s}
.items .item:nth-child(6){animation-delay:.3s}

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* =======================
   Social bar (redes)
======================= */
.social-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:10px 0 18px;
  padding:4px;
}

.social-bar a{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--ring) inset, 0 8px 20px rgba(0,0,0,.15);
  color:#e9ecef;
  font-size:20px;
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    filter .18s ease;
}
.social-bar a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* Hover colores oficiales */
.social-bar a:hover .fa-facebook{ color:#1877F2; }
.social-bar a:hover .fa-tiktok{ color:#fff; filter:drop-shadow(0 0 6px rgba(0,255,255,.45)) drop-shadow(0 0 10px rgba(255,0,72,.35)); }
.social-bar .fa-instagram{ transition:background .18s ease, -webkit-text-fill-color .18s ease; }
.social-bar a:hover .fa-instagram{
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%,
  #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip:text; 
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.social-bar a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
}
/* =======================
   Social bar (redes)
======================= */
.social-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:10px 0 18px;
  padding:4px;
}
.social-bar a{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px var(--ring) inset, 0 8px 20px rgba(0,0,0,.15);
  color:#e9ecef; font-size:20px;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, filter .18s ease;
}
.social-bar a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.social-bar a:hover .fa-facebook{ color:#1877F2; }
.social-bar a:hover .fa-tiktok{ color:#fff; filter:drop-shadow(0 0 6px rgba(0,255,255,.45)) drop-shadow(0 0 10px rgba(255,0,72,.35)); }
.social-bar .fa-instagram{ transition:background .18s ease, -webkit-text-fill-color .18s ease; }
.social-bar a:hover .fa-instagram{
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.social-bar a:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

/* =======================
   Mapa / Cómo llegar
======================= */
.map-card{
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  box-shadow:0 0 0 1px var(--ring) inset;
}
.map-embed{
  /* Contenedor 16:9 con aspect-ratio moderno */
  aspect-ratio:16/9;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  background:#0b0e11;
}
.map-embed iframe{
  width:100%; height:100%; border:0; display:block;
}

/* Botón de Cómo llegar */
.directions-btn{
  margin-top:12px;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,var(--brand), #d88509);
  color:#1a1205; font-weight:900; letter-spacing:.02em;
  padding:10px 14px; border-radius:12px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.directions-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.directions-btn:active{ transform:translateY(0); }
.directions-btn i{ font-size:16px; }