@font-face {
  font-family: 'AvianoSlab';
  src: url('assets/fonts/AvianoSlabW00-Regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sentient';
  src: url('assets/fonts/Sentient-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sentient';
  src: url('assets/fonts/Sentient-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sentient';
  src: url('assets/fonts/Sentient-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 🔸 CORRECCIÓN AQUÍ */
@font-face {
  font-family: 'Audrey';
  src: url('assets/fonts/Audrey-Normal.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  --beige: #EDE9E2;
  --green: #1C3730;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #EBE3DA;
  color: #283D0F; /* mantiene contraste legible */
  font-family: 'Sentient', sans-serif;
  line-height: 1.5;
}


.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
:root{--beige:#EDE9E2;--green:#1C3730;}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--beige);color:var(--green);font-family:'Sentient',sans-serif;line-height:1.5;}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* HERO */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

/* Fondo del hero */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  background-color: #000; /* elimina los bordes grises en Chrome */
  filter: brightness(1.15) contrast(1.05) saturate(1.05);
  animation: heroZoom 12s ease-in-out infinite alternate;
}

/* Imagen de respaldo */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.15) contrast(1.05) saturate(1.05);
}

/* Filtro superior suave */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.08) 90%);
  z-index: 1;
}

/* Capa de brillo suave */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}

/* Contenido */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.8s ease-out forwards;
  animation-delay: 1s;
}

.hero-title {
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  margin-bottom: .5rem;
}

.hero-subtitle {
  font-family: 'Sentient', serif;
  color: #EEEDE8;
  margin-bottom: 2rem;
}

/* Botones */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.btn {
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .9rem 1.6rem;
  border: 2px solid #FAFAF5;
  text-decoration: none;
  color: #FAFAF5;
  transition: all .25s ease;
}

.btn-outline:hover {
  background: #FAFAF5;
  color: #111;
}

.btn-solid {
  background: #FAFAF5;
  color: #111;
}

.btn-solid:hover {
  background: transparent;
  color: #FAFAF5;
}

/* Animaciones */
@keyframes heroZoom {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.05); }
}

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


