html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: Neue Montreal;
    src: url(../assets/fonts/NeueMontreal-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.lucky {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
}

.barlow {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.centercol{
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapperbtn{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  background: #20426066;
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 40px;
  margin-top: 30px;
}

.wrapperbtn a{
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-family: "Barlow", sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btnbanner{
    background: #ff6017;
    color: #fff;
    transition: all 0.3s ease;
}

.btnbanner:hover{
  background: #000;
}

.btnbanneroutline{
    border: 2px solid #ff6017;
    color: #ff6017;
    background: transparent;
}

.btnbanneroutline:hover{
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}

.btnwhitwroutline{
    border: 1px solid #fff;
    color: #ffffff;
    background: transparent;
    border-radius: 16px;
    padding: 2px 7px;
    text-decoration: none;
    font-size: 12px;
}

.btnwhitwroutline:hover{
    border: 1px solid #ff6017;
    color: #ff6017;
}

.btblack{
    background: #ff6017;
    border: 1px solid #ff6017;
    color: #fff;
    transition: all 0.3s ease;
}

.btblack:hover{
    background: #000;
    border: 1px solid #000;
    color: #fff;
}

.banner h1{
  color: #fff;
  font-family: Neue Montreal, sans-serif;
  line-height: 0px;
}

.allbanner {
  position: relative;
  width: 100%;
  height: 700px;
  background: #d1f1ff;
  overflow: hidden;
}

.allbanner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%);
  z-index: 1;
  pointer-events: none;
}

.allbanner > * {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════ HERO SLIDER (reusable) ═══════════════════════════
   Cómo reusar en otra página:
   1) Copiar este bloque completo a la hoja de estilos de esa página.
   2) Copiar initHeroSlider() + su llamada en main.js (buscar el mismo comentario ahí).
   3) En el HTML, envolver las fotos del hero en <div class="hero-slides"> con un
      <img class="hero-slide"> por foto (la primera con is-active) + un
      <div class="hero-dots"> con un <button class="hero-dot"> por foto.
      Con 1 sola foto el slider no rota (el JS corta apenas ve menos de 2 slides). */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  animation: heroKenBurns 8.8s ease-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.hero-dot:hover {
  background: rgba(255,255,255,.7);
}

.hero-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active {
    animation: none;
  }
}
/* ═══════════════════════════ /HERO SLIDER ═══════════════════════════ */

/* ═══════════════════════════ HOME HERO (index.html únicamente) ═══════════════════════════
   Nav naranja sólido + hero split blanco/foto, mismo patrón de columnas que
   usan las 9 páginas de concepto (.hero-col--text/--photo) pero con clases
   propias (.site-nav* / .home-hero*) para no tocar el nav/hero viejo (.allbanner,
   .menu, .banner, .wel/.cal, .catering-pill) del que todavía depende
   menuall.html, que comparte esta misma hoja de estilos. */

.home-hero-wrap {
  position: relative;
  background: #fff;
}
/* Oculto a pedido (no se borró, por si se vuelve a necesitar el banner #1). */
.home-hero-wrap--hidden {
  display: none;
}

