:root{
  --ancho: 1100px;
  --espacio: 1rem;
  --radio: 12px;
  --sombra: 0 10px 30px rgba(0,0,0,.08);

  /* Identidad académica COPESA */
  --azul: #0A3A6B;
  --azul-osc: #144E88;
  --dorado: #C6A664;
  --gris-claro:#F5F7FB;
  --gris:#6B7280;

  --titulos: "Merriweather", serif;
  --texto: "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--texto);line-height:1.65;color:#1f2937;background:#fff}
h1,h2,h3,h4{font-family:var(--titulos);color:var(--azul);}

.contenedor{max-width:var(--ancho);margin:auto;padding:0 1rem}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;border:1px solid #000}

/* Encabezado */
.encabezado{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.encabezado__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}

/* Logo más grande en escritorio y reducido en móviles */
.logo img{
  display:block;
  height: 100px; /* tamaño grande en escritorio */
  width:auto;
}
@media (max-width: 640px){
  .logo img{
    height:60px; /* más pequeño en móviles */
  }
}

/* Menú */
.nav{display:flex;align-items:center;gap:1rem}
.menu-btn{display:none;border:1px solid #e5e7eb;border-radius:.6rem;background:#fff;padding:.5rem .75rem}
.menu{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.55rem .85rem;text-decoration:none;color:#111;border-radius:.5rem;font-weight:600}
.menu a:hover{background:#f3f4f6;border:1px solid #e5e7eb}

/* Hero */
.hero{padding:5rem 0;background:linear-gradient(180deg,#f6f8ff,#fff)}
.hero__inner{display:grid;gap:1rem}
.lead{font-size:1.15rem;color:#374151;max-width:70ch}
.resaltado{background:linear-gradient(90deg,#e7f0ff,#fff8e1);padding:.15em .35em;border-radius:.35em;box-shadow:0 0 0 2px #fff inset}
h1{font-size:clamp(2rem,3.2vw,3rem);margin:.25rem 0}

/* Botones */
.btn{display:inline-block;padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:.7rem;text-decoration:none;box-shadow:var(--sombra);font-weight:700}
.btn.primario{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.primario:hover{background:var(--azul-osc);border-color:var(--azul-osc)}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}

/* Secciones */
.seccion{padding:3.5rem 0}
.seccion.bg{background:var(--gris-claro)}
h2{font-size:clamp(1.6rem,2.5vw,2rem);margin:0 0 1rem}
h3{margin:.25rem 0 .75rem}
h4{margin:.25rem 0 .5rem}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:960px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:780px){.grid-2{grid-template-columns:1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

/* Tarjetas y listas */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radio);padding:1rem;box-shadow:var(--sombra)}
.card.mini{padding:1rem}
.valores{margin-top:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.5rem 0 0}
.chips li{background:#eef2ff;border:1px solid #e5e7eb;border-radius:999px;padding:.35rem .7rem;font-size:.95rem}
.lista-check{padding-left:1.1rem;margin:.5rem 0}
.lista-check li{margin:.25rem 0}

/* Pasos */
.pasos{counter-reset:paso;display:grid;gap:.5rem;margin:0;padding-left:1.5rem}
.pasos li{margin:.25rem 0}

/* Subtítulo de bloque */
.sub{margin-top:1.5rem;color:var(--azul-osc);position:relative}
.sub::after{content:"";display:block;width:64px;height:3px;background:var(--dorado);margin-top:.4rem;border-radius:2px}

/* Contacto */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:900px){.contacto{grid-template-columns:1fr}}
.contacto__datos p{margin:.25rem 0}
.form{display:grid;gap:.75rem}
.form input,.form textarea{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:.6rem}
.form button{cursor:pointer}

/* QR */
.qr{display:flex;align-items:center;gap:1rem;margin-top:.75rem}
.qr img{width:160px;max-width:100%;height:auto;border:1px solid #e5e7eb;border-radius:.75rem;box-shadow:var(--sombra)}
.qr small{color:#374151}

/* Pie */
.pie{padding:1.25rem 0;border-top:1px solid #e5e7eb;background:#fff}
.pie__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.legal{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
.legal a{color:#374151;text-decoration:none}
.legal a:hover{text-decoration:underline}

/* Botón flotante WhatsApp */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:60;
  background:#25D366;color:#fff;text-decoration:none;
  padding:.8rem 1rem;border-radius:999px;box-shadow:var(--sombra);
  font-weight:700;border:0;outline:0;
}
.wa-float:hover{filter:brightness(.95)}
.wa-float span{display:inline-block}

/* Responsive menú */
@media (max-width:900px){
  .menu-btn{display:inline-block}
  .menu{display:none;flex-direction:column;background:#fff;position:absolute;right:1rem;top:64px;border:1px solid #e5e7eb;border-radius:.75rem;padding:.5rem;box-shadow:var(--sombra)}
  .menu.abierto{display:flex}
}