/* ========================================================
   RESPONSIVE BREAKPOINTS & MOBILE-FIRST DESIGN
   Tamanos proporcionales para todos los dispositivos
======================================================== */

/* -- MOBILE FIRST (360px - 599px) -- */
@media (max-width: 599px) {
  :root {
    --pad-x: 20px;
    --pad-section: 48px;
  }

  body { font-size: 14px; padding-top: 60px; }

  .av-wrap { padding: 0 20px; }

  /* Navbar */
  .av-nav-wrap { width: calc(100% - 40px); }
  .av-navbar { padding: 12px 16px; }
  .av-nav-name { font-size: 0.85rem; }
  .av-nav-links { display: none; }

  /* Hero */
  .av-hero { padding: 100px 20px 60px; }
  /* Escala fluida: empalma con el tamano de escritorio (45px en 900px) sin saltos */
  .av-headline { font-size: clamp(30px, calc(22px + 2.5vw), 45px); margin-bottom: 20px; }
  .av-subcopy { font-size: 14px; margin-bottom: 32px; }
  .av-cta-group { gap: 8px; }

  /* Hints decorativos del hero: recolocados en zonas libres
     (en sus posiciones de escritorio pisan el titular y los CTA) */
  .av-dl { width: 56px; }
  .av-dl1 { top: 19%; left: 6%; }
  .av-mn1 { top: 19%; left: 6%; transform: translateX(64px) translateY(-9px); }
  .av-dl2 { bottom: 9%; right: 8%; }
  .av-mn2 { bottom: 9%; right: 8%; transform: translateX(-64px) translateY(-9px); }

  /* Switcher de idioma: mas pequeno y semitransparente para no pisar el contenido */
  .av-lang { bottom: 16px; right: 16px; padding: 4px; opacity: .75; transition: opacity .2s; }
  .av-lang:hover, .av-lang:focus-within, .av-lang:active { opacity: 1; }
  .av-lang-btn { min-height: 38px; padding: 0 12px; font-size: 10px; }

  /* Section titles */
  h1 { font-size: clamp(24px, 5vw, 32px); }
  h2 { font-size: clamp(20px, 4vw, 28px); }
  h3 { font-size: clamp(16px, 3vw, 22px); }

  /* Cards: apiladas y centradas, manteniendo su tamano de diseno (222x316).
     width:100% aqui colapsa la card (columna flex con align-items:flex-start) */
  .av-cards-section { padding: 88px 20px 48px; flex-direction: column; align-items: center; }
  .av-card-flipper { width: 222px; height: 316px; }

  /* Grids */
  .av-verticals-row { grid-template-columns: 1fr; padding: 0 20px 28px; gap: 12px; }
  .av-process-strip { grid-template-columns: 1fr; gap: 14px; }
  .av-projects-grid { grid-template-columns: 1fr; padding: 0 20px 40px; gap: 14px; }

  /* About section */
  .av-about-section { padding: 48px 20px; }
  .av-about-hl { font-size: clamp(18px, 4vw, 24px); margin-bottom: 24px; }

  /* CTA block */
  .av-cta-block { padding: 48px 20px; border-radius: 16px; }
  .av-cta-h2 { font-size: clamp(22px, 4vw, 32px); margin-bottom: 28px; }

  /* Separator */
  .av-sep { padding: 40px 20px; flex-direction: column; gap: 14px; text-align: center; }
  .av-sep-line { display: none; }

  /* Case study */
  .av-cs-wrap { padding: 0 20px 48px; }
  .av-cs-two-col { grid-template-columns: 1fr; gap: 40px; }
  .av-side-card { position: static; margin-top: 32px; }
  .av-cs-title { font-size: clamp(24px, 5vw, 42px); }

  /* Contact */
  .av-contact-wrap { grid-template-columns: 1fr; padding: 60px 20px; gap: 40px; }
  .av-contact-h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); }

  /* Projects page */
  .av-projects-hero { padding: 60px 20px 40px; }
  .av-projects-title { font-size: clamp(28px, 6vw, 52px); }
}

/* -- TABLET SMALL (600px - 899px) -- */
@media (min-width: 600px) and (max-width: 899px) {
  :root {
    --pad-x: 32px;
    --pad-section: 64px;
  }

  body { font-size: 15px; }

  .av-wrap { padding: 0 32px; }

  /* Hero */
  .av-hero { padding: 110px 32px 80px; }
  .av-headline { font-size: clamp(30px, calc(22px + 2.5vw), 45px); }
  .av-subcopy { font-size: 15px; margin-bottom: 28px; }

  /* Cards: permitir salto de linea si las tres no caben en fila */
  .av-cards-section { flex-wrap: wrap; justify-content: center; }

  /* Grids */
  .av-verticals-row { grid-template-columns: repeat(2, 1fr); padding: 0 32px 36px; gap: 14px; }
  .av-process-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .av-projects-grid { grid-template-columns: repeat(2, 1fr); padding: 0 32px 60px; gap: 16px; }

  /* Case study */
  .av-cs-two-col { grid-template-columns: 1fr; }
  .av-side-card { position: static; margin-top: 24px; }

  /* Contact */
  .av-contact-wrap { padding: 80px 32px; gap: 60px; }

  /* Projects page */
  .av-projects-hero { padding: 80px 32px 60px; }
}

