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

:root {
  --primary: #ED4C00; /* color principal */
  --secondary: #323642; /* color secundario */
  --tertiary: #AEA434; /* color terciario */
  --white: #FFFFFF;
  --muted: #6b6b6b;
  --radius: 10px;
  --wrap: 1100px;
  --fade-duration: 700ms;
  --glass: rgba(255,255,255,0.85);
}
body {
    font-family: 'Monserrat', sans-serif;
}
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}


p {
    font-family: 'Monserrat', sans-serif;
}

* { box-sizing: border-box; }
html,body { height:100%; }

/* Contenedor */
.wrap { width:90%; max-width:var(--wrap); margin:0 auto; }


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: linear-gradient(180deg, #fffffff2, #ffffffd9);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(16,24,32,0.04);
  box-shadow: 0 6px 18px rgba(16,24,32,0.04);
  height: 60px; /* Altura TOTAL fija del header delgado */
  display: flex;
  align-items: center;
}

.site-header .wrap { 
  display: flex; 
  align-items: center; 
   gap: 0 !important; /* ← Logo perfecto de Inicio */
  padding: 0 20px;
  justify-content: flex-start; /* Todo a la izquierda */
  width: 90%;
  max-width: var(--wrap);
  margin: 0 auto;
  height: 100%;
}


.brand { 
  flex-shrink: 0; /* No se comprime el logo */
   /* Elimina espacio de texto */
}

.brand img {
  height: 100px;   /* Tu tamaño deseado */
  width: auto;
  display: block;
  vertical-align: middle;
}

.main-nav { 
  display: flex; 
  align-items: center;
  margin-left: 120px !important; /* ← Logo-Inicio PERFECTO */
  gap: 35px !important; /* ← Productos-Porqué IDEAL */
}






.main-nav a { 
  color:var(--text); 
  text-decoration:none; 
  font-weight:600; 
  padding:8px 10px; 
  border-radius:8px;
}
.main-nav a:hover, 
.main-nav a:focus,
.dropdown-toggle:hover { /* ← Hover naranja en "Nuestros servicios" */
  background: rgba(11,110,79,0.06) !important; 
  color: var(--primary) !important;
  outline: none;
}


.nav-toggle {
    color: black;
    display: none;
    background: none;
    border: 0;
    font-size: 28px;
    padding: 8px 12px;      /* área consistente */
    margin: 0 !important;   /* QUITA cualquier margin que interfiera */
}






/* HERO */
.hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,110,79,0.18), rgba(20,20,20,0.3));
  z-index: 1;
}

/* SECCIÓN DEBAJO DEL VIDEO */
.hero-bottom {
  background: oklch(78.973% 0.0011 12.701); /* o el color que prefieras */
  padding: 40px 0;
  text-align: center;
}
.hero-bottom-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

/* Botones */
.hero-ctas {
  display: flex;
  gap: 12px;
}

/* Íconos */
.hero-icons {
  display: flex;
  gap: 22px;
  list-style: none;
  padding: 0;
}
.hero-icons li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #00000036;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
}
.hero-icons img {
  height: 24px;
}
.btn { 
 display:inline-block; 
 padding:10px 18px; 
 border-radius:10px; 
 text-decoration:none; 
 font-weight:700; 
 }
 .btn.primary { 
 background:var(--primary); 
 color:#fff;
 box-shadow:0 8px 28px rgba(58, 211, 163, 0.16); 
 }
 .btn.ghost { 
 background:var(--primary); 
 color:#fff; 
 border:1px solid rgba(255,255,255,0.16); 
 }
 /* Contenido encima del video */
.hero-bottom-content {
  position: absolute;
  bottom: 40px;          /* distancia desde abajo */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;            /* ENCIMA del overlay */
  color: white;
  text-align: center;
}
.hero {
  position: relative;
}
@media (max-width: 768px) {
  /* HERO MÓVIL - Video sin recortes */
  
  .hero {
    min-height: 50vh !important;
    display: block !important;
    padding-top: 60px !important; 
    position: relative;
  }
  
  /* Video mantiene proporciones, sin recortes */
  .hero-video {
    position: relative !important;
    width: 100% !important;
    height: 50vh !important;           /* altura fija del contenedor */
    object-fit: cover !important;      /* mantiene proporción */
    object-position: center !important;
    z-index: 0;
  }
  
  /* Overlay sigue el video */
  .hero-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 60%!important;
    z-index: 1;
  }
  
  /* Resto igual... */
  .hero-bottom-content {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 35px 20px !important;
    background: linear-gradient(135deg, #f0f7f4 0%, #e8f5e8 100%)!important;
    z-index: 3;
    width: 100% !important; 
  }
  
  /* resto de tu CSS igual */
}

/* DROPDOWN MENU */
.dropdown {
  position: relative; /* ← CLAVE: dropdown sale justo debajo */
  display: inline-block; /* Inline para gap uniforme */
}

