/*
Theme Name: Te Suministro
Theme URI: https://tesuministro.com
Author: Te Suministro
Description: Tema a medida para tesuministro.com — suministros generales para empresas. Diseño casual/amigable, listo para WooCommerce.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tesuministro
*/

:root{
  --navy:#25324A;
  --paper:#FBF8F1;
  --paper-2:#F1ECDD;
  --amber:#F2A93B;
  --amber-dark:#E0922A;
  --teal:#2F8F7E;
  --coral:#F0715A;
  --line:#E1DCC9;
  --ink:#25324A;
  --wa:#3FB77F;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Nunito', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.mono{font-family:'JetBrains Mono', monospace;}
.display{font-family:'Baloo 2', sans-serif; font-weight:700;}

/* ===== NAV ===== */
nav.site-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 48px; background:var(--paper); position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line); flex-wrap:wrap; gap:12px;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo img{max-height:42px; width:auto;}
.logo-mark{
  width:38px; height:38px; background:var(--amber); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-weight:800; color:var(--navy); font-size:19px;
}
.logo-text{font-family:'Baloo 2'; font-weight:700; font-size:19px;}
.logo-text span{color:var(--teal);}
.nav-links{display:flex; gap:30px; font-size:15px; font-weight:600; list-style:none;}
.nav-links a{text-decoration:none; opacity:0.75;}
.nav-links a:hover{opacity:1; color:var(--teal);}
.nav-cta{
  background:var(--navy); color:var(--paper); padding:11px 22px; border-radius:100px;
  font-weight:700; font-size:14px; text-decoration:none;
}
.nav-right{display:flex; align-items:center; gap:16px;}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:100%; height:2.5px; background:var(--navy); border-radius:2px;}
.cart-icon{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:var(--paper-2);
  font-size:19px; text-decoration:none; flex-shrink:0;
}
.cart-icon:hover{background:var(--line);}
.cart-icon .cart-count{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 4px;
  border-radius:100px; background:var(--coral); color:#fff; font-family:'Nunito', sans-serif;
  font-size:11px; font-weight:800; line-height:19px; text-align:center;
}

/* ===== HERO ===== */
.hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center;
  padding:70px 48px; gap:40px; overflow:hidden; position:relative;
}
.blob{position:absolute; border-radius:50%; opacity:0.35; filter:blur(10px); z-index:0;}
.blob1{width:260px; height:260px; background:var(--amber); top:-60px; right:20%;}
.blob2{width:180px; height:180px; background:var(--teal); bottom:-40px; left:5%; opacity:0.2;}
.hero-left{position:relative; z-index:1;}
.eyebrow{
  font-size:14px; font-weight:700; color:var(--teal); background:rgba(47,143,126,0.12);
  display:inline-block; padding:8px 16px; border-radius:100px; margin-bottom:22px;
}
.hero h1{font-size:52px; line-height:1.08; margin-bottom:20px; max-width:600px; color:var(--navy);}
.hero h1 em{font-style:normal; color:var(--coral);}
.hero p{font-size:17px; opacity:0.75; max-width:460px; margin-bottom:32px; line-height:1.55; font-weight:500;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{
  background:var(--coral); color:#fff; padding:15px 26px; border-radius:100px;
  text-decoration:none; font-weight:700; font-size:15px; box-shadow:0 8px 20px rgba(240,113,90,0.3);
  display:inline-block;
}
.btn-wa{
  background:var(--wa); color:#fff; padding:15px 26px; border-radius:100px;
  text-decoration:none; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 8px 20px rgba(63,183,127,0.3);
}
.hero-right{position:relative; z-index:1; display:flex; justify-content:center;}
.order-card{
  background:#fff; border-radius:24px; width:320px; padding:26px;
  box-shadow:0 20px 40px rgba(37,50,74,0.12); border:1px solid var(--line);
}
.order-card .mono{font-size:11px; color:var(--teal); font-weight:600;}
.order-card h3{font-family:'Baloo 2'; font-weight:700; font-size:19px; margin:8px 0 16px; color:var(--navy);}
.order-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--paper-2); font-size:14px; font-weight:600;}
.order-row:last-child{border-bottom:none;}
.pill{width:8px; height:8px; border-radius:50%; background:var(--teal); display:inline-block; margin-right:8px;}
.order-total{display:flex; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:2px dashed var(--line); font-family:'Baloo 2'; font-weight:700; color:var(--navy);}

