/* Decoracion cromada de las paginas de informacion.
   El degradado copia las bandas del logo: blanco, azul medio, franja oscura,
   reflejo blanco y un reflejo calido antes del cierre oscuro. */

.icf-v2{
	--gc-crom-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%);
	--gc-crom-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%);
}

/* --- filete cromado --------------------------------------------------- */
.icf-v2 .gc-rule{
	height:3px;border-radius:99px;margin:30px 0;
	background:var(--gc-crom-h);background-size:260% 100%;
	animation:gcCorre 9s linear infinite;
	box-shadow:0 1px 6px rgba(28,37,49,.22)
}
.icf-v2 .gc-rule--corto{width:132px;height:4px;margin:20px auto 28px;background-size:150% 100%}
@keyframes gcCorre{from{background-position:0 50%}to{background-position:260% 50%}}

/* --- iconos ------------------------------------------------------------ */
.icf-v2 .gc-ico{
	display:block;flex:0 0 auto;width:92px;height:92px;object-fit:contain;
	filter:drop-shadow(0 7px 16px rgba(20,30,45,.18))
}
.icf-v2 .gc-ico--sm{width:52px;height:52px;filter:drop-shadow(0 4px 9px rgba(20,30,45,.16))}

/* el icono flota muy despacio, lo justo para que no parezca una calcomania */
.icf-v2 .gc-ico--flota{animation:gcFlota 6s ease-in-out infinite}
@keyframes gcFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* --- cabecera de cada panel: icono grande + texto ---------------------- */
.icf-v2 .gc-cab{display:flex;align-items:center;gap:20px;margin:6px 0 16px}
.icf-v2 .gc-cab__txt{min-width:0}
.icf-v2 .gc-cab h2{margin:0 0 6px}
.icf-v2 .gc-cab--sec{margin-top:40px;gap:14px}
.icf-v2 .gc-cab--sec .gc-ico--sm{width:44px;height:44px}
.icf-v2 .gc-cab p{margin:0}
@media (max-width:600px){
	.icf-v2 .gc-cab{gap:14px}
	.icf-v2 .gc-ico{width:62px;height:62px}
}

/* El titulo va sobre el blanco de la pagina: el halo de degradado que habia
   detras ensuciaba el fondo y no aportaba nada. */

/* --- tarjetas: filo cromado al pasar por encima ------------------------ */
.icf-v2 .gcp__card{position:relative;transition:transform .28s ease,box-shadow .28s ease}
.icf-v2 .gcp__card::after{
	content:'';position:absolute;inset:0;border-radius:18px;padding:1.5px;pointer-events:none;
	background:var(--gc-crom-h);background-size:220% 100%;opacity:0;transition:opacity .28s ease;
	-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
}
.icf-v2 .gcp__card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(20,30,45,.11)}
.icf-v2 .gcp__card:hover::after{opacity:1;animation:gcCorre 6s linear infinite}

/* tarjeta con su icono arriba */
.icf-v2 .gcp__card .gc-ico--sm{margin:0 0 10px}

/* --- acordeon de preguntas -------------------------------------------- */
.icf-v2 .gcp__q{position:relative}
.icf-v2 .gcp__q::before{
	content:'';position:absolute;left:-10px;top:14px;bottom:14px;width:3px;border-radius:99px;
	background:var(--gc-crom-v);opacity:0;transition:opacity .25s
}
.icf-v2 .gcp__q[open]::before{opacity:1}
.icf-v2 .gcp__q summary::after{transition:transform .25s ease,color .25s}
.icf-v2 .gcp__q[open] summary::after{color:#3c4b60;transform:rotate(180deg)}
.icf-v2 .gcp__q[open] .gcp__q-body{animation:gcAbre .3s ease both}
@keyframes gcAbre{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* --- botones: destello cromado al pasar por encima --------------------- */
.icf-v2 .gcp__btn{position:relative;overflow:hidden;isolation:isolate}
.icf-v2 .gcp__btn::before{
	content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-120%);
	background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 34%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.10) 66%,transparent 100%)
}
.icf-v2 .gcp__btn:hover::before{animation:gcDestello .75s ease}
@keyframes gcDestello{to{transform:translateX(120%)}}

/* --- enlaces utiles ---------------------------------------------------- */
.icf-v2 .gcp__links a{transition:background .2s,transform .2s}
.icf-v2 .gcp__links a:hover{transform:translateX(3px)}
.icf-v2 .gcp__links a span{transition:transform .2s}
.icf-v2 .gcp__links a:hover span{transform:translateX(3px)}

