@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
  :root {
  --green:#07863f;
  --green2:#0da34e;
  --dark:#111315;
  --muted:#68716d;
  --line:#e5e9e6;
  --pale:#eff8f1;
  --white:#fff;
  --shadow:0 10px 30px rgba(17,19,21,.09)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--dark);
  background:#fff
}

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

button,input,textarea,select {
  font:inherit
}

.container {
  width:min(1240px,92%);
  margin:auto
}

.topbar {
  height:27px;
  background:#f5f7f6;
  border-bottom:1px solid #e4e8e5;
  font-size:10px;
  color:#3e4842;
  display:flex;
  align-items:center
}

.topbar .container {
  display:flex;
  justify-content:space-between;
  gap:15px
}

.top-info {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}

.social {
  display:flex;
  gap:13px;
  font-weight:800
}

.main-header {
  height:66px;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky;
  top:0;
  z-index:50
}

.nav-wrap {
  height:100%;
  display:flex;
  align-items:center;
  gap:28px
}

.logo {
  display:block;
  min-width:180px;
  line-height:.88
}

.logo-mark {
  font-size:31px;
  letter-spacing:-2px;
  font-weight:900;
  color:#121416;
  position:relative
}

.logo-mark:before {
  content:'';
  position:absolute;
  left:0;
  top:1px;
  width:17px;
  height:5px;
  background:var(--green);
  transform:skew(-35deg)
}

.logo-mark span {
  color:var(--green)
}

.logo-tag {
  font-size:10px;
  letter-spacing:.3px;
  margin-left:37px;
  margin-top:5px;
  color:#424944
}

.nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex:1
}

.nav a {
  font-size:12px;
  font-weight:600;
  padding:25px 0 22px;
  border-bottom:3px solid transparent
}

.nav a.active,.nav a:hover {
  color:var(--green);
  border-color:var(--green)
}

.search {
  height:34px;
  display:flex;
  border:1px solid #dce2de;
  border-radius:5px;
  overflow:hidden;
  min-width:150px
}

.search input {
  border:0;
  outline:0;
  width:122px;
  padding:0 10px;
  font-size:11px
}

.search button {
  border:0;
  background:var(--green);
  color:white;
  width:35px;
  cursor:pointer
}

.mobile-toggle {
  display:none;
  border:0;
  background:var(--green);
  color:white;
  border-radius:5px;
  padding:9px 11px
}

.hero {
  background:linear-gradient(90deg,#f2f7f3 0%,#fff 46%,#eaf7ee 100%);
  overflow:hidden
}

.hero-grid {
  min-height:355px;
  display:grid;
  grid-template-columns:1fr 1.06fr;
  align-items:center;
  gap:32px;
  padding:26px 0 24px
}

.eyebrow {
  color:var(--green);
  font-size:12px;
  letter-spacing:1.2px;
  font-weight:800;
  text-transform:uppercase
}

.hero h1 {
  font-size:clamp(32px,4vw,54px);
  line-height:.98;
  letter-spacing:-2px;
  margin:13px 0 12px;
  font-weight:900;
  text-transform:uppercase
}

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

.hero p {
  font-size:15px;
  line-height:1.55;
  color:#343b37;
  max-width:490px;
  margin:0 0 20px
}

.hero-image {
  height:300px;
  border-radius:7px 7px 7px 7px;
  background:#e4ebe6;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow)
}

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

.image-label {
  position:absolute;
  right:0;
  bottom:16px;
  background:var(--green);
  color:white;
  padding:14px 19px;
  border-radius:8px 0 0 8px;
  box-shadow:var(--shadow)
}

.image-label strong {
  display:block;
  font-size:17px
}

.image-label span {
  font-size:11px
}

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

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--green);
  background:var(--green);
  color:white;
  padding:12px 17px;
  border-radius:7px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:.2s
}

.btn:hover {
  background:#056e33;
  transform:translateY(-1px)
}

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

.trust-row {
  display:flex;
  gap:19px;
  flex-wrap:wrap;
  margin-top:22px;
  font-size:11px;
  color:#56615b
}

.trust-row span:before {
  content:'✓';
  margin-right:5px;
  color:var(--green);
  font-weight:900
}

.benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:-3px;
  position:relative;
  z-index:2
}

.benefit {
  background:#fff;
  border:1px solid #edf0ed;
  box-shadow:0 4px 15px #1111110b;
  padding:13px;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:7px
}

.benefit .ico {
  width:32px;
  height:32px;
  border-radius:7px;
  background:#e9f6ed;
  color:var(--green);
  display:grid;
  place-items:center;
  font-size:19px;
  flex-shrink:0
}

.benefit strong {
  font-size:11px;
  display:block
}

.benefit small {
  font-size:10px;
  color:var(--muted)
}

.section {
  padding:38px 0
}

.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:15px;
  margin-bottom:19px
}

.section-head h2 {
  font-size:25px;
  line-height:1;
  margin:0;
  text-transform:uppercase;
  letter-spacing:-.7px
}

.section-head h2 span {
  color:var(--green)
}

.section-head p {
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px
}

.text-link {
  font-size:12px;
  color:var(--green);
  font-weight:800
}

.category-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px
}

.category-card {
  border:1px solid #e6ebe7;
  border-radius:8px;
  overflow:hidden;
  background:white;
  transition:.2s
}

