/* ═══════════════════════════════════════════════════════════════════ Myceliot-Z · landing premium — dark cinematográfico, glass y luz. Sin dependencias externas (CSP estricta: todo propio). ═══════════════════════════════════════════════════════════════════ */ /* ── Tokens de diseño ─────────────────────────────────────────────── */ :root { --bg: #05070d; --bg-2: #080c16; --panel: rgba(17, 25, 44, .64); --panel-2: rgba(11, 17, 31, .88); --line: rgba(118, 158, 255, .14); --line-hi: rgba(140, 180, 255, .34); --text: #e9f0ff; --muted: #93a4c6; --dim: #6b7c9c; --cyan: #22d3ee; --blue: #4f8cff; --violet: #8b5cf6; --green: #34d399; --amber: #fbbf24; --r: 18px; --r-sm: 12px; --shadow: 0 30px 90px -30px rgba(0, 0, 0, .9); --ease: cubic-bezier(.22, 1, .36, 1); --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, sans-serif; /* ── Arte de marca para el fondo ambiental ──────────────────────── La seta con su red de micelio (dibujo original del autor, un único trazado vectorial). Vive en dos versiones locales —CSP estricta: ni un byte de CDN— repintadas con degradado vertical (copa arriba, raíz abajo) para casar con la referencia de marca: · marca-oscura.svg → oro luminoso que verdea hacia el pie, para la escena oscura (la que se ve por defecto). · marca-clara.svg → cobre y verde bosque, para fondos claros. `.fx-brand` compone la oscura; con `data-theme="light"` en o salta a la clara (ver el bloque de tema, más abajo). Si algún día prefieres tus propias imágenes, basta con sobrescribir estos ficheros o repuntar estas dos variables: no cambia nada más. */ --brand-art: url("./assets/marca-oscura.svg"); --brand-art-light: url("./assets/marca-clara.svg"); } /* ── Reset ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: var(--sans); color: var(--text); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } ul { list-style: none; } .wrap { width: min(1200px, 92vw); margin: 0 auto; } /* ── Capas de ambiente ────────────────────────────────────────────── */ .fx-aurora, .fx-grain, .fx-vignette, .fx-scanline, .fx-brand { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .fx-aurora { overflow: hidden; filter: blur(70px) saturate(140%); opacity: .55; } .fx-aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; } .fx-aurora .a1 { width: 58vw; height: 58vw; left: -14vw; top: -16vw; background: radial-gradient(circle, rgba(79,140,255,.55), transparent 62%); animation: drift1 26s var(--ease) infinite alternate; } .fx-aurora .a2 { width: 52vw; height: 52vw; right: -12vw; top: 4vh; background: radial-gradient(circle, rgba(139,92,246,.45), transparent 62%); animation: drift2 32s var(--ease) infinite alternate; } .fx-aurora .a3 { width: 46vw; height: 46vw; left: 24vw; top: 52vh; background: radial-gradient(circle, rgba(34,211,238,.34), transparent 62%); animation: drift3 38s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } } @keyframes drift2 { to { transform: translate3d(-8vw, 10vh, 0) scale(1.12); } } @keyframes drift3 { to { transform: translate3d(6vw, -9vh, 0) scale(1.2); } } .fx-grain { background-image: url("./assets/grain.svg"); background-size: 180px; opacity: .05; mix-blend-mode: overlay; z-index: 3; } .fx-vignette { z-index: 3; background: radial-gradient(120% 100% at 50% 0%, transparent 42%, rgba(0,0,0,.55) 100%); } .fx-scanline { z-index: 3; opacity: .10; background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px); } /* ── Marca de fondo: la seta con su red de micelio ────────────────── */ /* Es una silueta con degradado (no un trazo fino): se compone con `screen` para que el oro y el verde SUMEN luz sobre la aurora en vez de taparla, y se recorta con una máscara radial para que las esquinas se disuelvan. Va por encima de las luces y por debajo del grano, la viñeta y el contenido. El `aspect-ratio` es el del propio dibujo (173.3×152.4) para que `contain` lo encaje sin bandas ni deformación. */ .fx-brand { z-index: 1; display: grid; place-items: center; overflow: hidden; mix-blend-mode: screen; opacity: .26; -webkit-mask-image: radial-gradient(118% 94% at 50% 44%, #000 0 34%, rgba(0,0,0,.5) 64%, transparent 88%); mask-image: radial-gradient(118% 94% at 50% 44%, #000 0 34%, rgba(0,0,0,.5) 64%, transparent 88%); } .fx-brand .mark, .fx-brand .halo, .fx-brand .roots { grid-area: 1 / 1; } /* La pieza de marca: respira muy despacio, sin llegar a moverse */ .fx-brand .mark { width: min(1080px, 122vw); aspect-ratio: 173.3 / 152.4; background: var(--brand-art) center / contain no-repeat; filter: blur(.5px) drop-shadow(0 0 90px rgba(255, 219, 150, .22)); animation: brand-breath 26s var(--ease) infinite alternate; } /* Anillo de luz girando: da vida al fondo sin pedir atención */ .fx-brand .halo { width: min(1480px, 168vw); aspect-ratio: 1 / 1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(34,211,238,.18) 58deg, transparent 132deg, rgba(139,92,246,.16) 214deg, transparent 316deg); filter: blur(46px) saturate(150%); animation: spin 96s linear infinite; } /* Raíz de micelio: verdea el pie de la escena (eco del arte original) */ .fx-brand .roots { align-self: end; width: min(1400px, 154vw); height: 46vh; background: radial-gradient(58% 100% at 50% 100%, rgba(52,211,153,.24), transparent 72%); filter: blur(34px); animation: brand-pulse 13s var(--ease) infinite alternate; } @keyframes brand-breath { from { transform: scale(1) translateY(8px); opacity: .76; } to { transform: scale(1.07) translateY(-18px); opacity: 1; } } @keyframes brand-pulse { from { opacity: .5; } to { opacity: 1; } } @media (max-width: 720px) { .fx-brand { opacity: .16; } /* móvil: menos carga visual */ .fx-brand .mark { width: 148vw; } } /* ── Marca en tema claro ────────────────────────────────────────────── La landing es oscura por defecto. Si el documento lleva `data-theme="light"` (en o ) la marca cambia a su versión de cobre y pasa de `screen` a `multiply`: el trazo oscurece sobre fondo claro en vez de sumar luz, que es lo que se espera. */ [data-theme="light"] .fx-brand { mix-blend-mode: multiply; opacity: .18; } [data-theme="light"] .fx-brand .mark { background-image: var(--brand-art-light); filter: blur(.4px); } [data-theme="light"] .fx-brand .roots { opacity: .45; } main, .nav, .foot { position: relative; z-index: 4; } /* ── Navegación glass ─────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 14px min(4vw, 34px); transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease); border-bottom: 1px solid transparent; } .nav.on { padding: 9px min(4vw, 34px); background: rgba(6, 9, 17, .72); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; font-size: 17px; } .nav-logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 22px rgba(79,140,255,.45); } .nav-brand b { color: var(--cyan); font-weight: 900; } .nav-links { display: flex; gap: 4px; margin-left: auto; } .nav-links a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 9px; transition: .25s var(--ease); } .nav-links a:hover { color: var(--text); background: rgba(120,160,255,.09); } @media (max-width: 900px) { .nav-links { display: none; } } /* ── Botones ──────────────────────────────────────────────────────── */ .btn { --bg1: var(--blue); --bg2: var(--violet); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 13px; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; color: #04070f; text-decoration: none; background: linear-gradient(120deg, var(--bg1), var(--bg2)); box-shadow: 0 12px 34px -12px rgba(79,140,255,.7), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease); overflow: hidden; isolation: isolate; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 48%, transparent 76%); transform: translateX(-130%); transition: transform .8s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -14px rgba(79,140,255,.85); } .btn:hover::after { transform: translateX(130%); } .btn:active { transform: translateY(0) scale(.99); } .btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 11px; } .btn-lg { padding: 16px 30px; font-size: 16px; border-radius: 15px; } .btn.ghost { background: rgba(120,160,255,.07); color: var(--text); border-color: var(--line-hi); box-shadow: none; backdrop-filter: blur(8px); } .btn.ghost::after { display: none; } .btn.ghost:hover { background: rgba(120,160,255,.14); border-color: rgba(160,200,255,.55); } /* ── Tipografía ───────────────────────────────────────────────────── */ .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); margin-bottom: 16px; opacity: .95; } .grad{ background: linear-gradient(104deg, var(--cyan) 0%, var(--blue) 42%, var(--violet) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 34px rgba(79,140,255,.35)); } .display{ font-size: clamp(2.5rem, 6.6vw, 5.1rem); line-height: .98; font-weight: 830; letter-spacing: -.035em; margin-bottom: 22px; } .display.sm { font-size: clamp(2rem, 4.4vw, 3.4rem); } .h2 { font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; } .lead { font-size: clamp(15px, 1.15vw, 17.5px); color: var(--muted); max-width: 64ch; } .lead.narrow { max-width: 58ch; } .lead strong { color: var(--text); font-weight: 650; } .muted-note { font-size: 13px; color: var(--dim); margin-top: 18px; } .muted-note a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(34,211,238,.35); } .body-text p { font-size: 15px; color: var(--muted); margin-bottom: 14px; line-height: 1.7; } .body-text p strong { color: var(--text); } /* Chips de características / badge row del hero --> .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .chips li { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); } /* ── Secciones ────────────────────────────────────────────────────── */ .sec { padding: clamp(80px, 11vw, 140px) 0; position: relative; } .sec-alt { background: linear-gradient(180deg, transparent, rgba(9,14,26,.72) 18%, rgba(9,14,26,.72) 82%, transparent); } .sec-dark { background: linear-gradient(180deg, rgba(4,7,16,.6), rgba(6,9,17,.9) 30%, rgba(6,9,17,.9) 70%, rgba(4,7,16,.6)); } /* ── Rejillas ─────────────────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } } /* ── Panel glass ──────────────────────────────────────────────────── */ .panel-glass { position: relative; padding: 28px 26px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,26,46,.72), rgba(8,12,22,.9)); box-shadow: var(--shadow); overflow: hidden; } .panel-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; opacity: .9; } .panel-note { font-size: 13px; color: var(--dim); margin-top: 16px; line-height: 1.6; } /* ── Dos chips · arte del enlace serie (SVG propio) ───────────────── */ .chips-art { display: block; width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 14px 34px rgba(34, 211, 238, .16)); } @media (prefers-reduced-motion: no-preference) { .chips-art { transition: filter .5s var(--ease); } .chips-art:hover { filter: drop-shadow(0 16px 42px rgba(79, 140, 255, .24)); } } /* ── Lista de checks ──────────────────────────────────────────────── */ .checks { display: grid; gap: 10px; margin-top: 20px; } .checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--muted); } .tick { color: var(--cyan); font-size: 15px; font-weight: 900; flex-shrink: 0; margin-top: 1px; } /* ── HERO ─────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 150px 0 80px; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 64px); align-items: center; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { display: none; } } .hero-copy { position: relative; } .hero-copy .display { margin-bottom: 24px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .tira-slot { margin-top: 28px; } /* Arte del chip: flotación + anillos orbitales */ .hero-art { position: relative; display: grid; place-items: center; min-height: 360px; } .chip-img { width: min(380px, 88%); filter: drop-shadow(0 40px 70px rgba(4,7,16,.9)) drop-shadow(0 0 60px rgba(79,140,255,.35)); animation: float 9s var(--ease) infinite alternate; } @keyframes float { to { transform: translateY(-16px) rotate(1.2deg); } } .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(140,180,255,.22); aspect-ratio: 1; animation: spin 34s linear infinite; } .ring.r1 { width: 74%; border-style: dashed; border-color: rgba(34,211,238,.28); } .ring.r2 { width: 96%; border-color: rgba(139,92,246,.18); animation-duration: 52s; animation-direction: reverse; } @keyframes spin { to { transform: rotate(360deg); } } /* Malla SVG de fondo */ .mesh-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .mesh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; } .mesh .links path { stroke-dasharray: 7 11; animation: dash 22s linear infinite; } @keyframes dash { to { stroke-dashoffset: -360; } } .mesh-nodes .halo { fill: url(#ng); animation: pulse 5.5s var(--ease) infinite; } .mesh-nodes .dot { fill: #dff2ff; filter: drop-shadow(0 0 8px rgba(186,230,253,.95)); } .mesh-nodes g:nth-child(2n) .halo { animation-delay: .9s; } .mesh-nodes g:nth-child(3n) .halo { animation-delay: 1.8s; } .mesh-nodes g:nth-child(5n) .halo { animation-delay: 2.6s; } @keyframes pulse { 0%, 100% { opacity: .28; transform: scale(.86); } 50% { opacity: .95; transform: scale(1.14); } } /* ── ECA Flow ─────────────────────────────────────────────────────── */ .eca-flow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 40px; } @media (max-width: 860px) { .eca-flow { flex-direction: column; } } .eca-card { flex: 1; min-width: 200px; max-width: 300px; position: relative; padding: 24px 20px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,26,46,.72), rgba(8,12,22,.88)); box-shadow: var(--shadow); overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease); } .eca-card:hover { transform: translateY(-4px); border-color: var(--line-hi); } .eca-entrada { border-top: 3px solid var(--green); } .eca-condicion { border-top: 3px solid var(--blue); } .eca-accion { border-top: 3px solid var(--violet); } .eca-icon-wrap { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(79,140,255,.1); border: 1px solid var(--line-hi); margin-bottom: 12px; } .eca-icon { font-size: 18px; } .eca-tag { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; opacity: .85; } .eca-title { font-size: 15px; font-weight: 720; letter-spacing: -.01em; margin-bottom: 6px; color: var(--text); } .eca-val { font-size: 13px; color: var(--muted); } .eca-connector { flex-shrink: 0; width: 52px; display: grid; place-items: center; padding: 0 4px; } .eca-connector svg { width: 48px; height: 24px; } @media (max-width: 860px) { .eca-connector { transform: rotate(90deg); width: 48px; height: 48px; } } /* ── Editor wrap e iframe ─────────────────────────────────────────── */ .editor-wrap { margin-top: 28px; } .editor-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; padding: 0 4px; } .editor-header span { font-size: 13px; font-weight: 600; color: var(--muted); } .editor-badge { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3); border-radius: 999px; padding: 4px 10px; } .embed { position: relative; padding: 8px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,20,36,.86), rgba(6,9,17,.92)); box-shadow: var(--shadow); } .embed iframe { display: block; width: 100%; height: 440px; border: 0; border-radius: calc(var(--r) - 8px); background: #070b14; } @media (max-width: 660px) { .embed iframe { height: 320px; } } /* ── Punto de la malla Zigbee (hero) ────────────────────────────────── La antigua tarjeta "Flujo de ejemplo · riego inteligente" se retiró: su animación la sustituye el editor de flujo embebido (iframe), que es la herramienta real del producto. El punto genérico se mantiene porque lo usan los nodos que genera la malla del hero (`.mesh-nodes`, ver app.js). */ .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; } /* ── Tarjetas ─────────────────────────────────────────────────────── */ .card { position: relative; padding: 26px 24px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,26,46,.72), rgba(9,14,25,.86)); box-shadow: var(--shadow); overflow: hidden; transition: transform .45s var(--ease), border-color .45s var(--ease); } .card h3 { font-size: 16.5px; font-weight: 720; letter-spacing: -.015em; margin-bottom: 8px; } .card p { font-size: 14px; color: var(--muted); } .card-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 16px; background: linear-gradient(150deg, rgba(79,140,255,.22), rgba(139,92,246,.14)); border: 1px solid var(--line-hi); font-size: 19px; } .card:hover { transform: translateY(-4px); border-color: var(--line-hi); } /* Spotlight: sigue el cursor en tarjetas marcadas con .spot --> .spot::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(120,180,255,.16), transparent 62%); transition: opacity .5s var(--ease); } .spot:hover::before { opacity: 1; } /* ── Arquitectura ─────────────────────────────────────────────────── */ .arch { margin-top: 40px; padding: 28px 18px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(13,20,36,.82), rgba(7,11,20,.94)); box-shadow: var(--shadow); } .arch svg { width: 100%; height: auto; display: block; } .arch-legend { display: grid; gap: 14px; margin-top: 28px; max-width: 820px; } .arch-step { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted); } .arch-step strong { color: var(--text); } .arch-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; box-shadow: 0 0 8px currentColor; } /* ── Packs ────────────────────────────────────────────────────────── */ .packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 860px) { .packs-grid { grid-template-columns: 1fr; } } .pack-card { position: relative; display: flex; flex-direction: column; gap: 0; padding: 28px 24px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18,26,46,.76), rgba(8,12,22,.9)); box-shadow: var(--shadow); overflow: hidden; transition: transform .45s var(--ease), border-color .45s var(--ease); } .pack-card:hover { transform: translateY(-4px); border-color: var(--line-hi); } .pack-featured { border-color: rgba(79,140,255,.35); } .pack-featured:hover { border-color: rgba(79,140,255,.65); } .pack-badge-top { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.28); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; width: fit-content; } .pack-name { font-size: 17px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 8px; } .pack-price { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 840; letter-spacing: -.03em; margin-bottom: 8px; background: linear-gradient(100deg, var(--cyan), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .pack-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; } .pack-feats { display: grid; gap: 9px; margin-bottom: 22px; } .pack-feats li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--muted); } .pack-feats li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--green) 0 34%, transparent 36%); border: 1px solid rgba(52,211,153,.5); } .pack-btn { margin-top: auto; width: 100%; } /* ── Badges ───────────────────────────────────────────────────────── */ .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .badge { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(120,160,255,.06); } /* ── FAQ ──────────────────────────────────────────────────────────── */ .faq { display: grid; gap: 12px; margin-top: 40px; max-width: 900px; } .faq details { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: linear-gradient(180deg, rgba(16,23,41,.7), rgba(8,12,22,.86)); transition: border-color .35s var(--ease); } .faq details[open] { border-color: var(--line-hi); } .faq summary { cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease); } .faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); } .faq details p { padding: 0 22px 20px; font-size: 14px; color: var(--muted); max-width: 78ch; } /* ── Finale y Pie ─────────────────────────────────────────────────── */ .finale { position: relative; padding: clamp(80px, 11vw, 140px) 0; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(90% 70% at 50% 0%, rgba(79,140,255,.16), transparent 70%); } .finale .lead { margin: 0 auto; } .finale .btn { margin-top: 30px; } .finale .muted-note { margin-top: 22px; } .foot { border-top: 1px solid var(--line); padding: 44px 0 56px; background: rgba(4,6,12,.72); } .foot-in { display: grid; gap: 8px; text-align: center; font-size: 13px; color: var(--dim); } .foot-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--text); } .foot-brand img { border-radius: 8px; } .foot-note { color: var(--dim); } .foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-hi); } .foot a:hover { color: var(--text); } /* ── Entrada animada (scrollytelling) ────────────────────────────── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .12s; } .reveal[data-delay="2"] { transition-delay: .24s; } .reveal[data-delay="3"] { transition-delay: .36s; } /* ── Reduced-motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .fx-grain, .fx-scanline { display: none; } .fx-brand .halo { display: none; } /* sin giro: queda el aura fija */ } /* ── Pack individual centrado ─────────────────────────────────────── */ .pack-solo-wrap { display: flex; justify-content: center; margin-top: 40px; } .pack-solo { width: min(480px, 100%); text-align: center; border-color: rgba(79,140,255,.35); padding: 36px 32px 32px; background: linear-gradient(180deg, rgba(18,30,58,.82), rgba(8,12,22,.94)); box-shadow: 0 40px 100px -30px rgba(79,140,255,.3), var(--shadow); } .pack-solo-ico { font-size: 38px; display: block; margin-bottom: 16px; filter: drop-shadow(0 0 20px rgba(79,140,255,.6)); } .pack-solo .pack-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; color: var(--text); } .pack-solo .pack-price { font-size: clamp(3rem, 6vw, 4rem); letter-spacing: -.04em; margin-bottom: 10px; } .pack-solo .pack-desc { font-size: 15px; color: var(--muted); margin-bottom: 24px; } .pack-feats-solo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; text-align: left; margin-bottom: 28px; } @media (max-width: 500px) { .pack-feats-solo { grid-template-columns: 1fr; } } /* ── Fila de núcleo del hero: dots con glow + micro-copy ─────────────── */ .core-feats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; } .feat { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; } .feat-k { font-weight: 700; color: var(--text); } .feat-m { font-size: 11px; color: var(--dim); opacity: .82; } .feat-dot { --c: #22d3ee; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px var(--c); animation: feat-pulse .6s var(--ease) infinite; } @media (prefers-reduced-motion: reduce) { .feat-dot { animation: none; } } @keyframes feat-pulse { 50% { opacity: .6; } } /* glow semántico por característica */ .feat-dot[data-feat="offline"] { --c: var(--green); } /* Zigbee mesh */ .feat-dot[data-feat="hub"] { --c: var(--blue); } /* coordinador embebido */ .feat-dot[data-feat="zigbee"] { --c: #fb7185; } /* rosa IEEE 802.15.4 */ .feat-dot[data-feat="app"] { --c: var(--cyan); } /* UI embebida */ .feat-dot[data-feat="offline2"] { --c: var(--amber); } /* offline robusto */ .feat-dot[data-feat="dual"] { --c: var(--violet); } /* ECA + FBP dual */ @media (max-width: 540px) { .core-feats { gap: 6px 10px; } .feat { font-size: 12px; } .feat-m { display: none; } /* micro-copy opaco en móvil */ }