/* ==========================================================================
   Core Pages — CSS compartido del sistema núcleo
   Archivo  : assets/css/shared/core-pages.css
   Versión  : 2.0
   Cargado  : por inc/enqueue.php en /contacto/, /cotizacion/, /catalogo/
   Depende  : assets/css/app.css

   CAMBIOS v2.0 (catálogo):
   ─────────────────────────────────────────────────────────────────────────
   - Trust strip en el hero del catálogo
   - Toolbar de dos filas: filtros | meta (chips + count + sort)
   - Filtro separator visual entre special pills y category pills
   - Active chips (confirmación visual de filtros activos)
   - Badge "Nuevo" en product cards
   - Paginación con prev/next y ellipsis
   - Mobile filter toggle con drawer colapsable
   ─────────────────────────────────────────────────────────────────────────

   PREFIJO: tc- — namespace para páginas compartidas.
   PHASE 1 CSS INVENTORY (no funcional):
   - base/tokens: variables tc-* y adaptacion light/dark por marca.
   - layout: .tc-wrap, heroes de pagina, cuerpos compartidos.
   - components: .tc-btn, .tc-breadcrumb, cards, formularios, trust strips.
   - pages: /contacto/, /cotizacion/, /catalogo/.
   - catalog: .tc-catalog-* y product cards genericas.
   - contact: .tc-contact-*; base futura del componente compartido.
   - brand overrides: .brand-* dentro de shared; revisar en Fase 4.
   - legacy/probable legacy: ninguno confirmado; revisar catalogo generico tras jerarquicos.
   - fixes: no agrupar aqui salvo patches futuros documentados.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIABLES DE ADAPTACIÓN — Light/Dark por marca
   -------------------------------------------------------------------------- */

/* BRAND OVERRIDES REVIEW:
   Shared define tokens por marca para tc-*.
   Mantener en Fase 1; posible extraccion a capa tokens/brand en Fase 4. */
:root {
  --tc-text:        #1d1d1f;
  --tc-text-2:      #86868b;
  --tc-text-3:      #a1a1a6;
  --tc-surface:     #f5f5f7;
  --tc-surface-2:   #ffffff;
  --tc-border:      rgba(0,0,0,.08);
  --tc-input-bg:    #f5f5f7;
  --tc-input-focus: rgba(var(--brand-primary, 0,157,218), .10);
  --tc-ease:        cubic-bezier(.165,.84,.44,1);
  --tc-t:           .28s;
}

.brand-imperio-lashes,
.brand-imperio-medical,
.brand-loquay-peru {
  --tc-text:      #f2f0ed;
  --tc-text-2:    rgba(242,240,237,.62);
  --tc-text-3:    rgba(242,240,237,.35);
  --tc-surface:   rgba(255,255,255,.04);
  --tc-surface-2: rgba(255,255,255,.06);
  --tc-border:    rgba(255,255,255,.08);
  --tc-input-bg:  rgba(255,255,255,.06);
}


/* --------------------------------------------------------------------------
   2. UTILIDADES COMPARTIDAS
   -------------------------------------------------------------------------- */

.tc-wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 60px;
}

.tc-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}

.tc-link {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity var(--tc-t) ease;
}
.tc-link:hover { opacity: .75; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.tc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text-3);
}
.tc-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tc-text-2);
  text-decoration: none;
  transition: color var(--tc-t) ease;
}
.tc-breadcrumb__link:hover { color: var(--brand-primary); }
.tc-breadcrumb__link i { font-size: 10px; }
.tc-breadcrumb__sep { opacity: .35; }
.tc-breadcrumb__current { color: var(--tc-text-3); }


/* ── Botones ─────────────────────────────────────────────────────────────── */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 9999px;
  padding: 13px 30px;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background   var(--tc-t) var(--tc-ease),
    color        var(--tc-t) var(--tc-ease),
    border-color var(--tc-t) var(--tc-ease),
    transform    var(--tc-t) var(--tc-ease),
    box-shadow   var(--tc-t) var(--tc-ease);
}
.tc-btn--lg   { padding: 16px 44px; font-size: 12px; }
.tc-btn--sm   { padding: 9px 20px; font-size: 10px; }
.tc-btn--full { width: 100%; }

