/*
Theme Name: Team Global (lean)
Theme URI: https://teamglobalusa.com
Description: WS4 — lean custom WooCommerce theme for the Option-C rebuild. Replaces the
  WPBakery + Slider Revolution + Lincoln stack. BRAND-AGNOSTIC skeleton: neutral
  placeholder design tokens (skin with the client's brand later). Storefront + member
  surfaces; T6 image hygiene (core srcset/lazy-load, responsive embeds).
Author: Team Global build (Option C)
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.3
Text Domain: teamglobal
WC requires at least: 8.0
WC tested up to: 10.8
*/

/* ── Design tokens — "Electric Cobalt · Night" v2 (see teamglobal-design-system.md §5) ── */
:root {
  --tg-bg: #FFFFFF;
  --tg-surface: #F7F8FA;
  --tg-ink: #0E1B33;           /* body text */
  --tg-muted: #5B6473;
  --tg-line: #D7DDE6;
  --tg-accent: #2B4DFF;        /* cobalt — primary */
  --tg-accent-ink: #16356A;    /* navy 700 — secondary/hover */
  --tg-navy: #0C1E3E;          /* dark surfaces */
  --tg-red: #D81E2C;           /* live/emphasis only */
  --tg-success: #1B7F4B;
  --tg-radius: 18px;
  --tg-radius-btn: 9px;        /* button corner */
  --tg-radius-input: 10px;     /* form field corner */
  --tg-radius-pill: 999px;     /* badges/pills */
  --tg-space: 8px;
  --tg-maxw: 1180px;
  --tg-font: "Hanken Grotesk", sans-serif;
  --tg-font-display: "Archivo", sans-serif;

  /* component tints / strong text (no existing token) */
  --tg-accent-tint: #E9EDFF;   /* cobalt tint — format pill */
  --tg-success-tint: #EAF6EE;  /* success tint — active pill */
  --tg-ink-strong: #2A3243;    /* form label / strong meta */
  /* Was #9AA6B8 — only 2.46:1 on --tg-bg and 2.32:1 on --tg-surface, failing WCAG AA
     across 28 usages in the DEFAULT theme (breadcrumbs, card meta, SKU, struck-through
     prices, field help, table heads). #667389 clears AA on both (4.80 / 4.51) and is
     still a clear step below --tg-muted (5.97), so the meta < muted < ink hierarchy holds.
     Dark mode overrides this token separately and already passed. */
  --tg-meta: #667389;          /* low-emphasis meta */

  /* mode-aware roles (flip in dark mode) */
  --tg-card: #FFFFFF;          /* card/panel surface — ≠ page bg in dark */
  --tg-ink-soft: #3A4458;      /* long-form body text (PDP desc, includes) */
  --tg-line-soft: #EEF1F6;     /* card/table hairlines */
  --tg-line-input: #E2E6EC;    /* form input borders */
  --tg-link: #2B4DFF;          /* accent as TEXT (links, stars, tints) — brighter in dark */
  --tg-accent-hover: #16356A;  /* primary button hover fill */
  /* Was #D81E2C — 4.29:1 on --tg-red-tint, failing AA for the countdown and discount
     pills (both ~12.5px normal text). #C4121F clears it at 5.15:1 and only improves the
     other contexts (live-card time, required asterisk, remove button) which sit on white.
     --tg-red (the badge FILL) is unchanged; white on it already passed at 5.07:1. */
  --tg-red-text: #C4121F;      /* red as TEXT/dot — brighter in dark */
  --tg-red-tint: #FDE7E9;      /* red tint fill (discount badge, countdown) */
  --tg-navy-deep: #07152E;     /* utility bar / footer */

  /* on-dark constants — SAME value in both modes (text/chrome over navy or accent fills) */
  --tg-on-dark: #FFFFFF;
  --tg-on-navy-muted: #A7B6D6; /* body text on navy */
  --tg-on-navy-soft: #8FA6D6;  /* wordmark second half, sub notes */
  --tg-on-navy-link: #C3CFE6;  /* utility-bar links */
  --tg-on-navy-faint: #7E8FB8; /* faint meta on navy */
  --tg-accent-bright: #5C82FF; /* accent legible on navy */
  --tg-ghost-fill: #FFFFFF14;  /* ghost button on navy */
  --tg-ghost-fill-hover: #FFFFFF24;
  --tg-ghost-line: #FFFFFF2E;

  /* elevation */
  --tg-shadow-card: 0 1px 3px rgba(12,30,62,.08);
  --tg-shadow-md: 0 8px 20px rgba(12,30,62,.14);
  --tg-shadow-soft: 0 10px 30px rgba(12,30,62,.08);   /* buy box */
  --tg-shadow-lg: 0 20px 50px rgba(12,30,62,.18);     /* PDP poster */
  --tg-elev-2: 0 12px 30px rgba(16,24,64,.14);        /* search dropdown */
  --tg-shadow-glow: 0 18px 40px rgba(43,77,255,.22);
  --tg-shadow-focus: 0 0 0 3px rgba(43,77,255,.12);  /* form focus ring */

  color-scheme: light;
}

/* ── Dark mode — palette from the approved "Team Global Homepage Dark" mockup.
   Single source: the [data-tg-theme] attribute on <html>, set pre-paint by the
   head script in functions.php (stored choice, else OS prefers-color-scheme).
   Everything below the token blocks is mode-agnostic — skin by token only. ── */
:root[data-tg-theme="dark"] {
  --tg-bg: #07152E;
  --tg-surface: #0E2148;
  --tg-card: #0C1E3E;
  --tg-ink: #EDF1F9;
  --tg-ink-strong: #EDF1F9;
  --tg-ink-soft: #A7B6D6;
  --tg-muted: #A7B6D6;
  --tg-meta: #7E8FB8;
  --tg-line: #FFFFFF1F;
  --tg-line-soft: #FFFFFF12;
  --tg-line-input: #FFFFFF2B;
  --tg-link: #5C82FF;
  --tg-accent-hover: #1E3AC9;
  --tg-accent-tint: #2B4DFF2B;
  --tg-success: #3DBF7E;
  --tg-success-tint: #1B7F4B33;
  --tg-red-text: #FF6B76;
  --tg-red-tint: #FF6B761F;
  --tg-navy-deep: #050F20;

  --tg-shadow-card: 0 1px 3px rgba(0,0,0,.4);
  --tg-shadow-md: 0 8px 20px rgba(0,0,0,.45);
  --tg-shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --tg-shadow-lg: 0 20px 50px rgba(0,0,0,.5);
  --tg-elev-2: 0 12px 30px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* Dark-mode component adjustments — the few spots where one token can't serve
   both roles (text-on-light that must become text-on-dark, poster art constants). */
[data-tg-theme="dark"] .tg-brand { color: var(--tg-on-dark); }
[data-tg-theme="dark"] .tg-brand span { color: var(--tg-on-navy-soft); }
[data-tg-theme="dark"] .tg-btn--outline { color: var(--tg-ink) !important; }
[data-tg-theme="dark"] .tg-product-card__title a:hover { color: var(--tg-accent-bright); }
[data-tg-theme="dark"] .tg-thumb--3 { background: #E9EDFF; }  /* poster ART keeps its light palette in both modes */
[data-tg-theme="dark"] .tg-cart { border: 1px solid var(--tg-line-soft); }  /* mockup: cart pill hairline on dark header */
[data-tg-theme="dark"] .woocommerce .woocommerce-ordering select,
[data-tg-theme="dark"] .woocommerce select.orderby {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A7B6D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Visually-hidden utility. header.php already used .screen-reader-text but the theme
   never defined it — it was relying on whatever Woo/block CSS happened to load. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
/* Skip link — off-screen until focused, then a real target in the top-left. */
.tg-skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--tg-accent); color: var(--tg-on-dark);
  font-family: var(--tg-font-display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .03em;
  padding: 12px 20px; border-radius: var(--tg-radius-btn);
  transition: top .15s ease;
}
.tg-skip-link:focus { top: 8px; text-decoration: none; outline: 2px solid var(--tg-on-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tg-skip-link { transition: none; } }
body {
  margin: 0;
  background: var(--tg-bg);
  color: var(--tg-ink);
  font: 16px/1.6 var(--tg-font);
  min-height: 100vh;            /* sticky footer: fill the viewport… */
  min-height: 100dvh;           /* …measured against the CURRENT viewport, so a mobile
                                   address bar can't push the footer off-screen */
  display: flex;
  flex-direction: column;
}
img, video { max-width: 100%; height: auto; }   /* T6: responsive media */
a { color: var(--tg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.tg-container { width: 100%; max-width: var(--tg-maxw); margin: 0 auto; padding: 0 clamp(24px, 5vw, 48px); }   /* §94 responsive gutter (24px floor so mobile cards never hug the viewport); width:100% keeps it filling when a direct flex child of body */

/* ── Header: utility bar + sticky header + category nav ── */
.tg-utilitybar { background: var(--tg-navy-deep); color: var(--tg-on-navy-soft); font-size: 12.5px; }
.tg-utilitybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.tg-utilitybar__links { display: flex; align-items: center; gap: 18px; }
.tg-utilitybar a { color: var(--tg-on-navy-link); }
.tg-utilitybar a:hover { color: var(--tg-on-dark); text-decoration: none; }
.tg-utilitybar__lang { display: inline-flex; align-items: center; gap: 6px; color: var(--tg-on-dark); }
.tg-utilitybar a.tg-lang-opt { display: inline-flex; align-items: center; gap: 6px; color: var(--tg-on-navy-soft); font-weight: 600; }
.tg-utilitybar a.tg-lang-opt.is-active { color: var(--tg-on-dark); }
/* the red dot rides the ACTIVE language, with a soft glow */
.tg-utilitybar a.tg-lang-opt.is-active::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tg-red);
  animation: tg-lang-glow 3s ease-in-out infinite;
}
@keyframes tg-lang-glow {
  0%, 100% { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--tg-red) 45%, transparent); }
  50%      { box-shadow: 0 0 9px 3px color-mix(in srgb, var(--tg-red) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-utilitybar a.tg-lang-opt.is-active::before { animation: none; box-shadow: 0 0 6px 2px color-mix(in srgb, var(--tg-red) 55%, transparent); }
}
.tg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tg-dot--red { background: var(--tg-red); }

/* Light/dark toggle — ghost pill on the (always-navy) utility bar */
.tg-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--tg-on-navy-link);
  border: 1px solid var(--tg-ghost-line); border-radius: var(--tg-radius-pill);
  font: 600 12px/1 var(--tg-font); padding: 8px 12px; cursor: pointer;
  min-height: 30px;   /* was exactly 24px — WCAG 2.5.8 with zero margin */
}
.tg-theme-toggle:hover { color: var(--tg-on-dark); background: var(--tg-ghost-fill); }
.tg-theme-toggle::before { content: "\263E"; font-size: 12px; }   /* ☾ — action: switch to dark */
[data-tg-theme="dark"] .tg-theme-toggle::before { content: "\2600"; }   /* ☀ — action: switch to light */

.tg-site-header { position: sticky; top: 0; z-index: 30; background: var(--tg-bg); border-bottom: 1px solid var(--tg-line-soft); }
/* WP admin bar (fixed, z-index 99999) otherwise overlaps the sticky header when scrolled.
   Core heights: 32px desktop, 46px ≤782px; ≤600px the bar scrolls away (absolute) → back to 0. */
body.admin-bar { --tg-admin-bar: 32px; }
body.admin-bar .tg-site-header { top: var(--tg-admin-bar); }
@media screen and (max-width: 782px) { body.admin-bar { --tg-admin-bar: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar { --tg-admin-bar: 0px; } }   /* bar scrolls away (absolute) below 600px */
.tg-site-header__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); min-height: 64px; }
.tg-brand { font-family: var(--tg-font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.02em; color: var(--tg-accent-ink); white-space: nowrap; display: inline-flex; align-items: center; }
.tg-brand span { color: var(--tg-ink); }
/* Image brand: the dark-ink logo on light surfaces, the white logo on the dark theme.
   Only the visible one is in the a11y tree — display:none is skipped by screen readers,
   so both <img> carry the same alt without doubling it. */
.tg-brand__logo { display: block; width: auto; max-width: 100%; }
/* The `.tg-brand` prefix (0,2,0) is deliberate: WooCommerce ships `.woocommerce-page img
   { height: auto }` (0,1,1) which is on the <body> of every account/shop/checkout page and
   would otherwise render the header logo at its natural 720px. This out-specifies it. */
.tg-brand .tg-brand__logo { height: 36px; }
.tg-brand__logo--white { display: none; }
[data-tg-theme="dark"] .tg-brand__logo--dark { display: none; }
[data-tg-theme="dark"] .tg-brand__logo--white { display: block; }

.tg-search { flex: 1; display: flex; align-items: center; background: var(--tg-surface); border: 1.5px solid var(--tg-line-input); border-radius: var(--tg-radius-input); padding: 0 14px; min-width: 0; max-width: 420px; }
.tg-search__icon { flex: none; color: var(--tg-meta); margin-right: 8px; }
.tg-search__input { width: 100%; font-family: var(--tg-font); font-size: 14.5px; border: 0; outline: 0; padding: 11px 0; background: transparent; color: var(--tg-ink); }

/* Live product search (WooCommerce Product Search plugin) — skin its markup to match .tg-search.
   Plugin emits: .product-search > .product-search-form (div+form) > input.product-search-field,
   and a .product-search-results dropdown. Strip the plugin chrome and reuse our tokens. */
.tg-search--live { position: relative; }
.tg-search--live .product-search,
.tg-search--live .product-search-form { flex: 1; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.tg-search--live .product-search-field {
  width: 100%; font-family: var(--tg-font); font-size: 14.5px;
  border: 0; outline: 0; box-shadow: none; padding: 11px 0;
  background: transparent; color: var(--tg-ink);
}
.tg-search--live .product-search-field::placeholder { color: var(--tg-meta); }
.tg-search--live .product-search-field-clear { color: var(--tg-meta); }
/* Results dropdown — surface card with elevation, aligned under the bar.
   Chrome lives on the INNER -content box: the plugin keeps the outer container
   display:block at all times and blanks -content:empty — skinning the outer box
   painted a stray bordered/shadowed strip under the bar when there were no results. */
.tg-search--live .product-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
  background: transparent; border: 0; box-shadow: none;
}
.tg-search--live .product-search-results-content {
  max-height: 60vh; overflow-y: auto;
  background: var(--tg-surface); border: 1px solid var(--tg-line-input);
  border-radius: var(--tg-radius-input); box-shadow: var(--tg-elev-2);
}
.tg-search--live .product-search-results-content:empty { background: transparent; border: 0; box-shadow: none; }
.tg-search--live .product-search-results a { color: var(--tg-ink); }
.tg-search--live .product-search-results a:hover { text-decoration: none; }
/* Result rows: the plugin renders a table.search-results (tr.entry > td). Compact rows,
   on-brand. Demo products have no image → hide the broken thumbnail; the "AÑADIR" is a
   small pill (not the full-size .button); the last row is a subtle "Buscar en <cat>". */
.tg-search--live .product-search-results-content table.search-results { width: 100%; border-collapse: collapse; margin: 0; }
.tg-search--live .product-search-results-content tr.entry:hover td { background: var(--tg-bg); }
.tg-search--live .product-search-results-content td { padding: 9px 12px; vertical-align: middle; border: 0; }
.tg-search--live .product-search-results-content td.product-image { display: none; }
.tg-search--live .product-search-results-content td.product-info > a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; }
.tg-search--live .product-search-results-content .title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--tg-ink); line-height: 1.3; }
.tg-search--live .product-search-results-content .description { display: none; }
.tg-search--live .product-search-results-content .price { flex: 0 0 auto; font-family: var(--tg-font-display); font-weight: 700; font-size: 13.5px; color: var(--tg-ink); white-space: nowrap; }
.tg-search--live .product-search-results-content .wps_add_to_cart { margin-top: 6px; }
.tg-search--live .product-search-results-content .wps_add_to_cart a.button { display: inline-block; padding: 5px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; min-height: 0; line-height: 1.5; border-radius: 999px; background: var(--tg-accent); color: var(--tg-on-dark); border: 0; }
.tg-search--live .product-search-results-content .wps_add_to_cart a.button:hover { background: var(--tg-accent-hover); }
.tg-search--live .product-search-results-content tr.s_product_cat td { border-top: 1px solid var(--tg-line-soft); }
.tg-search--live .product-search-results-content tr.s_product_cat .title { font-size: 12.5px; font-weight: 600; color: var(--tg-accent); }
.tg-search--live .product-search-results-content .no-results { padding: 12px; color: var(--tg-meta); font-size: 13.5px; }