/* INTRO */
.intro{background:#DAD4C9;padding:80px 0;text-align:center}
.intro-title{font-family:'AvianoSlab',serif;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;font-size:clamp(1.4rem,3vw,2.2rem)}
.intro-subtitle{font-family:'Sentient',serif;color:#2E473F;font-size:clamp(1rem,1.6vw,1.125rem)}

/* INVENTORY */
.inventory{background:#F4F1EA;padding:80px 0;text-align:center}
.section-title{font-family:'AvianoSlab',serif;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.5rem}
.section-subtitle{font-family:'Sentient',serif;color:#2E473F;margin-bottom:2.5rem}
.carousel{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.nav{appearance:none;background:transparent;border:0;font-size:1.6rem;color:var(--green);cursor:pointer;padding:.4rem .6rem}
.track{--gap:28px;--per:4;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px}
.card{flex:0 0 calc((100% - (var(--gap)*(var(--per)-1)))/var(--per));scroll-snap-align:center;text-align:center;padding:8px}
.card .icon{width:120px;margin:0 auto 12px}
.card h3{font-family:'AvianoSlab',serif;text-transform:uppercase;font-size:1rem;margin:.25rem 0}
.price,.note{font-family:'Sentient',serif}
.note{font-size:.9rem;color:#555}
@media(max-width:1000px){.track{--per:2}}
@media(max-width:620px){.track{--per:1}.card .icon{width:100px}}

/* CLUBHOUSE */
.clubhouse{background:var(--beige);padding:120px 0 100px 0}
.clubhouse-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;background:#FAFAF5;padding:60px;border-radius:0}
.clubhouse-img img{width:100%;height:auto;display:block}
.clubhouse-text h2{font-family:'AvianoSlab',serif;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:1rem}
.clubhouse-text p{font-family:'Sentient',serif;font-size:clamp(.95rem,1.3vw,1.1rem);margin-bottom:.75rem;color:#2E473F}
@media(max-width:900px){.clubhouse-grid{grid-template-columns:1fr;gap:40px}.clubhouse-text{text-align:center}}

/* BOTÓN DOWNLOAD BROCHURE (MENÚ) */
.btn-brochure {
  color: #283D0F;
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.btn-brochure:hover {
  border: 1px solid #283D0F;
  background-color: rgba(40, 61, 15, 0.05);
}
/* CORRECCIÓN RESPONSIVA BOTÓN BROCHURE */
.btn-brochure {
  white-space: nowrap;              /* Evita que se parta en dos líneas */
  display: inline-block;
  font-size: clamp(0.85rem, 2vw, 1rem); /* Tamaño fluido del texto */
  line-height: 1;                  /* Evita altura extra */
}

/* Versión menú móvil */
@media (max-width: 768px) {
  .btn-brochure {
    display: block;
    text-align: center;
    margin: 10px auto;
    width: fit-content;            /* Mantiene tamaño natural */
    padding: 10px 20px;
  }
}

/* CORRECCIÓN DEL PUNTO ENTRE LINKS DEL MENÚ */
nav ul {
  list-style: none;        /* Quita los puntos */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2rem;               /* Mantiene espacio entre enlaces */
}

nav ul li {
  list-style-type: none;   /* Quita cualquier marcador adicional */
}

nav ul li::marker {
  content: none;           /* Quita marcadores en navegadores modernos */
}

/* Elimina cualquier símbolo separador entre enlaces del menú */
nav ul li::before,
nav ul li::after {
  content: none !important;
}

/* Si algún carácter “•” fue agregado manualmente */
nav ul li {
  list-style: none !important;
}

nav ul li a {
  text-decoration: none;
}

/* --- RESPONSIVE NAVBAR --- */
@media (max-width: 900px) {
  #nav-links {
    display: none; /* oculta los enlaces normales */
  }

  #nav-toggle {
    display: block; /* muestra el ícono hamburguesa */
  }

  .btn-brochure {
    display: inline-block;
    background: #283D0F;
    color: #fff !important;
    font-family: 'Aviano Slab', serif;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    text-decoration: none;
    margin-left: 8px;
    white-space: nowrap;
  }

  .btn-brochure:hover {
    background: #1b2e0d;
  }
}

/* BOTÓN BROCHURE — ESTILO PREMIUM SIEMPRE VISIBLE */
.btn-brochure {
  color: #ffffff !important;
  background-color: #283D0F;
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  white-space: nowrap;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
}

.btn-brochure:hover {
  background-color: #324d13;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* RESPONSIVE — mantener visible en móviles */
@media (max-width: 900px) {
  .btn-brochure {
    display: inline-block;
    margin-left: auto;
    margin-right: 8px;
    padding: 9px 18px;
  }

  #nav-toggle {
    order: 3; /* Menú hamburguesa a la derecha */
  }

  .btn-brochure {
    order: 2; /* Botón antes del ícono */
  }

  nav {
    justify-content: flex-end;
  }
}

/* ESTILO ELEGANTE PARA ENLACES DEL MENÚ */
#nav-links a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #283D0F;
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Subrayado sutil al pasar el cursor */
#nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background-color: rgba(40, 61, 15, 0.85);
  transition: width 0.3s ease;
  border-radius: 2px;
}

/* Hover — cambia tono + subrayado animado */
#nav-links a:hover {
  color: #1c2d0b;
  transform: translateY(-1px);
}

#nav-links a:hover::after {
  width: 100%;
}

/* Active — cuando haces clic o estás en esa sección */
#nav-links a:active {
  color: #0f1a05;
  transform: scale(0.97);
}

/* Versión móvil (mantiene efecto sin desbordar) */
@media (max-width: 900px) {
  #nav-links a::after {
    bottom: -2px;
  }
}

/* --- Evitar salto de línea, mantener estilo del menú --- */
#nav-links {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
  gap: 22px;
}

#nav-links::-webkit-scrollbar {
  display: none;
}

#nav-links li {
  display: inline-block;
  position: relative;
}

/* Estilo de los enlaces del menú */
#nav-links a {
  text-decoration: none;
  color: #283D0F;
  font-family: 'Aviano Slab W00 Regular', 'Aviano Slab', 'Georgia', serif;
  font-size: 1rem;
  padding-bottom: 4px;
  transition: color 0.25s ease, border-color 0.25s ease;
  border-bottom: 2px solid transparent;
}

/* Efecto al pasar el mouse */
#nav-links a:hover {
  color: #1c3730;
  border-bottom: 2px solid #283D0F;
}

/* Efecto de selección (activo) */
#nav-links a.active {
  border-bottom: 2px solid #283D0F;
  color: #283D0F;
  font-weight: 700;
}

