/*
Theme Name: ProCorte Industrial
Theme URI: https://example.com/
Author: ProCorte
Description: Tienda virtual de hojas de sierra cinta para carnicería y frigoríficos. Diseño moderno 2026, SEO técnico integrado (meta tags, Open Graph, datos estructurados), catálogo con filtros, calculadora de medida, carrito y pedido por WhatsApp.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: procorte
*/

:root {
	--font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
	--ink: #0b1020;
	--brand: #dc2626;
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body.procorte-body {
	background:
		radial-gradient(1100px 560px at 8% -8%, rgba(220,38,38,.07), transparent 60%),
		radial-gradient(900px 520px at 100% 0%, rgba(245,158,11,.07), transparent 55%),
		#f6f7fb;
}

h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -.02em; }
::selection { background: #dc2626; color: #fff; }
:focus-visible { outline: 2px solid #ef4444; outline-offset: 3px; border-radius: .5rem; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: .75rem; left: .75rem; width: auto; height: auto; clip: auto; z-index: 100; background: #fff; color: #0b1020; padding: .75rem 1rem; border-radius: .75rem; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eef0f6; }
::-webkit-scrollbar-thumb { background: #b3bbcb; border-radius: 8px; border: 2px solid #eef0f6; }
::-webkit-scrollbar-thumb:hover { background: #8591a8; }

/* ---------- Fondos: aurora + rejilla ---------- */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #050816; }
.aurora::before, .aurora::after {
	content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
	filter: blur(90px); opacity: .5; animation: drift 20s ease-in-out infinite;
}
.aurora::before { background: radial-gradient(circle, #dc2626 0%, transparent 65%); top: -30vmax; left: -18vmax; }
.aurora::after { background: radial-gradient(circle, #f59e0b 0%, transparent 65%); bottom: -38vmax; right: -22vmax; opacity: .3; animation-delay: -10s; }
.aurora-soft::before, .aurora-soft::after { opacity: .22; }
.grid-fade {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
	mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
}
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vmax,3vmax,0) scale(1.08); } }

.text-gradient { background: linear-gradient(100deg, #fb7185, #f59e0b 55%, #fde68a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Superficies ---------- */
.glass {
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
	box-shadow: 0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.panel { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 40px -18px rgba(15,23,42,.25); }
.header-pill { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 10px 40px -12px rgba(15,23,42,.18); }

/* ---------- Botones ---------- */
.btn-primary { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; box-shadow: 0 10px 28px -8px rgba(220,38,38,.65); transition: transform .25s, box-shadow .25s, filter .25s; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 16px 34px -8px rgba(220,38,38,.75); }
.btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; transition: background .25s, transform .25s; }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-wa { background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; box-shadow: 0 10px 28px -8px rgba(34,197,94,.6); transition: transform .25s, box-shadow .25s; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(34,197,94,.7); }

/* ---------- Tarjetas de producto ---------- */
.card-modern { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.card-modern:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -22px rgba(15,23,42,.4); }
.card-top { background: linear-gradient(135deg, #0b1020 0%, #1e293b 60%, #4a0f0f 100%); }
#productGrid > article { animation: cardIn .55s cubic-bezier(.2,.8,.2,1) both; }
#productGrid > article:nth-child(2) { animation-delay: .05s; }
#productGrid > article:nth-child(3) { animation-delay: .1s; }
#productGrid > article:nth-child(n+4) { animation-delay: .15s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Banner mayorista ---------- */
.cta-glow::before { content: ""; position: absolute; width: 28rem; height: 28rem; right: -8rem; top: -12rem; background: radial-gradient(circle, rgba(239,68,68,.5), transparent 65%); filter: blur(40px); pointer-events: none; }

/* ---------- Revelado al hacer scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.float-slow { animation: floaty 6s ease-in-out infinite; }
.float-slow.d2 { animation-delay: -3s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- FAQ ---------- */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item[open] { box-shadow: 0 16px 40px -22px rgba(15,23,42,.35); border-color: #fca5a5; }
.faq-chevron { transition: transform .3s; }

/* Barra de administración de WordPress */
body.admin-bar header.sticky { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.sticky { top: 46px; } }

/* Contenido de páginas y entradas */
.entry-content > * + * { margin-top: 1rem; }
.entry-content h1, .entry-content h2, .entry-content h3 { font-weight: 800; line-height: 1.2; color: #0f172a; }
.entry-content h1 { font-size: 2rem; } .entry-content h2 { font-size: 1.5rem; } .entry-content h3 { font-size: 1.25rem; }
.entry-content ul { list-style: disc; padding-left: 1.5rem; }
.entry-content ol { list-style: decimal; padding-left: 1.5rem; }
.entry-content a { color: #dc2626; text-decoration: underline; }
.entry-content img { max-width: 100%; height: auto; border-radius: 1rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .reveal { opacity: 1; transform: none; }
}

.btn-primary:disabled { background: #cbd5e1; box-shadow: none; transform: none; filter: none; cursor: not-allowed; }