/*
 * pchela-sections.css — Transplante CSS del mockup v2 (Etapa 3 del PLAN-MAESTRO)
 * ------------------------------------------------------------------------------
 * Clases .pchela-* autoradas leyendo los estilos INLINE de
 * _pchela_src_v2/proyecto/01 Header + Footer.dc.html y partial-header-desktop.dc.html.
 * Tokens: PCHELA-DESIGN-SYSTEM.md (variables :root definidas en style.css del child).
 * Reglas: SIN !important (gana por orden de carga y especificidad), sin comillas
 * escapadas. Base de estilo de las Etapas 3-6.
 *
 * Índice:
 *   0. Tokens extra
 *   1. Announcement bar (Astra above-header + HTML 1)
 *   2. Header sticky (Astra free no trae sticky nativo → CSS)
 *   3. Menú principal: ítems pill + dropdown
 *   4. Buscador de productos (shortcode [pchela_buscador], form nativo de Woo)
 *   5. Cuenta + carrito (elementos nativos de Astra)
 *   6. Header mobile (fila de búsqueda + trigger)
 *   7. Footer navy (widgets + barra legal + chips de pago)
 *   8. Botón flotante de WhatsApp
 *   9. Home (Etapa 4) — hero, trust strip, categorías, grillas Woo, marcas,
 *      por qué Pchelá, CTA mayorista · 9.11-9.12 (Etapa 4-bis): círculos de
 *      accesos rápidos + banner principal · 9.7 banda de marcas MOVIDA arriba
 *      (2026-07-28, feedback administradora) y compactada — ver nota en 9.7
 *   10. Tienda / PLP (Etapa 5 · Parte A) — grilla, card, sidebar de filtros
 *   11. Producto / PDP (Etapa 5 · Parte B) — galería, columna derecha,
 *      buy box, bloque de confianza, tabs, related "también compraron"
 *   12. Mecánicas de conversión (Etapa 5 · Parte C) — barra de envío gratis
 *   13. Carrito / Checkout (Etapa 5 · Parte D) — bloques nativos woocommerce/
 *      cart y woocommerce/checkout (Store API): líneas, resumen sticky,
 *      cross-sell, carrito vacío, pasos de checkout, radios de envío/pago,
 *      13.7 notices de WooCommerce site-wide, 13.9 fix supervisor (oculta
 *      descripción corta en líneas de carrito/checkout)
 */

/* ==========================================================================
   0) Tokens extra del mockup v2 que no estaban en el design system v1
   ========================================================================== */
:root{
  --whatsapp:#25D366; /* verde oficial WhatsApp (mockup v2, theme.css) */
}

/* Fix overflow-x (ronda 3, diagnóstico del "footer cortado"): los groups
   alignfull de Astra miden 100vw, que INCLUYE la scrollbar → 8px de scroll
   horizontal en desktop (1280 vs 1265 útiles) y 2px en mobile, que corren
   el layout y muestran el footer "cortado". `overflow-x:clip` recorta sin
   crear scroll container (a diferencia de hidden), así que el header
   sticky sigue funcionando. */
html, body{ overflow-x:clip; } /* en html también: el viewport scrollea con el overflow de html, no del body (verificado: solo-body dejaba 8px de scroll) */

/* ==========================================================================
   1) ANNOUNCEMENT BAR — mockup: navy 36px, texto blanco 13px/600, ls .01em
   (colores/altura/tipografía van por settings nativos de Astra; acá solo
   el letter-spacing que el control de Astra no expone en em)
   ========================================================================== */
.ast-header-html-1{ letter-spacing:.01em; }

/* ==========================================================================
   2) HEADER STICKY — mockup 1c: al scrollear, el announcement sale y el
   header blanco de 72px queda pegado arriba. Astra free no tiene sticky
   nativo (es addon Pro) → position:sticky con top negativo = alto del
   announcement (36 desktop / 34 tablet / 32 mobile, según hba-header-height).
   ========================================================================== */
#masthead{ position:sticky; top:-36px; z-index:99; }
body.admin-bar #masthead{ top:-4px; } /* 32px de admin bar - 36px */
@media (max-width:921px){
  #masthead{ top:-34px; }
}
@media (max-width:544px){
  #masthead{ top:-32px; }
}

/* ==========================================================================
   3) MENÚ PRINCIPAL — mockup partial-header-desktop: ítems 14px/600 ink,
   padding 8x11, pill, hover fondo cobalt-soft; dropdown blanco r18 con
   shadow-3; "Tienda" (clase de ítem de menú pchela-menu-tienda) en 2
   columnas CSS (columns, no pelea con el display del submenu de Astra)
   ========================================================================== */
.ast-builder-menu-1 .main-header-menu{ flex-wrap:nowrap; }
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  padding:8px 11px;
  margin:0 2px;
  border-radius:var(--radius-pill);
  line-height:1.4; /* Astra fuerza line-height = alto del header (72px) → pill gigante */
  white-space:nowrap;
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link{
  background:var(--accent-soft);
  color:var(--primary);
}

/* Dropdown (submenu nativo de WP/Astra) */
.ast-builder-menu-1 .main-header-menu .sub-menu{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  padding:8px;
}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item{
  break-inside:avoid; /* que una categoría no se corte entre columnas */
}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link{
  font-size:14px;
  font-weight:500;
  color:var(--text-primary);
  padding:8px 14px;
  border-radius:var(--radius-sm);
}
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:hover{
  background:var(--background);
  color:var(--accent);
}
/* "Ver todo el catálogo →" (último ítem del dropdown, mockup 1d) */
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item.pchela-menu-vertodo > .menu-link{
  color:var(--accent);
  font-weight:700;
}

/* "Tienda": 12 categorías en 2 columnas (CSS columns sobre el ul nativo).
   Si Astra pisara el ancho, cae solo a 1 columna: degradación segura. */
@media (min-width:922px){
  .pchela-menu-tienda .sub-menu{
    columns:2;
    column-gap:6px;
    width:520px;
  }
}

/* ==========================================================================
   4) BUSCADOR — shortcode [pchela_buscador]: form GET nativo de Woo
   (s + post_type=product). Mockup partial-header: pill 44px fondo bg, borde
   line, lupa gris a la izquierda + placeholder ink-2, SIN botón "Buscar"
   (la lupa es el submit; Enter también envía). Focus: borde navy + halo.
   ========================================================================== */
.pchela-buscador{ width:100%; }
.pchela-buscador-form{
  display:flex;
  align-items:center;
  gap:8px;
  height:44px;
  background:var(--background);
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  padding:0 16px;
  transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.pchela-buscador-form:focus-within{
  background:var(--surface);
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
}
/* Lupa = botón de submit (mockup: solo el ícono, sin texto). Gris en reposo,
   navy en hover/focus del form. */
.pchela-buscador .pchela-buscador-btn{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  transition:color 140ms ease;
}
.pchela-buscador .pchela-buscador-btn:hover{ color:var(--primary); background:transparent; }
.pchela-buscador-form:focus-within .pchela-buscador-btn{ color:var(--primary); }
/* El input pisa los estilos globales de input (del child, de Astra y de
   WooCommerce). En páginas con body.woocommerce, la hoja woocommerce-grid
   trae `.woocommerce input[type="search"]{background:#fff}` (especificidad
   0,2,1) que le ganaba a un selector de 2 clases y pintaba el input de blanco
   solo fuera del home. Se selecciona por [type="search"] (0,3,0) para superarla
   sin !important y dejar el input transparente sobre el pill #F4F6FC. */
.pchela-buscador .pchela-buscador-input[type="search"],
.pchela-buscador .pchela-buscador-input[type="search"]:focus{
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  background:transparent;
  box-shadow:none;
  outline:none;
  padding:0;
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--text-primary);
  -webkit-appearance:none;
  appearance:none;
}
.pchela-buscador .pchela-buscador-input::placeholder{
  color:var(--text-secondary);
  opacity:1;
}
.pchela-buscador .pchela-buscador-input{ text-overflow:ellipsis; }

/* Botón "Buscar" navy dentro del pill (atributo boton="1" del shortcode).
   Ronda 3 (2026-07-20): el dueño pidió el botón TAMBIÉN en el header —
   revierte la decisión "solo lupa" de la Etapa 3. Base dimensionada para
   el pill de 44px del header; el hero (pill 52px) lo agranda con su regla
   scoped más abajo (sección 9.2). */
.pchela-buscador .pchela-buscador-submit{
  flex-shrink:0;
  height:32px;
  padding:0 16px;
  margin-left:4px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--primary);
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background 140ms ease;
}
.pchela-buscador .pchela-buscador-submit:hover{
  background:var(--primary-dark);
  color:#FFFFFF;
}
/* Con botón visible, el pill pierde el padding derecho (el botón lo da) */
.pchela-buscador--con-boton .pchela-buscador-form{ padding-right:6px; }

/* La barra RELLENA todo el ancho disponible (ronda 3): .ast-header-html es
   flex-item de .ast-header-html-2 (display:flex de Astra) con flex:0 1
   auto → se encogía al ancho del contenido (241px) en vez de llenar el
   hueco entre el menú y cuenta/carrito. Vale para el header desktop Y la
   fila below del mobile (misma estructura). */
.ast-header-html-2 .ast-header-html{
  flex:1 1 auto;
  min-width:0;
  width:100%;
}

/* El elemento HTML 2 (que contiene el shortcode) debe crecer para que la
   barra ocupe el espacio libre entre menú y cuenta/carrito (mockup: flex 1).
   La fila primaria de Astra es GRID de 2 columnas auto: se fija la izquierda
   al contenido (logo + menú sin wrap) y el resto va a la derecha. */
@media (min-width:922px){
  .site-primary-header-wrap .ast-builder-grid-row-has-sides{
    grid-template-columns:auto minmax(0,1fr);
    column-gap:22px;
  }
}
.site-header-primary-section-right{ flex:1 1 auto; }
.site-header-primary-section-right .ast-header-html-2{ flex:1 1 auto; }
.site-header-primary-section-right .ast-header-html-2 .ast-builder-html-element{ width:100%; }

/* ==========================================================================
   5) CUENTA + CARRITO — mockup: ícono cuenta 44px ink; carrito en pill
   cobalt-soft con contador cobalto y hover bg-alt
   ========================================================================== */
/* Botón de cuenta (mockup partial-header): círculo 44px con el ícono
   perfectamente centrado y hover/focus cobalt-soft. Astra anida
   wrap > inner-wrap > a.ast-header-account-link, y el <a> real medía 21px
   pegado a la izquierda → el ícono se veía corrido y el sombreado (que Astra
   pinta sobre el <a>) caía desalineado del círculo. Se estira toda la cadena
   a 44px centrada y el fondo va sobre el MISMO <a> interactivo. */
.ast-header-account-wrap{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ast-header-account-wrap .ast-header-account-inner-wrap{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ast-header-account-wrap .ast-header-account-link{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  color:var(--text-primary); /* ícono ink en reposo, sin fondo (mockup partial-header) */
  transition:background 140ms ease, color 140ms ease;
}
.ast-header-account-wrap .ast-header-account-link:hover,
.ast-header-account-wrap .ast-header-account-link:focus{
  background:var(--accent-soft); /* hover: círculo cobalt-soft (mockup) */
  color:var(--primary);
  box-shadow:none;
  outline:none;
}
/* Ícono de cuenta del mockup v2 (usuario de línea, reemplazado por filtro
   astra_svg_icons en functions.php): outline con stroke que sigue el color
   del link (fill:none). Tamaño 21px como el mockup. */
.ast-header-account-wrap .ast-header-account-link svg{
  display:block;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
}
/* Astra colorea el ícono de cuenta con `... svg path:not(...){fill}` (0,4,2),
   pensado para un glifo relleno. Como el del mockup es de línea, se iguala esa
   especificidad (las dos clases del link + .ahfb-svg-iconset) para forzar
   fill:none y colorear por stroke; al cargar después, gana el desempate. */
.ast-header-account-wrap .ast-header-account-link.ast-header-account-type-icon .ahfb-svg-iconset svg path,
.ast-header-account-wrap .ast-header-account-link.ast-header-account-type-icon .ahfb-svg-iconset svg circle{
  fill:none;
  stroke:currentColor;
}

.ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-li > .cart-container{
  display:flex;
  align-items:center;
  height:44px;
  padding:0 14px;
  border-radius:var(--radius-pill);
  background:var(--accent-soft);
  transition:background 140ms ease;
}
.ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-li > .cart-container:hover{
  background:var(--background-alt);
}
/* Ícono y subtotal del carrito en navy; subtotal en mono como el mockup.
   Astra deja el label en una caja de 16px que hace wrap → flex + nowrap,
   y orden ícono primero / subtotal después (mockup: 🛒 $ [SUBTOTAL]) */
.ast-header-woo-cart .cart-container{ color:var(--primary); }
.ast-header-woo-cart .ast-addon-cart-wrap{
  display:flex;
  align-items:center;
  gap:9px;
}
.ast-header-woo-cart .ast-addon-cart-wrap > .astra-icon{ order:1; }
/* Carrito de LÍNEA (ronda 3): el SVG del mockup v2 se inyecta por el filtro
   astra_svg_icon_element en functions.php. Mismo fix de fill que el ícono
   de cuenta: Astra pinta los path con fill pensando en glifos rellenos —
   acá se fuerza fill:none + stroke:currentColor para el icono de trazo. */
.ast-header-woo-cart .astra-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
}
/* Astra pinta .astra-icon con su color de tema (cobalto) por dinámico —
   el mockup pide el ícono navy como el resto del header (el <a>
   .cart-container ya es navy; se re-hereda en el ícono). */
.ast-header-woo-cart .ast-site-header-cart .astra-icon{
  color:var(--primary);
}
.ast-header-woo-cart .ast-site-header-cart .astra-icon svg path,
.ast-header-woo-cart .ast-site-header-cart .astra-icon svg circle{
  fill:none;
  stroke:currentColor;
}
.ast-header-woo-cart .ast-woo-header-cart-info-wrap{
  order:2;
  white-space:nowrap;
  display:flex;
  align-items:center;
}
.ast-header-woo-cart .ast-woo-header-cart-total{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--primary);
}

/* ==========================================================================
   6) HEADER MOBILE — hamburguesa + logo + carrito arriba; fila de búsqueda
   full-width debajo (below row del builder)
   ========================================================================== */
@media (max-width:921px){
  /* Buscador INTEGRADO en el mismo header (mockup 1a): la fila del logo y la
     fila del buscador forman UN bloque blanco continuo. Astra renderiza el
     buscador en la fila "below-header" y la fila primaria trae un border-bottom
     que dibujaba una línea entre ambas → se quita esa línea y se mueve el
     cierre del header al fondo de la fila del buscador. */
  .ast-mobile-header-wrap .ast-primary-header-bar{ border-bottom:0; }
  .ast-mobile-header-wrap .ast-below-header-bar{
    background-color:var(--surface);
    border-top:0;
    margin-top:0;
    border-bottom:1px solid var(--border);
  }
  .ast-below-header-bar .ast-builder-grid-row{ padding-top:0; padding-bottom:12px; }
  .ast-below-header-bar .ast-header-html-2{ width:100%; }
  .ast-below-header-bar .ast-header-html-2 .ast-builder-html-element{ width:100%; }
  /* Mobile: carrito solo ícono + badge (mockup 1a) — sin subtotal, ahorra ancho.
     El contador va como badge flotante sobre el ícono. */
  .ast-header-woo-cart .ast-woo-header-cart-info-wrap{ display:none; }
  .ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-li > .cart-container{
    width:44px;
    padding:0;
    justify-content:center;
    background:transparent;
  }
  .ast-header-woo-cart .ast-site-header-cart .ast-site-header-cart-li > .cart-container:hover{ background:var(--accent-soft); }
}

/* ==========================================================================
   7) FOOTER NAVY — mockup 1c: fondo ink, 4 columnas (marca+contacto /
   Tienda / Ayuda / Empresa), grises fijos sobre oscuro:
   #C9D2EA párrafos y contacto · #9AA6B8 links · #7C8799 legal
   ========================================================================== */
/* Fix "footer cortado y mal centrado" en mobile (reporte del dueño, ronda 4):
   causa raíz medida a 375px con getComputedStyle/getBoundingClientRect —
   `.ast-builder-footer-grid-columns` (el template de footer builder de Astra,
   footer-row.php) tiene `max-width:1180px; margin:0 auto` pero CERO padding
   propio. En desktop eso da 42.5px de gutter porque el viewport (1280) supera
   el max-width; pero en mobile/tablet (viewport < 1180) el max-width no
   restringe nada y margin:auto resuelve a 0 → todo el contenido del footer
   (logo, descripción, contacto, columnas de links, barra legal + chips)
   queda pegado a los bordes físicos de la pantalla con 0px de aire, a
   diferencia del resto del sitio que siempre respira con `.ast-container`
   (padding 0 20px en mobile). Eso además empuja el `margin-left:-4px` óptico
   del logo (pensado para el gutter de desktop) a quedar en x:-4, es decir
   el logo literalmente CORTADO 4px fuera de la pantalla. Fix: mismo gutter
   de 20px que usa `.ast-container` en mobile, en el contenedor de columnas
   del footer builder (cubre las 3 filas: above/primary/below, incluida la
   barra legal). Ámbito acotado a mobile (≤600px, breakpoint ya usado en esta
   sección) para no tocar tablet/desktop, ya aprobados. */
@media (max-width:600px){
  .ast-builder-footer-grid-columns{
    padding:0 20px;
  }
}
/* Columna 1 (marca + contacto): layout vertical del widget. El mockup 1c usa
   flex-column gap 12px; el widget de bloque no expone ese layout → clase. */
