/* DEMIURGO SOLUCIONES TECNOLÓGICAS · estilos.css · v1.0 */

@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-latin-full-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight:200 800; font-display:swap; }
@font-face { font-family:'Martian'; src:url('../fonts/martian-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Martian'; src:url('../fonts/martian-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --indigo:#3D2FB8; --ambar:#F0A93B; --obsidiana:#131022;
  --lavanda:#8B85E8; --marfil:#F4F2ED;
  --obsidiana-2:#1C1830; --borde-dark:#2E2950; --tinta:#3A3648; --gris:#6B6878;
  --fraunces:'Fraunces',Georgia,serif; --bricolage:'Bricolage',system-ui,sans-serif; --martian:'Martian',monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--bricolage); background:var(--obsidiana); color:var(--marfil); line-height:1.6; font-size:17px; }
img { max-width:100%; display:block; }
a { color:var(--lavanda); }
::selection { background:var(--ambar); color:var(--obsidiana); }

.contenedor { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ---- wordmark ---- */
.wordmark { font-family:var(--fraunces); font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 0;
  font-weight:600; letter-spacing:-0.01em; line-height:1; white-space:nowrap; color:var(--marfil); text-decoration:none; }
.wordmark .wd { display:inline-block; transform:rotate(-4deg); transform-origin:50% 70%;
  font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 1; color:var(--ambar);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.wordmark:hover .wd { transform:rotate(-9deg) translateY(-2px); }

/* ---- navegación ---- */
.nav { position:fixed; top:0; left:0; right:0; z-index:60; padding:20px 0;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease; }
.nav.compacta { background:rgba(19,16,34,.92); backdrop-filter:blur(10px); padding:12px 0; box-shadow:0 1px 0 var(--borde-dark); }
.nav .contenedor { display:flex; align-items:center; justify-content:space-between; }
.nav .wordmark { font-size:26px; }
.nav ul { display:flex; gap:34px; list-style:none; }
.nav ul a { color:var(--marfil); text-decoration:none; font-size:15px; position:relative; }
.nav ul a::after { content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--ambar); transition:width .25s; }
.nav ul a:hover::after { width:100%; }
.menu-btn { display:none; background:none; border:0; color:var(--marfil); font-size:26px; cursor:pointer; }

/* ---- hero ---- */
.hero { min-height:100vh; display:flex; align-items:center; padding:140px 0 90px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; right:-180px; top:-180px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle, rgba(61,47,184,.22), transparent 65%); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:64px; align-items:center; }
.hero h1 { font-family:var(--fraunces); font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 0;
  font-weight:600; font-size:clamp(38px,5.4vw,64px); line-height:1.1; margin-bottom:22px; }
.hero .sub { color:var(--lavanda); font-size:19px; max-width:34em; margin-bottom:34px; }
.cta { display:inline-block; text-decoration:none; font-weight:500; font-size:16px;
  padding:14px 28px; border-radius:8px; transition:transform .2s, box-shadow .2s, background .2s; }
.cta:active { transform:scale(.97); }
.cta-primario { background:var(--indigo); color:var(--marfil); }
.cta-primario:hover { background:#4A3BD4; box-shadow:0 6px 24px rgba(61,47,184,.45); transform:translateY(-2px); }
.cta-secundario { border:1.5px solid var(--ambar); color:var(--ambar); margin-left:12px; }
.cta-secundario:hover { background:rgba(240,169,59,.1); transform:translateY(-2px); }

.terminal { background:var(--obsidiana-2); border:1px solid var(--borde-dark); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.4); }
.terminal-barra { display:flex; gap:7px; padding:12px 16px; border-bottom:1px solid var(--borde-dark); }
.terminal-barra span { width:11px; height:11px; border-radius:50%; }
.terminal pre { padding:22px 24px; font-family:var(--martian); font-size:13.5px; line-height:1.9; color:var(--lavanda); overflow-x:auto; }
.terminal .c { color:var(--gris); } .terminal .k { color:var(--marfil); } .terminal .s { color:var(--ambar); }
.cursor { display:inline-block; width:8px; height:16px; background:var(--ambar); vertical-align:-2px; animation:parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity:0; } }

