/*
Theme Name: Milla de Oro
Theme URI: https://tienda.relojeriamilladeoro.com
Description: Tema hijo de Storefront para Relojería Milla de Oro. Réplica del lenguaje visual del portal (glass, Inter, radio 22px) con animaciones de scroll.
Author: Relojería Milla de Oro
Template: storefront
Version: 0.2.0
Text Domain: milla-de-oro
*/

:root{
	--bg:#f6f8ff;
	--text:#0b1220;
	--muted:#5b667a;
	--card:rgba(255,255,255,.86);
	--border:rgba(15,23,42,.12);
	--shadow:0 20px 50px rgba(2,6,23,.10);
	--radius:22px;
	--c1:#0f0f0f;
	--c2:#000000;
	--c1-rgb:15,15,15;
	--navbar-bg:rgba(255,255,255,.72);
	--navbar-border:rgba(15,23,42,.08);
	--nav-link:#334155;
	--gear:rgba(15,23,42,.08);
	--gear-strong:rgba(15,23,42,.16);
}
@media (prefers-color-scheme: dark){
	:root{
		--bg:#050a17;
		--text:#e5e7eb;
		--muted:#a3adc2;
		--card:rgba(17,24,39,.72);
		--border:rgba(148,163,184,.18);
		--shadow:0 20px 50px rgba(0,0,0,.35);
		--navbar-bg:rgba(2,6,23,.62);
		--navbar-border:rgba(148,163,184,.14);
		--nav-link:rgba(226,232,240,.92);
		--gear:rgba(226,232,240,.07);
		--gear-strong:rgba(226,232,240,.14);
	}
}

body{
	background:var(--bg);
	color:var(--text);
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6,.woocommerce-loop-product__title{
	font-family:Inter,system-ui,sans-serif;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--text);
}
p,li,.entry-content{ color:var(--text); }
a{ color:var(--text); }
a:hover{ color:var(--muted); }

/* ===== Navbar glass (header Storefront) ===== */
.site-header{
	background:var(--navbar-bg) !important;
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid var(--navbar-border);
	position:sticky;
	top:0;
	z-index:999;
	transition:box-shadow .25s ease;
}
.site-header.mdo-scrolled{ box-shadow:0 10px 24px rgba(2,6,23,.06); }
.site-branding img.custom-logo{ max-height:52px; width:auto; }
.main-navigation ul li a,
.site-header-cart .cart-contents,
.site-search{ color:var(--nav-link); font-weight:600; }
.storefront-primary-navigation{ background:transparent; }
.main-navigation ul.menu ul.sub-menu{
	background:var(--card);
	backdrop-filter:blur(10px);
	border:1px solid var(--border);
	border-radius:14px;
	box-shadow:var(--shadow);
}

