/* ==========================================================================
   ESAC — Escuela de Acústica de Car Audio
   responsive.css — Adaptabilidad Multipantalla según Medidas Estándar
   ========================================================================== */

/* ==========================================================================
   1. MOBILE (Dispositivos Móviles: smartphones portrait y compactos)
   @media (max-width: 575.98px)
   ========================================================================== */
@media (max-width: 575.98px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body {
    display: block;
  }

  .page-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    padding: clamp(1.25rem, 4vw, 1.6rem) clamp(1rem, 3.5vw, 1.35rem) clamp(1.25rem, 4vw, 1.6rem);
    justify-content: flex-start;
    gap: clamp(1.25rem, 2.5vh, 1.75rem);
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  /* Logotipo y Encabezado */
  .brand-header {
    margin-bottom: 0.25rem;
    width: 100%;
  }

  .brand-logo {
    max-width: min(280px, 80vw);
  }

  .brand-subtitle {
    font-size: clamp(0.68rem, 2.4vw, 0.78rem);
    letter-spacing: clamp(0.12em, 0.4vw, 0.18em);
    margin-top: 0.25rem;
  }

  /* Bloque de Título Central */
  .main-content {
    max-width: 100%;
    width: 100%;
    gap: clamp(0.6rem, 1.5vh, 0.95rem);
  }

  .title-section {
    width: 100%;
  }

  .tagline-wrapper {
    gap: 0.6rem;
    width: 100%;
  }

  .tag-text {
    font-size: clamp(1rem, 3.4vw, 1.18rem);
    letter-spacing: 0.14em;
  }

  .tag-line {
    max-width: clamp(40px, 12vw, 75px);
    height: 2px;
  }

  .main-heading {
    font-size: clamp(2.3rem, 9.2vw, 3rem);
    line-height: 1.02;
    margin: 0.15rem 0 0.2rem;
  }

  .heading-glow-bar {
    width: 85%;
    max-width: 320px;
    margin: 0.2rem auto 0.75rem;
  }

  .main-description {
    font-size: clamp(0.92rem, 2.8vw, 1.02rem);
    line-height: 1.45;
    max-width: 100%;
    padding: 0 0.25rem;
  }

  /* Insignia Central Hexagonal */
  .badge-section {
    margin: 0.5rem 0 0.4rem;
    gap: 0.35rem;
  }

  .hexagon-badge {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  .hexagon-badge i {
    font-size: 1.2rem;
  }

  .badge-subtitle {
    font-size: clamp(0.95rem, 2.8vw, 1.05rem);
    letter-spacing: 0.1em;
  }

  .badge-tagline {
    font-size: clamp(0.95rem, 2.8vw, 1.05rem);
    letter-spacing: 0.06em;
  }

  /* Llamado a la Acción y Redes Sociales */
  .cta-section {
    gap: 0.75rem;
    width: 100%;
    transform: none;
    margin: 0 auto;
  }

  .cta-card {
    padding: 0.7rem 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 0.75rem;
  }

  .cta-icon-wrapper {
    font-size: 1.35rem;
    min-width: 28px;
  }

  .cta-text-content {
    text-align: center;
  }

  .cta-headline {
    font-size: clamp(0.88rem, 2.6vw, 0.95rem);
    line-height: 1.25;
  }

  .cta-subtext {
    font-size: clamp(0.78rem, 2.3vw, 0.85rem);
  }

  .social-nav {
    width: 100%;
  }

  .social-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.6rem, 2.8vw, 1rem);
    flex-wrap: wrap;
  }

  .social-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.15rem;
  }

  /* Hardware como Escenario Ambiental de Fondo */
  .hardware-stage {
    opacity: 0.2;
    filter: blur(2px);
  }

  .hardware-subwoofer {
    width: 42vw;
    max-width: 190px;
    top: 1%;
    left: -16%;
  }

  .hardware-amplifier {
    width: 58vw;
    max-width: 300px;
    top: 8%;
    right: -25%;
  }

  .hardware-player {
    width: 38vw;
    max-width: 170px;
    top: 14%;
    bottom: auto;
    left: -14%;
  }

  .hardware-speakers {
    width: 40vw;
    max-width: 180px;
    top: 32%;
    bottom: auto;
    right: -14%;
  }

  /* Pie de Página: Contacto y Ubicación */
  .site-footer {
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
  }

  .contact-block,
  .location-block {
    transform: none;
  }

  .footer-block {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
    width: 100%;
  }

  .footer-icon-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 1.2rem;
    margin: 0 auto;
  }

  .footer-block-info {
    text-align: center;
    width: 100%;
  }

  .footer-block-title {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 0.15rem;
  }

  .footer-block-text {
    font-size: 0.88rem;
    text-align: center;
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   Ajuste Fino para Pantallas Móviles Ultra Compactas (<= 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .page-wrapper {
    padding: 1.15rem 0.8rem 1.15rem;
    gap: 1.15rem;
  }

  .brand-logo {
    max-width: 220px;
  }

  .tag-text {
    font-size: 0.95rem;
  }

  .tag-line {
    max-width: 40px;
  }

  .main-heading {
    font-size: 2.1rem;
  }

  .heading-glow-bar {
    max-width: 250px;
  }

  .main-description {
    font-size: 0.88rem;
  }

  .badge-subtitle,
  .badge-tagline {
    font-size: 0.92rem;
  }

  .cta-card {
    padding: 0.65rem 0.8rem;
    gap: 0.6rem;
  }

  .social-list {
    gap: 0.5rem;
  }

  .social-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   TRANSICIÓN: MÓVILES LARGOS / TABLETS PEQUEÑAS (576px - 767.98px)
   ========================================================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body {
    display: block;
  }

  .page-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    padding: 1.75rem 1.5rem 1.5rem;
    justify-content: flex-start;
    gap: 1.5rem;
    overflow: visible;
  }

  .main-content {
    max-width: 520px;
    gap: 0.85rem;
  }

  .brand-logo {
    max-width: 280px;
  }

  .brand-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
  }

  .main-heading {
    font-size: clamp(2.5rem, 6.8vw, 3.2rem);
    line-height: 1;
  }

  .heading-glow-bar {
    max-width: 360px;
  }

  .main-description {
    font-size: 1rem;
    line-height: 1.45;
  }

  .hardware-stage {
    opacity: 0.3;
    filter: blur(1.5px);
  }

  .hardware-subwoofer {
    max-width: 210px;
    top: 3%;
    left: -10%;
  }

  .hardware-amplifier {
    max-width: 320px;
    top: 9%;
    right: -18%;
  }

  .hardware-player {
    max-width: 190px;
    top: 18%;
    bottom: auto;
    left: -8%;
  }

  .hardware-speakers {
    max-width: 200px;
    top: 36%;
    bottom: auto;
    right: -8%;
  }

  .cta-section {
    gap: 0.8rem;
    width: 100%;
    transform: none;
    margin: 0 auto;
  }

  .cta-card {
    padding: 0.7rem 1.2rem;
    max-width: 440px;
  }

  .social-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    font-size: 1.15rem;
  }

  .site-footer {
    margin-top: auto;
    padding-top: 1.2rem;
  }

  .footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 1.2rem;
  }

  .contact-block,
  .location-block {
    transform: none;
  }

  .footer-block {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }
}

