/* CNA — mobile/tablet overrides only. Desktop >= 993px remains unchanged. */
@media (max-width: 992px) {
  html, body {max-width:100%; overflow-x:clip;}
  .hero {min-height:auto;}
  .hero .container {gap:1.5rem;}
  .hero-visual {padding-bottom:0;}
  .hero-card {max-width:540px;}
  .why,.services,.projects,.process,.about,.cta,.contact {padding-top:5rem;padding-bottom:5rem;}
  .projects-grid {gap:1.25rem;margin-top:2rem;}
  .section-header {margin-bottom:1.5rem;}
  .cta-scene {min-height:auto;}
  .cta-box {padding:3.5rem 2rem;}
  .contact-grid {gap:2.5rem;}
  .footer {padding-top:4rem;}
}
@media (max-width: 600px) {
  .hero {padding-top:92px;padding-bottom:3rem;}
  .hero .container {gap:1.35rem;}
  .hero-title {font-size:clamp(2.35rem,11vw,3.6rem);line-height:1.05;}
  .hero-description {margin-top:1rem;font-size:.94rem;line-height:1.55;}
  .hero-benefits {margin-top:1rem;gap:.35rem;}
  .hero-buttons {margin-top:1.25rem;gap:.65rem;}
  .hero-card {padding:1.25rem;}
  .hero-card h3 {font-size:1.45rem;}
  .hero-card p {line-height:1.55;}
  .hero-visual::before {width:260px;height:260px;}
  .why,.services,.projects,.process,.about,.cta,.contact {padding-top:3.5rem;padding-bottom:3.5rem;}
  .section-title {line-height:1.13;}
  .why-grid,.services-grid,.projects-grid {gap:1rem;margin-top:1.5rem;}
  .why-card,.service-card {padding:1.35rem;}
  .service-features {margin-top:.85rem;}
  .project-card {border-radius:20px;}
  .project-image {aspect-ratio:16/9;}
  .project-content {padding:1.15rem 1.2rem 1.35rem;}
  .project-content p {line-height:1.55;}
  .process-timeline {margin-top:1.5rem;}
  .process-card-body {padding:1.15rem;}
  .about-visual {height:300px;max-width:100%;}
  .about-floating-card {min-width:0;}
  .cta-box {padding:2.6rem 1.2rem;}
  .cta-box .section-title {font-size:clamp(2rem,9vw,3rem);}
  .cta-box .section-description {margin-top:1rem;line-height:1.6;}
  .cta-buttons {margin-top:1.5rem;gap:.75rem;}
  .contact-details {margin-top:1.5rem;gap:.75rem;}
  .contact-item {min-height:72px;}
  .contact-form {padding:1.25rem;gap:.9rem;}
  .footer {padding-top:3rem;}
  .footer-grid {gap:2rem;}
}
@media (prefers-reduced-motion: reduce) { html {scroll-behavior:auto;} }

/* Mobile-only swipe carousels: desktop rules and markup remain intact. */
@media (max-width: 600px) {
  .why-grid, .services-grid, .projects-grid {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:14px !important;
    overflow-x:auto !important;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:6px 0 18px !important;
    align-items:stretch;
  }
  .why-grid::-webkit-scrollbar,.services-grid::-webkit-scrollbar,.projects-grid::-webkit-scrollbar {display:none;}
  .why-grid > *, .services-grid > *, .projects-grid > * {
    flex:0 0 87% !important;
    width:87% !important;
    min-width:0 !important;
    max-width:none !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    margin:0 !important;
    transform:none;
  }
  .why-grid > *:last-child,.services-grid > *:last-child,.projects-grid > *:last-child {margin-right:2px !important;}
  .projects-grid .project-image {aspect-ratio:16/10;}
  .mobile-carousel-dots {display:flex;align-items:center;justify-content:center;gap:9px;margin:4px auto 0;min-height:20px;}
  .mobile-carousel-dots button {width:7px;height:7px;border-radius:99px;padding:0;border:0;background:rgba(135,192,225,.38);transition:width .2s,background .2s;cursor:pointer;}
  .mobile-carousel-dots button[aria-current="true"] {width:23px;background:#53d6ff;}
}
@media (min-width: 601px) {.mobile-carousel-dots {display:none !important;}}

/* CNA mobile final pass: projects, About and Contact only. */
@media (max-width:600px) {
  /* Force Projects into a genuine swipe track even when component rules use grid. */
  #projects .projects-grid {
    display:flex !important; grid-template-columns:none !important;
    flex-direction:row !important; flex-wrap:nowrap !important;
    width:100%; max-width:100%; overflow-x:auto !important; overflow-y:hidden !important;
    gap:14px !important; scroll-snap-type:x mandatory; scroll-padding-inline:0;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; align-items:stretch;
    padding:8px 0 20px !important;
  }
  #projects .projects-grid::-webkit-scrollbar {display:none}
  #projects .projects-grid > .project-card {
    display:flex; flex-direction:column; flex:0 0 87% !important;
    width:87% !important; min-width:87% !important; max-width:87% !important;
    margin:0 !important; scroll-snap-align:start; transform:none !important;
  }
  #projects .project-card .project-content {flex:1}
  /* About: replace desktop absolute holograms with tidy mobile rows. */
  #about .about-grid {display:flex !important; flex-direction:column !important; gap:1.25rem !important; align-items:stretch !important;}
  #about .about-content {width:100%; min-width:0;}
  #about .about-content p {line-height:1.65; margin-top:.9rem;}
  #about .about-content .about-text {margin-bottom:1.35rem;}
  #about .about-visual {
    position:relative !important; display:grid !important; grid-template-columns:1fr !important;
    gap:10px !important; width:100% !important; height:auto !important;
    min-height:0 !important; padding:0 !important; margin:1rem 0 0 !important;
    overflow:visible; perspective:none;
  }
  #about .about-visual .about-floating-card,
  #about .about-visual .about-floating-card.reveal.is-visible {
    position:relative !important; inset:auto !important; top:auto !important; left:auto !important;
    right:auto !important; bottom:auto !important; display:flex !important;
    width:100% !important; max-width:100% !important; min-width:0 !important;
    margin:0 !important; padding:13px 15px !important; transform:none !important;
    animation:none !important; transition:border-color .2s ease !important;
  }
  #about .about-floating-card::before,#about .about-floating-card::after {display:none !important;}
  #about .about-values {grid-template-columns:1fr !important; gap:14px !important; margin-top:1.75rem !important; padding-top:1.25rem !important;}
  #about .about-value {border-right:0 !important; padding:0 !important;}
  #about .about-value-icon {width:46px; height:46px;}
  /* Contact: slide one is all four contact options; slide two is the working form. */
  #contact .contact-grid {
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:stretch !important; gap:14px !important;
    width:100% !important; max-width:100% !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:5px 0 18px !important;
  }
  #contact .contact-grid::-webkit-scrollbar {display:none}
  #contact .contact-grid > .contact-info,
  #contact .contact-grid > .contact-form {
    flex:0 0 100% !important; width:100% !important; min-width:100% !important;
    max-width:100% !important; scroll-snap-align:start;
    margin:0 !important; box-sizing:border-box;
  }
  #contact .contact-info .contact-details {margin-top:1.2rem; gap:.65rem;}
  #contact .contact-item {min-height:66px; padding:.75rem;}
  #contact .contact-form {align-self:start;}
  #contact .contact-carousel-hint {font-size:.82rem; color:#9acbe8; margin:1rem 0 0; text-align:center;}
  #contact .contact-carousel-dots {margin-top:3px;}
}