.dropdown-toggle {
  padding: 8px 10px !important; /* ← MISMO padding que .main-nav a */
  display: inline-block;
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 180px;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(16,24,32,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 10000;
  border: 1px solid rgba(16,24,32,0.08);
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block !important;
  padding: 12px 20px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  white-space: nowrap;
  border-radius: 0 !important;
  margin: 0 !important;
}

.dropdown-menu a:hover {
  background: rgba(11,110,79,0.08) !important;
  color: var(--primary) !important;
}

/* MOBILE - Mismo dropdown pero vertical */
@media (max-width: 768px) {
  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(255,255,255,0.95) !important;
    margin-top: 4px !important;
    padding-left: 16px !important;
  }
  
  .main-nav,
  .mobile-nav {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Si usas toggle para mobile-nav */
  .mobile-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    background: white;
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  }
  
  .mobile-nav.active {
    display: flex;
  }
}




 /* HERO DE SALUTE*/

.hero_salute {
  position: relative;
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero_salute .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}

.hero_salute .hero-text {
  position: relative;
  z-index: 5;
  text-align: center;
  color: #C7BEA8;
}

.hero_salute .hero-text h1 {
  font-size: 10rem;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.hero_salute .hero-text p {
  font-size: 1.5rem;
  margin-top: 10px;
  font-weight: 300;
}

/* Contenedor a dos columnas */
.tituloS {
  color: #555555 !important; /* tu color deseado */
}



.qs-container {
  display: flex;
  align-items: center;       /* centra verticalmente */
  justify-content: center;   /* centra horizontalmente */
  gap: 40px;                 /* espacio entre imagen y texto */
}

/* Cada lado ocupa la mitad */
.qs-img, .qs-text {
  flex: 1;
}
.qs-text h2{
  color: #555555;
}
.qs-text p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #555555;
}

/* Imagen responsiva y centrada */
.qs-img img {
  width: 100%;
  max-width: 300px;   /* controla el tamaño si quieres más pequeño */
  display: block;
  margin-left: 100px;
}
#que-es {
  display: flex;
  align-items: center;
}

/* Asegurar que el contenedor sigue usando el mismo ancho global */
.qe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;

  max-width: inherit;   /* usa el mismo ancho que .section-wrap */
  margin: 0 auto;       /* centrado igual que el resto */
  padding: inherit;     /* misma distancia lateral */
}



/* Imagen del lado derecho */
.qe-right img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

#que-encontraras p,
#que-encontraras .items li,
#que-encontraras .note {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem;
  font-weight: 400;
  color: #555555;
  line-height: 1.6;
}


/*SECCIONES GENERALES*/
.section {
padding: 40px 0px;
background: #f8efdf;
color: #555555; /*gris para todo el texto de la sección */
}

.section.grey {
background: #ffffff; /* solo cambia el fondo, no el color de texto */
}

.section h2 {
font-size: 2.2rem;
margin-bottom: 20px;
font-weight: 700;
color: #555555; /* opcional: mismo gris que el resto */
text-align: center;
}

.section p,
.section ul li{
color: #555555;
}

.section-wrap {
  max-width: 1100px;
  margin: auto;
}



/*¿QUÉ ENCONTRARÁS?*/
.items {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.items li {
  font-size: 1.2rem;
  margin: 12px 0;
}

/*BENEFICIOS*/
.benefits {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 900px;
}

.benefits li {
  font-size: 1.2rem;
  padding: 12px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}


/*BOTÓN FINAL (estilo naranja)*/
.cta{
  text-align: center;
  padding: 60px 0;
  background-color: #f8efdf;
}

.btn2 {
  display: inline-block;
  padding: 14px 26px;
  background: #AEA434;
  color: hsl(44, 41%, 89%);
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.2rem;
}

.btn2:hover {
  background: hsl(55, 54%, 39%) !important;
}


/******SALUTE*****/

/* sections */
.qs-section {
    padding: 100px 0;
    background-color: #e6f5ef; 
}

.qs-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: row;      /* Asegura disposición horizontal */
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: nowrap;        /* ❗ Evita que la imagen salte abajo */
}
.qs-text h2 {
    font-size: 48px;
    font-weight: 700;
    color: #1d2d27;
    line-height: 1.2;
}

.qs-text h2 span {
    color: #00a37a; 
}

.qs-description {
    margin-top: 20px;
    font-size: 18px;
    color: #4d5f56;
    max-width: 500px;
}

.qs-tags {
    margin: 25px 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.qs-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 14px;
    color: #2c3e36;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    line-height: 1;
}

.qs-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
}

.qs-icon svg {
    width: 20px;     /* ajusta tamaño si lo necesitas */
    height: 20px;
}

