/* =====================================================================
   CIRO MOTION TOOLS — la página del paquete (AE TOOLS + PR TOOLS).
   Se apoya en ../css/styles.css (tokens, pie) y ../ae-tools/ae-tools.css
   (secciones, demos .dm, tablas, FAQ). Aquí: portada, pestañas y las
   piezas propias de la ficha de PR TOOLS. Movimiento: ease 70 (--ease-70).
   ===================================================================== */

/* ---------- portada ---------- */
.mt-hero{max-width:var(--maxw);margin-inline:auto;padding:clamp(96px,12vh,130px) var(--pad) clamp(40px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;position:relative}
.mt-hero::before{content:"";position:absolute;inset:0 -30vw;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 42% 55% at 74% 52%, rgba(242,197,0,.16), transparent 70%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 54px)}
.ae-welcome:not([hidden]) + .mt-hero{padding-top:clamp(36px,5vw,56px)}
.mt-title{margin-top:12px;font-size:clamp(52px,min(6.8vw,10.5vh),108px);font-weight:900;line-height:.86;letter-spacing:-.045em;color:var(--yellow);text-transform:uppercase}
.mt-title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.mt-title .ln > span{display:inline-block;animation:aet-rise 1.05s var(--ease-70) both}
.mt-title .ln:nth-child(2) > span{animation-delay:.1s}
.mt-title .ln:nth-child(3) > span{animation-delay:.2s}
.mt-lead{margin-top:clamp(14px,1.6vw,20px);max-width:30ch;font-size:clamp(19px,1.7vw,24px);line-height:1.4;font-weight:500;color:#e6e6e2}
.mt-lead b{color:var(--yellow);font-weight:700}
.mt-body{margin-top:14px;max-width:52ch;font-size:clamp(15px,1.25vw,17px);line-height:1.6;color:var(--soft)}
.mt-body b{color:var(--ink)}

/* las dos tarjetas-pestaña de la portada */
.mt-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(18px,2.2vw,26px)}
.mt-pick{font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border-radius:18px;
  background:#151514;border:1px solid #2a2a28;color:var(--ink);
  transition:border-color .35s ease,background .35s ease,transform .45s var(--ease-70),box-shadow .45s ease}
.mt-pick:hover{border-color:rgba(242,197,0,.6);transform:translateY(-3px)}
.mt-pick.is-on{border-color:var(--yellow);background:linear-gradient(180deg,rgba(242,197,0,.10),rgba(242,197,0,.02));
  box-shadow:0 20px 50px -24px rgba(242,197,0,.55)}
.mt-pick__app{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mt-pick__name{font-size:clamp(16px,1.5vw,20px);font-weight:900;letter-spacing:-.01em;text-transform:uppercase;color:var(--yellow)}
.mt-pick__name em{font-style:normal;color:#fff;font-weight:800;font-size:.7em;text-transform:none;margin-left:.2em}
.mt-pick__desc{font-size:13px;line-height:1.5;color:var(--soft)}
.mt-pick__req{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mt-pick__go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--yellow)}

/* los dos paneles: AE y PR, lado a lado (sin encimarse); el de la pestaña activa al frente */
.mt-hero__stage{position:relative;min-height:560px;display:grid;grid-template-columns:1fr 1fr;gap:4%;align-items:center;padding:0 2%}
.mt-pn{margin:0;position:relative;border-radius:18px;overflow:visible;transform:rotate(var(--r,0deg)) scale(.94);filter:brightness(.55);
  transition:transform .9s var(--ease-70),filter .7s ease;animation:mt-pn-in 1.1s var(--ease-70) var(--d,.4s) both}
.mt-pn img{display:block;width:100%;height:auto;border-radius:18px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1.5px rgba(255,255,255,.10);transition:box-shadow .7s ease}
.mt-pn::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;border-radius:0 0 18px 18px;background:linear-gradient(to bottom,transparent,rgba(18,18,17,.96))}
.mt-pn figcaption{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);transition:color .5s ease}
.mt-pn--ae{--r:-5deg;--d:.45s}
.mt-pn--pr{--r:5deg;--d:.6s;margin-top:60px}
.mt-pn.is-on{transform:rotate(calc(var(--r) * .4)) scale(1.04);filter:none;z-index:2}
.mt-pn.is-on img{box-shadow:0 50px 90px -20px rgba(0,0,0,.85),0 0 0 2px rgba(242,197,0,.6),0 0 90px -10px rgba(242,197,0,.4)}
.mt-pn.is-on figcaption{color:var(--yellow)}
@keyframes mt-pn-in{from{opacity:0;translate:0 70px;scale:.7}to{opacity:1;translate:0 0;scale:1}}

