/* iazaragoza.eu — Programas a medida con IA. Tema negro tipo editor de código. */
:root{
  --negro:#000;--fondo:#050505;--fondo2:#0b0b0c;--panel:#111113;--panel2:#18181b;
  --borde:#232326;--borde2:#2e2e33;--texto:#ededed;--suave:#a1a1aa;--tenue:#6b6b74;
  --azul:#3794ff;--azul2:#0078d4;--verde:#4ec9b0;--lima:#a6e22e;--amarillo:#dcdcaa;
  --naranja:#ce9178;--morado:#c586c0;--cian:#9cdcfe;--rojo:#f14c4c;--oro:#ffcc4d;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radio:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--negro);color:var(--texto);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.contenedor{width:min(1240px,100% - 32px);margin-inline:auto}
.mono{font-family:var(--mono)}
.verde{color:var(--verde)}.azul{color:var(--azul)}.amarillo{color:var(--oro)}
[hidden]{display:none!important}
.oculto{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-principal{background:var(--azul);color:#fff;box-shadow:0 10px 30px -10px rgba(55,148,255,.7)}
.btn-principal:hover{background:#4ea1ff;box-shadow:0 14px 40px -10px rgba(55,148,255,.9)}
.btn-borde{border-color:var(--borde2);background:rgba(255,255,255,.03)}
.btn-borde:hover{border-color:var(--azul)}
.btn-verde{background:var(--verde);color:#00110d}
.btn:disabled{opacity:.55;cursor:wait;transform:none}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--borde)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.logo .llaves{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#0b2a4a,#08332b);border:1px solid #1f3f5f;color:var(--verde);font-size:.9rem}
.logo small{display:block;font-family:var(--sans);font-weight:500;font-size:.7rem;color:var(--tenue);letter-spacing:0}
.menu{display:flex;align-items:center;gap:26px;font-size:.93rem;color:var(--suave)}
.menu a:not(.btn):hover{color:var(--texto)}
.menu .btn{padding:10px 18px;color:#fff}
.hamburguesa{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.hamburguesa svg{width:26px;height:26px}

/* ---------- Héroe ---------- */
.heroe{position:relative;padding:56px 0 40px;overflow:hidden}
.heroe::before{content:"";position:absolute;inset:-20% -10% auto;height:620px;background:radial-gradient(600px 300px at 20% 30%,rgba(55,148,255,.16),transparent 70%),radial-gradient(500px 280px at 80% 20%,rgba(78,201,176,.12),transparent 70%);pointer-events:none}
.heroe .contenedor{position:relative}
.comentario{font-family:var(--mono);font-size:.86rem;color:#6a9955;margin-bottom:14px}
.heroe h1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.035em;font-weight:800}
.heroe h1 .linea2{display:block;background:linear-gradient(90deg,var(--azul),var(--verde));-webkit-background-clip:text;background-clip:text;color:transparent}
.cursor{display:inline-block;width:.09em;height:.9em;margin-left:.06em;background:var(--verde);vertical-align:-.08em;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.heroe .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--suave);max-width:60ch;margin:20px 0 26px}
.heroe .lead strong{color:var(--texto)}
.sellos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.sello{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--borde2);background:var(--fondo2);font-size:.88rem;font-weight:600}
.sello b{font-weight:800;color:var(--verde)}
.sello.oro b{color:var(--oro)}
.sello.azul b{color:var(--azul)}

/* ---------- Ventana tipo editor ---------- */
.vsc>*{min-height:0}
.vsc{display:grid;grid-template-columns:48px 210px minmax(0,1fr) 410px;grid-template-rows:34px minmax(0,1fr) 24px;height:680px;border:1px solid var(--borde2);border-radius:12px;overflow:hidden;background:#1f1f1f;box-shadow:0 40px 120px -30px rgba(55,148,255,.35),0 0 0 1px rgba(255,255,255,.02);font-family:var(--mono);font-size:13px}
.vsc-titulo{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 12px;background:#181818;border-bottom:1px solid #2b2b2b;color:#9d9d9d;font-size:12px}
.vsc-titulo .puntos{display:flex;gap:7px}
.vsc-titulo .puntos i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.vsc-titulo .puntos i:nth-child(2){background:#febc2e}.vsc-titulo .puntos i:nth-child(3){background:#28c840}
.vsc-titulo .busca{margin:0 auto;padding:3px 60px;border:1px solid #2f2f2f;border-radius:6px;background:#1f1f1f}
.vsc-actividad{background:#181818;border-right:1px solid #2b2b2b;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:12px;color:#7a7a7a}
.vsc-actividad svg{width:22px;height:22px}
.vsc-actividad .activo{color:#d7d7d7;position:relative}
.vsc-actividad .activo::before{content:"";position:absolute;left:-13px;top:-3px;bottom:-3px;width:2px;background:var(--azul)}
.vsc-lateral{background:#181818;border-right:1px solid #2b2b2b;color:#cccccc;overflow:hidden;font-family:var(--sans);font-size:13px}
.vsc-lateral h6{font-size:11px;font-weight:600;letter-spacing:.06em;color:#9d9d9d;padding:10px 14px 6px}
.vsc-lateral .carpeta{padding:3px 14px;font-weight:700;font-size:11px;letter-spacing:.04em}
.vsc-lateral ul{list-style:none}
.vsc-lateral li{display:flex;align-items:center;gap:7px;padding:2px 14px 2px 26px;white-space:nowrap;color:#bdbdbd}
.vsc-lateral li.sub{padding-left:38px}
.vsc-lateral li.activo{background:#37373d;color:#fff}
.vsc-lateral li .ic,.vsc-pestanas .ic{font-family:var(--mono);font-size:10px;font-weight:700;min-width:20px;text-align:center}
.ic.py{color:#3e9fd8}.ic.ts{color:#3178c6}.ic.sql{color:#e38c00}.ic.js{color:#f1e05a}.ic.ps{color:#5391fe}.ic.dir{color:#c09553}.ic.md{color:#519aba}
.vsc-editor{display:flex;flex-direction:column;min-width:0;background:#1f1f1f}
.vsc-pestanas{display:flex;background:#181818;border-bottom:1px solid #2b2b2b;overflow:hidden;height:35px;flex:none}
.vsc-pestanas span{display:flex;align-items:center;gap:7px;padding:0 14px;border-right:1px solid #2b2b2b;color:#9d9d9d;white-space:nowrap;font-family:var(--sans);font-size:13px}
.vsc-pestanas span.activa{background:#1f1f1f;color:#fff;box-shadow:inset 0 1px 0 var(--azul)}
.vsc-pestanas span.nueva{animation:entra .35s ease}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}}
.vsc-migas{padding:3px 16px;color:#9d9d9d;font-size:12px;font-family:var(--sans);flex:none}
.vsc-cuerpo{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}
.vsc-codigo{flex:1;overflow:hidden;padding:2px 0 40px;line-height:20px;white-space:pre;color:#cccccc}
.vsc-codigo .l{display:flex;min-height:20px}
.vsc-codigo .n{flex:none;width:52px;padding-right:18px;text-align:right;color:#6e7681;user-select:none}
.vsc-codigo .l.actual{background:#ffffff08}
.vsc-codigo .l.actual .n{color:#cccccc}
.vsc-codigo .t{flex:1;min-width:0}
.vsc-codigo .caret{display:inline-block;width:2px;height:17px;background:#aeafad;vertical-align:-3px;animation:parpadeo 1.05s steps(1) infinite}
.vsc-minimapa{flex:none;width:70px;border-left:1px solid #2b2b2b33;opacity:.8}
.vsc-terminal{flex:none;height:96px;border-top:1px solid #2b2b2b;background:#181818;padding:6px 16px;color:#cccccc;font-size:12px;line-height:18px;overflow:hidden}
.vsc-terminal .cab{display:flex;gap:18px;color:#9d9d9d;font-family:var(--sans);font-size:11px;letter-spacing:.05em;margin-bottom:4px}
.vsc-terminal .cab b{color:#e7e7e7;border-bottom:1px solid var(--azul)}
.vsc-terminal .ok{color:var(--verde)}.vsc-terminal .tiempo{color:#6e7681}
.vsc-estado{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 10px;background:#181818;border-top:1px solid #2b2b2b;color:#9d9d9d;font-size:12px;font-family:var(--sans);white-space:nowrap;overflow:hidden}
.vsc-estado .rama{background:var(--azul2);color:#fff;padding:0 10px;margin-left:-10px;height:100%;display:flex;align-items:center}
.vsc-estado .der{margin-left:auto;display:flex;gap:16px}
.vsc-estado .ia{color:var(--verde)}
/* sintaxis */
.k{color:#569cd6}.c{color:#c586c0}.s{color:#ce9178}.m{color:#6a9955;font-style:italic}.nu{color:#b5cea8}.f{color:#dcdcaa}.ty{color:#4ec9b0}.v{color:#9cdcfe}.o{color:#d4d4d4}.tg{color:#569cd6}.at{color:#9cdcfe}

/* Panel derecho (la petición) */
.vsc-panel{background:#181818;border-left:1px solid #2b2b2b;display:flex;flex-direction:column;min-width:0;font-family:var(--sans);font-size:14px}
.panel-cab{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #2b2b2b;flex:none}
.panel-cab b{font-size:14px}
.panel-cab small{font-family:var(--mono);font-size:11px;color:var(--verde);display:flex;align-items:center;gap:6px}
.panel-cab small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde);animation:latido 1.6s infinite}
@keyframes latido{50%{opacity:.35}}

/* ---------- El test de petición (formulario por pasos) ---------- */
.peticion{display:flex;flex-direction:column;flex:1;min-height:0}
.peticion .progreso{height:3px;background:#2b2b2b;flex:none}
.peticion .progreso i{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--azul),var(--verde));transition:width .35s}
.peticion .pasos-num{display:flex;justify-content:space-between;padding:10px 16px 0;font-family:var(--mono);font-size:11px;color:var(--tenue);flex:none}
.peticion .pasos-num span.hecho{color:var(--verde)}
.peticion .pasos-num span.actual{color:var(--texto)}
.peticion .cuerpo{flex:1;overflow-y:auto;padding:12px 16px 8px;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
.peticion fieldset{border:0;min-width:0}
.js .peticion fieldset.paso:not(.activo){display:none}
.peticion fieldset.paso.activo{animation:entra .3s ease}
.peticion legend{font-weight:800;font-size:1.18rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:4px}
.peticion .ayuda{color:var(--suave);font-size:.86rem;margin-bottom:12px}
.peticion .pregunta{font-weight:700;font-size:.88rem;margin:14px 0 7px;display:block}
.peticion .pregunta em{font-style:normal;font-weight:500;color:var(--tenue)}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.opciones.tres{grid-template-columns:repeat(3,1fr)}
.opcion{position:relative;cursor:pointer}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion span{display:flex;align-items:center;gap:8px;height:100%;padding:9px 10px;border:1px solid var(--borde2);border-radius:9px;background:#1f1f1f;font-size:.84rem;line-height:1.25;transition:border-color .15s,background .15s}
.opcion span i{font-style:normal;font-size:1.05rem;flex:none}
.opcion:hover span{border-color:#4a4a52}
.opcion input:checked+span{border-color:var(--azul);background:rgba(55,148,255,.12);color:#fff}
.opcion input:focus-visible+span{outline:2px solid var(--azul);outline-offset:2px}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px}
.etiquetas .opcion span{padding:6px 11px;border-radius:999px;font-size:.8rem}
.campo{display:block;margin-top:10px}
.campo>span{display:block;font-size:.8rem;font-weight:600;color:var(--suave);margin-bottom:5px}
.campo input,.campo textarea,.campo select{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--borde2);background:#1f1f1f;outline:none;transition:border-color .15s;font-size:.92rem}
.campo textarea{min-height:150px;resize:vertical;line-height:1.5}
.campo input:focus,.campo textarea:focus{border-color:var(--azul)}
.campo.error input,.campo.error textarea{border-color:var(--rojo)}
.guia{margin:4px 0 2px;padding:10px 12px;border-radius:9px;background:#0f1d2b;border:1px solid #1c3550;font-size:.8rem;color:#b9d7f5}
.guia b{color:#fff}
.guia ul{margin:4px 0 0 16px}
.medidor{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.78rem;color:var(--tenue)}
.medidor .barra{flex:1;height:5px;border-radius:9px;background:#2b2b2b;overflow:hidden}
.medidor .barra i{display:block;height:100%;width:0;background:var(--rojo);transition:width .3s,background .3s}
.archivos{margin-top:10px;border:1px dashed var(--borde2);border-radius:9px;padding:12px;text-align:center;font-size:.82rem;color:var(--suave);cursor:pointer;display:block}
.archivos:hover{border-color:var(--azul)}
.archivos input{display:none}
.lista-archivos{list-style:none;margin-top:6px;font-size:.78rem;color:var(--suave)}
.lista-archivos li{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.legal{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:.8rem;color:var(--suave);cursor:pointer}
.legal input{margin-top:3px;accent-color:var(--azul)}
.legal a{color:var(--azul);text-decoration:underline}
.peticion .pie{display:flex;gap:8px;align-items:center;padding:10px 16px 14px;border-top:1px solid #2b2b2b;flex:none}
.peticion .pie .btn{padding:11px 16px;font-size:.92rem}
.peticion .pie .btn-principal{flex:1}
.peticion .pie .atras{background:none;border:1px solid var(--borde2);color:var(--suave)}
.peticion .aviso{font-size:.8rem;color:var(--rojo);min-height:0;padding:0 16px}
.peticion .aviso:empty{display:none}
.peticion .aviso{padding-bottom:6px}
.no-js-enviar{display:none}
html:not(.js) .no-js-enviar{display:block;margin-top:16px}
html:not(.js) .peticion .pie,html:not(.js) .peticion .progreso,html:not(.js) .peticion .pasos-num{display:none}
html:not(.js) .peticion fieldset{margin-bottom:22px}
.hecho-ok{display:none;flex:1;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 20px;gap:12px}
.peticion.enviada .cuerpo,.peticion.enviada .pie,.peticion.enviada .progreso,.peticion.enviada .pasos-num,.peticion.enviada .aviso{display:none}
.peticion.enviada .hecho-ok{display:flex}
.hecho-ok .check{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(78,201,176,.15);color:var(--verde);font-size:1.7rem}
.hecho-ok h3{font-size:1.35rem;line-height:1.2}
.hecho-ok p{color:var(--suave);font-size:.92rem}
.hecho-ok .num{font-family:var(--mono);color:var(--verde);font-size:1rem}

/* textos del test en blanco */
.peticion .ayuda,.peticion .pasos-num,.peticion .pasos-num span,.peticion .pregunta em,.campo>span,.medidor,.archivos,.lista-archivos,.legal,.hecho-ok p,.opcion span{color:#fff}
.peticion .pasos-num span:not(.actual):not(.hecho){opacity:.75}
.campo input::placeholder,.campo textarea::placeholder{color:#fff!important;opacity:1!important}
.campo input::-webkit-input-placeholder,.campo textarea::-webkit-input-placeholder{color:#fff!important;opacity:1!important}

/* tarjeta del formulario en páginas temáticas */
.tarjeta-peticion{display:flex;flex-direction:column;background:#181818;border:1px solid var(--borde2);border-radius:14px;overflow:hidden;min-height:620px;max-height:760px;box-shadow:0 30px 100px -30px rgba(55,148,255,.35)}

/* ---------- Secciones ---------- */
section{padding:90px 0;position:relative}
.titulo-seccion{max-width:760px;margin-bottom:46px}
.titulo-seccion.centro{margin-inline:auto;text-align:center}
.titulo-seccion h2,.grande{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.03em;font-weight:800}
.titulo-seccion p{color:var(--suave);margin-top:14px;font-size:1.08rem}
.grad{background:linear-gradient(90deg,var(--azul),var(--verde));-webkit-background-clip:text;background-clip:text;color:transparent}
.fondo-alt{background:var(--fondo2);border-block:1px solid var(--borde)}

.cifras{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;background:var(--fondo2)}
.cifras div{padding:26px 22px;border-right:1px solid var(--borde)}
.cifras div:last-child{border-right:0}
.cifras strong{display:block;font-weight:800;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1;letter-spacing:-.04em}
.cifras span{display:block;color:var(--suave);font-size:.92rem;margin-top:8px}

.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:p}
.pasos article{padding:26px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel)}
.pasos .num{font-family:var(--mono);color:var(--verde);font-size:.85rem}
.pasos h3{font-size:1.18rem;margin:10px 0 8px;line-height:1.25}
.pasos p{color:var(--suave);font-size:.95rem}
.pasos small{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.78rem;padding:4px 10px;border-radius:999px;background:#0f1d2b;color:var(--azul)}

.ganchos{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.gancho{padding:34px;border-radius:var(--radio);border:1px solid var(--borde);background:linear-gradient(160deg,#101014,#070708)}
.gancho p.m1{font-family:var(--mono);color:#6a9955;font-size:.82rem;margin-bottom:12px}
.gancho h3{font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.2;letter-spacing:-.02em}
.gancho p{color:var(--suave);margin-top:12px}

.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.idea{padding:22px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel);transition:border-color .2s,transform .2s}
.idea:hover{border-color:#34343a;transform:translateY(-3px)}
.idea .ic{font-size:1.5rem}
.idea h3{font-size:1.04rem;margin:10px 0 6px}
.idea p{color:var(--suave);font-size:.92rem}
.idea code{font-family:var(--mono);font-size:.76rem;color:var(--verde)}

.precio{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:46px;border-radius:20px;border:1px solid #1c3550;background:radial-gradient(500px 260px at 0% 0%,rgba(55,148,255,.16),transparent 70%),var(--panel)}
.precio .gordo{font-family:var(--mono);font-size:clamp(4rem,10vw,7.5rem);line-height:.9;font-weight:800;letter-spacing:-.06em}
.precio .gordo small{font-size:.4em;letter-spacing:-.02em}
.precio ul{list-style:none;display:grid;gap:12px}
.precio li{display:flex;gap:12px;align-items:flex-start;color:var(--suave)}
.precio li b{color:var(--texto)}
.precio li::before{content:"✓";color:var(--verde);font-weight:800;font-family:var(--mono)}

.faq{max-width:860px;display:grid;gap:10px}
.faq details{border:1px solid var(--borde);border-radius:12px;background:var(--panel);padding:0 20px}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--azul);font-size:1.2rem}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--suave);padding-bottom:18px}

.llamada{text-align:center;padding:70px 30px;border-radius:22px;border:1px solid var(--borde2);background:radial-gradient(600px 300px at 50% 0%,rgba(78,201,176,.14),transparent 70%),var(--panel)}
.llamada h2{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.08;letter-spacing:-.03em}
.llamada p{color:var(--suave);max-width:58ch;margin:16px auto 28px;font-size:1.08rem}
.llamada .acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* páginas temáticas */
.heroe-tema{padding:44px 0 70px}
.heroe-tema .rejilla{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:start}
.heroe-tema h1{font-size:clamp(2rem,4.2vw,3.3rem);max-width:none}
.migas{font-size:.84rem;color:var(--tenue);margin-bottom:16px;font-family:var(--mono)}
.migas a:hover{color:var(--texto)}
.promesas{list-style:none;display:grid;gap:12px;margin:8px 0 26px}
.promesas li{display:flex;gap:12px;align-items:flex-start;color:var(--suave)}
.promesas li b{color:var(--texto)}
.promesas li::before{content:"→";font-family:var(--mono);color:var(--verde);font-weight:700}
.texto-largo{max-width:820px}
.texto-largo h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.025em;margin-bottom:18px}
.texto-largo p{color:var(--suave);margin-bottom:14px;font-size:1.05rem}
.texto-largo p strong{color:var(--texto)}
.relacionados{display:flex;flex-wrap:wrap;gap:10px}
.relacionados a{padding:10px 16px;border-radius:999px;border:1px solid var(--borde2);font-size:.9rem;color:var(--suave);transition:border-color .2s,color .2s}
.relacionados a:hover{border-color:var(--azul);color:var(--texto)}

/* legal */
.legal-pagina{padding:60px 0 90px}
.legal-pagina .texto-largo h1{font-size:2.3rem;letter-spacing:-.03em;margin-bottom:20px}
.legal-pagina h2{font-size:1.25rem;margin:28px 0 10px}
.legal-pagina ul{color:var(--suave);margin:0 0 14px 22px}

/* ---------- Pie ---------- */
footer{border-top:1px solid var(--borde);padding:56px 0 30px;color:var(--suave);font-size:.92rem;background:var(--fondo)}
footer .rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h5{color:var(--texto);font-size:.85rem;margin-bottom:12px;font-family:var(--mono)}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:var(--texto)}
.pie-temas{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:34px;padding-top:24px;border-top:1px solid var(--borde);font-size:.84rem}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:.8rem;color:var(--tenue)}
.flotante{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.flotante svg{width:28px;height:28px}

.revelar{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.revelar.visto{opacity:1;transform:none}
html:not(.js) .revelar{opacity:1;transform:none}

/* ---------- Adaptación ---------- */
@media (max-width:1180px){
  .vsc{grid-template-columns:48px minmax(0,1fr) 400px}
  .vsc-lateral{display:none}
  .heroe-tema .rejilla{grid-template-columns:minmax(0,1fr) 410px;gap:30px}
}
@media (max-width:920px){
  .menu{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:#000;border-bottom:1px solid var(--borde);padding:8px 16px 18px;display:none}
  .menu.abierto{display:flex}
  .menu a{padding:12px 4px;border-bottom:1px solid var(--borde)}
  .menu .btn{margin-top:12px;border:0}
  .hamburguesa{display:block}
  .vsc{grid-template-columns:minmax(0,1fr);grid-template-rows:34px 300px auto 24px;height:auto}
  .vsc-actividad{display:none}
  .vsc-minimapa{display:none}
  .vsc-terminal{height:64px}
  .vsc-panel{border-left:0;border-top:1px solid #2b2b2b;min-height:600px}
  .vsc-titulo .busca{padding:3px 14px}
  .pasos{grid-template-columns:1fr 1fr}
  .ideas{grid-template-columns:1fr 1fr}
  .cifras{grid-template-columns:1fr 1fr}
  .cifras div:nth-child(2){border-right:0}
  .cifras div:nth-child(-n+2){border-bottom:1px solid var(--borde)}
  .precio{grid-template-columns:1fr;padding:30px}
  .heroe-tema .rejilla{grid-template-columns:1fr}
  .heroe-tema .promesas,.heroe-tema .sellos{display:none}
  .tarjeta-peticion{max-height:none}
  footer .rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  section{padding:64px 0}
  .heroe{padding-top:34px}
  .sellos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
  .sello{font-size:.78rem;padding:7px 10px;border-radius:10px;line-height:1.3}
  .peticion .pasos-num{font-size:10px}
  .vsc{grid-template-rows:34px 230px auto 24px;font-size:11.5px}
  .vsc-codigo{line-height:17px}.vsc-codigo .l{min-height:17px}.vsc-codigo .n{width:34px;padding-right:10px}
  .vsc-estado .der span:not(.ia){display:none}
  .vsc-terminal,.vsc-migas{display:none}
  .vsc-titulo .busca{display:none}
  .opciones,.opciones.tres,.fila2{grid-template-columns:1fr}
  .opciones.dos-movil{grid-template-columns:1fr 1fr}
  .pasos,.ideas,.ganchos{grid-template-columns:1fr}
  .gancho{padding:24px}
  footer .rejilla{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .revelar{opacity:1;transform:none}
}