/* ============================================================
   catalogo.css — Catálogo y Producto
   ============================================================ */

body.page-catalogo, body.page-producto { overflow: auto; }

/* ---- Catálogo ---- */
.catalog-shell { max-width: var(--max-w); margin: 0 auto; padding: 0 20px 120px; }

.catalog-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--stone); margin-bottom: 40px; }
.catalog-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.catalog-title { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(40px, 8vw, 72px); color: var(--black); letter-spacing: -.01em; margin-top: 8px; line-height: 1.02; }
.catalog-count { font-family: var(--font-data); font-size: 11px; letter-spacing: .12em; color: var(--muted); }

/* Filters */
.catalog-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.search-box {
  display: flex; border: 1.5px solid var(--stone); background: var(--paper);
  flex: 1; min-width: 200px; max-width: 320px;
  transition: border-color var(--dur);
}
.search-box:focus-within { border-color: var(--gold); }
.search-box input {
  flex: 1; border: none; padding: 11px 16px;
  font-size: 14px; font-family: var(--font-body); background: transparent; color: var(--ink);
}
.search-box input:focus { outline: none; }
.search-box button {
  width: 44px; border: none; background: none; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur);
}
.search-box button:hover { color: var(--gold); }

.filter-pill {
  padding: 8px 18px; border: 1.5px solid var(--stone);
  font-family: var(--font-data); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  transition: all var(--dur); white-space: nowrap; cursor: pointer; background: var(--paper);
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active { background: var(--black); color: var(--linen); border-color: var(--black); }

/* Product Grid */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 600px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.pgrid-card {
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  background: var(--paper); position: relative; overflow: hidden;
}
.pgrid-img-wrap { overflow: hidden; background: var(--stone); position: relative; }
.pgrid-img-wrap img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .6s var(--ease); }
.pgrid-card:hover .pgrid-img-wrap img { transform: scale(1.04); }

/* Borde dorado en hover */
.pgrid-card::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid transparent; pointer-events: none;
  transition: border-color .22s;
}
.pgrid-card:hover::after { border-color: var(--gold); }

.pgrid-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--black); color: var(--linen);
  font-family: var(--font-data); font-size: 9px; letter-spacing: .14em;
  padding: 4px 8px; text-transform: uppercase;
}
.pgrid-body { padding: 12px 14px 16px; }
.pgrid-title { font-size: 12.5px; line-height: 1.35; margin-bottom: 6px; }
.pgrid-price  { font-family: var(--font-data); font-size: 12.5px; color: var(--gold); }
.pgrid-price-usd { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* Empty */
.empty-state { text-align: center; padding: 80px 20px; }
.empty-state p { color: var(--muted); margin-top: 12px; font-size: 15px; }
.empty-state a { color: var(--gold); }

/* CTA */
.catalog-cta {
  margin-top: 64px; background: var(--black); color: var(--linen);
  padding: 48px 40px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 20px;
}
.catalog-cta p { font-family: var(--font-display); font-style: italic; font-size: clamp(20px,4vw,30px); }

/* ============================================================
   PRODUCTO — PDP v3
   ============================================================ */
.pdp-wrapper { max-width: var(--max-w); margin: 0 auto; }
.pdp-shell {
  display: flex; flex-direction: column;
}
/* Gallery — base (aplica siempre; en móvil .pdp-shell es columna, así
   que "relative" es el valor correcto y suficiente ahí). */
.pdp-gallery-col { background: var(--stone); position: relative; }
.pdp-main-img { height: 100%; overflow: hidden; }
.pdp-main-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .2s; }
/* 8-oct-2026: en móvil la foto se metía en una caja de 80vw de alto (más ANCHA
   que alta) con object-fit:cover, y una foto de moda vertical perdía ~35% de la
   prenda (el largo de la falda o del vestido). Ahora conserva su proporción
   (3:4) y se ve completa; el tope de 78vh deja asomar título y precio debajo
   para que la clienta sepa que hay más información al deslizar. */
@media (max-width: 767px) {
  .pdp-main-img { position: relative; }
  .pdp-main-img img#pdp-main-img { height: auto; aspect-ratio: 3 / 4; max-height: 62vh; object-fit: contain; object-position: center top; background: var(--stone); }
}
/* 8-oct-2026 (mejora aprobada "Ficha de producto compacta en celular"):
   62vh de foto + encabezado + título + precio dejaba el botón "Elige tu
   talla" varias pantallas más abajo en un iPhone normal (844px de alto:
   el título recién aparecía a los 803px, y el botón de agregar bastante
   más abajo). Ya se quitaron las categorías en círculo de esta página
   (includes/layout_header.php, ~90px) — esto recorta la foto un poco más
   y aprieta los márgenes del título/precio, sin deformarla (sigue en
   3:4, solo con menos alto máximo), para que el precio y la talla
   entren en la primera pantalla también en los celulares más bajos. */
