/* =========================================================================
   Diwa Spin - diwaaspin.com
   Appyn-reference clone (body class `rounded full-width`), royal-blue palette.
   Radius system: 20px surfaces / 50px pills / 25px single-page app icon.
   ========================================================================= */

:root {
  /* Brand: hue 238 royal blue. The reference accent #cc1ca8 is replaced everywhere. */
  --brand:        #3E43E0;   /* fills carrying white text  (6.81:1 on white) */
  --brand-deep:   #2D31BE;   /* accent text on white, hover (9.15:1)         */
  --brand-dark:   #8286ED;   /* accent on the #1d222d chrome (4.99:1)        */
  --brand-soft:   #ECEDFD;
  --gold:         #FFC73F;   /* sampled from the wordmark (10.23:1 on chrome)*/
  --gold-deep:    #E8A22A;

  --dl:           #237F10;   /* Download APK (5.10:1 with white)             */
  --dl-hi:        #2B9A14;
  --tg:           #006FA7;   /* Telegram      (5.48:1 with white)            */

  --page:         #e6e9ef;
  --card:         #ffffff;
  --tint:         #f7f8fa;
  --chrome:       #1d222d;
  --chrome-deep:  #13161d;
  --ink:          #4c4c4c;
  --ink-strong:   #333a45;
  --title:        #444444;
  --meta:         #767676;   /* reference uses #a7a7a7; darkened for 4.5:1   */
  --hair:         #eaeaea;
  --shadow:       2px 2px 2px 0 #e3e3e3;

  --r-surface: 20px;
  --r-pill:    50px;
  --r-icon:    25px;
  --measure:   1220px;
  --sidebar:   300px;
  --gap:       20px;
  --t:         200ms cubic-bezier(.16,1,.3,1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  line-height: 25px;
  font-weight: 400;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: var(--brand-deep); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand); }
button { font: inherit; }

a, button, summary, [role="button"] { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
#header :focus-visible, #footer :focus-visible, #subheader :focus-visible { outline-color: var(--gold); }

.ico { display: block; flex: none; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- shared measure: header, content, footer, disclaimer ---------- */
.container {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
}

/* =========================  HEADER  ===================================== */
#header {
  background: var(--chrome);
  border-bottom: 2px solid var(--brand);
  position: sticky;
  top: 0;
  z-index: 60;
}
#header .container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#header .logo { display: flex; align-items: center; }
#header .logo a { display: block; line-height: 0; }
#header .logo img {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
}
#header nav { display: flex; align-items: center; }
#header nav ul.menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 2px;
}
#header nav ul.menu > li > a {
  display: block;
  padding: 0 15px;
  line-height: 35px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  border-radius: var(--r-pill);
  transition: background var(--t), color var(--t);
}
#header nav ul.menu > li > a:hover { color: var(--gold); background: rgba(255,255,255,.07); }
#header nav ul.menu > li.current > a { color: var(--chrome); background: var(--gold); }
#header nav ul.menu > li.nav-cta > a {
  background: var(--brand);
  color: #fff;
  margin-left: 6px;
}
#header nav ul.menu > li.nav-cta > a:hover { background: var(--brand-dark); color: var(--chrome); }
.menu-open {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  padding: 6px;
  border-radius: 8px;
}

/* mobile drawer */
#menu-mobile {
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  max-width: 84vw;
  background: var(--chrome-deep);
  z-index: 200;
  transform: translateX(-102%);
  transition: transform 260ms cubic-bezier(.16,1,.3,1);
  padding: 64px 18px 24px;
  overflow-y: auto;
  border-right: 2px solid var(--brand);
}
body.nav-open #menu-mobile { transform: none; }
body.nav-open { overflow: hidden; }
#menu-mobile ul { list-style: none; margin: 0; padding: 0; }
#menu-mobile li + li { margin-top: 4px; }
#menu-mobile a {
  display: block;
  padding: 11px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-surface);
}
#menu-mobile a:hover { background: rgba(255,255,255,.08); color: var(--gold); }
#menu-mobile li.current > a { background: var(--gold); color: var(--chrome); }
#menu-mobile a.mm-cta { background: var(--brand); color: #fff; margin-top: 10px; }
.mm-close {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.08);
  border: 0; color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(8,10,16,.55);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

