/* Talma Remaster v2
 * WordPress/Nicepage remains the source of truth. This file is only the visual
 * liquid-glass layer: stronger contrast, Lolafy-style nav and photo framing.
 */

:root {
  --talma-bg: #030303;
  --talma-panel: rgba(4, 4, 4, 0.82);
  --talma-panel-soft: rgba(8, 8, 8, 0.68);
  --talma-text: #fff8df;
  --talma-muted: rgba(255, 248, 223, 0.78);
  --talma-gold: #cba247;
  --talma-gold-2: #d2ae5f;
  --talma-gold-3: #f1d58c;
  --talma-border: rgba(210, 174, 95, 0.34);
  --talma-glass-border: rgba(255, 255, 255, 0.18);
  --talma-shadow: 0 34px 100px -38px rgba(0, 0, 0, 0.92);
}

html {
  background: var(--talma-bg) !important;
}

body.talma-v2 {
  min-height: 100%;
  padding-top: 88px;
  background:
    radial-gradient(circle at 12% -8%, rgba(210, 174, 95, 0.20), transparent 34%),
    radial-gradient(circle at 84% 10%, rgba(241, 213, 140, 0.12), transparent 30%),
    radial-gradient(circle at 48% 110%, rgba(203, 162, 71, 0.13), transparent 44%),
    #030303 !important;
  color: var(--talma-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body.talma-v2.talma-home-page {
  padding-top: 0;
}

body.talma-v2::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 18%, rgba(210, 174, 95, 0.42), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(255, 255, 255, 0.16), transparent 24%),
    radial-gradient(circle at 76% 78%, rgba(203, 162, 71, 0.28), transparent 34%),
    radial-gradient(circle at 32% 82%, rgba(163, 130, 47, 0.24), transparent 36%);
  filter: blur(84px) saturate(190%);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: talma-v2-drift 32s ease-in-out infinite alternate;
}

body.talma-v2::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 740px at 50% 0%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.58) 62%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 24%);
}

@keyframes talma-v2-drift {
  from { transform: translate3d(-1vw, 0, 0) scale(1); }
  to { transform: translate3d(2vw, -2vh, 0) scale(1.06); }
}

body.talma-v2 > *:not(.talma-ios-nav-v2),
.talma-v2 .u-body,
.talma-v2 .nicepage-container {
  position: relative;
  z-index: 1;
}

/* Replace the fragile Nicepage header with real HTML injected by the builder. */
.talma-v2 .u-header {
  display: none !important;
}

.talma-ios-nav-v2 {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 100000;
  width: min(1030px, calc(100% - 24px));
  transform: translateX(-50%);
  color: var(--talma-text);
}

.talma-ios-shell-v2 {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 248, 223, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(5, 5, 5, 0.64);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  backdrop-filter: blur(32px) saturate(220%);
  box-shadow:
    0 28px 86px -34px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(210, 174, 95, 0.16);
}

.talma-ios-shell-v2::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 21px;
  background:
    radial-gradient(65% 140% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 56%),
    radial-gradient(40% 100% at 12% 0%, rgba(210, 174, 95, 0.20), transparent 58%);
  pointer-events: none;
}

.talma-ios-brand-v2,
.talma-ios-segment-v2 a,
.talma-ios-actions-v2 a,
.talma-ios-mobile-v2 a {
  text-decoration: none !important;
}

.talma-ios-brand-v2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: var(--talma-text) !important;
}

.talma-ios-logo-v2 {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(210, 174, 95, 0.46);
  border-radius: 14px;
  background: #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(210, 174, 95, 0.34);
}

.talma-ios-logo-v2 img {
  width: auto;
  height: 35px;
  display: block;
  object-fit: contain;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(210, 174, 95, 0.42));
}

.talma-ios-wordmark-v2 {
  font: 850 15px/1.05 Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  color: #fff8df;
}

.talma-ios-wordmark-v2 strong {
  color: var(--talma-gold-2);
}

