:root{
  --kob-green:#71ad3d;
  --kob-bg:#0d0f0d;
  --kob-text:#f1eee8;
  --dust1:154,126,91;
  --dust2:166,136,98;
  --dust3:137,111,82;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#0b0d0b;
  color:var(--kob-text);
  font-family:"Manrope",Arial,sans-serif;
}

/* =========================================================
   HERO · KOBLENZ
========================================================= */
.kob-hero{
  position:relative;
  width:100%;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  isolation:isolate;

  background:
    radial-gradient(circle at 72% 44%,rgba(21,155,27,.025),transparent 31%),
    radial-gradient(circle at 22% 52%,rgba(255,255,255,.018),transparent 34%),
    linear-gradient(135deg,#151715 0%,#101210 52%,#0a0c0a 100%);
}

/* =========================================================
   NAVBAR FLOTANTE
========================================================= */
.koblenz-navbar{
  position:absolute;
  top:18px;
  left:50%;
  z-index:30;
  width:min(1080px,calc(100% - 80px));
  transform:translateX(-50%);
}

.koblenz-nav-inner{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
  padding:8px 10px 8px 30px;

  background:rgba(244,242,237,.96);
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;

  box-shadow:0 8px 22px rgba(0,0,0,.065);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.koblenz-nav-menu{
  display:flex;
  align-items:center;
  gap:42px;
  margin-right:auto;
  margin-left:auto;
}

.koblenz-nav-menu a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:48px;

  color:#242424;

  font-family:"Manrope",Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;

  text-decoration:none;

  transition:color .25s ease,opacity .25s ease;
}

.koblenz-nav-menu a:hover{color:var(--kob-green)}

.koblenz-nav-menu a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:0;
  height:1.5px;
  background:var(--kob-green);
  transform:translateX(-50%);
  transition:width .28s ease;
}

.koblenz-nav-menu a:hover::after,
.koblenz-nav-menu a.active::after{width:100%}

.koblenz-nav-cta{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 28px;

  border-radius:999px;
  color:#fff;

  background:linear-gradient(180deg,#23ae29 0%,#159b1b 55%,#0b8111 100%);
  border:1px solid rgba(255,255,255,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 13px rgba(0,0,0,.11);

  font-family:"Manrope",Arial,sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;

  text-decoration:none;
  white-space:nowrap;

  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.koblenz-nav-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 9px 18px rgba(0,0,0,.13);
}

.koblenz-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:var(--kob-green);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.koblenz-menu-toggle span{
  display:block;
  width:17px;
  height:1px;
  background:#fff;
}

/* =========================================================
   SUPERFICIE CENTRAL LIMPIA
========================================================= */
.kob-hero-clean{
  position:absolute;
  z-index:2;
  left:0;
  top:23%;
  width:73%;
  height:61%;
  pointer-events:none;

  background:
    radial-gradient(ellipse at 38% 44%,rgba(255,255,255,.055) 0%,rgba(255,255,255,.022) 28%,rgba(255,255,255,.006) 50%,transparent 68%),
    radial-gradient(ellipse at 70% 50%,rgba(113,173,61,.026) 0%,rgba(113,173,61,.008) 28%,transparent 52%),
    linear-gradient(105deg,#131613 0%,#0e110e 48%,#090c09 100%);

  box-shadow:
    inset 0 30px 42px -34px rgba(0,0,0,.90),
    inset 0 -28px 40px -30px rgba(0,0,0,.92),
    inset -52px 0 68px -38px rgba(0,0,0,.96),
    0 -10px 22px -16px rgba(0,0,0,.90),
    0 12px 24px -17px rgba(0,0,0,.90),
    0 0 46px rgba(0,0,0,.24);
}

.kob-hero-clean::before,
.kob-hero-clean::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:6px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.018) 7%,
      rgba(255,255,255,.065) 28%,
      rgba(255,255,255,.105) 48%,
      rgba(255,255,255,.065) 68%,
      rgba(255,255,255,.018) 91%,
      transparent 100%
    );

  opacity:.95;
  pointer-events:none;
}

.kob-hero-clean::before{
  top:0;
  box-shadow:
    0 2px 5px rgba(255,255,255,.025),
    0 6px 13px rgba(0,0,0,.60);
}

.kob-hero-clean::after{
  bottom:0;
  box-shadow:
    0 -2px 5px rgba(255,255,255,.025),
    0 -6px 13px rgba(0,0,0,.60);
}

/* =========================================================
   POLVO · TRATAMIENTO GENERAL
========================================================= */
.kob-dust-particles,
.kob-dust-particles-side{
  position:absolute;
  z-index:3;
  pointer-events:none;

  filter:
    saturate(.58)
    brightness(.74)
    contrast(.94);

  opacity:.84;
  mix-blend-mode:normal;
}

/* =========================================================
   POLVO SUPERIOR / INFERIOR
========================================================= */
.kob-dust-particles{
  left:0;
  width:100%;
  height:220px;

  background:
    radial-gradient(ellipse at 9% 72%,rgba(var(--dust1),.22) 0%,rgba(var(--dust1),.11) 20%,rgba(var(--dust1),.04) 40%,transparent 60%),
    radial-gradient(ellipse at 28% 48%,rgba(var(--dust2),.19) 0%,rgba(var(--dust2),.10) 20%,rgba(var(--dust2),.04) 40%,transparent 60%),
    radial-gradient(ellipse at 48% 70%,rgba(var(--dust3),.20) 0%,rgba(var(--dust3),.10) 18%,rgba(var(--dust3),.04) 38%,transparent 58%),
    radial-gradient(ellipse at 68% 44%,rgba(175,144,102,.18) 0%,rgba(175,144,102,.09) 20%,rgba(175,144,102,.04) 40%,transparent 60%),
    radial-gradient(ellipse at 88% 67%,rgba(150,121,88,.17) 0%,rgba(150,121,88,.08) 20%,rgba(150,121,88,.035) 40%,transparent 60%),

    radial-gradient(circle at 3% 82%,rgba(187,156,111,.60) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 7% 63%,rgba(130,107,81,.48) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 11% 90%,rgba(194,162,116,.54) 0 .7px,transparent 1.4px),
    radial-gradient(circle at 15% 51%,rgba(143,117,86,.47) 0 1px,transparent 1.7px),
    radial-gradient(circle at 20% 78%,rgba(180,148,105,.52) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 25% 59%,rgba(121,100,76,.43) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 30% 87%,rgba(190,158,112,.50) 0 .75px,transparent 1.45px),
    radial-gradient(circle at 35% 55%,rgba(138,112,84,.46) 0 1px,transparent 1.7px),
    radial-gradient(circle at 40% 80%,rgba(181,148,104,.50) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 45% 60%,rgba(125,103,78,.43) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 50% 89%,rgba(195,161,113,.48) 0 .75px,transparent 1.45px),
    radial-gradient(circle at 55% 57%,rgba(137,111,83,.45) 0 1px,transparent 1.7px),
    radial-gradient(circle at 60% 82%,rgba(178,145,102,.50) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 65% 61%,rgba(128,105,80,.44) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 70% 88%,rgba(186,153,108,.48) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 75% 58%,rgba(136,110,83,.44) 0 1px,transparent 1.7px),
    radial-gradient(circle at 80% 81%,rgba(189,156,110,.48) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 85% 60%,rgba(124,102,77,.42) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 90% 86%,rgba(180,148,105,.46) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 95% 58%,rgba(133,108,80,.42) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 98% 78%,rgba(187,154,108,.45) 0 .8px,transparent 1.5px);

  background-repeat:no-repeat;
}

.kob-dust-particles-top{
  top:calc(23% - 220px);

  -webkit-mask-image:
    linear-gradient(to bottom,rgba(0,0,0,.04) 0%,rgba(0,0,0,.10) 10%,rgba(0,0,0,.22) 24%,rgba(0,0,0,.40) 40%,rgba(0,0,0,.60) 57%,rgba(0,0,0,.78) 73%,rgba(0,0,0,.92) 87%,#000 100%);

  mask-image:
    linear-gradient(to bottom,rgba(0,0,0,.04) 0%,rgba(0,0,0,.10) 10%,rgba(0,0,0,.22) 24%,rgba(0,0,0,.40) 40%,rgba(0,0,0,.60) 57%,rgba(0,0,0,.78) 73%,rgba(0,0,0,.92) 87%,#000 100%);
}

.kob-dust-particles-bottom{
  top:84%;

  -webkit-mask-image:
    linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 13%,rgba(0,0,0,.78) 27%,rgba(0,0,0,.60) 43%,rgba(0,0,0,.40) 60%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.10) 90%,rgba(0,0,0,.04) 100%);

  mask-image:
    linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 13%,rgba(0,0,0,.78) 27%,rgba(0,0,0,.60) 43%,rgba(0,0,0,.40) 60%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.10) 90%,rgba(0,0,0,.04) 100%);
}

.kob-dust-particles::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:54px;

  background:
    radial-gradient(ellipse at 5% 72%,rgba(186,154,109,.42) 0 2px,transparent 6px),
    radial-gradient(ellipse at 14% 46%,rgba(133,108,82,.35) 0 1.7px,transparent 5px),
    radial-gradient(ellipse at 23% 76%,rgba(191,158,111,.40) 0 2.3px,transparent 6px),
    radial-gradient(ellipse at 33% 42%,rgba(123,101,77,.32) 0 1.8px,transparent 5px),
    radial-gradient(ellipse at 44% 74%,rgba(180,147,104,.40) 0 2.2px,transparent 6px),
    radial-gradient(ellipse at 56% 44%,rgba(129,105,80,.32) 0 1.8px,transparent 5px),
    radial-gradient(ellipse at 67% 76%,rgba(188,155,109,.40) 0 2.3px,transparent 6px),
    radial-gradient(ellipse at 78% 43%,rgba(124,102,77,.33) 0 1.8px,transparent 5px),
    radial-gradient(ellipse at 89% 72%,rgba(181,148,105,.40) 0 2.2px,transparent 6px),
    radial-gradient(ellipse at 97% 48%,rgba(127,104,79,.31) 0 1.8px,transparent 5px);

  opacity:.52;
  filter:saturate(.55) brightness(.72);
}

.kob-dust-particles-top::before{bottom:-14px}
.kob-dust-particles-bottom::before{top:-6px}

/* =========================================================
   POLVO LATERAL
========================================================= */
.kob-dust-particles-side{
  left:57%;
  top:-4%;
  width:48%;
  height:108%;

  background:
    radial-gradient(ellipse at 24% 8%,rgba(var(--dust1),.20) 0%,rgba(var(--dust1),.10) 22%,rgba(var(--dust1),.035) 43%,transparent 68%),
    radial-gradient(ellipse at 70% 12%,rgba(var(--dust2),.17) 0%,rgba(var(--dust2),.08) 24%,rgba(var(--dust2),.03) 45%,transparent 68%),
    radial-gradient(ellipse at 28% 90%,rgba(var(--dust3),.18) 0%,rgba(var(--dust3),.09) 22%,rgba(var(--dust3),.035) 43%,transparent 68%),
    radial-gradient(ellipse at 76% 88%,rgba(175,144,102,.16) 0%,rgba(175,144,102,.08) 22%,rgba(175,144,102,.03) 44%,transparent 68%),
    radial-gradient(ellipse at 42% 48%,rgba(var(--dust1),.08) 0%,rgba(var(--dust1),.035) 30%,transparent 68%),

    radial-gradient(circle at 16% 9%,rgba(181,149,106,.45) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 31% 18%,rgba(125,103,78,.38) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 47% 28%,rgba(190,156,110,.41) 0 .7px,transparent 1.4px),
    radial-gradient(circle at 24% 41%,rgba(135,110,82,.36) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 58% 50%,rgba(179,146,103,.38) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 35% 62%,rgba(126,103,78,.34) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 66% 73%,rgba(183,150,106,.38) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 42% 84%,rgba(131,107,81,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle at 80% 92%,rgba(175,143,102,.38) 0 .8px,transparent 1.5px);

  -webkit-mask-image:
    radial-gradient(ellipse at 58% 50%,rgba(0,0,0,.98) 0%,rgba(0,0,0,.94) 30%,rgba(0,0,0,.82) 50%,rgba(0,0,0,.60) 68%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.12) 93%,transparent 100%);

  mask-image:
    radial-gradient(ellipse at 58% 50%,rgba(0,0,0,.98) 0%,rgba(0,0,0,.94) 30%,rgba(0,0,0,.82) 50%,rgba(0,0,0,.60) 68%,rgba(0,0,0,.34) 82%,rgba(0,0,0,.12) 93%,transparent 100%);

  opacity:.76;
}

/* =========================================================
   MOPA
========================================================= */
.kob-hero-mop{
  position:absolute;
  z-index:5;
  left:88%;
  top:52%;
  width:clamp(720px,53vw,960px);
  pointer-events:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 34px 45px rgba(0,0,0,.58));
}

.kob-hero-mop img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* =========================================================
   CONTENIDO
========================================================= */
.kob-hero-content{
  position:absolute;
  z-index:6;
  left:clamp(245px,17vw,300px);
  top:34%;
  width:min(920px,58%);
}

.kob-hero-title{
  max-width:900px;
  margin:0;

  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(70px,6.3vw,106px);
  line-height:.80;
  font-weight:600;
  letter-spacing:-.055em;

  color:var(--kob-text);
}

.kob-hero-title span{
  display:block;
  color:var(--kob-green);
}

.kob-hero-description{
  max-width:570px;
  margin:30px 0 0;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  color:rgba(241,238,232,.68);
}

.kob-hero-brand-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:2px;

  margin-top:clamp(35px,3vw,46px);

  transform:translate(-45px,-35px);
}

.kob-hero-brand{
  width:clamp(175px,12.8vw,220px);
  flex:0 0 auto;
}

.kob-hero-brand img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.kob-hero-kicker{
  display:block;
  max-width:420px;
  margin:0;
  transform:translateX(-12px);

  font-size:clamp(14px,1.12vw,18px);
  font-weight:800;
  line-height:1.45;
  letter-spacing:.20em;

  color:var(--kob-green);
  text-transform:uppercase;
}