/* =========================  HERO BAND  ================================== */
#subheader {
  position: relative;
  overflow: hidden;
  background: #000;
  border-bottom: 2px solid var(--brand);
  padding: 90px 0 40px;
  margin: 0 0 20px;
  text-align: center;
  color: #fff;
  isolation: isolate;
}
#subheader .imgbg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#subheader .imgbg img {
  width: 120%;
  max-width: none;
  opacity: .3;
  object-fit: cover;
  height: 100%;
}
#subheader::after {               /* scrim keeps the headline zone readable */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 34%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(10,11,22,.70), rgba(10,11,22,.30) 48%, rgba(10,11,22,.80));
}
.subcontainer {
  width: 730px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.subcontainer h1 {
  font-size: 40px;
  line-height: 46px;
  font-weight: 300;
  color: #fff;
  margin: 0;
  padding: 0 0 20px;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.subcontainer h1 b { font-weight: 700; color: var(--gold); }
.subcontainer h2 {
  font-size: 16px;
  line-height: 30px;
  font-weight: 300;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

/* search */
#searchBox { width: 600px; max-width: 100%; margin: 30px auto 0; position: relative; }
#searchBox form { display: flex; position: relative; }
#sbinput {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: #f2f2f2;
  color: #43454b;
  font-size: 16px;
  padding: 0 110px 0 20px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.125);
}
#sbinput::placeholder { color: #6d6f76; }
#sbinput:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.sb_submit {
  position: absolute;
  right: 0; top: 0;
  width: 70px; height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background var(--t);
}
.sb_submit:hover { background: var(--brand-deep); }
.sb_submit .ico { width: 21px; height: 21px; }

/* live results */
#sbresults {
  position: absolute;
  left: 0; right: 0; top: 52px;
  background: #fff;
  border-radius: var(--r-surface);
  box-shadow: 0 14px 40px rgba(8,10,25,.3);
  overflow: hidden;
  text-align: left;
  z-index: 40;
  display: none;
  max-height: 340px;
  overflow-y: auto;
}
#sbresults.on { display: block; }
#sbresults a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--title);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--hair);
}
#sbresults a:last-child { border-bottom: 0; }
#sbresults a:hover, #sbresults a.sel { background: var(--brand-soft); color: var(--brand-deep); }
#sbresults img { width: 34px; height: 34px; border-radius: 10px; flex: none; }
#sbresults .rb { margin-left: auto; color: var(--meta); font-weight: 400; font-size: 12px; }
#sbresults .none { padding: 14px; color: var(--meta); font-size: 13px; }

/* category row */
.cat-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.cat-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.cat-row .cc {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: .5;
  color: #fff;
  transition: opacity var(--t), transform var(--t);
}
.cat-row a:hover { color: var(--gold); }
.cat-row a:hover .cc { opacity: 1; transform: translateY(-2px); }

/* =========================  MAIN GRID  ================================== */
#main-site { padding-bottom: 30px; }
#main-site .container { display: flex; align-items: flex-start; gap: var(--gap); }
#main-site .container.is-block { display: block; }
.sections { flex: 1 1 auto; min-width: 0; }

#sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

.section { margin: 0 0 30px; }

.title-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 3px 10px 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--hair);
}
.title-section span { font-size: 12px; color: var(--meta); margin-left: auto; }

/* ---- card grid (.bav1): 6 up, 147px cells ---- */
.baps { display: flex; flex-wrap: wrap; margin: 0; }
.bav1 { width: 16.6667%; padding: 10px; }
.bav1 > a {
  display: block;
  background: var(--card);
  border-radius: var(--r-surface);
  border-bottom: 2px solid var(--brand);
  box-shadow: var(--shadow);
  padding: 15px;
  text-align: center;
  color: inherit;
  height: 100%;
  transition: transform var(--t), box-shadow var(--t);
}
.bav1 > a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,24,60,.16); }
.bav1 .bloque-imagen img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.bav1 .title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--title);
  height: 20px;
  line-height: 20px;
  margin: 10px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bav1 .version, .bav1 .developer {
  display: block;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  color: var(--meta);
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bav1 .version span { color: var(--brand-deep); font-weight: 600; }
.bav-cta {
  display: block;
  margin: 10px -15px -15px;
  padding: 8px 6px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 0 var(--r-surface) var(--r-surface);
  transition: background var(--t);
}
.bav1 > a:hover .bav-cta, .bav2 > a:hover .bav-cta { background: var(--brand-deep); }

/* ---- featured rail (.bav2): 3 up ---- */
.rail { display: flex; flex-wrap: wrap; margin: 0; }
.bav2 { width: 33.3333%; padding: 10px; }
.bav2 > a {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border-radius: var(--r-surface);
  border-bottom: 2px solid var(--brand);
  box-shadow: var(--shadow);
  padding: 15px;
  color: inherit;
  height: 100%;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.bav2 > a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,24,60,.16); }
