:root{
  --bg1:#e0f7fa; --bg2:#b2ebf2;
  --brand:#0ea5e9; --brand2:#0288d1; --accent:#22d3ee;
  --ink:#0f172a; --muted:#334155;
  --pink:#ff2a6a; --pink2:#ff4d8d;
  --glass:rgba(255,255,255,.62);
  --shadow:0 10px 26px rgba(15,23,42,.10);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding:0;
  padding-bottom:92px;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, var(--bg2), transparent 60%),
              linear-gradient(145deg, var(--bg1), var(--bg2));
  color:var(--muted);
  overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}

/* TOP NAV (ton style) */
.topnav{position:sticky; top:0; z-index:60;background:rgba(255,255,255,.92);backdrop-filter: blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.06);}
.topnav .row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:10px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:12px}
.brand b{color:var(--ink);font-size:15px}
.brand small{display:block;color:#334155;font-weight:800;font-size:11px;margin-top:2px}
.navbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:linear-gradient(45deg,var(--brand2),var(--brand));color:#fff;text-decoration:none;font-weight:900;font-size:13px;box-shadow:0 10px 18px rgba(14,165,233,.25);}

/* HERO */
.hero{margin:5px 0 0;border-radius:0;overflow:hidden;position:relative;background:url('https://toctoclimpieza.com/wp-content/themes/yootheme/cache/a1/home-toctoc-limpieza-a16950d7.webp') center/cover no-repeat;background-color:#0b2230;max-height:270px; min-height:160px;box-shadow:var(--shadow);}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.28));}
.hero .inner{position:relative;z-index:2;padding:90px 14px 18px;color:#fff;text-align:center}
.hero h1{margin:6px 0 0;font-size:24px;line-height:1.2;font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero p{margin:10px auto 0;max-width:560px;opacity:.95;font-size:13.5px;line-height:1.55}

/* KPI */
.kpi-bar{margin:-14px 12px 0;background:rgba(255,255,255,.92);border:1px solid rgba(2,136,209,.12);border-radius:18px;box-shadow:0 10px 22px rgba(15,23,42,.08);padding:10px 12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.kpi{text-align:center}
.kpi .v{font-weight:1000;color:#0b2230;font-size:16px;line-height:1}
.kpi .k{font-size:11px;color:#334155;font-weight:900;opacity:.9;margin-top:4px}
@media(max-width:380px){
  .kpi-bar{grid-template-columns:1fr}
  .kpi{text-align:left;display:flex;justify-content:space-between;align-items:center}
  .kpi .k{margin-top:0}
}

/* Chips */
.chips{ margin:10px 12px 0; display:flex;flex-wrap:wrap;gap:8px; }
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(2,136,209,.12);box-shadow:0 10px 20px rgba(15,23,42,.06);text-decoration:none;font-weight:1000;font-size:12px;color:#0b2230;}
.chip i{color:var(--brand2)}
.chip.primary{background:linear-gradient(45deg,var(--pink),var(--pink2));border:0;color:#fff;box-shadow:0 16px 30px rgba(255,42,106,.18);}
.chip.primary i{color:#fff}

/* Searchbar */
.searchbar{margin:10px 12px 0;background:rgba(255,255,255,.92);border:1px solid rgba(2,136,209,.12);border-radius:16px;box-shadow:0 10px 22px rgba(15,23,42,.08);padding:1px;}
.searchbar .row{display:flex;gap:0;align-items:center;width:100%}
.searchbar input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-weight:900;color:#0b2230;padding:12px 14px;}
.btn{padding:12px 18px;border-radius:14px;border:none;cursor:pointer;font-weight:1000;background:linear-gradient(45deg,var(--brand),var(--accent));color:#fff; box-shadow:0 12px 22px rgba(14,165,233,.32);}

/* Sections */
.section{padding:18px 14px}
.h2{margin:0 0 10px;font-size:18px;font-weight:1000;color:var(--ink);text-align:left}
.p{margin:0;line-height:1.65}
.card{background:var(--glass);border-radius:var(--radius);box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.35);backdrop-filter: blur(12px);}

/* Quickbar */
.quickbar{margin:10px 12px 0;background:rgba(255,255,255,.92);border:1px solid rgba(2,136,209,.12);border-radius:18px;box-shadow:0 10px 22px rgba(15,23,42,.08);padding:10px;}
.quickbar .title{font-weight:1000;color:#0b2230;font-size:13px;line-height:1.3;margin:0;}
.quickbar .sub{margin:6px 0 0;color:#334155;font-size:12px;line-height:1.45;}
.quickbar .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;align-items:stretch;}
.qbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;border-radius:16px;text-decoration:none;font-weight:1000;font-size:12px;background:rgba(255,255,255,.82);border:1px solid rgba(2,136,209,.14);color:#0b2230;min-height:44px;}
.qbtn.primary{background:linear-gradient(45deg,var(--pink),var(--pink2));border:0;color:#fff;box-shadow:0 16px 30px rgba(255,42,106,.18);}

/* Form */
.form{padding:16px}
.form input{width:100%;padding:12px 14px;margin:10px 0;border-radius:14px;border:1px solid rgba(2,136,209,.18);font-size:16px;background:#fff;}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:380px){.form .row2{grid-template-columns:1fr}}
.btn-submit{width:100%;padding:14px;border-radius:999px;border:none;cursor:pointer;font-weight:1000;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--brand2),var(--brand));box-shadow:0 14px 26px rgba(2,136,209,.24)}
.helper{margin:10px 0 0;font-size:12px;color:#334155;text-align:center}