.talma-ios-segment-v2 {
  flex: 1 1 auto;
  display: inline-flex;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.talma-ios-segment-v2 a,
.talma-ios-actions-v2 a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  padding: 0 11px;
  color: rgba(255, 248, 223, 0.82) !important;
  font: 750 13px/1 Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.015em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.talma-ios-segment-v2 a:hover,
.talma-ios-segment-v2 a[aria-current="page"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.105);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.talma-ios-actions-v2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.talma-ios-login-v2 {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.talma-ios-primary-v2,
.talma-ios-mobile-v2 .is-primary {
  color: #090704 !important;
  border: 1px solid rgba(255, 240, 185, 0.70);
  background: linear-gradient(180deg, rgba(241, 213, 140, 0.98), rgba(203, 162, 71, 0.96));
  box-shadow:
    0 18px 42px -18px rgba(210, 174, 95, 0.70),
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

.talma-ios-actions-v2 a:hover,
.talma-ios-segment-v2 a:hover {
  transform: translateY(-1px);
}

.talma-ios-toggle-v2 {
  width: 43px;
  height: 43px;
  display: none;
  place-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055) !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(210, 174, 95, 0.10) !important;
}

.talma-ios-toggle-v2:focus,
.talma-ios-toggle-v2:focus-visible,
.talma-ios-toggle-v2:active {
  outline: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 68%),
    rgba(5, 5, 5, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(210, 174, 95, 0.32),
    0 12px 34px -24px rgba(0, 0, 0, 0.92) !important;
}

.talma-ios-toggle-v2 span {
  width: 18px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: var(--talma-gold-3);
  box-shadow: 0 0 10px rgba(210, 174, 95, 0.55);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.talma-menu-open-v2 .talma-ios-toggle-v2 span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.talma-menu-open-v2 .talma-ios-toggle-v2 span:nth-child(2) { opacity: 0; }
.talma-menu-open-v2 .talma-ios-toggle-v2 span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.talma-ios-mobile-v2 {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 248, 223, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(3, 3, 3, 0.92);
  -webkit-backdrop-filter: blur(36px) saturate(230%);
  backdrop-filter: blur(36px) saturate(230%);
  box-shadow: 0 34px 100px -36px rgba(0, 0, 0, 0.96), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transform: translateY(-8px) scale(0.985);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.18s ease, visibility 0s linear 0.2s;
}

.talma-menu-open-v2 .talma-ios-mobile-v2 {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.2s ease, opacity 0.18s ease;
}

.talma-ios-mobile-v2 a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border-radius: 15px;
  color: #fff8df !important;
  background: rgba(255, 255, 255, 0.065);
  font: 800 15px/1 Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.talma-ios-mobile-v2 a[aria-current="page"] {
  background: rgba(210, 174, 95, 0.18);
}

.talma-ios-scrim-v2 {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.46) !important;
}

.talma-menu-open-v2 .talma-ios-scrim-v2 {
  display: block;
}

/* Legibility pass: respect the original white/black Talma contrast. */
.talma-v2 .u-body,
.talma-v2 .u-sheet {
  background-color: transparent !important;
}

.talma-v2 .u-group:not(.u-header *):not(.u-image):not([style*="background-image"]),
.talma-v2 .u-list-item,
.talma-v2 .u-repeater-item,
.talma-v2 .u-post-details,
.talma-v2 .u-form,
.talma-v2 .wpcf7,
.talma-v2 .woocommerce,
.talma-v2 table,
.talma-v2 .u-table {
  color: var(--talma-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    var(--talma-panel-soft) !important;
  border: 1px solid rgba(255, 248, 223, 0.13) !important;
  border-radius: 28px !important;
  -webkit-backdrop-filter: blur(30px) saturate(210%);
  backdrop-filter: blur(30px) saturate(210%);
  box-shadow:
    var(--talma-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24) !important;
}

.talma-v2 .u-white,
.talma-v2 .u-grey-5,
.talma-v2 .u-grey-10,
.talma-v2 .u-palette-4-base {
  color: #111111 !important;
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 24px 70px -44px rgba(0, 0, 0, 0.38) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base) :where(p, li, label, td, th, blockquote, .u-text, .u-text-default, .u-text-variant, .u-custom-font),
.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base) :where(p, li, label, td, th, blockquote, .u-text, .u-text-default, .u-text-variant, .u-custom-font) *:not(a):not(button) {
  color: #151515 !important;
  text-shadow: none !important;
}

.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base) :where(h1, h2, h3, h4, h5, h6, .u-title) {
  color: #0e0e0e !important;
  text-shadow: none !important;
}

.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base) a:not(.u-btn) {
  color: #8a6a18 !important;
  text-shadow: none !important;
}

.talma-v2 :where(h1, h2, h3, h4, h5, h6, .u-title) {
  color: var(--talma-gold-3) !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.86), 0 0 22px rgba(210, 174, 95, 0.26) !important;
}

.talma-v2 :where(p, li, label, td, th, blockquote, .u-text, .u-text-default, .u-text-variant, .u-custom-font),
.talma-v2 :where(p, li, label, td, th, blockquote, .u-text, .u-text-default, .u-text-variant, .u-custom-font) *:not(a):not(button) {
  color: var(--talma-text) !important;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.78) !important;
}

.talma-v2 :where(.u-text-grey, .u-text-grey-5, .u-text-grey-10, .u-text-grey-40, .u-text-grey-50, .u-text-grey-60, .u-text-grey-70, .u-text-grey-80, .u-text-custom-color-1) {
  color: var(--talma-text) !important;
}

.talma-v2 a:not(.talma-ios-brand-v2):not(.talma-ios-segment-v2 a):not(.talma-ios-actions-v2 a):not(.talma-ios-mobile-v2 a):not(.u-btn) {
  color: var(--talma-gold-3) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.72);
}