/* ===== Botones pildora con gradiente de marca ===== */
.button,.btn,button.alt,
button[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.added_to_cart,
.checkout-button,
.single_add_to_cart_button{
	border:0 !important;
	padding:12px 22px !important;
	border-radius:999px !important;
	font-weight:700 !important;
	letter-spacing:.01em;
	background:linear-gradient(135deg,var(--c1),var(--c2)) !important;
	color:#ffffff !important;
	box-shadow:0 14px 34px rgba(var(--c1-rgb),.18);
	transition:transform .18s ease, box-shadow .18s ease;
}
.button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover{
	transform:translateY(-2px);
	box-shadow:0 18px 40px rgba(var(--c1-rgb),.26);
	color:#fff !important;
}
@media (prefers-color-scheme: dark){
	.button,.woocommerce a.button,.single_add_to_cart_button,
	button[type="submit"],.checkout-button{
		background:#e5e7eb !important;
		color:#0b1220 !important;
	}
	.button:hover,.woocommerce a.button:hover,.single_add_to_cart_button:hover{ color:#0b1220 !important; }
}

/* ===== Tarjetas de producto glass ===== */
ul.products li.product{
	background:var(--card);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:18px 18px 22px !important;
	transition:transform .22s ease, box-shadow .22s ease;
	overflow:hidden;
}
ul.products li.product:hover{
	transform:translateY(-6px);
	box-shadow:0 26px 60px rgba(2,6,23,.16);
}
ul.products li.product img{ border-radius:14px; }
.woocommerce-loop-product__title{ font-size:1rem !important; }
ul.products li.product .price,
.woocommerce div.product p.price{
	color:var(--text);
	font-weight:800;
	font-size:1.05rem;
}
.onsale{
	background:linear-gradient(135deg,var(--c1),var(--c2)) !important;
	border-radius:999px !important;
	font-weight:700;
}

/* ===== Pagina de producto y checkout ===== */
.woocommerce div.product div.images img{ border-radius:var(--radius); box-shadow:var(--shadow); }
.woocommerce-tabs{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:10px 22px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
	border-radius:12px;
	border:1px solid var(--border);
	background:var(--card);
	color:var(--text);
	padding:10px 14px;
}
#payment{ background:var(--card) !important; border-radius:var(--radius); border:1px solid var(--border); }

/* ===== Footer ===== */
.site-footer{
	background:#050a17 !important;
	color:#a3adc2;
	border-top:1px solid rgba(148,163,184,.14);
}
.site-footer a{ color:#e5e7eb; }
.site-footer .widget-title{ color:#e5e7eb; }

/* ===== Hero front-page ===== */
.mdo-hero{
	position:relative;
	overflow:hidden;
	padding:clamp(70px,12vw,140px) 20px clamp(60px,9vw,110px);
	text-align:center;
}
.mdo-hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.mdo-kicker{
	font-size:13px;
	font-weight:700;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:14px;
}
.mdo-hero h1{
	font-size:clamp(2.2rem,5.4vw,4rem);
	font-weight:900;
	line-height:1.06;
	margin:0 0 18px;
}
.mdo-sub{ font-size:clamp(1rem,2vw,1.2rem); color:var(--muted); margin:0 auto 28px; max-width:560px; }
.mdo-cta{
	display:inline-block;
	padding:15px 34px;
	border-radius:999px;
	font-weight:700;
	background:linear-gradient(135deg,var(--c1),var(--c2));
	color:#fff !important;
	box-shadow:0 14px 34px rgba(var(--c1-rgb),.18);
	transition:transform .18s ease, box-shadow .18s ease;
	text-decoration:none;
}
.mdo-cta:hover{ transform:translateY(-2px); box-shadow:0 20px 44px rgba(var(--c1-rgb),.28); }
@media (prefers-color-scheme: dark){
	.mdo-cta{ background:#e5e7eb; color:#0b1220 !important; }
}

/* ===== Piñones y reloj decorativos ===== */
.mdo-hero-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.mdo-gear{ position:absolute; will-change:transform; }
.mdo-gear svg{ display:block; width:100%; height:100%; }
.mdo-gear--xl{ width:min(46vw,520px); height:min(46vw,520px); top:-12%; right:-10%; }
.mdo-gear--md{ width:min(24vw,250px); height:min(24vw,250px); bottom:-8%; left:-6%; }
.mdo-gear--sm{ width:min(12vw,120px); height:min(12vw,120px); top:18%; left:12%; }
.mdo-watch{ position:absolute; width:min(20vw,200px); height:min(20vw,200px); bottom:6%; right:14%; opacity:.9; }
.mdo-gear-spin,.mdo-gear-spin--rev,.mdo-seconds,.mdo-minutes{
	transform-box:view-box;
	transform-origin:50% 50%;
}
.mdo-gear-spin{ animation:mdo-spin 60s linear infinite; }
.mdo-gear-spin--rev{ animation-direction:reverse; animation-duration:45s; }
@keyframes mdo-spin{ to{ transform:rotate(360deg); } }
.mdo-seconds{ animation:mdo-spin 60s linear infinite; }
.mdo-minutes{ animation:mdo-spin 3600s linear infinite; }
.mdo-section-gear{
	position:absolute;
	width:160px; height:160px;
	opacity:.5;
	right:-40px; top:-50px;
	pointer-events:none;
}

/* ===== Secciones front-page ===== */
.mdo-section{ position:relative; max-width:1140px; margin:0 auto; padding:46px 20px; }
.mdo-section > h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:26px; }
.mdo-trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.mdo-trust-card{
	background:var(--card);
	backdrop-filter:blur(10px);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:24px;
	text-align:left;
}
.mdo-trust-card .mdo-ico{
	width:48px; height:48px;
	border-radius:14px;
	background:rgba(var(--c1-rgb),.08);
	display:flex; align-items:center; justify-content:center;
	margin-bottom:14px;
	font-size:22px;
}
.mdo-trust-card h3{ font-size:1.05rem; margin:0 0 6px; }
.mdo-trust-card p{ color:var(--muted); font-size:.92rem; margin:0; }
.mdo-banner{
	background:var(--card);
	backdrop-filter:blur(10px);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:clamp(26px,4vw,46px);
	text-align:center;
	overflow:hidden;
}

/* ===== Animaciones de scroll (reveals) ===== */
.mdo-reveal{
	opacity:0;
	transform:translateY(28px);
	transition:opacity .7s cubic-bezier(.2,.65,.25,1), transform .7s cubic-bezier(.2,.65,.25,1);
	transition-delay:var(--mdo-delay,0s);
}
.mdo-reveal.is-visible{ opacity:1; transform:none; }
.mdo-reveal--left{ transform:translateX(-36px); }
.mdo-reveal--right{ transform:translateX(36px); }
.mdo-reveal--left.is-visible,.mdo-reveal--right.is-visible{ transform:none; }

@media (prefers-reduced-motion: reduce){
	.mdo-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
	.mdo-gear-spin,.mdo-gear-spin--rev,.mdo-seconds,.mdo-minutes{ animation:none !important; }
	.mdo-gear,.mdo-watch{ transform:none !important; }
}