/* ==========================================================================
   WE MAKE MARKETING
   responsive.css — Adaptaciones tablet y mobile
   ========================================================================== */

/* --- Tablet grande / laptop pequeña --------------------------------------- */
@media (max-width: 1100px) {

  .hero-grid          { gap: var(--space-7); }
  .authority-grid     { gap: var(--space-7); }
  .cases-header       { gap: var(--space-5); }

  .case-card {
    grid-template-columns: 300px 1fr;
  }
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Header — menú móvil */
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(13, 13, 13, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-header);
  }

  .main-nav.is-open { transform: translateX(0); }

  .main-nav ul {
    flex-direction: column;
    gap: var(--space-7);
    text-align: center;
  }

  .main-nav a { font-size: var(--fs-lg); }

  .header-cta .btn { display: none; }
  .burger { display: block; }

  /* Hero */
  .hero {
    padding-top: calc(var(--header-height) + 2rem);
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }

  .hero-visual {
    height: 460px;
    order: -1;
  }

  .mockup-laptop { width: 380px; bottom: 80px; }

  /* Autoridad */
  .authority-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Servicios */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Casos */
  .cases-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .case-card {
    grid-template-columns: 1fr;
  }

  .case-mockup {
    min-height: 220px;
    padding: var(--space-5);
  }

  .case-body {
    padding: var(--space-6);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 600px) {

  :root {
    --header-height: 64px;
  }

  /* Botones a ancho completo */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }

  /* Hero */
  .hero { padding-top: calc(var(--header-height) + 1.5rem); }

  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero-lead { font-size: var(--fs-base); }

  .hero-visual {
    height: 380px;
  }

  .mockup-laptop {
    width: 100%;
    max-width: 320px;
    bottom: 70px;
  }

  .laptop-content { height: 200px; }

  .float-card.analytics {
    width: 180px;
    left: -10px;
    top: 20px;
    padding: 10px 12px;
  }
  .float-card.metric {
    width: 150px;
    right: -5px;
    top: 160px;
    padding: 10px 12px;
  }
  .float-card.tag {
    bottom: 30px;
    right: -5px;
    padding: 8px 12px;
  }
  .fc-value { font-size: 1.2rem; }

  /* Autoridad */
  .pillars {
    grid-template-columns: 1fr;
  }

  /* Servicios */
  .service-card { padding: var(--space-6); }
  .service-card h3 { font-size: var(--fs-lg); }

  /* Casos */
  .case-meta {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* CTA Final */
  .cta-card {
    padding: var(--space-8) var(--space-5);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  /* Logo footer - reducir en mobile */
  .logo-img { height: 52px; }

  /* Eyebrow */
  .eyebrow { font-size: 0.7rem; }
}

/* --- Mobile pequeño ------------------------------------------------------- */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.85rem; }
  .section-title { font-size: 1.6rem; }
  .container { padding: 0 1rem; }
}