.tc-btn--solid {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.tc-btn--solid:hover {
  filter: brightness(.88);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.tc-btn--ghost {
  background: transparent;
  color: var(--tc-text);
  border-color: var(--tc-border);
}
.tc-btn--ghost:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(0,0,0,.03);
  transform: translateY(-2px);
}

.brand-imperio-lashes .tc-btn--ghost,
.brand-imperio-medical .tc-btn--ghost,
.brand-loquay-peru .tc-btn--ghost {
  border-color: rgba(255,255,255,.15);
}


/* --------------------------------------------------------------------------
   3. HERO DE PÁGINA
   -------------------------------------------------------------------------- */
.tc-page-hero {
  padding: 48px 0 60px;
  border-bottom: 1px solid var(--tc-border);
}

.tc-page-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.tc-page-hero__copy { flex: 1; max-width: 680px; }

.tc-page-hero__title {
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--tc-text);
  margin-bottom: 14px;
  margin-top: 8px;
}

.tc-page-hero__sub {
  font-size: 16px;
  line-height: 1.72;
  color: var(--tc-text-2);
  max-width: 560px;
}

.tc-page-hero__cta { flex-shrink: 0; }


/* --------------------------------------------------------------------------
   4. CONTACTO
   -------------------------------------------------------------------------- */

/* PHASE 2 CANDIDATE:
   Este bloque es la base mas segura para normalizar contacto entre marcas.
   Debe absorber progresivamente .t-contact, .lp-contact, .im-contact,
   .il-contact y .lq-contact sin cambiar markup en esta fase. */
.tc-contact-split { padding: 0; }

.tc-contact-split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.tc-contact-split__panel {
  padding: 80px 64px 80px 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tc-contact-split__panel .tc-eyebrow { margin-bottom: 8px; }

.tc-contact-split__heading {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tc-text);
  margin-bottom: 20px;
  line-height: 1.1;
}

.tc-contact-split__body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--tc-text-2);
  margin-bottom: 36px;
  max-width: 520px;
}

.tc-contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}
.tc-contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tc-contact-info__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-imperio-lashes .tc-contact-info__icon,
.brand-imperio-medical .tc-contact-info__icon,
.brand-loquay-peru .tc-contact-info__icon {
  background: rgba(255,255,255,.06);
}
.tc-contact-info__icon i {
  font-size: 15px;
  color: var(--brand-primary);
}
.tc-contact-info__label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tc-text-3);
  margin-bottom: 2px;
}
.tc-contact-info__value {
  display: block;
  font-size: 13px;
  color: var(--tc-text-2);
  font-weight: 500;
}

.tc-contact-split__ecosystem {
  font-size: 12px;
  color: var(--tc-text-3);
  margin-top: 20px;
}

.tc-contact-split__map {
  position: relative;
  overflow: hidden;
}
.tc-contact-split__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.brand-imperio-lashes .tc-contact-split__map iframe,
.brand-imperio-medical .tc-contact-split__map iframe,
.brand-loquay-peru .tc-contact-split__map iframe {
  filter: grayscale(.3) contrast(1.05);
}


/* --------------------------------------------------------------------------
   5. COTIZACIÓN — Formulario WhatsApp builder
   -------------------------------------------------------------------------- */

.tc-quote-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  background: rgba(0,0,0,.04);
  border: 1px solid var(--tc-border);
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 20px;
}
.brand-imperio-lashes .tc-quote-badge,
.brand-imperio-medical .tc-quote-badge,
.brand-loquay-peru .tc-quote-badge {
  background: rgba(255,255,255,.04);
}

.tc-quote-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: rgba(0,0,0,.04);
  border: 1px solid var(--tc-border);
  border-radius: 9999px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
}
.brand-imperio-lashes .tc-quote-context,
.brand-imperio-medical .tc-quote-context,
.brand-loquay-peru .tc-quote-context { background: rgba(255,255,255,.05); }
.tc-quote-context__label { color: var(--tc-text-3); }
.tc-quote-context__value { color: var(--brand-primary); font-weight: 700; }

.tc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--tc-border);
}
.tc-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text-2);
}
.tc-trust-item i {
  font-size: 13px;
  color: var(--brand-primary);
  opacity: .80;
}

.tc-quote-form-section { padding: 72px 0 96px; }
.tc-quote-form-wrap { max-width: 640px; margin-inline: auto; }

.tc-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.tc-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tc-text-2);
}
.tc-required { color: var(--brand-primary); margin-left: 2px; }

