/* --- RESET Y VARIABLES GLOBALES --- */ :root {
      --bg-black: #0a0a0a;
      --bg-dark-grey: #1a1a1a;
      --bg-beige: #b09b83; /* Color similar al fondo de destacados */
      --text-white: #ffffff;
      --text-gold: #d4af37;
      --text-grey: #e0e0e0;
      --accent-green: #6b8e23;
      --accent-red: #c0392b;
      --font-main: 'Montserrat', sans-serif;
      --font-serif: 'Playfair Display', serif;
 }
 html {
      scroll-behavior: smooth;
 }
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
 }
 body {
      font-family: var(--font-main);
      color: var(--text-white);
      background-color: var(--bg-black);
      line-height: 1.6;
 }
 a {
      text-decoration: none;
      color: inherit;
      transition: 0.3s;
 }
 ul {
      list-style: none;
 }
 img {
      max-width: 100%;
      display: block;
      object-fit: cover;
 }
 /* Estilos generales para iconos SVG */
 svg {
      fill: currentColor;
      display: inline-block;
      vertical-align: middle;
 }
 .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
 }
 .btn {
      display: inline-block;
      padding: 12px 30px;
      background-color: transparent;
      border: 2px solid var(--text-white);
      color: var(--text-white);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      letter-spacing: 1px;
 }
 .btn:hover {
      background-color: var(--text-white);
      color: var(--bg-black);
 }
 .btn-gold {
      background-color: #a68b73;
      border-color: #a68b73;
 }
 .btn-gold:hover {
      background-color: #8c735d;
      color: white;
 }
 /* --- HEADER --- */
 header {
      background-color: var(--bg-black);
      padding: 20px 0 40px;
      text-align: center;
 }
 .nav-bar {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 40px;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1px;
 }
 .nav-bar a:hover {
      color: var(--text-gold);
 }
 .logo-container {
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
 }
 /* --- ESTILOS DEL LOGO IMAGEN --- */
 .logo {
      /* Dimensiones base */
      width: 350px;
      height: 350px;
      /* Marco circular */
      /* border: 1px solid white;*/
      border-radius: 50%;
      /* Centrado de imagen */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: black;
      padding: 10px;
 }
 .logoMayorista {
      /* Dimensiones base */
      width: 250px;
      height: 250px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: black; /* Fondo negro por si la imagen es transparente */
      padding: 10px; /* Margen interno para que el logo respire */
 }
 .logoPie {
      /* Dimensiones base */
      width: 150px;
      height: 150px;
      /* Marco circular */
      /* border: 1px solid white;*/
      border-radius: 50%;
      /* Centrado de imagen */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-color: black; /* Fondo negro por si la imagen es transparente */
      padding: 10px; /* Margen interno para que el logo respire */
 }
 .logo img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* La imagen se ajusta sin cortarse */
 }
 .header-subtitle {
      text-transform: uppercase;
      font-size: 1.1rem;
      letter-spacing: 1px;
      margin-top: 10px;
 }
 /* --- HISTORIA (Blanco) --- */
 .historia-content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 50px;
      min-height: 500px; /* Asegura espacio para el collage */
 }
 .historia-imgs {
      flex: 1;
      min-width: 300px;
      position: relative;
      height: 450px; /* Altura fija para el contenedor del collage */
 }
 /* --- NUEVO COLLAGE ANIMADO --- */
 .collage-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
 }
 .collage-img {
      position: absolute;
      width: 48%; /* Casi la mitad del ancho */
      height: 48%; /* Casi la mitad del alto */
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* Animación suave */
      opacity: 0; /* Empieza invisible */
 }
 /* Posiciones iniciales (antes del scroll) - "Exploded view" */
 .img-1 {
      top: 0;
      left: 0;
      transform: translate(-50px, -50px);
 }
 .img-2 {
      top: 0;
      right: 0;
      transform: translate(50px, -50px);
 }
 .img-3 {
      bottom: 0;
      left: 0;
      transform: translate(-50px, 50px);
 }
 .img-4 {
      bottom: 0;
      right: 0;
      transform: translate(50px, 50px);
 }
 /* Imagen Central (5) */
 .img-5-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 55%; /* Un poco más grande */
      height: 55%;
      z-index: 10; /* Encima de todas */
      border: 5px solid white;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      transform: translate(-50%, -50%) scale(0.8); /* Empieza pequeña */
      opacity: 0;
      transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
      transition-delay: 0.2s; /* Se anima un poco después */
 }
 /* --- ESTADO ACTIVO (Cuando se ve en pantalla) --- */
 .historia.in-view .collage-img {
      opacity: 1;
      transform: translate(0, 0); /* Vuelve a su lugar original */
 }
 .historia.in-view .img-5-center {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1); /* Escala normal y centrada */
 }
 /* Texto y Decoraciones */
 .historia-text {
      flex: 1;
      min-width: 300px;
      text-align: center;
      padding: 0 20px;
      position: relative;
 }
 /* Contenedores de Imágenes Decorativas (Amarillo) */
 .deco-container {
      width: 120px;
      height: 120px;
      position: absolute;
 }
 .deco-container img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.8;
 }
 .deco-top-left {
      top: -60px;
      left: 0;
 }
 .deco-bottom-left {
      bottom: -40px;
      left: 20px;
 }
 .deco-bottom-right {
      bottom: -40px;
      right: 20px;
 }
 .historia-description {
      /* Aquí aplicamos el padding para "apretar" el texto hacia el centro */
      padding: 60px 40px;
      position: relative;
      z-index: 2; /* Aseguramos que el texto esté por encima si algo se cruza */
 }
 .historia-text h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
      font-weight: 400;
 }
 .historia-text h3 {
      font-family: var(--font-serif);
      font-size: 2rem;
      margin-bottom: 20px;
      font-weight: 400;
 }
 .historia-text p {
      font-size: 0.95rem;
      color: #555;
      max-width: 500px;
      margin: 0 auto;
      position: relative;
      z-index: 2; /* Texto por encima de decoraciones si se solapan */
 }
 .historia {
      background-color: white;
      color: var(--bg-black);
      padding: 80px 0;
      position: relative;
 }
 .historia-content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 50px;
 }
 /* .historia-imgs {
      flex: 1;
      min-width: 300px;
      position: relative;
 }*/
 /* Collage effect simulation */
 /*.collage-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
 }
 .collage-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
 }
 .collage-img {
      position: absolute;
      width: 48%; 
      height: 48%; 
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); 
      opacity: 0; 
 }
 .historia.in-view .collage-img {
      opacity: 1;
      transform: translate(0, 0); 
 }
 .historia.in-view .img-5-center {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1); 
 }*/
 /* Posiciones iniciales (antes del scroll) - "Exploded view" */
 /*.img-1 {
      top: 0;
      left: 0;
      transform: translate(-50px, -50px);
 }
 .img-2 {
      top: 0;
      right: 0;
      transform: translate(50px, -50px);
 }
 .img-3 {
      bottom: 0;
      left: 0;
      transform: translate(-50px, 50px);
 }
 .img-4 {
      bottom: 0;
      right: 0;
      transform: translate(50px, 50px);
 }*/
 /* Imagen Central (5) */
 /*.img-5-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 55%; 
      height: 55%;
      z-index: 10; 
      border: 5px solid white;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      transform: translate(-50%, -50%) scale(0.8); 
      opacity: 0;
      transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
      transition-delay: 0.2s; 
 }*/
 /*.collage-container img {
      width: 100%;
      height: 200px;
      border-radius: 4px;
 }*/
 /*.deco-container {
      width: 120px;
      height: 120px;
      position: absolute;
 }
 .deco-container img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.8;
 }
 .deco-top-left {
      top: -60px;
      left: 0;
 }
 .deco-bottom-left {
      bottom: -40px;
      left: 20px;
 }
 .deco-bottom-right {
      bottom: -40px;
      right: 20px;
 }
 .historia-text {
      flex: 1;
      min-width: 300px;
      text-align: center;
      padding: 0 20px;
 }
 .historia-text h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
      font-weight: 400;
 }
 .historia-text h3 {
      font-family: var(--font-serif);
      font-size: 2rem;
      margin-bottom: 20px;
      font-weight: 400;
 }
 .historia-text p {
      font-size: 0.95rem;
      color: #555;
      max-width: 500px;
      margin: 0 auto;
 }
 .deco-plant {
      max-width: 100px;
      margin: 20px auto;
      opacity: 0.7;
 }*/
 /* --- OFERTAS (Negro) --- */
 .ofertas {
      background-color: var(--bg-black);
      padding: 60px 0;
      text-align: center;
 }
 .ofertas-title {
      text-transform: uppercase;
      margin-bottom: 40px;
      letter-spacing: 1px;
 }
 .ofertas-grid {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
 }
 .oferta-card {
      background-color: #dcdcdc; /* Grisáceo claro/blanco sucio */
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      /* Estilo Polaroid */
      border: 15px solid white;
 }
 .oferta-inner {
      background-color: white;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
 }
 .oferta-text {
      font-size: 2.5rem;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--bg-black);
      letter-spacing: -1px;
      font-family: 'Arial Narrow', sans-serif; /* Condensed feel */
 }
 /* separador vegetal */
 /*.separator-img {
      width: 100%;
      height: 80px;
      object-fit: contain;
      background-color: white;
      padding: 10px 0;
 }*/
 /* --- SEPARADOR (Nueva Sección) --- */
 .separator-strip {
      background-color: white;
      padding: 30px 0;
      overflow: hidden;
 }
 .separator-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
 }
 .separator-text {
      color: black;
      font-weight: normal;
      text-align: center;
      font-size: 1.5rem;
      flex: 1; /* El texto ocupa todo el espacio posible en el centro */
      padding: 0 10px;
 }
 .separator-img-box {
      /* Ancho fijo para las imágenes laterales */
      flex: 0 0 200px;
      max-width: 200px;
 }
 .separator-img-box img {
      width: 100%;
      height: auto;
      display: block;
 }
 /* --- DESTACADOS (Grid) --- */
 .destacados {
      background-color: var(--bg-beige);
      padding: 60px 0;
      text-align: center;
 }
 .section-title-box {
      background-color: var(--bg-black);
      color: white;
      display: inline-block;
      padding: 10px 30px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 40px;
      border: 2px solid white; /* Borde blanco agregado */
      transition: all 0.3s ease; /* Transición suave */
 }
 .section-title-box:hover {
      background-color: #8c735d; /* Dorado más oscuro al pasar el mouse */
      border-color: white; /* El borde se mantiene blanco */
      color: white;
 }
 /*.section-title-box {
      background-color: var(--bg-black);
      color: white;
      display: inline-block;
      padding: 10px 30px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 40px;
 }*/
 .grid-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 15px;
      margin-bottom: 40px;
 }
 .grid-item {
      position: relative;
      height: 250px;
      overflow: hidden;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0.1);
 }
 .grid-item img {
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease;
 }
 .grid-item:hover img {
      transform: scale(1.1);
 }
 .grid-label {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(255, 255, 255, 0.7);
      /*background-color: rgba(176, 155, 131, 0.7);*/
      color: var(--bg-black);
      padding: 5px 20px;
      text-transform: uppercase;
      font-weight: 800;
      font-size: 1.1rem;
      width: 80%;
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(2px);
 }
 /* --- BENEFICIOS --- */
 .beneficios {
      background-color: white;
      color: var(--bg-black);
      padding: 60px 0;
      text-align: center;
 }
 .beneficios p {
      font-size: 1.2rem;
      margin-bottom: 40px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
 }
 .badges-container {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
 }
 .badge {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      /* La magia del giro */
      transition: transform 0.8s ease;
 }
 .badge:hover {
      transform: rotateY(360deg);
 }
 .badge img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 50%;
 }
 /* --- MAYORISTA --- */
 .mayorista {
      background-color: black;
      padding: 80px 0;
      display: flex;
      align-items: center;
      justify-content: center;
 }
 .mayorista-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 50px;
      max-width: 900px;
 }
 .mayorista-logo {
      text-align: center;
 }
 .mayorista-info {
      max-width: 500px;
      text-align: left;
 }
 @media (max-width: 768px) {
      .mayorista-info {
           text-align: center;
      }
 }
 .mayorista-info h3 {
      font-size: 1.5rem;
      margin-bottom: 15px;
 }
 .mayorista-info p {
      margin-bottom: 25px;
      font-size: 0.95rem;
      color: #ccc;
 }
 /* --- FOOTER / UBICACIÓN --- */
 .footer-visual {
      height: 400px;
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8)), url("../images/Ubicacion.jpg");
      background-size: cover;
      background-position: center;
      background-attachment: fixed; /* Efecto Parallax agregado aquí */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
 }
 .bowl-img {
      position: absolute;
      bottom: -50px;
      right: 50px;
      width: 200px;
      border-radius: 50%;
      z-index: 2;
 }
 .location-badge {
      background-color: var(--bg-black);
      color: white;
      padding: 10px 20px;
      text-transform: uppercase;
      font-weight: 700;
      border: 1px solid white;
 }
 .footer-info {
      background-color: black;
      padding: 50px 0 20px;
      border-top: 1px solid #333;
 }
 .footer-cols {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 30px;
      text-align: center;
      margin-bottom: 40px;
 }
 .footer-col {
      flex: 1;
      min-width: 200px;
 }
 .footer-col h4 {
      font-size: 1.1rem;
      margin-bottom: 15px;
      font-weight: 400;
 }
 .footer-col p {
      font-size: 0.9rem;
      color: #bbb;
      margin-bottom: 5px;
 }
 .social-icons a {
      margin: 0 10px;
      display: inline-block;
      color: white; /* Color base */
 }
 .social-icons a:hover {
      color: var(--text-gold); /* Mismo color dorado/mayonesa del menú */
 }
 .social-icons svg {
      width: 1.2rem;
      height: 1.2rem;
      fill: currentColor; /* Hereda el color del texto (blanco -> dorado) */
      transition: 0.3s;
 }
 .footer-contact-link {
      color: #bbb;
      text-decoration: none;
      transition: color 0.3s;
 }
 .footer-contact-link:hover {
      color: var(--text-gold);
 }
 /*.social-icons a {
    margin: 0 10px;
    display: inline-block;
}

.social-icons svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: white;
    transition: 0.3s;
}
.social-icons a:hover svg {
    fill: var(--text-gold);
}*/
 /* Map placeholder simulation at bottom */
 .map-strip {
      height: 352px;
      width: 100%;
      /* background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Map_of_Salta_Province%2C_Argentina.svg/1200px-Map_of_Salta_Province%2C_Argentina.svg.png'); */
      background-size: cover;
      background-position: center;
      /*opacity: 0.5;*/
 }
 /* --- RESPONSIVE --- */
 @media (max-width: 768px) {
      .nav-bar {
           flex-direction: column;
           gap: 10px;
           margin-bottom: 20px;
      }
      .header-subtitle {
           font-size: 0.9rem;
           padding: 0 10px;
      }
      .historia-content {
           flex-direction: column-reverse;
      }
      .footer-cols {
           flex-direction: column;
      }
      .grid-label {
           font-size: 0.9rem;
      }
 }