.pchela-footer-col1{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pchela-footer-logo{
  width:150px;
  height:auto;
  display:block;
  margin-left:-4px; /* alineación óptica del logo, igual que el mockup */
}
.pchela-footer-desc{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:#C9D2EA;
  max-width:300px;
}
.pchela-footer-contact{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  line-height:1.5;
  color:#9AA6B8;
  margin-top:4px;
}
.pchela-footer-wa{
  display:flex;
  gap:8px;
  align-items:center;
  color:#C9D2EA;
  font-weight:600;
}
.pchela-footer-ig,
a.pchela-footer-ig{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#FFFFFF;
  font-size:13px;
  font-weight:600;
  margin-top:2px;
}
a.pchela-footer-ig:hover{ color:#C9D2EA; }

/* Títulos de columna y listas de links (widgets de bloque del footer) */
.footer-widget-area .pchela-footer-col-title{
  color:#FFFFFF;
  font-size:14px;
  font-weight:700;
  margin:0 0 10px;
}
.footer-widget-area ul.pchela-footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-widget-area ul.pchela-footer-links a{
  font-size:13.5px;
  color:#9AA6B8;
}
.footer-widget-area ul.pchela-footer-links a:hover{ color:#FFFFFF; }

/* Barra legal: copyright + links legales + chips de pago + data fiscal.
   Separada de las columnas por el borde superior del mockup 1c (la barra vive
   en la fila "below" del footer builder, dentro del contenedor de 1180). */
.pchela-footer-legal{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:16px;
  padding-top:20px;
  /* Ronda 3, diagnóstico "footer cortado": el botón flotante de WhatsApp
     (fixed, right 16, 56px) tapaba el chip AFIP al final del scroll
     (overlap medido: AFIP x 1182-1222 vs float x 1193-1249 a 1280). El
     padding derecho corre chips+AFIP fuera de la zona del float. */
  padding-right:64px;
}
@media (max-width:600px){
  .pchela-footer-legal{ padding-right:0; } /* en mobile todo queda a la izquierda, el float no tapa nada */
}
.pchela-footer-copy{ font-size:12px; color:#7C8799; }
.pchela-footer-legal-links{
  display:flex;
  gap:16px;
  font-size:12px;
}
.pchela-footer-legal-links a{ color:#9AA6B8; }
.pchela-footer-legal-links a:hover{ color:#FFFFFF; }
.pchela-chips-pago{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-left:auto;
}
.pchela-chip-pago{
  background:rgba(255,255,255,.1);
  color:#C9D2EA;
  font-size:11px;
  font-weight:600;
  padding:5px 11px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
/* Espacio reservado para el logo Data Fiscal AFIP (lo carga el administrador) */
.pchela-afip{
  width:40px;
  height:54px;
  border:1.5px dashed rgba(255,255,255,.3);
  border-radius:var(--radius-sm);
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:7.5px;
  color:#9AA6B8;
  text-align:center;
  line-height:1.3;
}
@media (max-width:600px){
  .pchela-chips-pago{ margin-left:0; }
}

/* ==========================================================================
   8) BOTÓN FLOTANTE DE WHATSAPP — mockup: pill 52-56px verde, esquina
   inferior derecha, sin tapar CTAs (z-index bajo el header sticky)
   ========================================================================== */
.pchela-whatsapp-float{
  position:fixed;
  right:16px;
  bottom:16px;
  width:56px;
  height:56px;
  border-radius:var(--radius-pill);
  background:var(--whatsapp);
  box-shadow:var(--shadow-2);
  display:grid;
  place-items:center;
  color:#FFFFFF;
  z-index:90;
  transition:transform 140ms ease, box-shadow 140ms ease, bottom 200ms ease;
}
/* Ronda de mejoras PDP (2026-07-28), punto 2: cuando la barra sticky de
   compra (sección 17.2) está visible en mobile, el WhatsApp flotante sube
   por encima de ella (no la tapa ni lo tapa) — el alto real de la barra lo
   fija el JS en --pchela-sticky-cta-h (con fallback 74px, altura de diseño
   de la barra: 10px+14px de padding vertical + 50px del botón). */
body.pchela-sticky-cta-active .pchela-whatsapp-float{
  bottom:calc(16px + var(--pchela-sticky-cta-h, 74px) + 8px);
}
/* Hallazgo al verificar en vivo (no pedido explícitamente, pero mismo tipo
   de colisión): Astra trae su propio botón nativo "volver arriba"
   (#ast-scroll-top, fixed bottom:30px/left:30px, activado por un setting
   del Customizer — no es un elemento de este child theme) que en mobile
   quedaba TAPADO por la barra sticky nueva (su rect entraba dentro de la
   franja de la barra, verificado con getComputedStyle en vivo). Mismo
   criterio que el WhatsApp de arriba: sube por encima de la barra mientras
   está visible. Selector con más especificidad que la regla nativa de Astra
   (id + clase de body vs. solo id) — gana sin !important. */
body.pchela-sticky-cta-active #ast-scroll-top{
  bottom:calc(30px + var(--pchela-sticky-cta-h, 74px) + 8px);
}
.pchela-whatsapp-float:hover{
  color:#FFFFFF;
  transform:translateY(-2px);
  box-shadow:var(--shadow-3);
}

/* ==========================================================================
   9) HOME (Etapa 4) — mockup v2 "05 Home.dc.html" (5a mobile / 5b desktop)
   Página en Gutenberg nativo: bloques core (group/heading/paragraph/buttons/
   image/html) + bloques nativos de WooCommerce (product-best-sellers,
   product-on-sale, product-new) para toda grilla de productos. Colores de
   fondo/texto van por atributos nativos del bloque (paleta global de Astra:
   ast-global-color-1 = navy, ast-global-color-5 = surface) cuando existe un
   slot; acá solo lo que el panel no expone: el degradado del hero, el fondo
   cobalt-soft (no está en la paleta de Astra), bordes por lado, grids finos
   responsive (900/600) y el estilo de las cards sobre el markup nativo de
   los bloques Woo.
   ========================================================================== */

/* --- 9.1 Bandas genéricas: fondo ya va por atributo nativo del Group,
   acá solo los bordes por lado que el panel no expone por separado. --- */
.pchela-home-band--bordered{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* Banda de ofertas: fondo cobalt-soft (#E9ECFB) — no está en la paleta
   global de Astra (solo navy/cobalto/ink/texto/fondos neutros), así que va
   por CSS y no por el selector de color del panel. */
.pchela-home-band-offers{
  background:var(--accent-soft);
}

/* Padding vertical de sección. OJO especificidad (hallazgo del reorden):
   Astra imprime `.entry-content > .wp-block-group{padding:var(--wp--custom
   --ast-default-block-top-padding)...}` (=3em=48px) con (0,2,0) — le ganaba
   en silencio a las clases sueltas (0,1,0). Selectores a (0,3,0) para que
   los valores autorados manden de verdad, sin !important. */
.entry-content > .wp-block-group.pchela-home-hero,
.entry-content > .wp-block-group.pchela-home-band,
.entry-content > .wp-block-group.pchela-home-band-offers,
.entry-content > .wp-block-group.pchela-home-cta{
  padding-top:56px;
  padding-bottom:56px;
}
.entry-content > .wp-block-group.pchela-home-hero{ padding-top:36px; padding-bottom:26px; }
.entry-content > .wp-block-group.pchela-home-cta{ padding-top:40px; padding-bottom:40px; }
@media (max-width:600px){
  .entry-content > .wp-block-group.pchela-home-band,
  .entry-content > .wp-block-group.pchela-home-band-offers{
    padding-top:34px;
    padding-bottom:32px;
  }
  .entry-content > .wp-block-group.pchela-home-hero{ padding-top:22px; padding-bottom:18px; }
  .entry-content > .wp-block-group.pchela-home-cta{ padding-top:32px; padding-bottom:32px; }
}
/* Grupos "constrained" del Group nativo ya centran el contenido a 1180px;
   acá el gap vertical entre hijos directos de cada banda (bloque no lo
   expone como "espaciado entre bloques" por defecto sin block-gap global). */
.pchela-home-band > .wp-block-heading{ margin-bottom:0; }
.pchela-home-hero > *,
.pchela-home-band > *,
.pchela-home-band-offers > *,
.pchela-home-cta > *{
  margin-top:16px;
}
.pchela-home-hero > *:first-child,
.pchela-home-band > *:first-child,
.pchela-home-band-offers > *:first-child,
.pchela-home-cta > *:first-child{
  margin-top:0;
}

/* --- 9.2 HERO: degradado cobalt-soft → blanco (no está en la paleta de
   Astra como gradiente, así que va por CSS), título centrado, buscador
   pill prominente con sombra y ancho máximo 640px. --- */
.pchela-home-hero{
  background:linear-gradient(180deg, var(--accent-soft), #FFFFFF);
  text-align:center;
}
.pchela-home-hero-title{
  margin:0;
  font-size:36px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--text-primary);
}
@media (max-width:600px){
  .pchela-home-hero-title{ font-size:26px; line-height:1.15; }
}
/* 640px máx centrado: el selector lleva DOS clases porque el layout
   "constrained" del Group padre imprime `> :where(...){max-width:1180px}`
   con especificidad (0,1,0) y en un <style> que carga después de esta hoja
   — con una sola clase el empate lo ganaba el core y el pill quedaba al
   ancho completo (bug reportado por el supervisor). */
.pchela-home-hero .pchela-home-hero-search{
  max-width:640px;
  margin:16px auto 0;
}
/* Buscador del hero: pill más alta (52px vs 44px del header) + sombra +
   botón "Buscar" navy visible (mockup 05 Home, a diferencia del header que
   solo tiene la lupa). Reusa .pchela-buscador (Etapa 3) — acá solo el
   modificador de tamaño/sombra/botón, específico de esta instancia.
   En el hero el pill va BLANCO (surface) con borde line y shadow-1 — el
   gris #F4F6FC integrado es solo para el header (mockup 5b). */
.pchela-home-hero .pchela-buscador-form{
  height:52px;
  padding:0 8px 0 18px;
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow-1);
}
.pchela-home-hero .pchela-buscador-form:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
}
.pchela-home-hero .pchela-buscador .pchela-buscador-input[type="search"]{
  font-size:14.5px;
}
.pchela-home-hero .pchela-buscador-submit{
  flex-shrink:0;
  height:38px;
  padding:0 20px;
  margin-left:4px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--primary);
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:background 140ms ease;
}
.pchela-home-hero .pchela-buscador-submit:hover{
  background:var(--primary-dark);
}

/* --- 9.3 TRUST STRIP: fila de 4 en desktop, grid 2×2 en mobile/tablet (el
   bloque Group no tiene un layout "grid responsive" nativo con este quiebre
   específico, así que el grid fino va por CSS sobre el wrapper).
   Nota ronda 2: el quiebre a 2×2 sube de 600 a 900 — entre 600 y 900 la
   fila única de 4 (max-content) desbordaba el viewport y se cortaba. --- */
.pchela-home-trust-grid{
  display:grid;
  grid-template-columns:repeat(4, max-content);
  justify-content:space-between;
  align-items:center;
  gap:16px 24px;
}
@media (max-width:900px){
  .pchela-home-trust-grid{
    grid-template-columns:1fr 1fr;
    justify-content:normal;
    gap:10px 14px;
  }
}
/* margin:0 (ronda 2): el layout "flow" del Group imprime
   `:where(.wp-block-group.is-layout-flow) > * + *{margin-block-start:24px}`
   — en un contenedor GRID esos márgenes no colapsan y desalineaban las
   filas (el 2º ítem de cada fila quedaba 24px más abajo). Vale para TODOS
   los hijos de grillas de esta sección (ítems, cards, marcas, why). */
.pchela-home-trust-item{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
}
@media (max-width:600px){
  .pchela-home-trust-grid .pchela-home-trust-text{ font-size:11.5px; }
}
.pchela-home-trust-item svg{
  flex-shrink:0;
  display:block;
}
.pchela-home-trust-icon-img{
  margin:0;
  flex-shrink:0;
}
.pchela-home-trust-icon-img img{
  width:17px;
  height:17px;
  display:block;
}
.pchela-home-trust-text{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  line-height:1.3;
}

/* --- 9.4 CATEGORÍAS: grid de cards 4 col desktop / 2 col mobile (900/600),
   card r18 + shadow-1 + hover (el bloque Group no expone hover ni grid
   responsive fino, así que van acá). --- */
.pchela-home-cats-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  align-items:stretch; /* cards de igual altura por fila (ronda 2) */
  gap:16px;
}
@media (max-width:900px){
  .pchela-home-cats-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
}
/* Mobile ≤600 (ronda 3, punto 12): SLIDER horizontal solo CSS — las 8
   cards pasan de grilla 2×4 a carrusel con scroll-snap. Sin JS. La
   affordance de scroll la da el ancho fijo de card (220px) menor que el
   contenedor: la card siguiente asoma. Scrollbar discreta como la de los
   círculos. */
@media (max-width:600px){
  .pchela-home-cats-grid{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:2px 16px 10px 2px; /* 16px de aire al final del scroll; la 1ª card ya respira por el padding lateral del contenedor de la banda */
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
    -webkit-overflow-scrolling:touch;
  }
  .pchela-home-cats-grid::-webkit-scrollbar{ height:6px; }
  .pchela-home-cats-grid::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:var(--radius-pill);
  }
  .pchela-home-cats-grid::-webkit-scrollbar-track{ background:transparent; }
  .pchela-home-cats-grid .pchela-home-cat-card{
    flex:0 0 auto;
    width:220px;
    scroll-snap-align:start;
  }
}
/* Selectores con 2-3 clases a propósito: las reglas de imagen de Astra
   (`.entry-content .wp-block-image img` y afines) y el underline de links
   de contenido (`.ast-single-post .entry-content a`, (0,2,1)) ganaban a
   una sola clase y dejaban la foto flotando con aire y el nombre subrayado
   cobalto (ronda de correcciones del supervisor). */
.pchela-home-cats-grid .pchela-home-cat-card{
  display:flex;
  flex-direction:column;
  margin:0; /* anula el margin-block-start:24px del layout flow de WP (ronda 2):
               en grid no colapsa, desalineaba filas e impedía el stretch */
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:box-shadow 140ms ease, transform 140ms ease;
}
.pchela-home-cats-grid .pchela-home-cat-card:hover{
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}
/* Banda de imagen full-width arriba de la card (mockup: sin padding
   lateral, cover, 110px desktop / 78px mobile) */
.pchela-home-cats-grid .pchela-home-cat-card .pchela-home-cat-img{
  margin:0;
  width:100%;
}
.pchela-home-cats-grid .pchela-home-cat-card .pchela-home-cat-img a{
  display:block;
  width:100%;
}
/* Imagen CUADRADA 1:1 (override del dueño 2026-07-20 sobre la banda
   apaisada de 110/78px del mockup): ancho completo de la card, cover.
   aspect-ratio escala solo en los 3 rangos (4 col desktop / 2 col tablet /
   slider 220px mobile → 220×220) sin media queries de alto. Las alturas
   por fila siguen parejas: mismas anchuras de columna → mismos cuadrados,
   y el stretch del grid ya iguala el resto. */
.pchela-home-cats-grid .pchela-home-cat-card .pchela-home-cat-img img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:cover;
  display:block;
  margin:0;
}
.pchela-home-cats-grid .pchela-home-cat-name{
  margin:11px 14px 0;
  font-size:14.5px;
  line-height:1.25;
}
.pchela-home-cats-grid .pchela-home-cat-card .pchela-home-cat-name a{
  color:var(--text-primary);
  font-weight:700;
  text-decoration:none;
}
.pchela-home-cats-grid .pchela-home-cat-card .pchela-home-cat-name a:hover{
  color:var(--primary);
  text-decoration:underline;
}
.pchela-home-cats-grid .pchela-home-cat-count{
  margin:2px 14px 13px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-secondary);
}

/* --- 9.5 Botón outline pill (Ver todo el catálogo / Ver todas las
   ofertas): estilo "is-style-outline" nativo de Gutenberg sin radio pill
   propio — el radio/alto/padding no están en la paleta de botones de
   Astra (unset), así que se define acá una sola vez para toda la home. --- */
.pchela-home-btn-outline .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 32px;
  border:1.5px solid var(--primary);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--primary);
  font-size:14px;
  font-weight:700;
  transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pchela-home-btn-outline .wp-block-button__link:hover{
  background:var(--background);
  color:var(--primary-dark);
  border-color:var(--primary-dark);
}

/* --- 9.6 Grillas de producto NATIVAS de WooCommerce (Best Selling / On
   Sale / Newest) — markup `.wc-block-grid` (legacy product blocks), NO
   `.woocommerce ul.products li.product` (esa clase clásica ya está
   estilada en style.css, pero los bloques nativos usan un markup propio
   `wc-block-grid__product` que no la comparte). Card estilo v2: blanca
   r18 borde línea sombra-1, hover eleva -3px + sombra-2, título Inter 600
   ink, precio mono navy, botón "Añadir al carrito" pill cobalto. --- */
/* LAYOUT: los bloques legacy maquetan con FLEX (`.wc-block-grid.has-4-columns
   .wc-block-grid__product{flex:1 0 25%;max-width:25%}` en wc-blocks.css) —
   un `gap` en ese contenedor rompía el cálculo (4×25% + gaps > 100%) y las
   grillas caían a 3 por fila (bug reportado por el supervisor). Se toma el
   control total con CSS grid a especificidad (0,4,0)+, que le gana a las
   reglas de Woo (0,3,0) y de Astra (0,4,0 en woocommerce-grid) sin
   !important y sin depender del orden de carga de hojas. */
