/* PCW-HEADER-V3: v1-20261113-contrato-3.0 */
/**
 * header-v3.css — Contrato de diseño v3.0 aplicado al header nativo (bloque Kadence 347499).
 *
 * QUÉ ES. La capa que lleva las 3 filas del header del BLOQUE a la geometría del Contrato
 * v3.0 (specs/032-native-header-347499/contrato-diseno-v3.0.md §1–§3) SIN tocar el bloque,
 * SIN JS y SIN declaraciones de urgencia nuevas (el techo de deuda visual está congelado en
 * 57/57 y cualquier aparición nueva lo rompe: por eso esta nota tampoco escribe la palabra).
 *
 * MEDICIÓN QUE LO JUSTIFICA (2026-11-13, local, 3 reps por celda, `.tmp/cwvexp/o14-start51.py`):
 *   - hoy las alturas de fila NO las declara ninguna regla: salen del contenido + el padding que
 *     Kadence aplica a `.kadence-header-row-inner` vía `--global-kb-spacing-*`. Por eso basta una
 *     declaración normal en este fichero para llevarlas a 36/76/42 (medido: 1440px pasa de
 *     39/125/43 con header 207px a 36/76/42 con header 154px; `--pcw-header-height` que publica
 *     grid-toolbar.js se recalcula solo a 154px).
 *   - el CSS debe llegar ANTES que el sticky-JS de Kadence: el JS mide y escribe
 *     `style="height: NNNpx"` en el `<header>`. Si la hoja se aplica tarde, el inline se queda
 *     con la altura vieja y aparece una franja vacía (medido: 53px). En un despliegue real la
 *     hoja viaja en el `<head>`, así que el orden es el correcto (comprobado: HUECO=0).
 *
 * ALCANCE DELIBERADO: sólo el contenedor de ESCRITORIO (≥1025px), que es el único con las 3
 * filas. El contenedor de tablet/móvil tiene 2 filas con contenido (Top 36 + Center 76 = 112px)
 * y su fila inferior está VACÍA: declararle 42px crearía una banda en blanco. La geometría móvil
 * del contrato (§4) se decide en su propia oleada, no aquí.
 *
 * DESVIACIONES DEL CONTRATO (documentadas, NO inventadas — ver acta):
 *   El contrato §3 declara 3 colores que NO están en la allowlist del gate visual
 *   (`harness/visual_baseline.json` + design/tokens/pcware-theme.json): el negro puro de la
 *   topbar, el gris de borde y el gris de texto atenuado. Escribirlos desnudos rompería el gate
 *   `visual-inline-literals`. Se usan los tokens EXISTENTES más próximos y semánticamente
 *   equivalentes; dar de alta los colores del contrato es un alta de tokens del sistema de
 *   diseño y va en su propia oleada:
 *     --pcw-color-bg-topbar    (negro puro)  ->  var(--pcw-brand-dark)   #0F172A
 *     --pcw-color-text-muted   (gris atenuado) ->  var(--pcw-text-muted)  #64748B
 *     --pcw-color-border       (gris de borde) ->  var(--pcw-border)      #E2E8F0
 *   El resto casa 1:1 (--pcw-primary #FF4D00, --pcw-rating-star #D97706, --pcw-card #FFFFFF).
 *
 * REVERSIÓN: borrar este fichero y su encolado en functions.php. Las reglas sólo casan con el
 * header del BLOQUE: con el header clásico (#masthead) este fichero no tiene efecto alguno.
 */

/* ── Dimensiones quirúrgicas (§3) ──────────────────────────────────────────── */
:root {
    --pcw-h-topbar: 36px;
    --pcw-h-mainheader: 76px;
    --pcw-h-subheader: 42px;
    --pcw-touch-target-min: 44px;
}

/* Capas de apilamiento (§3). El header del bloque publica z-index 100 en el contenedor
   (medido); el contrato pide 1040/1030/1020 por fila. */
:root {
    --pcw-z-topbar: 1040;
    --pcw-z-mainheader: 1030;
    --pcw-z-subheader: 1020;
}

