/* ===================================================
   EXPERIENCIA INÉS — COMPONENTES
   Una clase, una responsabilidad. Sin estilos inline.
   Pesos ligeros, sombras en capas, microinteracciones
   suaves — nada abrupto, nada gritado.
   =================================================== */

/* ---- Botón primario ---- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:15px 36px;
  border-radius:var(--radius-pill);
  background:var(--ink);
  color:#fff;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.02em;
  box-shadow:var(--shadow-md);
  transition:transform var(--fast) var(--ease-soft), box-shadow var(--fast) var(--ease-soft), background var(--fast) var(--ease-soft);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

.btn:active{
  transform:translateY(1px) scale(.98);
  box-shadow:var(--shadow-sm);
}

.btn--ghost{
  background:none;
  color:var(--text-soft);
  box-shadow:none;
  font-weight:400;
  text-decoration:underline;
  text-decoration-color:var(--border-light);
  text-underline-offset:5px;
}

.btn--ghost:hover{
  transform:none;
  color:var(--text);
}

.btn--map{
  background:none;
  border:1.5px solid var(--border-light);
  color:var(--text);
  box-shadow:none;
}

.btn--map svg{
  width:18px;
  height:18px;
}

.btn--map:hover{
  background:rgba(255,255,255,.06);
  box-shadow:none;
}

/* ---- Botón circular (back / icon) ---- */

.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  box-shadow:var(--shadow-inset-dark);
  color:var(--text);
  flex:0 0 auto;
  transition:background var(--fast) var(--ease-soft), transform var(--fast) var(--ease-soft);
}

.icon-btn svg{
  width:19px;
  height:19px;
}

.icon-btn:hover{
  background:rgba(255,255,255,.14);
}

.icon-btn:active{
  transform:scale(.9);
  background:rgba(255,255,255,.18);
}

/* ---- Tarjeta de antojo (selector emocional) ---- */

.antojo-card{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  text-align:left;
  transition:transform var(--fast) var(--ease-soft), box-shadow var(--fast) var(--ease-soft);
}

.antojo-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}

.antojo-card:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
}

.antojo-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--secondary);
  flex:0 0 auto;
  transition:transform var(--fast) var(--ease-soft);
}

.antojo-card:hover .antojo-card__icon{
  transform:scale(1.06) rotate(-4deg);
}

.antojo-card__icon svg{
  width:21px;
  height:21px;
}

.antojo-card__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
}

.antojo-card__title{
  font-family:var(--font-title);
  font-weight:700;
  font-size:1.02rem;
  color:var(--text-dark);
  letter-spacing:.005em;
}

.antojo-card__desc{
  font-size:.79rem;
  font-weight:300;
  color:var(--text-muted);
  line-height:1.45;
}

.antojo-card--surprise{
  background:linear-gradient(150deg, var(--secondary), #7E5335);
}

.antojo-card--surprise .antojo-card__title,
.antojo-card--surprise .antojo-card__desc{
  color:#fff;
}

.antojo-card--surprise .antojo-card__desc{
  color:rgba(255,255,255,.82);
}

.antojo-card--surprise .antojo-card__icon{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* ---- Fila de navegación (Nuestro Menú, resultados de antojo...) ---- */

.nav-row{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  width:100%;
  padding:var(--s-4) var(--s-5);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  text-align:left;
  transition:transform var(--fast) var(--ease-soft), box-shadow var(--fast) var(--ease-soft);
}

.nav-row:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}

.nav-row:active{
  transform:translateY(0) scale(.985);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
}

.nav-row__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(108,138,82,.12);
  color:var(--primary);
  flex:0 0 auto;
}

.nav-row__icon svg{
  width:19px;
  height:19px;
}

.nav-row__body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
}

.nav-row__title{
  font-family:var(--font-title);
  font-weight:700;
  font-size:.98rem;
  color:var(--text-dark);
}

.nav-row__desc{
  font-size:.77rem;
  font-weight:300;
  color:var(--text-muted);
  line-height:1.4;
}

.nav-row__chevron{
  flex:0 0 auto;
  color:var(--text-muted);
  opacity:.55;
  transition:transform var(--fast) var(--ease-soft);
}

.nav-row__chevron svg{
  width:15px;
  height:15px;
}

.nav-row:hover .nav-row__chevron{
  transform:translateX(3px);
  opacity:.8;
}

