/* =============================================================
MASTERS TCG - Premium Dark / Gold Skin
Blocksy child theme override
Paleta:
--mtcg-bg-1: #07070a (fondo profundo)
--mtcg-bg-2: #0d0d12 (cards)
--mtcg-bg-3: #15151c (hover/elev)
--mtcg-gold-1: #f3d27a (oro claro)
--mtcg-gold-2: #d4af37 (oro principal)
--mtcg-gold-3: #8a6a18 (oro profundo)
--mtcg-text: #e9e6df
--mtcg-muted: #9a958a
============================================================= */
:root,
:root body {
--mtcg-bg-1: #07070a;
--mtcg-bg-2: #0d0d12;
--mtcg-bg-3: #15151c;
--mtcg-gold-1: #f3d27a;
--mtcg-gold-2: #d4af37;
--mtcg-gold-3: #8a6a18;
--mtcg-text: #e9e6df;
--mtcg-muted: #9a958a;
--mtcg-gold-gradient: linear-gradient(180deg, #f8e7a6 0%, #d4af37 45%, #a07a14 100%);
--mtcg-gold-gradient-soft: linear-gradient(180deg, #f3d27a 0%, #b88a1d 100%);
--mtcg-card-border: 1px solid rgba(212, 175, 55, 0.28);
--mtcg-card-border-hover: 1px solid rgba(212, 175, 55, 0.7);
--mtcg-glow: 0 0 22px rgba(212, 175, 55, 0.35);
/* Override de las variables del Customizer de Blocksy */
--theme-palette-color-1: #d4af37; /* primary */
--theme-palette-color-2: #f3d27a; /* primary hover */
--theme-palette-color-3: #e9e6df; /* texto */
--theme-palette-color-4: #f8e7a6; /* heading */
--theme-palette-color-5: rgba(212,175,55,0.25); /* border */
--theme-palette-color-6: #0d0d12; /* form bg */
--theme-palette-color-7: #07070a; /* footer bg */
--theme-palette-color-8: #f3d27a; /* footer text */
}
/* ================= BASE ================= */
html, body {
background: var(--mtcg-bg-1) !important;
color: var(--mtcg-text) !important;
}
body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
background-image:
radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,0.08), transparent 60%),
radial-gradient(900px 500px at 0% 100%, rgba(212,175,55,0.05), transparent 60%) !important;
background-attachment: fixed !important;
}
a { color: var(--mtcg-gold-1); }
a:hover { color: var(--mtcg-gold-2); }
p, li, span, div, label { color: var(--mtcg-text); }
/* ================= TIPOGRAFÍA ================= */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.ct-section-title, .ct-block-title {
font-family: 'Cinzel', 'Playfair Display', 'Times New Roman', serif !important;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--mtcg-gold-1);
}
/* Títulos grandes con gradiente dorado */
h1, h2,
.hero-title,
.entry-title,
.page-header h1 {
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
text-shadow: 0 0 22px rgba(212, 175, 55, 0.18);
}
/* Etiqueta tipo "ELITE TCG EXPERIENCE" */
.eyebrow,
.elementor-heading-title.eyebrow {
font-family: 'Inter', sans-serif !important;
letter-spacing: 0.4em;
text-transform: uppercase;
font-size: 12px;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: var(--mtcg-gold-1);
}
/* ================= HEADER ================= */
header[data-id="header"],
.ct-header,
.ct-header [data-row] {
background: linear-gradient(180deg, #050507 0%, #0a0a10 100%) !important;
border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
/* Logo MASTERS TCG - glow + sizing acorde al mockup
El logo es vertical (icono arriba, texto abajo). Lo dimensionamos por
altura para que entre limpio en el header sin alterar la altura total. */
.site-logo-container,
[data-id="logo"],
.mtcg-logo-link {
display: inline-flex !important;
align-items: center;
line-height: 0;
}
.site-logo-container img,
[data-id="logo"] img,
img.custom-logo,
img.mtcg-logo {
height: auto !important;
max-height: 86px; /* desktop */
width: auto !important;
max-width: 200px;
filter:
drop-shadow(0 0 14px rgba(212, 175, 55, 0.30))
drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
transition: filter 0.4s ease, transform 0.4s ease;
}
.site-logo-container:hover img,
[data-id="logo"]:hover img,
img.custom-logo:hover,
img.mtcg-logo:hover {
filter:
drop-shadow(0 0 22px rgba(243, 210, 122, 0.55))
drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
transform: scale(1.02);
}
/* Tablet/mobile - achicamos un poco */
@media (max-width: 1024px) {
.site-logo-container img,
[data-id="logo"] img,
img.custom-logo,
img.mtcg-logo {
max-height: 70px;
max-width: 160px;
}
}
@media (max-width: 600px) {
.site-logo-container img,
[data-id="logo"] img,
img.custom-logo,
img.mtcg-logo {
max-height: 56px;
max-width: 130px;
}
}
/* Menú principal */
.ct-menu-link,
nav .menu-item > a,
.ct-header .menu-item > a {
color: var(--mtcg-text) !important;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 13px;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.ct-menu-link:hover,
.ct-menu-link[aria-expanded="true"],
.menu-item.current-menu-item > a,
.menu-item:hover > a {
color: var(--mtcg-gold-1) !important;
text-shadow: 0 0 12px rgba(243, 210, 122, 0.45);
}
/* Subrayado dorado en hover */
.ct-menu-link::after {
content: "";
display: block;
height: 2px;
width: 0;
margin-top: 6px;
background: var(--mtcg-gold-gradient);
transition: width 0.35s ease;
}
.ct-menu-link:hover::after,
.menu-item.current-menu-item > .ct-menu-link::after {
width: 100%;
}
/* Iconos del header (search, account, cart) */
.ct-header-search, .ct-header-account, .ct-header-cart,
.ct-toggle, .ct-icon-container svg {
color: var(--mtcg-gold-1) !important;
fill: var(--mtcg-gold-1) !important;
}
.ct-header-cart .ct-cart-items,
.ct-header-cart .ct-dynamic-count {
background: var(--mtcg-gold-2) !important;
color: #0a0a0a !important;
font-weight: 700;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}
/* Submenús */
.sub-menu, .ct-menu-dropdown {
background: #0a0a10 !important;
border: 1px solid rgba(212, 175, 55, 0.25) !important;
box-shadow: 0 18px 38px rgba(0,0,0,0.6), 0 0 22px rgba(212,175,55,0.08);
}
.sub-menu .menu-item > a {
color: var(--mtcg-text) !important;
}
.sub-menu .menu-item:hover > a {
color: var(--mtcg-gold-1) !important;
background: rgba(212,175,55,0.06);
}
/* ================= BOTONES ================= */
.ct-button,
.button, button, input[type="submit"],
.wp-block-button__link,
.elementor-button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
background: transparent !important;
color: var(--mtcg-gold-1) !important;
border: 1px solid var(--mtcg-gold-2) !important;
border-radius: 2px !important;
padding: 14px 26px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-size: 12px !important;
position: relative;
overflow: hidden;
transition: all 0.35s ease !important;
box-shadow: inset 0 0 0 0 rgba(212, 175, 55, 0.0);
}
.ct-button:hover,
.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
border-color: var(--mtcg-gold-1) !important;
box-shadow: 0 0 24px rgba(212, 175, 55, 0.55), inset 0 0 0 1px rgba(255,255,255,0.25) !important;
transform: translateY(-1px);
}
/* Botón "principal" (CTA) */
.ct-button-primary,
.elementor-button-primary,
.is-style-primary .wp-block-button__link {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
border: 1px solid var(--mtcg-gold-1) !important;
box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}
.ct-button-primary:hover {
box-shadow: 0 0 30px rgba(212, 175, 55, 0.65) !important;
transform: translateY(-1px);
}
/* ================= CARDS / SECCIONES ================= */
.entry-card, .ct-card, .ct-post,
.elementor-widget-wrap > .elementor-element[data-element_type="container"],
.wp-block-group.has-background {
background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%) !important;
border: var(--mtcg-card-border);
border-radius: 4px;
transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.entry-card:hover, .ct-card:hover, .ct-post:hover {
border: var(--mtcg-card-border-hover);
box-shadow: var(--mtcg-glow);
transform: translateY(-2px);
}
/* Separadores */
hr, .wp-block-separator {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.6), transparent);
}
/* ================= WOOCOMMERCE - PRODUCTOS ================= */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.ct-woo-card-type-1, .ct-woo-card-type-2,
[data-products] li.product {
background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%) !important;
border: var(--mtcg-card-border) !important;
border-radius: 4px !important;
padding: 16px !important;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.woocommerce ul.products li.product::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(600px 200px at 50% -20%, rgba(212,175,55,0.08), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
}
.woocommerce ul.products li.product:hover {
border-color: rgba(212, 175, 55, 0.7) !important;
box-shadow: var(--mtcg-glow);
transform: translateY(-3px);
}
.woocommerce ul.products li.product:hover::before { opacity: 1; }
/* Categoría arriba del título (ej: "SELLADOS") */
.woocommerce ul.products li.product .ct-woo-card-extra,
.woocommerce ul.products li.product .product_meta,
.woocommerce ul.products li.product .posted_in {
color: var(--mtcg-gold-1) !important;
letter-spacing: 0.3em;
text-transform: uppercase;
font-size: 11px;
}
/* Título del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600;
font-size: 15px;
letter-spacing: 0;
}
/* Precio */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--mtcg-gold-1) !important;
font-weight: 700;
font-size: 18px;
text-shadow: 0 0 12px rgba(212,175,55,0.25);
}
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
color: var(--mtcg-muted) !important;
opacity: 0.7;
text-shadow: none;
}
/* Botón "AGREGAR AL CARRITO" en grid */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 10px !important;
}
.woocommerce ul.products li.product .button::before {
content: "🛒";
font-size: 13px;
filter: grayscale(1) brightness(1.6);
}
/* Badges (oferta, nuevo) */
.woocommerce span.onsale,
.ct-product-label {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
border: none !important;
border-radius: 2px !important;
font-weight: 700 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 0 14px rgba(212,175,55,0.45);
}
/* Stars */
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
color: var(--mtcg-gold-1) !important;
}
/* ================= PÁGINA DE PRODUCTO ================= */
.woocommerce div.product .product_title {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: transparent;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: #0d0d12 !important;
border-color: rgba(212,175,55,0.25) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: var(--mtcg-bg-3) !important;
border-color: var(--mtcg-gold-2) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--mtcg-text) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--mtcg-gold-1) !important;
}
/* ================= FORMULARIOS / INPUTS ================= */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
background: #0d0d12 !important;
color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.25) !important;
border-radius: 2px !important;
padding: 12px 14px !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, textarea:focus, select:focus {
border-color: var(--mtcg-gold-2) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
}
::placeholder { color: var(--mtcg-muted) !important; opacity: 1; }
/* ================= BANNERS / HEROS ================= */
.elementor-section.has-background-overlay,
.wp-block-cover {
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(212,175,55,0.25);
}
.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2 {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: transparent;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
}
/* ================= FOOTER ================= */
footer[data-id="footer"],
.ct-footer, .ct-footer [data-row] {
background: linear-gradient(180deg, #050507 0%, #0a0a10 100%) !important;
border-top: 1px solid rgba(212, 175, 55, 0.25);
color: var(--mtcg-text) !important;
}
.ct-footer a { color: var(--mtcg-gold-1); }
.ct-footer a:hover { color: var(--mtcg-gold-2); text-shadow: 0 0 10px rgba(212,175,55,0.4); }
.ct-footer .widget-title,
.ct-footer h2, .ct-footer h3, .ct-footer h4 {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
background: none !important;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 13px;
}
/* Info bar (envíos, pago, etc) */
.ct-info-card, .features-bar .feature-item {
background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%);
border: var(--mtcg-card-border);
border-radius: 6px;
padding: 18px 20px;
}
.ct-info-card .icon, .features-bar svg {
color: var(--mtcg-gold-1) !important;
fill: var(--mtcg-gold-1) !important;
}
/* ================= CARRITO / CHECKOUT ================= */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
background: #0d0d12 !important;
border: 1px solid rgba(212,175,55,0.25) !important;
color: var(--mtcg-text) !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
border-color: rgba(212,175,55,0.15) !important;
color: var(--mtcg-text) !important;
}
.woocommerce-info, .woocommerce-message, .woocommerce-error {
background: #0d0d12 !important;
color: var(--mtcg-text) !important;
border-top: 3px solid var(--mtcg-gold-2) !important;
}
.woocommerce-info::before, .woocommerce-message::before {
color: var(--mtcg-gold-1) !important;
}
/* Mini-cart */
.ct-mini-cart, .widget_shopping_cart_content {
background: #0a0a10 !important;
border: 1px solid rgba(212,175,55,0.25) !important;
color: var(--mtcg-text) !important;
}
/* ================= PAGINACIÓN / BREADCRUMB ================= */
.ct-pagination a, .page-numbers {
color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.2) !important;
background: #0d0d12 !important;
border-radius: 2px;
}
.page-numbers.current,
.ct-pagination .current {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
border-color: var(--mtcg-gold-1) !important;
}
.woocommerce-breadcrumb {
color: var(--mtcg-muted) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 12px;
}
.woocommerce-breadcrumb a { color: var(--mtcg-gold-1) !important; }
/* ================= WHATSAPP / FLOATING ================= */
.wa__floating_btn, .floating-whatsapp,
[class*="whatsapp"][class*="float"] {
box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 18px rgba(37, 211, 102, 0.45);
}
/* ================= SLIDER (slick / swiper) ================= */
.slick-dots li button,
.swiper-pagination-bullet {
background: rgba(255,255,255,0.25) !important;
}
.slick-dots li.slick-active button,
.swiper-pagination-bullet-active {
background: var(--mtcg-gold-2) !important;
box-shadow: 0 0 10px rgba(212,175,55,0.65);
}
.slick-prev:before, .slick-next:before,
.swiper-button-prev, .swiper-button-next {
color: var(--mtcg-gold-1) !important;
}
/* ================= SCROLLBAR ================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07070a; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #8a6a18, #d4af37);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--mtcg-gold-1); }
/* ================= SELECCIÓN DE TEXTO ================= */
::selection { background: rgba(212,175,55,0.45); color: #0a0a0a; }
/* =============================================================
FRONT PAGE - Secciones de la home
============================================================= */
.mtcg-front { display: block; }
.mtcg-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.mtcg-section { padding: 56px 0; }
.mtcg-section__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
gap: 16px;
}
.mtcg-section__title {
font-family: 'Cinzel', serif;
font-size: clamp(22px, 2.4vw, 32px);
letter-spacing: 0.18em;
margin: 0;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: transparent;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
position: relative;
padding-left: 14px;
}
.mtcg-section__title::before {
content: "";
position: absolute;
left: 0; top: 8%;
width: 4px; height: 84%;
background: var(--mtcg-gold-gradient);
border-radius: 2px;
box-shadow: 0 0 12px rgba(212,175,55,0.5);
}
.mtcg-eyebrow {
display: inline-block;
font-family: 'Inter', sans-serif;
letter-spacing: 0.4em;
text-transform: uppercase;
font-size: 12px;
color: var(--mtcg-gold-1);
margin-bottom: 14px;
}
/* ----- Botón "skin" propio del home ----- */
.mtcg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 26px;
border: 1px solid var(--mtcg-gold-2);
color: var(--mtcg-gold-1);
background: transparent;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: all 0.35s ease;
cursor: pointer;
}
.mtcg-btn svg { width: 16px; height: 16px; }
.mtcg-btn:hover {
background: var(--mtcg-gold-gradient);
color: #0a0a0a;
box-shadow: 0 0 24px rgba(212,175,55,0.55), inset 0 0 0 1px rgba(255,255,255,0.25);
transform: translateY(-1px);
}
.mtcg-btn--small { padding: 10px 18px; font-size: 11px; }
/* ================= HERO + SLIDER =================
Hero con copy fija + slider de fondo (4 imágenes ciclando).
El overlay del lado izquierdo asegura legibilidad de "MASTER YOUR
COLLECTION" sobre cualquiera de las imágenes. */
.mtcg-hero.mtcg-slider {
position: relative;
overflow: hidden;
display: block;
width: 100%;
min-height: 560px;
background: linear-gradient(180deg, #050507 0%, #0a0a10 100%);
outline: none;
isolation: isolate;
}
/* Track de slides (siempre detrás del overlay) */
.mtcg-slider__track {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.mtcg-slide {
position: absolute;
inset: 0;
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease, visibility 0s linear 1.2s;
pointer-events: none;
}
.mtcg-slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 1.2s ease, visibility 0s linear 0s;
z-index: 1;
}
.mtcg-slide__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.02);
transition: transform 6s ease;
}
.mtcg-slide.is-active .mtcg-slide__img {
transform: scale(1.06); /* leve "Ken Burns" mientras el slide está activo */
}
/* Overlay de oscurecimiento + gradiente del lado izquierdo para que el
texto siempre quede legible sin importar la imagen del slide */
.mtcg-hero.mtcg-slider::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(5,5,10,0.82) 0%,
rgba(5,5,10,0.55) 35%,
rgba(5,5,10,0.15) 60%,
rgba(5,5,10,0.0) 80%),
linear-gradient(180deg, rgba(5,5,10,0.10) 0%, rgba(5,5,10,0.45) 100%);
}
.mtcg-hero.mtcg-slider::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(900px 400px at 80% 50%, rgba(212,175,55,0.12), transparent 60%);
mix-blend-mode: screen;
}
/* ===== STAGE + FIGURE (composición dentro de cada slide) =============
La roca y la figura viven AMBAS dentro de .mtcg-slide para compartir
el mismo stacking context (necesario porque el slide activo crea
contexto con z-index:1, y si la roca quedara afuera taparía al
producto). El orden de pintado dentro del slide es:
- .mtcg-slide__img (fondo cubre todo)
- .mtcg-slide__stage-img (z-index 1: la roca/podio)
- .mtcg-slide__figure-glow (z-index 2: glow detrás del producto)
- .mtcg-slide__figure (z-index 3: el producto)
El PNG de la roca tiene ~47% de espacio transparente debajo del
contenido visible, por eso `bottom: -6%` la deja asomando justo en
el piso del hero (el overflow:hidden del hero recorta lo que sobra). */
/* Roca / podio dentro del slide.
IMPORTANTE: el PNG tiene ~22% de canvas vacío ARRIBA y ~47% vacío
ABAJO del contenido visible. Si solo la pinamos al `bottom`, el rock
visible queda "flotando" en el medio del hero. Para anclarlo al piso
usamos `bottom: 0` + `transform: translateY(40%)` — eso baja el
elemento 40% de su altura (≈170px), la zona vacía inferior se va
debajo del hero (overflow:hidden la recorta) y la roca visible
queda apoyada cerca del piso. */
.mtcg-slide__stage-img {
position: absolute;
z-index: 1;
right: 4%;
bottom: 0;
width: 44%;
max-width: 680px;
min-width: 340px;
height: auto;
display: block;
pointer-events: none;
user-select: none;
transform: translateY(40%);
filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.55));
}
/* Figura del producto (ETB, booster, etc.) — apoyada sobre la roca.
`bottom: 19%` posiciona el borde inferior del wrap de modo que la
base visible del producto quede justo sobre la cara superior de la
roca (el wrap tiene un poco de canvas vacío abajo, así que el
producto se hunde apenas en la piedra para que parezca que está
apoyado, no flotando). */
.mtcg-slide__figure-wrap {
position: absolute;
z-index: 3; /* arriba de la roca (z=1) y del glow (z=2) */
right: 11%; /* alineado al centro horizontal de la roca (74% from left) */
bottom: 19%;
width: 30%;
max-width: 460px;
min-width: 240px;
pointer-events: none;
display: flex;
justify-content: center;
align-items: flex-end;
animation: mtcg-float 6s ease-in-out infinite;
}
.mtcg-slide__figure {
position: relative;
width: 100%;
height: auto;
display: block;
user-select: none;
z-index: 2;
filter:
drop-shadow(0 24px 28px rgba(0, 0, 0, 0.6))
drop-shadow(0 0 35px rgba(64, 156, 255, 0.35));
}
/* Glow cercano detrás del ETB — refuerza el "splash" central */
.mtcg-slide__figure-glow {
position: absolute;
inset: -30% -15% -15% -15%;
z-index: 1;
pointer-events: none;
background:
radial-gradient(closest-side at 50% 40%,
rgba(120, 210, 255, 0.80) 0%,
rgba(60, 160, 240, 0.40) 35%,
rgba(60, 160, 240, 0) 70%),
radial-gradient(closest-side at 50% 65%,
rgba(255, 200, 90, 0.50) 0%,
rgba(255, 165, 50, 0) 75%);
filter: blur(10px);
opacity: 0;
transition: opacity 1.4s ease;
}
.mtcg-slide.is-active .mtcg-slide__figure-glow {
opacity: 1;
}
/* Anim sutil de "respiración" del producto (subir/bajar 4px) */
@keyframes mtcg-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ===== FX: rayos + burst central + chispas =========================
Capa visual detrás de la roca y la figura. Se pinta debajo de
stage-img (z=1) y figure-wrap (z=3) para que queden DETRÁS del
producto. Solo aparece en el slide activo. */
.mtcg-slide__fx {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.6s ease;
}
.mtcg-slide.is-active .mtcg-slide__fx {
opacity: 1;
}
/* Juego de luces sobre la roca y el ETB.
Dos focos suaves (azul + dorado) que vienen desde ángulos opuestos,
se mezclan sobre la base de piedra y le dan ambiente. Sin destellos,
sin partículas — solo iluminación. */
.mtcg-slide__fx-light {
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
filter: blur(18px); /* mucho blur → luz suave, sin bordes */
animation: mtcg-light-breathe 7s ease-in-out infinite;
}
/* Foco AZUL eléctrico (#00AEEF) — entra desde la derecha alta,
barre la roca y baña el costado derecho del ETB. */
.mtcg-slide__fx-light--blue {
background:
radial-gradient(ellipse 38% 55% at 88% 35%,
rgba(0, 174, 239, 0.55) 0%,
rgba(0, 174, 239, 0.20) 40%,
transparent 75%),
radial-gradient(ellipse 55% 28% at 78% 80%,
rgba(0, 174, 239, 0.45) 0%,
rgba(0, 174, 239, 0.15) 45%,
transparent 80%);
}
/* Foco DORADO (#D4AF37) — entra desde la izquierda baja, "caldea"
la base y el frente de la roca para contraste cromático. */
.mtcg-slide__fx-light--gold {
background:
radial-gradient(ellipse 35% 50% at 58% 50%,
rgba(212, 175, 55, 0.45) 0%,
rgba(212, 175, 55, 0.15) 45%,
transparent 80%),
radial-gradient(ellipse 45% 22% at 70% 82%,
rgba(212, 175, 55, 0.55) 0%,
rgba(212, 175, 55, 0.20) 45%,
transparent 80%);
animation-delay: -3.5s; /* desfase con el azul → la luz "respira" alternada */
}
@keyframes mtcg-light-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
.mtcg-slide__figure-wrap,
.mtcg-slide__fx-light { animation: none; }
}
/* Inner del overlay - copy + CTA */
.mtcg-hero__inner {
position: relative;
z-index: 4; /* el copy va por encima del track del slider y del overlay */
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
align-items: center;
min-height: inherit;
padding: 60px 24px;
}
.mtcg-hero__copy {
max-width: 700px;
}
.mtcg-hero__title {
font-family: 'Cinzel', serif;
font-weight: 900;
margin: 6px 0 18px;
line-height: 0.95;
/* clamp calibrado para que "COLLECTION" (la palabra más larga, ~10
chars en Cinzel 900) entre siempre en una sola línea dentro del
max-width del copy (700px). Si subís el font-size, también subí
el max-width del copy o vas a ver "COLLECTIC..." otra vez. */
font-size: clamp(40px, 5.6vw, 78px);
letter-spacing: 0.005em;
text-transform: uppercase;
}
.mtcg-hero__title span {
display: block;
white-space: nowrap; /* evita que "COLLECTION" se parta en dos líneas */
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 30px rgba(212,175,55,0.25);
}
.mtcg-hero__title span:nth-child(2) {
background: linear-gradient(180deg, #ffffff 0%, #c9c9c9 60%, #7d7d7d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 26px rgba(255,255,255,0.18);
}
.mtcg-hero__subtitle {
color: var(--mtcg-text);
font-size: 16px;
max-width: 460px;
margin: 0 0 28px;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
/* Dots inferiores - mismo look del mockup */
.mtcg-slider__dots {
position: absolute;
bottom: 26px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 4;
}
.mtcg-slider__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
border: 1px solid rgba(255, 255, 255, 0.45);
padding: 0;
cursor: pointer;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.mtcg-slider__dot:hover {
background: rgba(255, 255, 255, 0.7);
transform: scale(1.1);
}
.mtcg-slider__dot.is-active {
background: var(--mtcg-gold-1);
border-color: var(--mtcg-gold-1);
width: 26px;
border-radius: 6px;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}
/* Focus ring sutil para accesibilidad */
.mtcg-slider:focus-visible {
box-shadow: inset 0 0 0 3px rgba(212, 175, 55, 0.4);
}
/* Responsive */
@media (max-width: 1280px) {
/* En pantallas medianas mantenemos el centrado (rock_center == figure_center).
Center = right + width/2 → ajustá los `right` proporcionalmente
si querés mover el conjunto. */
.mtcg-slide__stage-img { width: 48%; right: 2%; }
.mtcg-slide__figure-wrap { width: 32%; right: 10%; }
}
@media (max-width: 1024px) {
.mtcg-hero.mtcg-slider { min-height: 480px; }
.mtcg-hero__inner {
grid-template-columns: 1fr;
text-align: center;
padding: 80px 24px 90px;
}
.mtcg-hero__copy { margin: 0 auto; }
/* En mobile bajamos un poco el oscurecido lateral */
.mtcg-hero.mtcg-slider::before {
background:
linear-gradient(180deg,
rgba(5,5,10,0.55) 0%,
rgba(5,5,10,0.45) 50%,
rgba(5,5,10,0.75) 100%);
}
/* Ocultamos la composición de roca + figura + FX: el copy va centrado
y la imagen de fondo del slide ya hace el trabajo visual. */
.mtcg-slide__stage-img,
.mtcg-slide__figure-wrap,
.mtcg-slide__fx { display: none; }
}
@media (max-width: 600px) {
.mtcg-hero.mtcg-slider { min-height: 420px; }
.mtcg-hero__title { font-size: clamp(40px, 12vw, 64px); }
.mtcg-slider__dots { bottom: 18px; gap: 8px; }
.mtcg-slider__dot { width: 8px; height: 8px; }
.mtcg-slider__dot.is-active { width: 22px; }
}
/* ================= CATEGORÍAS ================= */
.mtcg-cats { padding-top: 32px; }
.mtcg-cats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.mtcg-cat-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
padding: 36px 20px 56px;
background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%);
border: 1px solid rgba(212,175,55,0.28);
border-radius: 4px;
color: var(--mtcg-text);
text-decoration: none;
overflow: hidden;
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.mtcg-cat-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(400px 180px at 50% -10%, rgba(212,175,55,0.18), transparent 60%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.mtcg-cat-card:hover {
transform: translateY(-4px);
border-color: rgba(212,175,55,0.7);
box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 28px rgba(212,175,55,0.28);
}
.mtcg-cat-card:hover::before { opacity: 1; }
.mtcg-cat-card__icon {
width: 64px; height: 64px;
color: var(--mtcg-gold-1);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
filter: drop-shadow(0 0 14px rgba(212,175,55,0.35));
}
.mtcg-cat-card__icon svg { width: 100%; height: 100%; }
.mtcg-cat-card__title {
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.18em;
font-size: 18px;
margin: 6px 0 2px;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: transparent;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
}
.mtcg-cat-card__sub {
margin: 0;
color: var(--mtcg-muted);
font-size: 13px;
letter-spacing: 0.04em;
}
.mtcg-cat-card__arrow {
position: absolute;
bottom: 18px;
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid rgba(212,175,55,0.5);
color: var(--mtcg-gold-1);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.35s ease;
}
.mtcg-cat-card__arrow svg { width: 16px; height: 16px; }
.mtcg-cat-card:hover .mtcg-cat-card__arrow {
background: var(--mtcg-gold-gradient);
color: #0a0a0a;
border-color: var(--mtcg-gold-1);
box-shadow: 0 0 14px rgba(212,175,55,0.55);
}
/* ================= INFO BAR (FEATURES) ================= */
.mtcg-features { padding: 24px 0; }
.mtcg-features__bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding: 22px 24px;
background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%);
border: 1px solid rgba(212,175,55,0.28);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.mtcg-features__bar::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(500px 120px at 100% 0%, rgba(212,175,55,0.12), transparent 60%),
radial-gradient(500px 120px at 0% 100%, rgba(212,175,55,0.08), transparent 60%);
pointer-events: none;
}
.mtcg-feature {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 6px 14px;
border-right: 1px solid rgba(212,175,55,0.12);
}
.mtcg-feature:last-child { border-right: none; }
.mtcg-feature__icon {
width: 40px; height: 40px;
color: var(--mtcg-gold-1);
flex-shrink: 0;
filter: drop-shadow(0 0 10px rgba(212,175,55,0.3));
}
.mtcg-feature__icon svg { width: 100%; height: 100%; }
.mtcg-feature__copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.mtcg-feature__copy strong {
color: var(--mtcg-gold-1);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
}
.mtcg-feature__copy strong span {
color: var(--mtcg-text);
font-weight: 500;
margin-left: 4px;
}
.mtcg-feature__copy small {
color: var(--mtcg-muted);
font-size: 12px;
}
/* ================= DESTACADOS ================= */
.mtcg-featured__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.mtcg-product-card {
position: relative;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #0d0d12 0%, #08080c 100%);
border: 1px solid rgba(212,175,55,0.28);
border-radius: 4px;
padding: 14px;
transition: all 0.35s ease;
overflow: hidden;
}
.mtcg-product-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(500px 180px at 50% -20%, rgba(212,175,55,0.10), transparent 60%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.mtcg-product-card:hover {
transform: translateY(-3px);
border-color: rgba(212,175,55,0.7);
box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 0 22px rgba(212,175,55,0.22);
}
.mtcg-product-card:hover::before { opacity: 1; }
.mtcg-product-card__media {
display: block;
background: #0a0a10;
border-radius: 3px;
overflow: hidden;
aspect-ratio: 1 / 1;
margin-bottom: 12px;
border: 1px solid rgba(212,175,55,0.12);
}
.mtcg-product-card__media img {
width: 100%; height: 100%;
object-fit: contain;
transition: transform 0.5s ease;
}
.mtcg-product-card:hover .mtcg-product-card__media img { transform: scale(1.04); }
.mtcg-product-card__cat {
display: inline-block;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--mtcg-gold-1);
margin-bottom: 6px;
font-weight: 600;
}
.mtcg-product-card__title {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1.3;
margin: 0 0 6px;
min-height: 36px;
color: var(--mtcg-text);
-webkit-text-fill-color: var(--mtcg-text);
background: none;
}
.mtcg-product-card__title a {
color: var(--mtcg-text);
text-decoration: none;
}
.mtcg-product-card__title a:hover { color: var(--mtcg-gold-1); }
.mtcg-product-card__price {
color: var(--mtcg-gold-1);
font-weight: 700;
font-size: 18px;
margin-bottom: 12px;
text-shadow: 0 0 10px rgba(212,175,55,0.25);
}
.mtcg-product-card__price del {
color: var(--mtcg-muted);
opacity: 0.7;
margin-right: 6px;
text-shadow: none;
font-weight: 500;
}
.mtcg-product-card__price ins { text-decoration: none; }
.mtcg-product-card__btn { width: 100%; }
.mtcg-empty {
color: var(--mtcg-muted);
text-align: center;
padding: 40px 0;
}
/* ================= CHAOS RISING BANNER ================= */
.mtcg-chaos { padding-top: 24px; padding-bottom: 64px; }
.mtcg-chaos__inner {
position: relative;
display: block;
min-height: 240px;
border-radius: 6px;
overflow: hidden;
background:
radial-gradient(700px 300px at 80% 50%, rgba(60,120,255,0.30), transparent 60%),
radial-gradient(900px 400px at 20% 50%, rgba(60,80,180,0.20), transparent 60%),
linear-gradient(135deg, #0a1230 0%, #050514 60%, #1a0a30 100%);
border: 1px solid rgba(212,175,55,0.35);
text-decoration: none;
color: var(--mtcg-text);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.mtcg-chaos__inner::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 70% 50%, rgba(120,180,255,0.18) 0%, transparent 40%),
repeating-linear-gradient(115deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
pointer-events: none;
}
.mtcg-chaos__inner:hover {
transform: translateY(-2px);
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 32px rgba(212,175,55,0.30);
}
.mtcg-chaos__copy {
position: relative;
z-index: 2;
padding: 50px 56px;
max-width: 60%;
}
.mtcg-chaos__title {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: clamp(40px, 5.5vw, 72px);
margin: 6px 0 22px;
line-height: 0.95;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mtcg-chaos__title {
background: linear-gradient(180deg, #e6efff 0%, #93b6ff 50%, #2c4d9c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 28px rgba(120,180,255,0.25);
}
.mtcg-chaos__cta { backdrop-filter: blur(2px); }
.mtcg-chaos__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
pointer-events: none;
z-index: 1;
transition: transform 0.5s ease;
}
.mtcg-chaos__inner:hover .mtcg-chaos__image {
transform: scale(1.02);
}
/* ================= PREVENTA EXCLUSIVA BANNER ================= */
.mtcg-preventa { padding-top: 24px; padding-bottom: 64px; }
.mtcg-preventa__inner {
position: relative;
display: block;
min-height: 360px;
border-radius: 6px;
overflow: hidden;
background:
radial-gradient(700px 320px at 80% 50%, rgba(170,90,255,0.22), transparent 60%),
radial-gradient(900px 400px at 20% 50%, rgba(212,175,55,0.18), transparent 60%),
linear-gradient(135deg, #120821 0%, #050510 60%, #1a0a30 100%);
border: 1px solid rgba(212,175,55,0.35);
text-decoration: none;
color: var(--mtcg-text);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.mtcg-preventa__inner:hover {
transform: translateY(-2px);
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 32px rgba(212,175,55,0.30);
}
.mtcg-preventa__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
pointer-events: none;
z-index: 1;
transition: transform 0.5s ease;
}
.mtcg-preventa__inner:hover .mtcg-preventa__image {
transform: scale(1.02);
}
.mtcg-preventa__copy {
position: relative;
z-index: 2;
padding: 56px 56px;
max-width: 60%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.mtcg-preventa__kicker {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #d4af37;
text-shadow: 0 0 18px rgba(212,175,55,0.35);
}
.mtcg-preventa__kicker-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: #d4af37;
background:
linear-gradient(180deg, rgba(15,15,20,0.0), rgba(15,15,20,0.0)) padding-box,
linear-gradient(135deg, rgba(248,231,166,0.85) 0%, rgba(212,175,55,0.55) 50%, rgba(248,231,166,0.85) 100%) border-box;
border: 1px solid transparent;
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.mtcg-preventa__kicker-icon svg {
width: 18px;
height: 18px;
}
.mtcg-preventa__title {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: clamp(44px, 6vw, 84px);
line-height: 0.95;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 4px 0 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.mtcg-preventa__title-line {
display: block;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.mtcg-preventa__title-line--gold {
background-image: linear-gradient(180deg, #f8e7a6 0%, #d4af37 55%, #8a6a1e 100%);
text-shadow: 0 0 28px rgba(212,175,55,0.30);
}
.mtcg-preventa__title-line--silver {
background-image: linear-gradient(180deg, #f5f7fb 0%, #c9ccd4 50%, #6e727a 100%);
text-shadow: 0 0 24px rgba(220,225,235,0.25);
}
.mtcg-preventa__subtitle {
font-size: 16px;
line-height: 1.5;
color: var(--mtcg-muted, #cfd0d6);
max-width: 460px;
margin: 4px 0 14px;
}
.mtcg-preventa__cta {
backdrop-filter: blur(2px);
}
/* Marco premium dorado igual que el resto de banners */
.mtcg-preventa__inner {
border: 1px solid transparent !important;
background:
linear-gradient(135deg, #120821 0%, #050510 60%, #1a0a30 100%) padding-box,
linear-gradient(120deg,
rgba(248,231,166,0.85) 0%,
rgba(212,175,55,0.45) 30%,
rgba(80,60,15,0.20) 55%,
rgba(212,175,55,0.45) 80%,
rgba(248,231,166,0.85) 100%) border-box;
}
.mtcg-preventa__inner::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(220px 90px at 0% 0%, rgba(248,231,166,0.28), transparent 60%),
radial-gradient(220px 90px at 100% 0%, rgba(248,231,166,0.28), transparent 60%),
radial-gradient(220px 90px at 0% 100%, rgba(212,175,55,0.18), transparent 60%),
radial-gradient(220px 90px at 100% 100%,rgba(212,175,55,0.18), transparent 60%);
mix-blend-mode: screen;
z-index: 3;
}
/* =============================================================
EXPANDE TU EXPERIENCIA - 3 tarjetas grandes (Colección /
Comunidad / Digital). Cada tarjeta tiene su propio acento de
color (gold / blue / purple) que tiñe el borde, el icono y el
kicker. La imagen ocupa todo el área de la card y la copy se
apoya sobre un degradado oscuro inferior para que se lea bien.
============================================================= */
.mtcg-experience { padding-top: 8px; padding-bottom: 64px; }
.mtcg-experience__head {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin-bottom: 28px;
}
/* Líneas divisorias luminosas a los costados del título.
Se hacen con un degradado horizontal dorado que se atenúa en
los extremos, más un leve glow para imitar el "halo" del mockup. */
.mtcg-experience__head::before,
.mtcg-experience__head::after {
content: "";
flex: 1 1 auto;
max-width: 280px;
height: 1px;
background: linear-gradient(90deg,
rgba(212, 175, 55, 0) 0%,
rgba(212, 175, 55, 0.55) 45%,
rgba(243, 210, 122, 0.85) 100%);
box-shadow: 0 0 8px rgba(212, 175, 55, 0.45);
}
.mtcg-experience__head::after {
background: linear-gradient(90deg,
rgba(243, 210, 122, 0.85) 0%,
rgba(212, 175, 55, 0.55) 55%,
rgba(212, 175, 55, 0) 100%);
}
.mtcg-experience__title {
flex: 0 0 auto;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: clamp(18px, 1.8vw, 24px);
letter-spacing: 0.32em;
text-transform: uppercase;
margin: 0;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.mtcg-experience__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* ------------ Card base ------------ */
.mtcg-exp-card {
--exp-color: 212, 175, 55; /* gold por defecto (RGB) */
--exp-color-soft: 243, 210, 122;
position: relative;
display: block;
min-height: 380px;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: var(--mtcg-text);
isolation: isolate;
background: #0a0a10;
border: 1px solid rgba(var(--exp-color), 0.35);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(var(--exp-color), 0.08) inset;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.mtcg-exp-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--exp-color), 0.75);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.55),
0 0 32px rgba(var(--exp-color), 0.30);
}
/* ------------ Imagen de fondo ------------ */
.mtcg-exp-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
transition: transform 0.6s ease;
}
.mtcg-exp-card:hover .mtcg-exp-card__image {
transform: scale(1.04);
}
/* Degradado oscuro inferior para legibilidad de la copy */
.mtcg-exp-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(7, 7, 10, 0.10) 0%,
rgba(7, 7, 10, 0.35) 45%,
rgba(7, 7, 10, 0.92) 100%);
}
/* ------------ Icono hex top-left ------------ */
.mtcg-exp-card__icon {
position: absolute;
top: 22px;
left: 22px;
z-index: 3;
width: 54px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: rgb(var(--exp-color-soft));
background:
linear-gradient(180deg, rgba(10,10,16,0.85) 0%, rgba(10,10,16,0.65) 100%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
filter: drop-shadow(0 0 10px rgba(var(--exp-color), 0.45));
}
.mtcg-exp-card__icon::before {
content: "";
position: absolute;
inset: 1px;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background:
linear-gradient(180deg, rgba(var(--exp-color), 0.12) 0%, rgba(var(--exp-color), 0.04) 100%);
border: 1px solid rgba(var(--exp-color), 0.55);
pointer-events: none;
}
.mtcg-exp-card__icon svg {
position: relative;
z-index: 1;
width: 24px;
height: 24px;
}
/* ------------ Copy bottom-left ------------ */
.mtcg-exp-card__copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 22px 26px 26px;
}
.mtcg-exp-card__kicker {
display: block;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
margin-bottom: 8px;
color: rgb(var(--exp-color-soft));
text-shadow: 0 0 16px rgba(var(--exp-color), 0.35);
}
.mtcg-exp-card__title {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: clamp(22px, 2.2vw, 30px);
margin: 0 0 6px;
color: #ffffff;
letter-spacing: 0.01em;
}
.mtcg-exp-card__subtitle {
margin: 0 0 16px;
font-size: 14px;
color: var(--mtcg-muted);
}
.mtcg-exp-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
color: var(--mtcg-text);
border: 1px solid rgba(var(--exp-color), 0.6);
background: rgba(7, 7, 10, 0.55);
backdrop-filter: blur(4px);
transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.mtcg-exp-card__arrow svg {
width: 16px;
height: 16px;
}
.mtcg-exp-card:hover .mtcg-exp-card__arrow {
background: rgba(var(--exp-color), 0.18);
border-color: rgb(var(--exp-color-soft));
transform: translateX(3px);
}
/* ------------ Acentos por tema ------------ */
.mtcg-exp-card--gold {
--exp-color: 212, 175, 55;
--exp-color-soft: 243, 210, 122;
}
.mtcg-exp-card--blue {
--exp-color: 70, 140, 255;
--exp-color-soft: 147, 182, 255;
}
.mtcg-exp-card--purple {
--exp-color: 168, 85, 247;
--exp-color-soft: 200, 140, 255;
}
/* =============================================================
NEWSLETTER POKEMASTERS - CTA con frame luminoso (gold→blue)
y visual de sobre con aros concéntricos a la derecha.
============================================================= */
.mtcg-newsletter { padding-top: 8px; padding-bottom: 56px; }
.mtcg-newsletter__frame {
position: relative;
display: grid;
grid-template-columns: 1.25fr 1fr;
align-items: center;
gap: 20px;
min-height: 320px;
padding: 36px 44px;
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(60% 90% at 0% 50%, rgba(212,175,55,0.04), transparent 70%),
radial-gradient(60% 90% at 100% 50%, rgba(70,140,255,0.04), transparent 70%),
linear-gradient(180deg, #07070a 0%, #050507 100%);
/* Frame luminoso: dorado en el lado izq, azul en el der */
border: 1px solid transparent;
background-clip: padding-box;
box-shadow:
0 16px 50px rgba(0,0,0,0.45),
inset 0 0 0 1px rgba(255,255,255,0.02);
}
.mtcg-newsletter__frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(90deg,
rgba(243,210,122,0.65) 0%,
rgba(212,175,55,0.40) 18%,
rgba(212,175,55,0.12) 38%,
rgba(70,140,255,0.12) 62%,
rgba(70,140,255,0.40) 82%,
rgba(127,182,255,0.65) 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ------------ Columna izquierda (copy + form) ------------ */
.mtcg-newsletter__copy {
position: relative;
z-index: 2;
max-width: 560px;
}
.mtcg-newsletter__pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 5px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--mtcg-gold-1);
background: rgba(212,175,55,0.04);
border: 1px solid rgba(212,175,55,0.40);
box-shadow: 0 0 12px rgba(212,175,55,0.12);
margin-bottom: 18px;
}
.mtcg-newsletter__pill svg {
width: 13px;
height: 13px;
}
.mtcg-newsletter__title {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: clamp(26px, 3.2vw, 38px);
line-height: 1;
letter-spacing: 0.04em;
margin: 0 0 14px;
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
gap: 0.28em;
}
.mtcg-newsletter__title-white {
color: #f3f0e8;
-webkit-text-fill-color: #f3f0e8;
}
.mtcg-newsletter__title-gold {
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 28px rgba(212,175,55,0.25);
}
.mtcg-newsletter__divider {
position: relative;
height: 1px;
width: 170px;
margin: 0 0 18px;
background: linear-gradient(90deg,
rgba(243,210,122,0.7) 0%,
rgba(212,175,55,0.35) 60%,
rgba(212,175,55,0) 100%);
box-shadow: 0 0 6px rgba(212,175,55,0.35);
}
.mtcg-newsletter__divider-star {
position: absolute;
top: 50%;
right: 12px;
width: 6px;
height: 6px;
transform: translateY(-50%) rotate(45deg);
background: var(--mtcg-gold-gradient);
box-shadow: 0 0 8px rgba(212,175,55,0.6);
}
.mtcg-newsletter__desc {
font-size: 13.5px;
line-height: 1.5;
color: var(--mtcg-text);
opacity: 0.78;
margin: 0 0 20px;
max-width: 440px;
}
/* ------------ Form ------------ */
.mtcg-newsletter__form {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
max-width: 480px;
}
.mtcg-newsletter__field {
position: relative;
display: flex;
align-items: center;
background: rgba(15, 15, 22, 0.55);
border: 1px solid rgba(212,175,55,0.22);
border-radius: 5px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.mtcg-newsletter__field:focus-within {
border-color: rgba(212,175,55,0.6);
box-shadow: 0 0 0 3px rgba(212,175,55,0.10);
}
.mtcg-newsletter__field-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 100%;
color: var(--mtcg-muted);
}
.mtcg-newsletter__field-icon svg {
width: 16px;
height: 16px;
}
.mtcg-newsletter__input {
flex: 1;
height: 44px;
padding: 0 14px 0 0;
background: transparent !important;
border: 0 !important;
outline: none !important;
color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif;
font-size: 13px;
box-shadow: none !important;
}
.mtcg-newsletter__input::placeholder {
color: var(--mtcg-muted) !important;
opacity: 1;
}
.mtcg-newsletter__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 44px;
padding: 0 22px;
border: 0;
border-radius: 5px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.16em;
color: #1a1305;
cursor: pointer;
background: var(--mtcg-gold-gradient);
box-shadow:
0 6px 18px rgba(212,175,55,0.22),
inset 0 0 0 1px rgba(255,235,180,0.40);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.mtcg-newsletter__submit svg {
width: 15px;
height: 15px;
}
.mtcg-newsletter__submit:hover {
transform: translateY(-1px);
filter: brightness(1.06);
box-shadow:
0 12px 32px rgba(212,175,55,0.45),
inset 0 0 0 1px rgba(255,235,180,0.6);
}
.mtcg-newsletter__submit:active {
transform: translateY(0);
}
/* ------------ Columna derecha (visual SVG) ------------ */
.mtcg-newsletter__visual {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 240px;
}
.mtcg-newsletter__visual-svg {
width: 100%;
max-width: 320px;
height: auto;
display: block;
opacity: 0.92;
filter: drop-shadow(0 0 20px rgba(212,175,55,0.12))
drop-shadow(0 0 20px rgba(70,140,255,0.12));
}
/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
.mtcg-cats__grid,
.mtcg-features__bar { grid-template-columns: repeat(2, 1fr); }
.mtcg-feature { border-right: none; }
.mtcg-featured__grid { grid-template-columns: repeat(3, 1fr); }
.mtcg-experience__grid { grid-template-columns: 1fr; gap: 18px; }
.mtcg-exp-card { min-height: 320px; }
.mtcg-newsletter__frame {
grid-template-columns: 1fr;
padding: 32px 28px;
min-height: 0;
gap: 12px;
}
.mtcg-newsletter__visual { min-height: 200px; order: 2; }
.mtcg-newsletter__visual-svg { max-width: 260px; }
}
@media (max-width: 768px) {
.ct-button, .button, .woocommerce a.button {
padding: 12px 20px !important;
font-size: 11px !important;
}
h1, h2 { letter-spacing: 0.01em; }
.mtcg-section { padding: 40px 0; }
.mtcg-cats__grid { grid-template-columns: 1fr 1fr; }
.mtcg-featured__grid { grid-template-columns: 1fr 1fr; }
.mtcg-features__bar { grid-template-columns: 1fr; padding: 18px; }
.mtcg-chaos__copy { max-width: 100%; padding: 36px 28px; }
.mtcg-preventa__inner { min-height: 320px; }
.mtcg-preventa__copy { max-width: 100%; padding: 36px 28px; }
.mtcg-preventa__title { font-size: clamp(36px, 9vw, 56px); }
.mtcg-preventa__subtitle { font-size: 14px; }
.mtcg-preventa__kicker { font-size: 12px; letter-spacing: 0.24em; }
.mtcg-exp-card { min-height: 280px; }
.mtcg-exp-card__copy { padding: 18px 20px 20px; }
.mtcg-exp-card__icon { top: 16px; left: 16px; width: 48px; height: 54px; }
.mtcg-experience__head { gap: 12px; }
.mtcg-experience__head::before,
.mtcg-experience__head::after { max-width: 80px; }
.mtcg-newsletter__frame { padding: 26px 18px; }
.mtcg-newsletter__form { grid-template-columns: 1fr; }
.mtcg-newsletter__submit { width: 100%; }
.mtcg-newsletter__title { font-size: 26px; }
.mtcg-newsletter__visual-svg { max-width: 220px; }
}
@media (max-width: 480px) {
/* En celular mantenemos 2 columnas para categorías y destacados */
.mtcg-cats__grid,
.mtcg-featured__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* Compactamos las cat-cards para que entren cómodas en 2 cols */
.mtcg-cat-card { padding: 22px 12px 44px; gap: 6px; }
.mtcg-cat-card__icon { width: 48px; height: 48px; margin-bottom: 4px; }
.mtcg-cat-card__title { font-size: 14px; letter-spacing: 0.14em; }
.mtcg-cat-card__sub { font-size: 11px; }
.mtcg-cat-card__arrow { width: 28px; height: 28px; bottom: 12px; }
.mtcg-cat-card__arrow svg { width: 13px; height: 13px; }
/* Compactamos las product-cards para que entren en 2 cols */
.mtcg-product-card { padding: 10px; }
.mtcg-product-card__media { margin-bottom: 8px; }
.mtcg-product-card__title { font-size: 12px; min-height: 32px; }
.mtcg-product-card__price { font-size: 15px; margin-bottom: 8px; }
.mtcg-product-card__cat { font-size: 9px; letter-spacing: 0.22em; }
.mtcg-product-card__btn { padding: 10px 8px !important; font-size: 10px !important; }
}
/* =============================================================
BORDES PREMIUM - glow + corner highlights
Replica los contornos del mockup:
- frame en gradiente dorado (más brillante arriba/derecha)
- brillo extra en las 4 esquinas
- viñeta interior oscura para resaltar el contenido
Se aplica con ::before / ::after sin tocar el markup.
============================================================= */
/* ------- 1. Tarjetas de CATEGORÍA ------- */
.mtcg-cat-card {
border: 1px solid transparent !important;
background:
linear-gradient(180deg, #0d0d12 0%, #08080c 100%) padding-box,
linear-gradient(135deg,
rgba(248,231,166,0.85) 0%,
rgba(212,175,55,0.55) 25%,
rgba(80,60,15,0.25) 50%,
rgba(212,175,55,0.55) 75%,
rgba(248,231,166,0.85) 100%) border-box;
box-shadow:
inset 0 0 60px rgba(0,0,0,0.55),
inset 0 0 0 1px rgba(255,235,180,0.05),
0 4px 20px rgba(0,0,0,0.45);
}
.mtcg-cat-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(110px 80px at 0% 0%, rgba(248,231,166,0.30), transparent 60%),
radial-gradient(110px 80px at 100% 0%, rgba(248,231,166,0.30), transparent 60%),
radial-gradient(120px 90px at 0% 100%, rgba(212,175,55,0.22), transparent 60%),
radial-gradient(120px 90px at 100% 100%,rgba(212,175,55,0.22), transparent 60%);
mix-blend-mode: screen;
opacity: 0.85;
transition: opacity 0.4s ease;
}
.mtcg-cat-card:hover {
box-shadow:
inset 0 0 70px rgba(0,0,0,0.45),
inset 0 0 0 1px rgba(255,235,180,0.15),
0 18px 40px rgba(0,0,0,0.55),
0 0 32px rgba(212,175,55,0.35) !important;
}
.mtcg-cat-card:hover::after { opacity: 1; }
/* ------- 2. Info bar (4 features) ------- */
.mtcg-features__bar {
border: 1px solid transparent !important;
background:
linear-gradient(180deg, #0d0d12 0%, #08080c 100%) padding-box,
linear-gradient(120deg,
rgba(248,231,166,0.8) 0%,
rgba(212,175,55,0.45) 30%,
rgba(80,60,15,0.2) 55%,
rgba(212,175,55,0.45) 80%,
rgba(248,231,166,0.8) 100%) border-box;
box-shadow:
inset 0 0 80px rgba(0,0,0,0.45),
0 6px 24px rgba(0,0,0,0.4);
}
.mtcg-features__bar::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(160px 70px at 0% 0%, rgba(248,231,166,0.22), transparent 60%),
radial-gradient(160px 70px at 100% 0%, rgba(248,231,166,0.22), transparent 60%),
radial-gradient(160px 70px at 0% 100%, rgba(212,175,55,0.16), transparent 60%),
radial-gradient(160px 70px at 100% 100%,rgba(212,175,55,0.16), transparent 60%);
mix-blend-mode: screen;
}
/* ------- 3. Cards de productos destacados ------- */
.mtcg-product-card {
border: 1px solid transparent !important;
background:
linear-gradient(180deg, #0d0d12 0%, #08080c 100%) padding-box,
linear-gradient(135deg,
rgba(248,231,166,0.7) 0%,
rgba(212,175,55,0.40) 30%,
rgba(80,60,15,0.18) 55%,
rgba(212,175,55,0.40) 80%,
rgba(248,231,166,0.7) 100%) border-box;
box-shadow:
inset 0 0 60px rgba(0,0,0,0.5),
0 4px 18px rgba(0,0,0,0.4);
}
.mtcg-product-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(80px 60px at 0% 0%, rgba(248,231,166,0.22), transparent 60%),
radial-gradient(80px 60px at 100% 0%, rgba(248,231,166,0.22), transparent 60%),
radial-gradient(80px 60px at 0% 100%, rgba(212,175,55,0.16), transparent 60%),
radial-gradient(80px 60px at 100% 100%,rgba(212,175,55,0.16), transparent 60%);
mix-blend-mode: screen;
opacity: 0.7;
transition: opacity 0.35s ease;
z-index: 0;
}
.mtcg-product-card > * { position: relative; z-index: 1; }
.mtcg-product-card:hover::after { opacity: 1; }
.mtcg-product-card:hover {
box-shadow:
inset 0 0 70px rgba(0,0,0,0.4),
0 16px 38px rgba(0,0,0,0.55),
0 0 24px rgba(212,175,55,0.28) !important;
}
/* La media del producto también con marco fino dorado */
.mtcg-product-card__media {
border: 1px solid transparent;
background:
#0a0a10 padding-box,
linear-gradient(135deg,
rgba(212,175,55,0.45) 0%,
rgba(80,60,15,0.10) 50%,
rgba(212,175,55,0.45) 100%) border-box;
}
/* ------- 4. Chaos Rising banner ------- */
.mtcg-chaos__inner {
border: 1px solid transparent !important;
background:
linear-gradient(135deg, #0a1230 0%, #050514 60%, #1a0a30 100%) padding-box,
linear-gradient(120deg,
rgba(248,231,166,0.85) 0%,
rgba(212,175,55,0.45) 30%,
rgba(80,60,15,0.20) 55%,
rgba(212,175,55,0.45) 80%,
rgba(248,231,166,0.85) 100%) border-box;
}
.mtcg-chaos__inner::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(220px 90px at 0% 0%, rgba(248,231,166,0.28), transparent 60%),
radial-gradient(220px 90px at 100% 0%, rgba(248,231,166,0.28), transparent 60%),
radial-gradient(220px 90px at 0% 100%, rgba(212,175,55,0.18), transparent 60%),
radial-gradient(220px 90px at 100% 100%,rgba(212,175,55,0.18), transparent 60%);
mix-blend-mode: screen;
z-index: 1;
}
.mtcg-chaos__copy { z-index: 2; }
.mtcg-chaos__image { z-index: 1; }
/* ------- 5. Botones (refinado del frame dorado) ------- */
.mtcg-btn,
.ct-button,
.button, button.button, input[type="submit"],
.wp-block-button__link,
.elementor-button,
.woocommerce a.button, .woocommerce button.button {
background:
linear-gradient(180deg, rgba(15,15,20,0.0), rgba(15,15,20,0.0)) padding-box,
linear-gradient(135deg,
rgba(248,231,166,0.95) 0%,
rgba(212,175,55,0.70) 35%,
rgba(120,90,25,0.35) 60%,
rgba(212,175,55,0.70) 85%,
rgba(248,231,166,0.95) 100%) border-box !important;
border: 1px solid transparent !important;
box-shadow:
inset 0 0 0 1px rgba(255,235,180,0.06),
0 0 0 0 rgba(212,175,55,0);
}
.mtcg-btn:hover,
.ct-button:hover,
.button:hover, button.button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
background: var(--mtcg-gold-gradient) padding-box,
var(--mtcg-gold-gradient) border-box !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.35),
0 0 24px rgba(212,175,55,0.55) !important;
}
/* "VER TODOS" / botones pequeños conservan el efecto */
.mtcg-btn--small {
padding: 10px 18px;
font-size: 11px;
letter-spacing: 0.22em;
}
/* ------- 6. Sutil shimmer animado en hover (cards de categoría) ------- */
@keyframes mtcg-shine {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.mtcg-cat-card:hover {
background:
linear-gradient(180deg, #0d0d12 0%, #08080c 100%) padding-box,
linear-gradient(120deg,
rgba(248,231,166,1) 0%,
rgba(212,175,55,0.6) 25%,
rgba(255,245,200,0.95) 50%,
rgba(212,175,55,0.6) 75%,
rgba(248,231,166,1) 100%) border-box !important;
background-size: 100% 100%, 200% 100% !important;
animation: mtcg-shine 2.6s linear infinite;
}
/* ------- 7. Tarjetas WooCommerce nativas (catálogo / archive) -------
Para que el resto del sitio (no sólo la home) tenga el mismo frame dorado */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.ct-woo-card-type-1, .ct-woo-card-type-2 {
border: 1px solid transparent !important;
background:
linear-gradient(180deg, #0d0d12 0%, #08080c 100%) padding-box,
linear-gradient(135deg,
rgba(248,231,166,0.7) 0%,
rgba(212,175,55,0.40) 30%,
rgba(80,60,15,0.18) 55%,
rgba(212,175,55,0.40) 80%,
rgba(248,231,166,0.7) 100%) border-box !important;
box-shadow:
inset 0 0 60px rgba(0,0,0,0.5),
0 4px 18px rgba(0,0,0,0.4) !important;
}
.woocommerce ul.products li.product:hover {
box-shadow:
inset 0 0 70px rgba(0,0,0,0.4),
0 16px 38px rgba(0,0,0,0.55),
0 0 24px rgba(212,175,55,0.30) !important;
}
/* =============================================================
FOOTER PERSONALIZADO - Masters TCG
3 columnas (Marca / Mi cuenta / Contacto) con reglas luminosas
superior + inferior, ornamentos rúnicos a los costados y
barra de copyright al pie.
============================================================= */
.mtcg-footer {
position: relative;
background: #050507;
color: var(--mtcg-text);
overflow: hidden;
}
/* ---- Reglas luminosas (top + bottom) ---- */
.mtcg-footer__rule {
position: relative;
height: 1px;
margin: 0;
background: linear-gradient(90deg,
rgba(212,175,55,0) 0%,
rgba(212,175,55,0.45) 12%,
rgba(243,210,122,0.85) 50%,
rgba(212,175,55,0.45) 88%,
rgba(212,175,55,0) 100%);
box-shadow: 0 0 8px rgba(212,175,55,0.25);
}
.mtcg-footer__rule--top {
box-shadow: 0 1px 12px rgba(212,175,55,0.35);
}
.mtcg-footer__burst {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 22px;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side,
rgba(255,235,180,0.85) 0%,
rgba(243,210,122,0.45) 35%,
rgba(212,175,55,0) 75%);
pointer-events: none;
filter: blur(0.5px);
}
/* ---- Inner / contenedor ---- */
.mtcg-footer__inner {
position: relative;
padding: 64px 0 56px;
}
/* ---- Ornamentos laterales ---- */
.mtcg-footer__ornament {
position: absolute;
top: 0;
bottom: 0;
width: 160px;
pointer-events: none;
opacity: 0.65;
}
.mtcg-footer__ornament svg {
width: 100%;
height: 100%;
display: block;
}
.mtcg-footer__ornament--left { left: 0; }
.mtcg-footer__ornament--right { right: 0; }
/* ---- Layout 3 columnas ---- */
.mtcg-footer__cols {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr;
gap: 64px;
position: relative;
z-index: 1;
}
/* Separadores verticales suaves entre columnas */
.mtcg-footer__col {
position: relative;
min-width: 0;
}
.mtcg-footer__col + .mtcg-footer__col::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: -32px;
width: 1px;
background: linear-gradient(180deg,
rgba(212,175,55,0) 0%,
rgba(212,175,55,0.18) 20%,
rgba(212,175,55,0.32) 50%,
rgba(212,175,55,0.18) 80%,
rgba(212,175,55,0) 100%);
}
/* ---- Títulos de columnas ---- */
.mtcg-footer__title,
.mtcg-footer__brand-title {
font-family: 'Cinzel', serif;
margin: 0;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: transparent;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.mtcg-footer__title {
font-size: 16px;
font-weight: 700;
margin-bottom: 14px;
}
.mtcg-footer__brand-title {
font-size: clamp(34px, 3.6vw, 46px);
line-height: 0.95;
font-weight: 900;
letter-spacing: 0.06em;
margin-bottom: 14px;
display: flex;
flex-direction: column;
}
.mtcg-footer__brand-title span { display: block; }
/* ---- Divider con estrella debajo de cada título ---- */
.mtcg-footer__divider {
position: relative;
height: 1px;
width: 100%;
max-width: 280px;
margin: 0 0 22px;
background: linear-gradient(90deg,
rgba(243,210,122,0.7) 0%,
rgba(212,175,55,0.45) 35%,
rgba(212,175,55,0) 100%);
box-shadow: 0 0 6px rgba(212,175,55,0.4);
}
.mtcg-footer__divider-star {
position: absolute;
top: 50%;
left: 38%;
width: 7px;
height: 7px;
transform: translate(-50%, -50%) rotate(45deg);
background: var(--mtcg-gold-gradient);
box-shadow: 0 0 10px rgba(243,210,122,0.85);
}
/* ---- Texto descriptivo (col 1) ---- */
.mtcg-footer__about {
font-size: 14px;
line-height: 1.6;
color: var(--mtcg-text);
opacity: 0.78;
margin: 0;
max-width: 420px;
}
/* ---- Lista de Mi cuenta (col 2) ---- */
.mtcg-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.mtcg-footer__list li {
margin: 0;
border-bottom: 1px solid rgba(212,175,55,0.18);
padding: 14px 0;
}
.mtcg-footer__list li:last-child { border-bottom: 0; }
.mtcg-footer__list a {
display: inline-block;
font-size: 15px;
color: var(--mtcg-text) !important;
text-decoration: none;
transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}
.mtcg-footer__list a:hover {
color: var(--mtcg-gold-1) !important;
text-shadow: 0 0 10px rgba(212,175,55,0.4);
transform: translateX(2px);
}
/* ---- Bloques de Contacto (col 3) ---- */
.mtcg-footer__contact { display: block; }
.mtcg-footer__info {
padding: 14px 0;
border-bottom: 1px solid rgba(212,175,55,0.18);
}
.mtcg-footer__info:first-child { padding-top: 0; }
.mtcg-footer__info:last-child { border-bottom: 0; }
.mtcg-footer__info h4 {
margin: 0 0 6px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: var(--mtcg-gold-1);
}
.mtcg-footer__info p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--mtcg-text);
}
.mtcg-footer__info p a {
color: var(--mtcg-text) !important;
text-decoration: none;
}
.mtcg-footer__info p a:hover {
color: var(--mtcg-gold-1) !important;
}
/* ---- Barra inferior copyright ---- */
.mtcg-footer__bottom {
padding: 18px 24px;
text-align: center;
color: var(--mtcg-muted);
font-size: 13px;
letter-spacing: 0.06em;
}
.mtcg-footer__bottom p { margin: 0; }
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.mtcg-footer__cols {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.mtcg-footer__col + .mtcg-footer__col::before { display: none; }
.mtcg-footer__col--brand { grid-column: 1 / -1; }
.mtcg-footer__ornament { width: 110px; opacity: 0.4; }
}
@media (max-width: 640px) {
.mtcg-footer__inner { padding: 48px 0 40px; }
.mtcg-footer__cols { grid-template-columns: 1fr; gap: 32px; }
.mtcg-footer__ornament { display: none; }
.mtcg-footer__brand-title { font-size: 32px; }
}
/* =============================================================
SINGLE PRODUCT - Detalle de producto (Masters TCG redesign)
Reescribe el layout que trae Blocksy por defecto para
acercarlo al mockup: galería sobre fondo oscuro con resplandor,
título Cinzel grande con divisor dorado + diamante, badges
de confianza, categorías outline, sidebar de relacionados
refinado y tabs con underline dorado.
Sólo CSS — no toca templates ni functions.
============================================================= */
/* ---------- Contenedor general ---------- */
.single-product div.product,
.woocommerce.single-product div.product {
color: var(--mtcg-text);
}
/* ---------- 1. GALERÍA DE IMÁGENES ---------- */
/* El padre pinta un fondo blanco brillante. Lo reemplazamos por un
"podio" oscuro con borde dorado tenue y un resplandor sutil,
coherente con el resto del skin. */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.single-product .woocommerce-product-gallery {
background: transparent !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__wrapper > a,
.single-product .woocommerce-product-gallery__wrapper > div {
background: radial-gradient(circle at 50% 60%,
rgba(212,175,55,0.12) 0%,
rgba(212,175,55,0.04) 35%,
var(--mtcg-bg-2) 70%) !important;
border: 1px solid rgba(212,175,55,0.28) !important;
border-radius: 6px !important;
padding: 18px !important;
box-shadow:
0 12px 40px rgba(0,0,0,0.55),
0 0 60px rgba(212,175,55,0.08) inset;
overflow: hidden;
position: relative;
transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:hover,
.woocommerce-page div.product div.images .woocommerce-product-gallery__image:hover {
border-color: rgba(212,175,55,0.55) !important;
box-shadow:
0 12px 40px rgba(0,0,0,0.55),
0 0 28px rgba(212,175,55,0.25);
}
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
background: transparent !important;
border-radius: 4px;
box-shadow: none !important;
mix-blend-mode: normal;
}
/* Botón de zoom dorado */
.woocommerce-product-gallery__trigger {
background: rgba(13,13,18,0.85) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 4px !important;
color: var(--mtcg-gold-1) !important;
width: 38px !important;
height: 38px !important;
line-height: 36px !important;
text-align: center;
transition: all 0.3s ease;
text-decoration: none !important;
font-size: 14px;
top: 12px !important;
right: 12px !important;
}
.woocommerce-product-gallery__trigger:hover {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
box-shadow: 0 0 18px rgba(212,175,55,0.5);
}
/* Thumbnails */
.woocommerce div.product div.images .flex-control-thumbs,
.single-product .flex-control-thumbs {
display: flex !important;
gap: 10px;
margin-top: 14px !important;
padding: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: 72px !important;
margin: 0 !important;
float: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
background: var(--mtcg-bg-2) !important;
border: 1px solid rgba(212,175,55,0.25) !important;
border-radius: 4px !important;
padding: 6px !important;
opacity: 0.7 !important;
transition: all 0.3s ease;
cursor: pointer;
width: 100%;
height: auto;
box-sizing: border-box;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
opacity: 1 !important;
border-color: var(--mtcg-gold-2) !important;
box-shadow: 0 0 14px rgba(212,175,55,0.45);
}
/* ---------- 2. SUMMARY (columna derecha del producto) ---------- */
.woocommerce div.product .summary,
.woocommerce-page div.product .summary {
padding: 4px 0 0 8px;
}
/* Eyebrow opcional (si el theme/template añade .ct-product-meta o
`.posted_in` arriba del título, lo formateamos como en el mockup) */
.woocommerce div.product .summary .ct-product-meta,
.woocommerce div.product .summary > .product_meta:first-child,
.woocommerce div.product .summary .product-eyebrow {
font-family: 'Inter', sans-serif !important;
letter-spacing: 0.4em !important;
text-transform: uppercase !important;
font-size: 12px !important;
color: var(--mtcg-text) !important;
margin: 0 0 8px !important;
display: block;
opacity: 0.85;
}
/* Título del producto - grande, Cinzel, gradiente dorado (sobre-escribe
la regla básica que ya estaba en este archivo en la línea ~392) */
.woocommerce div.product .product_title,
.woocommerce-page div.product .product_title,
.single-product .product_title.entry-title {
font-family: 'Cinzel', 'Playfair Display', serif !important;
font-weight: 700 !important;
font-size: clamp(34px, 3.6vw, 52px) !important;
line-height: 1.05 !important;
letter-spacing: 0.02em !important;
margin: 0 0 18px !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-shadow: 0 0 32px rgba(212,175,55,0.25);
text-transform: uppercase;
}
/* Divisor dorado con diamante - va antes del precio */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price,
.woocommerce-page div.product .summary p.price {
position: relative;
margin: 32px 0 14px !important;
padding-top: 28px !important;
font-family: 'Cinzel', serif !important;
font-size: clamp(26px, 2.6vw, 34px) !important;
font-weight: 700 !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
text-shadow: 0 0 18px rgba(212,175,55,0.18);
letter-spacing: 0.02em;
line-height: 1.1;
}
.woocommerce div.product .summary p.price::before,
.woocommerce div.product .summary span.price::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212,175,55,0.55) 18%,
rgba(243,210,122,0.85) 50%,
rgba(212,175,55,0.55) 82%,
transparent 100%);
box-shadow: 0 0 8px rgba(212,175,55,0.35);
}
.woocommerce div.product .summary p.price::after,
.woocommerce div.product .summary span.price::after {
content: "";
position: absolute;
top: -4px;
left: 50%;
width: 9px;
height: 9px;
background: var(--mtcg-gold-gradient);
transform: translateX(-50%) rotate(45deg);
box-shadow: 0 0 12px rgba(212,175,55,0.6);
border-radius: 1px;
}
/* Override del símbolo de moneda (dejar dorado) */
.woocommerce div.product .summary .price .woocommerce-Price-currencySymbol {
color: var(--mtcg-gold-1);
font-weight: 600;
margin-right: 4px;
}
/* Stock - check verde + texto */
.woocommerce div.product .summary .stock,
.woocommerce div.product p.stock,
.woocommerce div.product .summary .availability {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 6px 0 18px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
color: #4ade80 !important; /* verde claro del mockup */
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.02em;
}
.woocommerce div.product .summary .stock::before,
.woocommerce div.product p.stock::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #16a34a;
-webkit-mask: url("data:image/svg+xml;utf8,") center/14px no-repeat;
mask: url("data:image/svg+xml;utf8,") center/14px no-repeat;
}
.woocommerce div.product .summary .stock.out-of-stock { color: #f87171 !important; }
.woocommerce div.product .summary .stock.out-of-stock::before { background: #dc2626; }
/* Descripción corta */
.woocommerce div.product .summary .woocommerce-product-details__short-description,
.woocommerce-product-details__short-description {
color: var(--mtcg-text) !important;
font-size: 15px;
line-height: 1.6;
margin: 14px 0 22px !important;
max-width: 520px;
opacity: 0.9;
}
/* ---------- 3. FORM CART (quantity + botón) ---------- */
.woocommerce div.product form.cart {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
margin: 18px 0 26px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Quantity selector */
.woocommerce div.product form.cart .quantity {
display: inline-flex !important;
align-items: center;
background: var(--mtcg-bg-2);
border: 1px solid rgba(212,175,55,0.35);
border-radius: 4px;
overflow: hidden;
height: 56px;
min-width: 130px;
}
.woocommerce div.product form.cart .quantity .qty,
.woocommerce div.product form.cart input.qty {
background: transparent !important;
border: none !important;
color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif;
font-size: 18px !important;
font-weight: 600;
text-align: center;
width: 56px !important;
height: 100% !important;
padding: 0 !important;
-moz-appearance: textfield;
box-shadow: none !important;
}
.woocommerce div.product form.cart input.qty:focus {
box-shadow: none !important;
outline: none !important;
}
.woocommerce div.product form.cart input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Botón AÑADIR AL CARRITO con gradiente dorado e ícono */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
flex: 1 1 240px;
min-height: 56px;
padding: 0 28px !important;
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
border: none !important;
border-radius: 4px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.18) inset,
0 8px 22px rgba(212,175,55,0.35);
transition: all 0.3s ease;
cursor: pointer;
}
.woocommerce div.product form.cart .single_add_to_cart_button::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.32) inset,
0 12px 30px rgba(212,175,55,0.55);
color: #0a0a0a !important;
}
/* ---------- 4. BADGES DE CONFIANZA (envíos / originales / segura) ---------- */
/* Si el template no inyecta los badges, los simulamos vía CSS sobre el
wrapper de la summary. Usamos pseudo-elementos en un contenedor
nuevo: agregamos una "placeholder row" después del form.cart. */
.woocommerce div.product .summary form.cart::after {
content: "Envíos a todo el país • Productos 100% originales • Compra 100% segura";
display: block;
flex: 1 0 100%; /* fuerza fila completa a sí mismo */
width: 100%;
margin: 4px 0 0 !important; /* el row-gap del flex ya da el espacio */
padding: 16px 18px;
background: linear-gradient(180deg, rgba(13,13,18,0.85) 0%, rgba(8,8,12,0.85) 100%);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mtcg-muted);
text-align: center;
box-sizing: border-box;
order: 99;
}
/* ---------- 5. CATEGORÍAS / META ---------- */
.woocommerce div.product .product_meta,
.woocommerce-page div.product .product_meta {
background: transparent !important;
border: none !important;
border-top: 1px solid rgba(212,175,55,0.18) !important;
padding: 18px 0 0 !important;
margin: 8px 0 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mtcg-muted) !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.woocommerce div.product .product_meta > span,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as,
.woocommerce div.product .product_meta .sku_wrapper {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
color: var(--mtcg-muted) !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* "CATEGORÍAS:" label en dorado */
.woocommerce div.product .product_meta .posted_in {
font-weight: 600;
color: var(--mtcg-gold-1) !important;
}
/* Cada link de categoría → botón outline dorado */
.woocommerce div.product .product_meta a {
display: inline-block;
padding: 6px 14px !important;
background: transparent !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 2px !important;
color: var(--mtcg-gold-1) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.3s ease;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
background-image: none !important;
}
.woocommerce div.product .product_meta a:hover {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
-webkit-text-fill-color: #0a0a0a !important;
border-color: var(--mtcg-gold-1) !important;
box-shadow: 0 0 14px rgba(212,175,55,0.45);
}
/* Quitar las comas que WooCommerce mete entre términos */
.woocommerce div.product .product_meta a + a { margin-left: 0; }
/* ---------- 6. TABS (DESCRIPCIÓN / VALORACIONES) ---------- */
.woocommerce div.product .woocommerce-tabs {
margin-top: 48px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid rgba(212,175,55,0.28) !important;
padding: 0 !important;
margin: 0 0 24px !important;
display: flex;
gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
position: relative;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 14px 22px !important;
color: var(--mtcg-muted) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none !important;
transition: color 0.3s ease;
background: transparent !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
content: "";
display: block;
position: absolute;
left: 22px;
right: 22px;
bottom: -1px;
height: 2px;
background: var(--mtcg-gold-gradient);
box-shadow: 0 0 10px rgba(212,175,55,0.55);
border-radius: 2px;
}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-Tabs-panel {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: var(--mtcg-text) !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
display: none; /* duplicado del título de la tab */
}
/* ---------- 7. SIDEBAR DE PRODUCTOS RELACIONADOS ---------- */
/* Título de la sidebar */
.single-product .ct-sidebar .widget-title,
.single-product aside.sidebar .widget-title,
.single-product .ct-sidebar .widgettitle,
.single-product .ct-sidebar h2,
.single-product .ct-sidebar h3 {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 18px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: transparent !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
margin: 0 0 22px !important;
padding: 0 !important;
border: none !important;
position: relative;
}
/* Cards individuales de la sidebar (top rated / recent / related) */
.single-product .ct-sidebar ul.product_list_widget,
.single-product .widget_products ul,
.single-product .widget_recent_products ul,
.single-product .widget_top_rated_products ul,
.single-product .widget_recently_viewed_products ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.single-product .ct-sidebar ul.product_list_widget li,
.single-product .widget_products li,
.single-product .widget_recent_products li,
.single-product .widget_top_rated_products li,
.single-product .widget_recently_viewed_products li {
display: flex !important;
align-items: center;
gap: 14px;
padding: 10px !important;
margin: 0 0 10px !important;
background: linear-gradient(180deg, rgba(13,13,18,0.85) 0%, rgba(8,8,12,0.85) 100%) !important;
border: 1px solid rgba(212,175,55,0.20) !important;
border-radius: 4px !important;
transition: all 0.3s ease;
list-style: none !important;
min-height: 80px;
}
.single-product .ct-sidebar ul.product_list_widget li::before,
.single-product .widget_products li::before {
display: none !important;
}
.single-product .ct-sidebar ul.product_list_widget li:hover,
.single-product .widget_products li:hover,
.single-product .widget_recent_products li:hover,
.single-product .widget_top_rated_products li:hover {
border-color: rgba(212,175,55,0.55) !important;
box-shadow: 0 0 18px rgba(212,175,55,0.18);
transform: translateY(-1px);
}
.single-product .ct-sidebar ul.product_list_widget li > a,
.single-product .widget_products li > a {
display: flex !important;
align-items: center;
gap: 14px;
flex: 1;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
text-decoration: none !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 13px !important;
line-height: 1.35;
letter-spacing: 0;
padding: 0 !important;
text-transform: none !important;
}
.single-product .ct-sidebar ul.product_list_widget li img,
.single-product .widget_products li img {
width: 64px !important;
height: 64px !important;
object-fit: cover;
background: var(--mtcg-bg-3) !important;
border: 1px solid rgba(212,175,55,0.25) !important;
border-radius: 3px !important;
padding: 4px !important;
margin: 0 !important;
float: none !important;
flex-shrink: 0;
box-sizing: border-box;
}
.single-product .ct-sidebar ul.product_list_widget li:hover img,
.single-product .widget_products li:hover img {
border-color: rgba(212,175,55,0.55) !important;
}
.single-product .ct-sidebar ul.product_list_widget li .product-title,
.single-product .ct-sidebar ul.product_list_widget li > a > span:not(.amount):not(.woocommerce-Price-amount):not(.woocommerce-Price-currencySymbol) {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 13px !important;
line-height: 1.35;
letter-spacing: 0;
text-transform: none !important;
}
.single-product .ct-sidebar ul.product_list_widget li .amount,
.single-product .ct-sidebar ul.product_list_widget li .woocommerce-Price-amount,
.single-product .widget_products li .amount,
.single-product .widget_products li .woocommerce-Price-amount {
display: block !important;
margin-top: 4px !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
background: none !important;
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.02em;
text-shadow: 0 0 10px rgba(212,175,55,0.25);
}
.single-product .ct-sidebar ul.product_list_widget li ins,
.single-product .ct-sidebar ul.product_list_widget li ins .amount {
background: none !important;
text-decoration: none !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
}
.single-product .ct-sidebar ul.product_list_widget li del,
.single-product .ct-sidebar ul.product_list_widget li del .amount {
color: var(--mtcg-muted) !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
opacity: 0.7;
font-size: 12px !important;
}
/* Botón "VER TODOS LOS PRODUCTOS" (si está como botón al pie del widget) */
.single-product .ct-sidebar .widget .ct-button,
.single-product .ct-sidebar .widget > a.button,
.single-product .ct-sidebar a.see-all-products,
.single-product .ct-sidebar a.view-all {
display: block;
margin-top: 14px;
padding: 14px 18px !important;
background: transparent !important;
border: 1px solid rgba(212,175,55,0.55) !important;
border-radius: 4px !important;
color: var(--mtcg-gold-1) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
text-align: center;
text-decoration: none !important;
transition: all 0.3s ease;
}
.single-product .ct-sidebar .widget .ct-button:hover,
.single-product .ct-sidebar .widget > a.button:hover {
background: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
box-shadow: 0 0 18px rgba(212,175,55,0.45);
}
/* ---------- 8. RELATED / UPSELLS bajo el producto (si existen) ---------- */
.woocommerce.single-product .related.products > h2,
.woocommerce.single-product .upsells.products > h2 {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 24px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 56px 0 24px !important;
text-align: center;
}
/* ---------- 9. BREADCRUMB (refinamiento) ---------- */
.single-product .woocommerce-breadcrumb,
.single-product .ct-breadcrumbs {
margin-bottom: 24px !important;
font-size: 12px !important;
letter-spacing: 0.18em !important;
}
.single-product .woocommerce-breadcrumb a,
.single-product .ct-breadcrumbs a {
color: var(--mtcg-gold-1) !important;
}
.single-product .woocommerce-breadcrumb a:hover,
.single-product .ct-breadcrumbs a:hover {
color: var(--mtcg-gold-2) !important;
}
/* ---------- 10. RESPONSIVE ---------- */
@media (max-width: 1024px) {
.woocommerce div.product .product_title {
font-size: clamp(28px, 5vw, 40px) !important;
}
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
font-size: clamp(22px, 4.5vw, 28px) !important;
}
}
@media (max-width: 640px) {
.woocommerce div.product form.cart {
flex-direction: column;
}
.woocommerce div.product form.cart .quantity { width: 100% !important; max-width: 100% !important; }
.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 60px !important; }
.woocommerce div.product .summary form.cart::after {
font-size: 10px;
letter-spacing: 0.08em;
}
}
/* =============================================================
SINGLE PRODUCT - FIXES Iter-2
1) Quitar líneas verdes / separadores horizontales que pinta
Blocksy entre price → stock y antes de categorías.
2) Quantity + botón en una sola fila.
3) Hacer visibles los botones +/- y el número del input.
============================================================= */
/* ---------- 1. Eliminar líneas verdes / separadores ---------- */
.single-product .summary hr,
.single-product .entry-summary hr,
.woocommerce div.product .summary hr,
.woocommerce div.product .summary .wp-block-separator,
.woocommerce div.product .summary form.cart hr,
.single-product .summary > .ct-divider,
.single-product .entry-summary > .ct-divider,
.single-product .summary [class*="ct-divider"],
.single-product .summary [data-type*="divider"] {
display: none !important;
border: none !important;
background: transparent !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Anular cualquier border verde residual en elementos cercanos al cart */
.woocommerce div.product .summary p,
.woocommerce div.product .summary div,
.woocommerce div.product .summary form.cart,
.woocommerce div.product .summary form.cart > *,
.woocommerce div.product .summary p.stock,
.woocommerce div.product .summary p.price {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
}
.woocommerce div.product .summary p.stock,
.woocommerce div.product p.stock {
border: none !important;
}
/* ---------- 2. Form cart: qty + botón en MISMA fila, badges debajo ---------- */
.woocommerce div.product form.cart {
display: flex !important;
flex-flow: row wrap !important; /* wrap permite que ::after caiga a una fila nueva */
align-items: stretch !important;
column-gap: 12px !important;
row-gap: 14px !important;
gap: 14px 12px !important;
}
/* ---------- 3. Quantity selector (Blocksy data-type=type-1/type-2) ---------- */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .quantity[data-type],
.woocommerce div.product form.cart .quantity[data-type="type-1"],
.woocommerce div.product form.cart .quantity[data-type="type-2"] {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: stretch !important;
position: relative !important;
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
height: 56px !important;
--quantity-width: 140px;
--quantity-height: 56px;
background: var(--mtcg-bg-2) !important;
border: 1px solid rgba(212,175,55,0.40) !important;
border-radius: 4px !important;
overflow: visible !important;
box-sizing: border-box !important;
padding: 0 !important;
}
/* Input numérico - centrado, full height, sin spinners nativos */
.woocommerce div.product form.cart .quantity input[type="number"],
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product form.cart .quantity .qty,
.woocommerce div.product form.cart .quantity[data-type="type-1"] input[type="number"],
.woocommerce div.product form.cart .quantity[data-type="type-2"] input[type="number"] {
display: block !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif !important;
font-size: 17px !important;
font-weight: 600 !important;
line-height: 56px !important;
text-align: center !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 36px !important; /* deja espacio para los botones absolutos */
margin: 0 !important;
-moz-appearance: textfield !important;
visibility: visible !important;
opacity: 1 !important;
}
.woocommerce div.product form.cart .quantity input[type="number"]:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.woocommerce div.product form.cart .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* Botones +/- (Blocksy: .ct-increase/.ct-decrease, WC standard: .plus/.minus) */
.woocommerce div.product form.cart .quantity .ct-increase,
.woocommerce div.product form.cart .quantity .ct-decrease,
.woocommerce div.product form.cart .quantity button.plus,
.woocommerce div.product form.cart .quantity button.minus,
.woocommerce div.product form.cart .quantity[data-type] .ct-increase,
.woocommerce div.product form.cart .quantity[data-type] .ct-decrease {
position: absolute !important;
top: 0 !important;
bottom: auto !important;
height: 100% !important;
max-height: 100% !important;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
transition: background 0.2s ease, color 0.2s ease;
z-index: 2;
}
.woocommerce div.product form.cart .quantity .ct-decrease,
.woocommerce div.product form.cart .quantity[data-type] .ct-decrease,
.woocommerce div.product form.cart .quantity button.minus {
left: 0 !important;
right: auto !important;
inset-inline-start: 0 !important;
inset-inline-end: auto !important;
}
.woocommerce div.product form.cart .quantity .ct-increase,
.woocommerce div.product form.cart .quantity[data-type] .ct-increase,
.woocommerce div.product form.cart .quantity button.plus {
right: 0 !important;
left: auto !important;
inset-inline-end: 0 !important;
inset-inline-start: auto !important;
}
/* Reemplazar el icon-font "woo" (que puede no estar cargando) por
símbolos +/- nativos en una fuente confiable */
.woocommerce div.product form.cart .quantity .ct-decrease::before,
.woocommerce div.product form.cart .quantity[data-type] .ct-decrease::before,
.woocommerce div.product form.cart .quantity button.minus::before {
content: "\2212" !important; /* MINUS SIGN U+2212 */
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1 !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
display: inline-block !important;
transform: none !important;
background: none !important;
border: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce div.product form.cart .quantity .ct-increase::before,
.woocommerce div.product form.cart .quantity[data-type] .ct-increase::before,
.woocommerce div.product form.cart .quantity button.plus::before {
content: "+" !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1 !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
display: inline-block !important;
transform: none !important;
background: none !important;
border: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce div.product form.cart .quantity .ct-increase:hover,
.woocommerce div.product form.cart .quantity .ct-decrease:hover,
.woocommerce div.product form.cart .quantity button.plus:hover,
.woocommerce div.product form.cart .quantity button.minus:hover {
background: rgba(212,175,55,0.15) !important;
color: var(--mtcg-gold-2) !important;
}
.woocommerce div.product form.cart .quantity .ct-increase:hover::before,
.woocommerce div.product form.cart .quantity .ct-decrease:hover::before,
.woocommerce div.product form.cart .quantity button.plus:hover::before,
.woocommerce div.product form.cart .quantity button.minus:hover::before {
color: var(--mtcg-gold-2) !important;
-webkit-text-fill-color: var(--mtcg-gold-2) !important;
}
/* Botón add-to-cart toma el resto del ancho */
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1 1 0 !important;
min-width: 0 !important;
}
/* =============================================================
CART PAGE - /carrito (Masters TCG redesign)
Tarjeta oscura con borde dorado para la tabla de productos,
sidebar "Totales del carrito" en dark+gold (override del bg
blanco que viene del padre), botones outline dorado para
APLICAR CUPÓN / ACTUALIZAR CARRITO y CTA solid para FINALIZAR
COMPRA. Sólo CSS, no toca templates.
============================================================= */
/* ---------- Override de variables Blocksy del cart ---------- */
.woocommerce-cart {
--cart-totals-border: 1px solid rgba(212, 175, 55, 0.35);
--cart-totals-border-radius: 6px;
--cart-totals-padding: 28px;
--theme-table-padding: 1.2em 0.7em;
}
/* =================================================================
Anular la "card boxed" gris que Blocksy pinta detrás del contenido
en el cart. El selector real es `[class*="ct-container"] > article[class*="post"]`
con bg, padding, border, box-shadow y max-width inyectados por el customizer.
Forzamos --has-boxed = var(--false) (Blocksy convierte eso en "no boxed")
y nuevamente nukeamos cada propiedad por si el customizer las sobreescribe inline.
================================================================= */
body.woocommerce-cart [class*="ct-container"] > article[class*="post"],
body.woocommerce-cart article[class*="post"] {
/* desactivamos el flag boxed → cae a la rama "wide" sin bg ni borde */
--has-boxed: var(--false) !important;
--has-boxed-structure: var(--false) !important;
--has-background: var(--false) !important;
--theme-boxed-content-background: transparent !important;
--theme-boxed-content-box-shadow: none !important;
--theme-boxed-content-border: none !important;
--theme-boxed-content-border-radius: 0 !important;
--theme-boxed-content-spacing: 0 !important;
/* y por si el customizer mete un background-color inline */
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
/* Permitir ancho completo del contenedor padre */
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
/* La .entry-content trae .is-layout-constrained de Gutenberg, que aplica
width: var(--theme-block-width) a sus hijos. Forzar a que el cart use 100%. */
body.woocommerce-cart .entry-content,
body.woocommerce-cart .entry-content.is-layout-constrained {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
padding: 0 !important;
}
body.woocommerce-cart .entry-content > .ct-woocommerce-cart-form,
body.woocommerce-cart .is-layout-constrained > .ct-woocommerce-cart-form,
body.woocommerce-cart .ct-woocommerce-cart-form {
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
/* El cart_totals viene con position:sticky desde Blocksy, lo cual a veces
produce overlap al combinarse con nuestra padding/grid. Desactivamos sticky. */
body.woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
position: relative !important;
top: auto !important;
align-self: stretch !important;
}
/* =================================================================
Kadence row que envuelve la página del cart.
IMPORTANTE: Kadence v2 usa CLASE (.kb-row-layout-id...), no ID.
El `kadenceBlockCSS` del bloque inyecta:
selector { background: rgba(255,255,255,0.75);
backdrop-filter: blur(8px) saturate(160%);
border-radius: 24px;
padding: 32px; ... }
donde `selector` = `.kb-row-layout-id82_fa7e25-37`.
Por eso lo nukeamos en clase, ID legacy y wrapper interno.
================================================================= */
.kb-row-layout-id82_fa7e25-37,
.kb-row-layout-id82_fa7e25-37 > .kt-row-column-wrap,
.kb-row-layout-wrap.kb-row-layout-id82_fa7e25-37,
.wp-block-kadence-rowlayout.kb-row-layout-id82_fa7e25-37,
.wp-block-kadence-rowlayout.kb-row-layout-id82_fa7e25-37 > .kt-row-column-wrap,
#kt-layout-id82_fa7e25-37,
#kt-layout-id82_fa7e25-37 > .kt-row-column-wrap,
#kb-row-layout-id82_fa7e25-37,
#kb-row-layout-id82_fa7e25-37 > .kt-row-column-wrap {
background: none !important;
background-color: transparent !important;
background-image: none !important;
background-attachment: scroll !important;
background-blend-mode: normal !important;
background-size: auto !important;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* Eliminar overlays internos del bloque (parallax, gradient overlay, video bg, etc.) */
.kb-row-layout-id82_fa7e25-37 > .kt-row-layout-overlay,
.kb-row-layout-id82_fa7e25-37 .kb-row-layout-overlay,
.kb-row-layout-id82_fa7e25-37 .kadence-overlay,
.kb-row-layout-id82_fa7e25-37 .kt-row-layout-background-image-block,
.kb-row-layout-id82_fa7e25-37 .kb-blocks-bg-video-player,
.kb-row-layout-id82_fa7e25-37 [id*="jarallax-container-"],
#kt-layout-id82_fa7e25-37 > .kt-row-layout-overlay {
display: none !important;
background: none !important;
opacity: 0 !important;
}
.kb-row-layout-id82_fa7e25-37::before,
.kb-row-layout-id82_fa7e25-37::after,
.kb-row-layout-id82_fa7e25-37 > .kt-row-column-wrap::before,
.kb-row-layout-id82_fa7e25-37 > .kt-row-column-wrap::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
/* =================================================================
EFECTO DE LUCES AMBIENTALES en el fondo del cart
(halos dorados sutiles + starfield de partículas pequeñas)
================================================================= */
body.woocommerce-cart {
position: relative;
}
body.woocommerce-cart::before,
body.woocommerce-cart::after {
content: "";
position: fixed;
pointer-events: none;
z-index: 0;
inset: 0;
}
/* Capa 1: halos dorados grandes que respiran detrás del contenido */
body.woocommerce-cart::before {
background:
radial-gradient(900px 600px at 85% 8%, rgba(243,210,122,0.10), transparent 60%),
radial-gradient(700px 500px at 10% 95%, rgba(212,175,55,0.08), transparent 65%),
radial-gradient(500px 400px at 50% 50%, rgba(212,175,55,0.04), transparent 70%);
}
/* Capa 2: starfield -> puntos pequeños dorados/blancos via box-shadow */
body.woocommerce-cart::after {
width: 1px;
height: 1px;
top: 12%;
left: 8%;
background: transparent;
box-shadow:
120px 60px 0 0.5px rgba(243,210,122,0.55),
340px 180px 0 0.5px rgba(255,255,255,0.35),
560px 90px 0 0.5px rgba(243,210,122,0.40),
780px 240px 0 0.5px rgba(255,255,255,0.55),
980px 50px 0 0.5px rgba(212,175,55,0.50),
1180px 300px 0 0.5px rgba(243,210,122,0.45),
1380px 140px 0 0.5px rgba(255,255,255,0.40),
220px 380px 0 0.5px rgba(212,175,55,0.45),
460px 460px 0 0.5px rgba(243,210,122,0.50),
720px 540px 0 0.5px rgba(255,255,255,0.45),
960px 620px 0 0.5px rgba(212,175,55,0.40),
1240px 480px 0 0.5px rgba(243,210,122,0.55),
1500px 580px 0 0.5px rgba(255,255,255,0.30),
80px 700px 0 0.5px rgba(212,175,55,0.35),
380px 820px 0 0.5px rgba(243,210,122,0.45),
680px 880px 0 0.5px rgba(255,255,255,0.40),
980px 760px 0 0.5px rgba(212,175,55,0.50),
1320px 860px 0 0.5px rgba(243,210,122,0.45);
animation: mtcg-twinkle 4.8s ease-in-out infinite alternate;
}
@keyframes mtcg-twinkle {
0% { opacity: 0.55; }
50% { opacity: 1; }
100% { opacity: 0.65; }
}
/* Asegurar que el contenido quede por arriba de los efectos */
body.woocommerce-cart > * {
position: relative;
z-index: 1;
}
/* =================================================================
LÍNEAS CON DESTELLO DORADO debajo de los títulos del cart
(replica el "flare" central que se ve en el mockup).
================================================================= */
/* Línea bajo el título principal "TUS PRODUCTOS" */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
position: relative;
padding-bottom: 18px !important;
}
.woocommerce-cart .page-title::after,
.woocommerce-cart .entry-title::after,
.woocommerce-cart h1.page-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-width: 520px;
height: 1px;
background: linear-gradient(90deg,
rgba(212,175,55,0) 0%,
rgba(212,175,55,0.55) 18%,
rgba(255,235,160,1) 50%,
rgba(212,175,55,0.55) 82%,
rgba(212,175,55,0) 100%);
box-shadow:
0 0 14px rgba(243,210,122,0.85),
0 0 28px rgba(212,175,55,0.45);
}
/* Reemplazo del subrayado del cart_totals por uno con flare central */
.woocommerce-cart .cart_totals h2::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 1px !important;
background: linear-gradient(90deg,
rgba(212,175,55,0) 0%,
rgba(212,175,55,0.5) 20%,
rgba(255,235,160,1) 50%,
rgba(212,175,55,0.5) 80%,
rgba(212,175,55,0) 100%) !important;
box-shadow:
0 0 12px rgba(243,210,122,0.85),
0 0 24px rgba(212,175,55,0.40) !important;
border-radius: 0 !important;
}
/* ---------- Page title ("Tus productos" / "Carrito") ---------- */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: clamp(28px, 3.4vw, 44px) !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 28px !important;
}
/* ---------- Layout 2 columnas Blocksy ---------- */
.woocommerce-cart .ct-woocommerce-cart-form {
gap: 32px !important;
align-items: flex-start;
}
@media (min-width: 1024px) {
.woocommerce-cart .ct-woocommerce-cart-form {
grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) !important;
}
}
/* ---------- 1. Tarjeta principal (formulario carrito) ---------- */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .ct-woocommerce-cart-form > form.woocommerce-cart-form {
background: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(8,8,12,0.92) 100%) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 8px !important;
padding: 28px 32px !important;
box-shadow:
0 12px 40px rgba(0,0,0,0.45),
0 0 60px rgba(212,175,55,0.05) inset;
}
/* ---------- Tabla del cart ---------- */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart .woocommerce-cart-form__contents,
.woocommerce-cart table.shop_table_responsive {
background: transparent !important;
border: none !important;
color: var(--mtcg-text) !important;
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
/* Headers (Producto / Cantidad / Subtotal) */
.woocommerce-cart table.shop_table thead th {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(212,175,55,0.25) !important;
padding: 0 14px 18px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 12px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--mtcg-muted) !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
text-align: left;
}
.woocommerce-cart table.shop_table thead th.product-quantity,
.woocommerce-cart table.shop_table thead th.product-subtotal {
text-align: center;
}
/* Hide first 2 empty TH (remove + thumbnail) on desktop */
.woocommerce-cart table.shop_table thead th.product-remove,
.woocommerce-cart table.shop_table thead th.product-thumbnail {
width: 0;
padding: 0 !important;
}
/* Filas de producto */
.woocommerce-cart table.shop_table tbody tr.cart_item,
.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item {
background: transparent !important;
}
.woocommerce-cart table.shop_table tbody tr.cart_item td,
.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item td {
background: transparent !important;
border: none !important;
border-bottom: 1px dashed rgba(212,175,55,0.20) !important;
padding: 22px 14px !important;
color: var(--mtcg-text) !important;
vertical-align: middle;
}
.woocommerce-cart table.shop_table tbody tr:last-child td {
border-bottom: none !important;
}
/* Botón eliminar (×) */
.woocommerce-cart table.shop_table .product-remove {
width: 36px !important;
padding: 22px 6px !important;
}
.woocommerce-cart table.shop_table .product-remove a.remove,
.woocommerce-cart table.shop_table .product-remove a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 28px !important;
height: 28px !important;
background: transparent !important;
color: var(--mtcg-muted) !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
border: 1px solid rgba(212,175,55,0.25) !important;
border-radius: 50% !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: all 0.25s ease;
}
.woocommerce-cart table.shop_table .product-remove a:hover {
color: #f87171 !important;
-webkit-text-fill-color: #f87171 !important;
border-color: #f87171 !important;
background: rgba(248,113,113,0.08) !important;
}
/* Miniatura del producto */
.woocommerce-cart table.shop_table .product-thumbnail {
width: 100px !important;
padding: 22px 14px 22px 0 !important;
}
.woocommerce-cart table.shop_table .product-thumbnail img,
.woocommerce-cart table.shop_table .product-thumbnail a img {
width: 86px !important;
height: 86px !important;
max-width: 86px !important;
object-fit: cover;
background: var(--mtcg-bg-3) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 4px !important;
padding: 6px;
box-sizing: border-box;
box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
/* Nombre + precio del item */
.woocommerce-cart table.shop_table .product-name {
color: var(--mtcg-text) !important;
}
.woocommerce-cart table.shop_table .product-name a {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 0 !important;
text-decoration: none !important;
text-transform: none !important;
}
.woocommerce-cart table.shop_table .product-name a:hover {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
}
/* Precio bajo el título (en mobile responsive lo muestra Blocksy) */
.woocommerce-cart table.shop_table .product-name .product-price,
.woocommerce-cart table.shop_table .product-price,
.woocommerce-cart table.shop_table .product-name .price {
display: block;
margin-top: 4px;
color: var(--mtcg-muted) !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
background: none !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 13px !important;
text-shadow: none !important;
}
.woocommerce-cart table.shop_table .product-price {
display: none; /* WC pone una columna .product-price en desktop. Si no la querés, ocultar */
}
/* Subtotal */
.woocommerce-cart table.shop_table .product-subtotal,
.woocommerce-cart table.shop_table .product-subtotal .amount,
.woocommerce-cart table.shop_table .product-subtotal .woocommerce-Price-amount {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 18px !important;
letter-spacing: 0.02em !important;
text-shadow: 0 0 12px rgba(212,175,55,0.22);
text-align: center !important;
background: none !important;
}
/* Quantity column - reusar mismo estilo que en single product */
.woocommerce-cart table.shop_table .product-quantity {
text-align: center !important;
}
.woocommerce-cart table.shop_table .product-quantity .quantity,
.woocommerce-cart table.shop_table .product-quantity .quantity[data-type] {
display: inline-flex !important;
align-items: stretch !important;
position: relative !important;
width: 130px !important;
min-width: 130px !important;
max-width: 130px !important;
height: 48px !important;
--quantity-width: 130px;
--quantity-height: 48px;
background: var(--mtcg-bg-2) !important;
border: 1px solid rgba(212,175,55,0.40) !important;
border-radius: 4px !important;
overflow: visible !important;
box-sizing: border-box;
margin: 0 auto;
}
.woocommerce-cart .product-quantity .quantity input[type="number"],
.woocommerce-cart .product-quantity .quantity .qty {
display: block !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 48px !important;
text-align: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 32px !important;
margin: 0 !important;
-moz-appearance: textfield !important;
}
.woocommerce-cart .product-quantity .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce-cart .product-quantity .quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.woocommerce-cart .product-quantity .quantity .ct-increase,
.woocommerce-cart .product-quantity .quantity .ct-decrease {
position: absolute !important;
top: 0 !important;
bottom: auto !important;
height: 100% !important;
width: 32px !important;
max-width: 32px !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
color: var(--mtcg-gold-1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
z-index: 2;
transition: background 0.2s ease, color 0.2s ease;
}
.woocommerce-cart .product-quantity .quantity .ct-decrease {
left: 0 !important;
right: auto !important;
inset-inline-start: 0 !important;
inset-inline-end: auto !important;
}
.woocommerce-cart .product-quantity .quantity .ct-increase {
right: 0 !important;
left: auto !important;
inset-inline-end: 0 !important;
inset-inline-start: auto !important;
}
.woocommerce-cart .product-quantity .quantity .ct-decrease::before {
content: "\2212" !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 18px !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
transform: none !important;
background: none !important;
}
.woocommerce-cart .product-quantity .quantity .ct-increase::before {
content: "+" !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 18px !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
transform: none !important;
background: none !important;
}
.woocommerce-cart .product-quantity .quantity .ct-decrease:hover,
.woocommerce-cart .product-quantity .quantity .ct-increase:hover {
background: rgba(212,175,55,0.15) !important;
}
/* ---------- 2. Cupón + acciones ---------- */
.woocommerce-cart table.shop_table tbody tr.cart-actions td.actions,
.woocommerce-cart table.shop_table tbody tr td.actions,
.woocommerce-cart .cart-actions {
background: transparent !important;
border: none !important;
border-top: 1px solid rgba(212,175,55,0.18) !important;
padding: 24px 0 0 !important;
}
/* Cupón */
.woocommerce-cart .coupon {
display: flex !important;
gap: 10px;
align-items: stretch;
float: none !important;
margin: 0 !important;
}
.woocommerce-cart .coupon label {
display: none !important;
}
.woocommerce-cart .coupon input.input-text,
.woocommerce-cart input#coupon_code {
background: var(--mtcg-bg-2) !important;
color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 4px !important;
padding: 0 16px !important;
height: 48px !important;
min-height: 48px !important;
width: 220px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
}
.woocommerce-cart .coupon input.input-text:focus,
.woocommerce-cart input#coupon_code:focus {
border-color: var(--mtcg-gold-2) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
}
/* Botones de acción del cart - APLICAR CUPÓN / ACTUALIZAR CARRITO → outline gold */
.woocommerce-cart .coupon button.button,
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart .actions .button:not(.checkout-button):not(.alt) {
background: transparent !important;
background-image: none !important;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
border: 1px solid rgba(212,175,55,0.55) !important;
border-radius: 4px !important;
padding: 0 26px !important;
height: 48px !important;
min-height: 48px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
box-shadow: none !important;
transition: all 0.3s ease;
cursor: pointer;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.woocommerce-cart .coupon button.button:hover,
.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce-cart button[name="update_cart"]:hover {
background: var(--mtcg-gold-gradient) !important;
background-image: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
-webkit-text-fill-color: #0a0a0a !important;
border-color: var(--mtcg-gold-1) !important;
box-shadow: 0 0 18px rgba(212,175,55,0.45);
}
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled] {
opacity: 0.55;
cursor: not-allowed;
}
/* Layout: cupón a la izquierda, update cart a la derecha */
.woocommerce-cart table.shop_table .actions {
display: flex !important;
justify-content: space-between !important;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.woocommerce-cart table.shop_table .actions .coupon {
flex: 0 1 auto;
}
.woocommerce-cart table.shop_table .actions button[name="update_cart"] {
flex: 0 0 auto;
margin-left: auto;
}
/* ---------- 3. SIDEBAR TOTALES DEL CARRITO ---------- */
/* Override del fondo blanco que mete el padre en .cart_totals */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
background: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 12px !important;
padding: 32px 30px !important;
color: var(--mtcg-text) !important;
box-shadow:
0 16px 48px rgba(0,0,0,0.55),
0 0 60px rgba(212,175,55,0.08) inset;
}
.woocommerce-cart .cart_totals h2 {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 20px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 8px !important;
padding: 0 0 14px !important;
border-bottom: none;
position: relative;
}
/* Línea de acento dorada bajo el título (similar a "TUS PRODUCTOS") */
.woocommerce-cart .cart_totals h2::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 2px;
background: var(--mtcg-gold-gradient);
box-shadow: 0 0 12px rgba(212,175,55,0.55);
border-radius: 2px;
}
/* Tabla interna del cart_totals */
.woocommerce-cart .cart_totals table {
background: transparent !important;
border: none !important;
width: 100%;
margin: 14px 0 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
background: transparent !important;
border: none !important;
padding: 18px 0 !important;
color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.04em;
}
.woocommerce-cart .cart_totals table tr {
border: none !important;
border-bottom: 1px solid rgba(212,175,55,0.22) !important;
}
.woocommerce-cart .cart_totals table tr:last-child {
border-bottom: none !important;
}
.woocommerce-cart .cart_totals table th {
color: var(--mtcg-text) !important;
font-weight: 500 !important;
text-align: left !important;
width: auto !important;
}
.woocommerce-cart .cart_totals table td {
color: var(--mtcg-text) !important;
text-align: right !important;
font-weight: 600;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
font-size: 16px !important;
font-weight: 700 !important;
padding-top: 22px !important;
padding-bottom: 8px !important;
white-space: nowrap !important;
}
.woocommerce-cart .cart_totals .order-total td {
width: 1%; /* fuerza que el TD del monto se ajuste al contenido y no se parta */
}
.woocommerce-cart .cart_totals .order-total td .amount,
.woocommerce-cart .cart_totals .order-total td .woocommerce-Price-amount,
.woocommerce-cart .cart_totals .order-total td strong,
.woocommerce-cart .cart_totals .order-total td bdi {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
background: none !important;
font-family: 'Cinzel', serif !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-shadow: 0 0 14px rgba(212,175,55,0.32);
white-space: nowrap !important;
display: inline-block;
}
.woocommerce-cart .cart_totals .cart-subtotal td,
.woocommerce-cart .cart_totals .cart-subtotal td .amount,
.woocommerce-cart .cart_totals .cart-subtotal td .woocommerce-Price-amount {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
font-weight: 600;
font-size: 15px;
white-space: nowrap !important;
}
/* Botón FINALIZAR COMPRA / PROCEED TO CHECKOUT */
.woocommerce-cart .wc-proceed-to-checkout {
margin-top: 24px !important;
padding: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .button.alt,
.woocommerce-cart a.checkout-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 12px;
width: 100% !important;
min-height: 56px !important;
padding: 0 28px !important;
background: var(--mtcg-gold-gradient) !important;
background-image: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
-webkit-text-fill-color: #0a0a0a !important;
border: none !important;
border-radius: 4px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.20em !important;
text-transform: uppercase !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.18) inset,
0 8px 22px rgba(212,175,55,0.35);
transition: all 0.3s ease;
opacity: 1 !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
content: "→";
font-size: 18px;
font-weight: 400;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.32) inset,
0 12px 30px rgba(212,175,55,0.55);
color: #0a0a0a !important;
-webkit-text-fill-color: #0a0a0a !important;
}
/* Badge "Compra 100% segura" bajo el botón FINALIZAR COMPRA */
.woocommerce-cart .cart_totals .mtcg-secure-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
color: var(--mtcg-muted);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
}
.woocommerce-cart .cart_totals .mtcg-secure-badge .mtcg-lock-icon {
color: var(--mtcg-gold-1);
flex: 0 0 auto;
}
.woocommerce-cart .cart_totals .mtcg-secure-badge span {
color: var(--mtcg-muted);
-webkit-text-fill-color: var(--mtcg-muted);
}
/* Mensajes de notice / coupon aplicado */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-notices-wrapper > * {
background: linear-gradient(180deg, rgba(13,13,18,0.95) 0%, rgba(8,8,12,0.95) 100%) !important;
color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-top: 3px solid var(--mtcg-gold-2) !important;
border-radius: 6px !important;
padding: 14px 18px !important;
}
.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-info a {
color: var(--mtcg-gold-1) !important;
font-weight: 700;
}
/* ---------- Cart vacío ---------- */
.woocommerce-cart .cart-empty {
background: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(8,8,12,0.92) 100%) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 8px !important;
padding: 32px !important;
color: var(--mtcg-text) !important;
font-family: 'Cinzel', serif;
letter-spacing: 0.06em;
text-align: center;
}
/* ---------- Cross-sells (productos sugeridos bajo el cart) ---------- */
.woocommerce-cart .cross-sells > h2 {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 22px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 48px 0 22px !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 768px) {
.woocommerce-cart .woocommerce-cart-form {
padding: 18px !important;
}
.woocommerce-cart .cart_totals {
padding: 22px !important;
}
.woocommerce-cart table.shop_table .actions {
flex-direction: column;
}
.woocommerce-cart .coupon {
flex-direction: column;
width: 100%;
}
.woocommerce-cart .coupon input.input-text {
width: 100% !important;
}
.woocommerce-cart table.shop_table .actions button[name="update_cart"] {
width: 100%;
margin-left: 0;
}
}
/* =============================================================
CHECKOUT PAGE - layout, form, order review, WhatsApp card,
trust badges. Replica el mockup en /checkout.
============================================================= */
/* Reusar las correcciones del wrapper que ya hicimos para el cart:
matar la card boxed gris de Blocksy y la restricción de Gutenberg. */
body.woocommerce-checkout [class*="ct-container"] > article[class*="post"],
body.woocommerce-checkout article[class*="post"] {
--has-boxed: var(--false) !important;
--has-boxed-structure: var(--false) !important;
--has-background: var(--false) !important;
--theme-boxed-content-background: transparent !important;
--theme-boxed-content-box-shadow: none !important;
--theme-boxed-content-border: none !important;
--theme-boxed-content-border-radius: 0 !important;
--theme-boxed-content-spacing: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .entry-content.is-layout-constrained {
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
padding: 0 !important;
}
body.woocommerce-checkout .entry-content > .woocommerce,
body.woocommerce-checkout .entry-content > form.woocommerce-checkout {
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
/* Mismo efecto de luces ambientales que el cart */
body.woocommerce-checkout {
position: relative;
}
body.woocommerce-checkout::before,
body.woocommerce-checkout::after {
content: "";
position: fixed;
pointer-events: none;
z-index: 0;
inset: 0;
}
body.woocommerce-checkout::before {
background:
radial-gradient(900px 600px at 85% 8%, rgba(243,210,122,0.10), transparent 60%),
radial-gradient(700px 500px at 10% 95%, rgba(212,175,55,0.08), transparent 65%),
radial-gradient(500px 400px at 50% 50%, rgba(212,175,55,0.04), transparent 70%);
}
body.woocommerce-checkout::after {
width: 1px; height: 1px; top: 12%; left: 8%;
background: transparent;
box-shadow:
120px 60px 0 0.5px rgba(243,210,122,0.55),
340px 180px 0 0.5px rgba(255,255,255,0.35),
560px 90px 0 0.5px rgba(243,210,122,0.40),
780px 240px 0 0.5px rgba(255,255,255,0.55),
980px 50px 0 0.5px rgba(212,175,55,0.50),
1180px 300px 0 0.5px rgba(243,210,122,0.45),
1380px 140px 0 0.5px rgba(255,255,255,0.40),
220px 380px 0 0.5px rgba(212,175,55,0.45),
460px 460px 0 0.5px rgba(243,210,122,0.50),
720px 540px 0 0.5px rgba(255,255,255,0.45),
960px 620px 0 0.5px rgba(212,175,55,0.40),
1240px 480px 0 0.5px rgba(243,210,122,0.55),
1500px 580px 0 0.5px rgba(255,255,255,0.30),
80px 700px 0 0.5px rgba(212,175,55,0.35),
380px 820px 0 0.5px rgba(243,210,122,0.45),
680px 880px 0 0.5px rgba(255,255,255,0.40),
980px 760px 0 0.5px rgba(212,175,55,0.50),
1320px 860px 0 0.5px rgba(243,210,122,0.45);
animation: mtcg-twinkle 4.8s ease-in-out infinite alternate;
}
body.woocommerce-checkout > * { position: relative; z-index: 1; }
/* ---------- Page title CHECKOUT con línea de destello ---------- */
.woocommerce-checkout .page-title,
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1.page-title {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: clamp(28px, 3.4vw, 44px) !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 28px !important;
position: relative;
padding-bottom: 18px !important;
}
.woocommerce-checkout .page-title::after,
.woocommerce-checkout .entry-title::after,
.woocommerce-checkout h1.page-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-width: 520px;
height: 1px;
background: linear-gradient(90deg,
rgba(212,175,55,0) 0%,
rgba(212,175,55,0.55) 18%,
rgba(255,235,160,1) 50%,
rgba(212,175,55,0.55) 82%,
rgba(212,175,55,0) 100%);
box-shadow:
0 0 14px rgba(243,210,122,0.85),
0 0 28px rgba(212,175,55,0.45);
}
/* ---------- Layout 2 columnas ----------
Form WC: #customer_details (billing) + #order_review_heading + #order_review.
Pasamos el form a CSS grid: izquierda = customer_details,
derecha = heading + review. */
@media (min-width: 1024px) {
form.woocommerce-checkout.checkout {
display: grid !important;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
gap: 32px !important;
align-items: start;
}
form.woocommerce-checkout.checkout > #customer_details,
form.woocommerce-checkout.checkout > .woocommerce-additional-fields {
grid-column: 1;
}
form.woocommerce-checkout.checkout > #order_review_heading,
form.woocommerce-checkout.checkout > #order_review,
form.woocommerce-checkout.checkout > .mtcg-whatsapp-card {
grid-column: 2;
}
}
/* En pantallas chicas todo apilado */
form.woocommerce-checkout.checkout > * {
margin-bottom: 24px;
}
/* Customer details: dentro hay .col-1 (billing) y .col-2 (shipping).
Apilamos vertical para que coincida con el mockup. */
.woocommerce-checkout #customer_details {
display: block !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
width: 100% !important;
float: none !important;
max-width: none !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
/* ---------- Tarjeta de billing ---------- */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
background: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(8,8,12,0.92) 100%) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 12px !important;
padding: 32px !important;
box-shadow:
0 12px 40px rgba(0,0,0,0.45),
0 0 60px rgba(212,175,55,0.05) inset;
}
/* Heading "Detalles de facturación" - WC original lo escondemos,
inyectamos el nuestro con icono via PHP hook. */
.woocommerce-checkout .woocommerce-billing-fields > h3 {
display: none !important;
}
.woocommerce-checkout .mtcg-billing-heading {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 24px !important;
padding: 0 0 18px !important;
border-bottom: 1px dashed rgba(212,175,55,0.22);
}
.woocommerce-checkout .mtcg-billing-heading__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid rgba(212,175,55,0.45);
border-radius: 8px;
color: var(--mtcg-gold-1);
background: rgba(212,175,55,0.06);
flex: 0 0 32px;
-webkit-text-fill-color: var(--mtcg-gold-1);
}
/* Headings de shipping y notas (si están activos) */
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 24px !important;
padding: 0 0 18px !important;
border-bottom: 1px dashed rgba(212,175,55,0.22);
}
/* ---------- Form rows (grid 2 cols con first/last) ---------- */
.woocommerce-checkout .form-row {
display: flex;
flex-direction: column;
margin: 0 0 20px !important;
padding: 0 !important;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: calc(50% - 8px) !important;
display: inline-flex !important;
}
.woocommerce-checkout .form-row-first { float: left !important; margin-right: 16px !important; }
.woocommerce-checkout .form-row-last { float: right !important; }
.woocommerce-checkout .form-row-wide { width: 100% !important; clear: both !important; }
.woocommerce-checkout .form-row::after { content: ""; display: table; clear: both; }
/* ---------- Labels ---------- */
.woocommerce-checkout .form-row label {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
margin-bottom: 8px !important;
display: block;
}
.woocommerce-checkout .form-row .required,
.woocommerce-checkout .form-row abbr.required {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
border: none !important;
text-decoration: none !important;
margin-left: 2px;
font-weight: 700;
}
.woocommerce-checkout .form-row label .optional {
color: var(--mtcg-muted) !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
font-size: 12px;
}
/* ---------- Inputs / selects ---------- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--multiple {
background: var(--mtcg-bg-2) !important;
background-color: var(--mtcg-bg-2) !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 6px !important;
padding: 0 16px !important;
height: 48px !important;
min-height: 48px !important;
width: 100% !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
box-shadow: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce-checkout .form-row textarea {
height: auto !important;
min-height: 110px !important;
padding: 12px 16px !important;
resize: vertical;
}
.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
color: var(--mtcg-muted) !important;
opacity: 0.85;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--default .select2-selection--single:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--mtcg-gold-2) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
}
/* Select2 (country/state dropdowns) */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
line-height: 46px !important;
padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 46px !important;
right: 8px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--mtcg-gold-1) transparent transparent transparent !important;
}
.select2-dropdown {
background: var(--mtcg-bg-2) !important;
border: 1px solid rgba(212,175,55,0.40) !important;
color: var(--mtcg-text) !important;
}
.select2-results__option {
background: transparent !important;
color: var(--mtcg-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: rgba(212,175,55,0.18) !important;
color: var(--mtcg-gold-1) !important;
}
.select2-search--dropdown .select2-search__field {
background: var(--mtcg-bg-3) !important;
color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 4px !important;
}
/* Checkbox "Ship to a different address?" */
.woocommerce-checkout .woocommerce-shipping-fields h3 label,
.woocommerce-checkout #ship-to-different-address label {
color: var(--mtcg-text) !important;
cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address-checkbox {
accent-color: var(--mtcg-gold-2);
}
/* ---------- ORDER REVIEW (TU PEDIDO) ---------- */
.woocommerce-checkout #order_review_heading {
font-family: 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 20px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
background: var(--mtcg-gold-gradient) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 !important;
padding: 0 !important;
display: none; /* no lo mostramos como heading suelto: el card propio ya tiene su título */
}
.woocommerce-checkout #order_review {
background: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 12px !important;
padding: 30px !important;
box-shadow:
0 16px 48px rgba(0,0,0,0.55),
0 0 60px rgba(212,175,55,0.08) inset;
position: relative;
}
.woocommerce-checkout #order_review::before {
content: "TU PEDIDO";
display: block;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.22em;
text-transform: uppercase;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 0 0 8px;
padding: 0 0 14px;
position: relative;
}
.woocommerce-checkout #order_review::after {
content: "";
position: absolute;
left: 30px;
top: 56px;
width: 64px;
height: 2px;
background: var(--mtcg-gold-gradient);
box-shadow: 0 0 12px rgba(212,175,55,0.55);
border-radius: 2px;
}
/* Tabla del review */
.woocommerce-checkout table.woocommerce-checkout-review-order-table,
.woocommerce-checkout #order_review .shop_table {
background: transparent !important;
border: none !important;
width: 100% !important;
margin: 22px 0 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.woocommerce-checkout #order_review .shop_table thead th {
background: transparent !important;
color: var(--mtcg-muted) !important;
-webkit-text-fill-color: var(--mtcg-muted) !important;
border: none !important;
border-bottom: 1px solid rgba(212,175,55,0.25) !important;
padding: 0 0 14px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
}
.woocommerce-checkout #order_review .shop_table thead th.product-total,
.woocommerce-checkout #order_review .shop_table tfoot td {
text-align: right !important;
}
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(212,175,55,0.18) !important;
padding: 16px 0 !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
vertical-align: middle;
}
.woocommerce-checkout #order_review .shop_table tbody tr.cart_item td.product-name {
font-weight: 600 !important;
}
.woocommerce-checkout #order_review .shop_table .product-quantity {
color: var(--mtcg-muted) !important;
font-weight: 500 !important;
margin-left: 6px;
}
.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td {
background: transparent !important;
border: none !important;
padding: 14px 0 !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr {
border-bottom: 1px solid rgba(212,175,55,0.18) !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr:last-child {
border-bottom: none !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td {
font-size: 16px !important;
font-weight: 700 !important;
padding-top: 18px !important;
white-space: nowrap !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td .amount,
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td bdi,
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td strong {
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
background: none !important;
font-family: 'Cinzel', serif !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-shadow: 0 0 14px rgba(212,175,55,0.32);
white-space: nowrap !important;
}
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal td,
.woocommerce-checkout #order_review .shop_table tfoot tr.cart-subtotal td .amount {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
font-size: 15px !important;
}
/* Payment box (oculto si no hay métodos visibles, los pasarela igual mantiene el botón) */
.woocommerce-checkout #payment {
background: transparent !important;
border: none !important;
margin-top: 20px !important;
padding: 0 !important;
box-shadow: none !important;
}
.woocommerce-checkout #payment ul.payment_methods {
background: transparent !important;
padding: 0 !important;
border: none !important;
margin: 0 0 18px !important;
list-style: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(212,175,55,0.18) !important;
border-radius: 8px;
padding: 12px 14px !important;
margin: 0 0 10px !important;
color: var(--mtcg-text) !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
color: var(--mtcg-text) !important;
font-weight: 600;
cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
accent-color: var(--mtcg-gold-2);
margin-right: 8px;
}
.woocommerce-checkout #payment .payment_box {
background: var(--mtcg-bg-3) !important;
color: var(--mtcg-muted) !important;
border: 1px solid rgba(212,175,55,0.18) !important;
border-radius: 6px;
padding: 12px !important;
margin-top: 10px !important;
font-size: 13px;
}
.woocommerce-checkout #payment .payment_box::before {
display: none;
}
/* Botón FINALIZAR COMPRA */
.woocommerce-checkout #payment .form-row.place-order,
.woocommerce-checkout .form-row.place-order {
margin: 18px 0 0 !important;
padding: 0 !important;
}
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 12px;
width: 100% !important;
min-height: 56px !important;
padding: 0 28px !important;
background: var(--mtcg-gold-gradient) !important;
background-image: var(--mtcg-gold-gradient) !important;
color: #0a0a0a !important;
-webkit-text-fill-color: #0a0a0a !important;
border: none !important;
border-radius: 6px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.20em !important;
text-transform: uppercase !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.18) inset,
0 8px 22px rgba(212,175,55,0.35);
transition: all 0.3s ease;
opacity: 1 !important;
cursor: pointer;
}
.woocommerce-checkout #place_order::after {
content: "→";
font-size: 18px;
font-weight: 400;
}
.woocommerce-checkout #place_order:hover {
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.32) inset,
0 12px 30px rgba(212,175,55,0.55);
}
/* "Compra 100% segura" debajo del botón en checkout */
.woocommerce-checkout #order_review .mtcg-secure-badge,
.woocommerce-checkout #payment .mtcg-secure-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
color: var(--mtcg-muted);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
}
.woocommerce-checkout #order_review .mtcg-secure-badge .mtcg-lock-icon,
.woocommerce-checkout #payment .mtcg-secure-badge .mtcg-lock-icon {
color: var(--mtcg-gold-1);
}
.woocommerce-checkout #order_review .mtcg-secure-badge span,
.woocommerce-checkout #payment .mtcg-secure-badge span {
color: var(--mtcg-muted);
}
/* "Tu pedido" heading que viene de WC -> oculto el del payment */
.woocommerce-checkout #payment > h3,
.woocommerce-checkout #payment .terms-and-conditions-wrapper {
color: var(--mtcg-muted) !important;
}
/* ---------- TARJETA WHATSAPP ---------- */
.mtcg-whatsapp-card {
display: flex;
gap: 16px;
align-items: flex-start;
background: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%);
border: 1px solid rgba(212,175,55,0.35);
border-radius: 12px;
padding: 24px;
margin-top: 20px;
box-shadow:
0 12px 40px rgba(0,0,0,0.45),
0 0 50px rgba(212,175,55,0.05) inset;
}
.mtcg-whatsapp-card__icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #25D366;
border-radius: 50%;
color: #0a0a0a;
box-shadow: 0 0 18px rgba(37,211,102,0.45);
}
.mtcg-whatsapp-card__body { flex: 1; min-width: 0; }
.mtcg-whatsapp-card__body h3 {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
background: none !important;
margin: 0 0 8px !important;
letter-spacing: 0;
text-transform: none;
}
.mtcg-whatsapp-card__body p {
color: var(--mtcg-muted) !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin: 0 0 14px !important;
}
.mtcg-whatsapp-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 0 20px;
background: transparent;
color: var(--mtcg-gold-1) !important;
-webkit-text-fill-color: var(--mtcg-gold-1) !important;
border: 1px solid rgba(212,175,55,0.55);
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.25s ease;
}
.mtcg-whatsapp-card__btn:hover {
background: var(--mtcg-gold-gradient);
color: #0a0a0a !important;
-webkit-text-fill-color: #0a0a0a !important;
border-color: var(--mtcg-gold-1);
box-shadow: 0 0 18px rgba(212,175,55,0.35);
}
/* ---------- TRUST BADGES ROW ---------- */
.mtcg-trust-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
background: linear-gradient(180deg, rgba(13,13,18,0.85) 0%, rgba(8,8,12,0.85) 100%);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 12px;
padding: 22px 26px;
margin: 36px 0 12px;
}
.mtcg-trust-row__item {
display: flex;
gap: 14px;
align-items: center;
min-width: 0;
}
.mtcg-trust-row__icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: var(--mtcg-gold-1);
}
.mtcg-trust-row__txt {
display: flex;
flex-direction: column;
min-width: 0;
}
.mtcg-trust-row__txt strong {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: var(--mtcg-gold-1);
margin-bottom: 2px;
}
.mtcg-trust-row__txt span {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--mtcg-muted);
-webkit-text-fill-color: var(--mtcg-muted);
}
@media (max-width: 768px) {
.mtcg-trust-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 18px;
}
}
/* ---------- Mensajes / notices del checkout ---------- */
.woocommerce-checkout .woocommerce-notices-wrapper > *,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
background: linear-gradient(180deg, rgba(13,13,18,0.95) 0%, rgba(8,8,12,0.95) 100%) !important;
color: var(--mtcg-text) !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-top: 3px solid var(--mtcg-gold-2) !important;
border-radius: 6px !important;
padding: 14px 18px !important;
}
/* ---------- Responsive checkout ---------- */
@media (max-width: 1023px) {
form.woocommerce-checkout.checkout {
display: block !important;
}
form.woocommerce-checkout.checkout > * {
grid-column: auto !important;
}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
width: 100% !important;
float: none !important;
margin-right: 0 !important;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review {
padding: 22px !important;
}
}
/* =============================================================
KILL SWITCH - CSS legacy del post content / customizer
Esa CSS heredada aplicaba fondos blancos translúcidos
(rgba(248,249,251,0.95), rgba(255,255,255,0.9/.92)) a las
cards del cart, checkout y al .entry-content.
La nukeamos con !important y volvemos a aplicar el estilo dorado.
============================================================= */
/* 1. Kadence rows con backgrounds blancos/grises legacy */
.kb-row-layout-id83_c5fb6e-81,
.kb-row-layout-id83_c5fb6e-81 > .kt-row-column-wrap,
.kb-row-layout-id82_51c16c-77,
.kb-row-layout-id82_51c16c-77 > .kt-row-column-wrap,
.kb-row-layout-id83_1cd127-75,
.kb-row-layout-id83_1cd127-75 > .kt-row-column-wrap,
.kb-row-layout-id2_e6c17b-e3,
.kb-row-layout-id2_e6c17b-e3 > .kt-row-column-wrap {
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
.kb-row-layout-id83_c5fb6e-81 > .kt-row-layout-overlay,
.kb-row-layout-id82_51c16c-77 > .kt-row-layout-overlay,
.kb-row-layout-id83_1cd127-75 > .kt-row-layout-overlay,
.kb-row-layout-id2_e6c17b-e3 > .kt-row-layout-overlay {
display: none !important;
}
.kb-row-layout-id83_c5fb6e-81::before,
.kb-row-layout-id83_c5fb6e-81::after,
.kb-row-layout-id82_51c16c-77::before,
.kb-row-layout-id82_51c16c-77::after,
.kb-row-layout-id83_1cd127-75::before,
.kb-row-layout-id83_1cd127-75::after,
.kb-row-layout-id2_e6c17b-e3::before,
.kb-row-layout-id2_e6c17b-e3::after {
content: none !important;
display: none !important;
}
/* 2. CSS legacy genérica del post content que toca selectores globales
de Woo. Reseteamos a transparente y dejamos que NUESTRAS reglas
posteriores apliquen el card oscuro con borde dorado. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* 3. Reaplicar (REFORZADO con !important) las cards doradas que ya
teníamos en .woocommerce-billing-fields, #order_review, .cart_totals.
Esto garantiza que ganen vs. la CSS legacy aún con misma especificidad. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
background: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(8,8,12,0.92) 100%) !important;
background-color: rgba(13,13,18,0.92) !important;
background-image: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(8,8,12,0.92) 100%) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 12px !important;
padding: 32px !important;
box-shadow:
0 12px 40px rgba(0,0,0,0.55),
0 0 60px rgba(212,175,55,0.10) inset,
0 0 0 1px rgba(212,175,55,0.08) inset !important;
backdrop-filter: none !important;
position: relative;
}
/* Glow externo pulsante alrededor de la card de billing (efecto de luces) */
.woocommerce-checkout .woocommerce-billing-fields::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 12px;
pointer-events: none;
background:
radial-gradient(180px 80px at 0% 0%, rgba(243,210,122,0.18), transparent 70%),
radial-gradient(180px 80px at 100% 0%, rgba(243,210,122,0.14), transparent 70%),
radial-gradient(220px 100px at 50% 100%, rgba(212,175,55,0.10), transparent 70%);
mix-blend-mode: screen;
opacity: 0.85;
z-index: 0;
}
.woocommerce-checkout .woocommerce-billing-fields > * {
position: relative;
z-index: 1;
}
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
background: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%) !important;
background-color: rgba(13,13,18,0.96) !important;
background-image: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 12px !important;
padding: 32px 30px !important;
box-shadow:
0 16px 48px rgba(0,0,0,0.55),
0 0 60px rgba(212,175,55,0.10) inset !important;
backdrop-filter: none !important;
}
.woocommerce-checkout #order_review {
background: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%) !important;
background-color: rgba(13,13,18,0.96) !important;
background-image: linear-gradient(180deg, rgba(13,13,18,0.96) 0%, rgba(8,8,12,0.96) 100%) !important;
border: 1px solid rgba(212,175,55,0.45) !important;
border-radius: 12px !important;
padding: 30px !important;
box-shadow:
0 16px 48px rgba(0,0,0,0.55),
0 0 60px rgba(212,175,55,0.10) inset !important;
backdrop-filter: none !important;
}
/* 4. Restablecer color de texto de inputs/labels por si la CSS legacy
los pintó de oscuro sobre fondo blanco. */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
color: var(--mtcg-text) !important;
-webkit-text-fill-color: var(--mtcg-text) !important;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
background: var(--mtcg-bg-2) !important;
background-color: var(--mtcg-bg-2) !important;
background-image: none !important;
border: 1px solid rgba(212,175,55,0.30) !important;
border-radius: 6px !important;
}
/* 5. Override del border-color púrpura del legacy (#7e3af2) en focus */
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
border-color: var(--mtcg-gold-2) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
outline: none !important;
}
/* =============================================================
SEARCH MODAL (Blocksy)
El modal #search-modal abre como overlay full-screen. El form
.ct-search-form va flex (input + botón submit). Por defecto se
ve mal porque el override global de input le pega un padding
raro y el botón queda invisible. Acá lo refinamos para que
matchee el resto del sitio (dark + dorado).
============================================================= */
#search-modal.ct-panel {
background: rgba(5, 5, 12, 0.82) !important;
backdrop-filter: blur(8px);
}
#search-modal .ct-panel-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 720px;
width: calc(100% - 80px);
margin: 0 auto;
padding: 0 0 80px;
}
#search-modal .ct-panel-content-inner,
#search-modal .ct-panel-inner {
background: transparent !important;
}
#search-modal .ct-search-form {
width: 100%;
max-width: 640px;
margin: 0 auto;
display: flex;
align-items: stretch;
gap: 0;
border-radius: 4px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(180deg, #0d0d12 0%, #08080c 100%) padding-box,
linear-gradient(135deg,
rgba(248,231,166,0.85) 0%,
rgba(212,175,55,0.55) 50%,
rgba(248,231,166,0.85) 100%) border-box;
box-shadow:
0 24px 60px rgba(0,0,0,0.55),
0 0 0 4px rgba(212,175,55,0.10);
}
#search-modal .ct-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
height: 56px;
padding: 0 18px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 16px;
color: var(--mtcg-text) !important;
font-family: inherit;
letter-spacing: 0.02em;
}
#search-modal .ct-search-form input[type="search"]:focus {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
}
#search-modal .ct-search-form input[type="search"]::placeholder {
color: rgba(207, 208, 214, 0.55) !important;
font-style: normal;
letter-spacing: 0.04em;
}
#search-modal .ct-search-form-controls {
flex: 0 0 auto;
display: flex;
align-items: stretch;
}
#search-modal .ct-search-form .wp-element-button,
#search-modal .ct-search-form button[type="submit"] {
width: 56px !important;
height: 56px !important;
min-height: 56px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(248,231,166,0.95) 0%,
rgba(212,175,55,0.85) 50%,
rgba(160,120,40,0.95) 100%) !important;
color: #0a0a10 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer;
transition: filter 0.2s ease, transform 0.2s ease;
}
#search-modal .ct-search-form .wp-element-button:hover,
#search-modal .ct-search-form button[type="submit"]:hover {
filter: brightness(1.1);
transform: none;
}
#search-modal .ct-search-form .wp-element-button svg,
#search-modal .ct-search-form button[type="submit"] svg {
width: 18px;
height: 18px;
color: #0a0a10;
fill: currentColor;
}
/* Botón "X" de cerrar */
#search-modal .ct-panel-actions {
padding: 24px 28px;
}
#search-modal .ct-toggle-close {
background: transparent !important;
border: 1px solid rgba(212,175,55,0.45) !important;
color: var(--mtcg-gold-1) !important;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#search-modal .ct-toggle-close:hover {
background: rgba(212,175,55,0.12) !important;
border-color: var(--mtcg-gold-2) !important;
color: var(--mtcg-gold-2) !important;
}
#search-modal .ct-toggle-close svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Resultados live debajo del input */
#search-modal .ct-search-results {
margin-top: 28px;
background: rgba(13, 13, 18, 0.85);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 6px;
padding: 18px;
width: 100%;
max-width: 640px;
}
#search-modal .ct-search-results a {
color: var(--mtcg-text);
border-bottom-color: rgba(212,175,55,0.12) !important;
}
#search-modal .ct-search-results a:hover {
color: var(--mtcg-gold-1);
}
/* Mobile */
@media (max-width: 768px) {
#search-modal .ct-panel-content {
width: calc(100% - 32px);
padding-bottom: 60px;
}
#search-modal .ct-search-form input[type="search"] {
height: 50px;
font-size: 15px;
}
#search-modal .ct-search-form .wp-element-button,
#search-modal .ct-search-form button[type="submit"] {
width: 50px !important;
height: 50px !important;
min-height: 50px !important;
}
#search-modal .ct-panel-actions {
padding: 16px 18px;
}
}
/* =============================================================
PAGE - SERVICIO TÉCNICO (page-contact.php)
Hero con banner-servicio-tecnico.png + tarjetas de servicios
+ franja de garantías. Sigue la skin dorada del resto del sitio.
============================================================= */
.mtcg-service {
display: block;
background: var(--mtcg-bg-1);
color: var(--mtcg-text);
padding-bottom: 0;
}
/* Quitamos el page header / título por defecto del theme: el hero
propio de la plantilla ya muestra "SERVICIO TÉCNICO". */
body.page-template-default .ct-hero-section,
body.page-id-13 .ct-hero-section,
body.page-id-13 .page-title,
body.page-id-13 .entry-header,
body.page-id-13 .ct-page-title,
body.page-id-13 .page-header { display: none !important; }
/* ---- Layout principal: 2 columnas (banner + lista) ---- */
.mtcg-service__hero {
padding: 56px 0 32px;
}
.mtcg-service__grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 32px;
align-items: stretch;
}
/* ---- Columna izquierda: banner + título + CTA ---- */
.mtcg-service__stage {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
}
.mtcg-service__banner {
position: relative;
border-radius: 18px;
overflow: hidden;
border: var(--mtcg-card-border);
box-shadow: 0 18px 48px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(212,175,55,0.08);
aspect-ratio: 16 / 9;
background:
radial-gradient(60% 80% at 0% 50%, rgba(0,0,0,0.55), transparent 60%),
linear-gradient(135deg, #07070a 0%, #11111a 100%);
}
.mtcg-service__banner-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.mtcg-service__hero-copy {
position: absolute;
top: 0;
left: 0;
right: 22%;
padding: 38px 36px;
z-index: 2;
pointer-events: none;
background: linear-gradient(135deg, rgba(7,7,10,0.55) 0%, rgba(7,7,10,0.0) 75%);
}
.mtcg-service__title {
margin: 0;
font-family: 'Cinzel', serif;
line-height: 0.95;
display: flex;
flex-direction: column;
gap: 4px;
}
.mtcg-service__title-top {
font-size: clamp(20px, 2.4vw, 30px);
letter-spacing: 0.32em;
font-weight: 600;
color: #f5f1e6;
-webkit-text-fill-color: #f5f1e6;
background: none;
text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.mtcg-service__title-main {
font-size: clamp(44px, 5.6vw, 78px);
letter-spacing: 0.04em;
font-weight: 700;
white-space: nowrap;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}
.mtcg-service__hero-sub {
margin: 14px 0 0;
font-size: clamp(11px, 0.95vw, 14px);
letter-spacing: 0.36em;
text-transform: uppercase;
color: #d9d3c4;
font-weight: 500;
text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
/* ---- CTA WhatsApp ---- */
.mtcg-service__cta {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 22px;
padding: 18px 22px;
background: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(7,7,10,0.92) 100%);
border: var(--mtcg-card-border);
border-radius: 16px;
box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.mtcg-service__cta-icon {
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.35);
color: var(--mtcg-gold-1);
}
.mtcg-service__cta-icon svg { width: 28px; height: 28px; }
.mtcg-service__cta-body strong {
display: block;
font-family: 'Cinzel', serif;
font-size: 17px;
letter-spacing: 0.06em;
color: #f5f1e6;
margin-bottom: 4px;
}
.mtcg-service__cta-body p {
margin: 0;
font-size: 13px;
color: var(--mtcg-muted);
line-height: 1.45;
}
.mtcg-service__cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
min-height: 56px;
background: var(--mtcg-gold-gradient);
color: #000 !important;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
border-radius: 12px;
box-shadow: 0 8px 22px rgba(212,175,55,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
line-height: 1.15;
text-align: left;
white-space: nowrap;
}
.mtcg-service__cta-btn:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 12px 28px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
color: #000 !important;
}
.mtcg-service__cta-btn-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0,0,0,0.18);
color: #000;
flex-shrink: 0;
}
.mtcg-service__cta-btn-icon svg { width: 18px; height: 18px; }
/* ---- Columna derecha: lista de servicios ---- */
.mtcg-service__list {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.mtcg-service__list-title {
font-family: 'Cinzel', serif;
font-size: clamp(20px, 1.8vw, 26px);
letter-spacing: 0.22em;
margin: 0 0 6px;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: transparent;
background: var(--mtcg-gold-gradient);
-webkit-background-clip: text;
background-clip: text;
text-align: left;
}
.mtcg-service__list-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.mtcg-service__card {
display: grid;
grid-template-columns: 64px 1fr;
gap: 18px;
align-items: center;
padding: 18px 22px;
background: linear-gradient(180deg, rgba(13,13,18,0.95) 0%, rgba(7,7,10,0.95) 100%);
border: var(--mtcg-card-border);
border-radius: 14px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mtcg-service__card:hover {
border: var(--mtcg-card-border-hover);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.15);
}
.mtcg-service__card-icon {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--mtcg-gold-1);
background: rgba(212,175,55,0.06);
border: 1px solid rgba(212,175,55,0.25);
}
.mtcg-service__card-icon svg { width: 34px; height: 34px; }
.mtcg-service__card-body { min-width: 0; }
.mtcg-service__card-title {
margin: 0 0 4px;
font-family: 'Cinzel', serif;
font-size: 15px;
letter-spacing: 0.14em;
color: var(--mtcg-gold-1);
-webkit-text-fill-color: var(--mtcg-gold-1);
background: none;
}
.mtcg-service__card-desc {
margin: 0;
font-size: 13.5px;
color: var(--mtcg-muted);
line-height: 1.5;
}
/* ---- Franja inferior: features (4 columnas) ---- */
.mtcg-service__features {
margin-top: 8px;
padding: 22px 0;
background: linear-gradient(180deg, rgba(13,13,18,0.85) 0%, rgba(7,7,10,0.92) 100%);
border-top: 1px solid rgba(212,175,55,0.18);
border-bottom: 1px solid rgba(212,175,55,0.18);
}
.mtcg-service__features-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.mtcg-service__feature {
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
align-items: center;
}
.mtcg-service__feature-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
color: var(--mtcg-gold-1);
}
.mtcg-service__feature-icon svg { width: 30px; height: 30px; }
.mtcg-service__feature-body strong {
display: block;
font-family: 'Cinzel', serif;
font-size: 13px;
letter-spacing: 0.16em;
color: var(--mtcg-gold-1);
margin-bottom: 2px;
line-height: 1.25;
}
.mtcg-service__feature-body p {
margin: 0;
font-size: 12.5px;
color: var(--mtcg-muted);
line-height: 1.45;
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.mtcg-service__grid {
grid-template-columns: 1fr;
}
.mtcg-service__banner { aspect-ratio: 16 / 9; }
.mtcg-service__hero-copy { right: 30%; padding: 28px 28px; }
.mtcg-service__features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.mtcg-service__hero { padding: 32px 0 18px; }
.mtcg-service__banner { aspect-ratio: 4 / 3; }
.mtcg-service__hero-copy {
right: 0;
padding: 22px 20px;
background: linear-gradient(180deg, rgba(7,7,10,0.65) 0%, rgba(7,7,10,0.0) 80%);
}
.mtcg-service__title-top { letter-spacing: 0.24em; }
.mtcg-service__title-main { white-space: normal; }
.mtcg-service__cta {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: 14px 16px;
padding: 16px 18px;
}
.mtcg-service__cta-icon { width: 44px; height: 44px; }
.mtcg-service__cta-icon svg { width: 22px; height: 22px; }
.mtcg-service__cta-btn {
grid-column: 1 / -1;
justify-content: center;
min-height: 50px;
padding: 12px 18px;
text-align: center;
}
.mtcg-service__cta-btn span:last-child br { display: none; }
.mtcg-service__card {
grid-template-columns: 52px 1fr;
gap: 14px;
padding: 14px 16px;
}
.mtcg-service__card-icon { width: 52px; height: 52px; }
.mtcg-service__card-icon svg { width: 28px; height: 28px; }
.mtcg-service__card-title { font-size: 14px; letter-spacing: 0.12em; }
.mtcg-service__card-desc { font-size: 13px; }
.mtcg-service__features { padding: 18px 0; }
.mtcg-service__features-grid { grid-template-columns: 1fr; gap: 14px; }
}