div{
   box-sizing: border-box;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1rem;
}
module {
    display: none;
}

:root{
	--btn_color: #ff6000;

--site-ancho: 90vw;--site-margen: 30px;--site-desplazamiento: 20px;--site-carril: calc(var(--site-ancho) - var(--site-margen) * 2);--site-carril-izq: calc(var(--site-desplazamiento) + var(--site-margen));--site-carril-der: calc(100% - var(--site-carril-izq) - var(--site-carril));}

body
{

	overflow-y: scroll;	
	margin: 0px;
	-webkit-font-smoothing: antialiased;
    background-color: #e9ebee;

    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    font-size: 1.4rem;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   LA CABECERA DEL SITIO, Y SOLO ELLA
   ───────────────────────────────────────────────────────────────────
   Estas reglas eran de TIPO --`header`, `header .logo`, `header .content`…--
   y por tanto alcanzaban a CUALQUIER `<header>` de cualquier componente:
   una ficha con su propia cabecera heredaba `position:sticky`, el fondo
   blanco y `z-index:1000`, y se colocaba donde no debía sin dar un solo
   error. Ya pasó en `TRegisterQuick` --la marca 92px por encima de su
   tarjeta-- y volvió a pasar en la pantalla de Soporte.

   `body > header` acota a la cabecera de verdad, que cuelga del body, sin
   depender de una clase que el portal del vendedor no pondría al
   sustituirla. Las cabeceras internas de los componentes quedan libres.

   Y por lo mismo el JS busca `body > header`: con un `<header>` de
   componente antes en el DOM, `querySelector('header')` cogía el
   equivocado y medía la cabecera que no era.
   ═══════════════════════════════════════════════════════════════════ */
body > header
{
clear:both;

border-bottom: 0px solid #bbb;
background-color: #fff;
 /*position: fixed;   */
z-index: 100;
width: 100%;


z-index: 1000;
transition: box-shadow 0.3s linear;
align-items: flex-start;

/* LA CABECERA NO SE ESCONDE.
   Estaba en `top: -92px`, y ese número no era un ajuste fino: es la altura de
   la fila de arriba --logo, buscador, cuenta--, así que al bajar se salía
   entera de la pantalla y solo quedaba pegada la barra de navegación. En una
   tienda con filtros y rejilla, el buscador y el carrito son justo lo que hay
   que tener a mano mientras se recorre el catálogo.
   Con `top: 0` la cabecera se queda completa y su sombra la separa del
   contenido que pasa por debajo. */
top: 0;
position: sticky;
transition: box-shadow 0.3s ease; /* Animación suave */
}

body > header.sticky-shadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



/* EL LOGO, EN SU PROPORCION.
   Estaba clavado a 100x100: un logo que no fuera cuadrado se aplastaba
   --el de 267x400 salia estirado a lo ancho--. Ahora la caja es un TOPE,
   no una medida: la imagen crece hasta donde quepa y conserva su ratio. */
body > header .logo
{
	max-width: 100px;
    max-height: 100px;
	width: auto;
    height: auto;
    object-fit: contain;
	z-index: 5000;
	cursor: pointer;
    margin-right: 20px;    
	position: relative;
	top: 10px;

}



body > header .finder
{
	border-radius: 5px;
	border: 1px solid #aaa;
	display: flex;
	color: #000;
	cursor: pointer;
	height: 35px;
	top: 20px;
	position: relative;
	box-sizing: border-box;
	flex: auto;
}

body > header .usermenu
{
	position: relative;
	min-width: 200px;
    top: -11px;
    display: flex;
    	justify-content: space-around;
}

body > header .usermenu > div
{
	display: inline-block;
	width: auto;
	margin-top: 10px;
}

body > header .finder input
{
	width: 100%;
	border: 0px solid #aaa;
	font: 15px sans-serif !important;
}

body > header .categoriesSelectorFinder
{
	padding: 5px;
	margin-right: 10px;
	
	border-right: 1px solid #aaa;
}




body > header .content
{
	position: relative;
	margin: auto;
	max-width: 1000px;
	
}



/* ------------------ MENU ---------------------------------- */

nav{
    	
		background-color: #FFF; 
		/* z-index: 1 Y NO 10000.
		 *
		 * ESTE era el que tapaba el panel de notificaciones. La cabecera tiene DOS
		 * `.body-content`: uno con la sesion --donde vive la campana y su panel-- y
		 * otro dentro de este `nav`, con el menu de categorias. Con el nav en 10000,
		 * los nombres del menu se pintaban por delante del panel abierto, que parecia
		 * translucido.
		 *
		 * Con 1 basta: la barra solo necesita quedar sobre el contenido de la pagina,
		 * no sobre lo que se abre desde la propia cabecera. */
		z-index: 1;
		border-bottom: 1px solid #bbb;
		
}

nav .body-content{
   display:flex;
       overflow: hidden;
}

/* LA CAPA DE LA SESION, UN PUNTO POR ENCIMA DEL MENU.
 *
 * La cabecera tiene DOS `.body-content` hermanos dentro del mismo `header`: este
 * --con la sesion, el carrito y la campana-- y el del `nav` con las categorias. Con
 * los dos al mismo z-index gana el segundo por orden de documento, y los nombres
 * del menu seguian pintandose por delante del panel de notificaciones aunque el
 * `nav` ya estuviera en 1.
 *
 * Es el hijo DIRECTO del header, que es lo que lo distingue del otro sin tocar el
 * menu. */
body > header > .body-content{
   z-index: 2;
}

body > header .logo{transition: all 0.3s ease; opacity: 1;}
/* Y EL LOGO NO SE APAGA. Se ocultaba al pegarse --tenía sentido cuando la
   cabecera se encogía y había que ganar sitio-- pero con la barra entera a la
   vista, un hueco en blanco donde estaba el logo es un fallo, no un ahorro. */
body > header.sticky-shadow .logo{ opacity: 1; }

 nav .mainmenu{
  transition: margin-left 0.3s ease;
   margin-left: 0px;
}

nav.sticky-active .mainmenu{    
   margin-left: 50px;
}

 nav .logo{
    opacity: 0;
    transition: all 0.3s ease;
	position: absolute;
    width: 59px;
    top: -3px;
}
nav.sticky-active .logo{

    opacity: 1;
}


nav ul.mainmenu
{
	margin-top: 0px;

	position: relative;
	display: inline-block;

	padding-left: 20px;
	justify-content: flex-start;
}

nav ul.mainmenu li
{
	
	font: bold 15px Arial;
	color: #808080;
	position: relative;
	white-space: nowrap;
	display: inline-block;
}

nav ul.mainmenu li li
{
	display: block;
}

/* submenu 1*/
nav ul.mainmenu > li:hover > ul
{
	left: 0px;
	display: block;
	top: calc(100% - 1px);
	background-color: #fff;
}

/* submenu 2*/
nav ul.mainmenu ul
{
	position: absolute;
	left: 100%;
	display: none;
	padding-left: 20px;
	box-shadow: 1.3em 1.3em 2em rgb(0 0 0 / 30%);
}

nav ul.mainmenu ul > li:hover ul
{
	top: 0px;
	left: 100%;
	display: block;
	background-color: #fff;

}


/* -------------------------*/

nav ul.mainmenu li, nav a, nav a:active, nav a:focus, nav a:visited
{
	font: bold 15px Arial;
	color: #808080;
    padding: 8px;
}

nav ul.mainmenu li:hover
{
	cursor: pointer;
}
nav ul.mainmenu li:hover > a
{
	color: #de661a;
	cursor: pointer;
	text-decoration: none;
	/*background: rgb(242, 242, 242);*/
}

/* <img src="images/categoriesIcon.png" height="20" style="position: absolute; left: 2px; top: 6px; " /> */
nav ul.mainmenu > ul > li:first-child
{
	margin-right: 50px;
	background-size: cover;
}

nav ul.mainmenu li[data-icon]
{
	background: var(--bg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position-y: center;
	padding-left: 25px !important;
}

nav ul.mainmenu li[data-icon]:hover
{
	background: var(--bg-hover);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position-y: center;
}



/* ------------------ END MENU ---------------------------------- */


    
.body-content
{
	/* El relleno sale de la misma variable que el ancho: una página que se
	   alinee con este carril copia las dos y arranca en la misma vertical. */
	padding: 0px var(--site-margen) 0px var(--site-margen);
	clear: both;
	
	position: relative;
	/* z-index: 1 Y NO 100.
	 *
	 * Con 100, el menu de categorias --que vive aqui dentro-- se pintaba ENCIMA
	 * del panel flotante de notificaciones: el panel tapaba la barra pero los
	 * nombres del menu se leian por delante, como si el panel fuera translucido.
	 *
	 * Basta con 1: esta capa solo necesita quedar sobre el fondo de la pagina, no
	 * sobre lo que se abre por encima de ella. */
	z-index: 1;
    margin:0px auto;
	min-width: 800px;
                    	width: 100%;max-width: var(--site-ancho);margin-left: var(--site-desplazamiento);
}

/* ── EN EL MÓVIL Y LA TABLETA (≤ 860 px) EL CARRIL SE SUELTA ────────────
 *
 * Ese `min-width: 800px` hacía que TODO el sitio midiera 880 px en un teléfono
 * (la cabecera, el catálogo, la cesta…): `body{overflow-x:hidden}` escondía la
 * barra, no el desplazamiento. Solo la ficha lo soltaba, a su manera
 * (`TArticleProfile.css`).
 *
 * EL CORTE SUBIÓ DE 760 A 860 (16/09/2026), Y NO ES UN AJUSTE FINO.
 * Con 760, el problema seguía vivo de 761 a 835: `min-width: 800px` más los
 * 20 px de desplazamiento dan una página de 820, así que un iPad en vertical
 * --768, 810 u 820-- se desplazaba de lado en TODAS las páginas. Y la fila de
 * la cabecera de escritorio mide 790, así que a 768 tampoco cabía la cabecera.
 * 860 es además el corte que la tienda ya usaba para apilar su columna de
 * filtros: un solo número para el carril, la cabecera y la tienda.
 * Medido y escrito en PendingWorks/TIENDA-MOVIL.md §1.
 *
 * Y el carril, a la medida del teléfono: los 90vw del ajuste de ADMIN, los 20 px
 * de desplazamiento y los 30 px de relleno están pensados para un monitor, y a
 * 400 px dejaban 290 útiles. SE CAMBIAN LAS VARIABLES y no las reglas: las
 * páginas a sangre (`flush`) se alinean con ellas y siguen alineadas. */
@media (max-width: 860px){
	:root{
		--site-ancho: 100vw;
		--site-margen: 16px;
		--site-desplazamiento: 0px;
	}

	.body-content{ min-width: 0; }
}




main
{
	min-height: 400px;
	margin-top: 0px;
	padding: 0px;
	width: 100%;
	color: #FFF;
	border: 0px solid #9C6;
	    z-index: 3;

	position: relative;

	min-height: 60vh;

	


          
}



main #columna_izq
{
	min-height: 650px;
	position: relative;
	margin: 0;
	padding: 0;
	width: 200px;
	border: 0px solid;
	left: 10px;
	margin-top: 0px;

	display: inline-block;
	vertical-align: top;
	
	border-radius: 5px;
	
	margin-right: 20px;
	border: 0px solid #ccc;
}


main #columna_central
{
	
	flex: auto;
}

main #columna_der
{
	min-height: 650px;
	position: relative;
	width: 180px;
	left: 0;
	margin: 0;
	border: 0px solid;
	padding: 0px;

	display: inline-block;
	vertical-align: top;
	background-color: #fff;
	border-radius: 5px;
	
	border: 1px solid #ccc;
}




.mapa_web
{
	width: 1000px;
	margin: auto;
	margin-bottom: 80px;
	opacity: 0.9;
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #e8e8e8;
}



.pathnav
{
	display: flex;
	margin-top: -20px;	
	width: 100%;
}
.pathnav a
{
	font: normal 15px Arial, Verdana, Helvetica;
}
.pathnav div
{
	display: flex;
}
.pathnav span{
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
  
}

.pathnav .separator{
    font-size: 24px;
    height: 30px;
    padding: 5px;
    top: 5px;
    position: relative;
    background-color: transparent;
    border:none;
}

.pathnav svg
{
	width: 15px;
}

 .categorySelector
{
    width: 230px;
    border: 0px !important;
    width: 250px;
    outline: none;    

    /*
     * FONDO BLANCO, COMO EL BUSCADOR DE AL LADO.
     *
     * Era `#e9ebee` --gris-- y dentro el TSelect trae su `.wrap` con fondo
     * blanco y borde propio: se veía una caja blanca recuadrada metida dentro
     * de una caja gris, dos cajas donde el diseño tiene un solo campo. Con el
     * fondo igual que el del buscador y el borde del `.wrap` quitado (abajo),
     * lo único que separa las dos mitades es la línea vertical de la derecha,
     * que es lo que tiene que separarlas.
     */
    background-color: #fff !important;

    /*
     * EL TSelect DE DENTRO, CENTRADO.
     *
     * Aquí había `padding: 6px` con `height: 33px !important`, y con
     * `box-sizing: border-box` eso deja 21px de caja de contenido para un
     * TSelect que mide 31: se salía 10px por abajo y el desplegable quedaba
     * pegado al borde de arriba, descuadrado respecto al buscador de al lado.
     * Medido en el navegador.
     *
     * Con la caja en flex y `align-items: center` el hijo se coloca solo, mida
     * lo que mida, y el relleno se queda solo en los lados --que es el que hace
     * falta--.
     */
    display: flex;
    align-items: center;
    padding: 0 6px;

    border-radius: 5px 0px 0px 5px;   
	position: relative;
  
    height: 33px !important;
    border-radius: 0px !important;
    border-right: 1px solid #bbb !important;
}

/* El hijo ocupa el ancho disponible: como ítem flex se encogería a su
   contenido y el desplegable saldría más estrecho que su caja. */
.categorySelector > .TSelect { flex: 1; min-width: 0; }

/* Y sin caja propia: el recuadro lo pone ya `.categorySelector`. El `.wrap` del
   TSelect trae de serie su borde y su fondo blanco --que es lo correcto cuando
   vive suelto en un formulario-- y aquí dibujaba una segunda caja dentro de la
   primera. El desplegable que se abre NO se toca: ese sí necesita su marco. */
.categorySelector .TSelect > .wrap {
    border: 0;
    background: transparent;
}

.categorySelector > i.uil{
    top: -10px;
    right: -2px;
 }
.categorySelector ul.selection span{
	font: 15px Arial;
}
.categorySelector ul.popup span{
	font: 15px Arial;
}




/*
 * ═══════════════════════════════════════════════════════════════════
 *  LA CAJA DE SESIÓN TRAE SU PROPIO CSS
 * ═══════════════════════════════════════════════════════════════════
 *
 * Aquí estaban copiadas las reglas de `TSessionBox` --las mismas que ya vivían
 * en la hoja del componente-- y las dos copias se habían separado: la de aquí
 * no traía el `left: 15px` de la otra, así que la caja aparecía en un sitio u
 * otro según cuál se cargara. El marcado ya se unificó; esto es la otra mitad.
 *
 * SE LEE DEL FICHERO, no se vuelve a escribir. La hoja del componente no entra
 * en el bundle de arranque --ese solo vigila Tjquery, Tbasic y TProductSearch-- y
 * meterla ahí arrastraría también su PHP, que pintaría un segundo `#logoutBox`
 * dentro del div oculto de plantillas: dos elementos con el mismo id. Volcarla
 * aquí trae lo que hace falta y nada más.
 */

/*
 * ESTA HOJA ES LA ÚNICA. `base.php` la vuelca en su `<style>` con un
 * `readfile()` en vez de llevar su propia copia: antes tenía las mismas reglas
 * duplicadas y sin el `left: 15px` de aquí, así que la caja aparecía en un
 * sitio u otro según cuál se cargara.
 *
 * (El `left: 15px` se quitó al unificarlas: no lo tenía la versión que regía en
 * la tienda, y ponerlo ahora habría movido la cabecera de todo el sitio.)
 */
.TSessionBox{
    position: relative;
    box-sizing: border-box;
}

/* EL ICONO DE DEPURACIÓN DEL ADMIN. Antes era un `style=""` puesto por el JS
   que lo creaba (`top:-13px; cursor:pointer; position:relative`); al pasar el
   marcado a `TSessionBox.php` (`$adminDebugTool`), su sitio viene aquí. */
.sb-admin-debug{
    position: relative;
    top: -13px;
    cursor: pointer;
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS `<iconify-icon>` RESERVAN SU HUECO DESDE EL PRIMER PINTADO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * `iconify-icon` es un custom element: hasta que el navegador lo define y el
 * SVG llega -de la API de Iconify o de su caché en `localStorage`, unos
 * milisegundos siempre-, la caja no tiene NADA dentro. Sin ancho ni alto
 * declarados aquí, esa caja mide 0×0 -su propia hoja interna solo pone
 * `display:inline-block`, nunca un tamaño- y en cuanto el icono llega salta a
 * su tamaño real: el hueco se mueve, y con él la campana, el carrito, el
 * avatar y «Salir» que tiene al lado. Se ve más en la caja de sesión porque es
 * la que tiene más iconos seguidos.
 *
 * `1em` porque es al revés de como se lee: no es esta regla la que fija el
 * tamaño, es cada sitio que ya pone su `font-size` en el icono o en quien lo
 * envuelve (`.TSessionBox-carrito`, el `font-size:21px` en línea de la
 * campana, `#logoutBox .usermenu … iconify-icon`) -- y es el mismo valor que
 * usa el propio `iconify-icon` para el SVG cuando termina de cargar. Por eso
 * reservar el hueco con `1em` no cambia ni un píxel del tamaño ya pintado,
 * solo el momento en que ese tamaño existe.
 */
.TSessionBox iconify-icon,
#notifications iconify-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}



.TSessionBox [class^=uil-]:before, [class*=" uil-"]:before{

    font-size: 22px;
}
/*
 * EL BLOQUE DE DENTRO: su ancho y su separación de arriba.
 *
 * Los dos estaban en el `style=""` del propio div. El ancho ESTANDO EN LÍNEA no
 * se podía cambiar desde aquí --un estilo en el atributo gana a cualquier regla
 * sin `!important`-- así que subirlo a 400px pasaba por quitarlo de allí. Es la
 * razón de que ahora no quede nada en el atributo: la caja se dimensiona en un
 * solo sitio.
 */
#logoutBox > div {
    width: 400px;
    padding-top: 10px;
}

/*
 * EL MENÚ DE LA CAJA, TODO EN LA MISMA LÍNEA.
 *
 * «Cuenta Vendedor» salía más alto que Descargas, Mi cuenta y Admin, y no era
 * su margen: los contenedores empiezan en la misma vertical, lo que no
 * coincidía era el CONTENIDO. Los cuatro primeros son `<a>` en línea con un
 * `<img>`, y se colocan por la línea base del texto; «Cuenta Vendedor» lo pinta
 * ZoneMenu.js como `inline-flex` con un `<iconify-icon>`, que se coloca por su
 * caja. Dos formas de alinear en la misma fila no pueden cuadrar.
 *
 * El reparto lo decide el menú --`space-around` y `align-items: flex-end`, que
 * es la línea de abajo común a todos-- y cada enlace pone su icono y su texto
 * en la misma fila, así que da igual que uno traiga una imagen y otro un icono,
 * ni qué módulo añada el siguiente elemento a esa zona.
 */
header .usermenu {
    position: relative;
    min-width: 200px;
    top: -11px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LA CAJA DEL VISITANTE: carrito y puerta de entrada
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Ya no comparte marcado con el menú de la sesión --antes era otro
 * `.usermenu`, con lo que `header .usermenu` alcanzaba a los dos y había que
 * distinguirlos por la profundidad del árbol-- así que tiene sus clases y sus
 * reglas, y lo que se cambie aquí no puede tocar al otro sin querer.
 *
 * Los dos elementos en una fila con su hueco: el carrito venía colocado con un
 * `right: -21px` en línea, del diseño de cabecera anterior, y con la de ahora
 * caía justo encima del rótulo del botón.
 */
.TSessionBox-visita{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.TSessionBox-carrito{
    position: relative;

    display: inline-flex;
    align-items: center;

    font-size: 24px;
    color: #52606d;
    text-decoration: none;
}
.TSessionBox-carrito:hover{ color: #1f2933; text-decoration: none; }

/* La regla global `a:visited` del sitio los pinta de magenta; se dice aquí
   porque `getComputedStyle` no lo enseña y solo se ve en pantalla. */
.TSessionBox-carrito:visited{ color: #52606d; }

/*
 * EL CONTADOR, PEGADO A LA ESQUINA DEL ICONO Y NO EN LA FILA.
 *
 * Vacío no se pinta: sin nada dentro no queda una pastilla roja diciendo que
 * el carrito tiene algo cuando no tiene nada. Lo rellena el JS del carrito.
 */
.TSessionBox-carrito .cart_counter{
    position: absolute;
    top: -5px;
    right: -9px;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

    display: none;
    align-items: center;
    justify-content: center;

    font: 600 10px/1 Arial, sans-serif;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: #ef4444;
    border-radius: 10px;
}
.TSessionBox-carrito .cart_counter:not(:empty){ display: inline-flex; }

.TSessionBox-entrar{
    padding: 9px 16px;

    background: var(--btn_color);
    border-radius: 6px;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.TSessionBox-entrar:visited{ color: #fff; }
.TSessionBox-entrar:hover{ color: #fff; text-decoration: none; filter: brightness(.94); }

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS ICONOS DE SESIÓN, EN COLUMNA: EL DIBUJO ARRIBA Y EL RÓTULO DEBAJO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * En fila, cada entrada mide su icono MÁS su palabra MÁS el hueco entre los
 * dos, y son cuatro --carrito, descargas, cuenta y las que añade cada módulo
 * por `Zone::SESSION_PANEL`, que hoy es «Cuenta Vendedor»--: entre las cuatro
 * se comían el ancho que necesita el buscador de la cabecera.
 *
 * En columna, cada una ocupa lo que mide la más larga de sus dos líneas. El
 * ancho de la caja de sesión baja casi a la mitad y deja de crecer cada vez
 * que un módulo declara un icono nuevo.
 *
 * LA REGLA ALCANZA TAMBIÉN A `.ZoneMenu-item`, que se estila desde el JS del
 * control (`Controles/ZoneMenu.js` inyecta su `<style>` en la cabecera). Se
 * gana por especificidad --`#logoutBox` contra una clase suelta-- y SOLO
 * dentro de la caja de sesión: los iconos que un módulo ponga en otra zona
 * siguen como estaban.
 */
#logoutBox .usermenu > div > a,
#logoutBox .ZoneMenu-item{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    text-align: center;
    font: 600 10.5px/1.2 Arial, sans-serif;
    white-space: nowrap;
}

/* EL TAMAÑO SE DECLARA EN EL ICONO, NO EN SU CAJA: `iconify-icon` no hereda el
   `font-size` del padre, y sin esto los cuatro salen al tamaño por defecto. */
#logoutBox .usermenu > div > a iconify-icon,
#logoutBox .ZoneMenu-item iconify-icon{ font-size: 19px; }

/* Y la fila que los contiene: pegados a la derecha con su hueco, en vez de
   repartidos en un ancho mínimo de 200px que ya no hace falta. */
header .usermenu{
    min-width: 0;
    gap: 16px;
    justify-content: flex-end;
    align-items: flex-start;
}

/* Y SIN EL EMPUJÓN DE 7px. `base.php` baja las imágenes del menú con
   `.usermenu a img { position: relative; top: 7px }`, que era el apaño para
   compensar la línea base cuando los enlaces iban en línea. Con el enlace en
   flex el icono ya se coloca solo, y esos 7px lo dejaban siete por debajo de su
   propio texto. Medido: icono y texto en la misma vertical en los cinco. */
#logoutBox .usermenu a img { top: 0; }

/*
 * EL CONTADOR DEL CARRITO, EN LA ESQUINA DE SU ICONO.
 *
 * `base.php` lo coloca con `left:16px; top:10px` --medidas de la cabecera de
 * alto fijo de antes--, y con el enlace ya en columna eso lo dejaba encima del
 * rótulo «Carrito». Se ancla al enlace, que es lo único que no va a cambiar de
 * sitio, y se pega a la esquina del dibujo.
 */
#logoutBox .usermenu > div > a{ position: relative; }
#logoutBox .usermenu #cartItemsCounter.cart_counter{
    left: auto;
    right: -2px;
    top: -4px;
    line-height: 14px;
    font-size: 10px;
}

/*
 * LA CABECERA, POR LO MISMO QUE LA CAJA DE SESION.
 *
 * `TSiteHeader` tiene PHP, asi que meterlo en el bundle arrastra su marcado al
 * div oculto de plantillas y la pagina acaba con DOS cabeceras: la visible, sin
 * componente, y una copia escondida con el buscador montado donde no lo ve
 * nadie. Se comprobo. Aqui solo se trae la hoja; el marcado lo imprime su
 * include y el JS va al final del documento.
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  LA CABECERA DEL SITIO
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Dos filas: la barra --marca, buscador y sesión-- y las categorías debajo.
 *
 * TODO PREFIJADO CON `.sh` y con sus propias variables. La hoja global del
 * sitio tiene reglas sueltas sobre `header`, `nav`, `ul` y `a` --hay un
 * `border-bottom` sobre `nav` que se cuela donde no toca-- así que aquí se
 * declara lo que hace falta en vez de confiar en lo que venga heredado.
 */

.sh{
    --sh-verde:       #16a34a;
    --sh-verde-hondo: #15803d;
    --sh-verde-suave: #f0fdf4;
    --sh-verde-linea: #d5eadd;

    --sh-tinta:       #1f2933;
    --sh-tinta-suave: #52606d;
    --sh-tenue:       #9aa5b1;

    --sh-linea:       #e4e9ee;
    --sh-fondo:       #fffdf7;   /* el crema de la marca, no blanco puro */

    display: block;
    width: 100%;

    /* EL FONDO LO PONE CADA BLOQUE, no la cabecera entera: son dos zonas con
       color propio --la de la marca y la de navegación-- y un fondo aquí se
       vería por debajo de las dos. */
    background: transparent;

    /* Y AQUÍ NO SE COLOCA NADA: la hoja global mueve el `<header>` del sitio
       con `sticky` y un `top` negativo, y esa regla se colaba en lo que hubiera
       dentro. Se declara la posición normal para no depender de ello. */
    position: static;
    top: auto;
}

/* ── LOS DOS BLOQUES ─────────────────────────────────────────────────── */
/*
 * Cada uno de extremo a extremo con su color; dentro, el `.body-content` del
 * sitio centra lo que se lee. Así el color llega a los bordes de la ventana y
 * el contenido se queda en la medida de la página, alineado con lo de abajo.
 */
.sh-zona{ width: 100%; }

/*
 * LA BARRA DE LA MARCA, POR ENCIMA DE LA DE NAVEGACIÓN.
 *
 * El desplegable del buscador vive aquí dentro y se abre hacia abajo, sobre la
 * barra de categorías. Sin este `z-index` gana la de navegación --que va
 * después en el documento y crea su propio contexto con `position: relative`--
 * y los resultados quedaban CORTADOS por detrás de ella: se veía la primera
 * línea y el resto desaparecía debajo del menú.
 */
.sh-zona-barra{
    position: relative;
    z-index: 20;
    background: var(--sh-fondo);
}

/* La navegación, en blanco: es un bloque aparte de la barra de la marca, y el
   cambio de tono es lo que lo separa sin tener que dibujar una caja. */
.sh-zona-nav{
    background: #fff;
    border-top: 1px solid var(--sh-linea);
    border-bottom: 1px solid var(--sh-linea);

    /* EL MARCO DEL PANEL: cuelga de aquí para poder ocupar todo el ancho de la
       ventana, y no del `li` de su categoría, que mide lo que mide su nombre. */
    position: relative;
}

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

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS ENLACES YA VISITADOS NO CAMBIAN DE COLOR
 * ═══════════════════════════════════════════════════════════════════════
 *
 * La hoja global del sitio le da a `a:visited` un magenta, y por eso los
 * accesos de la cabecera --«Descargas», «Mi cuenta», «Admin»-- salían de ese
 * color en cuanto alguien los había pulsado una vez, mientras los que nadie
 * había abierto seguían grises. Una barra con dos colores según por dónde
 * hayas pasado no es un diseño, es un historial de navegación a la vista.
 *
 * Y ES DIFÍCIL DE VER MIDIENDO: `getComputedStyle` MIENTE con `:visited` --
 * devuelve siempre el color del estado normal, por privacidad-- así que el
 * color medido decía gris mientras la pantalla pintaba magenta.
 *
 * Se declara para toda la cabecera de una vez, que es la única forma de que no
 * vuelva a colarse en la próxima zona que se añada.
 */
.sh a:visited,
.sh a:visited span,
.sh a:visited b,
.sh a:visited small{ color: inherit; }

.sh .sh-cat > a:visited > span{ color: var(--sh-tinta); }
.sh .sh-sesion a:visited{ color: var(--sh-tinta); }
.sh .sh-marca:visited .sh-marca-txt{ color: var(--sh-verde-hondo); }
.sh .sh-marca:visited .sh-marca-tld{ color: var(--sh-verde); }

/* Un `nav` dentro de la cabecera no lleva la línea que le pone la hoja global
   del sitio: aquí las separaciones las decide este componente. */
.sh nav{ border: 0; }

/* ── LA BARRA ────────────────────────────────────────────────────────── */
/*
 * Tres zonas: marca fija, buscador elástico y sesión fija. El buscador es el
 * único que crece, así que al estrechar la ventana se encoge él y las otras dos
 * mantienen su sitio -- que es justo lo que hace falta: el logo no se recorta y
 * los accesos de la derecha no se apilan.
 */
.sh-barra{
    display: flex;
    align-items: center;
    gap: 22px;

    /* SIN ANCHO PROPIO: lo pone el `.body-content` que la envuelve, que es el
       contenedor del sitio. Repetir aquí una medida dejaría la cabecera
       desalineada del resto de la web en cuanto alguien cambie la suya. */
    padding: 12px 0;
}

/* El contenedor de dentro no pinta fondo ni sombra: solo mide. */
.sh .sh-fila{ background: transparent; box-shadow: none; }

/* ── LA MARCA ────────────────────────────────────────────────────────── */
/* El flex de dos columnas de siempre: icono a la izquierda, texto a la derecha,
   para que el nombre no baile respecto al dibujo. */
.sh-marca{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;

    /* Declarado aunque el texto de dentro traiga el suyo: la hoja global pinta
       los enlaces de morado, y basta con que un día el `span` de dentro no
       lleve color para que la marca salga de ese color. */
    color: var(--sh-verde-hondo);
}

/*
 * LA MARCA NO SE SUBRAYA AL PASAR POR ENCIMA.
 *
 * La hoja global tiene un `a:hover { text-decoration: underline }` que alcanza
 * a todo enlace del sitio, y sobre el nombre de la marca esa raya cruza también
 * el «.eu» en superíndice: parece un tachón, no un enlace.
 *
 * Se apaga en el enlace Y en sus hijos: la decoración la dibuja el elemento que
 * la declara sobre todo su texto, así que apagarla solo en el `<a>` no siempre
 * limpia lo que ya venía puesto en el `span`.
 */
.sh-marca:hover,
.sh-marca:focus,
.sh-marca:hover .sh-marca-txt,
.sh-marca:hover .sh-marca-tld{ text-decoration: none; }

.sh-marca-ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sh-verde-suave);
    border: 1px solid var(--sh-verde-linea);
    color: var(--sh-verde-hondo);
    font-size: 20px;
}

.sh-marca-txt{
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--sh-verde-hondo);

    /* SIN EL `font:` ABREVIADO de las reglas globales: ese atajo reinicia el
       tamaño de todo lo de dentro, y el `.eu` volvía al tamaño del nombre. */
}

/* La extensión del dominio, pequeña: no es parte del nombre, y a igual tamaño
   competía con él. */
.sh-marca-tld{
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    color: var(--sh-verde);
    vertical-align: super;
    margin-left: 1px;
}

/* ── EL BUSCADOR ─────────────────────────────────────────────────────── */
/*
 * Es lo único que se estira. `min-width: 0` porque un ítem flex no baja de su
 * contenido si no se le dice, y el buscador lleva dentro un desplegable de
 * categorías con ancho propio: sin esto empujaba la zona de sesión fuera de la
 * pantalla en ventanas estrechas.
 */
.sh-buscador{
    flex: 1;
    min-width: 0;
    max-width: 720px;

    display: flex;
    align-items: stretch;
    height: 40px;

    background: #fff;
    border: 1px solid var(--sh-verde-linea);
    border-radius: 10px;
    overflow: visible;   /* el desplegable de resultados tiene que poder salir */
}

/* Foco de teclado (WCAG 2.4.7). El campo no tiene borde propio y lleva
   `outline:none` (TProductSearch.css): el anillo en el campo quedaría pegado al
   selector y a la lupa, así que se dibuja en el marco, con los mismos tokens que
   el foco común de Tjquery/css/index.css. */
.sh-buscador:has(.tps-input:focus-visible){
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-ring-halo);
}

/* ── LA SESIÓN ───────────────────────────────────────────────────────── */
/* SIN `margin-left:auto` DESDE EL REDISEÑO (25/08/2026): quien empuja a la
   derecha ahora es `.sh-derecha`, que agrupa accesos, la llamada a registrarse
   y esta caja. Con el margen puesto aquí dentro, la caja se separaba de sus
   vecinas y el bloque se leía roto. */
.sh-sesion{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/*
 * LA CAJA DE SESIÓN ES DEL PROYECTO --`TSessionBox`-- y trae su propia hoja,
 * pensada para la cabecera anterior: sus enlaces salían en naranja
 * (`rgb(182, 85, 24)`, medido) sobre este fondo crema, que es de otra familia
 * de color. Aquí se le da el tono de esta cabecera sin tocar su hoja, que la
 * usan también otras pantallas.
 *
 * Solo color y tamaño: la disposición sigue siendo suya.
 */
.sh-sesion a{
    color: var(--sh-tinta);
    font-size: 13px;
    text-decoration: none;
}
/* AQUÍ SÍ SE SUBRAYA (decisión del usuario): son accesos sueltos, no una barra
   de secciones, y el subrayado es lo que dice que se puede pulsar. */
.sh-sesion a:hover{ color: var(--sh-verde-hondo); text-decoration: underline; }

/* Salvo el botón de salir, que ya se distingue por su recuadro. */
.sh-sesion a.logout:hover{ text-decoration: none; }

/*
 * Y EL TEXTO DE DENTRO DEL ENLACE, otra vez.
 *
 * «Cuenta Vendedor» viene envuelto en un `span` sin clase, y la regla global de
 * `span` le gana al color del `<a>` que lo contiene: salía en morado al lado de
 * enlaces grises que dicen lo mismo. Medido: `rgb(145, 12, 136)`.
 */
.sh-sesion a span{
    font-family: inherit;
    font-size: 13px;
    font-weight: inherit;
    color: inherit;
}

/* Los iconos de la caja de sesión, en el verde de la casa. */
.sh-sesion a i,
.sh-sesion a svg,
.sh-sesion a iconify-icon{ color: var(--sh-verde); }

/* El saludo: el nombre manda, la sesión anterior acompaña. */
.sh-sesion b,
.sh-sesion strong{ color: var(--sh-tinta); font-size: 13px; }
.sh-sesion small{ color: var(--sh-tinta-suave); font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   LA CAJA DE SESIÓN, COLOCADA
   ═══════════════════════════════════════════════════════════════════════

   `TSessionBox` viene del diseño anterior: colocaba sus piezas con
   `position: absolute` --el botón de salir a la derecha, dos PNG de sombra
   en las esquinas-- sobre una caja de alto fijo. Cambiados sus iconos por
   Lucide y quitadas las sombras, eso dejaba el saludo y el «Salir» pisándose.

   Aquí se le da una rejilla, que es lo que pedía desde el principio:

       [avatar]  Hola, alex                 [campana] [salir]
       [avatar]  carrito · descargas · cuenta · admin · vendedor

   TODO PREFIJADO CON `.sh-sesion`: la hoja de `TSessionBox` no se toca porque
   la usan otras pantallas que siguen con la disposición de antes.
   ═══════════════════════════════════════════════════════════════════════ */

.sh-sesion #logoutBox{
    position: static;
    right: auto;
    top: auto;
    padding: 8px 14px;
    background: transparent;

    /* SIN EL ANCHO FIJO de su hoja --440px, medido--: con él, la fila de
       accesos no cabía y «Cuenta Vendedor» caía sola a una tercera línea. Aquí
       hay sitio de sobra, así que la caja ocupa lo que necesite. */
    width: auto;
    min-width: 0;
    max-width: none;
}

.sh-sesion #logoutBox > div{
    /* EL ANCHO FIJO VIVE AQUÍ, en el hijo: `#logoutBox > div { width: 400px }`
       de la hoja de `TSessionBox`. Con él, la fila de accesos no cabía y
       «Cuenta Vendedor» caía sola a una segunda línea. */
    width: auto;

    display: grid;
    grid-template-columns: auto 1fr auto auto;
    /*
     * EL AVATAR SOLO EN LA PRIMERA FILA: antes abarcaba las dos y quedaba
     * centrado a media altura, con el menú de accesos naciendo a su derecha
     * como si colgara de él. Va con el saludo, que es de quien es.
     */
    grid-template-areas:
        "avatar saludo campana salir"
        "menu   menu   menu    menu";
    align-items: center;
    gap: 2px 10px;
}

.sh-sesion #logoutBox .pic{
    grid-area: avatar;
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
}

/* Sin foto: el icono en su casilla, con el mismo tamaño que tendría el retrato
   para que la fila no se mueva según quién haya entrado. */
.sh-sesion #logoutBox .pic-vacio{
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--sh-verde);
    background: var(--sh-verde-suave);
    border: 1px solid var(--sh-verde-linea);
    border-radius: 50%;
    font-size: 21px;
}

