/* v5.8.0: tarjetas comerciales trasladadas a catalogo-theme v167. */
/* Dermaroller.es · Inicio en pruebas · v2 · 2026-10-19
   Complemento de catalogo-theme v166. No sustituye el tema compartido.
   Alcance: #drCatalogPage.drh-home. Sin reglas para el menu ni xr_*.
   Guía, comparador, diálogos y selectores: motor v139 / datos v29 intactos.
*/
#drCatalogPage.drh-home {
  max-width:1160px;
  padding-right:24px;
  padding-left:24px;
  padding-bottom:40px;
}
#drCatalogPage.drh-home .drh-hero {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:48px;
  row-gap:20px;
  align-items:center;
  margin:0 0 48px;
}
#drCatalogPage.drh-home .drh-hero-copy {grid-column:1;grid-row:1;min-width:0;}
#drCatalogPage.drh-home .drh-hero h1 {
  font-size:clamp(32px,4vw,46px);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.035em;
  text-wrap:balance;
}
#drCatalogPage.drh-home .drh-title-sub {
  display:block;
  margin-top:7px;
  font-size:.74em;
  line-height:1.22;
  font-weight:400;
  letter-spacing:-.018em;
}
#drCatalogPage.drh-home .drh-intro {
  max-width:540px;
  margin-top:18px;
  color:var(--dc-muted);
  font-size:17px;
  line-height:1.6;
  text-wrap:pretty;
}
#drCatalogPage.drh-home .drh-hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:24px;
}
#drCatalogPage.drh-home .drh-hero-actions > .drc-button {
  width:auto;
  min-height:50px;
  padding:12px 20px;
  gap:18px;
  font-size:15px;
}
#drCatalogPage.drh-home .drh-hero-actions > .drc-text-link {font-size:14px;}
#drCatalogPage.drh-home .drh-hero > .drh-guide {
  grid-column:1;
  grid-row:2;
  align-self:start;
  min-width:0;
  margin:0;
}
#drCatalogPage.drh-home .drh-hero > .drh-guide[open] {grid-column:1 / -1;}
#drCatalogPage.drh-home .drh-hero-visual {
  grid-column:2;
  grid-row:1 / span 2;
  justify-self:center;
  align-self:center;
  width:100%;
  max-width:370px;
  margin:0;
}
/* Al desplegarse en escritorio, la herramienta ocupa el ancho completo.
   No se cambian ni sus etapas ni las dimensiones de sus dialogos. */
#drCatalogPage.drh-home .drh-hero:has(> .drh-guide[open]) > .drh-hero-visual {grid-row:1;}
#drCatalogPage.drh-home .drh-hero-visual img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
}
#drCatalogPage.drh-home .drh-catalog-head {align-items:flex-start;margin-bottom:22px;}
#drCatalogPage.drh-home .drh-catalog-head h2 {font-size:clamp(25px,2.6vw,32px);}
#drCatalogPage.drh-home .drh-catalog-head h2 + p {
  max-width:700px;
  font-size:15px;
  line-height:1.6;
}
#drCatalogPage.drh-home .drh-products-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
/* Solo las tres tarjetas de esta maqueta. No alcanza a los resultados. */












#drCatalogPage.drh-home .drh-preview-note {
  margin:24px 0 0;
  padding:18px 0 0;
  border-top:.5px solid var(--dc-border);
  font-size:12px;
  color:var(--dc-muted);
  text-align:center;
}
@media (min-width:768px) and (max-width:1099px) {
  #drCatalogPage.drh-home .drh-hero {column-gap:26px;}
  #drCatalogPage.drh-home .drh-hero-visual {max-width:300px;}
  #drCatalogPage.drh-home .drh-products-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  
}
@media (max-width:767px) {
  #drCatalogPage.drh-home {padding-left:18px;padding-right:18px;}
  #drCatalogPage.drh-home .drh-hero {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    margin-bottom:32px;
  }
  #drCatalogPage.drh-home .drh-hero-copy {grid-column:1;grid-row:1;}
  #drCatalogPage.drh-home .drh-hero h1 {font-size:33px;line-height:1.15;}
  #drCatalogPage.drh-home .drh-title-sub {font-size:24px;line-height:1.25;}
  #drCatalogPage.drh-home .drh-intro {margin-top:14px;font-size:16px;line-height:1.55;}
  #drCatalogPage.drh-home .drh-hero-actions {margin-top:18px;gap:5px;flex-direction:column;align-items:stretch;}
  #drCatalogPage.drh-home .drh-hero-actions > .drc-button {width:100%;justify-content:space-between;}
  #drCatalogPage.drh-home .drh-hero-actions > .drc-text-link {align-self:flex-start;}
  /* Movil: primero los textos de presentación, despues la fotografia, finalmente la guia. */
  #drCatalogPage.drh-home .drh-hero > .drh-guide {grid-column:1;grid-row:3;}
  #drCatalogPage.drh-home .drh-hero > .drh-hero-visual,
  #drCatalogPage.drh-home .drh-hero:has(> .drh-guide[open]) > .drh-hero-visual {
    grid-column:1;grid-row:2;max-width:220px;
  }
  #drCatalogPage.drh-home .drh-catalog-head {margin-bottom:18px;}
  #drCatalogPage.drh-home .drh-catalog-head h2 + p {max-width:none;font-size:14px;}
  #drCatalogPage.drh-home .drh-products-grid {grid-template-columns:minmax(0,1fr);gap:18px;}
  
  
  
  
  
  
}
@media (max-width:350px) {
  #drCatalogPage.drh-home {padding-left:14px;padding-right:14px;}
  #drCatalogPage.drh-home .drh-hero h1 {font-size:30px;}
  #drCatalogPage.drh-home .drh-title-sub {font-size:22px;}
  
  
  
  
  
}

