/**
 * Theme Name:   Astra Child - RizosYLisosByGigi
 * Theme URI:    https://rizosylisosbygigi.com
 * Description:  Tema hijo de Astra para la tienda RizosYLisosByGigi. Toda personalizacion
 *               de CSS, plantillas y funciones vive aqui, para que las actualizaciones
 *               del tema padre no borren el trabajo.
 * Author:       Juan Camilo Suarez
 * Template:     astra
 * Version:      1.0.0
 * License:      GNU General Public License v2 or later
 * License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:  astra-child
 */

/* =============================================================
   CSS personalizado del sitio.

   Este archivo se carga DESPUES del CSS de Astra (ver functions.php),
   asi que basta con igualar la especificidad del selector original
   para sobrescribirlo. No hace falta !important salvo casos extremos.

   Organiza por secciones a medida que crezca.
   ============================================================= */

/* --- Global --- */

/* --- Cabecera --- */

/* --- Tienda / WooCommerce --- */

/* --- Producto --- */

/* --- Carrito y checkout --- */

/*
 * En movil el checkout salia cortado por la izquierda: "esumen del pedido",
 * "irección", campos sin borde izquierdo.
 *
 * Los bloques de carrito y checkout traen la clase `alignwide`. Por debajo
 * de 1200px Astra le da a esa clase -20px de margen a cada lado, para que
 * el bloque se estire hasta el borde. Pero WooCommerce fija el bloque en
 * `width: 100%`, asi que no se estira: solo se corre 20px a la izquierda.
 * Luego `.entry-content { overflow-x: clip }` (mas abajo, para la portada)
 * recorta justo esos 20px.
 *
 * Se anula el margen y el bloque queda alineado con el titulo de la pagina.
 * El `body` sube la especificidad por encima del selector de Astra.
 */
@media (max-width: 1200px) {
	body .entry-content[data-ast-blocks-layout] > .wp-block-woocommerce-checkout.alignwide,
	body .entry-content[data-ast-blocks-layout] > .wp-block-woocommerce-cart.alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}

/* --- Pie de pagina --- */

/* --- Botones flotantes --- */

/*
 * Dos plugins reclaman la esquina inferior derecha y se solapaban:
 * el carrito de Modern Cart (abajo 20px) y el boton de WhatsApp
 * (abajo 30px). WhatsApp gana por z-index y el carrito asomaba detras.
 *
 * WhatsApp mide 56px y arranca a 30px del borde, asi que ocupa hasta los
 * 86px. El carrito se sube por encima, dejando 14px de aire entre ambos.
 */
#moderncart-floating-cart {
	bottom: 100px;
}

@media (max-width: 921px) {
	/* En movil los botones son algo mas pequenos y el pulgar tapa mas. */
	#moderncart-floating-cart {
		bottom: 92px;
	}
}

/* --- Filtro de precio en resultados de busqueda --- */

/*
 * Aqui hubo una regla que ocultaba el filtro de precio en las busquedas
 * (`body.search .wp-block-woocommerce-price-filter { display: none }`).
 * Se puso cuando el bloque salia vacio en ese contexto.
 *
 * Ya no hace falta: al arreglar la barra lateral y el contexto de busqueda
 * el bloque se monta bien —el body recibe `post-type-archive-product` y la
 * API devuelve su rango—, asi que la regla solo tapaba un control que
 * funciona. Se retira. En movil se sigue ocultando mas abajo, eso si es a
 * peticion del cliente por espacio.
 */

/* --- Tienda en movil: productos visibles sin hacer scroll --- */

/*
 * Astra invierte el orden en movil con `flex-direction: column-reverse`,
 * dejando el buscador y las categorias al final de la pagina. Se vuelve al
 * orden natural del HTML — la barra ya va primero — y se compacta todo lo
 * que la separa de los productos.
 *
 * Medido antes: el primer producto arrancaba en 1187px con un viewport de
 * 956px, o sea 231px por debajo del pliegue.
 */