/* =========================================================
   TABLET
========================================================= */
@media(max-width:1050px){

  .koblenz-navbar{
    width:min(920px,calc(100% - 40px));
  }

  .koblenz-nav-menu{gap:24px}

  .kob-hero-content{
    left:clamp(70px,8vw,110px);
    width:62%;
  }

  .kob-hero-title{
    font-size:clamp(55px,7vw,80px);
  }

  .kob-hero-mop{
    left:89%;
    width:clamp(520px,58vw,700px);
  }

  .kob-hero-brand{
    width:clamp(145px,15vw,185px);
  }

  .kob-hero-kicker{
    max-width:300px;
    font-size:clamp(11px,1.3vw,14px);
    letter-spacing:.18em;
  }
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:768px){

  .kob-hero{
    min-height:920px;
    height:auto;
  }

  .koblenz-navbar{
    top:14px;
    width:calc(100% - 28px);
  }

  .koblenz-nav-inner{
    min-height:58px;
    padding:7px 8px 7px 18px;
    gap:10px;
  }

  .koblenz-nav-menu{display:none}

  .koblenz-nav-cta{
    margin-left:auto;
    min-height:44px;
    padding:0 18px;
    font-size:9px;
  }

  .koblenz-menu-toggle{display:flex}

  .kob-hero-clean{
    top:20%;
    width:100%;
    height:60%;
  }

  .kob-dust-particles-top{
    top:calc(20% - 190px);
    height:190px;
  }

  .kob-dust-particles-bottom{
    top:80%;
    height:190px;
  }

  .kob-dust-particles-side{
    left:50%;
    top:5%;
    width:55%;
    height:90%;
  }

  .kob-hero-content{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    padding:0 24px;
    margin-top:240px;
  }

  .kob-hero-title{
    max-width:560px;
    font-size:clamp(48px,12.7vw,66px);
    line-height:.82;
  }

  .kob-hero-description{
    max-width:370px;
    margin-top:22px;
    font-size:13.5px;
  }

  .kob-hero-brand-row{
    margin-top:40px;
    transform:none;
  }

  .kob-hero-brand{width:140px}

  .kob-hero-kicker{
    max-width:240px;
    transform:translateX(-8px);
    font-size:10px;
    line-height:1.55;
    letter-spacing:.17em;
  }

  .kob-hero-mop{
    left:auto;
    right:-225px;
    top:57%;
    width:clamp(400px,94vw,500px);
    transform:translateY(-50%);
  }
}

@media(max-width:480px){

  .koblenz-nav-cta{
    padding:0 13px;
    font-size:8px;
    letter-spacing:.04em;
  }

  .kob-hero{
    min-height:880px;
  }

  .kob-hero-content{
    margin-top:220px;
    padding:0 18px;
  }

  .kob-hero-title{
    font-size:clamp(43px,12.2vw,57px);
  }

  .kob-hero-description{
    max-width:315px;
    font-size:12.5px;
  }

  .kob-hero-brand{width:125px}

  .kob-hero-kicker{
    max-width:205px;
    font-size:9px;
    letter-spacing:.16em;
  }

  .kob-hero-mop{
    right:-215px;
    width:clamp(350px,94vw,440px);
  }
}


/* =========================================================
   HERO · AJUSTES DE COMPOSICIÓN
   TÍTULO MÁS PEQUEÑO + CONTENIDO ARRIBA + POLVO A LA DERECHA
========================================================= */

@media (min-width:1051px){

  /* =======================================================
     CONTENIDO PRINCIPAL · SUBIR TODO EL BLOQUE
  ======================================================= */

  .kob-hero-content{
    top:31% !important;
  }


  /* =======================================================
     TÍTULO · REDUCCIÓN SUAVE
  ======================================================= */

  .kob-hero-title{
    font-size:clamp(
      66px,
      5.8vw,
      98px
    ) !important;
  }


  /* =======================================================
     POLVO DERECHO · COMIENZA MÁS A LA DERECHA
  ======================================================= */

  .kob-dust-particles-side{
    left:64% !important;
    width:41% !important;
  }

}
/* =========================================================
   HERO · AJUSTE FINO FINAL
   CONTENIDO MÁS ARRIBA + LÍNEAS MÁS GRUESAS
========================================================= */

@media (min-width:1051px){

  /* =======================================================
     SUBIR TÍTULO + TEXTO + LOGO COMO UN SOLO BLOQUE
  ======================================================= */

  .kob-hero-content{
    top:28.5% !important;
  }

/* =======================================================
   LÍNEA SUPERIOR E INFERIOR
   UN POCO MÁS NOTORIAS
======================================================= */

.kob-hero-clean::before,
.kob-hero-clean::after{
  height:9px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,

      rgba(255,255,255,.016) 5%,
      rgba(255,255,255,.055) 20%,
      rgba(255,255,255,.115) 42%,
      rgba(255,255,255,.140) 52%,
      rgba(255,255,255,.092) 68%,
      rgba(255,255,255,.038) 87%,

      transparent 100%
    ) !important;
}


/* =======================================================
   LÍNEA SUPERIOR
======================================================= */

.kob-hero-clean::before{
  top:0 !important;

  box-shadow:
    0 2px 6px rgba(255,255,255,.035),
    0 5px 12px rgba(0,0,0,.62) !important;
}


/* =======================================================
   LÍNEA INFERIOR
======================================================= */

.kob-hero-clean::after{
  bottom:0 !important;

  box-shadow:
    0 -2px 6px rgba(255,255,255,.035),
    0 -5px 12px rgba(0,0,0,.62) !important;
}


/* =========================================================
   KOBLENZ · AJUSTE FINO DE POLVOS
   SUPERIOR UN POCO MENOR
   INFERIOR UN POCO MAYOR
========================================================= */

/* =========================================================
   KOBLENZ · AJUSTE FINO DE POLVOS
   SOLO AUMENTAMOS EL INFERIOR
========================================================= */

@media (min-width:769px){

  /* POLVO SUPERIOR · SIN CAMBIOS */
  .kob-dust-particles-top{
    top:calc(23% - 203px) !important;
    height:211px !important;
  }


  /* POLVO INFERIOR · UN POCO MÁS GRANDE */
  .kob-dust-particles-bottom{
    top:calc(84% - 22px) !important;
    height:264px !important;
  }

} }

/* =========================================================
   KOBLENZ · FUSIÓN POLVO + BORDES DE LIMPIEZA
   ELIMINA EL ESPACIO VISUAL ENTRE POLVO Y LÍNEA

   DEJAR AL FINAL ABSOLUTO DEL CSS
========================================================= */

@media (min-width:769px){

  /* =======================================================
     1. ZONA LIMPIA
     Quitamos las sombras EXTERIORES superior/inferior
     que estaban creando una separación oscura.
  ======================================================== */

  .kob-hero-clean{
    box-shadow:

      /* profundidad interior superior */
      inset 0 30px 42px -34px rgba(0,0,0,.90),

      /* profundidad interior inferior */
      inset 0 -28px 40px -30px rgba(0,0,0,.92),

      /* profundidad lateral derecha */
      inset -52px 0 68px -38px rgba(0,0,0,.96),

      /* profundidad general */
      0 0 46px rgba(0,0,0,.24)

      !important;
  }


  /* =======================================================
     2. LÍNEAS
     Sin margen ni padding.
     Las hacemos invadir 2px hacia el polvo.
  ======================================================== */

  .kob-hero-clean::before,
  .kob-hero-clean::after{
    margin:0 !important;
    padding:0 !important;

    left:0 !important;
    width:100% !important;

    height:9px !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.016) 5%,
        rgba(255,255,255,.055) 20%,
        rgba(255,255,255,.115) 42%,
        rgba(255,255,255,.140) 52%,
        rgba(255,255,255,.092) 68%,
        rgba(255,255,255,.038) 87%,
        transparent 100%
      ) !important;
  }


  /* =======================================================
     3. LÍNEA SUPERIOR

     -2px hace que salga ligeramente de la zona limpia
     y entre físicamente en el polvo superior.
  ======================================================== */

  .kob-hero-clean::before{
    top:-2px !important;

    box-shadow:
      0 -2px 5px rgba(255,255,255,.020),
      0  2px 7px rgba(0,0,0,.32)

      !important;
  }


  /* =======================================================
     4. LÍNEA INFERIOR

     Lo mismo, pero hacia el polvo inferior.
  ======================================================== */

  .kob-hero-clean::after{
    bottom:-2px !important;

    box-shadow:
      0  2px 5px rgba(255,255,255,.020),
      0 -2px 7px rgba(0,0,0,.32)

      !important;
  }


  /* =======================================================
     5. POLVOS
     CONSERVAMOS EXACTAMENTE TUS MEDIDAS ACTUALES
  ======================================================== */

  .kob-dust-particles-top{
    top:calc(23% - 203px) !important;
    height:211px !important;
  }

  .kob-dust-particles-bottom{
    top:calc(84% - 22px) !important;
    height:264px !important;
  }

}

/* =========================================================
   KOBLENZ · FUSIÓN SUPERIOR + LATERAL
   ELIMINA EL BORDE HORIZONTAL DEL POLVO SUPERIOR

   NO TOCA EL POLVO INFERIOR
========================================================= */

@media (min-width:769px){

  /* =======================================================
     POLVO SUPERIOR

     Lo extendemos hacia abajo,
     pero lo mandamos DETRÁS de la zona limpia.
  ======================================================== */

  .kob-dust-particles-top{
    top:calc(23% - 203px) !important;

    /*
      Antes: 204px
      Lo prolongamos para que no termine
      exactamente donde comienza el lateral visible.
    */
    height:245px !important;

    /*
      IMPORTANTE:
      zona limpia = z-index:2
      polvo superior = z-index:1

      Así la extensión queda oculta en la izquierda,
      pero sigue existiendo en la derecha.
    */
    z-index:1 !important;


    /* =====================================================
       BORDE INFERIOR DIFUMINADO

       En vez de terminar de golpe,
       desaparece gradualmente.
    ====================================================== */

    -webkit-mask-image:
      linear-gradient(
        to bottom,

        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.10) 9%,
        rgba(0,0,0,.22) 22%,
        rgba(0,0,0,.40) 37%,
        rgba(0,0,0,.60) 52%,
        rgba(0,0,0,.78) 66%,
        rgba(0,0,0,.92) 77%,
        #000 84%,

        rgba(0,0,0,.88) 89%,
        rgba(0,0,0,.65) 93%,
        rgba(0,0,0,.36) 97%,
        transparent 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,

        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.10) 9%,
        rgba(0,0,0,.22) 22%,
        rgba(0,0,0,.40) 37%,
        rgba(0,0,0,.60) 52%,
        rgba(0,0,0,.78) 66%,
        rgba(0,0,0,.92) 77%,
        #000 84%,

        rgba(0,0,0,.88) 89%,
        rgba(0,0,0,.65) 93%,
        rgba(0,0,0,.36) 97%,
        transparent 100%
      ) !important;
  }


  /* =======================================================
     ACUMULACIÓN DEL POLVO SUPERIOR

     Evitamos que su ::before genere otra raya.
  ======================================================== */

  .kob-dust-particles-top::before{
    bottom:22px !important;
    opacity:.38 !important;
  }


  /* =======================================================
     POLVO LATERAL

     Lo dejamos como está.
     Solo aseguramos que quede encima del superior.
  ======================================================== */

  .kob-dust-particles-side{
    z-index:3 !important;

    left:64% !important;
    width:41% !important;

    top:-4% !important;
    height:108% !important;

    opacity:.79 !important;
  }

}
/* =========================================================
   ZONA CLEAN · MÁS LIMPIA Y UNIFORME
   AJUSTE FINO
========================================================= */

.kob-hero-clean{

  background:

    /* Luz limpia ligeramente más presente */
    radial-gradient(
      ellipse at 36% 45%,
      rgba(255,255,255,.042) 0%,
      rgba(255,255,255,.019) 31%,
      rgba(255,255,255,.006) 48%,
      transparent 64%
    ),

    /* matiz verde limpio extremadamente sutil */
    radial-gradient(
      ellipse at 67% 48%,
      rgba(113,173,61,.020) 0%,
      rgba(113,173,61,.006) 28%,
      transparent 52%
    ),

    /* superficie limpia más homogénea */
    linear-gradient(
      105deg,
      #121712 0%,
      #0d120e 46%,
      #080d09 100%
    )

    !important;
}

/* =========================================================
   ABOUT · KOBLENZ
   VERSIÓN FINAL · EDITORIAL CLEAN
========================================================= */


/* =========================================================
   SECCIÓN
========================================================= */

.about-section{
  position:relative;
  width:100%;
  min-height:100vh;

  padding:64px 0 68px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  overflow:hidden;
  isolation:isolate;

  color:#1b1e1b;

  background:
    radial-gradient(
      ellipse at 78% 22%,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.38) 30%,
      transparent 61%
    ),

    radial-gradient(
      ellipse at 15% 77%,
      rgba(113,173,61,.035) 0%,
      transparent 46%
    ),

    linear-gradient(
      135deg,
      #f5f3ee 0%,
      #efede7 48%,
      #e9e7e1 100%
    );
}


/* transición suave desde el hero */

.about-section::before{
  content:"";

  position:absolute;
  z-index:0;

  left:0;
  right:0;
  top:0;

  height:95px;

  background:
    linear-gradient(
      to bottom,
      rgba(7,10,8,.09),
      rgba(7,10,8,.025) 38%,
      transparent 100%
    );

  pointer-events:none;
}


/* luz ambiental */

.about-section::after{
  content:"";

  position:absolute;
  z-index:0;

  width:680px;
  height:680px;

  right:-250px;
  top:50px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.72),
      rgba(255,255,255,.18) 42%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   TOPLINE
========================================================= */

.about-topline{
  position:relative;
  z-index:5;

  width:calc(100% - 110px);
  max-width:1450px;

  margin:0 auto 34px;

  display:flex;
  align-items:center;
  gap:20px;

  font-family:"Manrope",Arial,sans-serif;

  font-size:9px;
  font-weight:800;

  letter-spacing:.28em;
  text-transform:uppercase;

  color:rgba(27,30,27,.48);
}


.about-topline-line{
  flex:1;
  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(25,28,25,.08),
      rgba(25,28,25,.24),
      rgba(25,28,25,.08)
    );
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.about-container{
  position:relative;
  z-index:3;

  width:100%;
  margin:0;

  display:grid;

  grid-template-columns:
    minmax(0,53%)
    minmax(0,47%);

  align-items:center;

  gap:0;
}


/* =========================================================
   VISUAL
========================================================= */

.about-visual{
  position:relative;

  width:100%;
  height:min(69vh,630px);

  overflow:hidden;

  border-radius:
    0
    165px
    62px
    0;

  background:#cbc5bb;

  box-shadow:
    24px 30px 65px rgba(13,15,13,.12),
    inset 0 1px 0 rgba(255,255,255,.45);
}


/* borde verde lateral */

.about-visual::before{
  content:"";

  position:absolute;
  z-index:7;

  left:0;
  bottom:0;

  width:7px;
  height:38%;

  border-radius:0 7px 7px 0;

  background:
    linear-gradient(
      180deg,
      #71ad3d,
      #159b1b,
      #087b10
    );

  pointer-events:none;
}


/* overlay fotografía */

.about-visual::after{
  content:"";

  position:absolute;
  z-index:3;

  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      rgba(8,11,8,.04),
      transparent 46%
    ),

    linear-gradient(
      180deg,
      transparent 34%,
      rgba(8,11,8,.05) 62%,
      rgba(7,9,7,.44) 100%
    );

  pointer-events:none;
}


/* =========================================================
   SLIDER
========================================================= */

.about-slider{
  position:absolute;
  inset:0;

  overflow:hidden;

  border-radius:inherit;
}


