/* =========================================================
   RESPONSIVE — Cobertura completa de todos los breakpoints
   ========================================================= */

/* ── Prevenir scroll horizontal global ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed, object { max-width: 100%; }

/* =========================================================
   1400px — XL desktop
   ========================================================= */
@media (max-width: 1400px) {
  :root { --container-max: 1200px; }
}

/* =========================================================
   1280px — Large desktop
   ========================================================= */
@media (max-width: 1280px) {
  :root { --container-padding: 0 32px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .areas-grid    { grid-template-columns: repeat(2, 1fr); }
  .steps-grid    { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
}

/* =========================================================
   1024px — Tablet landscape
   ========================================================= */
@media (max-width: 1024px) {
  :root { --section-padding: 60px 0; }

  /* Grids */
  .property-grid      { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid  { grid-template-columns: repeat(2, 1fr); }
  .posts-grid         { grid-template-columns: repeat(2, 1fr); }
  .dev-grid           { grid-template-columns: repeat(2, 1fr); }
  .values-grid        { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }

  /* Split */
  .split { gap: 3rem; }

  /* Filtros */
  .filter-bar__grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Blog */
  .blog-layout { grid-template-columns: 1fr; }
  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .sidebar__widget { margin-bottom: 0; }

  /* Property single */
  .property-details       { grid-template-columns: 1fr; }
  .property-sidebar__card { position: static; }

  /* Contact page inline grid */
  .contact-page-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  /* Sell why section */
  .sell-why-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   768px — Tablet portrait
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --section-padding:    48px 0;
    --container-padding:  0 20px;
    --header-h:           70px;
  }

  /* ── HEADER ── */
  .header__cta     { display: none; }
  .hamburger        { display: flex; }
  .header__inner    { gap: 0.75rem; }
  .gtranslate-wrapper { display: none; } /* ocultar en mobile */

  /* Logo */
  .header__logo .logo-img {
    height: 40px !important;
    max-width: 150px;
  }

  /* Mobile nav — panel que cubre toda la pantalla sobre el contenido */
  .header__nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: var(--color-white) !important;
    padding: calc(var(--header-h) + 1rem) 1.5rem 2rem !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 9999 !important;   /* por encima de absolutamente todo */
  }
  .header__nav.is-open {
    transform: translateX(0) !important;
  }

  /* Lista de items */
  .header__nav .nav__list {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .nav__list > li {
    width: 100% !important;
    border-bottom: 1px solid var(--color-gray-100) !important;
    list-style: none !important;
  }
  .nav__list a {
    padding: 1rem 0 !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    display: block !important;
    width: 100% !important;
    color: var(--color-dark) !important;
  }
  .nav__list a:hover { color: var(--color-primary) !important; }

  /* Botón Contact resaltado */
  .nav__list .menu-item-contact > a {
    margin-top: 1.5rem !important;
    text-align: center !important;
    border-radius: var(--radius-sm) !important;
    padding: 1rem !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
  }

  /* ── HERO ── */
  .hero { min-height: 80vh; }
  .hero__content { max-width: 100%; }
  .hero__actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .hero__sub { font-size: var(--text-base); }

  /* ── STATS BAR ── */
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__number { font-size: var(--text-2xl); }

  /* ── GRIDS PRINCIPALES ── */
  .property-grid     { grid-template-columns: 1fr; }
  .services-grid     { grid-template-columns: 1fr; }
  .areas-grid        { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .posts-grid        { grid-template-columns: 1fr; }
  .dev-grid          { grid-template-columns: 1fr; }
  .steps-grid        { grid-template-columns: 1fr; gap: 1.5rem; }
  .values-grid       { grid-template-columns: 1fr; }

  /* ── SPLIT ── */
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr !important;
  }
  .split > * { direction: ltr !important; }
  .split__img { aspect-ratio: 16/9; }

  /* ── FILTER BAR ── */
  .filter-bar { padding: 1.25rem; }
  .filter-bar__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem;
  }
  .filter-bar__grid > div:last-child {
    grid-column: 1 / -1;
  }
  .filter-bar__grid > div:last-child .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── FORMS ── */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-group.full-width { grid-column: auto; }
  .contact-form { padding: 1.5rem 1.25rem; }

  /* ── CONTACT PAGE ── */
  .contact-page-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* ── ABOUT AREAS INLINE GRID ── */
  .about-areas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── SELL PAGE SPLIT ── */
  .sell-why-grid { grid-template-columns: 1fr !important; }

  /* ── NEW DEVS WHY GRID ── */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── BUY PAGE SIDEBAR CTA ── */
  .buy-sidebar-cta {
    grid-template-columns: 1fr !important;
  }

  /* ── FOOTER ── */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer__top { padding: 3rem 0 2rem; }
  .footer__bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .footer__legal {
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  /* ── SINGLE POST ── */
  .single-post__inner { grid-template-columns: 1fr; }
  .sidebar { display: block; }
  .post-navigation { grid-template-columns: 1fr; gap: 1.5rem; }
  .nav-next { text-align: left; }

  /* ── PROPERTY DETAILS ── */
  .property-details__specs-bar { flex-wrap: wrap; gap: 1rem; }
  .property-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }

  /* ── SECTION TITLES ── */
  .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .section-subtitle { font-size: var(--text-base); }

  /* ── ERROR 404 ── */
  .error-404__actions { flex-direction: column; align-items: center; }

  /* ── CTA SECTION ── */
  .cta-section { padding: 3rem 0; }
  .cta-section__actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .cta-section__actions .btn { width: 100%; max-width: 320px; justify-content: center; }
  .cta-section__text { font-size: var(--text-base); }
}

/* =========================================================
   480px — Mobile
   ========================================================= */
@media (max-width: 480px) {
  :root { --container-padding: 0 16px; }

  /* Logo más pequeño */
  .header__logo .logo-img {
    height: 34px !important;
    max-width: 130px;
  }

  /* Hero */
  .hero { min-height: 75vh; }
  .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero__sub { font-size: var(--text-sm); }

  /* Stats */
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stats-bar__item { padding: 0.75rem 0.5rem; }
  .stats-bar__number { font-size: var(--text-2xl); }
  .stats-bar__label  { font-size: 0.7rem; }

  /* Areas — 1 columna en mobile pequeño */
  .areas-grid { grid-template-columns: 1fr; }
  .area-card  { aspect-ratio: 4/3; }

  /* Values — 1 columna */
  .values-grid { grid-template-columns: 1fr !important; }

  /* About areas inline */
  .about-areas-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Filter — 1 columna */
  .filter-bar__grid { grid-template-columns: 1fr !important; }

  /* Property specs — wrap */
  .property-card__specs { gap: 0.5rem; flex-wrap: wrap; }
  .property-card__spec  { font-size: 0.75rem; }

  /* Gallery thumbs */
  .property-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }

  /* Steps — 1 columna */
  .steps-grid { grid-template-columns: 1fr !important; }

  /* Error 404 */
  .error-404__code { font-size: 4.5rem; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; }
  .footer__legal a { font-size: 0.7rem; }

  /* Dev cards */
  .dev-grid { grid-template-columns: 1fr; }

  /* Buttons */
  .btn { padding: 0.75rem 1.25rem; font-size: var(--text-xs); }
  .btn--lg { padding: 0.875rem 1.5rem; font-size: var(--text-sm); }

  /* Contact form */
  .contact-form { padding: 1.25rem 1rem; }
  .contact-page-grid { gap: 2rem !important; }

  /* Buy sidebar CTAs */
  .buy-sidebar-cta { grid-template-columns: 1fr !important; }

  /* Posts grid */
  .posts-grid { grid-template-columns: 1fr; }

  /* Section headers */
  .section-header { margin-bottom: 2rem; }
}

