/* =========================
   VARIABLES Y RESETEOS
   ========================= */
:root{
  --brand-900:#1e3a5f;   /* header / énfasis */
  --brand-800:#18486f;
  --brand-700:#0c4a6e;   /* botón principal */
  --brand-600:#075985;   /* hover botón */
  --accent:#25D366;      /* WhatsApp */
  --text:#333;
  --text-on:#fff;
  --radius:12px;
  --shadow:0 8px 20px rgba(0,0,0,.15);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Roboto', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:url('./assets/images/fondo-textura.jpg') repeat;
  background-size:cover;
  background-attachment:fixed;
  padding-bottom:100px; /* evita que botones flotantes tapen contenido */
}

/* Mejor accesibilidad de enfoque */
a, button{ transition:all .2s ease; }
:focus-visible{ outline:2px solid var(--brand-700); outline-offset:3px; }

/* Imágenes fluidas por defecto */
img{ display:block; max-width:100%; height:auto; }

/* =========================
   HEADER / NAV
   ========================= */
header{
  background:var(--brand-900);
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 24px;
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
}
.logo{ width:80px; height:auto; border-radius:6px; }

nav ul{
  list-style:none; display:flex; gap:20px; margin:0; padding:0;
}
nav ul li a{
  text-decoration:none; color:var(--text-on); font-weight:700;
  padding:6px 2px; border-radius:4px;
}
nav ul li a:hover,
nav ul li a:focus-visible{ opacity:.9; text-decoration:underline; }

/* Menú hamburguesa (móvil) */
.menu-toggle{
  display:none; font-size:30px; color:var(--text-on);
  cursor:pointer; position:absolute; right:20px; top:14px;
}

/* =========================
   HERO
   ========================= */
.hero{
  display:flex; justify-content:center; align-items:center;
  height:90vh; text-align:center; color:var(--text-on);
  background-image:url('./assets/images/fondo.jpg');
  background-size:cover; background-position:center; position:relative;
}
.hero .overlay{
  background-color:rgba(0,0,0,.5);
  padding:60px 20px; border-radius:10px; max-width:800px; margin:0 auto;
}

/* =========================
   SECCIONES
   ========================= */
section{
  padding:60px 20px; max-width:1200px; margin:auto;
  scroll-margin-top:80px; /* evita que el header tape el ancla */
}
h2{
  font-size:2.4rem; text-align:center; color:var(--brand-900);
  margin:0 0 30px 0; line-height:1.2;
}

/* =========================
   SERVICIOS
   ========================= */
.service-cards{
  display:flex; flex-wrap:wrap; justify-content:center; gap:25px;
  background:url('./assets/images/fondo-textura.jpg') center/cover no-repeat;
  padding:40px; border-radius:10px;
}
.card{
  background:rgba(255,255,255,.96);
  padding:20px; border-radius:12px; box-shadow:var(--shadow);
  max-width:260px; text-align:center;
}
.card h3{ margin:0 0 8px 0; color:var(--brand-900); }
.card p{ font-size:.95rem; margin:0; }

/* =========================
   PORTAFOLIO
   ========================= */
.portfolio-grid{
  display:flex; justify-content:center; flex-wrap:wrap; gap:25px;
}
.project-card{
  background:#fff; border-radius:10px; padding:20px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  max-width:280px; text-align:center;
}
.project-card img{ border-radius:6px; }

/* =========================
   SOBRE / CONTACTO
   ========================= */
section#sobre,
section#contacto{
  background-color:rgba(0,0,0,.6);
  color:#fff; padding:40px 20px; border-radius:10px;
  max-width:1000px; margin:40px auto;
}
section#sobre a,
section#contacto a{ color:#fff; text-decoration:underline; }

/* Formulario */
.contact-form{
  display:flex; flex-direction:column; gap:15px;
  max-width:520px; margin:0 auto;
}
.contact-form input,
.contact-form textarea{
  padding:12px; border:1px solid #aaa; border-radius:8px;
  font-size:1rem; background:#fff;
}
.contact-form textarea{ resize:vertical; min-height:120px; }

/* Botón del formulario + botones genéricos */
.contact-form .btn,
form button,
button{
  background:var(--brand-700); color:#fff;
  padding:10px 14px; border:none; border-radius:8px; font-weight:700;
  cursor:pointer; width:100%;
}
form button:hover,
button:hover{ background:var(--brand-600); }
button:disabled{ opacity:.55; cursor:not-allowed; }

/* =========================
   WHATSAPP
   ========================= */
.whatsapp-container{
  position:fixed; bottom:20px; right:20px; z-index:1000;
}
.whatsapp-button{
  display:flex; align-items:center; gap:8px;
  background-color:var(--accent); color:#fff;
  padding:10px 15px; border-radius:30px; text-decoration:none;
  font-weight:500; font-size:14px; box-shadow:0 4px 6px rgba(0,0,0,.2);
  transform:translateZ(0);
}
.whatsapp-button:hover{ transform:scale(1.05); }
.whatsapp-button img{ width:20px; height:20px; }

/* =========================
   BOTÓN VOLVER ARRIBA
   ========================= */
.btn-top{
  position:fixed; bottom:90px; right:28px;
  background-color:var(--brand-900); color:#fff;
  padding:10px; border-radius:50%; font-size:16px; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.btn-top:hover{ transform:translateY(-2px); }

/* =========================
   FOOTER
   ========================= */
footer{
  text-align:center; padding:20px; background:var(--brand-900);
  color:#fff; font-size:14px;
}

/* =========================
   ANIMACIONES
   ========================= */
.fade-in{
  opacity:0; transform:translateY(40px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* Respeto a reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .fade-in{ opacity:1; transform:none; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  /* El fondo fijo puede provocar jank en móviles */
  body{ background-attachment:scroll; }
}

@media (max-width: 768px){
  nav ul{
    flex-direction:column; background:var(--brand-900);
    position:absolute; top:60px; right:0; width:220px;
    display:none; padding:10px; border-bottom-left-radius:10px;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
  }
  nav.active ul{ display:flex; }

  .menu-toggle{ display:block; }

  .service-cards,
  .portfolio-grid{ flex-direction:column; align-items:center; }

  .contact-form input,
  .contact-form textarea,
  .contact-form .btn,
  form button{ width:100%; }

  .whatsapp-button{ font-size:12px; padding:8px 10px; }
  .btn-top{ bottom:80px; }
}

@media (max-width: 600px){
  .whatsapp-button{ padding:8px 12px; font-size:12px; }
  .whatsapp-button img{ width:16px; height:16px; }
}