/* -------------------------------------------------
   1. Variables de color y tipografía
   ------------------------------------------------- */
:root {
    --color-primary: #17324D;
    --color-secondary: #5F7F6A;
    --color-gray: #8A8F93;
    --color-sand: #E8E1D2;
    --color-white: #F8F8F5;
    --color-copper: #B36A3C;

    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

/* -------------------------------------------------
   2. Reset y bases
   ------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: #2b2b2b;
    background: #fff;
    line-height: 1.6;
}

/* -------------------------------------------------
   3. Layout helpers
   ------------------------------------------------- */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1rem;
}
.grid { display: grid; gap: 2rem; align-items: center; }
.two-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.three-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* -------------------------------------------------
   4. Header y navigation
   ------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 1000;
    transition: background .3s ease;
    border-bottom: 1px solid var(--color-sand);
}
.site-header.scrolled { background: var(--color-white); }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 0;
}
.logo svg { height: 48px; }
.nav-list { list-style:none; display:flex; gap:1.5rem; }
.nav-list a { font-weight:600; color:var(--color-primary); transition:.2s; }
.nav-list a:hover { color:var(--color-copper); }
.link-cta {
    background: var(--color-primary);
    color:#fff;
    padding:.4rem .9rem;
    border-radius:.3rem;
}
.nav-toggle { display:none; flex-direction:column; gap:.3rem; background:transparent; border:none; cursor:pointer; }
.nav-toggle span { width:24px; height:2px; background:var(--color-primary); }

/* -------------------------------------------------
   5. Hero
   ------------------------------------------------- */
.hero { position:relative; overflow:hidden; min-height:80vh; color:var(--color-white); }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(23,50,77,.75), rgba(23,50,77,.35));
}
.hero-content {
    position:absolute;
    top:50%; left:50%;
    max-width:720px;
    text-align:center;
    transform:translate(-50%,-50%);
}
.hero-content h1 { font-family:var(--font-heading); font-size:2.8rem; margin-bottom:.6rem; }
.hero-subtitle { font-size:1.1rem; margin:1rem 0 2rem; }
.btn { display:inline-block; font-weight:600; text-align:center; border:none; border-radius:.3rem; cursor:pointer; transition:.2s; }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-primary:hover { background:#0d223c; }
.btn-outline { background:transparent; color:var(--color-primary); border:2px solid var(--color-primary); }
.btn-outline:hover { background:var(--color-primary); color:#fff; }

/* -------------------------------------------------
   6. Sections
   ------------------------------------------------- */
.section { padding:4rem 0; }
.bg-light { background:var(--color-sand); }
.section-title {
    font-family:var(--font-heading);
    font-size:2.2rem;
    text-align:center;
    margin-bottom:.5rem;
    color:var(--color-primary);
}
.section-lead {
    max-width:860px;
    margin:0 auto 2.5rem;
    text-align:center;
    font-size:1.1rem;
    color:var(--color-gray);
}

/* -------------------------------------------------
   7. Cards
   ------------------------------------------------- */
.cards { display:grid; gap:1.8rem; }
.card {
    background:#fff;
    border:1px solid var(--color-sand);
    border-radius:.4rem;
    padding:1.5rem;
    box-shadow:0 2px 6px rgba(0,0,0,.07);
    transition:transform .2s, box-shadow .2s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.card h3 { margin:.6rem 0 .5rem; font-family:var(--font-heading); color:var(--color-primary); }
.card-icon { display:block; margin:0 auto; }

/* ---- Product cards ---- */
.product-card .product-img {
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:.3rem;
    margin-bottom:.8rem;
}
.product-type { font-size:.9rem; color:var(--color-gray); margin-bottom:.4rem; }
.product-features { list-style:disc inside; margin-bottom:1rem; }

/* -------------------------------------------------
   8. Lists & other components
   ------------------------------------------------- */
.list-features { columns:2; column-gap:2rem; list-style:disc inside; margin:1.5rem 0; }
.centered { text-align:center; }

/* -------------------------------------------------
   9. Form
   ------------------------------------------------- */
.contact-form {
    background:#fff;
    border:1px solid var(--color-sand);
    border-radius:.4rem;
    padding:2rem;
    max-width:860px;
    margin:0 auto;
}
.form-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.form-group.full-width { grid-column:1/-1; }
label { display:block; margin-bottom:.3rem; font-weight:600; }
input, select, textarea {
    width:100%;
    padding:.5rem .8rem;
    border:1px solid var(--color-gray);
    border-radius:.3rem;
    font-family:inherit;
}
input:focus, textarea:focus, select:focus {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 3px rgba(23,50,77,.2);
}
.form-actions { margin-top:1rem; }

/* -------------------------------------------------
   10. Footer
   ------------------------------------------------- */
.site-footer {
    background:var(--color-primary);
    color:#fff;
    font-size:.9rem;
}
.footer-inner { display:flex; flex-wrap:wrap; gap:2rem; padding:2rem 0; }
.footer-col { flex:1 1 200px; }
.footer-col h4 { margin-bottom:.8rem; font-family:var(--font-heading); color:var(--color-copper); }
.footer-col a { color:#fff; }
.social-list { display:flex; gap:.5rem; }
.footer-bottom { border-top:1px solid var(--color-sand); text-align:center; padding:.8rem 0; font-size:.8rem; }

/* -------------------------------------------------
   11. Back‑to‑top button
   ------------------------------------------------- */
#back-to-top {
    position:fixed;
    bottom:2rem;
    right:2rem;
    display:none;
    background:var(--color-primary);
    border-radius:50%;
    width:48px; height:48px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:900;
}
#back-to-top.show { display:flex; }

/* -------------------------------------------------
   12. Responsive
   ------------------------------------------------- */
@media(max-width:960px){
    .hero-content h1{font-size:2.2rem;}
    .hero-subtitle{font-size:1rem;}
}
@media(max-width:768px){
    .nav-list{display:none;}
    .nav-toggle{display:flex;}
    .hero{min-height:60vh;}
    .cards{gap:1rem;}
}
@media(max-width:600px){
    .section-title{font-size:1.9rem;}
    .hero-content h1{font-size:1.9rem;}
    .list-features{columns:1;}
}