/* v2 · Solo ampliaciones de Inicio. Los estilos v1 anteriores no se cambian.
   Sin reglas nuevas para html/body, el menú, xr_* o los diálogos compartidos. */
#drCatalogPage.drh-home .drh-cleaner-shortcut {margin-top:6px;}
#drCatalogPage.drh-home .drh-information-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px 32px;
  margin-bottom:24px;
}
#drCatalogPage.drh-home .drh-information-head > div {min-width:0;}
#drCatalogPage.drh-home .drh-information-head h2 + p {
  max-width:660px;
  margin-top:10px;
  color:var(--dc-muted);
  font-size:14px;
  line-height:1.6;
}
#drCatalogPage.drh-home .drh-information-head > a {font-size:14px;}
#drCatalogPage.drh-home .drh-topic-groups {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
#drCatalogPage.drh-home .drh-topic-group {
  min-width:0;
  margin:0;
  padding:16px 0 0;
  border:0;
  border-top:2px solid var(--dc-accent-border);
  background:transparent;
}
#drCatalogPage.drh-home .drh-topic-group h3 {
  margin:0 0 10px;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
}
#drCatalogPage.drh-home .drh-topic-links {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}
#drCatalogPage.drh-home .drh-topic-links > li {
  display:block;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
#drCatalogPage.drh-home .drh-topic-links a {
  display:flex;
  align-items:center;
  min-height:44px;
  height:100%;
  padding:9px 4px;
  border-bottom:.5px solid var(--dc-border);
  color:var(--dc-accent);
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
#drCatalogPage.drh-home .drh-resource-links {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0;
}
#drCatalogPage.drh-home .drh-resource-links a {
  justify-content:center;
  min-width:0;
  min-height:56px;
  padding:12px;
  border:.5px solid var(--dc-border);
  border-radius:11px;
  background:#fff;
  font-size:14px;
  line-height:1.4;
}
#drCatalogPage.drh-home .drh-footer {padding-right:0;padding-left:0;}
#drCatalogPage.drh-home .drh-footer-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px 28px;
  margin:0 0 18px;
  padding:0;
}
#drCatalogPage.drh-home .drh-footer-links a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:7px 3px;
  color:var(--dc-accent);
  font-size:13px;
  line-height:1.45;
}
@media (hover:hover) {
  #drCatalogPage.drh-home .drh-topic-links a:hover,
  #drCatalogPage.drh-home .drh-footer-links a:hover {
    color:var(--dc-hover);
    text-decoration:underline;
    text-underline-offset:3px;
  }
}
@media (max-width:767px) {
  #drCatalogPage.drh-home .drh-information-head {
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    margin-bottom:20px;
  }
  #drCatalogPage.drh-home .drh-information-head > a {justify-self:start;}
  #drCatalogPage.drh-home .drh-topic-groups {grid-template-columns:minmax(0,1fr);gap:22px;}
  #drCatalogPage.drh-home .drh-topic-links {grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;}
  #drCatalogPage.drh-home .drh-resource-links {grid-template-columns:minmax(0,1fr);gap:8px;}
  #drCatalogPage.drh-home .drh-resource-links a {justify-content:flex-start;min-height:50px;padding:12px 16px;}
  #drCatalogPage.drh-home .drh-footer-links {gap:0 18px;}
}
@media (max-width:350px) {
  
  
  
  #drCatalogPage.drh-home .drh-topic-links {column-gap:12px;}
}