/* =========================================================
   SLIDES
========================================================= */

.about-slide{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  opacity:0;

  transform:
    translateX(-10%)
    scale(1.035);

  transition:
    opacity .75s ease,
    transform 1.05s cubic-bezier(.22,.7,.2,1);

  pointer-events:none;
}


.about-slide.active{
  opacity:1;

  transform:
    translateX(0)
    scale(1);

  pointer-events:auto;
}


.about-slide img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  filter:
    saturate(.84)
    contrast(1.035)
    brightness(.97);
}


/* =========================================================
   +50 AÑOS
========================================================= */

.about-year{
  position:absolute;

  z-index:6;

  left:clamp(46px,4.6vw,76px);
  bottom:clamp(38px,4.7vh,56px);

  display:flex;
  align-items:flex-end;

  gap:9px;

  color:#fff;

  text-shadow:
    0 6px 22px rgba(0,0,0,.34);

  pointer-events:none;
}


.about-year-plus{
  display:block;

  margin-bottom:clamp(9px,1vw,14px);

  font-family:"Manrope",Arial,sans-serif;

  font-size:clamp(36px,3vw,50px);
  font-weight:600;

  line-height:.8;

  color:#71ad3d;
}


.about-year-number{
  display:block;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:clamp(112px,9vw,156px);

  font-weight:600;

  line-height:.64;

  letter-spacing:-.065em;

  color:#f5f3ee;
}


.about-year-label{
  display:block;

  margin-bottom:clamp(10px,1vw,15px);

  font-family:"Manrope",Arial,sans-serif;

  font-size:clamp(13px,1.1vw,18px);

  font-weight:800;

  line-height:1;

  letter-spacing:.17em;

  color:#f5f3ee;

  text-transform:uppercase;
}


/* =========================================================
   TEXTO VERTICAL
========================================================= */

.about-vertical-text{
  position:absolute;

  z-index:6;

  right:27px;
  top:50%;

  writing-mode:vertical-rl;

  transform:translateY(-50%);

  font-family:"Manrope",Arial,sans-serif;

  font-size:8px;
  font-weight:700;

  letter-spacing:.30em;

  text-transform:uppercase;

  color:rgba(255,255,255,.76);
}


/* =========================================================
   CONTROLES SLIDER
========================================================= */

.about-slider-nav{
  position:absolute;

  z-index:7;

  right:34px;
  bottom:31px;

  display:flex;
  align-items:center;

  gap:10px;
}


.about-slider-nav button{
  border:0;
  cursor:pointer;
}


.about-prev,
.about-next{
  width:43px;
  height:43px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border-radius:50%;

  background:rgba(245,243,238,.95);

  color:#202320;

  font-size:15px;

  box-shadow:
    0 7px 20px rgba(0,0,0,.12);

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}


.about-prev:hover,
.about-next:hover{
  transform:translateY(-2px);

  background:#159b1b;

  color:#fff;
}


/* =========================================================
   DOTS
========================================================= */

.about-dots{
  display:flex;
  align-items:center;

  gap:6px;
}


.about-dot{
  width:6px;
  height:6px;

  padding:0;

  border-radius:50%;

  background:rgba(255,255,255,.48);

  transition:
    width .3s ease,
    border-radius .3s ease,
    background .3s ease;
}


.about-dot.active{
  width:25px;

  border-radius:10px;

  background:#71ad3d;
}


/* =========================================================
   CONTENIDO DERECHO
========================================================= */

.about-content{
  position:relative;

  width:100%;
  max-width:760px;

  padding:
    0
    clamp(54px,5.6vw,94px)
    0
    clamp(58px,5vw,88px);
}


/* =========================================================
   KICKER
========================================================= */

.about-kicker{
  display:inline-block;

  margin-bottom:16px;

  font-family:"Manrope",Arial,sans-serif;

  font-size:9px;
  font-weight:800;

  letter-spacing:.33em;

  color:#159b1b;

  text-transform:uppercase;
}


/* =========================================================
   TÍTULO
========================================================= */

.about-title{
  max-width:650px;

  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(52px,4.15vw,72px);

  line-height:.89;

  font-weight:600;

  letter-spacing:-.047em;

  color:#181b19;
}


.about-title span{
  display:block;

  color:#696d69;

  font-weight:500;
}


/* =========================================================
   DIVISOR
========================================================= */

.about-divider{
  display:flex;
  align-items:center;

  gap:11px;

  margin:25px 0 22px;
}


.about-divider::before{
  content:"";

  width:96px;
  height:1px;

  background:
    linear-gradient(
      to right,
      rgba(24,27,24,.30),
      rgba(24,27,24,.08)
    );
}


.about-divider span{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#71ad3d;

  box-shadow:
    0 0 0 4px rgba(113,173,61,.07);
}


/* =========================================================
   COPY
========================================================= */

.about-copy{
  max-width:625px;

  font-family:"Manrope",Arial,sans-serif;

  font-size:
    clamp(13px,.96vw,14.5px);

  line-height:1.70;

  color:#454945;
}


.about-copy p{
  margin:0 0 12px;
}


.about-copy p:last-child{
  margin-bottom:0;
}


.about-copy strong{
  color:#181b19;

  font-weight:800;
}


/* =========================================================
   FIRMA
========================================================= */

.about-signature{
  position:relative;

  margin-top:21px;

  padding-left:18px;

  display:flex;
  flex-direction:column;

  gap:2px;
}


.about-signature::before{
  content:"";

  position:absolute;

  left:0;
  top:1px;
  bottom:1px;

  width:3px;

  border-radius:3px;

  background:
    linear-gradient(
      180deg,
      #71ad3d,
      #159b1b,
      #087b10
    );
}


.about-signature-label{
  margin-bottom:3px;

  font-family:"Manrope",Arial,sans-serif;

  font-size:8px;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:#858985;
}


.about-signature strong{
  font-family:"Manrope",Arial,sans-serif;

  font-size:14px;
  font-weight:800;

  color:#1d201e;
}


.about-signature small{
  font-family:"Manrope",Arial,sans-serif;

  font-size:9px;

  letter-spacing:.10em;

  text-transform:uppercase;

  color:#727672;
}


/* =========================================================
   BOTÓN
========================================================= */

.about-button{
  width:max-content;

  min-height:52px;

  margin-top:25px;

  padding:
    0 7px
    0 24px;

  display:inline-flex;
  align-items:center;

  gap:18px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #23ae29 0%,
      #159b1b 56%,
      #087b10 100%
    );

  color:#fff;

  text-decoration:none;

  font-family:"Manrope",Arial,sans-serif;

  font-size:9px;
  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;

  border:
    1px solid rgba(255,255,255,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 23px rgba(8,123,16,.18);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}


.about-button:hover{
  transform:translateY(-2px);

  filter:brightness(1.04);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 13px 27px rgba(8,123,16,.23);
}


.about-button-icon{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f5f3ee;

  color:#159b1b;

  font-size:15px;
  font-weight:700;
}


/* =========================================================
   PUNTOS DECORATIVOS
========================================================= */

.about-corner-dots{
  position:absolute;

  z-index:1;

  right:28px;
  bottom:25px;

  display:grid;

  grid-template-columns:
    repeat(4,3px);

  gap:7px;
}


.about-corner-dots span{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#71ad3d;

  opacity:.30;
}


/* =========================================================
   TABLET / LAPTOP PEQUEÑA
========================================================= */

@media(max-width:1100px) and (min-width:769px){

  .about-section{
    padding:48px 0 50px;
  }


  .about-topline{
    width:calc(100% - 60px);

    margin-bottom:24px;
  }


  .about-container{
    grid-template-columns:
      50% 50%;
  }


  .about-visual{
    height:min(64vh,560px);

    border-radius:
      0
      125px
      48px
      0;
  }


  .about-content{
    padding:
      0 35px
      0 44px;
  }


  .about-title{
    font-size:
      clamp(44px,4.8vw,60px);
  }


  .about-copy{
    font-size:12.5px;

    line-height:1.62;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .about-section{
    min-height:auto;

    padding:
      58px 0
      66px;

    display:block;
  }


  .about-section::before{
    height:65px;
  }


  .about-topline{
    width:calc(100% - 36px);

    margin:
      0 auto
      28px;

    gap:12px;

    font-size:7px;
  }


  .about-container{
    display:flex;

    flex-direction:column;

    gap:40px;
  }


  .about-visual{
    width:calc(100% - 18px);

    align-self:flex-start;

    height:
      clamp(360px,78vw,470px);

    border-radius:
      0
      90px
      36px
      0;
  }


  .about-year{
    left:30px;
    bottom:26px;

    gap:6px;
  }


  .about-year-plus{
    margin-bottom:8px;

    font-size:
      clamp(26px,7vw,36px);
  }


  .about-year-number{
    font-size:
      clamp(82px,23vw,110px);
  }


  .about-year-label{
    margin-bottom:8px;

    font-size:
      clamp(10px,2.8vw,13px);

    letter-spacing:.13em;
  }


  .about-slider-nav{
    right:20px;
    bottom:24px;

    gap:8px;
  }


  .about-prev,
  .about-next{
    width:38px;
    height:38px;
  }


  .about-vertical-text{
    display:none;
  }


  .about-content{
    width:100%;
    max-width:none;

    padding:
      0 22px;
  }


  .about-title{
    max-width:560px;

    font-size:
      clamp(43px,11vw,58px);

    line-height:.92;
  }


  .about-divider{
    margin:
      23px 0
      21px;
  }


  .about-copy{
    max-width:none;

    font-size:13px;

    line-height:1.65;
  }


  .about-button{
    min-height:50px;

    margin-top:24px;

    padding:
      0 7px
      0 20px;

    font-size:8px;
  }


  .about-button-icon{
    width:36px;
    height:36px;
  }


  .about-corner-dots{
    display:none;
  }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media(max-width:480px){

  .about-section{
    padding-top:48px;
  }


  .about-visual{
    width:calc(100% - 12px);

    height:360px;

    border-radius:
      0
      68px
      28px
      0;
  }


  .about-container{
    gap:34px;
  }


  .about-title{
    font-size:
      clamp(39px,10.8vw,49px);
  }


  .about-copy{
    font-size:12.5px;

    line-height:1.62;
  }


  .about-year{
    left:26px;
    bottom:24px;
  }


  .about-year-number{
    font-size:
      clamp(76px,24vw,98px);
  }

}

/* =========================================================
   KOBLENZ · ABOUT
   AJUSTE FINAL DE TIPOGRAFÍA + CTA CON PROFUNDIDAD
========================================================= */

@media (min-width:769px){

  /* =======================================================
     TOPLINE
  ======================================================= */

  .about-topline{
    font-size:10px !important;
  }


  /* =======================================================
     KICKER · NUESTRA HISTORIA
  ======================================================= */

  .about-kicker{
    font-size:10px !important;
  }


  /* =======================================================
     TÍTULO PRINCIPAL
  ======================================================= */

  .about-title{
    font-size:
      clamp(55px,4.35vw,76px) !important;

    line-height:.90 !important;
  }


  /* =======================================================
     PÁRRAFOS
  ======================================================= */

  .about-copy{
    font-size:
      clamp(14px,1.02vw,15.5px) !important;

    line-height:1.72 !important;
  }


  /* =======================================================
     FIRMA
  ======================================================= */

  .about-signature-label{
    font-size:9px !important;
  }

  .about-signature strong{
    font-size:15px !important;
  }

  .about-signature small{
    font-size:10px !important;
  }


  /* =======================================================
     +50 AÑOS
  ======================================================= */

  .about-year-plus{
    font-size:
      clamp(38px,3.1vw,52px) !important;
  }

  .about-year-number{
    font-size:
      clamp(118px,9.3vw,162px) !important;
  }

  .about-year-label{
    font-size:
      clamp(14px,1.15vw,19px) !important;
  }


  /* =======================================================
     TEXTO VERTICAL DE LA FOTO
  ======================================================= */

  .about-vertical-text{
    font-size:9px !important;
  }


  /* =======================================================
     BOTÓN · MÁS GRANDE + PROFUNDIDAD
  ======================================================= */

  .about-button{
    min-height:60px !important;

    padding:
      0 8px
      0 29px !important;

    gap:21px !important;

    font-size:10px !important;

    border:
      1px solid rgba(255,255,255,.22) !important;

    box-shadow:
      /* brillo superior */
      inset 0 1px 0 rgba(255,255,255,.30),

      /* pequeño borde oscuro inferior */
      inset 0 -2px 0 rgba(0,75,8,.20),

      /* sombra cercana */
      0 5px 8px rgba(5,70,10,.18),

      /* profundidad */
      0 13px 24px rgba(8,123,16,.24),

      /* sombra ambiental */
      0 22px 42px rgba(12,70,18,.13)

      !important;
  }


  /* CÍRCULO DE LA FLECHA */

  .about-button-icon{
    width:44px !important;
    height:44px !important;

    font-size:17px !important;

    box-shadow:
      0 2px 7px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.75)

      !important;
  }


  /* =======================================================
     HOVER
  ======================================================= */

  .about-button:hover{
    transform:
      translateY(-3px) !important;

    filter:
      brightness(1.045) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -2px 0 rgba(0,75,8,.18),

      0 7px 10px rgba(5,70,10,.18),
      0 17px 29px rgba(8,123,16,.27),
      0 27px 48px rgba(12,70,18,.15)

      !important;
  }

}


/* =========================================================
   SERVICIOS · KOBLENZ
   CLEAN DARK · VERSIÓN COMPLETA ACTUALIZADA
========================================================= */


/* =========================================================
   SECCIÓN
========================================================= */

.services-section{
  position:relative;

  width:100%;

  min-height:100vh;
  height:auto;

  padding:
    48px
    clamp(48px,5.2vw,86px)
    52px;

  display:flex;
  flex-direction:column;

  overflow:hidden;
  isolation:isolate;

  color:#f1eee8;

  /*
    MISMA ATMÓSFERA CLEAN DEL HERO
  */
  background:

    radial-gradient(
      ellipse at 32% 38%,
      rgba(255,255,255,.042) 0%,
      rgba(255,255,255,.019) 30%,
      rgba(255,255,255,.006) 49%,
      transparent 66%
    ),

    radial-gradient(
      ellipse at 76% 52%,
      rgba(113,173,61,.020) 0%,
      rgba(113,173,61,.006) 30%,
      transparent 54%
    ),

    linear-gradient(
      105deg,
      #121712 0%,
      #0d120e 47%,
      #080d09 100%
    );
}


/* =========================================================
   PROFUNDIDAD SUAVE
========================================================= */

.services-section::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  box-shadow:
    inset 0 30px 50px -42px rgba(255,255,255,.08),
    inset 0 -32px 52px -42px rgba(0,0,0,.82);
}


/* =========================================================
   LUZ AMBIENTAL DERECHA
========================================================= */

