:root {
--pensamos-ink: #1f2a44;
--pensamos-ink-soft: #5f6b84;
--pensamos-deep: #0d1c31;
--pensamos-accent: #f08a24;
--pensamos-soft: #eef6fb;
--pensamos-surface: #ffffff;
--pensamos-surface-soft: #f8fbfe;
--pensamos-line: #dde6f0;
--pensamos-line-strong: #cad7e6;
--pensamos-success: #2b8f6e;
--pensamos-shadow: 0 18px 40px rgba(13, 28, 49, 0.08);
--pensamos-shadow-strong: 0 34px 80px rgba(13, 28, 49, 0.12);
--pensamos-radius-md: 24px;
--pensamos-radius-lg: 30px;
--pensamos-radius-pill: 999px;
--pensamos-space-1: 8px;
--pensamos-space-2: 12px;
--pensamos-space-3: 16px;
--pensamos-space-4: 20px;
--pensamos-space-5: 24px;
--pensamos-space-6: 32px;
--pensamos-space-7: 40px;
--pensamos-space-8: 56px;
--pensamos-space-9: 72px;
--pensamos-content-max: 1320px;
--pensamos-section-gap: clamp(56px, 8vw, 88px);
--pensamos-radius: var(--pensamos-radius-md);
--pensamos-home-bg: radial-gradient(circle at top left, rgba(59, 130, 246, 0.2), transparent 30%), linear-gradient(180deg, #eef6fb 0%, #f9fbfd 55%, #ffffff 100%);
--pensamos-highlight: #4f7cff;
}
.pensamos-surface #masthead,
.pensamos-surface .site-header,
.pensamos-surface #ast-desktop-header,
.pensamos-surface #ast-mobile-header,
.pensamos-surface .ast-above-header-wrap,
.pensamos-surface .ast-primary-header-bar,
.pensamos-surface .ast-below-header-wrap {
display: none !important;
}
.pensamos-surface #content,
.pensamos-surface .site-content {
margin: 0;
padding: 0;
}
.pensamos-surface .ast-container,
.pensamos-surface .site-content > .ast-container {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
.pensamos-surface #primary.content-area {
width: 100%;
margin: 0;
padding: 0;
}
.pensamos-surface.ast-plain-container.ast-no-sidebar #primary,
.pensamos-surface.ast-plain-container.ast-no-sidebar #primary.content-area {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.pensamos-surface #page {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
background: #ffffff;
}
.pensamos-kids-legal-footer {
margin-top: auto;
padding: 16px 20px;
border-top: 1px solid #dbe6fb;
background: #fff;
font-size: 0.82rem;
text-align: center;
}
.pensamos-kids-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.pensamos-kids-legal-footer a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 4px 6px;
color: #425579;
}
.pensamos-kids-legal-footer a:focus-visible { outline: 3px solid #4f7cff; outline-offset: 3px; }
body {
color: var(--pensamos-ink);
background: #ffffff;
font-feature-settings: "liga" 1, "kern" 1;
text-rendering: optimizeLegibility;
}
a,
button,
[role="button"],
input[type="submit"],
input[type="button"] {
-webkit-tap-highlight-color: transparent;
}
.page .entry-header {
display: none;
}
.pensamos-shell {
width: min(var(--pensamos-content-max), calc(100% - clamp(24px, 6vw, 56px)));
margin: 0 auto;
}
.pensamos-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.pensamos-button,
.pensamos-button:visited {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 26px;
border-radius: var(--pensamos-radius-pill);
background: linear-gradient(135deg, var(--pensamos-deep) 0%, color-mix(in srgb, var(--pensamos-deep) 74%, var(--pensamos-highlight) 26%) 100%);
color: #fff;
font-weight: 700;
font-size: 0.97rem;
letter-spacing: -0.015em;
text-decoration: none;
box-shadow: 0 14px 28px rgba(13, 28, 49, 0.14);
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.pensamos-button:hover,
.pensamos-button:focus-visible {
transform: translateY(-2px);
box-shadow: 0 18px 32px rgba(13, 28, 49, 0.18);
}
.pensamos-button--ghost,
.pensamos-button--ghost:visited {
background: rgba(255, 255, 255, 0.9);
color: var(--pensamos-deep);
border: 1px solid rgba(23, 50, 77, 0.12);
box-shadow: 0 8px 20px rgba(13, 28, 49, 0.05);
}
.pensamos-text-link,
.pensamos-text-link:visited {
color: var(--pensamos-deep);
font-weight: 700;
text-decoration: none;
letter-spacing: -0.015em;
}
.pensamos-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pensamos-success);
margin-bottom: 16px;
}
.pensamos-note {
padding: 28px;
background: var(--pensamos-surface);
border: 1px solid var(--pensamos-line);
border-radius: var(--pensamos-radius);
box-shadow: var(--pensamos-shadow);
}
.pensamos-course-guide__tracker-shell {
margin-bottom: 28px;
}
.pensamos-course-guide__tracker-shell .pensamos-route-tracker {
margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.pensamos-button {
transition: none !important;
}
}
@media (max-width: 480px) {
.pensamos-shell {
width: calc(100% - 24px);
}
}
body.pensamos-kids-surface-page {
background: #f8fbff;
}
body.pensamos-kids-surface-page #masthead,
body.pensamos-kids-surface-page .site-header,
body.pensamos-kids-surface-page #ast-desktop-header,
body.pensamos-kids-surface-page #ast-mobile-header,
body.pensamos-kids-surface-page .ast-above-header-wrap,
body.pensamos-kids-surface-page .ast-primary-header-bar,
body.pensamos-kids-surface-page .ast-below-header-wrap,
body.pensamos-kids-experience-page .site-footer,
body.pensamos-kids-experience-page .ast-above-footer-wrap {
display: none !important;
}
body.pensamos-kids-surface-page #content,
body.pensamos-kids-surface-page .site-content,
body.pensamos-kids-surface-page #primary,
body.pensamos-kids-surface-page .site-main,
body.pensamos-kids-surface-page .site-content > .ast-container {
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.pensamos-kids-experience {
min-height: 100vh;
}
.pensamos-kids-compass-app .kids-app__brand,
.pensamos-kids-compass-app .kids-app__profile,
.pensamos-kids-compass-app .kids-app__nav,
.pensamos-kids-compass-app .kids-app__suggestions-entry,
.pensamos-kids-compass-app .kids-app__profile-fab {
text-decoration: none;
}
.pensamos-kids-compass-app .kids-app__brand {
color: #0d1c31;
}
.pensamos-kids-compass-app .kids-app__profile,
.pensamos-kids-compass-app .kids-app__nav {
color: #51618a;
}
.pensamos-kids-compass-app .kids-app__profile:hover,
.pensamos-kids-compass-app .kids-app__profile:focus-visible,
.pensamos-kids-compass-app .kids-app__nav:hover,
.pensamos-kids-compass-app .kids-app__nav:focus-visible,
.pensamos-kids-compass-app .kids-app__nav.is-active {
color: #0d1c31;
}
.pensamos-kids-compass-app .kids-app__nav.is-active {
border-color: #c7d6f7;
background: #eaf1ff;
}
.pensamos-kids-compass-app .kids-app__main {
max-width: 720px;
}
.pensamos-kids-compass-app .kids-app__head {
margin-top: 18px;
}
.pensamos-kids-compass-app .pensamos-kids-level-path {
margin-top: 34px;
padding-bottom: 52px;
}
.pensamos-kids-compass-app .pensamos-kids-level-path .kids-app__node {
color: #1f2a44;
text-decoration: none;
}
.pensamos-kids-compass-app .kids-app__node[data-tone="brujula"] {
background: #fff0a8;
box-shadow: 0 6px 0 #efc94f;
}
.pensamos-kids-compass-app .kids-app__node[data-tone="brujula"]:hover {
box-shadow: 0 8px 0 #efc94f;
}
.pensamos-kids-compass-app .kids-app__node[data-tone="brujula"]:active {
box-shadow: 0 0 0 #efc94f;
}
.pensamos-kids-compass-app .pensamos-kids-level-path .kids-app__node-icon {
font-size: 1.45rem;
font-weight: 900;
letter-spacing: 0.02em;
}
.pensamos-kids-compass-app .pensamos-kids-level-path .kids-app__node-icon.has-emoji {
font-size: 1.9rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1;
}
.pensamos-kids-compass-app .pensamos-kids-level-path .kids-app__node-label {
max-width: 210px;
text-align: center;
line-height: 1.25;
}
.pensamos-kids-compass-app .pensamos-kids-experience__tracker {
margin-top: 18px;
}
body.jm-open {
overflow: hidden;
}
.pensamos-alex-level-modal .juego-memoria__dialog {
width: min(720px, 100%);
max-height: calc(100dvh - 32px);
}
.pensamos-alex-level-modal .juego-memoria__head {
padding-right: 42px;
}
.pensamos-alex-level-modal .juego-memoria__head h2 {
margin: 6px 0 2px;
color: #0d1c31;
font-size: 1.2rem;
font-weight: 900;
line-height: 1.25;
}
.pensamos-alex-level-modal .juego-memoria__body {
margin-top: 12px;
}
.pensamos-alex-level-modal .pensamos-kids-experience__tracker {
margin-top: 0;
}
.pensamos-kids-compass-app .pensamos-kids-experience__unavailable {
padding: 22px;
border: 2px solid #e7eefb;
border-radius: 22px;
background: #ffffff;
}
@media (max-width: 820px) {
.pensamos-kids-compass-app .kids-app__profile-fab {
color: #0d1c31;
}
.pensamos-kids-compass-app .pensamos-kids-level-path {
padding-bottom: 92px;
}
}
.pensamos-course-guide {
padding: 0 0 var(--pensamos-space-9);
background:
radial-gradient(circle at 6% 4%, rgba(173, 213, 215, 0.24), transparent 28%),
linear-gradient(180deg, #f4f8fb 0%, #f8fbfd 42%, #ffffff 100%);
}
.pensamos-course-guide .pensamos-shell,
.pensamos-classes-guide .pensamos-shell {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
margin: 0;
padding: 4px clamp(6px, 0.8vw, 10px) 4px;
}
.pensamos-course-guide__topbar {
display: grid;
grid-template-columns: auto minmax(320px, 1fr) auto auto;
gap: 18px;
align-items: center;
padding: 18px 24px 16px;
margin-top: 12px;
border: 1px solid rgba(207, 219, 233, 0.9);
border-bottom: 0;
border-radius: var(--pensamos-radius-lg) var(--pensamos-radius-lg) 0 0;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 22px 44px rgba(13, 28, 49, 0.06);
backdrop-filter: blur(18px);
}
.pensamos-course-guide .pensamarket-cats--links,
.pensamos-classes-guide .pensamarket-cats--links {
margin-top: 0;
margin-bottom: 0;
}
.pensamarket-cats--links .pensamarket-chip {
min-height: 36px;
padding: 0 14px;
font-size: 0.88rem;
}
.pensamarket-cats--links .pensamarket-chip:hover,
.pensamarket-cats--links .pensamarket-chip:focus-visible {
transform: none;
}
.pensamos-course-block,
.pensamos-course-guide__sidebar-card {
border: 1px solid rgba(214, 224, 236, 0.92);
border-radius: 24px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 22px 44px rgba(13, 28, 49, 0.05);
backdrop-filter: blur(16px);
}
.pensamos-course-guide__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
gap: 10px;
margin-top: 10px;
align-items: start;
}
.pensamos-course-guide__content {
display: grid;
gap: 10px;
min-width: 0;
}
.pensamos-course-guide__layout.is-focus-mode {
position: relative;
grid-template-columns: minmax(0, 1fr) 308px;
gap: 24px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-guide__content {
width: auto;
}
.pensamos-course-guide__layout.is-focus-mode.pensamos-course-guide__layout--no-sidebar {
grid-template-columns: minmax(0, 1fr);
}
.pensamos-course-guide__focus-back-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(195, 209, 225, 0.92);
border-radius: 14px;
background: rgba(255, 255, 255, 0.92);
color: #20314f;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
box-shadow: 0 12px 24px rgba(13, 28, 49, 0.05);
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.pensamos-course-guide__focus-back-link:hover,
.pensamos-course-guide__focus-back-link:focus-visible {
transform: translateY(-1px);
border-color: rgba(79, 124, 255, 0.38);
box-shadow: 0 16px 28px rgba(13, 28, 49, 0.08);
}
.pensamos-course-guide__focus-back-link--inline {
flex: 0 0 auto;
align-self: flex-start;
}
.pensamos-course-breadcrumb {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
max-width: 100%;
font-size: 0.82rem;
line-height: 1.3;
}
.pensamos-course-breadcrumb__link,
.pensamos-course-breadcrumb__link:visited {
color: #5e7894;
font-weight: 700;
text-decoration: none;
}
.pensamos-course-breadcrumb__link:hover,
.pensamos-course-breadcrumb__link:focus-visible {
color: #294d74;
}
.pensamos-course-breadcrumb__separator {
color: #a4b1c2;
font-weight: 600;
}
.pensamos-course-breadcrumb__current {
color: #20314f;
font-weight: 800;
}
.pensamos-course-block__head .pensamos-course-breadcrumb {
margin-bottom: 6px;
}
.pensamos-course-walkthrough__hero-top .pensamos-course-walkthrough__kicker {
display: none;
}
.pensamos-course-walkthrough__hero-top .pensamos-course-breadcrumb {
justify-content: flex-start;
text-align: left;
}
.pensamos-course-guide__sidebar.is-focus-mode {
position: sticky;
top: 24px;
display: block;
}
.pensamos-course-guide__intro,
.pensamos-course-guide__sidebar {
position: sticky;
top: 18px;
}
.pensamos-course-guide__intro {
position: static;
justify-self: start;
width: min(100%, 980px);
padding: 16px 16px 18px;
border: 1px solid rgba(214, 224, 236, 0.92);
border-radius: 22px;
background:
radial-gradient(circle at top left, rgba(79, 124, 255, 0.12), transparent 34%),
radial-gradient(circle at bottom right, rgba(35, 93, 129, 0.06), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.96) 100%);
box-shadow: 0 18px 36px rgba(13, 28, 49, 0.05);
backdrop-filter: blur(16px);
}
.pensamos-course-guide__intro-copy {
display: block;
min-width: 0;
}
.pensamos-course-guide__intro h1 {
margin: 10px 0 8px;
max-width: 15ch;
font-size: clamp(1.55rem, 2.05vw, 2.25rem);
line-height: 1.01;
letter-spacing: -0.055em;
}
.pensamos-course-guide__intro p {
margin: 0;
max-width: 54ch;
font-size: 0.95rem;
line-height: 1.52;
color: #5b6780;
}
.pensamos-course-guide__intro-note {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(207, 219, 233, 0.7);
font-size: 0.84rem;
line-height: 1.45;
color: #40516c;
}
.pensamos-course-guide__intro-route-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: 10px;
margin-top: 16px;
max-width: 900px;
}
.pensamos-course-guide__sidebar {
display: grid;
gap: 8px;
}
.pensamos-course-guide__sidebar-card {
position: static;
padding: 8px;
background:
radial-gradient(circle at top right, rgba(79, 124, 255, 0.05), transparent 40%),
linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.93) 100%);
box-shadow: 0 16px 30px rgba(13, 28, 49, 0.035);
}
.pensamos-course-guide__sidebar-card--compact {
position: static;
}
.pensamos-course-guide__sidebar-kicker {
margin: 0 0 6px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #50718b;
}
.pensamos-course-guide__sidebar-card ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.pensamos-course-guide__sidebar-card a {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 7px;
padding: 8px 9px;
border-radius: 14px;
text-decoration: none;
color: #20314f;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(207, 219, 233, 0.9);
box-shadow: 0 6px 16px rgba(13, 28, 49, 0.025);
}
.pensamos-course-guide__intro-route-card {
position: relative;
display: grid;
gap: 3px;
min-height: 66px;
padding: 8px 10px 8px 14px;
border-radius: 14px;
text-decoration: none;
color: #20314f;
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
border: 1px solid rgba(207, 219, 233, 0.88);
box-shadow: 0 10px 18px rgba(13, 28, 49, 0.035);
}
.pensamos-course-guide__intro-route-card::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 6px;
height: calc(100% - 24px);
border-radius: 999px;
background: #93a4bb;
}
.pensamos-course-guide__intro-route-card strong {
font-size: 0.86rem;
line-height: 1.14;
}
.pensamos-course-guide__intro-route-card span {
margin-top: 1px;
font-size: 0.72rem;
line-height: 1.24;
color: #64748b;
}
.pensamos-course-guide__intro-route-card:hover,
.pensamos-course-guide__intro-route-card:focus-visible {
transform: translateY(-1px);
border-color: rgba(35, 93, 129, 0.3);
box-shadow: 0 12px 22px rgba(13, 28, 49, 0.05);
}
.pensamarket-chip--start.pensamos-course-guide__intro-route-card::before {
background: linear-gradient(180deg, #1fa77a 0%, #27c18a 100%);
}
.pensamarket-chip--cv.pensamos-course-guide__intro-route-card::before {
background: linear-gradient(180deg, #f0a64c 0%, #ea8f1f 100%);
}
.pensamarket-chip--search.pensamos-course-guide__intro-route-card::before {
background: linear-gradient(180deg, #4f7cff 0%, #245d81 100%);
}
.pensamos-course-guide__nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 4px;
border-radius: 8px;
font-size: 0.5rem;
font-weight: 800;
letter-spacing: 0.06em;
color: #20314f;
background: rgba(31, 47, 77, 0.07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pensamos-course-guide__nav-copy {
display: grid;
gap: 3px;
min-width: 0;
}
.pensamos-course-guide__nav-copy strong {
font-size: 0.84rem;
line-height: 1.12;
}
.pensamos-course-guide__nav-link.is-active,
.pensamos-course-guide__sidebar-card a:hover,
.pensamos-course-guide__sidebar-card a:focus-visible {
border-color: rgba(35, 93, 129, 0.28);
background: rgba(35, 93, 129, 0.05);
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(13, 28, 49, 0.04);
}
.pensamos-course-guide__sidebar-card a span {
font-size: 0.71rem;
line-height: 1.24;
color: #64748b;
}
.pensamos-course-guide__nav-link--coach .pensamos-course-guide__nav-badge {
background: rgba(31, 167, 122, 0.14);
color: #117a59;
}
.pensamos-course-guide__nav-link--search .pensamos-course-guide__nav-badge {
background: rgba(79, 124, 255, 0.14);
color: #245d81;
}
.pensamos-course-guide__nav-link--dev .pensamos-course-guide__nav-badge {
background: rgba(99, 102, 241, 0.14);
color: #4c51bf;
}
.pensamos-course-guide__nav-link--remote .pensamos-course-guide__nav-badge {
background: rgba(43, 143, 110, 0.14);
color: #1f7a5e;
}
.pensamos-course-guide__nav-link--cv .pensamos-course-guide__nav-badge {
background: rgba(240, 166, 76, 0.16);
color: #b96b11;
}
.pensamos-course-guide__nav-link--ai .pensamos-course-guide__nav-badge {
background: rgba(141, 92, 246, 0.14);
color: #6e42d3;
}
.pensamos-course-guide__nav-link--review .pensamos-course-guide__nav-badge {
background: rgba(224, 91, 104, 0.14);
color: #b83f52;
}
.pensamos-course-guide__nav-link--start .pensamos-course-guide__nav-badge {
background: rgba(31, 167, 122, 0.14);
color: #117a59;
}
.pensamos-course-guide__sidebar-actions {
display: grid;
gap: 7px;
margin-top: 10px;
}
[data-course-panel] {
display: none;
}
[data-course-panel].is-active {
display: block;
}
.pensamos-course-block {
padding: 16px;
scroll-margin-top: 24px;
}
.pensamos-course-block__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 14px;
}
.pensamos-course-block__head > div {
min-width: 0;
flex: 1 1 auto;
}
.pensamos-course-block__head h2 {
margin: 0 0 6px;
font-size: clamp(1.22rem, 1.6vw, 1.62rem);
line-height: 1.02;
letter-spacing: -0.05em;
}
.pensamos-course-block__head p {
margin: 0;
max-width: 70ch;
color: #607088;
font-size: 0.94rem;
line-height: 1.45;
}
.pensamos-course-button,
.pensamos-course-button:visited {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid transparent;
background: linear-gradient(135deg, #17324d 0%, #1f3158 100%);
color: #f8fbff;
font-size: 0.9rem;
font-weight: 800;
letter-spacing: -0.02em;
text-decoration: none;
box-shadow: 0 12px 24px rgba(13, 28, 49, 0.14);
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.pensamos-course-button:hover,
.pensamos-course-button:focus-visible {
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(13, 28, 49, 0.16);
}
.pensamos-course-button:disabled,
.pensamos-course-button[aria-disabled="true"] {
opacity: 0.46;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.pensamos-course-button--ghost,
.pensamos-course-button--ghost:visited {
background: rgba(255, 255, 255, 0.96);
color: #1f3158;
border-color: rgba(203, 214, 228, 0.95);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.pensamos-course-button--ghost:hover,
.pensamos-course-button--ghost:focus-visible {
background: rgba(79, 124, 255, 0.08);
border-color: rgba(79, 124, 255, 0.24);
color: #17324d;
}
.pensamos-course-block__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
#puntos-revisión {
--pensamos-review-accent: #e05b68;
--pensamos-review-accent-soft: rgba(224, 91, 104, 0.12);
--pensamos-review-accent-border: rgba(224, 91, 104, 0.22);
}
#puntos-revisión .pensamos-course-guidance-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
#puntos-revisión .pensamos-course-guidance-column {
display: grid;
gap: 14px;
align-content: start;
}
#puntos-revisión .pensamos-course-guidance-card {
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid var(--pensamos-review-accent-border);
border-radius: 22px;
background:
radial-gradient(circle at top right, rgba(224, 91, 104, 0.07), transparent 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 246, 247, 0.98) 100%);
box-shadow: 0 18px 34px rgba(13, 28, 49, 0.05);
}
#puntos-revisión .pensamos-course-guidance-card__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
align-items: start;
}
#puntos-revisión .pensamos-course-guidance-card__index {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 11px;
background: var(--pensamos-review-accent-soft);
border: 1px solid rgba(224, 91, 104, 0.16);
color: #b83f52;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
}
#puntos-revisión .pensamos-course-guidance-card h3 {
margin: 0;
font-size: 1rem;
line-height: 1.16;
letter-spacing: -0.03em;
color: #20314f;
}
#puntos-revisión .pensamos-course-guidance-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
#puntos-revisión .pensamos-course-guidance-list__item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
align-items: start;
margin: 0;
color: #52657f;
font-size: 0.9rem;
line-height: 1.48;
}
#puntos-revisión .pensamos-course-guidance-list__item::before {
content: "";
width: 9px;
height: 9px;
margin-top: 0.34rem;
border-radius: 999px;
background: linear-gradient(135deg, #ff8cab 0%, #e05b68 100%);
box-shadow: 0 0 0 4px rgba(224, 91, 104, 0.08);
}
@media (max-width: 920px) {
#puntos-revisión .pensamos-course-guidance-columns {
grid-template-columns: 1fr;
}
}
.pensamos-course-guide__content,
.pensamos-course-guide__sidebar,
.pensamos-course-guide__intro,
.pensamos-intent-panel,
.pensamos-course-guide__sidebar-card {
min-width: 0;
}
@media (max-width: 1180px) {
.pensamos-course-guide__layout.is-focus-mode {
grid-template-columns: 1fr;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-guide__sidebar {
position: static;
}
}
@media (max-width: 921px) {
.pensamos-course-guide__layout,
.pensamos-course-guide__layout.is-focus-mode {
grid-template-columns: 1fr;
}
.pensamos-course-guide .pensamos-shell,
.pensamos-classes-guide .pensamos-shell {
padding-inline: clamp(10px, 3vw, 18px);
}
.pensamos-course-guide__topbar {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px;
}
.pensamos-course-guide__intro,
.pensamos-course-guide__sidebar {
position: static;
width: 100%;
}
}
@media (max-width: 720px) {
.pensamos-course-guide__sidebar-card {
border-radius: 22px;
}
}
@media (max-width: 768px) {
.pensamos-course-guide__sidebar,
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-guide__sidebar {
display: none;
}
}
@media (max-width: 520px) {
.pensamos-course-guide .pensamos-shell,
.pensamos-classes-guide .pensamos-shell {
padding-inline: 8px;
}
.pensamos-course-guide__topbar {
margin-top: 8px;
padding: 14px;
border-radius: 22px 22px 0 0;
}
.pensamos-course-breadcrumb {
gap: 6px;
font-size: 0.76rem;
}
}
.pensamos-course-prompt-grid,
.pensamos-course-cv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 20px;
margin-top: 16px;
}
.pensamos-course-prompt-card,
.pensamos-course-cv-card {
background: #fff;
border: 1px solid #e6e6ed;
border-radius: 16px;
padding: 20px;
box-shadow: 0 2px 6px rgba(20, 20, 40, 0.04);
display: flex;
flex-direction: column;
gap: 14px;
}
.pensamos-course-prompt-card header h3,
.pensamos-course-cv-card__head h3 {
margin: 0 0 4px 0;
font-size: 1.05rem;
}
.pensamos-course-prompt-card header p {
margin: 0;
color: #4c4c66;
font-size: 0.9rem;
}
.pensamos-course-prompt-card ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.pensamos-course-prompt-card li code {
display: block;
background: #f7f7fb;
border: 1px solid #ececf4;
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
line-height: 1.45;
white-space: pre-wrap;
color: #2d2d44;
}
.pensamos-course-cv-card {
gap: 16px;
}
.pensamos-course-cv-card__meta {
margin: 0;
color: #6f6f88;
font-size: 0.85rem;
}
.pensamos-course-cv-card__body {
display: flex;
flex-direction: column;
gap: 14px;
}
.pensamos-course-cv-card__section h4 {
margin: 0 0 6px 0;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #7a7a92;
}
.pensamos-course-cv-card__section p,
.pensamos-course-cv-card__section ul {
margin: 0;
}
.pensamos-course-cv-card__section ul {
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.pensamos-course-cv-card__headline {
font-weight: 600;
color: #2d2d44;
}
.pensamos-course-cv-card__job + .pensamos-course-cv-card__job {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed #ececf4;
}
.pensamos-course-cv-card__job-head {
margin: 0 0 6px 0;
font-size: 0.92rem;
color: #2d2d44;
}
.pensamos-course-cv-card__job-head span {
color: #6f6f88;
font-weight: 400;
}
.pensamos-course-cv-card .pensamos-course-badge-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
}
.pensamos-course-cv-card .pensamos-course-badge-list li {
background: #f0f0f8;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.78rem;
color: #3a3a55;
}
.pensamos-course-cv-card__notes {
background: #fff8e6;
border-left: 3px solid #ffc107;
padding: 10px 14px;
border-radius: 0 10px 10px 0;
font-size: 0.88rem;
color: #5b4a00;
display: flex;
flex-direction: column;
gap: 4px;
}
.pensamos-course-cv-card__notes strong {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #7a5b00;
}
.pensamos-section-comments {
max-width: 720px;
margin: 12px auto 6px 0;
padding: 0;
width: 100%;
}
.pensamos-comment-toast {
position: fixed;
left: 50%;
top: 88px;
transform: translate(-50%, -16px);
z-index: 2147483000;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: 999px;
background: linear-gradient(180deg, #17324d 0%, #0f2538 100%);
color: #ffffff;
font-size: 0.92rem;
font-weight: 600;
box-shadow: 0 18px 40px rgba(13, 28, 49, 0.28);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.pensamos-comment-toast::before {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: #2b8f6e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
flex: none;
}
.pensamos-comment-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
.pensamos-comment-toast {
transition: opacity 0.25s ease;
transform: translate(-50%, 0);
}
}
.pensamos-section-comments__inner {
position: relative;
overflow: hidden;
display: grid;
gap: 14px;
width: 100%;
padding: 18px 22px;
border: 1px solid rgba(137, 205, 245, 0.78);
border-radius: 18px;
background: #f4f9fd;
box-shadow: 0 12px 28px rgba(45, 115, 165, 0.08);
box-sizing: border-box;
}
.pensamos-section-comments__form {
width: 100%;
max-width: none;
}
.pensamos-section-comments__form form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
margin: 0;
}
.pensamos-section-comments__head {
display: flex;
align-items: center;
gap: 10px;
}
.pensamos-section-comments__icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: linear-gradient(145deg, #46c7f4 0%, #8d7cf6 100%);
box-shadow: 0 7px 15px rgba(82, 151, 224, 0.2);
color: #ffffff;
font-size: 1rem;
font-weight: 900;
}
.pensamos-section-comments__head h2 {
margin: 0;
color: #0d1c31;
font-size: clamp(1rem, 1.4vw, 1.16rem);
line-height: 1.15;
}
.pensamos-section-comments__head p {
margin: 3px 0 0;
color: #5e7894;
font-size: 0.86rem;
line-height: 1.35;
}
.pensamos-section-comments__form {
display: grid;
gap: 8px;
padding: 0;
border: 0;
}
.pensamos-section-comments__form .comment-reply-title:empty {
display: none;
}
.pensamos-section-comments__form .comment-reply-title {
display: none;
margin: 0;
color: #0d1c31;
font-size: 1rem;
}
.pensamos-section-comments__form .ast-comment-formwrap,
.pensamos-section-comments__form .comment-form-cookies-consent {
grid-column: 1 / -1;
}
.pensamos-section-comments__form .comment-form-comment,
.pensamos-section-comments__form .comment-form-author,
.pensamos-section-comments__form .comment-form-email,
.pensamos-section-comments__form .comment-form-url {
display: grid;
gap: 6px;
margin: 0;
}
.pensamos-section-comments__form label {
color: #2b3d59;
font-size: 0.9rem;
font-weight: 700;
}
.pensamos-section-comments__form input[type="text"],
.pensamos-section-comments__form input[type="email"],
.pensamos-section-comments__form input[type="url"],
.pensamos-section-comments__form textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid rgba(154, 198, 228, 0.82);
border-radius: 12px;
background: rgba(255, 255, 255, 0.88);
color: #20314f;
font-size: 0.92rem;
box-sizing: border-box;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.pensamos-section-comments__form textarea {
height: 60px;
min-height: 60px;
resize: vertical;
}
.pensamos-section-comments__form input:focus,
.pensamos-section-comments__form textarea:focus {
outline: none;
border-color: rgba(40, 120, 189, 0.5);
box-shadow: 0 0 0 4px rgba(40, 120, 189, 0.14);
background: #ffffff;
}
.pensamos-section-comments__form .form-submit {
align-self: end;
margin: 0;
display: flex;
justify-content: flex-end;
}
.pensamos-section-comments__form .form-submit .pensamos-section-comments__submit {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 28px;
height: 28px;
padding: 0 12px;
border: 1px solid rgba(137, 205, 245, 0.9);
border-radius: 10px;
background: #f4f9fd;
color: #1d557f;
font-family: inherit;
font-size: 0.78rem;
font-weight: 850;
line-height: 1;
text-align: center;
box-shadow: none;
}
.pensamos-section-comments__form .form-submit .pensamos-section-comments__submit:hover,
.pensamos-section-comments__form .form-submit .pensamos-section-comments__submit:focus-visible {
border-color: #46a9df;
background: #e5f5fd;
color: #174b70;
transform: translateY(-1px);
}
.pensamos-section-comments__form .logged-in-as,
.pensamos-section-comments__form .comment-notes {
margin: 0;
color: #5e7894;
font-size: 0.78rem;
line-height: 1.35;
}
.pensamos-section-comments__form .logged-in-as a {
color: #1d557f;
font-weight: 700;
text-decoration: none;
}
.pensamos-section-comments__form .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 8px;
}
.pensamos-section-comments__form .comment-form-cookies-consent input {
width: auto;
margin-top: 3px;
}
@media (max-width: 600px) {
.pensamos-section-comments {
margin-top: 14px;
}
.pensamos-section-comments__inner {
padding: 14px;
}
.pensamos-section-comments__form .form-submit {
justify-content: flex-end;
}
.pensamos-section-comments__submit {
width: auto;
}
.pensamos-section-comments__form form {
grid-template-columns: 1fr;
}
}
.pensamos-course-focus-quiz-shell {
position: relative;
height: 0;
overflow: visible;
}
.pensamos-course-focus-quiz-shell .pensamos-route-tracker {
padding: 0;
margin: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.pensamos-course-focus-quiz-shell .pensamos-route-tracker__sidebar,
.pensamos-course-focus-quiz-shell .pensamos-route-tracker__blocks,
.pensamos-course-focus-quiz-shell .pensamos-route-tracker__noscript {
display: none;
}
.pensamos-course-focus-quiz-shell .pensamos-route-tracker__layout,
.pensamos-course-focus-quiz-shell .pensamos-route-tracker__main {
display: block;
}
.pensamos-course-walkthrough {
display: grid;
gap: 18px;
}
.pensamos-course-walkthrough__hero,
.pensamos-course-walkthrough__test {
padding: 24px;
border-radius: 28px;
border: 1px solid rgba(214, 224, 236, 0.96);
background: #ffffff;
box-shadow: 0 14px 30px rgba(13, 28, 49, 0.05);
}
.pensamos-course-walkthrough__hero {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
gap: 20px;
align-items: start;
}
.pensamos-course-walkthrough__hero-copy {
display: grid;
gap: 12px;
align-content: start;
}
.pensamos-course-walkthrough__hero-top {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
}
.pensamos-course-walkthrough__kicker {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #335f86;
}
.pensamos-course-walkthrough__hero-copy h3,
.pensamos-course-walkthrough__test-head h3 {
margin: 0;
font-size: clamp(1.26rem, 1.8vw, 1.6rem);
line-height: 1.05;
letter-spacing: -0.04em;
color: #20314f;
}
.pensamos-course-walkthrough__hero-copy p,
.pensamos-course-walkthrough__test-head p {
margin: 0;
font-size: 0.94rem;
line-height: 1.54;
color: #607088;
max-width: 68ch;
}
.pensamos-course-priority-tool {
display: grid;
gap: 10px;
padding: 16px;
border: 1px solid color-mix(in srgb, var(--pensamos-route-theme-accent, #1d71c8) 20%, white);
border-radius: 22px;
background:
radial-gradient(circle at 88% 10%, var(--pensamos-route-theme-glow, rgba(34, 184, 207, 0.14)), transparent 38%),
rgba(255, 255, 255, 0.86);
box-shadow: 0 10px 24px rgba(13, 28, 49, 0.04);
}
.pensamos-course-priority-tool strong {
color: #20314f;
font-size: 1.02rem;
line-height: 1.12;
}
.pensamos-course-priority-tool > span {
max-width: 58ch;
color: #42546d;
font-size: 0.9rem;
line-height: 1.42;
}
.pensamos-course-priority-tool__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.pensamos-course-priority-tool__actions .pensamos-course-button {
min-height: 38px;
padding-inline: 14px;
font-size: 0.84rem;
font-family: inherit;
cursor: pointer;
}
.pensamos-course-walkthrough__hero-actions,
.pensamos-course-walkthrough__test-head {
display: grid;
gap: 14px;
align-content: start;
}
.pensamos-course-walkthrough__progress {
display: grid;
gap: 8px;
padding: 16px;
border-radius: 22px;
background: #ffffff;
border: 1px solid rgba(174, 224, 255, 0.92);
box-shadow: 0 10px 24px rgba(13, 28, 49, 0.04);
}
.pensamos-course-walkthrough__progress strong {
color: #20314f;
font-size: 0.94rem;
line-height: 1;
}
.pensamos-course-walkthrough__progress .pensamos-course-walkthrough__progress-guidance {
font-size: 0.82rem;
font-weight: 600;
line-height: 1.35;
}
.pensamos-course-walkthrough__progress span:last-child {
font-size: 0.84rem;
line-height: 1.4;
color: #607088;
}
.pensamos-course-walkthrough__progress-bar {
position: relative;
height: 10px;
border-radius: 999px;
background: rgba(214, 223, 234, 0.72);
overflow: hidden;
}
.pensamos-course-walkthrough__progress-bar > span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: #4f7cff;
transition: width 180ms ease;
}
.pensamos-course-guide[data-route-theme="work"] {
--pensamos-route-theme-accent: #1d71c8;
--pensamos-route-theme-accent-2: #22b8cf;
--pensamos-route-theme-soft: rgba(29, 113, 200, 0.08);
--pensamos-route-theme-glow: rgba(34, 184, 207, 0.14);
--pensamos-route-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] {
--pensamos-route-theme-accent: #7c3aed;
--pensamos-route-theme-accent-2: #16a34a;
--pensamos-route-theme-soft: rgba(124, 58, 237, 0.08);
--pensamos-route-theme-glow: rgba(22, 163, 74, 0.14);
--pensamos-route-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M5 4a4 4 0 0 1 4-4h1v20H9a4 4 0 0 0-4 4H3V6a2 2 0 0 1 2-2Zm10-4a4 4 0 0 1 4 4 2 2 0 0 1 2 2v18h-2a4 4 0 0 0-4-4h-1V0h1Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-walkthrough__hero,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-walkthrough__hero {
position: relative;
border-color: color-mix(in srgb, var(--pensamos-route-theme-accent) 18%, white);
background:
radial-gradient(circle at 88% 16%, var(--pensamos-route-theme-glow), transparent 34%),
linear-gradient(180deg, color-mix(in srgb, var(--pensamos-route-theme-soft) 72%, white) 0%, #ffffff 100%);
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-walkthrough__hero-copy h3,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-walkthrough__hero-copy h3 {
display: inline-flex;
align-items: center;
gap: 12px;
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-walkthrough__hero-copy h3::after,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-walkthrough__hero-copy h3::after {
content: "";
display: inline-flex;
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 11px;
background-image: var(--pensamos-route-theme-icon), linear-gradient(135deg, var(--pensamos-route-theme-accent) 0%, var(--pensamos-route-theme-accent-2) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: 17px 17px, auto;
box-shadow: 0 10px 18px color-mix(in srgb, var(--pensamos-route-theme-accent) 18%, transparent);
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-walkthrough__kicker,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-walkthrough__kicker {
color: var(--pensamos-route-theme-accent);
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-walkthrough__progress,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-walkthrough__progress {
border-color: color-mix(in srgb, var(--pensamos-route-theme-accent) 18%, white);
background: rgba(255, 255, 255, 0.78);
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-walkthrough__progress-bar > span,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-walkthrough__progress-bar > span {
background: linear-gradient(90deg, var(--pensamos-route-theme-accent) 0%, var(--pensamos-route-theme-accent-2) 100%);
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-route-tracker__sidebar-card,
.pensamos-course-guide[data-route-theme="study"] .pensamos-route-tracker__sidebar-card {
border-color: color-mix(in srgb, var(--pensamos-route-theme-accent) 16%, white);
background:
radial-gradient(circle at 92% 4%, var(--pensamos-route-theme-glow), transparent 32%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, color-mix(in srgb, var(--pensamos-route-theme-soft) 38%, white) 100%);
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-route-tracker__sidebar-kicker,
.pensamos-course-guide[data-route-theme="study"] .pensamos-route-tracker__sidebar-kicker {
color: var(--pensamos-route-theme-accent);
}
.pensamos-course-walkthrough__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.pensamos-course-walkthrough__quiz-count {
color: #52627a;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
}
.pensamos-course-walkthrough__actions [hidden] {
display: none !important;
}
.pensamos-course-walkthrough__actions .pensamos-course-button,
.pensamos-course-walkthrough__actions .pensamos-course-button:visited {
min-height: 46px;
padding: 0 14px;
border-radius: 16px;
box-shadow: none;
transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.pensamos-course-walkthrough__actions .pensamos-course-button:not(.pensamos-course-button--ghost),
.pensamos-course-walkthrough__actions .pensamos-course-button:not(.pensamos-course-button--ghost):visited {
background: #f4ffe7;
border-color: rgba(210, 231, 160, 0.98);
color: #117a59;
}
.pensamos-course-walkthrough__actions .pensamos-course-button:not(.pensamos-course-button--ghost):hover,
.pensamos-course-walkthrough__actions .pensamos-course-button:not(.pensamos-course-button--ghost):focus-visible {
background: #eef9d9;
border-color: rgba(191, 220, 121, 0.98);
color: #0f6b4d;
}
.pensamos-course-walkthrough__actions .pensamos-course-button--ghost,
.pensamos-course-walkthrough__actions .pensamos-course-button--ghost:visited {
background: #f4ffe7;
border-color: rgba(210, 231, 160, 0.98);
color: #117a59;
box-shadow: none;
}
.pensamos-course-walkthrough__actions .pensamos-course-button--ghost:hover,
.pensamos-course-walkthrough__actions .pensamos-course-button--ghost:focus-visible {
background: #eef9d9;
border-color: rgba(191, 220, 121, 0.98);
color: #0f6b4d;
}
.pensamos-course-walkthrough__actions .pensamos-course-button.pensamarket-auth__button,
.pensamos-course-walkthrough__actions .pensamos-course-button.pensamarket-auth__button:visited {
border-color: transparent;
border-radius: var(--pensamos-radius-pill);
background: linear-gradient(135deg, #111827 0%, #243b62 100%);
color: #fff;
box-shadow: 0 12px 24px rgba(17, 24, 39, 0.14);
}
.pensamos-course-walkthrough__actions .pensamos-course-button.pensamarket-auth__button:hover,
.pensamos-course-walkthrough__actions .pensamos-course-button.pensamarket-auth__button:focus-visible {
background: linear-gradient(135deg, #111827 0%, #243b62 100%);
color: #fff;
box-shadow: 0 14px 28px rgba(17, 24, 39, 0.16);
}
.pensamos-course-walkthrough__actions .pensamos-course-button:not(.pensamarket-auth__button):hover,
.pensamos-course-walkthrough__actions .pensamos-course-button:not(.pensamarket-auth__button):focus-visible {
transform: none;
box-shadow: none;
}
.pensamos-course-walkthrough__footer-actions {
display: flex;
justify-content: flex-end;
margin-top: 2px;
}
.pensamos-course-walkthrough__footer-actions[hidden] {
display: none;
}
.pensamos-course-walkthrough__footer-actions .pensamos-course-button,
.pensamos-course-walkthrough__footer-actions .pensamos-course-button:visited {
min-height: 44px;
padding: 0 14px;
border-radius: 14px;
background: #f4ffe7;
border-color: rgba(210, 231, 160, 0.98);
color: #117a59;
box-shadow: none;
transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.pensamos-course-walkthrough__footer-actions .pensamos-course-button:hover,
.pensamos-course-walkthrough__footer-actions .pensamos-course-button:focus-visible {
background: #eef9d9;
border-color: rgba(191, 220, 121, 0.98);
color: #0f6b4d;
transform: none;
box-shadow: none;
}
.pensamos-course-walkthrough__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.pensamos-course-outcome-matrix {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
margin-top: 12px;
padding: 2px 0 0;
}
.pensamos-course-outcome-matrix__title {
flex: 0 0 auto;
color: #20314f;
font-size: 0.82rem;
line-height: 1.2;
white-space: nowrap;
}
.pensamos-course-outcome-matrix__items {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.pensamos-course-outcome-matrix__items li {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
padding: 5px 8px;
border: 1px solid color-mix(in srgb, var(--pensamos-route-theme-accent, #4f7cff) 14%, #dbe5f1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
outline: none;
cursor: help;
}
.pensamos-course-outcome-matrix__items li:hover,
.pensamos-course-outcome-matrix__items li:focus-visible {
border-color: color-mix(in srgb, var(--pensamos-route-theme-accent, #4f7cff) 34%, #dbe5f1);
background: #fff;
}
.pensamos-course-outcome-matrix__items li.is-filled {
border-color: color-mix(in srgb, var(--pensamos-route-theme-accent, #4f7cff) 42%, #dbe5f1);
background: color-mix(in srgb, var(--pensamos-route-theme-accent, #4f7cff) 7%, #fff);
}
.pensamos-course-outcome-matrix__items span {
color: var(--pensamos-route-theme-accent, #4f7cff);
font-size: 0.7rem;
font-weight: 800;
line-height: 1.2;
}
.pensamos-course-outcome-matrix__items small {
color: #20314f;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
}
.pensamos-course-outcome-matrix__items em {
position: absolute;
z-index: 12;
left: 0;
bottom: calc(100% + 8px);
display: block;
width: min(320px, 72vw);
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--pensamos-route-theme-accent, #4f7cff) 22%, #dbe5f1);
border-radius: 12px;
background: #fff;
box-shadow: 0 16px 36px rgba(13, 28, 49, 0.14);
color: #20314f;
font-size: 0.78rem;
font-style: normal;
font-weight: 600;
line-height: 1.35;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity 160ms ease, transform 160ms ease;
}
.pensamos-course-outcome-matrix__items li:hover em,
.pensamos-course-outcome-matrix__items li:focus-visible em {
opacity: 1;
transform: translateY(0);
}
.pensamos-course-walkthrough__modal-section {
min-width: 0;
}
@media (max-width: 921px) {
.pensamos-course-walkthrough__modal-actions,
.pensamos-course-walkthrough__modal-nav {
display: grid;
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.pensamos-course-walkthrough__hero {
grid-template-columns: 1fr;
}
}
.pensamos-course-platform-card {
--pensamos-platform-accent: #4f7cff;
--pensamos-platform-accent-soft: rgba(79, 124, 255, 0.1);
--pensamos-platform-accent-line: rgba(79, 124, 255, 0.34);
--pensamos-platform-accent-shadow: rgba(79, 124, 255, 0.18);
display: flex;
min-width: 0;
}
.pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n + 1) {
--pensamos-platform-accent: #4f7cff;
--pensamos-platform-accent-soft: rgba(79, 124, 255, 0.1);
--pensamos-platform-accent-line: rgba(79, 124, 255, 0.34);
--pensamos-platform-accent-shadow: rgba(79, 124, 255, 0.18);
}
.pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n + 2) {
--pensamos-platform-accent: #58cc02;
--pensamos-platform-accent-soft: rgba(88, 204, 2, 0.1);
--pensamos-platform-accent-line: rgba(88, 204, 2, 0.3);
--pensamos-platform-accent-shadow: rgba(88, 204, 2, 0.16);
}
.pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n + 3) {
--pensamos-platform-accent: #ffb92f;
--pensamos-platform-accent-soft: rgba(255, 185, 47, 0.12);
--pensamos-platform-accent-line: rgba(255, 185, 47, 0.32);
--pensamos-platform-accent-shadow: rgba(255, 185, 47, 0.18);
}
.pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n) {
--pensamos-platform-accent: #ff6b95;
--pensamos-platform-accent-soft: rgba(255, 107, 149, 0.1);
--pensamos-platform-accent-line: rgba(255, 107, 149, 0.32);
--pensamos-platform-accent-shadow: rgba(255, 107, 149, 0.18);
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n + 1) {
--pensamos-platform-accent: #7c3aed;
--pensamos-platform-accent-soft: rgba(124, 58, 237, 0.1);
--pensamos-platform-accent-line: rgba(124, 58, 237, 0.32);
--pensamos-platform-accent-shadow: rgba(124, 58, 237, 0.18);
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n + 2) {
--pensamos-platform-accent: #16a34a;
--pensamos-platform-accent-soft: rgba(22, 163, 74, 0.1);
--pensamos-platform-accent-line: rgba(22, 163, 74, 0.3);
--pensamos-platform-accent-shadow: rgba(22, 163, 74, 0.16);
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n + 3) {
--pensamos-platform-accent: #f59e0b;
--pensamos-platform-accent-soft: rgba(245, 158, 11, 0.12);
--pensamos-platform-accent-line: rgba(245, 158, 11, 0.32);
--pensamos-platform-accent-shadow: rgba(245, 158, 11, 0.18);
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-card-grid > .pensamos-course-platform-card:nth-child(4n) {
--pensamos-platform-accent: #2563eb;
--pensamos-platform-accent-soft: rgba(37, 99, 235, 0.1);
--pensamos-platform-accent-line: rgba(37, 99, 235, 0.32);
--pensamos-platform-accent-shadow: rgba(37, 99, 235, 0.18);
}
.pensamos-course-platform-card__button {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
padding: 18px 18px 17px;
border: 1px solid rgba(219, 229, 241, 0.96);
border-radius: 24px;
background: #ffffff;
text-align: left;
cursor: pointer;
box-shadow: 0 10px 24px rgba(13, 28, 49, 0.04);
transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.pensamos-course-platform-card__button:hover,
.pensamos-course-platform-card__button:focus-visible {
transform: translateY(-3px);
border-color: var(--pensamos-platform-accent-line);
box-shadow: 0 18px 34px rgba(13, 28, 49, 0.08), 0 8px 18px var(--pensamos-platform-accent-shadow);
background: #ffffff;
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card__button,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card__button {
border-color: color-mix(in srgb, var(--pensamos-platform-accent) 16%, white);
background:
radial-gradient(circle at 96% 0%, var(--pensamos-platform-accent-soft), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.pensamos-course-platform-card__marker {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: #eef4fb;
color: #3f5f86;
font-size: 0;
font-weight: 800;
line-height: 1;
}
.pensamos-course-platform-card__marker::before {
content: "+";
font-size: 1rem;
line-height: 1;
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card__marker,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E");
width: 30px;
height: 30px;
border-radius: 0;
background: transparent;
color: var(--pensamos-platform-accent);
box-shadow: none;
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card__marker::before,
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card__marker::before {
content: "";
display: block;
width: 19px;
height: 19px;
background: currentColor;
filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--pensamos-platform-accent) 30%, transparent));
-webkit-mask: var(--pensamos-platform-icon) center / contain no-repeat;
mask: var(--pensamos-platform-icon) center / contain no-repeat;
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card:nth-child(4n + 1) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card:nth-child(4n + 2) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2Zm8 2v4h4l-4-4ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Zm0-8h4v2H8V7Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card:nth-child(4n + 3) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-1.8 5.7l2.55 2.55-1.42 1.42-2.43-2.43A10 10 0 1 1 12 2Zm0 2c-.8 0-1.62 1.3-2.1 3h4.2C13.62 5.3 12.8 4 12 4ZM7.82 7C8.06 6.1 8.4 5.26 8.82 4.6A8.04 8.04 0 0 0 5.08 7h2.74Zm8.36 0h2.74a8.04 8.04 0 0 0-3.74-2.4c.42.66.76 1.5 1 2.4ZM4.26 9A8.2 8.2 0 0 0 4 12c0 1.05.2 2.07.57 3h3.05A17.7 17.7 0 0 1 7.4 12c0-1.05.08-2.06.22-3H4.26Zm5.38 0c-.16.92-.24 1.93-.24 3s.08 2.08.24 3h4.72c.16-.92.24-1.93.24-3s-.08-2.08-.24-3H9.64Zm6.74 0c.14.94.22 1.95.22 3 0 1.06-.08 2.06-.22 3h3.05A8.2 8.2 0 0 0 20 12c0-1.05-.2-2.07-.57-3h-3.05ZM9.9 17c.48 1.7 1.3 3 2.1 3s1.62-1.3 2.1-3H9.9Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-platform-card:nth-child(4n) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18H5V3Zm3 4v2h8V7H8Zm0 4v2h8v-2H8Zm0 4v2h5v-2H8Zm9.7-.7-1.4-1.4-3.3 3.3-1.3-1.3-1.4 1.4 2.7 2.7 4.7-4.7Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card:nth-child(4n + 1) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h1V3H8Zm8 0h-1v18h1a4 4 0 0 0 4-4V7a4 4 0 0 0-4-4Zm-5 0h2v18h-2V3Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card:nth-child(4n + 2) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a3 3 0 0 0-3-2H4V4Zm16 0v14h-7a3 3 0 0 0-3 2V7a3 3 0 0 1 3-3h7Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card:nth-child(4n + 3) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2Zm-2 19h4v2h-4v-2Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-platform-card:nth-child(4n) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L7 6.5 12 11V8a5 5 0 1 1-4.58 7H4.26A8 8 0 1 0 12 5Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__copy {
display: grid;
gap: 6px;
min-width: 0;
}
.pensamos-course-platform-card__copy strong {
font-size: 1rem;
line-height: 1.15;
color: #20314f;
}
.pensamos-course-platform-card__copy span {
font-size: 0.93rem;
line-height: 1.5;
color: #607088;
}
.pensamos-course-platform-card__meta {
display: grid;
gap: 8px;
justify-items: end;
text-align: right;
}
.pensamos-course-platform-card__time,
.pensamos-course-platform-card__state {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 11px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.pensamos-course-platform-card__time {
background: #eef2f7;
color: #20314f;
}
.pensamos-course-platform-card__state {
background: #f7fafc;
border: 1px solid rgba(214, 224, 236, 0.96);
color: #607088;
}
.pensamos-course-platform-card.is-read .pensamos-course-platform-card__button {
border-color: rgba(210, 231, 160, 0.98);
background: #ffffff;
}
.pensamos-course-platform-card.is-read .pensamos-course-platform-card__marker {
background: #f4ffe7;
color: #117a59;
}
.pensamos-course-platform-card.is-read .pensamos-course-platform-card__marker::before {
content: "\2713";
font-size: 0.96rem;
}
.pensamos-course-platform-card.is-read .pensamos-course-platform-card__state {
background: #f4ffe7;
border-color: rgba(210, 231, 160, 0.98);
color: #117a59;
}
.pensamos-course-resource-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.pensamos-course-resource-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.pensamos-course-resource-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: start;
padding: 12px 14px;
border-radius: 18px;
background: linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
border: 1px solid rgba(222, 231, 241, 0.92);
}
.pensamos-course-resource-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
background: rgba(79, 124, 255, 0.1);
color: #235d81;
font-weight: 800;
font-size: 0.82rem;
}
.pensamos-course-resource-list strong a {
color: #1f3158;
text-decoration: none;
}
.pensamos-course-resource-list p {
margin: 4px 0 0;
font-size: 0.92rem;
color: #607088;
line-height: 1.48;
}
.pensamos-course-builder {
display: grid;
gap: 14px;
}
.pensamos-course-builder__primary label,
.pensamos-course-builder__block label {
display: block;
margin-bottom: 6px;
font-weight: 700;
color: #20314f;
}
.pensamos-course-builder__primary textarea,
.pensamos-course-builder__block input {
width: 100%;
border-radius: 16px;
border: 1px solid rgba(205, 216, 229, 0.95);
background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
padding: 12px 14px;
font: inherit;
color: #1f2a44;
box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.03);
}
.pensamos-course-builder__primary p,
.pensamos-course-builder__example p {
margin: 8px 0 0;
font-size: 0.92rem;
color: #64748b;
line-height: 1.45;
}
.pensamos-course-builder__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pensamos-course-button {
border: 0;
cursor: pointer;
}
.pensamos-course-builder__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
grid-auto-rows: 1fr;
}
.pensamos-course-builder__block {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
height: 100%;
padding: 14px;
border-radius: 18px;
background: linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
border: 1px solid rgba(222, 231, 241, 0.92);
}
.pensamos-course-builder__block h3 {
margin: 0;
font-size: 0.94rem;
}
.pensamos-course-builder__block-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
margin-bottom: 0;
}
.pensamos-course-builder__block-head .pensamos-text-link {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 32px;
padding: 0 12px;
border: 1px solid rgba(207, 219, 233, 0.92);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #245d81;
font-size: 0.82rem;
font-weight: 800;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.pensamos-course-builder__block-head .pensamos-text-link:hover,
.pensamos-course-builder__block-head .pensamos-text-link:focus-visible {
border-color: rgba(79, 124, 255, 0.34);
background: rgba(79, 124, 255, 0.08);
color: #1f3158;
}
.pensamos-course-platform-card__button.is-loading {
cursor: progress;
position: relative;
}
.pensamos-course-platform-card__button.is-loading::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 18px;
height: 18px;
border: 2px solid rgba(15, 99, 184, 0.18);
border-top-color: var(--pensamos-primary, #0f63b8);
border-radius: 999px;
animation: pensamos-course-card-spin 720ms linear infinite;
pointer-events: none;
z-index: 3;
}
@keyframes pensamos-course-card-spin {
to { transform: rotate(360deg); }
}
.pensamos-course-guide.is-navigating {
cursor: progress;
}
.pensamos-course-guide.is-navigating .pensamos-course-platform-card__button:not(.is-loading),
.pensamos-course-guide.is-navigating .pensamos-route-tracker__nav-item:not(.is-loading),
.pensamos-course-guide.is-navigating .pensamos-route-tracker__subnav-item,
.pensamos-course-guide.is-navigating .pensamos-route-tracker__subnav-site {
pointer-events: none;
opacity: 0.55;
}
.pensamos-course-platform-card[data-section-id="definir-puestos-objetivo"],
.pensamos-course-platform-card[data-section-id="filtrar-mejor"],
.pensamos-course-platform-card[data-section-id="aplicar-y-seguir"] {
display: none;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block {
padding: 24px;
border-radius: 28px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block__head {
margin-bottom: 14px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block__head .pensamos-course-breadcrumb {
display: flex;
width: 100%;
margin-bottom: 10px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block__head > div {
display: block;
width: 100%;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block__head .pensamos-eyebrow {
margin-bottom: 8px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__steps {
gap: 12px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step {
padding: 16px;
gap: 14px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step-plan {
gap: 12px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step-marker {
width: 32px;
height: 32px;
border-radius: 10px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step-copy {
gap: 4px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step-copy strong {
padding-bottom: 4px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step-meta {
margin-top: 8px;
padding-left: 44px;
gap: 6px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-route-tracker__step-tip {
padding: 8px 12px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step {
height: 100%;
grid-template-columns: minmax(0, 1fr);
padding: 10px;
gap: 8px;
align-content: start;
border-radius: 18px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-main {
gap: 0;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-plan {
gap: 8px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-marker {
width: 28px;
height: 28px;
border-radius: 8px;
font-size: 0.88rem;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-copy {
gap: 2px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-copy strong {
padding-bottom: 2px;
font-size: 0.95rem;
line-height: 1.14;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-copy strong::after {
width: 38px;
height: 2px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-copy span {
display: -webkit-box;
font-size: 0.8rem;
line-height: 1.32;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-meta {
margin-top: 4px;
padding-left: 36px;
gap: 5px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__meta-pill {
min-height: 28px;
padding: 0 10px;
font-size: 0.75rem;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-tip {
display: -webkit-box;
padding: 6px 9px;
font-size: 0.76rem;
line-height: 1.34;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
border-radius: 16px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-actions {
margin-top: auto;
align-items: stretch;
padding-top: 0;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-action {
width: 100%;
min-height: 34px;
padding: 0 9px;
font-size: 0.78rem;
border-radius: 12px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__button {
--pensamos-compact-card-border: #aee0ff;
--pensamos-compact-card-soft: #eef8ff;
--pensamos-compact-card-badge-start: #6cd6ff;
--pensamos-compact-card-badge-end: #3dbaf3;
--pensamos-compact-card-shadow: rgba(61, 186, 243, 0.16);
grid-template-columns: auto minmax(0, 1fr);
gap: 8px;
min-height: 116px;
padding: 10px;
border: 1px solid var(--pensamos-compact-card-border);
border-radius: 18px;
align-content: start;
background:
radial-gradient(circle at top right, color-mix(in srgb, var(--pensamos-compact-card-shadow) 88%, transparent), transparent 46%),
linear-gradient(180deg, color-mix(in srgb, var(--pensamos-compact-card-soft) 86%, white) 0%, rgba(255, 255, 255, 1) 100%);
box-shadow: 0 10px 24px color-mix(in srgb, var(--pensamos-compact-card-shadow) 32%, rgba(13, 28, 49, 0.04));
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 1) .pensamos-course-platform-card__button {
--pensamos-compact-card-border: #aee0ff;
--pensamos-compact-card-soft: #eef8ff;
--pensamos-compact-card-badge-start: #6cd6ff;
--pensamos-compact-card-badge-end: #3dbaf3;
--pensamos-compact-card-shadow: rgba(61, 186, 243, 0.16);
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 2) .pensamos-course-platform-card__button {
--pensamos-compact-card-border: #cce97a;
--pensamos-compact-card-soft: #f7ffe8;
--pensamos-compact-card-badge-start: #7be51a;
--pensamos-compact-card-badge-end: #58cc02;
--pensamos-compact-card-shadow: rgba(88, 204, 2, 0.16);
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 3) .pensamos-course-platform-card__button {
--pensamos-compact-card-border: #ffd36b;
--pensamos-compact-card-soft: #fff8e5;
--pensamos-compact-card-badge-start: #ffd055;
--pensamos-compact-card-badge-end: #ffb92f;
--pensamos-compact-card-shadow: rgba(255, 185, 47, 0.18);
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n) .pensamos-course-platform-card__button {
--pensamos-compact-card-border: #ffc2d1;
--pensamos-compact-card-soft: #fff2f7;
--pensamos-compact-card-badge-start: #ff8cab;
--pensamos-compact-card-badge-end: #ff6b95;
--pensamos-compact-card-shadow: rgba(255, 107, 149, 0.18);
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__marker {
width: 28px;
height: 28px;
border-radius: 0;
background: transparent;
color: var(--pensamos-compact-card-badge-end);
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
box-shadow: none;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__marker::before {
content: none;
}
.pensamos-course-guide[data-route-theme] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E");
font-size: 0;
}
.pensamos-course-guide[data-route-theme] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__marker::before {
content: "";
display: block;
width: 18px;
height: 18px;
background: currentColor;
filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--pensamos-compact-card-badge-end) 32%, transparent));
-webkit-mask: var(--pensamos-platform-icon) center / contain no-repeat;
mask: var(--pensamos-platform-icon) center / contain no-repeat;
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 1) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 2) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2Zm8 2v4h4l-4-4ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Zm0-8h4v2H8V7Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 3) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-1.8 5.7l2.55 2.55-1.42 1.42-2.43-2.43A10 10 0 1 1 12 2Zm0 2c-.8 0-1.62 1.3-2.1 3h4.2C13.62 5.3 12.8 4 12 4ZM7.82 7C8.06 6.1 8.4 5.26 8.82 4.6A8.04 8.04 0 0 0 5.08 7h2.74Zm8.36 0h2.74a8.04 8.04 0 0 0-3.74-2.4c.42.66.76 1.5 1 2.4ZM4.26 9A8.2 8.2 0 0 0 4 12c0 1.05.2 2.07.57 3h3.05A17.7 17.7 0 0 1 7.4 12c0-1.05.08-2.06.22-3H4.26Zm5.38 0c-.16.92-.24 1.93-.24 3s.08 2.08.24 3h4.72c.16-.92.24-1.93.24-3s-.08-2.08-.24-3H9.64Zm6.74 0c.14.94.22 1.95.22 3 0 1.06-.08 2.06-.22 3h3.05A8.2 8.2 0 0 0 20 12c0-1.05-.2-2.07-.57-3h-3.05ZM9.9 17c.48 1.7 1.3 3 2.1 3s1.62-1.3 2.1-3H9.9Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="work"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18H5V3Zm3 4v2h8V7H8Zm0 4v2h8v-2H8Zm0 4v2h5v-2H8Zm9.7-.7-1.4-1.4-3.3 3.3-1.3-1.3-1.4 1.4 2.7 2.7 4.7-4.7Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 1) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3a4 4 0 0 0-4 4v10a4 4 0 0 0 4 4h1V3H8Zm8 0h-1v18h1a4 4 0 0 0 4-4V7a4 4 0 0 0-4-4Zm-5 0h2v18h-2V3Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 2) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a3 3 0 0 0-3-2H4V4Zm16 0v14h-7a3 3 0 0 0-3 2V7a3 3 0 0 1 3-3h7Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n + 3) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2Zm-2 19h4v2h-4v-2Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme="study"] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card:nth-child(4n) .pensamos-course-platform-card__marker {
--pensamos-platform-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V2L7 6.5 12 11V8a5 5 0 1 1-4.58 7H4.26A8 8 0 1 0 12 5Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="briefcase"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="briefcase"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="network"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="network"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5a3 3 0 1 1 2.83 4H10a4 4 0 0 1 3.74 2.58A3 3 0 0 1 17 11a3 3 0 1 1-2.93 3.67A2 2 0 0 0 12 13H9.46A4 4 0 0 1 6 15a4 4 0 1 0 4 4H8a2 2 0 1 1-2-2c.73 0 1.37.4 1.72 1h2.44A4 4 0 0 0 6 13a2 2 0 0 1 0-4 3 3 0 0 1 1-4Zm11 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM7 7a1 1 0 1 0 2 0 1 1 0 0 0-2 0Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="search"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="search"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.92 12.1l4.24 4.24-1.42 1.42-4.24-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm-2 4h4v2h-4V9Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="reviews"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="reviews"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v11H8l-4 4V4Zm2 2v8.17L7.17 13H18V6H6Zm6 1.2 1.18 2.38 2.62.38-1.9 1.85.45 2.61L12 13.18 9.65 14.42l.45-2.61-1.9-1.85 2.62-.38L12 7.2Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="document"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="document"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l4 4v16H6V2Zm8 2v4h4l-4-4ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Zm0-8h4v2H8V7Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="bolt"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="bolt"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 10-13h-7l0-7Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="radar"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="radar"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20a8 8 0 1 1 5.66-13.66l-1.42 1.42A6 6 0 1 0 18 12h2a8 8 0 0 1-8 8Zm0-4a4 4 0 1 1 2.83-6.83l-1.42 1.42A2 2 0 1 0 14 12h2a4 4 0 0 1-4 4Zm0-3a1 1 0 1 1 .71-1.71L21 3l1 1-8.29 8.29A1 1 0 0 1 12 13Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="map"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="map"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7Zm0 2a5 5 0 0 0-5 5c0 2.7 2.8 6.82 5 9.44C14.2 15.82 17 11.7 17 9a5 5 0 0 0-5-5Zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="target"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="target"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Zm0 4a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V6Zm0 4a2 2 0 1 0 2 2h-2v-2Zm4-8v4h4l-7 7-1.4-1.4 7-7H16V2Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="list"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="list"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v2H5V5Zm0 6h14v2H5v-2Zm0 6h9v2H5v-2Zm13.7-1.7 1.4 1.4-4.6 4.6-2.6-2.6 1.4-1.4 1.2 1.2 3.2-3.2Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="saved"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="saved"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v16l-8-4-8 4V5a2 2 0 0 1 2-2Zm0 2v12.76l6-3 6 3V5H6Zm3 4h6v2H9V9Zm0 4h4v2H9v-2Z'/%3E%3C/svg%3E");
}
.pensamos-course-platform-card__marker[data-course-platform-icon="spark"],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon="spark"] {
--pensamos-card-item-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 9.7 8.7 3 11l6.7 2.3L12 20l2.3-6.7L21 11l-6.7-2.3L12 2Zm7 14-1 3-3 1 3 1 1 3 1-3 3-1-3-1-1-3ZM5 3 4 6 1 7l3 1 1 3 1-3 3-1-3-1-1-3Z'/%3E%3C/svg%3E");
}
.pensamos-course-walkthrough__modal-section[data-course-section-icon="list"] {
--pensamos-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5h14v2H5V5Zm0 6h14v2H5v-2Zm0 6h9v2H5v-2Zm13.7-1.7 1.4 1.4-4.6 4.6-2.6-2.6 1.4-1.4 1.2 1.2 3.2-3.2Z'/%3E%3C/svg%3E");
}
.pensamos-course-walkthrough__modal-section[data-course-section-icon="search"] {
--pensamos-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 0 1 5.92 12.1l4.24 4.24-1.42 1.42-4.24-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm-2 4h4v2h-4V9Z'/%3E%3C/svg%3E");
}
.pensamos-course-walkthrough__modal-section[data-course-section-icon="target"] {
--pensamos-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2a8 8 0 1 1-8-8V2Zm0 4a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V6Zm0 4a2 2 0 1 0 2 2h-2v-2Zm4-8v4h4l-7 7-1.4-1.4 7-7H16V2Z'/%3E%3C/svg%3E");
}
.pensamos-course-walkthrough__modal-section[data-course-section-icon="spark"] {
--pensamos-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 9.7 8.7 3 11l6.7 2.3L12 20l2.3-6.7L21 11l-6.7-2.3L12 2Zm7 14-1 3-3 1 3 1 1 3 1-3 3-1-3-1-1-3ZM5 3 4 6 1 7l3 1 1 3 1-3 3-1-3-1-1-3Z'/%3E%3C/svg%3E");
}
.pensamos-course-walkthrough__modal-section[data-course-section-icon="alert"] {
--pensamos-section-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm0 4 7.53 13H4.47L12 6Zm-1 4h2v5h-2v-5Zm0 6h2v2h-2v-2Z'/%3E%3C/svg%3E");
}
.pensamos-course-guide[data-route-theme] .pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card .pensamos-course-platform-card__marker[data-course-platform-icon],
.pensamos-course-platform-card__marker--icon[data-course-platform-icon],
.pensamos-course-walkthrough__modal-icon[data-course-platform-icon] {
--pensamos-platform-icon: var(--pensamos-card-item-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3Zm2 0h2V5a1 1 0 0 0-2 0v1ZM5 11v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7h-5v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1H5Z'/%3E%3C/svg%3E"));
}
.pensamos-course-platform-card__marker--icon {
border-radius: 0;
background: transparent;
color: var(--pensamos-compact-card-badge-end, var(--pensamos-platform-accent, #3dbaf3));
box-shadow: none;
font-size: 0;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__marker--icon::before,
.pensamos-course-platform-card__marker--icon::before {
content: "";
display: block;
width: 19px;
height: 19px;
background: currentColor;
filter: drop-shadow(0 1px 1px color-mix(in srgb, currentColor 30%, transparent));
-webkit-mask: var(--pensamos-platform-icon) center / contain no-repeat;
mask: var(--pensamos-platform-icon) center / contain no-repeat;
}
.pensamos-course-walkthrough__modal-head.has-modal-icon {
padding-left: 82px;
background:
radial-gradient(circle at 36px 36px, rgba(108, 214, 255, 0.24), transparent 58px),
#ffffff;
}
.pensamos-course-walkthrough__modal-icon {
position: absolute;
left: 22px;
top: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: #249bd8;
}
.pensamos-course-walkthrough__modal-icon::before {
content: "";
display: block;
width: 30px;
height: 30px;
background: currentColor;
filter: drop-shadow(0 2px 3px rgba(36, 155, 216, 0.18));
-webkit-mask: var(--pensamos-platform-icon) center / contain no-repeat;
mask: var(--pensamos-platform-icon) center / contain no-repeat;
}
.pensamos-course-walkthrough__modal-body .pensamos-course-walkthrough__modal-section[data-course-section-icon]::before {
content: "";
background: currentColor;
color: #3dbaf3;
box-shadow: none;
-webkit-mask: var(--pensamos-section-icon) center / 23px 23px no-repeat;
mask: var(--pensamos-section-icon) center / 23px 23px no-repeat;
}
.pensamos-course-walkthrough__modal-body .pensamos-course-walkthrough__modal-section[data-course-section-icon="target"]::before {
color: #58cc02;
}
.pensamos-course-walkthrough__modal-body .pensamos-course-walkthrough__modal-section[data-course-section-icon="spark"]::before {
color: #ffbf2f;
}
.pensamos-course-walkthrough__modal-body .pensamos-course-walkthrough__modal-section[data-course-section-icon="alert"]::before {
color: #ff6b95;
}
@media (max-width: 560px) {
.pensamos-course-walkthrough__modal-head.has-modal-icon {
padding-left: 64px;
}
.pensamos-course-walkthrough__modal-icon {
left: 16px;
top: 18px;
width: 34px;
height: 34px;
}
.pensamos-course-walkthrough__modal-icon::before {
width: 24px;
height: 24px;
}
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__copy {
gap: 2px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__inner-titles {
padding-top: 10px;
padding-bottom: 10px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__copy strong {
font-size: 0.95rem;
line-height: 1.14;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__copy span {
display: -webkit-box;
min-height: calc(0.8rem * 1.32 * 2);
font-size: 0.8rem;
line-height: 1.32;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__meta {
grid-column: 2;
grid-template-columns: repeat(3, auto);
justify-content: end;
justify-items: end;
text-align: right;
gap: 6px;
margin-top: 4px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__time,
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__state,
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__test-cta {
min-height: 28px;
padding: 0 10px;
font-size: 0.75rem;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__time {
border: 1px solid var(--pensamos-compact-card-border);
background: color-mix(in srgb, var(--pensamos-compact-card-soft) 84%, white);
color: #20314f;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__state {
border: 1px solid var(--pensamos-compact-card-border);
background: color-mix(in srgb, var(--pensamos-compact-card-soft) 90%, white);
color: #607088;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__test-cta {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 999px;
background: linear-gradient(135deg, #111827 0%, #243b62 100%);
color: #fff;
font-weight: 800;
box-shadow: 0 10px 18px rgba(17, 24, 39, 0.12);
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-columns {
gap: 14px;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-column {
gap: 12px;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-card {
gap: 12px;
padding: 16px;
border-radius: 20px;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-card__head {
gap: 10px;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-card__index {
min-width: 30px;
height: 30px;
border-radius: 10px;
font-size: 0.72rem;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-card h3 {
font-size: 0.96rem;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-list {
gap: 8px;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-list__item {
gap: 8px;
font-size: 0.84rem;
line-height: 1.4;
}
.pensamos-course-guide__layout.is-focus-mode #puntos-revisión .pensamos-course-guidance-list__item::before {
width: 8px;
height: 8px;
margin-top: 0.3rem;
}
@media (max-width: 1280px) {
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
@media (max-width: 820px) {
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-card-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-block--compact-route .pensamos-route-tracker__step-meta {
padding-left: 0;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__meta {
grid-column: 1 / -1;
grid-template-columns: auto minmax(0, 1fr);
justify-content: start;
justify-items: start;
text-align: left;
gap: 8px 10px;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__test-cta {
min-height: 36px;
padding-inline: 14px;
font-size: 0.8rem;
box-shadow: 0 10px 20px rgba(17, 24, 39, 0.12);
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-platform-card__state {
align-self: center;
min-height: 24px;
padding-inline: 0;
border: 0;
background: transparent;
}
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-walkthrough__actions .pensamos-course-button.pensamarket-auth__button,
.pensamos-course-guide__layout.is-focus-mode .pensamos-course-walkthrough--compact-route .pensamos-course-walkthrough__actions .pensamos-course-button.pensamarket-auth__button:visited {
min-height: 36px;
padding-inline: 14px;
font-size: 0.8rem;
box-shadow: 0 10px 20px rgba(17, 24, 39, 0.12);
}
.pensamos-course-outcome-matrix {
align-items: flex-start;
flex-direction: column;
}
}
.pensamos-course-chip-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pensamos-course-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(203, 214, 228, 0.95);
background: rgba(248, 251, 255, 0.95);
color: #334155;
font-weight: 700;
font-size: 0.84rem;
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.pensamos-course-chip:hover,
.pensamos-course-chip:focus-visible,
.pensamos-course-chip.is-active {
border-color: rgba(35, 93, 129, 0.3);
background: rgba(35, 93, 129, 0.08);
box-shadow: 0 10px 24px rgba(13, 28, 49, 0.06);
transform: translateY(-1px);
}
.pensamos-course-builder__example {
padding: 18px;
border: 1px solid rgba(214, 224, 236, 0.92);
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 16px 42px rgba(20, 32, 48, 0.08);
}
.pensamos-course-builder__example h3 {
margin: 0;
font-size: 1rem;
color: #172033;
}
.pensamos-course-builder__example pre {
margin: 12px 0;
padding: 14px;
overflow-x: auto;
white-space: pre-wrap;
border-radius: 14px;
background: #f8fbff;
color: #172033;
font: 0.88rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.juego-memoria-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.juego-memoria-modal[hidden] {
display: none;
}
.juego-memoria__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 20, 40, 0.55);
backdrop-filter: blur(2px);
}
.juego-memoria__dialog {
position: relative;
width: min(640px, 100%);
max-height: calc(100vh - 32px);
overflow-y: auto;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(10, 20, 40, 0.35);
padding: 26px 26px 24px;
}
.juego-memoria-modal .juego-memoria__close {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
min-width: 0;
padding: 0;
margin: 0;
border: none;
background: none;
box-shadow: none;
font-size: 1.5rem;
line-height: 1;
color: var(--pensamos-ink, #1f2a44);
cursor: pointer;
border-radius: 8px;
}
.juego-memoria-modal .juego-memoria__close:hover,
.juego-memoria-modal .juego-memoria__close:focus-visible {
background: none;
color: var(--pensamos-deep, #0d1c31);
}
.juego-memoria__eyebrow {
display: inline-block;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pensamos-highlight, #0f6f68);
background: color-mix(in srgb, var(--pensamos-route-soft, #e6f4f1) 80%, #ffffff);
padding: 4px 10px;
border-radius: 999px;
}
.juego-memoria__head h3 {
margin: 12px 0 4px;
font-size: 1.35rem;
color: var(--pensamos-deep, #0d1c31);
}
.juego-memoria__subtitle {
margin: 0;
color: #5a6b85;
font-size: 0.95rem;
}
.juego-memoria__body {
margin-top: 20px;
}
.juego-memoria__timer {
height: 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
overflow: hidden;
margin-bottom: 18px;
}
.juego-memoria__timer-bar {
height: 100%;
width: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--pensamos-accent, #2f80ed), var(--pensamos-highlight, #0f6f68));
transform-origin: left center;
transition: transform linear;
}
.juego-memoria__stimulus {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 8px 0 22px;
}
.juego-memoria__chipwrap {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.juego-memoria__chip {
min-width: 64px;
min-height: 64px;
padding: 10px 14px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 14px;
border: 1px solid rgba(202, 215, 230, 0.9);
background: #f8fafc;
font-size: 1.5rem;
font-weight: 700;
color: var(--pensamos-ink, #1f2a44);
}
.juego-memoria__chip-pos {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #94a3b8;
text-transform: uppercase;
}
.juego-memoria__chip--color {
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
border: none;
}
.juego-memoria__chip--icon {
font-size: 2rem;
}
.juego-memoria__question {
margin-bottom: 18px;
}
.juego-memoria__question-text {
font-weight: 700;
color: var(--pensamos-deep, #0d1c31);
margin: 0 0 10px;
}
.juego-memoria__options {
display: grid;
gap: 8px;
}
.juego-memoria__option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(202, 215, 230, 0.95);
background: #ffffff;
font: inherit;
font-weight: 600;
color: var(--pensamos-ink, #1f2a44);
cursor: pointer;
}
.juego-memoria__option:hover {
border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 45%, #cbd8ea);
}
.juego-memoria__option.is-selected {
border-color: var(--pensamos-accent, #2f80ed);
background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 8%, #ffffff);
}
.juego-memoria__option.is-correct {
border-color: #18a058;
background: rgba(24, 160, 88, 0.1);
}
.juego-memoria__option.is-incorrect {
border-color: #e03e3e;
background: rgba(224, 62, 62, 0.1);
}
.juego-memoria__option[disabled] {
cursor: default;
}
.juego-memoria-modal .juego-memoria__body .juego-memoria__option {
appearance: none;
background: #ffffff;
box-shadow: none;
color: var(--pensamos-ink, #1f2a44);
line-height: 1.35;
}
.juego-memoria-modal .juego-memoria__body .juego-memoria__option:hover:not(.is-selected):not(.is-correct):not(.is-incorrect):not([disabled]),
.juego-memoria-modal .juego-memoria__body .juego-memoria__option:focus-visible:not(.is-selected):not(.is-correct):not(.is-incorrect):not([disabled]) {
border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
color: var(--pensamos-deep, #0d1c31);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pensamos-accent, #2f80ed) 14%, transparent);
}
.juego-memoria-modal .juego-memoria__body .juego-memoria__option.is-selected,
.juego-memoria-modal .juego-memoria__body .juego-memoria__option.is-selected:hover,
.juego-memoria-modal .juego-memoria__body .juego-memoria__option.is-selected:focus-visible {
border-color: var(--pensamos-accent, #2f80ed);
background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 10%, #ffffff);
color: var(--pensamos-deep, #0d1c31);
box-shadow: inset 4px 0 0 var(--pensamos-accent, #2f80ed), 0 0 0 3px color-mix(in srgb, var(--pensamos-accent, #2f80ed) 16%, transparent);
}
.juego-memoria-modal .juego-memoria__body .juego-memoria__option.is-selected * {
color: inherit !important;
}
.juego-memoria__swatch {
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.1);
flex: 0 0 auto;
}
.juego-memoria__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.juego-memoria__btn {
appearance: none;
border: none;
border-radius: 999px;
padding: 11px 20px;
font: inherit;
font-weight: 700;
cursor: pointer;
background: var(--pensamos-accent, #2f80ed);
color: #ffffff;
}
.juego-memoria__btn--ghost {
background: #ffffff;
color: var(--pensamos-deep, #0d1c31);
border: 1px solid rgba(202, 215, 230, 0.95);
}
.juego-memoria-modal .juego-memoria__btn:hover,
.juego-memoria-modal .juego-memoria__btn:focus-visible { color: #ffffff; }
.juego-memoria-modal .juego-memoria__btn--ghost:hover,
.juego-memoria-modal .juego-memoria__btn--ghost:focus-visible { color: var(--pensamos-deep, #0d1c31); background: #f3f7ff; }
.juego-memoria__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.juego-memoria__meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-size: 0.85rem;
color: #5a6b85;
margin-bottom: 6px;
}
.juego-memoria__level-pill {
font-weight: 800;
color: var(--pensamos-highlight, #0f6f68);
}
.juego-memoria__score {
font-size: 2.4rem;
font-weight: 800;
color: var(--pensamos-deep, #0d1c31);
text-align: center;
margin: 8px 0 4px;
}
.juego-memoria__score-caption {
text-align: center;
color: #5a6b85;
margin: 0 0 6px;
}
.juego-memoria__review {
display: grid;
gap: 8px;
margin-top: 16px;
}
.juego-memoria__review-item {
font-size: 0.9rem;
padding: 10px 12px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid rgba(202, 215, 230, 0.7);
}
.juego-memoria__review-item strong {
color: var(--pensamos-deep, #0d1c31);
}
@media (max-width: 480px) {
.juego-memoria__dialog {
padding: 22px 16px 20px;
}
.juego-memoria__chip {
min-width: 54px;
min-height: 54px;
font-size: 1.25rem;
}
}
.juego-lectura-modal .juego-memoria__dialog { padding: 18px 20px; }
.juego-lectura-modal .juego-memoria__head h3 { margin: 6px 0 2px; font-size: 1.2rem; }
.juego-lectura-modal .juego-memoria__subtitle { font-size: 0.86rem; margin: 0; }
.juego-lectura-modal .juego-memoria__body { margin-top: 12px; }
.juego-lectura-modal .juego-lectura__scene { font-size: 2.6rem; margin: 0 0 6px; letter-spacing: 4px; }
.juego-lectura-modal .juego-lectura__reading { padding: 11px 16px; margin-bottom: 10px; }
.juego-lectura-modal .juego-lectura__text { font-size: 1.18rem; line-height: 1.4; }
.juego-lectura-modal .juego-lectura__listen { margin-bottom: 8px; padding: 5px 12px; }
.juego-lectura-modal .juego-lectura__question { margin: 2px 0 10px; font-size: 1.1rem; }
.juego-lectura-modal .juego-lectura__options { gap: 8px; margin-bottom: 6px; }
.juego-lectura-modal .juego-lectura__option { padding: 11px 14px; font-size: 1.05rem; border-radius: 14px; border-width: 2px; }
.juego-lectura-modal .juego-lectura__option-emoji { font-size: 1.6rem; }
.juego-lectura-modal .juego-lectura__hint-btn { margin-top: 2px; padding: 8px 16px; }
.juego-lectura-modal .juego-lectura__hints { margin-top: 10px; gap: 6px; }
.juego-lectura-modal .juego-lectura__hint { padding: 8px 12px; font-size: 0.98rem; }
.juego-lectura-modal .juego-lectura__feedback { margin: 8px 0 0; }
.juego-lectura-modal .juego-lectura__repeat { padding: 11px 16px; margin-top: 10px; }
.juego-lectura-modal .juego-lectura__repeat-word { font-size: 1.35rem; }
.juego-lectura-modal .juego-memoria__actions { margin-top: 10px; }
.juego-lectura-modal .juego-lectura__themes { gap: 10px; }
.juego-lectura-modal .juego-lectura__theme { padding: 14px 18px; font-size: 1.15rem; }
.juego-lectura-modal .juego-lectura__theme-emoji { font-size: 2rem; }
.juego-lectura__themes {
display: grid;
gap: 12px;
}
.juego-lectura__theme {
appearance: none;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
text-align: left;
padding: 18px 20px;
border-radius: 18px;
border: 2px solid rgba(202, 215, 230, 0.95);
background: #ffffff;
font: inherit;
font-size: 1.25rem;
font-weight: 800;
color: var(--pensamos-deep, #0d1c31);
cursor: pointer;
}
.juego-lectura__theme:hover {
border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
}
.juego-lectura__theme-emoji {
font-size: 2.4rem;
flex: 0 0 auto;
}
.juego-lectura__scene {
text-align: center;
font-size: 3.6rem;
line-height: 1.1;
letter-spacing: 6px;
margin: 4px 0 8px;
}
.juego-lectura__reading {
background: #f7fbff;
border: 1px solid rgba(202, 215, 230, 0.9);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 14px;
}
.juego-lectura__text {
font-size: 1.35rem;
line-height: 1.55;
color: var(--pensamos-deep, #0d1c31);
margin: 0;
font-weight: 700;
text-align: center;
}
.juego-lectura__repeat {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
background: #eefaf3;
border: 2px dashed #18a058;
border-radius: 16px;
padding: 14px 18px;
margin-top: 14px;
}
.juego-lectura__repeat-label {
font-weight: 700;
color: #0f6f68;
}
.juego-lectura__repeat-word {
font-size: 1.5rem;
font-weight: 800;
color: var(--pensamos-deep, #0d1c31);
}
.juego-lectura__listen {
appearance: none;
border: 1px solid rgba(202, 215, 230, 0.95);
background: #ffffff;
border-radius: 999px;
padding: 6px 14px;
font: inherit;
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
color: var(--pensamos-deep, #0d1c31);
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.juego-lectura__listen:hover {
border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 45%, #cbd8ea);
}
.juego-lectura__question {
font-size: 1.2rem;
font-weight: 800;
color: var(--pensamos-deep, #0d1c31);
margin: 4px 0 14px;
}
.juego-lectura__options {
display: grid;
gap: 10px;
margin-bottom: 8px;
}
.juego-lectura__option {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-align: left;
padding: 14px 16px;
border-radius: 16px;
border: 2px solid rgba(202, 215, 230, 0.95);
background: #ffffff;
font: inherit;
font-size: 1.15rem;
font-weight: 700;
color: var(--pensamos-ink, #1f2a44);
cursor: pointer;
}
.juego-lectura__option:hover:not([disabled]) {
border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
}
.juego-lectura__option-emoji {
font-size: 1.8rem;
flex: 0 0 auto;
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:hover,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:focus,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:focus-visible,
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:disabled {
appearance: none;
background: #ffffff;
color: var(--pensamos-ink, #1f2a44);
box-shadow: none;
opacity: 1;
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:hover:not([disabled]) {
border-color: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 55%, #cbd8ea);
background: color-mix(in srgb, var(--pensamos-accent, #2f80ed) 6%, #ffffff);
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option.is-correct {
border-color: #18a058;
background: rgba(24, 160, 88, 0.14);
color: var(--pensamos-deep, #0d1c31);
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option.is-wrong {
border-color: #e0a800;
background: rgba(224, 168, 0, 0.16);
color: var(--pensamos-deep, #0d1c31);
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option * {
color: inherit;
}
.juego-lectura__hint-btn {
appearance: none;
border: none;
border-radius: 999px;
padding: 10px 18px;
font: inherit;
font-weight: 800;
cursor: pointer;
background: #fde68a;
color: #7c5b00;
margin-top: 6px;
}
.juego-lectura-modal .juego-lectura__hint-btn:hover,
.juego-lectura-modal .juego-lectura__hint-btn:focus-visible { background: #fcd34d; color: #7c5b00; }
.juego-lectura__hint-btn:disabled {
opacity: 0.5;
cursor: default;
}
.juego-lectura__hints {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
gap: 8px;
}
.juego-lectura__hint {
background: #fffaf0;
border: 1px solid #fde68a;
border-radius: 12px;
padding: 10px 14px;
font-size: 1.05rem;
color: #5a4a00;
display: flex;
gap: 8px;
align-items: flex-start;
}
.juego-lectura__feedback {
font-size: 1.1rem;
font-weight: 800;
margin: 12px 0 0;
min-height: 1.4em;
}
.juego-lectura__feedback.is-good { color: #18a058; }
.juego-lectura__feedback.is-soft { color: #b07a00; }
@media (max-width: 480px) {
.juego-lectura__text { font-size: 1.1rem; }
.juego-lectura__emoji { font-size: 2.4rem; }
.juego-lectura__option { font-size: 1.05rem; }
}
.juego-lectura-modal .juego-lectura__theme {
transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.juego-lectura-modal .juego-lectura__theme:hover,
.juego-lectura-modal .juego-lectura__theme:focus-visible {
border-color: var(--pensamos-accent, #2f80ed);
background: #f3f8ff;
box-shadow: 0 3px 12px rgba(47, 128, 237, 0.12);
outline: none;
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option {
transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:hover:not([disabled]),
.juego-lectura-modal .juego-memoria__body .juego-lectura__option:focus-visible:not([disabled]) {
border-color: var(--pensamos-accent, #2f80ed);
background: #f3f8ff;
box-shadow: 0 2px 10px rgba(47, 128, 237, 0.10);
outline: none;
}
.juego-lectura-modal .juego-lectura__listen:hover,
.juego-lectura-modal .juego-lectura__listen:focus-visible {
border-color: var(--pensamos-accent, #2f80ed);
background: #f3f8ff;
outline: none;
}
.kids-story__dialog {
max-height: min(92vh, 850px);
overflow-y: auto;
}
.kids-story__body {
color: #17243a;
}
.kids-story__body button {
min-width: 44px;
min-height: 44px;
}
.kids-story__dialog > .juego-memoria__close {
min-width: 44px;
min-height: 44px;
}
.kids-story__body button:focus-visible,
.kids-story__dialog > .juego-memoria__close:focus-visible {
outline: 3px solid #3257c9;
outline-offset: 3px;
}
.kids-story__intro,
.kids-story__completion {
text-align: center;
}
.kids-story__hero,
.kids-story__celebration {
font-size: clamp(3rem, 10vw, 5rem);
line-height: 1;
animation: kids-story-float 1.8s ease-in-out infinite alternate;
}
.kids-story__lead,
.kids-story__scenario {
font-size: clamp(1rem, 2.5vw, 1.14rem);
line-height: 1.65;
}
.kids-story__transcript {
margin: 16px 0;
padding: 12px 14px;
border-radius: 14px;
background: #eef4ff;
color: #263a59;
font-size: .92rem;
text-align: left;
}
.kids-story__progress {
display: grid;
gap: 6px;
margin-bottom: 18px;
}
.kids-story__progress-text {
font-size: 1.15rem;
font-weight: 900;
color: #173d78;
}
.kids-story__progress progress {
width: 100%;
height: 14px;
accent-color: #1769aa;
}
.kids-story__scenario {
margin: 0 0 14px;
padding: 18px;
border: 2px solid #b6cef1;
border-radius: 18px;
background: #f5f9ff;
}
.kids-story__question {
margin: 22px 0 14px;
font-size: clamp(1.2rem, 3vw, 1.5rem);
line-height: 1.35;
color: #0d2f5e;
}
.kids-story__answers {
display: grid;
gap: 10px;
}
.kids-story__answer-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px;
gap: 8px;
align-items: stretch;
}
.kids-story__answer {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: 2px solid #849ec4;
border-radius: 15px;
background: #fff;
color: #17243a;
font-weight: 750;
text-align: left;
cursor: pointer;
transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.kids-story__answer:hover:not(:disabled) {
border-color: #215ea6;
background: #eaf3ff;
color: #102b50;
transform: translateY(-2px);
}
.kids-story__answer.is-correct {
border-color: #176b45;
background: #dff5e9;
color: #0b472c;
}
.kids-story__answer.is-wrong {
border-color: #a42b32;
background: #fde9e8;
color: #68191f;
animation: kids-story-shake .35s ease;
}
.kids-story__answer-letter {
display: inline-grid;
place-items: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #173d78;
color: #fff;
}
.kids-story__listen,
.kids-story__hint-btn,
.kids-story__audio-btn {
padding: 9px 13px;
border: 2px solid #416b9f;
border-radius: 12px;
background: #fff;
color: #173d78;
font-weight: 800;
cursor: pointer;
}
.kids-story__listen:hover:not(:disabled),
.kids-story__hint-btn:hover:not(:disabled),
.kids-story__audio-btn:hover:not(:disabled) {
background: #e7f1ff;
color: #0d315f;
}
.kids-story__listen:disabled,
.kids-story__hint-btn:disabled,
.kids-story__audio-btn:disabled {
opacity: .58;
cursor: not-allowed;
}
.kids-story__listen--answer {
padding: 6px;
font-size: 1.1rem;
}
.kids-story__hint-zone {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #c9d7ea;
}
.kids-story__hints {
display: grid;
gap: 8px;
margin: 12px 0 0;
padding-left: 24px;
}
.kids-story__hints li {
padding: 10px 12px;
border-radius: 12px;
background: #fff4cc;
color: #523d00;
}
.kids-story__listen--hint {
display: block;
margin-top: 8px;
}
.kids-story__feedback {
margin-top: 16px;
padding: 0;
border-radius: 14px;
}
.kids-story__feedback.is-success,
.kids-story__feedback.is-retry {
padding: 14px;
}
.kids-story__feedback.is-success {
border: 2px solid #2f815d;
background: #e3f6ec;
color: #0b472c;
}
.kids-story__feedback.is-retry {
border: 2px solid #b85c27;
background: #fff0e7;
color: #61270a;
}
.kids-story__feedback p {
margin: 6px 0 10px;
}
.kids-story__audio {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 16px;
padding: 12px;
border-radius: 14px;
background: #eef3fa;
}
.kids-story__speech-status {
flex: 1 1 100%;
min-height: 1.4em;
color: #33445e;
font-size: .9rem;
}
.kids-story__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.kids-story__stars {
margin: 12px 0;
color: #7a4e00;
font-size: 2.4rem;
letter-spacing: 5px;
}
.kids-story__notice {
display: grid;
place-items: center;
min-height: 220px;
text-align: center;
}
.kids-story__notice--error {
color: #68191f;
}
.kids-story__spinner {
width: 48px;
height: 48px;
border: 5px solid #c7d7ee;
border-top-color: #245d9c;
border-radius: 50%;
animation: kids-story-spin .8s linear infinite;
}
@keyframes kids-story-spin { to { transform: rotate(360deg); } }
@keyframes kids-story-float { to { transform: translateY(-6px) rotate(2deg); } }
@keyframes kids-story-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 520px) {
.kids-story__dialog { max-height: 96vh; }
.kids-story__answer-row { grid-template-columns: minmax(0, 1fr) 44px; }
.kids-story__audio { display: grid; grid-template-columns: 1fr 1fr; }
.kids-story__speech-status { grid-column: 1 / -1; }
.kids-story__actions { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
.kids-story *,
.kids-story *::before,
.kids-story *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
.tb { display: flex; flex-direction: column; gap: 16px; }
.tb__bar {
position: sticky; top: 8px; z-index: 5;
background: #ffffff; border: 2px solid #e7eefb; border-radius: 18px;
padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.tb__strip {
min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
background: #f6f9ff; border: 2px dashed #cdd9f5; border-radius: 12px; padding: 8px 10px;
}
.tb-strip__hint { color: #8aa0c6; font-size: 0.98rem; }
.tb-chip {
display: inline-flex; align-items: center; gap: 6px;
background: #eaf1ff; border: 2px solid #c7d6f7; border-radius: 12px;
padding: 4px 10px; font-weight: 800; color: var(--pensamos-deep, #0d1c31); font-size: 1.05rem;
}
.tb-chip span { font-size: 1.3rem; line-height: 1; }
.tb__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tb__btn {
flex: 1; min-width: 96px;
border: 2px solid #dbe6fb; border-radius: 12px; background: #fff;
padding: 10px 12px; font-weight: 800; color: #51618a; cursor: pointer; font-size: 1rem;
}
.tb__btn:hover,
.tb__btn:focus-visible { border-color: #c7d6f7; color: #51618a; }
.tb__btn--say,
.tb__btn--say:hover,
.tb__btn--say:focus-visible { background: var(--pensamos-highlight, #4f7cff); color: #fff; border-color: var(--pensamos-highlight, #4f7cff); box-shadow: 0 4px 0 #3257c9; }
.tb__btn--say:active { transform: translateY(4px); box-shadow: none; }
.tb__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-tab {
display: inline-flex; align-items: center; gap: 6px;
border: 2px solid #e7eefb; border-radius: 999px; background: #fff;
padding: 8px 14px; font-weight: 800; color: #51618a; cursor: pointer; font-size: 0.95rem;
}
.tb-tab span:first-child { font-size: 1.2rem; }
.tb-tab:hover,
.tb-tab:focus-visible { color: var(--pensamos-deep, #0d1c31); border-color: #c7d6f7; }
.tb-tab.is-active { background: #eaf1ff; color: var(--pensamos-deep, #0d1c31); border-color: #c7d6f7; }
.tb__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.tb-cell {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: #fff; border: 2px solid #e7eefb; border-radius: 18px;
padding: 16px 8px; cursor: pointer; box-shadow: 0 4px 0 #e2e9f5;
transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.12s ease;
}
.tb-cell:hover { border-color: #c7d6f7; transform: translateY(-2px); }
.tb-cell:active, .tb-cell.is-tapped { transform: translateY(4px); box-shadow: 0 0 0 #e2e9f5; border-color: var(--pensamos-highlight, #4f7cff); }
.tb-cell__emoji { font-size: 2.6rem; line-height: 1; }
.tb-cell__word { font-weight: 800; color: var(--pensamos-deep, #0d1c31); font-size: 1.05rem; }
@media (max-width: 560px) {
.tb__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.tb-cell__emoji { font-size: 2.1rem; }
.tb-cell__word { font-size: 0.92rem; }
}
.respira { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.respira__modes { display: flex; gap: 8px; }
.respira__mode {
border: 2px solid #e7eefb; border-radius: 999px; background: #fff;
padding: 8px 16px; font-weight: 800; color: #51618a; cursor: pointer; font-size: 0.95rem;
}
.respira__mode:hover,
.respira__mode:focus-visible { color: var(--pensamos-deep, #0d1c31); border-color: #c7d6f7; }
.respira__mode.is-active { background: #eaf1ff; color: var(--pensamos-deep, #0d1c31); border-color: #c7d6f7; }
.respira__stage {
width: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center;
margin: 6px 0;
}
.respira__circle {
width: 150px; height: 150px; border-radius: 50%;
background: #cfe0ff; display: grid; place-items: center;
transform: scale(1); box-shadow: 0 0 0 12px rgba(79, 124, 255, 0.10);
}
.respira__circle.is-big {
transform: scale(1.7);
background: #b9d2ff; box-shadow: 0 0 0 18px rgba(79, 124, 255, 0.14);
}
.respira__circle-emoji { font-size: 3rem; line-height: 1; }
.respira__cue { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--pensamos-deep, #0d1c31); text-align: center; min-height: 1.6em; }
.respira__sub { margin: 0; color: #51618a; font-size: 1rem; text-align: center; }
.respira__bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.respira__btn--go {
border: 0; border-radius: 16px; background: var(--pensamos-highlight, #4f7cff); color: #fff;
font-weight: 800; font-size: 1.15rem; padding: 14px 30px; cursor: pointer;
box-shadow: 0 5px 0 #3257c9;
}
.respira__btn--go:active { transform: translateY(5px); box-shadow: none; }
.respira__btn--go.is-running { background: #51618a; box-shadow: 0 5px 0 #3a4763; }
.respira__count { color: #7a4e00; background: #fff7e6; border: 2px solid #ffe3a6; border-radius: 999px; padding: 5px 14px; font-weight: 800; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
.respira__circle, .respira__circle.is-big { transition: none !important; transform: scale(1.25); }
}
.sug {
--sug-purple: #624099;
--sug-purple-dark: #3d275f;
--sug-yellow: #ffef9f;
--sug-border: #d9c9ef;
max-width: 680px;
margin: 16px auto 0;
color: var(--pensamos-ink, #1f2a44);
}
.sug [hidden] { display: none !important; }
.sug__hero {
display: flex;
align-items: center;
gap: 18px;
padding: 24px;
border: 3px solid #9875ca;
border-radius: 28px;
background:
radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.9) 0 7%, transparent 7.5%),
linear-gradient(135deg, #fff4ad 0%, #f3e8ff 100%);
box-shadow: 0 8px 0 #dac6ef;
}
.sug__hero-icon {
display: grid;
place-items: center;
width: 76px;
height: 76px;
flex: 0 0 76px;
border-radius: 50%;
background: #fff;
font-size: 2.65rem;
box-shadow: 0 4px 0 rgba(98, 64, 153, 0.18);
}
.sug__eyebrow {
display: block;
margin-bottom: 3px;
color: #6b4b97;
font-size: 0.76rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sug__hero h1 { margin: 0; color: var(--sug-purple-dark); font-size: clamp(1.65rem, 5vw, 2.25rem); line-height: 1.05; }
.sug__hero p { margin: 8px 0 0; color: #58486c; font-size: 1.02rem; line-height: 1.55; }
.sug__explain {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 24px;
padding: 18px 20px;
border: 2px solid #e4d9f3;
border-radius: 20px;
background: #fff;
}
.sug__explain h2 { margin: 0; color: var(--sug-purple-dark); font-size: 1.15rem; }
.sug__explain p { margin: 4px 0 0; color: #5d6680; line-height: 1.5; }
.sug__explain-badge {
flex: 0 0 auto;
padding: 7px 12px;
border-radius: 999px;
background: #fff6c8;
color: #664f00;
font-size: 0.82rem;
font-weight: 900;
}
.sug__form {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 18px;
padding: 22px;
border: 2px solid var(--sug-border);
border-radius: 24px;
background: #fff;
}
.sug__fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sug__fieldset legend, .sug__label { color: var(--pensamos-deep, #0d1c31); font-size: 1.04rem; font-weight: 900; }
.sug__categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.sug__category { position: relative; cursor: pointer; }
.sug__category input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sug__category-card {
display: flex;
align-items: center;
gap: 9px;
min-height: 56px;
padding: 10px 12px;
border: 2px solid #dfe6f3;
border-radius: 15px;
background: #f9fbff;
color: #42506d;
line-height: 1.25;
transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.sug__category-card > span { font-size: 1.3rem; }
.sug__category input:checked + .sug__category-card { border-color: #8360b9; background: #f2eaff; color: var(--sug-purple-dark); }
.sug__category input:focus-visible + .sug__category-card { outline: 3px solid #4f7cff; outline-offset: 2px; }
.sug__category:hover .sug__category-card { transform: translateY(-1px); border-color: #bca7d9; }
.sug__field { display: flex; flex-direction: column; gap: 6px; }
.sug__help { margin: 0; color: #65708b; font-size: 0.9rem; }
.sug__textarea {
width: 100%;
min-height: 150px;
padding: 15px 16px;
resize: vertical;
border: 2px solid #ccd9ef;
border-radius: 16px;
background: #fff;
color: var(--pensamos-ink, #1f2a44);
font: inherit;
line-height: 1.5;
}
.sug__textarea:focus { outline: 3px solid rgba(79, 124, 255, 0.25); outline-offset: 2px; border-color: #4f7cff; }
.sug__textarea[aria-invalid="true"] { border-color: #b42318; }
.sug__field-meta { display: flex; justify-content: space-between; gap: 16px; min-height: 1.35em; }
.sug__field-error { color: #a32018; font-size: 0.86rem; font-weight: 800; }
.sug__count { margin-left: auto; color: #65708b; font-size: 0.82rem; white-space: nowrap; }
.sug__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sug__privacy, .sug__after {
margin: 0;
padding: 12px 14px;
border-radius: 14px;
font-size: 0.9rem;
line-height: 1.45;
}
.sug__privacy { background: #edf7ff; color: #244b6d; }
.sug__after { border: 1px solid #e8ddf5; background: #fbf8ff; color: #625476; }
.sug__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
align-self: flex-start;
min-height: 48px;
padding: 12px 24px;
border: 0;
border-radius: 16px;
background: var(--sug-purple);
box-shadow: 0 5px 0 var(--sug-purple-dark);
color: #fff;
font-size: 1.02rem;
font-weight: 900;
cursor: pointer;
}
.sug__btn:hover, .sug__btn:focus-visible { color: #fff; filter: brightness(1.08); }
.sug__btn:focus-visible { outline: 3px solid #4f7cff; outline-offset: 3px; }
.sug__btn:active { transform: translateY(5px); box-shadow: none; }
.sug__btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.2); box-shadow: none; }
.sug__btn--secondary { border: 2px solid #cdbce4; background: #fff; box-shadow: none; color: var(--sug-purple-dark); }
.sug__btn--secondary:hover, .sug__btn--secondary:focus-visible { color: var(--sug-purple-dark); background: #f7f1ff; }
.sug__msg { min-height: 1.4em; margin: 0; font-weight: 800; line-height: 1.45; }
.sug__msg:focus { outline: none; }
.sug__msg.is-ok { color: #18794e; }
.sug__msg.is-err { padding: 10px 12px; border-left: 4px solid #b42318; border-radius: 8px; background: #fff1f0; color: #8f1c14; }
.sug__success {
margin-top: 22px;
padding: 34px 24px;
border: 3px solid #e5bd3d;
border-radius: 26px;
background: linear-gradient(145deg, #fff9d8 0%, #fff 100%);
text-align: center;
}
.sug__success:focus { outline: 3px solid rgba(79, 124, 255, 0.4); outline-offset: 3px; }
.sug__success-icon { display: block; font-size: 3rem; }
.sug__success h2 { margin: 8px 0 0; color: var(--sug-purple-dark); }
.sug__success p { margin: 6px 0 0; color: #5d6680; }
.sug__success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
@media (max-width: 520px) {
.sug { margin-top: 6px; }
.sug__hero { align-items: flex-start; gap: 12px; padding: 18px 16px; border-radius: 22px; box-shadow: 0 5px 0 #dac6ef; }
.sug__hero-icon { width: 52px; height: 52px; flex-basis: 52px; font-size: 1.8rem; }
.sug__hero h1 { font-size: 1.45rem; }
.sug__hero p { font-size: 0.94rem; }
.sug__explain { align-items: flex-start; flex-direction: column; gap: 10px; padding: 16px; }
.sug__form { padding: 17px 14px; border-radius: 20px; }
.sug__categories { grid-template-columns: 1fr; }
.sug__btn { align-self: stretch; width: 100%; }
.sug__success-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.sug__category-card, .sug__btn { transition: none; }
.sug__category:hover .sug__category-card { transform: none; }
}
body.pensamos-kids-hub .pensamos-course-guide { display: none !important; }
body.pensamos-kids-hub .site-footer,
body.pensamos-kids-hub .ast-above-footer-wrap { display: none !important; }
body.pensamos-kids-hub #main,
body.pensamos-kids-hub #primary,
body.pensamos-kids-hub .site-content .ast-container { max-width: none; width: 100%; padding: 0; margin: 0; }
body.pensamos-kids-hub #content { padding: 0; }
.kids-app {
--kids-blue: #4f7cff;
--kids-path-shift: 96px;
display: flex;
align-items: stretch;
width: 100%;
min-width: 0;
min-height: 86vh;
background:
radial-gradient(circle at 18% -8%, rgba(79, 124, 255, 0.14), transparent 40%),
linear-gradient(180deg, #eef4ff 0%, #f8fbff 50%, #ffffff 100%);
font-family: inherit;
color: var(--pensamos-ink, #1f2a44);
}
.kids-app *, .kids-app *::before, .kids-app *::after { box-sizing: border-box; }
.kids-app__sidebar {
flex: 0 0 232px;
width: 232px;
display: flex;
flex-direction: column;
background: #ffffff;
border-right: 2px solid #e7eefb;
padding: 20px 14px;
position: sticky;
top: 0;
align-self: flex-start;
min-height: 86vh;
}
.kids-app__brand {
display: flex; align-items: center; gap: 8px;
font-size: 1.15rem; font-weight: 800;
color: var(--pensamos-deep, #0d1c31);
padding: 4px 8px 18px;
}
.kids-app__nav-list { display: flex; flex-direction: column; gap: 8px; }
.kids-app__nav {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border: 2px solid transparent;
border-radius: 16px;
background: transparent;
font-size: 1.02rem; font-weight: 800; color: #51618a;
cursor: pointer; text-align: left; width: 100%;
transition: background 0.15s ease;
}
.kids-app__nav:hover,
.kids-app__nav:focus-visible { background: #f3f7ff; color: var(--pensamos-deep, #0d1c31); }
.kids-app__nav:focus-visible,
.kids-app__profile:focus-visible,
.kids-app__node:focus-visible {
outline: 3px solid #3257c9;
outline-offset: 3px;
}
.kids-app__nav.is-active { background: #eaf1ff; color: var(--pensamos-deep, #0d1c31); border-color: #c7d6f7; }
.kids-app__nav[disabled] { opacity: 0.45; cursor: default; }
.kids-app__nav-icon { font-size: 1.5rem; line-height: 1; width: 30px; text-align: center; }
.kids-app__nav-short { display: none; }
.kids-app__participate {
margin-top: auto;
padding: 18px 2px 0;
border-top: 2px dashed #d9cef8;
}
.kids-app__participate-kicker {
display: block;
margin: 0 8px 7px;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #6f52a3;
}
.kids-app__suggestions-entry {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px;
border: 2px solid #9a78d1;
border-radius: 18px;
background: linear-gradient(135deg, #fff7cc 0%, #f5eaff 100%);
color: #362353;
text-align: left;
cursor: pointer;
box-shadow: 0 5px 0 #d8c4ef;
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.kids-app__suggestions-entry:hover,
.kids-app__suggestions-entry:focus-visible {
color: #362353;
filter: brightness(1.02);
transform: translateY(-2px);
box-shadow: 0 7px 0 #d8c4ef;
}
.kids-app__suggestions-entry:focus-visible { outline: 3px solid #4f7cff; outline-offset: 3px; }
.kids-app__suggestions-entry:active { transform: translateY(5px); box-shadow: none; }
.kids-app__suggestions-entry.is-active { border-color: #5d3d91; background: linear-gradient(135deg, #ffed91 0%, #e7d5ff 100%); }
.kids-app__suggestions-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 50%;
background: #fff;
font-size: 1.35rem;
}
.kids-app__suggestions-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.kids-app__suggestions-copy strong { font-size: 0.9rem; line-height: 1.15; }
.kids-app__suggestions-copy small { color: #6f5d82; font-size: 0.75rem; font-weight: 700; }
.kids-app__suggestions-short { display: none; font-size: 0.64rem; font-weight: 900; }
.kids-app__suggestions-badge {
position: absolute;
top: -10px;
right: -7px;
padding: 3px 7px;
border: 2px solid #fff;
border-radius: 999px;
background: #b51f5b;
color: #fff;
font-size: 0.62rem;
font-weight: 900;
line-height: 1;
}
.kids-app__main { flex: 1; min-width: 0; padding: 22px 18px 90px; max-width: 720px; margin: 0 auto; width: 100%; }
.kids-app__stars-total {
display: inline-flex; align-items: center; gap: 6px;
background: #fff7e6; color: #7a4e00; border: 2px solid #ffe3a6;
font-weight: 800; padding: 6px 14px; border-radius: 999px; font-size: 1rem;
}
.kids-app__head {
display: flex; align-items: center; gap: 16px;
margin: 18px 0 4px; padding: 18px 20px;
background: #ffffff; border: 2px solid #e7eefb; border-radius: 22px;
}
.kids-app__head > div { min-width: 0; }
.kids-app__head-emoji { font-size: 2.6rem; line-height: 1; }
.kids-app__head-title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--pensamos-deep, #0d1c31); overflow-wrap: anywhere; }
.kids-app__head-sub { margin: 2px 0 0; color: #51618a; font-size: 0.98rem; }
.kids-app__path { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.kids-app__node-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(calc((var(--i) - 0.5) * var(--kids-path-shift))); }
.kids-app__node {
width: 92px; height: 92px; border-radius: 50%;
border: 0; cursor: pointer;
display: grid; place-items: center;
background: #c7d6f7; box-shadow: 0 6px 0 #a9c0f0;
transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.kids-app__node:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a9c0f0; }
.kids-app__node:active { transform: translateY(6px); box-shadow: 0 0 0 #a9c0f0; }
.kids-app__node-icon { font-size: 2.7rem; line-height: 1; }
.kids-app__node-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kids-app__node-label { max-width: 150px; font-weight: 800; color: var(--pensamos-deep, #0d1c31); font-size: 1rem; text-align: center; overflow-wrap: anywhere; }
.kids-app__node-stars { font-size: 1.05rem; letter-spacing: 1px; }
.kids-app__star { color: #5f6b7f; }
.kids-app__star.is-on { color: #7a4e00; }
.kids-app__empty { text-align: center; color: #51618a; font-size: 1.1rem; padding: 40px 0; }
.kids-app__empty a { display: inline-flex; align-items: center; min-height: 44px; }
.kids-app__nav[data-tone="mates"].is-active { border-color: #c7d6f7; }
.kids-app__node[data-tone="mates"] { background: #dbe6ff; box-shadow: 0 6px 0 #b4caf6; }
.kids-app__node[data-tone="mates"]:hover { box-shadow: 0 8px 0 #b4caf6; }
.kids-app__node[data-tone="lectura"] { background: #d8f3e3; box-shadow: 0 6px 0 #a6dcbb; }
.kids-app__node[data-tone="lectura"]:hover { box-shadow: 0 8px 0 #a6dcbb; }
.kids-app__node[data-tone="logica"] { background: #ece2ff; box-shadow: 0 6px 0 #cdbcf6; }
.kids-app__node[data-tone="logica"]:hover { box-shadow: 0 8px 0 #cdbcf6; }
.kids-app__node[data-tone="comunicacion"] { background: #ffe6d6; box-shadow: 0 6px 0 #ffc4a3; }
.kids-app__node[data-tone="comunicacion"]:hover { box-shadow: 0 8px 0 #ffc4a3; }
.kids-app__node[data-tone="ingles"] { background: #d6f3ef; box-shadow: 0 6px 0 #a6e0d8; }
.kids-app__node[data-tone="ingles"]:hover { box-shadow: 0 8px 0 #a6e0d8; }
.kids-app__node[data-tone="cocina"] { background: #ffe3b0; box-shadow: 0 6px 0 #f3c970; }
.kids-app__node[data-tone="cocina"]:hover { box-shadow: 0 8px 0 #f3c970; }
.kids-app__node[data-tone="vida"] { background: #ffd9ec; box-shadow: 0 6px 0 #f3b3d6; }
.kids-app__node[data-tone="vida"]:hover { box-shadow: 0 8px 0 #f3b3d6; }
.kids-app__profile {
display: flex; align-items: center; gap: 10px; width: 100%;
border: 2px solid #e7eefb; border-radius: 16px; background: #fff;
padding: 8px 10px; margin: 0 0 14px; cursor: pointer;
font-weight: 800; color: var(--pensamos-deep, #0d1c31); text-align: left;
}
.kids-app__profile:hover,
.kids-app__profile:focus-visible { background: #f3f7ff; color: var(--pensamos-deep, #0d1c31); }
.kids-app__profile.is-active { border-color: #c7d6f7; background: #eaf1ff; }
.kids-app__avatar {
width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
background: #3257c9; color: #fff;
display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.kids-app__profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kids-app__profile-fab { display: none; }
.kids-app__profile-card {
background: #fff; border: 2px solid #e7eefb; border-radius: 22px;
padding: 26px 20px; margin-top: 18px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kids-app__avatar--big { width: 84px; height: 84px; font-size: 2.4rem; }
.kids-app__profile-greet { font-size: 1.3rem; font-weight: 800; color: var(--pensamos-deep, #0d1c31); margin: 4px 0 0; }
.kids-app__profile-stars { background: #fff7e6; color: #7a4e00; border: 2px solid #ffe3a6; border-radius: 999px; padding: 6px 16px; font-weight: 800; }
.kids-app__profile-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; margin-top: 8px; }
.kids-app__salir {
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 18px; border-radius: 14px; border: 2px solid #dbe6fb;
background: #fff; font-weight: 800; color: #51618a; text-decoration: none;
}
.kids-app__salir:hover,
.kids-app__salir:focus-visible { border-color: #c7d6f7; color: #51618a; }
.kids-app__salir--primary,
.kids-app__salir--primary:hover,
.kids-app__salir--primary:focus-visible { background: #3257c9; color: #fff; border-color: #3257c9; box-shadow: 0 4px 0 #203f9e; }
.kids-app__node.is-locked { background: #e9edf4; box-shadow: 0 6px 0 #d4dbe7; cursor: default; }
.kids-app__node.is-locked .kids-app__node-icon { filter: grayscale(1); opacity: 0.7; font-size: 2rem; }
.kids-app__node.is-locked:hover { transform: none; box-shadow: 0 6px 0 #d4dbe7; }
.kids-app__node { position: relative; }
.kids-app__node.is-current::after {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
border: 3px solid rgba(79, 124, 255, 0.55); pointer-events: none;
animation: kids-ring 1.5s ease-out infinite;
}
@keyframes kids-ring {
0% { transform: scale(1); opacity: 0.85; }
100% { transform: scale(1.35); opacity: 0; }
}
.kids-app__node-wrap { animation: kids-pop 0.32s ease both; }
@keyframes kids-pop {
from { opacity: 0; transform: translateX(calc((var(--i) - 0.5) * var(--kids-path-shift))) scale(0.8); }
to { opacity: 1; transform: translateX(calc((var(--i) - 0.5) * var(--kids-path-shift))) scale(1); }
}
.kids-app__node.is-shake { animation: kids-shake 0.4s; }
@keyframes kids-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-7px); }
40%, 80% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
.kids-app__node.is-current::after, .kids-app__node-wrap, .kids-app__node.is-shake { animation: none; }
}
@media (max-width: 820px) {
.kids-app { flex-direction: column; }
.kids-app__sidebar {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
width: auto; flex: none; min-height: 0;
flex-direction: row; align-items: center; gap: 6px;
border-right: 0; border-top: 2px solid #e7eefb;
padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
z-index: 60; box-shadow: 0 -6px 18px rgba(13, 28, 49, 0.08);
}
.kids-app__brand { display: none; }
.kids-app__profile { display: none; }
.kids-app__profile-fab {
display: flex; position: fixed; top: 10px; right: 10px; z-index: 61;
width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e7eefb;
background: #fff; align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 4px 12px rgba(13, 28, 49, 0.12);
}
.kids-app__nav-list { flex: 1 1 auto; min-width: 0; flex-direction: row; justify-content: flex-start; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kids-app__nav-list::-webkit-scrollbar { display: none; }
.kids-app__nav { flex: 0 0 auto; width: 62px; min-width: 62px; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 0.7rem; border-radius: 12px; align-items: center; text-align: center; }
.kids-app__nav-icon { font-size: 1.4rem; width: auto; }
.kids-app__nav-label { font-size: 0.66rem; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kids-app__participate { flex: 0 0 66px; margin: 0; padding: 0 0 0 6px; border-top: 0; border-left: 2px solid #ded3f2; }
.kids-app__participate-kicker, .kids-app__suggestions-copy { display: none; }
.kids-app__suggestions-entry {
width: 60px; min-width: 60px; min-height: 54px;
flex-direction: column; justify-content: center; gap: 1px;
padding: 5px 2px; border-radius: 13px; text-align: center;
box-shadow: 0 3px 0 #d8c4ef;
}
.kids-app__suggestions-entry:hover,
.kids-app__suggestions-entry:focus-visible { transform: none; box-shadow: 0 3px 0 #d8c4ef; }
.kids-app__suggestions-entry:active { transform: translateY(3px); box-shadow: none; }
.kids-app__suggestions-icon { display: block; width: auto; height: auto; flex: none; background: transparent; font-size: 1.35rem; }
.kids-app__suggestions-short { display: block; }
}
@media (max-width: 520px) {
.kids-app { --kids-path-shift: 64px; }
.kids-app__nav-label { display: none; }
.kids-app__nav-short { display: block; font-size: 0.6rem; line-height: 1.05; white-space: nowrap; font-weight: 800; }
.kids-app__nav-icon { font-size: 1.35rem; }
.kids-app__main { padding: 16px 14px 96px; }
.kids-app__node { width: 80px; height: 80px; }
.kids-app__node-icon { font-size: 2.3rem; }
}