/* ==========================================================================
   Reyes del Cerdo — hoja de estilos del tema
   --------------------------------------------------------------------------
   Orden de las secciones:
     1. Tokens de diseño
     2. Base y tipografía
     3. Utilidades de layout
     4. Botones y formularios
     5. Cabecera, navegación y paneles laterales
     6. Portada (hero y secciones)
     7. Cards de producto y catálogo
     8. WooCommerce (ficha, carrito, checkout, cuenta)
     9. Contenido editorial y páginas internas
    10. Pie y WhatsApp flotante
   ========================================================================== */

/* ==========================================================================
   1. Tokens de diseño
   ========================================================================== */

:root {
	/* Superficies: del fondo de página a la card más elevada. */
	--rdc-fondo: #0e0e11;
	--rdc-fondo-alt: #131318;
	--rdc-superficie: #17171c;
	--rdc-superficie-2: #1e1e25;
	--rdc-superficie-3: #26262f;
	--rdc-linea: rgba(255, 255, 255, 0.09);
	--rdc-linea-fuerte: rgba(255, 255, 255, 0.16);

	/* Texto. El "muted" está calculado para superar 4.5:1 sobre --rdc-fondo. */
	--rdc-texto: #f2efea;
	--rdc-texto-suave: #a6a6b2;
	--rdc-texto-tenue: #74747f;

	/* Marca. El rojo de acción es más oscuro que el rojo de marca para que
	   el texto blanco encima llegue a 5.4:1 de contraste (AA). */
	--rdc-rojo: #c9302a;
	--rdc-rojo-hover: #a82520;
	--rdc-rojo-claro: #f0655a;
	--rdc-crema: #f3e7d7;
	--rdc-dorado: #d9a441;
	--rdc-verde: #25d366;

	/* Radios y sombras. */
	--rdc-radio: 6px;
	--rdc-radio-lg: 14px;
	--rdc-sombra: 0 4px 24px rgba(0, 0, 0, 0.4);
	--rdc-sombra-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

	/* Tipografías. */
	--rdc-display: "Anton", "Arial Black", Impact, sans-serif;
	--rdc-cuerpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Medidas. */
	--rdc-ancho: 1280px;
	--rdc-ancho-texto: 760px;
	--rdc-gutter: 24px;
	/* 96 y no 76: el logotipo es un escudo alto (62 px) y con la cabecera
	   justa quedaba pegado arriba y abajo. Esta variable la usan también el
	   scroll-padding de los anclajes y la barra lateral pegajosa del catálogo,
	   así que todo se reacomoda solo. */
	--rdc-header-h: 96px;

	--rdc-transicion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 782px) {
	:root {
		--rdc-gutter: 18px;
		--rdc-header-h: 78px;
	}
}

/* ==========================================================================
   2. Base y tipografía
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Compensa la cabecera fija al saltar a un ancla. */
	scroll-padding-top: calc(var(--rdc-header-h) + 24px);
	-webkit-text-size-adjust: 100%;
	/* Red de seguridad: algunas tiras internas (píldoras de categoría, tablas)
	   se desbordan a propósito para poder scrollear horizontalmente puertas
	   adentro. Sin esto, ese desborde estira también la página completa. */
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--rdc-fondo);
	color: var(--rdc-texto);
	font-family: var(--rdc-cuerpo);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--rdc-transicion);
}

a:hover {
	color: var(--rdc-rojo-claro);
}

h1, h2, h3, h4 {
	font-family: var(--rdc-display);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }

p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

strong, b { font-weight: 700; }

hr {
	border: 0;
	border-top: 1px solid var(--rdc-linea);
	margin: 2.5rem 0;
}

::selection {
	background: var(--rdc-rojo);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--rdc-rojo-claro);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Barra de scroll oscura para que no rompa el conjunto en Windows. */
* {
	scrollbar-color: var(--rdc-superficie-3) var(--rdc-fondo);
	scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. Utilidades de layout
   ========================================================================== */

.rdc-sitio {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.rdc-main { flex: 1 0 auto; }

.rdc-contenedor {
	width: 100%;
	max-width: var(--rdc-ancho);
	margin: 0 auto;
	padding: 0 var(--rdc-gutter);
}

/* padding-block (no "padding: X 0"): varias plantillas combinan esta clase
   con .rdc-contenedor en el mismo elemento, y con el shorthand "0" de lados
   pisaba el padding horizontal del gutter (misma especificidad, esta regla
   va después en el archivo) dejando el contenido pegado al borde en mobile. */
.rdc-seccion {
	padding-block: clamp(56px, 8vw, 104px);
}

.rdc-seccion--alt { background: var(--rdc-fondo-alt); }

.rdc-seccion--compacta { padding-block: clamp(36px, 5vw, 64px); }

/* Encabezado de sección: epígrafe rojo + título display + enlace a la derecha. */
.rdc-seccion__cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.rdc-epigrafe {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--rdc-cuerpo);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rdc-rojo-claro);
	margin: 0 0 12px;
}

.rdc-epigrafe::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--rdc-rojo);
}

.rdc-seccion__titulo { margin: 0; }

.rdc-seccion__bajada {
	color: var(--rdc-texto-suave);
	max-width: 56ch;
	margin: 14px 0 0;
}

.rdc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rdc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--rdc-rojo);
	color: #fff;
	padding: 12px 20px;
	font-weight: 600;
}

.rdc-skip:focus {
	left: 12px;
	top: 12px;
	color: #fff;
}

.rdc-icono { flex: none; }

/* ==========================================================================
   4. Botones y formularios
   ========================================================================== */

.rdc-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--rdc-radio);
	background: var(--rdc-rojo);
	color: #fff;
	font-family: var(--rdc-cuerpo);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--rdc-transicion), border-color var(--rdc-transicion),
		color var(--rdc-transicion), transform var(--rdc-transicion);
}

.rdc-boton:hover {
	background: var(--rdc-rojo-hover);
	color: #fff;
	transform: translateY(-1px);
}

.rdc-boton:active { transform: translateY(0); }

.rdc-boton--fantasma {
	background: transparent;
	border-color: var(--rdc-linea-fuerte);
	color: var(--rdc-texto);
}

.rdc-boton--fantasma:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--rdc-texto);
	color: var(--rdc-texto);
}

.rdc-boton--claro {
	background: var(--rdc-crema);
	color: #16161a;
}

.rdc-boton--claro:hover {
	background: #fff;
	color: #16161a;
}

.rdc-boton--whatsapp { background: var(--rdc-verde); color: #06301a; }
.rdc-boton--whatsapp:hover { background: #1fb257; color: #06301a; }

.rdc-boton--bloque { width: 100%; }

.rdc-boton--chico { padding: 10px 18px; font-size: 0.75rem; }

.rdc-boton[disabled],
.rdc-boton.rdc-esta-cargando {
	opacity: 0.65;
	pointer-events: none;
}

/* Enlace con flecha, para "ver todos". */
.rdc-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rdc-texto);
	white-space: nowrap;
}

.rdc-enlace-flecha .rdc-icono { transition: transform var(--rdc-transicion); }
.rdc-enlace-flecha:hover .rdc-icono { transform: translateX(4px); }

/* Campos de formulario, incluidos los que generan WooCommerce y WPForms. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 13px 16px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
	color: var(--rdc-texto);
	font-family: var(--rdc-cuerpo);
	font-size: 0.95rem;
	line-height: 1.4;
	transition: border-color var(--rdc-transicion), background var(--rdc-transicion);
}

input::placeholder,
textarea::placeholder { color: var(--rdc-texto-tenue); }

input:focus,
select:focus,
textarea:focus {
	border-color: var(--rdc-rojo-claro);
	background: var(--rdc-superficie-3);
	outline: none;
}

textarea { min-height: 140px; resize: vertical; }

label { font-size: 0.85rem; font-weight: 600; }

select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--rdc-texto-suave) 50%),
		linear-gradient(135deg, var(--rdc-texto-suave) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

/* ==========================================================================
   5. Cabecera, navegación y paneles laterales
   ========================================================================== */

.rdc-anuncio {
	background: var(--rdc-rojo);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.rdc-anuncio__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 38px;
	text-align: center;
}

.rdc-anuncio__texto { color: #fff; }
.rdc-anuncio a.rdc-anuncio__texto { text-decoration: underline; text-underline-offset: 3px; }

.rdc-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(14, 14, 17, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rdc-linea);
	transition: box-shadow var(--rdc-transicion);
}

.rdc-header.rdc-esta-fijo { box-shadow: var(--rdc-sombra); }

.rdc-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--rdc-header-h);
}

.rdc-header__marca { flex: none; margin-right: 8px; }

/* El escudo tiene bastante detalle (cintas, medallón, tipografía), así que
   necesita más alto que un logotipo plano para leerse. */
.rdc-header__marca img,
.custom-logo {
	max-height: 62px;
	width: auto;
}

.rdc-logotipo {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.rdc-logotipo__corona {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--rdc-rojo-claro);
}

.rdc-logotipo__nombre {
	font-family: var(--rdc-display);
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--rdc-texto);
}

.rdc-header__hamburguesa {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--rdc-texto);
	cursor: pointer;
}

/* --- Menú principal --- */

.rdc-nav { flex: 1 1 auto; min-width: 0; }

.rdc-nav__lista {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rdc-nav__item { position: relative; }

.rdc-nav__link {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rdc-texto);
	white-space: nowrap;
	border-radius: var(--rdc-radio);
	transition: background var(--rdc-transicion), color var(--rdc-transicion);
}

.rdc-nav__link:hover { background: rgba(255, 255, 255, 0.07); color: var(--rdc-texto); }

.rdc-nav__item--activo > .rdc-nav__link { color: var(--rdc-rojo-claro); }

/* Subrayado animado del ítem activo. */
.rdc-nav__item--nivel-0 > .rdc-nav__link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	background: var(--rdc-rojo);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--rdc-transicion);
}

.rdc-nav__item--activo.rdc-nav__item--nivel-0 > .rdc-nav__link::after { transform: scaleX(1); }

.rdc-nav__toggle {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 8px;
}

/* Chevron del desplegable en escritorio. */
.rdc-nav__item--con-hijos.rdc-nav__item--nivel-0 > .rdc-nav__link::before {
	content: "";
	order: 2;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.6;
	transition: transform var(--rdc-transicion);
}

.rdc-nav__item--con-hijos.rdc-nav__item--nivel-0:hover > .rdc-nav__link::before {
	transform: translateY(1px) rotate(45deg);
}

.rdc-nav__submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 95;
	min-width: 250px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	box-shadow: var(--rdc-sombra-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--rdc-transicion), transform var(--rdc-transicion), visibility var(--rdc-transicion);
}

/* Puente invisible para que el submenú no se cierre al mover el mouse. */
.rdc-nav__item--con-hijos::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}

.rdc-nav__item--con-hijos:hover > .rdc-nav__submenu,
.rdc-nav__item--con-hijos:focus-within > .rdc-nav__submenu,
.rdc-nav__item--abierto > .rdc-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rdc-nav__submenu .rdc-nav__link {
	padding: 11px 14px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: var(--rdc-texto-suave);
}

