/* ============================================================ Ailigrama — hoja de estilos compartida (es / ca / en / fr) ============================================================ */ :root{ /* paleta tomada del logo */ --magenta:#d6006e; --blue:#1289cf; --cyan:#00b0e6; --teal:#009878; --green:#6cb002; --purple:#8e0fa8; --orange:#f57c00; /* neutros */ --bg:#000000; --surface:#0b0b0d; --surface-2:#121215; --line:#212124; --line-soft:#171719; --text:#f4f4f6; --muted:#9c9ca6; --accent:var(--magenta); --accent-soft:rgba(214,0,110,.13); /* escala de espaciado */ --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:96px; --maxw:1180px; --header-h:88px; --ease:cubic-bezier(.4,0,.2,1); /* valores que cambian con el tema */ color-scheme:dark; --header-bg:rgba(0,0,0,.72); --grid-line:rgba(255,255,255,.022); --hover-wash:rgba(255,255,255,.04); --grain-opacity:.035; --mosaic-opacity:.09; --sb-thumb:#2c2c31; --sb-track:#000; } /* ------------------------------------------------------------ Tema claro Se aplica solo con data-theme="light" en . theme.js lo fija antes de pintar, a partir de la preferencia guardada o la del sistema; sin JS, se queda en oscuro. ------------------------------------------------------------ */ :root[data-theme="light"]{ color-scheme:light; --bg:#ffffff; --surface:#f7f7f9; --surface-2:#ffffff; --line:#e3e3e9; --line-soft:#ededf1; --text:#0c0c0f; --muted:#585863; --accent-soft:rgba(214,0,110,.09); --header-bg:rgba(255,255,255,.82); --grid-line:rgba(0,0,0,.04); --hover-wash:rgba(0,0,0,.045); --grain-opacity:.02; --mosaic-opacity:.14; --sb-thumb:#c8c8d0; --sb-track:#f0f0f3; } /* Sobre blanco, el cian y el verde de marca pierden contraste. Se oscurecen solo donde funcionan como texto (pasos y cifras); los bloques de color mantienen el tono original. */ :root[data-theme="light"] .step:nth-child(1){--c:#0f76b4} :root[data-theme="light"] .step:nth-child(2){--c:#4d7f00} :root[data-theme="light"] .step:nth-child(3){--c:#7d0d93} :root[data-theme="light"] .stat:nth-child(1){--c:#0089b3} :root[data-theme="light"] .stat:nth-child(2){--c:#4d7f00} :root[data-theme="light"] .stat:nth-child(4){--c:#bf5d00} *{box-sizing:border-box} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--text); font:400 16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} /* grano muy tenue: rompe la planitud del negro puro */ body::after{ content:"";position:fixed;inset:0;z-index:2; pointer-events:none;opacity:var(--grain-opacity); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{background:var(--accent);color:#fff} /* barra de desplazamiento acorde al tema oscuro */ html{scrollbar-color:var(--sb-thumb) var(--sb-track);scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--sb-track)} ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border:3px solid var(--sb-track)} ::-webkit-scrollbar-thumb:hover{background:var(--muted)} /* foco visible y coherente para navegación por teclado */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-3)} /* ------------------------------------------------------------ Cabecera ------------------------------------------------------------ */ header{ position:sticky;top:0;z-index:50; background:var(--header-bg); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); } .nav{display:flex;align-items:center;gap:var(--s-4);height:var(--header-h)} /* el logotipo completo (mosaico + texto) vive dentro del SVG: se dimensiona por altura y el ancho lo marca la proporción */ .logo{display:flex;align-items:center;flex-shrink:0;color:var(--text)} .logo svg{height:54px;width:auto;display:block} .nav ul{ display:flex;align-items:center;gap:var(--s-3); list-style:none;margin:0 0 0 auto;padding:0; font-size:15px; } .nav ul a{color:var(--muted);position:relative;padding:4px 0;transition:color .2s var(--ease)} .nav ul a:hover{color:var(--text)} /* subrayado que crece al pasar el ratón */ .nav li:not(.lang) a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--accent); transform:scaleX(0);transform-origin:left; transition:transform .25s var(--ease); } .nav li:not(.lang) a:hover::after{transform:scaleX(1)} /* selector de idioma */ .lang{ display:flex;align-items:center;gap:0; font-size:12px;font-weight:600;letter-spacing:.04em; color:var(--muted); } .lang a{transition:color .2s var(--ease)} /* especificidad por encima de `.nav ul a`, que si no pisa el padding */ .nav .lang a,.foot .lang a{padding:4px 10px} .lang a + a{box-shadow:-1px 0 0 var(--line)} .lang a[aria-current]{color:var(--accent)} /* conmutador de tema */ .theme-btn{ display:grid;place-items:center; width:36px;height:36px;padding:0; background:none;border:1px solid var(--line); color:var(--muted);cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease); } .theme-btn:hover{color:var(--text);border-color:var(--text)} .theme-btn svg{ width:18px;height:18px; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; } /* se muestra el icono del tema al que se cambiaría */ .i-moon{display:none} :root[data-theme="light"] .i-sun{display:none} :root[data-theme="light"] .i-moon{display:block} .menu-btn{ display:none;margin-left:auto; background:none;border:0;color:var(--text); font-size:22px;line-height:1;cursor:pointer;padding:8px; } /* franja mosaico, eco del logo */ .mosaic{display:flex;height:5px;width:100%} .mosaic i{flex:1} .mosaic i:nth-child(1){background:var(--blue)} .mosaic i:nth-child(2){background:var(--cyan)} .mosaic i:nth-child(3){background:var(--teal)} .mosaic i:nth-child(4){background:var(--green)} .mosaic i:nth-child(5){background:var(--purple)} .mosaic i:nth-child(6){background:var(--orange)} .mosaic i:nth-child(7){background:var(--magenta)} /* ------------------------------------------------------------ Hero ------------------------------------------------------------ */ .hero{ padding:var(--s-6) 0 var(--s-5); position:relative;overflow:hidden; border-bottom:1px solid var(--line-soft); /* retícula tenue: da estructura y repite la cuadrícula del logo */ background-image: repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 108px), repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 108px); background-position:center top; } /* halo magenta difuso */ .hero::before{ content:"";position:absolute;inset:-40% 40% auto -15%;height:600px; background:radial-gradient(circle at 30% 40%,var(--accent-soft),transparent 65%); pointer-events:none; } /* mosaico del logo, en grande, como marca de agua */ .hero::after{ content:"";position:absolute; top:-70px;right:-70px; --sq:108px; width:calc(var(--sq) * 5);height:calc(var(--sq) * 5); opacity:var(--mosaic-opacity);pointer-events:none; background-repeat:no-repeat; background-image: linear-gradient(var(--blue),var(--blue)), linear-gradient(var(--cyan),var(--cyan)), linear-gradient(var(--teal),var(--teal)), linear-gradient(var(--purple),var(--purple)), linear-gradient(var(--green),var(--green)), linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--magenta),var(--magenta)); background-size: var(--sq) var(--sq), var(--sq) var(--sq), var(--sq) var(--sq), var(--sq) var(--sq), var(--sq) var(--sq), var(--sq) var(--sq), calc(var(--sq) * 2) calc(var(--sq) * 2); background-position: calc(var(--sq) * 2) 0, calc(var(--sq) * 3) calc(var(--sq) * 1), 0 calc(var(--sq) * 2), calc(var(--sq) * 2) calc(var(--sq) * 2), calc(var(--sq) * 1) calc(var(--sq) * 3), calc(var(--sq) * 1) calc(var(--sq) * 4), calc(var(--sq) * 3) calc(var(--sq) * 3); } .hero .wrap{position:relative;z-index:1} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(214,0,110,.28); padding:7px 14px;margin-bottom:var(--s-3); } .eyebrow::before{ content:"";width:7px;height:7px;background:var(--accent);flex-shrink:0; } h1{ font-size:clamp(36px,6vw,64px); line-height:1.04; letter-spacing:-.035em; font-weight:700; margin:0 0 var(--s-3); max-width:19ch; text-wrap:balance; } .lead{ font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--muted); max-width:58ch; margin:0 0 var(--s-4); text-wrap:pretty; } .cta{display:flex;gap:12px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;justify-content:center; padding:14px 30px; font-weight:600;font-size:15px;letter-spacing:.01em; border:1px solid transparent; cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease), border-color .2s var(--ease),transform .2s var(--ease); } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:#ee1a80} .btn-ghost{border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--text);background:var(--hover-wash)} /* ------------------------------------------------------------ Secciones ------------------------------------------------------------ */ section{ padding:var(--s-6) 0; /* compensa la cabecera fija al saltar a un ancla */ scroll-margin-top:calc(var(--header-h) + 5px); } .alt{background:var(--surface);border-block:1px solid var(--line-soft)} .section-head{max-width:60ch;margin-bottom:var(--s-5)} /* marca de color sobre cada titular */ .section-head::before{ content:"";display:block; width:52px;height:4px;margin-bottom:var(--s-3); background:linear-gradient(90deg, var(--blue) 0 33.33%, var(--green) 33.33% 66.66%, var(--magenta) 66.66% 100%); } h2{ font-size:clamp(28px,3.8vw,40px); line-height:1.15; letter-spacing:-.025em; font-weight:700; margin:0 0 var(--s-2); text-wrap:balance; } .section-head p{color:var(--muted);margin:0;font-size:17px;text-wrap:pretty} /* ------------------------------------------------------------ Tarjetas ------------------------------------------------------------ */ .grid{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fit,minmax(290px,1fr))} .card{ --c:var(--magenta); position:relative; background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line); padding:var(--s-4) var(--s-3) var(--s-3); transition:transform .25s var(--ease),border-color .25s var(--ease); } .grid .card:nth-child(6n+1){--c:var(--blue)} .grid .card:nth-child(6n+2){--c:var(--green)} .grid .card:nth-child(6n+3){--c:var(--magenta)} .grid .card:nth-child(6n+4){--c:var(--cyan)} .grid .card:nth-child(6n+5){--c:var(--purple)} .grid .card:nth-child(6n+6){--c:var(--orange)} /* barra superior de color: visible siempre, crece al pasar el ratón */ .card::before{ content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px; background:var(--c); transform:scaleX(.16);transform-origin:left; transition:transform .35s var(--ease); } .card{transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .card:hover{ transform:translateY(-4px); border-color:var(--c); box-shadow:0 16px 44px -18px color-mix(in srgb,var(--c) 65%,transparent); } .card:hover::before{transform:scaleX(1)} .card .ico{ width:44px;height:44px; background:var(--c);color:#fff; display:grid;place-items:center; font-size:20px; margin-bottom:var(--s-3); } .card h3{margin:0 0 10px;font-size:19px;letter-spacing:-.015em;font-weight:700} .card p{margin:0;color:var(--muted);font-size:15px;line-height:1.65} /* ------------------------------------------------------------ Proceso ------------------------------------------------------------ */ .steps{ counter-reset:s; display:grid;gap:var(--s-4) var(--s-3); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .step{ --c:var(--line); padding-top:var(--s-2); border-top:3px solid var(--c); } .step:nth-child(1){--c:var(--blue)} .step:nth-child(2){--c:var(--green)} .step:nth-child(3){--c:var(--purple)} .step:nth-child(4){--c:var(--magenta)} .step::before{ counter-increment:s;content:"0" counter(s); display:block; font-size:13px;font-weight:700;letter-spacing:.14em; color:var(--c); margin-bottom:10px; font-variant-numeric:tabular-nums; } .step h3{margin:0 0 8px;font-size:18px;letter-spacing:-.015em} .step p{margin:0;color:var(--muted);font-size:15px} /* ------------------------------------------------------------ Cifras ------------------------------------------------------------ */ .stats{ display:grid;gap:var(--s-4) var(--s-2); grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); text-align:center; } .stat{--c:var(--accent);position:relative} /* finas separaciones verticales entre cifras (solo en pantallas anchas) */ @media (min-width:721px){ .stat + .stat::before{ content:"";position:absolute;left:calc(var(--s-2) / -2 - 1px);top:12%;bottom:12%; width:1px;background:var(--line); } } .stat:nth-child(1){--c:var(--cyan)} .stat:nth-child(2){--c:var(--green)} .stat:nth-child(3){--c:var(--magenta)} .stat:nth-child(4){--c:var(--orange)} .stat strong{ display:block; font-size:clamp(38px,5vw,52px); line-height:1; letter-spacing:-.04em; font-weight:700; color:var(--c); font-variant-numeric:tabular-nums; margin-bottom:10px; } .stat span{ color:var(--muted);font-size:14px; letter-spacing:.02em; } /* ------------------------------------------------------------ Contacto ------------------------------------------------------------ */ .contact-box{ background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line); padding:var(--s-4); display:grid;gap:var(--s-3) var(--s-5); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:start; position:relative; } .contact-box::before{ content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px; background:linear-gradient(90deg, var(--blue) 0 14.28%, var(--cyan) 14.28% 28.56%, var(--teal) 28.56% 42.84%, var(--green) 42.84% 57.12%, var(--purple) 57.12% 71.4%, var(--orange) 71.4% 85.68%, var(--magenta) 85.68% 100%); } .contact-box p{margin:0;font-size:16px} .contact-box strong{ display:block; font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);font-weight:700; margin-bottom:6px; } .contact-box a{transition:opacity .2s var(--ease)} .contact-box a:hover{opacity:.75;text-decoration:underline;text-underline-offset:3px} /* ------------------------------------------------------------ Pie ------------------------------------------------------------ */ footer{ border-top:1px solid var(--line); padding:var(--s-4) 0; color:var(--muted);font-size:14px; } .foot{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between} .foot .lang a:hover{color:var(--text)} /* ------------------------------------------------------------ Adaptación a pantallas pequeñas ------------------------------------------------------------ */ @media (max-width:900px){ :root{--s-6:64px;--s-5:48px} .nav ul{display:none} .menu-btn{display:block} .nav ul.open{ display:flex;flex-direction:column;align-items:flex-start; position:absolute;top:var(--header-h);left:0;right:0; background:var(--bg); border-bottom:1px solid var(--line); padding:var(--s-2) var(--s-3) var(--s-3); gap:var(--s-2);margin:0; font-size:17px; } /* el selector de idioma pasa a ocupar su propia fila */ .nav ul.open .lang{ width:100%;margin-top:var(--s-1);padding-top:var(--s-2); border-top:1px solid var(--line); } .nav ul.open .lang a{padding:4px 12px 4px 0} .nav ul.open .lang a + a{box-shadow:none} .hero::after{--sq:70px;top:-40px;right:-90px} .contact-box{padding:var(--s-3)} .foot{justify-content:flex-start} } @media (max-width:560px){ .hero::after{opacity:.06} .stats{grid-template-columns:repeat(2,1fr);text-align:left} .card{padding:var(--s-3)} } /* ------------------------------------------------------------ Animaciones ligadas al scroll Van dentro de @supports: si el navegador no las admite (Safari, Firefox), el contenido se muestra normal, nunca oculto. ------------------------------------------------------------ */ @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .section-head,.card,.step,.stat,.contact-box{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 5% cover 28%; } /* se anima `translate`, no `transform`, para no pisar el translateY(-4px) del hover de las tarjetas */ @keyframes reveal{ from{opacity:0;translate:0 26px} to{opacity:1;translate:none} } /* la cabecera se compacta al bajar */ .nav{ animation:nav-shrink linear both; animation-timeline:scroll(root); animation-range:0 180px; } @keyframes nav-shrink{to{height:72px}} } } /* respeta la preferencia del sistema de reducir animaciones */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }