/* ==============================================================
   Workori/YOYO — Tablet Polish Overrides
   Artista: Diseñador UX/UI Senior (El Artista 🎨)
   Fecha: 2026-08-07
   Propósito: Mejora visual para tablet (1280px viewport) sin
              reescribir CSS originales. Solo overrides.
   Carga: Después de modern-polish.css en index.html
   Breakpoints: @media (min-width: 768px) y (min-width: 1024px)
   Paleta: azul var(--blue) + teal var(--teal) + cobre #c47a4a + ámbar #e8a317
   ============================================================== */

/* ─── 1. TABLET BASE: 768px+ ───────────────────────────────────── */
@media (min-width: 768px) {

  /* ── 1a. Quick Picks Strip — thumbs más grandes, labels legibles ── */

  .service-quick-strip {
    gap: 16px;
    padding: 4px 4px 10px;
  }

  .service-quick-thumb {
    width: 84px;
    gap: 8px;
  }

  /* Thumb icon (--pick era 48px, subimos a 56px) */
  .service-quick-thumb .service-thumb--pick {
    --thumb-size: 56px;
    border-radius: 14px;
    box-shadow:
      0 2px 6px rgba(14, 31, 64, 0.08),
      0 6px 16px rgba(14, 31, 64, 0.05);
  }

  .service-quick-thumb:hover .service-thumb--pick {
    box-shadow:
      0 3px 8px rgba(7, 95, 228, 0.18),
      0 8px 22px rgba(7, 95, 228, 0.1);
    transform: translateY(-3px);
  }

  .service-quick-thumb__label {
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: -0.005em;
    max-width: 84px;
    line-height: 1.2;
  }

  .service-quick-label {
    font-size: 0.84rem;
  }

  /* ── 1b. Service Grid — más aire, hover sutil ── */

  .service-grid {
    gap: 18px;
  }

  .service-card {
    border-radius: 14px;
    padding: 22px;
    min-height: 180px;
  }

  .service-card .service-thumb--card {
    --thumb-size: 56px;
    border-radius: 14px;
  }

  .service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(7, 95, 228, 0.3);
  }

  /* ── 1c. Hero Glow sutil ── */

  .hero {
    padding: clamp(26px, 3vw, 38px) 0 clamp(64px, 6vw, 88px);
  }

  .hero-copy {
    position: relative;
  }

  /* Glow azul sutil detrás del título */
  .hero-copy::after {
    content: "";
    position: absolute;
    top: -50px;
    left: -80px;
    width: 620px;
    height: 340px;
    background: radial-gradient(
      ellipse 70% 60% at 35% 38%,
      rgba(7, 95, 228, 0.06) 0%,
      rgba(7, 95, 228, 0.02) 40%,
      transparent 70%
    );
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
  }

  /* ── 1d. Client Panel — max-width ── */

  .client-active-work-panel {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .client-panel-view {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── 1e. Container más generoso ── */

  .container {
    padding: 0 24px;
  }

} /* fin @media 768px */


/* ─── 2. TABLET LANDSCAPE / DESKTOP: 1024px+ ───────────────────── */
@media (min-width: 1024px) {

  /* ── 2a. Quick Picks — full tablet optimization ── */

  .service-quick-picks {
    gap: 14px;
  }

  .service-quick-strip {
    gap: 22px;
    padding: 6px 4px 12px;
  }

  .service-quick-thumb {
    width: 100px;
    gap: 10px;
  }

  .service-quick-thumb .service-thumb--pick {
    --thumb-size: 64px;
    border-radius: 16px;
    box-shadow:
      0 2px 8px rgba(14, 31, 64, 0.1),
      0 8px 20px rgba(14, 31, 64, 0.06);
  }

  .service-quick-thumb:hover .service-thumb--pick {
    box-shadow:
      0 4px 12px rgba(7, 95, 228, 0.2),
      0 12px 28px rgba(7, 95, 228, 0.12);
    transform: translateY(-4px);
  }

  .service-quick-thumb__label {
    font-size: 0.82rem;
    font-weight: 750;
    max-width: 100px;
    line-height: 1.25;
  }

  .service-quick-label {
    font-size: 0.86rem;
    letter-spacing: 0.01em;
  }

  /* ── 2b. Service Grid — columnas adecuadas a 1280px ── */

  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .service-card {
    border-radius: 16px;
    padding: 26px;
    min-height: 190px;
    border: 1px solid rgba(226, 232, 244, 0.8);
  }

  .service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(7, 95, 228, 0.35);
    box-shadow:
      0 3px 8px rgba(14, 31, 64, 0.06),
      0 10px 24px rgba(14, 31, 64, 0.08),
      0 22px 48px rgba(7, 95, 228, 0.07);
  }

  .service-card .service-thumb--card {
    --thumb-size: 60px;
    border-radius: 16px;
    box-shadow:
      0 2px 6px rgba(14, 31, 64, 0.08),
      0 6px 16px rgba(14, 31, 64, 0.05);
  }

  .service-card strong {
    font-size: 1.05rem;
  }

  /* ── 2c. Hero — glow de marca más definido ── */

  .hero {
    min-height: 560px;
    padding: clamp(30px, 3.5vw, 40px) 0 clamp(72px, 7vw, 96px);
    background:
      radial-gradient(ellipse 100% 80% at 50% 0%, rgba(7, 95, 228, 0.05), transparent 65%),
      linear-gradient(180deg, #f5f9fd 0%, #f4f7fa 45%, #f0f4f9 100%);
  }

  /* Glow más fuerte y posicionado detrás del título */
  .hero-copy::after {
    top: -60px;
    left: -100px;
    width: 700px;
    height: 380px;
    background: radial-gradient(
      ellipse 65% 55% at 38% 40%,
      rgba(7, 95, 228, 0.08) 0%,
      rgba(7, 95, 228, 0.03) 35%,
      transparent 68%
    );
    z-index: -1;
  }

  .hero-copy h1 {
    max-width: 38rem;
    font-size: clamp(2.8rem, 4.2vw, 3.5rem);
    line-height: 1.1;
  }

  .hero-text {
    max-width: 36rem;
    font-size: 1.06rem;
  }

  /* ── 2d. Client Panel — max-width y grid para 1280px ── */

  .client-active-work-panel {
    max-width: 780px;
    padding: 24px;
    border-radius: 18px;
  }

  .client-panel-view {
    max-width: 780px;
  }

  .client-active-work-head h2 {
    font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  }

  /* Si el panel tiene notificaciones en grid */
  .client-notify-list {
    gap: 14px;
  }

  .client-notify-item {
    padding: 16px;
    border-radius: 14px;
  }

  .client-auth-panel {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 18px;
  }

  .client-wizard-panel {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── 2e. Espaciado general ── */

  .section {
    padding: 72px 0;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .section-heading h2 {
    font-size: clamp(1.7rem, 2.4vw, 2rem);
  }

  .section-kicker {
    font-size: 0.8rem;
    letter-spacing: 0.07em;
  }

  /* Project grid: más aire */
  .project-grid {
    gap: 18px;
  }

  .project-card {
    padding: 20px;
    border-radius: 14px;
  }

} /* fin @media 1024px */


/* ─── 3. REDUCED MOTION — respetar preferencia del usuario ─────── */
@media (prefers-reduced-motion: reduce) {

  .service-quick-thumb:hover .service-thumb--pick,
  .service-quick-thumb .service-thumb--pick,
  .service-card,
  .service-card:hover,
  .service-card .service-thumb--card,
  .btn,
  .btn:hover,
  .project-card,
  .project-card:hover,
  .service-quick-thumb,
  .hero-copy h1,
  .hero-text,
  .hero-search {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

} /* fin reduced-motion */


/* ── FIX superposición: service-quick-picks se desbordaba (962px) sobre hero-trust-card ──
   2026-08-07: el strip usa flex-wrap:nowrap y crecía más que su contenedor (hero-copy 537px).
   El overflow-x:auto del strip ya existe — solo faltaba limitar el ancho del contenedor. */
.service-quick-picks {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.service-quick-strip,
.service-quick-chips {
  max-width: 100%;
  overflow-x: auto;
}