/*
Theme Name: Crear SGR
Template: hello-elementor
Version: 1.0.0
Text Domain: crearsgr
*/

/* =========================================================
   ANCHOS Y ESPACIADOS — REFERENCIA
   Las clases se crean en el sistema de clases de Elementor.
   Este bloque es solo la chuleta: copiar de aquí el valor
   y pegarlo en el campo correspondiente del panel.

   Escala (valor en escritorio):
     xxs =  10px (fijo)
     xs  =  20px (fijo)
     s   =  40px   ( 20 -> 40 )
     m   =  60px   ( 30 -> 60 )
     l   = 100px   ( 50 -> 100 )
     xl  = 160px   ( 80 -> 160 )
   ========================================================= */

/* ESTA LÍNEA DEBE QUEDAR ACTIVA: las clases de Elementor la referencian */
:root {
	--z-esp-u: clamp(0.625rem, 0.386rem + 1.064vw, 1.25rem); /* 10px -> 20px */
}

/* ---------------------------------------------------------
   ANCHOS
   Panel: Size > Width 100% + Max width
          Spacing > Margin Left/Right = AUTO

   .z-ancho-md   max-width: 1300px
   .z-ancho-sm   max-width:  800px
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   FIJOS — se pegan como valor normal en REM, sin fx
   (comprimir un hueco ya pequeño lo deja demasiado justo)

   .z-mar-t-xxs / .z-mar-b-xxs    margin  0.625rem
   .z-mar-t-xs  / .z-mar-b-xs     margin  1.25rem
   .z-pad-t-xxs / .z-pad-b-xxs    padding 0.625rem
   .z-pad-t-xs  / .z-pad-b-xs     padding 1.25rem
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   FLUIDOS — se pegan en el campo fx del panel

   .z-mar-t-s  / .z-mar-b-s     calc(var(--z-esp-u) * 2)    20 -> 40
   .z-mar-t-m  / .z-mar-b-m     calc(var(--z-esp-u) * 3)    30 -> 60
   .z-mar-t-l  / .z-mar-b-l     calc(var(--z-esp-u) * 5)    50 -> 100
   .z-mar-t-xl / .z-mar-b-xl    calc(var(--z-esp-u) * 8)    80 -> 160

   .z-pad-t-s  / .z-pad-b-s     calc(var(--z-esp-u) * 2)
   .z-pad-t-m  / .z-pad-b-m     calc(var(--z-esp-u) * 3)
   .z-pad-t-l  / .z-pad-b-l     calc(var(--z-esp-u) * 5)
   .z-pad-t-xl / .z-pad-b-xl    calc(var(--z-esp-u) * 8)
   --------------------------------------------------------- */

/* =========================================================
   MENÚ MÓVIL — SUBMENÚ DENTRO DEL OFF-CANVAS
   SmartMenus posiciona el submenu en linea como desplegable
   flotante de escritorio. Dentro del panel lateral tiene que
   comportarse como un bloque en flujo normal.
   Los !important son necesarios: los estilos rivales vienen
   en el atributo style del propio elemento.
   ========================================================= */

.e-off-canvas .elementor-nav-menu .sub-menu {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	box-shadow: none !important;
}

/* Apertura suave */
@media (prefers-reduced-motion: no-preference) {
	.e-off-canvas .elementor-nav-menu .sub-menu[aria-expanded="true"] {
		animation: z-sub-abrir 0.25s ease;
	}
}

@keyframes z-sub-abrir {
	from { opacity: 0; transform: translateY(-0.35rem); }
	to   { opacity: 1; transform: none; }
}

/* La flecha gira al abrir */
.e-off-canvas .elementor-nav-menu .has-submenu .sub-arrow svg {
	transition: transform 0.25s ease;
}

.e-off-canvas .elementor-nav-menu .has-submenu[aria-expanded="true"] .sub-arrow svg {
	transform: rotate(180deg);
}
/* --- Entrada suave del velo del Off-Canvas ------------------- */
.e-off-canvas__overlay {
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.e-off-canvas[aria-hidden="false"] .e-off-canvas__overlay {
	opacity: 1 !important;
}

/* --- Contacto con aspecto de botón ---------------------------- */

.elementor-nav-menu .zz-item-boton .elementor-item {
	display: flex;
	align-items: center;
	background-color: #000;
	color: #fff;
	border-radius: 12px;
	padding: 0.7em 1.4em!important;
	fill: #fff;
	transition: background-color 0.25s ease;
}

.elementor-nav-menu .zz-item-boton .elementor-item:hover,
.elementor-nav-menu .zz-item-boton .elementor-item:focus-visible {
	background-color: #333;
	color: #fff;
}

/* Anula el subrayado decorativo del widget solo en este item */
.elementor-nav-menu .zz-item-boton .elementor-item::before,
.elementor-nav-menu .zz-item-boton .elementor-item::after {
	display: none !important;
}
/* --- Cabecera fija -------------------------------------------- */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.elementor .z-cabecera {
	padding-block: 1.25rem;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: padding 0.3s ease, box-shadow 0.3s ease;
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(6px);
}

.elementor-location-header.z-fija .z-cabecera {
	padding-block: 0.6rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Que los anclajes no queden bajo la cabecera */
html {
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	.z-cabecera { transition: none; }
}