/* ===== FOOTER ===== */
.talud-footer {
  background-color: #EDE9E2;
  color: #283D0F;
  padding: 60px 20px 20px;
  font-family: 'Sentient', sans-serif;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column h4 {
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

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

.footer-column ul li {
  margin-bottom: 8px;
}

.footer-column a {
  color: #283D0F;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: #4a5c3f;
}

.footer-logo {
  width: 120px;
  margin-bottom: 12px;
}

.footer-column p {
  font-size: 0.95rem;
  color: #283D0F;
}

.social-links a {
  display: inline-block;
  margin-right: 12px;
  font-weight: 600;
  font-family: 'AvianoSlab', serif;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin-top: 40px;
  padding-top: 16px;
  font-size: 0.85rem;
  color: #3a3a3a;
}

/* Ajuste de tamaño de texto en los enlaces del menú */
#nav-links a {
  font-size: 0.9rem; /* reduce a 0.85rem o 0.8rem si lo quieres más pequeño */
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  #nav-links a {
    font-size: 0.85rem; /* un poco más pequeño en pantallas pequeñas */
  }
}

/* Redes sociales redondas elegantes */
.social-icons {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 10px;
}

.social-icons a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #283D0F;
  color: #FAFAF5;
  border-radius: 50%;
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  background-color: #FAFAF5;
  color: #283D0F;
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 40px;
  padding-top: 16px;
  font-size: 0.85rem;
  color: #283D0F;
  font-family: 'Sentient', sans-serif;
}

.footer-bottom a {
  color: #283D0F;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.footer-bottom a:hover {
  color: #4a5c3f;
  text-decoration: underline;
}