/*
 * EL SALUDO es el único hijo sin clase, así que se pide por posición. Es
 * frágil a propósito de decirlo: si algún día `TSessionBox` le pone una clase,
 * este selector se cambia por ella y se acabó.
 */
.sh-sesion #logoutBox > div > div:nth-child(3){ grid-area: saludo; line-height: 1.35; }

/*
 * AIRE ENTRE LA CAMPANA Y EL BOTÓN DE SALIR: pegados --2px, medido-- el badge
 * de avisos parecía parte del botón y se leía como si el número fuera suyo.
 *
 * `position: relative` Y NO `static`: su hoja la coloca en `absolute`, así que
 * estaba FUERA del flujo de la rejilla y ningún margen la movía. Relativa entra
 * en la fila y además sigue siendo el ancestro posicionado de su panel
 * desplegable, que cuelga de ella -- con `static` el panel se iría a buscar
 * otro y aparecería donde no toca.
 */
.sh-sesion .TNotificationsBell{
    grid-area: campana;
    margin-right: 18px;
}
.sh-sesion .usermenu{ grid-area: menu; }

/* El botón de salir: era una imagen absoluta de 50px en la esquina. */
.sh-sesion a.logout{
    grid-area: salir;
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 10px;

    font-size: 12px;
    color: var(--sh-tinta-suave);

    background: #f3f5f7;
    border: 1px solid var(--sh-linea);
    border-radius: 7px;
}
.sh-sesion a.logout:hover{ background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.sh-sesion a.logout iconify-icon{ font-size: 14px; color: inherit; }

/* La fila de accesos: en línea, repartidos a lo ancho de la caja de sesión. */
.sh-sesion .usermenu{
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    /* REPARTIDOS, no apelotonados a la izquierda: los accesos ocupan el ancho
       que ya tiene la caja de sesión, así que cada uno cae en su sitio y la
       fila deja de crecer y encoger según cuántos haya. El `gap` se queda como
       SUELO --lo que no pueden juntarse al envolver en dos líneas--. */
    justify-content: space-between;
    gap: 4px 12px;

    /* EL AIRE QUE FALTABA sobre los enlaces: pegados al saludo se leían como
       parte de él, no como una fila de accesos. */
    padding-top: 6px;
}
.sh-sesion .usermenu > div{ display: flex; align-items: center; }

.sh-sesion .usermenu a{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.sh-sesion .usermenu iconify-icon{ font-size: 16px; }

/* El contador del carrito, sobre su icono. */
.sh-sesion .cart_counter{
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: -6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #ef4444;
    border-radius: 10px;
}

/* La campana, en el verde de la casa como los demás iconos. */
.sh-sesion .TNotificationsBell iconify-icon{ font-size: 19px; color: var(--sh-verde); }

/*
 * LOS DOS CONTADORES, EN BLANCO.
 *
 * El del carrito y el de avisos son pastillas de color fuerte --rojo y ámbar--
 * y el número iba en el color que heredara de la cabecera: gris oscuro sobre
 * rojo, que es de lo que peor se lee. Los dos juntos y no cada uno por su lado
 * porque son la misma pieza repetida.
 */
.sh-sesion .cart_counter,
.sh-sesion .TNotificationsBell-badge{
    color: #fff;
    -webkit-text-fill-color: #fff;   /* algunas hojas del sitio lo fijan aparte */
}

/* ── LAS CATEGORÍAS ──────────────────────────────────────────────────── */
.sh-cats{ padding: 0; }

.sh-cats-lista{
    display: flex;
    align-items: stretch;
    gap: 0;

    margin: 0;
    padding: 0;
    list-style: none;

    /*
     * SIN `overflow-x` AQUÍ, y no es un olvido.
     *
     * Con él, la barra recorta a sus hijos --y el panel de categorías es un
     * hijo absoluto que sale por debajo--: se pintaba entero y solo se veía la
     * franja que cabía dentro de la barra. En pantallas estrechas las entradas
     * se reparten en dos filas, que es preferible a perder el panel.
     */
    flex-wrap: wrap;
}

/*
 * LA ENTRADA NO SE POSICIONA, y es lo que hace que el panel funcione.
 *
 * `static` DECLARADO, no omitido: la hoja global del sitio tiene un
 * `li { position: relative }` que alcanza a cualquier elemento de lista, así
 * que quitar la regla de aquí no bastaba -- seguía ganando la suya.
 *
 * Con la entrada posicionada, el panel --absoluto con `left:0; right:0`-- se
 * medía contra el `<li>`, o sea contra el ancho de su nombre: se abría como una
 * columna de 202px y sus cuatro columnas se pisaban unas a otras. Medido.
 *
 * En `static`, el ancestro que lo coloca pasa a ser el `.body-content` de la
 * barra, así que el panel abre con el ancho de la página y alineado con ella.
 */
.sh-cat{ position: static; flex: 0 0 auto; }

/*
 * LA LÍNEA SÍ, EL SUBRAYADO DEL TEXTO NO.
 *
 * Son dos cosas distintas y se confunden fácil:
 *
 *   · el `border-bottom` del enlace es una línea que cruza toda la entrada, a
 *     la altura del pie de la barra -- eso es lo que marca por dónde va el
 *     ratón, y va;
 *   · el `text-decoration: underline` es una raya pegada a las letras, que
 *     además pasa por debajo del icono y ensucia la palabra -- eso no.
 *
 * El `underline` se apaga también en el `span`, que es donde vive el texto:
 * apagarlo solo en el `<a>` no basta, porque la decoración la puede traer
 * puesta el hijo desde las reglas globales.
 */
.sh-cat > a{
    display: flex;
    align-items: center;
    gap: 8px;

    /* `!important` porque la hoja global del sitio declara su propio relleno
       para los enlaces de lista y gana por especificidad. */
    padding: 8px 2px !important;

    text-decoration: none;
    white-space: nowrap;

    border-bottom: 2px solid transparent;
}

.sh-cat:hover > a{ border-bottom-color: var(--sh-verde); }

.sh-cat > a:hover,
.sh-cat > a:focus,
.sh-cat > a:hover > span,
.sh-cat > a:focus > span{ text-decoration: none; }

/*
 * EL TEXTO SE DECLARA EN EL `span`, NO SOLO EN EL ENLACE.
 *
 * La hoja global del sitio estiliza los `span` con un `font:` abreviado y color
 * propio, y eso GANA a lo que herede de su padre: las categorías salían en
 * morado de 11px y en Arial aunque el enlace pidiera 13px en gris. Medido con
 * `getComputedStyle`: `rgb(145, 12, 136)`, `11px`, `700`.
 *
 * Es la misma trampa de siempre en este proyecto --un `span` no hereda el
 * tamaño-- y se resuelve igual: diciéndolo donde el texto vive de verdad.
 */
.sh-cat > a > span{
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sh-tinta);
}
.sh-cat > a:hover > span{ color: var(--sh-verde-hondo); }

.sh-cat > a > iconify-icon{ font-size: 17px; color: var(--sh-verde); flex: 0 0 auto; }

/*
 * «VENDEDORES»: LA ENTRADA FIJA DE LA BARRA.
 *
 * No sale del catálogo --es el directorio de agricultores, `/sellers`-- así que
 * se separa de las familias con una línea. Sin ella se lee como una categoría
 * más y el visitante espera un panel de subcategorías que no existe.
 */
.sh .sh-cat-fija{ margin-right: 12px; padding-right: 14px; border-right: 1px solid var(--sh-linea); }
.sh .sh-cat-fija > a > span:last-child{ font-weight: 700; }
.sh .sh-cat-fija > a > .sh-estampa{ color: var(--sh-verde-hondo); }
.sh-cat-flecha{ font-size: 14px !important; color: var(--sh-tenue) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   EL PANEL DE CATEGORÍAS
   ═══════════════════════════════════════════════════════════════════════

   Se abre al pasar por una entrada de la barra y ocupa todo el ancho: dentro
   caben las subcategorías repartidas en columnas y la zona de confianza.

   AL PASAR POR ENCIMA Y TAMBIÉN CON EL TECLADO (`focus-within`): un menú que
   solo responde al ratón deja fuera a quien navega con el tabulador.

   `visibility` ADEMÁS DE `opacity`: un panel solo transparente sigue robando
   los clics de lo que tiene debajo -- y este ocupa media pantalla.
   ═══════════════════════════════════════════════════════════════════════ */

.sh-mega{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2500;

    padding: 0 0 6px;

    background: #fff;
    border-top: 1px solid var(--sh-linea);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.sh-cat:hover > .sh-mega,
.sh-cat:focus-within > .sh-mega{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* El contenido, con el ancho de la página: el panel llega a los bordes de la
   ventana pero lo que se lee se queda donde está el resto de la web. */
.sh-mega-cuerpo{
    display: grid;
    gap: 28px;
    padding: 22px 30px 20px;
}

/* Tantas columnas como haya, y la de confianza siempre al final. */
.sh-mega-cuerpo.cols-1{ grid-template-columns: minmax(0,1fr) 300px; }
.sh-mega-cuerpo.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) 300px; }
.sh-mega-cuerpo.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) 300px; }

