/* =====================================================================
   PubliConnect · Estilos propios de usuarios.html
   Archivo: css/usuarios.css
   Versión 2 · rehecho desde cero el 5 oct 2026
   Por qué: el carrusel de empresas (.slider de main.js) se extiende a
   todo el ancho de la pantalla y en iPhone las tarjetas quedaban más
   anchas que la pantalla y desalineadas del texto. Este carrusel (.pc-cards)
   vive dentro de .wrap, así que siempre queda alineado con los títulos.
     Teléfono (≤ 734 px): una tarjeta a la vez, al 100 % del ancho del
                          contenido, deslizable con el dedo y con puntos.
     Tableta y escritorio: rejilla de --cols columnas, sin puntos.
   Lo activa js/usuarios.js; sin JavaScript sigue funcionando el deslizamiento.
   ===================================================================== */

.pc-cards { --gap: 24px; position: relative; }

.pc-cards-track {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap);
}
.pc-card { min-width: 0; margin: 0; }
.bg-gray .pc-card { background: var(--white, #fff); }   /* tarjeta blanca sobre fondo gris */

.pc-cards-dots { display: none; }

/* Tableta: la rejilla de 4 pasa a 2 columnas */
@media (max-width: 1068px) {
  .pc-cards[style*="--cols:4"] .pc-cards-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Teléfono: carrusel de una tarjeta al 100 % */
@media (max-width: 734px) {
  .pc-cards { --gap: 12px; }
  .pc-cards .pc-cards-track {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pc-cards-track::-webkit-scrollbar { display: none; }
  .pc-card {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .pc-cards-track:focus-visible { outline: 2px solid var(--blue, #2F63D6); outline-offset: 4px; border-radius: 28px; }

  .pc-cards-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: 16px;
  }
  .pc-dot {
    width: 28px; height: 28px;               /* área táctil cómoda */
    padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .pc-dot::before {
    content: ""; display: block;
    width: 8px; height: 8px; border-radius: 4px;
    background: #c7c7cc;
    transition: width .3s ease, background-color .3s ease;
  }
  .pc-dot[aria-current="true"]::before { width: 22px; background: var(--ink, #1d1d1f); }
  .bg-black .pc-dot::before { background: #48484a; }
  .bg-black .pc-dot[aria-current="true"]::before { background: #f5f5f7; }
  .pc-dot:focus-visible { outline: 2px solid var(--blue, #2F63D6); outline-offset: 0; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-dot::before { transition: none; }
}
html.a11y .pc-dot::before { width: 10px; height: 10px; }
html.a11y .pc-dot[aria-current="true"]::before { width: 26px; }

/* 8 oct 2026 · «Exclusiva, pero no un lujo» (#derecho)
   Por qué: el párrafo usa .center en lugar de .section-head y las tarjetas
   quedaban pegadas al texto. Mismo espacio que .section-head (56 / 36 px). */
.center + .pc-cards { margin-top: 56px; }
@media (max-width: 734px) { .center + .pc-cards { margin-top: 36px; } }

/* 10 oct 2026 · Servicios (#servicios)
   Por qué: al quitar dos tarjetas repetidas quedaron dos, que se estiraban a la altura del teléfono.
   Ahora van una sobre otra, junto al teléfono. */
#servicios .serv-cards { grid-template-columns: 1fr; }