/* Renais — sistema de diseño compartido del sitio (extraído del Home). Las páginas internas lo cargan via /assets/site.css */
:root{
    --bg:#0a0a09;
    --surface:rgba(222,220,212,.03);
    --surface-strong:rgba(222,220,212,.06);
    --border:rgba(222,220,212,.14);
    --text:#dedcd4;
    --muted:rgba(222,220,212,.58);
    --muted-2:rgba(222,220,212,.34);
    --green:#10bf6d;
    --green-glow:rgba(16,191,109,.5);
    --violet:#7c5cff;
    --violet-glow:rgba(124,92,255,.45);
    --red:#c5283d;
    --display:'Clash Display',system-ui,sans-serif;
    --body:'Satoshi',system-ui,-apple-system,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --ease:cubic-bezier(.16,1,.3,1);
    --pad:clamp(24px,6vw,96px);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    background:var(--bg);color:var(--text);font-family:var(--body);
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  }
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
  ::selection{background:var(--text);color:var(--bg)}
  img{display:block;max-width:100%}
  .display{font-family:var(--display)}
  .mono{font-family:var(--mono)}

  /* grain overlay */
  .grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .eyebrow{
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted-2);display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:20px;height:1px;background:var(--muted-2)}

  /* word-split reveal */
  .word-clip{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
  .word-inner{display:inline-block;will-change:transform}

  /* magnetic cursor */
  .cursor-dot{
    position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
    background:var(--text);pointer-events:none;z-index:999;mix-blend-mode:difference;
    transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .2s;
    opacity:0;
  }
  .cursor-dot.is-visible{opacity:1}
  .cursor-dot.is-active{width:46px;height:46px}
  @media (hover:none),(pointer:coarse){.cursor-dot{display:none}}

  /* NAV */
  nav{
    position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
    padding:20px var(--pad);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    background:rgba(8,9,11,.55);border-bottom:1px solid var(--border);
  }
  .brand img{height:18px;width:auto}
  .navlinks{display:flex;gap:2.2rem}
  .navlinks a{font-size:13px;color:var(--muted);transition:color .2s}
  .navlinks a:hover{color:var(--text)}
  @media (max-width:720px){.navlinks{display:none}}
  .nav-cta{
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    border:1px solid var(--border);padding:.6rem 1.1rem;border-radius:100px;
    transition:border-color .2s, background .2s;
  }
  .nav-cta:hover{border-color:var(--text);background:var(--surface)}

  /* HERO */
  .hero{
    position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;
  }
  .hero-inner{padding:0 var(--pad);max-width:1300px;margin:0 auto;width:100%;position:relative;z-index:1}
  .hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden}
  .hero-video{
    position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;
    width:auto;height:auto;transform:translate(-50%,-50%);
    object-fit:cover;opacity:.6;
  }
  .hero-video-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg,var(--bg) 0%,rgba(10,10,9,.35) 30%,rgba(10,10,9,.55) 68%,var(--bg) 100%),
      linear-gradient(90deg,var(--bg) 0%,transparent 35%,transparent 65%,var(--bg) 100%);
  }
  @media (prefers-reduced-motion:reduce){.hero-video{display:none}}
  .hero-grid{position:absolute;inset:-10% -4%;z-index:-2;pointer-events:none}
  .hero-grid::before,.hero-grid::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(222,220,212,1) 1px,transparent 1.4px);
    background-size:28px 28px;
  }
  .hero-grid::before{opacity:.14}
  .hero-grid::after{
    -webkit-mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,38%),black 0%,transparent 72%);
    mask-image:radial-gradient(circle 220px at var(--mx,50%) var(--my,38%),black 0%,transparent 72%);
    opacity:.85;
  }
  @media (prefers-reduced-motion:reduce){.hero-grid::after{display:none}}
  .hero .eyebrow{margin-bottom:26px}
  h1.hero-title{
    font-family:var(--display);font-weight:700;
    font-size:clamp(2.8rem,8vw,7rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance;
  }
  h1.hero-title .grad{ font-style:italic; color:var(--muted); }
  .hero p.sub{margin-top:30px;max-width:44ch;color:var(--muted);font-size:1.15rem}
  .hero-actions{display:flex;gap:1rem;align-items:center;margin-top:44px;flex-wrap:wrap}
  .btn{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:13px;letter-spacing:.03em;
    padding:1rem 1.9rem;border-radius:100px;transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .btn--solid{background:var(--text);color:var(--bg);font-weight:500}
  .btn--solid:hover{transform:translateY(-2px);background:#fff}
  .btn--ghost{border:1px solid var(--border);color:var(--text)}
  .btn--ghost:hover{border-color:var(--text);background:var(--surface)}
  .hero-meta{
    margin-top:80px;display:flex;gap:2.5rem;flex-wrap:wrap;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;
  }

  section{position:relative;z-index:1;padding:6.5rem var(--pad)}
  .inner{max-width:1300px;margin:0 auto}
  .section-head{margin-bottom:3rem}
  h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.01em;text-wrap:balance;max-width:16ch;margin-top:1rem}
  .section-sub{color:var(--muted);max-width:44ch;margin-top:1rem;font-size:1.02rem}

  /* MARQUEE */
  .marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.6rem 0}
  .marquee{display:flex;white-space:nowrap;animation:scroll 26s linear infinite}
  @media (prefers-reduced-motion:reduce){.marquee{animation:none}}
  .marquee span{font-family:var(--mono);font-size:.85rem;letter-spacing:.08em;color:var(--muted);padding:0 2.2rem;display:inline-flex;align-items:center;gap:2.2rem}
  .marquee span b{color:var(--text);font-weight:400}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .statement{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.28;letter-spacing:-.01em;max-width:20ch;text-wrap:balance}
  .statement em{font-style:italic;color:var(--text)}

  /* DUALITY */
  .duality-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
  @media (max-width:820px){.duality-grid{grid-template-columns:1fr}}
  .dcard{
    background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.4rem;
    position:relative;overflow:hidden;opacity:0;transform:translateY(24px);
    transition:border-color .4s;
  }
  .dcard::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),rgba(222,220,212,.07),transparent 70%);
    opacity:0;transition:opacity .4s;
  }
  .dcard:hover::after{opacity:1}
  .dcard:hover{border-color:rgba(222,220,212,.3)}
  .dcard h3{font-family:var(--display);font-weight:600;font-size:1.5rem;margin-bottom:1.4rem;position:relative}
  .dcard ul{list-style:none;display:grid;gap:.7rem;position:relative}
  .dcard li{color:var(--muted);font-size:.95rem;padding-left:1.2rem;position:relative}
  .dcard li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;transition:transform .3s,opacity .3s}
  .dcard--art li::before,.dcard--engine li::before{background:var(--muted-2)}
  .dcard-tag{margin-top:1.6rem;font-family:var(--mono);font-size:.85rem;color:var(--text);position:relative}

  /* El Arte — organic breathing pulse on hover */
  @keyframes dot-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.45}}
  .dcard--art:hover li::before{animation:dot-breathe 1.7s ease-in-out infinite}
  .dcard--art:hover li:nth-child(2)::before{animation-delay:.15s}
  .dcard--art:hover li:nth-child(3)::before{animation-delay:.3s}
  .dcard--art:hover li:nth-child(4)::before{animation-delay:.45s}

  /* El Engine — precise circuit grid + sequential activation ping */
  .dcard--engine::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(222,220,212,.09) 1px,transparent 1px),
      linear-gradient(90deg,rgba(222,220,212,.09) 1px,transparent 1px);
    background-size:22px 22px;
    opacity:0;transition:opacity .4s;
  }
  .dcard--engine:hover::before{opacity:1}
  @keyframes dot-ping{0%{box-shadow:0 0 0 0 rgba(222,220,212,.55)}100%{box-shadow:0 0 0 9px rgba(222,220,212,0)}}
  .dcard--engine:hover li::before{animation:dot-ping .7s ease-out}
  .dcard--engine:hover li:nth-child(1)::before{animation-delay:0s}
  .dcard--engine:hover li:nth-child(2)::before{animation-delay:.12s}
  .dcard--engine:hover li:nth-child(3)::before{animation-delay:.24s}
  .dcard--engine:hover li:nth-child(4)::before{animation-delay:.36s}
  @media (prefers-reduced-motion:reduce){
    .dcard--art:hover li::before,.dcard--engine:hover li::before{animation:none}
  }

  .duality-close{margin-top:3rem;font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.8vw,2rem);text-align:center;opacity:0;transform:translateY(20px)}
  .duality-close em{font-style:italic;color:var(--text)}

  /* FLAGSHIP / PRICING */
  .flagship{background:linear-gradient(180deg,transparent,rgba(16,191,109,.05) 40%,transparent)}
  .flagship-badge{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1rem}
  .compare{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:stretch;margin-top:3rem}
  @media (max-width:820px){.compare{grid-template-columns:1fr}}
  .ccol{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.2rem;opacity:0;transform:translateY(24px)}
  .ccol--with{border-color:rgba(16,191,109,.4);background:linear-gradient(160deg,rgba(16,191,109,.08),transparent)}
  .clabel{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.4rem}
  .clabel.g{color:var(--text)}
  .cledger{list-style:none;display:grid;gap:0}
  .cledger li{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px dashed var(--border);color:var(--muted);font-size:.92rem}
  .cledger li b{font-family:var(--mono);color:var(--text);font-weight:400}
  .ctotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:1.2rem}
  .ctotal span{font-family:var(--mono);font-size:11px;color:var(--muted-2);letter-spacing:.08em}
  .ctotal b{font-family:var(--display);font-size:2rem;font-weight:600}
  .cnotes{list-style:none;margin-top:1.4rem;display:grid;gap:.4rem;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
  .cvs{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;color:var(--muted-2);opacity:0}
  .cprice{display:flex;align-items:baseline;gap:.6rem}
  .cprice b{font-family:var(--display);font-size:3.2rem;font-weight:700;color:var(--text)}
  .cprice span{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
  .cnote{margin-top:1.4rem;color:var(--muted);font-size:.92rem}

  .includes{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;margin-top:3rem}
  @media (max-width:640px){.includes{grid-template-columns:1fr}}
  .includes li{font-size:.94rem;color:var(--muted);display:flex;gap:.7rem;opacity:0;transform:translateY(14px)}
  .includes li b{color:var(--text);font-family:var(--mono)}

  .flagship-ctas{display:flex;gap:1rem;margin-top:3rem;flex-wrap:wrap}

  /* BENTO SERVICES */
  .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;margin-top:3rem}
  @media (max-width:900px){.bento{grid-template-columns:1fr 1fr}}
  @media (max-width:600px){.bento{grid-template-columns:1fr}}
  .bcard{
    grid-column:span var(--span,4);background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:1.9rem;transition:border-color .25s, background .25s, transform .3s var(--ease);
    opacity:0;transform:translateY(20px);position:relative;overflow:hidden;
  }
  .bcard::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),rgba(222,220,212,.08),transparent 70%);
    opacity:0;transition:opacity .35s;
  }
  .bcard:hover::after{opacity:1}
  @media (max-width:900px){.bcard{grid-column:span 1 !important}}
  .bcard:hover{border-color:var(--text);background:var(--surface-strong);transform:translateY(-3px)}
  .bcard-num{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
  .bcard h3{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:.7rem 0 .6rem}
  .bcard p{color:var(--muted);font-size:.9rem;line-height:1.55}
  .bcard-price{display:block;margin-top:1.1rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .bcard--infra{background:var(--surface-strong);border-color:var(--text)}
  .bcard--infra .bcard-price{color:var(--text)}

  /* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
  @media (max-width:800px){.steps{grid-template-columns:1fr}}
  .step{opacity:0;transform:translateY(20px);border-top:1px solid var(--border);padding-top:1.2rem}
  .step .snum{font-family:var(--mono);font-size:.85rem;color:var(--muted-2)}
  .step h3{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:.6rem 0 .5rem}
  .step p{color:var(--muted);font-size:.92rem}

  /* CONTACT */
  .contact-box{
    border:1px solid var(--border);border-radius:24px;padding:clamp(2.5rem,7vw,5rem);text-align:center;
    max-width:820px;margin:0 auto;position:relative;overflow:hidden;
    background:var(--surface);transition:border-color .4s;
  }
  .contact-box::before,.contact-box::after{
    content:"";position:absolute;width:16px;height:16px;border:1px solid var(--muted-2);
    transition:width .35s var(--ease),height .35s var(--ease),border-color .35s;
  }
  .contact-box::before{top:16px;left:16px;border-right:none;border-bottom:none}
  .contact-box::after{bottom:16px;right:16px;border-left:none;border-top:none}
  .contact-box:hover{border-color:rgba(222,220,212,.3)}
  .contact-box:hover::before,.contact-box:hover::after{width:26px;height:26px;border-color:var(--text)}
  .contact-box h2{margin:0 auto 1rem;max-width:none}
  .contact-box p{color:var(--muted);margin-bottom:2.2rem;font-size:1.02rem}
  .contact-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

  /* IMAGE PLACEHOLDER FRAMES — white frames, reemplazar por fotos/video reales */
  .imgframe{
    aspect-ratio:var(--ar,4/5);background:#f2f1ec;border:1px dashed rgba(10,10,9,.22);border-radius:16px;
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
    opacity:0;transform:translateY(20px);
  }
  .imgframe::before,.imgframe::after{
    content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(10,10,9,.3);
  }
  .imgframe::before{top:10px;left:10px;border-right:none;border-bottom:none}
  .imgframe::after{bottom:10px;right:10px;border-left:none;border-top:none}
  .imgframe span{
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(10,10,9,.42);text-align:center;padding:1rem;max-width:22ch;line-height:1.5;
  }
  .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;margin-top:3rem}
  @media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.gallery{grid-template-columns:1fr}}
  .gallery .imgframe{grid-column:span var(--span,4)}
  @media (max-width:900px){.gallery .imgframe{grid-column:span 1 !important}}

  footer{
    border-top:1px solid var(--border);padding:2.4rem var(--pad);display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:.8rem;font-family:var(--mono);font-size:11px;color:var(--muted-2);position:relative;z-index:1;
  }