/* MCR CONCRETE - CSS OPTIMIZADO PARA MÓVIL */

:root {
  --red: #b71c1c;
  --text: #111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #222;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none !important;
  color: inherit;
}

/* HEADER */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #eee;
  height: 70px;
  overflow: hidden;
}

.nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 70px;
}

.mcr-logo {
  height: 100px;
  width: auto;
  display: block;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  font-weight: 800;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}

.mobile-menu {
  display: none;
}

/* HERO SECTION */
.hero {
  position: relative;
  height: 72vh;
  min-height: 520px;
  overflow: hidden;
}

.hero img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.76);
}

.hero .wrap {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1200px;
  padding: 0 32px;
  text-align: center;
  z-index: 2;
}

.hero h1 {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 72px;
  line-height: 1.05;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(0,0,0,.25);
}

.hero .lead {
  color: #fff;
  font-size: 22px;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.hero .kicker {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: #c41e3a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* HERO TABS */
.hero-tabs-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 0 10px;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
}

.hero-tabs {
  width: min(1400px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  padding: 8px 24px;
  position: relative;
}

.hero-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255,255,255,.32);
}

.hero-tab {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  opacity: .95;
  padding: 10px 0;
  transition: opacity .3s ease;
  position: relative;
  outline: none;
  border: none;
}

.hero-tab .chev {
  margin-right: 12px;
  transition: color .3s ease;
  font-size: 32px;
  font-weight: bold;
  display: inline-block;
}

.hero-tab.active {
  opacity: 1;
}

.hero-tab.active .chev {
  color: var(--red) !important;
}

.hero-tab:hover {
  opacity: 1;
}

.hero-tab.active::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

/* SECTIONS */
.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px;
}

.kicker {
  color: #999;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.h2 {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  margin: 6px 0 16px;
}

.lead2 {
  font-size: 18px;
  color: #444;
  max-width: 900px;
}

/* BACKGROUND SECTIONS */
.bg-light {
  background: #f8f9fa;
}

.bg-dark {
  background: #f8f9fa;
  color: #333333;
}

/* SERVICES GRID */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.service-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  display: block;
  color: inherit;
  text-decoration: none;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,.1);
  color: inherit;
  text-decoration: none;
}

.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 16px;
  border-radius: 8px;
}

.service-card h3 {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #222;
}

.service-card p {
  color: #666;
  margin-bottom: 16px;
  line-height: 1.5;
}

.btn-link {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}

/* PROJECTS GALLERY */
.projects-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.project-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: transform .2s;
}

.project-item:hover {
  transform: translateY(-2px);
}

.project-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
}

.project-info {
  padding: 16px;
}

.project-info h4 {
  margin: 0 0 4px;
  font-weight: 700;
  color: #222;
}

.project-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* SAFETY FEATURES */
.safety-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.safety-item {
  text-align: center;
  padding: 24px;
}

.safety-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.safety-item h3 {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #222;
}

.safety-item p {
  color: #666;
  line-height: 1.5;
}

/* ABOUT SECTION */
.about-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}

.about-stats {
  display: flex;
  gap: 32px;
  margin: 24px 0;
}

.stat {
  text-align: center;
}

.stat-number {
  font-family: Montserrat, sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.about-values {
  margin-top: 24px;
}

.about-values h3 {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
}

.about-values ul {
  list-style: none;
  padding: 0;
}

.about-values li {
  margin-bottom: 8px;
  color: #444;
  position: relative;
  padding-left: 20px;
}

.about-values li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: bold;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
}

/* CONTACT SECTION */
.contact-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 32px;
}

.contact-info {
  display: grid;
  gap: 24px;
}

.contact-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 24px;
}

.contact-item h3 {
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #222;
}

.contact-item p {
  margin: 4px 0;
  color: #444;
}

.contact-item a {
  color: var(--red);
  font-weight: 700;
}

