/* ==========================================================================
   Da Silva Family's BBQ & Grill — stylesheet
   Fondo beige/crema cálido en toda la página, texto marrón oscuro, con los
   acentos de marca dorado/mostaza y borgoña (del logo) para títulos,
   precios y botones. El Hero conserva texto claro porque se apoya sobre
   la foto (fondo propio, oscuro) — ver nota junto a la sección HERO.
 
   Colores centralizados en :root. El marrón/vino del texto ya fue
   confirmado por el cliente (v8: #7E333A). El beige de fondo (--bg) sigue
   PENDIENTE de confirmación — ajustar solo esa variable cuando llegue.
   ========================================================================== */
 
:root{
  /* --- superficies (beige/crema) --- */
  --bg:           #f0e4cc;  /* fondo principal de página — PENDIENTE valor exacto del cliente */
  --bg-alt:       #e9d9b6;  /* fondo alterno para secciones intercaladas */
  --bg-deep:      #e0cd9f;  /* tono más profundo — footer */
  --card:         #fff9ef;  /* superficie de tarjetas/paneles, más clara que el fondo */
  --line:         rgba(126,51,58,.16);  /* bordes/separadores, derivado del texto */
 
  /* --- texto (marrón oscuro) --- */
  --text:         #7e333a;  /* texto principal — confirmado por el cliente (v8): mismo vino oscuro del fondo del logo */
  --text-soft:    rgba(126,51,58,.72);
  --text-faint:   rgba(126,51,58,.5);
 
  /* --- acentos de marca (sin cambios) --- */
  --burgundy:      #7a1f1f;
  --burgundy-light:#8b2323;
  --burgundy-deep: #5c1717;
 
  --gold:         #d9a441;
  --gold-light:   #f0c777;  /* uso decorativo (gradientes/bordes) y texto SOLO sobre fondos oscuros (Hero) */
  --gold-deep:    #b9822b;  /* texto en dorado sobre los nuevos fondos claros — mejor contraste que gold-light */
 
  /* --- texto/superficies sobre acentos oscuros (chips y botones borgoña/dorado) --- */
  --cream:        #f5e6c8;
  --white:        #fff9ef;
 
  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 
  --container: 1180px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 44px -26px rgba(126,51,58,.32);
  --shadow-gold: 0 10px 28px -12px rgba(217,164,65,.5);
 
  --ease: cubic-bezier(.22,1,.36,1);
}
 
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
 
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
 
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
table{ border-collapse: collapse; width: 100%; }
 
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
 
.section{ padding: 68px 0; }
@media (min-width: 860px){ .section{ padding: 110px 0; } }
 
.eyebrow{
  font-family: var(--font-body);
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin: 0 0 10px;
}
 
.section-title{
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.08;
  margin: 0 0 14px;
  color: var(--text);
}
.section-desc{ max-width: 560px; color: var(--text-soft); font-size: 1rem; }
.section-head{ margin-bottom: 40px; }
 
/* buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .88rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s, opacity .2s;
  white-space: nowrap;
}
.btn svg{ width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.btn:active{ transform: scale(.97); }
.btn-primary{ background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: var(--text); box-shadow: var(--shadow-gold); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(217,164,65,.6); }
.btn-primary:disabled{ opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-secondary{ background: #25D366; color: #fff; }
.btn-secondary:hover{ transform: translateY(-2px); }
.btn-ghost{ background: transparent; border: 1px solid rgba(245,230,200,.4); color: var(--cream); }
.btn-ghost:hover{ background: rgba(245,230,200,.08); border-color: var(--gold); }
.btn-block{ width: 100%; padding: 15px 24px; }
.btn-add{ background: var(--burgundy); color: var(--white); padding: 9px 16px; font-size: .76rem; }
.btn-add:hover{ background: var(--burgundy-light); }
 
/* ==========================================================================
   HEADER — se mantiene sólido (beige) siempre, incluso al tope de página
   sobre la foto del Hero, para que el texto oscuro del header sea legible
   de forma confiable sin depender de qué parte de la foto quede detrás.
   ========================================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  box-shadow: 0 8px 20px -14px rgba(126,51,58,.25);
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 12px; }
 
.brand{ display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; }
.brand-logo{ height: 46px; width: 46px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
.brand-text{ display: none; flex-direction: column; line-height: 1.1; overflow: hidden; min-width: 0; }
.brand-name{ font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub{ font-size: .62rem; letter-spacing: .2em; color: var(--gold-deep); white-space: nowrap; }
@media (min-width: 400px){ .brand-text{ display: flex; } }
 
.nav-desktop{ display: none; }
.nav-desktop a{
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  opacity: .85; padding: 10px 0; position: relative; transition: opacity .25s;
}
.nav-desktop a::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-desktop a:hover{ opacity: 1; }
.nav-desktop a:hover::after{ transform: scaleX(1); }
 
.header-actions{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 
.lang-toggle{
  display: flex; align-items: center; gap: 5px; padding: 7px 11px;
  border: 1px solid rgba(126,51,58,.25); border-radius: 999px;
  font-size: .74rem; letter-spacing: .04em; color: var(--text-faint);
  transition: border-color .25s;
}
.lang-toggle:hover{ border-color: var(--gold); }
.lang-opt{ transition: color .25s, font-weight .25s; padding: 2px 1px; }
.lang-opt.is-active{ color: var(--gold-deep); font-weight: 700; }
.lang-sep{ opacity: .4; }
 
.cart-btn{ position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.cart-btn svg{ width: 22px; height: 22px; fill: var(--text); }
.cart-count{
  position: absolute; top: -2px; right: -2px;
  background: var(--burgundy-light); color: var(--white);
  font-size: .64rem; font-weight: 700; line-height: 1;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--bg-alt);
}
 
.nav-toggle{ width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; }
.nav-toggle span{ width: 21px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
 
.nav-mobile{
  position: fixed; inset: 0;
  background: linear-gradient(160deg, var(--bg-alt), var(--bg-deep));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .4s, visibility 0s .5s;
  z-index: 250;
}
.nav-mobile.is-open{ transform: translateY(0); opacity: 1; visibility: visible; transition: transform .5s var(--ease), opacity .4s, visibility 0s; }
.nav-mobile a{ font-family: var(--font-head); font-size: 1.4rem; text-transform: uppercase; color: var(--text); }
.nav-mobile-call{
  margin-top: 8px; color: var(--text) !important;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  padding: 13px 30px; border-radius: 999px; font-family: var(--font-body) !important;
  font-size: .9rem !important; text-transform: none;
}
 
@media (min-width: 980px){
  .nav-desktop{ display: flex; gap: 28px; }
  .nav-toggle{ display: none; }
}
 
/* ==========================================================================
   HERO — excepción intencional: conserva texto claro (crema/dorado) porque
   se apoya sobre la foto de fondo (hero.png), que sigue siendo oscura y no
   se recolorea. Aplicar aquí el texto marrón oscuro del nuevo tema haría el
   texto casi ilegible sobre la foto — se mantiene la paleta clara original
   del Hero por legibilidad, mientras el resto del sitio sí pasa a beige.
   ========================================================================== */
.hero{
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--text);
}
.hero-bg{ position: absolute; inset: 0; }
.hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 60% 65%; }
.hero-content{ position: relative; z-index: 2; padding-bottom: 68px; padding-top: 130px; text-align: center; }
/* El .eyebrow normal usa --gold-deep (pensado para fondo beige claro); sobre
   la foto oscura del Hero se pierde. Aquí se aclara y se le da sombra para
   que "KISSIMMEE, FL" se lea bien sobre la imagen. */
.hero .eyebrow{ color: #ffffff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.hero-logo-big{
  width: clamp(165px, 30vw, 285px);
  height: auto;
  margin: 0 auto 26px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
  animation: heartbeat 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes heartbeat{
  0%, 56%, 100%{ transform: scale(1); }
  14%{ transform: scale(1.08); }
  28%{ transform: scale(1); }
  42%{ transform: scale(1.05); }
}
.hero-title{
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.1rem, 7.5vw, 4.1rem); line-height: 1.05; margin: 0 auto 18px;
  color: var(--white); text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 40px rgba(217,164,65,.25);
  max-width: 16ch;
}
.hero-title-accent{ color: var(--gold-light); }
.hero-sub{ max-width: 44ch; color: rgba(245,230,200,.85); font-size: 1.06rem; margin: 0 auto 30px; }
.hero-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.hero-quick{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: .92rem; color: var(--cream); }
.hero-quick .dot{ opacity: .5; }
.hero-quick a{ color: var(--gold-light); }
 
/* ==========================================================================
   MENU CAROUSEL
   ========================================================================== */
