/* ============ Estilos de Studio (compartido por la app y las páginas legales) ============ */
:root{
  --bg:#f5f7fb; --surface:#ffffff; --surface-2:#fbfcfe;
  --text:#0f172a; --muted:#64748b; --border:#e7e9f0;
  --accent:#6366f1; --accent-2:#06b6d4;
  --ok:#10b981; --danger:#ef4444;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.07);
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#0a0e15; --surface:#0f1622; --surface-2:#121a28;
  --text:#e7eef6; --muted:#8b97a7; --border:#1c2633;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%; overflow-x:hidden; max-width:100%}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .35s,color .35s}
body::before{content:""; position:fixed; inset:0 0 auto 0; height:460px; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 60% at 82% -12%, color-mix(in srgb,var(--accent-2) 22%, transparent), transparent 70%),
    radial-gradient(52% 52% at 14% -12%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 70%);
  opacity:.55}
.wrap{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 20px 40px}
a{color:var(--accent)}

/* header */
header{display:flex; align-items:center; justify-content:space-between; padding:22px 0 6px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; font-size:19px; color:var(--text); text-decoration:none}
.logo{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.brand small{display:block; font-weight:500; font-size:11px; color:var(--muted)}
.toggle{display:flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--border);
  background:var(--surface); color:var(--text); border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; box-shadow:var(--shadow); transition:.2s}
.toggle:hover{transform:translateY(-1px)}

/* hero */
.hero{text-align:center; padding:30px 0 22px}
.hero .eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); padding:6px 13px; border-radius:999px; margin-bottom:16px}
.hero h1{font-size:48px; line-height:1.08; letter-spacing:-.03em; margin:0 0 12px}
.hero h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--muted); margin:0 auto; font-size:16px; max-width:560px}
.trust{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:13px; font-weight:600}
.trust span{display:inline-flex; align-items:center; gap:6px}

/* tabs */
.tabs{display:flex; gap:4px; padding:5px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; box-shadow:var(--shadow); width:max-content; max-width:100%; margin:8px auto 26px; overflow:auto}
.tab{display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:15.5px;
  padding:13px 22px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.18s}
