/* ==========================================================================
   Suculentas con Amor — cabecera a medida + drawer del menu

   Portado de la cabecera de SHA Boutique (mismo marcado, mismo comportamiento)
   cambiando el prefijo sha- por sca- y el logo. Marcado en inc/header.php.

   La barra SOLO sale donde se pone el shortcode [sca_header] (o su variante a
   todo el ancho, [sca_header_flotante]). No hay ningun enganche automatico. El
   Theme Builder de este sitio es fragil y no se toca (ver los incidentes del
   2026-09-17 y del 2026-09-20), asi que todo vive en archivos y se revierte con
   revert.sh.

   FORMA Y COLOR: el color, calcado de purplant.es. La forma ya no: desde el
   2026-10-02 la barra va de borde a borde en todas las paginas, con el contenido
   metido el 10% para cuadrar con la rejilla, borde cálido a los lados y abajo, y
   la cinta del plugin encima (su color sale de los ajustes).
   Todo sale del bloque de variables --sca-h-* de aqui debajo: cambiando esas
   lineas cambia la cabecera entera.

   Corte responsive en 980px: por debajo (movil y tablet) manda la hamburguesa y
   el drawer es pantalla completa; por encima, el menu va en linea en la barra.
   ========================================================================== */

/* La cabecera del Theme Builder se esconde SOLO cuando el shortcode esta en el
   CONTENIDO de la pagina — si no, se verian las dos. La clase la pone
   inc/header.php.

   Cuando el shortcode esta dentro de la propia plantilla de cabecera del Theme
   Builder, esta regla NO se aplica: la barra vive dentro de ese contenedor y
   esconderlo la escondaria a ella.

   El :not(.et-fb) es el cinturon del tirante: dentro del Visual Builder esta regla
   NO se aplica pase lo que pase. Esconder .et-l--header mientras se edita la
   plantilla de cabecera deja el builder en blanco — paso el 2026-09-20. El PHP ya
   evita llegar hasta aqui (sca_header_contexto_editor), esto lo remata. */
body.sca-sin-header-divi:not(.et-fb) .et-l--header {
	display: none;
}


/* Paleta y medidas, calcadas de purplant.es (medidas a 1024 y a 375, no a ojo).

   --sca-h-fondo    blanco cálido de la barra y sus paneles
   --sca-h-tinta    negro, el texto y los iconos sobre la barra
   --sca-h-acento   terracota, la cinta de aviso y las pildoras
   --sca-h-gutter   cuanto se mete el CONTENIDO de la barra desde cada borde. La
                    barra va a sangre, pero el menu, el logo y los iconos se quedan
                    al 10%, a plomo con el contenido de la pagina (decision de Jorge,
                    18/10/2026: antes iban 30px mas adentro, a 10% + --sca-h-lateral,
                    y el contenido se veia mas ancho que la cabecera). Las filas de Divi de este sitio van a width:80%;
                    max-width:100%, asi que el contenido no tiene tope en px: es
                    esa proporcion a cualquier ancho. Poniendo aqui el mismo 10% la
                    barra y la rejilla se alinean solas, sin numeros magicos que se
                    descuadren al cambiar el diseno. En movil tambien (ver el media
                    query de 980).
   --sca-h-alto     alto de la barra; el contenido son 16px menos (8 de padding arriba
                    y abajo), y de ahi sale el alto del logo */
.sca-header,
.sca-header__hueco,
.sca-menu,
.sca-menu-overlay {
	--sca-h-fondo: var(--sca-crema);
	--sca-h-tinta: var(--sca-negro);
	--sca-h-acento: var(--sca-terracota);
	--sca-h-borde: var(--sca-linea-calida);
	--sca-h-apagado: var(--sca-gris);
	--sca-h-alto: 85px;
	--sca-h-gutter: 10%;
	--sca-h-lateral: clamp(1.5rem, 3vw, 1.875rem);
}

/* Cuanto hay que bajar lo que va fijo (barra, drawer y velo). Solo deja de ser 0 con
   la barra de administracion de WordPress, que empuja el documento hacia abajo.

   Va en :root y NO en los componentes de arriba a proposito: asi hereda, y tanto
   body.admin-bar como el JS pueden redefinirlo. Si se declarara en el componente,
   ganaria siempre a lo que pusieran mas arriba. */
:root {
	--sca-h-tope: 0px;
}

/* --------------------------------------------------------------------------
   Barra
   -------------------------------------------------------------------------- */

/* Fija y no sticky: dentro del Theme Builder de Divi el sticky no agarra (el
   contenedor de la plantilla de cabecera rompe la referencia de scroll). Con
   fixed queda garantizado, a cambio de tener que reservar su hueco: de eso se
   encarga .sca-header__hueco, que va en el flujo justo detras.

   --sca-h-real la calcula el JS midiendo la barra de verdad (el alto depende
   del logo que suba Jorge). El valor de --sca-h-alto es solo la red de
   seguridad para el primer pintado y para si el JS no llegara a correr.

   Y va A SANGRE, de borde a borde, en todas las paginas. Hasta el 2026-10-02
   flotaba al 80% con las esquinas de abajo redondeadas; solo la home iba a
   sangre, y al bajar se estrechaba como las demas. Jorge pidio la forma de la
   home arriba del todo en todas partes y sin ese cambio al bajar. El 10% lo pone
   ahora el relleno de .sca-header__inner, que es donde vive tambien el color. */
.sca-header {
	position: fixed;
	top: var(--sca-h-tope);
	left: 0;
	right: 0;
	z-index: 9990;
	color: var(--sca-h-tinta);
	transition: transform 0.35s ease;
	will-change: transform;
}

