/* Variables */
:root {
  --color-primary: #083f6b;
  --color-secondary: #d28b00;
  --color-accent: #28a745;
  --neutral-light: #f5f5f5;
  --neutral-medium: #e0e0e0;
  --neutral-dark: #243544;
  --font-sans: 'Arial', sans-serif;
  --header-height: 80px;
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--neutral-dark); line-height:1.5; }
.container { width:90%; max-width:1200px; margin:0 auto; }

/* Offset for anchor scroll */
section[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

/* Header */
.header { position:fixed; top:0; left:0; right:0; height: var(--header-height); background:#fff; border-bottom:1px solid #ddd; z-index:1000; }
.header__inner { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo img { height:60px; }
.nav { display:flex; }
.nav__list { display:flex; list-style:none; gap:1.5rem; }
.nav__list a { color: var(--color-primary); text-decoration:none; font-weight:500; }
.burger { display:none; background:none; border:none; }

/* Hero Slider */
.hero-slider { margin-top: var(--header-height); }
.hero-slider .container { position:relative; }
.slider__viewport { position:relative; width:100%; height:600px; overflow:hidden; }
.slide { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 1s; }
.slide.active { opacity:1; }
.hero__content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.hero__title { font-size:2rem; margin-bottom:0.5rem; }
.hero__subtitle { margin-bottom:1rem; }
.hero__cta { margin-top:1rem; font-size:1rem; color:#fff; background:rgba(0,0,0,0.6); display:inline-block; padding:0.5rem 1rem; border-radius:4px; }
.btn { display:inline-block; padding:0.75rem 1.5rem; border-radius:4px; text-decoration:none; font-weight:600; }
.btn--primary { background:var(--color-secondary); color:#fff; }

/* Separador SVG */
.separator { width:100%; overflow:hidden; line-height:0; }
.separator svg { display:block; width:100%; height:60px; }

/* Presentación */
.presentacion { padding:4rem 0; background:#fff; }
.presentacion__inner { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.presentacion__img { width:100%; max-width:500px; border-radius:8px; }
.presentacion__text { flex:1; text-align:center; }
.presentacion__title { color:var(--color-primary); margin-bottom:1rem; }

/* Qué hacemos */
.que-hacemos { padding:4rem 0; text-align:center; background:var(--neutral-light); }
.que-hacemos h2 { color:var(--color-primary); margin-bottom:2rem; }
.cards { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.card { background:#fff; border:1px solid #ddd; border-radius:8px; padding:2rem; width:280px; text-align:center; transition:box-shadow .3s; }
.card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.card__icon img { width:2rem; height:2rem; margin-bottom:1rem; }
.card h3 { margin-bottom:0.75rem; }

/* Servicios & Ventajas */
.servicios-ventajas {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 0;
  flex-wrap: wrap;
  background: #fff;
}
.sv-block { flex: 1; min-width: 250px; text-align: center; }
.sv-block h2 { color: var(--color-primary); margin-bottom: 1rem; }
.sv-block ul { list-style: none; padding-left: 1rem; text-align: left; margin: 0 auto; display: inline-block; }
.sv-block ul li { position: relative; margin-bottom: 0.75rem; padding-left: 1.5rem; }
.sv-block ul li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); }

/* Sectores & Materiales */
.sectores-materiales { background: var(--neutral-medium); padding: 4rem 0; }
.sm-inner { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.sm-card { background: #fff; border-radius: 8px; padding: 2rem; width: 280px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.sm-card h2 { color: var(--color-primary); margin-bottom: 1rem; }
.sm-card ul { list-style: none; padding-left: 0; text-align: left; margin: 0 auto; display: inline-block; }
.sm-card ul li { position: relative; margin-bottom: 0.75rem; padding-left: 1.5rem; }
.sm-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); }

/* Contacto */
.contacto { padding: 4rem 0; text-align: center; background: #fff; }
.contacto h2 { color: var(--color-primary); margin-bottom: 1rem; }
.contacto p { margin-bottom: 2rem; }
.form { display: inline-block; background: var(--neutral-medium); padding: 2rem; border-radius: 8px; text-align: left; min-width: 300px; }
.form label { display: block; margin-bottom: 1rem; }
.form input, .form textarea { width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 4px; background: transparent; outline: none; }
.form input:focus, .form textarea:focus { border-color: var(--color-primary); }
.form button { margin-top: 1rem; }

/* Footer centrado */
.footer { background: var(--neutral-dark); color: #fff; }
.footer--alt { padding-top: 3rem; }
.footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 2rem 0; }
.footer__logo { background: #fff; padding: 0.5rem; border-radius: 4px; height: 50px; }
.footer__nav { display: flex; gap: 1rem; }
.footer__nav a { color: #fff; text-decoration: none; font-weight: 500; }
.footer__info p { margin: 0.25rem 0; }
.footer__info a { color: #fff; text-decoration: none; }

/* ===================== */
/* Animaciones al hacer scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* ===================== */

/* ========== Tablet (≤768px) ========== */
@media (max-width: 768px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav.nav--open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: #fff;
    padding: 1rem 0;
    z-index: 1001;
  }
  .nav--open .nav__list {
    flex-direction: column;
    gap: 0;
  }
  .nav--open .nav__list li {
    width: 100%;
    text-align: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--neutral-medium);
  }
  .cards { flex-direction: column; gap: 1rem; }
  .card { width: 100%; max-width: none; }
  #servicios-ventajas .sv-block { width: 100%; max-width: none; margin-bottom: 2rem; }
  .sm-inner { flex-direction: column; gap: 1rem; }
  .sm-card { width: 100%; max-width: none; }
  .contacto .form { width: 100%; padding: 1.5rem; }
  .contacto .btn { display: block; margin: 1.5rem auto 0; }
  .footer__nav { justify-content: center; flex-wrap: wrap; }
  .footer__info p { margin: 0.5rem 0; }
  .footer__info a { display: inline-block; margin: 0.25rem auto; }
}

/* ========== Móvil (≤375px) ========== */
@media (max-width: 375px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav.nav--open { padding: 0.75rem 0; }
  .nav--open .nav__list li { padding: 0.5rem 0; }
  .cards { gap: 0.75rem; }
  .card { padding: 1.5rem; }
  #servicios-ventajas .sv-block,
  .sm-card { margin-bottom: 1.5rem; }
  .sm-inner { gap: 0.75rem; }
  .contacto .form { padding: 1rem; }
  .contacto .btn { margin: 1rem auto 0; }
  .footer__inner { gap: 0.5rem; padding: 1.5rem 0; }
  .footer__nav { gap: 0.5rem; }
  .footer__info p { margin: 0.25rem 0; }
}

/* ====== Ajuste mobile menu bajo el header ====== */
@media (max-width: 768px) {
  .nav { display: none; }
  .nav.nav--open {
    display: flex;
    flex-direction: column;
    position: fixed !important;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1001;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  .nav.nav--open .nav__list {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
  }
  .burger {
    position: relative;
    z-index: 1002;
  }
}
/* Aviso de Cookies */
.cookie-consent {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(36, 53, 68, 0.95);
  color: #fff;
  padding: 1rem 0;
  display: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 1100;
}
.cookie-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cookie-consent__inner p {
  margin: 0;
  font-size: 0.9rem;
}
.cookie-consent__inner a {
  color: var(--color-secondary);
  text-decoration: underline;
}
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}
/* Responsive */
@media(max-width: 480px) {
  .cookie-consent__inner {
    flex-direction: column;
    text-align: center;
  }
}