/* ============================================================
   Cubelas · cubel-as.com
   Tercera version: portafolio de marca. Negro y dorado.

   El peso visual lo llevan tres cosas y no la decoracion:
     1. Un fondo vivo (fondo.js) que reacciona al raton.
     2. Tipografia enorme y muy apretada, con el dorado usado con
        cuentagotas: si el oro esta en todo, deja de valer nada.
     3. Aire. Mucho. Lo caro se reconoce por el espacio vacio.

   Nada de fotos: no hay presupuesto de fotografia y meter banco de
   imagenes se nota al instante. Las muestras del portafolio son
   armazones dibujados en CSS.
   HTML + CSS + JS normal. Sin build y sin dependencias.
   ============================================================ */

:root{
  --negro:#07080a;
  --panel:#0d0f13;
  --panel-2:#12151b;
  --linea:#1c1f27;
  --linea-2:#2c313d;

  --tx:#f0f1f4;
  --tx-2:#9aa1ad;
  --tx-3:#7d838f;   /* minimo que pasa 4,5:1 sobre el negro */

  --oro:#c9a247;
  --oro-cl:#e8cd8a;
  --oro-op:rgba(201,162,71,.09);
  --oro-linea:rgba(201,162,71,.28);

  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ancho:1180px;
  --aire:clamp(84px,12vw,172px);
  --curva:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--negro)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--negro);
  color:var(--tx);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--oro);color:#0a0803}

.wrap{max-width:var(--ancho);margin:0 auto;padding-left:24px;padding-right:24px;
      position:relative;z-index:1}

/* ---------------------------------------------------- fondo vivo */
#fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#halo{position:fixed;top:0;left:0;width:600px;height:600px;z-index:0;pointer-events:none;
      background:radial-gradient(circle,rgba(201,162,71,.10) 0%,rgba(201,162,71,.045) 34%,transparent 68%);
      will-change:transform}
/* Grano: quita el aspecto de degradado plano y da textura de impresion. */
#grano{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.32;
       background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
main,.top,.pie{position:relative;z-index:1}

/* ---------------------------------------------------- cabecera */
.top{position:sticky;top:0;z-index:60;background:rgba(7,8,10,.72);
     backdrop-filter:saturate(1.7) blur(14px);border-bottom:1px solid var(--linea)}
.top-in{max-width:var(--ancho);margin:0 auto;padding:14px 24px;
        display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;
       min-height:44px;color:var(--tx)}
.marca svg{width:25px;height:25px;color:var(--oro);flex:0 0 auto}
.marca b{font-size:18px;font-weight:600;letter-spacing:-.03em}
.top-tel{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;
         padding:0 19px;border:1px solid var(--oro-linea);color:var(--oro-cl);
         text-decoration:none;border-radius:999px;font-weight:600;font-size:15px;
         letter-spacing:-.01em;background:var(--oro-op);
         transition:border-color .2s var(--curva),background .2s var(--curva)}
.top-tel:hover{border-color:var(--oro);background:rgba(201,162,71,.16)}

/* ---------------------------------------------------- portada */
.hero{padding:clamp(72px,13vw,168px) 0 var(--aire);border-bottom:1px solid var(--linea)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
        font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
        color:var(--oro);margin:0 0 30px}
.kicker::before{content:"";width:26px;height:1px;background:var(--oro);opacity:.65}
.hero h1{
  font-size:clamp(2.7rem,8.2vw,6rem);
  line-height:1.0;
  letter-spacing:-.05em;
  font-weight:600;
  margin:0 0 34px;
  max-width:15ch;
  color:#fff;
}
.oro{background:linear-gradient(96deg,var(--oro) 8%,var(--oro-cl) 52%,var(--oro) 94%);
     -webkit-background-clip:text;background-clip:text;color:transparent;
     -webkit-text-fill-color:transparent}
.hero .lead{font-size:clamp(1.05rem,2.1vw,1.28rem);color:var(--tx-2);
            max-width:52ch;margin:0 0 42px}
