/* Pavigym · Portada 1.0.0 — rediseño de la portada de pavigym.com (27-09-2026)
 * Solo estilos: mismo contenido, mismas secciones y mismo orden. Todo cuelga de body.home (la portada de cada idioma).
 * El lenguaje del megamenú, el blog, el pie y los formularios: Outfit, azul marino #15263a, azul Pavigym #05a3de,
 * fondos gris azulado, tarjetas con esquinas de 12-16 px, antetítulos pequeños en mayúsculas y botones en píldora con la
 * flecha en círculo.
 * Secciones: 1 hero · 2 «High quality gym flooring range» y sus 6 tarjetas de zonas · 3 slider (CrossFit / BigJag) ·
 * 4 «Your partner from A to Z» · 5 blog · 6 «Our story» · 7 prensa. */

body.home {
	--pv-marino: #15263a;
	--pv-noche: #0e1325;
	--pv-azul: #05a3de;
	--pv-azul-hover: #0491c5;
	--pv-azul-claro: #eaf2fb;
	--pv-fondo: #f5f8fb;
	--pv-gris: #5b6b7c;
	--pv-linea: #e3e9ef;
	--pv-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1l5 5-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--pv-flecha-marino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1l5 5-5 5' fill='none' stroke='%2315263a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 1 · hero */
body.home .home-hero-new { position: relative; isolation: isolate; }
body.home .home-hero-new::before {
	/* el tema le da display: table (clearfix de vc_row): sin display block no ocupa nada */
	content: '' !important; display: block !important; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%;
	z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgba(14,19,37,.82) 0%, rgba(14,19,37,.55) 38%, rgba(14,19,37,.12) 68%, rgba(14,19,37,0) 100%),
		linear-gradient(0deg, rgba(14,19,37,.45) 0%, rgba(14,19,37,0) 35%);
}
body.home .home-hero-new h1 {
	max-width: 15ch; margin: 0 0 22px !important;
	font-size: clamp(44px, 4.4vw, 78px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.03em !important;
	color: #fff !important;
}
body.home .home-hero-new .wpb_text_column p {
	max-width: 520px; margin: 0 !important;
	font-size: 20px !important; font-weight: 400 !important; line-height: 1.5 !important; color: rgba(255,255,255,.88) !important;
}
body.home .home-hero-new .vc_btn3-container { margin-top: 34px !important; }
body.home .home-hero-new .vc_btn3 {
	/* el tema le fija 305 px de ancho: que mida lo que su texto y la flecha */
	display: inline-flex !important; align-items: center; gap: 14px; width: auto !important; min-width: 0 !important; max-width: max-content;
	padding: 8px 8px 8px 26px !important; border: 0 !important; border-radius: 999px !important;
	background: var(--pv-azul) !important; box-shadow: 0 14px 30px rgba(5,163,222,.32) !important;
	font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .12em !important; text-transform: uppercase;
	color: #fff !important; transition: background .15s, transform .15s;
}
body.home .home-hero-new .vc_btn3::after {
	content: ''; display: inline-block; width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,.2) var(--pv-flecha) center / 16px 12px no-repeat;
}
body.home .home-hero-new .vc_btn3:hover { background: var(--pv-azul-hover) !important; transform: translateY(-1px); }

