/*
 Theme Name:   WoodMart Child - Ekipate
 Theme URI:    https://ekipate.es
 Description:  Child theme de WoodMart para Ekipate
 Author:       Ekipate Dev
 Template:     woodmart
 Version:      1.1.0
 Text Domain:  woodmart-child-ekipate
*/

/* ============================================
   EKIPATE · Tokens del Sistema de Diseño (Claude Design)
   --------------------------------------------
   Fuente de verdad: docs/design-system/ekipate-design-system/.
   Los valores y escalas del DS se TRADUCEN aquí bajo nombres --ekp-*
   (traducción, NO naming nativo --accent/--ink-*). Dos capas:
     · CANÓNICA  — escalas + semánticos + roles + efectos del DS.
     · COMPAT    — tokens --ekp-*, --font-*, --space-*, --r-*, --t-* que el skin,
                   los parciales y el motor de club ya consumen, realiasados
                   a la canónica (API estable: no se renombran).
   Marca: lienzo oscuro + acento cobre; hueso como contrapunto editorial.
   Tipos: Archivo / Archivo Expanded / Martian Mono (cae Fraunces).
   Los valores NO se duplican en la doc (ver CLAUDE.md §CSS, que apunta aquí).
   ============================================ */
:root {
    /* ========== CAPA CANÓNICA — escalas del DS (bajo --ekp-*) ========== */

    /* Cobre de marca (derivado del logo metálico) */
    --ekp-copper-50:  #f7ede5;
    --ekp-copper-100: #ecd4c2;
    --ekp-copper-200: #ddb195;
    --ekp-copper-300: #d4a07a;   /* soft / texto acento atenuado */
    --ekp-copper-400: #cf7f44;
    --ekp-copper-500: #c96a2e;   /* PRIMARIO */
    --ekp-copper-600: #b05620;   /* hover / pressed */
    --ekp-copper-700: #8f4318;
    --ekp-copper-800: #6a3213;
    --ekp-copper-900: #44210d;
    --ekp-copper-glow: rgba(201, 106, 46, 0.22);

    /* Ink / neutros oscuros (el lienzo) */
    --ekp-ink-000: #000000;   /* negro puro — lockups de logo, hero */
    --ekp-ink-950: #060606;
    --ekp-ink-900: #0a0a0a;   /* fondo de página */
    --ekp-ink-850: #101010;
    --ekp-ink-800: #141414;   /* superficie base */
    --ekp-ink-700: #1a1a1a;   /* superficie elevada / tarjetas */
    --ekp-ink-600: #232323;   /* hover sobre superficie */
    --ekp-ink-500: #2e2e2e;   /* bordes fuertes sobre oscuro */
    --ekp-ink-400: #3a3a3a;

    /* Bone / papel (secciones claras editoriales) */
    --ekp-bone-50:  #faf8f3;
    --ekp-bone-100: #f7f4ee;   /* papel */
    --ekp-bone-200: #efebe3;   /* hueso */
    --ekp-bone-300: #e3ddd0;   /* hueso profundo */
    --ekp-bone-400: #d9d3c6;   /* hairline sobre claro */
    --ekp-bone-500: #c8c1b1;

    /* Warm ink — tipografía sobre claro */
    --ekp-warm-900: #1c1a16;
    --ekp-warm-700: #4a463d;
    --ekp-warm-500: #7a756a;   /* atenuado sobre claro */

    /* Hairlines sobre oscuro (alpha blanco) */
    --ekp-line-soft:   rgba(255, 255, 255, 0.08);
    --ekp-line:        rgba(255, 255, 255, 0.12);
    --ekp-line-strong: rgba(255, 255, 255, 0.18);

    /* Texto sobre oscuro (alpha blanco) */
    --ekp-on-dark-1: #ffffff;                   /* primario */
    --ekp-on-dark-2: rgba(255, 255, 255, 0.72); /* secundario */
    --ekp-on-dark-3: rgba(255, 255, 255, 0.54); /* terciario / atenuado */
    --ekp-on-dark-4: rgba(255, 255, 255, 0.38); /* tenue / desactivado */

    /* Semánticos de comercio (afinados para UI oscura) */
    --ekp-success-500: #2f9e54;   /* en stock, confirmado */
    --ekp-success-600: #1b7a34;   /* verde de marca (secundario de club, D-155) */
    --ekp-success-bg:  rgba(47, 158, 84, 0.14);
    --ekp-sale-500:    #d8453b;   /* rebaja / bajada de precio */
    --ekp-sale-bg:     rgba(216, 69, 59, 0.14);
    --ekp-warn-500:    #e0982f;   /* pocas unidades */
    --ekp-warn-bg:     rgba(224, 152, 47, 0.14);
    --ekp-info-500:    #4a8bd8;
    --ekp-info-bg:     rgba(74, 139, 216, 0.14);

    /* Avisos del club (F3, PKG-EK-B3-08) — color por tipo AA sobre hueso (PEND-27).
       El RAIL (borde) lleva el color vivo (>=3:1, no-texto); el TEXTO del tipo va en
       tonos AA (>=4.5:1 sobre --ekp-surface-body #f2f1ec) — NUNCA cobre/acento pequeno
       sobre hueso (3.33:1 < AA). Contrastes medidos en la sesion de PKG-EK-B3-08. */
    --ekp-comm-info-text:    #1f4e79;             /* 7.7:1 texto */
    --ekp-comm-info-rail:    var(--ekp-info-500); /* #4a8bd8, 3.1:1 rail */
    --ekp-comm-aviso-text:   #6a3f00;             /* 8.0:1 texto */
    --ekp-comm-aviso-rail:   #b27714;             /* 3.35:1 rail (ambar AA-safe) */
    --ekp-comm-urgente-text: #9e1b1b;             /* 7.1:1 texto */
    --ekp-comm-urgente-rail: var(--ekp-sale-500); /* #d8453b, 3.8:1 rail */

    /* Alias semánticos de color (superficies de componente y texto) */
    --ekp-surface-1:      var(--ekp-ink-800);
    --ekp-surface-2:      var(--ekp-ink-700);
    --ekp-surface-raised: var(--ekp-ink-600);
    --ekp-surface-light:  var(--ekp-bone-200);
    --ekp-surface-paper:  var(--ekp-bone-100);
    --ekp-text-strong: var(--ekp-on-dark-1);
    --ekp-text-body:   var(--ekp-on-dark-2);
    --ekp-text-muted:  var(--ekp-on-dark-3);
    --ekp-text-faint:  var(--ekp-on-dark-4);
    --ekp-text-accent: var(--ekp-copper-500);
    --ekp-text-on-light:       var(--ekp-warm-900);
    --ekp-text-on-light-muted: #6a665c;   /* desacoplado de warm-500 -> AA (~5.06:1) sobre hueso #f2f1ec (PKG-EK-W1-24) */
    --ekp-accent-on-dark:  #e8965a;   /* cobre más claro para TEXTO acento sobre oscuro */
    --ekp-accent-contrast: #ffffff;
    --ekp-border:        var(--ekp-line);
    --ekp-border-soft:   var(--ekp-line-soft);
    --ekp-border-strong: var(--ekp-line-strong);
    --ekp-border-accent: var(--ekp-copper-500);
    --ekp-border-on-light: var(--ekp-bone-400);
    --ekp-focus-ring: var(--ekp-copper-400);

    /* ---- Superficie MIXTA (D-164b): chrome oscuro / cuerpo hueso-neutro ----
       Fondo del CUERPO (tienda/ficha/micrositio). NO se fija un fondo global
       oscuro: el chrome (cabecera/hero/footer/carrito) lleva su propio fondo ink.
       AFINAR VISUALMENTE — tono de partida; lo valida el cliente en el gate (A.9).
       Enfriado respecto al bone calido del DS (--ekp-bone-100 #f7f4ee). */
    --ekp-surface-body: #f2f1ec;

    /* ---- Tipografía: familias (cae Fraunces) ---- */
    --font-sans:    'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-display: 'Archivo Expanded', 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    /* Fraunces retirada: --font-serif queda como alias temporal al display
       para no dejar sin fuente al motor de club (PKG-03 lo consume). El
       revestido de los componentes de micrositio es del paquete B. */
    --font-serif:   var(--font-display);

    /* ---- Pesos (el rango dinámico) ---- */
    --ekp-fw-thin:      200;
    --ekp-fw-light:     300;
    --ekp-fw-regular:   400;
    --ekp-fw-medium:    500;
    --ekp-fw-semibold:  600;
    --ekp-fw-bold:      700;
    --ekp-fw-extrabold: 800;
    --ekp-fw-black:     900;

    /* ---- Display fluido (hero y títulos de sección) ---- */
    --ekp-text-display-2xl: clamp(3.25rem, 7vw, 7rem);
    --ekp-text-display-xl:  clamp(2.75rem, 5.5vw, 5.5rem);
    --ekp-text-display-lg:  clamp(2.25rem, 4vw, 4.25rem);
    --ekp-text-display-md:  clamp(2rem, 3.2vw, 3.25rem);

    /* ---- Ramp estático (UI y cuerpo) ---- */
    --ekp-text-7xl: 5.5rem;
    --ekp-text-6xl: 4.25rem;
    --ekp-text-5xl: 3.25rem;
    --ekp-text-4xl: 2.5rem;
    --ekp-text-3xl: 1.875rem;
    --ekp-text-2xl: 1.5rem;
    --ekp-text-xl:  1.25rem;
    --ekp-text-lg:  1.125rem;
    --ekp-text-md:  1.0625rem;
    --ekp-text-base: 1rem;
    --ekp-text-sm:  0.875rem;
    --ekp-text-xs:  0.75rem;
    --ekp-text-2xs: 0.6875rem;

    /* ---- Interlineado ---- */
    --ekp-leading-none:    1;
    --ekp-leading-tight:   1.08;
    --ekp-leading-snug:    1.25;
    --ekp-leading-normal:  1.5;
    --ekp-leading-relaxed: 1.62;

    /* ---- Tracking ---- */
    --ekp-tracking-tighter: -0.035em;   /* display negro grande */
    --ekp-tracking-tight:   -0.02em;    /* titulares */
    --ekp-tracking-snug:    -0.01em;
    --ekp-tracking-normal:  0;
    --ekp-tracking-wide:    0.04em;
    --ekp-tracking-wider:   0.1em;
    --ekp-tracking-label:   0.16em;     /* eyebrows / labels en mayúsculas */
    --ekp-tracking-mono:    0.02em;

    /* ---- Roles tipográficos ---- */
    --ekp-type-display-family:   var(--font-display);
    --ekp-type-display-weight:   var(--ekp-fw-extrabold);
    --ekp-type-display-tracking: var(--ekp-tracking-tight);
    --ekp-type-display-leading:  var(--ekp-leading-tight);
    --ekp-type-heading-family:   var(--font-sans);
    --ekp-type-heading-weight:   var(--ekp-fw-bold);
    --ekp-type-heading-tracking: var(--ekp-tracking-tight);
    --ekp-type-heading-leading:  var(--ekp-leading-snug);
    --ekp-type-subhead-family:   var(--font-sans);
    --ekp-type-subhead-weight:   var(--ekp-fw-light);
    --ekp-type-subhead-tracking: var(--ekp-tracking-snug);
    --ekp-type-subhead-leading:  var(--ekp-leading-snug);
    --ekp-type-body-family:      var(--font-sans);
    --ekp-type-body-weight:      var(--ekp-fw-regular);
    --ekp-type-body-leading:     var(--ekp-leading-relaxed);
    --ekp-type-label-family:     var(--font-sans);
    --ekp-type-label-weight:     var(--ekp-fw-semibold);
    --ekp-type-label-tracking:   var(--ekp-tracking-label);
    --ekp-type-mono-family:      var(--font-mono);
    --ekp-type-mono-weight:      var(--ekp-fw-regular);
    --ekp-type-mono-tracking:    var(--ekp-tracking-mono);

    /* ---- Espaciado 8pt (+ medios 4pt) ---- */
    --ekp-space-0:   0;
    --ekp-space-px:  1px;
    --ekp-space-1:   0.25rem;   /* 4  */
    --ekp-space-2:   0.5rem;    /* 8  */
    --ekp-space-3:   0.75rem;   /* 12 */
    --ekp-space-4:   1rem;      /* 16 */
    --ekp-space-5:   1.5rem;    /* 24 */
    --ekp-space-6:   2rem;      /* 32 */
    --ekp-space-7:   2.5rem;    /* 40 */
    --ekp-space-8:   3rem;      /* 48 */
    --ekp-space-9:   4rem;      /* 64 */
    --ekp-space-10:  5rem;      /* 80 */
    --ekp-space-11:  6rem;      /* 96 */
    --ekp-space-12:  9rem;      /* 144 */
    --ekp-section-pad: clamp(4.5rem, 9vw, 7.5rem);
    --ekp-gutter:      clamp(1.25rem, 4vw, 2.5rem);

    /* ---- Radios técnicos (nunca pill-soft) ---- */
    --ekp-radius-none: 0;
    --ekp-radius-xs: 2px;
    --ekp-radius-sm: 4px;
    --ekp-radius-md: 6px;
    --ekp-radius-lg: 10px;
    --ekp-radius-xl: 16px;
    --ekp-radius-pill: 999px;
    --ekp-radius-circle: 50%;

    /* ---- Elevación (sobre superficies oscuras) ---- */
    --ekp-shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
    --ekp-shadow-sm:  0 2px 8px -2px rgba(0,0,0,0.5);
    --ekp-shadow-md:  0 10px 24px -12px rgba(0,0,0,0.6);
    --ekp-shadow-lg:  0 18px 40px -20px rgba(0,0,0,0.7);
    --ekp-shadow-xl:  0 32px 70px -28px rgba(0,0,0,0.78);
    --ekp-shadow-light: 0 18px 40px -24px rgba(28,26,22,0.30);
    --ekp-glow-accent:    0 0 0 1px rgba(201,106,46,0.4), 0 8px 28px -8px rgba(201,106,46,0.45);
    --ekp-glow-accent-sm: 0 4px 16px -6px rgba(201,106,46,0.5);
    --ekp-inset-hairline: inset 0 0 0 1px rgba(255,255,255,0.06);
    --ekp-focus-shadow: 0 0 0 2px var(--ekp-ink-900), 0 0 0 4px var(--ekp-copper-400);

    /* ---- Movimiento (rápido y seguro, nunca rebote) ---- */
    --ekp-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
    --ekp-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ekp-ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);
    --ekp-dur-fast: 160ms;
    --ekp-dur-med:  240ms;
    --ekp-dur-slow: 420ms;
    --ekp-t-fast: var(--ekp-dur-fast) var(--ekp-ease-out);
    --ekp-t-med:  var(--ekp-dur-med) var(--ekp-ease-out);
    --ekp-t-slow: var(--ekp-dur-slow) var(--ekp-ease-out);

    /* ---- Gradientes de firma ---- */
    --ekp-scrim-bottom: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.85) 100%);
    --ekp-scrim-hero:   linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.94) 100%);
    --ekp-atmos-copper: radial-gradient(60% 50% at 15% 0%, rgba(201,106,46,0.10) 0%, transparent 70%);
    --ekp-copper-sheen: linear-gradient(135deg, #e08a4f 0%, #c96a2e 45%, #8f4318 100%);
    --ekp-tile-dark:    radial-gradient(120% 120% at 50% 0%, #1c1c1c 0%, #121212 55%, #0c0c0c 100%);

    /* ========== CAPA DE COMPATIBILIDAD ==========
       Nombres que el skin, los parciales y el motor de club YA consumen,
       realiasados a la canónica del DS. No se renombran (API interna estable). */

    /* Neutros legacy → escala ink / line */
    --ekp-black: var(--ekp-ink-000);
    --ekp-dark: var(--ekp-ink-900);
    --ekp-ink: var(--ekp-ink-850);
    --ekp-charcoal: var(--ekp-ink-700);
    --ekp-surface: var(--ekp-ink-800);
    --ekp-hairline: var(--ekp-line-soft);
    --ekp-hairline-strong: var(--ekp-line-strong);
    --ekp-muted-dark: var(--ekp-on-dark-3);
    --ekp-muted-soft: var(--ekp-on-dark-4);

    /* Hueso legacy → escala bone / warm */
    --ekp-bone: var(--ekp-bone-200);
    --ekp-bone-deep: var(--ekp-bone-300);
    --ekp-paper: var(--ekp-bone-100);
    --ekp-line: var(--ekp-bone-400);
    --ekp-ink-warm: var(--ekp-warm-900);
    --ekp-muted: var(--ekp-text-on-light-muted);   /* legacy: realiasado al muted-on-light AA-safe, desacoplado de warm-500 (PKG-EK-W1-24) */

    /* Acento legacy → cobre */
    --ekp-accent: var(--ekp-copper-500);
    --ekp-accent-hover: var(--ekp-copper-600);
    --ekp-accent-soft: var(--ekp-copper-300);
    --ekp-accent-glow: var(--ekp-copper-glow);

    /* Verde legacy (secundario de club, D-155 vigente) → success */
    --ekp-green: var(--ekp-success-600);
    --ekp-green-hover: #0f5a22;

    /* Espaciado legacy → escala 8pt */
    --space-xs: var(--ekp-space-2);
    --space-sm: var(--ekp-space-4);
    --space-md: var(--ekp-space-5);
    --space-lg: var(--ekp-space-7);
    --space-xl: var(--ekp-space-9);
    --space-2xl: var(--ekp-space-11);
    --space-3xl: var(--ekp-space-12);

    /* Radios legacy → radios técnicos del DS */
    --r-sm: var(--ekp-radius-xs);
    --r-md: var(--ekp-radius-sm);
    --r-lg: var(--ekp-radius-lg);
    --r-xl: var(--ekp-radius-xl);

    /* Transiciones legacy → motion del DS */
    --t-fast: var(--ekp-t-fast);
    --t-med:  var(--ekp-t-med);
    --t-slow: var(--ekp-t-slow);

    /* Layout */
    --container: 1280px;
    --container-wide: 1440px;
    --container-text: 720px;
    --header-h: 84px;
    --header-h-compact: 64px;
}

/* ── GLOBAL OVERRIDES ── */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1280px;
}