/* Product SKU + categories on the single-product buy box (muted caption pair). */
.tg-buybox__sku,
.tg-buybox__cats { font-family: var(--tg-font); font-size: 12.5px; color: var(--tg-meta); margin-bottom: 8px; letter-spacing: 0.02em; }
.tg-buybox__sku span { color: var(--tg-muted); font-weight: 600; }
.tg-buybox__cats { margin-bottom: 16px; }
.tg-buybox__cats span { color: var(--tg-muted); font-weight: 600; }
.tg-buybox__cats a { color: var(--tg-accent-ink); text-decoration: none; border-bottom: 1px solid var(--tg-line); }
.tg-buybox__cats a:hover,
.tg-buybox__cats a:focus-visible { color: var(--tg-accent); border-bottom-color: currentColor; }

.tg-header-actions { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin-left: auto; }
.tg-header-link { font-size: 14px; font-weight: 600; color: var(--tg-muted); white-space: nowrap; }
.tg-cart { display: inline-flex; align-items: center; gap: 9px; background: var(--tg-navy); color: var(--tg-on-dark) !important; border-radius: var(--tg-radius-input); padding: 10px 16px; white-space: nowrap; }
.tg-cart:hover { text-decoration: none; }
.tg-cart__count, .tg-cart__total { font-family: var(--tg-font-display); font-weight: 700; font-size: 13px; }
.tg-cart__total { color: var(--tg-accent-bright); }
.tg-cart__total .woocommerce-Price-amount { color: inherit; }

/* ── Single Tickera event surface (WS4) ── */
.tg-event__hero { padding: 8px 0 28px; border-bottom: 1px solid var(--tg-line-soft); margin-bottom: 28px; }
.tg-event__eyebrow { display: inline-block; font-family: var(--tg-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-accent); margin-bottom: 10px; }
.tg-event__title { font-family: var(--tg-font-display); font-weight: 900; letter-spacing: -0.02em; margin: 0 0 18px; }
.tg-event__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.tg-event__meta li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--tg-muted); }
.tg-event__ico { flex: none; color: var(--tg-meta); }   /* inline SVG — never shrink, and sit a step back from the text */
.tg-event__tickets-title { font-family: var(--tg-font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 16px; }
.tg-ticket-row { display: flex; align-items: center; gap: 20px; padding: 18px 22px; background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius); box-shadow: var(--tg-shadow-card); margin-bottom: 12px; }
.tg-ticket-row__info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.tg-ticket-row__name { font-family: var(--tg-font-display); font-weight: 700; font-size: 15.5px; color: var(--tg-ink); }
.tg-ticket-row__desc { font-size: 13px; color: var(--tg-meta); }
.tg-ticket-row__price { font-family: var(--tg-font-display); font-weight: 900; font-size: 20px; color: var(--tg-ink); white-space: nowrap; }
.tg-ticket-row__price del { color: var(--tg-meta); font-weight: 600; font-size: 15px; }
.tg-ticket-row__add { flex: 0 0 auto; white-space: nowrap; }
.tg-event__body { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tg-line-soft); }
@media (max-width: 560px) {
  .tg-ticket-row { flex-wrap: wrap; gap: 12px; }
  .tg-ticket-row__info { flex: 1 1 100%; }
  .tg-ticket-row__add { flex: 1 1 100%; text-align: center; }
}

/* ── Footer (dark) ── */
.tg-site-footer { background: var(--tg-navy-deep); margin-top: auto; }   /* …and anchor to the bottom on short pages */
.tg-site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 32px 48px; padding-top: clamp(44px, 5.5vw, 68px); padding-bottom: clamp(32px, 4vw, 48px); }
.tg-brand--footer { display: inline-block; font-size: 15px; line-height: 1.15; color: var(--tg-on-dark); }   /* inline-block + tight leading keeps TEAMGLOBAL on one line above the tagline */
.tg-brand--footer span { color: var(--tg-on-navy-soft); }
.tg-brand--footer .tg-brand__logo { height: 40px; }   /* a touch larger than the header; footer is always the dark surface, so the white mark */
.tg-site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.tg-site-footer__email { display: inline-flex; align-items: center; gap: 9px; color: var(--tg-on-navy-soft); font-size: 14px; }
.tg-site-footer__email:hover { color: var(--tg-on-dark); text-decoration: none; }
.tg-site-footer__social { display: flex; gap: 12px; }
.tg-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; color: var(--tg-on-navy-soft); transition: color .15s, border-color .15s; }
.tg-social:hover { border-color: var(--tg-accent-bright); color: var(--tg-accent-bright); text-decoration: none; }
.tg-site-footer__menu { display: flex; flex-direction: column; gap: 12px; }
.tg-site-footer__menu-title { font-family: var(--tg-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tg-on-dark); margin-bottom: 4px; }
.tg-site-footer__menu a { color: var(--tg-on-navy-soft); font-size: 14px; }
.tg-site-footer__menu a:hover { color: var(--tg-accent-bright); text-decoration: none; }
.tg-site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.tg-site-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 20px; padding-bottom: 20px; }
.tg-site-footer__legal { font-size: 12.5px; color: var(--tg-on-navy-soft); opacity: 0.72; line-height: 1.5; }
.tg-site-footer__legal p { margin: 0; }
.tg-site-footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.tg-site-footer__links a { font-family: var(--tg-font-display); font-weight: 600; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tg-on-navy-soft); }
.tg-site-footer__links a:hover { color: var(--tg-accent-bright); text-decoration: none; }
@media (max-width: 640px) { .tg-site-footer__bottom-inner { flex-direction: column; align-items: flex-start; } }

/* Content rhythm — vertical padding ONLY (top/bottom longhand): .tg-main shares its
   element with .tg-container (page.php/woocommerce.php), and the `32px 0 …` shorthand
   was zeroing the container's responsive side gutter → flush content on mobile. */
.tg-main { padding-top: 32px; padding-bottom: clamp(56px, 8vw, 88px); }   /* generous gap before the footer */
h1, h2, h3, h4, h5, h6 { font-family: var(--tg-font-display); }
h1 { font-size: clamp(24px, 4vw, 30px); line-height: 1.2; margin: 0 0 12px; }   /* §74 Heading/30, fluid */
h2 { font-size: clamp(20px, 2.5vw, 22px); margin: 28px 0 10px; }
.tg-lede { color: var(--tg-muted); font-size: 18px; }