.services-section::after{
  content:"";

  position:absolute;

  z-index:0;

  right:-260px;
  top:12%;

  width:680px;
  height:680px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(113,173,61,.045) 0%,
      rgba(113,173,61,.015) 35%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   CAPAS
========================================================= */

.services-topline,
.services-heading,
.services-grid,
.services-footer{
  position:relative;

  z-index:3;
}


/* =========================================================
   DECORACIÓN VIEJA
========================================================= */

.services-background-word{
  display:none !important;
}


/* =========================================================
   TOPLINE
========================================================= */

.services-topline{
  flex:0 0 auto;

  display:flex;

  align-items:center;

  gap:18px;

  margin-bottom:22px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;

  font-weight:800;

  letter-spacing:.27em;

  text-transform:uppercase;

  color:
    rgba(241,238,232,.43);
}


.services-topline-line{
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(241,238,232,.05),
      rgba(241,238,232,.18),
      rgba(241,238,232,.05)
    );
}


/* =========================================================
   CABECERA
========================================================= */

.services-heading{
  flex:0 0 auto;

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(320px,.92fr);

  align-items:end;

  gap:64px;

  margin-bottom:38px;
}


/* =========================================================
   KICKER
========================================================= */

.services-kicker{
  grid-column:1 / -1;

  display:block;

  margin-bottom:-42px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;

  font-weight:800;

  letter-spacing:.31em;

  text-transform:uppercase;

  color:#71ad3d;
}


/* =========================================================
   TÍTULO PRINCIPAL
========================================================= */

.services-heading h2{
  max-width:720px;

  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(54px,5vw,79px);

  line-height:.80;

  font-weight:600;

  letter-spacing:-.052em;

  color:#f1eee8;
}


.services-heading h2 span{
  display:block;

  color:#71ad3d;
}


/* =========================================================
   DESCRIPCIÓN CABECERA
========================================================= */

.services-heading p{
  max-width:500px;

  margin:
    0 0 5px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(12px,.88vw,14.5px);

  line-height:1.65;

  color:
    rgba(241,238,232,.60);
}


/* =========================================================
   GRID · 2 X 2
========================================================= */

.services-grid{
  flex:none;

  min-height:0;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  grid-template-rows:
    auto auto;

  row-gap:42px;

  column-gap:54px;
}


/* =========================================================
   ITEM
========================================================= */

.service-item{
  position:relative;

  min-width:0;
  min-height:0;

  display:grid;

  grid-template-columns:
    minmax(215px,.90fr)
    minmax(0,1.10fr);

  align-items:center;

  gap:
    clamp(28px,2.5vw,44px);

  padding:
    20px 0;

  border-top:
    1px solid rgba(241,238,232,.055);

  transition:
    border-color .3s ease,
    transform .35s ease;
}


.service-item:hover{
  border-color:
    rgba(113,173,61,.27);

  transform:
    translateY(-2px);
}


/* =========================================================
   IMAGEN
========================================================= */

.service-image{
  position:relative;

  width:100%;

  height:auto;

  min-height:190px;

  max-height:none;

  aspect-ratio:
    1.42 / 1;

  overflow:hidden;

  isolation:isolate;

  clip-path:none !important;

  background:#151915;

  border:
    1px solid rgba(255,255,255,.055);

  box-shadow:
    0 16px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* =========================================================
   FORMAS DE LAS IMÁGENES
========================================================= */

.service-item-01 .service-image{
  border-radius:
    52px
    22px
    22px
    22px;
}


.service-item-02 .service-image{
  border-radius:
    22px
    52px
    22px
    22px;
}


.service-item-03 .service-image{
  border-radius:
    22px
    22px
    22px
    52px;
}


.service-item-04 .service-image{
  border-radius:
    22px
    22px
    52px
    22px;
}


/* =========================================================
   FOTO
========================================================= */

.service-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:none;

  filter:
    saturate(.76)
    contrast(1.04)
    brightness(.84);

  transition:
    transform .85s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}


.service-item:hover .service-image img{
  transform:
    scale(1.05);

  filter:
    saturate(.90)
    contrast(1.04)
    brightness(.92);
}


/* =========================================================
   OVERLAY
========================================================= */

.service-image::after{
  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      180deg,
      transparent 38%,
      rgba(6,9,7,.12) 62%,
      rgba(6,9,7,.62) 100%
    ),

    linear-gradient(
      90deg,
      rgba(4,7,5,.08),
      transparent 46%
    );

  pointer-events:none;
}


/* =========================================================
   NÚMERO
========================================================= */

.service-number{
  position:absolute;

  z-index:3;

  left:18px;
  bottom:14px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(36px,3vw,50px);

  font-weight:600;

  line-height:.8;

  color:#f1eee8;

  text-shadow:
    0 4px 16px rgba(0,0,0,.42);
}


/* =========================================================
   INFORMACIÓN
========================================================= */

.service-info{
  min-width:0;

  padding:0;
}


.service-info-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:15px;

  margin-bottom:14px;
}


/* =========================================================
   CATEGORÍA
========================================================= */

.service-category{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:8.5px;

  font-weight:800;

  letter-spacing:.21em;

  text-transform:uppercase;

  color:#71ad3d;
}


/* =========================================================
   FLECHA
========================================================= */

.service-arrow{
  width:38px;
  height:38px;

  flex:0 0 auto;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  border:
    1px solid rgba(241,238,232,.13);

  background:
    rgba(241,238,232,.035);

  color:#f1eee8;

  font-size:14px;

  text-decoration:none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}


.service-item:hover .service-arrow{
  background:
    linear-gradient(
      180deg,
      #23ae29,
      #159b1b 58%,
      #087b10
    );

  color:#fff;

  transform:
    translateY(-3px);

  box-shadow:
    0 8px 18px rgba(8,123,16,.24);
}


/* =========================================================
   TÍTULO DEL SERVICIO
========================================================= */

.service-info h3{
  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(32px,2.65vw,46px);

  line-height:.91;

  font-weight:600;

  letter-spacing:-.043em;

  color:#f1eee8;
}


.service-info h3 span{
  display:block;

  color:
    rgba(241,238,232,.48);
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.service-info p{
  max-width:440px;

  margin:
    16px 0 0;

  padding-top:14px;

  border-top:
    1px solid rgba(241,238,232,.09);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(10.5px,.80vw,13px);

  line-height:1.67;

  color:
    rgba(241,238,232,.56);
}


/* =========================================================
   CTA FINAL
========================================================= */

.services-footer{
  flex:0 0 auto;

  width:100%;

  margin-top:46px;

  padding-top:32px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:18px;

  text-align:center;

  border-top:
    1px solid rgba(241,238,232,.10);
}


/* =========================================================
   TEXTO CTA FINAL
========================================================= */

.services-footer > span{
  position:relative;

  max-width:none;

  padding:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(33px,2.8vw,40px);

  font-weight:600;

  line-height:1;

  letter-spacing:-.025em;

  color:
    rgba(241,238,232,.90);
}


/* =========================================================
   DETALLE VERDE CTA
========================================================= */

.services-footer > span::before{
  display:none;
}


.services-footer > span::after{
  content:"";

  display:block;

  width:34px;
  height:2px;

  margin:
    13px auto
    0;

  border-radius:10px;

  background:
    linear-gradient(
      90deg,
      rgba(113,173,61,.15),
      #71ad3d,
      rgba(113,173,61,.15)
    );

  box-shadow:
    0 0 14px rgba(113,173,61,.18);
}


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.services-main-button{
  min-height:62px;

  margin:
    0 auto;

  padding:
    0 9px
    0 32px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:22px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #23ae29 0%,
      #159b1b 56%,
      #087b10 100%
    );

  border:
    1px solid rgba(255,255,255,.17);

  color:#fff;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10.5px;

  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;

  text-decoration:none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,70,7,.20),

    0 7px 13px rgba(0,0,0,.28),
    0 16px 31px rgba(8,123,16,.22),
    0 27px 48px rgba(0,0,0,.18);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}


.services-main-button:hover{
  transform:
    translateY(-3px);

  filter:
    brightness(1.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,70,7,.18),

    0 10px 18px rgba(0,0,0,.30),
    0 20px 38px rgba(8,123,16,.27),
    0 31px 56px rgba(0,0,0,.20);
}


/* =========================================================
   CÍRCULO DEL CTA
========================================================= */

.services-main-button-icon{
  width:46px;
  height:46px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f1eee8;

  color:#159b1b;

  font-size:17px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}


/* =========================================================
   RESET
========================================================= */

.service-item-01,
.service-item-02,
.service-item-03,
.service-item-04{
  margin:0 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px) and (min-width:769px){

  .services-section{
    padding:
      42px 34px
      46px;
  }


  .services-heading{
    gap:36px;

    margin-bottom:32px;
  }


  .services-grid{
    row-gap:34px;

    column-gap:28px;
  }


  .service-item{
    grid-template-columns:
      minmax(170px,.88fr)
      minmax(0,1.12fr);

    gap:24px;

    padding:
      17px 0;
  }


  .service-image{
    min-height:165px;

    aspect-ratio:
      1.35 / 1;
  }


  .services-footer{
    margin-top:40px;

    padding-top:28px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .services-section{
    height:auto;

    min-height:auto;

    padding:
      58px 20px
      66px;

    overflow:hidden;
  }


  .services-topline{
    font-size:7px;

    gap:10px;
  }


  .services-heading{
    display:block;

    margin-bottom:38px;
  }


  .services-kicker{
    margin-bottom:13px;
  }


  .services-heading h2{
    font-size:
      clamp(46px,12vw,62px);

    line-height:.85;
  }


  .services-heading p{
    max-width:430px;

    margin-top:22px;

    font-size:13px;
  }


  .services-grid{
    display:flex;

    flex-direction:column;

    gap:42px;
  }


  .service-item{
    display:grid;

    grid-template-columns:1fr;

    gap:21px;

    padding:
      18px 0 0;
  }


  .service-image{
    width:100%;

    height:auto;

    min-height:0;

    aspect-ratio:
      1.42 / 1;
  }


  .service-info-top{
    margin-bottom:13px;
  }


  .service-info h3{
    font-size:
      clamp(38px,10vw,52px);

    line-height:.91;
  }


  .service-info p{
    max-width:none;

    margin-top:14px;

    padding-top:13px;

    font-size:12.5px;

    line-height:1.64;
  }


  /* =======================================================
     CTA MOBILE
  ======================================================== */

  .services-footer{
    margin-top:48px;

    padding-top:30px;

    flex-direction:column;

    align-items:center;

    gap:18px;

    text-align:center;
  }


  .services-footer > span{
    font-size:
      clamp(23px,7vw,30px);

    line-height:1.04;
  }


  .services-main-button{
    min-height:58px;

    padding:
      0 8px
      0 26px;

    gap:18px;

    font-size:9px;
  }


  .services-main-button-icon{
    width:42px;
    height:42px;

    font-size:16px;
  }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media(max-width:480px){

  .services-section{
    padding:
      48px 16px
      58px;
  }


  .services-heading h2{
    font-size:
      clamp(42px,12.5vw,54px);
  }


  .services-grid{
    gap:38px;
  }


  .service-image{
    aspect-ratio:
      1.30 / 1;

    border-radius:
      28px !important;
  }


  .service-info h3{
    font-size:
      clamp(36px,10.5vw,46px);
  }


  .services-footer > span{
    font-size:
      clamp(22px,7.5vw,28px);
  }

}

/* =========================================================
   SERVICIOS · VERSIÓN SIMPLIFICADA
   SIN PÁRRAFOS + IMÁGENES Y TÍTULOS MÁS GRANDES
========================================================= */

@media (min-width:769px){

  /* =======================================================
     GRID
     MÁS ESPACIO ENTRE SERVICIOS
  ======================================================== */

  .services-grid{
    row-gap:54px !important;
    column-gap:68px !important;
  }


  /* =======================================================
     ITEM
  ======================================================== */

  .service-item{
    grid-template-columns:
      minmax(260px,1.02fr)
      minmax(0,.98fr) !important;

    gap:
      clamp(34px,3vw,56px) !important;

    align-items:center !important;

    padding:
      24px 0 !important;
  }


  /* =======================================================
     IMAGEN
     MÁS GRANDE
  ======================================================== */

  .service-image{
    min-height:225px !important;

    aspect-ratio:
      1.48 / 1 !important;

    box-shadow:
      0 18px 40px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.04)
      !important;
  }


  /* =======================================================
     FORMAS
  ======================================================== */

  .service-item-01 .service-image{
    border-radius:
      60px 24px 24px 24px !important;
  }

  .service-item-02 .service-image{
    border-radius:
      24px 60px 24px 24px !important;
  }

  .service-item-03 .service-image{
    border-radius:
      24px 24px 24px 60px !important;
  }

  .service-item-04 .service-image{
    border-radius:
      24px 24px 60px 24px !important;
  }


  /* =======================================================
     INFORMACIÓN
  ======================================================== */

  .service-info{
    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    min-height:190px !important;
  }


  /* =======================================================
     LIMPIEZA DE:
  ======================================================== */

  .service-info-top{
    margin-bottom:20px !important;
  }


  .service-category{
    font-size:10px !important;

    font-weight:800 !important;

    letter-spacing:.25em !important;

    color:#71ad3d !important;
  }


  /* =======================================================
     FLECHA
  ======================================================== */

  .service-arrow{
    width:42px !important;
    height:42px !important;

    font-size:15px !important;
  }


  /* =======================================================
     TÍTULO
     MUCHO MÁS PROTAGONISTA
  ======================================================== */

  .service-info h3{
    max-width:520px !important;

    font-size:
      clamp(40px,2.35vw,50px) !important;

    line-height:.86 !important;

    letter-spacing:-.048em !important;
  }


  .service-info h3 span{
    margin-top:2px !important;

    color:
      rgba(241,238,232,.53) !important;
  }


  /* =======================================================
     YA NO EXISTEN PÁRRAFOS
  ======================================================== */

  .service-info p{
    display:none !important;
  }


  /* =======================================================
     NÚMEROS
  ======================================================== */

  .service-number{
    left:20px !important;
    bottom:18px !important;

    font-size:
      clamp(40px,3.3vw,54px) !important;
  }

}


/* =========================================================
   SERVICIOS · SUBIR FILA 03 Y 04
   DESKTOP
========================================================= */

@media (min-width:769px){

  /* Reducimos únicamente la distancia entre las dos filas */
  .services-grid{
    row-gap:10px !important;
  }

  /* Segunda fila: servicios 03 y 04 */
  .service-item-03,
  .service-item-04{
    transform:translateY(-22px);
  }

  /* Conservamos el pequeño movimiento del hover */
  .service-item-03:hover,
  .service-item-04:hover{
    transform:translateY(-25px);
  }

}

/* =========================================================
   CONTACTO · KOBLENZ
   EDITORIAL CLEAN · VERSIÓN NUEVA
   MISMA FAMILIA VISUAL DEL ABOUT
========================================================= */


/* =========================================================
   SECCIÓN
========================================================= */

.kob-contact{
  position:relative;

  width:100%;
  min-height:100vh;

  padding:
    62px
    clamp(48px,5vw,82px)
    70px;

  display:flex;
  flex-direction:column;

  overflow:hidden;
  isolation:isolate;

  color:#1b1e1b;

  background:

    /* iluminación limpia superior derecha */
    radial-gradient(
      ellipse at 82% 18%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.40) 30%,
      transparent 62%
    ),

    /* presencia verde casi imperceptible */
    radial-gradient(
      ellipse at 14% 78%,
      rgba(113,173,61,.035) 0%,
      transparent 48%
    ),

    /* mismo marfil del About */
    linear-gradient(
      135deg,
      #f5f3ee 0%,
      #efede7 48%,
      #e9e7e1 100%
    );
}