.tab[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.tab:not([aria-selected="true"]):hover{color:var(--text)}

/* cards y controles */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.panel{display:none} .panel.activo{display:block; animation:fade .3s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.row{display:flex; gap:10px; flex-wrap:wrap}
input[type=text],input[type=url],textarea,select{width:100%; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:13px 15px; font:inherit; font-size:15px; transition:.18s}
input:focus,textarea:focus,select:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
textarea{min-height:240px; resize:vertical; line-height:1.6}
.btn{border:0; border-radius:12px; padding:13px 20px; font:inherit; font-weight:700; font-size:15px; cursor:pointer; transition:.18s; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:7px; justify-content:center}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn:disabled{opacity:.55; cursor:default; transform:none}
.grow{flex:1; min-width:220px}
.hint{color:var(--muted); font-size:13px; margin:10px 2px 0}
.dl-lbl{font-size:13px; color:var(--muted); font-weight:600}
.sep{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:18px 0}
.sep::before,.sep::after{content:""; height:1px; background:var(--border); flex:1}

/* segmento (modo / duración) + ayuda */
.seg{display:inline-flex; padding:4px; gap:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px}
.seg button{border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer; transition:.15s}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
.campo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.campo label{font-size:13px; color:var(--muted); font-weight:600}
.ayuda{position:relative; display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid var(--border); color:var(--muted); font-size:11px; font-weight:700; cursor:help}
.ayuda:hover::after{content:attr(data-tip); position:absolute; bottom:140%; left:50%; transform:translateX(-50%);
  width:230px; background:var(--text); color:var(--bg); padding:9px 11px; border-radius:9px; font-size:12px; font-weight:500; line-height:1.45; z-index:30; box-shadow:var(--shadow)}

/* estados */
.estado{display:none; align-items:center; gap:11px; margin-top:18px; color:var(--muted); font-size:14px}
.estado.show{display:flex}
.spin{width:18px; height:18px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.error{display:none; margin-top:16px; padding:12px 14px; border-radius:12px; font-size:14px;
  background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}
.error.show{display:block}
.error .btn{margin-top:10px}
.resultado{display:none; margin-top:22px} .resultado.show{display:block}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--border); padding:5px 11px; border-radius:999px}
.vid-titulo{display:none; font-weight:700; font-size:16px; margin-bottom:12px; line-height:1.35; color:var(--text)}

/* miniaturas / seo / shorts */
.thumb{border-radius:14px; border:1px solid var(--border); width:100%; display:block; box-shadow:var(--shadow)}
.reslist{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.bloque{margin-top:22px} .bloque h3{font-size:13px; margin:0 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.lista{display:flex; flex-direction:column; gap:8px}
.item{display:flex; align-items:center; gap:10px; justify-content:space-between; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:11px 14px; font-size:15px}
.item .crono{color:var(--accent); font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:6px 12px; font-size:13px}
.mini{font-size:12px; font-weight:700; color:var(--accent); background:transparent; border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:pointer}
.mini:hover{border-color:var(--accent)}
.short{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:10px}
.short .top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.short .tit{font-weight:700; font-size:15px}
.short .desc{color:var(--muted); font-size:13px}

/* controles extra de subtítulos (resumen / traducir) */
.extra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--border)}
.extra-sep{width:1px; height:22px; background:var(--border); margin:0 2px}

/* resumen + puntos clave + capítulos */
.resumen{display:none; margin-top:20px} .resumen.show{display:block}
.res-p{color:var(--text); font-size:15px; line-height:1.6; margin:0}
.res-ul{margin:0; padding-left:20px; color:var(--text); font-size:14px; line-height:1.75}
.caps{display:flex; flex-direction:column; gap:6px}
.cap{display:flex; gap:12px; align-items:baseline; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 13px; font-size:14px}
.cap .crono{color:var(--accent); font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap; min-width:52px}
.cap span:last-child{color:var(--text)}

/* previsualización de miniatura en layouts de YouTube */
.mock-tit{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:24px 0 12px; text-align:left}
.mockups{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mk{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px}
.mk-lbl{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px}
.mk img{width:100%; border-radius:8px; display:block; aspect-ratio:16/9; object-fit:cover}
.mk-row2{display:flex; gap:10px; margin-top:10px}
.mk-av{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex:none}
.mk-meta{min-width:0}
.mk-t{font-weight:700; font-size:14px; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mk-c{font-size:12px; color:var(--muted)}
.mk-mobile{max-width:360px}
.mk-search{grid-column:1 / -1}
.mk-search .mk-row{display:flex; gap:14px}
.mk-search .mk-row img{width:260px; flex:none}
.mk-search .mk-t{font-size:16px}

/* logo + banner de canal */
.canal-banner{border-radius:14px; overflow:hidden; border:1px solid var(--border)}
.canal-banner img{width:100%; display:block; aspect-ratio:6.2/1; object-fit:cover}
.canal-cab{display:flex; align-items:center; gap:14px; margin-top:14px}
.canal-logo{width:72px; height:72px; border-radius:50%; border:1px solid var(--border); object-fit:cover; background:var(--surface-2)}
.canal-nombre{font-weight:800; font-size:19px; letter-spacing:-.02em}
.canal-subs{color:var(--muted); font-size:13px}

/* feedback */
.fb{display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; flex-wrap:wrap}
.fb button{border:1px solid var(--border); background:var(--surface-2); border-radius:9px; padding:6px 11px; cursor:pointer; font-size:15px; transition:.15s}
.fb button:hover{border-color:var(--accent)}
.fb .gracias{color:var(--ok); font-weight:600}

/* secciones de contenido (home + por herramienta) */
.section{margin-top:42px}
.section h2{font-size:23px; letter-spacing:-.02em; margin:0 0 6px; text-align:center}
.section .lead{color:var(--muted); text-align:center; margin:0 auto 24px; max-width:540px; font-size:15px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.step .n{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-bottom:12px}
.step h3{margin:0 0 5px; font-size:16px} .step p{margin:0; color:var(--muted); font-size:14px}
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.feature{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:.18s}
.feature:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.feature .ic{font-size:24px} .feature h3{margin:10px 0 5px; font-size:17px} .feature p{margin:0; color:var(--muted); font-size:14px}
.feature .tag{display:inline-block; margin-top:10px; font-size:11px; font-weight:700; color:var(--accent)}
.faq{max-width:680px; margin:0 auto}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px 16px; margin-bottom:10px}
.faq summary{cursor:pointer; padding:14px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-weight:700; font-size:20px}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.6}

/* CTA franja */
.cta{margin-top:42px; text-align:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,var(--accent-2) 12%,var(--surface)));
  border:1px solid var(--border); border-radius:var(--radius); padding:34px 24px}
.cta h2{margin:0 0 8px; font-size:22px} .cta p{margin:0 0 18px; color:var(--muted)}

/* ventajas (por qué Creatoolkit) */
.ventajas{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.ventaja{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 18px; box-shadow:var(--shadow); text-align:center; transition:.18s}
.ventaja:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.ventaja .vic{font-size:26px; margin-bottom:8px}
.ventaja h3{margin:0 0 5px; font-size:15px}
.ventaja p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}