@media (max-width: 921px) {

	.ast-left-sidebar #content > .ast-container {
		flex-direction: column;
	}

	/* El buscador pegado al menu: eran 65px de aire. */
	#secondary {
		margin-top: 10px;
		margin-bottom: 12px;
	}

	/* Cada widget dejaba 46px debajo. */
	#secondary .ast-woo-sidebar-widget {
		margin-bottom: 14px;
	}

	/*
	 * La etiqueta "BUSCAR" sobra: el campo ya dice "Buscar productos..."
	 * en su marcador de posicion.
	 *
	 * Se oculta a la vista pero NO para lectores de pantalla: con
	 * `display: none` el campo quedaria sin nombre accesible. Este es el
	 * patron que usa el propio WordPress para su clase screen-reader-text.
	 */
	#secondary .wp-block-search__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	/*
	 * El filtro de precio se oculta en movil: ocupa 131px y en pantalla
	 * chica el deslizador es incomodo de usar con el pulgar. Los productos
	 * pesan mas que el filtro.
	 */
	#secondary .ast-woo-sidebar-widget:has( .wp-block-woocommerce-price-filter ),
	#secondary .wp-block-woocommerce-price-filter {
		display: none;
	}

	/*
	 * Categorias en fila horizontal deslizable en vez de lista vertical:
	 * 15 categorias pasan de 190px de alto a una sola linea.
	 */
	/*
	 * Sin esto la fila no se desplaza por dentro: empuja la pagina entera
	 * y aparece scroll horizontal en todo el sitio.
	 *
	 * Un elemento flexible no se encoge por debajo del ancho de su
	 * contenido salvo que se declare `min-width: 0`. Con 15 categorias en
	 * una fila, el contenedor crecia a 1614px y arrastraba el <body>.
	 */
	#secondary,
	#secondary .sidebar-main,
	#secondary .ast-filter-wrap,
	#secondary .ast-woo-sidebar-widget,
	#secondary .wp-widget-group__inner-blocks,
	#secondary .wp-block-woocommerce-product-categories,
	.gs_logo_area,
	.woocommerce-products-header,
	.woocommerce-products-header .page-description {
		min-width: 0;
		max-width: 100%;
	}

	#secondary .wc-block-product-categories-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.55em;
		overflow-x: auto;
		overflow-y: hidden;
		margin: 0;
		padding: 0 0 0.4em;
		list-style: none;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		min-width: 0;
		max-width: 100%;

		/*
		 * Sin esto, el contenido desbordado de la fila cuenta para el
		 * ancho del documento: la pagina entera medía 1614px en un
		 * viewport de 440 y se corria a los lados dejando franja blanca.
		 *
		 * `overflow-x: auto` no bastaba, ni `min-width: 0` en toda la
		 * cadena de ancestros. `contain: content` aisla el trazado y el
		 * pintado del elemento, y ahi si deja de arrastrar al <body>.
		 */
		contain: content;
	}

	#secondary .wc-block-product-categories-list li {
		flex: 0 0 auto;
		margin: 0;
		white-space: nowrap;
	}

	/*
	 * La pildora envuelve el <li> completo, no el enlace: el contador
	 * "(20)" es un <span> hermano y quedaba fuera del borde.
	 */
	#secondary .wc-block-product-categories-list li {
		display: flex;
		align-items: baseline;
		gap: 0.25em;
		padding: 0.3em 0.8em;
		border: 1px solid var( --ast-border-color, #e6d2d3 );
		border-radius: 999px;
		font-size: 0.86em;
		line-height: 1.4;
	}

	#secondary .wc-block-product-categories-list li a {
		text-decoration: none;
	}

	#secondary .wc-block-product-categories-list-item-count {
		opacity: 0.65;
	}

	/* El titulo "CATEGORIAS" ocupaba una linea entera. */
	#secondary .ast-woo-sidebar-widget .widget-title {
		font-size: 0.95em;
		margin-bottom: 0.4em;
	}

	/*
	 * Los logos de marca, en una sola fila deslizable.
	 *
	 * La fila real es `.gs_logo_area--inner`, no el contenedor externo: el
	 * plugin la maqueta como grilla y ocupaba 313px de alto con imagenes
	 * de solo 55px. Ademas deja un <p> vacio que sumaba 285px.
	 */
	/*
	 * El area quedaba encogida a 177px dentro de un viewport de 315: el
	 * plugin la centra con un ancho propio. Se fuerza a ocupar todo el
	 * ancho disponible, si no los logos quedan fuera de vista.
	 */
	.gs_logo_area {
		width: 100%;
		max-width: 100%;
		contain: content;
		margin-left: 0;
		margin-right: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/* Las flechas del carrusel sobran cuando ya se desliza con el dedo. */
	.gs_logo_area .gs_logo_nav,
	.gs_logo_area .swiper-button-next,
	.gs_logo_area .swiper-button-prev {
		display: none;
	}

	/*
	 * El contenedor del encabezado de la tienda quedaba en 177px dentro de
	 * un area de 297px, encogiendo la franja de logos.
	 */
	.woocommerce-products-header,
	.woocommerce-products-header .page-description {
		width: 100% !important;
		max-width: 100% !important;
	}

	/*
	 * Cada logo vive en un envoltorio de 576px con la imagen de 110px
	 * centrada: el plugin calcula ese ancho para su carrusel de
	 * escritorio. En movil dejaba la primera imagen en x=312, fuera de la
	 * ventana visible — la franja se veia vacia. Se ajusta al contenido.
	 */
	/*
	 * !important es necesario, pero NO por JavaScript en linea —eso se
	 * comprobo y no existe—: la hoja del propio plugin trae
	 * `.gs_logo_single--wrapper { width: 100% !important }`. A un
	 * !important solo se le gana con otro.
	 */
	.gs_logo_area .gs_logo_single--wrapper {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.gs_logo_container_grid {
		justify-content: flex-start;
	}

	.gs_logo_area--inner {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.9em;
		align-items: center;
	}

	.gs_logo_area--inner > * {
		flex: 0 0 auto;
		margin: 0;
	}

	/*
	 * El apilado real ocurre aqui: el plugin maqueta los logos como
	 * grilla de varias filas (256px de alto para imagenes de 55px).
	 * Se convierte en una sola fila.
	 */
	.gs_logo_container,
	.gs_logo_container_grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.9em;
		height: auto;
	}

	.gs_logo_container > *,
	.gs_logo_container_grid > * {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	.gs_logo_area p:empty {
		display: none;
	}

	.gs_logo_area img {
		max-height: 46px;
		width: auto;
	}

	/* Menos aire alrededor del contenido de la tienda. */
	#primary {
		padding-top: 0;
	}

	/*
	 * El CSS del Personalizador fija `padding: 20px 60px !important` en el
	 * contenedor de la tienda. En escritorio esta bien; en un telefono de
	 * 315px son 120px — el 38% del ancho — y estrangula productos, logos
	 * y categorias por igual.
	 *
	 * El CSS del Personalizador se imprime DESPUES del tema hijo y tambien
	 * usa !important, asi que con la misma especificidad ganaba el. Se sube
	 * la especificidad (body.woocommerce = 0,0,2,1 contra 0,0,1,0), que
	 * vence al orden de aparicion.
	 */
	body.woocommerce .ast-woocommerce-container,
	body.woocommerce-page .ast-woocommerce-container {
		padding-left: 14px !important;
		padding-right: 14px !important;
		padding-top: 10px !important;
	}

	/*
	 * El relleno superior de 65.7 px NO esta en ese contenedor sino en
	 * `.content-area`, que es otro elemento. En la Tienda quedaba
	 * compensado por otra regla y no se noto; al entrar en una categoria
	 * aparecia un hueco de 88 px entre los filtros y la franja de marcas.
	 *
	 * `ast-woo-shop-archive` cubre la tienda y los archivos de categoria y
	 * marca por igual, que es justo donde hace falta.
	 */
	body.ast-woo-shop-archive .content-area {
		padding-top: 12px !important;
	}

	.woocommerce-products-header,
	.woocommerce-result-count {
		margin-bottom: 0.5em;
	}
}

/* --- Encuadre del hero en movil --- */

/*
 * La imagen del hero (Banner_Hero_Sect.jpg, 2336x1191) es casi 2:1 y la
 * modelo esta en el tercio derecho: su cara cae en el 71,5% horizontal.
 * Todo el lado izquierdo es fondo liso, pensado para el texto.
 *
 * Spectra la sirve con `background-position: 50% 50%`. En un movil de
 * 440px con el hero a 594px de alto (medido en produccion), `cover` escala
 * la imagen a 1165px de ancho y solo se ve el 37,8%. La cara queda fuera
 * o pegada al borde, y solo se aprecia cabello.
 *
 * Anclando en 68% la cara cae al 80% del encuadre: visible a la derecha,
 * con el lado izquierdo libre para el titulo, igual que en escritorio.
 *
 * Con x=0.68 el rango visible es 42%-80% de la imagen y la cara (71,5%)
 * queda al 77% del encuadre.
 *
 * La posicion vertical no influye: con esta relacion de aspecto la altura
 * de la imagen coincide con la del contenedor y no hay recorte vertical.
 */
@media (max-width: 921px) {

	/*
	 * Spectra ya trae un anclaje movil propio de `57% 70%` bajo 767px —
	 * alguien intento encuadrarlo antes. Con el alto real del hero (594px)
	 * ese 57% deja la cara al 95% del encuadre: cortada por el borde.
	 *
	 * Su selector usa DOS clases, asi que gana por especificidad sin
	 * importar el orden. Hay que igualarla: el tema hijo carga despues y
	 * con la misma especificidad se impone.
	 */
	.wp-block-uagb-container.uagb-block-a84b47a8 {
		background-position: 68% 50%;
	}

	/*
	 * Mostrar la modelo deja el texto sobre el cabello y cuesta leerlo.
	 * El velo que trae Spectra es vertical (oscurece arriba), que aqui no
	 * sirve: el problema es horizontal.
	 *
	 * Se reemplaza por un degradado en diagonal que oscurece la izquierda
	 * —donde va el titulo— y se aligera hacia la derecha sin desaparecer:
	 * conserva un 32% de velo sobre la cara para que la foto no compita
	 * con el texto. Se usa el marron de la marca, no negro puro, para no
	 * ensuciar el tono rosado de la imagen: un marron mas oscuro lee como
	 * negro sobre la foto.
	 */
	.wp-block-uagb-container.uagb-block-a84b47a8::before {
		/* rgb(108,60,60) es --ast-global-color-3, el vinotinto de la paleta
		   y el mismo color que usaba el velo original de Spectra. Se
		   escribe literal en vez de con la variable porque hace falta
		   controlar el alfa de cada parada. */
		background-image: linear-gradient(
			100deg,
			rgba( 108, 60, 60, 0.85 ) 0%,
			rgba( 108, 60, 60, 0.80 ) 40%,
			rgba( 108, 60, 60, 0.76 ) 72%,
			rgba( 108, 60, 60, 0.75 ) 100%
		);

		/*
		 * Spectra le pone `opacity: 0.7` a esta capa, asi que multiplicaba
		 * cada alfa por 0,7 y subirlas apenas se notaba: un 0,88 quedaba
		 * en 0,62 real. Se anula para que los numeros de arriba sean los
		 * que de verdad se ven.
		 */
		opacity: 1;
	}

	/* Refuerzo para el titulo, que es el texto mas grande y expuesto. */
	.uagb-block-a84b47a8 .uagb-ifb-title,
	.uagb-block-a84b47a8 .uagb-ifb-title-prefix,
	.uagb-block-a84b47a8 .uagb-ifb-desc {
		text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 );
	}

	/*
	 * En la portada sobraban 13px de ancho. Dos causas:
	 *
	 * Los bloques de Spectra desbordan por diseno: los adornos ondulados
	 * (`uagb-container__shape`) son SVG mas anchos que su contenedor para
	 * que no queden costuras, y los contenedores usan margenes negativos.
	 *
	 * Se probaron seis candidatos midiendo `document.body.scrollWidth`:
	 * ocultar los adornos, acotarlos, ocultar el carrusel, contenerlo y
	 * recortar el contenedor raiz. Ninguno bastaba. El unico que devuelve
	 * el documento a 440 es recortar en `.entry-content`, que envuelve
	 * todo el contenido de la pagina.
	 */
	.entry-content {
		overflow-x: clip;
	}
}

/* ── Nosotros: la foto de arriba alterna cada 3 segundos ─────────────────
   El bloque uagb/image solo admite UNA imagen. Meter una segunda en su
   HTML romperia la validacion del bloque al abrir el editor, asi que la
   segunda foto se superpone con ::after y se cruzan con una animacion de
   6 s: 3 s cada una. Sin JavaScript.
   La ruta va relativa para que valga igual en local y en produccion. */
.wp-block-uagb-image.uagb-block-c31514d6 .wp-block-uagb-image__figure {
	position: relative;
}

.wp-block-uagb-image.uagb-block-c31514d6 .wp-block-uagb-image__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( "/wp-content/uploads/2026/09/equipo-rizos-y-lisos.webp" );
	background-size: cover;
	background-position: center;
	animation: rizos-alternar-fotos 6s ease-in-out infinite;
	pointer-events: none;
	border-radius: inherit;
}

@keyframes rizos-alternar-fotos {
	0%, 42%  { opacity: 0; }
	50%, 92% { opacity: 1; }
	100%     { opacity: 0; }
}

/* Quien pide menos movimiento en su sistema ve solo la fachada, quieta. */
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-uagb-image.uagb-block-c31514d6 .wp-block-uagb-image__figure::after {
		animation: none;
		opacity: 0;
	}
}