@media (max-width: 767px) {
  body.page-producto .pdp-main-img img#pdp-main-img { max-height: 44vh; }
  body.page-producto .pdp-breadcrumb { margin-bottom: 10px; }
  body.page-producto .pdp-title { margin-bottom: 8px; font-size: clamp(20px, 5.2vw, 30px); }
  body.page-producto .pdp-prices { margin-bottom: 12px; }
  body.page-producto .pdp-envio-badge { margin-bottom: 12px; }
  body.page-producto .pdp-info-col { padding-top: 14px; }
  /* Entre el precio y "Talla" había ~90px repartidos en 4 márgenes
     distintos (línea divisoria + sección de color + su título): nadie de
     esos espacios es la sección de talla/botón que de verdad hace falta
     ver sin deslizar. Se aprietan todos un poco; el selector de color no
     desaparece, solo deja de empujar tanto hacia abajo. */
  body.page-producto .pdp-entrega { margin-bottom: 4px; }
  body.page-producto .hairline { margin: 10px 0 12px !important; }
  body.page-producto .pdp-section { margin-bottom: 14px; }
  body.page-producto .pdp-section-title { margin-bottom: 8px; }
}
.pdp-dots { display: none; }
@media (max-width: 767px) {
  .pdp-dots { display: flex; gap: 6px; position: absolute; left: 0; right: 0; bottom: 10px; justify-content: center; pointer-events: none; }
  .pdp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(13,13,13,.28); }
  .pdp-dots span.on { background: var(--black, #0D0D0D); transform: scale(1.25); }
}
/* Visor ampliado de la ficha */
.pdp-lightbox[hidden] { display: none; }
.pdp-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(13,13,13,.94); display: flex; align-items: center; justify-content: center; }
.pdp-lb-stage { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.pdp-lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.pdp-lb-stage.zoom2 { align-items: flex-start; justify-content: flex-start; }
.pdp-lb-stage.zoom2 img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }
.pdp-lb-close, .pdp-lb-nav { position: absolute; z-index: 2; border: 0; background: rgba(250,248,245,.14); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pdp-lb-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.pdp-lb-nav { top: 50%; transform: translateY(-50%); }
.pdp-lb-prev { left: 8px; } .pdp-lb-next { right: 8px; }
/* Aviso flotante: sobre la barra pegajosa y el botón del chat */
.pdp-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 99990; max-width: 86vw; padding: 11px 18px; border-radius: 999px; background: #0D0D0D; color: #FAF8F5; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.pdp-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 768px) {
  .pdp-shell {
    flex-direction: row;
    min-height: calc(100vh - var(--data-bar-h) - var(--header-h));
  }
  /* BUG CORREGIDO: esta regla y la de arriba (.pdp-gallery-col, sin media
     query) declaraban "position" distinto para el MISMO selector — sin
     querer, "relative" (definida después en el archivo) le ganaba a
     "sticky" en escritorio por orden de cascada, así que la galería
     jamás se quedaba fija de verdad. Al estar esta regla AHORA después
     en el archivo, "sticky" es la que gana en escritorio, como se
     quería desde el principio. overflow:hidden en .pdp-main-img además
     asegura que la foto nunca se salga de su propia caja, sin importar
     la proporción real de la imagen subida. */
  .pdp-gallery-col { flex: 0 0 55%; position: sticky; top: calc(var(--data-bar-h) + var(--header-h)); height: calc(100vh - var(--data-bar-h) - var(--header-h)); overflow: hidden; }
  .pdp-info-col { flex: 1; overflow-y: auto; padding: 52px 48px 100px; }
}

/* 8-oct-2026 (pedido de Ramiro: "el visor de los productos internos es muy
   grande, debería ser más pequeño; toca hacerle scroll para verlo"). En
   escritorio la galería ocupaba el 55% del ancho con la foto en object-fit:cover,
   así que en pantallas anchas la foto se salía por abajo y cortaba la prenda.
   Ahora: 42% del ancho con tope de 600px, y la foto SE VE COMPLETA
   (object-fit:contain) dentro del alto visible — sin scroll para verla entera. */
