/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/*
 * Avada's own Theme Options already drive color (--awb-color1..8),
 * typography (--awb-typography*, Audiowide/Poppins) and button styles
 * per element. Do not redeclare those here — it fights the builder's
 * per-element settings and silently overrides intentional choices.
 * This file is only for things Avada has no setting for.
 */

/* En móvil, palabras largas sin espacios (mayúsculas pegadas, paréntesis
   pegado, una sola palabra) no rompen de línea por defecto; si no caben en su
   caja, se desbordan en vez de pasar a la siguiente línea, y como muchas
   cajas (tarjetas, títulos de sección) tienen bordes redondeados con
   overflow:hidden, el texto queda cortado visualmente. Dejamos que rompan
   solo cuando no caben, sin afectar al resto del texto. */
h1, h2, h3, h4, h5, h6, p {
	overflow-wrap: break-word;
}

/* Títulos de las 8 tarjetas de servicios (fusion-builder-row-5, /servicios/):
   en móvil "TELECOMUNICACIONES" no cabe en la tarjeta ni partiendo la palabra
   en dos líneas sin quedar muy ajustado. Reducimos el tamaño de las 8 tarjetas
   de esa fila a la vez (no solo las 2 que desbordaban) para que mantengan el
   mismo tamaño entre sí; el overflow-wrap de arriba sigue de red de seguridad
   para el resto de anchos. Tamaño elegido probando en el navegador hasta que
   ninguna de las 8 desborde ni corte texto en su tarjeta (que tiene overflow:
   hidden por las esquinas redondeadas). */
@media (max-width: 800px) {
	.fusion-builder-row-5 h2.fusion-title-heading {
		font-size: 19px !important;
	}
}

/* Eliminar padding superior del hero */
.fusion-builder-row-3 {
	--awb-padding-top: 0px !important;
	padding-top: 0 !important;
}

/* Texto oscuro en hover para botones de formulario con fondo menta */
button.fusion-button {
	--button_accent_hover_color: #2d333b !important;
}

/* Marquee de logos de clientes */
.vcm-wrap {
	position: relative;
	padding: 0;
}
.vcm-pause-toggle {
	position: absolute;
	top: -6px;
	right: 20px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: #346767;
	border: none;
	border-radius: 50%;
	color: #92c5bc;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.vcm-pause-toggle:hover,
.vcm-pause-toggle:focus-visible {
	background-color: #ffffff;
	color: #346767;
}
.vcm-pause-toggle svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}
.vcm-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.vcm-track {
	display: flex;
	align-items: center;
	gap: clamp(28px, 4.2vw, 50px);
	width: max-content;
	animation: vcm-scroll 65s linear infinite;
}
.vcm-wrap.vcm-paused .vcm-track {
	animation-play-state: paused;
}
.vcm-item {
	display: inline-flex;
	align-items: center;
	opacity: 0.55;
	transition: opacity 0.18s ease;
	cursor: default;
	user-select: none;
}
.vcm-item:hover {
	opacity: 1;
}
.vcm-tooltip {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 4px 9px;
	background: rgba(45, 51, 59, 0.9);
	color: #ffffff;
	font-family: var(--awb-typography1-font-family, Poppins, sans-serif);
	font-size: 11px;
	font-weight: 500;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
	z-index: 6;
}
.vcm-tooltip.is-visible {
	opacity: 1;
}
.vcm-logo {
	height: 144px;
	width: auto;
	display: block;
	filter: grayscale(1) brightness(1.6) contrast(0.85);
	transition: filter 0.18s ease;
}
.vcm-item:hover .vcm-logo {
	filter: none;
}
/* Excepciones puntuales de tamaño (ver GUIA-LOGOS-CARRUSEL.md) */
.vcm-logo--xl {
	height: 187px; /* Telefónica: +30% sobre 144px */
}
.vcm-logo--sm {
	height: 101px; /* Ericsson: -30% sobre 144px */
}
.vcm-logo--sm20 {
	height: 115px; /* Onlycable: -20% sobre 144px */
}
@keyframes vcm-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.vcm-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: 32px;
		width: 100%;
	}
	.vcm-pause-toggle {
		display: none;
	}
}

/* Foco visible para navegación por teclado */
:focus-visible {
	outline: 2px solid #2d333b;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--awb-color4);
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Botón de accesibilidad (Pojo Accessibility): nunca lo queremos flotante.
   Los accesos reales están inyectados por varda_accessibility_alt_buttons()
   en functions.php (icono en la barra superior del header en desktop, enlace
   "Herramientas de accesibilidad" junto a "Accesibilidad" en el footer para
   el resto de anchos, incluido móvil). Ambos abren el mismo panel del
   plugin; el botón flotante propio del plugin queda oculto siempre. */
body .pojo-a11y-toolbar-toggle {
	display: none !important;
}

/* Enlace "Herramientas de accesibilidad" del footer (inyectado por
   varda_accessibility_alt_buttons() en functions.php): no tiene href real,
   solo abre el panel por JS, así que marcamos el cursor como affordance
   aunque visualmente sea igual que el resto de enlaces del footer.
   La regla global de Avada que subraya los enlaces del footer al hover
   excluye explícitamente [role="button"] (".awb-link-decoration ... a:not(
   ...):not([role=\"tab\"], [role=\"button\"]):hover"); este enlace lleva
   role="button" a propósito (no navega, solo abre el panel), así que hay
   que replicar el subrayado a mano para que se comporte igual que sus
   vecinos ("Aviso Legal", "Política de Privacidad"...). */
.varda-a11y-footer-trigger {
	cursor: pointer;
}
.varda-a11y-footer-trigger:hover {
	text-decoration: underline;
}

/* Footer: en desktop el párrafo de copyright/legales usa saltos de línea
   (<br>, sin "|") entre "Aviso Legal"/"Política de Privacidad" y entre
   "Accesibilidad"/"Herramientas de accesibilidad" (ver varda_accessibility_
   alt_buttons() en functions.php). En pantallas pequeñas ese párrafo se
   reordena en vertical y queremos que todo vaya seguido separado por "|",
   dejando solo "Diseño | Ecomputer" en su propia línea (ese salto sí es
   nativo del footer y no se toca aquí). Se alterna con un <br> y un <span>
   con "|" insertados juntos por JS; aquí solo se decide cuál se ve. */
@media (max-width: 800px) {
	.varda-footer-br-responsive {
		display: none;
	}
}
@media (min-width: 801px) {
	.varda-footer-pipe-responsive {
		display: none;
	}
}