/* ==========================================================================
   SOLUCIONES HOSPITALARIAS — RESPONSIVE PRECISION ADAPTATION
   Versión: 3.0 (Centrado Espacial Unificado & Zero Override de Posicionamiento)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. WIDESCREEN & DESKTOP GRANDE (> 1440px)
   -------------------------------------------------------------------------- */
@media (min-width: 1441px) {
  .hero-h1 {
    font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  }

  .product-depth-hero {
    width: clamp(260px, 24vw, 360px);
  }

  .product-depth-mid {
    width: clamp(200px, 18vw, 280px);
  }

  .product-depth-far {
    width: clamp(150px, 13vw, 200px);
  }
}

/* --------------------------------------------------------------------------
   02. LAPTOPS & DESKTOP MEDIANO (1025px - 1440px)
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) and (min-width: 1025px) {
  .product-depth-hero {
    width: clamp(220px, 20vw, 300px);
  }

  .product-depth-mid {
    width: clamp(170px, 16vw, 230px);
  }

  .product-depth-far {
    width: clamp(130px, 12vw, 170px);
  }
}

/* --------------------------------------------------------------------------
   03. TABLETS LANDSCAPE & SCREENS MEDIANAS (901px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 901px) {
  .hero-section {
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 2rem;
  }

  .hero-h1 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
  }

  .product-depth-hero {
    width: 220px;
  }

  .product-depth-mid {
    width: 170px;
  }

  .product-depth-far {
    width: 130px;
  }
}

/* --------------------------------------------------------------------------
   04. TABLETS PORTRAIT (641px - 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (min-width: 641px) {
  .hero-section {
    padding-top: calc(var(--nav-height) + 1rem);
    padding-bottom: 2rem;
  }

  .hero-content-wrapper {
    padding: 0 var(--space-4);
  }

  .hero-message-theatre {
    min-height: 180px;
  }

  .hero-h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  }

  .product-depth-hero {
    width: 190px;
  }

  .product-depth-mid {
    width: 150px;
  }

  .product-depth-far {
    width: 115px;
  }

  .cloud-bank-left,
  .cloud-bank-right {
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   05. SMARTPHONES & MOBILES (max-width: 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header {
    padding: 0.75rem 0;
  }

  .brand-logo-img {
    height: 28px;
  }

  .hero-section {
    padding-top: calc(var(--nav-height) + 0.5rem);
    padding-bottom: 1.5rem;
  }

  .hero-content-wrapper {
    padding: 0 var(--space-3);
  }

  .hero-message-theatre {
    min-height: 150px;
  }

  .hero-h1 {
    font-size: clamp(1.7rem, 6.5vw, 2.2rem);
    margin-bottom: 0.5rem;
    line-height: 1.15;
  }

  .hero-subhead {
    font-size: var(--text-sm);
    line-height: 1.55;
    padding: 0 var(--space-1);
    max-width: 100%;
  }

  .product-depth-hero {
    width: 160px;
  }

  .product-depth-mid {
    width: 125px;
  }

  .product-depth-far {
    width: 95px;
  }

  .hero-bottom-actions {
    padding-top: 0.5rem;
  }

  .hero-cta-cluster {
    flex-direction: column;
    width: 100%;
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }

  .hero-cta-cluster .btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
  }

  /* GPU Performance: Optimización selectiva de capas */
  .cloud-bank-left {
    display: none;
  }

  .cloud-bank-horizon {
    height: 32vh;
    opacity: 0.8;
  }

  .cloud-veil-foreground {
    height: 22vh;
  }
}

/* --------------------------------------------------------------------------
   06. PANTALLAS ULTRA PEQUEÑAS (max-width: 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .hero-h1 {
    font-size: 1.5rem;
  }

  .product-depth-hero {
    width: 140px;
  }

  .product-depth-mid {
    width: 110px;
  }

  .product-depth-far {
    width: 85px;
  }

  .story-tab-btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.72rem;
  }

  .cta-heading {
    font-size: 2rem;
  }

  .btn-cta-whatsapp {
    padding: 0.9rem 1.4rem;
    font-size: var(--text-sm);
  }
}

/* --------------------------------------------------------------------------
   07. STORY & WHY US & CTA GENERAL RESPONSIVE ENHANCEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .story-nav-tabs {
    gap: 0.4rem;
  }

  .story-tab-btn {
    padding: 0.6rem 1rem;
  }

  .cta-actions-cluster {
    flex-direction: column;
    width: 100%;
  }

  .btn-cta-whatsapp,
  .btn-cta-catalog {
    width: 100%;
    justify-content: center;
  }

  .cta-pills-grid {
    gap: 0.45rem;
  }
}

/* --------------------------------------------------------------------------
   08. EXPERIENCIAS & REVIEWS VORTEX GALAXY RESPONSIVE ENHANCEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .reviews-stage-container {
    height: clamp(480px, 70vh, 560px);
  }

  .reviews-central-hub {
    width: min(90%, 360px);
    padding: var(--space-2);
  }

  .review-vortex-tile {
    width: clamp(140px, 22vw, 175px);
    padding: 0.95rem;
    border-radius: 16px;
  }

  .review-tile-text {
    font-size: 0.78rem;
    line-height: 1.45;
  }
}

@media (max-width: 480px) {
  .reviews-stage-container {
    height: 480px;
  }

  .reviews-central-hub {
    width: 92%;
    padding: 0.85rem;
  }

  .reviews-hub-title {
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .reviews-hub-subtitle {
    font-size: 0.8rem;
  }

  .review-vortex-tile {
    width: 135px;
    padding: 0.8rem;
    border-radius: 14px;
  }

  .review-tile-quote-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 0.25rem;
  }

  .review-tile-quote-icon svg {
    width: 18px;
    height: 18px;
  }

  .review-tile-text {
    font-size: 0.7rem;
    -webkit-line-clamp: 3;
    line-height: 1.35;
  }

  .review-tile-verified {
    display: none;
  }
}