/* v3 · Identidad de Inicio y explorador visual de necesidades.
   Exclusivo de .drh-home. Sin reglas para menú, Xara, html/body o overlays.
   El dorado procede del producto; marfil de las tarjetas anteriores.
*/
#drCatalogPage.drh-home .drh-hero {
  padding:18px 0 26px;
  border-bottom:1px solid var(--dc-accent-border);
  background:linear-gradient(115deg,transparent 36%,rgba(234,245,243,.5) 72%,transparent);
}
#drCatalogPage.drh-home .drh-hero-copy::before {
  content:"";display:block;width:64px;height:4px;margin:0 0 17px;
  border-radius:3px;background:linear-gradient(90deg,#007782 0 70%,#c2a052 70%);
}
#drCatalogPage.drh-home .drh-hero-visual {
  position:relative;isolation:isolate;max-width:400px;
  background:radial-gradient(ellipse at 50% 48%,#fffaf1 0 25%,#e2f0eb 55%,transparent 71%);
}
#drCatalogPage.drh-home .drh-hero-visual::before {
  content:"";position:absolute;inset:10% 6%;z-index:-1;
  border:1px solid #c8ad73;border-left-color:transparent;border-bottom-color:transparent;
  border-radius:50%;transform:rotate(-24deg);pointer-events:none;
}

#drCatalogPage.drh-home .drh-information {
  min-width:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  background:transparent;
}
#drCatalogPage.drh-home .drh-information-head {margin-bottom:24px;}
#drCatalogPage.drh-home .drh-needs-section {min-width:0;}
#drCatalogPage.drh-home .drh-needs {
  position:relative;min-width:0;border-radius:20px;padding:68px 0 18px;
  background:#DCE6E4;
  color:var(--dc-text);
}
#drCatalogPage.drh-home .drh-needs-viewport {
  width:100%;max-width:100%;min-width:0;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
}
/* Sans JS: all twelve real cards remain available in a native scroll strip. */
#drCatalogPage.drh-home .drh-needs-track {
  display:flex;align-items:stretch;gap:20px;padding:26px 22px 32px;
}
#drCatalogPage.drh-home .drh-need {
  position:relative;flex:0 0 min(80%,380px);min-width:0;
  display:flex;flex-direction:column;margin:0;border:1px solid #d8e5dd;
  border-radius:18px;overflow:hidden;background:#fff6ef;color:var(--dc-text);
  box-shadow:0 14px 32px rgba(0,0,0,.18);scroll-snap-align:center;
  backface-visibility:hidden;
}
#drCatalogPage.drh-home .drh-need-media {
  position:relative;aspect-ratio:290 / 194;flex:none;min-width:0;
  width:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  overflow:hidden;background:#edf2ed;
}
#drCatalogPage.drh-home .drh-need-media img {
  display:block;width:100%;height:100%;object-fit:contain;aspect-ratio:290 / 194;
  margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  -webkit-user-drag:none;user-select:none;
}
#drCatalogPage.drh-home .drh-need-image-fallback {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;background:linear-gradient(135deg,#e7f3ef,#fff6ef);
  color:#4b6462;font-size:14px;
}
#drCatalogPage.drh-home .drh-need-copy {
  display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:10px;padding:22px;
}
#drCatalogPage.drh-home .drh-need-category {
  font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#366762;
}
#drCatalogPage.drh-home .drh-need-copy h3 {
  font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.03em;
  overflow-wrap:break-word;
}
#drCatalogPage.drh-home .drh-need-description {
  font-size:15px;line-height:1.55;min-height:3.1em;color:#526264;
}
#drCatalogPage.drh-home .drh-need-action {
  width:100%;min-height:46px;padding:11px 15px;margin-top:auto;justify-content:space-between;
  font-size:14px;line-height:1.4;
}
/* Enhanced stage: only the central card is focusable/read as active.
   Height is measured from every untransformed card, not from active text. */
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-needs-viewport {
  overflow:hidden;touch-action:pan-y pinch-zoom;scroll-snap-type:none;cursor:grab;
  padding-bottom:40px; /* Permite desvanecer la sombra 3D antes del límite visible. */
}
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-needs-track {
  position:relative;display:block;padding:0;height:var(--drh-stage-height,540px);
  perspective:1100px;perspective-origin:50% 42%;
}
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need {
  position:absolute;top:26px;left:50%;width:min(54%,390px);margin:0;
  transform:translateX(-50%) translateX(var(--drh-x,0px)) translateZ(var(--drh-z,0px))
    rotateY(var(--drh-yaw,0deg)) scale(var(--drh-scale,1));
  opacity:var(--drh-opacity,1);z-index:var(--drh-layer,1);visibility:hidden;
  transition:transform .46s cubic-bezier(.22,.72,.25,1),opacity .32s ease;
  will-change:auto;
}
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need[data-near="true"] {visibility:visible;}
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need[aria-hidden="true"] {cursor:pointer;}
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need[aria-hidden="true"] .drh-need-action {pointer-events:none !important;}
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need.is-active {
  box-shadow:0 22px 42px rgba(0,0,0,.28),0 0 0 1px rgba(238,215,156,.45);
}
#drCatalogPage.drh-home .drh-needs.is-dragging .drh-need {transition:none;user-select:none;}
#drCatalogPage.drh-home .drh-needs.is-dragging .drh-needs-viewport {cursor:grabbing;}
#drCatalogPage.drh-home .drh-needs .drh-needs-viewport:focus-visible {
  outline:3px solid var(--dc-accent) !important;outline-offset:-4px;
}
#drCatalogPage.drh-home .drh-topic-index {margin-top:6px;}
#drCatalogPage.drh-home .drh-topic-index > summary {
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:12px 0;color:var(--dc-accent);font-size:14px;font-weight:600;
}
#drCatalogPage.drh-home .drh-topic-index .drh-topic-groups {padding:12px 0;}
#drCatalogPage.drh-home .drh-resource-links a {
  border-color:var(--dc-accent-border);background:linear-gradient(125deg,#fff,#f0f7f4);
}
#drCatalogPage.drh-home .drh-resource-links .drc-icon {
  box-sizing:content-box;padding:9px;border-radius:50%;background:#e0efea;color:#007782;
}
#drCatalogPage.drh-home .drh-sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}
@media (min-width:768px) and (max-width:1099px) {
  #drCatalogPage.drh-home .drh-hero-visual {max-width:320px;}
  #drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need {width:min(61%,360px);}
}
@media (max-width:767px) {
  #drCatalogPage.drh-home .drh-hero {padding-top:4px;padding-bottom:18px;}
  #drCatalogPage.drh-home .drh-hero-copy::before {margin-bottom:12px;width:48px;height:3px;}
  #drCatalogPage.drh-home .drh-hero > .drh-hero-visual,
  #drCatalogPage.drh-home .drh-hero:has(> .drh-guide[open]) > .drh-hero-visual {max-width:238px;}
  
  #drCatalogPage.drh-home .drh-information-head h2 {font-size:25px;}
  /* El carrusel sigue a sangre; el bloque informativo ya no tiene caja ni relleno propio. */
  #drCatalogPage.drh-home .drh-needs {
    width:100vw;max-width:none;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-radius:0;padding-top:76px;
  }
  #drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need {width:79%;top:22px;}
  #drCatalogPage.drh-home .drh-need-copy {padding:17px;gap:8px;}
  #drCatalogPage.drh-home .drh-need-copy h3 {font-size:25px;}
  #drCatalogPage.drh-home .drh-need-description {font-size:14px;}
  #drCatalogPage.drh-home .drh-need-action {font-size:14px;min-height:46px;}
  }