/* Buttons (Woo + theme) — primary by default; display font carries letter-spacing (allowed) */
.tg-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce .button {
  display: inline-block; background: var(--tg-accent); color: var(--tg-on-dark) !important; border: 0;
  padding: 13px 22px; border-radius: var(--tg-radius-btn); cursor: pointer; text-decoration: none;
  font-family: var(--tg-font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
}
.tg-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--tg-accent-hover); }
/* Cobalt is the only primary — override Woo's default `.alt` (purple), which otherwise wins on specificity */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button {
  background: var(--tg-accent); color: var(--tg-on-dark);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover, .woocommerce .single_add_to_cart_button:hover {
  background: var(--tg-accent-hover); color: var(--tg-on-dark);
}

/* Button variants */
.tg-btn--secondary { background: var(--tg-accent-ink); }
.tg-btn--outline {
  background: var(--tg-bg); color: var(--tg-accent-ink) !important;
  border: 1.5px solid var(--tg-line);
}
.tg-btn--outline:hover { background: var(--tg-surface); }
.tg-btn--link {
  background: transparent; color: var(--tg-link) !important;
  padding-left: 0; padding-right: 0;
}
.tg-btn--link::after { content: " \2192"; }  /* trailing arrow → */
.tg-btn--link:hover { background: transparent; text-decoration: underline; }

/* Catalog grid — explicit 3→2→1 columns; overrides Woo's float layout.
   !important beats WooCommerce's default + small-screen float/width/margin rules. */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
  list-style: none; margin: 0 !important; padding: 0 !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; }   /* drop Woo clearfix */
.woocommerce ul.products li.product {
  float: none !important; clear: none !important; width: auto !important; margin: 0 !important;
}
@media (max-width: 980px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .woocommerce ul.products { grid-template-columns: minmax(0, 1fr); } }
.woocommerce ul.products li.product img { border-radius: 6px; }
.woocommerce .price { color: var(--tg-ink); font-weight: 700; }
.woocommerce ul.products { clear: both; }   /* sit below the floated result-count/ordering row */

/* Shop toolbar — result count + ordering select (skin Woo's default <select>) */
.woocommerce .woocommerce-result-count { color: var(--tg-muted); font-size: 13.5px; margin: 0 0 18px; }
.woocommerce .woocommerce-ordering { margin: 0 0 18px; }
.woocommerce .woocommerce-ordering select, .woocommerce select.orderby {
  font-family: var(--tg-font); font-size: 14px; font-weight: 600; color: var(--tg-ink);
  background-color: var(--tg-bg); border: 1.5px solid var(--tg-line); border-radius: var(--tg-radius-input);
  padding: 10px 40px 10px 16px; cursor: pointer; line-height: 1.2;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.woocommerce .woocommerce-ordering select:focus, .woocommerce select.orderby:focus { outline: 0; border-color: var(--tg-accent); box-shadow: var(--tg-shadow-focus); }

/* Cards (member surfaces / banners) */
.tg-card { background: var(--tg-card); border: 1px solid var(--tg-line); border-radius: var(--tg-radius); padding: 18px 20px; box-shadow: var(--tg-shadow-card); }
.tg-card--md { box-shadow: var(--tg-shadow-md); }
.tg-card--glow { box-shadow: var(--tg-shadow-glow); }
.tg-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tg-banner { background: var(--tg-surface); border: 1px solid var(--tg-line); border-radius: var(--tg-radius); padding: 20px 22px; }

/* (The old light "landing skeleton" .tg-hero lived here. It was orphaned — no template
   rendered it — and its text-align:center leaked into the real hero below, centering the
   display title. Removed rather than renamed: dead rules that collide are worse than none.) */

/* Responsive — header wraps + tighter rhythm on small screens (grids handle columns) */
@media (max-width: 600px) {
  .tg-site-header__inner { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; row-gap: 10px; }
  .tg-search { order: 3; flex-basis: 100%; max-width: none; }   /* search to its own row */
  /* compact header chrome so brand + actions share one row on phones */
  .tg-brand { font-size: 17px; }
  .tg-brand .tg-brand__logo { height: 30px; }   /* slightly smaller on phones */
  .tg-brand--footer .tg-brand__logo { height: 34px; }
  .tg-header-actions { gap: 10px; }
  .tg-header-link { font-size: 13px; }
  .tg-cart { padding: 8px 12px; gap: 7px; }
  .tg-cart__icon { width: 15px; height: 15px; }
  .tg-cart__count, .tg-cart__total { font-size: 12px; }
  .tg-main { padding-top: 24px; padding-bottom: 24px; }   /* longhand — see .tg-main note */
  .tg-subband__action { align-items: stretch; width: 100%; }     /* full-width CTA on mobile */
}

/* Badges / pills — body font (Hanken), NO letter-spacing */
.tg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--tg-radius-pill);
  font-family: var(--tg-font); font-weight: 600; font-size: 13px; line-height: 1;
}
.tg-badge--live { background: var(--tg-red); color: var(--tg-on-dark); }
.tg-badge--live::before { content: ""; width: 7px; height: 7px; border-radius: var(--tg-radius-pill); background: var(--tg-on-dark); }
.tg-badge--format { background: var(--tg-accent-tint); color: var(--tg-link); }
.tg-badge--active { background: var(--tg-success-tint); color: var(--tg-success); }
.tg-badge--active::before { content: ""; width: 7px; height: 7px; border-radius: var(--tg-radius-pill); background: var(--tg-success); }
.tg-badge--presencial { background: var(--tg-navy); color: var(--tg-on-dark); }   /* catalog format pill — Presencial */

/* Catalog card — format pills above the product title (injected via Woo hook) */
.woocommerce ul.products li.product .tg-card-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }

/* Form fields — body font (Hanken), NO letter-spacing */
.tg-label { display: block; font-family: var(--tg-font); font-weight: 600; font-size: 13px; color: var(--tg-ink-strong); margin: 0 0 6px; }
.tg-field { margin: 0 0 16px; }
.tg-field input, .tg-input {
  width: 100%; font-family: var(--tg-font); font-size: 15px; color: var(--tg-ink);
  background: var(--tg-bg); border: 1.5px solid var(--tg-accent); border-radius: var(--tg-radius-input);
  padding: 10px 12px;
}
.tg-field input:focus, .tg-input:focus { outline: 0; box-shadow: var(--tg-shadow-focus); }
.tg-field__help { display: block; font-family: var(--tg-font); font-size: 12.5px; color: var(--tg-meta); margin: 8px 0 0; }

/* Utility — cobalt radial glow for dark navy surfaces */
.tg-radial-glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 27%, transparent), transparent 66%); }

/* WS7 — "Your membership" panel on the My Account dashboard */
.tg-membership-panel {
  background: var(--tg-surface);
  border: 1px solid var(--tg-line);
  border-radius: var(--tg-radius);
  padding: var(--tg-space);
  margin: 0 0 calc(var(--tg-space) * 1.5);
}
.tg-membership-panel__title { margin: 0 0 12px; font-size: 16px; }
.tg-membership-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tg-space); }
.tg-membership-grid li { display: flex; flex-direction: column; gap: 4px; }
.tg-membership-grid .tg-k { color: var(--tg-muted); font-size: 12px; text-transform: uppercase; }
.tg-membership-grid .tg-v { font-weight: 600; }
.tg-tier-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--tg-navy); color: var(--tg-on-dark); font-size: 13px; font-weight: 600;
}
.tg-tier-badge.tg-tier--none { background: var(--tg-line); color: var(--tg-muted); }
@media (max-width: 768px) { .tg-membership-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tg-membership-grid { grid-template-columns: 1fr; } }

/* WS7 — Membership account tab detail */
.tg-membership-detail-title { margin: var(--tg-space) 0 8px; font-size: 15px; }
.tg-membership-detail { width: 100%; border-collapse: collapse; }
.tg-membership-detail th, .tg-membership-detail td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--tg-line); }
.tg-membership-detail th { color: var(--tg-muted); font-weight: 600; width: 40%; }
.tg-membership-note { color: var(--tg-muted); font-size: 13px; margin-top: var(--tg-space); }

/* ════════════════════════════════════════════════════════════════════════
   STOREFRONT — landing sections (front-page) + catalog product card
   ════════════════════════════════════════════════════════════════════════ */

/* Eyebrow label */
.tg-eyebrow { font-family: var(--tg-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tg-muted); margin-bottom: 12px; }
.tg-eyebrow--accent { color: var(--tg-accent-bright); }
.tg-accent-dot { color: var(--tg-accent-bright); }

/* On-art pills (Archivo, white chip over dark thumbs/posters) */
.tg-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tg-font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--tg-radius-pill); background: var(--tg-on-dark); color: var(--tg-navy); white-space: nowrap; }
.tg-pill--virtual { color: var(--tg-accent); }
.tg-pill--presencial { color: var(--tg-accent-ink); }
.tg-pill--live { background: var(--tg-red); color: var(--tg-on-dark); }
.tg-pill--live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tg-on-dark); }

/* ── DESTACADOS — feature banner tiles (Customizer art slots for Ludwig; mobile = manual swipe rail, NO autoplay) ── */
/* ── HERO CAROUSEL ───────────────────────────────────────────────────────────────────
   Two slides, MANUAL paging only (swipe / arrows / dots / keyboard). No autoplay: decision #6
   rejected the auto-rotating hero, and that is the part being honoured. CSS scroll-snap does
   the paging, so it still swipes with JS disabled. */
/* No vertical padding on the section: the track (and a full-bleed background slide) fill the
   whole carousel top-to-bottom, with no navy frame. The breathing room moves onto the card
   slides' own content (below), and the dots float as an overlay instead of taking a strip. */
.tg-hcar { position: relative; overflow: hidden; background: var(--tg-navy); padding: 0; }
.tg-hcar__halo {
  position: absolute; top: -28%; right: -8%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 38%, transparent), transparent 66%);
  pointer-events: none;
}
.tg-hcar__halo.is-live { background: radial-gradient(circle, color-mix(in srgb, var(--tg-red) 30%, transparent), transparent 66%); }
.tg-hcar__track {
  position: relative; display: flex; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  /* Uniform height: the script sets the track to the TALLEST slide and slides stretch to fill
     it, so paging never makes the carousel jump and a full-bleed background slide fills the same
     box as the card slides. Without JS the track falls back to the tallest slide anyway. overflow-y
     stays hidden because overflow-x:auto would otherwise compute it to auto; with stretch no slide
     exceeds the track height, so there is nothing to scroll vertically. */
  align-items: stretch;
  /* NO height transition. Measured: with `transition: height` the element ignored an explicit
     height entirely — inline said 972px, computed stayed 476px, even with !important; removing
     the transition made it resolve immediately. Animating height is layout-thrashing anyway,
     so the height snaps when paging. */
}
.tg-hcar__track::-webkit-scrollbar { display: none; }
.tg-hcar__track:focus-visible { outline: 3px solid var(--tg-accent); outline-offset: -3px; }
/* flex column + centre so a slide shorter than the uniform track height (Amway, once the
   carousel sizes to the tallest slide) centres its copy vertically instead of pinning it to the
   top, and the full-bleed background fills the whole box. */
.tg-hcar__slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* Card slides carry the vertical breathing room themselves now that the section has no padding;
   the full-bleed slide is excluded so its image reaches the very top and bottom. Extra bottom
   padding clears the overlaid dots. */
.tg-hcar__slide:not(.tg-hcar__slide--bg) .tg-hero__inner { padding-block: clamp(30px, 5vh, 60px) clamp(34px, 5vh, 52px); }
/* Nav — deliberately quiet. Carousel controls are wayfinding, not content: they should be
   findable and never compete with the slide. So no filled circles, no borders — bare chevrons
   and small dots, low-contrast until hover/active.
   Kept honest for a11y (W3C APG carousel pattern + WCAG 2.5.8 target size): each control keeps
   a >=24px hit area via padding even though the ink is ~10px, dots are a real tablist, arrows
   disable at the ends, and everything is keyboard reachable with a visible focus ring. */
