/* ==========================================================================
   ASOTOLIMA — Ecoreciclar Tolima · Estilos del sitio (2026)
   ========================================================================== */
:root {
   --verde: #2e7d32;
   --verde-osc: #1b5e20;
   --verde-800: #154a1a;
   --lima: #9ccc3b;
   --lima-osc: #7cb342;
   --lima-claro: #eef7dd;
   --wash: #f4f8ee;
   --tinta: #233028;
   --muted: #68766c;
   --linea: #e6ece0;
   --blanco: #ffffff;
   --sombra: 0 12px 34px rgba(20, 60, 25, .10);
   --sombra-sm: 0 6px 18px rgba(20, 60, 25, .08);
   --r: 16px;
   --r-lg: 24px;
   --contenido: 1180px;
   --fuente: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   font-family: var(--fuente);
   color: var(--tinta);
   background: var(--blanco);
   line-height: 1.6;
   font-size: 16px;
   overflow-x: hidden
}

img {
   max-width: 100%;
   display: block
}

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

h1,
h2,
h3,
h4 {
   line-height: 1.15;
   font-weight: 700
}

.wrap {
   max-width: var(--contenido);
   margin: 0 auto;
   padding: 0 22px
}

.seccion {
   padding: 82px 0
}

.seccion.alt {
   background: var(--wash)
}

.tit-seccion {
   text-align: center;
   max-width: 680px;
   margin: 0 auto 46px
}

.tit-seccion .eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--verde);
   font-weight: 700;
   font-size: 13px;
   letter-spacing: .14em;
   text-transform: uppercase
}

.tit-seccion .eyebrow::before,
.tit-seccion .eyebrow::after {
   content: "";
   width: 26px;
   height: 2px;
   background: var(--lima)
}

.tit-seccion h2 {
   font-size: clamp(28px, 4vw, 44px);
   margin: 12px 0 10px;
   color: var(--verde-800)
}

.tit-seccion p {
   color: var(--muted);
   font-size: 16.5px
}

/* ---- Botones ---- */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 13px 26px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 15.5px;
   cursor: pointer;
   border: none;
   transition: .2s;
   font-family: inherit
}

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

.btn-verde:hover {
   background: var(--verde-osc);
   transform: translateY(-2px);
   box-shadow: var(--sombra-sm)
}

.btn-lima {
   background: var(--lima);
   color: var(--verde-800)
}

.btn-lima:hover {
   background: var(--lima-osc);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: var(--sombra-sm)
}

.btn-borde {
   background: transparent;
   color: #fff;
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6)
}

.btn-borde:hover {
   background: rgba(255, 255, 255, .12)
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(8px);
   box-shadow: 0 2px 18px rgba(20, 60, 25, .06);
   transition: .3s
}

.header .bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 76px
}

.header .logo img {
   height: 48px;
   width: auto
}

.nav {
   display: flex;
   align-items: center;
   gap: 4px
}

.nav a {
   padding: 9px 14px;
   border-radius: 999px;
   font-weight: 500;
   font-size: 15px;
   color: var(--tinta);
   white-space: nowrap;
   transition: .15s
}

.nav a:hover,
.nav a.activo {
   color: var(--verde);
   background: var(--lima-claro)
}

.nav .dropdown {
   position: relative
}

.nav .dropdown>a::after {
   content: "▾";
   margin-left: 5px;
   font-size: 11px
}

.nav .submenu {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 210px;
   background: #fff;
   border-radius: 12px;
   box-shadow: var(--sombra);
   padding: 8px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: .2s
}

.nav .dropdown:hover .submenu {
   opacity: 1;
   visibility: visible;
   transform: translateY(4px)
}

.nav .submenu a {
   display: block
}

.nav .cta {
   margin-left: 6px
}

.burger {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   flex-direction: column;
   gap: 5px;
   padding: 8px
}

.burger span {
   width: 25px;
   height: 3px;
   background: var(--verde);
   border-radius: 3px;
   transition: .25s
}

.burger.open span:nth-child(1) {
   transform: translateY(8px) rotate(45deg)
}

.burger.open span:nth-child(2) {
   opacity: 0
}

.burger.open span:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg)
}

