/*
 Theme Name:   Sports Club Child
 Theme URI:    http://cmsmasters.net/sports-club/
 Description:  Sports Club Child Theme
 Author:       cmsmasters
 Author URI:   http://cmsmasters.net/
 Template:     sports-club
 Version:      1.0.0
 License:
 License URI:
 Text Domain:  sports-club-child
 Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/


/* ============================================================
   JUGAMOS EN EQUIPO - Estilos propios
   Cuestion de Imagen

   INDICE
     1. Variables comunes
     2. Rotulo de cabecera            .cdi-imp
     3. Titulo animado de seccion     .cdi-tit
     4. Bloque de llamada             .cdi-cta
     5. Tarjetas Top Deportes         .cdi-top
   ============================================================ */


/* ------------------------------------------------------------
   1. VARIABLES COMUNES
   ------------------------------------------------------------ */

:root {
	--cdi-verde-osc:  #14432f;   /* verde de tarjetas y franjas */
	--cdi-verde:      #0f7a52;   /* verde del rotulo */
	--cdi-oro:        #f5d117;   /* amarillo Caja Rural */
	--cdi-oro-claro:  #fff3a8;   /* brillo del amarillo */
	--cdi-oro-suave:  #e9b949;   /* dorado apagado, para filos */
	--cdi-azul:       #1b2a5e;   /* azul de la extrusion */
}

/* ------------------------------------------------------------
   2. ROTULO DE CABECERA

   HTML actual (cabecera, una linea centrada):
     <span class="cdi-imp cdi-imp--centro">
         <span class="cdi-imp__l">Jugamos en Equipo</span>
     </span>

   Variante en dos lineas (para el hero o una pagina):
     <span class="cdi-imp cdi-imp--xl">
         <span class="cdi-imp__l cdi-imp__l--min">Jugamos</span>
         <span class="cdi-imp__l cdi-imp__l--max">en Equipo</span>
     </span>

   Requiere la fuente Anton (se carga desde functions.php).
   ------------------------------------------------------------ */

.cdi-imp {
	--imp-tam: 32px;
	--imp-grosor: 7px;

	box-sizing: border-box;
	display: inline-block;
	margin: 0 auto;
	padding: 14px 26px 18px 18px;
	overflow: visible;
	font-family: "Anton", "Archivo Black", "Arial Narrow", Impact, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	transform: rotate(-2.2deg);
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}

.cdi-imp__l {
	display: block;
	margin: 0;
	overflow: visible;
	color: var(--cdi-verde);
	font-size: var(--imp-tam);
	line-height: 1.04;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transform: skewX(-7deg);

	/* Contorno amarillo por detras del relleno verde */
	-webkit-text-stroke: var(--imp-grosor) var(--cdi-oro);
	paint-order: stroke fill;

	/* Extrusion azul marino hacia abajo y derecha */
	text-shadow:
		2px 2px 0 var(--cdi-azul),
		4px 4px 0 var(--cdi-azul),
		6px 6px 0 var(--cdi-azul),
		8px 9px 12px rgba(0, 0, 0, 0.3);
}

/* Lineas de la variante en dos alturas */

.cdi-imp__l--min {
	margin-left: 13%;
	font-size: calc(var(--imp-tam) * 0.54);
	-webkit-text-stroke-width: calc(var(--imp-grosor) * 0.62);
}

.cdi-imp__l--max {
	font-size: var(--imp-tam);
}


/* --- Variante de cabecera: una linea, centrada y con aire --- */

.cdi-imp--centro {
	--imp-tam: clamp(28px, 4.2vw, 62px);
	--imp-grosor: clamp(6px, 1vw, 13px);

	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	padding: 46px 90px 56px;
	text-align: center;
	transform: rotate(-1.4deg);
}

.cdi-imp--centro .cdi-imp__l {
	letter-spacing: 0.03em;
}


/* --- Variante grande para el hero o una pagina --- */

.cdi-imp--xl {
	--imp-tam: clamp(34px, 8.5vw, 100px);
	--imp-grosor: clamp(7px, 1.8vw, 20px);
}


/* --- Contenedores del tema: ni flotan, ni encogen, ni recortan --- */

.header_html,
.cmsmasters_header_html,
.header_mid .header_html {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	text-align: center;
}

.header_html,
.cmsmasters_header_html,
.header_mid,
.header_mid_inner,
.header_inner,
#header,
#middle,
#page {
	overflow: visible !important;
}


/* --- Tamanos por pantalla --- */

@media only screen and (max-width: 1300px) {
	.cdi-imp {
		--imp-tam: 26px;
		--imp-grosor: 6px;
	}
}

@media only screen and (max-width: 1024px) {
	.cdi-imp {
		--imp-tam: 22px;
		--imp-grosor: 5px;

		padding: 6px 8px 9px;
	}

	.cdi-imp--centro {
		padding: 28px 30px 34px;
	}
}

@media only screen and (max-width: 480px) {
	.cdi-imp {
		--imp-tam: 18px;
		--imp-grosor: 4px;
	}

	.cdi-imp--centro {
		padding: 20px 16px 26px;
	}
}
.cdi-imp--centro {
	padding: 46px 160px 56px !important;
	max-width: 100% !important;
	width: auto !important;
}
/* ------------------------------------------------------------
   3. TITULO ANIMADO DE SECCION
   HTML: <p class="cdi-tit">
             <span class="cdi-tit__a">Top</span>
             <span class="cdi-tit__b">Deportes</span>
             <span class="cdi-tit__barra"></span>
         </p>
   ------------------------------------------------------------ */