@media (max-width:350px) {
  #drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need {width:82%;}
  #drCatalogPage.drh-home .drh-need-copy {padding:14px;}
  #drCatalogPage.drh-home .drh-need-copy h3 {font-size:22px;}
  #drCatalogPage.drh-home .drh-need-action {font-size:13px;gap:8px;}
}
/* Reduced motion: same photos and destinations; no perspective,
   dragging preview, scaling or animated displacement. No autoplay in any mode. */
@media (prefers-reduced-motion:reduce) {
  #drCatalogPage.drh-home .drh-needs.is-enhanced .drh-needs-track {perspective:none;}
  #drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need {
    transform:translateX(-50%);transition:none;opacity:1;
  }
  #drCatalogPage.drh-home .drh-needs.is-enhanced .drh-need[aria-hidden="true"] {visibility:hidden;pointer-events:none;}
}
@media (forced-colors:active) {
  #drCatalogPage.drh-home .drh-needs {border:1px solid CanvasText;}
  #drCatalogPage.drh-home .drh-need {border:2px solid CanvasText;}
}


/* Inicio v5 · 2026-10-20 · Conoce el producto.
   Solo contenido editorial nuevo. La base visual v3 anterior permanece intacta.
   Se coloca tras el carrusel/directorio: no desplaza sus controles ni las tarjetas.
   Sin cambios en menu, guia, comparador, catalogo o preferencias de movimiento. */
