/* =========================================================
   COMPRA CON SENTIDO · INTRO OVERLAP V1
   Bloque común inmediatamente después del hero.
   ========================================================= */

.ccs-intro-overlap{
  position:relative;
  z-index:4;
  margin-top:-46px!important;
  padding:0 0 48px!important;
}

.ccs-intro-card{
  display:grid!important;
  grid-template-columns:.9fr 1.1fr!important;
  gap:56px!important;
  width:100%!important;
  margin:0!important;
  padding:44px 48px!important;
  background:#fff!important;
  border:1px solid rgba(13,86,50,.08)!important;
  border-radius:var(--radius-xl,26px)!important;
  box-shadow:var(--shadow,0 18px 45px rgba(22,60,39,.10))!important;
}

.ccs-intro-heading{
  min-width:0;
}

.ccs-intro-heading .section-kicker,
.ccs-intro-heading [class*="kicker"],
.ccs-intro-heading [class*="eyebrow"]{
  display:inline-block;
  margin:0;
}

.ccs-intro-card h2{
  margin:10px 0 0!important;
  color:var(--green-950,#063d26)!important;
  font-size:clamp(30px,3vw,42px)!important;
  line-height:1.16!important;
  letter-spacing:-.025em!important;
}

.ccs-intro-copy{
  min-width:0;
  align-self:center!important;
  justify-self:stretch;
  text-align:left!important;
}

.ccs-intro-card > p.ccs-intro-copy{
  margin:0!important;
  align-self:center!important;
  color:var(--muted,#5f6d65)!important;
  align-self:center;
}

.ccs-intro-copy p{
  margin:0 0 16px!important;
  color:var(--muted,#5f6d65)!important;
}

.ccs-intro-copy p:last-child{
  margin-bottom:0!important;
}

.ccs-intro-copy a{
  color:var(--green-800,#0a653c);
  font-weight:750;
  text-underline-offset:3px;
}

/* Compatibilidad con bloques rápidos de comparativas */
.ccs-intro-card > aside{
  align-self:stretch;
}

/* Evita dobles solapes de los estilos antiguos */
.intro-section.ccs-intro-overlap,
.tools-intro.ccs-intro-overlap,
.home-intro.ccs-intro-overlap,
.drill-intro.ccs-intro-overlap,
.vacuum-intro.ccs-intro-overlap,
.dehum-intro.ccs-intro-overlap,
.intro-wrap.ccs-intro-overlap{
  margin-top:-46px!important;
}

@media(max-width:900px){
  .ccs-intro-card{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
}

@media(max-width:760px){
  .ccs-intro-overlap{
    margin-top:-32px!important;
    padding-bottom:38px!important;
  }

  .ccs-intro-card{
    gap:22px!important;
    padding:30px 25px!important;
    border-radius:20px!important;
  }

  .ccs-intro-card h2{
    font-size:clamp(28px,8vw,36px)!important;
  }
}


/* Integración con páginas antiguas que añadían padding antes del primer bloque */
.ccs-has-intro-overlap{
  padding-top:0!important;
}

.opening.ccs-intro-overlap{
  max-width:none!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
}


/* =========================================================
   INTRO V1.1 · TIPOGRAFÍA Y COLOR CANÓNICOS
   La tarjeta debe verse idéntica en cualquier sección,
   aunque la página conserve CSS o estilos inline antiguos.
   Referencia visual: Inicio / Herramientas.
   ========================================================= */

.ccs-intro-card{
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif!important;
  font-size:17px!important;
  line-height:1.6!important;
  color:var(--ink,#20352a)!important;
  -webkit-font-smoothing:antialiased;
}

.ccs-intro-heading .section-kicker,
.ccs-intro-heading .hero-kicker,
.ccs-intro-heading [class*="kicker"],
.ccs-intro-heading [class*="eyebrow"]{
  display:inline-block!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  color:var(--green-700,#138250)!important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

.ccs-intro-card h2{
  margin:10px 0 0!important;
  color:var(--green-950,#063d26)!important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif!important;
  font-size:clamp(30px,3vw,42px)!important;
  line-height:1.16!important;
  font-weight:800!important;
  letter-spacing:-.025em!important;
}

.ccs-intro-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-self:stretch!important;
  text-align:left!important;
}

.ccs-intro-copy,
.ccs-intro-copy p,
.ccs-intro-card > p.ccs-intro-copy{
  color:var(--muted,#5f6d65)!important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif!important;
  font-size:17px!important;
  line-height:1.6!important;
  font-weight:400!important;
  letter-spacing:normal!important;
}

.ccs-intro-copy strong{
  color:var(--ink,#20352a)!important;
  font-weight:750!important;
}

@media(max-width:760px){
  .ccs-intro-heading .section-kicker,
  .ccs-intro-heading .hero-kicker,
  .ccs-intro-heading [class*="kicker"],
  .ccs-intro-heading [class*="eyebrow"]{
    font-size:12px!important;
  }

  .ccs-intro-card h2{
    font-size:clamp(28px,8vw,36px)!important;
  }

  .ccs-intro-copy,
  .ccs-intro-copy p,
  .ccs-intro-card > p.ccs-intro-copy{
    font-size:16px!important;
  }
}


/* Móvil · más aire cuando el hero incluye botones/acciones */
@media(max-width:760px){
  .hero-actions,
  .tools-hero-actions,
  .drill-hero-actions,
  .home-hero-actions,
  .vacuum-hero-actions,
  .dehum-hero-actions{
    margin-bottom:18px!important;
  }
}