/* El Contraataque · Public visual system v71
   One compact scale for headers, module tabs, actions, cards and typography. */

:root {
  --ec-ui-header: 4rem;
  --ec-ui-nav: 3.75rem;
  --ec-ui-control: 44px;
  --ec-ui-tabs: 52px;
  --ec-ui-radius: 0.9rem;
  --ec-ui-gap: 0.65rem;
  --ec-ui-gold: #a96400;
  --ec-ui-gold-strong: #7a4700;
  --ec-ui-gold-soft: #fff1d2;
  --ec-ui-text: #171512;
  --ec-ui-muted: #676158;
  --ec-ui-line: rgba(35, 29, 21, 0.13);
  --ec-ui-surface: #ffffff;
  --ec-ui-canvas: #f7f4ed;
}

body[data-theme="dark"] {
  --ec-ui-gold: #f0bd59;
  --ec-ui-gold-strong: #ffd98c;
  --ec-ui-gold-soft: rgba(240, 189, 89, 0.14);
  --ec-ui-text: #fffaf0;
  --ec-ui-muted: #c9c0b3;
  --ec-ui-line: rgba(255, 250, 240, 0.16);
  --ec-ui-surface: #151619;
  --ec-ui-canvas: #0c0d10;
}

/* The public content canvas intentionally stays light in dark chrome mode. */
body[data-theme="dark"] .mobile-content {
  --ec-ui-gold: #a96400;
  --ec-ui-gold-strong: #7a4700;
  --ec-ui-gold-soft: #fff1d2;
  --ec-ui-text: #171512;
  --ec-ui-muted: #676158;
  --ec-ui-line: rgba(35, 29, 21, 0.13);
  --ec-ui-surface: #ffffff;
  --ec-ui-canvas: #f7f4ed;
  color: var(--ec-ui-text) !important;
}

body[data-theme="dark"] .mobile-content .screen {
  color: var(--ec-ui-text) !important;
}

body[data-theme="dark"] :is(.shop-product-card, .membership-plan-card, .membership-active-card) {
  --text: #fffaf0;
  --muted: #c9c0b3;
  --line: rgba(255, 250, 240, 0.16);
  --gold: #f0bd59;
  --gold-2: #ffd98c;
  color: var(--text) !important;
}

body[data-theme="dark"] :is(.shop-product-body h3, .shop-product-body .product-buy strong, .membership-plan-head h3) {
  color: var(--text) !important;
}

body[data-theme="dark"] :is(.shop-product-body p, .shop-product-body small, .membership-plan-description) {
  color: var(--muted) !important;
}

body[data-theme="dark"].community-fusion-v44-mode .phone-frame > .community-fusion-v44-footer button {
  color: #5f584f !important;
}

body[data-theme="dark"].community-fusion-v44-mode .phone-frame > .community-fusion-v44-footer button.is-active {
  color: #7a4700 !important;
}

html body[data-theme="dark"] .phone-frame > .community-hub-nav > button,
html body[data-theme="dark"] .phone-frame > .community-fusion-v44-footer > button {
  color: #5f584f !important;
}

html body[data-theme="dark"] .phone-frame > .community-hub-nav > button.is-active,
html body[data-theme="dark"] .phone-frame > .community-fusion-v44-footer > button.is-active {
  color: #7a4700 !important;
}

body[data-theme="dark"] .auth-input-wrap > :is(span, button) {
  color: #514d47 !important;
}

body[data-theme="dark"] .auth-input-wrap input::placeholder {
  color: #5b5650 !important;
  -webkit-text-fill-color: #5b5650 !important;
}

body[data-theme="dark"] .shop-section-title {
  color: #875300 !important;
}

.prediction-hub-summary span {
  color: #665f56 !important;
}

