/* ==========================================================================
   Más DTF — Ajustes de marca sobre los widgets de Haru PrintSpace (0.11.0)

   Las páginas de producto se montan clonando los bloques del demo «Print on
   Demand» (Home 6) con los widgets del tema. Aquí va lo que el demo no deja
   cambiar desde el panel y que se decidió el 7-9-2026 para toda la web:

   1. Titulares en grafito. La familia es la de la demo, Manrope, en todo
      (decisión 9-9-2026; sustituye a «Archivo en titulares» del 7-9).
   2. Botones en cápsula (48 px), como la demo (decisión 9-9-2026).
   3. Antetítulos tipo «píldora» con el azul de marca en vez del naranja/verde.

   Los colores de acento del tema ya son el azul #046DB5 desde Theme Options
   (fase 2): en la hoja compilada no queda ningún naranja #E46319.
   ========================================================================== */

/* --- 1. Titulares ---------------------------------------------------------
   haru-heading pinta TODO como <h2> (títulos, antetítulos y descripciones).
   functions.php corrige la etiqueta según el estilo; aquí solo el color:
   la familia y los tamaños son los del tema (Manrope, estilos heading-*). */
.haru-heading-title[class*="haru-heading-title--heading-"],
.haru-heading-title--single-heading-1,
.haru-heading-title[class*="haru-heading-title--landing-"] {
  color: var(--c-titulo);
  text-wrap: balance;
}

/* Títulos de tarjeta de los widgets (banner, icon-box, pasos, contador). */
.haru-banner__title,
.haru-icon-box__title,
.haru-steps__title,
.haru-counter__number-wrap {
  color: var(--c-titulo);
}
.haru-counter__number-wrap { font-variant-numeric: tabular-nums; }

/* Descripciones y antetítulos del heading: Manrope, sin negrita de titular. */
.haru-heading-title[class*="haru-heading-title--description-"] {
  font-family: var(--ff-texto);
  color: var(--c-texto-2);
}

/* --- 2. Radio de los botones ---------------------------------------------
   El tema ya usa cápsula (48 px). Se deja el token por si cambia la decisión. */
.haru-button.haru-button--round-normal,
.haru-button[class*="haru-button--round-"],
.haru-banner__button,
.haru-steps__btn {
  border-radius: var(--r-boton);
}

/* --- 3. Píldora del antetítulo --------------------------------------------
   sub-heading-5 lleva el fondo por ajuste del widget (title_background); el
   color del texto lo pone el tema. Se fuerza el grafito para que la píldora
   azul claro / film cumpla contraste. */
.haru-heading-title--sub-heading-5 {
  font-family: var(--ff-texto);
  color: var(--c-titulo);
}

/* --- 4. Listas con tick ---------------------------------------------------
   haru-text-list acepta icon_color por widget; por si se olvida, el tick
   nunca es verde. */
.haru-text-list .haru-text-list__item::before,
.haru-text-list .haru-text-list__icon {
  color: var(--md-azul);
}

/* --- 5. Página de producto v2 (bloques de Home 6) ------------------------
   Ajustes finos sobre los clones. Todas las clases md-v2-* se ponen en
   Avanzado → Clases CSS del contenedor o del widget. */

/* Aviso de las 11:00: la única aparición del amarillo en la página. */
.md-v2-corte .haru-icon-box__icon span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--md-amarillo);
}
.md-v2-corte .haru-icon-box__icon i { color: var(--md-grafito); font-size: 40px; }

/* Etiqueta dentro del título de una tarjeta («El precio por metro más bajo»). */
.md-v2-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px;
  border-radius: var(--r-boton); background: var(--md-azul); color: #fff;
  font-family: var(--ff-texto); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  font-stretch: 100%; line-height: 1.4; white-space: nowrap;
}

/* Tarjetas de tarifas: el precio destaca, el resto se lee. */
.md-v2-tarifas .haru-banner__description { color: var(--c-texto); font-size: 15px; line-height: 1.7; }
.md-v2-tarifas .haru-banner__description strong { color: var(--md-azul); font-size: 1.15em; font-weight: 700; }

