/* ============================================================
   Header, footer y piezas comunes de las páginas internas
   ============================================================ */
html{scroll-behavior:smooth}
.d{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 125;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.btn2{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 28px;border:1px solid #2C2C30;color:#EDEBE6;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:2px}
.btn2:hover{border-color:#FFD100;color:#EDEBE6}
section[id],footer[id]{scroll-margin-top:84px}
.hdr{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:4px 32px;background:rgba(11,11,12,.86);border-bottom:1px solid #2C2C30;backdrop-filter:blur(10px)}
.hdr-logo{justify-self:start;display:flex;align-items:center;gap:14px;text-decoration:none}
.hdr-nav{display:flex;align-items:center;gap:4px}
.hdr-nav a{position:relative;color:#8E8E93;text-decoration:none;padding:12px 14px;font-size:11px;transition:color .25s}
.hdr-nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:1px;background:#FFD100;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.hdr-nav a:hover,.hdr-nav a.on{color:#EDEBE6}
.hdr-nav a:hover::after,.hdr-nav a.on::after{transform:scaleX(1)}
.hdr-nav .sep{color:#2C2C30}
.hdr-end{justify-self:end}
.tag{display:flex;flex-direction:column;gap:5px;font-size:10px;letter-spacing:.16em;color:#EDEBE6;line-height:1}
.tag .tl{display:block;height:1px;background:linear-gradient(90deg,#FFD100,rgba(255,209,0,.15))}
.tag .mv{color:#8E8E93;letter-spacing:.62em}
@keyframes cpulse{50%{opacity:.3}}
.cta{position:relative;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:1px solid rgba(255,209,0,.4);color:#EDEBE6;text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,#FFD100,#FFD100) no-repeat 0 0/0% 100%;transition:background-size .4s ease,color .4s ease,border-color .4s ease}
.cta::before,.cta::after{content:"";position:absolute;width:6px;height:6px;border:0 solid #FFD100;transition:all .3s ease}
.cta::before{top:-4px;left:-4px;border-width:1px 0 0 1px}
.cta::after{bottom:-4px;right:-4px;border-width:0 1px 1px 0}
.cta .cdot{width:6px;height:6px;border-radius:50%;background:#FFD100;animation:cpulse 2s infinite}
.cta .arr{color:#FFD100;transition:transform .35s ease,color .35s ease}
a.cta:hover{background-size:100% 100%;color:#0B0B0C;border-color:#FFD100}
a.cta:hover::before{top:-7px;left:-7px}
a.cta:hover::after{bottom:-7px;right:-7px}
a.cta:hover .arr{transform:translateX(4px);color:#0B0B0C}
a.cta:hover .cdot{background:#0B0B0C;animation:none}
.cta:focus-visible{outline:2px solid #7A6400;outline-offset:4px}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes zap{to{--a:360deg}}
@keyframes arc{0%,100%{box-shadow:0 0 0 rgba(255,209,0,0)}10%{box-shadow:0 0 18px rgba(255,209,0,.55),0 0 2px #FFF3B0}14%{box-shadow:0 0 4px rgba(255,209,0,.2)}22%{box-shadow:0 0 28px rgba(255,209,0,.75),0 0 3px #FFF3B0}30%{box-shadow:0 0 8px rgba(255,209,0,.3)}60%{box-shadow:0 0 16px rgba(255,209,0,.5)}}
.cta .zap{position:absolute;inset:-1px;padding:1px;pointer-events:none;background:conic-gradient(from var(--a),rgba(255,209,0,0) 0deg,rgba(255,209,0,0) 240deg,#FFD100 320deg,#FFF3B0 345deg,rgba(255,209,0,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 3px rgba(255,209,0,.9));animation:zap 2.6s linear infinite}
.cta .spark{position:absolute;inset:0;pointer-events:none}
a.cta:hover .zap{animation-duration:.7s}
a.cta:hover .spark{animation:arc .9s steps(1) infinite}
.fx{border-top:1px solid #2C2C30;background:#151517}
.fx-wrap{padding:20px 104px 0 80px}
.fx-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:center;padding-bottom:18px}
.fx-brand{display:flex;flex-direction:column;gap:12px}
.fx-brand p{margin:0;color:#8E8E93;font-size:13px;line-height:1.5;max-width:32ch}
.fx-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #2C2C30;margin-bottom:10px}
.fx-tabs button{position:relative;background:none;border:0;color:#8E8E93;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 14px;min-height:44px;cursor:pointer;transition:color .25s}
.fx-tabs button:hover{color:#EDEBE6}
.fx-tabs button.on{color:#EDEBE6}
.fx-tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:1px;background:#FFD100;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.fx-tabs button.on::after{transform:scaleX(1)}
.fx-panel{animation:fxin .35s ease}
@keyframes fxin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fx-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.fx-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid #2C2C30;color:#EDEBE6;text-decoration:none;font:500 12px/1.2 "IBM Plex Mono",monospace;letter-spacing:.02em;transition:border-color .25s,background .25s}
a.chip:hover{border-color:#FFD100;background:#0B0B0C;color:#EDEBE6}
.chip svg{width:16px;height:16px;color:#FFD100;flex:none}
.fx-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.fx-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 18px}
.fx-nav a{color:#8E8E93;text-decoration:none;font-size:11px;padding:12px 0}
.fx-nav a:hover{color:#EDEBE6}
.fx-soc{display:flex;gap:8px}
.fx-soc a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #2C2C30;color:#EDEBE6;transition:all .25s}
.fx-soc a:hover{border-color:#FFD100;color:#FFD100}
.fx-soc svg{width:18px;height:18px}
.fx-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;padding:2px 0 4px;border-top:1px solid #2C2C30;font-size:10px;color:#8E8E93}
.fx-bar a{color:#8E8E93;text-decoration:none;padding:8px 0}.fx-bar a:hover{color:#EDEBE6}
@media (max-width: 900px){.fx-top{grid-template-columns:1fr auto;gap:24px}.fx-contact{grid-column:1/-1;grid-row:2}}
@media (max-width: 900px){.fx-wrap{padding:20px 32px 0}}
@media (max-width: 640px){.fx-wrap{padding:20px 20px 0}}
@media (max-width: 820px){.hdr{grid-template-columns:1fr auto;padding:8px 20px}.hdr-nav{grid-column:1/-1;grid-row:2;justify-content:center;flex-wrap:wrap}}
@media (max-width: 560px){.tag{display:none}}

html,body{overflow-x:clip}
@media (max-width: 700px){section[style*="padding"]{padding-left:20px !important;padding-right:20px !important}section[style*="padding: 96px 80px"],section[style*="padding:96px 80px"]{padding-top:48px !important}}

/* --- Celular: encabezado compacto --- */
.cta .cta-s{display:none}
@media (max-width: 640px){
.hdr{padding:6px 16px;gap:2px 12px}
.hdr-logo img{width:74px !important;height:52px !important}
.hdr-nav{justify-content:space-between;gap:0;flex-wrap:nowrap}
.hdr-nav .sep{display:none}
.hdr-nav a{padding:10px 6px;font-size:10px}
.hdr-nav a::after{left:6px;right:6px;bottom:6px}
.cta{height:38px;padding:0 14px;gap:8px;font-size:10px}
.cta .cta-l{display:none}.cta .cta-s{display:inline}
}
/* --- Menú más grande y visible (pedido del cliente) --- */
.hdr-nav a{font-size:13.5px;letter-spacing:.14em;color:#C9C7C2;padding:14px 16px}
.hdr-nav a::after{left:16px;right:16px;bottom:8px;height:2px}
.hdr-nav a:hover,.hdr-nav a.on{color:#FFFFFF}
.hdr-nav .sep{color:#4A4A50}
@media (max-width: 900px){.hdr-nav a{font-size:12px;padding:12px 10px}.hdr-nav a::after{left:10px;right:10px}}
@media (max-width: 640px){.hdr-nav a{font-size:11px;letter-spacing:.08em;padding:10px 4px}.hdr-nav a::after{left:4px;right:4px;bottom:6px}}
.cta{white-space:nowrap}@media (max-width: 1100px){.tag{display:none}}
/* --- Menú que se "enciende" como un letrero de neón --- */
.hdr-nav a{transition:color .2s ease,text-shadow .3s ease}
/* Al cargar la página, las opciones se prenden una por una */
.hdr-nav a{animation:navon .9s steps(1,end) both}
.hdr-nav a:nth-of-type(1){animation-delay:.15s}.hdr-nav a:nth-of-type(2){animation-delay:.3s}
.hdr-nav a:nth-of-type(3){animation-delay:.45s}.hdr-nav a:nth-of-type(4){animation-delay:.6s}
@keyframes navon{0%{opacity:.15}10%{opacity:1}18%{opacity:.25}26%{opacity:1}34%{opacity:.4}42%,100%{opacity:1}}
/* Al pasar el mouse: parpadeo de encendido y queda iluminado en amarillo */
.hdr-nav a:hover,.hdr-nav a:focus-visible{color:#FFE680;text-shadow:0 0 6px rgba(255,209,0,.9),0 0 16px rgba(255,209,0,.6),0 0 32px rgba(255,209,0,.35);animation:neon .55s linear 1 both}
@keyframes neon{0%{opacity:1}12%{opacity:.35}20%{opacity:1}30%{opacity:.5}38%,100%{opacity:1}}
/* La sección actual queda encendida */
.hdr-nav a.on{color:#FFF6CC;text-shadow:0 0 6px rgba(255,209,0,.75),0 0 18px rgba(255,209,0,.4)}
.hdr-nav a.on::after,.hdr-nav a:hover::after{box-shadow:0 0 8px rgba(255,209,0,.9),0 0 16px rgba(255,209,0,.5)}