/* ---------- Shared header geometry ---------- */
.phone-frame > .mobile-header {
  position: relative !important;
  z-index: 50 !important;
  display: grid !important;
  grid-template-columns: var(--ec-ui-control) minmax(0, 1fr) auto !important;
  flex: 0 0 var(--ec-ui-header) !important;
  width: 100% !important;
  height: var(--ec-ui-header) !important;
  min-height: var(--ec-ui-header) !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ec-ui-line) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--ec-ui-surface) 96%, transparent) !important;
  padding: 0.55rem 0.65rem !important;
  box-shadow: 0 0.25rem 0.9rem rgba(50, 39, 24, 0.05) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.phone-frame > .mobile-header .mobile-header-title {
  min-width: 0 !important;
  justify-self: stretch !important;
  text-align: center !important;
}

.phone-frame > .mobile-header .mobile-header-title .eyebrow {
  margin: 0 0 0.12rem !important;
  overflow: hidden !important;
  color: var(--ec-ui-gold) !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.13em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.phone-frame > .mobile-header .mobile-header-title h2 {
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--ec-ui-text) !important;
  font-size: clamp(0.88rem, 3.8vw, 1rem) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.phone-frame > .mobile-header .header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.28rem !important;
}

.phone-frame > .mobile-header .icon-button {
  display: grid !important;
  width: var(--ec-ui-control) !important;
  height: var(--ec-ui-control) !important;
  min-width: var(--ec-ui-control) !important;
  min-height: var(--ec-ui-control) !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1px solid var(--ec-ui-line) !important;
  border-radius: 50% !important;
  color: var(--ec-ui-gold) !important;
  background: var(--ec-ui-surface) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.phone-frame > .mobile-header #backButton {
  justify-self: start !important;
  font-size: 0 !important;
}

.phone-frame > .mobile-header #backButton::before {
  content: "‹";
  color: currentColor;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.phone-frame > .mobile-header #backButton .header-back-svg {
  display: none !important;
}

.phone-frame > .mobile-header .real-madrid-shortcut img {
  width: 1.45rem !important;
  height: 1.45rem !important;
  object-fit: contain !important;
}

.phone-frame > .mobile-header .header-icon-svg,
.phone-frame > .mobile-header .whatsapp-header-button svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

/* Community, Porra and Sorteos keep contextual actions but use the same scale. */
.community-hub-header,
.prediction-hub-header,
.draws-v44-header {
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--ec-ui-header) !important;
  min-height: var(--ec-ui-header) !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ec-ui-line) !important;
  border-radius: 0 !important;
  background: var(--ec-ui-surface) !important;
  padding: 0.5rem 0.65rem !important;
  box-shadow: none !important;
}