/* =========================================================
   360px — Mobile muy pequeño
   ========================================================= */
@media (max-width: 360px) {
  :root { --container-padding: 0 12px; }

  .hero h1 { font-size: 1.4rem; }
  .stats-bar__number { font-size: var(--text-xl); }
  .property-card__price { font-size: var(--text-xl); }
  .btn { padding: 0.625rem 1rem; }
  .error-404__code { font-size: 3.5rem; }
  .about-areas-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   INLINE GRID FIXES — cubre grids con style="display:grid"
   en los templates PHP que no tienen clase CSS propia
   ========================================================= */

/* Contact page — columna info + formulario */
@media (max-width: 900px) {
  /* selector de último recurso para grids inline */
  .container > div[style*="grid-template-columns: 1fr 1.6fr"],
  .container > div[style*="grid-template-columns:1fr 1.6fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
  }

  /* About — areas de especialización 4 columnas inline */
  .container > div[style*="grid-template-columns: repeat(4"],
  .container > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Buy — sidebar CTAs inline 2 col */
  .container > div[style*="grid-template-columns: 1fr 1fr"],
  .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* About — areas 4 col → 2 col */
  .container > div[style*="grid-template-columns: repeat(4"],
  .container > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Sell — porqué vender, razones con flex inline */
  .container > div[style*="display:flex; gap:1rem; margin-bottom"],
  .container > div[style*="display: flex; gap: 1rem; margin-bottom"] {
    flex-wrap: wrap;
  }
}

/* =========================================================
   CLASES DE GRID CON NOMBRE — control directo
   ========================================================= */
@media (max-width: 900px) {
  .contact-page-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .about-areas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .buy-sidebar-cta {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .about-areas-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   OVERFLOW FIX — fuerza que nada desborde
   ========================================================= */
@media (max-width: 768px) {
  .section,
  .stats-bar,
  .hero,
  .cta-section,
  .site-footer,
  .site-header {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Evitar que textos largos rompan el layout */
  h1, h2, h3, h4, p, a, li, td, th {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Tablas que se salgan */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .site-header, .site-footer, .hamburger,
  .cta-section, .property-sidebar__card,
  .nav-links, .filter-bar, .load-more-wrap { display: none !important; }
  .site-main { padding-top: 0; }
  body { font-size: 12pt; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 10pt; }
  .container { max-width: 100%; padding: 0; }
}