.bav2 .bloque-imagen.w75 { flex: none; }
.bav2 .bloque-imagen img { width: 75px; height: 75px; border-radius: var(--r-surface); object-fit: cover; display: block; }
.bav2 .bap-c { min-width: 0; flex: 1 1 auto; }
.bav2 .bap-c .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--title);
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bav2 .sub { display: block; font-size: 12px; line-height: 18px; color: var(--meta); }
.bav2 .bav-cta {
  display: inline-block;
  margin: 8px 0 0;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 11px;
}

/* VIEW MORE */
.viewmore { text-align: center; margin: 6px 0 0; }
.viewmore a {
  display: inline-block;
  width: 225px;
  max-width: 100%;
  line-height: 40px;
  border-radius: var(--r-pill);
  background: var(--brand);
  border-bottom: 1px solid rgba(0,0,0,.3);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background var(--t), transform var(--t);
}
.viewmore a:hover { background: var(--brand-deep); color: #fff; transform: translateY(-2px); }

/* =========================  SIDEBAR WIDGETS  ============================ */
.widget {
  background: var(--card);
  border-radius: var(--r-surface);
  border-bottom: 2px solid var(--brand);
  box-shadow: var(--shadow);
  padding: 15px;
  margin: 0 0 20px;
}
.widget h3 {
  font-size: 17px;
  text-transform: uppercase;
  color: #ababab;
  margin: 0 0 14px;
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
}
.widget h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 3px;
  background: var(--brand);
  border-radius: 2px;
}
.w-search { display: flex; gap: 8px; }
.w-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 0 14px;
  font-size: 13px;
  background: var(--tint);
  color: var(--ink);
}
.w-search button {
  flex: none;
  width: 44px; height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
}
.w-search button:hover { background: var(--brand-deep); }
.w-list { list-style: none; margin: 0; padding: 0; }
.w-list li + li { border-top: 1px solid var(--hair); }
.w-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  color: var(--title);
  font-size: 13px;
  font-weight: 600;
}
.w-list a:hover { color: var(--brand-deep); }
.w-list img { width: 40px; height: 40px; border-radius: 12px; flex: none; object-fit: cover; }
.w-list .wb { display: block; font-size: 12px; font-weight: 400; color: var(--meta); }
.w-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.w-cats a {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 600;
}
.w-cats a:hover { background: var(--brand); color: #fff; }
.w-note { font-size: 12px; line-height: 20px; color: var(--meta); margin: 0; }

/* =========================  EDITORIAL (C11)  ============================ */
.box {
  background: var(--card);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  padding: 20px 25px;
  margin: 0 0 20px;
}
.entry { font-size: 14px; line-height: 26px; color: var(--ink); }
.entry p { margin: 0 0 16px; }
.entry a { color: var(--brand-deep); text-decoration: underline; }

.entry-h1 { font-size: 26px; line-height: 36px; font-weight: 700; color: var(--ink-strong); margin: 0 0 14px; text-align: start; }
.hx-lede p { font-size: 16px; line-height: 29px; color: var(--ink-strong); }
.hx-lede p:first-child::first-letter { font-size: 16px; }

.hx-head { margin: 32px 0 16px; }
.hx-head:first-child { margin-top: 6px; }
/* same trap: scoped so the later `.entry h2` cannot take the section-head margins */
.entry .hx-head h2, .entry .hx-head h3,
.hx-head h2, .hx-head h3 {
  font-size: 21px;
  line-height: 30px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 10px;
  text-align: start;
}
.hx-rule {
  display: block;
  width: 56px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.hx-list { margin: 0 0 16px; padding-left: 20px; }
.hx-list li { margin: 0 0 7px; }
.hx-list li::marker { color: var(--brand); }

/* card grid */
.hx-grid { display: grid; gap: 14px; margin: 0 0 8px; }
.hx-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-card {
  background: var(--tint);                 /* tinted, never white-on-white */
  outline: 1px solid #e7eaf0;
  border-radius: var(--r-surface);
  border-bottom: 2px solid var(--brand);
  padding: 16px 16px 6px;
  transition: transform var(--t), box-shadow var(--t);
}
.hx-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,24,60,.1); }
.hx-badge {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  margin: 0 0 10px;
}
.hx-card-t {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--ink-strong);
  margin: 0 0 8px;
}
.hx-card-b p { margin: 0 0 12px; font-size: 13.5px; line-height: 24px; }
.hx-card-b .hx-list { margin-bottom: 12px; }