.qs-text {
    font-weight: 600;
    color: #213230;
}

.qs-buttons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.btn-primary {
    background: #00a37a;
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #008b66;
}

.btn-secondary {
    border: 2px solid #00a37a;
    color: #00a37a;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-secondary:hover {
    background: #e0f7ef;
}

/* Imagen y tarjetas de stats */

.qs-image-container {
    position: relative;
}

.qs-image {
    width: 450px;
    height: 450px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    object-fit: cover;
}

.qs-stats {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: flex;
    gap: 20px;
}

.qs-stats div {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.qs-stats strong {
    font-size: 20px;
    display: block;
    font-weight: 700;
}

.qs-stats span {
    font-size: 13px;
}
/*Nuestros Servicios*/
.services-dark {
    background: #535353;
    padding: 80px 20px;
    text-align: center;
    color: white;
    background-size: cover;
}

.services-dark-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 50px;
    color: white;
    letter-spacing: 1px;
}

.services-dark-title span {
    color: var(--primary);
}

.services-dark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    max-width: 1100px;
    margin: auto;
}

.service-dark-item {
    text-align: center;
}

/* ÍCONO EN CÍRCULO */
.service-dark-icon {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: auto;
    border: 6px solid #454545;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-dark-icon img {
    width: 80px;
    height: auto;
}

/* SEMICÍRCULO COLOR */
.service-dark-icon::before {
    content: "";
    width: 100%;
    height: 100%;
    border: 6px solid #ec9253;
    border-radius: 50%;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
}

/* TÍTULO */
.service-dark-item h3 {
    color: #ec9253;
    margin-top: 20px;
    font-size: 1.6rem;
    font-weight: 700;
}

/* Línea + puntito */
.line-dot {
    width: 2px;
    height: 25px;
    background: #ec9253;
    margin: 10px auto;
    position: relative;
}

.line-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
}

/* PÁRRAFOS */
.service-dark-item p {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 300px;
    margin: auto;
    margin-bottom: 20px;
}

/* BOTÓN */
.service-dark-btn {
    display: inline-block;
    padding: 10px 25px;
    background: #ec9253;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.service-dark-btn:hover {
    background: #ec9253;
}

/* why two-col */
.why-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 20px;
}

.why-title {
    text-align: center;
    font-size: 2.3rem;
    font-weight: 800;
    color: #0C4A3B;
    margin-bottom: 12px;
}

.why-subtitle {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 40px;
    color: #555;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* <-- 2 columnas fijas */
    gap: 25px;
}

.why-card {
    background: #fff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: visible !important;  /* Permite que sobresalga */
}