.wc-block-grid.pchela-home-product-grid.has-4-columns .wc-block-grid__products{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (max-width:900px){
  .wc-block-grid.pchela-home-product-grid.has-4-columns .wc-block-grid__products{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product{
  flex:none;
  width:auto;
  max-width:100%;
  margin:0;
  padding:0;
  position:relative; /* ancla del badge "Oferta" (top-left de la card) */
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow 140ms ease, transform 140ms ease;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product:hover{
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product-image{
  margin:0;
}
/* 5 clases/(0,5,1): la regla de Astra `.wc-block-grid .wc-block-grid__products
   .wc-block-grid__product a img{height:auto;margin:0 0 .8em}` (0,3,2) le
   ganaba a la versión anterior de 3 clases. */
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  margin:0;
}
/* El título vive DENTRO de <a.wc-block-grid__product-link>: Astra subraya
   los links de contenido (`.ast-single-post .entry-content a`, (0,2,1)) y
   los pinta cobalto (a{color:var(--ast-global-color-0)}) → se pisa en el
   propio <a> con (0,3,0). Underline solo en hover (OK del supervisor). */
.wc-block-grid.pchela-home-product-grid .wc-block-grid__product-link{
  display:flex;
  flex-direction:column;
  color:var(--text-primary);
  text-decoration:none;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__product-link:hover .wc-block-grid__product-title{
  text-decoration:underline;
}
/* (0,5,0): Astra fija `font-weight:inherit` en el título con (0,4,0).
   Fix auditoría 5+6 (hallazgo BAJA): 600→700 + 13.5→15px, unificado con
   el mismo peso 700 del título del loop clásico (sección 11.x, PLP/PDP
   related) — el design system pide 700/18px (H5, "Títulos de card de
   catálogo"); acá se sube a 15px (no 18) porque la card de 4 columnas es
   más angosta (~280px) y 18px rompía el wrap a 2 líneas en nombres largos.
   min-height sube de 35 a 39px (15×1.3×2 líneas) para que precio/botón
   sigan alineados entre cards con título de 1 y de 2 líneas. */
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title{
  margin:12px 14px 0;
  padding:0;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  color:var(--text-primary);
  text-decoration:none;
  min-height:39px;
  /* Barrido visual tanda 2: mismo line-clamp de 2 líneas del loop clásico
     (sección 10.3) — títulos largos del catálogo real (ej. "ULKA Hand
     Pad...") crecían a 3 líneas (117px vs 39px del resto de la fila,
     medido en vivo a 375px) y desalineaban la card contra sus vecinas
     pese al min-height (que solo pone un piso, no un techo). El texto
     completo sigue en el DOM/accesible, esto es un recorte visual. Cubre
     home Y /ofertas/: ambas grillas comparten la misma clase de bloque
     `pchela-home-product-grid` (verificado en el HTML de /ofertas/). */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height:2.6em;
}
/* (0,5,0): Astra estila `... .wc-block-grid__product .price` con (0,4,0). */
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price{
  margin:6px 14px 0;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  color:var(--primary);
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price del{
  color:var(--text-secondary);
  font-weight:400;
  margin-right:6px;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price ins{
  text-decoration:none;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-rating{
  margin:4px 14px 0;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart{
  margin:10px 14px 14px;
  margin-top:auto;
  padding-top:8px;
  width:auto;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:38px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
}
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover{
  background:var(--accent-dark);
}
/* Badge "Oferta" nativo del bloque (div.wc-block-grid__product-onsale):
   Woo lo dibuja como caja blanca arriba a la DERECHA y Astra lo pinta con
   su color de tema — el mockup pide pill cobalto arriba a la IZQUIERDA de
   la imagen. El texto "-X%" real es de la Etapa 5 (snippet b). */
.wc-block-grid.pchela-home-product-grid .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-onsale{
  position:absolute;
  top:10px;
  left:10px;
  right:auto;
  z-index:2;
  margin:0;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--accent);
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  padding:4px 10px;
  text-transform:none;
  /* inline-flex centrado (ronda 3): con display:block el whitespace entre
     el span visible y el span screen-reader (absolute) generaba una
     segunda línea vacía → pill de 32px con el texto arriba (medido). Los
     text-nodes de solo espacios NO son items flex → pill 21px centrada.
     min-height:0 pisa el min-height heredado de la hoja de Woo que seguía
     inflando el pill a 32px aun en flex. */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  min-width:0;
  height:auto;
}

/* --- 9.7 BANDA DE MARCAS (MOVIDA arriba el 2026-07-28, feedback de la
   administradora — "sello de autoridad" antes de la promesa de producto):
   ahora vive ENTRE el banner promocional y "Comprá por especialidad" (ya
   no después de Ofertas), con su propio wrapper compacto
   `.pchela-home-brands-band` (banda propia, NO usa la clase genérica
   `.pchela-home-band` — así no hereda el padding de 56px de 9.1, que
   rompía el límite de ~120px de alto pedido). Título viejo "Marcas" + badge
   "Distribuidor oficial" (`.pchela-home-badge-oficial`, YA NO SE USA, clase
   viva por si alguna otra banda la reusa a futuro) se reemplazan por UN
   único H2 de autoridad ("Distribuidor oficial de las marcas líderes en
   belleza profesional") — mismo nivel de heading que el resto de las
   secciones (el H1 real sigue siendo el del buscador, más abajo). Grid de
   9 logos (antes CSS grid 9/5/3 col con wrap a 2-3 filas en tablet/mobile)
   pasa a UNA sola fila horizontal con scroll-solo-CSS, mismo patrón que
   9.11 (círculos) y 18.1 (especialidades): flex nowrap + overflow-x:auto +
   scroll-snap, sin media query — funciona igual de ancha (sin scroll
   visible) en desktop y con scroll en mobile/tablet cuando no entra. Cards
   sin borde/fondo (antes r12 con borde línea) para la lectura de "trust
   bar" más discreta que pide una banda de apenas ~100px de alto; los 3
   placeholders (Global Home/Bobbi Nail/SUNUV, sin logo real todavía)
   MANTIENEN el borde punteado para señalar que falta el asset. --- */
.pchela-home-brands-band{
  background:#FFFFFF;
}
/* (0,3,0), mismo criterio de especificidad que 9.1/9.11: le gana en
   silencio a `.entry-content > .wp-block-group{padding:3em}` de Astra
   ((0,2,0)) sin necesitar !important. Padding chico a propósito: título
   (1 línea desktop) + fila de logos ≈ 100px de alto total en desktop. */
.entry-content > .wp-block-group.pchela-home-brands-band{
  padding-top:14px;
  padding-bottom:14px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
@media (max-width:600px){
  .entry-content > .wp-block-group.pchela-home-brands-band{
    padding-top:12px;
    padding-bottom:12px;
  }
}
.pchela-home-brands-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
/* Título de autoridad: 1 sola línea en desktop (1180px de ancho de banda,
   el link "Todas las marcas" empujado a la derecha por margin-left:auto
   dentro del mismo flex). Tamaño chico a propósito — es una banda de
   respaldo, no un H2 de sección de contenido pesado. */
.pchela-home-brands-title{
  margin:0;
  font-size:19px;
  font-weight:700;
  line-height:1.3;
  color:var(--text-primary);
}
@media (max-width:600px){
  .pchela-home-brands-title{ font-size:16px; line-height:1.3; }
}
.pchela-home-link-marcas{
  margin:0 0 0 auto;
  flex-shrink:0;
}
/* 3 clases: el underline de Astra sobre links de contenido ((0,2,1))
   ganaba a una sola clase — el mockup lo quiere sin subrayado. */
.pchela-home-brands-head .pchela-home-link-marcas a{
  font-size:13.5px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}
.pchela-home-brands-head .pchela-home-link-marcas a:hover{ color:var(--accent-dark); }
/* Fila única horizontal, SIN media query (mismo patrón robusto que 9.11
   círculos): en desktop los 9 logos entran cómodos en 1180px sin necesitar
   scroll; en mobile/tablet donde no entran, scrollea solo con CSS. */
.pchela-home-brands-grid{
  display:flex;
  align-items:center;
  gap:26px;
  overflow-x:auto;
  margin-top:0; /* anula el margin-block-start:24px del layout flow de WP
                   en el 2º hijo directo de la banda (gotcha ya documentado
                   en 9.3/9.4/9.11) — el único gap lo pone el margin-bottom
                   de .pchela-home-brands-head, arriba. */
  padding:4px 2px 6px;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  -webkit-overflow-scrolling:touch;
}
.pchela-home-brands-grid::-webkit-scrollbar{ height:6px; }
.pchela-home-brands-grid::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:var(--radius-pill);
}
.pchela-home-brands-grid::-webkit-scrollbar-track{ background:transparent; }
@media (max-width:600px){
  .pchela-home-brands-grid{ gap:20px; }
}
/* Cards SIN borde/fondo (a diferencia de la versión vieja r12): altura
   pareja fija + ancho por contenido (flex-shrink:0, no se achican en el
   scroll). Selectores de 2-3 clases para ganarle a las reglas de imagen de
   core/Astra sin depender del orden de hojas (mismo criterio ya
   documentado acá). */
.pchela-home-brands-grid .pchela-home-brand-card{
  flex:0 0 auto;
  scroll-snap-align:start;
  height:34px;
  margin:0; /* anula el margin-block-start:24px del layout flow de WP (ronda 2) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
}
.pchela-home-brands-grid .pchela-home-brand-card .pchela-home-brand-logo{
  margin:0;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pchela-home-brands-grid .pchela-home-brand-card .pchela-home-brand-logo img{
  max-width:100%;
  max-height:30px;
  width:auto;
  height:auto;
  display:block;
  margin:0;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.82;
  transition:filter 140ms ease, opacity 140ms ease;
}
.pchela-home-brands-grid .pchela-home-brand-card:hover .pchela-home-brand-logo img{
  filter:grayscale(0);
  opacity:1;
}
/* Marcas sin logo cargado todavía (Global Home, Bobbi Nail, SUNUV — sin
   asset local disponible, ver HANDOFF-PENDIENTES.md): placeholder con
   borde punteado + alto/ancho propio (las demás cards ya no tienen
   borde/padding, así que el placeholder necesita su propia caja para que
   el texto no quede pegado a los logos vecinos en la fila). */
.pchela-home-brand-card--placeholder{
  height:34px;
  padding:0 12px;
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
}
.pchela-home-brand-placeholder-text{
  margin:0;
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--text-secondary);
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
}

/* --- 9.8 POR QUÉ PCHELÁ: grid 4 col desktop / 1 col mobile, ícono en
   círculo cobalt-soft 42px. --- */
.pchela-home-why-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
@media (max-width:900px){
  .pchela-home-why-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .pchela-home-why-grid{ grid-template-columns:1fr; }
}
.pchela-home-why-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0; /* anula el margin-block-start:24px del layout flow de WP (ronda 2) */
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
}
.pchela-home-why-icon{
  width:42px;
  height:42px;
  border-radius:var(--radius-pill);
  background:var(--accent-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pchela-home-why-icon svg{ display:block; }
.pchela-home-why-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
}
.pchela-home-why-text{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--text-secondary);
}
/* Mobile (ronda 3, punto 5): el mockup 5a NO apila ícono arriba — usa
   ícono 38px a la IZQUIERDA con título+texto a la derecha (fila). Grid de
   2 columnas con el círculo abarcando las 2 filas de texto. En desktop
   (>600) queda el layout columna del artboard 5b (ya verificado idéntico:
   círculo 42px, gaps 10px, título 15/700, texto 13/1.5). */
@media (max-width:600px){
  .pchela-home-why-card{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    column-gap:12px;
    row-gap:2px;
    align-items:start;
    padding:14px 16px;
  }
  .pchela-home-why-icon{
    grid-row:1 / 3;
    width:38px;
    height:38px;
  }
  .pchela-home-why-icon svg{ width:18px; height:18px; }
  .pchela-home-why-title{ font-size:14px; }
  .pchela-home-why-text{ font-size:12.5px; line-height:1.45; }
}

/* --- 9.9 CTA MAYORISTA: banda navy centrada, máx 720px (atributo nativo
   del Group ya limita el contentSize; acá solo tipografía/botón). --- */
.pchela-home-cta-title{
  font-size:26px;
  line-height:1.25;
}
.pchela-home-cta-text{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:#C9D2EA;
}
.pchela-home-cta-btn .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 32px;
  border-radius:var(--radius-pill);
  font-size:14.5px;
  font-weight:700;
  transition:transform 140ms ease, box-shadow 140ms ease;
}
.pchela-home-cta-btn .wp-block-button__link:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}

/* --- 9.10 (ELIMINADA en el reorden 2026-07-18): la regla que ocultaba la
   fila del buscador del header en la home mobile ya no va — pedido de la
   administradora: el buscador del header se muestra SIEMPRE. --- */

/* --- 9.11 CÍRCULOS DE ACCESOS RÁPIDOS (Etapa 4-bis; desde el reorden
   2026-07-18 viven en BANDA PROPIA blanca — 2ª sección, después del banner
   — ya no dentro del hero). Tira horizontal de las 12 categorías reales,
   scroll solo CSS. El círculo "Kits" del mockup NO va (backlog #11). --- */
/* (0,3,0) por el mismo motivo que 9.1: la regla de Astra sobre
   `.entry-content > .wp-block-group` mete 48px con (0,2,0). */
.entry-content > .wp-block-group.pchela-home-circles-band{
  padding-top:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border); /* borde inferior sutil (decisión supervisor) */
}
@media (max-width:600px){
  .entry-content > .wp-block-group.pchela-home-circles-band{
    padding-top:14px;
    padding-bottom:14px;
  }
}
.pchela-home-circles{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:6px 8px 10px; /* aire para que el scroll no corte bordes/sombras */
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
  -webkit-overflow-scrolling:touch;
}
.pchela-home-circles::-webkit-scrollbar{ height:6px; }
.pchela-home-circles::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:var(--radius-pill);
}
.pchela-home-circles::-webkit-scrollbar-track{ background:transparent; }
/* Markup por bloques CORE (fix auditoría — regla 2.1 de editabilidad):
   Group .pchela-home-circles > 12× Group .pchela-home-circle, cada uno con
   Image .pchela-home-circle-img (figure > a > img, href al término) +
   Paragraph .pchela-home-circle-label con link inline. La administradora
   reordena/quita/agrega círculos y cambia fotos desde el editor. */
/* margin:0: el layout flow del Group contenedor imprime
   `:where(...) > * + *{margin-block-start:24px}` (mismo gotcha de la ronda
   2) — desalinearía los círculos 2-12 dentro de la fila flex. */
.pchela-home-circles-band .pchela-home-circles .pchela-home-circle{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:72px;
  margin:0;
}
/* Centrado "seguro": margin:auto en los extremos centra la tira cuando
   entra completa (desktop) y deja el scroll arrancando desde la izquierda
   cuando desborda (mobile) — equivalente a justify-content:safe center
   pero con soporte universal, sin recortar los primeros ítems. 4 niveles
   ((0,4,0)) para ganarle al margin:0 de arriba ((0,3,0)). */
.pchela-home-circles-band .pchela-home-circles .pchela-home-circle:first-child{ margin-left:auto; }
.pchela-home-circles-band .pchela-home-circles .pchela-home-circle:last-child{ margin-right:auto; }
/* Figure del bloque Image: círculo 72px; el <a> interno (link nativo del
   bloque al archivo de la categoría) llena el círculo completo. */
.pchela-home-circle .pchela-home-circle-img{
  width:72px;
  height:72px;
  margin:0;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--accent-soft);
  overflow:hidden;
  display:block;
  box-sizing:border-box;
  background:linear-gradient(150deg, #E9ECFB, #DCE2F7);
  transition:border-color 140ms ease;
}
.pchela-home-circle .pchela-home-circle-img a{
  display:block;
  width:100%;
  height:100%;
}
.pchela-home-circle .pchela-home-circle-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0;
}
.pchela-home-circle .pchela-home-circle-label{
  margin:0;
  font-size:11px;
  font-weight:600;
  color:var(--text-primary);
  white-space:nowrap;
}
/* Link del label: sin subrayado y color ink — (0,3,1) le gana al underline
   de content-links de Astra ((0,2,1)) por especificidad, no por orden. */
.pchela-home-circles .pchela-home-circle .pchela-home-circle-label a{
  text-decoration:none;
  color:var(--text-primary);
  transition:color 140ms ease;
}
.pchela-home-circle:hover .pchela-home-circle-img{ border-color:var(--accent); }
.pchela-home-circles .pchela-home-circle:hover .pchela-home-circle-label a{ color:var(--primary); }

/* --- 9.12 BANNER PRINCIPAL (Etapa 4-bis, pedido administradora estilo
   Staleks AR con identidad Pchelá). Card r18 con degradado navy→cobalto
   (el degradado va por ATRIBUTO nativo del Group — style.color.gradient —
   editable desde el panel; acá solo radios/padding/tipografía/responsive).
   Contenido 100% bloques core: kicker/título/texto/botón/imagen editables
   desde el editor sin código. --- */
/* CASI FULL-WIDTH desde la ronda 3 (2026-07-20, pedido del dueño 11-bis,
   ref. banner de tienda.staleks.com.ar): un solo Group alignfull con el
   degradado a lo ancho del viewport MENOS un margen lateral mínimo
   estético (20px desktop / 16px mobile), conservando el radius 18 de
   card. Se neutralizan los margins negativos del alignfull de Astra
   (margin calc(-50vw+50%)) — el entry-content ya es full width, así que
   margin lateral fijo + width auto da los 20px simétricos. El contenido
   (Columns) queda centrado a 1180 por el layout constrained nativo.
   (0,3,0) contra el padding default de Astra (0,2,0). */
/* La 1ª variante (0,5,0) le gana al alignfull de Astra
   `.ast-plain-container.ast-no-sidebar .entry-content > .alignfull`
   (0,4,0) que pisaba los margins (medido: seguía en -7/full-bleed). */
/* Banner Cover NATIVO (2026-07-28, pedido del dueño): la imagen abstracta
   3296 pasa a ser el fondo COMPLETO del card (antes: Group+Columns con la
   foto como cuadrado chico a la derecha, oculta <781px). Ahora es un solo
   bloque core/cover — imagen+overlay degradado por atributos nativos
   (editables desde el panel: Media, Overlay/Opacidad, Punto focal), texto
   en un Group anidado (layout constrained 1180) dentro del inner-container
   del Cover. La foto SE VE en mobile también (ya no hay regla que la
   oculte).
   ACTUALIZACIÓN misma sesión (pedido del dueño, ronda 2): banner pasa de
   "casi full-width con margen+radius" a **full-bleed real**, borde a borde
   del viewport, sin radius ni sombra — mismo criterio que el announcement
   bar. Se sacan el margen calc(...+24/16px) y `max-width:none`/`width:auto`
   pierden sentido → `width:100vw` explícito (fórmula alignfull estándar,
   SIN el offset estético que antes daba el inset de ~17px). El
   `overflow-x:clip` global de `html,body` (documentado en la Etapa 4,
   Ronda 3 — resuelve el mismo gotcha del alignfull 100vw+scrollbar) ya
   existe sitewide, no hace falta agregarlo acá. Sin botón/kicker desde
   esta misma ronda (ver 2 reglas eliminadas más abajo). */
.ast-plain-container.ast-no-sidebar .entry-content > .wp-block-cover.pchela-home-banner--full,
.entry-content > .wp-block-cover.pchela-home-banner--full{
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  width:100vw;
  max-width:none;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  min-height:280px;
  /* El Cover core trae padding:1em propio (wp-includes/blocks/cover/style.css)
     — se anula acá para que el padding real lo maneje el Group de texto
     anidado (.pchela-home-banner-inner) y no se duplique el aire. */
  padding:0;
}
@media (max-width:600px){
  .ast-plain-container.ast-no-sidebar .entry-content > .wp-block-cover.pchela-home-banner--full,
  .entry-content > .wp-block-cover.pchela-home-banner--full{
    min-height:210px;
  }
}
/* Group de texto anidado dentro del inner-container del Cover: mismo
   padding que tenía el card viejo (antes era el padding del Group full,
   ahora solo envuelve el texto porque la foto ya cubre todo el card). El
   Cover centra verticalmente por su propio CSS core (align-items:center),
   así que no hace falta reponer flex acá. */
.pchela-home-banner-inner{
  width:100%;
  padding:32px 24px 36px;
}
@media (max-width:600px){
  .pchela-home-banner-inner{ padding:22px 16px 26px; }
}
/* Espaciado banner→categorías (punto 3 de la ronda: ~la mitad del aire
   anterior de 74px): la banda de categorías baja de los 48px default de
   Astra a 36px (24 en mobile). Sin cambios — no depende del tipo de bloque
   del banner. */
.entry-content > .wp-block-group.pchela-home-cats-band{
  padding-top:36px;
}
@media (max-width:600px){
  .entry-content > .wp-block-group.pchela-home-cats-band{ padding-top:24px; }
}
/* Kicker ("Ofertas") y botón ("Ver todas las ofertas") ELIMINADOS del banner
   en esta misma ronda (pedido del dueño: banner puramente visual/editorial,
   sin CTA — ver bitácora "Banner full-bleed, sin CTA"). Reglas
   `.pchela-home-banner-kicker`/`.pchela-home-banner-btn*`/
   `.pchela-home-banner .wp-block-buttons` retiradas: no quedan bloques con
   esas clases en el post_content (verificado, único uso era acá). */
/* Título: única pieza de texto fuerte del banner ahora (sin kicker
   arriba ni botón abajo) → sube de "H2 chico" (30px, el que se usaba
   cuando compartía espacio con kicker+botón) al H2 estándar del design
   system (34px desktop / 26px mobile, PCHELA-DESIGN-SYSTEM.md §Tipografía)
   en vez de un tamaño inventado. Alineación: se DECIDIÓ mantener a la
   IZQUIERDA (no centrar) — con el `focalPoint` del Cover (0.78, 0.18,
   ondas claras arriba-derecha) + el degradado navy 135deg del overlay, el
   costado izquierdo del banner es el más oscuro en TODO el ancho del
   viewport (el gradiente es proporcional a la caja, no a un rango de
   píxeles fijo), así que centrar el texto lo movería a una zona con menos
   contraste real contra la imagen a medida que el viewport crece — a la
   izquierda el texto se queda siempre sobre la parte más oscura,
   consistente con el criterio original del focal point. */
.pchela-home-banner-title{
  margin:0;
  font-size:34px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
}
.pchela-home-banner-text{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.55;
  max-width:560px;
}
@media (max-width:781px){
  .pchela-home-banner-title{ font-size:26px; }
}

/* ==========================================================================
   10) TIENDA / PLP (Etapa 5 · Parte A) — mockup v2 "03 PLP.dc.html", criterio
   MVP. Loop CLÁSICO de WooCommerce (ul.products li.product) — DISTINTO del
   markup de bloques que usan las grillas de la home (wc-block-grid, sección
   9): acá NO reusamos esas reglas, son selectores nuevos para
   .astra-shop-thumbnail-wrap / .astra-shop-summary-wrap (markup real del
   tema, verificado contra el HTML servido).
   - Grilla 4 col desktop / 2 col mobile: YA es el comportamiento NATIVO de
     Astra (astra-settings sin override = columns-4/mobile-columns-2) — sin
     CSS nuevo acá, solo se refina la card.
   - Shop style nativo de Astra cambiado de "modern" (ícono flotante on-card)
     a "shop-page-grid-style" (setting astra-settings[shop-style]) para que
     quede UN solo botón "Agregar" por card, como el mockup — sin snippet.
   - Sidebar izquierda nativa: astra-settings[archive-product-sidebar-layout]
     = left-sidebar (setting nativo de Astra, scoped SOLO al archivo de
     productos — NO afecta cart/checkout/mi cuenta, que comparten el mismo
     sidebar "astra-woo-shop-sidebar" pero no este override). Mobile: la
     sidebar cae DEBAJO del grid — comportamiento DEFAULT de Astra (sin CSS).
   - Widgets nativos en la sidebar (wp-cli, sin plugin nuevo): Categorías de
     producto (WC_Widget_Product_Categories), Navegación por capas de marcas
     (WC_Widget_Brand_Nav — feature de marcas NATIVA de WooCommerce 9.x,
     taxonomía product_brand core, no un plugin externo) y Filtrar por
     precio (WC_Widget_Price_Filter). Los 3 verificados FUNCIONALES por URL
     (min_price/max_price, filter_product_brand). Filtro de stock: el único
     bloque nativo es "woocommerce/stock-filter" (Interactivity API) — se
     probó como widget de bloque y renderizó VACÍO en el loop clásico (no
     tiene el wrapper/contexto de Producto Collection que necesita para
     pintar su HTML); el query var filter_stock_status SÍ filtra a nivel de
     WC_Query (verificado 1478→1460 con instock) pero no hay UI nativa
     disponible sin ese wrapper — anotado en HANDOFF-PENDIENTES.md, sin
     plugin nuevo.
   ========================================================================== */

/* -- 10.1 Breadcrumb -- */
.woocommerce-breadcrumb{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-secondary);
  margin:0 0 8px;
}
.woocommerce-breadcrumb a{ color:var(--text-secondary); text-decoration:none; }
.woocommerce-breadcrumb a:hover{ color:var(--primary); }

/* -- 10.2 Título de tienda/categoría + conteo (toolbar) -- */
.woocommerce-products-header__title.page-title{
  font-family:var(--font-body);
  font-weight:800;
  font-size:32px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--text-primary);
  margin:0 0 14px;
}
@media (max-width:600px){
  .woocommerce-products-header__title.page-title{ font-size:24px; }
}
/* Conteo en mono (izquierda) + orden en pill (derecha) — misma fila con
   floats: son hermanos sueltos en el markup nativo de Woo (sin wrapper
   propio), sin tocar plantillas. clear:both en la grilla evita que arrastre
   el float si el conteo es más alto que el select en alguna traducción. */
.woocommerce-result-count{
  float:left;
  margin:0;
  padding-top:10px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-secondary);
}
.woocommerce-ordering{
  float:right;
  margin:0 0 16px;
}
.woocommerce ul.products.columns-4,
.woocommerce ul.products{ clear:both; }
.woocommerce-ordering select.orderby{
  height:40px;
  padding:0 34px 0 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background-color:var(--surface);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6480' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:13px;
}
.woocommerce-ordering select.orderby:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
  outline:none;
}

/* -- 10.3 Card de producto (loop clásico) --
   El borde/radius/sombra/hover de .woocommerce ul.products li.product ya
   estaban resueltos desde una etapa anterior (style.css del child) — acá
   solo se afina tipografía/spacing interno al markup real de Astra
   (astra-shop-thumbnail-wrap / astra-shop-summary-wrap), que NO es el
   ul.products li.product genérico de Woo "de libro". */
.astra-shop-thumbnail-wrap{
  position:relative;
  background-color:var(--surface);
}
/* Encuadre uniforme (barrido visual 2026-07-28): las fotos reales del
   catálogo tienen encuadres muy dispares (algunas ocupan todo el cuadro,
   otras quedan diminutas con mucho aire blanco alrededor) — con
   object-fit:cover cada miniatura recortaba distinto y el "peso visual"
   de la grilla quedaba desparejo. Cambiado a `contain` (nunca recorta el
   producto) + fondo blanco propio (por si el archivo trae transparencia
   real, ej. algunos .webp) para que el aire sobrante se vea como parte
   del card, no como un hueco. El li ya tiene overflow:hidden + radius 18
   de una etapa anterior (style.css), así que las esquinas superiores del
   fondo blanco quedan recortadas igual que antes. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{
  aspect-ratio:1/1;
  object-fit:contain;
  background-color:var(--surface);
  width:100%;
  height:auto;
  display:block;
}
/* Badge "Oferta" — span.onsale nativo de Woo (shop-style=grid no usa el
   ast-onsale-card del modo "modern"). Pill cobalto arriba-izquierda.
   FIX (revisión del supervisor, 2026-07-20): WooCommerce core trae
   ".woocommerce-js ul.products li.product .onsale{ right:0 }" (misma
   especificidad que esta regla — empataba y quedaba activo porque acá
   nunca se declaraba `right`). Con `left:10px` Y `right:0` los dos a la
   vez, un elemento position:absolute con width:auto se ESTIRA de punta a
   punta (comportamiento normal de CSS, no un bug de Woo) — de ahí la
   "barra" de 145-164px de ancho en vez del pill chico. Fix: `right:auto`
   (+ `width:auto` de más, por las dudas) para volver al shrink-to-fit. */
