/* ==========================================================================
   Tienda — encaje del catálogo de WooCommerce en el sistema del tema.

   Woo trae su propio marcado; aquí no se pelea con él, se le pone la ropa de
   la casa: el contenedor de 1600 px, la tipografía display en los títulos,
   los precios en mono (son datos) y los botones con forma de pastilla.
   ========================================================================== */

.woo {
  padding: 48px 0 96px;
}

/* El breadcrumb quedaba debajo del header pegajoso. */
.woo .woocommerce-breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
  margin: 0 0 28px;
}
.woo .woocommerce-breadcrumb a { color: var(--muted); }
.woo .woocommerce-breadcrumb a:hover { color: var(--red); }

/* ------------------------------------------------------------- Cabecera -- */
.woo .woocommerce-products-header,
.woo .page-title,
.woo h1.entry-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.woo .woocommerce-result-count {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 28px;
}

.woo .woocommerce-ordering select {
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

/* --------------------------------------------------------- La cuadrícula -- */
.woo ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woo ul.products::before,
.woo ul.products::after { content: none; }

.woo ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}

.woo ul.products li.product {
  list-style: none;
}

/* ============================ EL RIEL DE LÍNEAS ==========================
   Sustituye al filtro por las ~30 categorías reales de Woo (varias de un
   solo producto, "Esmaltes" repetida tres veces) por las 6 líneas que sí
   tienen sentido para el cliente. */
.riel-lineas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 36px;
}
.riel-lineas__chip {
  font-family: var(--body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.riel-lineas__chip:hover { border-color: var(--ink); }
.riel-lineas__chip.is-activo {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* =============================== LA TARJETA ===============================
   Puerto directo de PROPUESTAS/tarjeta-producto/precio-monumental.html
   (la versión aprobada). El <a> cubre la tarjeta por debajo; el botón de
   cotizar es su HERMANO, no su hijo, y va encima por z-index. */
.woo .rej,
.woo ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
@media (max-width: 1180px) { .woo ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.woo .card {
  --c-pared: #2E5EAA; --c-techo: #1C7C54; --c-metal: #181312; --c-piso: #C8102E; --c-herr: #4a3f3d;
  position: relative; display: flex; flex-direction: column; min-height: 31rem;
  padding: 1rem; color: #fff; border-radius: 16px; overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .28s var(--ease);
}
.woo .card__link { position: absolute; inset: 0; z-index: 1; text-decoration: none; }
.woo .card__link:focus-visible { outline: 3px solid var(--yellow); outline-offset: -4px; border-radius: 14px; }
.woo .card > *:not(.card__link) { position: relative; z-index: 2; pointer-events: none; }
.woo .card__add, .woo .card__detalles { pointer-events: auto; }

.woo .card.tex { background-color: var(--c); }
.woo .tx-pared { --c: var(--c-pared);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 9px),
                     repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px); }
.woo .tx-metal { --c: var(--c-metal);
  background-image: linear-gradient(114deg, rgba(255,255,255,.20) 4%, transparent 26%, transparent 66%, rgba(255,255,255,.11) 94%),
                     radial-gradient(120% 70% at 30% 8%, rgba(255,255,255,.14), transparent 60%); }
.woo .tx-techo { --c: var(--c-techo);
  background-image: radial-gradient(circle at 18% 22%, rgba(255,255,255,.24) 0 5px, transparent 6px),
                     radial-gradient(circle at 76% 15%, rgba(255,255,255,.18) 0 7px, transparent 8px),
                     radial-gradient(circle at 62% 58%, rgba(255,255,255,.15) 0 4px, transparent 5px),
                     radial-gradient(circle at 32% 74%, rgba(255,255,255,.20) 0 6px, transparent 7px),
                     linear-gradient(160deg, rgba(255,255,255,.10), transparent 55%); }
.woo .tx-piso { --c: var(--c-piso);
  background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
                     repeating-linear-gradient(-32deg, rgba(0,0,0,.13) 0 3px, transparent 3px 8px); }
.woo .tx-herr { --c: var(--c-herr);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
                     repeating-linear-gradient(-45deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px); }

.woo .card__top { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.woo .card__tipo { font-family: var(--mono); font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.woo .card__rango { font-family: var(--mono); font-size: .66rem; font-weight: 550; opacity: .88; text-align: right; }

.woo .card .precio { margin: 1.15rem 0 0; font-family: var(--display); font-weight: 720;
  font-size: clamp(2.15rem, 3.6vw, 3.9rem); line-height: .78; letter-spacing: -.08em;
  color: var(--yellow); position: relative; z-index: 4; }
.woo .card .precio small { display: block; margin-bottom: .28rem; font-family: var(--mono); font-weight: 500;
  font-size: .7rem; line-height: 1; letter-spacing: .06em; color: rgba(255,255,255,.9); }
.woo .card .precio__na { font-size: 1.4rem; }

.woo .card__escena { position: relative; margin: -.4rem auto 0; width: 100%; height: 14.5rem;
  display: grid; place-items: center; perspective: 900px; }
.woo .card__escena::before { content: ""; position: absolute; top: 8%; left: 50%; width: 78%; height: 74%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.22), transparent 68%);
  transition: opacity .3s var(--ease), transform .35s var(--ease); }
.woo .card__escena::after { content: ""; position: absolute; left: 50%; bottom: .2rem; width: 58%; height: 1.5rem;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.22) 45%, transparent 72%);
  transition: transform .35s var(--ease), opacity .35s var(--ease); }