/* --- entrada al hacer scroll ------------------------------------------ */
/* Solo se esconde si hay JavaScript para volver a mostrarlo. */
.gc-js .icf-v2 [data-gc-anim]{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.gc-js .icf-v2 [data-gc-anim].is-in{opacity:1;transform:none}

/* --- quien no quiera movimiento, no lo tiene -------------------------- */
@media (prefers-reduced-motion:reduce){
	.icf-v2 .gc-rule,.icf-v2 .gc-ico--flota,.icf-v2 .gcp__head::before,
	.icf-v2 .gcp__card:hover::after,.icf-v2 .gcp__btn:hover::before{animation:none}
	.gc-js .icf-v2 [data-gc-anim]{opacity:1;transform:none;transition:none}
	.icf-v2 .gcp__card:hover{transform:none}
}

/* =====================================================================
   Botones y pestanas en cromado.
   Los cortes del degradado estan medidos sobre el propio logo, franja a
   franja: gris azulado arriba, blanco especular en el centro, gris oscuro
   despues y el remate cobrizo abajo.
   El texto va OSCURO y siempre sobre la zona clara del metal (34%-64%),
   con un realce blanco de un pixel que lo deja como grabado en la pieza.
   ===================================================================== */

.icf-v2 .gc-filo::before{
	content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
	background:var(--gc-crom-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
}

/* --- pestanas de la guia de tallas ------------------------------------ */
.icf-v2 .gct__tabs{padding-bottom:16px}

.icf-v2 .gct__tab{
	position:relative;border:0;background:#fff;color:#0a0a0b;
	padding:12px 20px;font-size:12px;letter-spacing:.05em;
	box-shadow:0 2px 8px rgba(20,30,45,.07);
	transition:transform .18s ease,box-shadow .18s ease
}
.icf-v2 .gct__tab::before{
	content:'';position:absolute;inset:0;border-radius:999px;padding:1.6px;pointer-events:none;
	background:var(--gc-crom-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
}
.icf-v2 .gct__tab:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,30,45,.14)}
.icf-v2 .gct__tab:hover::before{animation:gcCorre 5s linear infinite}

/* la activa va en negro y es el FILO el que lleva el cromado: el metal
   luce igual y el texto blanco se lee sin depender de la banda clara. */
.icf-v2 .gct__tab.is-active{
	background:#0a0a0b;border:0;color:#fff;
	box-shadow:0 5px 18px rgba(20,30,45,.30)
}
.icf-v2 .gct__tab.is-active::before{
	padding:2px;background:var(--gc-crom-h);background-size:230% 100%;
	animation:gcCorre 6s linear infinite
}
.icf-v2 .gct__tab.is-active:hover{transform:translateY(-2px)}
.icf-v2 .gct__tab:focus-visible{outline:2px solid #4b5666;outline-offset:3px}

/* --- boton principal --------------------------------------------------- */
.icf-v2 .gcp__btn{
	position:relative;background:var(--gc-crom-v);color:#0d1016 !important;
	padding:15px 28px;font-size:13px;letter-spacing:.07em;
	text-shadow:0 1px 0 rgba(255,255,255,.55);
	box-shadow:0 5px 16px rgba(20,30,45,.28),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,opacity .15s
}
.icf-v2 .gcp__btn::after{
	content:'';position:absolute;inset:0;border-radius:999px;padding:1.6px;pointer-events:none;
	background:var(--gc-crom-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:gcCorre 8s linear infinite
}
.icf-v2 .gcp__btn:hover{
	opacity:1;transform:translateY(-2px);
	box-shadow:0 9px 24px rgba(20,30,45,.34),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.45)
}
.icf-v2 .gcp__btn:active{transform:translateY(0)}
.icf-v2 .gc-form button[type=submit]:disabled{transform:none;box-shadow:none}

/* --- enlaces utiles: solo el filo, para no competir con el boton ------- */
.icf-v2 .gcp__links a{position:relative;background:#f5f5f6;overflow:hidden}
.icf-v2 .gcp__links a::before{
	content:'';position:absolute;inset:0;border-radius:12px;padding:1.4px;pointer-events:none;
	background:var(--gc-crom-h);background-size:230% 100%;opacity:.6;transition:opacity .2s;
	-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
}
.icf-v2 .gcp__links a:hover::before{opacity:1;animation:gcCorre 5s linear infinite}

@media (prefers-reduced-motion:reduce){
	.icf-v2 .gct__tab::before,.icf-v2 .gct__tab.is-active::before,
	.icf-v2 .gcp__btn::after,.icf-v2 .gcp__links a::before{animation:none}
	.icf-v2 .gct__tab:hover,.icf-v2 .gcp__btn:hover{transform:none}
}


/* --- el icono de la cabecera de cada pagina --------------------------- */
/* Las paginas de informacion lo llevan centrado sobre el titulo; el carrito,
   la cuenta y el seguimiento lo colocan en su propia cabecera. */
.icf-v2 .gcp__head .gc-ico{margin:0 auto 14px}
@media (max-width:600px){.icf-v2 .gcp__head .gc-ico{width:70px;height:70px}}

.icf-v2 .gcc__hero .gc-ico,
.icf-v2 .gcs__hero-in .gc-ico{margin:0 0 12px}
@media (max-width:600px){
	.icf-v2 .gcc__hero .gc-ico,
	.icf-v2 .gcs__hero-in .gc-ico{width:66px;height:66px}
}

/* El carrito lo pone en linea con el titulo, que es una fila. */
.icf-cart .icf-cart__head{align-items:center}
.icf-cart .icf-cart__head .gc-ico{flex:0 0 auto;width:46px;height:46px;margin:0}
@media (max-width:600px){.icf-cart .icf-cart__head .gc-ico{width:40px;height:40px}}