/* --- Footer Bottom --- */
.footer-bottom {
  text-align: center;
  padding-top: 24px;
  margin-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-bottom p {
  font-size: 0.9rem;
  font-family: 'Sentient', sans-serif;
  color: #283D0F;
  margin: 0;
}

.footer-bottom a {
  color: #283D0F;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.footer-bottom a:hover {
  color: #1a300d;
  border-bottom: 1px solid rgba(40, 61, 15, 0.3);
}

/* === UNIFORME VISUAL: IMÁGENES Y BOTONES RECTOS === */
img,
button,
.btn,
.btn-solid,
.btn-outline,
input,
textarea,
.card,
.hero-buttons a,
a.btn-brochure {
  border-radius: 0 !important;
  overflow: hidden;
}

.btn:hover,
a.btn-brochure:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* === STAGED INVENTORY - Clean Transparent Hover Effect === */
.inventory .card {
  background: transparent;
  border: none;
  border-radius: 0; /* recto */
  padding: 20px 10px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: none;
  cursor: pointer;
}

.inventory .card:hover,
.inventory .card:active {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(40, 61, 15, 0.25);
  background: rgba(255, 255, 255, 0.02); /* apenas visible */
}

.inventory .card .icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.inventory .card:hover .icon img {
  transform: scale(1.06);
  filter: brightness(1.1) contrast(1.05);
}

.inventory .card h3 {
  font-family: 'AvianoSlab', serif;
  color: var(--green);
  text-transform: uppercase;
  margin: 10px 0 5px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.inventory .card:hover h3 {
  color: #283D0F;
}

.inventory .price,
.inventory .note {
  font-family: 'Sentient', serif;
  color: #2E473F;
  transition: color 0.3s ease;
}

.inventory .card:hover .price,
.inventory .card:hover .note {
  color: #1B1B1B;
}

/* === RESPONSIVE GRID SETTINGS for CAROUSEL === */
.inventory .track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

.inventory .card {
  flex: 0 0 calc((100% - (28px * 3)) / 4); /* 4 visibles */
  scroll-snap-align: center;
}

@media (max-width: 1000px) {
  .inventory .card {
    flex: 0 0 calc((100% - 28px) / 2); /* 2 visibles */
  }
}

@media (max-width: 600px) {
  .inventory .card {
    flex: 0 0 100%; /* 1 visible */
  }
}
/* === STAGED INVENTORY - Clean Transparent Hover + Press Effect === */
.inventory .card {
  background: transparent;
  border: none;
  border-radius: 0; /* líneas rectas */
  padding: 20px 10px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: none;
  cursor: pointer;
}

.inventory .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(40, 61, 15, 0.25);
  background: rgba(255, 255, 255, 0.02);
}

.inventory .card:active {
  transform: scale(0.98) translateY(-2px); /* presionado suave */
  box-shadow: 0 2px 6px rgba(40, 61, 15, 0.15);
  transition: all 0.15s ease-in-out;
}

.inventory .card .icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.inventory .card:hover .icon img {
  transform: scale(1.06);
  filter: brightness(1.1) contrast(1.05);
}

.inventory .card h3 {
  font-family: 'AvianoSlab', serif;
  color: var(--green);
  text-transform: uppercase;
  margin: 10px 0 5px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.inventory .card:hover h3 {
  color: #283D0F;
}

.inventory .price,
.inventory .note {
  font-family: 'Sentient', serif;
  color: #2E473F;
  transition: color 0.3s ease;
}

.inventory .card:hover .price,
.inventory .card:hover .note {
  color: #1B1B1B;
}

/* === RESPONSIVE GRID SETTINGS for CAROUSEL === */
.inventory .track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

.inventory .card {
  flex: 0 0 calc((100% - (28px * 3)) / 4); /* 4 visibles en escritorio */
  scroll-snap-align: center;
}

@media (max-width: 1000px) {
  .inventory .card {
    flex: 0 0 calc((100% - 28px) / 2); /* 2 visibles en tablet */
  }
}

@media (max-width: 600px) {
  .inventory .card {
    flex: 0 0 100%; /* 1 visible en móvil */
  }
}

/* ===== LOT MODAL POPUP ===== */
.lot-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

.lot-modal-content {
  background: #F9F6F1;
  padding: 0;
  max-width: 900px;
  width: 90%;
  border-radius: 0;
  position: relative;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.lot-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 32px;
  color: #283D0F;
  cursor: pointer;
  transition: 0.3s;
}

.lot-close:hover { color: #5C7C3D; }

/* Carrusel dentro del modal */
.lot-carousel {
  position: relative;
  overflow: hidden;
}

.lot-slide {
  display: none;
  width: 100%;
}

.lot-slide.active { display: block; }

.lot-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Flechas del carrusel */
.lot-prev, .lot-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 12px 18px;
  color: #fff;
  font-size: 22px;
  background: rgba(40, 61, 15, 0.7);
  border: none;
  transform: translateY(-50%);
  transition: background 0.3s;
}

.lot-prev:hover, .lot-next:hover {
  background: rgba(40, 61, 15, 0.9);
}

.lot-prev { left: 10px; }
.lot-next { right: 10px; }

/* Responsivo */
@media (max-width: 768px) {
  .lot-modal-content { width: 95%; }
  .lot-prev, .lot-next { font-size: 18px; padding: 10px; }
}

/* ===== LOT MODAL POPUP ===== */
.lot-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

.lot-modal-content {
  background: #F9F6F1;
  padding: 0;
  max-width: 900px;
  width: 90%;
  border-radius: 0;
  position: relative;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

.lot-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 32px;
  color: #283D0F;
  cursor: pointer;
  transition: 0.3s;
}

.lot-close:hover { color: #5C7C3D; }

/* Carrusel dentro del modal */
.lot-carousel {
  position: relative;
  overflow: hidden;
}

.lot-slide {
  display: none;
  width: 100%;
}

.lot-slide.active { display: block; }

.lot-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Flechas del carrusel */
.lot-prev, .lot-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 12px 18px;
  color: #fff;
  font-size: 22px;
  background: rgba(40, 61, 15, 0.7);
  border: none;
  transform: translateY(-50%);
  transition: background 0.3s;
}

.lot-prev:hover, .lot-next:hover {
  background: rgba(40, 61, 15, 0.9);
}

.lot-prev { left: 10px; }
.lot-next { right: 10px; }

/* Responsivo */
@media (max-width: 768px) {
  .lot-modal-content { width: 95%; }
  .lot-prev, .lot-next { font-size: 18px; padding: 10px; }
}

/* =====================================================
   MODAL DE LOTES CON CARRUSEL INTERNO (TALUD)
   ===================================================== */
#lotModal {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  transition: opacity 0.4s ease;
}

.lot-modal-content {
  position: relative;
  background-color: #FAFAF5;
  border-radius: 0;
  padding: 0;
  max-width: 800px;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.lot-slide {
  display: none;
  justify-content: center;
  align-items: center;
}

.lot-slide.active {
  display: flex;
  animation: fade 0.6s ease-in-out;
}

@keyframes fade {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.lot-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Botones de navegación */
.lot-prev,
.lot-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(40, 61, 15, 0.9);
  color: #FAFAF5;
  border: none;
  font-size: 1.5rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.lot-prev:hover,
.lot-next:hover {
  background-color: #1C2A0A;
}
.lot-prev { left: 15px; }
.lot-next { right: 15px; }

/* Botón cerrar */
.lot-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  color: #283D0F;
  font-size: 1.6rem;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s ease;
}
.lot-close:hover {
  color: #000;
}

/* Responsividad */
@media (max-width: 768px) {
  .lot-modal-content {
    width: 95%;
    max-width: 500px;
  }
  .lot-prev, .lot-next {
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
  }
}


/* ===========================
   MODAL DE LOTES (TALUD)
   =========================== */

.lot-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  transition: opacity 0.4s ease;
}

.lot-modal-content {
  position: relative;
  background-color: #FAFAF5;
  border-radius: 0;
  padding: 0;
  max-width: 850px;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lot-carousel {
  width: 100%;
  position: relative;
}

.lot-slide {
  display: none;
  justify-content: center;
  align-items: center;
}

.lot-slide.active {
  display: flex;
  animation: fadeIn 0.5s ease;
}

.lot-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* Botones de navegación */
.lot-prev, .lot-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(40, 61, 15, 0.9);
  color: #FAFAF5;
  border: none;
  font-size: 1.4rem;
  padding: 0.6rem 1rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lot-prev:hover, .lot-next:hover {
  background: #1C2A0A;
}

.lot-prev { left: 15px; }
.lot-next { right: 15px; }

/* Botón de cierre */
.lot-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #283D0F;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.lot-close:hover {
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  .lot-modal-content {
    max-width: 95%;
  }
  .lot-prev, .lot-next {
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
  }
}

/* --- INVENTORY: Carrusel responsivo con hover y proporciones correctas --- */

.inventory .carousel {
  position: relative;
  overflow: hidden;
}

.inventory .track {
  --gap: 28px;
  --per: 4; /* 4 visibles en escritorio */
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none; /* Oculta scrollbar Firefox */
}
.inventory .track::-webkit-scrollbar { display: none; } /* Oculta scrollbar Chrome */

/* Tarjetas de lote */
.inventory .card {
  flex: 0 0 calc((100% - (var(--gap) * (var(--per) - 1))) / var(--per));
  scroll-snap-align: center;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.inventory .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

/* Imagen del lote — evita deformaciones */
.inventory .card .icon {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  display: block;
  margin: 0 auto;
  object-fit: contain; /* mantiene proporciones */
  transition: transform .3s ease, filter .3s ease;
}
.inventory .card:hover .icon {
  transform: scale(1.05);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.15));
}