/* ==========================================================================
   HERO — carrusel de banners
   ========================================================================== */
.hero-slider {
   position: relative;
   margin-top: 76px;
   background: #123f18;
   overflow: hidden
}

.slider {
   position: relative;
   width: 100%;
   aspect-ratio: 1800/562
}

.slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .8s ease;
   z-index: 1
}

.slide.activa {
   opacity: 1;
   z-index: 2
}

.slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.slider-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, .85);
   color: var(--verde-800);
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: .2s
}

.slider-nav:hover {
   background: #fff
}

.slider-nav.prev {
   left: 16px
}

.slider-nav.next {
   right: 16px
}

.slider-dots {
   position: absolute;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 3
}

.slider-dots button {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, .55);
   cursor: pointer;
   padding: 0;
   transition: .2s
}

.slider-dots button.activa {
   background: #fff;
   width: 26px;
   border-radius: 6px
}

/* ==========================================================================
   BADGES (las 6 R)
   ========================================================================== */
.badges {
   background: #fff
}

.badges .grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 20px;
   align-items: center
}

.badges .item {
   text-align: center;
   transition: .25s
}

.badges .item:hover {
   transform: translateY(-6px)
}

.badges .item img {
   width: 104px;
   height: auto;
   margin: 0 auto;
   filter: drop-shadow(0 6px 12px rgba(20, 60, 25, .14))
}

/* ==========================================================================
   SOBRE NOSOTROS (misión/visión/objetivo)
   ========================================================================== */
.intro-nos {
   max-width: 820px;
   margin: 0 auto 40px;
   text-align: center;
   color: var(--muted);
   font-size: 17px
}

.mvo {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.mvo .card {
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   padding: 34px 28px;
   text-align: center;
   box-shadow: var(--sombra-sm);
   transition: .25s
}

.mvo .card:hover {
   transform: translateY(-6px);
   box-shadow: var(--sombra)
}

.mvo .ic {
   width: 92px;
   height: 92px;
   margin: 0 auto 16px;
   background: var(--lima-claro);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center
}

.mvo .ic img {
   width: 56px;
   height: 56px
}

.mvo h3 {
   color: var(--verde);
   font-size: 22px;
   letter-spacing: .02em;
   margin-bottom: 10px
}

.mvo p {
   color: var(--muted);
   font-size: 15px
}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.serv {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px
}

.serv .card {
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   padding: 30px 24px;
   box-shadow: var(--sombra-sm);
   transition: .25s;
   position: relative;
   overflow: hidden
}

.serv .card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, var(--verde), var(--lima));
   transform: scaleX(0);
   transform-origin: left;
   transition: .3s
}

.serv .card:hover {
   transform: translateY(-6px);
   box-shadow: var(--sombra)
}

.serv .card:hover::before {
   transform: scaleX(1)
}

.serv .ic {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: var(--verde);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   margin-bottom: 18px
}

.serv .ic svg {
   width: 34px;
   height: 34px
}

.serv h4 {
   font-size: 17.5px;
   color: var(--verde-800);
   margin-bottom: 10px;
   line-height: 1.3
}

.serv p {
   color: var(--muted);
   font-size: 14.5px
}

.revista-box {
   margin-top: 52px
}

.revista-box .marco {
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   box-shadow: var(--sombra);
   overflow: hidden
}

.revista-box iframe {
   width: 100%;
   height: 620px;
   border: 0;
   display: block
}

/* ==========================================================================
   COMERCIAL (macrorutas, dinc, reporte)
   ========================================================================== */
.bloque-img {
   max-width: 1000px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   padding: 14px;
   box-shadow: var(--sombra-sm)
}

.bloque-img img {
   width: 100%;
   border-radius: 14px
}

/* ---- DINC ---- */
.dinc-card {
   max-width: 1000px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   box-shadow: var(--sombra);
   padding: 40px 42px
}

.dinc-titulo {
   text-align: center;
   color: var(--verde-800);
   font-size: clamp(19px, 2.6vw, 25px);
   text-transform: uppercase;
   letter-spacing: .01em;
   margin-bottom: 18px
}

.dinc-intro {
   text-align: center;
   color: var(--tinta);
   font-size: 15px;
   line-height: 1.65;
   max-width: 840px;
   margin: 0 auto 30px;
   padding-bottom: 30px;
   border-bottom: 2px solid var(--lima)
}

.dinc-intro strong {
   color: var(--verde)
}

.dinc-cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 36px
}

.dinc-col h4 {
   color: var(--verde);
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 12px
}

.dinc-col>p {
   color: var(--muted);
   font-size: 14.5px;
   line-height: 1.6;
   margin-bottom: 14px
}

.dinc-col ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 11px
}

.dinc-col li {
   position: relative;
   padding-left: 28px;
   color: var(--tinta);
   font-size: 14.5px;
   line-height: 1.55
}

.dinc-col li::before {
   content: "✓";
   position: absolute;
   left: 0;
   top: 0;
   width: 19px;
   height: 19px;
   background: var(--lima);
   color: var(--verde-800);
   border-radius: 50%;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center
}

@media (max-width: 768px) {
   .dinc-cols {
      grid-template-columns: 1fr;
      gap: 26px
   }

   .dinc-card {
      padding: 28px 22px
   }
}

.reporte-card {
   max-width: 1000px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   box-shadow: var(--sombra);
   overflow: hidden
}

.reporte-card .lienzo {
   padding: 26px 24px 10px;
   height: 420px
}

.reporte-card .lienzo canvas {
   width: 100% !important;
   height: 100% !important
}

.reporte-card .controles {
   background: var(--verde);
   color: #fff;
   padding: 20px 24px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

.reporte-card .controles label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: 7px;
   color: #dcefc4
}

.reporte-card .controles select {
   width: 100%;
   padding: 12px 14px;
   border-radius: 12px;
   border: none;
   font-family: inherit;
   font-size: 15px;
   color: var(--tinta);
   background: #fff;
   cursor: pointer
}

/* ==========================================================================
   NORMATIVIDAD
   ========================================================================== */
.docs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
}

.docs .doc {
   display: flex;
   align-items: center;
   gap: 16px;
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: 14px;
   padding: 18px 20px;
   box-shadow: var(--sombra-sm);
   transition: .2s
}

.docs .doc:hover {
   transform: translateY(-3px);
   box-shadow: var(--sombra);
   border-color: var(--lima)
}

.docs .doc .ic {
   flex: none;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: var(--lima-claro);
   color: var(--verde);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px
}

.docs .doc b {
   display: block;
   color: var(--verde-800);
   font-size: 15.5px
}

.docs .doc span {
   display: block;
   color: var(--muted);
   font-size: 12.5px
}

/* ==========================================================================
   GALERÍA
   ========================================================================== */
.galeria {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px
}

.galeria a {
   border-radius: 14px;
   overflow: hidden;
   aspect-ratio: 1/1;
   box-shadow: var(--sombra-sm)
}

.galeria img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .4s
}

.galeria a:hover img {
   transform: scale(1.08)
}

/* ==========================================================================
   FAQ (acordeón)
   ========================================================================== */
.faq-lista {
   max-width: 860px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 14px
}

.faq-it {
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: 14px;
   box-shadow: var(--sombra-sm);
   overflow: hidden
}

.faq-it summary {
   list-style: none;
   cursor: pointer;
   padding: 20px 24px;
   font-weight: 600;
   color: var(--verde-800);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 14px;
   font-size: 16.5px
}

.faq-it summary::-webkit-details-marker {
   display: none
}

.faq-it summary::after {
   content: "+";
   font-size: 26px;
   color: var(--lima-osc);
   font-weight: 400;
   transition: .2s;
   flex: none
}

.faq-it[open] summary::after {
   transform: rotate(45deg)
}

.faq-it .cont {
   padding: 0 24px 22px;
   color: var(--muted);
   font-size: 15px
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 26px
}

.contacto-grid .mapa {
   border-radius: var(--r-lg);
   overflow: hidden;
   min-height: 440px;
   box-shadow: var(--sombra-sm)
}

.contacto-grid .mapa iframe {
   width: 100%;
   height: 100%;
   border: 0;
   min-height: 440px
}

.form-card {
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: var(--r-lg);
   padding: 30px 28px;
   box-shadow: var(--sombra-sm)
}

