/**
 * Rockbros — Home (front page) — Fase 5 migración Elementor 8807
 *
 * CSS de la portada. Se enqueua SOLO en is_front_page() desde functions.php
 * (no se embebe en post_content para no inflar el HTML de la home, que es
 * justo la métrica que el proyecto busca reducir <150KB).
 *
 * Todo scopeado bajo .rb-home. Consume los tokens de global.css
 * (--rb-black/white/yellow/sale) y la fuente Poppins ya enqueuada.
 *
 * Secciones:
 *   1. Layout base + headings de sección
 *   2. Hero (banner de campaña)
 *   3. Barra USP (confianza)
 *   4. Categorías (grid de tarjetas)
 *   5. Grids de productos (WooCommerce [products])
 *   6. Promo banner
 *   7. Testimonios (reusa .rockbros-reviews del single-product)
 *   8. FAQ (<details>)
 *   9. Blog (Query Loop)
 *  10. Newsletter band
 *  11. Acerca de (texto SEO)
 *  12. Responsive
 */

/* ==========================================================================
   1. Layout base + headings de sección
   ========================================================================== */
.rb-home {
	font-family: "Poppins", sans-serif;
	color: var(--rb-black);
	overflow-x: clip;
}

/* Ocultar la imagen destacada que Astra imprime arriba del contenido en la
   portada (rockbros-lince.jpg). Se conserva como _thumbnail_id para OG/schema,
   solo se oculta su display. Seguro: home.css solo se enqueua en is_front_page(). */
.ast-single-post-featured-section { display: none !important; }

/* Las secciones "constrained" del wrapper Gutenberg ya se centran al
   contentSize. Damos respiración vertical uniforme. */
.rb-home > .wp-block-group__inner-container > *,
.rb-home > * {
	margin-top: 0;
	margin-bottom: 0;
}

.rb-section {
	padding: 56px 20px;
}

.rb-sec-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px auto;
}

.rb-sec-head h2 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
	margin: 0;
	color: var(--rb-black);
}

.rb-sec-head p {
	font-size: 16px;
	line-height: 1.55;
	color: #6b6b6b;
	margin: 10px 0 0 0;
}

/* Botón de marca reutilizable (CTA píldora negra, coherente con D10). */
.rb-btn {
	display: inline-block;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	padding: 16px 34px;
	border-radius: 60px;
	background: var(--rb-black);
	color: var(--rb-white);
	border: 1px solid var(--rb-black);
	transition: background .2s, color .2s;
	cursor: pointer;
}
.rb-btn:hover,
.rb-btn:focus { background: #2d2d2d; color: var(--rb-white); }

.rb-btn--yellow { background: var(--rb-yellow); color: var(--rb-black); border-color: var(--rb-yellow); }
.rb-btn--yellow:hover, .rb-btn--yellow:focus { background: #d8af0f; color: var(--rb-black); }

.rb-btn--outline { background: transparent; color: var(--rb-black); }
.rb-btn--outline:hover, .rb-btn--outline:focus { background: var(--rb-black); color: var(--rb-white); }

/* ==========================================================================
   2. Hero — banner de campaña (full-bleed)
   ========================================================================== */
.rb-hero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 20px;
	background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .55)),
		url(/wp-content/uploads/2026/01/Venta-flash.webp);
	background-size: cover;
	background-position: center;
}

.rb-hero__inner { max-width: 760px; }

.rb-hero__eyebrow {
	display: inline-block;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--rb-black);
	background: var(--rb-yellow);
	padding: 7px 16px;
	border-radius: 60px;
	margin: 0 0 18px 0;
}

.rb-hero h1 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 5.5vw, 56px);
	line-height: 1.06;
	color: var(--rb-white);
	margin: 0 0 16px 0;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.rb-hero p {
	font-size: clamp(15px, 2vw, 19px);
	line-height: 1.5;
	color: #f2f2f2;
	margin: 0 auto 28px auto;
	max-width: 560px;
}

.rb-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* outline del hero en blanco (sobre fondo oscuro) */
.rb-hero .rb-btn--outline { color: var(--rb-white); border-color: var(--rb-white); }
.rb-hero .rb-btn--outline:hover,
.rb-hero .rb-btn--outline:focus { background: var(--rb-white); color: var(--rb-black); }

/* ==========================================================================
   3. Barra USP — confianza (full-bleed)
   ========================================================================== */
.rb-usp {
	background: #fafafa;
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	padding: 22px 20px;
}

.rb-usp__grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.rb-usp__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: left;
}

.rb-usp__item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex: 0 0 auto;
}

.rb-usp__item span {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--rb-black);
}

/* ==========================================================================
   4. Categorías — grid de tarjetas
   ========================================================================== */
.rb-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.rb-cat-card {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f0f0f0;
	text-decoration: none;
}

.rb-cat-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.rb-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, 0) 70%);
}

.rb-cat-card:hover img,
.rb-cat-card:focus img { transform: scale(1.06); }

.rb-cat-card__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--rb-white);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
	padding: 0 10px;
}

/* ==========================================================================
   5. Grids de productos — WooCommerce [products] shortcode
   ========================================================================== */
.rb-products { max-width: 1200px; margin: 0 auto; }

.rb-products .products {
	display: grid !important;
	/* minmax(0,1fr) en vez de 1fr: evita que el contenido (imagen 600px / título
	   largo) expanda su columna y desborde el grid. Columnas siempre iguales. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

.rb-products .products::before,
.rb-products .products::after { content: none !important; display: none !important; }

.rb-products ul.products li.product {
	width: auto !important;
	min-width: 0 !important;   /* permite que el item encoja bajo su min-content (anti-blowout del grid) */
	margin: 0 !important;
	float: none !important;
	text-align: center;
	clear: none !important;
}

/* Imagen del producto: llena la columna (ya iguales) manteniendo el cuadrado 600×600. */
.rb-products ul.products li.product a img,
.rb-products ul.products li.product img {
	width: 100%;
	height: auto;
	display: block;
}

.rb-products ul.products li.product .woocommerce-loop-product__title {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--rb-black);
	padding-top: 10px;
}

.rb-products ul.products li.product .price {
	font-family: "Poppins", sans-serif;
	color: var(--rb-black);
	font-size: 16px;
}
.rb-products ul.products li.product .price del { color: #999; font-weight: 400; font-size: 14px; }
.rb-products ul.products li.product .price ins { text-decoration: none; font-weight: 700; }

.rb-products ul.products li.product .button {
	border-radius: 60px;
	background: var(--rb-black);
	color: var(--rb-white);
}
.rb-products ul.products li.product .button:hover { background: #2d2d2d; }

/* ==========================================================================
   6. Promo banner (full-bleed)
   ========================================================================== */
.rb-promo {
	background: var(--rb-black);
	color: var(--rb-white);
	text-align: center;
	padding: 64px 20px;
}

.rb-promo__inner { max-width: 760px; margin: 0 auto; }

.rb-promo__eyebrow {
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rb-yellow);
	margin: 0 0 12px 0;
}

.rb-promo h2 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4.5vw, 48px);
	line-height: 1.08;
	color: var(--rb-white);
	margin: 0 0 28px 0;
}

/* ==========================================================================
   7. Testimonios — widget Trustindex (Google Reviews)
   El shortcode [trustindex no-registration=google] trae su propio markup/estilo.
   Acá solo centramos y limitamos el ancho del contenedor.
   ========================================================================== */
.rb-reviews-home { max-width: 1100px; margin: 0 auto; }

/* ==========================================================================
   8. FAQ — <details>/<summary> (D13, 0 JS)
   ========================================================================== */
.rb-home-faq { max-width: none; margin: 0 auto; }

.rb-home-faq details {
	border-bottom: 1px solid #e3e3e3;
}
.rb-home-faq details:first-of-type { border-top: 1px solid #e3e3e3; }

.rb-home-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 4px;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--rb-black);
}
.rb-home-faq summary::-webkit-details-marker { display: none; }

.rb-home-faq summary::before {
	content: "+";
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	color: var(--rb-black);
	width: 20px;
	text-align: center;
}
.rb-home-faq details[open] summary::before { content: "\2212"; } /* − */

.rb-home-faq__body {
	padding: 0 4px 18px 36px;
	font-size: 15px;
	line-height: 1.6;
	color: #4b4b4b;
}
.rb-home-faq__body p { margin: 0 0 10px 0; }
.rb-home-faq__body ul { margin: 0 0 10px 0; padding-left: 18px; }
.rb-home-faq__body li { margin: 0 0 4px 0; }

/* ==========================================================================
   9. Blog — Query Loop (3 últimas entradas)
   ========================================================================== */
.rb-blog { max-width: 1200px; margin: 0 auto; }

.rb-blog .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rb-blog li.wp-block-post {
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid #eee !important;
	border-radius: 12px;
	overflow: hidden;
	height: auto !important;
	align-self: start;
	background: var(--rb-white);
}