/* ============================================
   SUPERFICIE MIXTA (D-164b) — chrome oscuro / cuerpo hueso-neutro
   El fondo del CUERPO (tienda/ficha/micrositio) se gobierna remapeando la palanca
   nativa de WoodMart --wd-main-bgcolor al hueso del DS (restyle, don't redraw):
   body y .wd-page-content ya la consumen, asi que cambiar --ekp-surface-body
   recolorea todo el cuerpo de una sola vez. NO se fija un fondo global oscuro:
   el chrome (cabecera/hero/footer/carrito) pinta su propio fondo ink encima.
   [!] WoodMart define --wd-main-bgcolor por Theme Settings (inline tardio); se
   fuerza con !important sobre la custom property (un unico punto de control).
   ============================================ */
:root {
    --wd-main-bgcolor: var(--ekp-surface-body) !important;
}

/* ============================================
   CAPITALIZACION DE BOTONES (t192) — el boton muestra el texto TAL COMO ESTA ESCRITO
   WoodMart aplica text-transform: var(--btn-transform, uppercase) sobre
   :is(.btn,.button,button,[type=submit],[type=button]) (parts/base.min.css) y el
   Theme Settings sirve --btn-transform: capitalize. En castellano eso rompe la
   ortografia de todo boton multi-palabra ("Volver A La Tienda"): solo se capitaliza
   la primera. Se neutraliza remapeando el TOKEN, no la propiedad -> un unico punto
   de control que cubre tambien .btn-default y .btn-accent, cuyos
   --btn-default-transform / --btn-accented-transform caen a este por fallback.
   El doble :root gana por ESPECIFICIDAD (0,2,0 > 0,1,0) al bloque inline tardio del
   Theme Settings, sin escalar a !important (la politica de abajo lo reserva para
   background / color / borde; la tipografia se gana por especificidad).
   [!] Los uppercase DELIBERADOS del DS (.ekp-btn, add-to-cart del loop) NO se tocan:
   son tratamiento tipografico de marca, no un error de ortografia.
   ============================================ */