#drCatalogPage.drh-home .drh-knowledge {
  min-width:0;
  margin-top:22px;
  padding-top:28px;
  border-top:1px solid var(--dc-accent-border);
}
#drCatalogPage.drh-home .drh-knowledge-lead {
  display:grid;
  grid-template-columns:176px minmax(0,1fr);
  column-gap:28px;
  row-gap:12px;
  align-items:start;
}
#drCatalogPage.drh-home .drh-knowledge-photo {
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  width:100%;
  min-width:0;
  padding:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border:1px solid var(--dc-accent-border);
  border-radius:24px;
  background:radial-gradient(ellipse at 50% 50%,#fff6ef,#eaf5f3 76%);
}
#drCatalogPage.drh-home .drh-knowledge-photo img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1;
  object-fit:cover;
  object-position:50% 50%;
}
#drCatalogPage.drh-home .drh-knowledge-title {
  grid-column:2;
  grid-row:1;
  align-self:end;
  font-size:clamp(22px,2.4vw,27px);
  line-height:1.22;
  font-weight:600;
  letter-spacing:-.025em;
  text-wrap:balance;
}
#drCatalogPage.drh-home .drh-knowledge-summary {
  grid-column:2;
  grid-row:2;
  min-width:0;
}
#drCatalogPage.drh-home .drh-knowledge :is(.drh-knowledge-summary,.drh-knowledge-section) > p {
  font-size:15px;
  line-height:1.6;
  color:#4d5f62;
  overflow-wrap:break-word;
}
#drCatalogPage.drh-home .drh-knowledge :is(.drh-knowledge-summary,.drh-knowledge-section) > p + p {
  margin-top:10px;
}
#drCatalogPage.drh-home .drh-knowledge-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 22px;
  margin-top:8px;
}
#drCatalogPage.drh-home .drh-knowledge .drc-text-link {
  min-height:44px;
  max-width:100%;
  gap:9px;
  padding:9px 0;
  font-size:14px;
  line-height:1.45;
}
#drCatalogPage.drh-home .drh-knowledge .drc-text-link .drc-icon {flex:0 0 18px;}
#drCatalogPage.drh-home .drh-knowledge-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:26px;
}
#drCatalogPage.drh-home .drh-knowledge-section {
  min-width:0;
  padding:18px 0 0;
  border-top:2px solid var(--dc-accent-border);
}
#drCatalogPage.drh-home .drh-knowledge-section h3 {
  margin-bottom:10px;
  font-size:19px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.015em;
}
#drCatalogPage.drh-home .drh-knowledge-section > .drc-text-link {margin-top:7px;}
#drCatalogPage.drh-home .drh-knowledge-note {
  margin-top:18px;
  padding:16px 18px;
  border-left:3px solid var(--dc-accent);
  border-radius:0 12px 12px 0;
  background:#f6f9f8;
  color:#4d5f62;
  font-size:13px;
  line-height:1.65;
}
#drCatalogPage.drh-home .drh-knowledge-note strong {font-weight:600;color:var(--dc-text);}
@media (max-width:767px) {
  #drCatalogPage.drh-home .drh-knowledge {margin-top:18px;padding-top:22px;}
  #drCatalogPage.drh-home .drh-knowledge-lead {
    grid-template-columns:90px minmax(0,1fr);
    column-gap:16px;
    row-gap:16px;
    align-items:center;
  }
  #drCatalogPage.drh-home .drh-knowledge-photo {grid-row:1;border-radius:17px;}
  #drCatalogPage.drh-home .drh-knowledge-title {align-self:center;font-size:23px;}
  #drCatalogPage.drh-home .drh-knowledge-summary {grid-column:1 / -1;grid-row:2;}
  #drCatalogPage.drh-home .drh-knowledge-links {gap:0 16px;margin-top:6px;}
  #drCatalogPage.drh-home .drh-knowledge-columns {grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px;}
  #drCatalogPage.drh-home .drh-knowledge-section {padding-top:16px;}
  #drCatalogPage.drh-home .drh-knowledge-section h3 {font-size:19px;}
  #drCatalogPage.drh-home .drh-knowledge-note {padding:14px;margin-top:16px;}
}
@media (max-width:350px) {
  #drCatalogPage.drh-home .drh-knowledge-lead {grid-template-columns:76px minmax(0,1fr);column-gap:12px;}
  #drCatalogPage.drh-home .drh-knowledge-title {font-size:21px;}
}
@media (forced-colors:active) {
  #drCatalogPage.drh-home .drh-knowledge :is(.drh-knowledge-photo,.drh-knowledge-note) {border:1px solid CanvasText;}
}


/* Inicio v5.6: recorrido scroll-driven opt-in (solo carrusel de necesidades).
   Se aplica únicamente cuando JS verifica viewport, sticky y movimiento permitido.
   El documento usa scroll nativo: nunca se bloquean wheel/touchmove.
   Finalizado: el elemento vuelve a su altura natural; no queda pista vacía. */
