/* Fuente Lato aplicada global */
* { font-family: "Lato", sans-serif !important; }

/* Evita scroll horizontal por ensanches temporales (FA i2svg, etc.) */
html, body {
  max-width: 100%;
  overflow-x: clip; /* mejor que hidden en navegadores modernos */
}

/* Si algún SVG de FA “empuja”, recórtalo sin afectar layout */
svg[data-icon] {
  max-width: 100%;
  overflow: clip;
  display: inline-block;
}

/* Carrusel ya tiene overflow hidden, reforzamos el contenedor principal por si alguna animación desplaza fuera del viewport */
.carousel, .carousel * {
  overscroll-behavior-x: contain;
}
/*
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23noise)'/></svg>");
  background-repeat:repeat;
  opacity:.1; pointer-events:none; z-index:9999;
}
*/

img{ max-width:100%; height:auto; }

/* --- logo --- */
.logo{ width:25%; }

/* --- banner destacado --- */
.banner2{
  height:480px;
  background-image:url(/imagenes/banner2.png);
  background-size:cover;
  background-position:center;
  position:relative; display:flex; align-items:center; color:#fff;
}
.banner2::before{
  content:""; position:absolute; inset:0; background:#000000c2; z-index:1;
}
.banner2 > *{ position:relative; z-index:2; }

/* --- tipografías y títulos --- */
h2{ font-weight:900; font-size:3rem!important; margin-bottom:1rem; }
h5{ font-size:20px; font-weight:900; margin-bottom:20px; }