:root:root {
    --btn-transform: none;
}

/* ============================================
   POLÍTICA DE !important — saldado en PKG-EK-W1-01 (44 -> 22)
   Los !important restantes son inevitables: overridean a WoodMart/WooCommerce,
   que fuerza estas mismas propiedades con !important (el tema padre tiene 289).
   Un !important ajeno NO se vence con especificidad, sólo con otro !important.
   Por eso se conservan SÓLO en background / color / border-color / border-radius
   de componentes del framework. Tipografía, espaciado y transiciones se ganan
   por especificidad (sin !important). Cada bloque justifica su caso abajo.
   ============================================ */

/* ── HEADER OVERRIDES ── */

.whb-header {
    transition: background var(--t-med), box-shadow var(--t-med);
}

/* Header transparente sobre el hero (modo overcontent de WoodMart).
   [!] WoodMart pinta el header con alta especificidad en este estado:
   sin !important no se sobreescriben fondo, borde ni color del texto. */
.whb-overcontent .whb-header:not(.whb-sticky-prepared) .whb-general-header {
    background: transparent !important;
    border-bottom-color: rgba(255,255,255,0.15) !important;
}

.whb-overcontent .whb-header:not(.whb-sticky-prepared) .whb-general-header .wd-nav-main > li > a,
.whb-overcontent .whb-header:not(.whb-sticky-prepared) .whb-general-header .wd-tools-element > a {
    color: #fff !important;
}