/* =========================================================
   SOMBRA / TRANSICIÓN SUPERIOR
========================================================= */

.kob-contact::before{
  content:"";

  position:absolute;
  z-index:0;

  left:0;
  right:0;
  top:0;

  width:100%;
  height:100px;

  background:
    linear-gradient(
      to bottom,
      rgba(8,11,8,.08) 0%,
      rgba(8,11,8,.025) 35%,
      transparent 100%
    );

  pointer-events:none;
}


/* =========================================================
   LUZ AMBIENTAL
========================================================= */

.kob-contact::after{
  content:"";

  position:absolute;
  z-index:0;

  right:-230px;
  bottom:-240px;

  width:650px;
  height:650px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.20) 40%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   TOPLINE
========================================================= */

.kob-contact-topline{
  position:relative;
  z-index:3;

  width:100%;

  display:flex;
  align-items:center;

  gap:20px;

  margin-bottom:
    clamp(34px,3vw,48px);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;
  font-weight:800;

  letter-spacing:.28em;

  text-transform:uppercase;

  color:
    rgba(27,30,27,.48);
}


.kob-contact-topline-line{
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(25,28,25,.07),
      rgba(25,28,25,.23),
      rgba(25,28,25,.07)
    );
}


/* =========================================================
   LAYOUT
========================================================= */

.kob-contact-layout{
  position:relative;
  z-index:3;

  flex:1;

  display:grid;

  grid-template-columns:
    minmax(0,.88fr)
    minmax(0,1.12fr);

  align-items:center;

  gap:
    clamp(62px,6.3vw,112px);
}


/* =========================================================
   COLUMNA IZQUIERDA
========================================================= */

.kob-contact-info{
  width:100%;
  max-width:650px;
}


/* =========================================================
   KICKER
========================================================= */

.kob-contact-kicker{
  display:block;

  margin-bottom:16px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;
  font-weight:800;

  letter-spacing:.33em;

  text-transform:uppercase;

  color:#159b1b;
}


/* =========================================================
   TÍTULO
========================================================= */

.kob-contact-title{
  max-width:620px;

  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(67px,5.7vw,94px);

  line-height:.79;

  font-weight:600;

  letter-spacing:-.055em;

  color:#181b19;
}


.kob-contact-title span{
  display:block;

  color:#696d69;

  font-weight:500;
}


/* =========================================================
   INTRO
========================================================= */

.kob-contact-intro{
  max-width:520px;

  margin:
    27px 0 0;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(14px,1vw,16px);

  line-height:1.72;

  color:#555955;
}


/* =========================================================
   DATOS DE CONTACTO
========================================================= */

.kob-contact-data{
  margin-top:
    clamp(32px,3vw,45px);

  border-top:
    1px solid rgba(25,28,25,.13);
}


/* =========================================================
   ITEM DE CONTACTO
========================================================= */

.kob-contact-data-item{
  position:relative;

  min-height:82px;

  display:grid;

  grid-template-columns:
    40px
    minmax(0,1fr)
    42px;

  align-items:center;

  gap:18px;

  padding:
    13px 4px;

  border-bottom:
    1px solid rgba(25,28,25,.13);

  color:inherit;

  text-decoration:none;

  transition:
    padding .3s ease,
    background .3s ease;
}


.kob-contact-data-item:hover{
  padding-left:10px;
  padding-right:8px;

  background:
    rgba(255,255,255,.27);
}


/* =========================================================
   NÚMERO
========================================================= */

.kob-contact-data-number{
  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:25px;

  font-weight:600;

  color:
    rgba(23,25,23,.34);
}


/* =========================================================
   CONTENIDO
========================================================= */

.kob-contact-data-content{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:4px;
}


.kob-contact-data-label{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;
  font-weight:800;

  letter-spacing:.22em;

  text-transform:uppercase;

  color:#159b1b;
}


.kob-contact-data-content strong{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(14px,1.08vw,17px);

  font-weight:700;

  color:#202320;
}


.kob-contact-data-content small{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10.5px;

  color:
    rgba(30,32,30,.50);
}


/* =========================================================
   FLECHA
========================================================= */

.kob-contact-data-arrow{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  justify-self:end;

  border:
    1px solid rgba(23,25,23,.13);

  border-radius:50%;

  background:
    rgba(255,255,255,.28);

  font-size:14px;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.kob-contact-data-item:hover
.kob-contact-data-arrow{
  transform:
    translateY(-2px)
    rotate(7deg);

  background:#159b1b;

  border-color:#159b1b;

  color:#fff;

  box-shadow:
    0 8px 18px rgba(8,123,16,.17);
}


/* =========================================================
   REDES
========================================================= */

.kob-contact-social{
  margin-top:30px;

  display:flex;
  align-items:center;

  gap:22px;
}


.kob-contact-social-label{
  flex:0 0 auto;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;
  font-weight:800;

  letter-spacing:.25em;

  color:
    rgba(25,28,25,.48);

  text-transform:uppercase;
}


.kob-contact-social-links{
  display:flex;
  align-items:center;

  flex-wrap:wrap;

  gap:10px;
}


/* =========================================================
   RED SOCIAL
========================================================= */

.kob-social-link{
  min-height:54px;

  display:inline-flex;
  align-items:center;

  gap:11px;

  padding:
    6px 12px
    6px 6px;

  border:
    1px solid rgba(25,28,25,.12);

  border-radius:999px;

  background:
    rgba(255,255,255,.38);

  color:#202320;

  text-decoration:none;

  box-shadow:
    0 5px 14px rgba(28,31,26,.035);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    color .3s ease;
}


/* =========================================================
   ICONO SOCIAL
========================================================= */

.kob-social-icon{
  width:42px;
  height:42px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    #e3e0d8;

  color:#159b1b;

  transition:
    transform .35s ease,
    background .3s ease,
    color .3s ease;
}


.kob-social-icon svg{
  width:21px;
  height:21px;

  display:block;

  fill:none;
  stroke:currentColor;

  stroke-width:1.9;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.kob-social-icon svg .social-fill{
  fill:currentColor;
  stroke:none;
}


.kob-social-link[aria-label="Facebook"]
.kob-social-icon svg{
  fill:currentColor;
  stroke:none;
}


.kob-social-name{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:11px;

  font-weight:700;

  white-space:nowrap;
}


.kob-social-arrow{
  width:27px;
  height:27px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:
    rgba(25,28,25,.55);

  font-size:13px;
}


/* =========================================================
   HOVER SOCIAL
========================================================= */

.kob-social-link:hover{
  transform:
    translateY(-3px);

  background:#159b1b;

  border-color:#159b1b;

  color:#fff;

  box-shadow:
    0 10px 24px rgba(8,123,16,.17);
}


.kob-social-link:hover
.kob-social-icon{
  transform:
    rotate(-5deg)
    scale(1.04);

  background:#f5f3ee;

  color:#159b1b;
}


.kob-social-link:hover
.kob-social-arrow{
  color:#fff;
}


/* =========================================================
   PANEL FORMULARIO
========================================================= */

.kob-contact-form-panel{
  position:relative;

  width:100%;

  min-width:0;

  padding:
    clamp(38px,3.6vw,58px);

  overflow:hidden;

  /*
    Mucho más limpio que el viejo #d8cdbd.
  */
  background:

    radial-gradient(
      ellipse at 82% 10%,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.28) 36%,
      transparent 62%
    ),

    linear-gradient(
      145deg,
      #ece9e2 0%,
      #e6e3dc 52%,
      #dedbd3 100%
    );

  border:
    1px solid rgba(255,255,255,.72);

  border-radius:
    76px
    22px
    76px
    22px;

  box-shadow:
    /* borde limpio */
    inset 0 1px 0 rgba(255,255,255,.80),

    /* volumen cercano */
    0 10px 20px rgba(34,31,26,.045),

    /* profundidad */
    0 28px 65px rgba(34,31,26,.10);
}


/* pequeño acento verde */

.kob-contact-form-panel::before{
  content:"";

  position:absolute;

  left:0;
  top:15%;

  width:5px;
  height:34%;

  border-radius:
    0 6px 6px 0;

  background:
    linear-gradient(
      180deg,
      #71ad3d,
      #159b1b,
      #087b10
    );
}


/* =========================================================
   CABECERA FORMULARIO
========================================================= */

.kob-contact-form-head{
  position:relative;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:30px;

  margin-bottom:
    clamp(28px,2.6vw,40px);
}


.kob-contact-form-head > div > span{
  display:block;

  margin-bottom:10px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;

  font-weight:800;

  letter-spacing:.24em;

  color:#159b1b;
}


.kob-contact-form-head h3{
  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(48px,3.9vw,66px);

  line-height:.85;

  font-weight:600;

  letter-spacing:-.046em;

  color:#181b19;
}


.kob-contact-form-head h3 em{
  display:block;

  color:#696d69;

  font-style:normal;
}


.kob-contact-form-index{
  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(40px,3.2vw,54px);

  line-height:1;

  color:
    rgba(23,25,23,.13);
}


/* =========================================================
   FORM
========================================================= */

.kob-contact-form{
  position:relative;

  z-index:2;
}


.kob-form-row{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    clamp(22px,2.1vw,30px);
}


.kob-form-field{
  position:relative;

  margin-bottom:
    clamp(23px,2.25vw,31px);
}


/* =========================================================
   LABELS
========================================================= */

.kob-form-field label{
  display:block;

  margin-bottom:9px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9.5px;

  font-weight:800;

  letter-spacing:.14em;

  color:
    rgba(25,28,25,.62);

  text-transform:uppercase;
}


/* =========================================================
   CAMPOS
========================================================= */

.kob-form-field input,
.kob-form-field select,
.kob-form-field textarea{
  width:100%;

  margin:0;

  border:0;

  border-bottom:
    1px solid rgba(23,26,23,.20);

  border-radius:0;

  outline:none;

  background:transparent;

  color:#171917;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(14px,1vw,16px);

  transition:
    border-color .3s ease,
    box-shadow .3s ease;
}


.kob-form-field input,
.kob-form-field select{
  height:44px;

  padding:
    0 0 12px;
}


.kob-form-field textarea{
  min-height:96px;

  padding:
    7px 0 12px;

  line-height:1.6;

  resize:none;
}


.kob-form-field input::placeholder,
.kob-form-field textarea::placeholder{
  color:
    rgba(23,26,23,.36);
}


/* =========================================================
   FOCUS
========================================================= */

.kob-form-field input:focus,
.kob-form-field select:focus,
.kob-form-field textarea:focus{
  border-color:#159b1b;

  box-shadow:
    0 1px 0 rgba(21,155,27,.16);
}


.kob-form-message{
  margin-bottom:22px;
}


/* =========================================================
   FOOTER FORM
========================================================= */

.kob-contact-form-footer{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  padding-top:5px;
}


.kob-contact-form-footer p{
  max-width:330px;

  margin:0;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;

  line-height:1.6;

  color:
    rgba(25,28,25,.50);
}


/* =========================================================
   BOTÓN ENVIAR
========================================================= */

.kob-contact-submit{
  flex:0 0 auto;

  min-height:60px;

  padding:
    0 8px
    0 29px;

  display:inline-flex;

  align-items:center;

  gap:21px;

  border:0;

  border-radius:999px;

  color:#fff;

  background:
    linear-gradient(
      180deg,
      #23ae29 0%,
      #159b1b 56%,
      #087b10 100%
    );

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;

  font-weight:800;

  letter-spacing:.10em;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,75,8,.18),

    0 5px 8px rgba(5,70,10,.16),
    0 13px 24px rgba(8,123,16,.22),
    0 22px 42px rgba(12,70,18,.12);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    filter .3s ease;
}


.kob-contact-submit:hover{
  transform:
    translateY(-3px);

  filter:
    brightness(1.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,75,8,.18),

    0 8px 13px rgba(5,70,10,.18),
    0 18px 30px rgba(8,123,16,.27),
    0 28px 48px rgba(12,70,18,.14);
}


/* =========================================================
   ICONO BOTÓN
========================================================= */

.kob-contact-submit-icon{
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f5f3ee;

  color:#159b1b;

  font-size:17px;

  box-shadow:
    0 2px 7px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.75);
}


/* =========================================================
   DOTS FORMULARIO
========================================================= */

.kob-contact-form-dots{
  position:absolute;

  right:24px;
  bottom:22px;

  z-index:0;

  display:grid;

  grid-template-columns:
    repeat(4,3px);

  gap:7px;

  opacity:.26;

  pointer-events:none;
}


.kob-contact-form-dots span{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#71ad3d;
}


/* =========================================================
   DESKTOP CON POCA ALTURA
========================================================= */

