/* =============================================================
 * Donde habitan las mariposas — estilos del child theme
 * Variables CSS al inicio para que sea fácil ajustar el sistema.
 * ============================================================= */

:root {
  --dhm-bg:          #0c090b;
  --dhm-card:        #1b1320;
  --dhm-card-sutil:  #150f16;
  --dhm-magenta:     #E10085;
  --dhm-magenta-hover: #FF2A9D;
  --dhm-rosa-neon:   #F966C0;
  --dhm-rosa-tenue:  #d3c4ce;
  --dhm-blanco:      #FBFAFA;
  --dhm-texto:       #c2afba;
  --dhm-texto-tenue: #a98ea0;
  --dhm-mono-tenue:  #7c6c77;
  --dhm-borde:       rgba(255,255,255,0.08);
  --dhm-borde-fuerte: rgba(255,255,255,0.16);
  --dhm-radio:       12px;
  --dhm-radio-btn:   8px;
  --dhm-sombra:      0 30px 60px rgba(0,0,0,0.45);
  --dhm-sombra-card: 0 1px 3px rgba(0,0,0,0.25);
}

html { background: var(--dhm-bg); }
body { background: var(--dhm-bg); color: var(--dhm-blanco); font-family: 'TT Hoves Pro', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--dhm-magenta); color: var(--dhm-blanco); }

/* Headings → display serif */
h1, h2, h3, h4, .has-display-font-family { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-weight: 500; letter-spacing: -0.01em; line-height: 1.06; }

/* Títulos con fontSize "title-md" sin color explícito: heredaban un gris
   oscuro casi negro (rgb(26,32,44), probablemente el default de Kadence
   pensado para fondo claro) — ilegible sobre el fondo oscuro del tema. */
.wp-block-heading.has-title-md-font-size { color: var(--dhm-blanco); }

/* Tag mono — 11.5px se leía muy pequeño (home, documental, producto) */
.dhm-tag, .has-mono-font-family.has-mono-tag-font-size {
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dhm-rosa-neon);
}

/* Botones */
.wp-block-button__link, .wp-element-button {
  background: var(--dhm-magenta);
  color: var(--dhm-blanco);
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-weight: 700;
  border-radius: var(--dhm-radio-btn);
  padding: 14px 22px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wp-block-button__link:hover, .wp-element-button:hover { background: var(--dhm-magenta-hover); }

.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--dhm-borde-fuerte);
  color: var(--dhm-blanco);
}
.is-style-outline > .wp-block-button__link:hover { background: rgba(255,255,255,0.14); }

/* Cards (kadence/group con bg fondo-card) */
.dhm-card, .wp-block-group.has-fondo-card-background-color {
  background: var(--dhm-card);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--dhm-radio);
  padding: 22px;
}

/* Placeholder image (mientras no hay foto) */
.dhm-placeholder {
  position: relative;
  background: repeating-linear-gradient(135deg, #201627 0 11px, #140e16 11px 22px);
  border: 1px solid var(--dhm-borde);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dhm-mono-tenue);
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* =============================================================
 * Header del sitio (custom, vía header.php + patterns/site-header.php)
 * ============================================================= */
.dhm-site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--dhm-borde);
}
/* El fondo translúcido + desenfoque va en un ::before, NO en el header
   mismo: `backdrop-filter` crea un "containing block" para los descendientes
   position:fixed, lo que atrapaba el overlay del menú móvil (y el de
   búsqueda) dentro de los 64px del header en vez de cubrir el viewport
   (medido: el modal abierto quedaba en height:64px). Movido al pseudo, el
   header ya no establece ese contexto y los overlays vuelven a ser
   fixed respecto a la ventana. */
.dhm-site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(12,9,11,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
/* Kadence aplica position:relative a #masthead por ID (gana al
   .dhm-site-header por especificidad, medido: relative/z-index:11),
   anulando el sticky que pretende el tema y dejando el header —y con él el
   botón de menú en móvil— inaccesible tras hacer scroll. Se reafirma con
   especificidad de ID para que quede fijo arriba. */
#masthead.dhm-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
}
.dhm-nav { min-height: 72px; align-items: center; }
.dhm-nav .wp-block-navigation a { color: var(--dhm-texto-tenue); font-size: 14px; font-weight: 500; padding: 8px 12px; }
.dhm-nav .wp-block-navigation a:hover,
.dhm-nav .wp-block-navigation .current-menu-item > a { color: var(--dhm-blanco); }

.dhm-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--dhm-blanco); }
/* En toda página con body.woocommerce-page (tienda, carrito, checkout, mi cuenta),
   Kadence carga woocommerce.min.css con ".woocommerce img, .woocommerce-page img
   { height:auto; max-width:100% }" — un selector clase+etiqueta (0,1,1) que gana en
   especificidad a ".dhm-brand-logo" (0,1,0) sin importar el orden de carga. Medido en
   vivo: el logo (header Y footer) pasaba de 40px/32px a su tamaño natural de 96px,
   aplastando el wordmark de al lado. Se gana la guerra de especificidad con
   !important en vez de anidar selectores (el footer no comparte el ID #masthead). */
.dhm-brand-logo { height: 40px !important; width: auto !important; flex: none; }
.dhm-brand-text { display: flex; flex-direction: column; line-height: 1; }
.dhm-brand-line1 { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-weight: 300; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dhm-rosa-neon); }
.dhm-brand-line2 { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dhm-rosa-tenue); margin-top: 3px; }

.dhm-icon { width: 18px; height: 18px; flex: none; }

.dhm-nav-actions { flex-wrap: nowrap; }

/* Botones de la zona derecha del header — min 44x44 de área táctil real
   (padding, no solo tamaño visual) en todos los anchos. */
.dhm-search-pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; box-sizing: border-box;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; padding: 0 16px; color: var(--dhm-texto-tenue);
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 12.5px; letter-spacing: 0.04em;
  cursor: pointer;
}
.dhm-search-pill:hover { color: var(--dhm-blanco); }
.dhm-search-pill:focus-visible { outline: 2px solid var(--dhm-magenta); outline-offset: 2px; }

.dhm-cart-link {
  position: relative; color: var(--dhm-blanco);
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; box-sizing: border-box;
  text-decoration: none;
}
.dhm-cart-link:focus-visible { outline: 2px solid var(--dhm-magenta); outline-offset: -2px; border-radius: 8px; }
.dhm-cart-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--dhm-magenta); color: var(--dhm-blanco);
  font-family: 'TT Hoves Pro', system-ui, sans-serif; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.dhm-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; box-sizing: border-box;
  background: var(--dhm-magenta); border: 1px solid var(--dhm-magenta);
  border-radius: 999px; padding: 0 16px 0 6px;
  color: var(--dhm-blanco); text-decoration: none;
  font-family: 'TT Hoves Pro', system-ui, sans-serif; font-size: 13.5px; font-weight: 600;
  transition: background 0.15s ease;
}
.dhm-account-btn:hover { background: var(--dhm-magenta-hover); color: var(--dhm-blanco); }
.dhm-account-btn:focus-visible { outline: 2px solid var(--dhm-blanco); outline-offset: 2px; }
.dhm-account-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* El botón hamburguesa del bloque nativo wp:navigation mide 24x24 visual —
   se agranda el área táctil con padding + margen negativo (no desplaza
   layout) en vez de tocar el SVG, para llegar a 44x44 sin cambiar el ícono. */
.dhm-nav-menu .wp-block-navigation__responsive-container-open,
.dhm-nav-menu .wp-block-navigation__responsive-container-close {
  padding: 10px !important;
  margin: -10px !important;
}

/* Menú de navegación en mobile — overlay nativo del bloque wp:navigation.
   El core pinta el modal abierto con fondo BLANCO y enlaces NEGROS
   (.wp-block-navigation:not(.has-background) …is-menu-open{background:#fff}),
   que choca de lleno con el tema oscuro (medido en vivo: bg rgb(255,255,255),
   texto rgb(0,0,0)). Se re-tematiza el overlay: fondo del sitio, enlaces en
   serif display (marca), filas con >=52px de área táctil, página activa en
   magenta y botón de cierre claro. */
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--dhm-bg) !important;
  padding: 0 !important;
}
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 12px 6vw 48px !important;
  width: 100%;
}
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid var(--dhm-borde);
}
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 8px 2px !important;
  color: var(--dhm-texto) !important;
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-weight: 500;
  font-size: 24px !important;
  letter-spacing: -0.01em;
}
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--dhm-blanco) !important;
}
.dhm-nav-menu .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: var(--dhm-rosa-neon) !important;
}
.dhm-nav-menu .wp-block-navigation__responsive-container-close {
  top: 18px !important;
  right: 4vw !important;
  color: var(--dhm-blanco) !important;
}
.dhm-nav-menu .wp-block-navigation__responsive-container-close svg {
  width: 26px; height: 26px; fill: currentColor;
}