.community-hub-exit,
.prediction-hub-exit,
.draws-v44-back {
  min-width: 0 !important;
  min-height: var(--ec-ui-control) !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  padding: 0 0.65rem !important;
  font-size: 0.62rem !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.community-hub-brand strong,
.prediction-hub-brand strong,
.draws-v44-brand strong {
  font-size: 0.88rem !important;
  line-height: 1 !important;
}

.community-hub-brand small,
.prediction-hub-brand small,
.draws-v44-brand small {
  font-size: 0.5rem !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
}

.community-hub-level,
.prediction-hub-points,
.draws-v44-level {
  min-height: 2.2rem !important;
  border-radius: 999px !important;
  padding: 0 0.6rem !important;
  font-size: 0.58rem !important;
}

/* ---------- Screen rhythm and typography ---------- */
.mobile-content {
  padding: var(--ec-ui-gap) var(--ec-ui-gap)
    calc(var(--ec-ui-nav) + 3.4rem + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(var(--ec-ui-nav) + 3.8rem + env(safe-area-inset-bottom)) !important;
}

.screen.is-active {
  animation-duration: 150ms !important;
}

.phone-frame .module-screen-head {
  margin: 0 0 0.75rem !important;
}

.phone-frame .module-screen-head h3,
.phone-frame .section-title {
  margin: 0 0 0.28rem !important;
  color: var(--ec-ui-text) !important;
  font-size: 1.15rem !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  overflow-wrap: anywhere;
}

.phone-frame .module-screen-head p {
  margin: 0 !important;
  color: var(--ec-ui-muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
}

#screen-shop > .module-screen-head h3,
#screen-draws > .module-screen-head h3,
#screen-notifications > .section-title {
  display: none !important;
}

#screen-shop > .module-screen-head,
#screen-draws > .module-screen-head {
  margin-bottom: 0.65rem !important;
}

/* ---------- One compact secondary-navigation pattern ---------- */
.screen > .segmented,
#communityModuleTabs,
.community-hub-tabs,
#screen-events > .module-tabs--events,
#screen-tickets > .module-tabs--tickets,
.module-tabs--draws,
.module-tabs--predictions {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: var(--ec-ui-tabs) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0.2rem !important;
  margin: 0 0 0.7rem !important;
  overflow: hidden !important;
  border: 1px solid var(--ec-ui-line) !important;
  border-radius: var(--ec-ui-radius) !important;
  background: var(--ec-ui-surface) !important;
  padding: 0.22rem !important;
  box-shadow: none !important;
}

.screen > .segmented > button,
#communityModuleTabs > button,
.community-hub-tabs > button,
#screen-events > .module-tabs--events > button,
#screen-tickets > .module-tabs--tickets > button,
.module-tabs--draws > button,
.module-tabs--predictions > button {
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  width: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0.7rem !important;
  color: var(--ec-ui-muted) !important;
  background: transparent !important;
  padding: 0 0.45rem !important;
  font-size: clamp(0.66rem, 2.9vw, 0.75rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.screen > .segmented > button:is(.is-selected, .is-active, [aria-current="page"]),
#communityModuleTabs > button:is(.is-selected, .is-active, [aria-current="page"]),
.community-hub-tabs > button:is(.is-selected, .is-active, [aria-current="page"]),
#screen-events > .module-tabs--events > button:is(.is-selected, .is-active, [aria-current="page"]),
#screen-tickets > .module-tabs--tickets > button:is(.is-selected, .is-active, [aria-current="page"]),
.module-tabs--draws > button:is(.is-selected, .is-active, [aria-current="page"]),
.module-tabs--predictions > button:is(.is-selected, .is-active, [aria-current="page"]) {
  color: var(--ec-ui-gold-strong) !important;
  background: var(--ec-ui-gold-soft) !important;
}

/* ---------- Global and contextual footers ---------- */
.phone-frame > .bottom-nav,
.phone-frame > .community-hub-nav,
.phone-frame > .prediction-hub-nav,
.community-fusion-v44-footer,
.draws-v44-footer {
  box-sizing: border-box !important;
  height: calc(var(--ec-ui-nav) + env(safe-area-inset-bottom)) !important;
  min-height: calc(var(--ec-ui-nav) + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--ec-ui-line) !important;
  background: color-mix(in srgb, var(--ec-ui-surface) 97%, transparent) !important;
  padding: 0.2rem 0.22rem env(safe-area-inset-bottom) !important;
  box-shadow: 0 -0.35rem 1rem rgba(45, 34, 19, 0.04) !important;
}

.phone-frame > .bottom-nav > button,
.phone-frame > .community-hub-nav > button,
.phone-frame > .prediction-hub-nav > button,
.community-fusion-v44-footer > button,
.draws-v44-footer > button {
  min-width: 0 !important;
  min-height: 100% !important;
  gap: 0.12rem !important;
  color: var(--ec-ui-muted) !important;
  background: transparent !important;
  padding: 0.18rem 0.15rem !important;
}

.phone-frame > .bottom-nav > button:is(.is-active, [aria-current="page"]),
.phone-frame > .community-hub-nav > button:is(.is-active, [aria-current="page"]),
.phone-frame > .prediction-hub-nav > button:is(.is-active, [aria-current="page"]),
.community-fusion-v44-footer > button:is(.is-active, [aria-current="page"]),
.draws-v44-footer > button:is(.is-active, [aria-current="page"]) {
  color: var(--ec-ui-gold) !important;
  background: color-mix(in srgb, var(--ec-ui-gold-soft) 62%, transparent) !important;
  border-radius: 0.7rem !important;
}

.phone-frame > .bottom-nav > button > .nav-icon,
.phone-frame > .community-hub-nav > button > span:first-child,
.phone-frame > .prediction-hub-nav > button > span:first-child,
.community-fusion-v44-footer > button > span,
.draws-v44-footer > button > span {
  width: 1.35rem !important;
  height: 1.35rem !important;
  font-size: 0.76rem !important;
}

.phone-frame > .bottom-nav > button > span:last-child,
.phone-frame > .community-hub-nav > button > small,
.phone-frame > .prediction-hub-nav > button > small,
.community-fusion-v44-footer > button > small,
.draws-v44-footer > button > small {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 0.5rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mobile-menu-fab {
  right: 0.7rem !important;
  bottom: calc(var(--ec-ui-nav) + 0.65rem + env(safe-area-inset-bottom)) !important;
  min-height: var(--ec-ui-control) !important;
  border-radius: 999px !important;
  padding: 0 0.7rem !important;
  box-shadow: 0 0.55rem 1.2rem rgba(60, 45, 18, 0.12) !important;
}

.mobile-menu-fab strong {
  font-size: 0.66rem !important;
}

/* ---------- Buttons, cards and authentication ---------- */
.primary-action,
.ghost-action,
.outline-action {
  min-height: var(--ec-ui-control) !important;
  border-radius: 0.7rem !important;
  font-size: 0.76rem !important;
  line-height: 1.1 !important;
  padding: 0.55rem 0.8rem !important;
}

.auth-card,
.welcome-card {
  width: 100% !important;
  max-width: 27rem !important;
  gap: 0.65rem !important;
  margin: 0.2rem auto 0 !important;
  border-radius: var(--ec-ui-radius) !important;
  padding: 1rem !important;
  box-shadow: 0 0.55rem 1.5rem rgba(60, 45, 18, 0.07) !important;
}

.auth-logo {
  width: 3.45rem !important;
  height: 3.45rem !important;
}

.auth-card h3,
.welcome-card h3 {
  font-size: 1.3rem !important;
  line-height: 1.08 !important;
}

.auth-card .form-intro,
.welcome-card p {
  font-size: 0.84rem !important;
  line-height: 1.3 !important;
}

.social-auth-action,
.social-auth-action.google-action,
.social-auth-action.apple-action,
.auth-input-wrap,
.auth-primary-action {
  min-height: 3rem !important;
  border-radius: 0.7rem !important;
}

.social-auth-action {
  grid-template-columns: 2rem 1fr 2rem !important;
  padding-inline: 0.55rem !important;
  font-size: 0.86rem !important;
}

.social-auth-action span {
  width: 1.8rem !important;
  height: 1.8rem !important;
  font-size: 1.1rem !important;
}

.auth-input-wrap {
  padding-inline: 0.45rem !important;
}

.auth-input-wrap input {
  min-height: var(--ec-ui-control) !important;
  font-size: 1rem !important;
}

body[data-theme="light"] .auth-input-wrap,
body[data-theme="light"] .auth-input-wrap input {
  color: #25211c !important;
  background: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

body[data-theme="light"] .auth-input-wrap {
  border-color: #d8d2c8 !important;
}

body[data-theme="light"] .auth-input-wrap input::placeholder {
  color: #777168 !important;
  -webkit-text-fill-color: #777168 !important;
}

.auth-separator {
  font-size: 0.78rem !important;
}

.auth-card label {
  gap: 0.25rem !important;
  font-size: 0.68rem !important;
}

.auth-primary-action {
  margin-top: 0.1rem !important;
  font-size: 0.8rem !important;
}

.auth-card > .ghost-action {
  min-height: var(--ec-ui-control) !important;
}

.membership-description-toggle,
.menu-list > button {
  min-height: var(--ec-ui-control) !important;
}

/* ---------- Home: preserve impact without oversized controls ---------- */
.home-hero-card--compact {
  min-height: 12.5rem !important;
  border-radius: var(--ec-ui-radius) !important;
}

.home-hero-card--compact .home-hero-copy h3 {
  max-width: 12ch !important;
  font-size: clamp(1.35rem, 6.2vw, 1.62rem) !important;
  line-height: 0.98 !important;
}

.home-live-metrics {
  gap: 0.35rem !important;
  margin: 0.65rem 0 0.8rem !important;
}

.home-live-metrics button {
  min-height: 3.55rem !important;
  border-radius: 0.75rem !important;
  padding: 0.35rem 0.16rem !important;
}

.home-live-metrics span {
  font-size: 0.92rem !important;
}

.home-live-metrics strong {
  font-size: 0.92rem !important;
}

.home-live-metrics small {
  font-size: 0.5rem !important;
}

.home-benefit-grid--quick {
  gap: 0.4rem !important;
}

.home-benefit-grid--quick .home-benefit-card {
  min-height: 4.4rem !important;
  border-radius: 0.75rem !important;
  padding: 0.45rem 0.28rem !important;
}

.home-benefit-grid--quick .home-benefit-icon {
  width: 1.7rem !important;
  height: 1.7rem !important;
}

.home-benefit-grid--quick .home-benefit-card strong {
  font-size: 0.62rem !important;
  line-height: 1.05 !important;
}

.home-v2-quick-grid {
  gap: 0.4rem !important;
}

.home-v2-quick-grid > button {
  min-height: 4rem !important;
  height: 4rem !important;
  gap: 0.1rem !important;
  border-radius: 0.72rem !important;
  padding: 0.25rem 0.18rem !important;
}

.home-v2-quick-icon {
  width: 1.45rem !important;
  height: 1.45rem !important;
  font-size: 0.85rem !important;
}

.home-v2-quick-grid strong {
  font-size: 0.58rem !important;
  line-height: 1 !important;
}

.home-v2-quick-grid small {
  font-size: 0.46rem !important;
  line-height: 1 !important;
}

.home-section-card,
.event-card,
.ticket-card,
.status-card,
.offer-card,
.product-card {
  border-radius: var(--ec-ui-radius) !important;
}

/* ---------- Football: compact match rows and keep labels readable ---------- */
#screen-football .football-competition-tabs,
#screen-football .football-season-switcher {
  gap: 0.35rem !important;
}

#screen-football .football-competition-tabs button,
#screen-football .football-season-switcher button,
#screen-squad .football-season-switcher button {
  min-height: var(--ec-ui-control) !important;
}

#screen-football .football-fixture {
  grid-template-columns: 3.65rem minmax(0, 1fr) !important;
  min-height: 0 !important;
  border-radius: var(--ec-ui-radius) !important;
  padding: 0.55rem !important;
}

#screen-football .football-fixture__date {
  padding-right: 0.45rem !important;
}

#screen-football .football-fixture__match {
  grid-template-columns: minmax(0, 1fr) 4.25rem !important;
  gap: 0.4rem !important;
}

