/* ═══════════════════════════════════════════════════════════════════ ATLAS — cromo común de las páginas del Atlas y de how-it-works. Aquí vive lo que antes solo tenía la landing: tema claro/oscuro, barra de navegación que se esconde al dejar de hacer scroll, y la cinta de idiomas. Se carga DESPUÉS de voice-library.css, para poder sobreescribir sus tokens sin subir la especificidad. ═══════════════════════════════════════════════════════════════════ */ /* ── TEMA OSCURO ────────────────────────────────────────────────── voice-library.css define un :root solo claro (--bg:#FAF9FC). En vez de reescribirlo, el tema oscuro se activa con una clase en , igual que la landing usa .theme-light. Se comparte la misma clave de localStorage ("easilyai_theme"), así que la elección viaja entre la landing y el Atlas. */ html.theme-dark{ --bg:#08080f; --card:#101019; --bd:rgba(255,255,255,.09); --bd2:rgba(255,255,255,.16); --t1:#ffffff; --t2:rgba(255,255,255,.62); --t3:rgba(255,255,255,.36); --brand-lilac:#C7B0FF; } html.theme-dark body{background:var(--bg);color:var(--t1);} /* El h3 de las guías va en violeta de marca; sobre fondo oscuro ese tono queda por debajo de 4.5:1, así que se aclara. */ html.theme-dark article.body h3{color:var(--brand-lilac);} html.theme-dark .tier-tag.standard{background:rgba(63,199,176,.18);color:#5FE0C8;} html.theme-dark .tier-tag.deluxe{background:rgba(130,87,230,.22);color:var(--brand-lilac);} /* ── El degradado de los acentos ────────────────────────────────── --brand-text tenía su ÚNICA definición dentro de ".vl-widget-scope.theme-light". Al quitar esa clase en oscuro, la variable se quedaba sin valor: el background del desaparecía y, como esos titulares van con -webkit-text-fill-color:transparent, el acento ("in Zulu, Swahili, Amharic") se volvía invisible en vez de cambiar de color. Basta con darle un valor en la raíz: en claro sigue ganando el que define .vl-widget-scope.theme-light, que tiene más especificidad. */ :root{ --brand-text:linear-gradient(90deg, var(--brand-b) 0%, var(--brand-a) 38%, var(--brand-c) 70%, var(--brand-b) 100%); } /* El widget de voces NO se arregla con tokens. Viene copiado de la landing, donde el oscuro es la base y ".theme-light .vp-*" lo aclara — pero esas reglas usan colores literales (el panel a rgba(255,255,255,.7), las tarjetas en blanco), no variables. Sobreescribir --t1 y compañía no cambiaba nada: por eso la consola seguía saliendo clara sobre la página oscura. La clase .theme-light la quita y la pone atlas-chrome.js según el tema; el CSS base del widget ya es el oscuro correcto. */ /* ── BARRA DE NAVEGACIÓN ────────────────────────────────────────── Píldora flotante centrada, como la de la landing: no llega a los bordes, tiene aire por arriba y esquinas totalmente redondeadas. Aparece mientras se hace scroll y se retira 1,2 s después de parar, para no tapar el texto de un artículo largo. */ .atlas-nav{ position:fixed;top:0;left:0;right:0;z-index:900; display:flex;justify-content:center; padding:16px 24px; /* este padding es el aire de arriba */ pointer-events:none; /* solo la píldora recibe el ratón */ transition:transform .45s cubic-bezier(.4,0,.2,1); } .atlas-nav.is-hidden{transform:translateY(-130%);} .atlas-nav-inner{ pointer-events:auto; position:relative; /* ancla del panel de hamburguesa */ display:flex;align-items:center;gap:clamp(12px,1.6vw,24px); max-width:1180px;width:100%; height:52px;padding:0 8px 0 18px; border-radius:100px; /* color-mix sobre --bg: la píldora se tiñe sola del tema activo sin necesidad de dos juegos de reglas. */ background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--bd2); box-shadow:0 8px 32px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06); } html.theme-dark .atlas-nav-inner{ box-shadow:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } .atlas-brand{ font-family:var(--f-disp);font-weight:800; font-size:16px;letter-spacing:-.02em; color:var(--t1);text-decoration:none;flex-shrink:0; } .atlas-nav-links{ display:flex;align-items:center;gap:clamp(10px,1.4vw,20px); margin-inline:auto; } .atlas-nav-links a{ font-family:var(--f-mono);font-size:11px; letter-spacing:.13em;text-transform:uppercase; color:var(--t2);text-decoration:none;white-space:nowrap; transition:color .25s ease; } .atlas-nav-links a:hover{color:var(--t1);} /* ── Desplegable del Atlas ──────────────────────────────────────── "Atlas" abre las 12 guías sin tener que volver a la portada. Se abre al pasar el ratón y también al pulsar, para que funcione con teclado y en táctil, donde no hay hover. */ .atlas-menu{position:relative;} .atlas-menu-btn{ display:inline-flex;align-items:center;gap:5px; font-family:var(--f-mono);font-size:11px; letter-spacing:.13em;text-transform:uppercase; color:var(--t2);background:none;border:0;padding:0;cursor:pointer; white-space:nowrap;transition:color .25s ease; } .atlas-menu-btn:hover, .atlas-menu[data-open="true"] .atlas-menu-btn{color:var(--t1);} .atlas-menu-btn svg{width:9px;height:9px;transition:transform .25s ease;} .atlas-menu[data-open="true"] .atlas-menu-btn svg{transform:rotate(180deg);} .atlas-menu-panel{ position:absolute;top:calc(100% + 14px);left:50%; transform:translateX(-50%) translateY(-6px); min-width:270px;padding:8px; border-radius:16px; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--bd2); box-shadow:0 16px 44px rgba(0,0,0,.22); opacity:0;visibility:hidden; transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s; } html.theme-dark .atlas-menu-panel{box-shadow:0 16px 44px rgba(0,0,0,.6);} .atlas-menu:hover .atlas-menu-panel, .atlas-menu[data-open="true"] .atlas-menu-panel{ opacity:1;visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity .22s ease,transform .22s ease,visibility 0s; } /* Puente invisible: sin él, el hueco de 14px entre el botón y el panel cierra el menú al bajar el ratón hacia él. */ .atlas-menu::after{ content:'';position:absolute;top:100%;left:0;right:0;height:16px; } .atlas-menu-panel a{ display:block;padding:9px 12px;border-radius:9px; font-family:var(--f-body);font-size:13px;letter-spacing:0; text-transform:none;color:var(--t2);text-decoration:none; transition:background .2s ease,color .2s ease; } .atlas-menu-panel a:hover{background:var(--bd);color:var(--t1);} .atlas-menu-sep{ height:1px;background:var(--bd);margin:6px 4px; } .atlas-nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;} /* ── Conmutador de tema ─────────────────────────────────────────── Mismo componente que la landing (.tt + .tt-thumb + iconos .ti): raíl de 34×18 con pulgar que se desliza y cambia de color. Se copia aquí porque las guías no cargan la hoja de la landing. */ .ttw{display:flex;align-items:center;gap:6px;flex-shrink:0;} .tt{ position:relative;width:34px;height:18px;border-radius:9px;cursor:pointer; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15); transition:all .3s; } .tt-thumb{ position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); transition:all .3s cubic-bezier(.4,0,.2,1); box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 5px rgba(139,92,246,.4); } .tt.light{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.12);} .tt.light .tt-thumb{ left:18px;background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 1px 3px rgba(0,0,0,.15),0 0 5px rgba(251,191,36,.5); } .ti{width:11px;height:11px;opacity:.35;transition:opacity .3s,filter .3s;} .ti.on{opacity:1;filter:drop-shadow(0 0 3px currentColor);} .ti-moon{color:#8b5cf6;} .ti-sun{color:#fbbf24;} .atlas-btn{ font-family:var(--f-mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase; text-decoration:none;white-space:nowrap; padding:9px 15px;border-radius:100px; transition:opacity .25s ease,background .25s ease,color .25s ease; } .atlas-btn--ghost{color:var(--t1);border:1px solid var(--bd2);} .atlas-btn--ghost:hover{border-color:var(--t3);} .atlas-btn--solid{color:#fff;border:0;background:var(--brand);} .atlas-btn--solid:hover{opacity:.88;} /* Aire para que el contenido no arranque bajo la píldora. */ body{padding-top:84px;} /* ── Menú de hamburguesa ─────────────────────────────────────────── Por debajo de 1000px los enlaces centrales se ocultan y la píldora se quedaba sin navegación: no había forma de llegar a las guías sin volver a la portada. El panel lo construye atlas-chrome.js CLONANDO el marcado que ya existe, para no repetirlo en 17 páginas y para que una guía nueva en el desplegable aparezca aquí sola. */ .atlas-burger{ display:none; flex-direction:column;justify-content:center;gap:4px; width:34px;height:34px;padding:0 6px; background:none;border:0;cursor:pointer;flex-shrink:0; } .atlas-burger span{ display:block;width:100%;height:1.5px;border-radius:2px; background:var(--t1); transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease; } .atlas-nav-inner[data-menu="open"] .atlas-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg);} .atlas-nav-inner[data-menu="open"] .atlas-burger span:nth-child(2){opacity:0;} .atlas-nav-inner[data-menu="open"] .atlas-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);} .atlas-mobile{ position:absolute;top:calc(100% + 10px);left:0;right:0; max-height:min(70vh,560px);overflow-y:auto; padding:8px;border-radius:20px; /* Opaco, no translucido como la pildora: este panel cubre media pantalla y con transparencia el titulo de la pagina se leia a traves de los enlaces. */ background:var(--bg); border:1px solid var(--bd2); box-shadow:0 16px 44px rgba(0,0,0,.22); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s; } html.theme-dark .atlas-mobile{box-shadow:0 16px 44px rgba(0,0,0,.6);} .atlas-nav-inner[data-menu="open"] .atlas-mobile{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity .22s ease,transform .22s ease,visibility 0s; } .atlas-mobile a{ display:block;padding:11px 14px;border-radius:10px; font-family:var(--f-body);font-size:14px;letter-spacing:0; text-transform:none;color:var(--t2);text-decoration:none; transition:background .2s ease,color .2s ease; } .atlas-mobile a:hover{background:var(--bd);color:var(--t1);} .atlas-mobile .atlas-menu-sep{height:1px;background:var(--bd);margin:6px 4px;} .atlas-mobile-subbtn{ display:flex;align-items:center;justify-content:space-between; width:100%;padding:11px 14px;border-radius:10px; font-family:var(--f-body);font-size:14px; color:var(--t1);background:none;border:0;cursor:pointer;text-align:left; } .atlas-mobile-subbtn:hover{background:var(--bd);} .atlas-mobile-subbtn svg{width:12px;height:12px;transition:transform .25s ease;} .atlas-mobile-sub[data-open="true"] .atlas-mobile-subbtn svg{transform:rotate(180deg);} .atlas-mobile-sublist{display:none;margin:2px 0 6px 16px;padding-left:6px;border-left:1px solid var(--bd);} .atlas-mobile-sub[data-open="true"] .atlas-mobile-sublist{display:block;} .atlas-mobile-sublist a{font-size:13px;padding:9px 12px;} /* LOG IN clonado: solo hace falta cuando el CSS lo ha quitado del riel. Va con ".atlas-mobile a" delante porque esa regla ya vale 0,1,1 y una clase suelta no la gana; y el separador lleva clase propia en vez de :last-of-type, que ahi dentro casa con el bloque del submenu. */ .atlas-mobile a.atlas-mobile-login, .atlas-mobile .atlas-mobile-sep{display:none;} @media (max-width:560px){ .atlas-mobile a.atlas-mobile-login{display:block;color:var(--t1);font-weight:600;} .atlas-mobile .atlas-mobile-sep{display:block;height:1px;background:var(--bd);margin:6px 4px;} } @media (prefers-reduced-motion:reduce){ .atlas-burger span,.atlas-mobile,.atlas-mobile-subbtn svg{transition:none;} } /* Por debajo de 1000px se ocultan los enlaces centrales y aparece la hamburguesa, que los devuelve todos. */ @media (max-width:1000px){ .atlas-nav-links{display:none;} .atlas-nav-inner{justify-content:space-between;max-width:560px;} .atlas-btn{padding:8px 12px;font-size:10px;} .atlas-burger{display:flex;} } /* Por debajo de 560px la marca, la hamburguesa, el tema y los dos accesos ya no caben: LOG IN se salia de la pildora y arrastraba a SIGN UP fuera de la pantalla. Se retira del riel y el JS lo pone dentro del panel, donde no se pierde. */ @media (max-width:560px){ .atlas-nav-inner{gap:8px;padding-right:6px;} .atlas-btn--ghost{display:none;} } /* Por encima, los enlaces están a la vista: el panel no debe existir. */ @media (min-width:1001px){ .atlas-mobile{display:none;} } /* ── CINTA DE IDIOMAS ───────────────────────────────────────────── Copiada de languages.html, que era la única que la tenía. Va justo debajo del titular de cada página: cierra el bloque de cabecera y separa del cuerpo del artículo. */ .marquee-wrap{ border-block:1px solid var(--bd); overflow:hidden;white-space:nowrap; padding-block:clamp(14px,1.8vw,18px); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee-track{ display:inline-flex;gap:0; animation:scroll-marquee 55s linear infinite; } .marquee-track span{ font-family:var(--f-disp);font-weight:800;font-size:var(--fs-2xl); letter-spacing:-.02em;color:var(--t3);padding-inline:.5em; background:var(--brand-text,linear-gradient(90deg,var(--brand-b) 0%,var(--brand-a) 50%,var(--brand-c) 100%)); background-size:220% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;opacity:.75; } @keyframes scroll-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} .atlas-nav{transition:none;} } /* ── Enlaces dentro del texto ───────────────────────────────────── voice-library.css no define color para los del cuerpo, asi que heredaban el azul por defecto del navegador (#0000EE). Sobre el fondo oscuro eso es practicamente ilegible, y en claro desentona con la paleta. Afecta a las 13 paginas, no solo a las nuevas. */ article.body a, article.body a:visited{ color:var(--brand-c); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .2s ease; } article.body a:hover{color:var(--brand-b);} /* En oscuro el violeta de marca se queda por debajo de 4.5:1 sobre casi negro, asi que se aclara al lila. */ html.theme-dark article.body a, html.theme-dark article.body a:visited{color:#C7B0FF;} html.theme-dark article.body a:hover{color:#EA5E8B;} /* ── Tabla comparativa y nota de fecha ───────────────────────────── Las páginas de comparación necesitan una tabla y un aviso de cuándo se verificaron los datos del competidor. Ninguna de las dos clases existía: voice-library.css no define estilos de . La nota de fecha no es decorativa. Los precios de terceros caducan, y decir en qué fecha se comprobaron es la diferencia entre una comparativa honesta y una que envejece mintiendo. */ .cmp-note{ font-size:var(--fs-xs); color:var(--t2); background:var(--acc-bg, rgba(130,87,230,.07)); border-left:3px solid var(--brand-c); padding:14px 18px; margin:0 auto 28px; max-width:900px; border-radius:0 8px 8px 0; } .cmp-note strong{color:var(--t1);} .rates-table{ width:100%;max-width:900px; margin:24px auto 32px; border-collapse:collapse; font-size:var(--fs-xs); /* En móvil la tabla se desborda en vez de aplastar las columnas; el contenedor es el que hace scroll. */ display:block;overflow-x:auto; } .rates-table th, .rates-table td{ padding:11px 14px; border-bottom:1px solid var(--bd); text-align:left; vertical-align:top; } .rates-table thead th{ font-family:var(--f-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--t3); border-bottom:1px solid var(--bd2); white-space:nowrap; } /* La primera columna es la etiqueta de la fila: se atenúa para que las dos de datos sean las que se leen. */ .rates-table tbody td:first-child{color:var(--t2);width:38%;} .rates-table tbody td:nth-child(2){color:var(--t1);font-weight:600;} .rates-table tbody tr:last-child td{border-bottom:0;} /* ── Cierre de pagina ────────────────────────────────────────────── La misma llamada a la accion que cierra how-it-works. Se llama .end-cta y no .cta porque voice-library.css ya usa .cta para un bloque con fondo degradado; reutilizar el nombre le pondria el degradado encima. */ .end-cta{ padding-block:clamp(44px,6vw,80px) clamp(56px,8vw,120px); border-top:1px solid var(--bd);text-align:center; } .end-cta h2{ font-family:var(--f-disp);font-weight:800; font-size:var(--fs-4xl);letter-spacing:-.04em;line-height:1.02; text-wrap:balance;margin:0 0 var(--fs-sm);color:var(--t1); max-width:none; } .end-cta p{ color:var(--t2);font-size:var(--fs-sm); max-width:52ch;margin:0 auto clamp(24px,3vw,34px); } .end-cta .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--f-body);font-weight:700;font-size:var(--fs-xs); color:#fff;text-decoration:none; padding:14px 30px;border-radius:14px; background:var(--brand);background-size:160% 100%;background-position:0% 50%; box-shadow:0 10px 34px -10px rgba(234,94,139,.5); transition:background-position .6s cubic-bezier(.22,1,.36,1),transform .3s ease; } .end-cta .btn:hover{background-position:100% 50%;transform:translateY(-2px);color:#fff;} .end-cta .btn:focus-visible{outline:2px solid var(--t1);outline-offset:4px;} @media (prefers-reduced-motion:reduce){ .end-cta .btn{transition:none;} }