.rb-blog .wp-block-post-featured-image { margin: 0; }
.rb-blog .wp-block-post-featured-image a,
.rb-blog .wp-block-post-featured-image img {
	display: block;
	height: 200px;
	width: 100%;
	object-fit: cover;
}

.rb-blog .wp-block-post-title {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	margin: 14px 16px 8px 16px;
}
.rb-blog .wp-block-post-title a { color: var(--rb-black); text-decoration: none; }
.rb-blog .wp-block-post-title a:hover { text-decoration: underline; }

.rb-blog .wp-block-post-date {
	font-size: 13px;
	color: #8a8a8a;
	margin: 0 16px 16px 16px;
}

.rb-blog__more { text-align: center; margin-top: 36px; }

/* ==========================================================================
   10. Newsletter band (full-bleed)
   ========================================================================== */
.rb-newsletter {
	background: var(--rb-yellow);
	text-align: center;
	padding: 56px 20px;
}

.rb-newsletter__inner { max-width: 620px; margin: 0 auto; }

.rb-newsletter h2 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.2;
	color: var(--rb-black);
	margin: 0 0 8px 0;
}
.rb-newsletter p { font-size: 15px; color: #3a3a3a; margin: 0 0 22px 0; }

/* el form [sibwp_form] varía; le damos un layout decente */
.rb-newsletter form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rb-newsletter input[type="email"],
.rb-newsletter input[type="text"] {
	flex: 1 1 260px;
	max-width: 340px;
	padding: 13px 18px;
	border: 1px solid var(--rb-black);
	border-radius: 60px;
	font-size: 15px;
	background: var(--rb-white);
}
.rb-newsletter input[type="submit"],
.rb-newsletter button[type="submit"] {
	padding: 13px 30px;
	border: 1px solid var(--rb-black);
	border-radius: 60px;
	background: var(--rb-black);
	color: var(--rb-white);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.rb-newsletter input[type="submit"]:hover,
.rb-newsletter button[type="submit"]:hover { background: #2d2d2d; }

/* ==========================================================================
   11. Acerca de — texto SEO
   ========================================================================== */
.rb-about { max-width: 820px; margin: 0 auto; text-align: center; }
.rb-about h2 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 3vw, 30px);
	margin: 0 0 16px 0;
	color: var(--rb-black);
}
.rb-about p {
	font-size: 15px;
	line-height: 1.7;
	color: #5a5a5a;
	margin: 0 0 14px 0;
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.rb-cats__grid { grid-template-columns: repeat(3, 1fr); }
	.rb-products .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.rb-blog .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
	.rb-usp__grid { grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
}

@media (max-width: 767px) {
	.rb-section { padding: 44px 12px; }
	.rb-hero { min-height: 380px; padding: 60px 18px; }
	.rb-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.rb-products .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
	/* Recuperar ancho para las tarjetas: .rb-products es un group anidado dentro de
	   .rb-section y AMBOS aplicaban ~20px de padding lateral (doble gutter redundante).
	   Además el column-gap real lo forzaba Astra a 20px. Quitar el padding interno,
	   dejar un solo gutter chico en la sección y achicar el gap → tarjetas más anchas. */
	.rb-products { padding-left: 0 !important; padding-right: 0 !important; }
	.rb-section { padding-left: 12px !important; padding-right: 12px !important; }
	.rb-products .products,
	.rb-products ul.products { column-gap: 8px !important; }
	/* Astra mete .ast-article-single con padding 1.5em 2.14em a cada producto;
	   en columnas angostas de móvil eso achica la imagen. Anularlo → imagen
	   full-bleed que llena la tarjeta; el texto recibe su propio padding. */
	.rb-products ul.products li.product { padding: 0 0 14px !important; }
	/* El texto ya tiene el padding de .astra-shop-summary-wrap (1.2em). En columnas
	   angostas de móvil ese padding (+ mi padding viejo) achicaba el área de texto y
	   rompía palabras largas ("Pasamontañas"). Reducir el padding del wrapper y bajar
	   un poco la fuente → el título usa más ancho y se lee completo, sin cortes. */
	.rb-products ul.products li.product .astra-shop-summary-wrap { padding-left: 6px !important; padding-right: 6px !important; }
	.rb-products ul.products li.product .woocommerce-loop-product__title { font-size: 14.5px; line-height: 1.35; overflow-wrap: break-word; word-break: normal; hyphens: none; }
	.rb-products ul.products li.product .price { font-size: 17px; }
	.rb-blog .wp-block-post-template { grid-template-columns: 1fr !important; }
	.rb-usp__item { flex-direction: column; text-align: center; gap: 6px; }
	.rb-usp__item span { font-size: 12.5px; }
}