/* Fix ancho completo: una regla global del tema (.woocommerce-products-header + *,
   .hn-shop-toolbar { display:flex }) atrapa por accidente este wrapper porque queda
   justo despues de .woocommerce-products-header en el DOM, encogiendolo a su
   contenido en vez de ocupar el ancho completo. Se resetea aqui explicitamente. */
.hn-cat-template {
  display: block !important;
}

/* Full-bleed: iguala el ancho al hub /productos/ y a las landings tipo NRG
   (que usan Kadence "unboxed"/"full width"). Los taxonomy archives no tienen
   ese meta por página, así que se fuerza aquí, scoped a esta categoría. */
body.tax-product_cat.term-batidos .site-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* #primary conserva el padding nativo de Kadence (clamp ~5vw) aunque
   .site-container ya esté a 0 — eso dejaba el hero angosto con un margen
   visible a los lados en mobile (mismo fix ya aplicado en hn-cat-tes.css). */
body.tax-product_cat.term-batidos #primary {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Oculta el loop nativo de WooCommerce: las cards hand-authored de
   .hn-cat-product-grid ya muestran estos mismos productos con mejor copy. */
body.tax-product_cat.term-batidos ul.products { display: none !important; }

/* Kadence agrega 80px de margin-top a .content-area para dar aire bajo el
   page-title — pero ese title está oculto (display:none, ver más abajo),
   así que quedaba como un bloque de espacio en blanco vacío antes de las
   migas de pan. */
body.tax-product_cat.term-batidos .content-area { margin-top: 0 !important; }

/* =====================================================================
   hn-cat-batidos.css — paleta y componentes v2 (alineados a home)
   Verde brillante:  #78BE20   Verde oscuro (estándar): #266431
   WhatsApp:         #25D366   Cream/warm surface:      #FBF3E8
   Sage surface:      #F7F5EF  Dark hero/CTA:            #14210C
   Texto base:        #1c2b16  Texto muted:              #54634b
   ===================================================================== */