.tg-hcar__nav { position: absolute; left: 0; right: 0; bottom: clamp(10px, 1.6vh, 16px); z-index: 3; display: flex; align-items: center; gap: 6px; justify-content: center; }
/* Flechas a los lados (cliente, 2026-08-05). Antes eran dos glifos de 30px bajo el carrusel:
   se veían poco y en móvil quedaban por debajo del objetivo táctil mínimo. Ahora son botones
   sólidos, centrados verticalmente sobre la diapositiva.
   44px es el mínimo táctil recomendado; el disco lleva fondo y borde para que se lea como botón
   sobre el arte, que puede ser claro u oscuro según el flyer. */
.tg-hcar__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--tg-navy-deep) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--tg-on-dark) 22%, transparent);
  border-radius: 50%; color: var(--tg-on-dark);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.tg-hcar__arrow--prev { left: clamp(8px, 2vw, 22px); }
.tg-hcar__arrow--next { right: clamp(8px, 2vw, 22px); }
.tg-hcar__arrow:hover:not(:disabled) {
  background: var(--tg-accent);
  border-color: var(--tg-accent);
  transform: translateY(-50%) scale(1.06);
}
.tg-hcar__arrow:disabled { opacity: .28; cursor: default; }
.tg-hcar__arrow:focus-visible { outline: 2px solid var(--tg-accent-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .tg-hcar__arrow, .tg-hcar__arrow:hover:not(:disabled) { transition: none; transform: translateY(-50%); }
}
/* En pantallas estrechas el arte llega casi al borde: las flechas se meten dentro para no
   colgar fuera, y se mantienen en 44px porque es justo donde más se usan. */
@media (max-width: 600px) {
  .tg-hcar__arrow--prev { left: 6px; }
  .tg-hcar__arrow--next { right: 6px; }
}
.tg-hcar__dots { display: flex; align-items: center; gap: 5px; }
.tg-hcar__dot {
  width: 22px; height: 22px; padding: 0; cursor: pointer; border: 0; background: none;
  display: grid; place-items: center;
}
.tg-hcar__dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--tg-on-dark) 30%, transparent);
  transition: width .18s ease, background .18s ease;
}
.tg-hcar__dot.is-active::before { width: 16px; border-radius: 999px; background: color-mix(in srgb, var(--tg-on-dark) 78%, transparent); }
.tg-hcar__dot:hover::before { background: color-mix(in srgb, var(--tg-on-dark) 55%, transparent); }
.tg-hcar__dot:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 1px; border-radius: 50%; }
.tg-hero__live--soon { background: var(--tg-red); }
@media (prefers-reduced-motion: reduce) { .tg-hcar__track { scroll-behavior: auto; } }

/* ── HERO ────────────────────────────────────────────────────────────────────────────
   Owns the first screen. Type on clean navy, art in its own panel — a title laid over a
   busy event flyer competes with the artwork and both lose. */
.tg-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; }
.tg-hero__copy { display: grid; justify-items: start; gap: 13px; text-align: left; }
/* Live/upcoming badge — real dates only, never decorative (red = urgency, design system). */
.tg-hero__live {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--tg-red); color: #fff; border-radius: 999px; padding: 6px 13px;
  font-family: var(--tg-font-display); font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.tg-hero__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
/* Sized to sit ON the column, not to fill it: three ragged lines of 80px type read as a wall,
   not a headline. Capped at 62px and balanced so it breaks evenly. */
/* Three size tiers, picked in front-page.php by title length. The 15ch/62px original was
   tuned against short test titles; the real catalogue averages 43 characters and reaches 72,
   which wrapped to five lines and buried the CTA below the fold. Wider measure + smaller type
   as titles grow keeps the hero to ~2-3 lines at any realistic length, without shrinking the
   short ones that the design was built around. */
.tg-hero__title {
  font-family: var(--tg-font-display); font-weight: 900;
  font-size: clamp(32px, 4.4vw, 62px); line-height: 0.94; letter-spacing: -0.035em;
  text-transform: uppercase; color: var(--tg-on-dark); margin: 0;
  text-wrap: balance; max-width: 15ch;
}
/* 37-54 chars — most event titles land here. */
.tg-hero__title--long  { font-size: clamp(29px, 3.4vw, 46px); max-width: 23ch; }
/* 55+ chars — the subscription/OE names. */
.tg-hero__title--xlong { font-size: clamp(25px, 2.8vw, 38px); max-width: 27ch; letter-spacing: -0.025em; }
.tg-hero__dot { color: var(--tg-accent-bright); }
.tg-hero__blurb { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--tg-on-navy-muted); margin: 0; max-width: 46ch; }
.tg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* The CTA glows like the halo. Red is reserved for genuine urgency (design system), so it
   only turns red when the event is actually live today — never as decoration. */
.tg-hero__cta { box-shadow: var(--tg-shadow-glow); }
.tg-btn--ghost {
  background: color-mix(in srgb, var(--tg-on-dark) 8%, transparent); color: var(--tg-on-dark);
  border: 1.5px solid color-mix(in srgb, var(--tg-on-dark) 22%, transparent);
}
.tg-btn--ghost:hover { background: color-mix(in srgb, var(--tg-on-dark) 14%, transparent); color: var(--tg-on-dark); }
/* Facts row — the old stats rhythm, real data only. Left-aligned columns on a fixed rhythm
   so the three read as a row, not as three things that happen to be near each other. */
/* Row gap and column gap are set SEPARATELY. With a single `gap`, the 52px meant for spacing
   columns apart also became the vertical gap — and because the real venue string ("Holiday Inn
   7707 NW 103rd St, Hialeah Gardens, FL 33016", 54 chars) forces every fact onto its own row,
   the facts list stretched down the page with 52px voids between each line. */
.tg-hero__facts { display: flex; flex-wrap: wrap; gap: 16px clamp(20px, 2.6vw, 40px); margin: clamp(10px, 1.6vh, 20px) 0 0; padding-top: clamp(14px, 2vh, 22px); border-top: 1px solid color-mix(in srgb, var(--tg-on-dark) 14%, transparent); width: 100%; max-width: 36rem; }
/* Short facts (date, price) sit side by side; a long venue takes the full row and wraps
   instead of running off the edge. */
.tg-hero__fact { text-align: left; min-width: 0; flex: 0 1 auto; }
.tg-hero__fact--wide { flex: 1 1 100%; }
.tg-hero__fact dt { font-family: var(--tg-font); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tg-accent-bright); margin-bottom: 3px; }
/* NO blanket nowrap. It was added to stop the price splitting into "$" / "10", but it also
   applied to the venue, which then ran past the container edge instead of wrapping. The price
   keeps its own nowrap on the line below — that is the only value that must never break. */
.tg-hero__fact dd { font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.25; color: var(--tg-on-dark); margin: 0; overflow-wrap: break-word; }
/* The currency symbol is its own <span>; without this the amount wraps to "$" / "10". */
.tg-hero__fact dd .woocommerce-Price-amount { font-family: inherit; white-space: nowrap; }
.tg-hero__fact span { display: block; font-size: 12.5px; color: var(--tg-on-navy-muted); margin-top: 2px; }
/* Art panel — the flyer, WHOLE. No fixed aspect-ratio and no cover-crop: these are event
   flyers whose entire point is the line-up, and cropping them to a 4:5 slot cut people out of
   frame. The panel takes the artwork's own proportions instead. */
.tg-hero__art { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.45), var(--tg-shadow-glow); background: var(--tg-navy-deep); }
.tg-hero__img { display: block; width: 100%; height: auto; }
.tg-hero__art--empty { display: grid; place-items: center; padding: 30px; }

/* Slide con fondo a sangre (Amway Oficial): el banner COMPLETO hace de fondo del slide.
   Su mitad-izquierda navy coincide con el navy del carrusel (mismo --tg-navy), así que la
   imagen se funde con el fondo; un degradado navy→transparente sobre la izquierda garantiza
   el contraste del texto y disimula la costura. Solo escritorio: en móvil (media query de
   abajo) el slide vuelve a la tarjeta con la imagen ya recortada. */
@media (min-width: 901px) {
  .tg-hcar__slide--bg {
    background-color: var(--tg-navy);
    /* The image COVERS the whole slide (no letterbox). Only the LEFT edge is shaded, for text
       contrast. No top/bottom shade on purpose: the image is full-bleed now, so a top/bottom
       navy fade would just band the edges — and because the top edge sits over dark hair and the
       bottom over a bright white shirt, an identical fade reads far heavier at the bottom. Letting
       both edges meet the header / next section directly keeps them symmetric. */
    background-image:
      linear-gradient(90deg, var(--tg-navy) 6%, rgba(12, 30, 62, 0) 36%),
      url(assets/images/hero-educacion-full.jpg);
    background-repeat: no-repeat;
    background-position: center, right top;
    background-size: cover;
  }
  .tg-hcar__slide--bg .tg-hero__art { display: none; }
}
.tg-hero__word { font-family: var(--tg-font-display); font-weight: 900; font-size: clamp(28px, 3vw, 44px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: var(--tg-on-dark); text-align: center; }

@media (max-width: 900px) {
  .tg-hero { min-height: 0; padding: clamp(28px, 5vh, 48px) 0; }
  /* Stacked: align to the TOP. Centred, a slide with less copy floats with space above and
     below and reads as a mistake; top-aligned, the leftover sits under the content as padding. */
  .tg-hero__inner { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .tg-hero__art { aspect-ratio: 16 / 10; order: -1; }   /* art first on mobile — it is the hook */
  .tg-hero__facts { gap: 20px; }
  /* Mobile is adaptive-height (see hero-carousel.js fitHeight): the track sizes to the ACTIVE
     slide, and align-items:flex-start keeps every slide at its natural height instead of being
     stretched to the tallest — which is what left the navy gap under the short Amway slide. */
  .tg-hcar__track { align-items: flex-start; }
  .tg-hcar__slide { justify-content: flex-start; }
  /* Every slide shows a card on mobile (the full-bleed background is desktop-only), so give the
     --bg slide the same top breathing room the card slides already have. */
  .tg-hcar .tg-hcar__slide .tg-hero__inner { padding-block: clamp(20px, 4vh, 34px) clamp(26px, 5vh, 42px); }
  .tg-hcar__arrow { width: 38px; height: 38px; }   /* smaller on tablets */
}
@media (max-width: 600px) {
  /* Phones: swipe is the primary gesture and the dots already show position, so the edge arrows
     are redundant and were overlapping the wide title. Best practice is to drop them here. */
  .tg-hcar__arrow { display: none; }
}

/* ── Section heads ── */
.tg-section { padding-top: clamp(44px, 6vw, 64px); }
.tg-section--catalog { padding-bottom: clamp(8px, 2vw, 16px); }
.tg-section__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.tg-section__title { font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.03em; text-transform: uppercase; color: var(--tg-ink); margin: 0; }
.tg-section__title--live { display: inline-flex; align-items: center; gap: 10px; }
.tg-section__title--live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tg-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tg-red) 15%, transparent); animation: tg-live-glow 2.4s ease-in-out infinite; }

/* Live-dot illumination (client ask) — halo pulse on events happening TODAY only
   (front-page.php sets .tg-live-card--soon from $tg_ev['today']); softer static glow
   on the rest. When nothing is on today, nothing pulses — that is intended. */
