/* ===== UX Enhancements – Carnes Campo Noble ===== */

/* --- Precio hero (cortes finos — por pieza) --- */
.cn-price-hero {
  margin: 4px 0 2px;
}
.cn-price-hero-range {
  font-size: 28px;
  font-weight: 700;
  color: #3d3d3d;
  line-height: 1.2;
}
.cn-price-hero-meta {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}
.cn-price-hero-meta span {
  color: #bc2933;
  font-weight: 600;
}
.cn-price-hero-note {
  font-size: 11px;
  color: #aaa;
  margin-top: 6px;
  font-style: italic;
}

/* --- Precio por libra --- */
.cn-price-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.cn-price-unit {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  letter-spacing: .02em;
}
.cn-price-range {
  display: block;
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  background: #f8f4f0;
  border-left: 3px solid #bc2933;
  padding: 7px 12px;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}
.cn-price-range strong { color: #3d3d3d; }
.cn-price-range small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #888;
  font-weight: 400;
}

/* --- Badge disponibilidad + entrega --- */
.cn-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.cn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.cn-badge-stock {
  display: none; /* oculto hasta conectar inventario real */
}
.cn-badge-delivery {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}
.cn-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* --- Nota precio mejorada (reemplaza ⚠️) --- */
.product-short-description .product-short-description {
  display: none !important; /* ocultar nota duplicada */
}

/* --- Guía de preparación --- */
.cn-cooking-section {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.cn-cooking-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: 12px;
}
.cn-cooking-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cn-cooking-card {
  flex: 1;
  min-width: 90px;
  background: #fff;
  border: 1px solid #e8e0d8;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.cn-cooking-card:hover {
  border-color: #bc2933;
  box-shadow: 0 2px 8px rgba(188,41,51,.12);
}
.cn-cooking-card .cn-method {
  font-size: 20px;
  display: block;
  margin-bottom: 6px;
}
.cn-cooking-card .cn-method-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #3d3d3d;
  display: block;
}
.cn-cooking-card .cn-method-detail {
  font-size: 11px;
  color: #888;
  margin-top: 3px;
  display: block;
  line-height: 1.4;
}

/* --- Diagrama del corte --- */
.cn-cut-section {
  display: none;
}
  margin-top: 22px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.cn-cut-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: 12px;
}
.cn-cut-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cn-cut-diagram {
  flex-shrink: 0;
  position: relative;
  width: 180px;
}
.cn-cut-diagram svg {
  width: 100%;
  height: auto;
}
.cn-cut-info {
  flex: 1;
}
.cn-cut-name {
  font-size: 15px;
  font-weight: 700;
  color: #3d3d3d;
  margin-bottom: 4px;
}
.cn-cut-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}
.cn-servings {
  margin-top: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3d3d3d;
}
.cn-servings strong { color: #bc2933; }

/* --- Productos relacionados mejorados --- */
.related .product-section-title-related {
  font-size: 13px !important;
  letter-spacing: .08em;
  color: #888 !important;
}

/* --- Unidad "lb" en cantidad --- */
.quantity.buttons_added {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cn-qty-unit {
  font-size: 12px;
  font-weight: 700;
  color: #888;
  letter-spacing: .06em;
  margin-left: 8px;
  text-transform: uppercase;
  opacity: 0.4;
  transition: opacity .2s;
}

/* --- Nota de equivalencia unidad → libras --- */
.cn-qty-hint {
  font-size: 12px;
  color: #888;
  margin: 6px 0 14px;
  line-height: 1.4;
}
.cn-qty-hint strong {
  color: #3d3d3d;
}

/* --- Selector pieza completa / por libras --- */
.cn-sale-type {
  display: none;
}
  margin-bottom: 18px;
}
.cn-sale-type-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: 10px;
}
.cn-sale-type-options {
  display: flex;
  gap: 10px;
}
.cn-sale-option {
  flex: 1;
  cursor: pointer;
}
.cn-sale-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cn-sale-option-inner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 2px solid #e0d8d0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  background: #fff;
}
.cn-sale-option.active .cn-sale-option-inner {
  border-color: #bc2933;
  background: #fdf5f5;
  box-shadow: 0 2px 8px rgba(188,41,51,.12);
}
.cn-sale-option-title {
  font-size: 13px;
  font-weight: 700;
  color: #3d3d3d;
}
.cn-sale-option-desc {
  font-size: 11px;
  color: #888;
}
.cn-sale-premium {
  color: #bc2933 !important;
  font-weight: 700;
}

/* ===== Footer rediseñado ===== */

.cn-footer {
  background: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,.07);
  font-family: 'Lato', sans-serif;
}

.cn-footer-main {
  padding: 64px 20px 48px;
}

.cn-footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