/* Ajuste solicitado: SOLO Proceso y legibilidad de Sobre CNA en móviles. */
@media (max-width:600px) {
  #process .process-wave {display:none !important;}
  #process .process-grid {
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    gap:14px !important; overflow-x:auto !important; overflow-y:hidden !important;
    width:100% !important; max-width:100% !important;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:8px 0 18px !important; align-items:stretch !important;
  }
  #process .process-grid::-webkit-scrollbar {display:none;}
  #process .process-grid > .process-step {
    flex:0 0 87% !important; width:87% !important; min-width:87% !important;
    max-width:87% !important; margin:0 !important; position:relative !important;
    transform:none !important; scroll-snap-align:start; scroll-snap-stop:always;
    display:flex !important; flex-direction:column !important;
  }
  #process .process-step .process-card {width:100% !important; max-width:100% !important; margin:0 !important; flex:1;}
  #process .process-step .process-icon {position:relative !important; inset:auto !important; margin:0 auto 12px !important; transform:none !important;}
  #about {background-image:linear-gradient(180deg,rgba(3,7,20,.88),rgba(3,7,20,.91)),url('../../assets/images/about-bg.png') !important;}
  #about::before {background:rgba(2,7,20,.35) !important;}
  #about .about-content p {color:#f0f5ff !important; text-shadow:0 1px 3px rgba(0,0,0,.6);}
}

/* Contact mobile: fixed introduction; only contact cards and form swipe. */
.contact-mobile-heading {display:none;}
@media (max-width:600px) {
  #contact .contact-mobile-heading {display:block; margin-bottom:1.4rem; position:relative; z-index:1;}
  #contact .contact-mobile-heading .section-label {display:block;}
  #contact .contact-mobile-heading .section-title {font-size:clamp(2.15rem,10vw,3.15rem);line-height:1.08;margin-top:1rem;}
  #contact .contact-mobile-heading .section-description {font-size:.96rem;line-height:1.6;margin-top:1rem;max-width:100%;}
  #contact .contact-desktop-heading {display:none !important;}
  #contact .contact-grid {margin-top:0 !important;}
  #contact .contact-grid > .contact-info {align-self:flex-start;}
  #contact .contact-info .contact-details {margin-top:0 !important;}
  #contact .contact-form {padding:1rem !important;gap:.65rem !important;border-radius:22px;}
  #contact .contact-form-header {gap:.7rem;margin-bottom:.2rem;}
  #contact .contact-form-header h3 {font-size:1.1rem;}
  #contact .contact-form-header p {font-size:.84rem;line-height:1.45;}
  #contact .contact-field {min-height:48px;}
  #contact .contact-field input {min-height:48px;font-size:16px;}
  #contact .contact-field-textarea textarea {min-height:105px;height:105px;font-size:16px;}
  #contact .contact-submit {min-height:52px;}
  #contact .contact-privacy {font-size:.74rem;line-height:1.4;}
}