/* ============================================================================ HOME Usa los tokens de tokens.css y los componentes de components.css. Breakpoints permitidos: 480 / 640 / 768 / 1024 / 1280, siempre en min-width. ============================================================================ */ /* ---------------------------------------------------------------------------- Reventón de grid/flex. Los items de grid y flex traen min-width:auto, así que no pueden encogerse por debajo del ancho intrínseco de su contenido: la imagen del hero (1400px de ancho nativo) estiraba su columna y, con el overflow-x:clip del , el texto de toda la página quedaba cortado en móvil en vez de hacer scroll. -------------------------------------------------------------------------- */ .hm-hero__inner > *, .hm-tool__inner > *, .hm-journal__layout > *, .hm-areas__grid > *, .hm-resources__grid > *, .hm-area__body, .hm-res__body, .hm-post__body, .hm-panel__store { min-width: 0; } /* ============================================================================ 1 · HERO Split asimétrico: texto a la izquierda, ruta de formación a la derecha. ============================================================================ */ .hm-hero { position: relative; isolation: isolate; padding-block: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border); overflow: hidden; } /* --- Fondo: retícula + halo ------------------------------------------------- Los dos son decorativos y van detrás de todo (z-index negativo sobre un contexto de apilado propio, por eso el isolation de arriba). La retícula se desvanece hacia abajo con una máscara para que no choque con el filete que cierra la sección. -------------------------------------------------------------------------- */ .hm-hero__grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 72px 72px; opacity: .5; /* La máscara la concentra detrás del panel y la apaga bajo el titular: sobre el texto grande la cuadrícula se veía como suciedad. */ mask-image: radial-gradient(90% 75% at 78% 25%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(90% 75% at 78% 25%, #000 0%, transparent 72%); pointer-events: none; } .hm-hero__glow { position: absolute; z-index: -1; inset-block-start: -18%; inset-inline-end: -6%; inline-size: min(760px, 72vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%); pointer-events: none; } .hm-hero__inner { display: grid; gap: var(--space-12); align-items: center; } /* --- Píldora de aviso --- */ .hm-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px 5px 5px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-xs); color: var(--ink-soft); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .hm-pill:hover { border-color: var(--accent-border); color: var(--ink); } .hm-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .hm-pill__tag { padding: 2px 9px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; } .hm-pill__txt { font-weight: var(--fw-medium); } .hm-pill svg { inline-size: 14px; block-size: 14px; margin-inline-end: var(--space-2); transition: transform var(--dur-base) var(--ease-out); } .hm-pill:hover svg { transform: translateX(2px); } .hm-hero__title { margin-top: var(--space-6); font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--ink); max-width: 14ch; } /* El énfasis es la única aparición del morado en el texto del hero. Space Grotesk no tiene cursiva real en Google Fonts, así que se enfatiza con color, no con una itálica sintética. */ .hm-hero__title em { font-style: normal; color: var(--accent); } .hm-hero__lead { margin-top: var(--space-5); font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--ink-soft); max-width: 52ch; } .hm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); } /* --- Ruta de formación ------------------------------------------------------ Sustituye a la imagen del hero. Lleva datos reales, así que se comporta como una superficie de producto y no como una ilustración. -------------------------------------------------------------------------- */ .hm-route { border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .hm-route__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface-2); } .hm-route__name { /* min-inline-size:0 para que el ellipsis funcione: los items de flex traen min-width:auto y no bajan del ancho de su texto. */ min-inline-size: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-route__meta { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; } .hm-route__list { list-style: none; margin: 0; padding: 0; } .hm-route__item + .hm-route__item { border-top: 1px solid var(--border); } .hm-route__row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; transition: background var(--dur-base) var(--ease-out); } .hm-route__row:hover { background: var(--surface-2); } .hm-route__row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* El área por la que seguir se marca con un filete lateral, no con un fondo: así no compite con el hover. */ .hm-route__item.is-resume .hm-route__row { box-shadow: inset 3px 0 0 var(--accent); } .hm-route__n { flex: none; font-size: var(--fs-xs); color: var(--ink-faint); padding-top: 2px; } .hm-route__item.is-resume .hm-route__n { color: var(--accent); } .hm-route__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-2); } /* Hasta 480px el título va en su propia línea: en móvil el nombre del área, el recuento y el porcentaje no caben juntos y era el nombre el que se cortaba con puntos suspensivos ("Estudio de gr…"). */ .hm-route__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); row-gap: 2px; } .hm-route__title { flex: 1 0 100%; min-inline-size: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-route__row:hover .hm-route__title { color: var(--accent); } /* El recuento va pegado al título, no al margen: antes quedaban dos cifras alineadas a la derecha, una encima de otra, y la fila se leía mal. */ .hm-route__count { flex: none; font-size: var(--fs-2xs); color: var(--ink-faint); white-space: nowrap; } /* El punto separador solo tiene sentido cuando el recuento va en la misma línea que el título, es decir a partir de 480px. */ @media (min-width: 480px) { .hm-route__head { flex-wrap: nowrap; row-gap: 0; } .hm-route__title { flex: 0 1 auto; } .hm-route__count::before { content: "·"; margin-inline-end: 6px; color: var(--ink-faint); } } .hm-route__prog { display: flex; align-items: center; gap: var(--space-3); } .hm-route__track { flex: 1; block-size: 4px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .hm-route__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); } .hm-route__pct { margin-inline-start: auto; flex: none; font-size: var(--fs-2xs); color: var(--ink-faint); } .hm-route__item.is-resume .hm-route__pct { color: var(--accent); } .hm-route__go { flex: none; inline-size: 15px; block-size: 15px; margin-block-start: 3px; color: var(--ink-faint); opacity: .55; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .hm-route__row:hover .hm-route__go { color: var(--accent); opacity: 1; transform: translateX(2px); } .hm-route__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; transition: background var(--dur-base) var(--ease-out); } .hm-route__foot:hover { background: var(--accent-soft); } .hm-route__foot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .hm-route__foot svg { inline-size: 16px; block-size: 16px; flex: none; transition: transform var(--dur-base) var(--ease-out); } .hm-route__foot:hover svg { transform: translateX(3px); } /* --- Ecualizador (motivo de marca, aparece una sola vez en la página) ------ */ .hm-eq { display: flex; align-items: flex-end; gap: 3px; flex: none; block-size: 16px; } .hm-eq span { inline-size: 3px; block-size: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom center; animation: hm-eq 1.4s var(--ease-standard) infinite; } .hm-eq span:nth-child(1) { animation-delay: 0s; } .hm-eq span:nth-child(2) { animation-delay: .18s; } .hm-eq span:nth-child(3) { animation-delay: .36s; } .hm-eq span:nth-child(4) { animation-delay: .54s; } .hm-eq span:nth-child(5) { animation-delay: .72s; } @keyframes hm-eq { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } } @media (min-width: 1024px) { .hm-hero { padding-block: var(--space-16) var(--space-20); } .hm-hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--space-16); } } /* ============================================================================ 2 · CIFRAS ============================================================================ */ .hm-stats { padding-block: var(--space-8); border-bottom: 1px solid var(--border); } .hm-stats__grid { display: grid; gap: var(--space-6); margin: 0; } .hm-stat { display: flex; flex-direction: column-reverse; gap: var(--space-1); } .hm-stat__value { margin: 0; font-size: clamp(28px, 4vw, 38px); font-weight: var(--fw-medium); line-height: 1; color: var(--ink); } .hm-stat__label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } @media (min-width: 640px) { .hm-stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); } /* Filete separador, no caja: da densidad sin añadir otra tarjeta. */ .hm-stat + .hm-stat { padding-inline-start: var(--space-10); border-inline-start: 1px solid var(--border); } } /* ============================================================================ 3 · FORMACIÓN — bento asimétrico ============================================================================ */ .hm-areas__grid { display: grid; gap: var(--space-5); padding: 0; margin: 0; list-style: none; } .hm-area { display: flex; flex-direction: column; block-size: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hm-area:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-lg); } .hm-area:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* 1200/630 es la proporción exacta de la tarjeta Open Graph que se dibuja en apps/core/og_images.py. Con 2/1 el object-fit recortaba el pie de la tarjeta. */ .hm-area__media { display: block; aspect-ratio: 1200 / 630; background: var(--surface-3); overflow: hidden; } .hm-area__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); } .hm-area:hover .hm-area__media img { transform: scale(1.04); } .hm-area__body { display: flex; flex-direction: column; flex: 1; gap: var(--space-3); padding: var(--space-6); } .hm-area__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-soft); } /* --- Progreso ------------------------------------------------------------- */ .hm-area__progress { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); } .hm-area__progress-track { flex: 1; block-size: 4px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .hm-area__progress-fill { display: block; block-size: 100%; background: var(--accent); border-radius: inherit; } .hm-area__progress-val { font-size: var(--fs-xs); color: var(--ink-soft); } /* --- Pie de tarjeta ------------------------------------------------------- */ .hm-area__foot { display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-faint); } .hm-area__go { margin-inline-start: auto; font-weight: var(--fw-semibold); color: var(--accent); } @media (min-width: 640px) { .hm-areas__grid { grid-template-columns: repeat(2, 1fr); } } /* Antes era un bento de 6 columnas con celdas 4+2 y 2+4. Funcionaba con fotografías, pero las tarjetas Open Graph llevan el título dibujado a un cuerpo fijo: en una celda del doble de ancho ese título salía al doble de tamaño que el de al lado. Rejilla uniforme, la misma del índice de Formación. */ @media (min-width: 1024px) { .hm-areas__grid { gap: var(--space-6); } } /* ============================================================================ 4 · COMPARADOR ============================================================================ */ .hm-tool__inner { display: grid; gap: var(--space-12); align-items: center; } .hm-tool__features { display: flex; flex-direction: column; margin: var(--space-8) 0 0; padding: 0; list-style: none; } /* Filete solo entre filas, nunca arriba y abajo de todas. */ .hm-tool__features li { padding-block: var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-soft); } .hm-tool__features li + li { border-top: 1px solid var(--border); } .hm-tool__features strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); margin-bottom: var(--space-1); } .hm-tool__text .btn { margin-top: var(--space-8); } /* --- Panel de precios ------------------------------------------------------ */ .hm-panel { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .hm-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); background: var(--surface-2); } .hm-panel__name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); } .hm-panel__count { font-size: var(--fs-xs); color: var(--ink-faint); } .hm-panel__rows { margin: 0; padding: 0; list-style: none; } .hm-panel__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); } .hm-panel__row + .hm-panel__row { border-top: 1px solid var(--border); } .hm-panel__store { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-soft); } .hm-panel__mark { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); } .hm-panel__price { margin-inline-start: auto; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--ink); } /* Único punto de acento del panel: la mejor oferta. */ .hm-panel__row.is-best .hm-panel__price { color: var(--accent); font-weight: var(--fw-bold); } .hm-panel__row.is-best .hm-panel__mark { background: var(--accent-soft); color: var(--accent); } .hm-panel__tag { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; } @media (min-width: 1024px) { .hm-tool__inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); } } /* ============================================================================ 5 · RECURSOS ============================================================================ */ .hm-resources__grid { display: grid; gap: var(--space-5); padding: 0; margin: 0; list-style: none; } .hm-res { display: flex; flex-direction: column; block-size: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hm-res:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-lg); } .hm-res:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .hm-res__cover { display: block; aspect-ratio: 1200 / 630; background: var(--surface-3); overflow: hidden; } .hm-res__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; } .hm-res__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); } .hm-res__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--ink); } .hm-res__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-soft); } .hm-resources__foot { margin-top: var(--space-10); } @media (min-width: 768px) { .hm-resources__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } } /* ============================================================================ 6 · BLOG — lista editorial ============================================================================ */ .hm-journal__layout { display: grid; gap: var(--space-10); } /* --- Destacado ------------------------------------------------------------- */ .hm-lead-post { display: block; text-decoration: none; } .hm-lead-post__cover { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-3); overflow: hidden; } .hm-lead-post__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); } .hm-lead-post:hover .hm-lead-post__cover img { transform: scale(1.03); } .hm-lead-post__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-5); } .hm-lead-post__title { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--ink); } .hm-lead-post:hover .hm-lead-post__title, .hm-post:hover .hm-post__title { color: var(--accent); } .hm-lead-post:focus-visible, .hm-post:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* --- Filas ----------------------------------------------------------------- */ .hm-journal__list { margin: 0; padding: 0; list-style: none; } .hm-post { display: flex; gap: var(--space-4); padding-block: var(--space-5); text-decoration: none; } .hm-journal__list li + li .hm-post { border-top: 1px solid var(--border); } .hm-post__thumb { flex: none; inline-size: 104px; aspect-ratio: 16 / 9; border-radius: var(--radius-xs); background: var(--surface-3); overflow: hidden; } .hm-post__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; } .hm-post__body { display: flex; flex-direction: column; gap: var(--space-2); } .hm-post__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); transition: color var(--dur-fast) var(--ease-out); } /* --- Metadatos ------------------------------------------------------------- */ .hm-post__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--ink-faint); } .hm-post__dot { inline-size: 3px; block-size: 3px; border-radius: 50%; background: currentColor; opacity: .6; } .hm-journal__foot { margin-top: var(--space-10); } @media (min-width: 1024px) { .hm-journal__layout { grid-template-columns: 1.1fr .9fr; gap: var(--space-16); } .hm-journal__list li:first-child .hm-post { padding-top: 0; } } /* ============================================================================ 7 · NEWSLETTER ============================================================================ */ .hm-newsletter .newsletter { max-width: var(--container-narrow); margin-inline: auto; } /* ============================================================================ MOTION REDUCIDO ============================================================================ */ @media (prefers-reduced-motion: reduce) { .hm-eq span { animation: none; transform: scaleY(.6); } .hm-pill, .hm-pill svg, .hm-route__go, .hm-route__row, .hm-route__foot, .hm-route__foot svg, .hm-area, .hm-area__media img, .hm-res, .hm-lead-post__cover img, .hm-post__title { transition: none !important; } .hm-pill:hover svg, .hm-route__row:hover .hm-route__go, .hm-route__foot:hover svg { transform: none !important; } .hm-area:hover, .hm-res:hover { transform: none !important; } .hm-area:hover .hm-area__media img, .hm-lead-post:hover .hm-lead-post__cover img { transform: none !important; } }