#screen-football .football-fixture__score small,
#screen-football .football-fixture__score em {
  max-width: 4.25rem !important;
  overflow: visible !important;
  font-size: 0.54rem !important;
  line-height: 1.05 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.football-action-button.is-compact {
  grid-template-columns: 1.4rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  min-height: 3.25rem !important;
  gap: 0.08rem 0.38rem !important;
  border-radius: 0.7rem !important;
  padding: 0.38rem 0.45rem !important;
}

.football-action-button.is-compact > span {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
}

.football-action-button.is-compact strong,
.football-action-button.is-compact small {
  grid-column: 2 !important;
  min-width: 0 !important;
}

.football-action-button.is-compact strong {
  grid-row: 1 !important;
  align-self: end !important;
  font-size: 0.58rem !important;
}

.football-action-button.is-compact small {
  grid-row: 2 !important;
  align-self: start !important;
  overflow: hidden !important;
  font-size: 0.56rem !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.football-table__row,
.football-more-action {
  min-height: var(--ec-ui-control) !important;
}

/* Community and Porra always render inside the phone shell, including desktop. */
.phone-frame .community-v41-latest-row {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  padding: 0.45rem 0.6rem !important;
}

.phone-frame .community-v41-latest-image {
  width: 44px !important;
  height: 44px !important;
}

.phone-frame > .community-hub-nav > button,
.phone-frame > .prediction-hub-nav > button {
  flex: 1 1 0 !important;
  width: auto !important;
}

/* ---------- Draws and store: restrained media, dependable contrast ---------- */
#screen-draws .draw-list-art {
  min-height: 10.5rem !important;
  height: 10.5rem !important;
  max-height: 10.5rem !important;
}

