/*
Theme Name: SaludRicard Kadence Child
Theme URI: https://saludricard.com
Description: Child theme de Kadence para SaludRicard.
Author: SaludRicard
Template: kadence
Version: 1.33.2
Text Domain: saludricard-kadence-child
*/

/* Los estilos propios del child van debajo de esta línea. */

/* ===========================================================
   Footer (verde profundo palette2) — estructura montada por
   content-reference/aplicar-footer-kadence.php: 4 columnas de
   widgets "block" cuyo HTML usa las clases .sr-f-*.
   =========================================================== */

.site-footer,
.site-footer a,
.site-footer .widget-title {
	color: var(--global-palette8, #F6F2EC);
}
/* Al pasar, arena (el color de los títulos del pie) y no el verde de WhatsApp (palette11):
   ese verde es un fondo para texto blanco y sobre el verde profundo se quedaba en 3,2:1
   (punto 49). */
.site-footer a:hover {
	color: var(--global-palette12, #DCCFA6);
}
.site-footer .widget {
	margin-bottom: 0;
}

/* Columna de marca */
.sr-f-brandrow {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 16px;
}
.sr-f-logo {
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 10px;
	background: var(--global-palette1, #40614E);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #EDE6D8;
	font: 600 16px 'Spectral', serif;
}
.sr-f-name {
	font: 600 18px 'Spectral', serif;
	color: #F6F2EC;
}
.sr-f-tag {
	font: 400 13.5px/1.7 'Mulish', sans-serif;
	color: #A9B2A6;
	margin: 0;
	max-width: 280px;
}

/* Columnas de enlaces */
.sr-f-title {
	font: 700 12px 'Mulish', sans-serif;
	color: var(--global-palette12, #DCCFA6);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 14px;
}
.sr-f-links {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.sr-f-links a {
	font: 500 13.5px 'Mulish', sans-serif;
	color: #B7BEB4;
	text-decoration: none;
}

/* Columna de contacto */
.sr-f-wa {
	margin-bottom: 12px;
}
.sr-f-legal {
	font: 500 12.5px/1.6 'Mulish', sans-serif;
	color: #9AA398;
	margin: 0;
}
.sr-f-legal a {
	color: #9AA398;
	text-decoration: none;
}

@media (max-width: 767px) {
	.sr-f-tag {
		max-width: none;
	}
	.site-footer .site-middle-footer-inner-wrap .widget {
		margin-bottom: 30px;
	}
}

/* ===========================================================
   ORDEN DE ESTE ARCHIVO (importa)
   -----------------------------------------------------------
   1. Footer.
   2. Skin generico del sitio: la base que viste lo que viene de
      Fusion Builder (tipografia, colores, botones...).
   3. Sistema .sr-*: va DESPUES del skin a proposito. Ambos usan
      selectores de una clase, asi que en caso de empate gana el
      ultimo; el sistema de diseno debe poder pisar la base. Con
      el orden inverso, `.entry-content p` del skin ganaba a
      `.sr-band p` y el texto de la banda CTA salia gris oscuro
      sobre verde, casi ilegible.
   4. Modulos concretos (lista de servicios).
   5. Parches de convivencia con Fusion Builder.
   =========================================================== */

/* ===========================================================
   SKIN GLOBAL DEL RESTO DEL SITIO
   -----------------------------------------------------------
   Las páginas interiores siguen siendo contenido de Fusion
   Builder (Avada) renderizado bajo Kadence — ver CHANGES.md,
   Fase 2. No se reconstruyen aquí: lo que hace este bloque es
   vestirlas con la misma paleta, tipografía, ritmo y formas
   (radios, sombras, botones) que la home, para que el salto
   home -> interior no cante mientras se migran página a página
   al sistema .sr-*.
   =========================================================== */

:root {
	--sr-ancho: 1148px;
	--sr-gutter: 46px;
	--sr-tinta: #26302A;
	--sr-tinta-suave: #55605A;
	/* Texto atenuado. Era #6A736C: pasaba en blanco (4,9:1) pero no en los fondos de color
	   (4,4 en crema, 4,2 en arena, 4,0 en salvia). Con este llega a 4,5:1 en todos (punto 49). */
	--sr-tinta-tenue: #5F6862;
	/* Verde salvia para texto pequeño sobre salvia o arena (números, etiquetas, cabeceras de
	   tabla). Es #5A7350 un punto más oscuro: 4,66:1 sobre #E6EAD9 (punto 49). */
	--sr-salvia-texto: #556D4C;
	--sr-marca: #40614E;
	--sr-arena: #F1ECE2;
	--sr-crema: #F6F2EC;
	--sr-salvia: #E6EAD9;
	--sr-hueso: #FCFAF5;
	--sr-borde: #E4DCCB;
	--sr-sombra: 0 10px 24px rgba(38, 48, 42, .05);
	--sr-radio: 20px;
}

/* ---- Cabecera de página/entrada: misma banda que el hero de la home ---- */
.entry-hero.page-hero-section,
.entry-hero.post-hero-section {
	background: linear-gradient(180deg, #F6F2EC, #F1ECE2);
	border-bottom: 1px solid rgba(38, 48, 42, .06);
}
.entry-hero .entry-hero-container-inner { padding: 0; }
.entry-hero .hero-container { padding: 64px var(--sr-gutter) 58px; }
/* Alineado a la izquierda como el hero de la home, no centrado: asi el titulo
   comparte eje con el contenido de debajo en vez de flotar en el medio. */
.entry-hero .entry-header {
	max-width: var(--sr-ancho);
	margin: 0 auto;
	padding: 0;
	text-align: left;
}
.entry-hero .entry-title {
	font: 400 44px/1.14 'Spectral', serif;
	color: var(--sr-tinta);
	letter-spacing: -.01em;
	margin: 0;
}
/* Filete dorado bajo el título: el mismo acento que la banda CTA de la home */
.entry-hero .entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: #DCCFA6;
	margin-top: 20px;
}
.entry-hero .entry-meta,
.entry-hero .kadence-breadcrumbs {
	max-width: var(--sr-ancho);
	margin: 16px auto 0;
	font: 500 12.5px 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue); /* era #8A8F87: 2,8:1 sobre la banda (punto 49) */
}

/* ---- Área de contenido ---- */
.content-area { margin-top: 0; margin-bottom: 0; }

/* Kadence mete padding lateral en .site-main. Con el layout a fullwidth eso deja un
   marco blanco alrededor de las bandas de color, que deben llegar a sangre. Los
   gutters los pone cada seccion (.sr-sec, .sr-hero...) y, para el contenido suelto,
   el clamp de `.entry-content > *` de mas abajo. */
/* Se usa `#main` a proposito, no `.site-main`: Avada declara `#main{padding:30px}`
   con un selector de ID, y ese id lo lleva el contenedor de Kadence. Con clases
   sueltas pierde por especificidad; con `.content-width-fullwidth #main.site-main`
   (1 id + 2 clases) gana sin necesidad de !important. */
.content-width-fullwidth #main.site-main,
.content-width-fullwidth .content-container.site-container {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}
/* Y el padding VERTICAL tambien. El punto 26 solo quito el lateral, asi que
   quedaban 20px de blanco entre la cabecera del titulo y la primera banda de
   color, y 30px al final antes del footer: una costura visible en todas las
   paginas con bandas a sangre. El aire de lectura lo pone .entry-content mas
   abajo, que ya sabe anularse cuando el contenido empieza o acaba en banda. */
.content-width-fullwidth #main.site-main {
	padding-top: 0;
	padding-bottom: 0;
}
.site-main > .content-wrap > .entry { background: transparent; }
.entry-content-wrap { padding: 0; }
.entry-content { padding-top: 58px; padding-bottom: 70px; }

/* Si la pagina empieza (o acaba) con una banda de color propia, se quita ese aire:
   la banda debe pegar con la cabecera del titulo como pasa en la home, no dejar una
   franja blanca en medio. Para contenido suelto el padding si hace falta. */
.entry-content:has( > :first-child:is( .sr-hero, .sr-intro, .sr-sec, .sr-servicios, .sr-sobre, .sr-motivos, .sr-pasos-sec, .sr-videos, .sr-autor, .sr-testi, .sr-lista, .sr-libro, .sr-contacto, .sr-ficha, .sr-blog ) ) {
	padding-top: 0;
}
.entry-content:has( > :last-child:is( .sr-servicios, .sr-sobre, .sr-motivos, .sr-pasos-sec, .sr-videos, .sr-autor, .sr-testi, .sr-lista, .sr-libro, .sr-contacto, .sr-ficha, .sr-blog ) ) {
	padding-bottom: 0;
}

/* Todo lo que no sea una banda a sangre se centra con su propio gutter.
   min() hace de max-width y de padding lateral a la vez, así los hijos a
   sangre (contenedores de Fusion, secciones .sr-*) siguen ocupando el 100%. */
.entry-content > * {
	max-width: min(var(--sr-ancho), 100% - (var(--sr-gutter) * 2));
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .fusion-fullwidth,
.entry-content > .fusion-builder-row,
.entry-content > .sr-hero,
.entry-content > .sr-sec,
.entry-content > .sr-servicios,
.entry-content > .sr-sobre,
.entry-content > .sr-motivos,
.entry-content > .sr-pasos-sec,
.entry-content > .sr-videos,
.entry-content > .sr-autor,
.entry-content > .sr-testi,
.entry-content > .sr-divisor,
.entry-content > .sr-blog,
.entry-content > .sr-intro,
.entry-content > .sr-lista,
.entry-content > .sr-libro,
.entry-content > .sr-contacto,
.entry-content > .sr-ficha,
.entry-content > .sr-band-wrap,
.entry-content > .sr-ocurre,
.entry-content > .sr-cita,
.entry-content > .sr-quien,
.entry-content > .sr-modalidades,
.entry-content > .alignfull {
	max-width: none;
	width: auto;
}

/* ---- Tipografía del contenido ----
   OJO con el alcance de estos selectores. Van al contenido "suelto" (paginas de
   texto plano: legales, mi cuenta...) y al que pinta Fusion Builder, NO a las
   secciones .sr-*, que traen su propia tipografia y sus propios colores.

   Por que importa: `.entry-content p` es (0,1,1) y le gana a `.sr-servicios-intro`,
   que es (0,1,0), sin que el orden del archivo pueda arreglarlo. Con eso puesto,
   los textos claros sobre las bandas verdes salian en gris oscuro, ilegibles.
   De ahi el `>` (hijo directo) y el uso de `.fusion-text` en vez de barrer todo
   `.entry-content`. */
.entry-content > :is(h1, h2, h3, h4, h5, h6),
.fusion-title :is(h1, h2, h3, h4, h5, h6) {
	font-family: 'Spectral', serif;
	color: var(--sr-tinta);
	letter-spacing: -.005em;
}
.entry-content > h2, .fusion-title h2 { font-size: 34px; line-height: 1.15; font-weight: 400; margin-top: 0; margin-bottom: 18px; }
.entry-content > h3, .fusion-title h3 { font-size: 24px; line-height: 1.25; font-weight: 500; margin-top: 0; margin-bottom: 12px; }
.entry-content > h4, .fusion-title h4 { font-size: 20px; line-height: 1.3; font-weight: 500; margin-top: 0; margin-bottom: 10px; }
.entry-content > p,
.entry-content > :is(ul, ol) li,
.fusion-text p,
.fusion-text li {
	font-family: 'Mulish', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: var(--sr-tinta-suave);
}
/* margin-top/bottom por separado, NUNCA el atajo `margin`: el atajo resetea a 0
   los `margin-left/right: auto` con los que se centra `.entry-content > *`, y las
   paginas de texto plano (legales, mi cuenta...) se quedaban pegadas al borde
   izquierdo. */
.entry-content > p, .fusion-text p { margin-top: 0; margin-bottom: 18px; }
.entry-content > :is(ul, ol), .fusion-text :is(ul, ol) { margin-top: 0; margin-bottom: 20px; padding-left: 22px; }
.entry-content > :is(ul, ol) li, .fusion-text li { margin-bottom: 8px; }
.entry-content > p strong, .fusion-text strong { color: var(--sr-tinta); font-weight: 600; }
.entry-content a:not(.fusion-button):not(.sr-link):not(.sr-btn):not(.sr-btn-ghost):not(.sr-btn-claro):not(.sr-btn-solido):not(.sr-tarifa-nombre):not(.sr-wa-boton):not(.button) {
	color: var(--sr-marca);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(64, 97, 78, .35);
}
.entry-content a:not(.fusion-button):not(.sr-link):not(.sr-btn):not(.sr-btn-ghost):not(.sr-btn-claro):not(.sr-btn-solido):not(.sr-tarifa-nombre):not(.sr-wa-boton):not(.button):hover {
	text-decoration-color: currentColor;
}
.entry-content blockquote {
	border-left: 3px solid #DCCFA6;
	background: var(--sr-arena);
	border-radius: 0 12px 12px 0;
	padding: 22px 26px;
	margin: 0 auto 24px;
}
.entry-content blockquote p {
	font: 400 18px/1.6 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 0;
}

/* ---- Imágenes y medios ---- */
.entry-content img:not(.sr-autor-foto),
.fusion-imageframe img,
.fusion-image-wrapper img { border-radius: 14px; }
.entry-content .fusion-flexslider,
.entry-content .wp-block-image img { border-radius: 16px; overflow: hidden; }

/* ---- Botones: Fusion, Gutenberg, WooCommerce y los submit de formularios,
       todos con la forma de la home ---- */
.entry-content .fusion-button,
.entry-content .wp-block-button__link,
.entry-content input[type=submit],
.entry-content button[type=submit],
.entry-content .wpcf7-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--sr-marca) !important;
	background-image: none !important;
	border: 0 !important;
	color: var(--sr-crema) !important;
	border-radius: 30px !important;
	padding: 15px 28px !important;
	font: 700 15px 'Mulish', sans-serif !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.entry-content .fusion-button:hover,
.entry-content .wp-block-button__link:hover,
.entry-content input[type=submit]:hover,
.entry-content button[type=submit]:hover,
.entry-content .wpcf7-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: #2C382F !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -14px rgba(38, 48, 42, .7);
}
.entry-content .fusion-button .fusion-button-text {
	font: inherit !important;
	color: inherit !important;
	letter-spacing: 0 !important;
}

/* ---- Separadores y cajas de Fusion, en la paleta nueva ---- */
.fusion-separator .fusion-separator-border,
.entry-content hr { border-color: rgba(38, 48, 42, .12) !important; }
.fusion-content-boxes .content-box-column,
.fusion-panel,
.entry-content .fusion-highlight {
	border-radius: 14px !important;
	border-color: rgba(38, 48, 42, .08) !important;
	background: var(--sr-crema);
}
.fusion-accordian .panel-title a {
	font-family: 'Spectral', serif !important;
	color: var(--sr-tinta) !important;
}

/* ---- Formularios (contacto, suscripción, checkout) ---- */
.entry-content input[type=text],
.entry-content input[type=email],
.entry-content input[type=tel],
.entry-content input[type=url],
.entry-content input[type=number],
.entry-content input[type=password],
.entry-content select,
.entry-content textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--sr-borde) !important;
	border-radius: 12px !important;
	background: #fff !important;
	padding: 13px 15px !important;
	font: 400 15px 'Mulish', sans-serif !important;
	color: var(--sr-tinta) !important;
	box-shadow: none !important;
}
/* El foco de los campos era el borde en verde y un halo al 14 %, que casi no se veía. Ahora
   el halo es macizo: borde y anillo verdes, 3px en total (punto 49). Se sigue anulando el
   outline del navegador para que no salgan dos anillos. Solo en los campos de texto: el botón
   de enviar es verde y un halo verde no se le veía; él y las casillas llevan el anillo
   general del final del archivo. Los campos de WooCommerce que quedan fuera del contenido (los
   del vale regalo en la ficha de producto) tienen el mismo estilo de arriba, con la sombra
   anulada, y sin esto no cambiaban nada al recibir el foco. */
.entry-content input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
.entry-content select:focus,
.entry-content textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none !important;
	border-color: var(--sr-marca) !important;
	box-shadow: 0 0 0 2px var(--sr-marca) !important;
}
.entry-content label {
	font: 600 13.5px 'Mulish', sans-serif;
	color: var(--sr-tinta);
}

/* ---- Paginas de texto plano (legales) ----
   Aviso legal, privacidad, cookies y devoluciones son 16-30 <p> seguidos, sin
   un solo encabezado: los "titulos" son parrafos que contienen solo un
   <strong>. A 1148px la linea pasa de 110 caracteres y es ilegible.

   Se detecta la pagina por descarte (no trae ninguna banda .sr-* ni una fila
   de Fusion) para no estrechar las paginas ya maquetadas, y se le da a la
   columna un ancho de lectura. Los parrafos-titulo se promueven a encabezado
   visual sin tocar el contenido, que es texto legal y no conviene reescribir.

   La columna va al eje izquierdo de 1148px, el mismo del H1 de la cabecera,
   como la de las fichas (.sr-texto). Centrada quedaba 204px a la derecha de
   su propio titulo. Los margenes se fijan aqui, con (0,2,0), porque Kadence
   da a los hijos `.single-content h2/ul/... { margin: X 0 Y }` (0,1,1), que
   pisaba el margin auto de `.entry-content > *` y los pegaba al borde. Esto
   cubre tambien las entradas del blog, que tampoco traen bandas .sr-*. */
.entry-content:not(:has( .sr-hero, .sr-intro, .sr-sec, .sr-servicios, .sr-sobre, .sr-motivos, .sr-pasos-sec, .sr-videos, .sr-autor, .sr-testi, .sr-lista, .sr-libro, .sr-contacto, .sr-ficha, .sr-blog, .fusion-builder-row, .wpcf7, .woocommerce )) > * {
	max-width: min(740px, 100% - (var(--sr-gutter) * 2));
	margin-left: max(var(--sr-gutter), (100% - var(--sr-ancho)) / 2);
	margin-right: auto;
}
.entry-content:not(:has( .sr-hero, .sr-intro, .sr-sec, .sr-servicios, .sr-sobre, .sr-motivos, .sr-pasos-sec, .sr-videos, .sr-autor, .sr-testi, .sr-lista, .sr-libro, .sr-contacto, .sr-ficha, .sr-blog, .fusion-builder-row, .wpcf7, .woocommerce )) > p:has( > strong:only-child ) {
	font: 500 21px/1.3 'Spectral', serif;
	color: var(--sr-tinta);
	margin-top: 38px;
	margin-bottom: 14px;
}
.entry-content:not(:has( .sr-hero, .sr-intro, .sr-sec, .sr-servicios, .sr-sobre, .sr-motivos, .sr-pasos-sec, .sr-videos, .sr-autor, .sr-testi, .sr-lista, .sr-libro, .sr-contacto, .sr-ficha, .sr-blog, .fusion-builder-row, .wpcf7, .woocommerce )) > p:has( > strong:only-child ) strong {
	font-weight: inherit;
}

/* Lo mismo para los navegadores que no entienden :has() (Firefox hasta la 120: la 115 es
   la última de Windows 7). Sin esto los h2 y las listas de las entradas se pegan al borde
   izquierdo. La clase sr-lectura la pone functions.php con la misma lista de secciones
   (punto 59). Los navegadores con :has() no entran aquí. */
@supports not selector(:has(a)) {
	.sr-lectura .entry-content > * {
		max-width: min(740px, 100% - (var(--sr-gutter) * 2));
		margin-left: max(var(--sr-gutter), (100% - var(--sr-ancho)) / 2);
		margin-right: auto;
	}
}

/* ---- Tablas ---- */
.entry-content table,
.woocommerce table.shop_table {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(38, 48, 42, .1);
	border-collapse: separate;
	border-spacing: 0;
	font-family: 'Mulish', sans-serif;
}
.entry-content th,
.woocommerce table.shop_table th {
	background: var(--sr-salvia);
	font: 700 13px 'Mulish', sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sr-marca);
}

/* ---- Listado del blog y tarjetas de WooCommerce ---- */
.loop-entry.content-bg,
.woocommerce ul.products li.product {
	border-radius: var(--sr-radio);
	overflow: hidden;
	border: 1px solid var(--sr-borde);
	box-shadow: var(--sr-sombra);
	transition: transform .2s ease, box-shadow .2s ease;
}
/* Los titulos del listado salian en el amarillo de Avada (#FBC300): ese color
   lo inyecta fusion-dynamic-css sobre `.entry-title a`, no Kadence. Se alinean
   con .sr-post h3 a de la home: tinta en reposo, verde marca al pasar.
   Con !important porque la regla de Fusion (`.post h2 a`) tiene la misma
   especificidad y el orden de hojas no es fiable: el CSS cacheado de Avada
   se cuela entre las dos copias que functions.php imprime del child. */
.loop-entry .entry-title a,
.archive .entry-title a,
.search .entry-title a {
	color: var(--sr-tinta) !important;
	text-decoration: none;
}
.loop-entry .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover { color: var(--sr-marca) !important; }

.loop-entry.content-bg:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -22px rgba(38, 48, 42, .5);
}
.loop-entry .entry-title { font-family: 'Spectral', serif; font-weight: 500; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font: 500 18px/1.3 'Spectral', serif !important;
	color: var(--sr-tinta);
}
.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--sr-marca) !important;
	font: 700 16px 'Mulish', sans-serif !important;
}

/* ---- Tienda: «Añadir al carrito» de las tarjetas (punto 52) ----
   Kadence lo enseña al pasar el ratón o al tabular (ajuste «Button Action Style»,
   product_archive_style, en su valor de serie «action-on-hover»): sube la caja blanca 2rem y
   pone el botón en absoluto, anclado por abajo 0,8rem bajo ella. Ese hueco es para su enlace de
   texto; la regla de botones de arriba lo hace pildora (15px 28px) pero sigue inline: el relleno
   no ocupa sitio, en las tarjetas de 257px no cabe en una linea y, al crecer hacia arriba, tapaba
   el precio. Ahora: pildora de una pieza, del tamaño de las de las tarjetas de la portada y sin
   la flecha de Kadence (como el boton de la ficha); anclada por arriba, 12px bajo el precio, asi
   que aunque baje a dos lineas no lo tapa; la caja sube 48px; y mientras no se ve no recibe
   clics. En pantallas tactiles (hover: none) no sale: Chrome aplica :hover al empezar el toque,
   antes de decidir donde va el clic, y un toque al pie de la tarjeta caia en el boton invisible
   y añadia el producto al carrito; alli se compra desde la ficha. En la vista de lista Kadence
   ya lo pone en su sitio y solo cambia el tamaño. */
.woocommerce ul.products li.product .product-action-wrap .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 12px 18px !important;
	font-size: 14px !important;
	text-align: center;
}
.woocommerce ul.products li.product .product-action-wrap .button .kadence-svg-iconset { display: none; }
.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product .product-action-wrap {
	top: calc(100% - 16px);
	bottom: auto;
	pointer-events: none;
}
@media (hover: hover) {
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:hover .product-action-wrap,
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:focus-within .product-action-wrap {
		bottom: auto;
		pointer-events: auto;
	}
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:hover .entry-content-wrap,
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:focus-within .entry-content-wrap {
		transform: translateY(-48px);
	}
}
@media (hover: none) {
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product .product-action-wrap { display: none; }
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:hover .entry-content-wrap,
	.woocommerce ul.products.woo-archive-action-on-hover:not(.products-list-view) li.product:focus-within .entry-content-wrap {
		transform: none;
	}
}

/* ---- Entradas del blog ----
   Kadence las monta como las paginas (content-reference/aplicar-entradas-kadence.php):
   titulo en la banda de cabecera, imagen destacada encima del contenido, sin caja y a
   ancho completo. El texto ya va a la columna de lectura del bloque de las paginas de
   texto; aqui se lleva al mismo eje todo lo que Kadence pinta fuera de .entry-content. */
.single-post .post-thumbnail.kadence-thumbnail-position-above,
.single-post .entry-footer {
	max-width: min(740px, 100% - (var(--sr-gutter) * 2));
	margin-left: max(var(--sr-gutter), (100% - var(--sr-ancho)) / 2);
	margin-right: auto;
}
.single-post .post-thumbnail.kadence-thumbnail-position-above { margin-top: 52px; margin-bottom: 0; }
.single-post .post-thumbnail-inner { text-align: left; }
.single-post .post-thumbnail-inner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sr-radio);
	border: 1px solid var(--sr-borde);
}
.single-post .entry-content { padding-top: 40px; }

/* Navegacion entre entradas y "Entradas similares": al contenedor de 1148px. */
.single-post .post-navigation,
.single-post .entry-related-inner.site-container {
	max-width: calc(var(--sr-ancho) + (var(--sr-gutter) * 2));
	padding-left: var(--sr-gutter);
	padding-right: var(--sr-gutter);
	margin-left: auto;
	margin-right: auto;
}
/* El filete va en .nav-links, que es la que mide 1148px: en .post-navigation
   se dibujaba tambien bajo el gutter. */
.single-post .post-navigation .nav-links {
	border-top: 1px solid var(--sr-borde);
	padding-top: 26px;
	padding-bottom: 26px;
}
/* Kadence le da 24px de relleno a cada lado: el titulo y las tarjetas empezaban
   24px a la derecha del eje. */
.single-post .entry-related-inner-content { padding-left: 0; padding-right: 0; }
.single-post .post-navigation a { color: var(--sr-tinta); text-decoration: none; }
.single-post .post-navigation a:hover { color: var(--sr-marca); }
.single-post .entry-related { background: var(--sr-arena); }
.single-post .entry-related-title { font-family: 'Spectral', serif; font-weight: 500; }

/* ---- Comentarios de las entradas (punto 52) ----
   Kadence los pinta tras "Entradas similares", a 1290px y, en el movil, pegados
   al borde. Van a la columna de lectura del texto (740px, mismo eje que el texto).
   Si la caja sale vacia (entrada con solo pingbacks), no deja hueco: la banda de
   similares llega al pie, como en las entradas sin comentarios. */
.single-post .entry-related:has(+ .comments-area) { margin-bottom: 0; }
.single-post .comments-area {
	max-width: min(740px, 100% - (var(--sr-gutter) * 2));
	margin-top: 0;
	margin-left: max(var(--sr-gutter), (100% - var(--sr-ancho)) / 2);
	margin-right: auto;
	padding-top: 48px;
	padding-bottom: 56px;
}
.single-post .comments-area:not(:has(.comment-list, .comment-respond, .no-comments)) { display: none; }
.single-post .comments-title { font-weight: 500; }
.single-post .comment-list .comment-body { border-bottom-color: var(--sr-borde); }

/* Colores en linea del contenido antiguo. Las entradas se escribieron con el tema
   viejo, con titulos en naranja (#ff6600), enlaces en azul (#0000ff) y resaltados
   en rojo, verde o celeste: mas de 300 `style="color:…"` en 27 entradas, que chocan
   con la paleta. Se anulan al pintar (el contenido guardado no se toca), con
   !important porque un estilo en linea solo se puede pisar asi: el texto toma el
   color de su bloque y los enlaces, el verde marca. El enfasis se conserva: casi
   todos esos textos ya van en <strong>. */
.single-post .entry-content [style*="color"] { color: inherit !important; }
.single-post .entry-content a[style*="color"] { color: var(--sr-marca) !important; }
/* Tambien traen titulos centrados en linea (`text-align: center`). En una
   columna alineada a la izquierda, bajo un H1 alineado a la izquierda, un
   titulo centrado parece descolocado. Los parrafos centrados se respetan. */
.single-post .entry-content :is(h1, h2, h3, h4, h5, h6)[style*="text-align"] { text-align: left !important; }

/* ---- Responsive del skin ---- */
@media (max-width: 1024px) {
	.entry-hero .entry-title { font-size: 38px; }
}
@media (max-width: 860px) {
	:root { --sr-gutter: 28px; }
	.entry-hero .hero-container { padding: 48px var(--sr-gutter) 44px; }
	.entry-hero .entry-title { font-size: 33px; }
	.entry-content { padding-top: 42px; padding-bottom: 52px; }
	.entry-content h2, .fusion-title h2 { font-size: 28px; }
	.entry-content h3, .fusion-title h3 { font-size: 21px; }
}
@media (max-width: 600px) {
	:root { --sr-gutter: 20px; }
	.entry-hero .entry-title { font-size: 28px; }
	.entry-content .fusion-button,
	.entry-content .wp-block-button__link { width: 100%; text-align: center; }
}

/* ===========================================================
   SISTEMA DE ESTILOS .sr-* — movido aquí desde el bloque
   wp:html <style> que vivía dentro de la página "Inicio
   (Kadence)" (ID 14903). Ahora es global: cualquier página,
   entrada o shortcode puede usar estas clases y todas las
   secciones se ven igual en todo el sitio.
   =========================================================== */

