/* Archivo: css/estilo.css */
:root{
    --bg: #f4f6f8;
    --surface: #ffffff;
    --text: #1f2d3d;
    --muted: #6b7280;
    --primary: #102a43; /* deep navy */
    --accent: #ff6600;  /* orange accent (Promart-like) */
    --accent-dark: #e05500;
    --shadow: 0 6px 18px rgba(16,42,67,0.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: 'Roboto', sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}

.container{width:90%;max-width:1200px;margin:0 auto;padding:0 15px}

/* Header */
header{background:var(--surface);border-bottom:1px solid rgba(31,45,61,0.06);}
header .container{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0}
.logo{display:flex;align-items:center;gap:0.85rem}
.logo-img{max-height:60px;border-radius:8px}
.logo-text{display:flex;flex-direction:column;justify-content:center}
.logo-text h1{font-size:1.05rem;margin:0;color:var(--primary);letter-spacing:0.2px}
.logo-text .slogan{font-size:0.85rem;color:var(--muted);margin-top:2px}
nav ul{display:flex;gap:1rem;list-style:none;align-items:center}
nav a{color:var(--text);text-decoration:none;font-weight:500;padding:0.5rem}
nav a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:white;padding:0.45rem 0.9rem;border-radius:6px}
.nav-cta:hover{background:var(--accent-dark)}

/* Main */
main{padding:2rem 0;min-height:70vh}

.hero{background:linear-gradient(rgba(16,42,67,0.55), rgba(16,42,67,0.3)), url('https://images.unsplash.com/photo-1605902711622-cfb43c44367e?auto=format&fit=crop&w=1600&q=60');background-size:cover;background-position:center;color:white;padding:3.5rem 1rem;border-radius:10px;margin-bottom:1.5rem}
.hero h2{font-size:2.2rem;margin-bottom:0.5rem}
.hero p{max-width:900px;margin:0 auto 1rem;color:rgba(255,255,255,0.9)}
.hero .btn{background:var(--accent);border-radius:6px;padding:0.7rem 1.2rem}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:0.6rem 1rem;border-radius:6px;text-decoration:none;border:none;font-weight:600;cursor:pointer}
.btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(31,45,61,0.08)}
.btn:hover{background:var(--accent-dark)}

/* Grid / Products */
.productos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem;margin-top:1.25rem}
.producto-card{background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);transition:transform 180ms ease}
.producto-card:hover{transform:translateY(-6px)}
.producto-img{height:180px;background:#fafafa;display:flex;align-items:center;justify-content:center}
.producto-img img{width:100%;height:100%;object-fit:cover}
.producto-info{padding:1rem}
.producto-info h3{font-size:1.05rem;margin-bottom:0.4rem;color:var(--primary)}
.producto-info p{font-size:0.9rem;color:var(--muted);margin-bottom:0.65rem}
.precio{font-size:1.15rem;font-weight:700;color:var(--accent)}
.categoria{display:inline-block;background:#f1f5f9;color:var(--muted);padding:0.2rem 0.6rem;border-radius:99px;font-size:0.78rem}

/* Cards */
.card{background:var(--surface);padding:1.2rem;border-radius:10px;box-shadow:var(--shadow)}
.card h2{color:var(--primary);border-bottom:3px solid var(--accent);padding-bottom:0.5rem;margin-bottom:1rem}

/* Contact */
.contacto-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-top:1rem}
.form-contacto,.info-contacto{padding:1rem;background:var(--surface);border-radius:10px;box-shadow:var(--shadow)}
.form-group{margin-bottom:0.9rem}
.form-group label{display:block;margin-bottom:0.4rem;font-weight:600}
.form-group input,.form-group textarea{width:100%;padding:0.6rem;border:1px solid #e6e9ee;border-radius:6px}

/* Footer */
footer{background:var(--primary);color:#fff;padding:2rem 0;margin-top:2.5rem}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.footer-section h3{color:var(--accent);margin-bottom:0.6rem}
.footer-section p{color:rgba(255,255,255,0.9);margin-bottom:0.5rem}
.copyright{text-align:center;padding-top:1rem;color:rgba(255,255,255,0.8);border-top:1px solid rgba(255,255,255,0.03)}

/* Forms / small helpers */
.mensaje-exito{background:#eaf6ee;border-left:4px solid #2ea44f;color:#0b3d13;padding:0.8rem;border-radius:6px}

/* Responsive tweaks */
@media (max-width:900px){.hero h2{font-size:1.6rem}.producto-img{height:150px}}
@media (max-width:600px){nav ul{flex-wrap:wrap;gap:0.4rem}}

/* ==========================
     Tipografía - ajustes finos
     ========================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

html { font-size: 16px; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    font-weight: 700;
    -webkit-font-smoothing:antialiased;
}

h1{font-size:2.4rem}
h2{font-size:1.6rem}
h3{font-size:1.2rem}

/* Hero tweaks */
.hero h2{font-size:2.6rem;line-height:1.05;font-weight:700}
.hero p{font-size:1.05rem;line-height:1.7}

/* Navigation */
nav a{font-size:0.95rem}
.nav-cta{font-weight:700}

/* Buttons */
.btn{font-size:0.95rem;padding:0.65rem 1rem;border-radius:8px;text-transform:none}
.btn svg{vertical-align:middle}

/* Product card typography */
.producto-info h3{font-size:1.08rem;margin-bottom:0.35rem}
.producto-info p{font-size:0.95rem;color:var(--muted);line-height:1.45}
.precio{font-size:1.18rem}
.categoria{font-size:0.78rem}

/* Card and form text */
.card h2{font-size:1.25rem}
.form-group label{font-size:0.95rem}
.form-group input,.form-group textarea{font-size:0.95rem}

/* Footer text */
footer, .footer-section p, .copyright{font-size:0.95rem}

/* Small screens adjustments */
@media (max-width:900px){
    h1{font-size:1.8rem}
    .hero h2{font-size:1.8rem}
    .producto-img{height:160px}
}
@media (max-width:600px){
    html{font-size:15px}
    h2{font-size:1.3rem}
    .hero{padding:2rem}
    .producto-img{height:140px}
}

/* Utility: improve clarity for small captions */
.muted-small{font-size:0.85rem;color:var(--muted)}