/* ── EL PIE DEL PANEL ────────────────────────────────────────────────── */
.sh-mega-pie{
    border-top: 1px solid var(--sh-linea);
    background: #fbfcfb;
}
.sh-mega-pie-fila{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 16px 30px;
}
.sh-mega-cond{ display: flex; align-items: center; gap: 11px; }
.sh-mega-cond b{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-tinta);
}
.sh-mega-cond small{
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--sh-tinta-suave);
}

/* ── UNA COLUMNA ─────────────────────────────────────────────────────── */
.sh-mega-col{ min-width: 0; }

.sh-mega-cab{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.sh-mega-titulo{ min-width: 0; }
.sh-mega-titulo b{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--sh-tinta);
}
.sh-mega-titulo small{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sh-tinta-suave);
}

/* ── LA ESTAMPA ──────────────────────────────────────────────────────── */
/*
 * La casilla del dibujo. Mide siempre lo mismo lleve una ilustración o un
 * icono de trazo, para que las filas no bailen según lo que tenga cada
 * categoría.
 */
.sh-estampa{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background: var(--sh-verde-suave);
    overflow: hidden;
}
.sh-estampa img{ width: 100%; height: 100%; object-fit: contain; }
.sh-estampa-icono{ color: var(--sh-verde-hondo); font-size: 17px; }