@media(min-width:769px) and (max-height:780px){

  .kob-contact{
    padding-top:34px;
    padding-bottom:34px;
  }


  .kob-contact-topline{
    margin-bottom:24px;
  }


  .kob-contact-title{
    font-size:
      clamp(58px,4.8vw,79px);
  }


  .kob-contact-intro{
    margin-top:18px;

    font-size:13.5px;
  }


  .kob-contact-data{
    margin-top:23px;
  }


  .kob-contact-data-item{
    min-height:67px;

    padding-top:8px;
    padding-bottom:8px;
  }


  .kob-contact-social{
    margin-top:20px;
  }


  .kob-contact-form-panel{
    padding:
      30px 36px;
  }


  .kob-contact-form-head{
    margin-bottom:23px;
  }


  .kob-contact-form-head h3{
    font-size:
      clamp(42px,3.2vw,55px);
  }


  .kob-form-field{
    margin-bottom:18px;
  }


  .kob-contact-submit{
    min-height:54px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px) and (min-width:769px){

  .kob-contact{
    padding:
      48px 30px
      56px;
  }


  .kob-contact-layout{
    grid-template-columns:
      .92fr
      1.08fr;

    gap:44px;
  }


  .kob-contact-title{
    font-size:
      clamp(55px,6vw,74px);
  }


  .kob-contact-form-panel{
    padding:
      34px;

    border-radius:
      54px
      18px
      54px
      18px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .kob-contact{
    min-height:auto;

    padding:
      58px 18px
      72px;

    display:block;
  }


  .kob-contact::before{
    height:70px;
  }


  .kob-contact-topline{
    margin-bottom:38px;

    gap:12px;

    font-size:8px;
  }


  .kob-contact-layout{
    display:flex;

    flex-direction:column;

    gap:48px;
  }


  .kob-contact-info{
    width:100%;
    max-width:none;
  }


  .kob-contact-kicker{
    font-size:9px;
  }


  .kob-contact-title{
    max-width:530px;

    font-size:
      clamp(55px,14vw,72px);

    line-height:.84;
  }


  .kob-contact-intro{
    max-width:430px;

    margin-top:21px;

    font-size:13.5px;
  }


  /* =======================================================
     DATOS MOBILE
  ======================================================== */

  .kob-contact-data{
    margin-top:32px;
  }


  .kob-contact-data-item{
    min-height:76px;

    grid-template-columns:
      32px
      minmax(0,1fr)
      38px;

    gap:13px;
  }


  .kob-contact-data-number{
    font-size:21px;
  }


  .kob-contact-data-label{
    font-size:8px;
  }


  .kob-contact-data-content strong{
    font-size:13.5px;
  }


  .kob-contact-data-content small{
    font-size:9.5px;
  }


  /* =======================================================
     REDES MOBILE
  ======================================================== */

  .kob-contact-social{
    margin-top:27px;

    flex-direction:column;

    align-items:flex-start;

    gap:14px;
  }


  .kob-contact-social-links{
    width:100%;

    gap:8px;
  }


  .kob-social-link{
    min-height:50px;
  }


  .kob-social-icon{
    width:39px;
    height:39px;
  }


  .kob-social-icon svg{
    width:20px;
    height:20px;
  }


  .kob-social-name{
    font-size:10px;
  }


  /* =======================================================
     FORM MOBILE
  ======================================================== */

  .kob-contact-form-panel{
    width:100%;

    padding:
      34px 23px
      30px;

    border-radius:
      50px
      18px
      50px
      18px;
  }


  .kob-contact-form-head{
    margin-bottom:30px;
  }


  .kob-contact-form-head h3{
    font-size:
      clamp(44px,12vw,59px);
  }


  .kob-contact-form-index{
    font-size:36px;
  }


  .kob-form-row{
    grid-template-columns:1fr;

    gap:0;
  }


  .kob-form-field{
    margin-bottom:24px;
  }


  .kob-contact-form-footer{
    flex-direction:column;

    align-items:flex-start;

    gap:21px;
  }


  .kob-contact-submit{
    min-height:56px;

    font-size:9px;
  }


  .kob-contact-form-dots{
    display:none;
  }

}


/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media(max-width:480px){

  .kob-contact{
    padding-left:14px;
    padding-right:14px;
  }


  .kob-contact-title{
    font-size:
      clamp(50px,14vw,64px);
  }


  .kob-contact-form-panel{
    padding:
      30px 18px
      27px;

    border-radius:
      40px
      14px
      40px
      14px;
  }


  .kob-contact-social-links{
    display:grid;

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    width:100%;

    gap:7px;
  }


  .kob-social-link{
    width:100%;

    justify-content:flex-start;
  }


  .kob-social-arrow{
    margin-left:auto;
  }

}

/* =========================================================
   CONTACTO · AJUSTE DE CONTRASTE + PROFUNDIDAD
   MÁS LEGIBILIDAD + REDES MÁS GRANDES
========================================================= */

@media (min-width:769px){

  /* =======================================================
     TÍTULO PRINCIPAL
  ======================================================== */

  .kob-contact-title{
    color:#111411 !important;

    text-shadow:
      0 1px 0 rgba(255,255,255,.35);
  }

  .kob-contact-title span{
    color:#565b56 !important;
  }


  /* =======================================================
     INTRO
  ======================================================== */

  .kob-contact-intro{
    color:#3f443f !important;

    font-size:
      clamp(14.5px,1.03vw,16.5px) !important;
  }


  /* =======================================================
     TOPLINE
  ======================================================== */

  .kob-contact-topline{
    color:
      rgba(22,25,22,.62) !important;
  }

  .kob-contact-topline-line{
    background:
      linear-gradient(
        90deg,
        rgba(22,25,22,.10),
        rgba(22,25,22,.28),
        rgba(22,25,22,.10)
      ) !important;
  }


  /* =======================================================
     DATOS DE CONTACTO
  ======================================================== */

  .kob-contact-data{
    border-top:
      1px solid rgba(20,22,20,.19) !important;
  }

  .kob-contact-data-item{
    border-bottom:
      1px solid rgba(20,22,20,.19) !important;
  }

  .kob-contact-data-number{
    color:
      rgba(20,22,20,.46) !important;
  }

  .kob-contact-data-label{
    color:#0d8f15 !important;
  }

  .kob-contact-data-content strong{
    color:#111411 !important;

    font-weight:800 !important;
  }

  .kob-contact-data-content small{
    color:
      rgba(20,22,20,.63) !important;
  }


  /* =======================================================
     FLECHAS DE CONTACTO
  ======================================================== */

  .kob-contact-data-arrow{
    border:
      1px solid rgba(20,22,20,.20) !important;

    background:
      rgba(255,255,255,.52) !important;

    color:#171a17 !important;

    box-shadow:
      0 4px 10px rgba(30,28,24,.08),
      inset 0 1px 0 rgba(255,255,255,.78) !important;
  }


  /* =======================================================
     PANEL FORMULARIO
     MÁS RELIEVE
  ======================================================== */

  .kob-contact-form-panel{
    background:
      radial-gradient(
        ellipse at 82% 10%,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.36) 36%,
        transparent 62%
      ),

      linear-gradient(
        145deg,
        #ece8e0 0%,
        #e4e0d7 50%,
        #dad6cc 100%
      ) !important;

    border:
      1px solid rgba(255,255,255,.86) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(90,80,65,.05),

      0 8px 18px rgba(45,39,31,.07),
      0 22px 44px rgba(45,39,31,.11),
      0 42px 78px rgba(45,39,31,.13)

      !important;
  }


  /* =======================================================
     TÍTULO DEL FORMULARIO
  ======================================================== */

  .kob-contact-form-head h3{
    color:#111411 !important;
  }

  .kob-contact-form-head h3 em{
    color:#555a55 !important;
  }

  .kob-contact-form-index{
    color:
      rgba(18,21,18,.18) !important;
  }


  /* =======================================================
     LABELS FORM
  ======================================================== */

  .kob-form-field label{
    color:
      rgba(20,22,20,.76) !important;
  }


  /* =======================================================
     INPUTS
  ======================================================== */

  .kob-form-field input,
  .kob-form-field select,
  .kob-form-field textarea{
    color:#111411 !important;

    border-bottom:
      1px solid rgba(20,22,20,.28) !important;
  }


  .kob-form-field input::placeholder,
  .kob-form-field textarea::placeholder{
    color:
      rgba(20,22,20,.46) !important;
  }


  /* =======================================================
     TEXTO INFERIOR FORMULARIO
  ======================================================== */

  .kob-contact-form-footer p{
    color:
      rgba(20,22,20,.63) !important;

    font-size:10.5px !important;
  }


  /* =======================================================
     SÍGUENOS · MÁS GRANDE
  ======================================================== */

  .kob-contact-social{
    margin-top:34px !important;

    gap:26px !important;
  }

  .kob-contact-social-label{
    font-size:11px !important;

    font-weight:800 !important;

    letter-spacing:.28em !important;

    color:
      rgba(18,21,18,.72) !important;
  }


  /* =======================================================
     BOTONES REDES · MÁS GRANDES
  ======================================================== */

  .kob-social-link{
    min-height:62px !important;

    gap:13px !important;

    padding:
      7px 15px
      7px 7px !important;

    border:
      1px solid rgba(20,22,20,.17) !important;

    background:
      rgba(255,255,255,.58) !important;

    color:#141714 !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 6px 14px rgba(35,31,26,.07),
      0 12px 26px rgba(35,31,26,.08)

      !important;
  }


  /* =======================================================
     ICONOS REDES
  ======================================================== */

  .kob-social-icon{
    width:48px !important;
    height:48px !important;

    background:#dedbd2 !important;

    color:#14931b !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.82),
      0 4px 10px rgba(35,31,26,.08)

      !important;
  }

  .kob-social-icon svg{
    width:23px !important;
    height:23px !important;
  }


  /* =======================================================
     NOMBRES REDES
  ======================================================== */

  .kob-social-name{
    font-size:12.5px !important;

    font-weight:800 !important;
  }


  /* =======================================================
     FLECHA RED SOCIAL
  ======================================================== */

  .kob-social-arrow{
    width:30px !important;
    height:30px !important;

    font-size:14px !important;

    color:
      rgba(20,22,20,.68) !important;
  }


  /* =======================================================
     HOVER REDES
  ======================================================== */

  .kob-social-link:hover{
    transform:
      translateY(-4px) !important;

    background:#159b1b !important;

    border-color:#159b1b !important;

    color:#fff !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 10px 18px rgba(8,123,16,.16),
      0 18px 34px rgba(8,123,16,.20)

      !important;
  }


  /* =======================================================
     BOTÓN ENVIAR · MÁS PROFUNDO
  ======================================================== */

  .kob-contact-submit{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -3px 0 rgba(0,65,7,.22),

      0 6px 11px rgba(0,0,0,.16),
      0 14px 26px rgba(8,123,16,.24),
      0 26px 44px rgba(12,70,18,.16)

      !important;
  }

}

/* =========================================================
   KOBLENZ · FONDO BEIGE EDITORIAL
   ABOUT + CONTACTO

   MISMA FAMILIA VISUAL DEL PANEL DEL FORMULARIO
========================================================= */


/* =========================================================
   ABOUT
========================================================= */

.about-section{

  background:

    /* luz superior derecha */
    radial-gradient(
      ellipse at 82% 10%,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.36) 36%,
      transparent 62%
    ),

    /* pequeña luz cálida izquierda */
    radial-gradient(
      ellipse at 14% 76%,
      rgba(255,255,255,.22) 0%,
      transparent 46%
    ),

    /* matiz verde Koblenz extremadamente sutil */
    radial-gradient(
      ellipse at 28% 58%,
      rgba(113,173,61,.025) 0%,
      transparent 42%
    ),

    /* BEIGE PRINCIPAL */
    linear-gradient(
      145deg,
      #ece8e0 0%,
      #e4e0d7 50%,
      #dad6cc 100%
    )

    !important;
}


/* =========================================================
   CONTACTO
========================================================= */

.kob-contact{

  background:

    /* luz superior derecha */
    radial-gradient(
      ellipse at 82% 10%,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.36) 36%,
      transparent 62%
    ),

    /* luz ambiental izquierda */
    radial-gradient(
      ellipse at 13% 70%,
      rgba(255,255,255,.20) 0%,
      transparent 47%
    ),

    /* toque verde casi imperceptible */
    radial-gradient(
      ellipse at 72% 72%,
      rgba(113,173,61,.025) 0%,
      transparent 43%
    ),

    /* BEIGE PRINCIPAL */
    linear-gradient(
      145deg,
      #ece8e0 0%,
      #e4e0d7 50%,
      #dad6cc 100%
    )

    !important;
}


/* =========================================================
   TRANSICIÓN ENTRE ABOUT Y CONTACTO
   Evita un corte demasiado marcado entre ambas.
========================================================= */

.about-section::before{

  background:
    linear-gradient(
      to bottom,
      rgba(20,18,15,.075),
      rgba(20,18,15,.018) 38%,
      transparent 100%
    )

    !important;
}


/* =========================================================
   CONTACTO · PANEL DEL FORM
   CONSERVAMOS EL BEIGE PERO LO SEPARAMOS DEL FONDO
   CON SOMBRA Y LUZ
========================================================= */

.kob-contact-form-panel{

  background:

    radial-gradient(
      ellipse at 82% 10%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.40) 36%,
      transparent 62%
    ),

    linear-gradient(
      145deg,
      #eeeae2 0%,
      #e5e1d8 50%,
      #dcd8ce 100%
    )

    !important;


  border:
    1px solid rgba(255,255,255,.88) !important;


  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.95),

    inset 0 -1px 0 rgba(90,80,65,.06),

    0 8px 18px rgba(45,39,31,.08),

    0 24px 46px rgba(45,39,31,.12),

    0 44px 82px rgba(45,39,31,.13)

    !important;
}

/* =========================================================
   FOOTER · KOBLENZ
   VERDE CORPORATIVO · MÁS GRANDE + MÁS PRESENCIA
========================================================= */

.kob-main-footer{
  position:relative;

  width:100%;

  min-height:330px;

  padding:
    58px
    clamp(54px,6vw,96px)
    34px;

  overflow:hidden;
  isolation:isolate;

  color:#071008;

  background:

    radial-gradient(
      ellipse at 23% 0%,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.055) 32%,
      transparent 58%
    ),

    radial-gradient(
      ellipse at 87% 90%,
      rgba(0,45,5,.18) 0%,
      transparent 50%
    ),

    linear-gradient(
      115deg,
      #2ac231 0%,
      #19aa21 42%,
      #119718 72%,
      #0b8111 100%
    );

  border-top:
    2px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 22px 42px -30px rgba(255,255,255,.20),
    0 -14px 36px rgba(8,70,13,.14);
}


/* =========================================================
   TEXTURA
========================================================= */

.kob-main-footer::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  opacity:.20;

  background-image:
    radial-gradient(
      circle,
      rgba(5,20,7,.27) 0 .9px,
      transparent 1.2px
    );

  background-size:
    19px 19px;
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.kob-main-footer-inner{
  position:relative;

  z-index:3;

  width:100%;

  display:grid;

  grid-template-columns:
    1.18fr
    .86fr
    1.08fr;

  align-items:center;

  gap:
    clamp(42px,5vw,82px);
}


/* =========================================================
   LOGO
========================================================= */

.kob-main-footer-brand{
  min-width:0;

  display:flex;

  align-items:center;

  gap:18px;
}


.kob-main-footer-brand img{
  display:block;

  width:
    clamp(155px,11vw,195px);

  height:auto;

  object-fit:contain;

  filter:
    brightness(.16)
    saturate(.65)
    contrast(1.42);
}


.kob-main-footer-brand span{
  max-width:285px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(12px,.95vw,15px);

  font-weight:900;

  line-height:1.55;

  letter-spacing:.21em;

  text-transform:uppercase;

  color:
    rgba(4,13,5,.86);
}


/* =========================================================
   BLOQUES DE INFORMACIÓN
========================================================= */

.kob-main-footer-item{
  position:relative;

  min-height:108px;

  display:flex;

  align-items:center;

  gap:22px;

  padding-left:
    clamp(28px,2.6vw,42px);

  border-left:
    2px solid rgba(4,22,7,.25);

  transition:
    transform .3s ease;
}


.kob-main-footer-item:hover{
  transform:
    translateY(-3px);
}


/* =========================================================
   ICONOS
========================================================= */

