/* ============================================================
   GENUS — PREMIUM POLISH LAYER
   Carga después de styles.css y styles-internal.css.
   Solo refinamiento visual — sin cambiar funcionalidad.
   ============================================================ */

:root {
  --polish-loaded: 1;
  --upgrade-v: 3;
  --polish-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --polish-duration: 0.22s;
  --polish-radius-btn: 10px;
  --polish-radius-card: 16px;
  --polish-radius-lg: 20px;
  --polish-btn-h: 48px;
  --polish-btn-h-sm: 44px;
  --polish-shadow-xs: 0 1px 2px rgba(7, 23, 47, 0.04);
  --polish-shadow-sm: 0 1px 3px rgba(7, 23, 47, 0.05), 0 6px 16px rgba(7, 23, 47, 0.06);
  --polish-shadow-md: 0 4px 12px rgba(7, 23, 47, 0.07), 0 12px 32px rgba(7, 23, 47, 0.08);
  --polish-shadow-lg: 0 8px 24px rgba(7, 23, 47, 0.08), 0 24px 48px rgba(7, 23, 47, 0.1);
  --polish-focus: 0 0 0 3px rgba(22, 154, 176, 0.18);
  --polish-section-y: clamp(64px, 8vw, 96px);
  --polish-section-gap: clamp(48px, 6vw, 72px);
}

/* ---------- Tipografía global ---------- */
body {
  font-family: var(--font-main, 'Helvetica Neue', Arial, Helvetica, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p {
  line-height: 1.65;
}

/* ---------- Focus accesible (todos los interactivos) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus);
}

/* ---------- Botones unificados ---------- */
.hn-cta,
.hh-btn-cta,
.hh-btn-wa,
.g-btn-primary,
.g-btn-secondary,
.g-btn-wa,
.g-btn-cta,
.g-btn-back,
.g-btn-next,
.g-btn-final,
.g-btn-submit,
.dtp-btn-back,
.dtp-btn-next,
.dtp-btn-pay,
.product-lines-title a,
.footer a,
.g-footer-cta {
  border-radius: var(--polish-radius-btn) !important;
  transition:
    background var(--polish-duration) var(--polish-ease),
    color var(--polish-duration) var(--polish-ease),
    border-color var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease) !important;
}

.hn-cta,
.hh-btn-cta,
.g-btn-primary,
.g-btn-next,
.g-btn-submit,
.dtp-btn-next {
  min-height: var(--polish-btn-h);
  box-shadow: var(--polish-shadow-xs);
}

.hn-cta:hover,
.hh-btn-cta:hover,
.g-btn-primary:hover,
.g-btn-next:hover,
.g-btn-submit:hover,
.dtp-btn-next:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-shadow-sm);
}

.hn-cta:active,
.hh-btn-cta:active,
.g-btn-primary:active,
.g-btn-next:active,
.g-btn-submit:active,
.dtp-btn-next:active,
.g-btn-back:active,
.dtp-btn-back:active {
  transform: translateY(0) scale(0.99);
}

.hh-btn-wa,
.g-btn-secondary,
.g-btn-back,
.dtp-btn-back {
  min-height: var(--polish-btn-h-sm);
}

.g-btn-final,
.dtp-btn-pay {
  min-height: 52px;
  box-shadow: var(--polish-shadow-sm);
}

.g-btn-final:hover,
.dtp-btn-pay:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-shadow-md);
}

.g-btn-wa,
.g-btn-cta {
  min-height: var(--polish-btn-h-sm);
}

.g-btn-wa:hover,
.g-btn-cta:hover {
  transform: translateY(-1px);
}