.service-areas {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-areas li {
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.contact-cta {
  display: flex;
  align-items: center;
}

.cta-box {
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  width: 100%;
}

.cta-box h3 {
  font-family: Montserrat, sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #222;
}

.cta-box p {
  color: #666;
  margin-bottom: 20px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
}

.btn-whatsapp:hover {
  background: #128C7E;
}

.btn-whatsapp img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

.note {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

/* FAQ */
.faq {
  border-top: 1px solid #eee;
  margin-top: 10px;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 6px;
  cursor: pointer;
  font-weight: 700;
}

.faq-q::after {
  content: '+';
  font-size: 20px;
  font-weight: bold;
  color: var(--red);
}

.faq-item.active .faq-q::after {
  content: '−';
}

.faq-a {
  display: none;
  padding: 0 6px 16px;
  color: #444;
}

.faq-item.active .faq-a {
  display: block;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox > div {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox .close-x {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  transition: background .2s;
}

.lightbox .close-x:hover {
  background: rgba(0,0,0,.8);
}

.lightbox .caption {
  color: #fff;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
}

/* FOOTER */
footer {
  border-top: 1px solid #eee;
  padding: 22px 16px;
  color: #555;
}

/* ===== RESPONSIVE DESIGN ===== */

/* TABLET */
@media (max-width: 900px) {
  .hero h1 {
    font-size: 56px;
  }
  
  .hero .lead {
    font-size: 20px;
  }
  
  .hero-tab {
    font-size: 18px;
  }
  
  .hero-tab .chev {
    font-size: 28px;
  }
  
  .nav ul {
    gap: 20px;
  }
  
  .about-content,
  .contact-content {
    grid-template-columns: 1fr;
  }
  
  .about-stats {
    justify-content: center;
  }
  
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .projects-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .h2 {
    font-size: 28px;
  }
  
  .section {
    padding: 32px 16px;
  }
}

/* MOBILE - CORRECCIONES AGRESIVAS */
@media (max-width: 768px) {
  
  /* HERO OPTIMIZADO PARA MÓVIL */
  .hero {
    height: 60vh !important;
    min-height: 400px !important;
  }
  
  .hero img.bg {
    object-fit: cover !important;
    object-position: center center !important;
  }
  
  .hero h1 {
    font-size: 48px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
  }
  
  .hero .lead {
    font-size: 18px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
  }
  
  .hero .kicker {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
  }
  
  /* NAVEGACIÓN MÓVIL */
  .mcr-logo {
    height: 65px;
  }
  
  .nav ul {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block !important;
    color: #333 !important;
    font-size: 24px !important;
    padding: 15px !important;
    background: #f8f8f8 !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  
  .mobile-menu-btn:hover {
    background: #e8e8e8 !important;
    border-color: #ccc !important;
  }
  
  .mobile-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
    z-index: 1000 !important;
    display: none !important;
  }
  
  .mobile-menu.active {
    display: block !important;
  }
  
  .mobile-menu ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 20px 0 !important;
  }
  
  .mobile-menu li {
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  .mobile-menu li:last-child {
    border-bottom: none !important;
  }
  
  .mobile-menu a {
    color: #333 !important;
    font-weight: 700 !important;
    padding: 18px 24px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
    text-decoration: none !important;
  }
  
  .mobile-menu a:hover {
    background: #f0f0f0 !important;
    color: var(--red) !important;
  }
  
  /* HERO TABS MÓVIL */
  .hero-tabs {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 8px;
    padding: 16px 24px 12px;
  }
  
  .hero-tabs::before {
    left: 20%;
    right: 20%;
    background: rgba(255,255,255,.2);
    top: 4px;
  }
  
  .hero-tab {
    font-size: 16px;
    padding: 8px 0;
  }
  
  .hero-tab .chev {
    font-size: 24px;
    margin-right: 8px;
  }
  
  .hero-tab.active::before {
    width: 80%;
    top: -16px;
  }
  
  /* CORRECCIÓN AGRESIVA DE FONDOS */
  .section,
  .bg-light,
  .bg-dark,
  .cta-band,
  .cta-box,
  .service-card,
  .project-item,
  .safety-item,
  .contact-item,
  .about-content,
  .contact-content,
  .faq,
  .faq-item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* TEXTO LEGIBLE */
  .section *,
  .bg-light *,
  .bg-dark *,
  .cta-band *,
  .cta-box *,
  .service-card *,
  .project-item *,
  .safety-item *,
  .contact-item *,
  .about-content *,
  .contact-content *,
  .faq *,
  .faq-item * {
    color: #333333 !important;
  }
  
  /* TÍTULOS */
  h1, h2, h3, h4, h5, h6,
  .h2,
  .service-card h3,
  .project-info h4,
  .safety-item h3,
  .contact-item h3,
  .stat-number,
  .faq-q {
    color: #222222 !important;
  }
  
  /* PÁRRAFOS */
  p,
  .lead2,
  .service-card p,
  .project-info p,
  .safety-item p,
  .contact-item p,
  .about-text,
  .faq-a,
  .stat-label {
    color: #555555 !important;
  }
  
  /* KICKERS */
  .kicker,
  .note,
  .service-areas li {
    color: #777777 !important;
  }
  
  /* ENLACES */
  a:not(.btn):not(.hero-tab) {
    color: #222222 !important;
  }
  
  /* TARJETAS */
  .service-card,
  .project-item,
  .safety-item,
  .contact-item,
  .cta-box {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  /* SECCIONES CON FONDO CLARO */
  .bg-light {
    background: #f8f9fa !important;
    padding: 32px 20px !important;
  }
  
  /* FOOTER */
  footer {
    background: #ffffff !important;
    color: #555555 !important;
    border-top: 1px solid #eee !important;
  }
  
  footer p {
    color: #555555 !important;
  }
}
@media(max-width:900px){.features{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .features,.process{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .gallery img{height:220px}
  
  /* Improve text readability on mobile */
  .section{padding:32px 20px}
  .h2{font-size:28px;line-height:1.2}
  .lead2{font-size:16px;line-height:1.5}
  .feature h3, .step h4{font-size:18px;margin-bottom:8px}
  .feature p, .step p{font-size:15px;line-height:1.4}
  
  /* Light theme for better mobile readability */
  .bg-dark{background:#ffffff !important;padding:24px 20px !important;border-radius:16px !important;box-shadow:0 4px 12px rgba(0,0,0,0.1) !important;margin:20px 0 !important}
  .bg-dark .kicker{color:#777777 !important;font-size:14px !important}
  .bg-dark .h2{color:#222222 !important;font-size:24px !important;margin-bottom:16px !important}
  .bg-dark .lead2{color:#555555 !important;font-size:16px !important;line-height:1.6 !important}
  .bg-dark .feature, .bg-dark .step{background:#f8f9fa !important;border-color:#e0e0e0 !important;color:#333333 !important;padding:20px !important;border-radius:12px !important}
  .bg-dark .feature h3, .bg-dark .step h4{color:#222222 !important;font-size:18px !important;margin-bottom:12px !important}
  .bg-dark .feature p, .bg-dark .step p{color:#555555 !important;font-size:15px !important;line-height:1.5 !important}
  
  /* Improve mobile header */
  header{height:75px}
  .nav{height:75px;padding:0 20px}
  .mcr-logo{height:70px}
  
  /* Better mobile menu button */
  .mobile-menu-btn{
    font-size:22px;
    padding:15px;
    border-radius:6px;
    transition:all 0.2s ease;
  }
  .mobile-menu-btn:hover{
    background:#f0f0f0;
  }
}
footer{border-top:1px solid #eee;padding:22px 16px;color:#555}

/* ===== LIGHTBOX STYLES ===== */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-content{position:relative;max-width:90vw;max-height:90vh;background:#fff;border-radius:8px;overflow:hidden}
.lightbox-content img{display:block;max-width:100%;max-height:80vh;object-fit:contain}
.close-x{position:absolute;top:10px;right:15px;color:#fff;font-size:30px;font-weight:bold;cursor:pointer;z-index:1001;background:rgba(0,0,0,.5);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.close-x:hover{background:rgba(0,0,0,.8)}
.caption{padding:16px;background:#fff;color:#333;text-align:center;font-weight:600}

/* Projects Gallery */
.projects-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:32px}
.project-item{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}
.project-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.project-item img{width:100%;height:200px;object-fit:cover;display:block}
.project-info{padding:16px}
.project-info h4{margin:0 0 8px;font-family:Montserrat,sans-serif;font-weight:700;color:#222}
.project-info p{margin:0;color:#666;font-size:14px}

/* Safety Features */
.safety-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:32px}
.safety-item{text-align:center;padding:24px}
.safety-icon{font-size:48px;margin-bottom:16px}
.safety-item h3{font-family:Montserrat,sans-serif;font-weight:700;margin:0 0 12px;color:#222}
.safety-item p{color:#666;line-height:1.5}

/* About Section */
.about-content{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;margin-top:32px}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0}
.stat{text-align:center}
.stat-number{font-family:Montserrat,sans-serif;font-size:36px;font-weight:900;color:var(--red);margin-bottom:4px}
.stat-label{font-size:14px;color:#666;font-weight:600}
.about-values h3{font-family:Montserrat,sans-serif;font-weight:700;margin:24px 0 12px;color:#222}
.about-values ul{list-style:none;padding:0;margin:0}
.about-values li{padding:8px 0;color:#666;position:relative;padding-left:20px}
.about-values li:before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:bold}
.about-image img{width:100%;height:300px;object-fit:cover;border-radius:12px}

/* Contact Section */
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
.contact-item{margin-bottom:24px}
.contact-item h3{font-family:Montserrat,sans-serif;font-weight:700;margin:0 0 8px;color:#222}
.contact-item p{margin:4px 0;color:#666}
.contact-item a{color:var(--red);font-weight:600}
.service-areas{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.service-areas li{color:#666;font-size:14px}
.cta-box{background:#f8f9fa;padding:32px;border-radius:12px;text-align:center;border:1px solid #eee}
.cta-box h3{font-family:Montserrat,sans-serif;font-weight:700;margin:0 0 12px;color:#222}
.cta-box p{color:#666;margin-bottom:20px}
.btn-large{padding:16px 24px;font-size:18px;font-weight:700;border-radius:12px;display:inline-flex;align-items:center;gap:8px}

@media(max-width:768px){
  .about-content{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(3,1fr);gap:16px}
  .contact-content{grid-template-columns:1fr}
  .service-areas{grid-template-columns:1fr}
  .safety-features{grid-template-columns:1fr}
  .projects-gallery{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
}

/* ===== HOME PAGE STYLES ===== */
.bg-light{background:#f8f9fa}

/* Services Grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:32px}
.service-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:24px;text-align:center;transition:transform .2s,box-shadow .2s;display:block;color:inherit;text-decoration:none}
.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.1);color:inherit;text-decoration:none}
.service-card img{width:100%;height:200px;object-fit:cover;margin-bottom:16px;border-radius:8px}
.service-card h3{font-family:Montserrat,sans-serif;font-size:20px;font-weight:800;margin:0 0 12px;color:#222}
.service-card p{color:#666;margin-bottom:16px;line-height:1.5}
.btn-link{color:var(--red);font-weight:700;text-decoration:none}
.btn-link:hover{text-decoration:underline}

/* Projects Gallery */
.projects-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.project-item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .2s}
.project-item:hover{transform:translateY(-2px)}
.project-item img{width:100%;height:200px;object-fit:cover;cursor:pointer}
.project-info{padding:16px}
.project-info h4{margin:0 0 4px;font-weight:700;color:#222}
.project-info p{margin:0;color:#666;font-size:14px}

/* Safety Features */
.safety-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:32px}
.safety-item{text-align:center;padding:24px}
.safety-icon{font-size:48px;margin-bottom:16px}
.safety-item h3{font-family:Montserrat,sans-serif;font-size:18px;font-weight:800;margin:0 0 12px;color:#222}
.safety-item p{color:#666;line-height:1.5}

/* About Section */
.about-content{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start;margin-top:32px}
.about-stats{display:flex;gap:32px;margin:24px 0}
.stat{text-align:center}
.stat-number{font-family:Montserrat,sans-serif;font-size:32px;font-weight:900;color:var(--red);line-height:1}
.stat-label{font-size:14px;color:#666;margin-top:4px}
.about-values{margin-top:24px}
.about-values h3{font-family:Montserrat,sans-serif;font-size:20px;font-weight:800;margin-bottom:16px}
.about-values ul{list-style:none;padding:0}
.about-values li{margin-bottom:8px;color:#444}
.about-image img{width:100%;border-radius:12px}

/* Contact Section */
.contact-content{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin-top:32px}
.contact-info{display:grid;gap:24px}
.contact-item h3{font-family:Montserrat,sans-serif;font-size:18px;font-weight:800;margin:0 0 8px;color:#222}
.contact-item p{margin:4px 0;color:#444}
.contact-item a{color:var(--red);font-weight:700}
.service-areas{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.service-areas li{background:#f0f0f0;padding:4px 8px;border-radius:4px;font-size:14px}
.contact-cta{display:flex;align-items:center}
.cta-box{background:#fff;border:2px solid var(--red);border-radius:12px;padding:32px;text-align:center;width:100%}
.cta-box h3{font-family:Montserrat,sans-serif;font-size:22px;font-weight:800;margin:0 0 12px;color:#222}
.cta-box p{color:#666;margin-bottom:20px}
.btn-large{padding:16px 32px;font-size:18px}
.cta-box .note{font-size:14px;color:#888;margin-top:12px;margin-bottom:0}

/* Lightbox styles */
.lightbox{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  padding:20px;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
}
.lightbox img{
  max-width:90vw;
  max-height:80vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.lightbox .close-x{
  position:absolute;
  top:20px;
  right:30px;
  color:#fff;
  font-size:40px;
  cursor:pointer;
  z-index:1001;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  transition:background .2s ease;
}
.lightbox .close-x:hover{
  background:rgba(0,0,0,.8);
}
.lightbox .caption{
  color:#fff;
  text-align:center;
  margin-top:16px;
  font-size:16px;
  max-width:600px;
}

/* Responsive */
/* Tablet optimizations */
@media(max-width:1024px) and (min-width:769px){
  .features{grid-template-columns:repeat(2,1fr);gap:20px}
  .process{grid-template-columns:repeat(2,1fr);gap:20px}
  .specs{grid-template-columns:repeat(2,1fr)}
  .contact-content{grid-template-columns:1fr;gap:32px}
  .about-content{grid-template-columns:1fr;gap:32px}
  .cta-box{max-width:500px;margin:0 auto}
}

@media(max-width:900px){
  .about-content,.contact-content{grid-template-columns:1fr}
  .about-stats{justify-content:center}
  .services-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .projects-gallery{grid-template-columns:repeat(2,1fr)}
  .h2{font-size:28px}
  .section{padding:32px 16px}
  /* Optimizaciones adicionales para tablets pequeños */
  .hero h1{font-size:48px}
  .hero .lead{font-size:19px}
  .feature{padding:20px}
  .step{padding:20px}
}
@media(max-width:640px){
  .services-grid,.projects-gallery{grid-template-columns:1fr}
  .safety-features{grid-template-columns:1fr}
  .about-stats{flex-direction:column;gap:16px}
  .service-areas{justify-content:center}
  .h2{font-size:24px}
  .lead2{font-size:16px}
  .section{padding:24px 16px}
  .service-card{padding:20px}
  .project-item img{height:180px}
  .safety-item{padding:20px}
  .cta-box{padding:24px}
  .btn-large{padding:14px 24px;font-size:16px}
  .contact-item h3{font-size:16px}
  /* Optimizaciones adicionales para terrazas */
  .feature{padding:16px}
  .feature h3{font-size:18px}
  .step{padding:16px}
  .step h4{font-size:16px}
  .faq-q{padding:12px 4px;font-size:16px}
  .faq-a{padding:0 4px 14px;font-size:15px}
  .gallery{grid-template-columns:1fr;gap:12px}
  .gallery img{height:200px}
}
@media(max-width:480px){
  .hero{min-height:400px}
  .hero h1{font-size:32px}
  .hero .lead{font-size:16px}
  .hero-tab{font-size:14px}
  .hero-tab .chev{font-size:20px}
  .services-grid{gap:16px}
  .projects-gallery{gap:16px}
  .safety-features{gap:16px}
  .service-card h3{font-size:18px}
  .stat-number{font-size:24px}
  .about-values ul{padding-left:16px}
  /* Optimizaciones móviles específicas */
  .features{gap:12px}
  .process{gap:12px}
  .specs{gap:10px}
  .feature{padding:14px}
  .feature h3{font-size:16px}
  .step{padding:14px}
  .step h4{font-size:15px}
  .spec{padding:12px}
  .spec h4{font-size:15px}
  .btn-whatsapp img{width:24px;height:24px;margin-right:8px}
  .contact-content{gap:24px}
  .contact-info{gap:20px}
  .gallery img{height:180px}
  .kicker{font-size:12px}
  /* Mejoras táctiles para móviles */
  .faq-q{min-height:48px;padding:16px 8px}
  .faq-q span{font-size:20px;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}
  .contact-item a{display:inline-block;padding:8px 4px;min-height:44px;line-height:1.2}
  .btn-whatsapp{min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px}
  .gallery img{cursor:pointer;transition:transform .2s}
  .gallery img:hover{transform:scale(1.02)}
  /* Lightbox móvil */
  .lightbox{padding:10px}
  .lightbox img{max-width:95vw;max-height:70vh}
  .lightbox .close-x{top:10px;right:15px;font-size:32px;width:40px;height:40px}
  .lightbox .caption{font-size:14px;margin-top:12px}
}

/* Final message section */
.final-message{
  text-align:center;
  background:#f8f9fa;
  margin-top:40px;
  padding:32px 16px;
}
.final-text{
  font-size:18px;
  max-width:800px;
  margin:0 auto;
  line-height:1.6;
  color:#333;
}

@media(max-width:640px){
  .final-message{padding:24px 16px;margin-top:32px}
  .final-text{font-size:16px;line-height:1.5}
}

@media(max-width:480px){
  .final-message{padding:20px 12px;margin-top:24px}
  .final-text{font-size:15px}
}
.projects-gallery img{width:100%;height:250px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .2s}
.projects-gallery img:hover{transform:scale(1.02)}

/* About Section */
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:32px}
.about-text{font-size:16px;line-height:1.6;color:#444}
.about-image{text-align:center}
.about-image img{width:100%;max-width:400px;border-radius:12px}

/* Contact Section */
.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:32px}
.contact-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:24px;text-align:center}
.contact-card h3{color:var(--red);margin-bottom:16px}
.contact-card p{margin:8px 0;color:#666}

/* Lightbox Styles */
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox > div{position:relative;max-width:90vw;max-height:90vh}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:8px}
.lightbox .close-x{position:absolute;top:-40px;right:0;color:#fff;font-size:32px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border-radius:50%;transition:background .2s}
.lightbox .close-x:hover{background:rgba(0,0,0,.8)}
.lightbox .caption{color:#fff;text-align:center;margin-top:16px;font-size:14px}

/* Gallery cursor pointer */
.gallery img{cursor:pointer;transition:transform .2s}
.gallery img:hover{transform:scale(1.02)}

/* FAQ Interactive Styles */
.faq-q::after{content:'+';font-size:20px;font-weight:bold;color:var(--red)}
.faq-item.active .faq-q::after{content:'−'}
.faq-item.active .faq-a{display:block}

/* Mobile Responsive */
@media(max-width:768px){
  .about-content{grid-template-columns:1fr;gap:24px}
  .contact-info{grid-template-columns:1fr}
  .projects-gallery{grid-template-columns:repeat(2,1fr);gap:16px}
  .projects-gallery img{height:200px}
  .cta-band .inner{flex-direction:column;text-align:center;gap:20px}
  .lightbox > div{max-width:95vw}
  .lightbox .close-x{top:-35px;font-size:28px;width:35px;height:35px}
}

@media(max-width:480px){
  .projects-gallery{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery img{height:240px}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* Focus styles for accessibility */
a:focus,button:focus,.faq-q:focus{outline:2px solid var(--red);outline-offset:2px}
.gallery img:focus,.projects-gallery img:focus{outline:3px solid var(--red);outline-offset:3px}/* Final
 message and contact sections */
.final-message{background:#f8f9fa;padding:32px 24px;border-radius:12px;margin:32px 0}
.final-text{font-size:18px;line-height:1.6;color:#333;text-align:center;margin:0;max-width:900px;margin:0 auto}

.contact-content{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin-top:32px;align-items:start}
.contact-info{display:grid;grid-template-columns:1fr;gap:24px}
.contact-item{background:#fff;border:1px solid #eee;border-radius:12px;padding:24px}
.contact-item h3{color:var(--red);margin:0 0 16px;font-size:18px}
.contact-item p{margin:8px 0;color:#666;line-height:1.5}
.contact-item .note{font-size:14px;color:#999;margin-top:8px}

.service-areas{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.service-areas li{color:#666;font-size:15px}
.service-areas li::before{content:'•';color:var(--red);margin-right:8px}

.contact-cta{position:sticky;top:100px}
.cta-box{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);border:2px solid #eee;border-radius:16px;padding:32px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.cta-box h3{color:var(--red);margin:0 0 16px;font-size:22px}
.cta-box p{color:#666;margin:16px 0;line-height:1.5}

.btn-large{padding:16px 24px;font-size:16px;font-weight:800;border-radius:12px;display:inline-flex;align-items:center;gap:12px;margin:20px 0}
.btn-whatsapp{background:#25D366;color:#fff;transition:background .2s}
.btn-whatsapp:hover{background:#128C7E;color:#fff}
.btn-whatsapp img{width:24px;height:24px}

@media(max-width:900px){
  .contact-content{grid-template-columns:1fr;gap:24px}
  .contact-info{grid-template-columns:1fr}
  .service-areas{grid-template-columns:1fr}
  .contact-cta{position:static}
  .cta-box{padding:24px}
  .final-text{font-size:16px}
}

@media(max-width:600px){
  .final-message{padding:24px 16px}
  .contact-item{padding:20px}
  .cta-box{padding:20px}
  .btn-large{padding:14px 20px;font-size:15px}
}

/* Lightbox Styles - Fixed */
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.9);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}

.lightbox.open{
  opacity:1;
  visibility:visible;
}

.lightbox > div{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lightbox img{
  max-width:100%;
  max-height:85vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}

.lightbox .close-x{
  position:absolute;
  top:-50px;
  right:0;
  color:#fff;
  font-size:32px;
  cursor:pointer;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.7);
  border-radius:50%;
  transition:background .2s ease;
  border:2px solid rgba(255,255,255,.3);
}

.lightbox .close-x:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.6);
}

.lightbox .caption{
  color:#fff;
  text-align:center;
  margin-top:16px;
  font-size:14px;
  max-width:600px;
  line-height:1.4;
  padding:0 20px;
}

/* Mobile lightbox adjustments */
@media(max-width:768px){
  .lightbox > div{
    max-width:95vw;
    max-height:95vh;
  }
  
  .lightbox img{
    max-height:80vh;
  }
  
  .lightbox .close-x{
    top:-45px;
    font-size:28px;
    width:36px;
    height:36px;
  }
  
  .lightbox .caption{
    font-size:13px;
    margin-top:12px;
  }
}

@media(max-width:480px){
  .lightbox .close-x{
    top:-40px;
    font-size:24px;
    width:32px;
    height:32px;
  }
}/* Light
box Styles - Corrected */
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.9);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}

.lightbox.open{
  opacity:1;
  visibility:visible;
}

.lightbox-content{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lightbox img{
  max-width:100%;
  max-height:85vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}

.lightbox .close-x{
  position:absolute;
  top:-50px;
  right:-10px;
  color:#fff;
  font-size:32px;
  cursor:pointer;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.8);
  border-radius:50%;
  transition:all .2s ease;
  border:2px solid rgba(255,255,255,.3);
  z-index:1001;
}

.lightbox .close-x:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.8);
  transform:scale(1.1);
}

.lightbox .caption{
  color:#fff;
  text-align:center;
  margin-top:16px;
  font-size:14px;
  max-width:600px;
  line-height:1.4;
  padding:0 20px;
}

/* Mobile lightbox adjustments */
@media(max-width:768px){
  .lightbox-content{
    max-width:95vw;
    max-height:95vh;
  }
  
  .lightbox img{
    max-height:80vh;
  }
  
  .lightbox .close-x{
    top:-45px;
    right:-5px;
    font-size:28px;
    width:36px;
    height:36px;
  }
  
  .lightbox .caption{
    font-size:13px;
    margin-top:12px;
  }
}

@media(max-width:480px){
  .lightbox .close-x{
    top:-40px;
    right:0;
    font-size:24px;
    width:32px;
    height:32px;
  }
}/* ====
= MOBILE & TABLET OPTIMIZATION ===== */

/* Tablet styles (768px - 1024px) */
@media(max-width:1024px){
  .hero h1{font-size:48px}
  .hero .lead{font-size:20px}
  .section{padding:32px 16px}
  .h2{font-size:28px}
  .lead2{font-size:16px}
  
  .features{grid-template-columns:repeat(2,1fr);gap:16px}
  .process{grid-template-columns:repeat(2,1fr);gap:16px}
  .gallery{grid-template-columns:repeat(2,1fr);gap:12px}
  .gallery img{height:240px}
  
  .contact-content{grid-template-columns:1fr;gap:32px}
  .about-content{grid-template-columns:1fr;gap:24px}
  .projects-gallery{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* Mobile styles (max-width: 768px) */
@media(max-width:768px){
  .hero{height:50vh;min-height:400px}
  .hero h1{font-size:36px;line-height:1.1}
  .hero .lead{font-size:18px}
  .hero .wrap{padding:0 20px}
  
  .section{padding:24px 16px}
  .h2{font-size:24px}
  .lead2{font-size:15px}
  
  .features{grid-template-columns:1fr;gap:12px}
  .feature{padding:16px}
  .feature h3{font-size:18px}
  
  .process{grid-template-columns:1fr;gap:12px}
  .step{padding:16px}
  .step h4{font-size:16px;margin-bottom:8px}
  
  .gallery{grid-template-columns:1fr;gap:12px}
  .gallery img{height:200px}
  
  .specs{grid-template-columns:1fr;gap:12px}
  .spec{padding:12px}
  .spec h4{font-size:16px}
  
  .faq-q{padding:12px 8px;font-size:16px}
  .faq-a{padding:0 8px 12px;font-size:15px}
  
  .contact-content{grid-template-columns:1fr;gap:20px}
  .contact-item{padding:16px}
  .contact-item h3{font-size:16px}
  
  .service-areas{grid-template-columns:1fr;gap:2px}
  .service-areas li{font-size:14px}
  
  .cta-box{padding:20px}
  .cta-box h3{font-size:18px}
  .btn-large{padding:12px 20px;font-size:16px}
  
  .final-message{padding:20px 16px}
  .final-text{font-size:16px}
  
  /* Mobile navigation improvements */
  .nav{padding:0 12px}
  .mcr-logo{height:45px}
  
  /* Mobile lightbox improvements */
  .lightbox-content{max-width:98vw;max-height:95vh}
  .lightbox img{max-height:75vh}
  .lightbox .close-x{
    top:-35px;
    right:5px;
    width:35px;
    height:35px;
    font-size:24px;
  }
  .lightbox .caption{font-size:13px;padding:0 16px}
}

/* Small mobile styles (max-width: 480px) */
@media(max-width:480px){
  .hero{height:45vh;min-height:350px}
  .hero h1{font-size:28px}
  .hero .lead{font-size:16px}
  .hero .wrap{padding:0 16px}
  
  .section{padding:20px 12px}
  .h2{font-size:22px}
  .lead2{font-size:14px}
  
  .feature{padding:12px}
  .feature h3{font-size:16px}
  .feature p{font-size:14px}
  
  .step{padding:12px}
  .step h4{font-size:15px}
  .step p{font-size:14px}
  
  .gallery img{height:180px}
  
  .spec{padding:10px}
  .spec h4{font-size:15px}
  .spec p{font-size:13px}
  
  .faq-q{padding:10px 6px;font-size:15px}
  .faq-a{padding:0 6px 10px;font-size:14px}
  
  .contact-item{padding:12px}
  .contact-item h3{font-size:15px}
  .contact-item p{font-size:14px}
  
  .cta-box{padding:16px}
  .cta-box h3{font-size:16px}
  .cta-box p{font-size:14px}
  .btn-large{padding:10px 16px;font-size:15px}
  
  .final-message{padding:16px 12px}
  .final-text{font-size:15px}
  
  /* Very small mobile lightbox */
  .lightbox .close-x{
    top:-30px;
    right:10px;
    width:30px;
    height:30px;
    font-size:20px;
  }
  .lightbox img{max-height:70vh}
  .lightbox .caption{font-size:12px;padding:0 12px}
}

/* Touch-friendly improvements */
@media(hover:none) and (pointer:coarse){
  .gallery img{transition:none}
  .gallery img:hover{transform:none}
  
  .faq-q{padding:16px 8px;min-height:48px}
  .lightbox .close-x{
    width:44px;
    height:44px;
    font-size:24px;
  }
  
  .btn-large{min-height:48px;padding:12px 20px}
  .mobile-menu-btn{min-width:44px;min-height:44px}
}

/* Landscape mobile optimization */
@media(max-width:768px) and (orientation:landscape){
  .hero{height:70vh;min-height:300px}
  .hero h1{font-size:32px}
  .hero .lead{font-size:17px}
  
  .section{padding:20px 16px}
  .features{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* High DPI displays */
@media(-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  .gallery img, .projects-gallery img{
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
  }
}/* ===== 
MOBILE UX IMPROVEMENTS ===== */

/* Prevent zoom on input focus (iOS) */
input, select, textarea{
  font-size:16px;
}

/* Smooth scrolling for mobile */
html{
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}

/* Better tap targets */
a, button, .faq-q, .gallery img{
  -webkit-tap-highlight-color:rgba(0,0,0,.1);
  tap-highlight-color:rgba(0,0,0,.1);
}

/* Prevent text selection on UI elements */
.faq-q, .btn, .close-x, .mobile-menu-btn{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

/* Improve font rendering on mobile */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Mobile-specific animations */
@media(max-width:768px){
  .gallery img{
    transition:transform .2s ease;
  }
  
  .gallery img:active{
    transform:scale(.98);
  }
  
  .btn:active, .faq-q:active{
    transform:scale(.98);
  }
  
  /* Reduce motion for users who prefer it */
  @media(prefers-reduced-motion:reduce){
    *{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
    
    html{
      scroll-behavior:auto;
    }
  }
}

/* Safe area insets for devices with notches */
@supports(padding:max(0px)){
  .hero .wrap{
    padding-left:max(32px,env(safe-area-inset-left));
    padding-right:max(32px,env(safe-area-inset-right));
  }
  
  .section{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  
  .nav{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
}

/* Loading optimization */
.gallery img, .projects-gallery img{
  loading:lazy;
  decoding:async;
}

/* Focus styles for keyboard navigation */
@media(hover:hover) and (pointer:fine){
  .gallery img:focus, .faq-q:focus, .btn:focus{
    outline:2px solid var(--red);
    outline-offset:2px;
  }
}/* F
AQ Interactive Styles - Fixed */
.faq-q{
  position:relative;
  cursor:pointer;
  transition:background-color .2s ease;
}

.faq-q:hover{
  background-color:rgba(0,0,0,.02);
}

.faq-q::after{
  content:'+';
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:20px;
  font-weight:bold;
  color:var(--red);
  transition:transform .2s ease;
}

.faq-item.active .faq-q::after{
  content:'−';
  transform:translateY(-50%) rotate(0deg);
}

.faq-item.active .faq-a{
  display:block;
}

.faq-a{
  display:none;
  animation:fadeIn .2s ease;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
/* ====
= CRITICAL PERFORMANCE OPTIMIZATIONS ===== */

/* Preload critical fonts */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans 3'), local('SourceSans3-Regular');
}

/* Optimize images for better loading */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Critical above-the-fold styles */
.hero {
  contain: layout style paint;
}

.hero img.bg {
  will-change: transform;
  transform: translateZ(0);
}

/* Optimize animations */
.gallery img, .service-card, .project-item {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Reduce layout shifts */
.mcr-logo {
  aspect-ratio: 1;
}

.gallery img {
  aspect-ratio: 16/10;
}

.service-card img {
  aspect-ratio: 16/10;
}

/* Optimize for Core Web Vitals */
.hero-tabs {
  contain: layout;
}

.section {
  contain: layout style;
}

/* Improve text rendering */
body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optimize for mobile performance */
@media (max-width: 768px) {
  .hero img.bg {
    transform: none;
    will-change: auto;
  }
  
  .gallery img, .service-card, .project-item {
    will-change: auto;
    backface-visibility: visible;
    transform: none;
  }
}

/* Reduce motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Optimize for print */
@media print {
  .hero-tabs-wrap, .mobile-menu-btn, .lightbox {
    display: none !important;
  }
  
  .hero {
    height: auto !important;
    min-height: auto !important;
  }
  
  .section {
    page-break-inside: avoid;
  }
}

/* ===== ADDITIONAL MOBILE OPTIMIZATIONS ===== */

/* Improve touch targets */
@media (hover: none) and (pointer: coarse) {
  .faq-q, .btn, .gallery img, .service-card {
    min-height: 44px;
    min-width: 44px;
  }
  
  .mobile-menu-btn {
    min-height: 48px;
    min-width: 48px;
  }
}

/* Optimize for very small screens */
@media (max-width: 320px) {
  .hero h1 {
    font-size: 24px;
  }
  
  .hero .lead {
    font-size: 14px;
  }
  
  .section {
    padding: 16px 8px;
  }
  
  .h2 {
    font-size: 20px;
  }
  
  .feature, .step, .spec {
    padding: 8px;
  }
}

/* Optimize for landscape mobile */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    height: 90vh;
    min-height: 300px;
  }
  
  .hero h1 {
    font-size: 28px;
  }
  
  .hero .lead {
    font-size: 16px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero img.bg {
    filter: brightness(0.5) contrast(1.2);
  }
  
  .btn-primary {
    border: 1px solid rgba(255,255,255,0.3);
    padding: 4px 16px;
  }
  
  .faq-q::after {
    font-weight: 900;
  }
}

/* Dark mode support (if user prefers) */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e0e0e0;
  }
  
  .bg-light {
    background: #1a1a1a;
  }
  
  .feature, .step, .spec, .service-card, .project-item {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
  }
}

/* Optimize for slow connections */
@media (prefers-reduced-data: reduce) {
  .hero img.bg {
    display: none;
  }
  
  .hero {
    background: linear-gradient(135deg, var(--red) 0%, #8b0000 100%);
  }
  
  .gallery img, .service-card img, .project-item img {
    background: #f0f0f0;
    min-height: 200px;
  }
}/* ==
=== ANIMATION CLASSES FOR INTERSECTION OBSERVER ===== */
.feature, .step, .service-card, .project-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.feature.animate-in, .step.animate-in, .service-card.animate-in, .project-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.feature:nth-child(1) { transition-delay: 0.1s; }
.feature:nth-child(2) { transition-delay: 0.2s; }
.feature:nth-child(3) { transition-delay: 0.3s; }

.step:nth-child(1) { transition-delay: 0.1s; }
.step:nth-child(2) { transition-delay: 0.2s; }
.step:nth-child(3) { transition-delay: 0.3s; }
.step:nth-child(4) { transition-delay: 0.4s; }

.service-card:nth-child(1) { transition-delay: 0.1s; }
.service-card:nth-child(2) { transition-delay: 0.2s; }
.service-card:nth-child(3) { transition-delay: 0.3s; }
.service-card:nth-child(4) { transition-delay: 0.4s; }
.service-card:nth-child(5) { transition-delay: 0.5s; }
.service-card:nth-child(6) { transition-delay: 0.6s; }

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .feature, .step, .service-card, .project-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== HERO TABS ACTIVE STATE FIX ===== */
.hero-tab.active {
  opacity: 1;
}

.hero-tab.active .chev {
  color: var(--red) !important;
}

.hero-tab.active::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
}

/* ===== MISSING WHATSAPP LOGO STYLES ===== */
.whatsapp-logo {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 8px;
}

/* ===== FOOTER CONSISTENCY ===== */
footer {
  border-top: 1px solid #eee;
  padding: 32px 16px;
  color: #666;
  text-align: center;
  background: #f8f9fa;
}

footer p {
  margin: 4px 0;
  font-size: 14px;
}

footer p:first-child {
  font-weight: 600;
  color: #333;
}

/* ===== MISSING MOBILE OPTIMIZATIONS ===== */
@media (max-width: 480px) {
  .hero-tabs {
    padding: 4px 12px;
  }
  
  .hero-tab {
    font-size: 14px;
    padding: 6px 0;
  }
  
  .hero-tab .chev {
    font-size: 18px;
    margin-right: 6px;
  }
  
  .hero-tab.active::before {
    width: 90%;
    top: -6px;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Optimize font loading */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans 3'), local('SourceSans3-Regular');
}

/* Critical rendering optimizations */
.hero {
  contain: layout style paint;
}

.section {
  contain: layout style;
}

/* Optimize images */
img {
  max-width: 100%;
  height: auto;
}

/* Optimize for Core Web Vitals */
.mcr-logo {
  aspect-ratio: 1;
  width: auto;
  height: 100px;
}

@media (max-width: 768px) {
  .mcr-logo {
    height: 68px;
  }
}

@media (max-width: 600px) {
  .mcr-logo {
    height: 50px;
  }
}

/* ===== MOBILE FIXES - CONSOLIDATED ===== */

/* 1. HERO SECTION - MOBILE OPTIMIZED */
@media(max-width:768px){
  .hero {
    height: 60vh;
    min-height: 400px;
  }
  
  .hero img.bg {
    object-position: center center;
  }
  
  .hero h1 { 
    font-size: 48px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
  }
  
  .hero .lead { 
    font-size: 18px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
  }
  
  .hero .kicker {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
  }
}

/* 2. DARK BACKGROUNDS - FORCE WHITE */
.bg-dark, .cta-band {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
}

.bg-dark *, .cta-band * {
  color: #333333 !important;
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
  color: #222222 !important;
}

.bg-dark p, .bg-dark span, .bg-dark div {
  color: #555555 !important;
}

/* 3. MOBILE MENU - CLEAN AND SIMPLE */
@media(max-width:600px){
  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    z-index: 9999;
    border-top: 2px solid #eee;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    border-radius: 0 0 12px 12px;
  }
  
  .mobile-menu.active {
    display: block;
  }
  
  .mobile-menu ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 20px 0;
  }
  
  .mobile-menu li {
    border-bottom: 1px solid #f0f0f0;
  }
  
  .mobile-menu li:last-child {
    border-bottom: none;
  }
  
  .mobile-menu a {
    color: #333;
    font-weight: 700;
    padding: 18px 24px;
    display: block;
    transition: all 0.2s ease;
    font-size: 16px;
    text-decoration: none;
  }
  
  .mobile-menu a:hover {
    background: #f0f0f0;
    color: var(--red);
  }
}

/* ===== CORRECCIÓN AGRESIVA SOLO PARA MÓVIL ===== */
/* FUERZA FONDOS BLANCOS EN MÓVIL SIN AFECTAR PC */

@media(max-width:768px){
  /* FORZAR TODOS LOS FONDOS OSCUROS A BLANCOS */
  section, div, .section, .bg-dark, .cta-band, 
  [style*="background-color"], [style*="background:"],
  .hero-tabs, .hero-tabs-wrap {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* FORZAR TODO EL TEXTO A SER LEGIBLE */
  .bg-dark *, .cta-band *, section *, div * {
    color: #333333 !important;
  }
  
  .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4,
  section h1, section h2, section h3, section h4 {
    color: #222222 !important;
  }
  
  .bg-dark p, .bg-dark span, .bg-dark div,
  section p, section span, section div {
    color: #555555 !important;
  }
  
  /* PRESERVAR SOLO EL HERO */
  .hero, .hero * {
    background: transparent !important;
    color: inherit !important;
  }
  
  .hero h1, .hero .lead, .hero .kicker {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.8) !important;
  }
  
  .hero img.bg {
    background: none !important;
  }
  
  /* HERO OPTIMIZADO PARA MÓVIL */
  .hero {
    height: 60vh !important;
    min-height: 400px !important;
  }
  
  .hero img.bg {
    object-position: center center !important;
  }
  
  /* LOGO MÁS GRANDE */
  .mcr-logo {
    height: 65px !important;
  }
  
  /* BOTÓN HAMBURGUESA VISIBLE */
  .mobile-menu-btn {
    display: block !important;
    background: #f8f8f8 !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 20px !important;
    padding: 12px !important;
    color: #333 !important;
  }
}
/* MOBILE
 PEQUEÑO */
@media (max-width: 640px) {
  .services-grid,
  .projects-gallery {
    grid-template-columns: 1fr;
  }
  
  .safety-features {
    grid-template-columns: 1fr;
  }
  
  .about-stats {
    flex-direction: column;
    gap: 16px;
  }
  
  .service-areas {
    justify-content: center;
  }
  
  .h2 {
    font-size: 24px;
  }
  
  .lead2 {
    font-size: 16px;
  }
  
  .section {
    padding: 24px 16px;
  }
  
  .service-card {
    padding: 20px;
  }
  
  .project-item img {
    height: 180px;
  }
  
  .safety-item {
    padding: 20px;
  }
  
  .cta-box {
    padding: 24px;
  }
  
  .btn-large {
    padding: 14px 24px;
    font-size: 16px;
  }
  
  .contact-item h3 {
    font-size: 16px;
  }
}

/* MOBILE MUY PEQUEÑO */
@media (max-width: 480px) {
  .hero {
    min-height: 400px;
  }
  
  .hero h1 {
    font-size: 32px;
  }
  
  .hero .lead {
    font-size: 16px;
  }
  
  .hero-tab {
    font-size: 14px;
  }
  
  .hero-tab .chev {
    font-size: 20px;
  }
  
  .services-grid {
    gap: 16px;
  }
  
  .projects-gallery {
    gap: 16px;
  }
  
  .safety-features {
    gap: 16px;
  }
  
  .service-card h3 {
    font-size: 18px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .about-values ul {
    padding-left: 16px;
  }
  
  .btn-whatsapp img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  
  .contact-content {
    gap: 24px;
  }
  
  .contact-info {
    gap: 20px;
  }
  
  .kicker {
    font-size: 12px;
  }
  
  /* MEJORAS TÁCTILES */
  .faq-q {
    min-height: 48px !important;
    padding: 16px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .contact-item a {
    display: inline-block;
    padding: 8px 4px;
    min-height: 44px;
    line-height: 1.2;
  }
  
  .btn-whatsapp {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  /* LIGHTBOX MÓVIL */
  .lightbox {
    padding: 10px;
  }
  
  .lightbox img {
    max-width: 95vw;
    max-height: 70vh;
  }
  
  .lightbox .close-x {
    top: 10px;
    right: 15px;
    font-size: 32px;
    width: 40px;
    height: 40px;
  }
  
  .lightbox .caption {
    font-size: 14px;
    margin-top: 12px;
  }
}

/* ESTILOS ADICIONALES PARA PÁGINAS ESPECÍFICAS */

/* Terraces page styles */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.feature {
  padding: 18px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}

.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.badge {
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 14px;
  background: #fafafa;
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.step {
  padding: 18px;
  border-radius: 10px;
  background: #f9f9f9;
  border: 1px solid #eee;
}

.step .num {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 800;
  margin-bottom: 8px;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  cursor: pointer;
  transition: transform .2s;
}

.gallery img:hover {
  transform: scale(1.02);
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.spec {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.cta-band {
  background: #ffffff;
  color: #333333;
  padding: 28px 16px;
  margin-top: 24px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
}

.cta-band .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.cta-band a.btn-wa {
  background: #25D366;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 800;
}

/* RESPONSIVE PARA PÁGINAS ESPECÍFICAS */
@media (max-width: 900px) {
  .features {
    grid-template-columns: 1fr 1fr;
  }
  
  .process {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .features,
  .process {
    grid-template-columns: 1fr;
  }
  
  .specs {
    grid-template-columns: 1fr;
  }
  
  .gallery img {
    height: 220px;
  }
  
  /* Mejoras para móvil en páginas específicas */
  .feature {
    padding: 16px;
  }
  
  .feature h3 {
    font-size: 18px;
  }
  
  .step {
    padding: 16px;
  }
  
  .step h4 {
    font-size: 16px;
  }
  
  .faq-q {
    padding: 12px 4px;
    font-size: 16px;
  }
  
  .faq-a {
    padding: 0 4px 14px;
    font-size: 15px;
  }
  
  .gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .gallery img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  /* Optimizaciones móviles específicas */
  .features {
    gap: 12px;
  }
  
  .process {
    gap: 12px;
  }
  
  .specs {
    gap: 10px;
  }
  
  .feature {
    padding: 14px;
  }
  
  .feature h3 {
    font-size: 16px;
  }
  
  .step {
    padding: 14px;
  }
  
  .step h4 {
    font-size: 15px;
  }
  
  .spec {
    padding: 12px;
  }
  
  .spec h4 {
    font-size: 15px;
  }
  
  .gallery img {
    height: 180px;
  }
}

/* CORRECCIONES ESPECÍFICAS PARA MÓVIL EN PÁGINAS INTERNAS */
@media (max-width: 768px) {
  
  /* Asegurar fondos blancos en páginas específicas */
  .bg-dark .feature,
  .bg-dark .step {
    background: #ffffff !important;
    border-color: #e0e0e0 !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  .bg-dark .feature h3,
  .bg-dark .step h4 {
    color: #222222 !important;
  }
  
  .bg-dark .feature p,
  .bg-dark .step p {
    color: #555555 !important;
  }
  
  .bg-dark .kicker {
    color: #666666 !important;
  }
  
  .bg-dark .h2 {
    color: #222222 !important;
  }
  
  .bg-dark .lead2 {
    color: #444444 !important;
  }
}

/* ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* FOCUS STYLES */
a:focus,
button:focus,
.faq-q:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.project-item img:focus,
.gallery img:focus {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* FINAL MESSAGE SECTION */
.final-message {
  text-align: center;
  background: #f8f9fa;
  margin-top: 40px;
  padding: 32px 16px;
}

.final-text {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: #333;
}

@media (max-width: 640px) {
  .final-message {
    padding: 24px 16px;
    margin-top: 32px;
  }
  
  .final-text {
    font-size: 16px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .final-message {
    padding: 20px 12px;
    margin-top: 24px;
  }
  
  .final-text {
    font-size: 15px;
  }
}

/* CORRECCIÓN FINAL PARA MÓVIL - OVERRIDE AGRESIVO */
@media (max-width: 768px) {
  
  /* Override cualquier estilo inline que pueda causar problemas */
  [style*="background-color"],
  [style*="background:"],
  [style*="color:"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
  }
  
  /* EXCEPCIONES PARA HERO Y ELEMENTOS ESPECÍFICOS */
  .hero [style*="color"],
  .hero-tabs [style*="color"],
  .hero-tab [style*="color"],
  .btn [style*="color"],
  .btn-primary [style*="color"],
  .btn-whatsapp [style*="color"] {
    color: inherit !important;
    background: inherit !important;
  }
  
  /* Asegurar que el hero mantenga su diseño */
  .hero,
  .hero *:not(.mobile-menu):not(.mobile-menu *) {
    background: inherit !important;
    color: inherit !important;
  }
  
  .hero h1,
  .hero .lead,
  .hero .kicker {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.8) !important;
  }
}
/* 
===== SOLUCIÓN EXTREMA: TEXTO BLANCO PARA CONTRASTE EN MÓVIL ===== */

@media (max-width: 768px) {
  
  /* ESTRATEGIA: Si el fondo es oscuro, hacer TODO el texto blanco */
  
  /* TEXTO PRINCIPAL BLANCO */
  body,
  .section,
  .section *,
  .bg-light,
  .bg-light *,
  .bg-dark,
  .bg-dark *,
  .service-card,
  .service-card *,
  .project-item,
  .project-item *,
  .safety-item,
  .safety-item *,
  .contact-item,
  .contact-item *,
  .about-content,
  .about-content *,
  .contact-content,
  .contact-content *,
  .faq,
  .faq *,
  .cta-box,
  .cta-box *,
  p,
  span,
  div,
  li {
    color: #ffffff !important;
  }
  
  /* TÍTULOS BLANCOS */
  h1, h2, h3, h4, h5, h6,
  .h2,
  .service-card h3,
  .project-info h4,
  .safety-item h3,
  .contact-item h3,
  .faq-q {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
  }
  
  /* KICKERS Y SUBTÍTULOS BLANCOS */
  .kicker,
  .lead2,
  .note,
  .stat-label,
  .service-areas li {
    color: #cccccc !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
  }
  
  /* ENLACES VISIBLES */
  a:not(.btn):not(.hero-tab) {
    color: #ffcccc !important;
    text-decoration: underline !important;
  }
  
  /* HERO - ASEGURAR TEXTO BLANCO */
  .hero,
  .hero *,
  .hero h1,
  .hero .lead,
  .hero .kicker {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.9) !important;
  }
  
  /* NAVEGACIÓN MÓVIL - CONTRASTE */
  .mobile-menu-btn {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
  }
  
  .mobile-menu {
    background: rgba(0,0,0,0.95) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .mobile-menu a {
    color: #ffffff !important;
  }
  
  .mobile-menu a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #ffcccc !important;
  }
  
  /* FOOTER BLANCO */
  footer,
  footer * {
    color: #ffffff !important;
  }
  
  /* STATS NÚMEROS DESTACADOS */
  .stat-number {
    color: #ffcccc !important;
  }
  
  /* FAQ MEJORADO */
  .faq-q::after {
    color: #ffcccc !important;
  }
  
  /* BADGES Y ELEMENTOS PEQUEÑOS */
  .badge,
  .service-areas li {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
  }
  
  /* TARJETAS CON FONDO SEMI-TRANSPARENTE */
  .service-card,
  .project-item,
  .safety-item,
  .contact-item,
  .cta-box,
  .feature,
  .step,
  .spec {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(5px) !important;
  }
  
  /* MEJORAR CONTRASTE EN ELEMENTOS INTERACTIVOS */
  .faq-q {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    margin-bottom: 2px !important;
  }
  
  .faq-a {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 0 0 8px 8px !important;
    margin-bottom: 8px !important;
    padding: 16px !important;
  }
  
  /* OVERRIDE FINAL PARA CUALQUIER ELEMENTO */
  * {
    color: #ffffff !important;
  }
  
  /* EXCEPCIONES ESPECÍFICAS - NO AFECTAR BOTONES E IMÁGENES */
  .btn,
  .btn-primary,
  .btn-whatsapp,
  .btn-large,
  img,
  svg {
    color: inherit !important;
  }
  
  /* ASEGURAR QUE LAS IMÁGENES NO SE AFECTEN */
  img {
    filter: none !important;
  }
  
  /* PÁRRAFOS CON SOMBRA PARA LEGIBILIDAD */
  p,
  .lead2,
  .service-card p,
  .project-info p,
  .safety-item p,
  .contact-item p {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
  }
}

/* ===== CORRECCIÓN ADICIONAL PARA HERO TABS ===== */
@media (max-width: 768px) {
  .hero-tab,
  .hero-tab * {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
  }
  
  .hero-tab .chev {
    color: #ffffff !important;
  }
  
  .hero-tab.active .chev {
    color: #ffcccc !important;
  }
}
/* EL
IMINAR OUTLINE DE SELECCIÓN EN HERO - SOLO PC */
@media (min-width: 769px) {
  .hero-tab,
  .hero-tab *,
  .hero h1,
  .hero .lead,
  .hero .kicker,
  .hero .wrap,
  .hero .wrap * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  
  .hero-tab:focus,
  .hero-tab:active,
  .hero-tab:hover {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Eliminar selección de texto en hero */
  .hero::selection,
  .hero *::selection {
    background: transparent;
  }
  
  .hero::-moz-selection,
  .hero *::-moz-selection {
    background: transparent;
  }
}/* HE
RO IMÁGENES COMPLETAS EN MÓVIL */
@media (max-width: 768px) {
  .hero img.bg {
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important; /* Fondo negro para las barras laterales */
  }
  
  /* Asegurar que el hero mantenga su altura */
  .hero {
    background: #000 !important; /* Fondo negro consistente */
  }
}/* CORREC
CIÓN AGRESIVA - HERO IMÁGENES COMPLETAS EN MÓVIL */
@media screen and (max-width: 768px) {
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
  }
  
  html body .hero,
  html body section.hero {
    background: #000000 !important;
    background-color: #000000 !important;
  }
  
  /* Forzar contenedor del hero */
  html body .hero {
    overflow: hidden !important;
    position: relative !important;
  }
}/*
 CORRECCIÓN FINAL - HERO IMÁGENES VISIBLES Y COMPLETAS EN MÓVIL */
@media screen and (max-width: 768px) {
  /* Revertir fondo negro y mostrar imagen */
  html body .hero,
  html body section.hero {
    background: transparent !important;
    background-color: transparent !important;
  }
  
  /* Ajustar solo el object-fit para mostrar imagen completa */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Asegurar que el contenedor no oculte la imagen */
  html body .hero {
    background-image: none !important;
  }
}/* RE
VERTIR CAMBIOS DEL HERO - VOLVER AL ESTADO ORIGINAL */
@media screen and (max-width: 768px) {
  /* Restaurar comportamiento original del hero */
  html body .hero,
  html body section.hero {
    background: initial !important;
    background-color: initial !important;
    background-image: initial !important;
  }
  
  /* Restaurar object-fit original */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    object-fit: cover !important;
    object-position: center center !important;
    background: initial !important;
    display: initial !important;
    opacity: initial !important;
    visibility: initial !important;
    width: initial !important;
    height: initial !important;
  }
  
  /* Limpiar cualquier override del contenedor */
  html body .hero {
    overflow: initial !important;
    position: initial !important;
    background-image: initial !important;
  }
}/* ANU
LAR TODOS LOS CAMBIOS DEL HERO - RESTAURAR COMPLETAMENTE */
@media screen and (max-width: 768px) {
  /* Anular todos los cambios previos del hero */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    object-fit: unset !important;
    object-position: unset !important;
    background: unset !important;
    display: unset !important;
    opacity: unset !important;
    visibility: unset !important;
    width: unset !important;
    height: unset !important;
  }
  
  html body .hero,
  html body section.hero {
    background: unset !important;
    background-color: unset !important;
    background-image: unset !important;
    overflow: unset !important;
    position: unset !important;
  }
}/* HERO IM
ÁGENES COMPLETAS COMO BAKER CONSTRUCTION - SOLO MÓVIL */
@media screen and (max-width: 768px) {
  /* Mostrar imagen completa con barras blancas */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    object-fit: contain !important;
    object-position: center center !important;
  }
  
  /* Fondo blanco para las barras laterales */
  html body .hero,
  html body section.hero {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
  
  /* Asegurar que el contenedor tenga fondo blanco */
  html body .hero {
    background-image: none !important;
  }
}/* REPAR
AR HERO - VOLVER AL ESTADO ORIGINAL COMPLETAMENTE */
@media screen and (max-width: 768px) {
  /* Anular TODOS los cambios del hero */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    object-fit: revert !important;
    object-position: revert !important;
  }
  
  /* Restaurar fondo original del hero */
  html body .hero,
  html body section.hero {
    background: revert !important;
    background-color: revert !important;
    background-image: revert !important;
  }
}/*
 EXTENDER HERO HACIA ABAJO EN MÓVIL */
@media screen and (max-width: 768px) {
  /* Aumentar altura del hero para que la imagen cubra más abajo */
  html body .hero,
  html body section.hero {
    height: 75vh !important;
    min-height: 500px !important;
  }
  
  /* Asegurar que la imagen cubra toda la nueva altura */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    height: 100% !important;
  }
}/* CORREGIR 
DEFORMACIÓN DE IMÁGENES DEL HERO */
@media screen and (max-width: 768px) {
  /* Mantener proporción correcta de las imágenes */
  html body .hero img.bg,
  html body .hero .bg,
  html body section.hero img,
  html body .hero img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}/* 
DISEÑO MÓVIL ESPECÍFICO - SOLO MAX-WIDTH 480PX */
@media screen and (max-width: 480px) {
  
  /* HEADER FIJO */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    border-bottom: none !important;
  }
  
  .nav {
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* LOGO ALINEADO IZQUIERDA */
  .mcr-logo {
    width: 30vw !important;
    max-width: 120px !important;
    height: auto !important;
    margin: 0 !important;
  }
  
  /* BOTÓN MENÚ HAMBURGUESA */
  .mobile-menu-btn {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background: #F2F2F2 !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 18px !important;
    color: #333 !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* HERO CONTENEDOR VERTICAL */
  .hero {
    min-height: 75vh !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 64px !important; /* Compensar header fijo */
  }
  
  .hero .wrap {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    text-align: center !important;
  }
  
  /* TÍTULO */
  .hero h1 {
    font-family: inherit !important;
    font-weight: bold !important;
    color: #111111 !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin: 0 0 12px 0 !important;
    text-shadow: none !important;
  }
  
  /* DIVISOR ROJO */
  .hero h1::after {
    content: '' !important;
    display: block !important;
    width: 56px !important;
    height: 2px !important;
    background: var(--red) !important;
    margin: 12px auto 0 auto !important;
  }
  
  /* SUBTÍTULO */
  .hero .lead {
    color: #555555 !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin: 12px 0 18px 0 !important;
    text-shadow: none !important;
  }
  
  /* KICKER (si existe) */
  .hero .kicker {
    color: #555555 !important;
    font-size: 14px !important;
    text-shadow: none !important;
    margin-bottom: 8px !important;
  }
  
  /* CTA PRINCIPAL */
  .hero .btn,
  .hero .btn-primary {
    background: var(--red) !important;
    color: #ffffff !important;
    width: 88% !important;
    max-width: 320px !important;
    padding: 13px 16px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
    margin: 18px auto 0 auto !important;
    border: none !important;
    text-decoration: none !important;
    min-height: 44px !important; /* Accesibilidad */
  }
  
  /* HERO TABS (INDICADORES) */
  .hero-tabs {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    grid-template-columns: none !important;
  }
  
  .hero-tab {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    min-height: 44px !important; /* Área táctil accesible */
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-tab::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
  }
  
  .hero-tab.active::before {
    background: var(--red) !important;
  }
  
  .hero-tab .chev {
    display: none !important;
  }
  
  /* OCULTAR ELEMENTOS INNECESARIOS */
  .nav ul {
    display: none !important;
  }
  
  /* AJUSTAR BODY PARA HEADER FIJO */
  body {
    padding-top: 0 !important;
  }
  
  /* ASEGURAR QUE EL CONTENIDO NO SE OCULTE BAJO EL HEADER */
  .hero {
    position: relative !important;
  }
}/
* LAYOUT MÓVIL ESPECÍFICO - SOLO MAX-WIDTH 480PX */
@media screen and (max-width: 480px) {
  
  /* HEADER FIJO - 64PX */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
  }
  
  .nav {
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* LOGO ALINEADO IZQUIERDA - ESCALA +25% */
  .mcr-logo {
    transform: scale(1.25) !important;
    transform-origin: left center !important;
  }
  
  /* BOTÓN MENÚ HAMBURGUESA */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #F2F2F2 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }
  
  /* HERO CONTENEDOR - MIN-HEIGHT 75VH */
  .hero {
    min-height: 75vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px !important;
    margin-top: 64px !important; /* Compensar header fijo */
  }
  
  .hero .wrap {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* TÍTULO - SANS BOLD 28-32PX */
  .hero h1 {
    font-weight: bold !important;
    font-size: 30px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  
  /* DIVISOR - LÍNEA 56X2PX CORPORATIVO */
  .hero h1::after {
    content: '' !important;
    display: block !important;
    width: 56px !important;
    height: 2px !important;
    background: var(--red) !important;
    margin: 11px auto 0 auto !important;
  }
  
  /* SUBTÍTULO - 16-18PX */
  .hero .lead {
    font-size: 17px !important;
    text-align: center !important;
    margin: 10px 0 0 0 !important;
  }
  
  /* KICKER */
  .hero .kicker {
    text-align: center !important;
    margin-bottom: 0 !important;
  }
  
  /* CTA PRINCIPAL - ANCHO 88% MAX 320PX */
  .hero .btn,
  .hero .btn-primary {
    width: 88% !important;
    max-width: 320px !important;
    padding: 13px 16px !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: block !important;
    margin: 18px auto 0 auto !important;
    min-height: 44px !important; /* Accesibilidad */
  }
  
  /* INDICADORES SLIDER DOTS - 4 CÍRCULOS 12PX */
  .hero-tabs {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    background: none !important;
  }
  
  .hero-tabs::before {
    display: none !important;
  }
  
  .hero-tab {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    /* Área táctil accesible */
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-tab::before {
    content: '' !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    position: absolute !important;
  }
  
  .hero-tab.active::before {
    background: var(--red) !important;
  }
  
  .hero-tab .chev {
    display: none !important;
  }
  
  /* OCULTAR MENÚ DESKTOP */
  .nav ul {
    display: none !important;
  }
  
  /* AJUSTAR BODY PARA HEADER FIJO */
  body {
    padding-top: 0 !important;
  }
}/* L
AYOUT MÓVIL - CONTENIDO EN TERCIO INFERIOR */
@media screen and (max-width: 480px) {
  
  /* HERO ALTURA AUMENTADA */
  .hero {
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important; /* Anclar contenido abajo */
    padding: 0 22px 88px 22px !important; /* Bottom padding para separar del fondo */
    margin-top: 64px !important; /* Compensar header fijo */
  }
  
  .hero .wrap {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* TÍTULO CENTRADO */
  .hero h1 {
    font-weight: bold !important;
    font-size: 30px !important;
    text-align: center !important;
    margin: 0 !important;
  }
  
  /* DIVISOR 56X2PX - 10-12PX DEBAJO DEL TÍTULO */
  .hero h1::after {
    content: '' !important;
    display: block !important;
    width: 56px !important;
    height: 2px !important;
    background: var(--red) !important;
    margin: 11px auto 0 auto !important;
  }
  
  /* SUBTÍTULO 16-18PX - MARGEN TOP 8-12PX */
  .hero .lead {
    font-size: 17px !important;
    text-align: center !important;
    margin: 10px 0 0 0 !important;
  }
  
  /* KICKER CENTRADO */
  .hero .kicker {
    text-align: center !important;
    margin-bottom: 0 !important;
  }
  
  /* CTA CENTRADO - ANCHO 88% MAX 320PX + MARGEN EXTRA ABAJO */
  .hero .btn,
  .hero .btn-primary {
    width: 88% !important;
    max-width: 320px !important;
    padding: 13px 16px !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: block !important;
    margin: 18px auto 18px auto !important; /* Margen extra abajo para separar de dots */
    min-height: 44px !important;
  }
  
  /* SLIDER DOTS - 14PX, GAP 8PX, CENTRADOS AL FONDO */
  .hero-tabs {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    background: none !important;
  }
  
  .hero-tabs::before {
    display: none !important;
  }
  
  .hero-tab {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    /* Área táctil accesible */
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-tab::before {
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    position: absolute !important;
  }
  
  .hero-tab.active::before {
    background: var(--red) !important;
  }
  
  .hero-tab .chev {
    display: none !important;
  }
  
  /* HEADER FIJO SIN CAMBIOS DE CONTENIDO */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
  }
  
  .nav {
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  .mcr-logo {
    transform: scale(1.25) !important;
    transform-origin: left center !important;
  }
  
  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #F2F2F2 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }
  
  .nav ul {
    display: none !important;
  }
  
  body {
    padding-top: 0 !important;
  }
}/*
 LAYOUT MÓVIL COMPLETO CON OVERLAY */
@media screen and (max-width: 480px) {
  
  /* HEADER 64PX BLANCO CON SOMBRA */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
  }
  
  .nav {
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  
  /* LOGO IZQUIERDA +25% TAMAÑO */
  .mcr-logo {
    transform: scale(1.25) !important;
    transform-origin: left center !important;
  }
  
  /* HAMBURGER DERECHA EN CAJA GRIS CLARO */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #F2F2F2 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }
  
  /* HERO MIN-HEIGHT 80VH CON OVERLAY */
  .hero {
    min-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-bottom: 88px !important;
    margin-top: 64px !important;
    position: relative !important;
  }
  
  /* OVERLAY DE FONDO 0.35 PARA CONTRASTE */
  .hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  
  /* CONTENIDO SOBRE EL OVERLAY */
  .hero .wrap {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* TÍTULO CENTRADO */
  .hero h1 {
    font-weight: bold !important;
    font-size: 30px !important;
    text-align: center !important;
    margin: 0 !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* DIVISOR 56X2PX CENTRADO 10-12PX DEBAJO */
  .hero h1::after {
    content: '' !important;
    display: block !important;
    width: 56px !important;
    height: 2px !important;
    background: var(--red) !important;
    margin: 11px auto 0 auto !important;
  }
  
  /* SUBTÍTULO CENTRADO 16-18PX */
  .hero .lead {
    font-size: 17px !important;
    text-align: center !important;
    margin: 10px 0 0 0 !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* KICKER CENTRADO */
  .hero .kicker {
    text-align: center !important;
    margin-bottom: 0 !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* CTA CENTRADO 88% MAX 320PX */
  .hero .btn,
  .hero .btn-primary {
    width: 88% !important;
    max-width: 320px !important;
    padding: 13px 16px !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: block !important;
    margin: 18px auto 18px auto !important;
    min-height: 44px !important;
    z-index: 2 !important;
    position: relative !important;
  }
  
  /* SLIDER DOTS GRUPO CENTRADO AL FONDO */
  .hero-tabs {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    background: none !important;
    z-index: 2 !important;
  }
  
  .hero-tabs::before {
    display: none !important;
  }
  
  .hero-tab {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-tab::before {
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    position: absolute !important;
  }
  
  .hero-tab.active::before {
    background: var(--red) !important;
  }
  
  .hero-tab .chev {
    display: none !important;
  }
  
  /* OCULTAR MENÚ DESKTOP */
  .nav ul {
    display: none !important;
  }
  
  /* AJUSTAR BODY */
  body {
    padding-top: 0 !important;
  }
}/*
 SLIDER DOTS ESPECÍFICOS - MÓVIL ÚNICAMENTE */
@media screen and (max-width: 480px) {
  
  /* CONTENEDOR DE DOTS - GRUPO CENTRADO */
  .hero-tabs {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 9px !important;
    width: auto !important;
    max-width: 120px !important; /* Grupo compacto */
    padding: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
    background: none !important;
    z-index: 2 !important;
    align-items: center !important; /* Alineación vertical exacta */
    line-height: 1 !important; /* Misma línea base */
  }
  
  .hero-tabs::before {
    display: none !important;
  }
  
  /* DOT INDIVIDUAL - 16X16PX CON ÁREA TÁCTIL 36PX */
  .hero-tab {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    border: none !important;
    padding: 10px !important; /* Área táctil invisible 36px total */
    font-size: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    box-shadow: none !important; /* Sin sombra */
    /* Prohibir transformaciones */
    transform: none !important;
    margin: 0 !important;
    /* Animación suave solo opacity/fill */
    transition: background-color 150ms ease !important;
  }
  
  /* CÍRCULO VISIBLE 16PX */
  .hero-tab::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    border: none !important;
    box-shadow: none !important;
    /* Animación suave */
    transition: background-color 150ms ease !important;
  }
  
  /* DOT ACTIVO - MISMO TAMAÑO, SOLO CAMBIO DE COLOR */
  .hero-tab.active {
    background: var(--red) !important;
    /* Prohibir elevación/desplazamiento */
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  
  .hero-tab.active::before {
    background: var(--red) !important;
    /* Mantener mismo tamaño y posición */
    width: 16px !important;
    height: 16px !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
  }
  
  /* HOVER SUTIL SIN ELEVACIÓN */
  .hero-tab:hover {
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  
  .hero-tab:hover::before {
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
  }
  
  /* OCULTAR CHEVRON COMPLETAMENTE */
  .hero-tab .chev {
    display: none !important;
  }
  
  /* DESHABILITAR ANIMACIONES BOUNCE/RAISE */
  .hero-tab,
  .hero-tab::before,
  .hero-tab.active,
  .hero-tab.active::before {
    animation: none !important;
    transform: translate(-50%, -50%) !important; /* Solo para ::before */
  }
  
  .hero-tab {
    transform: none !important; /* Para el elemento principal */
  }
}/* C
ORRECCIÓN DOTS - IMPLEMENTACIÓN SIMPLE Y CORRECTA */
@media screen and (max-width: 480px) {
  
  /* CONTENEDOR DE DOTS */
  .hero-tabs {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 9px !important;
    width: auto !important;
    max-width: 120px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    z-index: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
  }
  
  .hero-tabs::before {
    display: none !important;
  }
  
  /* DOT INDIVIDUAL - CÍRCULO DIRECTO 16PX */
  .hero-tab {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #D0D0D0 !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    /* Área táctil 36px con padding invisible */
    padding: 10px !important;
    margin: 0 !important;
    /* Sin transformaciones */
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    /* Animación suave solo color */
    transition: background-color 150ms ease !important;
    /* Ocultar texto */
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
  }
  
  /* DOT ACTIVO - SOLO CAMBIO DE COLOR */
  .hero-tab.active {
    background: var(--red) !important;
    /* Mantener mismo tamaño y posición */
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  
  /* ELIMINAR ::before COMPLETAMENTE */
  .hero-tab::before {
    display: none !important;
    content: none !important;
  }
  
  /* HOVER SIN EFECTOS */
  .hero-tab:hover {
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  
  /* OCULTAR CHEVRON */
  .hero-tab .chev {
    display: none !important;
  }
  
  /* DESHABILITAR ANIMACIONES BOUNCE */
  .hero-tab,
  .hero-tab.active {
    animation: none !important;
  }
}/*
 BOTÓN WHATSAPP VERDE EN MÓVIL - PÁGINAS SECUNDARIAS */
@media (max-width: 768px) {
  /* Solo para páginas que NO son la principal */
  body:not(.home-page) .btn-whatsapp {
    background: #25D366 !important; /* Verde WhatsApp oficial */
    border-color: #25D366 !important;
    color: #ffffff !important;
  }
  
  body:not(.home-page) .btn-whatsapp:hover {
    background: #128C7E !important; /* Verde WhatsApp hover */
    border-color: #128C7E !important;
  }
}

/* ELIMINAR LOGO WHATSAPP EN TODAS LAS VERSIONES */
.btn-whatsapp img {
  display: none !important;
}/* CORRECCIÓ
N PC - FONDOS GRIS CLARO Y TEXTOS NEGROS */
@media (min-width: 769px) {
  /* Fondos gris muy claro para PC */
  .bg-dark,
  .section.bg-dark {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
  }
  
  /* Textos negros legibles en PC */
  .bg-dark,
  .bg-dark *,
  .bg-dark h1,
  .bg-dark h2,
  .bg-dark h3,
  .bg-dark h4,
  .bg-dark p,
  .bg-dark .kicker,
  .bg-dark .lead2 {
    color: #222222 !important;
  }
  
  /* Títulos más destacados */
  .bg-dark h1,
  .bg-dark h2,
  .bg-dark h3,
  .bg-dark .h2 {
    color: #111111 !important;
    font-weight: 800 !important;
  }
  
  /* Párrafos legibles */
  .bg-dark p,
  .bg-dark .lead2 {
    color: #444444 !important;
  }
  
  /* Kickers */
  .bg-dark .kicker {
    color: #666666 !important;
  }
  
  /* Tarjetas y elementos dentro de bg-dark */
  .bg-dark .feature,
  .bg-dark .step,
  .bg-dark .spec {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #333333 !important;
  }
  
  .bg-dark .feature h3,
  .bg-dark .feature h4,
  .bg-dark .step h4,
  .bg-dark .spec h4 {
    color: #222222 !important;
  }
  
  .bg-dark .feature p,
  .bg-dark .step p,
  .bg-dark .spec p {
    color: #555555 !important;
  }
}/* CORREC
CIÓN AGRESIVA PC - FONDOS CLAROS Y TEXTOS NEGROS */
@media (min-width: 769px) {
  /* FORZAR FONDOS CLAROS EN PC CON MÁXIMA ESPECIFICIDAD */
  html body .bg-dark,
  html body section.bg-dark,
  html body .section.bg-dark,
  html body div.bg-dark {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    background-image: none !important;
    color: #333333 !important;
  }
  
  /* TEXTOS NEGROS EN SECCIONES OSCURAS - PC */
  html body .bg-dark *,
  html body .bg-dark h1,
  html body .bg-dark h2,
  html body .bg-dark h3,
  html body .bg-dark h4,
  html body .bg-dark h5,
  html body .bg-dark h6,
  html body .bg-dark p,
  html body .bg-dark span,
  html body .bg-dark div,
  html body .bg-dark .kicker,
  html body .bg-dark .h2,
  html body .bg-dark .lead2 {
    color: #222222 !important;
    text-shadow: none !important;
  }
  
  /* TÍTULOS MÁS DESTACADOS EN PC */
  html body .bg-dark h1,
  html body .bg-dark h2,
  html body .bg-dark h3,
  html body .bg-dark .h2 {
    color: #111111 !important;
    font-weight: 800 !important;
  }
  
  /* PÁRRAFOS LEGIBLES EN PC */
  html body .bg-dark p,
  html body .bg-dark .lead2 {
    color: #444444 !important;
    font-weight: 500 !important;
  }
  
  /* KICKERS EN PC */
  html body .bg-dark .kicker {
    color: #666666 !important;
    font-weight: 600 !important;
  }
  
  /* TARJETAS DENTRO DE BG-DARK EN PC */
  html body .bg-dark .feature,
  html body .bg-dark .step,
  html body .bg-dark .spec,
  html body .bg-dark .process .step {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    color: #333333 !important;
  }
  
  html body .bg-dark .feature h3,
  html body .bg-dark .feature h4,
  html body .bg-dark .step h4,
  html body .bg-dark .spec h4 {
    color: #222222 !important;
  }
  
  html body .bg-dark .feature p,
  html body .bg-dark .step p,
  html body .bg-dark .spec p {
    color: #555555 !important;
  }
}