.kob-main-footer-icon{
  width:56px;
  height:56px;

  flex:0 0 auto;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    rgba(7,20,9,.11);

  border:
    2px solid rgba(6,22,8,.20);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 10px rgba(0,0,0,.05);

  color:#061007;
}


.kob-main-footer-icon svg{
  width:27px;
  height:27px;

  fill:none;

  stroke:currentColor;

  stroke-width:2.1;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   TEXTOS
========================================================= */

.kob-main-footer-copy{
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:7px;
}


.kob-main-footer-copy strong{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(16px,1.25vw,20px);

  font-weight:900;

  line-height:1.22;

  letter-spacing:-.025em;

  color:#050d06;
}


.kob-main-footer-copy small{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(11px,.86vw,13.5px);

  font-weight:700;

  line-height:1.5;

  color:
    rgba(5,14,6,.68);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.kob-main-footer-bottom{
  position:relative;

  z-index:3;

  width:100%;

  margin-top:42px;

  padding-top:24px;

  display:flex;

  align-items:center;

  gap:26px;

  border-top:
    2px solid rgba(5,22,7,.24);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10.5px;

  font-weight:900;

  letter-spacing:.17em;

  text-transform:uppercase;

  color:
    rgba(5,15,7,.66);
}


/* =========================================================
   LÍNEA CENTRAL
========================================================= */

.kob-main-footer-bottom-line{
  flex:1;

  height:2px;

  background:
    linear-gradient(
      90deg,
      rgba(5,20,7,.08),
      rgba(5,20,7,.30),
      rgba(5,20,7,.08)
    );
}


/* =========================================================
   DAEVO SOFTWARE
========================================================= */

.kob-main-footer-made{
  white-space:nowrap;
}


.kob-main-footer-made a{
  position:relative;

  margin-left:6px;

  color:#050d06;

  font-weight:900;

  text-decoration:none;
}


.kob-main-footer-made a::after{
  content:"";

  position:absolute;

  left:0;
  right:0;

  bottom:-5px;

  height:2px;

  background:#050d06;

  transform:
    scaleX(.35);

  transform-origin:left;

  opacity:.55;

  transition:
    transform .3s ease,
    opacity .3s ease;
}


.kob-main-footer-made a:hover::after{
  transform:
    scaleX(1);

  opacity:1;
}


/* =========================================================
   DOTS DECORATIVOS
========================================================= */

.kob-main-footer-dots{
  position:absolute;

  z-index:1;

  right:32px;
  top:28px;

  display:grid;

  grid-template-columns:
    repeat(4,4px);

  gap:8px;

  pointer-events:none;
}


.kob-main-footer-dots span{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#071008;

  opacity:.28;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px) and (min-width:769px){

  .kob-main-footer{
    min-height:300px;

    padding:
      48px
      34px
      30px;
  }


  .kob-main-footer-inner{
    grid-template-columns:
      .95fr
      .85fr
      1.2fr;

    gap:30px;
  }


  .kob-main-footer-brand img{
    width:140px;
  }


  .kob-main-footer-brand span{
    font-size:11px;
  }


  .kob-main-footer-item{
    min-height:95px;

    padding-left:22px;

    gap:15px;
  }


  .kob-main-footer-icon{
    width:48px;
    height:48px;
  }


  .kob-main-footer-icon svg{
    width:23px;
    height:23px;
  }


  .kob-main-footer-copy strong{
    font-size:15px;
  }


  .kob-main-footer-copy small{
    font-size:10.5px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .kob-main-footer{
    min-height:auto;

    padding:
      52px
      20px
      30px;
  }


  .kob-main-footer-inner{
    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:0;
  }


  /* =======================================================
     MARCA
  ======================================================== */

  .kob-main-footer-brand{
    justify-content:center;

    flex-direction:column;

    gap:8px;

    padding-bottom:34px;

    text-align:center;
  }


  .kob-main-footer-brand img{
    width:175px;
  }


  .kob-main-footer-brand span{
    max-width:none;

    font-size:11px;

    line-height:1.5;
  }


  /* =======================================================
     ITEMS
  ======================================================== */

  .kob-main-footer-item{
    min-height:100px;

    padding:
      18px 6px;

    border-left:0;

    border-top:
      2px solid rgba(5,20,7,.22);

    gap:18px;
  }


  .kob-main-footer-icon{
    width:52px;
    height:52px;
  }


  .kob-main-footer-icon svg{
    width:25px;
    height:25px;
  }


  .kob-main-footer-copy strong{
    font-size:16px;
  }


  .kob-main-footer-copy small{
    font-size:11.5px;
  }


  /* =======================================================
     PARTE INFERIOR
  ======================================================== */

  .kob-main-footer-bottom{
    margin-top:18px;

    padding-top:22px;

    flex-direction:column;

    align-items:center;

    gap:13px;

    text-align:center;

    font-size:9px;
  }


  .kob-main-footer-bottom-line{
    width:70px;

    height:2px;

    flex:none;
  }


  .kob-main-footer-made{
    white-space:normal;
  }

}

/* =========================================================
   FOOTER · KOBLENZ
   VERDE CORPORATIVO · VERSIÓN ACTUALIZADA
========================================================= */

.kob-main-footer{
  position:relative;

  width:100%;

  min-height:360px;

  padding:
    62px
    clamp(54px,6vw,96px)
    34px;

  overflow:hidden;
  isolation:isolate;

  color:#071008;

  background:

    radial-gradient(
      ellipse at 23% 0%,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.055) 32%,
      transparent 58%
    ),

    radial-gradient(
      ellipse at 87% 90%,
      rgba(0,45,5,.18) 0%,
      transparent 50%
    ),

    linear-gradient(
      115deg,
      #2ac231 0%,
      #19aa21 42%,
      #119718 72%,
      #0b8111 100%
    );

  border-top:
    2px solid rgba(255,255,255,.18);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 22px 42px -30px rgba(255,255,255,.20),
    0 -14px 36px rgba(8,70,13,.14);
}


/* =========================================================
   TEXTURA
========================================================= */

.kob-main-footer::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  pointer-events:none;

  opacity:.20;

  background-image:
    radial-gradient(
      circle,
      rgba(5,20,7,.27) 0 .9px,
      transparent 1.2px
    );

  background-size:
    19px 19px;
}


/* =========================================================
   CONTENIDO PRINCIPAL
========================================================= */

.kob-main-footer-inner{
  position:relative;

  z-index:3;

  width:100%;

  display:grid;

  grid-template-columns:
    1.22fr
    .86fr
    1.08fr;

  align-items:center;

  gap:
    clamp(42px,5vw,82px);
}


/* =========================================================
   MARCA
========================================================= */

.kob-main-footer-brand{
  min-width:0;

  display:flex;

  align-items:center;

  gap:22px;
}


/* =========================================================
   LOGO
========================================================= */

.kob-main-footer-brand img{
  display:block;

  width:
    clamp(180px,12vw,225px);

  height:auto;

  object-fit:contain;

  filter:
    brightness(.16)
    saturate(.65)
    contrast(1.42);
}


/* =========================================================
   TEXTO MARCA
========================================================= */

.kob-main-footer-brand-text{
  display:flex;

  flex-direction:column;

  gap:5px;
}


.kob-main-footer-brand-text strong{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(22px,1.75vw,30px);

  font-weight:950;

  line-height:1;

  letter-spacing:.20em;

  color:#050d06;

  text-transform:uppercase;
}


.kob-main-footer-brand-text span{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(11px,.9vw,14px);

  font-weight:900;

  line-height:1.4;

  letter-spacing:.25em;

  color:
    rgba(5,13,6,.82);

  text-transform:uppercase;
}


/* =========================================================
   BLOQUES DE INFORMACIÓN
========================================================= */

.kob-main-footer-item{
  position:relative;

  min-height:118px;

  display:flex;

  align-items:center;

  gap:26px;

  padding-left:
    clamp(28px,2.6vw,42px);

  border-left:
    2px solid rgba(4,22,7,.25);

  transition:
    transform .3s ease;
}


.kob-main-footer-item:hover{
  transform:
    translateY(-3px);
}


/* =========================================================
   ICONOS
========================================================= */

.kob-main-footer-icon{
  width:66px;
  height:66px;

  flex:0 0 auto;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    rgba(7,20,9,.12);

  border:
    2px solid rgba(6,22,8,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 12px rgba(0,0,0,.07);

  color:#061007;
}


.kob-main-footer-icon svg{
  width:31px;
  height:31px;

  fill:none;

  stroke:currentColor;

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   TEXTOS
========================================================= */

.kob-main-footer-copy{
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:8px;
}


.kob-main-footer-copy strong{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(17px,1.32vw,21px);

  font-weight:950;

  line-height:1.26;

  letter-spacing:-.025em;

  color:#050d06;
}


.kob-main-footer-copy small{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(11.5px,.9vw,14px);

  font-weight:700;

  line-height:1.5;

  color:
    rgba(5,14,6,.70);
}


/* =========================================================
   PARTE INFERIOR
========================================================= */

.kob-main-footer-bottom{
  position:relative;

  z-index:3;

  width:100%;

  margin-top:46px;

  padding-top:26px;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:26px;

  border-top:
    2px solid rgba(5,22,7,.24);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10.5px;

  font-weight:900;

  letter-spacing:.17em;

  text-transform:uppercase;

  color:
    rgba(5,15,7,.66);
}


/* =========================================================
   CARACAS
========================================================= */

.kob-main-footer-bottom > span:first-child{
  justify-self:start;
}


/* =========================================================
   ELIMINAMOS LA LÍNEA NEGRA CENTRAL
========================================================= */

.kob-main-footer-bottom-line{
  display:none !important;
}


/* =========================================================
   DAEVO SOFTWARE CENTRADO
========================================================= */

.kob-main-footer-made{
  grid-column:2;

  justify-self:center;

  text-align:center;

  white-space:nowrap;

  font-size:11px;

  font-weight:900;

  letter-spacing:.18em;
}


.kob-main-footer-made a{
  position:relative;

  margin-left:6px;

  color:#050d06;

  font-weight:950;

  text-decoration:none;
}


/* =========================================================
   QUITAMOS TAMBIÉN EL SUBRAYADO NEGRO DE DAEVO
========================================================= */

.kob-main-footer-made a::after{
  display:none !important;
}


/* =========================================================
   DOTS DECORATIVOS
========================================================= */

.kob-main-footer-dots{
  position:absolute;

  z-index:1;

  right:32px;
  top:28px;

  display:grid;

  grid-template-columns:
    repeat(4,4px);

  gap:8px;

  pointer-events:none;
}


.kob-main-footer-dots span{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#071008;

  opacity:.28;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px) and (min-width:769px){

  .kob-main-footer{
    min-height:330px;

    padding:
      50px
      34px
      30px;
  }


  .kob-main-footer-inner{
    grid-template-columns:
      .98fr
      .88fr
      1.14fr;

    gap:28px;
  }


  .kob-main-footer-brand{
    gap:14px;
  }


  .kob-main-footer-brand img{
    width:155px;
  }


  .kob-main-footer-brand-text strong{
    font-size:20px;
  }


  .kob-main-footer-brand-text span{
    font-size:10px;
  }


  .kob-main-footer-item{
    min-height:100px;

    padding-left:22px;

    gap:15px;
  }


  .kob-main-footer-icon{
    width:54px;
    height:54px;
  }


  .kob-main-footer-icon svg{
    width:26px;
    height:26px;
  }


  .kob-main-footer-copy strong{
    font-size:15px;
  }


  .kob-main-footer-copy small{
    font-size:10.5px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .kob-main-footer{
    min-height:auto;

    padding:
      54px
      20px
      30px;
  }


  .kob-main-footer-inner{
    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:0;
  }


  /* =======================================================
     MARCA
  ======================================================== */

  .kob-main-footer-brand{
    justify-content:center;

    flex-direction:column;

    gap:10px;

    padding-bottom:36px;

    text-align:center;
  }


  .kob-main-footer-brand img{
    width:185px;
  }


  .kob-main-footer-brand-text{
    align-items:center;
  }


  .kob-main-footer-brand-text strong{
    font-size:24px;
  }


  .kob-main-footer-brand-text span{
    font-size:10px;
  }


  /* =======================================================
     ITEMS
  ======================================================== */

  .kob-main-footer-item{
    min-height:108px;

    padding:
      18px 6px;

    border-left:0;

    border-top:
      2px solid rgba(5,20,7,.22);

    gap:18px;
  }


  .kob-main-footer-icon{
    width:58px;
    height:58px;
  }


  .kob-main-footer-icon svg{
    width:28px;
    height:28px;
  }


  .kob-main-footer-copy strong{
    font-size:16px;
  }


  .kob-main-footer-copy small{
    font-size:11.5px;
  }


  /* =======================================================
     PARTE INFERIOR MOBILE
  ======================================================== */

  .kob-main-footer-bottom{
    margin-top:20px;

    padding-top:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    text-align:center;

    font-size:9px;
  }


  .kob-main-footer-bottom > span:first-child{
    align-self:center;
  }


  .kob-main-footer-made{
    text-align:center;

    white-space:normal;

    font-size:9px;
  }

}
/* =========================================================
   TIPS DE LIMPIEZA · KOBLENZ
   OSCURO · EDITORIAL · PREMIUM
========================================================= */

.kob-tips{
  position:relative;

  width:100%;

  min-height:100vh;

  padding:
    58px
    clamp(48px,5vw,82px)
    52px;

  overflow:hidden;
  isolation:isolate;

  color:#f2efe9;

  background:

    radial-gradient(
      ellipse at 20% 12%,
      rgba(113,173,61,.055) 0%,
      transparent 42%
    ),

    radial-gradient(
      ellipse at 82% 78%,
      rgba(255,255,255,.025) 0%,
      transparent 44%
    ),

    linear-gradient(
      145deg,
      #101410 0%,
      #0c100d 48%,
      #080b09 100%
    );
}


/* =========================================================
   TEXTURA MUY SUAVE
========================================================= */

.kob-tips::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:0;

  opacity:.15;

  pointer-events:none;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.18) 0 .55px,
      transparent .8px
    );

  background-size:
    22px 22px;
}


/* =========================================================
   TOPLINE
========================================================= */

.kob-tips-topline{
  position:relative;

  z-index:3;

  display:flex;

  align-items:center;

  gap:20px;

  margin-bottom:
    clamp(36px,3vw,48px);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;

  font-weight:800;

  letter-spacing:.27em;

  text-transform:uppercase;

  color:
    rgba(240,237,231,.48);
}


.kob-tips-topline-line{
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.18),
      rgba(255,255,255,.05)
    );
}


/* =========================================================
   CABECERA
========================================================= */

.kob-tips-heading{
  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(320px,.85fr);

  align-items:end;

  gap:
    clamp(50px,6vw,100px);

  margin-bottom:
    clamp(42px,4vw,64px);
}


/* =========================================================
   KICKER
========================================================= */

.kob-tips-kicker{
  display:block;

  margin-bottom:15px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;

  font-weight:800;

  letter-spacing:.30em;

  text-transform:uppercase;

  color:#71ad3d;
}