.sh-estampa-grande{ width: 46px; height: 46px; font-size: 22px; }

/* En la barra, la estampa es pequeña y sin fondo: ahí el dibujo acompaña al
   nombre, no lo preside. */
.sh-cat > a > .sh-estampa{
    width: 22px;
    height: 22px;
    background: transparent;
}
.sh-cat > a > .sh-estampa iconify-icon{ font-size: 17px; color: var(--sh-verde); }

/* ── LA PORTADA ──────────────────────────────────────────────────────── */
/*
 * La foto ancha que presenta la familia. Enlaza a la categoría: quien pincha en
 * la imagen espera ir a lo que enseña, no que no pase nada.
 *
 * `aspect-ratio` en vez de una altura fija: la foto se sube en 720×300 y así se
 * queda con esa proporción mida lo que mida la columna. Con altura fija, en una
 * columna estrecha la imagen se recortaría por los lados hasta perder el motivo.
 */
.sh-mega-portada{
    display: block;
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.sh-mega-portada img{
    width: 100%;
    aspect-ratio: 12 / 5;
    object-fit: cover;
    transition: transform .35s ease;
}
.sh-mega-portada:hover img{ transform: scale(1.03); }

/* ── LA LISTA DE SUBCATEGORÍAS ───────────────────────────────────────── */
.sh-mega-lista{
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-mega-lista a{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 9px 8px;
    border-radius: 9px;

    text-decoration: none;
}
.sh-mega-lista a:hover{ background: var(--sh-verde-suave); text-decoration: none; }

.sh-mega-txt{ flex: 1; min-width: 0; }
.sh-mega-txt b{
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sh-tinta);
}
.sh-mega-txt small{
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--sh-tinta-suave);
}

.sh-mega-mas{
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--sh-tenue);
}
.sh-mega-lista a:hover .sh-mega-mas{ color: var(--sh-verde); }

/* ── EL ENLACE DE CIERRE ─────────────────────────────────────────────── */
.sh-mega-todo{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 12px;
    padding: 9px 14px;

    font-size: 13px;
    font-weight: 500;
    color: var(--sh-verde-hondo);
    text-decoration: none;

    background: var(--sh-verde-suave);
    border: 1px solid var(--sh-verde-linea);
    border-radius: 9px;
}
.sh-mega-todo:hover{ background: #e4f6ea; text-decoration: none; }

/* ── LA COLUMNA DE CONFIANZA ─────────────────────────────────────────── */
.sh-mega-lado{
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 26px;
    border-left: 1px solid var(--sh-linea);
}

/* ── LA ZONA DE PUBLICIDAD ───────────────────────────────────────────── */
/*
 * La creatividad viene montada con su medida (600×720, o sea 5:6), así que aquí
 * solo se le da su hueco y se deja que ocupe el ancho: ni recortes, ni encajes,
 * ni texto encima. `aspect-ratio` mantiene su proporción sin tener que fijar
 * una altura que dependería del ancho de la columna.
 */
.sh-mega-banner{
    position: relative;
    display: block;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.sh-mega-banner img{
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

/* EL SELLO DE «PUBLICIDAD», solo cuando el hueco está pagado. Discreto pero
   legible: un espacio comprado tiene que decir que lo está, igual que los
   productos destacados de la tienda. */
.sh-mega-publi{
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 2px 8px;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    color: #4b5563;

    background: rgba(255, 255, 255, .88);
    border-radius: 20px;
}

.sh-mega-garantia{
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sh-linea);
}
.sh-mega-garantia:last-child{ border-bottom: 0; }

.sh-mega-gico{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background: var(--sh-verde-suave);
    color: var(--sh-verde-hondo);
    font-size: 17px;
}
.sh-mega-garantia b{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-tinta);
}
.sh-mega-garantia small{
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--sh-tinta-suave);
}

@media (max-width: 1200px){
    /* La columna de confianza es lo primero que sobra cuando falta sitio: son
       las mismas tres promesas en todas las categorías, y el pie ya las repite. */
    .sh-mega-cuerpo.cols-1,
    .sh-mega-cuerpo.cols-2,
    .sh-mega-cuerpo.cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-mega-lado{ display: none; }
    .sh-mega-pie-fila{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
    .sh-mega{ display: none; }   /* en móvil, la barra lleva directamente */
}

/* ═══════════════════════════════════════════════════════════════════════
   EL PANEL VERTICAL
   ═══════════════════════════════════════════════════════════════════════

   Tres columnas: las familias a la izquierda --todas a la vez, con scroll
   propio--, lo que hay dentro de la que se mira en el centro, y la publicidad
   con las garantías a la derecha. El pie cruza las tres.

   UNO SOLO PARA TODA LA BARRA. El `.sh-mega` colgaba de cada entrada, así que
   el pie, el banner y las garantías se repetían tantas veces como categorías
   hubiera. Este cambia de vista sin cerrarse, que además es lo que permite
   saltar de una familia a otra sin volver a la barra.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS TONOS DEL PANEL, MUESTREADOS DE LA MAQUETA
 * ═══════════════════════════════════════════════════════════════════════
 *
 * No son «un gris parecido»: son los píxeles de `Submenu vertical.png`,
 * leídos uno a uno. El texto de un PNG está suavizado, así que cada valor sale
 * del promedio del tramo más oscuro de su bloque -- el mínimo a secas devuelve
 * un artefacto de compresión y la media, un gris lavado.
 *
 * Y viven aquí, en variables, porque son los tonos del panel entero: el mismo
 * gris de un subtítulo de familia es el de un subtítulo de subcategoría, y con
 * el valor repetido en seis reglas se separan a la tercera corrección.
 */
.shv{
    --shv-titulo:     #17191d;   /* nombre de una categoría, en reposo */
    --shv-sub:        #70747b;   /* su descriptor corto */
    --shv-borde:      #eef0f2;   /* el marco de las tarjetas */

    --shv-act-bg:     #f7fbf5;   /* la que se está mirando */
    --shv-act-borde:  #b8d5b6;
    --shv-act-titulo: #0c3d0f;
    --shv-act-sub:    #4b6a52;

    --shv-ayuda-bg:     #f3f7f1;
    --shv-ayuda-borde:  #dfe9dd;
    --shv-ayuda-titulo: #0d3d11;
    --shv-ayuda-txt:    #6f7579;
    --shv-ayuda-cta:    #1e6c1c;
    --shv-ayuda-ico:    #0d5b16;
}

.shv{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /*
     * POR DEBAJO DE LA BARRA DE LA MARCA (que va a 20), y es a propósito: el
     * desplegable del buscador baja sobre este panel y tiene que ganarle. Por
     * encima, en cambio, de todo lo que hay en la página -- el panel ocupa
     * media pantalla y cualquier tarjeta con posición se le colaba delante.
     */
    z-index: 10;

    padding-bottom: 30px;   /* aire para que el ratón no se salga al bajar */

    /*
     * EL MARCO NO TOCA EL RATÓN; LA TARJETA SÍ.
     *
     * `.shv` va de borde a borde de la ventana --tiene que hacerlo para que la
     * tarjeta quede centrada con el resto de la página-- así que sus franjas
     * laterales son un bloque transparente de 900px de alto tendido sobre el
     * contenido: se comía los clics de lo que hubiera debajo y, peor, el panel
     * no se cerraba nunca al salir de la tarjeta, porque el ratón seguía
     * dentro de él. Comprobado en el navegador.
     */
    pointer-events: none;

    /*
     * `visibility` ADEMÁS DE `opacity`: un panel solo transparente sigue
     * robando los clics de lo que tiene debajo, y este cubre media pantalla.
     */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);

    /*
     * LA VISIBILIDAD CAMBIA AL PRINCIPIO AL ABRIR Y AL FINAL AL CERRAR.
     *
     * Con `visibility .16s` a secas el panel tardaba ese tiempo en volverse
     * tocable: quien iba directo de la categoría a la primera subcategoría
     * --que está a un palmo-- llegaba antes que la transición, el ratón caía
     * sobre la página de debajo y el panel se cerraba en su cara. Comprobado.
     *
     * Al cerrar sí interesa el retardo, para que no desaparezca de golpe en
     * mitad del fundido.
     */
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.shv.es-abierto{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

.shv-caja{
    pointer-events: auto;

    background: #fff;
    border: 1px solid var(--sh-linea);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 22px 48px rgba(16, 24, 40, .16);
    overflow: hidden;
}

/*
 * EL CUERPO TIENE TOPE DE ALTO Y EL PIE SIEMPRE SE VE.
 *
 * Con ocho familias la columna de la izquierda medía 743px y empujaba el pie
 * hasta los 947 en una ventana de 953: las condiciones de la casa quedaban
 * fuera de la pantalla, y ahí no se puede llegar con scroll --el panel se
 * cierra en cuanto el ratón sale de él--. Medido en el navegador.
 *
 * El tope se calcula contra el alto de la ventana porque el panel arranca
 * donde acaba la cabecera, y eso cambia con el zoom y con el ancho.
 */
.shv-cuerpo{
    display: grid;
    /* 360px para que la tarjeta quede en los 330 de la maqueta, medidos. */
    grid-template-columns: 360px minmax(0, 1fr) 300px;

    /*
     * `minmax(0, 1fr)` EN LA FILA, y sin esto el tope no sirve de nada: una
     * fila de rejilla mide `auto`, o sea lo que ocupe su contenido, así que la
     * columna de familias crecía hasta 835px dentro de un cuerpo topado en 653
     * y se salía por debajo -- se veía el bloque de ayuda pintado ENCIMA del
     * pie. Medido en el navegador.
     */
    grid-template-rows: minmax(0, 1fr);

    max-height: calc(100vh - 300px);
    min-height: 360px;
}

/* `min-height: 0` en las celdas: sin él una celda de rejilla no baja de su
   contenido y el `overflow` de dentro no llega a activarse nunca. */
.shv-arbol, .shv-vistas, .shv-lado{ min-height: 0; }
.shv-vistas{ overflow-y: auto; }

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS ENLACES VISITADOS NO SE PINTAN EL BORDE DE NEGRO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * La hoja global del sitio declara `a:visited { border: 0px }`, y ese
 * shorthand deja `border-color` en `currentColor`. `:visited` no puede cambiar
 * casi nada por privacidad, pero el color del borde SÍ es de lo poco que sí
 * puede -- así que en cuanto una categoría se había visitado una vez, su
 * tarjeta pasaba de gris claro a un borde casi negro. Por eso se veía en la
 * columna de familias y no en las subcategorías del centro: unas se habían
 * pinchado y otras no.
 *
 * Y NO SE PUEDE DIAGNOSTICAR MIRANDO EL COMPUTADO: `getComputedStyle` devuelve
 * a propósito el valor del enlace SIN visitar, así que decía `#e4e9ee` mientras
 * la pantalla pintaba negro. Es la misma trampa que ya mordió con el color de
 * los enlaces de la cabecera, y se arregla igual: diciéndolo en `:visited`.
 * ═══════════════════════════════════════════════════════════════════════ */

.shv-raiz:visited,
.shv-hijas a:visited,
.shv-garantia:visited{ border-color: var(--shv-borde); }

.shv-raiz.es-activa:visited,
.shv-hijas a:hover:visited{ border-color: var(--shv-act-borde); }

.shv-ayuda:visited{ border-color: var(--sh-verde-linea); }
.shv-portada.sin-foto:visited{ border-color: var(--sh-verde-linea); }

/* ── 1. LAS FAMILIAS ─────────────────────────────────────────────────── */
/*
 * CON SCROLL PROPIO Y NO EMPUJANDO EL PANEL.
 *
 * Con veinte familias la columna crecería hasta sacar el pie fuera de la
 * pantalla, y el panel se cierra en cuanto el ratón sale de él: habría que
 * hacer scroll en la página para llegar a algo que desaparece al intentarlo.
 * El tope se calcula contra el alto de la ventana --no un número fijo-- porque
 * el panel arranca donde acaba la cabecera y eso cambia con el zoom.
 */
/*
 * LA LISTA SE RECORRE; LA TARJETA DE AYUDA NO SE MUEVE.
 *
 * El scroll estaba en la columna entera, así que «¿Necesitas ayuda?» vivía al
 * final de la lista: con ocho familias había que bajar hasta el fondo para
 * verla, que es justo lo contrario de lo que sirve un acceso a soporte. Ahora
 * la columna es una caja de dos piezas --lista elástica arriba, tarjeta fija
 * abajo-- y lo que se recorre es solo la lista.
 */
.shv-arbol{
    display: flex;
    flex-direction: column;

    padding: 18px 16px 18px 18px;
    border-right: 1px solid var(--sh-linea);

    /* El alto lo manda `.shv-cuerpo`; aquí solo se recorta lo que sobre. */
    overflow: hidden;
}

.shv-raices{
    margin: 0;
    padding: 0 6px 0 0;   /* hueco para la barra de scroll, sin tapar el borde */
    list-style: none;

    /* `min-height: 0` para que pueda encogerse por debajo de su contenido: sin
       él, un elemento flexible no cede y el scroll no llega a aparecer. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* `static` DECLARADO: la hoja global del sitio pone `li{position:relative}` y
   eso desplaza los hijos absolutos que pueda haber dentro. */
.shv-raices > li{ position: static; margin-bottom: 8px; }

.shv-raiz{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 12px;

    border: 1px solid var(--shv-borde);
    border-radius: 12px;

    text-decoration: none;
    transition: background .13s ease, border-color .13s ease;
}

.shv-raiz:hover,
.shv-raiz:focus,
.shv-raiz:hover b,
.shv-raiz:hover small{ text-decoration: none; }

.shv-raiz.es-activa{
    background: var(--shv-act-bg);
    border-color: var(--shv-act-borde);
}

.shv-raiz-txt{ flex: 1; min-width: 0; }

/*
 * EL TEXTO SE DECLARA AQUÍ, no se hereda.
 *
 * La hoja global del sitio estiliza `b` y `small` con tamaño y color propios y
 * eso gana a lo que herede del enlace: los nombres salían en otro cuerpo y las
 * frases en gris azulado. Es la misma trampa de los `span` de la barra.
 */
.shv-raiz-txt b{
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--shv-titulo);
}
.shv-raiz-txt small{
    display: block;
    margin-top: 3px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--shv-sub);
}
.shv-raiz.es-activa .shv-raiz-txt b{ color: var(--shv-act-titulo); }
.shv-raiz.es-activa .shv-raiz-txt small{ color: var(--shv-act-sub); }

.shv-raiz-mas{ flex: 0 0 auto; font-size: 16px; color: var(--sh-tenue); }
.shv-raiz.es-activa .shv-raiz-mas{ color: var(--sh-verde); }

/* ── EL BLOQUE DE AYUDA ──────────────────────────────────────────────── */
/*
 * FIJO AL PIE DE LA COLUMNA y con las medidas de la maqueta, leídas de ella:
 * icono de 87×91 en su columna, texto en la otra, y los tres renglones
 * arrancando en la misma vertical -- que es la regla de alineación de siempre.
 *
 * Sin caja blanca detrás del icono: en la maqueta el dibujo va suelto sobre el
 * verde del bloque, a un tamaño que es casi dos tercios del alto de la tarjeta.
 * Encajonarlo en un cuadrito de 38px, que es como estaba, lo convertía en un
 * icono más de una lista.
 */
.shv-ayuda{
    flex: 0 0 auto;

    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-top: 14px;
    padding: 18px 16px;

    background: var(--shv-ayuda-bg);
    border: 1px solid var(--shv-ayuda-borde);
    border-radius: 12px;

    text-decoration: none;
}
.shv-ayuda:hover{ background: #eaf4e8; text-decoration: none; }
.shv-ayuda:hover b, .shv-ayuda:hover small{ text-decoration: none; }
.shv-ayuda:visited{ border-color: var(--shv-ayuda-borde); }

.shv-ayuda-ico{
    flex: 0 0 auto;
    display: inline-flex;

    /* Alineado con la primera línea del título y no con el centro del bloque:
       un icono grande centrado contra tres renglones queda flotando. */
    margin-top: 4px;
}
.shv-ayuda-ico iconify-icon{
    font-size: 76px;
    color: var(--shv-ayuda-ico);
}

/* TODO EL TEXTO EN LA SEGUNDA COLUMNA: es lo que hace que los tres renglones
   compartan margen sin compensar el ancho del icono a mano. */
.shv-ayuda-txt{ flex: 1; min-width: 0; }

.shv-ayuda b{
    display: block;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--shv-ayuda-titulo);
}
.shv-ayuda small{
    display: block;
    margin-top: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--shv-ayuda-txt);
}
.shv-ayuda-cta{
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 12px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shv-ayuda-cta);
}
.shv-ayuda-cta iconify-icon{ font-size: 15px; }