#drCatalogPage.drh-home .drh-needs-section .drh-scroll-pin {min-width:0;}
#drCatalogPage.drh-home .drh-needs-section.is-drh-scroll-pinned {
  height:calc(var(--drh-pin-height,600px) + var(--drh-scroll-distance,3200px));
  overflow:visible;
  overflow-anchor:none;
}
#drCatalogPage.drh-home .drh-needs-section.is-drh-scroll-pinned .drh-scroll-pin {
  position:sticky;
  top:var(--drh-pin-top,0px);
  z-index:1;
}
/* El scroll controla cada fotograma: no aplicar el easing temporal del arrastre. */
#drCatalogPage.drh-home .drh-needs.is-drh-scroll-scrubbing .drh-need {
  transition:none;
}
@media (prefers-reduced-motion:reduce) {
  #drCatalogPage.drh-home .drh-needs-section.is-drh-scroll-pinned {height:auto !important;}
  #drCatalogPage.drh-home .drh-needs-section.is-drh-scroll-pinned .drh-scroll-pin {position:static !important;}
}

/* v5.6.1: 65 px de aire entre Comparar medidas y el carrusel de necesidades. */
#drCatalogPage.drh-home #drcMeasureCompareSection {margin-bottom:65px;}

/* Inicio v5.6.11 · Encabezado y salida voluntaria del recorrido por scroll.
   Aprovechan el espacio superior/inferior EXISTENTE: no alteran las tarjetas,
   las sombras, el relleno del bloque 3D ni el sticky de v5.6.5. */
#drCatalogPage.drh-home .drh-needs-title {
  position:absolute;z-index:2;top:24px;left:14px;right:14px;
  margin:0;text-align:center;color:var(--dc-text);
  font-size:20px;font-weight:400;line-height:1.25;
  letter-spacing:-.02em;text-wrap:balance;pointer-events:none;
}
#drCatalogPage.drh-home .drh-needs-title-accent {
  color:#007782;font-weight:600;
}
@media (min-width:1024px) {
  #drCatalogPage.drh-home .drh-needs-title {
    font-size:clamp(20px,calc(2.25vw - 2px),24px);
  }
}
#drCatalogPage.drh-home .drh-continue {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;width:max-content;max-width:calc(100% - 24px);
  padding:2px 12px;margin:0 auto;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#4D4D4D;font-size:15px;line-height:1.35;font-weight:400;
  text-align:center;text-decoration:none;cursor:pointer;
}
#drCatalogPage.drh-home .drh-continue svg {
  display:block;flex:none;width:30px;height:30px;color:#007782;
}
#drCatalogPage.drh-home .drh-continue:hover span {text-decoration:underline;text-underline-offset:3px;}
#drCatalogPage.drh-home .drh-continue:focus-visible {
  outline:2px solid #007782;outline-offset:3px;border-radius:6px;
}
/* Sin JS: el enlace sigue en el flujo y funciona como ancla. */
#drCatalogPage.drh-home .drh-needs.is-enhanced .drh-continue {
  position:absolute;z-index:4;bottom:16px;left:50%;transform:translateX(-50%);
  margin:0;
}
#drCatalogPage.drh-home #drhInformacion {scroll-margin-top:82px;}
@media (max-width:767px) {
  #drCatalogPage.drh-home .drh-needs-title {top:26px;}
  #drCatalogPage.drh-home .drh-continue {font-size:14px;}
}

/* v5.8.1 · Fotografia real de prueba en Inicio. Sin cambios de componentes.
   Encuadre completo: no se recorta ni se estira la fotografia.
   El tope de 480 px evita una imagen excesivamente alta en movil ancho. */
#drCatalogPage.drh-home .drh-hero > .drh-hero-visual.drh-hero-photo,
#drCatalogPage.drh-home .drh-hero:has(> .drh-guide[open]) > .drh-hero-visual.drh-hero-photo {
  width:100%;
  max-width:480px;
  background:none;
}
#drCatalogPage.drh-home .drh-hero-visual.drh-hero-photo::before {
  content:none;
}
#drCatalogPage.drh-home .drh-hero-visual.drh-hero-photo img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2048 / 1367;
  object-fit:contain;
  border-radius:14px;
}


/* v5.8.3 · Hero de ancho completo. Solo Inicio; no modifica Xara ni el tema comun.
   Alturas de las barras ya existentes: movil 60, tablet 66, PC 64 px.
   El resto del contenido mantiene el ancho de 1160 px y sus margenes previos.
   La fotografia conserva sus pixeles; el recorte y el degradado son CSS. */
#drCatalogPage.drh-home {
  --drh-nav-height:64px;
  --drh-page-gutter:24px;
  max-width:none;
  width:100%;
  margin:0;
  padding:var(--drh-nav-height) 0 40px;
}
#drCatalogPage.drh-home .drh-page-content {
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--drh-page-gutter);
}
#drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:0;
  width:100%;
  min-height:clamp(620px,calc(100vh - var(--drh-nav-height)),900px);
  min-height:clamp(620px,calc(100svh - var(--drh-nav-height)),900px);
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#20292d;
}
#drCatalogPage.drh-home .drh-hero-fullbleed > .drh-hero-visual.drh-hero-photo {
  position:absolute;
  inset:0;
  z-index:0;
  grid-column:auto;
  grid-row:auto;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}
