:root{--blue:#052b53;--blue2:#073a70;--yellow:#f1c40f;--bg:#f5f7fa;--bd:#e3e8ef}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:#1f2937}a{text-decoration:none}
.shop-top{background:var(--blue);color:white}.shop-wrap{max-width:1180px;margin:auto;padding-left:20px;padding-right:20px}
.shop-head{display:flex;justify-content:space-between;align-items:center;padding-top:16px;padding-bottom:16px;gap:20px}
.brand{display:flex;align-items:center;gap:14px;color:white}.brand img{width:58px;height:58px;object-fit:contain}
.brand-main{font-size:24px;font-weight:800}.brand-sub{font-size:15px;margin-top:2px}
.head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.head-actions>a{color:white;font-weight:700}
.login-btn{background:white!important;color:var(--blue)!important;padding:9px 14px;border-radius:9px}
.cart-btn{background:var(--yellow)!important;color:var(--blue)!important;padding:10px 14px;border-radius:9px}
.shop-nav{background:white;border-bottom:1px solid var(--bd)}.nav-links{display:flex;gap:24px;overflow:auto}.nav-links a{padding:14px 0;color:var(--blue);font-weight:700;white-space:nowrap}
.page{max-width:1180px;margin:auto;padding:30px 20px}.hero{background:linear-gradient(135deg,var(--blue),var(--blue2));color:white;border-radius:20px;padding:44px 40px;display:grid;grid-template-columns:1.4fr .8fr;gap:28px}
.hero h1{font-size:42px;margin:0 0 12px}.hero p{font-size:18px;line-height:1.5}.yellow{background:var(--yellow);color:var(--blue);display:inline-block;padding:10px 15px;border-radius:9px;font-weight:800}
.section{margin:34px 0 18px;display:flex;justify-content:space-between;align-items:center}.section h2{margin:0;color:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cardp{background:white;border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.imgp{aspect-ratio:1/1;background:#eef1f5;display:flex;align-items:center;justify-content:center;font-size:48px;color:#98a2b3}.bodyp{padding:16px}.namep{font-weight:800;color:var(--blue);font-size:17px}.price{font-size:20px;font-weight:800;margin:8px 0 14px}
.bluebtn{background:var(--blue2);color:white;padding:10px 14px;border:0;border-radius:9px;font-weight:700;display:inline-block}.panel{background:white;border:1px solid var(--bd);border-radius:16px;padding:24px;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:11px;border-bottom:1px solid var(--bd);text-align:left}.tbl th{background:#f3f5f8;color:var(--blue)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}}@media(max-width:620px){.shop-head{align-items:flex-start;flex-direction:column}.brand-main{font-size:20px}.grid{grid-template-columns:1fr}.hero{padding:28px 22px}.hero h1{font-size:31px}}

/* =========================================================
   TERMAS OC - AJUSTES RESPONSIVE SMARTPHONE
   ========================================================= */
@media(max-width:760px){

  body{
    font-family:Arial,Helvetica,sans-serif !important;
    background:var(--bg) !important;
    color:#1f2937 !important;
  }

  a{
    text-decoration:none !important;
  }

  .shop-top{
    background:var(--blue) !important;
    color:#fff !important;
  }

  .shop-wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .shop-head{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  .brand{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    color:#fff !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  .brand img{
    width:44px !important;
    height:44px !important;
  }

  .brand-main{
    font-size:16px !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    color:#fff !important;
    white-space:nowrap !important;
  }

  .brand-sub{
    font-size:11px !important;
    color:#fff !important;
    margin-top:2px !important;
  }

  .head-actions{
    width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:7px !important;
  }

  .head-actions>a{
    color:#fff !important;
    font-size:12px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .head-actions>a:first-child{
    margin-right:auto !important;
  }

  .login-btn{
    background:#fff !important;
    color:var(--blue) !important;
    padding:8px 10px !important;
    border-radius:8px !important;
  }

  .cart-btn{
    background:var(--yellow) !important;
    color:var(--blue) !important;
    padding:8px 10px !important;
    border-radius:8px !important;
  }

  .shop-nav{
    background:#fff !important;
    border-bottom:1px solid var(--bd) !important;
  }

  .page{
    max-width:100% !important;
    padding:20px 14px 30px !important;
  }

  .section{
    margin:22px 0 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  .section h2{
    margin:0 !important;
    color:var(--blue) !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:21px !important;
    line-height:1.15 !important;
  }

  .section a{
    color:var(--blue2) !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .cardp{
    background:#fff !important;
    border:1px solid var(--bd) !important;
    border-radius:12px !important;
    overflow:hidden !important;
    box-shadow:0 3px 12px rgba(0,0,0,.04) !important;
  }

  .imgp{
    aspect-ratio:1/1 !important;
    background:#eef1f5 !important;
    overflow:hidden !important;
  }

  .imgp img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  .bodyp{
    padding:11px !important;
  }

  .namep{
    color:var(--blue) !important;
    font-size:14px !important;
    line-height:1.25 !important;
    min-height:35px !important;
  }

  .price{
    font-size:17px !important;
    margin:7px 0 10px !important;
  }

  .bluebtn{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    font-size:12px !important;
    padding:9px 8px !important;
  }

  .toc-store-hero{
    margin:12px auto 16px !important;
    padding:0 10px !important;
  }

  .toc-store-hero-img{
    width:100% !important;
    height:auto !important;
    border-radius:12px !important;
  }
}

@media(max-width:390px){
  .brand-main{font-size:14px !important}
  .brand img{width:40px !important;height:40px !important}
  .head-actions>a{font-size:11px !important}
  .grid{gap:9px !important}
  .bodyp{padding:9px !important}
  .namep{font-size:13px !important}
}