/* Brand */
.cn-footer-logo {
  height: 52px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  opacity: .9;
}
.cn-footer-tagline {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  line-height: 1.7;
  margin: 0 0 20px;
}
.cn-footer-social {
  display: flex;
  gap: 14px;
}
.cn-footer-social a {
  color: rgba(255,255,255,.3);
  transition: color .2s;
  display: flex;
}
.cn-footer-social a:hover { color: #eb6c2d; }

/* Labels de sección */
.cn-footer-section-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin-bottom: 16px;
}

/* Nav */
.cn-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cn-footer-nav a {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .2s;
}
.cn-footer-nav a:hover { color: #fff; }

/* Locations */
.cn-footer-location {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cn-footer-location p {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin: 0;
}
.cn-footer-location a {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s;
}
.cn-footer-location a:hover { color: #fff; }

/* Newsletter */
.cn-footer-newsletter p {
  font-size: 12px;
  color: rgba(255,255,255,.35);
  line-height: 1.6;
  margin: 0 0 14px;
}
.cn-footer-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.cn-footer-form input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: border-color .2s;
  font-family: 'Lato', sans-serif;
}
.cn-footer-form input::placeholder { color: rgba(255,255,255,.25); }
.cn-footer-form input:focus { border-color: rgba(255,255,255,.3); }
.cn-footer-form button {
  background: #bc2933;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  transition: background .2s;
}
.cn-footer-form button:hover { background: #9e1f28; }

/* Bottom bar */
.cn-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 18px 20px;
}
.cn-footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cn-footer-bottom span {
  font-size: 11px;
  color: rgba(255,255,255,.2);
  letter-spacing: .03em;
}

/* Responsive */
@media (max-width: 900px) {
  .cn-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .cn-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cn-footer-top { grid-template-columns: 1fr; }
  .cn-footer-bottom .container { flex-direction: column; gap: 6px; }
}

/* ===== Gradient fade en el hero ===== */

#banner-626862568 {
  position: relative;
}
#banner-626862568::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent 0%, #111 100%);
  pointer-events: none;
  z-index: 2;
}

/* ===== Banner de marcas ===== */

.cn-brands-banner {
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 22px 0 28px;
  overflow: hidden;
  margin-top: -1px; /* pega sin gap con el gradiente del hero */
}

.cn-brands-label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
  margin-bottom: 18px;
}

.cn-brands-track-wrap {
  overflow: hidden;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.cn-brands-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: cn-brands-scroll 38s linear infinite;
}
.cn-brands-track:hover {
  animation-play-state: paused;
}

.cn-brand-item {
  color: rgba(255,255,255,.35);
  white-space: nowrap;
  padding: 0 8px;
  transition: color .2s;
  cursor: default;
}
.cn-brand-item:hover {
  color: rgba(255,255,255,.85);
}

.cn-brand-sep {
  color: rgba(255,255,255,.12);
  font-size: 10px;
  padding: 0 4px;
  flex-shrink: 0;
}

@keyframes cn-brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Sección de catálogo rediseñada ===== */

.cn-catalog {
  padding: 16px 0 32px;
}
.cn-catalog-header {
  margin-bottom: 28px;
}
.cn-catalog-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.cn-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Card */
.cn-catalog-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.cn-catalog-card.cn-cat-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Imagen */
.cn-catalog-img-wrap {
  position: absolute;
  inset: 0;
}
.cn-catalog-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  border-radius: 0;
}
.cn-catalog-card:hover .cn-catalog-img-wrap img {
  transform: scale(1.06);
}

/* Overlay gradiente */
.cn-catalog-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,6,4,.88) 0%,
    rgba(10,6,4,.3) 55%,
    rgba(10,6,4,.1) 100%
  );
  transition: background .3s;
}
.cn-catalog-card:hover .cn-catalog-overlay {
  background: linear-gradient(
    to top,
    rgba(10,6,4,.92) 0%,
    rgba(10,6,4,.4) 55%,
    rgba(10,6,4,.15) 100%
  );
}

/* Texto encima */
.cn-catalog-text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cn-catalog-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cn-catalog-badge {
  display: inline-block;
  background: rgba(188,41,51,.25);
  border: 1px solid rgba(188,41,51,.4);
  color: #f08080 !important;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}
.cn-catalog-name {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}
.cn-catalog-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,0);
  transition: color .25s, gap .2s;
}
.cn-catalog-card:hover .cn-catalog-arrow {
  color: #eb6c2d;
  gap: 10px;
}

/* Tag regenerativa */
.cn-catalog-regen-tag {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: .03em;
}

/* Acento naranja en la card regenerativa */
.cn-catalog-card--regen .cn-catalog-name {
  color: #fff;
}
.cn-catalog-card--regen:hover .cn-catalog-overlay {
  background: linear-gradient(
    to top,
    rgba(10,6,4,.93) 0%,
    rgba(60,20,10,.35) 55%,
    rgba(10,6,4,.1) 100%
  );
}