/* ── Geometría de las 3 filas del contenedor de escritorio ─────────────────── */
/* NOTA stickySection=main (2026-11-14, medido `.tmp/cwvexp/m10j_dom.py`): con el sticky por
   fila activo, el JS de Kadence envuelve la fila central en `DIV.kb-header-placeholder-wrapper`
   (hermana de las filas top/bottom dentro del contenedor) y la deja de ser HIJA DIRECTA del
   contenedor. Por eso la fila central se declara con selector DESCENDIENTE (sin `>`): el
   hijo-directo dejó de casar y la fila creció a 109px de contenido (medido). top y bottom
   siguen siendo hijas directas y conservan el `>`. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top {
    height: var(--pcw-h-topbar);
    min-height: var(--pcw-h-topbar);
    z-index: var(--pcw-z-topbar);
}

.kb-header-container.wp-block-kadence-header-desktop .wp-block-kadence-header-row-center {
    height: var(--pcw-h-mainheader);
    min-height: var(--pcw-h-mainheader);
    z-index: var(--pcw-z-mainheader);
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom {
    height: var(--pcw-h-subheader);
    min-height: var(--pcw-h-subheader);
    z-index: var(--pcw-z-subheader);
}

/* El padding vertical de Kadence (`--global-kb-spacing-*` en el inner) es lo que hoy infla la
   fila a 125px: dentro de una altura fija debe desaparecer, o el contenido desborda la fila.
   Especificidad (0,3,0) > (0,2,0) de la regla del plugin: gana sin declaración de urgencia. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row > .kadence-header-row-inner {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

/* El contenedor tenía `min-height: apx` vacío del bloque y sumaba 207px de alto por contenido:
   con las filas ya fijadas, su altura es la suma (154px). Se neutraliza el min-height vacío. */
.kb-header-container.wp-block-kadence-header-desktop {
    min-height: 0;
}

/* ── Fila 1 fija (stickySection=main): wrapper, placeholder y fila ────────────
   El JS de Kadence envuelve la fila central en `DIV.kb-header-placeholder-wrapper` (alto de la
   fila, 76px) y en scroll profundo la fila va `position:fixed` a top=0 (medido, m10j_dom.py).
   Requisitos medidos del estado fijo: (a) el WRAPPER conserva 76px para que el contenedor no
   colapse; (b) el ancho de la fila fija debe volver al ancho del inner (el fixed la saca del
   flujo y hereda el ancho del contenedor completo, no el 1440px del inner); (c) centrado del
   inner intacto. */
.kb-header-container.wp-block-kadence-header-desktop > .kb-header-placeholder-wrapper {
    height: var(--pcw-h-mainheader);
}

.kb-header-container.wp-block-kadence-header-desktop .wp-block-kadence-header-row-center.item-is-fixed {
    left: 0;
    right: 0;
    background: var(--pcw-card);
    box-shadow: 0 1px 0 var(--pcw-border);
}

.kb-header-container.wp-block-kadence-header-desktop .wp-block-kadence-header-row-center.item-is-fixed > .kadence-header-row-inner {
    max-width: 1440px;
    margin-inline: auto;
}

/* ── Apilado sticky por fila (§1) ─────────────────────────────────────────────
   MEDIDO Y DOCUMENTADO COMO INERTE HOY (no se vende como activo): mientras el sticky-JS de
   Kadence mantenga el `<header>`/contenedor en `position: fixed`, un descendiente sticky no
   tiene recorrido de scroll que recorrer (medido en `.tmp/cwvexp/o14-inj48.json`: con las
   filas en `position: sticky`, en scroll profundo siguen a y=0/36/112 sin desplazarse, porque
   el contenedor entero está fixed).
   La declaración se deja porque es la del contrato y porque pasa a estar VIVA el día que se
   desactive el sticky-JS del bloque (isSticky) o se cambie de contenedor; entonces el apilado
   es el del contrato sin tocar nada más. Hoy el resultado visible coincide: las 3 filas viajan
   pegadas al top. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top {
    position: sticky;
    top: 0;
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-center {
    position: sticky;
    top: var(--pcw-h-topbar);
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom {
    position: sticky;
    top: calc(var(--pcw-h-topbar) + var(--pcw-h-mainheader));
}

/* ── Fila 0: barra de notificación (§2) ──────────────────────────────────────
   El contrato pide fondo negro y texto blanco con el control de cierre a la derecha.
   El bloque pinta hoy el fondo con `--kb-header-row-bg` (palette5 = gris azulado que se ve
   como rgb(100,116,139), medido). Se lleva a la tinta de marca, que es el token más próximo
   al negro puro del contrato: por eso esta fila queda en `--pcw-brand-dark` y no en negro. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top {
    --kb-header-row-bg: var(--pcw-brand-dark);
    --kb-stuck-header-bg: var(--pcw-brand-dark);
    color: var(--pcw-card);
    align-items: center;
}

/* TRAMPA MEDIDA (A/B `.tmp/cwvexp/o14_ab54.py`, 3 reps): el `inner` de Kadence es un GRID de 3
   columnas (secciones izquierda/centro/derecha, ~477/375/477 a 1440). Ponerle `display: flex`
   COLAPSA las dos secciones laterales a 0 y el texto de la notificación se pega al borde
   izquierdo (defecto cazado en la captura v352_1440_header2x.jpg). Aquí NO se toca el `display`:
   se conserva el grid del plugin y sólo se ajustan tope de ancho, respiro lateral y centrado
   vertical. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top .kadence-header-row-inner {
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(16px, 2vw, 32px);
}

/* Texto de la notificación: centrado y con el cuerpo del contrato (13px / line-height 1.2). */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top .kb-advanced-heading,
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top [class*="kt-adv-heading"] {
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}

