html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root{
  --brand: #21684b;
}

/* Utilidades de marca */
.text-brand{ color: var(--brand) !important; }
.accent-border-left{ border-left: 6px solid var(--brand); padding-left: .75rem; }
.brand-list{ list-style: disc; padding-left: 1.25rem; }
.brand-list li::marker{ color: var(--brand); }
.letter-spacing-1{ letter-spacing: .12em; }

.btn-primary{ background-color: var(--brand); border-color: var(--brand); }
.btn-outline-primary{ color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover{ background-color: var(--brand); border-color: var(--brand); color: #fff; }
.navbar .nav-link.active, .navbar .nav-link:hover{ color: var(--brand); }
a{ color: var(--brand); }
a:hover{ color: #164b36; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

/* Logo más destacado */
.logo-navbar{ height: 64px; width: auto; }
@media (max-width: 576px){
  .logo-navbar{ height: 48px; }
}

/* Hero más alto para imágenes grandes */
.hero .carousel-item img{
  width: 100%;
  height: 600px;
  object-fit: cover;
  filter: brightness(0.9);
}
@media (max-width: 768px){
  .hero .carousel-item img{ height: 380px; }
}

/* Ajustes de caption del carrusel en mobile */
@media (max-width: 768px){
  .hero .carousel-caption{
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    text-align: left;
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,.35);
    border-radius: 0.75rem;
  }
  .hero .carousel-caption h2{ font-size: 1.25rem; margin-bottom: .4rem; }
  .hero .carousel-caption p{ font-size: .95rem; margin-bottom: .6rem; }
  .hero .carousel-caption .btn{ font-size: .95rem; padding: .55rem .9rem; }
}

/* Banner de inicio si se usa image1.jpg como hero simple */
.hero-simple{
  background: url('../images/image1.jpg') center/cover no-repeat;
  min-height: 300px;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero-simple .overlay{ background: rgba(0,0,0,.35); position:absolute; inset:0; }
.hero-simple .content{ position: relative; z-index: 1; }

/* Tarjetas de productos - imágenes con aspect ratio uniforme */
.product-card-img{
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
  background-color: #fff;
  padding: 0.5rem;
}

/* Placeholder con logo marca de agua para productos sin imagen */
.product-img-placeholder{
  width: 100%;
  height: 220px;
  background: #f8f9fa url('../images/logo_web.png') center/60% no-repeat;
  display: block;
}

/* Paginación con color de marca */
.pagination .page-link{
  color: var(--brand);
  border-color: #dee2e6;
}
.pagination .page-link:hover{
  color: #fff;
  background-color: var(--brand);
  border-color: var(--brand);
}
.pagination .page-item.active .page-link{
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.pagination .page-item.disabled .page-link{
  color: #6c757d;
  background-color: #fff;
  border-color: #dee2e6;
}