/* --- navbar --- */
.navbar{
  padding:1rem 0; position:absolute; top:0; left:0; width:100%; z-index:10;
  background-color:rgba(0,0,0,.6);
}
.navbar-nav .nav-link{
  color:#fff; font-size:22px; font-weight:600; margin:0 15px; transition:color .3s ease;
}
.navbar-nav .nav-link:hover{ color:#FF5C00; }

/* --- animaciones carrusel --- */
.carousel-item .animated-text{ opacity:0; transform:translateX(-50px); transition:all 1s ease-out; }
.carousel-item.active .animated-text{ opacity:1; transform:translateX(0); }
.carousel-item .animated-text-bottom{ opacity:0; transform:translateY(50px); transition:all 1s ease-out; }
.carousel-item.active .animated-text-bottom{ opacity:1; transform:translateY(0); }
.carousel-item .animated-text-right-to-left{ opacity:0; transform:translateX(50px); transition:all 1s ease-out; }
.carousel-item.active .animated-text-right-to-left{ opacity:1; transform:translateX(-50px); }

.lead{ font-size:35px; }

.btn-orange{
  background:#FF5C00; color:#fff; border:none; font-weight:500;
  padding:12px 35px; border-radius:50px; font-size:1rem;
  transition:background-color .3s ease, transform .2s ease; display:inline-block; text-decoration:none;
}
.btn-orange:hover{ background:#e05200; transform:translateY(-2px); }

#galeria{ color:#f5f5f5; padding-top:10%!important; padding-bottom:8%!important; background:#111!important; }
.parrafoGaleria{ font-size:20px; padding-bottom:2%; }
.letra-editado{ color:#FF5C00; font-weight:800; }

.galeria-editado img{ object-fit:cover; width:100%; max-height:250px; display:block; transition:transform .3s ease; }
.galeria-editado img:hover{ transform:scale(1.05); }
.espaciado-editado{ padding:10%; }

#galeriaModal img{ max-height:90vh; object-fit:contain; }

h4{ padding-top:5%; padding-bottom:2%; }

.carousel-slide{
  height:100vh; background-size:cover; background-position:center; position:relative;
  z-index:1; overflow:hidden;
}
.cajatextoBanner{ margin-left:47%; width:60%; }
.slide-1{ background-image:url('/imagenes/1.webp'); }
.slide-2{ background-image:url('/imagenes/2.webp'); }
.slide-3{ background-image:url('/imagenes/3.webp'); }

.carrusel-editado{ padding-left:12%; }
.carrusel-editado2{ padding-right:12%; }

/* efecto luz */
.carousel-slide::before,
.carousel-slide::after{
  content:""; position:absolute; width:200%; height:200%; top:-80%; left:-80%;
  background:radial-gradient(circle, #ff5e0146 0%, transparent 50%);
  animation:moveLightBounce 3s ease-in-out infinite alternate;
}
.carousel-slide::after{ animation-delay:2s; }
@keyframes moveLightBounce{ 0%{ transform:translate(0,0); } 100%{ transform:translate(25%,3%); } }

.cursor-pointer{ cursor:pointer; }

/* --- secciones --- */
#sobre{ text-align:justify; color:#fff; background:#111; padding:10% 0 1%; }
.cajaSobre{ width:65%; }
.titulos1{ font-size:45px; text-align:center; margin-bottom:8%!important; }
#sobre p{ font-size:25px; font-weight:300; margin:0 auto 40px; }

#servicios{ background:#111; color:#fff; padding:15%!important; }
.service-box{
  background:#1a1a1a; border-radius:12px; padding:40px 60px; text-align:center; height:500px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;
}
.service-box p{ font-size:20px; font-weight:300; }
.servicios-icono{ width:70%; margin-bottom:10%; }

#materiales{
  padding:80px 20px; background-image:url(/imagenes/3a.png);
  height:600px; width:100%; background-size:cover; background-position:center;
  position:relative; align-items:center; color:#fff; flex-direction:column; display:flex; justify-content:flex-end;
}
#materiales h2{ text-align:center; margin-bottom:30px; background:#1a1919d2; padding:3%; width:100%; font-size:2.5rem; }
.letra-editado2{ width:65%!important; text-align:center!important; color:#e05200; font-weight:800!important; font-size:25px!important; }
#materiales p{ font-size:25px; font-weight:300; margin-bottom:40px; width:100%; text-align:justify; }
.cajaMaterales{ display:flex; flex-direction:column; align-items:center; justify-content:center; }

#trabajos{ color:#f5f5f5; padding:15% 0!important; background:#111!important; }
.pastilla{
  position:relative; overflow:hidden; border-radius:10px; cursor:pointer;
  opacity:.4; transition:opacity .4s ease; height:500px; width:400px; justify-content:space-evenly;
}
.pastilla:hover{ opacity:1; }
.pastilla img{ transition:transform .5s ease; height:100%; width:100%; object-fit:cover; }
.pastilla:hover img{ transform:scale(1.1); }
.hover-text{
  font-weight:600; font-size:22px; position:absolute; bottom:-100%; left:0; right:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(30,30,30,.664) 50%, rgba(0,0,0,.014) 100%);
  color:#FF5C00; padding:10%; text-shadow:2px 2px 6px rgba(0,0,0,.562); transition:bottom .4s ease, opacity .4s ease; opacity:0;
}
.pastilla:hover .hover-text{ bottom:0; opacity:1; }

.contacto-seccion{ padding:5%; background:#0f0f0f!important; position:relative; color:#fff; }
.cajaformulario{ width:55%; }
.cajaformulario2{ width:30%; }
.titulo-naranja{ color:#f35000; }
.texto-light{ color:#dcdcdc; font-weight:300; font-size:20px; margin-bottom:8%; }

.btn-naranja{
  width:100%; background:linear-gradient(to right, #ff5500); color:#fff; font-size:1.1rem; font-weight:bold;
  padding:12px 40px; border-radius:30px; border:none; box-shadow:0 4px 6px rgba(0,0,0,.4); transition:all .3s ease-in-out; margin-top:3%;
}
.btn-naranja:hover{ background:linear-gradient(to right, #e64800, #cc2900); transform:translateY(-2px); }
.link-naranja{ color:#f35000; text-decoration:none; }
.link-naranja:hover{ text-decoration:underline; }

/* botón subir */
#btnSubir{
  position:fixed; bottom:30px; right:30px; z-index:9999;
  background:#ff5f00; color:#fff; border:none; border-radius:50%; width:50px; height:50px;
  font-size:24px; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#btnSubir.mostrar{ opacity:1; pointer-events:auto; }
#btnSubir:hover{ background:#e64800; }

.carteles1{ margin-top:8%; background:#0f0f0f!important; color:#fff; padding:40px 20px; }

/* Footer */
footer{ background:#0f0f0f!important; color:#fff; padding:40px 20px; }
footer p{ margin:0; }

/* WhatsApp */
.btn-whatsapp{
  position:fixed; bottom:95px; right:26px; z-index:9999; width:60px; height:60px; border-radius:50%;
  display:flex; justify-content:center; align-items:center; background:#25D366; box-shadow:0 4px 8px rgba(0,0,0,.4);
  transition:transform .3s ease, background .3s ease;
}
.btn-whatsapp:hover{ background:#1ebe5c; transform:scale(1.1); }
.icono-wtsap{ width:60%; height:auto; }

@supports (padding: max(0px)) {
  .btn-whatsapp {
    bottom: calc(env(safe-area-inset-bottom) + 110px) !important;
    right: calc(env(safe-area-inset-right) + 27px) !important;
  }
}


/* ===========================
   MEDIA QUERIES RESPONSIVE (OPTIMIZADAS)
   RANGOS: ≤576 | 577–768 | 769–992 | 993–1200 | 1201–1400
   =========================== */

/* ============ ≤576: celulares chicos ============ */
@media (max-width: 576px) {
  .btn-whatsapp {
    width: 52px !important;
    height: 52px !important;
  }
  .btn-whatsapp img,
  .btn-whatsapp .icono-wtsap {
    width: 58%;
    height: auto;
  }
  .carousel-slide { height: 70vh; }

  .lead { font-size: 20px !important; }
  .lead2 { text-align: center; }

  .logo { width: 30%; }
  .navbar-brand { width: 70% !important; }
  .navbar-nav { text-align: end; }
  #btnSubir { display: none !important; }

  h2, h3 { font-size: 28px !important; }

  .cajatextoBanner{
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0;
    display:flex; flex-direction:column; align-items:center;
  }

  /* Sobre */
  #sobre p { padding-top: 5%; font-size: 16px; }
  .cajaSobre { width: auto; margin: 10% !important; }

  /* Servicios */
  #servicios { margin: 0; padding: 0 !important; }
  .titulos1 { padding-top: 20%; }
  .service-box { padding: 5%; }
  .service-box p { font-size: 16px; }

  /* Materiales: sin solapes */
  #materiales .cajaMaterales p,
  #materiales .letra-editado2{
    height:auto; position:static !important; float:none !important; clear:both;
    width:100% !important; max-width:100%;
    margin:0 0 12px 0; line-height:1.5; overflow-wrap:anywhere;
  }
  #materiales p { font-size:16px; width:100%; }
  .letra-editado2 { font-size:18px !important; }

  /* Trabajos */
  #trabajos .pastilla{ width:100% !important; height:auto !important; aspect-ratio:4/3; }
  #trabajos .pastilla img{ width:100%; height:100%; object-fit:cover; }
  #trabajos .hover-text{ font-size:16px !important; padding:6px 10px; }

  /* Contacto */
  #contacto .row{ display:flex; flex-direction:column; gap:1px; }
  .cajaformulario{ padding:4% !important; }
  .cajaformulario2{
    display:flex !important; align-items:center; text-align:center; flex-direction:column;
  }
  #contacto [class*="col-"], #contacto [class*="col-md"]{ width:100%!important; max-width:100%!important; }
  #contacto h2, #contacto h3, #contacto h4{ text-align:center; margin-bottom:.5rem; }
  #contacto p{
    font-size:16px; text-align:center; margin:0 auto 52px; max-width:90%;
    hyphens:auto; word-break:normal; overflow-wrap:anywhere;
  }
  #contacto form .form-control,
  #contacto input, #contacto textarea, #contacto select{
    width:100%!important; min-height:44px; font-size:16px;
  }
  #contacto textarea{ min-height:120px; }
  #contacto .container, #contacto{ padding-left:1px!important; padding-right:1px!important; }

  /* Galería internas */
  .cajaSectionGaleria{ margin-top:40% !important; }
  .parrafoGaleria{ font-size:16px !important; }
}

/* ============ 577–768: cel. grandes / tablet vertical ============ */
@media (min-width: 577px) and (max-width: 768px){

  /* Carrusel */
  .carrusel-editado, .carrusel-editado2{ padding-inline:2% !important; }
  .carousel-slide{ height:75vh; }
  .lead{ font-size:28px !important; }
  .lead2{ text-align:center; }

  /* Header */
  .logo{ width:35%; }
  .navbar-brand{ width:65% !important; }
  .navbar-nav{ text-align:end; }
  #btnSubir{ display:none !important; }

  h2, h3{ font-size:30px !important; line-height:1.2; }

  /* Hero */
  .cajatextoBanner{
    margin:auto !important; width:90% !important; padding:0 10px;
    display:flex; flex-direction:column !important; align-items:center; text-align:center;
  }

  /* Sobre */
  #sobre p{
    padding-top:3%; font-size:20px; text-align:center; margin:0 auto; max-width:92%; line-height:1.6;
  }
  .cajaSobre{ width:auto; margin:auto !important; }

  /* Servicios: 2 columnas */
  #servicios .row{
    display:grid !important; grid-template-columns:repeat(2, 1fr); gap:0; justify-items:center;
  }
  #servicios .service-box{ width:100% !important; max-width:300px; }
  .titulos1{ padding-top:12%; }
  .service-box{ padding:8% !important; }
  .service-box p{ font-size:18px; }

  /* Materiales */
  .cajaMaterales{ flex-direction:column !important; }
  .cajaMaterales p{ width:90% !important; font-size:20px !important; }
  .letra-editado2{ width:90% !important; font-size:20px !important; padding:2% !important; }

  /* Trabajos */
  #trabajos .pastilla{ width:100% !important; height:auto !important; aspect-ratio:16/10; }
  #trabajos .pastilla img{ width:100%; height:100%; object-fit:cover; }
  #trabajos .hover-text{ font-size:20px !important; padding:8px 12px; }

  /* Contacto */
  #contacto .row{ display:flex; flex-direction:column; gap:12px; }
  #contacto [class*="col-"], #contacto [class*="col-md"]{ width:100% !important; max-width:100% !important; }
  .cajaformulario{ padding:3% !important; }
  .cajaformulario2{ display:flex !important; align-items:center; text-align:center; flex-direction:column; }
  #contacto h2, #contacto h3, #contacto h4{ text-align:center; margin-bottom:.5rem; }
  #contacto p{
    font-size:22px; text-align:center; margin:0 auto 28px; max-width:90%;
    hyphens:auto; word-break:normal; overflow-wrap:anywhere; line-height:1.6;
  }
  #contacto form .form-control,
  #contacto input, #contacto textarea, #contacto select{
    width:100% !important; min-height:44px; font-size:16px;
  }
  #contacto textarea{ min-height:130px; }
  #contacto .container, #contacto{ padding-inline:10px !important; }

  .cajaSectionGaleria{ margin-top:25% !important; }
}

/* ============ 769–992: tablet horizontal / laptop chica ============ */
@media (min-width: 767px) and (max-width: 992px){


  .lead{ font-size:25px !important; }
  .logo{ width:20%; }

  .container{ justify-content:space-between; flex-direction:row; }
  .pastilla{ aspect-ratio:16/9; }

  .navbar-brand{ width:85%; }
  .navbar-nav{ justify-content:flex-end; flex-direction:column; align-items:flex-end; }

  h2, h3{ font-size:35px !important; }
  .titulos1{ font-size:30px !important; }
  .parrafoNosotros{ font-size:18px !important; }

  /* Servicios: 2 columnas sólidas */
  #servicios .row{
    display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:24px 32px; align-items:start;
  }
  #servicios .row > [class*="col-"]{
    width:auto !important; max-width:none !important; flex:initial !important;
    padding-left:0 !important; padding-right:0 !important; margin:0 !important;
  }
  #servicios .service-box{
    padding:8%; width:100% !important; max-width:none !important; height:500px !important;
  }
  #servicios h3{ font-size:22px !important; text-align:center; }
  #servicios p{ font-size:18px; line-height:1.6; text-align:center; }

  /* Materiales */
  .cajaMaterales{ flex-direction:column !important; }
  .cajaMaterales p{ width:90% !important; font-size:20px !important; }
  .letra-editado2{ width:90% !important; font-size:25px !important; padding:2% !important; }

  /* Trabajos */
  #trabajos .pastilla{ width:80% !important; height:auto !important; aspect-ratio:16/10; }
  #trabajos .pastilla img{ width:100%; height:100%; object-fit:cover; }
  #trabajos .hover-text{ font-size:20px !important; padding:8px 12px; }

  /* Contacto */
  #contacto .row{ display:flex; flex-direction:column; gap:12px; }
  #contacto [class*="col-"], #contacto [class*="col-md"]{ width:100% !important; max-width:100% !important; }
  .cajaformulario{ padding:3% !important; }
  .cajaformulario2{ display:flex !important; align-items:center; text-align:center; flex-direction:column; }
  #contacto h2, #contacto h3, #contacto h4{ text-align:center; margin-bottom:.5rem; }
  #contacto p{
    font-size:22px; text-align:center; margin:0 auto 28px; max-width:90%;
    hyphens:auto; word-break:normal; overflow-wrap:anywhere; line-height:1.6;
  }
  #contacto form .form-control,
  #contacto input, #contacto textarea, #contacto select{
    width:100% !important; min-height:44px; font-size:16px;
  }
  #contacto textarea{ min-height:130px; }
  #contacto .container, #contacto{ padding-inline:10px !important; }

  .cajaSectionGaleria{ margin-top:15% !important; }
}

/* ============ 993–1200: laptops ============ */
@media (min-width: 993px) and (max-width: 1200px){
  .logo{ width: 35%; 

  }

  .service-box{
    width:250px; height:430px; padding:10px 20px; text-align:center; justify-content:flex-start;
  }
  .service-box p{ font-size:16px !important; }

  .parrafoNosotros{ font-size:20px !important; }
  .lead{ font-size:30px !important; }
  /* Evitamos tocar TODOS los <p>; mejor scoped: */
  #sobre p, #materiales p, #contacto p { font-size:20px !important; }

  h1, h2{ font-size:35px !important; }
  h5{ font-size:22px !important; margin:10px; }

  .cajaformulario{ text-align:start; padding:0 !important; }
  .titulo-naranja{ margin:0; font-size:20px !important; }
  .cajaformulario2{ width:250px; margin-left:10%; text-align:start; padding:0 !important; }

  /* Trabajos */
  #trabajos .pastilla{ width:30% !important; aspect-ratio:16/10; }
  #trabajos .pastilla img{ width:100%; height:100%; object-fit:cover; }
  #trabajos .hover-text{ font-size:20px !important; padding:20px 12px; }
}

/* ============ 1201–1400: laptops grandes ============ */
@media (min-width: 1201px) and (max-width: 1400px){

  .service-box{
    width:250px; height:430px; padding:10px 20px; text-align:center; justify-content:flex-start;
  }
  .service-box p{ font-size:16px !important; }

  .parrafoNosotros{ font-size:20px !important; }
  .lead{ font-size:30px !important; }
  #sobre p, #materiales p, #contacto p { font-size:20px !important; }

  h1, h2{ font-size:35px !important; }
  h5{ font-size:22px !important; margin:10px; }

  .cajaformulario{ text-align:start; padding:0 !important; }
  .titulo-naranja{ margin:0; font-size:20px !important; }
  .cajaformulario2{ width:250px; margin-left:10%; text-align:start; padding:0 !important; }

  #trabajos .pastilla{ width:30% !important; aspect-ratio:16/10; }
  #trabajos .pastilla img{ width:100%; height:100%; object-fit:cover; }
  #trabajos .hover-text{ font-size:20px !important; padding:20px 12px; }

  .cajaSectionGaleria{ margin-top:4% !important; }
}