.category-card:hover,.product-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow)
}

.category-card img {
  width:100%;
  height:104px;
  object-fit:cover;
  background:#f1f5f2;
  display:block
}

.category-card .cat-info {
  padding:10px
}

.category-card strong {
  display:block;
  font-size:11px;
  line-height:1.3;
  min-height:29px;
  text-transform:uppercase
}

.circle-arrow {
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border-radius:50%;
  background:var(--green);
  color:white;
  margin-top:8px;
  font-size:13px
}

.promo-banner {
  background:linear-gradient(105deg,#101c18 0%,#087c3a 50%,#eaf6ed 100%);
  color:white;
  min-height:130px;
  border-radius:8px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  padding:18px 28px;
  gap:15px;
  position:relative
}

.promo-banner h2 {
  font-size:29px;
  line-height:.95;
  margin:0;
  text-transform:uppercase
}

.promo-banner h2 span {
  display:block;
  color:#8ff0a9
}

.promo-banner p {
  font-size:12px;
  line-height:1.5
}

.promo-banner img {
  width:100%;
  height:110px;
  object-fit:contain;
  mix-blend-mode:normal
}

.promo-banner .btn {
  background:#a6ef4d;
  border-color:#a6ef4d;
  color:#102016
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

.product-card {
  border:1px solid #e4e9e5;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  transition:.2s;
  position:relative
}

.product-card img {
  width:100%;
  height:145px;
  object-fit:contain;
  background:#f6f8f6;
  padding:10px
}

.product-card .product-info {
  padding:12px
}

.pill {
  display:inline-block;
  background:#fff0e5;
  color:#e56c20;
  font-size:9px;
  font-weight:800;
  padding:4px 6px;
  border-radius:3px;
  text-transform:uppercase
}

.product-card h3 {
  font-size:12px;
  margin:8px 0 3px
}

.product-card .desc {
  font-size:10px;
  color:var(--muted);
  margin:0 0 9px
}

.price {
  font-size:15px;
  font-weight:900;
  margin-bottom:9px
}

.product-card .btn {
  width:100%;
  padding:9px;
  font-size:11px
}

.offer-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px
}

.offer-card {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  position:relative
}

.discount {
  position:absolute;
  top:10px;
  left:10px;
  background:#ee3046;
  color:white;
  font-size:11px;
  font-weight:900;
  padding:7px;
  border-radius:4px;
  z-index:2
}

.offer-card img {
  width:100%;
  height:130px;
  object-fit:contain;
  background:#f7f8f7;
  padding:12px
}

.offer-card .product-info {
  padding:11px
}

.offer-card h3 {
  font-size:12px;
  margin:0 0 7px
}

.old-price {
  font-size:10px;
  color:#8a928d;
  text-decoration:line-through
}

.offer-card .price {
  color:var(--green);
  margin:3px 0 9px
}

.page-hero {
  background:linear-gradient(90deg,#f4f8f5,#fff 54%,#eaf7ee);
  padding:27px 0
}

.page-hero-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  align-items:center;
  gap:20px
}

.page-hero h1 {
  font-size:36px;
  line-height:1.0;
  margin:0 0 8px;
  letter-spacing:-1.3px;
  text-transform:uppercase
}

.page-hero h1 span {
  color:var(--green)
}

.page-hero p {
  font-size:12px;
  max-width:430px;
  line-height:1.5;
  color:#46504a
}

.page-hero img {
  height:130px;
  width:100%;
  object-fit:contain
}

.catalog-layout {
  display:grid;
  grid-template-columns:215px 1fr;
  gap:18px
}

.sidebar {
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px;
  height:max-content
}

.sidebar h3 {
  font-size:12px;
  text-transform:uppercase;
  margin:0 0 10px
}

.side-link {
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid #eef1ee;
  font-size:11px;
  color:#45504a
}

.side-link:hover {
  color:var(--green)
}

.filters {
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid var(--line)
}

.filters label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  margin:10px 0;
  color:#4b554f
}

.filters input {
  accent-color:var(--green)
}

.catalog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
  font-size:11px;
  color:var(--muted)
}

.catalog-top select {
  border:1px solid var(--line);
  border-radius:5px;
  padding:8px;
  background:white;
  font-size:11px
}

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

.service-list {
  display:grid;
  gap:12px
}

.service-row {
  display:grid;
  grid-template-columns:62px 1fr 180px;
  gap:16px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  padding:14px
}

.service-icon {
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--green);
  color:white;
  display:grid;
  place-items:center;
  font-size:25px
}

.service-row:nth-child(2) .service-icon {
  background:#ed1466
}

.service-row:nth-child(3) .service-icon {
  background:#1687d9
}

.service-row:nth-child(4) .service-icon {
  background:#f08a22
}

.service-row h3 {
  margin:0 0 4px;
  font-size:14px
}

.service-row p {
  font-size:11px;
  color:var(--muted);
  margin:0 0 7px
}

.checks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
  font-size:10px;
  color:#48534c
}

.checks span:before {
  content:'✓';
  color:var(--green);
  font-weight:900;
  margin-right:6px
}

.service-row img {
  width:100%;
  height:95px;
  object-fit:contain
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center
}

.about-image {
  height:275px;
  border-radius:8px;
  overflow:hidden
}

