/* ═══════════════════════════════════════════════════════
   IONSA — Sistema de diseño · PGA Industria
   Desarrollado por Easytic · easytic.es
═══════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─── */
:root {
  --bg:          #F2F4F8;
  --surface:     #FFFFFF;
  --ink:         #1A1A2E;
  --ink-mid:     #5A6070;
  --ink-light:   #9BA3B0;

  --cat-a-bg:    #FFE8EC;
  --cat-a-ink:   #C94060;
  --cat-a-mark:  #FBBDCA;
  --cat-a-deep:  #F7C5D0;

  --cat-b-bg:    #E6F4EA;
  --cat-b-ink:   #2E7D4F;
  --cat-b-mark:  #AADCBB;
  --cat-b-deep:  #C3EBD0;

  --cat-c-bg:    #FFF3E0;
  --cat-c-ink:   #B86200;
  --cat-c-mark:  #FFD9A0;
  --cat-c-deep:  #FFE9C0;

  --cat-d-bg:    #EAF0FF;
  --cat-d-ink:   #3455C7;
  --cat-d-mark:  #B3C6FF;
  --cat-d-deep:  #D0DEFF;

  --radius-card: 22px;
  --radius-pill: 40px;
  --ff-display:  'Fraunces', Georgia, serif;
  --ff-body:     'DM Sans', system-ui, sans-serif;
  --ease:        cubic-bezier(.4, 0, .2, 1);
}

/* ─── 2. RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--ff-body);
  background:  var(--bg);
  color:       var(--ink);
  font-size:   16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2.5px solid var(--cat-a-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── 3. PÁGINA HEADER (logo + etiqueta) ─── */
.page-header {
  padding: 2rem clamp(1.5rem, 5vw, 4rem) 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.page-header-logo    { height: 44px; width: auto; }
.page-header-divider { width: 1px; height: 28px; background: rgba(26,26,46,.15); }
.page-header-label   {
  font-family: var(--ff-display);
  font-size: .875rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-mid);
}

/* ─── 4. BREADCRUMB ─── */
.breadcrumb {
  padding: 1.25rem clamp(1.5rem, 5vw, 4rem) 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--ink-light);
  flex-wrap: wrap;
}
.breadcrumb a          { color: var(--ink-light); transition: color .2s var(--ease); }
.breadcrumb a:hover    { color: var(--ink-mid); }
.breadcrumb-sep        { font-size: .625rem; }
.breadcrumb-current    { color: var(--ink-mid); font-weight: 500; }

/* ─── 5. BOTONES ─── */
.btn-primary {
  font-family: var(--ff-body);
  font-size: .9375rem;
  font-weight: 600;
  padding: .8125rem 1.75rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-pill);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-primary:hover { opacity: .85; transform: translateY(-1px); }

.btn-secondary {
  font-family: var(--ff-body);
  font-size: .9375rem;
  font-weight: 500;
  padding: .8125rem 1.75rem;
  border: 1.5px solid rgba(26,26,46,.18);
  color: var(--ink-mid);
  border-radius: var(--radius-pill);
  transition: border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }

.btn-contact {
  font-size: .9375rem;
  font-weight: 600;
  padding: .875rem 1.75rem;
  color: #fff;
  border-radius: var(--radius-pill);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-contact:hover { opacity: .87; transform: translateY(-1px); }

.btn-pdf {
  font-size: .9375rem;
  font-weight: 500;
  padding: .875rem 1.75rem;
  border: 1.5px solid rgba(26,26,46,.18);
  color: var(--ink-mid);
  border-radius: var(--radius-pill);
  transition: border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-pdf:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }

/* ─── 6. HERO (hub) ─── */
.hero {
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cat-a-ink);
  background: var(--cat-a-bg);
  padding: .375rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.hero-title em { font-style: italic; font-weight: 300; color: var(--ink-mid); }
.hero-body {
  font-size: 1.0625rem;
  color: var(--ink-mid);
  line-height: 1.7;
  max-width: 42ch;
  margin-bottom: 2.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-visual  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-pill    {
  background: var(--surface);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
}
.hero-pill img { width: 100%; height: 100%; object-fit: cover; }
.hero-pill:nth-child(1) { margin-top: 2.5rem; }
.hero-pill:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16/7; }
.hero-badge {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: .625rem .875rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink);
}
.hero-badge span {
  display: block;
  font-weight: 400;
  color: var(--ink-mid);
  font-size: .6875rem;
  margin-top: 1px;
}

