/* ---- 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:gocamisVaiven 7s ease-in-out infinite;transform-style:preserve-3d}
  .icf-v2 .v2m--vid .v2m__brand img{animation:none}
  @keyframes gocamisVaiven{0%,100%{transform:rotateY(-15deg)}50%{transform:rotateY(15deg)}}
}

/* Ajustes propios de gocamis 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 gocamis-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,#dfe6ee 0%,#93a0b2 6%,#5c6878 14%,#9aa6b6 26%,#c6ccd4 34%,#f4f6f8 43%,#ffffff 50%,#faf0fa 56%,#f0dce6 62%,#e6b0a8 68%,#e67864 74%,#a85f58 80%,#6b4a4a 86%,#c98f80 92%,#5a4442 100%);
	--gcm-h:linear-gradient(90deg,#6a6b6e 0%,#4b5666 8%,#7d8da3 18%,#909cac 27%,#b7c0ca 35%,#eef1f4 43%,#ffffff 49%,#faf0fa 54%,#f0dce6 59%,#e6b0a8 64%,#e67864 70%,#a05a52 77%,#5f5257 84%,#d29a8e 91%,#f0c8bc 96%,#5a4a41 100%)
}

.icf-v2 .v2m__aux a{
	position:relative;overflow:hidden;
	background:var(--gcm-v) !important;
	color:#0d1016 !important;
	text-shadow:0 1px 0 rgba(255,255,255,.55);
	box-shadow:0 3px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.9),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,#6a6b6e 0%,#4b5666 8%,#7d8da3 18%,#909cac 27%,#b7c0ca 35%,#eef1f4 43%,#ffffff 49%,#faf0fa 54%,#f0dce6 59%,#e6b0a8 64%,#e67864 70%,#a05a52 77%,#5f5257 84%,#d29a8e 91%,#f0c8bc 96%,#5a4a41 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}
/* ── 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}

/* wapf-fino */
html body.icf-body.icf-v2 .icf-product-page .field-6a15b59cdb853 .wapf-swatch-wrapper{display:flex !important;gap:6px}
html body.icf-body.icf-v2 .icf-product-page .field-6a15b59cdb853 .wapf-swatch--text{margin:0 !important;white-space:nowrap}
html body.icf-body.icf-v2 .icf-product-page .icf-dorsal-note{font-size:11px !important;line-height:1.45 !important;margin:5px 0 0 !important;color:#8a8a90 !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-field-description{font-size:11.5px !important;color:#8a8a90 !important;margin:0 0 6px !important;line-height:1.4 !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-field-label label,html body.icf-body.icf-v2 .icf-product-page table.variations th.label{color:#6d6d74 !important;font-size:10px !important;letter-spacing:.14em !important}
html body.icf-body.icf-v2 .icf-product-page .tawcvs-swatches{gap:6px !important}

/* version pegada a tallas + filete antes de personalizacion */
html body.icf-body.icf-v2 .icf-product-page form.cart table.variations{margin-bottom:2px !important}
html body.icf-body.icf-v2 .icf-product-page .wapf-wrapper{margin-top:0 !important}
html body.icf-body.icf-v2 .icf-product-page .field-6a15b59cdb853{margin-bottom:20px !important;padding-bottom:18px !important;border-bottom:1px solid #ececef !important}
html body.icf-body.icf-v2 .icf-product-page .field-6a15b59cdb853 .wapf-swatch--text{font-size:11px !important;letter-spacing:.04em !important;padding:9px 15px !important;gap:6px !important}
html body.icf-body.icf-v2 .icf-product-page .field-6a15b59cdb853 .wapf-pricing-hint{font-size:9px !important;padding:2px 5px !important}