/*
 * Catálogo de equipos (tarjetas, filtros, carrusel y detalle "Ver +").
 * Se carga en cualquier página que muestre productos (Hogar, Empresas…). Todo va dentro de .eco-cat.
 */

/* =========================================================
   Catálogo de equipos con carrusel estilo Apple (Hogar 1256).
   Tarjetas generadas desde WooCommerce por (eco_catalogo) (inc/ecopure-catalogo.php).
   Boceto aprobado: ecopure-migration/bocetos/hogar-catalogo.html
   ========================================================= */
.eco-cat {
  --pc-w: 372px;
  --pc-h: 640px; /* límite pedido: 672px */
  --cat-gutter: max(16px, calc((100vw - 1280px) / 2));
  overflow-x: clip;
}

/* Encabezado: ayuda para indecisos a la derecha */
.eco-cat .eco-cat-assist {
  display: flex;
  justify-content: flex-end;
}

.eco-cat .eco-cat-assist a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--brand-line, #dce6eb);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-ink, #152736);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.eco-cat .eco-cat-assist small {
  display: block;
  color: #71838e;
  font-size: 12px;
  font-weight: 400;
}

.eco-cat .eco-cat-assist p {
  margin: 0;
}

.eco-cat .eco-cat-assist a::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: #25a560;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.364' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-3.9A8 8 0 1 1 8 18.8z'/%3E%3Cpath d='M9.2 8.6c.3 2.7 2.5 5 5.2 5.4l1.1-1.2-1.6-.9-.8.7c-.9-.4-1.8-1.3-2.2-2.2l.7-.8-.9-1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.364' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-3.9A8 8 0 1 1 8 18.8z'/%3E%3Cpath d='M9.2 8.6c.3 2.7 2.5 5 5.2 5.4l1.1-1.2-1.6-.9-.8.7c-.9-.4-1.8-1.3-2.2-2.2l.7-.8-.9-1.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Filtros */
.eco-cat .eco-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1280px;
  margin: 0 auto 24px;
}

.eco-cat .eco-cat-filters button {
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--brand-line, #dce6eb);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-copy, #526975);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
  cursor: pointer;
}

.eco-cat .eco-cat-filters button[aria-pressed="true"] {
  background: var(--brand-ink, #152736);
  border-color: var(--brand-ink, #152736);
  color: #fff;
}

.eco-cat .eco-cat-filters button span {
  margin-left: 4px;
  opacity: 0.6;
  font-weight: 500;
}

/* Riel: arranca alineado al contenido y se corta en el borde derecho */
.eco-cat .eco-cat-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px;
  max-width: none;
  margin: 0 calc(50% - 50vw); /* sin JS; con JS se ajusta al borde exacto de la pantalla */
  padding: 6px var(--cat-gutter) 28px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--cat-gutter);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.eco-cat .eco-cat-rail::-webkit-scrollbar {
  display: none;
}

/* Tarjeta */
.eco-cat .eco-cat-rail > .eco-pc {
  flex: 0 0 var(--pc-w);
  max-width: var(--pc-w);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--pc-h);
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand-ink, #152736) 4%, transparent), 0 12px 32px color-mix(in srgb, var(--brand-ink, #152736) 6%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.eco-cat .eco-cat-rail > .eco-pc[hidden] {
  display: none;
}

.eco-cat .eco-pc:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--brand-ink, #152736) 5%, transparent), 0 22px 46px color-mix(in srgb, var(--brand-ink, #152736) 10%, transparent);
}

/* Foto: caja fija; la imagen se cambia desde UX Builder */
.eco-cat .eco-pc .eco-pc-media {
  flex: 0 0 236px;
  height: 236px;
  width: 100% !important;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f8fb, #eaf2f7);
}

.eco-cat .eco-pc .eco-pc-media img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* Empresas: la foto va en proporción 8:5 (en todos los tamaños de pantalla) */
#s-empresa-equipos .eco-pc .eco-pc-media {
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 8 / 5;
}

/* Tocar la foto la abre en grande (lupa arriba a la derecha) */
.eco-cat .eco-pc .eco-pc-media {
  position: relative;
  cursor: zoom-in;
}

.eco-cat .eco-pc-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-ink, #152736);
  box-shadow: 0 4px 14px rgba(20, 54, 77, 0.18);
  cursor: zoom-in;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.eco-cat .eco-pc-zoom:hover {
  background: #fff;
  transform: scale(1.06);
}

.eco-cat .eco-pc .eco-pc-zoom svg.i {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.eco-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: rgba(10, 22, 32, 0.86);
}

.eco-lightbox.is-open {
  display: flex;
  animation: eco-lb-in 0.2s ease-out;
}

@keyframes eco-lb-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.eco-lightbox__fig {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100%, 900px);
  max-height: 100%;
  margin: 0;
  padding: 20px 20px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

