/* =========================================================
   CSIBS — Estilos base (depurado)
   ========================================================= */

/* ===== Variables ===== */
:root{
  --primary:#135EB0;       /* azul corporativo */
  --accent:#3730A3;        /* acento */
  --muted:#f5f7fb;
  --text:#222;
  --text-muted:#667085;
}

/* ===== Reset / Base ===== */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);
}
img{ max-width:100%; height:auto; display:block } /* si deseas 20% global, cambia a 20% */
a{ color:var(--primary); text-decoration:none }

/* ===== Utilidades / Secciones ===== */
.container{ width:min(1100px,92%); margin-inline:auto }
.section{ padding:64px 0 }
.section.muted{ background:var(--muted) }
.section-title{ font-size:32px; margin:0 0 16px; color:var(--primary) }
.section-subtitle{ font-size:20px; margin:0 0 8px; color:var(--primary) }
.section-intro{ color:var(--text-muted); margin-bottom:24px }
.muted-text{ color:var(--text-muted) }

/* =========================
   Header / Nav
   ========================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #e6e8ee;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 }
.brand{ font-weight:800; color:var(--primary); font-size:20px }
.menu{ display:flex; gap:18px; align-items:center }
.menu a{ padding:8px 10px; border-radius:10px }
.menu .btn-small{ background:var(--primary); color:#fff }
.hamburger{ display:none; border:1px solid #e3e6ef; border-radius:8px; padding:6px 8px; background:#fff }

/* Responsive menu */
@media (max-width:860px){
  .menu{
    display:none; position:absolute; right:4%; top:56px;
    background:#fff; border:1px solid #e6e8ee; border-radius:12px; padding:12px;
    flex-direction:column; min-width:240px
  }
  .hamburger{ display:block }
}

/* =========================
   Hero
   ========================= */
.hero{
  position:relative; color:#fff; text-align:center;
  height:500px; background:url('/assets/img/csibs_banner.webp') no-repeat center/cover;
  display:flex; align-items:flex-end; justify-content:center;
  padding:40px 20px;
}
.hero::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.4);
}
.hero .container{ position:relative; z-index:2; max-width:900px }
.hero h1{ font-size:clamp(2rem,2.2vw + 1.2rem,2.5rem); margin:0 0 16px; line-height:1.2 }
.hero p{ font-size:clamp(1rem,.6vw + .9rem,1.2rem); margin:0 0 22px }
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* Hero breakpoints */
@media (max-width:992px){
  .hero{ height:420px; padding:32px 16px; background-position:center 35% }
  .hero::before{ background:rgba(0,0,0,.45) }
}
@media (max-width:768px){
  .hero{ height:380px; padding-bottom:calc(24px + env(safe-area-inset-bottom,0)); background-position:center 30% }
  .cta{ gap:10px }
  .hero p{ margin-bottom:18px }
}
@media (max-width:480px){
  .hero{ height:320px; padding:18px 14px calc(18px + env(safe-area-inset-bottom,0)); background-position:center 28% }
  .hero::before{ background:rgba(0,0,0,.5) }
  .cta{ flex-direction:column; align-items:center }
  .cta .btn,.cta .btn-outline{ width:100%; max-width:280px }
}

/* =========================
   Botones
   ========================= */
.btn{
  background:var(--accent, #0c2340);
  color:#fff;
  padding:10px 16px;
  border:none;
  border-radius:10px;
  font-weight:600;
  display:inline-block;
  cursor:pointer;
  transition:filter .2s ease, background .2s ease;
}
.btn:hover{ filter:brightness(1.1) }

.btn-outline{
  border:2px solid #fff; color:#fff; background:transparent;
}

.btn-line{
  background:#fff; color:#135EB0; border:2px solid #135EB0;
  padding:10px 20px; border-radius:6px; font-weight:600; cursor:pointer; transition:all .3s ease;
}
.btn-line:hover{ background:#135EB0; color:#fff }

.btn--accept{ background:#22c55e }
.btn--reject{ background:#ef4444 }

/* WhatsApp */
.btn--whatsapp{ background:#25D366 }
.btn--whatsapp:hover{ filter:brightness(1.08) }

/* =========================
   Cards (services, team, etc.)
   ========================= */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px }
.card{
  background:#fff; border:1px solid #e8ebf3; border-radius:18px; padding:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.03); transition:transform .15s ease, box-shadow .15s ease;
}
.card .icon{ width:40px; height:40px; margin-bottom:10px }
.card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06) }

/* Team */
.team-card .avatar{
  object-fit:cover; border-radius:50%;
  margin-bottom:10px; border:3px solid #eef1f7;
}

/* =========================
   Acordeón / Proyectos
   ========================= */
.accordion-item{
  border:1px solid #e8ebf3; border-radius:16px; background:#fff; overflow:hidden;
}
.accordion-header{
  width:100%; text-align:left; padding:18px 20px; background:#fff; border:0;
  font-size:18px; font-weight:600; color:var(--primary); cursor:pointer;
  display:flex; align-items:center; gap:14px;
}
.accordion-header .icon{ width:120px; height:120px; object-fit:contain }
.accordion-content{ display:none; padding:0 18px 16px 18px }
.accordion-item.open .accordion-content{ display:block }
.accordion-content h3{ font-size:18px; margin:12px 0 6px; color:var(--primary) }
.accordion-content .card{
  background:#f9fafc; border-radius:12px; padding:14px 16px; margin-bottom:12px;
  border:1px solid #e8ebf3; box-shadow:0 1px 2px rgba(0,0,0,.03);
}

/* Grid de proyectos */
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(450px,1fr)); gap:24px }
@media (max-width:768px){ .projects-grid{ grid-template-columns:1fr } }