@keyframes tg-live-glow {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tg-red) 15%, transparent), 0 0 10px 2px color-mix(in srgb, var(--tg-red) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tg-red) 24%, transparent), 0 0 20px 6px color-mix(in srgb, var(--tg-red) 65%, transparent); }
}
.tg-live-card__time .tg-dot { box-shadow: 0 0 6px 1px color-mix(in srgb, var(--tg-red) 55%, transparent); }
.tg-live-card--soon .tg-live-card__time .tg-dot { animation: tg-live-glow 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tg-section__title--live::before, .tg-live-card--soon .tg-live-card__time .tg-dot { animation: none; }
}
.tg-section__link { font-family: var(--tg-font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tg-link); }
.tg-section__more { margin-top: 28px; text-align: center; }

/* ── Filter chips ── */
.tg-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tg-chips--shop { margin: 0 0 24px; }
.tg-chip { display: inline-flex; align-items: center; min-height: 38px; font-family: var(--tg-font); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: var(--tg-radius-pill); background: var(--tg-bg); color: var(--tg-muted); border: 1.5px solid var(--tg-line-input); white-space: nowrap; }
.tg-chip:hover { color: var(--tg-ink); text-decoration: none; border-color: var(--tg-line); }
.tg-chip.is-active { background: var(--tg-accent); color: var(--tg-on-dark); border-color: var(--tg-accent); }

/* ── Próximos en vivo ── */
.tg-live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tg-live-card { background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: 16px; padding: 20px; display: flex; gap: 16px; align-items: center; }
.tg-live-card__date { width: 54px; height: 54px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.tg-live-card__day { font-family: var(--tg-font-display); font-weight: 800; font-size: 18px; line-height: 1; }
.tg-live-card__mon { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.tg-live-card:hover { text-decoration: none; }   /* the card is an <a>; the global a:hover underline would score every string in it */
.tg-live-card__body { min-width: 0; }
.tg-live-card__time { display: inline-flex; align-items: center; gap: 5px; font-family: var(--tg-font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-red-text); margin-bottom: 5px; }
.tg-live-card__time .tg-dot { width: 5px; height: 5px; }
/* time/title/host are <span>s inside a link — without an explicit display they stay
   inline and run together on ONE line ("Hoy 7:00 PMConvención…Miami"), and the host's
   margin-top is dropped on an inline box. */
.tg-live-card__title { display: block; font-family: var(--tg-font-display); font-weight: 700; font-size: 15px; color: var(--tg-ink); line-height: 1.2; }
.tg-live-card__host { display: block; font-size: 12.5px; color: var(--tg-meta); margin-top: 3px; }

/* ── Catalog product card (overrides the lean Woo grid item) ── */
.woocommerce ul.products li.product.tg-product-card,
ul.products li.product.tg-product-card { position: relative; background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--tg-shadow-card); padding: 0; }
.tg-product-card__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.tg-thumb__glow { position: absolute; top: -40px; right: -30px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; }
.tg-product-card .tg-card-pills { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; margin: 0; }
.tg-thumb__word { position: absolute; left: 18px; bottom: 16px; right: 18px; font-family: var(--tg-font-display); font-weight: 900; font-size: 22px; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: inherit; }
/* Real art (event flyers are square; the frame crops center) — pills stay on top. */
.tg-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tg-thumb--photo { background: var(--tg-navy); }
.tg-product-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tg-product-card__eyebrow { font-family: var(--tg-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tg-meta); margin-bottom: 7px; }
/* The title is an <h2> wrapping the card's ONLY anchor; ::after stretches that anchor
   over the whole card so the thumb stays clickable without a second link. */
.tg-product-card__title { font-family: var(--tg-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 8px; }
.tg-product-card__title a { color: var(--tg-ink); }
.tg-product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tg-product-card__title a:hover { text-decoration: none; color: var(--tg-accent-ink); }
/* keep the add-to-cart button above the stretched overlay so it stays independently clickable */
.tg-product-card__foot { position: relative; z-index: 2; }
.tg-product-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tg-meta); margin-bottom: 16px; }
.tg-product-card__meta .tg-star { color: var(--tg-link); font-weight: 700; }
.tg-product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tg-product-card__price { font-family: var(--tg-font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--tg-ink); }
.tg-product-card__price .woocommerce-Price-amount { color: inherit; }
.tg-product-card__price del { color: var(--tg-meta); font-weight: 600; font-size: 15px; }
.tg-product-card__foot .button, .woocommerce .tg-product-card__foot a.button { margin: 0; padding: 11px 16px; font-size: 12px; }

/* Price-change countdown (urgency) */
.tg-countdown { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0 0 12px; padding: 6px 11px; border-radius: var(--tg-radius-pill); font-family: var(--tg-font); font-weight: 600; font-size: 12.5px; color: var(--tg-red-text); background: var(--tg-red-tint); }
.tg-countdown::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-red-text); flex: none; }
.tg-countdown__time { font-variant-numeric: tabular-nums; }
.tg-countdown--ended { color: var(--tg-muted); background: var(--tg-surface); }
.tg-countdown--ended::before { background: var(--tg-muted); }
.tg-countdown--block { display: flex; margin: 0 0 20px; font-size: 13px; }   /* buy box variant */

/* Thumb / date-chip palettes (token-driven) */
.tg-thumb--1 { background: var(--tg-navy); color: var(--tg-on-dark); }
.tg-thumb--1 .tg-thumb__glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 33%, transparent), transparent 68%); }
.tg-thumb--2 { background: var(--tg-accent); color: var(--tg-on-dark); }
.tg-thumb--2 .tg-thumb__glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent-bright) 47%, transparent), transparent 68%); }
.tg-thumb--3 { background: var(--tg-accent-tint); color: var(--tg-accent-ink); }
.tg-thumb--3 .tg-thumb__glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 13%, transparent), transparent 68%); }
.tg-thumb--4 { background: var(--tg-accent-ink); color: var(--tg-on-dark); }
.tg-thumb--4 .tg-thumb__glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 27%, transparent), transparent 68%); }
.tg-thumb--5 { background: linear-gradient(150deg, var(--tg-accent-ink), var(--tg-navy)); color: var(--tg-on-dark); }
.tg-thumb--5 .tg-thumb__glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 40%, transparent), transparent 68%); }
.tg-thumb--6 { background: var(--tg-navy); color: var(--tg-on-dark); }
.tg-thumb--6 .tg-thumb__glow { background: radial-gradient(circle, color-mix(in srgb, var(--tg-red) 33%, transparent), transparent 68%); }

/* ── Subscription band ── */
.tg-subband-wrap { margin-top: clamp(40px, 6vw, 56px); margin-bottom: clamp(56px, 8vw, 80px); }
.tg-subband { position: relative; overflow: hidden; background: var(--tg-navy); border-radius: 24px; padding: clamp(32px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.tg-subband__glow { position: absolute; top: -100px; left: -60px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 33%, transparent), transparent 66%); pointer-events: none; }
.tg-subband__copy { position: relative; max-width: 42ch; }
.tg-subband__title { font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; color: var(--tg-on-dark); margin: 0 0 12px; }
.tg-subband__text { font-size: 16px; color: var(--tg-on-navy-muted); margin: 0; line-height: 1.5; }
.tg-subband__action { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tg-subband__price { font-family: var(--tg-font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; color: var(--tg-on-dark); }   /* wraps Woo's real get_price_html() */
.tg-subband__price .subscription-details { font-family: var(--tg-font); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--tg-on-navy-soft); }

/* ════════════════════════════════════════════════════════════════════════
   COURSE DETAIL (single product / PDP)
   ════════════════════════════════════════════════════════════════════════ */
.tg-breadcrumb { font-size: 13px; color: var(--tg-meta); margin: 4px 0; }
.tg-breadcrumb a { color: var(--tg-meta); }
.tg-breadcrumb a:hover { color: var(--tg-ink); text-decoration: none; }
.tg-breadcrumb__sep { margin: 0 8px; }
.tg-breadcrumb__current { color: var(--tg-muted); }

/* min() floor, not a bare 320px: the container's clamp(24px,5vw,48px) gutters leave only
   312px inside a 360px viewport, so a hard 320px minimum overflowed the page horizontally
   on most phones (WCAG 1.4.10 Reflow). min(320px, 100%) collapses to the available width. */
.tg-pdp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 4vw, 44px); align-items: start; padding: 20px 0 clamp(40px, 6vw, 56px); }
@media (min-width: 900px) { .tg-pdp { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); } }

.tg-pdp__poster { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 20px; box-shadow: var(--tg-shadow-lg); display: flex; flex-direction: column; justify-content: space-between; padding: 30px; }
.tg-pdp__poster .tg-thumb__glow { top: -60px; right: -50px; width: 280px; height: 280px; }
.tg-pdp__poster .tg-card-pills { position: relative; display: flex; gap: 8px; }
.tg-pdp__poster-word { position: relative; font-family: var(--tg-font-display); font-weight: 900; font-size: clamp(30px, 5vw, 46px); line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; color: var(--tg-on-dark); }


.tg-pdp__desc { padding-top: 24px; }
.tg-pdp__desc p { font-size: 16px; line-height: 1.65; color: var(--tg-ink-soft); margin: 0 0 24px; max-width: 62ch; }

/* optional event video (only rendered when _tg_event_video_url is set) */
/* ── PDP media carousel — flyer + speaker video + gallery in one swipeable strip ──────
   Manual only: CSS scroll-snap does the paging, JS only syncs the thumbnails. Falls back
   to a plain horizontal scroller with no JS, and to a single static frame with one slide. */
.tg-media { position: relative; }
.tg-media__viewport {
  display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: 20px; box-shadow: var(--tg-shadow-lg); background: var(--tg-navy);
  scrollbar-width: none;
}
.tg-media__viewport::-webkit-scrollbar { display: none; }
.tg-media__viewport:focus-visible { outline: 3px solid var(--tg-accent); outline-offset: 3px; }
.tg-media__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16 / 10; }
.tg-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-media__frame { position: absolute; inset: 0; }
.tg-media__frame iframe, .tg-media__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Self-hosted video (an upload, not a YouTube link) comes from wp_video_shortcode(), which
   wraps the <video> in .wp-video/.mejs-container carrying INLINE width/height from the file's
   own dimensions. Left alone that renders a fixed-size player floating in the slide, so the
   wrappers are forced to fill the frame — !important because MediaElement writes the inline
   sizes at runtime and they would otherwise win. */
.tg-media__frame .wp-video,
.tg-media__frame .mejs-container,
.tg-media__frame .mejs-overlay,
.tg-media__frame .mejs-poster { width: 100% !important; height: 100% !important; max-width: none; background: var(--tg-navy); }
.tg-media__frame .mejs-mediaelement video { object-fit: contain; }
/* Pills sit over the strip, not inside a slide, so they don't scroll away. */
.tg-media__pills { position: absolute; top: 18px; left: 18px; display: flex; gap: 8px; z-index: 2; pointer-events: none; }

/* Video slide when oEmbed can't run (outbound blocked) — poster + play, opens in a new tab. */
.tg-media__video-fallback { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; background: var(--tg-navy); }
.tg-media__video-fallback .tg-media__img { position: absolute; inset: 0; opacity: 0.45; }
.tg-media__play {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: var(--tg-accent); box-shadow: var(--tg-shadow-glow);
  display: grid; place-items: center;
}
.tg-media__play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 18px solid var(--tg-on-dark);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.tg-media__play--sm { width: 26px; height: 26px; box-shadow: none; }
.tg-media__play--sm::after { margin-left: 2px; border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
.tg-media__video-label {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--tg-font-display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--tg-on-dark);
}

