/* opheliapastrana.com/talleres — El Camino del Contenido (índice y talleres).
   Tokens, barra, pie, botones y formulario viven en /css/site.css */

.sec-lede{ margin:1.1rem 0 0; max-width:60ch; }

/* ===== índice: el mapa de talleres ===== */
/* map */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:2.6rem; }
.grid .card{ border-top:none; background:var(--paper); padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; min-height:15rem; position:relative; }
.grid .card .num{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; color:var(--signal); text-transform:uppercase; }
.grid .card h3{ margin:.1rem 0 0; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:1.25rem; line-height:1.05; }
.grid .card .stage-tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.grid .card p{ margin:.35rem 0 0; color:var(--mute); font-size:.94rem; line-height:1.5; flex:1; }
.grid .card .status{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; margin-top:1rem; }
.grid .card .status.open{ color:var(--signal); }
.grid .card .status.soon{ color:var(--mute); }
.grid .card.available{ outline:2px solid var(--signal); outline-offset:-2px; }
.grid .card a.cover{ position:absolute; inset:0; }
.grid .card .go{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:500; }
.grid .card .go::after{ content:" →"; color:var(--signal); }
.transv-label{ margin-top:3rem; }

/* oph */
.oph{ padding-top:clamp(2.2rem,4.5vw,3.5rem); padding-bottom:0; overflow:visible; }
.oph .cols{ display:grid; grid-template-columns:1.2fr 1.05fr .85fr; gap:2.6rem; align-items:end; }
.oph .photo{ align-self:end; margin-bottom:0; line-height:0; }
.oph .photo img{ width:100%; max-width:540px; display:block; }
.oph .txt{ padding-bottom:var(--sec-y); align-self:start; }
.oph .quotecol{ padding-bottom:var(--sec-y); align-self:start; }
@media (max-width:760px){ .oph .cols{ grid-template-columns:1fr; gap:1.5rem; } .oph .photo{ order:3; margin-top:1rem; } .oph .photo img{ max-width:320px; margin:0 auto; } }
.oph p{ color:var(--mute); max-width:58ch; }
.oph p b{ color:var(--ink); }
.pull{ border-left:4px solid var(--signal); padding-left:1.1rem; font-size:1.15rem; font-weight:500; color:var(--ink); line-height:1.5; }