.rdc-nav__submenu .rdc-nav__link:hover {
	background: var(--rdc-superficie-2);
	color: var(--rdc-texto);
}

/* --- Acciones (buscar, cuenta, carrito) --- */

.rdc-header__acciones {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
	margin-left: auto;
}

.rdc-header__accion {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--rdc-radio);
	color: var(--rdc-texto);
	cursor: pointer;
	transition: background var(--rdc-transicion), color var(--rdc-transicion);
}

.rdc-header__accion:hover { background: rgba(255, 255, 255, 0.07); color: var(--rdc-rojo-claro); }

.rdc-header__contador {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: var(--rdc-rojo);
	border-radius: 999px;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

/* --- Buscador desplegable del header --- */

.rdc-buscador {
	border-top: 1px solid var(--rdc-linea);
	background: var(--rdc-superficie);
	padding: 18px 0;
	position: relative;
	z-index: 96;
}

.rdc-buscador[hidden] { display: none; }

.rdc-buscador__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.rdc-buscador__inner .rdc-sug { flex: 1 1 auto; }

.rdc-buscador__cerrar {
	flex: none;
	background: none;
	border: 0;
	color: var(--rdc-texto-suave);
	cursor: pointer;
	padding: 8px;
	margin-top: 2px;
}

.rdc-buscador__cerrar:hover { color: var(--rdc-texto); }

/* --- Componente de sugerencias (header y páginas de precios) --- */

.rdc-sug { position: relative; }

.rdc-sug__form {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rdc-sug__form > .rdc-icono { flex: none; color: var(--rdc-texto-tenue); }

.rdc-sug__input {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rdc-linea);
	border-radius: 0;
	font-size: 1.05rem;
	padding: 10px 0;
}

.rdc-sug__input:focus { background: transparent; border-color: var(--rdc-rojo-claro); }
.rdc-sug__input::-webkit-search-cancel-button { display: none; }

.rdc-sug__limpiar {
	flex: none;
	background: none;
	border: 0;
	color: var(--rdc-texto-tenue);
	cursor: pointer;
	padding: 6px;
}

.rdc-sug__limpiar:hover { color: var(--rdc-texto); }
.rdc-sug__limpiar[hidden] { display: none; }

/* Panel de resultados: flotante en el header, en línea en las páginas donde
   el buscador ya vive dentro de una tarjeta (listas de precios). */
.rdc-sug__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: min(60vh, 480px);
	overflow-y: auto;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	box-shadow: var(--rdc-sombra-lg);
}

.rdc-sug__panel[hidden] { display: none; }

.rdc-sug__lista { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }

.rdc-sug__item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--rdc-radio);
	transition: background var(--rdc-transicion);
}

.rdc-sug__item:hover,
.rdc-sug__item.rdc-esta-activo { background: var(--rdc-superficie-3); }

.rdc-sug__img {
	width: 48px;
	height: 48px;
	border-radius: var(--rdc-radio);
	object-fit: cover;
	background: var(--rdc-superficie);
}

.rdc-sug__img--vacia { display: block; }

.rdc-sug__info { min-width: 0; display: grid; gap: 2px; }

.rdc-sug__nombre {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--rdc-texto);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rdc-sug__categoria { font-size: 0.74rem; color: var(--rdc-texto-tenue); }

.rdc-sug__precio {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--rdc-texto-suave);
	white-space: nowrap;
}

.rdc-sug__todos {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid var(--rdc-linea);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--rdc-rojo-claro);
}

.rdc-sug__todos:hover { color: var(--rdc-rojo-claro); background: var(--rdc-superficie-3); }

.rdc-sug__vacio {
	padding: 20px 16px;
	margin: 0;
	color: var(--rdc-texto-tenue);
	font-size: 0.88rem;
	text-align: center;
}

/* --- Paneles laterales (menú móvil y carrito) --- */

.rdc-velo {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--rdc-transicion);
}

.rdc-velo[hidden] { display: none; }
.rdc-velo.rdc-esta-visible { opacity: 1; }

.rdc-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	width: min(400px, 88vw);
	background: var(--rdc-superficie);
	border-left: 1px solid var(--rdc-linea);
	box-shadow: var(--rdc-sombra-lg);
	transition: transform var(--rdc-transicion);
}

.rdc-panel[hidden] { display: none; }

.rdc-panel--carrito { right: 0; transform: translateX(100%); }
.rdc-panel--menu { left: 0; border-left: 0; border-right: 1px solid var(--rdc-linea); transform: translateX(-100%); }

.rdc-panel.rdc-esta-visible { transform: translateX(0); }

.rdc-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--rdc-linea);
	flex: none;
}

.rdc-panel__titulo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--rdc-display);
	font-size: 1.25rem;
	text-transform: uppercase;
}

.rdc-panel__contador {
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	background: var(--rdc-rojo);
	border-radius: 999px;
	color: #fff;
	font-family: var(--rdc-cuerpo);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

.rdc-panel__cerrar {
	background: none;
	border: 0;
	color: var(--rdc-texto-suave);
	cursor: pointer;
	padding: 6px;
}

.rdc-panel__cerrar:hover { color: var(--rdc-texto); }

.rdc-panel__cuerpo {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 24px;
}

.rdc-panel__pie {
	flex: none;
	padding: 20px 24px;
	border-top: 1px solid var(--rdc-linea);
	display: grid;
	gap: 14px;
}

.rdc-panel__contacto {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--rdc-texto-suave);
}

/* Menú dentro del panel móvil: apilado y con submenús plegables. */
.rdc-nav--movil {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 14px;
}

.rdc-nav--movil .rdc-nav__lista {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.rdc-nav--movil .rdc-nav__item { display: flex; flex-wrap: wrap; align-items: center; }

.rdc-nav--movil .rdc-nav__link {
	flex: 1 1 auto;
	padding: 14px 12px;
	font-size: 0.9rem;
}

.rdc-nav--movil .rdc-nav__item--con-hijos > .rdc-nav__link::before { content: none; }

/* En el panel apilado el subrayado del ítem activo ocupa todo el ancho y se
   lee como un separador; alcanza con el color rojo del texto. */
.rdc-nav--movil .rdc-nav__link::after { content: none; }

.rdc-nav--movil .rdc-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--rdc-texto-suave);
	transition: transform var(--rdc-transicion);
}

.rdc-nav--movil .rdc-nav__item--abierto > .rdc-nav__toggle { transform: rotate(180deg); }

.rdc-nav--movil .rdc-nav__submenu {
	position: static;
	flex: 1 0 100%;
	min-width: 0;
	margin: 0 0 6px 12px;
	padding: 0 0 0 12px;
	background: none;
	border: 0;
	border-left: 1px solid var(--rdc-linea);
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: none;
}

.rdc-nav--movil .rdc-nav__item--abierto > .rdc-nav__submenu { display: block; }

.rdc-nav--movil .rdc-nav__submenu .rdc-nav__link { padding: 11px 12px; }

/* ==========================================================================
   6. Portada
   ========================================================================== */

.rdc-hero {
	position: relative;
	display: flex;
	/* Centrado vertical con relleno simétrico: con align-items:flex-end y un
	   padding superior mayor que el inferior, el bloque de texto quedaba
	   pegado al borde de abajo. */
	align-items: center;
	min-height: min(88vh, 820px);
	padding: clamp(64px, 10vh, 120px) 0;
	overflow: hidden;
	background: #0a0a0c;
}

/* Sin foto cargada el hero no puede quedar como un rectángulo negro vacío:
   se arma un fondo con brillo rojo y franjas diagonales para que se lea como
   una decisión de diseño hasta que el cliente suba su imagen. */
.rdc-hero--sin-imagen {
	min-height: min(72vh, 680px);
	background:
		repeating-linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.016) 0 2px,
			transparent 2px 9px
		),
		radial-gradient(120% 90% at 78% 15%, rgba(201, 48, 42, 0.42), transparent 60%),
		radial-gradient(80% 70% at 8% 95%, rgba(217, 164, 65, 0.12), transparent 65%),
		linear-gradient(165deg, #1a1013, #0b0b0e 65%);
}

.rdc-hero--sin-imagen .rdc-hero__velo { background: none; }

.rdc-hero__fondo {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0.55;
	/* Un pelín de escala para que el degradado no muestre bordes. */
	transform: scale(1.02);
}

/* Dos velos superpuestos: uno vertical que funde el hero con el fondo de la
   página y otro horizontal que le da cama oscura al titular. El horizontal
   llega hasta el 75 % porque el título display ocupa más de media pantalla y
   sobre las zonas claras de la foto el rojo del acento perdía nitidez. */
.rdc-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--rdc-fondo) 2%, rgba(14, 14, 17, 0.35) 45%, rgba(14, 14, 17, 0.75) 100%),
		linear-gradient(
			to right,
			rgba(10, 10, 12, 0.92) 0%,
			rgba(10, 10, 12, 0.6) 45%,
			rgba(10, 10, 12, 0.2) 75%,
			transparent 100%
		);
}

.rdc-hero__inner { position: relative; z-index: 2; }

/* Ancho en píxeles, no en ch: la unidad ch se calcula sobre el tamaño de
   fuente del contenedor (16px), y dejaba el título display de ~100px
   partiéndose cada dos palabras. */
.rdc-hero__contenido { max-width: min(760px, 100%); }

.rdc-hero__titulo {
	font-size: clamp(3rem, 9vw, 6.6rem);
	line-height: 0.9;
	margin: 0 0 20px;
	text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5);
}

.rdc-hero__titulo em {
	font-style: normal;
	color: var(--rdc-rojo-claro);
}

.rdc-hero__texto {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	color: #e2ded8;
	max-width: 46ch;
	margin-bottom: 32px;
}

.rdc-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Franja de garantías debajo del hero. */
.rdc-tiras {
	background: var(--rdc-superficie);
	border-block: 1px solid var(--rdc-linea);
}

.rdc-tiras__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--rdc-linea);
}

.rdc-tira {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px 22px;
	background: var(--rdc-superficie);
}

.rdc-tira__icono {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: rgba(201, 48, 42, 0.14);
	color: var(--rdc-rojo-claro);
}

.rdc-tira__titulo {
	font-family: var(--rdc-cuerpo);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 2px;
}

.rdc-tira__texto {
	font-size: 0.82rem;
	color: var(--rdc-texto-suave);
	margin: 0;
	line-height: 1.4;
}

/* --- Grilla de categorías --- */

.rdc-categorias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.rdc-categoria {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 300px;
	padding: 24px;
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	background: var(--rdc-superficie-2);
	isolation: isolate;
}

.rdc-categoria__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rdc-categoria::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(6, 6, 8, 0.95) 8%, rgba(6, 6, 8, 0.25) 60%, rgba(6, 6, 8, 0.1) 100%);
	transition: background var(--rdc-transicion);
}

.rdc-categoria:hover .rdc-categoria__img { transform: scale(1.06); }
.rdc-categoria:hover::after { background: linear-gradient(to top, rgba(120, 20, 16, 0.9) 5%, rgba(6, 6, 8, 0.3) 65%); }

.rdc-categoria__nombre {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	margin: 0 0 4px;
	color: #fff;
}

