/* =========================================
   BOLTING SERVICES — RESPONSIVE
   ========================================= */


/* =========================================
   TABLET — HASTA 1100px
   ========================================= */

@media (max-width: 1100px) {

  /* HEADER */

  .header-container {
    gap: 20px;
  }

  .header-logo img {
    width: 175px;
  }

  .main-nav {
    gap: 20px;
  }

  /* INICIO */

  .hero h1 {
    font-size: clamp(48px, 5vw, 64px);
  }

  .unit-body {
    padding: 27px 23px;
  }

  .expertise-content {
    padding-left: 5vw;
  }

  .expertise h2 {
    font-size: 62px;
  }

  /* NOSOTROS */

  .nos-about-grid,
  .nos-training-grid {
    gap: 40px;
  }

  .nos-about-image {
    height: 500px;
  }

  .nos-standards-grid {
    gap: 12px;
  }

  .nos-stat {
    padding: 30px 22px;
  }

  .nos-purpose-card {
    padding: 35px;
  }

  .nos-values-orbit {
    transform: scale(.85);
    transform-origin: center;
    margin: -80px 0;
  }

  /* SERVICIOS */

  .rental-layout {
    grid-template-rows: repeat(2, 270px);
  }

  .rental-hex {
    height: 260px;
  }

  .rental-hex h3 {
    font-size: 27px;
  }

  .servicios-area-header {
    gap: 25px;
  }

}


/* =========================================
   TABLET — HASTA 1000px
   ========================================= */

@media (max-width: 1000px) {

  /* SERVICIOS */

  .servicios-area-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rental-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 18px;
  }

  .rental-intro,
  .rental-01,
  .rental-02,
  .rental-03,
  .rental-04,
  .rental-05 {
    grid-column: auto;
    grid-row: auto;
  }

  .rental-intro {
    grid-column: 1 / -1;
    padding: 0 0 20px;
  }

  .rental-hex {
    height: 310px;
  }

  /* NOSOTROS */

  .nos-standards-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .nos-standards-heading > p {
    max-width: 700px;
  }

}


/* =========================================
   MOBILE — HASTA 768px
   ========================================= */