/* Header en mobile (mismo punto de corte que el breakpoint nativo del
   bloque wp:navigation, 600px, para que el menú ya esté en modo
   hamburguesa cuando el resto del header también se compacta).
   Con "Buscar"/"Entrar" en texto completo + el menú + la marca, el grupo
   de la derecha no entraba en una sola fila a 375-414px y se partía en
   dos líneas (verificado con captura + medición de bounding boxes:
   .dhm-search-pill y .dhm-account-btn quedaban apilados en la misma
   columna). Se resuelve a icono-solo en los botones secundarios y se
   recorta el padding/gap del header para liberar el ancho que necesita
   la marca en una sola línea. */
@media (max-width: 600px) {
  .dhm-nav {
    padding-left: 4vw; padding-right: 4vw;
    min-height: 64px;
  }
  .dhm-brand { gap: 8px; }
  .dhm-brand-logo { height: 32px !important; }
  .dhm-brand-text { white-space: nowrap; }
  .dhm-brand-line1 { font-size: 14px; }
  .dhm-brand-line2 { font-size: 9.5px; letter-spacing: 0.26em; margin-top: 2px; }

  .dhm-search-label,
  .dhm-account-label { display: none; }
  .dhm-search-pill { padding: 0; width: 44px; justify-content: center; }
  .dhm-account-btn { padding: 0; width: 44px; justify-content: center; }
}

/* =============================================================
 * Footer del sitio
 * ============================================================= */
.dhm-site-footer {
  background: #080609;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.dhm-brand--footer { color: var(--dhm-blanco); }
.dhm-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dhm-footer-list a { color: var(--dhm-texto-tenue); font-size: 13.5px; text-decoration: none; }
.dhm-footer-list a:hover { color: var(--dhm-blanco); }
.dhm-footer-bottom-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 12px; color: var(--dhm-mono-tenue);
  letter-spacing: 0.04em;
}

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--dhm-magenta); color: var(--dhm-blanco); padding: 10px 16px; }
.skip-link:focus { left: 8px; top: 8px; }

/* =============================================================
 * Resultados de búsqueda (/?s=…)
 * Página generada por el search.php por defecto de Kadence (no hay
 * template propio en este child theme): usa el loop clásico de
 * archivo con clases ".content-bg.loop-entry" coloreadas por las
 * variables --global-palette* de Kadence (pensadas para fondo claro),
 * igual que el bug ya resuelto en los archivos de WooCommerce — pero
 * ese fix solo cubría ".product.entry.loop-entry" (productos), no las
 * páginas/posts genéricos que aparecen en una búsqueda. Verificado con
 * curl contra el HTML real: las tarjetas no tenían ningún override del
 * child theme y se veían con fondo claro sobre el fondo oscuro del sitio.
 * ============================================================= */
.search-results .page-title.search-title {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--dhm-blanco);
  margin: 0 0 28px;
}
.search-results .page-title.search-title span { color: var(--dhm-rosa-neon); }

.search-results #archive-container.kadence-posts-list {
  gap: 20px;
}
.search-results .entry.content-bg.loop-entry {
  background: var(--dhm-card) !important;
  border: 1px solid var(--dhm-borde);
  border-radius: var(--dhm-radio);
  box-shadow: none !important;
}
.search-results .entry-title,
.search-results .entry-title a {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-weight: 600;
  color: var(--dhm-blanco) !important;
}
.search-results .entry-meta,
.search-results .entry-meta * {
  color: var(--dhm-mono-tenue) !important;
  font-size: 12px;
}
.search-results .entry-summary p {
  color: var(--dhm-texto);
}
.search-results .post-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; box-sizing: border-box;
  color: var(--dhm-rosa-neon) !important;
  font-family: 'TT Hoves Pro', system-ui, sans-serif; font-weight: 700; font-size: 13.5px;
  text-decoration: none;
}
.search-results .post-more-link svg { fill: currentColor !important; width: 16px; height: 16px; }

/* Sin resultados */
.search-results .error .page-content p {
  color: var(--dhm-texto);
  font-size: 16px;
}
.search-results .search-form {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  max-width: 420px;
}
.search-results .search-form label { flex: 1 1 auto; }
.search-results .search-field {
  width: 100%; min-height: 44px; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid var(--dhm-borde-fuerte);
  border-radius: var(--dhm-radio-btn); color: var(--dhm-blanco);
  padding: 0 14px; font-family: 'TT Hoves Pro', system-ui, sans-serif; font-size: 15px;
}
.search-results .search-field:focus { outline: none; border-color: var(--dhm-magenta); box-shadow: 0 0 0 1px var(--dhm-magenta); }
.search-results .search-submit {
  flex: none; min-height: 44px; padding: 0 18px;
  background: var(--dhm-magenta); color: var(--dhm-blanco);
  border: none; border-radius: var(--dhm-radio-btn);
  font-family: 'TT Hoves Pro', system-ui, sans-serif; font-weight: 700; font-size: 13.5px;
  cursor: pointer;
}
.search-results .search-submit:hover { background: var(--dhm-magenta-hover); }
.search-results .kadence-search-icon-wrap { display: none; }

@media (max-width: 600px) {
  .search-results .entry-content-wrap { padding: 1.25rem !important; }
}

/* =============================================================
 * WooCommerce
 * ============================================================= */

/* Reset general */
.woocommerce, .woocommerce-page { color: var(--dhm-blanco); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-size: 22px; font-weight: 600; }
.woocommerce ul.products li.product .price { color: var(--dhm-blanco); font-weight: 700; }
.woocommerce ul.products li.product .price .amount { color: var(--dhm-blanco); }
.woocommerce ul.products li.product img { border-radius: 10px; }

/* Tienda — grid de productos (bloque nativo Product Collection).
   El bloque se insertó con layout "Flow" (apilado, una columna) en vez de "Grid",
   por eso cada producto se mostraba a ancho completo. Se fuerza grid aquí. */
.wc-block-product-template {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
@media (min-width: 700px) {
  .wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wc-block-product-template .wc-block-product,
li.wc-block-product {
  list-style: none;
  margin: 0 !important;
  width: 100% !important;
}
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dhm-card);
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.wc-block-product-template .wp-block-post-title {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin-top: 14px;
}
.wc-block-product-template .wp-block-post-title a { color: var(--dhm-blanco); }
.wc-block-product-template .wc-block-components-product-price { margin-top: 3px; }
.wc-block-product-template .wc-block-components-product-price .price,
.wc-block-product-template .wc-block-components-product-price .amount { color: var(--dhm-blanco); font-weight: 700; }

/* Loop clásico del archive de tienda (Kadence lo añade debajo del bloque Product Collection
   en la página de Tienda) y bloque legacy "Productos" usado como cross-sell en Carrito/Checkout.
   Ninguno de los dos usa las clases de bloque de arriba, así que se estilizan aparte. */
.woocommerce ul.products,
.wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
@media (min-width: 700px) {
  .woocommerce ul.products,
  .wc-block-grid__products { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}
@media (min-width: 1000px) {
  .woocommerce ul.products.product-archive { grid-template-columns: repeat(4, 1fr); }
}
.woocommerce ul.products li.product,
.wc-block-grid__product {
  list-style: none;
  margin: 0;
}
/* Las fotos de producto de este catálogo son tomas de estudio con fondo
   blanco liso. Recortarlas a sangre (object-fit:cover) deja un bloque blanco
   que choca contra el tema oscuro. En su lugar se "enmarcan": foto completa,
   sin recortar, centrada sobre un margen oscuro — como una lámina enmarcada
   en una pared oscura, en vez de un recorte agresivo. */
.woocommerce ul.products li.product a.woocommerce-loop-image-link,
.wc-block-grid__product a.woocommerce-loop-image-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dhm-card);
  padding: 16px;
}
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.wc-block-grid__product img.attachment-woocommerce_thumbnail {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.woocommerce ul.products li.product .product-details,
.wc-block-grid__product .product-details { margin-top: 12px; padding: 0 4px; }
.wc-block-grid__product .wc-block-grid__product-title,
.wc-block-grid__product .price { padding: 0 4px; }
.woocommerce ul.products li.product,
.wc-block-grid__product {
  border: 1px solid var(--dhm-borde);
  border-radius: 12px;
  padding: 10px 10px 14px;
}
.woocommerce ul.products li.product a.woocommerce-loop-image-link,
.wc-block-grid__product a.woocommerce-loop-image-link {
  margin-bottom: 2px;
}

/* Cualquier card "clásica" de Kadence (".content-bg.loop-entry .content-bg",
   ".product.entry.loop-entry") — usada por el archive de Tienda, "Productos
   relacionados" del single product, y el bloque legacy "product-new" ("Nuevo
   en la tienda" del carrito vacío). Kadence colorea estos elementos con sus
   variables --global-palette*, que este child theme nunca define (usa su
   propia paleta en theme.json), así que caen al valor por defecto de Kadence
   (blanco) — se sobreescribe aquí, sin importar en qué página/bloque aparezcan. */
.content-bg.loop-entry .content-bg:not(.loop-entry),
.product.entry.loop-entry,
.wc-block-grid__product.content-bg {
  background: var(--dhm-card) !important;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title a,
.wc-block-grid__product .wc-block-grid__product-title {
  color: var(--dhm-blanco) !important;
}
ul.products li.product .price,
ul.products li.product .price .amount,
.wc-block-grid__product .price,
.wc-block-grid__product .price .amount {
  color: var(--dhm-blanco) !important;
}
ul.products li.product .price del,
.wc-block-grid__product .price del { color: var(--dhm-texto-tenue) !important; opacity: 1; }
ul.products li.product .price ins,
.wc-block-grid__product .price ins { color: var(--dhm-rosa-neon) !important; text-decoration: none; }
ul.products li.product .star-rating,
.wc-block-grid__product .star-rating { color: var(--dhm-mono-tenue); }
ul.products li.product .star-rating span,
.wc-block-grid__product .star-rating span { color: var(--dhm-rosa-neon); }
span.onsale {
  background: var(--dhm-magenta) !important;
  color: var(--dhm-blanco) !important;
}

/* "Añadir al carrito" en las tarjetas del archive — Kadence lo monta como un
   overlay oculto que solo aparece con :hover (position:absolute, opacity:0,
   bottom:-32px), recortado por overflow:hidden de la card. Eso lo deja
   invisible en touch (no hay hover) y descolocado en desktop. Se fuerza a
   flujo normal, siempre visible, con el mismo botón magenta del resto del sitio. */
.woocommerce ul.products li.product .product-action-wrap,
.wc-block-grid__product .product-action-wrap {
  position: static !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin-top: 12px;
}
.woocommerce ul.products li.product .button.add_to_cart_button,
.wc-block-grid__product .button.add_to_cart_button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--dhm-magenta) !important;
  color: var(--dhm-blanco) !important;
  border-radius: var(--dhm-radio-btn) !important;
  padding: 11px 16px !important;
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-align: center;
  border: none !important;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.wc-block-grid__product .button.add_to_cart_button:hover {
  background: var(--dhm-magenta-hover) !important;
  color: var(--dhm-blanco) !important;
}

/* Pasarela de sugerencias — shortcode [dhm_sugerencias] (Carrito, Checkout) */
.dhm-sugerencias-wrap { max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0 24px 64px; }
.dhm-sugerencias { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--dhm-borde); }
.dhm-sugerencias__titulo {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  margin: 0 0 20px;
  text-align: center;
}