/* ── Nav ── */
.site-nav {
  background: #ff6017;
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-nav-inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-logo {
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}
.site-logo img {
  display: block;
  width: 150px;
  height: auto;
}

.site-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  flex: 1;
}
.site-nav-link {
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.site-nav-link:hover { opacity: 0.8; }
.site-nav-link.active { border-color: #fff; }

.site-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-nav-socials {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav-socials a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.site-nav-socials a:hover { background: #fff; color: #ff6017; }

.site-catering-btn {
  background: #fff;
  color: #ff6017;
  text-decoration: none;
  font-family: "Barlow", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 27px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.site-catering-btn:hover { background: #1a1410; color: #fff; }

@media (min-width: 1400px) {
  .site-nav .mobile-menu-container { display: none !important; }
}
@media (max-width: 1399px) {
  .site-nav-links, .site-nav-right { display: none; }
  .site-nav .mobile-menu-container { position: relative; margin-left: auto; }
}

/* ── Hero split ── */
.home-hero {
  display: grid;
  grid-template-columns: minmax(400px, 36%) 1fr;
  align-items: stretch;
  background: #fdf9f9;
}

.home-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 40px 64px max(56px, calc((100vw - 1400px) / 2));
}

.home-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff6017;
  margin-bottom: 14px;
}
.home-hero-eyebrow i {
  display: block;
  width: 40px;
  height: 2px;
  background: #ff6017;
}

.home-hero-title {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(52px, 6.4vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.home-hero-title-dark { display: block; color: #1a1410; }
.home-hero-title-accent { display: block; color: #ff6017; }

.home-hero-desc {
  font-family: "Barlow", sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #55504b;
  max-width: 34ch;
  margin: 0 0 28px;
}

.home-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.home-hero-btns .btnbanner,
.home-hero-btns .btnbanneroutline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 27px;
}
/* La foto ya no está detrás de estos botones (hero ahora es blanco a la
   izquierda) — el hover blanco-sobre-blanco de .btnbanneroutline (pensado
   para el hero viejo, con foto oscura de fondo) se pisa acá con relleno
   naranja sólido en vez de volverse invisible. */
.home-hero-btns .btnbanneroutline:hover {
  border-color: #ff6017;
  background: #ff6017;
  color: #fff;
}

.home-hero-menus-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Barlow", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1410;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,20,16,0.35);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.home-hero-menus-link:hover { color: #ff6017; border-color: #ff6017; }
.home-hero-menus-link .hero-more-arrow { transition: transform 0.25s ease; }
.home-hero-menus-link:hover .hero-more-arrow { transform: translateX(4px); }

.home-hero-photo {
  position: relative;
  overflow: hidden;
  min-height: 85vh;
}

@media (max-width: 980px) {
  .site-nav-inner { padding: 12px 20px; }
  .site-logo img { width: 120px; }

  .home-hero { grid-template-columns: 1fr; }
  .home-hero-text { padding: 40px 24px 36px; align-items: center; text-align: center; }
  .home-hero-eyebrow { margin-left: auto; margin-right: auto; }
  .home-hero-desc { max-width: 46ch; }
  .home-hero-btns { justify-content: center; }
  .home-hero-photo { min-height: 420px; }
}
/* ═══════════════════════════ /HOME HERO ═══════════════════════════ */

/* Franja divisoria pegada al pie del hero — banda naranja superpuesta
   DENTRO del propio banner (bottom:0, por encima de la foto/slider).
   Una sola loma suave por repetición (sube y vuelve a la misma línea de
   base, sin valle por debajo — no un seno completo con cresta+valle como
   la versión anterior), más baja/chata. Fondo transparente: solo se ve la
   forma de la ola, dejando que la foto se asome entre lomas, como una
   pincelada sobre el borde inferior de la foto. .home-hero-wrap es el
   contenedor position:relative que la ancla. */
.section-divider--flags {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='26'%20viewBox='0%200%2080%2026'%3E%3Cpath%20d='M0,19%20C20,19%2020,5%2040,5%20C60,5%2060,19%2080,19%20L80,26%20L0,26%20Z'%20fill='%23211d23'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
}

/* Misma loma que .section-divider--flags, pero con el ancho del tile
   multiplicado x5 (400px en vez de 80px) — mismas coordenadas Y, solo se
   estiran las X, así la loma es 5 veces más larga sin cambiar de alto.
   Usada en el segundo banner de prueba. */
.section-divider--flags-xl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='48'%20viewBox='0%200%20150%2048'%3E%3Cpath%20d='M0,38%20C37.5,38%2037.5,12%2075,12%20C112.5,12%20112.5,38%20150,38%20L150,48%20L0,48%20Z'%20fill='%23211d23'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
}

.menuwrapeer{
    display: flex;
    padding-top: 20px;
    z-index: 100;
}

.menu{
    background: #ff6017;
    padding: 10px 25px;
    border-radius: 27px;
    font-family: "Barlow", sans-serif;
    font-size: 11px;
    position: relative;
}

.menu ul{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 8px;
    align-items: center;
}

.menu ul li{
    transition: all 0.3s ease;
    padding: 5px 4px;
}

.menu a{
    text-decoration: none;
    color: #fff;
    display: block;
}

.menu li:hover{
    color: #e9490b;
    font-weight: bold;
}

.triangle-indicator {
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff6016;
    transition: left 0.3s ease;
    z-index: 10;
}

.menu a.active {
    color: #7f2e08;
    font-weight: bold;
}

.menu li{
    margin: 0;
    padding: 0;
}

.socialone{
    background: #000;
    border-radius: 27px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
}

.socialone ul{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 20px;
}

.socialone a{
    color: #fff;
    font-size: 16px;
}
.menu-social { font-size: 16px; }
.menu-social-sep { width: 1px; background: rgba(255,255,255,0.3); margin: 2px 4px; align-self: stretch; padding: 5px 0px !important; }
.mobile-social { display: none; }

.catering-pill{
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 27px;
    font-family: "Barlow", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background .3s ease, color .3s ease;
}

.catering-pill:hover{
    background: #ff6016;
}

.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mobilemenu {
    display: none;
}

.mobile-menu-container {
  display: block;
}

/* Botón hamburguesa */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
  transition: all 0.3s ease;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  outline: none;
  position: absolute;
  right: 0;
}

.hamburger:hover {
  background: rgba(0, 0, 0, 0.05);
}

.hamburger:focus {
  outline: none;
  background: rgb(202 230 241);
}

.hamburger:active {
  transform: scale(0.95);
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: #fff;
  margin: 2px 0;
  transition: all 0.3s ease;
  border-radius: 3px;
  display: block;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 7px;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  position: relative;
  top: -7px;
}

/* Menú deslizable */
.nav-menu {
  padding-top: 80px;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  background: rgb(28 12 48);
  backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: right 0.4s ease;
  z-index: 999;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.nav-menu.active {
  right: 0;
  position: fixed !important;
}

.nav-menu.active ul li {
  animation: slideInFromRight 0.5s ease forwards;
}

.nav-menu.active ul li:nth-child(1) { animation-delay: 0.1s; }
.nav-menu.active ul li:nth-child(2) { animation-delay: 0.2s; }
.nav-menu.active ul li:nth-child(3) { animation-delay: 0.3s; }
.nav-menu.active ul li:nth-child(4) { animation-delay: 0.4s; }
.nav-menu.active ul li:nth-child(5) { animation-delay: 0.5s; }
.nav-menu.active ul li:nth-child(6) { animation-delay: 0.6s; }
.nav-menu.active ul li:nth-child(7) { animation-delay: 0.7s; }
.nav-menu.active ul li:nth-child(8) { animation-delay: 0.8s; }

.nav-menu ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 35px 0px 0px 0px;
}

.nav-menu a {
  text-decoration: none;
  color: #bfa8a8;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 5px 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
  display: block;
}

.nav-menu a:hover,
.nav-menu a:focus {
  background: linear-gradient(135deg, #2f1353 0%, #344e5c 100%);
  color: white;
  transform: translateY(-2px);
  outline: none;
}

.titlelapida{
    font-family: "Luckiest Guy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 20px;
}

.wel{
  font-size: 25px;
  margin-bottom: 4px;
}

.cal{
    color: #fff;
    font-weight: 900;
    font-size: 85px;
    font-style: italic;
    line-height: 1;
}

.cal-accent{
    display: block;
    font-family: "Kaushan Script", cursive;
    font-weight: 400;
    font-style: normal;
    color: #ff6016;
    font-size: 71px;
    line-height: 1;
    margin-top: -10px;
}

.banner-tagline{
    display: block;
    margin-top: 20px;
    line-height: 1.5;
}

.banner{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 0px;
    position: relative;
}

.aboutbox {
  position: relative;
  border-radius: 27px;
  padding-top: 200px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.aboutbox:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.aboutbox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0,0,0,.75) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,0) 75%);
  pointer-events: none;
  z-index: 1;
}

.aboutbox .blurr {
  position: relative;
  z-index: 2;
}

.aboutbox2 {
  position: relative;
  border-radius: 27px;
  height: 500px;
  margin-top: 90px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.aboutbox2:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.aboutbox2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.aboutbox2:hover::before {
  opacity: 1;
}

.aboutbox2 > * {
  position: relative;
  z-index: 2;
}

/* ═══ Slider "máscara" (About): misma foto, 2 ventanas — reusa el patrón del hero slider ═══ */

.mask-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* .aboutbox2 > * / .aboutbox .blurr ya fuerzan z-index — hay que pisarlo para que quede detrás */
.aboutbox2 > .mask-slides,
.aboutbox > .mask-slides {
  z-index: 0;
}

.mask-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease, transform .3s ease;
}

.mask-slide.is-active {
  opacity: 1;
}

.aboutbox2 .mask-slide { object-position: 20% center; }
.aboutbox .mask-slide   { object-position: 75% center; }

.aboutbox2:hover .mask-slide.is-active,
.aboutbox:hover .mask-slide.is-active {
  transform: scale(1.1);
}

.mask-arrows {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.mask-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}

.mask-arrow:hover { background: #ff6016; }

@media (prefers-reduced-motion: reduce) {
  .mask-slide { transition: none; }
}

.separada{
  letter-spacing: 5px;
}

.section-kicker{
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 18px;
}

.section-kicker-label{
    font-family: Barlow, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 16px;
    color: #1c1c1c;
}

.section-kicker-brand{
    font-family: Barlow, sans-serif;
    font-weight: 900;
    font-style: italic;
    color: #ff6016;
    font-size: clamp(48px, 7.5vw, 84px);
    line-height: 0.95;
    letter-spacing: 0.5px;
}

.about-headline{
    font-family: Neue Montreal, sans-serif;
    color: #1c1c1c;
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.3;
    margin: 0;
}

/* ===================== SEVEN CONCEPTS CAROUSEL ===================== */
.concepts-carousel-sec{
    background: #211d23;
    padding-bottom: 62px;
}

/* Opaque, on its own stacking layer above the sticky black card below
   (.trust-promo-black-test) — same "sticky reveal" technique as the
   newdesignRiverview reference site's footer: the card is genuinely
   stickied to the bottom of the viewport the whole time; what actually
   "reveals" it is this layer's own solid white background scrolling up
   and off, exposing the card pinned underneath once there's no more of
   this layer left to cover it. No JS. */
.concepts-carousel-main{
    position: relative;
    z-index: 1;
    background: #211d23;
    padding-top: 63px;
    padding-bottom: 40px;
}

.concepts-carousel-intro{
    text-align: center;
    padding: 0 24px;
    margin-bottom: 48px;
}

.concepts-carousel-flame{
    display: block;
    font-size: 55px;
    color: #ff6016;
    margin-bottom: 10px;
}

.concepts-carousel-title{
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: clamp(24px, 3vw, 36px);
    color: #fff;
    margin: 0 0 10px;
}

.concepts-carousel-subrow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.concepts-carousel-line{
    width: 40px;
    height: 1px;
    background: rgba(255,96,22,0.4);
}

.concepts-carousel-sub{
    font-family: "Kaushan Script", cursive;
    font-size: 22px;
    color: #ff6016;
}

.concepts-carousel-wrap{
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 60px;
}

.concepts-track{
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-top: 10px;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.concepts-track::-webkit-scrollbar{ display: none; }

.concept-slide{
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 240px;
    background: #fdfcf8;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    padding: 20px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.concept-slide:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}

.concept-slide-logo{
    max-width: 100%;
    max-height: 96px;
    object-fit: contain;
    margin-bottom: 16px;
}

.concept-slide-photo{
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 14px;
}

.concept-slide-tagline{
    font-family: "Barlow", sans-serif;
    font-size: 17px;
    color: #6b6b6b;
    line-height: 1.4;
    margin: 0 0 18px;
    min-height: 38px;
}

.concept-slide-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 100px;
    transition: filter 0.25s ease;
}
.concept-slide-btn:hover{
    filter: brightness(0.9);
    color: #fff;
}

/* ── Variante "full photo bg" (prueba en Cali Aji / Om) ───────────── */
.concept-slide--photobg{
    position: relative;
    overflow: hidden;
    padding: 0;
    height: 400px;
    align-items: stretch;
    justify-content: space-between;
}

.concept-slide--photobg .concept-slide-photo{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    z-index: 0;
    transition: transform 0.6s ease;
}
.concept-slide--photobg:hover .concept-slide-photo{
    transform: scale(1.06);
}

.concept-slide-scrim{
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 60%, #000 40%) 0%,
            transparent 38%,
            transparent 52%,
            rgba(0,0,0,0.35) 78%,
            color-mix(in srgb, var(--accent) 25%, #000 85%) 100%);
}

.concept-slide-plate{
    position: relative;
    z-index: 2;
    align-self: flex-end;
    margin: 16px 16px 0 0;
    background: rgb(195 195 195 / 22%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(2 2 2 / 3%);
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.concept-slide--photobg .concept-slide-logo{
    max-height: 66px;
    margin-bottom: 0;
}

.concept-slide-content{
    position: relative;
    z-index: 2;
    padding: 0 18px 20px;
}

.concept-slide--photobg .concept-slide-tagline{
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.concept-slide--photobg .concept-slide-btn{
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.concepts-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(28,28,28,0.85);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.25s ease;
}
.concepts-arrow:hover{
    background: #ff6016;
}
.concepts-arrow--prev{ left: 0; }
.concepts-arrow--next{ right: 0; }

/* Sticky reveal card — pinned to the bottom of the viewport for the whole
   scroll of .concepts-carousel-sec (this is what makes it "sticky"), sitting
   there behind .concepts-carousel-main's opaque white background. Only
   becomes visible once that layer has scrolled all the way past. Floats as
   an inset card, not full-bleed: margin-bottom doubles as the sticky gap —
   with bottom:0, the margin box is what's held clear of the viewport edge,
   so the card stays lifted off the very bottom once pinned. */
.trust-promo-black-test{
    position: sticky;
    bottom: 0;
    z-index: 0;
    background: #000000;
    border-radius: 28px;
    max-width: 1200px;
    margin: 0 auto 0px;
    padding: 50px;
}

.trust-promo-intro{
    text-align: center;
    margin-bottom: 32px;
}

.trust-promo-label{
    display: block;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    color: #ff6016;
    margin-bottom: 8px;
}

.trust-promo-title{
    font-family: "Unbounded", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(28px, 3.4vw, 44px);
    color: #fff;
    margin: 0;
}

/* ── Trust strip: Order Online / Family Meals / Catering / One Location ── */
.trust-strip-wrap{
    max-width: 1320px;
    margin: 40px auto 0;
}

.trust-strip{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    background: #ff6016;
    border-radius: 14px;
    padding: 46px 36px;
}

.trust-item{
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 200px;
    position: relative;
    padding-right: 20px;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: transform 0.25s ease;
}
.trust-item:hover,
.trust-item:focus-visible{
    transform: translateY(-3px);
}
.trust-item:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 6px;
}
.trust-item:not(:last-child)::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: rgba(255,255,255,0.3);
}

.trust-item-icon{
    flex-shrink: 0;
    font-size: 26px;
    color: #fff;
}

/* Cada ícono anima a su manera, con sentido propio: la bolsa se entrega,
   la gente se junta, la tapa del plato se levanta, el pin cae en su lugar. */
.trust-item:nth-child(1):hover .trust-item-icon,
.trust-item:nth-child(1):focus-visible .trust-item-icon{
    animation: trust-bag-hand 0.6s ease;
}
.trust-item:nth-child(2):hover .trust-item-icon,
.trust-item:nth-child(2):focus-visible .trust-item-icon{
    animation: trust-people-sway 0.6s ease;
}
.trust-item:nth-child(3):hover .trust-item-icon .cloche-lid,
.trust-item:nth-child(3):focus-visible .trust-item-icon .cloche-lid{
    animation: trust-cloche-lift 0.6s ease;
    transform-box: fill-box;
    transform-origin: center;
}
.trust-item:nth-child(4):hover .trust-item-icon,
.trust-item:nth-child(4):focus-visible .trust-item-icon{
    animation: trust-pin-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes trust-bag-hand{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-4px) rotate(-10deg); }
    60%      { transform: translateY(0) rotate(6deg); }
}
@keyframes trust-people-sway{
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}
@keyframes trust-cloche-lift{
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(-2.4px); }
    75%      { transform: translateY(-1px); }
}
@keyframes trust-pin-drop{
    0%   { transform: translateY(-7px) scale(0.85); }
    55%  { transform: translateY(1px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
    .trust-item,
    .trust-item-icon,
    .trust-item-icon .cloche-lid{
        animation: none !important;
        transition: none !important;
    }
}

.trust-item-text{
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.trust-item-title{
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

.trust-item-sub{
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
}

/* ── Promo banners: Family Meals / Cali Catering ──────────────────── */
.promo-banner-wrap{
    max-width: 1320px;
    margin: 40px auto 0;
}

.promo-banner-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.promo-banner{
    position: relative;
    overflow: hidden;
    height: 220px;
    border-radius: 16px;
    background: #0a0a0a;
}

.promo-banner-photo{
    position: absolute;
    inset: 0;
    left: 15%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    transition: transform 0.6s ease;
}
.promo-banner:hover .promo-banner-photo{
    transform: scale(1.06);
}

.promo-banner-scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgb(0 0 0) 0%, rgb(0 0 0 / 89%) 40%, #00000000 88%);
}

.promo-banner-content{
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: 62%;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.promo-banner-header{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.promo-banner-headtext{
    display: flex;
    flex-direction: column;
}

.promo-banner-badge{
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 32%, #000 68%);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.promo-banner-badge img{
    width: 62%;
    height: auto;
    display: block;
}
.promo-banner-badge--logo{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fdf5e8;
    border: 1px solid rgba(0,0,0,0.08);
}
.promo-banner-badge--logo img{
    width: 94%;
    height: auto;
    object-fit: contain;
}

.promo-banner-title{
    font-family: "Barlow", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 20px;
    color: #fff;
    margin: 0 0 4px;
}

.promo-banner-tagline{
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.promo-banner .concept-slide-btn{
    margin-top: auto;
}

.fun b{
    color: #9a5800;
}

.fun{
  background: #f7f5ee;
  padding-top: 60px;
  padding-bottom: 111px;
}

.fun p{
  font-family: Neue Montreal, sans-serif;
  color: #434343;
  font-size: 20px;
  line-height: 34px;
}

.contentfun{
  background: #fff url(../assets/img/cosas.jpg) no-repeat;
  background-size: auto;
  background-position: center;
  height: 372px;
  position: relative;
  overflow: visible;
}

.blackbox{
  background: #000;
  padding: 50px;
  color: #fff;
  border-radius: 22px;
  position: relative;
  margin-top: -79px;
  width: 100%;
}

.blackbox p{
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-size: 17px;
}

.blackbox b{
  font-weight: bolder;
  font-size: 20px;
  color: #f6f08a;
}

.blackbox span{
  color: #fff;
  font-weight: bolder;
  font-size: 22px;
}

.socialitem{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.socialitem2{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Animación base para el banner text */
.bannertext {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

.scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Our Concepts cards (.site / .site2) — animación más rápida que el resto
   de .scroll-animate del sitio, para que las 9 tarjetas no tarden en aparecer. */
.sites .scroll-animate {
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bannertext.animate-in .wel {
    animation: fadeInUp 0.5s ease-out 0.1s both;
}

.bannertext.animate-in .cal {
    animation: fadeInUp 0.5s ease-out 0.22s both;
}

.bannertext.animate-in .cal-accent {
    animation: fadeInUp 0.5s ease-out 0.28s both;
}

.bannertext.animate-in .banner-tagline {
    animation: fadeInUp 0.5s ease-out 0.34s both;
}

.bannertext.animate-in .wrapperbtn {
    animation: fadeInUp 0.5s ease-out 0.46s both;
}

a.hero-more-link, a.hero-more-link:link, a.hero-more-link:visited {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 3px;
  transition: color 0.25s, border-color 0.25s;
}
a.hero-more-link:hover { color: #fff; border-color: rgba(255,255,255,0.75); }
.hero-more-arrow { display: inline-block; transition: transform 0.25s; }
.hero-more-link:hover .hero-more-arrow { transform: translateX(4px); }
.bannertext.animate-in .hero-more-link {
    animation: fadeInUp 0.5s ease-out 0.58s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bannertext.animate-in:hover {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

.blurr2 {
    /* El texto ya no vive en una caja de blur flotante: ver .imagelocal::after /
       .imagelocal2::after (scrim degradado) y .logotext (layout + acento) más abajo. */
}

.blurr {
    padding: 20px;
    margin-bottom: 30px;
    margin-right: 30px;
    text-align: right;
}

.blurr h1, .blurr h2 {
    color: #fff;
    margin: 10px 0;
    font-weight: 400;
    line-height: 27px;
    text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

.blurr h1{
    font-size: 14px;
}

.minimenu{
    display: flex;
    margin-top: 28px;
    gap: 11px;
    flex-direction: column;
    align-items: flex-end;
}

.sites{
  background: #fff;
  margin-top: 100px;
  margin-bottom: 40px;
}
.sites .container { width: 90%; max-width: 90%; }

.siteconten{
  display: flex;
  flex-direction: column;
}

.site {
    background: #f7f5ee;
    padding: 20px;
    display: flex;
    border-radius: 27px;
    font-family: Neue Montreal, sans-serif;
    margin-bottom: 20px;
    height: 446px;
}

.site:hover .imagelocal {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.site:hover .imagelocal img {
    transform: scale(1.15);
}

.imagelocal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.site:hover .imagelocal::before {
    opacity: 1;
}

/* Scrim degradado: reemplaza la caja de blur, se adapta a cualquier foto sin bordes duros */
.imagelocal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 10, 6, 0) 0%,
        rgba(15, 10, 6, 0) 40%,
        rgba(15, 10, 6, .55) 64%,
        rgba(15, 10, 6, .88) 84%,
        rgba(15, 10, 6, .95) 100%);
    z-index: 1;
    pointer-events: none;
}

.imagelocal .continside {
    position: relative;
    z-index: 2;
}

.site2{
  background: #f7f5ee;
  padding: 20px;
  display: flex;
  border-radius: 27px;
  font-family: Neue Montreal, sans-serif;
  margin-bottom: 20px;
  flex-direction: column;
  height: 446px;
}

.site2:hover .imagelocal2 {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.site2:hover .imagelocal2 img {
    transform: scale(1.15);
}

.site2:hover .imagelocal2::before {
    opacity: 1;
}

.newtext{
  display: flex;
  gap: 50px;
}

.site .text{
    margin-top: 15px;
    width: 50%;
    padding: 0px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 22px;
}

.circulo-flecha {
    width: 32px;
    height: 32px;
    background-color: #ff6016;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.text a{
  padding: 5px 10px;
  border: 1px solid #000;
  border-radius: 27px;
  text-decoration: none;
  color: #000;
  width: fit-content;
  transition: all 0.3s ease;
}

.text a:hover{
  border: 1px solid #ff6016;
  background: #ff6016;
  color: #fff;
}

.text img{
  margin-bottom: 20px;
}

.logotext .logi{
  color: #fff;
}

.logi h1{
  font-size: 20px;
  line-height: 0px;
}

.logi h1, .logi span{
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.logi span{
  font-size: 12px;
}

.texti a{
    padding: 5px 10px;
    border: 1px solid #fff;
    border-radius: 27px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.texti a:hover{
    border: 1px solid #ff6016;
    color: #ff6016;
}

.logotext .texti{
  color: #fff;
}

.continside{
  position: relative;
}

.logotext{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 26px 24px;
}

.imagelocal {
    width: 50%;
    height: 400px;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.imagelocal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.imagelocal2 {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.imagelocal2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.imagelocal2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Scrim degradado: reemplaza la caja de blur, se adapta a cualquier foto sin bordes duros */
.imagelocal2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 10, 6, 0) 0%,
        rgba(15, 10, 6, 0) 40%,
        rgba(15, 10, 6, .55) 64%,
        rgba(15, 10, 6, .88) 84%,
        rgba(15, 10, 6, .95) 100%);
    z-index: 1;
    pointer-events: none;
}

.imagelocal2 .continside {
    position: relative;
    z-index: 2;
}

.conceptos p{
    font-family: Neue Montreal, sans-serif;
    color: #434343;
    font-size: 20px;
    line-height: 34px;
}

/* Animaciones */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ===================== GALLERY ===================== */
.gallery-sec{
    background: #f7f5ee;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
}

.gallery-sec .container{ width: 90%; max-width: 90%; }

.gallery-intro{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: end;
}

.gallery-label{
    display: block;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    color: #9a5800;
    margin-bottom: 14px;
}

.gallery-title{
    font-family: "Unbounded", sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 3.6vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1c1c1c;
    margin: 0;
}

.gallery-title-accent{
    font-family: "Unbounded", sans-serif;
    font-weight: 800;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-style: normal;
    color: #ff6016;
    margin: 0 0 16px;
}

.gallery-rule{
    width: 56px;
    height: 3px;
    background: #ff6016;
    margin-bottom: 22px;
}

.gallery-sub{
    font-size: 17px;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
    padding-bottom: 6px;
}

.gallery-mosaic{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "sancocho antonio drinks"
        "sancocho chicharron bocata";
    gap: 14px;
    height: 680px;
    margin-top: 56px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.gallery-tile{
    position: relative;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
}

.gallery-tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.gallery-tile:hover img{
    transform: scale(1.05);
}

.gallery-tile--sancocho  { grid-area: sancocho; }
.gallery-tile--antonio   { grid-area: antonio; }
.gallery-tile--drinks    { grid-area: drinks; }
.gallery-tile--chicharron{ grid-area: chicharron; }
.gallery-tile--bocata    { grid-area: bocata; }

/* ===================== FOOTER ===================== */
.fot1{
    background: #1c1c1c;
    color: #fff;
    padding-top: 140px;
    padding-bottom: 100px;
}
.fot1 .container{ width: 90%; max-width: 90%; }

.footer-brand,
.footer-col{
    margin-bottom: 40px;
}

.footer-logo{
    width: 136px;
    height: auto;
    display: block;
    margin-bottom: 22px;
}

.footer-info{
    list-style: none;
    padding: 0;
    margin: 6px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    color: #b8b8b8;
}

.footer-info li{
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-info i{
    color: #ff6016;
    font-size: 22px;
    width: 28px;
    text-align: center;
}

.footer-info a{
    color: #b8b8b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-info a:hover{
    color: #ff6016;
}

.footer-heading{
    font-family: "Barlow", sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 24px;
    padding-bottom: 14px;
    position: relative;
}

.footer-heading::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    background: #ff6016;
    border-radius: 2px;
}

.footer-links{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a{
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    color: #cfcfcf;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover{
    color: #ff6016;
}

.fot2{
    background: #323232;
    color: #717171;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 10px;
}

.fot2 ul{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    gap: 16px;
}

.social ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.social {
    display: flex;
    gap: 20px;
    margin: 26px 0 0;
    padding: 0;
    justify-content: flex-start;
}

.social li{
    list-style: none;
}

.social i{
    color: #ff6016;
    font-size: 28px;
}

.fotcali h3{
    font-size: 23px;
    font-family: Neue Montreal, sans-serif;
}
.fotcali .cal {
    font-size: 53px;
    display: inline-block;
    padding-bottom: 16px;
    position: relative;
}
.fotcali .cal::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: #ff6016;
    border-radius: 2px;
}

/* Columna "Get The Good Stuff" del footer — mini-form de newsletter,
   visual únicamente (sin backend real detrás, ver onsubmit="return false"
   en el HTML). */
.footer-newsletter-copy{
    font-family: "Barlow", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #b8b8b8;
    margin: 0 0 22px;
}
.footer-newsletter-form{
    display: flex;
    align-items: center;
    background: #2a2a2a;
    border-radius: 30px;
    padding: 4px;
    gap: 6px;
    margin-bottom: 14px;
}
.footer-newsletter-input{
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-size: 14px;
    padding: 10px 16px;
}
.footer-newsletter-input::placeholder{ color: #8a8a8a; }
.footer-newsletter-btn{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ff6016;
    color: #fff;
    border: none;
    border-radius: 26px;
    font-family: "Barlow", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 11px 18px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.footer-newsletter-btn:hover{ background: #1a1410; }
.footer-newsletter-fineprint{
    font-family: "Barlow", sans-serif;
    font-size: 12px;
    color: #7a7a7a;
    margin: 0;
}

/* Media query para pantallas grandes - OCULTAR en desktop */
@media (min-width: 1400px) {
  .mobile-menu-container {
    display: none !important;
  }
}

/* El nav de pill naranja necesita bastante ancho para los 9 ítems + píldora
   "Cali Catering" sin partirse en 2 líneas — pasa a hamburger antes de que
   se vea apretado, en vez de compartir el breakpoint de 980px con el resto
   de los ajustes mobile (esos siguen en su media query original).
   1400px = el breakpoint xxl de Bootstrap, donde .container salta a 1320px;
   por debajo de eso el .container queda fijo en 1140px y el pill de Cali
   Catering no entra al lado del menu sin importar qué tan angosto/ancho
   quede cada item individual — se probó en vivo, es el corte real. */
@media (max-width: 1399px) {
  .menu {
    display: none;
  }
  .catering-pill {
    display: none;
  }
}

/* Banner más alto en desktop: con background-size:cover, más alto = menos recorte = foto "más alejada" */
@media (min-width: 981px) {
  .allbanner {
    height: 860px;
  }
}

@media (max-width: 980px) {

  .blurr h1, .blurr h2 { line-height: normal; font-size: 39px !important; }
  .menu-social, .menu-social-sep { display: none; }
  .mobile-social { display: inline-flex !important; margin-bottom: 16px; padding: 6px 16px; }
  .mobile-social ul { gap: 14px; }
  .mobile-social a { font-size: 13px; }
  .arrow { width: 39% !important; }
  .banner { padding-top: 9px; }
  .banner-tagline { padding-left: 10%; padding-right: 10%; display: block; }

  .concepts-carousel-main { padding-top: 56px; padding-bottom: 32px; }
  .concepts-carousel-wrap { padding: 0 44px; }
  .concept-slide { width: 205px; }
  .concepts-arrow { width: 38px; height: 38px; font-size: 14px; }

  /* Sin el efecto sticky-reveal en mobile: se muestra como una sección
     normal, sin quedar clavada al fondo del viewport. */
  .trust-promo-black-test { position: static; margin: 0 16px 32px; padding: 28px 20px; border-radius: 20px; }
  .trust-promo-intro { margin-bottom: 22px; }

  .trust-strip-wrap { margin-top: 20px; }
  .trust-strip { padding: 20px 22px; justify-content: center; }
  .trust-item { flex: 1 1 45%; padding-right: 0; }
  .trust-item:not(:last-child)::after { display: none; }

  .promo-banner-wrap { margin-top: 20px; }
  .promo-banner-row { grid-template-columns: 1fr; gap: 16px; }
  .promo-banner { height: 260px; }
  .promo-banner-content { max-width: 78%; }
  /* Icono+texto lado a lado (como en desktop) no entra en la columna angosta
     de mobile — el título quedaba partido en una franja de ~90px. Apilado
     en vertical se lee bien y usa todo el ancho disponible. */
  .promo-banner-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .promo-banner-title { font-size: 18px; }

  .cal{
    font-size: 44px !important;
    line-height: 40px;
  }
  .fotcali .cal { font-size: 62px !important; line-height: normal; }

  .cal-accent{
    font-size: 34px;
    margin-top: -5px;
  }

  .fotcali{
    flex-wrap: wrap;
  }

  .nav-menu a {
    font-size: 1.2rem;
  }

  .site .text p{
    padding-top: 30px;
  }

  .site .text{
    align-items: center;
    text-align: center;
  }

  .logi h1{
    font-size: 15px;
  }

  .newtext > div:nth-child(2) {
    padding-top: 31px !important;
    text-align: center;
  }

  .wel{
    font-size: 15px;
    line-height: 17px !important;
  }

  .text img{
    display: flex;
    margin: 0 auto;
  }

  .conceptos p{
    font-size: 17px;
  }

  .fun p{
    font-size: 17px;
  }

  .sites{
    margin-top: 66px;
  }

  .aboutbox{
    margin-top: 23px;
  }

  .aboutbox2{
    display: none !important;
  }

  .gallery-sec{
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .gallery-intro{
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .gallery-mosaic{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 280px);
    grid-template-areas:
        "sancocho"
        "antonio"
        "drinks"
        "chicharron"
        "bocata";
    height: auto;
    margin-top: 36px;
    padding: 0;
    gap: 3px;
  }

  .resposivebox{
    padding-left: 8% !important;
    padding-right: 8% !important;
  }

  .fun{
    padding-top: 17px;
  }

  .wrapperbtn{
    padding: 16px;
  }

  .wrapperbtn a{
    font-size: 11px !important;
  }

  .newtext{
    gap: 8px;
  }

  .site .text{
    width: 100%;
  }

  .imagelocal{
    width: 100%;
  }

  .newtext{
    flex-direction: column;
  }

  .site{
    height: auto;
    flex-direction: column;
  }

  .site2{
    flex-wrap: wrap;
    flex-direction: row;
    height: auto;
  }

  .banner{
    padding-top: 9px;
  }

  .socialitem {
    align-items: center;
    justify-content: center;
  }

  .socialitem2 {
    align-items: center;
    justify-content: center;
  }

  .fotcali{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 66px;
  }

  .mobilemenu {
    display: block;
    position: relative;
    z-index: 1000;
  }
}

@media (max-width: 480px) {
  .wrapperbtn{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .wrapperbtn a{
    text-align: center;
  }
}