/**
 * Reveex - Clases CSS para Elementor
 *
 * Utilidades reutilizables que se asignan desde:
 * Elementor → Avanzado → Clases CSS
 *
 * Convención de nombres: prefijo reveex-
 * Evitar !important salvo casos técnicos justificados.
 *
 * @package Reveex
 * @since   1.0.0
 */

/* ==========================================================================
   Layout
   ========================================================================== */

/** Sección base con posición relativa */
.reveex-section {
	position: relative;
}

/** Contenedor con ancho completo y centrado */
.reveex-container {
	width: 100%;
	margin-inline: auto;
}

/** Ocultar desbordamientos */
.reveex-overflow-hidden {
	overflow: hidden;
}

/** Posición relativa */
.reveex-position-relative {
	position: relative;
}

/** Altura mínima de pantalla completa */
.reveex-full-height {
	min-height: 100vh;
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

/** Texto visualmente oculto pero accesible para lectores de pantalla */
.reveex-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Texto
   ========================================================================== */

/** Texto centrado */
.reveex-text-center {
	text-align: center;
}

/** Texto alineado a la izquierda */
.reveex-text-left {
	text-align: left;
}

/** Texto alineado a la derecha */
.reveex-text-right {
	text-align: right;
}

/** Texto en mayúsculas */
.reveex-text-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   Flexbox
   ========================================================================== */

/** Contenedor flex */
.reveex-flex {
	display: flex;
}

/** Contenedor flex centrado */
.reveex-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

/** Contenedor flex con distribución entre elementos */
.reveex-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/** Flex wrap */
.reveex-flex-wrap {
	flex-wrap: wrap;
}

/** Dirección columna */
.reveex-flex-column {
	flex-direction: column;
}

/* ==========================================================================
   Grid
   ========================================================================== */

/** Grid de 2 columnas */
.reveex-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
}

/** Grid de 3 columnas */
.reveex-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}

/** Grid responsive: colapsa a 1 columna en móvil */
@media (max-width: 768px) {
	.reveex-grid-2,
	.reveex-grid-3 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Espaciado
   ========================================================================== */

/** Sin margen superior */
.reveex-mt-0 {
	margin-top: 0;
}

/** Sin margen inferior */
.reveex-mb-0 {
	margin-bottom: 0;
}

/** Sin padding */
.reveex-p-0 {
	padding: 0;
}

/* ==========================================================================
   Header Reveex
   ========================================================================== */

/**
 * Header construido en Elementor Pro (Theme Builder, `data-elementor-id="248"`).
 * Fuente única de verdad para el CSS del header: antes vivía repartido entre
 * un widget HTML embebido en la propia plantilla de Elementor y `main.css`;
 * desde 2026-08-01 vive solo aquí (pedido explícito del usuario), y el
 * widget HTML quedó vacío.
 *
 * Selectores: los contenedores (`elType: container`) SÍ reflejan en el HTML
 * la clase asignada en Elementor → Avanzado → Clases CSS (`reveex-header`,
 * `__topbar`, `__contacts`, `__search-wrap`, `__navbar`, `__logo-wrap`,
 * `__menu-wrap`, `__cta-wrap`). Los WIDGETS (icon-list, divider, button,
 * nav-menu, theme-site-logo), en cambio, tienen su `css_classes` guardado
 * correctamente en `_elementor_data` pero Elementor 4.2 no lo emite en el
 * HTML de salida — comprobado directamente contra la base de datos y el
 * HTML servido en producción el 2026-08-01 (probablemente relacionado con
 * el módulo `atomic-widgets` presente en esta versión). Por eso, para
 * widgets, se usa el tipo de widget que Elementor SIEMPRE genera
 * (`.elementor-widget-divider`, `.elementor-button`…) o el propósito real
 * del enlace (`[href^="tel:"]`, `[href^="mailto:"]`), siempre acotado bajo
 * el contenedor padre semántico — nunca el ID autogenerado del widget
 * (`elementor-element-XXXXXXXX`), que además de ser innecesario aquí,
 * cambiaría si el widget se borra y se recrea.
 */

/* Base */
/**
 * Verde oscuro de la paleta oficial (`#1e311d`, ver /docs/PALETA.md — rol
 * explícito "Fondos y overlays oscuros: header, footer, hero, secciones
 * CTA"), en versión translúcida — pedido explícito 2026-08-17 (cuarta
 * vuelta): cambiar el gris (compartido con el Footer, vuelta anterior) por
 * el verde de la paleta, manteniendo la transparencia. Mismo mecanismo de
 * siempre (cristal siempre visible, más opaco en `.is-scrolled`, ver más
 * abajo), solo cambia el tono base. `!important` en `background-color`: el
 * fondo real vive en el control "Fondo" del contenedor raíz en Elementor
 * (`background_background`/`background_color`), que compila a una regla
 * que carga después de este archivo y empataría/ganaría en especificidad —
 * mismo patrón de "empate de especificidad" ya documentado en este archivo
 * (ver Divider, dropdown tablet).
 */
.reveex-header {
	position: fixed;
	inset: 0 0 auto 0;
	width: 100%;
	z-index: 9999;
	background-color: rgba(30, 49, 29, 0.55) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0);
	/** Misma curva/duración para fondo, sombra y blur — antes solo el
	 * box-shadow animaba y el resto de los cambios (Top Bar, navbar) tenían
	 * sus propios tiempos, lo que se sentía como un "doble salto" al hacer
	 * scroll (reportado 2026-08-17). */
	transition: background-color 0.36s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.36s cubic-bezier(0.4, 0, 0.2, 1),
		backdrop-filter 0.36s cubic-bezier(0.4, 0, 0.2, 1);
	--reveex-header-focus: #2563eb;
}

/**
 * El Header fijo sale del flujo del documento: sin esto, el contenido de la
 * página arranca debajo del borde superior real y queda tapado por el
 * Header (2026-08-02, al activar `position:fixed` nativo en Elementor — ver
 * Position: fixed en el contenedor raíz, post 248). Reutiliza la misma
 * variable `--reveex-header-height` que `main.js` ya publica en `:root` para
 * el panel desplegable, así el espaciado se recalcula solo si el Header
 * cambia de alto (colapso del Top Bar al hacer scroll, breakpoints).
 */
body.reveex-theme {
	padding-top: var(--reveex-header-height, 60px);
	transition: padding-top 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	body.reveex-theme {
		transition: none;
	}
}

/**
 * Sesión iniciada (barra de administración de WordPress, 2026-10-15): WP
 * empuja el documento con `html { margin-top: 32px }` (46px en ≤782px), pero
 * el Header fijo seguía en `top:0` (Elementor, post 248) — quedaba tapado
 * por la barra y dejaba un hueco blanco de 32px entre el Header y el
 * contenido. Se baja el Header lo mismo que la barra. Selector de 3 clases
 * + `html body` para ganarle a `.elementor-248 .elementor-element.elementor-
 * element-4747f357 { top:0px }`, que carga después. Sin sesión no aplica.
 */
html body.admin-bar .reveex-header.elementor-element.e-con {
	top: 32px;
}

@media (max-width: 782px) {
	html body.admin-bar .reveex-header.elementor-element.e-con {
		top: 46px;
	}
}

.reveex-header,
.reveex-header * {
	box-sizing: border-box;
}

.reveex-header a:focus-visible,
.reveex-header button:focus-visible,
.reveex-header [role="button"]:focus-visible {
	outline: 2px solid var(--reveex-header-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Top bar */
.reveex-header__topbar {
	max-height: 80px;
	overflow: hidden;
	border-bottom-width: 0 !important; /* Elementor pinta este borde en el contenedor exterior full-width (no en `.e-con-inner`, que es el único que respeta el ancho "Boxed"); se anula y se repinta más abajo limitado a 1140px. */
	/** `min-height` va en la transición porque `.is-scrolled` también lo lleva a 0 (ver abajo); sin incluirlo aquí saltaba de golpe mientras el resto (max-height/padding/opacity) sí animaba — resultado: colapso brusco, no suave (reportado 2026-08-02). */
	transition: max-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
		min-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.36s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.reveex-header__topbar > .e-con-inner {
	position: relative;
}

/** Línea Top Bar → menú, limitada al ancho boxed real (1140px), no a toda la ventana. Blanca: sigue leyéndose bien sobre el verde oscuro de fondo, ver nota del bloque "Base" más arriba. */
.reveex-header__topbar > .e-con-inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
}

.reveex-header__contacts .elementor-icon-list-text {
	font-size: 13px;
	line-height: 1.2;
}

.reveex-header__contacts .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	min-height: 44px;
}

/** Evita el espaciado vertical que Elementor añade entre widgets hermanos (`--kit-widget-spacing`). */
.reveex-header__contacts .elementor-widget,
.reveex-header__contacts .elementor-icon-list-items,
.reveex-header__contacts .elementor-icon-list-item {
	margin: 0 !important;
}

/* Divider */
/**
 * El widget Divider de Elementor no tiene una opción nativa "vertical": en
 * vez de rotarlo (`transform: rotate()`, frágil con el motor de Elementor),
 * se oculta su estructura interna y el propio contenedor del widget hace de
 * línea real vía `::after` — estable, 1px de grosor, ~20px de alto,
 * centrado, sin aumentar la altura del Top Bar.
 *
 * Causa raíz verificada de por qué no se veía en producción (2026-08-01):
 * este archivo se enqueua ANTES que el CSS propio de Elementor en este
 * sitio (`reveex-elementor-utilities-css` va antes que `widget-divider-css`
 * en el `<head>` servido). Elementor trae su propia regla
 * `.e-con>.elementor-widget-divider{width:var(--container-widget-width,100%)}`
 * con la MISMA especificidad (2 clases) que `width: 1px` de aquí abajo — en
 * un empate de especificidad gana la regla que carga después, y esa es la
 * de Elementor. El resultado real era un divider a `width:100%` (no 1px),
 * que rompía el layout de la fila y ocultaba visualmente la línea. `!important`
 * aquí es el caso técnico justificado: no depende de un ID de Elementor, solo
 * neutraliza ese empate para esta propiedad concreta.
 */
.reveex-header__contacts .elementor-widget-divider {
	flex: 0 0 auto;
	width: 1px !important;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: 18px;
}

.reveex-header__contacts .elementor-widget-divider .elementor-divider {
	display: none;
}

/** Blanco de nuevo: ver nota del bloque "Base" más arriba. */
.reveex-header__contacts .elementor-widget-divider::after {
	content: "";
	display: block;
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.55);
}

/* Navbar */
.reveex-header__navbar {
	transition: min-height 0.36s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/** Escritorio 87px (58px +50%, pedido explícito 2026-08-17). `width:auto` + `object-fit:contain` respetan la proporción real de la imagen — el ancho lo decide el propio archivo, no un valor fijo. */
.reveex-header__logo-wrap .elementor-widget-theme-site-logo img {
	display: block;
	max-height: 87px;
	width: auto;
	object-fit: contain;
}

/**
 * Menú: la línea del ítem activo/hover no debe sobrepasar el título (reportado
 * 2026-08-17) — el "Puntero" nativo del widget Nav Menu de Elementor dibuja
 * su indicador sobre la caja completa del enlace (incluye el padding del
 * área de clic, más ancha que la palabra), vía un pseudo-elemento propio del
 * widget. Se oculta ese pseudo-elemento y se dibuja la línea con
 * `text-decoration` nativo en su lugar: por definición sigue el ancho real
 * del texto, nunca la caja — no depende de conocer el selector interno exacto
 * de Elementor. `elementor-item-active`/`[aria-current="page"]` cubren los
 * dos patrones más comunes que usa Elementor para el ítem activo; confirmar
 * contra el real vía MCP cuando esté autorizado.
 */
.reveex-header__menu-wrap a::after,
.reveex-header__menu-wrap a::before {
	display: none !important;
}

.reveex-header__menu-wrap a {
	text-decoration-line: none;
}

.reveex-header__menu-wrap a:hover,
.reveex-header__menu-wrap a:focus-visible,
.reveex-header__menu-wrap a.elementor-item-active,
.reveex-header__menu-wrap a[aria-current="page"] {
	text-decoration-line: underline;
	text-decoration-color: #c8dd69;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/**
 * Submenú "Conócenos" (Quiénes somos / Investigación y desarrollo): caía en
 * el blanco por defecto del widget Nav Menu de Elementor Pro — pedido
 * explícito 2026-08-21 pasarlo al verde oscuro de la paleta oficial
 * (`#1e311d`, ver /docs/PALETA.md, regla 5: "ítem de un menú desplegable" →
 * hover en superposición blanca translúcida, no un segundo verde). Selector
 * verificado contra el CSS real del plugin
 * (`elementor-pro/assets/css/widget-nav-menu.min.css`): el `<ul>` anidado
 * del submenú, en la variante de escritorio (`.elementor-nav-menu--main`),
 * NO trae una clase propia — su fondo lo pone el control de estilo del
 * widget (compila en el CSS generado por post, con selector de ID, más
 * específico que esto), de ahí el `!important`. `.elementor-sub-item` (los
 * enlaces hijos) sí es una clase real y global del plugin, no acotada a
 * `--main`, por lo que el mismo criterio de color aplica igual si el
 * desplegable se ve en tablet/móvil dentro del panel de la hamburguesa.
 */
.reveex-header__menu-wrap .elementor-nav-menu--main .elementor-nav-menu ul {
	background-color: #1e311d !important;
}

.reveex-header__menu-wrap .elementor-nav-menu--main .elementor-nav-menu ul a,
.reveex-header__menu-wrap .elementor-sub-item {
	color: #ffffff !important;
}

.reveex-header__menu-wrap .elementor-sub-item:hover,
.reveex-header__menu-wrap .elementor-sub-item:focus,
.reveex-header__menu-wrap .elementor-sub-item.elementor-item-active,
.reveex-header__menu-wrap .elementor-sub-item.highlighted {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}

/* Sticky */
/**
 * `main.js` alterna `.reveex-header.is-scrolled` sobre `.reveex-header` al
 * hacer scroll, con una banda de histéresis (activa >80px, desactiva <40px)
 * en vez de un único umbral a 20px — evita que la clase oscile con
 * micro-scrolls cerca del punto de cambio (antes vivía en un `<script>`
 * embebido en Elementor; ahora vive en el tema, un único listener, sin
 * duplicados).
 *
 * Misma tonalidad (verde oscuro `#1e311d` de la paleta) que el estado base,
 * más opaco y con blur mayor para separar el Header del contenido al hacer
 * scroll — nunca cambia de color, solo de opacidad/blur, mismo criterio ya
 * pedido antes ("al hacer scroll también debe tener la misma tonalidad").
 * `!important` en `background-color`: mismo motivo que el estado base de
 * arriba.
 */
.reveex-header.is-scrolled {
	background-color: rgba(30, 49, 29, 0.92) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35);
}

/**
 * Texto/íconos siempre blancos — el Header es verde oscuro en todo
 * momento, así que no hace falta invertir color según el scroll. Incluye
 * el Top Bar (contactos + separadores) y el ícono hamburguesa. También
 * cubre estos mismos elementos dentro del panel desplegable de
 * mobile/tablet (`.reveex-header__responsive-meta`, más abajo), que ahora
 * comparte el mismo verde oscuro — pedido explícito del usuario ("debe ser
 * todo igual, no se puede perder el color de la tipografía"). El logo en sí
 * (widget Site Logo, imagen) NO se toca — si es una imagen clara, confirmar
 * que se siga viendo bien sobre este verde, pendiente visual del usuario.
 * `!important`: mismo empate de especificidad contra los colores propios de
 * los widgets Nav Menu / Icon List en Elementor.
 */
.reveex-header__menu-wrap a,
.reveex-header__menu-wrap .elementor-menu-toggle,
.reveex-header__contacts,
.reveex-header__contacts a,
.reveex-header__contacts .elementor-icon-list-text {
	color: #ffffff !important;
	fill: #ffffff !important;
}

.reveex-header.is-scrolled .reveex-header__topbar {
	max-height: 0 !important;
	min-height: 0 !important;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	pointer-events: none;
}

.reveex-header.is-scrolled .reveex-header__navbar {
	min-height: 60px !important;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}

/* CTA */
/**
 * Solo el efecto (glow sutil + micro-escala) va en CSS; color, tipografía,
 * padding, bordes, radio, márgenes, enlace y texto del botón siguen 100%
 * editables desde Elementor (Estilo del widget Button).
 */
/**
 * Efecto reforzado 2026-08-17 (pedido explícito: "que tenga un efecto para
 * llamar la atención del usuario") — el anillo pulsante ya existía pero era
 * muy sutil (blanco, sin variación de tamaño). Ahora combina un anillo en
 * lima (`#c8dd69`, acento del Design System para focus/hover decorativos,
 * ver /docs/PALETA.md) con una micro-respiración de escala, más perceptible
 * sin llegar a ser ruidoso. Sigue siendo solo el efecto: color, tipografía,
 * padding, bordes, radio, márgenes, enlace y texto del botón siguen 100%
 * editables desde Elementor (Estilo del widget Button).
 */
.reveex-header__cta-wrap .elementor-button {
	position: relative;
	animation: reveex-header-cta-glow 2.6s ease-in-out infinite;
}

.reveex-header__cta-wrap .elementor-button:hover,
.reveex-header__cta-wrap .elementor-button:focus-visible {
	animation-play-state: paused;
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 0 0 7px rgba(200, 221, 105, 0.35);
}

@keyframes reveex-header-cta-glow {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(200, 221, 105, 0.5);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(200, 221, 105, 0);
		transform: scale(1.035);
	}
}

/* Responsive tablet (≤1024px, breakpoint Tablet de Elementor en este kit) */
@media (max-width: 1024px) {
	/**
	 * El Top Bar se oculta por completo; su contenido (teléfono, correo) se
	 * reubica dentro del panel desplegable del menú — ver más abajo y
	 * `main.js`. El buscador no se reubica: no forma parte de lo pedido y
	 * ya se oculta en mobile vía visibilidad nativa de Elementor.
	 */
	.reveex-header__topbar {
		display: none !important;
	}

	/**
	 * Logo e ícono hamburguesa en una sola fila, sin envolver.
	 *
	 * Causa raíz verificada (2026-08-01) de por qué la hamburguesa no
	 * quedaba fija a la derecha: TODAS las propiedades de esta regla
	 * compiten con reglas propias de Elementor que cargan después de este
	 * archivo en este sitio (`reveex-elementor-utilities-css` va antes que
	 * `elementor-frontend-css` en el `<head>`) — `.e-con.e-flex>.e-con-inner`
	 * (3 clases) fija `flex-direction`/`flex-wrap`/`align-items`/
	 * `justify-content` con MÁS especificidad que esta regla (2 clases), y
	 * `.e-con>.e-con-inner{display:var(--display);width:100%}` empata en
	 * especificidad y gana por cargar después. En la práctica, el
	 * `flex_wrap_tablet`/`flex_wrap_mobile:"wrap"` nativo de Elementor
	 * seguía activo y envolvía logo/menú en varias filas, empujando la
	 * hamburguesa fuera de su sitio. `!important` es el caso técnico
	 * justificado: sin él, esta regla completa era inerte.
	 */
	.reveex-header__navbar > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.reveex-header__logo-wrap {
		flex: 0 1 auto;
		width: auto !important; /* empata con `.e-con{width:var(--width)}` (misma causa raíz de arriba); gana por orden de carga sin esto. */
	}

	/** Tablet: 72px (48px +50%, pedido explícito 2026-08-17) — intermedio entre escritorio (87px) y móvil (57px, ver bloque ≤767px). */
	.reveex-header__logo-wrap .elementor-widget-theme-site-logo img {
		max-height: 72px;
	}

	.reveex-header__menu-wrap {
		flex: 0 0 auto;
		width: auto !important; /* misma causa raíz: empata con `.e-con{width:var(--width)}`. */
		margin-left: auto !important; /* misma causa raíz: empata con `.e-con{margin-inline-start:var(--margin-left)}`. */
	}

	/** El CTA exterior se oculta: se reubica dentro del panel desplegable. */
	.reveex-header__cta-wrap {
		display: none;
	}

	/**
	 * Panel desplegable a todo el ancho del viewport, anclado justo debajo
	 * de la fila del header (no del 50%/64% de su contenedor padre, que es
	 * lo que causaba el panel "partido a la mitad"). `--reveex-header-height`
	 * la fija `main.js` con la altura real medida del header.
	 *
	 * `position: fixed` necesita `!important`: Elementor Pro trae su propia
	 * regla `.elementor-nav-menu__container.elementor-nav-menu--dropdown
	 * {position:absolute;z-index:9997}` (2 clases, misma especificidad que
	 * esta regla) en `widget-nav-menu.min.css`, que carga después de este
	 * archivo — sin `!important`, el panel se quedaba en `position:absolute`
	 * (el bug real detrás de la superposición sobre el logo y la X).
	 *
	 * `.elementor-nav-menu__container` es obligatorio en el selector (no
	 * basta `.elementor-nav-menu--dropdown` solo): desde que "Conócenos"
	 * tiene submenú (2026-08-21), Elementor reutiliza la MISMA clase
	 * `elementor-nav-menu--dropdown` en el `<ul class="sub-menu
	 * elementor-nav-menu--dropdown">` del submenú de escritorio — sin la
	 * clase `__container` de por medio, ese `<ul>` (que aparece antes en el
	 * DOM que el panel real) también matcheaba esta regla y se convertía en
	 * un segundo overlay `position:fixed` a todo el ancho. Verificado
	 * contra el HTML real servido por `rv.papayadev.cl`, no supuesto.
	 */
	.reveex-header__menu-wrap .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		left: 0;
		right: 0;
		/**
		 * `!important` obligatorio: el propio widget Nav Menu de Elementor Pro
		 * fija `top` (y `--menu-height`/`width`/`left`) por JavaScript como
		 * estilo inline al abrir el panel (confirmado 2026-08-02 inspeccionando
		 * el elemento real en tablet: `style="top: 33px; ..."`) — un inline sin
		 * `!important` siempre gana sobre cualquier regla de hoja de estilos,
		 * sin importar especificidad. 65px es la altura real del Header en
		 * este breakpoint (Top Bar oculto, solo navbar), confirmada visualmente.
		 */
		top: 65px !important;
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-radius: 0;
		/** Mismo verde oscuro `#1e311d` que el resto del Header (guardado originalmente en Elementor — el control nativo "Fondo del desplegable" del widget Nav Menu no compila a CSS en esta build, mismo bug que `css_classes` en widgets, ver comentario arriba). Pasó por gris (`#6b6b6b`, igual al Footer) entre "2026-08-17 (3)" y esta vuelta; el usuario pidió volver a verde manteniendo la transparencia del resto del Header — este panel en particular no es translúcido (Elementor no compila blur/alpha en este control), pero comparte el mismo tono sólido. */
		background-color: #1e311d;
		box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
	}

	/* Con sesión iniciada el Header baja la altura de la barra de
	   administración (ver `body.admin-bar` arriba): el panel también. */
	body.admin-bar .reveex-header__menu-wrap .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		top: calc(65px + 32px) !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar .reveex-header__menu-wrap .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		top: calc(65px + 46px) !important;
	}
}

/* Responsive mobile (≤767px) */
@media (max-width: 767px) {
	/** 57px (38px +50%, pedido explícito 2026-08-17). */
	.reveex-header__logo-wrap .elementor-widget-theme-site-logo img {
		max-height: 57px;
	}
}

/**
 * Buscador dentro del panel del menú (tablet/móvil, ≤1024px) — pedido
 * explícito 2026-08-21, propuesta "A" aprobada por el usuario (maqueta
 * previa en artifact). El Top Bar de escritorio (`reveex-header__topbar`)
 * se oculta por completo en este breakpoint, así que el buscador
 * desaparecía del todo; ahora `main.js` mueve (nunca clona) el nodo real
 * `.reveex-header__search-wrap` como PRIMER bloque del desplegable, antes
 * de los enlaces de navegación — mismo mecanismo ya usado para
 * Teléfono/Correo/Contacto (ver más abajo), aplicado en sentido inverso
 * (se inserta al principio, no al final).
 */
.reveex-header__responsive-search {
	display: none;
}

.reveex-header__menu-wrap .elementor-nav-menu--dropdown.elementor-nav-menu__container .reveex-header__responsive-search {
	display: block;
	padding: 16px 20px 4px;
}

.reveex-header__responsive-search .reveex-header__search-wrap {
	width: 100%;
}

/**
 * `/docs/ESTILOS.md` → "Componente: Header" documenta que el widget del
 * buscador tiene visibilidad responsive nativa de Elementor
 * (`elementor-hidden-phone`, oculto ≤767px), configurada cuando el
 * buscador solo existía en el Top Bar de escritorio. Antes era inofensiva
 * (el Top Bar entero ya se ocultaba en ≤1024px, superset). Ahora que el
 * nodo se mueve dentro del panel visible, esa clase nativa volvería a
 * pisar el `display` real y dejaría el buscador invisible solo en móvil
 * (no en tablet, rango que esa clase no cubre) — sin `!important` de por
 * medio en la regla de Elementor (`.elementor .elementor-hidden-phone`,
 * ver `elementor/assets/css/frontend.css`), así que este `!important`
 * basta para neutralizarla, sin depender de conocer si la clase sigue
 * presente en el widget real.
 */
.reveex-header__responsive-search .reveex-header__search-wrap,
.reveex-header__responsive-search .elementor-hidden-phone,
.reveex-header__responsive-search .elementor-hidden-tablet,
.reveex-header__responsive-search .elementor-hidden-mobile {
	display: block !important;
}

/* Top Bar responsive (teléfono, correo, CTA) integrado al final del menú desplegable */
/**
 * Reemplaza al antiguo `.reveex-mobile-contact` (2026-08-01): mismo
 * mecanismo (mover nodos reales, nunca clonarlos ni duplicarlos), pero ya
 * no es un bloque visualmente independiente — se inserta como última
 * sección del propio panel `.elementor-nav-menu--dropdown`, después de los
 * enlaces de navegación, separado por una línea divisora horizontal, y en
 * una sola fila "Teléfono | Correo | Contacto" con separadores verticales
 * (mismo lenguaje visual que el Top Bar de escritorio).
 *
 * `main.js` mueve (nunca clona) `.reveex-header__contacts` (que ya trae
 * teléfono, su propio divider y correo en fila) y `.reveex-header__cta-wrap`
 * reales dentro de `.reveex-header__responsive-meta`, creado e insertado al
 * final del desplegable solo en ≤1024px, y los devuelve a su lugar original
 * al cerrar/superar el breakpoint — así no hay información duplicada entre
 * el Top Bar/CTA de escritorio y el menú responsive.
 *
 * Se evaluó primero resolver esto 100% con Elementor nativo (contenedor +
 * visibilidad responsive), pero el widget Nav Menu de Elementor Pro es
 * atómico (su desplegable no admite contenido anidado) — no hay forma de
 * lograr "aparece/desaparece junto con el menú" sin mover el bloque por
 * JS. Los widgets en sí (icon-lists, botón) siguen siendo 100% reales y
 * editables desde Elementor; solo su posición final en el DOM se ajusta
 * por script.
 */
.reveex-header__responsive-meta {
	display: none;
}

.reveex-header__menu-wrap .elementor-nav-menu--dropdown.elementor-nav-menu__container .reveex-header__responsive-meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 20px 22px;
}

/** Línea horizontal blanca: separa los enlaces de navegación del bloque inferior, acotada al ancho interno del panel (no toca los bordes del viewport gracias al padding del propio panel). */
hr.reveex-header__responsive-divider {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.85);
	flex: 0 0 auto;
}

/** Fila "Teléfono | Correo | Contacto", centrada y distribuida de forma equilibrada; envuelve solo si el ancho no alcanza (móvil muy estrecho). */
.reveex-header__responsive-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/** El contenedor de contactos ya trae teléfono, su propio divider (ver arriba) y correo en fila; solo se neutraliza su ancho nativo (100% en mobile) para que conviva con el CTA en la misma fila. */
.reveex-header__responsive-row .reveex-header__contacts {
	width: auto;
	flex: 0 1 auto;
}

/** Separador vertical entre el grupo Teléfono/Correo y el botón Contacto — mismo trazo que el divider del Top Bar. */
span.reveex-header__responsive-divider {
	display: block;
	flex: 0 0 auto;
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.85);
}

.reveex-header__responsive-row .reveex-header__cta-wrap {
	width: auto;
	flex: 0 0 auto;
}

.reveex-header__responsive-meta .elementor-button {
	justify-content: center;
	animation: none;
}

/** Móvil estrecho: reduce espaciados y tipografía sin perder claridad ni cortar contenido. */
@media (max-width: 480px) {
	.reveex-header__responsive-row {
		gap: 10px;
	}

	.reveex-header__responsive-row .reveex-header__contacts .elementor-icon-list-text {
		font-size: 12px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.reveex-header,
	.reveex-header * {
		transition: none !important;
		animation: none !important;
	}
}

/**
 * Autocompletado del buscador (2026-08-10, ver /docs/CAMBIOS.md).
 *
 * `position: fixed` (corregido 2026-08-17, no `absolute` anclado a
 * `reveex-header__search-wrap`): `search-autocomplete.js` agrega el
 * desplegable como hijo de `.reveex-header` en vez de `.reveex-header__
 * search-wrap`, porque ese contenedor vive dentro de `.reveex-header__
 * topbar`, que tiene `overflow: hidden` (necesario para animar su colapso
 * al hacer scroll) — recortaba visual y funcionalmente el desplegable,
 * reportado por el usuario ("no permite hacer la selección"). El JS calcula
 * `left`/`top`/`width` reales vía `getBoundingClientRect()` de
 * `reveex-header__search-wrap` y los aplica como estilo inline en cada
 * apertura — coherente con que el Header también es `position: fixed`.
 */
.reveex-header__search-wrap {
	position: relative;
}

.reveex-search-suggest {
	display: none;
	position: fixed;
	z-index: 10000;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 16px 40px -12px rgba(15, 26, 15, 0.35);
	overflow: hidden;
}

.reveex-search-suggest.is-open {
	display: block;
}

.reveex-search-suggest__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 320px;
	overflow-y: auto;
}

.reveex-search-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 6px;
	text-decoration: none;
	color: #16241c;
}

.reveex-search-suggest__item:hover,
.reveex-search-suggest__item.is-active {
	background: #f0f3ee;
}

.reveex-search-suggest__thumb {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	object-fit: cover;
	flex: 0 0 auto;
	background: #f0f3ee;
}

.reveex-search-suggest__body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.reveex-search-suggest__name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.reveex-search-suggest__name mark {
	background: #c8dd69;
	color: #16241c;
	border-radius: 2px;
	padding: 0 1px;
}

.reveex-search-suggest__meta {
	font-size: 11.5px;
	color: #6b7a70;
	margin-top: 1px;
}

.reveex-search-suggest__empty {
	padding: 18px 14px;
	text-align: center;
	color: #6b7a70;
	font-size: 13px;
}

/* ==========================================================================
   Ficha de producto (WooCommerce Single Product)
   ========================================================================== */

/**
 * Ficha técnica de producto, construida en Elementor Pro Theme Builder
 * (Theme Builder → Single → Product) con los widgets nativos de WooCommerce
 * (Breadcrumbs, Product Images, Product Title, Product Short Description,
 * Product Content) más el widget genérico Loop Grid para "Productos
 * relacionados" (misma plantilla de tarjeta que el Home, `template_id=476`).
 * El catálogo no es una tienda: sin pestañas clásicas de WooCommerce, sin
 * valoraciones, sin sidebar de blog.
 *
 * Igual que en el Header: los widgets NO reflejan en el HTML la clase
 * asignada en Elementor → Avanzado → Clases CSS (bug de Elementor 4.2, ver
 * más arriba "Header Reveex"). Por eso cada widget va envuelto en su propio
 * Contenedor con clase `reveex-product-*` (los contenedores sí la reflejan),
 * y se apunta al widget hijo por el tipo que Elementor siempre genera
 * (`.elementor-widget-woocommerce-product-images`, `.woocommerce-breadcrumb`,
 * `.elementor-widget-heading`…), nunca por `css_classes` del widget.
 */

.reveex-product-page,
.reveex-product-page * {
	box-sizing: border-box;
}

/* Breadcrumb: franja de ancho completo (`reveex-product-breadcrumb-strip`),
   fondo suave, contenedor interno boxed 1140 (`reveex-product-breadcrumb-row`).
   Color/tipografía se configuran nativamente en el widget (controles
   `text_color`/`link_color`/`text_typography_*`) — aquí solo lo que
   Elementor no resuelve de forma nativa (margen, hover). */
.reveex-product-breadcrumb-row .woocommerce-breadcrumb {
	margin: 0;
}

.reveex-product-breadcrumb-row .woocommerce-breadcrumb a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.reveex-product-breadcrumb-row .woocommerce-breadcrumb a:hover {
	color: #276c27 !important;
}

/* Imagen del producto */
/**
 * La tarjeta premium (fondo blanco, radio 24px, sombra) ahora vive en el
 * Contenedor "Hero" (`reveex-product-main`, ajustado nativamente en
 * Elementor) que envuelve imagen + información como una sola composición
 * — ver `/docs/CAMBIOS.md` → "2026-08-02 (14)". Aquí solo el respaldo
 * suave detrás de la imagen (para que no quede "pegada" al blanco de la
 * tarjeta) y el tamaño uniforme vía `object-fit: contain` (nunca deforma).
 */
.reveex-product-gallery-col .woocommerce-product-gallery {
	background: #f7f8f7;
	border-radius: 14px;
	padding: 16px;
	overflow: hidden;
}

.reveex-product-gallery-col .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.reveex-product-gallery-col .woocommerce-product-gallery__image,
.reveex-product-gallery-col .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 460px;
}

.reveex-product-gallery-col .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 0.35s ease;
}

.reveex-product-gallery-col:hover .woocommerce-product-gallery__image img {
	transform: scale(1.035);
}

.reveex-product-gallery-col .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
}

.reveex-product-gallery-col .flex-control-thumbs li {
	list-style: none;
}

.reveex-product-gallery-col .flex-control-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: #ffffff;
	border-radius: 10px;
	border: 1px solid #ececec;
	padding: 6px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.reveex-product-gallery-col .flex-control-thumbs img.flex-active,
.reveex-product-gallery-col .flex-control-thumbs img:hover {
	border-color: #276c27;
}

/** No es e-commerce: el ribbon "Oferta" queda oculto aunque el widget lo genere. */
.reveex-product-gallery-col span.onsale {
	display: none;
}

@media (max-width: 1024px) {
	.reveex-product-gallery-col .woocommerce-product-gallery {
		padding: 14px;
	}

	.reveex-product-gallery-col .woocommerce-product-gallery__image,
	.reveex-product-gallery-col .woocommerce-product-gallery__image a {
		height: 380px;
	}
}

@media (max-width: 767px) {
	.reveex-product-gallery-col .woocommerce-product-gallery {
		padding: 12px;
		border-radius: 12px;
	}

	.reveex-product-gallery-col .woocommerce-product-gallery__image,
	.reveex-product-gallery-col .woocommerce-product-gallery__image a {
		height: 300px;
	}
}

/* Información del producto */
.reveex-product-info {
	max-width: 620px;
}

/** Tamaño/peso/color base ahora nativos en el widget (`typography_*`/`title_color`, `#1e311d`) — aquí solo lo que Elementor no resuelve nativamente por breakpoint. */
.reveex-product-info .elementor-widget-woocommerce-product-title .elementor-heading-title {
	letter-spacing: -0.4px;
	margin: 0;
}

@media (max-width: 1024px) {
	.reveex-product-info .elementor-widget-woocommerce-product-title .elementor-heading-title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.reveex-product-info .elementor-widget-woocommerce-product-title .elementor-heading-title {
		font-size: 24px;
	}
}

/* Categoría: badge, no enlace de texto */
.reveex-product-badge-wrap {
	display: inline-flex !important; /* Elementor fuerza `width:100%` en contenedores por defecto; el badge debe ajustarse a su contenido. */
	width: auto !important;
}

.reveex-product-badge-wrap .elementor-widget-text-editor {
	background: #276c27;
	color: #ffffff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 50px;
	line-height: 1;
}

.reveex-product-badge-wrap .elementor-widget-text-editor p {
	margin: 0;
	color: inherit;
	font: inherit;
}

.reveex-product-badge-wrap .elementor-widget-text-editor a {
	color: inherit;
	text-decoration: none;
}

/* Indicaciones (y Administración): tarjeta visual */
.reveex-product-indications {
	background: #f6f6f6;
	border-radius: 18px;
	padding: 28px 30px;
}

.reveex-product-indications .elementor-widget-woocommerce-product-short-description {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
}

.reveex-product-indications .elementor-widget-woocommerce-product-short-description p {
	margin: 0 0 12px;
}

.reveex-product-indications .elementor-widget-woocommerce-product-short-description p:last-child {
	margin-bottom: 0;
}

/** "Indicaciones:"/"Administración:" llegan como `<p><strong>Etiqueta:</strong></p>` sueltos (WordPress las separa vía `wpautop` al haber línea en blanco antes/después en el contenido). `:only-child` las distingue de negritas usadas dentro de una frase normal, sin marcarlas a mano. */
/** Divisor izquierdo sutil antes de cada etiqueta (Indicaciones/Administración): separa bloques sin depender de líneas horizontales de ancho completo. */
.reveex-product-indications .elementor-widget-woocommerce-product-short-description p > strong:only-child {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #276c27;
	margin-top: 20px;
	padding-left: 12px;
	border-left: 3px solid #276c27;
}

.reveex-product-indications .elementor-widget-woocommerce-product-short-description p:first-of-type > strong:only-child {
	margin-top: 0;
}

/** Ruido de datos encontrado en al menos un producto (Fluniveex 20ml): el título del producto viene duplicado dentro del campo de descripción corta. Se oculta sin tocar el contenido — ver CAMBIOS.md. */
.reveex-product-indications .elementor-widget-woocommerce-product-short-description h1,
.reveex-product-indications .elementor-widget-woocommerce-product-short-description h2,
.reveex-product-indications .elementor-widget-woocommerce-product-short-description .product_title {
	display: none;
}

/* Descripción: bloque técnico limpio, no pestaña clásica */
/** Tarjeta unificada "Información técnica": Composición/Presentación/Posología/Código
 * (`woocommerce-product-content`) + Indicaciones/Administración
 * (`woocommerce-product-short-description`, movida aquí el 2026-08-02 (15)
 * para que toda la info técnica viva en una sola ficha, no en dos tarjetas
 * separadas). Sin `max-width` acotado: es la tarjeta más densa de la
 * página, necesita todo el ancho disponible de la columna boxed. */
.reveex-product-description {
	width: 100%;
}

/** Tamaño/peso/color ahora nativos en el widget heading (`#1e311d`, 20px) — aquí solo el margen. */
.reveex-product-description .elementor-widget-heading .elementor-heading-title {
	margin: 0 0 16px;
}

.reveex-product-description .elementor-widget-woocommerce-product-content {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #333333;
}

.reveex-product-description .elementor-widget-woocommerce-product-content p {
	margin: 0 0 12px;
}

/** "Composición:"/"Posología:"/"Código:" — misma lógica que Indicaciones, mismo divisor izquierdo. */
.reveex-product-description .elementor-widget-woocommerce-product-content p > strong:only-child,
.reveex-product-description .elementor-widget-woocommerce-product-content p > b:only-child {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #276c27;
	margin-top: 22px;
	padding-left: 12px;
	border-left: 3px solid #276c27;
}

.reveex-product-description .elementor-widget-woocommerce-product-content p:first-of-type > strong:only-child,
.reveex-product-description .elementor-widget-woocommerce-product-content p:first-of-type > b:only-child {
	margin-top: 0;
}

/* CTA final: mismo lenguaje visual que el CTA general del sitio (verde oscuro, botón píldora blanco) */
.reveex-product-cta {
	background: linear-gradient(135deg, #1e311d, #1e311d);
	border-radius: 22px;
	padding: 46px 40px;
	text-align: center;
}

/** Tamaño/peso/color ahora nativos en el widget heading/text-editor — aquí solo margen/ancho. */
.reveex-product-cta .elementor-widget-icon {
	margin-bottom: 16px;
}

.reveex-product-cta .elementor-widget-heading .elementor-heading-title {
	margin: 0 0 12px;
}

.reveex-product-cta .elementor-widget-text-editor {
	max-width: 480px;
	margin: 0 auto 24px;
}

.reveex-product-cta .elementor-widget-text-editor p {
	line-height: 1.6;
	margin: 0;
}

.reveex-product-cta .elementor-button {
	background: #ffffff;
	color: #1e311d;
	border-radius: 18px;
	padding: 16px 38px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.reveex-product-cta .elementor-button:hover,
.reveex-product-cta .elementor-button:focus-visible {
	background: #c8dd69;
	color: #1e311d;
	transform: translateY(-4px);
	box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
	.reveex-product-cta {
		padding: 34px 22px;
		border-radius: 16px;
	}

	.reveex-product-cta .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* Productos relacionados: misma tarjeta que el Loop Grid del Home (template_id 476) */
.reveex-product-related .elementor-widget-heading .elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: #111111;
	margin: 0 0 24px;
}

.reveex-product-related .elementor-loop-container {
	align-items: stretch;
}

.reveex-product-related .e-loop-item {
	height: 100%;
}

@media (max-width: 767px) {
	.reveex-product-related .elementor-loop-container {
		row-gap: 18px !important;
	}
}

/* ==========================================================================
   Plantillas de contenido (Theme Builder): Single, Product Archive,
   Search Results, 404 — post 640, 647, 656, 664
   ========================================================================== */

/**
 * Migas de pan compartidas por todas las plantillas de contenido (menos la
 * 404, que no lleva). Mismo lenguaje visual que la miga de la Ficha de
 * producto (`reveex-product-breadcrumb-row`), pero apuntando al widget
 * nativo "Breadcrumbs" de Elementor Pro en vez de al de WooCommerce.
 *
 * Con Yoast SEO activo (requisito del proyecto), el widget "Breadcrumbs"
 * de Elementor Pro delega el render en `WPSEO_Breadcrumbs::breadcrumb()`
 * en vez de imprimir su propio markup — el resultado real en el sitio es
 * `<p id="breadcrumbs">`, no `.elementor-breadcrumbs` (confirmado
 * 2026-08-18 al construir la página Instalaciones: la regla anterior,
 * solo con `.elementor-breadcrumbs`, nunca coincidía y la miga salía sin
 * estilo, en la tipografía por defecto del navegador). Se mantiene
 * `.elementor-breadcrumbs` además de `#breadcrumbs` por si Yoast se
 * desactivara alguna vez y el widget cayera de vuelta a su markup nativo.
 */
.reveex-page-breadcrumb-row #breadcrumbs,
.reveex-page-breadcrumb-row .elementor-breadcrumbs {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	color: #7a7a7a;
}

.reveex-page-breadcrumb-row #breadcrumbs a,
.reveex-page-breadcrumb-row .elementor-breadcrumbs a {
	color: #7a7a7a;
	text-decoration: none;
	transition: color 0.2s ease;
}

.reveex-page-breadcrumb-row #breadcrumbs a:hover,
.reveex-page-breadcrumb-row .elementor-breadcrumbs a:hover {
	color: #276c27;
}

.reveex-page-breadcrumb-row #breadcrumbs .breadcrumb_last {
	color: #4a4a4a;
	font-weight: 500;
}

/* Single combinado (Entrada + Página): título + contenido, ancho de lectura acotado */
.reveex-page-content .elementor-widget-theme-post-title .elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #050505;
	margin: 0;
}

.reveex-page-content .elementor-widget-theme-post-content {
	max-width: 720px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: #333333;
}

@media (max-width: 767px) {
	.reveex-page-content .elementor-widget-theme-post-title .elementor-heading-title {
		font-size: 26px;
	}
}

/* Product Archive */
.reveex-archive-header .elementor-widget-theme-archive-title .elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 30px;
	color: #050505;
	margin: 0;
}

.reveex-archive-search-row .elementor-search-form {
	max-width: 420px;
}

.reveex-product-grid .elementor-loop-container {
	align-items: stretch;
}

/* Search Results */
.reveex-search-page .elementor-widget-theme-archive-title .elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: #050505;
	margin: 0;
}

.reveex-search-form-row .elementor-search-form {
	max-width: 560px;
}

.reveex-search-form-row .elementor-search-form__input {
	font-size: 16px;
	padding: 14px 18px;
}

/* 404 */
.reveex-404-page .elementor-widget-heading:first-of-type .elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	font-size: 96px;
	line-height: 1;
	color: #276c27;
	margin: 0;
}

.reveex-404-page .elementor-widget-text-editor {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	color: #333333;
	max-width: 480px;
}

.reveex-404-actions .elementor-button {
	border-radius: 18px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
}

@media (max-width: 767px) {
	.reveex-404-actions {
		flex-wrap: wrap;
	}

	.reveex-404-actions .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Hero Reveex + tarjetas (portada, post 10)
   ========================================================================== */

/**
 * El Hero (`reveex-hero-main`) y las 3 tarjetas (`reveex-feature-card`) ya
 * tenían su estructura y clases asignadas en Elementor (contenedores con
 * ancho boxed 1140px, overlay, radios, sombra nativa, animaciones de
 * entrada) pero sin ningún CSS propio del tema — 100% ajustes nativos de
 * Elementor hasta 2026-08-02. Mismo bug de `css_classes` en widgets que el
 * Header/Ficha de producto (ver arriba): las clases `reveex-hero-main__eyebrow`,
 * `__brand`, `__description` y `reveex-feature-card__link` están guardadas
 * en los widgets (heading/text-editor/button) pero Elementor 4.2 no las
 * emite en el HTML — confirmado contra el HTML real. Por eso aquí se apunta
 * al tag que cada heading realmente renderiza (`h1`/`div` según
 * "Tamaño de encabezado" nativo) y al tipo de widget
 * (`.elementor-widget-text-editor`, `.elementor-button`), acotado bajo el
 * contenedor padre real (`reveex-hero-main__copy`, `reveex-feature-card__body`).
 *
 * Imágenes pendientes: tanto el fondo del Hero como el de las 3 tarjetas
 * (`reveex-feature-card__image`) usan hoy el placeholder por defecto de
 * Elementor — no se reemplazan aquí (fuera de alcance sin pedido explícito
 * de imagen real), solo se prepara el CSS para cuando se asignen.
 */

.reveex-hero-main {
	position: relative;
}

/* "Laboratorios" — eyebrow, primer heading (h1) */
.reveex-hero-main__copy h1.elementor-heading-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0;
}

/* "REVEEX" — marca, segundo heading (Tamaño de encabezado nativo = "div") */
.reveex-hero-main__copy div.elementor-heading-title {
	font-size: clamp(42px, 7vw, 76px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	margin: 6px 0 0;
}

.reveex-hero-main__copy .elementor-widget-text-editor {
	margin-top: 18px;
}

.reveex-hero-main__copy .elementor-widget-text-editor p {
	font-size: 17px;
	line-height: 1.65;
	opacity: 0.94;
	margin: 0;
}

/* "Desde 1980..." — línea de cronología, escrita como <p class="reveex-hero-main__history">
   dentro del propio campo de texto del widget (no como control css_classes de Elementor,
   que en 4.2 no se emite en el HTML — ver nota superior de esta sección) */
.reveex-hero-main__copy .elementor-widget-text-editor p.reveex-hero-main__history {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 10px;
}

@media (max-width: 767px) {
	.reveex-hero-main__copy div.elementor-heading-title {
		letter-spacing: 0;
	}

	.reveex-hero-main__copy .elementor-widget-text-editor p {
		font-size: 15px;
	}

	.reveex-hero-main__copy .elementor-widget-text-editor p.reveex-hero-main__history {
		font-size: 12px;
	}
}

/* Tarjetas: hover, profundidad y consistencia (comparten un único estilo) */
.reveex-feature-card {
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveex-feature-card:hover,
.reveex-feature-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 22px 45px -16px rgba(0, 0, 0, 0.32);
}

.reveex-feature-card__image {
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveex-feature-card:hover .reveex-feature-card__image,
.reveex-feature-card:focus-within .reveex-feature-card__image {
	transform: scale(1.05);
}

.reveex-feature-card__body h3.elementor-heading-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
}

.reveex-feature-card__body .elementor-widget-text-editor p {
	font-size: 14.5px;
	line-height: 1.6;
}

/** Botón "Conocer más": flecha se desplaza al pasar el cursor/foco — mismo lenguaje de microinteracción que el CTA del Header. */
.reveex-feature-card__body .elementor-button-icon {
	transition: transform 0.25s ease;
}

.reveex-feature-card__body .elementor-button:hover .elementor-button-icon,
.reveex-feature-card__body .elementor-button:focus-visible .elementor-button-icon {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.reveex-feature-card,
	.reveex-feature-card__image,
	.reveex-feature-card__body .elementor-button-icon {
		transition: none !important;
	}

	.reveex-feature-card:hover,
	.reveex-feature-card:focus-within {
		transform: none;
	}
}

/* ==========================================================================
   Investigación y Desarrollo (portada, post 10)
   ========================================================================== */

/**
 * Panel `reveex-investigacion__panel` (texto | imagen) ya construido con
 * ajustes nativos de Elementor — solo se refuerza jerarquía tipográfica,
 * profundidad y una microinteracción de imagen consistente con el resto
 * del sitio. Mismo bug de `css_classes` en widgets: se apunta al tag/tipo
 * de widget real bajo los contenedores `reveex-investigacion__content` e
 * `__image` (sí se emiten, por ser contenedores).
 */

.reveex-investigacion__panel {
	transition: box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0);
}

.reveex-investigacion__panel:hover {
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
}

.reveex-investigacion__content h2.elementor-heading-title {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.reveex-investigacion__content .elementor-widget-text-editor p {
	font-size: 15.5px;
	line-height: 1.7;
}

.reveex-investigacion__content .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.reveex-investigacion__content .elementor-button {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.reveex-investigacion__content .elementor-button:hover,
.reveex-investigacion__content .elementor-button:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 24px -12px rgba(200, 234, 77, 0.65);
}

.reveex-investigacion__image .elementor-widget-image img {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveex-investigacion__panel:hover .elementor-widget-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.reveex-investigacion__panel,
	.reveex-investigacion__content .elementor-button,
	.reveex-investigacion__image .elementor-widget-image img {
		transition: none !important;
	}

	.reveex-investigacion__content .elementor-button:hover,
	.reveex-investigacion__panel:hover .elementor-widget-image img {
		transform: none;
	}
}

/* ==========================================================================
   Producción y Control de Calidad (portada, post 10)
   ========================================================================== */

/**
 * Mismo patrón que "Investigación y Desarrollo" (panel texto | imagen,
 * imagen real ya asignada) — se reutiliza la misma mejora de jerarquía,
 * profundidad y microinteracción para mantener consistencia visual entre
 * ambas secciones, en vez de inventar un tratamiento distinto.
 */

.reveex-production-quality__panel {
	transition: box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0);
}

.reveex-production-quality__panel:hover {
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.22);
}

