/* Estudio de reels · The AI Business. Paleta y tipografía de la marca: casi negro, blanco, lavanda, rojo y azul; Inter. */
@font-face { font-family: "Inter"; src: url("fuentes/Inter.ttf"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Pixel"; src: url("fuentes/Silkscreen.ttf"); font-weight: 400; }
@font-face { font-family: "Pixel"; src: url("fuentes/Silkscreen-Bold.ttf"); font-weight: 700; }

:root {
  --k: #0B0B0F; --w: #FFFFFF; --l: #D7D9E6; --r: #FA4D4D; --b: #5A70FA;
  --s1: #111117; --s2: #16161E; --s3: #1D1D27;
  --borde: rgba(215, 217, 230, .09); --borde2: rgba(215, 217, 230, .16);
  --tenue: rgba(215, 217, 230, .62); --muy-tenue: rgba(215, 217, 230, .38);
  --radio: 18px; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--k); color: var(--w); font: 400 15px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; border-radius: 8px; }

/* luz de marca de fondo: rojo a azul, muy baja */
body::before { content: ""; position: fixed; inset: auto -20% -40% -20%; height: 70vh; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 60% at 30% 100%, rgba(250, 77, 77, .10), transparent 70%), radial-gradient(60% 60% at 75% 100%, rgba(90, 112, 250, .13), transparent 70%); }

.app { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; max-width: 1360px; margin: 0 auto;
  padding: 36px max(24px, env(safe-area-inset-right)) 80px max(24px, env(safe-area-inset-left)); }

/* cabecera */
.cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 44px; }
.cab img { height: 22px; display: block; }
.cab .sal { color: var(--muy-tenue); font-size: 13px; }
.cab .sal:hover { color: var(--l); }
h1 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; margin: 0 0 14px; text-wrap: balance; }
h1 em { font-style: normal; color: var(--r); }
.intro { color: var(--tenue); font-size: 17px; max-width: 54ch; margin: 0 0 48px; }

/* pasos */
.paso { position: relative; padding: 30px 0 34px; border-top: 1px solid var(--borde); transition: opacity .35s; }
.paso.bloq { opacity: .32; pointer-events: none; }
.paso-cab { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.paso-n { font-size: 13px; font-weight: 600; color: var(--r); letter-spacing: .06em; min-width: 22px; }
.paso h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.paso-res { margin-left: auto; color: var(--muy-tenue); font-size: 13px; text-align: right; }

.rejilla { display: grid; gap: 12px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.op { position: relative; text-align: left; background: var(--s1); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 18px 17px; transition: border-color .2s, background .2s, transform .2s; min-width: 0; }
.op:hover:not(:disabled) { border-color: var(--borde2); background: var(--s2); }
.op:active:not(:disabled) { transform: scale(.985); }
.op.sel { border-color: var(--b); background: linear-gradient(180deg, rgba(90, 112, 250, .10), rgba(90, 112, 250, .03)); box-shadow: 0 0 0 1px var(--b) inset, 0 10px 40px -14px rgba(90, 112, 250, .55); }
.op.sel::after { content: ""; position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.op:disabled { opacity: .45; }
.op-t { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.01em; padding-right: 26px; }
.op-d { display: block; color: var(--tenue); font-size: 13.5px; margin-top: 5px; line-height: 1.45; }
.op-x { display: block; color: var(--r); font-size: 12.5px; margin-top: 8px; }

/* estilos con vista animada */
.estilo { padding: 0; overflow: hidden; }
.estilo canvas { display: block; width: 100%; aspect-ratio: 9 / 11; object-fit: cover; object-position: top; background: var(--s2); }
.estilo .pie { padding: 16px 18px 18px; }

/* guiones */
.guion { padding: 20px; }
.guion .idea { font-size: 12.5px; color: var(--tenue); font-weight: 500; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.guion .gancho { font-size: 21px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; margin: 0 0 14px; padding-right: 26px; text-wrap: balance; }
.guion .gancho b { color: var(--r); font-weight: 600; }
.guion .dato { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--tenue); padding: 10px 12px; background: var(--s2); border-radius: 12px; margin-bottom: 14px; }
.guion .dato strong { color: var(--r); font-weight: 600; font-size: 15px; white-space: nowrap; }
.guion ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; counter-reset: e; }
.guion li { font-size: 13.5px; color: var(--l); line-height: 1.45; padding-left: 26px; position: relative; counter-increment: e; }
.guion li::before { content: counter(e); position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 6px; background: var(--s3); color: var(--muy-tenue); font-size: 11px; display: grid; place-items: center; font-weight: 600; }
.ia-tag { color: var(--b); }

/* voces */
.voz { display: flex; align-items: center; gap: 14px; }
.voz .play { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; transition: background .2s; }
.voz .play:hover { background: #262634; }
.voz .play svg { width: 16px; height: 16px; fill: var(--w); }
.voz.sonando .play { background: var(--r); }

/* botones */
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; transition: transform .15s, box-shadow .2s, background .2s, opacity .2s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-p { background: var(--r); color: var(--w); box-shadow: 0 10px 34px -10px rgba(250, 77, 77, .7); }
.btn-p:hover:not(:disabled) { box-shadow: 0 14px 44px -8px rgba(250, 77, 77, .85); }
.btn-p:disabled { opacity: .35; box-shadow: none; }
.btn-s { background: var(--s2); border: 1px solid var(--borde2); }
.btn-s:hover:not(:disabled) { background: var(--s3); }
.btn svg { width: 18px; height: 18px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* cargando */
.cargando { display: grid; gap: 12px; }
.cargando .ph { height: 168px; border-radius: var(--radio); background: linear-gradient(100deg, var(--s1) 30%, var(--s2) 50%, var(--s1) 70%); background-size: 300% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -150% 0; } }
.nota { color: var(--tenue); font-size: 13.5px; margin: 12px 0 0; }
.error { color: var(--r); font-size: 14px; margin: 12px 0 0; }

/* progreso de creación */
.prog { margin-top: 22px; display: grid; gap: 12px; }
.prog-fila { display: flex; align-items: center; gap: 12px; color: var(--muy-tenue); font-size: 14.5px; transition: color .3s; }
.prog-fila .ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--borde2); display: grid; place-items: center; flex: none; }
.prog-fila.act { color: var(--w); }
.prog-fila.act .ic { border-color: var(--r); border-top-color: transparent; animation: gira .8s linear infinite; }
.prog-fila.ok { color: var(--l); }
.prog-fila.ok .ic { background: var(--b); border-color: var(--b); }
.prog-fila.ok .ic::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
@keyframes gira { to { transform: rotate(360deg); } }
.barra { height: 4px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--r), var(--b)); transition: width .2s; }