.tc-input {
  width: 100%;
  padding: 14px 18px;
  background: var(--tc-input-bg);
  border: 1.5px solid var(--tc-border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  color: var(--tc-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--tc-t) ease,
    box-shadow   var(--tc-t) ease,
    background   var(--tc-t) ease;
  box-sizing: border-box;
}
.tc-input::placeholder { color: var(--tc-text-3); font-weight: 400; }
.tc-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
  background: var(--tc-surface-2);
}
.brand-imperio-lashes .tc-input:focus,
.brand-imperio-medical .tc-input:focus,
.brand-loquay-peru .tc-input:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  background: rgba(255,255,255,.08);
}

.tc-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.tc-input.is-invalid {
  border-color: rgba(255,59,48,.40);
  animation: tc-shake 380ms cubic-bezier(.22,1,.36,1);
}
.tc-field-error {
  font-size: 11px;
  color: rgba(255,59,48,.85);
  font-weight: 600;
  min-height: 14px;
}
.tc-field-error:empty { display: none; }

.tc-wsp-preview {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 24px;
  min-height: 80px;
}
.tc-wsp-preview__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 10px;
}
.tc-wsp-preview__text {
  font-size: 13px;
  color: var(--tc-text-2);
  line-height: 1.65;
  white-space: pre-line;
  word-break: break-word;
}

.tc-form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--tc-text-3);
  text-align: center;
  justify-content: center;
  margin-top: 16px;
}
.tc-form-note i { font-size: 12px; color: var(--brand-primary); opacity: .60; }


/* --------------------------------------------------------------------------
   6. CATÁLOGO
   -------------------------------------------------------------------------- */

/* Hero del catálogo — sin borde inferior (lo lleva el trust strip) */
.tc-catalog-hero { padding-bottom: 0; border-bottom: none; }

.tc-catalog-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
}
.tc-catalog-hero__copy { flex: 1; }

/* ── Trust strip — señales de confianza ─────────────────────────────────── */
.tc-catalog-trust {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top:    1px solid var(--tc-border);
  border-bottom: 1px solid var(--tc-border);
  margin-bottom: 0;
}

.tc-catalog-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text-2);
  padding: 4px 24px 4px 0;
  position: relative;
}

.tc-catalog-trust__item + .tc-catalog-trust__item {
  padding-left: 24px;
}

.tc-catalog-trust__item + .tc-catalog-trust__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--tc-border);
}

.tc-catalog-trust__item i {
  font-size: 13px;
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* ── Buscador ────────────────────────────────────────────────────────────── */
.tc-catalog-hero__search { flex-shrink: 0; width: 320px; }

.tc-catalog-search-wrap {
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--tc-input-bg);
  border: 1.5px solid var(--tc-border);
  border-radius: 9999px;
  padding: 0 6px 0 18px;
  transition: border-color var(--tc-t) ease, box-shadow var(--tc-t) ease;
}
.tc-catalog-search-wrap:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,.04);
}
.tc-catalog-search-wrap.is-invalid {
  border-color: rgba(255,59,48,.45);
  animation: tc-shake 380ms cubic-bezier(.22,1,.36,1);
}

.tc-catalog-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--tc-text);
  outline: none;
  -webkit-appearance: none;
}
.tc-catalog-search__input::placeholder { color: var(--tc-text-3); }
.tc-catalog-search__input::-webkit-search-cancel-button { display: none; }

.tc-catalog-search__btn {
  width: 34px; height: 34px;
  border-radius: 50%; border: none;
  background: none; cursor: pointer;
  color: var(--tc-text-3);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--tc-t) ease, background var(--tc-t) ease;
}
.tc-catalog-search__btn:hover {
  color: var(--brand-primary);
  background: rgba(0,0,0,.04);
}


/* ── Catalog body ────────────────────────────────────────────────────────── */
.tc-catalog-body { padding: 0 0 96px; }


/* ── TOOLBAR — dos filas ─────────────────────────────────────────────────── */
.tc-catalog-toolbar {
  padding: 24px 0 0;
  border-bottom: 1px solid var(--tc-border);
  margin-bottom: 36px;
}

/* Fila 1: Filtros pills */
.tc-catalog-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}

/* Botón toggle de filtros — solo visible en mobile */
.tc-filter-toggle {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: var(--tc-surface);
  border: 1.5px solid var(--tc-border);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tc-text-2);
  cursor: pointer;
  position: relative;
  transition: border-color var(--tc-t) ease, color var(--tc-t) ease;
}
.tc-filter-toggle:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.tc-filter-toggle[aria-expanded="true"] {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(0,0,0,.02);
}

/* Dot de filtro activo en el toggle */
.tc-filter-toggle__dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
}