.why-card h3 {
    margin: 12px 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.why-card p {
    color: #555;
    line-height: 1.5;
}

.why-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.green .why-icon  { background: #E3F8EE; }
.orange .why-icon { background: #FFE9D9; }
.blue .why-icon   { background: #DFF3FF; }
.yellow .why-icon { background: #FFF8D6; }

.nayax-img {
    width: 120px;
    margin-top: 15px;
    border-radius: 10px;
    display: block;
}
.nayax-img-corner {
    position: absolute;
    top: 8px !important;      /* Más arriba */
    right: 8px !important;    /* Más a la derecha */
    width: 75px !important;
    height: auto;
    z-index: 2;
    transform: rotate(12deg) !important;  /* Rotación sutil */
    /* Sin sombra ni bordes para efecto "pegatina" */
}


/* Móvil: ajusta rotación y tamaño */
@media (max-width: 768px) {
    .nayax-img-corner {
        width: 55px !important;
        top: 6px !important;
        right: 6px !important;
        transform: rotate(10deg) !important;
    }
}
/* clients */

.clients-grid { 
  display:grid; 
   grid-template-columns: repeat(8, 1fr);
  gap:18px; 
  align-items:center; 
  justify-items:center; 
  margin-top:16px; 
}

.clients-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.clients-row img {
  max-width: 120px;
  opacity: 0.95;
  filter: grayscale(0.2);
}
@media (max-width: 768px) {
  .clients-row {
    gap: 12px !important;
    margin-bottom: 24px !important;
    justify-content: center;
    flex-wrap: wrap !important;      /* NUEVA FILA si no caben */
  }
  
  .clients-row img {
    max-width: 90px !important;     /* MÁS GRANDES */
    width: 85px !important;
    height: auto;
    flex-shrink: 0;                 /* no se comprimen */
  }
  
  .clients-bottom {
    gap: 14px !important;
  }
  
  .clients-bottom img {
    max-width: 90px !important;
    width: 85px !important;
  }
}

/* Pantallas más pequeñas */
@media (max-width: 480px) {
  .clients-row {
    gap: 10px !important;
  }
  
  .clients-row img,
  .clients-bottom img {
    max-width: 80px !important;
    width: 75px !important;
  }
}




/* contact */
.contact {
    background: #f8f8f8;
    min-height: 80vh;            /* Ocupa toda la pantalla */
    
    display: flex;                /* Centrado vertical */
    align-items: center;          /* Centrado vertical */
    
    padding-top: 40px;            /* Evita que quede totalmente centrado */
    padding-bottom: 40px;         /* Respira abajo */
}



.contact_container {
    max-width: 1200px;
    margin: auto;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 200px;
}


.contact_info {
    flex: 10;
}

.contact_info h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.contact_subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.contact_details p {
    font-size: 16px;
    font-size: 15px !important;
    margin: 12px auto !important;    /* auto para centrar flex */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;  /* CENTRA emoji + texto */
    gap: 8px !important;
    max-width: 400px;                /* ancho máximo controlado */
  }
  

.contact_details a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.contact_details a:hover {
    text-decoration: underline;
}

.contact_form {
    flex: 15;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact input,
.contact textarea {
    padding: 12px;
    border: #ccc;
    border-radius: 8px;
    background: #ffffff;
}

.contact textarea {
    resize: vertical;
    height: 120px;
}

.contact .btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.contact .btn:hover {
    background: #AEA434;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  /* CONTACTO - VERSIÓN MÓVIL COMPLETA */
  
  .contact {
    min-height: auto !important;      /* sin altura fija */
    padding: 60px 15px !important;   /* más padding vertical */
    padding-top: 100px !important;   /* espacio para header fijo */
  }
  
  .contact_container {
    flex-direction: column !important;
    gap: 40px !important;            /* más espacio entre secciones */
    padding: 0 15px !important;
    text-align: center;              /* todo centrado */
  }
  
  .contact_info {
    flex: none !important;
    order: 1;                        /* info primero */
  }
  
  .contact_info h2 {
    font-size: 24px !important;      /* más pequeño */
    margin-bottom: 15px;
  }
  
  .contact_subtitle {
    font-size: 15px !important;
    margin-bottom: 25px;
    line-height: 1.6;
  }
  
.contact_details p {
    font-size: 15px !important;
    margin: 12px 0 !important;
    display: flex !important;        /* CAMBIO: flex para alinear */
    align-items: center !important;
    gap: 8px !important;
  }
  
  .contact_details p span {
    flex-shrink: 0 !important;       /* emoji fijo */
    font-size: 18px !important;
    margin: 0 !important;
  }
  
  .contact_details p a {
    font-size: 16px !important;
    display: inline !important;      /* inline, NO block */
    margin: 0 !important;
    white-space: nowrap !important;  /* no corta números/email */
  }
  
  .contact_form {
    flex: none !important;
    order: 2;                        /* form segundo */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .contact input,
  .contact textarea {
    padding: 16px !important;        /* más grandes para touch */
    font-size: 16px !important;      /* texto legible */
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
  }
  
  .contact textarea {
    height: 140px !important;
    padding: 16px !important;
  }
  
  .contact .btn {
    padding: 18px !important;        /* botón grande para touch */
    font-size: 16px !important;
    border-radius: 12px !important;
    width: 100%;
  }
}

/* Muy pequeño */
@media (max-width: 480px) {
  .contact {
    padding: 50px 12px !important;
    padding-top: 90px !important;
  }
  
  .contact_info h2 {
    font-size: 22px !important;
  }
  
  .contact_details a {
    font-size: 15px !important;
  }
}


/*footer*/
.footer {
  background: var(--secondary);
  color: #ffffff;
  padding-top: 40px;
  font-family: 'Monserrat', sans-serif;
}

.footer_container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 20px;
}

.footer_col {
  flex: 1;
}

.footer_logo {
  width: 180px;
  margin-bottom: 20px;
}

.footer_text {
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer_contact {
  margin: 6px 0;
  color: white;
  text-decoration: none;
}
.footer_contact a {
    color: white;
    text-decoration: none;
}

.footer_contact a:hover {
    color: var(--primary);
}


.footer_title {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 700;
}

.footer_list {
  list-style: none;
  padding: 0;
}

.footer_list li {
  margin-bottom: 12px;
}

.footer_list a {
  color: white;
  text-decoration: none;
}

.footer_list a:hover {
  color: var(--primary);
}

.footer_bottom {
  background: var(--secondary);
  text-align: center;
  padding: 15px 0;
  margin-top: 30px;
  font-size: 14px;
}
.footer_copy {
  display: flex;
  flex-direction: column;
  align-items: center;   /* Centra horizontal */
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  margin-top: 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.footer_social {
  display: flex;
  gap: 20px;             /* separación entre íconos */
  margin-bottom: 10px;
}
.footer_social img {
  filter: brightness(0) invert(1); /* vuelve cualquier logo blanco */
  width: 32px;           /* ajusta el tamaño si quieres */
  height: 32px;
}



.footer_copy h3 {
  margin: 0;
  font-size: 14px;
}



/* ------------------------- */
/* CONTENEDOR PRINCIPAL */
/* ------------------------- */
.vending-sections {
    max-width: 1100px;
    margin: 80px auto;
    margin-top: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* ------------------------- */
/* TARJETAS */
/* ------------------------- */
.vending-card {
    display: flex;
    gap: 40px;
    align-items: center;
}

.vending-imgbox {
    flex: 1;
}

.vending-imgbox img {
    width: 75%;        /* antes 100% */
    height: auto;      /* mantiene proporción natural */
    border-radius: 15px;
    object-fit: cover; /* si el contenedor tiene altura fija, recorta sin deformar */
    margin-left: 100px;
  }


.vending-content {
    flex: 1;
}

.vending-content h2 {
    color: #ff6a00;
    font-size: 1.8rem;
    font-weight: 700;
}

/* Línea + puntito */
.vending-line-dot {
    width: 2px;
    height: 25px;
    background: #ff6a00;
    margin: 15px 0;
    position: relative;
}

.vending-line-dot::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #ff6a00;
    border-radius: 50%;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.vending-content p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
}

/* HERO VENDING*/
.hero_vending {
  position: relative;
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero_vending .hero-img-Vending {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}

.hero_vending .hero-text-Vending {
  position: relative;
  z-index: 5;
  text-align: center;
  color: var(--primary);
}

.hero_vending .hero-text-Vending h1 {
  font-size: 10rem;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.hero_vending .hero-text-Vending p {
  font-size: 1.5rem;
  margin-top: 10px;
  font-weight: 300;
}

.vending-intro {
  text-align: center;
  padding: 60px 20px;
  background-color: #fff; /* fondo suave */
}

.vending-intro-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #FF6600; /* color llamativo */
  margin-bottom: 20px;
  line-height: 1.2;
}

.vending-intro-subtitle {
  font-size: 1.3rem;
  font-weight: 500;
  color: #333;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Botonfinal vending */
.ctavending{
  text-align: center;
  padding: 60px 0;
  background-color: #ffffff;
}

.btn2vending {
  display: inline-block;
  padding: 14px 26px;
  background: var(--primary);
  color: hsl(44, 41%, 89%);
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.2rem;
}
.btn2:hover {
  background: hsl(34, 82%, 45%);
}

/* ============================ */
/*   PALETA DE COLORES          */
/* ============================ */
:root {
  --salmon: #e8745a;      /* tono salmón pastel */
  --salmon-light: #ffbd94;
  --green: #4a9d6c;       /* verde pastel premium */
  --green-light: #dff2df;
  --text-dark: #1e1e1e;
}

/* ============================ */
/*   HERO                       */
/* ============================ */

.hero_mimarket {
  position: relative;
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero_mimarket .hero-miimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
  margin-top: 35px;
}

.hero_mimarket .hero-mit {
  position: relative;
  z-index: 5;
  text-align: center;
  color: #4a9d6c;
}

.hero_mimarket .hero-mit h1 {
  font-size: 10rem;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.hero_mimarket .hero-mit p {
  font-size: 1.5rem;
  margin-top: 10px;
  font-weight: 300;
}

/* ============================ */
/*   SECCIONES GENERALES        */
/* ============================ */

.mimarket-section {
  padding: 90px 20px;
  background: var(--green-light);
}

.mimarket-wrap {
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: center;
}

.mimarket-col {
  flex: 1 1 45%;
}

.mimarket-col h2 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-dark);
}

.mimarket-col p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.mimarket-imgfull {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
}

/* ============================ */
/* FOTO PREMIUM (opción 1)      */
/* ============================ */

.mimarket-banner img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  margin-right: 60px;
  filter: brightness(0.4); /* 0.6 = más oscuro, ajusta a tu gusto */
}

/* ============================ */
/* BENEFICIOS (centrado)        */
/* ============================ */

.mimarket-beneficios {
  text-align: center;
  background: var(--salmon-light);
  padding: 90px 20px;
}

.mimarket-beneficios h2 {
  font-size: 2.6rem;
  margin-bottom: 25px;
  color: var(--text-dark);
}

.mimarket-benef-list {
  list-style: none;
  padding: 0;
  max-width: 700px;
  margin: 0 auto 40px;
}

.mimarket-benef-list li {
  font-size: 1.2rem;
  padding: 5px 0;
  color: var(--text-dark);
}

/* BOTÓN PREMIUM */
.mimarket-btn {
  display: inline-block;
  background: var(--green);
  color: white;
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.2s;
}

.mimarket-btn:hover {
  background: #3c8259;
}

/* Sección */
.productos-section {
    padding: 10px 20px 50px 20px !important;  /* padding-bottom en lugar de margin */
    background: #f7f7f7;
    /* Quita margin-bottom: 30px; */
}


.titulo-productos {
    text-align: center;
    margin-bottom: 15px;
    font-size: 2rem;
    font-weight: bold;
}
/* CARRUSEL */
.slider-productos {
    width: 100%;
    padding: 0 0 15px;
}
.slider-productos {
    overflow: hidden;        /* recorta contenido que se sale del carrusel */
    position: relative;
}

.productosSwiper {
    overflow: visible;       /* Swiper necesita ver sus slides */
}

.productosSwiper * {
    overflow: visible;       /* flechas y pagination siguen visibles */
}


.productosSwiper {
    width: auto;           /* que tome el ancho del padre (section-wrap) */
    max-width: 100%;
    margin: 0 auto;        /* centrado dentro de .slider-productos */
    height: 220px !important;
    display: flex !important;
    align-items: flex-end !important;
}

.productosSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.productosSwiper img {
    max-height: 160px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}


/* Ajuste de flechas */
.swiper-button-next,
.swiper-button-prev {
    color: #000 !important;
    z-index: 9999 !important;
top: 70% !important;  /* prueba 65%-80% según tu gusto */
    transform: translateY(-50%) !important;

}
.swiper-button-prev {
    left: -1px !important;   /* más cerca o -10px para pegarlo al borde */
}

.swiper-button-next {
    right: -1px !important;  /* igual para la derecha */
}


.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 3px !important;  /* Espacio mínimo */
    opacity: 0.6 !important;
    background-color: #000 !important;
}

.swiper-pagination-bullet-active {
    width: 10px !important;
    height: 10px !important;
    opacity: 1 !important;
    background-color: #ff5722 !important; /* color destacado */
}

@media (max-width: 768px) {
    .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
        margin: 0 2px !important;
    }
    .swiper-pagination-bullet-active {
        width: 8px !important;
        height: 8px !important;
    }
}

/* GRID */
.categorias {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: 1200px;      /* o el ancho de tu contenedor principal */
    margin: 0 auto;         /* centra el grid dentro de la página */
    padding-bottom: 0;      /* quita espacio extra abajo si no lo necesitas */
    overflow-x: visible;    /* evita scroll horizontal innecesario */
}
.submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    padding: 0 10px; /* sin padding vertical para que no estorbe */
}


/* TARJETAS */
.categoria-card {
    position: relative;
    background: white;
    border-radius: 18px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.25s ease;
    overflow: visible;
}

.categoria-card h3 {
    font-size: 1.3rem;
    font-weight: bold;
}
@media (max-width: 768px) {
  /* CATEGORÍAS - VERSIÓN MÓVIL */
  
  .categorias {
    grid-template-columns: repeat(2, 1fr) !important;  /* 2 columnas */
    gap: 15px !important;
    padding: 0 15px !important;
    max-width: none !important;
  }
  
  .categoria-card {
    padding: 18px 12px !important;     /* menos padding */
    min-height: auto; /* mejor que fija */
    overflow: visible; /* asegura que no herede hidden */

  }
  
  .categoria-card h3 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
  .categorias {
    grid-template-columns: 1fr !important;  /* 1 columna */
    gap: 12px !important;
    padding: 0 10px !important;
  }
  
 .categoria-card {
    padding: 16px 12px !important;
    min-height: auto;
    overflow: visible;
  }
  
  .categoria-card h3 {
    font-size: 1rem !important;
  }
}
/* CATEGORÍAS - MÓVIL: Click en lugar de hover */
@media (max-width: 768px) {
  .categoria-card {
    /* Quita hover, usa click */
  }
  
  /* Click para abrir/cerrar */
  .categoria-card.active .submenu {
    max-height: 800px !important;
    padding: 15px 10px !important;
    opacity: 1 !important;
  }
}

/* Hover solo DESKTOP */
@media (min-width: 769px) {
  .categoria-card:hover {
    transform: translateY(-6px);
  }
  
  .categoria-card:hover .submenu {
    max-height: 999px !important;
    padding: 15px 10px;
    opacity: 1;
  }
}



/* Limitar altura del carrusel y alinearlo hacia abajo */
.productosSwiper {
    height: 220px !important;      /* prueba con 200-260px hasta que te guste */
    display: flex !important;
    align-items: flex-end !important;  /* que el contenido quede “abajo” */
}

/* Que cada slide NO centre verticalmente la imagen */
.productosSwiper .swiper-slide {
    align-items: flex-end !important;
}

/* Ajustar la altura de las imágenes si hace falta */
.productosSwiper img {
    max-height: 160px;      /* reduce si quieres que ocupen menos vertical */
    width: auto;
}

/* Pegar carrusel y categorías */
.slider-productos {
    padding-top: 0 !important;
    padding-bottom: 5px !important;
    margin: 0 !important;
}

.categorias {
    margin-top: 5px !important;   /* o 0 si las quieres totalmente pegadas */
}


/* Hover solo en pantallas grandes */
@media (min-width: 769px) {
    .categoria-card:hover {
        transform: translateY(-6px);
    }

    .categoria-card:hover .submenu {
        max-height: 300px;
        padding: 15px 10px;
        opacity: 1;
    }
}

/* SUBMENÚ */
.submenu {
    background: white;
    border-radius: 0 0 18px 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

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

.submenu ul li {
    padding: 7px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e5e5;
}

.submenu ul li:last-child {
    border-bottom: none;
}

/* ACORDEÓN EN MÓVIL */
@media (max-width: 768px) {
    .categoria-card.open .submenu {
        max-height: 300px;
        padding: 15px 10px;
        opacity: 1;
    }
}



/* Menu móvil oculto */
.mobile-nav {
    display: none;
    flex-direction: column;
    background: rgba(255,255,255,0.98);
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 15px 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    z-index: 50;
}

.mobile-nav a {
    padding: 12px 20px;
    font-weight: 600;
    color: #0f1e28;
    text-decoration: none;
}

.mobile-nav a:hover {
    background: rgba(11,110,79,0.06);
    color: var(--primary);
}

/* Mostrar menú cuando esté activo */
.mobile-nav.active {
    display: flex;
}

/* Mostrar botón hamburguesa en móvil */
@media (max-width: 1059px) {
    .main-nav {
        display: none !important;
    }

    .nav-toggle {
        display: block;
        cursor: pointer;
        font-size: 28px;
        background: none;
        border: none;
    }
}



@media (max-width: 991px) {

    /* HEADER */
    .main-nav {
        display: none; 
    }

    .nav-toggle {
        display: block;
    }

    .site-header .wrap {
        padding: 10px 0;
    }

    /* HERO */
    .hero {
        min-height: 60vh;
    }

    .hero-ctas {
        flex-direction: column;
    }

    .hero-icons {
        flex-direction: column;
        gap: 12px;
    }

    /* QS SECTION */
    .qs-container {
        flex-direction: column;
        text-align: center;
    }

    .qs-image {
        width: 100%;
        height: auto;
    }

    /* SERVICES DARK (3 columnas → 1 columna) */
    .services-dark-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* WHY SECTION 2 columnas → 1 columna */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* VENDING PAGE */
    .vending-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .vending-imgbox img {
        max-width: 90%;
        margin: auto;
    }

    /* CONTACTO */
    .contact_container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .contact_details p {
        font-size: 14px;
    }

    /* FOOTER */
    .footer_container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer_social {
        justify-content: center;
    }
}


@media (min-width: 992px) and (max-width: 1200px) {

    .services-dark-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .qs-container {
        gap: 30px;
    }

    .vending-card {
        gap: 30px;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 400px) {
    .hero-text h1 {
        font-size: 6rem;
    }

    .hero-text p {
        font-size: 1.2rem;
    }
} 


/* FIX: centrar header luego de quitar enlace */
.site-header .wrap {
    justify-content: space-between !important;
    padding: 14px 20px !important;  /* MISMO padding horizontal en todas */
    gap: 0 !important;
}
.main-nav {
    gap: 22px !important; /* ajusta espacios */
}



@media (max-width: 768px) {

  /* Forzar columnas en móvil */
  .vending-card,
  .salute-card,
  .mimarket-wrap,
  .vending-wrap,
  .salute-wrap {
      flex-direction: column !important;
      text-align: center !important;
      gap: 20px !important;
  }

  /* Ajuste de tamaños */
  .vending-imgbox img,
  .salute-imgbox img,
  .mimarket-imgfull {
      max-width: 92% !important;
      height: auto !important;
      margin: auto !important;
  }

  /* Texto más legible */
  .vending-content,
  .salute-text,
  .mimarket-col {
      width: 100% !important;
      padding: 0 15px !important;
      font-size: 16px !important;
  }

  /* Títulos gigantes en páginas internas */
  .hero_vending .hero-text-Vending h1,
  .hero_salute .hero-text h1,
  .hero_mimarket .hero-mit h1 {
      font-size: 3rem !important;
      text-align: center;
  }
}

.site-header .wrap {
    justify-content: space-between !important;
}
.main-nav {
    gap: 22px !important;
}
@media (max-width: 600px) {
  .site-header .wrap {
      justify-content: space-between; /* brand a la izq, toggle a la der */
      padding: 10px 35px;             /* agrega padding horizontal */
  }

  .nav-toggle {
      margin-left: 0;                 /* quita el auto para que no empuje de más */
  }
}
/* SALUTE - VERSION MÓVIL */
@media (max-width: 768px) {
  
  /* Hero más compacto */
  .hero_salute {
    height: 70vh;  /* menos alto en móvil */
  }
  
  .hero_salute .hero-text h1 {
    font-size: 3.5rem !important;  /* ya lo tienes, pero reforzado */
  }
  
  /* Sección 1: Stack vertical, imagen arriba */
  .qs-container {
    flex-direction: column !important;
    gap: 30px;
    text-align: center;
    padding: 20px;
  }
  
  .qs-img img {
    margin-left: 0 !important;     /* quita margin izquierdo */
    max-width: 280px;
    width: 90%;
  }
  
  .qs-text h2 {
    font-size: 2rem;
    margin-bottom: 15px;
  }
  
  .qs-text p {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  /* Sección 2: Stack vertical, imagen abajo */
  .qe-grid {
    grid-template-columns: 1fr !important;  /* UNA COLUMNA */
    gap: 30px !important;
    text-align: center;
  }
  
  .qe-right img {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    display: block;
  }
  
  /* Sección beneficios: más compacta */
  .benefits {
    margin: 30px auto 0;
    padding: 0 20px;
  }
  
  .benefits li {
    font-size: 1.1rem;
    padding: 15px 0;
  }
  
  /* Secciones generales más compactas */
  .section {
    padding: 30px 15px !important;
  }
  
  .section h2 {
    font-size: 1.8rem;
  }
  
  .items li {
    font-size: 1.1rem;
    margin: 10px 0;
  }
  
  /* CTA más grande para toque fácil */
  .cta {
    padding: 40px 20px !important;
  }
  
  .btn2 {
    padding: 16px 32px;
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .benefits li {
    font-size: 0.95rem !important;
    padding: 16px 10px !important;
    display: block !important;      /* CAMBIO A BLOCK */
    gap: 0;
    text-align: left;
  }
  
  .benefits li:nth-child(1)::before { position: absolute; left: 12px; }
  .benefits li:nth-child(2)::before { position: absolute; left: 12px; }
  .benefits li:nth-child(3)::before { position: absolute; left: 12px; }
  .benefits li:nth-child(4)::before { position: absolute; left: 12px; }
  .benefits li:nth-child(5)::before { position: absolute; left: 12px; }
}

/* HEADER MIMARKET - IGUAL A OTROS */
@media (max-width: 1059px) {
  /* Ocultar nav desktop, mostrar hamburguesa */
  .main-nav {
    display: none !important;
  }
  
  .nav-toggle {
    display: block !important;
  }
  
  .site-header .wrap {
    padding: 12px 20px !important;   /* padding consistente */
    justify-content: space-between !important;
    gap: 0 !important;
  }
  
  .nav-toggle {
    margin: 0 !important;            /* sin margins extra */
  }
}

/* Hero mimarket responsive */
@media (max-width: 768px) {
  .hero_mimarket {
    height: 70vh !important;         /* más compacto */
  }
  
  .hero_mimarket .hero-mit h1 {
    font-size: 3rem !important;      /* título más pequeño */
  }
  
  .hero_mimarket .hero-miimg {
    margin-top: 0 !important;        /* quita margin raro */
  }
  
  /* Secciones flex apiladas */
  .mimarket-wrap {
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  .mimarket-col {
    text-align: center !important;
  }
  
  .mimarket-col h2 {
    font-size: 2rem !important;
  }
  
  /* Banner foto */
  .mimarket-banner img {
    margin-right: 0 !important;
    height: 40vh !important;
  }
  
  /* Beneficios más compactos */
  .mimarket-beneficios {
    padding: 60px 15px !important;
  }
  
  .mimarket-benef-list li {
    font-size: 1.1rem !important;
  }
}

/* Extra pequeño */
@media (max-width: 480px) {
  .hero_mimarket .hero-mit h1 {
    font-size: 2.5rem !important;
  }
}

/* BOTÓN WHATSAPP FLOTANTE */
.whatsapp-float {
  position: fixed;
  bottom: 25px;       /* separación inferior */
  right: 25px;        /* lo pasamos a la derecha */
  z-index: 999;
  width: 60px;
  height: 60px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border-radius: 50%;
  display: flex;              /* centrado del ícono */
  align-items: center;
  justify-content: center;

}

/* el img ocupa un poco menos para que quede centrado y con margen */
.whatsapp-float img {
  width: 60%;
  height: 60%;
}

/* BOTÓN INSTAGRAM FLOTANTE */
.ig-float {
  position: fixed;
  bottom: 100px;     /* más arriba que el de WhatsApp */
  right: 25px;       /* también a la derecha */
  z-index: 999;
  width: 60px;
  height: 60px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-float img {
  width: 60%;
  height: 60%;
}
.whatsapp-float img,
.ig-float img {
  width: 60%;
  height: 60%;
  filter: brightness(0) saturate(100%) invert(36%) sepia(97%) saturate(2090%) hue-rotate(10deg) brightness(97%) contrast(102%);
}