/* Tutorias.ec — estilos de las páginas de insignias (mismos colores que el sitio) */
*{box-sizing:border-box;margin:0;padding:0}
body{background:#faf9f6;color:#191b2a;font-family:'Public Sans',system-ui,sans-serif;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
main{flex:1}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2{font-family:'Archivo',sans-serif;letter-spacing:-.01em}
.kicker{font-family:'Archivo';font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#f0793d}

/* header / footer */
.top{background:#fff;border-bottom:1px solid #e9e6df}
.top-in{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.logo{height:40px;width:auto;display:block}
.top-link{font-weight:700;font-size:14px;color:#2c3f92}
.top-link:hover{color:#f0793d}
.foot{background:#151d47;color:#9aa1cc;font-size:13.5px;margin-top:56px}
.foot-in{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.foot a{color:#fff;font-weight:600}

/* tarjeta de insignia */
.badge{padding-top:32px}
.card{background:#fff;border:1px solid #e9e6df;border-radius:22px}
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;padding:36px;position:relative;overflow:hidden}
.hero-img{background:radial-gradient(circle at 50% 45%,#eef1fb,#fff 70%);border-radius:18px;display:flex;align-items:center;justify-content:center;padding:22px}
.hero-img img{width:100%;max-width:320px;height:auto;filter:drop-shadow(0 16px 26px rgba(21,29,71,.18))}
.hero h1{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.1;margin-top:8px}
.meta{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:20px}
.meta dt{font-size:12.5px;color:#8a8fa6;font-weight:600}
.meta dd{font-weight:700;color:#2c3f92}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;font-weight:700;font-size:15px;padding:13px 22px;border-radius:12px;transition:background .15s,color .15s}
.btn-main{background:#f0793d;color:#fff;box-shadow:0 10px 22px rgba(240,121,61,.28)}
.btn-main:hover{background:#d9652b}
.btn-ghost{border:1.5px solid #d9d6cf;color:#2c3f92}
.btn-ghost:hover{border-color:#2c3f92}
.share{margin-top:22px;padding-top:20px;border-top:1px solid #eeece6}
.btn-li{display:inline-flex;font-weight:700;font-size:14.5px;color:#fff;background:#0a66c2;padding:11px 18px;border-radius:10px}
.btn-li:hover{background:#004182}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px;font-size:14px;color:#62667d}
.share-row a,.share-row button{color:#2c3f92;font-weight:700;font:inherit;font-weight:700;background:none;border:none;cursor:pointer}
.share-row a:hover,.share-row button:hover{color:#f0793d}

/* contenido */
.body{margin-top:20px;padding:32px 36px}
.lead{font-size:16.5px;color:#2b3358;max-width:760px}
.lead+.lead{margin-top:12px}
.body h2{font-size:19px;font-weight:800;margin:28px 0 12px}
.list{list-style:none;display:grid;gap:9px;max-width:760px}
.list li{position:relative;padding-left:26px;color:#3a3f58}
.list li::before{content:'';position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;border:2.5px solid #f0793d}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:#eef1fb;color:#2c3f92;font-weight:600;font-size:14px;padding:7px 14px;border-radius:999px}

/* índice */
.intro{padding:44px 0 26px;max-width:720px}
.intro h1{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.1;margin-top:8px}
.intro p{color:#62667d;font-size:16.5px;margin-top:12px}
.intro input{margin-top:22px;width:100%;max-width:420px;font:inherit;font-size:15px;padding:13px 16px;border:1.5px solid #d9d6cf;border-radius:12px;background:#fff;outline:none}
.intro input:focus{border-color:#2c3f92}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.tile{background:#fff;border:1px solid #e9e6df;border-radius:18px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-weight:700;font-size:14px;color:#2b3358;transition:transform .18s,box-shadow .18s}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(21,29,71,.1)}
.tile img{width:140px;height:140px;object-fit:contain}
.tile[hidden]{display:none}
.none{color:#8a8fa6;padding:30px 0}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:22px;gap:20px}
  .hero-img img{max-width:240px}
  .body{padding:24px 22px}
}