/* ---------- Nav premium ---------- */
.hn {
  border-bottom-color: rgba(221, 227, 232, 0.9);
  box-shadow: var(--polish-shadow-xs);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.g-nav {
  box-shadow: var(--polish-shadow-xs);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.hn-inner,
.g-nav-inner {
  height: 72px;
}

.hn-links a,
.g-nav-links a {
  border-radius: var(--polish-radius-btn);
  transition:
    background var(--polish-duration) var(--polish-ease),
    color var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease);
}

.hn-links a:hover {
  background: rgba(22, 154, 176, 0.08);
  color: #169ab0;
}

.hn-links a.act {
  background: rgba(22, 154, 176, 0.1);
  border-bottom: none;
  box-shadow: inset 0 -2px 0 #169ab0;
}

.g-nav-links a:hover,
.g-nav-links a.active {
  transform: translateY(-1px);
}

.hn-ham span,
.g-nav-hamburger span {
  transition: transform var(--polish-duration) var(--polish-ease), opacity var(--polish-duration) var(--polish-ease);
}

/* ---------- Hero home ---------- */
.hh {
  background: linear-gradient(145deg, #e8f4f8 0%, #f2f8fa 45%, #f8fbfc 100%);
}

.hh-left h1 {
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.hh-left p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 40px;
}

.hh-rule {
  margin: 24px 0 28px;
  opacity: 0.9;
}

.hh-inner {
  min-height: 540px;
}

.hh-right {
  height: 540px;
}

/* ---------- Features strip ---------- */
.hf-inner {
  border-radius: var(--polish-radius-lg);
  box-shadow: var(--polish-shadow-md);
  border-color: rgba(221, 227, 232, 0.85);
  transform: translateY(-36px);
  transition: box-shadow var(--polish-duration) var(--polish-ease);
}

.hf-inner:hover {
  box-shadow: var(--polish-shadow-lg);
}

.hf-item {
  padding: 32px 28px;
  transition: background var(--polish-duration) var(--polish-ease);
}

.hf-item:hover {
  background: rgba(245, 248, 250, 0.6);
}

.hf-icon {
  box-shadow: 0 4px 14px rgba(22, 154, 176, 0.2);
  transition: transform var(--polish-duration) var(--polish-ease);
}

.hf-item:hover .hf-icon {
  transform: scale(1.03);
}

/* ---------- Secciones internas ---------- */
.g-section {
  padding: var(--polish-section-y) 0;
}

.g-section + .g-section {
  border-top: 1px solid rgba(221, 227, 232, 0.65);
}

.g-section-head {
  margin-bottom: var(--polish-section-gap);
}

.g-section-head h2 {
  letter-spacing: -0.025em;
}

.g-section-head p {
  margin-top: 14px;
  line-height: 1.7;
}

.g-hero {
  padding: clamp(72px, 9vw, 96px) 0 clamp(64px, 8vw, 88px);
}

.g-hero h1 {
  letter-spacing: -0.03em;
}

.g-hero p {
  line-height: 1.7;
  margin-bottom: 40px;
}

.g-divider {
  opacity: 0.85;
}

/* ---------- Cards unificadas ---------- */
.product-card,
.hf-inner,
.g-product-card,
.g-mv-card,
.g-valor-card,
.g-cert-card,
.g-contact-item,
.g-process-step,
.g-envase-item,
.g-banco-item,
.g-porque-item,
.g-proceso-item,
.g-summary-card,
.dtp-product-card,
.dtp-col-img,
.dtp-col-form,
.dtp-order-card,
.dtp-summary {
  border-radius: var(--polish-radius-card) !important;
  transition:
    box-shadow var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease),
    border-color var(--polish-duration) var(--polish-ease),
    background var(--polish-duration) var(--polish-ease) !important;
}

.product-card {
  border-color: rgba(221, 227, 232, 0.95) !important;
  box-shadow: var(--polish-shadow-xs);
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--polish-shadow-md) !important;
}

.g-product-card:hover,
.g-mv-card:hover,
.g-valor-card:hover,
.g-cert-card:hover,
.g-process-step:hover,
.g-envase-item:hover,
.g-banco-item:hover,
.g-proceso-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--polish-shadow-md) !important;
}

.g-porque-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-shadow-sm) !important;
}

.dtp-product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--polish-shadow-md) !important;
}

.dtp-product-card.selected {
  box-shadow: 0 0 0 3px rgba(22, 154, 176, 0.14), var(--polish-shadow-md) !important;
}

.g-contact-item {
  padding: 24px 22px;
}

.g-contact-item:hover {
  box-shadow: var(--polish-shadow-sm);
  border-color: rgba(22, 154, 176, 0.25);
}

/* ---------- Inputs premium ---------- */
.g-field input,
.g-field textarea,
.g-field select,
.dtp-field input,
.dtp-field select,
.dtp-field textarea {
  border-radius: var(--polish-radius-btn) !important;
  padding: 14px 16px !important;
  border-width: 1.5px !important;
  border-color: rgba(221, 227, 232, 0.95) !important;
  transition:
    border-color var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease),
    background var(--polish-duration) var(--polish-ease) !important;
}

.g-field input::placeholder,
.g-field textarea::placeholder,
.dtp-field input::placeholder,
.dtp-field textarea::placeholder {
  color: rgba(58, 74, 90, 0.45);
  font-weight: 400;
}

.g-field input:hover,
.g-field textarea:hover,
.g-field select:hover,
.dtp-field input:hover,
.dtp-field textarea:hover,
.dtp-field select:hover {
  border-color: rgba(22, 154, 176, 0.35) !important;
}

