/* ---------- VARIABLES ---------- */
:root{
  --primary:#333;
  --secondary:#555;
  --accent:#0066cc;
  --bg-light:#f8f8f8;
  --bg-white:#fff;
  --header-bg:rgba(255,255,255,.85);
}

/* ---------- RESET ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Open Sans',sans-serif;
  color:var(--primary);
  line-height:1.6;
  background:var(--bg-white);
}

/* ---------- HEADER ---------- */
header{
  position:fixed;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 20px;          /* ↑ más alto que antes (10px) */
  z-index:1000;
  background:var(--header-bg);
  backdrop-filter:blur(5px);
}

/* NUEVO TAMAÑO DE LOGO */
.logo{
  max-height:150px;           /* escritorio */
  width:auto;
  height:auto;
  display:block;
  align:center;
}

.nav-toggle{display:none;}

.nav-links{
  list-style:none;margin:0;padding:0;display:flex;
}
.nav-links li{margin:0 15px;}
.nav-links a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}
.nav-links a:hover,
.nav-links a.active{color:var(--accent);}

.nav-toggle-label{display:none;}

/* ---------- SECCIONES ---------- */
/* Visibles sin JS */
html.no-js section{opacity:1!important;transform:none!important;}

section{
  padding:80px 20px;
  scroll-margin-top:100px;   /* se adapta al header más alto */
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;
}
section.visible{opacity:1;transform:none;}

section h1,section h2,section h3{
  font-family:'Playfair Display',serif;
  margin-bottom:.5em;
}
h1{font-size:2.5rem;margin-bottom:.2em;}
h2{font-size:2rem;text-align:center;margin-bottom:1em;}
h3{font-size:1.4rem;}
p{margin:0 0 .5em;font-size:1.1rem;}

#inicio{
  padding-top:140px;         /* +20 px por header más alto */
  text-align:center;
  background:var(--bg-light);
}
#inicio h2{font-size:1.5rem;font-style:italic;color:var(--secondary);}
.hero-img{width:100%;height:auto;display:block}

/* ---------- SERVICIOS ---------- */
#servicios{background:var(--bg-white);}
.servicio-item{max-width:800px;margin:0 auto 2em;}

/* ---------- BLOG ---------- */
#blog{background:var(--bg-light);}
.post{max-width:800px;margin:0 auto 2em;}
.leer-mas{color:var(--accent);font-weight:600;text-decoration:none;}
.leer-mas:hover{text-decoration:underline;}

/* ---------- CASO DE ÉXITO ---------- */
#exito{background:var(--bg-white);}
.caso{max-width:800px;margin:0 auto;text-align:center;}

/* ---------- CONTACTO ---------- */
#contacto{background:var(--bg-light);}
.contacto-container{max-width:600px;margin:0 auto;}
form{display:flex;flex-direction:column;}
label{margin:.5em 0 .2em;font-weight:600;}
input,textarea{
  padding:10px;font-size:1rem;margin-bottom:1em;
  border:1px solid #ccc;border-radius:4px;width:100%;
}
textarea{resize:vertical;}
button{
  padding:12px;font-size:1.1rem;background:var(--primary);
  color:#fff;border:none;border-radius:4px;cursor:pointer;
  transition:.3s;
}
button:hover{background:var(--secondary);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  header{flex-direction:column;align-items:flex-start;}

  .logo{max-height:60px;}    /* logo más pequeño en móvil */

  .nav-toggle-label{
    display:block;position:absolute;top:15px;right:20px;font-size:1.5rem;
    padding:5px 10px;background:var(--primary);color:#fff;border-radius:5px;cursor:pointer;
  }
  nav{width:100%;}
  .nav-links{
    display:none;flex-direction:column;width:100%;margin-top:70px;
    background:var(--header-bg);backdrop-filter:blur(5px);padding:10px 0;
  }
  .nav-links li{text-align:left;margin:10px 0;padding:0 20px;}
  .nav-toggle:checked ~ nav .nav-links{display:flex;}

  section{padding:100px 20px;}
}