.woo .card__lata { position: relative; z-index: 1; width: 76%; height: 14rem; object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.42));
  transform: rotateX(0deg) translateY(0); transform-origin: 50% 88%;
  transition: transform .32s var(--ease); }

.woo .card__info { margin-top: auto; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.35); }
.woo .card__info h3 { margin: 0; font-family: var(--display); font-weight: 730; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.03em; }
.woo .card__uso { min-height: 3.4em; margin: .5rem 0 1rem; color: rgba(255,255,255,.92); font-size: .94rem; line-height: 1.42; }
.woo .card__pie { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; }

.woo .card__detalles { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 52px; padding: .9rem 1.05rem; border-radius: 999px;
  border: 1.8px solid rgba(255,255,255,.6); background: transparent; color: #fff;
  font-family: var(--body); font-size: .95rem; font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease); }
.woo .card__detalles svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.6; transition: transform .2s var(--ease); }
.woo .card__detalles:hover { background: #fff; color: var(--ink); border-color: #fff; }
.woo .card__detalles:hover svg { transform: translateX(3px); }
.woo .card__detalles:active { transform: scale(.96); }
.woo .card__detalles:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

@media (max-width: 560px) {
  .woo .card__pie { grid-template-columns: 1fr; gap: .5rem; }
  .woo .card__detalles { width: 100%; }
}

.woo .card__add {
  position: relative; z-index: 3; width: 100%; min-height: 52px; white-space: nowrap; border-radius: 999px;
  border: none; background: #fff; color: var(--red); cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: .32rem; padding: .95rem 1rem;
  font-family: var(--body); font-weight: 750; font-size: 1rem; line-height: 1; letter-spacing: -.01em;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); margin-top: 0;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease), box-shadow .2s var(--ease);
}
.woo .card__add svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.6; flex: none; }
.woo .card__add .ico-ok { display: none; }
.woo .card__add.added .ico-mas { display: none; }
.woo .card__add.added .ico-ok { display: block; }
.woo .card__add .txt-puesto { display: none; }
.woo .card__add.added .txt-normal { display: none; }
.woo .card__add.added .txt-puesto { display: inline; }
.woo .card__add:active { transform: scale(.96); box-shadow: 0 4px 10px -6px rgba(0,0,0,.5); }
.woo .card__add:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.woo .card__add.loading { opacity: .7; }

@media (hover: hover) and (pointer: fine) {
  .woo .card:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -22px rgba(24,19,18,.55); }
  .woo .card:hover .card__lata { transform: rotateX(7deg) translateY(-8px) scale(1.03); }
  .woo .card:hover .card__escena::after { transform: translateX(-50%) scale(.78); opacity: .72; }
  .woo .card:hover .card__escena::before { transform: translateX(-50%) scale(1.08); opacity: .85; }
  .woo .card__add:hover { background: var(--red); color: #fff; box-shadow: 0 14px 26px -10px rgba(225,25,34,.7); }
}
@media (prefers-reduced-motion: reduce) {
  .woo .card, .woo .card__lata, .woo .card__add, .woo .card__escena::before, .woo .card__escena::after { transition: none !important; }
  .woo .card:hover .card__lata { transform: none !important; }
}