.acciones{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;
     padding:0 27px;border-radius:999px;text-decoration:none;font-weight:600;
     font-size:16px;letter-spacing:-.01em;
     transition:transform .22s var(--curva),background .22s var(--curva),
                border-color .22s var(--curva),box-shadow .22s var(--curva)}
.btn--p{background:linear-gradient(180deg,var(--oro-cl),var(--oro));color:#120d02;
        box-shadow:0 0 0 rgba(201,162,71,0)}
.btn--p:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(201,162,71,.24)}
.btn--s{background:transparent;color:var(--tx);border:1px solid var(--linea-2)}
.btn--s:hover{border-color:var(--oro-linea);background:var(--panel);transform:translateY(-2px)}

/* tira de sectores bajo la portada */
.tira{display:flex;gap:26px;flex-wrap:wrap;margin-top:54px;
      font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
      text-transform:uppercase;color:var(--tx-3)}
.tira span{display:inline-flex;align-items:center;gap:9px}
.tira span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--oro);opacity:.7}

/* ---------------------------------------------------- secciones */
section{padding:var(--aire) 0;border-bottom:1px solid var(--linea)}
.sec-n{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--oro);
       letter-spacing:.2em;margin:0 0 16px}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.07;letter-spacing:-.042em;
   font-weight:600;margin:0 0 20px;max-width:21ch;color:#fff}
h3{font-size:1.05rem;font-weight:600;letter-spacing:-.015em;margin:0 0 7px;color:var(--tx)}
.sec-d{font-size:1.02rem;color:var(--tx-2);max-width:58ch;margin:0 0 52px}

/* ---------------------------------------------------- portafolio */
.obras{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.obra{position:relative;background:var(--panel);border:1px solid var(--linea);
      border-radius:14px;padding:24px 22px 26px;overflow:hidden;
      transition:border-color .3s var(--curva),transform .3s var(--curva),
                 background .3s var(--curva)}
.obra:hover{border-color:var(--oro-linea);transform:translateY(-4px);background:var(--panel-2)}
.obra::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
             background:radial-gradient(420px circle at 50% 0%,rgba(201,162,71,.10),transparent 62%);
             transition:opacity .3s var(--curva)}
.obra:hover::after{opacity:1}
.obra .et{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--oro);margin:0 0 6px}
.obra h3{margin:0 0 4px;font-size:1.12rem;letter-spacing:-.02em}
.obra .cuenta{font-family:var(--mono);font-size:12px;color:var(--tx-3);margin:0 0 20px}
.obra p{margin:18px 0 0;font-size:14.5px;color:var(--tx-2);line-height:1.6}

/* armazon dibujado: una web abstracta, sin nombres y sin fotos */
.mock{border:1px solid var(--linea-2);border-radius:8px;background:#0a0c10;
      padding:11px;display:grid;gap:7px}
.mock i{display:block;background:var(--linea-2);border-radius:3px;height:6px}
.mock i.t{height:11px;width:58%;background:linear-gradient(90deg,var(--oro),rgba(201,162,71,.25))}
.mock i.s{width:84%}
.mock i.m{width:70%}
.mock .fila{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:3px}
.mock .fila i{height:22px;border-radius:5px;background:#141821}
.obra:hover .mock i.t{background:linear-gradient(90deg,var(--oro-cl),var(--oro))}

/* ---------------------------------------------------- fallos */
.fallos{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
        background:var(--linea);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.fallo{background:var(--panel);padding:30px 25px;transition:background .25s var(--curva)}
.fallo:hover{background:var(--panel-2)}
.fallo b{display:block;font-family:var(--mono);font-size:1.75rem;font-weight:600;
         letter-spacing:-.035em;color:var(--oro);line-height:1;margin-bottom:15px}
.fallo p{margin:0;font-size:14.5px;color:var(--tx-2);line-height:1.62}

/* ---------------------------------------------------- pasos */
.pasos{border-top:1px solid var(--linea)}
.paso{padding:28px 0;border-bottom:1px solid var(--linea);display:grid;
      grid-template-columns:64px 1fr;gap:0 22px;align-items:start;
      transition:background .25s var(--curva)}
.paso:hover{background:rgba(255,255,255,.014)}
.paso .num{font-family:var(--mono);font-size:12.5px;color:var(--oro);padding-top:5px;
           letter-spacing:.08em}
.paso p{margin:0;color:var(--tx-2);max-width:62ch;font-size:15.5px}

/* ---------------------------------------------------- incluye */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.dos h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
        color:var(--tx-3);margin-bottom:18px;font-weight:500}
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:12px 0 12px 27px;border-bottom:1px solid var(--linea);
          position:relative;font-size:15.5px;color:var(--tx-2)}