.reveex-production-quality__content h2.elementor-heading-title {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.reveex-production-quality__content .elementor-widget-text-editor p {
	font-size: 15.5px;
	line-height: 1.7;
}

.reveex-production-quality__content .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.reveex-production-quality__image .elementor-widget-image img {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveex-production-quality__panel:hover .elementor-widget-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.reveex-production-quality__panel,
	.reveex-production-quality__image .elementor-widget-image img {
		transition: none !important;
	}

	.reveex-production-quality__panel:hover .elementor-widget-image img {
		transform: none;
	}
}

/* ==========================================================================
   Certificación E-Trust ID (portada, post 10)
   ========================================================================== */

/**
 * Mismo patrón de panel que Investigación/Producción, pero el lado
 * "imagen" es una grilla de 4 logos (`reveex-etrust__logos-grid`), no una
 * sola foto. Estructura y orden de las imágenes sin tocar (pedido
 * explícito) — el único ajuste de orden es visual y solo en móvil (ver
 * más abajo), vía `order` de flexbox, sin mover nada en el HTML/Elementor.
 *
 * 2026-08-24: título/texto reescritos ("Acreditaciones", 6 párrafos) y
 * columnas reproporcionadas (logos 45%→32%, texto 55%→68%, ver
 * `_elementor_data`) para darle más aire al texto ahora más largo. Se quitó
 * la tarjeta blanca de cada logo (pedido explícito) — quedan las imágenes
 * solas sobre el panel gris, mismo efecto de escala de grises → color, con
 * la elevación al hover movida de la tarjeta a la propia imagen.
 *
 * 2026-08-24 (2): el 32%/68% de arriba rompió la grilla 2×2 de logos en el
 * sitio real (ya no entraban 2 por fila con su ancho/gap, se apilaron en
 * una columna) — se revierte a 50%/50% en ambas columnas (escritorio y
 * tablet). El texto completo (6 párrafos) no cabía cómodo ni a 68%, así
 * que el widget de texto (`2a834450`) pasó de `text-editor` a un widget
 * `html` con acordeón propio del tema: 3 párrafos siempre visibles +
 * "Leer más" que revela los otros 3 (`.reveex-acreditaciones*` abajo). Por
 * eso el selector de tipografía del texto cambia de
 * `.elementor-widget-text-editor` a `.elementor-widget-html`.
 */

.reveex-etrust__content h2.elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.reveex-etrust__content .elementor-widget-html .reveex-acreditaciones p {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
	margin: 0 0 14px;
	color: #1E1E1E;
}

.reveex-etrust__content .elementor-widget-html .reveex-acreditaciones p:last-child {
	margin-bottom: 0;
}

/** Acordeón "Leer más" — checkbox-hack en CSS puro, sin JS. El checkbox y el label viven en el propio HTML del widget (`2a834450`); ver `_elementor_data`. */
.reveex-acreditaciones__toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.reveex-acreditaciones__hidden {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.reveex-acreditaciones__toggle:checked ~ .reveex-acreditaciones__hidden {
	max-height: 600px;
	opacity: 1;
}

.reveex-acreditaciones__readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 0;
	border: none;
	background: none;
	color: #276C27;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.reveex-acreditaciones__readmore:hover,
.reveex-acreditaciones__toggle:checked ~ .reveex-acreditaciones__readmore {
	color: #1E311D;
}

.reveex-acreditaciones__readmore-close {
	display: none;
}

.reveex-acreditaciones__toggle:checked ~ .reveex-acreditaciones__readmore .reveex-acreditaciones__readmore-open {
	display: none;
}

.reveex-acreditaciones__toggle:checked ~ .reveex-acreditaciones__readmore .reveex-acreditaciones__readmore-close {
	display: inline;
}

.reveex-acreditaciones__chevron {
	width: 12px;
	height: 12px;
	transition: transform 0.3s ease;
}

.reveex-acreditaciones__toggle:checked ~ .reveex-acreditaciones__readmore .reveex-acreditaciones__chevron {
	transform: rotate(180deg);
}

/** Logos en escala de grises por defecto, color completo al pasar el cursor — tratamiento habitual para logos de certificadoras/aliados. Sin tarjeta: la imagen flota directo sobre el panel gris. */
.reveex-etrust__logo-card img {
	filter: grayscale(1) opacity(0.75);
	transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveex-etrust__logo-card:hover img {
	filter: grayscale(0) opacity(1);
	transform: translateY(-3px);
}

/** Regla permanente del proyecto: texto antes que imagen en móvil. Este panel tiene los logos primero en el DOM (estructura sin tocar, pedido explícito) — se reordena solo visualmente con `order`, sin mover nada. */
@media (max-width: 767px) {
	.reveex-etrust__logos {
		order: 2;
	}

	.reveex-etrust__content {
		order: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveex-etrust__logo-card img {
		transition: none !important;
	}

	.reveex-etrust__logo-card:hover img {
		transform: none;
	}

	.reveex-acreditaciones__hidden,
	.reveex-acreditaciones__chevron {
		transition: none !important;
	}
}

/* ==========================================================================
   Exportación (portada, post 10)
   ========================================================================== */

/**
 * Mismo patrón de panel que "Acreditaciones".
 *
 * 2026-08-24: contenido reescrito (4 párrafos) y layout invertido — el mapa
 * (`reveex-exportacion__map`) se eliminó por completo y la grilla de 8
 * logos (`reveex-exportacion__logos-grid`) pasó a ocupar esa misma columna
 * derecha (50%/50%, antes 46%/54% en tablet), en vez de vivir apilada
 * debajo del texto en la columna izquierda. El texto sigue siendo el
 * primer hijo del panel, así que el orden móvil (texto antes que imagen)
 * se sigue cumpliendo de origen, sin `order` de flexbox.
 *
 * Se quitó también la tarjeta blanca de cada logo (pedido explícito,
 * mismo tratamiento que "Acreditaciones") — quedan las 8 imágenes solas
 * sobre el panel gris. Anchos individuales de cada logo sin tocar (siguen
 * en 20% con gap de 14px, lo que ya garantiza 4 por fila en escritorio y
 * tablet — 5 × 20% no deja espacio para el gap y el 5º ítem siempre baja
 * de línea); en móvil se mantienen los 45% originales (2 por fila) en vez
 * de forzar 4, más legible para logos de este tamaño en una pantalla de
 * 390px.
 */

.reveex-exportacion__left h2.elementor-heading-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.reveex-exportacion__left > .elementor-widget-text-editor p {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
}

/** Logos en escala de grises por defecto, color completo al pasar el cursor — mismo tratamiento que "Acreditaciones". Sin tarjeta: la imagen flota directo sobre el panel gris. */
.reveex-exportacion__logo-card img {
	filter: grayscale(1) opacity(0.75);
	transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveex-exportacion__logo-card:hover img {
	filter: grayscale(0) opacity(1);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.reveex-exportacion__logo-card img {
		transition: none !important;
	}

	.reveex-exportacion__logo-card:hover img {
		transform: none;
	}
}

/* ==========================================================================
   CTA "¿Necesitas asesoría técnica o comercial?" (portada, post 10)
   ========================================================================== */

/**
 * Pedido explícito: convertirlo en uno de los elementos visuales más
 * importantes de la página. El degradado de fondo (135deg, mismos verdes
 * que el CTA final de la ficha de producto) y el `overflow:hidden` ya se
 * configuraron nativos en Elementor; aquí se agrega profundidad (sombra +
 * resplandor decorativo sutil) y la jerarquía tipográfica del título.
 */

.reveex-cta {
	position: relative;
	box-shadow: 0 30px 60px -30px rgba(30, 49, 29, 0.55);
}

/** Resplandor decorativo sutil, puramente CSS (sin depender de un ícono/imagen). */
.reveex-cta::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 60%;
	padding-bottom: 60%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.reveex-cta__title.elementor-heading-title {
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.3px;
}

.reveex-cta .elementor-widget-text-editor p {
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.reveex-cta::before {
		display: none;
	}
}

/* ==========================================================================
   Footer (sitewide, post 195)
   ========================================================================== */

/**
 * Mejora completa pedida por el usuario: tipografía reducida, jerarquía,
 * columnas, contraste, iconografía, y una franja legal inferior nueva
 * (Privacidad/Términos/Cookies). El botón Volver Arriba y las redes
 * sociales flotantes, antes solo en la portada, se movieron aquí (mismo
 * componente, sin duplicar diseño) para que aparezcan en todo el sitio —
 * ver `/docs/CAMBIOS.md`. Mismo bug de `css_classes` en widgets: se
 * apunta al tag/tipo de widget real bajo los contenedores reales
 * (`reveex-footer__brand`, `__column`, `__legal-row`).
 *
 * 2026-08-17: fondo de vuelta a gris a pedido del usuario, pero no al
 * `#A0A0A0` histórico (bajo contraste contra el texto blanco del footer,
 * ~2.3:1 — motivo real por el que se había cambiado a verde oscuro el
 * 2026-08-02). Primer intento (`#454C43`, gris con matiz verde) se leía
 * como "verde", no gris — se reemplaza por `#6B6B6B`, gris neutro real
 * (R=G=B, sin sesgo de tono), que pasa contraste AA contra texto blanco
 * (~5.3:1) sin tocar ningún color de texto. Aplicado por `!important`
 * porque Elementor ya pinta `background-color` con una regla más
 * específica (`.elementor-195 .elementor-element.elementor-element-XXXX
 * :not(...)`) — más simple y estable que editar el control nativo vía
 * MCP (no disponible en esta sesión) o escribir `_elementor_data` directo
 * (ver incidentes documentados en esta misma hoja, sección Header).
 */

.reveex-footer,
.reveex-footer__legal {
	background-color: #6b6b6b !important;
}

.reveex-footer__brand h2.elementor-heading-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.reveex-footer__brand .elementor-widget-text-editor p {
	font-size: 13.5px;
	line-height: 1.65;
	opacity: 0.85;
}

.reveex-footer__column h3.elementor-heading-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	opacity: 0.75;
}

.reveex-footer__column .elementor-icon-list-text {
	font-size: 13.5px;
}

.reveex-footer__column .elementor-icon-list-item > a {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.reveex-footer__column .elementor-icon-list-item > a:hover,
.reveex-footer__column .elementor-icon-list-item > a:focus-visible {
	color: #c8dd69;
	opacity: 1;
}

/** Iconos del footer con una pequeña insignia circular, mismo lenguaje visual que las tarjetas de logos de Certificación/Exportación (un ícono suelto se ve pobre; con marco circular se integra). */
.reveex-footer__column .elementor-icon-list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	flex: 0 0 auto;
}

/**
 * `!important` necesario: `reveex-elementor.css` se encola antes que la
 * hoja propia de Elementor para icon-list (`widget-icon-list.min.css`),
 * que trae `.elementor-widget .elementor-icon-list-icon svg{width:var(
 * --e-icon-list-icon-size,1em)}` con la misma especificidad (dos clases)
 * — sin esto gana la que carga después (Elementor), y cada icon-list usa
 * un tamaño nativo distinto (11px en "Enlaces", 18px en "Contacto", este
 * último notoriamente grande contra la insignia circular de 26px).
 * `margin:0` anula el margen derecho que Elementor agrega al SVG (25% de
 * su tamaño, pensado para separarlo de un texto sin `gap`), que sin
 * compensación a la izquierda descentraba el ícono dentro de la insignia
 * — el espaciado ícono/texto ya lo da el `gap:10px` del enlace, arriba.
 */
.reveex-footer__column .elementor-icon-list-icon svg {
	width: 12px !important;
	height: 12px !important;
	margin: 0 !important;
}

.reveex-footer__column .elementor-widget-text-editor p {
	font-size: 13.5px;
	line-height: 1.6;
	opacity: 0.85;
}

/**
 * Badges de Certificación bajo el texto de marca (`reveex-footer__certs`):
 * Elementor tiene guardados anchos fijos distintos por imagen (300×150 y
 * 440×220, misma proporción 2:1) dentro de cajas al 43% del contenedor —
 * mucho más anchas que la imagen real, lo que se leía como aire/padding
 * irregular a la izquierda de cada logo.
 *
 * 2026-08-17: la primera corrección fijaba una altura absoluta (112px,
 * más del doble de la original) — a ese tamaño, las dos imágenes ya no
 * entraban lado a lado dentro de la columna de marca (~40% de 1140px,
 * ~420px), así que el `flex-wrap:wrap` nativo del contenedor las apilaba
 * una debajo de la otra. Se reemplaza por un tamaño relativo al
 * contenedor real (`flex:1 1 0`, cada caja se reparte la mitad del ancho
 * disponible; la imagen llena su caja al 100%, alto automático según su
 * proporción real) — quedan más grandes que el original (bastante más
 * del doble, ya que ahora usan casi todo el ancho de la columna) y
 * garantizado que nunca se apilan, sea cual sea el ancho real de la
 * columna en cada resolución. `flex-wrap:nowrap` fuerza que compartan la
 * fila siempre en vez de decidirlo el ajuste nativo.
 */
.reveex-footer__certs {
	justify-content: flex-start !important;
	flex-wrap: nowrap !important;
}

.reveex-footer__certs > .e-con {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.reveex-footer__certs img {
	display: block;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
}

/* Franja legal inferior — diferenciada del resto del footer */

/**
 * Línea superior de la franja legal, limitada al ancho boxed real
 * (1140px) — mismo bug ya documentado y resuelto en el Header ("Línea Top
 * Bar → menú, a todo el ancho"): Elementor solo aplica el `max-width`
 * "Boxed" al hijo `.e-con-inner`, nunca al contenedor exterior donde
 * antes se pintaba este borde (`reveex-footer__legal`, ancho completo).
 * `top:-18px` compensa el `padding-top` nativo de esa franja (18px) para
 * que la línea quede en la misma posición vertical de antes, solo que
 * ahora acotada a 1140px en vez de a toda la ventana.
 *
 * 2026-08-17: bajado otra vez, de 12px a 6px ("sin espacios" entre texto
 * y línea, pedido explícito). Además se fuerza `flex-wrap:nowrap` desde
 * 768px — el contenido real (3 enlaces cortos + 2 líneas) mide bastante
 * menos que 1140px, así que no hay motivo real para que Elementor lo
 * reparta en más de una línea a ese ancho; si de verdad se parte en dos
 * líneas, cada una se centra por separado y el conjunto deja de leerse
 * como un solo bloque centrado, aunque `justify-content:center` esté
 * bien aplicado. En mobile (`<768px`) se deja el `wrap` nativo — ahí sí
 * puede no entrar en una sola línea y el fallback ya existente
 * (`text-align:center`, más abajo) sigue cubriendo ese caso.
 */
.reveex-footer__legal-row > .e-con-inner {
	position: relative;
	justify-content: center !important;
	gap: 6px !important;
}

@media (min-width: 768px) {
	.reveex-footer__legal-row > .e-con-inner {
		flex-wrap: nowrap !important;
	}
}

.reveex-footer__legal-row > .e-con-inner::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.12);
}

/**
 * 2026-08-20: el `gap:6px` del contenedor (arriba) ya es mínimo, pero el
 * botón de Elementor trae su propio padding horizontal nativo por tamaño
 * (10px/20px en `elementor-size-xs`, ver `frontend.min.css`) que no estaba
 * sobreescrito — ese padding, sumado al gap, es la separación real y
 * notoria entre cada texto y el divisor "|" que reportó el usuario. Se
 * anula aquí (no en el gap, que ya está al mínimo razonable).
 */
.reveex-footer__legal-row .elementor-widget-button .elementor-button {
	font-size: 12.5px;
	padding: 0 !important;
	opacity: 0.8;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.reveex-footer__legal-row .elementor-widget-button .elementor-button:hover,
.reveex-footer__legal-row .elementor-widget-button .elementor-button:focus-visible {
	opacity: 1;
}

/** El widget Divider no tiene una opción nativa "vertical" — mismo recurso ya usado en el Header (Top Bar): se oculta su estructura interna y el propio contenedor hace de línea real vía `::after`. */
.reveex-footer__legal-row .elementor-widget-divider {
	width: 1px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.reveex-footer__legal-row .elementor-widget-divider .elementor-divider {
	display: none;
}

.reveex-footer__legal-row .elementor-widget-divider::after {
	content: "";
	display: block;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 767px) {
	.reveex-footer__legal-row {
		text-align: center;
	}
}

/* ==========================================================================
   Ficha de producto nativa (WooCommerce Single Product, sin Elementor)
   ========================================================================== */

/**
 * Override de `content-single-product.php` — decisión explícita del usuario
 * (2026-08-06) de construir esta ficha con PHP/hooks/CSS nativos en vez de
 * Elementor Pro. Prefijo `reveex-pdp-*` (Product Detail Page) deliberadamente
 * distinto de `reveex-product-*`, reservado para el borrador de Elementor
 * (post 536) que sigue sin activar — no deben mezclarse.
 *
 * Catálogo, no tienda: sin precio, sin carrito, sin pestañas clásicas, sin
 * valoraciones (ver hooks en `inc/compatibility.php`). Verdes de marca
 * (`#276c27`, `#1e311d`, acento hover `#c8dd69`) igual que el resto de
 * componentes construidos en el sitio — ver `/docs/ESTILOS.md`.
 *
 * Tipografía: `Plus Jakarta Sans`, la configurada en el kit global de
 * Elementor (Estilos del sitio → Tipografía) — decisión explícita del
 * usuario, no `Poppins` (que es lo que usan Header/CTA/ficha de Elementor,
 * puesta widget por widget, no vía el kit). Como ningún widget del sitio
 * usa hoy la tipografía del kit, nada más la carga — por eso se autohospeda
 * aquí (`assets/fonts/`) en vez de asumir que ya está disponible.
 */
@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

.reveex-pdp-page,
.reveex-pdp-page * {
	box-sizing: border-box;
}

.reveex-pdp-page {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #333333;
}

/* El tema envuelve todo el contenido en `<main class="reveex-site-main">`
   con padding fijo (`main.css`, pensado como fallback sin Elementor). Esta
   ficha gestiona su propio espaciado de punta a punta (franjas de ancho
   completo + contenido boxed 1140px adentro), así que en la página de
   producto se anula ese padding — WooCommerce agrega `single-product` al
   `<body>` automáticamente, no hace falta ninguna clase nueva. */
body.single-product .reveex-site-main {
	padding: 0;
}

/* Breadcrumb: franja de ancho completo (fondo hasta el borde del
   viewport), con la migas de pan en un contenedor interno boxed 1140px. */
.reveex-pdp-breadcrumb-strip {
	background: #f6f8f5;
	border-bottom: 1px solid #e4eae2;
}

.reveex-pdp-breadcrumb-row {
	max-width: 1140px;
	margin: 0 auto;
	padding: 14px 32px;
}

.reveex-pdp-breadcrumb-row .woocommerce-breadcrumb {
	margin: 0;
	font-size: 13px;
	color: #6b7a70;
}

.reveex-pdp-breadcrumb-row .woocommerce-breadcrumb a {
	color: #6b7a70;
	text-decoration: none;
	transition: color 0.2s ease;
}

.reveex-pdp-breadcrumb-row .woocommerce-breadcrumb a:hover {
	color: #276c27;
}

/* Hero: galería | información — boxed 1140px, con su propio padding.
   Contenedor 50/50 (pedido explícito del usuario) — la foto se ve más
   grande achicando el margen interno de aire, no agrandando la columna. */
.reveex-pdp-hero {
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 32px 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* WooCommerce agrega la clase `images` al mismo div de la galería siempre
   (compatibilidad con temas clásicos de 2 columnas). El selector real de
   `woocommerce-layout.css` es `.woocommerce div.product div.images
   {float:left;width:48%}` — 3 clases + 2 tipos de elemento, más específico
   que esta regla (2 clases), así que le seguía ganando aunque esta viniera
   después en el archivo. `!important` justificado: es la única forma
   limpia de ganarle a un selector de un plugin de terceros sin tener que
   igualar/superar su especificidad exacta (más frágil a futuro). */
.reveex-pdp-gallery-col .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	float: none !important;
}

/* `reveex-pdp-gallery-frame` es un div nuevo que el JS agrega envolviendo
   `woocommerce-product-gallery__wrapper` — ahí (no en el wrapper directo)
   va el fondo/radio/recorte y las flechas. El wrapper es el elemento que
   WooCommerce redimensiona internamente para el slider (ancho real mucho
   mayor al 100% visible); una flecha `right:14px` puesta directamente ahí
   terminaba fuera del área visible (por eso "se perdía" la de la derecha
   — no estaba oculta, estaba posicionada fuera de la zona recortada). */
.reveex-pdp-gallery-frame {
	position: relative;
	background: #f6f8f5;
	border-radius: 24px;
	overflow: hidden;
}

.reveex-pdp-gallery-col .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* Flechas prev/next del carrusel — WooCommerce no las agrega por defecto
   (solo miniaturas), se inyectan por JS (`product-gallery.js`) apuntando a
   las miniaturas reales que ya genera el slider nativo. Solo aparecen si
   hay más de 1 imagen (el JS no las crea si no hay miniaturas). */
.reveex-pdp-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #e4eae2;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #16241c;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 0;
	z-index: 5;
	transition: background 0.15s ease;
}

.reveex-pdp-gallery-nav:hover {
	background: #f6f8f5;
}

.reveex-pdp-gallery-nav:focus-visible {
	outline: 2px solid #276c27;
	outline-offset: 2px;
}

.reveex-pdp-gallery-nav svg {
	width: 18px;
	height: 18px;
}

.reveex-pdp-gallery-prev {
	left: 14px;
}

.reveex-pdp-gallery-next {
	right: 14px;
}

.reveex-pdp-gallery-col .woocommerce-product-gallery__image,
.reveex-pdp-gallery-col .woocommerce-product-gallery__image a {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
}

.reveex-pdp-gallery-col .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 6px;
}

.reveex-pdp-gallery-col span.onsale {
	display: none;
}

/* Lightbox nativo de WooCommerce (PhotoSwipe, clic sobre la imagen): fondo
   blanco translúcido en vez del negro por defecto. Los íconos de flecha/
   cerrar son un sprite de WooCommerce (`default-skin.svg`), no se puede
   recolorear por CSS — en vez de eso se les da un chip circular sólido
   (verde oscuro de marca) detrás para que resalten sobre el fondo claro.
   Ancho de las flechas/posición del sprite sin tocar — solo color y radio,
   para no desalinear el recorte del ícono dentro del sprite. */
.pswp__bg {
	background: #ffffff !important;
	opacity: 0.94 !important;
}

.pswp__top-bar {
	background: transparent !important;
}

.pswp__button--close {
	background-color: rgba(30, 49, 29, 0.9) !important;
	border-radius: 50%;
	margin: 6px;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
	background-color: rgba(30, 49, 29, 0.9) !important;
	border-radius: 50%;
}

.pswp__caption {
	background: transparent !important;
}

.pswp__caption__center {
	background: rgba(255, 255, 255, 0.9) !important;
	color: #16241c !important;
	border-radius: 12px;
}

/* PhotoSwipe oculta flechas/barra superior por defecto hasta detectar
   movimiento de mouse (`.pswp__ui--idle`) y las flechas por completo en
   táctil (`.pswp--touch`) — de ahí que "no aparezca ningún círculo" al
   abrir. Se fuerzan siempre visibles. `.pswp__ui--one-slide` (un producto
   con una sola imagen) sí se respeta: sin nada que navegar, no debe haber
   flechas — esa regla no se toca. */
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right,
.pswp__ui--idle .pswp__top-bar {
	opacity: 1 !important;
}

.pswp__button--arrow--left,
.pswp__button--arrow--right {
	visibility: visible !important;
}

/* El visor (`.pswp`) vivía por debajo del header sticky y de las redes
   sociales flotantes (`reveex-social-fixed`, ambos `position:fixed` con
   z-index propio) — por eso "se perdía" con ellos en vez de taparlos. Se
   fuerza como la capa más alta del sitio. */
.pswp {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 999999 !important;
}

/* Redes sociales flotantes ocultas mientras el visor está abierto — no
   tienen nada que hacer visibles encima de una imagen ampliada. La clase
   la agrega/quita `product-gallery.js` en `<body>` al abrir/cerrar. */
body.reveex-lightbox-open .reveex-social-fixed {
	display: none !important;
}

/* Tamaño máximo de la imagen dentro del visor — solo deja el aire mínimo
   necesario para la barra de controles abajo. Ya con el z-index arreglado,
   PhotoSwipe centra y ajusta la imagen solo (sin perder calidad, es la
   misma imagen original); no hace falta acotar el ancho también. */
.pswp__img {
	max-height: 85vh !important;
}

/* Controles del visor: una sola barra centrada abajo (flechas + cerrar
   juntas). Se agrega directo en `<body>` (no dentro de `.pswp`) porque
   PhotoSwipe aplica `transform` a sus propios contenedores para animar la
   apertura/cierre, y eso convierte cualquier `position:fixed` puesto
   adentro en, en la práctica, `position:absolute` relativo a ese
   contenedor transformado — por eso la barra aparecía descolocada/cortada
   en vez de fija y centrada en la pantalla real. Oculta por defecto,
   visible solo mientras `body.reveex-lightbox-open` (mismo interruptor que
   ya oculta las redes sociales). */
.reveex-pdp-lightbox-controls {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 1000000;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.96);
	padding: 8px;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

body.reveex-lightbox-open .reveex-pdp-lightbox-controls {
	display: flex;
}

.reveex-pdp-lightbox-controls .reveex-pdp-gallery-nav {
	position: static;
	/* La base (`.reveex-pdp-gallery-nav`) trae `transform:translateY(-50%)`
	   pensado para cuando el botón está `position:absolute` sobre la
	   imagen — ese transform sigue aplicando aunque acá sea `static`, y
	   empujaba cada botón 20px hacia arriba, saliéndose del óvalo. */
	transform: none;
}

.reveex-pdp-lightbox-controls--no-arrows .reveex-pdp-lightbox-prev,
.reveex-pdp-lightbox-controls--no-arrows .reveex-pdp-lightbox-next {
	display: none;
}

@media (max-width: 480px) {
	.reveex-pdp-lightbox-controls {
		bottom: 16px;
		gap: 6px;
		padding: 6px;
	}

	.reveex-pdp-lightbox-controls .reveex-pdp-gallery-nav {
		width: 36px;
		height: 36px;
	}
}

/* WooCommerce trae `.woocommerce div.product div.images .flex-control-thumbs
   {margin:0}` (4 clases + 2 tipos de elemento) — más específico que esta
   regla, le ganaba a la separación de arriba aunque estuviera declarada.
   `!important` justificado, mismo caso que la galería principal. */
.reveex-pdp-gallery-col .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0 0 !important;
	padding: 0;
}

/* Miniaturas más chicas y a tamaño fijo (no estiradas a ancho completo)
   para que se vean bien sin importar cuántas imágenes tenga el producto,
   en cualquier dispositivo — `flex-shrink` las achica solas en pantallas
   angostas en vez de necesitar breakpoints a mano. */
.reveex-pdp-gallery-col .flex-control-thumbs li {
	list-style: none;
	flex: 0 1 96px;
}

.reveex-pdp-gallery-col .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #f6f8f5;
	border-radius: 10px;
	border: 2px solid transparent;
	padding: 6px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.reveex-pdp-gallery-col .flex-control-thumbs img.flex-active,
.reveex-pdp-gallery-col .flex-control-thumbs img:hover {
	border-color: #276c27;
}

/* Badge de categoría — píldora, no enlace de texto */
.reveex-pdp-badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.reveex-pdp-badge {
	display: inline-flex;
	align-items: center;
	background: #276c27;
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.15s ease;
}

a.reveex-pdp-badge:hover,
a.reveex-pdp-badge:focus-visible {
	background: #1e311d;
	color: #ffffff;
}

a.reveex-pdp-badge:focus-visible {
	outline: 2px solid #1e311d;
	outline-offset: 2px;
}

.reveex-pdp-title {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #1e311d;
	margin: 0;
}

.reveex-pdp-pres {
	margin-top: 12px;
	font-size: 14.5px;
	color: #6b7a70;
}

.reveex-pdp-pres p {
	margin: 0 0 4px;
}

.reveex-pdp-pres p:last-child {
	margin-bottom: 0;
}

/* Información técnica anidada en la columna del título (propuesta "02: al
   pie de la columna", aprobada por el usuario 2026-08-19) — antes vivía en
   `reveex-pdp-section`, franja aparte debajo del hero. Sin tarjeta propia
   (propuesta "03: sin tarjeta", misma fecha): la versión con
   `.reveex-pdp-card` (fondo blanco + borde + sombra) se veía mal ahí,
   porque compite con el fondo blanco del hero en vez de con la franja
   salvia donde vive la tarjeta de indicaciones. En su lugar, un separador
   fino arriba y tipografía propia — reutiliza `.reveex-pdp-prose` tal
   cual, pero no `.reveex-pdp-card h2` (ese selector exige estar dentro de
   `.reveex-pdp-card`, que ya no se usa acá). */
.reveex-pdp-info-tech {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #e4eae2;
}

.reveex-pdp-info-tech h2 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1e311d;
	margin: 0 0 16px;
}

/* Tarjeta «Descargar ficha técnica» al pie de la información técnica
   (propuesta 3 «Tarjeta de documento», aprobada 2026-09-19; sin subtítulo).
   Se renderiza solo si el producto tiene URL en `_reveex_datasheet_url`
   (inc/product-datasheet.php). El círculo de descarga sigue la regla de CTA
   sólido de la paleta: vino, hover rosa con texto oscuro. */
.reveex-pdp-ficha {
	margin-top: 24px;
}

.reveex-pdp-ficha-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #f6f8f5;
	border: 1px solid #e4eae2;
	border-radius: 16px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.reveex-pdp-ficha-card:hover,
.reveex-pdp-ficha-card:focus-visible {
	border-color: #276c27;
	box-shadow: 0 12px 30px -14px rgba(22, 36, 28, 0.35);
	transform: translateY(-2px);
}

.reveex-pdp-ficha-card:focus-visible {
	outline: 2px solid #1e311d;
	outline-offset: 2px;
}

.reveex-pdp-ficha-tile {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #1e311d;
	color: #c8dd69;
	display: grid;
	place-items: center;
}

.reveex-pdp-ficha-tile svg {
	display: block;
	width: 26px;
	height: 26px;
}

.reveex-pdp-ficha-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: #1e311d;
}

