.pen-catalogo {
  --pen-ink: #10223f;
  --pen-wine: #7d173c;
  --pen-green: #145f4a;
  --pen-gold: #e7ad2d;
  --pen-paper: #f5f6f3;
  --pen-line: #dfe4df;
  width: 100%;
  overflow: hidden;
  color: var(--pen-ink);
  background: var(--pen-paper);
  font-family: Arial, Helvetica, sans-serif;
}

.pen-catalogo *,
.pen-catalogo *::before,
.pen-catalogo *::after { box-sizing: border-box; }
.pen-catalogo button,
.pen-catalogo input { font: inherit; }
.pen-catalogo a { color: inherit; text-decoration: none; }
.pen-catalogo [hidden] { display: none !important; }

.pen-hero {
  min-height: 490px;
  padding: 76px clamp(24px, 7vw, 110px) 62px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  align-items: end;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(122deg, #0b1d39 0%, #102a47 56%, #173d3d 100%);
}

.pen-hero::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: 3%;
  top: -42%;
  border-radius: 50%;
  background: #94184955;
}

.pen-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to right, transparent, #000);
}

.pen-hero__copy,
.pen-hero__summary { position: relative; z-index: 2; }

.pen-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f3ca68;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.pen-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.pen-eyebrow--dark { color: var(--pen-wine); }

