/* Dirección visual 2026: aula editorial, mosaico activo y piezas gráficas únicas. */
:root{
  --ink:#102f3a;
  --teal:#00777b;
  --teal-dark:#073f49;
  --paper:#edf4f5;
  --line:#bfd2d6;
  --muted:#48646c;
}
body{
  background:
    radial-gradient(circle at 92% 3%,rgba(0,167,160,.11),transparent 24rem),
    linear-gradient(180deg,#f7fbfb 0,#edf4f5 38rem,#eaf1f3 100%);
}
.topbar{
  position:sticky;top:0;z-index:8;
  min-height:82px;
  border-bottom:1px solid rgba(7,63,73,.13);
  box-shadow:0 8px 28px rgba(16,47,58,.07);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(15px);
}
.brand-mark{
  border-radius:15px 15px 15px 4px;
  background:linear-gradient(145deg,#004f59,#00958f);
  box-shadow:0 8px 18px rgba(0,83,88,.2);
}
.workspace{max-width:1720px;grid-template-columns:258px minmax(0,1fr)}
.sidebar{
  position:relative;
  background:
    linear-gradient(160deg,rgba(0,137,132,.21),transparent 36%),
    #102f3a;
  border-right:1px solid rgba(255,255,255,.08);
}
.sidebar:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none;
  background:radial-gradient(circle at 15% 100%,rgba(100,226,210,.2),transparent 60%);
}
.axis-link{position:relative;overflow:hidden;transition:transform .22s,background .22s}
.axis-link:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:#77d8cc;transform:scaleY(0);transition:transform .22s}
.axis-link:hover{transform:translateX(4px)}
.axis-link.active:before{transform:scaleY(1)}
main{padding:38px 42px 64px}
.studio-heading{
  position:relative;overflow:hidden;align-items:center;
  padding:29px 32px;margin:-2px 0 22px;border-radius:18px;
  color:#fff;background:
    radial-gradient(circle at 88% 18%,rgba(245,188,84,.32),transparent 17rem),
    radial-gradient(circle at 66% 100%,rgba(0,191,176,.25),transparent 19rem),
    linear-gradient(125deg,#102f3a,#075b63 70%,#00777b);
  box-shadow:0 18px 45px rgba(16,47,58,.18);
}
.studio-heading:after{
  content:"";position:absolute;right:24%;top:-80px;width:230px;height:230px;border:1px solid rgba(255,255,255,.15);border-radius:50%;
  box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025);pointer-events:none;
}
.studio-heading>div{position:relative;z-index:1}
.studio-heading .eyebrow{color:#8ee4da}
.studio-heading h1{font-size:clamp(2.15rem,4vw,3.35rem);max-width:760px}
.studio-heading p{color:#d9eeee;font-size:1.04rem}
.catalog-actions{display:flex;min-width:230px;flex-direction:column;align-items:flex-end;gap:12px}
.studio-heading .catalog-count{color:#d9eeee;margin:0}
.surprise-button{
  display:inline-flex;align-items:center;gap:9px;min-height:47px;padding:11px 16px;
  border:1px solid rgba(255,255,255,.45);border-radius:9px;background:#fff;color:#07545b;
  font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.14);transition:transform .2s,box-shadow .2s;
}
.surprise-button:hover{transform:translateY(-2px) rotate(-.4deg);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.filters{gap:10px;padding:2px 0 27px;position:sticky;top:82px;z-index:6;background:linear-gradient(180deg,#edf4f5 76%,transparent)}
.filter-chip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.88);box-shadow:0 3px 10px rgba(16,47,58,.04);transition:transform .18s,box-shadow .18s}
.filter-chip:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(16,47,58,.09)}
.filter-chip span{display:grid;place-items:center;min-width:23px;height:23px;padding:0 5px;border-radius:12px;background:#e4eff0;color:#31545c;font-size:.75rem;font-weight:700}
.filter-chip[aria-pressed=true] span{background:rgba(255,255,255,.2);color:#fff}
.catalog-grid{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:dense;gap:22px;align-items:stretch;
}
.activity-card{
  --axis-color:#00777b;
  grid-column:span 4;border:0;border-radius:16px;
  box-shadow:0 7px 22px rgba(16,47,58,.09),0 0 0 1px rgba(34,82,91,.1);
  animation:cardEnter .48s both;animation-delay:calc(var(--entry) * 45ms);
  transform-origin:50% 80%;
}
.activity-card[data-axis="1"]{--axis-color:#00857f}.activity-card[data-axis="2"]{--axis-color:#315ec9}.activity-card[data-axis="3"]{--axis-color:#8a4ec2}.activity-card[data-axis="4"]{--axis-color:#c66a2b}.activity-card[data-axis="5"]{--axis-color:#a53e68}.activity-card[data-axis="6"]{--axis-color:#497832}
.activity-card:hover{transform:translateY(-7px) rotate(.12deg);box-shadow:0 18px 38px rgba(16,47,58,.16),0 0 0 1px rgba(0,119,123,.22)}
.activity-card.card-wide{grid-column:span 8;display:grid;grid-template-columns:minmax(260px,43%) minmax(0,1fr);min-height:308px}
.activity-card.card-wide .card-art{height:100%;aspect-ratio:auto}
.activity-card.card-wide .card-body{padding:28px 27px}
.activity-card.card-wide h2{font-size:1.62rem}
.activity-card.card-shift .card-art{aspect-ratio:1.58/1}
.card-art{aspect-ratio:1.9/1;min-height:165px}
.photo-art{background:#0c414a}
.photo-art img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.9) contrast(1.02)}
.activity-card:hover .photo-art img{transform:scale(1.055);filter:saturate(1.05) contrast(1.03)}
.photo-wash{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(7,45,53,.44));pointer-events:none}
.card-art .art-label{z-index:3;border:1px solid rgba(255,255,255,.58);box-shadow:0 4px 15px rgba(0,0,0,.11);backdrop-filter:blur(7px)}
.card-body{padding:22px 21px 20px}
.activity-card h2{font-size:1.35rem;line-height:1.23}
.activity-card p{font-size:.94rem}
.card-bottom{border-top:1px solid color-mix(in srgb,var(--axis-color) 22%,#e5edef);margin-top:20px;padding-top:15px}
.card-bottom>span,.card-meta>span:first-child{color:color-mix(in srgb,var(--axis-color) 78%,#334e55)}
.play-link{color:#006d71}

/* Pósteres gráficos: cada id aporta una paleta, inclinación y contenido propios. */
.graphic-scene{
  --c1:hsl(var(--art-h) 63% 26%);--c2:hsl(var(--art-h) 62% 52%);--c3:hsl(var(--art-a) 82% 61%);
  isolation:isolate;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--c3) 76%,white),transparent 29%),
    linear-gradient(145deg,color-mix(in srgb,var(--c1) 92%,#061f27),var(--c1) 55%,color-mix(in srgb,var(--c2) 56%,white));
}
.graphic-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 50%,rgba(255,255,255,.09));z-index:-1}
.graphic-scene .art-label{background:rgba(255,255,255,.91);color:#123b44}
.art-halo{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.3);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.art-halo.h1{width:150px;height:150px;right:-45px;top:-56px;box-shadow:0 0 0 24px rgba(255,255,255,.04),0 0 0 48px rgba(255,255,255,.025)}
.art-halo.h2{width:88px;height:88px;left:-24px;bottom:-35px;background:rgba(255,255,255,.07)}
.art-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)}
.visual-number{position:absolute;right:15px;bottom:10px;color:rgba(255,255,255,.4);font:500 2.6rem/1 Georgia,serif;letter-spacing:-.05em}
.visual-core{position:relative;z-index:2;transform:rotate(var(--art-r));transition:transform .48s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 9px 16px rgba(0,25,32,.2))}
.activity-card:hover .visual-core{transform:rotate(0) scale(1.07)}
.activity-card:hover .art-halo.h1{transform:translate(-15px,14px) scale(1.08)}
.graphic-large{aspect-ratio:3/2;min-height:250px;border-radius:11px}
.graphic-large .visual-core{transform:rotate(var(--art-r)) scale(1.18)}
.graphic-large .visual-number{font-size:3.8rem;right:20px;bottom:16px}
.vector-panel{background:transparent;overflow:visible}

.path-preview{display:flex;align-items:center;gap:8px}.path-preview span,.link-preview span,.quiz-preview span,.teach-preview span{display:grid;place-items:center;width:41px;height:41px;border-radius:50%;background:#fff;color:var(--c1);font-weight:800}.path-preview i{width:18px;height:2px;background:rgba(255,255,255,.72);position:relative}.path-preview i:after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.link-preview{display:grid;grid-template-columns:44px 52px 44px;gap:8px 10px;align-items:center}.link-preview i{height:2px;background:#fff;transform:rotate(-8deg)}.link-preview i:nth-of-type(2){transform:rotate(8deg)}
.sbar-preview{display:grid;gap:6px;width:180px}.sbar-preview span{display:flex;align-items:center;height:28px;padding-left:calc(12px + var(--n)*15px);border-radius:5px;background:rgba(255,255,255,calc(.94 - var(--n)*.12));color:var(--c1);font-weight:900;transform:translateX(calc(var(--n)*-5px))}
.teach-preview{display:flex;align-items:center;gap:10px}.teach-preview b{font-size:2.1rem;color:#fff;animation:softTurn 7s linear infinite}.teach-preview em{position:absolute;width:112px;height:58px;border:2px solid rgba(255,255,255,.34);border-radius:50%;left:15px;top:-8px}
.deck-preview{display:grid;grid-template-columns:repeat(3,42px);gap:7px;perspective:500px}.deck-preview span{height:53px;border-radius:6px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.17);transform:rotateY(0);transition:transform .4s}.deck-preview .turned{display:grid;place-items:center;background:#fff;color:var(--c1);transform:rotateY(12deg);font-weight:900}
.riddle-preview{display:grid;place-items:center;width:150px;height:120px}.riddle-preview strong{grid-area:1/1;color:#fff;font:500 6.2rem/1 Georgia,serif}.riddle-preview i{grid-area:1/1;width:112px;height:112px;border:2px dashed rgba(255,255,255,.45);border-radius:50%;animation:softTurn 16s linear infinite}.riddle-preview span{position:absolute;width:34px;height:5px;border-radius:3px;background:var(--c3)}.riddle-preview span:nth-of-type(1){top:9px;right:7px;transform:rotate(31deg)}.riddle-preview span:nth-of-type(2){bottom:12px;left:4px;transform:rotate(-20deg)}.riddle-preview span:nth-of-type(3){top:50%;left:-6px}
.word-preview{display:grid;grid-template-columns:repeat(4,31px);gap:4px;padding:8px;border:1px solid rgba(255,255,255,.35);border-radius:10px;background:rgba(5,38,46,.2)}.word-preview span{display:grid;place-items:center;width:31px;height:31px;border-radius:4px;color:#fff;font-weight:700}.word-preview span.lit{background:#fff;color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c3) 55%,transparent)}
.escape-preview{display:flex;align-items:end;gap:8px}.escape-preview>span{position:relative;display:grid;place-items:center;width:41px;height:48px;border:2px solid rgba(255,255,255,.77);border-radius:7px;background:rgba(255,255,255,.1);color:#fff;font-weight:800}.escape-preview i{position:absolute;left:8px;right:8px;height:22px;border:2px solid rgba(255,255,255,.77);border-bottom:0;border-radius:18px 18px 0 0;top:-19px}.escape-preview .open{background:#fff;color:var(--c1);transform:translateY(-7px)}.escape-preview .open i{transform:translateX(7px) rotate(23deg);transform-origin:right bottom;border-color:#fff}
.detect-preview{display:flex;gap:6px;align-items:center}.detect-preview span{display:grid;place-items:center;width:36px;height:44px;background:rgba(255,255,255,.92);color:var(--c1);border-radius:5px;font-weight:800}.detect-preview i{position:absolute;width:64px;height:64px;border:5px solid var(--c3);border-radius:50%;right:-13px;top:-13px}.detect-preview i:after{content:"";position:absolute;width:34px;height:6px;background:var(--c3);right:-28px;bottom:-15px;transform:rotate(48deg);border-radius:4px}.detect-preview b{position:absolute;right:-2px;top:7px;color:#fff;font-size:1.25rem}
.quiz-preview{position:relative;width:150px;height:120px}.quiz-preview strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#fff;color:var(--c1);font:600 2.5rem/1 Georgia,serif}.quiz-preview span{position:absolute;width:35px;height:35px;background:var(--c3);color:#173740}.quiz-preview .q0{left:0;top:5px}.quiz-preview .q1{right:0;top:28px}.quiz-preview .q2{left:18px;bottom:0}

@keyframes cardEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes softTurn{to{transform:rotate(360deg)}}
@media(max-width:1250px){
  main{padding:30px 28px 52px}.catalog-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.activity-card{grid-column:span 4}.activity-card.card-wide{grid-column:span 8}.filters{top:80px}
}
@media(max-width:850px){
  .studio-heading{display:block;padding:25px}.catalog-actions{align-items:flex-start;margin-top:20px}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.activity-card,.activity-card.card-wide{grid-column:span 1;display:flex;min-height:0}.activity-card.card-wide .card-art{height:auto;aspect-ratio:1.9/1}.activity-card.card-wide .card-body{padding:22px 21px 20px}.activity-card.card-wide h2{font-size:1.35rem}.activity-card.card-shift .card-art{aspect-ratio:1.9/1}.filters{position:relative;top:auto;background:transparent}
}
@media(max-width:560px){
  main{padding:23px 16px 38px}.studio-heading{padding:23px 20px;border-radius:14px}.studio-heading h1{font-size:2.15rem}.catalog-grid{grid-template-columns:1fr}.catalog-actions{min-width:0}.surprise-button{width:100%}.activity-card:hover{transform:translateY(-3px)}.card-art,.activity-card.card-wide .card-art,.activity-card.card-shift .card-art{aspect-ratio:2.05/1;min-height:150px}.graphic-large{aspect-ratio:2/1;min-height:190px}.filter-chip{padding:8px 12px}.visual-number{font-size:2.25rem}
}
@media(prefers-reduced-motion:reduce){.activity-card{animation:none}.teach-preview b,.riddle-preview i{animation:none}.activity-card:hover .visual-core,.activity-card:hover .photo-art img,.activity-card:hover .art-halo{transform:none}}