/* ═══════════════════════════════════════════════════════
   RESPONSIVE QA — IBIGAL BOATS
   Sistema unificado de espaciado y grid
   Breakpoints: 1024 laptop · 768 tablet · 480 mobile
═══════════════════════════════════════════════════════ */

/* ── VARIABLES LOCALES ─────────────────────────────── */
:root {
  --header-h:    76px;   /* altura real del header desktop */
  --hero-pad-t:  calc(var(--header-h) + 3.5rem);
  --hero-pad-b:  4rem;
}
@media (max-width: 860px) {
  :root {
    --header-h:  64px;
    --hero-pad-t: calc(var(--header-h) + 2.5rem);
    --hero-pad-b: 3rem;
  }
}
@media (max-width: 480px) {
  :root {
    --header-h:  58px;
    --hero-pad-t: calc(var(--header-h) + 2rem);
    --hero-pad-b: 2.5rem;
  }
}

/* ── CONTAINER — padding inline consistente ─────────── */
.container {
  width: min(1280px, 100%) !important;
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
  margin-inline: auto !important;
}
@media (max-width: 768px) {
  .container { padding-inline: 1.25rem !important; }
}
@media (max-width: 480px) {
  .container { padding-inline: 1rem !important; }
}

/* ── SECTION — padding vertical consistente ─────────── */
.section {
  padding: clamp(3rem, 8vw, 7rem) 0 !important;
}
@media (max-width: 768px) {
  .section { padding: clamp(2.5rem, 7vw, 4.5rem) 0 !important; }
}
@media (max-width: 480px) {
  .section { padding: 2.5rem 0 !important; }
}

/* ════════════════════════════════════════════════════
   HEROES — SISTEMA UNIFICADO
   Todos los heroes comparten la misma estructura:
   position:relative, min-height, padding-top=header+espacio
═══════════════════════════════════════════════════════ */

/* Hero principal (home) */
.hero {
  padding-top: var(--hero-pad-t) !important;
  padding-bottom: var(--hero-pad-b) !important;
}
@media (max-width: 768px) {
  .hero { min-height: 85vh !important; padding-bottom: 3rem !important; }
}
@media (max-width: 480px) {
  .hero { min-height: 80vh !important; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }
  .hero-subtitle { font-size: .82rem !important; }
  .hero-btns { flex-direction: column !important; align-items: flex-start !important; }
  .hero-btns .btn { width: 100% !important; justify-content: center !important; }
}

/* ── PAGE HERO (archive-product / alquila) ─────────── */
.page-hero {
  padding-top: var(--hero-pad-t) !important;
  padding-bottom: var(--hero-pad-b) !important;
  min-height: 360px;
}
@media (max-width: 768px) {
  .page-hero { min-height: 280px; }
  .page-hero-title { font-size: clamp(1.7rem, 6vw, 2.8rem) !important; }
  .page-hero-sub { font-size: .85rem !important; }
}
@media (max-width: 480px) {
  .page-hero { min-height: 220px; }
  .page-hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
}

/* ── CAT HERO (taxonomy) ───────────────────────────── */
.cat-hero {
  padding-top: var(--hero-pad-t) !important;
  padding-bottom: var(--hero-pad-b) !important;
  min-height: 400px;
}
/* El padding del cat-hero .container lo hereda del .container base con !important arriba */
@media (max-width: 768px) {
  .cat-hero { min-height: 300px; }
  .cat-hero-title { font-size: clamp(1.7rem, 6vw, 2.8rem) !important; }
}
@media (max-width: 480px) {
  .cat-hero { min-height: 240px; }
  .cat-hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
  .cat-hero-meta { flex-direction: column !important; gap: .75rem !important; }
}

/* ── QS HERO (quienes somos) ───────────────────────── */
/* padding-top/bottom NO se aplican aquí: el hero cubre toda la pantalla
   y la compensación del header ya está en .qs-hero-content vía calc(80px+...) */
.qs-hero .container {
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
}
@media (max-width: 768px) {
  .qs-hero { min-height: 55vh !important; }
  .qs-hero .container { padding-inline: 1.25rem !important; }
  .qs-hero-title { font-size: clamp(1.7rem, 6vw, 2.8rem) !important; }
  .qs-hero-stats { gap: 1.25rem !important; }
  .qs-stat-num { font-size: 1.4rem !important; }
}
@media (max-width: 480px) {
  .qs-hero { min-height: 50vh !important; }
  .qs-hero .container { padding-inline: 1rem !important; }
  .qs-hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
  .qs-hero-stats { flex-direction: column !important; gap: 1rem !important; }
}

/* ── CONTACT HERO ──────────────────────────────────── */
/* padding-top/bottom NO se aplican aquí: el hero cubre toda la pantalla
   y la compensación del header ya está en .contact-hero-content vía calc(80px+...) */
