/* ========================================================================== landing.css Mercado Energía — Public Landing Page Styles PURPOSE: Styles for the public-facing landing page (navigation, hero, features, pricing, CTA sections, footer). This file is loaded only on the landing page via a block — it is NOT included in the authenticated app shell, so it has zero impact on the main application layout. RULE: This file must NOT contain .k-* class selectors or --kendo-* variable overrides. The landing page does not use Telerik components. SCOPE: Self-contained. Uses --me-* variables from mercado-energia.css for brand consistency (colors, gradients, radius). No Telerik dependency. TELERIK UPGRADE IMPACT: None — this file has no relationship to Telerik. ========================================================================== */ /* ── Force DARK theme on the landing page (always) ──────────────────────── The landing page is the public entry point and must ALWAYS render in the dark brand theme, regardless of the user's saved light/dark preference. The theme is applied by adding `.light-theme` to (anti-FOUC script in App.razor, driven by localStorage). Since this file loads ONLY on the landing page and AFTER mercado-energia.css, re-pinning that file's `html.light-theme` token overrides back to their :root (dark) values here makes the landing resolve to dark tokens even when still carries `.light-theme`. Navigation-agnostic and flash-free (render-blocking in ), and it affects no other page because landing.css is scoped to the landing only. Keep these values in sync with the :root block in mercado-energia.css. */ html.light-theme { --me-bg: #0a0e1a; --me-bg2: #0d1220; --me-card: #111827; --me-border: #1f2937; --me-text: #f1f5f9; --me-muted: #94a3b8; --me-shadow: 0 4px 24px rgba(0,0,0,0.4); --me-shadow-glow: 0 0 40px rgba(var(--me-accent-rgb),0.12); --me-muted-rgb: 148, 163, 184; --me-bg-rgb: 10, 14, 26; --me-bg2-rgb: 13, 18, 32; --me-card-rgb: 17, 24, 39; --me-text-rgb: 241, 245, 249; --me-accent-dark: var(--me-accent); --me-accent2-dark: var(--me-accent2); --me-accent-hover: #06b6d4; --me-green-dark: var(--me-green); --me-orange-dark: var(--me-orange); --me-red-dark: var(--me-red); --me-muted-dark: var(--me-muted); } /* ── Landing Nav ─────────────────────────────────────────── */ .landing-nav { position: fixed; top: 0; width: 100%; z-index: 100; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; background: rgba(var(--me-bg-rgb),0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--me-border); } .landing-logo { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.5px; text-decoration: none; } .landing-logo svg { width: 32px; height: 32px; } .landing-logo span { background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .landing-nav-links a { color: var(--me-muted); text-decoration: none; font-size: .9rem; transition: .2s; } .landing-nav-links a:hover { color: var(--me-text); } .landing-nav-cta { background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); color: var(--me-bg) !important; padding: .5rem 1.2rem; border-radius: 8px; font-weight: 600; font-size: .875rem; text-decoration: none; transition: .2s; } .landing-nav-cta:hover { opacity: .85; } /* ── Hero ────────────────────────────────────────────────── */ .landing-hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem 3rem; position: relative; overflow: hidden; } .landing-hero::before { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(ellipse, rgba(var(--me-accent-rgb),.12) 0%, transparent 70%); pointer-events: none; } .landing-hero::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(ellipse, rgba(var(--me-accent2-rgb),.08) 0%, transparent 70%); pointer-events: none; } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(var(--me-accent-rgb),.1); border: 1px solid rgba(var(--me-accent-rgb),.3); padding: .4rem 1rem; border-radius: 100px; font-size: .8rem; color: var(--me-accent); margin-bottom: 1.5rem; } .hero-badge .dot { width: 6px; height: 6px; background: var(--me-accent); border-radius: 50%; animation: landing-pulse 2s infinite; } .landing-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 1.5rem; } .landing-hero h1 em { font-style: normal; background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-hero p { font-size: 1.15rem; color: var(--me-muted); margin: 0 auto 2.5rem; } .hero-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-landing-primary { background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); color: var(--me-bg) !important; padding: .75rem 2rem; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: .2s; display: inline-block; } .btn-landing-primary:hover { opacity: .85; transform: translateY(-1px); } .btn-landing-secondary { background: transparent; color: var(--me-text) !important; padding: .75rem 2rem; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid var(--me-border); transition: .2s; display: inline-block; } .btn-landing-secondary:hover { border-color: var(--me-accent); color: var(--me-accent) !important; } .hero-stats { display: flex; gap: 3rem; justify-content: center; margin-top: 4rem; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat-num { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-stat-label { font-size: .8rem; color: var(--me-muted); text-transform: uppercase; letter-spacing: .05em; } /* ── Scroll Indicator ────────────────────────────────────── */ .scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--me-muted); font-size: .75rem; animation: landing-bob 2s ease-in-out infinite; } .scroll-hint::after { content: ''; width: 1px; height: 40px; background: linear-gradient(to bottom, var(--me-muted), transparent); } /* ── Sections ────────────────────────────────────────────── */ .landing-section { padding: 5rem 1.5rem; } .landing-container { max-width: 1100px; margin: 0 auto; } .landing-section-label { text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; color: var(--me-accent); font-weight: 600; margin-bottom: .75rem; } .landing-section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin-bottom: 1rem; } .landing-section-subtitle { color: var(--me-muted); font-size: 1rem; max-width: 600px; } /* ── Features Grid ───────────────────────────────────────── */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .feature-card { background: var(--me-card); border: 1px solid var(--me-border); border-radius: 16px; padding: 2rem; transition: .3s; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--me-accent), var(--me-accent2)); opacity: 0; transition: .3s; } .feature-card:hover { border-color: rgba(var(--me-accent-rgb),.3); transform: translateY(-3px); } .feature-card:hover::before { opacity: 1; } .feature-icon { width: 48px; height: 48px; background: linear-gradient(135deg, rgba(var(--me-accent-rgb),.15), rgba(var(--me-accent2-rgb),.15)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; font-size: 1.5rem; } .feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; } .feature-card p { color: var(--me-muted); font-size: .9rem; margin: 0; } /* ── How It Works ────────────────────────────────────────── */ .how-bg { background: var(--me-bg2); } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-top: 3rem; position: relative; } .step { text-align: center; padding: 1.5rem; } .step-num { width: 56px; height: 56px; background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: var(--me-bg); margin: 0 auto 1.25rem; } .step h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; } .step p { color: var(--me-muted); font-size: .875rem; margin: 0; } /* ── Dashboard Mockup ────────────────────────────────────── */ .dashboard-section { background: var(--me-bg2); } .dashboard-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 3rem; } .dashboard-mockup { background: var(--me-card); border: 1px solid var(--me-border); border-radius: 20px; padding: 1.5rem; position: relative; /* Los paneles del carrusel se apilan en la misma celda: la tarjeta toma la altura del panel más alto y no "salta". */ display: grid; } /* ── Carrusel de dashboards (radios + CSS; JS solo autoavanza) ── */ .dash-slide-radio { position: absolute; opacity: 0; pointer-events: none; } .dash-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.25rem; } .dash-tabs label { font-size: .8rem; font-weight: 600; padding: .4rem 1rem; border-radius: 100px; border: 1px solid var(--me-border); color: var(--me-muted); cursor: pointer; transition: .25s; user-select: none; } .dash-tabs label:hover { color: var(--me-text); border-color: rgba(var(--me-accent-rgb),.5); } #dash-slide-general:checked ~ .dashboard-wrap .dash-tabs label[for="dash-slide-general"], #dash-slide-electrico:checked ~ .dashboard-wrap .dash-tabs label[for="dash-slide-electrico"], #dash-slide-gas:checked ~ .dashboard-wrap .dash-tabs label[for="dash-slide-gas"] { color: var(--me-accent); border-color: rgba(var(--me-accent-rgb),.5); background: rgba(var(--me-accent-rgb),.1); } .dash-pane-stack { display: grid; } .dash-pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease, visibility .4s; } #dash-slide-general:checked ~ .dashboard-wrap .pane-general, #dash-slide-electrico:checked ~ .dashboard-wrap .pane-electrico, #dash-slide-gas:checked ~ .dashboard-wrap .pane-gas { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .dash-pane { transition: none; } } .dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .dash-title { font-size: .9rem; font-weight: 600; } .dash-badge { background: rgba(var(--me-green-rgb),.15); color: var(--me-green); font-size: .7rem; padding: .2rem .6rem; border-radius: 100px; border: 1px solid rgba(var(--me-green-rgb),.3); } .dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: .75rem; } .dash-kpi { background: rgba(var(--me-text-rgb),.03); border: 1px solid var(--me-border); border-radius: 10px; padding: .7rem .5rem; text-align: center; } .dash-kpi-val { font-size: 1.05rem; font-weight: 800; } .dash-kpi-val span { font-size: .65rem; font-weight: 600; color: var(--me-muted); } .dash-kpi-label { font-size: .62rem; color: var(--me-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; } .dash-tile { background: rgba(var(--me-text-rgb),.03); border: 1px solid var(--me-border); border-radius: 10px; padding: .8rem 1rem 1rem; margin-bottom: .75rem; } .dash-tile:last-child { margin-bottom: 0; } .dash-tile-title { font-size: .72rem; font-weight: 600; color: var(--me-muted); margin-bottom: .8rem; } .dash-tile .dash-chart { background: none; border-radius: 0; padding: 0; margin-top: 0; position: relative; } .dash-limit { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--me-orange); z-index: 1; } .dash-limit span { position: absolute; right: 0; bottom: 4px; font-size: .6rem; color: var(--me-orange); white-space: nowrap; } .dash-line { display: block; width: 100%; height: 80px; } .dash-line .limit { stroke: var(--me-orange); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; opacity: .85; } .dash-line .serie { stroke: var(--me-accent); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .dash-line .area { fill: rgba(var(--me-accent-rgb),.12); stroke: none; } .dash-line-legend { font-size: .6rem; color: var(--me-orange); margin-top: .4rem; } .dash-chart { background: rgba(var(--me-text-rgb),.02); border-radius: 10px; padding: 1rem; margin-top: 1rem; height: 80px; display: flex; align-items: flex-end; gap: 4px; } .dash-chart .bar { background: linear-gradient(to top, var(--me-accent), var(--me-accent2)); border-radius: 3px 3px 0 0; flex: 1; transition: .3s; } .dash-chart .bar.over { background: linear-gradient(to top, var(--me-orange), var(--me-red)); } .dash-chart .bar.gas { background: linear-gradient(to top, rgba(var(--me-orange-rgb),.65), var(--me-orange)); } .dash-chart .bar:hover { opacity: .8; } /* Barras apiladas: la altura total va inline en .stack y los segmentos se reparten por flex (también inline), de abajo hacia arriba. */ .dash-chart .stack { flex: 1; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; } .dash-chart .stack i { display: block; width: 100%; } .dash-chart .seg.elec { background: linear-gradient(to top, var(--me-accent), var(--me-accent2)); } .dash-chart .seg.gas { background: var(--me-orange); } .dash-chart .seg.var { background: linear-gradient(to top, rgba(var(--me-orange-rgb),.75), var(--me-orange)); } .dash-chart .seg.fijo { background: rgba(var(--me-text-rgb),.18); } .dash-mini-legend { display: flex; gap: 1rem; font-size: .6rem; color: var(--me-muted); margin-top: .5rem; } .dash-mini-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .35rem; } .dash-mini-legend .dot-elec { background: var(--me-accent); } .dash-mini-legend .dot-gas, .dash-mini-legend .dot-var { background: var(--me-orange); } .dash-mini-legend .dot-fijo { background: rgba(var(--me-text-rgb),.35); } .list-features { list-style: none; display: flex; flex-direction: column; gap: 1rem; padding: 0; margin: 0; } .list-features li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; } .list-features li::before { content: '\2713'; background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; flex-shrink: 0; margin-top: .1rem; } /* ── Pricing ─────────────────────────────────────────────── */ /* Subgrid layout: each .plan spans 5 explicit row tracks so that plan-name / plan-price / plan-desc / plan-features / plan-btn share row heights across all cards → header sections stay aligned. */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 5 row tracks: name | price | desc | features (stretches) | btn */ grid-template-rows: auto auto auto 1fr auto; column-gap: 1.25rem; row-gap: 0; margin-top: 3rem; } .plan { grid-row: span 5; display: grid; grid-template-rows: subgrid; background: var(--me-card); border: 1px solid var(--me-border); border-radius: 20px; padding: 2rem; position: relative; } /* Responsive: revert to flex — alignment is per-card, no subgrid needed */ @media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: unset; gap: 1.25rem; } .plan { grid-row: unset; display: flex; flex-direction: column; } } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } } .plan.featured { border-color: var(--me-accent); background: linear-gradient(135deg, rgba(var(--me-accent-rgb),.05), rgba(var(--me-accent2-rgb),.05)); } .plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); color: var(--me-bg); font-size: .7rem; font-weight: 700; padding: .25rem .9rem; border-radius: 100px; white-space: nowrap; } .plan-name { font-size: 1rem; font-weight: 600; color: var(--me-muted); margin-bottom: .5rem; } .plan-price { font-size: 2rem; font-weight: 800; margin-bottom: .25rem; } .plan-price span { font-size: 1rem; font-weight: 400; color: var(--me-muted); } .plan-desc { color: var(--me-muted); font-size: .875rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--me-border); padding-bottom: 1.5rem; } .plan-features { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; padding: 0; flex: 1; /* used in responsive flex fallback */ } .plan-features li { display: flex; gap: .6rem; font-size: .875rem; color: var(--me-muted); } .plan-features li::before { content: '\2192'; color: var(--me-accent); } .plan-btn { display: block; text-align: center; padding: .7rem 1.5rem; border-radius: 10px; font-weight: 600; font-size: .9rem; text-decoration: none; transition: .2s; } .plan-btn.primary { background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); color: var(--me-bg) !important; } .plan-btn.outline { border: 1px solid var(--me-border); color: var(--me-text) !important; } .plan-btn:hover { opacity: .85; transform: translateY(-1px); } /* ── CTA ─────────────────────────────────────────────────── */ .cta-section { text-align: center; padding: 6rem 1.5rem; } .cta-box { background: linear-gradient(135deg, rgba(var(--me-accent-rgb),.1), rgba(var(--me-accent2-rgb),.1)); border: 1px solid rgba(var(--me-accent-rgb),.2); border-radius: 24px; padding: 4rem 2rem; max-width: 700px; margin: 0 auto; } .cta-box h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 1rem; } .cta-box p { color: var(--me-muted); margin-bottom: 2rem; } /* ── Footer ──────────────────────────────────────────────── */ .landing-footer { border-top: 1px solid var(--me-border); padding: 2.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-logo { font-size: 1.1rem; font-weight: 700; } .footer-logo span { background: linear-gradient(135deg, var(--me-accent), var(--me-accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-footer p { color: var(--me-muted); font-size: .8rem; margin: 0; } .footer-legal { color: var(--me-muted); font-size: .8rem; text-decoration: none; } .footer-legal:hover { color: var(--me-accent); text-decoration: underline; } /* ── Páginas legales (términos y condiciones) ─────────────── */ .legal-page { max-width: 46rem; text-align: left; } .legal-page .landing-section-title { text-align: left; margin-bottom: .5rem; } /* ── Animations ──────────────────────────────────────────── */ @keyframes landing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } @keyframes landing-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } @keyframes landing-fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-content > * { animation: landing-fadeUp .6s ease both; } .hero-content > *:nth-child(1) { animation-delay: .1s; } .hero-content > *:nth-child(2) { animation-delay: .2s; } .hero-content > *:nth-child(3) { animation-delay: .3s; } .hero-content > *:nth-child(4) { animation-delay: .4s; } .hero-content > *:nth-child(5) { animation-delay: .5s; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 768px) { .landing-nav-links { display: none; } .dashboard-wrap { grid-template-columns: 1fr; } .landing-footer { flex-direction: column; text-align: center; } }