/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
    --primary: #A0522D;
    --primary-hover: #8B4513;
    --secondary: #3D1500;
    --accent: #D4692A;
    --text-dark: #1F2937;
    --text-light: #4B5563;
    --bg-light: #F9FAFB;
    --white: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { color: var(--text-dark); line-height: 1.7; background-color: var(--white); font-size: 16px; }
h1, h2, h3 { color: var(--secondary); margin-bottom: 1.2rem; line-height: 1.3; font-weight: 700; }
p { margin-bottom: 1.2rem; color: var(--text-light); font-size: 1.05rem; }
a { color: var(--primary); font-weight: 600; text-decoration: none; transition: all 0.3s ease; border-bottom: 1px dotted transparent; }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
strong { color: var(--text-dark); }

/* Header */
header { background-color: var(--white); box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; padding: 10px 0; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8rem; font-weight: bold; color: var(--primary); display: flex; align-items: center; gap: 12px; }
.logo img { max-width: 200px; height: auto; display: block; object-fit: contain; }
.contact-btn { background-color: var(--primary); color: var(--white); padding: 12px 24px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 10px rgba(160, 82, 45, 0.3); border: none; }
.contact-btn:hover { background-color: var(--primary-hover); transform: translateY(-2px); color: var(--white); }

/* Hero */
.hero { background: linear-gradient(rgba(10, 10, 10, 0.85), rgba(61, 21, 0, 0.85)), url('./public/images/cerrajero-tarragona-prosecuritec.webp') center/cover no-repeat; color: var(--white); padding: 100px 0; text-align: center; }
.hero h1 { color: var(--white); font-size: 3rem; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero p { color: #F3F4F6; font-size: 1.25rem; max-width: 800px; margin: 0 auto 40px; }

/* Sections */
.section { padding: 80px 0; }
.bg-gray { background-color: var(--bg-light); border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; }
.grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }

/* Cards */
.card { background: var(--white); padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.06); transition: transform 0.3s ease; border-top: 4px solid var(--primary); }
.card:hover { transform: translateY(-5px); }
.card h3 { color: var(--primary); font-size: 1.5rem; }

/* Trust Badges */
.trust-badges { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 0 0 50px; }
.badge { display: flex; align-items: center; gap: 12px; background: var(--white); padding: 15px 30px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); font-weight: 700; color: var(--secondary); font-size: 1.1rem; border: 1px solid #F3F4F6; }

/* Footer */
footer { background-color: #1A1A1A; color: var(--white); padding: 60px 0; text-align: center; border-top: 5px solid var(--primary); }
footer h2 { color: var(--white); font-size: 2rem; }
footer p { color: #9CA3AF; margin-bottom: 15px; }
footer a { color: var(--accent); }