.reveex-pdp-ficha-go {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #6b204a;
	color: #ffffff;
	display: grid;
	place-items: center;
	transition: background 0.25s ease, color 0.25s ease;
}

.reveex-pdp-ficha-go svg {
	display: block;
	width: 18px;
	height: 18px;
}

.reveex-pdp-ficha-card:hover .reveex-pdp-ficha-go,
.reveex-pdp-ficha-card:focus-visible .reveex-pdp-ficha-go {
	background: #c475a3;
	color: #16241c;
}

@media (max-width: 1024px) {
	.reveex-pdp-title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.reveex-pdp-title {
		font-size: 24px;
	}
}

/* Información técnica / Indicaciones: tarjetas blancas sobre franja verde
   salvia — mismo lenguaje de tarjeta que `reveex-product-main`/
   `reveex-feature-card` (radio 24px, sombra tintada), no el fondo gris
   plano de la ficha de Elementor descartada. La franja (`reveex-pdp-section`)
   es de ancho completo (hasta el borde del viewport); las tarjetas viven
   en `reveex-pdp-section-inner`, boxed 1140px. */
.reveex-pdp-section {
	background: #f6f8f5;
}

.reveex-pdp-section-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.reveex-pdp-card {
	background: #ffffff;
	border: 1px solid #e4eae2;
	border-radius: 24px;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.28);
	padding: 32px;
}

.reveex-pdp-card h2 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1e311d;
	margin: 0 0 22px;
}

.reveex-pdp-prose {
	font-size: 15px;
	line-height: 1.7;
	color: #333333;
}

.reveex-pdp-prose p {
	margin: 0 0 12px;
}

.reveex-pdp-prose p:last-child {
	margin-bottom: 0;
}

/* "Composición:"/"Posología:"/"Código:"/"Indicaciones:"/"Administración:"
   llegan como `<p><strong>Etiqueta:</strong></p>` sueltos (wpautop las
   separa por la línea en blanco antes/después en el contenido original).
   `:only-child` distingue una negrita-etiqueta de una negrita dentro de una
   frase normal, sin marcar nada a mano — mismo criterio ya validado en la
   ficha de Elementor. */
.reveex-pdp-prose p > strong:only-child,
.reveex-pdp-prose p > b:only-child {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #276c27;
	margin-top: 20px;
	padding-left: 12px;
	border-left: 3px solid #276c27;
}

.reveex-pdp-prose p:first-of-type > strong:only-child,
.reveex-pdp-prose p:first-of-type > b:only-child {
	margin-top: 0;
}

/* Dato sucio conocido (Fluniveex 20ml): el título viene duplicado dentro de
   la descripción corta. Se oculta sin tocar el contenido — si aparece en
   más productos, evaluar limpiarlo en origen. */
.reveex-pdp-indications .reveex-pdp-prose h1,
.reveex-pdp-indications .reveex-pdp-prose h2,
.reveex-pdp-indications .reveex-pdp-prose .product_title {
	display: none;
}

/* CTA — franja clara, no banda oscura (decisión del usuario tras comparar
   propuestas). `reveex-pdp-cta-wrap` boxea a 1140px y da el margen exterior;
   `reveex-pdp-cta-strip` es la tarjeta en sí (fondo/radio), sin ancho propio. */
.reveex-pdp-cta-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 36px 32px 44px;
}

.reveex-pdp-cta-strip {
	background: #f6f8f5;
	border-radius: 24px;
	padding: 30px 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.reveex-pdp-cta-strip h2 {
	font-size: 18px;
	font-weight: 700;
	color: #111111;
	margin: 0;
}

.reveex-pdp-cta-strip p {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: #6b7a70;
}

.reveex-pdp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #6b204a;
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 22px;
	border-radius: 18px;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.reveex-pdp-btn:hover,
.reveex-pdp-btn:focus-visible {
	background: #c475a3;
	color: #16241c;
	transform: translateY(-4px);
	box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.5);
}

/* Productos relacionados — boxed 1140px, con su propio padding. */
.reveex-pdp-related {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px 44px;
}

.reveex-pdp-related h2 {
	font-size: 26px;
	font-weight: 700;
	color: #111111;
	margin: 0 0 20px;
}

/* Grid y tarjeta de producto — compartidas entre "Productos relacionados"
   (Single Product), la grilla de la página de categoría y la página
   "Productos" (con sidebar de filtros). Sin max-width propio a propósito:
   heredan el ancho boxed del contenedor que las aloje (.reveex-pdp-related
   en PDP, .reveex-category-page-wrap en categoría, .reveex-pf-main en
   Productos). Columnas fijas por breakpoint (no auto-fit): con el sidebar
   de filtros angosto, auto-fit(minmax 240-340) solo cabía 2 columnas y
   dejaba espacio vacío a la derecha — ver captura reportada 2026-08-17. */
.reveex-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

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

@media (max-width: 767px) {
	.reveex-product-grid {
		grid-template-columns: 1fr;
	}
}

.reveex-card-product {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e4eae2;
	border-radius: 14px;
	overflow: hidden;
	background: #ffffff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.reveex-card-product:hover {
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
}

.reveex-card-product-thumb {
	background: #f6f8f5;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.reveex-card-product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.reveex-card-product-body {
	padding: 16px 18px;
}

.reveex-card-product-title {
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	color: #111111;
}

.reveex-card-product-link {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #1e311d;
}

.reveex-card-product-link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.15s ease;
}

.reveex-card-product:hover .reveex-card-product-link svg {
	transform: translateX(3px);
}

/* Página de categoría de producto (taxonomy-product_cat.php) — mismos
   criterios que la ficha de producto nativa (reveex-pdp-*): tipografía
   Plus Jakarta Sans (el @font-face ya está declarado arriba, en la sección
   de Single Product) y reset del padding de fallback de `.reveex-site-main`
   (main.css, pensado para páginas sin plantilla propia) para que las
   franjas de ancho completo (breadcrumb) lleguen de borde a borde, igual
   que en Single Product. */
.reveex-category-page,
.reveex-category-page * {
	box-sizing: border-box;
}

.reveex-category-page {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #333333;
}

body.tax-product_cat .reveex-site-main {
	padding: 0;
}

/* boxed 1140px, mismo criterio que .reveex-pdp-related: un único wrapper
   con padding propio en vez de una utilidad compartida. */
.reveex-category-page-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px 44px;
}

.reveex-category-hero {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 26px;
	padding: 30px 32px;
	background: linear-gradient(155deg, #f6f8f5, #ffffff);
	border: 1px solid #e4eae2;
	border-radius: 18px;
}

.reveex-category-hero-title {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111111;
	margin: 0;
}

.reveex-category-hero-count {
	font-size: 13.5px;
	color: #6b7a70;
}

.reveex-category-hero-count strong {
	color: #111111;
	font-weight: 700;
}

.reveex-category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
	padding-bottom: 26px;
}

.reveex-category-chip {
	font-size: 12.5px;
	font-weight: 600;
	color: #111111;
	background: #f6f8f5;
	border: 1px solid #e4eae2;
	padding: 7px 13px;
	border-radius: 999px;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.reveex-category-chip.is-current {
	background: #276c27;
	border-color: #276c27;
	color: #ffffff;
}

.reveex-category-chip.is-current:hover,
.reveex-category-chip.is-current:focus-visible {
	color: #ffffff;
}

.reveex-category-chip:hover,
.reveex-category-chip:focus-visible {
	border-color: #276c27;
	color: #1e311d;
}

.reveex-category-empty {
	font-size: 14px;
	color: #6b7a70;
	padding: 8px 0 40px;
}

/* Envuelve la paginación nativa de WooCommerce (`woocommerce_pagination()`,
   markup `.woocommerce-pagination .page-numbers`) — se reutiliza su lógica
   de enlaces/ellipsis, solo se restyla dentro de este wrapper. */
.reveex-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 32px;
}

.reveex-pagination .woocommerce-pagination ul,
.reveex-pagination .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.reveex-pagination .page-numbers {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e4eae2;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #111111;
	text-decoration: none;
	padding: 0 6px;
}

