@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

/* ===========================
   Variables globales
=========================== */
:root{
  /* Ken Burns del hero */
  --zoom-start: 1.00;
  --zoom-end:   1.18;         /* sube/baja para más/menos acercamiento */
  --kenburns-duration: 8s;

  /* Colores de marca */
  --bg: #180F0F;
  --panel: #0e0b0b;
  --text: #e7e7e7;
  --muted: #c8c8c8;
  --accent: orange;
  --card: #ffffff;
  --shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Reset básico */
*{ margin:0; border:0; padding:0; box-sizing:border-box; font-family:'Roboto', sans-serif; }
img{ width:100%; height:auto; display:block; object-fit:cover; }

/* ===========================
   Layout base + Header
=========================== */
.contenedor{ background:var(--bg); padding-bottom:40px; }

.header{
  padding-top:10px; width:90%; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
}

.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ width:130px; height:auto; }

.hamburguesa{ width:30px; cursor:pointer; display:flex; }
@media (min-width:768px){ .hamburguesa{ display:none; } }

.menu{ display:none; }
@media (min-width:768px){ .menu{ display:flex; gap:20px; } }

.navegacion{ display:flex; align-items:center; list-style:none; padding-left:0; }
@media (min-width:768px){ .navegacion{ gap:30px; } }
@media (min-width:992px){ .navegacion{ gap:50px; } }

.navegacion a{ text-decoration:none; color:var(--muted); font-weight:500; font-size:15px; }
.navegacion a:hover, .navegacion a[aria-current="page"]{ color:var(--accent); }

/* Menú móvil deslizante */
@media (max-width:767px){
  .menu{
    position:fixed; inset:0 0 0 35%;
    background:rgba(12,8,8,.98);
    padding:90px 24px 24px; display:none; z-index:1000;
  }
  .menu.is-open{ display:block; }
  .navegacion{ flex-direction:column; align-items:flex-start; gap:18px; }
  .navegacion a{ font-size:16px; color:#fff; }
  body.no-scroll{ overflow:hidden; }
}

/* ===========================
   HERO carrusel (fondo cambia, texto fijo)
=========================== */
.hero{
  width:90%; margin:16px auto 42px;
  min-height:clamp(420px, 72vh, 680px);
  border-radius:18px; position:relative; overflow:hidden; color:#fff;
}
.hero--dark{ background:var(--panel); }

.hero__bg{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:70% 55%;             /* encuadre hacia la carne */
  opacity:0;
  transform:scale(var(--zoom-start));
  transition:opacity .7s ease;
  filter:saturate(1.12) contrast(1.06) brightness(1.03);
}
.hero__slide.is-active{
  opacity:1;
  animation:heroKenBurns var(--kenburns-duration) ease-in-out forwards;
}
@keyframes heroKenBurns{
  0%   { transform:scale(var(--zoom-start)); }
  100% { transform:scale(var(--zoom-end)); }
}

/* Overlay para legibilidad + realce cálido a la derecha */
.hero__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(14,11,11,.80) 0%,
      rgba(14,11,11,.50) 35%,
      rgba(14,11,11,.18) 55%,
      rgba(14,11,11,0) 72%),
    radial-gradient(600px 380px at 74% 56%,
      rgba(255,165,0,.12) 0%,
      rgba(255,165,0,0) 60%);
}

.hero__inner{ position:relative; padding:clamp(22px, 5vw, 56px); max-width:760px; z-index:2; }
.eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:10px; }
.hero h1{ font-size:clamp(2.4rem, 6vw, 4.2rem); line-height:1; font-weight:900; margin-bottom:14px; }
.hero h1 span{ color:var(--accent); }
.lead{ font-size:clamp(1rem, 2.2vw, 1.15rem); color:var(--text); max-width:56ch; }

