/*
Theme Name: Craftis Child Theme
Theme URI: https://craftis.themerex.net/
Description: Craftis is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.18.1
Tested up to: 6.8.2
Requires at least: 5.5
Requires PHP: 7.4
Engine: 1.77.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
Text Domain: craftis
Template: craftis
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* ════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA DE JANA SPA
   Qwenzy para títulos · JUST Sans para texto corrido.
   Sustituyen a Lora y Open Sans, que el tema cargaba desde Google Fonts;
   esa petición externa se elimina en functions.php (dequeue del handle
   `craftis-font-google_fonts`), así que estas dos son las únicas fuentes.

   Diferencia importante entre las dos familias:

   · **JUST Sans trae 7 pesos REALES** (200 ExLight a 800 ExBold), así que
     cada uno se declara con su archivo. El navegador elige el trazo
     dibujado por el tipógrafo y no simula nada: <strong> usa el Bold de
     verdad. Solo descarga los pesos que la página realmente usa.

   · **Qwenzy tiene un solo peso (400)**. Se declara `font-weight: 100 900`
     para que, al cubrir todo el rango, el navegador NUNCA sintetice una
     negrita falsa: los títulos siempre se dibujan con el trazo real. En una
     tipografía de display el engordado sintético se ve sucio.

   Notas sobre Qwenzy:
   · Solo se entregó en .otf y .woff2 (sin .woff). No es problema: woff2 lo
     soporta cualquier navegador desde 2016.
   · El paquete traía además `Qwenzy-SVG`, que es una fuente de COLOR (tabla
     `SVG `): pesa 2.4× más, no se puede recolorear con CSS y su soporte es
     irregular. Por eso se usa la versión normal.
   · **Sin ligaduras, por pedido del cliente.** Qwenzy no declara la feature
     `liga` en su GSUB (a diferencia de Havinia, que sí la traía), así que
     en teoría no habría nada que apagar; se desactivan igual de forma
     explícita para que el resultado no dependa de la fuente ni del
     navegador. `font-variant-ligatures` cubre el caso estándar y
     `font-feature-settings` remata las que algunos motores aplican por su
     cuenta (`liga` comunes, `clig` contextuales, `dlig` discrecionales y
     `calt` alternativas contextuales).
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: 'Qwenzy';
	src: url('fonts/Qwenzy/Qwenzy.woff2') format('woff2');
	font-weight: 100 900;   /* ver nota: evita la negrita sintética */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-ExLight.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-ExLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-Light.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-Regular.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-Medium.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-SemiBold.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-Bold.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'JUST Sans';
	src: url('fonts/JUSTSans/JUSTSans-ExBold.woff2') format('woff2'),
	     url('fonts/JUSTSans/JUSTSans-ExBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ── Texto corrido: JUST Sans ───────────────────────────────────────── */
body,
button,
input,
select,
textarea,
.sc_layouts_menu_nav,
.elementor-widget-text-editor,
.elementor-widget-container p,
/* El tema fija Open Sans en los botones con `.sc_button, .sc_button_simple,
   .sc_form button`. Un selector de elemento (`button`) no le gana a una clase,
   así que hay que repetir las suyas: con igual especificidad manda esta hoja,
   que Craftis carga después (prioridad 1500 vs 1000). */
.sc_button,
.sc_button_simple,
.sc_form button {
	font-family: 'JUST Sans', 'Open Sans', sans-serif;
}

/* ── Títulos: Qwenzy (sin ligaduras) ──────────────────────────────────
   OJO: los H4 quedan FUERA a propósito — van en la secundaria, ver el
   bloque siguiente. */
h1, h2, h3, h5, h6,
.sc_item_title,
.sc_title_title,
.elementor-heading-title,
.sc_action_item_title,
.sc_skills_item_title,
.elementor-tab-title,
.elementor-accordion-title,
.trx_popup_title {
	font-family: 'Qwenzy', 'Lora', serif;
	font-variant-ligatures: none;
	font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0, 'calt' 0;
}

/* ── H4: tipografía SECUNDARIA ─────────────────────────────────────────
   Los H4 son los títulos de ficha (`sc_icons_item_title`): frases cortas
   que se leen de un vistazo dentro de una rejilla. Ahí Qwenzy, que es una
   serif de display, compite con los H2 de la sección; JUST Sans tiene más
   cuerpo a tamaños medios y deja la jerarquía clara.

   Se nombra la clase además de `h4` porque el tema aplica la fuente por
   clase, y sin repetirla el selector de elemento perdería. */
h4,
.sc_icons_item_title,
h4.sc_icons_item_title {
	font-family: 'JUST Sans', 'Open Sans', sans-serif;
	/* Se conserva el 600 (SemiBold) del tema. JUST Sans entrega los 7 pesos
	   como archivos REALES, así que es el trazo que dibujó el tipógrafo, no
	   un engordado sintético. El peso visual se corrigió bajando el TAMAÑO,
	   no el grosor — ver el bloque de tamaño más abajo. */
	font-weight: 600;
	font-variant-ligatures: normal;
	font-feature-settings: normal;
}

/* Las cifras de los contadores las pinta el tema con una lista de selectores
   de doble clase, que gana a `.sc_skills_total` a secas. Se iguala el peso. */
.sc_skills_counter .sc_skills_total {
	font-family: 'Qwenzy', 'Lora', serif;
	font-variant-ligatures: none;
	font-feature-settings: 'liga' 0, 'clig' 0, 'dlig' 0, 'calt' 0;
}

/* Centrar verticalmente los items del header custom (logo, menú, carrito).
   Por default el row de Elementor usa align-items: stretch y los widgets
   quedan pegados al top — esto los centra al alto disponible. */
.top_panel_custom .sc_layouts_row,
.top_panel_custom .elementor-section .elementor-container,
.top_panel_custom .elementor-row {
	align-items: center;
}
.top_panel_custom .elementor-column,
.top_panel_custom .elementor-column-wrap,
.top_panel_custom .elementor-widget-wrap {
	align-content: center;
	justify-content: center;
}

/* Header overlay (header_position_over): el header es transparente sobre el
   hero/slider. Por default su <header> captura clicks en TODA su área
   (incluyendo las zonas vacías transparentes), bloqueando los botones y
   controles del slider que están debajo. Solución: pointer-events:none en el
   contenedor del header y pointer-events:auto solo en los items interactivos. */
.header_position_over .top_panel,
.header_position_over .top_panel .sc_layouts_row,
.header_position_over .top_panel .elementor-section,
.header_position_over .top_panel .elementor-container,
.header_position_over .top_panel .elementor-column,
.header_position_over .top_panel .elementor-widget-wrap {
	pointer-events: none;
}
.header_position_over .top_panel .sc_layouts_logo,
.header_position_over .top_panel .sc_layouts_menu_nav,
.header_position_over .top_panel .sc_layouts_menu,
.header_position_over .top_panel .sc_layouts_item,
.header_position_over .top_panel .elementor-widget,
.header_position_over .top_panel a,
.header_position_over .top_panel button,
.header_position_over .top_panel input,
.header_position_over .top_panel select,
.header_position_over .top_panel textarea,
.header_position_over .top_panel [role="button"] {
	pointer-events: auto;
}

/* Padding razonable de .page_content_wrap en páginas internas (skin soap
   default = 8.33rem ~133px, muy excesivo).

   Se excluyen las páginas con hero a sangre (`jana-hero-propio`, la marca la
   pone functions.php): ahí ese respiro superior dejaba una franja clara entre
   la barra del menú y el hero. Abajo sí se conserva. */
body.page:not(.home):not(.frontpage):not(.elementor-page-41) .page_content_wrap {
	padding-top: 5rem;
	/* El aire ANTES DEL PIE lo pone el propio pie, con su espaciador de 122px
	   (así lo trae el layout original). Si además se dejara aquí un relleno
	   inferior, las interiores acabarían con el doble de separación que la
	   portada —que no lo tiene, porque lleva `remove_margins`— y era justo la
	   diferencia que se veía: en unas el logo pegado y en otras no. */
	padding-bottom: 0;
}

/* La cadena de `:not()` se repite a propósito: sin ella este selector queda
   en (0,2,1) y pierde contra la regla de arriba, que con sus tres `:not()`
   llega a (0,4,1). El aire de ABAJO se conserva. */
body.page.jana-hero-propio:not(.home):not(.frontpage):not(.elementor-page-41) .page_content_wrap {
	padding-top: 0;
}

/* Reemplazo de reglas que originalmente dependían de .header_position_under
   (las quitamos del body via body_class filter en functions.php para evitar
   que el JS de Craftis aplique margin-top/margin-bottom dinámicos basados en
   header_height + footer_height — que con footer custom alto squeezean el
   contenido). Las posiciones/z-index sí los necesitamos. */
.header_position_static .top_panel {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}
.header_position_static .page_content_wrap {
	position: relative;
	z-index: 4;
}
.header_position_static .footer_wrap {
	position: relative;
	z-index: 3;
}

/* Fix de stacking context — el contenido Elementor de páginas internas
   estaba subiendo encima del header/breadcrumb al hacer scroll por
   z-index inadecuado. Forzamos al header arriba y al contenido a 'auto'. */
header.top_panel,
.top_panel,
.top_panel_default,
.top_panel_custom {
	position: relative;
	z-index: 9000 !important;
}
header .sc_layouts_row,
header .top_panel_title {
	position: relative;
	z-index: 9000 !important;
}
.page_content_wrap,
.page_content_wrap .content_wrap,
.page_content_wrap .content,
article.post_item_single,
article.post_item_single > .post_content,
article.post_item_single > .post_content > .elementor,
article.post_item_single > .post_content > .elementor > .elementor-section {
	position: relative;
	z-index: 1 !important;
	isolation: auto;
}
/* También: si la página está hecha con Elementor, el primer section no debe
   añadir padding-top extra (ya hay aire suficiente del breadcrumb arriba). */
body.page:not(.home):not(.elementor-page-41) .page_content_wrap .elementor > .elementor-section:first-child {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Y el article wrapper también; Craftis a veces le añade padding por defecto */
body.page:not(.home):not(.elementor-page-41) .content > article.post_item_single {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Defensa del logo del header — el SVG (`logo.svg`) trae width="100%" height="100%"
   sin viewBox-derived intrinsic size; algunos browsers lo colapsan a 0×0 al cargarlo
   como <img>. Forzamos altura fija (45px) y width:auto para que el browser
   calcule el ancho proporcional desde el viewBox. */
header .sc_layouts_logo,
.top_panel .sc_layouts_logo,
header a.sc_layouts_logo,
.top_panel a.sc_layouts_logo {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: #9A5751 !important;   /* paleta: rosa profundo */
}
header .sc_layouts_logo img,
.top_panel .sc_layouts_logo img,
header .sc_layouts_logo svg,
.top_panel .sc_layouts_logo svg {
	height: 60px !important;
	width: auto !important;
	max-width: 260px !important;
	visibility: visible !important;
	opacity: 1 !important;
	display: inline-block !important;
}

/* Logo del menú móvil: dimensiones base del <img> default del theme. Si el
   usuario configura "Logo (menú móvil/tablet)" en Theme Options, la regla
   dinámica en wp_head oculta este <img> y pinta el logo elegido como
   background-image en el <a class="sc_layouts_logo">. */
.menu_mobile .sc_layouts_logo {
	display: inline-block;
	margin-bottom: 1.5em;
}
.menu_mobile .sc_layouts_logo img {
	max-height: 70px;
	width: auto;
	height: auto;
}

/* COLORES dinámicos del encabezado, menú, buscador e iconos:
   los maneja functions.php → craftis_child_custom_header_css(), que imprime
   un <style id="craftis-child-custom-header-css"> en wp_head con los valores
   de Apariencia → Personalizar → "Encabezado personalizado (LUNA)".
   Las transitions de los íconos animados (X cerrar, burger, lupa) las maneja
   el theme con `transition: all 0.3s` — NO sobrescribirlas aquí. */
/* ────────────────────────────────────────────────────────────────────────
   HOME (#41) · Sección "Cifras"
   El repetidor de trx_sc_skills en Elementor NO expone el campo `units`
   (solo lo tiene la versión shortcode del widget), así que el "+" de las
   dos primeras cifras —que son mínimos redondeados a la baja, no datos
   exactos— se añade aquí. Anclado a la clase `jana-cifras` que lleva la
   sección, no a un ID de Elementor, para que sobreviva a los rebuilds.

   Cada cifra es su propio widget (patrón de la demo "Product Gallery": un
   contador por columna, no cuatro valores en un widget), así que basta con
   marcar los que llevan "+" con la clase `jana-mas`.
   ──────────────────────────────────────────────────────────────────────── */
.jana-mas .sc_skills_total::after {
	content: "+";
}

/* ────────────────────────────────────────────────────────────────────────
   HOME (#41) · Imágenes posicionadas del layout "Product Gallery"

   ⚠️ 2026-08-19: el hero de la home YA NO usa `custom_image_position` (pasó
   al Slider Home 1 de Revolution Slider, ver más abajo). La regla de la
   imagen queda sin efecto; el `overflow-x: clip` se conserva como red de
   seguridad contra cualquier sangrado futuro.

   El tema saca estas imágenes fuera del contenedor a propósito
   (`.custom_image_position{right:-8rem}`) para que sangren por el borde.
   Pero a `.custom_image_position` NO le puso `max-width` en escritorio
   —a diferencia de sus hermanas `-grid` (30rem) y `-grid-2` (39rem)—:
   da por hecho que la foto mide ~570 px. Con una imagen más ancha, el
   wrapper del widget se estira a todo el ancho del contenedor y provoca
   scroll horizontal en toda la página.

   Se acota el wrapper y se recorta el sangrado con overflow-x:clip
   (`clip` y no `hidden`: `hidden` crearía un contenedor de scroll que
   rompería el position:sticky del encabezado).
   ──────────────────────────────────────────────────────────────────────── */
.elementor-page-41 .custom_image_position {
	max-width: min(570px, 100%);
}
.elementor-page-41 .page_content_wrap {
	overflow-x: clip;
}

/* ────────────────────────────────────────────────────────────────────────
   HOME (#41) · Mosaico de categorías (trx_sc_action tipo `grid`)

   El tema define la retícula de 4 piezas en __plugins.css
   (`.sc_item_count_4{grid-template-columns:1fr 1fr 1fr 1fr}`) pero en
   __responsive.css SOLO adaptó la de 5 —el caso de su demo—. Sin esto, en
   móvil se mantienen las 4 columnas y cada pieza queda en ~49 px.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.sc_action_grid .sc_item_count_4 {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 20rem 14rem 14rem;
	}
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+1) { grid-column: 1 / 3; grid-row: 1; }
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+2) { grid-column: 1 / 3; grid-row: 2; }
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+3) { grid-column: 1;     grid-row: 3; }
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+4) { grid-column: 2;     grid-row: 3; }
}

@media (max-width: 767px) {
	.sc_action_grid .sc_item_count_4 {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 15rem);
	}
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+1) { grid-column: 1; grid-row: 1; }
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+2) { grid-column: 1; grid-row: 2; }
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+3) { grid-column: 1; grid-row: 3; }
	.sc_action_grid .sc_item_count_4 .sc_action_item_grid:nth-child(4n+4) { grid-column: 1; grid-row: 4; }
}

/* En pantalla táctil NO hay hover: el título y el enlace de cada pieza
   —que el tema deja en opacity:0 hasta el :hover— serían inalcanzables.
   Se muestran siempre y se baja la máscara para que la foto se siga viendo. */
@media (hover: none), (max-width: 767px) {
	.sc_action_grid .sc_action_item .sc_action_item_inner {
		opacity: 1;
	}
	.sc_action_grid .sc_action_item .mask:not(.services_bg_image) {
		opacity: 0.55;
	}
}

/* ── El mosaico de categorías: el CTA como objetivo táctil ────────────────
   El tema marca como enlace ÚNICAMENTE el texto «Ver tratamientos»: medido en
   móvil, 151×15px dentro de una tarjeta de 280×320. Quince píxeles de alto
   quedan por debajo del mínimo de la WCAG (2.5.8 pide 24×24) y, sobre todo,
   se pulsa mal.

   Se le da aire vertical, que sube el objetivo a ~40px sin mover el texto de
   sitio (el relleno crece hacia fuera de la línea base). El ancho se deja
   como está: el «+» del tema es un pseudo-elemento anclado al borde derecho
   del enlace y estirarlo lo separaría del texto.

   ⚠️ NO usar `::before` ni `::after` de este enlace para agrandar el área:
   los DOS los ocupa el tema para dibujar ese «+» y su animación de hover
   (`skins/soap/css/style.css:1036`). Se probó y desaparecía el signo.

   El `!important` es obligado: el tema declara `padding: 0 1.1111rem 0 0
   !important` en la ABREVIADA (`style.css`, «Simple button»), y una abreviada
   con `!important` gana a una longhand sin él por mucho que esta hoja cargue
   después. Se tocan solo las dos longhands verticales, así que el relleno
   derecho que reserva sitio al «+» queda intacto. */
.sc_action_grid .sc_action_item_link {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}

/* Entradilla de "Nuestra historia": texto corrido con cuerpo mayor. Sustituye
   al <h5> que usa el demo para este párrafo — que no es un título. */
.jana-entradilla p {
	font-size: 1.25em;
	line-height: 1.6;
}

/* Franja «Nuestra historia»: la MITAD IZQUIERDA es la foto de la recepción,
   puesta como fondo de ESA columna (así lo arma la demo del tema). En
   escritorio la columna se estira sola al alto de la fila, pero al apilarse
   en móvil se queda sin contenido y colapsaría a 0 px: la foto desaparecería.
   Por eso se le reserva alto, solo en el punto en que se apila. */
@media (max-width: 767px) {
	.jana-historia-foto {
		min-height: 320px;
	}
}

/* Reseñas de la home: van SIN AUTOR. La clienta entregó los textos sin
   nombres, y la plantilla del tema imprime SIEMPRE el bloque del autor —un
   <h4> con el título de la entrada, que aquí va vacío—. Se apaga entero para
   que no quede ni el hueco ni un encabezado fantasma en el esquema. Va
   colgado de `.jana-resenas` y no del widget, para que el día que /nosotros
   sí lleve nombres no le afecte. */
.jana-resenas .sc_testimonials_item_author {
	display: none;
}

/* Las reseñas son de largos muy distintos —una de 55 palabras y otra de 6— y
   el carrusel iguala el alto de las diapositivas, pero NO el de la burbuja:
   cada caja se quedaba pegada a su texto y la hilera salía escalonada. Se
   estira la burbuja al alto de la diapositiva y el texto se centra dentro.
   La cola y la comilla no se mueven: son pseudo-elementos ABSOLUTOS, así que
   quedan fuera del flujo flex y siguen anclados a su caja. */
.jana-resenas .sc_testimonials_item {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.jana-resenas .sc_testimonials_item_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* El carrusel recorta con `overflow:hidden` justo donde termina la última
   burbuja a la vista: quedaban 0.06px de holgura y la línea derecha del tercer
   testimonio se perdía (la izquierda del primero, igual de justa). Se mete la
   diapositiva 2px hacia dentro por cada lado. Ojo: NO sirve ponerle margen a
   `.sc_testimonials_item` —lleva ancho fijo, así que el margen la empuja fuera en
   vez de encogerla—; el relleno va en la diapositiva, que es `border-box`. */
.jana-resenas .swiper-slide {
	padding-left: 2px;
	padding-right: 2px;
}



/* ════════════════════════════════════════════════════════════════════════
   HOME · ESCALA TIPOGRÁFICA FLUIDA

   Los títulos se veían chicos para el peso que tienen en la página. Se suben
   con `clamp(mínimo, preferido, máximo)`: el valor en `vw` hace que el tamaño
   crezca y decrezca con el ancho de la ventana, y los topes evitan que se
   desborde en móvil o se vuelva gigante en monitores anchos. Es responsive
   por sí solo, sin necesidad de un @media por cada breakpoint.

   Referencia (medido a 1280 px): h1 71→79 · h2 49→56 · tile 30→33 ·
   contador 30→51 · pestañas 14→15. Ninguno se reduce respecto a lo que había.
   ════════════════════════════════════════════════════════════════════════ */

/* El `body` no es decorativo: `__responsive.css` del tema se carga DESPUÉS del
   child (prioridad 2000 vs 1500) y fija h1 en 4rem bajo 1280 px y 3rem bajo
   768 px. Con un selector de un solo elemento la escala fluida solo mandaba en
   escritorio; anteponer `body` sube la especificidad y hace que gobierne en
   todos los anchos. */
body h1,
body .sc_title_title,
body .elementor-widget-text-editor h1 {
	font-size: clamp(2.6rem, 6.2vw, 5.5rem);
	line-height: 1.08;
}

body h2,
body .elementor-widget-text-editor h2 {
	font-size: clamp(2rem, 4.4vw, 4rem);
	line-height: 1.12;
}

/* Títulos de las piezas del mosaico de categorías */
body .sc_action_grid .sc_action_item_title {
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	line-height: 1.15;
}

/* Cifras de los contadores: son el elemento protagonista de esa franja */
body .sc_skills_counter .sc_skills_total {
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	line-height: 1.1;
}
.sc_skills_counter .sc_skills_item_title {
	font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}

/* Preguntas frecuentes */
body .elementor-accordion .elementor-accordion-title {
	font-size: clamp(1.4rem, 3vw, 2.6rem);
	line-height: 1.25;
}

/* Pestañas "Tu primera visita": a 14 px se veían apretadas.
   Elementor las fija con `.elementor-widget-tabs.elementor-tabs-view-horizontal
   .elementor-tab-desktop-title` (3 clases); hay que igualar ese selector para
   que no gane por especificidad. */
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title,
.elementor-widget-tabs .elementor-tab-title {
	font-size: clamp(0.95rem, 1.2vw, 1.15rem);
	line-height: 1.4;
	padding: 0.7em 1.2em;
}

/* ════════════════════════════════════════════════════════════════════════
   HOME · SOLAPES

   1. Redes verticales del hero. El tema las posiciona en absoluto contando
      con el margen ancho de su demo; aquí el contenido arranca en x=98 y las
      redes caían en x=82–108, así que las letras giradas se montaban sobre
      "Mexicali" en el H1. Se recuestan contra el borde de la ventana y, por
      debajo de 1200 px, donde ya no queda canal libre, se ocultan (los mismos
      enlaces están en el pie).
   ════════════════════════════════════════════════════════════════════════ */

.elementor-page-41 .vertical_social_link {
	/* El tema las saca con left:-1.72rem contando con el margen ancho de su
	   demo. Aquí el H1 arranca en x=98 y las letras giradas se le montaban
	   encima. El desplazamiento es 1:1 con `left`, así que se recorren hasta
	   dejar el borde pintado por debajo de esos 98 px. */
	left: -6.7rem;
	z-index: 1;
}

@media (max-width: 1199px) {
	.elementor-page-41 .vertical_social_link {
		display: none;
	}
}

/* 2. Aire entre el bloque de cada cifra y el siguiente, que en la captura
      quedaban pegados al texto de apoyo. */
.sc_skills_counter + * {
	margin-top: 0.4em;
}

/* ════════════════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES · icono de abrir/cerrar

   Elementor pinta dos SVG de Font Awesome (un + y un −) gruesos y toscos. Se
   ocultan y el icono se redibuja con dos pseudo-elementos: líneas de 1 px,
   más largas y finas.

   La animación imita la de temas como Alioth: al abrir, el icono gira y la
   línea vertical se contrae hasta desaparecer, de modo que la cruz "se
   convierte" en una barra; al cerrar, el gesto se revierte. Todo se anima con
   `transform`, que el navegador resuelve en la GPU sin recalcular el layout.
   ════════════════════════════════════════════════════════════════════════ */

/* Fuera los SVG de Font Awesome Y los dos <span> que Elementor usa para
   alternar entre ellos (`-closed` / `-opened`). Se ocultan los envoltorios
   completos, no solo el svg: si queda alguno con caja propia puede desplazar
   el centro del icono y las dos líneas dejan de cruzarse donde deben. */
.elementor-accordion .elementor-accordion-icon svg,
.elementor-accordion .elementor-accordion-icon i,
.elementor-accordion .elementor-accordion-icon-closed,
.elementor-accordion .elementor-accordion-icon-opened {
	display: none !important;
}

/* La cruz se dibuja con DOS DEGRADADOS de fondo sobre el propio recuadro, no
   con pseudo-elementos.

   Por qué: la versión con ::before/::after se resistió a aparecer aunque los
   estilos calculados salían correctos. El fondo evita de raíz esa familia de
   fallas — no depende de `content`, ni de que el elemento acepte
   pseudo-elementos, ni de apilamiento: si el recuadro se pinta, las líneas se
   pintan con él.

   El truco es que cada degradado es de un color a sí mismo, o sea un
   rectángulo sólido, y `background-size` le da el grosor: 26×1 la horizontal,
   1×26 la vertical. Animar ese tamaño a 0 hace desaparecer la vertical. */
.elementor-accordion .elementor-accordion-icon,
.elementor-accordion .elementor-accordion-icon.elementor-accordion-icon-left,
.elementor-accordion .elementor-accordion-icon.elementor-accordion-icon-right {
	position: relative;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	/* Elementor reserva ancho para su icono; se anula para que mande el nuestro */
	margin-right: 1rem;
	color: #9a5751;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 26px 1px, 1px 26px;
	background-position: center center, center center;
	background-repeat: no-repeat;
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Abierto: gira 180° y la vertical se contrae hasta desaparecer; queda la
   barra horizontal, que es el «−». */
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	transform: rotate(180deg);
	background-size: 26px 1px, 1px 0;
}

/* Respeta a quien pidió menos movimiento en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
	.elementor-accordion .elementor-accordion-icon {
		transition: none;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   PALETA JANA · reglas de legibilidad

   El cuerpo de texto es rosa profundo #9A5751 sobre el fondo claro #F2F2F0:
   son 4.85:1, que pasa AA pero con poco margen. De ahí estas dos reglas, que
   no son estéticas sino de accesibilidad:

   1. El párrafo NO baja de 16px. Por debajo, con ese contraste, deja de ser
      cómodo de leer.
   2. NADA de opacidad sobre texto. Un 70% de opacidad sobre este rosa
      hundiría el ratio por debajo del mínimo. Si hace falta jerarquía se
      resuelve con tamaño o peso, nunca atenuando.

   Si alguna vez la lectura se siente pesada, la salida NO es volver al café:
   es oscurecer el mismo rosa (p. ej. #6B3640, 8.5:1), que es un vino.
   ════════════════════════════════════════════════════════════════════════ */

body,
body p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	font-size: max(16px, 1rem);
}

/* El texto nunca se atenúa con opacidad (ver nota de contraste) */
body p,
body li,
.sc_icons_item_description,
.sc_skills_item_title,
.elementor-widget-text-editor p {
	opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   AJUSTES DE LA HOME · 2026-08-17

   Estas reglas ganan por ORDEN DE CARGA, no por especificidad: el
   `colors-jana.css` con la paleta se encola en prioridad 1400 y este archivo
   en 1500 (ver functions.php). Por eso los selectores pueden quedarse cortos
   y legibles, sin cadenas infladas ni `!important`.

   Las clases `jana-hero` y `jana-faq` las pone `_ajustes-home-41.php` en los
   datos de Elementor, para no depender de los `data-id`, que cambian si la
   sección se rehace.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO · el subtítulo se encimaba con el H1 ──────────────────────────
   El tema sube el título con un `margin-top` NEGATIVO dando por hecho un H1
   mucho más chico. Con Qwenzy a ~78px ese tirón mete el título dentro del
   subtítulo: llegaban a solaparse 1px.

   La regla es GLOBAL, no solo del hero de la home: el mismo widget
   `trx_sc_title` con subtítulo encima se usa en las cinco páginas de
   servicios y ahí pasaba lo mismo.

   ⚠️ El selector incluye la etiqueta `h1` a propósito: el tema declara
   `.sc_title h1.sc_item_title { margin-top: -0.25em }` en el `style.css` de
   su skin —ojo, mismo nombre de archivo que esta hoja—, y son (0,2,1). Un
   `.sc_title .sc_item_title` de (0,2,0) pierde. */
.sc_title h1.sc_item_title,
.sc_title h2.sc_item_title,
.sc_title_default h1.sc_item_title,
.sc_title_default h2.sc_item_title {
	margin-top: 0;
}

.sc_title .sc_item_subtitle_above,
.sc_title_default .sc_item_subtitle_above {
	margin-bottom: clamp(1rem, 2vw, 2rem);
}

/* ── 2. HERO · color del título ──────────────────────────────────────────── */
.jana-hero h1.sc_item_title,
.jana-hero h1.sc_item_title .sc_item_title_text {
	color: #5c2f2b;
}

/* ── 3. HERO · botón de WhatsApp ──────────────────────────────────────────
   Antes era crema con texto rosa claro: prácticamente ilegible. Ahora el
   relleno de reposo es el rosa que el tema usaba para el hover, y el hover
   baja al vino oscuro.

   El tema anima el hover deslizando un `::after`, así que a esa capa se le
   pone el color nuevo en vez de anular la animación. La regla `:hover` de
   abajo es el respaldo para cuando el pseudo-elemento no entra en juego.

   Solo el HERO: el botón del cierre («¿Lista para tu primera valoración?»)
   va sobre fondo rosa y con este relleno desaparecería.

   ⚠️ ESTOS BOTONES NO SE PINTAN CON `background-color`.

   Craftis los pinta con un DEGRADADO DE DOS MITADES en la abreviada
   `background`, y así es como hace la animación de deslizamiento:

       background: linear-gradient(to right, <HOVER> 50%, <REPOSO> 50%)
                   right bottom / 210% 100%  !important;

   La caja mide 210 % de ancho y se posiciona a la derecha, así que en reposo
   se ve la SEGUNDA mitad; al hacer hover se corre y aparece la primera. O
   sea: el primer color es el de hover y el segundo el de reposo — al revés
   de lo que uno esperaría.

   Consecuencia: `background-color` se declara pero NO se ve nunca, porque el
   degradado va encima. Hay que reescribir el degradado completo.

   Además el tema lo declara con `!important` sobre una cadena de `:not()`
   —que ya de por sí suma especificidad (0,6,0)—. Contra `!important` no gana
   ninguna especificidad, solo otro `!important`; y el archivo es del tema
   padre, que se perdería al actualizar. Por eso se replica su cadena, se
   antepone `.jana-hero` para acotarlo y se iguala la prioridad.

   Se aplica a los DOS botones con relleno de la home —el del hero y el del
   cierre («¿Lista para tu primera valoración?»)— porque el cambio de paleta
   dejó a los dos del mismo color que su sección: el del hero en #F2F2F0
   sobre #F2F2F0, y el del cierre en #9A5751 sobre #9A5751. Invisibles ambos.

   Para cambiar el color solo hay que tocar las dos variables de aquí abajo.

   Van en `body` —no en `.elementor-41`— para que valgan en TODO el sitio: las
   páginas de servicios usan el mismo botón de WhatsApp. */
body {
	--jana-cta-reposo: #b18725;
	--jana-cta-hover: #5c2f2b;
}

.scheme_default .sc_button.sc_button_hover_slide_left:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image) {
	/* primero el hover, después el reposo (ver nota de arriba) */
	background-image: linear-gradient(to right, var(--jana-cta-hover) 50%, var(--jana-cta-reposo) 50%) !important;
	background-color: var(--jana-cta-reposo) !important;   /* respaldo */
}

/* La capa `::after` es el otro mecanismo de deslizamiento del tema. Se le pone
   el mismo color de hover para que, entre en juego el que entre, el resultado
   sea el mismo. */
.scheme_default .sc_button.sc_button_hover_slide_left::after,
.scheme_dark .sc_button.sc_button_hover_slide_left::after {
	background-color: var(--jana-cta-hover) !important;
}

/* ── HOME · botón y burbuja del Slider Home 1 (Revolution Slider) ─────────
   Las capas del slider NO llevan `.sc_button`: la demo les pone las clases
   `sc_button_hover_slide_left sc_button_hover_style_identically` (y `link2`
   en la burbuja), y el tema las pinta por ESAS clases con el mismo degradado
   de dos mitades + `!important` de siempre (`__colors-default.css`). La hoja
   derivada de paleta tradujo las dos mitades al mismo #7E4340: ni oro de CTA
   ni hover. Aquí se les da el mismo par que al resto de los CTA del sitio.

   El orden de los colores sigue la regla de arriba (primero el hover, luego
   el reposo). La demo invierte el par en la variante `.link2` —botón oscuro
   con hover claro, burbuja clara con hover oscuro—; se conserva esa inversión:
   botón oro→vino, burbuja vino→oro. El texto lo deja el tema en crema. */
.scheme_default .sc_button_hover_slide_left.sc_button_hover_style_identically {
	background: linear-gradient(to right, var(--jana-cta-hover) 50%, var(--jana-cta-reposo) 50%)
	            no-repeat scroll right bottom / 210% 100% var(--jana-cta-reposo) !important;
}

.scheme_default .sc_button_hover_slide_left.sc_button_hover_style_identically.link2 {
	background: linear-gradient(to right, var(--jana-cta-reposo) 50%, var(--jana-cta-hover) 50%)
	            no-repeat scroll right bottom / 210% 100% var(--jana-cta-hover) !important;
}

/* ── La burbuja se barre como los botones, pero SIN deformarse ────────────
   El mecanismo del tema es un `::after` que cubre la caja y entra con
   `transform: scaleX()`. Esa animación tiene una asimetría deliberada que hay
   que conservar, porque es lo que hace que el gesto se lea bien:

     · al entrar  → `transform-origin: 0 50%`  y escala 0→1: el color nuevo
       crece de IZQUIERDA a DERECHA;
     · al salir   → el origen vuelve de golpe a `100% 0` y la escala va 1→0:
       el color nuevo se queda anclado a la derecha y el de reposo vuelve a
       entrar TAMBIÉN por la izquierda.

   O sea, el frente siempre viaja en el mismo sentido. Animar
   `background-position` —que fue el primer intento— no lo reproduce: al
   quitar el puntero el barrido se deshace hacia atrás.

   El único problema real del `::after` en la burbuja era la FORMA: si hereda
   el `border-radius`, lo que se escala es un círculo, que al aplastarse en
   horizontal se vuelve una elipse y el frente avanza curvo.

   La solución es tratar el círculo como lo que es, una MÁSCARA: el `::after`
   se deja RECTANGULAR —así su frente es una línea vertical recta— y se recorta
   con `overflow: hidden` del propio elemento, que es quien tiene el radio. El
   círculo no cambia de forma ni de tamaño en ningún momento. */
.sr7-layer.sc_button_hover_slide_left.link2,
.rs-layer.sc_button_hover_slide_left.link2 {
	overflow: hidden;
}

.sr7-layer.sc_button_hover_slide_left.link2::after,
.rs-layer.sc_button_hover_slide_left.link2::after {
	border-radius: 0;
}

/* El título del slider trae la última frase en `accent_light`, que la paleta
   derivada pinta de #7E4340: junto al vino del título casi no se distingue y
   parece un error. Misma decisión que los demás títulos de la home (puntos 4
   y 6): a un solo color. Para recuperar el acento basta borrar esta regla. */
.sr7-layer .accent_light,
.rs-layer .accent_light {
	color: inherit;
}

/* ── HOME · el hero no debe saltar al cargar ─────────────────────────────
   SÍNTOMA: al entrar, el slider aparecía corrido ~120px a la izquierda (hueco
   a la derecha) y un instante después «saltaba» a su sitio.

   CAUSA: dos JS que mueven la misma caja, en orden indeterminado. El tema
   deja el contenido en un `.content_wrap` de 1410px; la sección del hero
   lleva `stretch_section`, que Elementor resuelve POR JS después de `load`
   (mide el desfase y escribe `width`/`left` en línea). A su vez el motor SR7
   de Revolution Slider mide su contenedor al iniciar. Si SR7 mide antes del
   estirón, Elementor mueve la sección debajo de él y el módulo queda corrido
   hasta que SR7 vuelve a medir. Quitar el `stretch_section` NO es salida: SR7
   entiende «fullwidth» como «100 % de mi contenedor» y sin el estirón el
   slider se queda en caja (medido: 137+1410).

   SOLUCIÓN: que en la home el contenedor ya sea ancho completo DESDE EL CSS,
   antes de que corra ningún JS. Así la sección nace a 100 %, el estirón de
   Elementor calcula desfase 0 (escribe `left: 0`, no mueve nada) y SR7 mide
   bien a la primera, corra cuando corra. Medido por frames: geometría final
   desde el primer layout, con Elementor en orden normal y retrasado 1,5 s.

   Por qué no cambia nada más en la home: todas las secciones en caja miden
   su ancho por el contenedor de Elementor (1440, centrado), no por el
   `.content_wrap`; la única sin estirar (S5 «Dónde encontrarnos») no tiene
   fondo. Y el `.post_content > .elementor` del tema lleva -15px por lado
   para compensar el relleno de columna contra el borde del contenido; a 100 %
   esos -15px desbordarían (30px de scroll horizontal), así que se anulan.

   El `!important` es obligado: bajo 1280px el tema fija el ancho con
   `!important` (964 / 708 / 440px en `__responsive.css`) y sin él tablet y
   móvil seguían saltando 30-48px por lado. */
.elementor-page-41 .page_content_wrap .content_wrap {
	width: 100% !important;
	max-width: none !important;
}

.elementor-page-41 .post_content > .elementor {
	margin-left: 0;
	margin-right: 0;
}

/* ── Iconos SVG propios ──────────────────────────────────────────────────
   Los archivos usan `currentColor`, así que el color lo decide el
   contenedor y basta un solo archivo por icono.

   Contraste (WCAG pide 3:1 para gráficos que transmiten información, y un
   icono de servicio informa, no decora):
     · #9A5751 sobre el fondo claro #F2F2F0 → 4.85:1 ✓
     · #FFF2D5 sobre el fondo profundo #5C2F2B → 9.94:1 ✓

   El caramelo #C4956A queda descartado como color de icono: da 2.4:1 y
   reprueba. Se reserva para adornos sin carga informativa. */
body {
	--jana-icon-size: 80px;
}

.jana-icon,
.sc_icons .sc_icon_type_svg svg,
.sc_icons_icon svg {
	width: var(--jana-icon-size);
	height: var(--jana-icon-size);
	color: #9a5751;
	/* Sin bordes ni fondos: el icono es el dibujo, no una caja. El recuadro
	   que se veía NO era CSS — era un `<rect>` de mesa de trabajo dentro de
	   cada archivo, ya eliminado en `_iconos-preparar.php`. Esto es el
	   cinturón por si algún SVG futuro llega con caja propia. */
	border: 0;
	outline: 0;
	background: none;
}

.sc_icons_icon,
.sc_icons .sc_icon_type_svg {
	border: 0;
	outline: 0;
	background: none;
	box-shadow: none;
}

/* Aire entre el icono y el texto.
   El icono va en `position: absolute` sobre la esquina de la ficha, así que
   un `margin-right` no haría nada: la separación la da el `padding-left` del
   bloque de texto. El tema lo fija en 62px, calculado para su tamaño de
   icono original; con los nuestros a 80px el texto se le encimaba encima.
   Se ata al tamaño del icono para que los dos sigan cuadrando si mañana
   cambia: basta tocar `--jana-icon-size`.

   Aplica a TODAS las alineaciones. En el tipo `modern` el icono siempre va en
   absoluto a la izquierda, también cuando el widget se declara centrado — por
   eso acotarlo a `sc_align_left` dejaba fuera la rejilla de zonas, que se
   encimaba 18px.

   ⚠️ El selector lleva TRES clases a propósito. Quien fija los 62px es
   `.sc_icons_modern.sc_icons_size_small .sc_icons_item_details` en
   `__plugins.css`, que es (0,3,0): un `.sc_icons .sc_icons_item_details` de
   (0,2,0) pierde aunque esta hoja cargue después. */
.sc_icons.sc_icons_modern .sc_icons_item_details {
	padding-left: calc(var(--jana-icon-size) + 1.5rem);
}

.scheme_dark .jana-icon,
.scheme_dark .sc_icons .sc_icon_type_svg svg,
.scheme_dark .sc_icons_icon svg,
.jana-int-oscuro .sc_icons_icon svg,
.jana-cta .jana-icon {
	color: #fff2d5;
}

/* 40px en TODOS los tamaños, también en móvil. Los iconos de más detalle
   (`laser-equipo`, `gimnasia-pasiva`, `poro-firmeza`) se ensucian por debajo
   de ~32px, y en móvil la rejilla cae a una sola columna: hay espacio de
   sobra, así que encogerlos no gana nada y sí los degrada. */

/* ── Títulos de las fichas con icono ─────────────────────────────────────
   Venían en 14px y se perdían frente al cuerpo de texto. Se duplican.

   En `rem` para que sigan la escala del tema (raíz 16px en escritorio, 13px
   en móvil): antes eran píxeles fijos y no encogían nada. */
.sc_icons_item_title,
h4.sc_icons_item_title {
	/* 1.25rem = 20px. Se venía de 28px: al pasar de Qwenzy (serif de display,
	   trazo fino) a JUST Sans (sans con mucho más cuerpo), el mismo tamaño
	   pesaba bastante más en pantalla. Se compensa con el TAMAÑO y no con el
	   grosor, para conservar el SemiBold. */
	font-size: 1.25rem;
	line-height: 1.3;

	/* El tema pone `letter-spacing: 1px`. En mayúsculas y con la caja del
	   título en ~149px (rejilla de 4 columnas), cada píxel cuenta: en una
	   palabra de 15 letras son 15px de más. Se cierra a 0. */
	letter-spacing: 0;

	/* Aun así, «RADIOFRECUENCIA» no cabe en una línea de 149px a 21px. El
	   tema trae `overflow-wrap: break-word`, que la parte donde caiga y deja
	   una «A» huérfana en el renglón siguiente. Con guionado la corta por
	   sílaba —RADIOFRE-CUENCIA—, que es como se parte una palabra en español.
	   Funciona porque el documento declara `lang="es-MX"`. */
	hyphens: auto;
	overflow-wrap: normal;
}

/* ── /nosotros · tarjeta de equipo: el CARGO en lugar de las redes ───────
   La tarjeta `featured` del tema anima dos grupos al pasar el puntero:

     · `.trx_addons_hover_title` entra DESDE ARRIBA (parte en -50px) → el nombre
     · `.trx_addons_hover_info`  entra DESDE ABAJO  (parte en  20px) → las redes

   Aquí las redes no aportan: los cuatro perfiles las tienen vacías en el CPT
   (`[{"name":"","title":"","url":""}]`), así que ese bloque se pinta sin nada
   dentro. En su lugar va el CARGO, que sí es un dato real y ya está cargado.

   El cargo viene con la clase `trx_addons_hover_title`, o sea entrando desde
   arriba junto al nombre. Se le da el comportamiento del otro grupo —arranca
   20px más abajo y sube— para que el gesto sea el de la demo: nombre bajando,
   cargo subiendo. Y hay que mostrarlo, porque el skin lo oculta en todos sus
   estilos de equipo (`__plugins.css`).

   Los tres selectores llevan `.jana-equipo` delante para ganarle por
   especificidad a las reglas del tema (0,2,0) sin recurrir a `!important`. */
.jana-equipo .sc_team_item_socials {
	display: none;
}

.jana-equipo .trx_addons_hover_style_info .sc_team_item_subtitle {
	display: block;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.jana-equipo .trx_addons_hover_style_info:hover .sc_team_item_subtitle {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.jana-equipo .trx_addons_hover_style_info .sc_team_item_subtitle {
		transition: none;
	}
}

/* Y su legibilidad. La hoja de paleta deja la máscara de las tarjetas de
   equipo en `#F2F2F0` OPACO, mientras el nombre y el cargo heredan el crema
   pensado para fondos profundos: crema sobre casi blanco no se lee, y encima
   la foto desaparecía del todo al pasar el puntero.

   Se deja la máscara clara —que es el registro del sitio— pero translúcida,
   para que la foto siga presente, y los dos textos toman los colores de la
   paleta para fondo claro: vino en el nombre, gris en el cargo.

   Los selectores llevan `.scheme_default` delante para igualar los (0,3,0)
   de `.scheme_default .sc_team_item .trx_addons_hover_mask`; con la misma
   especificidad manda esta hoja, que carga después.

   ⚠️ Y para el ENLACE de dentro hace falta además `.sc_team_item_thumb`: el
   tema lo pinta con `.scheme_default .sc_team .sc_team_item_thumb
   .sc_team_item_title a`, que es (0,4,1). Sin esa clase, el nombre y el cargo
   se quedaban en el rosa del tema aunque su contenedor ya tuviera el color
   bueno — que fue exactamente lo que pasó al primer intento. */
.scheme_default .jana-equipo .trx_addons_hover_mask,
.jana-equipo .trx_addons_hover_mask {
	background-color: rgba(242, 242, 240, 0.86);
}

.scheme_default .jana-equipo .sc_team_item_title,
.scheme_default .jana-equipo .sc_team_item_thumb .sc_team_item_title a,
.jana-equipo .sc_team_item_title,
.jana-equipo .sc_team_item_thumb .sc_team_item_title a {
	color: #5c2f2b;
}

.scheme_default .jana-equipo .sc_team_item_subtitle,
.scheme_default .jana-equipo .sc_team_item_thumb .sc_team_item_subtitle a,
.jana-equipo .sc_team_item_subtitle,
.jana-equipo .sc_team_item_thumb .sc_team_item_subtitle a {
	color: #333;
}

/* ── /nosotros · el H1 del collage ───────────────────────────────────────
   La página lleva su H1 en el bloque de texto del collage. Es una decisión
   de SEO —una página necesita su H1— pero NO de jerarquía visual: ese texto
   vive en una columna del 20 % y con la escala de portada del sitio
   (`clamp(2.6rem, 6.2vw, 5.5rem)`) desbordaría la columna.

   El documento lo pide así de forma explícita: «sube a H1 cambiando solo la
   etiqueta HTML, no el tamaño visual». Se le da el tamaño de un título de
   sección, que es el papel que cumple en la página.

   Va con `body` delante porque el `__responsive.css` del tema se carga
   DESPUÉS de esta hoja y fija los h1 por punto de ruptura. */
body .jana-mision h1.sc_item_title,
body .jana-mision h1.sc_item_title .sc_item_title_text {
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
	line-height: 1.2;
}

/* ── Comparador «antes / después»: las etiquetas ─────────────────────────
   Las dos van abajo, cada una en su esquina (eso se decide en los ajustes del
   widget, `before_pos`/`after_pos`). Aquí solo el color: el mismo vino de los
   títulos, que sobre las fotos —piel y fondo claro— contrasta mucho mejor que
   el blanco que trae el widget.

   La sombra es un seguro: si mañana entra una foto oscura en esa esquina, el
   texto se sigue leyendo sin tener que tocar nada. */
.sc_icompare_text_before,
.sc_icompare_text_after {
	color: #5c2f2b;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* ── Páginas interiores: texto corrido legible ───────────────────────────
   Las secciones de fondo claro de las páginas de servicios llevan la clase
   `jana-int`. Mismo gris que se eligió para el hero y las FAQ de la home. */
.jana-int p,
.jana-int li,
.jana-int .sc_item_descr,
.jana-int .elementor-tab-content,
.jana-int .sc_icons_item_description {
	color: #333;
}

/* ── Títulos a un solo color, en TODO el sitio ───────────────────────────
   El tema resalta parte del título con `.trx_addons_accent` en otro color
   («y compromiso», «La confianza», «una idea simple»). La decisión del
   usuario —tomada primero en la home y confirmada después en /nosotros— es
   que el título vaya de un solo color, así que el acento hereda el del
   encabezado. Se deja global: si en algún título se quisiera el resalte,
   basta acotar esta regla a esa página.

   La clase se repite a propósito: la hoja de paleta pinta el acento con
   `div.scheme_default .trx_addons_accent`, que es (0,2,1). Con un
   `h2 .trx_addons_accent` de (0,1,1) no basta; duplicándola se llega a
   (0,2,1) y decide el orden de carga, que favorece a esta hoja. */
h1 .trx_addons_accent.trx_addons_accent,
h2 .trx_addons_accent.trx_addons_accent,
h3 .trx_addons_accent.trx_addons_accent,
h4 .trx_addons_accent.trx_addons_accent {
	color: inherit;
}

/* ── 7. Párrafos de las estadísticas ──────────────────────────────────────
   Estaban en rosa #9A5751 sobre fondo rosa: invisibles.

   ⚠️ OJO CON EL SELECTOR. La primera versión apuntaba a
   `.elementor-41 .sc_fly_static p`, y eso estuvo mal: `sc_fly_static` NO es
   la clase de esta sección, es la clase de ANIMACIÓN de entrada del tema y
   está en ~130 elementos de toda la página —incluidos el párrafo del hero y
   las respuestas de FAQ, que van sobre fondo claro—. Los dejó en crema sobre
   crema, invisibles. Por eso ahora se acota a `.jana-stats`, que sí es de
   esta sección. */
.jana-stats p,
.jana-stats .sc_skills_item_title {
	color: #fff2d5;
}

/* ── 9. Títulos H2 ───────────────────────────────────────────────────────
   Vino profundo sobre fondo claro, crema sobre fondo profundo.

   Las dos reglas tienen la MISMA especificidad a propósito: las secciones
   profundas llevan `scheme_dark` DENTRO de un documento `scheme_default`, así
   que ambas casan en ellas y decide el orden. Por eso la de oscuro va segunda
   — si se invierten, los títulos de las franjas profundas se pierden. */
.scheme_default h2,
.scheme_default h2.elementor-heading-title,
.scheme_default h2.sc_item_title {
	color: #5c2f2b;
}

.scheme_dark h2,
.scheme_dark h2.elementor-heading-title,
.scheme_dark h2.sc_item_title,
.scheme_dark .sc_action_item_title {
	color: #fff2d5;
}

/* NOTA · el borde de los tabs (Valoración/Tratamiento/Seguimiento) NO se
   quita aquí: el control `border_width` del widget traía 1px por omisión y se
   puso en 0 en los datos de Elementor (`_ajustes-home-41.php`), que es de
   donde sale el CSS que lo dibujaba. Igual que los fondos. */

/* ════════════════════════════════════════════════════════════════════════
   AJUSTES DE LA HOME · segunda tanda (2026-08-18)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Cifras de las estadísticas y su «+» ─────────────────────────────────
   El «+» es un `::after` (el repetidor del widget no tiene campo de unidades),
   así que hereda por `currentColor` y basta pintar la cifra. */
.jana-stats .sc_skills_counter .sc_skills_total {
	color: #b18725;
}

/* ── Texto corrido sobre fondo claro ─────────────────────────────────────
   Párrafo del hero y respuestas del acordeón de FAQ. Ver la nota del punto 7:
   estos eran los que quedaron en crema por el selector demasiado amplio. */
.jana-hero p,
.jana-faq .elementor-tab-content,
.jana-faq .elementor-tab-content p,
.jana-faq .elementor-tab-content li {
	color: #333;
}

/* NOTA · el contenedor del cierre («¿Lista para tu primera valoración?») se
   dejó SIN fondo propio: la banda vino de la sección se ve de extremo a
   extremo, como estaba antes del rosa oro. El título vuelve a heredar el crema
   del esquema profundo, así que tampoco lleva regla aquí. */

/* ── Enlaces del menú principal y del pie ────────────────────────────────
   Gris oscuro en reposo y visitados; rosa oro en hover y activo.

   ⚠️ Especificidad y `!important` otra vez, y aquí hay DOS defensas del tema
   que hay que igualar:

   · El pie usa `.scheme_default.footer_wrap a:hover` — compuesto sobre el
     MISMO elemento, porque el envoltorio lleva las dos clases. Son (0,3,0),
     y le ganaban a un `.footer_wrap a:hover` de (0,2,0). Ese era el que
     pintaba el hover en CREMA #FFF2D5 sobre el fondo claro: 1.06:1, o sea el
     «amarillo que no se ve».

   · El elemento de menú activo usa
     `.scheme_default .sc_layouts_menu_nav > li.current-menu-item > a`
     con `!important`, y de ahí salía el #7E4340 en «Inicio».

   Se replican los dos patrones. */
.scheme_default.footer_wrap a,
.scheme_default.footer_wrap a:link,
.scheme_default.footer_wrap a:visited,
.scheme_default .sc_layouts_menu_nav > li > a,
.scheme_default .sc_layouts_menu_nav > li > a:link,
.scheme_default .sc_layouts_menu_nav > li > a:visited {
	color: #333 !important;
}

.scheme_default.footer_wrap a:hover,
.scheme_default.footer_wrap a:focus,
.scheme_default.footer_wrap a:active,
.scheme_default.footer_wrap .current-menu-item > a,
.scheme_default .sc_layouts_menu_nav > li > a:hover,
.scheme_default .sc_layouts_menu_nav > li > a:focus,
.scheme_default .sc_layouts_menu_nav > li > a:active,
.scheme_default .sc_layouts_menu_nav > li.current-menu-item > a,
.scheme_default .sc_layouts_menu_nav > li.current_page_item > a {
	color: #b18725 !important;
}

/* ── Pie: «Síguenos» y los iconos de redes ───────────────────────────────
   Al mismo gris que los enlaces. El glifo se pinta en el <span> interior
   (`icon-facebook`), no en el <a>, así que hay que nombrarlo aparte. */
.scheme_default.footer_wrap .elementor-heading-title,
.scheme_default.footer_wrap .socials_wrap .social_icon,
.scheme_default.footer_wrap .socials_wrap [class*="icon-"] {
	color: #333 !important;
}

/* Los iconos siguen al menú: rosa oro al pasar el puntero. El hover va en el
   <a>, pero el color hay que aplicarlo al <span> del glifo, que es quien lo
   pinta. */
.scheme_default.footer_wrap .socials_wrap a:hover .social_icon,
.scheme_default.footer_wrap .socials_wrap a:hover [class*="icon-"],
.scheme_default.footer_wrap .socials_wrap a:focus .social_icon,
.scheme_default.footer_wrap .socials_wrap a:focus [class*="icon-"] {
	color: #b18725 !important;
}

/* «Síguenos» venía en 14.22px con Qwenzy, que es una serif de display: con ese
   trazo tan fino, a ese tamaño casi no se lee. Se sube 50%.

   En `rem`, no en `px`, para que siga la escala del tema: la raíz baja de 16px
   en escritorio a 13px en móvil, así que el título encoge con todo lo demás.
   0.8889rem × 1.5 = 1.3333rem (21.3px en escritorio). */
.scheme_default.footer_wrap .elementor-heading-title {
	font-size: 1.3333rem;
}

/* ── Pie: las CRUCES de los menús ────────────────────────────────────────
   En el diseño original cada elemento de los menús del pie lleva un «+»
   delante. El skin `soap` no trae esa regla —es de otro skin de Craftis—, así
   que se dibuja aquí, sobre el marcado real del menú (por eso hacía falta
   cambiar las listas de enlaces por widgets de menú de verdad).

   Va en un pseudo-elemento y no en el texto: es decoración, y así no lo lee
   un lector de pantalla ni se copia al seleccionar el enlace. */
.footer_wrap .jana-pie-menu .sc_layouts_menu_nav > li > a {
	position: relative;
	padding-left: 1.4em;
}

.footer_wrap .jana-pie-menu .sc_layouts_menu_nav > li > a::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.9em;
	line-height: 1;
	opacity: 0.55;
}

/* Los menús del pie van en columna, uno debajo de otro. */
.footer_wrap .jana-pie-menu .sc_layouts_menu_nav > li {
	display: block;
	float: none;
	margin: 0 0 0.55em;
}

/* NOTA · los iconos de redes del pie van SIN recuadro, por decisión del
   usuario (2026-08-19). El diseño de referencia los enmarca en una caja con
   borde y llegó a probarse así, pero aquí van como glifos sueltos. */

/* ── Pie: crédito y aviso de derechos ────────────────────────────────────
   El shortcode del tema los escribe en BLANCO, dando por hecho un pie
   oscuro. Sobre el fondo claro quedaban en 1.12:1: invisibles. */
.scheme_default.footer_wrap .elementor-widget-shortcode,
.scheme_default.footer_wrap .elementor-widget-shortcode b,
.scheme_default.footer_wrap .elementor-widget-shortcode span,
.scheme_default.footer_wrap .elementor-widget-shortcode p {
	color: #333 !important;
}

/* ── Firma de LUNA: su tooltip conserva SU paleta ────────────────────────
   Al hacer clic en la firma se abre un panel que el plugin inserta en el
   <body> —fuera del pie— con fondo propio casi negro (#111) y sus enlaces en
   blanco translúcido.

   `colors-jana.css` se los estaba pintando de rosa #9A5751: `.scheme_default a`
   y `.luna-social a` empatan en especificidad (0,1,1) y la paleta carga
   después, así que ganaba. Rosa sobre #111 es 3.4:1 y los iconos de redes
   casi no se veían.

   Se le devuelven los valores del propio plugin (luna-firma-digital.php:479).
   El sitio no debe repintar esa firma: es de otro producto. */
.luna-tooltip-fixed .luna-social a {
	color: rgba(255, 255, 255, 0.45);
}

.luna-tooltip-fixed .luna-social a:hover,
.luna-tooltip-fixed .luna-social a:focus {
	color: #fff;
}

/* ── /contacto · el formulario de Luna Forms dentro de Craftis ───────────
   Dos campos del formulario no son controles nativos: el JS del plugin los
   sustituye por un `<button>` —`.lnf-selx-trigger` en el desplegable y
   `.lnf-dp-trigger` en el selector de fecha— que por dentro es un FLEX
   (etiqueta a la izquierda, icono empujado a la derecha), con el control real
   detrás, invisible, para accesibilidad y respaldo. Los dos comparten la
   MISMA maqueta en `form.css`, así que van juntos en esta regla.

   Craftis pinta cualquier `<button>` con su degradado y, de paso, le impone
   `display: inline-block`. Eso hacía dos destrozos: el bloque vino enorme y,
   al perder el flex, el chevron se pegaba al texto en vez de irse al borde.

   Por eso aquí se toca SOLO LA PINTURA y se devuelve la maqueta del plugin con
   sus valores exactos (`assets/css/form.css`: flex, gap 8px, alto mínimo 44px,
   relleno 10/14, borde de 1.5px). Nada de inventar medidas ni de tocar el
   chevron, el desplegable ni el `<select>` de respaldo: siguen siendo los
   del plugin, así que el componente conserva su comportamiento y su
   accesibilidad.

   El `!important` es obligado: el fondo del tema viene con `!important` y no
   hay especificidad que le gane. */
.jana-form .lnf-selx-trigger,
.jana-form .lnf-dp-trigger {
	/* pintura: se anula la del tema */
	background: var(--lnf-surface, #fff) !important;
	color: var(--lnf-text, #333) !important;
	/* El MISMO borde que los campos de texto del formulario, medido en el
	   navegador: 1px sólido #9A5751 con 6px de radio. Antes heredaba un gris
	   claro del plugin que sobre el fondo #F2F2F0 casi no se veía y el campo
	   parecía no tener borde. */
	border: 1px solid #9a5751 !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	/* maqueta: la del plugin, restituida */
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px !important;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.jana-form .lnf-selx-trigger:hover,
.jana-form .lnf-selx-trigger:focus-visible,
.jana-form .lnf-selx-trigger[aria-expanded="true"],
.jana-form .lnf-dp-trigger:hover,
.jana-form .lnf-dp-trigger:focus-visible,
.jana-form .lnf-dp-trigger[aria-expanded="true"] {
	border-color: #b18725 !important;
}

/* El botón de envío SÍ es un botón: conserva el mecanismo del tema y solo
   recibe el par de color de los CTA del sitio (oro en reposo, vino al pasar). */
.jana-form .lnf-button {
	background: linear-gradient(to right, var(--jana-cta-hover) 50%, var(--jana-cta-reposo) 50%)
	            no-repeat scroll right bottom / 210% 100% var(--jana-cta-reposo) !important;
	color: #fff2d5 !important;
}


/* ── /contacto · la flecha suelta debajo del desplegable ─────────────────
   Craftis envuelve TODO `<select>` en un `div.select_container` y le dibuja su
   propia flecha con un `::after`. Como aquí el `<select>` real va oculto
   detrás del componente del plugin, esa flecha quedaba huérfana, asomando
   justo debajo del campo.

   Se apaga solo la decoración del tema. El `<select>` NO se toca: sigue en el
   DOM, es el que guarda el valor y el que usan lector de pantalla y teclado. */
.jana-form .select_container::after,
.jana-form .select_container::before {
	display: none !important;
}

/* ── /contacto · legibilidad del calendario ──────────────────────────────
   La hoja de paleta pinta TODOS los días en #F3D9D2, un rosa muy claro que
   sobre el blanco del calendario da ~1.2:1: no se leían. Se llevan a los
   colores de texto del sitio.

   Los días pasados se quedan atenuados A PROPÓSITO —no se pueden elegir,
   porque el campo está restringido a futuro—, pero con un gris que sí se
   distingue en vez de rosa sobre blanco. */
.jana-form .lnf-dp-day {
	color: #333 !important;
}

.jana-form .lnf-dp-day-disabled,
.jana-form .lnf-dp-day-filler {
	color: rgba(51, 51, 51, 0.45) !important;
}

.jana-form .lnf-dp-day-today {
	color: #5c2f2b !important;
	font-weight: 600;
}

.jana-form .lnf-dp-day-selected,
.jana-form .lnf-dp-day[aria-selected="true"] {
	background-color: #b18725 !important;
	color: #fff2d5 !important;
}

.jana-form .lnf-dp-day:hover:not(.lnf-dp-day-disabled):not(.lnf-dp-day-filler) {
	background-color: rgba(177, 135, 37, 0.15) !important;
}

.jana-form .lnf-dp-dow {
	color: #5c2f2b !important;
}

/* ── Flechas de mes ──────────────────────────────────────────────────────
   Aquí me equivoqué antes: les puse el icono en CREMA, y como el botón activo
   tiene fondo blanco, la flecha «›» desaparecía. Lo que despistaba es que la
   «‹» sí se veía… porque está DESHABILITADA (el campo es solo a futuro, así
   que no se puede retroceder de mes) y conservaba el fondo vino que le metía
   el tema.

   Ahora las dos van igual: sin el fondo del tema, icono en vino sobre el
   blanco del calendario, y la deshabilitada atenuada —que es como debe
   leerse—. El `svg` hereda por `currentColor`. */
.jana-form .lnf-dp-popover .lnf-dp-cal-nav {
	background: none !important;
	background-color: #fff !important;
	color: #5c2f2b !important;
	border-color: rgba(51, 51, 51, 0.25) !important;
	opacity: 1;
}

.jana-form .lnf-dp-popover .lnf-dp-cal-nav[disabled] {
	color: rgba(51, 51, 51, 0.45) !important;
	opacity: 1;
}

.jana-form .lnf-dp-popover .lnf-dp-cal-nav:hover:not([disabled]) {
	color: #b18725 !important;
	border-color: #b18725 !important;
}

/* ── Horas ───────────────────────────────────────────────────────────────
   La lista de horas son botones (`.lnf-dp-time-slot`), así que caían en el
   mismo rosa ilegible que los días. Mismo criterio: texto del sitio, la hora
   elegida en oro con texto crema, y las no disponibles atenuadas. */
.jana-form .lnf-dp-popover .lnf-dp-time-slot {
	background: none !important;
	background-color: transparent !important;
	color: #333 !important;
}

.jana-form .lnf-dp-popover .lnf-dp-time-slot:hover:not(.lnf-dp-time-active):not(.lnf-dp-time-disabled) {
	background-color: rgba(177, 135, 37, 0.15) !important;
	color: #5c2f2b !important;
}

.jana-form .lnf-dp-popover .lnf-dp-time-slot.lnf-dp-time-active {
	background-color: #b18725 !important;
	color: #fff2d5 !important;
}

.jana-form .lnf-dp-popover .lnf-dp-time-slot.lnf-dp-time-disabled {
	color: rgba(51, 51, 51, 0.45) !important;
}

.jana-form .lnf-dp-popover .lnf-dp-time-col-title {
	color: #5c2f2b !important;
}

/* Los dos botones del pie del calendario también son `<button>`, así que
   Craftis los pinta: «Confirmar» toma el oro de los CTA y «Limpiar» se queda
   discreto, que es la jerarquía correcta entre los dos. */
/* Los selectores repiten la clase para llegar a (0,4,0): la hoja de paleta
   pinta estos botones con una cadena de tres clases MÁS `!important`, y usa la
   abreviada `background`, que además borra el degradado. Con dos clases no
   bastaba. */
.jana-form .lnf-dp-popover .lnf-dp-confirm.lnf-dp-confirm {
	background: linear-gradient(to right, var(--jana-cta-hover) 50%, var(--jana-cta-reposo) 50%)
	            no-repeat scroll right bottom / 210% 100% var(--jana-cta-reposo) !important;
	color: #fff2d5 !important;
}

.jana-form .lnf-dp-popover .lnf-dp-clear.lnf-dp-clear {
	background: none !important;
	background-color: transparent !important;
	color: #333 !important;
	border: 1px solid rgba(51, 51, 51, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MAPA DE /contacto  (.jana-mapa)

   OpenStreetMap incrustado. No se usa el widget del tema porque necesita
   clave de Google Maps y sin ella dibuja una caja vacía de 462px.

   ⚠️ Hoy solo se pinta el iframe. La barra de abajo (dirección + botón
   «Cómo llegar») se quitó el 2026-08-20 a petición del usuario, porque la
   dirección ya está en las fichas de contacto de arriba. Las reglas de
   `__pie`, `__dir` y `__btn` se conservan INACTIVAS por si se recupera; el
   marcado que las usaba está comentado en `_form-contacto.php`.
   ══════════════════════════════════════════════════════════════════════ */

.jana-mapa__lienzo {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	/* El mapa es decorativo respecto al contenido: si tarda, que no salte la
	   maqueta. La altura fija reserva el hueco desde el primer pintado. */
	background: #e8e6e1;
}

.jana-mapa__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 24px;
	padding: 18px 20px;
	background: #5c2f2b;
}

.jana-mapa__dir {
	margin: 0;
	color: #fff2d5;
	font-size: .95em;
}

/* El botón repite el par oro/vino de los CTA del sitio. No hereda del tema
   porque no es un `<button>` sino un `<a>` dentro de un widget `html`. */
.jana-mapa__btn {
	display: inline-block;
	padding: 11px 26px;
	background: var(--jana-cta-reposo, #b18725);
	color: #fff2d5;
	text-decoration: none;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background-color .25s ease;
}

.jana-mapa__btn:hover,
.jana-mapa__btn:focus-visible {
	background: #7a3f39;
	color: #fff2d5;
}

@media (max-width: 767px) {
	.jana-mapa__lienzo { height: 300px; }
	.jana-mapa__pie { flex-direction: column; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES  (.jana-legal)
   Aviso de Privacidad #48 y, si algún día se rehace, Términos #118.

   Un texto legal se lee o no se lee: la única decisión de diseño que
   importa aquí es que se pueda leer. Tres cosas lo deciden.

   1. ANCHO. El contenido iba a 1100px, que para prosa corrida son ~150
      caracteres por renglón; el ojo pierde el salto de línea. 800px deja
      ~95, que es el techo de lo cómodo.
   2. CONTRASTE. Antes: #9A5751 sobre un #D4C0A0 heredado del demo = 3.07:1,
      POR DEBAJO del 4.5:1 de WCAG AA. Ahora #333 sobre el #F2F2F0 del body
      = 11.3:1. Por eso la sección NO declara fondo propio: deja ver el del
      body, que ya es el color claro de la paleta vigente.
   3. JERARQUÍA. El texto arrancaba en <h5>. Ahora hay un H1 real y las 15
      secciones son H2, así que sus tamaños se fijan aquí abajo.
   ══════════════════════════════════════════════════════════════════════ */

.jana-legal .elementor-widget-heading,
.jana-legal .elementor-widget-text-editor {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.jana-legal .elementor-widget-text-editor {
	color: #333;
	line-height: 1.75;
}

.jana-legal h1 {
	color: #5c2f2b;
}

/* Los H2 de sección: aire generoso arriba para que se vean como cortes, y
   un filete que ayuda a barrer el documento con la vista. */
.jana-legal .elementor-widget-text-editor h2 {
	color: #5c2f2b;
	font-size: 1.5em;
	margin: 2.2em 0 .7em;
	padding-bottom: .35em;
	border-bottom: 1px solid rgba(92, 47, 43, 0.18);
}

.jana-legal .elementor-widget-text-editor h2:first-child {
	margin-top: 0;
}

.jana-legal .elementor-widget-text-editor h3 {
	color: #5c2f2b;
	font-size: 1.1em;
	margin: 1.5em 0 .4em;
}

.jana-legal .elementor-widget-text-editor p,
.jana-legal .elementor-widget-text-editor li {
	color: #333;
}

/* El tema deja ~10px entre párrafos, que con una interlínea de 28px hace que
   dos párrafos seguidos se lean como uno solo. En prosa legal, donde cada
   párrafo es una obligación distinta, la separación tiene que verse. */
.jana-legal .elementor-widget-text-editor p {
	margin-bottom: 1.1em;
}

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

.jana-legal .elementor-widget-text-editor ul,
.jana-legal .elementor-widget-text-editor ol {
	margin: 0 0 1.1em 1.4em;
}

.jana-legal .elementor-widget-text-editor li {
	margin-bottom: .4em;
}

/* Enlaces: subrayados SIEMPRE. En un texto legal el color solo no basta
   para distinguirlos, y buena parte de los enlaces de aquí (correo,
   WhatsApp) son la vía para ejercer derechos. */
.jana-legal .elementor-widget-text-editor a {
	color: #333;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.jana-legal .elementor-widget-text-editor a:hover,
.jana-legal .elementor-widget-text-editor a:focus-visible {
	color: var(--jana-cta-reposo, #b18725);
}

/* La fecha de actualización: discreta, pero visible sin buscarla. */
.jana-legal .jana-legal-fecha p {
	color: #666;
	font-size: .9em;
	margin: 0;
}

/* La tabla de transferencias es lo único ancho del documento. En móvil se
   desplaza dentro de su caja en vez de estirar la página entera. */
.jana-legal .jana-tabla-scroll {
	overflow-x: auto;
	margin: 0 0 1.2em;
}

.jana-legal .jana-tabla-scroll table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
}

.jana-legal .jana-tabla-scroll th,
.jana-legal .jana-tabla-scroll td {
	padding: .6em .8em;
	border: 1px solid rgba(92, 47, 43, 0.18);
	text-align: left;
	vertical-align: top;
	color: #333;
}

.jana-legal .jana-tabla-scroll th {
	background: rgba(92, 47, 43, 0.06);
	color: #5c2f2b;
	font-weight: 600;
}

/* Craftis raya las tablas: `__colors-default.css` pinta las filas IMPARES con
   un fondo profundo y `colors-jana.css` lo recolorea al vino #5C2F2B. Esa
   regla toca solo `background-color` y `border-color`, nunca `color`, así que
   el #333 del cuerpo caía sobre vino: 1.14:1, texto invisible.

   No se desactiva la raya —es del tema y se ve bien—: sobre fondo profundo el
   texto va en crema, que es justo lo que dice la paleta vigente. Queda en
   9.98:1.

   El selector necesita (0,3,4) para ganarle al del tema, que va con
   `.scheme_default table > tbody > tr:nth-child(2n+1) > td` = (0,2,4). De ahí
   que se repita la cadena completa en vez de acortarla. */
.jana-legal .jana-tabla-scroll table > tbody > tr:nth-child(2n+1) > td {
	color: #fff2d5;
	border-color: rgba(255, 242, 213, 0.28);
}

.jana-legal .jana-tabla-scroll table > tbody > tr:nth-child(2n+1) > td strong {
	color: #fff2d5;
}

@media (max-width: 767px) {
	.jana-legal .elementor-widget-text-editor h2 {
		font-size: 1.3em;
		margin-top: 1.8em;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   PÁGINA 404  (.jana-404)

   Reemplaza el contenido en inglés del skin soap (skins/soap/templates/
   content-404.php del padre, sobrescrito en el child en la misma ruta). El
   menú y el pie los sigue poniendo el 404.php del padre sin tocar: aquí solo
   va el bloque central.
   ══════════════════════════════════════════════════════════════════════ */

.post_item_404.jana-404 {
	padding: 40px 20px 80px;
	text-align: center;
}

/* El flex vive en `.post_content`, NO en el <article>. `.post_item_single`
   trae del tema padre un `::after` de clearfix (content:" "; display:block)
   que en flujo normal no se ve ni ocupa nada — pero si el ARTÍCULO fuera el
   contenedor flex, ese pseudo-elemento se vuelve un SEGUNDO ítem flexible con
   ancho real (se midió: ~694px), y entre los dos "llenan" la fila entera. Por
   eso el contenido salía pegado a la izquierda en vez de centrado: no era un
   iframe ni un layout de columnas, era este clearfix heredado.

   `.post_content` no tiene ese pseudo-elemento, así que centra limpio.
   `flex-direction: column` porque el único hijo se centra en los dos ejes.

   ⚠️ SIN `min-height` en `vh`. Antes había `60vh` y el resultado era una
   página casi vacía: el contenido mide ~310px, pero en una ventana de 1107px
   de alto ese 60vh reservaba 664px, así que quedaban ~256px de hueco arriba y
   ~288px abajo, y el bloque flotaba perdido en el centro. El alto lo marca
   ahora el contenido; el aire lo da el padding del artículo, que es constante
   y no crece con la pantalla. */
.jana-404 > .post_content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.jana-404__caja {
	max-width: 560px;
}

.jana-404__codigo {
	margin: 0;
	color: var(--jana-cta-reposo, #b18725);
	font-family: 'Qwenzy', serif;
	font-size: 96px;
	line-height: 1;
}

/* El H1 del tema entra a 78px, pensado para un título de página con la barra
   de título del tema. Aquí es el título de un mensaje de error, y a ese tamaño
   «Esta página no existe» se partía en dos renglones. */
.jana-404__titulo {
	margin: 10px 0 16px;
	color: #5c2f2b;
	font-size: 40px;
	line-height: 1.2;
}

.jana-404__texto {
	margin: 0 0 32px;
	color: #333;
	font-size: 1.05em;
	line-height: 1.7;
}

.jana-404__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.jana-404__btn {
	display: inline-block;
	padding: 13px 30px;
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.jana-404__btn--primario {
	background: var(--jana-cta-reposo, #b18725);
	color: #fff2d5;
}

.jana-404__btn--primario:hover,
.jana-404__btn--primario:focus-visible {
	background: var(--jana-cta-hover, #5c2f2b);
	color: #fff2d5;
}

@media (max-width: 480px) {
	.jana-404__codigo { font-size: 72px; }
	.jana-404__titulo { font-size: 30px; }
	.jana-404__btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAQUETES de /depilacion-laser — tarjetas numeradas

   El listado sigue siendo un <ol> corriente dentro del editor de texto de
   Elementor. Es a propósito: así se pueden añadir, quitar o reescribir
   paquetes desde el editor sin tocar código, y la numeración se recalcula
   sola. Aquí solo se le da forma.

   ⭐ LOS ICONOS NO VAN INCRUSTADOS. Se pintan con `mask-image` sobre el SVG
   que ya vive en `assets/icons/`: el color lo decide `background-color`, que
   es justo lo que hacía falta para pasarlos al claro del fondo profundo. La
   alternativa —incrustar los siete SVG en el widget— metía ~24 KB de markup
   en `_elementor_data` y dejaba el color escrito a mano en la base de datos.

   PALETA: no se introduce ningún color nuevo. El relleno y el borde de la
   tarjeta son la MISMA crema del texto a baja opacidad, y el número usa el oro
   del CTA que ya está en el tema (`--jana-cta-reposo`). Ese oro da 3.35:1
   sobre el vino: insuficiente para texto corrido, de sobra para el número, que
   va a 1.75em — el umbral de texto grande es 3:1.
   ════════════════════════════════════════════════════════════════════════ */
.jana-paquetes {
	counter-reset: jana-paq;
	list-style: none;
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: 12px;
}

.jana-paquetes li {
	counter-increment: jana-paq;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 15px 22px;
	border: 1px solid rgba(255, 242, 213, 0.16);
	border-radius: 6px;
	background-color: rgba(255, 242, 213, 0.045);
	/* Solo color: nada de propiedades lógicas ni de medidas en la transición. */
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.jana-paquetes li:hover {
	border-color: rgba(255, 242, 213, 0.34);
	background-color: rgba(255, 242, 213, 0.08);
}

/* El número, en la tipografía de titulares. `decimal-leading-zero` es lo que
   da el 01, 02… sin escribirlos a mano. */
.jana-paquetes li::before {
	content: counter(jana-paq, decimal-leading-zero);
	font-family: 'Qwenzy', Georgia, serif;
	font-size: 1.7em;
	line-height: 1;
	color: var(--jana-cta-reposo);
	min-width: 1.7em;
}

/* La silueta de la zona. `currentColor` la deja del mismo claro que el texto
   de la tarjeta, sin tener que declarar un color aparte. */
.jana-paquetes li::after {
	content: '';
	width: 34px;
	height: 34px;
	background-color: currentColor;
	opacity: 0.72;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* Un icono por paquete: el de la zona que lo DISTINGUE de los demás, no la
   primera que aparece en el nombre. Si se reordenan los paquetes en el editor,
   hay que reordenar también estas siete reglas. */
.jana-paquetes li:nth-child(1)::after { -webkit-mask-image: url(assets/icons/zona-axila.svg);      mask-image: url(assets/icons/zona-axila.svg); }
.jana-paquetes li:nth-child(2)::after { -webkit-mask-image: url(assets/icons/zona-bigote.svg);     mask-image: url(assets/icons/zona-bigote.svg); }
.jana-paquetes li:nth-child(3)::after { -webkit-mask-image: url(assets/icons/zona-piernas.svg);    mask-image: url(assets/icons/zona-piernas.svg); }
.jana-paquetes li:nth-child(4)::after { -webkit-mask-image: url(assets/icons/zona-rostro.svg);     mask-image: url(assets/icons/zona-rostro.svg); }
.jana-paquetes li:nth-child(5)::after { -webkit-mask-image: url(assets/icons/zona-brazos.svg);     mask-image: url(assets/icons/zona-brazos.svg); }
.jana-paquetes li:nth-child(6)::after { -webkit-mask-image: url(assets/icons/silueta-frontal.svg); mask-image: url(assets/icons/silueta-frontal.svg); }
.jana-paquetes li:nth-child(7)::after { -webkit-mask-image: url(assets/icons/zona-bikini.svg);     mask-image: url(assets/icons/zona-bikini.svg); }

@media (max-width: 767px) {
	.jana-paquetes li {
		gap: 14px;
		padding: 13px 16px;
	}
	.jana-paquetes li::before {
		font-size: 1.45em;
		min-width: 1.6em;
	}
	.jana-paquetes li::after {
		width: 26px;
		height: 26px;
	}
}