.whb-overcontent .whb-header:not(.whb-sticky-prepared) .whb-general-header .site-logo img {
    filter: brightness(0) invert(1);
}

.whb-overcontent .whb-header:not(.whb-sticky-prepared) .whb-general-header .wd-tools-element .wd-cart-number {
    background: #fff !important;
    color: var(--ekp-dark) !important;
}

/* Header sticky · [!] el fondo del header fijo de WoodMart se impone por su cascada. */
.whb-sticky-prepared .whb-general-header {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Menu styling */
.wd-nav-main > li > a {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Contador del carrito · [!] WoodMart fija su fondo; forzamos el cobre. */
.wd-cart-number {
    background: var(--ekp-accent) !important;
}

/* WoodMart Logo text fallback */
.woodmart-logo .woodmart-logo-wrap {
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.5px;
}

/* ── HERO SECTION ── */

.ekp-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ekp-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    animation: ekp-hero-zoom 20s ease-in-out infinite alternate;
}

@keyframes ekp-hero-zoom {
    from { transform: scale(1.02); }
    to { transform: scale(1.08); }
}

.ekp-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.85) 0%,
        rgba(201, 106, 46, 0.6) 50%,
        rgba(10, 10, 10, 0.7) 100%
    );
}

.ekp-hero__content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 0 8%;
    color: #fff;
}