.cdi-tit {
	position: relative;
	display: inline-block;
	margin: 0 0 6px !important;
	padding: 0 0 16px;
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.05;
	text-transform: uppercase;
}

.cdi-tit__a {
	color: #ffffff;
}

/* Palabra dorada con un brillo que la recorre */
.cdi-tit__b {
	background-image: linear-gradient(
		100deg,
		var(--cdi-oro) 0%,
		var(--cdi-oro) 38%,
		var(--cdi-oro-claro) 48%,
		#ffffff 52%,
		var(--cdi-oro-claro) 56%,
		var(--cdi-oro) 66%,
		var(--cdi-oro) 100%
	);
	background-size: 260% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--cdi-oro);
	-webkit-text-fill-color: transparent;
	animation: cdi-brillo 6.5s ease-in-out 1.2s infinite;
}

@keyframes cdi-brillo {
	0%   { background-position: 100% 0; }
	28%  { background-position: 0 0; }
	100% { background-position: 0 0; }
}

/* Barra que se despliega al cargar */
.cdi-tit__barra {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 0;
	height: 4px;
	background: linear-gradient(
		90deg,
		#ffffff 0%,
		#ffffff 22%,
		var(--cdi-oro) 22%,
		var(--cdi-oro) 100%
	);
	animation: cdi-barra 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes cdi-barra {
	from { width: 0; }
	to   { width: 84px; }
}


/* ------------------------------------------------------------
   4. BLOQUE DE LLAMADA
   HTML: <div class="cdi-cta">
             <p class="cdi-cta__tit">Registrate</p>
             <p class="cdi-cta__sub">... <span class="cdi-cta__hl">destacado</span></p>
         </div>
   ------------------------------------------------------------ */

.cdi-cta {
	max-width: 620px;
}

.cdi-cta .cdi-cta__tit {
	position: relative;
	margin: 0 0 22px !important;
	padding: 0 0 18px;
	color: #ffffff;
	font-size: clamp(30px, 4.2vw, 54px);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.02;
	text-transform: uppercase;
}

.cdi-cta .cdi-cta__tit:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 4px;
	background: var(--cdi-oro);
	animation: cdi-cta-barra 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes cdi-cta-barra {
	from { width: 0; }
	to   { width: 96px; }
}

.cdi-cta .cdi-cta__sub {
	margin: 0 !important;
	color: #ffffff;
	font-size: clamp(16px, 1.9vw, 25px);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.42;
	text-transform: uppercase;
}

/* Palabras destacadas, con trazo dorado por debajo */
.cdi-cta .cdi-cta__hl {
	position: relative;
	display: inline-block;
	color: var(--cdi-oro);
	white-space: nowrap;
}

.cdi-cta .cdi-cta__hl:after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--cdi-oro);
	opacity: 0.35;
	transform: scaleX(0);
	transform-origin: left center;
	animation: cdi-cta-traza 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cdi-cta .cdi-cta__sub .cdi-cta__hl:nth-of-type(1):after { animation-delay: 0.75s; }
.cdi-cta .cdi-cta__sub .cdi-cta__hl:nth-of-type(2):after { animation-delay: 1s; }

@keyframes cdi-cta-traza {
	to { transform: scaleX(1); }
}

@media only screen and (max-width: 600px) {
	.cdi-cta {
		text-align: center;
	}

	.cdi-cta .cdi-cta__tit:after {
		left: 50%;
		transform: translateX(-50%);
	}

	.cdi-cta .cdi-cta__hl {
		white-space: normal;
	}
}


/* ------------------------------------------------------------
   5. TARJETAS TOP DEPORTES
   Featured Blocks del Content Composer con la clase cdi-top.
   ------------------------------------------------------------ */

.cdi-top .featured_block_inner {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cdi-top .featured_block_inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
}

/* Recorta tambien lo que va dentro */
.cdi-top .featured_block_inner > * {
	overflow: hidden;
	border-radius: 12px;
}

.cdi-top .featured_block_inner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px 12px 0 0 !important;
}

/* Filo dorado inferior que crece al pasar por encima */
.cdi-top .featured_block_inner:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	width: 38%;
	height: 3px;
	background: var(--cdi-oro-suave);
	opacity: 0.6;
	transition: width 0.28s ease, opacity 0.28s ease;
}

.cdi-top .featured_block_inner:hover:after {
	width: 100%;
	opacity: 1;
}

/* Franja del titulo en verde en vez de negro */
.cdi-top .featured_block_text {
	padding: 16px 14px !important;
	border-radius: 0 0 12px 12px !important;
	background: var(--cdi-verde-osc) !important;
}

.cdi-top .featured_block_text,
.cdi-top .featured_block_text * {
	color: #ffffff !important;
	font-size: 0.86rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}


/* ------------------------------------------------------------
   PREFERENCIAS DE MOVIMIENTO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.cdi-tit__b {
		animation: none;
		background-image: none;
		color: var(--cdi-oro);
		-webkit-text-fill-color: var(--cdi-oro);
	}

	.cdi-tit__barra {
		width: 84px;
		animation: none;
	}

	.cdi-cta .cdi-cta__tit:after {
		width: 96px;
		animation: none;
	}

	.cdi-cta .cdi-cta__hl:after {
		transform: scaleX(1);
		animation: none;
	}

	.cdi-top .featured_block_inner,
	.cdi-top .featured_block_inner:after {
		transition: none;
	}

	.cdi-top .featured_block_inner:hover {
		transform: none;
	}
}