/* Carrusel rotatorio (marquee) de las pasarelas de sugerencias.
   Es UNA SOLA FILA: hay que ganarle al grid de Woo (.woocommerce ul.products
   { display:grid }, mayor especificidad), por eso van con !important. El track
   lleva el juego original + los clones mínimos que añade dhm-carousel.js para
   cubrir el viewport; la animación lo desplaza exactamente un "juego"
   (--dhm-marquee-distance, en px) para un bucle sin costuras. Sin JS o con
   reduced-motion, queda como fila desplazable. */
.dhm-carousel { overflow: hidden; }
.dhm-carousel__viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.dhm-carousel.is-animated .dhm-carousel__viewport { overflow: hidden; }
.dhm-carousel__track {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;   /* anula el grid de .woocommerce ul.products */
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important; padding: 4px 0 !important; gap: 0 !important; list-style: none !important;
}
.dhm-carousel__track::before, .dhm-carousel__track::after { content: none !important; }
.dhm-carousel__track > li.product {
  flex: 0 0 210px !important; width: 210px !important; max-width: 210px !important;
  margin: 0 20px 0 0 !important; padding: 0 !important; float: none !important;
}
.dhm-carousel.is-animated .dhm-carousel__track {
  animation: dhm-marquee var(--dhm-marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.dhm-carousel.is-animated:hover .dhm-carousel__track,
.dhm-carousel.is-animated:focus-within .dhm-carousel__track { animation-play-state: paused; }
@keyframes dhm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--dhm-marquee-distance, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .dhm-carousel.is-animated .dhm-carousel__track { animation: none; }
  .dhm-carousel.is-animated .dhm-carousel__viewport { overflow-x: auto; }
}
@media (max-width: 600px) {
  .dhm-carousel__track > li.product { flex: 0 0 160px !important; width: 160px !important; max-width: 160px !important; margin-right: 14px !important; }
}

/* Botones de Woo */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt {
  background: var(--dhm-magenta);
  color: var(--dhm-blanco);
  border-radius: var(--dhm-radio-btn);
  padding: 12px 22px;
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-weight: 700;
  border: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover {
  background: var(--dhm-magenta-hover);
  color: var(--dhm-blanco);
}

/* Single product */
.single-product div.product .product_title {
  font-size: clamp(34px,4.4vw,52px); margin-bottom: 16px;
}
.single-product div.product .price {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif !important;
  font-size: 42px;
  color: var(--dhm-blanco);
}
.single-product div.product .stock {
  color: var(--dhm-rosa-neon);
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-weight: 600;
}
.single-product div.product .stock.in-stock { color: #9ee2b3; }

/* Extras del producto inyectados por functions.php */
.dhm-artist-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dhm-texto); margin: 0 0 16px; }
.dhm-artist-dot { width: 34px; height: 34px; border-radius: 50%; background: repeating-linear-gradient(135deg, #211728 0 6px, #140e16 6px 12px); border: 1px solid rgba(225,0,133,0.5); flex: none; }
.dhm-artist-row strong { color: var(--dhm-blanco); font-weight: 600; }

.dhm-product-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; padding: 18px 0; border-top: 1px solid var(--dhm-borde); border-bottom: 1px solid var(--dhm-borde); margin: 0 0 22px; }
.dhm-product-meta dt { font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dhm-mono-tenue); margin: 0 0 5px; }
.dhm-product-meta dd { margin: 0; font-size: 13px; color: var(--dhm-blanco); }

.dhm-product-story { background: rgba(225,0,133,0.06); border: 1px solid rgba(225,0,133,0.3); border-radius: 12px; padding: 22px; margin: 22px 0; }
.dhm-product-story p { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-style: italic; font-size: 19px; line-height: 1.45; color: var(--dhm-blanco); margin: 0 0 12px; }
.dhm-product-story footer { font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 12px; color: var(--dhm-texto-tenue); letter-spacing: 0.06em; }

/* -------------------------------------------------------------------------
 * Single product — homogeneizar con el tema (igual que Resultados de
 * búsqueda y el resto del sitio). Usa plantillas CLÁSICAS de Woo, no
 * bloques, así que hereda los defaults claros de Kadence en galería,
 * pestañas, cantidad y reseñas. Medido en vivo: img object-fit:fill
 * (deformada), pestañas con li blanco sobre texto blanco, qty input blanco.
 * ------------------------------------------------------------------------- */

/* Galería: las fotos del catálogo son tomas de estudio con fondo blanco;
   se ENMARCAN sobre tarjeta oscura (como el archivo), sin recorte ni
   deformación (el default venía con object-fit:fill → imagen estirada). */
.single-product .woocommerce-product-gallery {
  background: var(--dhm-card);
  border: 1px solid var(--dhm-borde);
  border-radius: var(--dhm-radio);
  padding: clamp(16px, 3vw, 28px);
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product .woocommerce-product-gallery__image img {
  width: auto !important;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain !important;
  border-radius: 8px;
  margin: 0 auto;
}
.single-product .woocommerce-product-gallery__trigger { z-index: 2; }
.single-product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: 64px; }
.single-product .flex-control-thumbs img { border-radius: 6px; opacity: 0.6; transition: opacity .15s ease; }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }

/* Precio prominente — el default de Kadence lo deja en ~21px porque
   .summary .price gana en especificidad al rule previo. */
.single-product div.product .summary > .price,
.single-product div.product .entry-summary > .price {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif !important;
  font-size: clamp(34px, 4vw, 46px) !important;
  color: var(--dhm-blanco) !important;
  line-height: 1.1;
  margin: 6px 0 18px;
}
.single-product div.product .summary .price .amount,
.single-product div.product .summary ins .amount { color: var(--dhm-blanco); }
.single-product div.product .summary del .amount { color: var(--dhm-texto-tenue); }
.single-product div.product .summary ins { text-decoration: none; }
.single-product div.product .summary ins .amount { color: var(--dhm-rosa-neon); }

/* Rating + enlace de reseñas en el summary */
.single-product .woocommerce-product-rating { margin: 0 0 14px; }
.single-product .woocommerce-product-rating .star-rating { color: var(--dhm-mono-tenue); }
.single-product .woocommerce-product-rating .star-rating span { color: var(--dhm-rosa-neon); }
.single-product .woocommerce-product-rating__link,
.single-product .woocommerce-review-link { color: var(--dhm-texto-tenue); }

