/* ============ 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; flex-wrap:wrap; justify-content:center; gap:4px; padding:6px; background:var(--surface); border:1px solid var(--border);
  border-radius:20px; box-shadow:var(--shadow); max-width:100%; margin:8px auto 26px}
.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)}

/* traductor: recuadro propio dentro de Subtítulos */
.traductor-box{margin-top:14px}
.traductor-tit{font-weight:700; font-size:16px; display:flex; align-items:center; gap:6px}

/* tu historial (últimos trabajos, guardado en el navegador) */
.historial{display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:center; margin:-12px auto 22px; max-width:920px}
.hist-lbl{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.hist-chip{display:inline-flex; align-items:center; gap:6px; max-width:240px; background:var(--surface); border:1px solid var(--border);
  color:var(--text); border-radius:999px; padding:7px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:var(--shadow); transition:.15s}
.hist-chip:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.hist-borrar{border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; opacity:.8}
.hist-borrar:hover{color:var(--danger)}

/* 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)}

/* casilleros de número (duración / cantidad de shorts): píldora de marca, sin las flechitas feas */
input[type=number]{background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; font:inherit; font-size:15px; font-weight:700; text-align:center;
  transition:.18s; -moz-appearance:textfield; appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
input[type=number]:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}

/* selector de archivo: caja de marca + botón "Seleccionar archivo" con el acento del sitio */
input[type=file]{background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
  border-radius:12px; padding:8px 12px; font:inherit; font-size:14px; cursor:pointer; transition:.18s}
input[type=file]:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
input[type=file]::file-selector-button{margin-right:12px; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:9px; padding:9px 15px; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); transition:.18s}
input[type=file]::file-selector-button:hover{background:color-mix(in srgb,var(--accent) 20%,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}

/* Vista previa de SEO (F3): cómo se ve en la búsqueda de YouTube y en Google */
.seo-prev{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.prev-col{min-width:0}
.prev-lbl{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px}
.seo-prev .mk-search{grid-column:auto}
.seo-prev .mk-search .mk-row img{width:130px}
.seo-prev .mk-search .mk-t{font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.gprev{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px}
.g-site{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px}
.g-dot{width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex:none}
.g-t{color:#1a0dab; font-size:18px; line-height:1.3; margin:6px 0 3px; font-weight:500; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
[data-theme="dark"] .g-t{color:#8ab4f8}
.g-d{font-size:13px; color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.prev-mal{color:var(--danger) !important}
.prev-aviso{margin-top:8px; font-size:12px; color:var(--danger); font-weight:600}

/* Miniaturas más vistas del canal (F2) */
.mini-top{margin-top:22px}
.mini-top h3{font-size:13px; margin:0 0 10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.mini-top-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.mtv{position:relative; display:block; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-2)}
.mtv img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.mtv .mtv-dl{position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.72); color:#fff; border-radius:8px; font-size:12px; padding:3px 8px}
.mtv:hover{border-color:var(--accent)}

/* Ranking de canales analizados (F5) */
.rank-list{display:flex; flex-direction:column; gap:12px; max-width:560px; margin:26px auto 0}
.rank-item{display:flex; align-items:center; gap:16px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 16px; text-decoration:none; color:var(--text); transition:.15s}
.rank-item:hover{border-color:var(--accent)}
.rank-num{font-size:20px; font-weight:800; color:var(--accent); min-width:26px; text-align:center}
.rank-logo{width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; background:var(--border)}
.rank-name{font-weight:700; font-size:16px}
.rank-go{margin-left:auto; color:var(--muted); font-size:13px}
.rank-vacio{text-align:center; color:var(--muted); max-width:480px; margin:24px auto 0}

/* 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}

/* modo "todo en uno": las 4 herramientas de un video en una página */
.todo-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.todo-cab h3{margin:0; font-size:16px}
.todo-ver{flex:none}
.todo-body{min-height:24px}

/* compartir resultado (loop de viralidad: el usuario comparte → llega gente a la herramienta) */
.compartir{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border)}
.sh-lbl{font-size:13px; font-weight:700; color:var(--muted)}
.sh-btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  border-radius:999px; padding:7px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:.15s}
.sh-btn:hover{transform:translateY(-1px); border-color:var(--accent); color:var(--accent)}
.sh-btn.wa:hover{border-color:#25D366; color:#25D366}
.sh-btn.tg:hover{border-color:#229ED9; color:#229ED9}

/* 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 (centrado, estilo prototipo) */
footer{margin-top:54px; border-top:1px solid var(--border); padding-top:26px; color:var(--muted); font-size:13px; text-align:center}
.flinks{line-height:2.1}
.flinks a{color:var(--muted); text-decoration:none; margin:0 9px; cursor:pointer; white-space:nowrap}
.flinks a:hover{color:var(--accent)}
footer .copy{margin-top:16px}
/* compat: clases viejas por si alguna página aún las usa */
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; margin-bottom:22px; text-align:left}
.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}

/* guías (contenido SEO) */
.guia h1{font-size:30px; line-height:1.18; letter-spacing:-.02em; margin:0 0 18px}
.guia h2{font-size:20px; color:var(--text); margin:26px 0 8px}
.guia p,.guia li{color:var(--text); font-size:16px; line-height:1.7}
.guia .guia-cta{margin:32px 0; text-align:center; padding:26px 22px; border-radius:var(--radius);
  border:1px solid var(--border); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,var(--accent-2) 12%,var(--surface)))}
.guia-otras{margin-top:38px; border-top:1px solid var(--border); padding-top:22px}
.guia-otras h2{margin-top:0}
.guia-links{display:flex; flex-direction:column; gap:8px}
.guia-links a{color:var(--accent); text-decoration:none; font-weight:600}
.guia-links a:hover{text-decoration:underline}
/* índice de guías */
.guias-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px}
.guia-card{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}
.guia-card:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.guia-card h3{margin:0 0 6px; font-size:16px; color:var(--text)}
.guia-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.5}
@media(max-width:680px){ .guias-grid{grid-template-columns:1fr} }