.woocommerce ul.products li.product .onsale{
  position:absolute;
  top:10px;
  left:10px;
  right:auto;
  width:auto;
  margin:0;
  min-width:0;
  min-height:0;
  background-color:var(--accent);
  color:#fff;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:700;
  line-height:1;
  padding:6px 11px;
  border-radius:var(--radius-pill);
  z-index:2;
}
/* Altura pareja de fila + precio/botón anclados abajo (barrido visual
   2026-07-28): Astra ya pone `li.product{display:flex;flex-direction:
   column}` y CSS Grid (`ul.products{display:grid}`) ya estira cada li a
   la altura de la fila más alta (align-items:normal = stretch por
   defecto para hijos de grid) — verificado en vivo, sin CSS nuestro. Lo
   que faltaba: `.astra-shop-summary-wrap` es un hijo de flujo normal
   (flex-grow:0 1 auto por default), así que NO crecía para ocupar el
   espacio libre que el li ya tenía de sobra — quedaba pegado arriba,
   dejando aire vacío abajo sin usar, y en filas con un título largo (ej.
   "ULKA Hand Pad...") el botón terminaba en un Y distinto al resto de la
   fila. Fix: flex:1 1 auto (crece hasta llenar el li) + `.price` con
   margin-top:auto (empuja precio+botón juntos al fondo, sin importar
   cuántas líneas ocupe el título arriba). Verificado: los 4 botones de la
   fila del ULKA Hand Pad quedan al mismo `top` computado. */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:6px;
  padding:14px 14px 16px;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap > *{ margin:0; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .price{
  margin-top:auto;
}
.woocommerce ul.products li.product .ast-woo-product-category{
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--text-secondary);
}
.woocommerce ul.products li.product .ast-loop-product__link{ text-decoration:none; }
/* Fix auditoría 5+6 (hallazgo BAJA): 600→700 + 14→16px — el design system
   pide 700/18px (H5, "Títulos de card de catálogo"); acá se deja en 16px
   (no 18) porque la card del PLP con sidebar (4 col, ~260-280px) es más
   angosta que el mockup de referencia y 18px alargaba el wrap a 3 líneas
   en algunos nombres largos del catálogo real. Card sin altura fija
   (flex-column, `astra-shop-summary-wrap{gap:6px}`, sin min-height/grid de
   filas) → subir el tamaño no rompe la alineación entre cards. */
/* Line-clamp de 2 líneas (barrido visual 2026-07-28): títulos largos del
   catálogo real (ej. "ULKA Hand Pad (Apoyabrazos) con patas – Máxima
   comodidad para técnicas de uñas.") crecían a 3-4 líneas y estiraban la
   card mucho más que sus vecinas — con el fix de abajo (precio/botón
   anclados con margin-top:auto) ya no rompía la alineación de la fila,
   pero igual convenía topear la altura del bloque de texto para que la
   card no quedara desproporcionada. El texto COMPLETO sigue en el DOM
   (line-clamp es un recorte visual, no borra caracteres) — el nombre
   accesible del link ya incluye el título entero para lectores de
   pantalla; además functions.php agrega `title="..."` al H2 para el
   tooltip nativo del navegador al pasar el mouse. max-height es el
   fallback para el puñado de motores sin soporte de line-clamp. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  color:var(--text-primary);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-height:2.7em;
}
.woocommerce ul.products li.product .ast-loop-product__link:hover .woocommerce-loop-product__title{
  text-decoration:underline;
}
.woocommerce ul.products li.product .price{ font-size:15px; }
.woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
  margin:6px 0 0;
  padding:0 8px;
  height:38px;
  font-size:12.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Barrido visual tanda 2: nunca se declaraba border-radius acá — heredaba
     el border-radius:50px GLOBAL de botones de Astra, que en un botón de
     38px de alto clampea igual a un pill completo (mismo hallazgo ya
     documentado en el botón "Realizar el pedido" de la sección 13, Parte A)
     — visualmente no se rompía, pero quedaba atado a un token ajeno. Se fija
     el radius propio del design system explícitamente (mismo resultado
     visual, ya no depende del clamp de Astra). Verificado en /tienda/,
     /marca/staleks/ y /product-category/: pill en las 3, sin regresión. */
  border-radius:var(--radius-pill);
}

/* -- 10.4 Sidebar de filtros (astra-woo-shop-sidebar, izquierda desktop) --
   El wrapper .ast-filter-wrap ya lo imprime Astra alrededor de TODOS los
   widgets de esta sidebar (verificado en el HTML servido) — se usa como la
   card blanca r18 del mockup, con un header "Filtrar" decorativo (::before,
   sin markup nuevo) y cada widget como sección con divisor. */
.ast-filter-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.ast-filter-wrap::before{
  content:"Filtrar";
  display:block;
  padding:12px 18px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:800;
  color:var(--text-primary);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.ast-filter-wrap .widget{
  margin:0;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.ast-filter-wrap .widget:last-child{ border-bottom:none; }
.ast-filter-wrap .widget-title{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  color:var(--text-primary);
  text-transform:none;
  letter-spacing:0;
  margin:0 0 10px;
}

/* Línea divisoria de #secondary (barrido visual 2026-07-28): Astra trae
   ".ast-left-sidebar #secondary{border-right:1px solid
   var(--ast-border-color);margin-right:-1px}" — #secondary se estira
   (CSS Grid/flex del layout) a la altura del listado de productos, pero
   el card .ast-filter-wrap (que YA tiene su propio borde+sombra
   completos) termina mucho antes, apenas después del filtro de Precio.
   Resultado: la línea navy de Astra seguía sola, sin nada al lado, hasta
   el final de la grilla — asimetría reportada en el barrido. El card
   resuelve la separación por sí solo (borde+sombra+aire) → se saca la
   línea del contenedor exterior en vez de extenderla (más limpio que
   inventar una altura dinámica). Selector con la misma especificidad de
   ID de Astra + 1 clase real de más (.woocommerce) para ganar sin
   !important. */
.woocommerce.ast-left-sidebar #secondary{
  border-right:none;
  margin-right:0;
}

/* Categorías de producto — lista nativa con conteo mono a la derecha
   (flex-wrap en el <li>: el link+conteo comparten fila, el <ul class="children">
   pasa a línea completa con flex-basis:100% — sin tocar el markup). */
.ast-filter-wrap .product-categories,
.ast-filter-wrap .product-categories ul.children{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.ast-filter-wrap .product-categories ul.children{
  margin:2px 0 4px 14px;
  padding-left:10px;
  border-left:1px solid var(--border);
}
.ast-filter-wrap .product-categories li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:8px;
}
.ast-filter-wrap .product-categories li > a{
  order:1;
  flex:1 1 auto;
  padding:3px 0;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  line-height:1.25;
  color:var(--text-primary);
  text-decoration:none;
}
.ast-filter-wrap .product-categories li > a:hover{ color:var(--primary); }
.ast-filter-wrap .product-categories li > .count{
  order:2;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-secondary);
}
.ast-filter-wrap .product-categories li > ul.children{ order:3; flex:0 0 100%; }
.ast-filter-wrap .product-categories li.current-cat > a,
.ast-filter-wrap .product-categories li.current-cat-parent > a{
  color:var(--primary);
  font-weight:700;
}

/* Marca (WC_Widget_Brand_Nav = "Navegación por capas de marcas") — checkbox
   visual con ::before en el <li> (el link y el conteo son hermanos sueltos
   en el markup nativo, no hijos uno del otro): se ordenan con flex+order,
   así que no hace falta envolver nada. Estado activo = clase .chosen nativa
   que Woo agrega al <li> del filtro aplicado (verificado en el HTML real). */
.ast-filter-wrap .wc-brand-list-layered-nav-product_brand{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ast-filter-wrap .wc-layered-nav-term{
  display:flex;
  align-items:center;
  gap:10px;
}
.ast-filter-wrap .wc-layered-nav-term::before{
  content:"";
  order:1;
  flex-shrink:0;
  width:18px;
  height:18px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  background-color:var(--surface);
}
.ast-filter-wrap .wc-layered-nav-term a{
  order:2;
  flex:1 1 auto;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  color:var(--text-primary);
  text-decoration:none;
}
.ast-filter-wrap .wc-layered-nav-term .count{
  order:3;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-secondary);
}
.ast-filter-wrap .wc-layered-nav-term.chosen::before{
  border-color:var(--primary);
  background-color:var(--primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px 11px;
}
.ast-filter-wrap .wc-layered-nav-term.chosen a{
  color:var(--primary);
  font-weight:700;
}

/* Precio (WC_Widget_Price_Filter) — inputs pill + botón pill navy (tokens
   de Inputs/Botones del design system, sección 4). */
.ast-filter-wrap .price_slider_wrapper .price_slider{
  margin-bottom:10px;
}
.ast-filter-wrap .price_slider_amount{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.ast-filter-wrap .price_slider_amount input[type="text"]{
  flex:1 1 90px;
  height:38px;
  min-width:0;
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background-color:var(--background);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-primary);
  padding:0 14px;
  box-sizing:border-box;
}
.ast-filter-wrap .price_slider_amount input[type="text"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
  outline:none;
  background-color:var(--surface);
}
.ast-filter-wrap .price_slider_amount button.button{
  flex:0 0 auto;
  height:38px;
  padding:0 18px;
  border:none;
  border-radius:var(--radius-pill);
  background-color:var(--primary);
  color:#fff;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:700;
}
.ast-filter-wrap .price_slider_amount button.button:hover{ background-color:var(--primary-dark); }
.ast-filter-wrap .price_label{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-secondary); margin-top:8px; }
.ui-slider .ui-slider-range{ background-color:var(--accent); }
.ui-slider .ui-slider-handle{ background-color:var(--primary); border-color:var(--primary); }

/* -- 10.5 Paginación numérica -- */
nav.woocommerce-pagination{ margin:32px 0 0; clear:both; }
nav.woocommerce-pagination ul.page-numbers{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
nav.woocommerce-pagination .page-numbers{
  display:grid;
  place-items:center;
  min-width:38px;
  height:38px;
  padding:0 4px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background-color:var(--surface);
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-primary);
  text-decoration:none;
}
nav.woocommerce-pagination .page-numbers.current{
  background-color:var(--primary);
  color:#fff;
  border-color:var(--primary);
  font-weight:600;
}
nav.woocommerce-pagination a.page-numbers:hover{
  border-color:var(--primary);
  color:var(--primary);
}
nav.woocommerce-pagination .page-numbers.dots{
  border-color:transparent;
  background-color:transparent;
  color:var(--text-secondary);
  width:auto;
}
/* Fix de especificidad — círculo real (barrido visual 2026-07-28): Astra
   trae ".woocommerce-js nav.woocommerce-pagination ul li a/span{min-width:
   2.5em}" con 2 elementos más en el selector (0,2,4) que nuestro
   "min-width:38px" de arriba (0,2,1) — le ganaba y los números quedaban en
   ~33px en vez de 38 (círculo un poco ovalado, no el "número redondo"
   pedido). Mismo criterio ya usado en la Etapa 5 Parte B (sumar clases
   reales del propio markup para empatar/superar sin !important). */
nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
nav.woocommerce-pagination ul.page-numbers li span.page-numbers{
  min-width:38px;
}

/* -- 10.6 Responsive 900/768/600 -- */
@media (max-width:900px){
  .ast-filter-wrap::before{ font-size:14px; padding:12px 16px; }
  .ast-filter-wrap .widget{ padding:14px 16px; }
}
/* Grilla 2 columnas hasta 768px (barrido visual 2026-07-28): el
   breakpoint "tablet" nativo de Astra (545-921px, clase de body
   .tablet-columns-3) fuerza 3 columnas en TODO ese rango — a ~600-768px
   las cards quedaban apretadas (mockup pide 2 col recién arriba de
   768). Se fuerza 2 columnas solo hasta 768px; 769-921 sigue en 3
   ("tablet grande") y ≥922 vuelve al default de Astra (4, sin CSS
   nuestro) — sin tocar ni 375 (ya 2 col por el breakpoint mobile de
   Astra, ≤544) ni desktop. Selector con más clases reales que la regla
   nativa de Astra (".woocommerce(-page).tablet-columns-3
   ul.products:not(.elementor-grid)", especificidad 0,3,1) para ganar sin
   !important. */
@media (max-width:768px){
  .woocommerce.tablet-columns-3 ul.products:not(.elementor-grid),
  .woocommerce-page.tablet-columns-3 ul.products:not(.elementor-grid){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px){
  .woocommerce-result-count{ font-size:12px; padding-top:6px; }
  .woocommerce-ordering select.orderby{ font-size:12.5px; height:38px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:14.5px; max-height:2.6em; }
  .woocommerce ul.products li.product .price{ font-size:14px; }
  .woocommerce ul.products li.product .astra-shop-summary-wrap{ padding:11px 12px 13px; gap:5px; }
}

/* ==========================================================================
   11) PRODUCTO / PDP (Etapa 5 · Parte B) — mockup v2 "02 PDP.dc.html",
   criterio MVP. Todo scoped a `.single-product` (body class nativa de Woo,
   así ninguna regla se filtra a otras plantillas). Snippets de contenido
   (marca/SKU arriba, "sin reseñas todavía", bloque de confianza, fallback
   de "En stock", retexto de related) en functions.php, documentados ahí.
   - Related products REUSA el markup clásico de card (.astra-shop-*) de la
     sección 10 — mismos selectores, cero CSS nuevo para las cards en sí.
   - Cuotas MP: revisado el plugin oficial (woocommerce-mercadopago 8.8.1) —
     el único widget de cuotas en producto es el banner de la pasarela
     "Mercado Crédito" (gateway de crédito al comprador APARTE de Checkout
     Pro, con su propia lógica de fees en el carrito). Activarlo es dar de
     alta un método de pago nuevo, no un simple toggle visual → decisión
     estructural, se deja en HANDOFF-PENDIENTES.md, NO se activa acá.
   ========================================================================== */

/* -- 11.1 Layout de 2 columnas: galería ~58% / columna derecha ~38% (pedido
   "fotos grandes" del feedback de la administradora, mockup 1fr/440px).
   Especificidad verificada en vivo con matchedRules: Astra trae un tercer
   selector para este ancho, SOLO activo desde 922px
   (".woocommerce #content .ast-woocommerce-container div.product
   div.images{width:50%}"), con un ID (#content) — un ID le gana a
   cualquier cantidad de clases, así que hacía falta usar #content acá
   también como ANCESTRO (con MÁS clases que ellos, para ganar el
   desempate de clases una vez empatado el nivel de ID) — no alcanza con
   clases solas por más que se agreguen, ni con !important (prohibido). -- */
.single-product #content div.product.type-product div.images.woocommerce-product-gallery{
  width:58%;
}
.single-product #content div.product.type-product div.summary.entry-summary{
  width:39%;
}
/* Especificidad (1,6,2): ID #content + 6 clases + 2 elementos div, gana al
   ID+4-clases+2-elementos de Astra. El reset a 100% de 11.12 (≤900px) usa
   EXACTAMENTE el mismo selector (misma especificidad) para que gane por
   orden de carga sobre esta regla, no por especificidad — si no, el ancho
   de escritorio le ganaría a su propio reset mobile. */
/* Orden visual del mockup (breadcrumb → marca/SKU → H1 → "sin reseñas" →
   precio → stock → variantes+cantidad+botón → confianza → meta). Astra
   consolida título/categoría/precio/stock/meta en UN solo método
   (Astra_Woocommerce::single_product_content_structure, hook único en
   prioridad 10 de woocommerce_single_product_summary) — no se puede
   intercalar contenido ENTRE el título y el precio con otro hook de
   prioridad numérica porque salen juntos en el mismo call. Se resuelve con
   flex + `order` en los hijos directos de .summary (todos siguen siendo
   elementos de bloque normales, sin roturas de layout interno). El span
   `.single-product-category` de Astra queda oculto: es redundante con el
   breadcrumb (arriba) y con "Categorías: …" del product_meta (abajo) —
   el mockup no lo tiene. */
.single-product div.product .summary.entry-summary{
  display:flex;
  flex-direction:column;
}
.single-product .summary.entry-summary > .woocommerce-breadcrumb{ order:0; }
.single-product .summary.entry-summary > .pchela-pdp-toprow{ order:10; }
.single-product div.product div.summary.entry-summary > span.single-product-category{ display:none; }
/* especificidad (0,4,3): la regla nativa .woocommerce-js div.product
   div.summary .single-product-category (0,4,2) le ganaba por los 2
   selectores de elemento (div) que sumaba de más — verificado en vivo
   (matchedRules), no asumido. */
.single-product .summary.entry-summary > h1.product_title{ order:20; }
/* Excerpt corto nativo (algunos productos lo tienen, ej. el pincel
   Roubloff): sin `order` quedaba en 0 (empate con el breadcrumb, antes del
   título) — verificado en vivo. Se ubica después del título, antes del
   link de reseñas. */
.single-product .summary.entry-summary > .woocommerce-product-details__short-description{ order:22; }
.single-product .summary.entry-summary > .pchela-pdp-noreviews{ order:25; }
.single-product .summary.entry-summary > .price{ order:30; }
.single-product .summary.entry-summary > p.stock,
.single-product .summary.entry-summary > p.ast-stock-detail{ order:35; }
.single-product .summary.entry-summary > form.cart{ order:40; }
.single-product .summary.entry-summary > .pchela-pdp-trust{ order:45; }
.single-product .summary.entry-summary > .product_meta{ order:50; }
/* Sticky de columna (anotación del mockup "columna sticky: top 96px
   mientras la descripción scrollea") PROBADO y DESCARTADO: WooCommerce
   hookea tabs + reseñas + related DENTRO del mismo div.product que la
   galería/summary (woocommerce_after_single_product_summary, ver
   content-single-product.php) — no hay un contenedor de 2 columnas propio
   que termine donde termina la galería/summary. Con position:sticky el
   buy box seguía flotando sobre las tabs y el form de reseñas al
   scrollear (verificado en vivo: se solapaba con "Sé el primero en
   valorar"). Se descarta sin !important ni hacks de altura — el buy box
   queda en flujo normal, sigue siendo XL y fácil de encontrar. */

/* -- 11.2 Galería: imagen grande con esquinas redondeadas, trigger de zoom
   estilado (ícono nativo de WooCommerce/wc-zoom.js + photoswipe — sin
   tocar el JS, ya encolado por WooCommerce core), thumbs redondeados con
   borde activo cobalt. -- */
.single-product .woocommerce-product-gallery__wrapper{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(150deg,#E9ECFB,#DCE2F7);
}
/* Red de seguridad del reveal de la galería (revisión del supervisor,
   2026-07-20). Diagnóstico en vivo (2 pestañas nuevas, sin errores de
   consola, las 8 requests de imagen en 200): el reveal NATIVO de Woo
   (wc-single-product.js: arranca con opacity:0 inline + transition, y el
   evento "start" de flexslider lo pasa a opacity:1 inline) SÍ corre —
   confirmado con `el.style.opacity === "1"` después de cargar, en 2
   pestañas distintas. El screenshot real (captura de compositor, lo que
   ve una persona) siempre mostró la foto visible. Lo que se reprodujo con
   getComputedStyle().opacity="0" fue con `document.hidden===true`: Chrome
   CONGELA el timeline de una transición CSS mientras la pestaña no es
   visible (spec real de Page Visibility, no un bug de Woo) — y esto le
   puede pasar a una persona real que abre el producto en una pestaña de
   fondo y la mira recién después. Red de seguridad SIN !important y SIN
   romper el fade normal: una @keyframes que fuerza opacity:1 recién a los
   1.2s (muy por encima de los 0.25s del fade nativo). Las animaciones CSS
   sí pisan un opacity inline NO-important por cascada — pero pierden
   contra una TRANSICIÓN activa en la misma propiedad (prioridad mayor),
   así que en el caso normal (JS revela a los 0.25s) esta regla no cambia
   nada visible; solo actúa si el reveal nativo nunca llegó a disparar. */
.single-product .woocommerce-product-gallery{
  animation:pchela-gallery-reveal .25s ease-in-out 1.2s forwards;
}
@keyframes pchela-gallery-reveal{
  from{ opacity:0; }
  to{ opacity:1; }
}
.single-product .woocommerce-product-gallery__image img{
  width:100%;
  height:auto;
  display:block;
}
.single-product .woocommerce-product-gallery__trigger{
  width:40px;
  height:40px;
  border-radius:var(--radius-pill);
  background-color:rgba(255,255,255,.9);
  box-shadow:var(--shadow-1);
  display:flex;
  align-items:center;
  justify-content:center;
  right:14px;
  bottom:14px;
  top:auto;
  left:auto;
}
.single-product ol.flex-control-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.single-product ol.flex-control-thumbs li{ width:64px; height:64px; }
.single-product ol.flex-control-thumbs img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:var(--radius-md);
  border:1.5px solid var(--border);
  cursor:pointer;
  opacity:1;
}
.single-product ol.flex-control-thumbs img.flex-active{
  border-color:var(--primary);
}
/* Badge "¡Oferta!" (span.onsale nativo de Woo): sin estilo propio en la
   PDP caía al círculo blanco/negro default de WooCommerce (border-radius
   100%, top/left -8px) — mismo pill cobalto que ya usan las cards de la
   PLP/home (sección 10), reposicionado sobre la esquina de la galería. El
   badge "-X%" (con el porcentaje real) es el snippet "b" de la Parte C —
   este bloque solo resuelve el ESTILO del span nativo, no cambia el texto.
   .sale sumado al selector (clase real que Astra imprime en div.product
   cuando el producto está en oferta): hacía falta para ganarle en `top` a
   ".woocommerce-js.single-product .sale:not(...) > span.onsale" (0,5,1) —
   con .sale la propia empataba en 5 clases y ganaba por los 2 elementos
   (div+span) vs 1 — verificado en vivo (matchedRules), no asumido. */
.single-product div.product.type-product.sale > span.onsale{
  position:absolute;
  top:14px;
  left:14px;
  right:auto;
  margin:0;
  min-width:0;
  min-height:0;
  width:auto;
  height:auto;
  background-color:var(--accent);
  color:#fff;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  padding:6px 13px;
  border-radius:var(--radius-pill);
  z-index:2;
}

/* -- 11.3 Marca + SKU arriba del título (functions.php, .pchela-pdp-toprow)
   + breadcrumb (ya global, sección 10.1) + H1 + link "sin reseñas". -- */
