/*
 * QA round 2, approved 15 Oct 2026 (Portada y Venezuela). Theme-owned overrides
 * loaded after the exported Astro bundles on the country landings; unlayered, so
 * they win over Tailwind utilities without editing hashed files. Header and
 * footer rules are shared by Venezuela and Colombia.
 */

/* VE 19 / VE 24: header fits 360 px and keeps "Ayuda" at 320 px. */
@media (max-width: 400px) {
  #site-header[data-action='learn'] nav { gap: 6px; }
  #site-header[data-action='learn'] nav > div { gap: 2px; }
  #site-header[data-action='learn'] :is(.wordmark-navy, .wordmark-white) { height: 1rem !important; }
  #site-header[data-action='learn'] .nav-link { display: inline-flex !important; padding-inline: 8px; font-size: .875rem; }
  #site-header[data-action='learn'] .nav-cta { padding-inline: 13px !important; font-size: .8125rem; white-space: nowrap; }
}
@media (max-width: 359px) {
  /* The mark alone carries the brand here, so both actions keep a full 44 px target. */
  #site-header[data-action='learn'] :is(.wordmark-navy, .wordmark-white) { display: none !important; }
}

/* VE 23: footer links reach a 44 px target. */
footer[data-block='contacto'] ul.space-y-3 > li { margin-top: 0 !important; }
footer[data-block='contacto'] ul.space-y-3 a { display: inline-flex; align-items: center; min-height: 44px; }
footer[data-block='contacto'] ul.space-y-3 address { padding-top: 10px; }

/* VE 35: social icons take their network's colour only on hover and focus. */
footer [aria-label='Redes sociales'] a:is(:hover, :focus-visible) { color: #fff; }
footer [aria-label='Redes sociales'] a[aria-label='Instagram']:is(:hover, :focus-visible) { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
footer [aria-label='Redes sociales'] a[aria-label='TikTok']:is(:hover, :focus-visible) { background: #000; box-shadow: -2px -2px 0 #25f4ee inset, 2px 2px 0 #fe2c55 inset; }
footer [aria-label='Redes sociales'] a[aria-label='WhatsApp']:is(:hover, :focus-visible) { background: #25d366; }
footer [aria-label='Redes sociales'] a[aria-label='LinkedIn']:is(:hover, :focus-visible) { background: #0a66c2; }

/* VE 7: VAT note under each rate. */
.tt-iva { margin-top: 10px; font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--color-ink-soft, #3a4166); }

/* VE 14: store badges on the phone's first screen; desktop keeps its hero as approved. */
.tt-hero-stores { display: none; }
@media (max-width: 767px) {
  .vp-hero .tt-hero-stores { display: flex; grid-row: 3; margin: 0; }
  .vp-hero .app-showcase { grid-row: 4; }
  .vp-hero .vp-trust { grid-row: 5; }
  .vp-hero .vp-button { grid-row: 6; }
  .vp-hero .vp-live-count { grid-row: 7; }
  .vp-hero .vp-review { grid-row: 8; }
}

/* VE 34: on phones the store badges are the download choice; the generic button stays on desktop (QR). */
@media (max-width: 767px) {
  html[data-country='ve'] section[aria-labelledby='sale-title'] button[data-download] { display: none; }
}

/* VE 27: stories become a swipeable row on phones instead of ~3.900 px of stacked cards. */
@media (max-width: 767px) {
  section[aria-labelledby='stories-title'] ul.grid {
    display: flex; gap: 12px; margin-inline: -16px; padding: 4px 16px 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  section[aria-labelledby='stories-title'] ul.grid::-webkit-scrollbar { display: none; }
  section[aria-labelledby='stories-title'] ul.grid > li { flex: 0 0 min(78%, 320px); scroll-snap-align: start; }
  section[aria-labelledby='stories-title'] ul.grid img { aspect-ratio: 4 / 3.4; }
  .tt-story-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .tt-story-dots button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; cursor: pointer; }
  .tt-story-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--color-navy-200, #b3c0f4); transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .3s; }
  .tt-story-dots button[aria-current='true']::before { transform: scaleX(2.5); background: var(--color-navy, #0023d1); }
}
@media (min-width: 768px) { .tt-story-dots { display: none; } }

/* Both store badges stay on one line down to 320 px. */
@media (max-width: 374px) {
  .vp-hero .tt-hero-stores, section[aria-labelledby='sale-title'] .store-badges { --store-badge-height: 40px; column-gap: 16px; }
}