.pen-hero h1 {
  max-width: 780px;
  margin: 20px 0 22px;
  color: #fff;
  font-size: clamp(44px, 5.6vw, 78px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.055em;
}

.pen-hero h1 em { color: #f0bc46; font-style: normal; }
.pen-hero__copy > p { max-width: 650px; margin: 0 0 30px; color: #d7e0e9; font-size: 18px; line-height: 1.65; }

.pen-primary-button {
  padding: 15px 20px 15px 23px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  color: #fff !important;
  border-radius: 10px;
  background: var(--pen-wine);
  box-shadow: 0 12px 30px #080c1733;
  font-size: 14px;
  font-weight: 900;
}

.pen-primary-button span { font-size: 18px; }

.pen-hero__summary {
  justify-self: end;
  width: min(100%, 370px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #ffffff24;
  border-radius: 18px;
  background: #06162b66;
  backdrop-filter: blur(12px);
}

.pen-hero__summary div { padding: 24px 16px; border-right: 1px solid #ffffff1c; }
.pen-hero__summary div:last-child { border: 0; }
.pen-hero__summary strong,
.pen-hero__summary span { display: block; }
.pen-hero__summary strong { color: #f4c65e; font-size: 25px; }
.pen-hero__summary span { margin-top: 6px; color: #c9d4df; font-size: 11px; line-height: 1.25; }

.pen-products { max-width: 1280px; margin: auto; padding: 78px 28px 120px; }
.pen-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }

.pen-section-heading h2,
.pen-how h2 {
  margin: 10px 0 0;
  color: var(--pen-ink);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.pen-section-heading p { margin: 10px 0 0; color: #6e7a86; font-size: 14px; }

.pen-search {
  width: min(100%, 350px);
  height: 49px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--pen-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 24px #10223f0a;
}

.pen-search span { font-size: 22px; }
.pen-search input { width: 100%; padding: 0; color: var(--pen-ink); border: 0; outline: 0; background: transparent; }

.pen-category-row { padding: 28px 0 38px; display: flex; gap: 9px; overflow-x: auto; scrollbar-width: thin; }
.pen-category-row button {
  padding: 10px 17px;
  white-space: nowrap;
  color: #5f6b78;
  border: 1px solid var(--pen-line);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.pen-category-row button.is-selected { color: #fff; border-color: var(--pen-ink); background: var(--pen-ink); }

.pen-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.pen-product-card { overflow: hidden; border: 1px solid #dde2df; border-radius: 24px; background: #fff; box-shadow: 0 22px 65px #10223f0d; }

.pen-product-visual {
  min-height: 365px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff 0 26%, #eef2ee 68%, #e7ece8 100%);
}

.pen-product-visual::before {
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  border: 1px solid #d7dfd8;
  border-radius: 50%;
  box-shadow: 0 0 0 35px #ffffff38, 0 0 0 70px #ffffff25;
}

.pen-product-visual img { width: min(72%, 310px); max-height: 285px; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 22px 19px #10223f29); mix-blend-mode: multiply; }
.pen-product-placeholder { width: 190px; height: 190px; display: grid; place-items: center; position: relative; z-index: 2; color: #a5afaa; border: 2px dashed #cbd3ce; border-radius: 50%; font-size: 60px; }

.pen-availability { position: absolute; top: 25px; left: 25px; z-index: 3; padding: 9px 13px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px #10223f12; font-size: 12px; font-weight: 900; }
.pen-availability i { width: 8px; height: 8px; border-radius: 50%; background: #1c9b69; box-shadow: 0 0 0 4px #1c9b691a; }
.pen-product-code { position: absolute; right: 25px; top: 29px; z-index: 3; color: #7a8793; font-size: 11px; letter-spacing: .12em; }

.pen-product-info { padding: 31px 32px 29px; }
.pen-product-category { color: var(--pen-wine); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 900; }
.pen-product-info h3 { margin: 9px 0 15px; color: var(--pen-ink); font-size: clamp(27px, 2.3vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; }

.pen-features { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pen-features li { padding: 7px 11px; color: #556472; border-radius: 7px; background: #f0f3f1; font-size: 12px; font-weight: 800; }

.pen-variant-row { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #73808c; font-size: 11px; }
.pen-variant-row > span { margin-right: 3px; font-weight: 800; }
.pen-variant-row button { padding: 6px 9px; color: #5c6975; border: 1px solid #dfe4e1; border-radius: 6px; background: #fff; cursor: pointer; }
.pen-variant-row button.is-active { color: var(--pen-wine); border-color: var(--pen-wine); background: #fff7fa; font-weight: 800; }

.pen-plan-title { margin: 32px 0 13px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.pen-plan-title strong,
.pen-plan-title span { display: block; }
.pen-plan-title strong { font-size: 15px; }
.pen-plan-title div > span { margin-top: 3px; color: #7c8792; font-size: 11px; }
.pen-payroll-badge { color: var(--pen-green); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.pen-plans { display: grid; gap: 8px; }
.pen-plan {
  width: 100%;
  min-height: 61px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 22px 92px 1fr 108px;
  align-items: center;
  gap: 8px;
  color: var(--pen-ink);
  text-align: left;
  border: 1px solid #e0e4e1;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: .18s ease;
}

.pen-plan:hover { border-color: #aeb8b3; transform: translateY(-1px); }
.pen-plan.is-selected { border: 2px solid var(--pen-wine); background: #fff9fb; box-shadow: 0 7px 22px #7d173c10; }
.pen-radio-dot { width: 16px; height: 16px; border: 1px solid #b6bfc2; border-radius: 50%; }
.pen-plan.is-selected .pen-radio-dot { border: 4px solid #fff; background: var(--pen-wine); box-shadow: 0 0 0 2px var(--pen-wine); }
.pen-term { color: #5c6976; font-size: 12px; }
.pen-term strong { color: var(--pen-ink); font-size: 17px; }
.pen-payment strong,
.pen-payment small { display: block; text-align: right; }
.pen-payment strong { font-size: 19px; letter-spacing: -.025em; }
.pen-payment small { color: #89929b; font-size: 10px; }
.pen-total { padding-left: 12px; color: #8a939a; border-left: 1px solid #e4e7e5; font-size: 9px; line-height: 1.45; }
.pen-total strong { display: block; color: #53606c; font-size: 11px; }

.pen-whatsapp-button {
  min-height: 52px;
  margin-top: 18px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff !important;
  border-radius: 10px;
  background: #157556;
  box-shadow: 0 10px 24px #15755628;
  font-size: 13px;
  font-weight: 900;
}
.pen-whatsapp-button b { margin-left: auto; font-size: 18px; }
.pen-whatsapp-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; color: #157556; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 900; }
.pen-fine-print { margin: 13px 0 0; color: #8d969e; font-size: 9px; text-align: center; }

.pen-empty { padding: 80px 30px; display: grid; gap: 8px; color: #7a8791; text-align: center; border: 1px dashed #cbd3ce; border-radius: 20px; }
.pen-empty strong { color: var(--pen-ink); font-size: 22px; }

.pen-how { padding: 90px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 9vw, 130px); color: #fff; background: var(--pen-ink); }
.pen-how h2 { color: #fff; }
.pen-how__copy p { max-width: 430px; color: #bdc8d4; line-height: 1.7; }
.pen-steps { display: grid; }
.pen-steps > div { padding: 25px 0; display: grid; grid-template-columns: 58px 1fr; gap: 20px; border-bottom: 1px solid #ffffff18; }
.pen-steps b { color: #efbe51; font-size: 13px; letter-spacing: .1em; }
.pen-steps strong,
.pen-steps small { display: block; }
.pen-steps strong { font-size: 19px; }
.pen-steps small { margin-top: 6px; color: #9eacb9; font-size: 13px; }

@media (max-width: 900px) {
  .pen-hero { grid-template-columns: 1fr; padding-top: 58px; }
  .pen-hero__summary { justify-self: start; margin-top: 42px; }
  .pen-section-heading { align-items: stretch; flex-direction: column; }
  .pen-search { width: 100%; }
  .pen-product-grid { grid-template-columns: 1fr; }
  .pen-product-visual { min-height: 430px; }
  .pen-product-info { padding: 36px 28px; }
  .pen-how { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pen-hero { min-height: 570px; padding: 50px 22px 42px; }
  .pen-hero__copy > p { font-size: 16px; }
  .pen-hero__summary { width: 100%; }
  .pen-hero__summary div { padding: 18px 10px; }
  .pen-products { padding: 58px 16px 90px; }
  .pen-category-row { padding-bottom: 25px; }
  .pen-product-visual { min-height: 350px; }
  .pen-product-visual img { max-height: 270px; }
  .pen-product-info { padding: 31px 20px; }
  .pen-plan { grid-template-columns: 20px 82px 1fr; }
  .pen-total { grid-column: 2 / -1; padding: 5px 0 0; display: flex; justify-content: space-between; border: 0; border-top: 1px solid #e7e9e7; }
  .pen-total strong { display: inline; }
  .pen-how { padding: 70px 22px; }
}