.menu-carousel-wrap{ background: var(--bg-alt); padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu-carousel{
  display: flex; gap: 14px; overflow-x: auto;
  padding: 0 20px; scrollbar-width: none;
  /* Sin esto, Safari de iPhone (y algunos Android) no reflejan el scrollLeft
     que mueve el JS hasta que el usuario toca el elemento manualmente al
     menos una vez — por eso se veía fijo en el celular pero bien en
     computadora. touch-action:pan-x evita además que el gesto de scroll
     vertical de la página "cancele" el toque sobre este elemento. */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.menu-carousel::-webkit-scrollbar{ display: none; }
.carousel-item{
  flex: 0 0 auto;
  width: 128px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: .9; transition: opacity .25s, transform .25s;
}
.carousel-item:hover{ opacity: 1; transform: translateY(-2px); }
.carousel-item img{ width: 128px; height: 128px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid rgba(217,164,65,.35); }
.carousel-item span{ font-size: .74rem; text-align: center; color: var(--text-soft); line-height: 1.25; }
 
/* ==========================================================================
   MENU SECTION
   ========================================================================== */
.menu-section{ background: var(--bg); }
.menu-tabs{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.menu-tab{
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(126,51,58,.2);
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft);
  transition: all .25s var(--ease);
}
.menu-tab:hover{ border-color: var(--gold); color: var(--text); }
.menu-tab.is-active{ background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
 
.menu-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px){ .menu-grid{ gap: 20px; } }
@media (min-width: 980px){ .menu-grid{ grid-template-columns: repeat(3, 1fr); } }
 
.menu-footnote{ margin: 10px 0 0; font-size: .8rem; font-style: italic; color: var(--text-faint); }
 
/* tarjetas más compactas en celulares chicos, para que 2 columnas se vean bien */
@media (max-width: 480px){
  .mc-body{ padding: 14px 14px 16px; gap: 6px; }
  .mc-name{ font-size: .92rem; }
  .mc-desc{ font-size: .78rem; }
  .mc-price{ font-size: 1rem; }
  .mc-footer{ flex-wrap: wrap; gap: 8px; }
  .btn-add{ padding: 8px 12px; font-size: .72rem; }
}
 
.menu-card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.menu-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(217,164,65,.5); }
.mc-media{ aspect-ratio: 4/3; overflow: hidden; background: #241811; } /* las fotos conservan su propio fondo oscuro tipo steakhouse */
.mc-media img{ width: 100%; height: 100%; object-fit: cover; }
.mc-media-fallback{ display: flex; align-items: center; justify-content: center; }
.mc-media-fallback img{ display: none; }
.mc-media-fallback::after{
  content: '🥤'; font-size: 2.6rem;
}
.mc-body{ padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mc-name{ font-family: var(--font-head); font-size: 1.08rem; text-transform: uppercase; letter-spacing: .01em; color: var(--text); margin: 0; }
.mc-desc{ font-size: .85rem; color: var(--text-faint); margin: 0; flex: 1; }
.mc-note{ font-size: .78rem; color: var(--gold-deep); font-style: italic; margin: 0; }
.mc-footer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.mc-price{ font-family: var(--font-head); font-size: 1.15rem; color: var(--gold-deep); }
 
.menu-card-selector .chip-group{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.chip{
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(126,51,58,.2);
  font-size: .76rem; color: var(--text-soft); transition: all .2s;
}
.chip:hover{ border-color: var(--gold); }
.chip.is-active{ background: var(--gold); border-color: var(--gold); color: var(--text); font-weight: 700; }
 
/* ==========================================================================
   CART
   ========================================================================== */
.cart-overlay{
  position: fixed; inset: 0; background: rgba(20,13,8,.5); backdrop-filter: blur(2px);
  z-index: 380; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
}
.cart-overlay.is-open{ opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
 
.cart-panel{
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  background: var(--card); border-left: 1px solid var(--line);
  z-index: 390; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s var(--ease);
  box-shadow: -20px 0 44px -22px rgba(126,51,58,.35);
}
.cart-panel.is-open{ transform: translateX(0); }
 
.cart-header{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cart-header h3{ font-family: var(--font-head); text-transform: uppercase; color: var(--text); margin: 0; font-size: 1.15rem; }
.cart-close{ font-size: 1.6rem; line-height: 1; color: var(--text-soft); width: 32px; height: 32px; }
.cart-close:hover{ color: var(--gold-deep); }
 
.cart-items{ flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.cart-empty{ color: var(--text-faint); text-align: center; margin-top: 30px; }
 
.cart-line{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cl-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-name{ font-size: .92rem; color: var(--text); }
.cl-price{ font-size: .78rem; color: var(--text-faint); }
.cl-actions{ display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.cl-actions button{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(126,51,58,.25); font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.cl-actions button:hover{ border-color: var(--gold); color: var(--gold-deep); }
.cl-actions span{ min-width: 16px; text-align: center; font-size: .88rem; }
.cl-remove{ margin-left: 4px; font-size: 1.1rem !important; color: var(--text-faint); border: none !important; }
.cl-remove:hover{ color: var(--burgundy-light) !important; }
 
.cart-footer{ padding: 18px 22px 24px; border-top: 1px solid var(--line); }
.cart-total-row{ display: flex; align-items: center; justify-content: space-between; font-family: var(--font-head); font-size: 1.2rem; color: var(--text); text-transform: uppercase; margin-bottom: 14px; }
#cart-total{ color: var(--gold-deep); }
 
/* ==========================================================================
   CATERING
   ========================================================================== */
.catering{ background: var(--bg-alt); }
.catering-grid{ display: grid; gap: 40px; }
@media (min-width: 940px){ .catering-grid{ grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } }
 
.catering-photo{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin-top: 26px;
}
 
.catering-form{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 16px;
}
.form-row{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-row-split{ display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 420px){ .form-row-split{ grid-template-columns: 1fr 1fr; } }
.form-row-split > div{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-row label{ font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.form-row input, .form-row textarea{
  border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: .94rem; color: var(--text); width: 100%; transition: border-color .25s;
}
.form-row input:focus, .form-row textarea:focus{ outline: none; border-color: var(--gold); }
.form-row textarea{ resize: vertical; min-height: 88px; }
 
/* ==========================================================================
   HOURS
   ========================================================================== */
.hours{ background: var(--bg); }
.hours .section-head{ text-align: center; }
.hours-table{ max-width: 520px; margin: 0 auto; }
.hours-table tr{ border-bottom: 1px solid var(--line); }
.hours-table td{ padding: 13px 4px; font-size: .95rem; }
.hd-day{ color: var(--text); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .03em; }
.hd-hours{ text-align: right; color: var(--gold-deep); font-style: italic; }
 
/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{ background: var(--bg-alt); }
.reviews .section-head{ text-align: center; }
.reviews-badge{ display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(217,164,65,.4); font-size: .88rem; color: var(--text); }
.reviews-badge .stars{ color: var(--gold-deep); letter-spacing: 1px; }
 
.reviews-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.review-card{
  flex: 1 1 320px; max-width: 360px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.rc-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rc-avatar{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--burgundy), var(--gold-deep));
  color: var(--white); font-family: var(--font-head); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.rc-head div{ display: flex; flex-direction: column; }
.rc-name{ font-size: .92rem; color: var(--text); font-weight: 600; }
.rc-stars{ font-size: .78rem; color: var(--gold-deep); letter-spacing: 1px; }
.rc-text{ font-size: .9rem; color: var(--text-soft); margin: 0; }
 
/* ==========================================================================
   LOCATION / MAP
   ========================================================================== */
.location{ background: var(--bg); }
.map-frame{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--line); aspect-ratio: 16/10; }
@media (min-width: 760px){ .map-frame{ aspect-ratio: 21/8; } }
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.15) contrast(1.05); }
 
/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--bg-deep); border-top: 1px solid var(--line); padding: 60px 0 0; }
.footer-grid{ display: grid; gap: 38px; grid-template-columns: 1fr; padding-bottom: 46px; border-bottom: 1px solid var(--line); }
@media (min-width: 720px){ .footer-grid{ grid-template-columns: 1.2fr repeat(3, 1fr); } }
 
.footer-logo{ height: 84px; width: 84px; object-fit: contain; margin-bottom: 12px; margin-left: -10px; }
.footer-tagline{ font-size: .92rem; color: var(--gold-deep); font-style: italic; max-width: 26ch; margin: 0 0 16px; }
.footer-social{ display: flex; gap: 12px; }
.footer-social a{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(126,51,58,.2); display: flex; align-items: center; justify-content: center; transition: border-color .25s, background .25s; }
.footer-social a:hover{ border-color: var(--gold); background: rgba(217,164,65,.15); }
.footer-social svg{ width: 17px; height: 17px; fill: var(--text); }
 
.footer-col{ display: flex; flex-direction: column; gap: 10px; }
.footer-col h4{ font-family: var(--font-head); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 6px; }
.footer-col a{ font-size: .92rem; opacity: .85; transition: opacity .2s, color .2s; }
.footer-col a:hover{ opacity: 1; color: var(--gold-deep); }
.footer-col p{ font-size: .92rem; margin: 0; opacity: .85; }
.footer-domain{ margin-top: 4px !important; color: var(--text-faint); }
 
.footer-bottom{ padding: 20px 0 28px; text-align: center; font-size: .78rem; color: var(--text-faint); }
 
/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.wa-float{
  position: fixed; right: 18px; bottom: 18px; z-index: 260;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.4);
  transition: transform .3s var(--ease);
}
.wa-float:hover{ transform: scale(1.06); }
.wa-float svg{ width: 29px; height: 29px; fill: #fff; }
 
/* ==========================================================================
   SCROLL REVEAL — visible by default; JS only ADDS the transition (see
   js/script.js). If IntersectionObserver is missing or JS never runs,
   .reveal-ready is never added and everything stays fully visible.
   ========================================================================== */
.reveal-ready [data-animate]{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready [data-animate].is-visible{ opacity: 1; transform: translateY(0); }