.form-card .campo {
   margin-bottom: 15px
}

.form-card input,
.form-card select,
.form-card textarea {
   width: 100%;
   padding: 13px 15px;
   border: 1.5px solid var(--linea);
   border-radius: 12px;
   font-family: inherit;
   font-size: 15px;
   color: var(--tinta);
   transition: .15s;
   background: #fff
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
   outline: none;
   border-color: var(--verde)
}

.form-card .fila {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
   background: var(--verde-800);
   color: #cfe0c4;
   padding: 56px 0 26px
}

.footer .cols {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   gap: 36px
}

.footer h5 {
   color: #fff;
   font-size: 16px;
   margin-bottom: 16px
}

.footer a {
   display: block;
   color: #cfe0c4;
   padding: 5px 0;
   font-size: 14.5px;
   transition: .15s
}

.footer a:hover {
   color: var(--lima)
}

.footer .marca img {
   height: 58px;
   background: #fff;
   border-radius: 12px;
   padding: 8px;
   margin-bottom: 14px
}

.footer .marca p {
   font-size: 14px;
   max-width: 36ch
}

.footer .base {
   margin-top: 40px;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, .14);
   text-align: center;
   font-size: 13px;
   color: #a9c299
}

/* ---- Volver arriba ---- */
.arriba {
   position: fixed;
   left: 22px;
   bottom: 22px;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--verde);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   z-index: 900;
   opacity: 0;
   pointer-events: none;
   transition: .3s;
   box-shadow: var(--sombra)
}

.arriba.ver {
   opacity: 1;
   pointer-events: auto
}

/* ---- Banner de cookies ---- */
.cookies {
   position: fixed;
   left: 16px;
   right: 16px;
   bottom: 16px;
   max-width: 780px;
   margin: 0 auto;
   background: #fff;
   border: 1px solid var(--linea);
   border-radius: 14px;
   box-shadow: var(--sombra);
   padding: 16px 22px;
   display: flex;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap;
   justify-content: center;
   z-index: 1500
}

.cookies[hidden] {
   display: none
}

.cookies p {
   margin: 0;
   font-size: 13.5px;
   color: var(--muted);
   flex: 1;
   min-width: 240px;
   line-height: 1.5
}

.cookies .btn {
   padding: 10px 24px;
   font-size: 14px
}

@media (max-width: 560px) {
   .cookies {
      flex-direction: column;
      text-align: center
   }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1024px) {
   .serv {
      grid-template-columns: repeat(2, 1fr)
   }

   .badges .grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .galeria {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media(max-width:900px) {
   .mvo {
      grid-template-columns: 1fr
   }

   .docs {
      grid-template-columns: repeat(2, 1fr)
   }

   .contacto-grid {
      grid-template-columns: 1fr
   }

   .footer .cols {
      grid-template-columns: 1fr 1fr
   }

   .reporte-card .controles {
      grid-template-columns: 1fr
   }
}

@media(max-width:768px) {
   .burger {
      display: flex
   }

   .nav {
      position: fixed;
      top: 76px;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      background: #fff;
      padding: 14px 18px 22px;
      box-shadow: var(--sombra);
      gap: 2px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: max-height .35s, opacity .25s
   }

   .nav.abierto {
      max-height: 80vh;
      opacity: 1;
      pointer-events: auto
   }

   .nav a {
      padding: 13px 12px
   }

   .nav .submenu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      padding: 0 0 0 14px;
      min-width: 0
   }

   .nav .dropdown:hover .submenu {
      transform: none
   }

   .nav .cta {
      margin: 8px 0 0;
      justify-content: center
   }

   .hero {
      min-height: auto
   }

   .hero-inner {
      padding: 120px 0 80px
   }
}

@media(max-width:560px) {
   .seccion {
      padding: 60px 0
   }

   .serv {
      grid-template-columns: 1fr
   }

   .badges .grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .galeria {
      grid-template-columns: repeat(2, 1fr)
   }

   .docs {
      grid-template-columns: 1fr
   }

   .footer .cols {
      grid-template-columns: 1fr
   }

   .form-card .fila {
      grid-template-columns: 1fr
   }

   .revista-box iframe {
      height: 460px
   }
}