/* ==========================================================================
   2. TABLET (Tablets en orientación vertical y horizontal)
   @media (min-width: 768px) and (max-width: 991.98px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  body {
    display: block;
  }

  .page-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    padding: 2rem 2rem 1.8rem;
    justify-content: flex-start;
    gap: 1.6rem;
    overflow: visible;
  }

  .main-content {
    max-width: 620px;
    gap: 1rem;
  }

  .brand-header {
    margin-bottom: 0.4rem;
  }

  .brand-logo {
    max-width: 300px;
  }

  .brand-subtitle {
    font-size: 0.88rem;
    letter-spacing: 0.16em;
  }

  .tag-text {
    font-size: 1.15rem;
    letter-spacing: 0.14em;
  }

  .main-heading {
    font-size: clamp(2.8rem, 6vw, 3.6rem);
    line-height: 1;
    margin: 0.15rem 0 0.25rem;
  }

  .heading-glow-bar {
    max-width: 400px;
    margin: 0.2rem auto 0.8rem;
  }

  .main-description {
    font-size: 1.05rem;
    max-width: 560px;
    line-height: 1.45;
  }

  .badge-section {
    margin: 0.6rem 0;
    gap: 0.35rem;
  }

  .hexagon-badge {
    width: 48px;
    height: 48px;
  }

  .hexagon-badge i {
    font-size: 1.25rem;
  }

  .badge-subtitle,
  .badge-tagline {
    font-size: 1.05rem;
  }

  .cta-section {
    gap: 0.85rem;
    width: 100%;
    transform: none;
    margin: 0 auto;
  }

  .cta-card {
    padding: 0.75rem 1.35rem;
    max-width: 450px;
  }

  .social-list {
    gap: 1rem;
  }

  .social-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
  }

  /* Hardware como Escenario Atmosférico */
  .hardware-stage {
    opacity: 0.45;
    filter: blur(1px);
  }

  .hardware-subwoofer {
    width: 32vw;
    max-width: 250px;
    top: 4%;
    left: -8%;
  }

  .hardware-amplifier {
    width: 45vw;
    max-width: 380px;
    top: 10%;
    right: -16%;
  }

  .hardware-player {
    width: 28vw;
    max-width: 220px;
    top: 22%;
    bottom: auto;
    left: -6%;
  }

  .hardware-speakers {
    width: 30vw;
    max-width: 230px;
    top: 38%;
    bottom: auto;
    right: -6%;
  }

  /* Pie de Página */
  .site-footer {
    margin-top: auto;
    padding-top: 1.5rem;
  }

  .footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 1.5rem;
  }

  .contact-block,
  .location-block {
    transform: none;
  }

  .footer-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
  }

  .footer-icon-circle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 1.25rem;
  }

  .footer-block-title {
    font-size: 0.95rem;
  }

  .footer-block-text {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   3. DESKTOP (Laptops estándar y monitores de escritorio medianos)
   @media (min-width: 992px) and (max-width: 1199.98px)
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html,
  body {
    height: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .page-wrapper {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    padding: 1.4rem 2rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
  }

  .main-content {
    max-width: 680px;
    gap: 0.7rem;
  }

  .brand-header {
    margin-bottom: 0.2rem;
  }

  .brand-logo {
    max-width: 310px;
  }

  .brand-subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.18em;
  }

  .tag-text {
    font-size: 1.12rem;
  }

  .main-heading {
    font-size: clamp(3rem, 4.2vw, 3.8rem);
    line-height: 0.95;
    margin: 0.1rem 0 0.2rem;
  }

  .heading-glow-bar {
    max-width: 420px;
    margin: 0.15rem auto 0.6rem;
  }

  .main-description {
    font-size: 1rem;
    max-width: 560px;
    line-height: 1.4;
  }

  .badge-section {
    margin: 0.4rem 0;
    gap: 0.3rem;
  }

  .hexagon-badge {
    width: 44px;
    height: 44px;
  }

  .hexagon-badge i {
    font-size: 1.15rem;
  }

  .badge-subtitle,
  .badge-tagline {
    font-size: 1rem;
  }

  .cta-section {
    gap: 0.65rem;
    width: 90%;
    transform: translateY(-3%);
    margin: 0 auto;
  }

  .cta-card {
    padding: 0.6rem 1.2rem;
    max-width: 420px;
  }

  .cta-headline {
    font-size: 0.92rem;
  }

  .cta-subtext {
    font-size: 0.85rem;
  }

  .social-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 1.1rem;
  }

  /* Hardware Flanqueante Calibrado */
  .hardware-stage {
    opacity: 0.9;
  }

  .hardware-subwoofer {
    width: 25vw;
    max-width: 310px;
    top: 12%;
    left: -5%;
  }

  .hardware-amplifier {
    width: 38vw;
    max-width: 470px;
    top: 19%;
    right: -13%;
  }

  .hardware-player {
    width: 21vw;
    max-width: 270px;
    top: calc(8% + 20vw);
    bottom: auto;
    left: -3%;
  }

  .hardware-speakers {
    width: 22vw;
    max-width: 285px;
    top: calc(30% + 8vw);
    bottom: auto;
    right: -3%;
  }

  /* Pie de Página */
  .site-footer {
    padding-top: 0.3rem;
    margin-top: auto;
  }

  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .footer-icon-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 1.15rem;
  }

  .footer-block-title {
    font-size: 0.9rem;
  }

  .footer-block-text {
    font-size: 0.84rem;
  }
}