.reveex-pagination a.page-numbers:hover,
.reveex-pagination a.page-numbers:focus-visible {
	border-color: #276c27;
	color: #1e311d;
}

.reveex-pagination .page-numbers.current {
	background: #276c27;
	border-color: #276c27;
	color: #ffffff;
}

.reveex-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

@media (max-width: 1024px) {
	.reveex-pdp-hero {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.reveex-pdp-card {
		padding: 26px;
	}
}

@media (max-width: 767px) {
	.reveex-pdp-breadcrumb-row,
	.reveex-pdp-hero,
	.reveex-pdp-section-inner,
	.reveex-pdp-cta-wrap,
	.reveex-pdp-related,
	.reveex-category-page-wrap,
	.reveex-search-hero,
	.reveex-search-section {
		padding-left: 20px;
		padding-right: 20px;
	}

	.reveex-pdp-card {
		padding: 22px 20px;
	}

	.reveex-pdp-cta-strip {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px 22px;
	}
}

/* ==========================================================================
   Página "Galería" (post 918, antes "Instalaciones") — widget nativo
   Gallery de Elementor Pro, skin Grid. El control "Title" del widget
   posiciona el título como overlay ABSOLUTO encima de la imagen (ver
   `.elementor-gallery-item__content{position:absolute;...}` en
   `elementor-pro/assets/css/widget-gallery.min.css`) — no existe un modo
   nativo de "título debajo de la imagen". El usuario pidió explícitamente
   el título abajo, así que se sobreescribe a `position:static` para que
   quede en flujo normal, después de la imagen, en vez de superpuesto.
   Selectores de mayor especificidad que la regla genérica del widget
   (dos clases vs. una), no hace falta `!important`.
   ========================================================================== */
.reveex-galeria-page .elementor-gallery-item__content {
	position: static;
	height: auto;
	padding: 10px 2px 0;
	justify-content: flex-start;
	text-align: left;
}

.reveex-galeria-page .elementor-gallery-item__title {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #16241c;
	width: 100%;
}

/* ==========================================================================
   Resultados de búsqueda (search.php) — Propuesta A "Directa", aprobada por
   el usuario 2026-08-19. Reutiliza tal cual `.reveex-card-product` /
   `.reveex-product-grid` / `.reveex-pagination` (misma tarjeta que
   Categoría, "Productos" relacionados y la página "Productos") y
   `.reveex-pdp-breadcrumb-strip` para la franja de breadcrumb — acá solo se
   define el encabezado con el campo para refinar la búsqueda, la lista de
   "Otros resultados" (páginas/entradas que coinciden pero no son producto)
   y el estado sin resultados.
   ========================================================================== */

body.search .reveex-site-main {
	padding: 0;
}

.reveex-search-page,
.reveex-search-page * {
	box-sizing: border-box;
}

.reveex-search-page {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #333333;
}

.reveex-search-breadcrumb-row {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #6b7a70;
}

.reveex-search-breadcrumb-row a {
	color: #6b7a70;
	text-decoration: none;
	transition: color 0.2s ease;
}

.reveex-search-breadcrumb-row a:hover {
	color: #276c27;
}

.reveex-search-breadcrumb-sep {
	margin: 0 6px;
}

.reveex-search-breadcrumb-current {
	color: #111111;
	font-weight: 600;
}

.reveex-search-hero {
	max-width: 1140px;
	margin: 0 auto;
	padding: 30px 32px 6px;
}

.reveex-search-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #276c27;
	margin: 0 0 8px;
}

.reveex-search-hero-title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111111;
	margin: 0 0 10px;
}

.reveex-search-hero-title em {
	font-style: normal;
	color: #1e311d;
}

.reveex-search-hero-count {
	font-size: 13.5px;
	color: #6b7a70;
	margin: 0;
}

.reveex-search-hero-count strong {
	color: #111111;
	font-weight: 700;
}

.reveex-search-refine {
	margin-top: 18px;
	display: flex;
	gap: 8px;
	max-width: 420px;
}

.reveex-search-refine input {
	flex: 1;
	min-width: 0;
	border: 1.5px solid #e4eae2;
	border-radius: 10px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 13.5px;
	color: #111111;
}

.reveex-search-refine input:focus {
	outline: none;
	border-color: #276c27;
}

.reveex-search-refine button {
	border: 0;
	background: #276c27;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	border-radius: 10px;
	padding: 0 18px;
	cursor: pointer;
}

.reveex-search-refine button:hover {
	background: #1e311d;
}

.reveex-search-section {
	max-width: 1140px;
	margin: 0 auto;
	padding: 22px 32px 12px;
}

.reveex-search-section:last-of-type {
	padding-bottom: 56px;
}

.reveex-search-others-title {
	font-size: 15px;
	font-weight: 800;
	color: #111111;
	margin: 0 0 16px;
}

.reveex-search-others-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.reveex-search-other-item {
	display: block;
	border: 1px solid #e4eae2;
	border-radius: 14px;
	padding: 16px 20px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}

.reveex-search-other-item:hover {
	border-color: #276c27;
}

.reveex-search-other-kind {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #276c27;
}

.reveex-search-other-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #111111;
	margin: 6px 0;
}

.reveex-search-other-excerpt {
	font-size: 13.5px;
	color: #6b7a70;
	line-height: 1.55;
	margin: 0;
}

.reveex-search-empty {
	max-width: 560px;
	margin: 10px auto 0;
	text-align: center;
	padding: 10px 20px 40px;
}

.reveex-search-empty-icon {
	width: 52px;
	height: 52px;
	color: #6b7a70;
	margin: 0 auto 18px;
}

.reveex-search-empty h2 {
	font-size: 20px;
	font-weight: 800;
	color: #111111;
	margin: 0 0 10px;
}

.reveex-search-empty p {
	font-size: 14px;
	color: #6b7a70;
	line-height: 1.6;
	margin: 0 auto 22px;
	max-width: 46ch;
}

.reveex-search-empty-cta {
	display: inline-block;
	background: #6b204a;
	color: #ffffff;
	font-weight: 700;
	font-size: 13.5px;
	padding: 12px 22px;
	border-radius: 10px;
	text-decoration: none;
}

.reveex-search-empty-cta:hover {
	background: #c475a3;
	color: #16241c;
}

/* Autocompletado del campo de refinar búsqueda — mismo desplegable
   (`.reveex-search-suggest*`) y mismo endpoint que el buscador del Header
   (ver sección "Header Reveex" arriba), pero anclado con `position:
   absolute` en vez de `fixed`: este formulario vive en el flujo normal de
   la página, sin ningún ancestro `overflow:hidden` que lo recorte, así que
   no necesita el cálculo por JS (`getBoundingClientRect()`) que sí requiere
   el Header. Ver `search-autocomplete.js`. */
.reveex-search-refine {
	position: relative;
}

.reveex-search-refine .reveex-search-suggest {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 8px;
	width: auto;
}

/* ==========================================================================
   Página 404 (404.php) — Propuesta C "Accesos por categoría", aprobada por
   el usuario 2026-08-22. Mismo buscador con autocompletado que Resultados
   de búsqueda (`.reveex-search-refine`, arriba) más accesos a categorías de
   producto, reutilizando tal cual `.reveex-category-filter/-pill` (ya
   definido para el filtro de categoría del blog) y
   `.reveex-search-empty-icon` para el ícono del hero. Sin componentes
   visuales nuevos salvo los enlaces rápidos del pie (`.reveex-404-quicklinks`).

   Nombrado `.reveex-404-fallback` (no `.reveex-404-page`): ese otro nombre
   ya existe más arriba en este archivo (línea ~1360), estilo huérfano de
   la plantilla Elementor Theme Builder "404" (post 664) que sigue en
   borrador sin condición activa — se deja intacto, sin relación con esto.
   ========================================================================== */

body.error404 .reveex-site-main {
	padding: 0;
}

.reveex-404-fallback {
	max-width: 1140px;
	margin: 0 auto;
	padding: 8px 32px 64px;
}

.reveex-404-hero {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 0 8px;
	text-align: center;
}

.reveex-404-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b204a;
	margin: 0 0 10px;
}

.reveex-404-title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}

.reveex-404-body {
	font-size: 14.5px;
	line-height: 1.6;
	color: #6b7a70;
	margin: 0 auto 4px;
	max-width: 46ch;
}

.reveex-404-search-refine {
	margin: 18px auto 0;
}

.reveex-404-categories {
	max-width: 640px;
	margin: 40px auto 0;
	padding-top: 32px;
	border-top: 1px solid #e4eae2;
	text-align: center;
}

.reveex-404-section-title {
	font-size: 15px;
	font-weight: 800;
	color: #111111;
	margin: 0 0 16px;
}

.reveex-404-category-filter {
	justify-content: center;
	margin-bottom: 0;
}

.reveex-404-quicklinks {
	max-width: 640px;
	margin: 28px auto 0;
	padding-top: 24px;
	border-top: 1px solid #e4eae2;
	display: flex;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
}

.reveex-404-quicklinks a {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #1e311d;
	text-decoration: none;
}

.reveex-404-quicklinks a:hover {
	color: #276c27;
}

.reveex-404-quicklinks svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   Página de Productos — buscador con filtros (template-productos.php)
   Propuesta A "Minimal Laboratory", aprobada por el usuario. Reutiliza tal
   cual `.reveex-card-product` / `.reveex-product-grid` / `.reveex-pagination`
   ya definidas arriba (misma tarjeta que Categoría y Productos relacionados)
   y `.reveex-pdp-breadcrumb-strip/row` para el breadcrumb — sin componentes
   visuales nuevos ahí. Datos de filtro (términos/conteos) los entrega el
   plugin `reveex-product-filters`; esta hoja solo define presentación.
   ========================================================================== */

body.page-template-template-productos .reveex-site-main {
	padding: 0;
}

.reveex-pf-page,
.reveex-pf-page * {
	box-sizing: border-box;
}

.reveex-pf-page {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #333333;
}

.reveex-pf-intro {
	max-width: 1140px;
	margin: 0 auto;
	padding: 26px 32px 4px;
}

.reveex-pf-intro h1 {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111111;
	margin: 0 0 8px;
}

.reveex-pf-intro-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: #6b7a70;
	max-width: 68ch;
}

.reveex-pf-intro-desc p {
	margin: 0 0 8px;
}

.reveex-pf-intro-desc p:last-child {
	margin-bottom: 0;
}

.reveex-pf-body {
	max-width: 1140px;
	margin: 0 auto;
	padding: 20px 32px 48px;
	display: grid;
	grid-template-columns: 258px 1fr;
	gap: 32px;
	align-items: start;
}

/* Sidebar — sticky en desktop, colapsable en tablet/mobile detrás del botón
   "Mostrar filtros"/"Filtrar productos" (`.reveex-pf-filters-bar`).
   `top` usa `--reveex-header-height` (mismo patrón que el panel dropdown del
   menú, ver arriba): el Header es `position:fixed` con z-index 9999, así que
   sin este offset el sidebar sticky queda tapado por el Header al hacer
   scroll — quedaba a solo 20px del viewport, dentro del área que ocupa el
   Header real (~60-90px según el Top Bar esté o no colapsado). */
.reveex-pf-sidebar {
	position: sticky;
	top: calc(var(--reveex-header-height, 60px) + 20px);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Con sesión iniciada el Header baja 32px (barra de administración). */
body.admin-bar .reveex-pf-sidebar {
	top: calc(var(--reveex-header-height, 60px) + 52px);
}

.reveex-pf-sidebar-title {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7a70;
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.reveex-pf-sidebar-close {
	display: none;
}

.reveex-pf-group {
	border-bottom: 1px solid #e4eae2;
	padding: 12px 0;
}

.reveex-pf-group:first-of-type {
	border-top: 1px solid #e4eae2;
}

.reveex-pf-group summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	font-weight: 700;
	color: #111111;
}

.reveex-pf-group summary::-webkit-details-marker {
	display: none;
}

.reveex-pf-chev {
	color: #6b7a70;
	transition: transform 0.2s ease;
}

.reveex-pf-group[open] .reveex-pf-chev {
	transform: rotate(180deg);
}

.reveex-pf-terms {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 12px;
	max-height: 320px;
	overflow-y: auto;
	padding-right: 4px;
}

.reveex-pf-term {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #111111;
	cursor: pointer;
	gap: 10px;
}

.reveex-pf-term-label {
	display: flex;
	align-items: center;
	gap: 9px;
}

.reveex-pf-term input[type="checkbox"] {
	appearance: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid #e4eae2;
	border-radius: 5px;
	display: grid;
	place-content: center;
	cursor: pointer;
	flex: none;
}

.reveex-pf-term input[type="checkbox"]::before {
	content: "";
	width: 9px;
	height: 9px;
	transform: scale(0);
	box-shadow: inset 1em 1em #276c27;
	transition: 0.1s transform ease;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.reveex-pf-term input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.reveex-pf-term input[type="checkbox"]:checked ~ span {
	font-weight: 700;
}

.reveex-pf-term-count {
	font-size: 12px;
	color: #6b7a70;
	font-variant-numeric: tabular-nums;
}

.reveex-pf-empty-group {
	font-size: 12.5px;
	color: #6b7a70;
	margin: 0;
}

/* "Ver más" (Propuesta C, 2026-08-21): oculta los términos menos usados de
   un grupo largo hasta que se pide verlos — pensado para Principio activo
   tras la fusión de 5 taxonomías a 1 (149 términos únicos), pero aplica a
   cualquier grupo que supere REVEEX_PF_VISIBLE_TERMS en template-productos.php. */
.reveex-pf-term--extra {
	display: none;
}

.reveex-pf-group.is-expanded .reveex-pf-term--extra {
	display: flex;
}

.reveex-pf-showmore {
	margin-top: 10px;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: #1e311d;
	text-decoration: underline;
	cursor: pointer;
}

/* Buscador de "Principio activo" (Propuesta 1, aprobada 2026-09-19): con 144
   términos la lista se reemplaza por un campo con autocompletado. Solo se
   activa cuando product-filters.js añade `.is-search-enabled` al grupo — sin
   JavaScript sigue viéndose la lista de checkboxes de siempre. El
   desplegable copia el aspecto de `.reveex-search-suggest` (buscador del
   Header). */
.reveex-pf-search {
	display: none;
	position: relative;
	margin-top: 12px;
}

.reveex-pf-group.is-search-enabled .reveex-pf-search {
	display: block;
}

.reveex-pf-group.is-search-enabled .reveex-pf-terms,
.reveex-pf-group.is-search-enabled .reveex-pf-showmore {
	display: none;
}

.reveex-pf-search-field {
	position: relative;
	display: flex;
	align-items: center;
}

.reveex-pf-search-icon {
	position: absolute;
	left: 12px;
	color: #6b7a70;
	pointer-events: none;
}

.reveex-pf-search-input {
	width: 100%;
	height: 42px;
	padding: 0 36px;
	border: 1.5px solid #e4eae2;
	border-radius: 10px;
	background: #ffffff;
	color: #111111;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reveex-pf-search-input::placeholder {
	color: #8a978e;
}

.reveex-pf-search-input:focus {
	border-color: #276c27;
	box-shadow: 0 0 0 3px rgba(39, 108, 39, 0.14);
}

.reveex-pf-search-clear {
	display: none;
	position: absolute;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #6b7a70;
	font-size: 13px;
	cursor: pointer;
}

.reveex-pf-search-clear:hover,
.reveex-pf-search-clear:focus-visible {
	background: #f0f3ee;
	color: #111111;
}

.reveex-pf-search.has-text .reveex-pf-search-clear {
	display: block;
}

.reveex-pf-search-hint {
	margin: 8px 2px 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7a70;
}

.reveex-pf-search-panel {
	display: none;
	position: absolute;
	top: 48px;
	left: 0;
	right: 0;
	z-index: 30;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 16px 40px -12px rgba(15, 26, 15, 0.35);
	overflow: hidden;
}

.reveex-pf-search-panel.is-open {
	display: block;
}

.reveex-pf-search-list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 320px;
	overflow-y: auto;
}

.reveex-pf-search-item {
	display: block;
	width: 100%;
	padding: 9px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #16241c;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.reveex-pf-search-item:hover,
.reveex-pf-search-item.is-active {
	background: #f0f3ee;
}

.reveex-pf-search-item mark {
	background: #c8dd69;
	color: #16241c;
	border-radius: 2px;
	padding: 0 1px;
}

.reveex-pf-search-empty {
	padding: 18px 14px;
	text-align: center;
	color: #6b7a70;
	font-size: 13px;
}

.reveex-pf-search-foot {
	padding: 0 12px;
	font-size: 11.5px;
	color: #6b7a70;
}

.reveex-pf-search-foot:not(:empty) {
	padding: 8px 12px;
	border-top: 1px solid #e4eae2;
}

.reveex-pf-search-picked {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.reveex-pf-search-picked:empty {
	display: none;
}

.reveex-pf-search-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 6px 5px 11px;
	border: 1px solid #d3e2cb;
	border-radius: 999px;
	background: #eaf1e5;
	color: #1e311d;
	font-size: 12.5px;
	font-weight: 700;
}

.reveex-pf-search-pill button {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1e311d;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
}

.reveex-pf-search-pill button:hover,
.reveex-pf-search-pill button:focus-visible {
	background: #c8dd69;
}

.reveex-pf-apply {
	margin-top: 16px;
	background: #276c27;
	color: #ffffff;
	border: 0;
	font-weight: 700;
	font-size: 13.5px;
	padding: 12px 18px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.reveex-pf-apply:hover,
.reveex-pf-apply:focus-visible {
	background: #1e311d;
}

/* Botón "Mostrar filtros"/"Filtrar productos" — oculto en desktop, la
   etiqueta cambia según el breakpoint (tablet colapsa en línea, mobile abre
   un drawer — ver reglas @media más abajo). */
.reveex-pf-filters-bar {
	display: none;
}

.reveex-pf-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #e4eae2;
	background: #ffffff;
	color: #111111;
	font-weight: 700;
	font-size: 13.5px;
	padding: 11px 18px;
	border-radius: 12px;
	cursor: pointer;
}

.reveex-pf-toggle-label-mobile {
	display: none;
}

.reveex-pf-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 16, 12, 0.45);
	z-index: 90;
}

