/* Sitio público de SHIRUSHI. Usa los tokens y piezas del guion visual (guion.css); aquí solo el armado de la página. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; width: min(1120px, 100%); margin: 0 auto; padding: 0 var(--e-5); }

/* barra superior: el logo y lo justo */
.barra-sitio { position: sticky; top: 0; z-index: var(--z-dock); display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); width: min(1120px, 100%); margin: 0 auto; padding: var(--e-4) var(--e-5); background: color-mix(in srgb, var(--s-fondo) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 var(--t-15) var(--fuente-display); letter-spacing: 0.14em; }
.logo svg { width: 28px; height: 28px; }
.t-logo path { fill: none; stroke: var(--s-texto); stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.barra-acciones { display: flex; align-items: center; gap: var(--e-1); }
.cuenta-boton { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s-accion); color: var(--s-sobre-accion); font-size: var(--t-13); font-weight: 600; }
.avatar.grande { width: 52px; height: 52px; font-size: var(--t-19); }

/* portada: la firma «Encaje» del guion es el protagonista */
.portada-sitio { min-height: min(calc(100dvh - 76px), 820px); padding: var(--e-6) 0 var(--e-8); }
.portada-sitio .jp { font: 600 var(--t-24) var(--fuente-jp); color: var(--s-texto-3); margin-bottom: var(--e-3); }
.portada-sitio h1 { font: 600 var(--t-76)/0.98 var(--fuente-display); letter-spacing: -0.04em; max-width: 9ch; }
.nota-descarga { margin-top: var(--e-3); font-size: var(--t-13); color: var(--s-texto-3); min-height: 1.5em; }

/* cómo funciona: tres pasos, nada más */
.como-funciona { padding: var(--e-9) 0; border-top: 1px solid var(--s-linea); scroll-margin-top: 72px; }
.como-funciona h2, .final h2 { font: 600 var(--t-38)/1.1 var(--fuente-display); letter-spacing: -0.025em; }
.como-funciona ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); margin: var(--e-7) 0 0; padding: 0; list-style: none; }
.como-funciona li { display: grid; gap: var(--e-2); align-content: start; }
.como-funciona .num { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--e-2); border-radius: 50%; border: 1px solid var(--s-linea-2); font: 600 var(--t-13) var(--fuente-display); color: var(--s-texto-2); }
.como-funciona b { font: 600 var(--t-19) var(--fuente-display); }
.como-funciona p { color: var(--s-texto-2); max-width: 32ch; }

.final { display: grid; justify-items: center; gap: var(--e-5); padding: var(--e-9) 0; border-top: 1px solid var(--s-linea); text-align: center; }

.pie-sitio { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); width: min(1120px, 100%); margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-7); font-size: var(--t-13); color: var(--s-texto-3); }
.pie-sitio nav { display: flex; gap: var(--e-4); }
.pie-sitio a { color: var(--s-texto-2); text-decoration: none; }
.pie-sitio a:hover { color: var(--s-texto); }

/* ventanas de cuenta */
.dialogo-cuenta { width: min(440px, calc(100vw - 32px)); }
.dialogo-cuenta form { display: contents; }
.dialogo-cuenta .lead { color: var(--s-texto-2); font-size: var(--t-15); }
.dialogo-cuenta footer { justify-content: space-between; }
.error-form { padding: 10px 12px; border-radius: var(--r-m); background: var(--s-grave-suave); color: var(--s-grave-texto); font-size: var(--t-13); }
.yo { display: flex; align-items: center; gap: var(--e-3); }
.yo div { display: grid; min-width: 0; }
.yo b { font: 600 var(--t-19) var(--fuente-display); }
.yo small { color: var(--s-texto-3); overflow: hidden; text-overflow: ellipsis; }
.descargas { display: grid; gap: var(--e-2); }
.descargas .boton { width: 100%; }
.descargas p { font-size: var(--t-13); color: var(--s-texto-2); }

@media (max-width: 860px) {
  .portada-sitio { padding-top: var(--e-4); gap: var(--e-5); }
  .portada-sitio h1 { font-size: var(--t-48); }
  .como-funciona ol { grid-template-columns: 1fr; gap: var(--e-5); }
}
@media (max-width: 760px) {
  .barra-sitio { padding: var(--e-3) var(--e-4); }
  main { padding: 0 var(--e-4); }
  .barra-acciones .boton.fantasma { display: none; }
  .portada-sitio .acciones .boton { flex: 1 1 100%; }
  .portada-sitio .escena { max-width: 210px; }
  .como-funciona, .final { padding: var(--e-8) 0; }
  .como-funciona h2, .final h2 { font-size: var(--t-30); }
  .pie-sitio { flex-direction: column; align-items: flex-start; padding: var(--e-5) var(--e-4) var(--e-7); }
  .dialogo-cuenta { width: 100vw; }
}