/* resultado */
.post { margin-top: 26px; background: var(--s1); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; }
.post h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--tenue); }
.post p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; max-width: 65ch; }
.post .tags { color: var(--b); font-size: 14px; }

/* vista previa: el móvil */
.vista { position: sticky; top: 28px; align-self: start; display: grid; justify-items: center; gap: 18px; }
.movil { position: relative; width: 340px; aspect-ratio: 9 / 16; border-radius: 46px; padding: 10px; background: #1c1c22;
  box-shadow: 0 0 0 1.5px rgba(215, 217, 230, .22) inset, 0 40px 120px -30px rgba(90, 112, 250, .35), 0 30px 80px -20px rgba(250, 77, 77, .18); }
.movil canvas, .movil video { display: block; width: 100%; height: 100%; border-radius: 36px; background: var(--k); object-fit: cover; }
.movil video { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.movil .isla { position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 92px; height: 26px; border-radius: 20px; background: var(--k); z-index: 2; }
.vista-pie { color: var(--muy-tenue); font-size: 13px; text-align: center; min-height: 20px; }
.vista-pie b { color: var(--l); font-weight: 600; }

@media (max-width: 1080px) {
  /* en móvil: marca, título y explicación primero; luego la vista previa y los pasos */
  .app { display: flex; flex-direction: column; gap: 0; padding-top: 24px; }
  .app > main { display: contents; }
  .cab { order: 1; margin-bottom: 28px; } h1 { order: 2; } .intro { order: 3; margin-bottom: 28px; }
  .vista { order: 4; align-self: center; position: relative; top: 0; margin-bottom: 36px; gap: 12px; }
  .paso { order: 5; }
  .movil { width: min(250px, 64vw); border-radius: 38px; padding: 8px; }
  .movil canvas, .movil video { border-radius: 30px; }
  .movil video { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .movil .isla { top: 15px; width: 68px; height: 20px; }
}
@media (max-width: 640px) {
  .r2, .r3 { grid-template-columns: 1fr; }
  h1 { font-size: 36px; } .intro { font-size: 16px; }
  .paso { padding: 24px 0 26px; } .paso h2 { font-size: 20px; }
  .estilo .pie { padding: 12px 14px 14px; } .estilo .op-d { font-size: 12.5px; }
  .guion .gancho { font-size: 19px; }
  .btn { width: 100%; }
  .estilo-r { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .paso-res { display: none; }
}

/* acceso */
.acceso { min-height: 100svh; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); position: relative; z-index: 1; }
.acceso form { width: min(400px, 100%); display: grid; gap: 14px; }
.acceso img { height: 22px; margin-bottom: 28px; }
.acceso h1 { font-size: 36px; margin-bottom: 4px; }
.acceso p { color: var(--tenue); margin: 0 0 14px; }
.acceso input { height: 54px; border-radius: 14px; border: 1px solid var(--borde2); background: var(--s1); color: var(--w); font: inherit; font-size: 16px; padding: 0 18px; }
.acceso input:focus { outline: none; border-color: var(--b); box-shadow: 0 0 0 3px rgba(90, 112, 250, .25); }