.sr-sec{padding:66px 46px}
.sr-in{max-width:1148px;margin:0 auto}
.sr-kicker{font:600 11.5px 'Mulish',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.sr-h2{font:400 38px/1.1 'Spectral',serif;margin:0}
.sr-link{display:inline-flex;align-items:center;gap:6px;font:700 13px 'Mulish',sans-serif;color:#40614E;text-decoration:none}
.sr-link .sr-arrow{transition:transform .18s ease}
.sr-link:hover .sr-arrow{transform:translateX(4px)}

/* Hero */
.sr-hero{background:linear-gradient(180deg,#F6F2EC,#F1ECE2);padding:70px 46px 64px}
.sr-hero .sr-in,.sr-sobre .sr-in{display:grid;align-items:center}
.sr-hero .sr-in{grid-template-columns:1.05fr .95fr;gap:48px}
/* Color de la etiqueta: era #6E7A5C, 3,7:1 sobre su fondo; este, 4,65:1 (punto 49). */
.sr-badge{display:inline-flex;align-items:center;gap:8px;background:#EFE7D8;padding:7px 14px;border-radius:30px;font:600 11.5px 'Mulish',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#606A50;margin:0 0 22px}
.sr-badge span{width:7px;height:7px;border-radius:50%;background:#7A9A6E;flex:none}
.sr-h1{font:400 48px/1.14 'Spectral',serif;color:#26302A;margin:0 0 22px;letter-spacing:-.01em}
.sr-h1 em{font-style:italic;color:#40614E}
.sr-lead{font:400 17px/1.7 'Mulish',sans-serif;color:#55605A;margin:0 0 14px;max-width:480px}
.sr-lead-strong{font:600 17px/1.6 'Mulish',sans-serif;color:#26302A;margin:0 0 32px;max-width:480px}
.sr-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sr-cta-row .sr-link{font-size:15px;padding:16px 8px}
.sr-figure{border-radius:18px;overflow:hidden;aspect-ratio:9/11;max-height:470px;box-shadow:0 24px 50px -30px rgba(38,48,42,.5)}
.sr-figure img{width:100%;height:100%;object-fit:cover;display:block}

/* Servicios — rejilla de tarjetas panel sobre fondo claro */
.sr-servicios{background:var(--sr-crema);padding:74px 46px 78px}
.sr-servicios-head{text-align:center;max-width:800px;margin:0 auto 40px}
.sr-servicios .sr-kicker{color:#62684E}
.sr-servicios .sr-h2{color:var(--sr-tinta)}
.sr-servicios-intro{font:400 17px/1.8 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:16px auto 0;max-width:720px}
.sr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sr-card{background:#fff;border:1px solid var(--sr-borde);border-radius:var(--sr-radio);padding:32px 28px 30px;display:flex;flex-direction:column;box-shadow:var(--sr-sombra);transition:transform .2s ease,box-shadow .2s ease}
.sr-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(38,48,42,.28)}
.sr-icono{width:54px;height:54px;border-radius:16px;background:var(--sr-salvia);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.sr-icono svg{width:27px;height:27px;display:block;fill:none;stroke:var(--sr-marca);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr-num{width:36px;height:36px;border-radius:10px;background:var(--sr-salvia);display:flex;align-items:center;justify-content:center;font:600 15px 'Spectral',serif;color:var(--sr-salvia-texto);margin-bottom:18px}
.sr-card h3{font:500 23px/1.25 'Spectral',serif;color:var(--sr-tinta);margin:0 0 10px}
.sr-card p{font:400 15px/1.75 'Mulish',sans-serif;color:var(--sr-tinta-tenue);margin:0 0 24px}
.sr-card .sr-btn-solido,.sr-card .sr-link{margin-top:auto;align-self:flex-start}

/* Sobre mí */
.sr-sobre{background:#F1ECE2;padding:74px 46px}
.sr-sobre .sr-in{grid-template-columns:.9fr 1.1fr;gap:52px}
.sr-sobre .sr-kicker{color:#62684E;margin-bottom:14px}
.sr-sobre .sr-h2{color:#26302A;font-size:36px;line-height:1.16;margin-bottom:22px}
.sr-sobre p{font:400 16px/1.75 'Mulish',sans-serif;color:#55605A;margin:0 0 18px}
.sr-chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 28px}
.sr-chip{font:600 13px 'Mulish',sans-serif;color:#40614E;background:#E6EAD9;padding:9px 15px;border-radius:24px}
.sr-sobre .sr-figure{aspect-ratio:4/5;max-height:none}

/* Banda CTA libro */
.sr-band-wrap{padding:0 46px;margin:60px 0 64px}
.sr-band{background:linear-gradient(120deg,#40614E,#4E7059);border-radius:20px;padding:46px 44px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;max-width:1148px;margin:0 auto}
/* El font va aqui y no solo en .sr-kicker: `.sr-band p` (0,1,1) le ganaba y el kicker
   salia a 15px/400. Color aclarado para llegar a 4.5:1 sobre el verde (punto 46). */
.sr-band .sr-kicker{font:600 11.5px 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#E6EAD9;margin:0 0 12px}
.sr-band h2{font:400 30px/1.15 'Spectral',serif;color:#F6F2EC;margin:0 0 8px}
.sr-band h2 em{font-style:italic;color:#DCCFA6}
/* El texto, igual que el kicker: #C9D2C0 se quedaba en 3,6:1 en el extremo claro del
   degradado (pa11y no mide los degradados, por eso no salia). Punto 49. */
.sr-band p{font:400 15px/1.6 'Mulish',sans-serif;color:#E6EAD9;margin:0;max-width:460px}
.sr-btn-claro{flex:none;background:#F6F2EC;color:#40614E;text-decoration:none;padding:15px 26px;border-radius:12px;font:700 15px 'Mulish',sans-serif;transition:transform .18s ease,box-shadow .18s ease}
.sr-btn-claro:hover{color:#40614E;transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(0,0,0,.55)}

/* ---- Primitivas compartidas del nuevo lenguaje de tarjeta-panel ----
   Inspirado en la maqueta de referencia: paneles blancos de esquina
   redonda sobre fondos crema, etiqueta-píldora, titular centrado y un
   botón sólido por bloque en vez de un enlace-flecha suelto. */

.sr-btn-solido{display:inline-block;background:var(--sr-marca);color:#F6F2EC;text-decoration:none;padding:14px 24px;border-radius:12px;font:700 15px 'Mulish',sans-serif;box-shadow:0 8px 18px rgba(64,97,78,.2);transition:background .18s ease,transform .18s ease}
.sr-btn-solido:hover{background:#2C382F;color:#F6F2EC;transform:translateY(-2px)}
.sr-card .sr-btn-solido{padding:12px 20px;font-size:14px}

/* Color del texto: era #7A6A43, 4,3:1 sobre su fondo; este, 4,63:1 (punto 49). */
.sr-pill{display:inline-flex;align-items:center;gap:8px;background:#EFE7D8;border:1px solid #DCCFA6;color:#756540;padding:7px 15px;border-radius:999px;font:700 12px 'Mulish',sans-serif;letter-spacing:.04em;margin:0 0 18px}

.sr-panel{background:#fff;border:1px solid var(--sr-borde);border-radius:24px;padding:46px 40px;box-shadow:var(--sr-sombra);max-width:1148px;margin:0 auto}
.sr-panel-estrecho{max-width:720px}

.sr-head-centro{text-align:center;max-width:800px;margin:0 auto 36px}
.sr-head-centro .sr-h2{color:var(--sr-tinta)}
.sr-head-centro .sr-kicker{color:#62684E}
.sr-head-centro p{font:400 17px/1.8 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:16px auto 0;max-width:720px}

.sr-divisor{height:1px;background:var(--sr-borde);max-width:1148px;margin:0 auto}

/* ---- Tarjeta de precio (pagina "Solicitar visita") ----
   Sustituye al fusion_pricing_table, que salia como una tabla con filetes y
   se desbordaba del contenedor. Es un .sr-panel con la cifra destacada. */
.sr-precio { text-align: center; }
.sr-precio h2 {
	font: 500 24px/1.25 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 0 0 18px;
}
.sr-precio-cifra {
	font: 400 62px/1 'Spectral', serif;
	color: var(--sr-marca);
	margin: 0 0 6px;
	letter-spacing: -.02em;
}
.sr-precio-cifra span {
	font-size: 26px;
	vertical-align: super;
	margin-left: 2px;
}
.sr-precio-meta {
	font: 600 12px 'Mulish', sans-serif !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #62684E !important;
	margin: 0 0 22px !important;
}
.sr-precio-desc {
	font: 400 16px/1.8 'Mulish', sans-serif;
	color: var(--sr-tinta-suave);
	margin: 0 auto 26px;
	max-width: 520px;
	text-align: left;
}
.sr-precio-desc + .sr-precio-desc { margin-top: -14px; }

/* ---- Pasos numerados (como reservar) ---- */
.sr-pasos-sec { background: var(--sr-crema); padding: 64px var(--sr-gutter); }
.sr-pasos-sec .sr-kicker { color: #62684E; }
.sr-pasos-sec .sr-h2 { font-size: 30px; margin-bottom: 24px; color: var(--sr-tinta); }
.sr-pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; }
.sr-pasos li {
	counter-increment: paso;
	position: relative;
	padding: 0 0 20px 50px;
	font: 400 16px/1.7 'Mulish', sans-serif;
	color: var(--sr-tinta-suave);
}
.sr-pasos li:last-child { padding-bottom: 0; }
.sr-pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: -2px;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--sr-salvia);
	color: var(--sr-salvia-texto);
	font: 600 15px/34px 'Spectral', serif;
	text-align: center;
}

/* ---- Rejilla de videos (pagina "Videos") ----
   Sustituye a los fusion_youtube, que salian a ancho fijo y sin contenedor.
   El iframe va perezoso y con ratio 16:9 nativo, sin el truco del padding. */
.sr-videos { background: var(--sr-crema); padding: 66px var(--sr-gutter) 72px; }
.sr-videos-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1148px;
	margin: 0 auto;
}
.sr-video {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: var(--sr-radio);
	box-shadow: var(--sr-sombra);
	overflow: hidden;
}
.sr-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}
.sr-video h3 {
	font: 500 18px/1.35 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 0;
	padding: 20px 22px 22px;
}

/* ---- Lista de tarifas (pagina "Regala bienestar") ----
   Era una <table> de dos columnas con los precios en negrita y enlaces
   naranjas. Aqui cada servicio es una fila con su precio a la derecha. */
.sr-tarifas { list-style: none; margin: 0 0 26px; padding: 0; }
.single-content .sr-tarifas { padding-left: 0; } /* Kadence pone 2em a las listas del contenido (punto 53) */
.sr-tarifas li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 16px 0;
	border-bottom: 1px solid var(--sr-borde);
}
.sr-tarifas li:last-child { border-bottom: 0; }
.sr-tarifa-nombre {
	font: 600 15.5px/1.5 'Mulish', sans-serif;
	color: var(--sr-tinta);
	text-decoration: none;
	flex: 1 1 260px;
}
.sr-tarifa-nombre:hover { color: var(--sr-marca); }
.sr-tarifa-precio {
	font: 400 22px 'Spectral', serif;
	color: var(--sr-marca);
	flex: none;
}

/* ---- Bloque "motivos de consulta": panel con lista de filas ---- */
.sr-motivos{background:var(--sr-arena);padding:64px 46px}
.sr-motivos .sr-h2{font-size:32px;margin:0 0 14px;color:var(--sr-tinta)}
.sr-motivos > .sr-panel > p:not([class]){font:400 16px/1.8 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:0 0 24px}
.sr-lista-check{display:grid;margin:0 0 28px;padding:0;list-style:none}
.sr-lista-check li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--sr-borde);font:400 16px/1.5 'Mulish',sans-serif;color:var(--sr-tinta)}
.sr-lista-check li:last-child{border-bottom:0}
.sr-lista-check li::before{content:"✓";position:absolute;left:0;top:13px;color:var(--sr-marca);font-weight:700}

/* ---- Bloque autor centrado ---- */
.sr-autor{background:linear-gradient(135deg,var(--sr-arena),var(--sr-hueso));padding:64px 46px}
.sr-autor .sr-panel{text-align:center}
.sr-autor-foto{width:116px;height:116px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 22px;border:4px solid var(--sr-salvia)}
.sr-autor h2{font:400 34px/1.15 'Spectral',serif;color:var(--sr-tinta);margin:0 0 16px}
.sr-autor-destacado{font:600 18px/1.7 'Mulish',sans-serif;color:#374A3D;margin:0 auto 18px;max-width:580px}
.sr-autor p{font:400 15.5px/1.9 'Mulish',sans-serif;color:var(--sr-tinta-tenue);margin:0 auto 24px;max-width:640px}
.sr-autor .sr-chips{justify-content:center;margin:0 0 26px}

/* ---- Testimonios ---- */
.sr-testi{background:var(--sr-arena);padding:70px 46px 76px}
.sr-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1148px;margin:0 auto}
.sr-testi-card{background:#fff;border:1px solid var(--sr-borde);border-radius:18px;padding:26px 24px;box-shadow:0 6px 14px rgba(38,48,42,.04);display:flex;flex-direction:column}
.sr-estrellas{color:#B0A275;font-size:15px;letter-spacing:.12em;margin:0 0 12px}
.sr-testi-card blockquote{font:400 15.5px/1.8 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:0 0 18px;padding:0;border:0;background:none;quotes:none;font-style:normal}
.sr-testi-card blockquote::before,.sr-testi-card blockquote::after{content:none}
.sr-testi-autor{font:700 14px 'Mulish',sans-serif;color:var(--sr-tinta);margin:auto 0 2px}
.sr-testi-meta{font:400 12.5px 'Mulish',sans-serif;color:var(--sr-tinta-tenue);margin:0}


/* Últimas entradas del blog — las pinta el shortcode sr_ultimas_entradas
   (ver functions.php). */
.sr-blog{background:#F6F2EC;padding:66px 46px 72px}
.sr-blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sr-blog .sr-kicker{color:#62684E}
.sr-blog .sr-h2{color:#26302A}
.sr-post{background:#fff;border:1px solid var(--sr-borde);border-radius:var(--sr-radio);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sr-sombra);transition:transform .2s ease,box-shadow .2s ease}
.sr-post:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(38,48,42,.5)}
.sr-post-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#E6EAD9}
.sr-post-media img{width:100%;height:100%;object-fit:cover;display:block}
.sr-post-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
/* Fechas y metadatos: #8A8F87 daba 3,3:1 en blanco; ahora la tinta tenue (punto 49). */
.sr-post-fecha{font:600 11.5px 'Mulish',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--sr-tinta-tenue);margin:0 0 10px}
.sr-post h3{font:500 19px/1.3 'Spectral',serif;margin:0 0 10px}
.sr-post h3 a{color:#26302A;text-decoration:none}
.sr-post h3 a:hover{color:#40614E}
.sr-post-extracto{font:400 14px/1.65 'Mulish',sans-serif;color:var(--sr-tinta-tenue);margin:0 0 18px}
.sr-post .sr-link{margin-top:auto}

/* Botón WhatsApp del hero (shortcode del plugin) */
.sr-hero-wa .sr-wa-boton{border-radius:12px!important;padding:15px 26px!important;font:700 15.5px 'Mulish',sans-serif!important;box-shadow:0 14px 30px -12px rgba(33,133,84,.6)!important}

/* ---- Responsive del sistema .sr-* ---- */
@media (max-width:1024px){
	.sr-hero .sr-in{grid-template-columns:1fr .85fr;gap:36px}
	.sr-h1{font-size:42px}
	.sr-sobre .sr-in{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:860px){
	.sr-blog{padding-left:28px;padding-right:28px}
	.sr-hero .sr-in,.sr-sobre .sr-in{grid-template-columns:1fr;gap:32px}
	.sr-hero,.sr-sobre{padding-left:28px;padding-right:28px}
	.sr-servicios,.sr-sec{padding-left:28px;padding-right:28px}
	.sr-band-wrap{padding:0 28px}
	.sr-hero .sr-figure{order:-1;aspect-ratio:3/2;max-height:320px}
	.sr-sobre .sr-figure{aspect-ratio:3/2;max-height:320px}
	.sr-grid,.sr-testi-grid{grid-template-columns:repeat(2,1fr)}
	.sr-motivos,.sr-pasos-sec,.sr-videos,.sr-autor,.sr-testi{padding-left:28px;padding-right:28px}
	.sr-videos-grid{gap:18px}
	.sr-panel{padding:36px 28px}
	.sr-h1{font-size:36px}
	.sr-h2,.sr-sobre .sr-h2{font-size:30px}
	.sr-lead,.sr-lead-strong{max-width:none}
}
@media (max-width:600px){
	.sr-hero,.sr-sobre,.sr-servicios,.sr-blog{padding-left:20px;padding-right:20px}
	.sr-band-wrap{padding:0 20px;margin:44px 0 48px}
	.sr-band{padding:34px 26px}
	.sr-band h2{font-size:25px}
	.sr-grid,.sr-testi-grid{grid-template-columns:1fr}
	.sr-motivos,.sr-pasos-sec,.sr-videos,.sr-autor,.sr-testi{padding-left:20px;padding-right:20px}
	.sr-videos-grid{grid-template-columns:1fr}
	.sr-panel{padding:30px 22px;border-radius:18px}
	.sr-autor h2{font-size:28px}
	.sr-btn-solido{display:block;text-align:center}
	.sr-card .sr-btn-solido{align-self:stretch}
	.sr-h1{font-size:31px}
	.sr-cta-row{gap:6px}
	.sr-hero-wa,.sr-hero-wa .sr-wa-boton{width:100%;justify-content:center}
	.sr-btn-claro{width:100%;text-align:center}
}

/* ===========================================================
   MÓDULO "LISTA DE SERVICIOS" (.sr-serv-*)
   -----------------------------------------------------------
   Para la página /servicios/. No reutiliza la rejilla .sr-card
   de la home a propósito: allí cada técnica es un titular de
   dos líneas, aquí lleva la descripción completa y dos CTAs
   propios (online / presencial), que en una tarjeta de 3
   columnas no caben legibles. Comparte números, tipografía,
   radios y hover con .sr-card para que se lean como el mismo
   sistema.
   =========================================================== */

.sr-intro { background: var(--sr-arena); padding: 66px var(--sr-gutter); }
.sr-intro .sr-kicker { color: #62684E; }
.sr-intro .sr-h2 { color: var(--sr-tinta); max-width: 800px; margin: 0 0 18px; }
.sr-intro p {
	font: 400 17px/1.8 'Mulish', sans-serif;
	color: var(--sr-tinta-suave);
	margin: 0;
	max-width: 720px;
}

.sr-lista { background: var(--sr-crema); padding: 66px var(--sr-gutter) 72px; }
.sr-lista .sr-in { display: flex; flex-direction: column; gap: 18px; }

.sr-serv {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: var(--sr-radio);
	box-shadow: var(--sr-sombra);
	padding: 32px 34px;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sr-serv:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -22px rgba(38, 48, 42, .5);
}
.sr-serv .sr-num { margin-bottom: 0; }

.sr-serv h2 {
	font: 500 24px/1.25 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 0 0 6px;
}
.sr-serv > div > p {
	font: 400 15.5px/1.7 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue, #6A736C);
	margin: 0 0 18px;
}

/* Etiquetas de modalidad (online / presencial) */
.sr-modos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.sr-modo {
	font: 600 11.5px 'Mulish', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sr-salvia-texto);
	background: var(--sr-salvia);
	padding: 6px 12px;
	border-radius: 20px;
}

/* Botonera del servicio */
.sr-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-btn,
.sr-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 14px 'Mulish', sans-serif;
	border-radius: 12px;
	padding: 13px 22px;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.sr-btn { background: var(--sr-marca); color: var(--sr-crema); box-shadow: 0 8px 18px rgba(64, 97, 78, .2); }
/* Con color propio al pasar el ratón: si no, gana el a:hover de Kadence, del mismo verde que el
   fondo, y el botón se queda sin texto. */
.sr-btn:hover {
	background: #2C382F;
	color: var(--sr-crema);
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -14px rgba(38, 48, 42, .7);
}
.sr-btn-ghost {
	background: #fff;
	color: var(--sr-marca);
	box-shadow: inset 0 0 0 1px var(--sr-borde), var(--sr-sombra);
}
.sr-btn-ghost:hover { background: var(--sr-salvia); color: var(--sr-marca); transform: translateY(-2px); }
.sr-btns .sr-link { margin-left: 4px; }

@media (max-width: 860px) {
	.sr-intro, .sr-lista { padding-left: var(--sr-gutter); padding-right: var(--sr-gutter); }
	.sr-serv { padding: 26px 24px; grid-template-columns: 1fr; gap: 16px; }
	.sr-serv h2 { font-size: 21px; }
}
@media (max-width: 600px) {
	.sr-btns { gap: 8px; }
	.sr-btn, .sr-btn-ghost { width: 100%; }
	.sr-btns .sr-link { margin-left: 0; padding-top: 4px; }
}

/* ===========================================================
   CENTRADO DE LAS FILAS DE FUSION BUILDER
   -----------------------------------------------------------
   Avada solo declara `.fusion-builder-row.fusion-row{max-width:
   var(--site_width)}` en su hoja dinamica; el `margin:0 auto`
   que las centraba vivia en la hoja principal del tema Avada,
   que bajo Kadence ya no se carga. Ademas cada fila trae inline
   `margin-left/right: calc(-4% / 2)` para compensar el padding
   de sus columnas. Resultado: las paginas antiguas quedaban
   pegadas a la izquierda, y se notaba mucho mas desde que el
   layout de pagina paso a fullwidth (punto 24).

   Aqui se recentran y se alinean al mismo ancho util que .sr-in
   (1148px con los gutters de la home), para que una pagina de
   Fusion y una pagina .sr-* tengan exactamente el mismo eje.
   =========================================================== */

.entry-content .fusion-builder-row.fusion-row {
	max-width: min(var(--sr-ancho), 100% - (var(--sr-gutter) * 2)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Los contenedores marcados como "100% de ancho" en Avada si deben
   sangrar: ahi solo se recentra, sin clamp. */
.entry-content .hundred-percent-fullwidth .fusion-builder-row.fusion-row {
	max-width: none !important;
	padding-left: var(--sr-gutter);
	padding-right: var(--sr-gutter);
	box-sizing: border-box;
}

/* Las columnas de Fusion traen su propio 1.92% de spacing lateral; con la
   fila ya centrada, ese margen negativo residual descuadra el borde. */
.entry-content .fusion-layout-column {
	margin-left: 0;
	margin-right: 0;
}

/* Sliders y elementos con max-width en % dentro de una columna: Avada los
   centraba con `.fusion-aligncenter{margin:0 auto}` desde su hoja principal. */
.entry-content .fusion-aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ===========================================================
   MODULOS DE LA PAGINA "SOBRE MI" (.sr-libro, .sr-formacion)
   -----------------------------------------------------------
   El perfil reutiliza .sr-sobre (la banda de dos columnas de la
   home) porque es exactamente el mismo patron: foto + texto.
   Lo que si es nuevo aqui:
   - .sr-libro: banda de producto con la portada en 3D.
   - .sr-formacion: la lista de titulaciones, que es MUCHO texto
     (unas 45 lineas en el original de Avada, sin jerarquia). Se
     agrupa en tarjetas tematicas dentro de .sr-lista para que se
     pueda barrer en vez de leer de arriba abajo.
   =========================================================== */

/* La foto del perfil manda sobre el texto: aqui la columna de la
   imagen va primera, al reves que en la banda "sobre mi" de la home. */
.sr-perfil .sr-in { grid-template-columns: .8fr 1.2fr; }
.sr-perfil .sr-btns { margin-top: 4px; }
/* Filete corto + linea de roles bajo el nombre. Los roles NO repiten los
   .sr-chip: aquellos son las disciplinas que se practican, esta es la funcion
   profesional (acompanante / acupuntor / ponente). */
.sr-roles {
	font: 400 17px/1.5 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	margin: 0 0 20px;
}
.sr-roles::before {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	border-radius: 2px;
	background: #DCCFA6;
	margin: 0 0 18px;
}

/* ---- Banda del libro ---- */
.sr-libro { background: var(--sr-marca); padding: 62px var(--sr-gutter); }
.sr-libro .sr-in {
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: center;
	gap: 52px;
}
/* Kicker y texto en el salvia claro de la banda CTA: #B9C6A9 y #C9D2C0 daban 3,9 y 4,4:1
   sobre el verde marca (punto 49). */
.sr-libro .sr-kicker { color: #E6EAD9; }
.sr-libro h2 {
	font: 400 34px/1.15 'Spectral', serif;
	color: var(--sr-crema);
	margin: 0 0 12px;
}
.sr-libro h2 em { font-style: italic; color: #DCCFA6; }
.sr-libro p {
	font: 400 16px/1.7 'Mulish', sans-serif;
	color: #E6EAD9;
	margin: 0 0 26px;
	max-width: 520px;
}
/* La portada es un PNG con transparencia y sombra propia: sin fondo,
   sin recorte y sin radio, o se le ve la caja. */
.sr-libro-portada img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0 !important;
	filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .45));
}

/* ---- Formacion ---- */
.sr-formacion-head { margin-bottom: 36px; }
.sr-formacion-head .sr-kicker { color: #62684E; }
.sr-formacion-head .sr-h2 { color: var(--sr-tinta); }
/* .sr-lista pone flex-direction:column con gap; aqui el hijo es la rejilla.
   `columns` en vez de grid a proposito: las tarjetas tienen alturas muy
   dispares (Reflexologia Podal son dos lineas, Biodescodificacion son
   quince) y con grid cada fila se alinea a la mas alta, dejando huecos
   muertos de media pantalla. Con columnas fluyen y se empaquetan. */
.sr-form-grid {
	columns: 2;
	column-gap: 18px;
}
.sr-form-card {
	break-inside: avoid;
	margin-bottom: 18px;
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: var(--sr-radio);
	box-shadow: var(--sr-sombra);
	padding: 28px 30px;
	transition: transform .2s ease, box-shadow .2s ease;
}
/* Sin translateY: dentro de un contenedor con `columns`, transformar un hijo
   provoca repintados raros en el corte de columna. Solo sombra. */
.sr-form-card:hover { box-shadow: 0 18px 34px -22px rgba(38, 48, 42, .5); }
.sr-form-card h3 {
	font: 500 20px/1.3 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 0 0 4px;
}
/* Subtitulo de rol/acreditacion: resume en una linea lo que la tarjeta
   desarrolla debajo, para poder barrer la rejilla sin leerla entera. */
.sr-form-rol {
	font: 600 14px/1.5 'Mulish', sans-serif !important;
	color: var(--sr-marca) !important;
	margin: 0 0 14px !important;
}
.sr-form-card p {
	font: 400 15px/1.7 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	margin: 0 0 14px;
}
.sr-form-card p:last-child { margin-bottom: 0; }
.sr-form-label {
	font: 600 11.5px 'Mulish', sans-serif !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #62684E !important;
	margin: 0 0 8px !important;
}
.sr-form-card ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.sr-form-card ul:last-child { margin-bottom: 0; }
.sr-form-card li {
	position: relative;
	font: 400 15px/1.6 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	padding-left: 18px;
	margin-bottom: 7px;
}
.sr-form-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #B9C6A9;
}

@media (max-width: 1024px) {
	.sr-perfil .sr-in { grid-template-columns: 1fr 1fr; }
	.sr-libro .sr-in { grid-template-columns: 240px 1fr; gap: 38px; }
}
@media (max-width: 860px) {
	/* Imprescindible repetirlo aqui: .sr-sobre .sr-in ya pasa a una columna en
	   este breakpoint, pero esa regla vive mas arriba en el archivo, asi que el
	   bloque de 1024px de mas abajo le ganaba por orden y el perfil se quedaba
	   en dos columnas de 254px tambien en movil. */
	.sr-perfil .sr-in { grid-template-columns: 1fr; }
	.sr-libro { padding-left: var(--sr-gutter); padding-right: var(--sr-gutter); }
	.sr-libro .sr-in { grid-template-columns: 1fr; gap: 30px; }
	.sr-libro-portada { max-width: 240px; }
	.sr-libro h2 { font-size: 28px; }
	.sr-form-grid { columns: 1; }
	.sr-form-card { padding: 24px 24px; }
}
@media (max-width: 600px) {
	.sr-perfil .sr-btns .sr-btn,
	.sr-perfil .sr-btns .sr-btn-ghost { width: 100%; }
}

/* ===========================================================
   MODULO DE LA PAGINA "CONTACTO" (.sr-contacto)
   -----------------------------------------------------------
   Dos columnas: los datos de contacto en tarjetas (izquierda) y
   el formulario de Contact Form 7 (derecha). En el original de
   Avada iban al reves y los datos eran una pila de <h2> en
   naranja con imagenes sueltas de Skype y WhatsApp.

   El aviso de proteccion de datos era un fusion_modal, asi que
   ya nacia plegado: aqui es un <details> nativo, sin JS.
   =========================================================== */

.sr-contacto { background: var(--sr-crema); padding: 66px var(--sr-gutter) 72px; }
.sr-contacto .sr-in {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 32px;
	align-items: start;
}

/* ---- Columna de datos ---- */
.sr-datos { display: flex; flex-direction: column; gap: 14px; }
.sr-dato {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: var(--sr-radio);
	box-shadow: var(--sr-sombra);
	padding: 26px 28px;
}
.sr-dato h2 {
	font: 600 11.5px 'Mulish', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #62684E;
	margin: 0 0 10px;
}
.sr-dato p {
	font: 400 16px/1.65 'Mulish', sans-serif;
	color: var(--sr-tinta);
	margin: 0;
}
.sr-dato a { font-weight: 600; }
.sr-dato-cta { margin-top: 16px; }
/* La tarjeta de la visita online es la accion principal de la columna. */
.sr-dato-online { background: var(--sr-salvia); border-color: transparent; }
.sr-dato-online p { color: var(--sr-tinta-suave); font-size: 15px; }

/* ---- Columna del formulario ---- */
/* Punto 49: la casilla del boletín (Mailchimp) dejaba un hueco encima, y los errores de las
   casillas de aceptación salían al tamaño del texto y fuera de su sitio; ahora como los de
   los campos. El CSS de Avada, que sigue cargando, la metía además 1em hacia dentro. */
.sr-cform .mc4wp-checkbox,
.sr-panel .mc4wp-checkbox { display: block; padding-left: 0; }
.sr-cform .wpcf7-not-valid-tip,
.sr-panel .wpcf7-not-valid-tip { font: 600 13px/1.5 'Mulish', sans-serif; margin-top: 4px; }

.sr-cform {
background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: 24px;
	box-shadow: var(--sr-sombra);
	padding: 38px 38px 34px;
}
.sr-cform h2 {
	font: 400 30px/1.15 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 0 0 8px;
}
.sr-cform-intro {
	font: 400 15.5px/1.7 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	margin: 0 0 24px;
}
/* CF7 mete <p> de maquetacion alrededor de cada campo. */
.sr-cform .wpcf7 p,
.sr-panel .wpcf7 p { margin: 0 0 16px; font-family: 'Mulish', sans-serif; }
/* Los labels de campo llevan dentro el texto + <br> + el control. Los de
   checkbox (consentimiento y boletin) llevan <input> + <span> y no deben ir
   en negrita: son texto legal, no una etiqueta de campo. */
.sr-cform .wpcf7 label:not(:has(input[type=checkbox])),
.sr-panel .wpcf7 label:not(:has(input[type=checkbox])) {
	display: block;
	font: 600 13px 'Mulish', sans-serif;
	color: var(--sr-tinta);
	margin-bottom: 6px;
}
.sr-cform .wpcf7 label:has(input[type=checkbox]),
.sr-panel .wpcf7 label:has(input[type=checkbox]) {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font: 400 13.5px/1.6 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
}
/* Sin :has() (Firefox hasta la 120, punto 59): las casillas de CF7 siempre van dentro de
   .wpcf7-list-item (y la del boletín, de .mc4wp-checkbox), y por ahí se distinguen. Los navegadores con :has() no entran aquí. */
@supports not selector(:has(a)) {
	.sr-cform .wpcf7 label,
	.sr-panel .wpcf7 label {
		display: block;
		font: 600 13px 'Mulish', sans-serif;
		color: var(--sr-tinta);
		margin-bottom: 6px;
	}
	.sr-cform .wpcf7 .wpcf7-list-item label,
	.sr-panel .wpcf7 .wpcf7-list-item label,
	.sr-cform .wpcf7 .mc4wp-checkbox label,
	.sr-panel .wpcf7 .mc4wp-checkbox label {
		display: flex;
		align-items: flex-start;
		gap: 9px;
		font: 400 13.5px/1.6 'Mulish', sans-serif;
		color: var(--sr-tinta-tenue);
		margin-bottom: 0;
	}
	.sr-cform .sr-corp-temas .wpcf7-list-item label { font-size: 15px; color: var(--sr-tinta); }
}
.sr-cform .wpcf7 input[type=checkbox],
.sr-panel .wpcf7 input[type=checkbox] { margin-top: .25em; flex: none; }
.sr-cform .wpcf7-list-item,
.sr-panel .wpcf7-list-item { margin: 0; }
.sr-cform .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.sr-cform .wpcf7 textarea,
.sr-cform .wpcf7 select,
.sr-panel .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.sr-panel .wpcf7 textarea,
.sr-panel .wpcf7 select { width: 100%; }
.sr-cform .wpcf7 textarea { min-height: 150px; }
/* El submit se deja a su ancho natural: CF7 lo pinta dentro de un <p> propio
   y a 100% queda desproporcionado en la columna ancha. */

/* ---- Aviso de proteccion de datos ---- */
.sr-lopd {
	margin-top: 22px;
	border-top: 1px solid rgba(38, 48, 42, .1);
	padding-top: 18px;
}
.sr-lopd summary {
	cursor: pointer;
	font: 600 13.5px 'Mulish', sans-serif;
	color: var(--sr-marca);
	list-style: none;
}
.sr-lopd summary::-webkit-details-marker { display: none; }
.sr-lopd summary::before {
	content: "+ ";
	font-weight: 700;
}
.sr-lopd[open] summary::before { content: "– "; }
.sr-lopd p {
	font: 400 13.5px/1.7 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	margin: 14px 0 0;
}

@media (max-width: 1024px) {
	.sr-contacto .sr-in { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 860px) {
	.sr-contacto { padding-left: var(--sr-gutter); padding-right: var(--sr-gutter); }
	/* El formulario primero: es lo que se viene a hacer aqui. */
	.sr-contacto .sr-in { grid-template-columns: 1fr; gap: 20px; }
	.sr-cform { order: -1; padding: 28px 24px 26px; }
	.sr-cform h2 { font-size: 26px; }
}

/* ===========================================================
   FICHAS DE TECNICA (.sr-ficha)
   -----------------------------------------------------------
   Patron comun de /biodescodificacion/, /bioneuroemocion/,
   /biodescodificacion-dental/, /acupuntura/ y /dejar-de-fumar/.
   Son paginas de texto largo, asi que aqui manda la lectura: una
   sola columna a 740px (unos 75 caracteres por linea) en vez de
   los 1148px del resto del sitio, que para leer es demasiado.

   Piezas: .sr-texto (prosa), .sr-destacado (requisitos para la
   consulta), .sr-faq (preguntas frecuentes), .sr-caso (el caso
   real con radiografias de la pagina dental) y .sr-aviso (la
   nota de que esto no sustituye a un medico).
   =========================================================== */

.sr-ficha { background: var(--sr-crema); padding: 62px var(--sr-gutter) 72px; }
/* OJO: el ancho de lectura se limita en .sr-texto, NO en .sr-in. Si se estrecha
   .sr-in, la columna se centra en la pagina y deja de compartir eje con el H1 de
   la cabecera, que va alineado a los 1148px de siempre: el titulo aparece unos
   200px a la izquierda del texto. .sr-in mantiene su ancho y su centrado, y es la
   columna la que se alinea a su borde izquierdo. */
.sr-ficha .sr-texto { max-width: 740px; }

/* ---- Prosa ---- */
.sr-texto h2 {
	font: 400 30px/1.2 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 44px 0 16px;
}
.sr-texto > h2:first-child { margin-top: 0; }
.sr-texto h3 {
	font: 500 21px/1.3 'Spectral', serif;
	color: var(--sr-tinta);
	margin: 32px 0 12px;
}
.sr-texto p {
	font: 400 16.5px/1.8 'Mulish', sans-serif;
	color: var(--sr-tinta-suave);
	margin: 0 0 18px;
}
.sr-texto strong { color: var(--sr-tinta); font-weight: 600; }
.sr-texto ul { list-style: none; margin: 0 0 20px; padding: 0; }
.sr-texto li {
	position: relative;
	font: 400 16.5px/1.75 'Mulish', sans-serif;
	color: var(--sr-tinta-suave);
	padding-left: 20px;
	margin-bottom: 9px;
}
.sr-texto li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .66em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #B9C6A9;
}
/* Entradilla: el primer parrafo de la ficha entra mas grande. */
.sr-entradilla {
	font: 400 19px/1.7 'Mulish', sans-serif !important;
	color: var(--sr-tinta) !important;
	margin-bottom: 26px !important;
}

/* ---- Bloque destacado (requisitos para la consulta) ---- */
.sr-destacado {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: var(--sr-radio);
	box-shadow: var(--sr-sombra);
	padding: 30px 32px;
	margin: 34px 0;
}
.sr-destacado h2,
.sr-destacado h3 { margin-top: 0; font-size: 22px; }
.sr-destacado p,
.sr-destacado li { font-size: 15.5px; }
.sr-destacado :last-child { margin-bottom: 0; }

/* ---- Preguntas frecuentes ---- */
.sr-faq { margin: 34px 0; }
.sr-faq > h2 { margin-bottom: 18px; }
.sr-faq details {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: 16px;
	box-shadow: 0 6px 14px rgba(38, 48, 42, .04);
	padding: 18px 22px;
	margin-bottom: 10px;
}
.sr-faq summary {
	cursor: pointer;
	list-style: none;
	font: 500 17.5px/1.4 'Spectral', serif;
	color: var(--sr-tinta);
	padding-right: 28px;
	position: relative;
}
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -1px;
	font: 400 22px 'Mulish', sans-serif;
	color: var(--sr-marca);
	line-height: 1;
}
.sr-faq details[open] summary::after { content: "–"; }
.sr-faq details p {
	font: 400 15.5px/1.75 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	margin: 14px 0 0;
}

/* ---- Caso real con imagenes ---- */
.sr-caso { margin: 34px 0; }
.sr-caso figure {
	margin: 0 0 18px;
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: 16px;
	box-shadow: 0 6px 14px rgba(38, 48, 42, .04);
	padding: 18px;
}
/* width:auto, NO 100%: las radiografias del caso dental son de 386x288 y la
   tabla de consumo tampoco es grande. A ancho completo de la columna (740px)
   se escalaban al doble y salian borrosas. Se muestran a su tamano real y
   centradas, y solo se encogen si no caben. */
.sr-caso figure img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.sr-caso figcaption {
	font: 400 13.5px/1.6 'Mulish', sans-serif;
	color: var(--sr-tinta-tenue);
	margin-top: 12px;
	text-align: center;
}

/* ---- Aviso legal / disclaimer ---- */
.sr-aviso {
	border-left: 3px solid #DCCFA6;
	background: var(--sr-arena);
	border-radius: 0 16px 16px 0;
	padding: 20px 24px;
	margin: 34px 0 0;
}
.sr-aviso p {
	font: 400 14.5px/1.7 'Mulish', sans-serif;
	color: var(--sr-tinta-suave);
	margin: 0;
}
.sr-aviso p + p { margin-top: 10px; }

/* ---- Listados largos plegados (las tres listas de la OMS) ---- */
.sr-plegable {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: 16px;
	box-shadow: 0 6px 14px rgba(38, 48, 42, .04);
	padding: 18px 22px;
	margin-bottom: 10px;
}
.sr-plegable > summary {
	cursor: pointer;
	list-style: none;
	font: 600 14.5px/1.5 'Mulish', sans-serif;
	color: var(--sr-marca);
	padding-right: 28px;
	position: relative;
}
.sr-plegable > summary::-webkit-details-marker { display: none; }
.sr-plegable > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -2px;
	font: 400 22px 'Mulish', sans-serif;
	line-height: 1;
}
.sr-plegable[open] > summary::after { content: "–"; }
/* Lista larga a dos columnas: son terminos cortos, no prosa. */
.sr-plegable ul {
	columns: 2;
	column-gap: 28px;
	margin: 16px 0 0;
}
.sr-plegable li {
	font-size: 15px;
	break-inside: avoid;
	margin-bottom: 7px;
}

/* Dentro de una tarjeta de formacion el plegable es estrecho: se anulan las
   dos columnas que necesita en las listas largas de la OMS. */
.sr-form-card .sr-plegable {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: var(--sr-crema);
	box-shadow: none;
}
.sr-form-card .sr-plegable ul { columns: 1; margin-top: 12px; }
.sr-form-card .sr-plegable > summary { font-size: 13px; }

/* Botonera de cierre de la ficha, antes de la banda CTA. */
.sr-ficha .sr-btns { margin-top: 34px; }

@media (max-width: 860px) {
	.sr-ficha { padding-left: var(--sr-gutter); padding-right: var(--sr-gutter); }
	.sr-texto h2 { font-size: 26px; }
	.sr-entradilla { font-size: 17.5px !important; }
	.sr-destacado { padding: 24px 24px; }
	.sr-plegable ul { columns: 1; }
}
@media (max-width: 600px) {
	.sr-ficha .sr-btns .sr-btn,
	.sr-ficha .sr-btns .sr-btn-ghost { width: 100%; }
}

/* ===========================================================
   PORTADA CON EL TEXTO DE RICARD (octubre de 2026)
   -----------------------------------------------------------
   Secciones nuevas de content-reference/inicio-kadence-content.html
   (CHANGES.md, punto 46). Las tarjetas reutilizan .sr-grid/.sr-card
   y las bandas .sr-band; aqui solo va lo que no existia.
   Fondos alternos para que dos secciones seguidas no se fundan:
   hueso (#FCFAF5), crema (#F6F2EC) y arena (#F1ECE2).
   =========================================================== */

/* ---- Margenes de Kadence dentro de las secciones de la portada ----
   Kadence da a `.single-content p` y `.single-content h1…h6` margenes propios
   (0 0 32px los parrafos; 1.5em arriba los titulos) con (0,1,1), y eso le gana
   a casi todas las reglas .sr-* de parrafo y titulo, que son una clase sola
   (0,1,0): entre el kicker y el H2 quedaban 89px (32 + 57) en vez de 12.
   Pasa en todo el sitio; aqui se reponen los margenes previstos solo en la
   portada, que es la que se rehace. Ver CHANGES.md, punto 46. */
.home .single-content .sr-badge{margin:0 0 22px}
.home .single-content .sr-h1{margin:0 0 14px}
.home .single-content .sr-hero-sub{margin:0 0 24px}
.home .single-content .sr-lead{margin:0 0 14px}
.home .single-content .sr-lead-strong{margin:0 0 30px}
.home .single-content .sr-kicker{margin:0 0 12px}
.home .single-content .sr-h2{margin:0}
.home .single-content .sr-ocurre .sr-h2{margin:0 0 18px}
.home .single-content .sr-servicios-intro{margin:16px auto 0}
.home .single-content .sr-servicios-intro + .sr-servicios-intro{margin-top:8px}
.home .single-content .sr-ocurre-intro{margin:0 0 20px}
.home .single-content .sr-ocurre-destacado{margin:0 0 18px}
.home .single-content .sr-pill{margin:0 0 18px}
.home .single-content .sr-ornamento{margin:0 auto 12px}
/* Y las listas: `.single-content ul` les mete 34px de sangria y 32px debajo. */
.home .single-content .sr-lista-punto{padding:0;margin:0 0 20px}
.home .single-content .sr-ocurre-panel .sr-lista-check{padding:0;margin:0 0 20px}
.home .single-content .sr-cita-texto{margin:0}
.home .single-content .sr-trabajo-cierre{margin:42px 0 0}
.home .single-content .sr-quien-nombre{margin:0 0 16px}
.home .single-content .sr-quien-destacado{margin:4px 0 20px}
.home .single-content .sr-post-fecha{margin:0 0 10px}
.home .single-content .sr-post-extracto{margin:0 0 18px}

/* ---- Hero: subtitulo y foto ---- */
.sr-hero-sub{font:italic 400 25px/1.3 'Spectral',serif;color:var(--sr-marca);margin:-6px 0 22px;letter-spacing:.01em}
.sr-hero .sr-lead strong{color:var(--sr-tinta);font-weight:600}
/* La foto es vertical (3:4) y la cara queda en el tercio de arriba: cuando la
   caja se vuelve apaisada (movil, 3:2) el recorte centrado le cortaba la frente. */
.sr-hero .sr-figure img{object-position:50% 20%}

/* ---- ¿Qué te está ocurriendo? ---- */
.sr-ocurre{background:var(--sr-hueso);padding:74px 46px}
.sr-ocurre .sr-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sr-ocurre .sr-h2{color:var(--sr-tinta);margin:0 0 18px}
.sr-ocurre-intro{font:400 18px/1.7 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:0 0 20px}
.sr-ocurre-intro strong{color:var(--sr-tinta);font-weight:700}
.sr-lista-punto{list-style:none;margin:0 0 20px;padding:0}
.sr-lista-punto li{position:relative;padding:6px 0 6px 24px;font:400 19px/1.45 'Spectral',serif;color:var(--sr-tinta)}
.sr-lista-punto li::before{content:"";position:absolute;left:3px;top:.95em;width:7px;height:7px;border-radius:50%;background:#7A9A6E}
.sr-ocurre-cierre{font:600 17px/1.6 'Mulish',sans-serif;color:var(--sr-tinta);margin:0;max-width:500px}
.sr-ocurre-panel{max-width:none;margin:0}
.sr-ocurre-destacado{font:400 23px/1.45 'Spectral',serif;color:var(--sr-tinta);margin:0 0 18px}
.sr-ocurre-destacado strong{font-weight:600;color:var(--sr-marca)}
.sr-ocurre-panel .sr-lista-check{margin:0 0 20px}
.sr-ocurre-panel > p:not([class]){font:400 16px/1.8 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:0 0 26px}
.sr-ocurre-panel > p:not([class]) strong{color:var(--sr-tinta);font-weight:600}

/* ---- Tarjetas: varias acciones y rotulo de marca ----
   .sr-card empuja su boton al fondo con margin-top:auto; con dos acciones las
   dos se lo repartian y quedaban separadas. Ahora lo lleva el contenedor. */
.sr-card-acciones{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sr-card .sr-card-acciones .sr-btn-solido,
.sr-card .sr-card-acciones .sr-link{margin-top:0;align-self:auto}
.sr-card .sr-card-marca{font:700 11px 'Mulish',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#62684E;margin:0 0 8px}
/* Tarjetas sin enlace (pasos, empresas): sin el "salto" al pasar el raton, que
   promete un clic que no lleva a ninguna parte. */
.sr-trabajo .sr-card:hover,
.sr-empresas .sr-card:hover{transform:none;box-shadow:var(--sr-sombra)}

/* ---- Un enfoque adaptado a ti ---- */
.sr-cita{background:var(--sr-arena);padding:70px 46px;text-align:center}
.sr-cita .sr-in{max-width:860px}
.sr-cita .sr-kicker{color:#62684E}
.sr-cita-texto{font:400 34px/1.3 'Spectral',serif;color:var(--sr-tinta);margin:0}
.sr-cita-texto em{font-style:italic;color:var(--sr-marca)}

/* ---- Cómo trabajo ---- */
.sr-trabajo{background:var(--sr-hueso);padding-top:74px;padding-bottom:78px}
.sr-trabajo .sr-head-centro{max-width:860px;margin-bottom:40px}
.sr-trabajo .sr-head-centro p strong{color:var(--sr-tinta);font-weight:600}
.sr-trabajo .sr-head-centro p + p{margin-top:12px}
.sr-trabajo .sr-card p{margin-bottom:0}
.sr-trabajo-cierre{text-align:center;font:italic 400 26px/1.3 'Spectral',serif;color:var(--sr-marca);margin:42px 0 0}

/* ---- ¿Quién es Ricard Rodulfo? ---- */
.sr-quien{background:linear-gradient(135deg,var(--sr-arena),var(--sr-hueso));padding:74px 46px}
.sr-quien-panel{display:grid;grid-template-columns:250px 1fr;gap:48px;align-items:start;padding:48px}
.sr-quien-aside{text-align:center}
/* (0,2,1) y despues de `.entry-content img:not(.sr-autor-foto)`, que le pondria
   las esquinas de 14px de las fotos de contenido. */
.entry-content img.sr-quien-foto{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 16px;border:4px solid var(--sr-salvia)}
.sr-quien-nombre{font:500 23px/1.2 'Spectral',serif;color:var(--sr-tinta);margin:0 0 16px}
.sr-quien-aside .sr-chips{justify-content:center;margin:0}
.sr-quien-texto h2{font:400 34px/1.15 'Spectral',serif;color:var(--sr-tinta);margin:0 0 18px}
.sr-quien-texto p:not([class]){font:400 16px/1.8 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:0 0 16px}
.sr-quien-texto p:not([class]) strong{color:var(--sr-tinta);font-weight:600}
.sr-quien-destacado{font:italic 400 21px/1.5 'Spectral',serif;color:var(--sr-tinta);border-left:3px solid #DCCFA6;padding:4px 0 4px 20px;margin:4px 0 20px}
.sr-quien-texto .sr-btn-solido{margin-top:10px}

/* ---- Consulta presencial u online ---- */
.sr-modalidades{background:var(--sr-crema);padding:74px 46px 80px}
.sr-ornamento{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 12px}
.sr-ornamento::before,.sr-ornamento::after{content:"";width:72px;height:1px;background:#CDBF9C}
.sr-ornamento svg{width:26px;height:26px;display:block;fill:none;stroke:var(--sr-marca);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-modalidades .sr-head-centro p strong{color:var(--sr-tinta);font-weight:600}
.sr-modalidades-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sr-modalidad{background:#fff;border:1px solid var(--sr-borde);border-radius:var(--sr-radio);padding:36px 34px 34px;box-shadow:var(--sr-sombra);display:flex;flex-direction:column}
.sr-modalidad-icono{width:64px;height:64px;border-radius:50%;background:var(--sr-salvia);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.sr-modalidad-icono svg{width:30px;height:30px;display:block;fill:none;stroke:var(--sr-marca);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-modalidad h3{font:500 28px/1.2 'Spectral',serif;color:var(--sr-tinta);margin:0 0 14px}
.sr-modalidad p{font:400 16px/1.75 'Mulish',sans-serif;color:var(--sr-tinta-suave);margin:0 0 14px}
.sr-modalidad .sr-btn-solido{margin-top:auto;align-self:flex-start}
.sr-modalidad p + .sr-btn-solido{margin-top:auto}
.sr-modalidad p:last-of-type{margin-bottom:26px}
/* "Pedir cita presencial" va directo a WhatsApp (punto 47): es el botón del plugin, con su
   verde y su icono para que se vea que abre WhatsApp, y con la forma de los de la portada. */
.sr-modalidad-wa{margin-top:auto;align-self:flex-start}
.sr-modalidad-wa .sr-wa-boton{border-radius:12px!important;padding:14px 24px!important;font:700 15px 'Mulish',sans-serif!important;box-shadow:0 8px 18px rgba(33,133,84,.25)!important}
.sr-btn-solido .sr-arrow{display:inline-block;margin-left:6px;transition:transform .18s ease}
.sr-btn-solido:hover .sr-arrow{transform:translateX(4px)}

/* ---- Bienestar para empresas ----
   El ancla #empresas la usan la tarjeta "Bienestar corporativo" y el menu; el
   scroll-margin evita que el titulo quede debajo de la cabecera fija. */
.sr-empresas{background:var(--sr-arena);padding-bottom:56px;scroll-margin-top:110px}
.sr-empresas .sr-servicios-intro + .sr-servicios-intro{margin-top:8px}
.sr-empresas .sr-card p{margin-bottom:12px}
.sr-empresas .sr-card p:last-child{margin-bottom:0}
.entry-content > .sr-band-empresas{background:var(--sr-arena);margin:0;padding:0 46px 78px}

@media (max-width:1024px){
	.sr-quien-panel{grid-template-columns:210px 1fr;gap:36px}
	.sr-cita-texto{font-size:30px}
}
@media (max-width:860px){
	.sr-ocurre,.sr-cita,.sr-quien,.sr-modalidades{padding-left:28px;padding-right:28px}
	.entry-content > .sr-band-empresas{padding:0 28px 64px}
	.sr-ocurre .sr-in{grid-template-columns:1fr;gap:32px}
	.sr-quien-panel{grid-template-columns:1fr;gap:28px;padding:36px 28px}
	.sr-modalidades-grid{grid-template-columns:1fr}
	.sr-hero-sub{font-size:22px}
	.sr-cita-texto{font-size:27px}
	.sr-quien-texto h2{font-size:30px}
}
@media (max-width:600px){
	.sr-ocurre,.sr-cita,.sr-quien,.sr-modalidades{padding:56px 20px}
	.sr-sec.sr-trabajo{padding:56px 20px}
	.entry-content > .sr-band-empresas{padding:0 20px 52px}
	.sr-panel.sr-quien-panel{padding:30px 22px}
	.sr-modalidad{padding:28px 22px}
	.sr-modalidad h3{font-size:24px}
	.sr-lista-punto li{font-size:18px}
	.sr-ocurre-destacado{font-size:21px}
	.sr-cita-texto{font-size:23px}
	.sr-trabajo-cierre{font-size:22px}
	.sr-card-acciones{align-items:stretch}
	.sr-modalidad .sr-btn-solido,.sr-modalidad-wa{align-self:stretch}
	.sr-modalidad-wa .sr-wa-boton{width:100%;justify-content:center}
}

/* ---- Menu principal entre 1025 y 1240px ----
   Con la pestaña "Bienestar corporativo" (punto 46) el primer nivel mide unos 1009px y
   por debajo de ~1230px de ventana se partia en dos filas. Kadence pasa al menu movil por
   debajo de 1025, asi que solo hay que apretarlo en ese tramo. */
@media (min-width:1025px) and (max-width:1240px){
	#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a{padding-left:6px;padding-right:6px;font-size:14px}
}

/* ===========================================================
   ANCHO DE LAS PAGINAS DE WOOCOMMERCE
   -----------------------------------------------------------
   La tienda no usa el layout fullwidth del resto del sitio (tiene
   sus propios ajustes de plantilla), asi que su contenedor se
   quedaba en el ancho por defecto de Kadence: 1290px con 24px de
   padding, o sea 1242px utiles empezando en x=652. El H1 de la
   cabecera si va a los 1148px de siempre, en x=699: la rejilla de
   productos quedaba 47px a la izquierda de su propio titulo.

   Se iguala al eje del resto del sitio sumando el gutter al ancho
   util, para que el contenido caiga exactamente en 1148px.
   =========================================================== */

.woocommerce .content-container.site-container,
.woocommerce-page .content-container.site-container {
	max-width: calc(var(--sr-ancho) + (var(--sr-gutter) * 2));
	padding-left: var(--sr-gutter);
	padding-right: var(--sr-gutter);
}

/* Ficha de producto: la cabecera tapaba 16px de las migas de pan (punto 52). Kadence las sube
   1rem (`.single-product .kadence-breadcrumbs{margin-top:-1rem}`, woocommerce.min.css) contando
   con los 5rem que da a .content-area; este tema deja ese margen a 0 (".content-area", arriba),
   asi que el -1rem atravesaba #primary y metia las migas debajo de la cabecera. El aire va
   ahora en el contenedor, con lo que tambien lo tiene un aviso de WooCommerce que salga encima. */
.single-product .content-area { padding-top: 24px; }
.single-product .kadence-breadcrumbs { margin-top: 0; }
@media (max-width: 767px) {
	.single-product .content-area { padding-top: 16px; }
}

/* ===========================================================
   CONTRASTE AA Y FOCO VISIBLE (punto 49)
   -----------------------------------------------------------
   El contrato pide WCAG AA. Los colores de texto de las
   secciones .sr-* ya se han corregido en su sitio (busca
   "punto 49" en este archivo); aqui va lo que no tiene sitio
   propio: los textos atenuados que pinta Kadence, los
   :hover sobre el verde profundo y el anillo de foco.
   =========================================================== */

/* Kadence usa palette6 como "texto atenuado": metadatos y categorias del producto, migas de
   WooCommerce, el "(incluye … IVA)" del carrito, notas, ayuda de las pasarelas y el texto de
   ejemplo de los campos. En la paleta del proyecto palette6 es un salvia claro pensado para
   adornos (#7A9A6E) y como texto daba 3,15:1 en blanco. Se oscurece al mismo tono que
   --sr-salvia-texto: 5,5:1 en blanco y 4,66:1 en salvia. Los adornos que usaban ese salvia
   (puntos de lista, el punto de la etiqueta del hero) lo llevan escrito a mano y no cambian.
   El valor vive en la paleta de Kadence: content-reference/aplicar-ajustes-kadence.php
   (palette6 = #556D4C desde el punto 49). */

/* Los iconos sociales de la topbar y del pie se ponian en palette11 (verde WhatsApp) al pasar
   el raton: 3,2:1 sobre el verde profundo, y menos aun con el verde nuevo del boton. Se ponen
   en arena, como los enlaces del pie. Mismos selectores que la CSS que imprime Kadence, que va
   antes que esta hoja. */
.header-social-wrap .header-social-inner-wrap .social-button:hover,
.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap .social-button:hover {
	color: var(--global-palette12, #DCCFA6);
	border-color: var(--global-palette12, #DCCFA6);
}

/* Menu movil: la pagina actual salia en palette-highlight (el verde marca) sobre el fondo casi
   negro del cajon, 2,8:1. En arena, como los titulos del pie: 12,6:1. Mismos selectores que
   Kadence, que va antes. */
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--global-palette12, #DCCFA6);
}

/* La "×" de quitar un producto del carrito y el asterisco de los campos obligatorios del pago:
   el rojo puro de Kadence da 4:1 en blanco. Este rojo, 6,6:1. */
.woocommerce .form-row .required { color: #B42318; }
.woocommerce a.remove { color: #B42318 !important; }
.woocommerce a.remove:hover { color: #fff !important; background: #B42318; }

/* ---- Foco visible ----
   Antes dependia del anillo por defecto del navegador, que en los fondos verdes casi no se
   ve, y en los campos era un halo al 14 %. Ahora todo lo que se puede tabular lleva un anillo
   de 2px separado 3px del elemento: verde marca en los fondos claros (6,2:1 sobre crema) y
   crema en los oscuros (topbar, pie, menu movil, submenus, bandas verdes). Solo con
   :focus-visible, asi que no aparece al hacer clic con el raton. Los campos de texto del
   contenido tienen su propio foco mas arriba (borde y halo macizos), y los botones de WhatsApp
   el suyo en el plugin. Los campos que quedan fuera de .entry-content (el "Ordenar" de la
   tienda, la cantidad de la ficha de producto) solo cambiaban el color del borde: llevan este
   anillo. El :not([type="hidden"]) es para pesar lo mismo que la regla de Kadence que quita
   el outline (input[type=text]:focus y compañía), que va antes que esta hoja. */
:root { --sr-foco: var(--sr-marca); --sr-foco-oscuro: #F6F2EC; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sr-foco);
	outline-offset: 3px;
}
/* En las tarjetas con overflow hidden (entradas del blog, productos) un anillo por fuera del
   enlace queda recortado: ahi va por dentro. */
.sr-post-media:focus-visible,
.woocommerce ul.products li.product a:focus-visible,
.loop-entry a:focus-visible {
	outline-offset: -3px;
}
/* Imagen grande de la ficha de producto: el enlace es inline dentro de una caja con overflow
   hidden y su anillo no se veia. Se le pinta a la imagen, por dentro, sin mover nada. */
.woocommerce-product-gallery__image a:focus-visible {
	outline: none;
}
.woocommerce-product-gallery__image a:focus-visible img {
	outline: 2px solid var(--sr-foco);
	outline-offset: -3px;
}
/* "Añadir al carrito" de las tarjetas de la tienda: el anillo va por dentro y el boton es verde,
   asi que en verde no se veia. En crema, separado del borde. */
.woocommerce ul.products li.product a.button:focus-visible {
	outline-color: var(--sr-foco-oscuro);
	outline-offset: -5px;
}
/* Sobre fondo oscuro, el anillo en crema. */
.site-top-header-wrap :focus-visible,
.site-footer :focus-visible,
#mobile-drawer :focus-visible,
.header-navigation ul ul :focus-visible,
.sr-band :focus-visible,
.sr-libro :focus-visible {
	outline-color: var(--sr-foco-oscuro);
}
/* En el menu movil y en los submenus cada enlace ocupa todo el ancho y van pegados: por dentro. */
#mobile-drawer a:focus-visible,
#mobile-drawer button:focus-visible,
.header-navigation ul ul a:focus-visible {
	outline-offset: -3px;
}
/* Enlace "Saltar al contenido" de Kadence: el suyo es un cuadro gris con texto azul. */
.skip-link.screen-reader-text:focus {
	background: var(--sr-crema);
	color: var(--sr-marca);
	outline: 2px solid var(--sr-foco);
	outline-offset: 2px;
}

/* ===========================================================
   Lo que hacía el CSS personalizado de Avada
   -----------------------------------------------------------
   Ricard no tiene licencia de Avada y Fusion Builder y Fusion
   Core se retiran (CHANGES.md, punto 51). Con ellos se va la
   hoja de Avada y su "CSS personalizado" (Opciones del tema).
   De sus reglas, solo estas afectaban a la web nueva; aquí
   siguen igual. El resto era para elementos de Avada.
   =========================================================== */

/* Las entradas antiguas llevan el texto dentro de un div.post-content (de cuando eran de
   Avada): párrafos juntos y subtítulos h4 en casi negro. */
.post-content p { margin-top: 0 !important; margin-bottom: 8px !important; }
.post-content h4 { color: #0e0e0e !important; }

/* La pestaña "Descripción" de la ficha repite el texto corto. */
.woocommerce-tabs { display: none; }
/* Separación entre las tarjetas de la tienda. */
.products > li { margin-bottom: 22px !important; }
/* Campos del vale regalo en la ficha. */
.voucher-fields { padding-right: 20px; }
/* El sello de reCAPTCHA (abajo a la derecha, encima del botón de WhatsApp). */
.grecaptcha-badge { display: none; }

/* Y dos cosas que ponía la hoja de Fusion (no el CSS personalizado) y que sin ella se pierden:
   - en la ficha, la cantidad tenía un ancho fijo pensado para los botones +/- de Avada, que
     aquí no salen, y dejaba un hueco antes de "Añadir al carrito"; sin él quedaban pegados. */
.single-product div.product form.cart div.quantity { margin-right: 16px; }
/* - la respuesta de Contact Form 7 ("enviado" o "falta algún dato") tenía caja de color; sin
     Fusion sale el recuadro amarillo por defecto del plugin. Ahora, como los avisos de
     WooCommerce con Kadence: crema con raya verde (enviado) o roja (falta algo o error). */
.wpcf7 form .wpcf7-response-output {
	margin: 1.5em 0 0;
	padding: 21px 34px;
	border: 0;
	border-left: 5px solid #40614E;
	border-radius: 0;
	background: #F1ECE2;
	color: #26302A;
	font: 400 16px/1.6 'Mulish', sans-serif;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-left-color: #B42318; }

/* ===========================================================
   BIENESTAR CORPORATIVO (.sr-corporativo)
   -----------------------------------------------------------
   /bienestar-corporativo/, con el texto de Ricard (CHANGES.md,
   punto 53). Es una ficha (.sr-ficha, columna de 740px) con lo
   suyo: el lema bajo el título, las áreas de formación a dos
   columnas, el botón de WhatsApp en las botoneras y el formulario
   de empresas, que es la tarjeta de /contacto/ (.sr-cform) puesta
   fuera de .sr-texto para que esta no le cambie titulares ni
   párrafos.
   =========================================================== */

/* El lema ("Cuidar al trabajador…") es el subtítulo del H1, como el de la portada
   (.sr-hero-sub). Con .sr-texto delante para ganar a `.sr-texto p`. */
.sr-texto .sr-corp-lema{font:italic 400 25px/1.3 'Spectral',serif;color:var(--sr-marca);margin:0 0 22px}

/* Las listas cortas de Ricard ("Dolor. Absentismo…") van como la de "¿Qué te está ocurriendo?"
   de la portada; `.sr-texto li` les añadía 9px más por fila. */
.sr-corporativo .sr-lista-punto li{margin-bottom:0}

/* Las ocho áreas de formación: términos cortos, a dos columnas. */
.sr-texto .sr-corp-areas{columns:2;column-gap:28px}
.sr-texto .sr-corp-areas li{break-inside:avoid}

.sr-corporativo .sr-destacado .sr-btns{margin-top:22px}

/* El botón de WhatsApp del plugin lleva estilos en línea: aquí toma la forma de .sr-btn, como
   "Pedir cita presencial" en la portada (punto 47). */
.sr-corporativo .sr-btns .sr-wa-boton{border-radius:12px!important;padding:13px 22px!important;font:700 14px 'Mulish',sans-serif!important;box-shadow:0 8px 18px rgba(33,133,84,.25)!important}

.sr-texto .sr-corp-firma{margin:26px 0 0;color:var(--sr-tinta)}

/* El formulario va en su sección (#solicitar-propuesta), en arena como la de empresas de la
   portada, con la tarjeta al ancho de la columna de texto. Al saltar al ancla Kadence descuenta
   solo 60px (la fila principal encogida) y no los 48px de la barra superior, que también es
   fija: los 62px de relleno de .sr-ficha son los que quedan debajo de la cabecera. Sin JS, el
   navegador usa scroll-margin-top. */
.sr-ficha.sr-corp-form-sec{background:var(--sr-arena);scroll-margin-top:60px}
.sr-corp-form{max-width:740px}

/* Las cuatro casillas del tema: un grupo con su leyenda (no son texto legal, así que a 15px y
   en tinta, no como las de privacidad), una por línea. */
.sr-cform .sr-corp-temas{border:0;margin:0 0 16px;padding:0;min-width:0}
.sr-cform .sr-corp-temas legend{font:600 13px 'Mulish',sans-serif;color:var(--sr-tinta);padding:0;margin:0 0 8px}
.sr-cform .sr-corp-temas p{margin-bottom:0}
.sr-cform .sr-corp-temas .wpcf7-list-item{display:block;margin:0 0 6px}
.sr-cform .sr-corp-temas label:has(input[type=checkbox]){font-size:15px;color:var(--sr-tinta)}

@media (max-width:860px){
	.sr-texto .sr-corp-lema{font-size:22px}
}
@media (max-width:600px){
	.sr-texto .sr-corp-areas{columns:1}
	.sr-corporativo .sr-btns .sr-wa-boton{width:100%;justify-content:center}
}

/* ---- Ficha de la primera visita: el precio en tarjeta, como en /solicitar-visita/ (punto 53) ----
   saludricard_ficha_precio_abre() / _cierra() (functions.php) envuelven el <p class="price"> de
   WooCommerce en .sr-ficha-precio, con el rótulo (.sr-pill) arriba y la duración
   (.sr-precio-meta) debajo. La cifra copia .sr-precio-cifra: Spectral 62px en verde marca y el €
   volado. El !important es para ganar a `.woocommerce .price` (16px, con !important), que sigue
   valiendo para el resto de fichas y para la tienda. */
.sr-ficha-precio {
	background: #fff;
	border: 1px solid var(--sr-borde);
	border-radius: var(--sr-radio);
	box-shadow: var(--sr-sombra);
	padding: 26px 24px 22px;
	margin: 20px 0 28px;
	text-align: center;
}
.sr-ficha-precio .sr-pill { margin: 0 0 14px; }
.woocommerce div.product .sr-ficha-precio p.price {
	font: 400 62px/1 'Spectral', serif !important;
	letter-spacing: -.02em;
	color: var(--sr-marca) !important;
	margin: 0 0 10px;
}
.sr-ficha-precio .woocommerce-Price-currencySymbol {
	font-size: 26px;
	vertical-align: super;
	margin-left: 2px;
}
.sr-ficha-precio .woocommerce-price-suffix {
	display: block;
	margin-top: 8px;
	font: 400 14px 'Mulish', sans-serif;
	letter-spacing: 0;
	color: var(--sr-tinta-suave);
}
.sr-ficha-precio .sr-precio-meta { margin: 14px 0 0 !important; }

/* ===========================================================
   PREGUNTAS FRECUENTES (/preguntas-frecuentes/, punto 53)
   -----------------------------------------------------------
   Es una ficha (.sr-ficha > .sr-texto) con cada pregunta en un
   h3 visible y enlazable por su id, y un índice al principio
   (.sr-indice, sobre .sr-destacado).
   =========================================================== */
/* Una raya fina separa cada pregunta de la anterior; la primera de cada
   bloque va pegada a su h2. */
.sr-preguntas .sr-texto h3 { padding-top: 26px; border-top: 1px solid var(--sr-borde); }
.sr-preguntas .sr-texto h2 + h3 { padding-top: 0; border-top: 0; }
/* Índice a dos columnas: son siete enlaces cortos. */
.sr-indice ul { columns: 2; column-gap: 32px; }
.sr-indice li { break-inside: avoid; }
/* El botón de WhatsApp dentro de una botonera, con la forma y el tamaño
   de .sr-btn (el plugin le pone los suyos en línea). */
.sr-btns .sr-wa-boton { border-radius: 12px !important; padding: 13px 22px !important; font: 700 14px 'Mulish', sans-serif !important; box-shadow: 0 8px 18px rgba(33, 133, 84, .25) !important; }
.sr-btns .sr-wa-boton svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
	.sr-indice ul { columns: 1; }
	.sr-btns .sr-wa-boton { width: 100%; justify-content: center; }
}