.talma-v2 .u-btn,
.talma-v2 button:not(.talma-ios-toggle-v2):not(.talma-ios-scrim-v2),
.talma-v2 input[type="submit"],
.talma-v2 .wpcf7-submit {
  border-radius: 999px !important;
  color: #080603 !important;
  background: linear-gradient(180deg, rgba(241, 213, 140, 0.98), rgba(203, 162, 71, 0.96)) !important;
  border: 1px solid rgba(255, 240, 185, 0.64) !important;
  box-shadow:
    0 18px 46px -18px rgba(210, 174, 95, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
}

.talma-v2 input,
.talma-v2 textarea,
.talma-v2 select {
  color: var(--talma-text) !important;
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(210, 174, 95, 0.38) !important;
  border-radius: 16px !important;
}

/* Photo integration: same WP assets, stronger framing and contrast. */
/* Photo integration: keep WP photos clean. No global frames or overlays. */
.talma-v2 img:not(.emoji):not(.u-logo-image):not(.talma-ios-logo-v2 img):not(.talma-chatbot-toggle img),
.talma-v2 video,
.talma-v2 iframe {
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.talma-v2 .u-background-video,
.talma-v2 .u-video {
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}

.talma-v2 .u-clearfix.u-image::after,
.talma-v2 [class*="u-image"][style*="background-image"]::after,
.talma-v2 .u-background-video::after,
.talma-v2 .u-video::after {
  content: none !important;
}

/* Chatbot/plugin surfaces keep their original behavior, just match the skin. */
.talma-v2 .talma-chatbot-toggle,
.talma-v2 .talma-chatbot-initial-message,
.talma-v2 .talma-chatbot-container,
.talma-v2 #cookies-eu-banner,
.talma-v2 .argpd-footer,
.talma-v2 .woocommerce-notices-wrapper {
  color: var(--talma-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(3, 3, 3, 0.82) !important;
  border: 1px solid rgba(255, 248, 223, 0.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(220%);
  backdrop-filter: blur(30px) saturate(220%);
  box-shadow: 0 30px 90px -36px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Keep light WP blocks readable after the global dark text pass. */
.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base):not(.u-section-7 .u-list-item),
.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base):not(.u-section-7 .u-list-item) :where(p, li, label, td, th, blockquote, .u-text, .u-text-default, .u-text-variant, .u-custom-font),
.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base):not(.u-section-7 .u-list-item) :where(p, li, label, td, th, blockquote, .u-text, .u-text-default, .u-text-variant, .u-custom-font) *:not(a):not(button) {
  color: #151515 !important;
  text-shadow: none !important;
}

.talma-v2 :where(.u-white, .u-grey-5, .u-grey-10, .u-palette-4-base):not(.u-section-7 .u-list-item) :where(h1, h2, h3, h4, h5, h6, .u-title) {
  color: #101010 !important;
  text-shadow: none !important;
}

/* Home class cards: glossy dark cards, readable text, original images intact. */
.talma-v2 .u-section-7 .u-list-item {
  color: var(--talma-text) !important;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(5, 5, 5, 0.84) !important;
  border: 1px solid rgba(210, 174, 95, 0.30) !important;
  border-radius: 24px !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%);
  backdrop-filter: blur(28px) saturate(210%);
  box-shadow:
    0 30px 88px -40px rgba(0, 0, 0, 0.94),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.talma-v2 .u-section-7 .u-list-item h5,
.talma-v2 .u-section-7 .u-list-item .u-text-palette-2-base {
  color: var(--talma-gold-3) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72), 0 0 18px rgba(210, 174, 95, 0.22) !important;
}

.talma-v2 .u-section-7 .u-list-item p,
.talma-v2 .u-section-7 .u-list-item .u-text-palette-2-dark-2,
.talma-v2 .u-section-7 .u-list-item .u-text {
  color: rgba(255, 248, 223, 0.94) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.78) !important;
}

.talma-v2 .u-section-7 .u-list-item .u-image {
  border-color: rgba(241, 213, 140, 0.78) !important;
  box-shadow:
    0 18px 46px -26px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(210, 174, 95, 0.24) !important;
}

.talma-v2 .u-section-7 .u-list-item .u-icon img {
  filter: drop-shadow(0 0 14px rgba(210, 174, 95, 0.35)) !important;
}

/* Restore Nicepage's original hard background palette and SVG shape colors. */
.talma-v2 .u-black,
.talma-v2 section.u-black,
.talma-v2 .u-body.u-black,
.talma-v2 .u-container-layout.u-container-layout.u-black {
  color: #ffffff !important;
  background-color: #000000 !important;
}

.talma-v2 .u-white,
.talma-v2 section.u-white,
.talma-v2 .u-body.u-white,
.talma-v2 .u-container-layout.u-container-layout.u-white {
  color: #111111 !important;
  background-color: #ffffff !important;
}

.talma-v2 .u-grey-5,
.talma-v2 section.u-grey-5,
.talma-v2 .u-body.u-grey-5,
.talma-v2 .u-container-layout.u-container-layout.u-grey-5 {
  color: #111111 !important;
  background-color: #f2f2f2 !important;
}

.talma-v2 .u-palette-1-base,
.talma-v2 section.u-palette-1-base,
.talma-v2 .u-container-layout.u-container-layout.u-palette-1-base {
  color: #ffffff !important;
  background-color: #424251 !important;
}

.talma-v2 .u-palette-2-base,
.talma-v2 section.u-palette-2-base,
.talma-v2 .u-container-layout.u-container-layout.u-palette-2-base {
  color: #ffffff !important;
  background-color: #d2ae5f !important;
}

.talma-v2 .u-palette-4-base,
.talma-v2 section.u-palette-4-base,
.talma-v2 .u-container-layout.u-container-layout.u-palette-4-base {
  color: #111111 !important;
  background-color: #92e4fd !important;
}

.talma-v2 .u-shape.u-text-black,
.talma-v2 .u-text-black .u-svg-link,
.talma-v2 .u-text-black .u-svg-content {
  color: #000000 !important;
  fill: #000000 !important;
}

