/* 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:#16211F; --muted:#6B7876; --accent:#0F766E; --accent-d:#0B5A54; --soft:#E6F2F0; --line:#DDE3E2; --bg:#F8FAFA; --ent-a:#08443F; --ent-b:#0B5A54; --ent-ink:#C6E1DD; --shadow:rgba(8,68,63,.09); --shadow-lg:rgba(8,68,63,.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} /* No letter-spacing on the wordmark. At 1px the five letters read as separate shapes — "Batz a" at a glance — which is the last thing a brand name should do while its owner is arguing with a name-matching check. */ .brand{font-size:23px;font-weight:800;letter-spacing:0;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:auto;height:1.08em;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 real-looking dashboard rather than grey bars: the actual sidebar labels, an agenda with times and status chips, the photo angles, the reports tiles. The people are invented. Still deliberately faint and slow, so it reads as texture behind the headline rather than something to stop and read. CSS only, so it costs no images, no scripts and nothing to load. */ .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(920px,90vw);height:352px; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 22px 60px var(--shadow);overflow:hidden;opacity:.34; transform:perspective(1500px) rotateX(5deg); } .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;flex:none} .demo-url{margin-left:14px;font-size:10.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:2px 12px} .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(8px)} 4% {opacity:1;transform:translateY(0)} 25% {opacity:1;transform:translateY(0)} 29% {opacity:0;transform:translateY(-8px)} 100% {opacity:0;transform:translateY(-8px)} } /* sidebar */ .demo-side{width:124px;background:var(--bg);border-right:1px solid var(--line);padding:12px 10px;flex:none} .ds-logo{font-size:13px;font-weight:850;color:var(--accent);padding:2px 8px 12px} .ds-item{font-size:11.5px;color:var(--muted);padding:7px 9px;border-radius:7px;margin-bottom:2px;font-weight:600} .ds-item.on{background:var(--accent);color:#fff} /* main panel */ .demo-main{flex:1;padding:14px 18px;min-width:0} .dm-title{font-size:15px;font-weight:800;margin-bottom:10px} .dm-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11.5px} .dm-time{color:var(--muted);font-weight:700;width:38px;flex:none} .dm-av{width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none} .dm-name{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-sub{color:var(--muted);flex:none} .dm-chip{font-size:9.5px;font-weight:800;border-radius:20px;padding:3px 9px;background:var(--soft);color:var(--muted);flex:none} .dm-chip.ok{background:var(--accent);color:#fff} .dm-chip.new{background:#fff;border:1px solid var(--accent);color:var(--accent)} .dm-search{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:8px} /* photo angles + grid */ .dm-angles{display:flex;gap:6px;margin-bottom:10px} .dm-angle{font-size:10px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:3px 10px} .dm-angle.on{background:var(--accent);color:#fff;border-color:var(--accent)} .dm-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .dm-photo{aspect-ratio:3/4;border-radius:7px;border:1px solid var(--line);background:linear-gradient(160deg,var(--soft),#fff);position:relative} .dm-cap{position:absolute;left:0;right:0;bottom:0;font-size:8.5px;color:var(--muted);text-align:center;padding:3px 2px;background:rgba(255,255,255,.75);border-radius:0 0 6px 6px} /* reports */ .dm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:6px} .dm-stat{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fff} .dm-stat b{display:block;font-size:19px;font-weight:850;color:var(--accent);line-height:1.1} .dm-stat span{font-size:9.5px;color:var(--muted)} .demo-chart{display:flex;align-items:flex-end;gap:7px;height:86px;margin-top:8px} .demo-chart i{flex:1;background:var(--accent);opacity:.45;border-radius:4px 4px 0 0;display:block} @media(max-width:900px){.demo{display:none}} /* too cramped to sit under 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} /* SPECIALTIES STRIP — sits directly under the nav, above the fold. The first question a visitor has is "is my specialty here?", so it is answered before they have to scroll or read anything. */ .specs{background:var(--accent);color:#fff} .specs .wrap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px} .specs .lbl{font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.8} .specs a,.specs span.s{font-size:13.5px;font-weight:700;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:5px 13px;white-space:nowrap} .specs a:hover{background:rgba(255,255,255,.28)} .specs a.more{background:#fff;color:var(--accent);border-color:#fff} @media(max-width:620px){.specs .lbl{display:none}} /* TAILORED — the three states a feature can be in for a given specialty. Mirrors how the product actually works: the template turns some things on, leaves others available, and removes the ones belonging to other specialties so they never clutter the screen. */ .tailor{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto} @media(max-width:860px){.tailor{grid-template-columns:1fr}} .tcol{border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:#fff;box-shadow:0 6px 22px var(--shadow)} .tcol.on{border:2px solid var(--accent);background:var(--soft)} .tcol.off{background:var(--bg);box-shadow:none} .tcol .th{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:850;margin-bottom:5px} .tcol .ts{color:var(--muted);font-size:13.5px;margin-bottom:14px;line-height:1.45} .tcol ul{list-style:none;display:grid;gap:9px} .tcol li{font-size:14.5px;display:flex;gap:9px;align-items:flex-start;line-height:1.35} .tcol li .m{flex:none;font-weight:800;color:var(--accent)} .tcol.off li{color:var(--muted)} .tcol.off li .m{color:var(--muted)} .tailor-note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:20px} /* "WHAT EVERYTHING COMES WITH" — an expander under the plans. Built on

, so it opens with no JavaScript and works even if a script somewhere else fails. Closed by default: the plans stay scannable, and the full list is one click away for whoever actually wants it. */ .allin{max-width:1000px;margin:18px auto 0} .allin>summary{ list-style:none;cursor:pointer;text-align:center; display:block;background:transparent;color:var(--accent); border:1.5px solid var(--accent);border-radius:12px; padding:13px 22px;font-size:15px;font-weight:800; } .allin>summary::-webkit-details-marker{display:none} .allin>summary:hover{background:var(--soft)} .allin>summary::after{content:" ▾"} .allin[open]>summary::after{content:" ▴"} .allin-body{border:1px solid var(--line);border-top:none;border-radius:0 0 14px 14px;padding:22px 22px 6px;background:#fff;margin-top:-6px} .allin-grp{margin-bottom:18px} .allin-grp .gh{font-size:13px;font-weight:850;color:var(--accent);letter-spacing:.4px;text-transform:uppercase;margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--line)} .allin-grp ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px} @media(max-width:760px){.allin-grp ul{grid-template-columns:1fr}} .allin-grp li{font-size:14.5px;display:flex;gap:9px;align-items:flex-start;line-height:1.4} .allin-grp li .c{color:var(--accent);font-weight:800;flex:none} .allin-grp li span.d{color:var(--muted);font-size:13.5px}