/* ===== BLOQUE 1 (index.html L328-341) — @media 900px ===== */
/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav ul{display:none;}
  section{padding:3.5rem 1.5rem;}
  .hero{padding:5.5rem 1.5rem 3rem;}
  .hero-stats{flex-direction:column;max-width:100%;}
  .stat-item{border-right:none;border-bottom:1px solid var(--glass-border);}
  .proof-grid{grid-template-columns:repeat(2,1fr);}
  .client-panel.active{grid-template-columns:1fr;padding:1.5rem;}
  .tabs-nav{flex-wrap:wrap;max-width:100%;}
  .tab-btn{flex:none;width:50%;}
  .services-grid,.method-grid,.cine-grid{grid-template-columns:1fr;}
  footer{flex-direction:column;gap:0.8rem;text-align:center;}
}

/* ===== BLOQUE 2 (index.html L345-469) — mobile overhaul 768px / 480px ===== */
/* ── MOBILE OVERHAUL ── */
@media (max-width: 768px) {

  /* NAV */
  nav { padding: 1rem 1.2rem; }
  nav ul { display: none; }
  .nav-logo { font-size: 1rem; }

  /* HERO */
  .hero { padding: 5rem 1.2rem 2.5rem; min-height: 100svh; }
  .hero h1 { font-size: 2.6rem; letter-spacing: -0.03em; margin-bottom: 1.2rem; }
  .hero-desc { font-size: 0.88rem; margin-bottom: 2rem; }
  .hero-stats {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .stat-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 1rem 1.2rem !important;
    display: flex; justify-content: space-between; align-items: center;
  }
  .stat-item:last-child { border-bottom: none !important; }
  .stat-num { font-size: 1.6rem; }
  .stat-label { font-size: 0.6rem; text-align: right; max-width: 12ch; }

  /* PROOF STRIP */
  .proof-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .proof-item { padding: 1.2rem 1rem; }
  .proof-num { font-size: 1.6rem; }

  /* SECTIONS */
  section { padding: 3.5rem 1.2rem; }
  .section-title { font-size: 1.8rem; }
  .section-sub { font-size: 0.85rem; }

  /* CLIENT SELECTOR */
  .client-selector {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  .client-sel-card { padding: 0.8rem 0.4rem; }
  .csc-icon { font-size: 1.3rem; margin-bottom: 0.3rem; }
  .csc-name { font-size: 0.62rem; }
  .csc-rubro { font-size: 0.55rem; }

  /* CLIENT PANEL */
  .client-panel.active {
    grid-template-columns: 1fr !important;
    padding: 1.2rem !important;
    gap: 1.5rem !important;
  }
  .client-name { font-size: 1.5rem; }
  .client-desc { font-size: 0.82rem; }
  .client-metrics-row { flex-wrap: wrap; }
  .cm { min-width: 30%; }
  .cm-val { font-size: 1.2rem; }

  /* VIDEOS GRID */
  .videos-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
  }
  .video-wrap { border-radius: 6px; }

  /* GROWTH CARDS */
  #growth-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* BTS GRID */
  #equipo > div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* CINE CARDS */
  .cine-grid { grid-template-columns: 1fr !important; }

  /* SERVICES */
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 2rem 1.2rem !important;
  }
  .service-price { font-size: 1.3rem; }

  /* METHOD */
  .method-grid { grid-template-columns: 1fr !important; }
  .method-step {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* FOOTER */
  footer {
    flex-direction: column !important;
    gap: 0.6rem !important;
    text-align: center !important;
    padding: 1.5rem 1.2rem !important;
  }

  /* MODAL */
  #yt-modal > div {
    width: 92vw !important;
  }

  /* GROWTH SECTION inner grids */
  div[style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 2.1rem; }
  .client-selector { grid-template-columns: repeat(2, 1fr) !important; }
  .proof-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .videos-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== BLOQUE 3 (index.html L547) — client selector 900px / 600px ===== */
    @media(max-width:900px){ .client-selector{ grid-template-columns:repeat(3,1fr); } } @media(max-width:600px){ .client-selector{ grid-template-columns:repeat(2,1fr); } }

/* ===== #tecnologia — carrusel horizontal con scroll-snap (solo mobile) =====
   En >768px no aplica nada de esto: el div conserva su `display:grid;
   grid-template-columns:repeat(2,1fr)` inline y el layout queda idéntico.
   Los !important son necesarios sólo porque compiten contra ese style inline
   (misma convención que el resto de este archivo). */
@media (max-width: 768px) {

  /* Indicador: 4 segmentos finos que ocupan el ancho, el activo en rojo. */
  .tech-dots{
    display:flex;
    gap:0.35rem;
    margin-bottom:1rem;
  }
  .tech-dot{
    flex:1 1 0;
    height:2px;
    border-radius:1px;
    background:rgba(255,255,255,0.15);
    transition:background-color 0.25s ease;
  }
  .tech-dot.is-active{ background:#E03535; }

  .tech-grid{
    display:flex !important;
    flex-wrap:nowrap;
    /* Sin esto las 4 tarjetas se estiran a la altura de la mas alta (stretch es
       el default de flex) y la de Wallet queda medio vacia. La altura del
       carrusel la sigue fijando la tarjeta mas alta, asi que no hay saltos. */
    align-items:flex-start;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    /* Full-bleed. #tecnologia tiene `padding:6rem 2.5rem` inline, que gana por
       especificidad sobre el `section{padding:3.5rem 1.2rem}` de más arriba.
       Con el contenedor metido 2.5rem por lado, una tarjeta de 88vw no entra
       completa; estos márgenes negativos lo llevan a 100vw y el padding propio
       repone el inset, para que la primera tarjeta siga alineada con el h2. */
    margin-left:-2.5rem;
    margin-right:-2.5rem;
    padding-left:2.5rem;
    padding-right:2.5rem;
    scroll-padding-left:2.5rem;   /* sin esto la 1ª tarjeta snapea pegada al borde */

    /* Aire para el box-shadow de las tarjetas (overflow-x recorta también en Y). */
    padding-top:0.5rem;
    padding-bottom:1rem;

    scrollbar-width:none;         /* el indicador ya comunica la posición */
  }
  .tech-grid::-webkit-scrollbar{ display:none; }

  /* `flex:0 0 88vw` y no `min-width` a secas: con flex-basis:auto la tarjeta se
     estiraría a su max-content y rompería el snap. */
  .tech-card{
    flex:0 0 88vw;
    scroll-snap-align:start;
  }

  /* El pill del CTA strip de abajo trae `flex-shrink:0` inline y su texto mide
     ~374px: a 400px no entra y desbordaba horizontalmente. Lo dejamos encoger
     para que el texto envuelva en dos lineas. Estaba latente desde antes — el
     grid roto forzaba el layout viewport a 600px y lo tapaba. */
  .tech-cta-pill{
    flex-shrink:1 !important;
    min-width:0;
  }
}