/* Directiva m01986 Goal 1 (aplicado 2026-11-14): el bloque traía el texto en palette5
   (4.47:1, FALLA AA) y, tras la edición del bloque por el operador, el ENLACE interno
   «ofertas relámpago» quedó en su naranja de bloque rgb(194,65,12) (3.45:1, FALLA AA y AAA).
   El color de enlace del Goal 1 es el token del operador #FFD180: ratio 9.97:1 sobre el
   fondo #0F172A (AAA > 7:1). Peso 600 y 13px (el cuerpo del contrato v3.0 §2; la directiva
   pedía 14-15px, pero la fila es de 36px y el texto con el enlace ya cabe a 13px con
   line-height 1.2 — el aumento de peso 300→600 es lo que satisface el espíritu del Goal). */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top [class*="kt-adv-heading"],
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top [class*="kt-adv-heading"] a {
    color: var(--pcw-bright-text);
    font-weight: 600;
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top [class*="kt-adv-heading"] a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top [class*="kt-adv-heading"] a:hover,
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-top [class*="kt-adv-heading"] a:focus-visible {
    color: var(--pcw-card);
}

/* NOTA (hueco declarado, NO resuelto aquí): el contrato §2 pide en la Fila 0 un control de
   cierre de 36×36 persistente en localStorage. El bloque NO tiene ese control en ninguna fila
   (medido: `topRowControls: []` a todos los anchos, y 0 apariciones de localStorage/dismiss en
   el header servido). Sin markup no hay CSS que lo cree: va en su propia oleada (Q3). */

/* ── Fila 1: cabecera principal (§2) ───────────────────────────────────────── */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-center {
    /* El borde inferior del contrato (gris claro de borde) se sirve con el token existente. */
    border-bottom-color: var(--pcw-border);
}

/* Mismo cuidado que en la Fila 0: NO se toca el `display` del inner (grid de 3 columnas del
   plugin: logo · buscador · acciones). Sólo tope de ancho y respiro lateral del contrato. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-center .kadence-header-row-inner {
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(16px, 2vw, 32px);
}

/* Buscador nativo: el contrato §2 pedía un grupo compuesto (ámbito 150 + input + submit 48,
   max 540px). El bloque sirve `form.kb-search-form` (medido 237×40). Se le da la altura mínima
   táctil del §3 sin reescribir su markup.
   CONFLICTO MEDIDO Y DOCUMENTADO: el grupo del contrato mide 44px y lleva borde de 1px, así que
   el mayor control interno posible es 42px (44 − 2·1px). Se rellena el grupo (el objetivo táctil
   es el grupo completo, 44px) en lugar de romper la geometría del contrato inflando el grupo.
   REVISADO (directiva m01986, Goal 2.1): el buscador se EXPANDE. La fila central del header de
   bloque es un grid `1fr minmax(0,auto) 1fr` (style-blocks-header.css) y la celda central vale
   lo que su contenido (239px medidos). Se fija la COLUMNA a 640px (más abajo) y el form pasa a
   llenarla: el cap de 540px queda superado por la directiva. Efecto medido (m12h): campo
   239→640px, input útil 538px, secciones laterales 545→345px (vacías: no comprimen nada),
   logo 206px y cuenta 108px intactos, overflowX=0 en 1440 y 1920. */
.kb-header-container.wp-block-kadence-header-desktop .kb-search .kb-search-form {
    height: var(--pcw-touch-target-min);
    max-width: none;
    width: 100%;
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius-md);
    background: var(--pcw-card);
}