/* ==========================================================================
   4. EXTRA LARGE DEVICES (Pantallas Grandes, Monitores 1080p, 2K y 4K)
   @media (min-width: 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  html,
  body {
    height: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .page-wrapper {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 3rem 1.2rem;
    overflow: hidden;
  }

  .main-content {
    max-width: 820px;
    gap: clamp(0.5rem, 1.2vh, 1rem);
  }

  .brand-logo {
    max-width: 340px;
  }

  .brand-subtitle {
    font-size: 1.05rem;
    letter-spacing: 0.22em;
  }

  .tag-text {
    font-size: 1.2rem;
    letter-spacing: 0.18em;
  }

  .main-heading {
    font-size: clamp(3.8rem, 4.5vw, 4.8rem);
    line-height: 0.95;
    margin: 0.1rem 0 0.2rem;
  }

  .heading-glow-bar {
    max-width: 480px;
    margin: 0.15rem auto 0.75rem;
  }

  .main-description {
    font-size: 1.08rem;
    max-width: 620px;
    line-height: 1.4;
  }

  .badge-section {
    margin: 0.5rem 0 0.45rem;
    gap: 0.35rem;
  }

  .hexagon-badge {
    width: 48px;
    height: 48px;
  }

  .hexagon-badge i {
    font-size: 1.25rem;
  }

  .badge-subtitle,
  .badge-tagline {
    font-size: 1.05rem;
  }

  .cta-section {
    gap: 0.75rem;
    width: 85%;
    transform: translateY(-5%);
    margin: 0 auto;
  }

  .cta-card {
    padding: 0.65rem 1.35rem;
    max-width: 440px;
  }

  .social-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    font-size: 1.15rem;
  }

  /* Hardware Flanqueante en Pantallas Grandes */
  .hardware-stage {
    opacity: 1;
  }

  .hardware-subwoofer {
    width: 27vw;
    max-width: 390px;
    top: 11%;
    left: -4%;
  }

  .hardware-amplifier {
    width: 42vw;
    max-width: 600px;
    top: 18%;
    right: -13%;
  }

  .hardware-player {
    width: 23vw;
    max-width: 330px;
    top: calc(6% + 23vw);
    bottom: auto;
    left: -2%;
  }

  .hardware-speakers {
    width: 24vw;
    max-width: 345px;
    top: calc(31% + 8.5vw);
    bottom: auto;
    right: -2%;
  }

  /* Pie de Página */
  .site-footer {
    padding-top: 0.4rem;
    margin-top: auto;
  }

  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .footer-icon-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 1.25rem;
  }

  .footer-block-title {
    font-size: 0.95rem;
  }

  .footer-block-text {
    font-size: 0.88rem;
  }
}

/* --------------------------------------------------------------------------
   Ajuste Fino para Pantallas Ultra Panorámicas / 4K (>= 1600px y Altura >= 950px)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) and (min-height: 950px) {
  .page-wrapper {
    padding: 2.2rem 4rem 1.8rem;
  }

  .brand-logo {
    max-width: 380px;
  }

  .main-heading {
    font-size: 5.2rem;
  }

  .main-description {
    font-size: 1.2rem;
    max-width: 680px;
  }

  .hardware-subwoofer {
    max-width: 460px;
    left: -3%;
  }

  .hardware-amplifier {
    max-width: 720px;
    right: -12%;
  }

  .hardware-player {
    max-width: 380px;
    top: calc(6% + 360px);
  }

  .hardware-speakers {
    max-width: 400px;
    top: calc(31% + 120px);
  }
}

/* --------------------------------------------------------------------------
   Manejo de Altura Reducida en Escritorio (Laptops de poca altura vertical)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-height: 660px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
  }

  .page-wrapper {
    height: auto;
    min-height: 100vh;
    max-height: none;
    overflow: visible;
    padding: 1rem 2rem;
    gap: 1rem;
  }

  .cta-section {
    transform: none;
  }

  .contact-block {
    transform: none;
  }
}