.rdc-categoria__cantidad {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

/* En escritorio la grilla se arma como un bloque de 4×2: la categoría
   principal ocupa un cuadrante 2×2 a la izquierda y las otras cuatro se
   acomodan a su derecha. `dense` rellena los huecos si hay menos de cinco. */
@media (min-width: 900px) {
	.rdc-categorias {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 232px;
		grid-auto-flow: dense;
	}

	.rdc-categorias > .rdc-categoria { min-height: 0; }

	.rdc-categorias > .rdc-categoria:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* --- Carrusel horizontal (ofertas y destacados) --- */

.rdc-carrusel { position: relative; }

/* El carrusel envuelve la salida del shortcode [products] de WooCommerce, así
   que la pista puede ser el <ul class="products"> que genera el plugin. */
.rdc-carrusel__pista,
.rdc-carrusel ul.products {
	display: grid;
	/* Imprescindible: .rdc-productos define grid-template-columns para la
	   grilla del catálogo, y con columnas explícitas el auto-flow por columna
	   mete los primeros ítems ahí y deja el resto en columnas implícitas
	   diminutas. Se anulan para que mande grid-auto-columns. */
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	/* Oculta la barra nativa: la navegación va por los botones. */
	scrollbar-width: none;
}

.rdc-carrusel__pista::-webkit-scrollbar,
.rdc-carrusel ul.products::-webkit-scrollbar { display: none; }

.rdc-carrusel__pista > *,
.rdc-carrusel ul.products > * { scroll-snap-align: start; }

@media (min-width: 1100px) {
	/* Ancho fijo, NO minmax(0, X): con un mínimo de 0 el reparto de espacio
	   libre encoge las pistas hasta que la fila entra en el contenedor y el
	   carrusel deja de desplazarse (quedan ocho tarjetas de 107 px). */
	.rdc-carrusel__pista,
	.rdc-carrusel ul.products { grid-auto-columns: calc((100% - 54px) / 4); }
}

.rdc-carrusel__nav {
	display: flex;
	gap: 8px;
}

.rdc-carrusel__boton {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: 50%;
	color: var(--rdc-texto);
	cursor: pointer;
	transition: background var(--rdc-transicion), border-color var(--rdc-transicion), opacity var(--rdc-transicion);
}

.rdc-carrusel__boton:hover { background: var(--rdc-rojo); border-color: var(--rdc-rojo); color: #fff; }
.rdc-carrusel__boton[disabled] { opacity: 0.3; pointer-events: none; }

/* --- Bloque de precios mayorista/minorista --- */

.rdc-precios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
}

.rdc-precio-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 36px 32px;
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	background: linear-gradient(160deg, var(--rdc-superficie-2), var(--rdc-superficie));
	overflow: hidden;
	transition: border-color var(--rdc-transicion), transform var(--rdc-transicion);
}

.rdc-precio-card:hover { border-color: var(--rdc-linea-fuerte); transform: translateY(-3px); }

.rdc-precio-card__icono { color: var(--rdc-rojo-claro); margin-bottom: 6px; }

.rdc-precio-card__titulo { font-size: 1.6rem; margin: 0; }

.rdc-precio-card__texto { color: var(--rdc-texto-suave); font-size: 0.92rem; margin: 0; }

.rdc-precio-card__cta { margin-top: 16px; align-self: flex-start; }

/* --- Calculadora de eventos --- */

.rdc-calc { background: var(--rdc-fondo-alt); }

.rdc-calc__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 52px);
	align-items: stretch;
}

.rdc-calc__media {
	position: relative;
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	min-height: 420px;
	background: var(--rdc-superficie-2);
}

.rdc-calc__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rdc-calc__media-texto {
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px;
	background: linear-gradient(to top, rgba(8, 8, 10, 0.95), transparent);
}

.rdc-calc__claim {
	font-family: var(--rdc-display);
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.rdc-calc__panel {
	padding: clamp(24px, 3vw, 38px);
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
}

.rdc-calc__campo { margin: 0 0 22px; padding: 0; border: 0; }

.rdc-calc__campo--doble {
	display: grid;
	grid-template-columns: minmax(0, 200px) 1fr;
	gap: 18px;
	align-items: end;
}

.rdc-calc__etiqueta {
	display: block;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	margin: 0 0 10px;
	padding: 0;
}

.rdc-calc__personas {
	display: flex;
	align-items: center;
	width: max-content;
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
	background: var(--rdc-superficie-2);
	overflow: hidden;
}

.rdc-calc__personas .rdc-cantidad__boton { width: 46px; height: 52px; }

.rdc-calc__panel .rdc-calc__numero {
	width: 84px;
	height: 52px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--rdc-texto);
	font-family: var(--rdc-display);
	font-size: 1.7rem;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.rdc-calc__numero::-webkit-outer-spin-button,
.rdc-calc__numero::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Deslizador: se estiliza a mano porque el nativo es distinto en cada
   navegador y el de Chrome sale azul. */
.rdc-calc__rango {
	width: 100%;
	margin-top: 16px;
	height: 4px;
	padding: 0;
	background: var(--rdc-superficie-3);
	border: 0;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.rdc-calc__rango::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rdc-crema);
	border: 2px solid var(--rdc-rojo);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	cursor: grab;
}

.rdc-calc__rango::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rdc-crema);
	border: 2px solid var(--rdc-rojo);
	cursor: grab;
}

.rdc-calc__opciones { display: grid; gap: 8px; }

.rdc-calc__opcion {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
	cursor: pointer;
	transition: border-color var(--rdc-transicion), background var(--rdc-transicion);
}

.rdc-calc__opcion:hover { border-color: var(--rdc-linea-fuerte); }

/* :has para resaltar la fila entera cuando su casilla está marcada. */
.rdc-calc__opcion:has(input:checked) {
	border-color: var(--rdc-rojo);
	background: rgba(201, 48, 42, 0.12);
}

.rdc-calc__opcion input { width: 18px; height: 18px; accent-color: var(--rdc-rojo); cursor: pointer; }

.rdc-calc__opcion-cuerpo { display: grid; gap: 2px; min-width: 0; }
.rdc-calc__opcion-nombre { font-size: 0.92rem; font-weight: 600; color: var(--rdc-texto); }
.rdc-calc__opcion-detalle { font-size: 0.78rem; color: var(--rdc-texto-tenue); }

.rdc-calc__opcion-gramos {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--rdc-texto-tenue);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.rdc-calc__check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.88rem;
	color: var(--rdc-texto-suave);
	cursor: pointer;
	padding-bottom: 14px;
}

.rdc-calc__check input { width: 18px; height: 18px; accent-color: var(--rdc-rojo); cursor: pointer; }

/* Resultado */
.rdc-calc__resultado {
	padding: 20px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	margin-bottom: 20px;
}

.rdc-calc__lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }

.rdc-calc__fila {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: baseline;
	font-size: 0.9rem;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rdc-linea);
}

.rdc-calc__fila-nombre { color: var(--rdc-texto-suave); }
.rdc-calc__fila-kg { font-weight: 700; color: var(--rdc-texto); font-variant-numeric: tabular-nums; }
.rdc-calc__fila-precio { color: var(--rdc-texto-tenue); font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }

.rdc-calc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.rdc-calc__total-etiqueta {
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	flex: 1 1 100%;
}

.rdc-calc__total-kg {
	font-family: var(--rdc-display);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--rdc-texto);
	line-height: 1;
}

.rdc-calc__total-precio {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--rdc-rojo-claro);
	font-variant-numeric: tabular-nums;
}

.rdc-calc__vacio { color: var(--rdc-texto-tenue); font-size: 0.9rem; margin: 0; text-align: center; }

.rdc-calc__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }

.rdc-calc__nota { font-size: 0.78rem; color: var(--rdc-texto-tenue); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
	.rdc-calc__grid { grid-template-columns: 1fr; }
	.rdc-calc__media { min-height: 260px; order: -1; }
}

@media (max-width: 560px) {
	.rdc-calc__campo--doble { grid-template-columns: 1fr; align-items: start; }
	.rdc-calc__check { padding-bottom: 0; }
	.rdc-calc__opcion { grid-template-columns: auto 1fr; }
	.rdc-calc__opcion-gramos { grid-column: 2; }
	.rdc-calc__fila { grid-template-columns: 1fr auto; }
	.rdc-calc__fila-precio { grid-column: 2; }
}

/* --- Presupuesto a medida --- */

.rdc-presupuesto__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.rdc-presupuesto__media {
	position: relative;
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--rdc-superficie-2);
}

.rdc-presupuesto__media img { width: 100%; height: 100%; object-fit: cover; }

.rdc-presupuesto__media--abajo { margin-top: 32px; }

.rdc-presupuesto__form {
	padding: clamp(24px, 3vw, 36px);
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
}

@media (max-width: 860px) {
	.rdc-presupuesto__grid { grid-template-columns: 1fr; }
	.rdc-presupuesto__media { display: none; }
}

/* --- Franja de llamada final --- */

.rdc-cta-final {
	position: relative;
	padding: clamp(56px, 8vw, 96px) 0;
	background: linear-gradient(135deg, #8e1f1a, var(--rdc-rojo) 60%, #5d1512);
	text-align: center;
	overflow: hidden;
}

.rdc-cta-final__titulo { color: #fff; margin: 0 0 14px; }

.rdc-cta-final__texto {
	color: rgba(255, 255, 255, 0.9);
	max-width: 55ch;
	margin: 0 auto 28px;
}

.rdc-cta-final__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* ==========================================================================
   7. Cards de producto y catálogo
   ========================================================================== */

.rdc-productos {
	display: grid;
	/* 260 px y no 240: por debajo de eso, en las páginas a ancho completo
	   entran cinco columnas y la fila de acciones (cantidad + botón) no llega
	   a entrar, dejando "Agregar" cortado. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce le pone un clearfix (::before/::after con display:table) al
   <ul> de productos, pensado para su maquetado con floats. En una grilla esos
   pseudo-elementos cuentan como ítems: ocupaban la primera celda y corrían
   toda la fila un lugar a la derecha.

   Se repite el selector completo de WooCommerce para ganarle en
   especificidad: con .rdc-productos::before a secas no alcanza. */
.rdc-productos::before,
.rdc-productos::after,
.woocommerce ul.products.rdc-productos::before,
.woocommerce ul.products.rdc-productos::after {
	content: none;
	display: none;
}

/* La card se aplica a los <li> que genera el loop de WooCommerce (sin tocar
   sus plantillas) y a cualquier .rdc-card que pinte el tema por su cuenta. */
.rdc-card,
.rdc-productos > li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	list-style: none;
	margin: 0;
	transition: border-color var(--rdc-transicion), transform var(--rdc-transicion), box-shadow var(--rdc-transicion);
}

.rdc-card:hover,
.rdc-productos > li.product:hover {
	border-color: var(--rdc-linea-fuerte);
	transform: translateY(-4px);
	box-shadow: var(--rdc-sombra);
}

/* WooCommerce reparte anchos por porcentaje con .columns-N; la grilla del
   tema ya se encarga, así que se neutraliza. */
.rdc-productos > li.product {
	width: auto !important;
	float: none !important;
	clear: none !important;
}

/* Mismo caso que .rdc-catalogo__aside: sin min-width:0 la card no baja del
   ancho de su contenido (el selector de cantidad) y en la grilla de 2
   columnas del celular eso estiraba toda la página. */
.rdc-card,
.rdc-productos > li.product {
	min-width: 0;
}

.rdc-card:hover .rdc-card__media img,
.rdc-productos > li.product:hover .rdc-card__media img { transform: scale(1.05); }

.rdc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--rdc-superficie-2);
}