/* ─── 7. STATS STRIP ─── */
.stats { background: var(--ink); padding: 2rem clamp(1.5rem, 5vw, 4rem); }
.stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: clamp(2rem, 6vw, 5rem);
  flex-wrap: wrap;
}
.stat        { display: flex; flex-direction: column; }
.stat-number {
  font-family: var(--ff-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stat-label  { font-size: .8125rem; color: rgba(255,255,255,.5); margin-top: .3rem; }

/* ─── 8. SECCIÓN (hub) ─── */
.section {
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
}
.section-header  { margin-bottom: 3rem; }
.section-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: .75rem;
}
.section-title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.section-title em { font-style: italic; font-weight: 300; }

/* ─── 9. CATEGORÍAS (hub) ─── */
.category        { margin-bottom: clamp(3rem, 6vw, 5rem); }
.category-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .4375rem 1.125rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.category-pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.category-desc { font-size: .875rem; color: var(--ink-mid); }

/* ─── 10. GRID DE TARJETAS ─── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ─── 11. TARJETA DE PRODUCTO ─── */
.card {
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border: 1.5px solid transparent;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  position: relative;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(26,26,46,.12);
}
.card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card-img img { transform: scale(1.06); }

.card-initial {
  position: absolute;
  bottom: -.25rem; right: .5rem;
  font-family: var(--ff-display);
  font-size: 6.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.22);
  pointer-events: none;
  user-select: none;
  transition: transform .4s var(--ease);
  z-index: 1;
}
.card:hover .card-initial { transform: scale(1.1) translateY(-4px); }

.card-badge {
  position: absolute;
  top: .875rem; left: .875rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.25rem;
}
.card-name {
  font-family: var(--ff-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
  margin-bottom: .5rem;
  color: var(--ink);
}
.card-tagline {
  font-size: .875rem;
  color: var(--ink-mid);
  line-height: 1.55;
  margin-bottom: 1.125rem;
  flex: 1;
}
.card-props   { display: flex; gap: .625rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.card-footer  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(26,26,46,.07);
}
.card-norm {
  font-size: .6875rem;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.card-norm::before { content: '✓'; font-weight: 700; font-size: .7rem; }
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  color: #fff;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  flex-shrink: 0;
}
.card-cta svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.card:hover .card-cta svg { transform: translateX(2px); }

/* Propiedades compartidas */
.prop {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .6875rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: 8px;
  background: rgba(255,255,255,.8);
  color: var(--ink-mid);
  border: 1px solid rgba(26,26,46,.09);
}
.prop svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ─── 12. VARIANTES DE CATEGORÍA ─── */
/* Categoría A — Desinfección (rosa) */
.cat-a .card          { border-color: var(--cat-a-mark); }
.cat-a .card-body     { background: var(--cat-a-bg); }
.cat-a .card-img      { background: var(--cat-a-deep); }
.cat-a .card-badge    { color: var(--cat-a-ink); }
.cat-a .card-cta      { background: var(--cat-a-ink); }
.cat-a .category-pill { background: var(--cat-a-bg); color: var(--cat-a-ink); }

/* Categoría B — Desengrase (verde) */
.cat-b .card          { border-color: var(--cat-b-mark); }
.cat-b .card-body     { background: var(--cat-b-bg); }
.cat-b .card-img      { background: var(--cat-b-deep); }
.cat-b .card-badge    { color: var(--cat-b-ink); }
.cat-b .card-cta      { background: var(--cat-b-ink); }
.cat-b .category-pill { background: var(--cat-b-bg); color: var(--cat-b-ink); }

/* Categoría C — Higiene manos (melocotón) */
.cat-c .card          { border-color: var(--cat-c-mark); }
.cat-c .card-body     { background: var(--cat-c-bg); }
.cat-c .card-img      { background: var(--cat-c-deep); }
.cat-c .card-badge    { color: var(--cat-c-ink); }
.cat-c .card-cta      { background: var(--cat-c-ink); }
.cat-c .category-pill { background: var(--cat-c-bg); color: var(--cat-c-ink); }

/* Categoría D — Higiene ambiental (azul) */
.cat-d .card          { border-color: var(--cat-d-mark); }
.cat-d .card-body     { background: var(--cat-d-bg); }
.cat-d .card-img      { background: var(--cat-d-deep); }
.cat-d .card-badge    { color: var(--cat-d-ink); }
.cat-d .card-cta      { background: var(--cat-d-ink); }
.cat-d .category-pill { background: var(--cat-d-bg); color: var(--cat-d-ink); }

/* ─── 13. ACENTO DE PÁGINA (fichas individuales) ─── */
/* Se aplican mediante style="" inline en el <body> o en un <style> mínimo
   que solo define --accent, --accent-bg, --accent-mark, --accent-deep */
.accent       { color: var(--accent, var(--cat-a-ink)); }
.accent-bg    { background: var(--accent-bg, var(--cat-a-bg)); }
.accent-mark  { color: var(--accent-mark, var(--cat-a-mark)); }

/* ─── 14. HERO DE FICHA DE PRODUCTO ─── */
.product-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.product-hero-img {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.product-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.product-hero-initial {
  position: absolute;
  bottom: -.5rem; right: .5rem;
  font-family: var(--ff-display);
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.2);
  pointer-events: none;
  user-select: none;
}
.product-hero-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .875rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.product-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: .5rem;
}
.product-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .375rem 1rem;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.product-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.product-title {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.product-subtitle { font-size: 1.125rem; color: var(--ink-mid); line-height: 1.6; }
.product-props    { display: flex; gap: .625rem; flex-wrap: wrap; }
.product-actions  { display: flex; gap: .875rem; flex-wrap: wrap; }
.product-norm {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  color: var(--ink-light);
  padding: .75rem 1rem;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(26,26,46,.07);
  line-height: 1.5;
}
.product-norm::before { content: '✓'; font-weight: 700; flex-shrink: 0; margin-top: .05rem; }

/* ─── 15. CUERPO DE FICHA ─── */
.product-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.product-grid-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}
.content-section { margin-bottom: 2.5rem; }
.content-section:last-child { margin-bottom: 0; }
.section-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .875rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent, var(--cat-a-ink));
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(26,26,46,.1);
}
.section-text { font-size: .9375rem; color: var(--ink-mid); line-height: 1.75; }

