/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ============================================================
   Tipografía global: DM Sans en toda la web.
   - Fija la fuente base del <body> (todo lo que herede la usa).
   - Remapea las variables de tipografía global de Elementor y las
     variables de fuente de los plugins custom (que definen su propia
     fuente) para que también usen DM Sans.
   - Los iconos (eicons, Font Awesome, dashicons) NO se ven afectados:
     declaran su propia font-family en su propio elemento, y !important
     sobre el <body> no fuerza la herencia en descendientes que ya
     definen su fuente.
   ============================================================ */
:root {
	--dm-sans-stack:
		"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
}

body {
	font-family: var(--dm-sans-stack) !important;
}

/* Los controles de formulario no heredan la fuente del body por defecto. */
input,
button,
select,
textarea {
	font-family: var(--dm-sans-stack) !important;
}

/* Tipografía global de Elementor (Primaria/Secundaria/Texto/Acento). */
:root,
body {
	--e-global-typography-primary-font-family: "DM Sans" !important;
	--e-global-typography-secondary-font-family: "DM Sans" !important;
	--e-global-typography-text-font-family: "DM Sans" !important;
	--e-global-typography-accent-font-family: "DM Sans" !important;
}

/* Variables de fuente de los plugins custom → DM Sans. */
.pulsoweb-root {
	--pulsoweb-font-display: var(--dm-sans-stack) !important;
	--pulsoweb-font-body: var(--dm-sans-stack) !important;
}

:root {
	--pwnav-font: var(--dm-sans-stack) !important;
}

/* ============================================================
   Pase de "decencia" en móvil (añadido por Claude, 2026-07-22).

   PROBLEMA: varios contenedores flex atómicos (Elementor V4) llevan un
   width fijo puesto a mano a nivel base/desktop (p.ej.
   `.elementor .e-XXXX{width:1280px}` en local-9-frontend-desktop.css).
   Ese valor no tiene variante responsive, así que también se aplica en
   móvil: los contenedores miden 1280/1355px dentro de un viewport de
   ~400px → scroll horizontal fantasma y bloques que se salen o se
   cortan.

   ARREGLO (desktop intacto; ampliado a tablet más abajo):
   - `max-width:100%` CAPA el ancho al viewport SIN forzar `width`, así
     que si más adelante defines un ancho de móvil propio en Elementor,
     tu valor sigue mandando (esta regla no lo pisa).
   - `flex-wrap:wrap` deja que las filas envuelvan/apilen en vez de
     desbordar.
   - `overflow-x:clip` por sección = red de seguridad: ninguna sección
     puede filtrar scroll horizontal a la página.

   Especificidad (0,3,0) → gana a la regla de Elementor (0,2,0) sin
   `!important`. Refina bloque por bloque en Elementor; borra reglas de
   aquí cuando ya no hagan falta.
   ============================================================ */
@media (max-width: 767px) {
	/* En móvil las filas atómicas además envuelven en vez de desbordar. */
	.e-con.e-atomic-element.e-flexbox-base {
		flex-wrap: wrap;
	}
}

/* Ampliado a TODOS los anchos (2026-09-23): en tablet (768–1354px) la
   Home seguía haciendo scroll horizontal por los mismos anchos fijos de
   desktop (atómicos de 1355/1280/605px y el contenedor clásico 161461c
   "Un proceso claro" a 1290px). En desktop (≥1355px) no cambia nada:
   esos anchos ya caben, así que el tope no actúa. Sin !important: un
   ancho responsive puesto en Elementor sigue mandando. */
.e-con.e-atomic-element.e-flexbox-base,
.e-con.e-child {
	max-width: 100%;
}

/* Red de seguridad: una sección nunca filtra scroll horizontal. */
.e-con.e-parent {
	overflow-x: clip;
}