/* Cantidad — input blanco por defecto (medido rgb(255,255,255)/gris) */
.single-product .quantity input.qty {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--dhm-borde-fuerte) !important;
  color: var(--dhm-blanco) !important;
  border-radius: var(--dhm-radio-btn);
  min-height: 48px;
  width: 74px;
  text-align: center;
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-size: 15px;
}
.single-product form.cart { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.single-product form.cart .single_add_to_cart_button { min-height: 48px; }

/* Metadatos del producto (SKU, categorías, etiquetas). Kadence trae
   ".woocommerce div.product .product_meta > span { font-size: 70% }" —
   selector más específico que el nuestro (3 clases + 2 elementos), sobre
   estos 12px del contenedor quedaba en 8.4px reales, ilegible en mobile y
   desktop. Se sube el tamaño base y se neutraliza ese 70% con !important
   (mismo recurso ya usado en este archivo para pelear con Kadence/Woo). */
.single-product .product_meta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--dhm-borde);
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dhm-mono-tenue);
  letter-spacing: 0.02em;
}
.single-product .product_meta > span { display: block; margin-bottom: 6px; font-size: 1em !important; }
.single-product .product_meta a { color: var(--dhm-texto); text-decoration: none; }
.single-product .product_meta a:hover { color: var(--dhm-rosa-neon); }

/* Pestañas (Descripción / Valoraciones) — default trae li con fondo blanco
   sobre texto blanco → invisibles. Se rearman como pestañas planas con
   indicador inferior magenta. */
.single-product .woocommerce-tabs { margin-top: 48px; }
.single-product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--dhm-borde);
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after { content: none !important; display: none !important; border: 0 !important; }
.single-product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; border: 0 !important; }
.single-product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px !important;
  color: var(--dhm-texto-tenue) !important;
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--dhm-blanco) !important; }
.single-product .woocommerce-tabs ul.tabs li.active a {
  color: var(--dhm-blanco) !important;
  border-bottom-color: var(--dhm-magenta);
}
.single-product .woocommerce-Tabs-panel {
  padding-top: 26px;
  color: var(--dhm-texto);
  line-height: 1.75;
}
.single-product .woocommerce-Tabs-panel h2 {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  color: var(--dhm-blanco);
  font-size: 26px;
  margin: 0 0 14px;
}

/* Reseñas — listado + formulario de comentario */
.single-product #reviews .commentlist { list-style: none; margin: 0; padding: 0; }
.single-product #reviews .commentlist li .comment_container {
  background: var(--dhm-card);
  border: 1px solid var(--dhm-borde);
  border-radius: var(--dhm-radio);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.single-product #reviews .comment-text p { color: var(--dhm-texto); }
.single-product #reviews .star-rating,
.single-product #reviews p.stars a { color: var(--dhm-rosa-neon); }
.single-product #reviews .comment-form label { color: var(--dhm-texto-tenue); font-size: 13px; }
.single-product #reviews .comment-form input[type="text"],
.single-product #reviews .comment-form input[type="email"],
.single-product #reviews .comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dhm-borde-fuerte);
  border-radius: var(--dhm-radio-btn);
  color: var(--dhm-blanco);
  padding: 12px 14px;
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-size: 15px;
}
.single-product #reviews .comment-form input:focus,
.single-product #reviews .comment-form textarea:focus {
  outline: none;
  border-color: var(--dhm-magenta);
  box-shadow: 0 0 0 1px var(--dhm-magenta);
}

/* Productos relacionados / venta dirigida — título display */
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--dhm-blanco);
  margin: 0 0 22px;
}
.single-product .related.products,
.single-product .upsells.products {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--dhm-borde);
}

/* Cart + Checkout blocks de Woo */
.wc-block-cart, .wc-block-checkout, .wc-block-components-totals-wrapper { color: var(--dhm-blanco); }

/* Carrito vacío — el bloque nativo de Woo trae el título y el icono (un
   ::before con mask-image coloreado vía background-color) pensados para
   fondo claro: color casi negro, invisible sobre el fondo casi negro de
   este tema. Se sube el contraste con la paleta del sitio. */
.wc-block-cart__empty-cart__title {
  color: var(--dhm-blanco) !important;
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 600;
  margin: 32px 0 48px !important;
}
.wc-block-cart__empty-cart__title::before {
  background-color: var(--dhm-texto-tenue) !important;
}
.wc-block-components-text-input input, .wc-block-components-select select {
  background: rgba(255,255,255,0.04); border: 1px solid var(--dhm-borde-fuerte); color: var(--dhm-blanco); border-radius: var(--dhm-radio-btn);
}
/* padding !important: mismo conflicto que .wc-block-checkout__main — la
   regla de "gap cero" de abajo (.wc-block-components-sidebar-layout >
   .wc-block-components-sidebar, 2 clases) le gana el padding-left a esta
   tarjeta (1 clase), dejando el contenido pegado al borde izquierdo. */
.wc-block-cart__sidebar, .wc-block-checkout__sidebar, .wc-block-components-totals-wrapper {
  background: var(--dhm-card); border-radius: var(--dhm-radio); border: 1px solid rgba(255,255,255,0.1); padding: 22px !important;
}

/* ----- Layout de dos columnas (Carrito + Finalizar compra) -----
   El resumen (sidebar) va a la DERECHA en escritorio y se apila debajo en
   móvil. Se controla aquí en vez de depender de las container-queries
   nativas de Woo: al ponerles un `gap`, como main(65%)+sidebar(35%) suman
   100%, el sidebar saltaba de línea. Con flex 1 + ancho fijo del sidebar y
   `order` el resumen queda siempre a la derecha (anula el row-reverse de Woo). */
/* Boxed + centrado: en PC los formularios de Carrito y Finalizar compra
   quedan en una caja centrada de ancho cómodo (no a sangre completa).
   Los bloques llevan .alignwide, y Kadence le aplica un "breakout" de mayor
   especificidad ( .wp-site-blocks .content-container .alignwide → 0,3,0 ) que
   en pantallas anchas (≥1520px) hace max-width:unset + márgenes negativos de
   -115px, sacándolo de la caja. Por eso aquí va con !important: garantiza la
   caja centrada en TODOS los anchos. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  float: none !important;
}
/* El espaciado lateral lo da .entry-content-wrap (padding 2rem) del propio
   tema, así que no se añade padding extra aquí para no indentar de más. */

.wc-block-components-sidebar-layout { display: flex; flex-wrap: wrap; align-items: flex-start; }

@media (min-width: 768px) {
  .wc-block-components-sidebar-layout {
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 40px;
  }
  .wc-block-components-sidebar-layout > .wc-block-components-main {
    order: 1; flex: 1 1 auto; width: auto; max-width: 100%; padding-right: 0;
  }
  .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
    order: 2; flex: 0 0 360px; width: 360px; max-width: 360px; padding-left: 0;
    position: sticky; top: 96px;
  }
}

@media (max-width: 767px) {
  .wc-block-components-sidebar-layout { flex-direction: column; row-gap: 28px; margin-bottom: 28px; }
  .wc-block-components-sidebar-layout > .wc-block-components-main,
  .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
    width: 100%; max-width: 100%; padding: 0; position: static;
  }
}

/* Carrito — la lista de productos no tenía la misma "tarjeta" que el resumen
   de totales: quedaba pegada al fondo oscuro mientras el sidebar sí tenía
   borde/relleno, por eso se veía desbalanceado y apretado. */
.wp-block-woocommerce-cart.wc-block-cart { margin: 8px auto 56px; }
.wc-block-cart-items {
  background: var(--dhm-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--dhm-radio);
  padding: 6px 24px;
}
.wc-block-cart-items__header th { padding: 16px 0 !important; border-bottom: 1px solid var(--dhm-borde) !important; }
.wc-block-cart-items__row { padding: 24px 0 !important; }
.wc-block-cart-items__row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
.wc-block-cart-item__image { padding-right: 20px !important; }
.wc-block-cart-item__wrap { gap: 6px !important; }
.wc-block-cart-item__quantity { gap: 14px !important; margin-top: 8px; }
.wc-block-components-quantity-selector { border-color: rgba(255,255,255,0.16) !important; min-height: 40px; }
.wc-block-components-quantity-selector__input { min-height: 38px; }
.wc-block-components-quantity-selector__button { min-width: 38px; min-height: 38px; }
.wc-block-cart-item__remove-link { padding: 8px 0 !important; min-height: 38px; display: inline-flex !important; align-items: center; }

.wc-block-components-totals-item { padding: 12px 0 !important; }
.wc-block-cart__submit-container { margin-top: 20px; }
.wc-block-components-totals-coupon { margin-top: 4px; }

@media (max-width: 767px) {
  .wc-block-cart-items { padding: 4px 18px; }
  .wp-block-woocommerce-cart.wc-block-cart { margin-bottom: 40px; }
}

/* ----- Finalizar compra (checkout): formulario estandarizado -----
   Además se activa el modo nativo `has-dark-controls` de Woo en el bloque
   (atributo del bloque) que ya da fondo/borde correctos a los inputs sobre
   fondo oscuro. Aquí se unifica radio, foco magenta, tipografía de pasos y
   el botón de pago con el resto del tema. */
/* padding !important: la regla de arriba (línea ~920) pone padding-right:0
   en .wc-block-components-main con más especificidad (2 clases vs 1) para
   no duplicar el column-gap del flex — pero eso también le ganaba al
   padding-right de ESTA tarjeta, dejándola con 28px a la izquierda y 0 a
   la derecha (formulario descentrado, pegado al sidebar). */
.wc-block-checkout__main {
  color: var(--dhm-blanco);
  background: var(--dhm-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--dhm-radio);
  padding: 28px 28px 10px !important;
}