.single-product .pchela-pdp-toprow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 0 6px;
}
.single-product .pchela-pdp-brand{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
}
.single-product .pchela-pdp-brand:hover{ color:var(--accent-dark); }
.single-product .pchela-pdp-sku{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-secondary);
}
.single-product h1.product_title.entry-title{
  font-family:var(--font-body);
  font-weight:800;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--text-primary);
  margin:0 0 8px;
}
.single-product .pchela-pdp-noreviews{
  display:inline-block;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-secondary);
  text-decoration:underline;
  margin:0 0 14px;
}
.single-product .pchela-pdp-noreviews:hover{ color:var(--primary); }

/* -- 11.4 Buy box: precio grande mono navy, tachado si hay oferta, stock
   (nativo + fallback de functions.php) en verde con punto. -- */
.single-product .summary.entry-summary > .price{
  display:block;
  font-family:var(--font-mono);
  font-size:32px;
  font-weight:600;
  line-height:1;
  color:var(--primary);
  margin:0 0 14px;
}
.single-product .summary.entry-summary > .price del{
  display:block;
  font-size:15px;
  font-weight:400;
  color:var(--text-secondary);
  text-decoration:line-through;
  margin:0 0 4px;
  opacity:1;
}
.single-product .summary.entry-summary > .price ins{
  text-decoration:none;
  font-weight:600;
}
.single-product p.stock{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  margin:0 0 16px;
  padding:0;
  background:none;
  border:none;
}
.single-product p.stock::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:var(--radius-pill);
  background-color:currentColor;
  flex-shrink:0;
}
.single-product p.stock.in-stock{ color:var(--success); }
.single-product p.stock.out-of-stock{ color:var(--error); }
.single-product p.ast-stock-detail{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  margin:0 0 16px;
}
.single-product p.ast-stock-detail .ast-stock-avail{
  display:none; /* "Availability:" — el punto de color + el texto alcanzan, sin duplicar etiqueta */
}
.single-product p.ast-stock-detail .stock{
  display:flex;
  align-items:center;
  gap:7px;
}
.single-product p.ast-stock-detail .stock::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:var(--radius-pill);
  background-color:currentColor;
  flex-shrink:0;
}
.single-product p.ast-stock-detail .stock.in-stock{ color:var(--success); }
.single-product p.ast-stock-detail .stock.out-of-stock{ color:var(--error); }

/* -- 11.5 Variantes: tabla nativa de WooCommerce → selects pill (mismo
   lenguaje visual que los inputs del design system, sección 3 de style.css
   del child). -- */
.single-product table.variations{
  width:100%;
  margin:0 0 14px;
  border-collapse:collapse;
}
.single-product table.variations tr + tr{ margin-top:10px; }
.single-product table.variations .label{
  text-align:left;
  padding:0 0 6px;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  color:var(--text-primary);
}
.single-product table.variations .value{ padding:0 0 10px; }
.single-product table.variations select{
  height:44px;
  width:100%;
  max-width:280px;
  padding:0 16px;
  font-family:var(--font-body);
  font-size:14.5px;
}
.single-product a.reset_variations{
  display:inline-block;
  margin-left:10px;
  font-size:12.5px;
  color:var(--text-secondary);
  text-decoration:underline;
}
.single-product .woocommerce-variation-price .price{
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:600;
  color:var(--primary);
}
.single-product .woocommerce-variation-availability p.stock{ margin:6px 0 0; }

/* -- 11.6 Cantidad XL + botón "Añadir al carrito" XL pill cobalto
   full-width de la columna (punto 2 del prompt). El stepper +/- del
   mockup requeriría JS custom (no hay feature nativa en Astra free) — se
   deja el input numérico nativo (con las flechas del navegador), solo
   restyleado en pill para que combine. -- */
/* Fila cantidad+botón: en producto SIMPLE es el propio <form class="cart">
   (sus únicos hijos son .quantity y el botón); en VARIABLE el form.cart
   envuelve además la tabla de variantes, así que la fila real es
   .woocommerce-variation-add-to-cart (impresa por woocommerce_single_variation
   una vez elegida la variante) — de ahí el :not() para no romper el stack
   vertical tabla→wrap del formulario variable. */
.single-product form.cart:not(.variations_form),
.single-product .woocommerce-variation-add-to-cart.variations_button{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin:0 0 4px;
}
.single-product form.cart .quantity{
  flex-shrink:0;
}
.single-product form.cart .quantity .qty{
  height:54px;
  width:70px;
  padding:0 10px;
  text-align:center;
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
}
.single-product .single_add_to_cart_button.button{
  flex:1;
  min-width:200px;
  height:54px;
  padding:0 28px;
  border-radius:var(--radius-pill);
  background-color:var(--accent);
  color:#fff;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:700;
  box-shadow:var(--shadow-cta);
  white-space:nowrap;
}
.single-product .single_add_to_cart_button.button:hover{
  background-color:var(--accent-dark);
}

/* -- 11.7 Bloque de confianza (functions.php, .pchela-pdp-trust — hook
   woocommerce_after_add_to_cart_form): tarjeta con filas separadas por
   hairline, igual lenguaje visual que el resto del sitio (radius-lg,
   border, shadow-1). -- */
.single-product .pchela-pdp-trust{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin:18px 0 0;
}
.single-product .pchela-pdp-trust-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px 16px;
  border-bottom:1px solid var(--border);
}
.single-product .pchela-pdp-trust-row svg{ flex-shrink:0; margin-top:1px; }
.single-product .pchela-pdp-trust-shipping-text{
  display:flex;
  flex-direction:column;
  gap:5px;
  flex:1;
}
.single-product .pchela-pdp-trust-shipping-text strong{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  color:var(--text-primary);
}
.single-product .pchela-pdp-trust-shipping-text > span{
  font-family:var(--font-body);
  font-size:12.5px;
  line-height:1.45;
  color:var(--text-secondary);
}
.single-product .pchela-pdp-trust-shipping-text > span.pchela-pdp-trust-free{
  display:block;
  font-weight:600;
  color:var(--success);
  font-size:11.5px;
}
.single-product .pchela-pdp-trust-original span{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-primary);
  align-self:center;
}
.single-product .pchela-pdp-trust-payments{
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.single-product .pchela-pdp-chip{
  background-color:var(--background);
  color:var(--text-secondary);
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:var(--radius-sm);
}
.single-product .pchela-pdp-trust-whatsapp{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  background-color:#E9F9EF;
  border-bottom:none;
  text-decoration:none;
}
.single-product .pchela-pdp-trust-whatsapp span{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
}
.single-product .pchela-pdp-trust-whatsapp:hover span{ color:var(--success); }

/* -- 11.8 product_meta (Categorías/Marca nativos de Woo, SKU ya lo oculta
   Woo si está vacío): caption chica, links cobalto. -- */
.single-product .product_meta{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-secondary);
  margin:16px 0 0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.single-product .product_meta > span{ display:block; }
.single-product .product_meta a{
  color:var(--accent);
  text-decoration:none;
}
.single-product .product_meta a:hover{ color:var(--accent-dark); }

/* -- 11.9 Tabs (Descripción / Información adicional / Valoraciones):
   subrayado cobalt en la activa, según el mockup v2 (pills u subrayado —
   se usa subrayado, mismo patrón que el resto del sitio para navegación
   activa). -- */
.single-product .woocommerce-tabs.wc-tabs-wrapper{ margin:40px 0 0; }
.single-product ul.tabs.wc-tabs{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0 0 24px;
  padding:0 0 0;
  border-bottom:1px solid var(--border);
}
.single-product ul.tabs.wc-tabs li{
  margin:0;
  padding:0;
  background:none;
  border:none;
}
.single-product ul.tabs.wc-tabs li a{
  display:inline-block;
  padding:0 0 14px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  color:var(--text-secondary);
  text-decoration:none;
  border-bottom:2.5px solid transparent;
  margin-bottom:-1px;
}
.single-product ul.tabs.wc-tabs li.active a,
.single-product ul.tabs.wc-tabs li a:hover{
  color:var(--primary);
  border-bottom-color:var(--accent);
}
.single-product .woocommerce-Tabs-panel{
  max-width:760px;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-secondary);
}
.single-product .woocommerce-Tabs-panel h2{
  font-family:var(--font-body);
  font-weight:700;
  font-size:20px;
  color:var(--text-primary);
  margin:0 0 16px;
}
.single-product table.woocommerce-product-attributes{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  border-collapse:collapse;
}
.single-product table.woocommerce-product-attributes th{
  background-color:var(--background);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  width:180px;
}
.single-product table.woocommerce-product-attributes td{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-primary);
  padding:10px 14px;
  border-bottom:1px solid var(--border);
}

/* -- 11.10 Reseñas: título + estado vacío con estrellas apagadas (mockup
   2g-vacío), reusa .price/.button ya estilados donde aplica. -- */
.single-product #reviews .woocommerce-Reviews-title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:20px;
  color:var(--text-primary);
  margin:0 0 16px;
}
.single-product p.woocommerce-noreviews{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  text-align:center;
}

/* -- 11.11 Related "Los profesionales también compraron" (retexto en
   functions.php): título + espaciado. Las cards en sí ya salen estiladas
   por la sección 10 (mismo markup .astra-shop-thumbnail-wrap/summary-wrap
   que la PLP — sin CSS nuevo). -- */
.single-product section.related.products,
.single-product section.upsells.products{
  margin:48px 0 0;
  padding:40px 0 0;
  border-top:1px solid var(--border);
}
.single-product section.related.products > h2,
.single-product section.upsells.products > h2{
  font-family:var(--font-body);
  font-weight:700;
  font-size:22px;
  color:var(--text-primary);
  margin:0 0 20px;
}

/* -- 11.12 Responsive 900/600: galería full-width arriba, summary abajo,
   botón cómodo para el pulgar (altura ya XL en 11.6, se mantiene). -- */
@media (max-width:900px){
  /* Mismos selectores (misma especificidad, (0,5,2)) que la regla de
     escritorio de 11.1/11.1-sticky — así el reset gana por ORDEN de carga
     (va después en el archivo), no por especificidad; si tuviera menos
     peso, el ancho/sticky de escritorio le hubiera ganado incluso en
     mobile (bug real detectado y corregido antes de desplegar: verificado
     con matchedRules que el ancho de escritorio no cedía). */
  .single-product #content div.product.type-product div.images.woocommerce-product-gallery,
  .single-product #content div.product.type-product div.summary.entry-summary{
    width:100%;
    float:none;
    position:static;
    top:auto;
  }
  .single-product #content div.product.type-product div.summary.entry-summary{ margin-top:24px; }
  .single-product h1.product_title.entry-title{ font-size:24px; }
  .single-product .summary.entry-summary > .price{ font-size:28px; }
}
@media (max-width:600px){
  .single-product h1.product_title.entry-title{ font-size:22px; }
  .single-product .summary.entry-summary > .price{ font-size:26px; }
  .single-product form.cart .quantity .qty{ height:50px; width:60px; }
  .single-product .single_add_to_cart_button.button{ height:50px; font-size:14.5px; min-width:0; }
  .single-product ul.tabs.wc-tabs{ gap:18px; overflow-x:auto; flex-wrap:nowrap; }
  .single-product ul.tabs.wc-tabs li a{ font-size:13.5px; white-space:nowrap; }
  .single-product .woocommerce-Tabs-panel{ max-width:100%; }
}

/* ==========================================================================
   12) MECÁNICAS DE CONVERSIÓN (Etapa 5 · Parte C) — mockup v2 "04 Carrito +
   Checkout.dc.html" (pantallas 4a/4b/mini-cart). Solo la barra de progreso a
   envío gratis necesita CSS nuevo (functions.php la imprime en
   woocommerce_before_cart y woocommerce_widget_shopping_cart_before_buttons,
   sin hardcodear el umbral — lo lee de corrarfo_free_shipping_amount).
   - Badge "-X%": reusa 100% el pill .onsale de las secciones 10/11, cero
     CSS nuevo (mismo filtro woocommerce_sale_flash, solo cambia el texto).
   - Urgencia de stock (PDP) y calculadora de envío: 100% config nativa de
     WooCommerce (umbral de pocas existencias + formato de stock, y el
     shipping calc ya habilitado desde la Etapa 2) — sin CSS ni HTML nuevo.
   Color de la barra: SUCCESS (verde, no cobalto) — así está en las 3
   pantallas del mockup v2 (4a carrito, mini-cart, 4b logrado): track
   `--pchela-bg-alt` + fill `--pchela-success`, texto "envío gratis" en
   verde. El estado logrado reusa el mismo verde con fondo suave #E7F6EC
   (idéntico al notice "Success" de la sección 7 del design system).
   ========================================================================== */
.pchela-envio-gratis{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 16px 14px;
  margin:0 0 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.pchela-envio-gratis-msg{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.4;
  color:var(--text-primary);
}
.pchela-envio-gratis-msg strong{ font-weight:700; }
.pchela-envio-gratis-monto{ font-family:var(--font-mono); }
.pchela-envio-gratis-destino{ color:var(--success); }
.pchela-envio-gratis-track{
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--background-alt);
  overflow:hidden;
}
.pchela-envio-gratis-fill{
  height:100%;
  border-radius:var(--radius-pill);
  background:var(--success);
  transition:width .3s ease;
}
/* Estado logrado (4b del mockup): fondo verde suave, mismo tono que el
   notice "Success" ya usado en el resto del sitio. */
.pchela-envio-gratis--logrado{
  background:#E7F6EC;
  border-color:transparent;
}
.pchela-envio-gratis--logrado .pchela-envio-gratis-msg{
  font-weight:700;
  color:var(--success);
}
/* Mini-cart (Astra imprime .widget_shopping_cart en el flyout del header,
   verificado en el HTML servido): mismo componente, un poco más compacto. */
.widget_shopping_cart .pchela-envio-gratis{
  padding:10px 14px 12px;
  margin:0 16px 12px;
}

/* ==========================================================================
   13) CARRITO Y CHECKOUT (Etapa 5 · Parte D) — mockup v2 "04 Carrito +
   Checkout.dc.html" (4a/4c/4h/4i). Ambas páginas usan los bloques NATIVOS de
   WooCommerce Blocks (Store API, `woocommerce/cart` en /carrito/ ID 9 y
   `woocommerce/checkout` en /finalizar-compra/ ID 10) — NO shortcodes
   clásicos. Todo el HTML lo genera React/Interactivity API contra la Store
   API; acá solo se re-estilan las clases `.wc-block-*` reales (verificadas
   en vivo con un carrito real vía Store API antes de escribir una sola
   línea, no asumidas de memoria). Layout de 2 columnas (campos/líneas +
   resumen sticky) y el paso a 1 columna en mobile YA son el comportamiento
   NATIVO del componente `SidebarLayout` de WooCommerce Blocks (mide el
   ancho del propio bloque con ResizeObserver, no un media query de
   viewport) — sin CSS nuevo para eso. La sidebar de Astra (contenido WP)
   YA viene en "no-sidebar" por defecto en estas páginas (verificado
   `body.ast-no-sidebar` real) — el layout ya es "1 columna" en el sentido
   del punto 4 del prompt (sin una 3ª columna de widgets).
   ========================================================================== */

/* -- 13.1 Título de página ("Carrito" / "Finalizar compra"): Astra imprime
   h1.entry-title con weight 600 por default — subido a 800 (Brief H1). -- */
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title{
  font-family:var(--font-body);
  font-weight:800;
  color:var(--text-primary);
}
/* -- 13.1b Fix "título muy encimado arriba, pegado al header" (feedback del
   dueño sobre el fix del carrito, ronda 4): en mobile/tablet `.entry-header`
   (wrapper nativo de Astra del H1, sin thumbnail en estas 2 páginas) mide
   `padding:0`, así que el H1 arranca exactamente en el borde inferior del
   header sticky (gap medido = 0px a 375 y a 768) — en desktop (1280) ya hay
   60px de aire (de otro layout de Astra, sin tocar). Se le da al wrapper el
   mismo padding-top de banda que usan las páginas institucionales
   (sección 14.1, `.pchela-inst-header`) para que el título de carrito/
   checkout respire igual que el resto del sitio: 28px hasta 1200px (mismo
   corte que el fix 13.10) y 24px en mobile (≤600, idéntico al valor de
   14.1 en ese breakpoint). Solo en estas 2 páginas — selector scopeado a
   `.woocommerce-cart`/`.woocommerce-checkout`, no toca ninguna otra. -- */
@media (max-width:1200px){
  .woocommerce-cart .entry-header,
  .woocommerce-checkout .entry-header{
    padding-top:28px;
  }
}
@media (max-width:600px){
  .woocommerce-cart .entry-header,
  .woocommerce-checkout .entry-header{
    padding-top:24px;
  }
}

/* -- 13.2 CARRITO (/carrito/) — líneas de producto (.wc-block-cart-items,
   markup real verificado con un producto agregado vía Store API). Card
   única blanca r18 envolviendo cabecera + filas (mockup 4h).
   HALLAZGO de especificidad (verificado en vivo con matchedRules, no
   asumido): `.wc-block-cart-items` es un <table> real, y WooCommerce
   Blocks trae su propia regla `table.wc-block-cart-items{border:0;
   background:none !important}` (cart.css del plugin) — el `!important`
   bloquea CUALQUIER `background`/`background-color` propio sin usar
   `!important` a la vez (prohibido en este proyecto). Se logra el mismo
   resultado visual SIN `!important` con un `box-shadow: inset` (no forma
   parte del shorthand `background`, así que no lo toca el `!important` de
   Woo) que pinta el relleno blanco y respeta el radius igual que un
   background real; el `border:0` (sin !important) si se puede ganar subiendo
   la especificidad a 2 clases (`.wc-block-cart .wc-block-cart-items`,
   (0,2,0)) contra el `table.wc-block-cart-items` de Woo ((0,1,1)). */
.wc-block-cart .wc-block-cart-items{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 0 0 1000px var(--surface), var(--shadow-1);
}
.wc-block-cart-items__header{
  padding:12px 20px;
  border-bottom:1px solid var(--border);
}
.wc-block-cart-items__header-item{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.wc-block-cart-items__row{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.wc-block-cart-items__row:last-child{ border-bottom:none; }
.wc-block-cart-item__image img{
  border-radius:var(--radius-md);
}
.wc-block-components-product-name{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--text-primary);
  text-decoration:none;
}
a.wc-block-components-product-name:hover{ color:var(--accent); }

/* Precio unitario duplicado en la card del ítem, mobile (barrido visual
   2026-07-28): el markup de la línea trae 2 precios reales — el unitario
   bajo el título (`.wc-block-cart-item__prices`, útil en desktop donde
   hay una columna "Precio" separada de "Subtotal") y el total de la línea
   arriba a la derecha (`.wc-block-cart-item__total`, siempre visible).
   Con cantidad 1 ambos muestran el MISMO número — se lee como
   duplicado. Se oculta el unitario SOLO en mobile (dueño pidió dejar el
   total a la derecha); en desktop ambos siguen (útil con cantidad >1).
   HALLAZGO de especificidad: cart.css del plugin trae
   "table.wc-block-cart-items .wc-block-cart-items__row
   .wc-block-cart-item__prices{display:flex}" (0,3,1) — le ganaba a
   nuestro ".wc-block-cart-item__prices{display:none}" (0,1,0) pese al
   media query (los media queries no suman especificidad). Se repite el
   selector completo del plugin + 1 clase ancestro de más
   (.wc-block-cart) para ganar sin `!important`. */
@media (max-width:600px){
  .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices{
    display:none;
  }
}

/* Precio de línea y de la card de resumen: mono navy (Brief 10), en vez del
   negro/gris por defecto de WooCommerce Blocks. */
.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-components-product-price .wc-block-components-formatted-money-amount,
.wc-block-checkout .wc-block-components-product-price,
.wc-block-checkout .wc-block-components-product-price .wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value{
  font-family:var(--font-mono);
  color:var(--primary);
  font-weight:600;
}

/* Stepper de cantidad: YA es -/+ nativo (WooCommerce Blocks lo trae de
   fábrica, a diferencia del input clásico de la PDP — sin JS nuevo acá,
   backlog #23 no aplica a esta pantalla). Reestilado a pill. */
.wc-block-components-quantity-selector{
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--surface);
  height:40px;
  overflow:hidden;
}
.wc-block-components-quantity-selector__button{
  background:none;
  border:none;
  color:var(--text-primary);
  font-family:var(--font-body);
}
.wc-block-components-quantity-selector__button:hover{ color:var(--accent); }
.wc-block-components-quantity-selector__input{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--text-primary);
  background:none;
  border:none;
  text-align:center;
}

/* Quitar línea: gris, hover error (Brief: estado error #D92D20). */
.wc-block-cart-item__remove-link{
  color:var(--text-secondary);
  font-family:var(--font-body);
  font-weight:600;
  text-decoration:none;
}
.wc-block-cart-item__remove-link:hover{ color:var(--error); }

/* -- 13.3 Resumen del pedido (sidebar sticky, carrito Y checkout): card
   blanca r18 + sombra, igual criterio que el resto del sitio (Brief 4). Un
   solo wrapper `.wc-block-components-sidebar` envuelve cupón + subtotal +
   envío + total + CTA + medios de pago aceptados — mismo agrupamiento que
   la card única del mockup 4h/4i. -- */
.wc-block-components-sidebar.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-checkout__sidebar{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-1);
}
.wc-block-components-totals-item{
  font-family:var(--font-body);
  color:var(--text-primary);
}
.wc-block-components-totals-item__label{ font-size:14px; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:17px;
  font-weight:800;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--primary);
}
/* "Totales del carrito" invisible en mobile (barrido visual 2026-07-28):
   cart.css del plugin trae un `@container(max-width:699px){
   .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title
   {display:none}}` NATIVO (verificado en el archivo del server) — oculta
   el título cuando el propio bloque (no el viewport) mide menos de 699px
   de ancho. El dueño pidió mantenerlo visible para no perder la
   jerarquía. Mismo selector exacto (0,3,0) sin envolver en container
   query propia, así siempre gana por venir después en la cascada;
   1 clase de más para no depender del orden de carga. */