/* ── Cabeceras de pagina: fuera el azul de la plantilla ──────────────────
   Nosotros, Contacto y Testimonios traian el velo de cabecera en
   var(--ast-global-color-0), el turquesa #7eb5bb de la paleta de Astra.
   Inicio ya usaba el marron de marca, asi que las tres desentonaban.
   Se igualan a --ast-global-color-3 (#6c3c3c) conservando el rosa del
   otro extremo y la opacidad 0.82 que pone Spectra.

   Nosotros y Contacto comparten block_id (47724a5d) porque la pagina se
   copio: una sola regla cubre las dos.

   Se antepone `body` para ganar especificidad: el CSS que genera Spectra
   se imprime DESPUES que el del tema hijo y, a igualdad, ganaria el suyo. */
body .wp-block-uagb-container.uagb-block-47724a5d::before,
body .wp-block-uagb-container.uagb-block-e392905b::before {
	/* No se usa --ast-global-color-3 tal cual: ese marron (#6c3c3c) tapa
	   demasiado la foto y el borde inferior queda casi negro. Se aclara
	   ~45% hacia el rosa de la paleta (#b07d7d) hasta rgb(139,89,89), que
	   sigue leyendo como el marron de marca pero deja respirar la imagen.
	   Spectra multiplica esta capa por su opacidad 0.82. */
	background-image: linear-gradient( 0deg,
		rgb( 139, 89, 89 ) 0%,
		var( --ast-global-color-7 ) 100% );
}

/* ── Testimonios: capturas reales de WhatsApp ────────────────────────────
   Los cinco testimonios que traia la plantilla eran inventados —nombres
   anglosajones y fotos de banco—. Ahora el testimonio ES la captura del
   mensaje; el texto transcrito vive en el `alt` de cada imagen, de modo
   que un lector de pantalla y un buscador leen lo mismo que se ve.

   Rejilla que se acomoda sola: tres columnas holgadas, dos en tableta y
   una en movil, sin puntos de quiebre escritos a mano. Las capturas
   tienen alturas distintas y `align-items: start` deja que cada tarjeta
   conserve la suya en vez de estirarse. */
/* Spectra limita esta seccion a 800 px, que con el padding deja 700 utiles:
   solo caben dos columnas. El tope NO esta en el contenedor sino en su
   envoltorio padre, `.uagb-container-inner-blocks-wrap`, y se aplica con la
   variable `--inner-content-custom-width`. Hay que redefinir la variable Y
   el max-width, porque el plugin escribe los dos.

   Y hay que repetir su cadena entera de clases: Spectra encadena cinco
   (.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-…)
   y con menos gana la suya aunque el tema hijo cargue despues. */
body .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-1d0f24c0
	> .uagb-container-inner-blocks-wrap {
	--inner-content-custom-width: min( 100%, 1180px );
	max-width: min( 100%, 1180px );
}

.rizos-testimonios {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 290px, 1fr ) );
	align-items: start;
	gap: 26px;
	max-width: 1080px;
	margin: 0 auto;
}

.rizos-testimonios__intro {
	grid-column: 1 / -1;
	margin: 0 0 6px;
	text-align: center;
	font-size: 1rem;
	color: var( --ast-global-color-3 );
}

.rizos-testimonio {
	margin: 0;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba( 108, 60, 60, 0.10 );
}

.rizos-testimonio img {
	display: block;
	width: 100%;
	height: auto;
}

.rizos-testimonio figcaption {
	padding: 11px 15px 13px;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var( --ast-global-color-3 );
	border-top: 1px solid rgba( 108, 60, 60, 0.10 );
}

@media ( max-width: 921px ) {
	.rizos-testimonios { gap: 18px; }
	.rizos-testimonios__intro { font-size: 0.95rem; }
}

/* El panel de testimonios traia `margin-top` NEGATIVO en los tres tamaños
   —-350 px en escritorio, -200 en tableta, -50 en movil— para flotar sobre
   la banda decorativa que habia encima. Al quitar esa banda, esos 350 px lo
   subian por encima de la cabecera y el menu quedaba tapado.

   Se anula con un margen positivo que se adapta al ancho. La regla va
   fuera de toda media query a proposito: las consultas de medios no suman
   especificidad, asi que esta sola gana a las tres variantes del plugin. */
body .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-1d0f24c0
	.wp-block-uagb-container.uagb-block-85e92537 {
	/* Aqui SI hace falta !important, y es la excepcion a la regla de
	   "mas especificidad, nunca !important": el -350px se aplica con
	   !important desde una hoja que el navegador no deja inspeccionar.
	   Comprobado poniendo el margen como estilo en linea —lo maximo en
	   CSS normal— sin que el valor se moviera. */
	margin-top: clamp( 24px, 4vw, 56px ) !important;
}

/* ── Fondo y jerarquia de la seccion de testimonios ──────────────────────
   Estaba plana: una plancha crema y seis tarjetas iguales. Dos colores de
   la paleta seguian sin usarse —#fcdfe5 (c4) y #9c6262 (c2)— y son los que
   dan el aire de la marca.

   El suelo pasa a ser un degradado del rosa palido al crema con una trama
   de puntos muy tenue, hecha con radial-gradient: sin imagen que descargar
   y sin ruido. La plancha crema desaparece para que las capturas se apoyen
   directamente sobre ese suelo y destaquen por contraste. */
body .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-1d0f24c0 {
	background-color: var( --ast-global-color-5 );
	background-image:
		radial-gradient( circle at 1px 1px, rgba( 156, 98, 98, 0.14 ) 1px, transparent 0 ),
		linear-gradient( 180deg, var( --ast-global-color-4 ) 0%, var( --ast-global-color-5 ) 58% );
	background-size: 22px 22px, 100% 100%;
}

body .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-1d0f24c0
	.wp-block-uagb-container.uagb-block-85e92537 {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* La seccion no tenia titulo propio: solo una linea de 17 px. */
.rizos-testimonios__titulo {
	grid-column: 1 / -1;
	text-align: center;
	margin-bottom: 10px;
}

.rizos-testimonios__titulo h2 {
	margin: 0 0 8px;
	/* El tema pone versales en los h2. Aqui no: son mensajes de clientas
	   agradecidas, y en mayusculas el titulo grita en vez de acompañar. */
	text-transform: none;
	font-size: clamp( 1.55rem, 3.2vw, 2.35rem );
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --ast-global-color-3 );
}

.rizos-testimonios__titulo p {
	margin: 0;
	font-size: 0.98rem;
	color: var( --ast-global-color-2 );
}

/* Sombra calida en vez de la gris de siempre: sobre un suelo rosado, un
   gris neutro ensucia. */
.rizos-testimonio {
	box-shadow: 0 6px 20px rgba( 108, 60, 60, 0.14 );
}

/* Marca de agua: el logotipo del negocio, enorme y al 5%, detras de la
   rejilla. No es decoracion inventada —es el activo real de la marca, el
   mismo archivo que ya sirve la cabecera— y le da al fondo algo que mirar
   sin competir con las capturas. */
body .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-1d0f24c0 {
	position: relative;
	isolation: isolate;
}

body .wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-1d0f24c0::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: min( 760px, 78% );
	aspect-ratio: 822 / 324;
	background-image: url( "/wp-content/uploads/2026/04/rizosylisosbygigi_Logo_SinFondo.png" );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.05;
	z-index: -1;
	pointer-events: none;
}

/* ── Redes en la pagina de Contacto ──────────────────────────────────────
   Antes eran botones de COMPARTIR de Spectra bajo el titulo "Siguenos en
   redes": Facebook, Twitter, LinkedIn y Facebook repetido, los cuatro
   apuntando a URLs de compartir con el destino vacio. Ahora son enlaces
   reales a los perfiles, tomados de la configuracion de Astra para que
   coincidan con los del pie. */