.ekp-hero__label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding: 8px 20px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 30px;
    backdrop-filter: blur(4px);
    background: rgba(255,255,255,0.08);
}

.ekp-hero__title {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 20px;
    letter-spacing: -1px;
    color: #fff;
}

.ekp-hero__text {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 35px;
    opacity: 0.85;
    font-weight: 300;
}

.ekp-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── BUTTONS ── */

.ekp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--r-md);
    transition: all var(--t-med);
    cursor: pointer;
    border: 2px solid transparent;
    line-height: 1;
}

.ekp-btn--primary {
    background: #fff;
    color: var(--ekp-dark);
    border-color: #fff;
}

.ekp-btn--primary:hover {
    background: var(--ekp-accent);
    color: #fff;
    border-color: var(--ekp-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(201, 106, 46, 0.3);
}

.ekp-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.ekp-btn--outline:hover {
    background: #fff;
    color: var(--ekp-dark);
    border-color: #fff;
    transform: translateY(-2px);
}

.ekp-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

.ekp-btn--outline-light:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

.ekp-btn--white {
    background: #fff;
    color: var(--ekp-dark);
    border-color: #fff;
}

.ekp-btn--white:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

.ekp-btn--lg {
    padding: 18px 48px;
    font-size: 14px;
}

/* ── FEATURES BAR ── */

.ekp-features-bar {
    background: var(--ekp-dark);
    padding: 0;
    position: relative;
    z-index: 1;
}

.ekp-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ekp-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background var(--t-med);
}