.wc-block-cart .wc-block-components-sidebar.wc-block-cart__sidebar .wc-block-cart__totals-title{
  display:block;
}

/* Toggle "Añadir cupones" / "¿Tenés un cupón?": link discreto subrayado,
   igual al mockup (no un botón). */
.wc-block-components-panel__button{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-secondary);
}
.wc-block-components-panel__button:hover{ color:var(--primary); }

/* Inputs de texto reales dentro del carrito/checkout (cupón, calculadora de
   envío, formulario de dirección): mismo componente TextInput en los 3
   casos — pill 46-48px, foco cobalto/navy (Brief 4).
   HALLAZGO de especificidad #2 (verificado bajando y leyendo
   `packages-style.css` del plugin WooCommerce en el server, no adivinado):
   el propio paquete de bloques trae
   `.wc-block-components-text-input input[type=email], ...input[type=text],
   ...input[type=tel]...{border-radius:4px}` — el selector de atributo
   `[type=email]` cuenta como una clase más en la especificidad, (0,2,0),
   así que le ganaba a `.wc-block-components-text-input input` (0,1,1) pese
   a cargar pchela-sections.css después. Se sube a (0,3,0) agregando el
   ancestro `.wc-block-checkout`/`.wc-block-cart` + `input[type]` (selector
   de atributo genérico, sin fijar un tipo puntual) para ganar siempre,
   cargue lo que cargue después. */
.wc-block-checkout .wc-block-components-text-input input[type],
.wc-block-cart .wc-block-components-text-input input[type],
.wc-block-components-totals-wrapper input[type="text"]{
  height:48px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background-color:var(--background);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:14.5px;
}
.wc-block-checkout .wc-block-components-text-input input[type]:focus,
.wc-block-cart .wc-block-components-text-input input[type]:focus,
.wc-block-components-totals-wrapper input[type="text"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
  background-color:var(--surface);
  outline:none;
}
.wc-block-components-text-input label{
  font-family:var(--font-body);
  color:var(--text-secondary);
}
/* País/Provincia: componente propio `.wc-blocks-components-select` (NO un
   <select> nativo suelto) con su propia regla
   `.wc-blocks-components-select .wc-blocks-components-select__select`
   (0,2,0) — mismo hallazgo que los TextInput, misma solución: ancestro +
   clase real del componente para llegar a (0,3,0). */
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-cart .wc-blocks-components-select .wc-blocks-components-select__select{
  height:48px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background-color:var(--background);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:14.5px;
}
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-cart .wc-blocks-components-select .wc-blocks-components-select__select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
  background-color:var(--surface);
  outline:none;
}

/* Calculadora de envío del carrito (Store API, reemplaza a la opción legada
   `woocommerce_enable_shipping_calc` de la Etapa 2 en esta página — ver
   hallazgo de la Parte C): mismo componente `.wc-block-components-totals-wrapper`
   que el cupón, ya cubierto arriba. Texto de ayuda. */
.wc-block-components-shipping-calculator-address,
.wc-block-components-shipping-rates-control__package{
  font-family:var(--font-body);
  color:var(--text-secondary);
  font-size:13px;
}

/* Botón CTA "Finalizar compra" (carrito) / "Realizar el pedido" (checkout):
   Astra los pinta NAVY (color de botón global) — Brief 10 pide COBALTO
   (mismo acento que "Añadir al carrito"), XL y full-width, igual al mockup. */
.wc-block-cart .wc-block-cart__submit-button,
.wc-block-checkout .wc-block-components-checkout-place-order-button{
  background-color:var(--accent);
  height:54px;
  border-radius:var(--radius-pill);
  font-size:16px;
  font-weight:700;
  box-shadow:var(--shadow-cta);
  width:100%;
}
.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:hover{
  background-color:var(--accent-dark);
}
.wc-block-cart__submit-container{
  margin-top:4px;
}

/* "Seguir comprando": link navy centrado, como el mockup. El bloque nativo
   de WooCommerce Blocks no trae ese link (es del template clásico) — no se
   agrega (no es un snippet permitido en esta etapa); el link "Volver a la
   tienda" que sí existe se comparte con el estado vacío (13.5). */

/* -- 13.4 Cross-sell "Sumá a tu pedido" (bloque woocommerce/product-collection
   dentro del carrito, `relatedBy` categorías/tags — SOLO aparece si Woo
   encuentra candidatos; con los productos de prueba usados en la
   verificación no apareció ninguno, así que este bloque queda de resguardo
   por si aparece con otro carrito real — no se pudo confirmar en vivo,
   anotado en el build-log). Reusa las clases reales de los bloques hijo
   nativos (product-image/post-title/product-price/product-button), mismos
   tokens que la card de la PLP (sección 10) para que combinen si aparece. */
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection{
  margin-top:8px;
  padding:20px 24px 24px;
  background:var(--accent-soft);
  border-radius:var(--radius-lg);
}
.wp-block-woocommerce-cart .wp-block-woocommerce-product-collection > h2{
  font-family:var(--font-body);
  font-weight:800;
  font-size:19px;
  color:var(--text-primary);
  margin:0 0 14px;
}
.wp-block-woocommerce-cart .wc-block-product-template{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.wp-block-woocommerce-cart .wc-block-product-template > li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  padding:0 0 14px;
  list-style:none;
}
.wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title,
.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-title{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  color:var(--text-primary);
  padding:0 14px;
  margin:10px 0 4px;
}
.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-price{
  padding:0 14px;
  display:block;
  margin:0 0 8px;
}
.wp-block-woocommerce-cart .wc-block-product-template .wp-block-button{
  padding:0 14px;
}
.wp-block-woocommerce-cart .wc-block-product-template .wp-block-button__link{
  background-color:var(--accent);
  color:#fff;
  border-radius:var(--radius-pill);
  height:36px;
  font-size:12.5px;
  font-weight:700;
  width:100%;
}
.wp-block-woocommerce-cart .wc-block-product-template .wp-block-button__link:hover{
  background-color:var(--accent-dark);
}

/* -- 13.5 CARRITO VACÍO — contenido propio en español (mockup 4c anota
   explícitamente que el string nativo de WooCommerce Blocks NO se puede
   retraducir por gettext por venir congelado en el post_content guardado
   del bloque — §10.1 del mockup — así que este estado se maqueta como
   bloques Gutenberg comunes editados directamente en el post_content de
   /carrito/, no un snippet). Categorías reales (mismas del footer: Geles y
   esmaltado / Torno y fresas / Herramientas / Acrílico). -- */
.pchela-empty-cart{
  padding:40px 20px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.pchela-empty-cart-icon{
  width:64px;
  height:64px;
  border-radius:var(--radius-pill);
  background:var(--accent-soft);
  display:grid;
  place-items:center;
}
.pchela-empty-cart .wp-block-heading{
  font-family:var(--font-body);
  font-weight:800;
  font-size:20px;
  color:var(--text-primary);
  margin:0;
}
.pchela-empty-cart p{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.5;
  margin:0;
  max-width:360px;
}
.pchela-empty-cart-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:4px 0 0;
}
.pchela-empty-cart-chips a{
  display:inline-flex;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
  text-decoration:none;
}
.pchela-empty-cart-chips a:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.pchela-empty-cart .wp-block-buttons{ margin:6px 0 0; width:100%; max-width:320px; }
.pchela-empty-cart .wp-block-button__link{
  background-color:var(--primary);
  color:#fff;
  border-radius:var(--radius-pill);
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  width:100%;
}
.pchela-empty-cart .wp-block-button__link:hover{ background-color:var(--primary-dark); }

/* -- 13.6 CHECKOUT (/finalizar-compra/) — pasos ("Información de contacto",
   "Dirección de envío", "Opciones de envío", "Opciones de pago"...): título
   H4-like (Brief) + separación entre pasos. Copy nativa de WooCommerce en
   español (ya correcta) — no se renombra por gettext, no es parte del
   alcance de esta parte. Campo DNI/CUIT del mockup 4e: NO se construye
   (backlog #6, HANDOFF-PENDIENTES.md), checkout queda con los campos
   nativos AR (CP, provincia) tal cual pide el punto 3. -- */
.wc-block-components-checkout-step{
  margin:0 0 28px;
}
.wc-block-components-checkout-step__title{
  font-family:var(--font-body);
  font-weight:800;
  font-size:18px;
  color:var(--text-primary);
}

/* Tarjetas de opción (envío/pago): WooCommerce Blocks dibuja el borde de la
   opción MARCADA con un box-shadow inset (no un border real, para no mover
   el layout al engrosarlo) vía
   `.wc-block-components-radio-control--highlight-checked
   label.wc-block-components-radio-control__option--checked-option-highlighted`
   — (0,2,1) de especificidad (verificado leyendo checkout.css del plugin en
   el server). La opción SIN marcar no tiene ninguna regla de borde propia
   de Woo (verificado, sin conflicto) así que esa sí es directa. Seleccionada:
   navy + halo (Brief, foco de inputs) — se repite la clase 3 veces para
   llegar a (0,3,1) y ganarle sin usar `!important`. */
.wc-block-components-radio-control__option{
  border-radius:var(--radius-lg);
  box-shadow:inset 0 0 0 1.5px var(--border);
  background:var(--surface);
  margin-bottom:10px;
}
label.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option-checked{
  border-radius:var(--radius-lg);
  box-shadow:inset 0 0 0 1.5px var(--primary), 0 0 0 3px rgba(35,46,120,.10);
}
.wc-block-components-radio-control__input{
  accent-color:var(--primary);
}
.wc-block-components-radio-control__label{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  color:var(--text-primary);
}
.wc-block-components-radio-control__secondary-label{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--primary);
}
.wc-block-components-radio-control__description{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-secondary);
}

/* Checkbox ("Usar la misma dirección para facturación" / términos /
   "Crear una cuenta"): mismo mecanismo SVG-mark de WooCommerce Blocks,
   solo se redondea y colorea con los tokens del Brief. Mismo hallazgo de
   especificidad: `.wc-block-components-checkbox
   .wc-block-components-checkbox__input[type=checkbox]` = (0,3,0) en
   checkout.css del plugin — se repite la clase del input para llegar a
   (0,4,0)/(0,5,0) con :checked, sin `!important`. */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"].wc-block-components-checkbox__input{
  border-radius:var(--radius-sm);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"].wc-block-components-checkbox__input:checked{
  background-color:var(--primary);
  border-color:var(--primary);
}
.wc-block-components-checkbox__label{
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--text-primary);
}
/* Checkbox desalineado del texto (barrido visual 2026-07-28): el <label>
   nativo es `display:inline-flex; align-items:flex-start` (checkout.css
   del plugin, verificado) — el tick SVG (15px) queda anclado arriba de la
   línea en vez de centrado contra el texto (14px/line-height 20px),
   ~1.5px de diferencia real medida con getBoundingClientRect. Fix:
   align-items:center. Selector con 1 clase ancestro de más
   (.wc-block-checkout) que el nativo `.wc-block-components-checkbox
   label` (0,1,1) para ganar sin `!important`. */
.wc-block-checkout .wc-block-components-checkbox label{
  align-items:center;
}

/* Medios de pago (Mercado Pago Checkout Pro sandbox + transferencia,
   DATOS-REALES.md): mismo componente radio de arriba (13.6) — acá solo la
   descripción del método (CBU al confirmar, etc.), que ya viene con el
   texto real del gateway. */
.wc-block-checkout__payment-method .wc-block-components-radio-control__option{
  padding:14px 16px 14px 48px;
}
/* Tarjeta de método de pago con descripción expandible (barrido visual
   2026-07-28, ej. "Transferencia bancaria"): WooCommerce Blocks envuelve
   la opción + su contenido expandible en
   `.wc-block-components-radio-control-accordion-option` — cuando está
   marcada trae SU PROPIA regla nativa
   (`.wc-block-components-radio-control--highlight-checked
   .wc-block-components-radio-control-accordion-option--checked-option-
   highlighted{border-radius:4px;box-shadow:inset 0 0 0 1.5px currentColor}`,
   verificado leyendo checkout.css del plugin en el server) que NO coincide
   con el radius:18/ring navy que ya le dábamos al <label> de adentro
   (arriba) — dos rectángulos redondeados distinto, uno adentro del otro,
   con la esquina "desfasada" reportada + la descripción pegada al borde
   recto de 4px (2px de padding nativo). Fix: mismo radius que el label +
   mismo ring navy en el wrapper exterior (que ahora sí engloba
   label+descripción como una sola tarjeta) — el ring propio del <label>
   se apaga adentro de un wrapper con accordion para no dejar una línea
   redondeada flotando en el medio de la tarjeta; aire real en el texto de
   la descripción, indentado igual que el label (48px, alinea con el
   texto, no con el punto del radio). Selectores con más clases reales que
   los nativos para ganar sin `!important`. */
.wc-block-components-radio-control-accordion-option{
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  border-radius:var(--radius-lg);
  box-shadow:inset 0 0 0 1.5px var(--primary), 0 0 0 3px rgba(35,46,120,.10);
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked{
  box-shadow:none;
  margin-bottom:0;
}
/* El propio plugin de Mercado Pago trae
   ".wc-block-components-radio-control-accordion-content{padding:2px
   !important}" (mp-plugins-components.min.css) — el `!important` bloquea
   CUALQUIER padding propio en ese mismo elemento sin usar `!important` a
   la vez (prohibido en este proyecto). Mismo criterio ya usado en la
   Etapa 5 Parte D con el `background` de WooCommerce Blocks: se logra el
   aire real aplicando el padding al DIV hijo (sin clase, sin regla en
   conflicto) en vez de pelear por la misma propiedad en el mismo
   elemento. */
.wc-block-components-radio-control-accordion-content{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-secondary);
}
.wc-block-components-radio-control-accordion-content > div{
  padding:4px 16px 14px 48px;
}

/* Términos (aparecen solo cuando WooCommerce Ajustes → Cuenta y privacidad
   tiene una página de términos asignada — Etapa 7 — mientras tanto el
   bloque no imprime nada, comportamiento nativo correcto). */
.wc-block-checkout__terms{
  font-family:var(--font-body);
  font-size:12.5px;
  color:var(--text-secondary);
  line-height:1.5;
}
.wc-block-checkout__terms a{
  color:var(--primary);
  text-decoration:underline;
}

/* Resumen del pedido del checkout (sidebar, card ya cubierta en 13.3):
   línea de producto compacta con badge de cantidad sobre la miniatura. */
.wc-block-components-order-summary-item__image{
  border-radius:var(--radius-md);
  overflow:hidden;
}
.wc-block-components-order-summary-item__image img{
  border-radius:var(--radius-md);
}
.wc-block-components-order-summary-item__quantity{
  background:var(--primary);
  color:#fff;
  font-family:var(--font-mono);
}
.wc-block-components-order-summary-item .wc-block-components-product-name{
  font-size:13px;
}
/* "Resumen del pedido" duplicado en checkout mobile (barrido visual
   2026-07-28): en `is-mobile` (verificado, clase real que WooCommerce
   Blocks pone en `.wc-block-checkout` según el ancho del propio
   componente) React renderiza el bloque `checkout-order-summary` DOS
   veces: 1) el acordeón colapsable de siempre, arriba, dentro de
   `.wc-block-checkout__sidebar` (la sidebar entera se reposiciona arriba
   del formulario en mobile, comportamiento nativo) — SIN clase extra; 2)
   una segunda copia completa ("Fill", clase
   `checkout-order-summary-block-fill-wrapper`, verificado que NO EXISTE
   en el DOM en desktop/`is-large` — solo se monta en mobile) dentro de
   `.wc-block-checkout__actions`, justo antes del botón "Realizar el
   pedido" — un recap intencional del plugin, pero redundante para este
   sitio (mismo total 2 veces en la misma pantalla). Se deja SOLO el
   acordeón de arriba (pedido explícito) ocultando la 2ª copia — scoped a
   `.is-mobile` (la MISMA detección nativa de WooCommerce Blocks, no un
   breakpoint propio inventado, así nunca desincroniza con el layout
   real). */
.wc-block-checkout.is-mobile .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper{
  display:none;
}

/* --------------------------------------------------------------------------
   13.7) NOTICES DE WOOCOMMERCE (site-wide) — "Producto agregado al carrito",
   cupón aplicado/inválido, error de stock, mensajes de checkout. Brief §7
   (Estados/notices): fondos suaves + texto/borde del color de estado. Cubre
   TANTO el template clásico (`.woocommerce-message/-info/-error`, usado en
   PDP/PLP/Mi cuenta) COMO los notices de los bloques nuevos
   (`.wc-block-components-notice-banner`, carrito/checkout) — mismos 3
   colores en los dos sistemas.
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner{
  border-radius:var(--radius-md);
  border-width:1px;
  border-style:solid;
  font-family:var(--font-body);
  font-size:14px;
  padding:14px 18px;
}
.woocommerce-message,
.wc-block-components-notice-banner.is-success{
  background-color:#E7F6EC;
  border-color:rgba(1,156,52,.3);
  color:var(--success);
}
.woocommerce-info,
.wc-block-components-notice-banner.is-info{
  background-color:#E6F5FC;
  border-color:rgba(0,156,222,.3);
  color:var(--info);
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error{
  background-color:#FBEAE8;
  border-color:rgba(217,45,32,.3);
  color:var(--error);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  color:inherit;
}
.woocommerce-message a.button.wc-forward,
.woocommerce-error a.button.wc-forward{
  background-color:var(--accent);
  color:#fff;
  border-radius:var(--radius-pill);
  font-weight:700;
}
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a.button.wc-forward:hover{
  background-color:var(--accent-dark);
}

/* -- 13.9 Ajuste del supervisor (revisión Parte D, 2026-07-20): ocultar la
   descripción corta del producto en las líneas de carrito/checkout —
   muchas descripciones del catálogo traen artefactos de importación
   ("n" sueltas, "nC...", ver HANDOFF-PENDIENTES.md sección 1) que
   ensuciaban el flujo de compra; el mockup 4a/4e tampoco la muestra en las
   líneas. Clase real verificada en vivo (`ÜLKA Handy` en el carrito):
   `.wc-block-components-product-metadata__description` (componente
   `ProductMetadata` de WooCommerce Blocks, compartido por las líneas del
   carrito y el resumen del checkout — el mini-cart de este sitio es
   clásico, sin este componente, pero se scopea igual por si algún día se
   migra). NO se tocó ninguna descripción de producto (regla explícita del
   dueño, ya respetada en toda la Etapa 5). */
.wc-block-cart .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description,
.widget_shopping_cart .wc-block-components-product-metadata__description{
  display:none;
}

/* -- 13.8 Responsive ≤900/≤600: WooCommerce Blocks stackea las 2 columnas
   SOLO — es el propio componente el que mide su ancho (ResizeObserver, no
   viewport), ya nativo, sin CSS. Acá solo tipografía/spacing. -- */
@media (max-width:600px){
  .woocommerce-cart h1.entry-title,
  .woocommerce-checkout h1.entry-title{ font-size:24px; }
  .wc-block-components-checkout-step__title{ font-size:16px; }
  .wc-block-components-sidebar.wc-block-cart__sidebar,
  .wc-block-components-sidebar.wc-block-checkout__sidebar{ padding:16px; }
}

/* -- 13.10 Fix "carrito corrido a la izquierda / mal centrado" en mobile
   (reporte del dueño, ronda 4). Causa raíz medida con getComputedStyle en
   `/carrito/` y `/finalizar-compra/` reales a 375 y 768 — NO era el drawer
   del mini-carrito (`.astra-cart-drawer`, siempre off-canvas a `left:100%`,
   posición fija que Chrome no cuenta para el scroll del documento — 0
   diferencia medida en `scrollWidth`/rects del header antes y después de
   disparar `add_to_cart_button`/Store API reales, con o sin el drawer) ni
   la notice de "agregado al carrito" (mide 335px dentro del gutter de 20px,
   sin overflow). La causa real: Astra bleedea los Group `alignwide` dentro
   de `.entry-content[data-ast-blocks-layout]` con
   `margin-left/-right: -20px` (su propia regla nativa, @media
   max-width:1200px) para que ocupen el viewport completo — comportamiento
   correcto y ya usado en el resto del sitio (home/institucionales). Pero
   `woocommerce/cart` y `woocommerce/checkout` (`cart.css`/`checkout.css`
   del propio plugin WooCommerce, sin tocar) fijan `width:100%` en
   `.wp-block-woocommerce-cart`/`.wp-block-woocommerce-checkout` — un
   `width:100%` NO se auto-expande con márgenes negativos (a diferencia de
   `width:auto`, que sí lo hace y es lo que Astra asume), así que el margen
   izquierdo corre el bloque -20px pero el ancho no crece para
   compensarlo: el bloque queda con el borde izquierdo pegado a 0 y el
   derecho corto (medido 335 de 375 en `/carrito/` y `/finalizar-compra/`,
   713 de 768 en tablet — mismo patrón, no reportado por el dueño pero con
   la misma causa) — se pierde el gutter simétrico y todo el carrito/
   checkout se lee corrido a la izquierda.
   RONDA 2 (feedback del dueño sobre este mismo fix): la v1 de abajo
   agrandaba el `width` para llenar el margen negativo de Astra —
   simétrico, pero el resultado quedaba borde a borde (sin gutter) y "no
   estético". Fix corregido: en vez de agrandar el ancho para ocupar el
   sangrado, se NEUTRALIZA el sangrado `alignwide` (mismo breakpoint que la
   regla nativa de Astra, ≤1200px) llevando `margin-left`/`margin-right` a
   `0` — el `width:100%` que ya trae el propio `cart.css`/`checkout.css` de
   WooCommerce queda sin tocar, y al calcularse contra el padding-box YA
   angosto de `.entry-content` (335px a 375, 713px a 768 — el mismo 20px de
   gutter que usa el resto del sitio) el bloque entero queda adentro del
   gutter estándar, simétrico. Sin `!important`, sin tocar plugin/core; no
   se toca la regla global de `.alignwide` (la siguen usando otras
   secciones del sitio con `width:auto`, sin este conflicto). Se agrega
   `.ast-plain-container` al selector (existe de verdad en el body de
   ambas páginas) para que la especificidad (0,5,0) le gane con claridad a
   la regla de Astra (0,4,0) sin depender solo del orden de carga. -- */