/* Steps */
.steps   { display: flex; flex-direction: column; gap: .75rem; }
.step    { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent, var(--cat-a-ink));
  margin-top: .1rem;
}
.step-text { font-size: .9375rem; color: var(--ink-mid); line-height: 1.6; padding-top: .25rem; }

/* Tabla de dosificaciones */
.dosage-table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-top: .75rem; }
.dosage-table th {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: .5rem .75rem;
  text-align: left;
  border-bottom: 1px solid rgba(26,26,46,.1);
}
.dosage-table td { padding: .625rem .75rem; border-bottom: 1px solid rgba(26,26,46,.06); color: var(--ink-mid); }
.dosage-table tr:last-child td { border-bottom: none; }
.dosage-table tr:nth-child(even) td { background: rgba(26,26,46,.02); }

/* ─── 16. SIDEBAR ─── */
.sidebar       { display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar-card  {
  background: var(--surface);
  border-radius: 18px;
  padding: 1.5rem;
  border: 1.5px solid rgba(26,26,46,.07);
}
.sidebar-card-title { font-family: var(--ff-display); font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(26,26,46,.06);
  font-size: .875rem;
}
.sidebar-row:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-key { color: var(--ink-light); font-size: .8125rem; flex-shrink: 0; }
.sidebar-val { color: var(--ink); font-weight: 500; text-align: right; }
.reg-block {
  font-size: .8rem;
  color: var(--ink-light);
  line-height: 1.6;
  background: rgba(26,26,46,.03);
  border-radius: 10px;
  padding: .875rem 1rem;
}
.reg-block strong {
  display: block;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .4rem;
  color: var(--ink-mid);
}
.sidebar-cta {
  padding: 1.5rem;
  border-radius: 18px;
  border: 1.5px solid;
}
.sidebar-cta-title { font-family: var(--ff-display); font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.sidebar-cta-text  { font-size: .875rem; color: var(--ink-mid); margin-bottom: 1rem; line-height: 1.6; }
.btn-contact-full  {
  width: 100%;
  justify-content: center;
  display: flex;
}

/* ─── 17. BANDA CTA (hub) ─── */
.cta-band {
  background: var(--cat-a-bg);
  border-radius: 28px;
  margin: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 7vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.cta-title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: .5rem;
}
.cta-sub     { font-size: 1rem; color: var(--ink-mid); }
.cta-actions { display: flex; gap: .875rem; flex-wrap: wrap; flex-shrink: 0; }
.btn-cta {
  font-size: .9375rem;
  font-weight: 600;
  padding: .875rem 2rem;
  background: var(--cat-a-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ─── 18. PRODUCTOS RELACIONADOS ─── */
.related       { background: var(--ink); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); }
.related-inner { max-width: 1200px; margin: 0 auto; }
.related-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: .75rem;
}
.related-title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 2rem;
}
.related-title em { font-style: italic; font-weight: 300; color: rgba(255,255,255,.6); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.related-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.related-card:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.related-card-img   { aspect-ratio: 16/9; overflow: hidden; }
.related-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.related-card:hover .related-card-img img { transform: scale(1.05); }
.related-card-body  { padding: 1.125rem 1.25rem 1.25rem; }
.related-card-cat   {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .4rem;
}
.related-card-name  { font-family: var(--ff-display); font-size: 1.125rem; font-weight: 700; color: #fff; margin-bottom: .375rem; }
.related-card-desc  { font-size: .8125rem; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ─── 19. FOOTER ─── */
footer {
  border-top: 1px solid rgba(26,26,46,.08);
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg);
}
.footer-credit      { font-size: .75rem; color: var(--ink-light); }
.footer-credit a    { color: var(--ink-mid); transition: color .2s var(--ease); }
.footer-credit a:hover { color: var(--ink); }

/* ─── 20. RESPONSIVE ─── */
@media (max-width: 900px) {
  .hero                 { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual          { display: none; }
  .product-hero         { grid-template-columns: 1fr; }
  .product-grid-content { grid-template-columns: 1fr; }
  .sidebar              { display: contents; }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
  .stats-inner  { gap: 1.5rem 3rem; }
  footer        { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ─── 21. CLASES DE ACENTO POR CATEGORÍA (fichas) ─── */
/* Sustituyen todos los style="" inline en las fichas */

/* Imagen hero de ficha */
.cat-a .product-hero-img { background: var(--cat-a-deep); }
.cat-b .product-hero-img { background: var(--cat-b-deep); }
.cat-c .product-hero-img { background: var(--cat-c-deep); }
.cat-d .product-hero-img { background: var(--cat-d-deep); }

/* Badge de ficha */
.cat-a .product-hero-badge { color: var(--cat-a-ink); }
.cat-b .product-hero-badge { color: var(--cat-b-ink); }
.cat-c .product-hero-badge { color: var(--cat-c-ink); }
.cat-d .product-hero-badge { color: var(--cat-d-ink); }

/* Eyebrow de ficha */
.cat-a .product-eyebrow { background: var(--cat-a-bg); color: var(--cat-a-ink); }
.cat-b .product-eyebrow { background: var(--cat-b-bg); color: var(--cat-b-ink); }
.cat-c .product-eyebrow { background: var(--cat-c-bg); color: var(--cat-c-ink); }
.cat-d .product-eyebrow { background: var(--cat-d-bg); color: var(--cat-d-ink); }

/* Número de paso */
.cat-a .step-num { background: var(--cat-a-ink); }
.cat-b .step-num { background: var(--cat-b-ink); }
.cat-c .step-num { background: var(--cat-c-ink); }
.cat-d .step-num { background: var(--cat-d-ink); }

/* Etiqueta de sección */
.cat-a .section-label { color: var(--cat-a-ink); }
.cat-b .section-label { color: var(--cat-b-ink); }
.cat-c .section-label { color: var(--cat-c-ink); }
.cat-d .section-label { color: var(--cat-d-ink); }

/* Botón principal de contacto */
.cat-a .btn-contact { background: var(--cat-a-ink); }
.cat-b .btn-contact { background: var(--cat-b-ink); }
.cat-c .btn-contact { background: var(--cat-c-ink); }
.cat-d .btn-contact { background: var(--cat-d-ink); }

/* Sidebar CTA */
.cat-a .sidebar-cta { background: var(--cat-a-bg); border-color: var(--cat-a-mark); }
.cat-b .sidebar-cta { background: var(--cat-b-bg); border-color: var(--cat-b-mark); }
.cat-c .sidebar-cta { background: var(--cat-c-bg); border-color: var(--cat-c-mark); }
.cat-d .sidebar-cta { background: var(--cat-d-bg); border-color: var(--cat-d-mark); }

/* Inicial hero (marca de agua) */
.cat-a .product-hero-initial { color: var(--cat-a-mark); }
.cat-b .product-hero-initial { color: var(--cat-b-mark); }
.cat-c .product-hero-initial { color: var(--cat-c-mark); }
.cat-d .product-hero-initial { color: var(--cat-d-mark); }

/* Logo footer */
.footer-logo {
  height: 32px;
  width: auto;
  opacity: .6;
}

/* SVG sprite oculto */
.svg-sprite { display: none; }