.talma-v2 .u-shape.u-text-white,
.talma-v2 .u-text-white .u-svg-link,
.talma-v2 .u-text-white .u-svg-content {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.talma-v2 .u-shape.u-palette-1-base {
  color: #ffffff !important;
  background-color: #424251 !important;
}

.talma-v2 .u-shape.u-palette-2-base {
  color: #ffffff !important;
  background-color: #d2ae5f !important;
}

.talma-v2 .u-shape.u-palette-4-base {
  color: #111111 !important;
  background-color: #92e4fd !important;
}

.talma-v2.talma-class-page .u-section-3.u-grey-5 {
  background-color: #f2f2f2 !important;
}

.talma-v2.talma-class-page .u-section-3 .u-image-4 {
  background-color: transparent !important;
}

.talma-v2 .u-section-7 .u-list-item.u-white {
  color: var(--talma-text) !important;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(5, 5, 5, 0.84) !important;
  border-color: rgba(210, 174, 95, 0.30) !important;
}

.talma-v2 .u-section-7 .u-list-item.u-white :where(h5, .u-text-palette-2-base) {
  color: var(--talma-gold-3) !important;
}

.talma-v2 .u-section-7 .u-list-item.u-white :where(p, .u-text-palette-2-dark-2, .u-text) {
  color: rgba(255, 248, 223, 0.94) !important;
}

.talma-v2.talma-home-page #sec-81e3 {
  background:
    radial-gradient(circle at 18% 0%, rgba(210, 174, 95, 0.16), transparent 32%),
    #000000 !important;
  background-color: #000000 !important;
}

.talma-v2.talma-home-page #sec-81e3 .u-group-1 {
  color: var(--talma-text) !important;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(5, 5, 5, 0.84) !important;
  border: 1px solid rgba(241, 213, 140, 0.34) !important;
  border-radius: 28px !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(30px) saturate(220%);
  backdrop-filter: blur(30px) saturate(220%);
  box-shadow:
    0 34px 96px -38px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.talma-v2.talma-home-page #sec-81e3 .u-text-1 {
  color: var(--talma-gold-3) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.72), 0 0 20px rgba(210, 174, 95, 0.24) !important;
}

.talma-v2.talma-home-page #sec-81e3 .u-text-2 {
  color: rgba(255, 248, 223, 0.94) !important;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.76) !important;
}

.talma-v2.talma-home-page #sec-81e3 .u-btn-1 {
  color: #090704 !important;
  background: linear-gradient(180deg, rgba(241, 213, 140, 0.98), rgba(203, 162, 71, 0.96)) !important;
  background-color: var(--talma-gold-2) !important;
  border-color: rgba(255, 240, 185, 0.64) !important;
  border-radius: 999px !important;
  box-shadow:
    0 18px 46px -18px rgba(210, 174, 95, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
}

/* Discipline pages: keep Nicepage image placement, make the reading panel glossy. */
.talma-v2 .u-section-3.u-gradient {
  background:
    radial-gradient(circle at 14% 0%, rgba(210, 174, 95, 0.22), transparent 34%),
    linear-gradient(135deg, #090909 0%, #151515 42%, #2a2619 100%) !important;
}

.talma-v2 .u-section-3.u-gradient .u-shape {
  opacity: 0.74;
  filter: saturate(1.08);
}

.talma-v2 .u-section-3.u-gradient .u-image-1 {
  border-radius: 0 !important;
  filter: saturate(1.04) contrast(1.03);
}

.talma-v2 .u-section-3.u-gradient .u-group-1 {
  color: var(--talma-text) !important;
  background:
    radial-gradient(120% 65% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(5, 5, 5, 0.84) !important;
  border: 1px solid rgba(210, 174, 95, 0.32) !important;
  border-radius: 28px !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(30px) saturate(220%);
  backdrop-filter: blur(30px) saturate(220%);
  box-shadow:
    0 34px 96px -38px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28) !important;
}

.talma-v2 .u-section-3.u-gradient .u-group-1 .u-container-layout {
  padding: clamp(22px, 3vw, 38px) !important;
}

.talma-v2 .u-section-3.u-gradient .u-group-1 :where(h1, h2, h3, h4, h5, h6, .u-title) {
  color: var(--talma-gold-3) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.72), 0 0 20px rgba(210, 174, 95, 0.24) !important;
}

.talma-v2 .u-section-3.u-gradient .u-group-1 :where(p, li, .u-text, .u-text-default, .u-custom-font),
.talma-v2 .u-section-3.u-gradient .u-group-1 :where(p, li, .u-text, .u-text-default, .u-custom-font) *:not(a):not(button) {
  color: rgba(255, 248, 223, 0.96) !important;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.76) !important;
}

.talma-v2 .u-section-3.u-gradient .u-group-1 a:not(.u-btn) {
  color: var(--talma-gold-3) !important;
}

