/* ============================================================
   B.link · Página de ejemplos (va después de base.css)
   ============================================================ */

/* ---------- Portada ---------- */
.ej-top{padding:clamp(56px,8vw,104px) 0 clamp(64px,8vw,104px)}
.como{list-style:none;margin:0;display:grid;gap:20px;align-content:start}
.como li{display:grid;gap:4px;padding-left:20px;position:relative}
.como li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--cian)}
.como b{font-size:17px}
.como span{color:var(--gris);font-size:16px;line-height:1.55;max-width:30em}

/* ---------- Galería ---------- */
.ej-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,72px)}
.ej-card{display:flex;flex-direction:column;border-radius:28px;border:1.5px solid var(--borde);background:#fff;overflow:hidden;transition:box-shadow .3s}
.ej-card.activa:hover{border-color:var(--navy);box-shadow:0 30px 60px -30px rgba(20,33,61,.45)}
.ej-cover{position:relative;display:flex;justify-content:center;align-items:flex-start;height:300px;padding-top:44px;overflow:hidden;background:var(--navy);text-decoration:none}

/* Celular en miniatura con la carta en esqueleto (sin nombres ni marcas) */
.mini{width:190px;height:390px;flex:none;border-radius:32px;background:var(--navy-3);padding:7px;box-shadow:0 30px 50px -20px rgba(0,0,0,.6),inset 0 0 0 1.5px #2A3A63;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.activa:hover .mini{transform:translateY(-14px)}
/* Cada carta pinta el esqueleto con los colores de su propia marca */
.mini-scr.resto{--fondo:#F7F3EC;--cab:#0D0D0E;--titulo:#F4F1EA;--claro:#6E6A63;--acento:#C9A45C;--texto:#D8D1C4;--fuerte:#1C1B1A;--borde-p:#D6CFC2;--etiqueta:#F1E3C4;--linea:#E2DCD1}
.mini-scr.cafe{--fondo:#FFFFFF;--cab:#F3F7F4;--titulo:#2A1D16;--claro:#9DB8A8;--acento:#C9C0B7;--texto:#E3DBD3;--fuerte:#2A1D16;--borde-p:#DCD3CA;--etiqueta:#E6F0EA;--linea:#ECE6DF;--bloque:#2F6B4F;--on:#2F6B4F}
.mini-scr.noche{--fondo:#150F19;--cab:#150F19;--titulo:#F7F0E8;--claro:#F2B544;--acento:#5A4A63;--texto:#43354F;--fuerte:#F7F0E8;--borde-p:#43354F;--etiqueta:#4A3A20;--linea:#2F2438;--bloque:transparent;--bloque-borde:#F2B544;--on:#F2B544;--precio:#F2B544}
.mini-scr{height:100%;border-radius:26px;overflow:hidden;background:var(--fondo)}
.mini-head{display:grid;gap:7px;padding:30px 14px 14px;background:var(--cab)}
.sk{display:block;height:7px;border-radius:4px;background:var(--texto)}
.sk.claro{height:5px;background:var(--claro)}
.sk.titulo{height:14px;background:var(--titulo)}
.sk.acento{height:4px;background:var(--acento)}
.sk.bloque{height:44px;margin:10px 12px 0;border-radius:10px;background:var(--bloque);border:1.5px solid var(--bloque-borde,var(--bloque))}
.w15{width:15%}.w20{width:20%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}
.mini-tabs{display:flex;gap:5px;padding:10px 12px 4px}
.sk.pill{width:42px;height:16px;border-radius:8px;background:transparent;border:1px solid var(--borde-p)}
.sk.pill.on{background:var(--on,var(--fuerte));border-color:var(--on,var(--fuerte))}
.mini-list{padding:4px 12px;transition:transform 2.4s ease-in-out}
.activa:hover .mini-list{transform:translateY(-70px)}
.sk.cat{height:10px;margin:10px 0 4px;background:var(--fuerte)}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--linea)}
.row>span{flex:1;display:grid;gap:5px}
.row .w15{flex:none;width:22px;background:var(--precio,var(--fuerte))}
.sk.tag{width:36px;height:8px;background:var(--etiqueta)}
.row.off{opacity:.45}

.ej-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:28px clamp(22px,2.4vw,32px) 30px}
.ej-type{margin:0;font-size:14px;font-weight:800;color:var(--violeta-t)}
.ej-body h3{font:600 clamp(22px,2vw,26px)/1.15 var(--display);letter-spacing:-.02em}
.ej-body>p:not(.ej-type){margin:0;color:var(--gris);font-size:16px;line-height:1.6}
.ej-feats{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:15px;font-weight:600}
.ej-feats li{display:flex;gap:10px;line-height:1.4}
.ej-feats li::before{content:"";flex:none;width:7px;height:7px;margin-top:.5em;border-radius:50%;background:var(--cian)}
.ej-actions{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.ej-qr{margin:0;display:flex;align-items:center;gap:12px}
.ej-qr .qrbox{width:76px;height:76px;flex:none}
.qrbox svg{display:block;width:100%;height:100%}
.ej-qr figcaption{max-width:9em;font-size:14px;font-weight:600;line-height:1.35;color:var(--gris)}

/* ---------- Invitación ---------- */
.inv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:end}
.inv h2{max-width:14em}
.inv .cta{margin-top:0}

@media (max-width:1079px){
  .ej-top{padding:0}
  .ej-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv{grid-template-columns:minmax(0,1fr)}
}
/* En el celular no hay código que escanear */
@media (max-width:860px),(pointer:coarse){.solo-pc{display:none}}
@media (max-width:700px){
  .ej-grid{grid-template-columns:minmax(0,1fr)}
  .ej-cover{height:260px}
}
@media (prefers-reduced-motion:reduce){
  .mini,.mini-list{transition:none}
}