/* SATA - las seis fichas de producto.
   Todas oscuras. Cada una define cuatro variables y el resto del archivo es
   comun, asi que anadir un estilo nuevo es anadir un bloque de variables y su
   motivo de fondo.

     --f-fondo   el fondo de la pagina
     --f-panel   las cajas (galeria, aviso, relacionados)
     --f-borde   los filetes
     --f-ac      el acento: precio, enlaces, detalles
     --f-ac2     el segundo acento, para degradados y remates
     --f-texto   el texto principal
     --f-suave   el texto secundario
     --f-motivo  el patron de fondo, un SVG en data-uri
*/

/* ========================= 1. SILLAR — Arequipa =========================== */
/* La piedra volcanica blanca de la Ciudad Blanca: bloques labrados y luz calida. */

.sata-ficha--sillar {
	--f-fondo: #14110f;
	--f-panel: #211c18;
	--f-borde: #362e27;
	/* ⚠️ El acento es el OCRE, no el crema. Con el crema el precio salia del
	   mismo color que el titulo y no se veia: en una ficha lo primero que se
	   busca es el precio. El crema se queda para el texto. */
	--f-ac:    #d6a638;
	--f-ac2:   #e8dfd2;
	--f-texto: #f2ece3;
	--f-suave: #a1968a;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23e8dfd2' stroke-opacity='.07' stroke-width='1'%3E%3Crect x='.5' y='.5' width='59' height='29'/%3E%3Crect x='60.5' y='.5' width='59' height='29'/%3E%3Crect x='-29.5' y='30.5' width='59' height='29'/%3E%3Crect x='30.5' y='30.5' width='59' height='29'/%3E%3Crect x='90.5' y='30.5' width='59' height='29'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==================== 2. SANTA CATALINA — Arequipa ======================== */
/* El anil y el almagre de los muros del monasterio, con sus arcos. */

.sata-ficha--santa-catalina {
	--f-fondo: #0b1020;
	--f-panel: #141c33;
	--f-borde: #24304f;
	--f-ac:    #4f8ee0;
	--f-ac2:   #c0392b;
	--f-texto: #e9eefb;
	--f-suave: #93a3c4;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%234f8ee0' stroke-opacity='.10' stroke-width='1.4'%3E%3Cpath d='M15 88V45a30 30 0 0 1 60 0v43'/%3E%3Cpath d='M30 88V48a15 15 0 0 1 30 0v40'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==================== 3. VOLCAN MISTI — Arequipa ========================== */
/* Lava. El cono del Misti sobre coladas incandescentes: rojo magma abajo,
   naranja al rojo vivo en el borde y ceniza arriba. */

.sata-ficha--misti {
	--f-fondo: #120607;
	--f-panel: #230e0f;
	--f-borde: #4a1a1a;
	--f-ac:    #ff3b21;
	--f-ac2:   #ffa23d;
	--f-texto: #fdece7;
	--f-suave: #bb9791;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='190'%3E%3Cg fill='none' stroke='%23ff3b21' stroke-opacity='.20' stroke-width='1.7'%3E%3Cpath d='M0 188 L128 40 L186 100 L246 26 L420 188'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffa23d' stroke-opacity='.26' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M246 26 L238 74 L256 112 L244 152 L262 188'/%3E%3Cpath d='M246 26 L268 68 L254 104 L276 142 L268 188'/%3E%3Cpath d='M128 40 L120 82 L136 120 L126 188'/%3E%3C/g%3E%3C/svg%3E");
}

/* ====================== 4. PIEDRA INCA — Cusco ============================ */
/* El aparejo poligonal de Hatun Rumiyoc: bloques que encajan sin mortero. */

.sata-ficha--piedra-inca {
	--f-fondo: #111110;
	--f-panel: #1d1c19;
	--f-borde: #34322c;
	--f-ac:    #b08d57;
	--f-ac2:   #8f9a80;
	--f-texto: #f0ece2;
	--f-suave: #9c9587;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%23b08d57' stroke-opacity='.13' stroke-width='1.3'%3E%3Cpath d='M0 34 L44 30 L70 44 L112 36 L160 46'/%3E%3Cpath d='M0 78 L38 84 L82 70 L120 82 L160 74'/%3E%3Cpath d='M44 30 L38 84'/%3E%3Cpath d='M70 44 L82 70'/%3E%3Cpath d='M112 36 L120 82'/%3E%3Cpath d='M20 0 L26 30'/%3E%3Cpath d='M92 0 L86 40'/%3E%3Cpath d='M60 84 L64 120'/%3E%3Cpath d='M132 78 L128 120'/%3E%3C/g%3E%3C/svg%3E");
}

/* ========================= 5. CHAKANA — Cusco ============================= */
/* La cruz andina escalonada y los colores del textil. */

.sata-ficha--chakana {
	--f-fondo: #0f0d14;
	--f-panel: #1a1723;
	--f-borde: #2d2740;
	--f-ac:    #f6bd60;
	--f-ac2:   #e94f37;
	--f-texto: #f3eefb;
	--f-suave: #9c93b3;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath fill='none' stroke='%23f6bd60' stroke-opacity='.12' stroke-width='1.4' d='M38 8h24v14h14v16h14v24H76v14H62v14H38V76H24V62H10V38h14V22h14z'/%3E%3C/svg%3E");
}

/* ======================= 6. CORICANCHA — Cusco ============================ */
/* El templo del sol: oro sobre piedra oscura y los rayos de Inti. */

.sata-ficha--coricancha {
	--f-fondo: #0c0a06;
	--f-panel: #191509;
	--f-borde: #362c14;
	--f-ac:    #d4af37;
	--f-ac2:   #e8c547;
	--f-texto: #f7f0dd;
	--f-suave: #a3947a;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='.11' stroke-width='1.3'%3E%3Ccircle cx='120' cy='120' r='34'/%3E%3Ccircle cx='120' cy='120' r='58'/%3E%3Cg%3E%3Cpath d='M120 44V6'/%3E%3Cpath d='M120 196v38'/%3E%3Cpath d='M44 120H6'/%3E%3Cpath d='M196 120h38'/%3E%3Cpath d='M66 66 39 39'/%3E%3Cpath d='M174 174l27 27'/%3E%3Cpath d='M174 66l27-27'/%3E%3Cpath d='M66 174l-27 27'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ====================== 7. MACHU PICCHU — Cusco =========================== */
/* Los andenes escalonados y la silueta del Huayna Picchu entre la neblina:
   piedra, verde de ceja de selva y la luz dorada del amanecer. */

.sata-ficha--machupicchu {
	--f-fondo: #090f0d;
	--f-panel: #142019;
	--f-borde: #24382c;
	--f-ac:    #62c496;
	--f-ac2:   #dcc79a;
	--f-texto: #eef6f0;
	--f-suave: #8fa89a;
	--f-motivo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='170'%3E%3Cg fill='none' stroke='%2362c496' stroke-opacity='.16' stroke-width='1.5'%3E%3Cpath d='M182 168 L214 40 L236 72 L258 22 L300 168'/%3E%3C/g%3E%3Cg fill='none' stroke='%23dcc79a' stroke-opacity='.15' stroke-width='1.3'%3E%3Cpath d='M0 168h150'/%3E%3Cpath d='M12 146h138'/%3E%3Cpath d='M26 124h124'/%3E%3Cpath d='M42 102h108'/%3E%3Cpath d='M58 80h92'/%3E%3Cpath d='M0 168V150M40 168V150M80 168V150M120 168V150'/%3E%3Cpath d='M12 146V126M52 146V126M92 146V126M132 146V126'/%3E%3Cpath d='M26 124V104M66 124V104M106 124V104'/%3E%3Cpath d='M42 102V82M82 102V82M122 102V82'/%3E%3C/g%3E%3C/svg%3E");
}

/* ======================= 8. CIRCUITO — diseño técnico ==================== */
.sata-ficha--circuito {
	--f-fondo: #07151c; --f-panel: #0c2028; --f-borde: #1c4951;
	--f-ac: #20e1c2; --f-ac2: #93f4e3; --f-texto: #eafffb; --f-suave: #9dc7c2;
	--f-motivo: linear-gradient(rgba(32,225,194,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(32,225,194,.09) 1px,transparent 1px);
}

/* ======================== 9. AURORA — diseño editorial ================== */
.sata-ficha--aurora {
	--f-fondo: #131027; --f-panel: #201a3b; --f-borde: #40336d;
	--f-ac: #a98aff; --f-ac2: #f08bd5; --f-texto: #f4efff; --f-suave: #beb2dc;
	--f-motivo: radial-gradient(circle at 15% 20%,rgba(169,138,255,.16) 0 1px,transparent 2px),radial-gradient(circle at 75% 70%,rgba(240,139,213,.13) 0 1px,transparent 2px);
}

/* ========================= 10. ÓRBITA — diseño espacial ================= */
.sata-ficha--orbita {
	--f-fondo: #141819; --f-panel: #202526; --f-borde: #48413a;
	--f-ac: #f0a45d; --f-ac2: #f7d5ae; --f-texto: #fff5e9; --f-suave: #c7b6a3;
	--f-motivo: radial-gradient(circle at 50% 50%,transparent 0 23px,rgba(240,164,93,.12) 24px 25px,transparent 26px 52px,rgba(240,164,93,.07) 53px 54px,transparent 55px);
}

/* ######################################################################### */
/* #                       DE AQUI ABAJO, COMUN                            # */
/* ######################################################################### */

.sata-ficha {
	background: var(--f-fondo);
	color: var(--f-texto);
}

/* el motivo, quieto y muy tenue detras de todo */
.sata-ficha .site-content {
	position: relative;
	background-image: var(--f-motivo);
	background-repeat: repeat;
}

.sata-ficha .site-content::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(760px 380px at 18% -10%, color-mix(in srgb, var(--f-ac) 16%, transparent), transparent 68%),
		radial-gradient(680px 340px at 88% 4%, color-mix(in srgb, var(--f-ac2) 13%, transparent), transparent 66%);
}

.sata-ficha .site-content > * { position: relative; z-index: 1; }

/* ------------------------------- textos ---------------------------------- */

.sata-ficha .product_title,
.sata-ficha h1, .sata-ficha h2, .sata-ficha h3 { color: var(--f-texto); }

.sata-ficha .woocommerce-product-details__short-description,
.sata-ficha .woocommerce-Tabs-panel,
.sata-ficha p { color: var(--f-suave); }

.sata-ficha a { color: var(--f-ac); }

.sata-ficha .product_title {
	letter-spacing: -.015em;
	line-height: 1.1;
}

/* el precio, que es lo que se busca */
.sata-ficha .summary .price,
.sata-ficha .summary .price .amount {
	color: var(--f-ac) !important;
	font-weight: 800;
}

.sata-ficha .summary del,
.sata-ficha .summary del .amount { color: var(--f-suave) !important; opacity: .65; }

.sata-ficha .summary ins { text-decoration: none; }

/* El controlador jQuery añade estas capas sin alterar el HTML de WooCommerce. */
.sata-ficha .sata-precio-capas { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 3.15rem; margin: .25rem 0 .55rem; padding: .35rem .85rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--f-ac) 42%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--f-panel) 87%, transparent); box-shadow: 0 12px 26px -20px #000; }
.sata-ficha .sata-precio-capas .price { position: relative; z-index: 2; margin: 0; font-size: 1.55rem; line-height: 1.1; }
.sata-precio-capas__fondo { position: absolute; z-index: 0; right: -.18rem; bottom: -.38rem; color: var(--f-ac); font-size: 2.45rem; font-weight: 900; letter-spacing: -.09em; line-height: 1; opacity: .1; pointer-events: none; }
.sata-precio-capas__halo { position: absolute; z-index: -1; width: 55%; height: 150%; left: -18%; border-radius: 50%; background: var(--f-ac); opacity: .16; filter: blur(18px); pointer-events: none; }

/* ------------------------------ la galeria -------------------------------- */

.sata-ficha .woocommerce-product-gallery {
	background: var(--f-panel);
	border: 1px solid var(--f-borde);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 30px 60px -40px #000;
}

.sata-ficha .woocommerce-product-gallery__image img { border-radius: 11px; }

.sata-ficha .flex-control-thumbs img {
	border-radius: 8px;
	border: 1px solid transparent;
	opacity: .62;
	transition: opacity .2s, border-color .2s, transform .2s;
}

.sata-ficha .flex-control-thumbs img:hover,
.sata-ficha .flex-control-thumbs .flex-active {
	opacity: 1;
	border-color: var(--f-ac);
	transform: translateY(-2px);
}

/* ------------------------- el aviso y los datos --------------------------- */

.sata-ficha .sata-aviso {
	background: var(--f-panel);
	border-left: 3px solid var(--f-ac);
	color: var(--f-suave);
	border-radius: 0 10px 10px 0;
}

.sata-ficha .sata-direccion,
.sata-ficha .sata-horario { color: var(--f-suave) !important; }
.sata-ficha .sata-direccion:hover { color: var(--f-ac) !important; }
.sata-ficha .sata-direccion svg,
.sata-ficha .sata-horario svg { color: var(--f-ac); }

/* ⚠️ El boton de WhatsApp NO se tine con el acento: su verde es una senal
   reconocible y cambiarlo por oro o anil lo vuelve un boton cualquiera. */

.sata-ficha .product_meta,
.sata-ficha .product_meta a { color: var(--f-suave); }
.sata-ficha .product_meta a:hover { color: var(--f-ac); }

.sata-ficha .woocommerce-tabs ul.tabs::before,
.sata-ficha hr,
.sata-ficha .product_meta { border-color: var(--f-borde) !important; }

/* --------------------------- los relacionados ----------------------------- */

.sata-ficha .related > h2,
.sata-ficha .upsells > h2 {
	color: var(--f-texto);
	border-bottom: 1px solid var(--f-borde);
	padding-bottom: .4em;
}

.sata-ficha ul.products li.product .woocommerce-loop-product__title { color: var(--f-texto); }
.sata-ficha ul.products li.product .price { color: var(--f-ac); }
.sata-ficha ul.products li.product img { border-radius: 10px; }

/* ############################## ANIMACION ################################# */

/* Entrada escalonada: la foto, luego el titulo, el precio y el boton. */

@keyframes sata-sube {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes sata-aparece {
	from { opacity: 0; transform: scale(.985); }
	to   { opacity: 1; transform: none; }
}

.sata-ficha .woocommerce-product-gallery { animation: sata-aparece .55s ease both; }
.sata-ficha .summary > *               { animation: sata-sube .5s ease both; }
.sata-ficha .summary > *:nth-child(1)  { animation-delay: .05s; }
.sata-ficha .summary > *:nth-child(2)  { animation-delay: .11s; }
.sata-ficha .summary > *:nth-child(3)  { animation-delay: .17s; }
.sata-ficha .summary > *:nth-child(4)  { animation-delay: .23s; }
.sata-ficha .summary > *:nth-child(5)  { animation-delay: .29s; }
.sata-ficha .summary > *:nth-child(6)  { animation-delay: .35s; }
.sata-ficha .summary > *:nth-child(n+7){ animation-delay: .41s; }

/* el halo respira, muy lento */
@keyframes sata-respira {
	0%, 100% { opacity: .85; }
	50%      { opacity: 1; }
}

.sata-ficha .site-content::before { animation: sata-respira 9s ease-in-out infinite; }

/* los relacionados entran al llegar a ellos (lo marca fichas.js) */
.sata-ficha .related li.product,
.sata-ficha .upsells li.product { opacity: 0; transform: translateY(16px); }

.sata-ficha li.product.sata-visible {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
}

/* ⚠️ Quien pide menos movimiento no lo tiene: son animaciones de adorno y
   marearse con una pagina de producto no compensa ningun efecto. */
@media (prefers-reduced-motion: reduce) {
	.sata-ficha .woocommerce-product-gallery,
	.sata-ficha .summary > *,
	.sata-ficha .site-content::before { animation: none !important; }

	.sata-ficha .related li.product,
	.sata-ficha .upsells li.product { opacity: 1; transform: none; }
}

/* ############################ ACENTOS PROPIOS ############################# */

/* Sillar: el titulo con el relieve de la piedra labrada. */
.sata-ficha--sillar .product_title { text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, .6); }

/* Santa Catalina: el filete almagre bajo el titulo, como el zocalo del muro. */
.sata-ficha--santa-catalina .product_title { padding-bottom: .3em; border-bottom: 3px solid var(--f-ac2); }

/* Volcan Misti: la colada de lava bajo la galeria y el precio al rojo. */
.sata-ficha--misti .woocommerce-product-gallery {
	box-shadow: 0 26px 64px -34px var(--f-ac), 0 30px 60px -40px #000;
	border-bottom: 3px solid var(--f-ac);
}

.sata-ficha--misti .summary .price,
.sata-ficha--misti .summary .price .amount {
	background: linear-gradient(96deg, var(--f-ac), var(--f-ac2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* el rescoldo del crater, latiendo al fondo */
.sata-ficha--misti .site-content::before {
	background:
		radial-gradient(700px 300px at 50% 104%, rgba(255, 59, 33, .30), transparent 70%),
		radial-gradient(560px 260px at 16% -8%, rgba(255, 162, 61, .16), transparent 68%);
}

/* Machu Picchu: el filete de piedra y la neblina baja. */
.sata-ficha--machupicchu .woocommerce-product-gallery {
	border-radius: 6px;
	border-bottom: 3px solid var(--f-ac2);
}

.sata-ficha--machupicchu .site-content::before {
	background:
		radial-gradient(820px 300px at 72% 100%, rgba(220, 199, 154, .13), transparent 70%),
		radial-gradient(600px 300px at 20% -6%, rgba(98, 196, 150, .15), transparent 66%);
}

/* Piedra inca: el bloque encajado, sin curvas. */
.sata-ficha--piedra-inca .woocommerce-product-gallery { border-radius: 4px; }
.sata-ficha--piedra-inca .woocommerce-product-gallery__image img { border-radius: 2px; }

/* Chakana: el escalonado en la esquina del panel. */
.sata-ficha--chakana .woocommerce-product-gallery {
	border-radius: 4px;
	border-top: 3px solid var(--f-ac);
	border-left: 3px solid var(--f-ac2);
}

/* Coricancha: el oro del precio, con brillo. */
.sata-ficha--coricancha .summary .price,
.sata-ficha--coricancha .summary .price .amount {
	background: linear-gradient(100deg, var(--f-ac), var(--f-ac2), var(--f-ac));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Las tres propuestas nuevas separan el precio en primer plano y capas. */
.sata-ficha--circuito .sata-precio-capas { border-left: 3px solid var(--f-ac); border-radius: 4px; box-shadow: 0 0 0 1px rgba(32,225,194,.08), 0 0 30px -14px var(--f-ac); }
.sata-ficha--circuito .sata-precio-capas::after { position:absolute; right:0; top:50%; width:35px; height:1px; content:""; background:var(--f-ac); box-shadow:-7px -7px 0 -1px var(--f-ac),-14px 7px 0 -1px var(--f-ac); opacity:.7; }
.sata-ficha--aurora .sata-precio-capas { border-radius: 999px 10px 999px 10px; background: linear-gradient(110deg, rgba(169,138,255,.2), rgba(240,139,213,.08)); }
.sata-ficha--aurora .sata-precio-capas__halo { left: 36%; background: var(--f-ac2); opacity: .25; }
.sata-ficha--orbita .sata-precio-capas { border-radius: 50% 10px 10px 50%; padding-left: 1.1rem; background: radial-gradient(circle at 0 50%, rgba(240,164,93,.27), transparent 37%), var(--f-panel); }
.sata-ficha--orbita .sata-precio-capas::before { position: absolute; inset: 5px; border: 1px solid rgba(240,164,93,.24); border-radius: inherit; content:""; pointer-events:none; }

/* ---------------------------- respaldo de color --------------------------- */

/* Si el navegador no tiene color-mix, los halos se quedan sin pintar y no pasa
   nada: el fondo y el motivo ya sostienen el estilo solos. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
	.sata-ficha .site-content::before { background: none; }
}

/* ========================== TARJETAS DE CATÁLOGO ==========================
   La ficha elegida no se queda aislada al abrirla: esta versión compacta se
   aplica a CADA producto de la rejilla, sin pintar toda la categoría igual. */
ul.products li.product.sata-tarjeta {
	--sata-card-ac: #20e1c2;
	--sata-card-ac2: #ddfbf5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: .7rem .7rem .85rem;
	border: 1px solid color-mix(in srgb, var(--sata-card-ac) 42%, transparent);
	border-radius: 12px;
	background: linear-gradient(145deg, color-mix(in srgb, var(--sata-card-ac) 10%, #0b1820), #101920 65%);
	box-shadow: 0 12px 25px -23px var(--sata-card-ac);
}
ul.products li.product.sata-tarjeta > * { position: relative; z-index: 1; }
ul.products li.product.sata-tarjeta::after {
	position: absolute;
	right: -20px;
	top: -27px;
	width: 82px;
	height: 82px;
	border: 1px solid color-mix(in srgb, var(--sata-card-ac) 55%, transparent);
	border-radius: 50%;
	box-shadow: 0 0 0 13px color-mix(in srgb, var(--sata-card-ac) 8%, transparent), 0 0 0 26px color-mix(in srgb, var(--sata-card-ac2) 5%, transparent);
	content: "";
	pointer-events: none;
}
ul.products li.product.sata-tarjeta img { border: 1px solid color-mix(in srgb, var(--sata-card-ac) 50%, transparent); }
ul.products li.product.sata-tarjeta .woocommerce-loop-product__title { color: var(--sata-card-ac2); }
ul.products li.product.sata-tarjeta .price,
ul.products li.product.sata-tarjeta .price .amount { color: var(--sata-card-ac); }
ul.products li.product.sata-tarjeta:hover { box-shadow: 0 18px 34px -23px var(--sata-card-ac); }

ul.products li.product.sata-tarjeta--sillar { --sata-card-ac: #d6a638; --sata-card-ac2: #f2ece3; }
ul.products li.product.sata-tarjeta--santa-catalina { --sata-card-ac: #4f8ee0; --sata-card-ac2: #e9eefb; }
ul.products li.product.sata-tarjeta--misti { --sata-card-ac: #ff3b21; --sata-card-ac2: #ffa23d; }
ul.products li.product.sata-tarjeta--piedra-inca { --sata-card-ac: #b08d57; --sata-card-ac2: #d9decf; }
ul.products li.product.sata-tarjeta--chakana { --sata-card-ac: #e94f37; --sata-card-ac2: #f6bd60; }
ul.products li.product.sata-tarjeta--coricancha { --sata-card-ac: #d4af37; --sata-card-ac2: #e8c547; }
ul.products li.product.sata-tarjeta--machupicchu { --sata-card-ac: #62c496; --sata-card-ac2: #dcc79a; }
ul.products li.product.sata-tarjeta--circuito { --sata-card-ac: #20e1c2; --sata-card-ac2: #ddfbf5; }
ul.products li.product.sata-tarjeta--aurora { --sata-card-ac: #a98aff; --sata-card-ac2: #f08bd5; }
ul.products li.product.sata-tarjeta--orbita { --sata-card-ac: #f0a45d; --sata-card-ac2: #f8ede0; }

/* Los tres diseños nuevos cambian también su geometría y motivo, para que
   sean reconocibles aun sin leer el color del marco. */
ul.products li.product.sata-tarjeta--circuito {
	border-radius: 3px 18px 3px 18px;
	background:
		linear-gradient(90deg, rgba(32,225,194,.13) 1px, transparent 1px) 0 0/18px 18px,
		linear-gradient(rgba(32,225,194,.10) 1px, transparent 1px) 0 0/18px 18px,
		linear-gradient(135deg, #061d23, #0c171d 60%);
}
ul.products li.product.sata-tarjeta--circuito::after {
	border-radius: 2px;
	right: -9px;
	top: 10px;
	width: 52px;
	height: 1px;
	background: var(--sata-card-ac);
	border: 0;
	box-shadow: -14px 12px 0 -1px var(--sata-card-ac), -27px 24px 0 -1px var(--sata-card-ac), -40px 36px 0 -1px var(--sata-card-ac);
}
ul.products li.product.sata-tarjeta--circuito img { border-radius: 2px 14px 2px 14px; }
ul.products li.product.sata-tarjeta--circuito img { transition: opacity .16s ease, transform .35s ease; }
ul.products li.product.sata-tarjeta--circuito .price {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	margin: .55rem auto .75rem;
	padding: 0 .8rem;
	border: 1px solid rgba(32,225,194,.75);
	border-radius: 2px 11px 2px 11px;
	background: rgba(2,27,32,.8);
	box-shadow: inset 3px 0 #20e1c2, 0 0 16px -8px #20e1c2;
	font-variant-numeric: tabular-nums;
}
ul.products li.product.sata-tarjeta--circuito .price::before { content: "PRECIO"; margin-right: .55rem; color: #7eaaa7; font-size: .61rem; font-weight: 700; letter-spacing: .11em; }
ul.products li.product.sata-tarjeta--circuito a.button {
	position: relative;
	display: block;
	margin: .2rem 0 0;
	padding: .78rem .7rem;
	border: 1px solid #20e1c2;
	border-radius: 2px 11px 2px 11px;
	background: linear-gradient(100deg, #073940, #0d2025);
	box-shadow: inset 0 0 0 1px rgba(221,251,245,.12), 0 8px 15px -13px #20e1c2;
	color: #ddfbf5;
	font-weight: 700;
	letter-spacing: .01em;
}
ul.products li.product.sata-tarjeta--circuito a.button:hover,
ul.products li.product.sata-tarjeta--circuito a.button:focus { background: #20e1c2; color: #062127; }
ul.products li.product.sata-tarjeta--circuito.sata-circuito-listo::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(112deg, transparent 30%, rgba(32,225,194,.02) 42%, rgba(32,225,194,.25) 50%, rgba(32,225,194,.02) 58%, transparent 70%);
	background-size: 220% 100%;
	content: "";
	pointer-events: none;
	animation: sata-circuito-barrido 4.8s linear infinite;
}
ul.products li.product.sata-tarjeta--circuito .sata-circuito__nucleo {
	position: absolute;
	left: var(--sata-circuito-x, 50%);
	top: var(--sata-circuito-y, 50%);
	z-index: 0;
	width: 10px;
	height: 10px;
	border: 2px solid #ddfbf5;
	border-radius: 50%;
	background: #20e1c2;
	box-shadow: 0 0 0 6px rgba(32,225,194,.12), 0 0 22px 5px rgba(32,225,194,.48);
	transform: translate(-50%, -50%);
	opacity: .35;
	pointer-events: none;
	transition: left .12s ease-out, top .12s ease-out, opacity .2s ease, transform .2s ease;
}
ul.products li.product.sata-tarjeta--circuito.sata-circuito-activo .sata-circuito__nucleo { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
ul.products li.product.sata-tarjeta--circuito.sata-circuito-activo { box-shadow: 0 0 0 1px #20e1c2, 0 18px 35px -21px #20e1c2; }
@keyframes sata-circuito-barrido { from { background-position: 140% 0; } to { background-position: -120% 0; } }

ul.products li.product.sata-tarjeta--aurora {
	border: 0;
	border-radius: 28px 5px 28px 5px;
	background: linear-gradient(145deg, #33265d 0%, #161531 43%, #4d1f52 100%);
	box-shadow: 0 14px 28px -17px rgba(185,122,255,.9);
}
ul.products li.product.sata-tarjeta--aurora::after {
	right: -22px;
	top: -13px;
	width: 128px;
	height: 74px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(105deg, rgba(123,234,255,.55), rgba(240,139,213,.62));
	box-shadow: 0 0 35px 14px rgba(169,138,255,.22);
	filter: blur(7px);
}
ul.products li.product.sata-tarjeta--aurora img { border: 0; border-radius: 20px 3px 20px 3px; }

ul.products li.product.sata-tarjeta--orbita {
	border-radius: 50% 50% 16px 16px / 12% 12% 5% 5%;
	background: radial-gradient(circle at 50% -25%, rgba(240,164,93,.34), transparent 37%), #192126;
	border-color: rgba(240,164,93,.68);
}
ul.products li.product.sata-tarjeta--orbita::after {
	right: 50%;
	top: -43px;
	width: 116px;
	height: 116px;
	transform: translateX(50%);
	border: 1px solid rgba(240,164,93,.72);
	box-shadow: 0 0 0 12px rgba(240,164,93,.08), 0 0 0 25px rgba(240,164,93,.05);
}
ul.products li.product.sata-tarjeta--orbita img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

ul.products li.product.sata-tarjeta--machupicchu {
	border-radius: 3px;
	border: 2px solid #62c496;
	background:
		linear-gradient(153deg, transparent 0 48%, rgba(98,196,150,.19) 48% 52%, transparent 52%) 0 27px/100% 34px,
		linear-gradient(145deg, #10251d, #17231c 58%, #28351f);
	box-shadow: inset 0 -12px 0 rgba(98,196,150,.12), 0 15px 28px -21px #62c496;
}
ul.products li.product.sata-tarjeta--machupicchu::after {
	right: 9px;
	top: 9px;
	width: 41px;
	height: 41px;
	border: 0;
	border-radius: 0;
	background: linear-gradient(135deg, transparent 0 47%, #dcc79a 48% 52%, transparent 53%);
	box-shadow: -12px 12px 0 -4px #62c496, -24px 24px 0 -4px #dcc79a;
}
ul.products li.product.sata-tarjeta--machupicchu img {
	border-radius: 2px;
	clip-path: polygon(0 11%, 13% 11%, 13% 6%, 27% 6%, 27% 2%, 100% 2%, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
	ul.products li.product.sata-tarjeta,
	ul.products li.product.sata-tarjeta img { transition: none; }
	ul.products li.product.sata-tarjeta--circuito.sata-circuito-listo::before { animation: none; }
}