/* ---- Grupo de productos dentro de una categoría ---- */

.product-group{
  padding:0 var(--s-5) var(--s-7);
}

.product-group__label{
  display:inline-flex;
  padding:7px 17px;
  margin-bottom:var(--s-4);
  border-radius:var(--radius-pill);
  background:var(--ink);
  color:var(--accent);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:var(--shadow-xs);
}

.product-group__note{
  font-size:.8rem;
  font-weight:300;
  color:var(--text-soft);
  margin-bottom:var(--s-3);
  line-height:1.6;
  font-style:italic;
}

.product-row{
  display:flex;
  align-items:baseline;
  gap:var(--s-2);
  width:100%;
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--border-dark);
  text-align:left;
  transition:padding-left var(--fast) var(--ease-soft), opacity var(--fast) var(--ease-soft);
}

.product-row:last-child{
  border-bottom:none;
}

.product-row:hover{
  padding-left:4px;
}

.product-row:active{
  padding-left:6px;
}

.product-row:hover .product-row__name,
.product-row:active .product-row__name{
  color:var(--accent);
}

.product-row__name{
  flex:0 1 auto;
  font-size:.96rem;
  font-weight:400;
  color:var(--text);
  transition:color var(--fast) var(--ease-soft);
}

.product-row__leader{
  flex:0 1 26px;
  min-width:10px;
  border-bottom:1px dotted var(--border-dark);
  transform:translateY(-4px);
  opacity:.7;
}

.product-row__price{
  flex:0 0 auto;
  margin-left:auto;
  padding-left:var(--s-3);
  font-family:var(--font-title);
  font-weight:700;
  font-size:.94rem;
  color:var(--accent);
  white-space:nowrap;
}

.category-note{
  margin:var(--s-2) var(--s-5) var(--s-5);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--radius-md);
  background:var(--bg-soft);
  border:1px solid var(--border-dark);
  color:var(--text-soft);
  font-size:.79rem;
  font-weight:300;
  font-style:italic;
  line-height:1.65;
}

/* ---- Footer del selector de antojos ---- */

.antojo-footer{
  text-align:center;
  padding-bottom:var(--s-2);
}

/* ---- Chip de fuente (usado en resultados filtrados por antojo) ---- */

.chip{
  display:inline-flex;
  padding:4px 12px;
  border-radius:var(--radius-pill);
  background:rgba(108,138,82,.12);
  color:var(--primary);
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.03em;
}

/* ---- Detalle de producto ---- */

.product-detail{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--s-6) var(--s-5) var(--s-7);
}

.product-detail__icon{
  width:74px;
  height:74px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid var(--border-dark);
  box-shadow:var(--shadow-inset-dark);
  color:var(--accent);
  margin-bottom:var(--s-5);
}

.product-detail__icon svg{
  width:32px;
  height:32px;
}

.product-detail__category{
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:var(--s-2);
}

.product-detail__name{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  font-size:1.7rem;
  color:var(--text);
  line-height:1.25;
}

/* Filete dorado — hace eco de la línea bajo "INÉS" en el logotipo oficial */
.product-detail__rule{
  display:block;
  width:44px;
  height:1px;
  margin:var(--s-3) auto 0;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}

.product-detail__price{
  margin-top:var(--s-3);
  font-family:var(--font-title);
  font-size:1.85rem;
  font-weight:700;
  color:var(--accent);
}

.product-detail__desc{
  margin-top:var(--s-4);
  font-size:.92rem;
  font-weight:300;
  line-height:1.75;
  color:var(--text-soft);
  max-width:300px;
}

/* Sorpréndeme: el mismo calor terracota de su tarjeta en Antojo,
   para que el momento de la revelación se sienta como un regalo */
.product-detail--sorpresa .product-detail__icon{
  background:linear-gradient(150deg, var(--secondary), #7E5335);
  border-color:transparent;
  color:#fff;
  box-shadow:var(--shadow-md);
}

.product-detail--sorpresa .product-detail__category{
  color:var(--accent);
  letter-spacing:.18em;
}

/* ---- Sugerencias: otros platillos de la misma categoría ---- */

.product-suggestions__label{
  text-align:center;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 var(--s-5) var(--s-3);
  padding-top:var(--s-4);
  border-top:1px solid var(--border-dark);
}

.product-suggestions{
  display:flex;
  flex-direction:column;
  padding:0 var(--s-5) var(--s-3);
}

.product-suggestion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  width:100%;
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--border-dark);
  text-align:left;
  transition:padding-left var(--fast) var(--ease-soft);
}

