/* El elenco (secciones/elenco.html): tarjetas con escenas animadas. */

.el-pausa{font-family:"Public Sans",system-ui,sans-serif;font-size:.85rem;font-weight:600;color:var(--tinta,#1f2a37);background:#fff;border:1.5px solid var(--linea,#e3ddd0);border-radius:999px;padding:.3rem .9rem;cursor:pointer;margin-right:1rem}
.el-pausa:hover{border-color:var(--petroleo,#14666e)}
.el-pausa:focus-visible{outline:3px solid var(--petroleo,#14666e);outline-offset:2px}

.el-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.el-card{background:#fff;border:1px solid var(--linea,#e3ddd0);border-left:4px solid var(--petroleo,#14666e);border-radius:var(--radio,10px);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:5rem}
.el-card.el-ancho{grid-column:1/-1}
.el-escena{border-bottom:1px solid var(--papel-hondo,#efe9dc);background:#fff}
.el-escena svg{display:block;width:100%;height:auto}
.el-info{padding:.9rem 1.1rem 1rem}
.el-info h2{margin:0 0 .4rem;font-size:1.25rem;font-weight:600}
.el-info dl{margin:0}
.el-info dt{font-family:"Public Sans",system-ui,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave,#5b6672)}
.el-info dd{margin:0 0 .5rem}
.el-aparece{margin-top:.3rem;padding-top:.5rem;border-top:1px solid var(--papel-hondo,#efe9dc);font-size:.92rem}
.el-aparece b{font-family:"Public Sans",system-ui,sans-serif;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave,#5b6672)}
.el-aparece a{color:var(--petroleo,#14666e);font-weight:600;text-underline-offset:3px}
.el-aparece em{color:var(--tinta-suave,#5b6672)}
@media (max-width:48rem){.el-grid{grid-template-columns:1fr}}

/* ---------- animaciones ---------- */
  svg .anim{transform-box:fill-box;transform-origin:50% 100%}
  @keyframes viaja{0%{transform:translateX(0);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateX(190px);opacity:0}}
  .viaja{animation-name:viaja;animation-timing-function:linear;animation-iteration-count:infinite}
  @keyframes globo{0%{opacity:0;transform:scale(.85)}8%,62%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(1)}}
  .globo{transform-box:fill-box;transform-origin:20% 100%}
  @keyframes luz{0%{fill:#E8622C}50%{fill:#FFFFFF}100%{fill:#E8622C}}
  .luz{animation:luz .7s steps(1,end) infinite}
  @keyframes respira{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
  .respira{animation:respira 2.4s ease-in-out infinite}
  @keyframes balanceo{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  .balanceo{animation:balanceo 2.6s ease-in-out infinite}
  @keyframes gira{to{transform:rotate(360deg)}}
  .gira{transform-box:view-box;animation:gira 3s linear infinite}
  @keyframes parpadea{0%,100%{opacity:1}50%{opacity:.45}}
  .parpadea{animation:parpadea 1.6s ease-in-out infinite}
  @keyframes cara1{0%,47%{opacity:1}52%,100%{opacity:0}}
  @keyframes cara2{0%,47%{opacity:0}52%,96%{opacity:1}100%{opacity:0}}

  .pausada svg *{animation-play-state:paused !important}
  @media (prefers-reduced-motion: reduce){
    svg *{animation:none !important}
    .viaja{display:none}
  }