/* Solo mobile: carruseles y barra de navegación inferior. */

/* =========================================================
   MOBILE (hasta 820px): carruseles + barra de navegación inferior
   En desktop nada de esto aplica: .carrusel sigue siendo grilla
   y .bottom-nav / .carrusel-nav están ocultos.
   ========================================================= */
.carrusel-nav, .bottom-nav { display: none; }

@media (max-width: 820px) {
  /* --- Carruseles: scroll horizontal con snap, la tarjeta siguiente asoma --- */
  .carrusel {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  .carrusel::-webkit-scrollbar { display: none; }
  .carrusel > * { flex: 0 0 auto; scroll-snap-align: start; }
  .carrusel > .reveal { opacity: 1; transform: none; }
  .acab-grid.carrusel > * { width: 82%; }
  /* las tarjetas se estiran a la altura de la más alta: la foto llena todo el alto */
  .acab-grid.carrusel .acab img { height: 100%; }
  /* los botones de la galería usan all:unset, por eso repiten flex/snap con más especificidad */
  .gal-grid.carrusel > button { flex: 0 0 auto; scroll-snap-align: start; width: 62%; }
  .gal-grid .nom { transform: none; font-size: 15px; }

  /* --- Navegación del carrusel: flechas + puntos (o contador "03 / 16")
         Adaptado de portfolio/public/css/landing.css --- */
  .carrusel-nav {
    --carrusel-acento: var(--azul);
    display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 18px;
  }
  .acabados .carrusel-nav,
  :root[data-theme="dark"] .carrusel-nav { --carrusel-acento: #6cb8f0; }  /* sobre fondo oscuro */
  .carrusel-flecha {
    width: 40px; height: 40px; flex: none; padding: 0; border-radius: 50%;
    border: 1px solid var(--carrusel-acento); background: transparent; color: var(--carrusel-acento);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .carrusel-flecha svg { width: 18px; height: 18px; }
  .carrusel-flecha:active { background: var(--carrusel-acento); color: #fff; }
  .carrusel-flecha:focus-visible { outline: 2px solid var(--carrusel-acento); outline-offset: 3px; }
  .carrusel-dots { display: flex; justify-content: center; }
  .carrusel-dot {
    display: flex; align-items: center; justify-content: center;
    height: 24px; width: 20px; padding: 0; border: 0; border-radius: 999px;
    background: none; cursor: pointer; transition: width .2s;
  }
  .carrusel-dot::before {
    content: ""; height: 8px; width: 8px; border-radius: 999px;
    background: rgba(127,127,127,.45); transition: width .2s, background .2s;
  }
  .carrusel-dot.activo { width: 32px; }
  .carrusel-dot.activo::before { width: 22px; background: var(--carrusel-acento); }
  .carrusel-dot:focus-visible { outline: 2px solid var(--carrusel-acento); outline-offset: -2px; }
  /* Con muchas tarjetas (galería) los puntos no entran: va el contador */
  .carrusel-contador {
    display: none; min-width: 72px; text-align: center;
    font-family: "Bebas Neue", sans-serif; font-size: 20px; letter-spacing: .06em; color: var(--texto);
  }
  .carrusel-nav.con-contador .carrusel-dots { display: none; }
  .carrusel-nav.con-contador .carrusel-contador { display: block; }

  /* --- "¿Por qué elegir nuestro trabajo?": cards de a dos por fila ---
         (en desktop son 5 columnas separadas por líneas, en landing.css).
         La quinta card ocupa la fila entera para no quedar sola a la izquierda. */
  .valores { grid-template-columns: 1fr 1fr; gap: 12px; border-top: 0; }
  .valores > .valor,
  .valores > .valor + .valor,
  .valores > .valor:nth-child(even) {
    padding: 18px 16px 18px; border: 1px solid var(--linea);
    border-radius: var(--radio-grande); background: var(--card);
  }
  .valores > .valor:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .valor svg { width: 34px; height: 34px; margin-bottom: 12px; }
  .valor h3 { font-size: 22px; margin-bottom: 6px; }
  .valor p { font-size: 14px; line-height: 1.5; }
  .porque h2 { margin-bottom: 28px; }

  /* --- Barra de navegación inferior, al alcance del pulgar ---
         Pegada al borde: ancho completo y sin aire abajo; solo las esquinas
         de arriba van redondeadas. El relleno inferior respeta la barra de
         gestos del celular (safe-area). */
  .bottom-nav {
    position: fixed; z-index: 60;
    left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--linea);
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
    box-shadow: 0 -8px 24px var(--sombra);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 2px 7px; border-radius: var(--radio);
    text-decoration: none; color: var(--texto);
    font-size: 11px; font-weight: 500; line-height: 1.1;
    transition: background .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav a.activo { background: rgba(0,119,204,.12); color: var(--azul); }
  :root[data-theme="dark"] .bottom-nav a.activo { background: rgba(108,184,240,.15); color: #6cb8f0; }

  /* Lugar para la barra: el footer se estira y WhatsApp sube */
  footer { padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom)); }
  .wa-float { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .wa-float svg { width: 26px; height: 26px; }
}