/* ==========================
   Navbar “Comercializadora Muñoz”
   ========================== */

/* Colores de marca */
:root {
  --clr-accent:  #c7ac7d;  /* beige / café claro */
  --clr-dark:    #203745;  /* azul-verdoso oscuro */
  --clr-brand:   #bdac79;  /* dorado suave del logotipo */
}
@media (max-width:576px){
  #itemsTable thead { display: none; }
  #itemsTable, #itemsTable tbody, #itemsTable tr, #itemsTable td { display: block; width: 100%; }
  #itemsTable tr { margin-bottom: 1rem; border: 1px solid #dee2e6; border-radius: .5rem; padding: .75rem; background: #fff; }
  #itemsTable td { text-align: right; padding-left: 50%; position: relative; border: none; }
  #itemsTable td::before { content: attr(data-label); position: absolute; left: .75rem; top:0; bottom:0; width: calc(50% - .75rem); text-align: left; font-weight: 600; color: #6c757d; }
  #itemsTable .btn { width: 100%; margin-top: .5rem; }
  #itemsTable.scrollable { max-height: 60vh; overflow-y: auto; }
}
.thumb-variant { width:80px; height:80px; object-fit:cover; border:2px solid transparent; border-radius:.25rem; cursor:pointer; }
.thumb-variant.active { border-color:#0d6efd; }
.thick-btn { min-width:72px; }
#previewCard {
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
#carouselProd .carousel-item {
  border-radius: .5rem;
  overflow: hidden;
}
#carouselProd .carousel-item img {
  transition: transform .7s ease;
}
#carouselProd .carousel-item:hover img {
  transform: scale(1.03);
}
/* Carousel height en pantallas grandes */
.carousel-img {
object-fit: cover;
height: 650px;
transition: transform .7s ease;
}

/* Carousel height en móvil */
@media (max-width: 576px) {
.carousel-img {
height: 400px;
}
}


/* Contenedor de la navbar */
.navbar-munoz {
  background: var(--clr-dark);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background .3s ease, box-shadow .3s ease;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: .03rem;
}

/* Sombra al hacer scroll */
.navbar-munoz.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Marca (logo + texto) */
.navbar-munoz .navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--clr-brand);
  font-weight: 700;
}
.navbar-munoz .navbar-brand img {
  width: 70px;
  height: auto;
}

/* Texto de la marca, escalable */
.navbar-munoz .navbar-brand .fs-6 { font-size: .875rem !important; }
@media (min-width: 576px)  { .navbar-munoz .navbar-brand .fs-sm-5  { font-size: 1.25rem !important; } }
@media (min-width: 768px)  { .navbar-munoz .navbar-brand .fs-md-4  { font-size: 1.5rem  !important; } }
@media (min-width: 992px)  { .navbar-munoz .navbar-brand .fs-lg-3  { font-size: 1.75rem !important; } }
@media (min-width: 1200px) { .navbar-munoz .navbar-brand .fs-xl-2  { font-size: 2rem    !important; } }

/* Enlaces de la navbar */
.navbar-munoz .nav-link {
  color: var(--clr-accent) !important;
  position: relative;
  padding: .4rem .9rem;
  transition: color .25s ease;
}

/* Subrayado animado */
.navbar-munoz .nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: var(--clr-accent);
  transition: width .25s ease;
}
.navbar-munoz .nav-link:hover,
.navbar-munoz .nav-link:focus {
  color: #fff !important;
}
.navbar-munoz .nav-link:hover::after,
.navbar-munoz .nav-link.active::after {
  width: 100%;
}

/* Toggler (hamburger) */
.navbar-munoz .navbar-toggler {
  border-color: var(--clr-accent);
}
.navbar-munoz .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c7ac7d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ===========================
   Estilos Mejora – Calculadora
   =========================== */

/* Variables de color */
:root {
  --clr-accent: #c7ac7d;
  --clr-dark:   #203745;
  --clr-light:  #f5f5f5;
  --clr-text:   #333333;
}

/* ===== Título de invitación ===== */
section.text-center.my-5 {
  padding: 4rem 1rem;
  background: linear-gradient(135deg, rgba(199,172,125,0.1), rgba(32,55,69,0.05));
  border-radius: 0.5rem;
  margin-bottom: 3rem;
}
section.text-center.my-5 h1 {
  color: var(--clr-dark);
  font-family: 'Poppins', sans-serif;
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
section.text-center.my-5 p.lead {
  color: var(--clr-text);
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ===== Preview / Carrusel ===== */
#previewCard {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
}
#previewCard .carousel-inner {
  border-bottom: 4px solid var(--clr-accent);
}
#previewCard .carousel-item img,
#previewCard .carousel-item .d-flex {
  height: 450px;
  transition: transform 0.5s ease;
}
#previewCard .carousel-item.active img {
  transform: scale(1.02);
}
@media (max-width: 576px) {
  #previewCard .carousel-item img,
  #previewCard .carousel-item .d-flex {
    height: 400px;
  }
}
#previewCard #prevTitle {
  font-weight: 600;
  color: var(--clr-dark);
}
#previewCard #prevVariantName {
  font-style: italic;
  color: var(--clr-accent);
}
#previewCard #prevDesc {
  color: #555;
}
#previewCard .thumb-variant {
  width: 48px;
  height: 48px;
}
#previewCard .thick-btn {
  border-radius: 2rem;
}

/* ===== Selector & Botones ===== */
.row.g-3.align-items-end.mb-4 .form-label {
  font-weight: 500;
  color: var(--clr-dark);
}
#addRowBtn, #calcAllBtn {
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  font-weight: 500;
}
#addRowBtn {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
}
#addRowBtn:hover {
  background-color: var(--clr-dark);
  border-color: var(--clr-dark);
}
#calcAllBtn {
  background-color: var(--clr-dark);
  border-color: var(--clr-dark);
}
#calcAllBtn:hover {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
}

/* ===== Tabla de ítems ===== */
#itemsTable {
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
#itemsTable thead th {
  background-color: var(--clr-dark);
  color: #fff;
  border: none;
}
#itemsTable tbody tr:nth-child(odd) {
  background-color: var(--clr-light);
}
#itemsTable tbody tr:hover {
  background-color: rgba(199,172,125,0.1);
}
#itemsTable .form-control,
#itemsTable .form-select {
  border-radius: 0.25rem;
}
#itemsTable .btn-sm {
  padding: 0.25rem 0.5rem;
}

/* ===== Resultados & Enlaces ===== */
#breakdownBox {
  border-radius: 0.5rem;
  background-color: rgba(199,172,125,0.1);
  color: var(--clr-dark);
  font-weight: 500;
}
#pdfBtn, #waBtn {
  border-radius: 2rem;
  font-weight: 500;
}
#pdfBtn {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
#pdfBtn:hover {
  background-color: #ec971f;
  border-color: #ec971f;
}
#waBtn {
  background-color: #25d366;
  border-color: #25d366;
}
#waBtn:hover {
  background-color: #1ebe5a;
  border-color: #1ebe5a;
}

/* ===== Sección “Quiénes Somos” ===== */
section#quienes-somos {
  background-color: #fff;
  padding: 5rem 1rem;
}
section#quienes-somos h2 {
  color: var(--clr-dark);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
section#quienes-somos p.lead {
  color: #555;
  font-size: 1.125rem;
  margin-bottom: 3rem;
}
section#quienes-somos .row.align-items-center img {
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
section#quienes-somos h3 {
  color: var(--clr-accent);
  font-weight: 600;
  margin-bottom: 1rem;
}