/* Landing de Hosteate Code (/code/). Sobre estilo-v4.css: reutiliza .hero, .sec, .cab, .cifras,
   .faq y los botones; aquí sólo lo propio. El azul (#3b5bff) es el de la app y los clips: se usa
   poco, para lo que es «de la app» (pasos activos, etiquetas, cursor). */
.cd{--azul:#3b5bff;--azul-2:#7c93ff;--cd-r:14px}

/* ── Hero ─────────────────────────────────────────── */
.cd-hero{min-height:auto;overflow:visible}
.cd-hero::before,.cd-hero::after{display:none}
.cd-aura{position:absolute;inset:-10% 0 auto;height:110%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 40% at 70% 62%,rgba(59,91,255,.22),transparent 70%),radial-gradient(35% 30% at 18% 20%,rgba(124,147,255,.08),transparent 70%)}
.cd-hero .env:first-of-type{padding-bottom:0}
.cd-bajo{align-items:flex-end}
.cd-lema{max-width:520px;font:400 clamp(16px,1.35vw,19px)/1.55 var(--disp);color:var(--tinta-2)}
.cd-lema b{color:var(--tinta);font-weight:500}
.cd-marco-env{margin-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,80px);perspective:1600px}
.cd-marco{position:relative;border-radius:var(--cd-r);overflow:hidden;background:#08080a;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 60px 140px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),0 0 140px -20px rgba(59,91,255,.35);
  transform-origin:50% 0;transform:rotateX(var(--giro,0deg)) scale(var(--esc,1));will-change:transform}
.cd-barra-mac{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;background:#111114;border-bottom:1px solid rgba(255,255,255,.06);font:500 12px/1 var(--disp);color:var(--tinta-3)}
.cd-barra-mac i{width:11px;height:11px;border-radius:50%;background:#2c2c31}
.cd-barra-mac i:nth-child(1){background:#ff5f57}.cd-barra-mac i:nth-child(2){background:#febc2e}.cd-barra-mac i:nth-child(3){background:#28c840}
.cd-barra-mac span{flex:1;text-align:center;margin-right:50px}
.cd-v{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#000}

/* ── Cómo funciona ───────────────────────────────── */
.cd-pasos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:start}
.cd-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--linea-2)}
.cd-lista li{border-bottom:1px solid var(--linea-2)}
.cd-paso{position:relative;display:flex;gap:18px;width:100%;padding:18px 4px 20px;background:none;border:0;text-align:left;cursor:pointer;color:var(--tinta-3);transition:color .25s}
.cd-paso .n{font:500 12px/1.6 var(--mono);letter-spacing:.08em;padding-top:2px}
.cd-paso .tx{display:flex;flex-direction:column;gap:6px}
.cd-paso b{font:500 19px/1.25 var(--disp);letter-spacing:-.02em}
.cd-paso .tx span{font-size:14.5px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.cd-paso:hover{color:var(--tinta-2)}
.cd-paso.on{color:var(--tinta)}
.cd-paso.on .n{color:var(--azul-2)}
.cd-paso.on .tx span{max-height:90px;opacity:1;color:var(--tinta-2)}
.cd-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--azul);transform-origin:0 50%;transform:scaleX(0)}
.cd-paso.on .cd-prog{transform:scaleX(var(--p,0))}
.cd-pantalla{position:sticky;top:110px;border-radius:var(--cd-r);overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#08080a;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 100px -30px rgba(59,91,255,.3)}
.cd-pv{display:block;width:100%;height:auto;aspect-ratio:16/10;transition:opacity .25s}
.cd-pv.cambia{opacity:0}

/* ── Tu IA, nuestro método (bento) ───────────────── */
.cd-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.cd-c{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.6vw,34px);border:1px solid var(--linea-2);background:var(--fondo-2);overflow:hidden;transition:border-color .3s}
.cd-c:hover{border-color:var(--tinta-3)}
.cd-c h3{font:500 clamp(21px,2vw,27px)/1.15 var(--disp);margin-top:6px}
.cd-c p{color:var(--tinta-2);font-size:15px;line-height:1.55;max-width:46ch}
.cd-c1{grid-column:span 7}.cd-c2{grid-column:span 5;grid-row:span 2}.cd-c3{grid-column:span 4}.cd-c4{grid-column:span 3}
.cd-c2::after{content:"";position:absolute;inset:auto -30% -40% auto;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(59,91,255,.25),transparent);pointer-events:none}
.cd-ias{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.cd-ias span{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border:1px solid var(--linea-2);background:var(--fondo);font:500 15px/1 var(--disp)}
.cd-ias img{width:28px;height:28px;border-radius:7px}
.cd-n{font:500 clamp(64px,7vw,96px)/1 var(--disp);letter-spacing:-.05em;margin-top:14px}
.cd-n small{font-size:.28em;letter-spacing:0;color:var(--tinta-3);margin-left:8px}
.cd-tags{list-style:none;margin:auto 0 0;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.cd-tags li{font:500 12px/1 var(--mono);letter-spacing:.04em;padding:8px 10px;border:1px solid var(--linea-2);color:var(--tinta-2)}
.cd-logos{display:flex;gap:10px;margin-top:auto;padding-top:14px}
.cd-logos img{width:40px;height:40px;padding:6px;border:1px solid var(--linea-2);background:var(--fondo)}
.cd-export{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:14px}
.cd-export span{font:500 13px/1 var(--mono);padding:12px;border:1px solid var(--linea-2);text-align:center}

/* ── Efectos ─────────────────────────────────────── */
.cd-fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fx{position:relative;border:1px solid var(--linea-2);background:var(--fondo-2);cursor:default;overflow:hidden}
.fx-esc{height:clamp(150px,15vw,200px);display:grid;place-items:center;perspective:700px;
  background-image:radial-gradient(rgba(var(--rgb),.07) 1px,transparent 1.2px);background-size:18px 18px}
.fx-t{font:500 clamp(30px,3.4vw,46px)/1 var(--disp);letter-spacing:-.04em;display:inline-block;white-space:nowrap}
.fx-n{position:absolute;left:16px;bottom:14px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.fx .p{display:inline-block;white-space:pre}
.fx-bola{font-size:clamp(17px,1.6vw,20px);letter-spacing:0;padding:16px 26px;border-radius:999px;background:var(--azul);color:#fff}
.fx-tarj{width:120px;height:80px;display:grid;place-items:center;font-size:30px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,#1d1d24,#0c0c10);box-shadow:0 20px 40px rgba(0,0,0,.5);transform-style:preserve-3d}
/* Muelles hechos con linear(): las mismas curvas que la pestaña Efectos de la app. */
.fx{--muelle:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.105,1.093 30.6%,1.015 41.3%,.993 47.3%,.996 57%,1)}
.fx.ve[data-fx="letras"] .p{animation:fx-letra .7s var(--muelle) both;animation-delay:calc(var(--k)*55ms)}
.fx.ve[data-fx="palabras"] .p{animation:fx-palabra .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k)*140ms)}
.fx.ve[data-fx="muelle"] .fx-t{animation:fx-muelle 1s var(--muelle) both}
.fx.ve[data-fx="giro"] .fx-t{animation:fx-giro 1.2s var(--muelle) both}
.fx.ve[data-fx="desenfoque"] .fx-t{animation:fx-desenf 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-letra{from{opacity:0;transform:translateY(70%) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes fx-palabra{from{opacity:0;transform:translateY(40%);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-muelle{from{transform:scale(.3);opacity:0}30%{opacity:1}to{transform:none}}
@keyframes fx-giro{from{transform:rotateY(-110deg) rotateX(20deg);opacity:0}25%{opacity:1}to{transform:none}}
@keyframes fx-desenf{from{opacity:0;filter:blur(18px);letter-spacing:.2em}to{opacity:1;filter:none}}
.cd-nota{margin-top:22px;color:var(--tinta-3);font-size:14.5px}

/* ── Publicar ────────────────────────────────────── */
.cd-pub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cd-p{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border:1px solid var(--linea-2);background:var(--fondo-2);min-height:250px}
.cd-p h3{font:500 22px/1.15 var(--disp)}
.cd-p p{color:var(--tinta-2);font-size:14.5px;line-height:1.55}
.cd-p-dest{border-color:rgba(59,91,255,.55);background:linear-gradient(180deg,rgba(59,91,255,.1),var(--fondo-2) 60%)}
.cd-et{align-self:flex-start;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;border:1px solid var(--linea-2);color:var(--tinta-2)}
.cd-et.azul{border-color:rgba(59,91,255,.6);color:var(--azul-2)}
.cd-url{margin-top:auto;display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--linea-2);background:var(--fondo);font:500 12px/1 var(--mono);color:var(--tinta-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cd-url i{flex:none;width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.15)}
.cd-precio{margin-top:auto;font-size:14px!important}
.cd-precio b{color:var(--tinta);font-weight:500;font-size:17px}

/* ── Servidores ──────────────────────────────────── */
.cd-srv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.cd-srv-tx h2{font:500 clamp(34px,4.4vw,60px)/1 var(--disp);letter-spacing:-.04em;margin-top:22px}
.cd-srv-tx h2 .tenue{color:var(--tinta-3)}
.cd-srv-tx>p{margin-top:20px;color:var(--tinta-2);max-width:48ch}
.cd-check{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.cd-check li{position:relative;padding-left:28px;color:var(--tinta-2);font-size:15px}
.cd-check li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2px solid var(--tinta);border-bottom:2px solid var(--tinta);transform:rotate(-45deg)}
.cd-term{border:1px solid var(--linea-2);background:#08080a;border-radius:12px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.cd-term-cab{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-bottom:1px solid var(--linea-2);font:500 11.5px/1 var(--mono);color:var(--tinta-3)}
.cd-term-cab i{width:10px;height:10px;border-radius:50%;background:#2c2c31}
.cd-term-cab span{margin-left:10px}
.cd-term pre{margin:0;padding:22px 22px 26px;font:400 13.5px/1.75 var(--mono);color:var(--tinta);white-space:pre-wrap;min-height:290px}
.cd-term .g{color:var(--tinta-3)}.cd-term .a{color:var(--azul-2)}.cd-term .o{color:var(--tinta-2)}.cd-term .v{color:#34c759}
.cd-term .cur{display:inline-block;width:8px;height:1.1em;vertical-align:-.2em;margin-left:4px;background:var(--tinta);animation:cd-parpadeo 1s steps(1) infinite}
@keyframes cd-parpadeo{50%{opacity:0}}
.js .cd-term[data-cd-term] .ln{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.js .cd-term[data-cd-term] .ln.ve{opacity:1;transform:none}

/* ── Cierre ──────────────────────────────────────── */
.cd-cierre{position:relative;overflow:hidden;border:1px solid var(--linea-2);min-height:clamp(380px,42vw,520px);display:flex;align-items:flex-end;isolation:isolate}
.cd-cierre-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55}
.cd-cierre::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--fondo) 10%,color-mix(in srgb,var(--fondo) 60%,transparent) 60%,transparent)}
.cd-cierre .tx{padding:clamp(28px,4vw,56px);max-width:640px}
.cd-cierre h2{font:500 clamp(34px,4.6vw,64px)/1 var(--disp);letter-spacing:-.04em}
.cd-cierre h2 .hueco{color:transparent;-webkit-text-stroke:1.2px var(--tinta)}
.cd-cierre p{margin-top:18px;color:var(--tinta-2)}
.cd-cierre .ctas{margin-top:28px}

/* ── Móvil ───────────────────────────────────────── */
@media (max-width:980px){
  .cd-pasos{grid-template-columns:1fr}
  .cd-pantalla{position:relative;top:0;order:-1}
  .cd-c1,.cd-c2,.cd-c3,.cd-c4{grid-column:span 12;grid-row:auto}
  .cd-pub{grid-template-columns:1fr 1fr}
  .cd-srv{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cd-fx{grid-template-columns:1fr 1fr}
  .cd-pub{grid-template-columns:1fr}
  .cd-p{min-height:0}
  .cd-barra-mac{height:26px}.cd-barra-mac i{width:8px;height:8px}.cd-barra-mac span{display:none}
  .cd-term pre{font-size:12px;padding:16px;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .cd-marco{transform:none!important}
  .fx.ve .p,.fx.ve .fx-t{animation:none!important}
}

/* ── Sección de la portada (index.php #code) ─────── */
.cd-home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.cd-home-tx h2{font:500 clamp(32px,4vw,56px)/1.02 var(--disp);letter-spacing:-.04em;margin-top:22px}
.cd-home-tx h2 .tenue{color:var(--tinta-3)}
.cd-home-tx>p{margin-top:20px;color:var(--tinta-2);max-width:50ch}
.cd-home-pasos{list-style:none;margin:26px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-home-pasos li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--linea-2);font:500 15px/1 var(--disp);color:var(--tinta-3);transition:color .3s,border-color .3s,background .3s}
.cd-home-pasos li span{font:500 11px/1 var(--mono);letter-spacing:.08em}
.cd-home-pasos li.on{color:var(--tinta);border-color:rgba(59,91,255,.6);background:rgba(59,91,255,.08)}
.cd-home-pasos li.on span{color:var(--azul-2)}
.cd-home-v{transform:none}
@media (max-width:980px){.cd-home{grid-template-columns:1fr}}

/* Esquinas y superficies de v4-web.css (la piel actual de la web: tarjetas redondeadas sobre --sup). */
.cd-c,.fx,.cd-p,.cd-cierre{border-radius:var(--r-tarjeta,18px);border-color:transparent;background:var(--sup,#111)}
.cd-p-dest{border-color:rgba(59,91,255,.55);background:linear-gradient(180deg,rgba(59,91,255,.12),var(--sup,#111) 60%)}
.cd-home-pasos li,.cd-ias span,.cd-logos img,.cd-export span,.cd-url{border-radius:12px}
.cd-tags li,.cd-et{border-radius:999px}
.cd-home-pasos li{background:var(--sup,#111);border-color:transparent}
.cd-lista{border-top:0}

/* v2 «líneas» (4-nov): la película ya dibuja la ventana de la app en líneas sobre negro; fuera el
   marco de Mac de CSS (salía una ventana dentro de otra) y el vídeo se funde con la página por los bordes. */
.cd-marco{border:0;border-radius:0;background:#000;box-shadow:none;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(120% 100% at 50% 50%,#000 62%,transparent 100%)}
.cd-barra-mac{display:none}
.cd-pantalla{background:#000}