/* ===== Home: barra de lectura ===== */
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #E8452C, #F26A2E, #F58A30, #F7A93B); pointer-events: none; }

/* ===== Home: cinta animada ===== */
.tick { background: var(--night); color: #fff; padding-block: clamp(36px, 5vw, 64px); overflow: hidden; position: relative; }
.tick-row { overflow: hidden; white-space: nowrap; }
.tick-track { display: inline-flex; gap: .6em; font-size: clamp(2.4rem, 7vw, 5.6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.12; will-change: transform; }
.tick-track span { display: inline-flex; align-items: center; gap: .6em; }
.tick-track span::after { content: "✦"; font-size: .4em; color: #F58A30; }
.tick-row.out .tick-track { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.4); }
.tick-row.grad .tick-track span:nth-child(3n+1) { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 5vw, 56px); }
.num { padding: 18px 16px; border-radius: 20px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.num b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num span { display: block; margin-top: 8px; font-size: .86rem; color: rgba(245,245,247,.62); font-weight: 600; line-height: 1.35; }
@media (max-width: 980px) { .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Home: catálogo de plantillas ===== */
.cat { background: linear-gradient(180deg, var(--night) 0, #0d0b16 50%, var(--night) 100%); color: #F5F5F7; overflow: hidden; }
.cat .sec-head h2 { color: #fff; }
.cat .lead { color: rgba(245,245,247,.62); }
.wall { margin: 0 0 clamp(40px, 6vw, 70px); display: grid; gap: 14px; transform: rotate(-3deg) scale(1.06); }
.wall-row { overflow: hidden; }
.wall-track { display: flex; gap: 14px; width: max-content; animation: wallMove 60s linear infinite; }
.wall-row.rev .wall-track { animation-direction: reverse; animation-duration: 70s; }
.wall:hover .wall-track { animation-play-state: paused; }
@keyframes wallMove { to { transform: translateX(-50%); } }
.wall figure { position: relative; margin: 0; width: clamp(200px, 22vw, 290px); aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; flex: none; box-shadow: 0 20px 40px -20px #000, inset 0 0 0 1px rgba(255,255,255,.1); }
.wall figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.wall figure:hover img { transform: scale(1.1); }
.wall figcaption { position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: grid; }
.wall figcaption b { font-size: .98rem; color: #fff; }
.wall figcaption span { font-size: .76rem; color: rgba(255,255,255,.7); }
.wall figure::after { content: ""; position: absolute; left: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; }
.tpl-chips button { padding: 10px 16px; border-radius: 99px; border: 0; cursor: pointer; font-weight: 700; color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: background .3s, color .3s; }
.tpl-chips button small { opacity: .6; margin-left: 4px; }
.tpl-chips button[aria-pressed=true] { background: #fff; color: #0b0b12; }
.tpl-grid { position: relative; margin: 0 calc(50% - 50vw); padding: 14px 0 40px; overflow: hidden; touch-action: pan-y; cursor: grab; transition: opacity .22s, transform .22s; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tpl-grid:active { cursor: grabbing; }
.tpl-track { display: flex; gap: 20px; width: max-content; padding: 0 20px; will-change: transform; }
.tpl-track .tc { flex: 0 0 clamp(270px, 78vw, 330px); user-select: none; -webkit-user-drag: none; }
.tpl-track img { -webkit-user-drag: none; pointer-events: none; }
.tpl-nav { position: absolute; top: 42%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: #fff; background: rgba(20,20,30,.72); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 30px -12px #000; transition: transform .2s, background .2s; }
.tpl-nav:hover { transform: scale(1.08); background: rgba(40,40,58,.9); }
.tpl-nav.prev { left: max(14px, calc(50vw - 600px)); }
.tpl-nav.next { right: max(14px, calc(50vw - 600px)); }
.tpl-grid.swap { opacity: 0; transform: translateY(14px); }
.tc { position: relative; border-radius: 26px; overflow: hidden; background: #14141E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -36px #000; transition: transform .5s var(--ease), box-shadow .5s, opacity .7s var(--ease); opacity: 0; transform: translateY(30px); transition-delay: calc(var(--i) * 45ms); }
.tc.in { opacity: 1; transform: none; }
.tc:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 60%, transparent), 0 40px 80px -36px color-mix(in srgb, var(--acc) 50%, #000); transition-delay: 0s; }
.tc::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%); }
.tc:hover::after { opacity: 1; }
.tc-media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.tc-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: tcKen 14s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
.tc:hover .tc-hero { animation-duration: 5s; }
@keyframes tcKen { from { transform: scale(1.04); } to { transform: scale(1.18) translate(-2%, -2%); } }
.tc-shade { position: absolute; inset: 0; }
.tc-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tc-fx i { position: absolute; bottom: -10px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; animation: tcRise var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes tcRise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-340px) translateX(20px); opacity: 0; } }
.tc-ui { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 8px; justify-items: start; color: #fff; }
.tc-tag { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); }
.tc-ui strong { font-size: 1.32rem; line-height: 1.06; letter-spacing: -.03em; font-weight: 900; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.tc-cta { font-size: .76rem; font-weight: 800; padding: 8px 14px; border-radius: 99px; color: #fff; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
.tc-biz { position: absolute; top: 14px; left: 16px; font-weight: 900; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.tc-anim { position: absolute; top: 12px; right: 12px; font-size: .68rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); }
.tc-body { padding: 16px 16px 18px; display: grid; gap: 12px; }
.tc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tc-top b { font-size: 1.08rem; color: #fff; }
.tc-top span { font-size: .72rem; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.tc-body p { margin: 0; font-size: .86rem; color: rgba(245,245,247,.62); line-height: 1.5; }
.tc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-items li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; font-size: .86rem; color: #fff; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.04); }
.tc-th { width: 40px; height: 40px; border-radius: 10px; background: #222 center/cover no-repeat; }
.tc-items b { font-size: .84rem; color: rgba(255,255,255,.8); padding-right: 6px; }
.tc-foot { display: flex; align-items: center; gap: 8px; }
.tc-sw { display: flex; gap: 4px; margin-right: auto; }
.tc-sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.tc-btn { font-size: .8rem; font-weight: 700; padding: 9px 13px; border-radius: 99px; text-decoration: none; color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .3s, transform .3s; white-space: nowrap; }
.tc-btn:hover { background: rgba(255,255,255,.16); }
.tc-btn.pri { background: var(--acc); color: #0b0b12; box-shadow: 0 10px 24px -10px var(--acc); }
.tc-err { text-align: center; color: rgba(255,255,255,.6); }

/* ===== Home: comparador ===== */
.vs { background: var(--bg-2); }
.vs-box { --p: 50%; position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; box-shadow: 0 50px 100px -50px rgba(20,20,40,.6); }
.vs-side { position: absolute; inset: 0; display: grid; align-content: end; padding: clamp(18px, 4vw, 44px); }
.vs-plain { background: #ECECEC; color: #555; font-family: 'Times New Roman', serif; }
.vs-plain .pl-nav { position: absolute; top: 0; left: 0; right: 0; padding: 14px 20px; background: #d6d6d6; font-size: 15px; display: flex; gap: 18px; }
.vs-plain h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); color: #333; font-weight: 400; margin: 0 0 6px; font-family: inherit; letter-spacing: 0; }
.vs-plain p { margin: 0 0 12px; font-size: 15px; }
.vs-plain .pl-btn { width: fit-content; padding: 6px 14px; background: #ccc; border: 1px solid #999; font-size: 14px; }
.vs-plain .pl-img { position: absolute; right: 6%; top: 22%; width: 34%; aspect-ratio: 1; background: #cfcfcf; display: grid; place-items: center; color: #999; font-size: 14px; }
.vs-roma { clip-path: inset(0 0 0 var(--p)); color: #fff; background: #000; }
.vs-roma img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: tcKen 12s ease-in-out infinite alternate; }
.vs-roma::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,6,3,.2), rgba(20,6,3,.85)); z-index: 1; }
.vs-roma > *:not(img) { position: relative; z-index: 2; }
.vs-roma .tc-fx { position: absolute; z-index: 2; }
.vs-roma .rm-tag { width: fit-content; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); margin-bottom: 12px; }
.vs-roma h3 { font-size: clamp(1.8rem, 4.6vw, 3.6rem); font-weight: 900; letter-spacing: -.05em; line-height: .98; margin: 0 0 10px; text-transform: uppercase; color: #fff; }
.vs-roma p { margin: 0 0 16px; opacity: .85; font-weight: 500; }
.vs-roma .rm-cta { width: fit-content; padding: 12px 22px; border-radius: 99px; background: #FF4D2E; font-weight: 800; box-shadow: 0 14px 30px -12px #FF4D2E; }
.vs-label { position: absolute; top: 18px; z-index: 4; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; }
.vs-label.l { left: 18px; background: #fff; color: #555; }
.vs-label.r { right: 18px; background: var(--grad); color: #fff; }
.vs-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 0; z-index: 5; }
.vs-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 20px rgba(255,255,255,.8); }
.vs-handle span { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 900; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.vs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 28px auto 0; }
.vs-list div { padding: 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.vs-list b { display: block; margin-bottom: 4px; }
.vs-list span { color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .vs-box { aspect-ratio: 4 / 5; } .vs-list { grid-template-columns: 1fr; } .vs-plain .pl-img { display: none; } }

/* ===== Home: video ===== */
.vid { background: var(--night); color: #fff; text-align: center; position: relative; overflow: hidden; }
.vid .sec-head h2 { color: #fff; }
.vid .lead { color: rgba(245,245,247,.62); }
.vid-frame { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 28px; padding: 2px; background: conic-gradient(from var(--ang, 0deg), #E8452C, #F26A2E, #F58A30, #F7A93B, #E8452C); animation: vidSpin 8s linear infinite; box-shadow: 0 60px 120px -50px rgba(242,106,46,.7); }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes vidSpin { to { --ang: 360deg; } }
.vid-frame video { display: block; width: 100%; border-radius: 26px; background: #000; aspect-ratio: 16 / 9; }
.glow-follow { position: relative; }
.glow-follow::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 50%), rgba(242,106,46,.16), transparent 60%); }
.glow-follow > * { position: relative; z-index: 1; }
.vid-sound { position: absolute; z-index: 3; top: 18px; right: 18px; padding: 10px 16px; border: 0; border-radius: 99px; cursor: pointer; font: 800 .9rem Montserrat, system-ui, sans-serif; color: #0b0b12; background: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); transition: transform .3s, opacity .3s; }
.vid-sound:hover { transform: scale(1.05); }
.vid-sound.off { opacity: 0; pointer-events: none; }