/* ==========================================================================
   GrasasBio – Global Stylesheet (fresh build)
   ========================================================================== */

/* ========== Variables ========== */
:root{
  --container-max: 1200px;

  --brand-green: #14a44d;
  --brand-green-700: #0e8a3e;
  --brand-orange: #f37021;
  --brand-blue-900: #0f172a;

  --text-900: #0f172a;
  --text-700: #334155;
  --text-600: #475569;
  --text-500: #64748b;

  --bg-50: #f7f9fb;
  --bg-white: #ffffff;

  --border: #e6e9ee;

  --radius-md: 14px;

  --shadow-sm: 0 8px 16px rgba(15,23,42,.08);
  --shadow-md: 0 12px 28px rgba(15,23,42,.12);
  --shadow-lg: 0 18px 44px rgba(15,23,42,.16);
}




/* ========== Reset/Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-900);
  background: var(--bg-white);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 16px}

/* ========== Utilities ========== */
.section-title{font-size:clamp(1.8rem,2vw + 1rem,2.2rem);line-height:1.2;margin:0 0 8px}
.section-desc{color:var(--text-600);margin:6px 0 24px}
.text-grad--green{
  background: linear-gradient(90deg,#16a34a,#54c064);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.text-grad--orange{
  background: linear-gradient(90deg,#f97316,#f59e0b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand-green);color:#fff}
.btn--primary:hover{background:var(--brand-green-700)}
.btn--accent{background:var(--brand-orange);color:#fff}
.btn--accent:hover{filter:brightness(.95)}
.btn--outline{background:transparent;border-color:#fff;color:#fff}
.btn--outline:hover{background:#fff;color:var(--text-900)}
.btn--cta{background:var(--brand-green);color:#fff;padding:10px 18px;box-shadow:0 6px 14px rgba(20,164,77,.22)}
.btn--cta:hover{background:var(--brand-green-700)}

/* Pills */
.client-pill{display:inline-flex;align-items:center;gap:10px;background:#e8f6ee;color:#137b3b;padding:14px 18px;border-radius:16px;border:1px solid #d9efe4;box-shadow:var(--shadow-sm);font-weight:700}

/* Card */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm)}
.card__icon{width:56px;height:56px;display:grid;place-items:center;background:#e8f6ee;border-radius:14px;margin:0 auto 10px}
.card__title{text-align:center;margin:2px 0 8px}
.card__text{color:var(--text-600);text-align:center}

/* ========== Utility Bar (desktop only) ========== */
.utility-bar{background:#f5f7fb;color:#2a3543;font-size:14px}
.utility__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.utility__left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.utility__link{white-space:nowrap}
.utility__link:hover{text-decoration:underline}
.utility__sep{opacity:.5}
.utility__right{display:flex;align-items:center;gap:10px;white-space:nowrap}
.utility__iscc{height:18px;width:auto}
.utility__tag{color:#5a6675;font-size:13px}
@media (max-width:768px){.utility-bar{display:none}}

/* ========== Header / Nav ========== */
.header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border)}
.header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__logo{height:36px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text strong{font-size:18px}
.brand__sub{font-size:12px;color:var(--text-500)}
.nav{justify-self:center}
.nav__toggle{display:none;background:none;border:0;cursor:pointer}
.nav__list{display:flex;align-items:center;gap:24px;list-style:none;padding:0;margin:0}
.nav__link{color:var(--text-900);font-weight:700;letter-spacing:.3px;padding:8px 0;border-bottom:2px solid transparent}
.nav__link:hover{border-bottom-color:var(--brand-green)}
.nav__link.is-active{color:var(--brand-green);border-bottom-color:var(--brand-green)}
.header__cta{padding:10px 18px}
@media (max-width:992px){.nav{justify-self:end}}
@media (max-width:768px){
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
  .nav__list{position:absolute;right:16px;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px 14px;gap:0;width:min(92vw,340px);display:none;flex-direction:column;align-items:stretch}
  .nav__list.is-open{display:flex}
  .nav__link{padding:12px 6px;border-bottom:1px dashed #eef2f6}
  .nav__link:last-child{border-bottom:0}
  .header__cta{display:none} /* hidden on mobile as requested */
}
.nav__mobile-utility{display:none;border-top:1px solid var(--border);margin-top:8px;padding-top:6px}
.nav__mobile-utility a{display:block;padding:10px 0}
@media (max-width:768px){.nav__mobile-utility{display:list-item}}

/* ========== Hero (Vimeo cover) ========== */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;background:#111}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.vimeo-cover{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;transform:translate(-50%,-50%)}
.vimeo-cover iframe{width:100%;height:100%;display:block}
.hero__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1}
.hero__content{position:relative;z-index:2;text-align:center;color:#fff}
.hero__title{font-size:clamp(2rem,3vw + 1rem,3.6rem);line-height:1.1;margin:0 0 12px}
.hero__subtitle{font-size:clamp(1rem,.8vw + .6rem,1.25rem);opacity:.9}
.hero__actions{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* ========== Clients ========== */
.clients{padding:60px 0}
.client-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:14px auto 26px}

/* ========== About ========== */
.about{padding:70px 0;background:linear-gradient(#fff,#fbfdff)}
.about__grid{display:grid;gap:28px;align-items:stretch;grid-template-columns:1fr}
@media (min-width:1024px){.about__grid{grid-template-columns:1fr 1fr;gap:48px}}
.about__commit-title{margin:14px 0 6px}
.about__commit-list{color:var(--text-700);padding-left:0;list-style:none}
.about__commit-list li{margin:8px 0}
.about__media .video-box{position:relative;height:100%;min-height:420px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-md);background:#000}
.about__media .video-box iframe{position:absolute;inset:0;width:100%;height:100%}

/* ========== Services ========== */
.services{padding:70px 0}
.services__intro{text-align:center;max-width:780px;margin:0 auto 26px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:992px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* ========== Aliados ========== */
.aliados{padding:60px 0;background:#f9fbfd}
.aliados-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:center}
@media (max-width:768px){.aliados-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.aliados-grid{grid-template-columns:1fr}}
.aliado{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.aliados__note{text-align:center;margin-top:10px;color:var(--text-500);font-size:.95rem}

/* ========== Impacto ========== */
.impacto{padding:70px 0}
.impact-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.impact-groups{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.impact-groups{grid-template-columns:1fr}}
.impact-card{background:#fff5f5;color:#b42318;border:1px solid #ffd2d2;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-weight:600}
.dato{background:var(--brand-green);color:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow-sm)}
.dato__title{margin:0 0 6px; align-items: center;}

/* ========== Social ========== */
.social-section{padding:70px 0;background:#f7f9fb}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.social-grid{grid-template-columns:1fr}}
.social-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm)}
.fb-embed iframe{width:100%;height:460px}

/* ========== Map ========== */
.map-section{padding:60px 0}
.map-container{border-radius:12px;overflow:hidden}

/* ========== Footer ========== */
.footer{background:#0c4122;color:#e6f4ea;padding:40px 0 10px}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
@media (max-width:992px){.footer-content{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-content{grid-template-columns:1fr}}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.footer-logo-img{height:40px}
.footer-company h3{margin:0}
.footer-certification{display:flex;align-items:center;gap:10px;margin:10px 0}
.footer-iscc{height:26px}
.footer-description{color:#cfe9da}
.footer-social{display:flex;gap:10px;margin-top:10px}
.footer-section h4{margin:6px 0 10px}
.footer-links,.footer-services{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-links a:hover,.footer-services a:hover{text-decoration:underline}
.footer-contact{display:grid;gap:8px}
.contact-item{display:flex;gap:8px;align-items:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:20px;padding-top:10px}
.footer-bottom-content{display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-legal{display:flex;gap:12px}
.footer-legal a{text-decoration:underline}

/* Lucide icon sizing helpers */
i[data-lucide]{width:20px;height:20px}

/* ------------------------------
   Small global tweaks (all sizes)
---------------------------------*/
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* Topbar badge must never stretch */
.topbar .iscc-badge img {
  height: 22px;
  width: auto;
  display: block;
}

/* Main nav button safe spacing on desktop too */
.navbar .cta-btn {
  padding: 0.7rem 1rem;
  border-radius: 12px;
}

/* Ensure hero/about iframes/videos always fill their wrappers */
.video-cover,
.about .media {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-cover iframe,
.video-cover video,
.about .media iframe,
.about .media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
}


/* ===== Clientes carousel ===== */
.clientes-carousel{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
}

.clientes-viewport{
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; /* Firefox hide */
  flex:1;
}
.clientes-viewport::-webkit-scrollbar{ display:none; } /* Chrome hide */

.clientes-track{
  display:flex;
  gap:14px;
  padding:2px 2px 8px;
}

/* Make each card a consistent width so it looks like a carousel */
.cliente-card{
  flex:0 0 190px; /* adjust if you want bigger/smaller cards */
}

/* Arrow buttons */
.clientes-arrow{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.clientes-arrow i{
  width:20px;
  height:20px;
}

/* Nice behavior on mobile: hide arrows and let user swipe */
@media (max-width: 768px){
  .clientes-arrow{ display:none; }
  .cliente-card{ flex:0 0 220px; } /* optional: slightly wider on mobile */
}

/* ------------------------------
   MOBILE FIRST FIXES
   Apply to tablets & phones
---------------------------------*/
@media (max-width: 768px) {

  :root{
    --container-px: 16px;
    --gap: 16px;
    --h1: clamp(28px, 7.5vw, 38px);
    --h2: clamp(22px, 5.6vw, 28px);
    --h3: clamp(18px, 4.8vw, 22px);
    --text: 15px;
  }

  /* Hide the top contact bar on mobile */
  .topbar { display: none !important; }

  /* Navbar: evenly spaced brand + burger + CTA, no overflow */
  .navbar {
    padding: 10px var(--container-px);
    gap: 10px;
  }
  .navbar .brand img { height: 28px; width: auto; }
  .navbar .nav-links { display: none; }          /* links live in drawer on mobile */
  .navbar .cta-btn { font-size: 14.5px; padding: 0.65rem 0.9rem; }
  .navbar .hamburger { margin-left: auto; }       /* brand | … | burger */

  /* Drawer: full-height, scrollable, with nice spacing for moved topbar links */
  .nav-drawer {
    width: min(92vw, 360px);
    padding: 18px;
  }
  .nav-drawer .topbar-links {                     /* place your phone/email/WA here on mobile */
    display: grid;
    gap: 10px;
    margin: 6px 0 12px;
    font-size: 15px;
  }

  /* Hero: video must truly fill, headings scale, buttons stack */
  .hero {
    min-height: 70vh;
    padding-top: 64px;               /* keep clear of fixed nav */
  }
  .hero .video-wrap {
    position: absolute;
    inset: 0;
  }
  .hero .content {
    padding: 0 var(--container-px);
    text-align: center;
  }
  .hero .content h1 {
    font-size: var(--h1);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .hero .kicker { font-size: 15px; }
  .hero .actions {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .hero .actions .btn { width: 100%; max-width: 420px; }

  /* Client types: tidy grid, icons & pills centered */
  .clients {
    padding: 28px var(--container-px);
  }
  .clients .section-title { font-size: var(--h2); text-align: center; }
  .clients .chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-items: stretch;
  }
  .clients .chip {
    padding: 12px 14px;
    justify-content: center;
    font-weight: 600;
  }
  .clients .chip i,
  .clients .chip svg { font-size: 18px; }

  /* About: stack text then media, video fills the box using cover */
  .about {
    padding: 32px var(--container-px);
  }
  .about .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .about h2 { font-size: var(--h2); }
  .about .media {
    aspect-ratio: 16 / 9;  /* keep nice ratio on phones */
    border-radius: 12px;
    overflow: hidden;
  }

  /* Services: 2 per row on small tablets, 1 per row on small phones */
  .services {
    padding: 32px var(--container-px);
  }
  .services .section-title { font-size: var(--h2); text-align: center; }
  .services .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 480px) {
    .services .grid { grid-template-columns: 1fr; }
  }
  .services .card { padding: 16px; }
  .services .card i,
  .services .card svg { font-size: 22px; }

 /* ——— Aliados: clean, uniform logo tiles ——— */
.aliados {
  padding: 64px 0;
}

.aliados .section-title { margin-bottom: 8px; }
.aliados .section-desc  { margin-bottom: 28px; }

.aliados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;            /* a bit more vertical spacing */
  align-items: stretch;
}

/* Each logo tile (same size, same look) */
.aliado {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(12, 18, 32, 0.07);
  padding: 18px;             /* inner breathing room, works with max-height below */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;             /* <— uniform height for *every* card on desktop */
  overflow: hidden;          /* hide any oversize without stretching */
}

/* Keep every logo contained, never distorted, never overflowing */
.aliado img {
  max-width: 100%;
  max-height: 100%;
  width: auto;               /* avoid accidental stretching */
  height: auto;
  object-fit: contain;       /* fit inside the tile “letterbox” style */
  display: block;
}

/* Tablet */
@media (max-width: 1024px) {
  .aliados-grid { gap: 18px 20px; }
  .aliado { height: 130px; }
}

/* Mobile */
@media (max-width: 640px) {
  .aliados { padding: 44px 0; }
  .aliado { height: 110px; padding: 14px; }
}

  /* Impact section: single column, quick-read tiles */
  .impact {
    padding: 28px var(--container-px);
  }
  .impact .grid { grid-template-columns: 1fr; gap: 10px; }
  .impact .card { padding: 12px 14px; }
  

  /* Social tiles: 1 column; IG thumbnails in a neat grid */
  .social {
    padding: 28px var(--container-px);
  }
  .social .tiles { grid-template-columns: 1fr; gap: 14px; }
  .social .card { padding: 14px; }
  .social .ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .social .ig-grid img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px;
  }

  /* Map */
  .map-section { padding: 28px var(--container-px); }

  /* Footer stacks cleanly */
  .footer { padding: 28px 0; }
  .footer .cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 var(--container-px);
  }
  .footer .logo-row img { height: 22px; }
  .footer .bottom { flex-direction: column; gap: 8px; }
}

/* Ultra-small phones: lean into single column everywhere */
@media (max-width: 380px) {
  .clients .chips { grid-template-columns: 1fr; }
  .services .grid { grid-template-columns: 1fr; }
}

/* ===== Stats (desktop defaults) ===== */
.stats-section{
  background:#198f2a;     /* brand green */
  color:#fff;
  text-align:center;
  padding: 18px 12px;     /* slightly leaner than before */
}
.stats-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  max-width: 980px;       /* contain width so it never feels oversized */
  margin:0 auto;
}
.stat-item{
  flex: 0 1 220px;
}
.stat-number{
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .2px;
  margin: 0;
}
.stat-label{
  margin-top: 6px;
  font-size: 14px;
  opacity:.95;
}

/* ===== Mobile (≤768px) ===== */
@media (max-width: 768px){
  .stats-section{
    padding: 8px 8px;     /* was very large; keep it compact */
  }
  .stats-container{
    flex-direction: column;   /* vertical stack */
    gap: 8px;                 /* small breathing room */
    max-width: 520px;     
  }
  .stat-item{
    width: 100%;
    margin-top: 30px;
    margin-bottom: -35px;
  }
  .stat-item:last-child{ border-bottom: 0; }

  .stat-number{
    font-size: 52px;          /* smaller numbers for phones */
    line-height: 1.05;
  }
  .stat-label{
    font-size: 22px;          /* compact label */
    opacity:.9;
  }
}

/* Extra small phones */
@media (max-width: 380px){
  .stat-number{ font-size: 20px; }
  .stat-label{  font-size: 11.5px; }
}

/* Clientes Section */
.clientes-section {
  text-align: center;
  padding: 4rem 1rem;
}

.clientes-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* Increased spacing */
  margin-top: 2rem;
}

.cliente-card {
  background: #f0faf3;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cliente-card i {
  width: 20px;
  height: 20px;
}

.cliente-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.clientes-btn-container {
  margin-top: 2rem;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 2rem;
}

.cliente-item {
  background: #e9f7ef;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 180px;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cliente-item i {
  font-size: 1.2rem;
  color: #1e7e34;
}

.cliente-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.clientes-btn-wrapper {
  text-align: center;
}

.clientes-btn {
  background: #ff6600;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  transition: background 0.3s ease;
}

.clientes-btn:hover {
  background: #e25700;
}

/* Footer tweaks for final logos, X icon & WhatsApp badge */
.footer-logo-img{height:44px;width:auto}
.footer-iscc{height:30px;width:auto}

/* Social icons weight */
.footer-social i[data-lucide]{width:22px;height:22px}

/* WhatsApp badge on the right of bottom row */
.footer-bottom-content{display:flex;align-items:center;gap:12px}
.footer-bottom .footer-legal{margin-left:auto;display:flex;gap:12px}
.footer-wa{
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#0a2616;font-weight:700;
  padding:8px 12px;border-radius:999px;white-space:nowrap;
  transition:filter .2s ease;
}
.footer-wa:hover{filter:brightness(.95)}
.footer-wa svg{width:18px;height:18px}

/* Ensure the badge wraps nicely under 600px */
@media (max-width: 600px){
  .footer-bottom-content{flex-direction:column;align-items:flex-start}
  .footer-bottom .footer-legal{margin-left:0}
  .footer-wa{align-self:flex-start}
}

/* =========================
   SERVICES PAGE POLISH
   ========================= */

/* --- Sections, spacing & typography --- */
.section-pad { padding: clamp(48px, 6vw, 96px) 0; }
.section-pad--tight { padding: clamp(32px, 4.5vw, 72px) 0; }

.section-title{
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
  color: #0e1b12; /* deep navy/green used in home */
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.section-desc,
.section-subtitle{
  color:#31423a;
  margin: 0 0 28px;
}

/* --- Inner hero --- */
.hero--inner{
  position: relative;
  min-height: clamp(360px, 36vw, 520px);
  display: grid;
  place-items: center;
  background: #0c1410 url("src/assets/hero-fleet.jpg") center/cover no-repeat;
}
.hero--inner .hero__content--center{
  text-align: center;
  color: #fff;
}
.hero--dark .hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.hero__title{ color:#fff; }
.hero__subtitle{ opacity:.9; }
.hero__actions{ display:flex; gap:12px; justify-content:center; margin-top:14px; }
@media (max-width:680px){
  .hero__actions{ flex-direction:column; align-items:center; }
}

/* --- Cards grid (services) --- */
.cards{ display:grid; gap:20px; }
.cards--grid-4{ 
  grid-template-columns: repeat(3, minmax(0,1fr)); 
}
@media (max-width:1024px){
  .cards--grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .cards--grid-4{ grid-template-columns: 1fr; }
}

/* Card look aligned with Home */
.card{
  background:#fff;
  border-radius:14px;
  border:1px solid #e6eee9;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  padding:20px 18px;
  transition: box-shadow .2s, transform .2s;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(9, 61, 35, .2);
}

.card__icon{
  width:40px; height:40px; 
  display:grid; place-items:center;
  color:#15803d; background:#e8f8ee;
  border-radius:10px; margin-bottom:12px;
}
.card__icon svg, .card__icon i{ width:22px; height:22px; }

.card__title{
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 6px;
  color:#0e1b12;
}
.card__text{ color:#44554c; margin:0 0 10px; }
.card__list{ 
  margin: 0; padding: 0; list-style:none; 
  display:grid; gap:8px;
}
.card__list li{ display:flex; gap:8px; align-items:flex-start; color:#2a3a33; }
.card__list li i{ width:18px; height:18px; color:#16a34a; }
.card__list li svg{ width:18px; height:18px; color:#16a34a; }

/* --- Process (two columns) --- */
.process__grid{
  display:grid;
  gap: clamp(20px, 3.5vw, 40px);
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
}
@media (max-width: 980px){
  .process__grid{ grid-template-columns: 1fr; }
}

.process__text p{ color:#34463d; margin:4px 0 16px; }
.steps{ margin: 14px 0 0; padding:0; list-style:none; display:grid; gap:12px; }
.step{ display:flex; gap:12px; align-items:flex-start; }
.step__num{
  flex:0 0 28px; height:28px; border-radius:9px;
  display:grid; place-items:center;
  background:#e8f8ee; color:#0e7a39; font-weight:700;
}
.process__media img{
  width:100%; height:100%; min-height:320px;
  object-fit:cover; border-radius:16px;
  border:1px solid #e6eee9; box-shadow:0 8px 22px -14px rgba(8, 51, 31, .25);
}

/* --- Benefits --- */
.benefits__grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .benefits__grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:560px){ .benefits__grid{ grid-template-columns: 1fr;} }

.benefit{
  display:flex; gap:10px; align-items:center;
  background:#f4faf5; border:1px solid #e6eee9;
  padding:12px 14px; border-radius:12px; color:#213229;
}
.benefit i, .benefit svg{ width:18px; height:18px; color:#16a34a; }

/* --- Sectors (Clientes) --- */
.clientes-section .section-subtitle{
  color:#4c5d55; text-align:center; margin-bottom:28px;
}

.clientes-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(7, minmax(0,1fr));
}
@media (max-width:1180px){ .clientes-grid{ grid-template-columns: repeat(5, 1fr);} }
@media (max-width:900px){  .clientes-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:560px){  .clientes-grid{ grid-template-columns: repeat(2, 1fr);} }

.cliente-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:16px 12px; border-radius:14px;
  background:#eef7f0; border:1px solid #e2eee8;
  color:#10301f; font-weight:600; text-align:center;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.cliente-card:hover{
  transform: translateY(-2px);
  background:#e5f5ea; 
  box-shadow: 0 8px 20px -12px rgba(6, 49, 28, .25);
}
.cliente-card i, .cliente-card svg{ width:22px; height:22px; color:#15803d; }

/* --- CTA split --- */
.cta{ background:#0f7a3a; color:#fff; }
.cta__grid{
  display:grid; gap:20px; align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width:900px){ .cta__grid{ grid-template-columns: 1fr; } }
.cta__title{ color:#fff; margin:0 0 8px; }
.cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cta .btn--outline{ border-color:#c2f0d8; color:#fff; }
.cta .btn--outline:hover{ background:#138a45; }

/* --- Utility polish for Lucide icons anywhere --- */
i[data-lucide] { display:inline-flex; }

.cta-section {
  background-color: #0a7736;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 2rem; /* Increased padding */
  text-align: left;
  gap: 1.5rem;
}

.cta-section h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-buttons .btn-primary {
  background-color: #1abc9c;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: bold;
}

.cta-buttons .btn-outline {
  border: 2px solid white;
  background: transparent;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
}

/* ========== Quiénes Somos (nosotros.html) additions ========== */

/* hero */
.hero--subtle {
  background: var(--gradient-subtle);
  padding: clamp(3rem, 5vw, 5rem) 0;
  text-align: center;
}
.hero__title {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--heading, #0f172a);
  letter-spacing: -0.02em;
}
.hero__subtitle {
  margin: 0.75rem auto 0;
  max-width: 58ch;
  color: var(--muted-foreground);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* layout helpers */
.section { padding: clamp(2.5rem, 5vw, 5rem) 0; }
.section--muted { background: var(--muted); }
.section__title { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; margin-bottom: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.7; color: var(--muted-foreground); }
.stack { display: flex; flex-direction: column; }
.gap-sm { gap: .75rem; } .gap-md { gap: 1.25rem; }
.grid { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); }
.grid--2 { grid-template-columns: 1.05fr .95fr; align-items: center; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* media */
.media { position: relative; }
.media__img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,.06));
  object-fit: cover;
}

/* chips list (commitments) */
.card-list { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  padding: .6rem .9rem; border-radius: 999px; width: fit-content;
  font-weight: 600;
}
.chip i { width: 18px; height: 18px; }

/* cards */
.cards { gap: clamp(1rem, 2.2vw, 2rem); }
.card {
  background: var(--background, #fff);
  border-radius: 14px;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--border, #e5e7eb);
}
.card--raised { box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,.06)); }
.card__icon {
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--primary-50, #e8f7ee);
  display: grid; place-items: center; margin-bottom: .75rem;
}
.card__icon i { width: 26px; height: 26px; color: var(--primary-600, #16a34a); }
.card__title { font-weight: 800; margin-bottom: .5rem; }

/* simple list */
.list { display: grid; gap: .5rem; color: var(--muted-foreground); }

/* green callouts strip */
.callouts { background: #0f8a43; color: #fff; }
.callouts__wrap {
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.callout {
  display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: .75rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24);
  padding: .9rem 1rem; border-radius: 12px;
}
.callout i { width: 24px; height: 24px; }

/* certifications */
.certs { display: grid; gap: 1rem; }
.certs__item {
  display: grid; gap: 1rem; align-items: center;
  grid-template-columns: 84px 1fr;
  padding: 1rem; border-radius: 14px; border: 1px solid var(--border);
  background: var(--background);
}
.certs__item img { width: 84px; height: 84px; object-fit: contain; }
.certs__badge {
  width: 84px; height: 84px; display: grid; place-items: center;
  background: var(--primary-50, #e8f7ee); border-radius: 14px;
}
.certs__badge i { width: 34px; height: 34px; color: var(--primary-600, #16a34a); }
.certs__text p { color: var(--muted-foreground); }

/* CTA */
.cta { background: linear-gradient(180deg, #0e8a43 0%, #0a6f36 100%); color: #fff; }
.cta--grid { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.cta__wrap { display: grid; gap: 1rem; grid-template-columns: 1.1fr .9fr; align-items: center; }
.cta__text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; margin: 0 0 .35rem; }
.cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.btn--light {
  background: #fff; color: #0f8a43; border: 1px solid #fff;
}
.btn--light i { width: 18px; height: 18px; margin-right: .35rem; }

/* responsive */
@media (max-width: 1024px) {
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .callouts__wrap { grid-template-columns: 1fr; }
  .cta__wrap { grid-template-columns: 1fr; text-align: left; }
}

/* small tweaks for the top bar and header spacing, so this page breathes nicely */
.top-bar .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--muted-foreground); display: inline-block; margin: 0 .5rem; opacity: .5; }
.iscc-mini { height: 18px; width: auto; opacity: .85; vertical-align: middle; margin-right: .35rem; }

/* --- Top bar & quick header bridges --- */
.top-bar{background:#f5f7fb;color:#2a3543;font-size:14px}
.top-bar__wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.top-bar__left,.top-bar__right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.top-link:hover{text-decoration:underline}
.top-bar .dot{width:3px;height:3px;border-radius:999px;background:#64748b33;display:inline-block;margin:0 .5rem}
.iscc-mini{height:18px;width:auto;opacity:.85;vertical-align:middle}

@media (max-width:768px){.top-bar{display:none}}

.header .header__wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__img{height:36px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text small{font-size:12px;color:#64748b}
.nav--desktop .nav__link{margin:0 10px;font-weight:700;letter-spacing:.3px;padding:8px 0;border-bottom:2px solid transparent}
.nav--desktop .nav__link:hover{border-bottom-color:#16a34a}
.nav__link--active{color:#16a34a;border-bottom-color:#16a34a}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
@media (max-width:992px){.nav--desktop{display:none}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}}
.nav--mobile{display:grid;gap:10px;padding:12px 16px;border-top:1px solid #e6e9ee;background:#fff}

/* --- Footer grid so it matches the new markup --- */
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.footer__col h4{margin:6px 0 10px}
.footer__brand,.footer__iscc{display:flex;align-items:center;gap:10px}
.footer__about{color:#cfe9da}
.foot-links,.foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:20px;padding-top:10px}
.footer__bottom__wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (max-width:992px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer__grid{grid-template-columns:1fr}.footer__bottom__wrap{flex-direction:column;align-items:flex-start}}

/* ========== Quiénes Somos (about page) ========== */

/* hero */
.hero--subtle{background:linear-gradient(#fff,#f7faf9);padding:clamp(3rem,5vw,5rem) 0;text-align:center}
.hero__title{font-size:clamp(2.25rem,4vw,3rem);font-weight:800;color:#0f172a;letter-spacing:-.02em}
.hero__subtitle{margin:.75rem auto 0;max-width:58ch;color:#475569;font-size:clamp(1rem,1.4vw,1.125rem)}

/* layout helpers */
.section{padding:clamp(2.5rem,5vw,5rem) 0}
.section--muted{background:#f7f9fb}
.section__title{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:800;margin-bottom:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.7;color:#475569}
.stack{display:flex;flex-direction:column}
.gap-sm{gap:.75rem}.gap-md{gap:1.25rem}
.grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem)}
.grid--2{grid-template-columns:1.05fr .95fr;align-items:center}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.grid--2{grid-template-columns:1fr}.grid--3{grid-template-columns:1fr}}

/* media */
.media__img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);object-fit:cover}

/* chips */
.card-list{display:grid;gap:.75rem;grid-template-columns:1fr}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;padding:.6rem .9rem;border-radius:999px;width:fit-content;font-weight:600}
.chip i{width:18px;height:18px}

/* cards */
.cards{gap:clamp(1rem,2.2vw,2rem)}
.card{background:#fff;border-radius:14px;padding:clamp(1.25rem,2.5vw,2rem);border:1px solid #e5e7eb}
.card--raised{box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card__icon{width:52px;height:52px;border-radius:999px;background:#e8f7ee;display:grid;place-items:center;margin-bottom:.75rem}
.card__icon i{width:26px;height:26px;color:#16a34a}
.card__title{font-weight:800;margin-bottom:.5rem}
.list{display:grid;gap:.5rem;color:#475569}

/* green callouts */
.callouts{background:#0f8a43;color:#fff}
.callouts__wrap{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);padding:clamp(1.75rem,3.5vw,2.75rem) 0}
.callout{display:grid;grid-template-columns:40px 1fr;align-items:start;gap:.75rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);padding:.9rem 1rem;border-radius:12px}
.callout i{width:24px;height:24px}
@media (max-width:1024px){.callouts__wrap{grid-template-columns:1fr}}

/* certifications */
.certs{display:grid;gap:1rem}
.certs__item{display:grid;gap:1rem;align-items:center;grid-template-columns:84px 1fr;padding:1rem;border-radius:14px;border:1px solid #e5e7eb;background:#fff}
.certs__item img{width:84px;height:84px;object-fit:contain}
.certs__badge{width:84px;height:84px;display:grid;place-items:center;background:#e8f7ee;border-radius:14px}
.certs__badge i{width:34px;height:34px;color:#16a34a}
.certs__text p{color:#475569}

/* CTA */
.cta{background:linear-gradient(180deg,#0e8a43 0%,#0a6f36 100%);color:#fff}
.cta--grid{padding:clamp(1.75rem,3.5vw,2.5rem) 0}
.cta__wrap{display:grid;gap:1rem;grid-template-columns:1.1fr .9fr;align-items:center}
.cta__text h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;margin:0 0 .35rem}
.cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn--light{background:#fff;color:#0f8a43;border:1px solid #fff}
.btn--light i{width:18px;height:18px;margin-right:.35rem}
@media (max-width:1024px){.cta__wrap{grid-template-columns:1fr}}


/* =============================
   ¿CÓMO LO HACEMOS? – specific
   ============================= */

/* Light alt background helper (if you use it elsewhere too) */
.section-alt { background: #f7f9fb; }

/* Process timeline (single column, spacious cards) */
.process-timeline {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
.process-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 12px;
}
.process-card__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #e8f6ee;
  color: #0f7a3a;
  display: grid; place-items: center;
}
.process-card__icon i[data-lucide] { width: 24px; height: 24px; }
.process-card__title {
  margin: 0 0 6px;
  font-weight: 800;
  color: #0e1b12;
}

/* Warning / risks */
.warning-header .warning-icon{
  width: 54px; height: 54px;
  display:grid;place-items:center;
  margin: 0 auto 8px;
  border-radius: 14px;
  background: #fff5f5; color:#b42318;
}
.warning-header .warning-icon i[data-lucide]{width:26px;height:26px}

.risks-grid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
@media (max-width: 720px){ .risks-grid{ grid-template-columns:1fr; } }

.risk{
  display:flex; gap:12px; align-items:flex-start;
  background: #fff;
  border: 1px solid #ffe2e2;
  box-shadow: 0 6px 18px rgba(255, 114, 114, .08);
}
.risk__icon{
  width:40px;height:40px;border-radius:10px;
  background:#fff5f5;color:#b42318;
  display:grid;place-items:center;flex:0 0 40px;
}
.risk__icon[data-lucide]{width:20px;height:20px}
.risk__content h3{margin:0 0 4px}

/* Legal card */
.card-primary{ border-color:#bfe8cf; background: #ecf9f1; }
.legal .cert-badge{
  margin-top: 8px;
  display:inline-flex; gap:8px; align-items:center;
  background:#14a44d; color:#fff; font-weight:800;
  padding:8px 12px; border-radius:999px;
}
.legal .cert-badge i[data-lucide]{width:18px;height:18px}

/* Inner hero uses same system classes */
.hero--inner{
  position: relative;
  min-height: clamp(360px, 36vw, 520px);
  display: grid;
  place-items: center;
  background: #0b1510 center/cover no-repeat;
}
.hero--dark .hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
}
.hero__content--center{ text-align:center; color:#fff; }
.hero__title{ color:#fff; margin:0 0 6px; }
.hero__subtitle{ color:#effcf5; opacity:.9; }

/* Minor polish for CTA band (more breathing room) */
.cta-section { padding: 3rem 1.5rem; }


/* ========= ACU page components ========= */

/* hero (light version) */
.hero-alt {
  padding: clamp(64px, 8vw, 96px) 0 clamp(28px, 5vw, 40px);
  background: var(--bg-weak,#f8faf9);
}
.hero-alt .hero__title { text-align:center; }
.hero-alt .hero__subtitle {
  text-align:center;
  max-width: 820px;
  margin-inline: auto;
}

/* facts */
.acu-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.fact-card { padding: 26px 22px; }
.fact-icon { font-size: 28px; color: var(--brand-700,#107c41); }
.fact-card .fact-icon svg { width: 28px; height: 28px; }
.fact-stat {
  font: 700 clamp(22px, 3vw, 28px);
  margin: 8px 0 6px;
  color: var(--gray-900);
}

/* definition block */
.acu-definition {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
}
.acu-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.characteristics h3 { margin: 12px 0 8px; }
.characteristics ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.characteristics li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}
.characteristics li svg { width: 18px; height: 18px; color: var(--brand-700,#107c41); }

/* horizontal steps */
.process-steps-horizontal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}
.step-item {
  text-align: center;
  padding: 18px 14px;
  background: var(--bg-base,#fff);
  border: 1px solid var(--border,#e7ece9);
  border-radius: 14px;
}
.step-number {
  width: 34px; height: 34px;
  display: inline-grid; place-items:center;
  border-radius: 50%;
  background: var(--brand-100,#e7f5ec);
  color: var(--brand-700,#107c41);
  font-weight: 700;
  margin-bottom: 8px;
}

/* green benefits band */
.section-primary {
  background: var(--brand-700,#107c41);
  color: #fff;
}
.text-white { color:#fff; }
.text-white-80 { color: rgba(255,255,255,.85); }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.benefit-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.benefit-item svg { width:18px;height:18px; }

/* regulations */
.regulations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.regulation-card { padding: 22px 18px; }
.regulation-icon svg { width:26px;height:26px;color:var(--brand-700,#107c41); }

/* impact comparison */
.impact-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.impact-header {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.impact-list { margin: 0; padding-left: 18px; }
.problems-section .impact-header svg { color: #c2272d; }
.solutions-section .impact-header svg { color: var(--brand-700,#107c41); }

/* responsive */
@media (max-width: 1024px) {
  .acu-definition { grid-template-columns: 1fr; }
  .process-steps-horizontal { grid-template-columns: repeat(3,1fr); }
  .benefits-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .acu-facts { grid-template-columns: 1fr; }
  .process-steps-horizontal { grid-template-columns: 1fr; }
  .regulations-grid { grid-template-columns: 1fr; }
  .impact-comparison { grid-template-columns: 1fr; }
}

/* ---------- Contact page layout ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 960px) {
  .contact-cards { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .contact-cards { grid-template-columns: 1fr; }
}
.contact-card {
  text-align: center;
  padding: 22px 18px;
}
.contact-card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--primary-10, hsl(142 60% 45% / .10));
  color: var(--primary, #198754);
  margin: 0 auto 10px;
}
.contact-card__icon svg { width: 22px; height: 22px; }

/* ---------- Two-column section (form + reasons) ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.form-card { padding: 22px; }

.gb-form .grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 720px){ .gb-form .grid-2 { grid-template-columns: 1fr; } }
.gb-form .field { display: flex; flex-direction: column; gap: 6px; }
.gb-form .field > span { font-weight: 600; }
.gb-form input, .gb-form select, .gb-form textarea {
  width: 100%; padding: .8rem 1rem;
  border: 2px solid var(--border, #e6e6e6);
  border-radius: 12px; background: var(--background, #fff);
}
.gb-form input:focus, .gb-form select:focus, .gb-form textarea:focus {
  outline: none; border-color: var(--primary, #198754);
  box-shadow: 0 0 0 3px hsl(142 60% 45% / .18);
}

/* ---------- Reasons list (right side) ---------- */
.reasons-list { padding: 20px; margin-bottom: 16px; }
.reasons-title { margin-bottom: 10px; }
.card--row {
  display: grid; grid-template-columns: 48px 1fr; gap: 12px;
  padding: 12px; border: 1px solid var(--border, #e6e6e6);
  border-radius: 14px; background: #fff;
}
.card--row + .card--row { margin-top: 10px; }
.reason__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--primary-10, hsl(142 60% 45% / .10));
  color: var(--primary, #198754);
}
.reason__icon svg { width: 22px; height: 22px; }

/* ---------- Atención inmediata (green block) ---------- */
.attention-card {
  background: linear-gradient(0deg, #107a38, #107a38);
  color: #fff; border-radius: 16px; padding: 18px 20px; margin-top: 18px;
  border: 1px solid hsl(142 55% 20% / .5);
}
.attention-card h4 { margin: 0 0 6px; color: #fff; }
.attention-card p  { margin: 0 0 12px; color: #eaf8ee; }
.btn--call {
  display: inline-flex; align-items: center; gap: 8px;
  background: #f59e0b; color: #1f2a22; font-weight: 700;
  border-radius: 10px; padding: 10px 14px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn--call:hover { filter: brightness(.95); }
.btn--call svg { width: 18px; height: 18px; }

/* ---------- Service areas ---------- */
.service-areas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .service-areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .service-areas { grid-template-columns: 1fr; } }
.area-card { text-align: left; padding: 20px 18px; }
.area-card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--primary-10, hsl(142 60% 45% / .10));
  color: var(--primary, #198754); margin-bottom: 8px;
}
.area-card__icon svg { width: 20px; height: 20px; }

/* ---------- CTA ribbon (green bottom bar) ---------- */
.cta-ribbon {
  background: linear-gradient(0deg, #0f7a37, #0f7a37);
  color: #fff; padding: 28px 0;
  border-top: 6px solid hsl(142 60% 30% / .25);
}
.cta-ribbon__inner {
  display: grid; gap: 14px;
  grid-template-columns: 1.1fr .9fr; align-items: center;
}
@media (max-width: 900px){ .cta-ribbon__inner { grid-template-columns: 1fr; text-align: center; } }
.cta-ribbon h2 { color: #fff; margin: 0 0 6px; }
.cta-ribbon p  { color: #eaf8ee; margin: 0; }
.cta-ribbon__actions { text-align: right; }
@media (max-width: 900px){ .cta-ribbon__actions { text-align: center; } }


/* Hero brand green background */
.hero-alt--brand {
  background-color: #0f7a37; /* brand green */
  color: #fff;
  padding: 50px 0;
  text-align: center;
}
.hero-alt--brand .hero__title {
  color: #fff;
}
.hero-alt--brand .hero__subtitle {
  color: rgba(255,255,255,0.9);
  max-width: 700px;
  margin: 0 auto;
}

/* Regulation cards */
.regulations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.regulation-card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.regulation-card .regulation-icon {
  color: #0f7a37;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
}


/* =========================
   Puntos Limpios (add-ons)
   ========================= */

/* Brand hero (green background, white text) */
.hero--green {
  --bg: var(--brand, #0f7a3a);
  background: var(--bg);
  padding: clamp(56px, 7vw, 92px) 0;
  position: relative;
}
.hero--green .hero__title { color:#fff; }
.hero--green .hero__subtitle { color: rgba(255,255,255,.9); }
.btn.btn--white,
.btn--white { background:#fff; color: var(--brand, #0f7a3a); }
.btn--white:hover { filter: brightness(.95); }

/* Layout helpers */
.split {
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
}
@media (max-width: 880px){
  .split { grid-template-columns: 1fr; }
}

/* Capacity band */
.capacity-band {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  margin-top:16px;
  border:1px solid var(--card-border, #e8edf1);
}
.capacity-band__title {
  display:flex; gap:10px; align-items:center;
  font-weight:600;
}
.capacity-band__values {
  font-weight:700;
  letter-spacing:.5px;
}

/* Small feature / service cards */
.feature-card,
.service-badge {
  text-align:center;
  padding:22px 20px;
}
.feature-card__icon,
.service-badge__icon {
  width:56px;height:56px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--surface-2, #f2f6f8);
  color:var(--brand, #0f7a3a);
  margin:0 auto 12px;
}
.service-badge__stats {
  display:flex; gap:24px; justify-content:center; margin-top:10px;
}
.service-badge__stats .stat {
  display:block; font-weight:800; font-size:22px; line-height:1.1;
}

/* Advantages / locations */
.grid-3 { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
.cards-gap > .card { padding:20px; }
@media (max-width: 900px){ .grid-3 { grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .grid-3 { grid-template-columns:1fr; } }

.advantage__icon,
.location__icon {
  color:var(--brand, #0f7a3a);
  margin-bottom:8px;
}

/* Lists */
.list-check { margin:10px 0 0 18px; }
.list-check li { margin:6px 0; }

/* Gallery */
.gallery-grid {
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 960px){ .gallery-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .gallery-grid { grid-template-columns:1fr; } }

.gallery__ph {
  display:grid; place-items:center;
  padding:40px 14px; min-height:160px;
  color:#6a7a87; text-align:center;
}
.gallery__ph i { margin-bottom:6px; color:#88a1ae; }

/* Success tint reused */
.card-success { background: #e7f7ec; border:1px solid #c8edd5; }

/* ===== Sostenibilidad add-ons ===== */

/* Hero brand (already used on otras páginas) */
.hero-alt--brand { background:#0f7a37; color:#fff; padding:56px 0; }
.hero-alt--brand .hero__title { color:#fff; }
.hero-alt--brand .hero__subtitle { color:rgba(255,255,255,.9); }

/* Two-column split */
.split { display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; } }

/* ISCC card */
.iscc-card { text-align:center; padding:22px; }
.iscc-card__logo { width:84px; height:auto; margin:0 auto 10px; display:block; }
.iscc-card .pill {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eaf6ee; color:#0f7a37; font-weight:700; font-size:12px;
}

/* Lists with checks */
.list-check { margin:14px 0 0 0; padding:0; list-style:none; }
.list-check.big li { font-size:16px; }
.list-check li { display:flex; align-items:flex-start; gap:10px; margin:8px 0; }
.list-check li i { color:#0f7a37; margin-top:2px; }

/* Standards */
.standards-grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(4,minmax(0,1fr));
}
@media (max-width: 960px){ .standards-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .standards-grid { grid-template-columns: 1fr; } }
.standard { text-align:center; padding:22px; }
.standard__icon { color:#0f7a37; margin-bottom:8px; }

/* Impact metrics */
.impact-metrics {
  display:grid; gap:16px;
  grid-template-columns: repeat(4,minmax(0,1fr));
}
@media (max-width: 960px){ .impact-metrics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .impact-metrics { grid-template-columns: 1fr; } }
.metric-card { text-align:center; padding:22px; }
.metric-icon { color:#0f7a37; margin-bottom:8px; }
.metric-number { font: 800 30px/1.1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.metric-label { color:#4a5662; margin-top:4px; }

/* ODS */
.section-primary { background:#0f7a37; }
.ods-grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
@media (max-width: 960px){ .ods-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .ods-grid { grid-template-columns: 1fr; } }
.ods { text-align:center; padding:22px; background:#ffffff; }
.ods__num {
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:#0f7a37; color:#fff; font-weight:800; margin:0 auto 8px;
}

/* Cert card */
.cert-card { padding:0; overflow:hidden; }
.cert-card__head {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:#f3f7f5; border-bottom:1px solid #e5ece8;
}
.cert-card__head img { width:42px; height:auto; }
.cert-card__body { padding:18px 16px; }
.cert-card__body h3 { margin:6px 0 8px; font-size:20px; }

/* Button rows */
.btn-row { margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }

/* Text helpers (used on hero variations) */
.text-white { color:#fff !important; }
.text-white-80 { color:rgba(255,255,255,.86) !important; }

/* Brand-tinted neutral band */
.section-muted { background: #f3f8f5; } /* soft green-tint to avoid stark white */

/* Make sure cards stay clean on tinted backgrounds */
.iscc-card,
.metric-card,
.standard,
.ods,
.cert-card {
  background: #fff;
}

/* Optional: soften iscc card edge for better contrast on tinted sections */
.iscc-card { border: 1px solid #e8efe9; }

.hero-alt--brand {
  background-color: #007a3b; /* color institucional */
  color: white;
  padding: 6rem 1rem;
}

.hero-alt--brand .hero__title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.hero-alt--brand .hero__subtitle {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.quick-links .card {
  padding: 1.2rem;
  background: #f8f8f8;
  border-radius: 0.75rem;
  text-decoration: none;
  font-weight: 600;
  color: #134e38;
  transition: background 0.2s;
}

.quick-links .card:hover {
  background: #e9f6ee;
}

.btn-group-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.acu-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  text-align: center;
}

.acu-step {
  background: #f8f8f8;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.warning-card {
  background: #fff3f3;
  border: 1px solid #e53e3e;
  border-radius: 8px;
  padding: 1rem;
}

.card__icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* --- Servicios page fixes --- */
.btn-group-center {
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
}

.btn--white { color:#fff; border-color:#fff; }
.btn--white:hover { background:rgba(255,255,255,.12); }

.cards-grid-3 {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

.service-card { text-align:left; }
.service-icon { font-size:0; margin-bottom:8px; color:var(--primary); }
.service-icon > svg { width:28px; height:28px; }

.acu-steps-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px; margin-top:14px;
}
.acu-step {
  background:#f6f7f8; border:1px solid #e8ecef; border-radius:10px;
  padding:16px; display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; font-weight:500;
}
.acu-step svg { width:22px; height:22px; color:var(--primary); }

.warning-card {
  background:#fff6f6; border:1px solid #f2b7b7; border-radius:10px;
  padding:14px 16px;
}
.warning-card li { display:flex; align-items:center; gap:8px; margin:6px 0; }

.collapse { max-width:980px; margin:0 auto; }
.collapse__trigger {
  width:100%; text-align:left; background:#0f6f35; color:#fff;
  border:none; border-radius:10px; padding:14px 16px; font-weight:700;
  display:flex; align-items:center; gap:8px; justify-content:flex-start;
}
.collapse__trigger .mr-8 { margin-right:8px; }
.collapse__content { padding:14px 4px 0; }

.list-unstyled { list-style:none; padding:0; margin:0; }



/* Force bigger Lucide icons inside the clientes carousel */
.cliente-card .lucide,
.cliente-card svg {
  width: 56px !important;
  height: 56px !important;
  stroke-width: 2.2 !important;
  flex-shrink: 0;
}


/* ===== Impacto ACU (slider) ===== */
.acu-impact {
  padding: 64px 0;
}

.acu-impact__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
}

.acu-impact__list {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 10px;
}

.acu-impact__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.35;
}

.acu-bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #14a44d;
  margin-top: 6px;
  flex: 0 0 auto;
}

.acu-impact__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Slider shell */
.acu-slider {
  position: relative;
  padding: 14px;
  overflow: hidden;
}

.acu-slider__viewport {
  overflow: hidden;
  border-radius: 14px;
}

.acu-slider__track {
  display: flex;
  transition: transform 350ms ease;
  will-change: transform;
}

.acu-slide {
  min-width: 100%;
  margin: 0;
  position: relative;
}

.acu-slide img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.acu-slide figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* Arrows */
.acu-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 2;
}

.acu-slider__arrow--left { left: 10px; }
.acu-slider__arrow--right { right: 10px; }

/* Dots */
.acu-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.acu-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  opacity: 0.35;
  background: #111;
}

.acu-dot.is-active {
  opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
  .acu-impact__grid {
    grid-template-columns: 1fr;
  }
  .acu-slide img {
    height: 280px;
  }
}

/* Graphic chips (Nosotros overview) */
.card-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20, 164, 77, 0.22);
  background: rgba(20, 164, 77, 0.08);
  font-weight: 600;
}

.chip__icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

.chip__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.chip__text {
  line-height: 1.25;
}

/* Accent variants */
.chip--green {
  border-color: rgba(20,164,77,0.22);
  background: rgba(20,164,77,0.08);
}
.chip--blue {
  border-color: rgba(34,112,255,0.18);
  background: rgba(34,112,255,0.07);
}
.chip--orange {
  border-color: rgba(255,122,0,0.20);
  background: rgba(255,122,0,0.08);
}


/* ===== Compromisos ===== */
.commit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.commit-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 999px;
  background: rgba(20,164,77,0.08);
  border: 1px solid rgba(20,164,77,0.22);
  font-weight: 600;
}

.commit-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

.commit-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.3;
}

/* ===== Objetivos ===== */
.objectives-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.objectives-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.35;
}

.objectives-list svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  margin-top: 2px;
  color: #14a44d;
}

/* ===== Section spacing improvements ===== */
.section {
  padding: 96px 0;
}

.section--muted {
  padding: 110px 0;
}

.stack.gap-lg {
  row-gap: 64px;
}


/* ===== ¿Cómo reciclar el ACU? (accordion + steps) ===== */
.acu-how {
  padding: 0;
  overflow: hidden;
}

.acu-how__toggle {
  width: 100%;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  cursor: pointer;
  background: #fff;
}

.acu-how__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
}

.acu-how__title svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
  color: #14a44d;
}

.acu-how__chev svg {
  width: 22px;
  height: 22px;
  transition: transform 220ms ease;
}

.acu-how.is-open .acu-how__chev svg {
  transform: rotate(180deg);
}

.acu-how__content {
  padding: 0 20px 22px;
}

.acu-how__subtitle {
  margin: 0 0 16px;
  opacity: 0.85;
}

/* Steps layout */
.acu-steps {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

/* Each step looks like a mini graphic card */
.acu-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(20,164,77,0.05);
  overflow: hidden;
}

/* Animated “progress line” */
.acu-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0%;
  background: #14a44d;
  transition: width 600ms ease;
}
.acu-how.is-open .acu-step::before {
  width: 100%;
}

.acu-step__badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  background: #14a44d;
  color: #fff;
  margin-top: 2px;
}

.acu-step__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

.acu-step__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.3;
  color: #14a44d;
}

.acu-step__text h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.acu-step__text p {
  margin: 0;
  opacity: 0.85;
  line-height: 1.35;
}

/* Buttons row inside */
.acu-how__cta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 720px) {
  .acu-step {
    grid-template-columns: 32px 40px 1fr;
  }
  .acu-how__toggle {
    padding: 16px 16px;
  }
  .acu-how__content {
    padding: 0 16px 18px;
  }
}


/* ===== Recolectores informales ===== */
.informal-grid {
  align-items: center;
  gap: 32px;
}

.warning-card--strong {
  border: 2px solid rgba(220,53,69,0.25);
  background: rgba(220,53,69,0.05);
}

.warning-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-weight: 800;
  color: #b02a37;
}

.warning-title svg {
  width: 22px;
  height: 22px;
}

.warning-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.warning-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.4;
}

.warning-list svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: #dc3545;
}

/* Fake certificate card */
.fake-cert-card {
  position: relative;
  text-align: center;
  padding-top: 36px;
}

.fake-cert-img {
  max-width: 100%;
  border-radius: 14px;
  border: 2px dashed #dc3545;
}

/* Arrow label */
.fake-cert-label {
  position: absolute;
  top: 10px;
  left: -10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc3545;
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.fake-cert-label svg {
  width: 16px;
  height: 16px;
}

/* Mobile */
@media (max-width: 768px) {
  .fake-cert-label {
    position: static;
    margin-bottom: 12px;
    justify-content: center;
  }
}


/* ===== Nuestros servicios incluyen ===== */
.svc-inc-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.svc-inc-card{
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

.svc-inc-media{
  height: 200px;
  margin: 0;
  background: #f4f6f8;
}

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

.svc-inc-body{
  padding: 18px 18px 20px;
}

.svc-inc-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(20,164,77,0.10);
  border: 1px solid rgba(20,164,77,0.18);
  margin-bottom: 10px;
}

.svc-inc-icon svg{
  width: 22px;
  height: 22px;
  stroke-width: 2.3;
  color: #14a44d;
}

.svc-inc-title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 18px;
}

.svc-inc-text{
  margin: 0;
  opacity: .88;
  line-height: 1.4;
}

/* Graphic placeholders for items without images yet */
.svc-inc-media--graphic{
  display: grid;
  place-items: center;
}

.svc-inc-graphic{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(20,164,77,0.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,122,0,0.15), transparent 55%),
    #f7faf8;
}

.svc-inc-graphic svg{
  width: 46px;
  height: 46px;
  stroke-width: 2;
  color: #14a44d;
}

.svc-inc-graphic span{
  font-weight: 800;
  opacity: .9;
}

/* Note */
.svc-inc-note{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-top: 22px;
  padding: 18px;
}

.svc-inc-note__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,122,0,0.10);
  border: 1px solid rgba(255,122,0,0.18);
}

.svc-inc-note__icon svg{
  width: 22px;
  height: 22px;
  stroke-width: 2.3;
  color: #ff7a00;
}

/* CTA card */
.svc-inc-cta{
  margin-top: 18px;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.svc-inc-cta__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 860px){
  .svc-inc-grid{
    grid-template-columns: 1fr;
  }
  .svc-inc-media{
    height: 210px;
  }
  .svc-inc-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===== Proceso: línea visual ACU ===== */
.acu-flow{
  display:flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.acu-step{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  width: 320px;
  padding: 16px;
  border-radius: 18px;
}

.acu-step__icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(20,164,77,0.10);
  border: 1px solid rgba(20,164,77,0.18);
  flex: 0 0 auto;
}

.acu-step__icon svg{
  width: 22px;
  height: 22px;
  color: #14a44d;
  stroke-width: 2.3;
}

.acu-step__body h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.acu-step__body p{
  margin: 0;
  opacity: .88;
  line-height: 1.4;
}

.acu-step__connector{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: .5;
  padding: 0 4px;
}

.acu-step__connector svg{
  width: 18px;
  height: 18px;
}

/* CTA inside flow */
.acu-flow-cta{
  margin-top: 18px;
  padding: 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  border-radius: 18px;
}

@media (max-width: 860px){
  .acu-flow-cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .acu-step__connector{
    display:none;
  }
}

/* ===== Informales / riesgos ===== */
.why-danger{
  padding: 18px;
  border-radius: 18px;
}

.why-danger h3 svg{
  width: 20px;
  height: 20px;
  color: #dc3545;
}

.bad-uses-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.bad-use{
  padding: 14px;
  border-radius: 16px;
}

.bad-use__top{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 8px;
}

.bad-use__tag{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.bad-use__tag--bad{
  background: rgba(220,53,69,0.10);
  border: 1px solid rgba(220,53,69,0.20);
  color: #b02a37;
}

.bad-use__tag svg{
  width: 14px;
  height: 14px;
}

.bad-use h4{
  margin: 0 0 6px;
  font-weight: 800;
}

.bad-use p{
  margin: 0;
  opacity: .88;
  line-height: 1.4;
}

.good-use{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(20,164,77,0.22);
  background: rgba(20,164,77,0.06);
}

.good-use__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20,164,77,0.12);
  border: 1px solid rgba(20,164,77,0.20);
  margin-bottom: 10px;
}

.good-use__badge svg{
  width: 16px;
  height: 16px;
  color: #14a44d;
}

.avoid{
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
}

.avoid-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 10px;
}

.avoid-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height: 1.4;
}

.avoid-list svg{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #14a44d;
}

.final-cta{
  margin-top: 14px;
  padding: 16px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 14px;
  border-radius: 18px;
}

@media (max-width: 860px){
  .bad-uses-grid{
    grid-template-columns: 1fr;
  }
  .final-cta{
    flex-direction: column;
    align-items:flex-start;
  }
}


/* ===== Normatividad upgrades ===== */
.regulations-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.regulation-card--detail{
  padding: 18px;
  border-radius: 18px;
}

.regulation-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.regulation-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  background: rgba(20,164,77,0.10);
  border: 1px solid rgba(20,164,77,0.18);
}

.regulation-badge svg{ width: 16px; height: 16px; }

.regulation-icon-wrap{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
}

.regulation-icon-wrap svg{ width: 20px; height: 20px; }

.regulation-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.list--checks{
  list-style:none;
  padding-left: 0;
  margin: 10px 0 0;
  display:grid;
  gap: 10px;
}

.list--checks li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height: 1.4;
}

.list--checks svg{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #14a44d;
}

/* table */
.table-wrap{
  padding: 14px;
  border-radius: 18px;
  overflow:auto;
}

.compare-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.compare-table th,
.compare-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
}

.compare-table thead th{
  font-weight: 900;
  text-align: left;
}

.compare-table tbody tr:hover{
  background: rgba(0,0,0,0.02);
}

/* compliance grid */
.compliance-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.compliance-item{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 16px;
  border-radius: 18px;
}

.compliance-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(20,164,77,0.10);
  border: 1px solid rgba(20,164,77,0.18);
  flex: 0 0 auto;
}

.compliance-icon svg{
  width: 22px;
  height: 22px;
  color: #14a44d;
}

.compliance-item h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
}

.compliance-item p{
  margin: 0;
  opacity: .88;
  line-height: 1.45;
}

.final-message{
  padding: 18px;
  border-radius: 18px;
}

@media (max-width: 900px){
  .regulations-grid{
    grid-template-columns: 1fr;
  }
  .compliance-grid{
    grid-template-columns: 1fr;
  }
  .compare-table{
    min-width: 640px;
  }
}

/* ===== Sostenibilidad (ISCC) ===== */
.iscc-head{
  display:flex;
  gap:14px;
  align-items:center;
}

.iscc-logo{
  width: 64px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 10px;
}

.badge-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  background: rgba(20,164,77,0.10);
  border: 1px solid rgba(20,164,77,0.18);
}

.pill svg{
  width: 16px;
  height: 16px;
  color: #14a44d;
}