/* -- TABLET LARGE (900px - 1199px) -- */
@media (min-width: 900px) and (max-width: 1199px) {
  :root {
    --pad-x: 40px;
    --pad-section: 80px;
  }

  .av-wrap { padding: 0 40px; }

  .av-verticals-row { grid-template-columns: repeat(3, 1fr); padding: 0 40px 40px; gap: 14px; }
  .av-process-strip { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .av-projects-grid { grid-template-columns: repeat(2, 1fr); padding: 0 40px 64px; gap: 18px; }

  .av-cs-two-col { grid-template-columns: minmax(0, 2fr) 1fr; gap: 48px; }
}

/* -- DESKTOP (1200px+) -- */
@media (min-width: 1200px) {
  :root {
    --pad-x: 48px;
    --pad-section: 96px;
  }

  .av-projects-grid { grid-template-columns: repeat(3, 1fr); }
  .av-process-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ========================================================
   MEDIA RESPONSIVE - Images & Videos
======================================================== */

/* Contenedor responsivo para imagenes */
.av-media-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage), var(--blue-pale));
  display: flex;
  align-items: center;
  justify-content: center;
}

.av-media-container img,
.av-media-container iframe,
.av-media-container video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Gallery responsive */
.av-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}

@media (max-width: 599px) {
  .av-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
}

.av-gallery-item {
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sage), var(--blue-pale));
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.av-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.av-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================
   GRIDS INLINE DE PLANTILLAS FSE
   Algunos bloques llevan grid-template-columns inline
   (p. ej. How I Think en Process): en movil, apilar.
   El !important es necesario para ganar al estilo inline.
======================================================== */

@media (max-width: 768px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
}

/* ========================================================
   FOOTER RESPONSIVE
======================================================== */

@media (max-width: 899px) {
  .av-footer { padding: 48px 32px 88px; }
  .av-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 599px) {
  .av-footer { padding: 40px 20px 88px; }
  .av-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .av-footer-bottom { flex-direction: column; text-align: center; }
}

/* ========================================================
   ASPECT RATIOS & PROPORTIONAL SIZING
======================================================== */

.av-aspect-square { aspect-ratio: 1 / 1; }
.av-aspect-portrait { aspect-ratio: 3 / 4; }
.av-aspect-landscape { aspect-ratio: 16 / 9; }
.av-aspect-video { aspect-ratio: 16 / 9; }
.av-aspect-cinematic { aspect-ratio: 21 / 9; }
.av-aspect-card { aspect-ratio: 4 / 5; }

/* ========================================================
   UTILITY CLASSES - Easy resize helpers
======================================================== */

.av-w-full { width: 100%; }
.av-w-half { width: 50%; }
.av-w-third { width: 33.333%; }
.av-w-two-thirds { width: 66.666%; }

.av-max-w-sm { max-width: 480px; }
.av-max-w-md { max-width: 720px; }
.av-max-w-lg { max-width: 1000px; }
.av-max-w-xl { max-width: var(--max-w); }

.av-p-sm { padding: 16px; }
.av-p-md { padding: 24px; }
.av-p-lg { padding: 48px; }
.av-p-xl { padding: 72px; }

.av-m-auto { margin: 0 auto; }
.av-rounded-sm { border-radius: 12px; }
.av-rounded-md { border-radius: 20px; }
.av-rounded-lg { border-radius: 24px; }

/* ========================================================
   PROPORTIONAL TEXT SIZING
======================================================== */

.av-text-xs { font-size: clamp(10px, 1.2vw, 12px); }
.av-text-sm { font-size: clamp(12px, 1.5vw, 14px); }
.av-text-base { font-size: clamp(14px, 1.8vw, 16px); }
.av-text-lg { font-size: clamp(16px, 2.2vw, 20px); }
.av-text-xl { font-size: clamp(20px, 3vw, 28px); }
.av-text-2xl { font-size: clamp(28px, 4vw, 40px); }
.av-text-3xl { font-size: clamp(36px, 5vw, 56px); }

/* ========================================================
   ABOUT - Skill cards con altura uniforme
   (especificidad alta para ganar a la regla del bloque)
======================================================== */

.av-skills-grid .av-skill-card {
  padding: 18px 22px;
  min-height: 84px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}