/* ============================================================
   CONSTRUCCIONES ROTELLA S.A. — Responsive Stylesheet
   Breakpoints: 375 / 640 / 768 / 1024 / 1280 / 1440
   Mobile-first approach
   ============================================================ */

/* ── Large Desktop (1440px+) ── */
@media (min-width: 1440px) {
  :root { --container-padding: var(--space-8); }

  .hero-title { font-size: clamp(72px, 5.5vw, 80px); }
  .year-decor { font-size: clamp(360px, 32vw, 520px); right: -40px; bottom: -20px; }
  .stats-grid { gap: var(--space-12); }
}

/* ── Desktop (1024px–1279px) ── */
@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: span 3; border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-6); }
}

/* ── Tablet Landscape (1024px) ── */
@media (max-width: 1023px) {
  :root {
    --container-padding: var(--space-5);
    --nav-height: 72px;
  }

  /* Header */
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-phone-text { display: none; }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: var(--space-16) var(--space-12);
    gap: var(--space-10);
  }

  .hero-title { font-size: clamp(72px, 10vw, 96px); }
  .year-decor { font-size: clamp(240px, 34vw, 360px); right: -30px; bottom: -10px; -webkit-text-stroke: 1.2px rgba(255,255,255,0.22); }

  .hero-cert-stack { max-width: 420px; }
  .hero-trust { gap: var(--space-8); }
  .hero-actions .btn-outline-white { display: none; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); }

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

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-visual { max-width: 500px; margin-inline: auto; }

  /* CTA */
  .cta-inner { flex-direction: column; text-align: center; align-items: center; }
  .cta-subtitle { max-width: 100%; }

  /* Contact */
  .contact-teaser-grid { grid-template-columns: 1fr; }
  .contact-page-grid { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Services Detail */
  .service-block { grid-template-columns: 1fr; }
  .service-block.reverse { direction: ltr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer-brand { grid-column: span 2; }
  .footer-grid > div:last-child { grid-column: auto; }
}

/* ── Tablet Portrait (768px) ── */
@media (max-width: 767px) {
  :root {
    --container-padding: var(--space-4);
    --nav-height: 64px;
  }

  /* Sections */
  .section { padding-block: var(--space-16); }
  .section-lg { padding-block: var(--space-20); }
  .section-header { margin-bottom: var(--space-10); }

  /* Typography */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }

  /* Hero */
  .hero-title { font-size: clamp(44px, 11vw, 72px); }
  .year-decor { font-size: clamp(140px, 42vw, 220px); right: -20px; bottom: -10px; -webkit-text-stroke: 1px rgba(255,255,255,0.18); }
  .hero-scroll { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-actions .btn-hero-budget { display: none; }
  .hero-trust { gap: var(--space-5); }
  .hero-trust-number { font-size: var(--text-2xl); }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: var(--space-5); }
  .stat-item:nth-child(3) { border-bottom: none; }
  .stat-item:nth-child(4) { border-right: none; }

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

  /* Services grid on tablet: 1 column */
  .projects-grid { grid-template-columns: repeat(2, 1fr); }

  /* About */
  .about-year-badge { right: var(--space-3); bottom: var(--space-3); }

  /* Certifications */
  .certs-grid { gap: var(--space-4); }
  .cert-badge { min-width: 130px; padding: var(--space-5); }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Contact page */
  .contact-page-grid { gap: var(--space-6); }
  .contact-form { padding: var(--space-6); }
  .contact-detail-card { padding: var(--space-6); gap: var(--space-5); }
  .page-hero-subtitle { font-size: var(--text-base); }

  /* Values */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-grid > div:last-child { grid-column: span 1; border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }

  /* CTA actions */
  .cta-actions { flex-direction: column; width: 100%; align-items: center; }
  .cta-actions .btn { width: 100%; max-width: 320px; }

  /* Page hero */
  .page-hero {
    padding-top: calc(var(--nav-height) + var(--space-10));
    padding-bottom: var(--space-10);
  }

  /* Timeline */
  .timeline { padding-left: var(--space-8); }
  .timeline::before { left: 12px; }
  .timeline-dot { left: calc(-1 * var(--space-8) + 4px); }

  /* Back to top */
  .back-to-top { bottom: var(--space-5); right: var(--space-5); }
}

/* ── Mobile (640px) ── */
@media (max-width: 639px) {
  /* Logo — hide tagline on very small */
  .logo-text .tagline-logo { display: none; }

  /* Hero */
  .hero-inner { padding-block: var(--space-12) var(--space-10); gap: var(--space-8); }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-child(1),
  .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) { border-bottom: none; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; }
  .projects-filter { flex-direction: row; overflow-x: auto; padding-bottom: var(--space-2); flex-wrap: nowrap; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Hero trust */
  .hero-trust { flex-direction: column; gap: var(--space-4); }
  .hero-trust-item { flex-direction: row; align-items: center; gap: var(--space-4); }
  .hero-trust-number { font-size: var(--text-2xl); }

  /* Cert cards  */
  .cert-card { padding: var(--space-3) var(--space-4); }

  /* Header phone — hide text on small */
  .header-phone { display: none; }

  /* Header CTA btn causes overflow at this width — it's in mobile menu */
  .header-cta .btn-sm { display: none; }
}

/* ── Small Mobile (375px) ── */
@media (max-width: 375px) {
  :root { --container-padding: var(--space-3); }

  .hero-title { font-size: clamp(40px, 10vw, 56px); }
  .year-decor { font-size: clamp(120px, 40vw, 160px); }
  .btn-lg { padding: 14px 24px; font-size: var(--text-base); }
  .certs-grid { justify-content: center; }
  .cert-badge { min-width: 120px; }

  /* Contact page — small mobile */
  .contact-form,
  .contact-detail-card { padding: var(--space-4); border-radius: var(--radius-lg); }
}

/* ── Touch improvements ── */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 48px; }
  .nav-link, .footer-link { min-height: 44px; display: flex; align-items: center; }
  .filter-btn { min-height: 44px; }
  .mobile-nav-link { min-height: 52px; }
  .form-input, .form-textarea, .form-select { min-height: 52px; }
  .card:hover { transform: none; box-shadow: var(--shadow-md); }
  .service-card:hover { transform: none; }
  .news-card:hover { transform: none; }
  .cert-badge:hover { transform: none; }
}

/* ── Landscape mobile: hide 1954 if height too tight ── */
@media (max-height: 500px) and (orientation: landscape) {
  .year-decor { display: none; }
}

/* ── Print ── */
@media print {
  .site-header,
  .hero-scroll,
  .back-to-top,
  .mobile-menu,
  .menu-toggle,
  .cta-section { display: none !important; }

  body { font-size: 12pt; color: #000; }
  .hero { min-height: auto; background: #fff; }
  .hero-title, .hero-subtitle { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}