/* ── 2. LA FAMILIA QUE SE MIRA ───────────────────────────────────────── */
.shv-vistas{ min-width: 0; padding: 18px 22px; }

/* Solo una a la vez. Están todas pintadas --se cambia sin pedir nada por
   red-- y el JS enciende la que toca. */
.shv-vista{ display: none; }
.shv-vista.es-activa{ display: block; }

.shv-migas{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}
.shv-migas a{
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sh-tinta-suave);
    text-decoration: none;
}
.shv-migas a:hover{ color: var(--sh-verde-hondo); text-decoration: none; }
.shv-migas a:visited{ color: var(--sh-tinta-suave); }
.shv-migas span{
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
}
.shv-migas iconify-icon{ font-size: 13px; color: var(--sh-tenue); }

/* ── LA PORTADA ──────────────────────────────────────────────────────── */
/*
 * LA FOTO DE FONDO Y EL TEXTO ENCIMA, con un velo que arranca en blanco por la
 * izquierda: así el título se lee sea cual sea la imagen que suban, sin tener
 * que recortarla para dejarle hueco a las letras. Con el texto directamente
 * sobre la foto, una portada clara lo borraba y una oscura lo tapaba.
 */
.shv-portada{
    display: block;
    position: relative;

    min-height: 212px;
    padding: 26px 28px;

    background-color: var(--sh-verde-suave);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 14px;
    overflow: hidden;

    text-decoration: none;
}
/* Sin foto no hace falta el velo --no hay nada que atenuar-- y el bloque se
   queda más bajo: es una presentación, no una imagen. */
.shv-portada.sin-foto{
    min-height: 0;
    border: 1px solid var(--sh-verde-linea);
}
.shv-portada.sin-foto::before{ display: none; }

.shv-portada::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.93) 34%,
        rgba(255,255,255,.55) 54%,
        rgba(255,255,255,0) 72%);
}
.shv-portada:hover, .shv-portada:hover b, .shv-portada:hover small{ text-decoration: none; }

.shv-portada-txt{ position: relative; max-width: 330px; }

.shv-portada-txt b{
    display: block;
    font-family: inherit;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--sh-verde-hondo);
}
.shv-portada-txt small{
    display: block;
    margin-top: 10px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sh-tinta-suave);
}

.shv-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;
    padding: 10px 18px;

    background: var(--sh-verde);
    border-radius: 9px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}
.shv-portada:hover .shv-btn{ background: var(--sh-verde-hondo); }
.shv-btn iconify-icon{ font-size: 15px; }

/* ── LAS SUBCATEGORÍAS ───────────────────────────────────────────────── */
/*
 * DOS COLUMNAS, no tres: con la descripción debajo de cada nombre, tres dejan
 * las líneas tan cortas que cada entrada se parte en dos renglones.
 */
.shv-hijas{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.shv-hijas > li{ position: static; }

.shv-hijas a{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 12px;

    border: 1px solid var(--shv-borde);
    border-radius: 12px;

    text-decoration: none;
    transition: background .13s ease, border-color .13s ease;
}
.shv-hijas a:hover{
    background: var(--shv-act-bg);
    border-color: var(--shv-act-borde);
    text-decoration: none;
}
.shv-hijas a:hover b, .shv-hijas a:hover small{ text-decoration: none; }

.shv-hija-txt{ flex: 1; min-width: 0; }
.shv-hija-txt b{
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--shv-titulo);
}
.shv-hija-txt small{
    display: block;
    margin-top: 3px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--shv-sub);
}
.shv-hijas a:hover .shv-hija-txt b{ color: var(--shv-act-titulo); }
.shv-hija-mas{ flex: 0 0 auto; font-size: 15px; color: var(--sh-tenue); }

.shv-todas{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 16px;
    padding: 10px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
    text-decoration: none;
}
.shv-todas:hover{ text-decoration: none; color: var(--sh-verde); }
.shv-todas:visited{ color: var(--sh-verde-hondo); }
.shv-todas iconify-icon{ font-size: 15px; }

/* ── 3. PUBLICIDAD Y GARANTÍAS ───────────────────────────────────────── */
.shv-lado{
    padding: 18px;
    border-left: 1px solid var(--sh-linea);
}

.shv-lado-cab{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.shv-lado-cab iconify-icon{ font-size: 17px; color: #f59e0b; }
.shv-lado-cab b{
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
}

/*
 * LA CREATIVIDAD, TAL CUAL VIENE.
 *
 * Ni recorte ni relleno: la imagen llega montada con su medida y lo único que
 * hace la hoja es que no se salga del ancho de la columna. Deformarla para que
 * encaje en un alto fijo es cambiar lo que el anunciante ha pagado.
 */
.shv-banner{
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}
.shv-banner img{ display: block; width: 100%; height: auto; }

.shv-publi{
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 2px 7px;

    background: rgba(15, 23, 42, .62);
    border-radius: 5px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
}

.shv-garantia{
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 12px;
    padding: 11px 12px;

    border: 1px solid var(--sh-linea);
    border-radius: 11px;
}

.shv-gico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    background: var(--sh-verde-suave);
    border-radius: 9px;
}
.shv-gico iconify-icon{ font-size: 18px; color: var(--sh-verde-hondo); }

.shv-garantia b, .shv-cond b{
    display: block;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--shv-titulo);
}
.shv-garantia small, .shv-cond small{
    display: block;
    margin-top: 3px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--shv-sub);
}

/* ── EL PIE ──────────────────────────────────────────────────────────── */
.shv-pie{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    padding: 16px 22px;

    background: #fbfcfb;
    border-top: 1px solid var(--sh-linea);
}

.shv-cond{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 18px;
}
/* Separadores entre las cuatro, menos antes de la primera. */
.shv-cond + .shv-cond{ border-left: 1px solid var(--sh-linea); }

/* En pantallas medias la columna de publicidad es lo primero que sobra: sin
   ella las subcategorías respiran, y el banner vuelve en cuanto hay sitio. */
@media (max-width: 1180px){
    .shv-cuerpo{ grid-template-columns: 320px minmax(0, 1fr); }
    .shv-lado{ display: none; }
}

@media (max-width: 900px){
    .shv{ display: none; }   /* en móvil manda el menú del sitio, no este panel */
}

/* ── LO QUE SE APAGA POR CONFIGURACIÓN ───────────────────────────────── */
/*
 * Con la zona apagada desde el navegador se oculta en vez de borrarla: la
 * instancia puede volver a encenderla sin rehacer el marcado. Cuando se apaga
 * desde PHP ni siquiera se imprime.
 */
.sh.sin-busqueda .sh-buscador,
.sh.sin-sesion .sh-sesion,
.sh.sin-categorias .sh-cats{ display: none; }

/* Sin buscador, la sesión se va a la derecha ella sola por el `margin-left`. */

@media (max-width: 900px){
    .sh-barra{ gap: 14px; padding: 10px 14px; }
    .sh-marca-txt{ font-size: 18px; }
    .sh-buscador{ height: 38px; }
}

@media (max-width: 640px){
    /* En móvil la marca se queda en el icono: el nombre y el buscador no caben
       a la vez, y el buscador es lo que se usa. */
    .sh-marca-txt{ display: none; }
    .sh-cats{ padding: 0 8px; }
}

/* ── EL LOGOTIPO ─────────────────────────────────────────────────────
 *
 * Se mide por el ALTO y el ancho lo pone su proporción: con un `width` fijo,
 * un logo que cambie de forma --y este ya ha cambiado una vez-- saldría
 * estirado. El `width`/`height` del marcado son los del fichero, para que el
 * navegador reserve el hueco y la cabecera no dé un salto al cargar. */
.sh .sh-marca-img{
    height: 38px;
    width: auto;
    display: block;
}