#screen-draws .draw-list-art img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#screen-draws .draw-list-body p:not(.kicker) {
  -webkit-line-clamp: 3 !important;
  line-height: 1.35 !important;
}

.membership-description-toggle {
  min-height: 2.5rem !important;
  padding: 0 0.7rem !important;
}

.shop-hero {
  min-height: 13rem !important;
  border-radius: var(--ec-ui-radius) !important;
  color: #fffaf0 !important;
  padding: 0.9rem !important;
}

.shop-hero-copy {
  max-width: 72% !important;
}

.shop-hero-copy strong {
  color: #fffaf0 !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  text-shadow: 0 0.08rem 0.55rem rgba(0, 0, 0, 0.62) !important;
}

.shop-hero-copy small {
  color: #f2ece2 !important;
  font-size: 0.8rem !important;
}

.shop-hero-copy em {
  color: #f4bd54 !important;
  font-size: 1.2rem !important;
}

.shop-categories button,
.shop-hero-action,
.shop-product-body .product-buy button {
  min-height: var(--ec-ui-control) !important;
}

.shop-product-card .product-art {
  min-height: 8rem !important;
  height: 8rem !important;
}

.shop-product-body h3 {
  min-height: 2.25em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-height: 1.12 !important;
}

/* ---------- Desktop public presentation ---------- */
@media (min-width: 1181px) {
  .public-panel {
    min-height: 40rem !important;
    padding: 1.5rem !important;
  }

  .public-panel .hero-copy h2 {
    max-width: 10ch !important;
    font-size: clamp(2.8rem, 4.2vw, 4rem) !important;
    line-height: 0.98 !important;
  }

  .public-panel .hero-copy p:not(.kicker) {
    max-width: 30rem !important;
    font-size: 0.94rem !important;
  }

  .public-panel .hero-actions > * {
    min-height: 2.9rem !important;
  }

  .public-panel .instagram-lite-card {
    min-height: 3.75rem !important;
    padding: 0.65rem !important;
  }
}