.rdc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rdc-card:hover .rdc-card__media img { transform: scale(1.05); }

.rdc-card__sin-foto {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--rdc-texto-tenue);
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 12px, transparent 12px 24px),
		var(--rdc-superficie-2);
}

.rdc-card__etiquetas {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	z-index: 2;
}

.rdc-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	/* Las fotos de producto son cálidas y claras: sin un halo oscuro y un
	   borde propio, las etiquetas se disuelven contra la imagen. */
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.35),
		0 3px 10px rgba(0, 0, 0, 0.5);
}

.rdc-etiqueta--oferta { background: var(--rdc-rojo); }

.rdc-etiqueta--nuevo {
	background: var(--rdc-crema);
	color: #16161a;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.5),
		0 3px 12px rgba(0, 0, 0, 0.6);
}

.rdc-etiqueta--agotado { background: rgba(20, 20, 24, 0.92); color: var(--rdc-texto-suave); }

.rdc-card__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 8px;
	padding: 18px;
}

.rdc-card__categoria {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
}

.rdc-card__titulo {
	font-family: var(--rdc-cuerpo);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
}

.rdc-card__titulo a:hover { color: var(--rdc-rojo-claro); }

.rdc-card__resumen {
	font-size: 0.84rem;
	color: var(--rdc-texto-suave);
	line-height: 1.45;
	margin: 0;
	/* Dos líneas como máximo para que la grilla no se desalinee. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rdc-card__precio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--rdc-cuerpo);
	font-size: 1.28rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--rdc-texto);
}

.rdc-card__precio del {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--rdc-texto-tenue);
	text-decoration: line-through;
}

.rdc-card__precio ins { text-decoration: none; color: var(--rdc-rojo-claro); }

.rdc-card__unidad {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--rdc-texto-tenue);
	letter-spacing: 0.02em;
}

/* flex-wrap para que el botón baje a su propia línea cuando no entra al lado
   del selector de cantidad. Sin esto encogía por debajo del ancho de su texto
   y "Agregar" quedaba cortado contra el borde de la card. */
.rdc-card__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 18px 18px;
}

/* Selector de cantidad de la card. */
.rdc-cantidad {
	display: flex;
	align-items: center;
	flex: none;
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
	overflow: hidden;
	background: var(--rdc-superficie-2);
}

.rdc-cantidad__boton {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 42px;
	background: none;
	border: 0;
	color: var(--rdc-texto-suave);
	cursor: pointer;
	transition: color var(--rdc-transicion), background var(--rdc-transicion);
}

.rdc-cantidad__boton:hover { color: var(--rdc-texto); background: rgba(255, 255, 255, 0.06); }

/* Se anida bajo .rdc-cantidad a propósito: la regla general de campos usa
   `input[type="number"]` (0,1,1) con width:100%, que le gana a una clase
   suelta (0,1,0) y estiraba el campo hasta ocupar toda la card. */
.rdc-cantidad .rdc-cantidad__input {
	flex: none;
	width: 38px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--rdc-texto);
	font-size: 0.9rem;
	font-weight: 700;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.rdc-cantidad__input::-webkit-outer-spin-button,
.rdc-cantidad__input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* La base de 130 px es el ancho mínimo con el que el texto entra completo:
   si no hay tanto espacio libre, flex-wrap lo manda a la línea de abajo. */
.rdc-card__agregar {
	flex: 1 1 130px;
	min-width: 130px;
	padding: 12px 12px;
	font-size: 0.76rem;
	gap: 7px;
	white-space: nowrap;
}

.rdc-card__agregar.rdc-esta-listo { background: var(--rdc-verde); color: #06301a; }

/* Barra de filtros y orden del catálogo. */
.rdc-catalogo__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 18px 0 26px;
	border-bottom: 1px solid var(--rdc-linea);
	margin-bottom: 30px;
}

.rdc-catalogo__resultado { color: var(--rdc-texto-suave); font-size: 0.88rem; margin: 0; }

.rdc-catalogo__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

/* Los ítems de una grilla tienen min-width:auto, así que no bajan del ancho
   de su contenido: la lista de categorías con scroll horizontal estiraba
   toda la página en celulares en vez de desplazarse por dentro. */
.rdc-catalogo__layout > *,
.rdc-presupuesto__grid > *,
.rdc-split > * {
	min-width: 0;
}

/* .rdc-catalogo__aside también es una grilla (buscador, categorías, precio,
   tarjeta de mayorista apilados): sus propios ítems heredan el mismo
   problema de min-width:auto y estiraban la barra lateral —y con ella toda
   la página— en celulares. */
.rdc-catalogo__aside > * {
	min-width: 0;
}

.rdc-catalogo__aside {
	position: sticky;
	top: calc(var(--rdc-header-h) + 20px);
	display: grid;
	gap: 26px;
}

.rdc-filtro__titulo {
	font-family: var(--rdc-cuerpo);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rdc-linea);
}

.rdc-filtro__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.rdc-filtro__lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--rdc-radio);
	font-size: 0.88rem;
	color: var(--rdc-texto-suave);
	transition: background var(--rdc-transicion), color var(--rdc-transicion);
}

.rdc-filtro__lista a:hover { background: var(--rdc-superficie); color: var(--rdc-texto); }

.rdc-filtro__lista .rdc-esta-activo a,
.rdc-filtro__lista a.rdc-esta-activo {
	background: rgba(201, 48, 42, 0.16);
	color: var(--rdc-rojo-claro);
	font-weight: 600;
}

.rdc-filtro__cuenta {
	font-size: 0.74rem;
	color: var(--rdc-texto-tenue);
	background: var(--rdc-superficie-2);
	border-radius: 999px;
	padding: 2px 8px;
}

/* --- Filtro de precio (widget WC_Widget_Price_Filter) --- */

.rdc-filtro--precio .price_slider_wrapper { padding-top: 10px; }

/* Riel del deslizador. Se define todo acá —posición del riel, del rango y de
   las manijas— y no solo los colores: las reglas .ui-slider-horizontal de
   WooCommerce viajan en woocommerce-layout.css, que el tema da de baja para
   hacer su propio maquetado. Sin ellas el rango quedaba con altura 0 y la
   barra roja no se veía. */
.rdc-filtro--precio .price_slider.ui-slider {
	position: relative;
	height: 4px;
	margin: 0 8px 22px;
	background: var(--rdc-superficie-3);
	border: 0;
	border-radius: 999px;
}

.rdc-filtro--precio .ui-slider .ui-slider-range {
	position: absolute;
	top: 0;
	z-index: 1;
	height: 100%;
	border: 0;
	border-radius: 999px;
	background: var(--rdc-rojo);
}

.rdc-filtro--precio .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 16px;
	height: 16px;
	top: -6px;
	margin-left: -8px;
	background: var(--rdc-crema);
	border: 2px solid var(--rdc-rojo);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	cursor: grab;
	transition: transform var(--rdc-transicion);
}

.rdc-filtro--precio .ui-slider .ui-slider-handle:hover,
.rdc-filtro--precio .ui-slider .ui-slider-handle:focus-visible { transform: scale(1.15); }
.rdc-filtro--precio .ui-slider .ui-slider-handle:active { cursor: grabbing; }

/* El script del widget esconde los dos campos de importe y muestra en su
   lugar la etiqueta "Precio: X — Y", que se actualiza al arrastrar. Se
   respeta ese comportamiento (es el del plugin) y solo se ordena: primero la
   etiqueta, después el botón. */
.rdc-filtro--precio .price_slider_amount {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: left;
	font-size: 0.85rem;
	line-height: 1.4;
}

.rdc-filtro--precio .price_label {
	order: -1;
	color: var(--rdc-texto-tenue);
	font-size: 0.8rem;
}

.rdc-filtro--precio .price_label .from,
.rdc-filtro--precio .price_label .to {
	color: var(--rdc-texto);
	font-weight: 700;
	font-size: 0.92rem;
}

.rdc-filtro--precio .price_slider_amount .button {
	float: none;
	width: 100%;
	padding: 11px 16px;
	font-size: 0.75rem;
}

.rdc-filtro--precio .clear { display: none; }

/* --- Filtros aplicados (widget WC_Widget_Layered_Nav_Filters) --- */

.rdc-filtro--activos ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rdc-filtro--activos li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: rgba(201, 48, 42, 0.16);
	border: 1px solid rgba(201, 48, 42, 0.4);
	border-radius: 999px;
	color: var(--rdc-rojo-claro);
	font-size: 0.78rem;
	font-weight: 600;
}

/* La cruz de "quitar" se agrega desde CSS: el widget solo imprime el texto. */
.rdc-filtro--activos li a::after {
	content: "×";
	font-size: 1.05rem;
	line-height: 1;
	opacity: 0.75;
}

.rdc-filtro--activos li a:hover {
	background: var(--rdc-rojo);
	border-color: var(--rdc-rojo);
	color: #fff;
}

@media (max-width: 900px) {
	.rdc-catalogo__layout { grid-template-columns: 1fr; }
	.rdc-catalogo__aside { position: static; }
	.rdc-filtro__lista {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		overflow-x: auto;
		gap: 8px;
		/* El scroll sale del contenedor con padding para que las píldoras no
		   queden pegadas al borde de la pantalla al desplazarlas. */
		margin-inline: calc(var(--rdc-gutter) * -1);
		padding-inline: var(--rdc-gutter);
		scrollbar-width: none;
	}

	.rdc-filtro__lista::-webkit-scrollbar { display: none; }
	.rdc-filtro__lista a { border: 1px solid var(--rdc-linea); white-space: nowrap; }
}

/* Paginación. */
.rdc-paginacion {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.rdc-paginacion .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 4px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--rdc-texto-suave);
	transition: all var(--rdc-transicion);
}

.rdc-paginacion .page-numbers:hover,
.rdc-paginacion .page-numbers.current {
	background: var(--rdc-rojo);
	border-color: var(--rdc-rojo);
	color: #fff;
}

.rdc-paginacion ul { list-style: none; margin: 0; padding: 0; display: flex; }

/* ==========================================================================
   8. WooCommerce
   ========================================================================== */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 16px 20px;
	margin: 0 0 24px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-left: 3px solid var(--rdc-rojo);
	border-radius: var(--rdc-radio);
	color: var(--rdc-texto);
	font-size: 0.92rem;
	list-style: none;
}

.woocommerce-message { border-left-color: var(--rdc-verde); }
.woocommerce-error { border-left-color: #e5484d; }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
}