/* ------------------------------------------------------------- Botones -- */
.woo .button,
.woo a.button,
.woo button.button,
.woo input.button,
.woo .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  padding: 14px 24px;
  border: none;
  text-decoration: none;
  transition: background-color .22s var(--ease), transform .18s var(--ease);
  margin-top: auto;           /* alinea los botones al pie de cada tarjeta */
  align-self: flex-start;
}
.woo .button:hover,
.woo a.button:hover,
.woo button.button:hover { background: var(--red); color: #fff; }
.woo .button:active { transform: scale(.97); }

/* El de cotizar manda: es el final del embudo. */
.woo .button.alt,
.woo a.reds-cotizar,
.woo .checkout-button {
  background: var(--red);
}
.woo .button.alt:hover,
.woo a.reds-cotizar:hover { background: var(--red-dark); }

/* --------------------------------------------------------- Ficha y carro -- */
.woo .product .summary .product_title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.woo table.shop_table {
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
}
.woo table.shop_table th {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.woo .woocommerce-message,
.woo .woocommerce-info {
  border-top-color: var(--red);
  font-family: var(--body);
}

/* --------------------------------------------------------------- Móvil -- */
@media (max-width: 1180px) {
  .woo ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

/* El riel se vuelve un carril deslizable en vez de romperse en 3 filas.
   scroll-snap para que cada línea quede alineada al soltar el dedo. */
@media (max-width: 900px) {
  .riel-lineas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    /* Sangrado hasta el borde: se siente carril, no caja cortada. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .riel-lineas::-webkit-scrollbar { display: none; }
  .riel-lineas__chip { flex: none; scroll-snap-align: start; min-height: 44px; display: inline-flex; align-items: center; }
}

/* Una sola columna: esta tarjeta tiene lata en 3D y precio monumental, y a
   dos columnas en 375px cada una queda en ~170px — la lata se vuelve un
   sello y el precio se parte. Mejor una tarjeta que se lee que dos que no. */
@media (max-width: 620px) {
  .woo { padding: 28px 0 56px; }
  .woo ul.products { grid-template-columns: 1fr; gap: 18px; }
  .woo .card { min-height: 0; padding: 18px; }
  .woo .card__escena { height: 11rem; }
  .woo .card__lata { height: 10.5rem; width: 62%; }
  /* 8vw en vez de 3.6vw: el clamp de escritorio colapsaba al mínimo en
     móvil y aun así "RD$46,750.00" se salía del borde de la tarjeta. */
  .woo .card .precio { font-size: clamp(1.9rem, 8.5vw, 2.7rem); overflow-wrap: anywhere; }
  .woo .card__info h3 { font-size: 1.3rem; }
  .woo .card__uso { min-height: 0; margin-bottom: .85rem; }
  .woo .card__pie { grid-template-columns: auto 1fr; }
}

/* Objetivos táctiles: WCAG 2.5.5 pide 44×44 real, no 32 ni 40. */
@media (pointer: coarse) {
  .woo .page-numbers,
  .woo nav.woocommerce-pagination a,
  .woo nav.woocommerce-pagination span {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .woo .woocommerce-ordering select { min-height: 48px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .woo .button { transition: none; }
}

/* La ficha de producto vive en su propia hoja: assets/css/ficha.css
   (puerto del template-producto-monumental.html). Aqui no queda nada de
   la version anterior. */

/* ============================================================================
   «COMPLETA EL PROYECTO» (home) COMO CARRIL EN MOVIL
   Es la rejilla de productos que el home inserta por shortcode. En movil se
   apilaba en 6 tarjetas seguidas: 2.529px, el bloque mas pesado de la pagina.
   La regla vive AQUI y no en styles.css a proposito: `.woo ul.products` esta
   definido en este archivo, que carga despues — con la misma especificidad
   gana el ultimo, asi que desde styles.css era imposible ganarle.
   ============================================================================ */
@media (max-width: 760px) {
  .extras ul.products {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    grid-template-columns: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .extras ul.products::-webkit-scrollbar { display: none; }

  .extras ul.products > li.product {
    flex: 0 0 80%;
    scroll-snap-align: start;
    width: auto !important;
    margin: 0 !important;
  }
}