/* ───────── portada larga (embudo): una idea por bloque, mucho aire ───────── */
.bloque { padding: var(--e-9) 0; border-top: 1px solid var(--s-linea); }
.bloque h2 { font: 600 var(--t-48)/1.05 var(--fuente-display); letter-spacing: -0.03em; max-width: 18ch; }
.bloque .ceja { display: block; margin-bottom: var(--e-3); }
.bajada { margin-top: var(--e-4); font-size: var(--t-19); line-height: 1.5; color: var(--s-texto-2); max-width: 46ch; }
.tenue { color: var(--s-texto-3); }
.centro { display: grid; justify-items: center; text-align: center; }
.centro h2, .centro .bajada { margin-left: auto; margin-right: auto; }
.problema h2 { font-size: var(--t-60); max-width: 16ch; }
.final .bajada { margin-top: 0; }
.final .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }

/* demostración: línea de tiempo + celular */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-7); align-items: center; }
.demo-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4); margin: var(--e-5) 0 0; padding: 0; list-style: none; font-size: var(--t-13); color: var(--s-texto-2); }
.demo-leyenda li { display: flex; align-items: center; gap: 6px; }
.demo-leyenda i { width: 14px; height: 10px; border-radius: 3px; }
.demo-visual { position: relative; display: grid; gap: var(--e-3); padding: var(--e-6) var(--e-5) var(--e-5); border-radius: var(--r-xl); background: var(--s-papel); border: 1px solid var(--s-linea); }
.linea-tiempo { display: flex; gap: 3px; height: 44px; padding: 6px; border-radius: var(--r-m); background: var(--s-fondo); border: 1px solid var(--s-linea); overflow: hidden; }
.tramo { flex: var(--ancho) 1 0; min-width: 0; border-radius: 5px; transition: flex-grow var(--d-lento) var(--salida), opacity var(--d-medio), margin var(--d-lento) var(--salida); }
.m-habla { background: var(--s-texto); }
.m-silencio { background: var(--s-linea-2); }
.m-repite { background: repeating-linear-gradient(135deg, var(--s-grave) 0 4px, color-mix(in srgb, var(--s-grave) 45%, transparent) 4px 8px); }
.linea-tiempo.editado .m-silencio, .linea-tiempo.editado .m-repite { flex-grow: 0; opacity: 0; margin: 0 -1.5px; }
.demo-pie { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-13); color: var(--s-texto-3); }
.duracion { display: flex; align-items: center; gap: 8px; font-family: var(--fuente-tiempo); }
.duracion b { font-weight: 600; color: var(--s-texto-3); transition: color var(--d-medio); }
.demo.editado #dur-despues, .demo:not(.editado) #dur-antes { color: var(--s-texto); }
.demo-visual .cel { justify-self: center; margin-top: var(--e-3); }

/* celular de ejemplo (fondos iguales a los del Marketplace) */
.cel { position: relative; width: 180px; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; border: 5px solid #0d0d0d; box-shadow: var(--sombra-3); background: #222; color: #fff; isolation: isolate; }
.cel-hook { position: absolute; top: 16%; left: 0; right: 0; padding: 0 12px; text-align: center; font: 800 17px/1.05 var(--fuente-display); letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.cel-sub { position: absolute; top: calc(16% + 42px); left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 600; opacity: .9; }
.cel-palabra { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); padding: 2px 10px; font: 800 18px var(--fuente-display); text-shadow: 0 2px 8px rgba(0,0,0,.45); white-space: nowrap; }
.cel-palabra.pop { animation: palabra var(--d-medio) var(--resorte); }
@keyframes palabra { from { transform: translateX(-50%) scale(.7); opacity: .3; } }

/* estilos (Superskills) */
.vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); margin-top: var(--e-7); }
.estilo { display: grid; justify-items: center; gap: 4px; text-align: center; }
.estilo .cel { margin-bottom: var(--e-4); transition: transform var(--d-medio) var(--resorte); }
.estilo:hover .cel { transform: translateY(-6px) rotate(-1.5deg); }
.estilo b { font: 600 var(--t-19) var(--fuente-display); }
.estilo small { color: var(--s-texto-2); font-size: var(--t-13); max-width: 26ch; }

/* revisor */
.revision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; }
.revisor { padding: var(--e-5); border-radius: var(--r-xl); background: var(--s-papel); border: 1px solid var(--s-linea); min-height: 210px; }
.revisor-cab { display: flex; align-items: center; gap: 10px; padding-bottom: var(--e-3); margin-bottom: var(--e-3); border-bottom: 1px solid var(--s-linea); }
.revisor-cab b { font-weight: 600; }
.revisor-cab small { margin-left: auto; font-size: var(--t-13); color: var(--s-texto-2); }
.revisor-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--s-texto-3); transition: background var(--d-medio); }
.revisor[data-estado="mal"] .revisor-punto { background: var(--s-grave); }
.revisor[data-estado="corrigiendo"] .revisor-punto { background: var(--s-atencion); }
.revisor[data-estado="bien"] .revisor-punto { background: var(--s-bien); }
#revisor-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
#revisor-lista li { position: relative; padding: 10px 12px 10px 34px; border-radius: var(--r-m); background: var(--s-fondo); font-size: var(--t-13); line-height: 1.45; transition: opacity var(--d-medio), transform var(--d-medio); animation: entra var(--d-medio) var(--salida) backwards; }
#revisor-lista li::before { content: ""; position: absolute; left: 13px; top: 15px; width: 9px; height: 9px; border-radius: 50%; }
#revisor-lista li.mal::before { background: var(--s-grave); } #revisor-lista li.mal { color: var(--s-grave-texto); }
#revisor-lista li.aviso::before { background: var(--s-atencion); } #revisor-lista li.aviso { color: var(--s-atencion-texto); }
#revisor-lista li.bien::before { background: var(--s-bien); } #revisor-lista li.bien { color: var(--s-bien-texto); font-weight: 600; }
#revisor-lista li.corregido { opacity: .35; text-decoration: line-through; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* sonidos */
.cifras { display: flex; gap: var(--e-7); margin-top: var(--e-6); }
.cifras span { display: grid; font-size: var(--t-13); color: var(--s-texto-2); }
.cifras b { font: 600 var(--t-48)/1 var(--fuente-display); letter-spacing: -0.03em; color: var(--s-texto); }
.chips-sonido { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.chip-sonido { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pildora); border: 1px solid var(--s-linea-2); background: var(--s-fondo); font-size: 14px; font-weight: 500; transition: transform var(--d-rapido) var(--resorte), background var(--d-rapido); }
.chip-sonido:hover { background: var(--s-papel); }
.chip-sonido:active { transform: scale(.94); }
.chip-sonido.sonando { background: var(--s-accion); color: var(--s-sobre-accion); border-color: var(--s-accion); }

/* calendario */
.redes, .logos-ia { display: flex; gap: var(--e-2); margin-top: var(--e-5); }
.logos-ia { justify-content: center; margin: 0 0 var(--e-5); gap: var(--e-3); }
.logo-int { display: inline-grid; place-items: center; border-radius: 26%; flex: none; }
.logo-int svg { width: 56%; height: 56%; }

/* preguntas: desplegables */
.faq { display: grid; margin-top: var(--e-6); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--s-linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); min-height: 64px; cursor: pointer; list-style: none; font: 600 var(--t-19) var(--fuente-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 26px; color: var(--s-texto-3); transition: transform var(--d-medio) var(--resorte); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 var(--e-5); color: var(--s-texto-2); max-width: 62ch; }

@media (max-width: 860px) {
  .bloque { padding: var(--e-8) 0; }
  .bloque h2 { font-size: var(--t-38); }
  .problema h2 { font-size: var(--t-48); }
  .demo, .revision { grid-template-columns: 1fr; gap: var(--e-6); }
  .vitrina { grid-template-columns: 1fr; gap: var(--e-7); }
}
@media (max-width: 760px) {
  .bloque h2 { font-size: var(--t-30); }
  .problema h2 { font-size: var(--t-38); }
  .bajada { font-size: var(--t-15); }
  .cifras { gap: var(--e-5); } .cifras b { font-size: var(--t-38); }
  .vitrina { display: flex; gap: var(--e-4); margin-left: calc(-1 * var(--e-4)); margin-right: calc(-1 * var(--e-4)); padding: 0 var(--e-4) var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; }
  .estilo { flex: 0 0 72%; scroll-snap-align: center; }
  .final .acciones .boton { flex: 1 1 100%; }
}