/* Títulos de cada paso → fuente display del tema */
.wc-block-components-checkout-step__title {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif !important;
  font-weight: 600; font-size: 22px !important; letter-spacing: -0.01em;
  color: var(--dhm-blanco) !important;
}
.wc-block-components-checkout-step__description { color: var(--dhm-texto-tenue); }

/* Inputs de texto, textarea y selects: mismo radio, borde y foco magenta */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-form-token-field,
.wc-block-components-combobox input {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--dhm-borde-fuerte) !important;
  border-radius: var(--dhm-radio-btn) !important;
  color: var(--dhm-blanco) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-combobox input:focus {
  border-color: var(--dhm-magenta) !important;
  box-shadow: 0 0 0 1px var(--dhm-magenta) !important;
  outline: none !important;
}
.wc-block-components-text-input label { color: var(--dhm-texto-tenue) !important; }
.wc-block-components-text-input.is-active label { color: var(--dhm-rosa-neon) !important; }

/* Opciones de envío y pago (radios) */
.wc-block-components-radio-control__option { border-radius: var(--dhm-radio-btn); }
.wc-block-components-radio-control__option-checked,
.wc-block-checkout__shipping-method-option--selected {
  border-color: var(--dhm-magenta) !important;
}

/* Botones de acción principales → CTA magenta del tema */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background: var(--dhm-magenta) !important;
  color: var(--dhm-blanco) !important;
  border-radius: var(--dhm-radio-btn) !important;
  font-weight: 600 !important; min-height: 52px;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
  background: var(--dhm-magenta-hover) !important;
}

@media (max-width: 767px) {
  .wc-block-checkout__main { padding: 20px 18px 6px !important; }
}
.dhm-mp-note { font-size: 12px; color: var(--dhm-mono-tenue); text-align: center; margin-top: 12px; font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; letter-spacing: 0.06em; }
.dhm-mp-note strong { color: var(--dhm-texto); }

/* Nombre del producto en el resumen de pedido del checkout → magenta del
   tema (una sola clase, misma regla en mobile y desktop). */
.wc-block-components-product-name { color: var(--dhm-magenta) !important; }

/* Controles +/- y "Quitar" inyectados por dhm-checkout-qty.js en cada
   artículo del resumen de pedido del checkout (ver ese archivo: el bloque
   de Woo lo deja de solo-lectura por diseño). Mismo lenguaje visual que el
   stepper nativo del Cart (borde tenue, foco/hover magenta).
   .wc-block-components-order-summary-item es flex-row + nowrap con columnas
   ya angostas (imagen/nombre/precio, ~300px en total en el sidebar) — meter
   ahí un 5º elemento lo desbordaba fuera de la tarjeta. flex-wrap:wrap en el
   contenedor + flex-basis:100% en el propio control lo baja a su propia
   línea completa sin tocar el acomodo de las columnas existentes. */
.wc-block-components-order-summary-item { flex-wrap: wrap !important; row-gap: 6px; }
.dhm-os-qty {
  display: flex; align-items: center; gap: 8px; flex-basis: 100%; width: 100%;
  justify-content: flex-end; margin-top: 2px;
}
.dhm-os-qty.is-busy { opacity: 0.5; pointer-events: none; }
.dhm-os-qty__btn {
  min-width: 26px; min-height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--dhm-radio-btn);
  color: var(--dhm-blanco); font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.dhm-os-qty__btn:hover:not(:disabled) { border-color: var(--dhm-magenta); color: var(--dhm-rosa-neon); }
.dhm-os-qty__btn:disabled { opacity: 0.35; cursor: default; }
.dhm-os-qty__count { min-width: 16px; text-align: center; font-size: 12.5px; color: var(--dhm-texto); }
.dhm-os-qty__remove {
  background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap;
  font-size: 12px; color: var(--dhm-texto-tenue); text-decoration: underline;
}
.dhm-os-qty__remove:hover { color: var(--dhm-rosa-neon); }

/* Checkout sin dirección de facturación visible. dhm-pickup-billing.js pone
 * .dhm-pickup-active en la raíz del checkout cuando la tarifa elegida es
 * pickup_location (Recoger pedido) O cuando el carrito es 100% virtual
 * (película/bundle), y rellena esos campos con la dirección del punto de
 * recogida (Los Vampiros Emparedados) para que la validación de WooCommerce
 * Blocks pase; aquí solo se ocultan. Quedan visibles nombre, apellidos y
 * teléfono del cliente. */
.dhm-pickup-active #billing-fields .wc-block-components-address-form__company,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__address_1,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__address_2,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__address_2-toggle,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__address_2-hidden-input,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__city,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__state,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__postcode,
.dhm-pickup-active #billing-fields .wc-block-components-address-form__country {
  display: none !important;
}

/* My Account — navegación (sesión iniciada) */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 14px; color: var(--dhm-texto); border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0; font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover { background: rgba(225,0,133,0.05); color: var(--dhm-blanco); }
.woocommerce-MyAccount-navigation li.is-active a { background: rgba(225,0,133,0.10); border-left-color: var(--dhm-magenta); color: var(--dhm-rosa-neon); font-weight: 600; }

/* -------------------------------------------------------------------------
 * My Account — PANTALLA DIVIDIDA (login + registro) sin sesión iniciada.
 * Woo renderiza form-login.php: dos columnas .u-column1 (Acceder) /
 * .u-column2 (Registrarse) dentro de #customer_login.u-columns. Por defecto
 * llegan SIN estilo de tema (inputs blancos, columnas sin separar, flotadas
 * al 47%). Se rearman como dos tarjetas lado a lado en escritorio, apiladas
 * en móvil, con inputs oscuros de la paleta. Requiere que el registro esté
 * habilitado (woocommerce_enable_myaccount_registration = yes), si no, solo
 * aparece la columna de login (sigue viéndose bien, centrada).
 * Todo va scopeado a .woocommerce-account para no filtrar a checkout.
 * ------------------------------------------------------------------------- */
.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account #customer_login.u-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1040px;
  margin: 8px auto 0;
}
/* #customer_login también lleva la clase .col2-set, a la que Woo añade un
   clearfix ::before/::after (content:" "; display:table). Con el contenedor
   en display:grid esos pseudo-elementos se vuelven ITEMS del grid y ocupan
   celdas (medido: empujaban el login a la celda sup-derecha y el registro a
   la inf-izquierda, en diagonal). Se anulan para que las 2 columnas reales
   fluyan a una sola fila. */
.woocommerce-account #customer_login.u-columns::before,
.woocommerce-account #customer_login.u-columns::after {
  content: none !important;
  display: none !important;
}
@media (min-width: 860px) {
  .woocommerce-account #customer_login.u-columns { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--dhm-card);
  border: 1px solid var(--dhm-borde);
  border-radius: var(--dhm-radio);
  padding: clamp(22px, 4vw, 36px);
}
/* La columna de registro con un acento sutil para diferenciarla del login */
.woocommerce-account #customer_login .u-column2 {
  background: linear-gradient(160deg, rgba(225,0,133,0.07), rgba(225,0,133,0.01));
  border-color: rgba(225,0,133,0.28);
}
/* Encabezados del área de cuenta. Kadence los pinta en su navy por defecto
   (rgb(26,32,44)), prácticamente invisible sobre el fondo oscuro (medido en
   vivo en "Tu cuenta" y "Acceder"). Cubre la h2 "Acceder" suelta (registro
   off), las h2 "Acceder"/"Crear cuenta" de la pantalla dividida (registro on)
   y la h1 "Tu cuenta" del banner. */
.woocommerce-account .woocommerce h2,
.woocommerce-account #customer_login h2 {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3vw, 32px);
  color: var(--dhm-blanco) !important;
  margin: 0 0 18px;
}
.woocommerce-account .wp-block-heading { color: var(--dhm-blanco) !important; }

/* Campos de formulario de cuenta (login, registro, editar cuenta, contraseña) */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .woocommerce-form .form-row { margin: 0 0 16px; }
.woocommerce-account .woocommerce-form label,
.woocommerce-account form.woocommerce-form-login label,
.woocommerce-account form.woocommerce-form-register label,
.woocommerce-account .woocommerce-EditAccountForm label {
  display: block;
  color: var(--dhm-texto-tenue);
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.woocommerce-account .woocommerce-Input,
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"],
.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account input.input-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dhm-borde-fuerte);
  border-radius: var(--dhm-radio-btn);
  color: var(--dhm-blanco);
  padding: 0 14px;
  font-family: 'TT Hoves Pro', system-ui, sans-serif;
  font-size: 15px;
}
.woocommerce-account .woocommerce-form input:focus,
.woocommerce-account input.input-text:focus {
  outline: none;
  border-color: var(--dhm-magenta);
  box-shadow: 0 0 0 1px var(--dhm-magenta);
}
.woocommerce-account input::placeholder { color: var(--dhm-mono-tenue); }

/* Mostrar/ocultar contraseña (ojo) que Woo inyecta en .password-input */
.woocommerce-account .password-input,
.woocommerce-account .woocommerce-password-strength { position: relative; display: block; }
.woocommerce-account .password-input input { padding-right: 46px; }
.woocommerce-account .show-password-input {
  position: absolute;
  right: 14px;
  top: 24px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--dhm-texto-tenue);
}
.woocommerce-account .show-password-input.display-password { color: var(--dhm-rosa-neon); }

