/*
 * Anclajes Powers — colores nuevos: fondo BLANCO, detalles ROJOS, letras NEGRAS.
 *
 * Se carga DESPUÉS de main.css del tema, así que lo que se escribe aquí "gana".
 * main.css no se toca: si este archivo deja de cargarse, la web vuelve a verse
 * negra como antes.
 *
 * Cómo está pensado:
 *   - "Zona blanca" = el fondo general (página, header, hero, secciones, tarjetas).
 *   - "Zona negra"  = barra superior, cinta de texto y footer. Ahí se usan los
 *                     colores originales del tema (letras claras, detalles rojos).
 */

/* =========================================================================
   1. Las tres variables nuevas (cambia aquí y cambia toda la web)
   ====================================================================== */

:root {
	--color-fondo: #ffffff;   /* blanco de fondo */
	--color-detalle: #db011c; /* rojo de los detalles */
	--color-texto: #000000;   /* negro de las letras */

	/* Grises de apoyo para tarjetas y líneas (derivados, no hace falta tocarlos) */
	--color-gris-claro: #f4f5f6;  /* tarjetas de categorías, cajas */
	--color-borde: #e3e6ea;       /* bordes suaves */

	/* Avisa al navegador que la web es clara: formularios y desplegables claros */
	color-scheme: light;

	/* Textos: blanco y grises del tema → negro */
	--ap-white: var(--color-texto);
	--ap-mist-2: var(--color-texto);
	--ap-mist: var(--color-texto);
	--ap-steel: var(--color-texto);

	/* Detalles en rojo (sobre blanco el rojo pasa la norma: 5,2) */
	--ap-red: var(--color-detalle);
	--ap-red-ink: var(--color-detalle);
	--ap-red-soft: rgba(219, 1, 28, 0.08);
	--ap-red-line: rgba(219, 1, 28, 0.45);

	/* Superficies del tema (antes negras) → blancas y grises muy claros */
	--ap-ink: var(--color-fondo);
	--ap-surface: var(--color-gris-claro);
	--ap-surface-2: #eceef0;
	--ap-surface-3: var(--color-borde);

	/* Líneas finas */
	--ap-line: var(--color-borde);
	--ap-line-soft: #eef0f2;
	--ap-line-strong: #b8bec6;
}

/* =========================================================================
   2. Zonas negras: barra superior, cinta y footer (colores originales del tema)
   ====================================================================== */

.ap-topbar,
.ap-marquee,
.ap-footer {
	color-scheme: dark;
	--ap-white: #f2f5f8;
	--ap-mist-2: #c2ccd6;
	--ap-mist: #8e9aa7;
	--ap-steel: #7d8b9b;
	--ap-red: var(--color-detalle);
	--ap-red-ink: #e5485c;            /* rojo aclarado para letras chicas sobre negro */
	--ap-red-soft: rgba(219, 1, 28, 0.16);
	--ap-red-line: rgba(219, 1, 28, 0.42);
	--ap-ink: #0b0d0f;
	--ap-surface: #101316;
	--ap-line: #262c34;
	--ap-line-soft: #1a1f25;
	--ap-line-strong: #565f6d;
	background: #000;
}

/* La cinta: sin el desvanecido de los bordes (sobre blanco quedaba una franja borrosa) */
.ap-marquee {
	-webkit-mask-image: none;
	mask-image: none;
}

/* =========================================================================
   3. Fondo general blanco
   ====================================================================== */

body.ap-theme {
	background: var(--color-fondo);
	color: var(--color-texto);
}

/* Header blanco semitransparente, con línea gris abajo */
.ap-header {
	background: rgba(255, 255, 255, 0.88);
	border-bottom: 1px solid var(--color-borde);
}

.ap-header.is-stuck {
	background: rgba(255, 255, 255, 0.97);
	border-bottom-color: var(--color-borde);
}

.ap-mobile-nav {
	background: var(--color-fondo);
}

/* Logo AP del header pintado ROJO: el logo se usa como "molde" y se rellena de rojo.
   (El archivo de imagen no se toca. En el footer negro sigue blanco, como siempre.) */
.ap-header .ap-brand__logo {
	background: var(--color-detalle);
	-webkit-mask: url("/wp-content/uploads/2026/09/anclajes-powers-logo.png") left center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/09/anclajes-powers-logo.png") left center / contain no-repeat;
}

.ap-header .ap-brand__logo-img {
	opacity: 0;                       /* la imagen sigue ahí (ocupa su lugar y se lee su texto alternativo) */
}