/* Botones que pinta WooCommerce en sus propias plantillas. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--rdc-rojo);
	border: 1px solid transparent;
	border-radius: var(--rdc-radio);
	color: #fff;
	font-family: var(--rdc-cuerpo);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background var(--rdc-transicion);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--rdc-rojo-hover);
	color: #fff;
}

/* Los botones "alt" (agregar al carrito, finalizar compra, realizar pedido)
   traen el violeta de marca de WooCommerce con selectores de especificidad
   (0,3,1); hay que repetir esa forma para poder pisarlos. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce div.product form.cart .button.alt {
	background: var(--rdc-rojo);
	border-color: transparent;
	color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce div.product form.cart .button.alt:hover {
	background: var(--rdc-rojo-hover);
	color: #fff;
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
	background: var(--rdc-superficie-3);
	color: var(--rdc-texto-tenue);
	opacity: 1;
}

/* Estados de stock. */
.woocommerce div.product .stock { font-size: 0.85rem; font-weight: 600; }
.woocommerce div.product .stock.in-stock { color: #4ade80; }
.woocommerce div.product .stock.out-of-stock { color: #ff8b8b; }

.woocommerce a.button.wc-forward:not(.checkout-button) {
	background: transparent;
	border-color: var(--rdc-linea-fuerte);
	color: var(--rdc-texto);
}

/* --- Ficha de producto --- */

/* La ficha se maqueta con CSS sobre el markup que genera WooCommerce, sin
   sobrescribir sus plantillas: galería a la izquierda, resumen a la derecha,
   y pestañas/relacionados ocupando el ancho completo. */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: start;
	padding: clamp(32px, 5vw, 56px) 0 0;
}

.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > div.images {
	grid-column: 1;
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product > .summary {
	grid-column: 2;
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .woocommerce-product-gallery + .clear,
.woocommerce div.product > .product_meta {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product > .woocommerce-product-gallery,
	.woocommerce div.product > div.images,
	.woocommerce div.product > .summary { grid-column: 1; }
}

.woocommerce div.product div.images { margin: 0; }

.woocommerce div.product div.images img {
	border-radius: var(--rdc-radio-lg);
	background: var(--rdc-superficie-2);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--rdc-radio); opacity: 0.6; transition: opacity var(--rdc-transicion); }
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1; }

.woocommerce div.product .product_title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--rdc-cuerpo);
	font-size: 2rem;
	font-weight: 800;
	color: var(--rdc-texto);
	margin: 0 0 6px;
}

.woocommerce div.product p.price del { font-size: 1.15rem; font-weight: 500; color: var(--rdc-texto-tenue); }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--rdc-rojo-claro); }

.rdc-producto__unidad {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--rdc-texto-tenue);
	margin: 0 0 22px;
}

.woocommerce-product-details__short-description {
	color: var(--rdc-texto-suave);
	padding: 22px 0;
	margin: 0 0 22px;
	border-block: 1px solid var(--rdc-linea);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 26px;
}

.woocommerce div.product form.cart .quantity { margin: 0; }

.woocommerce .quantity .qty {
	width: 84px;
	height: 100%;
	min-height: 50px;
	text-align: center;
	font-weight: 700;
	appearance: textfield;
	-moz-appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button { appearance: none; margin: 0; }

.woocommerce div.product form.cart .button { flex: 1 1 220px; min-height: 50px; }

.woocommerce div.product .product_meta {
	display: grid;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--rdc-texto-tenue);
	padding-top: 22px;
	border-top: 1px solid var(--rdc-linea);
}

.woocommerce div.product .product_meta a { color: var(--rdc-texto-suave); }
.woocommerce div.product .product_meta a:hover { color: var(--rdc-rojo-claro); }

.rdc-producto__ventajas {
	display: grid;
	gap: 12px;
	margin: 26px 0 0;
	padding: 20px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	list-style: none;
}

.rdc-producto__ventajas li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.88rem;
	color: var(--rdc-texto-suave);
}

.rdc-producto__ventajas .rdc-icono { color: var(--rdc-rojo-claro); }

.rdc-producto__wsp { margin-top: 16px; }

/* Pestañas de la ficha. */
.woocommerce div.product .woocommerce-tabs { padding: 0 0 clamp(48px, 7vw, 80px); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 28px;
	padding: 0;
	border-bottom: 1px solid var(--rdc-linea);
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Las esquinas curvas de las pestañas de WooCommerce se dibujan con
   pseudo-elementos posicionados; en este diseño sobran. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	content: none;
	display: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 20px;
	font-family: var(--rdc-cuerpo);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	border-bottom: 2px solid transparent;
	transition: color var(--rdc-transicion), border-color var(--rdc-transicion);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--rdc-texto);
	border-bottom-color: var(--rdc-rojo);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: var(--rdc-ancho-texto);
	color: var(--rdc-texto-suave);
}

.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.4rem; }

.woocommerce table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--rdc-linea);
	text-align: left;
	font-size: 0.9rem;
}

.woocommerce table.shop_attributes th { color: var(--rdc-texto); font-weight: 600; width: 30%; }

/* Productos relacionados. */
.related.products,
.upsells.products {
	padding: clamp(40px, 6vw, 72px) 0;
	border-top: 1px solid var(--rdc-linea);
}

.related.products > h2,
.upsells.products > h2 { margin-bottom: 28px; }

/* --- Carrito --- */

.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--rdc-superficie);
	margin: 0 0 28px;
}

.woocommerce table.shop_table th {
	padding: 16px 18px;
	background: var(--rdc-superficie-2);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	text-align: left;
	border: 0;
}

.woocommerce table.shop_table td {
	padding: 18px;
	border: 0;
	border-top: 1px solid var(--rdc-linea);
	vertical-align: middle;
	font-size: 0.92rem;
}

.woocommerce table.shop_table img { width: 72px; border-radius: var(--rdc-radio); }

.woocommerce table.cart td.product-name a { font-weight: 600; }

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--rdc-superficie-2);
	color: var(--rdc-texto-tenue) !important;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce a.remove:hover { background: var(--rdc-rojo); color: #fff !important; }

.woocommerce .cart-collaterals { display: grid; gap: 20px; }

.woocommerce .cart_totals {
	padding: 28px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
}

.woocommerce .cart_totals h2 { font-size: 1.4rem; margin-bottom: 18px; }

.woocommerce .cart_totals table { width: 100%; border: 0; background: none; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
	padding: 12px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rdc-linea);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.92rem;
}

.woocommerce .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th { font-size: 1.15rem; font-weight: 800; color: var(--rdc-texto); }

.woocommerce .checkout-button { width: 100%; margin-top: 18px; }

/* --- Bloques de carrito y checkout (WooCommerce Blocks) --- */

/* WooCommerce sirve el carrito y el checkout con bloques desde la versión 8;
   comparten pocos estilos con las plantillas clásicas, así que sus piezas se
   ajustan aparte. */
.wc-block-components-button:not(.is-link) {
	background: var(--rdc-rojo);
	border-radius: var(--rdc-radio);
	color: #fff;
	text-decoration: none;
	font-family: var(--rdc-cuerpo);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover { background: var(--rdc-rojo-hover); color: #fff; }

.wc-block-components-button__text { color: inherit; text-decoration: none; }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value { color: var(--rdc-texto); }

.wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-cart-order-summary-block {
	border-color: var(--rdc-linea) !important;
}

.wc-block-cart-items__header,
.wc-block-components-product-name,
.wc-block-components-product-metadata {
	color: var(--rdc-texto-suave);
}

.wc-block-components-product-name { font-weight: 600; }

.wc-block-cart-item__image img { border-radius: var(--rdc-radio); }

.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button { color: var(--rdc-texto) !important; }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input {
	background: var(--rdc-superficie-2) !important;
	border-color: var(--rdc-linea) !important;
	color: var(--rdc-texto) !important;
}

.wc-block-components-text-input label { color: var(--rdc-texto-tenue) !important; }

.wc-block-components-title,
.wc-block-cart__totals-title { color: var(--rdc-texto); }

/* Los <select> del checkout (país, provincia) vienen con el contenedor en
   blanco fijo desde los estilos de WooCommerce Blocks. */
.wc-blocks-components-select__container {
	background: var(--rdc-superficie-2) !important;
	border-color: var(--rdc-linea) !important;
	border-radius: var(--rdc-radio) !important;
}

.wc-blocks-components-select__select {
	color: var(--rdc-texto) !important;
	background: transparent !important;
}

.wc-blocks-components-select__select option { background: var(--rdc-superficie-2); color: var(--rdc-texto); }

.wc-blocks-components-select__label,
.wc-block-components-checkout-step__description { color: var(--rdc-texto-tenue) !important; }

.wc-block-components-checkbox__input { accent-color: var(--rdc-rojo); }

/* Avisos de los bloques (errores de pago, cupones, envío). */
.wc-block-components-notice-banner {
	background: var(--rdc-superficie) !important;
	border-color: var(--rdc-linea) !important;
	color: var(--rdc-texto) !important;
}

.wc-block-components-notice-banner.is-error { border-left: 3px solid #e5484d !important; }
.wc-block-components-notice-banner.is-success { border-left: 3px solid var(--rdc-verde) !important; }
.wc-block-components-notice-banner.is-info { border-left: 3px solid var(--rdc-rojo) !important; }
.wc-block-components-notice-banner > svg { fill: currentColor; }

.wc-block-components-order-summary-item__description,
.wc-block-components-radio-control__label { color: var(--rdc-texto-suave); }

/* La página del carrito la arma el shortcode de WooCommerce: acá solo se
   acomodan sus dos bloques (tabla + totales) en columnas. */
@media (min-width: 1000px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
		gap: 40px;
		align-items: start;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart .woocommerce .cart-collaterals { width: auto; float: none; }
	.woocommerce-cart .woocommerce form.woocommerce-cart-form { margin: 0; }
	.woocommerce-cart .cart_totals { width: auto !important; float: none !important; }
}

/* Mini carrito del panel lateral. */
.rdc-panel .woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.rdc-panel .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 14px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rdc-linea);
	position: relative;
}

.rdc-panel .woocommerce-mini-cart-item img {
	grid-row: span 2;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--rdc-radio);
	margin: 0;
	float: none;
}

.rdc-panel .woocommerce-mini-cart-item a { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.rdc-panel .woocommerce-mini-cart-item .quantity { font-size: 0.85rem; color: var(--rdc-texto-suave); }

.rdc-panel .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 0;
	right: 0;
}

.rdc-panel .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	margin: 6px 0 0;
	border-top: 1px solid var(--rdc-linea);
	font-size: 1.05rem;
	font-weight: 700;
}

.rdc-panel .woocommerce-mini-cart__total strong { font-weight: 600; color: var(--rdc-texto-suave); font-size: 0.9rem; }

.rdc-panel .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* Botones completos y autocontenidos (no solo el color) para el carrito
   lateral. Necesitan !important: en las páginas de tienda/categoría/producto
   WordPress le agrega la clase "woocommerce" al propio <body> (vía
   body_class de WooCommerce), así que el panel SÍ queda dentro de un
   ancestro .woocommerce ahí —aunque en el resto de las páginas no—, y ahí
   entra en juego ".woocommerce a.button.wc-forward:not(.checkout-button)"
   (pensada para el botón "Volver a la tienda" del carrito clásico, con un
   :not() que no matchea la clase real "checkout" del mini-carrito, herencia
   de un typo). Esa regla tiene un selector de tipo `a` de más y por
   especificidad le gana a la nuestra, dejando los botones transparentes en
   la tienda pero no en la home: el bug se veía distinto según la página.
   Los dos van en la familia roja/bordó para que resalten dentro del panel
   oscuro; "Finalizar la compra" en el rojo de marca (acción principal) y
   "Ver carrito" un tono más oscuro (bordó), para marcar la jerarquía sin
   dejar de ser un botón sólido y visible. */
