/* =============================================================
   RESPONSIVE.CSS — Media Queries · Mobile-first overrides
   Responsabilidad: SOLO overrides por breakpoint.
   La lógica visual va en los otros archivos CSS.
   Breakpoints: sm=640, md=768, lg=1024, xl=1280
   ============================================================= */

/* ── sm: ≤640px (Mobile) ───────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Layout ───────────────────────────────────────────────── */
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-16);
  }

  .section__header {
    margin-bottom: var(--space-10);
  }

  .section__title {
    font-size: var(--text-3xl);
  }

  .section__subtitle {
    font-size: var(--text-sm);
  }

  /* ── Hero ─────────────────────────────────────────────────── */
  .hero {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: var(--space-16);
  }

  .hero__content {
    text-align: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    max-width: 100%;
  }

  .hero__name {
    font-size: clamp(2.25rem, 10vw, 3.5rem);
  }

  .hero__role {
    font-size: var(--text-lg);
  }

  .hero__photo {
    max-width: 80%;
    right: 50%;
    transform: translateX(50%);
    opacity: 0.3;
    mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.6) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.6) 60%, transparent 100%);
  }

  .hero__scroll {
    display: none;
  }

  /* ── Nav hamburger ───────────────────────────────────────── */
  .nav__links {
    display: none;
    position: fixed;
    inset: 72px 0 0 0;
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__link {
    font-size: var(--text-xl);
  }

  .nav__toggle {
    display: flex;
  }

  /* ── Grids → 1 column ────────────────────────────────────── */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* ── Split → stack vertical ──────────────────────────────── */
  .split,
  .split--photo,
  .split--photo-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .split--reverse {
    direction: ltr;
  }

  /* Photo-first on mobile: show photo (2nd child) above text */
  .split--photo-reverse > div:last-child {
    order: -1;
  }

  /* ── Cards ────────────────────────────────────────────────── */
  .card__image {
    aspect-ratio: 16 / 9;
  }

  .card__body {
    padding: var(--space-4);
  }

  .card__title {
    font-size: var(--text-lg);
  }

  /* ── Section modifiers → center on mobile ────────────────── */
  .section__header--left {
    text-align: center;
  }

  .section__subtitle--left {
    margin-inline: auto;
  }

  .section__title--left {
    text-align: center;
  }

  .section-logo {
    margin-inline: auto;
  }

  /* Gold line → center in stacked splits */
  .split .gold-line {
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  }

  /* ── Proyectos: photo order on mobile ────────────────────── */
  #proyectos .split > div:last-child {
    order: -1;
  }

  /* ── Footer → stacked ────────────────────────────────────── */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }

  .footer__links-inline {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .footer__social {
    justify-content: center;
  }

  .footer__ig {
    justify-content: center;
  }

  /* ── Photo frame ─────────────────────────────────────────── */
  .photo-frame {
    border-radius: var(--radius-md);
    max-width: 80%;
    margin-inline: auto;
  }
}

/* ── md: 641–1023px (Tablet) ───────────────────────────────── */
@media (min-width: 641px) and (max-width: 1023px) {

  /* Grid 3/4 → 2 columns */
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Split photo keeps side-by-side on tablet */
  .split--photo,
  .split--photo-reverse {
    grid-template-columns: 1fr 1fr;
  }

  /* Badges slightly smaller on tablet */
  .badge {
    font-size: var(--text-xs);
  }

  /* Footer → 3 column with brand spanning */
  .footer__grid {
    grid-template-columns: 1fr auto auto;
  }

  /* Section header spacing */
  .section__header {
    margin-bottom: var(--space-12);
  }

  /* Hero content more centered */
  .hero__content {
    max-width: 50%;
  }

  /* Photo frame contained */
  .photo-frame {
    border-radius: var(--radius-lg);
  }
}

/* ── lg: 1024px+ (Desktop) ─────────────────────────────────── */
@media (min-width: 1024px) {
  .nav__toggle {
    display: none;
  }

  .nav__links {
    display: flex;
  }
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}