/* Obramia1 — sistema de diseño (construcción industrial) */
:root{
  --bg:#161616;
  --panel:#1E1E1E;
  --border:#333333;
  --yellow:#FFC42C;    /* único color de acento del sitio */
  --yellow2:#FFDE6B;
  --text:#EDEBE4;
  --dim:#9B9B9B;
  --dark:#141210;
  --wa:#25D366;        /* solo para el botón flotante de WhatsApp, no compite como acento */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{
  font-family:'Oswald',sans-serif;
  color:#fff;
  line-height:1.1;
  margin:0 0 .5em;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.wrap{width:100%;margin:0;padding:0 clamp(20px,4vw,72px)}

/* Hazard stripe motif */
.hazard{
  height:9px;
  background-image:repeating-linear-gradient(45deg,var(--yellow),var(--yellow) 16px,#141210 16px,#141210 32px);
}

/* Nav */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(20,18,16,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,72px);flex-wrap:wrap;gap:14px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-weight:700;font-size:1.5rem;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.logo span{color:var(--yellow)}
.logo-mark{height:30px;width:auto;display:block;flex-shrink:0}
.logo-word{white-space:nowrap}
.hero-mark{height:40px;width:auto;display:inline-block;margin-bottom:18px}
.links{display:flex;gap:22px;flex-wrap:wrap;font-size:.86rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}
.links a:hover,.links a.active{color:var(--yellow)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:#fff;font-size:1.4rem;padding:6px 12px;border-radius:4px;cursor:pointer}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:4px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.04em;
  transition:transform .2s,opacity .2s;white-space:nowrap;cursor:pointer;border:none;
}
.btn:hover{transform:translateY(-2px);opacity:.92}
.btn-gold{background:var(--yellow);color:var(--dark)}
.btn-ghost{border:2px solid var(--yellow);color:#fff;background:transparent}
.btn-wa{background:transparent;border:2px solid var(--border);color:var(--text)}
.btn-wa:hover{border-color:var(--wa);opacity:1}
.btn-sm{padding:9px 18px;font-size:.76rem}

/* Sections & layout helpers */
.section{padding:88px 0}
.section-sm{padding:72px 0}
.center{text-align:center}
.eyebrow{
  display:inline-block;background:var(--yellow);color:var(--dark);
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.74rem;padding:6px 14px;border-radius:2px;margin-bottom:16px;
}
.h1{font-size:clamp(2.1rem,5vw,3.5rem)}
.h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
.lead{font-size:1.1rem;color:var(--dim);max-width:640px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.trust-line{color:var(--dim);font-size:.82rem;margin-top:16px;letter-spacing:.02em}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.post-card{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:26px;display:flex;flex-direction:column;height:100%}
.post-card .eyebrow{margin-bottom:14px}
.post-card h3{font-size:1.1rem;margin-bottom:10px}
.post-card p{color:var(--dim);font-size:.92rem;flex-grow:1;margin:0 0 16px}
.post-card .post-link{color:var(--yellow);font-family:'Oswald',sans-serif;font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.post-card .post-link:hover{color:var(--yellow2)}
.card{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:6px;padding:30px}
.num{font-family:'Oswald',sans-serif;color:var(--yellow);font-size:1.4rem;margin-bottom:12px;font-weight:700}
.panel{background:var(--panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pill{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:18px 22px;font-size:.9rem;color:var(--dim)}
.pill-alert{border:1px solid var(--yellow);color:var(--text)}

.step{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step .num{margin:0;min-width:44px}

/* Hero photo bands */
.hero-photo{
  position:relative;min-height:88vh;display:flex;align-items:center;
  background-size:cover;background-position:center;background-attachment:fixed;
}
.hero-photo .wrap{position:relative;z-index:2}
.hero-sm{
  position:relative;min-height:56vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;background-attachment:fixed;
}
.hero-sm .wrap{position:relative;z-index:2}
.hero-tiny{min-height:42vh}
.hero-legal{padding:80px 0 20px}

.cine-band{
  position:relative;padding:110px 0;text-align:center;
  background-size:cover;background-position:center;background-attachment:fixed;
}
.cine-band .wrap{position:relative;z-index:2}
.cine-band blockquote{font-family:'Oswald',sans-serif;font-size:clamp(1.4rem,3vw,2.2rem);color:#fff;text-transform:uppercase;max-width:900px;margin:0 auto;line-height:1.3}

.stat-photo{position:relative;padding:90px 0;background-size:cover;background-position:center;background-attachment:fixed}
.stat-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.92))}
.stat-photo .wrap{position:relative;z-index:2}
.stats{display:flex;gap:56px;flex-wrap:wrap;justify-content:center}
.stat b{display:block;font-family:'Oswald',sans-serif;font-size:2.6rem;color:var(--yellow)}
.stat span{color:var(--dim);font-size:.86rem;text-transform:uppercase;letter-spacing:.03em}

.cta-band{
  background:linear-gradient(135deg,#1A1610,#141210);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:100px 0;text-align:center;background-size:cover;background-position:center;background-attachment:fixed;
}

/* Photo cards */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pcard{position:relative;border-radius:6px;overflow:hidden;height:420px;display:flex;align-items:flex-end;border:1px solid var(--border)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:0}
.pcard:hover img{transform:scale(1.07)}
.pcard-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 20%,rgba(10,10,10,.65) 65%,rgba(10,10,10,.97) 100%);z-index:1}
.pcard-content{position:relative;z-index:2;padding:30px}
.pcard-num{color:var(--yellow);font-family:'Oswald',sans-serif;font-weight:700;font-size:1.25rem;margin-bottom:8px}
.pcard h3{font-size:1.2rem;margin-bottom:8px;color:#fff}
.pcard p{color:#D6D2C8;font-size:.92rem;margin:0}
.hl{color:var(--yellow)}
.pcard-wide{height:300px;grid-column:1/-1}
.pcard-wide .pcard-content{max-width:640px}
.pcard-side{position:relative;border-radius:6px;overflow:hidden;height:480px;border:1px solid var(--border)}
.pcard-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pcard-side-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.35),rgba(10,10,10,.1));z-index:1}

/* Machine-motion clips: no card, no frame — the footage dissolves straight into the page.
   CSS mask-image on a JS-driven playing <video> is silently dropped by Chromium's
   accelerated video compositing path once .play()/.pause() are called from script (as our
   IntersectionObserver in main.js does) — confirmed by testing, not a guess. So instead of
   masking the video, a solid-color radial-gradient sits above it and fades from transparent
   (center) to the section's own background color (edges), which reads as the same "dissolves
   into the page" effect and works in every browser regardless of video layer promotion. */
.machine-video-wrap{position:relative;height:480px}
.machine-video{position:absolute;inset:0}
.machine-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.machine-video-fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,var(--bg) 88%)}
.machine-video-fade.on-panel{background:radial-gradient(ellipse at center,transparent 40%,var(--panel) 88%)}
.machine-video-tag{position:absolute;left:4px;bottom:14px;z-index:2}
@media(max-width:860px){.machine-video-wrap{height:360px}}

/* Contact form */
.form-card{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:6px;padding:30px}
.form-card input,.form-card textarea{
  width:100%;background:#101010;border:1px solid var(--border);color:var(--text);
  padding:12px 14px;border-radius:4px;margin-bottom:14px;font-family:'Inter',sans-serif;font-size:.95rem;
}
.form-card label{display:block;margin-bottom:6px;font-size:.86rem;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}
.form-card button{
  background:var(--yellow);color:var(--dark);border:none;
  padding:13px 26px;border-radius:4px;font-weight:600;cursor:pointer;font-family:'Oswald',sans-serif;
  text-transform:uppercase;letter-spacing:.04em;width:100%;
}
.form-note{font-size:.8rem;color:var(--dim);margin-top:10px}
.form-privacy{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--dim);margin-bottom:16px}
.form-privacy input{width:auto;margin:3px 0 0}
.form-success{display:none;color:var(--yellow2);font-weight:600;padding:14px 0}

/* Legal pages */
.legal p{color:var(--dim);font-size:.96rem;margin:0 0 22px}
.legal h3{font-size:1.05rem;margin-top:26px;font-family:'Oswald',sans-serif;color:#fff;text-transform:uppercase}

/* Footer */
.footer{padding:56px 0 26px;border-top:1px solid var(--border)}
.footer .grid-3{margin-bottom:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.footer h4{font-family:'Oswald',sans-serif;font-size:.8rem;margin:0 0 14px;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)}
.footer a,.footer p{color:var(--dim);display:block;margin-bottom:8px;font-size:.9rem}
.footer a:hover{color:var(--yellow)}
.foot-bottom{border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--dim);font-size:.8rem}

.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{
  background:var(--panel);border:1px solid var(--border);border-radius:999px;
  padding:11px 22px;font-family:'Oswald',sans-serif;font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text);
  transition:border-color .2s,color .2s;
}
.chip:hover{border-color:var(--yellow);color:var(--yellow)}
.chip-plus{background:transparent;border:1px dashed var(--dim);color:var(--dim)}

