/*
Theme Name: Basicos Express
Theme URI: https://example.com/basicos-express
Author: Samuel / ChatGPT
Author URI: https://example.com
Description: Tema ligero para mini tienda "Básicos Express". Colores y tipografías según la guía de marca. Incluye una portada con secciones de Hero, Categorías, Destacados, Sobre Nosotros y Llamado a la Acción.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: basicos-express
Tags: custom-colors, custom-logo, custom-menu, one-column, translation-ready
*/

/* Variables de marca */
:root{
  --brand-primary: #faab1b; /* Amarillo Anaranjado */
  --brand-grey: #58595b;    /* Davy Grey */
  --brand-merino: #f9eee1;  /* Merino */
  --brand-black: #000000;
  --brand-white: #ffffff;
}

/* Reset y tipografías */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
  margin: 0;
  color: var(--brand-grey);
  background: #fff;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--brand-grey);
  margin: 0 0 .5rem 0;
}
a{ color: var(--brand-grey); text-decoration: none; }
a:hover{ opacity:.85; }
.container{ max-width: 1200px; padding: 0 1rem; margin: 0 auto; }
.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.2rem; border-radius:1rem; font-weight:600; border:0; cursor:pointer;
}
.button--primary{ background: var(--brand-primary); color: #000; }
.button--outline{ background: transparent; color: var(--brand-grey); border:2px solid var(--brand-grey); }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
  border-bottom:1px solid #eee;
}
.site-header__inner{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand__text{ display:none; line-height:1; }
@media(min-width:640px){ .brand__text{ display:flex; flex-direction:column; } }
.brand__title{ font-weight:800; letter-spacing:-.5px; }
.brand__subtitle{ margin-top:-2px; font-size:.7rem; font-weight:600; letter-spacing:.18em; }

.site-nav{ display:none; gap:1rem; font-size:.95rem; }
@media(min-width:768px){ .site-nav{ display:flex; } }

/* Hero */
.hero{
  position: relative;
  background: radial-gradient(ellipse at top, var(--brand-merino), #fff);
  padding: 4rem 0 2rem 0;
}
.hero__grid{
  display:grid; gap:2rem;
}
@media(min-width:900px){
  .hero__grid{ grid-template-columns: 1.2fr 1fr; align-items:center; }
}
.hero h1{ font-size: clamp(2rem, 4vw + 1rem, 3rem); font-weight: 800; }
.badge{ background: var(--brand-primary); color:#000; padding: .1rem .5rem; border-radius:.6rem; }
.hero__img{ border-radius: 1.4rem; overflow:hidden; border:1px solid #f1f1f1; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.hero__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.features{ margin-top:1.2rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
@media(min-width:640px){ .features{ grid-template-columns:repeat(4,1fr);} }
.feature{ display:flex; align-items:center; gap:.4rem; font-size:.92rem; }

/* Secciones */
.section{ padding: 3.5rem 0; }
.section--tint{ background: var(--brand-merino); }

.cards{ display:grid; gap:1rem; }
@media(min-width:640px){ .cards{ grid-template-columns: repeat(2,1fr);} }
@media(min-width:1024px){ .cards{ grid-template-columns: repeat(3,1fr);} }
.card{ border:1px solid #f1f1f1; border-radius:1.2rem; overflow:hidden; background:#fff; box-shadow: 0 6px 16px rgba(0,0,0,.04); }
.card__media{ aspect-ratio: 4/3; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card__body{ padding:1rem 1rem 1.2rem 1rem; }
.card__title{ font-size:1.05rem; font-weight:800; }
.card__price{ font-weight:800; font-size:1.2rem; }

/* CTA */
.cta{ background: var(--brand-primary); color:#000; border:1px solid #f1f1f1; border-radius:1.2rem; padding:1.6rem; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
@media(min-width:900px){ .cta{ flex-direction:row; align-items:center; justify-content:space-between; } }
.footer{ border-top:1px solid #eee; background:#fff; }
.footer__grid{ display:grid; gap:2rem; }
@media(min-width:900px){ .footer__grid{ grid-template-columns: 2fr 1fr 1fr; } }
.footer small{ color: var(--brand-grey); }