.hero {
position: relative;
isolation: isolate;
background: var(--ink);
color: var(--papel);
overflow: hidden;}
.hero__fondo {
position: absolute; inset: 0; z-index: 0;}
.hero__fondo picture,
.hero__fondo img {
display: block;
width: 100%; height: 100%;
-o-object-fit: cover; object-fit: cover;
-o-object-position: center 42%; object-position: center 42%;}
.hero__fondo::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(103deg, rgba(8,20,15,.94) 0%, rgba(8,20,15,.86) 34%, rgba(8,20,15,.55) 64%, rgba(8,20,15,.42) 100%),
linear-gradient(180deg, rgba(8,20,15,.55) 0%, rgba(8,20,15,.18) 38%, rgba(8,20,15,.72) 100%);}
@media (max-width: 900px) {
.hero__fondo::after {
background: linear-gradient(180deg, rgba(8,20,15,.86) 0%, rgba(8,20,15,.72) 42%, rgba(8,20,15,.90) 100%);}}
.hero::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background-image:
linear-gradient(to right, rgba(241,243,238,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(241,243,238,.055) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(ellipse 110% 75% at 25% 15%, #000 15%, transparent 72%);
mask-image: radial-gradient(ellipse 110% 75% at 25% 15%, #000 15%, transparent 72%);}
.hero__inner {
position: relative; z-index: 2;
display: grid;
gap: clamp(2rem, 1rem + 4vw, 3.5rem);
padding-top: clamp(3rem, 1.5rem + 6vw, 6rem);
padding-bottom: clamp(3rem, 1.5rem + 6vw, 5.5rem);
align-items: center;}
@media (min-width: 1024px) {
.hero__inner {
grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
gap: clamp(2.5rem, 1rem + 5vw, 5rem);}}
.hero__copy { max-width: 40rem; }
.hero__badge {
display: inline-flex; align-items: center; gap: .55rem;
padding: .4rem .75rem .4rem .4rem;
background: rgba(241,243,238,.1);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(241,243,238,.22);
border-radius: var(--r-full);
font-size: var(--fs-xs); color: rgba(241,243,238,.92);}
.hero__badge b { font-weight: 600; color: var(--papel); }
.hero__badge-pill {
display: inline-flex; align-items: center; gap: .3rem;
background: var(--ambar); color: var(--ink);
padding: .25rem .6rem; border-radius: var(--r-full);
font-family: var(--font-mono); font-size: var(--fs-micro);
letter-spacing: .07em; text-transform: uppercase; font-weight: 600;}
.hero__badge-pill svg { width: 14px; height: 14px; }
.hero__badge-sep { color: rgba(241,243,238,.35); }
.hero h1 {
margin-top: 1.35rem;
color: var(--papel);
text-shadow: 0 2px 24px rgba(8,20,15,.45);}
.hero__sub {
margin-top: 1.2rem; max-width: 44ch;
font-size: var(--fs-lg); line-height: 1.6;
color: rgba(241,243,238,.86);}
.hero__ctas {
margin-top: 1.9rem;
display: flex; flex-wrap: wrap; gap: .75rem;}
.pestpick { margin-top: 2.25rem; }
.pestpick__label {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
font-family: var(--font-mono); font-size: var(--fs-xs);
letter-spacing: .12em; text-transform: uppercase;
color: rgba(241,243,238,.7);
padding-bottom: .7rem; margin-bottom: .9rem;
border-bottom: 1px dashed rgba(241,243,238,.22);}
.pestpick__label b { color: var(--ambar); font-weight: 500; }
.pestpick__list {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: .5rem;}
@media (min-width: 560px) { .pestpick__list { grid-template-columns: repeat(8, minmax(0,1fr)); } }
@media (min-width: 1024px) { .pestpick__list { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .55rem; } }
@media (min-width: 1280px) { .pestpick__list { grid-template-columns: repeat(8, minmax(0,1fr)); } }
.pest {
display: flex; flex-direction: column; align-items: center; gap: .35rem;
padding: .7rem .25rem .55rem;
min-height: 62px;
background: rgba(12,31,23,.55);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(241,243,238,.26);
border-radius: var(--r-sm);
color: var(--papel);
-webkit-transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), -webkit-transform var(--t-fast) var(--ease);
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);}
.pest svg { width: 22px; height: 22px; color: #9BD0B4; -webkit-transition: color var(--t-fast); transition: color var(--t-fast); }
.pest span {
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em;
text-transform: uppercase; text-align: center; line-height: 1.25;}
.pest:hover {
-webkit-transform: translateY(-3px); transform: translateY(-3px);
background: rgba(241,243,238,.16); border-color: rgba(241,243,238,.4);}
.pest:hover svg { color: var(--ambar); }
.pest.is-on {
background: var(--papel); border-color: var(--papel); color: var(--ink);
box-shadow: var(--sh-2);}
.pest.is-on svg { color: var(--verde); }
.ficha {
position: relative;
background: var(--blanco);
border-radius: var(--r-md);
box-shadow: var(--sh-3);
overflow: hidden;
color: var(--ink);}
@media (min-width: 1024px) { .ficha { justify-self: end; width: min(340px, 100%); } }
.ficha__band {
height: 6px; background: var(--cat-insecticidas);
-webkit-transition: background-color var(--t) var(--ease); transition: background-color var(--t) var(--ease);}
.ficha__head {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .9rem 1.1rem .7rem;
border-bottom: 1px dashed var(--linea);}
.ficha__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.ficha__code { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--gris-2); }
.ficha__body { padding: .9rem 1.1rem 1.1rem; }
.ficha__row {
display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
padding: .4rem 0;
font-size: var(--fs-xs);}
.ficha__row + .ficha__row { border-top: 1px solid var(--papel-2); }
.ficha__k { font-family: var(--font-mono); color: var(--gris); letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-micro); }
.ficha__v { font-weight: 600; text-align: right; }
.ficha__v--verde { color: var(--verde); }
.ficha__cta {
margin-top: .9rem;
display: flex; flex-direction: column; gap: .5rem;}
.ficha__cta > .btn { margin: 0; }
.ficha__note { margin-top: .65rem; font-size: 10px; color: var(--gris-2); text-align: center; line-height: 1.4; }
.stats {
position: relative; z-index: 2;
background: rgba(8,20,15,.55);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid rgba(241,243,238,.14);}
.stats__list {
display: grid; grid-template-columns: repeat(2, minmax(0,1fr));}
@media (min-width: 780px) { .stats__list { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat {
padding: 1.35rem var(--s-2);
text-align: center;
border-right: 1px solid rgba(241,243,238,.14);
border-bottom: 1px solid rgba(241,243,238,.14);}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 780px) {
.stat { border-bottom: 0; padding: 1.6rem var(--s-2); }
.stat:nth-child(2n) { border-right: 1px solid rgba(241,243,238,.14); }
.stat:last-child { border-right: 0; }}
.stat__num {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
letter-spacing: -.04em; line-height: 1; color: var(--papel);
font-variant-numeric: tabular-nums;}
.stat__num sup { font-size: .5em; vertical-align: super; color: var(--ambar); }
.stat__label {
margin-top: .45rem;
font-family: var(--font-mono); font-size: var(--fs-micro);
letter-spacing: .1em; text-transform: uppercase; color: rgba(241,243,238,.68);}
@-webkit-keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); }}
.nav__link.is-current { color: var(--verde); font-weight: 600; }
.nav__link.is-current::after { -webkit-transform: scaleX(1); transform: scaleX(1); }
.mobile-nav__link.is-current { color: var(--ambar); }
.mobile-nav__link.is-current .mobile-nav__num { color: var(--ambar); }
.beneficios { background: var(--blanco); }
.ben-grid {
display: grid; gap: var(--gutter);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));}
.ben {
position: relative;
padding-top: 1.4rem;
border-top: 2px solid var(--linea);
-webkit-transition: border-color var(--t) var(--ease);
transition: border-color var(--t) var(--ease);}
.ben::after {
content: ""; position: absolute; top: -2px; left: 0; width: 0; height: 2px;
background: var(--verde);
-webkit-transition: width var(--t-slow) var(--ease-out);
transition: width var(--t-slow) var(--ease-out);}
.ben:hover::after { width: 100%; }
.ben__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; margin-bottom: .9rem;
border-radius: var(--r-sm);
background: var(--verde-100); color: var(--verde);}
.ben h3 { font-size: var(--fs-lg); margin-bottom: .45rem; }
.ben p { font-size: var(--fs-sm); color: var(--gris); }
.destacados { background: var(--papel); }
.prod-grid.prod-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .prod-grid.prod-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prod-grid.prod-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) {
.prod-grid.prod-grid--home .prod__body { padding: .7rem .65rem .8rem; gap: .3rem; }
.prod-grid.prod-grid--home .prod__name { font-size: .875rem; }
.prod-grid.prod-grid--home .prod__price b { font-size: 1rem; }
.prod-grid.prod-grid--home .prod__format { font-size: 10px; }
.prod-grid.prod-grid--home .prod__meta { flex-wrap: wrap; gap: .2rem; }
.prod-grid.prod-grid--home .prod__add { width: 36px; height: 36px; }
.prod-grid.prod-grid--home .prod__foot { padding-top: .55rem; }}
.categorias { background: var(--blanco); }
.cat-grid {
display: grid; gap: .6rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));}
.cat-tile {
display: flex; align-items: center; gap: .9rem;
min-height: 74px; padding: .9rem 1rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-sm);
border-left: 3px solid var(--cat, var(--verde));
-webkit-transition: -webkit-transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);}
.cat-tile:hover {
-webkit-transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--sh-2); background: var(--papel);}
.cat-tile__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex: none;
border-radius: var(--r-xs);
background: var(--papel); color: var(--cat, var(--verde));}
.cat-tile__t { display: flex; flex-direction: column; min-width: 0; }
.cat-tile__t b {
font-family: var(--font-display); font-size: var(--fs-base);
font-weight: 700; letter-spacing: -.02em;}
.cat-tile__t span {
font-size: var(--fs-xs); color: var(--gris); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;}
.cat-tile__n {
margin-left: auto; flex: none;
font-family: var(--font-mono); font-size: var(--fs-xs);
color: var(--gris-2);}
.prueba { background: var(--papel); overflow: hidden; }
.prueba__top {
display: grid; gap: var(--s-2);
margin-bottom: var(--gutter);
padding: 1.25rem;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-md);}
@media (min-width: 820px) {
.prueba__top { grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; padding: 1.5rem 1.75rem; }}
.prueba__score {
display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
padding-bottom: 1rem; border-bottom: 1px dashed var(--linea);}
@media (min-width: 820px) {
.prueba__score {
padding-bottom: 0; padding-right: var(--s-4);
border-bottom: 0; border-right: 1px dashed var(--linea);}}
.prueba__score b {
font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink);}
.prueba__score > span:last-child {
font-family: var(--font-mono); font-size: var(--fs-micro);
letter-spacing: .06em; color: var(--gris);}
.prueba__cifras {
display: grid; gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));}
.prueba__cifras b {
display: block;
font-family: var(--font-display); font-size: var(--fs-xl);
font-weight: 800; letter-spacing: -.03em; color: var(--verde);}
.prueba__cifras span {
font-size: var(--fs-xs); color: var(--gris); line-height: 1.4;}
.prueba__medios {
display: grid; gap: .6rem; margin-top: var(--gutter);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));}
.prueba__medios li {
padding: .85rem 1rem;
background: var(--blanco);
border: 1px solid var(--linea); border-radius: var(--r-sm);}
.prueba__medios b {
display: block;
font-family: var(--font-mono); font-size: var(--fs-micro);
letter-spacing: .08em; text-transform: uppercase; color: var(--verde);
margin-bottom: .3rem;}
.prueba__medios span { font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; }
.franq-teaser {
position: relative; overflow: hidden;
background: var(--ink); color: var(--papel);
padding-top: var(--pad-section); padding-bottom: var(--pad-section);}
.franq-teaser__bg {
position: absolute; inset: 0; width: 100%; height: 100%;
-o-object-fit: cover; object-fit: cover; opacity: .28;}
.franq-teaser::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, var(--ink) 34%, rgba(12,31,23,.72) 78%, rgba(12,31,23,.45) 100%);}
.franq-teaser__inner {
position: relative; z-index: 2;
display: grid; gap: var(--gutter); align-items: center;}
@media (min-width: 900px) {
.franq-teaser__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 4rem); }}
.franq-teaser__copy h2 { color: var(--papel); font-size: var(--fs-3xl); margin: .75rem 0 1rem; }
.franq-teaser__copy > p { color: rgba(241,243,238,.78); max-width: 50ch; margin-bottom: 1.5rem; }
.franq-teaser__copy .franq__list { margin-bottom: 1.75rem; }
.franq-teaser__nums {
display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1px;
background: rgba(241,243,238,.14);
border: 1px solid rgba(241,243,238,.14);
border-radius: var(--r-md); overflow: hidden;}
.franq-teaser__nums li { background: var(--ink); padding: 1.1rem 1.2rem; }
.franq-teaser__nums b {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.3rem, 1rem + 1.5vw, 1.85rem);
letter-spacing: -.035em; line-height: 1.05; color: var(--ambar);}
.franq-teaser__nums span {
display: block; margin-top: .3rem;
font-family: var(--font-mono); font-size: var(--fs-micro);
letter-spacing: .09em; text-transform: uppercase; color: rgba(241,243,238,.55);}
.wa-embed {
display: flex; flex-direction: column;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-1);}
.wa-embed__head {
display: flex; align-items: center; gap: .8rem;
padding: 1rem 1.15rem;
background: #0F5132; color: #fff;}
.wa-embed__av {
position: relative; flex: none;
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.16);}
.wa-embed__av i {
position: absolute; right: -1px; bottom: -1px;
width: 12px; height: 12px; border-radius: 50%;
background: #4ADE80; border: 2px solid #0F5132;}
.wa-embed__head b { display: block; font-size: var(--fs-base); font-weight: 600; }
.wa-embed__head span { font-size: var(--fs-xs); color: rgba(255,255,255,.78); }
.wa-embed__estado {
margin-left: auto; flex: none; align-self: flex-start;
font-family: var(--font-mono); font-size: 9.5px;
letter-spacing: .08em; text-transform: uppercase;
color: #4ADE80;}
.wa-embed__body {
padding: 1.1rem 1.15rem;
background:
radial-gradient(circle at 15% 8%, rgba(20,102,63,.05), transparent 45%),
var(--papel);
flex: 1 1 auto;}
.wa-embed__foot {
display: flex; align-items: center; gap: .75rem;
padding: .9rem 1.15rem .5rem;
background: var(--blanco);
border-top: 1px solid var(--linea);}
.wa-embed__foot .btn { flex: 1 1 auto; }
.wa-embed .wa-legal { padding: 0 1.15rem 1rem; background: var(--blanco); margin: 0; }
.wa-embed .wa-step h3 { font-size: var(--fs-base); margin-bottom: .2rem; }
.wa-embed .wa-bubble { max-width: 100%; }
@media (min-width: 560px) {
.wa-embed .wa-opts { grid-template-columns: repeat(2, minmax(0,1fr)); }}
.form.form--mini {
padding: 0; background: transparent; border: 0; border-radius: 0;
display: grid; gap: .7rem;}
.form.form--mini .field label { color: rgba(241,243,238,.62); }
.form.form--mini .field input,
.form.form--mini .field textarea,
.form.form--mini .field select {
background: rgba(255,255,255,.07);
border-color: rgba(241,243,238,.18);
color: var(--papel);}
.form.form--mini .field input::-webkit-input-placeholder,
.form.form--mini .field textarea::-webkit-input-placeholder { color: rgba(241,243,238,.72); }
.form.form--mini .field input::placeholder,
.form.form--mini .field textarea::placeholder { color: rgba(241,243,238,.72); }
.form.form--mini .field input:focus,
.form.form--mini .field textarea:focus {
border-color: var(--ambar); background: rgba(255,255,255,.12);
box-shadow: 0 0 0 3px rgba(242,162,12,.18);}
.form.form--mini .field textarea { min-height: 84px; }
.form.form--mini .form__consent { color: rgba(241,243,238,.6); }
.form.form--mini .form__consent a { color: var(--ambar); }
.form.form--mini .form__consent input { background: rgba(255,255,255,.1); border-color: rgba(241,243,238,.3); }
.form.form--mini .form__ok {
background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.35);
color: var(--papel);}
.form.form--mini .form__ok svg { color: #4ADE80; }
#c-ok-err { display: none; }
.form.form--mini .field.has-error input,
.form.form--mini .field.has-error textarea { border-color: #FF8A75; background: rgba(196,54,31,.12); }
@media (min-width: 940px) {
.contacto .contact__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }}
.cbox--fold { padding: 0; overflow: hidden; }
.cbox--fold > summary {
display: flex; align-items: center; gap: 1rem;
padding: 1.1rem 1.25rem;
font-size: var(--fs-sm); color: rgba(241,243,238,.82);
line-height: 1.5;
-webkit-transition: background-color var(--t-fast) var(--ease);
transition: background-color var(--t-fast) var(--ease);}
.cbox--fold > summary b { color: var(--papel); font-weight: 600; }
.cbox--fold > summary:hover { background: rgba(255,255,255,.05); }
.cbox__fold-ico {
margin-left: auto; flex: none;
width: 28px; height: 28px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.1); color: var(--ambar);
-webkit-transition: -webkit-transform var(--t) var(--ease);
transition: transform var(--t) var(--ease);}
.cbox--fold[open] .cbox__fold-ico { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.cbox--fold > .form { padding: 0 1.25rem 1.25rem; }
.cbox--fold > .form__ok { margin: 0 1.25rem 1.25rem; }
.contacto .contact__grid { align-items: start; }
.contact__aside { align-content: start; }