/* ===== STATS ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); padding:0 48px 60px;}
.stat{background:#fff; margin:0 6px; border-radius:18px; padding:26px 22px; border:1px solid var(--line); text-align:center;}
.stat .num{font-family:'Baloo 2'; font-weight:800; font-size:30px; color:var(--coral);}
.stat .label{font-size:12.5px; opacity:0.65; margin-top:4px; font-weight:700;}

/* ===== SECTION HEADER ===== */
.section{padding:60px 48px;}
.section-head{margin-bottom:36px; text-align:center;}
.section-head .tag{font-size:13px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:8px;}
.section-head h2{font-family:'Baloo 2'; font-weight:700; font-size:32px; color:var(--navy);}
.section-head p{opacity:0.65; margin-top:10px; font-weight:500;}

/* ===== PORTFOLIO / PRODUCTOS ===== */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.cat-card{background:#fff; border-radius:20px; padding:28px 22px; border:1px solid var(--line); transition:transform 0.15s, box-shadow 0.15s; text-decoration:none; display:block;}
.cat-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(37,50,74,0.1);}
.cat-icon{width:48px; height:48px; border-radius:14px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; overflow:hidden;}
.cat-icon img{width:100%; height:100%; object-fit:cover;}
.cat-card h4{font-family:'Baloo 2'; font-weight:700; font-size:17px; margin-bottom:8px; color:var(--navy);}
.cat-card p{font-size:13.5px; opacity:0.65; line-height:1.5; font-weight:500;}
.cat-card .price{font-family:'Baloo 2'; color:var(--coral); font-weight:700; margin-top:10px; font-size:15px;}