/* FAQ accordion */
.hx-faq {
  border-radius: var(--r-surface);
  overflow: hidden;
  outline: 1px solid #e7eaf0;
  background: var(--tint);
}
.hx-ac + .hx-ac { border-top: 1px solid #e7eaf0; }
.hx-ac > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  list-style: none;
  user-select: none;
}
.hx-ac > summary::-webkit-details-marker { display: none; }
.hx-ac > summary::marker { content: ""; }
.hx-ac > summary:hover { background: #eef0f6; }
.hx-ac > summary h3 {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink-strong);
  flex: 1 1 auto;
}
.hx-chev {
  flex: none;
  color: var(--brand-deep);
  display: grid;
  place-items: center;
  transition: transform var(--t);
}
.hx-ac[open] > summary .hx-chev { transform: rotate(180deg); }
.hx-ac[open] > summary { background: var(--brand-soft); }
.hx-ac-body { padding: 4px 18px 2px; }
.hx-ac-body p { margin: 0 0 14px; }

/* CTA band */
.hx-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #161a34 0%, #0e1124 55%, #1a1340 100%);
  border-radius: var(--r-surface);
  padding: 34px 30px;
  margin: 34px 0 10px;
  text-align: center;
  color: #e9ebf6;
}
.hx-cta-glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 160%;
  z-index: -1;
  background:
    radial-gradient(42% 52% at 22% 28%, rgba(62,67,224,.55), transparent 70%),
    radial-gradient(38% 46% at 80% 66%, rgba(255,199,63,.26), transparent 70%);
}
/* `.entry h2` is (0,0,1,1) and declared later, so it beats a lone `.hx-cta-t`
   on BOTH colour and text-align. Out-specify it at (0,0,2,1). */
.entry h2.hx-cta-t,
h2.hx-cta-t {
  font-size: 25px;
  line-height: 34px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  text-align: center;
}
.hx-cta-body p { margin: 0 auto 14px; color: #cfd4ea; font-size: 14.5px; line-height: 27px; }
.hx-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }

/* scoped so .entry a cannot win and render accent-on-accent */
.entry .hx-btn, a.hx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t), color var(--t), transform var(--t);
}
.entry .hx-btn-p, a.hx-btn-p { background: var(--gold); color: #1a1405; }
.entry .hx-btn-p:hover, a.hx-btn-p:hover { background: #ffd469; color: #1a1405; transform: translateY(-2px); }
.entry .hx-btn-g, a.hx-btn-g { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.entry .hx-btn-g:hover, a.hx-btn-g:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); }

/* =========================  APK SINGLE PAGE  ============================ */
.app-s { flex: 1 1 auto; min-width: 0; }

#breadcrumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  font-size: 12px;
  color: var(--meta);
}
#breadcrumbs li::after { content: "/"; margin-left: 6px; color: #c7cbd4; }
#breadcrumbs li:last-child::after { content: ""; }

.app-head { display: flex; gap: 25px; align-items: flex-start; }
.app-icb.s1 { order: -1; width: 150px; flex: 0 0 150px; }   /* DOM: title block first, icon floated left */
.app-spe.s2 { flex: 1 1 auto; min-width: 0; }