/* === Flechas minimalistas TALUD con separación lateral === */
.inventory .carousel {
  position: relative;
  overflow: visible !important; /* garantiza que las flechas no se corten */
}

/* === Flechas centradas debajo del carrusel (estilo TALUD) === */
.inventory .nav-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* espacio entre las flechas */
  margin-top: 40px; /* aire entre las imágenes y las flechas */
  margin-bottom: 10px; /* aire respecto al texto o siguiente sección */
  width: 100%;
  position: relative;
  z-index: 10;
}

/* Diseño visual fiel a TALUD */
.inventory .nav {
  appearance: none;
  background: none;
  color: #283D0F; /* verde TALUD */
  border: none;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Hover elegante */
.inventory .nav:hover {
  color: #1E2E0D;
  transform: scale(1.15);
}

/* Al hacer clic */
.inventory .nav:active {
  transform: scale(0.9);
}

/* === Responsivo === */
@media (max-width: 1024px) {
  .inventory .nav-controls {
    gap: 40px;
    margin-top: 30px;
  }
  .inventory .nav {
    font-size: 40px;
  }
}

@media (max-width: 600px) {
  .inventory .nav-controls {
    gap: 32px;
    margin-top: 28px;
  }
  .inventory .nav {
    font-size: 34px;
  }
}


/* --- Responsivo 4–2–1 --- */
@media (max-width: 1000px) {
  .inventory .track { --per: 2; }
  .inventory .card .icon { max-height: 240px; }
}
@media (max-width: 600px) {
  .inventory .track { --per: 1; }
  .inventory .card .icon { max-height: 220px; }
}

/* (opcional) Evita doble línea en títulos del menú si lo agregaste */
#nav-links, #nav-links a {
  white-space: nowrap;
}