.ekp-feature:last-child {
    border-right: none;
}

.ekp-feature:hover {
    background: rgba(255,255,255,0.04);
}

.ekp-feature svg {
    flex-shrink: 0;
    opacity: 0.7;
    color: var(--ekp-accent-hover);
}

.ekp-feature__text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.ekp-feature__text span {
    font-size: 12px;
    opacity: 0.55;
    font-weight: 400;
}

/* ── SECTIONS ── */

.ekp-section {
    padding: 80px 0;
}

.ekp-section--alt {
    background: var(--ekp-paper);
}

.ekp-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.ekp-section-header__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ekp-accent);
    margin-bottom: 12px;
}

.ekp-section-header__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--ekp-dark);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}

.ekp-section-header__desc {
    font-size: 16px;
    color: var(--ekp-muted);
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ── CATEGORY CARDS (override de shortcode WooCommerce) ──
   [!] border-radius: impone radio afilado sobre el redondeo de WoodMart.
   [!] color del título: WooCommerce fija el color del loop-category title. */

.woocommerce .products .product-category {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg) !important;
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.woocommerce .products .product-category:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.18);
}

.woocommerce .products .product-category a {
    text-decoration: none;
}

.woocommerce .products .product-category img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce .products .product-category:hover img {
    transform: scale(1.08);
}

.woocommerce .products .product-category .woocommerce-loop-category__title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ekp-dark) !important;
    padding: 18px 0;
    margin: 0;
}

.woocommerce .products .product-category .woocommerce-loop-category__title .count {
    display: none;
}

/* ── PRODUCT CARDS OVERRIDE ──
   [!] border-radius: radio afilado sobre el del card de WoodMart.
   [!] color del precio e ins: WooCommerce fuerza el color del precio. */

.products .product {
    transition: transform var(--t-med);
}

.products .product:hover {
    transform: translateY(-4px);
}

.products .product .product-element-top {
    border-radius: var(--r-lg) !important;
    overflow: hidden;
}

/* Price styling */
.products .product .price {
    color: var(--ekp-dark) !important;
    font-weight: 700;
}

.products .product .price del {
    opacity: 0.4;
}

.products .product .price ins {
    color: var(--ekp-accent) !important;
    text-decoration: none;
}

/* Badge de oferta · [!] .onsale lleva !important en WooCommerce/WoodMart. */
.product-labels .onsale,
.wd-product-labels .onsale {
    background: var(--ekp-accent) !important;
}

/* Botón añadir al carrito · [!] background/color/border-radius:
   WooCommerce/WoodMart fuerzan el estilo del botón del loop de producto. */
.products .product .add_to_cart_button,
.products .product .wd-add-btn a {
    background: var(--ekp-dark) !important;
    color: #fff !important;
    border-radius: var(--r-md) !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all var(--t-med);
}

.products .product .add_to_cart_button:hover,
.products .product .wd-add-btn a:hover {
    background: var(--ekp-accent) !important;
}

/* ── PROMO SECTION ── */

.ekp-promo {
    padding: 30px 0 80px;
}

.ekp-promo__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.ekp-promo__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    padding: 50px 40px;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    transition: transform var(--t-med), box-shadow var(--t-med);
}

.ekp-promo__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.18);
}

.ekp-promo__card--large {
    grid-row: span 2;
    min-height: 500px;
    padding: 60px 50px;
}

.ekp-promo__card-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ekp-promo__card:hover .ekp-promo__card-bg {
    transform: scale(1.03);
}

.ekp-promo__card-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.ekp-promo__card-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: 0.7;
}

.ekp-promo__card-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
    line-height: 1.2;
}

.ekp-promo__card--large .ekp-promo__card-title {
    font-size: 34px;
}

