/* ─── Responsive overrides ────────────────────────────────────────────────
 * Pages use lots of inline-style absolutes for rotated stickers + multi-col
 * grids. Below 1024px we tame the worst offenders without touching every JSX.
 * Almost every rule needs !important to beat React inline styles.
 * --------------------------------------------------------------------------*/

/* Always: nothing should sideways-scroll the page. */
html, body { overflow-x: hidden; }

/* ──────────────────────────────────────────────────────────────────────────
 * TABLET BAND — 721 to 1023 (iPad portrait, small laptops)
 * Stack the 4–5 col grids and 1.2/1 hero-style splits that were only
 * tested at ≥1100px. Mobile rules below override these again at ≤720.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* 4–5 col grids → 2 cols on tablet */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  /* 3 col grids → 2 cols on tablet (cases, FAQs, contacto, etc) */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  /* Hero-style 1.2fr/1fr and 1.4fr/1fr splits → stack */
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Process label-rail "minmax(180px, 220px) 1fr" → stack */
  [style*="grid-template-columns: minmax(180px, 220px) 1fr"],
  [style*="grid-template-columns:minmax(180px, 220px) 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Tame heaviest section padding on tablet */
  section[id] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * MOBILE BAND — ≤ 720 (phones)
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* ── Section padding — most sections use 70px 44px or similar */
  section[id] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* ── Nuke ALL inline grid template columns → stack vertically. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── Cap container max-widths to viewport */
  [style*="max-width:"] { max-width: 100% !important; }

  /* ── Decorative absolute stickers w/ rotate → hide */
  [style*="position: absolute"][style*="rotate"]:not(.k-keep-mobile):not(section *[data-k-keep]) {
    display: none !important;
  }

  /* The KONECTA live counter pinned to top:100 right:44 — push it inline */
  [style*="top: 100px"][style*="right: 44px"],
  [style*="top:100px"][style*="right:44px"] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 18px 0 0 !important;
    box-shadow: 4px 4px 0 #0a0a0a !important;
  }

  /* Hero kicker badge "top: 50, left: 50%" → reposition or hide */
  [style*="top: 50px"][style*="left: 50%"] {
    display: none !important;
  }

  /* Sticky right-rail columns: don't try to be sticky on phones */
  [style*="position: sticky"] {
    position: static !important;
  }

  /* ── Tame display fonts that go to 140px / 80px / clamp(44px,7vw,80px) */
  [style*="font-size: 140px"] { font-size: 64px !important; }
  [style*="font-size: 120px"] { font-size: 56px !important; }
  [style*="font-size: 100px"] { font-size: 48px !important; }
  [style*="font-size: 80px"]  { font-size: 44px !important; }
  [style*="font-size: 76px"]  { font-size: 42px !important; }
  [style*="font-size: 72px"]  { font-size: 40px !important; }
  [style*="font-size: 68px"]  { font-size: 38px !important; }
  [style*="font-size: 64px"]  { font-size: 36px !important; }
  [style*="font-size: 60px"]  { font-size: 34px !important; }
  [style*="font-size: 56px"]  { font-size: 32px !important; }
  [style*="font-size: 52px"]  { font-size: 30px !important; }
  [style*="font-size: 48px"]  { font-size: 30px !important; }
  [style*="font-size: 44px"]  { font-size: 28px !important; }
  [style*="font-size: 42px"]  { font-size: 26px !important; }
  [style*="font-size: 40px"]  { font-size: 26px !important; }
  [style*="font-size: 38px"]  { font-size: 24px !important; }
  [style*="font-size: 36px"]  { font-size: 24px !important; }
  [style*="font-size: 34px"]  { font-size: 22px !important; }
  [style*="font-size: 32px"]  { font-size: 22px !important; }
  [style*="font-size: 30px"]  { font-size: 20px !important; }
  [style*="font-size: 28px"]  { font-size: 20px !important; }
  [style*="font-size: 26px"]  { font-size: 19px !important; }

  /* Reduce overall heading letter-spacing tracking on mobile */
  [style*="letter-spacing: -3"], [style*="letter-spacing:-3"] { letter-spacing: -1px !important; }
  [style*="letter-spacing: -2"], [style*="letter-spacing:-2"] { letter-spacing: -0.5px !important; }

  /* ── Hard-coded widths >100vw → 100% */
  [style*="width: 1100"], [style*="width: 1000"], [style*="width: 900"],
  [style*="width: 800"],  [style*="width: 720"],  [style*="width: 640"],
  [style*="width: 600"],  [style*="width: 560"] {
    width: 100% !important;
  }

  /* ── Big shadow offsets are too heavy on small screens */
  [style*="box-shadow: 12px 12px"] { box-shadow: 6px 6px 0 #0a0a0a !important; }
  [style*="box-shadow: 10px 10px"] { box-shadow: 5px 5px 0 #0a0a0a !important; }
  [style*="box-shadow: 8px 8px"]   { box-shadow: 4px 4px 0 #0a0a0a !important; }

  /* ── Flex rows with gap 30/40/50 reflow nicely
        ...except the marquee, which MUST stay nowrap to scroll. */
  [style*="display: flex"]:not([data-k-marquee]) { flex-wrap: wrap !important; }
  [style*="gap: 40px"] { gap: 18px !important; }
  [style*="gap: 30px"] { gap: 16px !important; }

  /* ── Reels grid + paquetes grid stack */
  [data-k-grid="reels"] { grid-template-columns: 1fr !important; }
  [data-k-grid="pricing"] { grid-template-columns: 1fr !important; }

  /* ── HOME reels-full (10 reels) → slideshow horizontal en mobile.
        El generic [style*="grid-template-columns"]:1fr de arriba
        apila los 10 verticales — eso es lo "apretado" que reportó Angel.
        Convertimos a swipeable carousel con 1 card visible al 90% de
        ancho del viewport. */
  [data-k-grid="reels-full"] {
    display: grid !important;
    grid-template-columns: repeat(10, 90%) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 90% !important;
    gap: 18px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 16px 24px !important;
    margin: 0 -16px !important;
    scrollbar-color: #0a0a0a #ece8de;
  }
  [data-k-grid="reels-full"]::-webkit-scrollbar {
    height: 6px;
  }
  [data-k-grid="reels-full"]::-webkit-scrollbar-track {
    background: #ece8de;
    border: 1px solid #0a0a0a;
  }
  [data-k-grid="reels-full"]::-webkit-scrollbar-thumb {
    background: #ff2d6f;
    border: 1px solid #0a0a0a;
  }
  [data-k-grid="reels-full"] > [data-k-reel-full-card] {
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }
  /* En flex column con aspect-ratio el thumbnail puede colapsar a su
     contenido (placeholder) en lugar de calcular height = width × 16/9.
     Forzamos altura proporcional explícita para el thumbnail (segundo hijo
     del card después del row "# + tag"). */
  [data-k-grid="reels-full"] [data-k-reel-full-card] > div:nth-child(2) {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    flex: 0 0 auto !important;
  }

  /* ── Paquetes (#paquetes grid) cuando se apila en mobile, las tarjetas
        Mini y Básico quedan sin separación visual (la borderRight desktop
        deja de servir cuando son columna 1fr). Premium sí tiene shadow
        propia y se ve separado. Aquí agregamos border-bottom en las
        primeras 2 cards mientras estamos apilados. */
  #paquetes > div[style*="grid-template-columns"] > div:nth-child(-n+2) {
    border-right: none !important;
    border-bottom: 3px solid #0a0a0a !important;
  }
  /* Más espacio interno al stackear para que no se sientan pegadas */
  #paquetes > div[style*="grid-template-columns"] > div {
    padding: 28px 22px !important;
  }

  /* ── Publicidad MiniGallery → horizontal scroll-snap carousel on mobile.
        Override the generic [style*="grid-template-columns"]:1fr rule above
        so the 6 reels sit in one swipeable row instead of 6 huge stacked cards. */
  [data-k-grid="reels-mini"] {
    display: grid !important;
    grid-template-columns: repeat(6, 78%) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 78% !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    /* breathing room so the 6px shadows + last card aren't clipped */
    padding: 4px 16px 14px !important;
    margin: 0 -16px !important;
    scrollbar-width: thin;
  }
  [data-k-grid="reels-mini"] > [data-k-reel-card] {
    scroll-snap-align: start;
    width: auto !important;
    min-width: 0;
  }

  /* ── Accordion title row: keep the +/- toggle on the same line as the
        title, with breathing room. The generic flex-wrap:wrap mobile rule
        otherwise drops the toggle to a new line and crashes it against the
        text on the left edge. We need 2+ attribute selectors to beat the
        generic [style*="display: flex"]:not([data-k-marquee]) rule above. */
  button[data-k-accordion][data-k-cursor] {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    padding-right: 16px !important;
  }
  button[data-k-accordion][data-k-cursor] > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* ── Quote blocks: slash giant ornamental quotes */
  blockquote { padding-left: 16px !important; }

  /* ── Drawer nav links: protect their explicit 28px size from the
        generic font-size bombshell above. Specificity wins because
        we land later in source order. */
  .k-drawer a, .k-drawer-link {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
  }
}