/* ===== SERVICIOS ===== */
.serv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.serv-card{border-radius:20px; padding:30px 26px; color:#fff;}
.serv-card:nth-child(3n+1){background:var(--navy);}
.serv-card:nth-child(3n+2){background:var(--teal);}
.serv-card:nth-child(3n+3){background:var(--coral);}
.serv-card .num{font-family:'JetBrains Mono'; font-size:12px; opacity:0.7;}
.serv-card h4{font-family:'Baloo 2'; font-weight:700; font-size:19px; margin:10px 0 8px;}
.serv-card p{font-size:13.5px; opacity:0.85; line-height:1.5; font-weight:500;}

/* ===== TOMA DE PEDIDO / CATALOGO ===== */
.catalog-list{background:#fff; border-radius:22px; border:1px solid var(--line); overflow:hidden;}
.catalog-row{display:grid; grid-template-columns:60px 1fr 130px 120px 140px; align-items:center; padding:16px 22px; gap:14px; border-bottom:1px solid var(--paper-2);}
.catalog-row.headrow{font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.5; font-weight:700; background:var(--paper-2);}
.catalog-row:last-child{border-bottom:none;}
.thumb{width:44px; height:44px; background:var(--paper-2); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; overflow:hidden;}
.thumb img{width:100%; height:100%; object-fit:cover;}
.pname{font-family:'Baloo 2'; font-weight:600; font-size:14.5px; color:var(--navy);}
.pcat{font-size:11.5px; color:var(--teal); font-weight:700; margin-top:2px;}
.badge{font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:100px; background:rgba(47,143,126,0.12); color:var(--teal); width:fit-content;}
.badge.low{background:rgba(242,169,59,0.2); color:var(--amber-dark);}
.qty-btn{font-size:13px; font-weight:700; background:var(--navy); color:#fff; border:none; padding:9px 16px; border-radius:100px; cursor:pointer; width:fit-content; text-decoration:none; display:inline-block;}

/* ===== EMPRESA + WHATSAPP ===== */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.wa-card{background:var(--wa); color:#fff; border-radius:22px; padding:36px; display:flex; flex-direction:column; justify-content:center;}
.wa-card h3{font-family:'Baloo 2'; font-weight:700; font-size:24px; margin-bottom:10px;}
.wa-card p{opacity:0.9; margin-bottom:22px; font-weight:500; line-height:1.5;}
.wa-btn{background:#fff; color:var(--wa); padding:14px 24px; border-radius:100px; font-weight:700; text-decoration:none; width:fit-content; display:inline-flex; align-items:center; gap:8px;}
.company-form{background:#fff; border:1px solid var(--line); border-radius:22px; padding:36px;}
.company-form h4{font-family:'Baloo 2'; font-weight:700; margin-bottom:6px; font-size:19px; color:var(--navy);}
.company-form .sub{font-size:13.5px; opacity:0.6; margin-bottom:20px; font-weight:500;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.company-form input, .company-form select, .company-form textarea{
  width:100%; border:1px solid var(--line); border-radius:12px; background:var(--paper);
  padding:12px 14px; margin-bottom:14px; font-family:'Nunito'; font-size:14px; font-weight:500;
}
.company-form input:focus, .company-form textarea:focus{outline:none; border-color:var(--teal);}
.company-form button{background:var(--coral); border:none; padding:14px 24px; border-radius:100px; font-weight:700; font-family:'Nunito'; font-size:14.5px; color:#fff; cursor:pointer; width:100%; margin-top:4px;}

/* ===== FOOTER ===== */
footer.site-footer{
  background:var(--navy); color:var(--paper); padding:40px 48px;
  display:flex; justify-content:space-between; align-items:center; font-size:13px; opacity:0.85;
  border-radius:32px 32px 0 0; margin-top:20px; flex-wrap:wrap; gap:12px;
}
footer.site-footer a{text-decoration:none; opacity:0.9;}

/* ===== AVISO PÁGINA EN CONSTRUCCIÓN (marca de agua) ===== */
.construccion-watermark{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  padding:0 6vw; text-align:center;
}
.construccion-watermark span{
  transform:rotate(-20deg);
  display:block; max-width:900px;
  font-family:'Baloo 2', sans-serif; font-weight:800;
  font-size:clamp(18px, 4.2vw, 44px); line-height:1.2;
  color:rgba(37,50,74,0.16); text-transform:uppercase; letter-spacing:0.02em;
}

/* ===== FLOATING WHATSAPP ===== */
.wa-float{
  position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%;
  background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 10px 24px rgba(63,183,127,0.4); z-index:60; text-decoration:none;
}

/* ===== WOOCOMMERCE (ajustes básicos para que herede el estilo) ===== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:#fff; border-radius:20px; padding:20px; border:1px solid var(--line); text-align:left;
}
.woocommerce ul.products li.product .price{color:var(--coral); font-family:'Baloo 2'; font-weight:700;}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--navy) !important; color:#fff !important; border-radius:100px !important;
  font-family:'Nunito' !important; font-weight:700 !important; border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--coral) !important;}

@media(max-width:900px){
  .hero{grid-template-columns:1fr; padding:40px 20px;}
  .stats{grid-template-columns:repeat(2,1fr); padding:0 20px 40px;}
  .stat{margin:6px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .serv-grid{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  nav.site-nav{padding:14px 20px; position:relative;}
  .nav-toggle{display:flex;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:55;
    flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 14px 24px rgba(37,50,74,0.12); padding:8px 20px;
  }
  .nav-links.is-open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:13px 0; border-bottom:1px solid var(--paper-2);}
  .nav-links li:last-child a{border-bottom:none;}
  .section{padding:40px 20px;}
  .hero h1{font-size:34px;}
  .catalog-row{grid-template-columns:44px 1fr; row-gap:6px;}
  .catalog-row > *:nth-child(3), .catalog-row > *:nth-child(4), .catalog-row > *:nth-child(5){grid-column:2;}
}