/* Con la barra de administracion de WordPress, el documento baja (margin-top en <html>)
   pero la cabecera, al ser fija, se posiciona respecto al viewport: se quedaria arriba
   del todo tapando la de WP y dejando ese trozo del hueco al aire. Bajarla otro tanto
   las vuelve a alinear. Solo lo ve quien esta logueado.

   Dos comportamientos distintos segun el ancho, y de ahi venia el fallo en movil:
   - Desde 783px la barra de WP mide 32px y va FIJA: el desplazamiento es constante.
   - Por debajo mide 46px y va en position:absolute, o sea que se va con el scroll. Un
     46px fijo dejaria a la cabecera flotando en cuanto bajases, asi que ahi lo lleva el
     JS (mideTope), que va restando lo que ya se ha desplazado hasta llegar a 0.

   Estos dos valores son la red de seguridad para el primer pintado y para si el JS no
   corriera: el inline que pone el JS en el <body> gana a ambos. */
body.admin-bar {
	--sca-h-tope: 32px;
}

@media screen and (max-width: 782px) {

	body.admin-bar {
		--sca-h-tope: 46px;
	}
}

/* Sin fondo: solo reserva el sitio. La barra fija se pinta encima. */
.sca-header__hueco {
	height: var(--sca-h-real, var(--sca-h-alto));
}

/* Se va al hacer scroll hacia abajo y vuelve al subir. Lo marca el JS. */
.sca-header.is-oculto {
	transform: translateY(-100%);
}

/* Respaldo del apilado, para el rato que va entre que se pinta la pagina y el JS
   saca la barra al <body> (y por si el JS no llegara a correr).

   Divi le pone `position: relative; z-index: 2` a la columna que envuelve al modulo
   Codigo, y eso crea un contexto de apilado que encierra el z-index 9990 de la
   barra: de puertas afuera la cabecera vale 2 y se le pone encima cualquier cosa
   del contenido con mas. Subiendo el contenedor de la cabecera se arregla mientras
   la barra siga dentro. El arreglo de verdad lo hace sacaBarraAlBody() en
   assets/js/header.js, que es el que vale venga el shortcode de donde venga. */
body.sca-con-header:not(.et-fb) .et-l--header {
	position: relative;
	z-index: 9990;
}

/* Dentro del builder, en el flujo y sin flotar: una barra fija se planta encima de
   la interfaz de Divi y tapa lo que hay debajo. Solo afecta a la edicion; en el
   sitio publicado nunca se pone esta clase. */
.sca-header--editor {
	position: static;
	transform: none;
}

/* Y a todo lo ancho, como en el sitio (Jorge, 18/10/2026: en el editor se veia
   como una caja). En el sitio, header.js saca la barra al <body>; en el builder
   se queda dentro del modulo Codigo de la plantilla, en una fila que mide el 80%
   de Divi. Se abre esa fila, solo la que lleva la barra y solo en el editor (la
   clase sca-header--editor no sale nunca en el sitio publicado), y la barra lleva
   el mismo 10% de los lados que fuera. El relleno de arriba y abajo ya lo tienen
   a 0 la seccion y la fila en la plantilla. !important: el 80% de Divi lleva un
   #et-boc delante. */
.et_pb_row:has(.sca-header--editor) {
	width: 100% !important;
	max-width: none !important;
}

.sca-header--editor .sca-header__inner {
	background: var(--sca-h-fondo);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   [sca_header_flotante]

   Desde el 2026-10-02 se ve IGUAL que [sca_header]: las dos van a sangre y no
   cambian al bajar. Antes esta arrancaba a sangre y al bajar se estrechaba al
   ancho de la normal, el 80% con las esquinas redondeadas (se «acoplaba»).

   El shortcode y su clase se quedan para no romper lo que ya este puesto: lo
   lleva la cabecera de la home. De la clase solo cuelga el arreglo de la
   columna de mas abajo.
   -------------------------------------------------------------------------- */

/* Y fuera el aire de la fila que envuelve al modulo Codigo.

   Divi le pone `padding: 27px 0` a sus filas. Como el hueco de la barra vive
   dentro de una, esos 27px de abajo se colaban entre la cabecera y lo que viene
   despues — el marquee arrancaba mas abajo de lo que debia. En estas paginas la
   plantilla de cabecera solo contiene la barra, asi que ese padding no pinta
   nada. */
body.sca-con-header:not(.et-fb) .et-l--header .et_pb_row {
	padding-top: 0;
	padding-bottom: 0;
}

/* Y fuera tambien el de la SECCION, que se colaba en los archivos de categoria,
   etiqueta y marca de producto. Solo ahi Divi carga su CSS «CPT»
   (et-divi-customizer-cpt-global.min.css), que da a TODA seccion padding 54px 0
   con un selector con ID: .et-db #et-boc .et-l .et_pb_section. El 0 que la seccion
   lleva puesto en el Theme Builder sale sin ese prefijo y perdia, asi que entre la
   barra y el contenido quedaban 108px de mas (visto el 2026-09-29 en
   /product-category/mini/). Con el #et-boc delante, este le gana. */
body.sca-con-header:not(.et-fb) #et-boc .et-l--header .et_pb_section {
	padding-top: 0;
	padding-bottom: 0;
}

/* Si se usa con hueco="no" (la barra encima de un heroe a sangre), el modulo
   Codigo del Theme Builder se queda sin nada que tenga alto: la columna de Divi
   cae a su min-height de 1px (regla .et_pb_column del parent) y la seccion de la
   cabecera pinta esa franja justo encima del heroe. Se anula aqui, y solo en las
   paginas que llevan esta variante. */
body.sca-header-flotante:not(.et-fb) .et-l--header .et_pb_column {
	min-height: 0;
}
/* Aqui vive el color, no en .sca-header (ver arriba).

   El relleno de los lados es el 10% de --sca-h-gutter: el fondo llega a los
   bordes y el contenido se queda a plomo con las filas de Divi (el 80%). Hasta
   el 18/10/2026 llevaba ademas el aire de --sca-h-lateral (30px a 1440). El
   porcentaje se calcula sobre el ancho de .sca-header, que es el de la ventana:
   el mismo sobre el que sacan su 10% las filas de Divi. */
.sca-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	min-height: var(--sca-h-alto);
	padding: 8px var(--sca-h-gutter);
	background: var(--sca-h-fondo);

	/* Marco en los tres lados que se ven. Arriba no lleva: la barra va cosida a
	   la cinta de aviso, que mide lo mismo de ancho. Sale de --sca-h-borde, el
	   mismo que usan los paneles desplegables, para que todo el header lleve una
	   sola linea. Con box-sizing:border-box va POR DENTRO de los 85px, asi que no
	   mueve el alto ni lo que el JS mide en --sca-h-real. */
	border-left: 1px solid var(--sca-h-borde);
	border-right: 1px solid var(--sca-h-borde);
	border-bottom: 1px solid var(--sca-h-borde);
}

/* La barra, en blanco con borde gris y sombra, y no en el crema de arriba. Hasta el
   2026-10-26 esto era una regla de YellowPencil (global y repetida en /tienda/); se
   paso aqui tal cual para poder quitar el plugin. Lleva el id, como la tenia el
   plugin, para que gane tambien a la variante del editor (.sca-header--editor). */
#sca-header .sca-header__inner {
	background-color: var(--sca-blanco);
	border-right-color: #ededed;
	border-bottom-color: #ededed;
	border-left-color: #ededed;
	box-shadow: 0 5px 40px 5px rgba(0, 0, 0, 0.05);
}