/* Thumbnails — the "pasas la imagen" affordance made explicit. */
.tg-media__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tg-media__thumbs::-webkit-scrollbar { display: none; }
.tg-media__thumb {
  flex: 0 0 auto; width: 74px; height: 56px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--tg-line); border-radius: 10px; overflow: hidden;
  background: var(--tg-card); transition: border-color .16s ease, transform .16s ease;
}
.tg-media__thumb:hover { transform: translateY(-1px); }
.tg-media__thumb.is-active { border-color: var(--tg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-accent) 18%, transparent); }
.tg-media__thumb:focus-visible { outline: 3px solid var(--tg-accent); outline-offset: 2px; }
.tg-media__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-media__thumb-video { display: grid; place-items: center; width: 100%; height: 100%; background: var(--tg-navy); }

@media (max-width: 600px) {
  .tg-media__slide { aspect-ratio: 4 / 3; }
  .tg-media__thumb { width: 60px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-media__viewport { scroll-behavior: auto; }
  .tg-media__thumb:hover { transform: none; }
}


.tg-pdp__subhead { font-family: var(--tg-font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tg-ink); margin: 0 0 16px; }


/* Offset derived from the sticky header (64px) + the admin bar, instead of a hardcoded
   92px that the header outgrew: logged-in admins had the buy box tucked 4px under the
   header on desktop and 18px under it on mobile. --tg-admin-bar is set below. */
.tg-buybox-wrap { position: sticky; top: calc(64px + var(--tg-admin-bar, 0px) + 24px); }
.tg-buybox { background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: 20px; padding: 28px; box-shadow: var(--tg-shadow-soft); }
.tg-buybox__eyebrow { font-family: var(--tg-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tg-meta); margin-bottom: 8px; }
.tg-buybox__title { font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(24px, 3.5vw, 30px); line-height: 1.05; letter-spacing: -0.03em; color: var(--tg-ink); margin: 0 0 12px; }
.tg-buybox__rating { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tg-muted); margin-bottom: 20px; }
.tg-buybox__rating .tg-star { color: var(--tg-link); font-weight: 700; }
.tg-buybox__rcount { color: var(--tg-meta); }
.tg-buybox__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; font-family: var(--tg-font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; color: var(--tg-ink); }
.tg-buybox__price .woocommerce-Price-amount { color: inherit; }
.tg-buybox__price ins { text-decoration: none; }
.tg-buybox__price del { font-family: var(--tg-font); font-weight: 600; font-size: 16px; color: var(--tg-meta); }
.tg-buybox__disc { align-self: center; font-family: var(--tg-font); font-weight: 700; font-size: 12px; background: var(--tg-red-tint); color: var(--tg-red-text); padding: 4px 10px; border-radius: var(--tg-radius-pill); }

.tg-event-ended {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: center;
  padding: 15px; border: 1px solid var(--tg-line); border-radius: 14px;
  background: var(--tg-surface);
}
.tg-event-ended__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--tg-accent-tint); color: var(--tg-link);
}
.tg-event-ended__body { display: block; min-width: 0; }
.tg-event-ended__title {
  display: block; color: var(--tg-ink); font-family: var(--tg-font-display);
  font-size: 15px; font-weight: 800; line-height: 1.25;
}
.tg-event-ended__copy { display: block; margin-top: 3px; color: var(--tg-muted); font-size: 13.5px; line-height: 1.4; }

.tg-event-notice {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px;
  margin-top: 14px; padding: 14px; border: 1px solid var(--tg-line);
  border-radius: 14px; background: var(--tg-surface);
}
.tg-event-notice__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--tg-accent-tint); color: var(--tg-link);
}
.tg-event-notice__body { min-width: 0; }
.tg-event-notice__title {
  margin: 1px 0 7px; color: var(--tg-ink); font-family: var(--tg-font-display);
  font-size: 13.5px; font-weight: 800; line-height: 1.25;
}
.tg-event-notice__list {
  margin: 0; padding-left: 17px; color: var(--tg-muted); font-size: 12.5px; line-height: 1.42;
}
.tg-event-notice__list li + li { margin-top: 3px; }
.tg-event-notice__refund {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--tg-line-soft);
  color: var(--tg-muted); font-size: 12.5px; line-height: 1.42;
}
.tg-event-notice__link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  color: var(--tg-link); font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.tg-event-notice__link:hover { color: var(--tg-accent-hover); text-decoration: underline; }
.tg-event-notice__link:focus-visible { outline: 3px solid var(--tg-accent); outline-offset: 3px; border-radius: 3px; }
.tg-event-notice__brands { margin: 8px 0 0; color: var(--tg-meta); font-size: 11.5px; line-height: 1.4; }
.woocommerce-checkout .tg-event-notice--checkout { margin: 0 0 16px; text-align: left; }


.tg-buybox__actions { display: flex; flex-direction: column; gap: 10px; }
.tg-buybox .cart { margin: 0; }
.tg-buybox .quantity { display: none; }   /* courses are sold per-seat (qty 1) */
.woocommerce .tg-buybox button.single_add_to_cart_button,
.tg-buybox .single_add_to_cart_button { display: block; width: 100%; text-align: center; float: none; padding: 16px; font-size: 14px; border-radius: 11px; }
.tg-btn--block { display: block; width: 100%; text-align: center; box-sizing: border-box; border-radius: 11px; padding: 15px; }


/* Related products heading (Woo single-product/related.php) */
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2 {
  font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(22px, 3vw, 26px);
  letter-spacing: -0.03em; text-transform: uppercase; color: var(--tg-ink); margin: clamp(24px, 4vw, 40px) 0 22px;
}

/* ════════════════════════════════════════════════════════════════════════
   CHECKOUT + CART (classic shortcodes, skinned to the Checkout mockup)
   ════════════════════════════════════════════════════════════════════════ */

/* Slim checkout header */
.tg-checkout-header { background: var(--tg-bg); border-bottom: 1px solid var(--tg-line-soft); }
.tg-checkout-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.tg-checkout-header__secure { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tg-muted); }
.tg-checkout-header__secure .tg-lock { color: var(--tg-success); }

/* Page title (display heading — uppercase + tracking allowed) + subtitle */
.woocommerce-checkout .tg-main > h1, .woocommerce-cart .tg-main > h1, .woocommerce-account .tg-main > h1 {
  text-transform: uppercase; letter-spacing: -0.035em; font-weight: 800; margin-bottom: 6px;
}
.tg-checkout__sub { font-size: 15px; color: var(--tg-meta); margin: 0 0 30px; }

/* 2-col: details (left) · order summary + payment (right, sticky) */
.woocommerce form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 16px; }
.woocommerce form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 24px; }
@media (max-width: 820px) {
  .woocommerce form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
  .woocommerce form.checkout #customer_details,
  .woocommerce form.checkout #order_review_heading,
  .woocommerce form.checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
}

/* Cards */
.woocommerce .woocommerce-billing-fields, .woocommerce #order_review {
  background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius); padding: 26px;
}
.woocommerce .woocommerce-billing-fields h3, .woocommerce #order_review_heading {
  font-family: var(--tg-font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--tg-ink); margin: 0 0 18px;
}
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; max-width: none; padding: 0; }

/* Form fields */
.woocommerce form .form-row { padding: 0; margin: 0 0 14px; }
.woocommerce form .form-row label { font-family: var(--tg-font); font-weight: 600; font-size: 13px; color: var(--tg-ink-strong); margin-bottom: 7px; }
/* textarea.input-text included: Woo 10.x styles `.form-row .input-text` (class) —
   bare `textarea` loses that specificity race (notes field carries the class). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select {
  font-family: var(--tg-font); font-size: 15px; width: 100%; border: 1.5px solid var(--tg-line-input);
  border-radius: var(--tg-radius-input); padding: 13px 14px; color: var(--tg-ink); background: var(--tg-bg);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row select:focus { outline: 0; border-color: var(--tg-accent); box-shadow: var(--tg-shadow-focus); }
.woocommerce form .form-row-first { width: calc(50% - 7px); float: left; clear: both; }
.woocommerce form .form-row-last { width: calc(50% - 7px); float: right; }
.woocommerce form .form-row-wide { clear: both; }
.woocommerce .woocommerce-billing-fields__field-wrapper::after { content: ""; display: table; clear: both; }

/* Tickera attendee info (Bridge injects it into checkout unstyled) — mirror the
   billing card + input chrome so ticket buyers get the same form language. */
.tc-form-ticket-fields-wrap {
  background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius);
  padding: 26px; margin: 0 0 24px;
}
.tc-form-ticket-fields-wrap h2 {
  font-family: var(--tg-font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--tg-ink); margin: 0 0 18px;
}
.tc-form-ticket-fields-wrap .owner-info-wrap { margin: 0 0 18px; }
.tc-form-ticket-fields-wrap .owner-info-wrap h5 {
  font-family: var(--tg-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--tg-meta); margin: 0 0 12px;
}
.tc-form-ticket-fields-wrap .fields-wrap { margin: 0 0 14px; }
.tc-form-ticket-fields-wrap .fields-wrap label { display: block; margin-bottom: 7px; }
.tc-form-ticket-fields-wrap .fields-wrap label span {
  font-family: var(--tg-font); font-weight: 600; font-size: 13px; color: var(--tg-ink-strong);
}
.tc-form-ticket-fields-wrap input.tickera-input-field {
  font-family: var(--tg-font); font-size: 15px; width: 100%; border: 1.5px solid var(--tg-line-input);
  border-radius: var(--tg-radius-input); padding: 13px 14px; color: var(--tg-ink); background: var(--tg-bg);
}
.tc-form-ticket-fields-wrap input.tickera-input-field:focus {
  outline: 0; border-color: var(--tg-accent); box-shadow: var(--tg-shadow-focus);
}
.tc-form-ticket-fields-wrap .description:empty { display: none; }

/* ANY Woo shop_table except the cart (totals box, thank-you, future account
   tables) — default boxed chrome → clean hairline rows. The :not(.cart) guard
   keeps the cart's intentional boxed-card look; blocks below refine specifics. */
.woocommerce table.shop_table:not(.cart) { border: 0; border-radius: 0; background: transparent; border-collapse: collapse; }
.woocommerce table.shop_table:not(.cart) th,
.woocommerce table.shop_table:not(.cart) td { border: 0; border-bottom: 1px solid var(--tg-line-soft); background: transparent; padding: 14px 0; }
.woocommerce table.shop_table:not(.cart) thead th { font-family: var(--tg-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tg-meta); }
.woocommerce table.shop_table:not(.cart) tfoot th { color: var(--tg-muted); font-weight: 600; text-align: left; }
/* right-align the amount column */
.woocommerce table.shop_table:not(.cart) td.product-total,
.woocommerce table.shop_table:not(.cart) th.product-total,
.woocommerce table.shop_table:not(.cart) tfoot td { text-align: right; font-variant-numeric: tabular-nums; }

/* WooCommerce Subscriptions "Suscripciones relacionadas" / My Account tables */
.woocommerce table.woocommerce-orders-table { border-collapse: collapse; }
.woocommerce table.woocommerce-orders-table th,
.woocommerce table.woocommerce-orders-table td { padding: 14px 16px 14px 0; vertical-align: middle; }
.woocommerce table.woocommerce-orders-table td:last-child { text-align: right; padding-right: 0; }
/* status cell → subtle pill */
.woocommerce table.woocommerce-orders-table td.subscription-status,
.woocommerce table.woocommerce-orders-table td.order-status mark { display: inline-flex; }
.woocommerce table.woocommerce-orders-table td.subscription-status { font-weight: 600; }
/* compact action buttons inside these tables (VIEW / Ver, etc.) */
.woocommerce table.woocommerce-orders-table .button,
.woocommerce table.order-details .button { padding: 7px 18px; font-size: 12.5px; min-height: 0; line-height: 1.4; }

/* Tickera tickets table (Mi cuenta → Pedidos → Ver) — same flat pattern as shop_table.
   Tickera has no thead: the first tr holds the th cells; rows alternate class="alternate". */