/* "Recuérdame" (checkbox inline) */
.woocommerce-account .woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 2px 0 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: 'TT Hoves Pro', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  color: var(--dhm-texto) !important;
}
.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; min-height: 0; accent-color: var(--dhm-magenta); }

/* Botones de envío a ancho completo dentro de cada columna */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
}

/* Enlace de contraseña olvidada (era azul por defecto) */
.woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; }
.woocommerce-account .woocommerce-LostPassword a {
  color: var(--dhm-rosa-neon);
  font-size: 13px;
  text-decoration: none;
}
.woocommerce-account .woocommerce-LostPassword a:hover { text-decoration: underline; }

/* Asterisco de requerido + texto de privacidad del registro */
.woocommerce-account .required { color: var(--dhm-magenta); border: 0; text-decoration: none; }
.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account form.register > p:not(.woocommerce-form-row):not(.form-row) {
  font-size: 12.5px;
  color: var(--dhm-texto-tenue);
  line-height: 1.55;
}
.woocommerce-account .woocommerce-privacy-policy-text a { color: var(--dhm-rosa-neon); }

/* =============================================================
 * Patterns helpers (clases que usan los patterns)
 * ============================================================= */
.dhm-hero { min-height: 90vh; display: flex; align-items: flex-end; position: relative; overflow: hidden; }
.dhm-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--dhm-bg) 4%, rgba(12,9,11,0.55) 46%, rgba(12,9,11,0.78)); pointer-events: none; }
.dhm-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 0 6vw 88px; width: 100%; }
.dhm-hero .wp-block-cover__inner-container { position: relative; z-index: 3; }

/* Hero de Inicio con póster — mismo tratamiento que "El documental":
   2 columnas (póster + texto) sobre el video de fondo con el overlay
   .dhm-hero-video-bg__overlay (0.5), SIN el degradado extra de .dhm-hero
   (por eso el cover de Inicio ya no lleva esa clase: dejaba el video casi
   negro). El póster va enmarcado con sombra para destacar sobre el video. */
.dhm-hero-cols { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; }
.dhm-hero-poster { margin: 0; }
.dhm-hero-poster img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
@media (max-width: 800px) {
  /* Apiladas: el póster arriba, centrado y acotado para que no domine. */
  .dhm-hero-cols > .wp-block-column:first-child {
    flex-basis: auto !important; width: 100% !important;
  }
  .dhm-hero-poster { max-width: 300px; margin: 0 auto; }
}

/* Botones Rentar ahora / Comprar — feedback de carga y estado */
.dhm-add-to-cart-trigger.is-loading { opacity: 0.7; cursor: wait; pointer-events: none; }
.dhm-cart-status { min-height: 1.2em; margin: 8px 0 0; font-size: 12.5px; color: var(--dhm-rosa-tenue, #d9b9cb); }
.dhm-cart-status--error { color: var(--dhm-magenta, #e10085); }

/* Backdrop del hero — tráiler en bucle con desenfoque, detrás de la capa de degradado */
.dhm-hero-video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: var(--dhm-bg, #0c090b); }
.dhm-hero-video-bg__video {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%) scale(1.08);
  object-fit: cover;
  filter: blur(6px) brightness(0.65) saturate(1.1);
}
.dhm-hero-video-bg__overlay { position: absolute; inset: 0; background: rgba(12,9,11,0.5); }
@media (prefers-reduced-motion: reduce) {
  .dhm-hero-video-bg__video { display: none; }
}

.dhm-divider { width: 5px; height: 5px; border-radius: 50%; background: #5c4a55; display: inline-block; margin: 0 6px; vertical-align: middle; }

.dhm-quote {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-style: italic;
  font-size: clamp(26px,3.6vw,40px); line-height: 1.25; max-width: 30ch;
  text-align: center; margin: 0 auto;
}

.dhm-stat-num { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-size: 46px; color: var(--dhm-rosa-neon); line-height: 1; }
.dhm-stat-label { font-size: 13px; color: var(--dhm-texto-tenue); margin-top: 4px; }

/* Ayuda — bloque crisis */
.dhm-crisis {
  background: linear-gradient(120deg, rgba(225,0,133,0.18), rgba(225,0,133,0.05));
  border: 1px solid rgba(225,0,133,0.55);
  border-radius: 18px; padding: 32px;
}
.dhm-crisis-phone {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dhm-magenta); border-radius: 11px; padding: 18px 22px;
  color: var(--dhm-blanco); font-weight: 700; text-decoration: none;
}
.dhm-crisis-phone .num { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-size: 26px; font-weight: 600; }
.dhm-wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #0c090b; padding: 11px 14px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
}

/* Overlay de búsqueda — header */
.dhm-search-overlay[hidden] { display: none; }
.dhm-search-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
}
.dhm-search-overlay__backdrop {
  position: absolute; inset: 0; background: rgba(12,9,11,0.92);
}
.dhm-search-overlay__panel {
  position: relative; z-index: 1; width: min(640px, 88vw);
  background: var(--dhm-card); border: 1px solid var(--dhm-borde-fuerte);
  border-radius: var(--dhm-radio); padding: 22px;
}
.dhm-search-overlay__close {
  position: absolute; top: -38px; right: -10px; background: none; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; color: var(--dhm-blanco); cursor: pointer;
}
.dhm-search-overlay__close .dhm-icon { width: 20px; height: 20px; }
.dhm-search-overlay__input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--dhm-borde-fuerte);
  color: var(--dhm-blanco); border-radius: var(--dhm-radio-btn);
  padding: 14px 16px; font-family: 'TT Hoves Pro', system-ui, sans-serif; font-size: 17px;
}
.dhm-search-overlay__input:focus { outline: 1.5px solid var(--dhm-magenta); }
.dhm-search-overlay__row { display: flex; gap: 10px; align-items: stretch; }
.dhm-search-overlay__row .dhm-search-overlay__input { flex: 1 1 auto; }
.dhm-search-overlay__submit {
  flex: 0 0 auto; min-width: 52px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dhm-magenta); color: var(--dhm-blanco);
  border: none; border-radius: var(--dhm-radio-btn);
  transition: background .15s ease;
}
.dhm-search-overlay__submit .dhm-icon { width: 20px; height: 20px; }
.dhm-search-overlay__submit:hover { background: var(--dhm-magenta-hover); }
.dhm-search-overlay__submit:focus-visible { outline: 2px solid var(--dhm-blanco); outline-offset: 2px; }
.dhm-search-overlay__hint {
  margin: 12px 2px 0; font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif;
  font-size: 11.5px; letter-spacing: 0.04em; color: var(--dhm-mono-tenue);
}

/* Reproductor — modal del documental */
.dhm-player-modal[hidden] { display: none; }
.dhm-player-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.dhm-player-modal__backdrop {
  position: absolute; inset: 0; background: rgba(12,9,11,0.92);
}
.dhm-player-modal__panel {
  position: relative; z-index: 1; width: min(960px, 92vw);
  background: var(--dhm-card); border-radius: 10px; padding: 16px;
}
.dhm-player-modal__close {
  position: absolute; top: -38px; right: 0; background: none; border: none;
  color: var(--dhm-blanco); font-size: 20px; cursor: pointer;
}
.dhm-player-modal__body video { display: block; border-radius: 8px; }
.dhm-player-error { color: var(--dhm-blanco); text-align: center; padding: 40px 20px; }

/* Avisos de WooCommerce (añadido al carrito, info, error) — al sistema oscuro */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--dhm-card);
  border: 1px solid var(--dhm-borde-fuerte);
  border-left: 3px solid var(--dhm-magenta);
  border-radius: 8px;
  color: var(--dhm-blanco);
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.woocommerce-info  { border-left-color: var(--dhm-rosa-neon); }
.woocommerce-error { border-left-color: #ff4d4d; }
.woocommerce-error li { list-style: none; margin: 0; }
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  order: 2;
  background: none;
  border: 1px solid var(--dhm-rosa-neon);
  color: var(--dhm-rosa-neon);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: var(--dhm-magenta);
  border-color: var(--dhm-magenta);
  color: var(--dhm-blanco);
}