@media (max-width: 767px) {
  .talma-v2 .u-section-3.u-gradient .u-group-1 {
    border-radius: 22px !important;
  }

  .talma-v2 .u-section-3.u-gradient .u-group-1 .u-container-layout {
    padding: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CLASS DETAIL PAGES — SportValora-style remaster
   Photo becomes a subtle ambient backdrop, content sits in a clean
   centered column with elegant glass cards on dark navy/black gradient.
   ════════════════════════════════════════════════════════════════════ */

/* 1 · Page body — let the browser scroll natively, nothing fancy */
html:has(body.talma-v2.talma-class-page) {
  overflow-x: clip !important;
  overflow-y: auto !important;
  scroll-behavior: auto !important;
  height: auto !important;
}

body.talma-v2.talma-class-page {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100% !important;
  background: #050405 !important;
  color: #e9e3d2 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  touch-action: auto !important;
  overscroll-behavior: auto !important;
}

body.talma-v2.talma-class-page::before,
body.talma-v2.talma-class-page::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Make sure no Nicepage container is forcing a fixed height that
   could create a phantom scroll-locked region. */
body.talma-v2.talma-class-page .u-body,
body.talma-v2.talma-class-page .nicepage-container,
body.talma-v2.talma-class-page section {
  height: auto !important;
  transform: none !important;
  animation: none !important;
}

/* Neutralise the white text panel from Nicepage:
   - .u-white sets background-color: white on u-group-1
   - .u-white > .u-container-layout::before is a Nicepage pseudo that paints
     a white rectangle on top of the layout. KILL them all. */
.talma-v2.talma-class-page .talma-class-detail-section .u-group.u-group-1,
.talma-v2.talma-class-page .talma-class-detail-section .u-group.u-group-1 .u-container-layout,
.talma-v2.talma-class-page .talma-class-detail-section .u-white,
.talma-v2.talma-class-page .talma-class-detail-section .u-white .u-container-layout {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: inherit !important;
  opacity: 1 !important;
}

.talma-v2.talma-class-page .talma-class-detail-section .u-white::before,
.talma-v2.talma-class-page .talma-class-detail-section .u-white > .u-container-layout::before,
.talma-v2.talma-class-page .talma-class-detail-section .u-white > .u-inner-container-layout::before,
.talma-v2.talma-class-page .talma-class-detail-section .u-group-1::before,
.talma-v2.talma-class-page .talma-class-detail-section .u-group-1 > .u-container-layout::before,
.talma-v2.talma-class-page .talma-class-detail-section .u-group-1 .u-container-layout::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Also wipe the u-opacity classes on the text panel — they dim everything */
.talma-v2.talma-class-page .talma-class-detail-section .u-group-1.u-opacity,
.talma-v2.talma-class-page .talma-class-detail-section .u-group-1.u-opacity-80 {
  opacity: 1 !important;
}

/* 2 · HERO — clean dark stage with the class title image glowing  */
.talma-v2.talma-class-page .u-section-2 {
  min-height: clamp(220px, 38vh, 480px) !important;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(210, 174, 95, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 0%,  rgba(255, 215, 130, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, #050405 0%, #0a0805 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.talma-v2.talma-class-page .u-section-2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(210, 174, 95, 0.55) 30%,
    rgba(241, 213, 140, 0.95) 50%,
    rgba(210, 174, 95, 0.55) 70%, transparent);
}

.talma-v2.talma-class-page .u-section-2 .u-sheet-1 {
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(40px, 6vw, 80px) 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Cover BOTH variants: with and without u-image-1 (kenpo-ajrk has no u-image-1) */
.talma-v2.talma-class-page .u-section-2 .u-image {
  position: static !important;
  width: auto !important;
  height: clamp(86px, 14vw, 210px) !important;
  max-width: min(860px, 84vw) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  inset: auto !important;
  transform: none !important;
  filter:
    drop-shadow(0 0 18px rgba(210, 174, 95, 0.92))
    drop-shadow(0 0 56px rgba(210, 174, 95, 0.50))
    drop-shadow(0 0 130px rgba(210, 174, 95, 0.22))
    brightness(1.12) !important;
}

/* 3 · DETAIL SECTION — clean dark stage, photo as feature ─── */
.talma-v2.talma-class-page .talma-class-detail-section.u-section-3.u-gradient {
  position: relative !important;
  min-height: auto !important;
  height: auto !important;
  padding: clamp(48px, 7vw, 110px) 0 clamp(72px, 10vw, 150px) !important;
  background:
    radial-gradient(ellipse 70% 45% at 14% 8%,  rgba(210, 174, 95, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 88% 22%, rgba(163, 130, 47, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(120,  88, 22, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #050405 0%, #0a0807 100%) !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* No section overlays — the bg is solid */
.talma-v2.talma-class-page .talma-class-detail-section.u-section-3.u-gradient::before,
.talma-v2.talma-class-page .talma-class-detail-section.u-section-3.u-gradient::after {
  display: none !important;
  content: none !important;
}

/* Hide Nicepage decorative shapes */
.talma-v2.talma-class-page .talma-class-detail-section .u-shape-1,
.talma-v2.talma-class-page .talma-class-detail-section .u-shape-2 {
  display: none !important;
}

/* Sheet: vertical column, photo on top, text below.
   Override the Nicepage min-height (1357px / 863px / 651px / 509px) at all
   breakpoints — those used to reserve space for absolutely-positioned shapes
   that we no longer use, and they create huge dead scroll zones. */
.talma-v2.talma-class-page .talma-class-detail-section .u-sheet-1,
.talma-v2.talma-class-page .talma-class-detail-section.u-section-3 .u-sheet-1 {
  position: relative !important;
  z-index: 1 !important;
  width: min(960px, calc(100% - 36px)) !important;
  min-height: 0 !important;
  height: auto !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: clamp(28px, 4vw, 48px) !important;
  padding: 0 !important;
  transform: none !important;
}

/* Photo: HERO FEATURE image — full width of column, big, framed */
.talma-v2.talma-class-page .talma-class-detail-section .u-image-1 {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-height: clamp(280px, 50vw, 540px) !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  border: none !important;
  border-radius: clamp(20px, 2.4vw, 30px) !important;
  opacity: 1 !important;
  filter: saturate(1.06) contrast(1.04) !important;
  box-shadow:
    0 0 0 1px rgba(210, 174, 95, 0.35),
    0 0 0 6px rgba(210, 174, 95, 0.06),
    0 50px 100px -34px rgba(0, 0, 0, 0.92),
    0 0 80px -10px rgba(210, 174, 95, 0.16) !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}

.talma-v2.talma-class-page .talma-class-detail-section .u-image-1:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 0 1px rgba(241, 213, 140, 0.55),
    0 0 0 6px rgba(210, 174, 95, 0.10),
    0 60px 120px -34px rgba(0, 0, 0, 0.95),
    0 0 100px -8px rgba(210, 174, 95, 0.24) !important;
}

/* Text panel wrapper */
.talma-v2.talma-class-page .talma-class-detail-section .u-group-1 {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 760px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}

.talma-v2.talma-class-page .talma-class-detail-section .u-group-1 .u-container-layout {
  min-height: 0 !important;
  padding: 0 !important;
}

/* 4 · COPY GRID ─────────────────────────────────────────────── */
.talma-class-copy-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Title card: bold gradient headline, no chunky background */
.talma-class-title-card {
  position: relative !important;
  margin: 0 0 18px 0 !important;
  padding: clamp(8px, 1vw, 16px) 0 clamp(20px, 2.4vw, 30px) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-align: center !important;
  overflow: visible !important;
}

.talma-class-title-card::before { content: none !important; }

/* Subtle gold underline below the title */
.talma-class-title-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 9vw, 110px);
  height: 3px;
  background: linear-gradient(90deg, transparent, #f1d58c 50%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(241, 213, 140, 0.55);
}

.talma-class-title {
  margin: 0 !important;
  background: linear-gradient(180deg, #fff5d4 0%, #f1d58c 50%, #c89745 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font: 800 clamp(1.95rem, 4.8vw, 3.20rem)/1.06 Inter, Manrope, system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.044em !important;
  text-wrap: balance !important;
  filter: drop-shadow(0 4px 20px rgba(210, 174, 95, 0.32)) !important;
}

/* Content cards — clean dark glass tiles */
.talma-class-card {
  position: relative !important;
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px) !important;
  background: linear-gradient(150deg, #15120c 0%, #0d0b08 100%) !important;
  border: 1px solid rgba(210, 174, 95, 0.16) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 185, 0.06),
    0 10px 30px -14px rgba(0, 0, 0, 0.60) !important;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  overflow: hidden !important;
}

.talma-class-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(241, 213, 140, 0.06) 0%, transparent 38%);
  pointer-events: none;
  border-radius: inherit;
}

.talma-class-card:hover {
  border-color: rgba(210, 174, 95, 0.42) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 185, 0.10),
    0 18px 42px -16px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(210, 174, 95, 0.14) !important;
}

.talma-class-card p {
  position: relative !important;
  margin: 0 !important;
  color: #ddd2b6 !important;
  font: 400 clamp(0.98rem, 1.26vw, 1.10rem)/1.78 Inter, Manrope, system-ui, -apple-system, sans-serif !important;
  text-shadow: none !important;
  z-index: 1 !important;
}

/* Hide Nicepage schedule popups on class pages */
.talma-v2.talma-class-page .u-dialog-block {
  display: none !important;
}

/* ─ Schedules and pricing ───────────────────────────────────── */
.talma-v2 #sec-69bf,
.talma-v2 #sec-741a {
  background: #000000 !important;
  background-color: #000000 !important;
}
.talma-v2 #sec-69bf .u-sheet-1,
.talma-v2 #sec-741a .u-sheet-1 {
  background: #000000 !important;
  background-color: #000000 !important;
}
.talma-v2 #sec-69bf .u-image-1,
.talma-v2 #sec-741a .u-image-1 {
  background: #000000 !important;
  box-shadow: none !important;
}

/* ─ Responsive ──────────────────────────────────────────────── */
@media (max-width: 575px) {
  .talma-v2.talma-class-page .u-section-2 { min-height: auto !important; }
  .talma-v2.talma-class-page .u-section-2 .u-image-1 {
    height: auto !important;
    max-width: min(100%, 300px) !important;
  }
  .talma-v2.talma-class-page .talma-class-detail-section.u-section-3.u-gradient {
    padding-block: 44px 60px !important;
  }
  .talma-v2.talma-class-page .talma-class-detail-section .u-sheet-1 {
    width: calc(100% - 24px) !important;
  }
  .talma-class-copy-grid { gap: 12px !important; }
  .talma-class-title-card {
    border-radius: 20px !important;
    padding: 22px 18px !important;
    margin-bottom: 8px !important;
  }
  .talma-class-card {
    border-radius: 14px !important;
    padding: 16px 18px !important;
  }
}

@media (max-width: 1120px) {
  .talma-ios-segment-v2,
  .talma-ios-actions-v2 {
    display: none;
  }

  .talma-ios-shell-v2 {
    justify-content: space-between;
  }

  .talma-ios-toggle-v2 {
    display: grid;
  }
}

@media (max-width: 520px) {
  body.talma-v2:not(.talma-home-page) {
    padding-top: 76px;
  }

  .talma-ios-nav-v2 {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100% - 16px);
  }

  .talma-ios-shell-v2 {
    min-height: 54px;
    border-radius: 19px;
  }

  .talma-ios-logo-v2 {
    width: 40px;
    height: 40px;
  }

  .talma-ios-wordmark-v2 {
    font-size: 13px;
    letter-spacing: 0.055em;
  }
}

