*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#f3f6ff;
  color:#102445;
  line-height:1.6;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(90deg,#ffffff,#e9f1ff);
  box-shadow:0 4px 14px rgba(18,32,69,.16);
  overflow:hidden;
}

#headerCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  opacity:.55;
}

.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}

.logo-box{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-img{
  height:60px;
  width:auto;
  flex-shrink:0;
}

.logo-text span{
  display:block;
}

.logo-title{
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0d3a78;
}

.logo-subtitle{
  font-size:.85rem;
  color:#2269c0;
}

.main-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.92rem;
}

.main-nav a{
  position:relative;
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  color:#0d3a78;
  font-weight:600;
  background:rgba(255,255,255,.7);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.main-nav a:hover{
  background:#ffb347;
  color:#102445;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}

/* Layout secciones */

main{
  padding:30px 16px 40px;
}

.section,
.hero-section{
  max-width:1200px;
  margin:0 auto 40px;
}

.section-title{
  font-size:1.9rem;
  text-align:center;
  color:#0d3a78;
  margin-bottom:24px;
}

/* Hero */

.hero-inner{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  align-items:center;
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 18px 45px rgba(13,58,120,.12);
  padding:28px 26px;
}

.hero-text{
  flex:1 1 320px;
}

.hero-text h1{
  font-size:2.1rem;
  margin-bottom:14px;
}

.hero-lead{
  font-size:1rem;
  margin-bottom:12px;
}

.hero-list{
  padding-left:18px;
  font-size:.95rem;
}

.hero-media{
  flex:1 1 260px;
  background:linear-gradient(135deg,#fff9f1,#ffe3bf);
}

.hero-media img{
  width:100%;
  border-radius:16px;
}

/* Cards / secciones claras */

.card{
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 14px 36px rgba(13,58,120,.10);
  padding:22px 20px;
}

/* Servicios */

.light-section{
  background:transparent;
}

.services-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.service-card{
  flex:1 1 260px;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(18,32,69,.08);
  overflow:hidden;
}

.service-image{
  width:100%;
  height:190px;
  object-fit:cover;
}

.service-body{
  padding:16px 18px 18px;
}

/* Proyectos */

.projects-layout{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}

.projects-text{
  flex:1 1 320px;
}

.projects-image{
  flex:1 1 260px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.projects-image img{
  width:100%;
  border-radius:16px;
}

/* Publicaciones */

.post-card{
  display:flex;
  gap:22px;
  margin-bottom:26px;
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 12px 32px rgba(18,32,69,.10);
  padding:18px 18px 20px;
}

.post-image img{
  max-width:260px;
  border-radius:14px;
  object-fit:cover;
}

.post-layout-left{flex-direction:row;}
.post-layout-right{flex-direction:row-reverse;}
.post-layout-center{
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.post-layout-center .post-image img{
  max-width:360px;
}

.post-summary{
  font-weight:600;
  margin-bottom:6px;
}

.post-date{
  font-size:.8rem;
  color:#60709a;
  margin-top:4px;
}

/* Comentarios */

.comments-block{
  margin:-6px 4px 32px;
  padding:8px 4px 10px;
}

.comments-list{
  list-style:none;
  margin-bottom:10px;
}

.comment-item{
  margin-bottom:10px;
  padding:9px 11px;
  border-radius:10px;
  background:#eef3ff;
}

.comment-header{
  display:flex;
  justify-content:space-between;
  font-size:.82rem;
  margin-bottom:4px;
}

.comment-text{
  font-size:.9rem;
}

.comment-votes{
  margin-top:5px;
  display:flex;
  gap:10px;
}

.comment-votes button{
  border:none;
  background:#ffffff;
  border-radius:999px;
  padding:4px 10px;
  font-size:.8rem;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.comment-form{
  margin-top:10px;
}

.comment-form input[type=text],
.comment-form textarea{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #c7d4f6;
  font-size:.9rem;
  margin-top:4px;
}

.comment-form textarea{
  resize:vertical;
}

.form-row{
  margin-bottom:8px;
}

.btn-primary,
.btn-secondary{
  display:inline-block;
  border-radius:999px;
  border:none;
  padding:8px 18px;
  font-weight:700;
  cursor:pointer;
}

.btn-primary{
  background:linear-gradient(90deg,#ff9100,#ffd15a);
  color:#102445;
}

.btn-secondary{
  background:#e3edff;
  color:#0d3a78;
}

.btn-danger{
  display:inline-block;
  padding:7px 16px;
  border-radius:999px;
  background:#ff5252;
  color:#ffffff;
  font-weight:600;
  text-decoration:none;
  margin-left:6px;
}

/* Contacto */

.contact-grid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.contact-card{
  flex:1 1 260px;
}

/* Footer */

.site-footer{
  background:#ffffff;
  border-top:1px solid #d8e0f5;
  box-shadow:0 -2px 8px rgba(0,0,0,.04);
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:16px 20px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  align-items:center;
  font-size:.85rem;
  color:#43506f;
}

.call-button{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:#1e88e5;
  color:#ffffff;
  font-weight:600;
  text-decoration:none;
  margin-left:6px;
}

/* Alertas */

.alert{
  max-width:1200px;
  margin:0 auto 12px;
  padding:9px 12px;
  border-radius:10px;
  font-size:.88rem;
}

.alert-error{
  background:#ffe0e0;
  color:#b71c1c;
}

.alert-success{
  background:#e0f4dd;
  color:#256b1f;
}

/* Dashboard */

.dashboard-body{
  background:#eef2ff;
}

.dashboard-wrapper{
  max-width:1100px;
  margin:30px auto 40px;
  padding:0 18px;
}

.dashboard-card{
  margin-bottom:18px;
}

.admin-login-form input,
.admin-post-form input,
.admin-post-form textarea,
.admin-post-update-form input{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #c7d4f6;
  margin-top:4px;
  margin-bottom:8px;
}

.admin-posts-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.admin-post-item{
  padding:14px 12px;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 6px 16px rgba(18,32,69,.08);
}

.admin-post-thumb{
  max-width:180px;
  border-radius:10px;
  margin:8px 0;
}

/* Responsive */

@media (max-width:900px){
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-inner{
    flex-direction:column;
  }
  .post-card,
  .post-layout-right,
  .post-layout-left{
    flex-direction:column;
  }
  .post-image img{
    max-width:100%;
  }
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}