#drCatalogPage.drh-home .drh-hero-fullbleed > .drh-hero-visual::before {display:none;}
#drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-visual img {
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:50% 60%;
  border:0;
  border-radius:0;
}
#drCatalogPage.drh-home .drh-hero-fullbleed::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(6,15,19,.88) 0%,rgba(6,15,19,.80) 25%,rgba(6,15,19,.76) 36%,rgba(6,15,19,.50) 46%,rgba(6,15,19,.08) 64%,rgba(6,15,19,0) 76%);
}
#drCatalogPage.drh-home .drh-hero-inner {
  position:relative;
  z-index:2;
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:48px var(--drh-page-gutter);
}
#drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-copy {
  width:44%;
  max-width:440px;
  min-width:0;
  color:#fff;
}
#drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-copy::before {display:none;}
#drCatalogPage.drh-home .drh-hero-fullbleed :is(h1,.drh-title-sub,.drh-intro),
#drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-actions > .drc-text-link {
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.18);
}
#drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-actions > .drc-text-link:hover {
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}
#drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-actions > .drc-text-link:focus-visible {
  outline:2px solid #fff !important;
  outline-offset:5px;
}
#drCatalogPage.drh-home .drh-page-content > .drh-guide {
  width:calc((100% - 48px) * .575);
  margin:24px 0 48px;
}
#drCatalogPage.drh-home .drh-page-content > .drh-guide[open] {width:100%;}
@media (min-width:768px) and (max-width:1034.4px) {
  #drCatalogPage.drh-home {--drh-nav-height:66px;}
}
@media (min-width:768px) and (max-width:1099px) {
  #drCatalogPage.drh-home .drh-page-content > .drh-guide {width:calc((100% - 26px) * .575);}
  #drCatalogPage.drh-home .drh-page-content > .drh-guide[open] {width:100%;}
}
@media (max-width:767px) {
  #drCatalogPage.drh-home {--drh-nav-height:60px;--drh-page-gutter:18px;}
  #drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed {
    min-height:clamp(700px,calc(100vh - var(--drh-nav-height)),820px);
    min-height:clamp(700px,calc(100svh - var(--drh-nav-height)),820px);
    align-items:start;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-visual img {object-position:80% 0%;}
  #drCatalogPage.drh-home .drh-hero-fullbleed::after {
    background:linear-gradient(180deg,rgba(6,15,19,.78) 0%,rgba(6,15,19,.70) 28%,rgba(6,15,19,.55) 40%,rgba(6,15,19,.10) 56%,rgba(6,15,19,0) 68%);
  }
  #drCatalogPage.drh-home .drh-hero-inner {padding:28px var(--drh-page-gutter) 32px;}
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-copy {width:100%;max-width:540px;}
  #drCatalogPage.drh-home .drh-page-content > .drh-guide {width:100%;margin:20px 0 32px;}
}
@media (max-width:350px) {
  #drCatalogPage.drh-home {--drh-page-gutter:14px;}
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-visual img {object-position:88% 0%;}
}
@media (forced-colors:active) {
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-copy {background:Canvas;color:CanvasText;padding:16px;}
  #drCatalogPage.drh-home .drh-hero-fullbleed :is(h1,.drh-title-sub,.drh-intro),
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-actions > .drc-text-link {color:CanvasText;text-shadow:none;}
}


/* v5.8.4 · Solo el encuadre de la fotografia y el anclaje de los titulos.
   La seccion, el menu, el degradado y las dimensiones del resto no cambian.
   El sangrado superior de 10 px mantiene cubierto el borde inferior, tambien
   cuando cover depende de la altura. No se retoca ni se deforma la fotografia.
   En escritorio se compensa el 60% de esos 10 px: mismo encuadre, 10 px arriba. */
#drCatalogPage.drh-home .drh-hero-fullbleed > .drh-hero-visual.drh-hero-photo {
  top:-10px;
  bottom:0;
  height:calc(100% + 10px);
}
@media (min-width:768px) {
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-visual img {
    object-position:50% calc(60% - 6px);
  }
  /* Anclaje anterior del H1, sin nodos ocultos ni huecos de contenido eliminado. */
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-inner {
    transform:translateY(-83.8px);
  }
}


/* v5.8.5 · Cambios limitados a Inicio.
   El recorte movil procedia de object-fit:cover + min-height por viewport;
   la proporcion del original 1024x1536 es 2:3. No hay zoom o desplazamiento.
   Hero de escritorio panoramico: se conserva la composicion aprobada. */

/* En escritorio el sombreado se centra en las dos lineas de texto;
   la zona inferior y la modelo ya no reciben una capa oscura de lado a lado. */
