/* ==========================================================================
   CONTENEDORES FAST FOOD – Comerzia
   Archivo: css/styles.css
   Objetivo: estilos claros, consistentes y fáciles de mantener.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) RESET BÁSICO Y TOKENS
   -------------------------------------------------------------------------- */

/* Box-model coherente en todo el sitio */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset mínimo de márgenes */
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #101828;              /* Gray-900 */
  background: #f6f8fb;         /* Soft gray-blue */
}

/* Paleta (tokens) */
:root {
  /* Marca */
  --color-teal:   #008888;
  --color-navy:   #052047;
  --color-indigo: #004283;
  --color-amber:  #FDB447;

  /* Base */
  --color-dark:   #0d1622;
  --color-soft:   #eef2f6;
  --color-white:  #ffffff;

  /* Auxiliares */
  --shadow-soft:  0 14px 32px rgba(13, 22, 45, .08);
  --shadow-card:  0 10px 24px rgba(10, 22, 50, .08);
  --radius-lg:    18px;
  --radius-xl:    1rem;
}

/* Utilidades rápidas */
.rounded-4   { border-radius: var(--radius-xl); }
.bg-soft-gray{ background: #eef1f6; }
.text-teal   { color: var(--color-teal) !important; }

/* Estados de foco accesibles para inputs y botones */
:focus-visible {
  outline: 2px solid rgba(0, 136, 136, .4);
  outline-offset: 2px;
}

/* Enlaces (la mayoría los controla Bootstrap; esto armoniza colores) */
a { color: #0f3d92; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   1) TOPBAR CON GRADIENTE (la franja superior con contacto)
   -------------------------------------------------------------------------- */

.topbar {
  background: linear-gradient(90deg, #d9f7f3, #7cc8c6, #0f8f92);
  color: var(--color-white);
  font-size: .95rem;
  padding: .45rem 0;
}
.topbar .topbar-link {
  color: var(--color-white);
}
.topbar .topbar-link:hover {
  opacity: .9;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   2) NAVBAR (sticky) + LOGO
   -------------------------------------------------------------------------- */

.navbar {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.navbar.sticky-top { top: 0; } /* Siempre se pega al tope al hacer scroll */

#logo-botes {
  width: 340px;
}

.logo-dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 50%;
  background: var(--color-amber);
  margin-right: .5rem;
}
.brand-highlight {
  background: linear-gradient(90deg, #FEB422, #D78540);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Alturas dinámicas de header */
:root{
  --topbar-h: 50px;
  --navbar-h: 0px;
}

@media (min-width: 768px){ /* solo escritorio */
  .topbar{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1040;          /* arriba de todo */
  }
  .navbar{
    position: fixed;
    top: 48px !important;    /* justo debajo del topbar */
    left: 0; right: 0;
    z-index: 1039;
  }

  /* Empuja el contenido para que no quede tapado por los fijos */
  body.has-fixed-header{
    padding-top: calc(var(--topbar-h) + var(--navbar-h));
  }
}

/* Si usabas .sticky-top/.fixed-top en Bootstrap, que no interfiera en desktop */
@media (min-width: 992px){
  .navbar.sticky-top, .navbar.fixed-top { position: fixed; }
}


/* --------------------------------------------------------------------------
   3) BOTONERA LATERAL (sticky)
   -------------------------------------------------------------------------- */

.social-sticky {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1080;
}

/* Botón de mostrar/ocultar */
.ss-toggle {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  color: #333;
  box-shadow: var(--shadow-card);
  align-self: center;
  cursor: pointer;
}

/* Contenedor de íconos */
.ss-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Botones individuales */
.social-sticky a {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--color-white);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
  text-decoration: none;
}

/* Colores por plataforma */
.ss-phone { background: #0aa28f; }         /* Teléfono */
.ss-mail  { background: #0a55a0; }         /* Correo */
.ss-pdf   { background: #ff8f00; }         /* PDF */
.ss-ml    { background: #ffd54f; }         /* Mercado Libre (con logo) */
.ss-shop  { background: #232f3e; }         /* Tienda */
.ss-fb    { background: #1877f2; }         /* Facebook */
.ss-ig    { background: #e1306c; }         /* Instagram */
.ss-in    { background: #0a66c2; }         /* LinkedIn */

/* Móvil: se colocan horizontales abajo-izquierda */
@media (max-width: 576px) {
  .social-sticky {
    left: 10px;
    right: auto;
    bottom: 90px;
    top: auto;
    transform: none;
    flex-direction: row;
  }
  .ss-list { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   4) HERO (imagen de fondo + overlay) 
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 72vh;
  color: var(--color-white);
  overflow: hidden;
}

/* Capa visual del fondo (elemento .hero-bg) */
.hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Imagen + overlay en una sola propiedad para legibilidad */
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('../assets/img/fondo1.jpg') center/cover no-repeat;
  /* Efecto sutil tipo Ken Burns */
  animation: hero-kenburns 24s ease-in-out infinite;
  filter: contrast(1.05) saturate(1.05);
}

/* Animación de zoom suave */
@keyframes hero-kenburns {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08) translate(2%, -2%); }
  100% { transform: scale(1); }
}

/* El contenido del hero por encima del fondo */
.hero .container {
  position: relative;
  z-index: 1;
}

/* === 1) Hero más legible: overlay oscuro sobre el carrusel === */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;                 /* Fondo = 0, overlay = 1, contenido = 2 */
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.65));
  pointer-events:none;       /* No bloquea clics en botones/links */
}
/* Aseguramos el orden de capas */
.hero .hero-carousel{ z-index:0; }
.hero .container{ position:relative; z-index:2; }

/* --------------------------------------------------------------------------
   5) TITULARES DE SECCIÓN / CONTENEDORES
   -------------------------------------------------------------------------- */

.section-title {
  margin: 0 0 .25rem 0;
  font-weight: 800;
  line-height: 1.2;
  /* Degradado corporativo */
  background: linear-gradient(to right, var(--color-teal), var(--color-indigo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   6) BENEFICIOS (cards pequeñas con ícono)
   -------------------------------------------------------------------------- */

.benefit-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 136, 136, .12);
  color: var(--color-teal);
  font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
   7) FILTROS (chips)
   -------------------------------------------------------------------------- */

.chip {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: .9rem;
  border: 1px solid #cfd6e4;
  background: var(--color-white);
  color: #0f3d92;
  transition: background .2s ease;
}
.chip:hover { background: #f2f5fb; }
.chip.active {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   8) PRODUCTO (card estilo “boyas”)
   -------------------------------------------------------------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Área superior con imagen sobre fondo claro */
.product-card .product-media {
  position: relative;
  padding: 18px;
  text-align: center;
  background: #f7f9fc;
}
.product-card .product-img {
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Pastilla “Ver” arriba a la izquierda (igual que en boyas) */
.product-card .view-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(140, 143, 151, .85);
  color: var(--color-white);
  font-size: .9rem;
  text-decoration: none;
}

/* Cuerpo de la tarjeta */
.product-card .product-body {
  padding: 16px;
}

/* Badge suave de categoría/material */
.badge-soft {
  display: inline-block;
  padding: .35rem .55rem;
  border-radius: 10px;
  background: rgba(0, 136, 136, .12);
  color: #0e7c7c;
  font-weight: 600;
  margin-bottom: .25rem;
}

/* Título y descripción */
.product-title {
  font-size: 1.05rem;
  margin: .5rem 0;
}
.product-desc {
  margin: 0 0 12px 0;
  color: #6b7280; /* gray-500 */
}

/* Botonera inferior */
.product-actions {
  display: flex;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   9) BOTONES
   -------------------------------------------------------------------------- */

/* Gradiente corporativo (CTA principal) */
.btn-gradient {
  background: linear-gradient(to right, #008888, #004283, #052047);
  color: var(--color-white);
  border: none;
}
.btn-gradient:hover {
  color: var(--color-white);
  opacity: .95;
}

/* Borde azul suave (igual al sitio base) */
.btn-outline-sky {
  border: 1px solid rgba(46, 108, 223, .35);
  color: #0f3d92;
  background: rgba(46, 108, 223, .06);
}
.btn-outline-sky:hover {
  background: rgba(46, 108, 223, .12);
  color: #0f3d92;
}

/* --------------------------------------------------------------------------
   10) QUIÉNES SOMOS / CLIENTES
   -------------------------------------------------------------------------- */

.logos .logo-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.logo-card i {
  font-size: 1.4rem;
  color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   11) CONTACTO (tarjetas oscuras + formulario)
   -------------------------------------------------------------------------- */

.bg-dark-2 {
  background: var(--color-dark);
}

/* Inputs en tema oscuro */
#contacto .form-control {
  background: #1b2633;
  border: 1px solid #3a4756;
  color: var(--color-white);
}
#contacto .form-control:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 .25rem rgba(0, 136, 136, .25);
}
#contacto ::placeholder {
  color: #8292a6;
}


/* ===== Hero: carrusel de fondo ===== */
.hero { position: relative; overflow: hidden; }
.hero-carousel{ position:absolute; inset:0; z-index:0; }
.hero-carousel .slide{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter: grayscale(.1) contrast(1.05);
  transform: scale(1.03);
  opacity:0; transition: opacity 1s ease;
}
.hero-carousel .slide.active{ opacity:1; animation: kenburns 18s ease-in-out infinite; }
@keyframes kenburns{
  0%{ transform:scale(1.03); } 50%{ transform:scale(1.06); } 100%{ transform:scale(1.03); }
}
/* Asegura capas: fondo (0), oscurecedor (1), contenido (2) */
.hero .hero-bg{ position:absolute; inset:0; z-index:1; }
.hero .container{ position:relative; z-index:2; }

/* ===== Botón flotante de WhatsApp ===== */
.wa-fab{
  position: fixed; right: 24px; bottom: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff; font-size: 28px;
  box-shadow: 0 12px 30px rgba(37,211,102,.35), 0 2px 6px rgba(0,0,0,.2);
  z-index: 1040; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.wa-fab:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 35px rgba(37,211,102,.45), 0 4px 10px rgba(0,0,0,.25);
}
@media (max-width: 576px){
  .wa-fab{ right:16px; bottom:16px; width:52px; height:52px; font-size:26px; }
}


#mercadolibre {
  border-radius: 12px;
  width: 44px;
}

/* Opcional: un poquito más compacto en pantallas ultra angostas */
@media (max-width: 576px){
  .social-sticky a{
    width: 32px; height: 32px !important;
    right: 0 !important;
  }
  #mercadolibre {
    width: 36px !important;
    height: 36px !important;
  }
  .social-sticky a .bi{ font-size: 0.9rem; }
  
  #logo-botes {
    width: 210px;
  }
}



/* --------------------------------------------------------------------------
   12) RESPONSIVE FINO (pequeños ajustes)
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .product-card .product-img { max-height: 200px; }
}
@media (max-width: 576px) {
  .product-card .product-img { max-height: 180px; }
  .benefit-card { padding: 14px; }
}

/* ====== FIX RESPONSIVO: social-sticky siempre a la derecha ====== */

/* Tablet y menores */
@media (max-width: 991.98px){
  .social-sticky{
    right: 10px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important;
  }
  .social-sticky .ss-list{
    flex-direction: column !important;
    gap: 10px !important;
  }
  .social-sticky a{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  .social-sticky a .bi{ font-size: 1.1rem !important; }
  .ss-ml img{ width: 20px !important; height: 20px !important; }
  #mercadolibre {
    width: 39px !important;
    height: 39px !important;
  }
}

@media (max-width: 420px){
  #mercadolibre {
    width: 33px !important;
    height: 33px !important;
  }
}