/* Secciones */
.ap-hero,
.ap-section--authority,
.ap-404 {
	background: var(--color-fondo);
}

.ap-page-hero,
.ap-shop-hero {
	background: var(--color-gris-claro);
	border-bottom-color: var(--color-borde);
}

.ap-cta {
	background: var(--color-gris-claro);
}

.ap-cta__glow {
	display: none;
}

.ap-authority__stripe {
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 12px, transparent 12px 34px);
}

/* =========================================================================
   4. Hero blanco con adornos grises suaves
   ====================================================================== */

.ap-hero__layer--vignette,
.ap-hero__layer--glow {
	background: none;
}

.ap-hero__layer--wedge {
	background: linear-gradient(112deg, transparent 34%, rgba(0, 0, 0, 0.18) 50%, transparent 66%);
}

.ap-hero__halo {
	background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.06) 0%, transparent 62%);
}

.ap-page-hero__grid,
.ap-shop-hero__grid,
.ap-404__grid,
.ap-hero__layer--grid {
	background-image:
		linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

.ap-hero__ghost {
	-webkit-text-stroke: 1px rgba(0, 0, 0, 0.08);
}

.ap-hero__scanline {
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.025), transparent);
}

/* Sombra del producto más liviana (la original era casi negra) */
.ap-hero__product-img {
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18)) contrast(1.05);
}

.ap-hero__product--plate .ap-hero__product-img,
.ap-hero__product--plate .ap-hero__product-link {
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--color-borde);
}

.ap-hero__abstract-bolt {
	box-shadow: 0 30px 60px -24px rgba(219, 1, 28, 0.35);
}

/* Etiqueta flotante del producto y etiquetas de las tarjetas: blancas con borde */
.ap-hero__tag,
.ap-badge {
	background: rgba(255, 255, 255, 0.92);
	border-color: var(--color-borde);
}

.ap-badge--destacado {
	background: var(--color-detalle);
	border-color: var(--color-detalle);
	color: #fff;
}

/* =========================================================================
   5. Tarjetas
   ====================================================================== */

/* Productos: blancas con borde gris; el borde se pone rojo al pasar el mouse */
.ap-theme ul.products li.product {
	background: var(--color-fondo);
	border-color: var(--color-borde);
}

.ap-theme ul.products li.product:hover {
	border-color: var(--color-detalle);
}

/* Cuadro de la foto: blanco puro (así las fotos JPG con fondo blanco no muestran un rectángulo) */
.ap-card__media {
	background: var(--color-fondo);
}

.ap-card__media::after {
	background: none;
}

/* Categorías: gris muy claro */
.ap-cat__link {
	background: var(--color-gris-claro);
	border-color: var(--color-borde);
}

.ap-cat__link:hover,
.ap-cat__link:focus-visible {
	border-color: var(--color-detalle);
}

.ap-cat__pattern {
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 12px);
}

.ap-cat__body {
	background: linear-gradient(180deg, transparent, rgba(244, 245, 246, 0.95) 42%);
}

.ap-cat__arrow {
	background: var(--color-fondo);
}

.ap-cat__link:hover .ap-cat__arrow {
	color: #fff;
}

/* Cajas de la ficha de producto y otras */
.ap-specs--single,
.ap-consult,
.ap-empty {
	background: var(--color-gris-claro);
}

/* "En stock": el verde claro original no se lee sobre blanco → verde oscuro */
.ap-theme .stock.in-stock,
.ap-consult__row dd.is-ok {
	color: #1a7f37;
}

/* =========================================================================
   6. Botones: ROJOS con letras blancas; al pasar el mouse, NEGROS con letras blancas
   ====================================================================== */

.ap-btn--primary,
.ap-btn--compact,
.ap-wa-float,
.ap-theme ul.products li.product .button,
.ap-theme ul.products li.product .added_to_cart {
	background: var(--color-detalle);
	border-color: var(--color-detalle);
	color: #fff;
}

/* El "relleno" que sube al pasar el mouse ahora es negro */
.ap-btn--primary::before,
.ap-btn--compact::before,
.ap-btn--ghost::before {
	background: #000;
}

.ap-btn--primary:hover,
.ap-btn--compact:hover,
.ap-btn--ghost:hover {
	border-color: #000;
	color: #fff;
}

.ap-wa-float:hover,
.ap-theme ul.products li.product .button:hover,
.ap-theme ul.products li.product .added_to_cart:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

/* Botón secundario (va al lado del rojo, ej. "Consultar por WhatsApp" del hero):
   blanco con borde y letras rojas, para que no queden dos botones rojos iguales.
   Al pasar el mouse: negro con letras blancas, como los demás. */
