/*-----------------------------------------------------------------------------------
	Theme Name: ALPHA SPORT
	Theme URI: http://www.estilografica.biz
	Description: Plantilla para el sitio web ALPHA SPORT
	Author: ESTILOGRAFICA
	Author URI: http://www.estilografica.biz
	Version: 1.4
    License: GNU General Public License v2 or later
    License URI: LICENSE
    Text Domain: alpha
-----------------------------------------------------------------------------------*/
a[x-apple-data-detectors],
a[x-apple-data-detectors] *{
  color: inherit !important;
  text-decoration: none !important;
}

a[href^="tel"]{
  color: inherit;
  text-decoration: none;
}

.no-separar{ white-space: nowrap; display: inline-block;}
.entrenamiento-abbr{ white-space: nowrap; border-radius: 4px; padding: .5em; margin: .25em; display: inline-block;}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


#formulario-contacto form input, #formulario-contacto form textarea{  font-family: 'Bricolage Grotesque', serif;}
.entrenamientos{ padding: 3rem; }
.entrenamiento span:not(.entrenamiento-abbr){ display: block; border-radius: 4px; padding: .25em 0; margin-bottom: .25em}
.entrenamiento.ST span{ background: tomato; }              /* OK con negro */
.entrenamiento.SO span{ background: #f06b82; }            /* crimson ajustado (más claro) */
.entrenamiento.FI span{ background: lightsalmon; }        /* OK */
.entrenamiento.FO span{ background: lightgoldenrodyellow; } /* OK */
.entrenamiento.BA span{ background: skyblue; }            /* OK */
.entrenamiento.HY span{ background: MediumTurquoise; }    /* OK */
.entrenamiento.HX span{ background: yellow; }             /* OK */


.entrenamiento-abbr.ST { background: tomato }
.entrenamiento-abbr.SO { background:  #f06b82;  }
.entrenamiento-abbr.FI { background: lightsalmon }
.entrenamiento-abbr.FO { background: lightgoldenrodyellow }
.entrenamiento-abbr.BA { background: skyblue }
.entrenamiento-abbr.HY { background: MediumTurquoise }
.entrenamiento-abbr.HX { background: yellow }



#mapa-direccion{ position: absolute; top: 10px; left: 20px; width: 400px; min-height: 200px; background: #fff;}


.texto-shadow{
	text-shadow: 3px 3px 4px rgba( 0,0,0, 1);
}

span.titulofoto{ position: absolute; top: 2em; left: 2em; padding: .5em; border-radius: 6px; background: #000;}
.columns.is-same-height .column { min-height: min-content; }


.grad-text-lime {
	background: linear-gradient( 45deg, #fff76a 0%,
    #fe0 25%,
    #ffd500 50%,
    #66cc33 70%,
    #1b8f00 85%,
    #fe0 100%);
	background-size: 300% 300%;
	  animation: gradientTextMove 8s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900 !important;
  display: inline-block;
}

.grad-text-warm {
	background: linear-gradient( 45deg, #fe0, #ffb800, #ff7a00, #ff3c00, #fe0);
    background-size: 300% 300%;
    animation: gradientTextMove 8s ease-in-out infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  font-weight: 900 !important;
    display: inline-block;
}

@keyframes gradientTextMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.faq { background: #fff; padding: 1rem; margin-bottom: 1rem}

.texto-brutalista {
	text-shadow: 3px 3px 0 black;
}



.tachado{ text-decoration: line-through; }

.menu {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
  padding: 4px 2px;
  transition: color 0.3s ease;
}

.menu::before {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 0;
  height: 80%;
  width: 0;
  background: yellow;
  z-index: -1;
  transition: width 0.4s ease;
}

.menu:hover::before {
  width: 100%;
}

.menu:hover {
  color: #000 !important; /* Opcional: asegura que el texto no cambie de color al hacer hover */
}



.is-xtra-height { padding-top: 3rem !important; padding-bottom: 3rem !important;}
#seccion-entrenamiento .container{ margin: 3rem auto 3rem auto}
#seccion-prueba .container{ margin: 3rem auto 3rem auto}

@keyframes swipe {
  0%, 20% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-25px);
  }
  50% {
    transform: translateX(25px);
  }
  65% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

.swipe-hand {
  animation: swipe 6s infinite ease-in-out;
  display: inline-block;
}






/* Contenedor principal */
.cabecera {
  display: flex;
  flex-wrap: wrap;
}

/* Estilo común para ambas capas */
.capa-izquierda,
.capa-derecha {
  width: 50%;
  aspect-ratio: 1 / 1;

  /* Evita que el texto se desborde */
  overflow-wrap: break-word;
  word-wrap: break-word; /* compatibilidad antigua */
  word-break: break-word;

  /* También útil para prevenir desbordes horizontales */
  white-space: normal;

}




.youtube-logo{width: 20%;}
.imagenlogoalfa{ width: 6rem; }
.espaciado{
	padding: 2rem 1.5rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
}

#gotoTop { display: none; position: fixed; bottom: 1rem; right: 1rem; }
	#gotoTop.visible { display: block !important;}

.fondo-puntos{
    --dotSize: 1px; --bgSize: 4px;
	--bgPosition: calc(var(--bgSize) / 2);
	background-image: radial-gradient(
			circle at center,
			#ccc var(--dotSize),
			transparent 0
		),
		radial-gradient(circle at center, #ccc var(--dotSize), transparent 0);
	background-size: var(--bgSize) var(--bgSize);
	background-position: 0 0, var(--bgPosition) var(--bgPosition);
}


.is-big-2{
    font-size: clamp(2.75rem, -1.3128571428571432rem + 6.060714285714286vw, 4rem);
    line-height: 1 !important;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

.is-big-home{
    font-size: clamp( 1.5rem, -1.3128571428571432rem + 6.060714285714286vw, 3rem);
	font-family: 'Korolev Medium', sans-serif;
    line-height: 1 !important;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

.listado-participacion p {
    position: relative;
    border-top: 1px solid #f1f1f1;
    padding: .75em 0;
    padding-left: 40px;
    margin-bottom: 0 !important;
}

.listado-participacion p span {
    position: absolute;
    top: .75rem;
    left: 0;
}


@font-face {
    font-family: 'Korolev Medium';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Korolev Medium'), url('assets/css/fonts/Korolev Medium.woff') format('woff');
}


a.enlace { border-bottom: 1px dashed; font-family: 'Bricolage Grotesque', serif;}
a.enlace:hover { border-bottom: 1px solid;}

.fondo-puntos{
    --dotSize: 1px; --bgSize: 4px;
    --bgPosition: calc(var(--bgSize) / 2);
    background-image: radial-gradient( circle at center, #ccc var(--dotSize), transparent 0 ), radial-gradient(circle at center, #ccc var(--dotSize), transparent 0);
    background-size: var(--bgSize) var(--bgSize);
    background-position: 0 0, var(--bgPosition) var(--bgPosition);
}

/* HEADINGS */

.is-big-1{
	font-size: 7rem;
    line-height: .75 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    letter-spacing: -0.075rem;
}


.left-column {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.video-container {
    width: 90%; /* Ajuste del tamaño del video */
    aspect-ratio: 1 / 1; /* Hace que sea un cuadrado */
    position: relative;
    display: none; /* Oculto hasta que se cargue */
}



.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    text-align: center;
}





.item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 4em);
    height: calc(100% - 4em);
    background: rgba( 0, 0, 0, .75 );
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1em;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.item:hover img {
    transform: scale(1.05);
}

.item:hover .overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}





.grid-masonry {
  display: flex;
  width: 100%;
}

.grid-item {
  width: 30%; /* Ajusta según necesidad */
  margin-bottom: 10px;
}

.grid-item img {
  width: 100%;
  display: block;
  border-radius: 5px;
}

#logo { width: 150px; margin-bottom: 5px}

.columns.is-same-height .column { min-height: min-content; }
.columns.is-same-height .column .card{ height: 100%; }
.columns.is-same-height .column .box{ height: 100%; }


.brutal-box{ border-radius: 8px; border: 2px solid;}

.brutal-box.white{ box-shadow: 4px 4px 0px white; border-color: #fff; }
.brutal-box.black{ box-shadow: 4px 4px 0px black; border-color: #000; }

.parent-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    transition: .4s;
    border-radius: 25px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.toggle-container .active{ color: #000 !important}


/* MAS A MENOS */
/* Esto es el morfing del + a - de las FAQS */
.plusminus{position:relative;width:25px;height:25px;cursor:pointer}.plusminus.active:before{transform:translatey(-50%) rotate(-90deg);opacity:0}.plusminus.active:after{transform:translatey(-50%) rotate(0)}.plusminus:after,.plusminus:before{content:"";display:block;background-color:#333;position:absolute;top:50%;left:0;transition:.35s;width:100%;height:3px}.plusminus:before{transform:translatey(-50%)}.plusminus:after{transform:translatey(-50%) rotate(90deg)}

#seccion-entrenamiento .container div.contenido{ padding: 3em 2em}
#seccion-prueba .container div.contenido{ padding: 3em 2em}

/* *********************************************************************************** */
/* RESPONSIVE ***************************************************************************/
/* *********************************************************************************** */

/* ========== MOBILE-FIRST Y OPTIMIZADO ========== */

/* =========================================================
   TIPOGRAFÍA .is-big-1 — Ahora fluida con clamp() + cqw
   ========================================================= */

   /* =========================================================
      TIPOGRAFÍA .is-big-1 — clamp() + cqw
      ========================================================= */

   /* Base móvil (antes: 3.25rem) */
   .is-big-1 {
     /* font-size: 3.25rem; */
     font-size: clamp(2rem, 15cqw, 4.25rem);
   }

   .is-small-1{ font-size: .75rem !important}
   .is-big-22 {font-size: 1.75rem !important }
   .espaciado{ padding-left: 1.5rem !important;}

   .fondo-preloader{ transform:translate(-50%,-50%) scale(3);}
   .img-preloader{ transform:translate(-50%,-50%) scale(0.75); }


   /* 450px (antes: 5rem) */
   @media screen and (min-width: 450px) {
     .is-big-1 {
       /* font-size: 5rem; */
       font-size: clamp(2.5rem, 16cqw, 5rem);
     }

	 .is-small-1{ font-size: .75rem !important}
     .is-big-22 {font-size: 1.75rem !important }
     .espaciado{ padding-left: 1rem !important;}



   }

   /* 770px (antes: 7rem) */
   @media screen and (min-width: 768px) {

	 .is-small-1{ font-size: 1.5rem !important}
	 .is-big-22 {font-size: 4rem !important }
	 .espaciado{ padding-left: 2rem !important;}

     .is-big-1 {
       /* font-size: 7rem; */
       font-size: clamp(3rem, 16cqw, 8rem);
     }

     .fondo-preloader{ transform:translate(-50%,-50%) scale(5);}
     .img-preloader{ transform:translate(-50%,-50%) scale(1); }
   }

   /* 900px (antes: 9rem) */
   @media screen and (min-width: 900px) {
     .is-big-1 {
       /* font-size: 9rem; */
       font-size: clamp(3.5rem, 16cqw, 9rem);
     }
   }

   /* 1024px (antes: 9rem) */
   @media screen and (min-width: 1024px) {
     .is-big-1 {
       /* font-size: 9rem; */
       font-size: clamp(3.5rem, 7cqw, 9rem);
     }

	 .is-small-1{ font-size: .75rem !important}
	 .is-big-22 {font-size: 1.75rem !important }
	 .espaciado{ padding-left: 1.75rem !important;}


   }


   /* WIDESCREEN (antes: 6rem) */
   @media screen and (min-width: 1216px) {
     .is-big-1 {
       /* font-size: 6rem; */
       font-size: clamp(3.5rem, 8cqw, 7rem);
     }

	 .is-small-1{ font-size: 1rem !important}
	 .is-big-22 {font-size: 2.5rem !important }
	 .espaciado{ padding-left: 2rem !important;}

   }

   /* FULLHD (antes: 7rem) */
   @media screen and (min-width: 1408px) {
     .is-big-1 {
       /* font-size: 7rem; */
       font-size: clamp(4rem, 7.5cqw, 9rem);
     }

     .container:not(.is-max-desktop):not(.is-max-widescreen) {
       max-width: 1440px;
     }
   }



   /* =========================================================
      MÓVILES Y TABLETS PEQUEÑAS (hasta 1023px)
      (cambiado: ahora incluye 1024px → columnas apiladas)
      ========================================================= */
   @media screen and (max-width: 1023px) {

       .botones-menu{ display: flex; width: 100%; margin-bottom: .5em}

       .navbar-start{ padding-left: .5em}

       #logo { width: 135px; }

	 .entrenamientos{ padding: 2rem; }

     #mapa-direccion {
       left: 10px;
       width: 325px;
       min-height: 200px;
       background: #fff;
     }

     /* Capas laterales */
     .capa-izquierda,
     .capa-derecha {
       width: 100%;             /* ← apiladas hasta 1215px */
       padding-top: 1em;
       padding-bottom: 1em;
     }


     .capa-izquierda.texto,
     .capa-derecha.texto{
         aspect-ratio: unset;
    }


     /* Ajustes de secciones en móviles */
     .is-xtra-height {
       padding-top: 2rem !important;
       padding-bottom: 2rem !important;
     }

     #seccion-entrenamiento .container {
       margin: 0 !important;
     }

     #seccion-entrenamiento .container div.contenido {
       padding: 1.5em 1em;
     }

     #seccion-entrenamiento {
       padding: 1.5rem !important;
     }




     #seccion-prueba .container {
       margin: 0 !important;
     }

     #seccion-prueba .container div.contenido {
       padding: 1.5em 1em;
     }

     #seccion-prueba {
       padding: 1.5rem !important;
     }



     #video-header {
       width: 100vw;
       height: 100vw;
       margin-left: 1rem;
     }

     .imagenlogoalfa {
       width: 5rem;
     }

     .is-sinespacio-mobile {
       padding-left: 0 !important;
       padding-right: 0 !important;
     }

     .espaciado {
       padding: 1rem;
       height: auto;
       justify-content: flex-start;
     }
   }



   /* =========================================================
      COLUMNAS A DOS LADOS — SOLO DESDE 1204px+
      ========================================================= */
   @media screen and (min-width: 1204px) {


     .capa-izquierda,
     .capa-derecha {
       width: 50%;        /* ← columnas al 50% solo en widescreen real */
     }
   }



   /* =========================================================
      BREAKPOINTS EXTRA DE TU SISTEMA (vacíos para extender)
      ========================================================= */

   @media screen and (min-width: 769px) {
     /* estilos tablet o superior */

   }

   @media screen and (min-width: 1024px) {
     /* estilos desktop o superior — YA NO se activan columnas */


   }

   @media screen and (min-width: 1024px) and (max-width: 1215px) {
     /* solo desktop */
   }

   @media screen and (min-width: 1216px) and (max-width: 1407px) {
     /* solo widescreen */
   }


/* *********************************************************************************** */
/* EXTERNOS ************************************************************************** */
/* *********************************************************************************** */



/** TOOLTIPS **/
.tiptop{ position: absolute; z-index: 9999; max-width: 300px; padding: 1rem; font: 1em/1.2em "Poppins", Arial, sans-serif; color: #666; background: #f1f1f1; border-radius: 3px; font-weight: 300}

/** ICONOS **/

.feather { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }

.margen-negativo { margin-bottom: -0.25rem}

.feather.contexto { margin-left: calc(-.5em - 1px); margin-right: 0.5em}
.feather.sintexto { margin-top: 0.25rem; }
.feather.i14 { width: 14px; height: 14px}
.feather.i16 { width: 16px; height: 16px}
.feather.i18 { width: 18px; height: 18px}
.feather.i20 { width: 20px; height: 20px}
.feather.i24 { width: 24px; height: 24px}
.feather.i36 { width: 36px; height: 36px}
.feather.i40 { width: 40px; height: 40px}
.feather.i48 { width: 48px; height: 48px}

.feather.bold { stroke-width: 4; }
.feather.filled { fill: currentColor }
.feather.filled-light { fill: currentColor; stroke: #fff }
.feather.filled-dark { fill: currentColor; stroke: #000 }

.feather.texto{ vertical-align: sub; }

.icon i { font-style: normal }

/** TOOLTIPS **/
.tiptop{ position: absolute; z-index: 9999; max-width: 300px; padding: 1rem; font: 1em/1.2em "Bricolage Grotesque", Arial, sans-serif; color: #000; background: #fff; font-weight: 500; box-shadow: 8px 8px 0px black; border-radius: 8px; border: 2px solid #000;}

/* MODAL VIDEO */
@keyframes modal-video{from{opacity:0}to{opacity:1}}@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-close{opacity:0}.modal-video-close .modal-video-movie-wrap{-webkit-transform:translate(0, 100px);-moz-transform:translate(0, 100px);-ms-transform:translate(0, 100px);-o-transform:translate(0, 100px);transform:translate(0, 100px)}.modal-video-body{max-width:960px;width:100%;height:100%;margin:0 auto;padding:0 10px;display:flex;justify-content:center;box-sizing:border-box}.modal-video-inner{display:flex;justify-content:center;align-items:center;width:100%;height:100%}@media (orientation: landscape){.modal-video-inner{padding:10px 60px;box-sizing:border-box}}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-45px;right:0;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent}@media (orientation: landscape){.modal-video-close-btn{top:0;right:-45px}}.modal-video-close-btn:before{transform:rotate(45deg)}.modal-video-close-btn:after{transform:rotate(-45deg)}.modal-video-close-btn:before,.modal-video-close-btn:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}