/* =========================
   Clientes
   ========================= */
.sector{ margin:3px 0 }
.sector h3{
  margin:0 0 14px; color:#0a58ca; border-left:4px solid #0a58ca; padding-left:10px;
}
.logo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px }
.logo{
  display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center
}
.logo img{
  max-width:150px; max-height:70px; object-fit:contain;
  filter:grayscale(100%); transition:transform .2s ease, filter .2s ease;
}
.logo img:hover{ transform:scale(1.05); filter:grayscale(0%) }
.logo figcaption{ font-size:12px; color:var(--text-muted) }
.logo-placeholder{
  width:150px; height:70px; border:1px dashed #c9cfdb; border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:#7a8499;
}

/* =========================
   Propuesta de valor
   ========================= */
.value-pills{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px; margin:16px 0 22px;
}
.pill{
  display:inline-block; background:#fff; color:var(--text);
  border:1px solid #e8ebf3; border-radius:999px; padding:10px 14px; font-size:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.value-title{ font-size:18px; margin:6px 0; color:var(--primary) }

/* =========================
   Footer
   ========================= */
.site-footer{
  background:#111827; color:#f3f4f6;
  padding:3rem 1.5rem 2rem; font-size:.95rem; line-height:1.6;
}
.site-footer .footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem; max-width:1200px; margin:0 auto 2rem;
}
.site-footer .brand{ font-size:1.5rem; font-weight:700; margin-bottom:.5rem; color:#fff }
.site-footer h4{ font-size:1.1rem; font-weight:600; margin-bottom:1rem; color:#e5e7eb }
.site-footer p, .site-footer a{ color:#d1d5db; transition:color .3s ease; text-decoration:none }
.site-footer a:hover{ color:#818cf8 }
.footer-links{ list-style:none; padding:0; margin:0 }
.footer-links li{ margin-bottom:.5rem }
.footer-links li a{ color:#d1d5db }
.footer-links li a:hover{ color:#a5b4fc }
.site-footer .copy{
  text-align:center; border-top:1px solid #374151; padding-top:1.5rem;
  font-size:.85rem; color:#9ca3af;
}

/* =========================
   Cookie banner
   ========================= */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; background:#0c2340; color:#fff;
  padding:16px; z-index:9999;
}
.cookie-banner[hidden]{ display:none }
.cookie-banner__container{
  max-width:1100px; margin:0 auto; display:flex; gap:12px;
  align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-banner__link{ color:#9bd3ff; text-decoration:underline }

/* =========================
   Contacto
   ========================= */
.contact-wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start }
.contact-info p{ margin:6px 0 }
.map{ margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid #e6e8ee }

/* Formulario (unificado) */
.section.contact-section{ padding:60px 20px; background:#f7f9fc }
.section-title{ text-align:center; font-size:2rem; margin-bottom:10px; color:var(--accent, #0c2340) }
.section-subtitle{ text-align:center; color:#555; margin-bottom:30px }

.contact-form{
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px;
  padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:1.2rem; max-width:720px; min-width:300px;  margin:0 auto;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.form-field{ margin-bottom:20px; display:flex; flex-direction:column }
.form-field label{ font-weight:600; margin-bottom:6px; color:#333 }
.form-field input,
.form-field textarea{
  width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px;
  font:inherit; background:#fff; color:#111827; transition:border-color .2s, box-shadow .2s;
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none; border-color:var(--accent, #0c2340); box-shadow:0 0 0 3px rgba(79,70,229,.15);
}
.form-field textarea{ resize:vertical; min-height:120px }
.consent label{ font-weight:normal }

.form-actions{
  display:flex; gap:12px; justify-content:center; align-items:center; margin-top:10px;
}
.form-status{ margin-top:12px; text-align:center; color:#0c2340; font-weight:500 }

/* Honeypot */
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

/* Responsive contacto */
@media (max-width:860px){
  .contact-wrap{ grid-template-columns:1fr }
}
@media (max-width:720px){
  .form-grid{ grid-template-columns:1fr }
}