.rdc-panel .woocommerce-mini-cart__buttons .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	border: 1px solid transparent !important;
	border-radius: var(--rdc-radio);
	color: #fff !important;
	font-family: var(--rdc-cuerpo);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	transition: background var(--rdc-transicion);
}

.rdc-panel .woocommerce-mini-cart__buttons .button.checkout { background: var(--rdc-rojo) !important; }
.rdc-panel .woocommerce-mini-cart__buttons .button.checkout:hover { background: var(--rdc-rojo-hover) !important; color: #fff !important; }

.rdc-panel .woocommerce-mini-cart__buttons .button:not(.checkout) { background: var(--rdc-rojo-hover) !important; }
.rdc-panel .woocommerce-mini-cart__buttons .button:not(.checkout):hover { background: #8a1f1a !important; color: #fff !important; }

.rdc-panel .woocommerce-mini-cart__empty-message {
	text-align: center;
	color: var(--rdc-texto-suave);
	padding: 40px 0;
}

/* --- Checkout y cuenta --- */

.woocommerce-checkout .col2-set { display: grid; gap: 28px; }

@media (min-width: 900px) {
	.woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; }
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.woocommerce form .form-row { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; }
.woocommerce form .form-row label { color: var(--rdc-texto-suave); }
.woocommerce form .form-row .required { color: var(--rdc-rojo-claro); border: 0; }

.woocommerce-checkout #order_review,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
	padding: 28px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 16px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
}

/* Caja blanca a propósito, a diferencia del resto del checkout (oscuro): acá
   suele ir el CBU para transferencias o instrucciones para pagar en efectivo,
   texto que el cliente necesita copiar sin esfuerzo. Gris claro sobre oscuro
   es legible, pero para un dato que hay que transcribir bien conviene el
   contraste más alto de texto oscuro sobre blanco. */
.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	color: #1a1a1a;
	font-size: 0.88rem;
	line-height: 1.6;
	padding: 16px 18px;
	margin: 12px 0 0;
	border: 0;
	border-left: 3px solid var(--rdc-rojo);
	border-radius: var(--rdc-radio);
}

.woocommerce-checkout #payment div.payment_box strong { color: #000; }

.woocommerce-checkout #payment div.payment_box a {
	color: var(--rdc-rojo);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-checkout #payment div.payment_box::before { content: none; }

/* Mismo criterio (caja blanca) para el checkout moderno de WooCommerce
   Blocks: el checkout de este sitio es el de bloques, no el clásico, así que
   la descripción del método de pago (CBU, instrucciones de efectivo) NO usa
   la clase `.payment_box` de arriba —esa es del checkout viejo, por si algún
   día se vuelve a él o queda un shortcode suelto— sino el acordeón propio de
   Blocks. Se sobreescribe el padding de fábrica (0 16px 16px, sin margen
   arriba) para que la caja blanca no quede pegada al radio button. */
.wc-block-components-radio-control-accordion-content {
	background: #fff;
	color: #1a1a1a;
	padding: 14px 16px !important;
	margin: 0 0 2px;
	border-left: 3px solid var(--rdc-rojo);
	border-radius: 0 0 var(--rdc-radio) var(--rdc-radio);
}

.wc-block-components-radio-control-accordion-content strong,
.wc-block-components-radio-control-accordion-content b { color: #000; }

.wc-block-components-radio-control-accordion-content a {
	color: var(--rdc-rojo);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 11px 16px;
	border-radius: var(--rdc-radio);
	font-size: 0.9rem;
	color: var(--rdc-texto-suave);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--rdc-superficie);
	color: var(--rdc-texto);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 25%; }
	.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 71%; }
}

/* Woo usa <span class="woocommerce-Price-amount"> por todos lados. */
.woocommerce-Price-amount { white-space: nowrap; }
.woocommerce-Price-currencySymbol { font-size: 0.8em; opacity: 0.75; margin-right: 1px; }

/* ==========================================================================
   9. Contenido editorial y páginas internas
   ========================================================================== */

.rdc-encabezado {
	position: relative;
	padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
	background: linear-gradient(180deg, var(--rdc-fondo-alt), var(--rdc-fondo));
	border-bottom: 1px solid var(--rdc-linea);
}

.rdc-encabezado__titulo { margin: 0; }

.rdc-encabezado__bajada {
	color: var(--rdc-texto-suave);
	max-width: 60ch;
	margin: 14px 0 0;
}

.rdc-migas {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.78rem;
	color: var(--rdc-texto-tenue);
	margin-bottom: 14px;
}

.rdc-migas a { color: var(--rdc-texto-suave); }
.rdc-migas a:hover { color: var(--rdc-rojo-claro); }
.rdc-migas__sep { opacity: 0.45; }
.woocommerce .woocommerce-breadcrumb { margin: 0; color: inherit; font-size: inherit; }

.rdc-contenido {
	max-width: var(--rdc-ancho-texto);
	padding: clamp(40px, 6vw, 72px) 0;
	color: var(--rdc-texto-suave);
	font-size: 1.02rem;
}

.rdc-contenido--ancho { max-width: none; }

/* Selector de HIJO DIRECTO a propósito: the_content() imprime sus bloques
   (h2, p...) como hijos directos de .rdc-contenido, así que ese es el ámbito
   real del "contenido editorial". Con un selector descendiente normal
   (.rdc-contenido h2) esta separación se colaba en los <h2> que WooCommerce
   genera ANIDADOS acá adentro —el de "Iniciar sesión" en Mi Cuenta, por
   ejemplo—: como esos títulos usan una tipografía mucho más grande, el
   margin-top en em se traducía en ~100px de aire antes del formulario. */
.rdc-contenido > h2,
.rdc-contenido > h3 { color: var(--rdc-texto); margin-top: 2em; }

.rdc-contenido > h2:first-child,
.rdc-contenido > h3:first-child { margin-top: 0; }

/* Solo los enlaces dentro de texto corrido llevan el subrayado editorial. Si
   se aplicara a `.rdc-contenido a` en general, se comería los botones que
   WooCommerce pinta dentro del carrito y el checkout (que son <a>), dejándolos
   subrayados y del color equivocado. El `:not([class])` remata el filtro: los
   enlaces escritos en el editor no llevan clase, los de WooCommerce sí. */
.rdc-contenido :is(p, li, td, th, dd, blockquote, h2, h3, h4) a:not([class]) {
	color: var(--rdc-rojo-claro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rdc-contenido img { border-radius: var(--rdc-radio-lg); margin: 1.5em 0; }

.rdc-contenido blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--rdc-rojo);
	font-size: 1.15rem;
	color: var(--rdc-texto);
}

.rdc-contenido ul li,
.rdc-contenido ol li { margin-bottom: 0.5em; }

/* Grilla de dos columnas para páginas tipo "Contacto". */
.rdc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	padding: clamp(40px, 6vw, 72px) 0;
}

@media (max-width: 860px) {
	.rdc-split { grid-template-columns: 1fr; }
}

.rdc-tarjeta {
	padding: clamp(24px, 3vw, 36px);
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
}

.rdc-tarjeta__texto { font-size: 0.88rem; color: var(--rdc-texto-suave); margin: 0; }
.rdc-tarjeta__cta { margin-top: 14px; }

.rdc-datos { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.rdc-datos li { display: flex; align-items: flex-start; gap: 14px; }

.rdc-datos .rdc-icono { color: var(--rdc-rojo-claro); margin-top: 3px; }

.rdc-datos__etiqueta {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	margin-bottom: 2px;
}

.rdc-datos__valor { color: var(--rdc-texto); font-weight: 600; }

.rdc-datos__enlace {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--rdc-rojo-claro);
}

.rdc-datos__enlace .rdc-icono { transition: transform var(--rdc-transicion); }
.rdc-datos__enlace:hover .rdc-icono { transform: translateX(3px); }

/* --- Mapa de la sucursal --- */

.rdc-mapa {
	position: relative;
	aspect-ratio: 21 / 8;
	min-height: 320px;
	overflow: hidden;
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	background: var(--rdc-superficie-2);
}

.rdc-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* El mapa de Google es claro y sobre el fondo oscuro del sitio entra como
	   un rectángulo encandilante: se baja apenas el brillo y la saturación
	   sin comprometer la lectura de calles y nombres. */
	filter: brightness(0.92) saturate(0.9);
}

@media (max-width: 600px) {
	.rdc-mapa { aspect-ratio: 4 / 3; min-height: 260px; }
}

@media print {
	.rdc-mapa { display: none; }
}

/* --- WPForms dentro del tema oscuro --- */

.wpforms-container { max-width: none !important; margin: 0 !important; }

.wpforms-container .wpforms-field { padding: 0 0 18px !important; }

.wpforms-container .wpforms-field-label {
	color: var(--rdc-texto-suave) !important;
	font-family: var(--rdc-cuerpo) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}

.wpforms-container .wpforms-required-label { color: var(--rdc-rojo-claro) !important; }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	/* background-color y no el atajo `background`: el atajo borra la flecha
	   del desplegable, que se dibuja con background-image más abajo. */
	background-color: var(--rdc-superficie-2) !important;
	border: 1px solid var(--rdc-linea) !important;
	border-radius: var(--rdc-radio) !important;
	color: var(--rdc-texto) !important;
	font-family: var(--rdc-cuerpo) !important;
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
	padding: 13px 16px !important;
	max-width: none !important;
	box-shadow: none !important;
}

/* WPForms le fija una altura al <select> pensada para su tipografía por
   defecto; con el relleno del tema el texto de la opción quedaba cortado por
   la mitad. Se libera la altura y se repone la flecha. */
.wpforms-container select {
	height: auto !important;
	min-height: 50px !important;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px !important;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--rdc-texto-suave) 50%),
		linear-gradient(135deg, var(--rdc-texto-suave) 50%, transparent 50%) !important;
	background-position: calc(100% - 22px) center, calc(100% - 16px) center !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;
}

.wpforms-container select option {
	background-color: var(--rdc-superficie-2);
	color: var(--rdc-texto);
}

/* Los marcadores de posición salían casi negros sobre el fondo oscuro: los
   navegadores les aplican una opacidad propia además del color heredado. */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: var(--rdc-texto-tenue) !important;
	opacity: 1 !important;
}

.wpforms-container textarea { min-height: 130px !important; }

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--rdc-rojo-claro) !important;
	background: var(--rdc-superficie-3) !important;
}

.wpforms-container .wpforms-field-description {
	color: var(--rdc-texto-tenue) !important;
	font-size: 0.8rem !important;
}

/* Checkboxes y radios (por ejemplo "¿Qué te gustaría servir?" del formulario
   de eventos). Sin estas reglas, WPForms pinta la etiqueta en un gris oscuro
   pensado para fondo claro —casi ilegible sobre el fondo del tema— y el
   control nativo queda como un cuadrado blanco liso. */
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-gdpr-checkbox ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 10px;
}