.product-suggestion:last-child{
  border-bottom:none;
}

.product-suggestion:hover{
  padding-left:4px;
}

.product-suggestion:active{
  padding-left:6px;
}

.product-suggestion:hover .product-suggestion__name,
.product-suggestion:active .product-suggestion__name{
  color:var(--accent);
}

.product-suggestion__name{
  font-size:.9rem;
  font-weight:400;
  color:var(--text-soft);
  transition:color var(--fast) var(--ease-soft);
}

.product-suggestion__price{
  font-family:var(--font-title);
  font-weight:700;
  font-size:.85rem;
  color:var(--text-faint);
  white-space:nowrap;
}

/* ---- Tarjeta de promoción ---- */

.promo-card{
  position:relative;
  padding:var(--s-5);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  transition:transform var(--fast) var(--ease-soft), box-shadow var(--fast) var(--ease-soft);
}

.promo-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}

.promo-card:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
}

.promo-card__tag{
  position:absolute;
  top:var(--s-4);
  right:var(--s-4);
  padding:4px 12px;
  border-radius:var(--radius-pill);
  background:var(--bg-2);
  color:#fff;
  font-size:.66rem;
  font-weight:700;
}

.promo-card__title{
  font-family:var(--font-title);
  font-size:1.12rem;
  font-weight:700;
  color:var(--text-dark);
  padding-right:var(--s-6);
}

.promo-card__desc{
  margin-top:var(--s-2);
  font-size:.84rem;
  font-weight:300;
  line-height:1.6;
  color:var(--text-muted);
}

.promo-card__price{
  margin-top:var(--s-3);
  font-family:var(--font-title);
  font-size:1.25rem;
  font-weight:700;
  color:var(--secondary);
}

/* ---- Botones de acción con icono (Contacto: Llamar / WhatsApp / Instagram / Facebook / Cómo llegar) ---- */

.action-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--s-3);
  padding:0 var(--s-5) var(--s-3);
}

.action-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:var(--s-4) var(--s-2);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  text-align:center;
  transition:transform var(--fast) var(--ease-soft), box-shadow var(--fast) var(--ease-soft);
}

.action-btn:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md), var(--shadow-inset);
}

.action-btn:active{
  transform:translateY(-1px) scale(.97);
}

.action-btn__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--secondary);
}

.action-btn__icon svg{
  width:19px;
  height:19px;
}

.action-btn__label{
  font-size:.72rem;
  font-weight:500;
  color:var(--text-dark);
  letter-spacing:.01em;
}

/* ---- Fila de información (usada dentro de tarjetas claras) ---- */

.info-row{
  display:flex;
  align-items:flex-start;
  gap:var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--border-dark);
}

.info-row:last-child{
  border-bottom:none;
}

.info-row__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--accent);
  flex:0 0 auto;
}

.info-row__icon svg{
  width:17px;
  height:17px;
}

.info-row__label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--text-soft);
}

.info-row__value{
  margin-top:3px;
  font-size:.92rem;
  font-weight:400;
  color:var(--text);
  line-height:1.5;
}

.info-section{
  margin:0 var(--s-5) var(--s-5);
}

.schedule-row{
  display:flex;
  justify-content:space-between;
  gap:var(--s-3);
  padding:7px 0;
  font-size:.85rem;
}

.schedule-row__day{
  color:var(--text);
  font-weight:400;
}

.schedule-row__hours{
  color:var(--text-soft);
  font-weight:300;
}

.schedule-row--today .schedule-row__day,
.schedule-row--today .schedule-row__hours{
  color:var(--accent);
  font-weight:700;
}

/* ---- Ilustración de mapa (SVG decorativo, sin fotografía) ---- */

.map-illustration{
  margin:0 var(--s-5) var(--s-5);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--surface);
  transition:transform var(--fast) var(--ease-soft), box-shadow var(--fast) var(--ease-soft);
}

a:has(> .map-illustration):hover .map-illustration{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}

a:has(> .map-illustration):active .map-illustration{
  transform:translateY(-1px) scale(.99);
  box-shadow:var(--shadow-md);
}