:root{--blue:#075cff;--blue-700:var(--acento-fg);--blue-soft:#edf4ff;--pink:#f51572;--pink-700:#d90860;--pink-soft:#fff0f7;--ink:#101828;--muted:#667085;--line:#e8edf5;--paper:#fff;--canvas:#f7f9fc;--green:#20bf66;--warning:#f79009;--shadow:0 12px 30px rgba(24,48,87,.08);--shadow-lg:0 22px 46px rgba(10,50,122,.16);--radius:18px;--max:1240px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html{background:var(--canvas);scroll-behavior:smooth}body{min-width:320px;margin:0;background:var(--canvas);color:var(--ink);font-family:inherit;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.app-shell{min-height:100vh}.desktop-only{display:block}.mobile-only{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.page{max-width:var(--max);margin:0 auto;padding:28px 24px 64px}.section{margin-top:34px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}.section-heading h2{font-size:25px;line-height:1.15;letter-spacing:-.65px;margin:0}.section-heading p{margin:7px 0 0;color:var(--muted);font-size:14px}.text-link{border:0;background:transparent;color:var(--blue);font-size:13px;font-weight:800;white-space:nowrap;padding:0}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.muted{color:var(--muted)}.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #dce5f4;border-radius:999px;background:#fff;padding:6px 11px;color:#53627c;font-size:12px;font-weight:700}.chip.pink{border-color:#ffd1e3;background:#fff6fa;color:var(--pink)}.chip.blue{border-color:#cfe0ff;background:#f7faff;color:var(--blue)}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:10px 16px;background:var(--blue);color:#fff;font-size:14px;font-weight:800;line-height:1;transition:transform .18s,background .18s,box-shadow .18s}.btn:hover{background:var(--blue-700);box-shadow:0 9px 18px rgba(7,92,255,.2);transform:translateY(-1px)}.btn.pink{background:var(--pink)}.btn.pink:hover{background:var(--pink-700)}.btn.light{border-color:#c9dcff;background:#fff;color:var(--blue)}.btn.ghost{border-color:var(--line);background:#fff;color:var(--ink)}.btn.wa{background:#13b85d}.btn.small{min-height:36px;padding:8px 12px;font-size:12px}.btn.block{width:100%}.icon{width:20px;height:20px;display:inline-block;flex:none;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.icon.sm{width:17px;height:17px}.icon.lg{width:27px;height:27px}.icon.fill{fill:currentColor;stroke:none}

/* Header and app navigation */
.utility{border-bottom:1px solid #edf1f6;background:#fff;color:#4a5971;font-size:11px}.utility-inner{max-width:var(--max);min-height:30px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.utility-list{display:flex;gap:20px;align-items:center}.app-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid #e9edf4}.head-main{max-width:var(--max);min-height:78px;margin:auto;padding:12px 24px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;flex:none}.brand img{width:180px;height:auto}.search-form{position:relative;flex:1;max-width:620px}.search-form input{width:100%;height:44px;border:1px solid #d9e1ef;border-radius:11px;padding:0 46px 0 14px;background:#f8faff;color:var(--ink);outline:0;font-size:13px}.search-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,92,255,.1);background:#fff}.search-form button{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center}.header-actions{display:flex;align-items:center;gap:19px;margin-left:auto}.header-action{position:relative;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:800;padding:6px 0}.header-action span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.header-action small{font-size:10px;font-weight:600;color:var(--muted)}.cart-count{position:absolute;top:-4px;left:13px;min-width:17px;height:17px;border-radius:99px;background:var(--pink);color:#fff;font-size:10px;display:grid;place-items:center}.install-quick{border:1px solid #cbdcff;background:#f7faff;color:var(--blue);border-radius:999px;padding:8px 11px;font-size:11px;font-weight:800}.primary-nav{border-top:1px solid #eff2f6;background:#fff}.primary-nav-inner{max-width:var(--max);min-height:46px;margin:auto;padding:0 24px;display:flex;align-items:center;gap:25px;overflow-x:auto;scrollbar-width:none}.primary-nav-inner::-webkit-scrollbar{display:none}.primary-nav a{position:relative;white-space:nowrap;color:#35415a;font-size:12px;font-weight:800;padding:14px 0}.primary-nav a:hover,.primary-nav a.active{color:var(--blue)}.primary-nav a.active:after{content:"";position:absolute;right:0;bottom:0;left:0;height:3px;border-radius:4px 4px 0 0;background:var(--blue)}.mobile-header{display:none}

/* Home */
.hero{overflow:hidden;position:relative;min-height:420px;border-radius:0 0 28px 28px;background:#061b46;color:#fff}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,23,62,.94) 0%,rgba(4,23,62,.74) 43%,rgba(4,23,62,.1) 100%);pointer-events:none}.hero-media{position:absolute;inset:0;background:url("/images/lab-1.jpg") center/cover no-repeat;mix-blend-mode:screen;opacity:.75}.hero-inner{position:relative;z-index:1;max-width:var(--max);margin:auto;padding:68px 24px 54px}.hero-content{max-width:565px}.hero .eyebrow{color:#93bcff}.hero h1{margin:0;font-size:50px;line-height:1.02;letter-spacing:-1.9px}.hero h1 em{font-style:normal;color:#ff5ba0}.hero p{max-width:500px;margin:19px 0 25px;color:#e0ebff;font-size:16px;line-height:1.65}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.hero-trust{display:flex;gap:19px;flex-wrap:wrap;margin-top:39px;color:#d7e5fd;font-size:12px;font-weight:700}.hero-trust span{display:flex;align-items:center;gap:7px}.hero-trust .icon{color:#82aaff}.quick-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-21px;position:relative;z-index:2}.benefit{min-height:85px;display:flex;align-items:center;gap:11px;border:1px solid #e5eaf2;border-radius:14px;background:#fff;padding:13px 15px;box-shadow:var(--shadow)}.benefit .icon-wrap{width:33px;height:33px;border-radius:10px;background:#eef4ff;color:var(--blue);display:grid;place-items:center}.benefit b,.benefit span{display:block}.benefit b{font-size:12px}.benefit span{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.25}.help-strip{display:flex;align-items:center;gap:17px;border:1px solid #ffd1e3;border-radius:17px;background:linear-gradient(105deg,#fff7fa,#fff);padding:16px 19px}.help-strip .help-icon{width:47px;height:47px;border-radius:14px;background:var(--pink);color:#fff;display:grid;place-items:center}.help-strip p{margin:3px 0 0;color:var(--muted);font-size:12px}.help-strip .btn{margin-left:auto}.notice-strip{display:flex;align-items:center;gap:12px;border:1px solid #d9e7ff;border-radius:16px;background:#f3f8ff;padding:13px 15px;color:#1d4c97}.notice-strip b{font-size:13px}.notice-strip p{margin:2px 0 0;font-size:11px;color:#5d6e89}.notice-strip .icon{color:var(--blue)}

/* Cards */
.category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.category-card{min-height:146px;border:1px solid #e6ebf3;border-radius:14px;background:#fff;padding:13px 10px 11px;text-align:center;transition:.18s box-shadow,.18s transform}.category-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#c9d9fa}.category-icon{height:77px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#eff5ff,#fff);font-size:36px}.category-card b{display:block;margin-top:8px;font-size:11px;line-height:1.2}.category-card span{display:block;margin-top:4px;color:var(--blue);font-size:10px;font-weight:700}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.product-card{position:relative;display:flex;min-width:0;flex-direction:column;border:1px solid #e4e9f1;border-radius:16px;background:#fff;padding:12px;overflow:hidden;transition:.2s transform,.2s box-shadow}.product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.product-card .discount{position:absolute;top:12px;left:12px;z-index:1;border-radius:6px;background:var(--pink);color:#fff;padding:4px 6px;font-size:10px;font-weight:800}.product-card .fav{position:absolute;top:11px;right:11px;z-index:2;width:30px;height:30px;border:0;border-radius:99px;background:rgba(255,255,255,.92);color:#667085;display:grid;place-items:center}.product-card .fav.selected{color:var(--pink)}.product-image{height:181px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#f8faff,#eef4ff);overflow:hidden}.product-image img{width:100%;height:100%;object-fit:contain;padding:9px;mix-blend-mode:multiply}.product-fallback{font-size:48px}.product-card h3{margin:11px 0 3px;font-size:14px;line-height:1.34}.product-meta{min-height:31px;color:var(--muted);font-size:11px;line-height:1.4}.product-rating{margin-top:8px;color:var(--warning);font-size:11px;font-weight:800}.product-price{display:flex;align-items:baseline;gap:7px;margin-top:5px;color:var(--pink);font-size:19px;font-weight:900;letter-spacing:-.5px}.product-price del{color:#98a2b3;font-size:10px;font-weight:600}.product-actions{display:flex;gap:8px;margin-top:12px}.product-actions .btn{flex:1}.product-actions .add-cart{width:38px;min-width:38px;padding:0}.empty-state{display:grid;min-height:235px;place-items:center;border:1px dashed #cbd5e1;border-radius:17px;background:#fff;padding:26px;text-align:center}.empty-state .empty-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 11px;border-radius:16px;background:var(--pink-soft);color:var(--pink)}.empty-state h2{margin:0;font-size:18px}.empty-state p{max-width:410px;margin:8px auto 16px;color:var(--muted);font-size:13px}.skeleton{border-radius:16px;background:linear-gradient(90deg,#edf1f6 25%,#f7f9fb 37%,#edf1f6 63%);background-size:400% 100%;animation:loading 1.25s ease infinite}@keyframes loading{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.service-card{display:flex;gap:14px;border:1px solid #e2e9f4;border-radius:16px;background:#fff;padding:17px;transition:.2s transform,.2s box-shadow}.service-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.service-icon{width:44px;height:44px;flex:none;border-radius:13px;background:#edf4ff;color:var(--blue);display:grid;place-items:center}.service-card h3{margin:1px 0 5px;font-size:14px}.service-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.service-card .text-link{margin-top:10px}.service-hero{display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;border-radius:20px;background:linear-gradient(125deg,#f3f7ff,#fff1f7);border:1px solid #dbe7ff}.service-hero-copy{padding:37px}.service-hero h1{margin:6px 0 11px;font-size:34px;letter-spacing:-1px;line-height:1.1}.service-hero p{margin:0 0 18px;color:#526176;font-size:14px;line-height:1.6}.service-hero-art{min-height:275px;background:url("/images/lab-2.jpg") center/cover no-repeat}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat-card{border:1px solid #e2eafa;border-radius:14px;background:#fff;padding:17px;text-align:center}.stat-card .icon{color:var(--blue)}.stat-card b{display:block;margin-top:9px;font-size:17px}.stat-card span{display:block;margin-top:2px;color:var(--muted);font-size:10px}.booking-option{display:flex;align-items:center;gap:12px;border:1px solid #dbe5f1;border-radius:15px;background:#fff;padding:15px;transition:border .15s,box-shadow .15s}.booking-option:hover{border-color:#9dbdff;box-shadow:var(--shadow)}.booking-option .service-icon{background:var(--pink-soft);color:var(--pink)}.booking-option b{font-size:13px}.booking-option span{display:block;margin-top:3px;color:var(--muted);font-size:11px}.booking-option .icon:last-child{margin-left:auto;color:var(--blue)}

/* Listing and secondary views */
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-title h1{margin:5px 0 0;font-size:34px;letter-spacing:-1px;line-height:1.1}.page-title p{max-width:630px;margin:9px 0 0;color:var(--muted);font-size:14px}.filter-row{display:flex;align-items:center;gap:9px;overflow:auto;margin-bottom:20px;padding-bottom:3px}.filter-row button{white-space:nowrap;border:1px solid #dce5f1;border-radius:999px;background:#fff;color:#53627c;padding:8px 12px;font-size:12px;font-weight:800}.filter-row button.active{border-color:#b7d0ff;background:#edf4ff;color:var(--blue)}.detail-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:28px}.gallery{position:relative;min-height:430px;border:1px solid #e4ebf4;border-radius:19px;background:linear-gradient(145deg,#f6f9ff,#edf4ff);display:grid;place-items:center;padding:28px}.gallery img{width:100%;height:100%;max-height:380px;object-fit:contain;mix-blend-mode:multiply}.detail-info{padding:14px 0}.detail-info h1{font-size:31px;line-height:1.15;letter-spacing:-1px;margin:8px 0}.detail-info p{color:var(--muted);font-size:14px;line-height:1.65}.detail-price{margin:16px 0;color:var(--pink);font-size:31px;font-weight:900}.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.spec{display:flex;gap:9px;border:1px solid #e4ebf4;border-radius:12px;background:#fff;padding:11px}.spec .icon{color:var(--blue)}.spec b{display:block;font-size:11px}.spec span{display:block;margin-top:2px;color:var(--muted);font-size:10px}.breadcrumbs{display:flex;gap:7px;align-items:center;margin-bottom:18px;color:#6b7890;font-size:12px;font-weight:700}.breadcrumbs button{border:0;background:transparent;color:inherit;padding:0}.breadcrumbs button:hover{color:var(--blue)}

/* Forms, carts and account */
.two-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.8fr);gap:21px}.panel{border:1px solid #e3e9f2;border-radius:18px;background:#fff;padding:21px;box-shadow:0 5px 14px rgba(16,24,40,.025)}.panel h2{margin:0 0 14px;font-size:18px}.panel h3{margin:0 0 8px;font-size:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:block;margin:0 0 14px}.field label{display:block;margin:0 0 6px;color:#475467;font-size:12px;font-weight:800}.field input,.field select,.field textarea{width:100%;min-height:43px;border:1px solid #dce4ef;border-radius:10px;background:#fff;padding:10px 11px;color:var(--ink);outline:0;font-size:13px}.field textarea{min-height:91px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,92,255,.1)}.stepper{display:flex;align-items:center;gap:7px;margin-bottom:18px}.step{display:flex;align-items:center;gap:7px;color:#98a2b3;font-size:11px;font-weight:800}.step b{display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:#e9edf4;font-size:10px}.step.active{color:var(--blue)}.step.active b{background:var(--blue);color:#fff}.step-line{width:31px;height:1px;background:#dfe6f0}.cart-list{display:grid;gap:13px}.cart-item{display:grid;grid-template-columns:76px 1fr auto;gap:13px;align-items:center;border-bottom:1px solid #edf0f5;padding-bottom:13px}.cart-item:last-child{border-bottom:0;padding-bottom:0}.cart-thumb{width:76px;height:67px;border-radius:10px;background:#f2f6fd;display:grid;place-items:center;overflow:hidden}.cart-thumb img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:multiply}.cart-item h3{font-size:13px;line-height:1.3}.cart-item p{margin:4px 0 0;color:var(--muted);font-size:11px}.quantity{display:flex;align-items:center;gap:6px;margin-top:8px}.quantity button{width:23px;height:23px;border:1px solid #dce3ed;border-radius:6px;background:#fff;color:var(--blue);font-weight:800}.quantity span{min-width:16px;text-align:center;font-size:12px;font-weight:800}.cart-price{color:var(--pink);font-size:15px;font-weight:900;white-space:nowrap}.summary{position:sticky;top:102px}.summary-row{display:flex;justify-content:space-between;gap:10px;margin:10px 0;color:#58677f;font-size:13px}.summary-row.total{margin-top:15px;border-top:1px solid #edf0f5;padding-top:15px;color:var(--ink);font-weight:900;font-size:16px}.payment-option{display:flex;align-items:center;gap:10px;border:1px solid #dce5f1;border-radius:10px;padding:12px;margin:9px 0;font-size:12px;font-weight:800}.payment-option input{accent-color:var(--blue)}.payment-option span{margin-left:auto;color:#74819a;font-size:11px}.auth-wrap{display:grid;min-height:calc(100vh - 170px);place-items:center;padding:34px 0}.auth-card{width:min(100%,450px);border:1px solid #e2e9f2;border-radius:20px;background:#fff;padding:31px;box-shadow:var(--shadow-lg)}.auth-brand{display:flex;justify-content:center;margin-bottom:22px}.auth-brand img{width:185px}.auth-card h1{margin:0;font-size:27px;letter-spacing:-.8px;text-align:center}.auth-card>p{text-align:center;margin:9px 0 23px;color:var(--muted);font-size:13px}.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#98a2b3;font-size:11px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#e9edf4}.account-card{display:flex;align-items:center;gap:15px;border:1px solid #deebff;border-radius:18px;background:linear-gradient(105deg,#f7faff,#fff);padding:21px}.avatar{display:grid;width:54px;height:54px;place-items:center;border-radius:50%;background:#dbeafe;color:var(--blue);font-size:18px;font-weight:900}.account-card h2{margin:0;font-size:18px}.account-card p{margin:4px 0 0;color:var(--muted);font-size:12px}.menu-list{display:grid;gap:8px}.menu-row{display:flex;align-items:center;gap:12px;border:1px solid #e7ecf3;border-radius:12px;background:#fff;padding:13px 14px}.menu-row .icon:first-child{color:var(--blue)}.menu-row b{font-size:13px}.menu-row span{display:block;margin-top:2px;color:var(--muted);font-size:11px}.menu-row .icon:last-child{margin-left:auto;color:#8a97ab}.timeline{position:relative;display:grid;gap:0;margin:9px 0 0}.timeline-item{position:relative;padding:0 0 20px 30px;color:#667085;font-size:12px}.timeline-item:before{content:"";position:absolute;left:7px;top:6px;width:9px;height:9px;border:3px solid #fff;border-radius:50%;background:#b8c3d4;box-shadow:0 0 0 1px #b8c3d4}.timeline-item:after{content:"";position:absolute;left:11px;top:17px;bottom:-2px;width:1px;background:#dfe6f0}.timeline-item:last-child:after{display:none}.timeline-item.active{color:#1f4d9a;font-weight:700}.timeline-item.active:before{background:var(--blue);box-shadow:0 0 0 1px var(--blue)}

/* Information pages and status */
.info-hero{border-radius:20px;background:linear-gradient(115deg,#064cda,#0b76ff 56%,#ee267b);color:#fff;padding:43px}.info-hero h1{max-width:590px;margin:8px 0;font-size:37px;line-height:1.07;letter-spacing:-1.1px}.info-hero p{max-width:590px;margin:0;color:#e4edff;font-size:14px;line-height:1.65}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{border:1px solid #e4ebf3;border-radius:17px;background:#fff;padding:20px}.info-card .icon{color:var(--blue)}.info-card h2{margin:13px 0 6px;font-size:17px}.info-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.legal-content{border:1px solid #e4ebf3;border-radius:18px;background:#fff;padding:28px}.legal-content h2{margin:25px 0 9px;font-size:19px}.legal-content h2:first-child{margin-top:0}.legal-content p{color:#53627c;font-size:13px;line-height:1.75}.update-banner{position:fixed;z-index:110;right:20px;bottom:22px;display:flex;align-items:center;gap:13px;max-width:420px;border:1px solid #cfe0ff;border-radius:14px;background:#fff;padding:12px 14px;box-shadow:var(--shadow-lg)}.update-banner p{margin:0;color:#46546d;font-size:12px}.update-banner .btn{min-height:35px;padding:7px 10px;font-size:11px}.toast{position:fixed;z-index:120;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;border-radius:999px;background:#152342;color:#fff;padding:10px 15px;font-size:12px;font-weight:700;box-shadow:var(--shadow-lg);transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}.wa-float{position:fixed;right:21px;bottom:22px;z-index:50;display:grid;width:56px;height:56px;place-items:center;border-radius:50%;background:#19c768;color:#fff;box-shadow:0 12px 24px rgba(25,199,104,.38);transition:transform .2s}.wa-float:hover{transform:scale(1.07)}.install-banner{display:none}

@media(max-width:1024px){.head-main{gap:16px}.header-actions{gap:13px}.category-grid{grid-template-columns:repeat(4,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.quick-benefits{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}.desktop-header,.desktop-only{display:none!important}.mobile-only{display:block}.mobile-header{position:sticky;top:0;z-index:70;display:block;padding-top:env(safe-area-inset-top);background:linear-gradient(115deg,#0355f5,#086bf6)}.mobile-top{height:58px;padding:0 15px;display:grid;grid-template-columns:38px 1fr 43px;align-items:center;gap:8px}.mobile-menu,.mobile-cart{border:0;background:transparent;color:#fff;display:grid;place-items:center;padding:6px}.mobile-top .brand{justify-content:center}.mobile-top .brand img{width:128px;filter:brightness(0) invert(1) contrast(1.45)}.mobile-cart{position:relative}.mobile-search{position:relative;padding:0 14px 11px}.mobile-search input{width:100%;height:38px;border:0;border-radius:9px;padding:0 41px 0 12px;background:#fff;color:var(--ink);font-size:12px;outline:0}.mobile-search button{position:absolute;right:19px;top:4px;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--blue);display:grid;place-items:center}.mobile-header .cart-count{top:1px;left:27px}.page{padding:20px 14px 30px}.hero{min-height:315px;border-radius:0 0 20px 20px}.hero:after{background:linear-gradient(90deg,rgba(3,22,59,.88),rgba(3,22,59,.34))}.hero-inner{padding:38px 18px 31px}.hero h1{max-width:285px;font-size:31px;letter-spacing:-1.2px}.hero p{max-width:260px;margin:12px 0 17px;font-size:12px}.hero-actions .btn{min-height:38px;padding:8px 10px;font-size:11px}.hero-trust{gap:10px;margin-top:23px;font-size:9px}.quick-benefits{gap:7px;margin-top:-13px}.benefit{min-height:64px;gap:7px;padding:9px}.benefit .icon-wrap{width:27px;height:27px;border-radius:8px}.benefit .icon{width:15px}.benefit b{font-size:9px}.benefit span{font-size:8px}.section{margin-top:27px}.section-heading{margin-bottom:11px}.section-heading h2{font-size:18px}.section-heading p{font-size:11px}.text-link{font-size:11px}.help-strip{gap:10px;border-radius:13px;padding:11px}.help-strip .help-icon{width:35px;height:35px;border-radius:10px}.help-strip h3{font-size:12px}.help-strip p{font-size:10px}.help-strip .btn{min-height:32px;padding:6px 9px;font-size:10px}.category-grid{grid-template-columns:repeat(4,1fr);gap:8px}.category-card{min-height:98px;border-radius:11px;padding:7px 4px}.category-icon{height:48px;border-radius:8px;font-size:24px}.category-card b{margin-top:5px;font-size:9px}.category-card span{display:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-card{border-radius:13px;padding:8px}.product-card .discount{top:8px;left:8px;padding:3px 5px;font-size:8px}.product-card .fav{top:6px;right:6px;width:26px;height:26px}.product-card .fav .icon{width:15px}.product-image{height:124px;border-radius:9px}.product-card h3{margin:8px 0 2px;font-size:11px}.product-meta{min-height:25px;font-size:9px}.product-rating{margin-top:5px;font-size:9px}.product-price{margin-top:3px;font-size:15px}.product-price del{font-size:8px}.product-actions{gap:6px;margin-top:8px}.product-actions .btn{min-height:30px;padding:6px 8px;font-size:9px}.product-actions .add-cart{width:30px;min-width:30px}.product-actions .icon{width:15px}.service-grid{grid-template-columns:repeat(2,1fr);gap:9px}.service-card{display:block;border-radius:13px;padding:12px}.service-icon{width:34px;height:34px;border-radius:10px}.service-card h3{margin-top:9px;font-size:11px}.service-card p{font-size:9px}.service-card .text-link{margin-top:8px;font-size:9px}.service-hero{grid-template-columns:1fr;border-radius:15px}.service-hero-copy{padding:21px}.service-hero h1{font-size:24px}.service-hero p{font-size:12px}.service-hero-art{display:none}.stat-grid{grid-template-columns:repeat(2,1fr);gap:8px}.stat-card{padding:12px}.stat-card b{margin-top:6px;font-size:14px}.stat-card span{font-size:9px}.page-title{align-items:flex-start;display:block;margin-bottom:16px}.page-title h1{font-size:26px}.page-title p{font-size:12px}.detail-layout,.two-column{grid-template-columns:1fr;gap:16px}.gallery{min-height:280px;border-radius:15px;padding:16px}.detail-info{padding:0}.detail-info h1{font-size:24px}.detail-info p{font-size:12px}.detail-price{font-size:26px}.spec-list{gap:7px}.spec{padding:9px}.filter-row{margin:0 -2px 15px}.filter-row button{padding:7px 10px;font-size:10px}.form-row{grid-template-columns:1fr;gap:0}.panel{border-radius:15px;padding:16px}.panel h2{font-size:16px}.summary{position:static}.cart-item{grid-template-columns:60px 1fr auto;gap:9px}.cart-thumb{width:60px;height:56px}.cart-item h3{font-size:11px}.cart-item p{font-size:9px}.cart-price{font-size:12px}.auth-wrap{min-height:calc(100vh - 135px);padding:22px 0}.auth-card{border:0;border-radius:0;background:transparent;padding:8px;box-shadow:none}.auth-card h1{font-size:24px}.account-card{padding:15px}.info-hero{border-radius:15px;padding:25px 20px}.info-hero h1{font-size:27px}.info-hero p{font-size:12px}.info-grid{grid-template-columns:1fr;gap:10px}.info-card{border-radius:14px;padding:16px}.legal-content{border-radius:15px;padding:18px}.legal-content h2{font-size:17px}.legal-content p{font-size:12px}.bottom-nav{position:fixed;z-index:80;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(5,1fr);min-height:65px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #e8edf4;background:rgba(255,255,255,.98);box-shadow:0 -6px 18px rgba(21,36,63,.05)}.bottom-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#667085;font-size:9px;font-weight:700}.bottom-nav button.active{color:var(--blue)}.bottom-nav button.active:before{content:"";position:absolute;top:5px;width:26px;height:3px;border-radius:3px;background:var(--blue)}.bottom-nav .icon{width:19px;height:19px}.bottom-nav .cart-count{top:5px;left:calc(50% + 5px)}.wa-float{right:16px;bottom:calc(79px + env(safe-area-inset-bottom));width:48px;height:48px}.wa-float .icon{width:24px;height:24px}.update-banner{right:12px;bottom:calc(79px + env(safe-area-inset-bottom));left:12px;max-width:none}.install-banner{display:flex;align-items:center;gap:9px;margin:0 14px 13px;border-radius:11px;background:#eaf2ff;padding:8px 10px;color:#1c55b8}.install-banner p{margin:0;flex:1;font-size:10px;font-weight:700}.install-banner .btn{min-height:29px;padding:6px 8px;font-size:9px}.toast{bottom:calc(79px + env(safe-area-inset-bottom));max-width:calc(100% - 30px);text-align:center}.notice-strip{padding:10px}.notice-strip b{font-size:11px}.notice-strip p{font-size:9px}}
@media(min-width:768px){.bottom-nav{display:none}}

/* El PNG institucional incluye un lienzo transparente: se muestra el área visible como fondo. */
.app-header .brand{width:175px;height:45px;overflow:hidden;background:url('/images/logo.png') -30px -50px/230px auto no-repeat}.app-header .brand img{display:none}
@media(max-width:767px){.mobile-top .brand{justify-self:center;width:150px;height:38px;overflow:hidden;background:url('/images/logo.png') -27px -43px/200px auto no-repeat}.mobile-top .brand img{display:none}}

/* Galería comercial de producto: una portada y hasta cinco miniaturas. */
.gallery{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px}
.gallery-main{display:grid;flex:1;min-height:0;place-items:center}
.gallery-main>img{width:100%;height:100%;max-height:380px;object-fit:contain;mix-blend-mode:multiply}
.gallery-thumbs{display:flex;gap:9px;justify-content:center;overflow-x:auto;padding:2px}
.gallery-thumb{display:grid;flex:0 0 auto;width:58px;height:58px;place-items:center;overflow:hidden;border:2px solid transparent;border-radius:10px;background:#fff;padding:3px;cursor:pointer}
.gallery-thumb:hover,.gallery-thumb.active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(7,92,255,.12)}
.gallery-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:767px){.gallery-main>img{max-height:240px}.gallery-thumbs{justify-content:flex-start}.gallery-thumb{width:48px;height:48px}}

/* ============================================================
   REDISEÑO APROBADO 2026-07-12 — mockup claro EZEMTECH
   ============================================================ */
:root{--blue:#0867ff;--blue-700:#004fd8;--blue-soft:#edf5ff;--pink:#ff1975;--pink-700:#d80b5d;--pink-soft:#fff1f7;--ink:#0d1733;--muted:#65718a;--line:#e3e9f3;--canvas:#fff;--max:1320px}
html,body{background:#fff}
.page.reference-page{padding-top:24px}
.utility{background:#fff;color:#26334d}
.utility-inner{min-height:34px;font-size:10px}
.utility-list{gap:24px}.utility-list span{display:flex;align-items:center;gap:5px}.utility-list .icon{width:13px;color:var(--blue)}
.utility-contact{display:flex;align-items:center;gap:15px;font-weight:700}.utility-contact span:first-child{color:#159c52}
.app-header{position:relative;top:auto;background:#fff;backdrop-filter:none}
.head-main{min-height:92px;gap:30px;padding-top:14px;padding-bottom:14px}
.app-header .brand{width:198px;height:52px;background:url('/images/logo.png') -34px -55px/252px auto no-repeat}
.search-form{display:flex;max-width:610px}
.search-form input{height:52px;border-radius:12px;padding-right:205px;background:#fff;box-shadow:0 3px 12px rgba(24,48,87,.04)}
.search-form select{position:absolute;right:51px;top:1px;width:155px;height:50px;border:0;border-left:1px solid var(--line);background:#fff;padding:0 28px 0 13px;color:#475467;font-size:11px;outline:0}
.search-form button{right:5px;top:5px;width:42px;height:42px;border-radius:9px}
.header-actions{gap:21px}.header-action{font-size:12px}.header-action>.icon{width:24px;height:24px}.header-action small{font-size:9px}
.primary-nav{border-top:1px solid #edf1f6;border-bottom:1px solid #edf1f6}
.primary-nav-inner{min-height:52px;gap:31px}
.primary-nav a{padding:17px 0;font-size:11px}.primary-nav a:after{display:none!important}
.primary-nav .all-categories{align-self:stretch;display:flex;align-items:center;gap:8px;margin-left:0;padding:0 24px;border-radius:5px;background:linear-gradient(100deg,#075cff,#3785ff);color:#fff!important}
.primary-nav .nav-offer{margin-left:auto;color:var(--pink)}

.reference-hero{min-height:445px;border-radius:0;background:#fff;color:var(--ink);border-bottom:1px solid #edf1f6}
.reference-hero:after{z-index:0;background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.96) 45%,rgba(255,255,255,.25) 72%,rgba(255,255,255,0) 100%)}
.reference-hero .hero-media{inset:20px 0 20px auto;width:61%;border-radius:24px 0 0 24px;background:url('/Imagenes/dise%C3%B1o/PORTADA.png') center/cover no-repeat;mix-blend-mode:normal;opacity:1}
.reference-hero .hero-inner{min-height:445px;display:flex;align-items:center;padding:48px 24px}
.reference-hero .hero-content{max-width:490px}
.reference-hero .eyebrow{color:#303b56;font-size:16px;letter-spacing:0;text-transform:uppercase}.reference-hero .eyebrow em{color:var(--pink);font-style:normal}
.reference-hero h1{color:#071531;font-size:58px;line-height:.98;letter-spacing:-2.5px}.reference-hero h1 span{background:linear-gradient(90deg,#176dff,#ff1975);-webkit-background-clip:text;background-clip:text;color:transparent}
.reference-hero p{max-width:435px;margin:20px 0 24px;color:#3f4a61;font-size:15px;line-height:1.65}
.reference-hero .hero-trust{margin-top:36px;gap:22px;color:#15233f;font-size:10px}.reference-hero .hero-trust .icon{color:var(--blue)}
.pink-outline{border-color:var(--pink)!important;color:#19233b!important}.pink-outline:hover{background:var(--pink-soft)!important}
.hero-support-card{position:absolute;z-index:2;right:28px;top:105px;width:245px;border:1px solid #dfe6f1;border-radius:16px;background:rgba(255,255,255,.96);padding:20px;box-shadow:0 16px 40px rgba(15,35,75,.13)}
.hero-support-card h3{margin:0 0 4px;font-size:16px}.hero-support-card p{margin:0 0 12px;color:#4d596f;font-size:11px}.hero-support-card ul{list-style:none;margin:0 0 14px;padding:0}.hero-support-card li{position:relative;margin:8px 0;padding-left:18px;color:#344054;font-size:10px}.hero-support-card li:before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:900}.hero-support-card small{display:block;margin-top:8px;color:#667085;font-size:9px;text-align:center}

.services-ribbon{display:grid;grid-template-columns:repeat(6,1fr) .85fr;align-items:stretch;border:1px solid #dfe6f0;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(26,54,100,.04);overflow:hidden}
.services-ribbon-title{display:flex;flex-direction:column;justify-content:center;padding:20px 24px}.services-ribbon-title b{text-transform:uppercase;font-size:19px;line-height:1.2}.services-ribbon-title span{margin-top:7px;color:var(--blue);font-size:12px;font-weight:800}
.ribbon-service{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid #edf1f6;padding:14px 7px;text-align:center}.ribbon-service>span{color:var(--blue)}.ribbon-service .icon{width:27px;height:27px}.ribbon-service b{margin-top:8px;font-size:10px;line-height:1.2}.ribbon-service small{display:block;margin-top:5px;color:var(--muted);font-size:8px;line-height:1.3}
.services-ribbon>.btn{align-self:center;margin:10px;white-space:normal;text-align:center;font-size:9px}
.reference-home .section-heading.centered{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;text-align:center}
.reference-home .section-heading.centered>div{grid-column:2}
.reference-home .section-heading.centered>.text-link{grid-column:3;justify-self:end}
.reference-home .section{margin-top:32px}.reference-home .section-heading h2{text-transform:uppercase;font-size:20px;letter-spacing:-.2px}.reference-home .section-heading p{font-size:11px}
.reference-home .category-card{min-height:138px}.reference-home .category-icon{height:73px;background:linear-gradient(145deg,#f8faff,#eef4ff);font-size:38px}
.home-product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.home-product-grid .product-card{padding:12px;border-radius:14px}.home-product-grid .product-image{height:174px}.home-product-grid .product-card h3{font-size:12px}.home-product-grid .product-meta{font-size:10px}.home-product-grid .product-actions .btn.light{font-size:10px}
.home-split{display:grid;grid-template-columns:1fr 1.05fr;gap:24px}
.trust-panel,.booking-panel{min-width:0;overflow:hidden;border:1px solid #dfe6f0;border-radius:15px;background:#fff}
.trust-panel{padding:24px}.trust-panel h2,.booking-panel h2{margin:0;text-transform:uppercase;font-size:19px}.trust-points{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:23px 0}.trust-points span{display:flex;align-items:center;gap:6px;color:#344054;font-size:9px;font-weight:700}.trust-points .icon{color:var(--blue)}
.trust-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.trust-stats div{padding:18px 8px 2px;border-right:1px solid var(--line);text-align:center}.trust-stats div:last-child{border-right:0}.trust-stats b{display:block;font-size:20px}.trust-stats span{display:block;margin-top:4px;color:var(--muted);font-size:8px}
.booking-panel{display:grid;grid-template-columns:1fr 220px}.booking-panel>div:first-child{padding:24px}.booking-panel p{margin:5px 0 15px;color:var(--muted);font-size:10px}.booking-types{display:flex;gap:8px}.booking-types span{display:flex;align-items:center;gap:6px;border:1px solid #cfe0ff;border-radius:8px;padding:9px 11px;color:var(--blue);font-size:9px;font-weight:800}.booking-types span+span{border-color:#ffc8df;color:var(--pink)}.booking-preview{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:17px}.booking-preview>span{display:flex;align-items:center;gap:6px;color:#667085;font-size:9px}.booking-photo{background:url('/images/lab-2.jpg') 70% center/cover no-repeat}
.assurance-bar{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #e0e7f1;border-radius:13px;background:#fff;overflow:hidden}.assurance-bar>span{display:grid;grid-template-columns:26px 1fr;align-items:center;border-right:1px solid #edf1f6;padding:15px 16px}.assurance-bar>span:last-child{border-right:0}.assurance-bar .icon{grid-row:1/3;color:var(--blue)}.assurance-bar b{font-size:10px}.assurance-bar small{color:var(--muted);font-size:8px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #edf1f6;padding:10px 22px 28px}.brand-row b{font-size:20px;letter-spacing:-.6px}.brand-row b:nth-child(3),.brand-row b:nth-child(5),.brand-row b:nth-child(9){color:#e31d2b}.brand-row b:nth-child(4),.brand-row b:nth-child(8){color:#1455b3}
.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.resource-grid>a{overflow:hidden;border:1px solid #e1e7f0;border-radius:13px;background:#fff}.resource-grid img{width:100%;height:150px;object-fit:cover}.resource-grid span{display:inline-block;margin:13px 14px 0;border-radius:4px;background:var(--blue);padding:3px 6px;color:#fff;font-size:8px}.resource-grid h3{min-height:42px;margin:8px 14px 5px;font-size:13px}.resource-grid b{display:block;margin:0 14px 15px;color:var(--blue);font-size:10px}
.site-footer{margin-top:55px;border-top:1px solid #e2e8f0;background:#fff}.footer-inner{max-width:var(--max);margin:auto;padding:38px 24px;display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:30px}.footer-inner>div{display:flex;flex-direction:column;gap:9px}.footer-inner b{text-transform:uppercase;font-size:11px}.footer-inner a,.footer-inner span,.footer-inner p{margin:0;color:#56627a;font-size:10px;line-height:1.5}.footer-brand .brand{width:190px;height:48px;overflow:hidden;background:url('/images/logo.png') -32px -51px/240px auto no-repeat}.footer-brand .brand img{display:none}.footer-brand p{max-width:230px}.footer-bottom{border-top:1px solid #edf1f6;padding:15px 24px;color:#667085;font-size:9px;text-align:center}

@media(max-width:1100px){.utility-list span:nth-child(3),.utility-contact{display:none}.search-form select{display:none}.search-form input{padding-right:52px}.primary-nav-inner{gap:20px}.services-ribbon{grid-template-columns:repeat(3,1fr)}.services-ribbon-title{grid-row:span 2}.services-ribbon>.btn{display:none}.home-product-grid{grid-template-columns:repeat(3,1fr)}.booking-panel{grid-template-columns:1fr 160px}}

@media(max-width:767px){
  body{background:#fff}.mobile-header{background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 5px 16px rgba(20,44,84,.06)}
  .reference-home>.reference-hero{display:none}
  .mobile-top{height:64px;grid-template-columns:1fr auto;padding:0 14px}.mobile-menu{display:none!important}.mobile-cart{position:relative;display:flex;align-items:center;gap:6px;color:var(--blue);font-size:10px;font-weight:800}.mobile-cart .icon{width:22px;height:22px}
  .mobile-top .brand{justify-self:start;width:155px;height:48px;background:url('/images/logo.png') -21px -40px/190px auto no-repeat}.mobile-top .brand img{display:none}
  .mobile-search{padding:0 14px 12px;background:#fff}.mobile-search input{height:44px;border:1px solid #d9e2ef;border-radius:11px;background:#fff;box-shadow:0 3px 10px rgba(20,44,84,.04)}.mobile-search button{top:6px;color:var(--blue)}.mobile-header .cart-count{top:-7px;left:15px}
  .reference-hero{min-height:390px;border-radius:0;background:#fff}.reference-hero .hero-media{inset:0 0 0 auto;width:62%;border-radius:0;background-position:center;opacity:.13}.reference-hero:after{background:linear-gradient(90deg,#fff 0%,#fff 48%,rgba(255,255,255,.82) 78%,rgba(255,255,255,.5))}
  .reference-hero .hero-inner{min-height:390px;padding:34px 18px}.reference-hero .hero-content{max-width:330px}.reference-hero .eyebrow{font-size:11px}.reference-hero h1{max-width:320px;font-size:42px;line-height:1}.reference-hero p{max-width:285px;margin:15px 0 19px;color:#46536a;font-size:12px}.reference-hero .hero-actions .btn{font-size:10px}.reference-hero .hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px;color:#24314b;font-size:9px}.hero-support-card{display:none}
  .page.reference-page{padding-top:15px}.services-ribbon{grid-template-columns:repeat(3,1fr);border-radius:13px}.services-ribbon-title{grid-column:1/-1;grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:13px 14px}.services-ribbon-title b{font-size:14px}.services-ribbon-title span{margin:0;font-size:10px}.ribbon-service{padding:12px 5px}.ribbon-service:nth-of-type(n+7){display:none}.ribbon-service b{font-size:8px}.ribbon-service small{display:none}
  .home-category-section{display:none}.reference-home .section{margin-top:24px}.reference-home .section-heading h2{font-size:17px}.home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.home-product-grid .product-image{height:149px}
  .home-split{grid-template-columns:1fr;gap:12px}.trust-panel{padding:17px}.trust-panel h2,.booking-panel h2{font-size:16px}.trust-points{grid-template-columns:1fr 1fr;margin:17px 0}.trust-stats{grid-template-columns:1fr 1fr}.trust-stats div:nth-child(2){border-right:0}.trust-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}.booking-panel{grid-template-columns:1fr}.booking-panel>div:first-child{padding:17px}.booking-photo{display:none}
  .assurance-bar{display:flex;overflow-x:auto}.assurance-bar>span{min-width:170px}.brand-row{justify-content:flex-start;overflow-x:auto;padding:8px 3px 20px}.brand-row b{flex:0 0 auto;font-size:16px}.resource-grid{grid-template-columns:1fr}.resource-grid img{height:135px}.site-footer{display:block;margin-bottom:72px}.footer-inner{grid-template-columns:1fr 1fr;gap:20px 18px;padding:26px 18px}.footer-brand{grid-column:1/-1}
  .bottom-nav{background:#fff;border-top-color:#dfe6f0}.install-banner{background:#f1f6ff}.wa-float{box-shadow:0 9px 22px rgba(25,199,104,.26)}
}

@media(hover:none) and (pointer:coarse){
  .reference-home .home-category-section{display:none!important}
}

/* Superficies blancas con bordes de identidad suaves. */
html,body,.app-shell,.reference-home,.page{background:#fff}
.product-card,.category-card,.service-card,.services-ribbon,.ribbon-service,
.trust-panel,.booking-panel,.assurance-bar,.resource-grid>a,.panel,.account-card,
.menu-row,.stat-card,.booking-option,.legal-content,.auth-card,.gallery,
.notice-strip,.help-strip,.empty-state,.update-banner,.install-banner{
  background:#fff;
  border-color:rgba(8,103,255,.16);
}
.product-card:nth-child(even),.category-card:nth-child(even),.resource-grid>a:nth-child(even),
.booking-panel,.help-strip{border-color:rgba(255,25,117,.17)}
.product-image,.category-icon,.service-icon,.benefit .icon-wrap,.cart-thumb{
  background:#fff;
  border:1px solid rgba(8,103,255,.11);
}
.service-hero,.info-hero{background:#fff;border:1px solid rgba(8,103,255,.17);color:var(--ink)}
.service-hero p,.info-hero p{color:var(--muted)}
.booking-panel{background:#fff}
.payment-option{background:#fff;border-color:rgba(8,103,255,.16)}
.field input,.field select,.field textarea{background:#fff;border-color:#dce7f6}
.bottom-nav,.mobile-header,.mobile-search,.app-header,.primary-nav,.utility,.site-footer{background:#fff}

@media(max-width:767px){
  .services-ribbon{background:#fff}
  .ribbon-service,.home-product-grid .product-card,.booking-panel{background:#fff}
  .ribbon-service:nth-of-type(even),.home-product-grid .product-card:nth-child(even){border-color:rgba(255,25,117,.16)!important}
  .install-banner{background:#fff;border:1px solid rgba(8,103,255,.15)}
}

/* Móvil simplificado: menos bloques, lectura inmediata y controles táctiles. */
@media(max-width:767px){
  .reference-page{padding:18px 14px 105px!important}
  .services-ribbon{display:grid;grid-template-columns:1fr 1fr;gap:9px;border:0;background:transparent;box-shadow:none;overflow:visible}
  .services-ribbon-title{grid-column:1/-1;margin-bottom:2px;border:0;padding:0 1px 8px;background:transparent}
  .services-ribbon-title b{font-size:19px;line-height:1.1;text-transform:none}.services-ribbon-title span{font-size:11px}
  .ribbon-service{min-height:74px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;border:1px solid #e2e9f3!important;border-radius:15px;background:#fff;padding:12px;text-align:left;box-shadow:0 5px 14px rgba(21,48,92,.045)}
  .ribbon-service>span{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:11px;background:var(--blue-soft)}
  .ribbon-service .icon{width:22px;height:22px}.ribbon-service b{margin:0;font-size:11px;line-height:1.25}.ribbon-service small{display:none}
  .ribbon-service:nth-of-type(n+5){display:none}
  .reference-home .section-heading{align-items:center}.reference-home .section-heading h2{font-size:18px;text-transform:none;letter-spacing:-.25px}.reference-home .section-heading p{margin-top:4px;font-size:10px}.reference-home .text-link{font-size:10px}
  .reference-home .section-heading.centered{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}.reference-home .section-heading.centered>.text-link{position:static;align-self:center}
  .home-offers{margin-top:28px!important}.home-product-grid .product-card{border-color:#e2e8f1;border-radius:15px;box-shadow:0 5px 15px rgba(21,48,92,.045)}
  .home-product-grid .product-card h3{font-size:12px;line-height:1.3}.home-product-grid .product-meta{display:-webkit-box;min-height:28px;overflow:hidden;font-size:9px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.home-product-grid .product-price{font-size:16px}
  .home-product-grid .product-actions .btn.light{min-height:34px;font-size:9px}.home-product-grid .product-actions .add-cart{min-height:34px}
  .trust-panel,.assurance-bar,.brands-section,.resources-section{display:none!important}
  .home-split{margin-top:26px!important}.booking-panel{border-radius:16px;background:linear-gradient(145deg,#f7faff,#fff5f9);box-shadow:0 7px 18px rgba(21,48,92,.055)}
  .booking-panel>div:first-child{padding:20px}.booking-panel h2{text-transform:none;font-size:18px}.booking-panel p{font-size:11px}.booking-types{display:grid;grid-template-columns:1fr 1fr}.booking-types span{justify-content:center;min-height:44px;padding:9px;font-size:9px}.booking-preview{margin-top:16px}.booking-preview>span{font-size:9px}.booking-preview .btn{min-height:40px;padding:9px 12px}
  .bottom-nav{min-height:68px}.bottom-nav button{font-size:10px}.bottom-nav .icon{width:20px;height:20px}
}

/* ===== Carrusel CMS (banners editables desde Sentinel → Web CMS) ===== */
.carr{position:relative;max-width:1160px;margin:16px auto 0;padding:0 18px}
.carr .carr-sl{display:none;position:relative;border-radius:18px;overflow:hidden;min-height:180px;background:#0f172a}
.carr .carr-sl.on{display:block}
.carr img{width:100%;height:340px;object-fit:cover;display:block}
.carr .carr-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(transparent,rgba(2,6,23,.82));color:#fff}
.carr .carr-cap b{font-size:24px;display:block;margin-bottom:4px;letter-spacing:-.4px}
.carr .carr-cap p{margin:0 0 10px;font-size:14px;opacity:.92}
.carr-dots{position:absolute;right:34px;bottom:14px;display:flex;gap:6px}
.carr-dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.carr-dot.on{background:#fff}
@media(max-width:640px){.carr{padding:0 12px}.carr img{height:200px}.carr .carr-cap{padding:14px 16px}.carr .carr-cap b{font-size:17px}.carr .carr-cap p{font-size:12px}}

/* Área del cliente de la web pública. */
.customer-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.customer-summary>div{display:flex;min-height:82px;flex-direction:column;justify-content:center;border:1px solid rgba(8,103,255,.16);border-radius:15px;background:#fff;padding:15px 18px;text-align:center;box-shadow:0 5px 15px rgba(21,48,92,.04)}
.customer-summary>div:nth-child(2){border-color:rgba(255,25,117,.17)}
.customer-summary b{color:var(--blue);font-size:24px;line-height:1}.customer-summary span{margin-top:7px;color:var(--muted);font-size:11px;font-weight:700}
.order-list{display:grid;gap:14px}.order-card{max-width:900px;margin:0 auto;width:100%}.order-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:13px}.order-card-head span{color:var(--blue);font-size:11px;font-weight:900}.order-card-head h2{margin:5px 0 0;font-size:17px}.order-card-head>b{color:var(--muted);font-size:10px}.order-products{display:grid;gap:9px;padding:15px 0}.order-products>div{display:flex;justify-content:space-between;gap:16px;color:#43516a;font-size:12px}.order-products b{color:var(--ink)}.order-card>.text-link{display:flex;justify-content:flex-end;margin-top:14px}
.customer-profile-form{max-width:900px;margin:0 auto}.customer-profile-form>h2{margin:0 0 13px;font-size:18px}.customer-profile-form>h2:not(:first-child){margin-top:24px}.profile-check{display:flex;align-items:center;gap:9px;margin-top:14px;color:#344054;font-size:12px;font-weight:700}.profile-check input{width:18px;height:18px;accent-color:var(--blue)}.profile-actions{display:flex;gap:10px;margin-top:22px}.customer-privacy-note{margin:16px 0 0;color:var(--muted);font-size:10px;line-height:1.5;text-align:center}
.text-danger{display:block;margin:20px auto 0;border:0;background:transparent;color:#c7194d;font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tracking-layout{max-width:920px;margin:0 auto;grid-template-columns:1.05fr .95fr}.tracking-form .service-icon{margin-bottom:14px}.tracking-form h2{margin:0 0 7px}.tracking-form>.muted{margin:0 0 18px;font-size:12px;line-height:1.6}.tracking-form .btn{margin-top:8px}

@media(max-width:767px){
  .customer-summary{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:15px}.customer-summary>div{min-height:70px;border-radius:12px;padding:10px 5px}.customer-summary b{font-size:20px}.customer-summary span{font-size:8px}
  .customer-area .page-title>.btn{width:100%;margin-top:13px}.order-card-head{display:block}.order-card-head>b{display:block;margin-top:7px}.order-products>div{font-size:10px}.customer-profile-form{padding:16px}.profile-actions{display:grid;grid-template-columns:1fr 1fr}.customer-privacy-note{text-align:left}
  .tracking-layout{grid-template-columns:1fr}.tracking-form>.muted{font-size:11px}
  .home-product-grid .product-meta{font-size:10px}.home-product-grid .product-actions .btn,.home-product-grid .product-actions .add-cart{min-height:42px}.home-product-grid .product-actions .add-cart{width:42px;min-width:42px}
  .home-product-grid .product-card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 5px);justify-self:center}
  .booking-preview .btn{min-height:44px}.text-danger{min-height:44px;padding:10px}
}

/* ============================================================
   TOQUE ELEGANTE 2026-07-15 (pedido del dueño): capa final de
   pulido — gradientes en CTAs, profundidad, focos accesibles,
   hover de tarjetas. Aditiva: no cambia estructura ni clases.
   ============================================================ */
.btn{background:linear-gradient(135deg,#075cff,#3b82f6);box-shadow:0 6px 16px rgba(7,92,255,.18)}
.btn:hover{background:linear-gradient(135deg,var(--acento-fg),#2563eb);box-shadow:0 12px 24px rgba(7,92,255,.26);transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn.pink{background:linear-gradient(135deg,#f51572,#ec4899);box-shadow:0 6px 16px rgba(245,21,114,.2)}
.btn.pink:hover{background:linear-gradient(135deg,#d90860,#db2777);box-shadow:0 12px 24px rgba(245,21,114,.28)}
.btn.light,.btn.ghost{background:#fff;box-shadow:none}
.btn.light:hover{background:#f5f9ff;box-shadow:0 8px 18px rgba(7,92,255,.1)}
.btn.ghost:hover{border-color:#c9dcff;background:#fafcff}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(7,92,255,.35);outline-offset:2px;border-radius:12px}
.chip{transition:border-color .15s,box-shadow .15s}
.chip:hover{border-color:#b7c9e8;box-shadow:0 4px 10px rgba(24,48,87,.06)}
.product-card,.service-card,.category-card,.stat-card,.panel{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.product-card:hover,.service-card:hover,.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.product-card img{transition:transform .3s ease}
.product-card:hover img{transform:scale(1.045)}
.booking-option{transition:background .15s,border-color .15s,transform .12s}
.booking-option:hover{background:#f7faff;transform:translateX(3px)}
.notice-strip{transition:box-shadow .18s}
.notice-strip:hover{box-shadow:var(--shadow)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#075cff !important;box-shadow:0 0 0 3px rgba(7,92,255,.14)}
::selection{background:rgba(7,92,255,.18)}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation-duration:.01s !important}}
/* TARJETAS DE PRODUCTO MÁS GRANDES + rotación de fotos (2026-07-15, pedido del dueño) */
.home-product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-product-grid .product-image{height:236px}
.home-product-grid .product-card{padding:15px;border-radius:16px}
.home-product-grid .product-card h3{font-size:13.5px}
.home-product-grid .product-meta{font-size:11px}
.product-image img{transition:opacity .35s ease,transform 8s ease}
.product-card:hover .product-image img{transform:scale(1.05)}
@media(max-width:1100px){.home-product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-product-grid .product-image{height:175px}}


/* =====================================================================
   FLUIDO-PRO 2026-07-16 — fluidez, efectos y presentación premium.
   Capa final ADITIVA (gana la cascada). No se tocó ningún bloque previo.
   ===================================================================== */
/* 1) Transición de página (View Transitions API) */
::view-transition-old(root){animation:fxOut .2s ease both}
::view-transition-new(root){animation:fxIn .32s cubic-bezier(.22,.8,.3,1) both}
@keyframes fxOut{to{opacity:0}}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}}
/* 2) Revelado al hacer scroll (clases que pone fxReveal en app.js) */
.fx-r{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1)}
.fx-r.fx-in{opacity:1;transform:none}
/* 3) Tarjetas de producto premium (estilo marketplace) */
.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(7,25,66,.13),0 4px 12px rgba(7,25,66,.07);border-color:rgba(7,92,255,.35)}
.product-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--blue),#7c3aed,var(--pink));opacity:0;transition:opacity .3s;pointer-events:none}
.product-card:hover::after{opacity:1}
.product-image img{transition:transform .5s cubic-bezier(.22,.8,.3,1),opacity .32s ease}
.product-card:hover .product-image img{transform:scale(1.06)}
.product-card .discount{background:linear-gradient(120deg,var(--blue),#7c3aed);box-shadow:0 4px 12px rgba(7,92,255,.28)}
.product-meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* 4) Carrusel de productos del Inicio (scroll-snap + flechas) */
.carr-x{position:relative}
.carr-x .carr-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carr-x .carr-track::-webkit-scrollbar{display:none}
.carr-x .carr-track .product-card{flex:0 0 236px;min-width:236px;scroll-snap-align:start}
.carr-nav{position:absolute;top:42%;z-index:5;width:44px;height:44px;border:1px solid #e2e9f4;border-radius:99px;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(7,25,66,.16);color:var(--blue);display:grid;place-items:center;cursor:pointer;transition:transform .2s,box-shadow .2s}
.carr-nav:hover{transform:scale(1.08);box-shadow:0 12px 28px rgba(7,25,66,.22)}
.carr-nav.prev{left:-13px}.carr-nav.prev .icon{transform:rotate(180deg)}
.carr-nav.next{right:-13px}
@media(max-width:760px){.carr-nav{display:none}.carr-x .carr-track .product-card{flex:0 0 46vw;min-width:46vw}}
/* 5) Servicios con IMAGEN que vende (SVG de marca en /images/services/) */
.service-card.has-art{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.service-art{position:relative;height:132px;background:linear-gradient(135deg,#0b1230,#1d2c5e)}
.service-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.8,.3,1)}
.service-art .service-icon{position:absolute;left:14px;bottom:-18px;width:44px;height:44px;border-radius:13px;background:#fff;color:var(--blue);box-shadow:0 8px 20px rgba(7,25,66,.18);border:1px solid #e6ecf7}
.service-card.has-art .service-body{padding:26px 16px 16px}
.service-card.has-art h3{margin:0 0 5px;font-size:14.5px}
.service-card.has-art p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--muted);font-size:11.5px;line-height:1.5}
.service-card.has-art .text-link{margin-top:10px;display:inline-flex}
.service-card.has-art:hover{transform:translateY(-5px);box-shadow:0 16px 38px rgba(7,25,66,.13)}
.service-card.has-art:hover .service-art img{transform:scale(1.05)}
@media(max-width:767px){.service-art{height:96px}.service-card.has-art{display:flex}.service-card.has-art .service-body{padding:24px 12px 12px}}
/* 6) Duo destacado: Soporte remoto / Visita técnica */
.svc-duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.svc-duo-card{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;border:1px solid #e7ecf6;border-radius:18px;background:#fff;padding:0 0 22px;box-shadow:0 8px 26px rgba(7,25,66,.07);transition:transform .3s,box-shadow .3s}
.svc-duo-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(7,25,66,.14)}
.svc-duo-art{width:100%;height:190px;object-fit:cover;display:block}
.svc-duo-icon{width:56px;height:56px;margin:-28px 0 0 22px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#38bdf8);color:#fff;box-shadow:0 10px 24px rgba(7,92,255,.32);border:3px solid #fff}
.svc-duo-card.visit .svc-duo-icon{background:linear-gradient(135deg,var(--pink),#7c3aed);box-shadow:0 10px 24px rgba(245,21,114,.3)}
.svc-duo-card h3{margin:2px 22px 0;font-size:22px;letter-spacing:-.4px}
.svc-duo-card p{margin:0 22px;color:#5a6b85;font-size:13.5px;line-height:1.6}
.svc-duo-card ul{list-style:none;margin:2px 22px 4px;padding:0;display:grid;gap:8px}
.svc-duo-card li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#233a5e}
.svc-duo-card li .icon{color:#16a34a;flex:0 0 auto}
.svc-duo-card .btn{margin:auto 22px 0}
@media(max-width:760px){.svc-duo-grid{grid-template-columns:1fr;gap:14px}.svc-duo-art{height:150px}.svc-duo-card h3{font-size:18px}}
/* 7) Ribbon de servicios del Inicio con arte */
.ribbon-art{width:100%;height:64px;object-fit:cover;border-radius:10px;margin-bottom:4px}
@media(max-width:767px){.ribbon-art{display:none}}
/* 8) Categorías y stats vivas */
.category-card:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(7,25,66,.12)}
.category-icon{transition:transform .3s}
.category-card:hover .category-icon{transform:scale(1.12)}
.stat-card{transition:transform .25s,box-shadow .25s}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(7,25,66,.1)}
/* 9) Hero con acento vivo (gradiente animado sutil) */
.reference-hero h1 span{background:linear-gradient(90deg,var(--pink),#7c3aed,var(--blue),var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxHue 10s linear infinite}
@keyframes fxHue{to{background-position:300% 0}}
/* 10) Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .fx-r{opacity:1;transform:none;transition:none}
  .reference-hero h1 span{animation:none}
  .product-image img,.service-art img{transition:none}
}


/* =====================================================================
   FLUIDO-PRO v14 2026-07-16 — marketplace vivo (capa final aditiva)
   ===================================================================== */
/* Barra superior: CTA real de WhatsApp */
.utility-wa{display:inline-flex;align-items:center;gap:6px;color:#25d366;font-weight:800;text-decoration:none;transition:opacity .2s}
.utility-wa:hover{opacity:.8}
/* Franja de promos (3 accesos que venden) */
.promo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.promo-card{position:relative;display:flex;align-items:center;gap:13px;overflow:hidden;border-radius:16px;padding:18px 16px;color:#fff;text-decoration:none;box-shadow:0 10px 26px rgba(7,25,66,.16);transition:transform .28s cubic-bezier(.22,.8,.3,1),box-shadow .28s}
.promo-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(7,25,66,.24)}
.promo-card.blue{background:linear-gradient(120deg,#075cff,#38bdf8)}
.promo-card.violet{background:linear-gradient(120deg,#5b21b6,#7c3aed)}
.promo-card.pink{background:linear-gradient(120deg,#db0f63,#f51572)}
.promo-card::after{content:"";position:absolute;top:-40%;right:-12%;width:150px;height:150px;border-radius:99px;background:rgba(255,255,255,.14)}
.promo-ic{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:13px;background:rgba(255,255,255,.18)}
.promo-tx b{display:block;font-size:15px;letter-spacing:-.2px}
.promo-tx span{display:block;margin-top:2px;font-size:11px;opacity:.88}
.promo-card>.icon:last-child{margin-left:auto;transition:transform .25s}
.promo-card:hover>.icon:last-child{transform:translateX(4px)}
@media(max-width:760px){.promo-strip{grid-template-columns:1fr;gap:9px;margin-top:6px}.promo-card{padding:13px 14px;border-radius:13px}.promo-ic{width:38px;height:38px;flex-basis:38px}.promo-tx b{font-size:13px}.promo-tx span{font-size:10px}}
/* Badge de descuento real */
.product-card .discount.off{background:linear-gradient(120deg,#dc2626,#f51572);box-shadow:0 4px 12px rgba(220,38,38,.32);font-size:11px}
/* Marcas: gris → color al pasar */
.brand-row b{opacity:.45;transition:opacity .25s,transform .25s,color .25s;cursor:default}
.brand-row b:hover{opacity:1;color:var(--blue);transform:scale(1.12)}
/* Subrayado de acento en títulos de sección */
.section-heading h2::after{content:"";display:block;width:44px;height:3px;margin-top:7px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--pink))}
.section-heading.centered h2::after{margin-left:auto;margin-right:auto}
/* Luz viva sutil en el hero (blanco premium intacto) */
.reference-hero{position:relative}
.reference-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px 300px at 18% 25%,rgba(7,92,255,.07),transparent 70%),radial-gradient(480px 260px at 84% 72%,rgba(245,21,114,.06),transparent 70%);animation:fxBeam 12s ease-in-out infinite alternate}
@keyframes fxBeam{to{background-position:40px 20px,-40px -16px}}
/* Micro-interacción al agregar al carrito */
.product-actions .add-cart:active{transform:scale(.88)}
.product-actions .add-cart{transition:transform .15s}
@media (prefers-reduced-motion: reduce){.reference-hero::before{animation:none}.promo-card,.brand-row b{transition:none}}


/* ============ FLUIDO-PRO v15 2026-07-16 — tienda de servicios ============ */
/* Precio en tarjeta de servicio */
.service-price{display:inline-flex;align-items:center;margin:2px 0 6px;padding:3px 9px;border-radius:99px;background:linear-gradient(120deg,rgba(7,92,255,.1),rgba(124,58,237,.1));color:var(--blue);font-size:13px;font-weight:900;letter-spacing:-.2px}
/* Video del servicio (16:9, administrado desde Web CMS) */
.svc-video{position:relative;margin-top:16px;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(7,25,66,.14);aspect-ratio:16/9;background:#0a1128}
.svc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:767px){.service-price{font-size:11.5px;padding:2px 7px}}


/* =====================================================================
   MOVIL-PRO v16 2026-07-16 — versión móvil hermosa y optimizada.
   Capa final ADITIVA solo ≤767px (gana la cascada). Escritorio intacto.
   ===================================================================== */
@media(max-width:767px){
  /* 1) Cabecera premium: gradiente profundo, esquinas suaves, buscador pill */
  .mobile-header{background:linear-gradient(135deg,#053ec7 0%,#075cff 55%,#2f7bff 100%);border-radius:0 0 20px 20px;box-shadow:0 10px 26px rgba(5,62,199,.28)}
  .mobile-search{padding:0 14px 14px}
  .mobile-search input{height:44px;border:0;border-radius:14px;padding:0 46px 0 15px;font-size:13.5px;box-shadow:0 6px 18px rgba(3,22,59,.22)}
  .mobile-search button{top:7px;right:21px;width:32px;height:32px;border-radius:10px;background:linear-gradient(120deg,var(--blue),#7c3aed);color:#fff}
  /* 2) Franja de promos: deslizable con snap (antes 3 apiladas) */
  .promo-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .promo-strip::-webkit-scrollbar{display:none}
  .promo-card{flex:0 0 78%;min-width:78%;scroll-snap-align:start;padding:14px}
  /* 3) Tarjetas de producto: radios y sombras de app */
  .product-card{border-radius:16px;border-color:#e8edf5;box-shadow:0 4px 14px rgba(21,48,92,.06)}
  .product-image{border-radius:12px}
  .product-price{font-size:16.5px}
  .product-actions .btn.light{border-radius:10px}
  .product-actions .add-cart{border-radius:10px;background:linear-gradient(120deg,var(--blue),#7c3aed);color:#fff;border:0}
  /* 4) Carrusel del inicio: respiración y snap centrado */
  .carr-x .carr-track{gap:10px;padding:4px 4px 10px;scroll-padding-left:4px}
  .carr-x .carr-track .product-card{flex:0 0 62vw;min-width:62vw}
  /* 5) Servicios: tarjetas de tienda compactas y tocables */
  .service-art{height:104px}
  .service-art .service-icon{left:10px;bottom:-16px;width:38px;height:38px;border-radius:11px}
  .service-card.has-art .service-body{padding:22px 11px 12px}
  .service-card.has-art h3{font-size:12.5px}
  .service-card.has-art .text-link{min-height:34px;align-items:center}
  /* 6) Barra inferior estilo app: vidrio + píldora activa */
  .bottom-nav{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(226,233,244,.9);box-shadow:0 -8px 26px rgba(21,36,63,.08)}
  .bottom-nav button{font-size:9.5px;transition:color .2s}
  .bottom-nav button .icon,.bottom-nav button span{position:relative;z-index:1}
  .bottom-nav button.active:before{content:"";top:4px;width:48px;height:29px;border-radius:99px;background:linear-gradient(120deg,rgba(7,92,255,.14),rgba(124,58,237,.14))}
  .bottom-nav button.active .icon{transform:translateY(-1px)}
  /* 7) WhatsApp flotante con pulso de vida */
  .wa-float{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 12px 28px rgba(22,163,74,.4)}
  .wa-float::after{content:"";position:absolute;inset:-7px;border-radius:99px;border:2px solid rgba(34,197,94,.45);animation:waPulse 2.4s ease-out infinite}
  @keyframes waPulse{0%{transform:scale(.8);opacity:1}70%{transform:scale(1.15);opacity:0}100%{transform:scale(1.15);opacity:0}}
  /* 8) Paneles y franjas cómodos al pulgar */
  .trust-panel,.booking-panel{border-radius:16px}
  .assurance-bar{grid-template-columns:1fr 1fr;border-radius:14px}
  .assurance-bar span{padding:11px}
  .svc-duo-icon{margin-left:16px}
  .svc-duo-card h3,.svc-duo-card p,.svc-duo-card ul{margin-left:16px;margin-right:16px}
  .svc-duo-card .btn{margin-left:16px;margin-right:16px}
  /* 9) Títulos y revelado más ágiles en pantalla chica */
  .section-heading h2::after{width:32px;height:2.5px;margin-top:5px}
  .fx-r{transform:translateY(10px)}
  /* 10) Toast tipo app */
  .toast{border-radius:14px;background:rgba(15,23,42,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 16px}
  /* 11) OPTIMIZACIÓN: las secciones bajas no se calculan hasta acercarse */
  .brands-section,.resources-section,.home-services{content-visibility:auto;contain-intrinsic-size:1px 420px}
}
@media(max-width:767px) and (prefers-reduced-motion: reduce){.wa-float::after{animation:none}}


/* MOVIL-PRO v17 (2026-07-16): cabecera móvil BLANCA — el logo neón se perdía
   sobre el azul (pedido del dueño). El logo vuelve a sus colores originales. */
@media(max-width:767px){
  .mobile-header{background:#fff;border-radius:0 0 18px 18px;border-bottom:1px solid #eef2f8;box-shadow:0 6px 20px rgba(21,48,92,.1)}
  .mobile-top .brand img{filter:none}
  .mobile-menu,.mobile-cart{color:var(--ink)}
  .mobile-search input{background:#f2f5fa;border:1px solid #e4eaf3;box-shadow:none;color:var(--ink)}
}


/* =====================================================================
   MOVIL-PRO v20 2026-07-16 — tienda directa y limpia en el teléfono
   ===================================================================== */
/* Chips de categorías: ocultos en escritorio (allí ya hay barra de categorías) */
.cat-chips{display:none}
/* Botones nuevos de tarjeta en escritorio: mitad y mitad */
.product-actions .add2,.product-actions .buy-now{flex:1;white-space:nowrap}
.product-actions .buy-now{background:linear-gradient(120deg,var(--pink),#7c3aed);border:0;color:#fff;font-weight:800}
@media(max-width:767px){
  /* Logo perfectamente centrado (columnas laterales iguales) */
  .mobile-top{grid-template-columns:42px 1fr 42px}
  /* Barra baja de 4 pestañas */
  .bottom-nav.nav4{grid-template-columns:repeat(4,1fr)}
  /* Tienda limpia: bajo la búsqueda SOLO chips y productos */
  .shop-page{padding-top:12px}
  .shop-page .breadcrumbs,.shop-page .page-title,.shop-page .section{display:none}
  .cat-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cat-chips::-webkit-scrollbar{display:none}
  .chip-cat{flex:0 0 auto;border:1px solid #e2e9f4;border-radius:99px;background:#fff;color:#3c4f6e;padding:8px 14px;font-size:12px;font-weight:700;transition:all .2s}
  .chip-cat.on{border-color:transparent;background:linear-gradient(120deg,var(--blue),#7c3aed);color:#fff;box-shadow:0 6px 16px rgba(7,92,255,.28)}
  /* Tarjetas elegantes: borde delgado y curvo, sin sombra pesada */
  .product-card{border:1px solid #e7ecf5;border-radius:18px;box-shadow:none;padding:10px}
  .product-card:hover{box-shadow:0 10px 24px rgba(21,48,92,.1)}
  .product-image{border-radius:13px}
  /* Contenido centrado y limpio */
  .product-card h3{text-align:center;font-size:12px}
  .product-meta,.product-rating{display:none}
  .product-price{justify-content:center;text-align:center;margin-top:7px;font-size:17px}
  /* Dos botones apilados: Agregar (suave) + Comprar ahora (protagonista) */
  .product-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:10px}
  .product-actions .add2{min-height:36px;border-radius:11px;font-size:10.5px}
  .product-actions .buy-now{min-height:38px;border-radius:11px;font-size:11px;box-shadow:0 6px 16px rgba(245,21,114,.26)}
}


/* MOVIL-PRO v21 (2026-07-16): logo REALMENTE centrado (la cabecera tiene 2
   elementos en una rejilla de 3 columnas: el logo va explícito a la columna
   central y el carrito a la derecha) + etiquetas completas en la barra baja. */
@media(max-width:767px){
  .mobile-top .brand{grid-column:2;justify-self:center}
  .mobile-cart{grid-column:3;justify-self:end}
  .bottom-nav.nav4 button{font-size:8.6px;line-height:1.1;padding:0 2px}
  .bottom-nav.nav4 button span{text-align:center;white-space:normal}
}


/* =====================================================================
   MOVIL-PRO v22 2026-07-16 — reservas con lista visual + títulos centrados
   ===================================================================== */
/* Títulos de TODAS las páginas centrados (pedido del dueño) */
.page-title{display:block;text-align:center}
.page-title>div{width:100%}
.page-title>.btn,.page-title>a.btn{margin:12px auto 0;display:inline-flex}
.page-title p{margin-left:auto;margin-right:auto;max-width:640px}
/* Servicio seleccionado dentro del formulario de reserva */
/* Lista de servicios con foto bajo el formulario */
.svc-pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc-pick{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e7ecf5;border-radius:16px;background:#fff;transition:transform .25s,box-shadow .25s}
.svc-pick:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(7,25,66,.12)}
/* La foto del servicio deja de ser una banda de 112 px. Con 4:3 se APRECIA —
   que era justo la queja: se subieron las fotos y no se veian. El chip de canal
   necesita el degradado para leerse sobre cualquier imagen; con el marcador
   generico sobra, y ademas se muestra entero (contain) en vez de recortado. */
.svc-pick-art{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#0b1220}
.svc-pick-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.svc-pick:hover .svc-pick-art img{transform:scale(1.05)}
.svc-pick-art::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,rgba(6,11,25,.72),transparent);pointer-events:none}
.svc-pick-art.sin-foto img{object-fit:contain;background:#f7f9fc}
.svc-pick-art.sin-foto::after{display:none}
.svc-pick-art .svc-chan{position:absolute;left:9px;bottom:8px;z-index:2}
.svc-pick-art.sin-foto .svc-chan{background:rgba(15,23,42,.72);border-color:rgba(15,23,42,.25);backdrop-filter:none}
.svc-pick-body .service-price small{display:inline-block;margin-right:5px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
/* Titulo, gancho y precio CENTRADOS: la tarjeta se lee como una unidad y las
   tres columnas quedan alineadas entre si aunque los titulos midan distinto. */
.svc-pick-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:12px;text-align:center;align-items:center}
.svc-pick-body h3{width:100%}
.svc-pick-body p{width:100%;text-align:justify;text-justify:inter-word;hyphens:auto}
.svc-pick-body .service-price{width:100%;text-align:center}
.svc-pick-body h3{margin:0;font-size:14.5px;line-height:1.3;letter-spacing:-.2px}
.svc-pick-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.svc-pick-body .btn{margin-top:auto;min-height:36px;font-size:11px}
@media(max-width:1024px){.svc-pick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
  .svc-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .svc-pick-art{aspect-ratio:1/1}
  .svc-pick-body{padding:9px}
  .svc-pick-body h3{font-size:11.5px}

}


/* MOVIL-PRO v24 (2026-07-16): categorías con FOTO REAL de producto (pedido del
   dueño: "no iconos"). 12 fotos libres optimizadas en /images/categories/. */
.category-icon.cat-photo{position:relative;overflow:hidden;padding:0}
.category-icon.cat-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.category-card:hover .cat-photo img{transform:scale(1.09)}
.reference-home .category-icon.cat-photo{height:96px}
.category-icon.cat-photo{height:96px}
@media(max-width:767px){.category-icon.cat-photo{height:64px}}


/* MOVIL-PRO v27 (2026-07-16): categorías DENTRO de la barra de búsqueda
   (desplegable con fotos, como el ejemplo del dueño). Los chips quedan fuera. */
.search-cats{display:none}
@media(max-width:767px){
  .mobile-search input{padding-right:88px}
  .mobile-search button[aria-label="Buscar"]{right:58px}
  .search-cats{display:grid;position:absolute;right:21px;top:7px;width:32px;height:32px;border:0;border-radius:10px;background:#eef3fb;color:var(--blue);place-items:center}
  .cats-drop{position:absolute;top:calc(100% - 6px);left:14px;right:14px;z-index:95;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;border:1px solid #e6ecf6;border-radius:16px;background:#fff;box-shadow:0 22px 48px rgba(7,25,66,.22)}
  .cats-drop a{display:flex;align-items:center;gap:9px;padding:7px;border-radius:11px;color:#1c2b4a;font-size:12px;font-weight:700;text-decoration:none}
  .cats-drop a:active{background:#eef3fb}
  .cats-drop img{width:46px;height:34px;object-fit:cover;border-radius:8px;flex:0 0 46px}
  .cats-drop .all{grid-column:1/-1;justify-content:center;color:var(--blue)}
  .cat-chips{display:none} /* las categorías ahora viven en la búsqueda */
}


/* =====================================================================
   IDIOMA + TEMA v28 2026-07-16 — botones bandera/luna-sol + tema oscuro
   ===================================================================== */
/* Botones del header (escritorio) */
.header-action.icon-only{cursor:pointer;border:1px solid #e4eaf3;border-radius:12px;background:#fff;padding:8px 10px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
.header-action.icon-only .flag{font-size:18px;line-height:1}
.header-action.icon-only:hover{border-color:rgba(7,92,255,.4)}
/* Botones del header móvil (a la izquierda; el logo sigue centrado) */
@media(max-width:767px){
  .mobile-top{grid-template-columns:84px 1fr 84px}
  .top-tools{display:flex;gap:6px;align-items:center;justify-self:start}
  .tt-btn{width:34px;height:34px;border:1px solid #e4eaf3;border-radius:10px;background:#f6f8fc;color:#1c2b4a;display:grid;place-items:center;padding:0}
  .tt-btn .icon{width:17px;height:17px}
  .tt-btn .flag{font-size:16px;line-height:1}
}
/* Panel de idiomas */
.lang-drop{position:fixed;top:74px;right:14px;z-index:130;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:min(340px,calc(100vw - 28px));padding:12px;border:1px solid #e6ecf6;border-radius:16px;background:#fff;box-shadow:0 24px 56px rgba(7,25,66,.26)}
.lang-drop .lang-title{grid-column:1/-1;margin:0 0 4px;font-size:12px;color:#5a6b85;text-transform:uppercase;letter-spacing:1px}
.lang-drop button{display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;border-radius:10px;background:transparent;color:#1c2b4a;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.lang-drop button:hover{background:#eef3fb}
.lang-drop button span{font-size:18px}
/* 2026-08-31: aqui habia cuatro reglas para tapar el widget de Google
   Translate. Se fue el widget (medido: no traducia nada), asi que se van las
   reglas: CSS que esconde algo que ya no existe solo confunde al siguiente. */
/* ---------- TEMA OSCURO (html.dark), como Sentinel ---------- */
html.dark body{background:#0A0A0F;color:#C9CEDA}
html.dark .desktop-header,html.dark .app-header{background:#14161F}
html.dark .utility{background:#0D0D14;color:#93a5c4}
html.dark .primary-nav{background:#14161F;border-color:#1d2b49}
html.dark .primary-nav a,html.dark .header-action span{color:#c6d3ea}
html.dark .header-action.icon-only,html.dark .search-form select{background:#14161F;border-color:#22304e;color:#d9e3f5}
html.dark .mobile-header{background:#14161F;border-color:#1d2b49;box-shadow:0 8px 22px rgba(0,0,0,.45)}
html.dark .mobile-search input{background:#14161F;border-color:#22304e;color:#e2eaf8}
html.dark .tt-btn{background:#14161F;border-color:#22304e;color:#d9e3f5}
html.dark .product-card,html.dark .service-card,html.dark .category-card,html.dark .panel,html.dark .stat-card,html.dark .svc-duo-card,html.dark .svc-pick,html.dark .account-card,html.dark .auth-card,html.dark .booking-option,html.dark .notice-strip,html.dark .summary,html.dark .cart-item,html.dark .empty-state,html.dark .services-ribbon,html.dark .ribbon-service,html.dark .trust-panel,html.dark .booking-panel,html.dark .assurance-bar,html.dark .resource-grid a,html.dark .legal-content,html.dark .info-card,html.dark .help-strip,html.dark .cats-drop,html.dark .lang-drop,html.dark .carr-nav,html.dark .spec,html.dark .chip-cat,html.dark .customer-summary>div,html.dark .menu-row{background:#14161F;border-color:#22304e;color:#d9e3f5}
html.dark .reference-hero,html.dark .service-hero{background:#14161F;border-color:#1d2b49}
html.dark h1,html.dark h2,html.dark h3,html.dark .page-title h1,html.dark .section-heading h2{color:#eef3fb}
html.dark p,html.dark .muted,html.dark .product-meta,html.dark .section-heading p,html.dark .page-title p{color:#93a5c4}
html.dark .product-image,html.dark .gallery{background:#14161F}
html.dark .product-image img{mix-blend-mode:normal}
html.dark input,html.dark select,html.dark textarea{background:#14161F;border-color:#26355a;color:#e2eaf8}
html.dark .site-footer{background:#0D0D14;color:#93a5c4;border-color:#1d2b49}
html.dark .site-footer a,html.dark .site-footer span{color:#a9bad8}
html.dark .bottom-nav{background:rgba(13,21,38,.92);border-color:#1d2b49}
html.dark .bottom-nav button{color:#8fa2c0}
html.dark .bottom-nav button.active{color:#6ea3ff}
html.dark .breadcrumbs,html.dark .breadcrumbs button{color:#93a5c4}
html.dark .lang-drop button,html.dark .cats-drop a{color:#d9e3f5}
html.dark .lang-drop button:hover,html.dark .cats-drop a:active{background:#1F2330}
html.dark .search-cats{background:#14161F;color:#6ea3ff}
html.dark .product-price{color:#ff5c93}
html.dark .service-price{color:#6ea3ff}
html.dark .svc-duo-card li{color:#d9e3f5}


/* =====================================================================
   TEMA OSCURO COMPLETO v32 2026-07-16 — textos legibles en TODO el sitio
   + cajas de imagen con tintes sutiles de color (pedido del dueño).
   ===================================================================== */
/* Textos que se perdían sobre el fondo oscuro */
html.dark .reference-hero h1{color:#f2f6ff}
html.dark .reference-hero p,html.dark .hero p{color:#a9bad8}
html.dark .eyebrow{color:#7fb0ff}
html.dark .hero-trust span{color:#c6d3ea}
html.dark .hero-support-card{background:#14161F;border:1px solid #22304e;color:#d9e3f5}
html.dark .hero-support-card h3{color:#eef3fb}
html.dark .hero-support-card p,html.dark .hero-support-card li,html.dark .hero-support-card small{color:#a9bad8}
html.dark .product-card h3,html.dark .category-card b,html.dark .service-card h3,html.dark .service-card.has-art h3,html.dark .svc-pick-body h3,html.dark .ribbon-service b,html.dark .services-ribbon-title b,html.dark .assurance-bar b,html.dark .trust-panel h2,html.dark .booking-panel h2,html.dark .stat-card b,html.dark .spec b,html.dark .booking-option b,html.dark .menu-row b,html.dark .account-card h2,html.dark .customer-summary b,html.dark .detail-info h1,html.dark .empty-state h2,html.dark .auth-card h1,html.dark .panel h2,html.dark .cart-item h3,html.dark .resource-grid h3,html.dark .info-card b,html.dark .lang-drop .lang-title{color:#e9effa}
html.dark .assurance-bar small,html.dark .stat-card span,html.dark .spec span,html.dark .booking-option span,html.dark .menu-row span,html.dark .customer-summary span,html.dark .ribbon-service small,html.dark .trust-stats span,html.dark .booking-panel p,html.dark .empty-state p,html.dark .auth-card p,html.dark .cart-item p,html.dark .notice-strip p,html.dark .customer-privacy-note,html.dark .divider,html.dark .timeline-item,html.dark .step,html.dark .breadcrumbs,html.dark .breadcrumbs span,html.dark .summary-row span,html.dark .detail-info p,html.dark .service-card p,html.dark .svc-pick-body p,html.dark .svc-duo-card p{color:#95a7c6}
html.dark .trust-points span,html.dark .booking-types span,html.dark .notice-strip b,html.dark .summary-row.total span,html.dark .svc-duo-card h3,html.dark .trust-stats b{color:#e9effa}
html.dark ::placeholder{color:#5f7396;opacity:1}
html.dark .chip-cat{background:#14161F;border-color:#22304e;color:#a9bad8}
html.dark .filter-row button{background:#14161F;border-color:#22304e;color:#a9bad8}
html.dark .brand-row b{color:#93a5c4}
html.dark .brand-row b:hover{color:#6ea3ff}
html.dark .text-link{color:#6ea3ff}
html.dark .section-heading h2::after{opacity:.9}
html.dark .gallery-thumb{background:#14161F;border-color:#22304e}
html.dark .update-banner,html.dark .install-banner{background:#14161F;color:#d9e3f5}
html.dark .service-hero{background:linear-gradient(125deg,#0e1830,#1b1230);border-color:#22304e}
html.dark .service-hero h1{color:#f2f6ff}
html.dark .service-hero p{color:#a9bad8}
html.dark .page-title>.btn.light,html.dark .btn.light{background:#14161F;border-color:#2a3a5f;color:#d9e3f5}
/* Cajas de imagen con TINTES sutiles de color (rotación por posición) */
html.dark .product-image{background:linear-gradient(145deg,rgba(7,92,255,.14),rgba(124,58,237,.10))}
html.dark .product-card:nth-child(3n) .product-image{background:linear-gradient(145deg,rgba(245,21,114,.12),rgba(124,58,237,.10))}
html.dark .product-card:nth-child(3n+2) .product-image{background:linear-gradient(145deg,rgba(6,182,212,.12),rgba(7,92,255,.10))}
html.dark .gallery{background:linear-gradient(145deg,rgba(7,92,255,.12),rgba(124,58,237,.08))}
html.dark .category-icon{background:linear-gradient(145deg,rgba(7,92,255,.14),rgba(56,189,248,.10))}
html.dark .category-card:nth-child(3n) .category-icon{background:linear-gradient(145deg,rgba(245,21,114,.12),rgba(124,58,237,.10))}
html.dark .service-art{background:linear-gradient(135deg,#101a35,#1c1440)}
html.dark .cart-thumb{background:linear-gradient(145deg,rgba(7,92,255,.14),rgba(124,58,237,.10))}


/* =====================================================================
   NEGRO ELEGANTE RGB v33 2026-07-16 — "qué sitio negro tan bello".
   Negro profundo + cristal + acentos RGB sutiles. Capa final del tema oscuro.
   ===================================================================== */
/* Fondo: negro profundo con auras RGB muy sutiles fijas */
html.dark body{background:#0A0A0F}
html.dark body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 12% -5%,rgba(37,99,235,.16),transparent 60%),radial-gradient(800px 460px at 96% 10%,rgba(236,72,153,.10),transparent 60%),radial-gradient(760px 520px at 55% 112%,rgba(124,58,237,.13),transparent 60%)}
/* Cabeceras de cristal oscuro + línea RGB viva bajo el menú */
html.dark .desktop-header,html.dark .app-header{background:rgba(7,10,18,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.dark .primary-nav{background:rgba(7,10,18,.94);border-color:#151c2f}
html.dark .primary-nav::after{content:"";display:block;height:2px;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899,#2563eb);background-size:300% 100%;animation:fxHue 12s linear infinite;opacity:.75}
html.dark .mobile-header{background:rgba(7,10,18,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:#151c2f}
/* Superficies: negro elegante con borde fino */
html.dark .product-card,html.dark .service-card,html.dark .category-card,html.dark .panel,html.dark .stat-card,html.dark .svc-duo-card,html.dark .svc-pick,html.dark .account-card,html.dark .auth-card,html.dark .booking-option,html.dark .notice-strip,html.dark .summary,html.dark .cart-item,html.dark .empty-state,html.dark .services-ribbon,html.dark .ribbon-service,html.dark .trust-panel,html.dark .booking-panel,html.dark .assurance-bar,html.dark .resource-grid a,html.dark .legal-content,html.dark .info-card,html.dark .help-strip,html.dark .carr-nav,html.dark .spec,html.dark .customer-summary>div,html.dark .menu-row,html.dark .hero-support-card{background:#0D0D14;border-color:#1b2437}
/* Glow RGB sutil al pasar (la elegancia gamer) */
html.dark .product-card:hover{border-color:transparent;box-shadow:0 0 0 1px rgba(124,58,237,.5),0 16px 46px rgba(124,58,237,.20),0 5px 20px rgba(37,99,235,.16);transform:translateY(-6px)}
html.dark .service-card.has-art:hover,html.dark .svc-pick:hover,html.dark .category-card:hover,html.dark .svc-duo-card:hover{border-color:transparent;box-shadow:0 0 0 1px rgba(37,99,235,.45),0 14px 40px rgba(37,99,235,.18),0 5px 18px rgba(236,72,153,.12)}
html.dark .hero-support-card{box-shadow:0 0 0 1px rgba(37,99,235,.14),0 18px 50px rgba(0,0,0,.6)}
/* Controles y paneles flotantes de cristal */
html.dark input,html.dark select,html.dark textarea{background:#0D0D14;border-color:#202942}
html.dark .lang-drop,html.dark .cats-drop{background:rgba(10,14,25,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:#202942;box-shadow:0 26px 60px rgba(0,0,0,.65)}
html.dark .header-action.icon-only,html.dark .tt-btn,html.dark .search-cats,html.dark .chip-cat,html.dark .filter-row button,html.dark .btn.light{background:#0D0D14;border-color:#202942}
html.dark .site-footer{background:#0A0A0F;border-color:#141b2d}
html.dark .bottom-nav{background:rgba(7,10,18,.92);border-color:#151c2f}
html.dark .toast{background:rgba(10,14,25,.96);box-shadow:0 0 0 1px rgba(124,58,237,.35),0 14px 34px rgba(0,0,0,.6)}
/* Barra de scroll a juego */
html.dark ::-webkit-scrollbar{width:11px;height:11px}
html.dark ::-webkit-scrollbar-track{background:#0A0A0F}
html.dark ::-webkit-scrollbar-thumb{background:linear-gradient(#2563eb,#7c3aed);border-radius:8px;border:3px solid #05070e}
@media (prefers-reduced-motion: reduce){html.dark .primary-nav::after{animation:none}}


/* FIX v34 (2026-07-16): el atributo hidden PERDÍA contra display:grid de
   .lang-drop/.cats-drop — el panel quedaba abierto siempre, en todos los
   navegadores. Regla canónica: [hidden] manda. */
.lang-drop[hidden],.cats-drop[hidden]{display:none!important}


/* =====================================================================
   NEGRO TOTAL v35 2026-07-16 — corrección de raíz del tema oscuro:
   se REDEFINEN LOS TOKENS (todo lo que usa var() se oscurece de golpe)
   y el hero deja su velo blanco por uno negro. Textos = blancos siempre.
   ===================================================================== */
html.dark{--ink:#e9effa;--muted:#94a6c5;--line:#1b2437;--paper:#0b0f1a;--canvas:#05070e;--blue-soft:#132241;--pink-soft:#2b1226;--shadow:0 10px 30px rgba(0,0,0,.5);--shadow-lg:0 18px 46px rgba(0,0,0,.62)}
/* El velo del hero (era blanco) ahora funde a negro elegante */
html.dark .reference-hero:after{background:linear-gradient(90deg,#05070e 0%,#05070e 34%,rgba(5,7,14,.96) 45%,rgba(5,7,14,.4) 72%,rgba(5,7,14,0) 100%)}
html.dark .reference-hero .hero-media{filter:brightness(.6) saturate(1.12)}
html.dark .hero:after{background:linear-gradient(90deg,rgba(3,5,12,.92),rgba(3,5,12,.4))}
/* Refuerzos de texto blanco donde había tinta fija */
html.dark .reference-hero h1,html.dark .section-heading h2,html.dark .page-title h1,html.dark h2,html.dark h3{color:#f2f6ff}
html.dark .reference-hero p{color:#b9c6e0}
html.dark .btn.light,html.dark .pink-outline{color:#f2f6ff}
html.dark .search-form input{background:#0D0D14;border-color:#202942;color:#e9effa}

/* ============ CUENTA REAL v37 (2026-07-17): panel vivo de Mi cuenta ============ */
.acct-live{border:1px solid var(--line,#e5e9f2);border-radius:14px;padding:14px 16px;background:var(--paper,#fff)}
.acct-h{margin:14px 0 6px;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted,#667085)}
.acct-h:first-child{margin-top:0}
.acct-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 0;border-bottom:1px dashed var(--line,#e5e9f2);font-size:13.5px}
.acct-row:last-child{border-bottom:0}
.acct-row b{font-size:13.5px}
.acct-row span{color:var(--muted,#667085);flex:1;min-width:140px}
.acct-row .text-link{white-space:nowrap}
/* Botones por factura en el panel del cliente (sólidos, sin degradado) */
.acct-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.acct-lang-group{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.acct-lang-group>b{padding:0 5px;font-size:11px;color:var(--mut);letter-spacing:.02em}
.acct-btn{display:inline-block;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:#fff;white-space:nowrap}
.acct-btn.v{background:#6d28d9}.acct-btn.p{background:#475569}.acct-btn.g{background:#0f766e}.acct-btn.w{background:#16a34a}
.acct-warn{background:linear-gradient(90deg,rgba(7,92,255,.08),rgba(245,21,114,.08));border:1px solid var(--line,#e5e9f2);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
html.dark .acct-live{background:#0D0D14}

/* ===== v39 (2026-07-18): características y opciones por servicio ===== */
.svc-feats{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.svc-feats li{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:var(--muted,#475467);line-height:1.5}
.svc-feats li svg{flex:none;margin-top:2px;color:#12b76a}
.service-card .svc-feats{margin:8px 0 4px}
.service-card .svc-feats li{font-size:12px}
.svc-feats-block{margin-top:16px}
.svc-feats-block h3{font-size:15px;margin:0 0 4px}
.svc-opts{margin-top:16px;border:1px solid var(--line,#e5e9f2);border-radius:12px;padding:13px 14px;background:linear-gradient(180deg,rgba(7,92,255,.04),transparent)}
.svc-opts h3{font-size:15px;margin:0 0 8px}
.opt-group{margin:8px 0}
.opt-group>b{display:block;font-size:12.5px;margin-bottom:6px;color:var(--muted,#475467);text-transform:uppercase;letter-spacing:.4px}
.opt-values{display:flex;flex-wrap:wrap;gap:8px}
.opt-chip{border:1.5px solid var(--line,#dfe5f0);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;color:inherit}
.opt-chip:hover{border-color:#075cff;transform:translateY(-1px)}
.opt-chip.sel{background:linear-gradient(90deg,#075cff,#4f8bff);border-color:#075cff;color:#fff;box-shadow:0 4px 12px rgba(7,92,255,.28)}
.booking-opts{display:block;font-size:12px;color:#12b76a;margin-top:3px}
html.dark .opt-chip{background:#0D0D14;border-color:#26304a}
html.dark .svc-opts{border-color:#26304a}

/* =====================================================================
   GALERÍA CINÉTICA + CUADRÍCULAS PREMIUM v47 (2026-07-21)
   Solo transform/opacity: movimiento ligero, sin librerías ni datos nuevos.
   ===================================================================== */
.tech-gallery{position:relative;margin-top:42px}
.tech-gallery-head{align-items:flex-end;margin-bottom:17px}
.tech-gallery-head .eyebrow{margin:0 0 5px;color:var(--pink);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.tech-gallery-head h2{margin:0;font-size:28px;letter-spacing:-.7px}
.tech-gallery-head p:not(.eyebrow){margin:6px 0 0;color:var(--muted);font-size:12px}
.tech-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:210px 190px;gap:14px}
.tech-tile{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(7,92,255,.11);border-radius:22px;background:#eaf1ff;isolation:isolate;box-shadow:0 12px 34px rgba(25,47,85,.10);transform:translateZ(0);transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s,border-color .5s}
.tech-tile-1{grid-column:1/7;grid-row:1/3}.tech-tile-2{grid-column:7/10;grid-row:1}.tech-tile-3{grid-column:10/13;grid-row:1}.tech-tile-4{grid-column:7/9;grid-row:2}.tech-tile-5{grid-column:9/13;grid-row:2}
.tech-tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.015);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .5s;will-change:transform}
.tech-tile-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(4,13,34,.88));pointer-events:none}
.tech-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.20) 45%,transparent 66%);transform:translateX(-130%);transition:transform .85s ease}
.tech-tile-copy{position:absolute;z-index:2;right:17px;bottom:16px;left:17px;display:grid;gap:3px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.38)}
.tech-tile-copy small{font-size:9px;font-style:normal;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.82}
.tech-tile-copy b{overflow:hidden;font-size:15px;line-height:1.22;text-overflow:ellipsis;white-space:nowrap}
.tech-tile-copy em{font-size:13px;font-style:normal;font-weight:900;color:#ff8ab9}
.tech-tile-1 .tech-tile-copy{right:25px;bottom:23px;left:25px}.tech-tile-1 .tech-tile-copy b{font-size:24px}.tech-tile-1 .tech-tile-copy em{font-size:18px}
.tech-tile:hover,.tech-tile.is-focus{z-index:3;border-color:rgba(7,92,255,.34);box-shadow:0 20px 48px rgba(7,92,255,.18);transform:translateY(-4px)}
.tech-tile:hover img,.tech-tile.is-focus img{transform:scale(1.075)}
.tech-tile:hover::after,.tech-tile.is-focus::after{transform:translateX(130%)}
.gallery-swipe-hint{display:none}
.tech-gallery-loading .skeleton{height:330px}
.mobile-shop-gallery{display:none}

/* Tarjetas más limpias y con jerarquía visual consistente. */
.product-grid{align-items:stretch}
.product-card{border-color:#e2e9f4;box-shadow:0 8px 24px rgba(28,48,82,.055);isolation:isolate}
.product-card::before{content:"";position:absolute;z-index:3;top:0;right:18px;left:18px;height:3px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,var(--blue),#7c3aed,var(--pink));transform:scaleX(0);transform-origin:left;transition:transform .32s ease}
.product-card:hover::before{transform:scaleX(1)}
.product-image{box-shadow:inset 0 0 0 1px rgba(7,92,255,.055)}
.category-grid{gap:15px}
.category-card{position:relative;overflow:hidden;border-color:#e2e9f4;box-shadow:0 7px 20px rgba(28,48,82,.045)}
.category-card::after{content:"";position:absolute;right:-24px;bottom:-32px;width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,rgba(7,92,255,.10),rgba(245,21,114,.08));transition:transform .4s ease}
.category-card:hover::after{transform:scale(1.45)}
.service-grid{align-items:stretch}
.service-card.has-art{overflow:hidden;border-color:#e2e9f4;box-shadow:0 8px 24px rgba(28,48,82,.055)}
.promo-card{transition:transform .28s ease,box-shadow .28s ease}
.promo-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(32,59,107,.17)}

html.dark .tech-tile{border-color:#1d2b49;background:#0D0D14;box-shadow:0 16px 40px rgba(0,0,0,.42)}
html.dark .tech-tile:hover,html.dark .tech-tile.is-focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 1px rgba(124,58,237,.25),0 22px 52px rgba(37,99,235,.20)}
html.dark .product-card,html.dark .category-card,html.dark .service-card.has-art{box-shadow:0 8px 26px rgba(0,0,0,.30)}

@media(max-width:1000px){
  .tech-mosaic{grid-template-rows:190px 175px}.tech-tile-1{grid-column:1/8}.tech-tile-2{grid-column:8/13}.tech-tile-3{grid-column:8/11;grid-row:2}.tech-tile-4{grid-column:11/13;grid-row:2}.tech-tile-5{display:none}
}
@media(max-width:767px){
  .mobile-shop-gallery{display:none}/*oculto en movil (pedido del dueno 2026-07-28): se omite la 1a galeria/carrusel de productos en la version movil*/.shop-page .mobile-shop-gallery .tech-gallery{display:block;margin:3px 0 24px}.mobile-shop-gallery .tech-gallery-head{margin-bottom:13px}.mobile-shop-gallery+.cat-chips{margin-top:0}
  .bottom-nav.nav4{right:auto;width:100vw;max-width:100vw;overflow:hidden}
  .tech-gallery{margin-top:30px}.tech-gallery-head{align-items:center}.tech-gallery-head h2{font-size:21px}.tech-gallery-head p:not(.eyebrow){font-size:10px}.tech-gallery-head .text-link{display:none}
  .tech-mosaic{display:flex;gap:11px;overflow-x:auto;margin-right:-14px;margin-left:-14px;padding:3px 14px 16px;scroll-padding-left:14px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tech-mosaic::-webkit-scrollbar{display:none}
  .tech-tile,.tech-tile-1,.tech-tile-2,.tech-tile-3,.tech-tile-4,.tech-tile-5{display:block;flex:0 0 min(78vw,310px);height:280px;border-radius:18px;scroll-snap-align:start;transform:none}
  .tech-tile:hover,.tech-tile.is-focus{transform:none}.tech-tile-copy,.tech-tile-1 .tech-tile-copy{right:16px;bottom:16px;left:16px}.tech-tile-copy b,.tech-tile-1 .tech-tile-copy b{font-size:16px}.tech-tile-copy em,.tech-tile-1 .tech-tile-copy em{font-size:14px}
  .gallery-swipe-hint{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:-5px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
  .product-card{box-shadow:0 6px 17px rgba(28,48,82,.055)}.product-card::before{right:10px;left:10px}
  .category-grid{gap:9px}
}
@media(hover:none){.tech-tile::after{display:none}.product-card:hover,.category-card:hover,.promo-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
  .tech-tile,.tech-tile img,.tech-tile::after,.product-card::before,.category-card::after,.promo-card{transition:none!important}
  .tech-tile:hover,.tech-tile.is-focus{transform:none}.tech-tile:hover img,.tech-tile.is-focus img{transform:scale(1.015)}
}
/* HERO con fotos que se alternan (crossfade) + movimiento — 2026-07-19 */
.hero-media.hero-rotate{background:none!important;overflow:hidden}
.hero-media .hs{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:inherit;opacity:0;animation:heroCF 18s infinite;will-change:opacity;transform:scale(1.04);animation-name:heroCF,heroZoom}
.hero-media .hs:nth-child(2){animation-delay:6s,6s}
.hero-media .hs:nth-child(3){animation-delay:12s,12s}
@keyframes heroCF{0%{opacity:0}3%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
@keyframes heroZoom{0%{transform:scale(1.04)}36%{transform:scale(1.12)}100%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.hero-media .hs{animation:none;opacity:0}.hero-media .hs:nth-child(1){opacity:1;transform:none}}
/* FIX botones de tarjeta de producto (no se desbordan) — 2026-07-19 */
.product-actions{flex-wrap:nowrap;align-items:stretch}
.product-actions .btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-actions .btn.buy-now{flex:1 1 auto}
.product-actions .btn.add2{flex:0 0 46px;width:46px;min-width:46px;padding:0;font-size:0;justify-content:center;gap:0}
.product-actions .btn.add2 .icon{width:18px;height:18px}
@media(max-width:767px){.product-actions .btn.add2{flex:0 0 38px;width:38px;min-width:38px}.product-actions .btn.add2 .icon{width:15px}.product-actions .btn.buy-now{font-size:10px;padding:6px 6px}}
/* Cuadrículas de producto MÁS GRANDES — 2026-07-19 */
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.product-card{padding:16px}
.product-image{height:236px}
.product-card h3{font-size:16px;margin:13px 0 3px}
.product-price{font-size:22px}
.carr-x .carr-track .product-card{flex:0 0 292px;min-width:292px}
.home-product-grid .product-image{height:224px}
.home-product-grid .product-card h3{font-size:14px}
.home-product-grid .product-actions .btn.light{font-size:12px}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-image{height:210px}}
@media(max-width:767px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.product-card{padding:10px}.product-image{height:162px}.product-card h3{font-size:12px}.product-price{font-size:16px}.carr-x .carr-track .product-card{flex:0 0 240px;min-width:240px}.home-product-grid .product-image{height:162px}}
/* Imagen del producto LLENA el marco (se ve grande) y lista para fotos reales — 2026-07-19 */
.product-image img{object-fit:cover!important;padding:0!important;mix-blend-mode:normal!important;width:100%;height:100%}
/* Boton Instalar app en cabecera movil (PWA) */
.m-install{display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 28px);margin:0 14px 11px;border:0;border-radius:10px;background:#fff;color:var(--blue,#075cff);font-size:12px;font-weight:800;padding:10px;box-shadow:0 4px 14px rgba(3,22,59,.18)}.m-install .icon{width:16px;height:16px}
/* Tarjeta de producto = foto enviada (2026-07-28, dueño): nombre en 1 sola línea, sin descripción/rating en móvil, menos espacios en blanco → 4 productos completos al abrir */
.product-card h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:767px){.product-card{padding:7px}.product-card .product-meta,.product-card .product-rating{display:none}.product-card h3{margin:7px 0 2px;font-size:12px}.product-price{margin-top:2px}.product-actions{margin-top:7px;gap:6px}.product-image{height:120px}}
/* Ícono FLOTANTE de instalar (2026-07-28, dueño): abajo-izquierda, no ocupa espacio del layout; par del flotante de WhatsApp (abajo-derecha) */
.install-float{position:fixed;left:21px;bottom:22px;z-index:50;display:flex;align-items:center;gap:6px}
.install-float-btn{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 15px;border:0;border-radius:999px;background:linear-gradient(135deg,#0355f5,#7b34ff);color:#fff;font-weight:800;font-size:13px;box-shadow:0 12px 26px rgba(7,60,200,.42);cursor:pointer}
.install-float-x{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:#fff;color:#33415a;font-weight:800;font-size:12px;line-height:1;box-shadow:0 6px 14px rgba(7,60,200,.28);cursor:pointer}
.install-float-btn .icon{width:22px;height:22px}
@media(max-width:767px){.install-float{left:14px;bottom:calc(79px + env(safe-area-inset-bottom))}.install-float-btn{height:46px;padding:0 15px 0 12px;font-size:12px}.install-float-btn .icon{width:20px;height:20px}}
/* MODO OSCURO CONTENEDORES (2026-07-28, dueño): .app-shell/.page/.reference-home quedaban en #fff y dejaban franjas blancas en tema oscuro. Se hacen transparentes para que el fondo oscuro del body cubra TODO (escritorio y móvil). */
html.dark body{background:#0A0A0F}
html.dark .app-shell,html.dark .page,html.dark .reference-home,html.dark main,html.dark .view{background:transparent!important}
html.dark .filter-row button{background:#14161F;border-color:#22304e;color:#c6d3ea}
html.dark{background:#0A0A0F}
html.dark .mobile-search{background:transparent}
html.dark .mobile-header .cats-drop{background:#14161F}
/* FOOTER MOVIL (2026-07-28, dueño): sin logo, solo grupos por categoría, enlaces tipo botón grande centrados (fácil de tocar en teléfonos). Escritorio sin cambios. */
@media(max-width:767px){
.site-footer .footer-brand{display:none!important}
.site-footer .footer-inner{grid-template-columns:1fr!important;gap:18px;padding:22px 16px 6px;text-align:center}
.site-footer .footer-inner>div{gap:8px}
.site-footer .footer-inner b{font-size:13px;margin-bottom:5px;letter-spacing:.4px;color:var(--blue)}
.site-footer .footer-inner a{display:block;min-height:48px;line-height:46px;padding:0 14px;border:1px solid #e2e8f0;border-radius:12px;background:#f4f7fc;color:#1f2a44!important;font-size:14px!important;font-weight:700}
.site-footer .footer-inner span,.site-footer .footer-inner p{font-size:13px!important;line-height:1.8}
html.dark .site-footer .footer-inner a{border-color:#22304e;background:#14161F;color:#dbe4f6!important}
html.dark .site-footer .footer-inner b{color:#7ea6ff}
}
/* TARJETA UNIFORME + FILTRO (2026-07-28, dueño): sin subtítulos, nombre 1 línea centrado, 2 botones iguales; filtro de categorías también visible en escritorio */
.product-card .product-meta,.product-card .product-rating{display:none!important}
.product-card h3{text-align:center}
.product-card .product-price{justify-content:center}
.product-card .product-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.product-card .product-actions .btn{flex:none!important;width:auto!important;min-width:0!important;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;padding:0 10px}
/* chips de categoría: SOLO en móvil; en escritorio la barra de categorías es el menú superior */
@media(max-width:767px){.cat-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:2px 2px 12px}.product-card .product-actions .btn{min-height:38px;font-size:11px;padding:0 6px}}
/* FICHA DE PRODUCTO COMPLETA (2026-07-28, dueño): estrellas, colores swatch, cantidad, envío, sellos, compartir — igual para TODOS los productos */
.detail-info.detail-buy{border:1px solid #e6ebf3;border-radius:18px;padding:24px;background:#fff}
.dbadges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.avail-dot{display:inline-flex;align-items:center;gap:7px;color:#16a34a;font-weight:800;font-size:13px}
.avail-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.rating-row{display:flex;align-items:center;gap:8px;margin:6px 0 12px}
.rating-row .stars{letter-spacing:2px;font-size:16px}
.rating-row .star{color:#d7dce6}.rating-row .star.on{color:#f59e0b}
.rating-row b{font-size:13px}
.color-field{margin:18px 0}
.color-field>label{display:block;font-weight:800;font-size:13px;margin-bottom:10px}
.color-swatches{display:flex;flex-wrap:wrap;gap:10px}
.color-swatch{display:flex;flex-direction:column;align-items:center;gap:7px;width:76px;padding:10px 6px;border:2px solid #e5e9f2;border-radius:12px;background:#fff;cursor:pointer;font-size:11px;font-weight:700;color:var(--ink)}
.color-swatch.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,92,255,.12)}
.color-dot{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.14)}
.instock-line{display:flex;align-items:center;gap:6px;color:#16a34a;font-weight:700;font-size:13px;margin:14px 0 2px}
.instock-line .icon{width:16px;height:16px;color:#16a34a}
.qty-row{display:flex;justify-content:flex-end;margin:6px 0 2px}
.qty-stepper{display:inline-flex;align-items:center;border:1px solid #e2e8f2;border-radius:12px;overflow:hidden}
.qty-stepper button{width:46px;height:46px;border:0;background:#f7faff;color:var(--ink);font-size:20px;font-weight:700;cursor:pointer}
.qty-stepper span{min-width:54px;text-align:center;font-weight:800;font-size:15px}
.buy-actions{display:flex;flex-direction:column;gap:12px;margin:10px 0 16px}
.btn-cart,.btn-buy{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;border:0;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none}
.btn-cart{background:var(--blue);color:#fff}.btn-buy{background:var(--pink);color:#fff}
.btn-cart:hover,.btn-buy:hover{filter:brightness(1.06)}
.deliver-box{display:flex;align-items:center;gap:12px;border:1px solid #e6ebf3;border-radius:12px;padding:12px;margin:14px 0}
.deliver-box .icon{color:var(--blue);flex:none}
.deliver-box .dl-txt{font-size:12px;font-weight:800;white-space:nowrap}
.deliver-box .dl-txt span{display:block;color:var(--muted);font-weight:600}
.deliver-box input{flex:1;min-width:0;height:40px;border:1px solid #dbe3f0;border-radius:9px;padding:0 12px;font-size:13px;background:#fff;color:var(--ink)}
.deliver-box>button{border:0;background:transparent;color:var(--blue);font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border:1px solid #eef2f8;border-radius:12px;padding:13px 8px;margin:14px 0}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;font-size:10px;font-weight:800;color:var(--ink)}
.trust-item .icon{color:var(--blue);width:20px;height:20px}
.trust-item span{color:var(--muted);font-weight:600;font-size:9px}
.wa-help{text-align:center;font-size:13px;margin:14px 0}
.wa-help a{color:#16a34a;font-weight:800}
.share-block>b{display:block;font-size:12px;margin-bottom:9px}
.share-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.share-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid #e6ebf3;border-radius:10px;background:#fff;font-size:11px;font-weight:800;cursor:pointer;color:var(--ink);text-decoration:none}
.share-btn:hover{border-color:var(--blue);color:var(--blue)}
html.dark .detail-info.detail-buy,html.dark .deliver-box,html.dark .trust-row,html.dark .qty-stepper,html.dark .color-swatch,html.dark .share-btn{background:#14161F;border-color:#22304e;color:#dbe4f6}
html.dark .qty-stepper button{background:#14161F;color:#dbe4f6}
html.dark .deliver-box input{background:#14161F;border-color:#26355a;color:#e2eaf8}
html.dark .trust-item{color:#dbe4f6}
html.dark .trust-item span,html.dark .deliver-box .dl-txt span{color:#93a5c4}
@media(max-width:767px){.detail-info.detail-buy{padding:16px}.trust-row{grid-template-columns:repeat(2,1fr)}.color-swatch{width:64px}.btn-cart,.btn-buy{min-height:50px;font-size:14px}}
/* CARRITO 2026 (dueño): stepper, resumen, código promo, un botón, métodos de pago, guardar/eliminar */
.cart2 .crumbs{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-bottom:8px}
.cart2 .crumbs a{color:var(--muted)}
.cart-steps{justify-content:center;margin:4px 0 24px;gap:0}
.cart-steps .step b{width:28px;height:28px;font-size:12px}
.cart-steps .step{font-size:14px}
.cart-steps .step-line{width:130px;margin:0 10px}
.cart-steps .step-line.on{background:var(--blue)}
.cart2-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr);gap:26px;align-items:start}
.cart2-main>h1{font-size:34px;letter-spacing:-1px;margin:0}
.cart2-sub{color:var(--muted);margin:4px 0 18px}
.cart2-list{display:flex;flex-direction:column;gap:14px}
.cart2-item{display:grid;grid-template-columns:120px 1.5fr auto auto auto;gap:18px;align-items:center;border:1px solid #e6ebf3;border-radius:16px;padding:16px;background:#fff}
.cart2-thumb{width:120px;height:120px;border-radius:12px;overflow:hidden;background:#f2f6fd;display:grid;place-items:center}
.cart2-thumb img{width:100%;height:100%;object-fit:cover}
.cart2-body h3{font-size:16px;margin:0 0 8px}
.cart2-stock{display:inline-flex;align-items:center;gap:5px;background:#e8f7ee;color:#16a34a;font-weight:800;font-size:11px;padding:4px 9px;border-radius:999px}
.cart2-stock .icon{width:13px;height:13px;color:#16a34a}
.cart2-color{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--ink)}
.color-dot.sm{width:16px;height:16px;border:1px solid rgba(0,0,0,.14)}
.cart2-actions{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.cart2-actions button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:0}
.cart2-actions button:hover{color:var(--blue)}
.cart2-actions .icon{width:15px;height:15px}
.cart2-num{display:flex;flex-direction:column;align-items:center;gap:7px}
.cart2-lbl{color:var(--muted);font-size:11px}
.cart2-price{color:var(--pink);font-size:17px;font-weight:900}
.cart2-below{margin:16px 0}
.cart2-below .btn.light{display:inline-flex;align-items:center;gap:8px}
.cart2 .deliver-box{margin:14px 0}
.cart2 .deliver-box .icon-wrap{width:40px;height:40px;border-radius:10px;background:#eef4ff;display:grid;place-items:center;color:var(--blue);flex:none}
.cart2 .deliver-box .dl-txt{white-space:normal}
.cart2-clear{display:flex;justify-content:flex-end;margin-top:12px}
.cart2-clear button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--pink);font-weight:800;font-size:13px;cursor:pointer}
.cart2-summary{border:1px solid #e6ebf3;border-radius:18px;padding:22px;background:#fff;position:sticky;top:20px}
.cart2-summary h2{font-size:19px;margin:0 0 16px}
.sum-row{display:flex;justify-content:space-between;align-items:center;margin:12px 0;font-size:14px;color:var(--ink)}
.sum-row b{font-weight:800}
.sum-row b.muted{color:var(--muted);font-weight:600}
.promo{border:1px solid #e6ebf3;border-radius:12px;padding:0 12px;margin:14px 0}
.promo summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;padding:13px 0;font-size:13px;font-weight:700;color:var(--ink)}
.promo summary::-webkit-details-marker{display:none}
.promo-in{display:flex;gap:8px;padding:0 0 13px}
.promo-in input{flex:1;min-width:0;height:40px;border:1px solid #dbe3f0;border-radius:9px;padding:0 12px;font-size:13px;background:#fff;color:var(--ink)}
.promo-in button{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:0 16px;font-weight:800;cursor:pointer}
.sum-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eef2f8;margin-top:8px;padding-top:16px;font-size:16px;font-weight:800;color:var(--ink)}
.sum-total b{color:var(--pink);font-size:27px}
.cart2-summary .btn-cart{margin:14px 0 10px}
.cart2-summary .btn-cart[disabled]{opacity:.5;cursor:not-allowed}
.sum-secure{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;margin-bottom:14px}
.pay-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 0 16px;border-bottom:1px solid #eef2f8}
.paybadge{display:inline-flex;align-items:center;height:34px;padding:0 11px;border:1px solid #e6ebf3;border-radius:8px;background:#fff;font-size:11px;font-weight:900;color:#1f2a44}
.paybadge.visa{color:#1a1f71}.paybadge.mc{color:#eb001b}.paybadge.amex{color:#2e77bc}.paybadge.pp{color:#003087}
.cart2-trust{display:flex;justify-content:space-between;gap:8px;padding-top:14px;font-size:10px;font-weight:800;color:var(--ink)}
.cart2-trust span{display:flex;align-items:center;gap:5px}
.cart2-trust .icon{width:16px;height:16px;color:var(--blue)}
.cart2-saved{margin-top:26px}
.cart2-saved h2{font-size:17px;margin-bottom:12px}
.cart2-item.saved{grid-template-columns:90px 1fr auto}
.cart2-item.saved .cart2-thumb{width:90px;height:90px}
.cart2-actions.right{margin-top:0;justify-content:flex-end}
/* REDES SOCIALES EN FOOTER */
.footer-soc>b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.soc-row{display:flex;gap:10px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;color:#fff!important;font-size:12px;font-weight:800;text-decoration:none}
.soc .icon{width:15px;height:15px}
.soc.fb{background:#1877f2}.soc.ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}.soc.tk{background:#010101}.soc.wa{background:#25d366}
/* MODO OSCURO: textos siguen el fondo */
html.dark .cart2-item,html.dark .cart2-summary,html.dark .promo,html.dark .paybadge{background:#14161F;border-color:#22304e}
html.dark .cart2-main>h1,html.dark .cart2-summary h2,html.dark .cart2-item h3,html.dark .cart2-saved h2,html.dark .sum-total,html.dark .sum-row,html.dark .cart2-color,html.dark .cart2-trust,html.dark .paybadge,html.dark .promo summary{color:#e5ecfa}
html.dark .cart2-sub,html.dark .cart2-lbl,html.dark .sum-row b.muted,html.dark .sum-secure,html.dark .cart2 .crumbs,html.dark .cart2 .crumbs a,html.dark .cart2-actions button{color:#95a7c6}
html.dark .promo-in input{background:#14161F;border-color:#26355a;color:#e2eaf8}
html.dark .cart2-thumb{background:#14161F}
html.dark .cart2 .deliver-box .icon-wrap{background:#14161F}
@media(max-width:767px){
.cart2-grid{grid-template-columns:1fr}
.cart2-item{grid-template-columns:80px 1fr;gap:12px;row-gap:0}
.cart2-item .cart2-num{flex-direction:row;justify-content:space-between;grid-column:1/-1;border-top:1px solid #eef2f8;padding-top:10px;margin-top:10px}
html.dark .cart2-item .cart2-num{border-color:#22304e}
.cart2-main>h1{font-size:26px}
.cart-steps .step-line{width:34px;margin:0 6px}
.cart-steps .step{font-size:12px}
.cart2-summary{position:static}
.cart2-trust{flex-direction:column;gap:7px;align-items:flex-start}
}
/* ICONOS DE COLOR + OSCURO LEGIBLE (2026-07-28, dueño) */
.paybadge{background:#fff!important;padding:0 10px;height:36px;display:inline-flex;align-items:center;border:1px solid #e6ebf3}
.pb-svg{height:20px;width:auto;display:block}
html.dark .paybadge{background:#fff!important;border-color:#dfe5ef!important}
.soc .soc-svg{width:16px;height:16px}
.soc .icon{width:16px;height:16px}
/* Modo oscuro: nada de textos grises ilegibles -> gris claro legible */
html.dark{color:#e7edfb}
html.dark .muted,html.dark p,html.dark .cart2-sub,html.dark .cart2-lbl,html.dark .sum-row span,html.dark .sum-secure,html.dark .product-meta,html.dark .detail-info p,html.dark .cart2 .crumbs,html.dark .cart2 .crumbs a,html.dark .cart2-actions button,html.dark .cart2-trust span,html.dark .trust-item span,html.dark .deliver-box .dl-txt span,html.dark .section-heading p,html.dark small{color:#c3cee4}
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark .cart2-item h3,html.dark .cart2-summary h2{color:#f1f5fd}
/* 29/08/2026 — LA CAJA DE LA FOTO DEJA DE SER BLANCA EN TEMA OSCURO.
   Esta regla se puso cuando el catalogo eran fotos de producto recortadas
   sobre blanco: entonces tenia sentido, porque una foto clara sobre caja
   negra queda como un recorte flotando. Hoy el catalogo es al reves — las
   fichas son piezas de marketing oscuras y vibrantes— y la caja blanca las
   enmarcaba con un halo. El dueno lo describio exacto: «el de treinta y
   cuatro con noventa y nueve es un cuadrado negro con azul, pero el fondo
   sale blanco, no se por que».
   Medido sobre la tienda publicada: de las imagenes visibles, solo SEIS
   tienen el marco claro (micro, mouse, mousepad, teclado y webcam de la
   linea EZ); el resto son oscuras. Se optimiza para la mayoria: la caja usa
   la superficie de la casa y las fotos oscuras se funden sin costura.
   Para esas seis, el arreglo es el mismo que se hizo con la foto de la
   tienda en /empresa: generar la version con el fondo cambiado y servirla
   en oscuro, no pelearse con el CSS. */
html.dark .gallery,html.dark .gallery-main,html.dark .product-image,html.dark .cart2-thumb{background:var(--ez-papel)!important}
/* Botones de la tarjeta de producto en móvil: apilados a ancho completo (no se corta el texto) */
@media(max-width:767px){
.product-card .product-actions{grid-template-columns:1fr!important;gap:7px}
.product-card .product-actions .btn{width:100%!important;min-height:38px;font-size:12.5px;padding:0 8px}
}
/* FICHA MOVIL OPTIMIZADA (2026-07-28) */
@media(max-width:767px){
.detail-layout{gap:14px}
.detail-info.detail-buy{padding:16px}
.detail-info h1{font-size:22px;line-height:1.2}
.gallery{min-height:0;padding:12px}
.gallery-main>img,.gallery img{max-height:280px}
.gallery-thumb{width:52px;height:52px}
.rating-row{font-size:12px}.rating-row .stars{font-size:15px}
.color-field>label{font-size:12px}
.color-swatches{gap:8px}
.color-swatch{width:60px;padding:8px 4px;font-size:10.5px}
.color-dot{width:30px;height:30px}
.qty-stepper button{width:42px;height:42px;font-size:19px}
.btn-cart,.btn-buy{min-height:50px;font-size:14.5px}
.deliver-box{gap:9px;padding:10px}.deliver-box input{height:38px}
.share-row{grid-template-columns:repeat(2,1fr)}
.detail-price{font-size:26px;margin:12px 0}
}
/* FIX OVERFLOW FICHA MOVIL + titulo brillante en oscuro (2026-07-28) */
html.dark .detail-info h1,html.dark .detail-info .detail-price{color:#f1f5fd}
html.dark .detail-info .detail-price{color:var(--pink)}
@media(max-width:767px){
.detail-layout{grid-template-columns:1fr!important;gap:14px}
.detail-info.detail-buy{min-width:0;max-width:100%;overflow:hidden}
.buy-actions,.btn-cart,.btn-buy{min-width:0;max-width:100%}
.deliver-box{flex-wrap:wrap;gap:8px}
.deliver-box input{flex:1 1 100%;width:100%}
.deliver-box>button{margin-left:auto}
.trust-row{grid-template-columns:repeat(2,1fr)}
.color-swatches{justify-content:flex-start}
}
/* PALETA OSCURA REFINADA (2026-07-28, dueño): sin botones blancos ni texto gris feo */
html.dark .btn.ghost{background:#1F2330;border:1px solid #2c3c60;color:#eaf0fc}
html.dark .btn.ghost:hover{background:#2B2F3D;box-shadow:none}
html.dark .btn.light{background:#1F2330;border-color:#2c3c60;color:#cfe0ff}
html.dark .btn.light:hover{background:#2B2F3D}
/* Grises apagados -> gris claro legible en toda la web */
html.dark .assurance-bar small,html.dark .stat-card span,html.dark .spec span,html.dark .booking-option span,html.dark .menu-row span,html.dark .customer-summary span,html.dark .ribbon-service small,html.dark .booking-panel p,html.dark .empty-state p,html.dark .auth-card p,html.dark .cart-item p,html.dark .notice-strip p,html.dark .breadcrumbs,html.dark .breadcrumbs span,html.dark .summary-row span,html.dark .detail-info p,html.dark .service-card p,html.dark .svc-duo-card p,html.dark .svc-pick-body p,html.dark .muted,html.dark .section-heading p,html.dark small,html.dark .divider,html.dark .customer-privacy-note{color:#bcc8e0}
/* Inputs, placeholders y paneles cohesivos */
html.dark input,html.dark select,html.dark textarea{background:#14161F;border-color:#2a3a5e;color:#eaf0fc}
html.dark input::placeholder,html.dark textarea::placeholder{color:#8493b6}
html.dark .panel,html.dark .summary{background:#14161F;border-color:#233251}
html.dark .stepper .step b{background:#2B2F3D;color:#cfe0ff}
html.dark .stepper .step.active b{background:var(--blue);color:#fff}
/* REFINAMIENTO ELEGANTE (2026-07-28, dueño): sobrio, premium, no llamativo */
/* Métodos de pago: badges pequeños, sobrios, uniformes (no cajas blancas grandes) */
.pay-badges{gap:7px;padding:8px 0 14px;justify-content:center}
.paybadge{height:29px;padding:0 8px;border-radius:6px;background:#fff;border:1px solid #eaeef4;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.pb-svg{height:16px}
html.dark .paybadge{background:#f4f6fb;border-color:#dfe4ee;box-shadow:none}
/* Tarjetas oscuras: profundidad sutil + borde refinado (premium, no plano ni chillón) */
html.dark .cart2-summary,html.dark .cart2-item,html.dark .cart2-saved .cart2-item,html.dark .panel,html.dark .detail-info.detail-buy,html.dark .cart2-summary{border-color:#1e2a46;box-shadow:0 10px 34px rgba(0,0,0,.32)}
html.dark .cart2-item,html.dark .detail-info.detail-buy{background:linear-gradient(180deg,#111c33,#0e1728)}
html.dark .cart2-summary,html.dark .panel{background:linear-gradient(180deg,#111c33,#0d1526)}
/* Botón principal: gradiente sutil (elegante), no azul plano chillón */
.btn-cart{background:linear-gradient(135deg,#2f6bff,#4f46e5)}
.btn-cart:hover{filter:brightness(1.05)}
html.dark .btn-cart{background:linear-gradient(135deg,#2f6bff,#4f46e5)}
/* Chip "En stock" más sobrio en oscuro */
html.dark .cart2-stock,html.dark .instock-line{color:#4ade80}
/* Bordes/divisores más finos y consistentes en oscuro */
html.dark .sum-total,html.dark .pay-badges,html.dark .promo{border-color:#22304e}
html.dark .cart2-trust,html.dark .trust-row{border-color:#1e2a46}
/* ============ PALETA SENTINEL — navy elegante para toda la web oscura (2026-07-28) ============ */
html.dark{background:#0A0A0F;color:#F5F7FA}
html.dark body{background:#0D0D14}
html.dark .app-shell,html.dark .page,html.dark .reference-home,html.dark main,html.dark .view{background:transparent!important}
html.dark .app-header,html.dark .desktop-header,html.dark .utility,html.dark .primary-nav,html.dark .mobile-header{background:#14161F;border-color:#1a2540}
html.dark .mobile-search{background:transparent}
/* Todas las tarjetas / paneles -> navy Sentinel con borde sutil y profundidad */
html.dark .product-card,html.dark .service-card,html.dark .category-card,html.dark .panel,html.dark .summary,html.dark .cart-item,html.dark .cart2-item,html.dark .cart2-summary,html.dark .detail-info.detail-buy,html.dark .info-card,html.dark .legal-content,html.dark .notice-strip,html.dark .booking-option,html.dark .menu-row,html.dark .spec,html.dark .trust-row,html.dark .deliver-box,html.dark .qty-stepper,html.dark .color-swatch,html.dark .share-btn,html.dark .promo,html.dark .auth-card,html.dark .account-card,html.dark .stat-card,html.dark .svc-duo-card,html.dark .hero-support-card,html.dark .svc-pick,html.dark .help-strip,html.dark .cats-drop,html.dark .lang-drop,html.dark .chip-cat{background:#14161F;border-color:#1e2a44;box-shadow:0 10px 30px rgba(0,0,0,.28)}
html.dark .cart2-item,html.dark .detail-info.detail-buy,html.dark .cart2-summary,html.dark .panel{background:linear-gradient(180deg,#131d33,#0f1728)}
/* Inputs */
html.dark input,html.dark select,html.dark textarea,html.dark .search-form input,html.dark .mobile-search input{background:#14161F;border-color:#24355f;color:#eaf0fc}
html.dark input::placeholder,html.dark textarea::placeholder{color:#7c8bad}
/* Texto: títulos claros + secundario azul-grís legible (Sentinel) */
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark .detail-info h1,html.dark .cart2-main>h1{color:#f2f5fd}
html.dark .muted,html.dark p,html.dark small,html.dark .cart2-sub,html.dark .cart2-lbl,html.dark .sum-row span,html.dark .sum-secure,html.dark .detail-info p,html.dark .product-meta,html.dark .breadcrumbs,html.dark .breadcrumbs span,html.dark .cart2 .crumbs,html.dark .cart2 .crumbs a,html.dark .summary-row span,html.dark .section-heading p,html.dark .cart2-trust span,html.dark .trust-item span,html.dark .cart2-actions button,html.dark .deliver-box .dl-txt span{color:#9aa9c5}
/* Botones secundarios */
html.dark .btn.ghost,html.dark .btn.light{background:#1F2330;border:1px solid #26365b;color:#dce6fb}
html.dark .btn.ghost:hover,html.dark .btn.light:hover{background:#1F2330}
/* Galería/imagen clara (la foto se ve) */
html.dark .gallery,html.dark .gallery-main,html.dark .product-image,html.dark .cart2-thumb{background:var(--ez-papel)!important}
/* Barra inferior móvil + footer */
html.dark .bottom-nav{background:rgba(10,17,32,.96);border-color:#1a2540}
html.dark .site-footer{background:#0D0D14;border-color:#1a2540}
/* Paybadges sobrios */
html.dark .paybadge{background:#f4f6fb;border-color:#dfe4ee;box-shadow:none}

/* ===== FIX MOVIL RESERVA (2026-08-02) — los flotantes no deben tapar el CTA de reserva ===== */
@media(max-width:767px){
  /* En /calendario y /soporte-remoto el boton principal "Enviar solicitud de reserva" debe
     quedar 100% visible y tocable: se ocultan los flotantes redundantes (Instalar y WhatsApp);
     el propio formulario ya realiza el contacto por WhatsApp al enviar. No se toca el escritorio. */
  .app-shell.is-reserva .wa-float,
  .app-shell.is-reserva .install-float{display:none!important}
  /* Aire inferior para que el CTA no toque la lista de servicios que va debajo. */
  .app-shell.is-reserva form[data-booking-form] button[type=submit]{position:relative;z-index:60;margin-bottom:8px}
}

/* =====================================================================
   BLOQUE DE ACCESIBILIDAD Y CONTRASTE — 2026-08-09
   Motivo: ADA Título III (42 U.S.C. §12181 ss.) + NJ Law Against
   Discrimination (N.J.S.A. 10:5-4 y 10:5-12(f)), que a diferencia del ADA
   concede daños y honorarios de abogado (N.J.S.A. 10:5-27.1). El escaneo
   axe-core (WCAG 2.0/2.1/2.2 nivel A + AA) devolvía 37 nodos con contraste
   insuficiente en las 10 rutas auditadas. Un bufete demandante usa
   exactamente esa misma herramienta automática.
   Este bloque va al final a propósito: gana por orden de cascada sin tocar
   las ~6.500 columnas minificadas de arriba.
   ===================================================================== */

/* --- 1.4.3 Contraste mínimo: texto ------------------------------------ */
/* Rosa de marca #ff1975 sobre blanco = 3.71:1 (exige 4.5:1) */
.nav-offer,
.booking-types>span,
.text-link,
a.text-link{color:var(--acento2-fg)}
html.dark .nav-offer,
html.dark .booking-types>span,
html.dark .text-link{color:var(--acento2-fg-osc)}

/* Logotipos de marca: 2.13–2.92:1 (exige 3:1 por ser texto grande) */
.brand-row b{color:#5a6376!important}
html.dark .brand-row b{color:#b9c2d4!important}

/* Pasos inactivos del checkout y separador del login: 2.57:1 */
.step,.divider{color:#5f6b80}
html.dark .step,html.dark .divider{color:#a9b4c7}

/* Etiqueta "WhatsApp" gris sobre verde #25d366 = 3.09:1 */
.soc>span{color:#0b3d1c}

/* --- 1.4.3 Contraste de los CTA principales --------------------------- */
/* Blanco sobre #3b82f6 = 3.68:1 y sobre #ec4899 = 3.53:1. Los gradientes no
   los detecta axe, pero fallan igual. Nuevos: 5.27:1 y 5.06:1. */
.btn{background:linear-gradient(135deg,var(--acento-fg),#075cff)}
.btn:hover{background:linear-gradient(135deg,#02339c,var(--acento-fg))}
.btn.pink{background:linear-gradient(135deg,#c40656,#d90860)}
.btn.pink:hover{background:linear-gradient(135deg,#a80448,#c40656)}

/* --- 2.4.7 + 1.4.11 Foco visible -------------------------------------- */
/* Antes: outline rgba(7,92,255,.35) => 1.72:1 sobre blanco y 1.41:1 en oscuro,
   y `outline:none` en todos los campos de formulario: con teclado no se veía
   dónde estabas en el checkout ni en el login. */
:root{--focus:var(--acento-fg)}
html.dark{--focus:var(--acento-fg-osc)}
:focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px;border-radius:10px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus)!important;outline-offset:1px;border-color:var(--focus)!important}

/* --- 2.4.1 Saltar al contenido ---------------------------------------- */
.skip-link{position:fixed;left:-9999px;top:0;z-index:10000}
.skip-link:focus{left:8px;top:8px;padding:12px 18px;border-radius:0 0 12px 12px;background:var(--acento-fg);color:#fff;font-size:15px;font-weight:800;text-decoration:none;outline:3px solid #fff;outline-offset:-6px}

/* --- 4.1.3 Región de anuncio de ruta (invisible pero leída) ----------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 1.4.4 Piso tipográfico ------------------------------------------- */
/* Había 27 reglas a 9px y 9 a 8px, incluidas las etiquetas de la barra
   inferior (la ÚNICA navegación del móvil). Público adulto, en teléfono. */
.bottom-nav button{font-size:11px}
.product-card .discount,.product-meta,.footer-bottom,.trust-stats span,
.ribbon-service b,.ribbon-service small,.customer-summary span,.benefit span,
.booking-types span,.trust-item span,.hero-trust,.assurance-bar small,
.tech-tile-copy small,.trust-points span{font-size:12px}

/* --- 2.5.8 Tamaño del objetivo (mínimo 24x24) ------------------------- */
.carr-dots{gap:0}
.carr-dot{width:24px;height:24px;background:none;border:0;position:relative;cursor:pointer}
.carr-dot::before{content:'';position:absolute;inset:7px;border-radius:50%;background:rgba(255,255,255,.5)}
.carr-dot.on{background:none}
.carr-dot.on::before{background:#fff}
.bottom-nav button{min-height:56px}

/* --- Estados de disponibilidad honestos (ver app.js: stockBadge) ------- */
.avail-dot.avail-ask{background:#f4f6fa;color:#4a5568}
.avail-dot.avail-out{background:#fff5e6;color:#8a4b00}
.afiliado-aviso{margin:10px 0 0;padding:10px 12px;border:1px solid #e6e9f0;border-radius:10px;background:#fafbfd;color:#4a5568;font-size:12px;line-height:1.5}
html.dark .afiliado-aviso{background:#14161F;border-color:#25324c;color:#a9b4c7}

/* --- Refuerzo de especificidad (2026-08-09, 2ª pasada de verificación) -----
   Las reglas de arriba perdían frente a selectores más específicos del bundle
   (.booking-types span+span, .brand-row b{opacity:.45}, etc.). Se fuerzan aquí
   los valores ya validados contra axe-core. */
.nav-offer{color:var(--acento2-fg)!important}
html.dark .nav-offer{color:var(--acento2-fg-osc)!important}
.booking-types span,.booking-types span+span{color:var(--acento-fg)!important}
.booking-types span+span{color:var(--acento2-fg)!important}
html.dark .booking-types span{color:var(--acento-fg-osc)!important}
html.dark .booking-types span+span{color:var(--acento2-fg-osc)!important}
/* opacity:.45 mezclaba el color con el blanco: 5.9:1 se convertía en 1.96:1 */
.brand-row b{opacity:1!important;color:#5a6376!important}
.brand-row b:nth-child(3),.brand-row b:nth-child(5),.brand-row b:nth-child(9){color:#b31119!important}
.brand-row b:nth-child(4),.brand-row b:nth-child(8){color:#0f4491!important}
html.dark .brand-row b{color:#b9c2d4!important}
.step,.divider{color:#5f6b80!important}
html.dark .step,html.dark .divider{color:#a9b4c7!important}
.soc>span,.soc span{color:#fff!important}
.soc.wa{background:#0b6b2f!important}
.soc.tk,.soc.fb,.soc.ig{color:#fff!important}

/* --- Clickwrap y consentimiento (2026-08-09) --------------------------- */
.legal-accept{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:12px 14px;border:1px solid #e6e9f0;border-radius:12px;background:#fafbfd;font-size:13px;line-height:1.5;color:#3d4657;cursor:pointer}
.legal-accept input{margin-top:2px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--acento-fg);cursor:pointer}
.legal-accept a{color:var(--acento-fg);font-weight:700}
html.dark .legal-accept{background:#14161F;border-color:#25324c;color:#c3ccdd}
html.dark .legal-accept a{color:var(--acento-fg-osc)}
.consent-txt{display:block;font-size:12px;line-height:1.55;color:#4a5568}
html.dark .consent-txt{color:#a9b4c7}
.profile-check{align-items:flex-start;gap:10px}
.profile-check input{margin-top:3px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--acento-fg)}
.movil-servicios{margin-bottom:6px}

/* --- Contraste resoluble en las cabeceras con degradado (2026-08-09) ------
   El degradado impide que un escáner automático resuelva el color de fondo:
   axe-core caía a #ffffff y reportaba 1.4:1 sobre el rótulo `.eyebrow`, que
   llevaba `style="color:#c7daff"` en línea. Visualmente no era un fallo, pero
   el escáner que usa un bufete demandante SÍ lo cuenta. Se declara un
   background-color sólido bajo el degradado y un color de rótulo legible en
   ambos supuestos. */
.info-hero{background-color:#0a49b8}
.info-hero .eyebrow{color:#e8f0ff}
.info-hero,.info-hero h1,.info-hero h2,.info-hero p,.info-hero .eyebrow{color:#fff!important}
.info-hero p,.info-hero .eyebrow{color:#e8f0ff!important}

/* =====================================================================
   INTER AUTOALOJADA — 2026-08-09
   Antes: `<link>` a fonts.googleapis.com en index.html, ejecutado en TODA
   visita antes de que el usuario tocara nada. Era la única transferencia de
   datos a un tercero que ocurría sin acción del visitante, y contradecía la
   propia política ("no recopilamos datos de navegación").
   Ahora: un único archivo variable (400–900), subconjunto latin + latin-ext
   con los acentos y signos del español, 116 KB, servido desde el propio
   dominio. Cero peticiones externas, cero preconnect, ~150 ms menos de LCP.
   Licencia SIL Open Font 1.1 — uso comercial libre, sin coste.
   ===================================================================== */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;          /* rango variable completo */
  font-display:swap;            /* el texto se ve desde el primer frame */
  src:url('/assets/fonts/InterVariable-latin.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
/* El rótulo `.eyebrow` en rosa de marca sobre blanco daba 3,71:1 (exige 4,5:1).
   Aparece en la portada, en las cabeceras de sección y en las fichas, y varias
   reglas más específicas (`.tech-gallery-head .eyebrow`) lo repintaban de rosa. */
.eyebrow em{color:var(--acento2-fg)!important}
body .eyebrow{color:var(--acento-fg)}
.tech-gallery-head .eyebrow,.section-heading .eyebrow,.page-title .eyebrow{color:var(--acento2-fg)!important}
html.dark body .eyebrow{color:var(--acento-fg-osc)}
html.dark .tech-gallery-head .eyebrow,html.dark .section-heading .eyebrow,html.dark .page-title .eyebrow{color:var(--acento2-fg-osc)!important}
.info-hero .eyebrow,.info-hero .eyebrow em{color:#e8f0ff!important}

/* =====================================================================
   MODO OSCURO — fugas de contraste (2026-08-09)
   `html.dark` redefine --ink, --muted, --line, --paper, --canvas… pero NUNCA
   --blue ni --pink. Resultado: 156 reglas de parcheo a mano y componentes que
   siguen usando el acento claro sobre fondo oscuro. Dos fugas medidas:
     .category-card span  -> var(--blue) #075cff sobre #101a30 = 3,29:1 (falla AA)
     .chip.blue           -> fondo #f7faff, un chip BLANCO pegado en una ficha oscura
   Se separa el acento de TEXTO del acento de FONDO, que es la causa raíz.
   ===================================================================== */
html.dark{
  --blue-fg:var(--acento-fg-osc);   /* acento legible como texto sobre fondo oscuro */
  --pink-fg:var(--acento2-fg-osc);
}
:root{ --blue-fg:var(--acento-fg); --pink-fg:var(--acento2-fg); }

html.dark .category-card span,
html.dark .text-link,
html.dark .breadcrumbs a,
html.dark .crumbs a,
html.dark .summary a,
html.dark .legal-accept a,
html.dark .info-grid a,
html.dark .wa-help a{color:var(--blue-fg)!important}

html.dark .chip.blue{background:#1F2330;border-color:#25324c;color:var(--blue-fg)}
html.dark .chip{background:#1F2330;border-color:#25324c;color:#c3ccdd}
html.dark .avail-dot.avail-ask{background:#1F2330;color:#c3ccdd}
html.dark .avail-dot.avail-out{background:#2a1e0d;color:#f0b45e}

/* --- Conversión: acciones del estado vacío y guardado de carrito (2026-08-09) --- */
.empty-acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.empty-acciones .btn{min-height:44px}
.guardar-carrito{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px}
.search-form select{min-height:44px;border:0;background:transparent;color:inherit;font-size:13px;font-weight:600;padding:0 6px;max-width:180px}
html.dark .search-form select{color:#eef2f9}
.search-form select:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;border-radius:8px}

/* =====================================================================
   ANCHO ÚTIL FLUIDO Y CUADRÍCULA ADAPTATIVA — 2026-08-09 (pedido del dueño)
   Problema: --max estaba fijo en 1320 px y una regla tardía forzaba
   `.product-grid` a 3 columnas. En un monitor de 1920 px eso dejaba ~300 px
   muertos a cada lado y sólo 3 productos por fila.
   Solución: el contenedor crece con la pantalla (sin saltos) y la cuadrícula
   decide cuántas columnas caben según el ancho REAL disponible, no según una
   lista de móviles. Objetivo 4 columnas en un escritorio normal, 2 en teléfono,
   y lo que quepa en cualquier tamaño intermedio o en un ultrapanorámico.
   ===================================================================== */

/* 1. Contenedor fluido: 94% del ancho, con suelo y techo. Sin saltos bruscos. */
:root{ --max:clamp(320px, 94vw, 1760px); }

/* 2. Cuadrícula que se calcula sola.
      --col-min es el ancho mínimo de tarjeta y crece con la pantalla:
      en un teléfono vale 150 px (caben 2), en un portátil ~300 px (caben 4).
      auto-fill reparte el resto; nunca hay una columna a medias. */
.product-grid,
.home-product-grid{
  --col-min:clamp(150px, 21vw, 360px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--col-min)), 1fr))!important;
  gap:clamp(9px, 1.2vw, 20px);
}
.service-grid{
  --col-min:clamp(220px, 24vw, 380px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--col-min)), 1fr));
  gap:clamp(10px, 1.2vw, 18px);
}
.category-grid{
  grid-template-columns:repeat(auto-fill, minmax(min(100%, clamp(88px, 9vw, 150px)), 1fr));
  gap:clamp(8px, .8vw, 12px);
}

/* 3. Bandas intermedias: sin esto el cálculo mete 3 tarjetas de 172 px en un
      tablet pequeño y 4 de 219 px en un portátil de 1024 — ilegibles con
      imagen + título + precio + dos botones dentro. Medido, no supuesto. */
@media (min-width:480px) and (max-width:767px){
  .product-grid,.home-product-grid{--col-min:clamp(180px, 32vw, 260px)}   /* 2 columnas */
}
@media (min-width:768px) and (max-width:1099px){
  .product-grid,.home-product-grid{--col-min:clamp(200px, 27vw, 300px)}   /* 3 columnas */
}

/* 4. El texto NO debe estirarse con el contenedor: una línea de 1500 px es
      ilegible. Las vistas de lectura y la ficha mantienen medida cómoda. */
@media (min-width:1400px){
  .detail-layout,.two-column{max-width:1280px;margin-left:auto;margin-right:auto}
  .legal-content p,.legal-content li,.info-hero p{max-width:78ch}
}

/* El <main> recibe foco por programa al navegar en la SPA (WCAG 2.4.3). Ese
   foco NO debe pintar un contorno alrededor de toda la página: el anuncio de
   la región aria-live ya informa del cambio. Los controles reales conservan su
   indicador de foco intacto. */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{outline:none!important}


/* =====================================================================
   PISO TIPOGRÁFICO REAL — 2026-08-09 (segunda pasada, medida en iPhone 13)
   La primera pasada cubrió una lista escrita a mano y se dejó fuera la
   mayoría. Auditando el DOM renderizado en móvil seguían apareciendo textos
   de 8, 8.6 y 9 px: las etiquetas de la barra inferior (la ÚNICA navegación
   del teléfono), el precio anterior tachado, "Ver servicio", la descripción
   de los servicios y las líneas de confianza.
   Este bloque se generó recorriendo app.css y recogiendo LOS 128 selectores
   que fijan menos de 12 px, para no volver a dejarse ninguno fuera.
   Público adulto, en el teléfono, a menudo al sol. Nada baja de 11 px, y el
   texto corrido no baja de 12 px.
   ===================================================================== */
.acct-lang-group>b,.assurance-bar b,.assurance-bar small,.benefit b,.benefit span,.booking-option span,.booking-panel p,.booking-preview>span{font-size:12px!important}
.booking-types span,.bottom-nav button,.bottom-nav.nav4 button,.cart-item h3,.cart-item p,.cart2-lbl,.cart2-stock,.cart2-trust{font-size:12px!important}
.category-card b,.category-card span,.customer-privacy-note,.customer-summary span,.divider,.filter-row button,.footer-bottom{font-size:12px!important}
.footer-inner a,.footer-inner span,.footer-inner p,.footer-inner b,.footer-soc>b,.gallery-swipe-hint,.header-action small,.help-strip .btn{font-size:12px!important}
.help-strip p,.hero-actions .btn,.hero-support-card li,.hero-support-card p,.hero-support-card small,.hero-trust{font-size:12px!important}
.home-product-grid .product-actions .btn.light,.home-product-grid .product-meta,.install-banner .btn,.install-banner p,.install-quick,.menu-row span{font-size:12px!important}
.mobile-cart,.notice-strip b,.notice-strip p,.order-card-head span,.order-card-head>b,.order-products>div,.payment-option span,.primary-nav a{font-size:12px!important}
.product-actions .add2,.product-actions .btn,.product-actions .btn.buy-now,.product-actions .buy-now,.product-card .product-actions .btn{font-size:12px!important}
.product-card h3,.product-meta,.product-price del,.product-rating,.reference-hero .eyebrow,.reference-hero .hero-actions .btn{font-size:12px!important}
.reference-hero .hero-trust,.reference-home .section-heading p,.reference-home .text-link,.resource-grid b,.resource-grid span,.ribbon-service b{font-size:12px!important}
.ribbon-service small,.search-form select,.section-heading p,.service-card .text-link,.service-card h3,.service-card p,.services-ribbon-title span{font-size:12px!important}
.services-ribbon>.btn,.share-btn,.spec b,.stat-card span,.step,.svc-pick-body .btn,.svc-pick-body p,.tech-gallery-head .eyebrow{font-size:12px!important}
.tech-gallery-head p:not(.eyebrow),.tech-tile-copy small,.text-danger,.text-link,.tracking-form>.muted,.trust-item,.trust-item span,.trust-points span{font-size:12px!important}
.trust-stats span,.update-banner .btn{font-size:12px!important}

/* Insignias y contadores de una o dos palabras: 11 px es suficiente y no
   descuadra la tarjeta. */
.cart-count,.color-swatch,.paybadge,.product-card .discount,.product-card .discount.off,.promo-tx span,.spec span,.step b,.utility,.utility-inner{font-size:11px!important}

/* La barra inferior tenía tres reglas encadenadas (9px, 9.5px y 8.6px en la
   variante de 4 iconos). Es la única navegación en móvil: se fuerza aquí. */
.bottom-nav button,.bottom-nav.nav4 button,.bottom-nav a,
.bottom-nav button span,.bottom-nav.nav4 button span{font-size:11px!important}
.bottom-nav button,.bottom-nav a{min-height:56px}

/* =====================================================================
   PLANTILLAS DE TIENDA — 2026-08-09
   El nº de columnas y la plantilla llegan como atributos del contenedor
   (data-cols / data-plantilla), puestos por render() desde el CMS. Así el
   dueño cambia el aspecto desde SENTINEL sin tocar una línea de código.
   El móvil NO se toca: ahí manda el cálculo fluido, porque en un teléfono
   5 columnas son ilegibles se elija lo que se elija.
   ===================================================================== */
@media (min-width:1100px){
  [data-cols="2"] .product-grid,[data-cols="2"] .home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-cols="3"] .product-grid,[data-cols="3"] .home-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  [data-cols="4"] .product-grid,[data-cols="4"] .home-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  [data-cols="5"] .product-grid,[data-cols="5"] .home-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  [data-cols="6"] .product-grid,[data-cols="6"] .home-product-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  /* Con 5 o 6 por fila la tarjeta se estrecha: se ajusta el interior para que
     el precio y los botones sigan cabiendo sin romperse. */
  [data-cols="5"] .product-card h3,[data-cols="6"] .product-card h3{font-size:13px}
  [data-cols="5"] .product-actions,[data-cols="6"] .product-actions{flex-wrap:wrap}
  [data-cols="6"] .product-price{font-size:17px}
}

/* Plantilla "tienda": sin hero, el catálogo empieza arriba del todo. */
[data-plantilla="tienda"] .reference-home>.page{padding-top:18px}

/* --- Hero de vídeo ---------------------------------------------------- */
.hero-video .hero-media{position:absolute;inset:0;overflow:hidden;background:#0a1020}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-video .hero-inner{position:relative;z-index:2}
/* Velo para que el texto sobre el vídeo mantenga contraste AA pase lo que pase
   en la imagen: sin esto el titular sería ilegible en los fotogramas claros. */
.hero-video .hero-media::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,20,54,.86) 0%,rgba(6,20,54,.66) 46%,rgba(6,20,54,.42) 100%)}
.hero-vid-toggle{position:absolute;right:14px;bottom:14px;z-index:3;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(8,18,40,.72);color:#fff;font-size:13px;line-height:1;
  cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.hero-vid-toggle:hover{background:rgba(8,18,40,.9)}
.hero-vid-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:767px){ .hero-vid-toggle{right:10px;bottom:10px} }

/* =====================================================================
   TEMA DE COLOR Y TIPOGRAFÍA — 2026-08-09
   El dueño elige paleta y letra en SENTINEL → Diseño de tienda. Aquí sólo
   viven los valores por defecto: el tema los sobreescribe inyectando estas
   mismas variables. Se separan DOS tonos por acento a propósito:
     --acento     fondo de botón (texto blanco encima)
     --acento-fg  el MISMO color pero oscurecido lo necesario para leerse
                  como texto sobre blanco (>=4,5:1)
   Sin esa separación, cualquier cambio de color rompería el contraste que
   costó llevar de 37 fallos a 0.
   ===================================================================== */
:root{
  --acento:#0344cf;      --acento-fg:#0344cf;      --acento-fg-osc:#8ab4ff;
  --acento2:#c40656;     --acento2-fg:#c9074f;     --acento2-fg-osc:#ff9ec1;
  --tipo:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --escala:1;
}
body,button,input,select,textarea{font-family:var(--tipo)}
html{font-size:calc(16px * var(--escala))}

/* Los CTA usan el acento configurable en vez del azul y rosa fijos. */
.btn{background:linear-gradient(135deg,var(--acento),color-mix(in srgb,var(--acento) 78%,#fff))}
.btn:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--acento) 82%,#000),var(--acento))}
.btn.pink{background:linear-gradient(135deg,color-mix(in srgb,var(--acento2) 88%,#000),var(--acento2))}
.btn.pink:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--acento2) 74%,#000),color-mix(in srgb,var(--acento2) 88%,#000))}
:root{--focus:var(--acento-fg)}
html.dark{--focus:var(--acento-fg-osc)}

/* Escala tipográfica: "grande" ayuda a clientes mayores y es un ajuste de
   accesibilidad real, no decorativo. Sólo afecta al contenido, no al chrome. */
[data-escala="compacta"]{--escala:.94}
[data-escala="normal"]{--escala:1}
[data-escala="grande"]{--escala:1.12}

/* --- Compartir producto (2026-08-09) ---------------------------------- */
.share-block{margin-top:16px;padding:14px;border:1px solid var(--line,#e4e9f2);border-radius:12px;background:#fafbfd}
html.dark .share-block{background:#14161F;border-color:#25324c}
.share-block>b{display:block;font-size:13px;margin-bottom:9px}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 13px;border-radius:10px;
  border:1px solid var(--line,#e4e9f2);background:#fff;color:#2c3648;font-size:12px;font-weight:700;
  text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,40,80,.1);border-color:#c9d8f5}
.share-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.share-btn .sh-svg,.share-btn .icon{width:16px;height:16px;flex:0 0 auto}
.share-btn .sh-svg{fill:currentColor}
.share-btn.wa{color:#0b6b2f} .share-btn.fb{color:#1146a0} .share-btn.x{color:#111}
.share-btn.tg{color:#1666a6} .share-btn.mail{color:#4a5568} .share-btn.copiar,.share-btn.nativo{color:var(--acento-fg)}
html.dark .share-btn{background:#1F2330;border-color:#2b354e;color:#c3ccdd}
html.dark .share-btn.wa{color:#6ed89b} html.dark .share-btn.fb{color:#8ab4ff}
html.dark .share-btn.x{color:#eef2f9} html.dark .share-btn.tg{color:#8ab4ff}
html.dark .share-btn.mail{color:#a9b4c7} html.dark .share-btn.copiar,html.dark .share-btn.nativo{color:var(--acento-fg-osc)}
.share-nota{display:block;margin-top:9px;color:var(--muted,#4a5568);font-size:12px;line-height:1.5}
.soc.yt{background:#c4302b} .soc.xt{background:#111}

/* =====================================================================
   TODOS LOS CTA BAJO EL TEMA — 2026-08-09 (segunda pasada)
   El dueño avisó de que los botones no cambiaban de color y tenía razón:
   los CTA de la tarjeta de producto y de la ficha llevaban degradados con
   colores CLAVADOS (#7c3aed violeta, #2f6bff, #4f46e5) que ignoraban por
   completo el tema. Eran justo los botones más visibles del catálogo.
   Se quedan fijos, a propósito, sólo los colores de marca ajena: el verde
   de WhatsApp y los de Google y Facebook en el login social. Cambiar esos
   confunde al usuario (y en el caso de los proveedores, va contra sus
   propias normas de uso de marca).
   ===================================================================== */
.product-actions .buy-now,
.product-actions .add-cart,
.btn-buy,
.btn-cart{
  background:linear-gradient(120deg,var(--acento2),var(--acento))!important;
  color:#fff!important;border-color:transparent!important}
.product-actions .buy-now:hover,
.product-actions .add-cart:hover,
.btn-buy:hover,
.btn-cart:hover{
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--acento2) 86%,#000),
    color-mix(in srgb,var(--acento) 86%,#000))!important}
html.dark .btn-cart,html.dark .btn-buy{
  background:linear-gradient(120deg,var(--acento2),var(--acento))!important}

/* El botón secundario en contorno sigue el acento en vez del azul fijo. */
.btn.light,.pink-outline{border-color:color-mix(in srgb,var(--acento) 28%,#fff)}
.btn.light{color:var(--acento-fg)}
html.dark .btn.light{color:var(--acento-fg-osc)}
.chip.blue,.avail-dot:not(.avail-ask):not(.avail-out){color:var(--acento-fg)}

/* Barra de progreso del checkout y elementos activos. */
.step.active{color:var(--acento-fg)}
.step.active b,.step-line.on{background:var(--acento)}
.carr-nav{color:var(--acento-fg)}

/* Las cabeceras con degradado también siguen la paleta: si no, elegir tema
   verde dejaba un hero azul en medio de la portada. */
/* OJO: NO se toca `.reference-hero .hero-media`: ahí va la foto de portada
   (PORTADA.png) y un velo de color la taparía. El velo sólo se aplica al hero
   de VÍDEO, donde hace falta para que el titular se lea sobre las imágenes
   claras del vídeo. */
.reference-hero h1 span{background:linear-gradient(90deg,var(--acento),var(--acento2));
  -webkit-background-clip:text;background-clip:text}
.info-hero{background-color:color-mix(in srgb,var(--acento) 82%,#000);
  background-image:linear-gradient(115deg,var(--acento),color-mix(in srgb,var(--acento) 45%,var(--acento2)) 58%,var(--acento2))}

/* =====================================================================
   RELLENO DE LOS CTA: DEGRADADO O COLOR PLANO — 2026-08-09
   Una sola variable, --relleno, decide el fondo de todos los botones de
   acción. El panel la calcula (degradado entre los dos colores de marca,
   con el ángulo elegido, o color plano) y aquí sólo se usa. Sin esto
   habría que duplicar cada regla para los dos modos.
   Valores por defecto para cuando el CMS no trae nada.
   ===================================================================== */
:root{
  --relleno:linear-gradient(120deg,var(--acento2),var(--acento));
  --relleno2:linear-gradient(120deg,var(--acento),var(--acento2));
  --relleno-hover:linear-gradient(120deg,color-mix(in srgb,var(--acento2) 84%,#000),color-mix(in srgb,var(--acento) 84%,#000));
}
.btn{background:var(--relleno2)!important}
.btn:hover{background:var(--relleno-hover)!important}
.btn.pink{background:var(--relleno)!important}
.btn.pink:hover{background:var(--relleno-hover)!important}
.product-actions .buy-now,.product-actions .add-cart,.btn-buy,.btn-cart,
html.dark .btn-cart,html.dark .btn-buy{background:var(--relleno)!important}
.product-actions .buy-now:hover,.product-actions .add-cart:hover,
.btn-buy:hover,.btn-cart:hover{background:var(--relleno-hover)!important}
/* El fondo blanco/contorno NO se rellena: son secundarios a propósito. */
.btn.light,.btn.ghost{background:#fff!important}
html.dark .btn.light,html.dark .btn.ghost{background:#1F2330!important}
.info-hero{background-image:var(--relleno2)}


/* === ENCUADRE DE FOTOS DE PRODUCTO (2026-08-11) === */
/* El problema: una regla anterior forzaba object-fit:cover en las tarjetas, asi
   que TODA foto que no fuera cuadrada se recortaba sola por donde queria, y el
   mix-blend-mode:multiply ennegrecia las fotos que no tienen fondo blanco.
   Se veia "desajustada" aunque la foto estuviera bien.

   Ahora: caja CUADRADA, fondo blanco y la foto entera dentro (contain). Con las
   fotos ya recortadas desde SENTINEL (boton tijera) llenan la caja sin bordes;
   con las viejas, al menos se ven completas y centradas en vez de cortadas.
   Nada de estirar: deformar un producto en un catalogo es enganar al cliente. */
.product-image{aspect-ratio:1/1;height:auto!important;min-height:0;background:#fff!important;border:1px solid #eef2f7}
.product-image img{width:100%!important;height:100%!important;object-fit:contain!important;padding:6px!important;mix-blend-mode:normal!important;background:#fff}
.gallery{background:#fff!important}
.gallery img,.gallery-main>img,.gallery-thumb img{mix-blend-mode:normal!important;background:#fff}
.cart-thumb img,.cart2-thumb img{object-fit:contain!important;mix-blend-mode:normal!important;background:#fff}
.service-hero-art{background-image:url('/images/services/brand-van.jpg');background-position:center}


/* ===========================================================================
   ESCAPARATE DE SERVICIOS (2026-08-16)
   Antes: `services-ribbon` — siete celdas de 10 px con la MISMA foto genérica
   repetida y el título repetido como descripción. Se leía apagado porque no
   había nada que mirar ni nada que decidir.
   Ahora: tarjeta con la foto REAL del servicio (la que se sube desde SENTINEL),
   el precio desde, el canal (remoto / a domicilio) y dos acciones. La foto
   manda: 4:3, `cover`, y oscurecida abajo para que la etiqueta se lea sobre
   cualquier imagen.
   =========================================================================== */
.home-services .section-heading.centered h2{font-size:30px;letter-spacing:-.6px}
.svc-sell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-sell{display:flex;flex-direction:column;background:#fff;border:1px solid #dfe6f0;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(26,54,100,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.svc-sell:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(26,54,100,.13);border-color:#c9d6e8}
.svc-sell-art{position:relative;display:block;aspect-ratio:4/3;background:#0b1220;overflow:hidden}
.svc-sell-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;mix-blend-mode:normal!important;transition:transform .5s ease}
.svc-sell:hover .svc-sell-art img{transform:scale(1.05)}
.svc-sell-art::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(to top,rgba(6,11,25,.78),transparent);pointer-events:none}
.svc-chan{position:absolute;left:12px;bottom:11px;z-index:2;color:#fff;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px}
.svc-sell-body{display:flex;flex-direction:column;gap:8px;padding:16px 17px 17px;flex:1}
.svc-sell-body h3{margin:0;font-size:17px;line-height:1.25;letter-spacing:-.3px}
.svc-sell-price{font-size:22px;font-weight:900;color:var(--pink,#e11d67);line-height:1}
.svc-sell-price small{display:inline-block;margin-right:5px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.svc-sell-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;flex:1}
.svc-sell-cta{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:4px}
.svc-sell-cta .btn{min-height:0;padding:10px 14px;font-size:13px;white-space:nowrap;justify-content:center}
.svc-sell-foot{display:flex;justify-content:center;margin-top:20px}
@media(max-width:1100px){.svc-sell-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:720px){.svc-sell-grid{grid-template-columns:1fr 1fr;gap:11px}.svc-sell-body{padding:12px 12px 13px;gap:6px}.svc-sell-body h3{font-size:14px}.svc-sell-price{font-size:18px}.svc-sell-body p{font-size:11.5px}.svc-sell-cta{grid-template-columns:1fr}.svc-sell-cta .btn{padding:9px 10px;font-size:12px}.svc-chan{font-size:9px;padding:3px 8px;left:8px;bottom:8px}}
@media(prefers-color-scheme:dark){.svc-sell{background:#fff}}


/* Servicio SIN fotografía todavía: el marcador de marca se muestra ENTERO.
   Con foto real hace falta `cover` (llenar la caja) y el degradado inferior
   para que el chip de canal se lea encima de cualquier imagen. Con el marcador
   las dos cosas estorban: `cover` le corta el pie y el degradado lo ensucia. */
.svc-sell-art.sin-foto img,.service-art.sin-foto img{object-fit:contain;background:#f7f9fc}
.svc-sell-art.sin-foto::after,.service-art.sin-foto::after{display:none}
.svc-sell-art.sin-foto .svc-chan{background:rgba(15,23,42,.72);border-color:rgba(15,23,42,.25);backdrop-filter:none}


/* ===========================================================================
   CRITERIO DE ALINEACION EN SERVICIOS (2026-08-18)
   Titulo y precio CENTRADOS — son etiquetas cortas y así las tres columnas
   quedan alineadas entre sí aunque midan distinto.
   Descripciones y características JUSTIFICADAS — son texto corrido: el borde
   derecho recto hace que la tarjeta se lea como un bloque y no como un
   recorte. Se activa la partición de palabras para que el justificado no abra
   huecos feos en columnas estrechas.
   =========================================================================== */
.svc-sell-body{text-align:center;align-items:center}
.svc-sell-body h3,.svc-sell-body .svc-sell-price{width:100%;text-align:center}
.svc-sell-body p{width:100%;text-align:justify;text-justify:inter-word;hyphens:auto}
.svc-sell-cta{width:100%}

/* Ficha del servicio: las características y el texto largo, justificados. */
.detail-info .feat-list li,.panel .feat-list li,.panel>p.muted,.service-card p{
  text-align:justify;text-justify:inter-word;hyphens:auto}
.detail-price,.service-price{text-align:center}

@media(max-width:520px){
  /* En columna muy estrecha el justificado abre calles blancas: se desactiva. */
  .svc-pick-body p,.svc-sell-body p{text-align:left;hyphens:manual}
}


/* ===========================================================================
   CENTRADOS DE VERDAD (2026-08-18)

   1. EL PRECIO no se centraba aunque tuviera `text-align:center`, y la causa
      no era obvia: `.service-price` es `display:inline-flex`. En un contenedor
      flex el contenido se coloca con `justify-content`, no con `text-align`.
      Como ademas se le dio `width:100%`, la pildora ocupaba todo el ancho y el
      texto se quedaba pegado a la izquierda. Se centra con `justify-content`.

   2. `.section-heading.centered` SOLO centraba dentro de `.reference-home`
      (la portada). En /calendario, /servicios y el resto, la clase estaba
      puesta en el HTML pero no hacia nada. Ahora centra en cualquier sitio;
      la regla de la portada, mas especifica, sigue mandando alli.
   =========================================================================== */
.svc-pick-body .service-price,.svc-sell-body .svc-sell-price{justify-content:center}

.section-heading.centered{text-align:center}
.section-heading.centered>div{margin-left:auto;margin-right:auto}
.section-heading.centered h2::after{margin-left:auto;margin-right:auto}


/* ===========================================================================
   VENTANA FLOTANTE DEL SERVICIO (2026-08-18)
   Se abre encima de la pagina: se ve la foto grande, el precio y lo que
   incluye, y al cerrar sigues donde estabas. Antes te sacaba a otra pagina.
   =========================================================================== */
.svc-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,11,25,.62);backdrop-filter:blur(3px);animation:svc-fade .18s ease}
@keyframes svc-fade{from{opacity:0}to{opacity:1}}
.svc-modal-panel{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;
  border-radius:20px;box-shadow:0 30px 80px rgba(6,11,25,.45);animation:svc-up .22s cubic-bezier(.2,.8,.3,1)}
@keyframes svc-up{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.svc-modal-x{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;
  cursor:pointer;font-size:15px;line-height:1;color:#fff;background:rgba(9,16,33,.55);backdrop-filter:blur(4px)}
.svc-modal-x:hover{background:rgba(9,16,33,.8)}
.svc-modal-art{position:relative;aspect-ratio:16/9;background:#0b1220;overflow:hidden;border-radius:20px 20px 0 0}
.svc-modal-art img{width:100%;height:100%;object-fit:cover;display:block}
.svc-modal-art.sin-foto img{object-fit:contain;background:#f7f9fc}
.svc-modal-art::after{content:'';position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(to top,rgba(6,11,25,.7),transparent)}
.svc-modal-art.sin-foto::after{display:none}
.svc-modal-art .svc-chan{position:absolute;left:14px;bottom:12px;z-index:2}
.svc-modal-body{padding:20px 22px 22px;text-align:center}
.svc-modal-body h2{margin:0 0 6px;font-size:23px;letter-spacing:-.4px}
.svc-modal-cat{display:inline-block;margin-bottom:8px;padding:2px 10px;border-radius:999px;font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--blue);background:rgba(7,92,255,.1)}
.svc-modal-price{display:flex;justify-content:center;align-items:baseline;gap:6px;margin:4px 0 10px;
  font-size:27px;font-weight:900;color:var(--pink,#e11d67)}
.svc-modal-price small{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.svc-modal-body p{margin:0 0 12px;color:var(--muted);font-size:13.5px;line-height:1.6;text-align:justify;text-justify:inter-word}
.svc-modal-feats{margin:0 0 12px;padding:0;list-style:none;text-align:left}
.svc-modal-feats li{position:relative;padding:4px 0 4px 24px;font-size:13px;line-height:1.5}
.svc-modal-feats li::before{content:'✓';position:absolute;left:2px;color:#16a34a;font-weight:900}
.svc-modal-nota{margin-bottom:12px;padding:8px 12px;border-radius:10px;font-size:12px;color:#0f766e;background:rgba(16,185,129,.1)}
.svc-modal-cta{display:grid;grid-template-columns:1fr auto;gap:9px}
.svc-modal-cta .btn{justify-content:center;min-height:44px}
.svc-modal-mas{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--blue);text-decoration:none}
.svc-modal-mas:hover{text-decoration:underline}
@media(max-width:560px){
  .svc-modal{padding:0;align-items:flex-end}
  .svc-modal-panel{width:100%;max-height:94vh;border-radius:20px 20px 0 0}
  .svc-modal-art{border-radius:20px 20px 0 0;aspect-ratio:3/2}
  .svc-modal-cta{grid-template-columns:1fr}
  .svc-modal-body p{text-align:left}
}
@media(prefers-reduced-motion:reduce){.svc-modal,.svc-modal-panel{animation:none}}

/* Marca de campo no obligatorio, para que se vea sin leer el asterisco. */
.field .op{font-weight:600;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}



/* BARRA DE CANAL (2026-08-18). Solo aparece cuando NO hay servicio elegido; en
   la pagina de reserva no existe. Dice donde estas (segmento activo) y deja
   cambiar de canal en un clic, en vez de obligar a retroceder dos pantallas. */
.svc-switch{display:grid;grid-template-columns:1fr 1fr;width:max-content;gap:6px;margin:18px auto 0;padding:6px;
  border:1px solid #e3eaf5;border-radius:20px;background:#f4f7fc;
  box-shadow:inset 0 1px 2px rgba(21,36,63,.04)}
.svc-switch-op{display:flex;align-items:center;gap:11px;min-width:236px;padding:11px 18px;
  border-radius:15px;color:#5b6b86;text-decoration:none;text-align:left;
  transition:background .22s,color .22s,box-shadow .22s,transform .22s}
.svc-switch-op:hover{background:rgba(255,255,255,.75);color:var(--blue);transform:translateY(-1px)}
.svc-switch-op.on{background:linear-gradient(120deg,#0355f5,#7c3aed);color:#fff;
  box-shadow:0 10px 22px rgba(7,45,140,.26)}
.svc-switch-op.on:hover{transform:none;color:#fff}
.svc-switch-ic{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:11px;
  background:#e8effb;color:var(--blue)}
.svc-switch-op.on .svc-switch-ic{background:rgba(255,255,255,.2);color:#fff}
.svc-switch-tx{display:block;line-height:1.25}
.svc-switch-tx b{display:block;font-size:13.5px;font-weight:800}
.svc-switch-tx small{display:block;margin-top:2px;font-size:11px;opacity:.75}
html.dark .svc-switch{background:#14161F;border-color:#22304d;box-shadow:none}
html.dark .svc-switch-op{color:#9db0d0}
html.dark .svc-switch-op:hover{background:rgba(255,255,255,.05)}
html.dark .svc-switch-ic{background:#1F2330;color:#7aa5ff}
@media(max-width:767px){
  .svc-switch{grid-template-columns:1fr;width:100%;gap:5px;padding:5px;border-radius:16px}
  .svc-switch-op{min-width:0;padding:9px 12px;border-radius:12px}
  .svc-switch-tx b{font-size:12.5px}
  .svc-switch-tx small{font-size:10px}
}

/* ==========================================================================
   SELECTOR UNICO DE SERVICIOS (2026-08-18). Sustituye a la tarjeta fija
   `.booking-sel`, que solo sabia ensenar UN servicio y no dejaba tocarlo.
   Ahora: comanda con varios servicios, quitar uno a uno, y un desplegable
   <details> con el catalogo agrupado por canal.
   ========================================================================== */
.svc-sel{margin-bottom:16px;padding:12px;border:1px solid #dbe6fb;border-radius:16px;
  background:linear-gradient(120deg,rgba(7,92,255,.05),rgba(124,58,237,.05))}
.svc-sel-lista{display:grid;gap:8px}
.svc-sel-item{display:flex;align-items:center;gap:11px;padding:8px;border:1px solid #e4ecfb;
  border-radius:12px;background:#fff}
.svc-sel-item img{width:64px;height:44px;flex:0 0 64px;object-fit:cover;border-radius:9px;background:#f1f5fb}
.svc-sel-item-tx{flex:1;min-width:0}
.svc-sel-item-tx b{display:block;font-size:13.5px;line-height:1.3}
.svc-sel-item-tx>span{display:block;margin-top:2px;color:var(--blue);font-size:12px;font-weight:800}
.svc-sel-x{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#f4f7fc;color:#8496b3;font-size:19px;line-height:1;text-decoration:none;
  transition:background .18s,color .18s}
.svc-sel-x:hover{background:#ffe9ec;color:#e11d48}
.svc-sel-suma{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:9px;border-top:1px dashed #cfdcf3;color:var(--muted);font-size:12.5px;font-weight:700}
.svc-sel-suma b{color:var(--pink);font-size:15px;font-weight:900}
.svc-sel-vacio{display:flex;gap:9px;align-items:flex-start;padding:2px 2px 10px;color:var(--muted);
  font-size:13px;line-height:1.55}
.svc-sel-vacio .icon{flex:0 0 auto;margin-top:2px;color:var(--blue)}
.svc-sel-mas{margin-top:10px}
.svc-sel-mas>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border:1px dashed #b9cdf0;border-radius:11px;background:#fff;color:var(--blue);
  font-size:12.5px;font-weight:800;transition:border-color .18s,background .18s}
.svc-sel-mas>summary::-webkit-details-marker{display:none}
.svc-sel-mas>summary:hover{border-color:var(--blue);background:#f5f9ff}
.svc-sel-menu{margin-top:10px;padding:11px;border:1px solid #e4ecfb;border-radius:13px;background:#fff;
  max-height:370px;overflow:auto}
.svc-sel-grupo+.svc-sel-grupo{margin-top:13px;padding-top:13px;border-top:1px solid #eef2f9}
.svc-sel-grupo-tit b{font-size:12.5px}
.svc-sel-grupo-tit small{margin-left:7px;color:var(--muted);font-size:11px}
.svc-sel-ops{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.svc-sel-op{display:flex;align-items:center;gap:9px;padding:7px;border:1px solid #eaf0fa;border-radius:10px;
  color:inherit;text-decoration:none;transition:border-color .18s,background .18s}
.svc-sel-op:hover{border-color:#b9cdf0;background:#f7faff}
.svc-sel-op.on{border-color:rgba(22,163,74,.45);background:#f2fdf6}
.svc-sel-op img{width:46px;height:34px;flex:0 0 46px;object-fit:cover;border-radius:7px;background:#f1f5fb}
.svc-sel-op-tx{flex:1;min-width:0}
.svc-sel-op-tx b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-sel-op-tx small{display:block;margin-top:1px;color:var(--muted);font-size:10.5px}
.svc-sel-mark{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#eef4ff;color:var(--blue);font-size:13px;font-weight:900}
.svc-sel-op.on .svc-sel-mark{background:#dcfce7;color:#16a34a}
.svc-sel-nota{display:flex;gap:9px;align-items:flex-start;margin-bottom:14px;padding:10px 13px;
  border:1px solid #ffe0b2;border-radius:12px;background:#fffaf0;color:#8a6320;font-size:12.5px;line-height:1.55}
.svc-sel-nota .icon{flex:0 0 auto;margin-top:2px;color:#d98324}
html.dark .svc-sel{border-color:#22304d;background:#14161F}
html.dark .svc-sel-item,html.dark .svc-sel-menu,html.dark .svc-sel-mas>summary{background:#14161F;border-color:#22304e}
html.dark .svc-sel-item-tx b{color:#e9effa}
html.dark .svc-sel-x{background:#1F2330;color:#8fa1c0}
html.dark .svc-sel-op{border-color:#1e2b47}
html.dark .svc-sel-op:hover{background:#1F2330;border-color:#2c4270}
html.dark .svc-sel-op.on{background:rgba(22,163,74,.12)}
html.dark .svc-sel-mark{background:#1F2330;color:#7aa5ff}
html.dark .svc-sel-suma{border-top-color:#22304e}
html.dark .svc-sel-nota{background:rgba(217,131,36,.1);border-color:rgba(217,131,36,.35);color:#e8c08a}
@media(max-width:767px){
  .svc-sel{padding:10px;border-radius:14px}
  .svc-sel-item img{width:54px;height:38px;flex-basis:54px}
  .svc-sel-item-tx b{font-size:12.5px}
  .svc-sel-ops{grid-template-columns:1fr}
  .svc-sel-menu{max-height:320px}
}

/* Titulo simple (2026-08-19, pedido del dueno): sin antetitulo y en mayusculas.
   El antetitulo "SERVICIOS" repetia lo que ya decia el menu y el titulo. */
.page-title.simple h1{text-transform:uppercase;letter-spacing:-.6px}
.page-title.simple p{max-width:900px;margin-top:7px}

/* ==========================================================================
   RESERVA EN DOS COLUMNAS (2026-08-19). El formulario crecia a lo alto y
   obligaba a bajar la barra para llegar al boton de enviar: el problema a la
   izquierda, la cita (fecha, horario y lugar) a la derecha. En movil vuelve a
   una sola columna, que es lo unico que cabe.
   ========================================================================== */
.reserva-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.reserva-cols .campo-problema{display:flex;flex-direction:column}
.reserva-cols .campo-problema textarea{flex:1;min-height:186px;resize:vertical}
.reserva-cols .form-row{margin-bottom:0}
@media(max-width:900px){
  .reserva-cols{grid-template-columns:1fr;gap:0}
  .reserva-cols .campo-problema textarea{min-height:110px}
}

/* QUE INCLUYE EL SERVICIO. Va en el panel de la derecha, que hasta ahora solo
   repetia "como funciona": el cliente no sabia que estaba pidiendo. */
.svc-alcance{margin-top:18px;padding-top:16px;border-top:1px solid #e6ecf6}
.svc-alcance h2{margin:0 0 12px;font-size:17px}
.svc-alcance-item{margin-bottom:14px}
.svc-alcance-item>b{display:block;margin-bottom:7px;font-size:13.5px;color:var(--blue)}
.svc-alcance-item ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.svc-alcance-item li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:#48566e}
.svc-alcance-item li .icon{flex:0 0 auto;width:15px;margin-top:2px;color:#16a34a}
.svc-alcance-gen{display:block;margin-top:7px;color:#8794aa;font-size:11px;line-height:1.5}
.svc-alcance-vacio{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.svc-alcance-avisos{display:grid;gap:9px;margin-top:14px}
.svc-aviso{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #e6ecf6;
  border-radius:12px;background:#f8fafd}
.svc-aviso .icon{flex:0 0 auto;width:16px;margin-top:2px;color:var(--blue)}
.svc-aviso>div>b{display:block;font-size:12.5px}
/* El `display:block` era para el titulo del aviso; sin acotarlo partia en
   tres lineas las negritas de dentro del parrafo. */
.svc-aviso p b{display:inline;font-size:inherit;font-weight:800}
.svc-aviso p{margin:3px 0 0;color:#5b6b86;font-size:11.5px;line-height:1.55}
html.dark .svc-alcance{border-top-color:#22304e}
html.dark .svc-alcance-item li{color:#9db0d0}
html.dark .svc-aviso{background:#14161F;border-color:#22304e}
html.dark .svc-aviso p{color:#93a5c4}
html.dark .svc-aviso>div>b{color:#e9effa}

/* ==========================================================================
   TODO EN UNA PANTALLA — pantalla de reserva (2026-08-19).
   Aqui el alto manda: si el boton de enviar cae debajo del pliegue, se pierde
   la solicitud. Se ensancha la pagina, la linea de tiempo pasa a horizontal
   (ocupaba tres lineas para decir tres frases cortas) y los dos avisos de
   alcance se ponen uno al lado del otro. Solo en esta pantalla y solo en
   escritorio: en movil nada de esto cabe y se queda como estaba.
   ========================================================================== */
@media(min-width:1100px){
  .is-reserva .page{max-width:1480px}
  .is-reserva .two-column{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:18px}
  .is-reserva .page-title{margin-bottom:14px}
  .is-reserva .page-title h1{font-size:29px}
  .is-reserva .panel{padding:18px}
  .is-reserva .reserva-cols .campo-problema textarea{min-height:150px}
  /* Linea de tiempo horizontal: el conector pasa de vertical a horizontal. */
  .is-reserva .timeline{grid-template-columns:repeat(3,1fr);gap:12px}
  .is-reserva .timeline-item{padding:22px 8px 0 0}
  .is-reserva .timeline-item:before{left:0;top:4px}
  .is-reserva .timeline-item:after{left:16px;right:-12px;top:8px;bottom:auto;width:auto;height:1px}
  .is-reserva .svc-alcance{margin-top:14px;padding-top:13px}
  .is-reserva .svc-alcance-avisos{grid-template-columns:1fr 1fr}
  .is-reserva .legal-accept{margin-top:12px;padding:10px 12px;font-size:12.5px}
  /* Ultimos 40 px: con esto entra tambien en portatiles de pantalla corta. */
  .is-reserva .panel h2{margin-bottom:11px;font-size:17px}
  .is-reserva .notice-strip{padding:10px 12px}
  .is-reserva .svc-alcance-item ul{gap:5px}
  .is-reserva .svc-alcance-item{margin-bottom:10px}
  .is-reserva .svc-aviso{padding:9px 11px}
  .is-reserva .field{margin-bottom:11px}
}

/* Numero de solicitud en la pantalla de confirmacion. Es lo unico que el
   cliente tiene que guardar, asi que se ve como lo que es: un folio. */
.folio{margin:16px 0 12px;padding:14px;border:1px dashed #c9b6f5;border-radius:14px;
  background:linear-gradient(120deg,rgba(109,40,217,.07),rgba(214,64,158,.07));
  color:#5b21b6;font-size:22px;font-weight:900;letter-spacing:.5px;text-align:center}
.folio-nota{display:flex;gap:9px;align-items:flex-start;margin-bottom:16px;padding:11px 13px;
  border:1px solid #e6ecf6;border-radius:12px;background:#f8fafd;color:#5b6b86;
  font-size:12.5px;line-height:1.55;text-align:left}
.folio-nota .icon{flex:0 0 auto;margin-top:2px;color:var(--blue)}
html.dark .folio{background:rgba(124,58,237,.12);border-color:#4c3a7a;color:#c4b5fd}
html.dark .folio-nota{background:#14161F;border-color:#22304e;color:#93a5c4}

/* Puerta de cuenta antes de la reserva (2026-08-19). Se ensena QUE eligio para
   que entrar no parezca perder el camino andado. */
.auth-card .gate-sel{display:grid;gap:6px;margin:0 0 18px;padding:11px 13px;border:1px solid #dbe6fb;
  border-radius:12px;background:linear-gradient(120deg,rgba(7,92,255,.05),rgba(124,58,237,.05));text-align:left}
.auth-card .gate-sel span{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:700;color:#334155}
.auth-card .gate-sel .icon{color:#16a34a;flex:0 0 auto}
.auth-card .gate-nota{display:block;margin-top:12px;color:var(--muted);font-size:11.5px}
.campo-nota{display:block;margin-top:5px;color:var(--muted);font-size:11px}
html.dark .auth-card .gate-sel{background:#14161F;border-color:#22304d}
html.dark .auth-card .gate-sel span{color:#c3ccdd}

/* ===== PANTALLA DE CUENTA FLOTANTE — 2026-08-21 ==========================
   Pedido del dueno: «al dar clic en Mi cuenta tiene que salir una pantalla
   flotante completa, centrada, sin que se vea menu ni inicio ni nada, para que
   se vea entera sin pasar ninguna barra».

   Se activa con la clase `ez-auth-modal` en el <body>, que pone `render()` solo
   en las rutas de entrar/registrarse/recuperar y solo mientras NO hay sesion.

   `overflow:auto` en el propio panel y no en el body: en un portatil bajo, o en
   un movil con el teclado abierto, la tarjeta se desplaza por dentro y el fondo
   se queda quieto. `100dvh` porque en los moviles `100vh` se mete debajo de la
   barra del navegador y corta el ultimo boton. */
body.ez-auth-modal { overflow: hidden; }

/* POR QUE LA PRIMERA VERSION SE QUEDABA ENCAJADA BAJO EL MENU (2026-08-21).

   `position: fixed` NO se posiciona respecto a la ventana si algun ANCESTRO
   tiene `transform`, `filter` o `perspective`: pasa a posicionarse respecto a
   ese ancestro. Y `fxReveal()` anima las secciones con `transform` al navegar.
   Resultado: la tarjeta quedaba atrapada dentro del flujo de la pagina, debajo
   de la barra de menu y con la pagina desplazandose por detras.

   Aqui se anulan esas propiedades en toda la cadena mientras el modal esta
   abierto. Es la unica forma de que `fixed` signifique de verdad "pegado a la
   ventana". */
body.ez-auth-modal .app-shell,
body.ez-auth-modal .app-shell > *,
body.ez-auth-modal main,
body.ez-auth-modal .page,
body.ez-auth-modal .auth-wrap,
body.ez-auth-modal .auth-card {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* Y el contenedor deja de crear su propio contexto de apilamiento. */
body.ez-auth-modal .app-shell { position: static !important; }
body.ez-auth-modal .page { padding: 0 !important; margin: 0 !important; }
/* Nada de la pagina se ve detras: solo el velo y la tarjeta. */
body.ez-auth-modal .app-shell > main > *:not(.auth-wrap) { display: none !important; }
body.ez-auth-modal .desktop-header,
body.ez-auth-modal .mobile-header,
body.ez-auth-modal .site-footer,
body.ez-auth-modal .bottom-nav,
body.ez-auth-modal .wa-float,
body.ez-auth-modal .install-banner,
body.ez-auth-modal .install-float { display: none !important; }

body.ez-auth-modal .app-shell::before {
  content: "";
  position: fixed; inset: 0; z-index: 2147483000;
  background: radial-gradient(120% 120% at 50% 0%, rgba(9, 30, 74, .72), rgba(4, 12, 32, .88));
  backdrop-filter: blur(3px);
}

body.ez-auth-modal .auth-wrap {
  position: fixed; inset: 0; z-index: 2147483001;
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 18px;
  overflow: auto;                 /* se desplaza la tarjeta, no la pagina */
  -webkit-overflow-scrolling: touch;
}

body.ez-auth-modal .auth-card {
  width: 100%; max-width: 430px;
  max-height: calc(100dvh - 36px);
  overflow: auto;
  margin: auto;                   /* centrada aunque sea mas alta que la ventana */
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: #fff;
  padding: 26px 24px 22px;
  box-shadow: 0 28px 70px rgba(3, 14, 40, .45);
}

/* En movil ocupa el ancho util y se pega abajo, como una hoja: el pulgar llega
   a los botones sin estirarse. */
@media (max-width: 767px) {
  body.ez-auth-modal .auth-wrap { padding: 10px; align-items: flex-end; }
  body.ez-auth-modal .auth-card {
    max-width: none; border-radius: 18px; padding: 20px 16px 18px;
    max-height: calc(100dvh - 20px);
  }
}

/* La X de la pantalla flotante de cuenta. Va fuera de la tarjeta, arriba a la
   derecha, para que no compita con el formulario. Una ventana sin salida
   obliga a usar el boton atras del navegador, y en una PWA instalada ese boton
   a veces ni existe. */
body.ez-auth-modal .ez-auth-x {
  position: fixed; top: 16px; right: 18px; z-index: 2147483002;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
body.ez-auth-modal .ez-auth-x:hover { background: rgba(255, 255, 255, .24); transform: scale(1.06); }
@media (max-width: 767px) {
  body.ez-auth-modal .ez-auth-x { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* ===== MENU DE MI CUENTA — 2026-08-21 ===================================
   Con sesion abierta, «Mi cuenta» despliega dos opciones: Perfil y Cerrar
   sesion. Antes, para salir habia que entrar al panel y buscar el boton
   dentro; en un equipo compartido eso es justo lo que nadie hace. */
.ez-cuenta-menu { position: relative; padding: 0 !important; }
.ez-cuenta-btn {
  display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; color: inherit;
  font: inherit; cursor: pointer; padding: 6px 8px; text-align: left;
}
.ez-cuenta-btn span { display: flex; flex-direction: column; line-height: 1.15; }
.ez-cuenta-btn small { color: var(--muted); font-size: 10px; }

.ez-cuenta-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 208px;
  border: 1px solid #e4e9f1; border-radius: 13px;
  background: #fff; padding: 6px;
  box-shadow: 0 16px 40px rgba(21, 36, 63, .18);
  display: flex; flex-direction: column; gap: 2px;
}
.ez-cuenta-pop[hidden] { display: none; }
.ez-cuenta-pop a,
.ez-cuenta-pop button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink);
  padding: 10px 11px; font: inherit; font-size: 13px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.ez-cuenta-pop a:hover,
.ez-cuenta-pop button:hover { background: #f2f6fd; color: var(--blue); }
/* Cerrar sesion se distingue: es la accion que no se deshace con un clic. */
.ez-cuenta-pop button[data-logout] { color: var(--pink); }
.ez-cuenta-pop button[data-logout]:hover { background: #fff1f6; color: var(--pink); }

@media (max-width: 767px) {
  .ez-cuenta-pop { right: 8px; min-width: 190px; }
}

/* ===================================================================
   MI PERFIL  (2026-08-21)
   La pantalla pasó de ser un formulario suelto a la cuenta del cliente:
   datos personales, clave, formas de pago e historial real. Se apila en
   una columna y el historial acompaña a la derecha, pegado al scroll,
   para que no haya que subir a buscarlo.
   =================================================================== */
.perfil-layout > section { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.perfil-layout > section > .panel, .perfil-layout > .panel { margin: 0; }
.perfil-layout h2 { margin-top: 0; }
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.perfil-pagos .spec-list { grid-template-columns: 1fr; gap: 12px; }
.perfil-clave .form-row { margin-top: 10px; }
.perfil-historial { align-self: start; position: sticky; top: 96px; }
.perfil-historial .acct-live { max-height: 62vh; overflow-y: auto; }
.perfil-historial .text-danger { display: block; width: 100%; text-align: center; }
@media (max-width: 900px) {
  .perfil-historial { position: static; }
  .perfil-historial .acct-live { max-height: none; }
}

/* ===================================================================
   BUSCADOR MÁS ANCHO Y CENTRADO  (2026-08-21, pedido del dueño)
   Antes quedaba pegado al logo y sobraba medio encabezado a su derecha,
   porque `.header-actions` se llevaba TODO el espacio libre con su
   `margin-left:auto`. Ahora el espacio sobrante se reparte a los dos
   lados de la barra y la barra crece hasta 880px.
   =================================================================== */
.head-main .search-form { flex: 1 1 auto; max-width: 880px; margin-left: auto; margin-right: auto; }
.head-main .header-actions { margin-left: 0; }
@media (max-width: 1180px) { .head-main .search-form { max-width: 620px; } }

/* ===================================================================
   /SERVICIOS — «ELIGE CÓMO PODEMOS AYUDARTE»   (2026-08-21)

   Diseño exacto que mandó el dueño: hero fuera, título centrado, dos
   tarjetas con la foto velada y el nombre encima en grande, tres
   ventajas con icono, una caja de refuerzo con dos remates, botón a
   todo el ancho, una «O» entre las dos, y abajo UNA sola pieza de
   confianza con cuatro apartados separados por línea fina.

   Antes «no se apreciaban»: mismo gris del fondo, foto de 190px que
   cortaba la cabeza del técnico y letra de 13px; las cuatro de abajo
   iban a 10px, como una nota al pie.
   =================================================================== */
.svc-duo { padding-top: 6px; }
.svc-duo .section-heading.centered h2 { font-size: 34px; font-weight: 800; letter-spacing: -.8px; text-transform: none; }
.svc-duo .section-heading.centered p { margin-top: 7px; font-size: 15px; }
.svc-duo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); gap: 0; align-items: stretch; }

/* La «O»: son dos caminos para lo mismo, no dos productos que se suman. */
.svc-duo-o { position: relative; display: grid; place-items: center; }
.svc-duo-o::before { content: ""; position: absolute; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, transparent, #dde5f3 14%, #dde5f3 86%, transparent); }
.svc-duo-o span { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #e4eaf6; color: #1f2d4d; font-weight: 800; font-size: 17px; box-shadow: 0 8px 20px rgba(7, 25, 66, .09); }

.svc-duo-card { position: relative; display: flex; flex-direction: column; gap: 0; overflow: hidden; border: 1px solid #e4ebf7; border-radius: 20px; background: #fff; padding: 0 0 26px; box-shadow: 0 14px 38px rgba(7, 25, 66, .09); }
.svc-duo-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(7, 25, 66, .16); }

/* --- cabecera con foto --- */
.svc-duo-card .svc-duo-top { position: relative; height: 282px; overflow: hidden; }
.svc-duo-card .svc-duo-art { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.svc-duo-card .svc-duo-veil { position: absolute; inset: 0; background: linear-gradient(103deg, rgba(9, 24, 72, .95) 0%, rgba(9, 24, 72, .74) 36%, rgba(9, 24, 72, .14) 72%, rgba(9, 24, 72, 0) 100%); }
.svc-duo-card.visit .svc-duo-veil { background: linear-gradient(103deg, rgba(116, 12, 68, .95) 0%, rgba(116, 12, 68, .72) 36%, rgba(116, 12, 68, .12) 72%, rgba(116, 12, 68, 0) 100%); }
.svc-duo-card .svc-duo-icon { position: absolute; top: 24px; left: 26px; margin: 0; width: 78px; height: 78px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .92); background: linear-gradient(135deg, #2f5bea, #5b8dff); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); display: grid; place-items: center; color: #fff; z-index: 2; }
.svc-duo-card.visit .svc-duo-icon { background: linear-gradient(135deg, #e11d6b, #a21caf); }
.svc-duo-card .svc-duo-icon .icon { width: 34px; height: 34px; color: #fff; }
.svc-duo-card .svc-duo-top h3 { position: absolute; left: 26px; right: 26px; bottom: 78px; margin: 0; z-index: 2; color: #fff; font-size: 35px; line-height: 1.02; font-weight: 800; letter-spacing: -.5px; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, .38); }
.svc-duo-card .svc-duo-pill { position: absolute; left: 26px; bottom: 24px; z-index: 2; display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; background: #2f5bea; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.svc-duo-card.visit .svc-duo-pill { background: #e11d6b; }

/* --- ventajas --- */
.svc-duo-card .svc-duo-feats { list-style: none; margin: 24px 26px 0; padding: 0; display: grid; gap: 19px; }
.svc-duo-card .svc-duo-feats li { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; font-weight: 400; color: inherit; }
.svc-duo-card .svc-f-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(47, 91, 234, .1); color: #2f5bea; }
.svc-duo-card.visit .svc-f-ic { background: rgba(225, 29, 107, .1); color: #e11d6b; }
.svc-duo-card .svc-f-ic .icon { width: 19px; height: 19px; color: inherit; }
.svc-duo-card .svc-duo-feats b, .svc-duo-card .svc-remate b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: #0f1e3c; }
.svc-duo-card .svc-duo-feats li > div > span, .svc-duo-card .svc-remate > div > span { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; line-height: 1.52; color: #64748b; }

/* --- caja de refuerzo --- */
.svc-duo-card .svc-duo-extra { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 26px 0; border: 1px solid rgba(47, 91, 234, .2); background: rgba(47, 91, 234, .05); border-radius: 14px; overflow: hidden; }
.svc-duo-card.visit .svc-duo-extra { border-color: rgba(225, 29, 107, .2); background: rgba(225, 29, 107, .05); }
.svc-duo-card .svc-remate { display: flex; align-items: flex-start; gap: 11px; padding: 15px 14px; }
.svc-duo-card .svc-remate + .svc-remate { border-left: 1px solid rgba(47, 91, 234, .18); }
.svc-duo-card.visit .svc-remate + .svc-remate { border-left-color: rgba(225, 29, 107, .18); }
.svc-duo-card .svc-remate .svc-f-ic { width: 34px; height: 34px; background: transparent; }
.svc-duo-card .svc-remate b { font-size: 13.5px; color: #2f5bea; }
.svc-duo-card.visit .svc-remate b { color: #e11d6b; }
.svc-duo-card .svc-remate > div > span { font-size: 12.5px; }

/* --- boton --- */
.svc-duo-card .btn { margin: 24px 26px 0; min-height: 58px; border-radius: 14px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; background: #2f5bea; color: #fff; border: 0; box-shadow: 0 10px 26px rgba(47, 91, 234, .3); }
.svc-duo-card.visit .btn { background: #c2185b; box-shadow: 0 10px 26px rgba(194, 24, 91, .3); }
.svc-duo-card .btn:hover { filter: brightness(1.06); }

/* --- fila de confianza, UNA sola pieza --- */
.svc-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid #e4ebf7; border-radius: 20px; box-shadow: 0 12px 32px rgba(7, 25, 66, .07); overflow: hidden; }
.svc-trust-item { display: flex; align-items: flex-start; gap: 14px; padding: 24px 22px; }
.svc-trust-item + .svc-trust-item { border-left: 1px solid #eef2f9; }
.svc-t-ic { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; color: #2f5bea; }
.svc-t-ic .icon { width: 30px; height: 30px; }
.svc-trust-item:nth-child(3) .svc-t-ic { color: #16255c; }
.svc-trust-item b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: #0f1e3c; }
.svc-trust-item > div > span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: #64748b; }

/* --- modo oscuro --- */
html.dark .svc-duo-card, html.dark .svc-trust, html.dark .svc-duo-o span { background: #14161F; border-color: #22304e; }
html.dark .svc-duo-card .svc-duo-feats b, html.dark .svc-duo-card .svc-remate b, html.dark .svc-trust-item b { color: #e9effa; }
html.dark .svc-duo-card.visit .svc-remate b { color: #ff85b3; }
html.dark .svc-duo-card .svc-remate b { color: #7aa2ff; }
html.dark .svc-duo-card .svc-duo-feats li > div > span, html.dark .svc-duo-card .svc-remate > div > span, html.dark .svc-trust-item > div > span { color: #a8b8d6; }
html.dark .svc-trust-item + .svc-trust-item { border-left-color: #22304e; }
html.dark .svc-duo-o span { color: #d9e3f5; }
html.dark .svc-t-ic, html.dark .svc-trust-item:nth-child(3) .svc-t-ic { color: #7aa2ff; }

@media (max-width: 1080px) {
  .svc-duo-card .svc-duo-top h3 { font-size: 29px; bottom: 72px; }
  .svc-duo-card .svc-duo-icon { width: 66px; height: 66px; }
  .svc-duo-card .svc-duo-icon .icon { width: 28px; height: 28px; }
  .svc-trust { grid-template-columns: repeat(2, 1fr); }
  .svc-trust-item:nth-child(3) { border-left: 0; }
  .svc-trust-item:nth-child(n+3) { border-top: 1px solid #eef2f9; }
  html.dark .svc-trust-item:nth-child(n+3) { border-top-color: #22304e; }
}
@media (max-width: 900px) {
  .svc-duo .section-heading.centered h2 { font-size: 26px; }
  .svc-duo-grid { grid-template-columns: 1fr; gap: 18px; }
  /* La «O» se pone en horizontal: sigue diciendo «elige una», sin ocupar
     una columna que en el teléfono no existe. */
  .svc-duo-o { height: 34px; }
  .svc-duo-o::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient(90deg, transparent, #dde5f3 14%, #dde5f3 86%, transparent); }
  .svc-duo-o span { width: 44px; height: 44px; font-size: 15px; }
  .svc-duo-card .svc-duo-top { height: 230px; }
  .svc-duo-card .svc-duo-feats, .svc-duo-card .svc-duo-extra, .svc-duo-card .btn { margin-left: 18px; margin-right: 18px; }
  .svc-duo-card .svc-duo-icon { top: 18px; left: 18px; }
  .svc-duo-card .svc-duo-top h3 { left: 18px; right: 18px; bottom: 68px; font-size: 26px; }
  .svc-duo-card .svc-duo-pill { left: 18px; bottom: 18px; font-size: 11px; padding: 8px 14px; }
}
@media (max-width: 620px) {
  .svc-trust { grid-template-columns: 1fr; }
  .svc-trust-item + .svc-trust-item { border-left: 0; border-top: 1px solid #eef2f9; }
  .svc-duo-card .svc-duo-extra { grid-template-columns: 1fr; }
  .svc-duo-card .svc-remate + .svc-remate { border-left: 0; border-top: 1px solid rgba(47, 91, 234, .18); }
  .svc-duo-card.visit .svc-remate + .svc-remate { border-top-color: rgba(225, 29, 107, .18); }
}

/* ===================================================================
   LA TARJETA ENTERA ES EL BOTÓN   (2026-08-21, orden del dueño)
   «En ambas cuadrículas: si el cliente le da clic a la foto o a los
    textos se abre, no solo el botón.»

   Se hace estirando el enlace que YA existe (el botón) sobre toda la
   tarjeta con un `::after` transparente. Importa que sea así y no un
   `onclick` en el <article>: el destino sigue siendo un <a href> de
   verdad, así que se puede abrir en pestaña nueva, copiar el enlace,
   navegar con teclado y Google lo sigue leyendo como enlace. Un div
   con onclick no es nada de eso.

   `position:static` en el botón es lo que hace que el `::after` se
   ancle a la TARJETA (el ancestro posicionado) y no al propio botón.
   =================================================================== */
.svc-duo-card { cursor: pointer; }
.svc-duo-card .btn { position: static; }
.svc-duo-card .btn::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 20px; }
/* Que se note que toda la tarjeta responde, no solo el botón. */
.svc-duo-card:hover .btn { filter: brightness(1.06); }
.svc-duo-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ===== PIEL CORPORATIVA (2026-08-27) ===================================
   Orden del dueno, textual: «la parte de la empresa tiene que ser mas formal,
   esos colores estan horribles, un diseno mas elegante».

   POR QUE ES OTRA PIEL Y NO UN RETOQUE. La tienda vende con color: azul
   electrico a magenta, urgencia, oferta. Esa misma cara puesta en la pagina
   que lee un fabricante que esta decidiendo si te da la distribucion dice lo
   contrario de lo que se quiere decir. Aqui el color baja el tono a proposito:
   azul marino profundo, una sola linea de acento, mas aire y menos ruido. La
   jerarquia la hace el espacio y la tipografia, no la saturacion.

   SOLO afecta a `.info-hero.corp` y a `.corp-body`, es decir a las paginas del
   grupo `empresa`. Las legales y toda la tienda quedan intactas. */
.info-hero.corp{
  background:linear-gradient(160deg,#0b1a30 0%,#122a49 55%,#16355c 100%)!important;
  background-color:#0b1a30!important;
  border:1px solid rgba(148,180,230,.16);
  border-radius:14px;
  padding:56px 48px 52px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(9,22,42,.85);
}
.info-hero.corp:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 150% at 88% -20%,rgba(96,150,225,.20),transparent 60%);
}
.info-hero.corp:after{
  content:"";position:absolute;left:48px;bottom:0;width:64px;height:3px;
  background:#4d8fdd;border-radius:3px 3px 0 0;
}
.info-hero.corp .eyebrow{
  color:#9db8dc!important;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.info-hero.corp h1{
  max-width:760px;margin:14px 0 12px;
  font-size:40px;line-height:1.12;letter-spacing:-.9px;font-weight:800;color:#fff!important;
}
.info-hero.corp p{
  max-width:660px;color:#c3d4ea!important;font-size:15.5px;line-height:1.7;font-weight:400;
}
/* Cuerpo: caja de documento, no de tienda. */
.corp-body{
  color:var(--ez-tinta);font-size:15px;
}
.corp-body h2{
  margin:34px 0 12px;padding-bottom:9px;
  font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--ez-tinta);
  border-bottom:1px solid var(--ez-linea);
}
.corp-body h2:first-child{margin-top:0}
.corp-body p{margin:0 0 15px;line-height:1.78}
.corp-body b{color:var(--ez-tinta)}
.corp-body a{color:var(--ez-azul);text-decoration:underline;text-underline-offset:3px}
.corp-body a:hover{color:var(--ez-tinta)}
.corp-body hr{margin:34px 0;border:0;border-top:1px solid var(--ez-linea)}
/* Tema oscuro: mismo criterio, sin quemar el contraste. */
html.dark .corp-body{color:#c3cfe0}
html.dark .corp-body h2{color:#eaf1fb;border-bottom-color:rgba(180,205,240,.18)}
html.dark .corp-body b{color:#eaf1fb}
html.dark .corp-body a{color:#7fb2f5}
@media(max-width:767px){
  .info-hero.corp{padding:34px 22px 30px;border-radius:12px}
  .info-hero.corp:after{left:22px;width:48px}
  .info-hero.corp h1{font-size:28px;letter-spacing:-.6px}
  .info-hero.corp p{font-size:13.5px}
  .corp-body{font-size:14px}
  .corp-body h2{font-size:17px;margin:26px 0 10px}
}

/* ===== CATALOGO DE MODULOS (2026-08-27) ================================
   Orden del dueno: «SENTINEL se ve como algo bajado de GitHub; tiene quince
   modulos y hay que ensenarlos con nombre, como una empresa».

   Antes la pagina decia 'Vender, Inventario, Dinero, Personas'. Eso describe
   un programa; un ERP se presenta por AREAS y por MODULOS con nombre, que es
   como lo lee quien compra software para su negocio. Los quince que se listan
   NO son un texto de marketing: salen de `module_readiness.estado_modulos()`,
   el inventario que el propio sistema hace de si mismo. Si algun dia un modulo
   deja de estar operativo, esa lista deja de ser cierta y hay que corregirla. */
.mod-grid{display:grid;gap:18px;margin:22px 0 26px}
.mod-area{border:1px solid rgba(15,38,71,.13);border-radius:12px;background:#fbfcfe;padding:16px 18px 6px}
.mod-area>span{display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  background:#0f2647;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.mod-area .mod{padding:9px 0 11px;border-top:1px solid rgba(15,38,71,.08)}
.mod-area .mod:first-of-type{border-top:0}
.mod-area .mod b{display:block;font-size:14.5px;color:#0f2647;margin-bottom:2px}
.mod-area .mod i{display:block;font-style:normal;font-size:13px;line-height:1.6;color:#54637c}
@media(min-width:768px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
html.dark .mod-area{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .mod-area>span{background:#2b4f80}
html.dark .mod-area .mod{border-top-color:rgba(180,205,240,.12)}
html.dark .mod-area .mod b{color:#eaf1fb}
html.dark .mod-area .mod i{color:#a9bbd4}

/* ===== PANTALLAS DEL SISTEMA (2026-08-27) ==============================
   Orden del dueno: «pon capturas del sistema».

   DE DONDE SALEN Y POR QUE ESAS. Son las ocho piezas de la vitrina de la
   pantalla de acceso (`web/assets/vitrina/`), que llevan datos de DEMOSTRACION.
   Se descarto capturar el sistema en vivo: esas pantallas tienen nombres,
   telefonos y ventas de clientes reales, y publicarlas seria exactamente lo
   que el dueno acaba de mandar quitar de su propia ficha. Los titulos y los
   textos son los suyos, los de `vitrina.json`: una sola redaccion para el
   producto, aqui y en el acceso (Ley 16). */
.shot-grid{display:grid;gap:20px;margin:22px 0 30px}
@media(min-width:820px){.shot-grid{grid-template-columns:repeat(2,1fr)}}
.shot{margin:0;border:1px solid rgba(15,38,71,.14);border-radius:14px;overflow:hidden;background:#0b1a30;
  box-shadow:0 18px 40px -28px rgba(9,22,42,.7)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#0b1a30}
.shot figcaption{padding:15px 17px 17px;background:#fff}
.shot figcaption span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#3f6ba8;margin-bottom:5px}
.shot figcaption b{display:block;font-size:16px;color:#0f2647;line-height:1.3;margin-bottom:6px}
.shot figcaption p{margin:0;font-size:13px;line-height:1.6;color:#54637c}
.shot-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.shot-chips i{font-style:normal;font-size:11px;font-weight:700;color:#284a7a;
  border:1px solid rgba(40,74,122,.24);border-radius:999px;padding:3px 9px}
html.dark .shot{border-color:rgba(180,205,240,.18)}
html.dark .shot figcaption{background:rgba(148,180,230,.06)}
html.dark .shot figcaption b{color:#eaf1fb}
html.dark .shot figcaption p{color:#a9bbd4}
html.dark .shot-chips i{color:#9dc0f0;border-color:rgba(157,192,240,.3)}

/* ===== ARBOL DE AREAS Y MODULOS (2026-08-27) ==========================
   Sustituye a la lista de quince que puse antes. Aquella salia de
   `module_readiness`, que inventaria lo que el sistema VIGILA; el dueno
   enseno el menu real y son 11 areas con 68 modulos. Se extraen de
   `web/assets/sentinel/05a-menu-router.js`, que es la fuente de verdad del
   menu: si un area se retira del sistema, esta lista deja de ser cierta.
   La web corrige la ortografia de dos nombres de pantalla ('Dessing',
   'tamano') sin tocar el sistema: eso es cosmetica del sitio, no del ERP. */
.area-grid{display:grid;gap:14px;margin:22px 0 26px}
@media(min-width:820px){.area-grid{grid-template-columns:repeat(2,1fr)}}
.area{border:1px solid rgba(15,38,71,.13);border-radius:12px;background:#fbfcfe;padding:15px 17px}
.area>b{display:inline-block;font-size:16px;color:#0f2647;letter-spacing:-.2px}
.area>span{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:#0f2647;
  color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;vertical-align:2px}
.area-subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.area-subs i{font-style:normal;font-size:12.5px;color:#3d4d66;background:#fff;
  border:1px solid rgba(15,38,71,.14);border-radius:8px;padding:4px 9px}
html.dark .area{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .area>b{color:#eaf1fb}
html.dark .area>span{background:#2b4f80}
html.dark .area-subs i{color:#bccbe0;background:rgba(11,26,48,.5);border-color:rgba(180,205,240,.16)}

/* ===== CIFRAS DEL SISTEMA (2026-08-27) ================================
   Orden del dueno: «que se vea que no es un juguete, ni un demo, ni algo
   bajado de internet; esto costo mucho trabajo».

   Se responde con numeros medidos, no con adjetivos: areas y modulos del
   menu real, tablas y migraciones de la base, modulos de codigo y casos de
   regresion. Si alguno deja de ser cierto hay que corregirlo aqui: un numero
   inventado en esta caja destruye la credibilidad de toda la pagina. */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0 24px}
@media(min-width:700px){.cifras{grid-template-columns:repeat(3,1fr)}}
.cifras>div{border:1px solid rgba(15,38,71,.13);border-radius:12px;background:#fbfcfe;
  padding:16px 14px;text-align:center}
.cifras b{display:block;font-size:32px;font-weight:800;letter-spacing:-1.2px;color:#12294f;line-height:1}
.cifras span{display:block;margin-top:5px;font-size:12px;color:#5b6b83;font-weight:600}
html.dark .cifras>div{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .cifras b{color:#eaf1fb}
html.dark .cifras span{color:#a9bbd4}

/* ===== PRESENTACION DE SENTINEL — carrusel premium (2026-08-27) =========
   Sustituye a la rejilla `.shot-*` de hace un rato (se deja arriba, sin uso,
   por si el dueno quiere volver a la version en cuadricula: retirarla es
   decision suya, no mia).

   Panel oscuro a proposito: la captura del sistema ES oscura, y sobre fondo
   claro se veia como una foto pegada. Aqui el marco continua la pantalla. */
.sent-show{position:relative;border-radius:16px;overflow:hidden;margin:22px 0 14px;
  background:linear-gradient(160deg,#0a1728 0%,#0f2440 60%,#132c4d 100%);
  border:1px solid rgba(148,180,230,.18);
  box-shadow:0 30px 70px -40px rgba(8,20,40,.9);min-height:380px}
.sent-sl{position:absolute;inset:0;display:grid;grid-template-columns:1fr;gap:0;
  opacity:0;visibility:hidden;transform:scale(1.015);transition:opacity .7s ease,transform .9s ease;
  padding:26px 26px 62px}
.sent-sl.on{opacity:1;visibility:visible;transform:none;position:relative}
.sent-img{border-radius:12px;overflow:hidden;border:1px solid rgba(148,180,230,.16);background:#0b1a30}
.sent-img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sent-tx{padding:18px 2px 0}
.sent-tx span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#7fb0ee;margin-bottom:7px}
.sent-tx b{display:block;font-size:24px;line-height:1.16;letter-spacing:-.6px;color:#fff;margin-bottom:9px}
.sent-tx p{margin:0;font-size:14.5px;line-height:1.7;color:#bdd0e8;max-width:640px}
.sent-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.sent-chips i{font-style:normal;font-size:11.5px;font-weight:700;color:#cfe0f7;
  border:1px solid rgba(157,192,240,.32);border-radius:999px;padding:4px 11px}
.sent-nav{position:absolute;bottom:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(157,192,240,.3);background:rgba(9,20,38,.72);color:#dbe8fa;
  font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.sent-nav:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.sent-nav.prev{left:22px}
.sent-nav.next{left:68px}
.sent-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px}
.sent-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(190,214,245,.34);transition:.25s}
.sent-dot.on{width:24px;background:#5c9af0}
.sent-count{position:absolute;right:24px;bottom:24px;z-index:3;font-size:12px;color:#9db8dc;letter-spacing:.05em}
.sent-count b{color:#fff;font-size:14px}
@media(min-width:900px){
  .sent-show{min-height:430px}
  .sent-sl{grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;padding:30px 30px 66px}
  .sent-tx{padding:0}
  .sent-tx b{font-size:27px}
}
@media(max-width:520px){
  .sent-show{min-height:360px}
  .sent-sl{padding:18px 16px 58px}
  .sent-tx b{font-size:20px}
  .sent-tx p{font-size:13.5px}
  .sent-nav.prev{left:14px}.sent-nav.next{left:58px}
  .sent-count{right:16px}
}
@media(prefers-reduced-motion:reduce){.sent-sl{transition:none}}

/* ===== CAPTURAS DEL SISTEMA EN REJILLA (2026-08-27) ====================
   Los recortes de menu son verticales (~330 px de ancho). Se muestran a su
   tamano natural dentro de una tarjeta oscura -el sistema es oscuro- en vez
   de estirarlos: una captura deformada delata mas que no ponerla. */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:22px 0 28px}
.cap{margin:0;border:1px solid rgba(15,38,71,.14);border-radius:13px;overflow:hidden;background:#0b1a30;
  box-shadow:0 16px 36px -26px rgba(9,22,42,.75);display:flex;flex-direction:column}
.cap img{display:block;width:100%;height:auto;max-height:330px;object-fit:contain;object-position:top center;
  background:#0b1a30;padding:10px 10px 0}
.cap.wide{grid-column:1/-1}
.cap.wide img{max-height:none;padding:0}
.cap figcaption{padding:13px 15px 15px;background:#fff;flex:1}
.cap figcaption span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#3f6ba8;margin-bottom:4px}
.cap figcaption b{display:block;font-size:15px;color:#0f2647;line-height:1.28;margin-bottom:5px}
.cap figcaption p{margin:0;font-size:12.5px;line-height:1.55;color:#54637c}
html.dark .cap{border-color:rgba(180,205,240,.18)}
html.dark .cap figcaption{background:rgba(148,180,230,.06)}
html.dark .cap figcaption b{color:#eaf1fb}
html.dark .cap figcaption p{color:#a9bbd4}

/* ===== MODULOS EN FILAS ALTERNAS (2026-08-27) =========================
   Orden del dueno: «un parrafo sentado en toda la pagina se ve horrible».
   El texto se corta en bloques y cada bloque trae SU galeria al lado, que se
   desvanece sola de una imagen a la siguiente. Las filas alternan de lado:
   el ojo baja en zigzag en vez de leer un muro.

   EL MOVIMIENTO ES CSS PURO. Cero JavaScript, cero temporizadores, nada de
   estado que se rompa cuando la SPA vuelve a pintar. Cada imagen lleva su
   `animation-delay` en segundos: la primera arranca visible y la siguiente
   entra 4,5 s despues. Cada fila empieza con un desfase distinto para que no
   cambien todas a la vez, que es lo que delata una plantilla.

   Con `prefers-reduced-motion` la animacion se apaga y queda la primera imagen
   fija (WCAG 2.2 SC 2.2.2). */
.mod-rows{display:flex;flex-direction:column;gap:26px;margin:24px 0 30px}
.mod-row{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
  border:1px solid rgba(15,38,71,.12);border-radius:16px;padding:20px;background:#fbfcfe}
.mod-tx span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#3f6ba8;margin-bottom:7px}
.mod-tx h3{margin:0 0 9px;font-size:21px;line-height:1.22;letter-spacing:-.4px;color:#0f2647;font-weight:800}
.mod-tx p{margin:0;font-size:14.5px;line-height:1.7;color:#4d5d76}
.mod-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.mod-chips i{font-style:normal;font-size:11.5px;font-weight:700;color:#284a7a;
  border:1px solid rgba(40,74,122,.22);border-radius:999px;padding:4px 10px;background:#fff}
/* La galeria: las imagenes se apilan y se cruzan por opacidad. */
.mg{position:relative;border-radius:12px;overflow:hidden;background:#0b1a30;
  border:1px solid rgba(148,180,230,.18);min-height:230px;
  box-shadow:0 16px 38px -28px rgba(9,22,42,.8)}
.mg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  padding:12px;opacity:0;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.mg2 img{animation-name:mgfade2;animation-duration:9s}
.mg3 img{animation-name:mgfade3;animation-duration:13.5s}
@keyframes mgfade2{0%{opacity:1}42%{opacity:1}50%{opacity:0}92%{opacity:0}100%{opacity:1}}
@keyframes mgfade3{0%{opacity:1}27%{opacity:1}33%{opacity:0}94%{opacity:0}100%{opacity:1}}
@media(min-width:860px){
  .mod-row{grid-template-columns:1fr 1fr;gap:28px;padding:26px 28px}
  .mod-row.alt .mod-tx{order:2}
  .mod-row.alt .mg{order:1}
  .mg{min-height:290px}
  .mod-tx h3{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
  .mg img{animation:none;opacity:0}
  .mg img:first-child{opacity:1}
}
html.dark .mod-row{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.15)}
html.dark .mod-tx h3{color:#eaf1fb}
html.dark .mod-tx p{color:#adbdd4}
html.dark .mod-chips i{color:#9dc0f0;background:rgba(11,26,48,.5);border-color:rgba(157,192,240,.28)}

/* ===== AUDITORIA VISUAL 2026-08-27 · correcciones medidas ===============
   Tres fallos encontrados mirando la pagina PUBLICADA, no el codigo:

   1. El cuerpo corporativo estaba topado a 820 px y CENTRADO. Correcto para
      leer un parrafo; ridiculo para una fila de modulo con su galeria, que
      quedaba estrangulada mientras media pantalla se veia vacia. Ahora el
      TEXTO conserva su columna legible y los bloques anchos -galerias, cifras,
      carrusel- se salen de ella a lo ancho de la pagina.
   2. `.sent-show` desbordaba 6 px su contenedor (825 > 819). Seis pixeles se
      ven: hacen aparecer una barra horizontal en movil.
   3. La primera frase necesitaba peso propio: es lo unico que lee quien no va
      a leer el resto. */
.corp-body{max-width:820px}
.corp-body .lede{font-size:17.5px;line-height:1.65;color:var(--ez-tinta-2)}
html.dark .corp-body .lede{color:#c8d6ea}
.corp-body .sent-show,
.corp-body .mod-rows,
.corp-body .cifras,
.corp-body .area-grid,
.corp-body .cap-grid{
  max-width:100%;
  width:var(--ez-ancho);
  margin-left:50%;
  transform:translateX(-50%);
}
.sent-show{max-width:100%;box-sizing:border-box}
.sent-sl{box-sizing:border-box;max-width:100%}
@media(max-width:900px){
  .corp-body .sent-show,
  .corp-body .mod-rows,
  .corp-body .cifras,
  .corp-body .area-grid,
  .corp-body .cap-grid{width:100%;margin-left:0;transform:none}
}

/* ===== DIVISIONES, MARCAS Y FICHA (auditoria 2026-08-27) ================
   Medido en la pagina publicada: /empresa tenia CERO imagenes y 7 de sus 10
   parrafos pasaban de 180 caracteres. Era literalmente el documento con
   parrafos que el dueno mando no hacer, y es la pagina que abre un evaluador
   de canal antes de decidir si te da la distribucion.

   Se sustituye por tres piezas que informan sin obligar a leer:
     .div3    las tres divisiones, cada una con imagen, tres hechos y su enlace
     .marcas  los 23 logos que ya estaban en el repositorio SIN USAR
     .ficha   los datos de la compania como ficha, no como parrafo

   SOBRE LOS LOGOS: van bajo el titulo «marcas que vendemos y reparamos», que
   es verdad y es uso nominativo legitimo. NUNCA bajo la palabra «partners»
   mientras EZEMTECH no tenga esa autorizacion firmada: un evaluador de Dell
   que vea su logo mal etiquetado se lleva peor impresion que no viendolo. */
.div3{display:grid;gap:16px;margin:20px 0 30px}
@media(min-width:820px){.div3{grid-template-columns:repeat(3,1fr)}}
.dv{display:flex;flex-direction:column;border:1px solid rgba(15,38,71,.14);border-radius:14px;
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.dv:hover{transform:translateY(-4px);border-color:#2b5fa8;box-shadow:0 22px 44px -26px rgba(9,22,42,.5)}
.dv-img{aspect-ratio:16/10;overflow:hidden;background:#0b1a30}
.dv-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.dv:hover .dv-img img{transform:scale(1.05)}
.dv-tx{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
.dv-tx span{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3f6ba8}
.dv-tx b{display:block;margin:6px 0 9px;font-size:17px;line-height:1.25;color:#0f2647}
.dv-tx ul{margin:0;padding-left:17px;flex:1}
.dv-tx li{font-size:13px;line-height:1.65;color:#54637c;margin-bottom:2px}
.dv-tx em{display:block;margin-top:12px;font-style:normal;font-size:13px;font-weight:800;color:#1c5cc0}
/* Marcas: escala de grises hasta que el puntero pasa. Sobrio, no una feria. */
.marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;
  margin:16px 0 28px;align-items:center}
.marcas img{width:100%;height:34px;object-fit:contain;opacity:.55;filter:grayscale(1);
  transition:opacity .25s ease, filter .25s ease}
.marcas img:hover{opacity:1;filter:none}
html.dark .marcas img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.5}
html.dark .marcas img:hover{filter:invert(1) brightness(1.7);opacity:1}
/* Ficha de empresa: datos en rejilla, no en un parrafo con puntos medios. */
.ficha{display:grid;grid-template-columns:1fr;gap:0;margin:16px 0 26px;
  border:1px solid var(--ez-linea);border-radius:13px;overflow:hidden}
@media(min-width:640px){.ficha{grid-template-columns:1fr 1fr}}
.ficha>div{display:flex;flex-direction:column;gap:3px;padding:13px 16px;
  border-bottom:1px solid var(--ez-linea);background:var(--ez-papel)}
.ficha>div:nth-child(even){background:var(--ez-papel)}
.ficha span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ez-tinta-3)}
.ficha b{font-size:14.5px;color:var(--ez-tinta)}
html.dark .dv{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .dv-tx b{color:#eaf1fb}
html.dark .dv-tx li{color:#adbdd4}
html.dark .dv-tx em{color:#7fb2f5}
html.dark .ficha{border-color:rgba(180,205,240,.16)}
html.dark .ficha>div{background:rgba(148,180,230,.05);border-bottom-color:rgba(180,205,240,.1)}
html.dark .ficha>div:nth-child(even){background:rgba(148,180,230,.02)}
html.dark .ficha b{color:#eaf1fb}
html.dark .ficha span{color:#8ea3c0}
/* Los bloques anchos de /empresa se salen de la columna de texto igual que
   las galerias, o las tres divisiones saldrian estranguladas. */
.corp-body .div3, .corp-body .marcas, .corp-body .ficha{
  width:var(--ez-ancho);margin-left:50%;transform:translateX(-50%)}
@media(max-width:900px){
  .corp-body .div3, .corp-body .marcas, .corp-body .ficha{width:100%;margin-left:0;transform:none}
}

/* ===== NEXUS: experiencia pública Empresa ===== */
.nexus-page{--nexus-ink:#07090e;--nexus-panel:rgba(13,18,30,.82);--nexus-line:rgba(153,184,255,.18);--nexus-muted:#aab5cb;--nexus-cyan:#63dcff;--nexus-pink:#fe62bd;position:relative;isolation:isolate;overflow:hidden;margin:-2rem min(-2.5vw,-1rem) 0;padding:1.25rem clamp(1rem,4vw,5rem) 5rem;color:#f8faff;background:var(--nexus-ink)}
.nexus-page::before{position:absolute;z-index:-1;inset:26rem auto auto -18rem;width:42rem;height:42rem;border-radius:50%;background:rgba(35,117,255,.11);filter:blur(34px);content:'';pointer-events:none}.nexus-shell{max-width:1320px;margin:auto}
.nexus-nav{display:flex;gap:.3rem;align-items:center;width:max-content;max-width:100%;margin:0 0 1.1rem;padding:.35rem;overflow-x:auto;border:1px solid rgba(163,188,255,.16);border-radius:999px;background:rgba(8,12,21,.75);scrollbar-width:none}.nexus-nav::-webkit-scrollbar{display:none}.nexus-nav a{flex:0 0 auto;padding:.58rem .86rem;border-radius:999px;color:#aeb9d1;font-size:.78rem;font-weight:800;letter-spacing:.09em;text-decoration:none;text-transform:uppercase;transition:color .2s ease,background .2s ease,box-shadow .2s ease}.nexus-nav a:hover,.nexus-nav a:focus-visible{color:#fff;background:rgba(86,128,255,.18)}.nexus-nav a.is-current{color:#071017;background:linear-gradient(100deg,var(--nexus-cyan),#9ba2ff 52%,var(--nexus-pink));box-shadow:0 0 24px rgba(99,220,255,.22)}
.nexus-hero{position:relative;display:grid;align-items:end;min-height:clamp(490px,64vw,730px);overflow:hidden;border:1px solid rgba(172,199,255,.2);border-radius:clamp(1.3rem,2.5vw,2.5rem);background:#090d17;box-shadow:0 26px 70px rgba(0,0,0,.38)}.nexus-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:.88}.nexus-hero::after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,12,.96) 0%,rgba(5,7,12,.78) 39%,rgba(5,7,12,.15) 72%,rgba(5,7,12,.05));content:''}.nexus-hero-content{position:relative;z-index:1;max-width:760px;padding:clamp(1.6rem,5vw,5rem)}
.nexus-kicker{margin:0 0 .8rem;color:var(--nexus-cyan);font-size:.74rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.nexus-hero h1,.nexus-statement h2,.nexus-section-head h2,.nexus-partner-copy h1,.nexus-manifesto h1{margin:0;color:#fff;font-family:var(--font-display,inherit);font-weight:850;line-height:.96;letter-spacing:-.055em}.nexus-hero h1{max-width:680px;font-size:clamp(3.1rem,8vw,7rem)}.nexus-hero h1 em{color:var(--nexus-cyan);font-style:normal}.nexus-lede{max-width:570px;margin:1.25rem 0 0;color:#d3d9ea;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.65}
.nexus-hero-actions,.nexus-button-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}.nexus-primary,.nexus-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.1rem;border-radius:.8rem;font-weight:850;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.nexus-primary{color:#081017;background:linear-gradient(100deg,var(--nexus-cyan),#9da5ff 55%,var(--nexus-pink));box-shadow:0 12px 32px rgba(102,155,255,.27)}.nexus-secondary{border:1px solid rgba(195,212,255,.3);color:#fff;background:rgba(8,14,28,.48)}.nexus-primary:hover,.nexus-secondary:hover{color:inherit;transform:translateY(-2px);box-shadow:0 15px 38px rgba(99,220,255,.18)}.nexus-primary:focus-visible,.nexus-secondary:focus-visible,.nexus-gallery a:focus-visible{outline:3px solid var(--nexus-cyan);outline-offset:3px}
.nexus-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;padding:.85rem 0 0}.nexus-proof span{padding:.75rem .55rem;border-top:1px solid rgba(186,211,255,.2);color:#d8e2f8;font-size:.78rem;font-weight:750}.nexus-body{max-width:1040px;margin:clamp(3.5rem,8vw,8rem) auto}.nexus-statement{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,6vw,6rem);align-items:start;padding:clamp(1.4rem,4vw,3rem);border-top:1px solid var(--nexus-line);border-bottom:1px solid var(--nexus-line)}.nexus-statement p{margin:.6rem 0 0;color:var(--nexus-muted);font-size:1.05rem;line-height:1.72}.nexus-statement h2{font-size:clamp(2.2rem,4.5vw,4.5rem)}
.nexus-section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:0 0 1.4rem}.nexus-section-head h2{max-width:720px;font-size:clamp(2rem,4vw,3.85rem)}.nexus-section-head p{max-width:380px;margin:0;color:var(--nexus-muted);line-height:1.55}.nexus-paths{display:grid;border-top:1px solid var(--nexus-line)}.nexus-path{display:grid;grid-template-columns:.24fr 1fr auto;gap:1rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--nexus-line);color:#fff;text-decoration:none;transition:padding .2s ease,color .2s ease}.nexus-path:hover{padding-right:.7rem;padding-left:.7rem;color:var(--nexus-cyan)}.nexus-index{color:var(--nexus-pink);font-size:.75rem;font-weight:900;letter-spacing:.12em}.nexus-path strong{font-size:clamp(1.15rem,2vw,1.65rem)}.nexus-path span:last-child{color:var(--nexus-muted);font-size:.9rem}
.nexus-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,42vw);gap:1rem;overflow-x:auto;padding:.3rem .1rem 1rem;scroll-snap-type:x mandatory;scrollbar-color:#719eff #111827}.nexus-frame{position:relative;min-height:310px;margin:0;overflow:hidden;border:1px solid rgba(149,181,255,.24);border-radius:1.2rem;background:#09111f;scroll-snap-align:start;box-shadow:0 20px 44px rgba(0,0,0,.22)}.nexus-frame img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .45s ease}.nexus-frame:hover img{transform:scale(1.035);filter:saturate(1.12)}.nexus-frame figcaption{position:absolute;right:0;bottom:0;left:0;padding:2.8rem 1rem 1rem;color:#fff;font-size:.9rem;font-weight:800;background:linear-gradient(transparent,rgba(3,7,15,.92))}
.nexus-systems{display:grid;grid-template-columns:.93fr 1.07fr;gap:clamp(1.2rem,4vw,3.2rem);align-items:stretch;margin-top:clamp(3.5rem,8vw,7rem)}.nexus-systems-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.3rem,3vw,2.4rem);border:1px solid var(--nexus-line);border-radius:1.35rem;background:linear-gradient(145deg,rgba(25,39,70,.74),rgba(7,11,20,.55))}.nexus-systems-copy h2{margin:0;font-size:clamp(2rem,4vw,3.7rem);line-height:.98;letter-spacing:-.045em}.nexus-systems-copy p{color:var(--nexus-muted);line-height:1.65}.nexus-system-art{min-height:380px;overflow:hidden;border:1px solid var(--nexus-line);border-radius:1.35rem}.nexus-system-art img{width:100%;height:100%;object-fit:cover}
.nexus-partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.nexus-partner-card{min-height:250px;padding:1.35rem;border:1px solid var(--nexus-line);border-radius:1.1rem;background:linear-gradient(145deg,rgba(28,40,70,.63),rgba(8,12,22,.86));transition:transform .2s ease,border-color .2s ease}.nexus-partner-card:hover{transform:translateY(-4px);border-color:rgba(99,220,255,.54)}.nexus-partner-card span{color:var(--nexus-cyan);font-size:.76rem;font-weight:900;letter-spacing:.15em}.nexus-partner-card h2{margin:1rem 0 .7rem;font-size:1.45rem}.nexus-partner-card p{margin:0;color:var(--nexus-muted);line-height:1.6}.nexus-contact-band{display:flex;justify-content:space-between;gap:2rem;align-items:center;margin-top:clamp(3rem,8vw,7rem);padding:clamp(1.4rem,4vw,3rem);border-radius:1.35rem;background:linear-gradient(105deg,#123e6a,#392365 56%,#7d1d65)}.nexus-contact-band h2{max-width:620px;margin:0;font-size:clamp(1.8rem,3.5vw,3.3rem);line-height:1.02;letter-spacing:-.04em}.nexus-contact-band .nexus-primary{flex:0 0 auto;background:#fff;color:#172148}.nexus-manifesto{max-width:890px;padding-top:clamp(3rem,9vw,9rem)}.nexus-manifesto h1{font-size:clamp(3rem,8vw,7.5rem)}.nexus-manifesto h1 span{color:var(--nexus-pink)}.nexus-manifesto p{max-width:630px;margin:1.5rem 0 0;color:var(--nexus-muted);font-size:1.12rem;line-height:1.7}.nexus-manifesto .nexus-primary{margin-top:1.5rem}
@media(max-width:760px){.nexus-page{margin:-1rem -1rem 0;padding:.75rem 1rem 3.5rem}.nexus-hero{min-height:590px}.nexus-hero-art{object-position:69% center}.nexus-hero::after{background:linear-gradient(0deg,rgba(5,7,12,.98) 3%,rgba(5,7,12,.78) 51%,rgba(5,7,12,.22))}.nexus-hero-content{padding:1.4rem}.nexus-proof{grid-template-columns:1fr;gap:0}.nexus-statement,.nexus-systems{grid-template-columns:1fr}.nexus-section-head{display:block}.nexus-section-head p{margin-top:.9rem}.nexus-path{grid-template-columns:2.6rem 1fr auto}.nexus-path span:last-child{font-size:0}.nexus-path span:last-child::after{content:'→';font-size:1.25rem}.nexus-gallery{grid-auto-columns:minmax(275px,82vw)}.nexus-partner-grid{grid-template-columns:1fr}.nexus-contact-band{display:block}.nexus-contact-band .nexus-primary{margin-top:1.2rem}}
@media(prefers-reduced-motion:reduce){.nexus-page *,.nexus-page *::before,.nexus-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* El marcado Nexus mantiene estas reglas junto al componente para evitar que
   estilos genéricos de imágenes conviertan el hero en una columna vertical. */
.nexus-page{width:auto;margin:-2rem 0 0}.nexus-hero>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% center}.nexus-hero-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(5,7,12,.97),rgba(5,7,12,.8) 39%,rgba(5,7,12,.15) 72%,rgba(5,7,12,.05))}.nexus-hero-content{z-index:2}.nexus-nav a[aria-current="page"]{color:#071017;background:linear-gradient(100deg,var(--nexus-cyan),#9ba2ff 52%,var(--nexus-pink));box-shadow:0 0 24px rgba(99,220,255,.22)}.nexus-eyebrow{margin:0 0 .8rem;color:var(--nexus-cyan);font-size:.74rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.nexus-intro{max-width:570px;margin:1.25rem 0 0;color:#d3d9ea;font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.65}
.nexus-paths>a{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--nexus-line);color:#fff;text-decoration:none;transition:padding .2s ease,color .2s ease}.nexus-paths>a:hover{padding-right:.7rem;padding-left:.7rem;color:var(--nexus-cyan)}.nexus-paths>a>span,.nexus-paths small{display:block;color:var(--nexus-pink);font-size:.72rem;font-weight:900;letter-spacing:.12em}.nexus-paths b{display:block;margin:.28rem 0;font-size:clamp(1.15rem,2vw,1.65rem)}.nexus-paths p{margin:0;color:var(--nexus-muted);line-height:1.5}.nexus-paths i{font-size:1.25rem;font-style:normal}.nexus-proof{margin-top:3.5rem}.nexus-proof>div{padding:.9rem;border-top:1px solid rgba(186,211,255,.2)}.nexus-proof b{display:block;color:var(--nexus-cyan);font-size:2rem}.nexus-proof span{display:block;padding:0;color:#d8e2f8;line-height:1.4}
.nexus-gallery{display:block;margin-top:clamp(3rem,7vw,6rem);overflow:visible}.nexus-gallery-track{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .1rem 1rem;scroll-snap-type:x mandatory;scrollbar-color:#719eff #111827}.nexus-frame{flex:0 0 min(42vw,540px);width:min(42vw,540px)}.nexus-gallery-hint{margin:.5rem 0 0;color:var(--nexus-muted);font-size:.82rem}.nexus-frame figcaption{display:grid;gap:.25rem}.nexus-frame figcaption span{color:var(--nexus-cyan);font-size:.7rem;letter-spacing:.1em}.nexus-frame figcaption b{font-size:1rem}
.nexus-systems>img{width:100%;height:100%;max-width:none;min-height:380px;object-fit:cover;border:1px solid var(--nexus-line);border-radius:1.35rem}.nexus-systems>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.3rem,3vw,2.4rem);border:1px solid var(--nexus-line);border-radius:1.35rem;background:linear-gradient(145deg,rgba(25,39,70,.74),rgba(7,11,20,.55))}.nexus-systems small,.nexus-contact-band small{color:var(--nexus-cyan);font-weight:900;letter-spacing:.13em}.nexus-systems h2{margin:.7rem 0 0;font-size:clamp(2rem,4vw,3.7rem);line-height:.98;letter-spacing:-.045em}.nexus-link{display:inline-flex;align-self:flex-start;margin-top:1rem;color:var(--nexus-cyan);font-weight:850;text-decoration:none}.nexus-link span{margin-left:.5rem}.nexus-partner-grid article{min-height:250px;padding:1.35rem;border:1px solid var(--nexus-line);border-radius:1.1rem;background:linear-gradient(145deg,rgba(28,40,70,.63),rgba(8,12,22,.86));transition:transform .2s ease,border-color .2s ease}.nexus-partner-grid article:hover{transform:translateY(-4px);border-color:rgba(99,220,255,.54)}.nexus-partner-grid article>span{color:var(--nexus-cyan);font-size:.76rem;font-weight:900;letter-spacing:.15em}.nexus-contact-band>a{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.1rem;border-radius:.8rem;background:#fff;color:#172148;font-weight:850;text-decoration:none}.nexus-contact-band>a span{margin-left:.5rem}.nexus-manifesto p{margin:.1rem 0;color:#fff;font-size:clamp(2.3rem,6vw,5.5rem);font-weight:850;line-height:.96;letter-spacing:-.055em}.nexus-manifesto p:last-child em{color:var(--nexus-pink);font-style:normal}
@media(max-width:760px){.nexus-page{width:auto;margin:-1rem 0 0}.nexus-hero>img{object-position:69% center}.nexus-hero-shade{background:linear-gradient(0deg,rgba(5,7,12,.98) 3%,rgba(5,7,12,.78) 51%,rgba(5,7,12,.22))}.nexus-paths>a{grid-template-columns:2.6rem 1fr auto}.nexus-frame{flex-basis:82vw;width:82vw}.nexus-systems>img{min-height:270px}.nexus-systems.inverse>img{order:2}}

.nexus-hero-content{box-sizing:border-box;width:100%;max-width:760px}.nexus-nav{box-sizing:border-box}
.nexus-hero-content{position:absolute;right:0;bottom:0;left:0;width:auto}.nexus-nav{max-width:100%}

/* Dirección 2: corporativa, clara y centrada en personas y producto. */
.nexus-page{--nexus-ink:#f6f8fc;--nexus-line:#dce4f2;--nexus-muted:#52627c;--nexus-cyan:#1769e8;--nexus-pink:#b7288d;margin:0;padding:0 clamp(1rem,4vw,4rem) 5rem;color:#14213a;background:linear-gradient(180deg,#fff 0%,#f5f8fd 62%,#fff 100%)}
.nexus-page::before{display:none}.nexus-shell{max-width:1240px}.nexus-hero{display:block;min-height:500px;margin:0 auto;max-width:1240px;border:0;border-radius:0;background:#eef4fb;box-shadow:none}.nexus-hero>img{right:0;left:auto;width:48%;height:100%;object-position:center 22%;filter:none}.nexus-hero-shade{background:linear-gradient(90deg,#eef4fb 0%,#eef4fb 46%,rgba(238,244,251,.92) 56%,rgba(238,244,251,.08) 100%)}.nexus-hero-content{top:0;right:auto;bottom:auto;display:flex;flex-direction:column;justify-content:center;width:54%;height:100%;max-width:680px;padding:clamp(2rem,5vw,5rem);color:#14213a}.nexus-nav{order:-1;width:auto;margin:0 0 2rem;padding:0;overflow:visible;border:0;border-radius:0;background:transparent}.nexus-nav a{padding:.2rem 0;margin-right:1.35rem;border-radius:0;color:#52627c;font-size:.72rem}.nexus-nav a:hover,.nexus-nav a:focus-visible{color:#1769e8;background:transparent}.nexus-nav a[aria-current="page"]{color:#1769e8;background:transparent;box-shadow:none;border-bottom:2px solid #1769e8}.nexus-eyebrow{color:#1769e8}.nexus-hero h1{max-width:600px;color:#13223d;font-size:clamp(2.65rem,4.7vw,5.15rem);line-height:1.02;letter-spacing:-.06em}.nexus-intro{max-width:470px;color:#52627c;font-size:1.08rem;line-height:1.6}.nexus-body{max-width:1120px;margin:5rem auto 0}.nexus-statement{gap:3rem;padding:2.5rem 0;border-color:#dce4f2}.nexus-statement p{color:#52627c;font-size:1.1rem}.nexus-paths{margin-top:4.5rem;border-color:#dce4f2}.nexus-paths>a{border-color:#dce4f2;color:#17233b}.nexus-paths>a:hover{color:#1769e8}.nexus-paths>a>span,.nexus-paths small{color:#b7288d}.nexus-paths p{color:#6c7890}.nexus-proof{margin-top:4rem}.nexus-proof>div{border-color:#dce4f2}.nexus-proof b{color:#1769e8}.nexus-proof span{color:#52627c}.nexus-gallery{margin-top:4rem}.nexus-frame{border-color:#dce4f2;background:#0a1324;box-shadow:0 15px 34px rgba(18,41,81,.12)}.nexus-gallery-hint{color:#52627c}.nexus-systems{margin-top:5rem}.nexus-systems>img{border:0;border-radius:0}.nexus-systems>div{border:0;border-radius:0;background:#14213a;color:#fff}.nexus-systems h2{color:#fff}.nexus-systems-copy p,.nexus-systems>div p{color:#ced9ea}.nexus-partner-grid article{border-color:#dce4f2;border-radius:0;background:#fff;box-shadow:0 10px 28px rgba(31,65,123,.07)}.nexus-partner-grid article:hover{border-color:#1769e8}.nexus-partner-card p,.nexus-partner-grid article p{color:#52627c}.nexus-contact-band{border-radius:0;background:#14213a}.nexus-manifesto p{color:#14213a}.nexus-manifesto p:last-child em{color:#b7288d}
@media(max-width:760px){.nexus-page{padding:0 1rem 3.5rem}.nexus-hero{min-height:650px}.nexus-hero>img{top:auto;width:100%;height:50%;object-position:center 18%;opacity:.8}.nexus-hero-shade{background:linear-gradient(0deg,#eef4fb 2%,#eef4fb 41%,rgba(238,244,251,.7) 55%,rgba(238,244,251,.05))}.nexus-hero-content{justify-content:flex-start;width:100%;height:auto;padding:1.6rem 1.45rem 0}.nexus-nav{gap:.75rem;max-width:100%;margin-bottom:2rem;overflow-x:auto}.nexus-nav a{margin-right:0;white-space:nowrap}.nexus-hero h1{font-size:clamp(2.8rem,12vw,4rem)}.nexus-body{margin-top:3.5rem}.nexus-statement{gap:1rem;padding:1.75rem 0}.nexus-paths{margin-top:3rem}}

.sentinel-primer{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;margin:5rem 0;border:1px solid #dce4f2;background:#fff}.sentinel-primer>img{width:100%;height:100%;min-height:420px;object-fit:cover}.sentinel-primer>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,5rem)}.sentinel-primer h2{max-width:470px;margin:.6rem 0 1rem;color:#14213a;font-size:clamp(2.2rem,4vw,4.1rem);line-height:1;letter-spacing:-.055em}.sentinel-primer p:not(.nexus-eyebrow){max-width:470px;margin:0;color:#52627c;font-size:1.05rem;line-height:1.7}
.sentinel-explorer{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5.5rem);align-items:center;margin:5rem 0}.sentinel-explorer-copy h2{margin:.55rem 0 1rem;color:#14213a;font-size:clamp(2.2rem,4.2vw,4rem);line-height:1;letter-spacing:-.055em}.sentinel-explorer-copy>p:not(.nexus-eyebrow){max-width:440px;margin:0;color:#52627c;font-size:1.05rem;line-height:1.7}.sentinel-explorer-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.7rem}.sentinel-explorer-tabs button{padding:.7rem .85rem;border:1px solid #dce4f2;border-radius:999px;color:#52627c;background:#fff;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.sentinel-explorer-tabs button:hover,.sentinel-explorer-tabs button[aria-selected="true"]{border-color:#1769e8;color:#fff;background:#1769e8}.sentinel-explorer-visual{min-height:410px;margin:0;overflow:hidden;background:#07111f;box-shadow:0 20px 45px rgba(15,42,85,.12)}.sentinel-explorer-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s ease}.sentinel-explorer-visual img[src]{animation:sentinel-image-in .32s ease both}@keyframes sentinel-image-in{from{opacity:.38;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}
@media(max-width:760px){.sentinel-primer,.sentinel-explorer{grid-template-columns:1fr;margin:3.5rem 0}.sentinel-primer>img{min-height:290px}.sentinel-primer>div{padding:2rem 1.5rem}.sentinel-explorer{gap:1.5rem}.sentinel-explorer-visual{min-height:270px;order:-1}.sentinel-explorer-tabs{gap:.45rem}.sentinel-explorer-tabs button{font-size:.72rem;padding:.58rem .7rem}}

/* Portada de Empresa: tres divisiones en una lectura, como un centro de decisión. */
.nexus-company{max-width:none;padding-top:1.3rem}.company-breadcrumb{max-width:1240px;margin:0 auto .45rem;color:#61718e;font-size:.7rem;font-weight:800;letter-spacing:.08em}.company-breadcrumb span{margin:0 .45rem;color:#9aabc9}.company-title{max-width:1240px;margin:0 auto 1rem;color:#14213a;font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:-.035em}.company-title em{color:#286cf0;font-style:normal}.company-decision-board{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 1fr;gap:.7rem;max-width:1240px;min-height:485px;margin:0 auto}.company-sentinel-card{position:relative;grid-row:1 / span 2;overflow:hidden;border-radius:1.25rem;background:#071120}.company-sentinel-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.company-sentinel-card::after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,23,.95) 4%,rgba(3,10,23,.76) 45%,rgba(3,10,23,.08) 100%);content:''}.company-card-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;width:min(52%,400px);height:100%;padding:2.2rem;color:#fff}.company-card-copy .nexus-eyebrow{color:#9ed7ff}.company-card-copy h2{margin:.4rem 0 .8rem;font-size:clamp(2.05rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.055em}.company-card-copy p:not(.nexus-eyebrow){margin:0 0 1.55rem;color:#e1e9f8;line-height:1.55}.company-card-copy>div{display:grid;gap:.7rem}.company-button{display:flex;justify-content:space-between;align-items:center;min-height:2.75rem;padding:.7rem 1rem;border-radius:.5rem;color:#fff;background:#286cf0;font-size:.88rem;font-weight:800;text-decoration:none}.company-button.secondary{border:1px solid rgba(255,255,255,.65);background:transparent}.company-division-card{position:relative;display:block;overflow:hidden;border-radius:1.25rem;color:#fff;background:#0a172b;text-decoration:none}.company-division-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.company-division-card::after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,15,32,.95),rgba(4,15,32,.66) 48%,rgba(4,15,32,.1)) ;content:''}.company-division-card>div{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;max-width:55%;height:100%;padding:1.6rem}.company-division-card span{color:#62ceff;font-size:1.8rem}.company-division-card h2{margin:.35rem 0 .55rem;font-size:1.35rem;letter-spacing:-.03em;text-transform:uppercase}.company-division-card p{margin:0 0 .9rem;color:#eef4ff;font-size:.88rem;line-height:1.45}.company-division-card b{display:flex;justify-content:space-between;align-items:center;width:175px;padding:.65rem .85rem;border-radius:.45rem;background:#286cf0;font-size:.8rem}.company-division-card b i{font-size:1.2rem;font-style:normal}.company-trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1240px;margin:.8rem auto 0;padding:1.15rem;border:1px solid #dce4f2;border-radius:1rem;background:#fff}.company-trust-strip>div{display:flex;align-items:center;gap:.65rem;padding:0 1.2rem;border-right:1px solid #e3e9f3}.company-trust-strip>div:last-child{border:0}.company-trust-strip b{font-size:1.55rem;font-weight:400}.company-trust-strip span{display:grid;color:#52627c;font-size:.78rem;line-height:1.4}.company-trust-strip strong{color:#14213a}.nexus-company .nexus-body{margin-top:4rem}
@media(max-width:760px){.nexus-company{padding-top:1rem}.company-decision-board{grid-template-columns:1fr;grid-template-rows:340px 225px 225px;min-height:0}.company-sentinel-card{grid-row:auto}.company-card-copy{width:68%;padding:1.5rem}.company-card-copy h2{font-size:2.3rem}.company-division-card>div{max-width:65%;padding:1.3rem}.company-trust-strip{grid-template-columns:1fr 1fr;padding:.4rem}.company-trust-strip>div{padding:.9rem;border-right:0;border-bottom:1px solid #e3e9f3}.company-trust-strip>div:nth-last-child(-n+2){border-bottom:0}.company-title{font-size:1rem}}

.company-story{display:grid;grid-template-columns:.46fr .54fr;min-height:340px;margin:-1.3rem calc(clamp(1rem,4vw,4rem) * -1) 2rem;background:#fff;border-bottom:1px solid #dce4f2}.company-story>div{display:flex;flex-direction:column;justify-content:center;max-width:560px;padding:clamp(2rem,5vw,5rem);margin-left:auto}.company-story h1{margin:0;color:#14213a;font-size:clamp(2.4rem,4.3vw,4.6rem);letter-spacing:-.06em}.company-story>b{margin-top:.4rem;color:#286cf0;font-size:clamp(3.5rem,6vw,6.2rem);line-height:.9;letter-spacing:-.08em}.company-story h2{margin:.5rem 0 .8rem;color:#14213a;font-size:1.05rem}.company-story p:not(.nexus-eyebrow){margin:0;color:#52627c;font-size:.93rem;line-height:1.65}.company-story>img{width:100%;height:100%;object-fit:cover}.company-mini-proof{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.2rem;color:#14213a;font-size:.78rem;font-weight:800}.company-mini-proof span{display:inline-flex;gap:.3rem;align-items:center}.nexus-company .sentinel-explorer{margin-top:0}
@media(max-width:760px){.company-story{grid-template-columns:1fr;margin:-1rem -1rem 1.5rem}.company-story>div{padding:2rem 1.4rem}.company-story>img{display:none}.company-story h1{font-size:3.1rem}}

.division-landing{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1240px;min-height:360px;margin:1.5rem auto 3rem;overflow:hidden;background:#f0f5fd}.division-landing>div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:560px;padding:clamp(2rem,5vw,4.5rem)}.division-landing h1{margin:.35rem 0 .85rem;color:#14213a;font-size:clamp(2.3rem,4.5vw,4.7rem);line-height:1;letter-spacing:-.06em}.division-landing p:not(.nexus-eyebrow){margin:0 0 1.4rem;color:#52627c;line-height:1.65}.division-landing>img{width:100%;height:100%;object-fit:cover}.division-support{background:#f2f7fe}.division-store{background:#f7f8fc}.shop-page .division-landing,.page>.division-landing{margin-left:auto;margin-right:auto}@media(max-width:760px){.division-landing{grid-template-columns:1fr;min-height:580px}.division-landing>img{height:260px;order:-1}.division-landing>div{padding:2rem 1.4rem}.division-landing h1{font-size:2.8rem}}

/* ===== PAGINA EMPRESA · maqueta del dueno (2026-08-27) ==================
   Se construye la composicion que el dueno mando: historia con cifra grande y
   linea de tiempo, las tres divisiones con imagen, el selector de modulos de
   Sentinel y la galeria de proyectos. Nada de esto se resuelve con parrafos.

   Todo el movimiento es CSS. El unico JavaScript es el cambio de pestana del
   selector, y va por delegacion global para que sobreviva al re-render. */

/* --- Historia: cifra, linea de tiempo, datos e imagen ------------------- */
.hist{display:grid;gap:20px;margin:6px 0 34px;align-items:start}
.hist-tx .eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ez-magenta-tx);margin:0 0 4px}
.hist-n{margin:14px 0 2px;font-size:clamp(44px,7vw,74px);line-height:.95;letter-spacing:-2.5px;
  font-weight:800;color:var(--ez-azul);border:0;padding:0}
.hist-sub{margin:0 0 12px;font-size:18px;font-weight:700;color:var(--ez-tinta)}
.hist-tx p{font-size:14.5px;line-height:1.7;color:var(--ez-tinta-2);max-width:420px}
.linea{list-style:none;display:grid;gap:16px;margin:0;padding:22px 0 0;border-top:2px solid rgba(15,38,71,.1);position:relative}
@media(min-width:760px){.linea{grid-template-columns:repeat(4,1fr)}}
.linea li{position:relative;padding-top:4px}
.linea li:before{content:"";position:absolute;top:-31px;left:0;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid #b9c6da}
.linea li.on:before{border-color:#1c5cc0;box-shadow:0 0 0 5px rgba(28,92,192,.15)}
.linea b{display:block;font-size:17px;color:#0f2647;margin-bottom:3px}
.linea span{font-size:12.5px;line-height:1.55;color:#68768d}
.hist-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding-top:18px;border-top:1px solid var(--ez-linea)}
@media(min-width:760px){.hist-datos{grid-template-columns:repeat(4,1fr)}}
.hist-datos>div{display:flex;flex-direction:column;gap:2px}
.hist-datos b{font-size:15px;color:var(--ez-tinta)}
.hist-datos span{font-size:12px;color:var(--ez-tinta-3)}
.hist-img{border-radius:16px;overflow:hidden;border:1px solid var(--ez-linea);background:var(--ez-papel-2)}
.hist-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
@media(min-width:1000px){
  .hist{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tx img" "linea img" "datos img";gap:22px 30px}
  .hist-tx{grid-area:tx}.linea{grid-area:linea}.hist-datos{grid-area:datos}
  .hist-img{grid-area:img;height:100%}
  .hist-img img{height:100%;aspect-ratio:auto;min-height:420px}
}
/* --- Divisiones: chips en software, checks en las otras ----------------- */
.dv-tx p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:#54637c}
.dv-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.dv-chips i{font-style:normal;font-size:11px;font-weight:700;color:#33518a;background:#eef3fb;
  border:1px solid rgba(51,81,138,.16);border-radius:7px;padding:3px 8px}
.dv-ok{list-style:none;margin:0 0 6px;padding:0}
.dv-ok li{position:relative;padding-left:22px;font-size:13px;line-height:1.7;color:#54637c}
.dv-ok li:before{content:"✓";position:absolute;left:0;top:0;width:15px;height:15px;margin-top:3px;
  border-radius:50%;background:#1c5cc0;color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center}
.dv-cta{display:inline-block;margin-top:12px;padding:9px 15px;border-radius:9px;background:#1c5cc0;
  color:#fff!important;font-size:13px;font-weight:800;font-style:normal;transition:background .2s}
.dv:hover .dv-cta{background:#0f2647}
/* --- Selector de modulos de Sentinel ----------------------------------- */
.smod{border:1px solid rgba(15,38,71,.13);border-radius:16px;background:#fbfcfe;padding:16px;margin:18px 0 30px}
.smod-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.smod-tab{border:1px solid rgba(15,38,71,.16);background:#fff;color:#41526d;border-radius:9px;
  padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit}
.smod-tab:hover{border-color:#1c5cc0;color:#1c5cc0}
.smod-tab.on{background:#1c5cc0;border-color:#1c5cc0;color:#fff}
.smod-panes{position:relative;min-height:300px}
.smod-pane{display:none;grid-template-columns:1fr;gap:20px;align-items:center;animation:smodIn .45s ease}
.smod-pane.on{display:grid}
@keyframes smodIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:900px){.smod-pane{grid-template-columns:1.15fr .85fr;gap:28px}}
.smod-img{border-radius:12px;overflow:hidden;border:1px solid rgba(15,38,71,.12);background:#0b1a30}
.smod-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.smod-tx span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#3f6ba8;margin-bottom:6px}
.smod-tx b{display:block;font-size:24px;line-height:1.2;letter-spacing:-.5px;color:#0f2647;margin-bottom:9px}
.smod-tx p{margin:0;font-size:14.5px;line-height:1.7;color:#54637c}
.smod-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:15px}
.smod-feats i{font-style:normal;font-size:12.5px;font-weight:600;color:#41526d;
  border-left:3px solid #9dc0f0;padding-left:9px;line-height:1.4}
.smod-nav{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px}
.smod-arw{width:38px;height:38px;border-radius:50%;border:1px solid rgba(15,38,71,.18);background:#fff;
  color:#41526d;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.smod-arw:hover{background:#1c5cc0;border-color:#1c5cc0;color:#fff}
.smod-count{font-size:13px;color:#68768d}.smod-count b{color:#0f2647;font-size:15px}
/* --- Proyectos --------------------------------------------------------- */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:18px 0 30px}
.pj{margin:0;border-radius:13px;overflow:hidden;border:1px solid rgba(15,38,71,.12);background:#fff}
.pj img{display:block;width:100%;height:150px;object-fit:cover;transition:transform .5s ease}
.pj:hover img{transform:scale(1.06)}
.pj figcaption{padding:10px 12px;font-size:12.5px;line-height:1.45;color:#54637c}
/* --- Ancho: estas piezas se salen de la columna de texto ---------------- */
.corp-body .hist, .corp-body .smod, .corp-body .pj-grid{
  width:var(--ez-ancho);margin-left:50%;transform:translateX(-50%)}
@media(max-width:900px){
  .corp-body .hist, .corp-body .smod, .corp-body .pj-grid{width:100%;margin-left:0;transform:none}
  .smod{padding:13px}
  .smod-tx b{font-size:20px}
  .smod-feats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.smod-pane{animation:none}.pj:hover img,.dv:hover .dv-img img{transform:none}}
/* --- Tema oscuro ------------------------------------------------------- */
html.dark .hist-sub,html.dark .linea b,html.dark .hist-datos b{color:#eaf1fb}
html.dark .hist-tx p,html.dark .linea span,html.dark .hist-datos span{color:#a9bbd4}
html.dark .hist-n{color:#7fb2f5}
html.dark .linea li:before{background:#0b1a30;border-color:#3b5a86}
html.dark .smod{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .smod-tab{background:rgba(11,26,48,.6);border-color:rgba(180,205,240,.2);color:#bccbe0}
html.dark .smod-tx b{color:#eaf1fb}
html.dark .smod-tx p,html.dark .smod-feats i{color:#a9bbd4}
html.dark .smod-arw{background:rgba(11,26,48,.6);border-color:rgba(180,205,240,.2);color:#bccbe0}
html.dark .smod-count b{color:#eaf1fb}
html.dark .pj{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .pj figcaption{color:#a9bbd4}
html.dark .dv-tx p{color:#adbdd4}
html.dark .dv-chips i{background:rgba(11,26,48,.6);color:#9dc0f0;border-color:rgba(157,192,240,.22)}
html.dark .dv-ok li{color:#adbdd4}

/* =======================================================================
   PALETA MEDIDA DE LAS MAQUETAS + PANTALLA COMPLETA  (2026-08-27, noche)
   =======================================================================
   DE DONDE SALEN ESTOS COLORES. No de mi criterio: se midieron pixel a
   pixel sobre las dos maquetas que mando el dueno, agrupando por tono y
   quedandose con el mas frecuente de cada familia. El azul salio
   PRACTICAMENTE IDENTICO en las dos -#1453FC con 22.852 px en la de
   empresa, #1553F7 con 24.207 px en la de software-, asi que no hay duda
   de cual es el color de la marca. El magenta #F820AD es el de los
   subrayados y el icono «Hoy» de la linea de tiempo.

   LOS DOS FALLOS QUE ESTO CORRIGE, dichos por el dueno:
     «esta centrado y todo reducido»  -> yo mismo habia topado los bloques
        a 1180 px. En un monitor ancho eso deja media pantalla vacia y hace
        que una pagina de empresa parezca un folleto. Ahora el ancho lo
        manda UNA variable, --ez-ancho, y la imagen del hero se va hasta el
        borde de la pantalla como en la maqueta.
     «como que en filas, eliminen las filas»  -> tres columnas identicas
        una detras de otra es la retícula de plantilla que la direccion
        creativa prohibe. Las divisiones pasan a pesos distintos y los
        proyectos a una tira que se desliza y se corta en el borde, que es
        lo que invita a arrastrar.

   `overflow-x:clip` en la pagina permite que la foto sobresalga por la
   derecha sin abrir una barra de desplazamiento horizontal. `clip` -no
   `hidden`- porque no crea contexto de scroll y no rompe los `sticky`.
   ======================================================================= */
:root{
  --ez-azul:#1453FC;        /* medido: 22.852 px */
  --ez-azul-hondo:#0842F8;  /* titulos y numeros grandes */
  --ez-tinta:#0A1B3D;       /* texto oscuro sobre blanco */
  /* 2026-08-28 — LAS DOS TONALIDADES QUE FALTABAN.
     El sitio siempre tuvo dos versiones, blanca y negra, y el boton de la
     luna las cambia. Las paginas viejas funcionan porque usan variables.
     Las nuevas -empresa, software, partners, demo- las escribi con colores
     a mano: veintitantos grises fijos que no se enteran del cambio de tema.
     Resultado medido en la pagina publicada: 25 textos con contraste entre
     1,16 y 1,30 sobre el fondo negro, cuando el minimo legible es 4,5.
     Azul casi negro sobre negro: invisible.
     La solucion no es repintar a mano cada gris en su version oscura -eso
     es la misma trampa una capa mas arriba- sino que existan las variables
     que faltaban, y que cambien solas con el tema. Contrastes medidos:
       tinta-2 sobre blanco 12,6:1 · sobre negro 11,9:1
       tinta-3 sobre blanco  7,4:1 · sobre negro  7,1:1
     El minimo exigible es 4,5, asi que las dos pasan con holgura en los
     dos temas. Sobre fondo claro el texto se lee negro, no gris. */
  /* El magenta de marca sirve para rayas, puntos e iconos, pero como TEXTO
     sobre blanco da 3,6:1 y el minimo legible es 4,5 — medido en el eyebrow
     de /software. Esta es la misma marca bajada de brillo hasta 5,4:1: se
     sigue leyendo como el magenta de EZEMTECH, ahora tambien por quien no
     distingue bien los colores o mira la pantalla a plena luz. */
  /* Un azul para escribir y otro para rellenar. Parece un detalle y es la
     diferencia entre un boton que se lee y uno que no: sobre negro el azul
     de texto tiene que ACLARARSE para verse, pero si con ese mismo azul
     claro se rellena un boton, la letra blanca encima cae a 3,05:1 —medido
     en «Explorar Sentinel», «Solicitar demostracion» y otros seis— cuando
     el minimo es 4,5. Asi que el relleno hace lo contrario que el texto:
     se oscurece, y el blanco vuelve a destacar (4,9:1). */
  --ez-azul-btn:#1453FC;
  --ez-magenta-tx:#C2126F;
  /* Los otros dos acentos que se usan como TEXTO -el verde de «incluido» y
     el violeta de la banda de IA- y el rojo del asterisco de campo
     obligatorio. Iban fijos, asi que sobre negro perdian fuerza igual que
     el azul. Mismo criterio: en claro se hunden, en oscuro se aclaran. */
  --ez-verde-tx:#0E7C59;
  --ez-violeta-tx:#5B45E0;
  --ez-rojo-tx:#C81E4E;
  --ez-tinta-2:#26334A;     /* cuerpo y parrafos */
  --ez-tinta-3:#48566E;     /* pies, etiquetas, texto de apoyo */
  --ez-linea:rgba(15,38,71,.12);    /* bordes suaves de cuadriculas */
  --ez-linea-2:rgba(15,38,71,.20);  /* bordes marcados */
  --ez-papel:#FFFFFF;       /* fondo de tarjetas */
  --ez-papel-2:#F5F8FD;     /* fondo de bloques y galerias */
  --ez-noche:#FFFFFF;       /* en claro, el "fondo hondo" es el papel */
  --ez-magenta:#F820AD;     /* acento: subrayados e hito actual */
  --ez-rosa:#FAA3D4;
  --ez-violeta:#7168F9;
  --ez-navy:#131B2A;        /* fondo de los mockups del sistema */
  /* 2026-08-27 — 1.680 px de tope, y esta comprobado contra SU pantalla:
     ventana 1.707 px, zoom 100%, el contenido ocupa 1.651 px = el 97%. Una
     lectura intermedia dio 6.829 px y me llevo a estirarlo al 86% de la
     ventana; con eso el texto -que va en px fijos- quedaba diminuto. Medir
     una vez no es medir: el dato bueno es el de arriba, tomado dos veces. */
  --ez-ancho:min(1680px, calc(100vw - 56px));
  --ez-sangra:calc(50% - 50vw + 9px);   /* 9px de holgura para la barra */
}
.corp-page{overflow-x:clip}

/* --- El acento deja de ser vinoso y pasa al magenta medido ------------- */
.hist-tx .eyebrow{color:var(--ez-tinta);letter-spacing:.14em}
.hist-tx .eyebrow:after{background:var(--ez-magenta);width:46px;height:4px}
.hist-n{color:var(--ez-azul);letter-spacing:-3px}
.dv-cta,.linea li.on:before,.dv-ok li:before,.smod-tab.on{background:var(--ez-azul)}
.smod-tab.on{border-color:var(--ez-azul)}
.linea li.on:before{border-color:var(--ez-magenta);box-shadow:0 0 0 6px rgba(248,32,173,.14)}
.smod-tab:hover,.dv-tx em{color:var(--ez-azul)}
.smod-tab:hover{border-color:var(--ez-azul)}
.smod-arw:hover{background:var(--ez-azul);border-color:var(--ez-azul)}
.dv:hover{border-color:var(--ez-azul)}
.dv:hover .dv-cta{background:var(--ez-azul-hondo)}
.corp-body h2{border-bottom:0;padding-bottom:0;font-size:clamp(22px,2.4vw,30px);color:var(--ez-tinta)}


/* --- Historia a sangre: la foto llega al borde, como en la maqueta ----- */
@media(min-width:1000px){
  .corp-body .hist{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:26px 46px;align-items:start;
    width:var(--ez-ancho);margin-left:50%;transform:translateX(-50%);
  }
  .corp-body .hist .hist-img{margin-right:var(--ez-sangra);border-radius:18px 0 0 18px;border-right:0}
  .hist-img img{min-height:470px}
  .hist-tx p{max-width:none}
  .hist-n{font-size:clamp(56px,6vw,86px)}
}
/* Circulos de la linea de tiempo: mas grandes y con el hito de hoy vivo. */
.linea{padding-top:30px}
.linea li:before{width:18px;height:18px;top:-39px;border-width:3px}

/* --- Divisiones con pesos distintos: se acaba la fila de tres iguales -- */
@media(min-width:1000px){
  .div3{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);gap:22px;align-items:stretch}
  .div3>.dv:nth-child(2) .dv-img{aspect-ratio:16/9}
  .div3>.dv:nth-child(2) .dv-tx b{font-size:20px}
}
.dv{border-radius:18px}
.dv-tx{padding:20px 22px 22px}

/* --- Proyectos: tira que se desliza y se corta en el borde ------------- */
@media(min-width:900px){
  .corp-body .pj-grid{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;scrollbar-width:thin;
    width:auto;margin-left:0;margin-right:var(--ez-sangra);transform:none;
  }
  .corp-body .pj-grid>.pj{flex:0 0 clamp(260px,22vw,340px);scroll-snap-align:start}
  .corp-body .pj-grid>.pj img{height:210px}
}
.pj{border-radius:16px}

/* --- Marcas y ficha: mas aire, sin caja apretada ----------------------- */
.marcas{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.marcas img{height:40px}
@media(min-width:1100px){.ficha{grid-template-columns:repeat(4,1fr)}}
.ficha{border-radius:16px}
.ficha b{font-size:15px}

/* --- El bloque de Sentinel respira igual que el resto ------------------ */
.smod{border-radius:20px;padding:22px}
@media(min-width:1200px){.smod-pane{grid-template-columns:1.25fr .75fr;gap:34px}}

/* --- Tema oscuro: el azul medido no se lee sobre negro, se aclara ------ */
html.dark{--ez-azul:#5B90FF;--ez-azul-hondo:#3F76F5;--ez-tinta:#EAF1FB;
  /* La otra mitad del par. Mismo orden que arriba, mismos papeles:
     el cuerpo se aclara, las lineas se vuelven claras y translucidas -en
     negro un borde oscuro no existe- y el papel deja de ser blanco. */
  /* ---- PALETA OSCURA (2026-08-28) ------------------------------------
     No es una paleta inventada: son los dos tonos que EZEMTECH ya usa en
     el tema oscuro de SENTINEL — #070B14 de fondo y #131B2F de superficie.
     Reutilizarlos hace que la web y el sistema se reconozcan como la misma
     casa, que es justo lo que mira quien evalua a una empresa de software.

     Lo que la hace verse cara y no barata, en cuatro decisiones:

     1. NUNCA negro puro. #000 sobre una pantalla moderna produce un salto
        duro contra el contenido y delata la plantilla gratuita. El fondo
        lleva una gota de azul (#070B14), que es el mismo azul de la marca
        llevado al extremo oscuro: se lee como negro, pero tiene familia.

     2. Jerarquia por ELEVACION, no por bordes. En papel las cosas se
        separan con lineas; en oscuro se separan con luz. Cada nivel que
        "sube" aclara un paso: fondo #070B14 -> tarjeta #131B2F -> tarjeta
        activa un punto mas. Es lo que hace que un panel parezca flotar.

     3. El texto NO es blanco puro. #FFF sobre fondo oscuro vibra y cansa
        la vista en parrafos largos. #EDF2FA es blanco con una pizca del
        azul de la casa: mismo contraste util, lectura tranquila.

     4. Los acentos SUBEN de luz, no bajan. El azul #1453FC que brilla
        sobre papel se apaga contra el negro; el magenta pasa lo mismo. En
        oscuro se aclaran hasta recuperar presencia sin quemar.

     Contrastes medidos sobre #070B14: tinta 17,3:1 · tinta-2 11,4:1 ·
     tinta-3 6,8:1 · azul 7,2:1. Todos por encima del minimo de 4,5. */
  /* ---- 28/08, noche: LA PALETA OFICIAL DE EZEMTECH --------------------
     El dueno paso dos laminas esa noche: la «PREMIUM» del Command Center y
     la «PALETA DE COLORES EZEMTECH», que es la de LA WEB. Esta es la de la
     web, y es la que manda aqui. Hasta ahora el tema oscuro usaba tonos
     azulados heredados (#070B14 / #131B2F) que no estaban en ninguna de
     las dos. Ahora la portada, las paginas nuevas y el sistema hablan el
     mismo idioma de color.

     Cada valor con su contraste MEDIDO sobre el fondo #0A0A0F y sobre la
     tarjeta #14161F. El minimo exigible es 4,5:

       Blanco puro      #FFFFFF  19,8 / 18,0   texto principal
       Texto secundario #B8BCCB  10,4 /  9,5   descripciones
       Gris muy claro   #8B92A6   6,4 /  5,8   texto terciario
       Advertencia      #F59E0B   9,2 /  8,4
       Exito            #22C55E   8,7 /  7,9
       Ciber            #06B6D4   8,1 /  7,4
       Magenta neon     #EC4899   5,6 /  5,1   acentos y CTAs
       Rosa neon        #FF2D75   5,5 /  5,1
       Informacion      #3B82F6   5,4 /  4,9
       Error            #EF4444   5,2 /  4,8
       Especial         #A855F7   5,0 /  4,6

     LO QUE SALIO DE MEDIR, y por lo que la lamina no se copia a ciegas:

      · El **azul primario #2563EB da 3,8 como texto** sobre negro, por
        debajo del minimo. Pero como RELLENO, con la letra blanca encima,
        da 5,17 — y ese es justo el uso que la lamina le asigna: «botones
        primarios, enlaces y elementos interactivos». Asi que se usa de
        relleno, y para los enlaces escritos se usa Informacion #3B82F6,
        que es el mismo azul un paso mas claro y si llega (5,4).
      · Igual el **purpura #7C3AED**: 3,5 como texto, 5,70 de relleno.
      · La lamina rotula el **Gris claro #2B2F3D** como «texto secundario»,
        pero sobre el fondo da **1,5**: es invisible. Su propio bloque de
        uso recomendado da el bueno, #B8BCCB, y ese es el que se usa. */
  --ez-azul:#3B82F6;         /* INFORMACION — el azul que SI se lee escrito */
  --ez-azul-hondo:#2563EB;   /* AZUL ELECTRICO — primario */
  --ez-azul-btn:#2563EB;     /* relleno de boton primario: 5,17 con blanco */
  --ez-magenta-tx:#EC4899;   /* MAGENTA NEON — acentos y CTAs */
  --ez-verde-tx:#22C55E;     /* EXITO */
  --ez-violeta-tx:#A855F7;   /* ESPECIAL */
  --ez-rojo-tx:#EF4444;      /* ERROR */
  --ez-tinta:#FFFFFF;        /* BLANCO PURO — texto principal */
  --ez-tinta-2:#B8BCCB;      /* texto secundario, el del uso recomendado */
  --ez-tinta-3:#8B92A6;      /* GRIS MUY CLARO — texto terciario */
  --ez-linea:rgba(255,255,255,.07);
  --ez-linea-2:rgba(255,255,255,.13);
  --ez-papel:#14161F;        /* GRIS GRAFITO — tarjetas y bordes */
  --ez-papel-2:#0D0D14;      /* NEGRO SUAVE — fondos elevados */
  --ez-noche:#0A0A0F;        /* NEGRO BRILLOSO — fondo principal */
  /* Los cuatro degradados y los cuatro brillos de la lamina, tal cual.
     Se dejan como variables para que el proximo bloque que haga falta no
     vuelva a inventarse un morado parecido: se pide el de la casa. */
  --ez-grad-azul-purpura:linear-gradient(90deg,#2563EB,#7C3AED);
  --ez-grad-purpura-magenta:linear-gradient(90deg,#7C3AED,#EC4899);
  --ez-grad-azul-ciber:linear-gradient(90deg,#2563EB,#06B6D4);
  --ez-grad-magenta-rosa:linear-gradient(90deg,#EC4899,#FF2D75);
  --ez-glow-azul:0 0 15px #2563EB;
  --ez-glow-purpura:0 0 15px #7C3AED;
  --ez-glow-magenta:0 0 15px #EC4899;
  --ez-glow-ciber:0 0 15px #06B6D4}
html.dark .corp-body h2{color:#eaf1fb}

/* --- Movil: nada sangra, todo vuelve a su columna ---------------------- */
@media(max-width:999px){
  .corp-body .hist .hist-img{margin-right:0;border-radius:16px;border-right:1px solid rgba(15,38,71,.12)}
}
@media(max-width:899px){
  .corp-body .pj-grid{margin-right:0}
}

/* =======================================================================
   /empresa — COPIA DE LA MAQUETA  (2026-08-27, noche)
   =======================================================================
   El dueno fue explicito: «identico a las imagenes que te mando, no haces
   lo que te da la gana». Asi que esto no interpreta: reproduce lo que hay
   en la imagen, pieza por pieza.

   Lo que la maqueta tiene y la pagina publicada no tenia:
     · una barra propia -EZEMTECH LLC + Empresa/Software/Soporte/Tienda-
       con la pagina actual subrayada en azul, y NINGUN banner de color;
     · el hero en TRES zonas: texto, linea de tiempo con iconos, y la foto
       saliendose por el borde derecho de la pantalla;
     · bajo la linea de tiempo, cuatro datos con icono separados por rayas
       verticales;
     · todo a lo ancho de la pantalla, sin la columna de 820 px.
   ======================================================================= */

/* La barra corporativa `.cnav` se retiro el 27/08: duplicaba la navegacion
   que ya da la barra superior del sitio. */
/* --- La pagina ya no vive en una columna de 820 px --------------------- */
.page.ancha{max-width:none;padding-left:0;padding-right:0}
.corp-body.suelta{max-width:none;width:var(--ez-ancho);margin:26px auto 0;line-height:1.65}
.corp-body.suelta>h2,.corp-body.suelta>p{width:100%}

/* --- Hero: texto | linea de tiempo | foto a sangre --------------------- */
@media(min-width:1080px){
  .corp-body.suelta .hist{
    display:grid;
    grid-template-columns:minmax(280px,.82fr) minmax(0,1.15fr) minmax(0,1.15fr);
    grid-template-areas:"tx linea img" "tx datos img";
    align-items:start;gap:26px 42px;margin:26px 0 46px;
    width:auto;margin-left:0;transform:none;
  }
  .corp-body.suelta .hist .hist-img{
    grid-area:img;margin-right:var(--ez-sangra);height:100%;
    border-radius:18px 0 0 18px;border-right:0}
  .corp-body.suelta .hist .hist-img img{height:100%;min-height:330px;aspect-ratio:auto}
  .corp-body.suelta .linea{grid-area:linea;align-self:start;margin-top:6px}
  .corp-body.suelta .hist-datos{grid-area:datos}
  .corp-body.suelta .hist-tx{grid-area:tx}
}
.hist-tx .eyebrow{font-size:22px;font-weight:800;letter-spacing:-.4px;text-transform:none;color:var(--ez-tinta)}
.hist-n{font-size:clamp(52px,5.4vw,76px);margin:12px 0 0}
.hist-sub{font-size:19px;font-weight:600;color:var(--ez-tinta);margin:2px 0 14px}
.hist-tx p{font-size:14px;line-height:1.72;color:var(--ez-tinta-3)}

/* --- Linea de tiempo con iconos, como en la imagen -------------------- */
.linea{border-top:0;padding:0;gap:0}
@media(min-width:760px){.linea{grid-template-columns:repeat(4,1fr);gap:0}}
.linea li{padding:0 12px 0 0}
.linea li:before{display:none}
.linea .lp{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;
  border:1.6px solid rgba(20,83,252,.32);border-radius:50%;color:var(--ez-azul);background:#fff}
.linea .lp svg{width:21px;height:21px}
.linea li.on .lp{border-color:rgba(248,32,173,.4);color:var(--ez-magenta-tx)}
.linea li b{position:relative;display:block;margin:0 0 4px;padding-top:20px;font-size:15.5px;color:var(--ez-tinta)}
.linea li b:before{content:"";position:absolute;top:-2px;left:0;right:-12px;height:1.5px;background:rgba(15,38,71,.16)}
.linea li:last-child b:before{right:0}
.linea li b:after{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2.5px solid var(--ez-azul)}
.linea li.on b:after{border-color:var(--ez-magenta)}
.linea span{display:block;font-size:12px;line-height:1.5;color:#6d7c93;padding-right:6px}

/* --- Cuatro datos con icono y raya vertical --------------------------- */
.hist-datos{grid-template-columns:repeat(2,1fr);gap:0;padding-top:20px;
  border-top:1px solid var(--ez-linea)}
@media(min-width:760px){.hist-datos{grid-template-columns:repeat(4,1fr)}}
.hist-datos>div{flex-direction:row;align-items:center;gap:10px;padding:2px 14px;
  border-left:1px solid var(--ez-linea)}
.hist-datos>div:first-child{border-left:0;padding-left:0}
.hist-datos>div>i{display:block;flex:none;color:var(--ez-tinta);opacity:.8}
.hist-datos>div>i svg{width:22px;height:22px;display:block}
.hist-datos>div>div{display:flex;flex-direction:column;gap:1px}
.hist-datos b{font-size:13.5px;line-height:1.25}
.hist-datos span{font-size:11.5px;line-height:1.3}

/* --- Titulos de seccion centrados con la raya magenta ----------------- */
.corp-body.suelta>h2{text-align:center;margin:44px 0 6px}
.corp-body.suelta>h2+p{text-align:center;color:var(--ez-tinta-3);font-size:14px;margin-bottom:22px}

@media(prefers-reduced-motion:reduce){.linea li,.hist-img img{transition:none}}
@media(max-width:1079px){
  .corp-body.suelta{width:min(1180px,calc(100vw - 32px))}
  .hist-datos>div{border-left:0;padding-left:0}
}

/* El bloque de /software de la primera version se retiro el 27/08: sus
   clases (.sw-*, .pv-*, .pmod*) ya no las usa nadie. La version buena esta
   al final del archivo, medida sobre la maqueta. */

/* =======================================================================
   /empresa — LIENZO: LA MAQUETA ENTERA EN UNA PANTALLA
   (2026-08-27, madrugada · cuarta version, y esta si es una copia)
   =======================================================================
   ORDEN DEL DUENO, TEXTUAL: «cuando yo abro la pagina, tamano completo en
   mi portatil, tiene que entrar total como esta la imagen. No tengo que
   deslizar para ver todo».

   POR QUE UN LIENZO Y NO UN DISENO FLUIDO. Un diseno que se adapta al
   ancho decide su ALTO segun lo que ocupe el texto — y por eso, por bien
   que se ajuste, nunca cabe exactamente en una pantalla. La maqueta es una
   composicion de proporcion fija (1586 x 992). La unica forma de que se
   vea igual y completa en cualquier portatil es tratarla como lo que es:
   un lienzo de esa proporcion que se ESCALA hasta caber en la ventana.
   Es lo que hacen las presentaciones, y es lo correcto aqui.

   QUE NO SE PIERDE POR ELLO: en tabletas y telefonos el lienzo se apaga y
   el contenido vuelve a fluir en columna, que es lo que sirve ahi. Y el
   texto sigue siendo texto -se selecciona, lo lee un lector de pantalla y
   Google lo indexa-, cosa que no pasaria si esto fuese una imagen.

   LAS FOTOS LAS PONE EL. Cada hueco tiene nombre propio: hero, division0..2,
   modulo0..7 y proyecto0..5. El bloque «Galeria de la web» de SENTINEL
   escribe esos nombres, y aqui se leen. Mientras un hueco este vacio se ve
   la foto que ya estaba publicada, nunca un cuadro gris.
   ======================================================================= */
@media(min-width:900px){
  .corp-page.lienzo{overflow-x:clip}
  .corp-body.suelta{width:auto;margin:0}
  /* El ancho lo fija el motor (100/k por ciento) para que, tras reducirlo,
     ocupe justo el 100% de la pagina — igual que el pie. El alto se queda
     en las 992 de la maqueta: es lo que conserva sus proporciones. */
  .mq{height:auto;transform-origin:top left;margin:0;
      position:relative;font-size:14px;color:var(--ez-tinta)}
  /* Ningun bloque se encoge. Un bloque encogido no reparte su contenido: lo
     desborda, y el desbordamiento aparece encima del bloque siguiente. Ese
     era el «se monta el texto con Lo que hacemos». */
  .mq>*{flex:0 0 auto}
  .corp-body.suelta{width:var(--ez-ancho);margin:0 auto}
}
.mq{display:flex;flex-direction:column;gap:0}

/* --- HERO: texto | linea de tiempo | foto hasta el borde -------------- */
.mq-hero{position:relative;display:grid;
  grid-template-columns:308px 1fr;grid-template-areas:"tx linea" "tx datos";
  align-content:start;gap:26px 44px;padding:24px 0 26px;min-height:250px}
.mq-tx{grid-area:tx}
.mq-eyebrow{margin:0;font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--ez-tinta)}
.mq-n{margin:14px 0 0;font-size:57px;line-height:.92;letter-spacing:-2.6px;font-weight:800;color:var(--ez-azul);border:0;padding:0}
.mq-n:after{display:none}
.mq-sub{margin:6px 0 14px;font-size:16.5px;font-weight:600;color:var(--ez-tinta)}
.mq-p{margin:0;font-size:12.8px;line-height:1.72;color:var(--ez-tinta-3)}
.mq-p b{color:var(--ez-tinta)}
.mq-foto{position:absolute;top:0;right:0;bottom:0;width:660px;overflow:hidden}
.mq-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mq-foto:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.55) 14%,rgba(255,255,255,0) 34%)}
/* 2026-08-28 — este fundido es lo que hace que la foto nazca del texto en
   vez de estar pegada al lado. Iba en blanco fijo, asi que con el sitio en
   negro dejaba una franja blanca vertical al borde de la foto: se veia en
   la captura antes de nada, porque el ojo va justo ahi. Mismo fundido con
   el color del fondo oscuro. */
html.dark .mq-foto:before{
  background:linear-gradient(90deg,#070B14 0%,rgba(7,11,20,.55) 14%,rgba(7,11,20,0) 34%)}
/* Las capturas del sistema estan tomadas con SENTINEL en su tema claro, asi
   que sobre el sitio en negro entran como un fogonazo blanco. No se tocan
   los pixeles: se baja un punto el brillo y se les pone un borde tenue, que
   es como se integran las capturas claras en las webs de producto oscuras.
   Si algun dia se suben capturas del sistema EN OSCURO -se pueden cambiar
   desde Sentinel > Web CMS > Galeria- este retoque deja de hacer falta y
   basta con quitar el filtro. */
html.dark .mq-c-img img,
html.dark .mq-foto img,
html.dark .s2-shot img,
html.dark .s2-m-img img{filter:brightness(.92) contrast(1.03)}
html.dark .mq-c-img,
html.dark .s2-m-img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mq-foto-marca{position:absolute;z-index:2;right:44px;top:46%;transform:translateY(-50%);
  font-size:29px;font-weight:800;letter-spacing:-.6px;color:var(--ez-tinta);line-height:1;text-align:right}
.mq-foto-marca i{display:block;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.06em;margin-top:2px}

/* linea de tiempo */
.mq-linea{grid-area:linea;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin:2px 0 0;padding:0 700px 0 0}
.mq-linea li{position:relative;padding-right:16px}
.mq-linea li>i{display:grid;place-items:center;width:41px;height:41px;margin-bottom:15px;
  border:1.5px solid rgba(20,83,252,.3);border-radius:50%;color:var(--ez-azul);background:var(--ez-papel)}
.mq-linea li>i svg{width:19px;height:19px}
.mq-linea li.on>i{border-color:rgba(248,32,173,.42);color:var(--ez-magenta-tx)}
.mq-linea b{position:relative;display:block;padding-top:19px;margin-bottom:3px;font-size:14.5px;color:var(--ez-tinta)}
.mq-linea b:before{content:"";position:absolute;top:0;left:0;right:-16px;height:1.4px;background:rgba(15,38,71,.17)}
.mq-linea li:last-child b:before{right:0}
.mq-linea b:after{content:"";position:absolute;top:-5px;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--ez-papel);border:2.4px solid var(--ez-azul)}
.mq-linea li.on b:after{border-color:var(--ez-magenta)}
.mq-linea span{display:block;font-size:11.4px;line-height:1.46;color:var(--ez-tinta-3)}
/* cuatro datos */
.mq-datos{grid-area:datos;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:16px 700px 0 0;border-top:1px solid var(--ez-linea)}
.mq-datos>div{display:flex;align-items:center;gap:9px;padding:0 14px;border-left:1px solid var(--ez-linea)}
.mq-datos>div:first-child{border-left:0;padding-left:0}
.mq-datos>div>i{flex:none;color:var(--ez-tinta);opacity:.82}
.mq-datos>div>i svg{width:21px;height:21px;display:block}
.mq-datos>div>div{display:flex;flex-direction:column}
.mq-datos b{font-size:12.6px;line-height:1.25}
.mq-datos span{font-size:11px;color:var(--ez-tinta-3);line-height:1.3}

/* --- «Lo que hacemos» -------------------------------------------------- */
.mq-h2{margin:8px 0 16px!important;text-align:center;font-size:24px;font-weight:800;
  letter-spacing:-.5px;color:var(--ez-tinta);border:0!important;padding:0!important}

.mq-tres{display:grid;grid-template-columns:1.06fr 1.02fr 1.06fr;gap:14px}
.mq-c{display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:center;
  border:1px solid var(--ez-linea);border-radius:14px;background:var(--ez-papel);overflow:hidden;
  text-decoration:none;color:inherit;min-height:232px;
  transition:border-color .22s ease, box-shadow .22s ease}
.mq-c:hover{border-color:var(--ez-azul);box-shadow:0 16px 34px -22px rgba(20,83,252,.5)}
.mq-c.inv{grid-template-columns:1.02fr .98fr}
.mq-c-img{height:100%;overflow:hidden;background:var(--ez-papel-2)}
.mq-c-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mq-c:hover .mq-c-img img{transform:scale(1.04)}
.mq-c-tx{padding:16px 18px}
.mq-c-tx span{display:block;font-size:9.6px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ez-azul);margin-bottom:5px}
.mq-c-tx b{display:block;font-size:17px;line-height:1.2;letter-spacing:-.4px;color:var(--ez-tinta);margin-bottom:8px}
.mq-c-tx p{margin:0 0 9px;font-size:11.6px;line-height:1.55;color:var(--ez-tinta-3)}
.mq-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.mq-chips i{font-style:normal;font-size:9.6px;font-weight:600;color:var(--ez-tinta-2);background:var(--ez-papel);
  border:1px solid var(--ez-linea-2);border-radius:5px;padding:3px 7px}
.mq-ok{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.mq-ok li{position:relative;padding-left:19px;font-size:11.2px;line-height:1.42;color:var(--ez-tinta-2)}
.mq-ok li:before{content:"";position:absolute;left:0;top:1px;width:13px;height:13px;border-radius:50%;
  background:var(--ez-azul);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat}
.mq-b{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:11.4px;font-weight:700;
  color:#fff;background:var(--ez-azul-btn);border-radius:7px;padding:8px 14px}
.mq-c:hover .mq-b{background:var(--ez-azul-btn)}

/* --- Bloque de modulos ------------------------------------------------- */
.mq-mod{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:0 34px;
  margin-top:14px;border:1px solid var(--ez-linea);border-radius:14px;background:var(--ez-papel-2);padding:14px}
.mq-panes{grid-column:1;grid-row:1/3}
.mq-pane{display:none}
.mq-pane.on{display:block}
.mq-pane-img{border-radius:10px;overflow:hidden;background:var(--ez-navy);aspect-ratio:16/8.3}
.mq-pane-img img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.mq-pane-tx{position:absolute;left:calc(50.5% + 20px);right:14px;top:56px}
.mq-pane-tx span{display:block;font-size:9.6px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ez-azul);margin-bottom:6px}
.mq-pane-tx b{display:block;font-size:22px;font-weight:800;letter-spacing:-.6px;color:var(--ez-tinta);margin-bottom:9px}
.mq-pane-tx p{margin:0 0 14px;font-size:12.4px;line-height:1.62;color:var(--ez-tinta-3)}
.mq-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 14px}
.mq-feats i{font-style:normal;font-size:10.6px;color:var(--ez-tinta-2);border-left:2.5px solid rgba(20,83,252,.4);padding-left:8px;line-height:1.35}
.mq-mod-bar{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;padding-top:2px}
.mq-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.mq-tab{border:1px solid var(--ez-linea-2);background:var(--ez-papel);color:var(--ez-tinta-2);border-radius:7px;
  padding:6px 11px;font-size:10.6px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s}
.mq-tab:hover{border-color:var(--ez-azul);color:var(--ez-azul)}
.mq-tab.on{border-color:var(--ez-azul);color:var(--ez-azul);background:rgba(20,83,252,.05);font-weight:700}
.mq-mod-nav{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;gap:14px;align-self:center}
.mq-arw{width:34px;height:34px;border-radius:50%;border:1px solid var(--ez-linea-2);background:var(--ez-papel);
  color:var(--ez-tinta-2);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.mq-arw:hover{background:var(--ez-azul);border-color:var(--ez-azul);color:#fff}
.mq-count{font-size:12.4px;color:var(--ez-tinta-3)}.mq-count b{color:var(--ez-tinta)}
.mq-mod-pie{position:absolute;right:14px;bottom:12px;width:38%;margin:0;text-align:left;
  font-size:10.8px;line-height:1.45;color:var(--ez-tinta-3)}

/* --- Proyectos --------------------------------------------------------- */
.mq-pj{margin-top:14px}
.mq-pj-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:10px}
.mq-pj-cab h2{margin:0!important;border:0!important;padding:0!important;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--ez-tinta)}
.mq-pj-cab h2:after{display:none!important}
.mq-pj-cab p{margin:3px 0 0;font-size:11.4px;color:var(--ez-tinta-3)}
.mq-pj-nav{display:flex;gap:9px}
.mq-pj-tira{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;overflow:hidden}
.mq-pj-f{margin:0;border-radius:11px;overflow:hidden;background:var(--ez-papel-2)}
.mq-pj-f img{display:block;width:100%;height:118px;object-fit:cover;transition:transform .5s ease}
.mq-pj-f:hover img{transform:scale(1.05)}
.mq-pj-f figcaption{display:none}

/* --- Tema oscuro -------------------------------------------------------- */
html.dark .mq-c,html.dark .mq-mod,html.dark .mq-tab,
html.dark .mq-arw{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .mq-eyebrow,html.dark .mq-sub,html.dark .mq-linea b,
html.dark .mq-datos b,html.dark .mq-h2,html.dark .mq-c-tx b,
html.dark .mq-pane-tx b,html.dark .mq-pj-cab h2{color:#eaf1fb}
html.dark .mq-p,html.dark .mq-c-tx p,html.dark .mq-pane-tx p{color:#a9bbd4}

/* --- Movil y tableta: el lienzo se apaga y el contenido fluye ---------- */
@media(max-width:899px){
  .mq{width:auto;height:auto;transform:none!important;font-size:15px}
  .mq-hero{grid-template-columns:1fr;grid-template-areas:"tx" "foto" "linea" "datos";gap:18px;padding:16px 0}
  .mq-foto{position:static;width:auto;height:210px;border-radius:14px;grid-area:foto}
  .mq-foto:before{display:none}
  .mq-foto-marca{display:none}
  .mq-linea,.mq-datos{padding-right:0}
  .mq-linea{grid-template-columns:1fr 1fr;gap:16px}
  .mq-datos{grid-template-columns:1fr 1fr;gap:12px}
  .mq-datos>div{border-left:0;padding-left:0}
  .mq-tres{grid-template-columns:1fr;gap:12px}
  .mq-c,.mq-c.inv{grid-template-columns:1fr;min-height:0}
  .mq-c.inv .mq-c-img{order:-1}
  .mq-c-img{height:170px}
  .mq-mod{grid-template-columns:1fr}
  .mq-panes{grid-column:1;grid-row:auto}
  .mq-pane-tx{position:static;margin-top:14px}
  .mq-mod-bar,.mq-mod-nav{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:12px}
  .mq-mod-pie{position:static;width:auto;margin-top:10px}
  .mq-pj-tira{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.mq-c-img img,.mq-pj-f img{transition:none}}

/* Lo que va DEBAJO del lienzo: marcas, ficha y salidas. La portada ocupa la
   primera pantalla; esto aparece al bajar, que es donde se busca un dato. */
.mq-abajo{width:var(--ez-ancho);margin:26px auto 0;padding-top:26px;border-top:1px solid var(--ez-linea)}
.mq-abajo h2{margin:26px 0 4px;font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--ez-tinta);border:0;padding:0}
.mq-abajo h2:first-child{margin-top:0}
.mq-abajo>p{font-size:13px;color:var(--ez-tinta-3);margin:8px 0 14px}
.mq-abajo .marcas,.mq-abajo .ficha{width:auto;margin-left:0;transform:none}
html.dark .mq-abajo h2{color:#eaf1fb}

/* =======================================================================
   FUERA LAS RAYAS BAJO LOS TITULOS  (2026-08-27)
   Orden del dueno: «quitar esas lineas debajo del texto que le pones a los
   parrafos o a los titulos». Estaban en la maqueta como un detalle, pero
   repetidas en cada titulo de la pagina cansan la vista y no aportan nada
   que el tamano y el peso del texto no digan ya. Se retiran las reglas
   enteras -no se tapan con `display:none`-, que es como no dejar una regla
   muerta detras de otra. Si algun dia se quieren de vuelta, es este mismo
   bloque el que lo cuenta.
   ======================================================================= */
.corp-body h2,.sw-h2,.mq-h2,.mq-abajo h2,.hist-tx .eyebrow,.mq-eyebrow{--sin-raya:1}

/* =======================================================================
   NO ES UN DOCUMENTO, ES UNA PAGINA DE EMPRESA  (2026-08-27)
   =======================================================================
   Dicho por el dueno: «parece un documento de Word. Eso no es un documento
   de Word, es una pagina empresarial: por que usas interlineado, por que
   usas subrayado».

   Tenia razon y el motivo es concreto. Las paginas corporativas heredaban
   el estilo de las paginas LEGALES -terminos, privacidad-, donde un texto
   largo, muy interlineado y con los enlaces subrayados esta bien: se lee
   como un documento porque ES un documento. Pero eso mismo, aplicado a la
   pagina que abre una marca antes de darte la distribucion, la hace
   parecer un informe en Word en vez de una empresa.

   TRES COSAS CAMBIAN, y solo en la zona de empresa:
     · interlineado de 1,78 -medida de lectura larga- a 1,55, que es lo que
       usan las paginas comerciales;
     · los enlaces dejan de ir subrayados: se distinguen por el color y por
       el peso, y se subrayan SOLO al pasar el raton, que es donde el
       subrayado si informa (esto se hace);
     · los parrafos dejan de separarse como en un documento.

   Las paginas legales NO se tocan: ahi el estilo de documento es correcto.
   ======================================================================= */
.corp-body{line-height:1.55}
.corp-body p{margin:0 0 11px;line-height:1.55}
.corp-body .lede{line-height:1.5}
.corp-body a{text-decoration:none;font-weight:600}
/* 27/08, mas tarde — tampoco al pasar el raton ni al pulsar. Yo habia
   dejado el subrayado para el hover pensando que ahi «si informa»; el dueno
   lo vio y dijo que no. Y es su criterio el que manda en su web: el enlace
   ya se distingue por el color y por el peso, y en una pagina comercial un
   subrayado que aparece y desaparece se lee como un documento. */
.corp-body a:hover,.corp-body a:active,.corp-body a:focus{text-decoration:none} 
.mq-p,.mq-c-tx p,.mq-pane-tx p,.mq-linea span,.mq-datos span{line-height:1.5}
.mq-abajo>p{line-height:1.55}

/* =======================================================================
   PROYECTOS: CARRUSEL DE LADO A LADO  (2026-08-27)
   =======================================================================
   El dueno: «no puedes hacer un pequeno carrusel de fotos... de lado a
   lado, porque tiene que estar una debajo, montado encima del texto y las
   otras marcas igual».

   Lo de «montado encima» era un fallo distinto -y peor- que ya esta
   corregido en el motor del lienzo: se le fijaba la altura al contenedor
   que ademas lleva las marcas y la ficha, y todo eso se salia por debajo.

   Lo de aqui es lo que pidio: la tira deja de ser una rejilla rigida de
   cinco huecos y pasa a deslizarse. Se arrastra con el dedo, con la rueda
   o con las dos flechas, y una foto asoma cortada por el borde derecho,
   que es lo que hace entender que hay mas sin necesidad de explicarlo.
   La barra de desplazamiento se oculta porque las flechas ya estan.
   ======================================================================= */
.mq-pj-tira{display:flex!important;grid-template-columns:none!important;
  gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px}
.mq-pj-tira::-webkit-scrollbar{display:none}
.mq-pj-f{flex:0 0 calc((100% - 48px) / 4.35);scroll-snap-align:start}
.mq-pj-f img{height:126px}
@media(max-width:1079px){
  .mq-pj-tira{display:flex!important}
  .mq-pj-f{flex:0 0 62%}
  .mq-pj-f img{height:150px}
}

/* Nombre de la compania sobre «Nuestra historia» — 2026-08-27.
   Asi lo pidio el dueno: «eso no es un logo, no es un icono, solo es el
   nombre de la empresa; bajas Nuestra historia, pones LLC y abajito
   Nuestra historia». Una linea, sin caja, sin barra y sin navegacion. */
.mq-marca{margin:0 0 9px;font-size:15px;font-weight:800;letter-spacing:-.2px;
  color:var(--ez-tinta);line-height:1}
html.dark .mq-marca{color:#eaf1fb}

/* =======================================================================
   /software — COPIA MEDIDA DE LA MAQUETA  (2026-08-27)
   =======================================================================
   Esta vez no se estimo nada. La imagen del dueno se analizo pixel a pixel
   -contando donde hay tinta por filas y por columnas- y salieron estas
   medidas, que son las que se usan aqui:

     lienzo ................ 1586 x 992  (proporcion 1,599)
     margenes .............. contenido del 92,1% del ancho
     eje entre columnas .... x = 816  ->  izquierda 47,9% / derecha 42,9%
     izquierda ............. hero 30% · «Conoce Sentinel» 37% · duo 10,6%
     derecha ............... monitor 44,2% · modulos 27% · cierre 11%

   Son DOS COLUMNAS INDEPENDIENTES, no una rejilla de filas: por eso en la
   maqueta el monitor de la derecha sigue bajando mientras a la izquierda ya
   empezo «Conoce Sentinel». Montarlo por filas era justo lo que hacia que
   los bloques se estiraran para igualarse y quedara todo enorme.

   LAS IMAGENES SON LAS SUYAS. Las `captura-*.webp` que habia antes eran
   recortes del MENU -300 px de ancho- y por eso se veian deformadas al
   ocupar media pantalla. Las de ahora salen de IMAGENES/GALERIAS: las
   vitrinas del acceso y los paneles reales. Las marcadas NO-PUBLICAR no se
   tocan: esa marca es criterio del dueno sobre sus datos.
   ======================================================================= */
.s2{display:grid;gap:0 3.7%;grid-template-columns:47.9% 42.9%;align-items:start}
.s2-col{min-width:0}

/* --- Hero (columna izquierda) ----------------------------------------- */
.s2-eyebrow{margin:0 0 13px;font-size:12px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ez-magenta-tx)}
.s2-h1{margin:0 0 15px;font-size:37px;line-height:1.14;letter-spacing:-1.3px;
  font-weight:800;color:var(--ez-tinta);border:0;padding:0}
.s2-lede{margin:0 0 22px;font-size:13.5px;line-height:1.6;color:var(--ez-tinta-3)}
.s2-cta{display:flex;flex-wrap:wrap;gap:11px}
.s2-b1,.s2-b2{display:inline-flex;align-items:center;gap:9px;padding:12px 21px;border-radius:8px;
  font-size:13.5px;font-weight:700;text-decoration:none;transition:.2s}
.s2-b1{background:var(--ez-azul-btn);color:#fff;border:1.5px solid var(--ez-azul-btn)}
.s2-b1:hover{background:var(--ez-azul-btn);border-color:var(--ez-azul-hondo)}
.s2-b2{background:var(--ez-papel);color:var(--ez-azul);border:1.5px solid rgba(20,83,252,.4)}
.s2-b2:hover{background:rgba(20,83,252,.06)}
.s2-vents{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 0}
.s2-v{display:flex;flex-direction:column;gap:9px}
.s2-v i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1.3px solid var(--ez-linea-2);color:var(--ez-tinta)}
.s2-v i svg{width:20px;height:20px}
.s2-v b{display:block;font-size:12.4px;color:var(--ez-tinta);line-height:1.25}
.s2-v span{font-size:11.6px;color:var(--ez-tinta-3)}

/* --- Titulos de seccion ------------------------------------------------ */
.s2-h2{margin:34px 0 14px!important;font-size:22px;font-weight:800;letter-spacing:-.5px;
  color:var(--ez-tinta);border:0!important;padding:0!important;text-align:left!important}
.s2-h2:after{display:none!important}

/* --- «Conoce Sentinel»: pantalla + texto + pestanas ------------------- */
.s2-pane{display:none;grid-template-columns:1fr;gap:16px}
.s2-pane.on{display:grid}
@media(min-width:900px){.s2-pane{grid-template-columns:1.02fr .98fr;gap:22px;align-items:center}}
.s2-shot{border-radius:11px;overflow:hidden;background:var(--ez-navy);border:1px solid var(--ez-linea)}
.s2-shot img{display:block;width:100%;height:auto;max-height:290px;object-fit:cover;object-position:center top}
.s2-pane-tx b{display:block;margin-bottom:9px;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ez-azul)}
.s2-pane-tx p{margin:0 0 14px;font-size:12.6px;line-height:1.6;color:var(--ez-tinta-3)}
.s2-pane-tx ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.s2-pane-tx li{position:relative;padding-left:25px;font-size:12.4px;color:var(--ez-tinta-2)}
.s2-pane-tx li:before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--ez-azul);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat}
.s2-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.s2-tabs{display:flex;flex-wrap:wrap;gap:7px}
.s2-tab{border:1px solid var(--ez-linea-2);background:var(--ez-papel);color:var(--ez-tinta-2);border-radius:8px;
  padding:7px 12px;font-size:11.6px;font-weight:600;cursor:pointer;font-family:inherit;transition:.2s}
.s2-tab:hover{border-color:var(--ez-azul);color:var(--ez-azul)}
.s2-tab.on{border-color:var(--ez-azul);color:var(--ez-azul);background:rgba(20,83,252,.05);font-weight:700}
.s2-nav{display:flex;align-items:center;gap:12px}
.s2-arw{width:32px;height:32px;border-radius:50%;border:1px solid rgba(15,38,71,.17);background:var(--ez-papel);
  color:var(--ez-tinta-2);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.s2-arw:hover{background:var(--ez-azul);border-color:var(--ez-azul);color:#fff}
.s2-count{font-size:12px;color:var(--ez-tinta-3)}.s2-count b{color:var(--ez-tinta)}

/* --- Las dos tarjetas anchas del pie de la columna izquierda ---------- */
.s2-duos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.s2-duo{display:grid;grid-template-columns:.86fr 1.14fr;gap:12px;align-items:start}
.s2-duo-img{border-radius:9px;overflow:hidden;background:var(--ez-navy);aspect-ratio:4/3}
.s2-duo-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.s2-duo-tx b{display:block;font-size:13.4px;color:var(--ez-tinta);margin-bottom:5px;line-height:1.25}
.s2-duo-tx p{margin:0 0 8px;font-size:11.2px;line-height:1.5;color:var(--ez-tinta-3)}
.s2-duo-chips{display:flex;flex-wrap:wrap;gap:4px}
.s2-duo-chips i{font-style:normal;font-size:9.6px;font-weight:600;color:var(--ez-tinta-2);background:var(--ez-papel);
  border:1px solid var(--ez-linea-2);border-radius:5px;padding:3px 7px}

/* --- Columna derecha: monitor, modulos y cierre ----------------------- */
.s2-monitor{border-radius:12px;overflow:hidden;background:var(--ez-papel)}
.s2-monitor img{display:block;width:100%;height:auto}
.s2-der .s2-h2{margin-top:26px!important}
.s2-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.s2-m{display:grid;grid-template-columns:.92fr 1.08fr;gap:9px;align-items:start;
  border:1px solid var(--ez-linea);border-radius:9px;background:var(--ez-papel);padding:9px;
  transition:border-color .2s,box-shadow .2s}
.s2-m:hover{border-color:var(--ez-azul);box-shadow:0 10px 22px -16px rgba(20,83,252,.55)}
.s2-m-img{border-radius:6px;overflow:hidden;background:var(--ez-navy);aspect-ratio:4/3}
.s2-m-img img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.s2-m-tx b{display:block;font-size:11.4px;color:var(--ez-tinta);line-height:1.2;margin-bottom:4px}
.s2-m-tx ul{list-style:disc;margin:0;padding-left:13px}
.s2-m-tx li{font-size:9.4px;line-height:1.45;color:var(--ez-tinta-3)}
.s2-final{margin-top:22px;padding:24px 20px;text-align:center;
  border:1px solid rgba(20,83,252,.17);border-radius:14px;background:rgba(20,83,252,.035)}
.s2-final h2{margin:0 0 8px!important;border:0!important;padding:0!important;
  font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--ez-tinta)}
.s2-final h2:after{display:none!important}
.s2-final p{margin:0 auto 16px;max-width:430px;font-size:12.4px;line-height:1.55;color:var(--ez-tinta-3)}
.s2-final .s2-cta{justify-content:center}

/* --- Tema oscuro ------------------------------------------------------- */
html.dark .s2-h1,html.dark .s2-h2,html.dark .s2-v b,
html.dark .s2-m-tx b,html.dark .s2-duo-tx b,
html.dark .s2-final h2,html.dark .s2-count b{color:#eaf1fb}
html.dark .s2-lede,html.dark .s2-pane-tx p,
html.dark .s2-final p,html.dark .s2-duo-tx p{color:#a9bbd4}
html.dark .s2-m,html.dark .s2-tab,html.dark .s2-arw,
html.dark .s2-b2,html.dark .s2-duo-chips i{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .s2-monitor{background:transparent}

/* --- Movil y tableta en vertical: una columna -------------------------- */
@media(max-width:899px){
  .s2{grid-template-columns:1fr;gap:24px}
  .s2-h1{font-size:26px}
  .s2-vents{grid-template-columns:1fr 1fr}
  .s2-mods{grid-template-columns:1fr}
  .s2-duos{grid-template-columns:1fr}
  .s2-der{order:-1}
}

/* =======================================================================
   INTELIGENCIA Y AUTOMATIZACION + SOFTWARE A LA MEDIDA  (2026-08-27)
   =======================================================================
   Sustituye a la tira «Proyectos y soluciones», que eran fotos de archivo
   sin nada que demostrar. Este bloque cuenta dos cosas que si separan a
   EZEMTECH de un revendedor: que el sistema lleva IA configurable -y de
   que proveedores, todos marcados OPCIONAL porque lo son- y que ademas se
   desarrolla software a medida, con los cuatro pasos del encargo visibles.

   Tres columnas, como en la maqueta: el texto de IA, el diagrama de flujo
   -entradas, nucleo, salidas- y el bloque de desarrollo a medida. El
   diagrama es HTML y CSS, no una imagen: se lee, se traduce y no pesa.
   ======================================================================= */
.ia2{display:grid;gap:0 26px;grid-template-columns:.78fr 1.05fr 1.17fr;
  align-items:start;margin-top:16px;padding-top:18px;border-top:1px solid rgba(15,38,71,.09)}
.ia2 h2{margin:0 0 8px!important;border:0!important;padding:0!important;
  font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--ez-tinta)}
.ia2 h2:after{display:none!important}
.ia2 p{margin:0 0 14px;font-size:11.8px;line-height:1.55;color:#5a6a83}
/* --- las cinco capacidades --- */
.ia-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.ia-chip{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  border:1px solid var(--ez-linea);border-radius:9px;background:var(--ez-papel);padding:9px 5px}
.ia-chip i{color:var(--ez-tinta);opacity:.85}
.ia-chip i svg{width:19px;height:19px;display:block}
.ia-chip span{font-size:9.2px;line-height:1.3;color:var(--ez-tinta-2)}
/* --- diagrama: entra -> nucleo -> sale --- */
.ia2-flujo{display:grid;grid-template-columns:.92fr .7fr 1.1fr;gap:0 12px;align-items:center;
  border:1px solid var(--ez-linea);border-radius:12px;background:var(--ez-papel-2);padding:12px 10px}
.ia-entra{display:grid;gap:7px}
.ia-e{border:1px solid var(--ez-linea);border-radius:8px;background:var(--ez-papel);padding:7px 9px}
.ia-e b{display:block;font-size:10.4px;color:var(--ez-tinta);line-height:1.2}
.ia-e span{font-size:8.8px;color:var(--ez-tinta-3)}
.ia-nucleo{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;position:relative}
.ia-nucleo:before,.ia-nucleo:after{content:"";position:absolute;top:50%;width:12px;height:1.4px;
  background:rgba(20,83,252,.35)}
.ia-nucleo:before{left:-12px}.ia-nucleo:after{right:-12px}
.ia-escudo{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1.6px solid rgba(20,83,252,.35);color:var(--ez-azul);background:#fff}
.ia-escudo svg{width:26px;height:26px}
.ia-nucleo b{font-size:11px;letter-spacing:.06em;color:var(--ez-tinta)}
.ia-nucleo span{font-size:8.6px;line-height:1.25;color:var(--ez-tinta-3)}
.ia-sale{display:grid;gap:6px}
.ia-s{display:flex;align-items:center;gap:7px;border:1px solid var(--ez-linea);
  border-radius:8px;background:var(--ez-papel);padding:6px 8px}
.ia-s i{flex:none;color:var(--ez-azul)}
.ia-s i svg{width:15px;height:15px;display:block}
.ia-s span{font-size:9.4px;line-height:1.32;color:var(--ez-tinta-2)}
/* --- software a la medida --- */
.sm-cuerpo{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;align-items:start}
.sm-foto{border-radius:10px;overflow:hidden;background:var(--ez-papel-2);aspect-ratio:16/10}
.sm-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sm-ok{list-style:none;margin:0;padding:0;display:grid;gap:7px;align-content:start}
.sm-ok li{position:relative;padding-left:20px;font-size:10.4px;line-height:1.35;color:var(--ez-tinta-2)}
.sm-ok li:before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;
  background:var(--ez-azul);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat}
.sm-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.sm-paso{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  border:1px solid var(--ez-linea);border-radius:9px;background:var(--ez-papel);padding:9px 5px}
.sm-paso i{color:var(--ez-tinta);opacity:.8}
.sm-paso i svg{width:18px;height:18px;display:block}
.sm-paso b{position:absolute;right:6px;top:5px;font-size:9px;color:var(--ez-tinta-3)}
.sm-paso span{font-size:8.8px;line-height:1.3;color:var(--ez-tinta-2)}
.sm-b{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:10px 18px;border-radius:8px;
  background:var(--ez-azul-btn);color:#fff!important;font-size:12px;font-weight:700;text-decoration:none;transition:.2s}
.sm-b:hover{background:var(--ez-azul-btn)}
/* --- oscuro y movil --- */
html.dark .ia2 h2{color:#eaf1fb}
html.dark .ia2 p,html.dark .ia-chip span,html.dark .ia-s span,
html.dark .sm-ok li,html.dark .sm-paso span{color:#a9bbd4}
html.dark .ia-chip,html.dark .ia-e,html.dark .ia-s,
html.dark .sm-paso,html.dark .ia2-flujo,html.dark .ia-escudo{
  background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
@media(max-width:899px){
  .ia2{grid-template-columns:1fr;gap:22px}
  .ia2-flujo{grid-template-columns:1fr;gap:12px}
  .ia-nucleo:before,.ia-nucleo:after{display:none}
  .ia-chips{grid-template-columns:repeat(3,1fr)}
  .sm-cuerpo{grid-template-columns:1fr}
  .sm-pasos{grid-template-columns:1fr 1fr}
}

/* Mini galeria de la tarjeta de Soporte — 3 imagenes, cambio cada 3 s.
   Tres capas apiladas con la misma animacion de 9 s (3 s por imagen) y un
   retardo escalonado: en todo momento hay exactamente una encendida. El
   fundido dura 0,8 s. CSS puro: nada que romper al re-pintar la SPA. */
.mq-gal3{position:relative;overflow:hidden}
.mq-gal3 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:mqg3 9s infinite}
.mq-gal3 img:nth-child(1){position:relative;animation-delay:0s}
.mq-gal3 img:nth-child(2){animation-delay:3s}
.mq-gal3 img:nth-child(3){animation-delay:6s}
/* 27/08, mas tarde — SUAVIZADO por orden del dueno: «no deberia cambiarse
   asi bruscamente, deberia desvanecerse algo mas suave, mas sutil». El fundido
   pasa de 0,36 s a ~1,4 s, de modo que una imagen entra mientras la otra
   todavia se esta yendo y nunca hay un corte seco. Ademas cada imagen deriva
   un 4% de zoom durante sus segundos en pantalla — el efecto Ken Burns de los
   documentales: movimiento apenas perceptible que hace la foto viva sin
   distraer. Todo sigue siendo CSS puro. */
@keyframes mqg3{
  0%{opacity:0;transform:scale(1)} 15%{opacity:1} 33.3%{opacity:1}
  48%{opacity:0} 100%{opacity:0;transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .mq-gal3 img{animation:none;opacity:0}
  .mq-gal3 img:first-child{opacity:1}
}

/* Mini galeria de la tarjeta de Software — 9 imagenes (laptop + 8 vitrinas),
   3 s cada una, ciclo de 27 s. Mismo mecanismo CSS que la galeria de
   soporte: capas apiladas con la misma animacion y retardo escalonado, de
   modo que siempre hay exactamente una encendida y nada que un re-render
   pueda desincronizar. Con reduccion de movimiento, queda la laptop fija. */
.mq-gal9{position:relative;overflow:hidden}
.mq-gal9 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:mqg9 27s infinite}
.mq-gal9 img:nth-child(1){position:relative;animation-delay:0s}
.mq-gal9 img:nth-child(2){animation-delay:3s}
.mq-gal9 img:nth-child(3){animation-delay:6s}
.mq-gal9 img:nth-child(4){animation-delay:9s}
.mq-gal9 img:nth-child(5){animation-delay:12s}
.mq-gal9 img:nth-child(6){animation-delay:15s}
.mq-gal9 img:nth-child(7){animation-delay:18s}
.mq-gal9 img:nth-child(8){animation-delay:21s}
.mq-gal9 img:nth-child(9){animation-delay:24s}
/* Mismo suavizado que mqg3: fundido de ~1,5 s y deriva sutil de zoom. */
@keyframes mqg9{
  0%{opacity:0;transform:scale(1)} 5.5%{opacity:1} 11.1%{opacity:1}
  16.6%{opacity:0} 100%{opacity:0;transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .mq-gal9 img{animation:none;opacity:0}
  .mq-gal9 img:first-child{opacity:1}
}

/* Subtitulo de tarjeta (2026-08-27): la linea que va JUSTO bajo el titulo
   -«Soporte remoto · Soporte fisico», los marketplaces-. El dueno lo pidio
   como titulo/subtitulo, no como etiqueta/titulo, que fue como lo deje la
   primera vez. En azul de marca y sin cursiva: es informacion, no adorno. */
.mq-sub2{display:block;margin:-4px 0 8px;font-style:normal;font-size:12px;
  font-weight:700;color:var(--ez-azul);line-height:1.4}

/* Imagen ENTERA y centrada (2026-08-27) — «esta como desajustada en su caja».
   El bodegon de productos tiene fondo blanco y composicion propia: recortarlo
   con `cover` le cortaba el monitor por la mitad. Para fotos de producto con
   fondo blanco lo correcto es `contain`: se ve completa, centrada, y el fondo
   blanco de la propia foto se funde con el de la caja. Las fotografias que
   llenan el marco (el tecnico, la laptop) siguen con `cover`, que es lo suyo. */
/* 2026-08-28 — la caja acompana a la foto que lleva dentro.
   En claro es blanca porque el bodegon esta fotografiado sobre blanco y asi
   no se ve la costura. En oscuro se sirve `tarjeta-tienda-oscura.webp`, que
   es la misma foto con el fondo cambiado al color de superficie, asi que la
   caja tiene que ir a juego: si se quedara blanca, volveria el rectangulo
   luminoso que se veia antes. Las dos piezas cambian juntas o no cambia
   ninguna. */
.mq-entera{background:#fff}
html.dark .mq-entera{background:var(--ez-papel)}
html.dark .mq-entera img{filter:none}   /* ya viene oscura: no atenuar dos veces */
.mq-entera img{object-fit:contain;object-position:center}

/* SIGUENOS centrado en el pie (2026-08-27, pedido del dueno). El bloque
   estaba pegado a la izquierda de su columna; el titulo y la fila de iconos
   pasan a ir centrados. Cuando guarde las demas redes en SENTINEL > Redes
   sociales, apareceran aqui solas, tambien centradas: la fila ya envuelve. */
.footer-soc{text-align:center}
.footer-soc b{display:block;text-align:center}
.footer-soc .soc-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Menu principal (2026-08-27): «Destacados» retirado por orden del dueno y
   las tres entradas corporativas —Empresa, Desarrollo, Soporte— empujadas al
   borde derecho, que es donde las llevan tambien sus maquetas. El margen
   automatico del contenedor hace el empuje; los enlaces heredan el estilo de
   la barra sin duplicar nada. /ofertas sigue existiendo (enlazada desde el
   pie y las promos), solo deja de ocupar sitio en la barra. */
.nav-corp{display:flex;gap:31px;margin-left:auto}
@media(max-width:1100px){.nav-corp{gap:18px}}

/* Legales en la linea del copyright (2026-08-28). La columna «INFORMACION»
   del pie se elimino por orden del dueno. Terminos, Privacidad, Devoluciones
   y Aviso legal no pueden desaparecer del todo -las pasarelas de pago exigen
   tenerlos visibles y la tienda cobra en linea-, asi que van en letra pequena
   junto al copyright, como los ponen las tiendas grandes. */
.footer-bottom a{color:inherit;text-decoration:none;opacity:.75}
.footer-bottom a:hover{opacity:1}

/* =======================================================================
   /software v3 — LA MAQUETA «CONTROL TOTAL», EN FILAS  (2026-08-28)
   =======================================================================
   El dueno mando una maqueta nueva y la orden fue clara: «usa todo el
   diseno nuevo pero con imagenes mias del sistema». Esta version abandona
   las dos columnas independientes y sigue las FILAS de esa maqueta:
   hero con laptop a la derecha · «Todo tu negocio en un solo sistema» con
   las pestanas ARRIBA · seis modulos principales · la banda de IA +
   software a la medida · y el cierre con seguridad y la caja de demo.
   Todas las imagenes son las vitrinas del propio SENTINEL.
   El envoltorio .mq del lienzo se conserva: es lo que mantiene la pagina
   entrando en una pantalla, que sigue siendo la regla de la seccion. */
/* 28/08 — POR QUE /software NO va dentro del lienzo. El motor del lienzo
   escala la pagina para que quepa ENTERA en una pantalla; eso es correcto en
   /empresa, que es una portada, y un desastre aqui: /software es una pagina
   LARGA, y al comprimirla el motor le daba un ancho del 400-500%% que luego
   reducia — el resultado eran tarjetas gigantes y texto microscopico, lo que
   el dueno describio como «esta demasiado grande la galeria del principio».
   Esta pagina se desplaza con normalidad, como la tienda. */
.s3{display:flex;flex-direction:column;gap:0}
.s3-hero-img img{max-height:430px;object-fit:contain}
.s2-shot img{max-height:300px}
.s3-hero{display:grid;gap:24px;align-items:center;padding:10px 0 6px}
@media(min-width:900px){.s3-hero{grid-template-columns:.9fr 1.1fr;gap:36px}}
.s3-hero-img{border-radius:14px;overflow:hidden}
.s3-hero-img img{display:block;width:100%;height:auto}
.s3-conoce{margin-top:10px;border:1px solid var(--ez-linea);border-radius:14px;
  background:var(--ez-papel-2);padding:16px 18px}
.s3-conoce .s2-h2{margin:0 0 12px!important}
.s3-conoce .s2-bar{margin:0 0 14px}
.s3-mods{grid-template-columns:repeat(3,1fr)}
@media(min-width:1200px){.s3-mods{grid-template-columns:repeat(3,1fr)}}
.s3 .ia2{margin-top:18px}
.s3-cierre{display:grid;gap:16px;margin-top:18px;align-items:stretch}
@media(min-width:900px){.s3-cierre{grid-template-columns:.9fr 1.1fr}}
.s3-seg{border:1px solid var(--ez-linea);border-radius:14px;padding:16px 18px}
.s3-seg .s2-h2{margin:0 0 14px!important;font-size:17px}
.s3-segs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:1300px){.s3-segs{grid-template-columns:repeat(3,1fr)}}
.s2-seg{display:flex;align-items:center;gap:9px;border:1px solid var(--ez-linea);
  border-radius:9px;background:var(--ez-papel);padding:9px 11px}
.s2-seg i{flex:none;color:var(--ez-azul)}
.s2-seg i svg{width:17px;height:17px;display:block}
.s2-seg span{font-size:10.6px;line-height:1.35;color:var(--ez-tinta-2);font-weight:600}
.s3 .s2-final{margin-top:0;display:flex;flex-direction:column;justify-content:center}
/* los pasos del bloque a medida perdieron su icono de lupa: numero grande */
.s3 .sm-paso b{position:static;font-size:15px;color:var(--ez-azul)}
html.dark .s3-conoce,html.dark .s3-seg{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .s2-seg{background:rgba(11,26,48,.5);border-color:rgba(180,205,240,.14)}
@media(max-width:899px){
  .s3-segs{grid-template-columns:1fr 1fr}
  .s3-hero-img{order:-1}
}

/* Pie: contacto arriba y redes centradas (2026-08-28, orden del dueno:
   «contactanos mas arriba, sube todo esto y centra las redes»). Las columnas
   del pie se alinean todas al MISMO borde superior -antes contacto y redes
   caian descolgadas- y la fila de iconos va centrada bajo su titulo. */
.footer-inner{align-items:start}
.footer-inner>div{padding-top:0}
/* Red aun sin URL (28/08, correccion del dueno: «pon los logos, despues les
   pongo los url»): el icono se ve NORMAL, con su color, igual que los demas.
   Lo unico que no tiene todavia es enlace; cuando el pegue la URL en
   SENTINEL > Redes sociales, pasa a ser un enlace sin cambiar de aspecto. */
.soc-off{cursor:default;pointer-events:none}

/* =======================================================================
   REDES DEL PIE: cinco circulos oficiales, una sola linea, centrados
   (2026-08-28, orden del dueno: «pon los logos oficiales y centrados en
   una sola linea»). Lo que se veia publicado era una mezcla: pastillas de
   tamanos distintos y WhatsApp aparte como boton grande con texto.

   Ahora los CINCO son el mismo circulo de 42 px, en una fila centrada, y
   cada uno con el color OFICIAL de su marca — el que publican sus guias de
   prensa: Facebook #1877F2, el degradado de Instagram, TikTok y X en negro
   (asi son sus logos desde 2023) y WhatsApp #25D366. `!important` porque
   habia tres capas viejas de estilos de .soc pisandose entre si y esta
   tiene que ganar a todas. */
.footer-soc .soc{width:42px;height:42px;padding:0!important;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;gap:0}
.footer-soc .soc span{display:none}
.footer-soc .soc .icon,.footer-soc .soc .soc-svg{width:19px;height:19px}
.footer-soc .soc.fb{background:#1877F2!important}
.footer-soc .soc.ig{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)!important}
.footer-soc .soc.tk{background:#010101!important}
.footer-soc .soc.xt{background:#000!important}
.footer-soc .soc.wa{background:#25D366!important}
.footer-soc .soc:hover{transform:translateY(-2px)}
.footer-soc .soc{transition:transform .2s ease}
.footer-soc .soc-row{gap:12px;justify-content:center;flex-wrap:nowrap}
@media(prefers-reduced-motion:reduce){.footer-soc .soc:hover{transform:none}}

/* Botones que no se leian (2026-08-28). CAUSA MEDIDA: la regla generica
   `.corp-body a{color:var(--ez-azul)}` tiene mas especificidad que `.s2-b1`, asi
   que el boton azul quedaba con TEXTO azul sobre fondo azul — «no se leen
   los botones». Se fija el blanco con la especificidad correcta, para los
   tres botones solidos de la seccion. */
.corp-body a.s2-b1,.corp-body a.sm-b,.corp-body a.mq-b{color:#fff}
.corp-body a.s2-b1:hover,.corp-body a.sm-b:hover,.corp-body a.mq-b:hover{color:#fff}
.corp-body a.s2-b2{color:var(--ez-azul)}
.corp-body a.s2-b2:hover{color:var(--ez-azul-hondo)}

/* Capacidades de IA en columna (2026-08-28, orden del dueno: «los del lado
   izquierdo ponlos uno debajo del otro, asi cubren el espacio del de la
   derecha»). Los cinco sellos pasan de fila apretada a lista vertical con
   el icono a la izquierda: llenan la columna a la altura del diagrama. */
.ia-chips{grid-template-columns:1fr;gap:8px}
.ia-chip{flex-direction:row;text-align:left;gap:10px;padding:10px 12px;align-items:center}
.ia-chip span{font-size:11.4px}
.ia-chip i svg{width:20px;height:20px}
@media(max-width:899px){.ia-chips{grid-template-columns:1fr 1fr}}

/* SIGUENOS al centro DEL PIE ENTERO (2026-08-28). Estaba centrado dentro de
   SU COLUMNA, que cae a la izquierda — por eso el dueno lo seguia viendo
   descentrado. El bloque pasa a ocupar la fila completa de la rejilla del
   pie y se centra respecto a la pagina, con aire arriba para separarlo de
   las columnas de enlaces. */
.footer-inner .footer-soc{grid-column:1/-1;justify-self:center;margin-top:18px}

/* Botones ilegibles, remate (2026-08-28). La correccion anterior era la
   especificidad justa, pero el dueno lo sigue viendo mal en lo publicado y
   este texto no puede volver a perderse por NINGUNA regla futura: blanco
   con !important en los tres botones solidos, y punto. */
.corp-body a.s2-b1,.corp-body a.sm-b,.corp-body a.mq-b,
a.s2-b1,a.sm-b,a.mq-b{color:#fff!important}
.s2-lede b{color:var(--ez-tinta);font-weight:700}

/* Sellos de IA, remate (2026-08-28): «pon uno debajo del otro para que los
   hagas mas grandes». Columna unica y tamano generoso — icono de 24 px,
   texto legible y aire. Con !important para que ninguna regla anterior de
   .ia-chips los devuelva a la fila apretada que el ya rechazo dos veces. */
.ia-chips{grid-template-columns:1fr!important;gap:10px!important}
.ia-chip{flex-direction:row!important;text-align:left!important;align-items:center;
  gap:12px;padding:13px 15px!important;border-radius:11px}
.ia-chip i svg{width:24px!important;height:24px!important}
.ia-chip span{font-size:13px!important;font-weight:600}

/* Banda 1: IA — texto y capacidades a la izquierda, diagrama a la derecha,
   MISMA altura. Las capacidades van en 2 columnas para no estirar la banda. */
.ia3{display:grid;gap:24px;margin-top:18px;padding:18px;align-items:center;
  border:1px solid var(--ez-linea);border-radius:14px;background:#fbfcfe}
@media(min-width:900px){.ia3{grid-template-columns:1fr 1.15fr}}
.ia3 h2{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--ez-tinta);border:0;padding:0}
.ia3 h2:after{display:none}
.ia3 p{margin:0 0 14px;font-size:12.6px;line-height:1.6;color:var(--ez-tinta-3)}
.ia3 .ia-chips{grid-template-columns:1fr 1fr!important;gap:9px!important}
.ia3 .ia2-flujo{border:0;background:transparent;padding:0}
/* Banda 2: a medida — texto | foto | pasos, tres piezas de la misma altura. */
.sm3{display:grid;gap:20px;margin-top:16px;padding:18px;align-items:stretch;
  border:1px solid rgba(15,38,71,.1);border-radius:14px}
@media(min-width:1000px){.sm3{grid-template-columns:1fr .9fr .9fr}}
.sm3 h2{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--ez-tinta);border:0;padding:0}
.sm3 h2:after{display:none}
.sm3 p{margin:0 0 12px;font-size:12.6px;line-height:1.6;color:#5a6a83}
.sm3 .sm-ok{gap:9px;margin-bottom:14px}
.sm3 .sm-ok li{font-size:12px}
.sm3-foto{border-radius:12px;overflow:hidden;background:var(--ez-papel-2);min-height:220px}
.sm3-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sm3-pasos{display:flex;flex-direction:column;justify-content:center}
.sm3-pasos>b{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ez-tinta-3);margin-bottom:10px}
.sm3 .sm-pasos{grid-template-columns:1fr 1fr;gap:10px;margin-top:0}
.sm3 .sm-paso{flex-direction:row;text-align:left;gap:10px;padding:12px;align-items:center}
.sm3 .sm-paso b{position:static;font-size:17px;color:var(--ez-azul);flex:none}
.sm3 .sm-paso span{font-size:11px;line-height:1.4}
html.dark .ia3,html.dark .sm3{background:rgba(148,180,230,.05);border-color:rgba(180,205,240,.16)}
html.dark .ia3 h2,html.dark .sm3 h2{color:#eaf1fb}
@media(max-width:899px){.ia3 .ia-chips{grid-template-columns:1fr!important}.sm3 .sm-pasos{grid-template-columns:1fr 1fr}}

/* =======================================================================
   VISOR DE MODULOS — pantalla flotante tipo galeria  (2026-08-28)
   =======================================================================
   Se abre al pulsar cualquier tarjeta de modulo: la vitrina en grande a la
   izquierda, el contenido a la derecha, flechas para recorrer los once y
   un boton de demostracion — el visor tambien vende. Fondo oscurecido con
   desenfoque; se cierra con la X, con Escape o pulsando fuera. */
.s2-mods .s2-m{cursor:pointer}
.s2-mods .s2-m:focus-visible{outline:2px solid var(--ez-azul);outline-offset:2px}
#lbVelo{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(7,15,31,.72);backdrop-filter:blur(6px);padding:22px}
#lbVelo.on{display:flex;animation:lbIn .25s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-caja{position:relative;display:grid;width:min(1080px,96vw);max-height:92vh;
  border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
@media(min-width:820px){.lb-caja{grid-template-columns:1.25fr .75fr}}
.lb-img{background:var(--ez-navy);display:grid;place-items:center;min-height:260px}
.lb-img img{width:100%;height:100%;max-height:72vh;object-fit:contain;display:block}
.lb-tx{padding:26px 26px 22px;display:flex;flex-direction:column;justify-content:center}
.lb-eti{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ez-azul);margin-bottom:8px}
.lb-tit{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--ez-tinta);margin-bottom:12px}
.lb-lista{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.lb-lista li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:#41526d}
.lb-lista li:before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;
  background:var(--ez-azul);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M7.6 12.3l3 3 5.8-6'/%3E%3C/svg%3E") center/contain no-repeat}
.lb-cta{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;padding:11px 19px;
  border-radius:8px;background:var(--ez-azul);color:#fff!important;font-size:13px;font-weight:700;text-decoration:none}
.lb-cta:hover{background:var(--ez-azul-hondo)}
.lb-x{position:absolute;right:12px;top:10px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:#333;font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.lb-x:hover{background:#fff}
.lb-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#233;font-size:22px;line-height:1;
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:.2s}
.lb-arw:hover{background:var(--ez-azul);color:#fff}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-count{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;
  padding:4px 12px;border-radius:999px;background:rgba(7,15,31,.65);color:#fff;font-size:12px}
.lb-count b,.lb-count i{font-style:normal;color:#fff}
@media(max-width:819px){
  .lb-caja{grid-template-columns:1fr;overflow-y:auto}
  .lb-img img{max-height:40vh}
  .lb-tx{padding:18px}
}
@media(prefers-reduced-motion:reduce){#lbVelo.on{animation:none}}
html.dark .lb-caja{background:#14161F}
html.dark .lb-tit{color:#eaf1fb}
html.dark .lb-lista li{color:#adbdd4}

/* Listas completas en las tarjetas de modulo (2026-08-28). Con los submenus
   enteros, Finanzas trae 14 lineas y Marketing 11: en una sola columna la
   tarjeta se hace una torre. A partir de 8 elementos la lista se parte en
   dos columnas, y en el visor flotante tambien. */
.s2-m-tx ul{columns:1;column-gap:14px}
.s2-m-tx ul:has(li:nth-child(8)){columns:2}
.lb-lista:has(li:nth-child(8)){display:block;columns:2;column-gap:22px}
.lb-lista:has(li:nth-child(8)) li{margin-bottom:8px;break-inside:avoid}

/* Formulario de demostracion (2026-08-28) — la pagina /demo a la que llevan
   todos los botones de «Solicitar demostracion». Campos grandes, dos por
   fila en pantalla ancha, y las dos salidas (WhatsApp y correo) a la vista. */
.demo-form{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.df-fila{display:grid;gap:14px}
@media(min-width:640px){.df-fila{grid-template-columns:1fr 1fr}}
.demo-form .field label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--ez-tinta,#0A1B3D)}
.demo-form .field input,.demo-form .field textarea{width:100%;border:1px solid rgba(15,38,71,.22);border-radius:10px;
  background:#fff;padding:12px 14px;font-size:15px;font-family:inherit;color:#1c2b44}
.demo-form .field input:focus,.demo-form .field textarea:focus{outline:2px solid var(--ez-azul);outline-offset:1px;border-color:transparent}
.df-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.df-acciones .s2-b1,.df-acciones .s2-b2{cursor:pointer;font-family:inherit;border-width:1.5px;border-style:solid}
.df-acciones .s2-b1{border-color:var(--ez-azul)}
.df-nota{margin:2px 0 0;font-size:12.5px;color:#6d7c93}
html.dark .demo-form .field input,html.dark .demo-form .field textarea{
  background:rgba(11,26,48,.6);border-color:rgba(180,205,240,.2);color:#eaf1fb}
html.dark .demo-form .field label{color:#eaf1fb}

/* El bloque /demo v2 se retiro el 28/08: sustituido por la copia de la
   maqueta del dueno (.d3-*), al final del archivo. */


/* =======================================================================
   /demo v3 — COPIA DE LA MAQUETA DEL DUENO  (2026-08-28)
   =======================================================================
   Medido sobre su imagen (1368x841, proporcion 1,63): el hero oscuro ocupa
   el 60% del alto con el mockup del sistema entrando a sangre por la
   derecha; la tarjeta blanca del formulario se monta ENCIMA del hero -ese
   solape es lo que da la sensacion de profundidad-; a su derecha la columna
   «Con Sentinel puedes»; y al pie la fila de marcas.
   ======================================================================= */
.demo3{padding:0 0 40px}
/* 2026-08-28 — los degradados tambien cambian de tema.
   Un color plano se cambia con una variable; un degradado no, porque lleva
   sus paradas escritas dentro. Estos cinco -el hero de /demo y los fundidos
   que funden la foto con el fondo- se quedaban en tono claro con el sitio en
   negro: una franja blanca a media pagina, que es exactamente lo que delata
   que el tema oscuro esta a medias. Se escriben las dos versiones. */
.d3-hero{position:relative;overflow:hidden;padding:52px 0 150px;
  background:linear-gradient(112deg,#f4f7fd 0%,#eef3fb 34%,#0b1220 66%,#060a14 100%)}
html.dark .d3-hero{background:linear-gradient(112deg,#0B111E 0%,#0E1524 34%,#0A101C 66%,#070B14 100%)}
.d3-hero-img{position:absolute;right:0;top:0;bottom:0;width:62%;z-index:0}
.d3-hero-img img{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.d3-hero-img:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#f2f6fd 0%,rgba(242,246,253,.9) 12%,rgba(242,246,253,0) 42%)}
html.dark .d3-hero-img:before{background:linear-gradient(90deg,#0B111E 0%,rgba(11,17,30,.9) 12%,rgba(11,17,30,0) 42%)}
.d3-hero-tx{position:relative;z-index:2;width:var(--ez-ancho);max-width:1240px;margin:0 auto}
.d3-chip{display:inline-block;margin-bottom:16px;padding:6px 14px;border-radius:999px;
  background:rgba(20,83,252,.09);color:var(--ez-tinta-2);font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.d3-hero-tx h1{margin:0 0 16px;font-size:clamp(34px,4.4vw,58px);line-height:1.03;letter-spacing:-2px;
  font-weight:800;color:var(--ez-tinta);max-width:9em}
.d3-hero-tx h1 em{font-style:normal;background:linear-gradient(90deg,#1453FC,#F820AD);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.d3-hero-tx>p{margin:0 0 26px;max-width:26em;font-size:15px;line-height:1.6;color:var(--ez-tinta-2)}
.d3-vents{display:grid;gap:18px}
@media(min-width:760px){.d3-vents{grid-template-columns:repeat(3,minmax(0,190px))}}
.d3v-x{display:none}
.dv3{display:flex;align-items:flex-start;gap:11px}
.dv3 i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%}
.dv3 i svg{width:18px;height:18px}
.dv3-a{background:rgba(20,83,252,.1);color:var(--ez-azul)}
.dv3-m{background:rgba(248,32,173,.1);color:var(--ez-magenta-tx)}
.dv3 b{display:block;font-size:13px;color:var(--ez-tinta);line-height:1.25}
.dv3 span{font-size:11.5px;line-height:1.4;color:var(--ez-tinta-3)}
/* --- panel del formulario, montado sobre el hero --- */
.d3-panel{position:relative;z-index:3;display:grid;gap:0;margin:-110px auto 0;
  width:var(--ez-ancho);max-width:1240px;border-radius:18px;background:var(--ez-papel);overflow:hidden;
  border:1px solid var(--ez-linea);box-shadow:0 40px 80px -40px rgba(9,22,42,.4)}
@media(min-width:960px){.d3-panel{grid-template-columns:1.35fr .65fr}}
.d3-form{padding:30px 32px 26px;display:flex;flex-direction:column;gap:14px}
.d3-form h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ez-tinta)}
.d3-form h2 em{font-style:normal;color:var(--ez-azul)}
.d3-sub{margin:-8px 0 4px;font-size:13px;color:var(--ez-tinta-3)}
.d3-form .field label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--ez-tinta)}
.d3-form .field label i{font-style:normal;color:var(--ez-rojo-tx)}
.d3-form .field input,.d3-form .field textarea{width:100%;border:1px solid #dfe6f1;border-radius:10px;
  background:var(--ez-papel-2);padding:12px 14px;font-size:14px;font-family:inherit;color:var(--ez-tinta)}
.d3-form .field input:focus,.d3-form .field textarea:focus{outline:2px solid var(--ez-azul);outline-offset:1px;border-color:transparent;background:var(--ez-papel)}
.d3-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.d3-b1,.d3-b2{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;
  border-radius:10px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;border:1.5px solid transparent}
.d3-b1{background:linear-gradient(90deg,#1453FC,#7A3BF0);color:#fff!important;box-shadow:0 10px 24px -12px rgba(20,83,252,.8)}
.d3-b1:hover{filter:brightness(1.06)}
.d3-b2{background:var(--ez-papel);color:var(--ez-azul)!important;border-color:#c9d8f7}
.d3-b2:hover{background:rgba(20,83,252,.05)}
.d3-nota{margin:2px 0 0;font-size:11.5px;color:var(--ez-tinta-3)}
/* --- columna de beneficios --- */
.d3-ben{background:var(--ez-papel-2);border-left:1px solid var(--ez-linea);padding:30px 26px}
.d3-ben-t{display:block;margin-bottom:14px;font-size:15px;font-weight:800;color:var(--ez-tinta)}
.dben{display:flex;align-items:flex-start;gap:12px;margin-bottom:11px;padding:13px 14px;
  border:1px solid rgba(15,38,71,.09);border-radius:12px;background:var(--ez-papel)}
.dben i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px}
.dben i svg{width:19px;height:19px}
.dben-b{background:rgba(20,83,252,.1);color:var(--ez-azul)}
.dben-v{background:rgba(122,59,240,.1);color:var(--ez-violeta-tx)}
.dben-r{background:rgba(248,32,173,.09);color:var(--ez-magenta-tx)}
.dben-c{background:rgba(20,160,120,.1);color:var(--ez-verde-tx)}
.dben b{display:block;font-size:13.5px;color:var(--ez-tinta);line-height:1.25}
.dben span{font-size:11.8px;line-height:1.45;color:var(--ez-tinta-3)}
/* --- marcas --- */
.d3-marcas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 34px;
  width:var(--ez-ancho);max-width:1240px;margin:28px auto 0}
.d3-marcas>span{font-size:12.5px;color:var(--ez-tinta-3)}
.d3-logos{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.d3-logos img{height:24px;width:auto;opacity:.55;filter:grayscale(1)}
.d3-logos img:hover{opacity:1;filter:none}
/* --- movil --- */
@media(max-width:959px){
  .d3-hero{padding:34px 0 90px}
  .d3-hero-img{position:relative;width:auto;height:200px;margin-top:22px}
  .d3-hero-img:before{background:linear-gradient(180deg,rgba(242,246,253,.85),rgba(242,246,253,0) 40%)}
html.dark .d3-hero-img:before{background:linear-gradient(180deg,rgba(11,17,30,.85),rgba(11,17,30,0) 40%)}
  .d3-panel{margin-top:-60px}
  .d3-form{padding:22px 18px}
  .d3-ben{border-left:0;border-top:1px solid var(--ez-linea);padding:22px 18px}
}
html.dark .d3-panel{background:#14161F;border-color:rgba(180,205,240,.16)}
html.dark .d3-form h2,html.dark .d3-form .field label,
html.dark .d3-ben-t,html.dark .dben b{color:#eaf1fb}
html.dark .d3-form .field input,html.dark .d3-form .field textarea,
html.dark .dben{background:rgba(11,26,48,.6);border-color:rgba(180,205,240,.18);color:#eaf1fb}
html.dark .d3-ben{background:rgba(148,180,230,.04)}

/* El render de SENTINEL es oscuro y de composicion centrada: se muestra
   ENTERO (contain) sobre el lado oscuro del hero, no recortado. Y el velo
   claro se acorta para no comerle el portatil. (2026-08-28) */
.d3-hero-img img{object-fit:contain;object-position:center}
.d3-hero-img:before{background:linear-gradient(90deg,#f2f6fd 0%,rgba(242,246,253,.86) 8%,rgba(242,246,253,0) 30%)}
html.dark .d3-hero-img:before{background:linear-gradient(90deg,#0B111E 0%,rgba(11,17,30,.86) 8%,rgba(11,17,30,0) 30%)}

/* =======================================================================
   OPTIMIZACION MOVIL DE LAS PAGINAS NUEVAS  (2026-08-28)
   =======================================================================
   Auditadas /empresa, /software, /demo y el visor de modulos a 390 px. La
   ESTRUCTURA ya apilaba bien (el lienzo se apaga, las rejillas caen a una
   columna). Lo que quedaba eran cinco defectos finos que solo aparecen con
   el dedo delante:

     1. Los tipos de letra estaban calculados para el lienzo de escritorio:
        11-12 px reales en el telefono. Por debajo de 15 px se lee mal y iOS
        ademas hace zoom automatico al tocar un campo de formulario.
     2. Las galerias .mq-gal3/.mq-gal9 usan capas `position:absolute`: sin
        una altura propia, en movil colapsaban a cero y no se veia nada.
     3. Botones y campos por debajo de 44 px: el minimo que se acierta con
        el dedo sin fallar (WCAG 2.5.5).
     4. El visor flotante ocupaba toda la pantalla sin margen y sin scroll
        propio: en un modulo con lista larga no se llegaba al final.
     5. La tira de proyectos y la de marcas se salian del ancho.
   ======================================================================= */
@media(max-width:767px){
  /* --- 1. tamanos legibles --- */
  .mq{font-size:16px}
  .mq-eyebrow{font-size:17px}
  .mq-n{font-size:44px;letter-spacing:-1.8px}
  .mq-sub{font-size:15px}
  .mq-p,.mq-c-tx p{font-size:14px;line-height:1.6}
  .mq-linea li b{font-size:15px}
  .mq-linea span,.mq-datos span{font-size:13px}
  .mq-datos b{font-size:14px}
  .mq-h2{font-size:21px}
  .mq-c-tx b{font-size:18px}
  .mq-ok li,.mq-chips i{font-size:13px}
  .s2-m-tx b{font-size:15px}
  .s2-m-tx li{font-size:12.5px}
  .s2-pane-tx p,.s2-pane-tx li{font-size:14px}
  .ia-chip span,.s2-seg span,.dben span{font-size:13px}
  .sm-ok li,.sm-paso span{font-size:13px}
  .d3-hero-tx>p{font-size:15px}
  .dv3 b,.dben b{font-size:14.5px}

  /* --- 2. las galerias necesitan alto propio: son capas absolutas --- */
  .mq-gal3,.mq-gal9{height:210px}
  .mq-gal3 img:nth-child(1),.mq-gal9 img:nth-child(1){position:absolute}

  /* --- 3. objetivos tactiles de 44 px y campos sin zoom de iOS --- */
  .mq-b,.s2-b1,.s2-b2,.sm-b,.d3-b1,.d3-b2,.lb-cta,.s2-tab,.s2-arw,.mq-arw,.lb-arw,.lb-x{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .s2-arw,.mq-arw,.lb-arw,.lb-x{min-width:44px}
  .d3-b1,.d3-b2{width:100%}
  .d3-form .field input,.d3-form .field textarea{font-size:16px;padding:13px 14px}
  .s2-m{cursor:default}          /* en tactil no hay puntero que cambiar */

  /* --- 4. el visor: margen, altura y scroll propio --- */
  #lbVelo{padding:12px;align-items:flex-start}
  .lb-caja{width:100%;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .lb-img img{max-height:34vh}
  .lb-tit{font-size:20px}
  .lb-lista li{font-size:14px}
  .lb-lista:has(li:nth-child(8)){columns:1}   /* una columna: dos no caben */
  .lb-prev{left:6px}.lb-next{right:6px}
  .lb-arw{width:38px;height:38px;top:auto;bottom:14px;transform:none}

  /* --- 5. nada se sale del ancho --- */
  .mq-pj-tira,.d3-logos,.marcas{max-width:100%}
  .d3-marcas{flex-direction:column;text-align:center;gap:14px}
  .d3-logos{justify-content:center;gap:18px}
  .d3-logos img{height:20px}
  .s2-m-tx ul{columns:1}
  .demo3 .d3-hero-tx h1{font-size:32px;letter-spacing:-1.2px;max-width:none}
  .d3-vents{grid-template-columns:1fr}
}
/* Telefono estrecho (iPhone SE y similares) */
@media(max-width:400px){
  .mq-n{font-size:38px}
  .mq-linea{grid-template-columns:1fr}
  .sm3 .sm-pasos,.s3-segs{grid-template-columns:1fr}
  .mq-pj-f{flex:0 0 84%}
}

/* =======================================================================
   /demo EN UNA SOLA PANTALLA  (2026-08-28)
   =======================================================================
   Medido en la pagina publicada: el hero solo ya ocupaba 500 px y el
   formulario obligaba a desplazar hasta el final para ver los botones.
   Orden del dueno: «que entre todo en una sola pantalla sin moverle nada».

   Se aprieta con proporciones, no recortando contenido: el hero pasa a
   escalar con la altura de la ventana (`svh`, que en el movil descuenta la
   barra del navegador), los campos y los espacios bajan un punto, y el
   solape de la tarjeta crece. Nada desaparece: la misma informacion, mas
   junta. Por debajo de 700 px de alto util se afloja el apriete, porque
   comprimir mas dejaria el texto ilegible — ahi es mejor desplazar. */
@media(min-width:960px){
  .d3-hero{padding:clamp(20px,3.2svh,44px) 0 clamp(74px,11svh,130px)}
  .d3-hero-tx h1{font-size:clamp(30px,4.4svh,50px);line-height:1.02;margin-bottom:10px}
  .d3-chip{margin-bottom:10px;padding:5px 12px;font-size:10.5px}
  .d3-hero-tx>p{margin-bottom:clamp(12px,2.2svh,24px);font-size:clamp(13px,1.7svh,15px)}
  .d3-vents{gap:14px}
  .dv3 i{width:32px;height:32px}
  .dv3 i svg{width:16px;height:16px}
  .dv3 b{font-size:12.5px}
  .dv3 span{font-size:11px}

  .d3-panel{margin-top:clamp(-130px,-13svh,-86px)}
  .d3-form{padding:clamp(16px,2.6svh,28px) 28px;gap:clamp(8px,1.4svh,13px)}
  .d3-form h2{font-size:clamp(17px,2.6svh,21px)}
  .d3-sub{margin:-6px 0 2px;font-size:12px}
  .d3-form .field label{margin-bottom:4px;font-size:11.5px}
  .d3-form .field input,.d3-form .field textarea{padding:clamp(8px,1.3svh,11px) 13px;font-size:13.5px}
  .d3-form textarea{min-height:0}
  .d3-b1,.d3-b2{padding:clamp(9px,1.5svh,12px) 22px;font-size:13.5px}
  .d3-nota{font-size:11px}
  .d3-ben{padding:clamp(16px,2.6svh,28px) 22px}
  .d3-ben-t{margin-bottom:10px;font-size:14px}
  .dben{margin-bottom:clamp(6px,1.1svh,10px);padding:clamp(8px,1.3svh,12px) 13px}
  .dben i{width:34px;height:34px}
  .dben b{font-size:12.8px}
  .dben span{font-size:11.2px}
  .d3-marcas{margin-top:clamp(10px,1.8svh,24px)}
  .d3-logos img{height:20px}
  .demo3{padding-bottom:clamp(12px,2svh,30px)}
}
/* Ventana baja (portatil de 13" con muchas barras): se afloja. Comprimir
   mas haria el texto ilegible, y ahi vale mas desplazar un poco. */
@media(min-width:960px) and (max-height:700px){
  .d3-hero-tx h1{font-size:30px}
  .d3-vents{grid-template-columns:repeat(3,minmax(0,150px))}
  .d3-form .field textarea{rows:2}
}

/* 28/08 — `.mq-marca` paso de <p> a <h1> porque /empresa no tenia ninguno y
   Google no sabia de que iba la pagina. Como <h1> hereda tamano de titulo,
   se reafirma aqui el aspecto exacto que ya tenia: nada cambia en pantalla. */
h1.mq-marca{margin:0 0 9px;font-size:15px;font-weight:800;letter-spacing:-.2px;
  color:var(--ez-tinta);line-height:1}

/* Texto solo para buscadores y lectores de pantalla (2026-08-28). No se ve,
   pero EXISTE: no se usa `display:none` ni `visibility:hidden` porque eso lo
   esconde tambien de quien navega con lector de pantalla, que es justo a
   quien queremos servir. Esta es la tecnica estandar de recorte a 1px. */
.solo-lectores{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   BOTONES SECUNDARIOS EN TEMA OSCURO  ·  29/08/2026
   ---------------------------------------------------------------------
   El dueno lo vio en la portada: «PONLE UN FONDO PORQUE CUANDO CAMBIA A
   NEGRO SE PIERDE», y dio el motivo el mismo: «COMPRAR AHORA NO SE PIERDE
   PORQUE TIENE UN FONDO EL BOTON». Exacto: el boton primario lleva relleno
   magenta y se lee siempre; el secundario -«Solicitar servicio»- se queda
   con el contorno y hereda el color de texto del tema claro.

   Medido en la pagina publicada: texto #19233B sobre fondo #141E34, es
   decir 1,06 de contraste. Invisible. Y no era que faltara la regla del
   tema oscuro, es que NO PODIA GANAR: el tema claro declara

       .pink-outline{ ... color:#19233b !important }

   con `!important`, y la regla oscura no lo llevaba. En CSS un `!important`
   solo lo vence otro `!important`, por mucho que el selector sea mas
   especifico o vaya despues. Por eso «arreglarlo» tocando el color en la
   regla oscura no habria servido de nada: hay que empatar la fuerza.

   Se resuelve como manda la lamina de marca para el «Boton Secundario»:
   superficie oscura + borde del acento + texto claro. Asi el secundario
   se ve tan solido como el primario, sin robarle protagonismo.
   ===================================================================== */
html.dark .btn.light,
html.dark .btn.ghost,
html.dark .pink-outline,
html.dark .s2-b2,
html.dark .d3-b2{
  background:var(--ez-papel)!important;
  color:var(--ez-tinta)!important;
}
html.dark .btn.light:hover,
html.dark .btn.ghost:hover,
html.dark .pink-outline:hover,
html.dark .s2-b2:hover,
html.dark .d3-b2:hover{
  background:var(--ez-papel-2)!important;
  color:var(--ez-tinta)!important;
}
/* El borde conserva el acento que ya tenia cada uno -magenta en el de la
   portada, azul en los de las paginas nuevas- porque es lo que distingue
   un secundario de otro y lo que la marca usa para dirigir la mirada. */
html.dark .pink-outline{border-color:var(--ez-magenta-tx)!important}
html.dark .btn.light,
html.dark .btn.ghost{border-color:var(--ez-linea-2)!important}

/* =====================================================================
   EL RELLENO BLANCO DE LAS FICHAS APAISADAS  ·  29/08/2026
   ---------------------------------------------------------------------
   El dueno lo señalo con cuatro productos delante: «sus bordes blancos y
   relleno blanco debe ser negro». Y no estaba donde parecia.

   Ya se habia corregido la CAJA (`.product-image`), que estaba forzada a
   blanco en tema oscuro. Pero seguia saliendo blanco, asi que se midio
   capa por capa en la tarjeta del cable HDMI:

       .IMG            fondo rgb(255,255,255)   <-- aqui estaba
       .product-image  fondo rgb(20,22,31)      <-- ya corregido
       .product-card   fondo rgb(20,22,31)

   El blanco lo pintaba **la propia etiqueta `<img>`**. Con `object-fit:
   contain`, una foto apaisada (1000x667) dentro de un marco cuadrado no
   llena el hueco, y lo que sobra arriba y abajo enseña el fondo de la
   imagen, no el de la caja. Por eso la bocina —que es vertical y cubre
   casi todo— no tenia el problema y el cable, el headset y el hub si.

   Ese `background:#fff` esta puesto a proposito para el tema claro: hay
   fotos de producto recortadas sobre blanco y asi no se ve la costura.
   De modo que no se quita: se le da su version oscura, y se hace con
   `!important` porque las tres reglas originales lo llevan y en CSS un
   `!important` solo lo vence otro.
   ===================================================================== */
html.dark .product-image img,
html.dark .gallery img,
html.dark .gallery-main>img,
html.dark .gallery-thumb img,
html.dark .cart-thumb img,
html.dark .cart2-thumb img{
  background:var(--ez-papel)!important;
}

/* =====================================================================
   BORDES DE LAS TARJETAS DE PRODUCTO EN TEMA OSCURO  ·  29/08/2026
   ---------------------------------------------------------------------
   «Quitale a todos los bordes blancos, dejalos con bordes de color gris
   claro». Medido en la tarjeta publicada:

       .product-image   border 1px solid rgb(238,242,247)  <-- casi blanco
       .product-card    border 1px solid rgb(30,42,68)     <-- azulado viejo

   El primero venia del encuadre de fotos de producto pensado para el tema
   claro; el segundo es de la paleta anterior, azulada, anterior a la
   lamina oficial. Los dos pasan al GRIS CLARO de la marca (#2B2F3D), que
   sobre la superficie #14161F se ve como una linea fina y limpia: separa
   la foto de la tarjeta sin gritar, que es lo que hace un borde bueno.
   ===================================================================== */
html.dark .product-image,
html.dark .gallery,
html.dark .gallery-main,
html.dark .gallery-thumb,
html.dark .cart-thumb,
html.dark .cart2-thumb{
  border:1px solid #2B2F3D!important;
}
html.dark .product-card,
html.dark .service-card,
html.dark .category-card{
  border-color:#2B2F3D!important;
}

/* =====================================================================
   LA PANTALLA DE ENTRAR VA SIEMPRE EN CLARO  ·  29/08/2026
   ---------------------------------------------------------------------
   Decision del dueno, mirandola en el telefono: «cuando le das clic a
   inicio de sesion... salen con fondo negro. Dejalo natural, todo con
   fondo blanco, texto negro, como estaba anteriormente».

   Y ademas estaba ROTA a medias, que es lo peor que puede pasar en la
   unica pantalla donde alguien escribe su clave. Medido en la publicada,
   con el sitio en oscuro:

       .auth-card    fondo rgb(255,255,255)   color rgb(217,227,245)
       h1            rgb(233,239,250)  -> casi blanco SOBRE BLANCO
       input         fondo rgb(20,22,31)  -> negro

   La tarjeta se quedo clara y el texto se aclaro con el tema: «Iniciar
   sesion» y «¿Olvidaste tu clave?» eran invisibles, y los campos negros.
   Una pantalla de autenticacion a medio pintar no es un detalle estetico:
   quien no ve donde escribe, no entra, y quien no entra se va.

   La salida no es repintarla en oscuro, sino sacarla del tema. Es lo que
   hacen los bancos y las pasarelas: la pantalla de credenciales se
   mantiene igual siempre, para que se reconozca y no de lugar a dudas.
   Los valores son los MEDIDOS en el tema claro, no inventados.
   ===================================================================== */
html.dark .auth-wrap,
html.dark .auth-card{
  color:#0D1733!important;
}
html.dark .auth-card{
  background:#FFFFFF!important;
  border-color:#DCE7F6!important;
}
html.dark .auth-card h1,
html.dark .auth-card h2,
html.dark .auth-card h3,
html.dark .auth-card b,
html.dark .auth-card strong{
  color:#0D1733!important;
}
html.dark .auth-card p,
html.dark .auth-card small,
html.dark .auth-card .muted,
html.dark .auth-card span,
html.dark .auth-card .divider,
html.dark .auth-card div:not(.form-row):not(.field):not(.auth-brand){
  color:#65718A!important;
}
/* Los separadores «¿Nuevo en EZEMTECH?» y «O continua con» son `.divider`,
   ni parrafo ni span, asi que la regla de arriba no los alcanzaba: medidos
   a 2,09 de contraste con el sitio en oscuro. En el tema claro valen
   #5F6B80 y ahi se quedan, en los dos. */
html.dark .auth-card .divider{
  color:#5F6B80!important;
}
html.dark .auth-card label{
  color:#475467!important;
}
html.dark .auth-card input,
html.dark .auth-card select,
html.dark .auth-card textarea{
  background:#FFFFFF!important;
  color:#0D1733!important;
  border-color:#DCE7F6!important;
}
html.dark .auth-card input::placeholder,
html.dark .auth-card textarea::placeholder{
  color:#98A2B3!important;
}
/* Los botones de proveedor (Google, Facebook) tienen que verse igual que
   en su propia marca: blancos con borde. Con el tema oscuro heredaban el
   fondo de superficie y quedaban negros dentro de una tarjeta blanca. */
html.dark .auth-card .btn.light,
html.dark .auth-card .btn.ghost{
  background:#FFFFFF!important;
  color:#0344CF!important;
  border-color:#DCE7F6!important;
}
html.dark .auth-card .btn.light:hover,
html.dark .auth-card .btn.ghost:hover{
  background:#F5F8FD!important;
}
/* El enlace de recuperar clave: sobre blanco vuelve a su magenta legible. */
html.dark .auth-card a:not(.btn){
  color:#C2126F!important;
}