.ekp-promo__card-text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px;
    opacity: 0.75;
    max-width: 350px;
}

/* ── TRUST SECTION ── */

.ekp-trust {
    padding: 70px 0;
    background: var(--ekp-paper);
    border-top: 1px solid var(--ekp-line);
    border-bottom: 1px solid var(--ekp-line);
}

.ekp-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.ekp-trust__number {
    font-size: 42px;
    font-weight: 800;
    color: var(--ekp-accent);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.ekp-trust__label {
    font-size: 14px;
    color: var(--ekp-muted);
    font-weight: 500;
}

/* ── CTA SECTION ── */

.ekp-cta {
    padding: 100px 0;
    background: var(--ekp-dark);
    text-align: center;
}

.ekp-cta__inner {
    max-width: 650px;
    margin: 0 auto;
}

.ekp-cta__title {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.ekp-cta__text {
    font-size: 17px;
    color: rgba(255,255,255,0.6);
    margin: 0 0 40px;
    line-height: 1.6;
}

.ekp-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.ekp-cta .ekp-btn--primary {
    background: var(--ekp-accent);
    color: #fff;
    border-color: var(--ekp-accent);
}

.ekp-cta .ekp-btn--primary:hover {
    background: var(--ekp-accent-hover);
    border-color: var(--ekp-accent-hover);
    box-shadow: 0 8px 25px rgba(201, 106, 46, 0.4);
}

.ekp-cta .ekp-btn--outline {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.2);
}

.ekp-cta .ekp-btn--outline:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
}

/* ── FOOTER IMPROVEMENTS ── */

.footer-container {
    border-top: none;
}