.sca-header__izq {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

/* 12px entre iconos: con los 22px del icono y su padding sale el mismo paso de
   34px que en el original. */
.sca-header__der {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.sca-header__centro {
	display: flex;
	justify-content: center;
}

.sca-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0.35rem;
	margin: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

/* Las dos rayas y su paso a aspa.

   Cada raya esta centrada en la caja y separada con translateY; al abrir vuelven
   al centro y giran. Asi el movimiento entero es una sola transicion de transform
   (que va por compositor y no repinta), en vez de animar top o margenes.

   El cubic-bezier tiene una pizca de rebote al final: la raya llega a los 45
   grados, se pasa un poco y se asienta. Es lo que hace que no parezca un
   interruptor. */
.sca-header__burger-caja {
	position: relative;
	display: block;
	width: 26px;
	height: 26px;
}

.sca-header__burger-linea {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	margin-top: -0.75px;
	background: currentColor;
	transform-origin: 50% 50%;
	transition: transform 0.4s cubic-bezier(0.68, -0.35, 0.27, 1.35);
}

.sca-header__burger-linea:first-child {
	transform: translateY(-4.5px);
}

.sca-header__burger-linea:last-child {
	transform: translateY(4.5px);
}

.sca-header__burger[aria-expanded="true"] .sca-header__burger-linea:first-child {
	transform: translateY(0) rotate(45deg);
}

.sca-header__burger[aria-expanded="true"] .sca-header__burger-linea:last-child {
	transform: translateY(0) rotate(-45deg);
}

/* Carrito: mismo peso visual que los desplegables de al lado, pero sin flechita.
   position:relative porque el contador se coloca en absoluto respecto a el (el CSS
   del badge es el mismo que ya usaba el item del menu).

   Se estiliza por .sca-carrito y NO por .sca-header__carrito: asi el mismo boton
   vale dentro de la barra y suelto con [sca_carrito], por ejemplo en una cabecera
   propia del Theme Builder. Los colores tiran de las variables --sca-h-*, que fuera
   de .sca-header no estan definidas: por eso se repiten aqui como respaldo. */
.sca-carrito {
	--sca-h-acento: var(--sca-terracota);
	--sca-h-fondo: var(--sca-crema);

	position: relative;
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0.35rem;
	margin: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.sca-carrito .sca-cart-icon {
	width: 22px;
	height: 22px;
}

/* El contador, en terracota sobre la barra blanca. Hereda --sca-h-acento de
   fondo y --sca-h-fondo de tinta: blanco sobre terracota (6,99:1). */
.sca-carrito .sca-cart-count {
	top: -0.1rem;
	right: -0.25rem;
	height: 16px;
	min-width: 16px;
	background: var(--sca-h-acento);
	color: var(--sca-h-fondo);
	font-size: 10px;
	line-height: 16px;
}

/* Icono de cuenta, al lado del carrito. Mismo tamano y mismo aire que el, para que los
   dos ultimos iconos de la barra se lean como una pareja y no como dos piezas sueltas.
   Es un <a> y no un <button>, asi que hay que devolverle el line-height a cero y quitarle
   el subrayado que arrastra de los enlaces del tema. */
.sca-header__cuenta {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem;
	margin: 0;
	color: inherit;
	line-height: 0;
	text-decoration: none;
}

.sca-header__cuenta .sca-ico {
	width: 25px;
	height: 25px;
}

/* La cuenta de la barra es un desplegable (sca_header_cuenta_menu): su icono de usuario
   mantiene el cuerpo de 25px del enlace al que sustituye. */
.sca-drop--cuenta .sca-ico--usuario {
	width: 25px;
	height: 25px;
}

svg.sca-ico.sca-ico--telefono {
    width: 24px;
    height: 24px;
}

.sca-header__cuenta:hover,
.sca-header__cuenta:focus-visible {
	color: inherit;
	opacity: 0.65;
}

/* En el pie del menu lateral el icono va acompanado de la palabra, como el selector de
   idioma que tiene enfrente, y se empuja a la izquierda con un margen automatico. No se
   usa space-between en el pie: si algun dia no hubiera cuenta que enlazar, el idioma se
   quedaria pegado a la izquierda en vez de donde va. */
.sca-menu__pie .sca-header__cuenta--texto {
	gap: 0.6rem;
	margin-right: auto;
	padding: 0;
	font-family: "Graphik Regular", Helvetica, Arial, sans-serif;
	/* Mismo cuerpo que el "ES" de enfrente: los dos extremos del pie se leen igual. */
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* 22px, los mismos que el globo del idioma que tiene al lado. Estuvo en 18 y se quedaba
   corto: en la misma fila y contra un icono mayor, se leia como si estuviera apagado. */
.sca-menu__pie .sca-header__cuenta--texto .sca-ico {
	width: 22px;
	height: 22px;
}

/* Cada uno en su sitio y nunca los dos: el icono de la barra hasta 980px, y de ahi para
   abajo el del pie del menu, que es donde queda a mano con el pulgar. */
.sca-menu__pie .sca-header__cuenta {
	display: none;
}

@media (max-width: 980px) {

	.sca-header__der .sca-header__cuenta,
	.sca-header__der .sca-drop--cuenta {
		display: none;
	}

	.sca-menu__pie .sca-header__cuenta {
		display: inline-flex;
		align-items: center;
	}
}

/* El logo llena la barra de arriba abajo, como en el original: el alto de la barra
   menos los 8px de padding de cada lado. Ahi es donde gana tamano respecto a los
   37px de antes.

   Va SIN filtro. El PNG es un disco BLANCO OPACO con la tinta negra encima (solo
   las esquinas, fuera del circulo, son transparentes). Sobre la barra verde se leia
   como un sello; con la barra BLANCA el disco se funde. Blanquearlo con brightness(0)
   invert(1) —lo que pediria un logo de un solo tono— lo convierte en una mancha
   blanca: el relleno del disco tambien se vuelve blanco. */
.sca-logo__img {
	display: block;
	width: auto;
	max-height: calc(var(--sca-h-alto) - 16px);
}

.sca-logo--texto {
	color: inherit;
	font-size: 1.25rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Iconos
   -------------------------------------------------------------------------- */

.sca-ico {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.sca-ico--chevron {
	width: 14px;
	height: 14px;
	stroke-width: 2;
	transform: rotate(90deg); /* apunta hacia abajo; al abrir gira a hacia arriba */
	transition: transform 0.2s ease;
}

.sca-bandera {
	width: 18px;
	height: 12px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Desplegables (idioma, telefono, WhatsApp)
   -------------------------------------------------------------------------- */

.sca-drop {
	position: relative;
}

.sca-drop__boton {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	background: none;
	border: 0;
	padding: 0.35rem;
	margin: 0;
	color: inherit;
	cursor: pointer;
	font-size: 0.9rem;
	letter-spacing: 0.12em;
	line-height: 1;
}

.sca-drop__boton[aria-expanded="true"] .sca-ico--chevron {
	transform: rotate(-90deg);
}

.sca-idioma__actual {
	color: var(--sca-h-acento);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.sca-drop__panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 20;
	min-width: 190px;
	background: var(--sca-h-fondo);
	border: 1px solid var(--sca-h-borde);
	box-shadow: 0 12px 32px rgba(36, 31, 28, 0.08);
	padding: 0.9rem 1.1rem;
}

/* Los de la izquierda cuelgan alineados a su borde izquierdo, no al derecho. */
.sca-header__izq .sca-drop__panel {
	right: auto;
	left: 0;
}

/* hidden es lo que decide si se ve: el JS lo pone y lo quita, asi que si el JS
   no llega a correr el panel simplemente no aparece (nada roto en pantalla). */
.sca-drop__panel[hidden] {
	display: none;
}

.sca-contactos,
.sca-idiomas,
.sca-contactos li,
.sca-idiomas li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Divi pinta las listas con viñeta y sangrado desde una regla que gana a una sola clase
   (comprobado en el sitio: con .sca-contactos no basta, con dos clases si). De ahi este
   segundo asalto, con el contenedor delante para subir especificidad.

   Aqui NO se tocan los margenes a proposito: los pone .sca-contacto + .sca-contacto para
   separar un mercado del siguiente, y esta regla, al ser mas especifica, se los comeria. */
.sca-drop .sca-drop__panel ul,
.sca-drop .sca-drop__panel li {
	list-style: none;
	padding-left: 0;
	text-indent: 0;
}

.sca-drop .sca-drop__panel ul {
	padding-bottom: 5px;
}

/* El bocadillo de la cuenta va sencillo: fondo blanco y borde gris, no los tonos calidos
   (crema + linea calida) que comparten los demas desplegables de la barra. */
.sca-drop--cuenta .sca-drop__panel {
	background: var(--sca-blanco);
	border-color: var(--sca-linea);
}

/* El panel del icono de cuenta (sca_header_cuenta_menu): el nombre como titulo, los enlaces
   de las pestanas y «Cerrar sesion» separado por una linea. */
.sca-cuenta-menu__titulo {
	display: block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--sca-h-apagado);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.45rem;
}

.sca-cuenta-menu__enlace {
	display: block;
	padding: 0.3rem 0;
	color: var(--sca-h-tinta);
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.sca-cuenta-menu__enlace:hover,
.sca-cuenta-menu__enlace:focus-visible {
	color: var(--sca-h-acento);
}

.sca-drop .sca-drop__panel .sca-cuenta-menu__salir {
	margin-top: 0.45rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--sca-h-borde);
}

.sca-contacto + .sca-contacto {
	margin-top: 0.85rem;
}

.sca-contacto__pais {
	display: block;
	color: var(--sca-h-apagado);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.2rem;
}

.sca-contacto__enlace {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sca-h-tinta);
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

/* Segunda y siguientes lineas del mismo mercado: van mas juntas entre si que la
   separacion que hay de un mercado al siguiente. */
.sca-contacto__enlace + .sca-contacto__enlace {
	margin-top: 0.4rem;
}

.sca-contacto__enlace:hover {
	color: var(--sca-h-acento);
}

.sca-contacto--whatsapp .sca-ico--whatsapp {
	width: 18px;
	height: 18px;
	color: #25d366;
}

.sca-idiomas a {
	display: block;
	padding: 0.3rem 0;
	color: var(--sca-h-tinta);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

.sca-idiomas a[aria-current="true"] {
	color: var(--sca-h-acento);
}

/* --------------------------------------------------------------------------
   Menu en linea de la barra — SOLO ESCRITORIO

   El menu va partido en dos a los lados del logo: .sca-nav--izq dentro de
   .sca-header__izq y .sca-nav--der dentro de .sca-header__der, justo antes del
   carrito y la cuenta. Cada parte sale de su propia ubicacion de menu
   (Apariencia > Menus), asi se decide alli que va a cada lado.

   Por debajo de 981px esto desaparece y manda la hamburguesa con el drawer:
   los dos cortes estan al final del archivo, en los media queries.
   -------------------------------------------------------------------------- */

/* El reset de lista va con .sca-header delante A PROPOSITO, para subir la
   especificidad a dos clases.

   Motivo: la barra se pinta con el shortcode DENTRO del builder, y Divi mete ahi
   sus estilos de lista — «#left-area ul, .entry-content ul, .et-l--body ul,
   .et-l--footer ul, .et-l--header ul { list-style-type: disc; padding: 0 0 23px 1em }».
   Eso es una clase mas un elemento (0,1,1) y le ganaba a .sca-nav__lista a secas
   (0,1,0): los enlaces salian con punto, sangrados y con 23px de mas abajo.
   Mientras la cabecera se pintaba fuera del builder esas reglas no la alcanzaban. */
.sca-header .sca-nav__lista,
.sca-header .sca-nav__lista .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sca-nav__lista {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
}

/* El de la derecha se pega al carrito, que es su vecino en la barra. Un respiro
   extra para que los enlaces no se confundan con los iconos. */
.sca-nav--der .sca-nav__lista {
	justify-content: flex-end;
}

.sca-nav--der {
	margin-right: 0.75rem;
}

/* Misma historia con los <li>: Divi les pone padding inferior dentro del builder. */
.sca-header .sca-nav__lista li {
	position: relative; /* referencia del desplegable */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Como en el original: caja alta, 15px y peso medio, sin mayusculas. Nada de
   versalitas — ahi se le va el aire que tiene la barra. */
.sca-nav__lista a {
	/* flex y no block para poder poner un icono al lado del texto (ver
	   inc/menu-iconos.php). Sin icono se ve exactamente igual que antes. */
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0;
	color: var(--sca-h-tinta);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.sca-nav__lista a:hover,
.sca-nav__lista a:focus-visible,
.sca-nav__lista .current-menu-item > a,
.sca-nav__lista .current-menu-ancestor > a {
	color: var(--sca-h-acento);
}

/* Subrayado que nace del centro al pasar por encima, y fijo en el enlace activo.
   Calcado de mimercadito.cl: 1px y se queda en el 50% del ancho, sin abarcarlo
   entero.

   Va en ::before porque el ::after de los items con hijos ya lo ocupa la
   flechita del desplegable, aqui debajo. Y NO hace falta position:relative en
   el <a>: se posiciona contra el <li>, que ya la lleva para el desplegable y
   ocupa exactamente la misma caja — ponersela al <a> le cambiaria el contexto
   a la flechita.

   Se anima scaleX y no el width: el transform lo resuelve el compositor y no
   repinta en cada fotograma. Solo el primer nivel; en el desplegable estorba. */
.sca-nav__lista > li > a::before {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.sca-nav__lista > li > a:hover::before,
.sca-nav__lista > li > a:focus-visible::before,
.sca-nav__lista > li.current-menu-item > a::before,
.sca-nav__lista > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

/* ---- Segundo nivel: desplegable ----

   Sin JS: se abre al pasar el raton y tambien con :focus-within, que es lo que
   lo hace accesible con el tabulador. Se mueve la visibilidad y no el display
   para poder atenuarlo con una transicion. */

.sca-nav__lista .menu-item-has-children > a {
	padding-right: 1rem;
}

.sca-nav__lista .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

.sca-nav__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 1;
	min-width: 200px;
	padding: 0.5rem 0;
	background: var(--sca-h-fondo);
	border: 1px solid var(--sca-h-borde);
	box-shadow: 0 12px 32px rgba(36, 31, 28, 0.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* El de la derecha se abre hacia dentro: pegado al borde de la ventana se
   saldria de pantalla. */
.sca-nav--der .sca-nav__lista > li > .sub-menu {
	left: auto;
	right: -1rem;
}

.sca-nav__lista li:hover > .sub-menu,
.sca-nav__lista li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.sca-nav__lista .sub-menu a {
	padding: 0.5rem 1rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Drawer del menu
   Namespace propio (sca-menu-*) para no pisar al del carrito (sca-cart-*), que
   puede convivir con este: se abre desde un item de ESTE menu.
   -------------------------------------------------------------------------- */

/* Arranca justo debajo de la barra, no en lo alto de la pantalla: la cabecera
   se queda visible y por encima del velo. */
.sca-menu-overlay {
	position: fixed;
	inset: calc( var(--sca-h-real, var(--sca-h-alto)) + var(--sca-h-tope) ) 0 0 0;
	z-index: 9985;
	background: rgba(36, 31, 28, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, top 0.35s ease;
}

.sca-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.sca-menu {
	position: fixed;
	top: calc( var(--sca-h-real, var(--sca-h-alto)) + var(--sca-h-tope) );
	left: 0;
	z-index: 9986; /* por encima del velo, por debajo de la barra */
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	height: calc(100% - var(--sca-h-real, var(--sca-h-alto)) - var(--sca-h-tope));
	height: calc(100dvh - var(--sca-h-real, var(--sca-h-alto)) - var(--sca-h-tope)); /* en movil, para que el pie no quede bajo la barra del navegador */
	background: var(--sca-h-fondo);
	color: var(--sca-h-tinta);
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.35s ease, visibility 0.35s ease, top 0.35s ease, height 0.35s ease;
	overflow: hidden;
}

.sca-menu.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* Con el menu abierto la pagina sigue haciendo scroll: nada de overflow:hidden en
   el body. Y al bajar, el panel se retrae con la barra — se va por la izquierda por
   donde entro, con el velo — y vuelve a entrar cuando la barra vuelve. El JS marca
   sca-barra-oculta en el body.

   Se retrae sin perder el estado de abierto: is-open sigue puesto, asi que al subir
   reaparece donde estaba, con el submenu que hubiera desplegado. */
body.sca-barra-oculta .sca-menu.is-open {
	transform: translateX(-100%);
	visibility: hidden;
}

body.sca-barra-oculta .sca-menu-overlay.is-open {
	opacity: 0;
	visibility: hidden;
}

/* El drawer ya no lleva barra propia: la de arriba se queda visible y hace ese
   papel (las dos rayas pasan a aspa, y el logo y el telefono siguen ahi). Es lo
   mismo que se ve en el diseno de movil, con una sola barra en vez de dos. */

/* --------------------------------------------------------------------------
   Lista del menu
   El marcado lo genera wp_nav_menu, asi que aqui se estilan sus clases.
   -------------------------------------------------------------------------- */

/* overflow-x hay que declararlo, no basta con dejarlo en visible: en cuanto un eje es
   auto, el otro deja de poder ser visible y el navegador lo pasa tambien a auto. Como el
   panel del submenu espera fuera, a la derecha, salia barra de desplazamiento horizontal.
   Con hidden se recorta lo que asoma y el scroll vertical sigue funcionando. */
.sca-menu__nav {
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	padding: 1.75rem 0;
}

.sca-menu__lista,
.sca-menu__lista .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sca-menu__lista li {
	margin: 0;
}

.sca-menu__lista a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem var(--sca-h-lateral);
	color: var(--sca-h-acento);
	font-size: 0.95rem;
	line-height: 1.35;
	text-decoration: none;
}

.sca-menu__lista a:hover {
	color: var(--sca-h-tinta);
}

/* Flecha de los que tienen submenu. Va en el li y no en el enlace para poder
   pulsarla sin navegar: el JS la usa como disparador del subpanel. */
.sca-menu__lista .menu-item-has-children > a {
	position: relative;
	padding-right: calc(var(--sca-h-lateral) + 1.5rem);
}

.sca-menu__lista .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--sca-h-lateral);
	width: 9px;
	height: 9px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

/* El segundo nivel entra deslizandose por encima del primero. */
.sca-menu__lista .sub-menu {
	position: absolute;
	inset: 0;
	background: var(--sca-h-fondo);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.3s ease, visibility 0.3s ease;
	overflow-y: auto;
}

.sca-menu__lista .menu-item-has-children.is-open > .sub-menu {
	transform: translateX(0);
	visibility: visible;
}

/* Fila de vuelta, la inyecta el JS al abrir el subpanel. */
.sca-menu__volver {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sca-h-borde);
	padding: 0.85rem var(--sca-h-lateral);
	margin: 0 0 0.5rem;
	color: var(--sca-h-tinta);
	cursor: pointer;
	font-size: 0.95rem;
	text-align: left;
}

.sca-menu__volver .sca-ico {
	width: 16px;
	height: 16px;
	transform: rotate(180deg);
}

.sca-menu__aviso {
	padding: 0 var(--sca-h-lateral);
	color: var(--sca-h-apagado);
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Mega menu (inc/menu-megamenu.php)

   Se enciende con la clase «sca-megamenu» en un item del menu. Dos filas: las
   categorias de la tira de /tienda/, con su imagen, y las familias (etiquetas)
   en columnas. En la barra de escritorio es un panel que cuelga bajo la
   cabecera, de su mismo ancho, y se abre al pulsar (assets/js/header.js); en el
   menu lateral es un subnivel mas, con su «Volver».
   -------------------------------------------------------------------------- */

/* ---- Barra de escritorio ----

   El panel se coloca contra .sca-header (la barra fija) y no contra el <li>: asi
   ocupa todo el ancho de la cabecera. Para eso el <li> deja de ser la referencia,
   y el subrayado animado del enlace, que se colocaba contra el <li>, pasa a
   hacerlo contra el propio enlace. */
.sca-header .sca-nav__lista li.sca-mega {
	position: static;
}

.sca-nav__lista .sca-mega__boton {
	position: relative;
}

/* Abierto: se queda marcado como un enlace activo y la flecha mira hacia arriba. */
.sca-nav__lista .sca-mega__boton[aria-expanded="true"] {
	color: var(--sca-h-acento);
}

.sca-nav__lista > li > .sca-mega__boton[aria-expanded="true"]::before {
	transform: scaleX(1);
}

.sca-nav__lista .sca-mega__boton[aria-expanded="true"] .sca-ico--chevron {
	transform: rotate(-90deg);
}

/* Entrada y salida.

   Un fundido: el panel aparece y desaparece sin desplegarse ni moverse. Al cerrar
   va algo mas rapido que al abrir.

   El clip-path es fijo, no se anima: corta la sombra a ras del borde de arriba
   para que no manche la barra, y sus insets negativos la dejan salir por los
   lados y por abajo.

   hidden lo sigue poniendo y quitando el JS, con el mismo contrato que los
   desplegables. Lo que cambia es que aqui no apaga el panel de golpe con
   display:none, que no se puede animar: lo deja en visibility:hidden al acabar la
   transicion, y eso tambien lo saca del tabulador y de los lectores de pantalla.

   Cada estado lleva su transicion, porque manda la del estado al que se va:
   abriendo, visibility cambia en el acto; cerrando, espera a que se haya fundido. */
.sca-mega__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	max-height: calc(100vh - var(--sca-h-real, var(--sca-h-alto)) - var(--sca-h-tope) - 1.5rem);
	overflow-y: auto;
	/* Blanco y no --sca-h-fondo (crema): la barra de arriba es blanca porque asi la
	   pinta #sca-header .sca-header__inner (antes de YellowPencil), y el panel
	   tiene que leerse como la misma pieza. */
	background: var(--sca-blanco);
	border: 1px solid var(--sca-h-borde);
	border-top: 0;
	box-shadow: 0 24px 40px rgba(36, 31, 28, 0.08);
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 -60px -80px -60px);
	transition:
		opacity 0.3s ease,
		visibility 0s linear 0s;
}

.sca-mega__panel[hidden] {
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.25s ease,
		visibility 0s linear 0.25s;
}

/* El panel va a sangre, como la barra, y su contenido entra lo mismo que el de
   ella: barra y panel se leen como una sola pieza, con la linea de la barra
   haciendo de separacion, y las fotos arrancan a plomo con el menu. */
.sca-mega__dentro {
	padding: 1.5rem var(--sca-h-gutter) 1.75rem;
}

/* ---- Contenido, igual en los dos sitios ----

   Todo lleva .sca-mega delante: dentro de la barra y del menu lateral mandan las
   reglas de sus listas y enlaces (.sca-nav__lista a, .sca-menu__lista a: flex,
   relleno, negrita, terracota...), y con una clase sola no se les gana. */
.sca-mega .sca-mega__cats,
.sca-mega .sca-mega__familias,
.sca-mega .sca-mega__cats li,
.sca-mega .sca-mega__familias li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sca-mega .sca-mega__titulo {
	margin: 0 0 0.75rem;
	padding: 0;
	color: var(--sca-h-apagado);
	font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Una columna igual por categoria, sin fijar cuantas: como la tira de la tienda. */
.sca-mega .sca-mega__cats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 1.75rem;
}

.sca-mega .sca-mega__cat,
.sca-mega .sca-mega__familia {
	display: block;
	padding: 0;
	color: var(--sca-h-tinta);
	font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
	letter-spacing: normal;
	text-decoration: none;
	white-space: normal;
}

/* Mas apaisada que en la tira: en un menu importa que el panel no crezca de alto. */
.sca-mega .sca-mega__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sca-linea);
}

.sca-mega .sca-mega__img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.sca-mega .sca-mega__cat:hover .sca-mega__img img {
	transform: scale(1.06);
}

.sca-mega .sca-mega__nombre {
	display: block;
	padding-top: 0.6rem;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}

/* En columnas de periodico y no en rejilla: la lista va por orden alfabetico y
   asi se lee bajando, como un indice (Aeonium, Agave, Aloe... en la primera). */
.sca-mega .sca-mega__familias {
	columns: 5;
	column-gap: 1.5rem;
}

.sca-mega .sca-mega__familias li {
	break-inside: avoid;
}

.sca-mega .sca-mega__familia {
	padding: 0.3rem 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}

.sca-mega .sca-mega__cat:hover .sca-mega__nombre,
.sca-mega .sca-mega__cat[aria-current="page"] .sca-mega__nombre,
.sca-mega .sca-mega__familia:hover,
.sca-mega .sca-mega__familia[aria-current="page"] {
	color: var(--sca-h-acento);
}

.sca-mega .sca-mega__cat:focus-visible,
.sca-mega .sca-mega__familia:focus-visible {
	outline: 2px solid var(--sca-h-acento);
	outline-offset: 2px;
}

/* ---- Menu lateral (movil y tablet) ---- */
.sca-menu__lista .sca-mega__bloque {
	padding: 0.5rem var(--sca-h-lateral) 1.5rem;
}

/* De 3 en 3 y la ultima fila centrada, como la tira de la tienda en movil. */
.sca-menu__lista .sca-mega .sca-mega__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sca-menu__lista .sca-mega .sca-mega__cats li {
	flex: 0 0 calc((100% - 24px) / 3);
}

.sca-menu__lista .sca-mega .sca-mega__img {
	aspect-ratio: 1 / 1;
}

.sca-menu__lista .sca-mega .sca-mega__nombre {
	font-size: 14px;
}

.sca-menu__lista .sca-mega .sca-mega__familias {
	columns: 2;
}

@media (prefers-reduced-motion: reduce) {

	/* Sin fundido: aparece y desaparece en el acto. */
	.sca-mega__panel,
	.sca-mega__panel[hidden] {
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}

	.sca-mega .sca-mega__img img {
		transition: none;
	}

	.sca-mega .sca-mega__cat:hover .sca-mega__img img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Pie del drawer: idioma
   -------------------------------------------------------------------------- */

.sca-menu__pie {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid var(--sca-h-borde);
	padding: 1.1rem var(--sca-h-lateral);
}

/* Aqui el panel sube en vez de bajar: abajo no hay sitio. */
.sca-menu__pie .sca-drop__panel {
	top: auto;
	bottom: calc(100% + 0.75rem);
}

.sca-menu__pie .sca-drop__boton {
	gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   Movil y tablet: el drawer ocupa todo el ancho, y en la barra se quedan solo
   hamburguesa, logo y telefono — el idioma baja al pie del drawer y el WhatsApp
   se mete dentro del panel del telefono, que es como esta en el diseno.
   -------------------------------------------------------------------------- */

/* En escritorio el WhatsApp tiene su propio icono, asi que dentro del panel del
   telefono solo quedan los numeros para llamar. Y el idioma ya esta en la barra,
   asi que el pie del drawer sobra: se quita entero. */
@media (min-width: 981px) {

	/* El menu vive en la barra: ni hamburguesa ni drawer. Se esconde el boton en
	   vez de no pintarlo para no bifurcar el PHP por ancho de pantalla — y sin
	   boton el drawer no tiene por donde abrirse. */
	.sca-header__burger {
		display: none;
	}

	.sca-header__der .sca-drop--tel .sca-contacto--whatsapp {
		display: none;
	}

	.sca-menu__pie {
		display: none;
	}

	/* Items del menu marcados como «solo movil» en Apariencia > Menus. */
	.sca-solo-movil {
		display: none;
	}
}

@media (max-width: 980px) {

	/* Barra mas baja, como en el original a 375: 65px de alto y el logo de 69 a 49.
	   El 10% de los lados NO cambia: el contenido de la barra sigue cuadrando con
	   la rejilla, que en movil tambien va al 80%. Son ~38px a 375px, mas de los
	   15px del original, pero manda la alineacion con la rejilla. */
	.sca-header,
	.sca-header__hueco,
	.sca-menu,
	.sca-menu-overlay {
		--sca-h-alto: 65px;
	}

	/* Al reves que arriba: el menu en linea no cabe, asi que se va entero y todo
	   pasa por la hamburguesa. */
	.sca-nav {
		display: none;
	}

	.sca-menu {
		width: 100%;
	}

	.sca-header__izq .sca-drop--idioma,
	.sca-header__der .sca-drop--wa {
		display: none;
	}

	/* Items del menu marcados como «solo escritorio». */
	.sca-solo-escritorio {
		display: none;
	}
}

@media (max-width: 480px) {

	.sca-drop__panel {
		min-width: 170px;
	}
}

/* Quien pide menos movimiento se queda sin deslizamientos. */
@media (prefers-reduced-motion: reduce) {

	.sca-header,
	.sca-menu,
	.sca-menu-overlay,
	.sca-menu__lista .sub-menu,
	.sca-header__burger-linea,
	.sca-nav__lista > li > a::before {
		transition-duration: 0.01ms;
	}
}


/* ==========================================================================
   Cinta de aviso — #sca-bn-bar

   NO es de este tema: la pinta un plugin y le mete el color, el ancho y el
   display como estilos INLINE en el propio elemento. De ahi los !important de
   aqui: es la unica forma de igualarla sin tocar el plugin.

   EL COLOR NO SE TOCA. Lo elige Jorge en los ajustes del plugin y llega inline
   (p.ej. background:#2e7d32). Pisarlo desde aqui hacia que cambiarlo en los
   ajustes no sirviera de nada, asi que ni background ni color se declaran.

   Dos alcances distintos, a proposito:

   - La TIPOGRAFIA y el alto van SIN acotar, en todo el sitio. Antes colgaban de
     body.sca-con-header y el checkout no lleva esa clase: alli la cinta salia a
     15px, con interlineado 21px, sin mayusculas y con otro relleno. Eso es lo
     que tiene que verse igual en todas las paginas.

   - El ANCHO si va acotado a body.sca-con-header, porque solo tiene sentido
     donde esta la cabecera: va a sangre, como la barra que lleva debajo, y asi
     las dos se leen como una pieza. Donde no hay barra manda el plugin.

   El JS la tiene en cuenta: mide su borde inferior y coloca la cabecera justo
   debajo (--sca-h-tope en assets/js/header.js).
   ========================================================================== */

/* ---- Igual en TODO el sitio: letra y alto ---- */
#sca-bn-bar {
	font-size: 10px !important;
	line-height: 24px !important;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* El plugin le pone un max-width y un relleno pensados para su caja original. */
#sca-bn-bar .sca-bn-inner {
	max-width: none;
	padding: 0 44px;
}

#sca-bn-bar .sca-bn-close {
	font-size: 18px;
	opacity: 0.6;
}

/* Al estrechar, los 44px de cada lado dejaban el texto justo al limite y el aviso
   se partia en dos lineas (la cinta pasaba de 24 a 48px de alto). Se recorta el
   aire lateral: el aspa vive a 12px del borde, asi que con 30px no se tocan. */
@media (max-width: 980px) {

	#sca-bn-bar .sca-bn-inner {
		padding: 0 30px;
	}
}


/* ---- Solo donde esta la cabecera: el ancho ----

   A sangre, como la barra. Hasta el 2026-10-02 iba con el 10% a cada lado,
   igual que ella, salvo en la home. */
body.sca-con-header #sca-bn-bar {
	margin: 0 !important;
	width: auto !important;
}

/* ==========================================================================
   Iconos de los items del menu — inc/menu-iconos.php

   Se activan poniendole al item la clase sca-ico-<nombre> en Apariencia > Menus.
   Salen tanto en la barra como en el drawer, porque los dos pintan el mismo menu.

   El tamano va en em y no en px para que el icono crezca y encoja con el texto de
   cada sitio: en la barra son 15px y en el drawer 0.95rem. flex:0 0 auto para que
   no se encoja si el texto es largo. */
.sca-menu-ico {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}