/* productos.css — estilo para la cartilla grande tipo mockup */

/* Page header */
.products-title {
  font-family: "Montserrat", sans-serif;
  font-size: 44px;
  color: #6b6b6b;
  text-align: left;
  margin-top: 8px;
}
.products-intro {
  color: var(--muted);
  margin-bottom: 22px;
}

/* Cartilla central */
.catalog-card {
  margin: 18px auto 36px;
  max-width: 1080px;
  padding: 36px;
  border-radius: 36px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.card-inner {
  max-width: 980px;
  margin: 0 auto;
}

/* Heading inside card */
.catalog-heading {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 1px;
  margin: 0 0 18px;
  color: #111;
}

/* images row */
.catalog-images {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}
.catalog-images figure {
  margin: 0;
  flex: 1 1 30%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.catalog-images img {
  width: 100%;
  max-width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

/* Measures line */
.catalog-measures {
  text-align: center;
  margin: 6px 0 18px;
  font-size: 22px;
  line-height: 1.6;
}
.catalog-measures .measure { color: #111; font-weight:700; margin-right:6px; }
.catalog-measures .measure-link {
  color: #aea30d;
  text-decoration: none;
  font-weight: 800;
  margin: 0 6px;
}
.catalog-measures .measure-link:hover {
  text-decoration: underline;
}

/* CTA big */
.catalog-cta { text-align:center; margin-top: 18px; }
.btn.big {
  padding: 14px 36px;
  font-size: 24px;
  border-radius: 36px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

/* small product grid below */
.product-grid { margin-top: 26px; }

/* Modal (reused style simpler than global) */
.modal[aria-hidden="true"] { display: none; }
.modal[aria-hidden="false"] {
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  inset:0;
  background: rgba(10,10,10,0.45);
  z-index:1200;
}
.modal-panel {
  width: 92%;
  max-width: 520px;
  background:#fff;
  padding:20px;
  border-radius:12px;
  position:relative;
  box-shadow:0 18px 48px rgba(0,0,0,0.25);
}
.modal-close { position:absolute; right:12px; top:8px; border:0; background:none; font-size:18px; cursor:pointer; }

/* Form elements in modal */
.modal-panel label { display:block; margin-top:10px; font-weight:600; color:var(--muted); }
.modal-panel select,
.modal-panel input[type="text"] {
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #e6e2de;
  margin-top:8px;
  font-size:15px;
}

/* WhatsApp option styles inside modal */
.wa-options { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.wa-options .btn { width:100%; display:inline-flex; justify-content:center; align-items:center; gap:10px; }

/* Responsive */
@media (max-width:1000px){
  .catalog-images img { max-width: 260px; height:160px; }
  .catalog-heading { font-size:22px; }
  .products-title { font-size:34px; text-align:center; }
  .catalog-card { padding: 24px; border-radius: 20px; }
}
@media (max-width:680px){
  .catalog-images { flex-direction:column; gap:12px; }
  .catalog-images img { width:100%; max-width:420px; height:auto; }
  .catalog-measures { font-size:18px; }
  .btn.big { font-size:20px; padding:12px 28px; }
}

/* Animaciones para imágenes de catálogo */
.catalog-images figure {
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
  margin: 0.5rem;
  /* para que la sombra no recorte la imagen al elevarse */
  will-change: transform, opacity;
}

/* La imagen ocupa todo el figure y se anima suavemente */
.catalog-images figure img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, filter 300ms ease;
  backface-visibility: hidden;
}

/* Hover: ligero scale + lift + sombra */
.catalog-images figure:hover img,
.catalog-images figure:focus-within img {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 36px rgba(8,20,40,0.18);
  filter: saturate(1.06);
}

/* Focus visible (teclado) */
.catalog-images figure:focus-within {
  outline: 3px solid rgba(11,103,255,0.15);
  border-radius: 8px;
}

/* Reveal on-scroll: estado inicial */
.reveal-img {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity 550ms ease, transform 550ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--delay, 0ms);
}

/* Cuando está en vista */
.reveal-img.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Versión "sutil y continua" opcional (por si quieres movimiento suave) */
.floaty {
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}

/* Responsive: ajustar tamaño de figure si lo necesitas */
.catalog-images figure { width: calc(33.333% - 1rem); } /* 3 en fila */
@media (max-width: 800px) {
  .catalog-images figure { width: calc(50% - 1rem); } /* 2 en fila */
}
@media (max-width: 480px) {
  .catalog-images figure { width: calc(100% - 1rem); } /* 1 en fila */
}