/* ---- Logo del menu deslizante ----
   El contenedor lleva la proporcion del video (16:9) y ambos van con
   object-fit:contain, asi que se ven ENTEROS: ni recorte ni salto de
   maquetacion al pasar de la imagen al video.
   El video NO puede ocultarse con display:none (asi no se reproduce): se deja
   con opacity 0 y se descubre en el evento 'playing'. Si el navegador no puede
   con el codec, se queda la imagen. Es adorno: no recibe clics. */
.icf-v2 .v2m__brand{position:relative;align-self:center;flex:0 0 auto;margin:0 auto 26px;line-height:0;pointer-events:none;perspective:900px;width:min(76vw,300px);aspect-ratio:16/9}
.icf-v2 .v2m__brand img,
.icf-v2 .v2m__brand video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* El video se descarga antes de abrir el menu, asi que casi siempre ya esta
   puesto cuando se abre y no hay nada que fundir. El fundido corto queda solo
   por si llega tarde en una conexion lenta. */
.icf-v2 .v2m__brand video{opacity:0;transition:opacity .18s ease;will-change:opacity}
.icf-v2 .v2m--vid .v2m__brand video{opacity:1}
.icf-v2 .v2m--vid .v2m__brand img{opacity:0;transition:opacity .18s ease}
@media (min-width:768px){
  .icf-v2 .v2m{padding-right:clamp(340px,44vw,660px)}
  .icf-v2 .v2m__brand{position:absolute;top:50%;right:clamp(20px,4vw,64px);transform:translateY(-50%);margin:0;width:clamp(320px,38vw,580px);align-self:auto}
}
/* Balanceo suave de la imagen mientras no haya video reproduciendose. */
@media (prefers-reduced-motion:no-preference){
  .icf-v2 .v2m__brand img{animation:icf2Vaiven 7s ease-in-out infinite;transform-style:preserve-3d}
  .icf-v2 .v2m--vid .v2m__brand img{animation:none}
  @keyframes icf2Vaiven{0%,100%{transform:rotateY(-15deg)}50%{transform:rotateY(15deg)}}
}

/* Ajustes propios de icf2 sobre el skin v2. */

/* El skin trae su propio pie (.v2f): ocultamos el de Astra para que no salgan dos. */
body.icf-v2 #colophon.site-footer{display:none !important}

/* Doble barra de scroll en la ficha de producto.
   icf-product.css pone overflow-x:hidden en el body; cuando un eje es 'hidden'
   el navegador convierte el otro en 'auto', asi que el body scrollea por su
   cuenta ademas del documento. Con 'clip' se recorta igual en horizontal pero
   sin crear un contenedor de scroll propio. */
body.icf-body.single-product{overflow-x:clip}

/* ---- Barra de la tienda ----
   WooCommerce trae float:left en .woocommerce-result-count y float:right en
   .woocommerce-ordering. Los chips de categoria crean contexto de formato
   propio (tienen overflow), asi que se estrechaban para esquivar el float y
   acababan a la derecha, cortados. Quitando los floats vuelven a su sitio. */
.icf-v2 .v2shop__count,
.icf-v2 .woocommerce-result-count,
.icf-v2 .woocommerce-ordering{float:none !important}
.icf-v2 .v2shop__head::after{content:'';display:table;clear:both}
.icf-v2 .v2shop__chips{width:100%}

/* En movil: la fila de filtros y orden se reparte bien y el desplegable no se sale. */
@media (max-width:600px){
  .icf-v2 .v2shop__bar{flex-wrap:wrap;gap:10px}
  .icf-v2 .v2shop__bar .woocommerce-ordering{flex:1 1 190px;min-width:0}
  .icf-v2 .v2shop__bar select{width:100% !important;max-width:100%}
  .icf-v2 .v2shop__fbtn{flex:0 0 auto}
  .icf-v2 .v2shop__chips{justify-content:flex-start;padding-inline:0}
}