.hero__cta{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 20px; border-radius:12px; font-weight:800; text-decoration:none; transition:.25s; border:2px solid transparent; }
.btn--primary{ background:var(--accent); color:#111; }
.btn--primary:hover{ background:#fff; color:var(--accent); border-color:var(--accent); }
.btn--ghost{ background:transparent; }
.ghost--light{ color:#fff; border-color:#fff; }
.ghost--light:hover{ background:#fff; color:#111; }

/* Dots del carrusel */
.hero__dots{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:14px; display:flex; gap:8px; z-index:3;
}
.hero__dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); border:0; cursor:pointer; }
.hero__dots button.is-active{ background:#fff; }

/* Hero en móvil */
@media (max-width:767px){
  .hero{ min-height:64vh; }
  .hero__inner{ padding:18px; max-width:none; }
  .hero__copy-text{ display:block; }
  .eyebrow{ font-size:.85rem; margin-bottom:6px; }
  .hero h1{ font-size:clamp(1.6rem, 7.6vw, 2.2rem); margin-bottom:8px; }
  .lead{ font-size:.95rem; line-height:1.35; max-width:42ch; margin-bottom:10px; }
  .hero__cta{ gap:8px; margin-top:8px; }
  .btn{ padding:10px 14px; border-radius:10px; font-size:.95rem; }
  .hero__dots{ bottom:10px; }
  .hero__overlay{
    background:
      linear-gradient(90deg,
        rgba(14,11,11,.88) 0%,
        rgba(14,11,11,.62) 38%,
        rgba(14,11,11,.28) 58%,
        rgba(14,11,11,0) 76%),
      radial-gradient(520px 320px at 74% 56%,
        rgba(255,165,0,.10) 0%,
        rgba(255,165,0,0) 60%);
  }
}

/* ===========================
   Sección: Platos populares
=========================== */
.populares{ width:90%; margin:0 auto 42px; }
.populares__titulo{
  color:#fff; font-size: clamp(1.6rem, 3.8vw, 2.2rem);
  font-weight:900; margin: 8px 0 22px; text-align:center;
}
.populares__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
}

/* Card de plato */
.dish{
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; min-height:100%;
  position:relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dish:hover{ transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.28); }

.dish__badge{
  position:absolute; top:10px; left:10px;
  background: var(--accent); color:#111; font-weight:900;
  font-size:.8rem; padding:6px 10px; border-radius:999px; z-index:1;
}

.dish__media{
  aspect-ratio: 4 / 3; overflow:hidden; background:#f4f4f4;
}
.dish__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.dish:hover .dish__media img{ transform: scale(1.05); }

.dish__title{
  font-size:1.1rem; font-weight:900; color:#222;
  padding:12px 14px 4px 14px;
}
.dish__desc{
  font-size:.95rem; color:#555; line-height:1.45;
  padding:0 14px 10px 14px; flex:1;
}

/* ===== Footer de cada plato (BOTONES) ===== */
.dish__footer{
  margin-top:auto;
  display:grid;
  grid-template-columns: 1fr 1fr;  /* dos columnas iguales */
  gap:10px;
  padding:12px;
  align-items:stretch;             /* iguala la altura de ambos */
  border-top:1px solid rgba(0,0,0,.06);
}

.dish__quick,
.dish__tag{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px 10px;
  font-weight:800;
  border-radius:10px;
  text-align:center;
  line-height:1.2;
  white-space:nowrap;
  width:100%;
}

/* Botón WhatsApp */
.dish__quick{
  background:#111;
  color:#fff;
  text-decoration:none;
  border:2px solid transparent;
  transition:.2s ease;
}
.dish__quick:hover{
  background:#fff;
  color:#111;
  border-color:#111;
}

/* Tag/Badge como botón (segunda columna) */
.dish__tag{
  background:var(--accent);
  color:#111;
}

/* Responsive: apilar botones en pantallas pequeñas */
@media (max-width: 480px){
  .dish__footer{
    grid-template-columns: 1fr;
  }
}

/* Chips / meta opcional (si usas más badges) */
.dish__meta{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  max-width: 160px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===========================
   Botón Ver Carta
=========================== */
.boton-carta{ display:flex; justify-content:center; margin-top:22px; }
.carta{
  padding:12px 25px; background:var(--accent); color:#111; border-radius:10px;
  font-weight:700; font-size:16px; text-decoration:none; transition:.3s; border:2px solid transparent;
}
.carta:hover{ background:#fff; color:var(--accent); border-color:var(--accent); }

/* ===========================
   Footer + WhatsApp
=========================== */
.contact{ display:flex; flex-direction:column; align-items:center; padding: 22px 0; background-color:#000; }
.social a{ font-size:27px; margin:.5rem; }
.social a .bx{ padding:5px; color:#fff; background:#000; border-radius:50%; }
.links{ margin:1rem 0 1rem; }
.links a{ font-size:1rem; font-weight:500; color:#cfcfcf; padding:1rem; text-decoration:none; }
.links a:hover{ color:var(--accent); }
.contact p{ text-align:center; color:#cfcfcf; }

.btn-wsp{
  position:fixed; width:60px; height:60px; line-height:63px;
  bottom:25px; right:25px; background:#25d366; color:#FFF; border-radius:50px;
  text-align:center; font-size:35px; box-shadow:0 1px 10px rgba(0,0,0,.3); z-index:100; transition: all 300ms ease;
}
.btn-wsp:hover{ background:#20ba5a; }
@media (min-width:320px) and (max-width:768px){
  .btn-wsp{ width:63px; height:63px; line-height:66px; }
}

/* ===========================
   Sección foto + testimonios
=========================== */
.about-testimonials{
  width:90%;
  margin:44px auto 56px;
}
.about-testimonials__grid{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1fr);
  gap:24px;
  align-items:stretch;               /* ambas columnas igual altura */
}
/* Foto izquierda: alto consistente */
.about-photo{
  margin:0;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  border-radius:16px;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.08);
  background:#0f0c0c;
}
.about-photo img{
  width:100%; height:100%; object-fit:cover;
}
/* Columna de testimonios */
.about-reviews{
  display:flex;
  flex-direction:column;
  justify-content:space-between;    /* reparte los 3 bloques en toda la altura */
  gap:16px;                         /* fallback si la columna es muy baja */
}
/* Tarjetas de testimonio */
.testi-card{
  background:#0f0c0c;
  border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--accent);
  border-radius:12px;
  color:#fff;
  padding:16px 18px 14px;
  box-shadow: var(--shadow-sm);
}
.testi-card p{ margin:0 0 6px; font-style:italic; }
.testi-card span{ color:var(--accent); font-weight:800; }

/* Responsive: apilar foto/testimonios */
@media (max-width: 860px){
  .about-testimonials__grid{ grid-template-columns: 1fr; }
  .about-reviews{ justify-content:initial; }
}

/* ===========================
   FIX FINAL – Botones iguales y legibles
=========================== */

/* 2 columnas iguales y alturas parejas */
.dish__footer{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid rgba(0,0,0,.06);
  align-items:stretch;
}

/* el wrapper del tag no debe encoger la celda */
.dish__footer .dish__meta{ display:contents; }

/* Botones (ambos) */
.dish__footer .dish__quick,
.dish__footer .dish__tag{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  /* 👇 tamaño adaptativo: baja un poco en desktop y deja respirar el texto largo */
  font-size: clamp(.82rem, 1.6vw, .95rem);
  line-height:1.15;
  white-space:normal;          /* permite 2 líneas si hace falta */
  text-align:center;
}

/* WhatsApp (izquierda) */
.dish__footer .dish__quick{
  background:#111; color:#fff;
  text-decoration:none;
  border:2px solid transparent;
  transition:.2s ease;
}
.dish__footer .dish__quick:hover{
  background:#fff; color:#111; border-color:#111;
}

/* Tag (derecha) — anula límites de .pill */
.dish__footer .dish__tag{
  background:var(--accent); color:#111;
  max-width:none;             /* quita el 160px de .pill */
  overflow:visible; text-overflow:clip;
  border-radius:12px;
}

/* En pantallas pequeñas: apilar */
@media (max-width:560px){
  .dish__footer{ grid-template-columns:1fr; }
  .dish__footer .dish__quick,
  .dish__footer .dish__tag{
    min-height:44px;
    font-size:.9rem;
  }
}