/* ===== taller: hero en vivo ===== */
.hero-dark .hero-in{ align-items:center; }
.hero-dark h1 em{ font-style:normal; color:var(--signal-on-dark); }
/* marco de stream */
.frame{
  position:relative;
  background:var(--stage-2);
  border:1px solid var(--rule-dk);
}
.frame::before, .frame::after,
.frame .tl, .frame .br{
  content:""; position:absolute; width:22px; height:22px;
  border:2px solid var(--signal-on-dark); z-index:3;
}
.frame::before{ top:-2px; right:-2px; border-left:none; border-bottom:none; }
.frame::after{ bottom:-2px; left:-2px; border-right:none; border-top:none; }
.frame .tl{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
.frame .br{ bottom:-2px; right:-2px; border-left:none; border-top:none; }
.frame img{ width:100%; filter:grayscale(1) contrast(1.05); }

.frame-hud{
  position:absolute; top:.75rem; left:.75rem; right:.75rem; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.live{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--signal); color:#fff; padding:.35rem .6rem;
}
.live i{
  width:8px; height:8px; border-radius:50%; background:#fff; font-style:normal;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.75);} }
@media (prefers-reduced-motion: reduce){ .live i{ animation:none; } }
.viewers{ background:rgba(12,12,12,.75); color:#fff; padding:.35rem .6rem; }
.viewers b{ color:var(--signal-on-dark); font-weight:500; }

.chat{
  position:absolute; left:.75rem; right:.75rem; bottom:.75rem; z-index:2;
  display:flex; flex-direction:column; gap:.4rem;
  font-size:.78rem; line-height:1.35;
}
.chat p{
  margin:0; padding:.4rem .6rem;
  background:rgba(12,12,12,.82);
  border-left:2px solid var(--signal-on-dark);
  max-width:32ch;
}
.chat p b{ color:var(--signal-on-dark); font-weight:700; margin-right:.35rem; }
.chat p.new{ animation:chatin .35s ease both; }
@keyframes chatin{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .chat p.new{ animation:none; } }

@media (max-width:840px){
  .hero-in{ grid-template-columns:1fr; }
  .frame{ max-width:480px; }
}

/* ---------- por qué en vivo ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.cards .card{ border-top:none; background:var(--paper); padding:1.75rem 1.5rem; }
.cards .card .k{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
  display:block; margin-bottom:.9rem;
}
.cards .card p{ margin:0; color:var(--mute); font-size:.95rem; }
@media (max-width:840px){ .cards{ grid-template-columns:1fr; } }

/* ---------- para quién ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule-dk); border:1px solid var(--rule-dk); }
.split > div{ padding:2rem 1.75rem; background:var(--stage-2); }
.split h3{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.split .si{ color:var(--signal-on-dark); }
.split ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; color:var(--mute-dk); font-size:.95rem; }
.split li{ padding-left:1.2rem; position:relative; }
.split li::before{ content:"◆"; position:absolute; left:0; top:.1em; font-size:.6rem; color:var(--signal-on-dark); }
.split .no li::before{ content:"✕"; font-size:.75rem; color:var(--mute-dk); }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }

/* ---------- temario ---------- */
.tem-day{
  font-family:var(--mono); font-weight:500; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  background:var(--ink); display:inline-block; padding:.4rem .7rem; margin:2.5rem 0 0;
}
.tem-day:first-of-type{ margin-top:0; }
.tem{ border:1px solid var(--rule); border-top:none; margin-top:0; }
.tem summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:baseline; gap:1rem;
  padding:1.1rem 1.25rem;
  border-top:1px solid var(--rule);
  font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:.95rem;
}
.tem summary::-webkit-details-marker{ display:none; }
.tem summary .n{
  font-family:var(--mono); font-weight:500; font-size:.72rem;
  color:var(--signal); letter-spacing:.08em; min-width:2.2rem;
}
.tem summary .t{ flex:1; }
.tem summary .min{
  font-family:var(--mono); font-weight:500; font-size:.68rem;
  letter-spacing:.1em; color:var(--mute); white-space:nowrap;
}
.tem summary .x{ font-family:var(--mono); color:var(--signal); transition:transform .15s ease; }
.tem[open] summary .x{ transform:rotate(45deg); }
.tem summary:hover{ background:var(--haze); }
.tem-body{ padding:0 1.25rem 1.4rem 4.45rem; color:var(--mute); font-size:.95rem; }
.tem-body ul{ margin:.4rem 0 0; padding-left:1.1rem; }
.tem-body li{ margin:.25rem 0; }
@media (max-width:640px){ .tem-body{ padding-left:1.25rem; } }

.tarea{
  border:1px dashed var(--signal); padding:1rem 1.25rem; margin:1rem 0;
  font-size:.92rem; color:var(--ink); background:#fff5f5;
}
.tarea b{ font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); display:block; margin-bottom:.3rem; }

/* ---------- entregables ---------- */
.give{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); counter-reset:g; }
.give li{ background:var(--paper); padding:1.5rem; counter-increment:g; }
.give li::before{
  content:counter(g,decimal-leading-zero);
  font-family:var(--mono); font-weight:500; font-size:.7rem;
  letter-spacing:.1em; color:var(--signal); display:block; margin-bottom:.7rem;
}
.give b{ display:block; font-weight:700; text-transform:uppercase; font-size:.9rem; letter-spacing:-.01em; margin-bottom:.35rem; }
.give span{ color:var(--mute); font-size:.9rem; }
@media (max-width:840px){ .give{ grid-template-columns:1fr; } }

/* ---------- escuela ---------- */
.camino{ list-style:none; margin:0 0 2.5rem; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule-dk); border:1px solid var(--rule-dk); }
.camino li{ background:var(--stage-2); padding:1.4rem 1.1rem; position:relative; }
.camino li.este{ background:var(--signal); }
.camino li.este *{ color:#fff !important; }
.camino .n{ font-family:var(--mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; color:var(--signal-on-dark); display:block; margin-bottom:.7rem; }
.camino b{ display:block; font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:-.01em; line-height:1.1; margin-bottom:.3rem; }
.camino span{ color:var(--mute-dk); font-size:.8rem; }
.camino .aqui{
  position:absolute; top:.6rem; right:.6rem;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid #fff; padding:.15rem .35rem;
}
.trans{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule-dk); border:1px solid var(--rule-dk); }
.trans li{ background:var(--stage); padding:1.2rem 1.1rem; font-size:.9rem; color:var(--mute-dk); }
.trans b{ display:block; color:#fff; font-weight:700; text-transform:uppercase; font-size:.85rem; margin-bottom:.2rem; }
@media (max-width:920px){ .camino{ grid-template-columns:1fr 1fr; } .trans{ grid-template-columns:1fr; } }
@media (max-width:520px){ .camino{ grid-template-columns:1fr; } }

/* ---------- profe ---------- */
.profe-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,4vw,4rem); align-items:start; }
.profe-grid .frame{ max-width:420px; }
.cred{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.cred li{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); padding:.45rem .7rem; color:var(--mute);
}
@media (max-width:760px){ .profe-grid{ grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.faq{ border:1px solid var(--rule); border-top:none; }
.faq details{ border-top:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 1.25rem;
  font-weight:700; font-size:.95rem;
  display:flex; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--signal); }
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ background:var(--haze); }
.faq .a{ padding:0 1.25rem 1.25rem; color:var(--mute); font-size:.95rem; max-width:70ch; }

/* ---------- cierre ---------- */
.cierre h2{ font-size:clamp(2.2rem, 1rem + 4.5vw, 4.2rem); }
.cierre .sub{ margin:1.2rem 0 2rem; max-width:56ch; }