.reveex-pf-results {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.reveex-pf-results-count {
	font-size: 15px;
	font-weight: 700;
	color: #111111;
}

.reveex-pf-results-count strong {
	color: #1e311d;
	font-variant-numeric: tabular-nums;
}

.reveex-pf-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.reveex-pf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f6f8f5;
	border: 1px solid #e4eae2;
	color: #111111;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 8px 6px 12px;
	border-radius: 999px;
}

.reveex-pf-chip a {
	border: 0;
	background: #e4eae2;
	color: #111111;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 1;
	text-decoration: none;
}

.reveex-pf-clear-all {
	font-size: 12px;
	font-weight: 700;
	color: #1e311d;
	text-decoration: underline;
}

/* Botón "Novedades" — toggle vía enlace (?destacados=1, sin cambios), mismo criterio
   sin AJAX que el resto del buscador. Vive en `.reveex-pf-results-actions`,
   segundo hijo de `.reveex-pf-results` (fila ya en space-between), por eso
   queda arriba a la derecha de la grilla en escritorio; con flex-wrap ya
   heredado de `.reveex-pf-results` cae debajo del contador en tablet/móvil
   sin reglas responsive adicionales. */
.reveex-pf-results-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.reveex-pf-featured-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e4eae2;
	background: #ffffff;
	color: #111111;
	font-weight: 700;
	font-size: 12.5px;
	padding: 9px 14px;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reveex-pf-featured-toggle svg {
	width: 13px;
	height: 13px;
}

.reveex-pf-featured-toggle:hover,
.reveex-pf-featured-toggle:focus-visible {
	border-color: #276c27;
	color: #1e311d;
}

.reveex-pf-featured-toggle.is-active {
	background: #276c27;
	border-color: #276c27;
	color: #ffffff;
}

.reveex-pf-featured-toggle.is-active:hover,
.reveex-pf-featured-toggle.is-active:focus-visible {
	background: #1e311d;
	border-color: #1e311d;
	color: #ffffff;
}

/* Tablet (≤1024px, breakpoint oficial 820): sidebar oculta por defecto,
   el botón la despliega en línea (empuja la grilla, no overlay). */
@media (max-width: 1024px) {
	.reveex-pf-body {
		grid-template-columns: 1fr;
		padding: 18px 24px 40px;
	}

	.reveex-pf-filters-bar {
		display: flex;
		margin-bottom: 16px;
	}

	.reveex-pf-sidebar {
		position: static;
		display: none;
		margin-bottom: 20px;
		border: 1px solid #e4eae2;
		border-radius: 16px;
		padding: 16px;
		background: #f6f8f5;
	}

	.reveex-pf-sidebar.is-open {
		display: flex;
	}
}

/* Mobile (≤767px, breakpoint oficial 390): el mismo botón pasa a abrir un
   drawer lateral con fondo oscurecido — no un despliegue en línea. */
@media (max-width: 767px) {
	.reveex-pf-intro,
	.reveex-pf-body {
		padding-left: 20px;
		padding-right: 20px;
	}

	.reveex-pf-toggle-label-tablet {
		display: none;
	}

	.reveex-pf-toggle-label-mobile {
		display: inline;
	}

	.reveex-pf-sidebar {
		position: fixed;
		inset: 0 15% 0 0;
		z-index: 100;
		transform: translateX(-105%);
		transition: transform 0.28s ease;
		border-radius: 0 18px 18px 0;
		padding: 20px;
		overflow-y: auto;
		margin-bottom: 0;
	}

	.reveex-pf-sidebar.is-open {
		display: flex;
		transform: translateX(0);
	}

	.reveex-pf-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 999px;
		border: 1px solid #e4eae2;
		background: #ffffff;
		cursor: pointer;
	}

	.reveex-pf-backdrop.is-open {
		display: block;
	}
}

/* ==========================================================================
   Blog — filtro de categoría, grilla y ficha de artículo (reveex-news-*)
   Listado (index.php / archive.php) y ficha del blog nativo de WordPress.
   Sigue el mismo criterio que `.reveex-card-product` / `.reveex-product-grid`
   arriba: columnas fijas por breakpoint, no auto-fit.

   Mismo criterio que PDP/categoría/búsqueda (arriba) para páginas nativas
   fuera de Elementor: tipografía Plus Jakarta Sans (el @font-face ya está
   declarado más arriba) y reset del padding de fallback de
   `.reveex-site-main` para que la franja de breadcrumb llegue de borde a
   borde. Cubre index.php (posts page), archive.php (categoría/etiqueta/
   fecha/autor) y single.php (artículo) — las tres comparten la clase de
   body `reveex-blog-view` (ver `inc/helpers.php`). */
body.reveex-blog-view {
	font-family: "Plus Jakarta Sans", sans-serif;
}

body.reveex-blog-view .reveex-site-main {
	padding: 0;
}

/* Breadcrumb del blog — mismo componente `.reveex-pdp-breadcrumb-strip/row`
   que PDP/categoría/búsqueda, con el texto propio (sin depender de
   `.woocommerce-breadcrumb`), igual patrón que `.reveex-search-breadcrumb-*`. */
.reveex-blog-breadcrumb-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 13px;
	color: #6b7a70;
}

.reveex-blog-breadcrumb-row a {
	color: #6b7a70;
	text-decoration: none;
	transition: color 0.2s ease;
}

.reveex-blog-breadcrumb-row a:hover {
	color: #276c27;
}

.reveex-blog-breadcrumb-sep {
	margin: 0 6px;
}

.reveex-blog-breadcrumb-current {
	color: #111111;
	font-weight: 600;
}

/* Contenedor boxed 1140px — regla permanente del proyecto (CLAUDE.md § 6)
   aplicada también al fallback PHP: el listado y el artículo antes corrían
   a lo ancho completo del viewport. */
.reveex-blog-container {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 32px 64px;
}

.reveex-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

/* Propuesta A (aprobada): mismo filtro reutilizado tal cual dentro del
   artículo — entre la meta y el contenido, con separador propio en vez del
   margen pensado para el listado. */
.reveex-entry-category-filter {
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4eae2;
}

.reveex-entry-category-filter .reveex-category-filter {
	margin-bottom: 0;
}

.reveex-category-filter-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid #e4eae2;
	background: #ffffff;
	color: #5c6b59;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reveex-category-filter-pill:hover {
	border-color: #276c27;
	color: #276c27;
}

.reveex-category-filter-pill.is-active {
	background: #276c27;
	border-color: #276c27;
	color: #ffffff;
}

.reveex-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

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

@media (max-width: 767px) {
	.reveex-news-grid {
		grid-template-columns: 1fr;
	}
}

.reveex-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #e4eae2;
	border-radius: 16px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(30, 49, 29, 0.06);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.reveex-news-card:hover {
	box-shadow: 0 12px 30px -10px rgba(30, 49, 29, 0.28);
	transform: translateY(-3px);
}

.reveex-news-card-media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #e6f0e4, #eef4ec);
}

.reveex-news-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reveex-news-card-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ffffff;
	color: #276c27;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.reveex-news-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.reveex-news-card-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	color: #1e311d;
}