@media (max-width: 360px) {
  .talma-ios-wordmark-v2 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.talma-v2::before {
    animation: none;
  }
  .talma-v2 *,
  .talma-v2 *::before,
  .talma-v2 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Home hero (carousel, FUERZA strip, decoración) — Nicepage is the authority here.
 *
 * glossy.css is removed from index.html by the build script, so its scroll-driven
 * section animation (translateY 24px) never runs.  We only need to neutralise the
 * handful of visual-only properties that talma-remaster-v2.css itself still applies
 * to these sections — none of these touch layout (width/height/margin/position).
 */

/* The remaster injects animated gold gradients on body::before/after.
   On the home page the hero sections are light/black Nicepage originals, so hide them. */
body.talma-v2.talma-home-page::before,
body.talma-v2.talma-home-page::after {
  display: none !important;
}

/* Remove the legibility-pass box-shadow the remaster adds to .u-grey-5 sections.
   That rule makes the light-grey sections look like floating cards. */
body.talma-v2.talma-home-page #sec-21fc,
body.talma-v2.talma-home-page #sec-8c96 {
  box-shadow: none !important;
}

/* ==========================================================================
   GLOSSY SOCIAL & CONTACT BUTTONS (sitewide footer pre-section)
   ========================================================================== */

/* Nicepage prints inline rules like
     `.u-section-9 .u-social-icons-1 { width: 356px; height: 64px }`
   and a mobile variant `.u-section-9 .u-social-icons-1 { width: 252px; height: 50px }`.
   That fixed 50 px-tall box clips our 64 px round pills and makes the icons
   disappear on phones. Override the dimensions and let the flex container
   grow to whatever the pills need. */