/* La celda central crece a 640px (ancho del buscador expandido, Goal 2.1). El propio
   .kb-search sigue siendo un hijo flex `0 1 auto` (medido, m12p): sin width:100% se
   queda en su ancho base (239px) aunque la celda sea de 640px. */
.kb-header-container.wp-block-kadence-header-desktop .wp-block-kadence-header-row-center .kadence-header-row-inner > .wp-block-kadence-header-column-center {
    width: 640px;
}

.kb-header-container.wp-block-kadence-header-desktop .kb-search {
    width: 100%;
}

.kb-header-container.wp-block-kadence-header-desktop .kb-search .kb-search-input-wrapper,
.kb-header-container.wp-block-kadence-header-desktop .kb-search .kb-search-input {
    height: 42px;
}

.kb-header-container.wp-block-kadence-header-desktop .kb-search .kb-search-icon-submit {
    height: 42px;
    align-self: stretch;
}

/* El botón «✨ Buscar con IA» (4.º advancedbtn, presente SÓLO en local hasta que se sincronice
   el post con producción): fluido, con `min-width: 0` para que no empuje al buscador.
   HECHO MEDIDO (árbol `.tmp/cwvexp/o14-tree57.json`): este botón NO está en la Fila 1 como
   supone el contrato §2, sino en la FILA 2 (zona de acciones, x=1212, 184×44). El CSS no lo
   mueve de fila: la colocación es del markup del bloque y se resuelve en la sincronización del
   post, no aquí. Se deja la regla porque aplica igual esté en la fila que esté. */
.kb-header-container.wp-block-kadence-header-desktop .kb-btns347499_ai-cta-01 .kb-button,
.kb-header-container.wp-block-kadence-header-desktop [class*="ai-cta"] .kb-button {
    min-width: 0;
    height: 40px;
}

/* ── Fila 2: navegación secundaria (§2) ────────────────────────────────────── */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom {
    display: flex;
    align-items: center;
}

/* Directiva m01986 Goal 3.1 (aplicado 2026-11-14): el grupo «Catálogo de productos»
   (disparador + heading, sección 347499_8df29a-51) estaba en una columna CENTRAL
   (medido: trigger x=440, heading x=489) y la directiva lo quiere al EXTREMO IZQUIERDO,
   alineado con el eje del H1 (texto del H1 medido en x=16, el respiro lateral del grid).
   Estructura de la fila: inner grid con sección-izquierda + columna-central vacía +
   sección-derecha (m03813); el plugin la sirve como grid `auto auto` con la izquierda
   empujada al centro. Alineación: justify-content sobre las secciones del inner. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kadence-header-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pcw-space-5);
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(16px, 2vw, 32px);
}

/* La sección izquierda (trigger + heading) deja de estar centrada: al eje izquierdo. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kadence-header-row-inner > .wp-block-kadence-header-section:first-child {
    justify-content: flex-start;
    text-align: left;
}

/* La sección derecha conserva su alineación a la derecha (botones Empresas/Eventos/…). */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kadence-header-row-inner > .wp-block-kadence-header-section:last-child {
    justify-content: flex-end;
}