/* ---------- lo que comparten ---------- */
.mt-share__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.mt-share__card{background:#151514;border:1px solid #262624;border-radius:18px;padding:20px 18px 22px}
.mt-share__card h3{margin-top:14px;font-size:18px;font-weight:800}
.mt-share__card p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--soft)}
.mt-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(242,197,0,.12)}
.mt-ico svg{width:24px;height:24px;fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- pestañas centrales (fijas al hacer scroll) ---------- */
.mt-tabs{position:sticky;top:63px;z-index:60;margin-top:clamp(56px,8vw,104px);padding:12px var(--pad);
  background:rgba(17,17,17,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mt-tabs__bar{display:flex;justify-content:center;gap:8px;max-width:640px;margin-inline:auto;padding:6px;border-radius:999px;
  background:#151514;border:1px solid var(--line)}
.mt-tabs__bar button{flex:1;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 18px;border:0;
  border-radius:999px;background:transparent;color:#e6e6e2;transition:background .45s var(--ease-70),color .3s ease}
.mt-tabs__bar button b{font-size:clamp(13px,1.3vw,16px);font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.mt-tabs__bar button span{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s ease}
.mt-tabs__bar button:hover{background:rgba(242,197,0,.08)}
.mt-tabs__bar button[aria-selected="true"]{background:var(--yellow);color:#111}
.mt-tabs__bar button[aria-selected="true"] span{color:rgba(17,17,17,.7)}
.mt-panel[hidden]{display:none}
.mt-panel.is-entering{animation:mt-panel-in .7s var(--ease-70) both}
@keyframes mt-panel-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.mtp [id]{scroll-margin-top:150px}
.mtp .ae-sec:first-child{padding-top:clamp(40px,6vw,72px)}

/* ---------- piezas de la ficha de PR TOOLS ---------- */
.ae-h2 .hi{color:var(--yellow)}
.mt-h2-pr{max-width:18ch}
.mt-soon{display:inline-block;vertical-align:1px;margin-right:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--yellow);
  color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.mt-points{list-style:none;display:grid;gap:11px;margin-top:16px}
.mt-points li{position:relative;padding-left:24px;color:var(--soft);font-size:15px;line-height:1.55}
.mt-points li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:2px;background:var(--yellow);transform:rotate(45deg)}
.mt-points b{color:var(--ink)}
.mt-points--sm li{font-size:14px}
.mt-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mt-cols .ae-label{margin-top:0}

/* grabaciones reales del panel */
.mt-video{margin:0;justify-self:center;width:min(320px,100%);position:relative}
.mt-video video{display:block;width:100%;height:auto;aspect-ratio:760/1600;border-radius:18px;background:#151514;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1.5px rgba(242,197,0,.35),0 0 70px -20px rgba(242,197,0,.3)}
.mt-video figcaption{margin-top:12px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mt-video figcaption::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#e34b4b;margin-right:8px;vertical-align:1px}

.mt-shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;justify-self:center;width:min(520px,100%)}
.mt-shots .ae-map__shot{max-width:none}
.mt-table-label{margin-top:clamp(28px,4vw,48px)}
.mt-table-wrap{overflow-x:auto}
.mt-table td:first-child{width:auto;white-space:nowrap}
.mt-split-tables{margin-top:clamp(28px,4vw,48px)}
.mt-tools3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mt-after-tools{margin-top:clamp(40px,6vw,72px)}

/* demo: insertar un título en una pista libre */
.mt-insert{position:relative;background:#141413;border:1px solid #2a2a28;border-radius:18px;padding:12px;display:grid;gap:10px}
.mt-mon{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000 center/cover no-repeat}
.mt-mon::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%)}
.mt-mon__title{position:absolute;left:7%;bottom:14%;z-index:2;font-weight:900;font-size:clamp(16px,2.2vw,28px);letter-spacing:-.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.prtl{position:relative;background:#121211;border:1px solid #262624;border-radius:10px;padding:8px 10px 10px 44px}
.prtl__row{position:relative;height:24px;margin-top:5px;border-radius:4px;background:rgba(255,255,255,.025)}
.prtl__row::before{content:attr(data-tr);position:absolute;left:-36px;top:4px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#8a8a85}
.prtl__clip{position:absolute;top:3px;bottom:3px;border-radius:4px;background:#4a6fa5;font-size:9.5px;font-weight:800;color:#fff;
  padding:0 6px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.prtl__clip.v{background:#3d5a80}
.prtl__clip.t{background:#b98fd8;color:#1b1030}
.prtl__clip.t.ciro{background:var(--yellow);color:#111}
.prtl__clip.bad{box-shadow:0 0 0 2px #e34b4b inset}
.prtl__ph{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#4fa3ff;z-index:3}
.prtl__ph::before{content:"";position:absolute;top:-2px;left:-5px;width:12px;height:8px;border-radius:2px;background:#4fa3ff}
.prtl__ruler{position:relative;height:12px}
.dm .prtl{position:absolute;left:8px;right:8px;bottom:8px;top:34px;padding-top:4px}
.dm .prtl__row{height:20%;margin-top:3%}

/* demo: los 4 lower thirds de ejemplo */
.mt-lt{position:relative;margin-bottom:clamp(36px,5vw,64px)}
.mt-lt__stage{position:relative;display:grid;place-items:center;min-height:clamp(260px,40vw,520px)}
.mt-lt__frame{position:relative;overflow:hidden;border-radius:14px;background:#000 center/cover no-repeat;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1.5px rgba(255,255,255,.1)}
.mt-lt__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 50%)}
.mt-lt__frame.h{width:min(860px,100%);aspect-ratio:16/9}
.mt-lt__frame.v{height:clamp(260px,40vw,520px);aspect-ratio:9/16}
.mt-lt__layer{position:absolute;z-index:2;will-change:transform,clip-path,opacity}
.mt-lt__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.mt-lt__nav button{font:inherit;cursor:pointer;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#d8d8d4;
  background:#1a1a19;border:1px solid var(--line);padding:9px 14px;border-radius:999px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.mt-lt__nav button[aria-pressed="true"]{background:var(--yellow);color:#111;border-color:var(--yellow)}
.mt-lt__meta{text-align:center;margin-top:10px;font-size:12px;color:var(--muted);letter-spacing:.06em}

/* demo: estilos guardados */
.mt-styles{margin-top:18px}
.mt-styles__mon{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000 center/cover no-repeat;display:grid;place-items:center}
.mt-styles__mon::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.mt-styles__txt{position:relative;z-index:2;padding:.25em .6em;font-size:clamp(18px,2.4vw,30px);line-height:1.1;text-align:center;white-space:nowrap}
.mt-styles__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.mt-styles__grid button{font:inherit;cursor:pointer;text-align:left;background:#151514;border:1px solid #2a2a28;border-radius:10px;padding:8px;color:var(--ink);
  transition:border-color .3s ease,background .3s ease}
.mt-styles__grid button:hover{border-color:rgba(242,197,0,.6)}
.mt-styles__grid button[aria-pressed="true"]{border-color:var(--yellow);background:rgba(242,197,0,.08)}
.mt-styles__grid i{display:grid;place-items:center;height:30px;border-radius:6px;background:#0d0d0c;font-style:normal;overflow:hidden}
.mt-styles__grid i span{font-size:11px;line-height:1;padding:3px 5px}
.mt-styles__grid b{display:block;margin-top:6px;font-size:10.5px;font-weight:800;line-height:1.25}
.mt-styles__grid small{display:block;font-size:9.5px;color:var(--muted)}

/* ---------- creados por nosotros + descargas ---------- */
.mt-made__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.mt-steps-label{margin-top:clamp(36px,5vw,56px)}
.mt-steps3{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.mt-steps3 li{counter-increment:s;position:relative;background:#151514;border:1px solid #262624;border-radius:18px;padding:52px 18px 20px}
.mt-steps3 li::before{content:counter(s);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;
  background:var(--yellow);color:#111;font-size:13px;font-weight:900}
.mt-steps3 b{display:block;font-size:18px;font-weight:800}
.mt-steps3 span{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:var(--soft)}
.mt-mac{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.6}
.mt-dl{max-width:var(--maxw);margin:clamp(72px,9vw,128px) auto 0;padding:clamp(56px,8vw,104px) var(--pad);text-align:center;position:relative;border-top:1px solid var(--line)}
.mt-dl::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 70% at 50% 60%, rgba(242,197,0,.14), transparent 70%)}
.mt-dl__title{margin-top:14px;font-size:clamp(44px,7.4vw,112px);font-weight:900;line-height:.92;letter-spacing:-.04em;color:var(--yellow);text-transform:uppercase}
.mt-dl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:clamp(28px,4vw,44px) auto 0}
.mt-dl__card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 20px;border-radius:20px;background:#151514;border:1px solid #2a2a28;
  transition:border-color .3s ease,transform .45s var(--ease-70)}
.mt-dl__card:hover{border-color:var(--yellow);transform:translateY(-3px)}
.mt-dl__card b{font-size:clamp(20px,2vw,26px);font-weight:900;text-transform:uppercase;color:var(--yellow)}
.mt-dl__card b em{font-style:normal;color:#fff;font-size:.62em;text-transform:none;margin-left:.2em}
.mt-dl__card .ae-btn{margin-top:10px}
.mt-btn-soon,.mt-btn-soon:hover{background:transparent;color:var(--yellow);border:1.5px solid var(--yellow);box-shadow:none;transform:none;cursor:default}
.mt-dl__card.is-soon:hover{border-color:#2a2a28;transform:none}
.mt-dl__thanks{margin-top:28px;font-size:clamp(18px,1.8vw,22px);font-weight:600;color:#e6e6e2}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mt-share__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-styles__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:860px){
  .mt-hero,.mt-made__grid{grid-template-columns:minmax(0,1fr)}
  .mt-hero__stage{min-height:0;max-width:520px;margin:10px auto 40px;width:100%}
  .mt-tools3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-steps3{grid-template-columns:minmax(0,1fr)}
  .mt-tabs{top:62px}
}
@media (max-width:620px){
  .mt-picks,.mt-dl__grid,.mt-cols,.mt-shots{grid-template-columns:minmax(0,1fr)}
  .mt-share__grid,.mt-tools3{grid-template-columns:minmax(0,1fr)}
  .mt-styles__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mt-tabs__bar button{padding:9px 10px}
  .mt-tabs__bar button span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mt-title .ln > span,.mt-pn,.mt-panel.is-entering{animation:none}
  .mt-pn{transition:none}
}