/* --------------------
       Reset + Variables
    -------------------- */
    :root{
      --brand:#C28C4E;       /* naranja principal */
      --brand-600:#63461C;
      --brand-700:#8D6830;
      --ink:#1b1b1f;         /* texto principal */
      --muted:#6b7280;       /* texto secundario */
      --bg:#0f1115;          /* fondo general muy suave oscuro */
      --surface:#ffffff;     /* tarjetas claras */
      --shadow:0 10px 25px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.06);
      --radius:18px;
      --hero-image: url('../img/banner2.jpg'); /* Puedes reemplazarla por la de tu preferencia tenia banner1 */
    }


    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; 
      font-family: 'Montserrat', sans-serif;
      color:var(--ink); background:#fafafa; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    .container{width:min(1120px, 92%); margin-inline:auto}

    /* --------------------
       Header / Nav
    -------------------- */
    .site-header{position:sticky; top:0; z-index:40; background: white;box-shadow: 0px 0px 12px rgba(0,0,0,.5);}
    .nav{
      display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0;
      height: 80px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600; /* Esto es para el grosor de "Bold" */
    }
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
    .brand img{
      height: 80px;  /* ajusta a lo que te guste */
      width: auto;   /* mantiene proporción */
      display: block; /* evita espacios raros */
    }
    .menu{display:flex; gap:20px; list-style:none; padding:0; margin:0}
    .menu a{padding:8px 10px; border-radius:10px; font-weight:600; color:#3b3b3b}
    .menu a:hover{background:#e8d6c2}
    .cta-small{display:none}

    .menu-toggle{display:none; background:#fff; border:1px solid #ececec; padding:9px 10px; border-radius:12px}

    /* --------------------
       Hero
    -------------------- */
    .hero{
      position:relative; color:#fff; isolation:isolate;
      background:
        linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.7)),
        var(--hero-image);
      background-size:cover; background-position:center;
    }
    .hero .content{padding:80px 0 96px;}
    .eyebrow{opacity:.92; font-weight:600; letter-spacing:.2px; margin:6px 0 22px}
    h1{font-size: clamp(28px, 4.6vw, 46px); line-height:1.1; margin:0 0 16px; font-weight:900}
    .subtitle{max-width:720px; color:#e5e7eb; margin-bottom:28px}

    .actions{display:flex; gap:14px; flex-wrap:wrap}
    .btn{appearance:none; border:0; cursor:pointer; font-weight:800; border-radius:14px; padding:14px 18px; transition:translate .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
    .btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 20px rgba(245,124,44,.22)}
    .btn-primary:hover{translate:0 -1px; background:var(--brand-600)}
    .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:4px solid rgba(99,70,28,.2)}
    .btn-ghost:hover{background:rgba(255,255,255,.14)}

    /* --------------------
       Section titles
    -------------------- */
    section{padding:45px 0}
    .section-title{font-size: clamp(24px, 3.4vw, 36px); text-align:center; font-weight:900; color:#63461C}
    .section-title .accent{color:var(--brand)}
    .spacer{height:16px}
    
    /* --------------------
       Contacto
    -------------------- */
    #contacto{border-top: 3px solid #C28C4E;
    box-shadow: inset 1px 6px 20px 4px rgba(194, 140, 78, 0.5);  }
    .contact-grid{display:grid; grid-template-columns:1fr .9fr; gap:32px; align-items:start}
    .contact-info h3{font-size:24px; font-weight:800; margin:0 0 8px}
    .contact-info p{color:var(--muted); margin:0 0 24px}
    .contact-info ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; font-weight:600}
    .contact-info ul a{display:flex; align-items:center; gap:12px; transition:color .18s ease}
    .contact-info ul a:hover{color:var(--brand-700)}
    .contact-form{display:flex; flex-direction:column; gap:18px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
    .contact-form .input-group{display:flex; flex-direction:column; gap:8px}
    .contact-form label{font-weight:600; font-size:14px}
    .contact-form input, .contact-form textarea{
      padding:12px; border:1px solid #e2e8f0; border-radius:10px; font-family:'Montserrat', sans-serif;
      background:#f8f9fc;
    }
    .contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--brand)}
    .contact-form button{width:100%;}
    
    /* --------------------
       Servicios
    -------------------- */
    .services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:26px}
    .services-grid2{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px}
    .card{
      background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; transition:transform .18s ease, box-shadow .18s ease; height:100%;
    }
    .card:hover{transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.10)}
    .service-head{display:flex; align-items:center; gap:14px; margin-bottom:8px}
    .service-icon{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background: #fff4ec; color:var(--brand); box-shadow:inset 0 0 0 1px #ffe6d3}
    .service-title{font-weight:800; font-size:18px; margin:0; color:var(--brand-600);}
    .service-desc{color:var(--muted); font-size:14px; margin:6px 0 0}

    .toggler {  }
    #button { }
    #effect {  height: auto; padding: 1.5em; position: relative; background: #fff; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }

    /* --------------------
       Productos
    -------------------- */
    .products{display:contents; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start}
    .product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
    .product-card{display:flex; flex-direction:column; gap:10px}
    .product-card .thumb{/*aspect-ratio:16/10;*/ border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#f2f3f6;height: 300px;}
    .card2 h4{margin: 2px 0px 6px 10px; font-size:16px}
    .product-card p{color:var(--muted); font-size:13px; margin:0 0 8px}
    .card2 .mini{padding:1px 5px;  font-weight:700; width:100%; font-size: 15px;background: var(--brand) ;color: #fff;}
    .card{background:#fff;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
    .people{
      border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
    }
    .people img{width:100%; height:100%; object-fit:cover}
    
    
    .imgProd{
          aspect-ratio: 16 / 10;
          margin-bottom: 10px;
    }
   
    .title-prod{
      color: var(--brand);

    }
   .card3{
      background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
   }
  
    .btnProd{
    margin-top: auto;
    background: var(--brand);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    border: 0;
    font-weight: 700;
    cursor: pointer;
    }
    .desc {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.subtitulo{
      color: var(--brand);
    }
    .mitad{
          display: inline-block;
    width: 500px;
    height: auto;
}
    }
   swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: sw </swiper-slidek;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

   
    swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    swiper-slide {
      background-size: cover;
      background-position: center;
    }

    .mySwiper {
      height: 80%;
      width: 100%;
    }

    .mySwiper2 {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }

    .mySwiper2 swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .mySwiper2 .swiper-slide-thumb-active {
      opacity: 1;
    }

    swiper-slide img {
      display: sw </swiper-slidek;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .imgSwiper{
      width: 500px;
      height: 280px;
    }

    .imgPdesc{
      height: 400px;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .contentP:hover img {
      transform: scale(1.1);
    }

    .contentP:hover .overlay {
      opacity: 1;
    }

   .section{padding:45px 20px;max-width:1200px;margin:0 auto}

     .card3{
      background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
   }
    .imgthumb {
    width: 100%;
    height: 140px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f3f3f3, #e9e9e9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-weight: 600;
    
}
    .imgthumb1{
      background-image: url(../img/prodcto1.webp);
      background-size: cover;
    }
    .imgthumb2{
      background-image: url(../img/producto2.jpg);
      background-size: 100% 100%;
    }
    .imgthumb3{
      background-image: url(../img/producto3.jpg);
      background-size: cover;
    }
    .imgthumb4{
      background-image: url(../img/producto4.webp);
      background-size: 100% 100%;
    }
    .imgthumb5{
      background-image: url(../img/producto5.png);
      background-size: 100% 129%;
    }
    .imgthumb6{
      background-image: url(../img/producto6.png);
      background-size: cover;
    }
    .imgthumb7{
      background-image: url(../img/producto7.jpg);
      background-size: cover;
    }
    .imgthumb8{
      background-image: url(../img/producto8.jpg);
      background-size: cover;
    }
    .imgthumb9{
      background-image: url(../img/producto9.jpg);
      background-size: cover;
    }
    .imgthumb10{
      background-image: url(../img/producto10.png);
      background-size: 100% 135%;
    }
    .imgthumb11{
      background-image: url(../img/producto11.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .imgthumb12{
      background-image: url(../img/producto12.jpg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .imgthumb13{
      background-image: url(../img/producto13.jpg);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .imgthumb14{
      background-image: url(../img/producto14.webp);
      background-size: 100% 151%;
    }
    .imgthumb15{
      background-image: url(../img/producto15.png);
      background-size: cover;
    }
    .btnProd{
    margin-top: auto;
    background: var(--brand);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    border: 0;
    font-weight: 700;
    cursor: pointer;
    }
    .desc {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

   .section{padding:45px 20px;max-width:1200px;margin:0 auto}

   /* CTA */
    .cta{margin-top:36px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:18px;background:var(--brand);color:#fff}
    .cta h3{margin:0;font-size:18px}
    .cta p{margin:0;opacity:0.95; color: #fff;}
    .cta .cta-btn{background:#fff;color:var(--brand);padding:10px 16px;border-radius:10px;font-weight:700;border:0;cursor:pointer}

    /* small footer note */
    .note{margin-top:14px;color:#666;font-size:13px}

    /* utility */
    .small{font-size:13px;color:#666}
    /* --------------------
       Testimonios & Logos
    -------------------- */
    .testi-wrap{display:grid; grid-template-columns:1.2fr 1.2fr; gap:24px; align-items:center}
    .quote{
      background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; position:relative
    }
    .quote2{
      background:rgba(255,255,255,0.7); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; position:relative
    }
    .quote small{display:block; color:var(--bg)}
    .quote2 small{display:block; color:var(--bg)}

    .logos{
       gap:14px; align-items:center; justify-items:center; 
    }
    .logo{height:200px; }



    #produccion{
      
    }
    #fondoP{ height: auto;
    padding: 1.5em;
    position: relative;
    background: rgba(255, 255, 255, 0.5);  }

    #fondoP:hover{
      background: url(../img/papel5.jpg);
    }
    /* --------------------
       Footer
    -------------------- */
    footer{background: linear-gradient(180deg,#fff, #fff7f0 70%); padding:36px 0 48px; border-top-left-radius:26px; border-top-right-radius:26px; border-top:1px solid #f1e7df}
    .foot{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
    .foot small{color:var(--muted)}

    /* --------------------
       Helpers
    -------------------- */
    .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
    .reveal.in{opacity:1; transform:none}

     /* --------------------
       Responsive
    -------------------- */
    @media (max-width: 1024px){
      .products{grid-template-columns:1fr}
      .product-grid{grid-template-columns:repeat(3, 1fr)}
      .testi-wrap{grid-template-columns:1fr}
      .contact-grid{display: block; grid-template-columns:1fr}
      .contact-form{order: -1} /* Mueve el formulario arriba en móvil */
      .reveal.in { height: auto;margin-bottom: 15px; }
      .mitad {
        display: inline-block;
        width: 100%;
        height: auto;
      }
      section {
      padding: 30px 0;
      }
      .movil{ display: none; }
    }
    @media (max-width: 760px){
      .menu{display:none}
      .menu.show{display:flex; position:absolute; left:50%; transform:translateX(-50%); top:62px; background:#fff; padding:10px; border-radius:14px; box-shadow:var(--shadow)}
      .menu a{padding:10px 12px}
      .menu-toggle{display:inline-block}
      .cta-small{display:inline-flex}
      .services-grid{grid-template-columns:1fr}
      .product-grid{grid-template-columns:1fr}
      .hero .content{padding:64px 0 80px}
      .brand img {
        height: 75px;
      }
      .imgPdesc{
      height: auto;
      }
      .movil{ display: none; }
    }