@media (max-width: 430px) {
  :root {
    --ec-ui-header: 3.85rem;
  }

  .phone-frame > .mobile-header {
    grid-template-columns: var(--ec-ui-control) minmax(0, 1fr) auto !important;
    gap: 0.32rem !important;
    padding-inline: 0.5rem !important;
  }

  .phone-frame > .mobile-header .header-actions {
    gap: 0.16rem !important;
  }

  .phone-frame > .mobile-header .mobile-header-title h2 {
    font-size: 0.88rem !important;
  }

  .screen > .segmented > button,
  #communityModuleTabs > button,
  .community-hub-tabs > button,
  .module-tabs--draws > button,
  .module-tabs--predictions > button {
    padding-inline: 0.25rem !important;
    font-size: clamp(0.61rem, 2.75vw, 0.69rem) !important;
  }
}

@media (max-width: 370px) {
  .phone-frame > .mobile-header .mobile-header-title .eyebrow {
    font-size: 0.48rem !important;
  }

  .phone-frame > .mobile-header .mobile-header-title h2 {
    font-size: 0.75rem !important;
  }

  .phone-frame > .mobile-header .real-madrid-shortcut img,
  .phone-frame > .mobile-header .header-icon-svg,
  .phone-frame > .mobile-header .whatsapp-header-button svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active {
    animation: none !important;
  }
}