/* Nav de filtros */
.tc-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Separador entre filtros especiales y categorías */
.tc-filter-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--tc-border);
  flex-shrink: 0;
  margin: 0 2px;
  align-self: center;
}

/* Pills */
.tc-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--tc-text-2);
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  transition:
    background   var(--tc-t) ease,
    color        var(--tc-t) ease,
    border-color var(--tc-t) ease;
}
.tc-filter-pill:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.tc-filter-pill--active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
}
.tc-filter-pill--special {
  /* Pills de "Destacados" y "En oferta" — weight visual ligeramente mayor */
  letter-spacing: .04em;
}
.tc-filter-pill--special i {
  font-size: 10px;
  opacity: .85;
}
.tc-filter-pill__count {
  font-size: 9px;
  font-weight: 800;
  opacity: .65;
}

/* Fila 2: Meta (chips + count + sort) */
.tc-catalog-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

/* Active filter chips */
.tc-active-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.tc-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  background: rgba(var(--brand-primary-rgb, 0,157,218), .08);
  border: 1px solid rgba(var(--brand-primary-rgb, 0,157,218), .20);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
}
.tc-active-chip i { font-size: 9px; opacity: .75; }

.tc-active-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb, 0,157,218), .12);
  color: var(--brand-primary);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--tc-t) ease;
}
.tc-active-chip__remove:hover {
  background: rgba(var(--brand-primary-rgb, 0,157,218), .25);
}
.tc-active-chip__remove i { font-size: 8px; }

/* Count de resultados */
.tc-catalog-results-count {
  font-size: 12px;
  color: var(--tc-text-3);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sort form */
.tc-catalog-order-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.tc-catalog-order-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tc-text-3);
  white-space: nowrap;
}
.tc-catalog-order-select {
  font-size: 11px;
  font-family: inherit;
  font-weight: 700;
  color: var(--tc-text);
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: 8px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--tc-t) ease;
}
.tc-catalog-order-select:focus {
  border-color: var(--brand-primary);
}


/* ── Grid de productos ───────────────────────────────────────────────────── */
.tc-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}


/* ── Product card ────────────────────────────────────────────────────────── */
.tc-product-card {
  background: var(--tc-surface-2);
  border: 1px solid var(--tc-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform    var(--tc-t) var(--tc-ease),
    box-shadow   var(--tc-t) var(--tc-ease),
    border-color var(--tc-t) ease;
}
.tc-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.12);
}
.brand-imperio-lashes .tc-product-card:hover,
.brand-imperio-medical .tc-product-card:hover,
.brand-loquay-peru .tc-product-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  border-color: rgba(255,255,255,.12);
}

/* Media */
.tc-product-card__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tc-surface);
  position: relative;
}
.tc-product-card__media-link { display: block; }
.tc-product-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .50s var(--tc-ease);
}
.tc-product-card:hover .tc-product-card__img { transform: scale(1.04); }
.tc-product-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.tc-product-card__img-placeholder i {
  font-size: 40px;
  color: var(--tc-border);
  opacity: .50;
}

/* Badges */
.tc-product-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 9999px;
  pointer-events: none;
}
.tc-product-badge--sale     { background: var(--brand-primary); color: #ffffff; }
.tc-product-badge--featured { background: #1d1d1f; color: #ffffff; }
.tc-product-badge--new      {
  background: #34c759;
  color: #ffffff;
}

/* Body */
.tc-product-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.tc-product-card__cat {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.tc-product-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tc-text);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-top: 2px;
}
.tc-product-card__name a {
  color: inherit;
  text-decoration: none;
}
.tc-product-card__name a:hover { color: var(--brand-primary); }

.tc-product-card__desc {
  font-size: 12px;
  color: var(--tc-text-2);
  line-height: 1.55;
  flex: 1;
  margin-top: 2px;
}

/* Footer: precio arriba + acciones abajo */
.tc-product-card__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--tc-border);
  margin-top: auto;
}

.tc-product-card__footer-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tc-product-card__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--tc-text);
  letter-spacing: -.03em;
  line-height: 1;
}
.tc-product-card__price ins {
  text-decoration: none;
  color: var(--brand-primary);
}
.tc-product-card__price del {
  font-size: .72em;
  font-weight: 400;
  opacity: .40;
}

/* Acciones: Ver ficha | Cotizar — ambos pill full width */
.tc-product-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tc-product-card__actions .tc-btn {
  justify-content: center;
  padding-inline: 8px;
  letter-spacing: .10em;
}