/* Chip de tipo seleccionado dentro de un equipo. */
.icf-v2 .v2shop__chips a.is-active{border-color:#0a0a0b !important;background:#0a0a0b !important;color:#fff !important}

/* El menu es flex en columna: sin align-self la imagen se estira a todo el
   ancho (align-items:stretch) y el logo sale deformado.
   Logo cromado en el menu deslizante. Solo aqui: a los 34 px de la cabecera
   el cromado se empasta y se lee peor que el logo plano. */
.icf-v2 .v2m__logo{height:74px;width:auto;align-self:center;flex:0 0 auto;display:block;margin:0 auto 28px;user-select:none}
@media (min-width:768px){.icf-v2 .v2m__logo{height:96px;margin-bottom:36px}}


/* El video del logo tiene fondo negro absoluto (0,0,0) y el menu venia en
   #0a0a0b: se notaba el recuadro. Se iguala el menu al negro del video. */
.icf-v2 .v2m{background:#000 !important}

/* Buscador dentro del menu deslizante. */
.icf-v2 .v2m__search{margin:0 0 24px;max-width:560px;width:100%}
.icf-v2 .v2m__search .dgwt-wcas-search-wrapp{max-width:100%}
.icf-v2 .v2m__search .dgwt-wcas-search-input{border-radius:12px !important;font-family:'Bricolage Grotesque',sans-serif !important;height:48px !important}
@media (min-width:768px){.icf-v2 .v2m__search{margin-bottom:30px}}

/* =====================================================================
   Botones de ayuda del menu deslizante, en cromado.
   Van aqui y no en icf2-cromado.css porque el menu sale en toda la
   tienda, no solo en las paginas de informacion.
   Mismo metal que el logo, medido sobre el: el texto va oscuro y sobre la
   franja clara del centro, que es donde el cromo es casi blanco.
   ===================================================================== */

.icf-v2 .v2m__aux{
	--gcm-v:linear-gradient(180deg,#2e6b74 0%,#1f4e5e 6%,#16323f 14%,#274668 26%,#3d5d85 34%,#4d8391 43%,#5f9aa4 50%,#4d4a7a 56%,#55406e 62%,#6d4a67 68%,#8a4560 74%,#5e3247 80%,#3d2537 86%,#6e3f55 92%,#221826 100%);
	--gcm-h:linear-gradient(90deg,#1d3a44 0%,#1c2e4a 8%,#2f5670 18%,#35607a 27%,#45748c 35%,#549099 43%,#64a7ad 49%,#5a6b96 54%,#575088 59%,#6d4a72 64%,#8a4560 70%,#5e3247 77%,#33283f 84%,#7a4a5e 91%,#8f6072 96%,#1c2430 100%)
}

.icf-v2 .v2m__aux a{
	position:relative;overflow:hidden;
	background:var(--gcm-v) !important;
	color:#f4f4f2 !important;
	text-shadow:0 1px 0 rgba(0,0,0,.5);
	box-shadow:0 3px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.45);
	transition:transform .18s ease,box-shadow .18s ease
}
.icf-v2 .v2m__aux a::after{
	content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
	background:var(--gcm-h);background-size:230% 100%;
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	animation:gcBrilloMenu 9s linear infinite
}
.icf-v2 .v2m__aux a:hover,
.icf-v2 .v2m__aux a:focus-visible{
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.45)
}
.icf-v2 .v2m__aux a:active{transform:translateY(0)}
.icf-v2 .v2m__aux a:hover::after{animation-duration:3.5s}

/* la flecha, en el gris oscuro del propio metal */
.icf-v2 .v2m__aux a span{
	color:#2a2f38;text-shadow:0 1px 0 rgba(255,255,255,.5);
	transition:transform .18s ease
}
.icf-v2 .v2m__aux a:hover span{transform:translateX(3px)}

/* filete cromado bajo el rotulo AYUDA */
.icf-v2 .v2m__auxlabel{position:relative;display:block;padding-bottom:9px}
.icf-v2 .v2m__auxlabel::after{
	content:'';position:absolute;left:0;bottom:0;width:64px;height:2px;border-radius:99px;
	background:var(--gcm-h);background-size:200% 100%;
	animation:gcBrilloMenu 9s linear infinite
}

@keyframes gcBrilloMenu{from{background-position:0 50%}to{background-position:230% 50%}}

@media (prefers-reduced-motion:reduce){
	.icf-v2 .v2m__aux a::after,.icf-v2 .v2m__auxlabel::after{animation:none}
	.icf-v2 .v2m__aux a:hover{transform:none}
}

/* La misma letra que el resto del menu: Bricolage Grotesque en 800 y en
   mayusculas, que a este tamano se lee mucho mejor que el 600 anterior. */
.icf-v2 .v2m__aux a{
	font:800 15px/1.15 'Bricolage Grotesque',sans-serif !important;
	text-transform:uppercase;letter-spacing:.01em;
	padding:14px 16px;gap:10px
}
.icf-v2 .v2m__aux a span{flex:0 0 auto}
@media (max-width:600px){
	.icf-v2 .v2m__aux a{font-size:13px !important;padding:13px 13px;gap:6px}
}

/* --- chips destacados de la tienda (populares, novedades, miticas) ----- */
.icf-v2 .v2shop__chip--destacado{
	position:relative;background:#0a0a0b !important;color:#fff !important;border-color:transparent !important;
	font-weight:800
}
.icf-v2 .v2shop__chip--destacado::before{
	content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
	background:linear-gradient(90deg,#1d3a44 0%,#1c2e4a 8%,#2f5670 18%,#35607a 27%,#45748c 35%,#549099 43%,#64a7ad 49%,#5a6b96 54%,#575088 59%,#6d4a72 64%,#8a4560 70%,#5e3247 77%,#33283f 84%,#7a4a5e 91%,#8f6072 96%,#1c2430 100%);
	background-size:230% 100%;
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	animation:gcdCorre 6s linear infinite
}
.icf-v2 .v2shop__chip--destacado.is-active{box-shadow:0 5px 16px rgba(20,30,45,.30)}
@keyframes gcdCorre{from{background-position:0 50%}to{background-position:230% 50%}}

@media (prefers-reduced-motion:reduce){
	.icf-v2 .v2shop__chip--destacado::before{animation:none}
}

/* La misma trampa, pero en la seccion de la ficha: icf-single.css le pone
   overflow-x:hidden y el navegador convierte el eje vertical en 'auto',
   creando un segundo contenedor con scroll dentro de la pagina. Con 'clip'
   se recorta igual y no aparece ese scroll de mas. */
.icf-body .icf-product-page{overflow-x:clip !important;overflow-y:visible !important}

/* =====================================================================
   Solo ICONFUTBOL: el astra-addon clona la cabecera en #ast-fixed-header
   al hacer scroll (config de la web v1). Con el skin v2 la pill ya es
   sticky, asi que el clon sobra y ademas sale con los colores antiguos.
   ===================================================================== */
.icf-v2 #ast-fixed-header{display:none !important}

/* Solo ICONFUTBOL: con el skin activo, la barra y el badge del plugin de
   SELECCION se esconden — el skin pinta lo mismo integrado (v2h__bar y el
   cupon de la ficha). La logica del plugin (autocupon) sigue funcionando. */
.icf-v2 .icf-disc-bar,.icf-v2 .icf-pdisc{display:none !important}

/* logo iF vertical: mas presencia que el wordmark antiguo */
.icf-v2 .v2h__logo img{height:42px}
.icf-v2 .v2f img.v2f__logo{height:58px;max-height:58px}
/* realce logo cabecera: el emblema oscuro necesita luz sobre el pill oscuro */
.icf-v2 .v2h__logo img{filter:drop-shadow(0 1px 8px rgba(0,0,0,.5))}

/* ── liquid glass: superficies translucidas con borde especular ── */
.icf-v2 .v2h{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 30%,rgba(14,18,22,.42) 55%,rgba(38,74,84,.34));-webkit-backdrop-filter:blur(26px) saturate(1.9);backdrop-filter:blur(26px) saturate(1.9);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 10px 34px rgba(0,0,0,.28)}
.icf-v2 .v2hs{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 50px rgba(10,10,11,.28)}
.icf-v2 .v2m{background:rgba(8,9,10,.78);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}
.icf-v2 .v2cd__p{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);border-left:1px solid rgba(255,255,255,.6)}
@supports not (backdrop-filter:blur(1px)){.icf-v2 .v2h{background:rgba(16,16,16,.92)}.icf-v2 .v2hs{background:#fff}.icf-v2 .v2m{background:#0a0a0b}.icf-v2 .v2cd__p{background:#fff}}
/* ── personalizacion compacta en la ficha ── */
html body.icf-body.icf-v2 .icf-product-page .wapf-field-container{margin-bottom:9px !important;padding-bottom:5px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-field-label,html body.icf-body.icf-v2 .icf-product-page .wapf-field-label label{font-size:10.5px !important;letter-spacing:.11em !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-field-label{margin-bottom:4px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-swatch--text{padding:9px 15px !important;font-size:11px !important;margin:0 6px 6px 0 !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-swatch--text .wapf-pricing-hint{font-size:9.5px !important;padding:2px 6px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-swatch--image{padding:6px !important;border-radius:12px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-swatch--image img{border-radius:8px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-wrapper input[type=text],
html body.icf-body.icf-v2 .icf-product-page .wapf-wrapper textarea{padding:11px 14px !important;border-radius:12px !important;font-size:13px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-wrapper p,
html body.icf-body.icf-v2 .icf-product-page .wapf-field-description{font-size:12px !important;line-height:1.45 !important;margin:2px 0 8px !important;color:var(--v2-gray) !important}
html body.icf-body.icf-v2 .icf-product-page .variable-items-wrapper .variable-item{min-height:40px !important;font-size:12.5px !important}
html body.icf-body.icf-v2 .icf-product-page .variable-items-wrapper{gap:6px !important}
html body.icf-body.icf-v2 .icf-product-page form.cart .variations{margin-bottom:8px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-wrapper{margin:4px 0 !important}