.rizos-redes {
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rizos-redes a {
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: var( --ast-global-color-0 );
	transition: color 0.18s ease;
}

.rizos-redes a:hover,
.rizos-redes a:focus-visible {
	color: var( --ast-global-color-3 );
}

/* El foco de teclado tiene que verse: son enlaces salientes. */
.rizos-redes a:focus-visible {
	outline: 2px solid var( --ast-global-color-3 );
	outline-offset: 4px;
	border-radius: 2px;
}

.rizos-redes svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ── Contacto: patron de ondas detras del formulario ─────────────────────
   Aqui habia una foto de modelo. Se retiro junto con su velo —un corte
   duro que dejaba la mitad izquierda en rosa plano— y queda un patron de
   la misma familia que el de testimonios, pero no identico: alli son
   puntos, aqui ondas. Evocan el cabello sin dibujarlo, y distinguen una
   seccion de otra.

   El degradado va al reves que en testimonios (claro arriba, rosa abajo)
   para que las dos paginas no se lean como la misma pantalla repetida.

   El patron es un SVG incrustado: no añade ninguna descarga. */
body .wp-block-uagb-container.uagb-block-bf6a74c5 {
	background-color: var( --ast-global-color-5 );
	background-image:
		url( "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%2236%22%20viewBox%3D%220%200%20180%2036%22%3E%3Cpath%20d%3D%22M0%2024%20Q%2022.5%206%2045%2024%20T%2090%2024%20T%20135%2024%20T%20180%2024%22%20fill%3D%22none%22%20stroke%3D%22rgba%28156%2C98%2C98%2C0.13%29%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M0%206%20Q%2022.5%20-12%2045%206%20T%2090%206%20T%20135%206%20T%20180%206%22%20fill%3D%22none%22%20stroke%3D%22rgba%28156%2C98%2C98%2C0.08%29%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E" ),
		linear-gradient( 180deg, var( --ast-global-color-5 ) 0%, var( --ast-global-color-4 ) 100% );
	background-size: 180px 36px, 100% 100%;
	background-repeat: repeat, no-repeat;
}

/* El velo ya no pinta nada: sin foto debajo, solo taparia el patron. */
body .wp-block-uagb-container.uagb-block-bf6a74c5::before {
	background-image: none !important;
	background-color: transparent !important;
}

/* ── Banners de Testimonios y Nosotros: menos foto, misma nitidez ────────
   Las fotos que llevan son bodegones de una marca ajena. En vez de
   desenfocarlas —que las emborronaba— se sube la opacidad del velo del
   0.82 al 0.90: la foto sigue nitida, solo asoma menos.

   Se acota por CLASE DE PAGINA, no solo por bloque: Nosotros y Contacto
   comparten el block_id `47724a5d` porque las paginas se copiaron, y el
   banner de Contacto lleva una foto del propio negocio que no hay que
   atenuar. */
body.page-id-544 .wp-block-uagb-container.uagb-block-e392905b::before,
body.page-id-545 .wp-block-uagb-container.uagb-block-47724a5d::before {
	opacity: 0.90;
}

/* ── Repaso movil ────────────────────────────────────────────────────────
   En un telefono de 440 px la rejilla de testimonios se quedaba en 280:
   la seccion aporta 30 px de margen a cada lado y el panel otros 50. En
   escritorio ese aire esta bien; en movil son 160 px de 440 —el 36%— que
   encogen las capturas sin ganar nada. */
@media ( max-width: 767px ) {
	body .wp-block-uagb-container.uagb-block-85e92537 {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/*
	 * Los enlaces del pie median 20 px de alto y los iconos 25: por debajo
	 * de lo que un dedo acierta con comodidad. Se les da altura sin mover
	 * la maqueta, solo con relleno vertical.
	 */
	.site-footer .menu-link,
	.ast-footer-copyright .menu-link {
		display: inline-block;
		padding-top: 7px;
		padding-bottom: 7px;
	}

	.ast-builder-social-element {
		padding: 7px;
	}
}

/* ── Banners de pagina en movil: mas bajos ───────────────────────────────
   En un telefono de 956 px de alto, la cabecera (103) mas el banner (280)
   dejaban el contenido empezando en el pixel 457: casi media pantalla
   antes de leer nada. El culpable era un relleno superior de 125 px
   pensado para escritorio.

   Se recortan a la mitad. No se toca el hero de Inicio (`a84b47a8`): ahi
   la imagen grande ES el contenido. */
@media ( max-width: 767px ) {
	body .wp-block-uagb-container.uagb-block-e392905b,
	body .wp-block-uagb-container.uagb-block-47724a5d {
		min-height: 0 !important;
		padding-top: 52px !important;
		padding-bottom: 30px !important;
	}

	/*
	 * Recortar el contenedor no bastaba: el bloque del titulo trae 56.5 px
	 * de relleno arriba y abajo, 155 px en total para un texto de 42.
	 */
	body .uagb-block-e392905b .wp-block-uagb-advanced-heading,
	body .uagb-block-47724a5d .wp-block-uagb-advanced-heading {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* La seccion del formulario traia 50 px de aire arriba y abajo. */
	body .wp-block-uagb-container.uagb-block-bf6a74c5 {
		padding-top: 28px !important;
		padding-bottom: 28px !important;
	}
}

/* ── Rejilla de productos en movil: sin aire de mas ──────────────────────
   La caja de cada imagen medía 187x250 con `object-fit: contain`, pero las
   miniaturas son CUADRADAS (300x300, comprobadas las 12): sobraban 63 px
   de blanco por tarjeta. Se ajusta la caja a 1:1 —no recorta nada, solo
   deja de reservar espacio vacio— y se baja el margen inferior de 41 a 20.

   Resultado: la fila pasa de 415 px de paso a ~331. */
@media ( max-width: 767px ) {
	/*
	 * Hace falta bajar hasta el <a> y anteponer `body`: la regla que fija
	 * los 250 px viene con !important desde una hoja que el navegador no
	 * deja inspeccionar. Comprobado dos veces: (1) con la altura como
	 * estilo en linea sin !important no se movia, y (2) probando selectores
	 * en caliente, `body ul.products li.product a img` pierde y solo gana
	 * al añadir una clase mas. La rival esta en ese nivel de especificidad.
	 */
	body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}

	ul.products li.product {
		margin-bottom: 20px !important;
	}
}