/**
 * Rockbros Footer — REDISEÑO 2026 (estilo ROCKBROS USA)
 * ============================================================================
 * Override de footer.css. Se enqueua DESPUÉS de footer.css y SOLO con ?rediseno=1
 * (sandbox reversible, mismo patrón que single-product-redesign.css). El footer
 * en vivo no se toca: este archivo solo repinta sobre el markup existente
 * (.rb-footer en inc/footer.php). NO cambia estructura ni contenido.
 *
 * Decisiones del design system (rediseno_web/design-system.md):
 *   D1 · Esquinas RECTAS (radio 0) — adiós border-radius 4px de los social.
 *   D2 · MONOCROMO PURO — el hover amarillo de los links se elimina; pasa a blanco.
 *   D3 · Editorial con aire — headings tipo "eyebrow" (uppercase, letter-spacing).
 *   D4 · Barlow en vez de Poppins, peso base 400 (no 300 light).
 *
 * Tokens: usa los 4 ya declarados en global.css (--rb-black/white). El resto va
 * literal porque tokens.css aún no se migró a global.css (entregable #4 pendiente).
 * ============================================================================ */

/* ---- Base: Barlow + monocromo (negro de marca #1A1A1A, no #000 puro) ------ */
.rb-footer {
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;                 /* el sistema no usa 300 light */
	background: var(--rb-black);       /* #1A1A1A en vez de #000 */
}

/* ---- Divisores entre secciones: gris neutro, no se toca el grosor --------- */
.rb-footer__section--copyright {
	border-top-color: rgba(255, 255, 255, 0.12);
}

/* ---- Sección Categorías: ocultada en el rediseño -------------------------- */
/* El menú desplegable del header ya enlaza todas las categorías en cada página,
   así que este bloque de 23 links es redundante a nivel SEO (Google descuenta
   los enlaces repetidos de footer). Quitarlo deja el footer más limpio/aireado
   (D3), más cercano al de ROCKBROS USA. Es solo display:none en el preview: el
   markup sigue en footer.php — al portar a prod se decide si se borra de verdad. */
.rb-footer__section--cats {
	display: none;
}

/* ==========================================================================
   Headings de columna → estilo "eyebrow" USA: uppercase, chico, letter-spacing
   (antes: 18px / 500 / Title Case con Poppins)
   ========================================================================== */
.rb-footer__heading {
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rb-white);
	margin-bottom: 18px;
}

/* El heading "Categorías" ocupa toda la fila; mantiene su tratamiento */
.rb-footer__heading--cats {
	margin-bottom: 4px;
}

/* ==========================================================================
   Links → gris claro, hover BLANCO (no amarillo · D2), sin subrayado
   (antes: hover --rb-yellow + underline)
   ========================================================================== */
.rb-footer__links a {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.62);
	transition: color 0.2s ease;
}

.rb-footer__links a:hover,
.rb-footer__links a:focus-visible {
	color: var(--rb-white);
	text-decoration: none;
}

/* ==========================================================================
   Social → cuadrados RECTOS (D1), hover invierte a blanco/negro (monocromo)
   (antes: border-radius 4px, hover = aclarar el mismo gris)
   ========================================================================== */
.rb-footer__social a {
	border-radius: 0;
	background: rgba(255, 255, 255, 0.10);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rb-footer__social a:hover,
.rb-footer__social a:focus-visible {
	background: var(--rb-white);
	color: var(--rb-black);            /* el SVG usa fill: currentColor → se vuelve negro */
	transform: translateY(-1px);
}

/* ==========================================================================
   Texto auxiliar (tagline, contacto, copyright) → mismo gris del sistema
   ========================================================================== */
.rb-footer__tagline,
.rb-footer__copyright {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.62);
}

.rb-footer__contacto-text p {
	color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   Libro de reclamaciones → imagen legal OBLIGATORIA (marca INDECOPI, apaisada
   ~100:82). footer.css la forzaba a aspect-ratio 1/1 → se deformaba estirada.
   Fix: (1) restaurar su proporción real (sin deformación) y (2) montarla en un
   "tile" blanco con padding, para que la imagen a color (azul/blanco) se lea
   como un badge limpio y deliberado sobre el footer oscuro, en vez de un
   recorte pegado. Esquinas rectas por D1.
   ========================================================================== */
.rb-footer__libro {
	display: inline-block;
	background: var(--rb-white);
	padding: 10px;
	line-height: 0;
}

.rb-footer__libro img {
	width: 120px;
	height: auto;
	aspect-ratio: 100 / 82;   /* ratio real de la imagen → sin estiramiento */
	border-radius: 0;
}

/* ==========================================================================
   Franja de confianza "Google 4.9" — full-width, fondo CLARO, ARRIBA del footer
   negro (sección .rb-trust en footer.php, hookeada a astra_footer prio 5, gateada).
   Reemplaza el carrusel de capturas .webp de la ficha por prueba social agregada,
   site-wide. Las estrellas van en DORADO Google (excepción a D2, igual que el logo
   multicolor: es marca de un tercero, lee como rating auténtico de Google).
   ========================================================================== */
.rb-trust {
	background: #f7f7f7;
	border-top: 1px solid #ececec;
	padding: 22px 20px;
}
.rb-trust__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rb-black);
	text-decoration: none;
	line-height: 1;
}
.rb-trust__g { flex: 0 0 auto; display: block; }
.rb-trust__rating { font-size: 22px; font-weight: 700; color: var(--rb-black); }
.rb-trust__stars { font-size: 18px; letter-spacing: 2px; color: #fbbc04; }
.rb-trust__text { font-size: 15px; color: #6b6b6b; }
.rb-trust__text strong { color: var(--rb-black); font-weight: 600; }
.rb-trust__cta {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rb-black);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.rb-trust__inner:hover .rb-trust__cta,
.rb-trust__inner:focus-visible .rb-trust__cta { border-bottom-color: var(--rb-black); }

@media (max-width: 600px) {
	.rb-trust { padding: 18px 16px; }
	.rb-trust__inner { gap: 8px 10px; }
	.rb-trust__text { flex-basis: 100%; text-align: center; order: 5; }
}