/* =====================================================================
   portada.css — la portada (index.html), según la maqueta aprobada del 2026-09-24.

   QUÉ HAY AQUÍ Y QUÉ NO
   ---------------------
   Todo el CSS de la portada, fuera del HTML. La portada se sirve `no-cache`, así que lo
   que viaja dentro de ella se revalida en cada visita; esta hoja va con `?v=<huella>`
   (test_version_css.py) y se baja una vez.

   LA TIPOGRAFÍA. Inter (400 y 600) llega por `polarys-fuente.css`, la hoja compartida.
   Orbitron 600 vive aquí porque solo la usa esta página: son los mismos bytes que estaban
   incrustados en el <style> de la portada, movidos sin recomprimir. La maqueta pedía
   además Inter 500, 700 y 800 de Google Fonts: la CSP no deja cargar nada de fuera
   (`font-src 'self' data:`) y esas caras no existen en el repo, así que TODO lo que la
   maqueta pintaba en 700/800 va en 600, y lo de 500 en 400. Ningún peso sin cara:
   test_paginas_claras.py lo comprueba.

   LOS @media VAN SIN ESPACIO entre la palabra y el paréntesis, y no es estilo: la guarda
   del cajón (test_acceso_p14_p15_estatico.py) los recorre con ese patrón.
   ===================================================================== */