.g-field input:focus,
.g-field textarea:focus,
.g-field select:focus,
.dtp-field input:focus,
.dtp-field textarea:focus,
.dtp-field select:focus {
  border-color: var(--aqua, #169ab0) !important;
  box-shadow: var(--polish-focus) !important;
}

.g-field label,
.dtp-field label {
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}

/* ---------- Opciones wizard (cotizador) ---------- */
.g-option-label,
.g-yn-label {
  border-radius: var(--polish-radius-btn) !important;
  border-width: 1.5px !important;
  transition:
    border-color var(--polish-duration) var(--polish-ease),
    background var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease) !important;
}

.g-option-label:hover,
.g-yn-label:hover {
  transform: translateY(-1px);
  box-shadow: var(--polish-shadow-xs);
}

.g-option-label.selected,
.g-yn-label.selected {
  box-shadow: 0 0 0 3px rgba(22, 154, 176, 0.12);
}

.g-wizard-nav,
.dtp-nav {
  margin-top: 44px;
  padding-top: 32px;
}

.g-step-header h3 {
  letter-spacing: -0.02em;
}

/* ---------- Progress cotizador ---------- */
.g-progress::before {
  height: 2px !important;
  background: rgba(221, 227, 232, 0.9) !important;
}

.g-progress-step span {
  transition:
    background var(--polish-duration) var(--polish-ease),
    border-color var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease) !important;
  box-shadow: var(--polish-shadow-xs);
}

.g-progress-step.active span {
  box-shadow: 0 4px 12px rgba(22, 154, 176, 0.28);
}

/* ---------- Configurador progress ---------- */
.dtp-step-num {
  transition:
    background var(--polish-duration) var(--polish-ease),
    border-color var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease) !important;
}

.dtp-step-item.active .dtp-step-num {
  box-shadow: 0 4px 12px rgba(22, 154, 176, 0.25);
}

.dtp-color-swatch {
  box-shadow: 0 2px 6px rgba(7, 23, 47, 0.1) !important;
  transition:
    transform var(--polish-duration) var(--polish-ease),
    border-color var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease) !important;
}

.dtp-color-swatch:hover {
  transform: scale(1.08) !important;
}

.dtp-activo-chip {
  transition:
    background var(--polish-duration) var(--polish-ease),
    border-color var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease) !important;
}

.dtp-activo-chip:hover {
  transform: translateY(-1px);
}

/* ---------- Footer ---------- */
.footer,
.g-footer {
  border-top-color: rgba(221, 227, 232, 0.85);
  padding: 36px 0;
}

.footer a,
.g-footer-cta {
  box-shadow: var(--polish-shadow-sm);
  padding: 16px 28px !important;
  letter-spacing: 0.02em;
}

.footer a:hover,
.g-footer-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-shadow-md);
}

/* ---------- Links en contenido ---------- */
.g-section a:not([class]),
.g-hero a:not([class]),
.g-contact-item-body a {
  transition: color var(--polish-duration) var(--polish-ease);
}

/* ---------- Proceso home ---------- */
.hp {
  padding: 24px 0 72px;
}

.hp-left h2 {
  letter-spacing: -0.02em;
}

.hp-step {
  transition: transform var(--polish-duration) var(--polish-ease);
}

.hp-step:hover {
  transform: translateY(-2px);
}

.hp-num {
  box-shadow: var(--polish-shadow-xs);
  transition: transform var(--polish-duration) var(--polish-ease);
}

.hp-step:hover .hp-num {
  transform: scale(1.04);
}

/* ---------- Product lines home ---------- */
.product-lines {
  padding: 48px 0 40px;
}

.product-lines-title a {
  box-shadow: var(--polish-shadow-xs);
  transition:
    border-color var(--polish-duration) var(--polish-ease),
    box-shadow var(--polish-duration) var(--polish-ease),
    transform var(--polish-duration) var(--polish-ease) !important;
}

.product-lines-title a:hover {
  transform: translateY(-2px);
  box-shadow: var(--polish-shadow-sm);
  border-color: rgba(22, 154, 176, 0.35);
}

/* ---------- Animaciones de entrada sutiles ---------- */
@keyframes polish-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.g-wizard-panel.active,
.dtp-panel.active {
  animation: polish-fade-up 0.35s var(--polish-ease) both;
}

.g-success.active {
  animation: polish-fade-up 0.4s var(--polish-ease) both;
}

/* ---------- Iconos / SVG consistencia ---------- */
.hf-icon svg,
.hp-icon svg,
.g-contact-icon {
  flex-shrink: 0;
}

/* ---------- Scroll suave (sin JS) ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- Reducir sombras legacy pesadas ---------- */
.g-product-card,
.g-valor-card,
.g-cert-card {
  box-shadow: var(--polish-shadow-xs) !important;
}