.woocommerce table.order-details { width: 100%; border: 0; border-radius: 0; background: transparent; border-collapse: collapse; margin: 0 0 28px; }
.woocommerce table.order-details th,
.woocommerce table.order-details td { border: 0; border-bottom: 1px solid var(--tg-line-soft); background: transparent; padding: 12px 18px 12px 0; text-align: left; vertical-align: middle; }
.woocommerce table.order-details th { font-family: var(--tg-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tg-meta); white-space: nowrap; }
.woocommerce table.order-details tr.alternate th,
.woocommerce table.order-details tr.alternate td { background: transparent; }
.woocommerce table.order-details th:last-child,
.woocommerce table.order-details td:last-child { padding-right: 0; text-align: right; }
a.tg-ticket-download { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 18px; border-radius: 999px; background: var(--tg-accent); color: var(--tg-on-dark); font-family: var(--tg-font-display); font-weight: 700; font-size: 12.5px; line-height: 1.4; }
a.tg-ticket-download:hover { background: var(--tg-accent-hover); color: var(--tg-on-dark); text-decoration: none; }
@media (max-width: 640px) {
  /* stack rows as cards; td::before uses Tickera's data-column labels */
  .woocommerce table.order-details tr:first-child { display: none; }
  .woocommerce table.order-details tr { display: block; padding: 4px 0 10px; border-bottom: 1px solid var(--tg-line-soft); }
  .woocommerce table.order-details td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 6px 0; text-align: left; }
  .woocommerce table.order-details td::before { content: attr(data-column); font-family: var(--tg-font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tg-meta); flex-shrink: 0; }
}

/* Order review table — strip Woo's boxed shop_table chrome (outer border, cell
   borders, rounded box) down to the card's clean hairline rows. */
.woocommerce table.shop_table.woocommerce-checkout-review-order-table { border: 0; border-radius: 0; background: transparent; }
.woocommerce table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.woocommerce table.woocommerce-checkout-review-order-table thead th {
  font-family: var(--tg-font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--tg-meta);
}
.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td { border: 0; border-bottom: 1px solid var(--tg-line-soft); padding: 12px 0; font-size: 14px; background: transparent; }
.woocommerce table.woocommerce-checkout-review-order-table th { color: var(--tg-muted); font-weight: 600; text-align: left; }
.woocommerce table.woocommerce-checkout-review-order-table td { text-align: right; color: var(--tg-ink); }
.woocommerce table.woocommerce-checkout-review-order-table .cart_item .product-name { color: var(--tg-ink); font-weight: 600; }
.woocommerce table.woocommerce-checkout-review-order-table .order-total th,
.woocommerce table.woocommerce-checkout-review-order-table .order-total td { border-bottom: 0; padding-top: 14px; }
.woocommerce table.woocommerce-checkout-review-order-table .order-total th { font-family: var(--tg-font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; }
.woocommerce table.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount { font-family: var(--tg-font-display); font-weight: 900; font-size: 22px; color: var(--tg-ink); }

/* Woo notices (added-to-cart, info, errors) — token skin over Woo's default
   green/blue banner chrome; the icon keeps its semantic color. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-top-width: 1px;
  border-radius: var(--tg-radius-input); box-shadow: var(--tg-shadow-card);
  padding: 14px 18px 14px 44px; margin: 0 0 20px; color: var(--tg-ink); font-size: 14.5px;
}
/* Woo focuses the notice on load (a11y announce) — restyle the UA focus ring */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus { outline: 0; box-shadow: var(--tg-shadow-focus); }
.woocommerce-message::before { color: var(--tg-success); }
.woocommerce-info::before { color: var(--tg-accent); }
.woocommerce-error::before { color: var(--tg-red-text); }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { padding: 9px 14px; font-size: 12px; }

/* Payment box */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods li label { font-family: var(--tg-font); font-weight: 600; font-size: 14.5px; color: var(--tg-ink); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 16px; border: 1px solid var(--tg-line-soft); border-radius: 12px; }
.woocommerce-checkout #payment ul.payment_methods li { margin: 0; line-height: 1.5; }
.woocommerce-checkout #payment div.payment_box { background: var(--tg-surface); border-radius: 10px; font-size: 13px; color: var(--tg-muted); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin: 0; }
.woocommerce #payment #place_order, .woocommerce #place_order { width: 100%; padding: 17px; font-size: 14px; border-radius: 12px; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: 12px; color: var(--tg-meta); }
/* Stripe express-checkout (Link) button — on classic checkout it auto-flows into
   the left column below the form as a full-width orphan. Constrain + label it so it
   reads as an intentional "pago rápido" option, not a stray bar. */
.woocommerce form.checkout [id*="wc-stripe-express-checkout"],
.woocommerce form.checkout [class*="wc-stripe-express-checkout"] { max-width: 420px; }
.woocommerce form.checkout .wc-stripe-express-checkout-element { margin: 4px 0 0; }
.wc-stripe-express-checkout-button-separator { max-width: 420px; color: var(--tg-meta); font-size: 12px; }

/* Coupon / login toggles */
.woocommerce-checkout .woocommerce-form-coupon-toggle, .woocommerce form.checkout_coupon { margin-bottom: 18px; }
.woocommerce form.checkout_coupon { border: 1px solid var(--tg-line-soft); border-radius: 12px; padding: 18px; }
.woocommerce form.checkout_coupon .input-text { max-width: 260px; font-family: var(--tg-font); font-size: 14px; border: 1.5px solid var(--tg-line-input); border-radius: var(--tg-radius-input); padding: 10px 12px; color: var(--tg-ink); background: var(--tg-bg); }   /* P2: was unstyled full-width */
.woocommerce form.checkout_coupon .input-text:focus { outline: 0; border-color: var(--tg-accent); box-shadow: var(--tg-shadow-focus); }

/* ── Cart ── */
.woocommerce table.cart, .woocommerce-cart table.cart { border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce table.cart th { font-family: var(--tg-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tg-muted); }
.woocommerce table.cart td, .woocommerce table.cart th { padding: 16px; border-top: 1px solid var(--tg-line-soft); }
/* Cart fields sit outside .form-row → same token skin, applied here. */
.woocommerce table.cart td.product-quantity .qty {
  width: 72px; font-family: var(--tg-font); font-size: 14px; text-align: center;
  border: 1.5px solid var(--tg-line-input); border-radius: var(--tg-radius-input);
  padding: 9px 6px; color: var(--tg-ink); background: var(--tg-bg);
}
.woocommerce table.cart td.actions .coupon { display: flex; gap: 10px; align-items: stretch; }
.woocommerce table.cart td.actions .coupon .input-text {
  width: 210px; font-family: var(--tg-font); font-size: 14px; float: none;
  border: 1.5px solid var(--tg-line-input); border-radius: var(--tg-radius-input);
  padding: 10px 12px; color: var(--tg-ink); background: var(--tg-bg);
}
.woocommerce table.cart td.product-quantity .qty:focus,
.woocommerce table.cart td.actions .coupon .input-text:focus { outline: 0; border-color: var(--tg-accent); box-shadow: var(--tg-shadow-focus); }
.woocommerce table.cart a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1;
  color: var(--tg-red-text) !important; text-decoration: none;
}
.woocommerce table.cart a.remove:hover { background: var(--tg-red-tint); color: var(--tg-red-text) !important; }
.woocommerce .cart_totals h2 { font-family: var(--tg-font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; }
.woocommerce .cart_totals .order-total th, .woocommerce .cart_totals .order-total td { border-bottom: 0; padding-top: 14px; font-size: 16px; }
.woocommerce .cart_totals .order-total .woocommerce-Price-amount { font-family: var(--tg-font-display); font-weight: 900; font-size: 20px; color: var(--tg-ink); }

/* ── Thank-you (order received) ── */
.woocommerce ul.order_details {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 36px;
  margin: 0 0 28px; padding: 18px 22px;
  background: var(--tg-surface); border: 1px solid var(--tg-line); border-radius: var(--tg-radius-input);
}
.woocommerce ul.order_details li {
  float: none; margin: 0; padding: 0; border: 0;
  font-family: var(--tg-font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--tg-meta);
}
.woocommerce ul.order_details li strong { display: block; margin-top: 4px; font-family: var(--tg-font); font-weight: 700; font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--tg-ink); }
.woocommerce-thankyou-order-received { font-size: 16px; color: var(--tg-muted); margin: 0 0 20px; }
.woocommerce-customer-details address { font-style: normal; background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius-input); padding: 18px 20px; }

/* Lost/reset password — same card language as the auth panels */
.woocommerce-ResetPassword {
  max-width: 520px; margin: 0 auto;
  background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius);
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--tg-shadow-card);
}
.woocommerce-ResetPassword p:first-of-type { margin-top: 0; color: var(--tg-muted); font-size: 14.5px; }
.woocommerce-ResetPassword .form-row { float: none; width: 100%; }
.woocommerce .cart-collaterals .cart_totals { background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius); padding: 24px; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; }

/* ════════════════════════════════════════════════════════════════════════
   ACCOUNT — login / register + dashboard
   ════════════════════════════════════════════════════════════════════════ */
/* Switchable login / register views */
body.woocommerce-account:not(.logged-in) .tg-main > h1 { display: none; }   /* the lockup carries the title */
/* Login/register page (logged-out account): the centred auth logo IS the brand, so drop the
   site header to avoid a second logo. The utility bar (language + theme toggle) stays. */
body.woocommerce-account:not(.logged-in) .tg-site-header { display: none; }
.tg-auth { width: 100%; max-width: 760px; margin: 0 auto; }
.tg-auth__brand { text-align: center; margin: 0 0 26px; }
/* Login/register brand is now the image logo, centred (its parent is text-align:center).
   The `.tg-auth__brand` prefix out-specifies `.woocommerce-page img { height:auto }`. */
.tg-auth__logo { display: inline-block; width: auto; max-width: 100%; }
.tg-auth__brand .tg-auth__logo { height: clamp(46px, 8vw, 74px); }
.tg-auth__logo--white { display: none; }
[data-tg-theme="dark"] .tg-auth__logo--dark { display: none; }
[data-tg-theme="dark"] .tg-auth__logo--white { display: inline-block; }
.tg-auth__title { text-align: center; font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(22px, 3.5vw, 30px); text-transform: uppercase; letter-spacing: -0.03em; color: var(--tg-ink); margin: 0 0 24px; }
.tg-auth__panel { display: none; background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: var(--tg-radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--tg-shadow-card); }
.tg-auth__panel.is-active { display: block; }
.tg-auth__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 600px) { .tg-auth__grid { grid-template-columns: 1fr; } }
/* max-width:none cancels the `.tg-content p { max-width: 62ch }` prose cap — these are form
   fields (<p class="tg-field">), not reading paragraphs, so they must fill their column. */
.tg-auth .tg-field { margin: 0 0 16px; max-width: none; }
.tg-auth .tg-field label { display: block; font-family: var(--tg-font); font-weight: 600; font-size: 13px; color: var(--tg-ink-strong); margin-bottom: 7px; }
.tg-auth .tg-field .req { color: var(--tg-red-text); }
.tg-auth .input-text { width: 100%; font-family: var(--tg-font); font-size: 15px; border: 1.5px solid var(--tg-line-input); border-radius: var(--tg-radius-input); padding: 13px 14px; color: var(--tg-ink); background: var(--tg-bg); }
.tg-auth .input-text:focus { outline: 0; border-color: var(--tg-accent); box-shadow: var(--tg-shadow-focus); }
.tg-auth__check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--tg-muted); margin: 4px 0 18px; }
.tg-auth__terms-box { max-height: 150px; overflow: auto; border: 1px solid var(--tg-line); border-radius: var(--tg-radius-input); padding: 16px 18px; margin: 6px 0 14px; font-size: 13px; line-height: 1.55; color: var(--tg-muted); background: var(--tg-surface); }
.tg-auth__terms-box p { margin: 0 0 10px; }
.tg-auth__terms-box p:last-child { margin-bottom: 0; }
/* The box now carries the full published policy, so its headings need to read as headings
   inside a 13px scroll region without turning into display type. */