/* Móvil */
@media (max-width: 575.98px){
  .social-sticky{
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  .social-sticky .ss-list{ gap: 8px !important; }
  .social-sticky a{
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }
  .social-sticky a .bi{ font-size: 1rem !important; }
  .ss-ml img{ width: 18px !important; height: 18px !important; }
}

/* Evita heredar reglas antiguas que la movían abajo/izquierda */
@media (max-width: 991.98px){
  .social-sticky{ background: transparent !important; padding: 0 !important; }
}


/* ==========================================================================
   FIN
   ========================================================================== */

/* ====== 1) Topbar integrada en el menú colapsado (móviles/tablet) — FONDO BLANCO ====== */
@media (max-width: 991.98px){
  /* Ocultamos la franja superior en móviles */
  .topbar{ display: none !important; }

  /* Navbar blanca */
  .navbar{
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }

  /* Enlaces en color oscuro */
  .navbar .nav-link{
    color: #0b2e4f !important;
    padding: .6rem 1rem;
  }
  .navbar .nav-link:hover,
  .navbar .nav-link:focus{ opacity: .75; }

  /* Menú desplegado también blanco */
  .navbar .collapse.show{
    background: #ffffff !important;
    color: #0b2e4f !important;
    padding: .5rem 0 1rem;
    border-top: 1px solid #e6edf4;
    border-radius: 0 0 16px 16px;
  }

  /* Botón hamburguesa en oscuro */
  .navbar .navbar-toggler{ border-color: rgba(0,0,0,.25) !important; }
  .navbar .navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }
}

/* ===== Menú colapsado: bloque de contacto (móvil) sobre blanco ===== */
.nav-contacts .nc-card{
  background: #f6f9fc;              /* tarjeta clarita sobre fondo blanco */
  border: 1px solid #e6edf4;
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(16,24,40,.05);
}
.nav-contacts .nc-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 12px;
  color: #0b2e4f; text-decoration: none;
}
.nav-contacts .nc-item + .nc-item{ margin-top: 6px; }
.nav-contacts .nc-item i{
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e5f5f3; color: #0aa28f; font-size: 1rem;
}
.nav-contacts .nc-item:hover{ background: #ffffff; }

/* Asegura que los enlaces dentro del collapse queden oscuros (override final) */
@media (max-width: 991.98px){
  .navbar .collapse.show .nav-link{ color: #0b2e4f !important; }
}