/* ---------- Responsive polish ---------- */
@media (max-width: 768px) {
  :root {
    --polish-section-y: 52px;
    --polish-section-gap: 36px;
  }

  .hh-inner {
    min-height: auto;
  }

  .hh-left {
    padding: 48px 0 32px;
  }

  .hf-inner {
    transform: translateY(-24px);
  }

  .hf-item {
    padding: 24px 20px;
  }

  .g-hero {
    padding: 56px 0 48px;
  }

  .dtp-wrap {
    padding: 40px 0 64px !important;
  }
}

@media (max-width: 640px) {
  .hn-cta,
  .hh-btn-cta,
  .g-btn-primary,
  .g-btn-next {
    min-height: 46px;
  }

  .g-wizard-nav,
  .dtp-nav {
    gap: 12px;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   GENUS — VISUAL UPGRADE PASS v2
   Mejora estética visible: fondos, hero, cards, CTAs, secciones
   ============================================================ */

/* ---------- Canvas global ---------- */
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(22, 154, 176, 0.07), transparent 55%),
    linear-gradient(180deg, #f6fafb 0%, #ffffff 38%, #f8fbfc 100%) !important;
}

/* ---------- Nav glass premium ---------- */
.hn,
.g-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(22, 154, 176, 0.1) !important;
  box-shadow: 0 4px 24px rgba(7, 23, 47, 0.06) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
}

/* ---------- HERO HOME — impacto visual ---------- */
.hh {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(128deg, #d4edf3 0%, #e8f5f9 32%, #f2f9fb 58%, #fafdfe 100%) !important;
  border-bottom: 1px solid rgba(22, 154, 176, 0.08);
}

.hh::before,
.hh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(72px);
  z-index: 0;
}

.hh::before {
  width: min(560px, 70vw);
  height: min(560px, 70vw);
  top: -18%;
  right: -8%;
  background: radial-gradient(circle, rgba(22, 154, 176, 0.28) 0%, rgba(22, 154, 176, 0) 68%);
}

.hh::after {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  bottom: -12%;
  left: -6%;
  background: radial-gradient(circle, rgba(14, 122, 141, 0.16) 0%, transparent 70%);
}

.hh-inner {
  position: relative;
  z-index: 1;
  min-height: clamp(520px, 72vh, 640px) !important;
}