@media (min-width: 768px) {
  .pdp-gallery-col { flex: 0 0 34%; max-width: 480px; }
  .pdp-main-img img#pdp-main-img { object-fit: contain; object-position: center top; background: var(--stone); }
  .pdp-info-col { padding-left: clamp(28px, 4vw, 64px); }
}
@media (min-width: 768px) and (max-height: 760px) {
  .pdp-gallery-col { flex-basis: 32%; }
}
/* Aviso de la promoción general en la ficha (promoGeneralInfo()) */
.pdp-promo-general {
  margin: 6px 0 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  background: #f3efe6; border-left: 3px solid var(--gold-2, #C4984A); color: var(--ink, #1a1a1a);
}
.pdp-promo-general b { font-weight: 600; }
.pdp-promo-general a { color: var(--gold-2, #8a6a2b); text-decoration: underline; white-space: nowrap; }

.pdp-thumbs {
  position: absolute; top: 16px; left: 12px; bottom: 16px;
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: none;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb {
  width: 56px; height: 72px; overflow: hidden;
  border: 2px solid transparent; flex-shrink: 0; cursor: pointer;
  background: var(--linen); padding: 0; transition: border-color var(--dur);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.active { border-color: var(--black); }

/* Info column — el valor de escritorio vive en la media query de
   arriba (línea ~118: 52px 48px 100px). Este es el valor para móvil
   — antes vivía SIN media query y, al declararse después en el
   archivo, ganaba también en escritorio (mismo tipo de bug que
   .pdp-gallery-col): el padding angosto pensado para móvil se aplicaba
   en escritorio sin que nadie lo quisiera. */
@media (max-width: 767px) {
  .pdp-info-col { padding: 28px 20px 100px; }
}
.pdp-breadcrumb {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
}
.pdp-breadcrumb a:hover { color: var(--gold); }
.pdp-breadcrumb span { color: var(--stone-2); }

.pdp-title {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(24px, 4vw, 38px); color: var(--black);
  line-height: 1.12; letter-spacing: -.01em; margin-bottom: 16px;
}
.pdp-prices { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.pdp-price-cop { font-family: var(--font-data); font-size: 22px; color: var(--black); }
.pdp-price-usd { font-family: var(--font-data); font-size: 14px; color: var(--gold); }
.pdp-price-meta { font-family: var(--font-data); font-size: 10px; letter-spacing: .1em; color: var(--muted); }

.pdp-envio-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(34,197,94,.1); color: #15803D;
  padding: 6px 12px; font-family: var(--font-data);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px;
}

/* Color selector */
.pdp-section { margin-bottom: 24px; }
.pdp-section-title {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  transition: transform var(--dur), box-shadow var(--dur);
  position: relative;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: var(--black); box-shadow: 0 0 0 2px var(--linen), 0 0 0 3px var(--black); }
.color-swatch-name { display: none; }
/* 16-oct-2026 (ronda 5): solo los 5 más vendidos se ven de entrada; el
   resto aparece al pulsar "+N colores" (ver color-ver-mas más abajo). */
.color-swatch--extra { display: none; }
.color-swatches.ver-todos .color-swatch--extra { display: inline-block; }
.color-ver-mas {
  display: inline-block; margin-top: 8px; border: none; background: none; cursor: pointer;
  font-family: var(--font-data); font-size: 11px; letter-spacing: .04em;
  color: var(--gold-2); text-decoration: underline; padding: 0;
}

/* Talla selector */
.talla-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.talla-btn {
  min-width: 50px; padding: 10px 14px; border: 1.5px solid var(--stone);
  font-family: var(--font-data); font-size: 12px; letter-spacing: .06em;
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: all var(--dur); text-align: center;
}
.talla-btn:hover { border-color: var(--ink); }
.talla-btn.active { background: var(--black); color: var(--linen); border-color: var(--black); }
.talla-btn.agotada { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.talla-guide-link {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; margin-top: 10px;
}

/* Personalización */
.personalizacion-toggle {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 18px; border: 1.5px solid var(--stone); margin-bottom: 12px;
  transition: border-color var(--dur);
}
.personalizacion-toggle:hover { border-color: var(--gold); }
.personalizacion-toggle input[type="checkbox"] { display: none; }
.toggle-check {
  width: 20px; height: 20px; border: 1.5px solid var(--stone-2);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur); flex-shrink: 0;
}
.personalizacion-toggle input:checked ~ .toggle-check { background: var(--black); border-color: var(--black); color: var(--linen); }
/* 8-oct-2026: el ✓ se dibujaba siempre (SVG con currentColor oscuro), así que la casilla
   se veía MARCADA sin estarlo y parecía que la personalización ya estaba pedida. */
.toggle-check svg { opacity: 0; transition: opacity var(--dur); }
.personalizacion-toggle input:checked ~ .toggle-check svg { opacity: 1; }
.toggle-text { font-size: 13.5px; }
.toggle-sub { font-size: 11.5px; color: var(--muted); }
.toggle-costo { font-size: 11.5px; color: var(--gold-2); margin-top: 3px; font-weight: 600; }

.medidas-form { padding: 16px; background: var(--paper); border: 1px solid var(--stone); margin-bottom: 16px; }
.medidas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.medidas-nota { width: 100%; }

/* Urgency */
.pdp-urgency {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 20px;
}
.urgency-dot { width: 6px; height: 6px; border-radius: 50%; background: #F59E0B; flex-shrink: 0; animation: pulse-dot 1.5s infinite; }
.urgency-dot.low { background: #EF4444; }
.urgency-dot.high { background: #22C55E; }

/* Actions */
.pdp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.pdp-desc { font-size: 14px; color: var(--muted); line-height: 1.75; margin: 20px 0; }
.pdp-ocasiones { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

/* Modal de tallas */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(13,13,13,.6);
  backdrop-filter: blur(4px); z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
@media (min-width: 600px) { .modal-overlay { align-items: center; } }
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--linen); width: min(560px, 100vw);
  max-height: 90vh; overflow-y: auto;
  transform: translateY(20px); transition: transform .28s var(--ease);
  padding: 32px 28px 40px;
}
.modal-overlay.is-open .modal { transform: translateY(0); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.modal-title { font-family: var(--font-display); font-style: italic; font-size: 26px; }
.modal-close { font-size: 24px; color: var(--muted); background: none; border: none; cursor: pointer; line-height: 1; }

.talla-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 24px; }
.talla-table th { font-family: var(--font-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 0; text-align: left; border-bottom: 1px solid var(--stone); }
.talla-table td { padding: 10px 0; border-bottom: 1px solid var(--stone); color: var(--ink); }
.talla-table tr:last-child td { border: none; }

.ai-rec-form { background: var(--paper); padding: 20px; }
.ai-rec-form .medidas-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ai-rec-result {
  margin-top: 16px; padding: 16px 18px;
  background: var(--black); color: var(--linen);
  display: none;
}
.ai-rec-result.visible { display: block; }
.ai-rec-talla { font-family: var(--font-display); font-style: italic; font-size: 28px; margin-bottom: 6px; }
.ai-rec-razon { font-size: 13px; color: rgba(250,248,245,.65); }
.ai-rec-consejo { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em; color: var(--gold); margin-top: 8px; }

/* ============================================================
   CATÁLOGO MASONRY — sección 5 del paper de construcción
   CSS puro con column-count (sin JS, funciona en todo navegador
   moderno). Ver la nota del paper sobre el orden por columna, no
   por fila — aceptable para un feed de descubrimiento.
   ============================================================ */
.feed-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; padding: 18px 0 22px;
}
.feed-toolbar-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.feed-chip {
  font-family: var(--font-body); font-size: 12.5px; padding: 7px 15px;
  border: 1px solid var(--stone-2); border-radius: 999px; background: var(--paper);
  color: var(--ink); cursor: pointer; transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.feed-chip:hover { border-color: var(--gold); }
.feed-chip.is-active { background: var(--black); border-color: var(--black); color: var(--linen); }
.feed-chip-color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }

.feed {
  /* 10-oct-2026 (Ramiro, video de pantalla): la grilla pasa de CSS columns (masonry) a CSS GRID con
     tarjetas del MISMO alto, en filas alineadas como el tablero de Pinterest que mostró. Con column-count,
     cada vez que el scroll infinito agregaba tarjetas (o una foto terminaba de cargar y cambiaba su alto)
     el navegador volvía a repartir TODAS las tarjetas entre las columnas: lo que la clienta tenía en
     pantalla saltaba de columna, desaparecía y aparecían otras. En una grilla, lo ya pintado nunca se
     mueve: lo nuevo solo se agrega al final. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding-bottom: 60px;
  align-items: start;
}
@media (max-width: 1400px) { .feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 440px)  { .feed { gap: 8px; } }

.pin {
  position: relative; min-width: 0;
  border-radius: 14px; overflow: hidden; background: var(--stone);
  cursor: pointer; display: block; text-decoration: none;
}
@media (max-width: 760px) { .pin { border-radius: 10px; } }

.pin-img-wrap { position: relative; width: 100%; overflow: hidden; background: var(--stone); }
/* 8-oct-2026 (pedido de Ramiro, referencia: tablero de Pinterest): la foto se
   muestra COMPLETA, con SU proporción real. Antes cada tarjeta forzaba 3/4 o
   4/5 con object-fit:cover y recortaba prendas largas (maxidress, sets, pantalón
   palazzo) por arriba o por abajo. Ahora el alto lo manda la propia imagen
   (height:auto): el ancho/alto del HTML (400x500) solo reserva el espacio
   mientras carga y el navegador lo reemplaza por la proporción natural.
   Las clases pin-ratio-* se conservan (las sigue escribiendo pinRatioClase())
   pero ya no fuerzan ninguna proporción: la "variación de altura" de la grilla
   ahora la da la foto real, como en Pinterest. */
/* 10-oct-2026: TODAS las tarjetas tienen el mismo alto (proporción 2:3, la más cercana a las fotos del
   catálogo, que son 3:5): el espacio queda reservado desde el primer pintado, así que nada se mueve
   cuando las fotos terminan de cargar. object-position arriba para no cortar el rostro ni el escote. */
.pin-img-wrap { aspect-ratio: 2 / 3; }
.pin-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: transform .5s var(--ease);
}
.pin:hover .pin-img-wrap img { transform: scale(1.045); }
.pin-img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 55%, rgba(13,13,13,.55) 100%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.pin:hover .pin-img-wrap::after { opacity: 1; }

.pin-heart {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .15s var(--ease), background .15s;
  box-shadow: 0 2px 6px rgba(13,13,13,.15);
}
.pin-heart:hover { transform: scale(1.08); }
.pin-heart svg { width: 17px; height: 17px; fill: none; stroke: var(--black); stroke-width: 1.8; transition: all .15s; }
.pin-heart.is-liked { background: var(--black); }
.pin-heart.is-liked svg { fill: var(--gold); stroke: var(--gold); }

.pin-capsula-btn {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.92); color: var(--black);
  opacity: 0; transform: translateY(-4px);
  transition: all var(--dur) var(--ease); cursor: pointer;
}
.pin:hover .pin-capsula-btn { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) { .pin-capsula-btn { display: none; } } /* pasa a menu contextual en movil, ver 5.4 */

/* BUG CORREGIDO — titileo al pasar el cursor sobre una tarjeta:
   .pin-info vivía en el flujo normal del documento, con max-height
   0→60px en hover. Como .pin es hijo de una columna masonry
   (column-count), ese cambio de alto REAL empujaba a las tarjetas
   siguientes de la misma columna — si una de ellas quedaba justo
   debajo del cursor, disparaba su propio :hover, lo que encogía la
   tarjeta original, lo que devolvía el cursor a la tarjeta original,
   que volvía a crecer... un bucle infinito de titileo. La solución:
   .pin-info ahora es una superposición (position:absolute) sobre la
   propia imagen — nunca cambia el alto real de .pin, así que nunca
   empuja nada ni puede generar el bucle. */
.pin-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 20px 10px 10px;
  opacity: 0; transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.pin:hover .pin-info { opacity: 1; }
/* 8-oct-2026: en celular el nombre y el precio ya NO se pintan encima de la foto
   (tapaban el largo de la prenda justo donde importa): van debajo, como en
   Pinterest, siempre visibles. Alto constante, así que no reaparece el bucle de
   titileo que arregla el comentario de arriba. */
@media (max-width: 760px) {
  .pin-img-wrap::after { display: none; }
  .pin-info { position: static; opacity: 1; padding: 8px 8px 10px; pointer-events: auto; background: var(--paper, #fff); }
  .pin .pin-info-titulo { color: var(--ink, #1a1a1a); }
  .pin .pin-info-precio { color: var(--muted, #6E665C); }
}
.pin-info-titulo { font-size: 12.5px; color: var(--linen); line-height: 1.3; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-info-precio { font-family: var(--font-data); font-size: 12.5px; color: var(--linen); font-weight: 500; }

/* Pin de contenido (colección/categoría) — sección 5.3.B, rompe la
   uniformidad del feed con formato distinto al de producto. */
.pin-contenido {
  aspect-ratio: 2/3; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; /* 10-oct-2026: mismo alto que las demás tarjetas de la fila */
  padding: 22px; background: var(--black); color: var(--linen); position: relative;
}
.pin-contenido-eyebrow { font-family: var(--font-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.pin-contenido-titulo { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.15; }
.pin-contenido-sub { font-size: 12px; color: rgba(250,248,245,.6); margin-top: 8px; }

.feed-centinela { height: 1px; }
.feed-cargando {
  text-align: center; padding: 30px 0; color: var(--muted);
  font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  display: none;
}
/* 23-sep-2026: catalogo.js y feed-infinito.js muestran/ocultan este
   aviso con el atributo nativo [hidden] (antes catalogo.js usaba una
   clase .visible aparte, que quedó sin efecto real por la regla
   display:none de arriba — unificado a un solo mecanismo). */
.feed-cargando:not([hidden]) { display: block; }
.feed-vacio { text-align: center; padding: 80px 20px; color: var(--muted); }

/* Chips de subcategoría — segunda fila del toolbar, visualmente más
   ligera que la de categorías para que se lea como un nivel inferior. */
.feed-chip-sub { font-size: 12px; padding: 7px 14px; opacity: .92; }
.feed-chip-sub.is-active { opacity: 1; }

/* ── Ficha de producto: plazo de entrega + barra de compra fija (07-oct-2026) ── */
.pdp-entrega {
  font-family: var(--font-data); font-size: 11.5px; letter-spacing: .04em;
  color: var(--muted); margin: -12px 0 6px;
}
.pdp-entrega::before { content: '📦 '; }

/* 11-oct-2026: envío internacional estimado, junto al precio (ver
   $envioIntlTxt en producto.php). */
.pdp-envio-intl {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-data); font-size: 11.5px; letter-spacing: .04em;
  color: var(--muted); margin: 6px 0 0;
}

.pdp-sticky { display: none; }
@media (max-width: 767px) {
  .pdp-sticky {
    display: flex; flex-direction: column; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    /* 132px a la derecha (17-oct-2026, corregido — antes 118px): medido en
       vivo en niccola.co a 375px de ancho, el botón flotante del chat
       (Andrea) seguía pisando el último chip de talla con solo ~2px de
       margen — y menos todavía en pantallas Android de 360px. Mismo fix
       que en el sitio de Limonni (comparten este archivo). */
    padding: 10px 132px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
    background: var(--linen, #FAF8F5);
    border-top: 1px solid var(--stone, #E8E4DE);
    box-shadow: 0 -6px 22px rgba(13,13,13,.08);
    transform: translateY(120%); transition: transform .28s var(--ease, ease);
  }
  .pdp-sticky.is-visible { transform: translateY(0); }
  /* 9-oct-2026: el aviso de cookies (fijo abajo, z-index 9998, ~40px) tapaba
     el 60% de esta barra —incluido el botón— a todo visitante nuevo, es
     decir, a todo el tráfico de anuncios, hasta que lo cerrara. Mientras el
     aviso esté, la barra se apoya encima de él. El padding derecho pasó de
     88 a 118px: el botón flotante de Sofía mide ~102px y pisaba el botón. */
  body.con-aviso-cookies .pdp-sticky { bottom: 42px; }
  /* 11-oct-2026: fila de tallas dentro de la barra fija, para comprar sin
     bajar la página — con scroll horizontal si no caben todas. */
  .pdp-sticky-tallas {
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .pdp-sticky-talla-btn {
    flex: 0 0 auto; min-width: 34px; padding: 6px 9px; font-size: 12px;
    border: 1px solid var(--stone, #E8E4DE); border-radius: 7px; background: #fff;
    color: var(--black, #0D0D0D); font-family: var(--font-data);
  }
  .pdp-sticky-talla-btn.active { border-color: var(--gold-2, #C4984A); background: var(--gold-2, #C4984A); color: #fff; }
  .pdp-sticky-fila { display: flex; align-items: center; gap: 10px; }
  .pdp-sticky-precio {
    flex: 0 0 auto; font-family: var(--font-data); font-size: 15px; color: var(--black, #0D0D0D);
    white-space: nowrap;
  }
  /* BUG ENCONTRADO EN REVISIÓN (11-oct-2026, probado en móvil real): con
     min-width:0 + white-space:nowrap + overflow:visible, cuando el texto
     ("Agregar al carrito") no cabía en el espacio que deja el precio
     tachado a su lado, las letras del principio y el final se pintaban
     POR FUERA del fondo oscuro del botón — texto blanco sobre el fondo
     claro de la barra, casi invisible. overflow:hidden + ellipsis trunca
     de forma legible en vez de desbordar invisible. */
  .pdp-sticky-btn { flex: 1 1 auto; min-width: 0; padding: 13px 10px; font-size: 12px;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdp-sticky-wa {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--stone, #E8E4DE); color: #1f9d55; background: #fff;
  }
}
/* 11-oct-2026: tira corta de "también te puede gustar" dentro del primer
   pantallazo de la ficha (ver pdp-alt-section en producto.php). */
.pdp-alt-section { margin-top: 24px; }
.pdp-alt-title {
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.pdp-alt-strip { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pdp-alt-card {
  flex: 0 0 auto; width: 104px; display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
}
.pdp-alt-card img { width: 104px; height: 130px; object-fit: cover; border-radius: 8px; display: block; background: var(--stone, #E8E4DE); }
.pdp-alt-precio { font-family: var(--font-data); font-size: 11.5px; color: var(--black, #0D0D0D); }

@keyframes pdp-pulse-kf { 0%,100% { box-shadow: 0 0 0 0 rgba(196,152,74,0); } 50% { box-shadow: 0 0 0 6px rgba(196,152,74,.35); } }
.pdp-pulse { animation: pdp-pulse-kf .8s ease-in-out 2; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pdp-sticky { transition: none; } .pdp-pulse { animation: none; } }

/* ============================================================
   SELECTOR DE CÁPSULAS (8-oct-2026) — partials/capsulas_selector.php
   ============================================================ */
.caps-zona { display: block; padding: 22px clamp(20px, 5vw, 64px) 8px; }
.caps-zona.con-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: stretch; }
.caps-zona .caps-selector { padding: 0; min-width: 0; }
.caps-selector { padding: 18px clamp(20px, 5vw, 64px) 6px; }
.caps-selector-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.caps-selector-tit { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.caps-selector-todas { font-size: 12px; color: var(--gold-2, #8a6a2b); text-decoration: underline; }
.caps-selector-row {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding: 10px 2px 8px; scrollbar-width: thin; /* 10px arriba: que no se corte la etiqueta "Nueva" */
}
.caps-chip {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 12px; min-width: 215px; max-width: 280px;
  padding: 10px 18px 10px 10px; border: 1px solid var(--stone-2, #ddd6c9); border-radius: 12px;
  background: var(--paper, #fff); color: var(--ink, #1a1a1a); text-decoration: none;
  transition: border-color var(--dur, .2s) var(--ease, ease), box-shadow var(--dur, .2s) var(--ease, ease);
}
.caps-chip:hover { border-color: var(--gold, #C4984A); box-shadow: 0 2px 10px rgba(13,13,13,.07); }
.caps-chip.is-active { border-color: var(--black, #0D0D0D); box-shadow: inset 0 0 0 1px var(--black, #0D0D0D); }
.caps-chip-img {
  flex: 0 0 60px; width: 60px; height: 76px; border-radius: 8px; background: var(--stone, #ece7dd) center top / cover no-repeat;
}
.caps-chip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.caps-chip-txt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caps-chip-txt small { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.caps-chip-nueva {
  position: absolute; top: -7px; right: 10px; font-style: normal; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--black, #0D0D0D); color: var(--gold, #C4984A);
}

/* ÁREAS POR CÁPSULA en el index (8-oct-2026): SOLO 2 FILAS por cápsula + botón
   "Ver más". El PHP manda 10 prendas (5 columnas x 2 filas); en pantallas con
   menos columnas se ocultan las que sobran para que siempre queden 2 filas. */
.feed-capsula, .feed-anuncio { padding-bottom: 8px; }
@media (max-width: 1400px) { .feed-capsula .pin:nth-child(n+9) { display: none; } }
@media (max-width: 1100px) { .feed-capsula .pin:nth-child(n+7) { display: none; } }
@media (max-width: 760px)  { .feed-capsula .pin:nth-child(n+5) { display: none; } }
.feed-anuncio { grid-template-columns: minmax(0, 1fr); max-width: 320px; }


/* ── Precio con descuento visible (8-oct-2026) ─────────────────────────
   Precio anterior tachado + precio actual + "10% de descuento" en rojo. */
.precio-promo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.precio-antes { color: var(--muted, #6E665C); text-decoration: line-through; font-weight: 400; font-size: .82em; }
.precio-ahora { color: var(--black, #0D0D0D); font-weight: 600; }
.precio-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  background: #C8201B; color: #fff; font-size: .62em; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; align-self: center;
}
.pdp-price-cop .precio-ahora { color: #C8201B; }
.pin-info-precio .precio-ahora { color: #C8201B; }
.pin .pin-info-precio .precio-antes { color: var(--muted, #8a8277); }
.pin-dto {
  position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 8px; border-radius: 3px;
  background: #C8201B; color: #fff; font-family: var(--font-data); font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.pdp-sticky-precio .precio-antes { font-size: .75em; }
.pdp-sticky-precio .precio-ahora { color: #C8201B; }

/* Botón Finalizar compra + barra de envío gratis de la ficha */
#pdp-finalizar { margin-top: 10px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
#pdp-finalizar[hidden], .pdp-envio-prog[hidden] { display: none; }
.pdp-finalizar-n { opacity: .8; font-weight: 400; }
.pdp-envio-prog { margin-top: 14px; }
.pdp-envio-prog-txt { margin: 0 0 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink, #1a1a1a); text-align: center; }
.pdp-envio-prog-txt b { font-weight: 700; }
.pdp-envio-riel { display: block; position: relative; height: 7px; border-radius: 999px; background: var(--stone, #E8E4DE); overflow: hidden; }
.pdp-envio-relleno { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gold, #C4984A); transition: width .7s cubic-bezier(.16, 1, .3, 1); }
.pdp-envio-prog.is-logrado .pdp-envio-relleno { background: #3E9B4F; }
.pdp-envio-riel .envio-hito { background: #fff; }


/* Panel de colecciones más vendidas (derecha del selector, 8-oct-2026) */
.caps-top { padding: 14px 16px 10px; border: 1px solid var(--stone-2, #ddd6c9); border-radius: 12px; background: var(--paper, #fff); }
.caps-top-tit { margin: 0 0 8px; font-family: var(--font-data); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.caps-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.caps-top-list a { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; color: var(--ink, #1a1a1a); text-decoration: none; }
.caps-top-list a:hover { background: var(--linen, #FAF8F5); }
.caps-top-n { flex: 0 0 18px; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold-2, #8a6a2b); text-align: center; }
.caps-top-img { flex: 0 0 40px; width: 40px; height: 50px; border-radius: 6px; background: var(--stone, #ece7dd) center top / cover no-repeat; }
.caps-top-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.caps-top-txt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caps-top-txt small { font-size: 11.5px; color: var(--muted); }
@media (max-width: 900px) {
  .caps-zona.con-top { grid-template-columns: 1fr; }
  .caps-top-list { flex-direction: row; overflow-x: auto; }
  .caps-top-list li { flex: 0 0 auto; }
}


/* Index: 3 cápsulas a la izquierda, más altas y repartidas en todo el ancho (8-oct-2026) */
.caps-zona.con-top .caps-selector-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 14px; padding-top: 12px; }
.caps-zona.con-top .caps-chip { min-width: 0; max-width: none; min-height: 150px; padding: 14px 18px 14px 14px; gap: 16px; }
.caps-zona.con-top .caps-chip-img { flex: 0 0 96px; width: 96px; height: 122px; border-radius: 10px; }
.caps-zona.con-top .caps-chip-txt b { font-size: 16px; }
.caps-zona.con-top .caps-chip-txt small { font-size: 12.5px; }
@media (max-width: 700px) {
  .caps-zona.con-top .caps-selector-row { display: flex; overflow-x: auto; }
  .caps-zona.con-top .caps-chip { flex: 0 0 78%; min-height: 128px; }
}

/* ── Descuento elegante (8-oct-2026, v2) ───────────────────────────────
   Precio con descuento en NEGRO; el anuncio del descuento en rojo pero
   fino: contorno delgado, tipografía de la marca y un pequeño ícono de
   etiqueta — en vez del bloque rojo sólido. */
.precio-ahora,
.pdp-price-cop .precio-ahora,
.pin-info-precio .precio-ahora,
.pdp-sticky-precio .precio-ahora { color: var(--black, #0D0D0D); }
.precio-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px; border: 1px solid #B3261E; border-radius: 999px;
  background: transparent; color: #B3261E;
  font-family: var(--font-body, sans-serif); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.precio-badge::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E");
}
.pin-dto {
  left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px;
  background: rgba(250, 248, 245, .94); color: #B3261E; border: 1px solid rgba(179, 38, 30, .45);
  font-family: var(--font-body, sans-serif); font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
}
.pdp-sticky-precio .precio-badge { display: none; }