.reveex-news-card-title a {
	color: inherit;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.reveex-news-card-title a:hover,
.reveex-news-card-title a:focus-visible {
	color: #276c27;
}

.reveex-news-card-excerpt {
	margin: 0 0 16px;
	font-size: 14px;
	color: #5c6b59;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.reveex-news-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid #e4eae2;
	font-size: 12px;
	color: #5c6b59;
}

.reveex-news-card-link {
	color: #276c27;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.reveex-news-card-link:hover,
.reveex-news-card-link:focus-visible {
	text-decoration: underline;
}

.reveex-news-card a:focus-visible,
.reveex-category-filter-pill:focus-visible {
	outline: 2px solid #276c27;
	outline-offset: 2px;
}

/* ==========================================================================
   Catálogos — grilla de PDFs (ES/EN), 100% widgets nativos de Elementor
   (reconstruido 2026-08-21, reemplaza la versión con un widget HTML +
   chips de filtro por JS). Página "Catálogos" (post 1130): franja + fila
   de breadcrumb reutilizan `.reveex-pdp-breadcrumb-strip/row` tal cual.
   Se investigó mantener el visor en la misma página con widgets nativos
   (Popup por clic vía Action Links), pero no sobrevive una escritura
   directa a `_elementor_data` por SQL en esta build (4.2, "Atomic
   Editor") — ver `/docs/CAMBIOS.md` → "2026-08-21 (8)". Los botones abren
   el PDF real en pestaña nueva en vez de un visor embebido. **El filtro
   de chips Todos/Español/English SÍ se logró 100% nativo** (corrección
   2026-08-21 (13), tras un primer intento sin chips): cada chip y cada
   tarjeta llevan una clase `reveex-catalogos-chip--{all|es|en}` /
   `reveex-catalogos-card--{es|en}` en su Container — `css_classes` en un
   Container sí se renderiza (a diferencia de un widget), y
   `main.js` → `initCatalogFilters()` filtra leyendo esas clases con
   `classList`, sin depender de ningún atributo que Elementor no emite.
   Cada tarjeta es Container >
   (Container cover > Container badge [ES/EN] + Heading + Text Editor) +
   (Container body > Heading + Text Editor + Container acciones > 2
   Button "Ver"/"Descargar") — solo controles de contenido propio del
   widget (título, texto, link), nunca `css_classes` ni `custom_attributes`
   en un widget (confirmado que no se renderizan ahí en esta build; sí
   funcionan en un Container). **Corrección 2026-08-21 (10)**: la primera
   versión nativa había quitado la etiqueta de idioma por tarjeta y fusionado
   los 2 botones en uno solo — simplificaciones no pedidas ni necesarias por
   la limitación técnica real (que solo afecta filtro/visor); se repusieron
   para respetar el diseño de Propuesta C ya aprobado.
   ========================================================================== */

.reveex-catalogos-page {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: #333333;
}

.reveex-catalogos-chip-row {
	margin: 28px 0 0;
}

/* Corrección real (2026-08-22): con "content_width:full" (el que usan
   todos los contenedores de este componente) Elementor NO genera el div
   ".e-con-inner" — el gap/flex se aplican directo sobre el propio
   contenedor vía ".elementor-element:where(.e-con-full,.elementor-widget)"
   en frontend.min.css. Ese selector usa ":where()", que no suma
   especificidad (queda en 1 clase efectiva: ".elementor-element"), así
   que appuntar al contenedor propio con 2 clases (".e-con.mi-clase") ya
   gana sin depender del orden de carga — el intento anterior (apuntar a
   "> .e-con-inner") no hacía nada porque ese hijo no existe en el HTML
   real de un contenedor "full". */
/* !important justificado y documentado (regla del proyecto): esta
   propiedad ya perdió 2 veces contra reglas propias de Elementor con
   distinta especificidad en distintos hallazgos ("2026-08-21 (12)"/(14)",
   "2026-08-22 (1)/(2)") — no hay forma de anticipar con certeza qué otra
   regla interna de Elementor compite acá sin volver a auditar todo
   frontend.min.css cada vez. Cortando por lo sano. */
.e-con.reveex-catalogos-chip-row {
	gap: 4px !important;
	align-items: center;
}

/* "width" también está en la lista de propiedades que ".e-con" aplica por
   variable CSS (por defecto 100%) — sin esto cada chip ocupa toda la fila
   y se apilan uno debajo del otro en vez de quedar en línea. Mismo
   hallazgo que el badge de idioma, ver nota en ".e-con.reveex-catalogos-card". */
.e-con.reveex-catalogos-chip {
	width: auto;
}

/* Especificidad de 3 clases a propósito: Elementor compila un default
   global ".elementor-widget-button .elementor-button{background-color:
   var(--e-global-color-accent)}" (2 clases) en el CSS del post, que carga
   DESPUÉS de esta hoja — con solo 2 clases acá empataba y perdía. Confirmado
   2026-08-21 (el chip activo ya tenía 3 clases por ".is-active" y sí se
   veía bien; los inactivos, con 2, tomaban el color de acento del kit. */
.reveex-catalogos-chip .elementor-widget-button .elementor-button {
	border: 1px solid #e4eae2;
	background: #ffffff;
	color: #1e311d;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 999px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.reveex-catalogos-chip .elementor-widget-button .elementor-button:hover,
.reveex-catalogos-chip .elementor-widget-button .elementor-button:focus-visible {
	border-color: #276c27;
}

.reveex-catalogos-chip.is-active .elementor-widget-button .elementor-button {
	background: #276c27;
	border-color: #276c27;
	color: #ffffff;
}

.e-con.reveex-catalogos-count {
	margin-left: auto;
	width: auto;
	font-size: 13px;
	color: #6b7a70;
}

.reveex-catalogos-grid {
	padding: 18px 0 8px;
}

/* "content_width:full" (el de este contenedor) no genera ".e-con-inner" —
   el gap se aplica directo acá. Ver nota completa en
   ".e-con.reveex-catalogos-chip-row". */
.e-con.reveex-catalogos-grid {
	gap: 22px;
}

/* Especificidad ".e-con.reveex-catalogos-card" (2 clases) a propósito: el
   propio CSS base de Elementor (frontend.min.css) trae
   ".e-con{border-radius:var(--border-radius,0);overflow:var(--overflow,visible)}"
   con la misma especificidad de 1 clase que una regla ".reveex-catalogos-card"
   sola, y esa hoja se encola después de la del tema — gana por orden de
   carga y pisa border-radius/overflow. Confirmado 2026-08-21 comparando el
   orden real de los <link> en el HTML servido. */
.e-con.reveex-catalogos-card {
	background: #ffffff;
	border: 1px solid #e4eae2;
	border-radius: 14px;
	overflow: hidden;
	/* "flex-basis" (el 3er valor del shorthand), no solo "max-width": con
	   flex-shrink activo (el default), 3 tarjetas caben en una fila
	   encogiéndose por debajo de su ancho preferido en vez de saltar a la
	   fila siguiente — hay que fijar el ancho preferido real en cada
	   breakpoint, no solo un tope máximo. Esto es lo que se vio en la
	   captura real de mobile: 3 columnas angostas en vez de 1. */
	flex: 1 1 calc((100% - 44px) / 3);
	max-width: calc((100% - 44px) / 3);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.reveex-catalogos-card:hover {
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
}

.reveex-catalogos-card.is-hidden {
	display: none;
}

/* Portada con foto (2026-08-24, actualizado): la imagen ya no vive acá —
   se pasó a Estilo > Fondo del Container "Portada" en Elementor Pro
   (background_image nativo, editable desde el editor visual; compila su
   propio selector ".elementor-element-{id}" con más especificidad que
   cualquier regla de esta hoja, así que ni siquiera hace falta pelear la
   especificidad). Esta hoja solo pone el velo oscuro (gradiente, vía
   "::after" en vez de "background-image" para no competir por la misma
   propiedad con el fondo real de Elementor) para que el título blanco y
   el badge ES/EN sigan legibles sobre cualquier foto. Placeholder
   temporal aprobado por el usuario: las 10 tarjetas (5 ES + 5 EN) usan
   la misma foto vía Elementor hasta que existan imágenes reales por
   catálogo. ".is-tripa"/".is-carpeta" quedan sin efecto visual a
   propósito: la foto de Elementor es opaca y tapa el "background-color"
   que esas clases siguen fijando (no hace falta tocarlas). */
.reveex-catalogos-cover {
	position: relative;
	aspect-ratio: 4 / 3;
	padding: 16px;
	justify-content: flex-end;
}

.reveex-catalogos-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(10, 14, 10, 0.78) 0%, rgba(10, 14, 10, 0.32) 42%, rgba(10, 14, 10, 0.05) 68%);
}

.reveex-catalogos-cover.is-tripa {
	background-color: #6b204a;
}

.reveex-catalogos-cover.is-carpeta {
	background-color: #1e311d;
}

.e-con.reveex-catalogos-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	width: auto;
	z-index: 2;
}

/* Heading y Text Editor de la portada son hijos directos en flujo normal
   (hermanos del Container "badge") — sin "position:relative" acá, el
   "::after" (que se pinta después por ser el último en el box) quedaría
   arriba del texto en vez de abajo. */
.reveex-catalogos-cover > .elementor-widget-heading,
.reveex-catalogos-cover > .elementor-widget-text-editor {
	position: relative;
	z-index: 2;
}

.reveex-catalogos-cover .reveex-catalogos-badge .elementor-widget-text-editor p {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #111111;
}

/* Especificidad de 3 clases: el default global de Elementor
   ".elementor-widget-heading .elementor-heading-title{color:var(--e-global-color-primary)}"
   (2 clases) carga después de esta hoja y empataba con una regla de 2
   clases sola — mismo hallazgo que los chips, ver nota arriba. */
.reveex-catalogos-cover .elementor-widget-heading .elementor-heading-title {
	color: #ffffff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	font-family: "Plus Jakarta Sans", sans-serif;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.reveex-catalogos-cover .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	margin: 4px 0 0;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.reveex-catalogos-body {
	padding: 16px 18px 18px;
	flex-direction: column;
	flex: 1;
}

.e-con.reveex-catalogos-body {
	gap: 10px;
}

.reveex-catalogos-body .elementor-widget-heading .elementor-heading-title {
	font-size: 15.5px;
	color: #111111;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.reveex-catalogos-body .elementor-widget-text-editor p {
	margin: 0;
	font-size: 12.5px;
	color: #6b7a70;
}

.e-con.reveex-catalogos-actions {
	margin-top: auto;
	padding-top: 4px;
	gap: 8px;
}

.reveex-catalogos-actions .elementor-widget-button {
	flex: 1;
}

.reveex-catalogos-actions .elementor-button {
	width: 100%;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	font-weight: 700;
	border-radius: 999px;
	padding: 10px 14px;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reveex-catalogos-actions .elementor-widget-button:first-child .elementor-button {
	background: #6b204a;
	color: #ffffff;
}

.reveex-catalogos-actions .elementor-widget-button:first-child .elementor-button:hover,
.reveex-catalogos-actions .elementor-widget-button:first-child .elementor-button:focus-visible {
	background: #c475a3;
	color: #16241c;
}

.reveex-catalogos-actions .elementor-widget-button:last-child .elementor-button {
	background: transparent;
	border: 1px solid #e4eae2;
	color: #1e311d;
}

.reveex-catalogos-actions .elementor-widget-button:last-child .elementor-button:hover,
.reveex-catalogos-actions .elementor-widget-button:last-child .elementor-button:focus-visible {
	background: #c8dd69;
	border-color: #c8dd69;
}

/* Visor en línea (2026-08-22) — panel nativo (Container/Heading/Button,
   sin widget HTML) oculto por defecto; `main.js` → `initCatalogViewer()`
   crea el `<iframe>` con el PDF real en tiempo real al hacer clic en
   "Ver" y lo agrega a `.reveex-catalogos-viewer-body` (vacío en
   `_elementor_data`) — evita por completo Custom Attributes/Action Links,
   confirmados rotos por SQL en esta build (ver "2026-08-21 (8)"). */
.e-con.reveex-catalogos-viewer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(15, 20, 15, 0.6);
	backdrop-filter: blur(2px);
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px;
}

.reveex-catalogos-viewer-overlay.is-open {
	display: flex;
}

.e-con.reveex-catalogos-viewer {
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	max-width: 900px;
	height: min(86vh, 960px);
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
}

.reveex-catalogos-viewer-head {
	background: #1e311d;
	padding: 14px 18px;
	align-items: center;
	flex-shrink: 0;
}

.e-con.reveex-catalogos-viewer-head {
	gap: 12px;
}

.reveex-catalogos-viewer-head .elementor-widget-heading {
	flex: 1;
}

/* Título/botones de este panel salían con el color por defecto del kit
   global de Elementor (celeste en heading, verde de acento en button) —
   mismo hallazgo que "2026-08-21 (14)" en las tarjetas, repetido acá
   porque el panel se armó en una escritura aparte. `!important` en vez de
   perseguir la especificidad exacta otra vez: ya son 3 componentes
   distintos peleando la misma pelea contra CSS que Elementor recompila
   distinto cada vez. */
.reveex-catalogos-viewer-head .elementor-heading-title {
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
}

.reveex-catalogos-viewer-head .elementor-button {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
	min-width: 0;
	padding: 7px 16px !important;
	border-radius: 999px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
}

.reveex-catalogos-viewer-head .elementor-button:hover,
.reveex-catalogos-viewer-head .elementor-button:focus-visible {
	background: rgba(255, 255, 255, 0.22) !important;
}

.reveex-catalogos-viewer-toolbar {
	background: #f6f8f5;
	border-bottom: 1px solid #e4eae2;
	padding: 10px 18px;
	align-items: center;
	flex-shrink: 0;
}

.e-con.reveex-catalogos-viewer-toolbar {
	gap: 18px !important;
}

.reveex-catalogos-viewer-toolbar .elementor-button {
	background: transparent !important;
	color: #276c27 !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	padding: 0 !important;
	min-width: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.reveex-catalogos-viewer-toolbar .elementor-button:hover,
.reveex-catalogos-viewer-toolbar .elementor-button:focus-visible {
	color: #1e311d !important;
}

/* La misma propiedad "flex" tiene un default de Elementor
   (".e-con.e-flex{...;flex:var(--flex-grow) ...}", --flex-grow:0) con
   idéntica especificidad de 2 clases que compite acá — sin "!important"
   el cuerpo del visor no crece y el iframe queda con una altura mínima
   (esto es lo que se vio en la captura real: caja oscura chica con
   scroll, mucho blanco debajo). */
.e-con.reveex-catalogos-viewer-body {
	flex: 1 1 auto !important;
	min-height: 0;
	background: #dfe6dd;
	overflow: hidden;
	display: flex !important;
}

.reveex-catalogos-viewer-body iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

@media (max-width: 1024px) {
	.e-con.reveex-catalogos-card {
		flex-basis: calc((100% - 22px) / 2);
		max-width: calc((100% - 22px) / 2);
	}
}

@media (max-width: 767px) {
	.e-con.reveex-catalogos-card {
		flex-basis: 100%;
		max-width: 100%;
	}

	/* Repone el comportamiento mobile de la maqueta aprobada (Propuesta C):
	   el contador pasa a su propia línea a todo el ancho en vez de quedar
	   empujado a la derecha por "margin-left:auto" — se había perdido al
	   reconstruir la página en widgets nativos. */
	.e-con.reveex-catalogos-count {
		margin-left: 0;
		width: 100%;
	}

	.e-con.reveex-catalogos-viewer-overlay {
		padding: 0;
	}

	.e-con.reveex-catalogos-viewer {
		max-width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

/* ==========================================================================
   Componentes futuros (reservados)
   ========================================================================== */

/*
 * Las siguientes clases se implementarán cuando
 * se construyan los bloques de Elementor:
 *
 * .reveex-card-market
 * .reveex-certificate-card
 * .reveex-floating-social
 * .reveex-section-heading
 * .reveex-cta
 * .reveex-language-switcher
 *
 * `.reveex-news-card` (reservada originalmente) queda retirada de esta
 * lista: implementada como la ficha del blog nativo de WordPress (listado
 * en index.php/archive.php vía template-parts/content-card.php) — ver
 * bloque "Blog — filtro de categoría, grilla y ficha de artículo" arriba.
 *
 * `.reveex-hero` (reservada originalmente) queda retirada de esta lista:
 * el Hero ya construido en la portada usa `reveex-hero-main` (nombre
 * elegido al armar el contenido, antes de esta refactorización) — ver
 * componente arriba.
 *
 * `.reveex-card-product` y `.reveex-product-grid` (reservadas originalmente)
 * quedan retiradas de esta lista: implementadas para la tarjeta/grilla de
 * producto compartida entre "Productos relacionados" (Single Product) y
 * `taxonomy-product_cat.php` — ver bloque "Grid y tarjeta de producto"
 * arriba.
 *
 * `.reveex-product-filter` (reservada originalmente) queda retirada de esta
 * lista: implementada como el sidebar de filtros de `template-productos.php`
 * bajo el prefijo `.reveex-pf-*` — ver bloque "Página de Productos" arriba.
 */

/* ==========================================================================
   Blog — registro sticky (Profesionales + entrada individual)
   Diseños aprobados 2026-09-24 (mockups "Profesionales 1" y "Entradas 3"),
   sin categoría, fecha ni tiempo de lectura. Formulario = shortcode real
   `[reveex_contact_form]` (plugin reveex-contactos); aquí solo se contiene y
   se compacta con CSS de envoltorio, sin tocar su markup.

   Alturas reales del header (Elementor, medidas en el sitio en vivo al hacer
   scroll): escritorio 150px, tablet 121px, móvil 102px. Por eso el sticky usa
   166px (150+16) en escritorio y 137px (121+16) en tablet; en móvil el
   formulario no es lateral (va intercalado/al final + CTA persistente).
   ========================================================================== */

/* ---------- Columna sticky del formulario ---------- */
.reveex-blog-aside {
	align-self: stretch;
	scroll-margin-top: 170px;
}

.reveex-sticky-form {
	position: sticky;
	top: 166px;
	max-height: calc(100vh - 178px);
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: 16px;
}

.reveex-sticky-form::-webkit-scrollbar {
	display: none;
}

/* Formulario compacto dentro de la columna (el plugin trae padding para
   480px de ancho; a ~320px no cabe en una laptop de 768px de alto). */
.reveex-form-slot .reveex-contact-form {
	max-width: none;
}

.reveex-form-slot .reveex-contact-form__form {
	padding: 16px 18px 18px;
	border-radius: 16px;
}

.reveex-form-slot .reveex-contact-form__title {
	font-size: 18px;
}

.reveex-form-slot .reveex-contact-form__description {
	font-size: 12.5px;
	margin-bottom: 12px;
}

.reveex-form-slot .reveex-contact-form__field {
	margin-bottom: 8px;
}

.reveex-form-slot .reveex-contact-form__label {
	margin-bottom: 4px;
}

.reveex-form-slot .reveex-contact-form__input {
	padding: 8px 12px;
	font-size: 13px;
}

.reveex-form-slot .reveex-contact-form__radio-row {
	gap: 5px;
}

.reveex-form-slot .reveex-contact-form__radio {
	flex: 1 1 calc(50% - 3px);
	min-width: 0;
	padding: 6px 10px;
	font-size: 12px;
	gap: 6px;
}

.reveex-form-slot .reveex-contact-form__check-row {
	margin-bottom: 8px;
}

.reveex-form-slot .reveex-contact-form__check-row label {
	font-size: 11.5px;
	line-height: 1.45;
}

.reveex-form-slot .reveex-contact-form__submit {
	padding: 11px 18px;
}

/* ---------- Profesionales (index.php): tarjetas | formulario ---------- */
.reveex-blog-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
}

.reveex-blog-split:not(:has(.reveex-blog-aside)) {
	grid-template-columns: minmax(0, 1fr);
}

.reveex-blog-split .reveex-news-grid {
	grid-template-columns: repeat(2, 1fr);
}

.reveex-news-card-meta {
	justify-content: flex-end;
}

.reveex-register-banner,
.reveex-register-fab,
.reveex-register-bar {
	display: none;
}

/* Paginación numérica */
.reveex-blog-main .navigation.pagination {
	margin-top: 40px;
}

.reveex-blog-main .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.reveex-blog-main .page-numbers {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid #e4eae2;
	font-size: 14px;
	font-weight: 700;
	color: #5c6b59;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.reveex-blog-main a.page-numbers:hover {
	border-color: #276c27;
	color: #276c27;
}

.reveex-blog-main .page-numbers.current {
	background: #276c27;
	border-color: #276c27;
	color: #ffffff;
}

/* ---------- Entrada individual: artículo | formulario ---------- */
.reveex-entry-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 56px;
	align-items: start;
}

.reveex-entry-split--no-form {
	grid-template-columns: minmax(0, 1fr);
}

.reveex-post-art {
	min-width: 0;
}

.reveex-post-title {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #111111;
}

.reveex-post-cover {
	margin: 26px 0 30px;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #e6f0e4, #eef4ec);
}

.reveex-post-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reveex-post-head {
	margin-bottom: 4px;
}

.reveex-post-content {
	min-width: 0;
	font-size: 17px;
	line-height: 1.85;
	color: #333333;
}

.reveex-post-content p {
	margin: 0 0 1.15em;
}

.reveex-post-content h2 {
	margin: 1.9em 0 0.6em;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 700;
	color: #1e311d;
	scroll-margin-top: 180px;
}

.reveex-post-content h3 {
	margin: 1.6em 0 0.5em;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	color: #1e311d;
}

.reveex-post-content ul,
.reveex-post-content ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}

.reveex-post-content li {
	margin-bottom: 0.5em;
}

.reveex-post-content li::marker {
	color: #276c27;
	font-weight: 700;
}

.reveex-post-content a {
	color: #276c27;
}

.reveex-post-content blockquote {
	margin: 1.6em 0;
	padding: 18px 22px;
	border-left: 4px solid #c8dd69;
	background: #f6f8f5;
	border-radius: 0 14px 14px 0;
	font-size: 18px;
	line-height: 1.6;
	color: #1e311d;
	font-weight: 600;
}

.reveex-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.reveex-post-content figure {
	margin: 1.6em 0;
}

.reveex-post-content figcaption {
	font-size: 13px;
	color: #6b7a70;
	margin-top: 8px;
}

.reveex-post-content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	margin: 1.4em 0;
	border: 1px solid #e4eae2;
	border-radius: 14px;
}

.reveex-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.5;
}

.reveex-post-content th {
	background: #f6f8f5;
	text-align: left;
	font-weight: 700;
	color: #1e311d;
	padding: 12px 16px;
}

.reveex-post-content td {
	padding: 12px 16px;
	border-top: 1px solid #e4eae2;
}

.reveex-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid #e4eae2;
}

.reveex-post-tags span {
	font-size: 12.5px;
	font-weight: 600;
	background: #f6f8f5;
	border: 1px solid #e4eae2;
	padding: 6px 12px;
	border-radius: 999px;
}

.reveex-post-tags a {
	color: #5c6b59;
	text-decoration: none;
}

.reveex-register-btn,
.reveex-register-banner-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 10px;
	padding: 13px 22px;
	background: #6b204a;
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.reveex-register-btn:hover,
.reveex-register-banner-btn:hover {
	background: #c475a3;
	color: #1e311d;
}

/* Anterior / siguiente */
.reveex-post-tail .post-navigation {
	margin-top: 40px;
}

.reveex-post-tail .post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.reveex-post-tail .post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.reveex-post-tail .post-navigation a {
	display: block;
	padding: 18px 20px;
	border: 1px solid #e4eae2;
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reveex-post-tail .post-navigation a:hover {
	border-color: #276c27;
	box-shadow: 0 10px 24px -14px rgba(30, 49, 29, 0.4);
}

.reveex-post-tail .reveex-nav-subtitle {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7a70;
	margin-bottom: 4px;
}

.reveex-post-tail .reveex-nav-title {
	font-weight: 700;
	color: #1e311d;
	font-size: 15px;
	line-height: 1.35;
}

/* Relacionados (solo título — sin categoría/fecha/lectura) */
.reveex-related {
	margin-top: 64px;
	padding-top: 44px;
	border-top: 1px solid #e4eae2;
}

.reveex-related h2 {
	margin: 0 0 22px;
	font-size: 24px;
	font-weight: 700;
	color: #1e311d;
}

.reveex-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.reveex-related-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	padding: 20px;
	border: 1px solid #e4eae2;
	border-radius: 16px;
	background: #ffffff;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.reveex-related-card:hover {
	box-shadow: 0 12px 30px -10px rgba(30, 49, 29, 0.28);
	transform: translateY(-3px);
}

.reveex-related-card h3 {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	color: #1e311d;
}

.reveex-related-link {
	font-size: 13px;
	font-weight: 700;
	color: #276c27;
}

/* Barra de progreso de lectura */
.reveex-read-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: #c8dd69;
	z-index: 10000;
	pointer-events: none;
}

/* ---------- Tablet (≤1024px, incluye 820px): columna derecha más angosta ---------- */
@media (max-width: 1024px) {
	.reveex-sticky-form {
		top: 137px;
		max-height: calc(100vh - 149px);
	}

	.reveex-blog-split {
		grid-template-columns: minmax(0, 1fr) 290px;
		gap: 28px;
	}

	.reveex-blog-split .reveex-news-grid {
		grid-template-columns: 1fr;
	}

	.reveex-entry-split {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 28px;
	}

	.reveex-post-title {
		font-size: 32px;
	}

	.reveex-related-grid {
		grid-template-columns: 1fr 1fr;
	}

	.reveex-related-grid > :nth-child(3) {
		display: none;
	}

	.reveex-post-content h2 {
		scroll-margin-top: 140px;
	}
}

/* ---------- Móvil (≤767px): sin lateral; CTA persistente, sin invadir la lectura ---------- */
@media (max-width: 767px) {
	.reveex-sticky-form {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* Profesionales: formulario al final + botón flotante + aviso intermedio */
	.reveex-blog-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.reveex-blog-aside {
		scroll-margin-top: 110px;
	}

	.reveex-register-banner {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 22px 24px;
		border-radius: 16px;
		background: #f6f8f5;
		border: 1px solid #e4eae2;
	}

	.reveex-register-banner strong {
		display: block;
		color: #1e311d;
		font-size: 16px;
		margin-bottom: 4px;
	}

	.reveex-register-banner span {
		font-size: 13px;
		color: #5c6b59;
	}

	.reveex-register-fab {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 9000;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 14px 20px;
		border-radius: 999px;
		border: 0;
		background: #6b204a;
		color: #ffffff;
		font-family: inherit;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		box-shadow: 0 14px 30px -8px rgba(107, 32, 74, 0.55);
		transform: translateY(140%);
		transition: transform 0.25s ease;
	}

	.reveex-register-fab.is-visible {
		transform: none;
	}

	/* Entrada: el formulario se intercala tras la primera sección */
	.reveex-entry-split {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.reveex-post-art {
		display: contents;
	}

	.reveex-post-head {
		order: 1;
		min-width: 0;
	}

	.reveex-post-part-a {
		order: 2;
	}

	.reveex-entry-split .reveex-blog-aside {
		order: 3;
		margin: 8px 0 12px;
		min-width: 0;
	}

	.reveex-post-part-b {
		order: 4;
	}

	.reveex-post-tail {
		order: 5;
		min-width: 0;
	}

	.reveex-post-title {
		font-size: 27px;
	}

	.reveex-post-cover {
		margin: 20px 0 22px;
	}

	.reveex-post-content {
		font-size: 16.5px;
	}

	.reveex-post-content h2 {
		font-size: 22px;
		scroll-margin-top: 110px;
	}

	.reveex-post-tail .post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	.reveex-post-tail .post-navigation .nav-next {
		grid-column: auto;
	}

	.reveex-related-grid {
		grid-template-columns: 1fr;
	}

	.reveex-related-grid > :nth-child(3) {
		display: flex;
	}

	.reveex-register-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: #1e311d;
		color: #ffffff;
		transform: translateY(110%);
		transition: transform 0.25s ease;
	}

	.reveex-register-bar.is-visible {
		transform: none;
	}

	.reveex-register-bar span {
		font-size: 13px;
		line-height: 1.35;
	}

	.reveex-register-bar strong {
		display: block;
	}

	.reveex-register-bar .reveex-register-btn {
		background: #c8dd69;
		color: #1e311d;
		padding: 11px 18px;
		border-radius: 999px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveex-register-fab,
	.reveex-register-bar {
		transition: none;
	}
}