.wd-prefooter {
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── WOOCOMMERCE BUTTON OVERRIDES ──
   [!] border-radius y background/border-color del .alt: los botones de
   WooCommerce/WoodMart se estilan con su propia cascada (a menudo !important). */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.button.add_to_cart_button {
    border-radius: var(--r-md) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all var(--t-med);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.single_add_to_cart_button {
    background: var(--ekp-accent) !important;
    border-color: var(--ekp-accent) !important;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.single_add_to_cart_button:hover {
    background: var(--ekp-accent-hover) !important;
    border-color: var(--ekp-accent-hover) !important;
}

/* ── SEARCH OVERLAY ── */

.wd-search-full-screen .wd-search-inner {
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(20px);
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
    .ekp-hero {
        min-height: 70vh;
    }

    .ekp-hero__title {
        font-size: 38px;
    }

    .ekp-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .ekp-feature:nth-child(2) {
        border-right: none;
    }

    .ekp-promo__grid {
        grid-template-columns: 1fr;
    }

    .ekp-promo__card--large {
        grid-row: span 1;
        min-height: 300px;
    }

    .ekp-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .ekp-hero {
        min-height: 65vh;
        align-items: flex-end;
        padding-bottom: 60px;
    }

    .ekp-hero__content {
        padding: 0 24px;
    }

    .ekp-hero__label {
        font-size: 11px;
        letter-spacing: 2px;
        padding: 6px 16px;
    }

    .ekp-hero__title {
        font-size: 32px;
    }

    .ekp-hero__text {
        font-size: 15px;
    }

    .ekp-hero__actions {
        flex-direction: column;
    }

    .ekp-hero__actions .ekp-btn {
        width: 100%;
        text-align: center;
    }

    .ekp-features {
        grid-template-columns: 1fr;
    }

    .ekp-feature {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 16px 20px;
    }

    .ekp-feature:last-child {
        border-bottom: none;
    }

    .ekp-section {
        padding: 50px 0;
    }

    .ekp-section-header {
        margin-bottom: 35px;
    }

    .ekp-section-header__title {
        font-size: 28px;
    }

    .ekp-promo__card {
        padding: 35px 30px;
        min-height: 200px;
    }

    .ekp-promo__card--large {
        padding: 40px 30px;
        min-height: 260px;
    }

    .ekp-promo__card-title {
        font-size: 22px;
    }

    .ekp-promo__card--large .ekp-promo__card-title {
        font-size: 26px;
    }

    .ekp-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ekp-trust__number {
        font-size: 32px;
    }

    .ekp-cta {
        padding: 60px 0;
    }

    .ekp-cta__title {
        font-size: 28px;
    }

    .ekp-cta__text {
        font-size: 15px;
    }

    .ekp-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ekp-btn--lg {
        padding: 16px 32px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .ekp-hero {
        min-height: 60vh;
    }

    .ekp-hero__title {
        font-size: 28px;
    }

    .ekp-trust__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   EKIPATE · Avisos del club (F3, PKG-EK-B3-08)
   --------------------------------------------
   Bloque de comunicaciones del micrositio, pintado en el seam
   ecm_club_communications dentro de <section class="ekp-club-communications">.
   Color por tipo AA sobre hueso (PEND-27): el RAIL lleva el color vivo (>=3:1),
   el TEXTO del tipo va en tonos AA (>=4.5:1). Tokens en :root (--ekp-comm-*).
   El bloque NO usa las vars de club (--ekp-club-*): el color de tipo es semantico
   y fijo, para no reintroducir el problema cobre/club-sobre-hueso. Cache-bust por
   filemtime en functions.php.
   ============================================ */
.ekp-club-communications {
    margin: var(--ekp-space-5) 0;
}

.ekp-club-communications__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ekp-space-3);
}

.ekp-club-communications__item {
    position: relative;
    background-color: var(--ekp-bone-50);
    border: 1px solid var(--ekp-border-on-light);
    border-left: 4px solid var(--ekp-comm-info-rail);
    border-radius: var(--ekp-radius-md);
    padding: var(--ekp-space-4) var(--ekp-space-5);
    box-shadow: var(--ekp-shadow-xs);
}

/* Color por tipo: rail (borde izquierdo) segun severidad. */
.ekp-club-communications__item--info    { border-left-color: var(--ekp-comm-info-rail); }
.ekp-club-communications__item--aviso   { border-left-color: var(--ekp-comm-aviso-rail); }
.ekp-club-communications__item--urgente { border-left-color: var(--ekp-comm-urgente-rail); }

/* Enfasis del destacado: rail mas grueso + elevacion. */
.ekp-club-communications__item--pinned {
    border-left-width: 6px;
    box-shadow: var(--ekp-shadow-light);
}

.ekp-club-communications__type {
    display: inline-block;
    margin: 0 0 var(--ekp-space-1);
    font-family: var(--ekp-type-label-family);
    font-weight: var(--ekp-fw-semibold);
    font-size: var(--ekp-text-xs);
    letter-spacing: var(--ekp-tracking-label);
    text-transform: uppercase;
    color: var(--ekp-comm-info-text);
}
.ekp-club-communications__item--info    .ekp-club-communications__type { color: var(--ekp-comm-info-text); }
.ekp-club-communications__item--aviso   .ekp-club-communications__type { color: var(--ekp-comm-aviso-text); }
.ekp-club-communications__item--urgente .ekp-club-communications__type { color: var(--ekp-comm-urgente-text); }

.ekp-club-communications__title {
    margin: 0 0 var(--ekp-space-2);
    font-family: var(--ekp-type-heading-family);
    font-weight: var(--ekp-fw-bold);
    font-size: var(--ekp-text-lg);
    line-height: var(--ekp-leading-snug);
    color: var(--ekp-text-on-light);
}

.ekp-club-communications__body {
    color: var(--ekp-text-on-light);
    font-size: var(--ekp-text-base);
    line-height: var(--ekp-leading-relaxed);
}
.ekp-club-communications__body > :first-child { margin-top: 0; }
.ekp-club-communications__body > :last-child  { margin-bottom: 0; }

.ekp-club-communications__cta {
    display: inline-block;
    margin-top: var(--ekp-space-3);
    padding: var(--ekp-space-2) var(--ekp-space-4);
    background-color: var(--ekp-copper-700);
    color: #fff;
    font-family: var(--ekp-type-label-family);
    font-weight: var(--ekp-fw-semibold);
    font-size: var(--ekp-text-sm);
    line-height: 1.2;
    border-radius: var(--ekp-radius-sm);
    text-decoration: none;
    transition: background-color var(--ekp-t-fast);
}
.ekp-club-communications__cta:hover,
.ekp-club-communications__cta:focus {
    background-color: var(--ekp-copper-800);
    color: #fff;
}

@media (max-width: 480px) {
    .ekp-club-communications__item {
        padding: var(--ekp-space-3) var(--ekp-space-4);
    }
}

/* ============================================================================
   PKG-EK-B4-14 (G) · Label de club por LINEA (carrito / drawer / checkout)
   El plugin pinta el nombre del club como meta de linea (woocommerce_get_item_data)
   dentro de .ekp-cart-club. El TEXTO HEREDA el color de la meta de linea del tema, que ya
   es AA en cada superficie -- claro sobre el drawer oscuro (chrome), oscuro sobre el cuerpo
   hueso --: no fijamos color de texto crudo, asi no introducimos riesgo AA nuevo (la medida
   pixel-a-pixel en ambas superficies queda para el gate visual de Jose). La marca entra por
   el punto cobre (var(--ekp-accent), decorativo no-texto) y el peso.
   ============================================================================ */
.ekp-cart-club {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-family: var(--ekp-type-label-family);
    font-weight: var(--ekp-fw-semibold);
    letter-spacing: .01em;
}
.ekp-cart-club::before {
    content: "";
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: var(--ekp-accent);
    flex: 0 0 auto;
}