.about-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.values {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px
}

.value-card {
  text-align:center;
  border:1px solid var(--line);
  padding:18px 10px;
  border-radius:8px
}

.value-card .ico {
  color:var(--green);
  font-size:24px
}

.value-card h3 {
  font-size:12px;
  margin:8px 0 4px
}

.value-card p {
  font-size:10px;
  color:var(--muted);
  margin:0
}

.contact-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr .8fr;
  gap:18px;
  align-items:start
}

.contact-details h2 {
  font-size:24px;
  margin:0 0 9px;
  text-transform:uppercase
}

.contact-details p {
  font-size:12px;
  color:var(--muted);
  line-height:1.5
}

.contact-item {
  display:flex;
  gap:10px;
  align-items:center;
  margin:17px 0;
  font-size:12px
}

.contact-item .ico {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:white;
  border-radius:50%;
  font-size:17px;
  flex-shrink:0
}

.contact-form {
  padding:17px;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 4px 15px #00000008
}

.contact-form label {
  display:block;
  font-size:10px;
  font-weight:700;
  margin-bottom:5px
}

.contact-form input,.contact-form textarea {
  width:100%;
  padding:10px;
  border:1px solid #dfe5e1;
  border-radius:5px;
  margin-bottom:12px;
  font-size:11px;
  outline-color:var(--green)
}

.contact-form textarea {
  min-height:90px;
  resize:vertical
}

.contact-person img {
  width:100%;
  max-height:300px;
  object-fit:contain
}

.footer {
  background:#111315;
  color:#f5f7f5;
  margin-top:28px;
  padding:23px 0 14px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:30px
}

.footer .logo-mark {
  color:#fff;
  font-size:25px
}

.footer .logo-tag {
  color:#d7dfda;
  font-size:9px
}

.footer h4 {
  font-size:11px;
  margin:2px 0 12px
}

.footer a,.footer p {
  display:block;
  font-size:10px;
  color:#c5cdc8;
  margin:7px 0
}

.footer a:hover {
  color:#7be39b
}

.pay-icons {
  display:flex;
  gap:5px;
  flex-wrap:wrap
}

.pay-icons span {
  background:white;
  color:#18221c;
  padding:5px 6px;
  border-radius:3px;
  font-size:9px;
  font-weight:900
}

.copyright {
  border-top:1px solid #313633;
  margin-top:16px;
  padding-top:11px;
  text-align:center;
  color:#8f9992;
  font-size:9px
}

.empty-state {
  padding:30px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:8px;
  grid-column:1/-1
}

.notice {
  background:#f0faf2;
  border:1px solid #d4efdc;
  color:#246d3e;
  border-radius:6px;
  padding:10px;
  font-size:11px;
  margin:12px 0
}

@media(max-width:900px) {
  .nav-wrap {
  gap:14px
}

.logo {
  min-width:145px
}

.logo-mark {
  font-size:27px
}

.nav {
  gap:14px
}

.nav a {
  font-size:11px
}

.search {
  min-width:120px
}

.search input {
  width:90px
}

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

.hero-image {
  height:260px
}

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

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

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

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

.contact-person {
  display:none
}

}

@media(max-width:650px) {
  .topbar {
  height:auto;
  min-height:28px;
  padding:5px 0
}

.topbar .container {
  align-items:center
}

.top-info {
  gap:8px
}

.top-info span:nth-child(2) {
  display:none
}

.social {
  display:none
}

.main-header {
  height:auto;
  min-height:62px
}

.nav-wrap {
  flex-wrap:wrap;
  justify-content:space-between;
  padding:9px 0
}

.logo {
  min-width:150px
}

.mobile-toggle {
  display:block
}

.nav {
  display:none;
  order:4;
  flex-basis:100%;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:6px 0
}

.nav.open {
  display:flex
}

.nav a {
  padding:12px 4px;
  border-bottom:1px solid var(--line)
}

.search {
  min-width:100%;
  order:5;
  display:none
}

.search.open {
  display:flex
}

.search input {
  width:100%;
  flex:1
}

.hero-grid {
  grid-template-columns:1fr;
  gap:17px;
  padding:24px 0
}

.hero h1 {
  font-size:39px
}

.hero p {
  font-size:13px
}

.hero-image {
  height:230px;
  order:-1
}

.trust-row {
  gap:10px;
  margin-top:16px
}

.benefits {
  grid-template-columns:1fr 1fr;
  gap:7px
}

.benefit {
  padding:10px;
  gap:8px
}

.benefit strong {
  font-size:10px
}

.benefit small {
  font-size:9px
}

.section {
  padding:28px 0
}

.section-head h2 {
  font-size:21px
}

.category-grid {
  grid-template-columns:repeat(2,1fr);
  gap:9px
}

.category-card img {
  height:110px
}

.promo-banner {
  grid-template-columns:1fr 1fr;
  padding:17px;
  min-height:120px
}

.promo-banner h2 {
  font-size:23px
}

.promo-banner p {
  font-size:10px
}

.promo-banner img {
  display:none
}

.promo-banner .btn {
  font-size:10px;
  padding:9px
}

.product-grid,.offer-grid {
  grid-template-columns:repeat(2,1fr);
  gap:9px
}

.product-card img {
  height:115px
}

.product-card .product-info {
  padding:9px
}

.product-card h3,.offer-card h3 {
  font-size:11px
}

.page-hero-grid {
  grid-template-columns:1fr
}

.page-hero h1 {
  font-size:31px
}

.page-hero img {
  height:105px
}

.catalog-layout {
  grid-template-columns:1fr
}

.sidebar {
  display:none
}

.catalog-grid {
  grid-template-columns:repeat(2,1fr);
  gap:9px
}

.catalog-top {
  align-items:flex-start;
  flex-direction:column
}

.service-row {
  grid-template-columns:48px 1fr;
  gap:10px;
  padding:11px
}

.service-icon {
  width:43px;
  height:43px;
  font-size:20px
}

.service-row img {
  display:none
}

.service-row h3 {
  font-size:13px
}

.checks {
  font-size:9px;
  gap:5px
}

.about-grid {
  grid-template-columns:1fr;
  gap:17px
}

.about-image {
  height:220px
}

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

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

.footer-grid {
  grid-template-columns:1fr 1fr;
  gap:18px
}

.footer-grid>div:first-child {
  grid-column:1/-1
}

.footer {
  padding-top:20px
}

.contact-form {
  padding:13px
}

}