#drCatalogPage.drh-home .drh-hero-fullbleed::after {
  background:radial-gradient(ellipse 470px 205px at 23% 43%,
    rgba(6,15,19,.89) 0%,
    rgba(6,15,19,.73) 38%,
    rgba(6,15,19,.32) 70%,
    rgba(6,15,19,0) 100%);
}

/* En movil la imagen recupera la proporcion REAL; se desactivan la
   altura minima, el cover y el desplazamiento superior de la v5.8.4.
   No quedan laterales sin foto porque el hero tiene la misma proporcion. */
@media (max-width:767px) {
  #drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed {
    min-height:0;
    height:auto;
    aspect-ratio:2 / 3;
    align-items:start;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed > .drh-hero-visual.drh-hero-photo {
    inset:0;
    height:100%;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-visual img {
    object-fit:contain;
    object-position:center;
  }
  /* La sombra cubre los titulos (y no el rostro, cuello o escote). */
  #drCatalogPage.drh-home .drh-hero-fullbleed::after {
    background:linear-gradient(to bottom,
      rgba(6,15,19,.81) 0,
      rgba(6,15,19,.67) 64px,
      rgba(6,15,19,.38) 110px,
      rgba(6,15,19,.12) 148px,
      rgba(6,15,19,0) 184px);
  }
}

/* Tabletas en vertical: mantener el encuadre completo sin recorte por cover.
   La posicion relativa del titulo se mantiene proxima a la del hero anterior. */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
  #drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed {
    min-height:0;
    height:auto;
    aspect-ratio:2 / 3;
    align-items:start;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed > .drh-hero-visual.drh-hero-photo {
    inset:0;
    height:100%;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-visual img {
    object-fit:contain;
    object-position:center;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed .drh-hero-inner {
    margin-top:calc((min(900px,max(620px,100svh - var(--drh-nav-height))) - 900px) / 2 + 330px);
    padding-top:0;
    padding-bottom:0;
    transform:none;
  }
  #drCatalogPage.drh-home .drh-hero-fullbleed::after {
    background:radial-gradient(ellipse 460px 205px at 26% 29%,
      rgba(6,15,19,.85) 0%,
      rgba(6,15,19,.66) 43%,
      rgba(6,15,19,.22) 73%,
      rgba(6,15,19,0) 100%);
  }
}


/* Inicio v5.8.9 — misma velocidad diferencial, un solo motor activo.
   La timeline nativa mantiene transform sincronizado con el scroll. El fallback
   escribe transform directamente una vez por frame, sin transition ni retardo.
   El encuadre, altura y escala de la foto se conservan. Sin JS: scroll normal. */
#drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed {
  position:relative;
  top:auto;
  z-index:0;
}
#drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed[data-drh-parallax] {
  transition:none;
  will-change:transform;
}
/* No se combinan la animacion nativa y el controlador alternativo. */
@supports (animation-timeline:scroll(root block)) and (animation-range:0px 1px) {
  @keyframes drh-hero-parallax-v589 {
    from {transform:translate3d(0,0,0);}
    to {transform:translate3d(0,var(--drh-parallax-distance),0);}
  }
  #drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed[data-drh-parallax="native"] {
    animation-name:drh-hero-parallax-v589;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-iteration-count:1;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
    animation-range:var(--drh-parallax-start) var(--drh-parallax-end);
  }
}
#drCatalogPage.drh-home > .drh-content-cover {
  position:relative;
  z-index:1;
  width:100%;
  padding-top:48px;
  background:#fafafa;
  border-radius:24px 24px 0 0;
  /* Redondear solo el fondo; no recortar dialogos ni transiciones de la guia. */
}
@media (min-width:768px) and (max-width:1099px) {
  #drCatalogPage.drh-home > .drh-content-cover {padding-top:40px;}
}
@media (max-width:767px) {
  #drCatalogPage.drh-home > .drh-content-cover {padding-top:32px;}
}
/* La guia se muestra inmediatamente despues de los limpiadores.
   El detalle original y sus transiciones no se duplican ni se alteran. */
#drCatalogPage.drh-home .drh-cleaners {margin-bottom:0;}
#drCatalogPage.drh-home .drh-page-content > .drh-guide {margin-top:24px;margin-bottom:32px;}
@media (max-width:767px) {
  #drCatalogPage.drh-home .drh-page-content > .drh-guide {margin-top:20px;margin-bottom:32px;}
}
@media (prefers-reduced-motion:reduce), print {
  #drCatalogPage.drh-home .drh-hero.drh-hero-fullbleed {
    animation:none !important;
    animation-timeline:auto !important;
    transform:none !important;
    will-change:auto !important;
  }
}