@font-face{font-family:'Orbitron';font-weight:600;font-style:normal;font-display:swap;
    src:url(data:font/woff2;base64,d09GMgABAAAAABm8ABAAAAAAP/wAABldAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGnwbkUIcKAZgP1NUQVQqAIRYEQgK0kC+JQuCeAABNgIkA4VsBCAFhRAHg2MMBxtUM0UHYtg4AAjcTSiKsrkZDv4/JHBjiPQPyxIOYRElStN1p2kdpktqdutkbyXu5lwb/yxYsHwxjpX326lT0cU2weLx8Ak/eKyNGFaP0NgnuTxfv8bn6dszs4SSQJit1YTCMTqwm8SlfCoywoH+EYqFAtYI7+f5bf55oII6M4fKfTpEhwFGAza6tS4dGzYzkftw0a7bXsjAXhkFa4NVuejfearL0D3d5wtEE3tMZD/WU0jZSPFCkvd26tZheZ5/d39unlpmbVmYUFsk3/0/+Cdvn/Ye4KC7aKRZGPEqhECCgQUJB5ZKbQJbemLpxPynV2ujVQuJkkmZkAmRUiwzNHG527sX3Rf2xf6dljMuV/5I1qVVuoAm4eHNtnZXV3qlXhzC8ngArwXw/386y3a+Z/VWPlaIj6lf5eX1VFREr7dGkqUZ7SwejbU+YK2PbJ8XUDq0HQKuDr17xBsA6i4pKsCiSZ06RZW+TIoyRdlER9la6HWJGJmY9rnmLC0j52oRizDCzAmhlPrz82IyXP5UK5bQABfwyT+oAtYDELYIDAQz5ggWbBAcuCB4Qgh+/BA4OAhcPIRQMQjxEhBEkhEkZiLMsxhBSoogU4AgV4qg0YquQwc6AliLFI926oxkLlg+uakoAUtGgPG/AIX2+G5FCdj/vWqwXHAJgESqlklXk8JE1OZ6e365KdL89gV+KP6q+D1MnrEncO/sR10vHiruge6Srcee14hPJR9B1IKIDc9UFkfE5mpaDcLQvCrF0r0W4lLlZAz4AK4NHay2EngPvgqNLo11mRgwA5tiS2yH3bA79sDemIsDcQgOx/E4wUnKPnfrV5cAIXZnREOrVQcaJgKOom/nR5Z7i34ZWM4vtcu2pXqJRws5i/Nimf8DmH+Z385P5uuzZj4xr57nzykzObtPb6eb05Fp9ZQ0uffHftA1reii9st/eRF1juVAJPGsz9VY2yqzxOXoH7/5wVsEPoIpM1NYsGXHgSs37jx4YvE1DYc/riDBQoQS+BxEJEYxSyvfuEQqkyuUKrVGqyNIimZYf/6t+TKog6Q9rhfAJTkWJMNy30kWdIHNIRLEBVZIo2yqqCiDKmmiNlGJh70R0QRpipvYp1XmO+I+QGDTwxNwSFx1427XdJjA8N44oKlGduaSwJaoIoICK6Ra1q2SNDbOg4KndFrxtH2Adizh83SDrej6QOHXaFNkgLr1LcR5cpsaoAU6QPIZwAr9ACiuYmPhr6iKw6mMxB/5STXpbzbYQqAIoDYxYAmtgG+AQxlQQCXHTUiUQ4DgVff9LnKJigA1xvUlnJljpCYqrHlRKgtNYo6MnhA5mQGMxctA4rxMZianiX1VVVUgXTuj2pyoOlBAIbWLqzw6RbbLvqlLm4LMHYqH2nYTy2h4k+Uly6CSa6hX+SsnXgyMmFg/8ADcDZBCqe/KHsF3tp9FCQoTDHfB6YtSAJt7n6imajsam1p72/fWfArSfXYMeDxlFZ7QQKVaibRmySrKkzlSapiSo0GvMWCdES+nNeJEwr6gs5058rssTBurZK9iCbtWkW3Gbf73mcLykXqlawye0cPKrCUibL06hRjb212SaqdxNPZWIaU5ImJa3GXEnuv0uhLUhBgIf8+1BoUb/XFGGZ10WxKaXBdF17DhyMqTL3SdVV3PB4FnGnhmBTmCyTW8r8yiOtBFk6g937DeJGAhNOTWyeVbASev57vZAaNrzTmEpX0aRF/Tc5+zYwAc4ktBdoBA2v+mMdASbYLrmnpi7tgLgfPg7YcclOd5zQrKunQXOF4tVD/+aQ6v5i/vb+KYUMQV5AEJS8BCNlHxsbStNwduMbs53LJZ5bYnjm06AV7gccDaVmhlM2p4rOlcOqAADfkk7kefj5CKnCf3XoyYstDPDs9ZcBkpAA+9fshdN3394YmLpVxDFzRuCx0vSqY0kr6E5d9fyUikZAsQvZrRtQJZk2zGIG/mo8DF565rgmuxTxO/AveBE8jtrm8WhrD22dJ/Hh5g/075GShATsUA7EFDIDARwHYEsAPt5f0CBQFAEIBqWjZAgAa2o3d+140iBk6IZ4xmughLrNXkvHbdLrliwmMvfe93//qfCKo5uZ5nedEEnU5nsrazXFgeLG8WydJ42/7/P/bgiZSj3nltXp0NuuupV37050qajeHc21jOLHf3GGjyOpdY42c0BzVKhxv478f4Fl/jWtwaNz9XD3+Bla+lr7NffTe5GwhC4Jpmb4EfAPimaIQl4ViCEgLqDPy5vW2dI7Y45azzjtpmu81qrbJHtRqrrdGsUZMNzl135Ld/uDK/h41/l61226/7KuR//Q4X7HTGceuddNpVahsZo6FjMGKCyZwNS1asuXDkxNlUbF68IT7q8QQINB3fclHCRYgRKVqsBMnEEiWZKUOmGeZbJNsCiy3UoECuPPlWIi1BIMb/NgGsAOoF8AFYdxisfwv0RoD6EyBo45PO7RA/y4klVl+CuvUQcOku50tHIG5IjTy60UrSgBagyJ83q/ksq0B9skLX3XVdojGaZnyxjCtHEApQTvP3Oc8gGL8CUYIIhCfqAZ4KaOiHHjmIjP4S24Mi0U+RaVqmvNkYdvhzQ5vVh66ZGF84nN/SyHdm7APIYJ53+xxpKCzM/2en5xAXoW+Mffxi+7JMea26ybAABl2FDhPnMGY4XCycW3LsJ4QtHcf+7cM2QbE8s2v62rV8pUvqevT5hNePl6RTMSo9F0s/zdIVKh90E/KjsWFMRgdLng9HzHWHQFxV6AkqeDgEVI29c8bWleH4q3B/7GlLB9wPjVoV/egor7RvN3Q4PaaoGx9hTo9CUnceuW8BJiMLFVu8lXIUjbGEWFM844v6gPgP6me7Rs8bURsp87kKyye7zDpDnMJ2rYi+dqIkLK/AhvZEzAqtrD0wq1xeLVB4o7yhzULCysVbW/0q5r28Ml8Izw3OA9jLGxghVGe+5GGoBhWp33drgz63MpBYlLOZZ+kY4LzXoQXxNXWem9rY0vqwapA+F1i32WmRa6uEJtjavme++lK5nLU0O6oYsB9AbaZVKf20FyF3dlsbQo9sM/pR43G5MmspGR82x4WATPGY04B//ilSYy4eNkUYL+VD82aNuIJVTBosa0iN8zgOHVe+1XP84sttngkumw2XPgG1D3jp1fIvHFemKPQHsNYQGyGYnBWowfwTmq3w3JXm86oqonp0R1ORO7KW+kPEs8eZbwjpLndBq/xjGgXDtpYyOO7EHpd5a/gV7rna+XLy5bBaoomux9QEq79ydRYyYaV+t0GSZo+ftmFfTsOyJko5dV4E2fQ3UimkwO582SMeps7xea5l3eLaogqNglWebUi0O6znGw3Q8CqSw+rmxNXfiY5rygTDKj0Zn6zKAyr4wbpb8bryKENrmOFZtgAzDuvIh7o3J2rJAN5g5G9MfuLugW+PvA/p4seLUuAY8c1pHIy1/1k0zOkvmDUZ/FYWSzQLZVsazZVLa5/jzN6MfbosazvXOlOpWOO2lipT16qNDcG9mSW2MbDGUEVTW3orRqMeuqvuDpMtsrQhReRWDz15HrXRhMTqVtHsNvqL3iGmUogMO+/ziVE8eH9fvuLpPvz+jU+LfMQHJDUrq8dANS039igyr09p+BZqUMp46PofBj3xhNsfiOByKIe5V33C8UJdo776M027psK3arrA+gDUULBQMbRWI8qyxOYatY4RF6t3mL+AaETnYVOMm7MCRX+cKgoL9iW/hSxab1rEAWj2m9i+7hnHv6ybVxBlzMeE4TeUjgjYRp/f6tIiF7DARS5hfmGpy7xtXThx2Xw076FGUfDLksec9XCcnPHZXt4KNj24+gebV9iZZrvudmeQ6G9ZvtWRo7b9hAFVEslj+TDYU5ezHw5bqDQX7c/f7PRzL5Y/746hKfjjUT8URsMqeOZhr4KnK7p9TEOMayyDFs6yVfN2RFQ9rbF2qeoGrLSlv7B+uO8zRTebaE7OjszxRK9axwqASu9gOVH6cl/DHZgY9WyHA3sOQGQqirmPRpAuA6Wqfn/lU7jk1SNmiz20+AgEkIoydChP5dHZVd3V6aE63FpVCrd96HE2RBm4N032WqakOce71O6KpW6n1vDDZFouVIJOM0+wzeOe/tLBNtQZRPdj0IgFM5NVwdaBHptSglUQaUhlZSN0zsCt/0aj3MMqd3uu464a5f6kljvxIFWABN5jbe3uSzXVjLsZRBgo/x/8qUEq8AzYADtJ4hIqZU88UZV631Dlf+UvzlYPh7RQ4bEVHMAVf4i4S2VnqyDcsN0iYUrCDjLFz2Ou5xzfmZljiFSlx4yTvtAvaqUuFVHet9mH+LZJ1irxZHgICZ9IRXoJus7O0CED/G2jWDFzALU/9FEzsOFDLdkdaJetajC+gda+YJx+vnYfI++kF+liEI/iMo/TwF57QDwtGh1FMVqwM5qQClrgeJ/jDoKE4GsZD1lclUHln6XHHaRSifpudgT0UD+xSyLMEO7MDWAaGE+sv/hTqKy+tNjrP06Tjjj6EBAI7g7pnbvXvGJOMmsmx3THNI+pLsN8sEwf3vNX1B9R+yQjFhAC28hxX5Vh8IdCD9JHoSePFjPV6vANsjsKDYwoJdU5+Uz1luPQ41oy2nCpSQs6HFGPWVha9T4/UGlEbAQCoOGBWWy1YTiK0rNjlJGMkvJuiWToSerJVdSdzgyd3o2u4xGmYTwOp9HR1mjWAKbdNFJGrDKHfgKWYI0l+zqWs60owIfVKFqHnlIPrQuhn/HnMdj5HigpQ+3CmWw9z370bCHS+yMPxNWhmEUyjdP8fsQHcI/8XfUkFMRYrNwOFKaAN1UYel6D6lfmCU7steS5EN4VA/Wi0zRorrr/YbP7t8ahwn0zmF31EXo82M0aSsVUI8dlIADxM62JoSof55F9gCNO+IRsyntTRhCBrtYDd5MJdKXKe1Be1xld2aeFXHCXRC4b4C34AJybVw8466Pt4gf7K3Lqx1lGHvAmZ2SxhFgoDCg8W4TjmM6wS8LjdthqY0UaI7KYOT7bF61JTUlkCpkAEZAWy46GWLuXLzlHrljuW29cFOK8zT66x8hbOSHvh16FsUToFZhciS9+xp9Fs/sQP50zMYcjmNV9QLkGMBdiRTu+uxQ+uB3xImDAO9G6Q0Wnizack2+Xr38mWnrlWNsxCAS35+bPCbeapqHGoRqkEC/M7Zvmwq6nGdWdmSl9+ApTrWKH55V+hPTXIRDAtmbxGZyxrUncjGEQXY9j96MYPRpC+hjUz467joZYq+EUQ82clz+AVnaSqQbeA0c8t/beX9sMEAF2KHoE9TPUntTLZeViHhml0xciXRTZ1DSkHvUxW9xcqxBDn3ZxRHntIb8e0/TUuVvC7JRPMQ6HCiTTu8imJgenpEayfVxPIz3EIXgMl+4q7p9RNBZQBZcOBID7DzCITvHHvvwqcE90ahQLsbzVtL6mi0b1LMYeprdP3MVjjKjhAodGcGMVXUkkH8cerQuq8w6SGWrGqXvsrTSdpEG9nX7/vut2ew8S7/CackUm9dNpOAgh7ulDZ9oC3q9fJad3aqmsXHjJ22D9rZbVcaYMs3XppD4hk4bpJ3NHLZrXXY8AMMbA3wS/4XLWhyzgTwCFKeXEvBQSz/KWVLONm1jyt1BSS4i4BSbYRHmLKw3MsJly7tSb26mHGDJKx/6LoeaCar6hvkf6dLKLLdGjPyo3AuuJ2HHv7S5BK5dhthiLhZ/kblLfvZxfg/IHM94PQMPlTbfn8ZyCePbTg5ygxROWiTPla319Ktdyaqgta6exP7wB38zinMQZRZAIQU1Z1Org2v3U5ZBT1fxT+hmpps2ilN+W2Ul18pooztb7O8pyg5GQWh2YwObJ5J83vkyBj/B6xnrWZDps6hxMX3bk16tGTV/ueRAOmOtyH+lcKoitkyB1q+BmBTQ+1FJxbheS6NgqYsw8+//cuoSAEMScqf3enluQjJc9tbvOl6sP1v87BwEYLuG4t3EYQgDHvo3FlwwQ+TXgQxj4XwHO+g43EEZjbyzgPpSzPuU6/jYDyrw+znP8Ffj34VeqjPUxr9lkAizmg1ezliNGVplLu3nsBlqldiposRYi3b4zM4+9VCklFUWWkjSF3uFXDLXibdQ2kdHEtekr/A5YRVBcfYQJ1dlz9RpqzQPqQc4D/KD42zfKHGVn6SiSQihq9tUFoEC9DpmGu4nUR5NHSa7Ot7kIFzWR97mkpVKTqvoxuozPURRwH7V4zuYNo+HHpIO2zBwAm3ePPdTHF7C0WxrZebzMRT2BKJKi1sprbFlwUrcWw6nFsHcX3rWH2rMP79sLcLOhWRCw8+LuS+Y1myLMrHHbdQk6AVONwPw31DvKL/WlKDwJ40LkHKDMKNObBwKNsMOm1ub0jrrvKqAJoPb78pluLz7gWuC8ZRu+J8msrL2kr3iqyMuF9Wz+Tz6wFWo04l+2tIhMFGi/KzsTuexH2aCvC8pkuzawzgEV8zglsY8qBioR7TGbItsx2zgorJYCJ1PGGU5NXz6yIQibXbMLrf2IxOjjWpQBah+h3Iypbd9M1GQhTmomt6t6UDr5/7+61JVO3nCU/P6iUECmd7HXsNZULEl5pYr5G1p16YUCN61KrdqRafMX6lWuMY+oOTT6zrSxNjPV6YO//kP6aPYIO0aPZt3Cf8n+Ki//a/Lfdjo+QTYpg65ysluCMtoqy+o1fTKQZFaWtQyPspxJ8SHLGbvhF0EDbgByHVAqKg69HYqmcTSq1woQnoq/hnoTO3dDTsPCZQ0yTopfCrhsd6tyC3FTuvHd1ih52c6lTl4kzTYR0ZTP27IXdlvtH7k4LWjnyUfawtmw4AY0UtxGmH9g9pgNtEMIYJXWNNqlqtvUGrVW3S51gJm36ASIW4zBeySLgKg1khY7nLnVSnWbWiNpuScRPshZFNm1om5Ta9RaqSOX66bmqrlqLg8VfICHYUYpaOo2tUatVbdLHaXxiYc+SaQsBJKIL4COoIVrBST3WbROrWRbSQ3W8nkkeB7PGj5jwfivqdvUGrVW6uAyN2Xx+F+S8UXQEbRwrXB5/4yZAKAxfmJ6jdaZoM5yr/ZDU9q33O1w2/rpdP4DGTi6TTe8mrH53xls/JNRA4Dd70Ak6LX0qz+lvnybl6XRsR8KH/I2oRlcyGc2IlJf+WZZyAE+tfB4bf/TyWM8XBv6WgDvNw4HvZr+kMCOXuhXpb48m9vq2sGM7nAUenJe64Ai3g3lD+HxGDNVyJBnfcQy6NkBmBex4j8W+gEfW3hM2n9x8hgN17q+5sC7tQKQN3xl0LP9iwJvKL81JRk//npzW9H0qfkdy3MGGdwBGCt/kLX11YQSK30x6m9oQrNv655a1zzO+c3d1nDK0VrTqZyH3AArBBDCXvTCMmdT9G/S6Z8BH7ZFEODz3dnB/xOH6+zTD4EFDaDANEjFfJ2S/3cHCJ/W10p+Yd9ikU+RBzoh6HhRLRCO8xOKzH/ofmXHcslzRHiEZ4gTHq/ReEEWPQWM2kNEm/8NrBfe8ecYTZA0L8VvJwOFiBBuT87P7+z7Fn7NZzpp4zVXYJPMrii+kFwSKk8nxslJglwWoiHFKd0rwl7rPH4umJZTBJ4LjQh+MAmjy5r7fiSmhpMrPqPvEeSKGF4rxljTcaE5RiDsw0DfTyteJ4iodvxcRoN25DCRfLp6AqPFgddD0EJ97K2IjhXRke4zJlpqqIgcQreldDS+1zG0iD+JkMR23guR7qnf7FlT08SuKq3JH1zaAyumYBImGJen0GIJLy9O5SWk7AjKXkiMISp6ghZUMasaBHbJAuO8jeKONpjuO1HFAehS7+aT1bzanncm+VY/G6/G3vihwZSsVehz//v0lHEd4tzX8TqMoNX4nSC8LgvwiAAMKRj1YPSDoQCjCYwMUJfCAFnYEj3kX+/IfOFcBznVL7I85IwAVsxhLJrRPsEz4b71I+iIyRTA72WkDSR4ezuQxtKDgXThTmUbWQcac7WRmtTSsoGWQnEHWrPmTm28aMpIBMB64NDxcWbJVShfAYU5cq1USKiUnMwMFZYrpFChVElLVigTaXoQlVY4LcR9FSoF0kJZCVRK87knniGJxCt/wDAxX+4ElaQJluDusTw8QcrYUTLNkClxNZ1htshXhe5YqqLv9FlUlDPKqFRIhNDo42k4oHMLyF2JnzNTaBHlrOgVCaoMCkisGSx+yfHKBzdfoVFUWe7pK5RaafqCyCWPjpSf5taQl6/0LXMaLhbs5bDiOpUpNlfKJcOSZCdMXiapld0TR2LxjpDmLRDNp/MdpwT7fFaAA265YTmtFVrtg5BkfPnJddNtd6bJMkeNGTcxx0Uy/PrzBDO4K999bdqFCMUnECbcAw8VeCRCpCjRvhZDrFAxuSIlVqqXGCqRLEVZrrx8Im1rEo8pKGFVE2GvZqZZKLOprLJatTU6Ztbe3XzbZcm21nobrLPAQoss9o0eS+bjjHk07jIn9y9jw4oHTxcYaeKt0VYWTNiKY26KpZaJFc9apy5C3S665DJjZuhFI+iwGcMWlr73gytYvEwlxeTD1Dab5MSIMCZMCAbBJEwJM9hDZLcnXnrqmclVVc8KebwEnlHi84rSX+8fwgs3vZHp3Nz/1Zwwld6uUiimhQf/fM4EU8VDuey1aXDYFeL/Le+1dwMA) format('woff2')}

:root{
  --bg:#060A14; --surface:#0B1224;
  --line:rgba(160,180,220,.13); --line-2:rgba(160,180,220,.22);
  --text:#EEF2F8; --muted:#A3AEC4; --faint:#6F7C95;
  --blue-hi:#4E88F5; --blue-lo:#2F63D6; --accent:#5C8FF3; --accent-2:#79BAF5;
  --green:#34C27E;
  --r-lg:20px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-tech:'Orbitron','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-weight:600}
b,strong{font-weight:600}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icono{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Las estrellas: CSS, sin three.js. */
.estrellas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:
   radial-gradient(1px 1px at 12% 18%,#fff8,transparent 60%),radial-gradient(1px 1px at 28% 72%,#fff6,transparent 60%),
   radial-gradient(1.2px 1.2px at 46% 34%,#fff7,transparent 60%),radial-gradient(1px 1px at 63% 12%,#fff5,transparent 60%),
   radial-gradient(1px 1px at 78% 58%,#fff6,transparent 60%),radial-gradient(1.3px 1.3px at 88% 26%,#fff7,transparent 60%),
   radial-gradient(1px 1px at 8% 88%,#fff5,transparent 60%),radial-gradient(1px 1px at 54% 90%,#fff4,transparent 60%),
   radial-gradient(1px 1px at 36% 8%,#fff5,transparent 60%),radial-gradient(1px 1px at 94% 82%,#fff5,transparent 60%)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;border-radius:10px;font-weight:600;
  transition:transform .15s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;white-space:nowrap}
.boton:active{transform:translateY(1px)}
.boton-pri{background:linear-gradient(180deg,var(--blue-hi),var(--blue-lo));color:#fff;box-shadow:0 8px 24px -10px rgba(61,120,238,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.boton-pri:hover{background:linear-gradient(180deg,#5A92F7,#346BDD)}
.boton-sec{border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.boton-sec:hover{border-color:rgba(160,190,240,.45);background:rgba(255,255,255,.05)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:22px;letter-spacing:-.01em}
.logo b{color:var(--accent)}
.logo svg{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(110,160,255,.55))}
.coste{font-size:14px;font-weight:600;color:#CFE0FF;background:rgba(61,120,238,.14);border:1px solid rgba(121,186,245,.25);
  padding:6px 10px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.coste[hidden]{display:none}

.contenedor{width:min(1440px,100%);margin:0 auto;padding:0 clamp(18px,4vw,64px);position:relative;z-index:1}
.fondo-luz{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fondo-luz::before{content:"";position:absolute;width:900px;height:900px;right:-240px;top:-260px;background:radial-gradient(circle,rgba(61,120,238,.16),transparent 62%)}
.fondo-luz::after{content:"";position:absolute;width:700px;height:700px;left:-260px;top:320px;background:radial-gradient(circle,rgba(121,186,245,.07),transparent 65%)}

/* ---------- cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(6,10,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cabecera .contenedor{display:flex;align-items:center;gap:24px;height:84px}
.navlinks{display:flex;gap:clamp(20px,3vw,52px);margin-left:auto;font-size:18px;color:#DCE3F0}
.navlinks a{position:relative;padding:6px 0}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlinks a:hover::after{transform:scaleX(1)}
.acciones{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);margin-left:clamp(18px,3vw,56px);font-size:18px}
.acciones .acceso{display:inline-flex;align-items:center;min-height:44px;color:#DCE3F0}
.acciones .acceso:hover{color:#fff}
.acciones .boton{height:58px;padding:0 34px;font-size:19px}
/* El abridor del cajón: solo existe por debajo de 900 px (ver el @media del final). */
.navabre{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);align-items:center;justify-content:center;font-size:22px}

/* ---------- héroe ---------- */
.heroe{position:relative;padding:clamp(40px,7vw,86px) 0 clamp(48px,6vw,64px)}
.heroe .contenedor{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.insignia{display:inline-flex;align-items:center;font-family:var(--font-tech);font-size:13.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8DB3F7;
  border:1px solid rgba(141,179,247,.34);border-radius:999px;padding:11px 22px;background:rgba(61,120,238,.06)}
h1{font-size:clamp(38px,3.55vw,60px);line-height:1.12;letter-spacing:-.028em;margin:26px 0 20px}
h1 .linea{display:block}
h1 .azul{background:linear-gradient(90deg,#4F86EE,#6FA6F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(17px,1.55vw,23px);color:var(--muted);max-width:30ch;margin:0 0 34px;line-height:1.55}
.ctas{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:34px}
.ctas .boton{height:64px;padding:0 38px;font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:16px}
.chip{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px;border:1px solid var(--line-2);border-radius:8px;font-size:18px;color:#DCE3F0;background:rgba(255,255,255,.015)}
.chip .icono{font-size:24px;color:#C9D3E6}

/* ---------- visor ----------
   La figura del dragón, flotando. SIN la barra de vistas, el «Verificando malla…», el
   escaneo ni las medidas de la maqueta: detrás de esta imagen no hay una malla que
   enseñar, girar ni medir. Llegan con el visor de verdad (PR 2). */
.visor{position:relative;margin:0;border-radius:24px;border:1px solid var(--line-2);background:linear-gradient(180deg,#070D1B,#101B2E);overflow:hidden;aspect-ratio:676/512;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;transform-style:preserve-3d;transition:transform .35s ease}
.visor .flota{position:absolute;inset:0;animation:flotar 7s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.visor .figura{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.visor::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 60%,rgba(7,12,24,.55))}

/* ---------- pasos ---------- */
.pasos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(14,23,48,.35),rgba(6,10,20,0))}
.pasos .contenedor{display:grid;grid-template-columns:repeat(3,1fr)}
.paso{display:flex;align-items:center;gap:22px;padding:36px clamp(12px,2.4vw,40px);position:relative}
.paso+.paso::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:var(--line-2)}
.paso .circulo{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#0E1831;border:1px solid var(--line);font-size:38px;color:#C9D3E6;flex:none;transition:.3s}
.paso:hover .circulo{border-color:rgba(121,186,245,.5);color:#fff;box-shadow:0 0 30px -6px rgba(61,120,238,.6)}
.paso h3{font-size:clamp(18px,1.45vw,22px);margin:0;white-space:nowrap}
.paso p{margin:6px 0 0;color:var(--muted);font-size:14.5px}

/* ---------- secciones ---------- */
/* Las anclas del menú («Cómo funciona», «Ejemplos») y del pie. Sin margen, la sección llega
   DEBAJO de la cabecera fija (84 px) y se come su título. En móvil la cabecera no es fija
   y el margen sobra (ver el @media de 900 px). */
section[id]{scroll-margin-top:96px}
.seccion{padding:clamp(72px,9vw,128px) 0;position:relative}
.seccion.sin-arriba{padding-top:0}
.cab-seccion{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.etiqueta{font-family:var(--font-tech);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#8DB3F7;font-weight:600}
h2{font-size:clamp(30px,3.4vw,48px);line-height:1.12;letter-spacing:-.02em;margin:14px 0 14px}
.cab-seccion p{color:var(--muted);font-size:clamp(16px,1.3vw,19px);margin:0}

/* modos */
.tarjeta{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(14,23,48,.55),rgba(11,18,36,.55));padding:clamp(22px,2.6vw,34px)}
.lista-ia{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fila-ia{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}
.fila-ia .icono{font-size:24px;color:#9EC0FA}
.fila-ia div{flex:1}
.fila-ia div span{display:block;color:var(--muted);font-size:14px}

/* ejemplos */
.galeria{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px}
.ejemplo{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#0A1122;min-height:380px;isolation:isolate}
.ejemplo .img{position:absolute;left:0;right:0;top:0;bottom:56px;width:100%;height:calc(100% - 56px);object-fit:cover;object-position:50% 60%;transition:transform .8s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ejemplo.ej-a{background:linear-gradient(180deg,#070D1B,#131E30)}
.ejemplo.ej-b{background:#091525}
.ejemplo:hover .img{transform:scale(1.05)}
.ejemplo .pie{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(8,13,26,.72);border:1px solid var(--line);padding:10px 14px;border-radius:12px;backdrop-filter:blur(8px);font-size:14.5px}
.ejemplo .pie small{color:var(--muted);font-size:13px}
.ejemplo.tuya{display:grid;place-items:center;text-align:center;padding:30px;border-style:dashed;border-color:var(--line-2);background:radial-gradient(circle at 50% 40%,rgba(61,120,238,.12),transparent 65%)}
.ejemplo.tuya .mas{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;border:1px solid var(--line-2);font-size:28px;color:#9EC0FA}
.ejemplo.tuya p{color:var(--muted);margin:6px 0 18px}
.ejemplo.tuya .boton{height:48px;padding:0 22px}

/* malla verificada */
.verificada{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.panel-malla{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;aspect-ratio:1/1;background:#0A1122}
.panel-malla .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
  filter:grayscale(1) brightness(1.1) contrast(1.3) sepia(.25) hue-rotate(175deg) saturate(2)}
.panel-malla .rejilla{position:absolute;inset:0;background-image:linear-gradient(rgba(121,186,245,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(121,186,245,.22) 1px,transparent 1px);background-size:16px 16px;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 40% 46% at 50% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 40% 46% at 50% 48%,#000 55%,transparent 100%)}
.texto-malla{color:var(--muted);font-size:18px;margin:0}
.comprobaciones{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.comprobaciones li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015);
  transition:opacity .5s ease,transform .5s ease}
.comprobaciones li.pendiente{opacity:.35;transform:translateX(-6px)}
.comprobaciones .icono{font-size:22px;color:var(--green);margin-top:1px}
.comprobaciones .icono .aspa{stroke:#fff;stroke-width:2.2}
.comprobaciones b{display:block}
.comprobaciones span{color:var(--muted);font-size:14.5px}

/* precios */
.estado-precios{color:var(--muted);padding:18px 0}
.estado-precios[hidden]{display:none}
.estado-precios a{color:var(--accent-2);text-decoration:underline}
.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.planes:empty{display:none}
.plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:linear-gradient(180deg,rgba(14,23,48,.5),rgba(11,18,36,.5));transition:.25s}
.plan:hover{border-color:rgba(121,186,245,.35);transform:translateY(-3px)}
.plan.destacado{border-color:rgba(92,143,243,.7);background:linear-gradient(180deg,rgba(38,72,150,.35),rgba(11,18,36,.6));box-shadow:0 24px 60px -30px rgba(61,120,238,.7)}
.plan .marca{position:absolute;top:-13px;left:26px;font-size:12.5px;font-weight:600;background:linear-gradient(180deg,var(--blue-hi),var(--blue-lo));padding:5px 12px;border-radius:999px}
.plan h3{margin:0;font-size:20px}
.precio{font-size:40px;font-weight:600;letter-spacing:-.02em;margin:14px 0 2px;font-variant-numeric:tabular-nums}
.precio small{font-size:16px;font-weight:400;color:var(--muted)}
.creditos{color:#CFE0FF;font-weight:600;margin:6px 0 16px}
.plan ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px;color:var(--muted);font-size:14.5px}
.plan li{display:flex;gap:8px}
.plan li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:8px;flex:none}
.plan .boton{margin-top:auto;height:50px;width:100%}
.plan .parado{margin-top:auto;color:var(--muted);font-size:14.5px}
.gratis-banda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.015)}
.gratis-banda[hidden]{display:none}
.gratis-banda p{margin:0;color:var(--muted)}
.gratis-banda b{color:var(--text)}
.gratis-banda .boton{height:46px;padding:0 20px}
.letra-pequena{margin:16px 0 0;color:var(--faint);font-size:13.5px}

/* llamada final */
.final{text-align:center;border:1px solid var(--line);border-radius:28px;padding:clamp(40px,6vw,80px) clamp(20px,4vw,60px);position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(61,120,238,.28),transparent 60%),linear-gradient(180deg,#0C1530,#08101F)}
.final h2{margin-top:0}
.final p{color:var(--muted);font-size:18px;margin:0 auto 30px;max-width:46ch}
.final .boton{height:62px;padding:0 36px;font-size:19px}

/* ---------- pie ---------- */
.pie-web{border-top:1px solid var(--line);padding:48px 0 36px;color:var(--muted);font-size:15px;position:relative;z-index:1}
.pie-web .contenedor{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.pie-web .lema{max-width:34ch;margin:14px 0 0}
.pie-web h4{color:var(--text);margin:0 0 12px;font-size:15px}
.pie-web ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie-web a:hover{color:#fff}
.pie-web .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:22px;margin-top:10px;font-size:13.5px;color:var(--faint)}
/* El idioma: la píldora de la maqueta, pero de verdad. Abre hacia ARRIBA: está al final. */
.idioma{position:relative}
.idioma-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;color:#DCE3F0}
.idioma-menu{position:absolute;right:0;bottom:calc(100% + 6px);display:grid;min-width:160px;padding:6px;border:1px solid var(--line-2);border-radius:10px;background:#0B1224;box-shadow:0 12px 30px -10px #000c;z-index:5}
.idioma-menu[hidden]{display:none}
.idioma-menu button{text-align:left;padding:10px 12px;border-radius:8px;color:#DCE3F0;min-height:40px}
.idioma-menu button:hover,.idioma-menu button.on{background:rgba(61,120,238,.16);color:#fff}

/* ---------- aparición ----------
   Sin JavaScript todo se ve: la clase `.oculto` solo la pone portada.js, y solo a lo que
   todavía está por debajo de la pantalla. El héroe entra con una animación de CSS, que no
   necesita a nadie. */
.aparece{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.aparece.oculto{opacity:0;transform:translateY(22px)}
.retardo-1{transition-delay:.08s}.retardo-2{transition-delay:.16s}.retardo-3{transition-delay:.24s}
.heroe .aparece{animation:entrar .8s cubic-bezier(.2,.7,.2,1) both}
.heroe .retardo-1{animation-delay:.08s}.heroe .retardo-2{animation-delay:.16s}.heroe .retardo-3{animation-delay:.24s}
@keyframes entrar{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- anchuras ---------- */
@media(max-width:1100px){
  .planes{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:1fr 1fr}
  .galeria .ejemplo:first-child{grid-column:1/-1;min-height:360px}
  .acciones .boton{height:50px;padding:0 22px;font-size:17px}
  .acciones{font-size:16px}
  .navlinks{font-size:16px}
}
/* EL CAJÓN (punto 19). Por debajo de 900 px el nav se recoge y lo abre `#navAbre`. El
   acceso y «Probar gratis» NO entran en el cajón: bajan a una segunda fila de la cabecera,
   a cero toques. Es la regla del punto 14 —el acceso es la única puerta de quien aún no
   tiene cuenta— y la maqueta, que los metía en el menú, no podía cumplirla: el enlace de
   acceso tiene que aparecer UNA vez en el fichero. */
@media(max-width:900px){
  .cabecera{position:relative}
  section[id]{scroll-margin-top:0}
  .cabecera .contenedor{height:auto;flex-wrap:wrap;gap:10px 16px;padding-top:10px;padding-bottom:10px}
  .logo{font-size:20px}
  .navabre{display:flex;margin-left:auto}
  .navlinks{display:none}
  .nav.abierto .navlinks{display:flex}
  .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:6px 18px 14px;
    background:#060A14;border-bottom:1px solid var(--line);font-size:18px;box-shadow:0 18px 30px -12px #000c}
  .navlinks a{display:flex;align-items:center;min-height:48px;padding:0 4px;border-bottom:1px solid var(--line)}
  .navlinks a:last-child{border-bottom:0}
  .acciones{order:3;width:100%;margin-left:0;justify-content:space-between;gap:12px;font-size:15.5px}
  .acciones .boton{height:44px;padding:0 18px;font-size:15.5px}
  .heroe .contenedor{grid-template-columns:1fr}
  h1 .linea{display:inline}
  .paso h3{white-space:normal}
  .sub{max-width:none}
  .ctas{gap:12px}
  .ctas .boton{flex:1 1 100%;height:56px;font-size:18px}
  .chips{gap:10px}
  .chip{height:46px;font-size:15.5px;padding:0 14px;gap:9px}
  .chip .icono{font-size:20px}
  .visor{aspect-ratio:4/3.4}
  .pasos .contenedor{grid-template-columns:1fr}
  .paso{padding:22px 4px;gap:18px}
  .paso+.paso::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .paso .circulo{width:64px;height:64px;font-size:28px}
  .verificada{grid-template-columns:1fr}
  .lista-ia{grid-template-columns:1fr}
  .pie-web .contenedor{grid-template-columns:1fr 1fr}
  .pie-web .contenedor>div:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .planes{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr}
  .galeria .ejemplo{min-height:300px}
  .insignia{font-size:11.5px;padding:9px 16px;letter-spacing:.2em}
  h1{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .aparece.oculto{opacity:1;transform:none}
  .visor .flota{animation:none}
}