/* ---- secciones ---- */
.seccion { padding:110px 0; }
.seccion-clara { background:var(--marfil); color:var(--obsidiana); }
.kicker { font-family:var(--martian); font-weight:500; font-size:13px; letter-spacing:.18em; color:var(--ambar); margin-bottom:14px; }
.seccion-clara .kicker { color:var(--indigo); }
h2.titulo { font-family:var(--fraunces); font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 0;
  font-weight:600; font-size:clamp(30px,4vw,44px); line-height:1.15; margin-bottom:20px; max-width:18em; }

/* manifiesto */
.manifiesto p { max-width:44em; margin-bottom:18px; font-size:18px; color:var(--tinta); }
.manifiesto strong { color:var(--obsidiana); font-weight:600; }
.manifiesto .destacado { font-family:var(--fraunces); font-size:clamp(22px,2.6vw,30px); font-weight:600;
  color:var(--obsidiana); line-height:1.3; margin:0 0 26px; max-width:24em; }
.linea-codigo { display:inline-block; font-family:var(--martian); font-size:14px; background:var(--obsidiana);
  color:var(--lavanda); padding:12px 20px; border-radius:8px; margin-top:16px; }
.linea-codigo .s { color:var(--ambar); }

/* servicios */
.tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin-top:44px; }
.tarjeta { background:var(--obsidiana-2); border:1px solid var(--borde-dark); border-radius:14px; padding:32px 28px;
  transition:transform .3s ease, border-color .3s ease; position:relative; overflow:hidden; }
.tarjeta::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--indigo);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.tarjeta:hover { transform:translateY(-6px); border-color:var(--indigo); }
.tarjeta:hover::before { transform:scaleX(1); }
.tarjeta h3 { font-family:var(--fraunces); font-weight:600; font-size:21px; margin:14px 0 10px; }
.tarjeta p { font-size:15px; color:var(--lavanda); }
.tarjeta .icono { font-family:var(--martian); font-weight:500; font-size:13px; color:var(--ambar); letter-spacing:.1em; }

