/*
Theme Name: Orbe Media
Theme URI: https://orbemedia.com
Author: Orbe Media
Description: Tema a medida de Orbe Media. Estrategia y marketing — sin page builders, código limpio. Hero de sistema solar vivo como firma del sitio.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: orbe-media
*/

:root{
  --ink:#1B2540; --gold:#C9A53F; --gold-soft:#D8BC78; --steel:#828B97;
  --paper:#F6F2E6; --paper-2:#FBF9F1;
  --line:rgba(27,37,64,.13); --dim:#8C887C;
  --ink-60:rgba(27,37,64,.62); --ink-40:rgba(27,37,64,.40);
  --sp:clamp(80px,12vw,168px); --gut:clamp(22px,5vw,72px);
  --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:"Jost",system-ui,sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden}
body.lock{overflow:hidden}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{font-family:"Geist Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:13px}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--gold); display:inline-block; flex:none}
h1,h2,h3{font-weight:400; line-height:1.05; letter-spacing:-.012em}
::selection{background:var(--ink); color:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ---------- NAV ---------- */
.site-header{position:fixed; inset:0 0 auto 0; z-index:60; transition:background .4s var(--ease), border-color .4s var(--ease)}
.site-header.solid{background:rgba(246,242,230,.82); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand .mark{width:30px; height:30px; flex:none}
.brand .wm{display:flex; align-items:flex-end; font-weight:500; font-size:23px; letter-spacing:.01em; line-height:1}
.brand .wm .o{width:.86em; height:.86em; margin-right:.025em}
.brand .wm svg{display:block; overflow:visible}
.navlinks{display:flex; align-items:center; gap:36px}
.navlinks a{color:var(--ink-60); text-decoration:none; font-size:15px; font-weight:400; transition:color .25s}
.navlinks a:hover{color:var(--ink)}
.nav-right{display:flex; align-items:center; gap:22px}
.lang{display:flex; align-items:center; gap:8px; font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.12em; font-weight:500}
.lang button{font:inherit; letter-spacing:inherit; background:none; border:none; cursor:pointer; padding:2px 1px; color:var(--ink)}
.lang .off{color:var(--ink-40); cursor:not-allowed}
.lang .sep{color:var(--ink-40)}
.btn{--bg:var(--ink); --fg:var(--paper); position:relative; display:inline-flex; align-items:center; gap:10px; background:var(--bg); color:var(--fg); text-decoration:none; font-size:14.5px; font-weight:400; letter-spacing:.015em; padding:13px 24px; border-radius:100px; overflow:hidden; isolation:isolate; cursor:pointer; border:none; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.btn .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; transition:transform .55s var(--ease)}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:#2a3759; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(27,37,64,.5)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover .dot{transform:translateX(3px) scale(1.25)}
.btn.ghost{--bg:transparent; --fg:var(--ink); border:1px solid var(--line)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{--fg:var(--paper); color:var(--paper)}
.nav-cta{padding:11px 22px}
.burger{display:none; width:30px; height:30px; position:relative; background:none; border:none; cursor:pointer}
.burger span{position:absolute; left:4px; right:4px; height:1.6px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s}
.burger span:nth-child(1){top:10px}.burger span:nth-child(2){top:18px}
body.menu .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.menu .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed; inset:0; z-index:55; background:var(--paper); display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gut); transform:translateY(-100%); transition:transform .55s var(--ease); visibility:hidden}
body.menu .mobile-menu{transform:none; visibility:visible}
.mobile-menu a{font-size:clamp(30px,8vw,46px); font-weight:300; text-decoration:none; color:var(--ink); letter-spacing:-.02em; padding:6px 0}
.mobile-menu .btn{margin-top:24px; align-self:flex-start; font-size:18px}

/* ---------- HERO ---------- */
.hero{min-height:100svh; display:flex; align-items:center; padding-top:88px; padding-bottom:40px}
.hero-inner{width:100%; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero h1{font-size:clamp(44px,8vw,104px); font-weight:300; letter-spacing:-.026em; margin-top:22px; max-width:15ch}
.hero h1 .accent{font-weight:500}
.hero-system{position:relative; width:100%; max-width:900px; height:clamp(230px,34vh,400px); margin:6px auto 4px}
#orbit{position:absolute; inset:0; width:100%; height:100%; touch-action:none}
.hero .sub{margin:6px auto 0; max-width:58ch; font-size:clamp(16px,1.55vw,20px); color:var(--ink-60); font-weight:300; line-height:1.62}
.hero .cta-row{margin-top:34px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding-block:var(--sp); position:relative}
.lead{font-size:clamp(28px,4.4vw,56px); font-weight:300; letter-spacing:-.02em; line-height:1.1; max-width:20ch}
.lead .g{color:var(--gold)}

/* capacidades */
.cap-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end}
.cap-head p{color:var(--ink-60); font-size:clamp(16px,1.5vw,19px); max-width:46ch; justify-self:end}
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:60px}
.cap{background:var(--paper-2); padding:clamp(28px,3vw,42px); min-height:228px; display:flex; flex-direction:column; transition:background .5s var(--ease)}
.cap:hover{background:#fff}
.cap .n{font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.18em; color:var(--gold); font-weight:500}
.cap h3{font-size:22px; font-weight:500; margin-top:auto; letter-spacing:-.01em}
.cap p{color:var(--ink-60); font-size:15px; margin-top:12px; line-height:1.55}

/* cómo trabajamos */
.steps{display:grid; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:56px}
.step{background:var(--paper); display:grid; grid-template-columns:150px 1fr; gap:clamp(24px,5vw,80px); padding-block:clamp(34px,4vw,56px); align-items:start; transition:background .5s var(--ease)}
.step:hover{background:var(--paper-2)}
.step .idx{font-family:"Geist Mono",monospace; font-size:13px; letter-spacing:.1em; color:var(--gold); font-weight:500; padding-top:10px}
.step h3{font-size:clamp(27px,3.4vw,42px); font-weight:300; letter-spacing:-.018em}
.step p{color:var(--ink-60); font-size:clamp(16px,1.45vw,18.5px); max-width:54ch; margin-top:16px}

/* trabajo / carrusel */
.work-head{display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap}
.work-head p{color:var(--ink-60); max-width:40ch; font-size:clamp(15px,1.4vw,17px)}
.rail-wrap{margin-top:50px; position:relative}
.rail{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 26px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start; flex:0 0 clamp(290px,33vw,400px); background:var(--paper-2); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-5px); box-shadow:0 24px 50px -28px rgba(27,37,64,.4)}
.card .cover{aspect-ratio:4/3; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(120% 120% at 30% 20%, #20305a 0%, var(--ink) 60%)}
.card:nth-child(2) .cover{background:radial-gradient(120% 120% at 70% 10%, #2c3a5e 0%, #161f37 65%)}
.card:nth-child(3) .cover{background:radial-gradient(120% 120% at 20% 80%, #233152 0%, var(--ink) 60%)}
.card:nth-child(4) .cover{background:radial-gradient(120% 120% at 80% 70%, #283762 0%, #141d34 65%)}
.card .cover svg{width:46%; opacity:.9}
.card .cover .tag{position:absolute; top:14px; left:14px; font-family:"Geist Mono",monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); border:1px solid rgba(216,188,120,.4); border-radius:100px; padding:6px 12px}
.card .body{padding:24px 24px 28px}
.card .cat{font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.card h3{font-size:19px; font-weight:500; margin-top:12px; letter-spacing:-.01em; line-height:1.25}
.rail-hint{font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); margin-top:6px}

/* manifiesto */
.manifesto{background:var(--ink); color:var(--paper); border-radius:clamp(20px,3vw,32px); padding:clamp(48px,7vw,104px)}
.manifesto .eyebrow{color:var(--gold-soft)}
.manifesto .eyebrow::before{background:var(--gold-soft)}
.manifesto blockquote{font-size:clamp(27px,4vw,50px); font-weight:300; line-height:1.18; letter-spacing:-.02em; max-width:24ch; margin-top:32px; color:var(--paper)}
.manifesto blockquote .g{color:var(--gold-soft)}
.manifesto .sig{margin-top:36px; font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,242,230,.5)}

/* arquitectura */
.arch{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px); align-items:center}
.arch p{color:var(--ink-60); font-size:clamp(16px,1.5vw,19px); margin-top:22px; max-width:46ch}
.arch .sys{aspect-ratio:1/1; width:100%; max-width:420px; justify-self:center}
.arch .sys svg{width:100%; height:auto; display:block}

/* contacto / faq grid */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:start}
.contact h2{font-size:clamp(36px,5vw,68px); font-weight:300; letter-spacing:-.025em; max-width:14ch}
.contact h2 .accent{font-weight:500}
.contact .lead-sub{color:var(--ink-60); margin-top:22px; max-width:42ch; font-size:clamp(16px,1.5vw,18px)}
.contact .mailto{margin-top:30px; display:inline-flex; align-items:center; gap:10px; font-family:"Geist Mono",monospace; font-size:13px; letter-spacing:.04em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:6px; transition:border-color .3s}
.contact .mailto:hover{border-color:var(--gold)}
.form{display:flex; flex-direction:column; gap:26px}
.field{position:relative}
.field label{display:block; font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:10px}
.field input,.field textarea{width:100%; background:transparent; border:none; border-bottom:1px solid rgba(27,37,64,.25); color:var(--ink); font-family:"Jost",sans-serif; font-size:18px; font-weight:300; padding:8px 0; transition:border-color .3s}
.field textarea{resize:vertical; min-height:64px; line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-40)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.form .btn{align-self:flex-start; margin-top:6px; padding:15px 30px}
.form .note{font-size:12.5px; color:var(--ink-40); margin-top:-8px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:26px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:clamp(18px,1.8vw,22px); font-weight:400; letter-spacing:-.008em; transition:color .25s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--gold)}

/* footer */
.site-footer{border-top:1px solid var(--line); padding-block:56px 40px}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap}
.foot .col-brand{max-width:30ch}
.foot .col-brand p{color:var(--ink-60); font-size:14px; margin-top:16px}
.foot .cols{display:flex; gap:clamp(40px,7vw,96px); flex-wrap:wrap}
.foot h4{font-family:"Geist Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; font-weight:500}
.foot a{display:block; color:var(--ink-60); text-decoration:none; font-size:14.5px; margin-bottom:11px; transition:color .25s}
.foot a:hover{color:var(--ink)}
.foot-base{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--ink-40)}

/* reveal */
.rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

@media(max-width:900px){
  .navlinks{display:none} .nav-cta{display:none} .burger{display:block}
  .cap-head{grid-template-columns:1fr; gap:22px} .cap-head p{justify-self:start}
  .cap-grid{grid-template-columns:1fr 1fr}
  .arch{grid-template-columns:1fr; gap:40px} .arch .sys{order:-1; max-width:300px}
  .contact-grid{grid-template-columns:1fr; gap:36px}
}
@media(max-width:560px){
  .cap-grid{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:12px} .step .idx{padding-top:0}
  .foot{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}