:root{
    --ml-yellow:#FFE600;
  --ml-green:#2ABF6F; /* nuevo verde */
    --ml-blue:#3483FA;
    --muted:#6c757d;
    --text:#0b1720;
    --shadow:0 10px 30px rgba(2,6,23,0.04);
    --bg:#f6f8fb;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  }

  body{ background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; margin:0; padding:0; font-family:inherit; }
  .ml-header{ background:#fff; border-bottom:1px solid rgba(13,17,23,0.04) }
  .brand-title{ font-weight:800; color:var(--ml-blue) }
  .container-max{ max-width:1100px; margin:0 auto; padding:18px }

  .product-hero{ background:transparent; margin-top:18px }

  /* Contenedor del carrusel: usamos aspect-ratio en lugar de height fijo -> se escala según ancho */
  .carousel-inner {
    background: #fafafa;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* aspect-ratio determina la altura relativa al ancho */
    aspect-ratio: 16 / 11; /* puedes ajustar 16/11, 4/3, 3/2 según prefieras */
    max-height: 720px;     /* límite razonable para pantallas grandes */
    min-height: 240px;     /* evita que sea demasiado pequeño en pantallas estrechas */
    display: block;
  }

  /* mantener compatibilidad con bootstrap - ocultar no activos */
  .carousel-item { display: none; position: relative; height: 100%; }
  .carousel-item.active,
  .carousel-item-next,
  .carousel-item-prev { display: block; }

  /* caja que centra la imagen */
  .carousel-media {
    width: 100%;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow: hidden;
    padding: 12px;           /* algo de espacio para thumbnails visualmente agradables */
    box-sizing: border-box;
  }

  /* Imagen: JS decide width/height inline. Aquí garantizamos objeto y que no salga del contenedor */
  .carousel-img {
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 10px;
    transition: transform .18s ease;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    background: #fafafa;
  }

  /* controles: sobre el contenido, mejor visibilidad y no cortan layout */
  .carousel-control-prev,
  .carousel-control-next {
    width: 54px;
    height: 54px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.95;
    z-index: 5;
  }
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) brightness(0) drop-shadow(0 2px 6px rgba(0,0,0,0.12));
    border-radius: 50%;
    padding: 6px;
}
  /* Thumbnails */
  .thumb-small {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e6e9ee;
    padding: 6px;
    box-sizing: border-box;
    display: inline-block;
  }
  .thumb-small.active { outline: 3px solid var(--ml-blue); }

  .panel-right { background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
  .panel-section { padding:18px; }
  .panel-section + .panel-section { border-top:1px solid #f1f3f5; }
  .panel-header .muted{ color:var(--muted); font-size:.95rem; margin-bottom:6px; }
  .p-title{ font-size:1.15rem; font-weight:700; margin:0 0 6px }
  .p-price{ font-size:1.6rem; font-weight:800; color:var(--ml-green); margin-bottom:6px }
  .stock{ color:var(--muted); font-size:.95rem; }
  .panel-desc p{ margin:0; color:#333; line-height:1.45; }

  @media(min-width:1200px){
    .carousel-inner { aspect-ratio: 16 / 10; } /* un poco más "ancho" en pantallas grandes */
  }
  @media(max-width:767px){
    .carousel-inner{ aspect-ratio: 4 / 3; min-height:200px }
    .thumb-small{ width:56px; height:56px; padding:4px }
    .panel-section{ padding:14px }
  }

  /* fallback placeholder svgs */
  .carousel-inner img[src$=".svg"]{ max-height: 70%; }


/* ===== FOOTER PROFESIONAL ===== */

.footer-pro {
  background: #0b0f14;
  color: #f1f1f1;
  padding: 40px 20px 20px;
  margin-top: 40px;
  border-top: 4px solid #1a73e8;
  font-family: 'Inter', sans-serif;
}

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

.footer-logo {
  width: 160px;
  margin-bottom: 10px;
}

.footer-desc {
  font-size: 0.9rem;
  color: #bbbbbb;
  line-height: 1.4;
}

.footer-section h4 {
  font-size: 1rem;
  margin-bottom: 12px;
  color: #ffffff;
  font-weight: 600;
  border-left: 4px solid #1a73e8;
  padding-left: 8px;
}

.footer-section p,
.footer-section a {
  font-size: 0.9rem;
  color: #d9d9d9;
}

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

.footer-links li {
  margin-bottom: 7px;
}

.footer-links a {
  color: #d9d9d9;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #1a73e8;
}

/* WhatsApp links */
.wa-link {
  color: #25D366;
  font-weight: 600;
  text-decoration: none;
}

.wa-link:hover {
  text-decoration: underline;
}

/* Parte inferior */
.footer-bottom {
  text-align: center;
  margin-top: 25px;
  color: #aaaaaa;
  font-size: 0.8rem;
  padding-top: 10px;
  border-top: 1px solid #222;
}