/* Enlaces dentro de los textos del heading («Hablemos», «Ver DTF UV»). */
.haru-heading-title a { color: var(--md-azul); text-decoration: underline; text-underline-offset: 0.15em; }
.haru-heading-title a:hover { color: var(--md-azul-hover); }

/* Párrafo de apoyo centrado bajo un titular centrado. */
.md-v2-centro .haru-heading-title { max-width: 72ch; margin-inline: auto; }

/* Bloque oscuro (cierre): títulos y textos claros, botón secundario perfilado en blanco. */
.md-oscuro .haru-heading-title[class*="haru-heading-title--heading-"] { color: #fff; }
.md-oscuro .haru-heading-title[class*="haru-heading-title--description-"] { color: var(--md-gris-claro); }
.md-oscuro .haru-heading-title a { color: #fff; }
.md-oscuro .haru-button.haru-button--outline { background: transparent; color: #fff; border-color: #fff; }
.md-oscuro .haru-button.haru-button--outline:hover { background: #fff; color: var(--md-grafito); }

/* Sección en borrador (placeholders): banda punteada para que no se cuele publicada. */
.md-v2-borrador { outline: 2px dashed var(--md-rojo); outline-offset: -2px; }
.md-v2-borrador::before {
  content: "BORRADOR · datos por confirmar"; display: block; padding: 6px 15px;
  font: 600 12px/1 var(--ff-texto); letter-spacing: 0.06em; color: var(--md-rojo-texto);
}

/* Contadores: hueco entre cifra y sufijo. */
.haru-counter__suffix { margin-left: 0.15em; }

/* --- 6. Botón de finalizar compra ----------------------------------------
   El botón que cierra el carrito y el pago es el más importante de la tienda,
   así que lleva el mismo degradado «Skyline» que «Haz tu pedido rápido» de la
   cabecera (las variables las define assets/css/cabecera.css en :root).
   Se cubren el carrito y el pago por bloques, que es lo que usa la tienda, y
   sus equivalentes clásicos por si alguna página vuelve a la plantilla vieja. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce .checkout-button.button,
.woocommerce #place_order,
.woocommerce-mini-cart__buttons .button.checkout,
.widget_shopping_cart .buttons .button.checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  border-radius: var(--r-boton);
  background: var(--md-degradado-azul);
  color: var(--md-blanco);
  font-family: var(--ff-texto);
  font-weight: 700;
  line-height: 1.2;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.woocommerce .checkout-button.button:hover,
.woocommerce #place_order:hover,
.woocommerce-mini-cart__buttons .button.checkout:hover,
.widget_shopping_cart .buttons .button.checkout:hover {
  background: var(--md-degradado-azul-hover);
  color: var(--md-blanco);
}

/* Deshabilitado (faltan datos del pago): el degradado apagado, no otro color. */
.wc-block-components-checkout-place-order-button:disabled,
.wc-block-cart__submit-button:disabled {
  opacity: .55;
}

/* El carrito lateral pinta su botón con reglas propias más fuertes
   (.haru-cart .haru-cart-wrap.cart-side .cart-total .buttons .button, y un
   background-color forzado sobre .woocommerce a.button), así que aquí se
   repite el degradado con esa misma especificidad y el texto se centra: salía
   pegado al borde de arriba del botón. */
.haru-cart .haru-cart-wrap .cart-total .buttons .button.checkout,
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout,
.woocommerce .woocommerce-mini-cart__buttons a.button.checkout {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r-boton);
  background: var(--md-degradado-azul) !important;
  background-color: transparent !important;
  color: var(--md-blanco) !important;
  font-family: var(--ff-texto);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.haru-cart .haru-cart-wrap .cart-total .buttons .button.checkout:hover,
.widget_shopping_cart .woocommerce-mini-cart__buttons .button.checkout:hover,
.woocommerce .woocommerce-mini-cart__buttons a.button.checkout:hover {
  background: var(--md-degradado-azul-hover) !important;
  color: var(--md-blanco) !important;
}