/*
Theme Name: Naxo Tech
Description: Tema propio de naxo.tech: portada animada en React + Framer Motion, catálogo de cerraduras, vídeo de fondo, flujo de cotización, formularios propios y edición directa sobre la página.
Version: 3.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: naxotech
*/

/* Shell: header, footer and plain pages. Logo blue + white; the animated pages live in assets/app. */
:root{
	--blue:#7898F1; --blue-deep:#4A68D6; --blue-soft:#EEF2FE;
	--navy:#0A1024; --navy2:#111A38;
	--ink:#0E1530; --muted:#5A6485; --line:#E2E7F6; --white:#FFFFFF;
	--mint:#42E7AF; --mint-ink:#03261A;
	--r:10px; --rb:8px;
	--f-display:"Unbounded","Arial Black",system-ui,sans-serif;
	--f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
	--f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 14px;border-radius:6px}

/* logo */
.nx-logo{display:block;height:34px;width:auto;overflow:visible}
.site-foot .nx-logo{height:42px}
.nx-logo .d{stroke-dasharray:420;stroke-dashoffset:0;animation:nxDraw 1.4s cubic-bezier(.2,.7,.2,1) both}
.nx-logo .d:nth-child(2){animation-delay:.12s}.nx-logo .d:nth-child(3){animation-delay:.24s}.nx-logo .d:nth-child(4){animation-delay:.36s}
.nx-logo .latch{animation:nxLatch 1.2s 1s cubic-bezier(.5,0,.2,1) both;transform-box:fill-box}
.logo:hover .nx-logo .latch{animation:nxLatchHover .7s cubic-bezier(.5,0,.2,1)}
@keyframes nxDraw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
@keyframes nxLatch{0%{transform:translateX(-26px);fill:#7898F1}60%{transform:translateX(4px)}100%{transform:translateX(0);fill:#42E7AF}}
@keyframes nxLatchHover{0%,100%{transform:translateX(0)}45%{transform:translateX(-20px)}}

/* header: transparent over the dark video, white once you scroll or on light pages */
.site-head{position:fixed;left:0;right:0;top:0;z-index:50;transition:background .35s,border-color .35s,box-shadow .35s;border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px);color:#fff}
.site-head.is-scrolled,.site-head.menu-open,.head-light .site-head{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line);color:var(--ink);box-shadow:0 6px 24px -18px rgba(14,21,48,.4)}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
.nav{display:flex;align-items:center;gap:20px;padding-block:16px;transition:padding .35s}
.is-scrolled .nav{padding-block:11px}
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14.5px;font-weight:600}
.menu a{text-decoration:none;color:inherit;opacity:.85;position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.menu a:hover{opacity:1}.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--rb);border:0;font:600 15px/1 var(--f-body);cursor:pointer;text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-brand{background:var(--blue);color:#fff}.btn-brand:hover{background:var(--blue-deep)}
.btn-mint{background:var(--mint);color:var(--mint-ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.burger{display:none;width:44px;height:44px;border-radius:var(--rb);border:0;background:rgba(120,152,241,.16);cursor:pointer;position:relative;color:inherit}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s,top .3s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.menu-open .burger span:first-child{top:21px;transform:rotate(45deg)}.menu-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
.drawer{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.2,.7,.2,1)}
.drawer.on{max-height:560px}
.drawer-menu{list-style:none;margin:0;padding:6px 0 14px;display:grid}
.drawer-menu a{display:block;padding:14px 0;font:600 21px/1.1 var(--f-display);text-decoration:none;border-bottom:1px solid var(--line)}
.drawer-cta{width:100%;margin:6px 0 22px}
@media (max-width:900px){.nav-main{display:none}.burger{display:block}.head-cta{display:none}.nav{gap:10px}}
@media (min-width:901px){.drawer{display:none!important}}

/* no-JS fallback inside #naxo-app (React replaces it) */
.fb{padding-block:130px 40px}
.fb h1{font:800 clamp(40px,7vw,84px)/.95 var(--f-display);letter-spacing:-.03em;margin:0 0 18px}
.fb h1 em{font-style:normal;color:var(--blue)}
.fb p{color:var(--muted);max-width:56ch}
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:30px}
.fb-card{display:block;padding:12px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none}
.fb-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:6px}
.fb-card b{display:block;margin-top:10px;font-family:var(--f-display)}

/* plain pages and blog */
.page-wrap{padding-block:130px 40px}
.ptitle{font:800 clamp(36px,6vw,68px)/1 var(--f-display);letter-spacing:-.03em;margin:0 0 24px;color:var(--ink)}
.eyebrow{font:600 12px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.prose{max-width:760px;font-size:17px;color:#2B3355}
.prose h2,.prose h3{font-family:var(--f-display);color:var(--ink);letter-spacing:-.01em}
.prose img{border-radius:var(--r)}
.prose a{color:var(--blue-deep);text-underline-offset:3px}
.posts{display:grid;gap:12px;max-width:820px}
.post{display:grid;gap:6px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .2s}
.post:hover{border-color:var(--blue);transform:translateY(-2px)}
.post b{font:700 21px/1.1 var(--f-display)}
.post span:last-child{color:var(--muted);font-size:15px}
.sub{color:var(--muted)}

/* footer */
.site-foot{background:var(--navy);color:#C9D1EE;margin-top:0}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding-block:52px 30px}
.foot-brand p{color:#98A3C7;margin:14px 0 0;max-width:34ch}
.foot-links,.foot-contact{display:grid;gap:10px;align-content:start;font-size:15px}
.foot-links a,.foot-contact a{text-decoration:none;color:#C9D1EE}
.foot-links a:hover,.foot-contact a:hover{color:var(--blue)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:18px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(120,152,241,.18);font:500 12px/1.5 var(--f-mono);color:#98A3C7}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}
.nx-has-bar .foot-base{padding-bottom:110px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}