:root {
  color-scheme: light dark;
  /* Typography */
  --font_family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --base_font_size: 17px;

  /* Version B: optional overrides */
  --h1_size: unset;
  --h2_size: unset;
  --h3_size: unset;
  --mini_size: unset;
  --logo_float_d: -0.40;
  /* multiplier */
  --logo_float_m: -0.40;
  /* multiplier */
  --media_max_h: 460px;

  /* Logo sizes (device specific) */
  --logo_size_d: 120px;
  /* desktop */
  --logo_size_m: 96px;
  /* mobile */
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font_family, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: var(--base_font_size, 17px);
  /* Fondo externo: mantenlo simple para evitar "cortes" visibles en algunos navegadores.
     Los colores siguen siendo editables via --page_bg_a / --page_bg_b. */
  background: linear-gradient(135deg, var(--page_bg_a, #060913), var(--page_bg_b, #050814));
  background-attachment: fixed;
  color: var(--text_color, #e5e7eb);
}

/* Decorative page layer (keeps external background visible even with very light shells).
   Pattern is selected by the random generator and attached as a class on .tv-outer. */
.tv-outer {
  position: relative;
}

.tv-outer::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: var(--page_pattern_op, .55);
  background: linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
}

.tv-outer.tv-pattern--dots::before {
  opacity: var(--page_pattern_op, .40);
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .22) 1px, transparent 1.4px),
    linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
  background-size: 14px 14px, auto;
}

.tv-outer.tv-pattern--mesh::before {
  opacity: var(--page_pattern_op, .55);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 52%),
    linear-gradient(250deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 52%),
    radial-gradient(800px 480px at 20% 18%, rgba(56, 189, 248, 0.15), transparent 65%),
    radial-gradient(800px 480px at 80% 22%, rgba(168, 85, 247, 0.15), transparent 66%),
    linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
}

.tv-outer.tv-pattern--grid::before {
  opacity: var(--page_pattern_op, .42);
  background:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
  background-size: 22px 22px, 22px 22px, auto;
}

.tv-outer.tv-pattern--rings::before {
  opacity: var(--page_pattern_op, .50);
  background:
    radial-gradient(circle at 20% 22%, rgba(255, 255, 255, .10) 0 10%, transparent 11% 100%),
    radial-gradient(circle at 78% 28%, rgba(255, 255, 255, .10) 0 12%, transparent 13% 100%),
    radial-gradient(circle at 55% 78%, rgba(255, 255, 255, .08) 0 14%, transparent 15% 100%),
    radial-gradient(900px 520px at 18% 12%, rgba(56, 189, 248, 0.12), transparent 66%),
    radial-gradient(900px 520px at 82% 18%, rgba(168, 85, 247, 0.12), transparent 66%),
    linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
}

.tv-outer.tv-pattern--noise::before {
  opacity: var(--page_pattern_op, .35);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .05) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .04) 1px, transparent 1px, transparent 4px),
    radial-gradient(900px 520px at 18% 12%, var(--brand_a, #38bdf8), transparent 66%),
    linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
}

.tv-outer.tv-pattern--aurora::before {
  opacity: var(--page_pattern_op, .62);
  background:
    radial-gradient(900px 620px at 18% 12%, var(--brand_a, #38bdf8), transparent 68%),
    radial-gradient(980px 660px at 86% 18%, var(--brand_b, #a855f7), transparent 70%),
    radial-gradient(820px 540px at 50% 86%, var(--brand_a, #38bdf8), transparent 72%),
    linear-gradient(135deg, var(--page_bg_a, #0b1020), var(--page_bg_b, #040614));
}

.tv-outer {
  min-height: 100vh;
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.tv-shell {
  width: min(var(--page_max_width, 1000px), 100%);
  padding: 14px;
  /* Typography scaling is applied at the shell level because template CSS variables
     are injected on .tv-shell (not :root). Use em-based sizes inside the card. */
  font-size: var(--base_font_size, 17px);
  border-radius: calc(var(--radius, 22px) + 10px);
  background: linear-gradient(135deg, var(--outer_a, #050814), var(--outer_b, #020617));
  box-shadow: 0 18px 55px rgba(0, 0, 0, var(--shell_shadow_op, .35));
  border: 1px solid rgba(255, 255, 255, var(--shell_border_op, .08));
  position: relative;
  overflow: hidden;
}

/* External glow layer (keeps the "page" looking rich even on light palettes) */
.tv-shell::before {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: 0;
  opacity: .14;
  filter: blur(42px);
  background:
    radial-gradient(900px 520px at 18% 12%, var(--brand_a, #38bdf8), transparent 65%),
    radial-gradient(900px 520px at 82% 18%, var(--brand_b, #a855f7), transparent 64%),
    radial-gradient(750px 460px at 50% 85%, var(--brand_a, #38bdf8), transparent 70%);
}

.tv-card {
  max-width: var(--card_max_width, 100%);
  margin: 0 auto;
  border-radius: var(--radius, 22px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--inner_a, #0b1220), var(--inner_b, #050814));
  border: 1px solid rgba(255, 255, 255, var(--card_border_op, .08));
  position: relative;
  z-index: 1;
}

/* Internal accent so the card never looks "flat" */
.tv-card::before {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  z-index: 0;
  opacity: .10;
  filter: blur(34px);
  background:
    radial-gradient(700px 420px at 22% 20%, var(--brand_a, #38bdf8), transparent 62%),
    radial-gradient(700px 420px at 78% 26%, var(--brand_b, #a855f7), transparent 62%);
}

.tv-card>* {
  position: relative;
  z-index: 1;
}

/* -----------------------------
   UI styles (persisted)
   ----------------------------- */
.tv-shell.tv-style--neo {
  --shell_shadow_op: .40;
  --shell_border_op: .09;
}

.tv-shell.tv-style--glass {
  --shell_shadow_op: .34;
  --shell_border_op: .11;
}

.tv-shell.tv-style--soft {
  --shell_shadow_op: .20;
  --shell_border_op: .10;
}

.tv-shell.tv-style--bold {
  --shell_shadow_op: .42;
  --shell_border_op: .14;
}

.tv-shell.tv-style--minimal {
  --shell_shadow_op: .18;
  --shell_border_op: .08;
}

.tv-shell.tv-style--aurora {
  --shell_shadow_op: .38;
  --shell_border_op: .10;
}

.tv-card.tv-style--glass {
  --card_border_op: .12;
}

.tv-card.tv-style--soft {
  --card_border_op: .10;
}

.tv-card.tv-style--bold {
  --card_border_op: .14;
}

.tv-card.tv-style--minimal {
  --card_border_op: .06;
}

.tv-card.tv-style--aurora {
  --card_border_op: .10;
}

/* Soft: reduce the internal glow so typography stays crisp */
.tv-card.tv-style--soft::before {
  opacity: .07;
  filter: blur(28px);
}

.tv-card.tv-style--minimal::before {
  opacity: .05;
  filter: blur(24px);
}

.tv-card.tv-style--bold::before {
  opacity: .12;
  filter: blur(36px);
}

/* HERO */
/* Un poco mas alto en PC, sin desbordar en movil */
.tv-hero {
  position: relative;
  height: var(--hero_h, 380px);
  overflow: visible;
}

@media (max-width: 640px) {
  .tv-hero {
    height: clamp(200px, calc(var(--hero_h, 380px) * 0.85), 600px);
  }
}

/* Tipo 1 (Classic): DISABLED old decorative divider to prevent visual artifacts */
.tv-hero--classic:after {
  display: none !important;
}

.tv-hero--classic.tv-hero--div-none:after {
  display: none;
}


/* Tipo 2 (ClickCard): compacto pero responsivo */
.tv-hero--clickcard {
  height: var(--hero_h, 380px);
  --logo_inset: clamp(24px, calc(var(--logo_size, 94px) * 0.25), 80px);
}

.tv-hero__click {
  position: relative;
  height: 100%;
  overflow: visible;
}

/* Modernized ClickCard Dividers */
.tv-hero__wave {
  display: block;
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: -60px;
  height: 140px;
  background: var(--inner_a, #0F172A);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 -10px 15px rgba(0, 0, 0, .15));
}

.tv-hero--clickcard.tv-hero--div-none .tv-hero__wave {
  display: none;
}

.tv-hero--clickcard.tv-hero--div-wave .tv-hero__wave {
  border-radius: 100% 100% 0 0;
  transform: scaleX(1.5) rotate(var(--divider_rot, -1deg));
  bottom: -70px;
}

.tv-hero--clickcard.tv-hero--div-curve .tv-hero__wave {
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  bottom: -50px;
}

.tv-hero--clickcard.tv-hero--div-wedge .tv-hero__wave {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 60%);
  bottom: -80px;
  height: 160px;
}

.tv-hero--clickcard.tv-hero--div-peak .tv-hero__wave {
  clip-path: polygon(50% 0%, 100% 40%, 100% 100%, 0 100%, 0 40%);
  bottom: -60px;
}

.tv-hero--clickcard.tv-hero--div-asym .tv-hero__wave {
  clip-path: polygon(0% 15%, 45% 0%, 100% 25%, 100% 100%, 0% 100%);
  bottom: -70px;
}

.tv-hero__row {
  position: absolute;
  left: var(--logo_inset, 24px);
  right: var(--logo_inset, 24px);
  bottom: 0px;
  z-index: 9900 !important;
  /* Above dividers */
  display: flex;
}

.tv-hero__row.right {
  justify-content: flex-end;
}

.tv-hero__row.left {
  justify-content: flex-start;
}



.tv-logo--side {
  position: relative;
  transform: none;
  left: auto;
  bottom: auto;
}

.tv-hero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  z-index: 1;
  border-bottom-left-radius: var(--hero_round, 0px);
  border-bottom-right-radius: var(--hero_round, 0px);
}

.tv-hero__overlay {
  position: absolute;
  inset: 0;
  /* Add a subtle bottom fade so the hero doesn't feel "cut". */
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 82%,
      rgba(0, 0, 0, 0.08) 100%),
    var(--hero_ol_bg, rgba(0, 0, 0, var(--hero_overlay, 0.06)));
  z-index: 2;
  border-bottom-left-radius: var(--hero_round, 0px);
  border-bottom-right-radius: var(--hero_round, 0px);
}



/* HIDE OLD CSS DIVIDERS */
.tv-hero:after,
.tv-hero__wave {
  display: none !important;
}

/* PREMIUM SVG SHAPE DIVIDER - LARGE VISIBLE OVERLAYS (Like reference images!) */
.tv-shape-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  line-height: 0;
  z-index: 15;
  /* Above hero image AND overlay */
  pointer-events: none;
}

.tv-shape-divider svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100px;
  /* DEFAULT: Large enough to be VISIBLE like in references */
}

.tv-shape-divider .shape-fill {
  /* Fill with the CONTENT background color to create smooth transition */
  fill: var(--inner_a, #0F172A);
  opacity: 1;
}

/* LARGE, VISIBLE divider heights (matching reference images like Jessica's yellow curve) */
.tv-shape-divider--curve_down svg {
  height: 60px;
  /* Reduced again for more visibility */
}

.tv-shape-divider--curve_up svg {
  height: 55px;
}

.tv-shape-divider--diagonal_left svg,
.tv-shape-divider--diagonal_right svg {
  height: 40px;
  /* Visible diagonal */
}

.tv-shape-divider--wave_soft svg {
  height: 55px;
}

.tv-shape-divider--tilt_subtle svg {
  height: 35px;
}

.tv-shape-divider--slope_gentle svg {
  height: 40px;
}

.tv-shape-divider--round_soft svg {
  height: 70px;
  /* Largest for maximum curve - reduced height */
}

.tv-shape-divider--angle_clean svg {
  height: 45px;
}

/* Clean professional look - no shadow needed */

.tv-hero.tv-hero--div-none:after {
  display: none;
}


.tv-logo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--logo_size_d, var(--logo_size, 94px)) * var(--logo_float_d, -0.40));
  transform: translateX(-50%);
  z-index: 50;
  transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Ensure blocks in mandatory group are concise */
.tv-mandatory-group .tv-block__head {
  padding: 10px 14px 8px !important;
  /* Reduced from 14px/16px/14px */
}

.tv-mandatory-group .tv-block {
  padding: 10px !important;
}

.tv-head-hero_centered .tv-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Remove absolute constraints for centering in this specific mode */
.tv-head-hero_centered .tv-logo {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 100 !important;
}

.tv-head-hero_centered .tv-hero__row {
  display: contents !important;
}

.tv-head-hero_centered .tv-logo--side {
  margin: 0 !important;
}

.tv-logo__ring {
  width: var(--logo_size_d, var(--logo_size, 94px));
  height: var(--logo_size_d, var(--logo_size, 94px));
  border-radius: 999px;
  padding: clamp(6px, calc(var(--logo_size_d, var(--logo_size, 94px)) * 0.06), 16px);
  background: linear-gradient(135deg, var(--brand_a, #38bdf8), var(--brand_b, #a855f7));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 999999;
}

.tv-logo__ring:before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: inherit;
  filter: blur(20px);
  opacity: 0.4;
  z-index: -1;
  animation: logoHalo 4s infinite alternate ease-in-out;
}

@keyframes logoHalo {
  from {
    transform: scale(1);
    opacity: 0.3;
  }

  to {
    transform: scale(1.15);
    opacity: 0.5;
  }
}

/* Logo positioning (shared across hero styles) */
/* Logo alignment overrides */
.tv-hero--logo-left .tv-logo {
  left: 20px;
  right: auto;
  transform: translateX(0);
}

.tv-hero--logo-right .tv-logo {
  left: auto;
  right: 20px;
  transform: translateX(0);
}

.tv-hero--logo-center .tv-logo {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Vertical position adjustment for specific card types */
.tv-card--clickcard .tv-logo--side {
  transform: translateY(22px) !important;
  z-index: 100 !important;
}

.tv-card--clickcard.tv-logo-center .tv-logo--side {
  transform: translate(-50%, 22px) !important;
  z-index: 100 !important;
}

.tv-card--clickcard .tv-logo__ring {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
}

.tv-hero__row.left .tv-logo--side {
  margin-left: 6px;
}

.tv-hero__row.right .tv-logo--side {
  margin-right: 6px;
}

.tv-logo__core {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tv-logo__core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------
   Header Layout: Info First
   ----------------------------- */
.tv-header-top {
  padding: 32px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 10;
}

.tv-logo--top {
  position: relative;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.tv-head-info_first .tv-titles {
  padding: 0 18px 24px !important;
  margin-top: 0 !important;
}

.tv-head-info_first .tv-hero {
  height: clamp(200px, var(--hero_h, 380px), 600px);
  margin-top: 10px;
}

/* Ensure no overlap in info_first */
.tv-head-info_first .tv-titles h1 {
  margin-top: 0;
}

.tv-titles h1 {
  color: var(--h1_color, #f8fafc);
}

.tv-titles h2 {
  color: var(--h2_color, #e2e8f0);
}

.tv-logo__placeholder {
  font-size: 11px;
  color: #0b1220;
  font-weight: 900;
}

/* TITLES */
/* Avoid horizontal overlap when logo is left/right and user selects "Se desplaza" */
.tv-card.tv-side-offset.tv-logo-left .tv-titles {
  padding-left: calc((var(--logo_size_d, 140px) * .60) + 26px);
  text-align: left;
}

.tv-card.tv-side-offset.tv-logo-right .tv-titles {
  padding-right: calc((var(--logo_size_d, 140px) * .60) + 26px);
  text-align: right;
}

@media (max-width: 560px) {
  .tv-card.tv-side-offset.tv-logo-left .tv-titles {
    padding-left: calc((var(--logo_size_m, 94px) * .60) + 22px);
  }

  .tv-card.tv-side-offset.tv-logo-right .tv-titles {
    padding-right: calc((var(--logo_size_m, 94px) * .60) + 22px);
  }
}

.tv-titles {
  position: relative;
  z-index: 4;
  padding: var(--titles_pad_top, 58px) 18px 12px;
  text-align: center;
}

/* Reserve enough vertical space so the floating logo never overlaps the first title line */
.tv-card--classic {
  /* Reserve enough space for the portion of the floating logo that hangs below the hero, without creating huge gaps */
  --titles_pad_top: calc((var(--logo_size_d, 140px) / 2) + 24px);
}

@media (max-width: 560px) {
  .tv-card--classic {
    --titles_pad_top: clamp(64px, calc(22px + (var(--logo_size_m, var(--logo_size, 94px)) * (var(--logo_float_m, -0.40) * -1)) + 16px), 160px);
  }
}

.tv-card--classic .tv-titles {
  position: relative;
  z-index: 4;
  background: transparent;
}

.tv-titles h1 {
  margin-top: 0;
  color: var(--h1_color, #f8fafc) !important;
  font-size: var(--h1_size, 30px) !important;
  letter-spacing: .3px;
  font-weight: 900;
}

/* Optional H1 gradient (toggle via editor) */
.tv-card.tv-h1grad .tv-titles h1 {
  background: linear-gradient(135deg, var(--brand_a, #38BDF8), var(--brand_b, #A855F7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.tv-titles h2 {
  margin: 8px 0 0;
  color: var(--h2_color, #e2e8f0) !important;
  font-size: var(--h2_size, 18px) !important;
  font-weight: 650;
  opacity: .95;
}

.tv-titles .mini {
  margin-top: 8px;
  font-size: var(--mini_size, 14px) !important;
  color: var(--text_color, #e5e7eb) !important;
  opacity: .85;
}


/* Persisted alignment under hero (can differ from the random variant class) */
.tv-card.tv-align-left .tv-titles {
  position: relative;
  z-index: 4;
  text-align: left;
}

.tv-card.tv-align-right .tv-titles {
  position: relative;
  z-index: 4;
  text-align: right;
}

.tv-card.tv-align-left .tv-chips,
.tv-card.tv-align-left .tv-social {
  justify-content: flex-start;
}

.tv-card.tv-align-right .tv-chips,
.tv-card.tv-align-right .tv-social {
  justify-content: flex-end;
}

/* SOCIAL */
.tv-social {
  padding: 10px 14px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.tv-social--brand a {
  background: linear-gradient(135deg, var(--brand_a), var(--brand_b)) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

.tv-social--brand svg,
.tv-social--brand svg path,
.tv-social--brand svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}


.tv-card--classic .tv-social {
  background: transparent;
}

.tv-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-social__label {
  display: none;
  white-space: nowrap;
}

.tv-social a {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: transform .15s ease, filter .15s ease;
}

.tv-social a:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.tv-social svg {
  width: 24px;
  height: 24px;
  fill: var(--social_icon_color, #e5e7eb);
}

/* Social buttons
   - Desktop: one clean row (no awkward wrapping)
   - Mobile: wrap into a centered 3-per-row grid to avoid odd "floating" icons */
.tv-card.tv-social-row .tv-social {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.tv-card.tv-social-row .tv-social::-webkit-scrollbar {
  display: none;
}

@media (max-width: 560px) {
  .tv-card.tv-social-row .tv-social {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .tv-card.tv-social-row .tv-social a {
    flex: 0 0 calc((100% - 24px) / 3);
    max-width: 96px;
    border-radius: 18px;
  }
}

/* Social layout variants */
.tv-card.tv-social-stack .tv-social {
  flex-direction: column;
  align-items: center;
}

.tv-card.tv-social-stack .tv-social a {
  width: min(560px, 100%);
  height: auto;
  padding: 12px 14px;
  border-radius: 18px;
  justify-content: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
}

.tv-card.tv-social-stack .tv-social__label {
  display: block;
  font-size: 15px;
  font-weight: 850;
  color: var(--text_color, #e5e7eb);
  opacity: .95;
}

.tv-card.tv-social-stack .tv-social svg {
  width: 26px;
  height: 26px;
}

.tv-card.tv-social-stack .tv-social__label {
  display: block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text_color, #e5e7eb);
  opacity: .95;
}

.tv-card.tv-social-stack .tv-social svg {
  width: 26px;
  height: 26px;
}

.tv-card.tv-social-grid3 .tv-social {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
  align-items: center;
}

.tv-card.tv-social-grid3 .tv-social a {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

@media (max-width: 520px) {
  .tv-card.tv-social-grid3 .tv-social a {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }
}

/* CHIPS */
.tv-chips {
  padding: 0 14px 12px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tv-chips::-webkit-scrollbar {
  display: none;
}

.tv-card--classic .tv-chips {
  background: transparent;
}

.tv-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 800;
  color: var(--text_color, #e5e7eb);
  margin:10px;
}

.tv-card--classic .tv-chip {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}

.tv-chip .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand_a, #38bdf8), var(--brand_b, #a855f7));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
  flex: 0 0 auto;
}

.tv-chip.off {
  opacity: .55;
}

.tv-chip.off .dot {
  background: rgba(255, 255, 255, .35);
}

/* CONTENT */
.tv-content {
  padding: 14px 16px 14px;
}

/* Two-column group used by Random structure */
.tv-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px) {
  .tv-cols {
    grid-template-columns: 1fr;
  }
}

.tv-cols .tv-block {
  margin-top: 0;
}

.tv-block {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}

.tv-block__head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.tv-block__head h2 {
  margin: 0;
  color: var(--h2_color, #e2e8f0) !important;
  font-size: var(--h2_size, 20px) !important;
  letter-spacing: .35px;
  font-weight: 900;
}

.tv-block__head h3 {
  margin: 0;
  color: var(--h3_color, #cbd5e1) !important;
  font-size: var(--h3_size, 17px) !important;
  font-weight: 850;
}

.tv-block__head svg {
  width: 22px;
  height: 22px;
  fill: var(--section_icon_color, #93c5fd);
}

.tv-block p {
  margin: 0;
  color: var(--text_color, #e5e7eb);
  font-size: 1em;
  line-height: 1.55;
  opacity: .92;
}

/* GALLERY */
.tv-gallery {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.tv-gallery.grid-1 {
  grid-template-columns: 1fr;
}

.tv-gallery.grid-2 {
  grid-template-columns: 1fr 1fr;
}

.tv-gallery .gimg {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .25);
  height: clamp(200px, 30vw, var(--media_h, 360px));
  max-height: 460px;
}

.tv-gallery.grid-1 .gimg {
  height: clamp(220px, 48vw, var(--media_h, 420px));
  max-height: 460px;
}

.tv-gallery .gimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ SLIDER (CORREGIDO) */
.tv-gallery.slider {
  display: block;
  /* clave: evita comportamiento de grid aquí */
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 5;
  /* 900x500 */
  height: auto;
  min-height: 190px;
  max-height: var(--media_max_h, 460px);
}

@media (max-width: 520px) {
  .tv-gallery.slider {
    display: block;
    aspect-ratio: 9 / 5;
    height: auto;
    min-height: 190px;
    max-height: var(--media_max_h, 460px);
  }

  .tv-gallery.grid-1 .gimg {
    height: clamp(140px, 48vw, 240px);
    max-height: 260px;
  }

  .tv-gallery.grid-2 .gimg {
    height: clamp(120px, 42vw, 210px);
    max-height: 230px;
  }
}

.tv-gallery.slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}

.tv-gallery.slider .slide.active {
  opacity: 1;
}

.tv-gallery.slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Slider controls */
.tv-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
}

.tv-slider__arrow:hover {
  filter: brightness(1.08);
}

.tv-slider__arrow svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, .9);
}

.tv-slider__arrow.prev {
  left: 10px;
}

.tv-slider__arrow.next {
  right: 10px;
}

.tv-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
  z-index: 6;
}

.tv-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .18);
  cursor: pointer;
}

.tv-slider__dot.active {
  background: rgba(255, 255, 255, .85);
}

/* MAP */
/* MAP & CONTACT Harmonization */
.tv-map,
.tv-contact {
  margin-top: 10px !important;
  /* Reduced from 14px */
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  /* Reduced from 12px */
  align-items: stretch !important;
  width: 100% !important;
}

.tv-map__addr,
.tv-contact__addr {
  width: 100% !important;
  display: block !important;
}

.tv-map__addr,
.tv-contact__addr {
  font-size: 13px;
  opacity: .98;
  color: var(--h2_color, #e2e8f0);
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  display: block;
  margin: 0 !important;
  width: 100%;
}

.tv-map__img {
  display: none;
  text-decoration: none;
}

.tv-map__img.show {
  display: block;
  width: 100% !important;
}

.tv-map__imgInner {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  /* Force square to match QR */
  height: auto !important;
  max-height: 440px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background-size: cover;
  /* cover instead of contain for better square fill */
  background-repeat: no-repeat;
  background-position: center;
}

/* Force QR to same square logic */
.tv-qr__img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: 380px;
  margin: 0 !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* QR */
.tv-qr {
  margin-top: 12px;
  display: none;
}

.tv-qr.show {
  display: block;
  margin: 0 !important;
  width: 100%;
}

.tv-qr__img {
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 460px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .92);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-origin: content-box;
  background-clip: content-box;
  padding: 10px;
}

/* Head styles for content blocks */
.tv-card.tv-headstyle-pill .tv-block__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
}

.tv-block__head svg {
  width: 24px;
  height: 24px;
  fill: var(--section_icon_color, var(--brand_a, #38BDF8));
}

.tv-card.tv-headstyle-pill .tv-block__head h2,
.tv-card.tv-headstyle-pill .tv-block__head h3 {
  margin: 0;
}

.tv-card.tv-headstyle-bar .tv-block__head {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .12);
}

.tv-card.tv-headstyle-bar .tv-block__head:after {
  content: '';
  display: block;
  height: 3px;
  width: 100%;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand_a), var(--brand_b));
  opacity: .85;
}

.tv-card.tv-headstyle-minimal .tv-block__head {
  background: transparent;
  border: 0;
  padding: 0;
}

.tv-card.tv-headstyle-minimal .tv-block {
  border-color: rgba(255, 255, 255, .10);
}

.tv-card.tv-headstyle-glass .tv-block__head {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 12px 12px;
  backdrop-filter: blur(14px);
}

/* Button columns - Intelligent grid for PC */
.tv-bottom {
  padding: 12px 16px 18px;
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile fallback */
  gap: 10px;
}

@media (min-width: 641px) {
  .tv-bottom {
    grid-template-columns: 1fr 1fr !important;
    /* Force 2 columns on PC as per user request/image */
  }
}

/* Explicit overrides if needed by class */
.tv-card.tv-btncols-2 .tv-bottom {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .tv-bottom {
    grid-template-columns: 1fr !important;
  }
}

/* Button styles (persisted) */
.tv-card.tv-btnstyle-pill .tv-btn {
  border-radius: 999px;
}

.tv-card.tv-btnstyle-pill .tv-btn__icon {
  border-radius: 999px;
}

.tv-card.tv-btnstyle-boxed .tv-btn {
  background: linear-gradient(135deg, var(--btn_bg_a, var(--btn_grad_a, var(--brand_a))), var(--btn_bg_b, var(--btn_grad_b, var(--brand_b))));
  color: var(--text_color, #e5e7eb);
  border: 1px solid rgba(255, 255, 255, .14);
}

.tv-card.tv-btnstyle-boxed .tv-btn:before {
  display: none;
}

.tv-card.tv-btnstyle-boxed .tv-btn__icon {
  background: rgba(255, 255, 255, .14);
}

.tv-card.tv-btnstyle-boxed .tv-btn__icon svg {
  fill: var(--social_icon_color, #e5e7eb);
}

.tv-card.tv-btnstyle-soft .tv-btn {
  background: linear-gradient(135deg, var(--btn_bg_a, var(--btn_grad_a, var(--brand_a, #38bdf8))), var(--btn_bg_b, var(--btn_grad_b, var(--brand_b, #a855f7))));
  color: var(--text_color, #e5e7eb);
  border: 1px solid rgba(255, 255, 255, .10);
}

.tv-card.tv-btnstyle-soft .tv-btn:before {
  display: none;
}

/* Robust Gradient Border Button (No Pseudo-elements/Z-Index issues) */
.tv-btn {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--btn_radius, 18px);
  text-decoration: none;

  /* 1. Define Gradient Variables */
  --bg-grad: linear-gradient(135deg, var(--btn_grad_a, var(--brand_a, #38bdf8)), var(--btn_grad_b, var(--brand_b, #a855f7)));
  --border-grad: linear-gradient(135deg, var(--btn_border_a, var(--brand_a, #38bdf8)), var(--btn_border_b, var(--brand_b, #a855f7)));

  /* 2. Layer Backgrounds: Top (Face) -> Bottom (Border) */
  background-image: var(--bg-grad), var(--border-grad);

  /* 3. Clip: Face to inside (padding-box), Border to full edge (border-box) */
  background-origin: border-box;
  background-clip: padding-box, border-box;

  /* 4. Transparent border acts as the window for the bottom gradient */
  border: var(--btn_border_w, 2px) solid transparent;

  color: var(--btn_text_color, #0b1220);
  position: relative;
  /* Ensure clean rendering */
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
}

.tv-btn:before {
  display: none;
}

.tv-btn:hover {
  filter: brightness(1.03);
}

.tv-btn__left {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tv-btn__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tv-btn__icon svg {
  width: 30px;
  height: 30px;
  fill: var(--btn_icon_color, #0b1220);
}

.tv-btn__texts {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.tv-btn__title {
  font-weight: 900;
  font-size: var(--btn_title_size, 16px);
}

.tv-btn__value {
  font-weight: 700;
  font-size: var(--btn_value_size, 12px);
  opacity: .92;
}

.tv-btn__chev svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .65;
}

.tv-foot {
  padding: 0 16px 16px;
  text-align: center;
}

.tv-foot .tiny {
  font-size: 11px;
  opacity: .55;
}

/* -----------------------------
   Version B: Random layouts
   ----------------------------- */
.tv-card.tv-rand--left .tv-titles {
  position: relative;
  z-index: 4;
  text-align: left;
  padding: var(--titles_pad_top, 52px) 22px 12px;
}

.tv-card.tv-rand--left .tv-social {
  justify-content: flex-start;
  padding-left: 22px;
  padding-right: 22px;
}

.tv-card.tv-rand--left .tv-chips {
  justify-content: flex-start;
  padding-left: 22px;
  padding-right: 22px;
}
.tv-chip {
  flex: 0 0 auto; /* <--- IMPORTANTE: Impide que se aplasten */
  /* ... (otras cosas visuales que ya tengas) ... */
}

.tv-card.tv-rand--tight .tv-content {
  padding: 10px 12px 12px;
}

.tv-card.tv-rand--tight .tv-block {
  border-radius: 16px;
  padding: 10px;
}

.tv-card.tv-rand--split .tv-content {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 12px;
}

.tv-card.tv-rand--split .tv-content .tv-block {
  margin-top: 0;
}

.tv-card.tv-rand--split .tv-bottom {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tv-card.tv-rand--glass .tv-block {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
}

@media (max-width: 860px) {
  .tv-card.tv-rand--split .tv-content {
    grid-template-columns: 1fr;
  }

  .tv-card.tv-rand--split .tv-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tv-outer {
    padding: 14px;
  }

  .tv-card--classic {
    --titles_pad_top: clamp(64px, calc(22px + (var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px))) * (var(--logo_float_m, -0.40) * -1)) + 16px), 160px);
  }

  .tv-hero {
    height: clamp(200px, calc(var(--hero_h, 380px) * 0.82), 600px);
  }

  .tv-logo {
    bottom: calc(var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px))) * var(--logo_float_m, -0.40));
  }

  .tv-logo__ring {
    width: var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px)));
    height: var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px)));
    padding: clamp(6px, calc(var(--logo_size_m, var(--logo_size_d, var(--logo_size, 94px))) * 0.06), 14px);
  }
}


/* Full-width rules for key media blocks */
/* Full-width rules for key media blocks when they are top-level children */
.tv-card.tv-rand--split>.tv-content>#map,
.tv-card.tv-rand--grid>.tv-content>#map,
.tv-card.tv-rand--split>.tv-content>#gallery,
.tv-card.tv-rand--grid>.tv-content>#gallery {
  grid-column: 1 / -1;
}

/* Ensure the Map/Contact container spans BOTH columns in Split/Grid layout */
.tv-mandatory-group {
  grid-column: 1 / -1 !important;
}

/* Ensure internal blocks behave as individual columns */
.tv-mandatory-group .tv-block {
  grid-column: span 1 !important;
  margin-top: 0 !important;
}

/* Extra variants */
.tv-card.tv-rand--grid .tv-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}

@media (min-width: 920px) {
  .tv-card.tv-rand--grid .tv-content {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .tv-card.tv-rand--grid .tv-block {
    margin-top: 0;
  }

  .tv-card.tv-rand--grid .tv-block:nth-child(1) {
    grid-column: 1 / -1;
  }
}

/* Equalize and align media blocks when grid is enabled */
.tv-card.tv-rand--grid .tv-block {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tv-card.tv-rand--grid #map .tv-map {
  flex: 1;
}

.tv-card.tv-rand--grid .tv-map__img,
.tv-card.tv-rand--grid .tv-qr {
  margin-top: 10px;
}

.tv-card.tv-rand--pills .tv-btn {
  border-radius: 999px;
}

.tv-card.tv-rand--pills .tv-btn__icon {
  border-radius: 999px;
}

/* Text alignment option */
.tv-card.tv-justify .tv-block p {
  text-align: justify;
  text-justify: inter-word;
}


/* Button-heavy variant */
.tv-card.tv-rand--btnbig .tv-btn {
  padding: 14px 14px;
}

.tv-card.tv-rand--btnbig .tv-btn__icon {
  border-radius: 16px;
  background: rgba(255, 255, 255, .28);
}

/* Diagonal hero cut + modern divider */
.tv-card.tv-rand--cut .tv-hero {
  position: relative;
}

.tv-card.tv-rand--cut .tv-hero__bg {
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
}

.tv-card.tv-rand--cut .tv-hero::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -26px;
  height: 70px;
  background: linear-gradient(135deg, var(--inner_a, #0b1220), var(--inner_b, #050814));
  transform: rotate(-2.2deg);
  transform-origin: center;
  z-index: 1;
  /* This band was being perceived as a "mancha" on top of photos.
     Remove it completely; the classic divider + overlay fade handle the transition. */
  display: none;
}

/* Logo halo emphasis */
.tv-card.tv-rand--halo .tv-logo__ring {
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .40),
    0 0 0 10px rgba(255, 255, 255, .08),
    0 0 0 22px rgba(255, 255, 255, .04);
}

.tv-card.tv-rand--halo .tv-logoimg {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .42));
}

/* Stacked rhythm for chips + social */
.tv-card.tv-rand--stacked .tv-chips {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-left: 22px;
  padding-right: 22px;
}

.tv-card.tv-rand--stacked .tv-chip {
  width: fit-content;
  max-width: 100%;
}

.tv-card.tv-rand--stacked .tv-social {
  padding-left: 22px;
  padding-right: 22px;
}

@supports not (-webkit-background-clip: text) {
  .tv-card.tv-h1grad .tv-titles h1 {
    color: var(--h1_color, #f8fafc);
    background: none;
  }
}


/* Side logo: keep titles clear of the logo when requested */
.tv-card.tv-side-offset .tv-titles {
  padding-left: 22px;
  padding-right: 22px;
}



.tv-card.tv-side-offset .tv-hero--logo-left+.tv-titles {
  padding-left: calc((var(--logo_size_d, 140px) / 2) + 38px);
}

.tv-card.tv-side-offset .tv-hero--logo-right+.tv-titles {
  padding-right: calc((var(--logo_size_d, 140px) / 2) + 38px);
}

@media (max-width: 720px) {
  .tv-card.tv-side-offset .tv-hero--logo-left+.tv-titles {
    padding-left: calc((var(--logo_size_m, 90px) / 2) + 28px);
  }

  .tv-card.tv-side-offset .tv-hero--logo-right+.tv-titles {
    padding-right: calc((var(--logo_size_m, 90px) / 2) + 28px);
  }
}


/* Gallery small screen height cap */
@media (max-width: 520px) {
  .tv-gallery--grid-1 img {
    height: clamp(180px, 56vw, 300px);
  }

  .tv-gallery--grid-2 img {
    height: clamp(160px, 44vw, 240px);
  }

  .tv-slider {
    height: clamp(200px, 58vw, 320px);
  }
}


/* Hero dividers (clean shapes, no masks/stains) */
.tv-hero {
  position: relative;
}

.tv-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 78px;
  pointer-events: none;
}

/* Wave */
.tv-hero--div-wave::after {
  background: linear-gradient(135deg, var(--inner_a, #0F172A), var(--inner_b, #0B1220));
  clip-path: polygon(0 55%, 12% 65%, 25% 52%, 38% 68%, 50% 54%, 62% 70%, 74% 56%, 88% 66%, 100% 58%, 100% 100%, 0 100%);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .22));
}

/* Curve */
.tv-hero--div-curve::after {
  height: 90px;
  background: linear-gradient(135deg, var(--inner_a, #0F172A), var(--inner_b, #0B1220));
  border-radius: 0 0 120% 120% / 0 0 100% 100%;
  transform: translateY(18px);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .20));
}

/* Diagonal */
.tv-hero--div-diag::after {
  background: linear-gradient(135deg, var(--inner_a, #0F172A), var(--inner_b, #0B1220));
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .22));
}

/* Gallery mobile tuning */
@media (max-width: 520px) {
  .tv-gallery--grid .tv-gimg {
    height: clamp(160px, 56vw, 300px);
  }

  .tv-gallery--slider .tv-slide {
    height: clamp(200px, 62vw, 320px);
  }
}

/* Gallery: prevent excessively tall tiles on small screens */
@media (max-width: 520px) {
  .tv-gimg {
    height: clamp(160px, 52vw, 260px);
  }

  .tv-gallery.tv-grid-2 .tv-gimg {
    height: clamp(160px, 52vw, 260px);
  }

  .tv-slider {
    height: min(280px, var(--media_h, 320px));
  }
}

/* 🚀 RICH TEXT SUPPORT & PREMIUM POLISH */
.tv-text {
  line-height: 1.6;
  color: var(--text_color, #e5e7eb);
  word-wrap: break-word;
  text-align: inherit;
  /* Allow RTE alignment to take effect */
}

.tv-text b,
.tv-text strong {
  font-weight: 800;
  color: var(--text_color, #fff);
}

.tv-text i,
.tv-text em {
  font-style: italic;
  opacity: 0.9;
}

.tv-text font[size="5"] {
  font-size: 1.25em;
  line-height: 1.4;
}

.tv-block {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tv-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tv-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tv-btn:active {
  transform: scale(0.96);
}

/* Section titles bigger and more defined as requested */
.tv-block__head h2 {
  font-size: clamp(20px, 2.5vw, 26px) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--h2_color, #E2E8F0);
}



/* Fix for mobile titles if too large */
@media (max-width: 480px) {
  .tv-block__head h2 {
    font-size: 18px !important;
  }
}

/* FIX: Crop wrapper for parallax image so it doesn't spill out, while keeping logo visible outside */
.tv-hero __crop {
  /* Note: this might be a typo in thought process, correcting in actual output */
}

.tv-hero__crop {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  border-radius: inherit;
  z-index: 0;
}

/* ========================================
   PREMIUM MOTION & GLASS ENHANCEMENTS v2
   ======================================== */

/* 1. SCROLL REVEAL (Micro-interactions) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Initially hidden, will be triggered by JS Observer */
.tv-reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.tv-reveal-active {
  opacity: 1 !important;
  transform: none !important;
}

/* 2. BUTTON HOVER EFFECTS (Micro-interactions) */
.tv-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  filter: brightness(1.1);
}

.tv-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* 3. PREMIUM GLASSMORPHISM (Refinement) */
.tv-shell.tv-style--glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  /* Inner light rim */
}

/* Glass Cards inside */
.tv-style--glass .tv-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Add noise texture to glass for "Agency" feel */
.tv-style--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* 4. HERO PARALLAX BASE */
/* Fix: Overflow visible so logo doesn't get cut */
.tv-hero {
  overflow: visible;
}

.tv-hero__img {
  /* Slightly taller to allow parallax movement */
  height: 115% !important;
  bottom: -15%;
  /* Start slightly lower */
  transition: transform 0.1s linear;
  /* Smooth update from JS */
  will-change: transform;
  z-index: 0;
  /* Ensure it stays behind dividers */
}

/* 5. SMOOTH LOGO ENTRY */
.tv-logo .tv-logo__ring {
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}

.tv-titles h1 {
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards;
}

.tv-titles h2 {
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

.tv-titles .mini {
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s backwards;
}