.eco-lightbox__fig img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 12px;
}

.eco-lightbox__fig figcaption {
  margin-top: 12px;
  color: var(--brand-ink, #152736);
  font-family: "Ecopure Poppins", "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

.eco-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-ink, #152736);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.eco-lightbox__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

html.eco-lb-open {
  overflow: hidden;
}

/* Varias fotos: se pasan con las flechitas dentro de la imagen (o deslizando en celular) */
.eco-cat .eco-pc .eco-pc-gal {
  position: relative;
}

.eco-cat .eco-pc-gal-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.eco-cat .eco-pc-gal-track::-webkit-scrollbar {
  display: none;
}

.eco-cat .eco-pc .eco-pc-gal-track img {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.eco-cat .eco-pc-gal-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-ink, #152736);
  box-shadow: 0 4px 14px rgba(20, 54, 77, 0.18);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.eco-cat .eco-pc-gal-btn:hover {
  background: #fff;
  transform: scale(1.06);
}

.eco-cat .eco-pc-gal-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.eco-cat .eco-pc-gal-prev {
  left: 10px;
}

.eco-cat .eco-pc-gal-next {
  right: 10px;
}

.eco-cat .eco-pc .eco-pc-gal-btn svg.i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eco-cat .eco-pc-gal-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.eco-cat .eco-pc-gal-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(20, 54, 77, 0.3);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.eco-cat .eco-pc-gal-dots span.is-on {
  background: #fff;
  transform: scale(1.25);
}

/* Textos */
.eco-cat .eco-pc .eco-pc-info {
  padding: 20px 22px 0;
}

.eco-cat .eco-pc .eco-pc-info p,
.eco-cat .eco-pc .eco-pc-info h3 {
  margin: 0;
}

.eco-cat .eco-pc .eco-pc-kicker {
  margin-bottom: 6px !important;
  color: var(--brand-blue, #2f6f9f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.eco-cat .eco-pc .eco-pc-title {
  margin-bottom: 6px !important;
  color: var(--brand-ink, #152736);
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.eco-cat .eco-pc .eco-pc-benefit {
  display: -webkit-box;
  overflow: hidden;
  color: var(--brand-copy, #526975);
  font-size: 14px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Características con íconos */
.eco-cat .eco-pc .eco-pc-specs {
  padding: 14px 22px 0;
}

.eco-cat .eco-pc .eco-pc-specs ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-cat .eco-pc .eco-pc-specs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 4px;
  border-radius: 12px;
  background: var(--brand-surface, #f6f9fb);
  color: var(--brand-copy, #526975);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.eco-cat .eco-pc svg.i,
.eco-cat .eco-cat-foot svg.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eco-cat svg.i * {
  vector-effect: non-scaling-stroke;
}

.eco-cat .eco-pc .eco-pc-specs svg {
  width: 22px;
  height: 22px;
  color: var(--brand-blue, #2f6f9f);
}

/* Precio y cuotas (desde WooCommerce) */
.eco-cat .eco-pc .eco-pc-price {
  margin: auto 22px 0;
  padding-top: 14px;
  border-top: 1px solid var(--brand-line, #dce6eb);
}

.eco-cat .eco-pc .eco-pc-price small {
  display: block;
  color: #71838e;
  font-size: 11px;
}

.eco-cat .eco-pc .eco-pc-price strong {
  display: block;
  color: var(--brand-ink, #152736);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.eco-cat .eco-pc .eco-pc-price strong.is-consult {
  font-size: 22px;
}

.eco-cat .eco-pc .eco-pc-fin {
  display: block;
  margin-top: 3px;
  color: #3f8f62;
  font-size: 12px;
  font-weight: 600;
}

/* Acciones */
.eco-cat .eco-pc .eco-pc-actions {
  display: flex;
  gap: 8px;
  padding: 14px 22px 22px;
}

.eco-cat .eco-pc .eco-pc-cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--brand-red, #e31d3b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-red, #e31d3b) 22%, transparent);
  transition: background 0.2s;
}

.eco-cat .eco-pc .eco-pc-cta:hover {
  background: var(--brand-red-dark, #c91431);
  color: #fff;
}

.eco-cat .eco-pc .eco-pc-cta svg {
  width: 17px;
  height: 17px;
}

.eco-cat .eco-pc .eco-pc-more {
  flex: none;
  min-height: 42px;
  height: 42px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #c9d6de;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-ink, #152736);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.eco-cat .eco-pc .eco-pc-more:hover,
.eco-cat .eco-pc.open .eco-pc-more {
  border-color: var(--brand-ink, #152736);
  background: var(--brand-surface, #f6f9fb);
}

/* Detalle (botón +): sube sobre la tarjeta sin agrandarla */
.eco-cat .eco-pc .eco-pc-detail {
  position: absolute;
  inset: 0 0 64px;
  z-index: 2;
  overflow: auto;
  padding: 24px 22px;
  background: #fff;
  visibility: hidden;
  transform: translateY(125%);
  transition: transform 0.3s ease, visibility 0s 0.3s;
}

.eco-cat .eco-pc.open .eco-pc-detail {
  visibility: visible;
  transform: none;
  transition: transform 0.3s ease;
}

.eco-cat .eco-pc .eco-pc-detail h4 {
  margin: 0 0 4px;
  color: var(--brand-ink, #152736);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.eco-cat .eco-pc .eco-pc-detail p {
  margin: 0 0 14px;
  color: var(--brand-copy, #526975);
  font-size: 13px;
}

.eco-cat .eco-pc .eco-pc-detail .eco-pc-detail-cat {
  color: var(--brand-blue, #2f6f9f);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eco-cat .eco-pc .eco-pc-detail ul {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.eco-cat .eco-pc .eco-pc-detail li {
  display: flex;
  gap: 10px;
  margin: 0;
  color: var(--brand-ink, #152736);
  font-size: 14px;
}

.eco-cat .eco-pc .eco-pc-detail li svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--brand-blue, #2f6f9f);
}

/* Pie: confianza (Texto) + flechas (HTML), lado a lado en la columna */
.eco-cat .eco-cat-foot > .col-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1280px;
  margin: 4px auto 0;
}

.eco-cat .eco-cat-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eco-cat .eco-cat-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--brand-copy, #526975);
  font-size: 13px;
  line-height: 1.35;
}

.eco-cat .eco-cat-trust strong {
  color: var(--brand-ink, #152736);
  font-weight: 600;
}

.eco-cat .eco-cat-trust li::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background-color: var(--brand-blue, #2f6f9f);
  -webkit-mask: var(--eco-trust-ico) center / contain no-repeat;
  mask: var(--eco-trust-ico) center / contain no-repeat;
}

.eco-cat-trust--team { --eco-trust-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.154' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 1 1 7 0z'/%3E%3Cpath d='M3.5 20a6.5 6.5 0 0 1 10.6-5'/%3E%3Cpath d='M21 17a3 3 0 1 1-6 0 3 3 0 1 1 6 0z'/%3E%3Cpath d='M16.7 17l.9.9 1.7-1.8'/%3E%3C/svg%3E"); }

.eco-cat-trust--cycle { --eco-trust-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.154' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 9.5A8 8 0 0 0 5.2 7.8'/%3E%3Cpath d='M4.8 4.3v3.6h3.6'/%3E%3Cpath d='M4.5 14.5a8 8 0 0 0 14.3 1.7'/%3E%3Cpath d='M19.2 19.7v-3.6h-3.6'/%3E%3Cpath d='M12 8.2c-1.9 2.2-2.9 3.7-2.9 5a2.9 2.9 0 0 0 5.8 0c0-1.3-1-2.8-2.9-5z'/%3E%3C/svg%3E"); }

.eco-cat-trust--star { --eco-trust-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.154' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l2.5 5.1 5.6.8-4.05 3.95.95 5.6L12 16.6l-5 2.65.95-5.6L3.9 9.7l5.6-.8z'/%3E%3C/svg%3E"); }

.eco-cat .eco-cat-arrows {
  display: flex;
  gap: 10px;
}

.eco-cat .eco-cat-arrows button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e3eaef;
  color: var(--brand-ink, #152736);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.eco-cat .eco-cat-arrows button:hover:not(:disabled) {
  background: #d3dee5;
}

.eco-cat .eco-cat-arrows button:disabled {
  opacity: 0.35;
  cursor: default;
}

.eco-cat .eco-cat-arrows svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 849px) {
  .eco-cat {
    --pc-w: min(82vw, 340px);
    --pc-h: 620px;
  }

  .eco-cat .eco-cat-assist {
    justify-content: flex-start;
  }

  /* Más angosta = títulos y características en 2 líneas: la foto cede 36px */
  .eco-cat .eco-pc .eco-pc-media {
    flex-basis: 200px;
    height: 200px;
  }

  .eco-cat .eco-cat-arrows {
    display: none;
  }
}

/* La columna que contiene (eco_catalogo) no suma margen: filtros alineados con el título y las tarjetas */
.eco-cat .col:has(.eco-cat-rail) {
  padding-right: 0;
  padding-left: 0;
}

/* Fuera de Hogar (ej. Empresas, dentro de .eco-home): mismo interlineado y color de texto heredados que en Hogar */
.eco-home.eco-cat .eco-cat-filters,
.eco-home.eco-cat .eco-cat-rail,
.eco-home.eco-cat .eco-cat-foot {
  color: #14293c;
  line-height: 1.55;
}