/* fotos reales en los celulares: acercamiento lento, como cámara en mano */
.cel-foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; animation: camara 14s ease-in-out infinite alternate; }
.cel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 34%, transparent 60%, rgba(0,0,0,.38) 100%); }
@keyframes camara { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }

/* el problema: foto real de una edición a mano */
.problema { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--e-7); align-items: center; }
.foto-edicion { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sombra-3); }
.foto-edicion img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reloj-edicion { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pildora); background: rgba(13,13,13,.78); color: #fff; font-size: var(--t-13); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reloj-edicion b { font: 600 var(--t-15) var(--fuente-tiempo); font-variant-numeric: tabular-nums; }
.punto-rec { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }

/* la app: ventana de Mac con capturas reales */
.pestanas-app { display: inline-flex; gap: 4px; margin-top: var(--e-5); padding: 4px; border-radius: var(--r-pildora); background: var(--s-papel-2); }
.pestanas-app button { min-height: 40px; padding: 0 18px; border-radius: var(--r-pildora); font-size: 14px; font-weight: 500; color: var(--s-texto-2); transition: background var(--d-medio), color var(--d-medio), box-shadow var(--d-medio); }
.pestanas-app button[aria-selected="true"] { background: var(--s-fondo); color: var(--s-texto); box-shadow: var(--sombra-2); }
.ventana { margin: var(--e-6) auto 0; max-width: 1040px; border-radius: 14px; overflow: hidden; background: var(--s-fondo); border: 1px solid var(--s-linea-2); box-shadow: 0 40px 100px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.08); }
.ventana-barra { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--s-papel-2); border-bottom: 1px solid var(--s-linea); }
.ventana-barra i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .ventana-barra i:nth-child(2) { background: #febc2e; } .ventana-barra i:nth-child(3) { background: #28c840; }
.ventana-barra span { margin: 0 auto; padding-right: 50px; font-size: 12px; font-weight: 600; color: var(--s-texto-3); }
.ventana-pantallas { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.ventana-pantallas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.015); transition: opacity var(--d-lento) var(--salida), transform 900ms var(--salida); }
.ventana-pantallas img.activa { opacity: 1; transform: none; }
.nota-captura { display: flex; justify-content: center; margin-top: var(--e-3); }

/* publicar: semana real + tarjeta de programado */
.semana-real { position: relative; padding-bottom: 28px; }
.semana-real img { width: 100%; height: auto; border-radius: var(--r-l); border: 1px solid var(--s-linea); box-shadow: var(--sombra-2); }
.semana-real .ejemplo { position: absolute; right: 4px; bottom: 0; }
.publicar .redes { justify-content: center; }
.semana-real { margin-top: var(--e-7); }
.programado { position: absolute; left: 52%; top: 66%; display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-l); background: var(--s-flotante); box-shadow: var(--sombra-3); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity var(--d-lento) var(--salida), transform var(--d-lento) var(--resorte); }
.programado.visto { opacity: 1; transform: none; transition-delay: .3s; }
.programado-cab { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.programado-redes { display: flex; gap: 6px; }
.programado-redes .logo-int { opacity: 0; transform: scale(.5); transition: opacity var(--d-medio), transform var(--d-medio) var(--resorte); }
.programado.visto .programado-redes .logo-int { opacity: 1; transform: none; }
.programado.visto .programado-redes .logo-int:nth-child(1) { transition-delay: .7s; } .programado.visto .programado-redes .logo-int:nth-child(2) { transition-delay: .85s; } .programado.visto .programado-redes .logo-int:nth-child(3) { transition-delay: 1s; }
.credito { color: var(--s-texto-3); }

/* aparecer al bajar */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--salida), transform 900ms var(--salida); transition-delay: var(--retraso, 0ms); }
.revelar.visto { opacity: 1; transform: none; }
.ventana.revelar { transform: perspective(1400px) rotateX(16deg) translateY(40px) scale(.94); transform-origin: 50% 0; transition-duration: 900ms, 1200ms; }
.ventana.revelar.visto { transform: none; }

@media (max-width: 860px) {
  .problema { grid-template-columns: 1fr; }
  .foto-edicion { aspect-ratio: 4 / 3; }
  .programado { left: auto; right: 8px; top: auto; bottom: 34px; }
}
@media (max-width: 760px) {
  .pestanas-app button { padding: 0 12px; font-size: 13px; }
  .ventana { border-radius: 10px; }
  .ventana-pantallas { aspect-ratio: 16 / 12; }
  .semana-real { overflow-x: auto; }
  .semana-real img { width: 760px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cel-foto { animation: none; } }