/* =============================================================
   RECÓ Estudi — Mobile overrides
   Solo afecta a pantallas ≤ 768px
   No contiene ningún valor que afecte al layout desktop
============================================================= */

@media (max-width: 768px) {

  /* ── SPACING GENERAL ─────────────────────────────────────
     Reduce el espacio vertical sin aplastarlo            */
  .section { padding-block: var(--sp-8); }
  .section__header { margin-bottom: var(--sp-4); }

  /* ── HEROES ──────────────────────────────────────────────
     Más altura para más presencia visual e impacto       */
  /* Hero full-bleed: height ya es 100svh, solo ajustamos overlay */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(10, 8, 6, 0.05) 0%,
      rgba(10, 8, 6, 0.25) 30%,
      rgba(10, 8, 6, 0.72) 100%
    );
  }

  .page-hero__image {
    height: 52vw;
  }

  /* Hero images: altura extra para el parallax.
     grid-img y sobremi-images NO se tocan — rompería sus aspect-ratio */
  /* page-hero img — altura extra para parallax */
  .page-hero__image img {
    height: 112%;
    width: 100%;
    object-fit: cover;
  }

  /* ── SERVICE ROWS ────────────────────────────────────────
     Alineación izquierda, composición limpia               */
  .service-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* evita el centrado que aparece en algunas páginas */
    padding: 0;
    text-align: left;
  }

  .service-row__name {
    padding: var(--sp-3) 0 var(--sp-1);
    border-bottom: none !important;
    font-size: 1.05rem;
    text-align: left;
    width: 100%;
  }

  .service-row__desc {
    padding: 0 0 var(--sp-2);
    border-bottom: none !important;
    color: var(--ink-light);
    font-size: 0.82rem;
    line-height: 1.65;
    text-align: left;
    width: 100%;
  }

  .service-row__action {
    padding: 0 0 var(--sp-3);
    font-size: 0.68rem;
    border-right: none;
    text-align: left;
  }

  /* ── STEPS ───────────────────────────────────────────────
     Menos padding — en mobile generan mucho scroll        */
  .step { padding: var(--sp-3) 0; }

  .step:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--rule);
  }

  /* ── INTERLUDE ───────────────────────────────────────────
     Las frases entre servicios — menos altura             */
  .interlude {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--rule);
  }

  .interlude__text {
    font-size: 0.95rem;
  }

  /* ── PULLQUOTE ────────────────────────────────────────────
     Menos padding — junto con CTA y footer ocupa demasiado */
  .pullquote { padding: var(--sp-6) var(--pad-x); }

  /* ── CTA BLOCK ───────────────────────────────────────────
     Más compacto en mobile                                  */
  .cta-block__inner { padding: var(--sp-6) var(--pad-x); }
  .cta-block__title { font-size: clamp(1.2rem, 4vw, 1.6rem); }
  .cta-block__eyebrow { margin-bottom: var(--sp-1); }
  .cta-block__text { margin-bottom: var(--sp-3); }

  /* ── IMÁGENES DEL ABOUT ──────────────────────────────────
     Reducir la altura de los retratos para no saturar     */
  .sobremi-images img:first-child {
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }
  .sobremi-images img:last-child {
    aspect-ratio: 16 / 9;
  }

  .grid-img--portrait img {
    aspect-ratio: 3 / 2;
  }

  /* ── ASESORIA TABLE ──────────────────────────────────────
     En mobile: menos padding en cada columna               */
  .asesoria-col { padding: var(--sp-4); }

  /* ── ABOUT LAYOUT ────────────────────────────────────────
     Eliminar gaps redundantes al apilar                    */
  .about-layout { gap: var(--sp-6); }

  /* ── PROSE ───────────────────────────────────────────────
     Menos gap entre párrafos                               */
  .prose { gap: var(--sp-2); }

  /* ── ELIMINAR BORDES DOBLES ──────────────────────────────
     Evitar que dos elementos adyacentes sumen sus bordes   */
  .section--warm + .section--warm { border-top: none; }
  .pullquote + .cta-block { border-top-color: transparent; }

  /* ── FOOTER ──────────────────────────────────────────────
     Layout compacto en mobile: logo + nav arriba,
     copyright + iconos abajo en la misma fila             */
  .footer__inner {
    padding: var(--sp-5) var(--pad-x) var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    text-align: left;
  }

  .footer__logo-img {
    height: 60px; /* más pequeño en mobile */
  }

  /* Nav en grid 2 columnas — evita que los items rompan */
  .footer__nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1) var(--sp-4);
    justify-items: flex-start;
  }

  .footer__right {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--rule);
    font-size: var(--text-xs);
  }

  .footer__icons {
    gap: var(--sp-2);
  }

}