/* ==================== INSIGNIAS DSA · línea gráfica del campus ====================
   Colores planos (tinta, vino, blanco), Oswald en mayúsculas para títulos,
   IBM Plex Mono para rótulos y cortes diagonales como la bienvenida. */

/* ---- banner en "Mis especializaciones" ---- */
.ins-banner{ position:relative; overflow:hidden; margin:4px 0 28px; background:#131011; color:#fff; display:flex; align-items:center; gap:26px; padding:24px 28px; }
.ins-banner .ib-sello{ position:absolute; top:0; right:0; width:42%; height:100%; background:var(--vino); clip-path:polygon(24% 0,100% 0,100% 100%,0 100%); pointer-events:none; }
.ins-banner .ib-sello::after{ content:''; position:absolute; inset:0; background:var(--vino-osc); clip-path:polygon(0 100%,100% 40%,100% 100%); }
.ins-banner .ib-pila{ position:relative; z-index:1; width:118px; height:84px; flex:none; }
.ins-banner .ib-pila .ins-img{ position:absolute; width:66px; }
.ins-banner .ib-pila .ins-img:nth-child(1){ left:0; top:14px; }
.ins-banner .ib-pila .ins-img:nth-child(2){ left:26px; top:0; width:74px; z-index:2; }
.ins-banner .ib-pila .ins-img:nth-child(3){ left:52px; top:14px; }
.ins-banner .ib-tx{ position:relative; z-index:1; flex:1; min-width:0; }
.ins-banner .ib-et{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.6); }
.ins-banner h3{ font-size:22px; margin:6px 0 4px; color:#fff; }
.ins-banner p{ font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.5; }
.ins-banner .btn{ position:relative; z-index:1; flex:none; }
@media (max-width:720px){
  .ins-banner{ flex-wrap:wrap; padding:22px 20px; gap:16px; }
  .ins-banner .ib-sello{ width:60%; }
  .ins-banner .btn{ width:100%; }
}

/* ---- brillo que recorre cada insignia, recortado a su silueta ---- */
.ins-img{ position:relative; aspect-ratio:1/1; }
.ins-img img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.ins-img::after{ content:''; position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:var(--m); mask-image:var(--m); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  background:linear-gradient(115deg,transparent 40%,rgba(255,250,232,.72) 49%,rgba(255,255,255,.12) 54%,transparent 58%);
  background-size:300% 100%; background-repeat:no-repeat; animation:insBrillo 4.4s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes insBrillo{ 0%{ background-position:140% 0; } 45%,100%{ background-position:-40% 0; } }
@media (prefers-reduced-motion:reduce){ .ins-img::after{ animation:none; display:none; } }

/* ---- vitrina ---- */
.ins-volver{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--muted); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.2px; font-size:12px; cursor:pointer; padding:0 0 18px; }
.ins-volver:hover{ color:var(--vino); }
.ins-volver svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
.ins-hero{ position:relative; overflow:hidden; background:#131011; color:#fff; }
.ins-hero .ih-sello{ position:absolute; top:0; right:0; width:48%; height:100%; background:var(--vino); clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); }
.ins-hero .ih-sello::after{ content:''; position:absolute; inset:0; background:var(--vino-osc); clip-path:polygon(0 100%,100% 38%,100% 100%); }
.ins-hero .ih-in{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:56px 56px; }
.ins-hero .ih-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:3.4px; text-transform:uppercase; color:rgba(255,255,255,.6); }
.ins-hero .ih-linea{ width:54px; height:2px; background:#fff; margin:18px 0 18px; }
.ins-hero h1{ font-size:clamp(28px,3.8vw,44px); line-height:1.06; font-weight:600; letter-spacing:.4px; }
.ins-hero .ih-lead{ font-size:15px; line-height:1.65; color:rgba(255,255,255,.76); margin-top:16px; max-width:520px; }
.ins-hero .ih-precio{ display:flex; align-items:center; gap:18px; margin-top:28px; }
.ins-hero .ih-precio .p{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:30px; letter-spacing:.5px; white-space:nowrap; }
.ins-hero .ih-precio .d{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:11px; letter-spacing:1.4px; color:rgba(255,255,255,.6); line-height:1.5; border-left:1px solid rgba(255,255,255,.25); padding-left:18px; }
.ins-hero .ih-ab{ position:relative; height:260px; }
.ins-hero .ih-ab .ins-img{ position:absolute; width:150px; }
.ins-hero .ih-ab .ins-img:nth-child(1){ left:2%; top:64px; }
.ins-hero .ih-ab .ins-img:nth-child(2){ left:50%; top:10px; width:190px; margin-left:-95px; z-index:2; }
.ins-hero .ih-ab .ins-img:nth-child(3){ right:2%; top:64px; }

.ins-ben{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--linea); border-top:0; }
.ins-ben > div{ padding:26px 24px; border-right:1px solid var(--linea); }
.ins-ben > div:last-child{ border-right:0; }
.ins-ben .ib-ic{ width:40px; height:40px; display:grid; place-items:center; background:var(--vino); color:#fff; margin-bottom:14px; }
.ins-ben .ib-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ins-ben h4{ font-size:15px; font-weight:600; letter-spacing:.6px; }
.ins-ben p{ font-size:13px; line-height:1.6; color:var(--muted); margin-top:6px; }

.ins-pasos{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); margin-top:28px; }
.ins-pasos > div{ background:#fff; padding:18px 18px; }
.ins-pasos i{ font-style:normal; display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; color:var(--vino); font-weight:600; }
.ins-pasos b{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600; font-size:14px; letter-spacing:.4px; margin:6px 0 4px; }
.ins-pasos span{ font-size:12.5px; color:var(--muted); line-height:1.5; }

.ins-sec{ margin-top:46px; }
.ins-sec .head{ margin-bottom:18px; }
.ins-sec .sub-cat{ max-width:600px; }
.ins-filtros{ display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--linea); background:#fff; margin-bottom:18px; width:max-content; max-width:100%; }
.ins-filtros button{ background:none; border:0; border-right:1px solid var(--linea); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:12px; color:var(--muted); padding:10px 16px; cursor:pointer; }
.ins-filtros button:last-child{ border-right:0; }
.ins-filtros button:hover{ color:var(--vino); }
.ins-filtros button.on{ background:var(--vino); color:#fff; }
.ins-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.ins-grid.gold{ grid-template-columns:repeat(4,1fr); }
.ins-card{ background:#fff; border:1px solid var(--linea); display:flex; flex-direction:column; cursor:pointer; transition:box-shadow .18s, transform .18s; }
.ins-card:hover{ box-shadow:0 12px 30px rgba(22,18,19,.13); transform:translateY(-3px); }
.ins-card .ic-art{ position:relative; overflow:hidden; background:#131011; padding:22px 0 20px; }
.ins-card .ic-art::before{ content:''; position:absolute; top:0; right:0; width:46%; height:100%; background:var(--vino); clip-path:polygon(34% 0,100% 0,100% 100%,0 100%); }
.ins-card.gold .ic-art::before{ background:var(--vino-osc); }
.ins-card .ic-art .ins-img{ position:relative; width:64%; margin:0 auto; }
.ins-card .ic-cint{ position:absolute; top:10px; left:0; z-index:2; background:#fff; color:var(--tinta); font-family:'Oswald',sans-serif; font-weight:700; font-size:10px; letter-spacing:1.2px; padding:4px 11px; text-transform:uppercase; }
.ins-card .ic-body{ padding:15px 16px 0; flex:1; }
.ins-card h3{ font-size:14.5px; font-weight:600; line-height:1.28; letter-spacing:.2px; }
.ins-card .ic-es{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4; }
.ins-card .ic-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 16px; margin-top:auto; }
.ins-card .ic-precio{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:16px; color:var(--tinta); white-space:nowrap; }
.ins-card .btn{ padding:9px 16px; font-size:12px; }
.ins-estado{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:11px; padding:5px 9px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.ins-estado.pend{ background:#f5ece0; color:#8a5a12; }
.ins-estado.ok{ background:#e6f2ec; color:var(--ok); }

/* ---- ventanas ---- */
.ins-modal{ position:fixed; inset:0; z-index:460; background:rgba(10,8,9,.85); display:none; align-items:center; justify-content:center; padding:20px; padding-top:calc(20px + env(safe-area-inset-top)); overflow-y:auto; }
.ins-modal.on{ display:flex; }
.ins-caja{ position:relative; width:100%; max-width:900px; background:#fff; color:var(--tinta); margin:auto; }
.ins-caja.chica{ max-width:500px; }
.ins-top{ background:var(--tinta); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:14px; }
.ins-top .t{ font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:14px; letter-spacing:.6px; flex:1; }
.ins-top .x{ background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.ins-pasito{ display:flex; gap:6px; padding:14px 22px 0; }
.ins-pasito span{ flex:1; height:3px; background:var(--linea); }
.ins-pasito span.on{ background:var(--vino); }
.ins-det{ display:grid; grid-template-columns:.9fr 1.1fr; }
.ins-det-izq{ position:relative; overflow:hidden; background:#131011; display:flex; align-items:center; justify-content:center; padding:40px 26px; }
.ins-det-izq::before{ content:''; position:absolute; top:0; right:0; width:55%; height:100%; background:var(--vino); clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
.ins-det-izq::after{ content:''; position:absolute; top:0; right:0; width:55%; height:100%; background:var(--vino-osc); clip-path:polygon(0 100%,100% 40%,100% 100%); }
.ins-det-izq .ins-img{ position:relative; z-index:1; width:min(290px,66vw); }
.ins-det-der{ padding:30px 30px 26px; }
.ins-det-der h2{ font-size:24px; margin:10px 0 4px; }
.ins-det-der .dd-es{ font-size:13px; color:var(--muted); }
.ins-det-der h5{ font-family:'IBM Plex Mono',monospace; font-weight:600; text-transform:uppercase; letter-spacing:2px; font-size:10.5px; color:var(--vino); margin:22px 0 8px; }
.ins-det-der p{ font-size:14px; line-height:1.65; color:#3a3335; }
.ins-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ins-chips span, .ins-chips button{ font-size:12.5px; padding:6px 11px; border:1px solid var(--linea); background:var(--gris); color:var(--tinta); font-family:inherit; }
.ins-chips button{ cursor:pointer; background:#fff; }
.ins-chips button:hover{ border-color:var(--vino); color:var(--vino); }
.ins-chips button.hecho{ border-color:var(--ok); color:var(--ok); }
.ins-li{ background:var(--gris); border:1px solid var(--linea); padding:14px; display:flex; gap:12px; align-items:flex-start; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
.ins-li img{ width:50px; height:50px; flex:none; object-fit:contain; }
.ins-li b{ display:block; font-size:14px; line-height:1.3; }
.ins-li .li-org{ font-size:13px; }
.ins-li .li-g{ font-size:12.5px; color:#666; }
.ins-li .li-btn{ display:inline-block; margin-top:8px; border:1px solid #444; border-radius:999px; padding:3px 12px; font-size:12px; font-weight:600; color:#444; }
.ins-det-pie{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:24px; padding-top:18px; border-top:1px solid var(--linea); flex-wrap:wrap; }
.ins-det-pie .dp-precio{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:26px; line-height:1; }
.ins-det-pie .dp-precio small{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:400; font-size:10.5px; letter-spacing:1.2px; color:var(--muted); margin-top:6px; }
.ins-cuerpo{ padding:22px 22px 24px; }
.ins-resumen{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--linea); }
.ins-resumen .ins-img{ width:58px; flex:none; }
.ins-resumen b{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600; font-size:14px; line-height:1.3; letter-spacing:.3px; }
.ins-resumen span{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--vino); font-size:15px; }
.ins-intro{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:16px 0 4px; }
.ins-cuerpo .field{ margin-top:14px; }
.ins-cuerpo .field label{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:11.5px; margin-bottom:6px; }
.ins-cuerpo .field input{ width:100%; border:1px solid var(--linea); background:#fff; padding:12px 13px; font-size:15px; }
.ins-cuerpo .field input:focus{ border-color:var(--vino); outline:none; }
.ins-cuerpo .field .sub{ font-size:11.5px; color:var(--muted); margin-top:5px; }
.ins-err{ color:#a11; font-size:12.5px; margin-top:10px; min-height:16px; }
.ins-datos{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-top:14px; padding:12px 14px; background:var(--gris); border:1px solid var(--linea); font-size:13px; line-height:1.5; }
.ins-datos small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.ins-datos button{ background:none; border:0; color:var(--vino); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:11.5px; cursor:pointer; flex:none; }
.ins-qr{ margin:18px auto 0; max-width:250px; }
.ins-qr img{ width:100%; display:block; }
.ins-yape{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding:12px 14px; border:1px solid var(--linea); }
.ins-yape small{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.ins-yape b{ font-family:'IBM Plex Mono',monospace; font-size:19px; letter-spacing:1px; }
.ins-yape button{ background:var(--tinta); color:#fff; border:0; padding:9px 14px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:11.5px; cursor:pointer; }
.ins-lista{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px; counter-reset:p; }
.ins-lista li{ counter-increment:p; position:relative; padding-left:32px; font-size:13.5px; line-height:1.5; color:#3a3335; }
.ins-lista li::before{ content:counter(p); position:absolute; left:0; top:0; width:22px; height:22px; display:grid; place-items:center; background:var(--vino); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; }
.ins-cuerpo .btn{ width:100%; margin-top:20px; }
.ins-wa{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:20px; background:#1d8f4e; color:#fff; border:0; padding:14px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; font-size:13.5px; cursor:pointer; }
.ins-wa svg{ width:19px; height:19px; fill:#fff; }
.ins-nota{ font-size:12px; color:var(--muted); text-align:center; margin-top:12px; line-height:1.5; }
.ins-mia-top{ position:relative; overflow:hidden; background:#131011; padding:30px 20px 24px; text-align:center; color:#fff; }
.ins-mia-top::before{ content:''; position:absolute; top:0; right:0; width:50%; height:100%; background:var(--vino); clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
.ins-mia-top .ins-img{ position:relative; width:min(220px,58vw); margin:0 auto; }
.ins-ver{ position:relative; display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:6px 12px; background:#fff; color:var(--ok); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-size:12px; font-weight:600; }
.ins-mia-top h2{ position:relative; font-size:20px; margin:12px 0 4px; }
.ins-mia-top .im-a{ position:relative; font-size:13px; color:rgba(255,255,255,.75); }
.ins-mia-top .im-id{ position:relative; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(255,255,255,.55); margin-top:4px; }
.ins-acc{ display:grid; gap:10px; }
.ins-acc a, .ins-acc button{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; font-weight:600; font-size:13px; border:0; cursor:pointer; text-decoration:none; }
.ins-acc svg{ width:18px; height:18px; flex:none; }
.ins-acc .a-li{ background:#0a66c2; color:#fff; }
.ins-acc .a-sh{ background:var(--vino); color:#fff; }
.ins-acc .a-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ins-acc .a-sec{ background:#fff; color:var(--tinta); border:1px solid var(--linea); }
.ins-guia{ margin-top:20px; padding-top:18px; border-top:1px solid var(--linea); }
.ins-guia h5{ font-family:'IBM Plex Mono',monospace; font-weight:600; text-transform:uppercase; letter-spacing:2px; font-size:10.5px; color:var(--vino); }
.ins-guia p{ font-size:12.5px; color:var(--muted); margin:4px 0 10px; }
.ins-guia .ins-lista{ margin:10px 0 18px; }

@media (max-width:900px){
  .ins-hero .ih-in{ grid-template-columns:1fr; padding:34px 24px 32px; gap:10px; }
  .ins-hero .ih-sello{ width:70%; height:46%; }
  .ins-hero .ih-ab{ height:200px; order:-1; }
  .ins-hero .ih-ab .ins-img{ width:116px; top:46px !important; }
  .ins-hero .ih-ab .ins-img:nth-child(2){ width:150px; margin-left:-75px; top:0 !important; }
  .ins-ben{ grid-template-columns:1fr 1fr; }
  .ins-ben > div:nth-child(2){ border-right:0; }
  .ins-ben > div:nth-child(-n+2){ border-bottom:1px solid var(--linea); }
  .ins-pasos{ grid-template-columns:1fr; }
  .ins-grid.gold{ grid-template-columns:1fr 1fr; }
  .ins-det{ grid-template-columns:1fr; }
  .ins-det-izq{ padding:28px 20px; }
  .ins-det-izq .ins-img{ width:min(200px,52vw); }
}
@media (max-width:560px){
  .ins-hero .ih-precio .p{ font-size:26px; }
  .ins-ben{ grid-template-columns:1fr; }
  .ins-ben > div{ border-right:0 !important; border-bottom:1px solid var(--linea); padding:20px 18px; }
  .ins-ben > div:last-child{ border-bottom:0; }
  .ins-filtros{ width:100%; }
  .ins-filtros button{ flex:1 1 auto; border-bottom:1px solid var(--linea); padding:9px 10px; font-size:11px; }
  .ins-grid, .ins-grid.gold{ grid-template-columns:1fr 1fr; gap:10px; }
  .ins-card .ic-art{ padding:16px 0 14px; }
  .ins-card .ic-art .ins-img{ width:72%; }
  .ins-card .ic-body{ padding:12px 11px 0; }
  .ins-card h3{ font-size:12.5px; }
  .ins-card .ic-es{ display:none; }
  .ins-card .ic-pie{ flex-direction:column; align-items:stretch; gap:8px; padding:12px 11px 12px; }
  .ins-card .ic-precio{ font-size:14px; }
  .ins-card .btn{ width:100%; padding:9px 6px; font-size:11.5px; }
  .ins-modal{ padding:0; align-items:flex-end; }
  .ins-caja{ margin:0; max-height:94vh; overflow-y:auto; }
  .ins-det-der{ padding:22px 18px 22px; }
  .ins-det-pie .btn{ flex:1; }
}

/* ---- panel de administración ---- */
.ins-adm-fil{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ins-adm-fil button{ background:#fff; border:1px solid var(--linea); padding:8px 14px; font-size:13px; cursor:pointer; }
.ins-adm-fil button.on{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
.ins-adm-fil button i{ font-style:normal; opacity:.7; margin-left:3px; }
.ins-adm-fil input{ flex:1; min-width:200px; border:1px solid var(--linea); padding:9px 12px; background:#fff; }
.ins-adm-ins{ display:flex; align-items:center; gap:10px; }
.ins-adm-ins img{ width:42px; height:42px; object-fit:contain; flex:none; }
.ins-adm-acc{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ins-adm-acc button, .ins-adm-acc a{ border:1px solid var(--linea); background:#fff; font-size:12px; padding:7px 11px; cursor:pointer; white-space:nowrap; }
.ins-adm-acc .ok{ background:var(--ok); color:#fff; border-color:var(--ok); }
.ins-adm-acc .no{ color:#a11; }
.ins-adm-acc .wa{ background:#1d8f4e; color:#fff; border-color:#1d8f4e; }
.ins-adm-vacio{ padding:40px 20px; text-align:center; color:var(--muted); }

/* ---- precio destacado: cuadro vino fino, centrado, con latido y destello suaves ---- */
.ins-pbox{ position:relative; overflow:hidden; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:var(--tinta); color:#fff; padding:9px 22px 10px; margin:0 auto; align-self:center;
  animation:insLatido 2.6s ease-in-out infinite; }
.ins-pbox::before{ content:''; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.28); pointer-events:none; }
.ins-pbox::after{ content:''; position:absolute; top:-30%; bottom:-30%; left:-70%; width:35%; pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0)); transform:skewX(-18deg);
  animation:insDestello 3.4s ease-in-out infinite; }
.ins-pbox .pb-et{ display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:2.6px; text-transform:uppercase; color:rgba(255,255,255,.72); }
.ins-pbox .pb-et::before, .ins-pbox .pb-et::after{ content:''; width:12px; height:1px; background:rgba(255,255,255,.45); }
.ins-pbox .pb-m{ display:flex; align-items:flex-start; line-height:1; margin-top:4px; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.3px; }
.ins-pbox .pb-s{ font-size:11px; font-weight:400; margin:3px 4px 0 0; opacity:.85; }
.ins-pbox .pb-e{ font-size:26px; }
.ins-pbox .pb-d{ font-size:13px; margin-top:2px; }
.ins-pbox .pb-nota{ font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.22); }
.ins-pbox.grande{ padding:14px 34px 14px; }
.ins-pbox.grande::before{ inset:4px; }
.ins-pbox.grande .pb-et{ font-size:9.5px; }
.ins-pbox.grande .pb-s{ font-size:15px; margin:5px 6px 0 0; }
.ins-pbox.grande .pb-e{ font-size:46px; }
.ins-pbox.grande .pb-d{ font-size:21px; margin-top:4px; }
.ins-pbox.grande .pb-nota{ font-size:9.5px; }
@keyframes insLatido{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(22,18,19,.38); }
  35%{ transform:scale(1.035); box-shadow:0 0 0 9px rgba(22,18,19,0); }
  55%{ transform:scale(1); }
}
@keyframes insDestello{ 0%,55%{ left:-70%; } 90%,100%{ left:135%; } }
@media (prefers-reduced-motion:reduce){ .ins-pbox, .ins-pbox::after{ animation:none; } }
.ins-card .ic-pie{ flex-direction:column; align-items:stretch; gap:8px; padding:12px 11px 12px; }
  .ins-card .ic-precio{ font-size:14px; }
  .ins-card .btn{ width:100%; padding:9px 6px; font-size:11.5px; }
  .ins-modal{ padding:0; align-items:flex-end; }
  .ins-caja{ margin:0; max-height:94vh; overflow-y:auto; }
  .ins-det-der{ padding:22px 18px 22px; }
  .ins-det-pie .btn{ flex:1; }
}

/* ---- panel de administración ---- */
.ins-adm-fil{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ins-adm-fil button{ background:#fff; border:1px solid var(--linea); padding:8px 14px; font-size:13px; cursor:pointer; }
.ins-adm-fil button.on{ background:var(--tinta); color:#fff; border-color:var(--tinta); }
.ins-adm-fil button i{ font-style:normal; opacity:.7; margin-left:3px; }
.ins-adm-fil input{ flex:1; min-width:200px; border:1px solid var(--linea); padding:9px 12px; background:#fff; }
.ins-adm-ins{ display:flex; align-items:center; gap:10px; }
.ins-adm-ins img{ width:42px; height:42px; object-fit:contain; flex:none; }
.ins-adm-acc{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ins-adm-acc button, .ins-adm-acc a{ border:1px solid var(--linea); background:#fff; font-size:12px; padding:7px 11px; cursor:pointer; white-space:nowrap; }
.ins-adm-acc .ok{ background:var(--ok); color:#fff; border-color:var(--ok); }
.ins-adm-acc .no{ color:#a11; }
.ins-adm-acc .wa{ background:#1d8f4e; color:#fff; border-color:#1d8f4e; }
.ins-adm-vacio{ padding:40px 20px; text-align:center; color:var(--muted); }

.ins-card .ic-pie{ flex-direction:column; align-items:stretch; gap:12px; text-align:center; }
.ins-card .ic-pie .ins-estado{ justify-content:center; }
.ins-card .ic-pie .btn{ width:100%; }
.btn-tinta{ background:var(--tinta); color:#fff; }
.btn-tinta:hover{ background:var(--vino-osc); }
.ins-hero .ih-precio{ display:flex; justify-content:center; margin-top:30px; }
.ins-hero .ins-pbox{ background:#000; box-shadow:0 0 0 0 rgba(255,255,255,.4); animation-name:insLatidoClaro; border:1px solid rgba(255,255,255,.35); }
@keyframes insLatidoClaro{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.35); }
  40%{ transform:scale(1.05); box-shadow:0 0 0 12px rgba(255,255,255,0); }
  60%{ transform:scale(1); }
}
.ins-det-pie{ flex-direction:column; align-items:stretch; gap:14px; }
.ins-det-pie .btn{ width:100%; }
@media (max-width:560px){
  .ins-pbox{ padding:8px 16px 9px; }
  .ins-pbox .pb-e{ font-size:23px; }
  .ins-pbox .pb-d{ font-size:12px; }
  .ins-pbox.grande{ padding:12px 28px; }
  .ins-pbox.grande .pb-e{ font-size:40px; }
  .ins-pbox.grande .pb-d{ font-size:18px; }
}

/* ---- botón "Obtén tu insignia" en la barra superior + globito ---- */
.ins-twrap{ position:relative; display:none; align-items:center; }
.ins-twrap.on{ display:flex; }
.ins-tbtn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; background:var(--vino); color:#fff; border:0; cursor:pointer;
  padding:9px 15px; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:1.3px; font-size:11.5px; white-space:nowrap;
  animation:insTLatido 2.4s ease-in-out infinite; }
.ins-tbtn::after{ content:''; position:absolute; top:-30%; bottom:-30%; left:-70%; width:40%; pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.08) 65%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); animation:insDestello 3s ease-in-out infinite; }
.ins-tbtn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ins-tbtn:hover{ background:var(--vino-osc); }
.ins-tbtn .tx-c{ display:none; }
@keyframes insTLatido{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(176,33,63,.7); }
  35%{ transform:scale(1.06); box-shadow:0 0 0 9px rgba(176,33,63,0); }
  55%{ transform:scale(1); }
}
.ins-burbuja{ position:absolute; top:calc(100% + 14px); right:0; width:290px; background:#fff; color:var(--tinta); padding:14px 16px 13px;
  border-top:3px solid var(--vino); box-shadow:0 16px 36px rgba(0,0,0,.3); cursor:pointer; z-index:130; text-align:left;
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .9s ease, transform .9s ease; }
.ins-burbuja.on{ opacity:1; transform:none; pointer-events:auto; transition:opacity .45s ease, transform .45s ease; }
.ins-burbuja::before{ content:''; position:absolute; top:-10px; right:26px; border:7px solid transparent; border-bottom-color:var(--vino); border-top:0; }
.ins-burbuja .ib-et{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--vino); }
.ins-burbuja b{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:16px; letter-spacing:.4px; margin:5px 0 4px; }
.ins-burbuja p{ font-size:13px; line-height:1.5; color:var(--muted); }
.ins-burbuja .ib-ir{ display:inline-block; margin-top:8px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.2px; font-size:11.5px; color:var(--vino); }
@media (max-width:720px){
  .ins-tbtn{ padding:8px 10px; font-size:10.5px; letter-spacing:1px; gap:6px; }
  .ins-tbtn .tx-l{ display:none; } .ins-tbtn .tx-c{ display:inline; }
  .ins-burbuja{ width:min(280px, calc(100vw - 28px)); right:-70px; }
  .ins-burbuja::before{ right:96px; }
}
@media (prefers-reduced-motion:reduce){ .ins-tbtn, .ins-tbtn::after{ animation:none; } }

/* ---- precio de la portada: más grande y protagonista ---- */
.ins-hero .ih-precio{ margin-top:34px; }
.ins-pbox.grande.hero{ width:100%; max-width:440px; padding:22px 28px 20px; }
.ins-pbox.grande.hero::before{ inset:6px; border-color:rgba(255,255,255,.32); }
.ins-pbox.grande.hero .pb-et{ font-size:11px; letter-spacing:4px; gap:12px; }
.ins-pbox.grande.hero .pb-et::before, .ins-pbox.grande.hero .pb-et::after{ width:28px; }
.ins-pbox.grande.hero .pb-m{ margin-top:8px; }
.ins-pbox.grande.hero .pb-s{ font-size:24px; margin:10px 8px 0 0; }
.ins-pbox.grande.hero .pb-e{ font-size:84px; }
.ins-pbox.grande.hero .pb-d{ font-size:36px; margin-top:8px; }
.ins-pbox.grande.hero .pb-nota{ font-size:11px; letter-spacing:2.4px; margin-top:12px; padding-top:12px; width:100%; color:rgba(255,255,255,.82); }
@media (max-width:560px){
  .ins-pbox.grande.hero{ max-width:none; padding:18px 16px 16px; }
  .ins-pbox.grande.hero .pb-e{ font-size:68px; }
  .ins-pbox.grande.hero .pb-d{ font-size:30px; }
  .ins-pbox.grande.hero .pb-s{ font-size:20px; }
  .ins-pbox.grande.hero .pb-nota{ font-size:9px; letter-spacing:1.1px; white-space:nowrap; }
}

/* ---- precio de la portada: cifra aún más grande ---- */
.ins-pbox.grande.hero .pb-m{ margin-top:6px; letter-spacing:0; }
.ins-pbox.grande.hero .pb-s{ font-size:34px; margin:18px 10px 0 0; }
.ins-pbox.grande.hero .pb-e{ font-size:132px; line-height:.92; }
.ins-pbox.grande.hero .pb-d{ font-size:66px; margin-top:6px; line-height:1; }
@media (max-width:560px){
  .ins-pbox.grande.hero .pb-s{ font-size:28px; margin:14px 8px 0 0; }
  .ins-pbox.grande.hero .pb-e{ font-size:112px; }
  .ins-pbox.grande.hero .pb-d{ font-size:56px; }
}

/* ---- insignias: brillo que transita (recortado al círculo) y latido suave ----
   El recorte va por círculo y no por máscara de imagen, así el brillo se ve
   igual en el campus publicado y abriendo el archivo en la computadora. */
.ins-img::after{ display:none; }
.ins-luz{ position:absolute; inset:3.5%; border-radius:50%; overflow:hidden; pointer-events:none; z-index:1; }
.ins-luz::before{ content:''; position:absolute; top:-25%; bottom:-25%; left:-75%; width:40%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 30%, rgba(255,250,232,.62) 50%, rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg); animation:insLuz 3.4s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes insLuz{ 0%,50%{ left:-75%; } 88%,100%{ left:135%; } }
.ins-img{ animation:insLateInsignia 2.8s ease-in-out infinite; animation-delay:var(--d,0s); transform-origin:50% 50%; will-change:transform; }
@keyframes insLateInsignia{
  0%,100%{ transform:scale(1); filter:none; }
  35%{ transform:scale(1.045); filter:drop-shadow(0 0 14px rgba(214,174,85,.38)); }
  55%{ transform:scale(1); filter:none; }
}
@media (prefers-reduced-motion:reduce){ .ins-img, .ins-luz::before{ animation:none; } }