/* 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,.seo-prev{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} }

/* === Landings por herramienta (estilo prototipo): 2da caja, opciones calidad/formato, resultado === */
.buscador.subir{margin-top:14px}
.buscador.subir::before{animation-direction:reverse}
.buscador.subir .caja-tit::before{background:var(--accent-2)}
.opciones{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:16px}
.opt-grupo{display:flex; align-items:center; gap:9px}
.opt-grupo .lbl{font-size:13px; color:var(--muted); font-weight:600}
.fmt-wrap{position:relative; display:inline-flex}
.fmt-srt{display:inline-flex; align-items:center; gap:5px}
.fmt-mas-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:40; min-width:200px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none}
.fmt-wrap.abierto .fmt-mas-menu{display:block; animation:fade .15s ease}
.fmt-mas-menu button{display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; border:0; background:transparent;
  color:var(--text); font:inherit; font-size:14px; font-weight:600; padding:9px 11px; border-radius:8px; cursor:pointer; text-align:left}
.fmt-mas-menu button:hover{background:var(--surface-2)}
.fmt-mas-menu button small{color:var(--muted); font-weight:500; font-size:11.5px}
.fmt-mas-menu button.activa{color:var(--accent)}
.res-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.res-cab .tit{font-weight:700; font-size:15px}
.res-texto{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:16px; font-size:14.5px; line-height:1.7; min-height:120px; max-height:320px; overflow:auto; white-space:pre-wrap}
textarea.res-texto{width:100%; resize:vertical}
.res-acc{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn.sm{padding:10px 16px; font-size:14px}
.otras{margin-top:46px}
.otras h2{font-size:18px; margin:0 0 4px; text-align:center}
.otras .lead{color:var(--muted); text-align:center; font-size:14px; margin:0 auto 20px}
.otras-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.otra{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:.18s}
.otra:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.otra .oic{font-size:22px; flex:none}
.otra b{font-size:14.5px; display:block}
.otra small{color:var(--muted); font-size:12.5px}
@media(max-width:680px){ .otras-grid{grid-template-columns:1fr} }
@media(min-width:481px) and (max-width:680px){ .otras-grid{grid-template-columns:1fr 1fr} }

/* "También te puede servir" (#5): siguiente paso sugerido tras un resultado */
.siguiente{margin-top:18px; padding-top:16px; border-top:1px dashed var(--border)}
.sig-tit{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:10px}
.sig-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sig-card{display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; transition:.16s; font:inherit; color:var(--text)}
.sig-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); transform:translateY(-1px); box-shadow:var(--shadow)}
.sig-ic{font-size:20px; line-height:1; flex-shrink:0}
.sig-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.sig-tx b{font-size:14px; font-weight:700}
.sig-tx small{font-size:12px; color:var(--muted); line-height:1.35}
@media(max-width:560px){ .sig-cards{grid-template-columns:1fr} }

/* ===== Rediseño "landings enfocadas" (trae el look de los prototipos a la web real) ===== */
/* Acciones del header (idioma + tema) */
.acciones{display:flex; align-items:center; gap:10px}
/* Selector de idioma DESPLEGABLE (reemplaza los 8 botones en fila) */
.lang{position:relative}
#langBtn{gap:6px}
#langBtn .caret{font-size:11px; opacity:.7}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:100; min-width:158px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none}
.lang-menu.show{display:block; animation:fade .18s ease}
.lang-menu button{display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--text);
  font:inherit; font-size:14px; padding:9px 12px; border-radius:8px; cursor:pointer}