body.talma-v2 .u-section-9 .u-social-icons-1,
body.talma-v2 #sec-d69a .u-social-icons-1,
body.talma-v2 .u-social-icons-1 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 12px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100vw - 24px) !important;
  margin: 36px auto 0 !important;
}

/* Same protective override on each icon span: Nicepage forces height:100%
   which only made sense with their fixed-height container. */
body.talma-v2 .u-section-9 .u-social-icons-1 .u-icon,
body.talma-v2 #sec-d69a .u-social-icons-1 .u-icon {
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.talma-v2 .u-social-icons-1 .u-social-url {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  isolation: isolate;
  background: linear-gradient(140deg, rgba(210,174,95,0.95) 0%, rgba(168,128,52,0.95) 55%, rgba(122,89,30,0.95) 100%) !important;
  box-shadow:
    0 10px 26px -10px rgba(210,174,95,0.55),
    0 4px 10px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 6px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease !important;
  -webkit-tap-highlight-color: transparent;
  /* Make the inner SVG <circle fill="currentColor"> invisible, so the
     gold container we drew shines through; the white <path> stays white. */
  color: transparent !important;
}

body.talma-v2 .u-social-icons-1 .u-social-url::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 70% at 30% 12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(140% 80% at 70% 100%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 65%);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0.7;
}

body.talma-v2 .u-social-icons-1 .u-social-url::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 6%;
  height: 32%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
  pointer-events: none;
  z-index: 5;
}

body.talma-v2 .u-social-icons-1 .u-social-url:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow:
    0 18px 36px -10px rgba(210,174,95,0.75),
    0 6px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 6px rgba(0,0,0,0.4) !important;
  filter: brightness(1.07) saturate(1.05);
}

body.talma-v2 .u-social-icons-1 .u-social-url:active {
  transform: translateY(-1px) scale(1.02);
}

/* Inner icon span — fill the whole pill, stack above the gradient (z-index 3),
   below our highlight (z-index 4-5). */
body.talma-v2 .u-social-icons-1 .u-social-url .u-icon {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 3;
}

/* The visible <use>-driven SVG fills its container; viewbox 0 0 112 112
   keeps the icon centered. We need to UNDO any sizing Nicepage applies. */
body.talma-v2 .u-social-icons-1 .u-social-url .u-svg-link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}

/* The hidden <symbol/defs> SVG must stay invisible. */
body.talma-v2 .u-social-icons-1 .u-social-url .u-svg-content {
  display: none !important;
}

/* Override SVG fills inside the social pill so the original gold disc
   becomes transparent and only the white glyph path remains visible. */
body.talma-v2 .u-social-icons-1 .u-social-url svg circle {
  fill: transparent !important;
  stroke: none !important;
}

body.talma-v2 .u-social-icons-1 .u-social-url svg path {
  fill: #ffffff !important;
}

/* Whatsapp custom button just below the social row */
body.talma-v2 #sec-d69a .u-custom-html-1,
body.talma-v2 .u-section-9 .u-custom-html-1 {
  margin-top: 22px !important;
}