/* ============================================================
   Grid → slider en TABLET y MÓVIL (<=1024px)  (añadido por Claude, 2026-07-22).

   Un contenedor Grid de Elementor se convierte en un slider horizontal
   swipeable con scroll-snap. 100% CSS: sin JavaScript (nada que "no cargue")
   y SIN duplicar contenido — usa las mismas tarjetas del grid, así que se
   edita una sola vez en Elementor y el slider se actualiza solo.

   ▶ CÓMO REUTILIZARLO en cualquier grid: en Elementor selecciona el
   contenedor Grid → Avanzado › CSS Classes → escribe `pw-mobile-slider`.
   Nada más (ni código ni duplicar). Funciona con grids BOXED y FULL WIDTH.
   Requisito: las celdas del grid deben ser contenedores (`.e-con`), que es
   lo normal. La sección 15c2c51 (Home) está además cableada por ID, así que
   funcionó sin tocar Elementor.

   Breakpoint 1024px = tablet + móvil (a propósito más ancho que el móvil del
   proyecto, 767px, porque se pidió "tablet y mobile"). Las tarjetas ocupan
   ~1 en móvil (con "peek" de la siguiente) y ~2–3 en tablet. */
@media (max-width: 1024px) {
	/* Scroller = el grid.  BOXED: el layout vive en `.e-con-inner` (hijo
	   directo).  FULL WIDTH: el layout vive en el propio contenedor. */
	.pw-mobile-slider > .e-con-inner,
	.pw-mobile-slider.e-con-full,
	.elementor-element-15c2c51 > .e-con-inner {
		display: flex;
		grid-template-columns: none; /* anula el grid de Elementor */
		flex-flow: row nowrap;
		align-items: stretch; /* tarjetas a igual altura */
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* Sangría SOLO a la izquierda: la 1ª tarjeta arranca alineada con el
		   texto de la sección (medido: +10px sobre el borde del grid), y el
		   snap respeta ese mismo inset. La derecha queda a 0 → el slider
		   sangra/"se sale" por el borde derecho (efecto buscado).
		   Ajustable por grid con la variable --pw-slider-inset. */
		padding-left: var(--pw-slider-inset, 10px);
		scroll-padding-left: var(--pw-slider-inset, 10px);
		scrollbar-width: none; /* Firefox: sin barra */
		padding-bottom: 4px;
	}

	/* WebKit/Blink: ocultar la barra de scroll. */
	.pw-mobile-slider > .e-con-inner::-webkit-scrollbar,
	.pw-mobile-slider.e-con-full::-webkit-scrollbar,
	.elementor-element-15c2c51 > .e-con-inner::-webkit-scrollbar {
		display: none;
	}

	/* Cada celda-contenedor = una "slide" con ancho fijo y punto de anclaje.
	   `.e-con` sube la especificidad a (0,3,0) para ganar a cualquier width
	   por-elemento de Elementor sin usar !important. */
	.pw-mobile-slider > .e-con-inner > .e-con,
	.pw-mobile-slider.e-con-full > .e-con,
	.elementor-element-15c2c51 > .e-con-inner > .e-con {
		flex: 0 0 auto;
		width: clamp(260px, 80vw, 360px);
		scroll-snap-align: start;
	}
}

/* La sangría para alinear la 1ª tarjeta con el texto depende del padding
   propio de la sección, que cambia en el corte móvil/tablet (767px):
   - MÓVIL (<=767px): la sección va a sangre completa (padding 0) → la tarjeta
     arranca en el borde, así que el inset = gutter móvil del sitio (16px).
   - TABLET (768–1024px): la sección ya tiene ~50px de padding y el texto cae a
     ~60px, así que basta el default de 10px (arriba).
   Por eso subimos la variable a 16px solo en móvil. Si aplicas la clase a otro
   grid con distinto padding, ajusta --pw-slider-inset en ese grid. */
@media (max-width: 767px) {
	.pw-mobile-slider > .e-con-inner,
	.pw-mobile-slider.e-con-full,
	.elementor-element-15c2c51 > .e-con-inner {
		--pw-slider-inset: 16px;
	}
}