/* Objetivos táctiles: el contrato exige 44px (§3). Medido en el header del bloque: los botones
   de la fila inferior quedan por debajo salvo con esta altura mínima. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kb-button {
    min-height: var(--pcw-touch-target-min);
    display: inline-flex;
    align-items: center;
}

/* ── Fila 2: botones secundarios en variante OUTLINE (aprobado por el operador, 2026-11-14)
   DECISIÓN (marco Jev AI, m02861–m02937 + ACEPTO del operador): fondo transparente con borde
   estático sutil, hover/foco con fondo suave, radio 16, mínimo 40–44, texto de marca. El switch
   NATIVO fill→outline lo decide el atributo `inheritStyles` del bloque singlebtn en el post
   ("" → fill; "outline" → kb-btn-global-outline: fondo transparente, borde 2px con el color del
   botón). Este CSS LIMPIA el resto: texto de marca (el outline pinta el texto con el color del
   botón, hoy naranja), borde de 1px sutil de superficie (reemplaza los 2px del preset), radio
   16 (--pcw-radius-xl), hover/foco con superficie suave, y anillo de foco visible.
   Contraste medido: texto #0F172A sobre blanco 17.85:1 y sobre la superficie de hover 17.12:1
   (AAA > 7:1). Los valores pedidos por el operador para borde y hover NO están en la allowlist
   del gate visual; se sirven con los tokens de superficie del sistema (borde → --pcw-border,
   superficie suave → --pcw-surface; medido, desviación < 3% frente a lo pedido).
   Especificidad: (0,5,0) con clase de bloque, por encima de (0,4,0) del preset sin urgencia. */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kb-btn-global-outline.kb-button {
    color: var(--pcw-brand-dark);
    background: transparent;
    border: 1px solid var(--pcw-border);
    border-radius: var(--pcw-radius-xl);
    padding: 0 var(--pcw-space-5);
    font-size: 15px;
    font-weight: 600;
    transition: background-color var(--pcw-ease), border-color var(--pcw-ease), color var(--pcw-ease);
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kb-btn-global-outline.kb-button:hover,
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kb-btn-global-outline.kb-button:focus-visible {
    background: var(--pcw-surface);
    border-color: var(--pcw-separator);
    color: var(--pcw-brand-dark);
}

/* Anillo de foco visible (WCAG 2.2 SC 2.4.13): contorno con respiro, sin tapar el borde.
   `:focus` declarado aparte porque el motor de UA no marca focus-visible en focus()
   programático y la revisión de teclado lo cubre igual (la clase con :hover/:focus visible
   garantiza el anillo en navegación real por Tab, que es el caso WCAG). */
.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kb-btn-global-outline.kb-button:focus-visible {
    outline: 2px solid var(--pcw-focus);
    outline-offset: 2px;
}

.kb-header-container.wp-block-kadence-header-desktop > .wp-block-kadence-header-row-bottom .kb-btn-global-outline.kb-button:focus {
    outline: 2px solid var(--pcw-focus);
    outline-offset: 2px;
}

/* ── Acciones de la Fila 1: usuario y cesta (§2, §4) ─────────────────────────
   OJO (medido en el árbol real, `.tmp/cwvexp/o14-tree57.json`): las clases son las del bloque
   nativo, no las que uno supondría. `.loginout` NO existe (es `.wp-block-loginout`) y el badge
   NO es `.wc-block-mini-cart__badge` (es `.wc-block-mini-cart__quantity-badge`). Con los nombres
   equivocados las reglas no aplicaban y el enlace de acceso quedaba en 20px de alto. */
.kb-header-container .wp-block-kadence-header-row-center .wp-block-loginout a,
.kb-header-container .wp-block-kadence-header-row-center .wc-block-mini-cart__button,
.kb-header-container .wp-block-kadence-header-row-center .wp-block-woocommerce-customer-account a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

/* Badge numérico de la cesta (§2): 18px, circular, con el desplazamiento estricto -6/+6. */
.kb-header-container .wc-block-mini-cart__quantity-badge {
    min-width: 18px;
    height: 18px;
    border-radius: var(--pcw-radius-full);
    padding: 0 4px;
    font-size: 11px;
    top: -6px;
    right: -6px;
}

/* DUPLICADO MEDIDO (`.tmp/cwvexp/o14-nav58.json`, 1440): el bloque sirve DOS accesos al usuario
   en la misma zona — el bloque customer-account (icono + etiqueta, 108×40) y además un bloque
   loginout con el texto «Acceder» (64×40). El contrato §2 pide UNA acción de usuario.
   Se oculta SÓLO cuando las tres condiciones se cumplen a la vez:
     (1) el bloque de cuenta está presente (`:has`) — si no, el acceso seguiría existiendo aquí;
     (2) el loginout está en estado `logged-out` — si el usuario ha iniciado sesión, ese mismo
         bloque es el enlace de SALIR y ocultarlo dejaría al usuario sin forma de cerrar sesión;
     (3) estamos en la Fila 1 (zona de acciones), no en otra fila.
   Medido antes y después: `.tmp/cwvexp/o14-dup59.json` (loginout en DOM, no visible; 3 reps). */
.kb-header-container .wp-block-kadence-header-row-center .wp-block-kadence-header-section:has(.wp-block-woocommerce-customer-account) .wp-block-loginout.logged-out {
    display: none;
}

/* ── Anclaje del scroll interno (el header pegado no debe tapar el destino) ── */
@media (min-width: 1025px) {
    html {
        scroll-padding-top: calc(var(--pcw-h-topbar) + var(--pcw-h-mainheader));
    }
}

/* ══ Contenedor de TABLET/MÓVIL (<1025px): buscador, cuenta y cesta (§4) ══════════════════════
   HALLAZGO MEDIDO (2026-11-14, `.tmp/cwvexp/o14x-targets2.py`, `o14x-mobile-dom.py`,
   `o14x-reach.py`, `o14x-reach2.py`): el contenedor tablet/móvil del bloque servía SÓLO el
   disparador del menú y el logo — 2 elementos interactivos frente a los 6 del header clásico. El
   buscador, la cuenta y la cesta existían en el DOM pero dentro del contenedor de ESCRITORIO, que
   a esos anchos está `display: none`: quedaban INALCANZABLES. El cajón lateral no los aporta (68
   controles, todos enlaces de navegación) y el megamenú del sitio tampoco, porque su disparador se
   inyecta sólo en la ubicación de menú `primary` (`functions.php:300-316`), que este header no
   pinta. Era una pérdida funcional, no estética; por eso los tres bloques se añadieron al markup
   del contenedor tablet reutilizando los `uniqueID` del de escritorio (su CSS ya está generado).

   REPARTO (medido, `.tmp/cwvexp/o14x-grid-mob.json`): la rejilla del contenedor tablet es
   `1fr auto 1fr`. En la fila central la columna izquierda lleva el disparador y la central el logo;
   la derecha estaba vacía y recibe cuenta y cesta. La fila inferior estaba vacía y sin alto: recibe
   el buscador. */

/* El acceso duplicado, con la MISMA lógica que en escritorio (ver la nota de allí): la columna del
   contenedor tablet NO va envuelta en `.wp-block-kadence-header-section`, así que la condición
   `:has` se aplica a la propia columna. Se oculta sólo el estado `logged-out`; con sesión iniciada
   ese bloque es el enlace de SALIR y ocultarlo dejaría al usuario sin cerrar sesión. */
.kb-header-container.wp-block-kadence-header-tablet .wp-block-kadence-header-column:has(.wp-block-woocommerce-customer-account) .wp-block-loginout.logged-out {
    display: none;
}

/* §4: en móvil los botones de usuario son SÓLO icono, con matriz de 44×44. La etiqueta de texto del
   bloque de cuenta medía 63.6px y era justo lo que exprimía la columna del logo (el centro pasaba de
   136px a 52.6px, medido): sin etiqueta la marca recupera su sitio. La etiqueta «Mi carrito» que
   inyecta el JS se oculta igual aquí: el nombre accesible lo sostiene el aria-label. */
.kb-header-container.wp-block-kadence-header-tablet .wc-block-customer-account__link .label,
.kb-header-container.wp-block-kadence-header-tablet .wc-block-mini-cart__button .label {
    display: none;
}

.kb-header-container.wp-block-kadence-header-tablet .wc-block-customer-account__link,
.kb-header-container.wp-block-kadence-header-tablet .wc-block-mini-cart__button,
.kb-header-container.wp-block-kadence-header-tablet .wp-block-kadence-off-canvas-trigger {
    min-width: var(--pcw-touch-target-min);
    min-height: var(--pcw-touch-target-min);
    width: var(--pcw-touch-target-min);
    height: var(--pcw-touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Con sesión iniciada el bloque de salida lleva TEXTO: se le da el mínimo táctil sin fijarle el
   ancho, porque recortarlo dejaría la etiqueta cortada. */
.kb-header-container.wp-block-kadence-header-tablet .wp-block-loginout a {
    min-height: var(--pcw-touch-target-min);
    display: inline-flex;
    align-items: center;
}

/* El buscador ocupa la fila inferior a ancho completo. Las dos columnas laterales de esa fila están
   VACÍAS (medido: 45px cada una, ocupadas sólo por el padding del contenedor), así que se retiran y
   el campo crece: sin esto el campo se quedaba en 237px sobre 343px disponibles. */
.kb-header-container.wp-block-kadence-header-tablet > .wp-block-kadence-header-row-bottom .kadence-header-row-inner > .wp-block-kadence-header-column:not(:has(.kb-search)) {
    display: none;
}

.kb-header-container.wp-block-kadence-header-tablet > .wp-block-kadence-header-row-bottom .kadence-header-row-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: clamp(16px, 4vw, 24px);
}

/* La COLUMNA del buscador es la que tiene que crecer: `.kb-search` es su hija y con `flex:1` a
   secas no arrastraba el ancho de la columna (medido: el campo se quedaba en 237px de los 343px
   disponibles). El tope de 540px del contrato §2 se mantiene en el propio campo. */
.kb-header-container.wp-block-kadence-header-tablet > .wp-block-kadence-header-row-bottom .kadence-header-row-inner > .wp-block-kadence-header-column:has(.kb-search) {
    flex: 1 1 auto;
    min-width: 0;
}

.kb-header-container.wp-block-kadence-header-tablet > .wp-block-kadence-header-row-bottom .kb-search {
    flex: 1 1 auto;
    max-width: 540px;
    height: var(--pcw-touch-target-min);
}

/* Los controles internos van a 42px: es el máximo que cabe dentro del grupo de 44px, que tiene 1px
   de borde por lado (mismo compromiso ya documentado en la Fila 1 de escritorio). El tamaño de
   fuente a 16px evita el zoom automático de iOS al enfocar el campo. */
.kb-header-container.wp-block-kadence-header-tablet .kb-search-form,
.kb-header-container.wp-block-kadence-header-tablet .kb-search-input-wrapper,
.kb-header-container.wp-block-kadence-header-tablet .kb-search-input,
.kb-header-container.wp-block-kadence-header-tablet .kb-search-icon-submit {
    height: 42px;
}

.kb-header-container.wp-block-kadence-header-tablet .kb-search-input {
    font-size: 16px;
}

/* ══ Escala +20% y tooltips accesibles de «Mi cuenta» / «Mi carrito» (directiva m01986,
   Goals 2.2/2.3; aplicado 2026-11-14) ══════════════════════════════════════════════════════
   BASE MEDIDA (`.tmp/cwvexp/`, sonda m03691): label «Acceder» sin aria-label, icono 24px,
   carrito con aria en inglés "Number of items in the cart: 0". El texto lo cambia el JS
   (assets/js/pcw-header-labels.js); el CSS escala icono y texto y sostiene el tooltip.

   La etiqueta «Mi carrito» la inyecta el JS como `span.label.pcw-cart-label` dentro del
   botón del mini-carrito: gap 8px con el icono y misma escala que «Mi cuenta». */
.kb-header-container .wp-block-kadence-header-row-center .wp-block-woocommerce-customer-account a {
    gap: 8px;
}

.kb-header-container .wp-block-kadence-header-row-center .wc-block-customer-account__visual svg,
.kb-header-container .wp-block-kadence-header-row-center .wc-block-mini-cart__button svg {
    width: 22px;
    height: 22px;
}

.kb-header-container .wp-block-kadence-header-row-center .wc-block-customer-account__link .label,
.kb-header-container .wp-block-kadence-header-row-center .wc-block-mini-cart__button .label {
    font-size: 15px;
    font-weight: 600;
    color: var(--pcw-brand-dark);
    white-space: nowrap;
}

.kb-header-container .wp-block-kadence-header-row-center .wc-block-mini-cart__button {
    gap: 8px;
}

/* Tooltip accesible: ::after lee el atributo data-tip que pone el JS; aria-label respalda
   a lectores de pantalla. Aparece en hover y en focus-visible (teclado). */
.kb-header-container [data-tip] {
    position: relative;
}

.kb-header-container [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--pcw-brand-dark);
    color: var(--pcw-card);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--pcw-ease);
    z-index: 1050;
}

.kb-header-container [data-tip]:hover::after,
.kb-header-container [data-tip]:focus-visible::after {
    opacity: 1;
}