body.talma-v2 a[href*="wa.me"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(140deg, #2dd36f 0%, #1eb15a 55%, #0d8b3f 100%) !important;
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  text-decoration: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow:
    0 12px 30px -10px rgba(45,211,111,0.55),
    0 5px 12px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 6px rgba(0,0,0,0.35) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease !important;
}

body.talma-v2 a[href*="wa.me"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 30% 12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(140% 80% at 70% 100%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 65%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.9;
}

body.talma-v2 a[href*="wa.me"]::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 6%;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 2;
}

body.talma-v2 a[href*="wa.me"] > * {
  position: relative;
  z-index: 3;
}

body.talma-v2 a[href*="wa.me"] img {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

body.talma-v2 a[href*="wa.me"]:hover {
  transform: translateY(-3px) scale(1.04) !important;
  filter: brightness(1.06) saturate(1.05) !important;
  box-shadow:
    0 20px 38px -10px rgba(45,211,111,0.75),
    0 8px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 6px rgba(0,0,0,0.4) !important;
}

body.talma-v2 a[href*="wa.me"]:active {
  transform: translateY(-1px) scale(1.02) !important;
}

/* The pre-footer section (#sec-d69a / .u-section-9) we want clean & dark,
   so the gold and green pills stand out properly. */
body.talma-v2 #sec-d69a,
body.talma-v2 .u-section-9 {
  background: linear-gradient(180deg, #0a0905 0%, #14110a 60%, #0a0905 100%) !important;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

body.talma-v2 #sec-d69a .u-sheet-1,
body.talma-v2 .u-section-9 .u-sheet-1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

@media (max-width: 480px) {
  body.talma-v2 .u-social-icons-1 {
    gap: 14px !important;
  }
  body.talma-v2 .u-social-icons-1 .u-social-url {
    width: 54px;
    height: 54px;
  }
  body.talma-v2 a[href*="wa.me"] {
    padding: 12px 22px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   end glossy social + whatsapp
   ========================================================================== */

/* Ensure no remaster animation runs on the section boxes themselves. */
body.talma-v2.talma-home-page #carousel_42ca,
body.talma-v2.talma-home-page #sec-21fc,
body.talma-v2.talma-home-page #sec-8c96 {
  animation: none !important;
  transform: none !important;
}

/* ==========================================================================
   /prueba/ — clase de prueba form: readable text + clear active state.
   The remaster forces light cream text site-wide via `body.talma-v2` rules.
   The trial form lives on a #fff card so we have to lock dark text and
   crank up contrast on the selected category/schedule pills.
   ========================================================================== */

body.talma-v2 #talma-cp-form-wrap,
body.talma-v2 #talma-cp-form-wrap * {
  color: #1a1a2e !important;
  text-shadow: none !important;
}
body.talma-v2 #talma-cp-form-wrap .tcp-cat-btn,
body.talma-v2 #talma-cp-form-wrap .tcp-clase-btn {
  color: #1a1a2e !important;
  background: #ffffff !important;
  border: 2px solid #e0e0e0 !important;
}
body.talma-v2 #talma-cp-form-wrap .tcp-cat-btn:hover,
body.talma-v2 #talma-cp-form-wrap .tcp-clase-btn:hover {
  border-color: #d2ae5f !important;
  background: #fdf6e3 !important;
}
body.talma-v2 #talma-cp-form-wrap .tcp-cat-btn.active,
body.talma-v2 #talma-cp-form-wrap .tcp-clase-btn.active {
  background: linear-gradient(140deg, #d2ae5f 0%, #a3822f 100%) !important;
  border-color: #8b6c1f !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 18px -6px rgba(163, 130, 47, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px);
}
body.talma-v2 #talma-cp-form-wrap .tcp-cat-btn.active *,
body.talma-v2 #talma-cp-form-wrap .tcp-clase-btn.active * {
  color: #ffffff !important;
}

/* Privacy checkbox row — keep dark text on the white card. */
body.talma-v2 #talma-cp-form-wrap .tcp-checkbox-label,
body.talma-v2 #talma-cp-form-wrap .tcp-checkbox-label *,
body.talma-v2 #talma-cp-form-wrap .tcp-checkbox-label span {
  color: #1a1a2e !important;
  font-weight: 500 !important;
}
body.talma-v2 #talma-cp-form-wrap .tcp-checkbox-label a {
  color: #8b6c1f !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}

/* Inputs and labels also need to keep their dark colors against #fff. */
body.talma-v2 #talma-cp-form-wrap label,
body.talma-v2 #talma-cp-form-wrap input,
body.talma-v2 #talma-cp-form-wrap select,
body.talma-v2 #talma-cp-form-wrap textarea {
  color: #1a1a2e !important;
}
body.talma-v2 #talma-cp-form-wrap input::placeholder {
  color: #8a8a8a !important;
}

/* Submit button keeps the gold gradient even with the global overrides. */
body.talma-v2 #talma-cp-form-wrap .tcp-submit {
  background: linear-gradient(140deg, #d2ae5f 0%, #a3822f 100%) !important;
  color: #1a1a2e !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}
body.talma-v2 #talma-cp-form-wrap .tcp-submit:disabled {
  background: #d4d4d4 !important;
  color: #6b6b6b !important;
  opacity: 0.85;
}

/* Same treatment for the /registro/ form which lives on a dark card. */
body.talma-v2 #trf-form,
body.talma-v2 #trf-form *,
body.talma-v2 .trf-success,
body.talma-v2 .trf-success * {
  text-shadow: none !important;
}