:root {
  --dark:#f4f8f5;
  --muted:#a7b3ab;
  --line:#28362e;
  --pale:#102219;
  --white:#0b110e;
  --shadow:0 10px 30px rgba(0,0,0,.35)
}

body {
  background:#050807;
  color:#f4f8f5
}

.topbar {
  background:#080d0a;
  border-color:#26352d;
  color:#c5d0c8
}

.main-header {
  background:#080d0a;
  border-color:#26352d
}

.logo-mark {
  color:#f4f8f5
}

.logo-tag {
  color:#b3c0b7
}

.nav a {
  color:#dce5df
}

.search {
  border-color:#314238
}

.search input {
  background:#0b110e;
  color:#f4f8f5
}

.search input::placeholder {
  color:#9ba99f
}

.hero {
  background:linear-gradient(90deg,#0b1710 0%,#080d0a 46%,#102219 100%)
}

.hero p,.page-hero p {
  color:#c2cdc5
}

.trust-row {
  color:#b2bfb6
}

.hero-image {
  background:#15221a
}

.benefit,.category-card,.product-card,.offer-card,.sidebar,.contact-form,.value-card,.service-row {
  background:#0b110e;
  border-color:#28362e;
  color:#f4f8f5
}

.benefit .ico {
  background:#102219
}

.benefit small,.section-head p,.product-card .desc,.contact-details p,.service-row p,.value-card p {
  color:#a7b3ab
}

.category-card img,.product-card img,.offer-card img {
  background:#111a15
}

.promo-banner {
  background:linear-gradient(105deg,#101c18 0%,#087c3a 50%,#102219 100%)
}

.page-hero {
  background:linear-gradient(90deg,#0b1710 0%,#080d0a 54%,#102219 100%)
}

.catalog-top,.catalog-top select {
  color:#c2cdc5
}

.catalog-top select {
  background:#0b110e;
  border-color:#314238
}

.side-link {
  color:#bdc9c1;
  border-color:#28362e
}

.filters {
  border-color:#28362e
}

.filters label {
  color:#bdc9c1
}

.checks {
  color:#bdc9c1
}

.about-grid p {
  color:#c2cdc5!important
}

.contact-form input,.contact-form textarea {
  background:#0b110e;
  border-color:#314238;
  color:#f4f8f5
}

.contact-form input::placeholder,.contact-form textarea::placeholder {
  color:#9ba99f
}

.contact-form label {
  color:#e4ebe6
}

.contact-form p {
  color:#a7b3ab!important
}

.notice {
  background:#102219;
  border-color:#28362e;
  color:#a7e3b8
}

.empty-state {
  border-color:#314238;
  color:#a7b3ab
}

.btn.outline {
  background:#0b110e;
  color:#77e29b
}

.footer {
  background:#020403;
  border-color:#26352d
}

.old-price {
  color:#9ba99f
}

/* Barra superior ampliada para mayor legibilidad */
.topbar {
  min-height:46px;
  height:auto;
  padding:8px 0;
  background:#080d0a;
  color:#f4f8f5;
  font-size:14px;
  border-bottom:1px solid #314238
}

.topbar .container {
  min-height:30px;
  align-items:center
}

.top-info {
  gap:24px;
  align-items:center
}

.top-info span {
  font-size:14px;
  line-height:1.4
}

.top-info span:nth-child(2) {
  display:inline
}

.topbar .social {
  font-size:15px;
  gap:16px;
  color:#f4f8f5
}

@media(max-width:650px) {
  .topbar {
  min-height:44px;
  padding:8px 0
}

.topbar .container {
  min-height:28px
}

.top-info {
  gap:8px 14px
}

.top-info span {
  font-size:12px
}

.top-info span:nth-child(2) {
  display:inline
}

.topbar .container {
  align-items:flex-start
}

.topbar .social {
  display:none
}

}

/* Escala general ampliada */
body {
  font-size:17px;
  line-height:1.65
}

.container {
  width:min(1320px,94%)
}

.main-header {
  height:80px
}

.nav-wrap {
  gap:32px
}

.logo {
  min-width:200px
}

.logo-mark {
  font-size:36px
}

.logo-tag {
  font-size:12px
}

.nav {
  gap:30px
}

.nav a {
  font-size:15px;
  padding:30px 0 26px
}

.search {
  height:42px;
  min-width:190px
}

.search input {
  width:150px;
  font-size:14px;
  padding:0 12px
}

.search button {
  width:42px;
  font-size:17px
}

.hero-grid {
  min-height:440px;
  gap:42px;
  padding:36px 0
}

.eyebrow {
  font-size:15px
}

.hero h1 {
  font-size:clamp(42px,4.5vw,62px);
  line-height:1.02
}

.hero p {
  font-size:18px;
  max-width:550px
}

.hero-image {
  height:350px
}

.image-label {
  padding:17px 23px
}

.image-label strong {
  font-size:20px
}

.image-label span {
  font-size:13px
}

.btn {
  font-size:15px;
  padding:14px 20px;
  min-height:48px
}

.trust-row {
  font-size:14px;
  gap:22px;
  margin-top:25px
}

.benefits {
  gap:12px
}

.benefit {
  padding:17px;
  gap:14px
}

.benefit .ico {
  width:42px;
  height:42px;
  font-size:22px
}

.benefit strong {
  font-size:14px
}

.benefit small {
  font-size:13px
}

.section {
  padding:52px 0
}

.section-head {
  margin-bottom:25px
}

.section-head h2 {
  font-size:32px
}

.section-head p {
  font-size:15px
}

.text-link {
  font-size:15px
}

.category-grid {
  gap:16px
}

.category-card img {
  height:140px
}

.category-card .cat-info {
  padding:14px
}

.category-card strong {
  font-size:14px;
  min-height:36px
}

.circle-arrow {
  width:30px;
  height:30px;
  font-size:17px
}

.promo-banner {
  min-height:160px;
  padding:22px 32px;
  gap:20px
}

.promo-banner h2 {
  font-size:34px
}

.promo-banner h2[style] {
  font-size:26px!important
}

.promo-banner p {
  font-size:15px
}

.promo-banner img {
  height:135px
}

.product-grid,.offer-grid {
  gap:18px
}

.product-card img {
  height:185px;
  padding:14px
}

.product-card .product-info,.offer-card .product-info {
  padding:16px
}

.pill {
  font-size:11px;
  padding:5px 8px
}

.product-card h3,.offer-card h3 {
  font-size:16px;
  margin:10px 0 5px
}

.product-card .desc {
  font-size:13px;
  margin-bottom:12px
}

.price {
  font-size:19px;
  margin-bottom:12px
}

.product-card .btn {
  font-size:14px;
  padding:12px
}

.offer-card img {
  height:160px
}

.discount {
  font-size:14px;
  padding:8px
}

.page-hero {
  padding:38px 0
}

.page-hero h1 {
  font-size:44px
}

.page-hero p {
  font-size:15px;
  max-width:520px
}

.page-hero img {
  height:165px
}

.catalog-layout {
  grid-template-columns:250px 1fr;
  gap:24px
}

.sidebar {
  padding:18px
}

.sidebar h3 {
  font-size:15px
}

.side-link,.filters label {
  font-size:14px;
  padding:11px 0
}

.catalog-top {
  font-size:14px;
  margin-bottom:18px
}

.catalog-top select {
  font-size:14px;
  padding:10px
}

.catalog-grid {
  gap:16px
}

.service-list {
  gap:16px
}

.service-row {
  grid-template-columns:72px 1fr 210px;
  gap:20px;
  padding:18px
}

.service-icon {
  width:62px;
  height:62px;
  font-size:29px
}

.service-row h3 {
  font-size:18px
}

.service-row p {
  font-size:14px
}

.checks {
  font-size:13px;
  gap:8px 14px
}

.service-row img {
  height:115px
}

.about-grid {
  gap:36px
}

.about-image {
  height:330px
}

.values {
  gap:16px;
  margin-top:24px
}

.value-card {
  padding:22px 14px
}

.value-card .ico {
  font-size:29px
}

.value-card h3 {
  font-size:15px
}

.value-card p {
  font-size:13px
}

.contact-grid {
  gap:24px
}

.contact-details h2 {
  font-size:30px
}

.contact-details p,.contact-item {
  font-size:15px
}

.contact-item .ico {
  width:42px;
  height:42px;
  font-size:20px
}

.contact-form {
  padding:22px
}

.contact-form label {
  font-size:13px
}

.contact-form input,.contact-form textarea {
  font-size:14px;
  padding:12px;
  margin-bottom:15px
}

.footer {
  padding:30px 0 18px
}

.footer-grid {
  gap:38px
}

.footer h4 {
  font-size:14px
}

.footer a,.footer p {
  font-size:13px;
  margin:9px 0
}

.copyright {
  font-size:12px
}

.notice,.empty-state {
  font-size:14px;
  padding:14px
}

@media(max-width:900px) {
  .nav-wrap {
  gap:16px
}

.logo {
  min-width:165px
}

.nav {
  gap:15px
}

.nav a {
  font-size:13px
}

.search {
  min-width:145px
}

.search input {
  width:100px
}

.catalog-layout {
  grid-template-columns:210px 1fr
}

.service-row {
  grid-template-columns:60px 1fr 150px
}

}

@media(max-width:650px) {
  body {
  font-size:15px;
  line-height:1.6
}

.container {
  width:92%
}

.main-header {
  min-height:68px
}

.nav-wrap {
  padding:10px 0
}

.logo-mark {
  font-size:30px
}

.logo-tag {
  font-size:11px
}

.mobile-toggle {
  font-size:14px;
  padding:10px 13px
}

.nav a {
  font-size:15px;
  padding:14px 4px
}

.search {
  height:42px
}

.search input {
  font-size:14px
}

.hero-grid {
  padding:30px 0;
  gap:20px
}

.hero h1 {
  font-size:clamp(38px,10vw,48px)
}

.hero p {
  font-size:16px
}

.hero-image {
  height:250px
}

.image-label {
  padding:14px 18px
}

.image-label strong {
  font-size:18px
}

.image-label span {
  font-size:12px
}

.btn {
  font-size:14px;
  padding:13px 17px
}

.trust-row {
  font-size:12px;
  gap:10px 14px
}

.benefits {
  gap:9px
}

.benefit {
  padding:12px;
  gap:10px
}

.benefit .ico {
  width:36px;
  height:36px;
  font-size:19px
}

.benefit strong {
  font-size:12px
}

.benefit small {
  font-size:11px
}

.section {
  padding:36px 0
}

.section-head {
  margin-bottom:18px
}

.section-head h2 {
  font-size:24px
}

.section-head p {
  font-size:13px
}

.text-link {
  font-size:13px
}

.category-grid {
  gap:10px
}

.category-card img {
  height:115px
}

.category-card .cat-info {
  padding:11px
}

.category-card strong {
  font-size:12px;
  min-height:32px
}

.circle-arrow {
  width:26px;
  height:26px
}

.promo-banner {
  min-height:130px;
  padding:16px;
  gap:10px
}

.promo-banner h2 {
  font-size:24px
}

.promo-banner h2[style] {
  font-size:18px!important
}

.promo-banner p {
  font-size:11px
}

.promo-banner .btn {
  font-size:11px;
  padding:10px
}

.product-grid,.offer-grid,.catalog-grid {
  gap:10px
}

.product-card img {
  height:125px;
  padding:8px
}

.product-card .product-info,.offer-card .product-info {
  padding:10px
}

.pill {
  font-size:9px
}

.product-card h3,.offer-card h3 {
  font-size:12px
}

.product-card .desc {
  font-size:10px
}

.price {
  font-size:15px
}

.product-card .btn {
  font-size:11px;
  padding:9px
}

.offer-card img {
  height:120px
}

.discount {
  font-size:11px;
  padding:6px
}

.page-hero {
  padding:24px 0
}

.page-hero h1 {
  font-size:34px
}

.page-hero p {
  font-size:13px
}

.page-hero img {
  height:115px
}

.catalog-layout {
  grid-template-columns:1fr
}

.catalog-top {
  font-size:12px
}

.catalog-top select {
  font-size:12px
}

.service-row {
  grid-template-columns:48px 1fr;
  gap:12px;
  padding:12px
}

.service-icon {
  width:44px;
  height:44px;
  font-size:21px
}

.service-row h3 {
  font-size:14px
}

.service-row p {
  font-size:11px
}

.checks {
  font-size:10px
}

.about-grid {
  gap:20px
}

.about-image {
  height:230px
}

.values {
  gap:10px
}

.value-card {
  padding:15px 10px
}

.value-card h3 {
  font-size:12px
}

.value-card p {
  font-size:10px
}

.contact-grid {
  gap:16px
}

.contact-details h2 {
  font-size:25px
}

.contact-details p,.contact-item {
  font-size:13px
}

.contact-form {
  padding:15px
}

.contact-form label {
  font-size:11px
}

.contact-form input,.contact-form textarea {
  font-size:12px;
  padding:10px
}

.footer {
  padding:22px 0 14px
}

.footer-grid {
  gap:20px
}

.footer h4 {
  font-size:12px
}

.footer a,.footer p {
  font-size:11px
}

.copyright {
  font-size:10px
}

}

/* ===== OFFITONER: PRODUCTOS MÁS GRANDES ===== */

/* Aprovechar mejor el ancho de la página */
.container  {
  width: 94%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  }

/* Imagen principal de categorías */
.page-hero img  {
  width: 100%;
  max-width: 440px;
  height: auto !important;
  max-height: none;
  object-fit: contain;
  }

/* Dar más espacio al catálogo */
.catalog-layout  {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 26px;
  }

/* Tarjetas con imágenes más grandes */
.product-card img,
.product-card .product-image img,
.offer-card img  {
  width: 100%;
  height: 220px !important;
  object-fit: contain;
  }

/* Más espacio dentro de cada producto */
.product-card .product-info,
.product-card .product-info  {
  padding: 18px;
  }

.product-card h3,
.offer-card h3  {
  font-size: 18px;
  line-height: 1.4;
  }

.product-card p,
.product-card .desc  {
  font-size: 14px;
  line-height: 1.5;
  }

/* Categorías laterales más legibles */
.sidebar h3,
.sidebar h2  {
  font-size: 15px;
  }

.sidebar a,
.sidebar label  {
  font-size: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
  }

/* Ajustes para celular */
@media (max-width: 650px)  {
  .container  {
  width: 94%;
  }

  .page-hero img  {
  max-width: 100%;
  }

  .product-card img,
  .product-card .product-image img,
  .offer-card img  {
  height: 155px !important;
  }

  .catalog-layout  {
  grid-template-columns: 1fr;
  }

  .product-card h3,
  .offer-card h3  {
  font-size: 15px;
  }

}

/* ===== AJUSTE GRANDE PARA PRODUCTOS OFFITONER ===== */

/* Aprovechar casi toda la pantalla */
body:has(.catalog-layout) .container,
body:has(.catalog-layout) .page-hero .container  {
  width: 96% !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  }

/* Dar más ancho a la zona del catálogo */
.catalog-layout  {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 28px !important;
  }

/* Aumentar las imágenes de los productos */
.product-card img,
.offer-card img  {
  height: 280px !important;
  max-height: none !important;
  object-fit: contain !important;
  }

/* Aumentar el espacio de las tarjetas */
.product-card,
.offer-card  {
  min-width: 0;
  }

.product-card .product-info,
.product-info  {
  padding: 22px !important;
  }

/* Letras más grandes */
.product-card h3,
.offer-card h3  {
  font-size: 20px !important;
  line-height: 1.4 !important;
  }

.product-card p,
.product-card .desc,
.offer-card p  {
  font-size: 15px !important;
  line-height: 1.6 !important;
  }

/* Categorías laterales más legibles */
.sidebar  {
  padding: 20px !important;
  }

.sidebar a,
.sidebar label,
.sidebar button  {
  font-size: 15px !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  }

/* Imagen de la portada más grande */
.page-hero img  {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  max-height: none !important;
  }

/* Adaptación a celulares */
@media (max-width: 650px)  {
  .catalog-layout  {
  grid-template-columns: 1fr !important;
  }

  .product-card img,
  .offer-card img  {
  height: 190px !important;
  }

  .product-card h3,
  .offer-card h3  {
  font-size: 16px !important;
  }

}

/* ===== OFFITONER: USAR TODO EL ANCHO ===== */

/* Quitar límites de ancho del contenido de productos */
body:has(.product-grid) .container,
body:has(.product-grid) .catalog-layout,
body:has(.product-grid) .page-hero .container,
body:has(.product-grid) .catalog-top  {
  width: 96% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  }

/* Catálogo: categorías + productos */
body:has(.product-grid) .catalog-layout  {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 24px !important;
  }

/* Distribuir más productos en el espacio disponible */
body:has(.product-grid) .product-grid  {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  }

/* Tarjetas e imágenes grandes */
body:has(.product-grid) .product-card  {
  width: 100% !important;
  min-width: 0 !important;
  }

body:has(.product-grid) .product-card img  {
  width: 100% !important;
  height: 260px !important;
  max-height: none !important;
  object-fit: contain !important;
  }

body:has(.product-grid) .product-card .product-info  {
  padding: 20px !important;
  }

body:has(.product-grid) .product-card h3  {
  font-size: 19px !important;
  }

body:has(.product-grid) .product-card p  {
  font-size: 14px !important;
  }

/* Portada de productos */
body:has(.product-grid) .page-hero img  {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  }

/* Tablet */
@media (max-width: 900px)  {
  body:has(.product-grid) .catalog-layout  {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  }

  body:has(.product-grid) .product-grid  {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:has(.product-grid) .product-card img  {
  height: 210px !important;
  }

}

/* Celular */
@media (max-width: 600px)  {
  body:has(.product-grid) .catalog-layout  {
  grid-template-columns: 1fr !important;
  }

  body:has(.product-grid) .product-grid  {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  }

  body:has(.product-grid) .product-card img  {
  height: 150px !important;
  }

  body:has(.product-grid) .product-card .product-info  {
  padding: 10px !important;
  }

  body:has(.product-grid) .product-card h3  {
  font-size: 15px !important;
  }

}

/* =========================================================
   OFFITONER — AJUSTE DEFINITIVO DE ANCHO Y LEGIBILIDAD
   Reglas al final para que tengan prioridad sobre las anteriores.
   ========================================================= */

/* Utilizar casi todo el ancho disponible del navegador */
.container  {
  width: min(1600px, 96%) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  }

/* Cabecera de Productos: texto e imagen grandes */
.page-hero  {
  padding: clamp(28px, 4vw, 58px) 0 !important;
  }

.page-hero-grid  {
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  }

.page-hero h1  {
  font-size: clamp(40px, 4vw, 60px) !important;
  line-height: 1.02 !important;
  }

.page-hero p  {
  font-size: clamp(15px, 1.2vw, 19px) !important;
  max-width: 650px !important;
  }

.page-hero-grid > img,
.page-hero-grid img  {
  width: 100% !important;
  height: clamp(230px, 25vw, 380px) !important;
  max-height: none !important;
  object-fit: contain !important;
  }

/* Catálogo: barra lateral y zona de productos */
.catalog-layout  {
  width: 96% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) !important;
  gap: clamp(20px, 2vw, 34px) !important;
  }

/* Productos en tres columnas amplias en escritorio */
.catalog-grid  {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.5vw, 24px) !important;
  }

.catalog-grid .product-card  {
  min-width: 0 !important;
  width: 100% !important;
  }

.catalog-grid .product-card img  {
  width: 100% !important;
  height: clamp(210px, 19vw, 300px) !important;
  max-height: none !important;
  padding: 14px !important;
  object-fit: contain !important;
  }

.catalog-grid .product-card .product-info  {
  padding: 18px !important;
  }

.catalog-grid .product-card h3  {
  font-size: clamp(16px, 1.2vw, 20px) !important;
  line-height: 1.4 !important;
  }

.catalog-grid .product-card .desc,
.catalog-grid .product-card p  {
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.55 !important;
  }

.catalog-grid .product-card .btn  {
  font-size: 14px !important;
  min-height: 44px !important;
  }

/* Filtros y textos de catálogo más legibles */
.sidebar  {
  padding: 20px !important;
  }

.sidebar h3  {
  font-size: 16px !important;
  }

.side-link,
.filters label  {
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 13px 0 !important;
  }

.catalog-top  {
  font-size: 15px !important;
  margin-bottom: 20px !important;
  }

.catalog-top select  {
  font-size: 14px !important;
  padding: 11px 13px !important;
  }

/* Adaptación a tablets */
@media (max-width: 1000px)  {
  .container  {
  width: 94% !important;
  }

  .page-hero-grid  {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr) !important;
  }

  .catalog-layout  {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  }

  .catalog-grid  {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .catalog-grid .product-card img  {
  height: 220px !important;
  }

}

/* Adaptación a celulares */
@media (max-width: 650px)  {
  .container,
  .catalog-layout  {
  width: 94% !important;
  }

  .page-hero-grid  {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  }

  .page-hero h1  {
  font-size: 36px !important;
  }

  .page-hero-grid img  {
  height: auto !important;
  max-height: 300px !important;
  }

  .catalog-layout  {
  grid-template-columns: minmax(0, 1fr) !important;
  }

  .catalog-grid  {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  }

  .catalog-grid .product-card img  {
  height: 160px !important;
  padding: 8px !important;
  }

  .catalog-grid .product-card .product-info  {
  padding: 11px !important;
  }

  .catalog-grid .product-card h3  {
  font-size: 14px !important;
  }

  .catalog-grid .product-card .desc,
  .catalog-grid .product-card p  {
  font-size: 12px !important;
  }

  .catalog-grid .product-card .btn  {
  font-size: 11px !important;
  padding: 9px !important;
  }

}

/* =========================================================
   OFFITONER — LUZ VERDE GIRATORIA EN EL CONTORNO DE PORTADA
   Técnica: marco con gradiente cónico giratorio.
   No usa máscaras CSS, para mejorar la compatibilidad.
   ========================================================= */

/* Contenedor de la imagen principal */
.hero-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  background: #08140d;
  /* Deja visible el borde luminoso alrededor de la imagen */
}

/* La luz ocupa el contenedor y gira por detrás de la fotografía */
.hero-image::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  pointer-events: none;

  /* Un solo arco brillante sobre un fondo transparente */
  background: conic-gradient(
    from 0deg,
    transparent 0deg 285deg,
    #00ff66 310deg,
    #e6ffed 325deg,
    #00ff66 340deg,
    transparent 360deg
  );

  animation: offitoner-girar-luz 3s linear infinite;
}