@media (max-width: 768px) {

  /* ESTILOS GENERALES */

  .section-padding {
    padding: 75px 0;
  }

  /* HEADER */

  .header-container {
    min-height: 76px;
    width: 90%;
  }

  .header-logo img {
    width: 170px;
    max-height: 58px;
  }

  .header-cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
    z-index: 102;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 20px 5% 30px;
    background: #080808;
    border-top: 1px solid #292929;
  }

  .main-nav.is-open {
    display: flex;
  }

  .nav-link {
    padding: 16px 0;
    font-size: 13px;
    border-bottom: 1px solid #252525;
  }

  .nav-link::after {
    bottom: 0;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }


  /* =====================================
     INICIO
     ===================================== */

  .hero {
    min-height: 600px;
    height: auto;
    max-height: none;
    align-items: flex-start;
  }

  .hero-background img {
    content: url("../assets/imagenes/hero_mobile.png");
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 35%,
      rgba(255,255,255,.65) 58%,
      rgba(255,255,255,.04) 100%
    );
  }

  .hero-container {
    width: 90%;
    padding: 70px 0 100px;
  }

  .hero-content {
    max-width: 520px;
  }

  .hero h1 {
    font-size: clamp(43px, 7vw, 60px);
  }

  .hero-content > p {
    max-width: 360px;
    margin: 25px 0;
    font-size: 14px;
  }

  .heading-split {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .section-heading h2 {
    font-size: clamp(38px, 7vw, 52px);
  }

  .heading-description {
    max-width: 520px;
  }

  .units-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .unit-card {
    height: 360px;
  }

  .unit-body {
    padding: 28px;
  }

  .unit-body h3 {
    font-size: 39px;
  }

  .unit-body p {
    max-width: 100%;
  }

  .expertise {
    grid-template-columns: 1fr;
  }

  .expertise-content {
    padding: 75px 5%;
  }

  .expertise h2 {
    font-size: clamp(45px, 8vw, 65px);
  }

  .expertise-image {
    min-height: 350px;
    height: 350px;
  }

  .expertise-image::before {
    display: none;
  }

  .home-contact {
    grid-template-columns: 1fr;
  }

  .contact-left {
    padding: 75px 5%;
  }

  .contact-left h2 {
    font-size: clamp(42px, 8vw, 60px);
  }

  .contact-right {
    min-height: 300px;
  }

  .contact-right::before {
    display: none;
  }


  /* =====================================
     NOSOTROS
     ===================================== */

  .nos-section {
    padding: 75px 0;
  }

  .nos-hero {
    min-height: auto;
    padding: 100px 0 85px;
  }

  .nos-hero h1 {
    font-size: clamp(38px, 7vw, 60px);
  }

  .nos-hero p {
    font-size: 15px;
  }

  .nosotros-page h2 {
    font-size: clamp(40px, 7vw, 60px);
  }

  .nos-about-grid,
  .nos-training-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .nos-about-image,
  .nos-training-image {
    height: 400px;
  }

  .nos-standards-grid {
    grid-template-columns: 1fr;
  }

  .nos-stat {
    min-height: auto;
  }

  .nos-purpose-grid {
    grid-template-columns: 1fr;
  }

  .nos-purpose-card {
    min-height: auto;
    padding: 35px;
  }

  .nos-purpose-card h3 {
    font-size: 50px;
  }

  .nos-values {
    padding: 65px 0;
  }

  .nos-values-orbit {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    transform: none;
  }

  .nos-values-center {
    max-width: 100%;
    margin: 0 auto 35px;
  }

  .nos-values-center h2 {
    font-size: clamp(40px, 8vw, 60px);
  }

  .nos-orbit-ring {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    animation: none;
  }

  .nos-orbit-ring::before {
    display: none;
  }

  .nos-orbit-item {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .nos-value {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: 100px;
    padding: 12px;
    animation: none;
    transform: none;
  }

  .nos-value h3 {
    font-size: 16px;
  }

  .nos-final-cta {
    padding: 80px 0;
  }

  .nos-final-cta h2 {
    font-size: clamp(40px, 7vw, 65px);
  }


  /* =====================================
     SERVICIOS
     ===================================== */

  .servicios-hero .container,
  .servicios-area .container,
  .servicios-rental .container,
  .servicios-training .container,
  .servicios-cta .container {
    width: calc(100% - 40px);
  }

  .servicios-hero {
    min-height: 560px;
  }

  .servicios-hero-contenido {
    padding: 95px 0 75px;
  }

  .servicios-hero h1 {
    font-size: clamp(42px, 8vw, 65px);
  }

  .servicios-hero-links {
    gap: 8px;
    margin-top: 35px;
  }

  .servicios-hero-links a {
    padding: 13px 15px;
    gap: 15px;
  }

  .servicios-area,
  .servicios-rental,
  .servicios-training {
    padding: 80px 0;
  }

  .services-header h2,
  .servicios-area-header h2 {
    font-size: clamp(65px, 12vw, 100px);
  }

  .services-card {
    flex-basis: 280px;
    width: 280px;
    height: 300px;
    padding: 100px 25px 30px;
  }

  .services-card h3 {
    font-size: 30px;
  }

  .rental-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }

  .rental-hex {
    height: 270px;
  }

  .rental-hex h3 {
    font-size: 25px;
  }

  .servicios-area-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .training-carrusel-track img {
    width: 200px;
  }

  .training-card summary {
    padding: 20px;
  }

  .training-card h3 {
    font-size: 24px;
  }

  .training-course-detail {
    padding: 25px 20px;
  }

  .training-course-header {
    flex-direction: column;
    gap: 20px;
  }

  .training-course-info {
    grid-template-columns: 1fr;
  }

  .training-module-content ul {
    grid-template-columns: 1fr;
  }

  .servicios-cta {
    padding: 75px 0;
  }

  .servicios-cta-contenido {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .servicios-cta h2 {
    font-size: clamp(40px, 7vw, 60px);
  }


  /* =====================================
     CONTACTO
     ===================================== */

  .contacto-principal {
    padding: 30px 20px 40px;
  }

  .contacto-container {
    max-width: 100%;
  }

  .contacto-encabezado h1 {
    font-size: clamp(32px, 6vw, 40px);
  }

  .contacto-formulario-box {
    padding: 22px;
  }

  .contacto-formulario-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .contacto-formulario-header p {
    max-width: 100%;
  }

  .contacto-formulario .form-row {
    grid-template-columns: 1fr;
    gap: 9px;
  }


  /* FOOTER */

  .footer-main {
    grid-template-columns: 1fr;
    gap: 25px;
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    width: 100%;
    padding: 0;
    border: none;
    justify-content: center;
  }

  .footer-brand > a {
    width: auto;
  }

  .footer-brand img {
    width: 245px; /* 30% menos de 350px */
    max-width: 100%;
  }

  .footer-info {
    padding: 0;
    align-items: center;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
    gap: 25px;
    margin: 10px 0 20px;
  }

  .footer-social a {
    width: 44px;
    height: 44px;
  }

  .footer-social img {
    width: 28px;
    height: 28px;
  }

  .footer-social a:nth-child(1) img,
  .footer-social a:nth-child(2) img {
    width: 42px;
    height: 42px;
  }

  .footer-contact {
    align-items: center;
  }

  .footer-contact > a,
  .footer-contact-row {
    justify-content: center;
  }

  .footer-bottom {
    text-align: center;
  }

}


/* =========================================
   MOBILE PEQUEÑO — HASTA 480px
   ========================================= */

@media (max-width: 480px) {

  /* GENERALES */

  .header-logo img {
    width: 155px;
  }

  .btn {
    padding: 15px 18px;
    gap: 15px;
    font-size: 11px;
  }

  /* INICIO */

  .hero {
    min-height: 560px;
  }

  .hero-container {
    padding-top: 60px;
  }

  .hero h1 {
    font-size: clamp(38px, 10vw, 49px);
  }

  .hero-content > p {
    font-size: 13px;
    line-height: 1.7;
  }

  .section-eyebrow {
    font-size: 10px;
    gap: 10px;
  }

  .eyebrow-line {
    width: 27px;
  }

  .section-heading h2 {
    font-size: 38px;
  }

  .unit-card {
    height: 330px;
  }

  .expertise h2 {
    font-size: 45px;
  }

  .contact-left h2 {
    font-size: 42px;
  }

  /* NOSOTROS */

  .nos-hero h1 {
    font-size: 38px;
  }

  .nos-about-image,
  .nos-training-image {
    height: 300px;
  }

  .nos-orbit-ring {
    grid-template-columns: 1fr;
  }

  .nos-value {
    min-height: 85px;
    padding: 10px;
  }

  .nos-purpose-card {
    padding: 25px;
  }

  .nos-final-cta h2 {
    font-size: 40px;
  }

  /* SERVICIOS */

  .servicios-hero h1 {
    font-size: 43px;
  }

  .servicios-hero-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .servicios-hero-links a {
    min-width: 190px;
  }

  .rental-layout {
    grid-template-columns: 1fr;
  }

  .rental-intro {
    grid-column: auto;
  }

  .rental-hex {
    height: 310px;
  }

  .training-carrusel-track img {
    width: 165px;
  }

  .training-card h3 {
    font-size: 21px;
  }

  .training-more {
    font-size: 10px;
  }

  .training-arrow {
    width: 27px;
    height: 27px;
  }

  .training-module {
    grid-template-columns: 45px 1fr;
    gap: 12px;
  }

  .training-module-number {
    font-size: 40px;
  }

  .training-course-header h4 {
    font-size: 33px;
  }

  .servicios-cta h2 {
    font-size: 40px;
  }

  /* CONTACTO */

  .contacto-principal {
    padding: 20px 12px 30px;
  }

  .contacto-formulario-box {
    padding: 18px 15px;
  }

  .contacto-formulario-header h2 {
    font-size: 27px;
  }

  .contacto-encabezado h1 {
    font-size: 33px;
  }

  /* FOOTER */

  

  .footer-contact-row > div {
    flex-wrap: wrap;
  }

}


/* =========================================
   PANTALLAS MUY PEQUEÑAS — HASTA 390px
   ========================================= */

@media (max-width: 390px) {

  .hero h1 {
    font-size: 37px;
  }

  .servicios-hero h1 {
    font-size: 39px;
  }

  .servicios-cta h2 {
    font-size: 36px;
  }

  .contacto-encabezado h1 {
    font-size: 30px;
  }

  .contacto-formulario-box {
    padding: 16px 12px;
  }

  .footer-contact-row {
    font-size: 11px;
  }

}