/* Pie de foto en el modal: semblanza de la protagonista bajo su tráiler */
.dhm-player-modal__caption { padding: 14px 6px 4px; }
.dhm-player-modal__caption-title {
  display: block; margin-bottom: 4px;
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif;
  font-weight: 600; font-size: 17px; color: var(--dhm-rosa-neon);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dhm-player-modal__caption p {
  margin: 0; color: var(--dhm-texto); font-size: 14.5px; line-height: 1.55;
}
@media (max-width: 600px) {
  .dhm-player-modal__caption { padding: 10px 2px 2px; }
  .dhm-player-modal__caption p { font-size: 13.5px; }
}

/* Mi cuenta — insignias de renta + continuar viendo */
.dhm-badge {
  display: inline-block; padding: 4px 10px; border-radius: 5px;
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 11.5px;
}
.dhm-badge--active { background: rgba(225,0,133,0.15); color: var(--dhm-rosa-neon); }
.dhm-badge--expired { background: rgba(255,255,255,0.08); color: var(--dhm-texto-tenue); }
.dhm-continue-watching {
  background: var(--dhm-card); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px;
}
.dhm-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

/* =============================================================
 * Mobile — disposición y espaciado
 *
 * El breakpoint en el que Kadence apila los wp:columns en este sitio
 * cae entre 781px y 820px (medido en vivo), así que se usa 800px aquí.
 * Los héroes (home + "El documental") usan wp:cover con min-height
 * 80-90vh y fondo plano (sin imagen/video real) — en mobile el texto
 * es mucho más corto que ese alto, y al estar alineado abajo deja un
 * bloque vacío enorme arriba. Se reduce el alto en mobile porque ya
 * no hay nada que "llenar" ese espacio.
 * ============================================================= */
@media (max-width: 800px) {
  .dhm-hero { min-height: 60vh; }
  .wp-block-cover { min-height: 60vh !important; padding-top: 56px !important; }

  /* Divisor vertical de la columna de stats (home): solo tiene sentido
     junto a la columna de texto en el layout de 2 columnas de escritorio;
     apilado en mobile queda como una línea suelta sin propósito. */
  .wp-block-column[style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
    margin-top: 40px;
  }

  /* Aire entre columnas apiladas (reparto, directorio de ayuda, etc.) */
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column {
    margin-top: 28px;
  }

  /* Secciones apiladas con padding vertical de escritorio (96px/88px, usados en
     home.php y detalle-documental.php como espaciado "de aire" entre bloques
     anchos) se acumulan en mobile: dos secciones consecutivas suman su
     padding-bottom + padding-top sin nada de por medio, dejando ~200px de
     vacío entre el fin de un texto y el inicio del siguiente (medido en vivo
     con Playwright a 390px: "La película"→"Reparto" y "Reparto"→cita tenían
     ~216px de negro sin contenido). No se toca el pattern (regla del task):
     se relee el valor del atributo style inline y se comprime a la mitad vía
     selector de atributo + !important, que sí gana a la especificidad inline. */
  [style*="padding-top:96px"] { padding-top: 48px !important; }
  [style*="padding-bottom:96px"] { padding-bottom: 48px !important; }
  [style*="padding-top:88px"] { padding-top: 44px !important; }
  [style*="padding-bottom:88px"] { padding-bottom: 44px !important; }
}
.dhm-library-card { background: var(--dhm-card); border-radius: 10px; padding: 16px; }
.dhm-library-card--bundle { grid-column: 1 / -1; }
.dhm-library-card__hint { font-size: 13.5px; color: var(--dhm-texto-tenue); margin: 4px 0 12px; }

/* Bundle «Los especialistas»: botones de reproducción (Mi biblioteca, página
 * del producto y /ver/{token}/ para invitados) */
.dhm-bundle-videos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dhm-bundle-videos .button {
  background: none; border: 1px solid var(--dhm-rosa-neon); color: var(--dhm-rosa-neon);
  border-radius: 999px; padding: 9px 18px; font-size: 13.5px; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.dhm-bundle-videos .button:hover {
  background: var(--dhm-magenta); border-color: var(--dhm-magenta); color: var(--dhm-blanco);
}
.dhm-bundle-owner { margin: 18px 0 8px; }

/* --- Anuncios del home (dhm-admin → Ajustes → Anuncios) --- */
.dhm-promo-pill,
.dhm-promo-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(249, 102, 192, 0.12);
  border: 1px dashed var(--dhm-rosa-neon);
  color: #ffb3d6; border-radius: 999px;
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif;
  font-size: 13px; letter-spacing: 0.06em;
  padding: 7px 16px; text-decoration: none;
  transition: background 0.2s ease;
}
.dhm-promo-pill { margin-bottom: 10px; }
/* El h1 del hero trae un margin-top grande (herencia del navegador/tema,
   ~100px) que deja un hueco enorme entre la píldora y el título cuando la
   píldora está activa. Se anula solo en ese contexto puntual, sin tocar el
   margen de los demás encabezados del sitio. */
.dhm-promo-pill + .wp-block-heading { margin-top: 0 !important; }
.dhm-promo-pill:hover, .dhm-promo-btn:hover { background: rgba(249, 102, 192, 0.22); color: var(--dhm-blanco); }
.dhm-promo-pill__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--dhm-rosa-neon); box-shadow: 0 0 8px var(--dhm-rosa-neon);
}
@media (max-width: 600px) {
  .dhm-promo-pill, .dhm-promo-btn { font-size: 12px; padding: 6px 13px; }
}

/* --- Carrusel de protagonistas (home) --- */
.dhm-protas { position: relative; display: flex; align-items: center; gap: 10px; }
.dhm-protas__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; }
.dhm-protas__viewport::-webkit-scrollbar { display: none; }
.dhm-protas__track { display: flex; column-gap: 22px; }
.dhm-protas__card { flex: 0 0 260px; scroll-snap-align: start; text-align: center; }
.dhm-protas__nombre { margin: 0 0 12px; font-size: 19px; }
.dhm-protas__media { position: relative; }
/* aspect-ratio reserva el espacio del póster (evita salto de layout al
   cargar, todas las fotos comparten la misma proporción 3:4) y object-fit
   mantiene el encuadre centrado si algún póster futuro llega con otra
   proporción. */
.dhm-protas__poster { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: block; box-shadow: var(--dhm-sombra-card); }
.dhm-protas__btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(12, 9, 11, 0.72);
  border: 1px solid var(--dhm-rosa-neon); color: var(--dhm-blanco);
  border-radius: 999px; padding: 8px 18px; font-size: 13px; text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dhm-protas__btn:hover { background: var(--dhm-magenta); border-color: var(--dhm-magenta); }
.dhm-protas__arrow {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--dhm-card); color: var(--dhm-rosa-neon);
  border: 1px solid var(--dhm-borde-fuerte); font-size: 20px; line-height: 1; cursor: pointer;
}
.dhm-protas__arrow[disabled] { opacity: 0.3; cursor: default; }
@media (max-width: 600px) {
  .dhm-protas__arrow { display: none; } /* en touch manda el swipe */
  .dhm-protas__card { flex-basis: 68vw; }
  .dhm-protas__track { column-gap: 14px; }
}

/* --- Acordeón (Kadence Blocks) — usado en ayuda.php y producto-extras.php.
 * El plugin pinta el header claro (fondo #f2f2f2, texto #555) vía sus propias
 * custom properties --global-palette*; sin esto queda blanco sobre el tema
 * oscuro. Se sobrescriben esas variables dentro del wrap del bloque en vez
 * de pelear con la especificidad de cada regla del plugin. */
.kt-accordion-wrap {
  --global-palette5: var(--dhm-blanco);
  --global-palette7: var(--dhm-card-sutil);
  --global-palette8: var(--dhm-card);
}
.kt-blocks-accordion-header { border: 1px solid var(--dhm-borde); border-radius: var(--dhm-radio-btn); }
.kt-blocks-accordion-header.kt-accordion-panel-active { background-color: var(--dhm-magenta) !important; }
.kt-accordion-panel-inner {
  background: var(--dhm-card-sutil);
  border: 1px solid var(--dhm-borde) !important;
  color: var(--dhm-texto);
}

/* --- Checkout (WooCommerce Blocks) — solo mobile ---
 * 1) El checkout muestra el "Resumen de pedido" DOS veces en mobile: esta
 *    píldora compacta arriba (.wc-block-checkout__sidebar, order:0 dentro
 *    del flex column de .wc-block-components-sidebar-layout) y el resumen
 *    completo de nuevo justo antes del botón de pago (un Fill/portal de
 *    React que WooCommerce inyecta ahí mismo, fuera de nuestro control).
 *    Se oculta la píldora de arriba — el resumen completo de abajo queda
 *    como única fuente. @container coincide con el breakpoint que ya usa
 *    WooCommerce Blocks para este mismo componente (699px).
 * 2) El bloque de checkout no trae padding horizontal propio en ningún
 *    ancestro (a diferencia del resto del sitio, que usa 6vw) — en mobile
 *    el ancho iguala al viewport y los bordes de los campos quedan pegados
 *    al borde de la pantalla. */
@container (max-width: 699px) {
  .wc-block-checkout__sidebar { display: none; }
}
@media (max-width: 600px) {
  .wp-block-woocommerce-checkout.wc-block-checkout { padding-left: 5vw; padding-right: 5vw; }
}

/* --- Banner de aliados (home) — Centro Soma ---
 * Contenido de un socio externo; se adapta al sistema del sitio (variables
 * --dhm-*, dhm-tag, fuentes de marca) en vez de reusar los estilos inline
 * del HTML que mandó el cliente (traía Cormorant Garamond/Archivo, fuentes
 * que este tema ya no carga desde la migración a TT Mussels/TT Hoves). */
