/* ============================================================
   SORA — CATÁLOGO DE INVITACIONES
   ============================================================ */

/* ---------- Encabezado ---------- */
.chead{ padding:calc(var(--nav-h) + 60px) 0 40px; position:relative; overflow:hidden }
.chead h1{ margin-top:18px }
.chead p{ max-width:56ch; margin-top:22px; font-size:1.05rem }
.chead .strip{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap }

/* ---------- Rejilla del catálogo ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px }
.icard{
  border:var(--bd); background:var(--white); box-shadow:var(--sh);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
}
.icard:hover{ transform:translate(-5px,-5px); box-shadow:var(--sh-lg) }

.icard__frame{
  position:relative; aspect-ratio:16/10; overflow:hidden; border-bottom:var(--bd);
  background:var(--c,var(--cyan));
}
.icard__frame iframe{
  position:absolute; top:0; left:0; width:1400px; height:875px;
  transform:scale(var(--s,.42)); transform-origin:top left; border:0; pointer-events:none;
}
.icard__frame .ph{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; gap:10px;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
}
.icard__frame .live{
  position:absolute; top:12px; left:12px; z-index:3; background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.16em; padding:5px 10px;
  display:flex; align-items:center; gap:7px;
}
.icard__frame .live i{ width:7px; height:7px; border-radius:50%; background:#2bff8a; animation:pulse 1.3s infinite }
@keyframes pulse{ 50%{ opacity:.2 } }
.icard__frame .veil{
  position:absolute; inset:0; z-index:2; background:rgba(17,17,17,.72); color:var(--paper);
  display:grid; place-items:center; opacity:0; transition:opacity .28s var(--ease);
}
.icard:hover .veil{ opacity:1 }
.icard__frame .veil span{
  border:3px solid var(--paper); padding:14px 24px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.85rem;
}

.icard__body{ padding:24px; display:flex; flex-direction:column; flex:1 }
.icard__body h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.5rem; line-height:.98; margin:12px 0 8px }
.icard__body p{ font-size:.92rem; opacity:.8 }
.icard__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px }
.icard__foot{ margin-top:auto; padding-top:20px; display:flex; gap:10px; flex-wrap:wrap }
.icard__foot .btn{ padding:12px 20px; font-size:.78rem; box-shadow:var(--sh-sm) }

@media (max-width:900px){ .cards{ grid-template-columns:1fr } }

/* ---------- Matriz de elementos ---------- */
.matrix{ overflow-x:auto; border:var(--bd); box-shadow:var(--sh); background:var(--white) }
.matrix table{ border-collapse:collapse; width:100%; min-width:820px }
.matrix th,.matrix td{ border:2px solid var(--ink); padding:13px 14px; text-align:center; font-size:.85rem }
.matrix thead th{
  background:var(--ink); color:var(--paper); font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; position:sticky; top:0;
}
.matrix tbody th{
  text-align:left; font-weight:700; background:var(--paper); white-space:nowrap;
  font-size:.8rem; position:sticky; left:0;
}
.matrix td.y{ background:var(--yellow); font-weight:700 }
.matrix td.n{ opacity:.35 }
.matrix tbody tr:hover td{ background:var(--cyan) }
.matrix tbody tr:hover td.n{ background:var(--cyan); opacity:.6 }

/* ---------- Paquetes ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.plan{ border:var(--bd); background:var(--white); box-shadow:var(--sh); padding:30px; display:flex; flex-direction:column; position:relative }
.plan--pop{ background:var(--yellow); transform:translateY(-14px) }
.plan--pop::before{
  content:'MÁS PEDIDO'; position:absolute; top:-3px; right:-3px; background:var(--magenta); color:var(--white);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; padding:7px 13px; border:3px solid var(--ink);
}
.plan h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.7rem }
.plan .price{ font-family:var(--f-display); font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; margin:14px 0 4px }
.plan .price small{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; opacity:.6; display:block; margin-top:6px }
.plan ul{ list-style:none; margin:22px 0; display:grid; gap:9px }
.plan li{ font-size:.9rem; display:flex; gap:10px; align-items:flex-start }
.plan li::before{ content:'▸'; font-weight:700 }
.plan li.off{ opacity:.35 }
.plan li.off::before{ content:'×' }
.plan .btn{ margin-top:auto; justify-content:center }
@media (max-width:900px){ .plans{ grid-template-columns:1fr } .plan--pop{ transform:none } }

/* ---------- Proceso corto ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:var(--bd); background:var(--ink); gap:var(--bw) }
.steps div{ background:var(--paper); padding:26px 22px }
.steps b{ font-family:var(--f-display); font-size:2.4rem; display:block; line-height:1; color:var(--c,var(--magenta)); -webkit-text-stroke:2px var(--ink) }
.steps h4{ font-family:var(--f-display); text-transform:uppercase; font-size:1.05rem; margin:8px 0 6px }
.steps p{ font-size:.86rem; opacity:.75 }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr } }

/* ---------- FAQ ---------- */
.faq{ border:var(--bd); background:var(--white); box-shadow:var(--sh) }
.faq details{ border-bottom:3px solid var(--ink) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  cursor:pointer; padding:22px 24px; font-family:var(--f-display); text-transform:uppercase;
  font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:16px; transition:.2s;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:1.5rem; line-height:1 }
.faq details[open] summary{ background:var(--yellow) }
.faq details[open] summary::after{ content:'–' }
.faq summary:hover{ background:var(--cyan) }
.faq p{ padding:0 24px 24px; font-size:.94rem; opacity:.85; max-width:72ch }