@media (max-width: 860px){
    .sh .sh-marca-img{ height: 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   EL BLOQUE PROMOCIONAL DEL PANEL  (`.sh-promo`)
   ════════════════════════════════════════════════════════════════════════

   Lo compone ADMIN en Apariencia · Navegación y cuelga de una familia: sale
   dentro de SU panel, no en todos. NO es el hueco de publicidad --ese es
   `.shv-banner` / `.sh-mega-banner`, y lo decide `MenuBanner` con su regla de
   que manda quien paga--: son dos cosas distintas y por eso se ven distintas,
   aunque compartan columna en el panel de columnas.

   UNA SOLA HOJA PARA LOS DOS PANELES. La pieza es la misma en el vertical y en
   el de columnas; lo que cambia es dónde se cuelga, así que el ancho lo pone su
   sitio y aquí no se fija ninguno. */
.sh .sh-promo,
.shv .sh-promo{
    display: block;
    overflow: hidden;

    margin-top: 16px;

    border: 1px solid var(--sh-verde-linea);
    border-radius: 14px;
    background: var(--sh-verde-suave);

    text-decoration: none;
    transition: border-color .13s ease, box-shadow .13s ease;
}

/*
 * EL BORDE, TAMBIÉN CUANDO YA SE HA VISITADO.
 *
 * La hoja global del sitio pinta de negro el borde de cualquier enlace
 * visitado, y una tarjeta-enlace acaba con un marco negro en cuanto alguien la
 * pulsa una vez. No se ve en `getComputedStyle` mientras no esté visitada, así
 * que es de los que aparecen a la semana. Mismo remedio que `.shv-hijas a`.
 */
.sh a.sh-promo:visited,
.shv a.sh-promo:visited{ border-color: var(--sh-verde-linea); }

.sh a.sh-promo:hover,
.shv a.sh-promo:hover{
    border-color: var(--sh-verde);
    box-shadow: 0 2px 10px rgba(22, 163, 74, .12);
    text-decoration: none;
}

/* LA IMAGEN MANDA EL ALTO, no un rectángulo fijo: la creatividad viene con su
   medida y recortarla a ciegas es lo que parte los títulos que trae dentro. */
.sh .sh-promo img,
.shv .sh-promo img{
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--sh-verde-linea);
}

.sh .sh-promo-txt,
.shv .sh-promo-txt{ padding: 11px 13px 13px; }

.sh .sh-promo-txt b,
.shv .sh-promo-txt b{
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sh-verde-hondo);
}

.sh .sh-promo-txt small,
.shv .sh-promo-txt small{
    display: block;
    margin-top: 4px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--sh-tinta-suave);
}

.sh .sh-promo-cta,
.shv .sh-promo-cta{
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 9px;

    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
}

/* EL TAMAÑO SE DECLARA EN EL ICONO, no en su caja: `iconify-icon` no hereda el
   `font-size` del padre y sin esto sale a 20px, más grande que su propio
   rótulo. */
.sh .sh-promo-cta iconify-icon,
.shv .sh-promo-cta iconify-icon{ font-size: 14px; }

/*
 * EL MEGA MENÚ EN LA BARRA: se lee como una entrada más, no como un botón.
 *
 * Es la primera y abre el panel entero, así que la tentación es destacarla con
 * un fondo. No: al lado de ocho familias con su dibujo, un botón de color se
 * lee como publicidad y se salta. Lo que la distingue es su icono de rejilla y
 * que su flecha ya viene puesta.
 */
.sh .sh-cat-mega > a{ font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   LA CABECERA DE UNA SOLA FRANJA  (rediseño del 25/08/2026)
   ════════════════════════════════════════════════════════════════════════

   Antes eran dos franjas: la de la marca y, debajo, la de categorías. Ahora
   todo va en una --marca, explorador, buscador, navegación y accesos-- y la de
   debajo se queda como zona configurable, vacía de salida.

   LO DE ABAJO NO SE HA BORRADO: `.sh-zona-nav` sigue entera y con su hoja, y
   vuelve a verse en cuanto la zona «SubMenú de navegación 2» tenga entradas. */

/* ── EL EXPLORADOR ────────────────────────────────────────────────────
   Un cuadrado del alto del buscador, a su izquierda. Abre el panel de
   categorías -- explorar, no acotar la búsqueda: son dos cosas distintas y
   estaban en el mismo control. */
.sh .sh-explorador{
    flex: 0 0 auto;

    /* CUADRADO DE VERDAD, y con el mismo alto que la caja de búsqueda (40px):
       con `aspect-ratio` a secas un `min-width` heredado lo deformaba. */
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    background: #fff;
    border: 1px solid var(--sh-verde-linea);
    border-radius: 10px;
    color: var(--sh-verde-hondo);

    cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}

.sh .sh-explorador:hover{
    background: var(--sh-verde-suave);
    border-color: var(--sh-verde);
}

/* EL TAMAÑO SE DECLARA EN EL ICONO: `iconify-icon` no hereda el `font-size` de
   su caja, y sin esto sale a 20px dentro de un botón de 40. */
.sh .sh-explorador iconify-icon{ font-size: 19px; }

/* ── LA ZONA 1, A LA DERECHA DEL BUSCADOR ─────────────────────────────
   La pinta `NavigationRender::barra()`, así que su marcado es el genérico de
   una zona (`.nav-zona`); aquí solo se le da el aspecto de la cabecera. */
.sh .sh-nav1{ flex: 0 0 auto; }

/*
 * FONDO TRANSPARENTE, Y HAY QUE DECIRLO.
 *
 * La hoja global del sitio le pone `background:#fff` a `nav`, y la franja de la
 * cabecera es crema (`--sh-fondo`, #fffdf7): el resultado era un rectángulo
 * blanco recortado detrás de los rótulos, como si la navegación fuera una caja
 * pegada encima. Medido con `getComputedStyle`: el `<nav>` salía en
 * `rgb(255,255,255)` mientras el `ul`, el `li` y el `a` ya eran transparentes.
 *
 * Se apagan las tres capas y no solo el `<nav>`: cualquiera de ellas puede
 * heredar un fondo el día que alguien toque la hoja global, y aquí lo que se
 * quiere es que la navegación se lea sobre la franja, sin caja.
 */
.sh .nav-zona,
.sh .nav-zona-lista,
.sh .nav-zona-item{ background: transparent; }

.sh .nav-zona-lista{
    display: flex;
    align-items: center;
    gap: 4px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.sh .nav-zona-item{ position: static; }

.sh .nav-zona-item > a,
.sh .nav-zona-item > .nav-zona-txt{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 11px;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--sh-tinta);
    text-decoration: none;
    white-space: nowrap;

    transition: background .13s ease, color .13s ease;
}

/* ── LA MISMA SEÑAL QUE LA CABECERA DE LA LANDING ────────────────────
 *
 * Aquí el hover era una pastilla verde de fondo y NO HABÍA marca de la página
 * en la que estás; en la landing era al revés: subrayado en la activa y solo un
 * cambio de color al pasar el ratón. Dos cabeceras del mismo sitio diciendo lo
 * mismo de dos formas distintas.
 *
 * Se unifican al SUBRAYADO, que es lo que ya usa la barra de categorías de esta
 * misma hoja (`.sh-cat:hover > a`) y lo que sobrevive al modo de alto contraste
 * -- un fondo de color ahí desaparece y la señal se pierde entera.
 *
 * MISMO GROSOR Y MISMA SEPARACIÓN en las dos barras y en los dos estados (2px,
 * `text-underline-offset: 6px`): con medidas distintas la raya salta de sitio al
 * mover el ratón entre entradas si una de ellas es la activa.
 *
 * Y la pastilla se va del todo, no se reparte: el panel de categorías no lo abre
 * ninguna entrada de esta barra --lo abre `.sh-explorador`, el botón de al lado
 * del logotipo--, así que aquí no quedaba nada que señalar con un fondo.
 */
.sh .nav-zona-item > a:hover{
    color: var(--sh-verde-hondo);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--sh-verde);
}

.sh .nav-zona-item > a.es-activo{
    color: var(--sh-verde-hondo);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--sh-verde);
}

/* Pasar por encima de la que ya está activa no cambia nada: parpadear sobre la
   página en la que ya estás no informa de nada. */
.sh .nav-zona-item > a.es-activo:hover{ color: var(--sh-verde-hondo); }

/* El `a:visited` global pinta de morado lo ya visitado, y la entrada activa es
   por definición una página visitada. El color se repone en el `<span>`, que es
   donde el navegador sí deja cambiarlo -- ver la nota de aquí debajo. */
.sh .nav-zona-item > a.es-activo > span,
.sh .nav-zona-item > a.es-activo:visited > span{ color: var(--sh-verde-hondo); }

/*
 * EL COLOR VA EN EL `<span>`, NO EN EL `<a>`.
 *
 * La hoja global del sitio pinta de morado (#910c88) todo enlace visitado, y
 * una barra de navegación con la mitad de los rótulos en morado se lee como un
 * error. Poner `.nav-zona-item > a:visited{color:…}` NO basta: el navegador
 * restringe lo que se puede cambiar en `:visited` y no siempre aplica un
 * `var()` ahí -- y `getComputedStyle` devuelve el color de NO visitado, así que
 * el fallo no se ve midiendo, solo mirando.
 *
 * La salida es la que ya usa la barra de categorías de esta misma hoja: se
 * viste el elemento de DENTRO, que no está sujeto a esa restricción. Por eso el
 * rótulo de una zona se pinta siempre envuelto en un `<span>`.
 */
.sh .nav-zona-item > a > span{ color: var(--sh-tinta); }
.sh .nav-zona-item > a:hover > span{ color: var(--sh-verde-hondo); }
.sh .sh-nav-accesos .nav-zona-item > a > span{ color: var(--sh-tinta-suave); }

.sh .nav-zona-item iconify-icon{ font-size: 16px; color: var(--sh-tinta-suave); }

.sh .nav-zona-sep{
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--sh-linea);
}

/* Las hijas de una zona simple no se despliegan aquí: una zona de barra es de
   un nivel. Si alguien pide dos, `NavigationRender` las pinta y esta hoja las
   deja fuera del flujo hasta que haya un diseño para ellas. */
.sh .nav-zona-sub{ display: none; }

/* ── LO DE LA DERECHA ─────────────────────────────────────────────────
   Accesos, la llamada a registrarse y la caja de sesión, en ese orden. Es este
   bloque el que empuja hacia el margen, no cada pieza por su cuenta. */
.sh .sh-derecha{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;

    margin-left: auto;
}

.sh .sh-nav-accesos .nav-zona-item > a{ color: var(--sh-tinta-suave); }

/* LA LLAMADA A REGISTRARSE: contorno, no relleno. Un botón macizo al lado de la
   caja de sesión compite con ella --y con el carrito-- por la misma mirada;
   aquí lo que tiene que destacar es lo que ya es tuyo. */
.sh .sh-cta{
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border: 1px solid var(--sh-verde);
    border-radius: 9px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--sh-verde-hondo);
    text-decoration: none;
    white-space: nowrap;

    transition: background .13s ease;
}

.sh .sh-cta:hover{ background: var(--sh-verde-suave); text-decoration: none; }
/* El CTA no lleva `<span>` dentro --es una sola palabra-- así que aquí sí se
   declara sobre el enlace, y con COLOR LITERAL: un `var()` en `:visited` no
   siempre se aplica. #15803d es `--sh-verde-hondo`. */
