/* Shared styles for batzatech.com — the hub and every product page. One file, so the whole family shares a single layout and there is one place to change the look. The colour comes from the page's Nivel (see below). */ /* ── Colour by Nivel ────────────────────────────────────────────────────────── Each Nivel (the priority tiers of the product catalogue) has its own base colour, so the whole family reads as one company with clearly different branches. A page declares its tier on the body — — and every button, price, badge and band below follows automatically. Nothing else in this file hard-codes a colour. Nivel 1 verde estética · dermatología · capilar · fisioterapia · medispa · nutrición Nivel 2 azul alergología · psicología · podología · pediatría · ginecología … Nivel 3 morado veterinaria · depilación láser · micropigmentación · laboratorios … Nivel 4 naranja salones · barberías · uñas · tatuajes · gimnasios … Nivel 5 gris talleres · academias · autoescuelas · despachos … Every accent is dark enough for white text to stay legible on it. */ :root, .nivel-1{ --ink:#12211B; --muted:#5D6E66; --accent:#17936A; --accent-d:#147F5A; --soft:#E7F3ED; --line:#DCEAE3; --bg:#F4FAF7; --ent-a:#0E4635; --ent-b:#147F5A; --ent-ink:#DDEBE4; --shadow:rgba(14,70,53,.09); --shadow-lg:rgba(14,70,53,.16); } .nivel-2{ --ink:#111C26; --muted:#5A6875; --accent:#1A66AD; --accent-d:#14548F; --soft:#E4EFF9; --line:#D5E5F4; --bg:#F3F8FD; --ent-a:#0D3559; --ent-b:#14548F; --ent-ink:#DCE8F4; --shadow:rgba(13,53,89,.10); --shadow-lg:rgba(13,53,89,.18); } .nivel-3{ --ink:#1A1526; --muted:#655C75; --accent:#5B3FB0; --accent-d:#4A3292; --soft:#EEEAF9; --line:#E1DAF3; --bg:#F7F5FD; --ent-a:#2E1F5C; --ent-b:#4A3292; --ent-ink:#E4DEF4; --shadow:rgba(46,31,92,.10); --shadow-lg:rgba(46,31,92,.18); } .nivel-4{ --ink:#261A11; --muted:#75655A; --accent:#A85410; --accent-d:#8A440B; --soft:#FBEDE1; --line:#F5DFCD; --bg:#FEF8F3; --ent-a:#5C2F08; --ent-b:#8A440B; --ent-ink:#F4E4D6; --shadow:rgba(92,47,8,.10); --shadow-lg:rgba(92,47,8,.18); } .nivel-5{ --ink:#161C1F; --muted:#5F6E76; --accent:#4A5C67; --accent-d:#3A4952; --soft:#E9EEF1; --line:#DCE3E7; --bg:#F5F8F9; --ent-a:#26333A; --ent-b:#3A4952; --ent-ink:#DFE6EA; --shadow:rgba(38,51,58,.10); --shadow-lg:rgba(38,51,58,.18); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5} a{color:inherit;text-decoration:none} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} /* NAV */ header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav .row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .brand{font-size:23px;font-weight:800;letter-spacing:1px;display:inline-flex;align-items:center;gap:9px} /* The pulse mark takes the Nivel colour too (its circle is fill="currentColor"), so a page never mixes a green logo with a blue or orange interface. */ .brand .blogo{width:1.15em;height:1.15em;flex:none;color:var(--accent)} .brand span{color:var(--accent)} .brand small{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--muted);text-transform:uppercase} .menu{display:flex;gap:22px;align-items:center} .menu a{font-size:15px;color:var(--muted);font-weight:600} .menu a:hover{color:var(--ink)} .btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:10px 18px;border-radius:10px;font-size:14px;border:1.5px solid var(--accent);cursor:pointer} .btn:hover{background:var(--accent-d);border-color:var(--accent-d)} .btn.ghost{background:transparent;color:var(--accent)} .btn.ghost:hover{background:var(--soft)} .btn.lg{padding:14px 26px;font-size:16px;border-radius:12px} @media(max-width:860px){.menu a:not(.btn){display:none}} /* HERO */ .hero{background:linear-gradient(180deg,var(--soft) 0%,#fff 100%);padding:72px 0 64px;text-align:center;position:relative;overflow:hidden} .hero .wrap{position:relative;z-index:2} /* THE APP, DRIFTING BEHIND THE HERO A suggestion of the product rather than a demo of it: an abstracted window whose screens cross-fade slowly behind the headline. Deliberately faint and slow — it should register as texture, not as something to read. It is CSS only, so it costs no images, no scripts and no loading. */ .demo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1} .demo-win{ position:relative;width:min(880px,88vw);height:330px; background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 18px 50px var(--shadow);overflow:hidden;opacity:.30; transform:perspective(1400px) rotateX(6deg); } .demo-bar{height:30px;background:var(--soft);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px} .demo-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block} .demo-body{position:relative;height:calc(100% - 30px)} .demo-screen{position:absolute;inset:0;display:flex;opacity:0;animation:demoCycle 28s infinite} .demo-screen:nth-child(1){animation-delay:0s} .demo-screen:nth-child(2){animation-delay:7s} .demo-screen:nth-child(3){animation-delay:14s} .demo-screen:nth-child(4){animation-delay:21s} @keyframes demoCycle{ 0% {opacity:0;transform:translateY(10px)} 4% {opacity:1;transform:translateY(0)} 25% {opacity:1;transform:translateY(0)} 29% {opacity:0;transform:translateY(-10px)} 100% {opacity:0;transform:translateY(-10px)} } .demo-side{width:132px;background:var(--bg);border-right:1px solid var(--line);padding:14px 12px;flex:none} .demo-main{flex:1;padding:16px 18px} .demo-l{height:9px;border-radius:5px;background:var(--line);margin-bottom:10px} .demo-l.a{background:var(--accent);opacity:.55} .demo-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)} .demo-dot{width:22px;height:22px;border-radius:50%;background:var(--soft);flex:none} .demo-pill{height:16px;border-radius:8px;background:var(--soft);flex:none;width:54px} .demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .demo-tile{aspect-ratio:3/4;border-radius:8px;background:var(--soft);border:1px solid var(--line)} .demo-chart{display:flex;align-items:flex-end;gap:8px;height:104px;margin-top:12px} .demo-chart i{flex:1;background:var(--accent);opacity:.4;border-radius:4px 4px 0 0;display:block} @media(max-width:820px){.demo{display:none}} /* too cramped to read behind text */ @media(prefers-reduced-motion:reduce){ /* never animate at someone who asked us not to */ .demo-screen{animation:none} .demo-screen:nth-child(1){opacity:1} .demo-screen:not(:nth-child(1)){display:none} } .hero .eyebrow{margin-bottom:10px} .hero h1{font-size:44px;font-weight:850;letter-spacing:-1px;max-width:780px;margin:0 auto;line-height:1.12} .hero h1 .hl{color:var(--accent)} .hero p{font-size:19px;color:var(--muted);max-width:640px;margin:18px auto 28px} .hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .trust{margin-top:22px;color:var(--muted);font-size:13.5px} @media(max-width:620px){.hero h1{font-size:34px}} section{padding:60px 0} .eyebrow{color:var(--accent);font-weight:800;letter-spacing:1px;font-size:13px;text-transform:uppercase;text-align:center} .h2{font-size:31px;font-weight:800;text-align:center;margin:8px auto 10px;max-width:700px} .lead{color:var(--muted);font-size:17px;text-align:center;max-width:660px;margin:0 auto 36px} /* CARD GRIDS */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:860px){.grid{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 6px 22px var(--shadow)} .card .ico{font-size:26px} .card h3{font-size:17px;margin:12px 0 6px} .card p{color:var(--muted);font-size:14.5px} /* HUB — the product picker on the home page */ .products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:900px){.products{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.products{grid-template-columns:1fr}} .product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;box-shadow:0 6px 22px var(--shadow);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease} a.product:hover{transform:translateY(-3px);box-shadow:0 12px 30px var(--shadow-lg);border-color:var(--accent)} .product .ico{font-size:32px} .product h3{font-size:19px;margin:12px 0 6px} .product p{color:var(--muted);font-size:14.5px;flex:1} .product .go{margin-top:14px;color:var(--accent);font-weight:800;font-size:14.5px} .product.soon{opacity:.72;box-shadow:none;background:var(--bg)} .product.soon .go{color:var(--muted)} .tag{display:inline-block;background:var(--soft);color:var(--accent);font-size:11.5px;font-weight:800;letter-spacing:.5px;padding:4px 10px;border-radius:20px;text-transform:uppercase;align-self:flex-start} .tag.grey{background:#EDEFEE;color:var(--muted)} /* CATALOGUE — the whole family of products on one screen. Thirty-eight names would read as noise in a flat list, so they are grouped by Nivel and each group is tinted with that Nivel's colour. The three that are actually available stay big cards further up the page; here they are simply marked, so the catalogue shows scale without competing with what you can buy today. */ .cat-group{margin-top:30px} .cat-group:first-of-type{margin-top:0} .cat-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:9px;border-bottom:2px solid var(--accent);margin-bottom:14px} .cat-head .n{font-size:15px;font-weight:850;color:var(--accent);letter-spacing:.3px} .cat-head .d{font-size:13px;color:var(--muted)} .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px} .cat-item{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;font-size:14px;font-weight:600;line-height:1.25} .cat-item .i{font-size:19px;flex:none} a.cat-item{transition:border-color .12s ease,transform .12s ease} a.cat-item:hover{border-color:var(--accent);transform:translateY(-2px)} .cat-item.ready{border-color:var(--accent);border-width:2px;background:var(--soft)} .cat-item .badge-mini{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:20px;padding:2px 7px;margin-left:auto;flex:none} .cat-note{text-align:center;color:var(--muted);font-size:14px;margin-top:28px} .cat-note b{color:var(--ink)} /* "THERE ARE MORE" — the home page's doorway to the full catalogue. The catalogue itself lives only on /catalogo, so this has to do the work of showing there is a lot more without listing any of it: the five dots are the five colour bands, so the breadth is visible at a glance. */ .more{padding:64px 0} .more-box{ position:relative;overflow:hidden;text-align:center; border:1px solid var(--line);border-radius:22px;padding:46px 30px; background:linear-gradient(135deg,var(--soft) 0%,#fff 55%,var(--soft) 100%); box-shadow:0 10px 34px var(--shadow); } .more-dots{display:flex;gap:9px;justify-content:center;margin-bottom:18px} .more-dots i{width:13px;height:13px;border-radius:50%;display:block} .more-count{font-size:52px;font-weight:850;line-height:1;letter-spacing:-1.5px;color:var(--accent)} .more-box h2{font-size:29px;font-weight:850;margin-top:8px;letter-spacing:-.4px} .more-box p{color:var(--muted);font-size:17px;max-width:560px;margin:14px auto 26px} .more-box .btn{padding:17px 34px;font-size:17px;border-radius:14px} .more-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--muted)} .more-tags span{background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 12px} @media(max-width:620px){ .more-box{padding:36px 20px} .more-count{font-size:42px} .more-box h2{font-size:23px} } /* WHY US — reasons as a two-column list, denser than cards so several can be read at a glance without the section becoming a wall. */ .why{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 34px;max-width:940px;margin:0 auto} @media(max-width:820px){.why{grid-template-columns:1fr}} .why-item{display:flex;gap:13px;align-items:flex-start} .why-item .i{font-size:22px;flex:none;line-height:1.2} .why-item b{display:block;font-size:16px;margin-bottom:3px} .why-item span{color:var(--muted);font-size:14.5px;line-height:1.5} /* SECURITY — a darker band, because trust reads better on a solid block than on the same white as everything else. */ .sec{background:linear-gradient(135deg,var(--ent-a),var(--ent-b));color:#fff} .sec .eyebrow{color:#fff;opacity:.75} .sec .h2{color:#fff} .sec .lead{color:var(--ent-ink)} .sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto} @media(max-width:900px){.sec-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.sec-grid{grid-template-columns:1fr}} .sec-item{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:16px 17px} .sec-item b{display:block;font-size:15px;margin-bottom:4px} .sec-item span{color:var(--ent-ink);font-size:13.5px;line-height:1.5} .sec-foot{text-align:center;color:var(--ent-ink);font-size:14px;margin-top:26px;max-width:680px;margin-left:auto;margin-right:auto} /* FEATURES list */ .feat{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;max-width:900px;margin:0 auto} @media(max-width:760px){.feat{grid-template-columns:1fr}} .feat li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:15.5px} .feat li .c{color:var(--accent);font-weight:800;flex-shrink:0} .feat li b{display:block} .feat li span.d{color:var(--muted);font-size:14px} /* PRICING */ .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} @media(max-width:1000px){.tiers{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.tiers{grid-template-columns:1fr}} .tier{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;box-shadow:0 6px 22px var(--shadow)} .tier.pop{border:2px solid var(--accent);box-shadow:0 10px 30px var(--shadow-lg);position:relative} .tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;letter-spacing:.4px;white-space:nowrap} .tier .name{font-size:19px;font-weight:800} .tier .for{color:var(--muted);font-size:13.5px;margin-top:4px;min-height:38px} .tier .price{margin:14px 0 4px;font-size:32px;font-weight:800} .tier .price small{font-size:14px;color:var(--muted);font-weight:600} .tier .caps{font-size:13.5px;background:var(--soft);border-radius:10px;padding:9px 12px;margin:12px 0 16px;font-weight:600} .tier .btn{margin-top:auto;text-align:center} .note{color:var(--muted);font-size:13.5px;text-align:center;margin-top:16px} /* INSTITUCIONAL strip */ .ent{margin-top:18px;border-radius:16px;padding:22px 24px;background:linear-gradient(135deg,var(--ent-a),var(--ent-b));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .ent .n{font-size:20px;font-weight:800} .ent .d{color:var(--ent-ink);font-size:14px;margin-top:4px;max-width:560px} .ent .btn{background:#fff;color:var(--ent-a);border-color:#fff} .ent .btn:hover{background:var(--soft);border-color:var(--soft)} /* LOGIN band */ .login{background:var(--bg)} .login-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px;max-width:760px;margin:0 auto;text-align:center} .login-box h2{font-size:26px;font-weight:800} .login-box p{color:var(--muted);font-size:16px;margin:12px auto 22px;max-width:520px} .login-box .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* FOOTER */ footer{border-top:1px solid var(--line);padding:34px 0;text-align:center;color:var(--muted);font-size:14px} footer .links{margin-top:10px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap} footer .links a{font-weight:600} footer .links a:hover{color:var(--ink)} footer b{color:var(--accent)} /* COMING SOON page */ .soon-wrap{text-align:center;padding:90px 0} .soon-wrap .ico{font-size:54px} .soon-wrap h1{font-size:38px;font-weight:850;margin-top:14px} .soon-wrap p{color:var(--muted);font-size:18px;max-width:560px;margin:16px auto 28px}