/* ------------------------------------------------------------------ títulos de sección (h2 de la portada) */
body.home h2.vc_custom_heading.txtPramaFontSub {
	position: relative; margin-bottom: 14px !important; padding-top: 22px !important;
	font-size: clamp(30px, 2.6vw, 44px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.02em !important;
	color: var(--pv-marino) !important;
}
/* la raya larga de la izquierda pasa a ser la raya corta azul de encima (la de las tarjetas del megamenú y el blog) */
body.home .wpb_wrapper h2.vc_custom_heading.txtPramaFontSub::before {
	/* el tema le pone relleno y un borde inferior de 4 px: fuera */
	padding: 0 !important; border: 0 !important;
	content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
	width: 44px !important; height: 3px !important; margin: 0 !important; border-radius: 2px; background: var(--pv-azul) !important; transform: none !important;
}
body.home .wpb_wrapper h2.vc_custom_heading.txtPramaFontSub[style*='center']::before { left: 50% !important; transform: translateX(-50%) !important; }
/* aire entre secciones: los títulos que van detrás de otra sección en la misma columna (partner, blog, story, prensa) */
body.home .wpb_wrapper > * + h2.vc_custom_heading.txtPramaFontSub { margin-top: 96px !important; }
/* el texto que va debajo de un título ocupa todo el ancho de su sección (el tema le deja 30 px de sangría). «~» y no
   «+»: en la portada en español entre el título y el texto va un subtítulo del tema (section-title) */
body.home h2.vc_custom_heading.txtPramaFontSub ~ .wpb_text_column,
body.home h2.vc_custom_heading.txtPramaFontSub ~ .wpb_text_column > .wpb_wrapper { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.home h2.vc_custom_heading.txtPramaFontSub ~ .wpb_text_column p { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.home h2.vc_custom_heading.txtPramaFontSub + .wpb_text_column p {
	font-size: 18px !important; line-height: 1.6 !important; color: var(--pv-gris) !important;
}

/* ------------------------------------------------------------------ 2 · tarjetas de zonas (Rella content-box) */
body.home .content-box.content-box-img-info {
	position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: auto !important; margin: 0 6px 24px !important; overflow: hidden;
	border: 0 !important; border-radius: 16px; background: #fff;
	box-shadow: 0 1px 0 var(--pv-linea), 0 14px 34px rgba(21,38,58,.08);
	text-align: left !important; transition: transform .25s ease, box-shadow .25s ease;
}
body.home .content-box.content-box-img-info:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--pv-linea), 0 24px 48px rgba(21,38,58,.16); }
body.home .content-box.content-box-img-info figure { margin: 0 !important; overflow: hidden; aspect-ratio: 4 / 3; }
body.home .content-box.content-box-img-info figure img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
body.home .content-box.content-box-img-info:hover figure img { transform: scale(1.05); }
/* el enlace que el tema enseña al pasar el ratón repite el título: pasa a cubrir toda la tarjeta, sin verse (toda la
   tarjeta lleva a su página, como las del blog). El texto sigue ahí para los lectores de pantalla. */
body.home .content-box.content-box-img-info figure .btn {
	position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 3;
	display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 16px !important; background: none !important; opacity: 1 !important; transform: none !important;
	font-size: 0 !important; color: transparent !important;
}
body.home .content-box.content-box-img-info figure .btn span,
body.home .content-box.content-box-img-info figure .btn i { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.home .content-box.content-box-img-info figure .btn:focus-visible { outline: 3px solid var(--pv-azul); outline-offset: -3px; }
body.home .content-box.content-box-img-info figure { position: static !important; }
body.home .content-box.content-box-img-info figure::before { content: none !important; } /* el velo del tema al pasar el ratón */
body.home .content-box.content-box-img-info .content-box-content { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 26px !important; }
body.home .content-box.content-box-img-info .content-box-info {
	order: -1; display: block; margin: 0 0 8px !important;
	font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .14em !important; color: var(--pv-azul) !important;
}
body.home .content-box.content-box-img-info .content-box-info br { display: none; }
body.home .content-box.content-box-img-info h3 {
	margin: 0 0 12px !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important;
	letter-spacing: -.01em !important; text-transform: none !important; color: var(--pv-marino) !important;
}
body.home .content-box.content-box-img-info h3::after { content: ''; display: block; width: 34px; height: 2px; margin-top: 12px; background: var(--pv-azul); }
body.home .content-box.content-box-img-info .content-box-content p {
	margin: 0 !important; text-align: left !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--pv-gris) !important;
}

/* las dos filas de tarjetas de zonas, más juntas: 18 px + los 24 px de margen de la tarjeta = los 42 px que hay entre
   tarjetas en horizontal (el editor le da 140 px a la primera fila). La clase la pone portada.js. */
body.home .vc_row.pv-zonas-sigue { padding-bottom: 18px !important; margin-bottom: 0 !important; }
/* misma altura en toda la sección (las 6 tarjetas, aunque vayan en dos filas): la pone portada.js con min-height, a partir
   de la altura natural de cada una (un height: 100% las estiraría hasta su columna, que incluye el margen) */

/* ------------------------------------------------------------------ 3 · slider (Slider Revolution)
   Se queda como está: sus capas llevan estilos propios y el módulo se sale de su caja para ir a todo el ancho (un
   overflow: hidden lo recorta). Sus botones se cambian en el editor de Slider Revolution, no aquí. */

/* ------------------------------------------------------------------ 4 · «Your partner from A to Z» (Rella icon-box) */
body.home .icon-box.icon-box-boxed-unfilled {
	box-sizing: border-box; height: auto !important; margin: 0 6px !important; padding: 34px 30px 32px !important;
	border: 0 !important; border-radius: 16px; background: var(--pv-fondo) !important; text-align: left !important;
	transition: background .2s, box-shadow .2s;
}
body.home .icon-box.icon-box-boxed-unfilled:hover { background: #fff !important; box-shadow: 0 18px 40px rgba(21,38,58,.10); }
body.home .icon-box.icon-box-boxed-unfilled .icon-container {
	display: inline-grid !important; place-items: center; width: 58px !important; height: 58px !important; margin: 0 0 24px !important;
	border: 0 !important; border-radius: 16px; background: var(--pv-azul-claro) !important; color: var(--pv-azul) !important; font-size: 24px !important;
}
body.home .icon-box.icon-box-boxed-unfilled .icon-container i { color: var(--pv-azul) !important; font-size: 24px !important; }
body.home .icon-box.icon-box-boxed-unfilled h3 {
	margin: 0 0 14px !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.01em;
	text-align: left !important; color: var(--pv-marino) !important;
}
/* el tema le pone 14 px de alto y un borde inferior amarillo de 4 px */
body.home .icon-box.icon-box-boxed-unfilled h3::after { width: 34px !important; height: 2px !important; margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important; background: var(--pv-azul) !important; }
body.home .icon-box.icon-box-boxed-unfilled .contents p { margin: 0 !important; padding: 0 !important; }
body.home .icon-box.icon-box-boxed-unfilled .contents p,
body.home .icon-box.icon-box-boxed-unfilled .contents p span {
	text-align: left !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--pv-gris) !important;
}

/* ------------------------------------------------------------------ 5 · blog (las mismas tarjetas que /blog) */
body.home .blog-posts.masonry-creative article.blog-post {
	overflow: hidden; border-radius: 12px; transition: transform .25s ease, box-shadow .25s ease;
}
body.home .blog-posts.masonry-creative article.blog-post:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(21,38,58,.24); }
body.home .blog-posts.masonry-creative article.blog-post .post-image img { transition: transform .6s ease; }
body.home .blog-posts.masonry-creative article.blog-post:hover .post-image img { transform: scale(1.05); }
body.home .blog-posts.masonry-creative .post-contents { background: linear-gradient(180deg, rgba(21,38,58,0) 0%, rgba(21,38,58,.55) 35%, rgba(21,38,58,.95) 100%) !important; }
/* la categoría, en píldora como en /blog: el tema le quita el relleno con una regla más específica y !important */
body.home .blog-posts.masonry-creative article.blog-post .post-info .tags { display: inline-flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 12px !important; }
body.home .blog-posts.masonry-creative article.blog-post .post-info .tags a {
	display: inline-block !important; margin: 0 !important; padding: 5px 14px !important; border: 0 !important; border-radius: 20px !important;
	background: var(--pv-azul) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.3 !important;
	letter-spacing: .1em !important; text-transform: uppercase; color: #fff !important;
	transition: background .15s, color .15s !important; /* el tema le pone «transition: all .3s»: la píldora «crecía» al cargar */
}
body.home .blog-posts.masonry-creative article.blog-post .post-info .tags a:hover { background: #fff !important; color: var(--pv-marino) !important; }
body.home .blog-posts.masonry-creative .entry-title,
body.home .blog-posts.masonry-creative .entry-title a { font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.01em; color: #fff !important; }
body.home .blog-posts.masonry-creative .entry-title::after { content: ''; display: block; width: 34px; height: 2px; margin-top: 12px; background: var(--pv-azul); }
body.home .blog-posts.masonry-creative .post-info time { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85) !important; }
body.home .blog-posts.masonry-creative .post-info .author { display: none !important; }

/* ------------------------------------------------------------------ 6 · «Our story» */
body.home h2.vc_custom_heading.txtPramaFontSub ~ .wpb_text_column p { font-size: 16.5px !important; line-height: 1.75 !important; color: #3d4b5b !important; }
body.home .btn.btn-underlined {
	display: inline-flex !important; align-items: center; gap: 12px; margin-top: 14px;
	padding: 14px 18px 14px 26px !important; border: 1.5px solid var(--pv-marino) !important; border-radius: 999px !important;
	background: transparent !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .12em !important;
	text-transform: uppercase; color: var(--pv-marino) !important; transition: background .15s, color .15s;
}
body.home .btn.btn-underlined::before { display: none !important; }
body.home .btn.btn-underlined::after { content: ''; width: 16px; height: 12px; background: var(--pv-flecha-marino) center / contain no-repeat; }
body.home .btn.btn-underlined:hover { background: var(--pv-marino) !important; color: #fff !important; }
body.home .btn.btn-underlined:hover::after { background-image: var(--pv-flecha); }

/* ------------------------------------------------------------------ 7 · prensa (logos) */
body.home figure.client-opaque-inverted { padding: 18px 10px; border-radius: 12px; transition: background .2s; }
body.home figure.client-opaque-inverted img { filter: grayscale(1); opacity: .55 !important; transition: opacity .2s, filter .2s; }
body.home figure.client-opaque-inverted:hover { background: var(--pv-fondo); }
body.home figure.client-opaque-inverted:hover img { filter: none; opacity: 1 !important; }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 767px) {
	body.home .home-hero-new::before { background: linear-gradient(180deg, rgba(14,19,37,.35) 0%, rgba(14,19,37,.78) 100%); }
	body.home .home-hero-new .wpb_text_column p { font-size: 17px !important; }
	body.home .content-box.content-box-img-info, body.home .icon-box.icon-box-boxed-unfilled { margin: 0 0 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
	body.home .content-box, body.home .content-box img, body.home article.blog-post, body.home article.blog-post img { transition: none !important; }
	body.home .content-box:hover, body.home article.blog-post:hover { transform: none; }
}