/* ================================================================ home.css — PANTALLA DE INICIO (las 5 tarjetas de funciones) ---------------------------------------------------------------- Solo lo propio del home. Tokens y header viven en base.css / header.css. La enlaza únicamente index.html. ================================================================ */ /* --- Fondo del home: GRIS PERLA neutro --- Sustituye el aqua de base.css SOLO en el home (esta hoja se carga después y únicamente en index.html). Neutro = las tarjetas oscuras con su glow de color resaltan al máximo. */ html { /* `background` (shorthand) RESETEA todo el fondo heredado de base.css, incluido su `background-attachment: fixed` + gradiente aqua. Esto es CLAVE: ese fixed heredado era el que chocaba con el blur del header y causaba el glitch. Aquí solo queda un color plano. */ background: #EFE7D9; } /* Fondo GRIS PERLA en una capa FIJA propia (z-index:-1) usando `position: fixed` (NO `background-attachment: fixed`): se queda quieto al hacer scroll SIN el conflicto de composición con el `backdrop-filter` del header. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; /* Huellas (más claras que el fondo) como textura sutil sobre el gradiente, igual estilo que el mapa de Accent Correction pero en tono GRIS perla. */ background-color: #E6E8EC; background-image: url("data:image/svg+xml,"), linear-gradient(170deg, #F7F8FA 0%, #EEF0F3 55%, #E4E6EA 100%); background-repeat: repeat, no-repeat; background-size: 200px 200px, cover; } /* --- Contenedor principal (Mobile First: 1 columna) --- */ #app-main { flex: 1; width: 100%; /* + área segura del notch: la cabecera ahora mide header-height + safe-area, así que el contenido arranca por debajo de ella en iPhone. */ padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 24px); padding-left: 20px; padding-right: 20px; padding-bottom: 32px; display: grid; grid-template-columns: 1fr; gap: 18px; align-content: start; } /* --- Tarjeta base --- */ .app-feature-card { --card-bg: var(--card-bg-color); --card-bg-hover: var(--card-bg-hover-color); display: flex; align-items: center; gap: 18px; background-color: var(--card-bg); color: var(--text-color); padding: 22px; border-radius: var(--radius-card); border: 1px solid transparent; /* Sombra premium: suave y en capas (da profundidad sobre el fondo perla). */ box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(30, 41, 59, 0.10); cursor: pointer; /* Entrada al cargar con `translate` (independiente de `transform`, así no choca con el lift del hover ni con el press de :active). */ animation: home-rise 0.5s ease-out both; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; will-change: transform; contain: paint; text-decoration: none; position: relative; overflow: hidden; } /* Glow circular decorativo (hover) */ .app-feature-card::after { content: ""; position: absolute; top: -50%; right: -30%; width: 220px; height: 220px; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; filter: blur(24px); will-change: opacity; } .app-feature-card:hover { background-color: var(--card-bg-hover); transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-lg); } .app-feature-card:hover::after { opacity: 1; } .app-feature-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.25), var(--shadow-md); } /* Feedback táctil al pulsar (clave en móvil, donde no hay hover). */ .app-feature-card:active { transform: scale(0.985); } /* --- Texto interno --- */ .app-feature-card .card-text { flex: 1; font-size: 0.97rem; line-height: 1.5; margin: 0; color: var(--text-muted-color); position: relative; z-index: 2; } .app-feature-card .card-text strong { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.1px; margin-bottom: 4px; color: var(--text-color); } .app-feature-card:has(.card-background-image) .card-text { padding-right: 90px; } /* --- Temas por tarjeta --- */ .feature-abc { --card-bg: var(--feature-abc-card-bg); --card-bg-hover: var(--feature-abc-card-bg-hover); } .feature-abc .card-icon { color: var(--feature-abc-color); } .feature-abc::after { background: rgba(255, 90, 95, 0.22); } .feature-abc:hover { border-color: var(--feature-abc-color); box-shadow: 0 10px 30px rgba(255, 90, 95, 0.20), var(--shadow-md); } .feature-books { --card-bg: var(--feature-books-card-bg); --card-bg-hover: var(--feature-books-card-bg-hover); } .feature-books .card-icon { color: var(--feature-books-color); } .feature-books::after { background: rgba(45, 125, 246, 0.22); } .feature-books:hover { border-color: var(--feature-books-color); box-shadow: 0 10px 30px rgba(45, 125, 246, 0.20), var(--shadow-md); } .feature-words { --card-bg: var(--feature-words-card-bg); --card-bg-hover: var(--feature-words-card-bg-hover); } .feature-words .card-icon { color: var(--feature-words-color); } .feature-words::after { background: rgba(245, 180, 0, 0.22); } .feature-words:hover { border-color: var(--feature-words-color); box-shadow: 0 10px 30px rgba(245, 180, 0, 0.20), var(--shadow-md); } .feature-exercises { --card-bg: var(--feature-exercises-card-bg); --card-bg-hover: var(--feature-exercises-card-bg-hover); } .feature-exercises .card-icon { color: var(--feature-exercises-color); } .feature-exercises::after { background: rgba(139, 92, 246, 0.24); } .feature-exercises:hover { border-color: var(--feature-exercises-color); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.22), var(--shadow-md); } .feature-new-exercises { --card-bg: var(--feature-new-exercises-card-bg); --card-bg-hover: var(--feature-new-exercises-card-bg-hover); } .feature-new-exercises .card-icon { color: var(--feature-new-exercises-color); } .feature-new-exercises::after { background: rgba(34, 197, 94, 0.22); } .feature-new-exercises:hover { border-color: var(--feature-new-exercises-color); box-shadow: 0 10px 30px rgba(34, 197, 94, 0.20), var(--shadow-md); } /* --- Icono cuadrado de cada tarjeta --- */ .app-feature-card .card-icon { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; border-radius: var(--radius-icon); background-color: var(--dark-bg-color); border: 1px solid var(--border-color); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; z-index: 2; } .app-feature-card:hover .card-icon { transform: scale(1.06) rotate(-2deg); } /* --- Ilustración decorativa de fondo --- */ .app-feature-card .card-background-image { position: absolute; right: -20px; bottom: -10px; width: 100px; height: auto; opacity: 0.85; pointer-events: none; z-index: 1; /* Profundidad (js/tilt-cards.js): --tiltx/--tilty siguen al ratón o al giroscopio; la transición de siempre suaviza el movimiento (GPU). */ transform: translate3d(var(--tiltx, 0px), var(--tilty, 0px), 0); transition: transform 0.25s ease, opacity 0.25s ease; } .app-feature-card:hover .card-background-image { transform: translate3d(calc(var(--tiltx, 0px) - 4px), calc(var(--tilty, 0px) - 4px), 0) scale(1.04); opacity: 1; } .feature-new-exercises .card-background-image, .feature-abc .card-background-image, .feature-books .card-background-image, .feature-words .card-background-image { width: 130px; right: -24px; bottom: -14px; } /* --- Hero de bienvenida (primer impacto) --- */ .home-hero { grid-column: 1 / -1; margin-bottom: 2px; animation: home-rise 0.5s ease-out both; } .home-hero__title { font-family: "Nunito", system-ui, sans-serif; font-size: 1.7rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.5px; /* Degradado de marca (como los títulos de cada sección) */ background: linear-gradient(135deg, #2b2440 0%, #8A2BE2 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-hero__subtitle { margin-top: 6px; font-size: 0.98rem; line-height: 1.45; color: var(--text-on-light-soft); max-width: 32ch; } /* Entrada: aparece subiendo. Usa `translate` (no `transform`) para componerse con el hover/press sin pisarse. */ @keyframes home-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } /* Escalonado: el hero es el 1er hijo de #app-main; las tarjetas, del 2º al 6º. */ .app-feature-card:nth-child(2) { animation-delay: 0.05s; } .app-feature-card:nth-child(3) { animation-delay: 0.10s; } .app-feature-card:nth-child(4) { animation-delay: 0.15s; } .app-feature-card:nth-child(5) { animation-delay: 0.20s; } .app-feature-card:nth-child(6) { animation-delay: 0.25s; } /* Feedback al ABRIR una tarjeta: zoom + glow del COLOR de cada tarjeta mientras suena el sonido premium (~0.3s), justo antes de navegar. Después de :hover/:active. */ .app-feature-card.is-opening { transform: scale(1.04); } .app-feature-card.is-opening::after { opacity: 1; } .feature-abc.is-opening { border-color: var(--feature-abc-color); box-shadow: 0 0 0 2px var(--feature-abc-color), 0 16px 44px color-mix(in srgb, var(--feature-abc-color) 35%, transparent); } .feature-books.is-opening { border-color: var(--feature-books-color); box-shadow: 0 0 0 2px var(--feature-books-color), 0 16px 44px color-mix(in srgb, var(--feature-books-color) 35%, transparent); } .feature-words.is-opening { border-color: var(--feature-words-color); box-shadow: 0 0 0 2px var(--feature-words-color), 0 16px 44px color-mix(in srgb, var(--feature-words-color) 35%, transparent); } .feature-exercises.is-opening { border-color: var(--feature-exercises-color); box-shadow: 0 0 0 2px var(--feature-exercises-color), 0 16px 44px color-mix(in srgb, var(--feature-exercises-color) 35%, transparent); } .feature-new-exercises.is-opening { border-color: var(--feature-new-exercises-color); box-shadow: 0 0 0 2px var(--feature-new-exercises-color), 0 16px 44px color-mix(in srgb, var(--feature-new-exercises-color) 35%, transparent); } @media (prefers-reduced-motion: reduce) { .home-hero, .app-feature-card { animation: none; } } /* --- Responsive --- */ @media (min-width: 768px) { #app-main { padding-left: 32px; padding-right: 32px; max-width: 1024px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr 1fr; gap: 22px; } .app-feature-card { padding: 26px; } .app-feature-card .card-icon { width: 60px; height: 60px; font-size: 1.7rem; } } @media (min-width: 1024px) { #app-main { max-width: 1280px; padding-left: 48px; padding-right: 48px; gap: 26px; } .app-feature-card { padding: 30px; } } /* ============================================================================= MENÚ VIVO 📊 (js/home-live.js) — barra de progreso + tarjeta "Continuar" ========================================================================== */ /* Mascota que se ASOMA cuando su tarjeta queda bien a la vista (scroll) */ .app-feature-card .card-background-image { transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1); } .app-feature-card.card--peek .card-background-image { transform: translateX(-9px) scale(1.045); } /* (La tarjeta "Continuar" se construyó y se quitó a petición de Axel.) */ @media (prefers-reduced-motion: reduce) { .app-feature-card .card-background-image { transition: none; } .app-feature-card.card--peek .card-background-image { transform: none; } } /* ============================================================================= BIENVENIDA la primera vez 🎉 (js/welcome-inapp.js) — Trufa y Freddye te reciben ========================================================================== */ .wc-overlay { position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; padding: 22px; /* Fondo morado OPACO (mismo del login/meta): la bienvenida tapa el menú por completo — antes el velo translúcido lo dejaba entrever (Axel, 17-jul). */ background: radial-gradient(80% 55% at 50% 32%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%), linear-gradient(160deg, #A85AF0 0%, #8A2BE2 52%, #5E17A0 100%); opacity: 0; transition: opacity 0.3s ease; } .wc-overlay.is-open { opacity: 1; } .wc-card { width: min(92vw, 400px); padding: 26px 24px 24px; border-radius: 26px; background: linear-gradient(170deg, #ffffff 0%, #f6f1ff 100%); text-align: center; box-shadow: 0 24px 60px rgba(138, 43, 226, 0.35); transform: translateY(16px) scale(0.96); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .wc-overlay.is-open .wc-card { transform: none; } .wc-dogs { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin-bottom: 6px; } .wc-dog { width: 108px; height: 108px; object-fit: contain; } .wc-dog--trufa { animation: wc-hop 1.6s ease-in-out infinite; } .wc-dog--freddye { animation: wc-hop 1.6s ease-in-out 0.35s infinite; } @keyframes wc-hop { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-9px) rotate(-3deg); } } .wc-title { display: block; font-size: 1.4rem; font-weight: 900; line-height: 1.2; color: #2b1b52; } .wc-text { margin: 10px 0 20px; font-size: 0.95rem; line-height: 1.6; color: #6b6480; } .wc-btn { border: none; padding: 14px 34px; border-radius: 999px; background: linear-gradient(135deg, #B85EFF, #8A2BE2); color: #fff; font-weight: 900; font-size: 1.02rem; cursor: pointer; box-shadow: 0 6px 0 rgba(90, 20, 160, 0.35); transition: transform 0.12s ease, box-shadow 0.12s ease; } .wc-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(90, 20, 160, 0.35); } @media (prefers-reduced-motion: reduce) { .wc-dog--trufa, .wc-dog--freddye { animation: none; } } /* ============================================================================= LOTE ESTRELLAS (16-jul) — Home ========================================================================== */ /* 🍔→✕ La hamburguesa del menú se transforma en X al abrirlo */ #menu-toggle .header-svg { transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.5, 1); } #menu-toggle .header-svg path { transition: d 0.22s ease; } #menu-toggle[aria-expanded="true"] .header-svg { transform: rotate(90deg); } #menu-toggle[aria-expanded="true"] .header-svg path { d: path("M6 6 L18 18 M6 18 L18 6"); } /* (Perro del día junto al saludo: construido y RETIRADO el 15-jul — Axel.) */ @media (prefers-reduced-motion: reduce) { #menu-toggle .header-svg, #menu-toggle .header-svg path { transition: none; } } /* ============================================================ ⚡ SESIÓN EXPRÉS EN LA PORTADA (3-ago, idea de Axel) Pastilla PEQUEÑA, calcada de .accent-review--express (la que ya existía dentro de Corrección de Acento): misma forma y tamaño. No compite con las tarjetas; solo ofrece "entra y practica ya". ============================================================ */ .home-express { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 14px; padding: 0.42rem 0.8rem 0.42rem 0.65rem; width: fit-content; align-self: start; /* abraza su texto, no se estira */ border: none; border-radius: 999px; cursor: pointer; background: linear-gradient(160deg, #B85EFF, #8A2BE2); color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 800; box-shadow: 0 4px 0 #6B1FB8, 0 8px 16px rgba(138, 43, 226, 0.35); transition: transform 0.12s ease, box-shadow 0.12s ease; } .home-express:active { transform: translateY(2px); box-shadow: 0 2px 0 #6B1FB8; } .home-express__icon { font-size: 0.95rem; line-height: 1; } /* Agotado por hoy: apagada, informa sin llamar. */ .home-express--agotado { background: #efeaf7; color: #6b5a8c; box-shadow: inset 0 0 0 2px #e2d9f0; cursor: default; } .home-express--agotado .home-express__icon { filter: grayscale(1); opacity: 0.6; }