.image-single img {
  width: 150px; height: 150px;
  border-radius: var(--r-icon);
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow);
}
.meta-cats { margin: 0 0 10px; }
.cat-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
h1.main-box-title {
  font-size: 38px;
  line-height: 48px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 6px;
}
.srctag { font-size: 12px; color: var(--meta); display: block; margin: 0 0 12px; }
.tagchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.tagchips li {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.descripcion { font-size: 14px; line-height: 26px; margin: 0 0 16px; }

/* New / Hot badge - static, never absolute (C7) */
.app-badge {
  position: static;
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.app-badge.is-new { background: var(--brand); color: #fff; }
.app-badge.is-hot { background: var(--gold); color: #1a1405; }

/* info table: 3 cells at 33.33% */
.box-data-app { margin: 16px 0 0; }
.data-app { display: flex; flex-wrap: wrap; border-radius: var(--r-surface); overflow: hidden; outline: 1px solid var(--hair); }
.da-s {
  width: 33.3333%;
  padding: 12px 14px;
  background: var(--tint);
  border-right: 1px solid var(--hair);
}
.da-s:last-child { border-right: 0; }
.da-s b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--meta); font-weight: 700; }
.da-s span { display: block; font-size: 14px; font-weight: 600; color: var(--ink-strong); margin-top: 3px; }

/* download buttons */
.buttond {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 33px;
  line-height: 17px;
  border-radius: var(--r-surface);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 5px 8px 38px;
  margin: 12px 0 0;
  text-align: center;
  justify-content: center;
  transition: filter var(--t), transform var(--t);
}
.buttond:hover { filter: brightness(1.12); color: #fff; transform: translateY(-1px); }
.buttond .bi {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 30px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.1);
  border-radius: var(--r-surface) 0 0 var(--r-surface);
}
.buttond .ico { width: 17px; height: 17px; }
.downloadAPK { background: var(--dl); }
.buttond.t { background: var(--tg); }

.link-report { display: block; text-align: center; margin: 12px 0 0; font-size: 12px; color: var(--meta); }
.link-report:hover { color: var(--brand-deep); }

/* share row */
.box-social { margin-top: 18px; }
.botones_sociales { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.botones_sociales a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 104px;
  min-height: 31px;
  border-radius: var(--r-surface);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.botones_sociales a:hover { filter: brightness(1.12); color: #fff; }
.botones_sociales .facebook  { background: #1877f2; }
.botones_sociales .twitter   { background: #111418; }
.botones_sociales .pinterest { background: #c8232c; }
.botones_sociales .telegram  { background: var(--tg); }
.botones_sociales .whatsapp  { background: #128c3e; }

.box-title {
  font-size: 17px;
  text-transform: uppercase;
  color: #ababab;
  font-weight: 700;
  margin: 0 0 16px;
  position: relative;
  padding-bottom: 11px;
}
.box-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 3px;
  background: var(--brand);
  border-radius: 2px;
}

.entry h2 { font-size: 21px; line-height: 30px; text-align: start; font-weight: 700; color: var(--ink-strong); margin: 28px 0 12px; }
.entry h3 { font-size: 16px; line-height: 26px; text-align: start; font-weight: 700; color: var(--ink-strong); margin: 20px 0 8px; }

/* related row: 5 across, filling the full measure */
.rlat { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.rlat .bav1 { width: 20%; }

/* responsible-play band */
.rg-band { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.rg-band li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--tint);
  outline: 1px solid #e7eaf0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-strong);
}
.rg-band .ico { color: var(--brand-deep); width: 18px; height: 18px; }

/* =========================  FOOTER  ===================================== */
#footer { background: var(--chrome); color: #fff; border-top: 2px solid var(--brand); margin-top: 10px; }
#footer .container { display: block; padding-top: 34px; padding-bottom: 10px; }
#footer a { color: #cdd2e2; }
#footer a:hover { color: var(--gold); }

.footer-promo {
  background: var(--chrome-deep);
  border-radius: var(--r-surface);
  border-top: 3px solid var(--gold);
  padding: 28px 24px;
  text-align: center;
}
.footer-promo h2 { color: var(--gold); font-size: 26px; margin: 0 0 8px; font-weight: 700; }
.footer-promo p { color: #d7dbe8; font-size: 14px; line-height: 26px; margin: 0; }
.footer-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.footer-btns a {
  display: inline-block;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: #111520;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,199,63,.55);
  font-size: 13px;
  font-weight: 600;
}
.footer-btns a:hover { background: var(--gold); color: #1a1405; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding: 30px 0 22px;
}
.fcol h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-dark); margin: 0 0 12px; }
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li { margin: 0 0 7px; font-size: 13px; line-height: 22px; }
.ftrust li { display: flex; gap: 9px; align-items: flex-start; color: #c3c9da; }
.ftrust .ico { color: var(--gold); margin-top: 3px; }
.flogo { height: 40px; width: auto; object-fit: contain; display: block; margin: 0 0 10px; }
.fnote { font-size: 12px; line-height: 21px; color: #9aa2b8; margin: 0; }

.disclaimer { background: var(--chrome-deep); padding: 18px 0; }
.disclaimer .container { display: block; }
.disclaimer p { margin: 0; font-size: 12px; line-height: 22px; color: #9aa2b8; }
.disclaimer strong { color: var(--gold); }
.disclaimer .copy { margin-top: 8px; color: #7e8599; }

/* =========================  FLOATING BITS  ============================== */
#backtotop {
  position: fixed;
  right: 18px; bottom: 86px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--chrome);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), background var(--t);
  z-index: 70;
  box-shadow: 0 8px 22px rgba(10,12,30,.32);
}
#backtotop.on { opacity: 1; pointer-events: auto; transform: none; }
#backtotop:hover { background: var(--brand); }

.tg-center-btn {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #3E43E0, #2D31BE 38%, #6d4ce0 68%, #FFC73F);
  background-size: 300% 300%;
  animation: tgshift 9s ease infinite;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  z-index: 70;
  box-shadow: 0 10px 26px rgba(16,18,60,.4);
}
.tg-center-btn:hover { color: #fff; filter: brightness(1.08); }
.tg-center-btn span { white-space: nowrap; }
.tg-center-btn .tg-s { display: none; }
@keyframes tgshift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }

/* =========================  404  ======================================== */
.nf { text-align: center; padding: 50px 10px 30px; }
.nf h1 { font-size: 72px; line-height: 1; margin: 0; color: var(--brand); }
.nf h2 { font-size: 22px; margin: 10px 0 14px; color: var(--ink-strong); }

/* =========================  LOCALE MIRROR  ============================== */
.mirror-note {
  background: var(--brand-soft);
  border-radius: var(--r-surface);
  padding: 12px 18px;
  font-size: 13px;
  margin: 0 0 20px;
}

/* =========================  RESPONSIVE  ================================= */
@media (max-width: 1240px) {
  .bav1 { width: 20%; }
}
@media (max-width: 1100px) {
  :root { --sidebar: 260px; }
  .bav1 { width: 25%; }
  .rlat .bav1 { width: 25%; }
}
@media (max-width: 1023px) {
  #main-site .container { flex-direction: column; }
  #sidebar {
    position: static;            /* reset sticky once the columns stack */
    width: 100%;
    flex: 1 1 auto;
  }
  .hx-c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-head { flex-direction: column; }
  .app-icb.s1 { order: 0; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; }
  .image-single img { margin: 0 auto; }
  .buttond { width: 100%; max-width: 320px; }
  h1.main-box-title { font-size: 30px; line-height: 40px; }
  .subcontainer h1 { font-size: 32px; line-height: 40px; }
}
@media (max-width: 900px) {
  .bav2 { width: 50%; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 27px; }
  .entry, .hx-card-b p { font-size: 16px; line-height: 28px; }
  .bav1 { width: 33.3333%; }
  .rlat .bav1 { width: 33.3333%; }
  .hx-c3, .hx-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #header nav ul.menu { display: none; }
  .menu-open { display: grid; place-items: center; }
  #subheader { padding: 48px 0 32px; }
  .subcontainer h1 { font-size: 27px; line-height: 35px; }
  .box { padding: 18px 16px; }
  .da-s { width: 100%; border-right: 0; border-bottom: 1px solid var(--hair); }
  .da-s:last-child { border-bottom: 0; }
  .tg-center-btn { font-size: 12px; padding: 10px 18px; }
  .tg-center-btn .tg-l { display: none; }
  .tg-center-btn .tg-s { display: inline; }
  #backtotop { bottom: 78px; right: 12px; }
  .title-section { font-size: 19px; }
}
@media (max-width: 519px) {
  .bav1, .rlat .bav1 { width: 50%; }
  .bav2 { width: 100%; }
  .hx-c3, .hx-c4 { grid-template-columns: minmax(0, 1fr); }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .botones_sociales a { width: calc(50% - 4px); }
}
@media (max-width: 374px) {
  .bav1, .rlat .bav1 { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .tg-center-btn { animation: none; }
}