/* ── Paginación ──────────────────────────────────────────────────────────── */
.tc-catalog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.tc-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--tc-text-2);
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  transition:
    background   var(--tc-t) ease,
    color        var(--tc-t) ease,
    border-color var(--tc-t) ease;
}
.tc-page-btn:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.tc-page-btn--active {
  background: var(--brand-primary);
  color: #ffffff;
  border-color: var(--brand-primary);
  pointer-events: none;
}

/* Botones nav ← → */
.tc-page-btn--nav { font-size: 11px; }
.tc-page-btn--disabled {
  opacity: .30;
  pointer-events: none;
  cursor: default;
}

.tc-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-text-3);
  pointer-events: none;
}


/* ── Estados vacíos y sin marca ──────────────────────────────────────────── */
.tc-catalog-empty,
.tc-catalog-no-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 80px 20px;
  border: 1px solid var(--tc-border);
  border-radius: 24px;
  background: var(--tc-surface);
  margin-block: 16px;
}
.tc-catalog-empty i,
.tc-catalog-no-brand i { font-size: 52px; color: var(--tc-border); opacity: .60; }
.tc-catalog-empty h2,
.tc-catalog-no-brand h2 {
  font-size: 22px; font-weight: 700;
  color: var(--tc-text); letter-spacing: -.02em;
}
.tc-catalog-empty p,
.tc-catalog-no-brand p { font-size: 14px; color: var(--tc-text-2); line-height: 1.65; }
.tc-catalog-brand-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }


/* --------------------------------------------------------------------------
   7. ANIMACIONES
   -------------------------------------------------------------------------- */
@keyframes tc-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  60%  { transform: translateX(-1.5px); }
  80%  { transform: translateX(1.5px); }
  100% { transform: translateX(0); }
}


/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .tc-wrap { padding-inline: 40px; }

  .tc-catalog-grid { grid-template-columns: repeat(3, 1fr); }

  .tc-catalog-hero__search { width: 260px; }

  .tc-catalog-trust__item {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 1024px) {

  /* Hero: stack */
  .tc-page-hero__inner { flex-direction: column; gap: 24px; }
  .tc-page-hero__copy { max-width: 100%; }
  .tc-page-hero__cta { width: 100%; }
  .tc-page-hero__cta .tc-btn { width: 100%; justify-content: center; }

  /* Contacto */
  .tc-contact-split__inner { grid-template-columns: 1fr; }
  .tc-contact-split__map { aspect-ratio: 16/9; min-height: 360px; }
  .tc-contact-split__panel { padding: 64px 40px; align-items: center; text-align: center; }
  .tc-contact-split__body { max-width: 100%; }
  .tc-contact-info__item { justify-content: center; }

  /* Catálogo: 2 columnas */
  .tc-catalog-grid { grid-template-columns: repeat(2, 1fr); }

  .tc-catalog-hero__inner { flex-direction: column; align-items: flex-start; padding-bottom: 24px; }
  .tc-catalog-hero__search { width: 100%; }

  /* Trust strip en tablet: scroll horizontal */
  .tc-catalog-trust {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    scrollbar-width: none;
  }
  .tc-catalog-trust::-webkit-scrollbar { display: none; }
  .tc-catalog-trust__item { flex-shrink: 0; }

  /* Toolbar: activar toggle, ocultar nav por defecto */
  .tc-filter-toggle { display: inline-flex; }

  .tc-catalog-filters {
    display: none;
    width: 100%;
    padding: 12px 0 4px;
  }
  .tc-catalog-filters.is-open { display: flex; }

  .tc-catalog-toolbar__meta { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .tc-wrap { padding-inline: 20px; }

  /* Cotización */
  .tc-trust-strip { gap: 14px 20px; }
  .tc-quote-form-wrap { max-width: 100%; }

  /* Catálogo */
  .tc-catalog-grid { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Trust strip: pills más compactos */
  .tc-catalog-trust__item { font-size: 11px; padding-inline: 12px; }

  /* Toolbar meta: stack */
  .tc-catalog-toolbar__meta {
    gap: 10px;
  }
  .tc-catalog-order-form { margin-left: 0; }

  /* Card price: menos grande */
  .tc-product-card__price { font-size: 15px; }

  /* Contacto */
  .tc-contact-split__panel { padding: 48px 20px; }
}

@media (max-width: 480px) {
  .tc-catalog-grid { grid-template-columns: 1fr; }

  .tc-catalog-trust {
    gap: 0;
  }
  .tc-catalog-trust__item + .tc-catalog-trust__item {
    padding-left: 12px;
  }

  .tc-product-card__actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   PATCH v2.1 — Ghost button + group titles + catalog social strip
   ========================================================================== */

/* ── Ghost button: borde visible en Lash Perú ──────────────────────────── */
/* --tc-border es rgba(0,0,0,.08) — invisible sobre blanco. Subimos sólo    */
/* en las tarjetas del catálogo LP para que el botón se lea como botón.     */
.brand-lash-peru .tc-product-card__actions .tc-btn--ghost {
  border-color: rgba(0, 0, 0, .22);
  color: var(--tc-text);
}
.brand-lash-peru .tc-product-card__actions .tc-btn--ghost:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(0, 157, 218, .05);
  transform: translateY(-1px);
}

/* ── Group titles: separador Productos / Servicios ─────────────────────── */
/* HTML esperado:                                                            */
/*   <h2 class="tc-catalog-group-title">                                     */
/*       Productos <span class="tc-group-count">12</span>                    */
/*   </h2>                                                                   */
.tc-catalog-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tc-text-2);
  padding-bottom: 20px;
  margin-bottom: 4px;
}
.tc-catalog-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tc-border);
  border-radius: 1px;
}