.tg-auth__terms-box h1,
.tg-auth__terms-box h2,
.tg-auth__terms-box h3 { font-family: var(--tg-font); font-size: 13px; font-weight: 700; color: var(--tg-ink); margin: 14px 0 6px; text-transform: none; letter-spacing: normal; }
.tg-auth__terms-box h1:first-child,
.tg-auth__terms-box h2:first-child { margin-top: 0; }
.tg-auth__terms-box ol,
.tg-auth__terms-box ul { margin: 0 0 10px; padding-left: 20px; }
.tg-auth__terms-box li { margin-bottom: 4px; }
.tg-auth__terms-box a { color: var(--tg-accent-ink); }
.tg-auth__terms-link { font-size: 13px; margin: 0 0 12px; }
.tg-auth__terms-link a { color: var(--tg-accent-ink); }
.tg-auth .tg-btn.tg-btn--block { padding: 16px; font-size: 14px; line-height: 1.2; margin-bottom: 14px; }   /* equal height (beats Woo .button) + clearer gap */
.tg-auth__lost { width: 100%; max-width: none; text-align: center; margin: 6px 0 0; }
.tg-auth__lost a { color: var(--tg-link); font-size: 13px; }
.tg-auth__fineprint { text-align: center; font-size: 12px; color: var(--tg-meta); margin: 12px 0 0; }

/* Footer logo lockup tagline */
.tg-brand .tg-brand__tag { display: block; font-family: var(--tg-font-display); font-weight: 700; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tg-accent-bright); margin-top: 4px; }

/* Logged-in dashboard — nav sidebar + content. Every direct child of .woocommerce
   defaults to full width (so the empty notices wrapper can't claim a grid cell and
   shove the nav into column 2); then pin nav→col1, content→col2. */
@media (min-width: 760px) {
  .woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 32px; align-items: start; }
  .woocommerce-account.logged-in .woocommerce > * { grid-column: 1 / -1; }
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; }
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; }
}
.woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; margin: 0 !important; background: var(--tg-surface); border: 1px solid var(--tg-line); border-radius: var(--tg-radius); padding: 12px; }
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; min-width: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin: 0 0 2px; }
.woocommerce-MyAccount-navigation ul li a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--tg-muted); font-weight: 600; font-size: 14px; }
.woocommerce-MyAccount-navigation ul li a:hover { background: var(--tg-bg); color: var(--tg-ink); text-decoration: none; }
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--tg-bg); color: var(--tg-link); box-shadow: var(--tg-shadow-card); }
.woocommerce-MyAccount-content > p { color: var(--tg-muted); }

/* ════════════════════════════════════════════════════════════════════════
   MI APRENDIZAJE — learning dashboard (page-mi-aprendizaje.php)
   ════════════════════════════════════════════════════════════════════════ */
.tg-learn-hero { position: relative; overflow: hidden; background: var(--tg-navy); }
.tg-learn-hero__glow { position: absolute; top: -140px; right: -80px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tg-accent) 30%, transparent), transparent 66%); pointer-events: none; }
.tg-learn-hero__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-top: clamp(32px, 5vw, 48px); padding-bottom: clamp(32px, 5vw, 48px); }
.tg-learn-hero__title { font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(28px, 4.5vw, 42px); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; color: var(--tg-on-dark); margin: 0 0 10px; }
.tg-learn-hero__sub { font-size: 16px; color: var(--tg-on-navy-muted); margin: 0; }
.tg-learn-hero__sub strong { color: var(--tg-on-dark); }
.tg-learn-hero__kpis { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.tg-learn-hero__kpis strong { display: block; font-family: var(--tg-font-display); font-weight: 900; font-size: clamp(26px, 3.5vw, 34px); letter-spacing: -0.03em; color: var(--tg-on-dark); }
.tg-learn-hero__kpis span { font-size: 12.5px; color: var(--tg-on-navy-faint); }

.tg-learn { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 28px; align-items: start; padding-top: clamp(32px, 5vw, 44px); padding-bottom: clamp(56px, 8vw, 80px); }   /* vertical longhand only — shares its element with .tg-container */
@media (max-width: 900px) { .tg-learn { grid-template-columns: 1fr; } }
.tg-learn__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.tg-learn--single { grid-template-columns: minmax(0, 1fr); max-width: 980px; }   /* no aside since the presentational panels were cut */

/* tickets + orders access card (real: Tickera QR downloads live in Mi cuenta → Pedidos) */
.tg-learn-tickets { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tg-learn-tickets__body { flex: 1; min-width: 240px; }
.tg-learn-tickets__sub { font-size: 14px; color: var(--tg-ink-soft); margin: 6px 0 0; }
.tg-learn__h2 { font-family: var(--tg-font-display); font-weight: 800; font-size: clamp(20px, 3vw, 24px); letter-spacing: -0.03em; text-transform: uppercase; color: var(--tg-ink); margin: 0 0 18px; }


/* enrollments */
.tg-enroll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.tg-enroll-card { display: flex; flex-direction: column; background: var(--tg-card); border: 1px solid var(--tg-line-soft); border-radius: 16px; overflow: hidden; box-shadow: var(--tg-shadow-card); }
.tg-enroll-card:hover { text-decoration: none; }
.tg-enroll-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.tg-enroll-card__status { position: absolute; top: 12px; left: 12px; z-index: 2; }
.tg-enroll-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.tg-enroll-card__title { font-family: var(--tg-font-display); font-weight: 700; font-size: 15px; color: var(--tg-ink); line-height: 1.2; }
.tg-enroll-card__meta { font-size: 13px; color: var(--tg-muted); }

/* panel title — the aside is gone; this is now the heading on the tickets card */
.tg-learn-panel__title { font-family: var(--tg-font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tg-ink); }

/* ════════════════════════════════════════════════════════════════════════
   SHARED — classes the templates already used but nothing styled
   ════════════════════════════════════════════════════════════════════════ */
.tg-muted { color: var(--tg-muted); }                                  /* single-tc_events "sin entradas" note */
.tg-dot-sep { color: var(--tg-line); }                                 /* product-card meta separator */
.tg-content { color: var(--tg-ink-soft); }                             /* editorial body copy (event agenda) */
.tg-content p { font-size: 16px; line-height: 1.65; margin: 0 0 20px; max-width: 62ch; }

/* ── Focus visibility ──────────────────────────────────────────────────
   Buttons, links and cards were relying on the UA outline, which the navy
   surfaces swallow. One ring, drawn from the same token as the form fields.
   :where() keeps specificity at 0 so component rules still win; the input
   rules above already replace :focus with their own ring and are untouched. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tg-accent);
  outline-offset: 2px;
}
/* Cobalt disappears into navy — the bright accent is the legible one on dark chrome. */
.tg-utilitybar :where(a, button):focus-visible,
.tg-site-footer :where(a, button):focus-visible,
.tg-subband :where(a, button):focus-visible,
.tg-learn-hero :where(a, button):focus-visible,

/* ── Long-string hardening ─────────────────────────────────────────────
   The catalog carries 689 migrated titles nobody on this project authored, and the EN
   catalog runs ~25% longer than the ES source. Nothing here clamped or wrapped, so an
   unbroken SKU or a long event name pushed its card wider than its column.

   Global safety net: let long words break rather than overflow. */
.tg-product-card__title, .tg-live-card__title, .tg-enroll-card__title,
.tg-ticket-row__name, .tg-buybox__title, .tg-pdp__poster-word,
.tg-thumb__word, .tg-breadcrumb__current, .tg-buybox__sku, .tg-buybox__cats {
  overflow-wrap: anywhere;
}
/* Card titles clamp so a grid row can't be dragged tall by one verbose product.
 *
 * ⚠️ TRES líneas, no dos. Medido sobre el catálogo real (caja de 317px, interlineado 19px): el
 *    título más largo —"Orientación Empresarial (OE) - Presencial- Suscripción Mensual | 2
 *    IBOs", 71 caracteres— ocupa 3 líneas. Con 2 se cortaban nombres de producto de verdad, y
 *    son 10 productos en catálogo, no mil.
 *
 * ⚠️ `line-clamp` estándar ADEMÁS de la prefijada. Medido en el navegador: `-webkit-box`
 *    computaba `flow-root`, o sea que Chrome ya no honra la receta antigua y el recorte NO se
 *    aplicaba. Pero `overflow:hidden` sí seguía vivo, y esa combinación es la que cortaba el
 *    texto a media letra en vez de poner puntos suspensivos limpios.
 *
 * ⚠️ `max-height` explícito = el cinturón además de los tirantes. Aunque el recorte vuelva a
 *    fallar en algún navegador, ninguna cuarta línea puede asomar ni quedar cortada por la
 *    mitad. Es lo que evita que este fallo reaparezca en silencio.
 *
 * `min-height` reserva las 3 líneas para que la fila de precio quede a la misma altura en todas
 * las tarjetas: un título corto deja hueco, pero alineado se lee como decisión.
 */
.tg-product-card__title, .tg-live-card__title, .tg-enroll-card__title {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden;
  /* TECHO en 4 líneas, SUELO en 3.
     Medido en la tienda real: cinco de los seis títulos entran en 3 líneas, pero
     "Orientación Empresarial (OE) - Presencial- Suscripción Mensual | 2 IBOs" (71 caracteres)
     necesita 4 — con techo de 3 se cortaba justo ese. El suelo de 3 mantiene alineada la fila
     de precio en la mayoría de tarjetas; solo la larga estira un poco, que es lo que se pidió. */
  max-height: calc(4 * 1.2em);
  min-height: calc(3 * 1.2em);
}
/* Las tarjetas de evento llevan dirección debajo y no necesitan reservar tanto: ahí el título
   puede encoger sin desalinear nada. */
.tg-live-card__title { min-height: 0; }
/* The <h2> title also carries the stretched-link ::after, which needs to escape the clamp. */
.tg-product-card__title a::after { z-index: 1; }
/* Meta lines are single-line by design — ellipsis rather than reflow the card. */
.tg-product-card__meta, .tg-live-card__host, .tg-enroll-card__meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Price strings from Woo Subscriptions ("$29.99 / month with a $10.00 sign-up fee") are
   long and rendered at 40px display weight — let them wrap instead of blowing the band. */
.tg-subband__price, .tg-buybox__price { overflow-wrap: anywhere; }
.tg-subband__action { max-width: 100%; min-width: 0; }
/* Nav/pill rows: allow the cart pill and chips to shrink rather than force a scrollbar. */
.tg-site-header__inner, .tg-utilitybar__inner { min-width: 0; }

/* ── Hover affordance on clickable cards ───────────────────────────────
   These are whole-card links that gave no feedback on hover. A 2px lift and
   one shadow step — enough to read as interactive, short of a bounce. */
.woocommerce ul.products li.product.tg-product-card,
.tg-live-card,
.tg-enroll-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.woocommerce ul.products li.product.tg-product-card:hover,
.tg-live-card:hover,
.tg-enroll-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tg-shadow-md);
  border-color: var(--tg-line);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product.tg-product-card,
  .tg-live-card, .tg-enroll-card { transition: none; }
  .woocommerce ul.products li.product.tg-product-card:hover,
  .tg-live-card:hover, .tg-enroll-card:hover,
}