/* ==========================================================================
   /consent/mobile-app — page-specific layout
   Loaded after site.css + inner.css. Reuses inner.css shared components
   (.ihero shell, .grad-head, .body-copy, .two-col, .ipanel, .point-list).
   Only section layout + image sizing lives here.
   ========================================================================== */

/* Header is fixed (82px desktop / 60px mobile). Push content below it. */
body { padding-top: 82px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* Submenu active-item fallback (the partial's inline script also bolds it). */
#to-mobile-app .submenu__link { font-weight: 900; }

/* ==========================================================================
   01 — Hero (dark art; centred logo + title + sub, then devices | copy grid)
   ========================================================================== */
.mhero {
  /* reuse .ihero shell (position/veil/colour); swap in the mobile-app hero art */
  /* background art inherited from .ihero (shared canonical /img/hero-bg.png) */
  padding: 120px 0 72px; /* live puts the lockup at y≈209 (77px below the submenu) */
}
.mhero-inner { position: relative; z-index: 1; }
.mhero-brand { text-align: center; margin: 6px 0 16px; }
/* margin:auto, not text-align — site.css makes img display:block */
.mhero-brand img { height: 48px; width: auto; margin: 0 auto; }
.mhero-title {
  text-align: center;
  font-size: clamp(36px, 5.6vw, 62px);
  line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 20px;
}
.mhero-title em { font-style: normal; color: var(--coral); display: block; }
.mhero-sub {
  text-align: center;
  font-size: 20px; line-height: 1.5; color: #fff;
  margin: 0 auto 44px; max-width: 640px;
}

.mhero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.mhero-illus img { width: 100%; height: auto; }

.mhero-bullets { list-style: none; margin: 0 0 26px; padding: 0; }
.mhero-bullets li {
  position: relative; padding-left: 22px; margin-bottom: 14px;
  font-size: 18px; line-height: 1.45; color: #fff;
}
.mhero-bullets li::before { content: "•"; position: absolute; left: 2px; top: -1px; font-size: 20px; }

.mhero-badges {
  display: inline-flex; align-items: center; gap: 24px;
  background: rgba(255,255,255,.08); border-radius: 18px;
  padding: 16px 26px; margin: 0 0 30px;
}
.mhero-badges img { display: block; }
.mhero-badges .b-gcpp { height: 34px; }
.mhero-badges .b-cmp  { height: 54px; }
.mhero-badges .b-tcf  { height: 46px; }

.mhero-cta { display: flex; gap: 18px; flex-wrap: wrap; }
.mhero-cta .pill-btn { border-radius: 70px; height: 56px; padding: 0 34px; font-size: 14px; }
.mhero-cta .pill-btn--red { font-weight: 700; }
/* not on live/v736: the 14-day free trial is a real offer being introduced
   across the site (per Alexander, 2026-08-07) — this page is the first spot.
   Rendered as a sub-line inside the red pill: the hero art is dark, so a
   caption outside the button had no readable color to sit on. */
.mhero-cta .pill-btn--red { flex-direction: column; height: auto; min-height: 56px; padding: 9px 34px; line-height: 1.25; }
.pill-btn__sub { display: block; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: .02em; opacity: .85; }

/* ==========================================================================
   02 — Quick & Easy SDK Integration (copy left, phone composite right)
   ========================================================================== */
.sdkint .two-col { gap: 64px; align-items: center; }
.sdkint .grad-head { margin-bottom: 20px; }
.sdkint-panel { padding: 34px 40px; margin-top: 30px; }
.sdkint-panel .point-list { margin-top: 0; }
.sdkint-panel .point-list--plain > li { margin-bottom: 16px; }
.sdkint-note { margin-top: 18px; }
.sdkint-visual img { display: block; margin: 0 auto; max-width: 560px; }

/* ==========================================================================
   03 — Consent Mode v2 Support (heading + lead, then diagram | white panel)
   ========================================================================== */
.cmodev2-lead { max-width: 900px; margin-bottom: 40px; }
.cmodev2-grid { gap: 56px; align-items: center; }
.cmodev2-visual img { display: block; margin: 0 auto; max-width: 480px; }
.cmodev2-panel { padding: 40px 44px; }
.cmodev2-panel .point-list { margin-top: 0; }
.cmodev2-panel .point-list--plain > li { margin-bottom: 22px; }
.cmodev2-note { margin-top: 20px; }

/* ==========================================================================
   04 — Real Developer Support (3 cards, icon top-left + heading)
   ========================================================================== */
.devsupport-lead { max-width: 780px; margin-bottom: 40px; }
.devsupport-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.ds-card {
  background: var(--tint); border-radius: 30px;
  padding: 34px 34px 40px;
}
.ds-card img { display: block; height: 84px; width: auto; margin: 0 0 26px; }
.ds-card h3 {
  font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--navy);
  margin: 0; max-width: 240px;
}

/* ==========================================================================
   05 — Get started CTA (white rounded panel on tinted band)
   ========================================================================== */
.mcta-panel { text-align: center; padding: 56px 24px 64px; max-width: 1120px; margin: 0 auto; }
.mcta-illus { display: block; width: 210px; height: auto; margin: 0 auto 30px; }
.mcta-head {
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1.08; font-weight: 800; color: var(--navy);
  letter-spacing: -0.01em; margin: 0 0 16px;
}
.mcta-sub { font-size: 18px; color: var(--body); margin: 0 0 34px; }
.mcta-actions { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.mcta-actions .pill-btn { border-radius: 70px; height: 52px; padding: 0 32px; font-size: 14px; }
.mcta-or { font-size: 16px; color: var(--body); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .mhero-grid { grid-template-columns: 1fr; gap: 28px; }
  .mhero-illus { order: -1; max-width: 460px; margin: 0 auto; }
  .cmodev2-grid { grid-template-columns: 1fr; gap: 28px; }
  /* stack: bullets card first, diagram last (matches live mobile) */
  .cmodev2-grid .col-copy { order: -1; }
  .devsupport-cards { grid-template-columns: 1fr; gap: 18px; max-width: 520px; }
  .ds-card { padding: 28px 30px 30px; }
  .ds-card h3 { max-width: none; }
}

@media screen and (max-width: 860px) {
  .mhero { padding: 26px 0 48px; }
  .mhero-brand img { height: 34px; }
  .mhero-title { font-size: clamp(30px, 8vw, 44px); margin: 0 0 16px; }
  .mhero-sub { font-size: 16px; margin-bottom: 30px; }
  .mhero-sub br { display: none; }
  .mhero-bullets li { font-size: 16px; }
  .mhero-badges { gap: 18px; padding: 14px 20px; flex-wrap: wrap; justify-content: center; }
  .mhero-badges .b-gcpp { height: 28px; }
  .mhero-badges .b-cmp  { height: 44px; }
  .mhero-badges .b-tcf  { height: 38px; }
  .mhero-cta { justify-content: center; }
  /* long ES labels ("Pruébelo gratis ahora"): the global nowrap made the
     shrunk flex button spill outside the viewport, clipping the text — let
     the label wrap to a second line inside the pill instead */
  .mhero-cta .pill-btn { flex: 1; min-width: 150px; white-space: normal; height: auto; min-height: 56px; padding: 8px 18px; text-align: center; }
  .sdkint-panel { padding: 26px 24px; }
  .cmodev2-panel { padding: 28px 24px; }
  .mcta-panel { padding: 40px 20px 46px; }
  .mcta-actions { flex-direction: column; gap: 14px; width: 100%; }
  .mcta-actions .pill-btn { width: 100%; max-width: 320px; }
}