.tc-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tc-text-3);
}

/* ── Catalog social strip ───────────────────────────────────────────────── */
/* Renderizado via hook techy_catalog_after_body en lash-peru-hooks.php.    */
.tc-catalog-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 0 12px;
  border-top: 1px solid var(--tc-border);
  margin-top: 48px;
}
.tc-catalog-social__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tc-text-3);
  text-align: center;
}
.tc-catalog-social__items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tc-catalog-social__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 1.5px solid rgba(0, 0, 0, .14);
  border-radius: 9999px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-text-2);
  transition:
    border-color var(--tc-t) ease,
    color        var(--tc-t) ease,
    transform    var(--tc-t) var(--tc-ease);
}
.tc-catalog-social__item:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-2px);
}
.tc-catalog-social__item i { font-size: 14px; }
.tc-catalog-social__item--wsp:hover {
  border-color: #25D366;
  color: #25D366;
}

@media (max-width: 768px) {
  .tc-catalog-social { padding: 24px 0 8px; margin-top: 32px; }
  .tc-catalog-social__item span { display: none; }
  .tc-catalog-social__item { padding: 10px 14px; }
  .tc-catalog-social__item i { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
   Catalog Toggle Bar
   Archivo destino: assets/css/shared/core-pages.css
   Añadir después del bloque .tc-catalog-toolbar
   ────────────────────────────────────────────────────────────────────── */

.tc-catalog-toggle {
  display: flex;
  gap: 0.5rem;
  margin-block: 1.75rem 0.5rem;
  flex-wrap: wrap;
}

.tc-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--tc-border, #e0e0e0);
  border-radius: 2rem;
  background: transparent;
  color: var(--tc-text-muted, #666);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  line-height: 1;
}

.tc-toggle-btn:hover:not(:disabled) {
  border-color: var(--tc-accent, #b89a60);
  color: var(--tc-accent, #b89a60);
}

.tc-toggle-btn.active {
  background: var(--tc-accent, #b89a60);
  border-color: var(--tc-accent, #b89a60);
  color: #fff;
}

.tc-toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tc-toggle-btn__count {
  font-size: 0.75rem;
  opacity: 0.75;
  font-weight: 400;
}

/* ── Group empty state ──────────────────────────────────────────────── */
.tc-catalog-group__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  color: var(--tc-text-muted, #888);
  font-size: 0.9rem;
  text-align: center;
}

.tc-catalog-group__empty i {
  font-size: 1.75rem;
  opacity: 0.4;
}

/* ── Type Tabs ── */
.tc-type-tabs {
  display: flex;
  gap: .5rem;
  margin-block: 1.5rem;
}

.tc-type-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 2rem;
  font-size: .8125rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}

.tc-type-tab:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.tc-type-tab.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.tc-type-tab__count {
  font-size: .72rem;
  opacity: .75;
}

/* ── Results Header ── */
.tc-results-header {
  text-align: center;
  padding-block: .75rem 1.25rem;
}

.tc-results-summary {
  font-size: .8125rem;
  color: var(--text-muted, #888);
}

.tc-results-summary strong {
  color: var(--text-primary, inherit);
  font-weight: 600;
}