/* comunidad: pedí una herramienta nueva */
.idea{margin-top:42px; text-align:center; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:var(--radius); padding:34px 24px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),color-mix(in srgb,var(--accent-2) 11%,var(--surface)))}
.idea-tag{display:inline-block; font-size:12px; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); padding:5px 12px; border-radius:999px; margin-bottom:12px}
.idea h2{margin:0 0 8px; font-size:22px}
.idea>p{margin:0 auto 18px; color:var(--muted); max-width:520px}
.idea-form{display:flex; gap:10px; max-width:560px; margin:0 auto; flex-wrap:wrap}
.idea-form .grow{min-width:200px}
.idea-ok{display:none; color:var(--ok); font-weight:700; margin:14px 0 0}
.idea-ok.show{display:block}

/* ad slot */
.ad{margin:24px 0 0; border:1px dashed var(--border); border-radius:14px; padding:16px; text-align:center; color:var(--muted); font-size:12px; background:var(--surface-2)}
.soon{text-align:center; padding:22px 10px; color:var(--muted)} .soon b{color:var(--text)}

/* footer */
footer{margin-top:50px; border-top:1px solid var(--border); padding-top:28px; color:var(--muted); font-size:13px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; margin-bottom:22px}
.foot-grid h4{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text); margin:0 0 12px}
.foot-grid a{display:block; color:var(--muted); text-decoration:none; margin-bottom:8px; cursor:pointer}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{text-align:center; padding-top:16px; border-top:1px solid var(--border)}

/* modal */
.modal{display:none; position:fixed; inset:0; z-index:50; background:rgba(2,6,18,.55); align-items:center; justify-content:center; padding:20px}
.modal.show{display:flex}
.modal .box{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); max-width:560px; padding:26px; box-shadow:var(--shadow)}
.modal h2{margin:0 0 12px; font-size:19px} .modal p{color:var(--muted); font-size:14px; margin:0 0 12px}
.modal .btn{margin-top:6px}

/* banner de cookies */
.cookies{display:none; position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:40; width:calc(100% - 36px); max-width:640px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px;
  align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between}
.cookies.show{display:flex}
.cookies p{margin:0; font-size:13px; color:var(--muted); flex:1; min-width:200px}

/* páginas legales */
.legal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow); margin-top:14px}
.legal h1{font-size:26px; margin:0 0 6px} .legal .fecha{color:var(--muted); font-size:13px; margin:0 0 22px}
.legal h2{font-size:18px; margin:26px 0 8px} .legal p,.legal li{color:var(--muted); font-size:15px; line-height:1.7}
.legal ul{padding-left:20px}

/* 404 */
.notfound{text-align:center; padding:80px 20px}
.notfound .big{font-size:72px; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* publicidad lateral (rieles) — solo en pantallas anchas; nunca tapan el contenido ni se abren encima.
   El contenido vive en .wrap (centrado, máx 920px); los rieles van por fuera, a cada costado. */
.ad-rail{position:fixed; top:50%; transform:translateY(-50%); width:160px; z-index:30; display:none; text-align:center}
.ad-rail.izq{left:calc(50% - 636px)}
.ad-rail.der{right:calc(50% - 636px)}
.ad-lbl{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:.55; margin-bottom:6px}
@media(min-width:1300px){ .ad-rail{display:block} }

/* publicidad dentro del contenido (sirve en celular y compu, discreta) */
.ad-slot{margin:26px auto; text-align:center; max-width:728px}

/* publicidad barra inferior (ancla) — SOLO en celular/tablet; se puede cerrar; no tapa contenido */
.ad-ancla{display:none; position:fixed; left:0; right:0; bottom:0; z-index:35;
  background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -6px 20px rgba(16,24,40,.12);
  padding:6px 10px; text-align:center; min-height:62px}
.ad-cerrar{position:absolute; top:-13px; right:10px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:16px; line-height:1;
  cursor:pointer; box-shadow:var(--shadow)}
@media(max-width:900px){
  .ad-ancla{display:block}
  body:has(.ad-ancla) .wrap{padding-bottom:84px}  /* deja aire para que la barra no tape el pie */
}

/* responsive */
@media(max-width:680px){
  /* header: que NO desborde a la derecha en el celular */
  header{flex-wrap:wrap; gap:10px 8px; padding:16px 0 4px}
  .brand{font-size:17px}
  #idioma button{padding:6px 9px; font-size:12px}
  #temaTxt{display:none}          /* dejar solo el ícono de tema, ahorra ancho */
  .toggle{padding:8px 11px}
  .hero{padding:20px 0 16px}
  .hero h1{font-size:34px}        /* título grande pero que entra bien */
  .tab{font-size:14px; padding:11px 16px}
  .steps,.features,.ventajas,.mockups{grid-template-columns:1fr}
  .mk-search .mk-row img{width:150px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .campo label[style]{margin-left:0 !important}
}
@media(min-width:481px) and (max-width:680px){ .ventajas{grid-template-columns:1fr 1fr} }