.contact-hero .container,
.contact-hero-content.container {
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
}
@media (max-width: 768px) {
  .contact-hero { min-height: 50vh !important; }
  .contact-hero .container, .contact-hero-content.container { padding-inline: 1.25rem !important; }
  .contact-hero-title { font-size: clamp(1.7rem, 6vw, 2.8rem) !important; }
}
@media (max-width: 480px) {
  .contact-hero { min-height: 42vh !important; }
  .contact-hero .container, .contact-hero-content.container { padding-inline: 1rem !important; }
}

/* ── BLOG HERO ─────────────────────────────────────── */
/* padding-top/bottom: el blog-hero ya tiene padding:8rem 0 5rem en blog.css
   a nivel de sección — no duplicar aquí */
.blog-hero .container,
.blog-hero-content.container {
  padding-inline: clamp(1rem, 4vw, 3.5rem) !important;
}
@media (max-width: 768px) {
  .blog-hero .container, .blog-hero-content.container { padding-inline: 1.25rem !important; }
  .blog-hero-title { font-size: clamp(1.7rem, 6vw, 2.8rem) !important; }
}
@media (max-width: 480px) {
  .blog-hero .container, .blog-hero-content.container { padding-inline: 1rem !important; }
}

/* ════════════════════════════════════════════════════
   PRODUCT GRID — 3 col / 2 col tablet / 1 col mobile
   Afecta: archive-product, taxonomy, homepage, search
═══════════════════════════════════════════════════════ */

/* DESKTOP ≥ 1025px: 3 columnas */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products[class*="columns-"],
ul.ibigal-products-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

/* TABLET 769–1024px: 2 columnas */
@media (min-width: 769px) and (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.ibigal-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}

/* TABLET 481–768px: 2 columnas */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.ibigal-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* MOBILE ≤ 480px: 1 columna */
@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.ibigal-products-grid {
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
  }
}

/* ════════════════════════════════════════════════════
   OTRAS CATEGORÍAS GRID (taxonomy)
   4 col desktop / 2 col tablet / 2 col mobile grande / 1 col mobile
═══════════════════════════════════════════════════════ */
.other-cats-grid,
.other-cat-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
}
@media (max-width: 900px) {
  .other-cats-grid, .other-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .other-cats-grid, .other-cat-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════
   CATEGORY CARDS HOME
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cat-grid-custom { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .cat-grid-custom { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-card-custom { min-height: 200px !important; }
}
@media (max-width: 480px) {
  .cat-grid-custom { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-card-custom { min-height: 160px !important; }
  .cat-name-custom { font-size: .85rem !important; }
  .cat-desc-custom { display: none !important; }
}

/* ════════════════════════════════════════════════════
   SECTION HEADER — secciones internas
═══════════════════════════════════════════════════════ */
.section-header { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-title { font-size: clamp(1.5rem, 4vw, 2.8rem); }
.section-sub { font-size: clamp(.85rem, 2vw, 1rem); }

/* ════════════════════════════════════════════════════
   SHOP / ARCHIVE PRODUCT PAGE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .shop-category-filter { gap: .5rem !important; }
  .shop-cat-pill { font-size: .6rem !important; padding: .45rem .9rem !important; }
  .shop-topbar { flex-direction: column !important; align-items: flex-start !important; gap: .75rem !important; }
}

/* ════════════════════════════════════════════════════
   NOTICIAS / BLOG GRID
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .news-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .testi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .testi-card:nth-child(2) { margin-top: 0 !important; }
}
@media (max-width: 600px) {
  .testi-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
}

/* ════════════════════════════════════════════════════
   EXPERIENCE SECTION
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .experience-grid { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .exp-review-card { display: none !important; }
  .exp-badge { display: none !important; }
}

/* ════════════════════════════════════════════════════
   BANNER CTA GLOBAL
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .banner-cta-section { padding: clamp(3rem, 8vw, 5rem) 0; }
  .banner-cta-content { text-align: center; }
  .banner-cta-btns { flex-direction: column !important; align-items: center !important; }
  .banner-cta-btns .btn { width: 100% !important; justify-content: center !important; max-width: 280px !important; }
}

/* ════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .contact-form-row { grid-template-columns: 1fr !important; }
  .contact-reviews-grid { grid-template-columns: 1fr !important; }
  .contact-form { padding: 1.5rem !important; }
}

/* ════════════════════════════════════════════════════
   QS PAGE — NUMBERS / TIMELINE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .qs-numbers-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
}
@media (max-width: 480px) {
  .qs-numbers-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column !important; gap: .75rem !important; text-align: center !important; }
}

/* ════════════════════════════════════════════════════
   SINGLE PRODUCT
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sp-layout { grid-template-columns: 1fr !important; }
  .sp-sidebar { position: static !important; max-width: 100% !important; }
}
@media (max-width: 768px) {
  .sp-specs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sp-tabs-header { overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 480px) {
  .sp-specs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .sp-gallery-thumbs { display: none !important; }
}

/* ════════════════════════════════════════════════════
   PRINT / OVERFLOW PREVENTION GLOBAL
═══════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }