/* ============================================================
   Google Analytics / AdSense Theme
   Base: Bootstrap 5 + Flexbox + Google Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');

/* ── Reset & Root ─────────────────────────────────────────── */
:root {
  --google-blue:        #1a73e8;
  --google-blue-hover:  #1557b0;
  --google-blue-light:  #e8f0fe;
  --google-teal:        #137333;       /* AdSense green */
  --google-teal-link:   #188038;
  --google-green:       #0f9d58;
  --google-red:         #ff3300;
  --google-yellow:      #f9ab00;

  --surface:            #ffffff;
  --surface-alt:        #f1f3f4;
  --surface-hover:      #e8eaed;
  --surface-card:       #f8f9fa;
  --border:             #dadce0;
  --border-light:       #e8eaed;

  --text-primary:       #202124;
  --text-secondary:     #5f6368;
  --text-tertiary:      #80868b;
  --text-link:          #1a73e8;
  --text-link-teal:     #1e8e3e;

  --sidebar-width:      256px;
  --header-height:      64px;
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-2xl:         20px;
  --radius-pill:        999px;

  --shadow-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
  --shadow-3: 0 2px 6px 2px rgba(60,64,67,.15), 0 1px 2px 0 rgba(60,64,67,.30);

  --font-sans: 'Google Sans', 'Roboto', Arial, sans-serif;
  --font-display: 'Google Sans Display', 'Google Sans', Arial, sans-serif;
  --font-body: 'Roboto', Arial, sans-serif;

  --transition: 0.2s cubic-bezier(.4,0,.2,1);

  /* Button palette */
  --btn-red:      #ff3300;
  --btn-red-h:    #cc2900;
  --btn-blue:     #0066ff;
  --btn-blue-h:   #0052cc;
  --btn-green:    #00c853;
  --btn-green-h:  #00a040;
  --btn-yellow:   #ffbb00;
  --btn-yellow-h: #e6a800;
  --btn-cyan:     #00b4d8;
  --btn-cyan-h:   #0090ad;
  --btn-purple:   #7c3aed;
  --btn-purple-h: #6028c4;
  --btn-dark:     #1a1a2e;
  --btn-dark-h:   #0d0d1a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: #dee1e7;
  min-height: 100vh;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 500; }

a { text-decoration: none; }

.text-primary-g   { color: var(--text-primary)   !important; }
.text-secondary-g { color: var(--text-secondary)  !important; }
.text-tertiary-g  { color: var(--text-tertiary)   !important; }
.text-link        { color: var(--text-link)        !important; }
.text-link-teal   { color: var(--text-link-teal)   !important; }

/* ── Layout Shell ─────────────────────────────────────────── */
.g-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.g-body {
  display: flex;
  flex: 1;
  padding-top: var(--header-height);
}

.g-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  margin-left: var(--sidebar-width);
}

.g-main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

/* ── Top Bar ──────────────────────────────────────────────── */
.g-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  padding: 0 16px 0 8px;
  gap: 8px;
  z-index: 100;
}

.g-topbar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  text-decoration: none;
}

.g-topbar__logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--google-blue);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
}

.g-topbar__product {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
}

.g-topbar__spacer { flex: 1; }

.g-topbar__search {
  flex: 1;
  max-width: 720px;
  height: 40px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.g-topbar__search:focus-within {
  background: var(--surface);
  border-color: var(--google-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.g-topbar__search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
}

.g-topbar__search input::placeholder { color: var(--text-tertiary); }

.g-topbar__icon-btn {
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--transition);
  text-decoration: none;
}

.g-topbar__icon-btn:hover { background: var(--surface-hover); }

.g-topbar__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #003283;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.g-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--surface);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  z-index: 90;
  border-right: 1px solid var(--border-light);
}

.g-sidebar::-webkit-scrollbar { width: 6px; }
.g-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.g-nav-section { padding: 4px 0; }

.g-nav-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 16px 16px 4px;
}

.g-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 40px;
  border-radius: var(--radius-pill);
  margin: 2px 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}

.g-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.g-nav-item.active {
  background: var(--google-blue-light);
  color: var(--google-blue);
}

.g-nav-item .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
}

.g-nav-divider {
  border: none;
  border-top: 1px dashed var(--border-light);
  margin: 8px 0;
}

/* ── Cards ────────────────────────────────────────────────── */
.g-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.g-raised {
  background-image: linear-gradient(to bottom, #fff, var(--surface-alt)) !important;
  border:none;
}

.g-lowered  {
  background-image: linear-gradient(to top, #fff, var(--surface-alt)) !important;
  border:none;
}

.g-card--shadow     { border: none; box-shadow: var(--shadow-1); }
.g-card--flat       { background: var(--surface-card); border: 1px solid var(--border-light); }
.g-card--borderless { border: none; }

.g-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-light);
}

.g-card__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.g-card__subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.g-card__body { padding: 10px; }
.g-card__body2 { padding: 10px; }

/* .g-card__body:last-child { padding-top: 0px; } */

@media (max-width: 767px) {
  .g-card__body { padding: 10px !important; }
}

/* ── Promo / Info Card (as in screenshot) ─────────────────── */
.g-promo-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.g-promo-card__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.g-promo-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.g-promo-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-link-teal);
  text-decoration: none;
  margin-top: 4px;
  transition: opacity var(--transition);
}

.g-promo-card__link:hover { opacity: .8; }

/* Portada de edición anterior: se muestra en escala de grises */
.g-promo-card.portada-disable {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: filter .3s ease;
}
.g-promo-card.portada-disable:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* ── Promo Card — Parallax background variant ─────────────── */
.g-promo-card--parallax {
  background-image: url('../img/landing-ciberseguridad-pagina-prousuario-nat.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border: none;
  padding: 60px 48px;
  min-height: 80vh;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.g-promo-card--parallax::before {
  content: '';
  position: absolute;
  inset: 0;
  /* background: linear-gradient(135deg, rgba(0,0,0,.65) 0%, rgba(0,26,51,.5) 100%); */
  border-radius: inherit;
  z-index: 0;
}

.g-promo-card--parallax .g-promo-card__title,
.g-promo-card--parallax .g-promo-card__desc,
.g-promo-card--parallax .g-promo-card__link {
  position: relative;
  z-index: 1;
}

.g-promo-card--parallax .g-promo-card__title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.g-promo-card--parallax .g-promo-card__desc {
  color: rgba(255,255,255,.8);
  font-size: 14px;
}

.g-promo-card--parallax .g-promo-card__link {
  color: #00d4ff;
}

.g-promo-card--parallax .g-promo-card__link-icon {
  background: #00d4ff;
  color: #001a33;
}

@media (max-width: 991px) {
  .g-promo-card--parallax {
    background-attachment: scroll;
    padding: 40px 28px;
  }
}

.g-promo-card__link-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-link-teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Source Footer Bar ────────────────────────────────────── */
.g-source-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.g-source-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-link-teal);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  transition: opacity var(--transition);
}

.g-source-bar__link:hover { opacity: .8; }

.g-source-bar__ext-icon {
  font-size: 13px;
  opacity: .8;
}

/* ── Metric Cards ─────────────────────────────────────────── */
.g-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.g-metric-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition);
}

/* .g-metric-card:hover { box-shadow: var(--shadow-1); } */

.g-metric-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: .1px;
}

.g-metric-card__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.2;
}

.g-metric-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.g-metric-card__delta--up   { color: var(--google-green); }
.g-metric-card__delta--down { color: var(--google-red); }
.g-metric-card__delta--flat { color: var(--text-secondary); }

.g-metric-card__accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
}

/* ── Buttons ──────────────────────────────────────────────── */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .25px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
  user-select: none;
}

/* Filled / Primary */
.g-btn--filled {
  background: var(--google-blue);
  color: #fff;
}
.g-btn--filled:hover { background: var(--google-blue-hover); box-shadow: var(--shadow-1); }

/* Outlined */
.g-btn--outlined {
  background: transparent;
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.g-btn--outlined:hover { background: #fff; border-color: var(--text-secondary); color: var(--text-primary); }

/* Light */
.g-btn-light { background: #f1f3f4; border-color: #f1f3f4; color: var(--text-primary); }
.g-btn-light:hover { background: #e8eaed; border-color: #e8eaed; color: var(--text-primary); }

/* Text */
.g-btn--text {
  background: transparent;
  color: var(--google-blue);
  padding: 0 12px;
}
.g-btn--text:hover { background: var(--google-blue-light); }

/* Tonal */
.g-btn--tonal {
  background: var(--google-blue-light);
  color: var(--google-blue);
}
.g-btn--tonal:hover { background: #d2e3fc; }

/* Danger */
.g-btn--danger { background: var(--google-red); color: #fff; }
.g-btn--danger:hover { background: #cc2900; }

/* ══════════════════════════════════════════════════════════
   SISTEMA DE BOTONES — Bootstrap overrides
   ══════════════════════════════════════════════════════════ */

/* Base shape — todos los .btn heredan esto */
.btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  line-height: 1.4;
  transition: background-color .2s ease, opacity .2s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-sm { padding: 12px 22px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 16px; }

/* Solid variants */
.btn-primary   { background-color: var(--btn-blue);   border-color: var(--btn-blue);   color: #fff; }
.btn-secondary { background-color: #6c6c7e;            border-color: #6c6c7e;            color: #fff; }
.btn-success   { background-color: var(--btn-green);  border-color: var(--btn-green);  color: #fff; }
.btn-danger    { background-color: var(--btn-red);    border-color: var(--btn-red);    color: #fff; }
.btn-warning   { background-color: var(--btn-yellow); border-color: var(--btn-yellow); color: #000; }
.btn-info      { background-color: var(--btn-cyan);   border-color: var(--btn-cyan);   color: #fff; }
.btn-dark      { background-color: var(--btn-dark);   border-color: var(--btn-dark);   color: #fff; }
.btn-light     { background-color: #ffffff;            border: 1px solid var(--border-light); color: #000; }
.btn-teal      { background-color: var(--text-link-teal); border-color: var(--text-link-teal); color: #fff; }
.btn-purple    { background-color: var(--btn-purple);  border-color: var(--btn-purple);  color: #fff; }

/* Solid hover/focus/active */
.btn-primary:hover,   .btn-primary:focus,   .btn-primary:active   { background-color: var(--btn-blue-h);   border-color: var(--btn-blue-h);   color: #fff; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { background-color: #50505e;              border-color: #50505e;              color: #fff; }
.btn-success:hover,   .btn-success:focus,   .btn-success:active   { background-color: var(--btn-green-h);  border-color: var(--btn-green-h);  color: #fff; }
.btn-danger:hover,    .btn-danger:focus,    .btn-danger:active    { background-color: var(--btn-red-h);    border-color: var(--btn-red-h);    color: #fff; }
.btn-warning:hover,   .btn-warning:focus,   .btn-warning:active   { background-color: var(--btn-yellow-h); border-color: var(--btn-yellow-h); color: #000; }
.btn-info:hover,      .btn-info:focus,      .btn-info:active      { background-color: var(--btn-cyan-h);   border-color: var(--btn-cyan-h);   color: #fff; }
.btn-dark:hover,      .btn-dark:focus,      .btn-dark:active      { background-color: var(--btn-dark-h);   border-color: var(--btn-dark-h);   color: #fff; }
.btn-light:hover,     .btn-light:focus,     .btn-light:active     { background-color: #e9ecef;              border-color: #dee2e6;              color: #000; }
.btn-teal:hover,      .btn-teal:focus,      .btn-teal:active      { background-color: var(--text-link-teal); border-color: var(--text-link-teal); color: #fff; opacity: .85; }
.btn-purple:hover,    .btn-purple:focus,    .btn-purple:active    { background-color: var(--btn-purple-h);  border-color: var(--btn-purple-h);  color: #fff; }

/* Outline variants */
.btn-outline-primary   { border: 1px solid var(--btn-blue);   color: var(--btn-blue);   background: transparent; }
.btn-outline-secondary { border: 1px solid var(--border-light); color: #6c6c7e;            background: transparent; }
.btn-outline-success   { border: 1px solid var(--btn-green);  color: var(--btn-green);  background: transparent; }
.btn-outline-danger    { border: 1px solid var(--btn-red);    color: var(--btn-red);    background: transparent; }
.btn-outline-warning   { border: 1px solid var(--btn-yellow); color: var(--btn-yellow); background: transparent; }
.btn-outline-info      { border: 1px solid var(--btn-cyan);   color: var(--btn-cyan);   background: transparent; }
.btn-outline-dark      { border: 1px solid var(--btn-dark);   color: var(--btn-dark);   background: transparent; }
.btn-outline-light     { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; color: var(--text-primary) !important; background: transparent; }

.btn-outline-primary:hover,   .btn-outline-primary:active   { background-color: var(--btn-blue);   color: #fff; border-color: var(--btn-blue); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { background-color: #6c6c7e;            color: #fff; border-color: #6c6c7e; }
.btn-outline-success:hover,   .btn-outline-success:active   { background-color: var(--btn-green);  color: #fff; border-color: var(--btn-green); }
.btn-outline-danger:hover,    .btn-outline-danger:active    { background-color: var(--btn-red);    color: #fff; border-color: var(--btn-red); }
.btn-outline-warning:hover,   .btn-outline-warning:active   { background-color: var(--btn-yellow); color: #000; border-color: var(--btn-yellow); }
.btn-outline-info:hover,      .btn-outline-info:active      { background-color: var(--btn-cyan);   color: #fff; border-color: var(--btn-cyan); }
.btn-outline-dark:hover,      .btn-outline-dark:active      { background-color: var(--btn-dark);   color: #fff; border-color: var(--btn-dark); }

/* Sizes */
.g-btn--sm { height: 28px; font-size: 12px; padding: 0 16px; }
.g-btn--lg { height: 44px; font-size: 15px; padding: 0 32px; }

/* ── Tabs ─────────────────────────────────────────────────── */
.g-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-light);
  gap: 0;
}

.g-tab {
  position: relative;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}

.g-tab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background var(--transition);
}

.g-tab:hover { color: var(--text-primary); }
.g-tab:hover::after { background: var(--border); }

.g-tab.active { color: var(--google-blue); }
.g-tab.active::after { background: var(--google-blue); }

/* ── Chips ────────────────────────────────────────────────── */
.g-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  user-select: none;
}

.g-chip:hover { background: var(--surface-hover); }
.g-chip.selected { background: var(--google-blue-light); border-color: var(--google-blue); color: var(--google-blue); }

/* ── Date Range Chip ──────────────────────────────────────── */
.g-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: box-shadow var(--transition);
}

/* .g-date-range:hover { box-shadow: var(--shadow-1); } */

/* ── Tables ───────────────────────────────────────────────── */
.g-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.g-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.g-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.g-table thead th:hover { background: var(--surface-hover); }

.g-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}

.g-table tbody tr:last-child { border-bottom: none; }
.g-table tbody tr:hover { background: var(--surface-alt); }

.g-table tbody td {
  padding: 12px 16px;
  color: var(--text-primary);
  vertical-align: middle;
}

.g-table--striped tbody tr:nth-child(even) { background: var(--surface-card); }

/* ── Badges ───────────────────────────────────────────────── */
/* Gris por defecto: así un medio sin color propio (badge-{slug} sin regla) no queda sin fondo.
   Los modificadores --blue/--green/… y los badge-{slug} de abajo lo reemplazan. */
.g-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.g-badge--blue   { background: var(--google-blue-light); color: var(--google-blue); }
.g-badge--green  { background: #e6f4ea; color: var(--google-green); }
.g-badge--red    { background: #fce8e6; color: var(--google-red); }
.g-badge--yellow { background: #fef7e0; color: #b06000; }
.g-badge--gray   { background: var(--surface-hover); color: var(--text-secondary); }

/* Badges por fuente de noticia (taxonomía fuentes → badge-{slug}) */
.badge-el-dia,
.badge-el-dia a {
  color: #fff !important;
  background-color: #e36423 !important;
  border: transparent;
}
.badge-cristian-caricaturas-el-dia,
.badge-cristian-caricaturas-el-dia a {
  color: #fff !important;
  background-color: #e36423 !important;
  border: transparent;
}
.badge-primicias,
.badge-primicias a {
  color: #000 !important;
  background-color: #fff !important;
  border: transparent;
}
.badge-nuria-piera,
.badge-nuria-piera a {
  color: #fff !important;
  background-color: #3e6fb3 !important;
  border: transparent;
}
.badge-listin-diario,
.badge-listin-diario a {
  color: #000 !important;
  background-color: #fbbc05 !important;
  border: transparent;
}
.badge-diario-libre,
.badge-diario-libre a {
  color: #fff !important;
  background-color: #157751 !important;
  border: transparent;
}
.badge-el-caribe,
.badge-el-caribe a {
  color: #fff !important;
  background-color: #38a9db !important;
  border: transparent;
}
.badge-el-nuevo-diario,
.badge-el-nuevo-diario a {
  color: #fff !important;
  background-color: #e01c2b !important;
  border: transparent;
}
.badge-acento,
.badge-acento a {
  color: #fff !important;
  background-color: #f81616 !important;
  border: transparent;
}
.badge-deportes,
.badge-deportes a {
  color: #fff !important;
  background-color: #343a40 !important;
  border: transparent;
}
.badge-periodico-hoy,
.badge-periodico-hoy a {
  color: #fff !important;
  background-color: #4f94df !important;
  border: transparent;
}
.badge-el-nacional,
.badge-el-nacional a {
  color: #fff !important;
  background-color: #c12735 !important;
  border: transparent;
}
.badge-cdn,
.badge-cdn a {
  color: #fff !important;
  background-color: #c92127 !important;
  border: transparent;
}
.badge-mas-vip,
.badge-mas-vip a {
  color: #fff !important;
  background-color: #bf1b23 !important;
  border: transparent;
}
.badge-actualidad-rt,
.badge-actualidad-rt a {
  color: #000 !important;
  background-color: #6ec702 !important;
  border: transparent;
}
.badge-internacional,
.badge-internacional a {
  color: #000 !important;
  background-color: #6ec702 !important;
  border: transparent;
}
.badge-infobae,
.badge-infobae a {
  color: #fff !important;
  background-color: #f98300 !important;
  border: transparent;
}
.badge-farandula,
.badge-farandula a {
  color: #fff !important;
  background-color: #ff00cc !important;
  border: transparent;
}
.badge-luminariastv,
.badge-luminariastv a {
  color: #fff !important;
  background-color: #ff00cc !important;
  border: transparent;
}
.badge-youtube,
.badge-youtube a {
  color: #fff !important;
  background-color: #ff0000 !important;
  border: transparent;
}
.badge-twitter,
.badge-twitter a {
  color: #fff !important;
  background-color: #00c3f3 !important;
  border: transparent;
}
.badge-noticias-sin,
.badge-noticias-sin a {
  color: #fff !important;
  background-color: #003366 !important;
  border: transparent;
}
.badge-presidencia,
.badge-presidencia a {
  color: #fff !important;
  background-color: #1a3a6b !important;
  border: transparent;
}
.badge-la-informacion,
.badge-la-informacion a {
  color: #fff !important;
  background-color: #1a3a6b !important;
  border: transparent;
}

/* Badges añadidos el 2026-10-12: color de marca de cada medio, sacado de su sitio (logo, cabecera
   o theme-color). Los marcados "estimado" no se pudieron comprobar en su sitio. */
/* El Nacional (término "Nacional"), mismo color que .badge-el-nacional */
.badge-nacional,
.badge-nacional a {
  color: #fff !important;
  background-color: #c12735 !important;
  border: transparent;
}
.badge-de-ultimo-minuto,
.badge-de-ultimo-minuto a {
  color: #fff !important;
  background-color: #a80000 !important;
  border: transparent;
}
/* Revista Mercado (noticias: revista-mercado; portadas: mercado) */
.badge-revista-mercado,
.badge-revista-mercado a,
.badge-mercado,
.badge-mercado a {
  color: #fff !important;
  background-color: #c8202f !important;
  border: transparent;
}
/* categoría "Revista", no es un medio */
.badge-revista,
.badge-revista a {
  color: #fff !important;
  background-color: #6f42c1 !important;
  border: transparent;
}
/* noticias y portadas */
.badge-el-dinero,
.badge-el-dinero a {
  color: #fff !important;
  background-color: #f2295b !important;
  border: transparent;
}
.badge-el-diario-ny,
.badge-el-diario-ny a {
  color: #fff !important;
  background-color: #1f71b7 !important;
  border: transparent;
}
.badge-en-segundos,
.badge-en-segundos a {
  color: #fff !important;
  background-color: #1199b3 !important;
  border: transparent;
}
/* categoría "Blogs", varios sitios */
.badge-blogs,
.badge-blogs a {
  color: #fff !important;
  background-color: #5f6368 !important;
  border: transparent;
}
/* noticias y portadas */
.badge-oh-magazine,
.badge-oh-magazine a {
  color: #fff !important;
  background-color: #ff2778 !important;
  border: transparent;
}
/* RT (término "Actualidad & Tecnología"), mismo color que .badge-actualidad-rt */
.badge-actualidad,
.badge-actualidad a {
  color: #fff !important;
  background-color: #6ec702 !important;
  border: transparent;
}
/* ¡HOLA! (portadas: Hola Novias) */
.badge-hola,
.badge-hola a,
.badge-novias,
.badge-novias a {
  color: #fff !important;
  background-color: #cc0000 !important;
  border: transparent;
}
/* estimado: el sitio bloquea la consulta */
.badge-remolacha,
.badge-remolacha a {
  color: #fff !important;
  background-color: #b1004a !important;
  border: transparent;
}
.badge-bbc-mundo,
.badge-bbc-mundo a {
  color: #fff !important;
  background-color: #bb1919 !important;
  border: transparent;
}
.badge-roberto-cavada,
.badge-roberto-cavada a {
  color: #fff !important;
  background-color: #a51c30 !important;
  border: transparent;
}
.badge-al-momento,
.badge-al-momento a {
  color: #fff !important;
  background-color: #0b228b !important;
  border: transparent;
}
.badge-cnn-en-espanol,
.badge-cnn-en-espanol a {
  color: #fff !important;
  background-color: #cc0000 !important;
  border: transparent;
}
.badge-telemicro,
.badge-telemicro a {
  color: #fff !important;
  background-color: #00009c !important;
  border: transparent;
}
.badge-primera-hora,
.badge-primera-hora a {
  color: #fff !important;
  background-color: #c71500 !important;
  border: transparent;
}
.badge-el-nuevo-dia,
.badge-el-nuevo-dia a {
  color: #fff !important;
  background-color: #2c6ba5 !important;
  border: transparent;
}
/* Ritmo; noticias y portadas */
.badge-ritmo-social,
.badge-ritmo-social a {
  color: #fff !important;
  background-color: #000 !important;
  border: transparent;
}
.badge-univision,
.badge-univision a {
  color: #fff !important;
  background-color: #1c1cec !important;
  border: transparent;
}
.badge-n-digital,
.badge-n-digital a {
  color: #fff !important;
  background-color: #3b5fae !important;
  border: transparent;
}
.badge-7-dias,
.badge-7-dias a {
  color: #fff !important;
  background-color: #d42011 !important;
  border: transparent;
}
.badge-telemundo,
.badge-telemundo a {
  color: #fff !important;
  background-color: #e4002b !important;
  border: transparent;
}
.badge-el-pais,
.badge-el-pais a {
  color: #fff !important;
  background-color: #000 !important;
  border: transparent;
}
.badge-dw,
.badge-dw a {
  color: #fff !important;
  background-color: #002186 !important;
  border: transparent;
}
/* mismo medio que .badge-luminariastv */
.badge-luminarias-tv,
.badge-luminarias-tv a {
  color: #fff !important;
  background-color: #ff00cc !important;
  border: transparent;
}
/* Revista Pandora (noticias: revista-pandora; portadas: pandora) */
.badge-revista-pandora,
.badge-revista-pandora a,
.badge-pandora,
.badge-pandora a {
  color: #fff !important;
  background-color: #f75454 !important;
  border: transparent;
}
.badge-z101-digital,
.badge-z101-digital a {
  color: #fff !important;
  background-color: #002139 !important;
  border: transparent;
}
.badge-gentetuya,
.badge-gentetuya a {
  color: #fff !important;
  background-color: #e07b24 !important;
  border: transparent;
}
.badge-rnn,
.badge-rnn a {
  color: #fff !important;
  background-color: #b60603 !important;
  border: transparent;
}
.badge-prousuario,
.badge-prousuario a {
  color: #fff !important;
  background-color: #0d3048 !important;
  border: transparent;
}
.badge-proceso,
.badge-proceso a {
  color: #fff !important;
  background-color: #d42011 !important;
  border: transparent;
}
.badge-el-mundo,
.badge-el-mundo a {
  color: #fff !important;
  background-color: #216087 !important;
  border: transparent;
}
.badge-dominicanos-hoy,
.badge-dominicanos-hoy a {
  color: #fff !important;
  background-color: #009fc5 !important;
  border: transparent;
}
.badge-antena-7,
.badge-antena-7 a {
  color: #fff !important;
  background-color: #e60a00 !important;
  border: transparent;
}
/* portadas */
.badge-metro,
.badge-metro a {
  color: #fff !important;
  background-color: #168c48 !important;
  border: transparent;
}
/* portadas; mismo color que .badge-diario-libre */
.badge-diario-libre-metro,
.badge-diario-libre-metro a {
  color: #fff !important;
  background-color: #157751 !important;
  border: transparent;
}
/* portadas; revistas de Listín Diario, mismo color que .badge-listin-diario */
.badge-zonae,
.badge-zonae a,
.badge-zonan,
.badge-zonan a {
  color: #000 !important;
  background-color: #fbbc05 !important;
  border: transparent;
}
/* portadas; estimado */
.badge-santo-domingo-times,
.badge-santo-domingo-times a {
  color: #fff !important;
  background-color: #267a48 !important;
  border: transparent;
}
/* portadas; estimado */
.badge-somos,
.badge-somos a {
  color: #fff !important;
  background-color: #d6336c !important;
  border: transparent;
}
/* portadas; estimado */
.badge-panorama,
.badge-panorama a {
  color: #fff !important;
  background-color: #1a5276 !important;
  border: transparent;
}
/* portadas; estimado */
.badge-estilos,
.badge-estilos a {
  color: #fff !important;
  background-color: #8e3a59 !important;
  border: transparent;
}
/* portadas; estimado */
.badge-gentleman,
.badge-gentleman a {
  color: #fff !important;
  background-color: #333 !important;
  border: transparent;
}
/* portadas; estimado */
.badge-magazine,
.badge-magazine a {
  color: #fff !important;
  background-color: #6f42c1 !important;
  border: transparent;
}
/* portadas; estimado */
.badge-sdcorre,
.badge-sdcorre a {
  color: #fff !important;
  background-color: #e8590c !important;
  border: transparent;
}

/* ── Form Controls ────────────────────────────────────────── */
.g-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.g-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: .3px;
}

.g-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.g-input:hover { border-color: var(--text-secondary); }

.g-input:focus {
  border-color: var(--google-blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.g-select {
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235f6368'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.g-select:focus { border-color: var(--google-blue); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }

/* Toggle Switch */
.g-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.g-toggle input { opacity: 0; width: 0; height: 0; }
.g-toggle__track {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition);
}
.g-toggle__track::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.g-toggle input:checked + .g-toggle__track { background: var(--google-blue); }
.g-toggle input:checked + .g-toggle__track::before { transform: translateX(16px); }

/* Sobre fondos oscuros (ej. .sp-top del hero) el track claro por defecto
   pierde contraste; se aclara el "apagado" para que siga siendo visible. */
.sp-top .g-toggle__track { background: rgba(255,255,255,.3); }
.sp-top .g-toggle input:checked + .g-toggle__track { background: var(--google-blue); }

/* ── Progress / Sparkline bar ─────────────────────────────── */
.g-progress-bar {
  height: 6px;
  background: var(--surface-hover);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.g-progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--google-blue);
  transition: width .5s ease;
}

/* ── Divider ──────────────────────────────────────────────── */
.g-divider {
  border: none;
  border-top: 1px dashed var(--border-light);
  margin: 16px 0;
  opacity: 1;
}

/* ── Tooltip ──────────────────────────────────────────────── */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #3c4043;
  color: #fff;
  font-size: 11px;
  font-family: var(--font-body);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}

[data-tooltip]:hover::after { opacity: 1; }

/* ── Empty State ──────────────────────────────────────────── */
.g-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-secondary);
}

.g-empty__icon {
  font-size: 48px;
  color: var(--border);
}

.g-empty__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.g-empty__desc { font-size: 14px; max-width: 360px; }

/* ── Snackbar / Toast ─────────────────────────────────────── */
/* Sale por encima del bottombar (.sk-bottombar: 60px de alto a 16px del borde) y no encima de él; oculto, baja
   del todo fuera de la pantalla para no tapar los clics del bottombar (sigue en el DOM, assets/js/main.js). */
.g-snackbar {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 92px));
  background: #3c4043;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 288px;
  max-width: 568px;
  box-shadow: var(--shadow-2);
  z-index: 9999;
  opacity: 0;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}

.g-snackbar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.g-snackbar__action {
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: #8ab4f8;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 4px;
}

/* ── Modal / Dialog ───────────────────────────────────────── */
.g-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.g-overlay.open { opacity: 1; pointer-events: all; }

.g-dialog {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 24px;
  max-width: 560px;
  width: calc(100% - 48px);
  box-shadow: var(--shadow-3);
  transform: scale(.92);
  transition: transform var(--transition);
}

.g-overlay.open .g-dialog { transform: scale(1); }

.g-dialog__title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.g-dialog__body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.g-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* ── Page Header ──────────────────────────────────────────── */
.g-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.g-page-header__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
}

.g-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ── Alert Banners ────────────────────────────────────────── */
.g-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
}

.g-alert--info    { background: var(--google-blue-light); color: #174ea6; }
.g-alert--success { background: #e6f4ea; color: #137333; }
.g-alert--warning { background: #fef7e0; color: #7a4f00; }
.g-alert--error   { background: #fce8e6; color: #cc2900; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 959px) {
  .g-sidebar { transform: translateX(-100%); transition: transform var(--transition); }
  .g-sidebar.open { transform: translateX(0); }
  .g-content { margin-left: 0; padding: 16px; }
}

@media (max-width: 599px) {
  .g-metric-grid { grid-template-columns: 1fr 1fr; }
  .g-content { padding: 12px; }
  .g-page-header { flex-direction: column; align-items: flex-start; }
  .g-page-header__actions { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════
   GOOGLE SITE KIT COMPONENTS
   ════════════════════════════════════════════════════════════ */

/* ── Site Kit Top Bar ─────────────────────────────────────── */
.sticky-top {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left:  calc(var(--bs-gutter-x) * .5);
}

.sk-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 9px 16px;
  min-height: 60px;
  flex-wrap: wrap;
}

/* Hamburger → X when mobile nav is open */
.sk-mobile-toggle[aria-expanded="true"] i::before { content: "\f00d"; }

.sk-topbar__brand,
.sp-saludo-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.sk-topbar__name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -.3px;
}

.sk-topbar__brand .sp-location-name {
  color: var(--text-primary);
}
.sk-topbar__brand .sp-location-sub {
  color: var(--text-secondary);
}
/* Etiqueta "Beta" junto al nombre del sitio (ziport_beta_badge() en functions.php). */
.sk-beta {
  margin-left: 4px;
  font-weight: 700;
}
/* Nombre y subtítulo enlazados a la portada, sin subrayado ni cambio de color. */
.sk-topbar__brand-text,
.sk-topbar__brand-text:hover,
.sk-topbar__brand-text:focus {
  color: inherit;
  text-decoration: none;
}

.sk-tabs-top {
  display: flex;
  align-items: end;
  height: 100%;
  flex: 1;
  justify-content: right;
  gap: 2px;
}

.sk-tab-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  height: 36px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.sk-tab-top:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.sk-tab-top.active {
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--surface);
}

/* Seis pestañas: más juntas en pantallas medianas; por debajo de 1200 px
   solo el ícono (el nombre queda en el title y para lectores de pantalla),
   salvo en la pestaña activa, y por debajo de 900 px la marca muestra solo
   el logo. Solo afecta a la fila de escritorio (el menú móvil no cambia). */
@media (max-width: 1279px) {
  .sk-tabs-top .sk-tab-top { padding: 6px 10px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .sk-topbar__brand > .sk-topbar__brand-text { display: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sk-tabs-top .sk-tab-top:not(.active) .sk-tab-top__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.sk-topbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}

.sk-action-btn:hover { background: var(--surface-hover); }

/* ── Section wrappers ─────────────────────────────────────── */
.sk-section {
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  padding: 20px 0;
  margin-bottom: 0;
}

.sk-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* margin-bottom: 16px; */
  gap: 12px;
  flex-wrap: wrap;
}

.sk-section__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.sk-section__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.sk-change-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-link-teal);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.sk-change-link:hover { opacity: .75; }

/* ── Key Metrics grid ─────────────────────────────────────── */
.sk-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sk-metric-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
}

.sk-metric-card__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

.sk-info-icon {
  color: #5f9ea0;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.sk-metric-card__empty {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

.sk-metric-card__value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.1;
  margin-top: 4px;
}

.sk-metric-card__value--lg {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
}

.sk-metric-card__sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Delta pills */
.sk-delta {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  align-self: flex-start;
  margin-top: 2px;
}

.sk-delta--up   { background: #e6f4ea; color: #137333; }
.sk-delta--down { background: #fce8e6; color: #cc2900; }
.sk-delta--flat { background: var(--surface-hover); color: var(--text-secondary); }

/* Author row */
.sk-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.sk-author-name { font-size: 14px; color: var(--text-primary); }
.sk-author-val  { font-size: 14px; font-weight: 500; color: var(--text-primary); }

/* City list */
.sk-city-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.sk-city-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

.sk-city-row strong { color: var(--text-primary); }

/* Keyword list */
.sk-keyword-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.sk-keyword-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.sk-kw-link {
  color: var(--text-link-teal);
  text-decoration: none;
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-kw-link:hover { text-decoration: underline; }

.sk-kw-ctr {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ── Speed — Device toggle ────────────────────────────────── */
.sk-device-toggle {
  display: flex;
  align-items: center;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.sk-device-btn {
  width: 36px; height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.sk-device-btn.active {
  background: #1e6e3e;
  color: #fff;
}

/* ── Speed — Vitals ───────────────────────────────────────── */
.sk-learn-link {
  color: var(--text-link-teal);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition);
}

.sk-learn-link:hover { opacity: .75; }

.sk-vital-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

.sk-vital-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sk-vital-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.sk-vital-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.sk-vital-note {
  font-size: 12px;
  color: var(--text-link-teal);
  margin-top: 4px;
}

.sk-vital-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  text-align: right;
}

.sk-vital-val {
  font-size: 15px;
  font-weight: 700;
}

.sk-vital-status { font-size: 13px; }

.sk-vital-score--good .sk-vital-val,
.sk-vital-score--good .sk-vital-status { color: #137333; }

.sk-vital-score--warn .sk-vital-val,
.sk-vital-score--warn .sk-vital-status { color: #b06000; }

.sk-vital-score--bad .sk-vital-val,
.sk-vital-score--bad .sk-vital-status  { color: var(--google-red); }

/* ── AdSense metrics ──────────────────────────────────────── */
.sk-adsense-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 24px;
}

.sk-adsense-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 0 0;
}

.sk-adsense-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.sk-adsense-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.1;
}

.sk-adsense-delta {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.sk-adsense-delta--up   { color: #137333; }
.sk-adsense-delta--down { color: var(--google-red); }

/* ── Chart ────────────────────────────────────────────────── */
.sk-chart-wrap {
  display: flex;
  align-items: stretch;
  height: 120px;
  margin-bottom: 4px;
  gap: 8px;
}

.sk-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 2px 0;
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}

.sk-chart-area {
  flex: 1;
  position: relative;
  border-bottom: 1px solid var(--border-light);
}

.sk-chart-dates {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #b57500;
  padding: 6px 0 12px 44px;
}

.sk-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0 8px 44px;
}

.sk-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── WordPress footer ─────────────────────────────────────── */
.sk-wp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 4px 8px;
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: italic;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Responsive Site Kit ──────────────────────────────────── */
@media (max-width: 1100px) {
  .sk-metric-grid  { grid-template-columns: repeat(2, 1fr); }
  .sk-adsense-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 767px) {
  .sk-tabs-top { display: none; }
  .sk-metric-grid { grid-template-columns: 1fr; }
  .sk-adsense-grid { grid-template-columns: repeat(2, 1fr); }
  .g-main-container { padding: 16px 16px 32px; }

  /* Topbar + Bottombar mobile */
  .sk-topbar,
  .sk-bottombar {
    padding: 10px 16px;
    flex-wrap: wrap;
    min-height: 52px;
    align-items: center;
  }
  /* Brand: izquierda */
  .sk-topbar__brand {
    order: 0;
    flex: 1;
  }
  /* Hamburger: derecha */
  .sk-topbar > .sk-mobile-toggle,
  .sk-bottombar > .sk-mobile-toggle {
    order: 1;
    flex-shrink: 0;
    margin-left: auto;
  }
  /* Collapse: fila completa debajo del brand */
  .sk-topbar #skMobileNav,
  .sk-bottombar #skBottomMobileNav {
    order: 3;
    width: 100%;
  }
  /* Bottombar: el menú móvil aparece ARRIBA del brand y del toggle */
  .sk-bottombar #skBottomMobileNav { order: -1; }
  /* Ocultar acciones secundarias en mobile (menos el botón de menú) */
  .sk-topbar__actions .g-topbar__icon-btn:not(.sk-mobile-toggle),
  .sk-topbar__actions .g-topbar__avatar,
  .sk-topbar__actions .sk-action-btn { display: none; }
  .sk-topbar__actions { order: 2; }
}

/* ── g-main-container breakpoints ────────────────────────── */
@media (min-width: 1200px) {
  /* .g-main-container { max-width: 1272px; } */
}

@media (min-width: 1400px) {
  /* .g-main-container { max-width: 1440px; } */
}



/* ── Utility ──────────────────────────────────────────────── */

.d-flex        { display: flex; }
.align-center  { align-items: center; }
.justify-between { justify-content: space-between; }

.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.flex-1 { flex: 1; }

.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }

.fs-11  { font-size: 11px; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }
.fs-14  { font-size: 14px; }

.mt-4   { margin-top: 4px; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mb-8   { margin-bottom: 8px; }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.p-0    { padding: 0 !important; }

.rounded-pill { border-radius: var(--radius-pill) !important; }

/* ── New Components ── */

/* ── Icon size helpers (used in topbar tabs & buttons) ─────── */
.icon-10 { font-size: 10px; }
.icon-11 { font-size: 11px; }
.icon-12 { font-size: 12px; }
.icon-13 { font-size: 13px; }
.icon-14 { font-size: 14px; }
.icon-15 { font-size: 15px; }
.icon-16 { font-size: 16px; }
.icon-18 { font-size: 18px; }

/* ── Mobile nav border separator ──────────────────────────── */
.mobile-nav-inner {
  border-bottom: 1px solid var(--border-light);
}
/* Variante para el bottombar: el divisor va arriba (separa de los accesos rápidos) */
.mobile-nav-inner--bottom {
  border-top: 1px solid var(--border-light);
  border-bottom: none;
}

/* ── Breadcrumb de portadas/revistas: enlaces sin subrayado ── */
.breadcrumb-item a {
  text-decoration: none;
}

/* ── Table link ────────────────────────────────────────────── */
.table-link {
  color: var(--text-link);
  text-decoration: none;
}

/* Los enlaces ya visitados muestran el color :visited por
   defecto del navegador (púrpura), para distinguirlos. */
.table-link:visited {
  color: #551a8b; /* fallback para navegadores sin revert */
  color: revert;
  text-decoration: none;
}

/* Enlaces que ya no funcionan (revisados el 2026-10-21): el texto en
   negro en vez de azul y, si tienen logo, el logo en gris. */
.table-link.enlace-muerto,
.table-link.enlace-muerto:visited {
  color: var(--text-primary);
}
a.enlace-muerto img {
  filter: grayscale(100%);
}

/* ── Alert icon (flex-shrink:0) ────────────────────────────── */
.alert-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Speed section header bar (tabs + device toggle row) ───── */
.speed-header-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  padding: 0 24px;
}

.speed-tabs-inner {
  border-bottom: none;
  flex: 1;
}

/* ── Speed description / vitals padding ────────────────────── */
.speed-desc {
  padding: 20px 24px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.speed-vitals {
  padding: 8px 24px 20px;
}

.speed-footer {
  text-align: right;
  padding: 12px 24px;
  border-top: 1px solid var(--border-light);
}

/* ── Monetization section header ────────────────────────────── */
.monetization-head {
  margin-bottom: 12px;
}

.monetization-title {
  font-size: 18px;
  font-weight: 400;
}

.monetization-subtitle {
  font-size: 13px;
  color: #b35900;
}

/* ── Performance line (blue accent under title) ─────────────── */
.perf-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.perf-accent-bar {
  width: 160px;
  height: 3px;
  background: #4285f4;
  border-radius: 2px;
  margin-bottom: 20px;
}

/* ── Chart legend dot/line ──────────────────────────────────── */
.chart-legend-line {
  display: inline-block;
  width: 20px;
  height: 2px;
  vertical-align: middle;
}

.chart-legend-line--solid  { background: #4285f4; }
.chart-legend-line--dashed {
  background: #bdc1c6;
  border-top: 2px dashed #bdc1c6;
}

/* ── AdSense card footer row ────────────────────────────────── */
.adsense-footer {
  border-top: 1px solid var(--border-light);
  padding: 10px 20px;
}

/* ── Progress bar min-width ─────────────────────────────────── */
.g-progress-bar--min80 { min-width: 80px; }

/* ── Trip Stats ─────────────────────────────────────────────── */
.ts-stats-row {
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}

.ts-stat {
  border-right: 1px solid var(--border-light);
  min-width: 90px;
}

.ts-stat--last { min-width: 110px; }
.ts-stat--medium { min-width: 110px; }
.ts-stat--wide { min-width: 120px; }

.ts-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.ts-value--alert { color: var(--google-red); }

.ts-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.ts-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.ts-detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ── App Cards (Trabaja con Turista.do) ────────────────────── */
.app-card {
  cursor: pointer;
  transition: box-shadow var(--transition);
}

/* .app-card:hover { box-shadow: var(--shadow-1); } */

.app-card__hero {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-card__hero--blue   { background: #4285f4; }
.app-card__hero--green  { background: #34a853; }
.app-card__hero--red    { background: #ff3300; }
.app-card__hero--purple { background: #8b5cf6; }

.app-card__hero-icon {
  font-size: 44px;
  color: #fff;
  opacity: 0.9;
}

.app-card__body {
  padding: 5px;
}

.app-card__title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.app-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.app-card__rating-star { font-size: 11px; color: #fbbc04; }
.app-card__rating-info { font-size: 11px; color: var(--text-tertiary); }

.app-card__rating-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.app-card__desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 5px; /* separa la línea de canal / "hace…" del título (en los <span> en línea no aplica) */
}

/* Tarjetas de video especiales (Destacada, o término Hero o Popular; ziport_video_tarjeta_clase() en
   inc/videos-hero.php): con el mismo degradado que el hero de la portada y de /videos/, y el texto en blanco. */
.g-card--hero {
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  border-color: transparent;
}
.g-card--hero .app-card__title { color: #fff; }
.g-card--hero .app-card__desc { color: rgba(255, 255, 255, .72); }
.yt-views-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary, #5f6368);
  white-space: nowrap;
}
.yt-views-badge i { font-size: 10px; }

/* ── Pill de vistas, color según desempeño relativo al canal ─── */
.yt-view-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 99px;
  white-space: nowrap;
}
.yt-view-pill i { font-size: 10px; }
.yt-view-pill--low     { background: #f1f5f9; color: #64748b; } /* bajo el promedio del canal */
.yt-view-pill--normal  { background: #dbeafe; color: #1e40af; } /* dentro del promedio */
.yt-view-pill--high    { background: #fed7aa; color: #9a3412; } /* por encima del promedio */
.yt-view-pill--viral   { background: #fecaca; color: #991b1b; } /* muy por encima — viral para el canal */

/* ── Section header (Trabaja / Top Categories) ───────────────── */
.pf-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.pf-title a,
.phone {
  text-decoration: none;
}

.pf-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.pf-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding-top: 4px;
}

/* ── Section title (h3 style) used for Top Categories ──────── */
.section-title-18 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* ── Welcome Banner ─────────────────────────────────────────── */
.welcome-banner {
  position: relative;
}

.welcome-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 14px;
  z-index: 1;
  transition: background var(--transition);
}

.welcome-dismiss:hover { background: var(--surface-hover); }

.welcome-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.welcome-text {
  font-size: 14px;
  color: var(--google-blue);
  line-height: 1.6;
  margin: 0;
}

/* ── Promo Banner ───────────────────────────────────────────── */
.promo-banner {
  background: #fef6e4;
  border-radius: var(--radius-lg);
  padding: 32px 36px;
}

.promo-banner__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.promo-banner__desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Category chips (Top Categories row) ───────────────────── */
.cat-chip {
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow var(--transition);
}

/* .cat-chip:hover { box-shadow: var(--shadow-1); } */

.cat-chip--blue  { background: #e8f0fe; }
.cat-chip--gray  { background: var(--surface-hover); }
.cat-chip--green { background: #e6f4ea; }

.cat-chip__label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.cat-chip__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat-chip__icon--blue  { background: #4285f4; }
.cat-chip__icon--gray  { background: #5f6368; }
.cat-chip__icon--blue2 { background: #1a73e8; }
.cat-chip__icon--green { background: #34a853; }

.cat-chip__icon-i { font-size: 16px; color: #fff; }

/* ── Para ti (News Feed) ────────────────────────────────────── */
.pf-header-wrap {
  padding: 20px 20px 4px;
}

.pf-header-title {
  font: 600 18px var(--font-display);
  color: var(--text-primary);
}

.pf-header-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

.nf-article {
  border-bottom: 1px solid var(--border-light);
}

.nf-article--last {
  /* no border */
}

.nf-article__inner {
  padding: 14px 20px;
}

.nf-source-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nf-source-badge i { color: #fff; font-size: 9px; }

.nf-source-name {
  font-size: 11px;
  color: var(--text-tertiary);
}

.nf-headline {
  font: 500 13px/1.45 var(--font-sans);
  color: var(--text-primary);
  margin: 0 0 8px;
}

.nf-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.nf-bookmark {
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
}

.nf-thumbnail {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-thumbnail i { color: #fff; font-size: 24px; }

/* nf-source-badge color modifiers */
.nf-source-badge--blue   { background: #1a73e8; }
.nf-source-badge--green  { background: #34a853; }
.nf-source-badge--amber  { background: #f9ab00; }
.nf-source-badge--red    { background: #ff3300; }
.nf-source-badge--purple { background: #8e24aa; }
.nf-source-badge--teal   { background: #00897b; }

/* nf-thumbnail gradient modifiers */
.nf-thumb--blue   { background: #1a73e8; }
.nf-thumb--green  { background: #34a853; }
.nf-thumb--amber  { background: #f9ab00; }
.nf-thumb--red    { background: #ff3300; }
.nf-thumb--purple { background: #8e24aa; }
.nf-thumb--teal   { background: #00897b; }

/* ── Destination Cards ──────────────────────────────────────── */
.dc-card { cursor: pointer; }

.dc-image {
  aspect-ratio: 1/1;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-image__bg-icon {
  color: rgba(255, 255, 255, 0.18);
  font-size: 64px;
}

.dc-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 6px;
  padding: 3px 8px;
  backdrop-filter: blur(4px);
}

.dc-badge span {
  color: #fff;
  font-size: 10px;
  font-weight: 500;
}

.dc-name {
  font: 500 13px/1.3 var(--font-sans);
  color: var(--text-primary);
  margin: 0 0 2px;
}

.dc-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

/* dc-image gradient modifiers */
.dc-image--blue   { background: #1a73e8; }
.dc-image--green  { background: #34a853; }
.dc-image--red    { background: #ff3300; }
.dc-image--orange { background: #e65100; }

/* ── Boarding Pass Wide (Component 8) ──────────────────────── */
.bp-header {
  background: #111;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-brand-name {
  color: #fff;
  font: 700 12px var(--font-display);
  letter-spacing: 0.08em;
}

.bp-label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.bp-label-icon { color: rgba(255, 255, 255, 0.65); font-size: 12px; }

.bp-body { padding: 20px; }

.bp-airport-label {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bp-code {
  font: 700 42px/1 var(--font-display);
  color: var(--text-primary);
}

.bp-city {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.bp-date {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.bp-route-mid {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bp-route-line {
  width: 100%;
  position: relative;
  height: 2px;
}

.bp-route-dashed {
  position: absolute;
  inset: 0;
  border-top: 2px dashed var(--border-light);
}

.bp-route-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 6px;
  line-height: 1;
}

.bp-stop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
  display: inline-block;
}

.bp-passenger {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 14px;
}

.bp-detail-label {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.bp-detail-value {
  font: 600 13px var(--font-sans);
  color: var(--text-primary);
}

.bp-passenger-name {
  font: 600 14px var(--font-sans);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.bp-barcode {
  border-top: 2px dashed var(--border-light);
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  justify-content: center;
}

.bp-airport-col {
  flex: 1;
  text-align: center;
}

.bp-barcode-strip {
  width: 240px;
  height: 50px;
  border-radius: 3px;
  overflow: hidden;
  background: repeating-linear-gradient(
    90deg,
    #111 0, #111 2px, transparent 2px, transparent 5px,
    #111 5px, #111 7px, transparent 7px, transparent 9px,
    #111 9px, #111 12px, transparent 12px, transparent 16px,
    #111 16px, #111 17px, transparent 17px, transparent 21px,
    #111 21px, #111 24px, transparent 24px, transparent 27px,
    #111 27px, #111 28px, transparent 28px, transparent 32px,
    #111 32px, #111 35px, transparent 35px, transparent 38px,
    #111 38px, #111 39px, transparent 39px, transparent 41px
  );
  background-size: 41px 100%;
}

/* ── Boarding Pass Minimal QR (Component 9) ─────────────────── */
.bp-route-block {
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.bp-airport-label2 {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 3px;
}

.bp-code2 {
  font: 700 34px/1 var(--font-display);
  color: var(--text-primary);
}

.bp-city2 {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 5px;
}

.bp-time2 {
  font: 600 13px var(--font-sans);
  color: var(--text-primary);
}

.bp-detail-label2 {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.bp-detail-value2 {
  font: 600 22px var(--font-display);
  color: var(--text-primary);
}

.bp-tear-line {
  position: relative;
  margin: 0 -4px 16px;
}

.bp-tear-dashed { border-top: 2px dashed var(--border-light); }

.bp-notch-left {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 22px;
  background: var(--surface-alt);
  border-radius: 0 11px 11px 0;
}

.bp-notch-right {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 22px;
  background: var(--surface-alt);
  border-radius: 11px 0 0 11px;
}

.bp-passenger-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.bp-passenger-name2 {
  font: 600 14px var(--font-sans);
  color: var(--text-primary);
  margin-bottom: 12px;
}

.bp-seat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}

.bp-seat-value {
  font: 600 22px var(--font-display);
  color: var(--text-primary);
}

.bp-qr { flex-shrink: 0; }

/* ── Spotlight Hero (Component 10) ─────────────────────────── */
.sp-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  font-size: 12px;
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sp-top {
  padding: 20px;
  flex-wrap: wrap;
}

/* Saludo: fila 1 completa en mobile, columna izquierda en desktop */
.sp-saludo-wrap {
  width: 100%;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
}

/* Fila inferior: logo + location text */
.sp-saludo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* Reloj: comparte fila 2 en mobile, centro en desktop */
.sp-top .sp-clock {
  flex: 1;
  text-align: center;
}

/* Location: fila propia en mobile, columna derecha en desktop */
.sp-location-wrap {
  width: 100%;
  text-align: right;
}

@media (min-width: 768px) {
  .sp-saludo-wrap {
    width: auto;
    flex: 1;
    margin-bottom: 0;
  }
  .sp-top .sp-clock {
    flex: 0 0 auto;
  }
  .sp-location-wrap {
    flex: 1;
  }
}

/* Label del saludo */
.sp-saludo-label {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

/* Motivador del día */
.sp-motivador {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-style: italic;
  margin-bottom: 10px;
}

.sp-bottom {
  padding: 20px;
}

.sp-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.sp-icon-btn i { color: #fff; font-size: 13px; }
/* Efemérides del hero en día feriado (rojo de la bandera) y el aviso de "mañana" o "el lunes" (azul de la bandera) */
.sp-icon-btn--feriado { background: #ce1126; }
.sp-icon-btn--aviso { background: #002d62; }

/* Espacio de icono del hero de página (header-page) */
.sp-hero-page__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-hero-page__icon i {
  color: #fff;
  font-size: 28px;
}

.sp-location-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.sp-location-name {
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 600;
}

.sp-location-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}
.sp-location-sub strong {
  color: rgba(255, 255, 255, 0.85);
}
/* Botones de la columna derecha de las cabeceras (tpl-parts/hero-lado.php, 2026-11-02): el principal blanco y el otro
   con borde claro, legibles sobre el fondo oscuro del hero (el .btn-outline-light del tema sale con texto oscuro). */
.sp-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sp-hero-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 8px; background: transparent; color: #fff !important; font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none !important; white-space: nowrap; }
.sp-hero-btn--primario { background: #fff; border-color: #fff; color: #1b2b33 !important; }
.sp-hero-btn--youtube { background: #ff0000; border-color: #ff0000; color: #fff !important; }
@media (max-width: 767px) {
  .sp-hero-btns { justify-content: flex-end; }
  .sp-hero-btn { font-size: 12px; padding: 6px 12px; }
}
/* Título de la palabra del hero: "Ser Dominicano Es Lo Máximo y [palabra] es:". Solo la palabra en negrita y en
   blanco; el resto, normal y un poco más tenue, para que la palabra resalte (todo a 12px). */
.sp-palabra-titulo { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.75); }
.sp-palabra-titulo strong { font-weight: 700; color: #fff; }
/* La definición, 2 líneas como mucho: el script de tpl-footer/footer.php la ajusta; esto es por si no corre. */
#spPalabraDesc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Enlace al diccionario de Jumbo debajo de la palabra del hero (azul como los links de los widgets) */
.sp-palabra-fuente {
  display: inline-block;
  margin-top: 2px;
  color: #4fc3f7;
  font-size: 12px;
  text-decoration: none;
}
.sp-palabra-fuente:hover {
  color: #fff;
  text-decoration: underline;
}

/* Interés, esquina superior derecha del hero (tpl-parts/content-hero-interes.php). */
.sp-promo .sp-interes-slides { margin-top: 0; }
.sp-promo-desc { color: #4fc3f7; font-size: 12px; }
.sp-promo .sp-interes-slide:hover .sp-promo-desc { color: #fff; }
/* Rotador de los headers viejos (header-frontpage.php y header-full.php) */
.sp-promo-item {
  display: none;
  text-decoration: none;
  color: inherit;
}
.sp-promo-item.is-active {
  display: block;
}
/* Descripción en azul como los links de los widgets */
.sp-promo-item .sp-location-sub {
  color: #4fc3f7;
}

.sp-clock {
  padding: 24px 0 20px;
}

@media (max-width: 767px) {
  .sp-clock { padding: 0px 0 10px; }
}

.sp-clock__time {
  font: 300 72px/1 var(--font-display);
  color: #fff;
  letter-spacing: -2px;
}

.sp-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-top: 8px;
}

.sp-widgets {
  padding: 0 12px 12px;
}

.sp-widget-pad { padding: 4px; }

.sp-widget {
  background: rgba(20, 35, 48, 0.78);
  border-radius: 10px;
  padding: 12px;
  backdrop-filter: blur(8px);
}

/* Igualar altura de los widgets (el clima marca la pauta):
   la columna ya se estira con el row de Bootstrap; el widget
   llena la columna y su enlace inferior se ancla al fondo. */
.sp-widgets .sp-widget-pad { display: flex; min-width: 0; }
.sp-widgets .sp-widget-pad > .sp-widget {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.sp-widgets .sp-widget > .sp-link {
  margin-top: auto !important;
  padding-top: 8px;
}
/* En móvil los widgets centrales van en un slider deslizable (uno a la vez y se asoma el
   siguiente); en md, 2 y 2, y desde lg los 4 en fila. Puntos y JS en tpl-header/header.php. */
@media (max-width: 767.98px) {
  .sp-widgets--slider {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sp-widgets--slider::-webkit-scrollbar { display: none; }
  .sp-widgets--slider > .sp-widget-pad {
    width: 88%;
    scroll-snap-align: center;
  }
}

/* Portadas de periódicos y de revistas (tpl-parts/content-portadas-frontpage.php y -revistas-frontpage.php): en móvil,
   slider deslizable como el de los widgets (una portada a casi todo el ancho y se asoma la siguiente); en md+ fila
   normal. Puntos y JS en tpl-parts/content-portadas-slider-puntos.php. */
@media (max-width: 767.98px) {
  .portadas-slider {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .portadas-slider::-webkit-scrollbar { display: none; }
  .portadas-slider > .col {
    flex: 0 0 auto;
    width: 88%;
    scroll-snap-align: center;
  }
}

/* Videos de cada sección de /videos/ (tpl-parts/content-canal-seccion.php) y Videos Destacados de la portada
   (content-youtube-popular.php): en móvil, slider deslizable como las
   portadas (un video a casi todo el ancho y se asoma el siguiente; puntos en content-portadas-slider-puntos.php).
   De md en adelante .vx-cards no cuenta en la maquetación (display: contents) y las tarjetas siguen en la fila de la
   sección; como ya no son hijas directas de .row, aquí llevan lo que les daba .row > * (con :where(), sin
   especificidad, para que manden los anchos col-md-4 / col-lg-3 / col-lg-2). */
.vx-cards { display: contents; }
:where(.vx-cards) > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
@media (max-width: 767.98px) {
  .vx-cards {
    display: flex;
    gap: 12px;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .vx-cards::-webkit-scrollbar { display: none; }
  .vx-cards > * {
    flex: 0 0 auto;
    width: 88%;
    padding: 0;
    margin-top: 0;
    scroll-snap-align: center;
  }
}

.sp-widget-title {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ── Cabecera homologada de los widgets del hero (icono gris + título) ──
   Modelada en el header de Lotería. Aplica a Clima, Lotería, Tasa,
   Interés y Próxima cita. El icono va en gris (mismo tono que el título). */
.sp-widget-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.sp-widget-head > i {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  flex-shrink: 0;
}
.sp-widget-head__title {
  flex: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-widget-value {
  font: 700 26px/1 var(--font-display);
  color: #fff;
  margin-bottom: 4px;
}

.sp-widget-sub  { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.sp-widget-sub2 { color: rgba(255, 255, 255, 0.4);  font-size: 12px; }

/* Widget clima: texto en blanco pleno */
.sp-widget--clima .sp-widget-value,
.sp-widget--clima .sp-widget-sub2 { color: #fff; }

.sp-link {
  color: #4fc3f7;
  font-size: 12px;
  cursor: pointer;
}

.sp-market-label { color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.sp-market-delta { color: #34a853; font-size: 12px; font-weight: 700; }
.sp-market-value { color: rgba(255, 255, 255, 0.8); font-size: 12px; }

.sp-event-title {
  font: 500 12px/1.4 var(--font-sans);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3px;
}

.sp-event-venue  { color: rgba(255, 255, 255, 0.45); font-size: 12px; }
.sp-event-time   { color: rgba(255, 255, 255, 0.4);  font-size: 12px; }

.sp-event-badge {
  background: #ff3300;
  border-radius: 6px;
  padding: 2px 7px;
  text-align: center;
}

.sp-event-badge__month { color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; }
.sp-event-badge__day   { color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }

/* ── Noticias: tarjeta horizontal en mobile ──────────────────── */
@media (max-width: 767px) {
  .g-noticia-col .g-card__body2 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
  }
  .g-noticia-col .g-noticia-img {
    width: 140px;
    min-width: 140px;
    aspect-ratio: 1 / 1;
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }
  .g-noticia-col .app-card__body {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  .g-noticia-col .app-card__title {
    -webkit-line-clamp: 3;
  }
}

/* ── Widget Tasa de cambio ───────────────────────────────────── */
.sp-tasa-main {
  margin-bottom: 8px;
}
.sp-tasa-label {
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.sp-tasa-valor {
  font: 700 28px/1 var(--font-display);
  color: #fff;
  margin-bottom: 2px;
}
.sp-tasa-delta  { font-size: 12px; font-weight: 600; }
/* Combustibles (tpl-parts/content-hero-combustibles.php): los precios van del tamaño de la Tasa de Cambio; a 992px caben justos (93 de 100px). */
.sp-widget--combustibles .sp-tasa-delta i { font-size: 10px; margin-right: 4px; }
/* Perspectiva del consumidor: la tasa subiendo (divisa más cara)
   es rojo; bajando es verde. Aplica a flechas y sparklines. */
.sp-tasa-up     { color: #ea4335; }
.sp-tasa-down   { color: #34a853; }
.sp-tasa-flat   { color: #9aa0a6; }

.sp-tasa-carousel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sp-tasa-slides { flex: 1; }
.sp-tasa-slide  { display: none; }
.sp-tasa-slide.is-active { display: block; }
.sp-clima-slides { flex: 1; }
.sp-clima-slide  { display: none; }
.sp-clima-slide.is-active { display: block; }
.sp-interes-slides { flex: 1; margin-top: 8px; }
.sp-interes-slide { display: none !important; }
.sp-interes-slide.is-active { display: flex !important; }
/* Icono de la página (el de su imagen destacada) en la silueta del logo, con su color: 1:1 */
.sp-interes-icono {
  position: relative; isolation: isolate; flex-shrink: 0;
  width: 40px; min-width: 40px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.sp-interes-icono::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color, #2a3a4a);
  -webkit-mask: url("../img/logo-silueta.svg") center / contain no-repeat;
          mask: url("../img/logo-silueta.svg") center / contain no-repeat;
}
.sp-interes-icono i { color: #fff; font-size: 18px; }
.sp-tasa-slide-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-tasa-chart-wrap { position: relative; flex: 1; height: 52px; min-width: 0; }
/* Fuera del flujo: antes de que Chart.js lo dibuje, el canvas mide 300×150 y ensanchaba la columna de la Tasa de Cambio
   mientras cargaba la página. Así la caja de 52 px ya le guarda el sitio. */
.sp-tasa-chart-wrap canvas { position: absolute; top: 0; left: 0; max-width: 100%; max-height: 100%; }
.sp-tasa-chart { width: 100% !important; height: 100% !important; }

/* ── Widget Lotería ──────────────────────────────────────────── */
.sp-widget--loteria { display: flex; flex-direction: column; }

.sp-loteria-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.sp-loteria-icon {
  color: #ff3300;
  font-size: 13px;
  flex-shrink: 0;
}
.sp-loteria-name {
  flex: 1;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-loteria-nav { display: flex; gap: 2px; margin-left: auto; }
.sp-loteria-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.7);
  border-radius: 4px;
  width: 20px; height: 20px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.sp-loteria-btn:hover { background: rgba(255,255,255,0.2); }

.sp-loteria-slides { flex: 1; }
.sp-loteria-slide  { display: none; }
.sp-loteria-slide.is-active { display: flex; flex-direction: column; align-items: center; text-align: center; animation: loteria-in 0.4s ease; }

@keyframes loteria-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sp-loteria-slide.is-active .sp-loteria-num {
  animation: num-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sp-loteria-slide.is-active .sp-loteria-num:nth-child(1) { animation-delay: 0.05s; }
.sp-loteria-slide.is-active .sp-loteria-num:nth-child(2) { animation-delay: 0.15s; }
.sp-loteria-slide.is-active .sp-loteria-num:nth-child(3) { animation-delay: 0.25s; }

@keyframes num-pop {
  0%   { opacity: 0; transform: scale(0.5) translateY(10px); }
  70%  { transform: scale(1.15) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.sp-loteria-turno { margin-bottom: 6px; }

.sp-loteria-numeros {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.sp-loteria-num {
  width: 54px; height: 54px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 18px/1 var(--font-display);
  color: #fff;
}

.sp-loteria-fecha { margin-bottom: 6px; }
.sp-loteria-link  { margin-top: auto; }



/* Hero pequeño — single de vídeos */
.sp-hero--sm {
  min-height: auto;
}

.vh-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.vh-breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.vh-breadcrumb a:hover { color: #fff; }

.vh-breadcrumb i { font-size: 8px; color: rgba(255, 255, 255, 0.3); }

.vh-canal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 51, 0, 0.2);
  border: 1px solid rgba(255, 51, 0, 0.35);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  color: rgba(255, 180, 150, 0.95);
  margin-right: 6px;
  vertical-align: middle;
}

.vh-edit-link a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  text-decoration: none;
}

.vh-edit-link a:hover { color: #fff; }

/* ── Paginación (botones g-btn, mismo componente en todo el theme) ── */
.g-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0;
}

.g-pagination__dots {
  padding: 0 4px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.btn-instagram {
  color: #fff;
  background-color: #f65962;
  border-color: #f65962;
}
.btn-whatsapp {
  color: #fff;
  background-color: #1d9e11;
  border-color: #1d9e11;
}
.btn-facebook {
  color: #fff;
  background-color: #2d5f9a;
  border-color: #2d5f9a;
}
.btn-twitter {
  color: #fff;
  background-color: #00c3f3;
  border-color: #00c3f3;
}
.btn-issuu {
  color: #fff;
  background-color: #ff6633;
  border-color: #ff6633;
}
.btn-white {
  color: #4285f4;
  background-color: #fff;
  border-color: #4285f4;
}

.color-facebook {
  color: #3b5998 !important;
}
.color-instagram {
  /* background: -webkit-linear-gradient(#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */
}
.color-instagram {
  color: #e1306c;
}
.color-twitter {
  color: #00acee !important;
}
.color-youtube {
  color: #ff0000 !important;
}
.color-linkedin {
  color: #0077b5 !important;
}

.text-blue {
  color: #0099cc !important;
}
.text-indigo {
  color: #6610f2 !important;
}
.text-purple {
  color: #6f42c1 !important;
}
.text-pink {
  color: #e83e8c !important;
}
.text-red {
  color: #ff3300 !important;
}
.text-orange {
  color: #fd7e14 !important;
}
.text-yellow {
  color: #ffc107 !important;
}
.text-green {
  color: #28a745 !important;
}
.text-teal {
  color: #20c997 !important;
}
.text-cyan {
  color: #17a2b8 !important;
}
.text-white {
  color: #fff !important;
}
.text-gray {
  color: #6c757d !important;
}
.text-gray-lite {
  color: #eeeeee !important;
}
.text-gray-dark {
  color: #343a40 !important;
}
.text-dark {
  color: #181818 !important;
}
.text-google {
  color: #4285f4 !important;
}

/* class="btn btn-space btn-secondary btn-sm bg-yellow text-dark"  */
.bg-blue {
  background-color: #0099cc !important;
}
.bg-indigo {
  background-color: #6610f2 !important;
}
.bg-purple {
  background-color: #6f42c1 !important;
}
.bg-pink {
  background-color: #e83e8c !important;
}
.bg-red {
  background-color: #ff3300 !important;
}
.bg-orange {
  background-color: #fd7e14 !important;
}
.bg-yellow {
  background-color: #ffc107 !important;
}
.bg-green {
  background-color: #28a745 !important;
}
.bg-teal {
  background-color: #20c997 !important;
}
.bg-cyan {
  background-color: #17a2b8 !important;
}
.bg-white {
  background-color: #fff !important;
}
.bg-gray {
  background-color: #6c757d !important;
}
.bg-gray-dark {
  background-color: #343a40 !important;
}
.bg-dark {
  background-color: #181818 !important;
}

.b-blue {
  border: 1px solid #0099cc !important;
}
.b-indigo {
  border: 1px solid #6610f2 !important;
}
.b-purple {
  border: 1px solid #6f42c1 !important;
}
.b-pink {
  border: 1px solid #e83e8c !important;
}
.b-red {
  border: 1px solid #ff3300 !important;
}
.b-orange {
  border: 1px solid #fd7e14 !important;
}
.b-yellow {
  border: 1px solid #ffc107 !important;
}
.b-green {
  border: 1px solid #28a745 !important;
}
.b-teal {
  border: 1px solid #20c997 !important;
}
.b-cyan {
  border: 1px solid #17a2b8 !important;
}
.b-white {
  border: 1px solid #fff !important;
}
.b-gray {
  border: 1px solid #6c757d !important;
}
.b-gray-dark {
  border: 1px solid #343a40 !important;
}
.b-dark {
  border: 1px solid #181818 !important;
}

/* ── Key Metrics — highlighted text ─────────────────────────── */
.text-blue { color: var(--google-blue); }



/* Truncado a 2 líneas */
/* Iconos Servicios — sin subrayado en todos los links */
.iconos-servicios a {
  text-decoration: none;
}
/* Centrado solo en los iconos de columna, no en los títulos */
.iconos-servicios .col-4 a,
.iconos-servicios .col-sm-2 a,
.iconos-servicios .col-lg-1 a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Enlaces de logo con etiqueta (círculo de iniciales o imagen
   redonda + <p>): sin el subrayado por defecto de Bootstrap. */
a:has(> .icono-iniciales),
a:has(> img.rounded-circle) {
  text-decoration: none;
}

/* Ícono sin logo: círculo con iniciales y color de fondo.
   Mismo tamaño/forma que los <img> de logo (rounded-circle border).
   El color de fondo se define inline por item (style="background:..."). */
.icono-iniciales {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--google-blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 2.6vw, 26px);
  line-height: 1;
  text-transform: uppercase;
}


.ellipsis-two {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Progress bar colours ───────────────────────────────────── */
.fill-blue   { background: #4285f4; }
.fill-green  { background: #34a853; }
.fill-yellow { background: #fbbc04; }
.fill-red    { background: #ff3300; }

/* ── Metric card accent bars ────────────────────────────────── */
.accent-blue   { background: #4285f4; }
.accent-green  { background: #34a853; }
.accent-yellow { background: #fbbc04; }
.accent-red    { background: #ff3300; }

/* ── Welcome illustration ───────────────────────────────────── */
.illus-wrap {
  position: relative;
  width: 150px;
  height: 100px;
  flex-shrink: 0;
}

.illus-card {
  position: absolute;
  width: 95px;
  height: 62px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.illus-card--green  { background: #34a853; transform: rotate(14deg); top: 24px; left: 34px; }
.illus-card--yellow { background: #fbbc04; transform: rotate(7deg); top: 14px; left: 24px; }
.illus-card--blue   { background: #4285f4; top: 4px; left: 14px; }

.illus-card__stripe1 {
  position: absolute;
  top: 12px; left: 12px;
  width: 34px; height: 8px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}

.illus-card__stripe2 {
  position: absolute;
  top: 26px; left: 12px;
  width: 22px; height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.illus-coin {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.illus-coin--lg { width: 26px; height: 26px; background: #fbbc04; bottom: 0; right: 6px; }
.illus-coin--sm { width: 18px; height: 18px; background: #f9ab00; bottom: 12px; right: 0; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* ── Promo banner illustration (rainbow) ────────────────────── */
.rainbow-wrap {
  position: relative;
  width: 200px;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}

.rainbow-arc {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: none;
  box-sizing: border-box;
}

.rainbow-arc--red    { width: 160px; height: 80px; border-radius: 80px 80px 0 0; border: 14px solid #ff3300; }
.rainbow-arc--yellow { width: 126px; height: 63px; border-radius: 63px 63px 0 0; border: 14px solid #fbbc04; }
.rainbow-arc--green  { width: 92px;  height: 46px; border-radius: 46px 46px 0 0; border: 14px solid #34a853; }
.rainbow-arc--blue   { width: 60px;  height: 30px; border-radius: 30px 30px 0 0; border: 14px solid #4285f4; }

.rainbow-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 12px;
  background: #fef6e4;
}

.rainbow-cloud {
  position: absolute;
  background: #fff;
  border-radius: 10px;
  opacity: 0.7;
}

.rainbow-cloud--right { bottom: 8px; right: 4px; width: 40px; height: 16px; }
.rainbow-cloud--left  { bottom: 8px; left: 4px; width: 30px; height: 14px; }

.rainbow-smiley {
  position: absolute;
  top: 0; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #34a853;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Footer link ────────────────────────────────────────────── */
.footer-wp-link {
  color: var(--google-blue);
  text-decoration: underline;
}

/* ── Modal body text ────────────────────────────────────────── */
.modal-body {
  padding: calc(var(--bs-modal-padding) - 0.50rem);
}

.modal-body-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Source bar label ───────────────────────────────────────── */
.source-bar-label {
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ── Vital row last (no border-bottom) ──────────────────────── */
.sk-vital-row--last { border-bottom: none; }

/* ════════════════════════════════════════════════════════════
   COMPONENT: TOP TOPICS
════════════════════════════════════════════════════════════ */
.tt-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.tt-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--google-blue);
  text-decoration: none;
  transition: opacity .15s;
}
.tt-view-all:hover { opacity: .75; color: var(--google-blue); }
.tt-view-all__icon { font-size: 16px; }

.tt-card {
  display: block;
  color: inherit;
}
.tt-card:hover .tt-card__img { transform: scale(1.03); }

.tt-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-alt);
  margin-bottom: 10px;
  border: 1px solid var(--border-light);
}

.tt-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.tt-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.tt-card__count {
  font-size: 12px;
  color: var(--google-blue);
  font-weight: 500;
}

@media (min-width: 992px) {
  .col-lg-tt {
    flex: 0 0 auto;
    width: 12.5%;
  }
}


    .site-card {
      background: var(--surface-alt);
      border: 1px solid rgba(255,255,255,.06);
      color: inherit;
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      min-height: 100%;
    }
    .site-card:hover {
      transform: translateY(-2px);
      border-color: var(--surface-alt);
      color: inherit;
    }
    .site-logo {
      width: 32px;
      height: 32px;
      border-radius: .5rem;
      flex: 0 0 auto;
    }
    .text-muted-custom {
      color: var(--muted) !important;
    }
    .header-wrap, .footer-wrap {
      max-width: 1100px;
    }

/* ════════════════════════════════════════════
   OUR PRICING SECTION
════════════════════════════════════════════ */
.our-pricing {
  background: var(--surface);
  padding: 80px 40px;
  border: 1px solid var(--border-light);
}

.pricing-content {
  position: sticky;
  top: 80px;
}

.pricing-box-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.pricing-box {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 30px;
  background: var(--surface);
}

.pricing-box.highlighted-box {
  background: #ff3300;
  border-color: transparent;
}

.pricing-box-content {
  width: calc(36% - 15px);
  text-align: center;
  border-right: 1px solid var(--border-light);
  padding-right: 28px;
  flex-shrink: 0;
}

.pricing-box.highlighted-box .pricing-box-content {
  border-color: rgba(255,255,255,.22);
}

.pricing-title p {
  text-transform: capitalize;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.pricing-box.highlighted-box .pricing-title p {
  color: rgba(255,255,255,.8);
}

.pricing-title h2 {
  font-size: 44px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin: 0;
}

.pricing-box.highlighted-box .pricing-title h2 {
  color: #fff;
}

.pricing-title h2 sup {
  font-size: 24px;
  vertical-align: super;
}

.pricing-title h2 sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.pricing-box.highlighted-box .pricing-title h2 sub {
  color: rgba(255,255,255,.7);
}

.pricing-btn {
  margin-top: 14px;
}

.pricing-btn .btn-default {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: var(--google-blue);
  color: #fff;
  transition: opacity .2s;
  white-space: nowrap;
}

.pricing-btn .btn-default:hover { opacity: .85; }

.pricing-btn .btn-highlighted {
  background: #fff;
  color: #ff3300;
}

.pricing-list {
  width: calc(64% - 15px);
  padding-left: 28px;
}

.pricing-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pricing-list ul li {
  position: relative;
  width: calc(50% - 7px);
  text-transform: capitalize;
  padding-left: 22px;
  font-size: 13px;
  color: var(--text-secondary);
}

.pricing-box.highlighted-box .pricing-list ul li {
  color: rgba(255,255,255,.9);
}

.pricing-list ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  position: absolute;
  top: 1px;
  left: 0;
  font-size: 13px;
  color: var(--google-blue);
}

.pricing-box.highlighted-box .pricing-list ul li::before {
  color: #fff;
}

.pricing-benefit-list {
  margin-top: 20px;
}

.pricing-benefit-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px 24px;
}

.pricing-benefit-list ul li {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-benefit-list ul li i {
  color: var(--google-blue);
}

/* Pricing title in left column */
.pricing-section-title h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--google-blue);
  margin-bottom: 8px;
}

.pricing-section-title h2 {
  font-size: 32px;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 14px;
}

.pricing-section-title h2 span { font-weight: 700; }

.pricing-section-title p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .our-pricing { padding: 50px 20px; }
  .pricing-content { position: static; margin-bottom: 28px; }
}

@media (max-width: 575px) {
  .pricing-box { flex-direction: column; padding: 20px; gap: 16px; }
  .pricing-box-content {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding-right: 0;
    padding-bottom: 16px;
  }
  .pricing-box.highlighted-box .pricing-box-content { border-color: rgba(255,255,255,.22); }
  .pricing-title h2 { font-size: 32px; }
  .pricing-list { width: 100%; padding-left: 0; padding-top: 4px; }
  .pricing-list ul li { width: 100%; }
}

/* ════════════════════════════════════════════
   INTRO VIDEO — PARALLAX SECTION
════════════════════════════════════════════ */
.bg-section {
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.intro-video {
  position: relative;
  /* padding: 380px 0 60px; */
  /* background: url('https://img.youtube.com/vi/bDeznGExhAw/maxresdefault.jpg') center center / cover no-repeat; */
  overflow: hidden;
}

.intro-video::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 51, 0) 27%, #001a33 100%);
}

.intro-video > .row {
  position: relative;
  z-index: 1;
}

/* ── Hero de /videos/ (tpl-parts/content-videos-hero.php) ─────────────────────────────────── */
.vx-hero {
  /* Mismo degradado que el hero de la portada (.sp-hero) */
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  color: #fff;
  border-radius: var(--radius-lg); /* el mismo de .g-card */
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.vx-hero__fila { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.vx-hero__texto { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
/* Sin video del hero: todo centrado (la ruta, a la izquierda de la caja, como en la maqueta) */
.vx-hero--sin-video .vx-hero__texto { align-items: center; text-align: center; }
.vx-hero--sin-video .vx-hero__ruta { align-self: flex-start; }
.vx-hero--sin-video .vx-hero__titulo { max-width: 820px; }
.vx-hero--sin-video .vx-hero__desc { max-width: 640px; }
.vx-hero--sin-video .vx-buscar { max-width: 560px; }
.vx-hero__ruta { font-size: 13px; color: rgba(255, 255, 255, .72); display: flex; gap: 8px; }
.vx-hero__ruta a { color: inherit; text-decoration: none; }
.vx-hero__ruta a:hover { color: #fff; }
.vx-hero__titulo { margin: 0; font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -.5px; color: #fff; }
.vx-hero__desc { margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .8); max-width: 520px; }

.vx-buscar { display: flex; gap: 8px; width: 100%; max-width: 520px; }
.vx-buscar__campo {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--radius-md); padding: 0 14px; color: var(--text-secondary);
}
.vx-buscar__campo:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.vx-buscar__campo input {
  flex: 1 1 auto; min-width: 0; height: 52px; border: 0; outline: none;
  background: transparent; font-size: 16px; color: var(--text-primary);
}
.vx-buscar__campo input::placeholder { color: var(--text-secondary); }
.vx-buscar__btn {
  /* Rojo del logo de dominicana.do */
  flex: 0 0 auto; height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius-md);
  background: #ff0000; color: #fff; font-size: 16px; font-weight: 700;
}
.vx-buscar__btn:hover { background: #d90000; }
.vx-buscar__btn i { display: none; }

.vx-cifras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 36px; }
.vx-hero--sin-video .vx-cifras { justify-content: center; gap: 56px; }
.vx-cifras li { display: flex; flex-direction: column; gap: 2px; }
.vx-cifras strong { font-size: 30px; font-weight: 700; line-height: 1.2; }
.vx-cifras span { font-size: 14px; color: rgba(255, 255, 255, .72); }

.vx-hero__video { flex: 1.2 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vx-hero__etiqueta { display: flex; align-items: center; gap: 12px; }
.vx-hero__etiqueta > span { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .72); font-weight: 700; }
.vx-hero__portada { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #0f2027; }
.vx-hero__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-hero__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vx-hero__play span {
  width: 76px; height: 76px; border-radius: 50%; background: #ff3300; color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform var(--transition);
}
.vx-hero__portada:hover .vx-hero__play span { transform: scale(1.08); }
.vx-hero__vtitulo { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 500; color: #fff; }
.vx-hero__vtitulo a { color: inherit; text-decoration: none; }

.vx-cats { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 28px; }
.vx-hero--sin-video .vx-cats { align-items: center; }
.vx-cats__titulo { margin: 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.vx-cats__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-hero--sin-video .vx-cats__lista { justify-content: center; }
.vx-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-md); font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.vx-chip:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.vx-chip--activo, .vx-chip--activo:hover { background: #fff; color: #0f2027; border-color: #fff; font-weight: 500; }
.vx-chip--mas { background: transparent; color: #c6dafc; font-weight: 500; }
.vx-chip--mas:hover { color: #fff; }
.vx-chip--mas i { transition: transform var(--transition); }
.vx-cats.is-abierto .vx-chip--mas i { transform: rotate(-90deg); }
.vx-chip--extra { display: none; }
.vx-cats.is-abierto .vx-chip--extra { display: inline-flex; }
.vx-chip--solo-movil { display: none; }
[id^="yt-"] { scroll-margin-top: 16px; }

@media (max-width: 767.98px) {
  .vx-hero { padding: 22px 18px; gap: 18px; }
  .vx-hero__fila, .vx-hero__texto { gap: 18px; }
  .vx-hero__titulo { font-size: 32px; line-height: 1.1; letter-spacing: -.3px; }
  .vx-hero__desc { font-size: 16px; line-height: 1.5; }
  .vx-buscar__campo > i { display: none; }
  .vx-buscar__btn { width: 52px; padding: 0; }
  .vx-buscar__btn i { display: inline; font-size: 18px; }
  .vx-buscar__btn span { display: none; }
  .vx-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; width: 100%; }
  .vx-hero--sin-video .vx-cifras { gap: 12px 8px; }
  .vx-cifras strong { font-size: 22px; }
  .vx-cifras span { font-size: 12px; }
  .vx-hero__video { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; gap: 12px; }
  .vx-hero__play span { width: 60px; height: 60px; font-size: 22px; }
  .vx-hero__vtitulo { font-size: 18px; line-height: 1.35; }
  .vx-cats { padding-top: 18px; gap: 10px; }
  .vx-chip { padding: 11px 14px; }
  .vx-chip--escritorio { display: none; }
  .vx-chip--solo-movil { display: inline-flex; }
  .vx-cats.is-abierto .vx-chip--escritorio { display: inline-flex; }
}

/* Top 10 de la semana de /videos/ (tpl-parts/content-videos-top10.php): 5 por fila en PC, 2 en tablet y slider
   con puntos en el teléfono; el puesto, en un número grande sobre la esquina de la miniatura. */
.vx-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.vx-top__portada { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin-bottom: 8px; background: #0f2027; }
.vx-top__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-top__portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%); }
.vx-top__num {
  position: absolute; left: 10px; bottom: 0; z-index: 1;
  font-family: var(--font-display); font-size: 64px; font-weight: 700; font-style: italic; line-height: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
@media (max-width: 991.98px) { .vx-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .vx-top {
    display: flex; gap: 12px; position: relative;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .vx-top::-webkit-scrollbar { display: none; }
  .vx-top > .vx-top__item { flex: 0 0 auto; width: 88%; scroll-snap-align: center; }
}

/* Cierre de /videos/ (tpl-parts/content-videos-cierre.php): invita a sugerir un canal. Mismo degradado, radio y
   padding que el hero; el botón en el rojo del logo, como "Buscar". */
.vx-cierre {
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}
.vx-cierre__texto { flex: 1 1 420px; min-width: 0; max-width: 760px; }
.vx-cierre__titulo { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 700; color: #fff; }
.vx-cierre__desc { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.vx-cierre__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: var(--radius-md);
  background: #ff0000; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
}
.vx-cierre__btn:hover { background: #d90000; color: #fff; }
.vx-cierre__btn i { font-size: 20px; }
@media (max-width: 767.98px) {
  .vx-cierre { padding: 22px 18px; }
  .vx-cierre__titulo { font-size: 22px; }
  .vx-cierre__desc { font-size: 15px; }
  .vx-cierre__btn { width: 100%; justify-content: center; }
}

/* Carousel de videos destacados: altura fija para todos los slides. El contenido va abajo (sobre la parte
   oscura del degradado); los 100px de abajo dejan sitio a la barra de navegación .vd-nav (bottom 25px + 48px). */
#videoDestacadoCarousel .intro-video {
  min-height: 75vh;
  display: flex;
  align-items: flex-end;
  padding: 60px 40px 100px;
  box-sizing: border-box;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* La fila ocupa todo el ancho de la caja (como hijo flex se encogía a su contenido): así el campo ACF "Texto en
   tablet y computadora" puede llevar la columna al centro o a la derecha (justify-content-md-* en tpl-videos.php). */
#videoDestacadoCarousel .intro-video > .row { flex-grow: 1; }

/* Móvil y tablet: la caja recorta los lados de la miniatura (en el teléfono solo cabe ¼ del ancho). Qué parte se ve
   lo elige cada video en el campo ACF "Imagen en móvil" → --iv-pos-movil en tpl-page/tpl-videos.php. */
@media (max-width: 991.98px) {
  #videoDestacadoCarousel .intro-video { background-position: var(--iv-pos-movil, 50%) center; }
}

#videoDestacadoCarousel .carousel-item {
  transition: opacity .4s ease-in-out;
}

/* Navegación: ‹ puntos › en una sola barra centrada abajo (tpl-page/tpl-videos.php). Antes las flechas
   iban fijas a 100px del centro y, con más de ~7 videos, los puntos quedaban encima de ellas. */
#videoDestacadoCarousel .vd-nav {
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 24px);
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 26, 51, .45);
  backdrop-filter: blur(6px);
}

#videoDestacadoCarousel .vd-nav__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 15px;
  transition: background .2s;
}

#videoDestacadoCarousel .vd-nav__btn:hover,
#videoDestacadoCarousel .vd-nav__btn:focus-visible {
  background: rgba(255, 255, 255, .32);
}

#videoDestacadoCarousel .vd-nav .carousel-indicators {
  position: static;
  z-index: auto;
  margin: 0;
  padding: 0 2px;
  display: flex;
  align-items: center;
}

/* Cada punto es un botón de 16 × 32 (fácil de tocar); el punto visible es su ::before. El activo se alarga. */
#videoDestacadoCarousel .vd-nav .carousel-indicators [data-bs-slide-to],
.sl-puntos__punto {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 16px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  opacity: 1;
  text-indent: 0;
  transition: width .25s ease;
}

#videoDestacadoCarousel .vd-nav .carousel-indicators [data-bs-slide-to]::before,
.sl-puntos__punto::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .55);
  transform: translate(-50%, -50%);
  transition: width .25s ease, background-color .25s ease;
}

#videoDestacadoCarousel .vd-nav .carousel-indicators [data-bs-slide-to]:hover::before,
.sl-puntos__punto:hover::before {
  background: rgba(255, 255, 255, .85);
}

#videoDestacadoCarousel .vd-nav .carousel-indicators .active,
.sl-puntos__punto.active {
  width: 30px;
}

#videoDestacadoCarousel .vd-nav .carousel-indicators .active::before,
.sl-puntos__punto.active::before {
  width: 22px;
  background: #fff;
}

/* Teléfono: puntos más juntos para que quepan hasta 12 videos en la barra. */
@media (max-width: 575.98px) {
  #videoDestacadoCarousel .vd-nav { bottom: 20px; }
  #videoDestacadoCarousel .vd-nav__btn { width: 36px; height: 36px; font-size: 14px; }
  #videoDestacadoCarousel .vd-nav .carousel-indicators [data-bs-slide-to], .sl-puntos__punto { width: 13px; }
  #videoDestacadoCarousel .vd-nav .carousel-indicators [data-bs-slide-to]::before, .sl-puntos__punto::before { width: 7px; height: 7px; }
  #videoDestacadoCarousel .vd-nav .carousel-indicators .active, .sl-puntos__punto.active { width: 24px; }
  #videoDestacadoCarousel .vd-nav .carousel-indicators .active::before, .sl-puntos__punto.active::before { width: 18px; }
}

/* Puntos de los sliders del teléfono (videos de cada sección de /videos/, portadas y revistas;
   tpl-parts/content-portadas-slider-puntos.php): la misma forma que los del carrusel de destacados (comparten
   las reglas de arriba: el activo se alarga), pero sin barra de fondo y en gris, con el activo en negro. */
.sl-puntos {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.sl-puntos:empty { display: none; }
.sl-puntos .sl-puntos__punto::before { background: #9aa0a6; }
.sl-puntos .sl-puntos__punto:hover::before { background: var(--text-secondary); }
.sl-puntos .sl-puntos__punto.active::before { background: var(--text-primary); }
/* Sobre fondo oscuro (widgets del hero de la portada, tpl-header/header.php): en blanco, como en el carrusel. */
.sl-puntos--blanco .sl-puntos__punto::before { background: rgba(255, 255, 255, .55); }
.sl-puntos--blanco .sl-puntos__punto:hover::before { background: rgba(255, 255, 255, .85); }
.sl-puntos--blanco .sl-puntos__punto.active::before { background: #fff; }

/* Noticias Destacadas (tpl-parts/content-noticias-mini.php): en el teléfono, la principal y las 2 secundarias van en
   un slider como los videos (una a casi todo el ancho y se asoma la siguiente); de md en adelante .nd-slider no
   cuenta (display: contents) y siguen como antes: la principal y debajo las 2 en columnas. */
.nd-slider { display: contents; }
@media (max-width: 767.98px) {
  .nd-slider {
    display: flex;
    gap: 12px;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .nd-slider::-webkit-scrollbar { display: none; }
  .nd-slider > .row { display: contents; }
  .nd-slider > .nd-slider__item,
  .nd-slider > .row > .col {
    flex: 0 0 auto;
    width: 88%;
    padding: 0;
    margin: 0;
    scroll-snap-align: center;
  }
}

/* "Para ti" (.nd-fila) y "Más populares" (.nd-pop) de content-noticias-mini.php. En el teléfono, con las proporciones
   de Yahoo en móvil (espanol.yahoo.com a 390 px: foto cuadrada de 130 px, ~36 % del ancho; 12 px hasta el texto;
   titular de 18/22 px a 3 líneas, alineado arriba), pero con la foto al 75 % (27 % del ancho, ~92 px a 390 px:
   pedido del usuario el 2026-10-27) y las dos listas iguales, con las fotos recortadas con la silueta
   del logo (assets/img/logo-silueta.svg, como .img-silueta). De md en adelante siguen como antes:
   en "Para ti", foto 16:9 en col-5 centrada con el texto; en "Más populares", miniatura cuadrada de 64 px. */
.nd-fila { align-items: center; }
.nd-fila__titulo { font-size: clamp(14px, 1.5vw, 18px); line-height: 1.25; }
.nd-pop { gap: .5rem; }
.nd-pop__foto { border-radius: var(--bs-border-radius); }
.nd-pop__titulo { font-size: 13px; }
@media (max-width: 767.98px) {
  .nd-fila { --bs-gutter-x: 12px; align-items: flex-start; }
  /* La columna lleva 6 px de gutter a cada lado: con 27 % + 9 px la foto queda en el 27 % del ancho del texto,
     como en "Más populares". */
  .nd-fila > .nd-fila__foto { width: calc(27% + 9px); }
  .nd-fila > .nd-fila__texto { width: calc(73% - 9px); }
  .nd-fila .ratio { --bs-aspect-ratio: 100%; }
  .nd-fila__titulo,
  .nd-pop__titulo { font-size: 18px; line-height: 22px; font-family: inherit; font-weight: 700; }
  .nd-pop { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .nd-pop__foto { width: 27%; height: auto; aspect-ratio: 1 / 1; }
  .nd-fila .ratio > img,
  .nd-pop__foto {
    -webkit-mask: url("../img/logo-silueta.svg") center / contain no-repeat;
            mask: url("../img/logo-silueta.svg") center / contain no-repeat;
  }
}

/* Section title inside intro-video */
.iv-badge {
  display: inline-block;
  background: #ff3300;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.iv-title {
  margin-bottom: 0;
  text-shadow: 0 2px 2px rgba(0,0,0,.9);
}

.iv-title h2 {
  color: #fff;
  font-size: 38px;
  font-weight: 300;
  line-height: 1.25;
  margin: 0;
}

.iv-title h2 span {
  font-weight: 700;
}

/* Play button */
.iv-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Solo el círculo (hijo directo): el enlace de "Ver video" dentro del <p> no lleva este estilo. */
.iv-play-btn > a {
  background: #ff3300;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-position .3s ease;
}

.iv-play-btn > a:hover {
  background: #cc2900;
}

/* Botón con la silueta del logo de dominicana.do (assets/img/logo-silueta.svg): la forma roja va en un ::before
   con máscara, así el foco del enlace se sigue viendo y el contenido (el icono) queda encima. Se usa en el play
   del carrusel de videos destacados (tpl-page/tpl-videos.php); sirve para cualquier botón cuadrado. */
.btn-silueta { position: relative; isolation: isolate; }
.btn-silueta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ff0000;
  -webkit-mask: url("../img/logo-silueta.svg") center / contain no-repeat;
          mask: url("../img/logo-silueta.svg") center / contain no-repeat;
  transition: background var(--transition);
}
.btn-silueta:hover::before { background: #d90000; }
.iv-play-btn > a.btn-silueta,
.iv-play-btn > a.btn-silueta:hover { background: transparent; border-radius: 0; }
/* Icono y texto dentro de la silueta, en gris: "Ver Todos" / "Ver Todas" de Videos Destacados, Portadas y Revistas en la
   portada (tpl-parts/content-youtube-popular.php, content-portadas-frontpage.php, content-portadas-revistas-frontpage.php).
   La sombra muy fina sigue la silueta para que el gris claro no se pierda contra el fondo. */
.btn-silueta-texto {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  aspect-ratio: 1;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn-silueta-texto i { font-size: 16px; }
.btn-silueta-texto { filter: drop-shadow(0 0 0.6px rgba(60, 64, 67, .55)); }
.btn-silueta-texto::before { background: var(--surface-alt); }
.btn-silueta-texto:hover::before { background: var(--surface-hover); }
.btn-silueta-texto:hover,
.btn-silueta-texto:focus { color: var(--text-primary); }
@media (min-width: 992px) {
  .btn-silueta-texto { width: 84px; gap: 5px; font-size: 11px; }
  .btn-silueta-texto i { font-size: 22px; }
}
/* "Sugerir" del hero (abajo a la derecha, tpl-header/header.php): la silueta en rojo con el texto en blanco, del
   mismo tamaño en todas las pantallas. */
.btn-silueta-texto.btn-silueta-sugerir { width: 62px; font-size: 10px; filter: none; }
.btn-silueta-texto.btn-silueta-sugerir,
.btn-silueta-texto.btn-silueta-sugerir:hover,
.btn-silueta-texto.btn-silueta-sugerir:focus { color: #fff; }
.btn-silueta-texto.btn-silueta-sugerir i { font-size: 16px; }
.btn-silueta-texto.btn-silueta-sugerir::before { background: #ff0000; }
.btn-silueta-texto.btn-silueta-sugerir:hover::before { background: #d90000; }
/* Categorías de las páginas de mapas (tpl-parts/content-mapas-explorar.php): <button> con la silueta en gris y la
   categoría elegida en rojo con el texto en blanco. Cada uno en una columna de la rejilla de Bootstrap: llena su
   columna hasta el tamaño normal de la silueta (64 px; 84 px desde lg). Las de /videos/
   (tpl-parts/content-videos-categorias.php) son enlaces con el mismo tamaño. */
.mapas-categorias .btn-silueta-texto,
.videos-categorias .btn-silueta-texto { width: 100%; max-width: 64px; }
@media (min-width: 992px) {
  .mapas-categorias .btn-silueta-texto,
  .videos-categorias .btn-silueta-texto { max-width: 84px; }
}
/* Categorías de /videos/ (2026-11-04): solo el icono en la silueta y el nombre debajo. El ::before cubre solo la parte
   cuadrada de arriba, y el <i> ocupa ese mismo cuadrado para que el icono quede centrado en él. */
.videos-categorias .btn-silueta-texto { aspect-ratio: auto; justify-content: flex-start; gap: 6px; font-size: 11px; font-weight: 500; line-height: 1.2; filter: none; }
.videos-categorias .btn-silueta-texto::before { inset: 0 0 auto 0; aspect-ratio: 1; }
.videos-categorias .btn-silueta-texto i { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; font-size: 22px; }
@media (min-width: 992px) {
  .videos-categorias .btn-silueta-texto { gap: 8px; font-size: 12px; }
  .videos-categorias .btn-silueta-texto i { font-size: 26px; }
}
button.btn-silueta-texto { border: 0; background: transparent; padding: 0; }
.btn-silueta-texto.activo,
.btn-silueta-texto.activo:hover,
.btn-silueta-texto.activo:focus { color: #fff; filter: none; }
.btn-silueta-texto.activo::before { background: #ff0000; }
.btn-silueta-texto.activo:hover::before { background: #d90000; }

/* Miniatura con un icono para los mapas que no tienen captura (tpl-page/tpl-mapas*.php), en vez del logo de
   relleno; el color va por categoría. */
.mapa-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-size: 48px;
}
.mapa-icono--globales  { color: var(--google-blue); }
.mapa-icono--clima     { color: var(--btn-cyan-h); }
.mapa-icono--sismos    { color: #8d5a3b; }
.mapa-icono--incendios { color: var(--btn-red); }
.mapa-icono--rayos     { color: var(--google-yellow); }
.mapa-icono--aviacion  { color: var(--btn-purple); }
.mapa-icono--maritimo  { color: var(--btn-blue-h); }
.mapa-icono--trafico   { color: #e37400; }
.mapa-icono--ciber     { color: var(--google-teal); }
.mapa-icono--lidar     { color: var(--text-secondary); }

/* Imagen recortada con la silueta del logo, en vez de un círculo (logos de Canales amigos,
   tpl-parts/content-videos-amigos.php). */
.img-silueta {
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: url("../img/logo-silueta.svg") center / contain no-repeat;
          mask: url("../img/logo-silueta.svg") center / contain no-repeat;
}

/* Todos los logos del sitio con la silueta del logo en vez del círculo: Sitios Populares, medios, bancos, viajes,
   tiendas, salud, delivery, logos de canales de /videos/… (img "rounded-circle border img-fluid … d-block") y el
   ícono con iniciales cuando no hay logo. La máscara recorta también el borde, así que el enlace que los contiene
   lleva una sombra muy fina que sigue la silueta: sin ella, los logos de fondo blanco perdían la forma. */
img.rounded-circle.border.img-fluid.d-block,
.icono-iniciales.rounded-circle {
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: url("../img/logo-silueta.svg") center / contain no-repeat;
          mask: url("../img/logo-silueta.svg") center / contain no-repeat;
}
a:has(> img.rounded-circle.border.img-fluid.d-block),
a:has(> .icono-iniciales),
a:has(> img.img-silueta) {
  filter: drop-shadow(0 0 0.6px rgba(60, 64, 67, .55));
}

.iv-play-btn > a i {
  font-size: 22px;
  color: #fff;
}

.iv-play-btn p {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-transform: capitalize;
}

/* Feature list */
.iv-list {
  border-top: 1px solid rgba(255, 255, 255, .22);
  margin-top: 42px;
  padding-top: 40px;
}

.iv-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
}

.iv-list ul li {
  position: relative;
  width: calc(25% - 22.5px);
  color: #fff;
  padding-left: 28px;
  font-size: 14px;
  font-weight: 500;
}

.iv-list ul li::after {
  content: '\f00c';
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  position: absolute;
  top: 1px;
  left: 0;
  font-size: 15px;
  color: #fff;
}

@media (max-width: 991px) {
  .intro-video {
    padding: 240px 0 50px;
  }

  .iv-list ul li {
    width: calc(50% - 15px);
  }
}

@media (max-width: 575px) {
  .intro-video {
    padding: 160px 0 40px;
  }

  .iv-title h2 {
    font-size: 26px;
  }

  .iv-play-btn {
    justify-content: flex-start;
    margin-top: 20px;
  }

  .iv-list ul li {
    width: 100%;
  }
}

/* ════════════════════════════════════════════
   COMPANY GROWTH — STATS SECTION
════════════════════════════════════════════ */

.company-growth {
  background: var(--surface);
  padding: 80px 40px;
}

.company-growth-image figure {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}

.company-growth-image img {
  width: 100%;
  aspect-ratio: 1 / 0.77;
  object-fit: cover;
  display: block;
}

.company-growth-content {
  margin-left: 30px;
}

.cg-title {
  margin-bottom: 32px;
}

.cg-title h3 {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--google-blue);
  margin-bottom: 12px;
}

.cg-title h2 {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 16px;
  max-width: 520px;
}

.cg-title h2 span {
  font-weight: 700;
  color: #ff3300;
}

.cg-title p {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0;
}

.cg-btn {
  margin-top: 28px;
}

.cg-btn a {
  display: inline-block;
  padding: 10px 22px;
  background: var(--google-blue);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease;
}

.cg-btn a:hover {
  opacity: .85;
  color: #fff;
}

/* Stats grid */
.company-growth-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 72px;
}

.company-growth-item {
  width: calc(25% - 22.5px);
  border-top: 1px solid var(--border-light);
  padding-top: 24px;
}

.company-growth-item h2 {
  font-size: 40px;
  font-weight: 700;
  color: #ff3300;
  margin-bottom: 8px;
  line-height: 1;
}

.company-growth-item h3 {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.company-growth-item p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 991px) {
  .company-growth {
    padding: 50px 20px;
  }

  .company-growth-image {
    /* margin-bottom: 30px; */
  }

  .company-growth-image img {
    aspect-ratio: 1 / 0.6;
  }

  .company-growth-content {
    margin-left: 0;
  }

  .cg-title h2 {
    max-width: 100%;
    font-size: 28px;
  }

  .company-growth-box {
    gap: 24px;
    margin-top: 40px;
  }

  .company-growth-item {
    width: calc(50% - 12px);
  }

  .company-growth-item h2 {
    font-size: 34px;
  }
}

@media (max-width: 575px) {
  .company-growth-item {
    width: 100%;
  }

  .company-growth-item h2 {
    font-size: 28px;
  }

  .company-growth-item h3 {
    font-size: 14px;
  }
}

/* ════════════════════════════════════════════
   OUR SERVICE SECTION
════════════════════════════════════════════ */

.our-service {
  padding: 80px 40px;
  background: #001a33 url('../img/service-bg-plane.svg') no-repeat left center;
  background-size: auto;
}

.service-content {
  position: sticky;
  top: 100px;
  margin-right: 30px;
}

.sv-title {
  margin-bottom: 32px;
}

.sv-title h3 {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #ff3300;
  margin-bottom: 12px;
}

.sv-title h2 {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 16px;
  max-width: 520px;
}

.sv-title h2 span {
  font-weight: 700;
  color: #ff3300;
}

.sv-title p {
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   SISTEMA DE BOTONES — sv-btn (wrapper <a> pattern)
   ══════════════════════════════════════════════════════════ */


/* Base shared */
.sv-btn a,
.white-sv-btn a,
.sv-btn--blue a,
.sv-btn--green a,
.sv-btn--yellow a,
.sv-btn--cyan a,
.sv-btn--purple a,
.sv-btn--dark a,
.sv-btn--outline a,
.sv-btn--teal a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease, background-color .2s ease;
  border: 2px solid transparent;
}

/* Red — default */
.sv-btn a                { background: var(--btn-red);    color: #fff; }
.sv-btn a:hover          { background: var(--btn-red-h);  color: #fff; opacity: 1; }

/* White */
.white-sv-btn a          { background: #fff; color: #000; }
.white-sv-btn a:hover    { background: #e9ecef; color: #000; opacity: 1; }

/* Blue */
.sv-btn--blue a          { background: var(--btn-blue);    color: #fff; }
.sv-btn--blue a:hover    { background: var(--btn-blue-h);  color: #fff; opacity: 1; }

/* Green */
.sv-btn--green a         { background: var(--btn-green);   color: #fff; }
.sv-btn--green a:hover   { background: var(--btn-green-h); color: #fff; opacity: 1; }

/* Teal */
.sv-btn--teal a          { background: var(--text-link-teal); color: #fff; }
.sv-btn--teal a:hover    { background: var(--text-link-teal); color: #fff; opacity: 0.85; }

/* Yellow */
.sv-btn--yellow a        { background: var(--btn-yellow);   color: #000; }
.sv-btn--yellow a:hover  { background: var(--btn-yellow-h); color: #000; opacity: 1; }

/* Cyan */
.sv-btn--cyan a          { background: var(--btn-cyan);    color: #fff; }
.sv-btn--cyan a:hover    { background: var(--btn-cyan-h);  color: #fff; opacity: 1; }

/* Purple */
.sv-btn--purple a        { background: var(--btn-purple);   color: #fff; }
.sv-btn--purple a:hover  { background: var(--btn-purple-h); color: #fff; opacity: 1; }

/* Dark */
.sv-btn--dark a          { background: var(--btn-dark);    color: #fff; }
.sv-btn--dark a:hover    { background: var(--btn-dark-h);  color: #fff; opacity: 1; }

/* Outline red */
.sv-btn--outline a       { background: transparent; color: var(--btn-red); border-color: var(--btn-red); }
.sv-btn--outline a:hover { background: var(--btn-red); color: #fff; opacity: 1; }

/* Items grid */
.service-item-list {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  margin-bottom: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 30px;
}

.service-item {
  width: calc(50% - 15px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.service-item .icon-box {
  background: #ff3300;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-position .4s ease;
}

.service-item:hover .icon-box {
  background: #cc2900;
}

.service-item .icon-box i {
  font-size: 26px;
  color: #fff;
}

.service-item-content h3 {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 8px;
}

.service-item-content p {
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  margin: 0;
}

.service-footer p {
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  margin: 0;
}

.service-footer p span {
  font-weight: 700;
  color: #ff3300;
  margin-right: 8px;
}

.service-footer a {
  font-weight: 700;
  text-transform: capitalize;
  text-decoration: underline;
  color: #fff;
  transition: color .3s ease;
}

.service-footer a:hover {
  color: #ff3300;
}

/* ── Footer Principal (d-footer) ─────────────────────────── */
.d-footer {
  /* margin-top: 48px; */
  background: #1c1c1e;
  color: #e8eaed;
  font-family: var(--font-sans);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.d-footer__main {
  padding: 32px 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Tiers */
.d-footer__tier {
  padding: 32px 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.d-footer__tier--top {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.d-footer__tier--content {
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Brand */
.d-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.d-footer__site-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.d-footer__tagline {
  font-size: 11px;
  color: #9aa0a6;
  line-height: 1.3;
}
.d-footer__brand-desc {
  font-size: 15px;
  font-weight: 500;
  color: #e8eaed;
  line-height: 1.5;
  margin: 16px 0 20px;
}
.d-footer__brand-desc strong {
  color: #ff3300;
}

/* Grid 3 columnas de secciones */
.d-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 12px;
}
.d-footer__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.d-footer__feature:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.d-footer__feature-icon {
  font-size: 15px;
  color: #9aa0a6;
  margin-top: 1px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.d-footer__feature-title {
  font-size: 13px;
  font-weight: 500;
  color: #e8eaed;
  line-height: 1.3;
}
.d-footer__feature-desc {
  font-size: 11px;
  color: #9aa0a6;
  line-height: 1.3;
  margin-top: 1px;
}

/* Nav columnas */
.d-footer__nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9aa0a6;
  margin-bottom: 12px;
}
.d-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.d-footer__nav a {
  font-size: 13px;
  color: #bdc1c6;
  text-decoration: none;
  transition: color var(--transition);
}
.d-footer__nav a:hover {
  color: #fff;
}

/* CTA desc */
.d-footer__cta-desc {
  font-size: 12px;
  color: #9aa0a6;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Barra inferior */
.d-footer__bottom {
  padding: 14px 24px;
  background: #141416;
}
.d-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 0;
}
.d-footer__copy {
  font-size: 12px;
  color: #9aa0a6;
}
.d-footer__legal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.d-footer__legal span {
  color: #444;
}
.d-footer__legal a {
  color: #9aa0a6;
  text-decoration: none;
  transition: color var(--transition);
}
.d-footer__legal a:hover {
  color: #fff;
}
.d-footer__social {
  display: flex;
  gap: 14px;
}
.d-footer__social a {
  font-size: 16px;
  color: #9aa0a6;
  text-decoration: none;
  transition: color var(--transition);
}
.d-footer__social a:hover { color: #fff; }

/* Contacto en brand */
.d-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.d-footer__contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #bdc1c6;
  text-decoration: none;
  transition: color var(--transition);
}
.d-footer__contact a:hover { color: #fff; }
.d-footer__contact i { width: 14px; text-align: center; font-size: 13px; }

/* Banner PWA */
.d-footer__pwa {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: #242426;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}
.d-footer__pwa-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(255,51,0,.12);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-footer__pwa-body { flex: 1; min-width: 200px; }
.d-footer__pwa-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.d-footer__pwa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.d-footer__pwa-chips span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #bdc1c6;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.d-footer__pwa-chips i { font-size: 10px; color: #9aa0a6; }
.d-footer__pwa-sub {
  font-size: 11px;
  color: #9aa0a6;
  line-height: 1.4;
}
.d-footer__pwa-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.d-footer__pwa-note {
  font-size: 10px;
  color: #9aa0a6;
  text-align: center;
}

/* Red de sitios Ziport */
.d-footer__network {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.d-footer__network-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9aa0a6;
  margin-bottom: 14px;
}
.d-footer__network-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #bdc1c6;
  font-size: 11px;
  font-weight: 500;
  padding: 8px 4px;
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}
.d-footer__network-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.d-footer__network-item--active {
  color: #fff;
}
/* Logos a plena opacidad (colores vivos, como el de Dominicana). Contorno claro para que
   los más oscuros (Europa.do) no se pierdan en el fondo del footer. */
.d-footer__network-item img {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.45));
}

@media (max-width: 767px) {
  .d-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .d-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 991px) {
  .our-service {
    padding: 50px 20px;
  }

  .service-content {
    position: static;
    margin-right: 0;
    margin-bottom: 30px;
  }

  .sv-title h2 {
    max-width: 100%;
    font-size: 28px;
  }

  .service-item-list {
    gap: 30px;
  }
}

@media (max-width: 575px) {
  .fa-4x {
      font-size: 3em;
  }
  
  .service-item {
    width: 100%;
  }

  .service-item .icon-box {
    height: 60px;
    width: 60px;
  }

  .service-item .icon-box i {
    font-size: 22px;
  }

  .service-item-content h3 {
    font-size: 16px;
  }
}

/* ── Medios: logo links ──────────────────────────────────────── */
a:has(img.rounded-circle.border.img-fluid.mx-auto.d-block.mb-1) {
  text-decoration: none;
}

/* ── Modales: footer con el mismo padding (variable) que el header, botones centrados ── */
.modal {
  --bs-modal-header-padding: .75rem;
}
.modal-footer {
  padding: calc(var(--bs-modal-padding) - 0.75rem);
  justify-content: center;
}
#videoModalTitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Modales: blur de fondo ──────────────────────────────────── */
body:has(.modal.show) main {
  filter: blur(6px);
  transition: filter 0.3s ease;
}
body:not(:has(.modal.show)) main {
  filter: none;
  transition: filter 0.3s ease;
}

/* ── Bottom Nav Bar (flotante) ───────────────────────────── */
.sk-bottombar {
  /* Mismas propiedades que sk-topbar */
  display: flex;
  align-items: center;
  gap: 8px;
  /* Fondo degradado igual al hero */
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: 9px 16px;
  min-height: 60px;
  flex-wrap: wrap;

  /* Posición flotante */
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 24px));
  /* Ancho: sigue al .container-fluid. Se usa 100% y no 100vw porque
     100vw incluye la barra de scroll y hace que sobresalga a los lados. */
  width: calc(100% - 24px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (min-width: 576px)  {  } 

@media (min-width: 768px)  { 
    .container-fluid {
      padding-right: calc(var(--bs-gutter-x) * 1.5);
      padding-left: calc(var(--bs-gutter-x) * 1.5);
    }
}

@media (min-width: 992px)  { 
    .container-fluid {
      padding-right: calc(var(--bs-gutter-x) * 1.5);
      padding-left: calc(var(--bs-gutter-x) * 1.5);
    }
}

@media (min-width: 1200px) { 
    .container-fluid {
      padding-right: calc(var(--bs-gutter-x) * 1.5);
      padding-left: calc(var(--bs-gutter-x) * 1.5);
    }
}

@media (min-width: 1400px) { 
    .container-fluid {
      padding-right: calc(var(--bs-gutter-x) * 2.5);
      padding-left: calc(var(--bs-gutter-x) * 2.5);
    }
}
  

/* Ancho del bottombar = ancho del .container-fluid:
   replica el padding lateral de cada breakpoint (ambos lados sumados). */
@media (min-width: 768px)  { .sk-bottombar { width: calc(100% - 72px);  } } /* 36px * 2 */
@media (min-width: 1400px) { .sk-bottombar { width: calc(100% - 120px); } } /* 60px * 2 */

.sk-bottombar.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Texto/iconos en tono claro sobre el degradado del bottombar */
.sk-bottombar .sp-location-name { color: #fff; }
.sk-bottombar .sp-location-sub  { color: rgba(255, 255, 255, .7); }

.sk-bottombar .sk-tab-top        { color: rgba(255, 255, 255, .75); }
.sk-bottombar .sk-tab-top:hover  { color: #fff; background: rgba(255, 255, 255, .12); }
.sk-bottombar .sk-tab-top.active { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }

.sk-bottombar .sk-action-btn        { color: rgba(255, 255, 255, .85); }
.sk-bottombar .sk-action-btn:hover  { background: rgba(255, 255, 255, .12); }

.sk-bottombar .g-topbar__icon-btn        { color: #fff; }
.sk-bottombar .g-topbar__icon-btn:hover  { background: rgba(255, 255, 255, .12); }

.sk-bottombar .sk-quick-item        { color: rgba(255, 255, 255, .8); }
.sk-bottombar .sk-quick-item:hover  { color: #fff; background: rgba(255, 255, 255, .12); }
.sk-bottombar .sk-quick-item i      { color: #fff; }

.sk-bottombar .mobile-nav-inner--bottom { border-top-color: rgba(255, 255, 255, .18); }

/* Accesos rápidos del bottombar: grid de 6 columnas, icono + nombre debajo. Con minmax(0, 1fr) las columnas no
   crecen con el nombre más largo ("Apartamentos"), que con 1fr sacaba el grid de la barra en el teléfono. */
.sk-bottombar__quick {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding: 2px 0 6px;
}
.sk-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}
.sk-quick-item i {
  font-size: 18px;
}
.sk-quick-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.sk-quick-item span { overflow-wrap: anywhere; } /* solo corta una palabra si ni así cabe (pantallas de 320 px) */
@media (max-width: 575.98px) {
  /* En el teléfono (iPhone 14: 390 px) 6 columnas dejan ~52 px por nombre: 4 columnas, y caben todos */
  .sk-bottombar__quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sk-quick-item { padding: 8px 0; } /* sin los 2 px de los lados, "Apartamentos" cabe entero también a 360 px */
}

/* Padding al body para que el sk-bottombar no tape el footer */
body {
  padding-bottom: 92px;
}

/* reCAPTCHA badge: oculto globalmente, visible solo en /sugerir/ */
.grecaptcha-badge { visibility: hidden !important; }
.page-template-tpl-sugerir .grecaptcha-badge { visibility: visible !important; }

.small, small { font-size: 0.7em; }


/* Miniaturas de YouTube: el logo de dominicana.do (relleno medio, inc/relleno.php) de fondo mientras carga la
   foto, que lo tapa al llegar. Las <img>, aquí; los fondos en style llevan la capa con ziport_fondo_video() y,
   las tarjetas con data-bg de /add/, esta regla hasta que el lazy load les pone la miniatura. */
img[src*="img.youtube.com/vi/"],
img[src*="ytimg.com/vi/"],
.g-promo-card[data-bg*="youtube.com/vi/"] {
  background-image: url('../img/relleno/medio.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Landings de los accesos rápidos (/apartamentos/, /autos/: tpl-parts/content-landing.php). El hero es el de
   /videos/ (.vx-hero); aquí van los grupos de sitios, el aviso sin resultados del buscador, la calculadora
   (tpl-parts/landing/calculadora.php) y el paso a paso (tpl-parts/landing/pasos.php). */
.lx-grupo, #lx-calculadora, #lx-guia { scroll-margin-top: 16px; }
.lx-grupo:not([hidden]) ~ .lx-grupo:not([hidden]) { border-top: 1px dashed var(--border-light); margin-top: 24px; padding-top: 24px; }
.lx-vacio { margin: 0; padding: 24px 0; text-align: center; font-size: 14px; color: var(--text-secondary); }
/* Redes de cada sitio, debajo del nombre (content-landing.php); toman el color de la marca al pasar el ratón */
.lx-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 7px; margin-top: 4px; font-size: 13px; line-height: 1; }
.lx-redes a { color: var(--text-tertiary); text-decoration: none; padding: 2px 0; }
.lx-redes__ig:hover { color: #e1306c; }
.lx-redes__fb:hover { color: #1877f2; }
.lx-redes__x:hover, .lx-redes__tt:hover { color: #000; }
.lx-redes__yt:hover { color: #ff0000; }
.lx-redes__li:hover { color: #0a66c2; }
.lx-redes__wa:hover { color: #25d366; }

/* Apps de supermercados de /shop/ (tpl-parts/landing/apps-supermercados.php): tarjeta aparte con el naranja de
   Shop. El logo va con la silueta, como en los grupos; el <span> lleva la sombra que la sigue. */
.lx-apps { margin: 24px 0; scroll-margin-top: 16px; background: linear-gradient(135deg, #fff4e0 0%, #fff 60%); } /* sin sombra: el borde de .g-card */
.lx-apps__body { padding: 32px 40px; }
.lx-apps__cabeza { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.lx-apps__icono { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-xl); background: #ff8f00; color: #fff; font-size: 24px; }
.lx-apps__titulo { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--text-primary); }
.lx-apps__desc { margin: 2px 0 0; font-size: 14px; color: var(--text-secondary); }
.lx-apps__aviso { margin: 16px 0 0; font-size: 11px; color: var(--text-tertiary); }
.lx-app { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 14px 14px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
.lx-app__logo { display: block; width: 64px; margin-bottom: 10px; filter: drop-shadow(0 0 0.6px rgba(60, 64, 67, .55)); }
.lx-app__nombre { margin: 0 0 4px; font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--text-primary); }
.lx-app__nota { flex: 1; margin: 0 0 14px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
/* Google Play y App Store, uno al lado del otro; donde la tarjeta es estrecha (<992px), el ícono va encima del nombre. */
.lx-app__tiendas { display: flex; gap: 6px; width: 100%; }
.lx-app__btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-md); background: #000; color: #fff; text-align: left; line-height: 1.1; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.lx-app__btn:hover, .lx-app__btn:focus { background: #3c4043; color: #fff; }
.lx-app__btn i { width: 18px; font-size: 17px; text-align: center; }
.lx-app__btn small { display: block; font-size: 10px; font-weight: 400; opacity: .8; }
/* Redes del súper, debajo de los botones de su app (en /shop/, 'redes' => false: solo aquí hay redes); vacío, guarda el alto */
.lx-app__redes { min-height: 20px; margin-top: 10px; gap: 4px 12px; font-size: 15px; }
@media (max-width: 991.98px) {
  .lx-app__btn { flex-direction: column; gap: 4px; padding: 8px 4px 7px; text-align: center; font-size: 11px; }
  .lx-app__btn small { display: none; }
  .lx-app__redes { min-height: 17px; gap: 4px 7px; font-size: 13px; }
}
@media (max-width: 359.98px) {
  .lx-app__btn span { display: none; } /* solo el ícono (el enlace ya lleva aria-label) */
  .lx-app__btn i { font-size: 20px; }
}

/* Cashback de los bancos en /shop/ (tpl-parts/landing/cashback-bancos.php): la tarjeta de las apps, en verde, con una
   ficha por promoción (tienda, banco, porcentaje, cuándo y condiciones) y las páginas de promociones debajo. */
.lx-apps--cb { background: linear-gradient(135deg, #e6f4ea 0%, #fff 60%); }
.lx-apps--cb .lx-apps__icono { background: #188038; }
.lx-cb { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
.lx-cb__cabeza { display: flex; align-items: center; gap: 12px; }
.lx-cb__logo { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; }
.lx-cb__logo--icono { display: grid; place-items: center; background: var(--surface-alt); color: var(--text-secondary); font-size: 18px; }
.lx-cb__quien { flex: 1 1 auto; min-width: 0; }
.lx-cb__tienda { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--text-primary); }
.lx-cb__banco { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.lx-cb__banco strong { font-weight: 500; color: var(--text-primary); }
.lx-cb__pct { flex: 0 0 auto; padding: 7px 10px; border-radius: var(--radius-md); background: #188038; color: #fff; font-size: 20px; font-weight: 700; line-height: 1; }
.lx-cb__cuando { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.lx-cb__estado { padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; line-height: 1.5; }
.lx-cb__estado--hoy { background: #188038; color: #fff; }
.lx-cb__estado--pronto { background: #e8f0fe; color: #1967d2; }
.lx-cb__donde, .lx-cb__cond { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.lx-cb__cond { color: var(--text-tertiary); }
.lx-cb__ver { margin-top: auto; align-self: flex-start; font-size: 12px; font-weight: 500; color: var(--text-link); text-decoration: none; }
.lx-cb__ver:hover { text-decoration: underline; }
.lx-cb__ver i { margin-left: 3px; font-size: 10px; }
.lx-cb__vacio { margin: 0; padding: 8px 0 16px; font-size: 14px; color: var(--text-secondary); }
.lx-cb__mas { display: none; }
@media (max-width: 767.98px) {
  /* En el teléfono, las 6 primeras y un botón para ver las demás */
  .lx-cb-lista:not(.is-abierta) > li:nth-child(n+7) { display: none; }
  .lx-cb__mas {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 16px;
    background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-md);
    font-size: 14px; font-weight: 500; color: var(--text-link);
  }
  .lx-cb__mas[hidden] { display: none; }
  .lx-cb__fuentes p { gap: 4px 10px; }
}
.lx-cb__fuentes { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border-light); }
.lx-cb__fuentes-t { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.lx-cb__fuentes p { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; line-height: 1.5; }
.lx-cb__fuentes span { font-weight: 500; color: var(--text-secondary); }
.lx-cb__fuentes a { color: var(--text-link); text-decoration: none; }
.lx-cb__fuentes a:hover { text-decoration: underline; }

/* Trámites de /autos/ (tpl-parts/landing/tramites-autos.php): la tarjeta de las apps, en azul, con una ficha por
   trámite (cuándo, para qué, costo, enlace oficial y su guía). En el teléfono, los 6 primeros y un botón (.lx-cb__mas). */
.lx-apps--tr { scroll-margin-top: 16px; background: linear-gradient(135deg, #e8f0fe 0%, #fff 60%); }
.lx-apps--tr .lx-apps__icono { background: #0b3d91; }
.lx-tr { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
.lx-tr__cabeza { display: flex; align-items: center; gap: 12px; }
.lx-tr__icono { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 18px; }
.lx-tr__cuando { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.lx-tr__titulo { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--text-primary); }
.lx-tr__desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.lx-tr__costo { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.lx-tr__costo i { font-size: 11px; color: #188038; }
.lx-tr__enlaces { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; font-weight: 500; }
.lx-tr__enlaces a { text-decoration: none; }
.lx-tr__enlaces a:hover { text-decoration: underline; }
.lx-tr__enlaces i { margin-left: 2px; font-size: 10px; }
.lx-tr__oficial { color: var(--text-link); }
.lx-tr__guia { margin-left: auto; color: #d32f2f; }
@media (max-width: 767.98px) {
  .lx-tr-lista:not(.is-abierta) > li:nth-child(n+7) { display: none; }
}

/* Ferias de vehículos de /autos/ (tpl-parts/landing/ferias-autos.php): las fichas de los trámites (.lx-tr) con el
   estado de hoy (.lx-cb__estado): en curso en verde, con fecha en azul y, sin fecha, el mes de la próxima en ámbar. */
.lx-apps--fe { background: linear-gradient(135deg, #fdecea 0%, #fff 60%); }
.lx-apps--fe .lx-apps__icono { background: #d32f2f; }
.lx-cb__estado--anunciar { background: #fef7e0; color: #b06000; }
.lx-fe--hoy { border-color: #188038; box-shadow: 0 0 0 1px #188038 inset; }
.lx-fe__donde { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--text-primary); }
.lx-fe__donde i { font-size: 11px; color: #d32f2f; }
.lx-fe .lx-tr__costo { align-items: flex-start; line-height: 1.45; }
.lx-fe .lx-tr__costo i { margin-top: 4px; }
.lx-fe__guia { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 500; color: #d32f2f; text-decoration: none; }
.lx-fe__guia:hover { text-decoration: underline; }
.lx-fe__guia i { font-size: 11px; }
.lx-fe__antes, .lx-fe__bancos { margin: 0; font-size: 12px; line-height: 1.4; color: var(--text-tertiary); }

/* Tasas de préstamos por banco de /autos/ (tpl-parts/landing/prestamos-autos.php): una tabla; en el teléfono cada
   fila es una ficha con la etiqueta de cada dato (data-t). */
.lx-apps--pa { background: linear-gradient(135deg, #e6f4ea 0%, #fff 60%); }
.lx-apps--pa .lx-apps__icono { background: #188038; }
.lx-pa { overflow-x: auto; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
.lx-pa__tabla { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
.lx-pa__tabla th, .lx-pa__tabla td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-light); }
.lx-pa__tabla thead th { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); background: var(--surface-alt); }
.lx-pa__tabla tbody tr:last-child > * { border-bottom: 0; }
.lx-pa__tabla tbody th { font-weight: 500; white-space: nowrap; }
.lx-pa__tabla tbody th a { color: var(--text-primary); text-decoration: none; }
.lx-pa__tabla td a { color: var(--text-link); text-decoration: none; font-size: 12px; }
.lx-pa__tabla a:hover { text-decoration: underline; }
.lx-pa__nd { color: var(--text-tertiary); }
.lx-pa__comparar { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.lx-pa__comparar i { margin-right: 8px; color: #188038; }
.lx-pa__comparar a { color: var(--text-link); }
@media (max-width: 767.98px) {
  .lx-pa { overflow: visible; background: none; border: 0; }
  .lx-pa__tabla thead { display: none; }
  .lx-pa__tabla, .lx-pa__tabla tbody { display: block; }
  .lx-pa__tabla tr { display: block; margin-bottom: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
  .lx-pa__tabla tbody th { display: block; padding: 0 0 6px; border: 0; font-size: 15px; white-space: normal; }
  .lx-pa__tabla td { display: flex; gap: 10px; padding: 3px 0; border: 0; }
  .lx-pa__tabla td::before { content: attr(data-t); flex: 0 0 72px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); padding-top: 1px; }
  /* Las 6 primeras y el botón (.lx-cb__mas) para ver las demás */
  #lx-pa-tabla:not(.is-abierta) tbody tr:nth-child(n+7) { display: none; }
}

/* Carros y jeepetas por precio de /carros/ (tpl-parts/landing/precios-autos.php): las fichas de los trámites (.lx-tr),
   en dos listas (carros y jeepetas) con su rótulo. */
.lx-apps--pr { background: linear-gradient(135deg, #e8f0fe 0%, #fff 60%); }
.lx-apps--pr .lx-apps__icono { background: #0b57d0; }
.lx-pr__grupo { margin: 24px 0 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.lx-pr__grupo:first-of-type { margin-top: 0; }
.lx-pr__anios { margin: 0; font-size: 13px; color: var(--text-secondary); }
.lx-pr__anios strong { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.lx-pr__etq { font-weight: 500; color: var(--text-primary); }
.lx-pr__extra { margin: 0; font-size: 12px; color: var(--text-tertiary); }

/* Precio de los eléctricos de /carros/ (tpl-parts/landing/electricos-autos.php): la tabla de las tasas (.lx-pa) con una
   fila de título por tamaño. */
.lx-apps--el { background: linear-gradient(135deg, #e6f4ea 0%, #fff 60%); }
.lx-apps--el .lx-apps__icono { background: #0f9d58; }
.lx-el__grupo th { padding-top: 14px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #188038; background: #f6fbf7; }
.lx-el__tabla td:nth-child(2) { font-weight: 500; white-space: nowrap; }
@media (max-width: 767.98px) {
  .lx-el__tabla tr.lx-el__grupo { margin: 16px 0 8px; padding: 0; background: none; border: 0; }
  .lx-el__tabla tr.lx-el__grupo th { padding: 0; background: none; }
}

/* Canales de YouTube de autos (tpl-parts/landing/canales-autos.php): foto del canal, nombre, suscriptores y su
   descripción en dos líneas. */
.lx-apps--ca { background: linear-gradient(135deg, #fdecea 0%, #fff 60%); }
.lx-apps--ca .lx-apps__icono { background: #ff0000; }
.lx-ca { height: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); text-decoration: none; color: inherit; }
.lx-ca:hover { border-color: #ff0000; }
.lx-ca__foto { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface-alt); }
.lx-ca__texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx-ca__nombre { font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--text-primary); }
.lx-ca__subs { font-size: 12px; color: var(--text-tertiary); }
.lx-ca__desc { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Preguntas frecuentes de una landing (tpl-parts/landing/faq.php): cada una se abre al tocarla. */
.lx-apps--fq { background: linear-gradient(135deg, #f3e8fd 0%, #fff 60%); }
.lx-apps--fq .lx-apps__icono { background: #6a1b9a; }
.lx-fq { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
.lx-fq__item + .lx-fq__item { border-top: 1px solid var(--border-light); }
.lx-fq__q { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.lx-fq__q::-webkit-details-marker { display: none; }
.lx-fq__q h3 { flex: 1; margin: 0; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--text-primary); }
.lx-fq__q i { font-size: 12px; color: var(--text-tertiary); transition: transform .2s; }
.lx-fq__item[open] .lx-fq__q i { transform: rotate(180deg); }
.lx-fq__a { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* Hero de /carros/ con la feria del momento a la derecha ('lado' de content-landing.php,
   tpl-parts/landing/feria-hero.php): el texto a la izquierda, como el hero de /videos/ con su video. El punto verde
   late mientras la feria está abierta; ámbar, si es la próxima. */
.lx-hero__lado { flex: 0 1 420px; min-width: 0; }
.lx-fh { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-xl); color: #fff; }
.lx-fh--hoy { border-color: rgba(52, 168, 83, .75); }
.lx-fh__etiqueta { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.lx-fh__punto { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #fbbc04; }
.lx-fh--hoy .lx-fh__punto { background: #34a853; animation: lx-fh-pulso 1.8s infinite; }
@keyframes lx-fh-pulso { 0% { box-shadow: 0 0 0 0 rgba(52, 168, 83, .6); } 70% { box-shadow: 0 0 0 9px rgba(52, 168, 83, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0); } }
@media (prefers-reduced-motion: reduce) { .lx-fh--hoy .lx-fh__punto { animation: none; } }
.lx-fh__titulo { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: #fff; }
.lx-fh__fechas { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.lx-fh__fechas i { flex: 0 0 14px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.lx-fh__cuenta { margin: 2px 0 0; align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: #fff; color: #188038; font-size: 14px; font-weight: 500; }
.lx-fh--pronto .lx-fh__cuenta { color: #1967d2; }
.lx-fh__oferta { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 500; color: #fff; }
.lx-fh__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lx-fh__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #ff0000; border-radius: var(--radius-md); background: #ff0000; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.lx-fh__btn:hover, .lx-fh__btn:focus { background: #d90000; border-color: #d90000; color: #fff; }
.lx-fh__btn--sec { background: transparent; border-color: rgba(255, 255, 255, .45); }
.lx-fh__btn--sec:hover, .lx-fh__btn--sec:focus { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.lx-fh__luego { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.lx-fh__luego strong { font-weight: 500; color: #fff; }
@media (max-width: 767.98px) {
  .lx-hero__lado { flex-basis: 100%; }
  .lx-fh { padding: 18px; }
  .lx-fh__titulo { font-size: 20px; }
  .lx-fh__cuenta { border-radius: var(--radius-md); font-size: 13px; }
}

/* Hero compacto de las landings ($args['compacto'] de content-landing.php, /shop/) y de /videos/
   (content-videos-hero.php): sin buscador, el título a la izquierda con las cifras al lado y los botones más
   pequeños, en fila con su título. */
.lx-hero--compacto { padding: 28px 32px 24px; gap: 20px; }
.lx-hero--compacto .vx-hero__texto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: center; text-align: left; }
.lx-hero--compacto .vx-hero__ruta { grid-column: 1 / -1; }
.lx-hero--compacto .vx-hero__titulo { grid-column: 1; font-size: 36px; max-width: none; }
.lx-hero--compacto .vx-hero__desc { grid-column: 1; font-size: 15px; max-width: 640px; }
.lx-hero--compacto .vx-cifras { grid-column: 2; grid-row: 2 / span 2; justify-content: flex-end; gap: 32px; }
.lx-hero--compacto .vx-cifras li { align-items: center; text-align: center; }
.lx-hero--compacto .vx-cifras strong { font-size: 26px; }
.lx-hero--compacto .vx-cifras span { font-size: 13px; }
.lx-hero--compacto .vx-cats { flex-direction: row; align-items: center; gap: 12px; padding-top: 18px; }
.lx-hero--compacto .vx-cats__titulo { flex: 0 0 auto; font-size: 14px; }
.lx-hero--compacto .vx-cats__lista { justify-content: flex-start; gap: 6px; }
.lx-hero--compacto .vx-chip { padding: 7px 12px; font-size: 13px; }
/* /videos/ con video del hero: el texto va en una columna, con las cifras debajo */
.lx-hero--compacto:not(.vx-hero--sin-video) .vx-hero__texto { grid-template-columns: minmax(0, 1fr); }
.lx-hero--compacto:not(.vx-hero--sin-video) .vx-cifras { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
@media (max-width: 991.98px) {
  /* En la tablet los botones también van en una sola fila que se desliza, para que el hero no crezca */
  .lx-hero--compacto .vx-cats__lista { min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lx-hero--compacto .vx-cats__lista::-webkit-scrollbar { display: none; }
  .lx-hero--compacto .vx-chip { flex: 0 0 auto; white-space: nowrap; }
  /* En la fila que se desliza caben todas las principales de /videos/: sin el corte a 6 del teléfono */
  .lx-hero--compacto .vx-chip--escritorio { display: inline-flex; }
  .lx-hero--compacto .vx-chip--solo-movil { display: none; }
}

/* Publicidad de las landings (tpl-parts/landing/anuncio.php): la medida del anuncio (728×90; 320×100 en el celular)
   con el relleno del logo de dominicana.do y un botón para anunciarse. */
.lx-anuncio { display: block; max-width: 728px; margin: 0 auto; text-align: center; }
.lx-anuncio--entre { margin: 24px auto; }
.lx-anuncio__etiqueta { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); }
.lx-anuncio__caja { display: flex; align-items: center; justify-content: space-between; height: 90px; padding: 0 20px; border: 1px dashed var(--border); border-radius: var(--radius-md); background-color: var(--surface-alt); background-size: cover; background-position: center; text-decoration: none; }
ins.lx-anuncio__caja { height: auto; min-height: 90px; padding: 0; border: 0; }

.lx-calc__cuota {
  /* Mismo degradado que el hero */
  background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  color: #fff; border-radius: var(--radius-md); padding: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.lx-calc__cuota span { font-size: 14px; color: rgba(255, 255, 255, .75); }
.lx-calc__cuota strong { font-size: 40px; line-height: 1.1; font-weight: 700; }
.lx-calc__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.lx-calc__datos div { background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 12px 14px; }
.lx-calc__datos dt { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.lx-calc__datos dd { margin: 0; font-size: 18px; font-weight: 500; color: var(--text-primary); }

.lx-pasos {
  list-style: none; counter-reset: paso; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.lx-pasos li {
  counter-increment: paso; position: relative; padding: 20px 20px 20px 92px; min-height: 110px;
  background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.lx-pasos li::before {
  /* Número grande del paso, como los del Top 10 de /videos/ (.vx-top__num), en el rojo del logo */
  content: counter(paso); position: absolute; left: 18px; top: 12px; width: 60px; text-align: center;
  font-family: var(--font-display); font-size: 64px; font-weight: 700; font-style: italic; line-height: 1;
  color: #ff0000;
}
.lx-pasos h3 { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--text-primary); }
.lx-pasos p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.lx-pasos a { font-size: 13px; font-weight: 500; color: var(--text-link); text-decoration: none; }

@media (max-width: 767.98px) {
  /* Los botones "Ir a" en una fila que se desliza, para no empujar los sitios fuera de la pantalla */
  .lx-cats { align-items: stretch !important; }
  .lx-cats .vx-cats__lista {
    flex-wrap: nowrap; justify-content: flex-start !important; overflow-x: auto;
    margin: 0 -18px; padding: 0 18px; scrollbar-width: none;
  }
  .lx-cats .vx-cats__lista::-webkit-scrollbar { display: none; }
  .lx-cats .vx-chip { flex: 0 0 auto; white-space: nowrap; }
  .lx-calc__cuota strong { font-size: 30px; }
  .lx-calc__datos dd { font-size: 16px; }
  .lx-pasos li { padding-left: 76px; min-height: 0; }
  .lx-pasos li::before { font-size: 52px; left: 12px; width: 52px; }
  .lx-apps__body { padding: 24px 16px; }
  .lx-apps__cabeza { align-items: flex-start; gap: 12px; }
  .lx-apps__icono { width: 44px; height: 44px; font-size: 20px; }
  .lx-apps__titulo { font-size: 19px; }
  .lx-app { padding: 16px 10px 10px; }
  .lx-anuncio { max-width: 320px; }
  .lx-hero--compacto { padding: 20px 18px 18px; gap: 14px; }
  .lx-hero--compacto .vx-hero__texto { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lx-hero--compacto .vx-hero__titulo { font-size: 26px; }
  .lx-hero--compacto .vx-hero__desc { font-size: 14px; }
  .lx-hero--compacto .vx-cifras { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-top: 6px; }
  .lx-hero--compacto .vx-cifras strong { font-size: 19px; }
  .lx-hero--compacto .vx-cifras span { font-size: 11px; line-height: 1.25; }
  .lx-hero--compacto .vx-cats { flex-direction: column; padding-top: 14px; gap: 8px; }
  .lx-anuncio__caja { height: 100px; padding: 0 14px; }
  ins.lx-anuncio__caja { min-height: 100px; }
}

/* Guías de las landings (tpl-single/single-post.php, inc/guias.php): hero de /videos/ más compacto, el artículo,
   su índice, el lateral y las tarjetas de guías (tpl-parts/landing/guias-lista.php). */
.gx-hero { gap: 0; }
.gx-hero .vx-hero__texto { gap: 16px; }
.gx-hero__titulo { font-size: 40px; max-width: 900px; }
.gx-hero__desc { max-width: 760px; font-size: 17px; }
.gx-hero__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.gx-hero__meta i { margin-right: 4px; }
.gx-hero__meta a { color: inherit; text-decoration: none; }

.gx-articulo .g-card__body { padding: 40px; }
.gx-articulo { font-size: 16px; line-height: 1.7; color: var(--text-primary); }
.gx-articulo h2 { font-size: 24px; line-height: 1.3; font-weight: 500; margin: 36px 0 12px; scroll-margin-top: 16px; }
/* La guía va en una tarjeta por sección y cada calculadora en la suya (ziport_guia_partes(), inc/guias.php): el <h2>
   que abre cada tarjeta no lleva margen arriba. */
.gx-articulo .g-card__body > h2:first-child { margin-top: 0; }
.gx-articulo .g-card__body > :last-child { margin-bottom: 0; }
/* La última tarjeta de la columna no suma su margen al de la fila (el espacio hasta lo de abajo queda en 24 px) */
.gx-columna > :last-child,
.gx-columna > .gx-articulo:last-child > :last-child { margin-bottom: 0 !important; }
.gx-articulo h3 { font-size: 18px; line-height: 1.35; font-weight: 500; margin: 24px 0 8px; }
.gx-articulo p, .gx-articulo ul, .gx-articulo ol { margin: 0 0 16px; }
.gx-articulo li { margin-bottom: 6px; }
.gx-articulo a { color: var(--text-link); }
.gx-articulo strong { font-weight: 500; }
.gx-articulo table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.gx-articulo th, .gx-articulo td { border: 1px solid var(--border-light); padding: 10px 12px; text-align: left; vertical-align: top; min-width: 140px; }
.gx-articulo th { background: var(--surface-alt); font-weight: 500; }
/* Nota destacada: <p class="gx-nota"> en el editor */
.gx-articulo .gx-nota { background: var(--google-blue-light); border-left: 4px solid var(--google-blue); border-radius: var(--radius-md); padding: 14px 16px; }
.gx-articulo .gx-alerta { background: #fef7e0; border-left: 4px solid var(--google-yellow); border-radius: var(--radius-md); padding: 14px 16px; }
.gx-aviso { margin: 28px 0 0; padding-top: 16px; border-top: 1px dashed var(--border-light); font-size: 12px; color: var(--text-tertiary); }

.gx-indice { background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px; }
.gx-indice__t { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.gx-indice ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.gx-indice li { margin-bottom: 4px; }
.gx-indice a { color: var(--text-link); text-decoration: none; }

.gx-lateral { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.gx-cta { display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; color: var(--text-primary); }
.gx-cta:hover { color: var(--text-primary); } /* sin efecto al pasar el ratón: solo evita el azul de los enlaces */
.gx-cta strong { display: block; font-size: 15px; font-weight: 500; }
.gx-cta small { display: block; font-size: 13px; color: var(--text-secondary); }
.gx-cta__icono { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--google-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.gx-cta__icono--verde { background: var(--google-green); }

.gx-tarjeta {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 18px;
  background: var(--surface-card); border: 1px solid var(--border-light); border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-primary);
}
.gx-tarjeta:hover { color: var(--text-primary); } /* sin efecto al pasar el ratón: solo evita el azul de los enlaces de Bootstrap */
.gx-tarjeta__t { font-size: 16px; line-height: 1.35; font-weight: 500; }
.gx-tarjeta__d { font-size: 13px; line-height: 1.5; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gx-tarjeta__m { margin-top: auto; font-size: 12px; color: var(--text-tertiary); }
/* Número de la guía en la serie, grande como el paso a paso de la landing (.lx-pasos) */
.gx-tarjeta--num { position: relative; padding-left: 84px; }
.gx-tarjeta__n {
  position: absolute; left: 14px; top: 12px; width: 56px; text-align: center;
  font-family: var(--font-display); font-size: 52px; font-weight: 700; font-style: italic; line-height: 1; color: #ff0000;
}

@media (max-width: 767.98px) {
  .gx-hero__titulo { font-size: 28px; }
  .gx-hero__desc { font-size: 15px; }
  .gx-articulo .g-card__body { padding: 20px 16px !important; }
  .gx-articulo h2 { font-size: 21px; }
  .gx-lateral { position: static; }
}