/* ===== Estilo de enlaces en cards del INVENTORY ===== */
.inventory .card a {
  text-decoration: none;        /* Quita subrayado */
  color: inherit;              /* Usa el color del texto original */
}

.inventory .card a:hover {
  text-decoration: none;        /* Evita subrayado al pasar el mouse */
  color: #283D0F;              /* Mantiene el color corporativo TALUD */
}

.inventory .card a:visited {
  color: inherit;              /* Evita color morado tras visitarlo */
}

.inventory .card a h3,
.inventory .card a p {
  text-decoration: none;        /* Asegura que ningún texto se subraye */
  color: #283D0F;              /* Texto uniforme y elegante */
}

.inventory .card a:hover h3 {
  color: #1E2E0D;              /* Tono más oscuro al pasar el mouse */
  transform: scale(1.02);
  transition: color 0.3s ease, transform 0.2s ease;
}


/* HERO con video */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FAFAF5;
  text-align: center;
}

/* Fondo del hero */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Video de fondo */
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(1.1);
}


/* Imagen fallback si no hay video */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenido encima del video */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

/* Ajustes de texto */
.hero-title {
  font-family: 'AvianoSlab', serif;
  font-size: 2.8rem;
  letter-spacing: 0.05em;
  color: #FAFAF5;
}

.hero-subtitle {
  font-family: 'Sentient', serif;
  font-size: 1.1rem;
  margin-top: 1rem;
  color: #FAFAF5;
}

/* Botones */
.hero-buttons {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn {
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.btn-outline {
  border: 1.5px solid #FAFAF5;
  color: #FAFAF5;
}

.btn-outline:hover {
  background-color: #FAFAF5;
  color: #283D0F;
}

.btn-solid {
  background-color: #FAFAF5;
  color: #FAFAF5;
}

.btn-solid:hover {
  background-color: #8B2E10;
}

/* === BOTONES DEL HERO TALUD === */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.btn {
  font-family: 'AvianoSlab', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 32px;
  border-radius: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  border: 2px solid transparent;
}

/* === BOTÓN OUTLINE === */
.btn-outline {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.btn-outline:hover {
  background-color: #fff;
  color: #0e0e0e;
}

/* === BOTÓN SOLID === */
.btn-solid {
  background-color: #FCFCFC; /* verde TALUD */
  color: #283D0F;
  border: 2px solid #FCFCFC;
}

.btn-solid:hover {
  background-color: transparent;
  color: #FCFCFC;
  border-color: #fff;
}

/* === Adaptación para móviles === */
@media (max-width: 768px) {
  .hero-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .btn {
    width: 80%;
    margin: 0 auto;
  }
}

/* === BOTÓN BROCHURE RESPONSIVO === */
.btn-brochure {
  display: inline-block;
  background-color: #2f3b1f; /* verde oscuro TALUD */
  color: #fff;
  font-family: 'Sentient-Regular', serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.6rem 1.3rem;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  z-index: 1000; /* asegura que quede encima del video o del menú */
}

.btn-brochure:hover {
  background-color: #3d5027;
  transform: translateY(-2px);
}

/* === Ajustes en pantallas medianas === */
@media (max-width: 1024px) {
  .btn-brochure {
    font-size: 0.9rem;
    padding: 0.55rem 1.1rem;
  }
}

/* === En móviles grandes === */
@media (max-width: 768px) {
  .btn-brochure {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    background-color: #2f3b1f;
    border-radius: 4px;
  }
}

/* === En móviles pequeños (iPhone SE, Galaxy Mini, etc.) === */
@media (max-width: 480px) {
  .btn-brochure {
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
  }
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem;
  flex-wrap: nowrap;
}

/* === Evita que el botón BROCHURE se deforme === */
.btn-brochure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #283D0F;
  color: #FAFAF5;
  text-transform: uppercase;
  font-family: 'Sentient-Regular',serif;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap; /* ✅ impide que el texto se parta en dos líneas */
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 110px; /* ✅ asegura un ancho mínimo constante */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-brochure:hover {
  background-color: #1E2A13;
  transform: translateY(-2px);
}

/* Cuando el menú se vuelve móvil */
@media (max-width: 768px) {
  .btn-brochure {
    font-size: 0.85rem;
    padding: 10px 16px;
    min-width: 100px;
  }
}