.dhm-soma {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 480px;
  background-size: cover; background-position: center;
  border: 1px solid var(--dhm-borde);
}
.dhm-soma::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,9,11,0.94) 0%, rgba(12,9,11,0.8) 42%, rgba(12,9,11,0.5) 70%, rgba(12,9,11,0.72));
}
.dhm-soma::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(225,0,133,0.15), transparent 50%);
}
.dhm-soma__grid {
  position: relative; z-index: 2; padding: 48px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
  min-height: 480px;
}
.dhm-soma__badge {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: var(--dhm-blanco);
  border-radius: 14px; padding: 5px; margin-bottom: 26px;
  box-shadow: var(--dhm-sombra);
}
.dhm-soma__badge img { height: 84px; width: auto; max-width: 100%; display: block; }
@media (max-width: 600px) {
  .dhm-soma__badge img { height: 64px; }
}
.dhm-soma__heading {
  font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-weight: 500;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 14px; max-width: 22ch; color: var(--dhm-blanco);
}
.dhm-soma__text { font-size: 14px; line-height: 1.6; color: var(--dhm-texto); margin: 0; max-width: 58ch; }
.dhm-soma__text strong { color: var(--dhm-blanco); font-weight: 600; }
.dhm-soma__contact {
  background: rgba(12,9,11,0.55); border: 1px solid var(--dhm-borde-fuerte);
  border-radius: var(--dhm-radio); padding: 26px; backdrop-filter: blur(10px);
}
.dhm-soma__details { display: flex; flex-direction: column; gap: 13px; font-size: 14px; color: var(--dhm-texto); line-height: 1.5; margin-bottom: 20px; }
.dhm-soma__detail { display: flex; gap: 10px; align-items: flex-start; color: var(--dhm-texto); text-decoration: none; }
.dhm-soma__detail a { color: var(--dhm-texto); }
.dhm-soma__detail > a { display: flex; gap: 10px; align-items: flex-start; }
.dhm-soma__detail span[aria-hidden] { color: var(--dhm-rosa-neon); flex: none; }
.dhm-soma__maps-link { color: var(--dhm-rosa-neon); font-size: 12.5px; text-decoration: underline; }
.dhm-soma__detail a[href^="tel"], .dhm-soma__detail a[href^="mailto"] { color: var(--dhm-blanco); font-weight: 500; text-decoration: none; }
.dhm-soma__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--dhm-magenta); border-radius: var(--dhm-radio-btn); padding: 14px;
  color: var(--dhm-blanco); font-family: 'TT Hoves Pro', sans-serif; font-size: 15px; font-weight: 700;
  margin-bottom: 10px; transition: background 0.2s ease;
}
.dhm-soma__cta:hover { background: var(--dhm-magenta-hover); }
.dhm-soma__site {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--dhm-borde-fuerte);
  border-radius: var(--dhm-radio-btn); padding: 12px;
  color: var(--dhm-blanco); font-family: 'TT Hoves Pro', sans-serif; font-size: 14px; font-weight: 600;
  margin-bottom: 16px; text-decoration: none;
}
.dhm-soma__social { display: flex; gap: 8px; justify-content: center; padding-top: 14px; border-top: 1px solid var(--dhm-borde); }
.dhm-soma__social a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--dhm-borde-fuerte); border-radius: 8px; padding: 10px;
  color: var(--dhm-blanco); font-family: 'TT Hoves Pro', sans-serif; font-size: 12.5px; font-weight: 600; text-decoration: none;
}
@media (max-width: 800px) {
  .dhm-soma__grid { grid-template-columns: 1fr; padding: 28px; min-height: 0; }
  .dhm-soma__heading { max-width: none; }
  .dhm-soma { background-image: url('../img/soma/soma-bg-800.webp') !important; }
}
@media (max-width: 600px) {
  .dhm-soma__social { flex-wrap: wrap; }
  .dhm-soma__social a { flex-basis: 100%; }
}

/* --- Galería "Días de grabación" (home) — adaptada del diseño de Claude
 * Design; ya usaba la paleta exacta del sitio (#FBFAFA/#F966C0/#E10085), solo
 * se cambian las fuentes de Google Fonts a las de marca (TT Mussels/TT Hoves/
 * Gotham Condensed) y se pasa el <style> inline a este archivo. */
.dhm-gallery__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.dhm-gallery__sub { font-size: 14px; color: var(--dhm-texto); margin: 6px 0 0; }
.dhm-gallery__hint { font-size: 12.5px; color: var(--dhm-texto-tenue); font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; }

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

/* Fila propia entre el encabezado y la grilla: solo el cartel de Val y Fusha,
 * centrado y del mismo ancho que las tarjetas de día (columnas de la grilla). */
.dhm-gallery__cartel-row { display: flex; justify-content: center; margin: 6px 0 26px; }
.dhm-gallery__cartel-row img {
  display: block; width: calc((100% - 60px) / 6); height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
@media (max-width: 1000px) { .dhm-gallery__cartel-row img { width: calc((100% - 24px) / 3); } }
@media (max-width: 560px)  { .dhm-gallery__cartel-row img { width: calc((100% - 12px) / 2); } }
@media (max-width: 1000px) { .dhm-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .dhm-gallery__grid { grid-template-columns: repeat(2, 1fr); } }

.dhm-day {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--dhm-card-sutil); border: 1px solid var(--dhm-borde); border-radius: 12px;
  padding: 0; aspect-ratio: 3 / 4; display: block; width: 100%;
  transition: border-color .18s ease, transform .18s ease;
}
.dhm-day:hover, .dhm-day:focus-visible { border-color: rgba(225,0,133,0.6); transform: translateY(-2px); outline: none; }
.dhm-day__thumb { position: relative; width: 100%; height: 100%; }
.dhm-day__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhm-day__num {
  position: absolute; top: 10px; left: 10px;
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 10.5px; letter-spacing: .14em;
  color: var(--dhm-rosa-neon); background: rgba(12,9,11,0.55); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(225,0,133,0.35);
}
.dhm-day__count {
  position: absolute; bottom: 10px; right: 10px;
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 10.5px;
  color: var(--dhm-blanco); background: rgba(12,9,11,0.6); padding: 3px 8px; border-radius: 5px;
}

/* Modal */
.dhm-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.dhm-modal.is-open { display: flex; flex-direction: column; }
.dhm-modal__backdrop { position: absolute; inset: 0; background: rgba(4,3,4,0.88); backdrop-filter: blur(8px); }
.dhm-modal__shell { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 20px 24px 24px; color: var(--dhm-blanco); }
.dhm-modal__head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; }
.dhm-modal__title { font-family: 'TT Mussels', 'Arial Narrow', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.15; margin: 0; }
.dhm-modal__daynum { font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 11.5px; letter-spacing: .2em; color: var(--dhm-rosa-neon); margin-bottom: 2px; text-transform: uppercase; }
.dhm-modal__meta { margin-left: auto; font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 12px; color: var(--dhm-texto-tenue); letter-spacing: .06em; }
.dhm-modal__close {
  background: rgba(255,255,255,0.06); border: 1px solid var(--dhm-borde-fuerte); border-radius: 8px;
  color: var(--dhm-blanco); font-family: 'TT Hoves Pro', sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 14px; cursor: pointer;
}
.dhm-modal__close:hover { background: rgba(255,255,255,0.12); }
.dhm-modal__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.dhm-modal__frame {
  position: relative; width: 100%; height: 100%; max-width: 1200px; max-height: 100%;
  border-radius: 12px; overflow: hidden; background: var(--dhm-bg);
  display: flex; align-items: center; justify-content: center;
}
.dhm-modal__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dhm-modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(12,9,11,0.7); border: 1px solid var(--dhm-borde-fuerte);
  color: var(--dhm-blanco); font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .15s ease, border-color .15s ease;
}
.dhm-modal__nav:hover { background: var(--dhm-magenta); border-color: var(--dhm-magenta); }
.dhm-modal__nav[disabled] { opacity: .35; cursor: not-allowed; }
.dhm-modal__nav[disabled]:hover { background: rgba(12,9,11,0.7); border-color: var(--dhm-borde-fuerte); }
.dhm-modal__nav--prev { left: 16px; }
.dhm-modal__nav--next { right: 16px; }
.dhm-modal__counter {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: 'Gotham Condensed', 'Arial Narrow', sans-serif; font-size: 12px; letter-spacing: .08em;
  color: var(--dhm-blanco); background: rgba(12,9,11,0.6); border: 1px solid var(--dhm-borde-fuerte);
  padding: 5px 12px; border-radius: 20px;
}
.dhm-modal__strip { display: flex; gap: 8px; padding: 14px 4px 4px; overflow-x: auto; scroll-snap-type: x mandatory; }
.dhm-thumb {
  flex: none; width: 82px; height: 60px; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; scroll-snap-align: start; padding: 0; background: none;
}
.dhm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dhm-thumb.is-active { border-color: var(--dhm-magenta); }
.dhm-modal__strip::-webkit-scrollbar { height: 6px; }
.dhm-modal__strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; }
@media (max-width: 600px) {
  .dhm-modal__meta { display: none; }
  .dhm-modal__nav { width: 42px; height: 42px; font-size: 18px; }
}