/* La fotografía queda encima del gradiente, dejando 3 px de borde */
.hero-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  margin: 3px;
  object-fit: cover;
  border-radius: 9px;
}

/* Etiqueta o texto que esté superpuesto a la foto permanece encima */
.hero-image .image-label {
  z-index: 2;
}

/* Giro continuo del arco de luz */
@keyframes offitoner-girar-luz {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Desactivar movimiento si el visitante prefiere menos animación */
@media (prefers-reduced-motion: reduce) {
  .hero-image::before {
    animation: none;
  }
}

/* =========================================================
   OFFITONER — LUZ VERDE ANIMADA EN TARJETAS DE CATEGORÍAS
   La luz recorre el borde de cada tarjeta continuamente.
   ========================================================= */

/* Contenedor de cada categoría */
.category-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid #26382e;
}

/* Mantiene la imagen y el contenido por encima del fondo */
.category-card > img,
.category-card .cat-info {
  position: relative;
  z-index: 1;
}

/* Marco luminoso que gira alrededor de la tarjeta */
.category-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;

  /* Destello verde brillante sobre fondo transparente */
  background: conic-gradient(
    from var(--category-light-angle, 0deg),
    transparent 0deg,
    transparent 285deg,
    #00ff66 315deg,
    #d9ffe5 330deg,
    #00ff66 345deg,
    transparent 360deg
  );

  /* Deja visible únicamente el borde del gradiente */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* Giro continuo de la luz */
  animation: category-light-spin 3.5s linear infinite;
}

/* Ángulo independiente para animar el gradiente */
@property --category-light-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Movimiento de la luz alrededor de la tarjeta */
@keyframes category-light-spin {
  from {
    --category-light-angle: 0deg;
  }

  to {
    --category-light-angle: 360deg;
  }
}

/* Reduce el movimiento si el usuario lo solicita en su sistema */
@media (prefers-reduced-motion: reduce) {
  .category-card::after {
    animation: none;
  }
}


/* Navegación directa a secciones de servicios desde las tarjetas de inicio */
.service-row[id] { scroll-margin-top: 110px; }