.ap-btn--ghost {
	background: var(--color-fondo);
	border-color: var(--color-detalle);
	color: var(--color-detalle);
}

/* Lupa del buscador */
.ap-search__submit {
	background: var(--color-detalle);
	color: #fff;
}

.ap-search__submit:hover {
	background: #000;
	color: #fff;
}

/* =========================================================================
   7. Logo de Milwaukee: rojo original (sin filtros)
   ====================================================================== */

.ap-partner-logo__img {
	filter: none;
}

/* =========================================================================
   8. Header ROJO con logo, menú y letras BLANCAS (prueba del 2026-10-01)
      La barra superior sigue NEGRA (sección 2).
      Para volver al header blanco, borra esta sección completa.
   ====================================================================== */

/* Rojo sólido arriba y al bajar (semitransparente se vería rosado sobre el contenido) */
.ap-header,
.ap-header.is-stuck {
	background: var(--color-detalle);
	border-bottom-color: transparent;  /* el borde rojo → blanco ya marca la separación */
	--ap-red: #fff;                    /* dentro del header, los "detalles" pasan a blanco */
}

/* Logo AP: se quita el molde rojo y se muestra la imagen original, que ya es blanca */
.ap-header .ap-brand__logo {
	background: none;
	-webkit-mask: none;
	mask: none;
}

.ap-header .ap-brand__logo-img {
	opacity: 1;
}

/* Menú: letras blancas; la rayita que aparece al pasar el mouse, también blanca */
.ap-nav__list a,
.ap-nav__list a:hover,
.ap-nav__list .current-menu-item > a,
.ap-nav__list .current_page_item > a {
	color: #fff;
}

/* Botón "VER CATÁLOGO": negro con letras blancas; al pasar el mouse, blanco con letras negras */
.ap-header .ap-header__cta {
	background: #000;
	border-color: #000;
	color: #fff;
}

.ap-header .ap-header__cta::before {
	background: #fff;
}

.ap-header .ap-header__cta:hover {
	border-color: #fff;
	color: #000;
}

/* Botón de menú del celular (las tres rayas): blanco */
.ap-burger {
	border-color: rgba(255, 255, 255, 0.55);
}

.ap-burger__line {
	background: #fff;
}

/* Contorno al navegar con teclado dentro del header: blanco (rojo sobre rojo no se vería) */
.ap-header :focus-visible {
	outline-color: #fff;
}

/* Barrita de progreso de lectura (arriba de todo): blanca, para que se vea sobre el header rojo */
.ap-progress__bar {
	background: #fff;
}

/* =========================================================================
   9. Enlace "Saltar al contenido" (arreglo del 2026-10-02)
      El tema lo escondía solo corriéndolo hacia arriba y lo mostraba con
      CUALQUIER foco (clics, volver/recargar). Ahora está escondido de verdad
      y solo aparece al llegar con la tecla Tab.
   ====================================================================== */

.ap-skip-link:not(:focus-visible) {
	top: -100px;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
}

.ap-skip-link:focus-visible {
	top: 16px;
	opacity: 1;
}

/* =========================================================================
   10. Header al hacer scroll (arreglo del 2026-10-02)
      Antes la barra negra se borraba de golpe y el header se achicaba: la
      página saltaba y temblaba. Ahora la barra negra se va con el scroll, el
      header rojo mantiene su altura y aparece una sombra suave al bajar.
      La altura de la barra la mide un mini script de ap-colores.php
      (--ap-topbar-h); si no corre, se usa 35 px.
   ====================================================================== */

/* 1. El header se pega dejando afuera la barra negra */
.ap-header {
	top: calc(-1 * var(--ap-topbar-h, 35px));
	transition: box-shadow 300ms ease;
}

.ap-header.is-stuck .ap-topbar {
	display: block;                 /* el tema la borraba: ya no */
	opacity: 0;
}

.ap-topbar {
	transition: opacity 300ms ease;
}

/* 2. Misma altura arriba y al bajar (el achique era lo que hacía saltar la página) */
.ap-header.is-stuck .ap-header__inner {
	min-height: 72px;
}

.ap-header.is-stuck .ap-brand__logo-img {
	max-height: 56px;
}

/* 3. Sombra difuminada debajo del header al bajar */
.ap-header.is-stuck {
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
}

/* La barra de filtros del catálogo se pega debajo del header (que ahora mide 72 px) */
@media (min-width: 1024px) {
	.apf {
		top: 96px;
		max-height: calc(100vh - 116px);
	}
}