.hn-cat-template {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1c2b16;
  background: #fff;
}
.hn-cat-template * { box-sizing: border-box; }
.hn-cat-template h1,
.hn-cat-template h2,
.hn-cat-template h3 { font-family: 'Poppins', sans-serif; margin: 0; color: #14210c; }

.hn-cat-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.hn-cat-band { width: 100%; }
.hn-cat-band--white  { background: #fff; padding: 64px 0; }
.hn-cat-band--cream  { background: #FBF3E8; padding: 64px 0; }
.hn-cat-band--sage   { background: #F7F5EF; padding: 64px 0; }

/* ---------- Buttons (5 variantes de marca) ---------- */
.hn-cat-btn {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; text-decoration: none;
  padding: 14px 26px; border-radius: 50px; font-weight: 700; font-size: 15px;
  transition: transform .15s ease, background .15s ease;
}
.hn-cat-btn:hover { transform: translateY(-2px); }

.hn-cat-btn--wa {           /* Variante 5 — invariante */
  background: #25D366; color: #fff; box-shadow: 0 3px 14px rgba(37,211,102,.3);
}
.hn-cat-btn--wa:hover, .hn-cat-btn--wa:focus, .hn-cat-btn--wa:active { background: #1EB85A; color: #fff !important; }

.hn-cat-btn--dark {          /* Variante 2 — fondo blanco/cards */
  background: #266431; color: #fff; box-shadow: 0 8px 22px rgba(38,100,49,.22);
}
.hn-cat-btn--dark:hover { background: #2d7d3a; box-shadow: 0 12px 30px rgba(38,100,49,.3); }

.hn-cat-btn--outline {       /* Variante 3 — secundario */
  background: transparent; color: #266431;
  border: 2px solid #78BE20; padding: 12px 24px;
}
.hn-cat-btn--outline:hover { background: #eaf3de; }

.hn-cat-btn--ghost {         /* Variante 4 — ghost blanco sobre hero con foto */
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.6); padding: 12.5px 24.5px;
}
.hn-cat-btn--ghost:hover { border-color: rgba(255,255,255,1); }

/* ---------- Breadcrumb (mismo patrón que /objetivos/bajar-de-peso/) ---------- */
.hn-cat-breadcrumb { background: #F7F9F4; border-bottom: 1px solid #E5E7EB; padding: 12px 0; font-size: .82rem; }
.hn-cat-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0; margin: 0; }
.hn-cat-breadcrumb li { display: flex; align-items: center; gap: 6px; color: #6b7280; }
.hn-cat-breadcrumb li:not(:last-child)::after { content: '›'; color: #d7dbd3; }
.hn-cat-breadcrumb a { color: #67A81C; font-weight: 600; text-decoration: none; }
.hn-cat-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
/* !important en margin/padding/width: .hn-cat-hero y .hn-cat-band son
   nombres de clase reutilizados en otros CSS del tema (hn-cl-tienda.css,
   otras categorías) que LiteSpeed combina en un solo bundle. Sin
   !important, ese margen ajeno (de un componente hero totalmente
   distinto) ganaba la cascada y el hero quedaba angosto. Además
   `.hn-cat-band{width:100%}` fija el ancho a un valor absoluto (100% del
   padding-box del padre), lo que anula el truco del margen negativo — un
   width fijo no se expande con margin negativo, solo lo desplaza. Por
   eso la marquesina (sin la clase .hn-cat-band) sí llegaba al borde y el
   hero no. Se fuerza `width:auto` para permitir la expansión real. */
/* Byline autor + fecha, debajo de los botones del hero */
.hn-cat-hero__byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.hn-cat-hero__byline img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .25);
  flex-shrink: 0;
}

.hn-cat-hero__byline p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  line-height: 1.4;
}

.hn-cat-hero__byline a {
  color: #78BE20 !important;
  font-weight: 700;
  text-decoration: underline;
}

.hn-cat-hero__byline a:hover {
  color: #78BE20;
}

.hn-cat-hero {
  position: relative;
  background: #14210c;
  overflow: hidden;
  padding-top: 0 !important; /* neutraliza los 40px heredados de una regla compartida (WPCode #59) */
  width: auto !important;
  margin-left: calc(-1 * clamp(16px, 5vw, 48px)) !important;
  margin-right: calc(-1 * clamp(16px, 5vw, 48px)) !important;
  /* Igualado al patrón hn-cat-energia-deporte.css: min-height fijo de 620px con
     flex vertical-center, en vez del clamp basado en ratio de imagen. La imagen
     (categoria-batidos-hero.jpg, 1440x800) es del mismo shooting/ratio que las
     demás categorías, así que se comporta igual con object-fit:cover a esta altura. */
  min-height: 620px;
  display: flex;
  align-items: center;
}
.hn-cat-hero__media { display: block; z-index: 0; } /* <picture> es inline por defecto: sin display:block el hijo absoluto no hereda bien el contexto de bloque del ancestro posicionado (.hn-cat-hero). Confirmado con test aislado en isotest2-hv.html. */
.hn-cat-hero__media img {
  /* explicito y NO auto: un <img> reemplazado con width/height ambos auto SIEMPRE usa
     su ratio intrinseco (spec CSS 10.6.5), ignorando inset:0/percent, confirmado con
     test aislado real (picture+source). height fijo grande + overflow:hidden del
     .hn-cat-hero recorta el sobrante — funciona para cualquier hero real (<2000px). */
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
  /* "bottom" quedó de cuando el hero medía 420px (clamp por ratio de imagen); con el
     min-height:620px nuevo (igual a hn-cat-energia-deporte.css) ese anclaje cortaba
     la cabeza. "center" replica el default sin object-position de energia-deporte. */
  object-position: center center !important;
}
@media (max-width: 767px) {
  /* object-position: 72% (no 100%/right puro) para que el crop muestre la escena
     completa (mujer + shaker + canisters + berries), igual que hn-cat-energia-deporte.css —
     con 100% el recorte quedaba pegado al borde y solo se veían 2 envases sueltos. */
  .hn-cat-hero__media img { object-position: 72% bottom !important; }
  /* el scrim horizontal (oscuro-izquierda/claro-derecha) está pensado para desktop,
     donde el texto ocupa solo la mitad izquierda. En mobile el texto ocupa todo el
     ancho, así que ese mismo gradiente tapaba casi toda la foto de productos.
     Se cambia a vertical (patrón mobile de hn-cat-energia-deporte.css) para que
     el crop de la derecha (canisters) se vea a través del velo. */
  .hn-cat-hero__scrim {
    background: linear-gradient(180deg, rgba(20,33,12,.55) 0%, rgba(20,33,12,.42) 64%, rgba(20,33,12,.28) 100%) !important;
  }
  /* scrim más liviano en mobile = menos contraste de texto; se compensa con sombra */
  .hn-cat-hero h1,
  .hn-cat-hero__sub {
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
  }
}
.hn-cat-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* aligerado otra vez para igualar la opacidad de hn-cat-energia-deporte.css
     (antes .86/.8/.4/.05 tapaba más la foto que el resto de las categorías). */
  background: linear-gradient(90deg,
    rgba(20,33,12,.72) 0%, rgba(20,33,12,.58) 43%,
    rgba(20,33,12,.3) 72%, rgba(20,33,12,.1) 100%);
}
.hn-cat-hero .hn-cat-container { position: relative; z-index: 2; }
.hn-cat-hero__content { max-width: 640px; padding: 44px 0 44px; }
.hn-cat-hero__eyebrow {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #14210c; margin-bottom: 16px;
  /* el fondo de la píldora (#78BE20) viene de una regla compartida (WPCode #59);
     antes el texto quedaba en #a4dd5e (verde claro sobre verde) = contraste ~1.4:1 */
}
.hn-cat-hero h1 {
  font-size: clamp(2.25rem, 5.4vw, 4.6rem); line-height: .98; font-weight: 800; color: #fff; margin-bottom: 18px;
}
.hn-cat-hero h1 em { font-style: italic; color: #8ed128; }
.hn-cat-hero__sub {
  font-size: 16.5px; line-height: 1.6; color: #d9e3d1; margin: 0 0 28px; max-width: 490px;
}
.hn-cat-btns { display: flex; gap: 14px; margin-bottom: 0; flex-wrap: wrap; }

/* marquee ticker bajo el hero: mismo patrón que .bp-marquee de /objetivos/bajar-de-peso/.
   El contenedor real (.content-area) tiene 48px de padding lateral y el hero
   lo compensa con un margen negativo propio (regla ajena a este archivo);
   la marquesina, al no tener la clase .hn-cat-band, no heredaba ese
   márgen y quedaba angosta e "inset" respecto al hero. Se replica aquí. */
.hn-cat-hero__marquee {
  position: relative; overflow: hidden; padding: 14px 0;
  background: linear-gradient(180deg, #0e2705 0%, #163a09 100%);
  border-top: 1px solid rgba(120,190,32,.2);
  border-bottom: 1px solid rgba(120,190,32,.2);
  margin-left: calc(-1 * clamp(16px, 5vw, 48px)) !important;
  margin-right: calc(-1 * clamp(16px, 5vw, 48px)) !important;
}
.hn-cat-hero__marquee::before, .hn-cat-hero__marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.hn-cat-hero__marquee::before { left: 0; background: linear-gradient(to right, #0e2705, transparent); }
.hn-cat-hero__marquee::after { right: 0; background: linear-gradient(to left, #163a09, transparent); }
.hn-cat-hero__marquee-track {
  display: flex; width: max-content; white-space: nowrap;
  animation: hn-marquee 30s linear infinite;
}
.hn-cat-hero__marquee-set { display: flex; }
.hn-cat-hero__marquee-set span {
  display: flex; align-items: center; padding: 0 28px; white-space: nowrap;
  border-right: 1px solid rgba(120,190,32,.18);
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.82); letter-spacing: .01em;
}
.hn-cat-hero__marquee-set strong { color: #fff; font-weight: 700; }
@keyframes hn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hn-cat-hero__marquee-track { animation: none; }
}

/* ---------- Respuesta rápida + resumen ---------- */
.hn-cat-kicker {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #78BE20; margin-bottom: 10px;
}
.hn-cat-answer { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.hn-cat-answer h2 { font-size: 26px; margin-bottom: 16px; }
.hn-cat-answer p { font-size: 15px; line-height: 1.7; color: #4a5842; margin: 0 0 16px; }
.hn-cat-answer a { color: #266431; font-weight: 600; }
.hn-cat-summary {
  background: #FBF3E8; border-radius: 18px; padding: 26px 28px;
  border: 1px solid rgba(20,33,12,.06); box-shadow: 0 10px 30px rgba(20,33,12,.06);
}
.hn-cat-summary h3 { font-size: 15px; margin-bottom: 16px; }
.hn-cat-summary ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hn-cat-summary li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #3f4d38; }
.hn-cat-summary strong { color: #14210c; }
.hn-cat-summary__ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: #78BE20; color: #14210c; font-size: 11px; font-weight: 800;
}

/* ---------- Section headers ---------- */
.hn-cat-section-head { max-width: 680px; margin-bottom: 32px; }
.hn-cat-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.hn-cat-section-head h2 { font-size: 26px; margin: 0 0 12px; }
.hn-cat-section-head p { font-size: 14.5px; line-height: 1.6; color: #54634b; margin: 0; }

/* ---------- Product cards ---------- */
.hn-cat-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hn-cat-product-card {
  position: relative; background: #fff; border: 1px solid rgba(20,33,12,.08);
  border-radius: 18px; overflow: hidden; box-shadow: 0 6px 20px rgba(20,33,12,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hn-cat-product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,33,12,.1); }
.hn-cat-product-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: #78BE20; color: #fff; padding: 5px 12px; border-radius: 50px;
  font-size: 11px; font-weight: 700;
}
.hn-cat-product-card__badge--soft { background: rgba(20,33,12,.75); }
.hn-cat-product-card__media { height: 220px; background: #eef4e4; }
.hn-cat-product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-cat-product-card__body { padding: 24px; }
.hn-cat-product-card__type { font-size: 12px; color: #6b7a63; margin: 0 0 6px; }
.hn-cat-product-card__body h3 { font-size: 19px; margin: 0 0 8px; }
.hn-cat-product-card__body > p:not(.hn-cat-product-card__type) {
  font-size: 13.5px; line-height: 1.55; color: #54634b; margin: 0 0 16px;
}
.hn-cat-price { margin-bottom: 16px; }
.hn-cat-price strong { display: block; font-size: 21px; font-weight: 800; color: #14210c; }
.hn-cat-price span { font-size: 11.5px; color: #6b7a63; }
.hn-cat-product-card__body > .hn-cat-btn { width: 100%; }
.hn-cat-product-card__actions { display: flex; gap: 10px; }
.hn-cat-product-card__actions .hn-cat-btn--outline { flex: none; }
.hn-cat-product-card__actions .hn-cat-btn--wa { flex: 1; padding-left: 12px; padding-right: 12px; }
/* fix: una regla compartida ".hn-cat-template a" (color verde para links) gana por
   especificidad a .btn-wa y pintaba el texto verde oscuro sobre el fondo verde
   claro del botón — casi ilegible. Mismo fix ya aplicado en hn-cat-proteinas.css. */
.hn-cat-template a.prod-card-hub__wa { color: #fff; }

/* "Ver [producto] →" era un link suelto sin estilo; se convierte en botón
   outline (mismo look que .hn-cat-btn--outline, usado por ej. en "Ver plan
   completo" de /productos/packs/), a ancho completo para alinear con
   Agregar al carrito / Pedir por WhatsApp que sí son botones. */
.hn-cat-template a.prod-card-hub__cta-ver {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  border: 2px solid #78BE20;
  font-weight: 700;
  font-size: 15px;
  color: #266431;
  background: transparent;
  transition: background .15s ease, transform .15s ease;
  box-sizing: border-box;
}
.hn-cat-template a.prod-card-hub__cta-ver:hover {
  background: #eaf3de;
  transform: translateY(-2px);
}

/* ---------- Guía de elección ---------- */
.hn-cat-choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.hn-cat-choice {
  background: #eaf3de; border-radius: 16px; padding: 20px;
  box-shadow: 0 8px 22px rgba(20,33,12,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hn-cat-choice:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,33,12,.09); }
.hn-cat-choice span { display: block; font-size: 11.5px; color: #266431; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.hn-cat-choice h3 { font-size: 16px; margin: 0 0 6px; }
.hn-cat-choice p { font-size: 12.5px; color: #54634b; line-height: 1.5; margin: 0; }

/* ---------- Tabla comparativa ---------- */
.hn-cat-table-wrap {
  background: #fff; border-radius: 16px; overflow-x: auto;
  border: 1px solid rgba(20,33,12,.08); box-shadow: 0 12px 34px rgba(20,33,12,.08);
}
.hn-cat-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; }
.hn-cat-table thead tr { background: #14210c; color: #fff; }
.hn-cat-table th { text-align: left; font-size: 12.5px; font-weight: 700; padding: 16px 20px; }
.hn-cat-table td { padding: 16px 20px; border-top: 1px solid rgba(20,33,12,.06); color: #33422b; }
.hn-cat-table tbody tr:nth-child(even) { background: #FBF3E8; }
.hn-cat-table a { color: #266431; font-weight: 600; }
.hn-cat-note { font-size: 13px; color: #6b7a63; margin: 16px 0 0; }
.hn-cat-note a { color: #266431; font-weight: 700; }

/* ---------- Beneficios ---------- */
.hn-cat-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hn-cat-benefit {
  position: relative; background: #fff; border-radius: 16px; padding: 26px 22px 22px;
  box-shadow: 0 8px 24px rgba(20,33,12,.05); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hn-cat-benefit::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #78BE20, #266431);
}
.hn-cat-benefit:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20,33,12,.1); }
.hn-cat-benefit__icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, #eaf3de, #d3e8bd); color: #266431;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(38,100,49,.12);
}
.hn-cat-benefit__icon svg { width: 24px; height: 24px; }
.hn-cat-benefit h3 { font-size: 15.5px; margin: 0 0 6px; }
.hn-cat-benefit p { font-size: 13px; color: #54634b; line-height: 1.55; margin: 0; }

/* ---------- Preparación ---------- */
.hn-cat-prep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hn-cat-prep-card {
  border: 1px solid rgba(20,33,12,.08); border-radius: 16px; padding: 24px;
  background: #fff; box-shadow: 0 8px 24px rgba(20,33,12,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hn-cat-prep-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,33,12,.09); }
.hn-cat-prep-card__mark {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, #2d7d3a, #14210c); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(20,33,12,.25);
}
.hn-cat-prep-card__mark svg { width: 22px; height: 22px; }
.hn-cat-prep-card h3 { font-size: 16.5px; margin: 0 0 12px; }
.hn-cat-prep-card ol { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; color: #4a5842; line-height: 1.7; }
.hn-cat-prep-card > p { font-size: 12.5px; color: #6b7a63; line-height: 1.5; margin: 0; }
.hn-cat-prep-card a { color: #266431; font-weight: 600; }

/* ---------- CTA banda ---------- */
.hn-cat-cta {
  position: relative; overflow: hidden;
  background: #266431; padding: 56px 0; /* antes #14210c, casi negro */
}
.hn-cat-cta::before {
  content: ''; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(120,190,32,.28), transparent 70%);
}
.hn-cat-cta::after {
  content: ''; position: absolute; bottom: -80px; left: 8%; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(120,190,32,.14), transparent 70%);
}
.hn-cat-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hn-cat-cta h2 { font-size: 26px; color: #fff; margin: 0 0 10px; }
.hn-cat-cta p { font-size: 14.5px; line-height: 1.55; color: #c7d6ba; margin: 0; max-width: 560px; }
.hn-cat-cta__action { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hn-cat-cta__note { font-size: 12px; color: rgba(255,255,255,.65); text-align: center; max-width: 180px; }

/* ---------- Perfil asesora ---------- */
.hn-cat-expert { display: flex; gap: 32px; align-items: center; max-width: 920px; margin: 0 auto; }
.hn-cat-expert img { width: 140px; height: 140px; border-radius: 16px; object-fit: cover; flex: none; }
.hn-cat-expert__role { font-size: 12.5px; color: #6b7a63; margin: 0 0 6px; }
.hn-cat-expert h3 { font-size: 21px; margin: 0 0 12px; }
.hn-cat-expert > div > p:not(.hn-cat-expert__role) { font-size: 14px; line-height: 1.6; color: #4a5842; margin: 0 0 18px; max-width: 560px; }
.hn-cat-stats { display: flex; gap: 28px; margin-bottom: 18px; flex-wrap: wrap; }
.hn-cat-stat { display: flex; flex-direction: column; }
.hn-cat-stat strong { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 800; color: #266431; }
.hn-cat-stat span { font-size: 11.5px; color: #6b7a63; }

/* ---------- FAQ ---------- */
.hn-cat-faq-list {
  display: flex; flex-direction: column; gap: 1px; background: rgba(20,33,12,.1);
  border-radius: 14px; overflow: hidden; max-width: 840px; margin: 0 auto;
  box-shadow: 0 10px 30px rgba(20,33,12,.06);
}
.hn-cat-faq-list details { background: #fff; padding: 20px 24px; }
.hn-cat-faq-list summary {
  font-size: 15px; font-weight: 600; color: #14210c; cursor: pointer; list-style: none;
}
.hn-cat-faq-list summary::-webkit-details-marker { display: none; }
.hn-cat-faq-list summary::after { content: '+'; float: right; color: #78BE20; font-weight: 700; font-size: 18px; }
.hn-cat-faq-list details[open] summary::after { content: '–'; }
.hn-cat-faq-list details p { font-size: 13.5px; line-height: 1.6; color: #4a5842; margin: 12px 0 0; }

/* ---------- Disclaimer / footer note ---------- */
.hn-cat-disclaimer { padding: 0 0 40px; }
.hn-cat-disclaimer .hn-cat-container {
  max-width: 840px; border-top: 1px solid rgba(20,33,12,.1); padding-top: 24px;
}
.hn-cat-disclaimer p { font-size: 12px; line-height: 1.6; color: #8b978a; margin: 0 0 10px; }

/* ---------- Responsive (mobile from original template preserved above) ---------- */
@media (max-width: 900px) {
  .hn-cat-answer,
  .hn-cat-product-grid,
  .hn-cat-choice-grid,
  .hn-cat-benefit-grid,
  .hn-cat-prep-grid { grid-template-columns: 1fr; }
  .hn-cat-expert { flex-direction: column; text-align: center; }
  /* align-items:stretch (no flex-start): con flex-start los hijos (texto y
     botón) solo ocupaban su ancho de contenido en vez del 100% disponible —
     eso desbordaba el párrafo por el borde derecho y descentraba el botón
     respecto a la tarjeta completa. */
  .hn-cat-cta__inner {
    flex-direction: column; align-items: stretch; text-align: center;
  }
  .hn-cat-cta p { max-width: none; }
}
/* Fuera del media query de 900px: a ≤680px una regla combinada de otra
   categoría (".hn-cat-template .hn-cat-container", 2 clases, @680px)
   pisaba mi padding de una sola clase pese al !important — más
   específica gana el empate de !important. Se sube la especificidad. */
body.tax-product_cat.term-batidos .hn-cat-cta__inner {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 900px) {
  /* mismo fix que hn-cat-energia-deporte.css: el min-height:620px fijo del
     desktop deja el hero desproporcionado en mobile (mucho fondo oscuro,
     poca imagen visible). Se libera la altura al contenido real. */
  .hn-cat-hero {
    min-height: auto;
    display: block;
    padding-top: 72px;
    padding-bottom: 64px;
  }
  .hn-cat-hero h1 { font-size: 32px; }
  .hn-cat-container { padding: 0 24px; }
  .hn-cat-benefit-grid,
  .hn-cat-faq-list,
  .hn-cat-section-head h2,
  .hn-cat-answer h2,
  .hn-cat-cta h2 { overflow-wrap: anywhere; }
}

/* Ocultar grid nativo WooCommerce duplicado (las cards custom .hn-cat-product-card ya cubren esto) */
.woocommerce-products-header,
.kadence-shop-top-row,
ul.products.product-archive {
  display: none !important;
}

/* autor-card-v2 .autor-stats: falta el tamaño del svg (se renderiza al
   tamaño intrínseco, ~635px, e infla toda la sección). Mismo fix aplicado
   en hn-cl-objetivos.css y hn-cl-product.css. */
/* .autor-stats (el contenedor) nunca tuvo display:flex en ningún archivo que
   carga batidos — la única regla con ese nombre vive en el <style> inline
   de /objetivos/bajar-de-peso/ (post 372), que esta página no incluye. Sin
   ella, .autor-stats caía al display:block por defecto y cada .autor-stat
   (que sí es flex individualmente) se apilaba en su propia línea en vez de
   ir en fila. */
.autor-stats {
  display: flex; flex-wrap: wrap; gap: 20px;
  padding: 20px 28px; background: #F7F9F4; border-bottom: 1px solid #E5E7EB;
}
.autor-stat { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #1c2b16; }
.autor-stat svg { width: 18px; height: 18px; color: #78BE20; flex-shrink: 0; }
.autor-stat strong { font-weight: 700; }

/* autor-av: la foto no tenía position:absolute, así que quedaba al lado del
   fallback "MP" en vez de taparlo (se veían los dos superpuestos). Mismo
   fix que usa /objetivos/bajar-de-peso/. También el subtítulo bajo el
   nombre quedaba en #1c2b16 (heredado) sobre el header verde oscuro,
   prácticamente ilegible. */
/* Causa real del bug fondo/"MP" superpuestos: hn-home.css espera que la foto
   tenga la clase .autor-av__foto (no la usamos, es un <img> simple) y le da
   a .autor-av__fallback un z-index:1 propio — así que el fallback pintaba
   ENCIMA de la foto aunque la foto ya estuviera bien posicionada. Como
   siempre hay foto real, más simple y robusto ocultar el fallback. */
.autor-av { position: relative; overflow: hidden; }
.autor-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 2; }
.autor-av__fallback { display: none !important; }
.autor-card-v2__top-info p { color: rgba(255,255,255,.78) !important; }

/* .anim llega a opacity:0 vía hn-home.css (dependencia de este archivo),
   pensado para revelarse con el IntersectionObserver del home. Esta página
   no carga ese script, así que el autor-card-v2 quedaba invisible pero
   ocupando su alto — el "espacio en blanco" antes de la FAQ. Mismo fix ya
   usado en hn-cl-objetivos.css para páginas sin el script de reveal. */
.anim { opacity: 1 !important; transform: none !important; }

/* .autor-card-v2__bottom es un grid de 2 columnas (1fr + barra lateral de
   240px) en hn-home.css, pensado para otro layout con solo 2 items — con
   nuestros 3 <p> (párrafo, link, línea de revisión) el auto-placement de
   grid ponía el link "Conoce la trayectoria..." en la segunda columna,
   al lado del párrafo, en vez de debajo. Se fuerza una sola columna. */
.autor-card-v2__bottom {
  grid-template-columns: 1fr !important;
  /* el gap:40px original era el espacio ENTRE columnas; en una sola
     columna ese mismo gap pasa a separar cada fila (los 3 <p>), sumado
     al margin-bottom:12px propio de cada <p> — quedaba muy espaciado. */
  gap: 4px !important;
  padding: 24px 28px !important;
}
.autor-card-v2__bottom p { margin-bottom: 8px !important; }
.autor-card-v2__bottom p:last-child { margin-bottom: 0 !important; }

/* fix: el CSS combinado cacheado por LiteSpeed para esta URL trae una regla
   "body.tax-product_cat.term-batidos .hn-cat-template{margin-left:-49px!important;
   padding-left:49px!important}" que ya NO existe en este archivo fuente (era de
   cuando #primary tenía padding nativo de Kadence; ahora #primary va a 0 más
   arriba). Esa regla vieja seguía ganando por venir después en el bundle cacheado
   y desangraba el hero 49px por la derecha. Se neutraliza al final del archivo
   para asegurar que esta versión sea la última en el orden de cascada. */
@media (max-width: 680px) {
  /* especificidad reforzada (.hn-cat-template repetido) a propósito: el bundle
     cacheado sigue sirviendo la regla vieja de -49px DESPUÉS de esta en el
     orden final pese a purgar, así que un empate de especificidad no alcanza. */
  body.tax-product_cat.term-batidos .hn-cat-template.hn-cat-template {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* Fix propio de /co/: el theme kadence-child-co usa "Entry Hero" para el
   título de archivo de categoría (entry-hero product-archive-hero-section),
   distinto del wrapper .woocommerce-products-header que usa .cl. Se oculta
   aquí, scoped a esta categoría, para no duplicar el H1 con el hero propio
   de la plantilla hn-cat. 2026-09-05. */
body.tax-product_cat.term-batidos .entry-hero.product-archive-hero-section {
  display: none !important;
}

/* Fix propio de /co/: .hn-cat-container es hijo flex de .hn-cat-hero sin
   flex-grow, así que por defecto se encoge al ancho de su contenido
   (736px) en vez de llenar la fila como en .cl (donde algo en la cascada
   de esa red -- no reproducido aquí -- lo fuerza a ~1180px). Se fuerza
   explícito para que el texto quede pegado a la izquierda con la foto
   visible a la derecha, scoped solo al hero. 2026-09-05. */
body.tax-product_cat.term-batidos .hn-cat-hero .hn-cat-container { width: 100% !important; max-width: 1200px !important; }

/* ===================================================================
   MARQUESINA CON ICONOS (componente hn-marquee/mq-item real del sitio,
   portado de hn-home.css de .cl — no el .hn-cat-hero__marquee viejo).
   2026-09-05.
   =================================================================== */
.hn-marquee {
  background: linear-gradient(180deg, #0e2705 0%, #163a09 100%);
  border-bottom: 1px solid rgba(120,190,32,.2);
  overflow: hidden;
  padding: 14px 0;
  position: relative;
  list-style: none;
}
.hn-marquee::before,
.hn-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.hn-marquee::before {
  left: 0;
  background: linear-gradient(to right, #0e2705, transparent);
}
.hn-marquee::after {
  right: 0;
  background: linear-gradient(to left, #163a09, transparent);
}
.hn-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0; padding: 0;
  list-style: none;
  animation: hn-marquee-scroll 40s linear infinite;
}
.hn-marquee:hover .hn-marquee__track { animation-play-state: paused; }
@keyframes hn-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hn-marquee__track { animation: none; }
}
.mq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  white-space: nowrap;
  border-right: 1px solid rgba(120,190,32,.18);
}
.mq-item:last-child { border-right: none; }
.mq-item__icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: #78BE20;
  display: flex; align-items: center; justify-content: center;
}
.mq-item__icon svg { width: 18px; height: 18px; }
.mq-item__text {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  letter-spacing: .01em;
}
.mq-item__text strong {
  color: #fff;
  font-weight: 700;
}

/* Fix propio de /co/: a diferencia de .cl, el theme kadence-child-co no
   agrega padding lateral a .content-area, así que el margen negativo de
   .hn-cat-hero (pensado para compensar ese padding y llegar al borde)
   sobra aquí y desborda la foto ~48px más allá del viewport a cualquier
   ancho — se ve la foto más ancha que el header/marquesina. Se anula el
   margen negativo para /co/, scoped a esta categoría. 2026-09-05. */
body.tax-product_cat.term-batidos .hn-cat-hero {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Fix propio de /co/: Batidos solo tiene 2 tarjetas de preparación (Fórmula 1
   y NutriSoup), no 3 como el grid genérico asume -- quedaban pegadas a la
   izquierda con una columna vacía a la derecha. Se centra el grid para 2
   items, con ancho máximo para que las tarjetas no queden demasiado anchas
   en desktop. 2026-09-05. */
.hn-cat-prep-grid {
  grid-template-columns: repeat(2, minmax(280px, 380px)) !important;
  justify-content: center;
}
@media (max-width: 680px) {
  .hn-cat-prep-grid { grid-template-columns: 1fr !important; }
}

/* ===== Sección Cliente Preferente — portada del componente real de fichas
   de producto (snippet 5710, "HN — Componentes Ficha de Producto CSS — CO"),
   que no se carga en páginas de categoría. Mismo patrón compliant ya
   aprobado: sin mostrar precio con descuento, solo el concepto + costo de
   membresía + link a /cliente-preferente/. 2026-09-05. ===== */
.hn-cp-sec { padding: 64px 0; background: #F7F9F4; }
.cp-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 32px 0; }
.hn-cp-sec .cp-benefit { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.07); transition: transform .22s ease, box-shadow .22s ease; }
.hn-cp-sec .cp-benefit:hover { transform: translateY(-4px); box-shadow: 0 6px 30px rgba(0,0,0,.11); }
.cp-benefit__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #EBF7D4; color: #67A81C; display: flex; align-items: center; justify-content: center; }
.cp-benefit__icon svg { width: 22px; height: 22px; }
.cp-benefit h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.cp-benefit p { font-size: .9rem; color: #6B7280; line-height: 1.5; margin: 0; }
.hn-cp-sec .cp-cta-wrap { text-align: center; margin-top: 32px; background: #fff; border-radius: 18px; padding: 32px 24px; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.cp-cta-wrap p { font-size: .9rem; color: #6B7280; margin-top: 10px; }

/* ===== Fixes de UI reportados por Hector — 2026-09-06 =====
   1) FAQ: doble símbolo al abrir (marcador nativo del navegador + nuestro
      +/-). list-style:none no basta en Chrome moderno, hay que anular
      tambien ::marker explicitamente.
   2) Boton "Ver X" (ghost) sin contraste sobre la foto del hero: algo mas
      en la cascada le gana al color:#fff sin !important.
   3) Doble check en "Antes de decidir": el icono propio duplicado por
      algo mas en la cascada (probable estilo generico compartido). */
.hn-cat-faq-list summary::marker { content: ''; display: none; }
.hn-cat-faq-list summary { list-style: none !important; }
.hn-cat-btn--ghost { color: #fff !important; }
.hn-cat-summary li::marker { content: ''; }
.hn-cat-summary li::before { content: none !important; }

/* Fix definitivo boton "Ver X" (ghost): color base y estados (hover/focus/
   visited) pisados por una regla global de enlaces del theme con mayor
   especificidad/orden. Se sube especificidad + se cubren todos los
   pseudo-estados. 2026-09-06. */
.hn-cat-hero .hn-cat-btns a.hn-cat-btn--ghost,
.hn-cat-hero .hn-cat-btns a.hn-cat-btn--ghost:link,
.hn-cat-hero .hn-cat-btns a.hn-cat-btn--ghost:visited,
.hn-cat-hero .hn-cat-btns a.hn-cat-btn--ghost:hover,
.hn-cat-hero .hn-cat-btns a.hn-cat-btn--ghost:focus,
.hn-cat-hero .hn-cat-btns a.hn-cat-btn--ghost:active {
  color: #fff !important;
}