.hh-left h1 {
  font-size: clamp(38px, 5.2vw, 68px) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hh-left h1 span {
  background: linear-gradient(135deg, #169ab0 0%, #0e7a8d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hh-tag {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(22, 154, 176, 0.22);
  padding: 8px 16px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(22, 154, 176, 0.08);
}

.hh-rule {
  width: 56px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #169ab0, rgba(22, 154, 176, 0.2)) !important;
  border-radius: 4px;
}

.hh-img-wrap {
  filter: drop-shadow(0 24px 48px rgba(7, 23, 47, 0.14));
}

.hh-right::before {
  content: '';
  position: absolute;
  inset: 8% 0 8% 20%;
  background: radial-gradient(ellipse at center, rgba(22, 154, 176, 0.14) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- HERO páginas internas ---------- */
.g-hero {
  position: relative;
  overflow: hidden;
}

.g-hero::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  top: -30%;
  right: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 154, 176, 0.22) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}

.g-hero-tag {
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(22, 154, 176, 0.12);
}

.g-hero h1 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

/* ---------- CTAs premium con gradiente ---------- */
.hn-cta,
.hh-btn-cta,
.g-btn-primary,
.g-btn-next,
.g-btn-submit,
.dtp-btn-next {
  background: linear-gradient(135deg, #1eb3c9 0%, #169ab0 42%, #0e7a8d 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 4px 18px rgba(22, 154, 176, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  letter-spacing: 0.04em;
}

.hn-cta:hover,
.hh-btn-cta:hover,
.g-btn-primary:hover,
.g-btn-next:hover,
.g-btn-submit:hover,
.dtp-btn-next:hover {
  background: linear-gradient(135deg, #22bdd4 0%, #18a8be 40%, #0f8496 100%) !important;
  box-shadow:
    0 10px 32px rgba(22, 154, 176, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  transform: translateY(-3px) !important;
}

.g-btn-final,
.dtp-btn-pay,
.footer a,
.g-footer-cta {
  background: linear-gradient(135deg, #0a1e38 0%, #07172f 55%, #0c2a42 100%) !important;
  box-shadow: 0 8px 28px rgba(7, 23, 47, 0.28) !important;
}

.g-btn-final:hover,
.dtp-btn-pay:hover,
.footer a:hover,
.g-footer-cta:hover {
  background: linear-gradient(135deg, #169ab0 0%, #0e7a8d 100%) !important;
  box-shadow: 0 12px 36px rgba(22, 154, 176, 0.35) !important;
}

.hh-btn-wa {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(22, 154, 176, 0.2) !important;
  box-shadow: 0 4px 16px rgba(7, 23, 47, 0.06);
}

.hh-btn-wa:hover {
  border-color: #25d366 !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.18) !important;
  transform: translateY(-2px) !important;
}

/* ---------- Features strip glass ---------- */
.hf {
  background: transparent;
  position: relative;
}

.hf-inner {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 252, 253, 0.88) 100%) !important;
  border: 1px solid rgba(22, 154, 176, 0.14) !important;
  box-shadow:
    0 20px 50px rgba(7, 23, 47, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-44px) !important;
}

.hf-icon {
  background: linear-gradient(145deg, #1eb3c9, #0e7a8d) !important;
  box-shadow: 0 8px 20px rgba(22, 154, 176, 0.32) !important;
}

/* ---------- Secciones alternadas ---------- */
.g-section-white {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdfe 50%, #f7fafb 100%) !important;
  position: relative;
}

.g-section-light {
  background:
    linear-gradient(135deg, #eef6f8 0%, #f4f9fb 45%, #eaf3f6 100%) !important;
  position: relative;
}

.g-section-light::before,
.g-section-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 154, 176, 0.22), transparent);
  pointer-events: none;
}

.g-section-dark {
  background:
    linear-gradient(145deg, #061220 0%, #07172f 45%, #0a2238 100%) !important;
  position: relative;
  overflow: hidden;
}

.g-section-dark::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -20%;
  left: -5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 154, 176, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hp {
  background:
    linear-gradient(180deg, #f8fbfc 0%, #ffffff 100%) !important;
  padding: 48px 0 80px !important;
}

.product-lines {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(22, 154, 176, 0.06), transparent 60%),
    #ffffff !important;
  padding: 56px 0 48px !important;
}

.home-exact {
  background: transparent !important;
}

/* ---------- Section headers decorativos ---------- */
.g-section-tag {
  background: rgba(22, 154, 176, 0.1) !important;
  border: 1px solid rgba(22, 154, 176, 0.22);
  padding: 7px 16px !important;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(22, 154, 176, 0.08);
}

.g-divider,
.hp-left .rule,
.hh-rule {
  background: linear-gradient(90deg, #169ab0, rgba(22, 154, 176, 0.15)) !important;
}

.g-section-head h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, #169ab0, transparent);
}

.g-section-head.centered h2::after {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Cards premium glass ---------- */
.product-card,
.g-product-card,
.g-mv-card,
.g-valor-card,
.g-cert-card,
.g-contact-item,
.g-process-step,
.g-envase-item,
.g-banco-item,
.g-porque-item,
.g-proceso-item,
.g-summary-card,
.dtp-product-card,
.dtp-col-img,
.dtp-col-form,
.dtp-order-card {
  background: linear-gradient(160deg, #ffffff 0%, #f8fbfc 100%) !important;
  border: 1px solid rgba(22, 154, 176, 0.14) !important;
  box-shadow:
    0 8px 28px rgba(7, 23, 47, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset !important;
}

.product-card:hover,
.g-product-card:hover,
.g-mv-card:hover,
.g-valor-card:hover,
.g-cert-card:hover,
.g-process-step:hover,
.g-envase-item:hover,
.g-banco-item:hover,
.g-porque-item:hover,
.g-proceso-item:hover,
.dtp-product-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(22, 154, 176, 0.32) !important;
  box-shadow:
    0 16px 40px rgba(7, 23, 47, 0.11),
    0 0 0 1px rgba(22, 154, 176, 0.12),
    0 0 32px rgba(22, 154, 176, 0.08) !important;
}

.dtp-product-card.selected {
  border-color: #169ab0 !important;
  box-shadow:
    0 0 0 3px rgba(22, 154, 176, 0.2),
    0 12px 36px rgba(22, 154, 176, 0.15) !important;
}

.g-contact-icon {
  background: linear-gradient(145deg, #1eb3c9, #0e7a8d) !important;
  box-shadow: 0 6px 16px rgba(22, 154, 176, 0.28);
}

/* ---------- Proceso home ---------- */
.hp-num {
  background: linear-gradient(145deg, #0a1e38, #07172f) !important;
  box-shadow: 0 6px 16px rgba(7, 23, 47, 0.2);
}

.hp-icon {
  background: linear-gradient(145deg, #e8f6f9, #dff0f5) !important;
  border-color: rgba(22, 154, 176, 0.25) !important;
}

/* ---------- Wizard / configurador fondos ---------- */
.g-section.g-section-white:has(.g-wizard-wrap),
.g-section:has(.dtp-wrap) {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(22, 154, 176, 0.05), transparent),
    linear-gradient(180deg, #f8fbfc 0%, #ffffff 100%) !important;
}

.dtp-progress-bar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(7, 23, 47, 0.04);
}

.dtp-wrap {
  position: relative;
}

/* ---------- Footer premium ---------- */
.footer,
.g-footer {
  background: linear-gradient(180deg, #f8fbfc 0%, #f2f7f9 100%) !important;
  border-top: 1px solid rgba(22, 154, 176, 0.1) !important;
}

/* ---------- Creamy widget (solo visual) ---------- */
#creamy-v2 .cv2-fab {
  box-shadow:
    0 8px 28px rgba(22, 154, 176, 0.4),
    0 0 0 4px rgba(22, 154, 176, 0.1) !important;
}

#creamy-v2 .cv2-window {
  border: 1px solid rgba(22, 154, 176, 0.12);
  box-shadow:
    0 24px 64px rgba(7, 23, 47, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
}

#creamy-v2 .cv2-header {
  box-shadow: 0 4px 16px rgba(7, 23, 47, 0.08);
}

/* ---------- Mobile upgrade ---------- */
@media (max-width: 768px) {
  .hh-inner {
    min-height: auto !important;
  }

  .hh::before {
    width: 320px;
    height: 320px;
    top: -10%;
    right: -20%;
  }

  .hf-inner {
    transform: translateY(-28px) !important;
  }

  .g-section-head h2::after {
    width: 40px;
    margin-top: 12px;
  }
}

/* ============================================================
   GENUS — PREMIUM LABORATORY V3
   Estética farmacéutica internacional: confianza, ciencia, calidad.
   Sobrescribe v2 donde sea necesario — sin glass ni efectos llamativos.
   ============================================================ */

:root {
  --v3-white: #ffffff;
  --v3-surface: #f7f9fb;
  --v3-surface-alt: #f2f5f8;
  --v3-border: rgba(221, 227, 232, 0.92);
  --v3-border-accent: rgba(22, 154, 176, 0.18);
  --v3-texture: rgba(22, 154, 176, 0.035);
  --v3-shadow-card: 0 1px 2px rgba(7, 23, 47, 0.04), 0 8px 24px rgba(7, 23, 47, 0.05);
  --v3-shadow-hover: 0 4px 12px rgba(7, 23, 47, 0.06), 0 16px 32px rgba(7, 23, 47, 0.07);
  --v3-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --v3-panel-w: min(360px, 90vw);
  --v3-nav-z: 210;
}

/* ---------- Textura científica (2–5% opacidad) ---------- */
@keyframes v3-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  background:
    linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-white) 22%, var(--v3-white) 78%, var(--v3-surface) 100%) !important;
}

/* Textura científica localizada (no global — evita conflictos de stacking) */
.hp::before,
.product-lines::before,
.g-section-light::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath fill='none' stroke='%23169ab0' stroke-opacity='0.04' stroke-width='0.6' d='M28 0l24 14v20L28 48 4 34V14z'/%3E%3C/svg%3E");
  background-size: 56px 48px;
  opacity: 0.85;
}

.product-lines,
.hp,
.g-section-light {
  position: relative;
  overflow: hidden;
}

/* ---------- Nav sólida y profesional ---------- */
.hn,
.g-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--v3-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 20px rgba(7, 23, 47, 0.04) !important;
  backdrop-filter: blur(6px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
}

/* ---------- Hero home — profundidad farmacéutica ---------- */
.hh {
  background:
    linear-gradient(155deg, #eef4f7 0%, #f4f8fa 38%, #fafcfd 72%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--v3-border);
}

.hh::before {
  width: min(520px, 65vw) !important;
  height: min(520px, 65vw) !important;
  top: -22% !important;
  right: -6% !important;
  filter: blur(88px) !important;
  background: radial-gradient(circle, rgba(22, 154, 176, 0.1) 0%, transparent 72%) !important;
}

.hh::after {
  width: min(380px, 50vw) !important;
  height: min(380px, 50vw) !important;
  bottom: -14% !important;
  left: -4% !important;
  filter: blur(72px) !important;
  background: radial-gradient(circle, rgba(14, 122, 141, 0.06) 0%, transparent 70%) !important;
}

.hh-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath fill='none' stroke='%23169ab0' stroke-opacity='0.04' stroke-width='0.6' d='M28 0l24 14v20L28 48 4 34V14z'/%3E%3C/svg%3E");
  background-size: 56px 48px;
  opacity: 0.9;
}

.hh-left h1 {
  text-shadow: none !important;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.hh-left h1 span {
  background: linear-gradient(135deg, #148fa3 0%, #0e7a8d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hh-tag {
  background: var(--v3-white) !important;
  border: 1px solid var(--v3-border-accent) !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 4px rgba(7, 23, 47, 0.04) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.hh-rule {
  width: 48px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #169ab0, rgba(22, 154, 176, 0.12)) !important;
}

.hh-img-wrap {
  filter: drop-shadow(0 16px 40px rgba(7, 23, 47, 0.1)) !important;
}

.hh-right::before {
  background: radial-gradient(ellipse at center, rgba(22, 154, 176, 0.06) 0%, transparent 70%) !important;
}

/* ---------- Hero internas ---------- */
.g-hero::after {
  background: radial-gradient(circle, rgba(22, 154, 176, 0.08) 0%, transparent 68%) !important;
  filter: blur(56px) !important;
}

.g-hero h1 {
  text-shadow: none !important;
}

.g-hero-tag {
  backdrop-filter: none !important;
  background: var(--v3-white) !important;
  border: 1px solid var(--v3-border-accent) !important;
  box-shadow: 0 1px 4px rgba(7, 23, 47, 0.04) !important;
}

/* ---------- Botones refinados (sin glow) ---------- */
.hn-cta,
.hh-btn-cta,
.g-btn-primary,
.g-btn-next,
.g-btn-submit,
.dtp-btn-next {
  background: linear-gradient(180deg, #1aadc2 0%, #169ab0 55%, #128a9e 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(22, 154, 176, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  letter-spacing: 0.06em !important;
}

.hn-cta:hover,
.hh-btn-cta:hover,
.g-btn-primary:hover,
.g-btn-next:hover,
.g-btn-submit:hover,
.dtp-btn-next:hover {
  background: linear-gradient(180deg, #1eb8cf 0%, #18a6bb 55%, #1396ab 100%) !important;
  box-shadow: 0 4px 16px rgba(22, 154, 176, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-2px) !important;
}

.g-btn-final,
.dtp-btn-pay,
.footer a,
.g-footer-cta {
  background: linear-gradient(180deg, #0c2238 0%, #07172f 100%) !important;
  box-shadow: 0 4px 16px rgba(7, 23, 47, 0.16) !important;
}

.g-btn-final:hover,
.dtp-btn-pay:hover,
.footer a:hover,
.g-footer-cta:hover {
  background: linear-gradient(180deg, #169ab0 0%, #0e7a8d 100%) !important;
  box-shadow: 0 6px 20px rgba(22, 154, 176, 0.22) !important;
}

.hh-btn-wa {
  background: var(--v3-white) !important;
  backdrop-filter: none !important;
  border-color: var(--v3-border) !important;
  box-shadow: 0 1px 4px rgba(7, 23, 47, 0.05) !important;
}

.hh-btn-wa:hover {
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* ---------- Beneficios (hf) — tarjetas blancas sólidas ---------- */
.hf-inner {
  background: var(--v3-white) !important;
  border: 1px solid var(--v3-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--v3-shadow-card) !important;
  transform: translateY(-40px) !important;
}

.hf-inner:hover {
  box-shadow: var(--v3-shadow-hover) !important;
}

.hf-item {
  padding: 36px 32px !important;
}

.hf-icon {
  background: linear-gradient(180deg, #1aadc2, #0e7a8d) !important;
  box-shadow: 0 4px 12px rgba(22, 154, 176, 0.18) !important;
}

.hf-item:hover .hf-icon {
  transform: scale(1.02) !important;
}

/* ---------- Secciones alternadas sutiles ---------- */
.g-section-white {
  background: var(--v3-white) !important;
}

.g-section-light {
  background: linear-gradient(180deg, var(--v3-surface) 0%, #f9fbfc 100%) !important;
}

.g-section-light::before,
.g-section-white::before {
  background: linear-gradient(90deg, transparent, rgba(22, 154, 176, 0.08), transparent) !important;
}

.g-section-dark {
  background: linear-gradient(180deg, #061220 0%, #07172f 55%, #0a1e32 100%) !important;
}

.g-section-dark::after {
  background: radial-gradient(circle, rgba(22, 154, 176, 0.06) 0%, transparent 70%) !important;
}

.hp {
  background: linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-white) 100%) !important;
  padding: 56px 0 88px !important;
  position: relative;
}

.product-lines {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(22, 154, 176, 0.03), transparent 55%),
    var(--v3-white) !important;
  padding: 64px 0 56px !important;
}

.g-section-tag {
  background: rgba(22, 154, 176, 0.06) !important;
  border: 1px solid var(--v3-border-accent) !important;
  box-shadow: none !important;
}

.g-section-head h2::after {
  width: 40px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #169ab0, rgba(22, 154, 176, 0.08)) !important;
}

/* ---------- Cards — blanco, borde fino, sombra elegante ---------- */
.product-card,
.g-product-card,
.g-mv-card,
.g-valor-card,
.g-cert-card,
.g-contact-item,
.g-process-step,
.g-envase-item,
.g-banco-item,
.g-porque-item,
.g-proceso-item,
.g-summary-card,
.dtp-product-card,
.dtp-col-img,
.dtp-col-form,
.dtp-order-card {
  background: var(--v3-white) !important;
  border: 1px solid var(--v3-border) !important;
  box-shadow: var(--v3-shadow-card) !important;
  backdrop-filter: none !important;
}

.product-card:hover,
.g-product-card:hover,
.g-mv-card:hover,
.g-valor-card:hover,
.g-cert-card:hover,
.g-process-step:hover,
.g-envase-item:hover,
.g-banco-item:hover,
.g-porque-item:hover,
.g-proceso-item:hover,
.dtp-product-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(22, 154, 176, 0.22) !important;
  box-shadow: var(--v3-shadow-hover) !important;
}

.dtp-product-card.selected {
  border-color: #169ab0 !important;
  box-shadow: 0 0 0 2px rgba(22, 154, 176, 0.12), var(--v3-shadow-hover) !important;
}

.g-contact-icon {
  background: linear-gradient(180deg, #1aadc2, #0e7a8d) !important;
  box-shadow: 0 3px 10px rgba(22, 154, 176, 0.16) !important;
}

/* ---------- Proceso home ---------- */
.hp-num {
  background: linear-gradient(180deg, #0c2238, #07172f) !important;
  box-shadow: 0 2px 8px rgba(7, 23, 47, 0.12) !important;
}

.hp-icon {
  background: #f0f6f8 !important;
  border-color: var(--v3-border-accent) !important;
}

.hp-step:hover {
  transform: translateY(-1px) !important;
}

/* ---------- Wizard / configurador ---------- */
.g-section.g-section-white:has(.g-wizard-wrap),
.g-section:has(.dtp-wrap) {
  background: linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-white) 100%) !important;
}

.dtp-progress-bar {
  background: var(--v3-white) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--v3-border) !important;
  box-shadow: 0 1px 4px rgba(7, 23, 47, 0.03) !important;
}

.dtp-wrap {
  padding-top: 8px !important;
}

.g-progress-step.active span {
  box-shadow: 0 2px 8px rgba(22, 154, 176, 0.2) !important;
}

/* ---------- Footer ---------- */
.footer,
.g-footer {
  background: linear-gradient(180deg, var(--v3-surface) 0%, #eef2f5 100%) !important;
  border-top: 1px solid var(--v3-border) !important;
  padding: 44px 0 !important;
}

/* ---------- Creamy — alineado V3, oculto con menú ---------- */
#creamy-v2 .cv2-fab {
  box-shadow: 0 4px 20px rgba(7, 23, 47, 0.14), 0 2px 8px rgba(22, 154, 176, 0.12) !important;
  transition: opacity 0.35s var(--v3-ease), transform 0.35s var(--v3-ease), box-shadow 0.22s var(--v3-ease) !important;
}

#creamy-v2 .cv2-greeting {
  transition: opacity 0.35s var(--v3-ease), transform 0.35s var(--v3-ease) !important;
}

#creamy-v2 .cv2-window {
  border: 1px solid var(--v3-border) !important;
  box-shadow: 0 16px 48px rgba(7, 23, 47, 0.12), 0 4px 16px rgba(7, 23, 47, 0.06) !important;
}

/* ---------- Espaciado global ---------- */
.g-section {
  padding: clamp(72px, 9vw, 104px) 0 !important;
}

.g-section-head {
  margin-bottom: clamp(52px, 6vw, 80px) !important;
}

.g-hero {
  padding: clamp(80px, 10vw, 108px) 0 clamp(68px, 8vw, 92px) !important;
}

/* Hero mobile refinado (no menú — ver mobile-menu.css) */
@media (max-width: 768px) {
  .hh-left {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--v3-border) !important;
    box-shadow: var(--v3-shadow-card) !important;
    padding: 32px 24px !important;
    margin: 28px 0 !important;
    border-radius: 14px !important;
  }

  .hf-inner {
    transform: translateY(-28px) !important;
    margin: 0 4px !important;
  }

  .hf-item {
    padding: 28px 24px !important;
  }

  .g-section {
    padding: 56px 0 !important;
  }
}