.wpforms-container .wpforms-field-checkbox ul li,
.wpforms-container .wpforms-field-radio ul li,
.wpforms-container .wpforms-field-gdpr-checkbox ul li {
	margin: 0 !important;
	padding: 0 !important;
}

.wpforms-container .wpforms-field-checkbox ul li label,
.wpforms-container .wpforms-field-radio ul li label,
.wpforms-container .wpforms-field-gdpr-checkbox ul li label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	color: var(--rdc-texto) !important;
	font-size: 0.92rem !important;
	font-weight: 500 !important;
	cursor: pointer;
}

.wpforms-container input[type="checkbox"],
.wpforms-container input[type="radio"] {
	flex: none;
	width: 19px !important;
	height: 19px !important;
	margin: 0 !important;
	accent-color: var(--rdc-rojo);
	cursor: pointer;
}

.wpforms-container button[type="submit"] {
	background: var(--rdc-rojo) !important;
	border: 0 !important;
	border-radius: var(--rdc-radio) !important;
	color: #fff !important;
	font-family: var(--rdc-cuerpo) !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 15px 30px !important;
	cursor: pointer;
	transition: background var(--rdc-transicion);
}

.wpforms-container button[type="submit"]:hover { background: var(--rdc-rojo-hover) !important; }

.wpforms-container .wpforms-error {
	color: #ff8b8b !important;
	font-size: 0.82rem !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error { border-color: #e5484d !important; }

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
	background: rgba(37, 211, 102, 0.1) !important;
	border: 1px solid rgba(37, 211, 102, 0.35) !important;
	border-radius: var(--rdc-radio) !important;
	color: var(--rdc-texto) !important;
	padding: 20px !important;
}

/* WPForms le fija su propio gris (#333, pensado para fondo claro) al <p> del
   mensaje de confirmación, no al contenedor. Ese color no se hereda del
   !important de arriba porque hay una declaración explícita sobre el <p>
   mismo, y una declaración explícita siempre le gana a la herencia sin
   importar cuán "important" sea la del ancestro. Por eso el mensaje se veía
   gris oscuro sobre el fondo oscuro del panel, casi ilegible. */
.wpforms-confirmation-container-full *,
div[submit-success] > .wpforms-confirmation-container-full * {
	color: var(--rdc-texto) !important;
}

/* --- Quiénes somos --- */

.rdc-quienes {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	padding: clamp(32px, 5vw, 56px) 0;
}

.rdc-quienes__redes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--rdc-linea);
}

.rdc-quienes__redes-etiqueta {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
}

.rdc-quienes__redes a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--rdc-texto-suave);
	transition: all var(--rdc-transicion);
}

.rdc-quienes__redes a:hover { background: var(--rdc-rojo); border-color: var(--rdc-rojo); color: #fff; }

.rdc-quienes__sucursal { display: grid; gap: 20px; position: sticky; top: calc(var(--rdc-header-h) + 20px); }

.rdc-quienes__foto {
	aspect-ratio: 3 / 4;
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	border: 1px solid var(--rdc-linea);
	background: var(--rdc-superficie-2);
}

.rdc-quienes__foto img { width: 100%; height: 100%; object-fit: cover; }

.rdc-quienes__datos .rdc-datos { margin-bottom: 20px; }

@media (max-width: 900px) {
	.rdc-quienes { grid-template-columns: 1fr; }
	.rdc-quienes__sucursal { position: static; }
	.rdc-quienes__foto { aspect-ratio: 16 / 10; }
}

/* --- Presupuesto de evento --- */

.rdc-eventos {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(28px, 4vw, 52px);
	padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 7vw, 80px);
	align-items: start;
}

.rdc-eventos__media {
	position: sticky;
	top: calc(var(--rdc-header-h) + 20px);
	aspect-ratio: 3 / 4;
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	border: 1px solid var(--rdc-linea);
	background: var(--rdc-superficie-2);
}

.rdc-eventos__media img { width: 100%; height: 100%; object-fit: cover; }

.rdc-eventos__pasos {
	display: grid;
	gap: 18px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.rdc-eventos__pasos li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.rdc-eventos__paso-icono {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(201, 48, 42, 0.14);
	color: var(--rdc-rojo-claro);
}

.rdc-eventos__paso-titulo { font-size: 1rem; margin: 6px 0 4px; text-transform: none; letter-spacing: 0; font-family: var(--rdc-cuerpo); font-weight: 700; }
.rdc-eventos__paso-texto { font-size: 0.9rem; color: var(--rdc-texto-suave); margin: 0; }

.rdc-eventos__form { margin-bottom: 24px; }

.rdc-eventos__directo {
	font-size: 0.9rem;
	color: var(--rdc-texto-suave);
	text-align: center;
}

.rdc-eventos__directo a { color: var(--rdc-rojo-claro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
	.rdc-eventos { grid-template-columns: 1fr; }
	.rdc-eventos__media { position: static; aspect-ratio: 16 / 9; }
}

/* --- Cómo comprar: pasos numerados --- */

.rdc-pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.rdc-paso {
	position: relative;
	display: grid;
	/* El número y el ícono comparten la primera fila; el título y el texto
	   ocupan el ancho completo de la card debajo. */
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 8px 14px;
	padding: 26px 24px;
	background: linear-gradient(160deg, var(--rdc-superficie-2), var(--rdc-superficie));
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	transition: border-color var(--rdc-transicion), transform var(--rdc-transicion);
}

.rdc-paso:hover { border-color: var(--rdc-linea-fuerte); transform: translateY(-3px); }

/* Franja roja superior: marca la secuencia sin recargar la card. */
.rdc-paso::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--rdc-rojo);
}

.rdc-paso__numero {
	font-family: var(--rdc-display);
	font-size: 2.6rem;
	line-height: 0.85;
	color: var(--rdc-rojo);
}

.rdc-paso__icono {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	justify-self: start;
	border-radius: 50%;
	background: rgba(201, 48, 42, 0.14);
	color: var(--rdc-rojo-claro);
}

.rdc-paso__titulo {
	grid-column: 1 / -1;
	font-size: 1.15rem;
	margin: 6px 0 0;
	line-height: 1.15;
}

.rdc-paso__texto {
	grid-column: 1 / -1;
	color: var(--rdc-texto-suave);
	font-size: 0.92rem;
}

.rdc-paso__texto p:last-child { margin-bottom: 0; }

/* Bloques de pago, envíos y contacto al pie de la guía. */
.rdc-datos-compra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	align-items: start;
}

/* Compras mayoristas: circuito aparte, no un paso más de la secuencia
   minorista (no pasa por el checkout online). */
.rdc-mayorista {
	padding: clamp(28px, 4vw, 44px);
	margin: 0 0 40px;
	background: linear-gradient(135deg, rgba(201, 48, 42, 0.16), rgba(201, 48, 42, 0.04));
	border: 1px solid rgba(201, 48, 42, 0.3);
	border-radius: var(--rdc-radio-lg);
}

.rdc-mayorista__titulo { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2rem); }

.rdc-mayorista__bajada {
	color: var(--rdc-texto-suave);
	max-width: 62ch;
	margin: 0 0 22px;
}

/* --- Zonas de envío --- */

.rdc-zonas { margin-top: 48px; }

.rdc-zonas__tabla-wrap { overflow-x: auto; }

.rdc-zonas__tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
}

.rdc-zonas__tabla th {
	padding: 14px 16px;
	text-align: left;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	background: var(--rdc-superficie-2);
	white-space: nowrap;
}

.rdc-zonas__tabla td {
	padding: 14px 16px;
	border-top: 1px solid var(--rdc-linea);
	vertical-align: top;
}

.rdc-zonas__tabla tbody tr:hover { background: var(--rdc-superficie-2); }

.rdc-zonas__nombre { font-weight: 700; color: var(--rdc-texto); white-space: nowrap; }
.rdc-zonas__detalle { color: var(--rdc-texto-suave); font-size: 0.86rem; min-width: 220px; }

.rdc-zonas__tabla th.rdc-zonas__col-costo,
.rdc-zonas__costo { text-align: right; white-space: nowrap; }

.rdc-zonas__costo { font-weight: 800; color: var(--rdc-texto); font-variant-numeric: tabular-nums; }

.rdc-zonas__nota {
	margin: 16px 0 0;
	font-size: 0.82rem;
	color: var(--rdc-texto-tenue);
}

@media (max-width: 700px) {
	.rdc-zonas__tabla { font-size: 0.84rem; }
	.rdc-zonas__tabla th,
	.rdc-zonas__tabla td { padding: 10px 12px; }
	.rdc-zonas__detalle { min-width: 160px; }
}

/* --- Preguntas frecuentes --- */

.rdc-faq { margin-top: 48px; }

.rdc-faq__titulo { margin: 0 0 24px; }

.rdc-faq__item {
	border-bottom: 1px solid var(--rdc-linea);
}

.rdc-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 4px;
	background: none;
	border: 0;
	color: var(--rdc-texto);
	font-family: var(--rdc-cuerpo);
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	list-style: none;
}

/* <summary> trae su propio triángulo de apertura en Chrome/Firefox/Safari;
   se saca porque el ícono + de la derecha ya cumple esa función. */
.rdc-faq__pregunta::-webkit-details-marker { display: none; }
.rdc-faq__pregunta::marker { content: ""; }

.rdc-faq__pregunta .rdc-icono {
	flex: none;
	color: var(--rdc-rojo-claro);
	transition: transform var(--rdc-transicion);
}

.rdc-faq__item[open] .rdc-faq__pregunta .rdc-icono { transform: rotate(45deg); }

.rdc-faq__respuesta {
	padding: 0 4px 20px;
	color: var(--rdc-texto-suave);
	font-size: 0.92rem;
	max-width: 70ch;
}

.rdc-faq__respuesta p:last-child { margin-bottom: 0; }

/* --- Promociones --- */

.rdc-promos__intro {
	max-width: var(--rdc-ancho-texto);
	margin-bottom: 30px;
	color: var(--rdc-texto-suave);
}

/* --- Listas de precios (minorista y mayorista) --- */

.rdc-lista__fecha {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	margin: 0 0 22px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--rdc-texto-suave);
}

.rdc-lista__notas {
	max-width: var(--rdc-ancho-texto);
	margin-bottom: 24px;
	color: var(--rdc-texto-suave);
}

.rdc-lista__aviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: var(--rdc-ancho-texto);
	padding: 16px 18px;
	margin: 0 0 30px;
	background: rgba(217, 164, 65, 0.09);
	border: 1px solid rgba(217, 164, 65, 0.32);
	border-radius: var(--rdc-radio);
	color: var(--rdc-texto);
	font-size: 0.9rem;
}

.rdc-lista__aviso .rdc-icono { color: var(--rdc-dorado); margin-top: 2px; }

/* Controles: buscador a la izquierda, píldoras de categoría a la derecha. */
.rdc-lista__controles {
	display: grid;
	gap: 16px;
	padding: 20px;
	margin-bottom: 20px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	position: sticky;
	top: calc(var(--rdc-header-h) + 12px);
	z-index: 5;
}