.founder{display:flex;align-items:flex-start;gap:32px;max-width:760px;margin:0 auto}
.founder-photo{width:auto;max-width:260px;max-height:640px;object-fit:contain;flex-shrink:0}
.founder-role{display:inline-block;color:var(--yellow);font-family:'Oswald',sans-serif;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.founder-text{padding-top:2px}
.founder-text h2{margin-bottom:12px;font-size:1.5rem}
.founder-text p{color:var(--dim);font-size:.98rem;max-width:520px}
@media(max-width:480px){.founder{flex-direction:column;align-items:center;text-align:center}.founder-text p{margin-left:auto;margin-right:auto}.founder-photo{max-width:200px;max-height:480px}}

.chat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1300px;margin:0 auto;align-items:start}
.chat-label{text-align:center;color:var(--yellow);font-family:'Oswald',sans-serif;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.chat-demo{max-width:420px;width:100%;margin:0 auto;background:#0b141a;border-radius:14px;padding:20px;border:1px solid var(--border);overflow:hidden}
.chat-msg{max-width:82%;width:fit-content;padding:10px 14px;border-radius:10px;margin-bottom:10px;font-size:.88rem;line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}
.chat-msg.in{background:#202c33;color:#e9edef;border-top-left-radius:2px;margin-right:auto}
.chat-msg.out{background:#005c4b;color:#e9edef;border-top-right-radius:2px;margin-left:auto}
.chat-time{display:block;font-size:.68rem;color:#8696a0;margin-top:4px;text-align:right}

.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:18px 22px;margin-bottom:12px}
.faq details[open]{border-color:var(--yellow)}
.faq summary{cursor:pointer;font-family:'Oswald',sans-serif;font-weight:600;font-size:1rem;color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--yellow);font-size:1.4rem;font-weight:700;flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:'\2013'}
.faq details p{color:var(--dim);margin:14px 0 0;font-size:.94rem}

.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;background:var(--wa);color:#fff;
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);font-size:1.5rem;
}

@media(max-width:860px){
  .grid-2,.grid-3,.grid-4,.footer .grid-3,.chat-row{grid-template-columns:1fr}
  .chat-row{gap:32px}
  .pgrid{grid-template-columns:1fr}
  .hero-photo,.hero-sm,.cta-band,.cine-band,.stat-photo{background-attachment:scroll}
  .hero-photo{min-height:70vh}
  .hero-sm{min-height:44vh}
  .stats{gap:32px}
  .wrap,.nav .wrap{padding-left:20px;padding-right:20px}
  .chat-demo{padding:14px}
  .chat-msg{max-width:88%;font-size:.85rem}
  .nav-toggle{display:block}
  .links{
    display:none;width:100%;flex-direction:column;gap:2px;order:3;
    background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:10px;
  }
  .links.open{display:flex}
  .links a{padding:10px 6px}
  .nav .wrap{position:relative}
}