/* ── Tighter still under 420px */
@media (max-width: 420px) {
  section[id] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  [style*="font-size: clamp(44px"] { font-size: 36px !important; }
  [style*="font-size: clamp(40px"] { font-size: 32px !important; }
  [style*="font-size: clamp(36px"] { font-size: 30px !important; }
  [style*="font-size: clamp(32px"] { font-size: 28px !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * MOBILE HERO COMPRESSION (P1-04 from 26-abr audit)
 * The home hero stacks vertically on phones: H1 + counter + CTA + secondary
 * CTA + response-time copy + decorative bottom badge ≈ 4 viewport-heights
 * before the first service card. On <600px we drop the secondary CTA, the
 * "respondemos en <2h" tagline, and the floating "100% real" badge — leaving
 * just headline + 1 primary CTA + 2 stats (the counter card already shows
 * IG and TT split). The full info still lives below the fold.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .k-hero-secondary,
  .k-hero-decor { display: none !important; }
  /* Let the H1 use the full width — the maxWidth:70% inline cap was for the
     desktop layout where the counter sits floating to the right. */
  #hub > h1 { max-width: 100% !important; }
  /* Trim the hero section padding once more so the next section appears
     sooner above the fold. */
  #hub { padding-top: 28px !important; padding-bottom: 24px !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * UX-01 — HERO H1 home: la regla genérica @420 `clamp(40px,...) → 32px` (línea
 * 209) achata el H1 a 32px, demasiado tímido para identidad brutalist. Con el
 * clamp ahora a `clamp(56px, 9.2vw, 150px)`, en mobile (<600px) lo dejamos
 * tal cual el clamp lo resuelva (≈56px en 360, ≈68px en 720). Bloqueamos la
 * compresión genérica con override específico de la clase.
 * ────────────────────────────────────────────────────────────────────────── */
/* word-break:keep-all + overflow-wrap:normal previene que el "konectar."
   pink span se rompa a la mitad de la palabra (la "R" se bajaba sola). */
.k-hero-h1 { word-break: keep-all; overflow-wrap: normal; hyphens: none; }
@media (max-width: 720px) {
  .k-hero-h1 {
    font-size: clamp(48px, 11vw, 72px) !important;
    letter-spacing: -1.2px !important;
    line-height: 0.9 !important;
  }
}
@media (max-width: 420px) {
  .k-hero-h1 {
    font-size: clamp(40px, 11.5vw, 50px) !important;
    letter-spacing: -0.8px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * UX-02 — `.k-pub-card-title` (Publicidad service block en home) usa
 * `clamp(56px, 8vw, 100px)`. A 360px viewport el clamp da 56px → "PUBLICIDAD"
 * mide 378px y se corta la "D". No hay regla mobile.css que matchée
 * `clamp(56px,...)`. Específico + permite break si el contenedor es muy
 * estrecho (overflow-wrap) sin sacrificar la escala en desktop.
 * ────────────────────────────────────────────────────────────────────────── */
/* "PUBLICIDAD" se debe mantener entera (no PUBLICI-/DAD).
   word-break:keep-all + overflow-wrap:normal lo asegura. */
.k-pub-card-title { word-break: keep-all; overflow-wrap: normal; hyphens: none; }
@media (max-width: 720px) {
  .k-pub-card-title {
    font-size: clamp(40px, 10vw, 56px) !important;
    letter-spacing: -1px !important;
  }
}
@media (max-width: 420px) {
  .k-pub-card-title {
    font-size: clamp(36px, 10.5vw, 44px) !important;
    letter-spacing: -0.5px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * UX-02b — Hero `/publicidad`: aliviado para que no se vea apretado.
 * Title más conservador, subtitle más chico, padding generoso para
 * darle aire al stack title + subtitle + 3 botones.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .k-pub-hero-title {
    font-size: clamp(48px, 12vw, 80px) !important;
    letter-spacing: -1px !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  /* Hero section padding: más aire vertical, sin rebasar horizontal */
  body > div > div:first-of-type + section[style*="background"]:first-of-type {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }
  /* Subtitle del hero: bajar de clamp(22,2.4vw,34) a algo más legible
     en móvil para que las 4-5 líneas no sientan apelmazadas */
  section[style*="background: rgb(255, 45, 111)"] > div[style*="font-size: clamp(22px"],
  section[style*="background:#ff2d6f"] > div[style*="font-size: clamp(22px"] {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-top: 14px !important;
  }
}
@media (max-width: 420px) {
  .k-pub-hero-title {
    font-size: clamp(44px, 12.5vw, 56px) !important;
    letter-spacing: -0.8px !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * UX-03 — MiniGallery (publicidad) en mobile: slideshow real.
 * 1 card visible al ~94% del viewport, scroll-snap-stop:always (deja al
 * soltar exactamente sobre cada card), y un paginador de puntos abajo
 * via scrollbar nativa estilizada como dots. La imagen recupera espacio
 * (aspect 3/4.6) y el footer-card no la aplasta.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  [data-k-grid="reels-mini"] {
    grid-template-columns: repeat(6, 92%) !important;
    grid-auto-columns: 92% !important;
    gap: 10px !important;
    padding: 4px 16px 18px !important;
    scroll-padding-left: 16px !important;
    scroll-snap-type: x mandatory !important;
    /* scrollbar mas visible como hint de paginacion */
    scrollbar-color: #0a0a0a #ece8de;
  }
  [data-k-grid="reels-mini"]::-webkit-scrollbar {
    height: 5px;
  }
  [data-k-grid="reels-mini"]::-webkit-scrollbar-track {
    background: #ece8de;
    border: 1px solid #0a0a0a;
  }
  [data-k-grid="reels-mini"]::-webkit-scrollbar-thumb {
    background: #ff2d6f;
    border: 1px solid #0a0a0a;
  }
  [data-k-grid="reels-mini"] > [data-k-reel-card] {
    aspect-ratio: 3 / 4.6 !important;
    scroll-snap-stop: always !important;
    scroll-snap-align: center !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * FOCUS-VISIBLE STATES (P1-05 from 26-abr audit)
 * The custom cursor hides the native cursor (cursor: none on body), so
 * keyboard-only users would have ZERO feedback for which control is focused.
 * Apply a brutalist-friendly outline to all interactive elements when they
 * receive keyboard focus (mouse focus is suppressed by :focus-visible).
 * ────────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0a0a0a !important;
  outline-offset: 2px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * ACCESSIBILITY — respect user motion preferences
 * Kills the marquee, the cursor easing-loop, and any infinite CSS animations
 * for users who set "reduce motion" in the OS.
 * ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Pause logo marquee specifically */
  [data-k-marquee] {
    animation-play-state: paused !important;
    transform: none !important;
  }
}