.sh a.sh-cta:visited{ color: #15803d; border-color: var(--sh-verde); }

/* ── LA FRANJA DE ABAJO, VACÍA ────────────────────────────────────────
   El contenedor se sigue pintando porque ES EL MARCO DEL PANEL --absoluto con
   `top:100%`--, pero sin bordes ni alto: no se ve, y el panel abre justo debajo
   de la franja de arriba. En cuanto la zona 2 tenga entradas, se le quita esta
   clase y vuelve a ser la franja de siempre. */
.sh .sh-zona-nav--vacia{
    border-top: 0;
    border-bottom: 0;
    background: transparent;
}

.sh .sh-zona-nav--vacia > .body-content{ padding-top: 0; padding-bottom: 0; }

/* ── ESTRECHO ─────────────────────────────────────────────────────────
   Con poco ancho lo primero que sobra son los rótulos de navegación: el
   buscador y el explorador son la puerta al catálogo y tienen que quedarse. */
@media (max-width: 1100px){
    .sh .sh-nav1{ display: none; }
}

@media (max-width: 860px){
    .sh .sh-nav-accesos, .sh .sh-cta{ display: none; }
}

/* ── «MI CUENTA», CON CONTRASTE AA (15/09/2026) ─────────────────────────
   `.sh-sesion a{ color: tinta }` (0,1,1) le ganaba a `.TSessionBox-entrar
   { color:#fff }` (0,1,0) y el rótulo salía gris oscuro sobre naranja. Pero
   el blanco sobre el naranja de marca (#ff6000) tampoco llega: 3,0:1, y a 13 px
   en negrita AA pide 4,5. Se devuelve el blanco que quería `TSessionBox` y el
   fondo baja a #c2410c (5,2:1); al pasar el ratón, #9a3412 (7,3:1). Solo aquí:
   la hoja de `TSessionBox` y el `--btn_color` del sitio no se tocan. */
.sh .sh-sesion a.TSessionBox-entrar,
.sh .sh-sesion a.TSessionBox-entrar:visited{
    color: #fff;
    background: #c2410c;
}
.sh .sh-sesion a.TSessionBox-entrar:hover{
    color: #fff;
    background: #9a3412;
    filter: none;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   LA CABECERA EN MÓVIL  (≤ 760 px · construida el 15/09/2026)
   ════════════════════════════════════════════════════════════════════════

   Contrato y maqueta: PendingWorks/CABECERA-MOVIL.md. Corte en 760 px, el
   mismo de la ficha (`TArticleProfile.css`) y de su barra de compra: las dos
   cambian de forma a la vez.

       ┌──────────────────────────────────────────────┐
       │ ☰   AgroCalia                      🛒²   ◯    │  56 px
       │ ▦  [🔍 Buscar productos o agricultores     ] │  52 px  ← se recoge al bajar
       └──────────────────────────────────────────────┘

   ES LA MISMA FILA DE ESCRITORIO, reordenada con `flex-wrap`: el marcado es
   uno solo y el orden del documento es el orden visual --menú, marca, lupa,
   cesta, cuenta, categorías, buscador--, así que el tabulador recorre la
   cabecera en el mismo orden en que se lee. Lo que no cabe en las dos filas
   (navegación, «Únete como comprador», la caja de sesión) va al panel.

   POR ENCIMA DE 760 px NADA DE ESTO SE PINTA: las piezas nuevas nacen en
   `display:none` y la fila de escritorio no cambia ni un píxel.

   SIN `transform` EN NINGÚN ANCESTRO del panel ni del buscador: un `transform`
   convierte a su caja en el marco de los `position:fixed` de dentro, y el
   panel se abriría del tamaño de la cabecera en vez del de la pantalla.
   ════════════════════════════════════════════════════════════════════════ */

/* ── EN ESCRITORIO NO EXISTEN ─────────────────────────────────────────── */
.sh .sh-m-menu,
.sh .sh-m-accesos,
.sh .sh-m-salto,
.sh .sh-busca-volver,
.sh .shm-velo,
.sh .shm-panel{ display: none; }

/* El marco del buscador no dibuja caja en escritorio: `display:contents` deja
   que `.sh-buscador` siga siendo hijo directo de la fila flex, con su `flex:1`
   de siempre. En móvil es la pantalla completa. */
.sh .sh-busca-marco{ display: contents; }

/* EL CORTE ES 860 Y NO 760 (16/09/2026). La fila de escritorio mide 790 px, así
   que entre 761 y 790 no cabía; y el carril del sitio se soltaba a 760 mientras
   `min-width:800px` seguía dando una página de 820 hasta 835. Se subieron los
   dos a la vez --aquí y en `base.php`-- para que cabecera, carril y tienda
   corten por el mismo sitio. Medido en PendingWorks/TIENDA-MOVIL.md §1. */
@media (max-width: 860px){

    /* ── EL CARRIL, SIN MÁRGENES DE ESCRITORIO ─────────────────────────── */
    .sh .sh-zona-barra > .body-content.sh-fila{
        min-width: 0;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }

    .sh .sh-barra{
        flex-wrap: wrap;
        align-items: center;
        gap: 0 2px;
        padding: 0 8px;

        /* LA FILA 2 SE RECOGE CERRANDO EL ALTO, no con `transform` (ver arriba).
           108 = 56 + 52. El `overflow` no recorta al panel ni a la pantalla
           de búsqueda: son `fixed` y su marco es la ventana. */
        max-height: 108px;
        overflow: hidden;
        transition: max-height .2s ease;

        /*
         * SIN ESTO, LA CABECERA ENTRABA EN BUCLE (22/09/2026).
         *
         * `body > header` es `position: sticky` (`base.php`). Chrome intenta
         * compensar cualquier cambio de tamaño por ENCIMA de lo que se ve --el
         * "scroll anchoring" que evita el salto cuando una imagen carga tarde--
         * y esta fila cambia de alto ELLA SOLA, 108↔56, al recogerse. Chrome lo
         * lee como "el contenido de arriba se movió" y CORRIGE el scroll para
         * compensar -- lo que dispara otro evento `scroll`, que vuelve a leer
         * el umbral, que vuelve a recoger o soltar la fila, que vuelve a
         * disparar la compensación: el parpadeo mostrándose/ocultándose que se
         * veía en el móvil, sin que `_alDesplazar()` tenga ningún fallo -- el
         * bucle lo cierra el navegador, no el JS.
         *
         * `overflow-anchor: none` saca esta fila (y con ella toda la cabecera)
         * de ese cálculo: cambia de alto y el navegador ya no toca el scroll
         * por su cuenta.
         */
        overflow-anchor: none;
    }

    /* Lo que va al panel, fuera de la fila. */
    .sh .sh-nav1,
    .sh .sh-zona-nav,
    .sh #headerZone{ display: none; }

    /*
     * LA CAJA DE SESIÓN NO SE QUITA: SE ESCONDE.
     *
     * Dentro está la campana, y «Avisos» del panel abre SU panel --el mismo, no
     * una copia--. Con `display:none` ese panel no podría verse nunca; con
     * `visibility:hidden` en la caja y `visible` en el panel de avisos, sí. Y
     * lo escondido con `visibility` no recibe el foco del tabulador.
     */
    .sh .sh-derecha{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        visibility: hidden;
    }

    .sh .TNotificationsBell-panel{
        position: fixed;
        top: 62px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 70vh;
        visibility: visible;
    }

    /* ── FILA 1 (56 px): menú, marca, lupa, cesta, cuenta ───────────── */

    /* TODO LO QUE SE PULSA MIDE 44 × 44 (WCAG 2.5.5). `.sh .x` pesa (0,2,0) y
       le gana a `.TComponentES6 button` (0,1,1), que fija 25 px de alto. */
    .sh .sh-m-ico{
        position: relative;
        flex: 0 0 44px;

        display: inline-grid;
        place-items: center;

        width: 44px;
        height: 44px;
        min-height: 0;
        padding: 0;
        margin: 6px 0;

        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--sh-tinta);
        text-decoration: none;
        cursor: pointer;
    }
    .sh a.sh-m-ico:visited{ color: var(--sh-tinta); }
    .sh .sh-m-ico:hover{ background: var(--sh-verde-suave); text-decoration: none; }

    /* El tamaño, EN EL ICONO: `iconify-icon` no hereda el de su caja. */
    .sh .sh-m-ico iconify-icon{ font-size: 22px; width: 22px; height: 22px; color: inherit; }

    .sh .sh-m-menu{ display: inline-grid; }

    .sh .sh-marca{
        height: 44px;
        margin: 6px 0;
        padding: 0 6px;
    }
    .sh .sh-marca-img{ height: 26px; }

    .sh .sh-m-accesos{
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }

    /* La lupa solo con la fila del buscador recogida: con ella a la vista
       serían dos puertas a lo mismo. */
    .sh .sh-m-lupa{ display: none; }

    /* «Volver» solo existe con el buscador a pantalla completa. Se repite aquí
       porque `.sh .sh-m-ico` (misma especificidad, más arriba) lo encendía. */
    .sh .sh-busca-volver{ display: none; }

    /* EL NÚMERO DE LA CESTA, en el naranja de la barra de compra y con el
       blanco que aguanta sobre él (#fff sobre #c2410c: 5,2:1). */
    .sh .sh-m-contador{
        position: absolute;
        top: 5px;
        right: 3px;

        display: none;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;

        border-radius: 999px;
        background: #c2410c;
        color: #fff;

        font: 700 10px/17px 'Inter', sans-serif;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .sh .sh-m-contador.es-visible{ display: block; }

    /* El salto de línea de la fila flex: todo lo que va detrás, a la fila 2. */
    .sh .sh-m-salto{
        display: block;
        flex: 0 0 100%;
        height: 0;
    }

    /* ── FILA 2 (52 px): categorías y buscador ──────────────────────── */
    .sh .sh-explorador{ margin: 4px 8px 8px 4px; }

    .sh .sh-buscador{
        flex: 1 1 0;
        max-width: none;
        height: 40px;
        margin: 4px 8px 8px 0;
        border-color: #d5dde3;
    }

    /* La caja como en la maqueta: lupa dentro y sin el botón verde. Intro --el
       «Ir» del teclado del teléfono-- ya busca. */
    .sh .tps .tps-lupa{ display: block; font-size: 17px; }
    .sh .tps-lanzar{ display: none; }
    .sh .tps-caja{ padding: 0 12px; gap: 8px; border-radius: 10px; }

    /* 16 px Y NO 15: por debajo, Safari en iOS amplía la página al enfocar el
       campo, y a quien entra con sesión se le deja ampliar (`user-scalable`). */
    .sh .tps-input{ font-size: 16px; }

    /* ── RECOGIDA ───────────────────────────────────────────────────── */
    .sh.es-recogida .sh-barra{ max-height: 56px; }

    /* Lo que queda debajo del corte no se enfoca con el tabulador. */
    .sh.es-recogida .sh-explorador,
    .sh.es-recogida .sh-buscador{ visibility: hidden; }

    .sh.es-recogida .sh-m-lupa{ display: inline-grid; }

    /* La sombra de la barra de compra de la ficha, dada la vuelta: las dos
       barras fijas se leen como un par. Sustituye a la doble de `sticky-shadow`. */
    body > header.sticky-shadow{ box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

    /* ── EL BUSCADOR A PANTALLA COMPLETA ───────────────────────────── */
    .sh.es-buscando .sh-busca-marco{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1102;

        display: flex;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 16px 0 6px;

        /* La franja de arriba en el crema de la cabecera, con su línea, y el
           resto en blanco: una sola caja, sin piezas sueltas que coordinar. */
        background:
            linear-gradient(to bottom,
                var(--sh-fondo) 0, var(--sh-fondo) 59px,
                var(--sh-linea) 59px, var(--sh-linea) 60px,
                #fff 60px);
    }

    .sh.es-buscando .sh-busca-volver{ display: inline-grid; margin: 0; }

    .sh.es-buscando .sh-buscador{
        visibility: visible;
        height: 44px;
        margin: 0;
        border-color: var(--sh-verde);
        box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
    }

    .sh.es-buscando .tps-popup{
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Cada resultado: nombre en DOS líneas --lo que distingue un aceite de
       otro está al final del nombre-- y el precio con su €/kg a la derecha. */
    .sh.es-buscando .tps-item{ align-items: flex-start; padding: 10px 16px; }
    .sh.es-buscando .tps-foto{ width: 44px; height: 44px; }
    .sh.es-buscando .tps-texto b{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        font-size: 13.5px;
        line-height: 1.35;
    }
    .sh.es-buscando .tps-todos{ min-height: 48px; padding: 0 16px; font-size: 13px; }

    /* ── EL PANEL DEL MENÚ ──────────────────────────────────────────── */
    .sh .shm-velo{
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1100;

        background: rgba(15, 23, 42, .45);

        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }

    .sh .shm-panel{
        display: flex;
        flex-direction: column;

        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1101;

        width: 320px;
        max-width: 86%;

        background: #fff;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .18);

        /* El panel SÍ se mueve con `transform`: es la hoja, no el marco de
           nadie. `visibility` además, para que cerrado no se enfoque. */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    .sh.es-menu .shm-velo{
        opacity: 1;
        visibility: visible;
        transition: opacity .22s ease;
    }

    .sh.es-menu .shm-panel{
        transform: none;
        visibility: visible;
        transition: transform .22s ease;
    }

    .shm-panel-cab{
        flex: 0 0 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px 0 16px;
        background: var(--sh-fondo);
        border-bottom: 1px solid var(--sh-linea);
    }
    .sh .shm-panel-marca{ display: block; height: 24px; width: auto; }
    .sh .shm-panel-cab .sh-m-ico{ margin: 0; }

    .shm-panel-cuerpo{
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }

    /* LA CUENTA: icono en su columna y TODO el texto en la segunda. */
    .shm-cuenta{
        display: flex;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sh-linea);
    }
    .sh .shm-cuenta-ico{
        flex: 0 0 auto;
        margin-top: 1px;
        font-size: 22px; width: 22px; height: 22px;
        color: var(--sh-verde-hondo);
    }
    .shm-cuenta-txt{ flex: 1; min-width: 0; }
    .sh .shm-cuenta-txt b{
        display: block;
        font: 600 14px/1.35 'Inter', sans-serif;
        color: var(--sh-tinta);
    }
    .sh .shm-cuenta-txt small{
        display: block;
        margin-top: 2px;
        font: 400 12px/1.4 'Inter', sans-serif;
        color: var(--sh-tinta-suave);
    }

    .shm-botones{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    .sh .shm-btn{
        flex: 1 1 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 14px;
        border-radius: 9px;
        font: 600 14px 'Inter', sans-serif;
        text-decoration: none;
        white-space: nowrap;
    }
    .sh .shm-btn-primario,
    .sh .shm-btn-primario:visited{ background: var(--sh-verde-hondo); color: #fff; border: 1px solid var(--sh-verde-hondo); }
    .sh .shm-btn-primario:hover{ background: #166534; text-decoration: none; }
    .sh .shm-btn-secundario,
    .sh .shm-btn-secundario:visited{ background: #fff; color: var(--sh-verde-hondo); border: 1px solid var(--sh-verde); }
    .sh .shm-btn-secundario:hover{ background: var(--sh-verde-suave); text-decoration: none; }

    /* EL RÓTULO DE CADA GRUPO: la regla global de `h2` le pone 18 px y relleno. */
    .sh .shm-tit{
        margin: 14px 16px 4px;
        padding: 0;
        font: 600 11px/1.3 'Inter', sans-serif;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #5f6b7a;
    }

    /* LAS LISTAS: la de la cuenta, la navegación (la pinta `NavigationRender`,
       con su marcado de zona) y las categorías. Filas de 44 px. */
    .sh .shm-lista,
    .sh .shm-panel .nav-zona-lista{
        display: block;
        margin: 0;
        padding: 0 8px;
        list-style: none;
    }
    .sh .shm-lista > li,
    .sh .shm-panel .nav-zona-item{ display: block; position: static; }

    .sh .shm-lista a,
    .sh .shm-lista button.shm-avisos,
    .sh .shm-panel .nav-zona-item > a{
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 0 8px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--sh-tinta);
        text-decoration: none;
        white-space: normal;
        text-align: left;
        cursor: pointer;
    }
    .sh .shm-lista a:hover,
    .sh .shm-lista button.shm-avisos:hover,
    .sh .shm-panel .nav-zona-item > a:hover{ background: var(--sh-verde-suave); text-decoration: none; }

    .sh .shm-lista iconify-icon,
    .sh .shm-panel .nav-zona-item iconify-icon{
        flex: 0 0 auto;
        font-size: 19px; width: 19px; height: 19px;
        color: var(--sh-tinta-suave);
    }

    /* EL TEXTO VA EN SU `<span>`, y el tamaño en el span: la regla global
       `div, span, p, li { font: 12px }` le gana a cualquier herencia. */
    .sh .shm-lista a > span,
    .sh .shm-lista button > span,
    .sh .shm-panel .nav-zona-item > a > span{
        flex: 1;
        min-width: 0;
        font: 500 14.5px/1.3 'Inter', sans-serif;
        color: var(--sh-tinta);
    }

    /* La entrada de la página en la que se está (la marca `_marcarActivo`). */
    .sh .shm-panel .nav-zona-item > a.es-activo{
        background: var(--sh-verde-suave);
        text-decoration: none;
    }
    .sh .shm-panel .nav-zona-item > a.es-activo > span{ color: var(--sh-verde-hondo); font-weight: 600; }
    .sh .shm-panel .nav-zona-item > a.es-activo iconify-icon{ color: var(--sh-verde-hondo); }

    /* El número de avisos, a la derecha de su fila. */
    .sh .shm-lista .shm-avisos-num{
        flex: 0 0 auto;
        display: none;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #c2410c;
        font: 700 11px/20px 'Inter', sans-serif;
        color: #fff;
        text-align: center;
    }
    .sh .shm-lista .shm-avisos-num.es-visible{ display: inline-block; }

    /* CATEGORÍAS: el enlace a la familia y, al lado, la flecha que abre sus
       hijas dentro del panel. Dos blancos táctiles, cada uno con lo suyo. */
    .shm-cat-fila{ display: flex; align-items: center; }
    .sh .shm-cat-fila > a{ flex: 1; min-width: 0; }
    .sh .shm-cat-fila .sh-m-ico{ margin: 0; flex-basis: 44px; }
    .sh .shm-cat-fila .sh-m-ico iconify-icon{ font-size: 18px; width: 18px; height: 18px; color: var(--sh-tenue); transition: transform .15s ease; }
    .sh .shm-cat-abrir[aria-expanded="true"] iconify-icon{ transform: rotate(180deg); }

    .sh .shm-subs{
        display: none;
        margin: 0 0 6px 39px;
        padding: 0;
        list-style: none;
        border-left: 1px solid var(--sh-linea);
    }
    .sh .shm-subs.es-abierta{ display: block; }
    .sh .shm-subs a{
        min-height: 40px;
        padding-left: 12px;
    }
    .sh .shm-subs a > span{ font-size: 14px; font-weight: 400; }

    .shm-panel-pie{
        flex: 0 0 auto;
        padding: 8px;
        border-top: 1px solid var(--sh-linea);
    }
    .sh .shm-panel-pie .shm-lista{ padding: 0; }
    .sh .shm-panel-pie .shm-lista a > span{ color: var(--sh-tinta-suave); }

    /* ── MIENTRAS HAY ALGO ABIERTO ──────────────────────────────────── */
    /* El fondo no se desplaza y el chat de soporte (z-index 9000, por encima
       de la cabecera) no tapa el panel ni la búsqueda. */
    html.sh-bloqueo,
    html.sh-bloqueo body{ overflow: hidden; }

    html.sh-bloqueo #sopChat{ visibility: hidden; }
}

/* SIN ANIMACIÓN PARA QUIEN LA HA PEDIDO QUITAR en su sistema: la fila, el panel
   y el velo cambian de golpe. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce){
    .sh .sh-barra,
    .sh .shm-panel,
    .sh .shm-velo,
    .sh.es-menu .shm-panel,
    .sh.es-menu .shm-velo,
    .sh .shm-cat-fila .sh-m-ico iconify-icon{ transition: none; }
}

/*
 * EL PIE, POR EL MISMO CAMINO Y POR EL MISMO MOTIVO.
 *
 * Es el pie de TODAS las paginas --el de la portada--, asi que su hoja tiene
 * que estar en todas. Vivia dentro de `TLanding.css` colgando de `.lp`, y por
 * eso solo existia donde habia landing: la tienda se quedaba sin pie y el
 * resto del sitio arrastraba otro distinto (`footer.php`).
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  EL PIE DEL SITIO   ·   uno solo, para todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * El pie bueno --el de la portada-- vivía dentro de la hoja del landing y
 * colgaba de `.lp`, así que solo existía donde había un landing. El resto del
 * sitio arrastraba OTRO pie (`www_oneway/footer.php`), y la tienda no tenía
 * ninguno. Tres pies para un sitio son tres sitios donde cambiar un enlace
 * legal, y ya se veía: el de la portada llevaba las columnas del gestor de
 * zonas y el otro no.
 *
 * Aquí está el único, autocontenido: declara sus propias variables y no
 * depende de que alguien haya cargado la hoja del landing. Lo pinta `base.php`
 * para toda la web.
 *
 * ── SE COLGABA DE `.lp` Y AHORA DE `.ac-pie` ───────────────────────
 *
 * `pie.php` envuelve el pie en `.ac-pie`, así que las páginas de plataforma
 * --que ya viven dentro de un `.lp`-- siguen viéndose igual y el resto lo
 * hereda sin tener que envolverse en nada.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * La hoja del landing usa consultas de contenedor porque su raíz declara un
 * `container-type`. Fuera de ahí no hay contenedor que consultar y esas reglas
 * NO SE APLICAN NUNCA -- sin error, y en un pie no se nota hasta que alguien
 * abre el sitio en un móvil.
 */

.ac-pie{
    --acp-verde:      #2f7d3f;
    --acp-tinta:      #16241a;
    --acp-texto:      #3f4a43;
    --acp-suave:      #6b7a70;
    --acp-borde:      #e6ebe6;
    --acp-crema:      #f6f9f4;
    --acp-verde-borde:#bcdcc4;
    --acp-fondo:      #faf8f2;
}

.ac-pie .lp-pie{
    padding: 46px 0 0;
    background: var(--acp-fondo);
    color: var(--acp-texto);
    border-top: 1px solid var(--acp-borde);
}

/* La única medida de página del pie. Se declara aquí y no se hereda del
   landing: fuera de él, `.lp-ancho` no existe. */
.ac-pie .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-pie .lp-pie-rejilla{
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 34px;
}

/* ── LA MARCA ───────────────────────────────────────────────────── */

.ac-pie .lp-marca{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--acp-tinta);
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -.3px;
    margin-bottom: 12px;
}
.ac-pie .lp-marca img{ height: 40px; width: auto; }

/* El `<b>` se lo llevaba la regla global `b,strong{color:#000}`, y el color no
   se hereda cuando alguien lo declara por debajo: hay que decirlo aquí. */
.ac-pie .lp-pie-marca .lp-marca b{ color: var(--acp-tinta); font-size: 19px; letter-spacing: -.2px; }
.ac-pie .lp-pie-marca .lp-marca b em{ color: var(--acp-verde); font-style: normal; }
.ac-pie .lp-pie-marca .lp-marca-ico{ display: flex; color: var(--acp-verde); font-size: 26px; }

.ac-pie .lp-pie-marca p{
    margin: 0 0 16px;
    font-size: 12.5px; line-height: 1.55;
    max-width: 260px; color: var(--acp-suave);
}

/* ── LOS DOS `<nav>` ────────────────────────────────────────────────
   `base.php` declara `nav{ background:#FFF; border-bottom:1px solid #bbb;
   z-index:1 }` para la barra de categorías, y eso dibujaba un rectángulo
   blanco con una raya gris debajo de los iconos sociales y de los legales.
   Medido, no supuesto. */
.ac-pie nav{ background: transparent; border: 0; z-index: auto; padding: 0; }

/* Y SUS ENLACES NO SON LOS DEL MENÚ. `base.php` declara además
   `nav a{ font: bold 15px Arial; color:#808080; padding:8px }` para la barra de
   categorías: sin desdecirlo, los enlaces del pie salen en Arial gris con ocho
   píxeles de relleno cada uno, y las columnas se separan como si fueran
   botones. */
.ac-pie nav a{ font: inherit; padding: 0; color: inherit; }

.ac-pie .lp-social{ display: flex; gap: 10px; }
.ac-pie .lp-social a{
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--acp-borde);
    color: var(--acp-verde);
    font-size: 15px;
    text-decoration: none;
}
.ac-pie .lp-social a:hover{ background: var(--acp-crema); border-color: var(--acp-verde-borde); }

/* ── LAS COLUMNAS ───────────────────────────────────────────────── */

/* ── EL TITULO DE LA COLUMNA ESTA FUERA DE LA COLUMNA ───────────────
 *
 * El gestor de zonas monta
 * `div.nav-zona-col > b.nav-zona-titulo + nav.lp-pie-col > ul > li > a > span`,
 * o sea que el rotulo **es hermano** del `<nav>`, no hijo. Vestirlo con
 * `.lp-pie-col b` --que es lo que parecia natural-- no aplicaba a nada: el
 * titulo se quedaba con la letra heredada y, sobre todo, PEGADO a su primer
 * enlace, mientras entre enlaces si habia 9px. Se leia como si «Plataforma» y
 * «Como funciona» fueran la misma cosa.
 *
 * Quien manda la separacion es el contenedor `.nav-zona-col`, y el titulo
 * necesita MAS aire que el que hay entre items: si tiene el mismo, deja de
 * parecer un titulo. */
.ac-pie .nav-zona-col{ display: flex; flex-direction: column; }
.ac-pie .nav-zona-titulo{
    display: block;
    color: var(--acp-tinta);
    font-size: 13px; font-weight: 700;
    margin-bottom: 14px;
}

.ac-pie .lp-pie-col{ display: flex; flex-direction: column; gap: 9px; }
/* EL COLOR VA TAMBIÉN AL `<span>` DE DENTRO, Y NO ES UN DETALLE.
   El gestor de zonas envuelve cada rótulo en un `<span>`, y la regla global es
   `a, .link, a:active, a:focus, a:visited, a span { color:#910c88 }` -- con
   `a span` dentro. Vestir solo el `<a>` deja el enlace del color correcto y el
   texto que se lee, magenta: el color lo pone el hijo, que es quien pinta. Es
   la misma trampa de la cabecera. */
.ac-pie .lp-pie-col a,
.ac-pie .lp-pie-col a span{ color: var(--acp-texto); font-size: 12.5px; text-decoration: none; font-weight: 400; }
.ac-pie .lp-pie-col a:hover,
.ac-pie .lp-pie-col a:hover span{ color: var(--acp-verde); text-decoration: underline; }
.ac-pie .lp-pie-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ac-pie .lp-pie-col li{ margin: 0; padding: 0; }

/* ── LA LÍNEA DE LEGALES ────────────────────────────────────────── */

.ac-pie .lp-pie-legal{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding-block: 16px;
    border-top: 1px solid var(--acp-borde);
    font-size: 11.5px;
    color: var(--acp-suave);
}
.ac-pie .lp-pie-legal nav{ display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal li{ margin: 0; padding: 0; }
.ac-pie .lp-pie-legal a,
.ac-pie .lp-pie-legal a span{ color: var(--acp-suave); text-decoration: none; font-weight: 400; font-size: 11.5px; }
.ac-pie .lp-pie-legal a:hover,
.ac-pie .lp-pie-legal a:hover span{ color: var(--acp-verde); text-decoration: underline; }

/* ── LO YA VISITADO ─────────────────────────────────────────────────
   La regla global `a:visited{ color:#910c88; border:0 !important }` pinta de
   magenta los enlaces del pie --que es justo lo que se visita-- y deja el
   `border-color` en `currentColor`. Se dice aquí, como en las tarjetas. */
/* CON EL COLOR LITERAL, NO CON `var()`: el navegador no resuelve variables
   dentro de una regla `:visited` --limita a propósito lo que ahí se puede
   cambiar, para que una página no pueda deducir tu historial-- y la regla se
   queda sin efecto, sin error y sin aviso. Son los valores de `--acp-texto` y
   `--acp-suave`. */
.ac-pie a:visited,
.ac-pie a:visited span{ color: inherit; border-color: inherit; }
.ac-pie .lp-pie-col a:visited,
.ac-pie .lp-pie-col a:visited span{ color: #3f4a43; }
.ac-pie .lp-pie-legal a:visited,
.ac-pie .lp-pie-legal a:visited span{ color: #6b7a70; }
.ac-pie .lp-pie-marca .lp-marca:visited b{ color: #16241a; }

/* ── ESTRECHO ───────────────────────────────────────────────────── */

@media (max-width: 1020px){
    .ac-pie .lp-pie-rejilla{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
    .ac-pie .lp-ancho{ padding-inline: 18px; }
    .ac-pie .lp-pie-rejilla{ grid-template-columns: 1fr; }
}

/*
 * Y LA FRANJA DE GARANTIAS QUE VA ENCIMA DEL PIE, POR LO MISMO.
 *
 * Vivia dentro de `TLanding.css` colgando de `.lp`, asi que las cuatro
 * promesas que sostienen la confianza --pago protegido, comisiones a la vista,
 * soporte y logistica-- solo se leian en la portada, y no donde se decide
 * comprar. Ahora sale en todas las paginas, con el pie.
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  LA FRANJA DE GARANTÍAS   ·   una sola, encima del pie de todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * Colgaba de `.lp`, así que solo existía en la portada: las cuatro promesas
 * que hacen que alguien se atreva a pagar --dinero protegido, comisiones a la
 * vista, soporte y logística-- no se leían en la ficha ni en la cesta, que es
 * donde se decide. Es el mismo camino que hizo el pie hacia `TPie.css`.
 *
 * Aquí está la única, autocontenida: declara sus propias variables y no depende
 * de que alguien haya cargado la hoja del landing. La pinta `base.php`.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * Igual que en el pie: la hoja del landing usa consultas de contenedor porque
 * su raíz declara un `container-type`. Fuera de ahí no hay contenedor que
 * consultar y esas reglas NO SE APLICAN NUNCA, sin error.
 */

.ac-garantias{
    /* ── AIRE ENCIMA, EN TODAS LAS PÁGINAS ───────────────────────────
       La franja se pegaba al contenido: el papel blanco de una ficha de la
       cuenta --o el último bloque de cualquier página-- terminaba y sin un
       píxel de separación empezaba la franja, que se leía como parte del mismo
       bloque. Va en la franja y no en cada página porque la pinta `base.php`
       debajo de TODO: así el hueco es el mismo en la ficha, en la cesta y en la
       portada. Ajustarlo es tocar esta sola propiedad. */
    margin-top: 40px;

    --acg-verde:       #2f7d3f;
    --acg-verde-claro: #eaf4ec;
    --acg-tinta:       #16241a;
    --acg-suave:       #6b7a70;
    --acg-borde:       #e6ebe6;
}

.ac-garantias .lp-garantias{
    padding: 26px 0;
    background: #fff;
    border-top: 1px solid var(--acg-borde);
}

/* La única medida de página de la franja, la MISMA que la del pie: van pegadas
   una encima de otra y con dos carriles distintos el corte se ve. Se declara
   aquí y no se hereda del landing: fuera de él, `.lp-ancho` no existe. */
.ac-garantias .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-garantias .lp-garantias-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

/* LAS DOS COLUMNAS DE SIEMPRE: el icono en la suya y TODO el texto en la otra,
   para que el titular y su línea de debajo arranquen en la misma vertical. */
.ac-garantias .lp-garantias-rejilla > div{
    display: flex;
    align-items: center;
    gap: 11px;
}

.ac-garantias .lp-garantias-rejilla span{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--acg-verde-claro);
    color: var(--acg-verde);
    font-size: 17px;
}

/* El tamaño se le dice AL ICONO, no a su caja: `iconify-icon` no hereda el
   `font-size` del padre y todos saldrían al defecto de 20px. */
.ac-garantias .lp-garantias-rejilla span iconify-icon{ font-size: 17px; }

.ac-garantias .lp-garantias-rejilla > div > div{
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

/* El color se dice aquí porque la regla global `b,strong{color:#000}` se lo
   lleva, y el color no se hereda cuando alguien lo declara por debajo. */
.ac-garantias .lp-garantias-rejilla b{ font-size: 12.5px; color: var(--acg-tinta); }
.ac-garantias .lp-garantias-rejilla small{ font-size: 11.5px; color: var(--acg-suave); }

@media (max-width: 620px){
    .ac-garantias .lp-garantias{ padding: 20px 0; }
    .ac-garantias .lp-garantias-rejilla{ gap: 14px; }
}



	.usermenu a img
	{
		position: relative;
		top: 7px;
	}

	.cart_counter{

    padding: 3px;
    border-radius: 50%;
    background-color: var(--btn_color);
    color: #fff;
    width: 14px;
    height: 14px;

    visibility: hidden;
    position: absolute;
    text-align: center;
    left: 16px;
    top: 10px;
    z-index: 1000;

	}