:root{
  --celeste:#4997d0; --azul:#17365d; --verde:#1f8a4c; --rojo:#c8102e;
  --amarillo:#f2b705; --naranja:#e8751a; --morado:#7a2e8e; --crema:#fff7e6;
  --tinta:#2b2b2b;
}
body{font-family:'Nunito',sans-serif;color:var(--tinta);}
h1,h2,h3,.titulo,.guate-marca{font-family:'Fredoka',sans-serif;}

/* Fondo y franjas tipo tejido */
.guate-fondo{background:var(--crema);min-height:100vh;}
.guate-franja{height:10px;background:repeating-linear-gradient(90deg,
  var(--rojo) 0 24px,var(--amarillo) 24px 48px,var(--verde) 48px 72px,
  var(--celeste) 72px 96px,var(--naranja) 96px 120px,var(--morado) 120px 144px);}
.guate-greca{height:14px;background-color:var(--amarillo);background-image:
  linear-gradient(135deg,var(--rojo) 25%,transparent 25%),
  linear-gradient(225deg,var(--rojo) 25%,transparent 25%),
  linear-gradient(315deg,var(--rojo) 25%,transparent 25%),
  linear-gradient(45deg,var(--rojo) 25%,transparent 25%);
  background-size:14px 14px;background-position:-7px 0,-7px 0,0 0,0 0;}

/* Navegación */
.guate-nav{background:var(--azul);color:#fff;}
.guate-nav-inner{max-width:1100px;margin:auto;padding:12px 16px;display:flex;
  flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;}
.guate-nav-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.guate-nav-links a{color:#fff;font-weight:700;text-decoration:none;}
.guate-nav-links a:hover{color:var(--amarillo);}
.guate-marca{display:flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:700;
  color:#fff;text-decoration:none;}

/* Llanta dibujada con CSS */
.llanta{display:inline-block;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,var(--amarillo) 0 14%,#bbb 15% 38%,#1b1b1b 39% 100%);
  border:3px solid #000;}
.llanta-grande{width:110px;height:110px;border-width:5px;}

/* Encabezado de página */
.guate-header{background:#fff;border-bottom:4px solid var(--rojo);}
.guate-header-fila{max-width:1100px;margin:auto;padding:18px 16px;display:flex;
  flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;}
.titulo{font-size:1.8rem;color:var(--azul);font-weight:700;margin:0;}
.guate-container{max-width:1100px;margin:auto;padding:24px 16px;}

/* Botones */
.btn{display:inline-block;border:0;border-radius:999px;padding:9px 20px;font-weight:800;
  cursor:pointer;text-decoration:none;color:#fff;font-size:.95rem;transition:transform .1s;}
.btn:hover{transform:translateY(-2px);}
.btn-verde{background:var(--verde);} .btn-celeste{background:var(--celeste);}
.btn-rojo{background:var(--rojo);} .btn-naranja{background:var(--naranja);}
.btn-amarillo{background:var(--amarillo);color:var(--azul);}

/* Etiquetas */
.badge{display:inline-block;padding:3px 12px;border-radius:999px;background:var(--celeste);
  color:#fff;font-size:.78rem;font-weight:800;}
.badge-admin{background:var(--rojo);} .badge-vendedor{background:var(--verde);}

/* Catálogo */
.alerta{background:#e6f6ec;border-left:6px solid var(--verde);padding:12px 16px;
  border-radius:8px;margin-bottom:18px;font-weight:700;}
.buscador{display:flex;gap:10px;margin-bottom:24px;}
.buscador input{flex:1;border:2px solid var(--celeste);border-radius:999px;padding:10px 18px;}
.grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;}
.card-producto{background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.12);border-top:8px solid var(--naranja);}
.card-producto:nth-child(3n+2){border-top-color:var(--verde);}
.card-producto:nth-child(3n){border-top-color:var(--celeste);}
.card-top{background:#f1ead8;padding:18px;display:flex;justify-content:center;}
.card-body{padding:16px;}
.card-body h3{margin:8px 0 2px;font-size:1.25rem;color:var(--azul);}
.card-body .marca{margin:0 0 8px;color:#666;}
.card-body .desc{font-size:.9rem;color:#555;min-height:40px;}
.fila{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.precio{font-family:'Fredoka',sans-serif;font-size:1.6rem;font-weight:700;color:var(--rojo);}
.stock-ok{color:var(--verde);font-weight:800;} .stock-bajo{color:var(--naranja);font-weight:800;}
.acciones{display:flex;gap:8px;margin-top:14px;border-top:2px dashed #ddd;padding-top:12px;}
.acciones form{margin:0;}

/* Formularios */
.guate-form{background:#fff;border-radius:16px;padding:26px;max-width:640px;margin:auto;
  box-shadow:0 4px 14px rgba(0,0,0,.12);border-top:8px solid var(--verde);}
.campo{margin-bottom:16px;} .campo label{display:block;font-weight:800;margin-bottom:4px;color:var(--azul);}
.campo input,.campo select,.campo textarea{width:100%;border:2px solid #cfd8e3;border-radius:10px;padding:9px 12px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--celeste);}
.error{color:var(--rojo);font-weight:700;}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Login / invitados */
.guate-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:20px;background:var(--azul);}
.guate-login-card{background:#fff;border-radius:18px;padding:28px;width:100%;max-width:420px;
  border-top:10px solid var(--amarillo);}
.guate-login-card .guate-marca{color:var(--azul);justify-content:center;margin-bottom:18px;}
.guate-login-card button[type="submit"]{background:var(--verde)!important;border-radius:999px!important;}

/* Portada */
.hero{background:var(--azul);color:#fff;text-align:center;padding:70px 20px;}
.hero h1{font-size:3rem;margin:14px 0 6px;color:var(--amarillo);}
.hero p{font-size:1.2rem;max-width:560px;margin:0 auto 24px;}