@media (max-width:1200px){
  .ast-plain-container .entry-content[data-ast-blocks-layout] > .wp-block-woocommerce-cart.alignwide,
  .ast-plain-container .entry-content[data-ast-blocks-layout] > .wp-block-woocommerce-checkout.alignwide{
    margin-left:0;
    margin-right:0;
  }
}

/* ==========================================================================
   14) INSTITUCIONALES (Etapa 6 · Tanda 1) — mockup v2 "07 Institucionales.dc.html"
   (7a-7h) + "06 Cuenta + Sistema.dc.html" (6f/6g/6l/6m, referencia de marca).
   4 páginas en Gutenberg nativo: Marcas (/marcas/), Nosotros (/nosotros/),
   Envíos y pagos (/envios/), Preguntas frecuentes (/preguntas-frecuentes/).
   Fondos navy/blanco van por el atributo nativo backgroundColor del Group
   (paleta global de Astra: ast-global-color-1=navy, ast-global-color-5=surface)
   — igual que la Etapa 4. Acá solo lo que el panel no expone: el cobalt-soft
   (no está en la paleta), grids responsive finos, cards y el acordeón nativo
   core/details. Contacto (Fluent Forms) es de OTRO agente — no se toca acá.
   ========================================================================== */

/* --- 14.1 Encabezado de página compartido por Marcas/Envíos/FAQ (banda
   blanca simple: H1 + subtítulo opcional). Mismo gotcha de especificidad que
   9.1/9.11: `.entry-content > .wp-block-group{padding:3em}` de Astra (0,2,0)
   le gana a una sola clase (0,1,0) — selectores a (0,3,0). --- */
.entry-content > .wp-block-group.pchela-inst-header,
.entry-content > .wp-block-group.pchela-inst-section,
.entry-content > .wp-block-group.pchela-nosotros-hero{
  padding-top:36px;
  padding-bottom:36px;
}
.entry-content > .wp-block-group.pchela-inst-header{ padding-bottom:24px; }
/* .pchela-envios-protect es una card decorativa (no una banda de sección) —
   necesita el padding CHICO del propio card, no el 3em de Astra ni el
   ritmo de 36px de las bandas. Mismo (0,3,0) para ganarle a Astra, pero acá
   el valor final ES el padding visual de la card (no se pisa con otra
   regla — evita 2 reglas peleando por la misma propiedad). */
.entry-content > .wp-block-group.pchela-envios-protect{
  padding-top:22px;
  padding-bottom:22px;
  margin-top:8px;
  margin-bottom:36px;
}
@media (max-width:600px){
  .entry-content > .wp-block-group.pchela-inst-header,
  .entry-content > .wp-block-group.pchela-inst-section,
  .entry-content > .wp-block-group.pchela-nosotros-hero{
    padding-top:24px;
    padding-bottom:24px;
  }
  .entry-content > .wp-block-group.pchela-inst-header{ padding-bottom:18px; }
  .entry-content > .wp-block-group.pchela-envios-protect{
    padding-top:16px;
    padding-bottom:16px;
    margin-top:6px;
    margin-bottom:24px;
  }
}
/* Gap vertical entre hijos directos de cada banda (mismo patrón 9.1: el
   Group "flow" no expone block-gap en este theme.json, así que el espaciado
   entre título/subtítulo/párrafos va por margin-top en los hijos). */
.pchela-inst-header > *,
.pchela-inst-section > *,
.pchela-nosotros-hero > *{
  margin-top:14px;
}
.pchela-inst-header > *:first-child,
.pchela-inst-section > *:first-child,
.pchela-nosotros-hero > *:first-child{
  margin-top:0;
}
.pchela-inst-h1{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:var(--text-primary);
}
.pchela-inst-subtitle{
  margin:0;
  font-size:14px;
  color:var(--text-secondary);
}
@media (max-width:600px){
  .pchela-inst-h1{ font-size:24px; }
}
/* Título de sección genérico (Nosotros: "Desde 2017...", "Lo que nos
   importa") — 24/800 como el mockup 7e. Envíos/Pagos son la EXCEPCIÓN
   (página utilitaria más compacta, 19px en el mockup 7f): className propio
   con más especificidad para ganarle a esta regla general. */
.pchela-inst-section > .wp-block-heading{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:var(--text-primary);
}
.pchela-inst-section > .wp-block-heading.pchela-envios-h2{
  font-size:19px;
}
@media (max-width:600px){
  .pchela-inst-section > .wp-block-heading{ font-size:20px; }
  .pchela-inst-section > .wp-block-heading.pchela-envios-h2{ font-size:17px; }
}

/* --- 14.2 MARCAS — grid de 9 cards (logo/nombre + descripción + botón).
   3 col desktop / 2 col tablet / 1 col mobile (900/600, mismo quiebre que
   el resto del sitio). --- */
.pchela-marcas-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:900px){
  .pchela-marcas-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
}
@media (max-width:600px){
  .pchela-marcas-grid{ grid-template-columns:1fr; gap:12px; }
}
.pchela-marcas-grid .pchela-marcas-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0; /* anula el margin-block-start:24px del layout flow de WP en hijos de grid (gotcha ya documentado en 9.3/9.4) */
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-1);
  padding:20px;
  transition:box-shadow 140ms ease, transform 140ms ease;
}
.pchela-marcas-grid .pchela-marcas-card:hover{
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}
/* Logo: caja 64px, imagen contain (los logos tienen proporciones muy
   distintas entre sí — mismo criterio que el placeholder overflow:hidden
   de la banda de marcas de la home, sección 9.7). */
.pchela-marcas-grid .pchela-marcas-logo{
  margin:0;
  height:56px;
  display:flex;
  align-items:center;
}
.pchela-marcas-grid .pchela-marcas-logo img{
  max-width:140px;
  max-height:56px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
/* Marcas sin logo cargado (Global Home, Bobbi Nail, SUNUV — ver
   HANDOFF-PENDIENTES.md): mismo lenguaje visual que el placeholder de la
   home (mono, sin logo real inventado). 3 clases para ganarle al underline
   de content-links de Astra (0,2,1) y al color de link global (0,1,0). */
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-logo--placeholder{
  height:56px;
  margin:0;
  display:flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-logo--placeholder a{
  color:var(--text-primary);
  text-decoration:none;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-name{
  margin:0;
  font-size:17px;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-name a{
  color:var(--text-primary);
  font-weight:700;
  text-decoration:none;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-name a:hover{
  color:var(--primary);
  text-decoration:underline;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-desc{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-secondary);
  flex:1;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-btn{
  margin:4px 0 0;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-btn .wp-block-button{
  width:100%;
  margin:0;
}
/* (0,5,0) para ganarle a las reglas de botón de Astra/core sobre
   .wp-block-button__link (mismo criterio que 9.5/9.9: acá pill OUTLINE,
   full-width, navy — visualmente distinto del CTA lleno de las bandas). */
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-btn .wp-block-button__link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:44px;
  border:1.5px solid var(--primary);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--primary);
  font-size:13.5px;
  font-weight:700;
  transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pchela-marcas-grid .pchela-marcas-card .pchela-marcas-btn .wp-block-button__link:hover{
  background:var(--background);
  color:var(--primary-dark);
  border-color:var(--primary-dark);
}

/* --- 14.3 NOSOTROS — hero con degradado (mismo tratamiento que el hero de
   la home, sección 9.2: cobalt-soft → blanco, no está en la paleta de
   Astra). --- */
.pchela-nosotros-hero{
  background:linear-gradient(180deg, var(--accent-soft), #FFFFFF);
  text-align:center;
}
.pchela-nosotros-hero > *{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.pchela-nosotros-eyebrow{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--accent);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pchela-nosotros-h1{
  margin:0;
  font-size:36px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--text-primary);
}
.pchela-nosotros-lead{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--text-secondary);
}
@media (max-width:600px){
  .pchela-nosotros-h1{ font-size:26px; line-height:1.2; }
  .pchela-nosotros-lead{ font-size:13.5px; }
}
/* Valores: grid 3 col desktop / 2 col tablet / 1 col mobile. Reusa
   íntegramente el patrón de card de "Por qué Pchelá" (sección 9.8:
   .pchela-home-why-card/-icon/-title/-text, incluido el layout icono-a-la-
   izquierda en mobile) — acá solo el wrapper de grilla, pedido explícito
   del prompt ("reusá el patrón de Por qué Pchelá"). */
.pchela-nosotros-values-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:900px){
  .pchela-nosotros-values-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .pchela-nosotros-values-grid{ grid-template-columns:1fr; }
}

/* --- 14.4 ENVÍOS Y PAGOS — grids de cards + callouts. --- */
.pchela-envios-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:900px){
  .pchela-envios-grid{ grid-template-columns:1fr; gap:12px; }
}
.pchela-pagos-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
@media (max-width:600px){
  .pchela-pagos-grid{ grid-template-columns:1fr; gap:12px; }
}
.pchela-envios-grid .pchela-envios-card,
.pchela-pagos-grid .pchela-envios-card{
  margin:0; /* anula margin-block-start:24px del layout flow en hijos de grid */
  display:flex;
  flex-direction:column;
  gap:6px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:20px;
}
.pchela-envios-card-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.pchela-envios-card-title{
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
}
.pchela-envios-badge-free{
  display:inline-flex;
  align-items:center;
  background:#E7F6EC;
  color:var(--success);
  font-size:11px;
  font-weight:700;
  padding:2px 10px;
  border-radius:var(--radius-pill);
}
.pchela-envios-card-desc{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text-secondary);
}
.pchela-envios-card-desc strong{
  color:var(--success);
}
.pchela-envios-callout{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--accent-soft);
  border-radius:var(--radius-md);
  padding:14px 18px;
}
.pchela-envios-callout svg{ flex-shrink:0; }
.pchela-envios-callout span{
  font-size:13.5px;
  line-height:1.5;
  color:var(--text-primary);
}
.pchela-envios-note{
  margin:14px 0 0;
  font-size:13px;
  color:var(--text-secondary);
}
/* Banda "Compra protegida": card navy contenida (NO alignfull, el Group
   ya vive dentro de .entry-content así que queda al ancho del container
   1180px), icono + texto en fila. Reusa los grises fijos sobre oscuro del
   Brief (#C9D2EA). El contenido del bloque core/html (svg+span) queda como
   hijo directo del Group — sin wrapper propio. */
/* Padding vertical (22px/16px) ya lo pone el selector de especificidad
   (0,3,0) de 14.1, sobre la MISMA propiedad — acá solo lo que ese selector
   no cubre: horizontal + el resto del look de card. */
.pchela-envios-protect{
  display:flex;
  align-items:center;
  gap:14px;
  border-radius:var(--radius-lg);
  padding-left:24px;
  padding-right:24px;
}
.pchela-envios-protect svg{ flex-shrink:0; }
.pchela-envios-protect span{
  font-size:14px;
  line-height:1.5;
  color:#C9D2EA;
}
.pchela-envios-protect strong{
  color:#FFFFFF;
}
@media (max-width:600px){
  .pchela-envios-protect{ padding-left:18px; padding-right:18px; }
}

/* --- 14.5 PREGUNTAS FRECUENTES — acordeón NATIVO core/details/summary (sin
   JS propio). Se oculta el marcador nativo del navegador y se dibuja un
   chevron propio con un pseudo-elemento que rota en [open] — 100% CSS. --- */
.pchela-faq-list > *{
  margin-top:10px;
}
.pchela-faq-list > *:first-child{
  margin-top:0;
}
.pchela-faq-list .wp-block-details{
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:18px 22px;
}
/* Estado abierto = destacado (borde navy), igual que el mockup marca la
   1ª pregunta expandida — pero por ESTADO real (:is/[open]), no por
   contenido fijo, así que vale para cualquier pregunta que el usuario abra. */
.pchela-faq-list .wp-block-details[open]{
  border-color:var(--primary);
  border-width:1.5px;
}
.pchela-faq-list .wp-block-details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
}
.pchela-faq-list .wp-block-details[open] summary{
  color:var(--primary);
}
.pchela-faq-list .wp-block-details summary::-webkit-details-marker{
  display:none;
}
/* Chevron CSS puro (borde en L rotado 45°), sin SVG ni JS: apunta abajo
   cerrado, arriba abierto. */
.pchela-faq-list .wp-block-details summary::after{
  content:"";
  flex-shrink:0;
  width:8px;
  height:8px;
  border-right:2px solid var(--text-secondary);
  border-bottom:2px solid var(--text-secondary);
  transform:rotate(45deg);
  transition:transform 140ms ease, border-color 140ms ease;
}
.pchela-faq-list .wp-block-details[open] summary::after{
  border-color:var(--primary);
  transform:rotate(-135deg);
}
.pchela-faq-list .wp-block-details p{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--text-secondary);
}
.pchela-faq-list .wp-block-details p a{
  color:var(--accent);
  text-decoration:underline;
}
/* Caja final "¿No encontraste tu respuesta?" — cobalt-soft, no está en la
   paleta de Astra (mismo motivo que 9.1/14.3), por eso va por CSS. */
.pchela-faq-cta{
  margin-top:16px;
  background:var(--accent-soft);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pchela-faq-cta-title{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:var(--text-primary);
}
.pchela-faq-cta-text{
  margin:0;
  font-size:13px;
  color:var(--text-secondary);
}
.pchela-faq-cta-btns{
  margin-top:6px;
}
.pchela-faq-cta-btns .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:46px;
  padding:0 22px;
  border-radius:var(--radius-pill);
  font-size:13.5px;
  font-weight:700;
}
.pchela-faq-btn-whatsapp .wp-block-button__link{
  background:var(--whatsapp, #25D366);
  color:#FFFFFF;
}
.pchela-faq-btn-whatsapp .wp-block-button__link:hover{
  filter:brightness(0.95);
}
@media (max-width:600px){
  .pchela-faq-cta-btns{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .pchela-faq-cta-btns .wp-block-button{ width:100%; }
  .pchela-faq-cta-btns .wp-block-button__link{ width:100%; justify-content:center; }
}

/* ==========================================================================
   15) CONTACTO (Etapa 6 · Tanda 2) — mockup v2 "07 Institucionales.dc.html"
   (7h Contacto desktop / 7d Contacto mobile). Página /contacto/ (post 3237):
   cards de contacto directo (40%) + form de Fluent Forms (60%) en
   wp:columns NATIVO (stackeo mobile nativo del core, sin CSS propio para
   eso). El form en sí (id 3, "Contacto Pchelá") es 100% Fluent Forms —
   acá solo el look scoped a `.pchela-contacto-form-card .fluentform`
   (pill/focus cobalto, sección 10 del design system) y el layout Nombre+
   Email lado a lado vía `container_class` NATIVO de Fluent Forms
   (`pchela-ff-col`, seteado en el propio campo — no un selector nth-child
   frágil). Reusa iconos ya subidos (attachment 3259, WhatsApp verde de las
   Etapas 3/5) y los tokens del footer/PDP — 0 asset nuevo.
   ========================================================================== */

/* --- 15.1 Columnas: gap propio (el core no expone block-gap en este
   theme.json, mismo motivo documentado en 9.1/14.1). --- */
.pchela-contacto-columns{
  gap:24px;
}
@media (max-width:600px){
  .pchela-contacto-columns{ gap:16px; }
}

/* --- 15.2 Cards de contacto directo (WhatsApp/Email/Horario/Local):
   ícono a la izquierda + label/valor apilados a la derecha — layout propio
   (distinto del patrón top-row de 14.4, por eso una clase nueva en vez de
   reusar `.pchela-envios-card`). --- */
.pchela-contacto-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pchela-contacto-cards .pchela-contacto-card{
  margin:0; /* anula margin-block-start:24px del layout flow en hijos de grupo (gotcha ya documentado en 9.3/9.4/14.2) */
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:16px 18px;
}
.pchela-contacto-card-icon{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
}
.pchela-contacto-card-icon img{ display:block; width:22px; height:22px; }
.pchela-contacto-card-body{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.pchela-contacto-card-label{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:var(--text-primary);
}
.pchela-contacto-card-value{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-secondary);
}
.pchela-contacto-card-value--text{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.5;
}
.pchela-contacto-card-value a{
  color:inherit;
  text-decoration:none;
}
.pchela-contacto-card-value a:hover{
  color:var(--primary);
  text-decoration:underline;
}

/* --- 15.3 Card del formulario: contenedor blanco + título "Escribinos". --- */
.pchela-contacto-form-card{
  margin:0;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:24px;
}
.pchela-contacto-form-card > *{
  margin-top:12px;
}
.pchela-contacto-form-card > *:first-child{
  margin-top:0;
}
.pchela-contacto-form-title{
  margin:0;
  font-size:17px;
  font-weight:800;
  color:var(--text-primary);
}
@media (max-width:600px){
  .pchela-contacto-form-card{ padding:20px 18px; }
}

/* --- 15.4 Fluent Forms scoped a `.pchela-contacto-form-card .fluentform`
   — pill 48px, focus cobalto/navy, textarea r18, botón XL navy (sección 10
   del design system: alto 46/52px, bg #F4F6FC, borde 1.5px #E2E7F1, radius
   pill, focus borde navy). No toca el resto del sitio ni otros forms. --- */
.pchela-contacto-form-card .fluentform fieldset{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 12px;
}
.pchela-contacto-form-card .fluentform .ff-el-group{
  grid-column:1 / -1;
}
.pchela-contacto-form-card .fluentform .ff-el-group.pchela-ff-col{
  grid-column:span 1;
}
@media (max-width:600px){
  .pchela-contacto-form-card .fluentform fieldset{ grid-template-columns:1fr; }
}
.pchela-contacto-form-card .fluentform .ff-el-input--label label{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
}
.pchela-contacto-form-card .fluentform .ff-el-form-control{
  width:100%;
  height:48px;
  background:var(--background);
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  padding:0 18px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--text-primary);
  transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.pchela-contacto-form-card .fluentform textarea.ff-el-form-control{
  height:auto;
  min-height:130px;
  border-radius:var(--radius-lg);
  padding:14px 18px;
  resize:vertical;
}
/* Fluent Forms trae su propia `select.ff-el-form-control:not([size]):not([multiple]){height:var(--fluentform-input-select-height,auto)}`
   en `fluentform-public-default.css` (encolada DESPUÉS de este archivo) con
   especificidad (0,3,1) — empataba con mi regla general de arriba (0,3,0) y
   la ganaba por elemento+orden de carga, colapsando el <select> a ~16px
   (alto:auto + padding vertical 0). Fix: mismo selector pero con el
   ancestro real `.ff-el-input--content` (existe en el DOM del campo) para
   subir a (0,4,1), estrictamente más específico — sin `!important`. */
.pchela-contacto-form-card .fluentform .ff-el-input--content select.ff-el-form-control{
  height:48px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6480' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:13px;
  padding-right:42px;
  cursor:pointer;
}
.pchela-contacto-form-card .fluentform .ff-el-form-control:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.12);
  background:var(--surface);
}
.pchela-contacto-form-card .fluentform .ff_submit_btn_wrapper{
  margin-top:2px;
}
.pchela-contacto-form-card .fluentform button.ff-btn-submit{
  height:52px;
  padding:0 36px;
  border:none;
  border-radius:var(--radius-pill);
  /* Barrido visual tanda 2: era var(--primary) (navy) — el dueño pidió
     cobalto (acento de CTA de acción, mismo token que "Añadir al carrito"
     de WooCommerce, design system 10.4/13.4: accent #3D4FBF / accent-dark
     #2E3EA0 hover). */
  background:var(--accent);
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background 140ms ease;
}
.pchela-contacto-form-card .fluentform button.ff-btn-submit:hover{
  background:var(--accent-dark);
}
/* Fix de especificidad (verificación en vivo, barrido visual tanda 2):
   Fluent Forms inyecta un <style> inline propio (form settings del propio
   plugin, sin href — no un enqueue nuestro) con
   "form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style){background-color:
   #232E78}" — misma especificidad (0,3,1) que la regla de arriba, y le
   ganaba por venir después en el documento. Mismo criterio ya usado en todo
   el archivo (sumar 1 clase real del propio markup, acá `.ff_btn_style`,
   que Fluent Forms ya agrega al botón) para ganar sin !important. */
.pchela-contacto-form-card .fluentform button.ff-btn-submit.ff_btn_style{
  background:var(--accent);
}
.pchela-contacto-form-card .fluentform button.ff-btn-submit.ff_btn_style:hover{
  background:var(--accent-dark);
}
/* Mensajes de error/éxito nativos de Fluent Forms — colores del design
   system (10.4: error #D92D20, success #019C34) en vez del rojo/verde
   default del plugin. */
.pchela-contacto-form-card .fluentform .ff-el-is-error .ff-el-form-control{
  border-color:var(--error);
}
.pchela-contacto-form-card .fluentform .error.text-danger{
  color:var(--error);
  font-size:12.5px;
}
.pchela-contacto-form-card .fluentform .ff-message-success{
  border-radius:var(--radius-md);
  background:#E7F6EC;
  color:var(--success);
  border-color:var(--success);
}

/* ==========================================================================
   16) LEGALES (Etapa 7) — Política de privacidad, Cambios y devoluciones,
   Términos y condiciones. Las 3 son bloques core planos (paragraph/heading/
   list) sin el wrapper .pchela-inst-* de la sección 14, así que no heredan
   ese estilo institucional — página legal simple: contenedor angosto ~820px
   centrado (más legible que el --container:1180px default) + tipografía
   cómoda (line-height generoso, jerarquía clara en los H2 numerados).
   El H1 lo sigue dando el título nativo de Astra (no se desactiva
   site-post-title acá: el contenido no trae su propio H1, a diferencia de
   Marcas/Nosotros/Envíos/FAQ).
   ========================================================================== */
.entry-content > .wp-block-group.pchela-legal{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  padding-top:8px;
  padding-bottom:8px;
}
.pchela-legal p,
.pchela-legal li{
  font-size:16px;
  line-height:1.75;
  color:var(--text-primary);
}
.pchela-legal h2{
  margin-top:2em;
  margin-bottom:.6em;
  font-size:22px;
  line-height:1.3;
  color:var(--secondary);
}
.pchela-legal > *:first-child{ margin-top:0; }
.pchela-legal h2:first-of-type{ margin-top:1.4em; }
.pchela-legal ul,
.pchela-legal ol{
  padding-left:1.3em;
  margin-top:.4em;
  margin-bottom:1em;
}
.pchela-legal li + li{ margin-top:.4em; }
.pchela-legal p{ margin-top:0; margin-bottom:1em; }
.pchela-legal a{
  color:var(--accent);
  text-decoration:underline;
}
.pchela-legal a:hover{ color:var(--accent-dark); }
.pchela-legal em{
  color:var(--text-secondary);
  font-size:14px;
}
@media (max-width:600px){
  .pchela-legal p,
  .pchela-legal li{ font-size:15px; }
  .pchela-legal h2{ font-size:19px; margin-top:1.6em; }
}

/* ==========================================================================
   17) RONDA DE MEJORAS PDP (auditoría externa + pedido del dueño,
   2026-07-28) — mockup v2 "02 PDP.dc.html", artboard 2b para el punto 2.
   4 puntos, cada uno en su propia subsección. Contenido/hooks en
   functions.php (documentados ahí), JS del punto 2 en
   pchela-pdp-sticky-cta.js. Todo scoped a `.single-product` salvo donde se
   indica lo contrario.
   ========================================================================== */

/* -- 17.1 Formulario de reseñas colapsado (functions.php: comment_form_before/
   after envuelven el <div id="respond"> nativo de WordPress/WooCommerce en
   <details class="pchela-pdp-review-form">). Botón "Escribí tu opinión" =
   mismo lenguaje visual que el CTA de compra (pill cobalto); al abrirse,
   los campos (nombre/email/rating/reseña) heredan el pill de inputs global
   (style.css sección 3) — acá solo se ajustan tamaños/orden dentro de la
   tarjeta y se re-viste el botón "Enviar" (input#submit nativo, sin clase
   .button de Woo) a pill cobalto. -- */
.single-product details.pchela-pdp-review-form{
  margin:0 0 8px;
}
.single-product details.pchela-pdp-review-form summary.pchela-pdp-review-form-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:fit-content;
  height:46px;
  padding:0 22px;
  border-radius:var(--radius-pill);
  background-color:var(--accent);
  color:#fff;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background-color 140ms ease;
}
.single-product details.pchela-pdp-review-form summary.pchela-pdp-review-form-toggle::-webkit-details-marker{
  display:none;
}
.single-product details.pchela-pdp-review-form summary.pchela-pdp-review-form-toggle::marker{
  content:"";
}
.single-product details.pchela-pdp-review-form summary.pchela-pdp-review-form-toggle:hover{
  background-color:var(--accent-dark);
}
.single-product details.pchela-pdp-review-form summary.pchela-pdp-review-form-toggle::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
  margin-top:-4px;
  flex-shrink:0;
  transition:transform 140ms ease, margin-top 140ms ease;
}
.single-product details.pchela-pdp-review-form[open] summary.pchela-pdp-review-form-toggle::after{
  transform:rotate(-135deg);
  margin-top:2px;
}
.single-product details.pchela-pdp-review-form #respond{
  margin:16px 0 0;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background-color:var(--surface);
}
.single-product details.pchela-pdp-review-form #reply-title{
  display:block;
  font-family:var(--font-body);
  font-size:17px;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 16px;
}
.single-product details.pchela-pdp-review-form .comment-form-rating{
  margin:0 0 14px;
}
.single-product details.pchela-pdp-review-form label{
  display:block;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 6px;
}
.single-product details.pchela-pdp-review-form p{
  margin:0 0 14px;
}
.single-product details.pchela-pdp-review-form input[type="text"],
.single-product details.pchela-pdp-review-form input[type="email"],
.single-product details.pchela-pdp-review-form select{
  box-sizing:border-box;
  width:100%;
  max-width:360px;
  height:46px;
  padding:0 18px;
  font-family:var(--font-body);
  font-size:14.5px;
}
.single-product details.pchela-pdp-review-form textarea{
  box-sizing:border-box;
  width:100%;
  min-height:120px;
  padding:14px 18px;
  font-family:var(--font-body);
  font-size:14.5px;
}
/* #respond agregado al selector (además de #submit): la CSS dinámica del
   Customizer de Astra trae ".woocommerce #respond input#submit" (2
   selectores de ID: #respond + #submit) para el botón nativo, que le ganaba
   por especificidad a esta regla aunque tuviera más clases (los IDs se
   comparan ANTES que las clases) — verificado en vivo (backgroundColor
   quedaba en el navy de Astra, no en el cobalto). Con #respond sumado acá
   se empata en cantidad de IDs (2 y 2) y esta regla gana por tener más
   clases. */
.single-product details.pchela-pdp-review-form #respond input#submit{
  height:48px;
  padding:0 26px;
  border:none;
  border-radius:var(--radius-pill);
  background-color:var(--accent);
  color:#fff;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}
.single-product details.pchela-pdp-review-form #respond input#submit:hover{
  background-color:var(--accent-dark);
}

/* -- 17.2 CTA sticky mobile (mockup 2b): barra fija inferior, precio mono
   navy + botón pill cobalto. Oculta por completo en desktop/tablet (solo
   ≤600) — en desktop no se renderiza (display:none), así que no hay overlap
   ni z-index que resolver ahí. Markup/estado en functions.php + JS en
   pchela-pdp-sticky-cta.js (documentado ahí: IntersectionObserver +
   eventos nativos de variantes). z-index 95: encima del WhatsApp flotante
   (90, sección 8), debajo del header sticky (99, sección 1) — nunca se
   solapan (una está arriba, la otra abajo) pero se deja el mismo criterio
   de capas del resto del sitio. -- */
.pchela-pdp-sticky-cta{
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:95;
  align-items:center;
  gap:12px;
  background-color:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(0,48,135,.10);
  padding:10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%);
  transition:transform 200ms ease;
}
@media (max-width:600px){
  .single-product .pchela-pdp-sticky-cta{
    display:flex;
  }
}
.pchela-pdp-sticky-cta.is-visible{
  transform:translateY(0);
}
.pchela-pdp-sticky-cta-info{
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  min-width:0;
  max-width:42%;
}
.pchela-pdp-sticky-cta-variant{
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:600;
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pchela-pdp-sticky-cta-price{
  font-family:var(--font-mono);
  font-size:17px;
  font-weight:600;
  color:var(--primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* El mockup 2b muestra un solo valor de precio en la barra (sin tachado) —
   con espacio tan acotado, mostrar precio tachado + precio final juntos
   truncaba el precio real con ellipsis (verificado en vivo en un producto
   en oferta). Se oculta el <del> acá SOLO en la barra sticky — el precio
   con tachado sigue intacto en el buy box principal (sección 11.4), esto
   no lo toca. */
.pchela-pdp-sticky-cta-price del,
.pchela-pdp-sticky-cta-price .screen-reader-text{
  display:none;
}
.pchela-pdp-sticky-cta-price ins{
  text-decoration:none;
}
.pchela-pdp-sticky-cta-btn{
  flex:1;
  height:50px;
  min-width:0;
  border:none;
  border-radius:var(--radius-pill);
  background-color:var(--accent);
  color:#fff;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-cta);
}
.pchela-pdp-sticky-cta-btn:hover{
  background-color:var(--accent-dark);
}
.pchela-pdp-sticky-cta-btn.is-needs-variation{
  background-color:var(--background-alt);
  color:var(--text-secondary);
  box-shadow:none;
}

/* -- 17.3 Compactar la parte alta de la PDP en mobile (breadcrumb + título)
   — punto 3. Selector de más clases que el de la sección 10.1 (a propósito:
   ver el hallazgo documentado en functions.php sobre
   ".woocommerce-js .woocommerce-breadcrumb" del propio WooCommerce
   ganándole a la regla global de 10.1) — scoped a la PDP para no cambiar
   tienda/categoría, fuera de este pedido. -- */
@media (max-width:600px){
  .single-product .summary.entry-summary > .woocommerce-breadcrumb{
    font-size:11.5px;
    margin:0 0 4px;
  }
  .single-product .pchela-pdp-toprow{
    margin-bottom:4px;
  }
  .single-product h1.product_title.entry-title{
    margin-bottom:5px;
  }
  .single-product .pchela-pdp-noreviews{
    margin-bottom:8px;
  }
}

/* -- 17.4 Microcopia de confianza — fila nueva ".pchela-pdp-trust-returns"
   dentro de la MISMA tarjeta ".pchela-pdp-trust" (sección 11.7), impresa por
   functions.php entre "100% original" y los chips de pago. Reusa el patrón
   de fila (icono+texto) de esa sección; solo se agrega el estilo del link. -- */
.single-product .pchela-pdp-trust-returns span{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-primary);
  align-self:center;
  line-height:1.4;
}
.single-product .pchela-pdp-trust-returns a{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
}
.single-product .pchela-pdp-trust-returns a:hover{
  color:var(--accent-dark);
}

/* ==========================================================================
   18) COMPRÁ POR ESPECIALIDAD (pedido del dueño, 2026-07-28; ampliado a 8
   por la decisión "híbrido 8" tras el feedback de la administradora, mismo
   día) — reemplaza la sección "Comprá por categoría" (9.4) de la home por
   8 cards de rubro: Manicura / Pedicura / Podología / Nail art / Cejas y
   pestañas / Maquillaje / Bioseguridad / Uso doméstico. Base: mockup v2
   "05 Home.dc.html" sección "3-bis · OPCIÓN B: Comprá por rubro" (card r18
   con FOTO grande de fondo, nombre 800 + flecha, hover translateY),
   ampliada a 8 con una frase corta descriptiva por card (pedido de la
   administradora, sin diseño propio en el mockup). Cosmetología quedó
   AFUERA de la versión final (estaba en el borrador de 6, la reemplazan
   Nail art/Maquillaje/Bioseguridad) — no se publicó landing para ese rubro.
   La 9.4 vieja (.pchela-home-cats-grid/.pchela-home-cat-card) NO se borra:
   la reusan las 3 landings nuevas de esta ronda (18.3) para sus grids de
   categorías del catálogo.
   18.1 grid+card de especialidad (home) · 18.2 header/nota/buscador de las
   landings · 18.3 reuso documentado de 9.4/9.6 en las landings.
   ========================================================================== */

/* --- 18.1 Grid de especialidades: 4 col × 2 filas desktop / 2 col × 4
   filas tablet (900) / slider scroll-snap mobile (600) — mismo patrón que
   9.4, adaptado a 8 cards (decisión "híbrido 8" del dueño sobre el
   feedback de la administradora, reemplaza el borrador inicial de 6). Card
   SIN borde (a diferencia de 9.4): foto de fondo a sangre + degradado navy
   inferior (scrim) para legibilidad del texto blanco, en vez de foto
   arriba + texto abajo sobre fondo blanco de la card de categoría. Cada
   card lleva nombre (800, con flecha) + frase corta descriptiva (pedido de
   la administradora) apiladas en un bloque de texto absoluto. --- */
.pchela-home-specialty-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
@media (max-width:900px){
  .pchela-home-specialty-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }
}
@media (max-width:600px){
  .pchela-home-specialty-grid{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:2px 16px 10px 2px;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
    -webkit-overflow-scrolling:touch;
  }
  .pchela-home-specialty-grid::-webkit-scrollbar{ height:6px; }
  .pchela-home-specialty-grid::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:var(--radius-pill);
  }
  .pchela-home-specialty-grid::-webkit-scrollbar-track{ background:transparent; }
  .pchela-home-specialty-grid .pchela-home-specialty-card{
    flex:0 0 auto;
    width:230px;
    scroll-snap-align:start;
  }
}
/* Selectores a 3 clases donde hace falta ganarle a Astra, mismo criterio
   documentado en 9.4 (imagen/link de contenido a (0,2,1)). */
/* 2026-07-28 (pedido del dueño): cards cuadradas 1:1 en los 3 rangos (grid
   desktop 4×2, grid tablet 2×4, slider mobile) — `aspect-ratio` en vez de
   una altura fija, así el alto siempre sigue al ancho real (columna de
   grid o `width` del slider) sin tener que declarar tres alturas distintas
   a mano. Las fotos son 4:3 (1024×765) recortadas con `object-fit:cover`:
   contra un frame cuadrado el recorte cae SIEMPRE del lado horizontal
   (ancho escalado > frame, alto escalado = frame exacto — con imgW>imgH la
   cuenta de "cover" da scale=frame/imgH, así el alto nunca se recorta) →
   el degradado oscuro de abajo de cada foto queda 100% visible en el
   cuadrado igual que antes, sin tocar el scrim ni el object-position. */
.pchela-home-specialty-grid .pchela-home-specialty-card{
  position:relative;
  display:block;
  margin:0;
  aspect-ratio:1 / 1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:box-shadow 140ms ease, transform 140ms ease;
}
.pchela-home-specialty-grid .pchela-home-specialty-card:hover{
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}
/* Scrim: degradado navy de abajo hacia arriba, pseudo-elemento por encima
   de la foto y por debajo del texto (z-index). Sube el stop de 40% a 34%
   para dar más aire de contraste a la 2ª línea (frase corta). */
.pchela-home-specialty-grid .pchela-home-specialty-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,35,71,0) 34%, rgba(26,35,71,.85) 100%);
  pointer-events:none;
  z-index:1;
}
/* 2026-07-28: imágenes abstractas del dueño (Nano Banana) en vez de las fotos
   de producto provisorias. Dos de las ocho (Manicura, Cejas y pestañas) ya
   traen la parte inferior bastante oscura de por sí — el scrim de arriba
   (.85 al pie) sumado a eso empastaba la textura en casi negro. Estas dos
   cards reciben un scrim más suave (el fondo YA es oscuro ahí, así que
   alcanza con menos overlay para el mismo contraste de texto); las otras 6
   (fondos claros: Podología/Bioseguridad/Pedicura, o medios: Nail
   art/Maquillaje/Uso doméstico) se quedan con el scrim de siempre porque SÍ
   lo necesitan para que el texto blanco se lea. */
.pchela-home-specialty-grid .pchela-home-specialty-card.pchela-home-specialty-card--soft-scrim::after{
  background:linear-gradient(180deg, rgba(26,35,71,0) 40%, rgba(26,35,71,.6) 100%);
}
.pchela-home-specialty-grid .pchela-home-specialty-card .pchela-home-specialty-img{
  position:absolute;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
}
.pchela-home-specialty-grid .pchela-home-specialty-card .pchela-home-specialty-img a{
  display:block;
  width:100%;
  height:100%;
}
.pchela-home-specialty-grid .pchela-home-specialty-card .pchela-home-specialty-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0;
}
/* Bloque de texto (nombre + frase corta) — flex column, gap propio; se
   anula el margin-block-start:24px que el layout "flow" de WP mete entre
   hijos (mismo gotcha de 9.1/9.4) para que el gap del flex mande solo. */
.pchela-home-specialty-grid .pchela-home-specialty-text{
  position:absolute;
  left:16px;
  right:16px;
  bottom:13px;
  z-index:2;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.pchela-home-specialty-grid .pchela-home-specialty-text > *{
  margin:0;
}
.pchela-home-specialty-grid .pchela-home-specialty-name{
  font-size:16px;
  line-height:1.2;
}
.pchela-home-specialty-grid .pchela-home-specialty-card .pchela-home-specialty-name a{
  color:#FFFFFF;
  font-weight:800;
  text-decoration:none;
}
.pchela-home-specialty-grid .pchela-home-specialty-card .pchela-home-specialty-name a:hover{
  text-decoration:underline;
}
.pchela-home-specialty-grid .pchela-home-specialty-tag{
  font-size:11.5px;
  line-height:1.3;
  font-weight:500;
  color:#C9D2EA; /* tono fijo de texto secundario sobre fondo oscuro, mismo
                     token que footer/bandas navy (_pchela_src_v2 CLAUDE.md) */
}
@media (max-width:600px){
  .pchela-home-specialty-grid .pchela-home-specialty-name{ font-size:15px; }
  .pchela-home-specialty-grid .pchela-home-specialty-tag{ font-size:11px; }
}

/* --- 18.2 Landings de especialidad (/manicura/, /pedicura/,
   /uso-domestico/ — SOLO estas 3, "híbrido 8": Podología/Nail
   art/Cejas y pestañas/Maquillaje/Bioseguridad van directo a categorías
   reales del catálogo, sin landing propia) — reusan 100% el patrón
   institucional de la sección 14 (.pchela-inst-header/.pchela-inst-section)
   y el grid de categorías de 9.4 (.pchela-home-cats-grid/.pchela-home-cat-
   card) para la grilla de categorías del catálogo de cada rubro, más el
   estilo de card de producto de 9.6 (.pchela-home-product-grid) en el
   bloque nativo woocommerce/product-category. Acá solo lo nuevo: nota de
   cruce a otro destino (Pedicura → Podología) y el buscador corto de la
   landing de Uso doméstico (sin filtro de categoría limpio, ver
   build-log). --- */
.pchela-inst-section .pchela-landing-note{
  margin:0;
  font-size:13.5px;
  color:var(--text-secondary);
}
.pchela-inst-section .pchela-landing-note a{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
}
.pchela-inst-section .pchela-landing-note a:hover{
  color:var(--accent-dark);
}
.pchela-landing-search .pchela-buscador-form{
  max-width:520px;
  height:52px;
  padding:0 8px 0 18px;
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow-1);
}
.pchela-landing-search .pchela-buscador-form:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(35,46,120,.14);
}
.pchela-landing-search .pchela-buscador .pchela-buscador-input[type="search"]{
  font-size:14.5px;
}
.pchela-landing-search .pchela-buscador-submit{
  flex-shrink:0;
  height:38px;
  padding:0 20px;
  margin-left:4px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--primary);
  color:#FFFFFF;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:background 140ms ease;
}
.pchela-landing-search .pchela-buscador-submit:hover{
  background:var(--primary-dark);
}

/* ==========================================================================
   19) PÁGINA 404 (Etapa 8) — mockup v2 "06 Cuenta + Sistema.dc.html",
   artboards 6e (mobile) / 6k (desktop). Template propio en el child
   (wp-content/themes/astra-child/404.php, sustituye
   astra_404_content_template() del padre) porque el mockup pide un layout
   centrado con buscador + categorías sin equivalente en los controles
   nativos del 404 de Astra. El buscador reusa
   [pchela_buscador boton="1"] con la clase .pchela-landing-search que ya
   existe (sección 18, mismo tratamiento visual que las landings de
   especialidad) — cero CSS nuevo para el buscador. Categorías: reales del
   catálogo (get_terms en el template, no hardcodeadas). Centrado 640px,
   mismo breakpoint mobile 600px del resto del sitio.
   ========================================================================== */
.pchela-404{
  max-width:640px;
  margin:0 auto;
  padding:72px 24px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.pchela-404-code{
  font-family:var(--font-mono);
  font-size:56px;
  font-weight:600;
  color:var(--accent);
  line-height:1;
}
.pchela-404-title{
  margin:0;
  font-size:26px;
  font-weight:800;
  color:var(--text-primary);
}
.pchela-404-text{
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:var(--text-secondary);
  max-width:480px;
}
.pchela-404-search{
  width:100%;
  display:flex;
  justify-content:center;
}
.pchela-404-cats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  max-width:560px;
}
.pchela-404-chip{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-primary);
  background:var(--surface);
  text-decoration:none;
  transition:border-color 140ms ease, color 140ms ease;
}
.pchela-404-chip:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.pchela-404-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 32px;
  border-radius:var(--radius-pill);
  background:var(--primary);
  color:#FFFFFF;
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  transition:background 140ms ease;
}
.pchela-404-cta:hover{
  background:var(--primary-dark);
  color:#FFFFFF;
}
@media (max-width:600px){
  .pchela-404{ padding:40px 20px 32px; gap:14px; }
  .pchela-404-code{ font-size:44px; }
  .pchela-404-title{ font-size:20px; }
  .pchela-404-text{ font-size:13.5px; }
  .pchela-404-cta{ align-self:stretch; width:100%; height:48px; font-size:14px; }
}