.rdc-lista__buscador {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 14px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio);
}

.rdc-lista__buscador > .rdc-icono { color: var(--rdc-texto-tenue); flex: none; }

.rdc-lista__buscador .rdc-lista__input {
	flex: 1 1 auto;
	padding: 13px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
}

.rdc-lista__buscador .rdc-lista__input:focus { background: transparent; }
.rdc-lista__input::-webkit-search-cancel-button { display: none; }

.rdc-lista__limpiar {
	flex: none;
	padding: 6px;
	background: none;
	border: 0;
	color: var(--rdc-texto-tenue);
	cursor: pointer;
}

.rdc-lista__limpiar:hover { color: var(--rdc-texto); }
.rdc-lista__limpiar[hidden] { display: none; }

.rdc-lista__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.rdc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--rdc-superficie-2);
	border: 1px solid var(--rdc-linea);
	border-radius: 999px;
	color: var(--rdc-texto-suave);
	font-family: var(--rdc-cuerpo);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--rdc-transicion);
}

.rdc-chip:hover { border-color: var(--rdc-linea-fuerte); color: var(--rdc-texto); }

.rdc-chip.rdc-esta-activo {
	background: var(--rdc-rojo);
	border-color: var(--rdc-rojo);
	color: #fff;
}

.rdc-chip__cuenta {
	font-size: 0.72rem;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

.rdc-lista__contador {
	font-size: 0.85rem;
	color: var(--rdc-texto-tenue);
	margin: 0 0 22px;
}

.rdc-lista__seccion { margin-bottom: 36px; }
.rdc-lista__seccion[hidden] { display: none; }

.rdc-lista__categoria {
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--rdc-rojo);
}

/* La tabla scrollea sola en pantallas angostas en vez de estirar la página. */
.rdc-lista__tabla-wrap { overflow-x: auto; }

.rdc-lista__tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.rdc-lista__tabla th {
	padding: 10px 14px;
	text-align: left;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
	border-bottom: 1px solid var(--rdc-linea);
	white-space: nowrap;
}

.rdc-lista__tabla td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--rdc-linea);
	vertical-align: middle;
}

.rdc-lista__tabla tbody tr { transition: background var(--rdc-transicion); }
.rdc-lista__tabla tbody tr:hover { background: var(--rdc-superficie); }
.rdc-lista__tabla tbody tr[hidden] { display: none; }

.rdc-lista__producto a { font-weight: 600; color: var(--rdc-texto); }
.rdc-lista__producto a:hover { color: var(--rdc-rojo-claro); }

.rdc-lista__unidad {
	color: var(--rdc-texto-tenue);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* El th se declara con el selector completo porque `.rdc-lista__tabla th`
   (0,1,1) le gana a una clase suelta y dejaba el encabezado a la izquierda
   mientras los importes iban a la derecha. */
.rdc-lista__tabla th.rdc-lista__col-precio,
.rdc-lista__precio {
	text-align: right;
	white-space: nowrap;
}

.rdc-lista__precio {
	font-weight: 800;
	font-size: 1.02rem;
	font-variant-numeric: tabular-nums;
}

.rdc-lista__precio del {
	font-weight: 400;
	font-size: 0.86rem;
	color: var(--rdc-texto-tenue);
	text-decoration: line-through;
	margin-right: 6px;
}

.rdc-lista__precio ins { text-decoration: none; color: var(--rdc-rojo-claro); }

.rdc-lista__sin-resultados { padding: 60px 0; }

.rdc-lista__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 40px;
	padding: 28px;
	background: linear-gradient(160deg, var(--rdc-superficie-2), var(--rdc-superficie));
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
}

.rdc-lista__pie-titulo { font-size: 1.35rem; margin: 0 0 6px; }
.rdc-lista__pie-texto { color: var(--rdc-texto-suave); font-size: 0.92rem; margin: 0; }
.rdc-lista__pie-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 600px) {
	.rdc-lista__controles { position: static; padding: 14px; }
	.rdc-lista__tabla { font-size: 0.86rem; }
	.rdc-lista__tabla th,
	.rdc-lista__tabla td { padding: 10px 8px; }
	.rdc-lista__pie { flex-direction: column; align-items: flex-start; }
}

/* Impresión: una lista de precios se imprime y se lleva al mostrador. */
@media print {
	.rdc-anuncio,
	.rdc-header,
	.rdc-footer,
	.rdc-wsp,
	.rdc-lista__controles,
	.rdc-lista__pie,
	.rdc-migas { display: none !important; }

	body { background: #fff; color: #000; }

	.rdc-encabezado,
	.rdc-lista__categoria,
	.rdc-lista__producto a,
	.rdc-lista__precio { color: #000; }

	.rdc-lista__seccion { break-inside: avoid; }
	.rdc-lista__tabla td,
	.rdc-lista__tabla th { border-color: #ccc; color: #000; }
}

/* --- Entradas del blog --- */

.rdc-entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	padding: clamp(40px, 6vw, 72px) 0;
}

.rdc-entrada {
	display: flex;
	flex-direction: column;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: var(--rdc-radio-lg);
	overflow: hidden;
	transition: border-color var(--rdc-transicion), transform var(--rdc-transicion);
}

.rdc-entrada:hover { border-color: var(--rdc-linea-fuerte); transform: translateY(-3px); }

.rdc-entrada__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rdc-superficie-2); }
.rdc-entrada__media img { width: 100%; height: 100%; object-fit: cover; }

.rdc-entrada__cuerpo { padding: 22px; display: grid; gap: 8px; }

.rdc-entrada__fecha {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rdc-texto-tenue);
}

.rdc-entrada__titulo {
	font-family: var(--rdc-cuerpo);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	margin: 0;
}

.rdc-entrada__resumen { font-size: 0.88rem; color: var(--rdc-texto-suave); margin: 0; }

/* --- Estado vacío y 404 --- */

.rdc-vacio {
	text-align: center;
	padding: clamp(60px, 10vw, 120px) 0;
}

.rdc-vacio__icono {
	display: grid;
	place-items: center;
	width: 82px;
	height: 82px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	color: var(--rdc-texto-tenue);
}

.rdc-vacio__texto { color: var(--rdc-texto-suave); max-width: 46ch; margin: 0 auto 28px; }

.rdc-404 { font-size: clamp(6rem, 22vw, 14rem); line-height: 0.85; color: var(--rdc-superficie-3); margin: 0; }

/* ==========================================================================
   10. Pie y WhatsApp flotante
   ========================================================================== */

.rdc-footer {
	background: var(--rdc-fondo-alt);
	border-top: 1px solid var(--rdc-linea);
	padding: clamp(48px, 7vw, 80px) 0 28px;
	margin-top: auto;
}

.rdc-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(24px, 4vw, 48px);
	padding-bottom: 44px;
}

@media (max-width: 900px) {
	.rdc-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.rdc-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

.rdc-footer__lema {
	color: var(--rdc-texto-suave);
	font-size: 0.9rem;
	max-width: 34ch;
	margin: 18px 0 0;
}

.rdc-footer__redes { display: flex; gap: 10px; margin-top: 20px; }

.rdc-footer__redes a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--rdc-superficie);
	border: 1px solid var(--rdc-linea);
	border-radius: 50%;
	color: var(--rdc-texto-suave);
	transition: all var(--rdc-transicion);
}

.rdc-footer__redes a:hover { background: var(--rdc-rojo); border-color: var(--rdc-rojo); color: #fff; }

.rdc-footer__titulo {
	font-family: var(--rdc-cuerpo);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rdc-texto);
	margin: 0 0 18px;
}

.rdc-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
	font-size: 0.9rem;
	color: var(--rdc-texto-suave);
}

.rdc-footer__lista li { display: flex; align-items: flex-start; gap: 10px; }
.rdc-footer__lista .rdc-icono { color: var(--rdc-texto-tenue); margin-top: 4px; }
.rdc-footer__lista a:hover { color: var(--rdc-rojo-claro); }
.rdc-footer__hueco { width: 16px; flex: none; }

.rdc-footer__mapa {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--rdc-rojo-claro);
}

.rdc-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 26px;
	border-top: 1px solid var(--rdc-linea);
	font-size: 0.8rem;
	color: var(--rdc-texto-tenue);
}

.rdc-footer__legal p { margin: 0; }

.rdc-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rdc-wsp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 80;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	background: var(--rdc-verde);
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 8px 28px rgba(37, 211, 102, 0.35);
	transition: transform var(--rdc-transicion), background var(--rdc-transicion);
}

.rdc-wsp:hover { transform: scale(1.07); background: #1fb257; color: #fff; }

/* ==========================================================================
   Responsive general
   ========================================================================== */

@media (max-width: 1024px) {
	.rdc-tiras__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
	/* Por debajo de este ancho el menú horizontal no entra: pasa al panel. */
	.rdc-header__hamburguesa { display: inline-flex; }
	.rdc-header > .rdc-contenedor > .rdc-nav { display: none; }
	.rdc-header__marca { margin-right: auto; }
}

/* En pantallas angostas la cabecera no entra: hamburguesa + logotipo + tres
   acciones superaban los 375 px y desplazaban la página en horizontal. */
@media (max-width: 480px) {
	.rdc-header__inner { gap: 6px; }
	.rdc-header__marca { min-width: 0; }
	.rdc-logotipo__nombre { font-size: 1.15rem; }
	.rdc-logotipo__corona { font-size: 0.55rem; letter-spacing: 0.24em; }
	.rdc-header__marca img,
	.custom-logo { max-height: 40px; }
	.rdc-header__accion,
	.rdc-header__hamburguesa { width: 38px; height: 38px; }
	.rdc-anuncio { font-size: 0.72rem; }
}

@media (max-width: 600px) {
	.rdc-seccion__cabecera { flex-direction: column; align-items: flex-start; gap: 14px; }
	.rdc-productos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.rdc-card__cuerpo { padding: 14px; gap: 6px; }
	.rdc-card__acciones { padding: 0 14px 14px; flex-wrap: wrap; }
	.rdc-card__resumen { display: none; }
	/* flex-shrink en 1 (no 0): con 2 columnas la card mide menos que el
	   ancho natural de botones + input, y sin poder achicarse el selector
	   de cantidad se salía de la card (el botón "+" quedaba tapado por el
	   overflow:hidden de la card). min-width:0 es necesario además del
	   shrink porque un ítem flex no baja de su ancho de contenido si no
	   se lo pedís explícitamente. */
	.rdc-cantidad { flex: 1 1 auto; min-width: 0; }
	.rdc-cantidad .rdc-cantidad__input { flex: 1 1 auto; width: auto; min-width: 0; }
	.rdc-card__agregar { flex: 1 0 100%; }
	.rdc-tiras__grid { grid-template-columns: 1fr; }
	.rdc-hero { min-height: 74vh; }
	.rdc-wsp { width: 50px; height: 50px; right: 14px; bottom: 14px; }
	.woocommerce table.shop_table img { width: 52px; }
}

/* Bloqueo del scroll del fondo cuando hay un panel abierto. */
body.rdc-sin-scroll { overflow: hidden; }