.lang-menu button:hover{background:var(--surface-2)}
.lang-menu button.activa{color:var(--accent); font-weight:700}

/* Menú de herramientas tipo BARRA (reemplaza las tabs gigantes): discreto, sticky, con subrayado activo */
.toolnav{position:sticky; top:0; z-index:20; margin:6px 0 0; background:var(--bg); border-bottom:1px solid var(--border)}
.toolnav .inner{max-width:920px; margin:0 auto; padding:4px 0 0; display:flex; align-items:center; gap:10px; overflow-x:auto; scrollbar-width:none}
.toolnav .inner::-webkit-scrollbar{display:none}
.toolnav button{display:inline-flex; align-items:center; gap:6px; padding:12px 6px 11px; font:inherit; font-size:14.5px; font-weight:600;
  color:var(--muted); background:transparent; border:0; border-radius:0; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; transition:.15s}
.toolnav button:hover{color:var(--text)}
.toolnav button[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); background:transparent; box-shadow:none}

/* Caja protagonista con borde animado giratorio (el "buscador" del prototipo) */
@property --giro{syntax:"<angle>"; initial-value:0deg; inherits:false}
.card.buscador{position:relative; isolation:isolate}
.card.buscador::before{content:""; position:absolute; inset:0; border-radius:var(--radius); padding:1.5px;
  background:conic-gradient(from var(--giro), transparent 0 84%, var(--accent-2) 91%, var(--accent) 96%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:giroborde 4.5s linear infinite; pointer-events:none; z-index:3}
@keyframes giroborde{to{--giro:360deg}}
@media (prefers-reduced-motion:reduce){ .card.buscador::before{animation:none} }
.caja-tit{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:14px; letter-spacing:.01em}
.caja-tit::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none}

/* ===== Modo ligero (AUTOMÁTICO para conexiones lentas). No es un botón ni lo elige el visitante: lo
   activa solo su navegador si detecta ahorro de datos o poca señal (2g/downlink bajo). Apaga lo
   decorativo (animaciones/desenfoques) y deja todo 100% usable. Quien quiera, abre la versión completa. ===== */
html[data-ligero] *, html[data-ligero] *::before, html[data-ligero] *::after{ animation:none !important; transition:none !important }
html[data-ligero] .spin{ animation:gira .8s linear infinite !important }   /* el spinner sí: da feedback de carga */
html[data-ligero] body::before{ display:none }
html[data-ligero] .card.buscador::before{ display:none }
html[data-ligero] header, html[data-ligero] .hero{ backdrop-filter:none !important }
html[data-ligero] .lig-aviso{ display:flex }
.lig-aviso{ display:none; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:0 auto 14px; max-width:760px; padding:9px 14px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface-2); color:var(--muted); font-size:13px; text-align:center }
.lig-aviso button{ background:none; border:0; color:var(--accent); font-weight:700; cursor:pointer; font-size:13px; padding:0; text-decoration:underline }

/* ====== Árabe (RTL) ====== Todo scopeado bajo [dir=rtl]: el atributo dir="rtl" del <html> (que agrega el
   servidor sólo en páginas árabes) ya da vuelta el texto y la alineación por defecto; acá corregimos lo que
   usa left/right físico. NO afecta a ninguno de los otros 8 idiomas (riesgo cero para el LTR). */
[dir=rtl] body{text-align:right}
[dir=rtl] .mock-tit,[dir=rtl] .foot-grid,[dir=rtl] .sig-card,[dir=rtl] .lang-menu button,[dir=rtl] .fmt-mas-menu button{text-align:right}
[dir=rtl] .res-ul,[dir=rtl] .legal ul,[dir=rtl] .guia ul,[dir=rtl] .guia ol{padding-right:20px;padding-left:0}
[dir=rtl] .rank-go{margin-right:auto;margin-left:0}
[dir=rtl] .lang-menu,[dir=rtl] .fmt-mas-menu{right:auto;left:0}
[dir=rtl] .mtv .mtv-dl{right:auto;left:6px}
[dir=rtl] .ad-cerrar{right:auto;left:10px}
[dir=rtl] input[type=file]::file-selector-button{margin-right:0;margin-left:12px}
[dir=rtl] .guia,[dir=rtl] .guia table,[dir=rtl] .guia th,[dir=rtl] .guia td{text-align:right}