/* =========================================================
   TÍTULO
========================================================= */

.kob-tips-heading h2{
  margin:0;

  max-width:760px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(58px,5.3vw,86px);

  line-height:.80;

  font-weight:600;

  letter-spacing:-.052em;

  color:#f2efe9;
}


.kob-tips-heading h2 span{
  display:block;

  color:#71ad3d;
}


/* =========================================================
   TEXTO CABECERA
========================================================= */

.kob-tips-heading-copy{
  max-width:490px;
}


.kob-tips-heading-copy p{
  margin:0;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(13px,.95vw,15px);

  line-height:1.7;

  color:
    rgba(241,238,232,.62);
}


/* =========================================================
   GRID
========================================================= */

.kob-tips-grid{
  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    clamp(24px,2.5vw,38px);
}


/* =========================================================
   CARD
========================================================= */

.kob-tip-card{
  position:relative;

  min-width:0;

  display:flex;

  flex-direction:column;

  padding:
    18px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    34px;

  background:

    radial-gradient(
      ellipse at 85% 10%,
      rgba(255,255,255,.025) 0%,
      transparent 55%
    ),

    linear-gradient(
      145deg,
      #151a16 0%,
      #101511 58%,
      #0c100d 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 26px rgba(0,0,0,.16),
    0 26px 52px rgba(0,0,0,.17);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


.kob-tip-card:hover{
  transform:
    translateY(-7px);

  border-color:
    rgba(113,173,61,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 30px rgba(0,0,0,.20),
    0 34px 64px rgba(0,0,0,.24);
}


/* =========================================================
   TOP CARD
========================================================= */

.kob-tip-card-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;

  padding:
    0 4px;
}


.kob-tip-number{
  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:28px;

  font-weight:600;

  color:
    rgba(241,238,232,.36);
}


.kob-tip-category{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:8px;

  font-weight:800;

  letter-spacing:.24em;

  text-transform:uppercase;

  color:#71ad3d;
}


/* =========================================================
   IMAGEN
========================================================= */

.kob-tip-image{
  position:relative;

  width:100%;

  aspect-ratio:
    1.35 / 1;

  overflow:hidden;

  border-radius:
    24px
    24px
    56px
    24px;

  background:#161b17;
}


.kob-tip-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    saturate(.82)
    contrast(1.03)
    brightness(.92);

  transition:
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .5s ease;
}


.kob-tip-card:hover
.kob-tip-image img{
  transform:
    scale(1.045);

  filter:
    saturate(.92)
    contrast(1.05)
    brightness(.96);
}


/* =========================================================
   CONTENIDO
========================================================= */

.kob-tip-content{
  padding:
    25px 5px
    5px;
}


.kob-tip-content h3{
  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(31px,2.55vw,43px);

  line-height:.9;

  font-weight:600;

  letter-spacing:-.04em;

  color:#f2efe9;
}


.kob-tip-content p{
  margin:
    18px 0 0;

  padding-top:17px;

  border-top:
    1px solid rgba(255,255,255,.08);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(11px,.8vw,13px);

  line-height:1.65;

  color:
    rgba(241,238,232,.56);
}


/* =========================================================
   BOTÓN
========================================================= */

.kob-tip-link{
  margin-top:24px;

  padding:0;

  display:inline-flex;

  align-items:center;

  gap:15px;

  border:0;

  background:transparent;

  color:#f2efe9;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;

  font-weight:800;

  letter-spacing:.16em;

  cursor:pointer;
}


.kob-tip-link-icon{
  width:38px;
  height:38px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.13);

  background:
    rgba(255,255,255,.025);

  color:#71ad3d;

  font-size:14px;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}


.kob-tip-card:hover
.kob-tip-link-icon{
  transform:
    translateY(-2px);

  background:#159b1b;

  color:#fff;

  box-shadow:
    0 8px 18px rgba(8,123,16,.18);
}


/* =========================================================
   FOOTER SECCIÓN
========================================================= */

.kob-tips-footer{
  position:relative;

  z-index:3;

  margin-top:
    clamp(34px,4vw,54px);

  padding-top:20px;

  display:flex;

  align-items:center;

  gap:20px;

  border-top:
    1px solid rgba(255,255,255,.08);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:8px;

  font-weight:800;

  letter-spacing:.23em;

  text-transform:uppercase;

  color:
    rgba(241,238,232,.42);
}


.kob-tips-footer-line{
  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(113,173,61,.12),
      rgba(113,173,61,.34),
      rgba(113,173,61,.12)
    );
}


/* =========================================================
   DOTS
========================================================= */

.kob-tips-dots{
  position:absolute;

  right:28px;
  bottom:28px;

  z-index:1;

  display:grid;

  grid-template-columns:
    repeat(4,3px);

  gap:7px;

  opacity:.28;

  pointer-events:none;
}


.kob-tips-dots span{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#71ad3d;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px) and (min-width:769px){

  .kob-tips{
    padding:
      48px
      30px
      46px;
  }


  .kob-tips-heading{
    gap:45px;
  }


  .kob-tips-grid{
    gap:20px;
  }


  .kob-tip-card{
    padding:14px;
  }


  .kob-tip-content h3{
    font-size:
      clamp(27px,2.6vw,37px);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .kob-tips{
    min-height:auto;

    padding:
      56px
      18px
      64px;
  }


  .kob-tips-topline{
    margin-bottom:34px;

    gap:12px;

    font-size:8px;
  }


  .kob-tips-heading{
    display:block;

    margin-bottom:36px;
  }


  .kob-tips-heading h2{
    font-size:
      clamp(54px,14vw,72px);
  }


  .kob-tips-heading-copy{
    margin-top:24px;

    max-width:430px;
  }


  .kob-tips-heading-copy p{
    font-size:13px;
  }


  .kob-tips-grid{
    grid-template-columns:1fr;

    gap:22px;
  }


  .kob-tip-card{
    padding:14px;

    border-radius:28px;
  }


  .kob-tip-image{
    aspect-ratio:
      1.45 / 1;

    border-radius:
      20px
      20px
      46px
      20px;
  }


  .kob-tip-content{
    padding:
      22px 4px
      6px;
  }


  .kob-tip-content h3{
    font-size:
      clamp(33px,9vw,44px);
  }


  .kob-tip-content p{
    font-size:11.5px;
  }


  .kob-tip-link{
    margin-top:20px;
  }


  .kob-tips-footer{
    margin-top:32px;

    gap:12px;

    font-size:7px;
  }


  .kob-tips-dots{
    display:none;
  }

}
/* =========================================================
   TRABAJA CON NOSOTROS · MODAL
   KOBLENZ
========================================================= */


/* =========================================================
   MODAL BASE
========================================================= */

.kob-job-modal{
  position:fixed !important;
  inset:0 !important;

  z-index:99999 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:28px !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  transition:
    opacity .32s ease,
    visibility .32s ease !important;
}


/* =========================================================
   MODAL ABIERTO
========================================================= */

.kob-job-modal.is-open{
  opacity:1 !important;
  visibility:visible !important;

  pointer-events:auto !important;
}


/* =========================================================
   BACKDROP
========================================================= */

.kob-job-backdrop{
  position:absolute !important;

  inset:0 !important;

  background:
    rgba(5,8,6,.76) !important;

  backdrop-filter:
    blur(13px) !important;

  -webkit-backdrop-filter:
    blur(13px) !important;
}


/* =========================================================
   PANEL
========================================================= */

.kob-job-dialog{
  position:relative !important;

  z-index:2 !important;

  width:
    min(930px,100%) !important;

  max-height:
    calc(100vh - 56px) !important;

  overflow-y:auto !important;

  padding:
    clamp(38px,4vw,62px) !important;

  background:

    radial-gradient(
      ellipse at 82% 10%,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.40) 36%,
      transparent 62%
    ),

    linear-gradient(
      145deg,
      #eeeae2 0%,
      #e5e1d8 50%,
      #dcd8ce 100%
    ) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;

  border-radius:
    78px
    24px
    78px
    24px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(90,80,65,.06),

    0 12px 26px rgba(0,0,0,.16),
    0 34px 72px rgba(0,0,0,.28) !important;

  transform:
    translateY(22px)
    scale(.975) !important;

  transition:
    transform .4s cubic-bezier(.2,.7,.2,1) !important;
}


.kob-job-modal.is-open
.kob-job-dialog{
  transform:
    translateY(0)
    scale(1) !important;
}


/* =========================================================
   ACENTO VERDE
========================================================= */

.kob-job-dialog::before{
  content:"";

  position:absolute;

  left:0;
  top:18%;

  width:6px;
  height:34%;

  border-radius:
    0 8px 8px 0;

  background:
    linear-gradient(
      180deg,
      #71ad3d,
      #159b1b,
      #087b10
    );
}


/* =========================================================
   BOTÓN CERRAR
========================================================= */

.kob-job-close{
  position:absolute !important;

  right:25px !important;
  top:23px !important;

  z-index:5 !important;

  width:46px !important;
  height:46px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  padding:0 !important;

  border:
    1px solid rgba(20,22,20,.16) !important;

  border-radius:50% !important;

  background:
    rgba(255,255,255,.58) !important;

  color:#151815 !important;

  font-size:28px !important;

  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:
    0 6px 16px rgba(0,0,0,.09) !important;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease !important;
}


.kob-job-close:hover{
  transform:
    rotate(6deg) !important;

  background:#159b1b !important;

  color:#fff !important;
}


/* =========================================================
   CABECERA
========================================================= */

.kob-job-head{
  max-width:680px;

  margin-bottom:38px;
}


.kob-job-kicker{
  display:block;

  margin-bottom:12px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;

  font-weight:800;

  letter-spacing:.30em;

  text-transform:uppercase;

  color:#159b1b;
}


.kob-job-head h2{
  margin:0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(58px,5vw,82px);

  line-height:.82;

  font-weight:600;

  letter-spacing:-.05em;

  color:#141714;
}


.kob-job-head h2 span{
  display:block;

  color:#5a5f5a;
}


.kob-job-head p{
  max-width:590px;

  margin:
    24px 0 0;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(13px,.95vw,15px);

  line-height:1.7;

  color:#424742;
}


/* =========================================================
   FORM
========================================================= */

.kob-job-form{
  position:relative;

  z-index:2;
}


.kob-job-row{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    clamp(22px,2vw,30px);
}


.kob-job-field{
  margin-bottom:27px;
}


.kob-job-field label{
  display:block;

  margin-bottom:9px;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9.5px;

  font-weight:800;

  letter-spacing:.15em;

  text-transform:uppercase;

  color:
    rgba(20,22,20,.76);
}


/* =========================================================
   INPUTS
========================================================= */

.kob-job-field input,
.kob-job-field textarea{
  width:100%;

  border:0;

  border-bottom:
    1px solid rgba(20,22,20,.28);

  border-radius:0;

  outline:none;

  background:transparent;

  color:#111411;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(14px,1vw,16px);
}


.kob-job-field input{
  height:46px;

  padding:
    0 0 12px;
}


.kob-job-field textarea{
  min-height:118px;

  padding:
    8px 0 12px;

  line-height:1.65;

  resize:vertical;
}


.kob-job-field input::placeholder,
.kob-job-field textarea::placeholder{
  color:
    rgba(20,22,20,.42);
}


.kob-job-field input:focus,
.kob-job-field textarea:focus{
  border-color:#159b1b;
}


/* =========================================================
   FILE
========================================================= */

.kob-job-file-field
input[type="file"]{
  position:absolute !important;

  width:1px !important;
  height:1px !important;

  opacity:0 !important;

  pointer-events:none !important;
}


.kob-job-file-box{
  min-height:88px;

  margin:0 !important;

  padding:
    14px 15px !important;

  display:grid !important;

  grid-template-columns:
    48px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:16px;

  border:
    1px solid rgba(20,22,20,.15) !important;

  border-radius:20px;

  background:
    rgba(255,255,255,.42);

  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 20px rgba(0,0,0,.05);
}


.kob-job-file-icon{
  width:48px;
  height:48px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    rgba(21,155,27,.10);

  color:#159b1b;

  font-size:22px;

  font-weight:700;
}


.kob-job-file-copy{
  display:flex;

  flex-direction:column;

  gap:4px;
}


.kob-job-file-copy strong{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:13px;

  font-weight:800;

  color:#161916;
}


.kob-job-file-copy small{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;

  font-weight:600;

  color:
    rgba(20,22,20,.52);
}


.kob-job-file-action{
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;

  color:#159b1b;
}


/* =========================================================
   FOOTER FORM
========================================================= */

.kob-job-footer{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:30px;

  margin-top:8px;

  padding-top:24px;

  border-top:
    1px solid rgba(20,22,20,.13);
}


.kob-job-footer p{
  max-width:390px;

  margin:0;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10.5px;

  line-height:1.6;

  color:
    rgba(20,22,20,.60);
}


/* =========================================================
   BOTÓN ENVIAR
========================================================= */

.kob-job-submit{
  min-height:60px;

  padding:
    0 8px
    0 29px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:21px;

  border:0;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #23ae29 0%,
      #159b1b 56%,
      #087b10 100%
    );

  color:#fff;

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:10px;

  font-weight:800;

  letter-spacing:.10em;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(0,75,8,.18),
    0 7px 13px rgba(0,0,0,.18),
    0 15px 28px rgba(8,123,16,.22);
}


.kob-job-submit-icon{
  width:44px;
  height:44px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f5f3ee;

  color:#159b1b;

  font-size:17px;
}


/* =========================================================
   DOTS
========================================================= */

.kob-job-dots{
  position:absolute;

  right:25px;
  bottom:20px;

  display:grid;

  grid-template-columns:
    repeat(4,3px);

  gap:7px;

  opacity:.30;

  pointer-events:none;
}


.kob-job-dots span{
  width:3px;
  height:3px;

  border-radius:50%;

  background:#71ad3d;
}


/* =========================================================
   BLOQUEO DE SCROLL
========================================================= */

body.kob-modal-open{
  overflow:hidden !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .kob-job-modal{
    padding:14px !important;
  }


  .kob-job-dialog{
    max-height:
      calc(100vh - 28px) !important;

    padding:
      42px 22px
      30px !important;

    border-radius:
      48px
      18px
      48px
      18px !important;
  }


  .kob-job-close{
    right:17px !important;
    top:16px !important;

    width:40px !important;
    height:40px !important;

    font-size:24px !important;
  }


  .kob-job-head{
    padding-right:35px;

    margin-bottom:30px;
  }


  .kob-job-head h2{
    font-size:
      clamp(48px,13vw,66px);
  }


  .kob-job-row{
    grid-template-columns:1fr;
  }


  .kob-job-file-box{
    grid-template-columns:
      44px
      minmax(0,1fr);
  }


  .kob-job-file-action{
    grid-column:2;
  }


  .kob-job-footer{
    flex-direction:column;

    align-items:flex-start;

    gap:20px;
  }

}