@media (max-width: 768px) {
  .cn-catalog-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cn-catalog-card { aspect-ratio: 4 / 3; }
}

/* ===== Sección de servicios rediseñada ===== */

.cn-services {
  padding: 20px 0 40px;
}

/* Header */
.cn-services-header {
  margin-bottom: 52px;
}
.cn-services-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #eb6c2d;
  margin-bottom: 16px;
  padding-left: 2px;
}
.cn-services-headline {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.02em;
}
.cn-services-headline em {
  font-style: italic;
  color: #bc2933;
  font-family: 'Dancing Script', cursive;
  font-size: 1.1em;
  font-weight: 700;
}

/* Grid */
.cn-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* Card */
.cn-service-card {
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.cn-service-card.cn-revealed {
  opacity: 1;
  transform: translateY(0);
}

.cn-service-card-inner {
  padding: 36px 32px 32px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background .25s;
  box-sizing: border-box;
}
.cn-service-card:hover .cn-service-card-inner {
  background: rgba(255,255,255,.07);
}

/* Línea accent top — aparece en hover */
.cn-service-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #bc2933;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.cn-service-card:hover .cn-service-accent,
.cn-service-card.cn-revealed .cn-service-accent {
  transform: scaleX(1);
  transition: transform .5s ease .1s;
}

/* Número */
.cn-service-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #bc2933;
  font-family: 'Lato', sans-serif;
}

/* Cuerpo */
.cn-service-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.cn-service-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}

.cn-service-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  margin: 0;
}

/* Tags */
.cn-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.cn-service-tags span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* CTA dentro de card */
.cn-service-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #eb6c2d;
  text-decoration: none;
  letter-spacing: .02em;
  margin-top: 4px;
  transition: gap .2s;
}
.cn-service-cta:hover { gap: 10px; }

/* Responsive */
@media (max-width: 768px) {
  .cn-services-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .cn-services-headline { font-size: 38px; }
}

/* ===== Mock carrito ===== */

.cn-cart-mock {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 0 48px;
}

.cn-cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}
.cn-cart-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  padding: 0 12px 12px;
  border-bottom: 2px solid #eee;
  text-align: left;
}
.cn-cart-table thead th:nth-child(4),
.cn-cart-table thead th:nth-child(5) { text-align: right; }

.cn-cart-row td {
  padding: 20px 12px;
  border-bottom: 1px solid #f0ebe5;
  vertical-align: middle;
}

.cn-cart-img img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.cn-cart-name a {
  font-size: 15px;
  font-weight: 700;
  color: #3d3d3d;
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}
.cn-cart-name a:hover { color: #bc2933; }
.cn-cart-meta {
  font-size: 12px;
  color: #888;
}

.cn-cart-price,
.cn-cart-subtotal {
  text-align: right;
}
.cn-range {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #3d3d3d;
}
.cn-range-label {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}

.cn-cart-qty {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: #3d3d3d;
}

/* Aviso de precio estimado */
.cn-cart-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff8f0;
  border: 1px solid #ffcc80;
  border-left: 4px solid #eb6c2d;
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  font-size: 13px;
  color: #7a4a1a;
  line-height: 1.6;
  margin-bottom: 32px;
}
.cn-cart-notice svg { flex-shrink: 0; margin-top: 2px; }

/* Totales */
.cn-cart-totals {
  display: flex;
  justify-content: flex-end;
}
.cn-cart-totals-inner {
  width: 340px;
  background: #faf8f6;
  border: 1px solid #e8e0d8;
  border-radius: 10px;
  padding: 20px 24px;
}
.cn-cart-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: #555;
  padding: 8px 0;
  border-bottom: 1px solid #ede8e2;
}
.cn-cart-totals-row:last-of-type { border-bottom: none; }
.cn-cart-totals-row span:first-child { font-weight: 600; color: #3d3d3d; }
.cn-muted { color: #aaa; font-size: 13px; }

.cn-cart-total-final {
  font-size: 16px !important;
  padding: 16px 0 8px !important;
}
.cn-cart-total-final span:last-child {
  font-weight: 700;
  color: #bc2933;
}
.cn-cart-total-final em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  margin-left: 4px;
}

.cn-cart-checkout-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  background: #bc2933;
  color: #fff !important;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s;
}
.cn-cart-checkout-btn:hover { background: #9e1f28; }

/* --- Border radius en galería de producto --- */
.woocommerce-product-gallery__image a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.woocommerce-product-gallery__image img {
  border-radius: 10px;
}

/* --- Tabs: ocultar descripción duplicada --- */
#tab-description p:first-child {
  display: none;
}
.cn-tab-enhanced {
  line-height: 1.8;
  color: #555;
}