.lista li::before{position:absolute;left:0;top:12px;font-size:13px;font-weight:700}
.si li::before{content:"→";color:var(--oro)}
.no li::before{content:"—";color:var(--tx-3)}

/* ---------------------------------------------------- precio */
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px}
.precio{background:var(--panel);border:1px solid var(--linea);border-radius:14px;
        padding:32px 27px;transition:border-color .3s var(--curva),transform .3s var(--curva)}
.precio:hover{border-color:var(--oro-linea);transform:translateY(-3px)}
.precio .cifra{font-size:2.2rem;font-weight:600;letter-spacing:-.045em;line-height:1;
               margin:0 0 7px;color:#fff}
.precio .unidad{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
                text-transform:uppercase;color:var(--tx-3);margin:0 0 22px}
.precio p{margin:0;font-size:14.5px;color:var(--tx-2);line-height:1.62}
.precio--destacado{border-color:var(--oro-linea);background:var(--oro-op)}
.precio--destacado .cifra{color:var(--oro-cl)}
.precio--destacado .unidad{color:var(--oro)}

/* ---------------------------------------------------- cierre */
.cierre{border-bottom:0;text-align:center}
.cierre h2{max-width:22ch;margin-left:auto;margin-right:auto}
.cierre .sec-d{margin-left:auto;margin-right:auto}
.cierre .grande{font-size:clamp(2.2rem,7vw,4.2rem);letter-spacing:-.05em;
                font-weight:600;margin:0 0 14px;line-height:1.02}
.cierre .grande a{text-decoration:none;color:#fff;transition:color .22s var(--curva)}
.cierre .grande a:hover{color:var(--oro-cl)}
.cierre .correo{font-size:1.02rem;color:var(--tx-2);margin:0}
.cierre .correo a{color:var(--oro);text-decoration:none}
.cierre .correo a:hover{color:var(--oro-cl)}

/* ---------------------------------------------------- pie */
.pie{background:var(--negro);border-top:1px solid var(--linea);color:var(--tx-3);
     padding:36px 0 46px;font-size:13.5px}
.pie-in{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.pie a{color:var(--tx-2);text-decoration:none;display:inline-flex;align-items:center;
       min-height:44px}
.pie a:hover{color:var(--oro-cl)}
.pie .sep{margin-left:auto}

/* ---------------------------------------------------- aparicion
   Visible por defecto. Solo se esconde si el JS ha arrancado y va a
   revelarlo: si falla, la web se ve entera en vez de quedarse en blanco. */
.js-anim .rev{opacity:0;transform:translateY(18px);
              transition:opacity .6s var(--curva),transform .6s var(--curva)}
.js-anim .rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .rev{opacity:1;transform:none}}

/* ---------------------------------------------------- movil */
@media (max-width:860px){
  .dos{grid-template-columns:1fr;gap:40px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  #grano{opacity:.24}
  .top-in{padding:11px 18px;gap:12px}
  .top-tel{padding:0 15px;font-size:14.5px}
  .wrap{padding-left:18px;padding-right:18px}
  .hero h1{letter-spacing:-.04em}
  .paso{grid-template-columns:1fr;gap:7px;padding:22px 0}
  .paso .num{padding-top:0}
  .tira{gap:14px 20px;margin-top:40px;font-size:12px}
  .sec-n,.obra .et,.dos h3,.precio .unidad{font-size:12px}
  .obra .cuenta{font-size:12.5px}
  .pie .sep{margin-left:0;width:100%}
}