/* cómo trabajamos: pestañas */
.pestanas { display:inline-flex; background:rgba(19,16,34,.07); border:1px solid #DDD9CE; border-radius:10px; padding:5px; margin:8px 0 36px; }
.pestana { border:0; background:none; font-family:var(--bricolage); font-size:15.5px; font-weight:500; color:var(--tinta);
  padding:11px 26px; border-radius:7px; cursor:pointer; transition:background .25s, color .25s; }
.pestana.activa { background:var(--indigo); color:var(--marfil); }
.panel { display:none; animation:aparece .4s ease; }
.panel.activo { display:block; }
@keyframes aparece { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
.panel p { max-width:44em; font-size:17.5px; color:var(--tinta); margin-bottom:14px; }
.proceso { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:52px; }
.paso { background:#fff; border:1px solid #E5E1D6; border-radius:12px; padding:26px 22px; }
.paso .num { font-family:var(--martian); font-weight:500; font-size:12px; color:var(--indigo); letter-spacing:.14em; }
.paso h4 { font-family:var(--fraunces); font-weight:600; font-size:19px; margin:10px 0 8px; color:var(--obsidiana); }
.paso p { font-size:14px; color:var(--tinta); }

/* por qué un taller */
.razones { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.razon { border-left:3px solid var(--ambar); padding:6px 0 6px 22px; }
.razon h4 { font-family:var(--fraunces); font-weight:600; font-size:20px; margin-bottom:6px; }
.razon p { font-size:15.5px; color:var(--lavanda); max-width:32em; }

/* contacto */
.contacto-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:60px; margin-top:20px; }
.contacto-info p { color:var(--tinta); font-size:17px; margin-bottom:16px; max-width:26em; }
.contacto-info a.email { font-family:var(--martian); font-size:16px; color:var(--indigo); }
form .campo { margin-bottom:18px; }
form label { display:block; font-size:14px; font-weight:500; color:var(--obsidiana); margin-bottom:6px; }
form input, form select, form textarea { width:100%; font-family:var(--bricolage); font-size:15.5px; color:var(--obsidiana);
  background:#fff; border:1px solid #D3CFC2; border-radius:8px; padding:12px 14px; transition:border .2s, box-shadow .2s; }
form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(61,47,184,.15); }
form textarea { min-height:130px; resize:vertical; }
.rgpd { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--tinta); }
.rgpd input { width:auto; margin-top:3px; }
.oculto { position:absolute; left:-9999px; opacity:0; } /* honeypot */
.form-aviso { font-size:13px; color:var(--gris); margin-top:10px; }
.form-error { display:none; background:#FCEBEB; color:#A32D2D; border-radius:8px; padding:10px 14px; font-size:14px; margin-bottom:14px; }

/* footer */
footer { border-top:1px solid var(--borde-dark); padding:54px 0 40px; }
.footer-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.lockup-sub { font-family:var(--martian); font-weight:500; font-size:9px; letter-spacing:.34em; color:var(--lavanda); margin-top:8px; }
.claim { font-family:var(--martian); font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--ambar); margin-top:14px; }
footer ul { list-style:none; }
footer ul a { color:var(--lavanda); text-decoration:none; font-size:14px; line-height:2.1; }
footer ul a:hover { color:var(--marfil); }
.footer-legal { font-size:12.5px; color:var(--gris); margin-top:34px; }

/* páginas legales */
.pagina-legal { background:var(--marfil); color:var(--obsidiana); min-height:100vh; }
.pagina-legal main { padding:150px 0 90px; }
.pagina-legal h1 { font-family:var(--fraunces); font-weight:600; font-size:36px; margin-bottom:26px; }
.pagina-legal h2 { font-family:var(--fraunces); font-weight:600; font-size:22px; margin:34px 0 10px; }
.pagina-legal p, .pagina-legal li { font-size:16px; color:var(--tinta); max-width:46em; margin-bottom:12px; }
.pagina-legal ul { padding-left:22px; }
.pagina-legal table { border-collapse:collapse; margin:14px 0; font-size:14.5px; }
.pagina-legal th, .pagina-legal td { border:1px solid #D3CFC2; padding:8px 12px; text-align:left; }

/* banner cookies (CMP) */
.cmp { position:fixed; bottom:20px; left:20px; right:20px; max-width:520px; z-index:90; background:var(--obsidiana-2);
  border:1px solid var(--borde-dark); border-radius:14px; padding:24px 26px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:translateY(140%); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.cmp.visible { transform:none; }
.cmp h5 { font-family:var(--fraunces); font-weight:600; font-size:19px; margin-bottom:8px; }
.cmp p { font-size:13.5px; color:var(--lavanda); margin-bottom:16px; }
.cmp .botones { display:flex; gap:10px; flex-wrap:wrap; }
.cmp button { font-family:var(--bricolage); font-weight:500; font-size:14px; padding:10px 18px; border-radius:7px; cursor:pointer; border:0; }
.cmp .aceptar { background:var(--indigo); color:var(--marfil); }
.cmp .rechazar { background:none; border:1px solid var(--borde-dark); color:var(--marfil); }
.cmp .rechazar:hover { border-color:var(--lavanda); }

/* animación de aparición al hacer scroll */
.revelar { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.revelar.dentro { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .revelar { opacity:1; transform:none; transition:none; }
  .cursor { animation:none; }
}

/* responsive */
@media (max-width: 900px) {
  .hero-grid, .contacto-grid { grid-template-columns:1fr; gap:44px; }
  .razones { grid-template-columns:1fr; }
  .nav ul { position:fixed; inset:0; background:rgba(19,16,34,.97); flex-direction:column;
    align-items:center; justify-content:center; gap:34px; font-size:22px; display:none; }
  .nav ul.abierto { display:flex; }
  .menu-btn { display:block; z-index:70; }
  .cta-secundario { margin-left:0; margin-top:12px; }
}